/* Estructura compartida por los dos mundos. Lo que cambia entre Ámbar y Murano
   es la paleta, no el esqueleto: cada tema define --acento y --acento-claro. */

.mundo-pagina {
  overflow-x: hidden;
}

/* ── Cargador ─────────────────────────────────────────────────────────── */
.cargador { display: none; }
.js .cargador {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 60;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.8rem;
  background: var(--fondo);
}
.cargador__marca { opacity: 0.55; }
.cargador__barra {
  display: block;
  width: min(220px, 40vw);
  height: 1px;
  background: var(--linea);
  overflow: hidden;
}
.cargador__barra i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--acento);
  transform: scaleX(0);
  transform-origin: left;
}

/* ── Navegación ───────────────────────────────────────────────────────── */
.navegacion {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(1.1rem, 2.6vh, 1.9rem) clamp(1.2rem, 4vw, 3rem);
  background: linear-gradient(180deg, color-mix(in srgb, var(--fondo) 72%, transparent), transparent);
  backdrop-filter: blur(2px);
}
.navegacion a { opacity: 0.62; transition: opacity 0.4s var(--ease); }
.navegacion a:hover { opacity: 1; }
.navegacion__centro { opacity: 0.4; }
.navegacion__volver span, .navegacion__otro span {
  display: inline-block;
  transition: transform 0.4s var(--ease);
}
.navegacion__volver:hover span { transform: translateX(-4px); }
.navegacion__otro:hover span { transform: translateX(4px); }

@media (max-width: 640px) {
  .navegacion__centro { display: none; }
}

/* ── Piezas de texto reutilizables ────────────────────────────────────── */
.antetitulo {
  color: var(--acento);
  opacity: 0.85;
  margin: 0 0 clamp(1.4rem, 3vh, 2.2rem);
}

.titulo-seccion {
  margin: 0;
  font-weight: 200;
  font-size: clamp(2.45rem, 5vw, 4.5rem);
  line-height: 1.06;
  letter-spacing: -0.028em;
}
.titulo-seccion em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  color: var(--acento-claro);
}

.parrafo {
  margin: clamp(1.4rem, 3vh, 2rem) 0 0;
  max-width: 46ch;
  font-size: clamp(1.08rem, 1.35vw, 1.26rem);
  line-height: 1.72;
  opacity: 0.68;
}

.lista {
  list-style: none;
  margin: clamp(2rem, 4.5vh, 3rem) 0 0;
  padding: 0;
  max-width: 46ch;
}
.lista li {
  padding: 1.15rem 0;
  border-top: 1px solid var(--linea);
  font-size: clamp(1.06rem, 1.3vw, 1.2rem);
  line-height: 1.6;
  opacity: 0.7;
}
.lista li span { color: var(--acento-claro); opacity: 1; }

.boton {
  display: inline-block;
  padding: 1.05rem 2.2rem;
  border: 1px solid var(--acento);
  color: var(--acento-claro);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  transition: background 0.5s var(--ease), color 0.5s var(--ease);
}
.boton:hover { background: var(--acento); color: var(--fondo); }
.boton--fantasma {
  border-color: var(--linea);
  color: color-mix(in srgb, var(--tinta) 70%, transparent);
}
.boton--fantasma:hover { background: var(--tinta); color: var(--fondo); }

/* ── Secciones genéricas ──────────────────────────────────────────────── */
.origen, .atributos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6rem);
  padding: clamp(6rem, 16vh, 12rem) clamp(1.4rem, 6vw, 7rem);
}
.origen__medio img, .atributos__medio img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.atributos__medio img { aspect-ratio: 5 / 4; }
.atributos__medio { order: 2; }
.atributos__texto { order: 1; }

/* ── Cita a pantalla completa ─────────────────────────────────────────── */
.cita {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100svh;
  padding: clamp(4rem, 12vh, 9rem) clamp(1.4rem, 6vw, 7rem);
  text-align: center;
  overflow: hidden;
}
.cita__fondo { position: absolute; inset: 0; z-index: 0; }
.cita__fondo img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.34) saturate(0.9);
}
.cita__fondo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 60% at 50% 50%, transparent, rgba(6, 5, 5, 0.86));
}
.cita__texto { position: relative; z-index: 1; max-width: 62ch; }
.cita__frase {
  margin: 0;
  font-size: clamp(2.3rem, 5vw, 4.2rem);
  font-weight: 200;
}
.cita .parrafo { margin-left: auto; margin-right: auto; }
.cita__beu {
  margin: clamp(2rem, 4vh, 3rem) 0 0;
  font-size: 0.84rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  opacity: 0.75;
}
.cita__beu span { color: var(--acento-claro); }

