/* ══════════════════════════════════════════════════════════════════════
   Lyquia · lo común a todas las páginas

   Los tokens, las tipografías (con sus caras de reserva de métricas
   ajustadas), la escala, la maqueta, los botones, la barra, los pies, las
   cartas de las guías, las preguntas, la prosa de las páginas interiores,
   los revelados al scroll y las transiciones entre páginas. La portada
   pone lo suyo encima en portada.css.

   La paleta es la del producto y no se toca; lo nuevo son derivados con
   su contraste anotado junto al token. Todo el movimiento vive detrás de
   prefers-reduced-motion: no-preference, y con reduce queda lo que no se
   desplaza (color, opacidad, foco).
   ══════════════════════════════════════════════════════════════════════ */

/* ── Tokens ──────────────────────────────────────────────────────────── */

:root {
  /* Paleta viva de lyquia.com — NO tocar */
  --bg: #080f1f;
  --navy: #0c1e3a;
  --card: #0e1c33;
  --cyan: #28cabe;
  --cyan-l: #8bf1e6;
  --txt: #e8eef7;
  --mut: #8fa3bd;
  --linea: rgba(255, 255, 255, 0.08);

  /* Derivados (contraste medido sobre lo pintado, ver auditar.js)
     --txt/--bg 16,4:1 · --mut/--bg 7,4:1 · --mut/--card 6,6:1 ·
     --mut/--card-alta 6,1:1 · --cyan/--bg 9,4:1 · tinta sobre cian 9,4:1.
     No inventar más grises: si algo pide menos presencia que --mut,
     se baja el tamaño o se sube el aire, no el contraste. */
  --card-alta: #13233f;
  --linea-fuerte: rgba(255, 255, 255, 0.14);
  --linea-cyan: rgba(40, 202, 190, 0.35);
  --tinta-boton: #080f1f;
  --rojo-cursor: #f27e6b; /* el coral del producto: lo que reclama atención */
  --glow: 0 0 60px rgba(40, 202, 190, 0.14);
  --alza: inset 0 1px 0 rgba(255, 255, 255, 0.05);

  /* Tipografías (autoalojadas en assets/tipos/) */
  --letra-cuerpo: 'Montserrat', 'Montserrat de reserva', -apple-system, 'Segoe UI', sans-serif;
  --letra-titular: 'Libre Baskerville', 'Libre Baskerville de reserva', Georgia, 'Times New Roman', serif;
  --letra-cifra: 'Geist Mono', ui-monospace, 'Cascadia Mono', monospace;

  /* Movimiento — tokens de la marca (lyquia-app/globals.css) más los
     dos propios de esta web. --ease-revelar es la curva de la
     referencia (oakandgrid.com), calcada de su .reveal. */
  --ease-asentar: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-suave: cubic-bezier(0.33, 0.1, 0.25, 1);
  --ease-revelar: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-toque: 120ms;
  --dur-cerca: 220ms;
  --dur-panel: 340ms;
  --dur-vista: 420ms;
  --dur-focal: 650ms;
  --dur-trazo: 1400ms;

  /* Maqueta */
  --wrap: 1200px;
  --radio-s: 8px;
  --radio: 14px;
  --radio-l: 20px;

  color-scheme: dark;
}

/* ── Reset corto y base ─────────────────────────────────────────────── */

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

html {
  scroll-behavior: smooth;
  /* La barra fija no debe tapar el destino de las anclas. */
  scroll-padding-top: 92px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--letra-cuerpo);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.7;
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* Superficie raíz: la mesa. Los componentes solo usan estas cinco. */
  --texto: var(--txt);
  --texto-suave: var(--mut);
  --acento: var(--cyan);
  --acento-vivo: var(--cyan-l);
  --filete: var(--linea);
  color: var(--texto);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

ul,
ol {
  list-style: none;
}

/* Superficies del navegador, tematizadas: la casa llega hasta el caret. */
::selection {
  background: var(--cyan);
  color: var(--tinta-boton);
}

html {
  caret-color: var(--cyan);
  scrollbar-color: #22375c var(--bg);
}

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

