/* Campo Vivo · propuesta "línea": portada y página de ciencia.
   Negro puro, línea en blanco arena y una sola familia en peso 400. Mucho aire, titulares centrados.
   El morado (#9b7cf4) aparece solo donde algo está vivo: el botón que hace sonar, el modo que suena,
   el control activo mientras suena y el foco del teclado. Usa los tokens de linea.css.
   La luz dorada de los componentes de esta hoja sigue el sistema de linea.css (donde está documentado): un filo de luz en el canto de arriba
   (--oro-filo, que las .tarjeta ya traen), un reflejo que cruza lo que se puede tocar solo con el cursor encima (--oro-reflejo) y un charco
   de luz cálida detrás de lo protagonista (la pila de capas, el mandala del ensamblaje, la tarjeta de Campo Vivo). El oro nunca marca un
   estado: lo que suena, lo activo y el foco siguen siendo morado o blanco. */

html { scroll-behavior: smooth; }
html.menu-abierto { overflow: hidden; }

/* ── Salto al contenido ───────────────────────────────────── */
.salto {
  position: absolute;
  left: 16px;
  top: 12px;
  z-index: 60;
  padding: 12px 18px;
  border-radius: var(--radio-boton);
  background: var(--blanco);
  color: var(--negro);
  font-size: var(--t-2);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  min-height: 44px;   /* se toca: 44 px como todo lo demás */
  transform: translateY(-200%);
}
.salto:focus-visible { transform: none; }


/* ── Cabecera ─────────────────────────────────────────────────
   Arriba del todo es transparente; pasados unos píxeles de desplazamiento portada.js le pone .cabecera--fondo:
   negro al 85 % con desenfoque y una línea inferior muy tenue, para que los títulos que pasan por debajo no se lean encima. */
.cabecera {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  background: rgba(0, 0, 0, 0);
  box-shadow: inset 0 -1px 0 rgba(238, 230, 216, 0);
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
  transition: background-color 0.35s var(--curva), box-shadow 0.35s var(--curva), -webkit-backdrop-filter 0.35s var(--curva), backdrop-filter 0.35s var(--curva);
}
.cabecera--fondo {
  background: rgba(0, 0, 0, 0.85);
  box-shadow: inset 0 -1px 0 rgba(238, 230, 216, 0.07);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.cabecera .marca { grid-column: 1; justify-self: start; }
.cabecera__acciones { grid-column: 3; display: flex; align-items: center; justify-self: end; gap: 8px; }
/* En celular la navegación no se ve y la cabecera es solo el logo y los botones: se quita el hueco de la columna vacía para que el logo
   con su nombre quepa desde 360 px; por debajo de eso queda el símbolo (el enlace conserva su nombre accesible). */
@media (max-width: 899px) { .cabecera:not(.app-cabecera) { column-gap: 8px; } }
@media (max-width: 359px) { .cabecera:not(.app-cabecera) .marca-nombre { display: none; } }

.navegacion {
  grid-column: 2;
  display: none;
  align-items: center;
  gap: 32px;
  font-size: var(--t-2);
  line-height: var(--l-2);
}
.navegacion a { color: var(--blanco); white-space: nowrap; transition: color var(--rapido); }
/* Con seis enlaces ("Precios" se sumó entre "Ciencia" y "Preguntas") el espacio entre el logo y el botón de la app se acaba cerca de 900 px: el
   hueco entre enlaces baja a 16 px hasta 1099 px para que ningún enlace se parta en dos líneas ni la barra se corte. */
@media (min-width: 900px) and (max-width: 1099px) { .navegacion { gap: 16px; } }
.navegacion a:hover { color: var(--niebla); }
/* En la página de ciencia, su propio enlace va subrayado: dice dónde estás sin usar color. */
.navegacion a[aria-current="page"] { text-decoration: underline; text-decoration-color: rgba(238, 230, 216, 0.55); text-decoration-thickness: 1px; text-underline-offset: 8px; }

.boton--icono { width: 44px; padding: 0; }

@media (min-width: 900px) {
  .navegacion { display: flex; }
  .menu-abrir { display: none; }
}

/* ── Menú de pantalla completa (celular) ──────────────────── */
.menu {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top, 0px) 16px max(24px, env(safe-area-inset-bottom, 0px));
  background: var(--oro-ambiente) 50% 0 / 100% 420px no-repeat, var(--negro);
  overflow-y: auto;
}
.menu[hidden] { display: none; }
.menu__barra {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  height: var(--cabecera);
}
.menu__navegacion { display: grid; padding-top: 16px; }
.menu__navegacion a {
  padding: 16px 0;
  border-bottom: 1px solid var(--pizarra);
  font-size: var(--t-h4);
  line-height: var(--l-h4);
}
.menu__navegacion a:first-child { border-top: 1px solid var(--pizarra); }
.menu__navegacion a[aria-current="page"]::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 12px; border-radius: 50%; background: var(--blanco); vertical-align: middle; }
.menu__app { margin-top: auto; }

@media (min-width: 900px) {
  .menu { display: none !important; }
}

/* ── Ritmo de las secciones ───────────────────────────────── */
.seccion { padding-top: 120px; text-align: center; }
/* Al saltar a una sección (un ancla), su título queda 24 px debajo de la cabecera fija: 72 + 24 - 120 de aire de la sección. */
.seccion[id] { scroll-margin-top: -24px; }
.seccion__titulo { text-wrap: balance; }
/* El párrafo de cada sección va centrado y equilibrado: las líneas quedan parejas y nunca sobra una última línea de dos palabras
   (con "pretty" solo se evitaba la palabra suelta). */
.seccion__texto { max-width: 720px; margin: 20px auto 0; text-wrap: balance; }
/* Una frase corta que no se parte entre dos líneas (por ejemplo, "entre cuatro y seis"). */
.junto { white-space: nowrap; }
.seccion__nota { max-width: 640px; margin: 56px auto 0; text-wrap: balance; }

@media (max-width: 767px) {
  .seccion { padding-top: 68px; }
  .seccion[id] { scroll-margin-top: 20px; }   /* 64 de cabecera + 24 - 68 */
  .seccion__nota { margin-top: 48px; }
}

/* ── Jerarquía de títulos: lo propio de la portada y la página de ciencia (la regla general está en linea.css) ──
   Cada nivel se distingue por dos cosas a la vez, tamaño y peso, y no solo por el tamaño. Antes el título de sección (44 px) y el
   subtítulo (36) iban en el mismo peso normal, y en celular se llevaban un 13 % (34 contra 30): a simple vista eran iguales.
   Bricolage es variable: los pesos 500 y 600 vienen en el mismo archivo que ya se descarga (wght 300..700).
     · Título principal y títulos de sección: seminegrita 600, con las letras un poco más juntas, como se acostumbra en tamaños grandes.
     · Subtítulos, las partes de una sección ("Así se arma un ritual", "En la app"): 28 px (24 en celular), peso medio 500.
     · Títulos de tarjeta (Foco, Calma…, y los de las dos tarjetas de "No es un audio de YouTube"): peso medio 500; los de los modos,
       24 px (22 en celular). Las funciones de "En la app" siguen en 400: en 500 competían con su subtítulo.
     · El texto sigue en 400. Las frases de la historia (.pelicula__escena, fuera de .seccion) llevan el peso de los títulos y su tamaño.
     · El lema y los nombres de los rituales hablan con la voz de la tradición (ver .voz en linea.css). */
:root { --t-seccion: 48px; --l-seccion: 56px; }
@media (max-width: 767px) {
  :root { --t-seccion: 36px; --l-seccion: 42px; }
}
.pm-titulo { font-weight: 600; letter-spacing: var(--tracking-display); }
.seccion .titulo-2 { font-size: var(--t-seccion); line-height: var(--l-seccion); }   /* todo h2 de una .seccion es su título (también "Tu propia evidencia" en ciencia) */

/* ── Palabras de oro: las que el dueño escribió en mayúsculas (2026-10-13) ─────────────────────────────────────────────────────
   EN VIVO, ALERTA, RELAJA, CAOS, ORDEN, NUESTRA TECNOLOGÍA, FÓRMULA y TECNOLOGÍA PROPIA van en <strong class="palabra-oro">, una por
   palabra (así un renglón puede partirse entre dos). En reposo son oro pulido: el metal de los tokens con su línea de horizonte, un halo
   de luz cálida, seminegrita para que el metal se lea y algo más de aire entre letras, como piden las mayúsculas. palabras-oro.js las
   hace nacer una vez al llegar a la pantalla: "espera" y "polvo" (data-oro-fase) las esconden mientras un polvo de oro se ordena en sus
   letras; "destello" las cruza con la luz y abre el halo; "reposo" lo cierra. Al pasar el cursor el destello vuelve. Sin JavaScript, con
   "reducir movimiento" o en un navegador que no recorta el fondo al texto quedan en oro quieto. @keyframes solo corre el brillo: el oro
   vive en estas reglas, nunca en la animación. */
.palabra-oro {
  position: relative;   /* el polvo, un lienzo, se ubica sobre la palabra */
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--oro);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .palabra-oro {
    /* Primero sin color-mix(): un navegador que no lo entienda se queda con esta línea en vez de perder el fondo (y la palabra). */
    background-image:
      linear-gradient(100deg, rgba(var(--oro-destello-rgb), 0) 41%, rgba(var(--oro-destello-rgb), 0.55) 46.5%, rgba(var(--oro-destello-rgb), 1) 50%, rgba(var(--oro-destello-rgb), 0.55) 53.5%, rgba(var(--oro-destello-rgb), 0) 59%),
      linear-gradient(180deg, var(--oro-claro) 0%, var(--oro-claro) 20%, var(--oro) 50%, var(--oro-claro) 86%);
    background-image:
      linear-gradient(100deg, rgba(var(--oro-destello-rgb), 0) 41%, rgba(var(--oro-destello-rgb), 0.55) 46.5%, rgba(var(--oro-destello-rgb), 1) 50%, rgba(var(--oro-destello-rgb), 0.55) 53.5%, rgba(var(--oro-destello-rgb), 0) 59%),
      linear-gradient(180deg, var(--oro-claro) 0%, var(--oro-claro) 20%, var(--oro) 47%, color-mix(in oklab, var(--oro) 55%, var(--oro-hondo)) 52%, var(--oro) 58%, var(--oro-claro) 86%);
    background-size: 300% 100%, 100% 100%;
    background-position: 0% 0, 0 0;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 0.3em rgba(var(--oro-rgb), 0.38));
    transition: filter 900ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .palabra-oro[data-oro-fase="espera"],
  .palabra-oro[data-oro-fase="polvo"] { background-size: 0 0, 0 0; }
  .palabra-oro[data-oro-fase="destello"] {
    animation: oro-destello 1000ms ease-in-out both;
    filter: drop-shadow(0 0 0.7em rgba(var(--oro-rgb), 0.85)) brightness(1.18);
  }
  .palabra-oro::selection { -webkit-text-fill-color: var(--negro); }
}
@media (hover: hover) {
  .palabra-oro[data-oro-fase="reposo"]:hover,
  .palabra-oro:not([data-oro-fase]):hover { animation: oro-destello 900ms ease-in-out; }
}
.palabra-oro__polvo { position: absolute; pointer-events: none; transition: opacity 320ms ease-out; }
/* La franja de luz (un núcleo blanco con su halo, el 18 % de un fondo que mide tres veces la palabra) entra justo por la izquierda
   y sale justo por la derecha. */