/* ── Pilares: tres paneles que se abren ──────────────────────────────────
   Los programas —tutoriales, retos, expos— son el contenido real de esta
   sección, y en tarjetas quedaban como letra menuda al pie. Aquí el panel
   abierto les da tamaño y los revela uno por uno. */
.pilares {
  display: flex;
  height: 100svh;
  padding: 0;
  gap: 0;
  overflow: hidden;
}

.pilar {
  position: relative;
  flex: 1 1 33.333%;
  overflow: hidden;
  cursor: pointer;
  transition: flex-grow 1.05s var(--ease);
}
.pilar + .pilar { border-left: 1px solid rgba(244, 241, 236, 0.12); }

.pilar__fondo { position: absolute; inset: 0; }
.pilar__fondo img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.55) brightness(0.42);
  transition: filter 1.05s var(--ease);
  /* Deriva permanente: es la única sección del sitio que se mueve sola. Un
     desplazamiento tan lento que no se registra conscientemente, pero que hace
     que la pantalla se sienta respirando en vez de congelada. */
  animation: deriva 30s ease-in-out infinite;
  will-change: transform;
}
.pilar:nth-child(2) .pilar__fondo img { animation-duration: 38s; animation-delay: -9s; }
.pilar:nth-child(3) .pilar__fondo img { animation-duration: 34s; animation-delay: -18s; }

@keyframes deriva {
  0%   { transform: scale(1.1) translate3d(0, 0, 0); }
  50%  { transform: scale(1.15) translate3d(-1.6%, -1.4%, 0); }
  100% { transform: scale(1.1) translate3d(0, 0, 0); }
}

.pilar__velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 5, 5, 0.72), rgba(6, 5, 5, 0.34) 38%, rgba(6, 5, 5, 0.93));
  transition: opacity 1.05s var(--ease);
}

.pilar__cuerpo {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: clamp(1.6rem, 3.4vw, 3.2rem);
  z-index: 1;
}
.pilar__ante {
  color: var(--acento);
  margin: 0 0 clamp(0.9rem, 2vh, 1.4rem);
  opacity: 0.75;
  transition: opacity 0.8s var(--ease);
}
.pilar__titulo {
  margin: 0;
  font-weight: 200;
  font-size: clamp(1.25rem, 1.9vw, 1.85rem);
  line-height: 1.28;
  letter-spacing: -0.015em;
  opacity: 0.72;
  transition: opacity 0.8s var(--ease);
}

/* Los programas solo existen en el panel abierto, y entran escalonados. */
.pilar__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 1s var(--ease);
}
.pilar__lista li {
  padding: 0.72rem 0;
  border-top: 1px solid rgba(244, 241, 236, 0.12);
  font-size: clamp(0.92rem, 1.15vw, 1.05rem);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  transition-delay: calc(var(--i) * 0.09s);
}
.pilar__lista li:first-child { margin-top: clamp(1.4rem, 3vh, 2.2rem); }

.pilar.is-abierto { flex-grow: 1.9; }
.pilar.is-abierto .pilar__fondo img { filter: saturate(1) brightness(0.62); }
.pilar.is-abierto .pilar__velo { opacity: 0.82; }
.pilar.is-abierto .pilar__ante { opacity: 1; }
.pilar.is-abierto .pilar__titulo { opacity: 1; }
.pilar.is-abierto .pilar__lista { max-height: 22rem; }
.pilar.is-abierto .pilar__lista li { opacity: 0.78; transform: translateY(0); }

@media (max-width: 860px) {
  .pilares { flex-direction: column; height: auto; }
  .pilar {
    flex: none;
    min-height: 78svh;
  }
  .pilar + .pilar { border-left: 0; border-top: 1px solid rgba(244, 241, 236, 0.12); }
  /* En táctil no hay cursor que abra nada: los tres van abiertos. */
  .pilar .pilar__lista { max-height: 22rem; }
  .pilar .pilar__lista li { opacity: 0.78; transform: none; }
  .pilar .pilar__ante, .pilar .pilar__titulo { opacity: 1; }
  .pilar .pilar__fondo img { filter: saturate(1) brightness(0.58); }
}

/* ── Plataforma 360°: el recorrido ───────────────────────────────────────
   Un rastreador de pedido: la vía se llena parada por parada y todo desemboca
   en el producto. Cada módulo deja de ser un rótulo suelto y pasa a ser una
   etapa de un camino con destino. Cabe en una pantalla. */
