/* Ámbar Collection — el tiempo, la resina, la luz encerrada.
   Fondo negro absoluto y una sola fuente de luz cálida que respira. */

.tema-ambar {
  --acento: var(--ambar);
  --acento-claro: var(--ambar-claro);
  --aura: rgba(217, 141, 62, 0.16);
}

/* ── Hero: la gema ────────────────────────────────────────────────────── */
/* Columna apilada: la gema arriba, el título debajo, sin superponerse. El
   conjunto va deliberadamente por debajo del centro —más aire arriba que
   abajo— para que respire contra la navegación.
   svh (y no vh) evita el salto por la barra del navegador móvil. */
/* El héroe también se ancla: la gema se queda como portada mientras el sitio
   empieza a montarse encima. */
.hero {
  position: sticky;
  top: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100svh;
  padding: clamp(6rem, 15vh, 9.5rem) 1.4rem clamp(1.5rem, 4vh, 3rem);
  overflow: hidden;
}

/* El apagado de la escena al bajar. Es un velo cuya opacidad se anima, no un
   `filter` sobre la sección: animar un filtro obliga a rasterizar de nuevo todo
   lo que contiene —gema, títulos, aura— en cada cuadro del scroll. */
.hero__velo {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--negro);
  opacity: 0;
  pointer-events: none;
}

.hero__aura {
  position: absolute;
  left: 50%; top: 52%;
  width: min(150vw, 1250px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle, rgba(240, 185, 105, 0.20) 0%, rgba(122, 63, 14, 0.10) 34%, transparent 64%);
  pointer-events: none;
}

.hero__gema {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;              /* sin esto un hijo flex no baja de su tamaño natural */
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 30px 90px rgba(217, 141, 62, 0.32));
  will-change: transform;
}
.hero__gema picture { display: contents; }
.hero__gema img {
  height: 100%;
  width: auto;
  max-width: min(66vw, 560px);
  object-fit: contain;
  filter: saturate(1) brightness(1);
}

.hero__texto {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  margin-top: clamp(1rem, 2.4vh, 1.8rem);
  text-align: center;
}

.hero__titulo {
  margin: 0;
  font-weight: 200;
  font-size: clamp(2.6rem, 7.5vw, 6.4rem);
  line-height: 0.92;
  letter-spacing: -0.035em;
}
.hero__titulo em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  color: var(--ambar-claro);
}
.hero__titulo .linea:last-child {
  display: block;
  margin-top: 0.7rem;
  font-size: clamp(0.62rem, 1vw, 0.82rem);
  font-weight: 500;
  letter-spacing: 0.6em;
  text-transform: uppercase;
  opacity: 0.55;
}
/* Revelado enmascarado: el <span> recorta y el <i> interior es el que se
   desplaza. Animar el mismo elemento que recorta no enmascara nada —el texto
   simplemente se desliza por encima del de al lado. */
.hero__titulo .linea, .hero__lema .linea { display: block; overflow: hidden; }
.hero__titulo .linea i, .hero__lema .linea i { display: block; font-style: inherit; }

.hero__lema {
  margin: clamp(1.6rem, 4vh, 2.6rem) 0 0;
  font-size: clamp(1.22rem, 2.1vw, 1.85rem);
  opacity: 0.72;
}

/* ── Tiempo ───────────────────────────────────────────────────────────── */
/* Esta NO se ancla, a propósito. El apilado adhesivo se usa una sola vez, en el
   paso del héroe al video: repetido de inmediato deja de leerse como decisión y
   empieza a leerse como el comportamiento por defecto del sitio. Aquí el scroll
   vuelve a ser normal y el recurso conserva su peso donde importa.
   Sigue siendo opaca y por encima del héroe, que es lo que lo tapa. */
.tiempo {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100svh;
  background: var(--negro);
  padding: clamp(5rem, 14vh, 10rem) clamp(1.4rem, 6vw, 7rem);
  text-align: center;
  overflow: hidden;
}
.tiempo__fondo { position: absolute; inset: 0; z-index: 0; }
.tiempo__video,
.tiempo__fondo img {
  width: 100%; height: 120%;
  object-fit: cover;
  will-change: transform;
}

/* El velo: negro casi total sobre el video. Su opacidad baja con el scroll
   —el tiempo va sacando la resina a la luz—. Es estático: no se le anima nada
   por cuadro. */
.tiempo__sombra {
  position: absolute;
  inset: 0;
  background: #060505;
  opacity: 0.93;
}

/* El foco: un círculo que ACLARA lo que tiene detrás en vez de recortar el
   velo. Se mueve con transform, y su máscara suave es fija —se desplaza con
   él—, así que la GPU lo compone sin rasterizar nada de nuevo.

   La versión anterior movía el centro de una máscara sobre una capa a pantalla
   completa, y eso recalcula la máscara entera 60 veces por segundo. */