/* ── El cursor: punto exacto y anillo que llega tarde ──────────────────
   El punto va clavado donde está el ratón; el anillo lo persigue con
   inercia y se cierra sobre él al pasar sobre algo pulsable. Existe
   solo si lo enciende lyquia.js (html.con-cursor), que a su vez solo lo
   hace con ratón fino y sin movimiento reducido: nadie pierde su cursor
   del sistema por culpa de una decoración. Sobre campos de texto vuelve
   el cursor de siempre, porque ahí la forma del puntero es información
   (dónde se va a escribir), no adorno. */

html.con-cursor,
html.con-cursor a,
html.con-cursor button,
html.con-cursor summary,
html.con-cursor [data-plegable],
html.con-cursor .plan[data-sitio]:not([data-sitio='centro']) {
  cursor: none;
}

html.con-cursor input,
html.con-cursor textarea,
html.con-cursor [contenteditable] {
  cursor: auto;
}

.cursor-punto,
.cursor-anillo {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
  /* La POSICIÓN la escribe lyquia.js en `translate`, no en `transform`:
     así `transform` queda libre para la vibración, y las dos cosas se
     componen en vez de pisarse (translate se aplica antes). */
  will-change: translate;
  transition: opacity var(--dur-cerca) var(--ease-suave);
}

html.cursor-dentro .cursor-punto,
html.cursor-dentro .cursor-anillo {
  opacity: 1;
}

/* Sobre un campo de texto manda el cursor del sistema: el nuestro se
   aparta en vez de estorbar. */
html.cursor-escribiendo .cursor-punto,
html.cursor-escribiendo .cursor-anillo {
  opacity: 0;
}

.cursor-punto {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  background: var(--cyan-l);
}

.cursor-anillo {
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid var(--cyan);
  transition:
    opacity var(--dur-cerca) var(--ease-suave),
    width var(--dur-cerca) var(--ease-asentar),
    height var(--dur-cerca) var(--ease-asentar),
    margin var(--dur-cerca) var(--ease-asentar),
    background-color var(--dur-cerca) var(--ease-suave),
    border-color var(--dur-cerca) var(--ease-suave);
}

/* Sobre lo pulsable el anillo se cierra sobre el punto, los dos se
   tiñen de rojo y el anillo vibra: el puntero avisa de que ahí hay algo
   que responde antes incluso de leer el elemento. El rojo es el mismo
   coral que el producto usa para lo que reclama atención, no un color
   nuevo. */
html.cursor-sobre-accion .cursor-punto {
  background: var(--rojo-cursor);
}

html.cursor-sobre-accion .cursor-anillo {
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  background: rgba(242, 126, 107, 0.16);
  border-color: var(--rojo-cursor);
  animation: vibrar 150ms steps(4, end) infinite;
}

/* Un pelo de temblor, no un terremoto: ±1px basta para que se note en
   un anillo de 16. */
@keyframes vibrar {
  0% { transform: translate(0.6px, -0.6px); }
  25% { transform: translate(-0.6px, 0.6px); }
  50% { transform: translate(-0.6px, -0.6px); }
  75% { transform: translate(0.6px, 0.6px); }
  100% { transform: translate(0.6px, -0.6px); }
}

/* ── Atmósfera ──────────────────────────────────────────────────────────
   Grano feTurbulence en velo fijo sin eventos: convierte el navy digital
   en un material y mata el banding de los degradados. Data-URI: cero
   peticiones. Receta de la casa. */