.plataforma {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(3rem, 9vh, 6rem);
  height: 100svh;
  padding: clamp(5rem, 12vh, 8rem) clamp(1.4rem, 6vw, 7rem) clamp(3rem, 8vh, 5rem);
}
.plataforma__cabeza { max-width: 46ch; }
.plataforma__titulo {
  margin: 0;
  font-weight: 200;
  font-size: clamp(1.7rem, 3.4vw, 3.1rem);
  line-height: 1.14;
  letter-spacing: -0.025em;
}
.plataforma__titulo em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  color: var(--acento-claro);
}
.plataforma__pie {
  margin: 0;
  text-align: right;
  color: var(--acento);
  opacity: 0;
}

/* ── La vía ────────────────────────────────────────────────────────────── */
.ruta { position: relative; }

.ruta__via {
  position: absolute;
  left: 0; right: 0;
  top: var(--eje, 34px);
  height: 2px;
  background: var(--linea);
  overflow: hidden;
}
.ruta__avance {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--acento), var(--acento-claro));
  transform: scaleX(0);
  transform-origin: left;
}

.ruta__paradas {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(0.5rem, 1.4vw, 1.4rem);
}

.parada {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.85rem;
}

.parada__punto {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(48px, 4.6vw, 68px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--fondo);
  box-shadow: inset 0 0 0 1px var(--linea);
  color: color-mix(in srgb, var(--tinta) 34%, transparent);
  transition: color 0.6s var(--ease), box-shadow 0.6s var(--ease),
              background 0.6s var(--ease), transform 0.6s var(--ease);
}
.parada__punto .ico { width: 46%; height: 46%; }

/* El pulso que confirma la llegada: se expande y se disuelve una sola vez, en
   el momento en que la etapa se completa. */
.parada__pulso {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--acento);
  opacity: 0;
  pointer-events: none;
}
.parada.is-hecha .parada__pulso { animation: parada-pulso 1.1s ease-out 1; }
@keyframes parada-pulso {
  0%   { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(2.1); opacity: 0; }
}

.parada.is-hecha .parada__punto {
  color: var(--acento-claro);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acento) 70%, transparent);
  background: color-mix(in srgb, var(--acento) 12%, var(--fondo));
}

.parada__nombre {
  font-size: clamp(0.7rem, 0.86vw, 0.82rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.42;
  transition: opacity 0.6s var(--ease), color 0.6s var(--ease);
}
.parada.is-hecha .parada__nombre { opacity: 1; color: var(--acento-claro); }

.parada__glosa {
  font-size: clamp(0.78rem, 0.95vw, 0.92rem);
  line-height: 1.5;
  max-width: 18ch;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.parada.is-hecha .parada__glosa { opacity: 0.55; transform: none; }

/* El origen: el producto abre el recorrido —así lo lista el deck— y por eso es
   el disco mayor y el único que se enciende en ámbar sólido. */
.parada--origen .parada__punto { width: clamp(60px, 5.8vw, 86px); }
.parada--origen.is-hecha .parada__punto {
  background: var(--acento);
  color: var(--fondo);
  transform: scale(1.06);
  box-shadow: 0 0 40px color-mix(in srgb, var(--acento) 55%, transparent);
}
.parada--origen.is-hecha .parada__glosa { opacity: 0.8; }

@media (max-width: 900px) {
  .plataforma { height: auto; padding-bottom: clamp(4rem, 10vh, 6rem); }
  .ruta__via {
    top: 0; bottom: 0;
    left: clamp(24px, 7vw, 34px);
    right: auto;
    width: 2px;
    height: auto;
  }
  .ruta__avance { width: 100%; height: 100%; transform: scaleY(0); transform-origin: top; }
  .ruta__paradas { grid-template-columns: 1fr; gap: clamp(1.6rem, 4vh, 2.4rem); }
  .parada {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: 1.1rem;
  }
  .parada__glosa { max-width: none; }
  .plataforma__pie { text-align: left; }
}

/* ── Impacto ──────────────────────────────────────────────────────────── */
.impacto { padding: clamp(6rem, 16vh, 12rem) clamp(1.4rem, 6vw, 7rem); }
.impacto__lista { margin: 0; }
.impacto__fila {
  display: grid;
  grid-template-columns: minmax(140px, 22%) 1fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding: clamp(1.5rem, 3.4vh, 2.3rem) 0;
  border-top: 1px solid var(--linea);
}
.impacto__fila dt {
  font-size: 0.79rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--acento);
}
.impacto__fila dd {
  margin: 0;
  font-weight: 200;
  font-size: clamp(1.26rem, 2.2vw, 1.9rem);
  line-height: 1.4;
  opacity: 0.78;
}

/* ── Cierre ───────────────────────────────────────────────────────────── */
.cierre {
  position: relative;
  text-align: center;
  padding: clamp(7rem, 20vh, 14rem) clamp(1.4rem, 6vw, 7rem) clamp(3rem, 8vh, 5rem);
  overflow: hidden;
}
.cierre__aura {
  position: absolute;
  left: 50%; top: 42%;
  width: min(90vw, 980px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--aura) 0%, transparent 66%);
  pointer-events: none;
}
.cierre > *:not(.cierre__aura) { position: relative; z-index: 1; }
.cierre__frase {
  margin: 0;
  font-weight: 200;
  font-size: clamp(1.95rem, 4.3vw, 3.7rem);
}
.cierre .parrafo { margin-left: auto; margin-right: auto; }
.cierre__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin: clamp(3rem, 7vh, 4.5rem) 0 clamp(5rem, 12vh, 8rem);
}
.cierre__marca { opacity: 0.3; }