.tiempo__foco {
  position: absolute;
  top: 0;
  left: 0;
  width: 400px;
  height: 400px;
  margin: -200px 0 0 -200px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.7s var(--ease);
  transform: translate3d(-9999px, -9999px, 0);
  will-change: transform;
  /* backdrop-filter sobre video en reproducción es de lo más caro que hay: el
     navegador tiene que leer el fondo ya compuesto y filtrarlo en cada cuadro.
     El círculo se achicó justamente porque el costo va con el área. */
  -webkit-backdrop-filter: brightness(3.2) saturate(1.35);
  backdrop-filter: brightness(3.2) saturate(1.35);
  -webkit-mask-image: radial-gradient(circle closest-side, #000 0%, rgba(0,0,0,0.55) 46%, transparent 72%);
  mask-image: radial-gradient(circle closest-side, #000 0%, rgba(0,0,0,0.55) 46%, transparent 72%);
}
.tiempo.is-vivo .tiempo__foco { opacity: 1; }

.tiempo__fondo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(58% 58% at 50% 50%, transparent, rgba(6, 5, 5, 0.9));
}

.tiempo__texto { position: relative; z-index: 2; max-width: 56ch; }
.tiempo__antetitulo { color: var(--ambar); opacity: 0.8; margin: 0 0 clamp(1.6rem, 4vh, 2.6rem); }
.tiempo__frase {
  margin: 0;
  font-weight: 200;
  font-size: clamp(1.85rem, 4.1vw, 3.6rem);
  line-height: 1.28;
}
.tiempo__remate {
  margin: clamp(2rem, 5vh, 3.2rem) 0 0;
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  letter-spacing: 0.02em;
  color: var(--ambar-claro);
}

/* ── Los cinco tonos ──────────────────────────────────────────────────── */
.tonos {
  position: relative;
  padding: clamp(6rem, 16vh, 12rem) clamp(1.4rem, 6vw, 7rem);
  overflow: hidden;
  /* El fondo entero se tiñe del tono elegido. color-mix mezcla contra el negro
     de la marca, así que nunca se va a un color plano: sigue siendo la noche de
     Ámbar, teñida. Si el navegador no lo soporta, se queda en negro y no pasa
     nada. */
  background: var(--negro);
}
/* Mismo recurso que en atributos: el color vive en una capa con los extremos
   difuminados, y así el tinte nunca choca contra el negro de al lado. */
.tonos::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--tono-activo, #d98d3e);
  opacity: 0;
  transition: background 1.2s var(--ease), opacity 1.2s var(--ease);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
}
.tonos.is-elegido::before { opacity: 0.16; }
/* El resplandor toma el color del tono activo: el fondo entero reacciona. */
.tonos__resplandor {
  position: absolute;
  left: 50%; top: 58%;
  width: min(120vw, 1100px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--tono-activo, #d98d3e) 0%, transparent 62%);
  opacity: 0.1;
  transition: background 1.1s var(--ease), opacity 1.2s var(--ease);
  pointer-events: none;
}
/* El resplandor central se intensifica junto con el tinte del fondo: el color
   no aparece plano sino con un foco, como si el esmalte iluminara la sala. */
.tonos.is-elegido .tonos__resplandor { opacity: 0.3; }
.tonos > *:not(.tonos__resplandor) { position: relative; z-index: 1; }

.tonos__encabezado { text-align: center; margin-bottom: clamp(3rem, 8vh, 5.5rem); }
.tonos__titulo {
  margin: 0;
  font-weight: 200;
  font-size: clamp(2.7rem, 6.6vw, 5.7rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
}
.tonos__titulo em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  color: var(--ambar-claro);
}

.tonos__escenario {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2.5rem, 6vh, 4rem);
}

.tonos__gotas {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(0.6rem, 2.6vw, 2.4rem);
}
/* Cada tono es su frasco. Los cinco recortes comparten un lienzo idéntico, así
   que la fila queda alineada por construcción y no por reglas de CSS. */
.gota {
  appearance: none;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  position: relative;
  width: clamp(58px, 12vw, 140px);
  aspect-ratio: 286 / 762;   /* el del lienzo común de los recortes */
  filter: grayscale(0.5) brightness(0.66);
  transform: translateY(0) scale(0.94);
  transition: filter 0.75s var(--ease), transform 0.75s var(--ease);
}
/* Las dos piezas se apoyan en el MISMO suelo: el frasco es alto y la uña
   corta, y centrarlas dejaría cada tono a una altura distinta. Con el borde
   inferior común, la fila queda alineada pase lo que pase. */
.gota__pieza {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transition: opacity 0.55s var(--ease), transform 0.75s var(--ease);
  transform-origin: bottom center;
}
.gota__pieza img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
}