@keyframes oro-destello {
  from { background-position: 89% 0, 0 0; }
  to { background-position: 11% 0, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .palabra-oro { animation: none !important; transition: none; }
}
@media (forced-colors: active) {
  .palabra-oro { background: none; -webkit-text-fill-color: currentColor; filter: none; }
}

/* ── Tarjetas de modos ────────────────────────────────────────
   Cada tarjeta es una placa pequeña, con el lenguaje de las tarjetas de la app: arriba la figura viva del modo (portada.js la dibuja
   una vez, quieta; solo se mueve la del modo que suena), debajo su nombre y lo que suena y, al pie, "Escuchar" y el enlace a la app.
   Un solo fondo de grafito y un borde fino; una línea separa la figura del texto. Mientras suena, el borde pasa a morado tenue. */
.modos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  margin-top: 56px;
  text-align: left;
}
.modo {
  display: flex;
  flex: 0 1 calc((100% - 48px) / 3);
  flex-direction: column;
  background: var(--grafito);
}
/* El filo va encima de la figura (si no, no se vería) y dice el estado: en reposo, con el cursor encima y sonando. */
.modo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--linea-tenue);
  pointer-events: none;
  transition: box-shadow var(--mov-corto) var(--curva);
}
/* El reflejo: una banda de luz cálida que cruza la tarjeta, de derecha a izquierda, cuando el cursor llega. Va por debajo del borde. */
.modo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: var(--oro-reflejo) 135% 0 / 260% 100% no-repeat;
  pointer-events: none;
  transition: background-position 0.9s var(--curva);
}
@media (hover: hover) and (pointer: fine) {
  .modo:hover::after { box-shadow: inset 0 0 0 1px rgba(238, 230, 216, 0.3); }
}
@media (hover: hover) and (pointer: fine) {
  .modo:hover::before { background-position: -35% 0; }
}
.modo--suena::after,
.modo--suena:hover::after { box-shadow: inset 0 0 0 1px var(--morado-tenue); }

.modo__figura { position: relative; aspect-ratio: 4 / 3; border-bottom: 1px solid var(--linea-tenue); }
.modo__lienzo { position: absolute; inset: 0; width: 100%; height: 100%; }
.modo__cuerpo { display: flex; flex: 1; flex-direction: column; padding: 20px 20px 0; }
.modo h3 { margin-bottom: 8px; }
.modo .texto-2 { flex: 1; }
/* Las acciones van en fila y, si no caben (tarjetas angostas), una debajo de la otra, a la izquierda. */
.modo__acciones { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; padding: 16px 20px 20px; }

/* "Escuchar": contorno fino y el triángulo lleno. Mientras suena lo que ese botón hizo sonar dice "Pausar" y lleva el aro morado
   (boton--vivo, que trae su propio aro: el borde se vuelve transparente para que no haya dos). El ancho mínimo iguala los dos textos:
   así el botón no cambia de tamaño al pulsarlo y las acciones no pasan de una fila a dos (ni al revés) cuando empieza a sonar. */
.modo__escuchar { gap: 8px; min-width: 132px; background: transparent; border-color: rgba(238, 230, 216, 0.55); }
.modo__escuchar:hover { background: rgba(238, 230, 216, 0.06); border-color: var(--blanco); }
.modo__escuchar.boton--vivo { border-color: transparent; }
.modo__escuchar .icono { width: 20px; height: 20px; }
.modo__escuchar [data-icono="reproducir"] svg { fill: currentColor; }
.modo__escuchar [data-icono="pausa"] svg { stroke-width: 2.4; }

/* "Abrir en la app": texto con un subrayado fino (sin flecha), con 44 px de alto para el toque. */
.modo__abrir {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--niebla);
  font-size: var(--t-3);
  line-height: var(--l-3);
  text-decoration: underline;
  text-decoration-color: rgba(238, 230, 216, 0.4);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color var(--mov-corto) var(--curva), text-decoration-color var(--mov-corto) var(--curva);
}
.modo__abrir:hover { color: var(--blanco); text-decoration-color: var(--blanco); }

@media (min-width: 1200px) {
  .modos { gap: 16px; }
  .modo { flex-basis: calc((100% - 64px) / 5); }
}

/* En celular los cinco modos no se apilan (eran ~1 560 px de scroll): van en una tira horizontal con imán. La tarjeta mide
   el 80 % del ancho para que la siguiente asome y se vea que hay más. La tira llega hasta los bordes de la pantalla
   (margen negativo) y el relleno devuelve el margen de 16 px. Con teclado, al enfocar un control de una tarjeta, portada.js desplaza
   la tira hasta mostrarla entera. */
.modos__puntos { display: none; }
@media (max-width: 767px) {
  .modos {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 12px;
    margin: 40px calc(var(--margen) * -1) 0;
    padding: 4px var(--margen) 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--margen);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .modos::-webkit-scrollbar { display: none; }
  .modos::after { content: ''; flex: 0 0 1px; margin-left: -12px; }   /* da cuerpo al final de la tira sin sumar otro hueco */
  .modo { flex: 0 0 min(80%, 340px); scroll-snap-align: start; }
  .modo__figura { aspect-ratio: 16 / 10; }
  .modos__puntos { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
  .modos__punto { width: 6px; height: 6px; border-radius: 50%; background: rgba(238, 230, 216, 0.28); transition: background-color 0.25s, transform 0.25s var(--curva); }
  .modos__punto--activo { background: var(--blanco); transform: scale(1.3); }
}

/* ── Rituales: una lista compacta dentro de "Modos" ───────────
   Los nueve rituales son filas (ícono, nombre y, debajo, sus frecuencias y su duración) y cada fila es un enlace a la app. Una
   columna en celular, dos en tableta y tres desde 1180 px: con menos ancho los nombres largos se partirían. #rituales es el destino
   de "Rituales" en la cabecera y de "Ver los nueve" en el pie; scroll-margin-top lo deja debajo de la cabecera fija.
   Que se pueden tocar lo dice un chevrón en el borde derecho (un ::after: el HTML de las filas no lleva nada extra) y lo confirman los
   estados de siempre: con el cursor encima la fila se aclara y el chevrón se enciende y avanza; con el teclado, el aro morado del foco;
   al presionar, la fila se hunde apenas. */
.rituales { margin-top: 88px; scroll-margin-top: calc(var(--cabecera) + 40px); }
.rituales > .seccion__texto { margin-top: 12px; }
.rituales__lista {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin-top: 32px;
  text-align: left;
}
.rituales__lista > li { display: flex; }
/* Las separaciones van como márgenes de cada pieza y no como column-gap: "ARCA (Consejo Silencioso)" mide 220 px y la fila de tres
   columnas le deja 225, así que el chevrón sale de las separaciones y no del ancho del nombre. */
.ritual {
  position: relative;
  display: grid;
  flex: 1;
  grid-template-columns: 40px minmax(0, 1fr) auto 18px;   /* ícono | nombre y para qué sirve | duración | chevrón */
  align-items: center;
  align-content: center;   /* si una vecina de la fila es más alta (un nombre en dos renglones), el nombre y su texto siguen juntos, al centro */
  min-height: 72px;
  padding: 16px 14px 16px 16px;
  border-radius: 12px;
  background: var(--grafito);
  box-shadow: var(--oro-filo);   /* la luz que cae sobre el canto de arriba, como en las tarjetas */
  transition: background-color var(--rapido), transform var(--mov-toque) var(--curva);
}
.ritual:hover { background: var(--grafito-claro); }
/* Al presionar: un escalón más claro y la fila se hunde apenas, como los botones. */
.ritual:active { background: var(--pizarra); transform: scale(0.985); }
/* El reflejo: la banda de luz cálida cruza la fila con el cursor encima (en un ::before: el ::after es el chevrón). */
.ritual::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--oro-reflejo) 135% 0 / 260% 100% no-repeat;
  pointer-events: none;
  transition: background-position 0.8s var(--curva);
}
@media (hover: hover) and (pointer: fine) {
  .ritual:hover::before { background-position: -35% 0; }
}
/* Nombre y duración en una línea; debajo, para qué sirve (la misma descripción del catálogo de la app: el nombre solo no lo
   dice). Las frecuencias de cada ritual se ven en la app.
   El nombre habla con la voz de la tradición (.voz en el HTML, ver linea.css). La duración y el chevrón se apoyan en su misma línea de
   base, como en un programa de concierto, y no a media altura: así "15 min ›" queda a ras del nombre aunque este ocupe dos renglones
   (en celular, "ARCA" y "(Consejo Silencioso)"; el paréntesis va en un .junto para no partirse por dentro). */
