/* Campo Vivo · propuesta "línea": base compartida por la portada y la app.
   Lenguaje: negro puro, línea en blanco arena (cálido, como la placa) y dos voces: Bricolage Grotesque en peso 400 para todo, y
   Cormorant Garamond en cursiva solo para la voz de la tradición (ver .voz). El morado de Campo Vivo (#9b7cf4) marca solo lo que
   está vivo: lo que suena, lo que está activo y el foco del teclado. */

/* El respaldo de la voz de la tradición: Georgia cursiva llevada a las medidas de Cormorant Garamond (cursiva 500 y 600, medidas en Chromium
   a 1000 px: altura de la x 0,406, ascendente 0,924 y descendente 0,287; Georgia cursiva: x 0,5). Si la letra tarda o Google Fonts no
   responde, el texto se ve del mismo tamaño y no salta al cambiar: size-adjust = 0,406 / 0,5 y los override, divididos por ese factor. */
@font-face {
  font-family: 'Cormorant respaldo';
  src: local('Georgia Italic'), local('Georgia-Italic');
  font-style: italic;
  font-weight: 100 900;
  size-adjust: 81.2%;
  ascent-override: 113.8%;
  descent-override: 35.3%;
  line-gap-override: 0%;
}

:root {
  color-scheme: dark;

  --negro: #000;
  --grafito: #1a1814;
  --grafito-claro: #221f1a;   /* el cursor sobre una fila o una tarjeta de grafito */
  --pizarra: #27241f;
  --pizarra-claro: #34302a;
  /* Gris de textos secundarios: llega a 4,5:1 o más sobre todos los fondos del sistema (6:1 sobre la pizarra,
     5:1 sobre su estado de cursor, más sobre el grafito y el negro), también en texto fino. Todos los neutros son
     cálidos, como la arena: --blanco es la arena y --hueso, su estado de cursor sobre el botón principal. */
  --gris: #a8a196;
  --niebla: #c9c1b3;
  --hueso: #e2d8c6;
  --blanco: #eee6d8;
  --morado: #9b7cf4;
  --morado-tenue: rgba(155, 124, 244, 0.32);
  --linea-tenue: rgba(238, 230, 216, 0.14);
  /* La tarjeta de grafito se apaga hacia abajo y lleva, arriba, el charco de luz cálida (papel AMBIENTE, ver más abajo). */
  --degradado-tarjeta: radial-gradient(130% 62% at 50% 0%, rgba(var(--oro-rgb), 0.11) 0%, rgba(var(--oro-rgb), 0.04) 46%, rgba(var(--oro-rgb), 0) 74%), linear-gradient(180deg, var(--grafito) 0%, rgba(0, 0, 0, 0) 100%);

  /* ── LUZ DORADA: un sistema de luz, no un color ─────────────────────────────────────────────────────────────────────────
     Pedido del dueño (2026-10-12): "luz y tonalidades doradas reflectivas, realistas y modernas, de manera sutil", en todas las pantallas.
     La imagen es una lámpara cálida sobre vidrio negro: el oro es LUZ y MATERIAL (un charco que se pierde en la sombra, el canto que
     brilla, un reflejo que pasa), nunca pintura. Tres reglas que no se tocan:
       · El oro nunca marca un estado. Lo que suena, lo activo y el foco del teclado son morado (o el blanco lleno de lo elegido); el
         oro está siempre, igual, en lo que es de la superficie. Por eso ningún selector de estado ([aria-pressed], [aria-current],
         [data-vivo], :focus-visible, --vivo) usa estos tokens.
       · Nunca es un relleno ni una mancha grande: es un degradado que se desvanece o una línea de 1 px. Bajo un texto no pasa de 0,16
         de opacidad, así el texto sigue en 4,5:1 o más (lo comprueba tests/propuesta-linea-estilo.test.cjs).
       · Nada parpadea ni late: la luz es quieta. Solo cambia una vez, con una transición corta, al pasar el cursor o al presionar.
     Cuatro papeles (cada pieza tiene su token: úsalo tal cual y no inventes otro oro; los colores salen de --oro-rgb, --oro-canto-rgb y --oro-metal-rgb):
       1. AMBIENTE  (--oro-ambiente, --oro-charco): luz cálida muy tenue que rompe el negro plano sin teñirlo. Tiene dos formas. La que cae
          del borde de arriba (--oro-ambiente) va dentro de una superficie (la hoja, el mini reproductor; en las tarjetas ya viene en
          --degradado-tarjeta) y en lo alto de una pantalla, bajo la cabecera:  background: var(--oro-ambiente) 50% 0 / 100% 480px no-repeat;
          La que se apaga por todos lados (--oro-charco) es para lo que flota sobre el negro, como una sección: no deja ningún borde duro
          arriba:  background: var(--oro-charco) 50% 0 / 100% min(100%, 440px) no-repeat;
       2. CONTORNO  (--oro-filo, --oro-filo-fuerte): la luz que cae sobre el canto de arriba de toda superficie (tarjetas, hojas, barras,
          botones, campos). Es una capa de sombra interior que se suma a las demás:
          box-shadow: var(--oro-filo), inset 0 0 0 1px rgba(238, 230, 216, 0.07);   (el filo fuerte, solo para lo más cercano a la luz:
          hojas, mini reproductor, barras). Para un canto que brilla arriba a la izquierda y se apaga hacia abajo y a un lado (--brillo-oro)
          está la clase .canto-luz y su lista de superficies grandes, más abajo ("Contorno diagonal").
       3. REFLEJO   (--oro-halo, --oro-reflejo, --oro-boton, --oro-boton-hover): un brillo suave sobre lo que se puede tocar. El halo es la
          luz que sube de una superficie iluminada; el reflejo, un destello diagonal que se asoma por encima. --oro-boton es la luz fija del
          botón principal (que sigue siendo de arena: un filo claro arriba y un resplandor cálido debajo) y --oro-boton-hover, la que sube
          con el cursor. El halo y el reflejo, y lo que sube, solo con el cursor encima (@media (hover: hover)) o al presionar (:active):
          nunca por foco ni por estado.
       4. VIÑETA    (--oro-vineta): en las pantallas inmersivas (reproductor, respiración, ensamblaje, bienvenida y primer minuto): la luz
          se concentra alrededor de la figura y se apaga hacia los bordes. La figura y lo que suena conservan su color: la viñeta es un
          velo muy tenue puesto encima de ella, que no cambia ningún color.
     Los colores base (con ellos se arma todo lo demás; las cifras de las piezas armadas son las que ya se probaron a ojo): */
  --oro-rgb: 232, 200, 130;                    /* la luz: el centro de un charco (para rgba(var(--oro-rgb), alfa)) */
  --oro-canto-rgb: 240, 220, 170;              /* el canto iluminado y el reflejo: más claro que la luz */
  --oro-metal-rgb: 201, 168, 97;               /* el mismo --oro en rgb, el metal de un canto, para cuando la alfa se calcula */
  --oro-destello-rgb: 255, 250, 236;           /* el blanco caliente del destello que cruza un metal (las palabras de oro de la portada) */
  --oro: #c9a861;                              /* el oro cálido de un borde iluminado */
  --oro-claro: #f0dcaa;                        /* el destello de un reflejo */
  --oro-hondo: #6f5a30;                        /* el oro en sombra, para el canto de un objeto */
  --luz-oro: rgba(214, 178, 106, 0.08);        /* un charco de luz cálida sobre el negro */
  --luz-oro-fuerte: rgba(232, 200, 130, 0.18); /* el centro de esa luz, o un reflejo cercano */
  --brillo-oro: linear-gradient(135deg, rgba(240, 220, 170, 0.55) 0%, rgba(201, 168, 97, 0.18) 38%, rgba(201, 168, 97, 0) 70%);
  /* Las piezas armadas de cada papel. */
  --oro-ambiente: radial-gradient(ellipse 62% 100% at 50% 0%, rgba(var(--oro-rgb), 0.16) 0%, rgba(var(--oro-rgb), 0.075) 40%, rgba(var(--oro-rgb), 0.025) 70%, rgba(var(--oro-rgb), 0) 100%);
  --oro-charco: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(var(--oro-rgb), 0.15) 0%, rgba(var(--oro-rgb), 0.07) 38%, rgba(var(--oro-rgb), 0.022) 70%, rgba(var(--oro-rgb), 0) 100%);
  --oro-filo: inset 0 1px 0 rgba(var(--oro-canto-rgb), 0.3);
  --oro-filo-fuerte: inset 0 1px 0 rgba(var(--oro-canto-rgb), 0.46);
  --oro-halo: 0 0 0 1px rgba(var(--oro-canto-rgb), 0.18), 0 8px 30px -8px rgba(var(--oro-rgb), 0.32);
  --oro-reflejo: linear-gradient(115deg, rgba(var(--oro-canto-rgb), 0) 28%, rgba(var(--oro-canto-rgb), 0.14) 48%, rgba(var(--oro-canto-rgb), 0) 68%);
  --oro-boton: inset 0 1px 0 rgba(255, 250, 236, 0.75), 0 10px 26px -12px rgba(var(--oro-rgb), 0.45);
  --oro-boton-hover: inset 0 1px 0 rgba(255, 250, 236, 0.9), 0 12px 32px -10px rgba(var(--oro-rgb), 0.62);
  --oro-vineta: radial-gradient(ellipse var(--vrx, 78%) var(--vry, 62%) at var(--vx, 50%) var(--vy, 40%), rgba(var(--oro-rgb), 0.15) 0%, rgba(var(--oro-rgb), 0.07) 42%, rgba(var(--oro-rgb), 0.02) 72%, rgba(var(--oro-rgb), 0) 100%);   /* --vx y --vy (el centro) y --vrx y --vry (el tamaño) los pone quien la usa */

  --fuente: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* La voz de la tradición (ver .voz): Cormorant Garamond en cursiva y, detrás, Georgia ajustada a sus medidas (@font-face de abajo). */
  --fuente-voz: 'Cormorant Garamond', 'Cormorant respaldo', Georgia, serif;

  /* Escala tipográfica: tamaño / interlineado */
  --t-h1: 60px; --l-h1: 72px;
  --t-h2: 44px; --l-h2: 56px;
  --t-h3: 36px; --l-h3: 42px;
  --t-h4: 28px; --l-h4: 36px;
  --t-1: 22px; --l-1: 28px;
  --t-2: 18px; --l-2: 24px;
  --t-3: 16px; --l-3: 24px;
  --t-4: 14px; --l-4: 20px;
  --t-5: 12px; --l-5: 16px;
  --t-6: 12px; --l-6: 16px;   /* los números de una regla o de un gráfico (en celular queda un escalón debajo de --t-5) */
  --tracking-titulo: 0.35px;
  --tracking-display: -0.01em;   /* los títulos en seminegrita: las letras un poco más juntas, como se acostumbra en tamaños grandes */
  /* Jerarquía (ver Tipografía): subtítulos y títulos de tarjeta tienen su propio tamaño, bien por debajo del de los títulos. */
  --t-subtitulo: 28px; --l-subtitulo: 34px;
  --t-tarjeta: 24px; --l-tarjeta: 30px;
  /* La voz de la tradición se ve un 21 % más chica que Bricolage al mismo tamaño (altura de la x 0,406 contra 0,516): por 1,27 se igualan. */
  --escala-voz: 1.27;
  /* Los papeles de la voz de la tradición (Cormorant). Más grandes que su par en Bricolage porque su "x" es más baja (ver .voz). */
  --t-lema: 64px; --l-lema: 68px;       /* el lema de la marca */
  --t-ritual: 22px; --l-ritual: 26px;   /* el nombre de un ritual: en 22 px "ARCA (Consejo Silencioso)" cabe en la fila de tres columnas */

  /* Rejilla */
  --ancho: 1280px;
  --margen: 64px;
  --hueco: 24px;
  --cabecera: 72px;

  /* Formas */
  --radio-boton: 12px;
  --radio-tarjeta: 16px;
  --radio-pildora: 100px;
  --borde: 1.6px;

  --curva: cubic-bezier(0.22, 1, 0.36, 1);
  --rapido: 0.2s;

  /* Movimiento (ver movimiento.js): del ruido al orden. Rápido cuando responde, más lento cuando acompaña; salir, más rápido que
     entrar. --curva arranca rápido y se posa (entradas, salidas, respuestas); --curva-cajon es la de las hojas que suben y bajan;
     --curva-cambia, la de algo que va de un lugar a otro de la pantalla. */
  --curva-cajon: cubic-bezier(0.32, 0.72, 0, 1);
  --curva-cambia: cubic-bezier(0.77, 0, 0.175, 1);
  --curva-revela: cubic-bezier(0.25, 0.5, 0.25, 1);   /* lo que se revela al bajar: arranca con suavidad y se posa despacio (CURVA.revela) */
  --mov-toque: 160ms;     /* la respuesta a un toque */
  --mov-corto: 200ms;     /* cerrar, cambiar de estado */
  --mov-medio: 320ms;     /* abrir una hoja o una pantalla */
  --mov-largo: 700ms;     /* un movimiento largo que no es una revelación (los cambios de escena de la película) */
  --mov-revela: 1000ms;   /* lo que se revela al bajar por la página: se posa despacio (movimiento.js: DURACION.revela) */
  --mov-escalon: 120ms;   /* entre los elementos de un mismo grupo que se revelan (DURACION.escalon) */
  --enfoque: 10px;        /* el desenfoque con que llega lo que se enfoca */
}