/* ── Revelado al entrar en pantalla ───────────────────────────────────── */
.js .revelar { opacity: 0; }

/* Cada palabra es su propia caja para poder desenfocarla y moverla aparte.
   inline-block conserva el salto de línea natural del párrafo.

   Sin will-change a propósito: prometerle al navegador que cientos de <span>
   van a cambiar lo obliga a reservar una capa de composición por cada uno, y
   con varios párrafos eso son cientos de capas comiéndose la memoria de video.
   GSAP ya promueve lo que anima, mientras lo anima. */
.palabra { display: inline-block; }

@media (max-width: 860px) {
  .origen, .atributos, .pilares { grid-template-columns: 1fr; }
  .atributos__medio { order: 1; }
  .atributos__texto { order: 2; }
  .impacto__fila { grid-template-columns: 1fr; gap: 0.8rem; }
}

/* ── Luz del puntero ─────────────────────────────────────────────────────
   El cursor no dibuja un objeto: alumbra. Una fuente de luz cálida recorre la
   página y enciende lo que toca, que es el discurso de Ámbar —la luz atrapada
   en la resina— en vez de un adorno pegado al mouse.

   Es un círculo de tamaño fijo que se mueve con transform, NO un degradado que
   se recalcula dentro de una capa a pantalla completa: eso último obliga a
   rasterizar de nuevo toda la ventana en cada cuadro y arrodilla la página. */
.luz-puntero {
  position: fixed;
  top: 0;
  left: 0;
  width: 900px;
  height: 900px;
  margin: -450px 0 0 -450px;
  z-index: 70;
  pointer-events: none;
  opacity: 0;
  /* Sin mix-blend-mode a propósito: un modo de fusión obliga al navegador a
     componer TODO lo que hay debajo en un solo grupo antes de mezclar, en cada
     cuadro. Sobre fondo oscuro, un cálido translúcido se ve prácticamente
     igual y no arrastra la página entera. */
  background: radial-gradient(circle closest-side,
    var(--luz-color, rgba(255, 210, 150, 0.16)) 0%,
    var(--luz-color-2, rgba(230, 155, 70, 0.07)) 38%,
    transparent 72%);
  transform: translate3d(-9999px, -9999px, 0);
  will-change: transform;
}

/* Sobre algo pulsable la luz se concentra y calienta: hace de foco. */
.luz-puntero.is-sobre {
  --luz-color: rgba(255, 226, 176, 0.32);
  transform-origin: center;
}

/* ── El trazo de los iconos ──────────────────────────────────────────────
   Cada icono se DIBUJA cuando su parada se confirma, en vez de aparecer. El
   truco es pathLength="1" en cada trazo: normaliza su longitud, así que un
   mismo valor de guion sirve para todos sin importar cuánto miden en realidad
   —una línea recta y un círculo se dibujan al mismo ritmo—. */
.parada .ico > * {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.parada.is-hecha .ico > * {
  animation: trazar 0.85s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
.parada.is-hecha .ico > *:nth-child(2) { animation-delay: 0.1s; }
.parada.is-hecha .ico > *:nth-child(3) { animation-delay: 0.2s; }
.parada.is-hecha .ico > *:nth-child(4) { animation-delay: 0.3s; }
.parada.is-hecha .ico > *:nth-child(5) { animation-delay: 0.4s; }
.parada.is-hecha .ico > *:nth-child(6) { animation-delay: 0.5s; }

@keyframes trazar { to { stroke-dashoffset: 0; } }

/* Sin movimiento: los iconos ya están dibujados desde el principio. */
@media (prefers-reduced-motion: reduce) {
  .parada .ico > * { stroke-dashoffset: 0; }
}

/* Un poco más grandes dentro del disco: con el detalle nuevo, al 46 % se
   perdían los trazos finos. */
.parada__punto .ico { width: 52%; height: 52%; }
.parada--origen .parada__punto .ico { width: 48%; height: 48%; }