body::after {
  content: '';
  position: fixed;
  inset: 0;
  /* Por encima de todo, portada (120) y barra (100) incluidas: el
     grano es el material de la casa, no un adorno del fondo. */
  z-index: 130;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* El velo del héroe: un amanecer cian muy tenue tras la composición. */
.heroe {
  background:
    radial-gradient(60% 50% at 50% -10%, rgba(40, 202, 190, 0.08), transparent 70%),
    radial-gradient(90% 60% at 50% -20%, rgba(22, 41, 77, 0.9), transparent 65%);
}

/* ── Tipografías ────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Montserrat';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url('../tipos/montserrat-300.woff2') format('woff2');
}

@font-face {
  font-family: 'Montserrat';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('../tipos/montserrat-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Montserrat';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('../tipos/montserrat-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Libre Baskerville';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('../tipos/baskerville-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Libre Baskerville';
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url('../tipos/baskerville-400i.woff2') format('woff2');
}

@font-face {
  font-family: 'Geist Mono';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('../tipos/geistmono-400.woff2') format('woff2');
}

/* ── Tipografías de reserva ───────────────────────────────────────────
   Mientras llegan las de la casa, el navegador pinta con Georgia y con
   Arial y vuelve a pintar al llegar las buenas. Si no miden lo mismo, la
   página salta: 0,109 de CLS medido en una primera visita de escritorio,
   que antes no contaba porque el héroe estaba a opacidad 0 y ahora está
   pintado bajo la cubierta desde el primer pintado. Estas dos caras
   apuntan a la fuente local y la estiran (size-adjust y los tres
   override) hasta que ocupa exactamente lo mismo que la de la casa, así
   que el cambio de letra no mueve nada. Los números los calcula
   _fuente/tipos-de-reserva.mjs desde los .woff2 que sirve la web; no
   se retocan a mano. */
@font-face {
  font-family: 'Libre Baskerville de reserva';
  src: local('Georgia');
  size-adjust: 115.31%;
  ascent-override: 84.12%;
  descent-override: 23.41%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Montserrat de reserva';
  src: local('Arial');
  size-adjust: 108.83%;
  ascent-override: 88.95%;
  descent-override: 23.06%;
  line-gap-override: 0%;
}

/* ── Escala tipográfica ─────────────────────────────────────────────── */

h1,
h2 {
  font-family: var(--letra-titular);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-wrap: balance;
  color: var(--texto);
}

h1 {
  font-size: clamp(2.5rem, 1.2rem + 4.8vw, 4.5rem);
  line-height: 1.08;
}

h1 em,
.acento-serif {
  font-style: italic;
  color: var(--acento-vivo);
}

h2 {
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem);
}

h3 {
  font-family: var(--letra-cuerpo);
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--texto);
  text-wrap: balance;
}

p {
  color: var(--texto-suave);
}

p strong,
li strong {
  font-weight: 500;
  color: var(--texto);
}

/* El único antetítulo del sitio vive en el héroe de portada. */
.kicker {
  display: block;
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--acento);
}

/* Cifras y numeración editorial: siempre en mono, siempre tabulares. */
.cifra,
.numero {
  font-family: var(--letra-cifra);
  font-variant-numeric: tabular-nums;
}

.numero {
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  color: var(--texto-suave);
}

.micro {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--texto-suave);
}

/* ── Maqueta ────────────────────────────────────────────────────────── */

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

/* Único dueño del ritmo vertical. El silencio es parte del diseño. */
.seccion {
  padding-block: clamp(4.75rem, 3.2rem + 5.2vw, 8.75rem);
}

.seccion + .seccion {
  border-top: 1px solid var(--filete);
}

/* Cabecera de sección: editorial, a la izquierda, titular que carga solo. */
.cabecera-seccion {
  max-width: 46rem;
  margin-bottom: clamp(2.75rem, 2rem + 3vw, 4.5rem);
}

.cabecera-seccion .entradilla {
  margin-top: 1.25rem;
  max-width: 38rem;
}

/* Salto accesible: invisible hasta que el teclado lo pide. */
.saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--card-alta);
  color: var(--texto);
  border-radius: var(--radio-s);
  text-decoration: none;
}

.saltar:focus-visible {
  left: 1rem;
  top: 1rem;
}

/* ── Botones ────────────────────────────────────────────────────────── */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1.65rem;
  border-radius: var(--radio-s);
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition:
    background-color var(--dur-cerca) var(--ease-suave),
    border-color var(--dur-cerca) var(--ease-suave),
    color var(--dur-cerca) var(--ease-suave);
}