/* Celular: la letra de lectura es más grande que en escritorio (se lee a un brazo de distancia, con una mano, a veces al aire libre):
   el texto va de 20 a 14 px y los títulos de 40 a 24. Los rótulos de 14 px (--t-5) son lo que no se lee de corrido (nombres de los
   íconos de la barra, datos, duraciones); todo lo que se lee de corrido es de 16 px o más. Lo único de 13 px (--t-6) son los números
   de una regla o de un gráfico y los mandos de la historia en las pantallas más angostas, donde un px más los enciman. */
@media (max-width: 767px) {
  :root {
    --t-h1: 40px; --l-h1: 48px;
    --t-h2: 34px; --l-h2: 42px;
    --t-h3: 30px; --l-h3: 36px;
    --t-h4: 24px; --l-h4: 30px;
    --t-1: 20px; --l-1: 30px;
    --t-2: 18px; --l-2: 27px;
    --t-3: 17px; --l-3: 25px;
    --t-4: 16px; --l-4: 23px;
    --t-5: 14px; --l-5: 20px;
    --t-6: 13px; --l-6: 18px;
    --t-lema: 44px; --l-lema: 48px;
    --t-ritual: 24px; --l-ritual: 28px;   /* un escalón más que en escritorio: aquí el texto de al lado también sube a 16 px */
    --t-subtitulo: 24px; --l-subtitulo: 30px;
    --t-tarjeta: 22px; --l-tarjeta: 28px;
    --margen: 16px;
    --hueco: 16px;
    --cabecera: 64px;
  }
}
/* Las pantallas más angostas (320 px): en 24 px "Baños de Sonido" ya no cabía en su fila y se partía; en 22, como en escritorio, sí. */
@media (max-width: 359px) {
  :root { --t-ritual: 22px; --l-ritual: 26px; }
}

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; color: var(--blanco); }   /* sin esto, el modo oscuro le daría blanco puro a la raíz */