.ritual__icono { grid-row: 1 / 3; width: 40px; height: 40px; }
.ritual__nombre { grid-column: 2; grid-row: 1; align-self: baseline; margin-left: 14px; font-size: var(--t-ritual); line-height: var(--l-ritual); }
.ritual__duracion { grid-column: 3; grid-row: 1; align-self: baseline; margin-left: 8px; font-size: var(--t-4); line-height: var(--l-4); color: var(--gris); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ritual__para { grid-column: 2 / 5; grid-row: 2; margin: 2px 0 0 14px; font-size: var(--t-4); line-height: var(--l-4); color: var(--niebla); }
/* El chevrón va en la línea del nombre, pegado a la duración ("15 min ›"): así la descripción de abajo conserva todo el ancho de la
   fila (con el chevrón a media altura le quitaba unos 25 px y se partían líneas que antes cabían). Es dos lados de un cuadrado
   girado, con el grosor de línea de los íconos (--borde). Mide lo mismo en reposo y al enfocarlo; solo cambia de color y, con cursor
   fino, avanza 3 px. Sin contenido: los lectores de pantalla no lo leen. */
.ritual::after {
  content: '';
  grid-column: 4;
  grid-row: 1;
  align-self: baseline;   /* sin texto, su línea de base es su borde de abajo: queda centrado a la altura de la x de "15 min" */
  justify-self: end;
  width: 9px;
  height: 9px;
  border: solid var(--niebla);
  border-width: 0 var(--borde) var(--borde) 0;
  transform: rotate(-45deg);
  transition: border-color var(--rapido), translate var(--mov-corto) var(--curva);
}
.ritual:hover::after,
.ritual:focus-visible::after { border-color: var(--blanco); }
@media (hover: hover) and (pointer: fine) {
  .ritual:hover::after { translate: 3px 0; }
}

@media (min-width: 640px) {
  .rituales__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
@media (min-width: 1180px) {
  .rituales__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .rituales { margin-top: 56px; }
  .rituales__lista { margin-top: 28px; }
  .ritual { grid-template-columns: 36px minmax(0, 1fr) auto 16px; min-height: 60px; padding: 10px 12px 10px 16px; }
  .ritual__icono { width: 36px; height: 36px; }
}

/* ── Lámina de arte: el dibujo y su texto comparten un solo fondo ─────
   Sin cuadrícula, sin brillo y sin fondo propio: el lienzo se dibuja sobre el grafito de su tarjeta y una línea fina lo separa de lo que
   va debajo (el texto o los mandos). Lo usan las dos tarjetas de "No es un audio de YouTube", el ensamblaje y la demo binaural. */
.dif-tarjeta,
.ensamblaje,
.binaural { background: var(--grafito); }
.arte { position: relative; border-bottom: 1px solid var(--linea-tenue); }
.arte > canvas { position: relative; display: block; width: 100%; height: 100%; }

/* ── No es un audio de YouTube ────────────────────────────── */
.dif {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 64px;
  text-align: left;
}
.dif-tarjeta { display: flex; flex-direction: column; transition: box-shadow 0.3s var(--curva); }
.dif-tarjeta__arte { aspect-ratio: 16 / 9; }
.dif-tarjeta__texto { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 14px; padding: 28px 28px 32px; }
.dif-tarjeta__boton { gap: 12px; margin-top: 10px; max-width: 100%; }
/* Entre 768 y 899 px las dos tarjetas son angostas (unos 250 px de texto): el botón baja a 18 px para no recortarse y, si aun así no cabe, su texto pasa a otra línea. */
@media (min-width: 768px) and (max-width: 899px) { .dif-tarjeta__boton { padding: 0 20px; font-size: var(--t-2); white-space: normal; text-align: left; line-height: 1.15; } }
.dif-tarjeta__boton .icono { width: 22px; height: 22px; }
.dif-tarjeta__boton [data-icono="reproducir"] svg { fill: currentColor; }
.dif-tarjeta__boton [data-icono="pausa"] svg { stroke-width: 2.4; }
/* El audio grabado queda en gris: no está vivo. */
.dif-tarjeta--grabado .titulo-3,
.dif-tarjeta--grabado .texto-1 { color: var(--gris); }
/* La de Campo Vivo es la que está viva: una luz cálida cae sobre ella desde arriba a la izquierda, y su borde diagonal brilla (canto-luz).
   El archivo grabado queda sin luz, plano y gris. */
.dif-tarjeta--vivo { background: radial-gradient(ellipse 85% 62% at 22% 0%, rgba(var(--oro-rgb), 0.12), rgba(var(--oro-rgb), 0.04) 55%, rgba(var(--oro-rgb), 0) 100%), var(--grafito); }
/* Lo que suena en la página pinta el borde de morado. */
.dif-tarjeta--suena,
.dif-tarjeta--suena:hover { box-shadow: inset 0 0 0 1px var(--morado-tenue); }

@media (max-width: 767px) {
  .dif { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 40px; }
  .dif-tarjeta__arte { aspect-ratio: 3 / 2; }
  .dif-tarjeta__texto { padding: 24px 20px 28px; }
}

/* ── Cómo se crea tu sonido ───────────────────────────────────
   Una sola sección con dos piezas, una debajo de la otra: las ocho capas (la pila, que se suma de a una al bajar) y la demostración de
   cómo se arma un ritual, que va más abajo y con todo el ancho para que cada figura se vea grande. */
.como {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 104px;
  margin-top: 56px;
}
.como__ritual { text-align: center; }
.como__ritual > .texto-1 { max-width: 560px; margin: 12px auto 0; text-wrap: balance; }

@media (max-width: 767px) {
  .como { gap: 72px; margin-top: 40px; }
}

/* ── Ocho capas: la pieza central ─────────────────────────────
   Una pila de ocho losas de vidrio oscuro inclinadas en 3D, con grosor, un canto iluminado en dorado y una sombra que cae sobre la que
   tienen debajo. En la fila de cada losa, su nombre y su dato. Cada fila es un botón: tocarla pone esa capa al frente, y la losa sale de la
   pila y se ilumina en morado (el morado es solo para lo que suena, lo activo y el foco).

   Las capas llegan de a una mientras se baja. La pista (.capas__pista) es muy alta; dentro, el escenario (.capas__escenario: la pila y sus
   mandos) queda fijo (sticky) mientras se recorre. portada.js marca la fila que llega (.capa-fila--llego), la más nueva
   (.capa-fila--actual) y mueve --fijo, que es dónde se fija el escenario: la cámara que corre la pila cuando no cabe en la ventana. Todo eso
   solo existe cuando la sección lleva .como-progresivo; sin ello (movimiento reducido, ventana muy baja, un navegador sin sticky) las ocho
   filas se ven juntas, quietas y completas.

   La losa son tres cajas: .capa__losa (su lugar en la fila, su sombra y lo que le pasa al llegar), .capa__cuerpo (en 3D: lleva la
   inclinación y los dos cantos que se ven) y .capa__cara (la cara de arriba, con el glifo). La opacidad y los filtros van siempre en
   .capa__losa: en un elemento con transform-style: preserve-3d aplanarían el grosor. */
@property --calor { syntax: '<number>'; inherits: true; initial-value: 0; }   /* 0 en reposo; 1 el destello cuando la losa llega */

.como__capas {
  --paso-scroll: 52vh;                          /* cuánto se baja por cada capa: un poco más de media pantalla */
  --recorrido: calc(8.3 * var(--paso-scroll));  /* ocho capas y, al final, un rato con la pila completa (PASOS_FINAL en portada.js) */
}
@supports (height: 1svh) {
  .como__capas { --paso-scroll: 52svh; }
}
@media (min-width: 1024px) {
  .como__capas { --paso-scroll: 46vh; }
}
@supports (height: 1svh) {
  @media (min-width: 1024px) {
    .como__capas { --paso-scroll: 46svh; }
  }
}

.capas__pista,
.capas__escenario { position: relative; }
/* La pista mide el escenario más el recorrido de las capas, menos lo que corre la cámara al final (--camara-max, lo pone portada.js). */
.como-progresivo .capas__pista::after { content: ''; display: block; height: max(0px, calc(var(--recorrido) - var(--camara-max, 0px))); }
.como-progresivo .capas__escenario { position: sticky; top: var(--fijo, 84px); }
/* La frase que dice "baja despacio" solo se lee si de verdad pasa así. */
.capas__guia { display: none; }
.como-progresivo .capas__guia { display: inline; }

.capas {
  --lado: clamp(78px, calc((100vw - 2 * var(--margen) - 176px) / 1.414), 128px);   /* lado del cuadrado antes de inclinarlo; el rombo mide 1,41 veces eso de ancho */
  --hueco: 10px;                                  /* aire entre la punta derecha del rombo y el texto */
  --zona: calc(var(--lado) * 1.414 + 2 * var(--hueco));   /* ancho de la zona de la pila; el texto empieza donde ella termina */
  --paso: max(84px, calc(var(--lado) * 0.72));    /* alto mínimo de cada fila; el texto de la fila puede pedir más */
  --inclinacion: 60deg;
  --perspectiva: 1800px;
  --medio: calc(var(--lado) * 0.707);             /* mitad del ancho del rombo */
  --grosor: calc(var(--lado) * 0.075);            /* el canto de la losa */
  --radio-losa: calc(var(--lado) * 0.02);
  --sale: 0px;                                    /* cuánto se desliza, en el plano, la que pasa al frente (solo si hay sitio)... */
  --sube: 22px;                                   /* ...y cuánto se levanta */
  position: relative;
  width: 100%;
  margin: 24px auto 0;
  padding-block: 12px 4px;
  text-align: left;
}
/* Una luz cálida y tenue detrás de la pila: el charco que le da cuerpo al vidrio sobre el negro. */
.capas::before {
  content: '';
  position: absolute;
  left: calc(var(--zona) / 2);
  top: 50%;
  width: calc(var(--lado) * 3.3);
  height: 112%;
  background: radial-gradient(closest-side, var(--luz-oro-fuerte), var(--luz-oro) 52%, rgba(var(--oro-rgb), 0));
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.capa-fila {
  position: relative;
  min-height: var(--paso);
}
/* La primera fila va encima de las demás, como la lámina de arriba de una pila. */
.capa-fila:nth-child(1) { z-index: 8; }
.capa-fila:nth-child(2) { z-index: 7; }
.capa-fila:nth-child(3) { z-index: 6; }
.capa-fila:nth-child(4) { z-index: 5; }
.capa-fila:nth-child(5) { z-index: 4; }
.capa-fila:nth-child(6) { z-index: 3; }
.capa-fila:nth-child(7) { z-index: 2; }
.capa-fila:nth-child(8) { z-index: 1; }
.capa-fila--al-frente,
.capa-fila--al-frente:nth-child(n) { z-index: 20; }

.capa {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--paso);
  /* 6 px arriba y abajo: entre el texto de una fila y el de la siguiente siempre hay 12 px o más, aunque el dato ocupe dos líneas. */
  padding-block: 6px;
  padding-left: var(--zona);
  border-radius: 14px;
  text-align: left;
}
.capa:focus-visible { outline-offset: -2px; }
/* El trazo que une la losa con su nombre: sale de la punta derecha del rombo y termina antes del texto (solo desde tableta: en celular no hay sitio). */
.capa::before {
  content: '';
  display: none;
  position: absolute;
  top: 50%;
  left: calc(var(--zona) / 2 + var(--medio) + 18px);
  width: calc(var(--hueco) - 18px - 24px);
  height: 1px;
  background: linear-gradient(90deg, rgba(var(--oro-canto-rgb), 0.45), rgba(var(--oro-metal-rgb), 0.1));
  transform-origin: left center;
  pointer-events: none;
}
/* El hueco de la losa que todavía no llegó: solo su contorno, apenas dibujado. Así se ve cuántas capas faltan, sin adelantar su texto. */
.capa::after {
  content: '';
  position: absolute;
  left: calc(var(--zona) / 2);
  top: 50%;
  width: var(--lado);
  height: var(--lado);
  margin: calc(var(--lado) / -2) 0 0 calc(var(--lado) / -2);
  border: 1px solid rgba(238, 230, 216, 0.11);
  border-radius: var(--radio-losa);
  transform: perspective(var(--perspectiva)) rotateX(var(--inclinacion)) rotateZ(-45deg);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

/* ── La losa ── */
.capa__losa {
  position: absolute;
  left: calc(var(--zona) / 2);
  top: 50%;
  width: var(--lado);
  height: var(--lado);
  margin: calc(var(--lado) / -2) 0 0 calc(var(--lado) / -2);
  transition: opacity 0.3s, translate 0.45s var(--curva);
  pointer-events: none;
}
/* La sombra que echa sobre la pila: la misma forma, un poco atrás y desenfocada. Como no se levanta con la losa, al pasar al frente se separa de ella. */
.capa__losa::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radio-losa);
  background: rgba(0, 0, 0, 0.9);
  filter: blur(calc(var(--lado) * 0.075));
  opacity: 0.8;
  transform: perspective(var(--perspectiva)) rotateX(var(--inclinacion)) rotateZ(-45deg) translate3d(calc(var(--lado) * 0.03), calc(var(--lado) * 0.035), calc(var(--grosor) * -1.7));
}

.capa__cuerpo {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: perspective(var(--perspectiva)) rotateX(var(--inclinacion)) rotateZ(-45deg);
  transition: transform 0.55s var(--curva);
}
/* Los dos cantos que se ven (el izquierdo y el de abajo del cuadrado, que tras girarlo miran hacia quien mira). Cada uno nace en el borde de
   la cara de arriba y se hunde hacia atrás; en ese borde llevan una línea fina de luz dorada, y se oscurecen hacia el fondo. */
.capa__cuerpo::before,
.capa__cuerpo::after {
  content: '';
  position: absolute;
  pointer-events: none;
}
.capa__cuerpo::before {
  top: 0;
  left: calc(var(--grosor) * -1);
  width: var(--grosor);
  height: 100%;
  transform-origin: 100% 50%;
  transform: rotateY(-90deg);
  background: linear-gradient(270deg, #4b3f24 0%, #1c1810 38%, #090806 100%);
  border-right: 1px solid rgba(var(--oro-canto-rgb), 0.6);
}
.capa__cuerpo::after {
  top: 100%;
  left: 0;
  width: 100%;
  height: var(--grosor);
  transform-origin: 50% 0;
  transform: rotateX(-90deg);
  background: linear-gradient(180deg, #33291a 0%, #120f0a 45%, #070605 100%);
  border-top: 1px solid rgba(var(--oro-canto-rgb), 0.42);
}

/* La cara de arriba: vidrio oscuro con un reflejo en diagonal y un borde dorado que se enciende hacia la punta de arriba. --calor sube el
   brillo del borde (el cursor, el foco, la llegada). El aro morado va aparte (::before) y solo se ve mientras suena o está al frente. */
.capa__cara {
  --alfa: calc(0.62 + 0.36 * var(--calor));
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 1.5px solid transparent;
  border-radius: var(--radio-losa);
  background:
    linear-gradient(105deg, rgba(255, 240, 205, 0) 24%, rgba(255, 240, 205, 0.1) 37%, rgba(255, 240, 205, 0.025) 46%, rgba(255, 240, 205, 0) 56%) padding-box,
    linear-gradient(225deg, #201d17 0%, #0f0e0b 54%, #070706 100%) padding-box,
    linear-gradient(225deg, rgba(var(--oro-canto-rgb), var(--alfa)) 0%, rgba(var(--oro-metal-rgb), calc(var(--alfa) * 0.5)) 38%, rgba(var(--oro-metal-rgb), 0.12) 62%, rgba(var(--oro-metal-rgb), calc(var(--alfa) * 0.62)) 100%) border-box;
  background-origin: border-box;
  background-clip: padding-box, padding-box, border-box;
  color: rgba(238, 230, 216, 0.92);
  box-shadow: 0 0 calc(var(--lado) * 0.2) rgba(var(--oro-metal-rgb), calc(0.05 + 0.2 * var(--calor)));
  transition: --calor 0.35s ease, box-shadow 0.3s, color 0.3s;
}
/* Un marco fino por dentro: se leen como láminas de vidrio y no como losas lisas. */
.capa__cara::after {
  content: '';
  position: absolute;
  inset: 7%;
  border: 1px solid rgba(238, 230, 216, 0.07);
  border-radius: calc(var(--radio-losa) * 0.8);
  pointer-events: none;
}
/* El aro morado: solo se ve mientras suena la mezcla (y late con el nivel: portada.js escribe --n en cada fila) o mientras la capa está al frente. */
.capa__cara::before {
  content: '';
  position: absolute;
  inset: -1.5px;
  border: 1.5px solid var(--morado);
  border-radius: inherit;
  box-shadow: 0 0 calc(var(--lado) * 0.2) rgba(155, 124, 244, 0.6), inset 0 0 calc(var(--lado) * 0.1) rgba(155, 124, 244, 0.25);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
/* El glifo gira al revés que la losa: queda derecho y solo se aplasta por la inclinación. Su trazo tiene un grosor fijo en pantalla. */
.capa__glifo { width: 60%; height: 60%; transform: rotate(45deg); }
.capa__glifo * { vector-effect: non-scaling-stroke; stroke-width: 2px; }

/* El texto de cada fila va en tres niveles: primero lo que se oye, en palabras de calle (el nombre); luego para qué sirve; y al final,
   más chico y en gris, el nombre técnico con su cifra exacta (el dato para quien quiere saber más, sin estorbar a quien no). */
.capa__texto { display: grid; gap: 2px; min-width: 0; transition: opacity 0.3s; }
.capa__nombre { font-size: var(--t-2); line-height: var(--l-2); color: var(--hueso); text-wrap: balance; transition: color 0.2s; }
.capa__dato { font-size: var(--t-4); line-height: var(--l-4); color: var(--niebla); text-wrap: balance; }   /* si se parte, en dos líneas parejas */
.capa__tec { display: block; margin-top: 2px; color: var(--gris); font-size: var(--t-5); line-height: var(--l-5); }

.capa:hover .capa__nombre { color: var(--blanco); }
/* Al pasar el cursor o enfocar con el teclado, la losa asoma un poco: así se ve que se puede sacar de la pila. Con el cursor, además, el
   borde dorado se enciende (un reflejo; el oro nunca marca el foco ni un estado). */
.capa:hover .capa__cuerpo,
.capa:focus-visible .capa__cuerpo {
  transform: perspective(var(--perspectiva)) rotateX(var(--inclinacion)) rotateZ(-45deg) translate3d(calc(var(--sale) * 0.3), 0, calc(var(--sube) * 0.25));
}
@media (hover: hover) and (pointer: fine) {
  .capa:hover .capa__cara { --calor: 0.55; }
}

/* Una capa al frente: las demás se apagan (y su texto pasa a gris, sigue legible) y esa se desliza fuera de la pila. */
.capas--enfoque .capa:not([aria-pressed="true"]) .capa__losa { opacity: 0.4; }
.capas--enfoque .capa:not([aria-pressed="true"]) .capa__nombre,
.capas--enfoque .capa:not([aria-pressed="true"]) .capa__dato { color: var(--gris); }
.capa[aria-pressed="true"] .capa__cuerpo {
  transform: perspective(var(--perspectiva)) rotateX(var(--inclinacion)) rotateZ(-45deg) translate3d(var(--sale), 0, var(--sube));
}
.capa[aria-pressed="true"] .capa__cara {
  color: var(--morado);
  box-shadow: 0 0 0 1px rgba(155, 124, 244, 0.35), 0 0 calc(var(--lado) * 0.27) rgba(155, 124, 244, 0.5);
}
.capa[aria-pressed="true"] .capa__cara::before { opacity: 1; }
.capa[aria-pressed="true"] .capa__nombre { color: var(--blanco); }
.capa[aria-pressed="true"] .capa__dato { color: var(--hueso); }
.capa[aria-pressed="true"]::before { background: linear-gradient(90deg, rgba(155, 124, 244, 0.7), rgba(155, 124, 244, 0.12)); }
.capas--enfoque .capa:not([aria-pressed="true"])::before { opacity: 0.35; }

.capas__mandos { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
.capas__mandos .boton { gap: 12px; }
.capas__mandos .icono { width: 22px; height: 22px; }
.capas__mandos [data-icono="reproducir"] svg { fill: currentColor; }
.capas__mandos [data-icono="pausa"] svg { stroke-width: 2.4; }

/* Sonando: cada losa late con el nivel real del sonido (--n, de 0 a 1, escrito por portada.js) y su aro se enciende en morado. */
.capas--suena .capa__cara::before { opacity: calc(0.2 + 0.8 * var(--n, 0.5)); }
.capas--suena .capa[aria-pressed="true"] .capa__cara::before { opacity: 1; }
.capas--suena .capa::before { background: linear-gradient(90deg, rgba(155, 124, 244, calc(0.2 + 0.55 * var(--n, 0.5))), rgba(155, 124, 244, 0.08)); }
.capas--suena .capa__cara { color: var(--blanco); }
.capas--suena .capa[aria-pressed="true"] .capa__cara { color: var(--morado); }

/* ── Las capas que llegan de a una (solo con .como-progresivo) ──
   Las que todavía no llegaron esperan arriba, sin verse: queda su contorno, y no se pueden tocar. Sus botones siguen en el orden del
   documento: con el teclado reciben el foco igual y portada.js baja hasta donde llegan. */
.como-progresivo .capa-fila:not(.capa-fila--llego) .capa__losa { opacity: 0; translate: 0 calc(var(--lado) * -0.45); }
.como-progresivo .capa-fila:not(.capa-fila--llego) .capa__texto { opacity: 0; }
.como-progresivo .capa-fila:not(.capa-fila--llego) .capa { pointer-events: none; }
.como-progresivo .capa-fila:not(.capa-fila--llego) .capa::before { opacity: 0; }
.como-progresivo .capa-fila:not(.capa-fila--llego) .capa::after { opacity: 1; }
/* Mientras se arma, la capa nueva es la que se lee a plena luz (su nombre, en blanco); las anteriores quedan en la pila con el texto un poco
   más tenue (sigue sobre 4,5:1). Con las ocho a la vista, todas iguales. */
.capas--construyendo .capa-fila--llego:not(.capa-fila--actual) .capa__texto { opacity: 0.78; }
.capa-fila--actual .capa__nombre { color: var(--blanco); }

/* La llegada: la losa cae sobre la pila y asienta, el borde destella en dorado y se apaga, el glifo se dibuja, el trazo se tiende hasta el
   nombre y el texto se enciende. --retraso escalona varias que llegan juntas (un salto largo). */
@keyframes losa-cae {
  0% { translate: 0 calc(var(--lado) * -0.8); opacity: 0; }
  32% { opacity: 1; }
  68% { translate: 0 calc(var(--lado) * 0.05); }
  84% { translate: 0 calc(var(--lado) * -0.015); }
  100% { translate: 0 0; opacity: 1; }
}
@keyframes losa-calor { from { --calor: 1; } to { --calor: 0; } }
@keyframes glifo-traza { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes hilo-traza { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes texto-enciende { from { opacity: 0; translate: 10px 0; } to { opacity: 1; translate: 0 0; } }

@media (prefers-reduced-motion: no-preference) {
  .como-progresivo .capa-fila--llego .capa__losa { animation: losa-cae 0.95s var(--curva) var(--retraso, 0s) backwards; }
  .como-progresivo .capa-fila--llego .capa__cara { animation: losa-calor 1.6s ease-out calc(var(--retraso, 0s) + 0.5s) backwards; }
  .como-progresivo .capa-fila--llego .capa__glifo { animation: glifo-traza 0.7s var(--curva) calc(var(--retraso, 0s) + 0.55s) backwards; }
  .como-progresivo .capa-fila--llego .capa::before { animation: hilo-traza 0.6s var(--curva) calc(var(--retraso, 0s) + 0.65s) backwards; }
  .como-progresivo .capa-fila--llego .capa__texto { animation: texto-enciende 0.6s ease-out calc(var(--retraso, 0s) + 0.55s) backwards; }
  /* La primera pasada (las que ya tocaban al cargar o al volver) no se anima. */
  .capas--inicial .capa__losa,
  .capas--inicial .capa__cara,
  .capas--inicial .capa__glifo,
  .capas--inicial .capa::before,
  .capas--inicial .capa__texto { animation: none !important; }
}

/* Tableta (desde 768 px): la losa es más grande y entre ella y el nombre hay un trazo. */
@media (min-width: 768px) {
  .capas {
    --lado: 150px;
    --hueco: 88px;
    --paso: 112px;
    --inclinacion: 62deg;
    --perspectiva: 2200px;
    --sale: 36px;
    --sube: 28px;
    max-width: 780px;
  }
  .capa::before { display: block; }
  .capa__nombre { font-size: var(--t-1); line-height: var(--l-1); }
  .capa__dato { font-size: var(--t-3); line-height: var(--l-3); }
  .capa__tec { font-size: var(--t-4); line-height: var(--l-4); }
}
/* Escritorio: el escenario tiene todo el ancho de la sección; la pila va centrada y la losa no se corre hacia el texto, solo se levanta. */
@media (min-width: 1024px) {
  .capas {
    --lado: 184px;
    --hueco: 104px;
    --paso: 108px;
    --inclinacion: 63deg;
    --perspectiva: 2800px;
    --sale: 0px;
    --sube: 32px;
    max-width: 880px;
  }
}
@media (min-width: 1024px) {
  .capa__nombre { font-size: clamp(22px, 1.9vw, 28px); line-height: 1.25; }
  .capa__dato { font-size: var(--t-2); line-height: var(--l-2); }
  .capa__tec { font-size: var(--t-4); line-height: var(--l-4); }
}
@media (min-width: 1280px) {
  .capas { --lado: 208px; --paso: 116px; --sube: 36px; max-width: 940px; }
}

/* ── Pruébalo con audífonos ───────────────────────────────── */
.binaural { max-width: 960px; margin: 64px auto 0; text-align: left; }
.binaural__arte { aspect-ratio: 8 / 3; }
/* Las etiquetas son HTML encima del lienzo: tres carriles iguales, cada uno con su nombre arriba a la izquierda. */
.binaural__etiqueta {
  position: absolute;
  left: 24px;
  z-index: 1;
  color: var(--niebla);
  font-size: var(--t-4);
  line-height: 20px;
  pointer-events: none;
  transition: color 0.3s;
}
.binaural__etiqueta--izq { top: 10px; }
.binaural__etiqueta--pulso { top: calc(33.333% + 10px); }
.binaural__etiqueta--der { top: calc(66.667% + 10px); }
.binaural__etiqueta--viva { color: var(--morado); }

.binaural__mandos { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 28px 24px 0; }
.binaural__mandos .pildora[aria-pressed="true"] {
  border-color: var(--morado);
  background: rgba(155, 124, 244, 0.14);
  box-shadow: 0 0 0 1px rgba(155, 124, 244, 0.4), 0 0 22px rgba(155, 124, 244, 0.3);
}
.pildora--detener { border-color: transparent; background: transparent; color: var(--niebla); }
.pildora--detener:hover { background: var(--pizarra); border-color: var(--pizarra); }
/* Desactivado: un gris propio, sin bajar la opacidad (con opacity: 0.35 el texto quedaba en 2,2:1 sobre el negro). #787269 da 4,4:1
   sobre el negro y 3,7:1 sobre el punto más claro de la tarjeta (nunca baja de 3:1), y sigue claramente más apagado que el estado
   activo (el texto de "Detener" activo es --niebla) y sin fondo ni borde, para que no parezca un botón que se puede tocar. */
.pildora[aria-disabled="true"] { color: #787269; cursor: default; }
.pildora[aria-disabled="true"]:hover { background: transparent; border-color: transparent; }
.binaural__estado { min-height: 40px; padding: 16px 24px 28px; text-align: center; text-wrap: balance; }
.binaural__nota { margin-top: 16px; text-align: center; }

@media (max-width: 1023px) {
  .binaural__mandos .pildora { padding-inline: 18px; font-size: var(--t-2); }
}
@media (max-width: 767px) {
  .binaural { margin-top: 40px; }
  .binaural__arte { aspect-ratio: 6 / 5; }
  .binaural__etiqueta { left: 16px; }
  .binaural__mandos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 20px 16px 0; }
  .binaural__mandos .pildora { justify-content: center; padding-inline: 12px; }
  .binaural__estado { padding: 14px 16px 22px; }
}
@media (max-width: 380px) {
  .binaural__mandos .pildora { padding-inline: 8px; font-size: var(--t-3); }
}

/* ── Así se arma tu ritual ──────────────────────────────────
   Va debajo de las capas y con todo el ancho (hasta 960 px): cada capa se presenta sola y grande y después viaja a su lugar en el mandala,
   y para eso el lienzo necesita espacio (ensamblaje.js, modo explicado). Debajo del lienzo, "Paso 3 de 7" y la lista de pasos con el actual
   resaltado. */
.ensamblaje { max-width: 960px; margin: 32px auto 0; text-align: left; }
/* El alto mínimo deja sitio para que el título del ritual no se monte sobre los anillos de la figura. */
/* width: 100% es necesario: con ancho automático, el alto mínimo se traslada al ancho por la proporción y la tarjeta se saldría de la pantalla. */
.ensamblaje__arte { width: 100%; aspect-ratio: 16 / 9; min-height: 520px; }
/* La luz del lienzo: se concentra alrededor de donde pasa todo y se apaga hacia los bordes (la viñeta de linea.css). Va detrás del dibujo. */
.ensamblaje { background: var(--oro-vineta) 50% 0 / 100% 580px no-repeat, var(--grafito); }
/* Antes de armarse, el lienzo muestra la figura final en sombra: se ve que algo va a pasar y una captura no sale vacía. */
.ensamblaje__lienzo { transition: opacity 0.45s var(--curva); }
.ensamblaje__lienzo--sombra { opacity: 0.2; }
.ensamblaje__pie { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px 0; }
.ensamblaje__rotulos { display: grid; gap: 4px; min-width: 0; }
.ensamblaje__titulo { font-weight: 400; color: var(--niebla); }
/* Mientras se arma dice en qué paso va; al terminar, que está listo. Su alto está reservado: al aparecer no mueve nada. */
.ensamblaje__paso { min-height: var(--l-3); color: var(--blanco); font-size: var(--t-3); line-height: var(--l-3); font-variant-numeric: tabular-nums; }
/* Cómo oírlo y, mientras suena, qué se suma ahora. Su alto está reservado para dos líneas: al cambiar el texto no se mueve nada. */
.ensamblaje__oyes { color: var(--gris); max-width: 46ch; min-height: calc(2 * var(--l-4)); }
/* Escucharlo y Verlo otra vez, juntos. Con el sonido encendido el primero lleva el aro morado (el morado es solo para lo que suena). */
.ensamblaje__mandos { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.ensamblaje__pie .boton { gap: 10px; }
.ensamblaje__pie .icono { width: 20px; height: 20px; }
.pasos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px 24px;
  padding: 20px 24px 28px;
  counter-reset: paso;
}
.pasos li {
  display: grid;
  grid-template-columns: 1.4em minmax(0, 1fr);
  align-items: baseline;
  margin-left: -10px;
  padding: 4px 8px 4px 10px;
  border-radius: 8px;
  counter-increment: paso;
  transition: background-color 0.3s var(--curva), box-shadow 0.3s var(--curva);
}
.pasos li::before { content: counter(paso); color: var(--gris); font-size: var(--t-5); transition: color 0.3s; }
/* El paso de ahora, resaltado en blanco: una línea a su izquierda y su número en blanco. No es morado (nada suena) ni dorado (el oro no
   marca estados): es lo que se está armando. */
.pasos li.pasos__actual {
  background: linear-gradient(90deg, rgba(238, 230, 216, 0.1), rgba(238, 230, 216, 0) 88%);
  box-shadow: inset 2px 0 0 var(--blanco);
}
.pasos li.pasos__actual::before { color: var(--blanco); }
/* Primero lo que se oye (blanco) y después la cifra (gris). La cifra no se parte: si no cabe en la línea, baja entera ("8 frecuencias
   más" en vez de "8" arriba y "frecuencias más" abajo). */
.pasos__valor { color: var(--blanco); }
.pasos__detalle { color: var(--gris); white-space: nowrap; }

@media (max-width: 767px) {
  .ensamblaje { margin-top: 24px; }
  .ensamblaje__arte { aspect-ratio: 6 / 5; }
  .ensamblaje__pie { flex-direction: column; align-items: flex-start; padding: 18px 16px 0; }
  .ensamblaje__mandos { justify-content: flex-start; }
  .pasos { grid-template-columns: minmax(0, 1fr); padding: 16px 16px 22px; }
}
@media (max-width: 560px) {
  .ensamblaje__arte { aspect-ratio: 5 / 7; min-height: 470px; }
}

/* ── Datos: cuatro hechos en texto, sin cifras grandes ─────────
   Cada uno abre con una frase llana (lo que importa a quien llega) y, debajo y más chico, el dato técnico exacto. Desde 1024 px van en
   una sola fila de cuatro columnas; de 900 a 1023 px, en dos; con menos ancho, en una. */
.datos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  justify-content: center;
  gap: 24px 72px;
  margin-top: 72px;
  text-align: left;
}
.dato { display: grid; align-content: start; gap: 2px; }
.dato__titulo { color: var(--blanco); font-size: var(--t-3); line-height: var(--l-3); }
.dato__detalle { color: var(--gris); font-size: var(--t-4); line-height: var(--l-4); }

@media (min-width: 1024px) {
  .datos { grid-template-columns: repeat(4, minmax(0, 1fr)); justify-content: stretch; gap: 24px 32px; }
}
@media (min-width: 1180px) {
  .datos { column-gap: 40px; }
}
@media (max-width: 899px) {
  .datos { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 48px; }
}
@media (max-width: 767px) {
  .dato { gap: 0; }
  .dato__detalle { font-size: 13px; line-height: 16px; }
}

/* ── En la app: cuatro cosas, cada una con su ícono y una línea ─ */
.en-app { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: 80px; text-align: left; }
.en-app__texto .texto-1 { margin-top: 16px; text-wrap: balance; }
.en-app__texto .enlace-flecha { margin-top: 24px; }
.en-app__lista { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px 40px; }
.en-app__item { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: start; column-gap: 16px; }
.en-app__item .icono { grid-row: 1 / 3; width: 32px; height: 32px; margin-top: 2px; }
.en-app__nombre { font-size: var(--t-1); font-weight: 400; line-height: var(--l-1); text-wrap: balance; }
.en-app__linea { margin-top: 4px; color: var(--gris); font-size: var(--t-3); line-height: var(--l-3); text-wrap: pretty; }

@media (min-width: 900px) {
  .en-app { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: center; gap: 72px; }
  .en-app__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 40px; }
}
@media (max-width: 767px) {
  .en-app { gap: 32px; margin-top: 56px; }
  .en-app__lista { gap: 24px; }
}

/* ── Ciencia y tradición: línea de tiempo ─────────────────────
   En celular y tablet es vertical (riel a la izquierda). En escritorio es horizontal y los textos alternan
   arriba y abajo de la línea. Al entrar en pantalla la línea se dibuja y cada hito aparece en orden. */
.hitos {
  --nodo: 60px;
  --riel: rgba(238, 230, 216, 0.26);
  max-width: 560px;
  margin: 56px auto 0;
  text-align: left;
}
.hito { position: relative; padding: 0 0 44px 88px; }
.hito:last-child { padding-bottom: 0; }
.hito__nodo {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--nodo);
  height: var(--nodo);
  border: 1.5px solid rgba(238, 230, 216, 0.55);
  border-radius: 50%;
  background: var(--negro);
  box-shadow: var(--oro-filo), 0 0 28px -6px rgba(var(--oro-rgb), 0.2);   /* el filo de arriba y un halo cálido apenas */
  color: var(--blanco);
}
.hito__glifo { width: 32px; height: 32px; }
/* Tramo de riel que une este hito con el siguiente. */
.hito::before {
  content: '';
  position: absolute;
  left: calc(var(--nodo) / 2 - 0.5px);
  top: var(--nodo);
  bottom: 0;
  width: 1px;
  background: var(--riel);
  transform-origin: top;
}
.hito:last-child::before { display: none; }
.hito__texto { padding-top: 14px; }
.hito__fecha { font-size: var(--t-1); line-height: var(--l-1); color: var(--blanco); }
.hito__detalle { margin-top: 6px; font-size: var(--t-3); line-height: var(--l-3); color: var(--niebla); text-wrap: balance; }
/* El último hito es lo que Campo Vivo hace hoy: su nodo va en blanco lleno y los demás, más tenues. No es morado: en esta página
   no suena nada, y el morado marca solo lo que está vivo. */
.hito--vivo .hito__nodo { border-color: var(--blanco); }

@media (max-width: 767px) {
  .hitos { --nodo: 52px; margin-top: 40px; }
  .hito { padding: 0 0 36px 72px; }
  .hito__glifo { width: 28px; height: 28px; }
  .hito__texto { padding-top: 10px; }
}

/* En escritorio la línea es una rejilla de 20 columnas: cada hito ocupa 4 (el doble de su paso de 2), así su texto, que es
   el doble de ancho que su nodo, cabe sin salirse y queda centrado sin márgenes negativos ni alineaciones que cambien
   entre navegadores. Los hitos vecinos se solapan 2 columnas; los textos de lados distintos no se tocan. */
@media (min-width: 1180px) {
  .hitos {
    --nodo: 72px;
    display: grid;
    grid-template-columns: repeat(20, minmax(0, 1fr));
    grid-template-rows: 200px var(--nodo) 200px;
    max-width: none;
    margin-top: 72px;
  }
  .hito {
    display: grid;
    grid-row: 1 / 4;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: 200px var(--nodo) 200px;
    padding: 0;
  }
  .hito:last-child { padding: 0; }
  .hito:nth-child(1) { grid-column: 1 / span 4; }
  .hito:nth-child(2) { grid-column: 3 / span 4; }
  .hito:nth-child(3) { grid-column: 5 / span 4; }
  .hito:nth-child(4) { grid-column: 7 / span 4; }
  .hito:nth-child(5) { grid-column: 9 / span 4; }
  .hito:nth-child(6) { grid-column: 11 / span 4; }
  .hito:nth-child(7) { grid-column: 13 / span 4; }
  .hito:nth-child(8) { grid-column: 15 / span 4; }
  .hito:nth-child(9) { grid-column: 17 / span 4; }
  /* El riel pasa por el centro de los nodos: cada hito aporta el tramo de sus dos columnas centrales
     (el primero solo desde su nodo hacia la derecha y el último solo hasta su nodo). */
  .hito::before,
  .hito:last-child::before {
    position: static;
    display: block;
    grid-row: 2;
    grid-column: 2 / 4;
    align-self: center;
    width: auto;
    height: 1px;
  }
  .hito:first-child::before { grid-column: 3 / 4; }
  .hito:last-child::before { grid-column: 2 / 3; }
  .hito__nodo { position: relative; grid-row: 2; grid-column: 2 / 4; justify-self: center; }
  .hito__texto { position: relative; grid-column: 1 / -1; padding: 0 8px; text-align: center; }
  /* Los textos alternan arriba y abajo; un trazo corto los une con su nodo. */
  .hito:nth-child(odd) .hito__texto { grid-row: 1; align-self: end; padding-bottom: 30px; }
  .hito:nth-child(even) .hito__texto { grid-row: 3; align-self: start; padding-top: 30px; }
  .hito__texto::after {
    content: '';
    position: absolute;
    left: 50%;
    width: 1px;
    height: 18px;
    background: var(--riel);
  }
  .hito:nth-child(odd) .hito__texto::after { bottom: 4px; }
  .hito:nth-child(even) .hito__texto::after { top: 4px; }
  .hito__fecha { font-size: var(--t-2); line-height: var(--l-2); }
  .hito__detalle { font-size: var(--t-4); line-height: var(--l-4); }
  .hito__glifo { width: 40px; height: 40px; }
}
/* Con subgrid las dos zonas de texto se ajustan a la más alta; sin él quedan en 200 px. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 1180px) {
    .hitos { grid-template-rows: auto var(--nodo) auto; }
    .hito { grid-template-rows: subgrid; }
  }
}

/* Aparición: la base ya es el estado final y completo (se ve así sin JS, con movimiento reducido o en una captura).
   Con movimiento, mientras espera llegar (ciencia.js con Linea.mov.alLlegar, que pone mov-revelar en <html>) el hito no se ve; al
   llegar (su borde pasa el 65 % de la ventana) JS agrega .hito--visto y corre su animación desde el inicio, al ritmo de los revelados. */
@keyframes hito-nodo { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
@keyframes hito-texto { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes hito-riel-vertical { from { transform: scaleY(0); } to { transform: none; } }
@keyframes hito-riel-horizontal { from { transform: scaleX(0); } to { transform: none; } }

@media (prefers-reduced-motion: no-preference) {
  .mov-revelar .hito:not(.hito--visto)::before { transform: scaleY(0); }
  .mov-revelar .hito:not(.hito--visto) .hito__nodo,
  .mov-revelar .hito:not(.hito--visto) .hito__texto { opacity: 0; }
  .hito--visto::before { animation: hito-riel-vertical var(--mov-revela) var(--curva-revela) 0.25s both; }
  .hito--visto .hito__nodo { animation: hito-nodo var(--mov-revela) var(--curva-revela) both; }
  .hito--visto .hito__texto { animation: hito-texto var(--mov-revela) var(--curva-revela) 0.1s both; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 1180px) {
  .hito:nth-child(2) { --retraso: 0.15s; }
  .hito:nth-child(3) { --retraso: 0.3s; }
  .hito:nth-child(4) { --retraso: 0.45s; }
  .hito:nth-child(5) { --retraso: 0.6s; }
  .hito:nth-child(6) { --retraso: 0.75s; }
  .hito:nth-child(7) { --retraso: 0.9s; }
  .hito:nth-child(8) { --retraso: 1.05s; }
  .hito:nth-child(9) { --retraso: 1.2s; }
  .mov-revelar .hito:not(.hito--visto)::before { transform: scaleX(0); }
  .hito--visto::before { transform-origin: left; animation: hito-riel-horizontal var(--mov-revela) var(--curva-revela) var(--retraso, 0s) both; }
  .hito--visto .hito__nodo { animation-delay: calc(var(--retraso, 0s) + 0.2s); }
  .hito--visto .hito__texto { animation-delay: calc(var(--retraso, 0s) + 0.35s); }
}

/* ── Lo que dice la investigación ─────────────────────────── */
.estudios {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  max-width: 680px;
  margin: 48px auto 0;
  text-align: left;
}
.estudio { display: flex; flex-direction: column; gap: 20px; padding: 28px 24px 26px; transition: box-shadow 0.3s var(--curva); }
.estudio:hover { box-shadow: var(--oro-filo), inset 0 0 0 1px rgba(238, 230, 216, 0.09); }
/* El reflejo cruza la tarjeta con el cursor encima. */
.estudio::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--oro-reflejo) 135% 0 / 260% 100% no-repeat;
  pointer-events: none;
  transition: background-position 0.9s var(--curva);
}
@media (hover: hover) and (pointer: fine) {
  .estudio:hover::before { background-position: -35% 0; }
}
.estudio__tema {
  align-self: flex-start;
  padding: 3px 12px;
  border: 1px solid rgba(238, 230, 216, 0.28);
  border-radius: var(--radio-pildora);
  color: var(--niebla);
  font-size: var(--t-4);
  font-weight: 400;
  line-height: var(--l-4);
}
.estudio__resumen { color: var(--hueso); font-size: var(--t-2); line-height: 26px; text-wrap: balance; }
.estudio__fuente {
  display: grid;
  gap: 2px;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--pizarra);
  color: var(--gris);
  font-size: var(--t-4);
  line-height: var(--l-4);
}
.estudio__fuente > span { display: block; }
.estudio__autores { color: var(--niebla); }
/* El margen negativo agranda el área de toque (44 px) sin mover el resto de la tarjeta. */
.estudio__doi { align-self: flex-start; min-height: 44px; margin-block: -12px; font-size: var(--t-4); line-height: var(--l-4); }
.estudio__doi .icono { width: 12px; height: 12px; }

@media (max-width: 767px) {
  .estudios { margin-top: 40px; }
  .estudio { gap: 16px; padding: 24px 20px 22px; }
}
@media (min-width: 1100px) {
  .estudios { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: none; margin-top: 64px; }
  .estudio { padding: 30px 28px 28px; }
}

/* ── Tu propia evidencia ──────────────────────────────────────
   En la página de ciencia abre su propia sección: el texto a un lado y el gráfico al otro. En la portada solo queda un párrafo
   corto (.evidencia-corta) con el enlace a esa página. */
.evidencia-corta { display: grid; justify-items: center; gap: 20px; max-width: 720px; margin: 56px auto 0; }
.evidencia-corta .texto-1 { text-wrap: balance; }
.evidencia-corta__lema { color: var(--blanco); }
.evidencia-corta .enlace-flecha { font-size: var(--t-1); line-height: var(--l-1); }
.evidencia-corta .enlace-flecha .icono { width: 16px; height: 16px; }

.evidencia {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "texto" "grafico" "enlace";
  gap: 32px;
  text-align: left;
}
.evidencia__texto { grid-area: texto; }
.evidencia__texto .texto-1 { margin-top: 20px; text-wrap: balance; }
.evidencia__enlace { grid-area: enlace; justify-self: start; font-size: var(--t-1); line-height: var(--l-1); }
.evidencia__enlace .icono { width: 16px; height: 16px; }

@media (min-width: 900px) {
  .evidencia {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas: "texto grafico" "enlace grafico";
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 56px;
    row-gap: 28px;
  }
  .evidencia__texto { align-self: end; }
  .evidencia__enlace { align-self: start; }
}

/* Gráfico de ejemplo: línea fina de antes y después por sesión. Sin morado: no es algo vivo.
   grid-area: grafico lo pone en su celda (cubre las dos filas de la rejilla): el título, el párrafo y el enlace quedan juntos y
   centrados frente a él. Sin esto el gráfico caía solo en la primera fila y el texto se iba al fondo, con un hueco de más de
   300 px encima. */
.grafico { grid-area: grafico; position: relative; margin: 0; padding: 60px 20px 20px; }
.grafico__ejemplo { position: absolute; top: 20px; left: 20px; }
.grafico__svg { display: block; width: 100%; height: auto; overflow: visible; }
.grafico__guias path { stroke: rgba(238, 230, 216, 0.09); stroke-width: 1; }
.grafico__ejes text { fill: var(--gris); font-family: var(--fuente); font-size: 15px; }
.grafico__conectores path { stroke: rgba(238, 230, 216, 0.3); stroke-width: 1; }
.grafico__antes {
  fill: none;
  stroke: rgba(238, 230, 216, 0.5);
  stroke-width: 1.3;
  stroke-dasharray: 3 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.grafico__despues { fill: none; stroke: var(--blanco); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.grafico__puntos--antes circle { fill: var(--negro); stroke: rgba(238, 230, 216, 0.65); stroke-width: 1.4; }
.grafico__puntos--despues circle { fill: var(--blanco); }
.grafico__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 20px;
  margin-top: 16px;
  color: var(--niebla);
  font-size: var(--t-4);
  line-height: var(--l-4);
}
.grafico__marca { display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; vertical-align: -1px; }
.grafico__marca--antes { border: 1.4px solid rgba(238, 230, 216, 0.65); }
.grafico__marca--despues { background: var(--blanco); }
.grafico__escala { flex-basis: 100%; color: var(--gris); }
.grafico__aviso { flex-basis: 100%; color: var(--gris); font-size: var(--t-5); line-height: var(--l-5); }

/* Al llegar (.grafico--visto, igual que los hitos) la línea del "después" se dibuja y lo demás aparece. La base ya es completa; con
   movimiento, mientras espera llegar, las líneas y los puntos no se ven (la tarjeta, su leyenda y su escala sí). */
@keyframes grafico-linea { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes grafico-aparece { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: no-preference) {
  .mov-revelar .grafico:not(.grafico--visto) .grafico__despues { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
  .mov-revelar .grafico:not(.grafico--visto) .grafico__antes,
  .mov-revelar .grafico:not(.grafico--visto) .grafico__conectores,
  .mov-revelar .grafico:not(.grafico--visto) .grafico__puntos--antes,
  .mov-revelar .grafico:not(.grafico--visto) .grafico__puntos--despues { opacity: 0; }
  .grafico--visto .grafico__despues { stroke-dasharray: 1 1; animation: grafico-linea 1.8s var(--curva) 0.35s both; }
  .grafico--visto .grafico__antes,
  .grafico--visto .grafico__conectores,
  .grafico--visto .grafico__puntos--antes { animation: grafico-aparece 0.8s var(--curva) 0.5s both; }
  .grafico--visto .grafico__puntos--despues { animation: grafico-aparece 0.8s var(--curva) 0.9s both; }
}

@media (max-width: 767px) {
  .evidencia { gap: 24px; }
  .grafico { padding: 56px 12px 16px; }
  .grafico__ejemplo { top: 16px; left: 16px; }
}

/* ── Precios: dos planes, Gratis y Premium ─────────────────────
   Dos tarjetas del sistema (.tarjeta). Premium lleva además el contorno diagonal de luz (.canto-luz), que la destaca sin otro color. La
   única acción principal de la sección queda debajo, centrada: abre la app. Las listas usan un cuadrito de línea (la placa) como marca. */
.planes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  max-width: 880px;
  margin: 48px auto 0;
  text-align: left;
}
.plan { display: flex; flex-direction: column; gap: 20px; padding: 32px 28px 30px; }
.plan__nombre { color: var(--blanco); }
.plan__precio { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.plan__monto { color: var(--blanco); font-size: var(--t-h3); font-weight: 500; line-height: var(--l-h3); }
.plan__periodo { color: var(--gris); font-size: var(--t-3); line-height: var(--l-3); }
.plan__lista { display: grid; gap: 14px; padding-top: 20px; border-top: 1px solid var(--pizarra); }
.plan__lista li { position: relative; padding-left: 24px; color: var(--niebla); font-size: var(--t-2); line-height: var(--l-2); text-wrap: pretty; }
.plan__lista li::before {
  content: '';
  position: absolute;
  top: 0.55em;
  left: 2px;
  width: 8px;
  height: 8px;
  border: 1px solid var(--oro);
  border-radius: 1px;
}
.precios__accion { display: flex; justify-content: center; margin-top: 40px; }
.precios__nota { margin-top: 24px; }

@media (max-width: 767px) {
  .planes { margin-top: 40px; }
  .plan { gap: 16px; padding: 26px 20px 24px; }
  .plan__lista { gap: 12px; padding-top: 16px; }
  .precios__accion { margin-top: 32px; }
  .precios__accion .boton { width: 100%; }
}
@media (min-width: 768px) {
  .planes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .plan { padding: 36px 32px 34px; }
}

/* ── Testimonios (la sección sale sola cuando la lista tiene elementos) ───── */
.testimonios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 380px));
  justify-content: center;
  gap: 24px;
  margin-top: 56px;
  text-align: left;
}
.testimonio { display: flex; flex-direction: column; gap: 24px; padding: 28px; }
.testimonio__cita { color: var(--blanco); font-size: var(--t-1); line-height: var(--l-1); text-wrap: pretty; }
.testimonio__autor { margin-top: auto; color: var(--niebla); font-size: var(--t-4); line-height: var(--l-4); }
.testimonio__autor span { display: block; color: var(--gris); }

/* ── Preguntas frecuentes ─────────────────────────────────── */
.preguntas { display: grid; gap: 24px; max-width: 1152px; margin: 56px auto 0; text-align: left; }
.pregunta { position: relative; border-radius: 12px; background: var(--grafito); box-shadow: var(--oro-filo); transition: background-color var(--rapido); }
.pregunta:hover { background: var(--grafito-claro); }
/* El reflejo: la banda de luz cálida cruza la pregunta con el cursor encima (por debajo del texto: el ::before no recibe toques). */
.pregunta::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--oro-reflejo) 135% 0 / 260% 100% no-repeat;
  pointer-events: none;
  transition: background-position 0.8s var(--curva);
}
@media (hover: hover) and (pointer: fine) {
  .pregunta:hover::before { background-position: -35% 0; }
}
.pregunta summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 76px;
  padding: 18px 24px;
  border-radius: 12px;
  cursor: pointer;
  list-style: none;
  font-size: var(--t-1);
  line-height: var(--l-1);
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary .icono { transition: transform 0.3s var(--curva); }
.pregunta[open] summary .icono { transform: rotate(180deg); }
.pregunta > p { max-width: 880px; padding: 0 24px 28px; animation: aparecer 0.3s var(--curva) both; }
.pregunta > p a { color: var(--blanco); text-decoration: underline; text-decoration-color: rgba(238, 230, 216, 0.4); text-underline-offset: 3px; }
.pregunta > p a:hover { text-decoration-color: var(--blanco); }

/* Desde 900 px las preguntas van en dos columnas: cerradas ocupan la mitad de alto. Cada una crece sola al abrirse (align-items: start)
   y el alto mínimo deja sitio para una pregunta de dos líneas, así las filas quedan parejas. */
@media (min-width: 900px) {
  .preguntas { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 16px 24px; }
  .pregunta summary { min-height: 92px; }
}

@media (max-width: 767px) {
  .preguntas { gap: 12px; margin-top: 40px; }
  .pregunta summary { min-height: 64px; padding: 16px 18px; }
  .pregunta > p { padding: 0 18px 22px; }
}

/* ── Cierre ───────────────────────────────────────────────────
   La portada abre con la arena en ruido y cierra con la arena ya ordenada, en morado y con la misma luz que la última figura
   del héroe. La placa 3D (portada.js la crea cuando la sección está cerca) ocupa la sección y se encuadra solo en el espacio
   que el texto deja libre, así que el texto nunca la cruza y no hace falta nada encima que la oscurezca: ni degradados ni
   máscaras (todo lo que se pone entre la placa y los ojos le quita brillo a la arena).
   Desde 1024 px: el texto a la izquierda, alineado a la izquierda, y la placa a la derecha, a 80 px o más de la columna
   (como el héroe). En pantallas más angostas: la placa arriba y el texto centrado debajo. */
.cierre {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: max(700px, 92vh);
  min-height: max(700px, 92svh);
  padding-block: 64px 72px;
  overflow: hidden;
}
.cierre__escena { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cierre__escena .arena-lienzo { display: block; width: 100%; height: 100%; pointer-events: none; }
.cierre__texto { position: relative; z-index: 1; }
.cierre .boton { margin-top: 32px; }

@media (min-width: 1024px) {
  .cierre {
    align-items: center;
    min-height: clamp(640px, 96vh, 900px);
    min-height: clamp(640px, 96svh, 900px);
    padding-block: 120px;
  }
  .cierre__texto { text-align: left; }
  .cierre__columna { width: clamp(440px, 46%, 480px); }
  .cierre .seccion__texto { max-width: none; margin-inline: 0; }
  .cierre .boton { margin-top: 40px; }
}

/* ── Pie ──────────────────────────────────────────────────── */
.pie { position: relative; margin-top: 128px; padding-top: 72px; padding-bottom: 32px; }
/* El filo de luz del canto de arriba del pie: un hilo que se apaga hacia los lados. Mide lo mismo que la caja del contenido (el ancho
   máximo de la página), para que no asome más allá de las columnas, y el pie deja 72 px de aire debajo: antes el logo y las etiquetas
   quedaban pegados al hilo. */
.pie::before {
  content: '';
  position: absolute;
  inset: 0 max(var(--margen), 50% - var(--ancho) / 2) auto;
  height: 1px;
  background: linear-gradient(90deg, rgba(var(--oro-canto-rgb), 0), rgba(var(--oro-canto-rgb), 0.28) 50%, rgba(var(--oro-canto-rgb), 0));
  pointer-events: none;
}
.pie__fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); align-items: start; gap: 40px; padding-bottom: 80px; }
.pie__columnas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; }
.pie__etiqueta { margin-bottom: 16px; color: var(--gris); font-size: var(--t-4); font-weight: 400; line-height: var(--l-4); }
/* Cada enlace del pie es una fila de 44 px que se toca entera (antes medía 27 px con 12 de aire entre una y otra). */
.pie ul { display: grid; gap: 0; }
/* La primera columna del pie mide menos que el logo grande hasta unos 860 px: ahí el logo se compacta como en la cabecera de celular. */
@media (max-width: 859px) {
  .pie .marca { gap: 10px; }
  .pie .marca .icono { width: 32px; height: 32px; }
  .pie .marca-nombre { font-size: 18px; }
}
.pie ul a,
.pie ul button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;   /* "Foco" medía 41 px de ancho */
  padding: 0;
  color: var(--blanco);
  font-size: var(--t-2);
  line-height: var(--l-2);
  text-align: left;
  transition: color var(--rapido);
}
.pie ul a:hover,
.pie ul button:hover { color: var(--niebla); }
.pie ul a[aria-current="page"] { text-decoration: underline; text-decoration-color: rgba(238, 230, 216, 0.4); text-underline-offset: 4px; }
.pie__derechos { padding-top: 24px; border-top: 1px solid var(--pizarra); color: var(--niebla); font-size: var(--t-3); line-height: var(--l-3); }