.boton-primario {
  background: var(--acento);
  color: var(--tinta-boton);
}

.boton-primario:hover {
  background: var(--acento-vivo);
}

.boton-fantasma {
  border: 1px solid var(--linea-fuerte);
  color: var(--texto);
}

.boton-fantasma:hover {
  border-color: var(--linea-cyan);
  color: var(--acento-vivo);
}

/* Enlaces de texto: se tiñen, sin moverse. */
.enlace {
  color: var(--acento-vivo);
  text-decoration: underline;
  text-decoration-color: var(--linea-cyan);
  text-underline-offset: 0.2em;
  transition:
    color var(--dur-cerca) var(--ease-suave),
    text-decoration-color var(--dur-cerca) var(--ease-suave);
}

.enlace:hover {
  text-decoration-color: currentColor;
}

/* ── La barra ───────────────────────────────────────────────────────────
   Fija y transparente al nacer; a unos píxeles de scroll (sentinel de
   IntersectionObserver, cero listeners) se asienta: fondo, velo y
   hairline. */

/* El sentinel del que depende .con-fondo: 1px en lo alto del documento. */
#sentinel-barra {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
}

/* La barra es una píldora que flota con el fondo desenfocado, como las
   de Apple: no corta la página de lado a lado. Arriba del todo deja ver
   casi todo lo de detrás; al dejar atrás el borde superior se asienta
   (lyquia.js pone .con-fondo). Con su margen ocupa 62 px, dentro de los
   68 que la portada reserva encima del vídeo del héroe. */
.barra {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding-top: 10px;
  pointer-events: none;
}

.barra-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(980px, calc(100% - 1.5rem));
  max-width: none;
  height: 52px;
  padding-inline: 1.1rem 0.4rem;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 999px;
  background: rgba(8, 15, 31, 0.45);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  pointer-events: auto;
  transition:
    background-color var(--dur-panel) var(--ease-suave),
    border-color var(--dur-panel) var(--ease-suave);
}

.barra.con-fondo .barra-in {
  background: rgba(8, 15, 31, 0.78);
  border-color: var(--filete);
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
}

.marca img {
  width: 28px;
  height: 28px;
}

/* El logotipo es el del producto, trazado del brandbook: la misma
   geometria que pinta la aplicacion (`lib/brand/palabra.ts`). Va en
   linea y con `currentColor` para heredar el color del texto que lo
   rodea, que es lo que la web pedia y un fichero externo no da.

   El alto que se le pone es el de la CAJA, no el de la mayuscula: la L
   ocupa 607,2 de los 757,3 que mide la caja, y por debajo solo bajan la
   y y la q. La proporcion con la baldosa es la del producto —mayuscula
   de 0,43 de su lado—, asi que a baldosa de 28 px le toca mayuscula de
   12, o sea 15 px de caja. */
.marca .logotipo {
  height: 15px;
  width: auto;
  color: var(--texto);
}

.barra nav {
  display: flex;
  align-items: center;
  gap: 1.9rem;
}

.barra nav a:not(.boton) {
  font-weight: 400;
  font-size: 0.9rem;
  text-decoration: none;
  color: var(--texto-suave);
  transition: color var(--dur-cerca) var(--ease-suave);
}

.barra nav a:not(.boton):hover,
.barra nav a:not(.boton):focus-visible {
  color: var(--acento-vivo);
}

.barra .boton {
  padding: 0.55rem 1.15rem;
  border-radius: 999px;
  font-size: 0.875rem;
}

/* El menú en móvil: la barra entera despliega su lista. */
.menu-boton {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: var(--radio-s);
  place-items: center;
}

.menu-boton svg {
  width: 22px;
  height: 22px;
  stroke: var(--texto);
  stroke-width: 1.6;
  fill: none;
}

.menu-boton .cerrar {
  display: none;
}