body {
  margin: 0;
  background: var(--negro);
  color: var(--blanco);
  font-family: var(--fuente);
  font-size: var(--t-3);
  line-height: var(--l-3);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, canvas, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
::selection { background: var(--morado); color: var(--negro); }

:focus-visible { outline: 2px solid var(--morado); outline-offset: 3px; }

/* El atributo hidden siempre gana: sin esto, .boton o .pildora (display propio) lo anulan. */
[hidden] { display: none !important; }

.solo-lector {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ── Tipografía ───────────────────────────────────────────── */
/* Jerarquía de títulos, en todas las pantallas (decisión del dueño, 2026-10-13): cada nivel se distingue por tamaño Y por peso, no
   solo por tamaño. Antes todo iba en peso 400 y un título y su subtítulo se llevaban un 13 % en celular: a simple vista eran iguales.
     · Títulos de página, de pantalla y de sección (.titulo-1, .titulo-2): seminegrita 600, con las letras un poco más juntas.
     · Subtítulos, las partes de una sección o de una pantalla (.titulo-3): 28 px (24 en celular), peso medio 500.
     · Títulos de tarjeta y de ventana (.titulo-4): 24 px (22 en celular), peso medio 500.
     · El texto, en 400. Los nombres de los rituales y el lema hablan con la voz de la tradición (.voz, más abajo).
   Bricolage es variable: 500 y 600 vienen en el mismo archivo que ya se descarga (wght 300..700). */
.titulo-1, .titulo-2, .titulo-3, .titulo-4 { text-wrap: balance; }
.titulo-1, .titulo-2 { font-weight: 600; letter-spacing: var(--tracking-display); }
.titulo-3, .titulo-4 { font-weight: 500; letter-spacing: 0; }
.titulo-1 { font-size: var(--t-h1); line-height: var(--l-h1); }
.titulo-2 { font-size: var(--t-h2); line-height: var(--l-h2); }
.titulo-3 { font-size: var(--t-subtitulo); line-height: var(--l-subtitulo); }
.titulo-4 { font-size: var(--t-tarjeta); line-height: var(--l-tarjeta); }
.texto-1 { font-size: var(--t-1); line-height: var(--l-1); color: var(--niebla); }
.texto-2 { font-size: var(--t-2); line-height: var(--l-2); color: var(--niebla); }
.texto-3 { font-size: var(--t-3); line-height: var(--l-3); color: var(--niebla); }
.texto-4 { font-size: var(--t-4); line-height: var(--l-4); color: var(--niebla); }
.texto-5 { font-size: var(--t-5); line-height: var(--l-5); color: var(--gris); }
.texto-1, .texto-2, .texto-3 { text-wrap: pretty; }

/* La voz de la tradición. Campo Vivo habla con dos letras: Bricolage Grotesque explica, guía y mide (títulos, textos, botones, datos y
   navegación); Cormorant Garamond en cursiva nombra lo que viene de la tradición: los nombres de los rituales y el lema. Va en cursiva
   porque así se escriben los títulos de una obra, y un ritual lo es. Reglas:
     · Solo en esos papeles, en todas las pantallas: en la portada, el lema y la lista de rituales; en la app, las tarjetas, la ventana
       del ritual, el reproductor, la barra chica, los ciclos, el registro, el ritual que arma la guía y el nombre que cierra el armado.
       Un modo (Foco, Calma…) no es un ritual y sigue en Bricolage. Nunca en botones, navegación, etiquetas ni texto corrido.
     · La historia de iniciación es la voz misma (quien cuenta): sus subtítulos son la única excepción al texto corrido.
     · Nunca por debajo de 22 px: sus trazos finos se pierden sobre negro. Por lo mismo va en seminegrita, peso 600 (lo eligió el
       dueño el 2026-10-13, comparando 500, 600 y 700): la letra clara sobre fondo oscuro se ve más delgada de lo que es.
     · Su "x" mide 0,406 de su tamaño y la de Bricolage 0,516: a igual tamaño se vería un 21 % más chica. Por eso cada papel la lleva
       más grande que su par en Bricolage (--t-ritual y --t-lema).
   Se carga sola, cursiva 600, en las páginas que la usan. */
.voz {
  font-family: var(--fuente-voz);
  font-style: italic;
  font-weight: 600;
  font-synthesis: none;
}
.titulo-lema { font-size: var(--t-lema); line-height: var(--l-lema); letter-spacing: -0.005em; text-wrap: balance; }
/* Un título de nivel 3 o 4 que nombra un ritual: el mismo tamaño a la vista que sus vecinos en Bricolage. Cada pieza que nombra un ritual
   repite el peso 600 en su regla .pieza.voz: la regla de la pieza (500) pesa lo mismo que .voz y, si se carga después, ganaría. */
.titulo-3.voz { font-size: calc(var(--t-subtitulo) * var(--escala-voz)); line-height: 1.15; font-weight: 600; }
.titulo-4.voz { font-size: calc(var(--t-tarjeta) * var(--escala-voz)); line-height: 1.15; font-weight: 600; }
/* Los párrafos largos que abren cada sección (portada y ciencia) van en 18 px en celular, no en 20: el navegador solo equilibra (text-wrap: balance)
   los párrafos de seis líneas o menos, y a 20 px el de la investigación llega a siete y termina con una línea corta y suelta. */
@media (max-width: 767px) {
  .seccion__texto.texto-1 { font-size: var(--t-2); line-height: var(--l-2); }
}

/* ── Rejilla ──────────────────────────────────────────────── */
.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--margen);
}