.gota:hover { filter: grayscale(0.1) brightness(0.94); transform: translateY(-8px) scale(0.98); }
.gota.is-activa {
  filter: none;
  transform: translateY(-16px) scale(1.08);
}
.gota:focus-visible { outline: 1px solid var(--ambar-claro); outline-offset: 12px; }

.tonos__ficha { text-align: center; min-height: 7rem; }
/* La invitación desaparece en cuanto se elige un tono, y vuelve al salir. */
.tonos__invita {
  opacity: 0.4;
  transition: opacity 0.5s var(--ease);
}
.tonos.is-elegido .tonos__invita { opacity: 0; }
.tonos__nombre {
  margin: 0;
  font-weight: 200;
  font-size: clamp(2.05rem, 4.6vw, 3.4rem);
  letter-spacing: 0.02em;
  color: var(--ambar-claro);
}
.tonos__glosa {
  margin: 0.7rem 0 0;
  font-size: clamp(1.12rem, 1.6vw, 1.42rem);
  opacity: 0.62;
}

.tonos__cierre {
  margin: clamp(3.5rem, 9vh, 6rem) 0 0;
  text-align: center;
  font-size: clamp(1.32rem, 2.3vw, 2rem);
  opacity: 0.55;
}

@media (max-width: 860px) {
  .hero__gema img { max-width: min(74vw, 320px); }
  .tonos__gotas { gap: 0.45rem; }
}

/* ── Gema en 3D ───────────────────────────────────────────────────────────
   El lienzo se superpone a la fotografía y solo se revela cuando ya está
   dibujando. Si WebGL no arranca, la foto se queda y no se nota el intento. */
.gema3d {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
}
.hero__gema.is-3d .gema3d { opacity: 1; }
.hero__gema.is-3d img { opacity: 0; transition: opacity 0.8s var(--ease); }

/* ── Un nuevo origen: la revelación de escala ─────────────────────────────
   La sección es alta (recorrido de scroll) pero su contenido queda fijo en
   pantalla mientras dura: se mira una sola cosa a la vez. La imagen entra en
   primerísimo plano —solo luz y color, no se sabe qué es— y retrocede hasta
   descubrir la colección entera. Del material a su origen. */
.origen {
  position: relative;
  height: 280vh;
  padding: 0;
  display: block;
}
.origen__escena {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}
.origen__medio {
  position: absolute;
  inset: 0;
}
/* La nítida NO arranca invisible: parte de un tercio. Con la difusa sola, la
   sección se ve al llegar como una foto que no cargó; con este resto de
   definición se lee como enfoque suave, que es una decisión fotográfica.
   Cruzar opacidades es trabajo de composición, gratis para la GPU; animar un
   desenfoque real a pantalla completa costaría un repintado por cuadro. */
.origen__medio--nitido { opacity: 0.32; }

/* Barra de avance: un hilo fino al pie que se llena con el recorrido. */
.origen__avance {
  position: absolute;
  left: clamp(1.4rem, 6vw, 7rem);
  right: clamp(1.4rem, 6vw, 7rem);
  bottom: clamp(1.6rem, 4vh, 2.6rem);
  height: 1px;
  background: rgba(244, 241, 236, 0.14);
  overflow: hidden;
}
.origen__avance i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--ambar-claro);
  transform: scaleX(0);
  transform-origin: left;
}
.origen__medio img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Sobre los cristales de abajo a la izquierda: son ámbar puro, sin frascos
     ni logos. La apertura tiene que ser abstracta —luz y color— para que uno no
     entienda qué mira hasta que la cámara retrocede. */
  transform-origin: 24% 74%;
  will-change: transform;
}
.origen__velo {
  position: absolute;
  inset: 0;
  /* El pie se oscurece bastante más que antes: sobre una foto tan cargada de
     ámbar, un rótulo del mismo color desaparece. Toda la zona de texto necesita
     su propio suelo oscuro para que la tipografía se sostenga. */
  background:
    linear-gradient(180deg,
      rgba(6, 5, 5, 0.5) 0%,
      transparent 26%,
      rgba(6, 5, 5, 0.42) 52%,
      rgba(6, 5, 5, 0.86) 76%,
      rgba(6, 5, 5, 0.97) 100%);
}
.origen__texto {
  position: absolute;
  left: 0; right: 0;
  bottom: clamp(3rem, 10vh, 7rem);
  padding: 0 clamp(1.4rem, 6vw, 7rem);
  max-width: 60rem;
}
.origen__paso { opacity: 0; }
/* Y el rótulo pasa al ámbar claro, casi crema: es el tono de la paleta que más
   se despega de la resina del fondo sin salirse de la marca. */
.origen .antetitulo {
  margin-bottom: clamp(1rem, 2.4vh, 1.6rem);
  color: var(--ambar-claro);
  opacity: 1;
}