@media (max-width: 880px) {
  .menu-boton {
    display: grid;
  }

  /* El menú cuelga de la píldora (su desenfoque la hace contenedora),
     como un panel redondeado de su mismo ancho. */
  .barra nav {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem 1.25rem 1.25rem;
    border: 1px solid var(--filete);
    border-radius: 1.4rem;
    background: rgba(8, 15, 31, 0.96);
  }

  .barra[data-abierto='si'] nav {
    display: flex;
  }

  .barra[data-abierto='si'] .barra-in {
    background: rgba(8, 15, 31, 0.96);
    border-color: var(--filete);
  }

  .barra[data-abierto='si'] .menu-boton .abrir {
    display: none;
  }

  .barra[data-abierto='si'] .menu-boton .cerrar {
    display: block;
  }

  .barra nav a:not(.boton) {
    padding: 0.9rem 0;
    font-size: 1rem;
    border-bottom: 1px solid var(--filete);
  }

  .barra nav .boton {
    margin-top: 1.1rem;
    justify-content: center;
  }
}

/* ── Integraciones: dos sendas hermanas, no gemelas ─────────────────── */

.sendas {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
}

@media (min-width: 880px) {
  .sendas {
    grid-template-columns: 1fr 1fr;
  }
}

.senda {
  border: 1px solid var(--filete);
  border-radius: var(--radio);
  background: var(--card);
  box-shadow: var(--alza);
  padding: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
  display: flex;
  flex-direction: column;
}

.senda-erp {
  border-color: var(--linea-cyan);
}

.senda h3 {
  font-size: 1.25rem;
}

.senda p {
  margin-top: 0.9rem;
  font-size: 0.9375rem;
}

/* ── Las guías: cartas hermanas de las sendas, en rejilla de tres ─────
   Reutilizan .senda (borde, fondo, aire y el alzarse al pasar) y la
   cadencia de reveals de la casa; lo único propio es la rejilla y que la
   carta entera sea el enlace. Sección normal: la página ya tiene sus dos
   escenas fijadas y no cabe una tercera. */

.guias {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
}