/* ── Íconos ───────────────────────────────────────────────── */
.icono { display: inline-flex; flex: none; width: 24px; height: 24px; }
.icono svg { width: 100%; height: 100%; }
.icono--16 { width: 16px; height: 16px; }
.icono--20 { width: 20px; height: 20px; }
.icono--32 { width: 32px; height: 32px; }
.icono--40 { width: 40px; height: 40px; }
.icono--56 { width: 56px; height: 56px; }
/* El símbolo de la marca va en un lienzo de 100 (los demás, en 24 o 48): en 16 y 20 px el trazo engruesa para que la figura se lea. */
.icono--16 .simbolo, .icono--20 .simbolo { stroke-width: 7; }
.icono--16 .simbolo rect, .icono--20 .simbolo rect { stroke-width: 4.4; }

/* ── Botones ──────────────────────────────────────────────── */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border: var(--borde) solid transparent;
  border-radius: var(--radio-boton);
  background: var(--pizarra);
  box-shadow: var(--oro-filo);   /* contorno: la luz que cae sobre el canto de arriba */
  color: var(--blanco);
  font-size: var(--t-3);
  line-height: 1;
  white-space: nowrap;
  transition: background-color var(--rapido), border-color var(--rapido), box-shadow var(--rapido), transform var(--mov-toque) var(--curva);
}
.boton:hover { background: var(--pizarra-claro); }
/* Reflejo: solo con un cursor que pasa por encima (en el tacto el hover se quedaría pegado). Los estados vivos (--vivo, más abajo) lo
   pisan a propósito: lo que suena sigue siendo un aro morado aunque el cursor esté encima. */
