/* Ámbar · Café de especialidad (demo): base, cabecera y escena de sabores. Móvil primero. */

:root {
  --espresso: #1e1410;
  --espresso-2: #2a1c16;
  --espresso-3: #140d0a;
  --crema: #f3e9dc;
  --ambar: #d98e2b;
  --ambar-claro: #e8a94a;
  --salvia: #7c8b6f;

  --fuente: 'Bricolage Grotesque', 'Arial Narrow', system-ui, sans-serif;

  /* Métricas de la palabra gigante (las recalcula js/app.js con la fuente real). */
  --pal-pad: 0.12em;

  --margen: 20px;
  --seguro-arriba: env(safe-area-inset-top, 0px);
  --seguro-abajo: env(safe-area-inset-bottom, 0px);
  --alto: 100svh;
}
@media (min-width: 900px) { :root { --margen: 48px; } }

*, *::before, *::after { box-sizing: border-box; }

html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  background: var(--espresso);
}
body {
  margin: 0;
  overflow-x: clip;
  font-family: var(--fuente);
  font-optical-sizing: auto;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--crema);
  background: var(--espresso);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; }

:focus-visible { outline: 3px solid var(--ambar); outline-offset: 3px; border-radius: 6px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.saltar {
  position: fixed; left: var(--margen); top: 12px; z-index: 200;
  padding: 10px 16px; border-radius: 999px;
  background: var(--crema); color: var(--espresso); font-weight: 600; text-decoration: none;
  transform: translateY(-150%);
}
.saltar:focus-visible { transform: none; }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- Pantalla de carga ---------- */
.carga { display: none; }
.js .carga {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-content: center; justify-items: center; gap: 26px;
  background: var(--espresso);
}
.carga__logo { width: min(56vw, 240px); }
.carga__barra { width: min(56vw, 240px); height: 3px; border-radius: 3px; background: rgb(243 233 220 / 0.16); overflow: hidden; }
.carga__barra span {
  display: block; height: 100%; width: 100%; background: var(--ambar);
  transform-origin: left center; transform: scaleX(0); transition: transform 0.25s ease-out;
}

/* ---------- Cabecera ---------- */
.cabecera {
  position: fixed; z-index: 50;
  top: calc(var(--seguro-arriba) + 12px); left: var(--margen); right: var(--margen);
  display: flex; align-items: center; justify-content: space-between;
  pointer-events: none;
}
.cabecera__logo, .cabecera__nav {
  pointer-events: auto;
  border-radius: 999px;
  background: rgb(30 20 16 / 0.84);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px rgb(243 233 220 / 0.08);
}
.cabecera__logo { display: inline-flex; padding: 9px 16px 9px 10px; }
.cabecera__logo img { width: 112px; }
.cabecera__nav { display: none; }
@media (min-width: 900px) {
  .cabecera { top: 22px; }
  .cabecera__logo img { width: 138px; }
  .cabecera__nav { display: flex; gap: 2px; padding: 6px; }
  .cabecera__nav a {
    padding: 9px 16px; border-radius: 999px; text-decoration: none; font-weight: 500; font-size: 0.95rem;
    transition: background-color 0.2s ease, color 0.2s ease;
  }
  .cabecera__nav a:hover { background: var(--ambar); color: var(--espresso); }
}

/* ---------- Escena de sabores ---------- */
.escenario { position: relative; height: var(--alto); min-height: 560px; overflow: hidden; isolation: isolate; }
.capa { position: absolute; inset: 0; pointer-events: none; }

.fondo { position: absolute; inset: 0; }
.fondo__topo { position: absolute; inset: 0; background-size: cover; background-position: 50% 46%; }

.particulas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.particulas--lejos { filter: blur(2.5px); opacity: 0.55; }
.particulas--media { opacity: 0.85; }
.particulas--cerca { z-index: 3; }

/* Palabra gigante: condensada y pesada; las letras se recortan en su propia caja */
.palabra {
  position: absolute; left: 0; right: 0; top: 30%;
  margin: 0;
  display: flex; justify-content: center;
  font-family: var(--fuente); font-weight: 800; font-stretch: 75%;
  font-variation-settings: 'opsz' 96;
  line-height: 1; letter-spacing: -0.012em;
  white-space: nowrap; text-transform: uppercase;
  overflow: clip; padding-top: var(--pal-pad);
}
.palabra__letra { display: inline-block; will-change: transform; }

/* Producto */
.producto {
  position: absolute; left: 0; right: 0; margin: 0 auto;
  top: calc(var(--alto) * 0.34);
  width: min(84vw, 520px);
  height: calc(var(--alto) * 0.4);
  z-index: 2;
  will-change: transform, opacity;
}
.producto__entrada, .producto__flota { width: 100%; height: 100%; }
.producto img {
  width: 100%; height: 100%; object-fit: contain; object-position: 50% 40%;
  filter: drop-shadow(0 30px 32px rgb(20 13 10 / 0.42));
}
.producto[data-forma='alta'] { width: min(62vw, 420px); height: calc(var(--alto) * 0.38); }

/* Titular */
.hero {
  position: absolute; z-index: 4;
  top: calc(var(--seguro-arriba) + 84px); left: var(--margen); right: var(--margen);
}
.hero__titulo {
  margin: 0; max-width: 17ch;
  font-weight: 760; font-stretch: 80%;
  font-size: clamp(2rem, 9.2vw, 3.6rem); line-height: 0.96; letter-spacing: -0.015em;
  color: var(--crema); text-wrap: balance;
}
.hero__bajada { display: none; }

.hero__acciones {
  position: absolute; z-index: 6;
  left: var(--margen); right: var(--margen); bottom: calc(var(--seguro-abajo) + 20px);
  display: flex; gap: 10px;
}
.boton {
  flex: 1 1 0;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 22px; border: 0; border-radius: 999px; cursor: pointer;
  font-weight: 650; font-size: 1rem; text-decoration: none; white-space: nowrap;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
.boton--principal {
  background: var(--ambar); color: var(--espresso);
  box-shadow: inset 0 0 0 1.5px rgb(30 20 16 / 0.28), 0 12px 26px -14px rgb(20 13 10 / 0.7);
}
.boton--principal:hover { background: var(--ambar-claro); }
.boton--vidrio {
  background: rgb(30 20 16 / 0.8); color: var(--crema);
  box-shadow: inset 0 0 0 1px rgb(243 233 220 / 0.24), 0 12px 26px -14px rgb(20 13 10 / 0.7);
}
.boton--vidrio:hover { background: rgb(30 20 16 / 0.94); }

/* Insignia giratoria */
.insignia { position: absolute; z-index: 5; width: 96px; height: 96px; right: 12px; top: calc(var(--alto) * 0.58); }
.insignia__svg { width: 100%; height: 100%; overflow: visible; }
.insignia__disco { fill: var(--espresso); stroke: var(--ambar); stroke-width: 2; }
.insignia__texto { font-family: var(--fuente); font-weight: 650; font-size: 16.5px; letter-spacing: 0.05em; word-spacing: 0.2em; fill: var(--crema); }

/* Riel de sabores: progreso de la escena */
.riel {
  position: absolute; z-index: 6; list-style: none; margin: 0; padding: 0;
  left: var(--margen); right: var(--margen); top: calc(var(--seguro-arriba) + 72px);
  display: flex; gap: 6px; padding: 4px 12px; border-radius: 999px;
  background: rgb(30 20 16 / 0.72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.riel li { flex: 1; }
.riel button {
  display: block; width: 100%; padding: 6px 0; border: 0; background: none; cursor: pointer; color: inherit;
}
.riel__nombre { display: none; }
.riel__pista { display: block; height: 3px; border-radius: 3px; background: rgb(243 233 220 / 0.25); overflow: hidden; }
.riel__lleno { display: block; height: 100%; background: var(--ambar); transform-origin: left center; transform: scaleX(0); }
.riel li:first-child .riel__lleno { transform: scaleX(1); }
/* En móvil el riel va arriba y el titular baja un poco para no chocar */
@media (max-width: 899px) { .hero { top: calc(var(--seguro-arriba) + 108px); } }

/* Tarjeta de producto */
.tarjeta {
  position: absolute; z-index: 5;
  left: var(--margen); right: var(--margen); bottom: calc(var(--seguro-abajo) + 90px);
  color: var(--tinta);
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'nombre precio' 'desc desc';
  column-gap: 16px; align-items: baseline;
}
.tarjeta__nombre { grid-area: nombre; margin: 0; font-weight: 760; font-stretch: 85%; font-size: 1.75rem; line-height: 1.05; letter-spacing: -0.01em; }
.tarjeta__desc { grid-area: desc; margin: 6px 0 0; font-size: 1rem; line-height: 1.38; max-width: 36ch; }
.tarjeta__precio {
  grid-area: precio; margin: 0;
  display: flex; align-items: baseline; gap: 12px; justify-content: flex-end;
  font-weight: 700; font-size: 1.5rem; line-height: 1; color: var(--acento); font-variant-numeric: tabular-nums;
}
.tarjeta__precio small { font-size: 0.8rem; font-weight: 500; margin-left: 3px; color: var(--tinta); }

/* Escritorio */
@media (min-width: 900px) {
  .producto { top: 0; bottom: 0; margin: auto; width: min(44vw, 700px); height: min(62vh, 640px); }
  .producto[data-forma='alta'] { width: min(34vw, 460px); height: min(70vh, 700px); }
  .producto img { object-position: 50% 50%; }
  .hero { top: 112px; right: auto; }
  .hero__titulo { max-width: none; font-size: clamp(2.2rem, 3.3vw, 3.3rem); }
  .hero__bajada { display: block; margin: 8px 0 0; font-size: 1.1rem; color: rgb(243 233 220 / 0.82); }
  .hero__acciones { left: auto; right: var(--margen); bottom: 44px; }
  .boton { flex: 0 0 auto; min-height: 56px; padding: 0 28px; font-size: 1.05rem; }
  .insignia { width: 148px; height: 148px; right: 13vw; top: 17vh; }
  .tarjeta { left: var(--margen); right: auto; bottom: 44px; width: 440px; }
  .tarjeta__nombre { font-size: 2.2rem; }
  .tarjeta__precio { font-size: 1.8rem; }

  /* Riel vertical a la derecha con nombres de sabor */
  .riel {
    left: auto; right: var(--margen); top: 50%; transform: translateY(-50%);
    flex-direction: column; gap: 4px; width: 196px; padding: 12px 16px; border-radius: 20px;
  }
  .riel button { display: grid; grid-template-columns: 3px 1fr; gap: 12px; padding: 4px 0; text-align: left; }
  .riel__pista { width: 3px; height: 26px; }
  .riel__lleno { transform-origin: center top; transform: scaleY(0); }
  .riel li:first-child .riel__lleno { transform: scaleY(1); }
  .riel__nombre {
    display: block; align-self: center;
    font-size: 0.9rem; font-weight: 500; opacity: 0.6; transition: opacity 0.25s ease;
  }
  .riel button:hover .riel__nombre, .riel [aria-current] .riel__nombre { opacity: 1; }
  .riel [aria-current] .riel__nombre { font-weight: 700; }
}

/* Estático (prefers-reduced-motion): escenas apiladas */
.escena--estatica .escenario { height: auto; min-height: var(--alto); }
.escena--estatica .riel { display: none; }
.escena--estatica .escenario + .escenario .hero,
.escena--estatica .escenario + .escenario .hero__acciones,
.escena--estatica .escenario + .escenario .insignia { display: none; }

/* ---------- Cursor (solo escritorio) ---------- */
.cursor { display: none; }
.cursor-activo .cursor { display: block; position: fixed; z-index: 400; left: 0; top: 0; pointer-events: none; opacity: 0; transition: opacity 0.3s; }
.cursor.is-visible { opacity: 1; }
.cursor span {
  display: block; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: var(--ambar); box-shadow: 0 0 0 2px var(--espresso);
  transition: transform 0.25s cubic-bezier(.2,.8,.2,1);
}
.cursor.is-sobre span { transform: scale(2.6); background: rgb(217 142 43 / 0.35); }
.cursor-activo, .cursor-activo a, .cursor-activo button { cursor: none; }