@media (min-width: 720px) {
  .guias {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1080px) {
  .guias {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.guias .senda {
  text-decoration: none;
  color: inherit;
}

.guias .senda h3 {
  margin-top: 0.7rem;
  transition: color var(--dur-cerca) var(--ease-suave);
}

.guias .senda:hover h3,
.guias .senda:focus-visible h3 {
  color: var(--acento-vivo);
}

.guias .senda .pie {
  color: var(--acento);
}

/* ── El enlace de descarga ─────────────────────────────────────────── */

.descarga {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0 1rem;
  margin-top: 1.5rem;
  padding: 0.85rem 1.15rem;
  border: 1px solid var(--linea-cyan);
  border-radius: var(--radio);
  background: var(--card-alta);
  box-shadow: var(--alza);
  text-decoration: none;
  transition:
    border-color var(--dur-cerca) var(--ease-suave),
    background-color var(--dur-cerca) var(--ease-suave);
}

.descarga:hover {
  border-color: var(--cyan);
}

.descarga .bajar {
  grid-row: span 2;
  width: 21px;
  height: 21px;
  stroke: var(--acento-vivo);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.descarga .que {
  font-weight: 400;
  font-size: 0.9375rem;
  color: var(--texto);
}

.descarga .meta {
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--texto-suave);
}

.senda .pie {
  margin-top: auto;
  padding-top: 1.4rem;
  font-size: 0.8125rem;
  border-top: 1px solid var(--filete);
}

.senda .pie:not(:first-child) {
  margin-top: 1.6rem;
}

/* ── Preguntas ──────────────────────────────────────────────────────── */

/* Alineadas a la izquierda como el resto del cuerpo: los dos únicos
   momentos centrados de la portada son el héroe y el cierre. */
.preguntas {
  max-width: 720px;
  border-top: 1px solid var(--filete);
}

.preguntas details {
  border-bottom: 1px solid var(--filete);
}

.preguntas summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.4rem 0.25rem;
  font-weight: 400;
  font-size: 1.0625rem;
  color: var(--texto);
  transition: color var(--dur-cerca) var(--ease-suave);
}

.preguntas summary::-webkit-details-marker {
  display: none;
}

.preguntas summary:hover {
  color: var(--acento-vivo);
}

.preguntas summary .mas {
  flex: none;
  font-family: var(--letra-cifra);
  font-size: 1.15rem;
  color: var(--acento);
  transition: transform var(--dur-cerca) var(--ease-asentar);
  transform-origin: center;
  align-self: center;
}

.preguntas details[open] summary .mas {
  transform: rotate(45deg);
}

.preguntas details p {
  padding: 0 2.5rem 1.5rem 0.25rem;
  font-size: 0.9375rem;
}

/* ── El pie ─────────────────────────────────────────────────────────── */

.pie-pagina {
  border-top: 1px solid var(--filete);
  padding-block: clamp(3rem, 2.5rem + 2vw, 4.5rem) 2rem;
}

.pie-columnas {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

@media (min-width: 760px) {
  .pie-columnas {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 2rem;
  }
}

.pie-pagina .marca img {
  width: 32px;
  height: 32px;
}

.pie-pagina .marca .logotipo {
  height: 17px;
}

.pie-pagina .descriptor {
  margin-top: 1rem;
  max-width: 24rem;
  font-size: 0.9375rem;
}

.pie-pagina .pie-titulo {
  font-family: var(--letra-cifra);
  font-weight: 400;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-bottom: 1.1rem;
}

.pie-pagina nav ul {
  display: grid;
  gap: 0.55rem;
}

.pie-pagina nav a {
  font-size: 0.9375rem;
  font-weight: 400;
  text-decoration: none;
  color: var(--texto-suave);
  transition: color var(--dur-cerca) var(--ease-suave);
}

.pie-pagina nav a:hover,
.pie-pagina nav a:focus-visible {
  color: var(--acento-vivo);
}

.pie-final {
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--filete);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 0.8125rem;
}

.pie-final p,
.pie-final a {
  color: var(--texto-suave);
}

/* ── Páginas interiores (guías y legales) ───────────────────────────── */

.pagina-interior main {
  padding-top: clamp(8rem, 7rem + 4vw, 10.5rem);
  padding-bottom: clamp(4.75rem, 4rem + 3vw, 7.5rem);
}

.miga {
  font-family: var(--letra-cifra);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.pagina-interior h1 {
  font-size: clamp(2rem, 1.2rem + 2.8vw, 3.25rem);
  max-width: 22ch;
  margin-top: 1.1rem;
}

.pagina-interior .meta {
  font-family: var(--letra-cifra);
  font-size: 0.8125rem;
  color: var(--texto-suave);
  margin-top: 1.25rem;
}

/* El lienzo interior: prosa + índice pegajoso en pantallas anchas. */
.interior-lienzo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3rem;
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
}

@media (min-width: 1280px) {
  .interior-lienzo {
    grid-template-columns: minmax(0, 68ch) 250px;
    gap: 5rem;
  }

  .indice {
    position: sticky;
    top: 108px;
    align-self: start;
  }
}

.indice h2 {
  font-family: var(--letra-cifra);
  font-weight: 400;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-bottom: 1rem;
}

.indice ul {
  display: grid;
  gap: 0.5rem;
  border-left: 1px solid var(--filete);
}

.indice a {
  display: block;
  padding-left: 1rem;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  text-decoration: none;
  color: var(--texto-suave);
  border-left: 1px solid transparent;
  margin-left: -1px;
  transition:
    color var(--dur-cerca) var(--ease-suave),
    border-color var(--dur-cerca) var(--ease-suave);
}

.indice a:hover,
.indice a:focus-visible {
  color: var(--acento-vivo);
  border-left-color: var(--acento);
}

/* La prosa: medida de lectura, aire y jerarquía serif. */
.prosa {
  max-width: 68ch;
}

.prosa > * + * {
  margin-top: 1.1rem;
}

.prosa p,
.prosa li {
  font-size: 1rem;
  line-height: 1.75;
}

.prosa h2 {
  font-size: clamp(1.4rem, 1.2rem + 1vw, 1.75rem);
  padding-top: 2.25rem;
}

.prosa h3 {
  font-size: 1.0625rem;
  padding-top: 1.1rem;
}

.prosa ul,
.prosa ol {
  display: grid;
  gap: 0.55rem;
  padding-left: 1.4rem;
}

.prosa ul {
  list-style: disc;
}

.prosa ol {
  list-style: decimal;
}

.prosa ::marker {
  color: var(--acento);
  font-family: var(--letra-cifra);
  font-size: 0.9em;
}

.prosa a {
  color: var(--acento-vivo);
  text-decoration: underline;
  text-decoration-color: var(--linea-cyan);
  text-underline-offset: 0.2em;
  transition: text-decoration-color var(--dur-cerca) var(--ease-suave);
}

.prosa a:hover {
  text-decoration-color: currentColor;
}

/* Los botones dentro de la prosa no son enlaces de prosa: recuperan su
   tinta y pierden el subrayado (la regla .prosa a los pisaba y dejaba
   cian sobre cian, 1,5:1 — lo cazó auditar.js). */
.prosa a.boton {
  text-decoration: none;
}

.prosa a.boton-primario,
.prosa a.boton-primario:hover {
  color: var(--tinta-boton);
}

/* Tablas: hairlines y cifras tabulares, sin cajas pesadas. */
.prosa table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.prosa th,
.prosa td {
  text-align: left;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--filete);
  color: var(--texto-suave);
  vertical-align: top;
}

.prosa th {
  font-family: var(--letra-cifra);
  font-weight: 400;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto);
  border-bottom-color: var(--linea-fuerte);
}