@media (hover: hover) {
  .boton:hover { box-shadow: var(--oro-filo), var(--oro-halo); }
}
/* Al presionar, todo lo que se toca se hunde apenas: la interfaz confirma que escuchó (botones, píldoras y botones redondos). */
.boton:active { transform: scale(0.97); }
.boton--grande { min-height: 56px; padding: 0 28px; font-size: var(--t-1); border-color: var(--blanco); }
.boton--contorno { border-color: var(--blanco); }
.boton--ancho { width: 100%; }
/* La acción principal de cada pantalla: arena llena, con la luz cálida que sube de ella (un filo claro arriba y un halo debajo; es luz,
   no un relleno dorado). El morado no adorna: solo dice que algo suena. */
.boton--principal { background: var(--blanco); border-color: var(--blanco); color: var(--negro); box-shadow: var(--oro-boton); }
.boton--principal:hover { background: var(--hueso); border-color: var(--hueso); }
@media (hover: hover) {
  .boton--principal:hover { box-shadow: var(--oro-boton-hover); }
}
/* Mientras suena lo que ese botón hizo sonar (una muestra, una mezcla): aro morado, como .redondo--vivo. */
.boton--vivo,
.boton--vivo:hover { box-shadow: 0 0 0 1.5px var(--morado), 0 0 18px rgba(155, 124, 244, 0.45); }