@media (max-width: 767px) {
  .pie { margin-top: 80px; padding-top: 48px; }
  .pie__fila { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-bottom: 56px; }
  .pie__columnas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; }
  .pie__columna:last-child { grid-column: 1 / -1; }
}

/* ── Página de ciencia ────────────────────────────────────────
   Usa lo mismo que la portada (cabecera, secciones, línea de tiempo, estudios, gráfico y pie). Aquí solo está lo propio: la
   apertura, con el h1 de la página, y el cierre con sus dos acciones. */
.ciencia-cabeza { padding-top: calc(var(--cabecera) + env(safe-area-inset-top, 0px) + 88px); }
.ciencia-cabeza .seccion__texto { max-width: 640px; margin-top: 24px; }
.ciencia-fin__acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 40px; }
.ciencia-fin .seccion__nota { margin-top: 56px; }

@media (max-width: 767px) {
  .ciencia-cabeza { padding-top: calc(var(--cabecera) + env(safe-area-inset-top, 0px) + 48px); }
  .ciencia-fin .seccion__nota { margin-top: 40px; }
}

/* ── Movimiento de la portada y de la página de ciencia ───────
   El lenguaje común (curvas, tiempos, revelar al llegar y enfocar palabra por palabra) está en linea.css y movimiento.js; la
   llegada del héroe, en primer-minuto.css. Aquí van las piezas propias de estas páginas. Solo se animan transform, opacity, filter y,
   en la línea de un gráfico, el guion del trazo. Todo apagado con "reducir movimiento" y, si el navegador no sabe hacerlo,
   la página queda quieta y completa. */