.prosa td strong {
  color: var(--texto);
}

/* La caja destacada: un dato apoyado, no una banda. */
.prosa .caja {
  border: 1px solid var(--filete);
  border-left: 2px solid var(--acento);
  border-radius: var(--radio-s);
  background: var(--card);
  padding: 1.25rem 1.5rem;
}

/* La firma de la guía: quién la escribe, en la caja destacada. Va con
   clase propia porque .caja también viste el titular de las legales, y
   porque el aire entre párrafos de la prosa solo alcanza a los hijos
   directos de .prosa. */
.prosa .autor {
  margin-top: 2.75rem;
}

.prosa .autor > * + * {
  margin-top: 0.55rem;
}

.prosa .autor .miga {
  margin-bottom: 0.35rem;
}

.prosa .autor p {
  font-size: 0.9375rem;
}

/* La banda de CTA de las guías y la de descarga. */
.prosa .cta-caja,
.prosa .descarga {
  border: 1px solid var(--linea-cyan);
  border-radius: var(--radio);
  background: var(--card-alta);
  box-shadow: var(--alza);
  padding: 1.75rem 2rem;
  margin-block: 2.25rem;
}

.prosa .cta-caja p,
.prosa .descarga p {
  margin: 0 0 1.25rem;
}

.prosa .descarga {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  flex-wrap: wrap;
}

.prosa .descarga p {
  margin: 0;
  flex: 1;
  min-width: 220px;
}

.enlaces-relacionados {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--filete);
  font-size: 0.9375rem;
}

/* Pie compacto de las interiores. */
.pie-simple {
  border-top: 1px solid var(--filete);
  padding-block: 2rem;
}

.pie-simple .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.8125rem;
}

.pie-simple p {
  color: var(--texto-suave);
}