.pildora {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 24px;
  border: var(--borde) solid var(--pizarra);
  border-radius: var(--radio-pildora);
  background: var(--pizarra);
  box-shadow: var(--oro-filo);
  color: var(--blanco);
  font-size: var(--t-1);
  line-height: 1;
  white-space: nowrap;
  transition: background-color var(--rapido), border-color var(--rapido), box-shadow var(--rapido), transform var(--mov-toque) var(--curva);
}
.pildora:hover { background: var(--pizarra-claro); border-color: var(--pizarra-claro); }
@media (hover: hover) {
  .pildora:hover { box-shadow: var(--oro-filo), var(--oro-halo); }
}
.pildora:active { transform: scale(0.97); }
.pildora--contorno { background: transparent; border-color: rgba(238, 230, 216, 0.55); }
.pildora--contorno:hover { background: rgba(238, 230, 216, 0.06); border-color: var(--blanco); }
.pildora--chica { min-height: 44px; padding: 0 18px; font-size: var(--t-2); }
.pildora .detalle { color: var(--gris); font-size: 0.8em; }

.redondo {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--pizarra);
  box-shadow: var(--oro-filo);
  color: var(--blanco);
  transition: background-color var(--rapido), box-shadow var(--rapido), transform var(--mov-toque) var(--curva);
}
.redondo:hover { background: var(--pizarra-claro); }
@media (hover: hover) {
  .redondo:hover { box-shadow: var(--oro-filo), var(--oro-halo); }
}
.redondo:active { transform: scale(0.94); }
.redondo--grande { width: 56px; height: 56px; }
.redondo--vivo,
.redondo--vivo:hover { box-shadow: 0 0 0 1.5px var(--morado), 0 0 18px rgba(155, 124, 244, 0.45); }

.enlace-flecha {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-2);
  line-height: var(--l-2);
  color: var(--blanco);
}
/* El dedo alcanza el enlace en una zona de 44 px de alto (nueve píxeles más arriba y abajo): la caja del texto no cambia, así nada se mueve. */
.enlace-flecha::after { content: ''; position: absolute; inset: -9px -4px; }
.enlace-flecha .icono { width: 14px; height: 14px; transition: transform var(--rapido) var(--curva); }
.enlace-flecha:hover .icono { transform: translate(2px, -2px); }

.insignia {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: var(--radio-pildora);
  background: var(--blanco);
  color: var(--negro);
  font-size: var(--t-5);
  line-height: 1;
}

/* ── Tarjetas ─────────────────────────────────────────────── */
.tarjeta {
  position: relative;
  border-radius: var(--radio-tarjeta);
  background: var(--degradado-tarjeta);
  box-shadow: var(--oro-filo);
  overflow: hidden;
}

/* Contorno diagonal: el canto de 1 px de una superficie grande, que brilla arriba a la izquierda y se apaga hacia abajo y a un lado
   (--brillo-oro). Es un borde de verdad, dibujado con una máscara: no ocupa lugar y no tapa nada. Se activa con la clase canto-luz
   (la superficie necesita su border-radius) y ya viene puesto en las superficies grandes de la propuesta: la lámina destacada de
   Explorar, el aviso de seguridad y las hojas de cierre y de "Ver por dentro". */
.canto-luz,
.dialogo--aviso,
.dialogo--hoja,
.dialogo--dentro { position: relative; }
.canto-luz::before,
.destacado::before,
.dialogo--aviso::before,
.dialogo--hoja::before,
.dialogo--dentro::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: var(--brillo-oro);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* ── Cabecera fija con degradado ──────────────────────────── */
.cabecera {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 10;
  height: calc(var(--cabecera) + env(safe-area-inset-top, 0px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: env(safe-area-inset-top, 0px) 16px 0;
  background: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.65) 50%, rgba(0, 0, 0, 0) 100%);
}
/* El logo: el símbolo (la figura que dibuja 777 Hz en la placa) y el nombre en la letra de la marca, limpio, sin adornos. */
.marca { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; }   /* 44 px de alto: el área para el dedo */
.marca .icono { width: 36px; height: 36px; }
.marca-nombre { font-size: 22px; font-weight: 450; line-height: 1; letter-spacing: -0.01em; white-space: nowrap; }
/* Lo vivo en el logo: mientras algo suena (html[data-vivo="true"]: app.js lo marca en la app y pagina.js en la portada y la ciencia)
   las líneas de la figura se encienden en morado. Solo color, con una transición suave; el marco de la placa sigue en arena. */