/* Un botón con data-revelar no retiene el último cuadro de su entrada: así su escala al tocarlo (:active) sigue respondiendo. */
.mov-revelar [data-revelar].boton.revelado,
.mov-revelar [data-revelar].pildora.revelado { animation-fill-mode: backwards; }

/* En una lista larga cada fila se posa al llegar a la pantalla: el escalón cuenta por columna y no por lugar en la lista, así ninguna
   fila espera a las anteriores. */
.rituales__lista > li { --col: 0; }
@media (min-width: 640px) {
  .rituales__lista > li:nth-child(2n) { --col: 1; }
}
@media (min-width: 1180px) {
  .rituales__lista > li:nth-child(3n + 1) { --col: 0; }
  .rituales__lista > li:nth-child(3n + 2) { --col: 1; }
  .rituales__lista > li:nth-child(3n) { --col: 2; }
}
@media (prefers-reduced-motion: no-preference) {
  .mov-revelar .rituales__lista > [data-revelar].revelado { animation-delay: calc(var(--col, 0) * var(--mov-escalon)); }

  /* Los datos: cada uno sube con su escalón (data-revelar en el <li>, con su --i) y su frase se enfoca un instante después. */
  .mov-revelar .dato.revelado .dato__titulo { animation: mov-enfoca var(--mov-revela) var(--curva-revela) calc(var(--i, 0) * var(--mov-escalon) + 140ms) backwards; }
}