.pie-simple nav {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.pie-simple a {
  color: var(--texto-suave);
  text-decoration: none;
  transition: color var(--dur-cerca) var(--ease-suave);
}

.pie-simple a:hover,
.pie-simple a:focus-visible {
  color: var(--acento-vivo);
}

/* ── 1 · Transiciones entre páginas (continuidad, CSS puro) ─────────── */

@view-transition {
  navigation: auto;
}

/* Asimetría deliberada: la que sale solo se apaga, rápida; la que entra
   sube por encima, más lenta. El agua no da portazos. */
::view-transition-old(root) {
  animation: vt-salir 240ms var(--ease-suave) both;
}

::view-transition-new(root) {
  animation: vt-entrar var(--dur-vista) var(--ease-asentar) both;
}

@keyframes vt-salir {
  to {
    opacity: 0;
  }
}

@keyframes vt-entrar {
  from {
    opacity: 0;
    transform: translateY(0.55rem);
  }
}

/* ── 3 · El scroll trae contenido (reveals, una sola vez) ───────────── */

@media (prefers-reduced-motion: no-preference) {
  html.con-js .revela {
    opacity: 0;
    transform: translateY(14px);
    transition:
      opacity var(--dur-focal) var(--ease-revelar),
      transform var(--dur-focal) var(--ease-revelar);
  }

  html.con-js .revela.es-visible {
    opacity: 1;
    transform: none;
  }

  /* Cadencia en rejillas: los hijos llegan en oleada corta (tope 5). */
  html.con-js .cadencia > * {
    opacity: 0;
    transform: translateY(14px);
    transition:
      opacity var(--dur-focal) var(--ease-revelar),
      transform var(--dur-focal) var(--ease-revelar);
  }

  html.con-js .cadencia.es-visible > * {
    opacity: 1;
    transform: none;
  }

  html.con-js .cadencia.es-visible > :nth-child(2) { transition-delay: 60ms; }
  html.con-js .cadencia.es-visible > :nth-child(3) { transition-delay: 120ms; }
  html.con-js .cadencia.es-visible > :nth-child(4) { transition-delay: 180ms; }
  html.con-js .cadencia.es-visible > :nth-child(5) { transition-delay: 240ms; }
  html.con-js .cadencia.es-visible > :nth-child(n + 6) { transition-delay: 300ms; }

}

/* ── 4 · Hovers: solo donde hay ratón de verdad ─────────────────────── */

@media (hover: hover) and (pointer: fine) {
  @media (prefers-reduced-motion: no-preference) {
    .senda,
    .plan {
      transition:
        background-color var(--dur-cerca) var(--ease-asentar),
        border-color var(--dur-cerca) var(--ease-asentar),
        transform var(--dur-cerca) var(--ease-asentar),
        box-shadow var(--dur-cerca) var(--ease-asentar);
    }

    .senda:hover,
    .plan:hover {
      transform: translateY(-2px);
    }
  }
}

/* La pulsación baja más rápido de lo que subió. */
@media (prefers-reduced-motion: no-preference) {
  .boton {
    transition:
      background-color var(--dur-cerca) var(--ease-suave),
      border-color var(--dur-cerca) var(--ease-suave),
      color var(--dur-cerca) var(--ease-suave),
      transform var(--dur-toque) var(--ease-suave);
  }

  .boton:active {
    transform: scale(0.97);
  }
}

/* ── 5 · Las preguntas se despliegan como agua (mejora progresiva) ──── */

@supports (interpolate-size: allow-keywords) {
  @media (prefers-reduced-motion: no-preference) {
    .preguntas details::details-content {
      block-size: 0;
      overflow-y: clip;
      opacity: 0;
      transition:
        block-size var(--dur-panel) var(--ease-asentar),
        opacity var(--dur-panel) var(--ease-suave),
        content-visibility var(--dur-panel) allow-discrete;
    }

    .preguntas details[open]::details-content {
      block-size: auto;
      opacity: 1;
      interpolate-size: allow-keywords;
    }
  }
}

/* ── Movimiento reducido: menos y más suave, no cero ─────────────────
   Mueren los desplazamientos, el trazado y las transiciones de página;
   sobreviven el color y la opacidad de hovers y foco. Todas las
   animaciones espaciales de esta hoja ya viven detrás de la guarda
   no-preference; aquí se apaga lo que quedaba. */

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }

  html {
    scroll-behavior: auto;
  }
}

/* ── Impresión ──────────────────────────────────────────────────────── */

@media print {
  .barra,
  .curva-caja,
  .heroe,
  body::after {
    display: none;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  body,
  .prosa p,
  .prosa li,
  p {
    --texto: #000;
    --texto-suave: #333;
    color: #000;
  }

  .pagina-interior main {
    padding-top: 2rem;
  }
}