.cabecera .marca .surcos,
.menu__barra .marca .surcos { transition: stroke 0.4s var(--curva); }
html[data-vivo="true"] .cabecera .marca .surcos,
html[data-vivo="true"] .menu__barra .marca .surcos { stroke: var(--morado); }
/* En celular el logo se compacta (símbolo de 32 px y nombre de 18 px) para que quepa junto a los botones de la cabecera desde 360 px;
   el menú de celular lo repite igual, para que no cambie de tamaño al abrirlo. */
@media (max-width: 899px) {
  .cabecera .marca,
  .menu__barra .marca { gap: 10px; }
  .cabecera .marca .icono,
  .menu__barra .marca .icono { width: 32px; height: 32px; }
  .cabecera .marca-nombre,
  .menu__barra .marca-nombre { font-size: 18px; }
}

/* ── Capa modal (aviso, temporizador, afinar) ─────────────── */
.velo {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  /* Ambiente: un charco de luz cálida en lo alto de cada hoja, sobre el velo oscuro. */
  background: radial-gradient(ellipse 90% 42% at 50% 0%, rgba(var(--oro-rgb), 0.13) 0%, rgba(var(--oro-rgb), 0.045) 55%, rgba(var(--oro-rgb), 0) 100%), rgba(0, 0, 0, 0.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  animation: aparecer 0.24s var(--curva) both;
}
.velo[hidden] { display: none; }
.dialogo {
  width: min(100%, 400px);
  max-height: calc(100dvh - 48px);
  overflow: auto;
  text-align: center;
  animation: subir 0.32s var(--curva) both;
}
.dialogo h2 { margin-bottom: 8px; }
.dialogo .texto-2 { margin-bottom: 24px; }
.dialogo .acciones { display: grid; gap: 12px; margin-top: 24px; }

/* ── Aviso de seguridad ───────────────────────────────────────
   Desde el 2026-10-13 ya no se pide antes de la primera sesión (decisión del dueño: el toque en "Toca para comenzar" autoriza el
   sonido). Se abre desde el pie o desde Explorar, al centro y con los cinco puntos. Siempre cabe: título, frase y botón fijos; la
   lista (si no entra) se desplaza entre ellos. */
.dialogo--aviso {
  display: flex;
  flex-direction: column;
  width: min(100%, 480px);
  max-height: calc(100dvh - 48px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  overflow: hidden;
  padding: 24px;
  border-radius: 20px;
  background: var(--oro-ambiente) 50% 0 / 100% 240px no-repeat, var(--grafito);
  box-shadow: 0 0 0 1px var(--linea-tenue), 0 24px 64px rgba(0, 0, 0, 0.6);
  text-align: left;
}
.dialogo--aviso > * { flex: none; }
.aviso-intro { color: var(--niebla); font-size: var(--t-3); line-height: var(--l-3); text-wrap: pretty; }
.aviso-lista {
  flex: 1 1 auto;
  min-height: 72px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-top: 1px solid var(--linea-tenue);
}
.aviso-lista--mas {
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - 36px), transparent);
}
.aviso-lista li { display: grid; gap: 2px; padding: 12px 2px; border-bottom: 1px solid var(--linea-tenue); }
.aviso-lista b { font-weight: 400; color: var(--blanco); font-size: var(--t-3); line-height: 22px; }
.aviso-lista span { color: var(--niebla); font-size: var(--t-4); line-height: var(--l-4); }
/* La lista va directo debajo de la frase. */
.aviso-intro + .aviso-lista { margin-top: 16px; }
.dialogo--aviso .acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.dialogo--aviso .acciones .boton { min-height: 52px; padding: 0 22px; font-size: var(--t-2); }
.dialogo--aviso .acciones .boton--principal { flex: 1 1 auto; }

/* ── Aviso breve (toast) ──────────────────────────────────── */
.nota-flotante {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 24px;
  z-index: 50;
  width: max-content;
  max-width: min(92vw, 420px);
  margin-inline: auto;
  padding: 12px 18px;
  border-radius: var(--radio-boton);
  background: var(--grafito);
  color: var(--blanco);
  font-size: var(--t-4);
  line-height: var(--l-4);
  text-align: center;
  box-shadow: var(--oro-filo), 0 0 0 1px var(--linea-tenue);
  animation: subir 0.28s var(--curva) both;
}
.nota-flotante[hidden] { display: none; }