/* El héroe se aleja al bajar: mientras sale de la pantalla, el texto sube un poco y se apaga, y la placa se encoge y se oscurece,
   como si la escena quedara atrás. Es CSS ligado al desplazamiento (animation-timeline): en los navegadores que no lo tienen, el héroe
   queda quieto. La línea de tiempo se nombra en el héroe y la usan sus dos capas. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .heroe-pm { view-timeline: --heroe block; }
    .heroe-pm .pm-texto-caja { animation: heroe-texto-sale linear both; animation-timeline: --heroe; animation-range: exit; }
    .heroe-pm .pm-escena { animation: heroe-escena-sale linear both; animation-timeline: --heroe; animation-range: exit; }
  }
}
@keyframes heroe-texto-sale { to { opacity: 0.3; transform: translateY(-56px); } }
@keyframes heroe-escena-sale { to { opacity: 0.5; transform: scale(0.94); } }

@media (prefers-reduced-motion: no-preference) {
  /* La flecha de "Mira cómo funciona", la acción principal del héroe, se mece al ritmo de una respiración lenta hasta que la persona
     baja por primera vez (portada-heroe.js pone heroe-pm--bajado). Solo se anima la flecha: el botón se queda quieto. */
  .heroe-pm:not(.heroe-pm--bajado) [data-pm-bajar] .icono { animation: heroe-flecha 2.8s ease-in-out 2s infinite; }
}
@keyframes heroe-flecha { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* ── Puerta de entrada ("Toca para comenzar", puerta.js) ─────────────────────────────
   Tapa la página al abrirla para pedir el toque que la deja sonar. Solo existe con JavaScript: puerta.js pone html.con-puerta antes de
   pintar. Mientras está, la página no se desplaza; al tocarla se apaga en 400 ms (html.puerta-saliendo) y ya se puede bajar. Va por encima
   de la cabecera y de todo lo demás (60 es el enlace "Saltar al contenido", que queda inert detrás). Luz: un charco de oro al centro. */
.puerta { display: none; }
.con-puerta .puerta {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  width: 100%;
  padding: 24px var(--margen);
  border: 0;
  background: var(--oro-charco) 50% 50% / 100% min(100%, 640px) no-repeat, rgba(0, 0, 0, 0.9);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  color: var(--blanco);
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition: opacity 0.4s var(--curva);
}
html.con-puerta:not(.puerta-saliendo) { overflow: hidden; }
.puerta-saliendo .puerta { opacity: 0; pointer-events: none; }
.puerta:focus-visible { outline: none; }
/* La puerta abre con el foco puesto: se marca con el aro del símbolo en blanco (el oro no marca estados), no con un subrayado de enlace. */
.puerta:focus-visible .puerta__simbolo { border-color: var(--blanco); }
.puerta__contenido { display: grid; justify-items: center; gap: 16px; max-width: 520px; }
/* El símbolo dentro de un aro que respira despacio (solo crece y vuelve: la luz no parpadea), como invitación a tocar. */
.puerta__simbolo {
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  margin-bottom: 16px;
  border: 1px solid rgba(var(--oro-canto-rgb), 0.35);
  border-radius: 50%;
  box-shadow: 0 0 48px rgba(var(--oro-rgb), 0.16);
  animation: puerta-respira 4.8s ease-in-out infinite;
}
.puerta__simbolo .icono { width: 56px; height: 56px; }
.puerta__titulo { font-size: var(--t-h2); line-height: var(--l-h2); font-weight: 500; }
.puerta__detalle { color: var(--niebla); font-size: var(--t-2); line-height: var(--l-2); }
@keyframes puerta-respira { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) {
  .puerta__simbolo { animation: none; }
  .con-puerta .puerta { transition: none; }
}