@media (max-width: 860px) {
  .origen { height: 240vh; }
  .origen__texto { bottom: clamp(2rem, 7vh, 4rem); }
}


/* Todo lo que viene DESPUÉS tiene que ser opaco y ordenarse por encima: como
   las secciones ancladas se quedan ahí detrás, cualquier sección transparente
   las dejaría ver a través. */
/* La lista tiene que estar COMPLETA: basta que una sección quede fuera para que
   el video anclado se vea a través de ella. Niveles: héroe 0, video 1, resto 2. */
.origen,
.tonos,
.atributos,
.cita,
.pilares,
.plataforma,
.impacto,
.cierre {
  position: relative;
  z-index: 2;
  background: var(--negro);
}

/* ── Color Gel Glass: los atributos mandan sobre la imagen ────────────────
   Cada afirmación tiene su fotografía y su color. Al elegir una, la imagen
   cambia y la sección entera se tiñe: la promesa deja de leerse y se prueba. */
.atributos {
  align-items: center;
  background: var(--negro);
}
/* El tinte va en su propia capa, con los extremos difuminados, en vez de pintar
   el fondo de la sección: un fondo teñido de punta a punta dibuja una línea
   visible contra el negro de las secciones vecinas.
   La máscara es fija —solo cambia el color— así que no cuesta nada, y el color
   sí se puede transicionar suavemente, cosa que un degradado no permite. */
.atributos::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--rasgo-color, #f0b969);
  opacity: 0.07;
  transition: background 1.1s var(--ease);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 24%, #000 76%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 24%, #000 76%, transparent 100%);
}
.atributos__texto, .atributos__medio { position: relative; z-index: 1; }

.rasgos {
  list-style: none;
  margin: clamp(2.4rem, 5vh, 3.4rem) 0 0;
  padding: 0;
  max-width: 34rem;
}

.rasgo {
  position: relative;
  border-top: 1px solid var(--linea);
}
.rasgo:last-child { border-bottom: 1px solid var(--linea); }

.rasgo__btn {
  appearance: none;
  background: none;
  border: 0;
  width: 100%;
  padding: clamp(1.3rem, 3vh, 1.9rem) 0;
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  gap: 0.4rem;
  align-items: start;
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: padding-left 0.7s var(--ease);
}
.rasgo.is-activo .rasgo__btn { padding-left: 0.9rem; }

.rasgo__n {
  color: var(--rasgo-color, var(--ambar));
  opacity: 0.34;
  transition: opacity 0.6s var(--ease);
  padding-top: 0.35em;
}
.rasgo.is-activo .rasgo__n { opacity: 1; }

.rasgo__titulo {
  display: block;
  font-size: clamp(1.15rem, 1.9vw, 1.6rem);
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--tinta);
  opacity: 0.5;
  transition: opacity 0.6s var(--ease), color 0.6s var(--ease);
}
.rasgo.is-activo .rasgo__titulo { opacity: 1; color: var(--rasgo-color, var(--ambar-claro)); }

.rasgo__glosa {
  display: block;
  margin-top: 0.45rem;
  font-size: clamp(0.9rem, 1.1vw, 1rem);
  line-height: 1.6;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.6s var(--ease), max-height 0.7s var(--ease);
}
.rasgo.is-activo .rasgo__glosa { opacity: 0.6; max-height: 5rem; }

/* Hilo que se llena bajo el atributo activo: marca cuál manda sin subrayarlo. */
.rasgo__linea {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  overflow: hidden;
}
.rasgo__linea i {
  display: block;
  height: 100%;
  background: var(--rasgo-color, var(--ambar));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s var(--ease);
}
.rasgo.is-activo .rasgo__linea i { transform: scaleX(1); }

/* ── La lámina ─────────────────────────────────────────────────────────── */
.lamina {
  position: relative;
  border-radius: clamp(14px, 1.7vw, 28px);
  aspect-ratio: 5 / 4;
}
.lamina__aura {
  position: absolute;
  inset: -14%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--rasgo-color, #f0b969) 0%, transparent 66%);
  opacity: 0.16;
  filter: blur(30px);
  transition: background 1.1s var(--ease);
  pointer-events: none;
}
.lamina__foto {
  position: absolute;
  inset: 0;
  margin: 0;
  border-radius: inherit;
  overflow: hidden;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1s var(--ease), transform 1.4s var(--ease);
}
.lamina__foto.is-activa { opacity: 1; transform: scale(1); }
.lamina__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Un borde interior clarísimo: separa la foto del fondo negro sin dibujar una
   línea dura, que es lo que delata una tarjeta mal resuelta. */
.lamina::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(244, 241, 236, 0.09);
  pointer-events: none;
  z-index: 2;
}

@media (max-width: 860px) {
  .lamina { aspect-ratio: 4 / 3; }
  .rasgo__glosa { opacity: 0.6; max-height: 5rem; }
}