@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes subir { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ── Movimiento: del ruido al orden (movimiento.js) ─────────────────
   Revelar al llegar: mientras <html> tiene mov-revelar, lo que lleva data-revelar espera quieto e invisible y, cuando ya está bien dentro
   de la pantalla (su borde de arriba pasó el 65 % del alto: movimiento.js, revelar()), se posa una sola vez, despacio (1000 ms con
   --curva-revela). data-revelar="enfoque" (títulos) llega desenfocado; data-revelar (bloques y tarjetas) solo sube, porque desenfocar
   superficies grandes cuesta. --i escalona los de un mismo grupo (120 ms por elemento), con un tope de seis escalones (en una lista larga
   las filas de abajo no esperan de más). Es una animation, no una transition: así no pisa las transiciones propias de cada elemento (por
   eso no va en elementos con su propia animation). Relleno "backwards" y keyframes sin "to": durante el escalón espera en el punto de
   partida y, al terminar, no queda nada retenido (un transform retenido pisaría la escala de :active). */
.mov-revelar [data-revelar]:not(.revelado) { opacity: 0; }
.mov-revelar [data-revelar].revelado { animation: mov-sube var(--mov-revela) var(--curva-revela) calc(min(var(--i, 0), 6) * var(--mov-escalon)) backwards; }
.mov-revelar [data-revelar="enfoque"].revelado { animation-name: mov-enfoca; }
/* Un título que se enfoca palabra por palabra (palabras() y la clase mov-palabras): cada palabra llega desenfocada, con su escalón. */
.mov-palabras .mov-palabra { display: inline-block; animation: mov-enfoca 900ms var(--curva) calc(var(--retraso, 0ms) + var(--i, 0) * 60ms) backwards; }

/* Sin "to": cada elemento termina en su propio estilo (si tiene un transform suyo, la animación llega a él en vez de saltar al final). */
@keyframes mov-sube { from { opacity: 0; transform: translateY(18px); } }
@keyframes mov-enfoca { from { opacity: 0; transform: translateY(10px); filter: blur(var(--enfoque)); } }

/* Entre páginas (portada, app y ciencia): la página que se va se desenfoca y se apaga rápido, la que llega se enfoca, y la marca de la
   cabecera se queda en su lugar. Solo en los navegadores que lo tienen (Chrome, Edge y Safari); en los demás se navega como siempre.
   Las transiciones dentro de una página (transicion() en movimiento.js) usan las mismas raíces, y pueden afinarse por tipo con
   html[data-transicion="..."]. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
.cabecera .marca { view-transition-name: marca; }
::view-transition-old(root) { animation: mov-vt-sale var(--mov-corto) var(--curva) both; }
::view-transition-new(root) { animation: mov-vt-entra 420ms var(--curva) 60ms both; }
@keyframes mov-vt-sale { to { opacity: 0; filter: blur(6px); } }
@keyframes mov-vt-entra { from { opacity: 0; filter: blur(8px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 767px) {
  .pildora { min-height: 48px; padding: 0 18px; }
  .boton--grande { min-height: 52px; padding: 0 24px; }
}

/* ── Luz dorada: lo global de la portada ──────────────────────────────────────────────────────
   Lo que se define en portada.css y es de toda la página (las secciones, el pie y la cabecera con fondo) se enciende desde aquí, con
   selectores propios, para no tocar ese archivo y que todo salga de los mismos tokens. Papel: AMBIENTE (un charco tenue en cada sección y
   en el pie) y CONTORNO (la línea de abajo de la cabecera). El menú de celular (.menu) y el filo del pie (.pie::before) los enciende
   portada.css con estos mismos tokens: aquí no se repiten. */
.seccion { background: var(--oro-charco) 50% 0 / 100% min(100%, 440px) no-repeat; }
.pie { background: var(--oro-charco) 50% 0 / 100% min(100%, 360px) no-repeat; }
.cabecera.cabecera--fondo { box-shadow: inset 0 -1px 0 rgba(var(--oro-canto-rgb), 0.18); }

/* ── Lluvia de estrellas (cielo.js) ─────────────────────────────────────────────────────────────
   El cielo de los momentos de noche (el cierre de la portada y, en la app, lo que suena para dormir): un lienzo encima del de la placa,
   dentro de su misma caja, que nunca recibe toques. Llega y se va despacio; con "reducir movimiento" la regla de arriba lo deja sin
   transición. Sin z-index: queda sobre la placa y debajo de la viñeta (::after) de la escena. */
.cielo-lienzo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1600ms var(--curva-revela);
}
.cielo-lienzo--encendido { opacity: 1; }