/* ============================================================
   consultorio.css — EL SISTEMA VISUAL.

   Los tokens salen del `:root` de `diseno/Consultorio Dorvy.dc.html`, copiados
   tal cual el 2-sep-2026. NO del brief del 30-ago: sus valores están viejos
   (allí `--gold` era #B85C38; hoy es #C06B4A). Tampoco de `dorvy.css`, que es
   el sistema del CHAT y es otro producto.

   ⚠ LA REGLA QUE SE HA COLADO 8 VECES EN DORVY: el color de marca es para
   FONDOS. Para texto va la variante `-deep`. Sobre un fondo de color va
   `--ink-on-color`. Poner blanco encima solo funciona si el fondo es oscuro.

   Tres medidas, y el móvil manda: 390 · 1024 · 1160.
   ============================================================ */

:root {
  /* ── LA PALETA. No cambia con el tema: son los colores del diseño. ──
     Tres de estos valores se OSCURECIERON el 4-sep porque no se leían dentro
     de una hoja de papel, y eso pasaba ya con el tema oscuro:
       · `--gold-deep`  #A85638 → #9E5034  (daba 4,25:1 dentro del arco de la
                                          portada, donde el fondo va tintado)
       · `--muted`      #8A8071 → #736A5C  (daba 3,40:1 en «ayuda» y contadores)
       · `--sage-deep`  #5E7D61 → #4F6B50  (daba 3,88:1 en el botón «Me ayudó»)
       · `--jewel-deep` #8A6A2E → #7A5C26  (daba 4,39:1 en el sello de tarjeta)
     Y se añadió `--danger-deep`, porque `--danger` como TEXTO daba 3,95:1.
     La regla de siempre: el color de marca es para FONDOS; para texto, `-deep`. */
  --paper: #F5EFE6; --paper-2: #FAF6EC; --surface: #FFFCF6;
  --ink: #2C2620; --ink-soft: #574F42; --muted: #736A5C; --ink-on-color: #FFF9F2;
  --gold: #C06B4A; --gold-deep: #9E5034; --gold-tint: #EBD2C2; --gold-wash: #F9F1EB; --terra-dk: #E0895F;
  --sage: #7C9A7E; --sage-deep: #4F6B50; --sage-tint: #E7EEE6; --sage-line: #CFDDCB;
  --jewel: #B8924A; --jewel-deep: #7A5C26; --jewel-tint: #EAD9B0;
  --line: #E7DCCB; --line-soft: #EFE7D8;
  --ok: #4FA877; --ok-tint: #E2EFE6; --warn: #C98A2E;
  --danger: #C25446; --danger-deep: #A83F32; --danger-tint: #F3E1DD;
  /* Los marrones del tema oscuro, guardados con su nombre propio. */
  --carbon: #181410; --carbon-2: #211C16; --carbon-3: #2A241C; --carbon-line: #3A3328;
  --crema: #ECE4D6; --crema-mut: #9A8F7C;

  /* El arco: la forma que da identidad al consultorio. */
  --arco: 44% 44% 14px 14px / 18% 18% 4% 4%;
  --arc-line: rgba(184, 146, 74, .38);
  --arc-wash: rgba(184, 146, 74, .08);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");

  --fd: Fraunces, Georgia, serif;
  --fb: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;

  --sh3: 0 8px 22px rgba(12, 9, 6, .22);
  --sh4: 0 18px 44px rgba(12, 9, 6, .34);
  --shp4: 0 8px 22px rgba(42, 37, 29, .13);
  --shp5: 0 22px 50px rgba(42, 37, 29, .22);

  /* Ancho de lectura. Aunque la pantalla tenga 1160, el texto largo no pasa de
     aquí: más de ~68 caracteres por línea y el ojo pierde el renglón. */
  --lectura: 64ch;
}

/* ════════════════════════════════════════════════════════════════════
   EL TEMA — CLARO POR DEFECTO (David, 4-sep-2026)

   «Quiero que el tema por defecto del consultorio y del admin sea claro.»

   El lienzo del diseño era el marrón oscuro. Todo lo que dependía de él vive
   ahora en estos ocho nombres, que NO dicen «claro» ni «oscuro»: dicen para
   qué sirven. Cambiar de tema es cambiar este bloque, nada más — ninguna regla
   de más abajo sabe de qué color es el fondo.

   El tema oscuro sigue entero, guardado en `[data-tema='oscuro']`. Para
   encenderlo basta poner ese atributo en el `<html>`. Hoy no hay botón: si
   David lo quiere, es poner el interruptor, no rehacer nada.
   ════════════════════════════════════════════════════════════════════ */
:root {
  color-scheme: light;
  --fondo: var(--paper);          /* el lienzo */
  --fondo-2: var(--surface);      /* lo que se levanta del lienzo: pie, puente, voz */
  --fondo-3: var(--paper);        /* el lienzo del panel del equipo */
  --borde-f: var(--line);
  --texto: var(--ink);
  --texto-mut: var(--ink-soft);
  --enlace: var(--gold-deep);     /* `--terra-dk` solo se lee sobre oscuro: 2,32:1 sobre papel */
  --verde-texto: var(--sage-deep);
  --joya-texto: var(--jewel-deep);
  --barra: rgba(255, 252, 246, .9);
  --hueco: var(--paper-2);
  --hoja-bg: var(--surface);      /* sobre papel, la hoja se levanta un tono */
  --hoja-borde: var(--line);
  --hoja-sombra: var(--shp5);
  --icono-sombra: var(--shp4);
  --voz-relleno: var(--surface);
  --degradado-ficha: linear-gradient(180deg, var(--gold-wash), rgba(245, 239, 230, 0));
  --grano-op: .035;
  --audio-esquema: light;
}

[data-tema='oscuro'] {
  color-scheme: dark;
  --fondo: var(--carbon);
  --fondo-2: var(--carbon-3);
  --fondo-3: var(--carbon-2);
  --borde-f: var(--carbon-line);
  --texto: var(--crema);
  --texto-mut: var(--crema-mut);
  --enlace: var(--terra-dk);
  --verde-texto: var(--sage);
  --joya-texto: var(--jewel);
  --barra: rgba(24, 20, 16, .86);
  --hueco: rgba(24, 20, 16, .5);
  --hoja-bg: var(--paper);
  --hoja-borde: var(--paper);
  --hoja-sombra: var(--sh4);
  --icono-sombra: var(--sh3);
  --voz-relleno: linear-gradient(0deg, rgba(244, 231, 223, .15), rgba(244, 231, 223, .04));
  --degradado-ficha: linear-gradient(180deg, rgba(42, 36, 28, .9), rgba(24, 20, 16, 0));
  --grano-op: .06;
  --audio-esquema: dark;
}

/* Las fuentes se sirven desde aquí, no desde Google.
   En Dorvy quitarlas de Google Fonts fue lo que arregló la velocidad: una
   petición a otro dominio antes de poder pintar nada. */
/* ⚠ Hasta el 4-sep-2026 esta carpeta estaba VACÍA: las dos fuentes se
   declaraban y nunca cargaban, y todo el sitio salía en Georgia y la fuente
   del sistema. Era «el diseño se ve básico». Son las variables de Google
   (subconjunto latino, con tildes y eñes), servidas desde aquí. */
@font-face {
  font-family: 'Fraunces';
  src: url('/fuentes/fraunces.woff2') format('woff2');
  font-weight: 300 700; font-display: swap; font-style: normal;
}
@font-face {
  font-family: 'Fraunces';
  src: url('/fuentes/fraunces-italic.woff2') format('woff2');
  font-weight: 300 700; font-display: swap; font-style: italic;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('/fuentes/hanken.woff2') format('woff2');
  font-weight: 300 800; font-display: swap; font-style: normal;
}

* { box-sizing: border-box; }

/* ── El lienzo ───────────────────────────────────────────────────────────
   La ESTRUCTURA del diseño no cambia con el tema: hay un lienzo con grano, y
   lo que se lee de cerca va dentro de una hoja de papel que se levanta de él
   (`.hoja`, `.tarjeta-pregunta`, `.pregunta-tarjeta`). Lo único que cambia es
   de qué color son las dos cosas — y eso vive arriba, en el bloque del tema. */
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 400 16px/1.6 var(--fb);
  -webkit-font-smoothing: antialiased;
  position: relative;
}
/* El grano del diseño: una textura casi invisible que quita el «plano». */
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: var(--grain); opacity: var(--grano-op); mix-blend-mode: soft-light;
}
body > * { position: relative; z-index: 1; }

a { color: var(--enlace); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { font-family: var(--fd); font-weight: 500; letter-spacing: -.01em; line-height: 1.2; margin: 0; }
h1 { font-size: 30px; }
h2 { font-size: 22px; }
p { margin: 0 0 14px; max-width: var(--lectura); }

/* La «ceja»: la raya dorada con la etiqueta en mayúsculas que abre cada
   sección en el diseño (ÚLTIMAS VOCES, ALGUIEN PREGUNTÓ, LAS VOCES). */
.ceja {
  display: flex; align-items: center; gap: 10px; margin: 0 0 14px;
  font: 700 10px var(--fb); letter-spacing: .14em; text-transform: uppercase;
  color: var(--texto-mut);
}
.ceja::before { content: ''; width: 28px; height: 1px; background: var(--gold); flex: none; }
.hoja .ceja, .tarjeta-pregunta .ceja { color: var(--gold-deep); }

/* Una hoja de papel sobre el fondo oscuro: formularios, legal, la pregunta. */
.hoja, .tarjeta-pregunta {
  background: var(--hoja-bg); color: var(--ink);
  border: 1px solid var(--hoja-borde);
  border-radius: 20px; padding: 24px 22px; box-shadow: var(--hoja-sombra);
}
.hoja a, .tarjeta-pregunta a { color: var(--gold-deep); }
/* ⚠ La 9ª vez de la trampa del color de marca como texto (4-sep): la regla de
   arriba pintaba también los BOTONES de la hoja en `--gold-deep`, es decir,
   texto dorado sobre fondo dorado (2,5:1, ilegible). Se vio en la captura de
   /preguntar. El botón siempre lleva `--ink-on-color`. */
.hoja .boton, .tarjeta-pregunta .boton, .hoja .crisis .lineas a { color: var(--ink-on-color); }
.hoja .boton--calmo { color: var(--gold-deep); }
.hoja h1, .hoja h2, .tarjeta-pregunta h1 { color: var(--ink); }
main.hoja { max-width: 760px; margin: 22px auto 0; }

/* ── Estructura ──────────────────────────────────────────────────────── */
.envoltura { max-width: 1160px; margin: 0 auto; padding: 0 20px; }

.cabecera {
  background: var(--barra); backdrop-filter: blur(8px); color: var(--texto);
  border-bottom: 1px solid var(--borde-f);
  padding: 13px 0; position: sticky; top: 0; z-index: 10;
}
.cabecera .envoltura { display: flex; align-items: center; gap: 18px; }
/* El wordmark del diseño: «dorvy» en claro y «consultorio» en el color de marca. */
.marca { font: 500 20px var(--fd); color: var(--texto); display: flex; align-items: center; gap: 9px; letter-spacing: -.01em; }
.marca em { font-style: normal; color: var(--enlace); }
.marca .gota { width: 26px; height: 26px; border-radius: 7px; display: block; flex: none; }
.cabecera nav { margin-left: auto; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.cabecera nav a { color: var(--texto-mut); font-size: 13.5px; font-weight: 500; white-space: nowrap; }
/* En un móvil estrecho el wordmark se queda en «consultorio»: caben los tres enlaces. */
/* En el móvil el diseño no pone menú: las pantallas van limpias. Aquí se
   deja, porque es por donde se llega a «¿Eres psicólogo?», pero se recorta a
   lo imprescindible. «Por síntoma» es lo primero que sobra: los temas están
   en pastillas justo debajo del arco, en la misma portada a la que llevaría. */
@media (max-width: 560px) {
  .cabecera nav a[href='/#temas'] { display: none; }
}
@media (max-width: 430px) {
  .marca { font-size: 17px; }
  .marca .dorvy { display: none; }
  .cabecera nav { gap: 11px; }
  .cabecera nav a { font-size: 13px; }
}
.cabecera nav a:hover, .cabecera nav a[aria-current] { color: var(--texto); }
/* «¿Eres psicólogo?» va destacada en el diseño: es la puerta de quien
   responde, y sin ella no hay producto. */
.cabecera nav a.nav-psi { color: var(--enlace); }
/* 6-oct: la acción principal, como pastilla. Mismo fondo que `.boton`
   (`--gold-deep`: 5,50:1 con el texto claro), más baja para la cabecera. */
.cabecera nav a.nav-preguntar {
  background: var(--gold-deep); color: var(--ink-on-color); font-weight: 700;
  padding: 10px 18px; border-radius: 999px; text-decoration: none;
}
.cabecera nav a.nav-preguntar:hover { background: #8A4529; color: var(--ink-on-color); }
/* En tableta no caben los seis en una línea: sobra «Por síntoma» (los temas
   están en la portada, justo debajo del arco). */
@media (max-width: 939px) {
  .cabecera nav a[href='/#temas'] { display: none; }
}

main { padding: 28px 0 64px; min-height: 60vh; }

.pie {
  background: var(--fondo-2); color: var(--texto-mut);
  border-top: 1px solid var(--borde-f);
  padding: 30px 0; font-size: 13.5px; margin-top: 40px;
}
.pie a { color: var(--texto-mut); text-decoration: underline; }

/* ── El aviso que va en todas las páginas públicas ───────────────────── */
/* En el diseño es una caja con borde salvia sobre el fondo oscuro. */
/* En el diseño no es una caja con borde entero: es una barra verde a la
   izquierda sobre un fondo verdoso muy tenue. Corregido el 4-sep. */
.aviso-legal {
  font-size: 13.5px; color: var(--texto-mut); line-height: 1.55;
  border: 1px solid var(--borde-f); border-left: 2px solid var(--sage);
  border-radius: 14px; background: rgba(124, 154, 126, .07);
  padding: 16px 18px; margin-top: 34px; max-width: var(--lectura);
}
.aviso-legal b { color: var(--texto); }
.hoja .aviso-legal { border-color: var(--sage-line); color: var(--muted); }
.hoja .aviso-legal b { color: var(--ink); }

/* ── La portada: EL ARCO ──────────────────────────────────────────────
   ⚠ Hasta el 4-sep esto era una CAJA de 560 px centrada, con relleno plano y
   borde entero. En el diseño es un **marco**: una línea fina que abraza el
   saludo de lado a lado, **abierta por abajo** —sus dos patas siguen bajando
   por detrás de los botones— y con el relleno desvaneciéndose hacia abajo.
   Era lo que más hacía que el sitio «no se mirara igual» (David, 4-sep).
   La geometría está copiada tal cual del fichero del diseño. */
.portada {
  position: relative;
  text-align: center; padding: 44px 22px 34px; margin: 10px auto 30px; max-width: 900px;
  border: 1.5px solid var(--arc-line); border-bottom: none;
  border-radius: 46% 46% 0 0 / 30% 30% 0 0;
  background: linear-gradient(180deg, var(--arc-wash), transparent 80%);
}
/* El icono es `/icono.svg`, el MISMO que la pestaña del navegador y el mismo
   que dibujó Claude Design. Estaba hecho con cajas de CSS y de lejos parecía
   un candado (4-sep). Un fichero, un dibujo, tres sitios. */
.portada .icono {
  width: 68px; height: 68px; margin: 0 auto 16px; display: block;
  border-radius: 18px; box-shadow: var(--icono-sombra);
}
.portada .wordmark { font: 500 19px var(--fd); color: var(--texto); margin-bottom: 14px; }
.portada .wordmark em { font-style: normal; color: var(--enlace); }
.portada h1 { font-size: 36px; line-height: 1.08; letter-spacing: -.02em; color: var(--texto); margin: 0 auto 14px; max-width: 12ch; text-wrap: pretty; }
.portada p { color: var(--texto-mut); font-size: 15.5px; margin: 0 auto 22px; max-width: 38ch; }
.portada .botones { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.suave { color: var(--texto-mut); }

/* La barra de contexto de las páginas de contenido (diseño 05): flecha
   redonda para volver, y al lado dónde estás. */
.barra-contexto { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }
.volver {
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  border: 1px solid var(--borde-f); background: var(--fondo-2);
  display: grid; place-items: center;
  color: var(--texto); font-size: 17px; line-height: 1; text-decoration: none;
}
.volver:hover { border-color: var(--gold); text-decoration: none; }

/* ── Muro ────────────────────────────────────────────────────────────── */
.muro { display: grid; gap: 14px; }
/* Los temas, como pastillas sobre el fondo oscuro. */
.temas-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.temas-nav a {
  font: 500 13.5px var(--fb); padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--borde-f); color: var(--texto-mut); background: transparent;
}
.temas-nav a:hover, .temas-nav a[aria-current] { border-color: var(--gold); color: var(--texto); text-decoration: none; }
/* Cada pregunta va en un arco, como en el diseño: la cúpula arriba y el
   borde ABIERTO por ese lado. Eran rectángulos hasta el 4-sep. */
.pregunta-tarjeta {
  background: var(--surface); border: 1px solid var(--line); border-top: none;
  border-radius: var(--arco); padding: 34px 20px 18px; box-shadow: var(--shp4);
  display: block; color: inherit;
}
.pregunta-tarjeta:hover { text-decoration: none; border-color: var(--gold-tint); }
.pregunta-tarjeta .texto { font: 500 20px/1.3 var(--fd); color: var(--ink); margin: 0 0 14px; text-wrap: pretty; }
.pregunta-tarjeta .pie-t { display: flex; gap: 12px; align-items: center; font-size: 13px; color: var(--muted); flex-wrap: wrap; }

/* El botón de play del diseño: dice «esto SUENA» sin leer nada. No es un
   botón de verdad —la tarjeta entera ya es el enlace—, es una señal. */
.play {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  background: var(--gold-deep); display: grid; place-items: center; margin-bottom: 12px;
}
.play::after {
  content: ''; width: 0; height: 0; margin-left: 3px;
  border-left: 11px solid var(--ink-on-color);
  border-top: 7px solid transparent; border-bottom: 7px solid transparent;
}

.chip {
  display: inline-block; font-size: 12.5px; font-weight: 600;
  padding: 4px 11px; border-radius: 999px;
  background: var(--gold-wash); color: var(--gold-deep);
}
.chip--voces { background: var(--sage-tint); color: var(--sage-deep); }
.chip--sinvoz { background: var(--paper-2); color: var(--muted); }

/* ── Una pregunta y sus voces ────────────────────────────────────────── */
/* La pregunta va en una hoja de papel (diseño 05): es lo que se lee de cerca. */
.tarjeta-pregunta { margin-bottom: 30px; }
.pregunta-cuerpo {
  font: 400 22px/1.4 var(--fd); color: var(--ink); letter-spacing: -.01em;
  max-width: var(--lectura); margin: 4px 0 16px;
}
.tarjeta-pregunta .meta { font-size: 13.5px; color: var(--muted); margin: 0; }
.tarjeta-pregunta .meta b { color: var(--ink-soft); font-weight: 500; }

/* Las voces, sobre el fondo oscuro con el relleno translúcido del diseño. */
.voz {
  background: var(--voz-relleno); border: 1px solid var(--borde-f);
  border-radius: 18px; padding: 20px; margin-bottom: 16px; color: var(--texto);
}
.voz__quien { display: flex; gap: 13px; align-items: flex-start; margin-bottom: 14px; }
.voz__retrato {
  width: 52px; height: 52px; border-radius: 50%; object-fit: cover;
  background: var(--hueco); flex: none; border: 1px solid var(--borde-f);
}
.voz__nombre { font: 500 17px var(--fd); color: var(--texto); display: block; }
.voz__nombre:hover { color: var(--enlace); text-decoration: none; }
.voz__cargo { font-size: 13px; color: var(--texto-mut); }
.voz__tarjeta { font-size: 12px; color: var(--verde-texto); display: block; margin-top: 3px; letter-spacing: .02em; }
.voz__linea { font: 400 16.5px/1.5 var(--fd); color: var(--texto); margin: 0 0 14px; max-width: var(--lectura); }

.voz audio { width: 100%; max-width: 460px; display: block; color-scheme: var(--audio-esquema); }

/* Reproductor bloqueado: se ve que HAY algo, y qué hay que hacer para oírlo.
   Nunca un hueco vacío — un hueco no invita a entrar, solo desconcierta. */
.voz__cerrada {
  background: var(--hueco); border: 1px dashed var(--borde-f);
  border-radius: 14px; padding: 15px 17px;
  display: flex; align-items: center; gap: 13px; flex-wrap: wrap;
}
.voz__cerrada .candado { font-size: 19px; opacity: .55; }
.voz__cerrada span { font-size: 14px; color: var(--texto-mut); }
.voz__cerrada b { color: var(--texto); }

/* La transcripción: NUNCA se tapa. Sin esto Google ve una página en blanco. */
.transcripcion { margin-top: 14px; border-top: 1px solid var(--borde-f); padding-top: 12px; }
.transcripcion summary {
  cursor: pointer; font-size: 13.5px; font-weight: 600;
  color: var(--enlace); list-style: none;
}
.transcripcion summary::-webkit-details-marker { display: none; }
.transcripcion summary::before { content: '▸ '; }
.transcripcion[open] summary::before { content: '▾ '; }
.transcripcion p {
  font-size: 15px; line-height: 1.65; color: var(--texto-mut);
  margin: 12px 0 0; max-width: var(--lectura); white-space: pre-wrap;
}
.transcripcion .pendiente { color: var(--texto-mut); font-style: italic; opacity: .8; }

/* El puente a Dorvy: una caja sobria sobre el fondo, no un cartel. */
.puente {
  background: var(--fondo-2); border: 1px solid var(--borde-f);
  border-radius: 18px; padding: 22px; margin-top: 30px; max-width: var(--lectura);
}
.puente .titulo { font: 500 19px var(--fd); color: var(--texto); margin-bottom: 8px; }
.puente p { color: var(--texto-mut); font-size: 15px; }
.puente .nota { font-size: 13px; margin: 14px 0 0; }

/* El estado que salva el producto de mentir: si el audio no suena, se dice. */
.no-suena {
  background: var(--danger-tint); border-left: 3px solid var(--danger);
  border-radius: 8px; padding: 12px 15px; font-size: 14px; color: var(--ink-soft);
  margin-bottom: 12px;
}

.acciones-voz { display: flex; gap: 14px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.boton-ayuda {
  background: var(--sage-tint); border: 1px solid var(--sage-line); color: var(--sage-deep);
  font: 600 13.5px var(--fb); padding: 8px 15px; border-radius: 999px; cursor: pointer;
}
.boton-ayuda[aria-pressed='true'] { background: var(--sage-deep); color: var(--ink-on-color); border-color: var(--sage-deep); }
.enlace-flojo { font-size: 13px; color: var(--texto-mut); background: none; border: 0; cursor: pointer; text-decoration: underline; font-family: var(--fb); }
.hoja .enlace-flojo { color: var(--muted); }

/* Lo que explica cómo funciona algo: plegado, para quien lo necesite. */
.explica {
  border: 1px solid var(--borde-f); border-radius: 14px;
  padding: 12px 16px; margin: 0 0 20px; max-width: var(--lectura);
}
.explica summary { cursor: pointer; font: 600 13.5px var(--fb); color: var(--enlace); list-style: none; }
.explica summary::-webkit-details-marker { display: none; }
.explica summary::before { content: '▸ '; }
.explica[open] summary::before { content: '▾ '; }
.explica p { color: var(--texto-mut); font-size: 14.5px; margin: 10px 0 0; }
.hoja .explica { border-color: var(--line); }
.hoja .explica summary { color: var(--gold-deep); }
.hoja .explica p { color: var(--ink-soft); }

/* El recordatorio de que nadie le está esperando. Va al final de la bandeja. */
.ritmo {
  border-left: 2px solid var(--jewel); padding: 4px 0 4px 16px;
  margin: 30px 0 0; max-width: var(--lectura);
}
.ritmo p { color: var(--texto-mut); font-size: 14.5px; }

/* La etiqueta de acción dentro de una tarjeta: parece botón, no lo es (la
   tarjeta entera ya es el enlace; un botón dentro de un enlace no vale). */
.boton-mini {
  display: inline-block; background: var(--gold-deep); color: var(--ink-on-color);
  font: 600 12.5px var(--fb); padding: 6px 13px; border-radius: 999px;
}

/* El estado de partida de toda pantalla privada. Late despacio para que se
   entienda que algo está pasando, y no salta a la vista. */
.cargando {
  color: var(--muted); font-size: 15px; margin: 0;
  animation: latir 1.4s ease-in-out infinite;
}
@keyframes latir { 0%, 100% { opacity: .45 } 50% { opacity: .9 } }

/* ── Botones ─────────────────────────────────────────────────────────── */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  /* ⚠ El fondo es `--gold-deep`, no `--gold` (4-sep). Con `--gold` el texto
     claro encima daba 3,69:1 y Lighthouse lo marcaba: hace falta 4,5. Es la
     misma trampa de siempre, por el otro lado — poner blanco encima solo
     funciona si el fondo es lo bastante oscuro. Con `--gold-deep`: 5,50:1. */
  background: var(--gold-deep); color: var(--ink-on-color);
  font: 700 15px var(--fb); padding: 15px 24px; border: 0;
  /* Pastilla, como en el diseño. Hasta el 4-sep eran rectángulos de 14 px. */
  border-radius: 999px; cursor: pointer; text-decoration: none;
}
.boton:hover { background: #8A4529; text-decoration: none; }
.boton--calmo { background: transparent; color: var(--texto); border: 1px solid var(--texto-mut); }
.hoja .boton--calmo { color: var(--ink); border-color: var(--muted); }
.boton--peligro { background: var(--danger-deep); color: var(--ink-on-color); }
/* El de Google: blanco con borde, como lo dibuja Google en todas partes. Que
   se reconozca de lejos es la mitad de su valor. */
.boton--google { background: #fff; color: #1F1F1F; border: 1px solid #DADCE0; width: 100%; max-width: 520px; }
.boton--google:hover { background: #F7F8F8; }
.hoja .boton--google { color: #1F1F1F; }

/* ── Vacíos y errores ────────────────────────────────────────────────── */
.vacio { text-align: center; padding: 64px 20px; max-width: 460px; margin: 0 auto; }
.vacio .arco {
  width: 76px; height: 96px; margin: 0 auto 24px;
  border: 1px solid var(--arc-line); background: var(--arc-wash);
  border-radius: var(--arco);
}
.vacio h1 { margin-bottom: 12px; color: var(--texto); }
.vacio p { color: var(--texto-mut); margin-left: auto; margin-right: auto; }
.hoja .vacio h1 { color: var(--ink); }
.hoja .vacio p { color: var(--ink-soft); }

/* ── Formularios ─────────────────────────────────────────────────────── */
label { display: block; font-size: 14px; font-weight: 600; color: var(--ink-soft); margin: 18px 0 7px; }
input[type='text'], input[type='email'], input[type='number'], textarea, select {
  width: 100%; max-width: 520px; font: 400 16px var(--fb); color: var(--ink);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 13px 15px;
}
textarea { min-height: 150px; resize: vertical; line-height: 1.55; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
.ayuda { font-size: 13px; color: var(--muted); margin-top: 6px; }
.contador { font-size: 13px; color: var(--muted); text-align: right; max-width: 520px; }
.contador.pasado { color: var(--danger-deep); font-weight: 600; }

.chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 8px; }
.chips button {
  font: 500 14px var(--fb); padding: 9px 15px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink-soft); cursor: pointer;
}
.chips button[aria-pressed='true'] { background: var(--gold-wash); border-color: var(--gold); color: var(--gold-deep); font-weight: 600; }

/* ── Crisis: no se publica ───────────────────────────────────────────── */
.crisis {
  background: var(--danger-tint); border: 1px solid var(--danger);
  border-radius: 18px; padding: 26px; max-width: 520px;
}
.crisis h1 { color: var(--ink); margin-bottom: 12px; }
.crisis .lineas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.crisis .lineas a { background: var(--danger-deep); color: var(--ink-on-color); padding: 14px 22px; border-radius: 14px; font-weight: 600; }
.crisis .lineas a:hover { text-decoration: none; filter: brightness(.93); }

/* ── Directorio y fichas ─────────────────────────────────────────────── */
.rejilla { display: grid; gap: 16px; grid-template-columns: 1fr; }
.ficha { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px; display: flex; gap: 14px; color: var(--ink); }
.ficha a { color: var(--ink); }
.ficha img { width: 62px; height: 62px; border-radius: 50%; object-fit: cover; flex: none; background: var(--gold-wash); }

/* La ficha (diseño 07): cabecera oscura con el arco abajo, y debajo la hoja. */
.ficha-hero {
  text-align: center; padding: 26px 20px 34px; margin: 0 -20px 0;
  background: var(--degradado-ficha);
  border-bottom-left-radius: 50% 22%; border-bottom-right-radius: 50% 22%;
}
.ficha-hero .retrato {
  width: 132px; height: 132px; border-radius: 50%; object-fit: cover;
  margin: 0 auto 18px; display: block; background: var(--hueco); border: 1px solid var(--borde-f);
}
.ficha-hero h1 { font-size: 32px; color: var(--texto); }
.ficha-hero .cargo { color: var(--texto-mut); margin: 8px auto 14px; font-size: 15px; }
.ficha-hero .tarjeta-pill {
  display: inline-block; font: 600 11.5px var(--fb); letter-spacing: .12em; text-transform: uppercase;
  color: var(--joya-texto); border: 1px solid var(--joya-texto); border-radius: 999px; padding: 8px 14px;
}
.ficha-hero .comprobada { font-size: 13px; color: var(--texto-mut); margin: 12px 0 0; }
.ficha-hoja { margin-top: 26px; }
.ficha-hoja .bio { font: italic 400 19px/1.5 var(--fd); color: var(--ink); text-align: center; max-width: 40ch; margin: 0 auto 16px; }
.ficha-hoja .temas { text-align: center; font: 600 11.5px var(--fb); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); margin: 0 0 22px; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 8px; }
.tiles div { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 8px; text-align: center; }
.tiles .n { font: 500 28px var(--fd); color: var(--ink); }
.tiles .q { font: 600 10px var(--fb); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 4px; white-space: nowrap; }
.tiles .sage { background: var(--sage-tint); border-color: var(--sage-line); }
.tiles .sage .n { color: var(--sage-deep); }

/* ── Equipo — el MISMO tema que el resto del consultorio (David, 4-sep) ── */
.equipo { background: var(--fondo-3); color: var(--texto); min-height: 100vh; }
.equipo .envoltura { padding-top: 24px; }
.equipo h1, .equipo h2 { color: var(--texto); }
.equipo .tarjeta-cola {
  background: var(--fondo-2); border: 1px solid var(--borde-f);
  box-shadow: var(--icono-sombra);
  border-radius: 16px; padding: 20px; margin-bottom: 16px;
}
.equipo .dato { font-size: 14px; color: var(--texto-mut); margin: 4px 0; }
.equipo .dato b { color: var(--texto); }

/* ── Mensajes del sistema ────────────────────────────────────────────── */
.mensaje { border-radius: 12px; padding: 13px 16px; font-size: 14.5px; margin: 14px 0; max-width: 520px; }
.mensaje--mal { background: var(--danger-tint); color: var(--ink); }
.mensaje--bien { background: var(--ok-tint); color: var(--ink); }
.mensaje--ojo { background: var(--gold-wash); color: var(--ink); }
[hidden] { display: none !important; }

/* ════════════════════════════════════════════════════════════════════
   TABLET · 1024
   Es donde el psicólogo trabaja: aquí la lectura pasa a dos columnas.
   ════════════════════════════════════════════════════════════════════ */
@media (min-width: 760px) {
  h1 { font-size: 38px; }
  /* El arco y su titular crecen con la pantalla: en el diseño de tablet el
     saludo ocupa dos líneas enormes, no las tres del móvil. */
  .portada { padding: 60px 40px 44px; }
  .portada h1 { font-size: 52px; max-width: 18ch; }
  .portada p { font-size: 17px; max-width: 46ch; }
  main { padding: 40px 0 80px; }
  .muro { grid-template-columns: 1fr 1fr; }
  .rejilla { grid-template-columns: 1fr 1fr; }
  .pregunta-cuerpo { font-size: 21px; }
}

/* ════════════════════════════════════════════════════════════════════
   ESCRITORIO · 1160
   Más ancho NO es más texto por línea: la columna de lectura se queda
   donde está y el espacio sobrante se reparte.
   ════════════════════════════════════════════════════════════════════ */
@media (min-width: 1020px) {
  /* El arco no crece sin fin: pasado cierto ancho la cúpula se aplana y deja
     de leerse como arco. En el diseño de escritorio mide 760 px. */
  .portada { padding: 74px 56px 52px; max-width: 780px; }
  .portada h1 { font-size: 62px; max-width: 20ch; }
  .muro { grid-template-columns: repeat(3, 1fr); }
  .rejilla { grid-template-columns: repeat(3, 1fr); }
  .con-lado { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}


/* ════════════════════════════════════════════════════════════════════
   MÓVIL COMO EL DISEÑO (David, 5-sep-2026)
   Lo que faltaba para que cada pantalla del móvil sea la del proyecto de
   Claude Design y no una versión básica. Marcos 01 · 02 · 14 · 15 · 16 · 17.
   ════════════════════════════════════════════════════════════════════ */

/* ── La cabecera del móvil: una pastilla, no un menú (marcos 01 y 23) ── */
.pastilla-entrar {
  display: none; margin-left: auto; font: 700 11.5px var(--fb); letter-spacing: .1em;
  text-transform: uppercase; border: 1px solid var(--borde-f); border-radius: 999px;
  padding: 9px 15px; color: var(--texto); text-decoration: none; white-space: nowrap;
}
.pastilla-yo {
  display: none; margin-left: auto; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--joya); color: var(--joya-texto); background: var(--fondo-2);
  font: 600 15px var(--fd); place-items: center; text-decoration: none;
}
.pastilla-entrar:hover, .pastilla-yo:hover { text-decoration: none; border-color: var(--gold); }
@media (max-width: 759px) {
  .cabecera .menu { display: none; }
  .pastilla-entrar:not([hidden]) { display: inline-block; }
  .pastilla-yo:not([hidden]) { display: grid; }
}

/* ── La barra de abajo (marcos 15-17): Muro · Buscar · + · Avisos · Yo ── */
.barra-abajo {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  background: var(--barra); backdrop-filter: blur(8px); border-top: 1px solid var(--borde-f);
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  grid-template-columns: repeat(5, 1fr); align-items: end;
}
.barra-abajo a {
  display: flex; flex-direction: column; align-items: center; gap: 3px; position: relative;
  font: 600 10.5px var(--fb); letter-spacing: .02em; color: var(--texto-mut);
  text-decoration: none; padding: 4px 0;
}
.barra-abajo a:hover { text-decoration: none; }
.barra-abajo a[aria-current] { color: var(--enlace); }
.barra-abajo svg { width: 22px; height: 22px; }
.barra-abajo .mas {
  width: 52px; height: 52px; border-radius: 50%; background: var(--gold-deep); color: var(--ink-on-color);
  font: 400 30px/1 var(--fb); display: grid; place-items: center; margin: -22px auto 0;
  box-shadow: var(--shp4); padding: 0;
}
.barra-abajo .globo, .campana .globo {
  position: absolute; min-width: 17px; height: 17px; border-radius: 999px; padding: 0 5px;
  background: var(--gold-deep); color: var(--ink-on-color); font: 700 10px/17px var(--fb); text-align: center;
}
.barra-abajo .globo { top: 0; left: calc(50% + 4px); }
.barra-abajo .inicial {
  width: 22px; height: 22px; border-radius: 50%; border: 1px solid currentColor;
  font: 600 12px var(--fd); display: grid; place-items: center;
}
@media (max-width: 759px) {
  body.con-barra .barra-abajo:not([hidden]) { display: grid; }
  body.con-barra main { padding-bottom: 100px; }
}

/* ── Las pastillas de tema con su cuenta (marco 01: «Dormir · 38») ── */
.temas-nav a .n { margin-left: 6px; font-size: 11.5px; color: var(--texto-mut); font-variant-numeric: tabular-nums; }

/* ── La portada, debajo de las últimas voces (marco 01) ── */
.bloque-tuyo {
  margin: 34px 0 0; max-width: var(--lectura);
  background: var(--fondo-2); border: 1px solid var(--borde-f); border-radius: 20px; padding: 26px 22px;
}
.bloque-tuyo h3 { font: 600 28px/1.15 var(--fd); letter-spacing: -.02em; color: var(--texto); margin: 0 0 10px; }
.bloque-tuyo p { color: var(--texto-mut); font-size: 15px; margin: 0 0 18px; text-wrap: pretty; }
.quienes { margin-top: 34px; }
.quienes__fila { display: flex; gap: 18px; overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: none; }
.quienes__fila::-webkit-scrollbar { display: none; }
.quienes__fila a {
  flex: none; width: 96px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center; color: var(--texto); font: 500 13px var(--fb); text-decoration: none;
}
.quienes__fila a:hover { text-decoration: none; color: var(--enlace); }
.quienes__cara { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: var(--hueco); border: 1px solid var(--borde-f); }
.quienes .chip { font-size: 10px; padding: 3px 8px; }
.quienes .ayuda a { color: var(--enlace); }

/* ── La voz como la dibuja el diseño (Voz.dc.html) ── */
.voz { position: relative; }
.voz--destacada { border-color: var(--jewel); margin-top: 24px; }
.voz__sello {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  background: var(--jewel); color: #23170F; font: 700 9.5px var(--fb); letter-spacing: .14em;
  text-transform: uppercase; padding: 5px 12px; border-radius: 999px; white-space: nowrap; box-shadow: var(--shp4);
}
.voz__inicial { display: grid; place-items: center; font: 600 20px var(--fd); color: var(--joya-texto); background: var(--jewel-tint); }
.voz__perfil {
  display: block; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--borde-f);
  font: 600 13.5px var(--fb); color: var(--enlace);
}
.reproductor { display: flex; align-items: center; gap: 12px; margin: 4px 0 0; max-width: 460px; }
.rep-play {
  width: 42px; height: 42px; flex: none; border-radius: 50%; border: 1.5px solid var(--gold);
  background: var(--gold-wash); color: var(--enlace); display: grid; place-items: center;
  cursor: pointer; font: 400 14px/1 var(--fb); padding: 0 0 0 2px;
}
.rep-play:hover { background: var(--gold-tint); }
.rep-onda { flex: 1; display: flex; align-items: center; gap: 2px; height: 34px; cursor: pointer; min-width: 0; }
.rep-onda i { flex: 1; min-width: 2px; border-radius: 2px; background: rgba(115, 106, 92, .35); transition: background .1s; }
.rep-onda i.sono { background: var(--terra-dk); }
.rep-tiempo { font: 700 11px var(--fb); letter-spacing: .1em; color: var(--texto-mut); font-variant-numeric: tabular-nums; white-space: nowrap; }
.transcripcion .transcripcion__ceja {
  font: 700 9.5px var(--fb); letter-spacing: .14em; text-transform: uppercase; color: var(--texto-mut);
  margin: 0 0 8px; display: flex; align-items: center; gap: 8px;
}
.transcripcion .transcripcion__ceja::after { content: ''; flex: 1; height: 1px; background: var(--borde-f); }
.transcripcion .transcripcion__texto { font: 400 15px/1.6 var(--fd); color: var(--texto-mut); margin: 0; max-width: var(--lectura); white-space: pre-wrap; }
html.js .transcripcion[data-plegada] .transcripcion__texto {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; white-space: normal;
}
.transcripcion .transcripcion__mas { margin: 8px 0 0; background: none; border: 0; padding: 0; cursor: pointer; font: 600 13px var(--fb); color: var(--enlace); }

/* ── Mi rincón (marco 14) ── */
.rincon-cab { display: flex; align-items: center; gap: 14px; margin: 4px 0 26px; }
.rincon-inicial {
  width: 52px; height: 52px; border-radius: 50%; flex: none; border: 1.5px solid var(--joya);
  color: var(--joya-texto); background: var(--fondo-2); font: 600 22px var(--fd); display: grid; place-items: center;
}
.rincon-cab h1 { font-size: 30px; margin: 0; }
.rincon-cifras { color: var(--texto-mut); font-size: 13.5px; margin: 2px 0 0; }
.campana {
  margin-left: auto; width: 42px; height: 42px; flex: none; border-radius: 50%; border: 1px solid var(--borde-f);
  background: var(--fondo-2); display: grid; place-items: center; color: var(--texto); position: relative; text-decoration: none;
}
.campana svg { width: 20px; height: 20px; }
.campana .globo { top: -5px; right: -5px; }
.rincon-avisos { background: var(--fondo-2); border: 1px solid var(--borde-f); border-radius: 16px; padding: 14px 16px; margin-bottom: 26px; }
.rincon-avisos .fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rincon-avisos .enlace-flojo { color: var(--enlace); text-decoration: none; font-weight: 600; }
.aviso { padding: 10px 0 8px; border-top: 1px solid var(--borde-f); font-size: 14px; }
.aviso:first-child { border-top: 0; }
.aviso p { margin: 0; color: var(--texto); }
.aviso--nuevo p { font-weight: 600; }
.aviso a { color: var(--texto); }
.aviso--nuevo a { color: var(--enlace); }
.mi-pregunta { background: var(--fondo-2); border: 1px solid var(--borde-f); border-radius: 18px; padding: 16px 16px 12px; box-shadow: var(--icono-sombra); }
.mi-pregunta__cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; font-size: 12.5px; color: var(--texto-mut); }
.pill {
  display: inline-block; font: 700 9.5px var(--fb); letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px; border: 1px solid var(--borde-f); color: var(--texto-mut); white-space: nowrap;
}
.pill--nuevas { border-color: var(--sage); color: var(--verde-texto); background: var(--sage-tint); }
.pill--muro { border-color: var(--sage-line); color: var(--verde-texto); }
.mi-pregunta__texto { display: block; font: 500 19px/1.3 var(--fd); color: var(--texto); text-decoration: none; margin: 0 0 12px; text-wrap: pretty; }
.mi-pregunta__texto:hover { text-decoration: none; color: var(--enlace); }
.mi-voz {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; margin-top: 8px;
  background: var(--hueco); border: 1px solid var(--borde-f); color: var(--texto); text-decoration: none; font-size: 13.5px;
}
.mi-voz:hover { border-color: var(--gold); text-decoration: none; }
.mi-voz .play { width: 32px; height: 32px; margin: 0; }
.mi-voz .play::after { border-left-width: 9px; border-top-width: 6px; border-bottom-width: 6px; }
.mi-voz b { display: block; font-weight: 600; }
.mi-voz span:not(.play):not(.aro) { color: var(--texto-mut); font-size: 12.5px; }
.mi-voz--espera { border-style: dashed; background: transparent; }
.mi-voz .aro { width: 32px; height: 32px; flex: none; border-radius: 50%; border: 1.5px dashed var(--texto-mut); }
.mi-pregunta__pie { display: flex; justify-content: flex-end; margin-top: 8px; }

/* ── Buscar (marco 16) ── */
.buscador { display: flex; gap: 10px; margin: 6px 0 26px; max-width: 640px; }
.buscador input[type='search'] {
  flex: 1; min-width: 0; font: 400 16px var(--fb); color: var(--texto); background: var(--fondo-2);
  border: 1px solid var(--borde-f); border-radius: 999px; padding: 13px 18px;
}
.buscador input[type='search']:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
.buscador .boton { padding: 13px 20px; }

/* ── El atajo a la bandeja, en el rincón del psicólogo ── */
.atajo-bandeja {
  display: flex; align-items: center; gap: 14px; margin: 0 0 22px; padding: 14px 16px;
  background: var(--gold-wash); border: 1px solid var(--gold-tint); border-radius: 16px;
  color: var(--texto); text-decoration: none;
}
.atajo-bandeja:hover { text-decoration: none; border-color: var(--gold); }
.atajo-bandeja__icono {
  width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--gold-deep); color: var(--ink-on-color);
  display: grid; place-items: center;
}
.atajo-bandeja__icono svg { width: 22px; height: 22px; }
.atajo-bandeja__texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.atajo-bandeja__texto b { font: 600 16px var(--fd); }
.atajo-bandeja__texto span { font-size: 13px; color: var(--texto-mut); }
.atajo-bandeja__flecha { margin-left: auto; color: var(--enlace); font-size: 18px; }


/* ════════════════════════════════════════════════════════════════════
   CIMIENTOS DE LA MEJORA (6-oct-2026)

   Lo que comparten todas las pantallas nuevas. Salió de una auditoría con
   contraste MEDIDO (fórmula WCAG sobre estos mismos hex) y del piso numérico
   de la skill identidad-visual. La paleta NO cambia: solo se añaden un borde
   para controles y la escalera de sombras que faltaba.
   ════════════════════════════════════════════════════════════════════ */
:root {
  /* Bordes de CONTROLES (campos, pastillas, chips que se tocan). `--line`
     daba 1,19:1 sobre papel: un campo sin borde visible falla WCAG 1.4.11.
     Este marrón de la misma familia da 3,28:1 sobre papel y 3,67:1 sobre la
     superficie. Las TARJETAS siguen con `--line`: no son controles. */
  --line-strong: #8F8270;

  /* La escalera de sombras tintadas con la tinta (nunca negro puro). Antes
     había 2 en el tema claro; el piso pide ≥4 de .04 a .22. */
  --shp1: 0 1px 2px rgba(42, 37, 29, .04);
  --shp2: 0 2px 8px rgba(42, 37, 29, .05);
  --shp3: 0 6px 16px rgba(42, 37, 29, .07);

  --facil: cubic-bezier(.2, .7, .2, 1);
}

/* ── Iconos SVG (src/vistas/iconos.tsx) ─────────────────────────────── */
.ico { display: inline-block; flex: none; vertical-align: -.18em; }

/* ── Accesibilidad que valía para todo y no estaba ───────────────────
   Foco VISIBLE con teclado en todo lo que se toca. Solo los campos lo
   tenían. `--gold-deep` sobre papel da 5,03:1. */
:where(a, button, [role='slider'], summary, [tabindex], label.subida):focus-visible {
  outline: 2px solid var(--gold-deep); outline-offset: 3px; border-radius: 6px;
}
:where(.boton, .pastilla-entrar, .temas-nav a, .boton-ayuda, .chip-boton):focus-visible { border-radius: 999px; }

/* Saltar al contenido: el primer Tab de la página. Invisible hasta que se usa. */
.saltar {
  position: absolute; left: 12px; top: -60px; z-index: 50;
  background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 10px;
  font: 600 14px var(--fb); transition: top .15s var(--facil);
}
.saltar:focus { top: 10px; text-decoration: none; }

/* Oculto a la vista, presente para el lector de pantalla y para el
   `<input type=file>` que se viste de caja bonita. */
.vh {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Letra mínima de 11 px: las cejas estaban en 10. El contraste de tamaños se
   consigue subiendo el titular, no encogiendo lo pequeño. */
.ceja { font-size: 11px; }

/* Objetivos táctiles de 44 px (estándar de David, WCAG 2.5.5). */
.temas-nav a { padding: 11px 16px; border-color: var(--line-strong); }
.volver { width: 44px; height: 44px; }
.pastilla-entrar { padding: 13px 16px; border-color: var(--line-strong); }
.pastilla-yo { width: 44px; height: 44px; }

/* ── La cabecera: «dorvy» se queda SIEMPRE ───────────────────────────
   En pantallas estrechas se escondía «dorvy» y quedaba «consultorio» solo:
   justo se perdía la marca a la que se quiere llevar a la gente. */
@media (max-width: 430px) {
  .marca { font-size: 17px; }
  .marca .dorvy { display: inline; }
}
/* La lupa del móvil: quien llega de Google a UNA pregunta no tenía forma de
   buscar otra (la barra de abajo solo sale con sesión). */
.cabecera .lupa {
  display: none; width: 44px; height: 44px; border-radius: 50%; flex: none;
  place-items: center; color: var(--texto); text-decoration: none;
}
.cabecera .lupa:hover { background: var(--hueco); text-decoration: none; }
@media (max-width: 759px) {
  .cabecera .lupa { display: grid; margin-left: auto; }
  .cabecera .lupa ~ .pastilla-entrar, .cabecera .lupa ~ .pastilla-yo { margin-left: 4px; }
}

/* ── El pie en tres columnas ─────────────────────────────────────────
   Era «Aviso legal · Privacidad · dorvy.co». En el móvil sin cuenta era el
   ÚNICO camino a «¿Eres psicólogo?», Buscar o «Quiénes responden». */
.pie { padding: 44px 0 calc(36px + env(safe-area-inset-bottom)); }
.pie__cols { display: grid; gap: 26px; margin-bottom: 28px; }
.pie__col h2 {
  font: 700 11px var(--fb); letter-spacing: .14em; text-transform: uppercase;
  color: var(--texto); margin: 0 0 10px;
}
.pie__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pie__col a { display: inline-block; padding: 7px 0; text-decoration: none; color: var(--texto-mut); }
.pie__col a:hover { color: var(--texto); text-decoration: underline; }
.pie__marca { font: 500 18px var(--fd); color: var(--texto); margin: 0 0 8px; display: flex; gap: 9px; align-items: center; }
.pie__marca em { font-style: normal; color: var(--enlace); }
.pie__legal { border-top: 1px solid var(--borde-f); padding-top: 18px; font-size: 13px; }
.pie__legal p { max-width: 70ch; }
@media (min-width: 760px) {
  .pie__cols { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
}

/* ── Las hojas que suben (diálogos) ─────────────────────────────────
   Un solo componente para todo lo que antes era `window.prompt` o un salto de
   página sin avisar: reportar una voz, qué es la tarjeta verificada, el paso a
   Dorvy, el último paso para publicar. En el móvil sube desde abajo; en el
   escritorio sale centrada. Se abre con `[data-abre="id"]` (pagina.js). */
.hoja-modal {
  /* `fixed` explícito: la regla `body > * { position: relative }` del lienzo
     se lo quitaba a las hojas colgadas del <body> (cazado por el agente A). */
  position: fixed;
  border: 0; padding: 0; background: transparent; color: var(--ink);
  width: min(560px, 100%); max-width: 100%; max-height: 92vh;
  margin: auto auto 0; overflow: visible;
}
.hoja-modal::backdrop { background: rgba(33, 28, 22, .48); backdrop-filter: blur(2px); }
.hoja-modal__caja {
  background: var(--surface); border-radius: 26px 26px 0 0; box-shadow: var(--shp5);
  padding: 14px 22px calc(26px + env(safe-area-inset-bottom)); max-height: 92vh; overflow: auto;
  position: relative;
}
.hoja-modal__caja::before {
  content: ''; display: block; width: 42px; height: 4px; border-radius: 4px;
  background: var(--line); margin: 0 auto 14px;
}
.hoja-modal h2 { font: 500 24px/1.2 var(--fd); color: var(--ink); margin: 0 0 10px; padding-right: 40px; }
.hoja-modal p { color: var(--ink-soft); font-size: 15px; }
.hoja-modal__cerrar {
  position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%;
  border: 0; background: transparent; color: var(--ink-soft); display: grid; place-items: center; cursor: pointer;
}
.hoja-modal__cerrar:hover { background: var(--paper-2); }
.hoja-modal .botones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.hoja-modal[open] .hoja-modal__caja { animation: subir .28s var(--facil); }
@keyframes subir { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 760px) {
  .hoja-modal { margin: auto; }
  .hoja-modal__caja { border-radius: 24px; padding: 26px 30px 30px; }
  .hoja-modal__caja::before { display: none; }
}

/* ── Sombras de la escalera, donde faltaban ──────────────────────────── */
.chip, .temas-nav a { box-shadow: none; }
.puente, .bloque-tuyo { box-shadow: var(--shp3); }

/* ── Escritorio: aire de verdad entre secciones (piso: 96 px) ──────── */
.seccion { margin-top: 56px; }
@media (min-width: 1020px) {
  .seccion { margin-top: 96px; }
}

/* ── Transiciones entre páginas (Chrome y Safari recientes) ───────────
   Pasar de una tarjeta del muro a su pregunta deja de ser un parpadeo blanco.
   Donde no se soporta, no pasa nada; con movimiento reducido, tampoco. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}


/* ════════════════════════════════════════════════════════════════════
   ESCUCHAR — la página de una pregunta y el reproductor (6-oct-2026)
   ════════════════════════════════════════════════════════════════════ */
/* escuchar.css — se funde en consultorio.css al terminar (6-oct) */
/* ============================================================
   ESCUCHAR — la página de una pregunta y el reproductor (agente A, 6-oct).

   Oír una voz ES el producto. La vara: WhatsApp, Spotify, Apple Podcasts,
   con la calidez editorial de la marca (papel, Fraunces, terracota).

   Reglas de color que se repiten aquí (auditoría §6.1, contraste medido):
   · El terracota `--gold` va de FONDO (play, minirreproductor). El icono
     encima es `--ink-on-color`: objeto gráfico, 3,69:1 (pide 3:1).
   · La onda: oído `--gold-deep` / no oído `--line` → 4,24:1 entre sí.
   · Bordes de lo que se toca: `--line-strong` (3,28:1 sobre papel).
   · Sombras de la escalera `--shp1..5`, tintadas con la tinta.
   ============================================================ */

/* ── La página: una columna en el móvil, dos en el escritorio ───────── */
.pp { display: block; }
.pp__principal { min-width: 0; }

.barra-contexto { margin-bottom: 18px; }
.barra-contexto .volver { color: var(--ink); border-color: var(--line-strong); background: var(--surface); box-shadow: var(--shp1); }
.barra-contexto .volver:hover { border-color: var(--gold-deep); color: var(--gold-deep); }
.barra-contexto__tema { color: inherit; text-decoration: none; }
.barra-contexto__tema:hover { color: var(--gold-deep); text-decoration: underline; }

/* La pregunta: el <h1> de la página, con el estilo de siempre del cuerpo
   de pregunta (Fraunces) y algo más de peso, como el marco 02. */
.tarjeta-pregunta { padding: 24px 22px 22px; margin-bottom: 34px; }
.tarjeta-pregunta .ceja { margin-bottom: 12px; }
h1.pregunta-cuerpo {
  font: 500 22px/1.34 var(--fd); color: var(--ink); letter-spacing: -.012em;
  margin: 0 0 16px; max-width: 34ch; text-wrap: pretty;
}
.tarjeta-pregunta .meta time { color: inherit; }

/* «Las voces · 3» y la pastilla de «sin cuenta». */
.pp__voces-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; margin: 0 0 22px; }
.pastilla-sincuenta {
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
  font: 600 12.5px/1.2 var(--fb); color: var(--ink-soft);
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 7px 13px;
}
.pastilla-sincuenta__punto { width: 7px; height: 7px; border-radius: 50%; background: var(--sage); flex: none; }

/* ── La tarjeta de una voz (marco 02) ─────────────────────────────────── */
.pp .voz {
  background: var(--surface); border: 1px solid var(--line); border-radius: 22px;
  padding: 20px 18px 14px; margin: 0 0 18px; box-shadow: var(--shp2);
  scroll-margin-top: 90px;
}
/* La más útil: la tapa en arco del diseño, la forma de la casa. */
.pp .voz--destacada {
  border-color: var(--jewel); margin-top: 30px; padding-top: 40px; box-shadow: var(--shp3);
  border-top-left-radius: 50% 56px; border-top-right-radius: 50% 56px;
}
.voz__sello { font-size: 11px; padding: 6px 14px; }
.voz--llegada { animation: llegada 1.6s var(--facil); }
@keyframes llegada { 0% { box-shadow: 0 0 0 4px var(--gold-tint), var(--shp3); } 100% { box-shadow: var(--shp2); } }

.voz__cab { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 0 13px; align-items: start; }
.voz__cab .voz__retrato { width: 52px; height: 52px; margin-top: 2px; box-shadow: var(--shp1); }
.voz__quien-txt { min-width: 0; }
h2.voz__nombre { font: 500 19px/1.25 var(--fd); letter-spacing: -.01em; margin: 1px 0 1px; display: block; }
h2.voz__nombre a { color: var(--ink); text-decoration: none; display: inline-block; min-height: 24px; }
h2.voz__nombre a:hover { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 3px; }
.voz__dur {
  font: 700 12px var(--fb); letter-spacing: .08em; color: var(--ink-soft);
  font-variant-numeric: tabular-nums; margin-top: 5px;
}
.voz__cargo { font-size: 13px; color: var(--ink-soft); margin: 2px 0 0; line-height: 1.45; }

/* El sello que se toca: escudo + «T.P. VERIFICADA · COLPSIC» en joya. El
   área de toque es de 44 px aunque se vea compacto (márgenes negativos). */
.sello-voz {
  display: inline-flex; align-items: center; gap: 6px;
  font: 700 11px/1 var(--fb); letter-spacing: .12em; text-transform: uppercase; color: var(--jewel-deep);
  /* 6-oct: arriba sin margen negativo. Con -12px el área de toque tapaba la
     mitad baja del nombre (axe: el enlace quedaba de 15 px) y tocar el nombre
     abría la hoja del sello en vez del perfil. */
  background: none; border: 0; cursor: pointer; padding: 6px 8px 14px; margin: 0 -8px -12px;
  border-radius: 8px; text-align: left;
}
.sello-voz .ico { flex: none; }
.sello-voz:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── El reproductor ───────────────────────────────────────────────────── */
.voz__oir { margin: 16px 0 0; }
.reproductor {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; align-items: start;
  max-width: none; margin: 0;
}
.rep-play {
  width: 48px; height: 48px; margin-top: 0; border-radius: 50%; border: 0; padding: 0;
  background: var(--gold); color: var(--ink-on-color); display: grid; place-items: center;
  cursor: pointer; position: relative; box-shadow: var(--shp3);
  transition: background .15s var(--facil), transform .15s var(--facil);
}
.rep-play:hover { background: var(--gold-deep); }
.rep-play:active { transform: scale(.94); }
.rep-play:focus-visible { border-radius: 50%; }
/* El triángulo pesa a la izquierda: se corre 1,5 px para que se vea centrado. */
.reproductor:not(.suena) .rep-play .ico { transform: translateX(1.5px); }
/* Cargando: un aro que gira alrededor del play mientras llega el audio. Un
   toque que no responde en 300 ms se lee como roto. Con movimiento reducido
   el aro se queda quieto (la regla global apaga la animación), pero se ve. */
.reproductor.cargando .rep-play::after {
  content: ''; position: absolute; inset: -5px; border-radius: 50%;
  border: 2.5px solid var(--gold-tint); border-top-color: var(--gold-deep);
  animation: girar .8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

.rep-cuerpo { min-width: 0; display: grid; }
.rep-onda {
  display: flex; align-items: center; gap: 2px; height: 48px; cursor: pointer; min-width: 0;
  border-radius: 8px; touch-action: manipulation;
}
.rep-onda:focus-visible { outline-offset: 2px; }
.rep-onda { justify-content: space-between; }
.rep-onda i { flex: 0 1 4px; min-width: 2px; border-radius: 3px; background: var(--line); transition: background .15s; }
.rep-onda i.sono { background: var(--gold-deep); }
.rep-onda:hover i:not(.sono) { background: var(--gold-tint); }

.rep-fila { display: flex; align-items: center; gap: 0; margin: -6px -8px -8px 0; }
.rep-tiempo {
  font: 600 12.5px var(--fb); letter-spacing: .02em; color: var(--ink-soft);
  font-variant-numeric: tabular-nums; white-space: nowrap; margin-right: auto;
}
.rep-tiempo__sep { color: var(--muted); }
/* −10 s y la velocidad: 44 px de toque, una pastilla pequeña a la vista. */
.rep-mini {
  position: relative; min-width: 44px; height: 44px; padding: 0 10px; border: 0; background: none;
  color: var(--ink-soft); font: 700 12.5px var(--fb); font-variant-numeric: tabular-nums;
  display: grid; place-items: center; cursor: pointer; border-radius: 999px;
}
.rep-mini:hover { color: var(--gold-deep); }
.rep-vel { min-width: 56px; }
.rep-vel::before {
  content: ''; position: absolute; inset: 8px 4px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--surface); z-index: -1;
}
.rep-vel { z-index: 0; }
.rep-vel:hover::before { border-color: var(--gold-deep); }

/* ── La línea escrita y la transcripción ──────────────────────────────── */
.pp .voz__linea { font: 400 17px/1.5 var(--fd); color: var(--ink); margin: 14px 0 0; max-width: 60ch; text-wrap: pretty; }
.pp .transcripcion { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.pp .transcripcion .transcripcion__ceja { font-size: 11px; letter-spacing: .1em; color: var(--ink-soft); margin-bottom: 10px; }
.pp .transcripcion .transcripcion__ceja time { color: inherit; }
.pp .transcripcion .transcripcion__texto { font: 400 15.5px/1.68 var(--fd); color: var(--ink-soft); max-width: 64ch; }
.pp .transcripcion .transcripcion__mas {
  margin: 4px 0 -6px; padding: 12px 4px 12px 0; font: 600 13.5px var(--fb); color: var(--gold-deep);
}

/* ── El pie de la voz: Me ayudó · Compartir · Reportar ────────────────── */
.voz__pie {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft);
}
.boton-ayuda {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px;
  background: var(--sage-tint); border: 1px solid var(--sage); color: var(--sage-deep);
  font: 600 14px var(--fb); border-radius: 999px; cursor: pointer;
  transition: background .15s var(--facil), color .15s var(--facil);
}
.boton-ayuda:hover { background: var(--sage-line); }
.boton-ayuda[aria-pressed='true'] { background: var(--sage-deep); color: var(--ink-on-color); border-color: var(--sage-deep); }
.boton-ayuda[aria-pressed='true'] .ico path { fill: currentColor; }
.boton-ayuda__n { font-variant-numeric: tabular-nums; }
.boton-ayuda.late .ico { animation: latido .2s var(--facil); }
@keyframes latido { 50% { transform: scale(1.28); } }
.voz__accion {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 14px;
  background: none; border: 0; border-radius: 999px; color: var(--ink-soft);
  font: 600 14px var(--fb); cursor: pointer;
}
.voz__accion:hover { background: var(--paper-2); color: var(--ink); }
.voz__accion[aria-pressed='true'] { color: var(--gold-deep); }
.voz__accion[aria-pressed='true'] .ico path { fill: currentColor; }
.voz__base { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 0 -6px; }
.voz__reportar {
  margin-left: auto; flex: none; min-height: 44px; padding: 0 4px; background: none; border: 0; cursor: pointer;
  font: 500 13px var(--fb); color: var(--muted); text-decoration: underline; text-underline-offset: 3px;
}
.voz__reportar:hover { color: var(--ink); }
.voz__reportar[aria-disabled='true'] { text-decoration: none; cursor: default; }
.pp .voz__perfil {
  display: block; min-width: 0; line-height: 1.45;
  margin: 0; padding: 12px 0; border: 0; font: 600 13.5px var(--fb); color: var(--gold-deep);
}
@media (max-width: 400px) {
  .voz__accion { padding: 0 12px; }
  .voz__accion-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ── La voz cerrada ───────────────────────────────────────────────────── */
.pp .voz__cerrada, .voz__cerrada {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px 14px; align-items: start;
  background: var(--paper-2); border: 1px dashed var(--line-strong); border-radius: 16px;
  padding: 16px; margin: 16px 0 0;
}
.voz__candado {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); color: var(--gold-deep); border: 1px solid var(--line);
}
.voz__cerrada-txt { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); }
.voz__cerrada-txt strong { color: var(--ink); font-weight: 600; }
.voz__entrar.boton {
  grid-column: 2; justify-self: start; padding: 11px 20px; min-height: 44px; font-size: 14.5px;
  color: var(--gold-deep); border-color: var(--gold-deep); background: var(--surface);
}
.voz__entrar.boton:hover { background: var(--gold-wash); }

/* ── Al terminar de oír ───────────────────────────────────────────────── */
.tras-oir {
  margin: 14px 0 0; padding: 16px 16px 14px; border-radius: 16px;
  background: var(--gold-wash); border: 1px solid var(--gold-tint);
  animation: aparecer .2s var(--facil);
}
@keyframes aparecer { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.tras-oir__titulo { font: 500 20px/1.2 var(--fd); color: var(--ink); margin: 0 0 12px; }
.tras-oir__fila { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.boton-ayuda--grande { min-height: 48px; padding: 0 22px; font-size: 15px; }
.tras-oir__otra {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px;
  border-radius: 999px; border: 1px solid var(--gold-deep); background: var(--surface);
  color: var(--gold-deep); font: 600 14.5px var(--fb); text-decoration: none;
}
.tras-oir__otra:hover { background: var(--paper-2); text-decoration: none; }
.tras-oir__puente { margin: 12px 0 0; font-size: 13.5px; color: var(--ink-soft); }
.tras-oir__puente a { color: var(--gold-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; gap: 4px; padding: 10px 0; margin: -10px 0; }

/* ── La columna de al lado (en el móvil, debajo) ─────────────────────── */
.pp__lado { margin-top: 44px; display: grid; gap: 30px; align-content: start; }
.lado-titulo {
  font: 700 11px var(--fb); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft);
  margin: 0 0 10px; display: flex; align-items: center; gap: 10px;
}
.lado-titulo::before { content: ''; width: 22px; height: 1px; background: var(--gold); flex: none; }
.lado-quienes { display: none; }
.lado-quienes ul, .lado-parecidas ul { list-style: none; margin: 0; padding: 0; }
.lado-quienes a {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  min-height: 52px; padding: 6px 10px; margin: 0 -10px; border-radius: 14px; color: var(--ink); text-decoration: none;
}
.lado-quienes a:hover { background: var(--paper-2); text-decoration: none; }
.lado-quienes__cara { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); }
.lado-quienes .voz__inicial { font-size: 15px; display: grid; place-items: center; }
.lado-quienes__nombre { font: 500 15px/1.25 var(--fd); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lado-quienes__dur { font: 600 12px var(--fb); color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.pp .pp__puente { margin: 0; max-width: none; padding: 22px 22px 20px; border-radius: 20px; border-color: var(--line); }
.pp__puente .titulo { font: 500 20px/1.2 var(--fd); }
.pp__puente p { font-size: 14.5px; line-height: 1.55; }
.pp__puente .boton--calmo {
  color: var(--gold-deep); border-color: var(--gold-deep); padding: 12px 20px; min-height: 44px; margin-top: 2px;
}
.pp__puente .boton--calmo:hover { background: var(--gold-wash); }

.pp-parecida a { display: grid; gap: 8px; padding: 15px 0; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.pp-parecida:last-child a { border-bottom: 1px solid var(--line); }
.pp-parecida__texto {
  font: 400 16px/1.42 var(--fd); color: var(--ink);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.pp-parecida a:hover .pp-parecida__texto { color: var(--gold-deep); }
.pp-parecida a:hover { text-decoration: none; }
.pp-parecida__meta { display: flex; align-items: center; gap: 8px; font: 600 12.5px var(--fb); color: var(--ink-soft); }
.pp-parecida__play {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--gold); color: var(--ink-on-color);
}
.pp-parecida__play .ico { transform: translateX(1px); }
.pp-parecida__meta--espera { font-weight: 500; color: var(--muted); }
.lado-parecidas__mas {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 6px;
  font: 600 13.5px var(--fb); color: var(--gold-deep);
}
.pp__principal > .aviso-legal { margin-top: 26px; font-size: 13.5px; }

/* ── Sin voces todavía ────────────────────────────────────────────────── */
.sin-voz__caja {
  background: var(--paper-2); border: 1px dashed var(--line-strong); border-radius: 22px; padding: 26px 22px 22px;
}
.sin-voz__icono {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--line); color: var(--gold-deep); margin-bottom: 14px;
}
.sin-voz h2 { font: 500 23px/1.2 var(--fd); color: var(--ink); margin: 0 0 10px; }
.sin-voz p { color: var(--ink-soft); font-size: 15px; }
.sin-voz .sin-voz__aviso { font-size: 14px; margin: 0; padding-top: 12px; border-top: 1px solid var(--line); }
.sin-voz__mientras { margin-top: 40px; }
.sin-voz__mientras .ceja { margin-bottom: 18px; }
.voz.voz--mini {
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
  padding: 18px 18px 14px; margin: 0 0 14px; box-shadow: var(--shp2);
}
.voz--mini__pregunta { display: block; font: 500 17px/1.4 var(--fd); color: var(--ink); text-decoration: none; text-wrap: pretty; }
.voz--mini__pregunta:hover { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 3px; }
.voz--mini__quien { font-size: 13.5px; color: var(--ink-soft); margin: 6px 0 12px; }
.voz--mini__quien b { color: var(--ink); font-weight: 600; }

/* ── El minirreproductor ──────────────────────────────────────────────── */
.mini {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 30;
  max-width: 560px; margin: 0 auto;
  display: grid; grid-template-columns: 40px minmax(0, 1fr) 44px 44px; align-items: center; gap: 0 8px;
  padding: 8px 6px 10px 10px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shp5);
  opacity: 0; transform: translateY(14px);
  transition: opacity .2s var(--facil), transform .2s var(--facil);
}
.mini.visible { opacity: 1; transform: none; }
.mini__cara {
  width: 40px; height: 40px; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: var(--jewel-tint); color: var(--jewel-deep); font: 600 17px var(--fd);
}
.mini__cara img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mini__ir { min-width: 0; min-height: 44px; display: grid; align-content: center; text-align: left; background: none; border: 0; padding: 0 2px; cursor: pointer; border-radius: 10px; }
.mini__nombre { font: 500 15px/1.25 var(--fd); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini__preg { font: 400 12.5px/1.3 var(--fb); color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini__play {
  width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer;
  background: var(--gold); color: var(--ink-on-color);
}
.mini__play:hover { background: var(--gold-deep); }
.mini__cerrar { width: 44px; height: 44px; border-radius: 50%; border: 0; background: none; color: var(--ink-soft); display: grid; place-items: center; cursor: pointer; }
.mini__cerrar:hover { background: var(--paper-2); color: var(--ink); }
.mini__play:focus-visible, .mini__cerrar:focus-visible { border-radius: 50%; }
.mini__barra { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--line); }
.mini__barra i { display: block; height: 100%; background: var(--gold-deep); transform-origin: left center; transform: scaleX(0); }
body.con-mini .pie { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
@media (max-width: 759px) {
  body.con-barra .mini { bottom: calc(78px + env(safe-area-inset-bottom)); }
}

/* ── El aviso flotante («Enlace copiado») ─────────────────────────────── */
.aviso-flotante {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 60;
  transform: translate(-50%, 10px); opacity: 0; pointer-events: none;
  background: var(--ink); color: var(--paper); font: 600 14px/1.35 var(--fb);
  padding: 12px 18px; border-radius: 999px; box-shadow: var(--shp4);
  max-width: calc(100vw - 32px); width: max-content; text-align: center;
  transition: opacity .2s var(--facil), transform .2s var(--facil);
}
.aviso-flotante.visible { opacity: 1; transform: translate(-50%, 0); }
body.con-mini .aviso-flotante { bottom: calc(96px + env(safe-area-inset-bottom)); }
@media (max-width: 759px) {
  body.con-barra .aviso-flotante { bottom: calc(90px + env(safe-area-inset-bottom)); }
  body.con-barra.con-mini .aviso-flotante { bottom: calc(156px + env(safe-area-inset-bottom)); }
}

/* ── Las hojas de esta pantalla ───────────────────────────────────────── */
html:has(dialog.hoja-modal[open]) { overflow: hidden; }
/* `body > * { position: relative }` (el grano del lienzo) alcanzaba a las
   hojas que el JS cuelga del <body> (la del puente): dejaban de ser fijas y
   quedaban flotando 85 px por encima del borde de abajo. */
dialog.hoja-modal { position: fixed; }
.hoja-modal .ceja { color: var(--gold-deep); margin-bottom: 8px; }
.hoja-sello__icono {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: var(--jewel-tint); color: var(--jewel-deep); margin: 6px 0 14px;
}
.hoja-sello__datos { margin: 14px 0 16px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--paper-2); }
.hoja-sello__datos div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 10px; padding: 11px 14px; border-top: 1px solid var(--line); align-items: baseline; }
.hoja-sello__datos div:first-child { border-top: 0; }
.hoja-sello__datos dt { font: 700 11px var(--fb); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.hoja-sello__datos dd { margin: 0; color: var(--ink); font-size: 15px; }
.hoja-modal .hoja-sello__nota { font-size: 13.5px; border-left: 2px solid var(--sage); padding-left: 12px; }
.hoja-modal a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 3px; }
.hoja-modal .boton { color: var(--ink-on-color); text-decoration: none; }
.hoja-modal .boton--calmo { color: var(--ink); border-color: var(--line-strong); }

.motivos { border: 0; padding: 0; margin: 14px 0 4px; display: grid; gap: 8px; }
.hoja-modal label.motivo {
  display: flex; align-items: center; gap: 12px; margin: 0; min-height: 50px; padding: 10px 14px;
  border: 1px solid var(--line-strong); border-radius: 14px; background: var(--surface);
  font: 500 15px var(--fb); color: var(--ink); cursor: pointer;
  transition: background .15s var(--facil), border-color .15s var(--facil);
}
.hoja-modal label.motivo:hover { background: var(--paper-2); }
.hoja-modal label.motivo:has(input:checked) { border-color: var(--gold-deep); background: var(--gold-wash); box-shadow: inset 0 0 0 1px var(--gold-deep); }
.motivo input { width: 20px; height: 20px; margin: 0; accent-color: var(--gold-deep); flex: none; }
.hoja-modal label.motivo-detalle { margin: 16px 0 6px; font-size: 14px; color: var(--ink-soft); }
.hoja-modal textarea { min-height: 76px; max-width: none; border-color: var(--line-strong); }
.hoja-modal .mensaje { margin: 12px 0 0; }

.hoja-puente__lista { list-style: none; padding: 0; margin: 14px 0 4px; display: grid; gap: 12px; }
.hoja-puente__lista li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; color: var(--ink-soft); font-size: 15px; line-height: 1.5; }
.hoja-puente__lista .ico { color: var(--sage-deep); margin-top: 2px; }

/* ── Tablet ───────────────────────────────────────────────────────────── */
@media (min-width: 760px) {
  h1.pregunta-cuerpo { font-size: 25px; }
  .tarjeta-pregunta { padding: 30px 32px 26px; }
  .pp .voz { padding: 24px 26px 16px; }
  .pp .voz--destacada { padding-top: 44px; }
  .pp__lado { grid-template-columns: 1fr 1fr; column-gap: 28px; }
  .pp__lado .lado-parecidas { grid-column: 1 / -1; }
}

/* ── Escritorio de verdad (≥1020): dos columnas ───────────────────────── */
@media (min-width: 1020px) {
  .pp {
    display: grid; grid-template-columns: minmax(0, 720px) 320px; justify-content: space-between;
    column-gap: 56px; align-items: start;
  }
  h1.pregunta-cuerpo { font-size: 28px; line-height: 1.3; }
  .pp__lado {
    position: sticky; top: 84px; margin-top: 62px; grid-template-columns: 1fr; gap: 28px;
    max-height: calc(100vh - 100px); overflow-y: auto; overscroll-behavior: contain;
    padding: 4px 6px 12px; margin-left: -6px; margin-right: -6px; scrollbar-width: thin;
  }
  .pp__lado .lado-parecidas { grid-column: auto; }
  .lado-quienes { display: block; }
  .pp-parecida__texto { font-size: 15px; -webkit-line-clamp: 2; }
  .pp-parecida a { padding: 12px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .mini, .aviso-flotante { transition: none; }
}

.pp .voz__perfil .ico { vertical-align: -.22em; margin-left: 2px; }


/* ════════════════════════════════════════════════════════════════════
   PORTADA Y DESCUBRIMIENTO — muro, temas, buscar, ficha y directorio (6-oct-2026)
   ════════════════════════════════════════════════════════════════════ */
/* ============================================================
   portada.css — PORTADA, TEMAS, BUSCADOR, DIRECTORIO Y FICHA (agente B).
   6-oct-2026. Se funde en consultorio.css al terminar.

   Se carga DESPUÉS de consultorio.css, así que aquí se pisan reglas viejas
   sin tocarlas allí. Reglas que se respetan:
   · El color de marca es para FONDOS (botones, el play); para texto, `-deep`.
   · Bordes de lo que se toca con `--line-strong`; las tarjetas con `--line`.
   · Sombras tintadas `--shp1..5`, nunca negras.
   · Objetivos de 44 px. Nada se mueve con movimiento reducido.
   · Escritorio de verdad (≥1020): se usa el ancho de 1160, no se estira el
     móvil.
   ============================================================ */

/* ── Ritmo vertical ───────────────────────────────────────────────────
   En los cimientos `.seccion{56px}` va DESPUÉS de su @media de 96 px y la
   pisaba siempre: en escritorio nunca había 96. Aquí, en el orden bueno. */
.seccion { margin-top: 56px; }
@media (min-width: 1020px) { .seccion { margin-top: 96px; } }

/* ── Piezas comunes ───────────────────────────────────────────────────── */
.retrato-p {
  border-radius: 50%; object-fit: cover; flex: none; display: inline-grid; place-items: center;
  background: var(--hueco); border: 1px solid var(--line); font-size: 18px;
}
.sello-tp {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  font: 700 10.5px/1 var(--fb); letter-spacing: .1em; text-transform: uppercase;
  color: var(--jewel-deep); /* 5,7:1 sobre papel claro */
}
.sello-tp .ico { width: 13px; height: 13px; }
.enlace-flecha {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  font: 600 15px var(--fb); color: var(--enlace); white-space: nowrap;
}
.enlace-flecha .ico { transition: transform .2s var(--facil); }
.enlace-flecha:hover { text-decoration: none; }
.enlace-flecha:hover .ico { transform: translateX(3px); }
.boton .ico { width: 18px; height: 18px; }
.boton--grande { padding: 17px 30px; font-size: 16px; }
.vacio__titulo { font: 500 28px/1.15 var(--fd); color: var(--texto); margin: 0 0 12px; letter-spacing: -.015em; }

/* Cabecera de sección: ceja + titular de verdad + una línea que explica. */
.seccion__cab { margin-bottom: 22px; }
.seccion__cab h2 {
  font: 500 30px/1.1 var(--fd); letter-spacing: -.02em; color: var(--texto);
  margin: 0 0 8px; text-wrap: balance;
}
.seccion__sub { color: var(--texto-mut); font-size: 15px; margin: 0; max-width: 58ch; text-wrap: pretty; }

/* Migas de pan: el separador es un trazo dibujado, no un glifo «›». */
.migas { margin: 0 0 14px; }
.migas ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; font-size: 13.5px; }
.migas li { display: inline-flex; align-items: center; gap: 10px; color: var(--texto-mut); }
.migas li + li::before {
  content: ''; width: 6px; height: 6px; flex: none; transform: rotate(45deg);
  border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; opacity: .7;
}
.migas a { color: var(--texto-mut); display: inline-block; padding: 12px 0; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.migas a:hover { color: var(--enlace); }
.migas [aria-current] { color: var(--texto); font-weight: 600; }

/* ════════════════════════════════════════════════════════════════════
   1 · LA PRIMERA PANTALLA
   ════════════════════════════════════════════════════════════════════ */
.portada {
  /* Se desmonta la caja vieja: el arco ya no es la sección entera, es el
     marco del titular (y en escritorio, de la columna izquierda). */
  border: 0; background: none; border-radius: 0; padding: 0;
  margin: 0 auto; max-width: none; text-align: center;
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: 'arco' 'voz' 'acciones' 'pasos';
}
.portada__arco {
  grid-area: arco; position: relative;
  padding: 30px 14px 6px;
  border: 1.5px solid var(--arc-line); border-bottom: none;
  border-radius: 48% 48% 0 0 / 26% 26% 0 0;
  background: linear-gradient(180deg, var(--arc-wash), transparent 88%);
}
/* En el móvil la cabecera ya pone el icono y «dorvy consultorio» 60 px más
   arriba: repetirlos aquí eran ~110 px de lo mismo en la primera pantalla. */
.portada .icono { display: none; }
.portada .wordmark { display: none; }
.portada h1 {
  font: 500 44px/1.02 var(--fd); letter-spacing: -.028em; color: var(--texto);
  max-width: 10.5ch; margin: 0 auto 16px; text-wrap: balance;
  font-optical-sizing: auto;
}
.portada .portada__bajada {
  font-size: 16px; line-height: 1.55; color: var(--texto-mut);
  max-width: 34ch; margin: 0 auto; text-wrap: pretty;
}
.portada__acciones { grid-area: acciones; margin-top: 22px; }
.portada .botones { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.portada .botones .boton { min-width: min(100%, 300px); }

/* Los tres pasos: icono + frase corta. En el móvil, tres columnas con el
   icono encima; en escritorio, una sola línea. */
.pasos {
  grid-area: pasos; list-style: none; margin: 26px auto 0; padding: 0; max-width: 520px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
}
.pasos li {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font: 500 13px/1.35 var(--fb); color: var(--texto-mut); text-align: center; text-wrap: balance;
}
.pasos__ico {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--gold-wash); color: var(--gold-deep); border: 1px solid var(--gold-tint);
}

/* ── La voz destacada ─────────────────────────────────────────────────
   Una hoja que se levanta del lienzo: «Alguien preguntó» arriba, quién
   responde, y el reproductor (A lo monta sobre `audio[data-audio]`). */
.destacada {
  grid-area: voz; text-align: left; position: relative;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: 24px;
  padding: 20px 18px 8px; margin-top: 18px; box-shadow: var(--shp4);
}
/* `.portada p` (consultorio.css) pisaba todo párrafo de dentro con 17 px,
   color suave y margen: se neutraliza para los de la tarjeta. */
.destacada p { margin: 0; max-width: none; font-size: inherit; color: inherit; }
.destacada .destacada__ceja {
  display: flex; align-items: center; gap: 8px; margin: 0 0 12px;
  font: 700 11px var(--fb); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep);
}
.destacada__punto { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); flex: none; box-shadow: 0 0 0 4px var(--gold-wash); }
.destacada .destacada__pregunta { font: 500 19px/1.35 var(--fd); color: var(--ink); margin: 0 0 14px; text-wrap: pretty; letter-spacing: -.005em; }
.destacada__alguien { display: block; font: 600 13px var(--fb); color: var(--muted); margin-bottom: 4px; letter-spacing: 0; }
.destacada__voz {
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 18px; padding: 14px;
}
.destacada__quien { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.destacada__quien .retrato-p { border: 3px solid var(--surface); outline: 1.5px solid var(--jewel); box-shadow: var(--shp2); }
.destacada__nombre { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.destacada__nombre a { font: 500 17px/1.2 var(--fd); color: var(--ink); display: inline-block; padding: 12px 0; margin: -12px 0; }
.destacada__nombre a:hover { color: var(--gold-deep); }
.destacada__meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font: 600 12.5px var(--fb); color: var(--muted); font-variant-numeric: tabular-nums; }
.destacada__audio audio { width: 100%; display: block; color-scheme: light; }
.destacada .destacada__linea { font: italic 400 15.5px/1.5 var(--fd); color: var(--ink-soft); margin: 12px 0 0; text-wrap: pretty; }
.destacada__mas {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px;
  font: 600 14.5px var(--fb); color: var(--gold-deep); padding: 4px 4px; margin-top: 4px;
}
.destacada__mas:hover { text-decoration: none; }
.destacada__mas .ico { transition: transform .2s var(--facil); }
.destacada__mas:hover .ico { transform: translateX(3px); }

/* ── Las pastillas de tema, con aire ────────────────────────────────── */
.temas-nav { gap: 10px; }
.temas-nav a { background: var(--surface); color: var(--ink-soft); display: inline-flex; align-items: center; min-height: 44px; padding-top: 0; padding-bottom: 0; }
.temas-nav a[aria-current] { background: var(--gold-wash); border-color: var(--gold); color: var(--gold-deep); font-weight: 600; }
.temas-nav a[aria-current] .n { color: var(--gold-deep); }
.temas-nav--portada { margin: 44px 0 0; }
.temas-nav__titulo { flex-basis: 100%; max-width: none; margin: 0 0 4px; }
.temas-nav--tema { margin: 30px 0 0; }
/* En el móvil, los otros temas en UNA fila que se desliza: en tres filas de
   pastillas se comían media pantalla antes de la primera pregunta. */
@media (max-width: 759px) {
  .temas-nav--tema {
    flex-wrap: nowrap; overflow-x: auto; margin: 26px -20px 0; padding: 2px 20px 8px;
    scrollbar-width: none; scroll-padding: 0 20px;
  }
  .temas-nav--tema::-webkit-scrollbar { display: none; }
  .temas-nav--tema a { flex: none; white-space: nowrap; }
}

/* ════════════════════════════════════════════════════════════════════
   2 · EL MURO Y SU TARJETA (diseño 15)
   ════════════════════════════════════════════════════════════════════ */
.muro { gap: 16px; }
.seccion--muro { margin-top: 48px; }

.pregunta-tarjeta {
  display: flex; flex-direction: column; align-items: stretch;
  padding: 32px 20px 16px; box-shadow: var(--shp3);
  transition: transform .22s var(--facil), box-shadow .22s var(--facil), border-color .22s;
}
.pregunta-tarjeta:hover { border-color: var(--line); }
.pregunta-tarjeta:focus-visible { box-shadow: var(--shp5); border-radius: var(--arco); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .pregunta-tarjeta:hover { transform: translateY(-2px); box-shadow: var(--shp5); }
}
.pt-tema {
  font: 700 11px var(--fb); letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-deep); margin: 0 0 8px;
}
.pregunta-tarjeta .texto { font: 500 19px/1.33 var(--fd); margin: 0 0 14px; letter-spacing: -.005em; }
.pregunta-tarjeta .texto::before { content: '«'; }
.pregunta-tarjeta .texto::after { content: '»'; }

/* La fila de la voz: quién, el sello, cuánto dura y la señal de play. */
.pt-voz {
  display: flex; align-items: center; gap: 10px; margin: 0 0 14px;
  padding: 9px 9px 9px 10px; border-radius: 16px;
  background: var(--paper-2); border: 1px solid var(--line);
}
.pt-voz .retrato-p { font-size: 14px; }
.pt-voz__quien { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; min-width: 0; flex: 1; }
.pt-voz__nombre { font: 600 14px/1.25 var(--fb); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-voz__dur { font: 700 12.5px var(--fb); color: var(--ink-soft); font-variant-numeric: tabular-nums; letter-spacing: .03em; }
.pt-play {
  width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--gold); color: var(--ink-on-color); padding-left: 2px; box-shadow: var(--shp2);
}
.pregunta-tarjeta:hover .pt-play { background: var(--gold-deep); }
.pregunta-tarjeta .pie-t { margin-top: auto; gap: 10px; }
.pt-ayudo { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-soft); font-weight: 600; font-variant-numeric: tabular-nums; }
.pt-ayudo .ico { color: var(--gold-deep); }
.pt-cuando { margin-left: auto; }

/* ════════════════════════════════════════════════════════════════════
   3 · QUIÉNES RESPONDEN, ¿Y LO TUYO? Y EL PUENTE
   ════════════════════════════════════════════════════════════════════ */
.quienes { margin-top: 56px; }
.quienes__fila {
  list-style: none; margin: 0 -20px; padding: 6px 20px 14px;
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 20px;
  scrollbar-width: none;
}
.quienes__fila::-webkit-scrollbar { display: none; }
.quienes__fila li { flex: none; width: 156px; scroll-snap-align: start; }
/* `.quienes__fila a` (consultorio.css, 96 px de ancho) pisaba la tarjeta. */
.quienes__fila .quien { width: auto; font: inherit; gap: 6px; }
.quien {
  display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%;
  background: var(--surface); border: 1px solid var(--line); border-radius: 22px;
  padding: 20px 12px 16px; text-align: center; color: var(--ink); box-shadow: var(--shp2);
  transition: transform .22s var(--facil), box-shadow .22s var(--facil);
}
.quien:hover { text-decoration: none; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .quien:hover { transform: translateY(-2px); box-shadow: var(--shp4); }
}
.quien__cara { border: 3px solid var(--surface); outline: 1.5px solid var(--jewel); margin-bottom: 6px; font-size: 24px; }
.quien__nombre { font: 500 17px/1.2 var(--fd); color: var(--ink); }
.quien__dato { font-size: 12.5px; line-height: 1.35; color: var(--muted); max-width: 100%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 2.7em; }
.quien .sello-tp { margin-top: 4px; }

.cierre { display: grid; gap: 16px; }
.cierre .bloque-tuyo, .cierre .puente { margin: 0; max-width: none; }
.bloque-tuyo h2 { font: 500 30px/1.12 var(--fd); letter-spacing: -.02em; color: var(--texto); margin: 0 0 10px; }
.bloque-tuyo p { max-width: 52ch; }
.puente h2.titulo { font: 500 21px/1.2 var(--fd); color: var(--texto); margin: 0 0 8px; letter-spacing: -.01em; }
.puente .boton .ico { color: currentColor; }
.bloque-tuyo--ancho { max-width: none; }
.bloque-tuyo--ancho h2 { font-size: 26px; }

/* ════════════════════════════════════════════════════════════════════
   4 · LA PÁGINA DE UN TEMA
   ════════════════════════════════════════════════════════════════════ */
.tema-cab { display: grid; gap: 22px; }
.tema-cab h1 { font: 500 48px/1 var(--fd); letter-spacing: -.03em; color: var(--texto); margin: 0 0 14px; }
.tema-cab__intro { font-size: 17px; line-height: 1.6; color: var(--texto-mut); margin: 0; max-width: 60ch; text-wrap: pretty; }
.tema-cab__cifras { display: flex; gap: 10px; margin: 0; }
.tema-cab__cifras div {
  display: flex; flex-direction: column-reverse; justify-content: flex-end;
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  padding: 14px 18px; min-width: 120px; box-shadow: var(--shp1);
}
.tema-cab__cifras dd { margin: 0; font: 500 32px/1 var(--fd); color: var(--ink); font-variant-numeric: tabular-nums; }
.tema-cab__cifras dt { margin: 6px 0 0; font: 700 10.5px var(--fb); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.tema-cab__cifras .sage { background: var(--sage-tint); border-color: var(--sage-line); }
.tema-cab__cifras .sage dd { color: var(--sage-deep); }
.tema-cab__cifras .sage dt { color: var(--sage-deep); }

/* ════════════════════════════════════════════════════════════════════
   5 · BUSCAR (diseño 16)
   ════════════════════════════════════════════════════════════════════ */
.buscar-cab h1 { font: 500 38px/1.05 var(--fd); letter-spacing: -.025em; color: var(--texto); margin: 4px 0 18px; }
.buscador { max-width: 760px; margin: 0 0 30px; align-items: stretch; }
.buscador__campo { flex: 1; min-width: 0; margin: 0; position: relative; display: flex; align-items: center; font-weight: 400; }
.buscador__campo .ico { position: absolute; left: 18px; color: var(--muted); pointer-events: none; }
.buscador input[type='search'] {
  width: 100%; min-height: 54px; padding: 14px 18px 14px 48px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); box-shadow: var(--shp2);
}
.buscador input[type='search']::placeholder { color: var(--muted); opacity: 1; }
.buscador .boton { min-height: 54px; padding: 0 22px; }
.buscar-bloque { margin-top: 34px; }
.sugerencias { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sugerencias a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink-soft); font-size: 14.5px;
}
.sugerencias a:hover { border-color: var(--gold); color: var(--gold-deep); text-decoration: none; }
.temas-tarjetas { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
.temas-tarjetas a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'nombre ir' 'que ir';
  align-items: center; column-gap: 12px; row-gap: 2px; min-height: 64px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px 14px 18px;
  color: var(--ink); box-shadow: var(--shp1); transition: border-color .2s, box-shadow .2s;
}
.temas-tarjetas a:hover { text-decoration: none; border-color: var(--gold-tint); box-shadow: var(--shp3); }
.temas-tarjetas__nombre { grid-area: nombre; font: 500 18px var(--fd); display: flex; align-items: baseline; gap: 8px; }
.temas-tarjetas__nombre .n { font: 700 11.5px var(--fb); color: var(--muted); font-variant-numeric: tabular-nums; }
.temas-tarjetas__que { grid-area: que; font-size: 13.5px; color: var(--muted); line-height: 1.4; }
.temas-tarjetas__ir { grid-area: ir; color: var(--gold-deep); }
.buscar-otra { margin-top: 28px; color: var(--texto-mut); }
.buscar-otra a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.vacio--buscar { padding: 36px 20px 8px; }

/* ════════════════════════════════════════════════════════════════════
   6 · LA FICHA (diseño 07) Y EL DIRECTORIO (08)
   ════════════════════════════════════════════════════════════════════ */
.ficha-cab {
  text-align: center; padding: 26px 20px 40px; margin: 0 -20px;
  background: var(--degradado-ficha);
  border-bottom-left-radius: 50% 18%; border-bottom-right-radius: 50% 18%;
}
/* El retrato del benchmark: 4 px de papel y un filete joya alrededor. */
.ficha-cab__retrato {
  border: 4px solid var(--surface); outline: 1.5px solid var(--jewel); outline-offset: 0;
  box-shadow: var(--shp4); margin: 0 auto 18px; display: block; font-size: 52px;
}
span.ficha-cab__retrato { display: grid; }
.ficha-cab h1 { font: 500 36px/1.08 var(--fd); letter-spacing: -.025em; color: var(--texto); margin: 0; text-wrap: balance; }
.ficha-cab__cargo { color: var(--texto-mut); font-size: 15.5px; margin: 10px auto 16px; }
.ficha-cab__sello { margin: 0; }
.sello-grande {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px;
  border: 1.5px solid var(--jewel); background: var(--surface); color: var(--jewel-deep);
  font: 700 11.5px var(--fb); letter-spacing: .12em; text-transform: uppercase;
}
.ficha-cab__comprobada { font-size: 13.5px; color: var(--texto-mut); margin: 12px auto 0; }
.ficha-cab__comprobada a { color: var(--enlace); text-decoration: underline; text-underline-offset: 3px; display: inline-block; padding: 12px 0; margin-top: -4px; }

.ficha-cuerpo { display: grid; gap: 28px; margin-top: 24px; }
.ficha-hoja {
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 24px;
  padding: 26px 20px 20px; box-shadow: var(--shp3); align-self: start;
}
.ficha-bio { margin: 0 0 18px; }
.ficha-bio p { font: italic 400 19px/1.5 var(--fd); color: var(--ink); text-align: center; margin: 0 auto; max-width: 40ch; text-wrap: pretty; }
.ficha-bio p::before { content: '«'; }
.ficha-bio p::after { content: '»'; }
.ficha-temas { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ficha-temas a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px;
  background: var(--gold-wash); border: 1px solid var(--gold-tint); color: var(--gold-deep); font: 600 14px var(--fb);
}
.ficha-temas a:hover { border-color: var(--gold); text-decoration: none; }
.tiles--ficha { display: flex; gap: 10px; margin: 0; }
.tiles--ficha div {
  flex: 1; display: flex; flex-direction: column-reverse; justify-content: flex-end; align-items: center;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 16px; padding: 14px 6px; text-align: center;
}
.tiles--ficha dd { margin: 0; font: 500 28px/1 var(--fd); color: var(--ink); font-variant-numeric: tabular-nums; }
.tiles--ficha dt { margin: 6px 0 0; font: 700 10.5px var(--fb); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.tiles--ficha .sage { background: var(--sage-tint); border-color: var(--sage-line); }
.tiles--ficha .sage dd, .tiles--ficha .sage dt { color: var(--sage-deep); }

.ficha-voces h2 { font: 500 30px/1.1 var(--fd); letter-spacing: -.02em; color: var(--texto); margin: 0 0 16px; }
.lista-voces { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.voz-fila {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
  padding: 16px 18px 14px 16px; color: var(--ink); box-shadow: var(--shp2);
  transition: transform .22s var(--facil), box-shadow .22s var(--facil);
}
.voz-fila:hover { text-decoration: none; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .voz-fila:hover { transform: translateY(-2px); box-shadow: var(--shp4); }
}
.voz-fila__play {
  width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--gold); color: var(--ink-on-color); padding-left: 2px; margin-top: 2px; box-shadow: var(--shp2);
}
.voz-fila__cuerpo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.voz-fila__a { font-size: 13.5px; color: var(--muted); line-height: 1.4; }
.voz-fila__linea { font: 500 17.5px/1.38 var(--fd); color: var(--ink); text-wrap: pretty; }
.voz-fila__pie { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.puente--ficha { margin-top: 28px; max-width: none; }

/* El directorio */
.dir-cab { display: grid; gap: 24px; margin-bottom: 30px; }
.dir-cab h1 { font: 500 44px/1.02 var(--fd); letter-spacing: -.03em; color: var(--texto); margin: 0 0 14px; }
.dir-cab__intro { font-size: 17px; line-height: 1.6; color: var(--texto-mut); margin: 0; max-width: 52ch; }
.garantias {
  list-style: none; margin: 0; padding: 18px; display: grid; gap: 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shp1);
}
.garantias li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; line-height: 1.45; color: var(--ink-soft); }
.garantias .ico { color: var(--jewel-deep); margin-top: 1px; }
.garantias b { color: var(--ink); font-weight: 600; }
.rejilla--dir { list-style: none; margin: 0; padding: 0; gap: 16px; }
.ficha-dir {
  display: flex; flex-direction: column; gap: 14px; height: 100%;
  background: var(--surface); border: 1px solid var(--line); border-radius: 22px;
  padding: 20px; color: var(--ink); box-shadow: var(--shp3);
  transition: transform .22s var(--facil), box-shadow .22s var(--facil);
}
.ficha-dir:hover { text-decoration: none; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .ficha-dir:hover { transform: translateY(-2px); box-shadow: var(--shp5); }
}
.ficha-dir__cab { display: flex; gap: 16px; align-items: center; }
.ficha-dir__cara { border: 3px solid var(--surface); outline: 1.5px solid var(--jewel); box-shadow: var(--shp2); font-size: 28px; }
.ficha-dir__quien { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ficha-dir__nombre { font: 500 19px/1.2 var(--fd); color: var(--ink); }
.ficha-dir__dato { font-size: 13px; color: var(--muted); line-height: 1.35; }
.ficha-dir__bio { font: italic 400 15.5px/1.5 var(--fd); color: var(--ink-soft); text-wrap: pretty; }
.ficha-dir__pie { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.ficha-dir__temas { display: flex; flex-wrap: wrap; gap: 6px; }
.ficha-dir__voces { font: 700 12.5px var(--fb); color: var(--sage-deep); }

/* ════════════════════════════════════════════════════════════════════
   TABLET · ≥600 / ≥760
   ════════════════════════════════════════════════════════════════════ */
@media (min-width: 600px) {
  .temas-tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 760px) {
  .portada__arco { padding: 56px 40px 8px; border-radius: 46% 46% 0 0 / 30% 30% 0 0; }
  .portada .icono { display: block; width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 15px; box-shadow: var(--icono-sombra); }
  .portada h1 { font-size: 60px; max-width: 13ch; }
  .portada .portada__bajada { font-size: 17.5px; max-width: 44ch; }
  .destacada { max-width: 560px; margin: 24px auto 0; padding: 24px 24px 10px; }
  .seccion__cab h2 { font-size: 36px; }
  .tema-cab h1 { font-size: 60px; }
  .ficha-cab h1 { font-size: 44px; }
  .dir-cab h1 { font-size: 56px; }
  .buscar-cab h1 { font-size: 48px; }
  .cierre { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: stretch; gap: 20px; }
  .bloque-tuyo--ancho { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 30px 32px; }
  .bloque-tuyo--ancho p { margin-bottom: 0; }
  .bloque-tuyo--ancho .boton { flex: none; }
  .seccion__cab--fila { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
  .muro { gap: 20px; }
}

/* ════════════════════════════════════════════════════════════════════
   ESCRITORIO · ≥1020 — jerarquía editorial, no un móvil estirado
   ════════════════════════════════════════════════════════════════════ */
@media (min-width: 1020px) {
  main { padding-top: 36px; }

  /* La portada en dos columnas: el arco con el titular a la izquierda y la
     voz que suena a la derecha. 76 px de titular frente a 11 px de lo más
     pequeño: el ratio 7:1 que pide el piso para una portada. */
  .portada--con-voz {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    grid-template-areas: 'arco voz' 'acciones voz' 'pasos pasos';
    column-gap: 64px; align-items: center;
  }
  /* El arco abraza toda la columna izquierda (titular + acciones): sus patas
     siguen bajando por detrás de los botones, como en el diseño. */
  .portada--con-voz::before {
    content: ''; grid-column: 1; grid-row: 1 / 3; align-self: stretch; pointer-events: none;
    border: 1.5px solid var(--arc-line); border-bottom: none;
    border-radius: 50% 50% 0 0 / 34% 34% 0 0;
    background: linear-gradient(180deg, var(--arc-wash), transparent 85%);
  }
  .portada--con-voz .portada__arco { border: 0; background: none; padding: 72px 44px 0; align-self: end; }
  .portada--con-voz .portada__acciones { padding: 0 32px 28px; align-self: start; margin-top: 28px; }
  .portada h1 { font-size: 76px; line-height: 1; max-width: 11ch; margin-bottom: 20px; }
  .portada:not(.portada--con-voz) { max-width: 820px; }
  .portada:not(.portada--con-voz) h1 { max-width: 14ch; }
  .portada .portada__bajada { font-size: 18px; max-width: 40ch; }
  .destacada { max-width: none; margin: 0; padding: 28px 28px 12px; box-shadow: var(--shp5); border-radius: 28px; }
  .destacada .destacada__pregunta { font-size: 22px; }
  .destacada__voz { padding: 16px; }
  /* Los tres pasos, EN UNA LÍNEA, como una banda bajo la primera pantalla. */
  .pasos {
    grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; max-width: none; width: 100%;
    margin: 0; padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  }
  .pasos li { flex-direction: row; justify-content: center; text-align: left; gap: 12px; font-size: 15px; color: var(--texto); }
  .pasos li + li { border-left: 1px solid var(--line); }
  .pasos__ico { width: 40px; height: 40px; }
  .portada:not(.portada--con-voz) .pasos { margin-top: 36px; }

  .temas-nav--portada { margin-top: 64px; }
  .seccion--muro { margin-top: 64px; }
  .seccion--muro + .seccion--muro { margin-top: 80px; }
  .seccion__cab h2 { font-size: 40px; }
  .muro { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }

  .quienes { margin-top: 96px; }
  .quienes__fila {
    margin: 0; padding: 6px 0 0; overflow: visible;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 16px;
  }
  .quienes__fila li { width: auto; }
  .quien { padding: 26px 16px 20px; }

  .bloque-tuyo { padding: 36px 36px 34px; }
  .bloque-tuyo h2 { font-size: 36px; }
  .cierre .puente { padding: 32px; display: flex; flex-direction: column; }
  .cierre .puente .boton { align-self: flex-start; margin-top: auto; }

  /* Tema: titular grande a la izquierda, las cifras a la derecha. */
  .tema-cab { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 48px; }
  .tema-cab h1 { font-size: 76px; }
  .tema-cab__intro { font-size: 18px; }
  .tema-cab__cifras div { min-width: 150px; padding: 18px 22px; }
  .tema-cab__cifras dd { font-size: 40px; }

  /* Buscar */
  .buscar-cab h1 { font-size: 60px; }
  .temas-tarjetas { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* Ficha: la cabecera en horizontal y, debajo, la hoja fija a la izquierda y
     sus voces a la derecha (lo principal). */
  .ficha-cab {
    display: flex; align-items: center; gap: 44px; text-align: left; margin: 0;
    padding: 44px 56px; border-radius: 32px; border: 1px solid var(--line);
    background: linear-gradient(120deg, var(--gold-wash), var(--paper-2) 70%);
  }
  .ficha-cab__retrato { width: 188px !important; height: 188px !important; margin: 0; }
  .ficha-cab h1 { font-size: 56px; }
  .ficha-cab__cargo { margin-left: 0; font-size: 17px; }
  .ficha-cab__comprobada { margin-left: 0; }
  .ficha-cuerpo { grid-template-columns: 380px minmax(0, 1fr); gap: 48px; margin-top: 40px; align-items: start; }
  .ficha-hoja { position: sticky; top: 92px; padding: 30px 26px 24px; }
  .ficha-bio p { text-align: left; font-size: 19px; }
  .ficha-temas { justify-content: flex-start; }
  .ficha-voces h2 { font-size: 36px; }

  /* Directorio */
  .dir-cab { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; gap: 56px; margin-bottom: 40px; }
  .dir-cab h1 { font-size: 72px; }
  .garantias { padding: 24px; }
  .rejilla--dir { gap: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .pregunta-tarjeta, .quien, .voz-fila, .ficha-dir { transition: none; }
}


/* ════════════════════════════════════════════════════════════════════
   CUENTAS Y PSICÓLOGOS — preguntar, entrar, rincón, alta, grabar, errores (6-oct-2026)
   ════════════════════════════════════════════════════════════════════ */
/* ============================================================
   cuentas.css — PREGUNTAR, ENTRAR, EL RINCÓN Y EL LADO DEL PSICÓLOGO.
   6-oct-2026, agente C. Se funde en consultorio.css al terminar.

   Las reglas de la casa, aquí también:
   · El color de marca es para FONDOS; el TEXTO va en `-deep`. Sobre un fondo
     de color, `--ink-on-color`.
   · Los bordes de lo que se TOCA van en `--line-strong` (3,28:1 sobre papel);
     las tarjetas, que no se tocan como control, siguen en `--line`.
   · Sombras tintadas de la escalera (`--shp1..5`), nunca negras.
   · Todo lo que se toca mide 44 px o más.
   · Se mueve solo con `prefers-reduced-motion: no-preference` (la regla
     global de consultorio.css apaga animaciones; aquí no se añade ninguna
     que dependa de verse para entenderse).
   ============================================================ */

/* ── El lienzo de estas pantallas ─────────────────────────────────────
   Antes iban dentro de una «hoja» con borde que en el móvil se comía 40 px de
   ancho. El diseño (marcos 03, 13, 14) las pinta directamente sobre el papel,
   en una columna de lectura. */
.cuentas { max-width: 680px; margin: 0 auto; }
.cuentas--estrecha { max-width: 580px; }
.cuentas__titulo { font: 500 36px/1.08 var(--fd); letter-spacing: -.02em; color: var(--texto); margin: 0 0 14px; text-wrap: balance; }
.cuentas__bajada { font-size: 16.5px; margin: 0 0 6px; }
.cuentas__accion { margin: 26px 0 8px; }
.cuentas .ceja { margin-bottom: 12px; color: var(--joya-texto); }
.centro { text-align: center; margin-left: auto; margin-right: auto; }
@media (min-width: 760px) {
  .cuentas__titulo { font-size: 46px; }
}

/* Campos con borde que se VE (WCAG 1.4.11) y foco cálido. */
.cuentas input[type='text'], .cuentas input[type='email'], .cuentas input[type='number'],
.cuentas input[type='search'], .cuentas textarea, .fallo input[type='search'] {
  border-color: var(--line-strong); background: var(--surface); box-shadow: var(--shp1);
  max-width: none;
}
.cuentas input[aria-invalid='true'], .cuentas textarea[aria-invalid='true'] { border-color: var(--danger-deep); box-shadow: 0 0 0 3px var(--danger-tint); }
.cuentas label { color: var(--ink-soft); }
.opcional { font-weight: 400; color: var(--muted); }

/* ── Botones de estas pantallas ─────────────────────────────────────── */
.boton--ancho { width: 100%; }
:is(.cuentas, .captacion, .fallo) .boton--grande { min-height: 54px; font-size: 16px; padding: 16px 26px; box-shadow: var(--shp3); }
:is(.cuentas, .captacion, .fallo) .boton--grande:disabled { box-shadow: none; }
.cuentas .boton:disabled, .cuentas .boton[aria-busy='true'] { cursor: not-allowed; }
/* El botón vivo de «Escribe un poco más» (diseño 03): apagado pero legible,
   en el tinte de la marca. Desactivado no exige contraste; aun así da 3,98:1. */
.cuentas .boton:disabled { background: var(--gold-tint); color: var(--gold-deep); }
:is(.cuentas, .fallo, .hoja-modal) .boton--calmo { border-color: var(--line-strong); min-height: 48px; }
:is(.cuentas, .fallo, .hoja-modal) .boton--calmo:hover { background: var(--hueco); border-color: var(--texto-mut); }
.cuentas .boton--calmo:disabled { background: transparent; color: var(--muted); }
.boton--google:disabled, .cuentas .boton--google:disabled { background: #fff; color: #5F6368; }
.boton--google { min-height: 52px; font-size: 16px; box-shadow: var(--shp1); border-color: #C4C7CC; }
.botones-fila { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 20px; }
.botones--columna { flex-direction: column; }
.botones--columna > * { width: 100%; max-width: none; }

/* Un enlace que es un botón de verdad (Reenviar, Usar otro correo, Borrar y
   grabar de nuevo): 44 px de alto aunque se lea como enlace. */
.enlace-boton {
  background: none; border: 0; padding: 12px 4px; min-height: 44px; cursor: pointer;
  font: 600 14px var(--fb); color: var(--enlace); text-decoration: underline; text-underline-offset: 3px;
}
.enlace-boton:disabled { color: var(--muted); text-decoration: none; cursor: default; }
.cuentas .enlace-flojo { min-height: 44px; padding: 12px 4px; }
.parecidas .enlace-flecha { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; }

/* ── La tarjeta «Preguntas como…» (diseño 03) ────────────────────────── */
.yo-tarjeta {
  display: flex; align-items: center; gap: 12px; margin: 6px 0 18px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  padding: 14px 16px; box-shadow: var(--shp3);
}
.yo-tarjeta__inicial {
  width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--gold-wash); border: 1px solid var(--gold-tint); color: var(--gold-deep);
  font: 500 18px var(--fd);
}
.yo-tarjeta__inicial--mini { width: 26px; height: 26px; font-size: 13px; }
.yo-tarjeta__texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.yo-tarjeta__texto b { font: 600 15px var(--fb); color: var(--ink); }
.yo-tarjeta__texto > span { font-size: 13px; color: var(--ink-soft); line-height: 1.45; }
.yo-tarjeta__apodo { font: 600 16px var(--fd); color: var(--gold-deep); }
.yo-tarjeta__cambiar { font: 700 14px var(--fb); color: var(--gold-deep); padding: 12px 6px; min-height: 44px; display: inline-flex; align-items: center; }
.yo-tarjeta--grande .yo-tarjeta__inicial { width: 52px; height: 52px; font-size: 22px; }

/* ── El campo grande ─────────────────────────────────────────────────── */
.campo-grande {
  min-height: 200px; font: 400 19px/1.5 var(--fd); color: var(--ink);
  border-radius: 18px; padding: 18px 18px; box-shadow: var(--shp3);
}
.campo-grande::placeholder { color: var(--muted); opacity: 1; }
@media (min-width: 760px) { .campo-grande { min-height: 230px; font-size: 20px; } }
.bajo-campo {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-size: 13px; color: var(--muted); margin: 8px 2px 0;
}
.contador-vivo { font-variant-numeric: tabular-nums; }

/* «No pongas nombres…» pegado al campo: se lee mientras escribe. */
.aviso-datos {
  display: flex; gap: 10px; align-items: flex-start; margin: 16px 0 12px;
  font-size: 14px; color: var(--ink-soft); line-height: 1.5;
}
.aviso-datos .ico { color: var(--gold-deep); margin-top: 2px; }
.aviso-datos strong { color: var(--ink); }

/* Promesas y límites (Doctoralia): tres sí y dos no, sin plazos. */
.promesas { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 6px; padding: 0; }
.promesas li { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--verde-texto); font-weight: 600; }
.promesas .ico { color: var(--sage-deep); }
.limites { font-size: 13px; color: var(--muted); margin: 0 0 4px; }

/* Los temas. Un radiogroup: se marca con `aria-checked`. */
.temas-elige { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 26px 0 4px; }
.temas-elige__titulo { font: 700 11px var(--fb); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin: 22px 0 8px; }
.temas-elige .temas-elige__titulo { margin: 0; }
.temas-elige .ayuda { margin: 0; }
.chips--fuertes button {
  min-height: 44px; padding: 10px 17px; border-color: var(--line-strong); color: var(--ink-soft);
  box-shadow: var(--shp1); transition: background .15s var(--facil), border-color .15s var(--facil);
}
.chips--fuertes button:hover { border-color: var(--gold-deep); }
.chips button[aria-checked='true'] { background: var(--gold-wash); border-color: var(--gold-deep); color: var(--gold-deep); font-weight: 700; }
.chips button[aria-checked='true']::before, .chips--fuertes button[aria-pressed='true']::before {
  content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--gold-deep); margin-right: 8px; vertical-align: .1em;
}
.chips--fuertes button[aria-pressed='true'] { border-color: var(--gold-deep); font-weight: 700; }

/* ── Mensajes de estas pantallas ────────────────────────────────────── */
.cuentas .mensaje { max-width: none; border: 1px solid transparent; }
.cuentas .mensaje--mal { border-color: rgba(168, 63, 50, .28); }
.cuentas .mensaje--bien { border-color: var(--sage-line); }
.cuentas .mensaje--ojo { border-color: var(--gold-tint); }
.nota-salvia {
  background: var(--sage-tint); border: 1px solid var(--sage-line); color: var(--ink-soft);
  border-radius: 14px; padding: 13px 16px; font-size: 14px; margin: 16px 0 0;
}

/* ── El sello del arco (marcos 04 y 25): una cúpula con su icono ──────── */
.sello-arco {
  width: 64px; height: 76px; border-radius: var(--arco); display: grid; place-items: center;
  background: var(--gold-wash); border: 1px solid var(--gold-tint); color: var(--gold-deep);
  margin: 0 0 22px; box-shadow: var(--shp2);
}
.sello-arco--calmo { background: var(--paper-2); border-color: var(--line); color: var(--ink-soft); }
.sello-arco .puntos { display: flex; gap: 5px; }
.sello-arco .puntos i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .7; }

/* ── 04b · Publicada ─────────────────────────────────────────────────── */
.publicada h1 { font: 500 38px/1.1 var(--fd); letter-spacing: -.02em; margin: 0 0 12px; color: var(--texto); }
.vista-previa {
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 18px 18px 14px;
  box-shadow: var(--shp4); margin: 22px 0 20px;
}
.vista-previa__cab { display: flex; align-items: center; gap: 8px; font-size: 13.5px; margin-bottom: 10px; color: var(--ink); }
.vista-previa__tema { margin-left: auto; font: 700 11px var(--fb); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep); }
.vista-previa__texto { font: 500 20px/1.32 var(--fd); color: var(--ink); margin: 0 0 12px; overflow-wrap: anywhere; }
.vista-previa__pie { font-size: 13px; color: var(--muted); margin: 0; display: flex; align-items: center; gap: 8px; }
.vista-previa__pie .punto { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.publicada__botones { display: grid; gap: 10px; margin: 6px 0 10px; }

.parecidas { margin-top: 40px; border-top: 1px solid var(--line); padding-top: 26px; }
.parecidas h2 { font: 500 22px/1.25 var(--fd); margin: 0 0 14px; color: var(--texto); }
.parecidas__lista { display: grid; gap: 10px; margin-bottom: 8px; }
.parecida {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink); box-shadow: var(--shp2);
  text-decoration: none; min-height: 56px;
}
.parecida:hover { border-color: var(--gold-tint); text-decoration: none; box-shadow: var(--shp3); }
.parecida__play {
  width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--gold-deep); color: var(--ink-on-color);
}
.parecida__play .ico { margin-left: 2px; }
.parecida__texto { font: 500 16px/1.35 var(--fd); }

/* ── 03b · Crisis: una tarjeta tranquila ─────────────────────────────
   Sin rojo de alarma (referentes §3.2). Crema, la frase importante resaltada
   en terracota claro, y botones de llamar grandes. */
.crisis-tarjeta {
  background: var(--surface); border: 1px solid var(--line); border-radius: 24px;
  padding: 26px 20px 22px; box-shadow: var(--shp4);
}
.crisis-tarjeta h1 { font: 500 30px/1.15 var(--fd); color: var(--ink); margin: 0 0 12px; font-variation-settings: 'WONK' 0; text-wrap: balance; }
.crisis-tarjeta > p { color: var(--ink-soft); font-size: 16px; }
.crisis-tarjeta mark { background: var(--gold-wash); color: var(--ink); padding: 1px 4px; border-radius: 4px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.crisis-tarjeta__nota { font-size: 14px !important; color: var(--ink-soft); margin: 12px 0 0; }
@media (min-width: 760px) { .crisis-tarjeta { padding: 34px 34px 28px; } .crisis-tarjeta h1 { font-size: 36px; } }

.lineas-ayuda { list-style: none; padding: 0; margin: 20px 0 6px; display: grid; gap: 10px; }
.linea-ayuda {
  display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 12px 14px 12px 12px;
  border-radius: 18px; background: var(--paper-2); border: 1px solid var(--line-strong);
  color: var(--ink); text-decoration: none;
}
.linea-ayuda:hover { text-decoration: none; border-color: var(--gold-deep); background: var(--gold-wash); }
.linea-ayuda__ico {
  width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--sage-tint); color: var(--sage-deep);
}
.linea-ayuda__texto { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.35; }
.linea-ayuda__texto b { font: 600 18px var(--fd); }
.linea-ayuda__texto span { font-size: 13.5px; color: var(--ink-soft); }
.linea-ayuda__accion {
  flex: none; background: var(--gold-deep); color: var(--ink-on-color); font: 700 14px var(--fb);
  padding: 11px 16px; border-radius: 999px; min-height: 44px; display: inline-flex; align-items: center;
}

/* ── Entrar ──────────────────────────────────────────────────────────── */
.nota-anonima { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; color: var(--ink-soft); margin: 0 0 6px; }
.nota-anonima .ico { color: var(--gold-deep); margin-top: 3px; }
.separador { display: flex; align-items: center; gap: 12px; margin: 26px 0 6px; font: 700 11px var(--fb); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.separador::before, .separador::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.campo-codigo {
  font: 600 28px var(--fb) !important; letter-spacing: .4em; text-align: center; max-width: 280px !important;
  padding: 14px 10px 14px 22px !important; font-variant-numeric: tabular-nums;
}
.codigo-acciones { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin: 6px 0 0; }
.ideas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 0; }
.ideas .ayuda { margin: 0 4px 0 0; }
.idea {
  min-height: 44px; padding: 8px 15px; border-radius: 999px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink); font: 500 15px var(--fd);
}
.idea:hover { border-color: var(--gold-deep); background: var(--gold-wash); }
.entrar--psi { margin-top: 48px; scroll-margin-top: 80px; }
.entrar--psi #entrada { border-top: 1px solid var(--line); padding-top: 34px; }

/* «No pudimos comprobar tu sesión» */
.sin-conexion { padding: 10px 0 20px; }
.sin-conexion h1 { font: 500 32px/1.12 var(--fd); margin: 0 0 12px; }

/* ── Captación de psicólogos (marco 12) ──────────────────────────────
   La banda oscura con el arco: el único sitio del consultorio en carbón, y a
   propósito — marca «esto es para ti, que respondes», distinto del muro. */
.captacion { max-width: 760px; margin: 0 auto; }
.banda-psi {
  position: relative; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 90% at 50% 0%, var(--carbon-3), var(--carbon-2) 60%, var(--carbon));
  color: var(--crema); margin: -28px -20px 0; padding: 70px 22px 40px;
}
.banda-psi .ceja { color: var(--jewel); margin-bottom: 16px; }
.banda-psi .ceja::before { background: var(--jewel); }
.banda-psi h1 { font: 500 38px/1.08 var(--fd); letter-spacing: -.02em; color: var(--crema); margin: 0; text-wrap: balance; max-width: 18ch; }
.banda-psi__arco {
  position: absolute; z-index: -1; width: 260px; height: 330px; right: -70px; top: -40px;
  border: 1px solid rgba(184, 146, 74, .32); border-radius: var(--arco); background: rgba(184, 146, 74, .05);
}
.banda-psi__arco--2 { width: 180px; height: 230px; right: -20px; top: 30px; border-color: rgba(184, 146, 74, .2); background: none; }
.captacion__bajada { font-size: 17px; color: var(--ink-soft); margin: 26px 0 8px; max-width: 58ch; }
.beneficios { list-style: none; padding: 0; margin: 18px 0 0; }
.beneficios li { display: flex; gap: 16px; padding: 18px 0; border-top: 1px solid var(--line); }
.beneficios li:last-child { border-bottom: 1px solid var(--line); }
.beneficios__n { font: 700 12px var(--fb); letter-spacing: .12em; color: var(--joya-texto); padding-top: 6px; min-width: 22px; }
.beneficios h2 { font: 500 21px/1.25 var(--fd); color: var(--texto); margin: 0 0 4px; }
.beneficios p { font-size: 15px; color: var(--ink-soft); margin: 0; }
.pedimos { display: grid; gap: 12px; margin: 24px 0 0; }
.pedimos__caja { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; box-shadow: var(--shp2); }
.pedimos__caja p { font-size: 15px; color: var(--ink-soft); margin: 0; }
.pedimos__caja strong { color: var(--ink); }
.pedimos__titulo { display: flex; align-items: center; gap: 8px; font: 700 11px var(--fb) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--joya-texto) !important; margin: 0 0 8px !important; }
.pedimos__caja--ley { background: var(--sage-tint); border-color: var(--sage-line); }
.pedimos__caja--ley .pedimos__titulo { color: var(--sage-deep) !important; }
.captacion__cta { margin: 26px 0 0; }
.captacion__cta .boton { width: 100%; }
.captacion__cta .ayuda { margin-top: 12px; }
@media (min-width: 760px) {
  .banda-psi { margin: 0; border-radius: 28px; padding: 90px 56px 56px; }
  .banda-psi h1 { font-size: 54px; }
  .banda-psi__arco { width: 380px; height: 480px; right: -60px; top: -60px; }
  .banda-psi__arco--2 { width: 260px; height: 330px; right: 10px; top: 40px; }
  .pedimos { grid-template-columns: 1fr 1fr; }
  .captacion__cta .boton { width: auto; }
}

/* ── El alta en tres pasos (marco 18) ────────────────────────────────── */
.alta { padding-top: 4px; }
.alta-pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0 0 22px; }
.alta-pasos__seg { height: 4px; border-radius: 4px; background: var(--line); transition: background .25s var(--facil); }
.alta-pasos__seg.hecho { background: var(--gold); }
.paso { border: 0; margin: 0; padding: 0; min-width: 0; }
.alta-pasos-nav { display: flex; gap: 10px; margin: 28px 0 8px; }
.alta-pasos-nav .boton--grande { flex: 1; }
.alta-pasos-nav #atras { flex: none; }

/* La subida bonita: el input real va dentro, escondido con `.vh`. */
.subida {
  display: flex; align-items: center; gap: 14px; margin: 0; padding: 16px; cursor: pointer;
  border: 1.5px dashed var(--line-strong); border-radius: 16px; background: var(--paper-2);
  transition: border-color .15s var(--facil), background .15s var(--facil);
}
.subida:hover { border-color: var(--gold-deep); background: var(--gold-wash); }
.subida:focus-within { outline: 2px solid var(--gold-deep); outline-offset: 3px; }
.subida.lista { border-style: solid; border-color: var(--sage); background: var(--surface); }
.subida.pesada { border-color: var(--danger-deep); background: var(--danger-tint); }
.subida__vista {
  width: 56px; height: 56px; flex: none; border-radius: 12px; overflow: hidden; display: grid; place-items: center;
  background: var(--gold-wash); border: 1px solid var(--gold-tint); color: var(--gold-deep);
}
.subida__vista img { width: 100%; height: 100%; object-fit: cover; display: block; }
.subida__texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.subida__texto b { font: 600 15.5px var(--fb); color: var(--ink); overflow-wrap: anywhere; }
.subida__texto span { font: 400 13px var(--fb); color: var(--ink-soft); }
.subida--retrato { flex-direction: column; text-align: center; padding: 26px 18px 22px; }
.subida--retrato .subida__vista { width: 132px; height: 132px; border-radius: 50%; box-shadow: var(--shp3); }
.subida--retrato .subida__icono .ico { width: 30px; height: 30px; }

/* ── 17 · Estado de la tarjeta ───────────────────────────────────────── */
.estado-tarjeta h1 { font: 500 34px/1.12 var(--fd); margin: 0 0 12px; text-wrap: balance; }
.estado-tarjeta .atajo-bandeja { margin-bottom: 14px; }

/* ── El guion plegable y el «cómo se arma» ───────────────────────────── */
.guion, .explica--chev {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px; margin: 16px 0;
  box-shadow: var(--shp1); max-width: none;
}
.guion summary, .explica--chev summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 52px; padding: 12px 16px; font: 600 14.5px var(--fb); color: var(--gold-deep);
}
.guion summary::-webkit-details-marker, .explica--chev summary::-webkit-details-marker { display: none; }
.explica--chev summary::before { content: none; }
.guion__chev { transition: transform .2s var(--facil); color: var(--ink-soft); }
details[open] > summary .guion__chev { transform: rotate(90deg); }
.guion ol { margin: 0; padding: 0 18px 16px 38px; display: grid; gap: 8px; }
.guion li { font-size: 14.5px; color: var(--ink-soft); padding-left: 4px; }
.guion li::marker { color: var(--gold-deep); font-weight: 700; }
.guion li b { color: var(--ink); }
.explica--chev { padding: 0; }
.explica--chev p { padding: 0 16px 16px; margin: 0; }

/* ── 09 · La bandeja ─────────────────────────────────────────────────── */
.lista-bandeja { display: grid; gap: 14px; margin-top: 18px; }
@media (min-width: 900px) { .cuentas--grabar { max-width: 760px; } }
.bandeja-tarjeta {
  display: block; background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
  padding: 16px 18px; color: var(--ink); text-decoration: none; box-shadow: var(--shp3);
  transition: transform .15s var(--facil), box-shadow .15s var(--facil), border-color .15s var(--facil);
}
.bandeja-tarjeta:hover { text-decoration: none; border-color: var(--gold-tint); box-shadow: var(--shp4); transform: translateY(-1px); }
.bandeja-tarjeta__cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.espera { display: inline-flex; align-items: center; gap: 6px; font: 600 13px var(--fb); color: var(--ink-soft); }
/* Lo que lleva días esperando se destaca: es lo que más mueve a responder. */
.espera--larga { color: var(--gold-deep); background: var(--gold-wash); border: 1px solid var(--gold-tint); padding: 4px 10px; border-radius: 999px; }
.bandeja-tarjeta__texto {
  font: 500 18.5px/1.38 var(--fd); margin: 0 0 14px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden;
}
.bandeja-tarjeta__pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.bandeja-tarjeta__voces { font-size: 13px; color: var(--muted); }
.boton-mini--ico { display: inline-flex; align-items: center; gap: 6px; padding: 9px 15px; font-size: 13.5px; }

/* ── 10 · El grabador ───────────────────────────────────────────────── */
.pregunta-grabar {
  margin: 0 0 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
  padding: 18px 20px; box-shadow: var(--shp3); font: 500 20px/1.35 var(--fd); color: var(--ink);
}
.pregunta-grabar .esq { display: block; }
.estudio { text-align: center; padding: 18px 0 6px; }
.onda-vivo { display: flex; align-items: flex-end; gap: 3px; height: 40px; max-width: 360px; margin: 6px auto 12px; }
.onda-vivo i { flex: 1; height: var(--h, 30%); min-height: 3px; border-radius: 2px; background: var(--line); transition: height .08s linear; }
.estudio:has(.rec.grabando) .onda-vivo i { background: var(--gold-deep); }
.reloj-grande { font: 400 64px/1 var(--fd); color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.estado-rec {
  display: flex; align-items: center; justify-content: center; gap: 10px; margin: 12px 0 18px;
  font: 700 11.5px var(--fb); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft);
}
.estado-rec::before, .estado-rec::after { content: ''; width: 28px; height: 1px; background: var(--line-strong); }
.estado-rec.grabando { color: var(--gold-deep); }
.estado-rec.aviso { color: var(--danger-deep); }
.rec {
  width: 88px; height: 88px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; margin: 0 auto;
  background: var(--gold-wash); border: 1.5px solid var(--gold); box-shadow: var(--shp3);
  transition: transform .15s var(--facil), background .15s var(--facil);
}
.rec:hover { background: var(--gold-tint); }
.rec:active { transform: scale(.96); }
.rec__punto { width: 24px; height: 24px; border-radius: 50%; background: var(--gold-deep); transition: border-radius .15s var(--facil), width .15s, height .15s; }
.rec.grabando { background: var(--gold-deep); border-color: var(--gold-deep); box-shadow: 0 0 0 8px var(--gold-wash), var(--shp3); }
.rec.grabando .rec__punto { width: 26px; height: 26px; border-radius: 6px; background: var(--ink-on-color); }
@media (prefers-reduced-motion: no-preference) {
  .rec.grabando { animation: latir-rec 1.6s ease-in-out infinite; }
  @keyframes latir-rec { 50% { box-shadow: 0 0 0 14px var(--gold-wash), var(--shp3); } }
}
.estudio #rec-ayuda { margin-top: 12px; }
.estudio .mensaje { text-align: left; margin-left: auto; margin-right: auto; }
.tras-grabar { margin: 18px auto 0; max-width: 460px; padding: 14px 16px 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; text-align: left; }
.tras-grabar audio { width: 100%; color-scheme: var(--audio-esquema); }

.linea-google {
  margin: 22px 0 0; background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
  padding: 16px 16px 12px; box-shadow: var(--shp2);
}
.linea-google .ceja { font-size: 11px; }
.linea-google textarea { min-height: 76px; font: 400 17px/1.45 var(--fd); background: var(--paper-2); }
.linea-google .bajo-campo { margin-top: 8px; align-items: baseline; flex-wrap: nowrap; }
.linea-google .bajo-campo .ayuda { flex: 1; }
.subiendo { margin: 18px 0 0; }
.subiendo__barra { height: 6px; border-radius: 6px; background: var(--line); overflow: hidden; }
.subiendo__barra span { display: block; height: 100%; width: 0; background: var(--gold-deep); transition: width .2s linear; }

/* ── 11 · Mis voces ─────────────────────────────────────────────────── */
.totales { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px 0 0; }
.total { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 16px 14px 14px; box-shadow: var(--shp2); }
.total__n { font: 500 30px/1 var(--fd); color: var(--ink); font-variant-numeric: tabular-nums; }
.total__que { font: 700 10.5px var(--fb); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin-top: 10px; }
.total--salvia { background: var(--sage-tint); border-color: var(--sage-line); }
.total--salvia .total__n, .total--salvia .total__que { color: var(--sage-deep); }
@media (min-width: 760px) { .total__n { font-size: 38px; } .total { padding: 20px 18px 16px; } }
.mis-voces-lista { border-top: 1px solid var(--line); }
.voz-mia { padding: 16px 0 10px; border-bottom: 1px solid var(--line); }
.voz-mia__cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.voz-mia__linea { font: 500 18px/1.32 var(--fd); color: var(--texto); margin: 0; text-decoration: none; }
a.voz-mia__linea:hover { color: var(--enlace); text-decoration: none; }
.voz-mia__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--ink-soft); margin: 8px 0 0; }
.voz-mia__ayudo { display: inline-flex; align-items: center; gap: 4px; color: var(--gold-deep); font-weight: 600; }
.voz-mia .mensaje { margin: 10px 0 4px; }
.voz-mia__quitar { margin-left: -4px; }
.pill--ojo { border-color: var(--gold-tint); color: var(--gold-deep); background: var(--gold-wash); }
.como-funciona-voces { background: var(--paper-2); border: 1px solid var(--line); border-radius: 18px; padding: 18px 18px 8px; margin-top: 34px; }
.como-funciona-voces h2 { font: 500 18px var(--fd); margin: 0 0 10px; }
.como-funciona-voces ul { list-style: none; margin: 0; padding: 0; }
.como-funciona-voces li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--ink-soft); margin: 0 0 12px; }
.como-funciona-voces .ico { color: var(--sage-deep); margin-top: 2px; }

/* ── Mi rincón (marco 14), bien terminado ────────────────────────────── */
.cuentas--rincon { max-width: 720px; }
.rincon-cab h1 { font-size: 32px; }
.rincon-inicial { width: 56px; height: 56px; font-size: 24px; background: var(--jewel-tint); border-color: var(--jewel); color: var(--jewel-deep); }
.campana { width: 44px; height: 44px; border-color: var(--line-strong); }
.lista-rincon { display: grid; gap: 14px; }
@media (min-width: 1020px) { .cuentas--rincon .lista-rincon { gap: 18px; } }
.mi-pregunta { padding: 18px 18px 8px; border-radius: 20px; box-shadow: var(--shp3); border-color: var(--line); }
.mi-pregunta--retirada { opacity: .78; box-shadow: none; }
.mi-pregunta--retenida { background: var(--paper-2); box-shadow: none; }
.cuentas .pill { font-size: 11px; padding: 5px 11px; }
.mi-pregunta__texto { font-size: 20px; }
.mi-voz { min-height: 60px; border-radius: 14px; }
.mi-voz__play {
  width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--gold-wash); border: 1px solid var(--gold); color: var(--gold-deep);
}
.mi-voz__play .ico { margin-left: 2px; }
.mi-voz__util { display: inline-flex; align-items: center; gap: 4px; }
.mi-voz__util .ico { color: var(--gold-deep); }
.mi-voz--espera { position: relative; }
.mi-voz--ayuda { background: var(--surface); border-style: solid; line-height: 1.5; }
.mi-voz--ayuda a { font-weight: 700; text-decoration: underline; }
.mi-pregunta__pie .enlace-flojo { font-size: 13px; }
.pie-rincon { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; }
.atajo-bandeja__flecha { display: grid; place-items: center; }
.rincon-avisos { box-shadow: var(--shp2); border-radius: 18px; }
.rincon-avisos .enlace-flojo { min-height: 44px; padding: 12px 4px; }
.rincon-avisos .aviso { padding: 12px 0; }
.rincon-avisos .aviso--nuevo { position: relative; padding-left: 16px; }
.rincon-avisos .aviso--nuevo::before { content: ''; position: absolute; left: 0; top: 20px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.rincon-avisos .aviso .ayuda { display: block; margin-top: 2px; }

/* Vacíos con forma (no un texto suelto). */
.vacio-rincon {
  text-align: center; padding: 34px 20px 30px; border: 1.5px dashed var(--line-strong); border-radius: 20px; background: var(--paper-2);
}
.vacio-rincon__arco { display: block; width: 46px; height: 58px; margin: 0 auto 14px; border-radius: var(--arco); border: 1px solid var(--arc-line); background: var(--arc-wash); }
.vacio-rincon__titulo { font: 500 20px/1.3 var(--fd); color: var(--texto); margin: 0 auto 6px; }
.vacio-cuenta { padding: 10px 0 20px; }
.vacio-cuenta h1 { font: 500 34px/1.1 var(--fd); margin: 0 0 12px; }

/* ── Esqueletos (P2-11): la forma de lo que viene ────────────────────── */
.esq { display: block; background: var(--line-soft); border-radius: 8px; }
.esq--redondo { border-radius: 50%; flex: none; }
.esq-fila { display: flex; align-items: center; gap: 14px; margin: 4px 0 26px; }
.esq-tarjeta { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 18px; margin-top: 14px; }
@media (prefers-reduced-motion: no-preference) {
  .esq { background: linear-gradient(90deg, var(--line-soft) 25%, var(--paper-2) 50%, var(--line-soft) 75%); background-size: 200% 100%; animation: brillo 1.4s ease-in-out infinite; }
  @keyframes brillo { from { background-position: 100% 0 } to { background-position: -100% 0 } }
}
.yo-tarjeta .esq { vertical-align: middle; }

/* ── Las pantallas de fallo (404 y 500, diseño 25) ───────────────────── */
.fallo { max-width: 560px; margin: 0 auto; padding: 36px 0 20px; }
.fallo h1 { font: 500 40px/1.08 var(--fd); letter-spacing: -.02em; margin: 0 0 12px; color: var(--texto); }
.fallo > p.suave { font-size: 16.5px; }
.fallo__botones { display: grid; gap: 10px; margin: 26px 0 0; }
.fallo__dorvy {
  margin: 40px 0 0; padding: 14px 16px; border-left: 3px solid var(--sage); background: var(--sage-tint);
  border-radius: 0 14px 14px 0; font-size: 14.5px; color: var(--ink-soft);
}
.fallo__dorvy a { font-weight: 700; color: var(--sage-deep); padding: 12px 2px; margin: -12px -2px; white-space: nowrap; }
.fallo__dorvy a .ico { vertical-align: -.2em; }
.fallo__buscador { margin: 18px 0 0; }
.fallo__buscador input[type='search'] { border-color: var(--line-strong); }
.fallo__buscador .boton { min-width: 52px; padding: 13px 16px; }
.fallo__ceja { margin-top: 30px; }
.fallo__temas { margin-bottom: 0; }
@media (min-width: 760px) { .fallo { padding-top: 64px; } .fallo h1 { font-size: 52px; } .fallo__botones { grid-template-columns: 1fr 1fr; } }

/* La barra de abajo no tapa el último botón de estas pantallas. */
@media (max-width: 759px) {
  body.con-barra .cuentas { padding-bottom: 24px; }
}

/* Los párrafos de estas columnas ya van topados por la columna: sin el tope
   de 64ch, el botón y el campo miden lo mismo. */
.cuentas p { max-width: none; }
.fallo__buscador input[type='search'] { padding-left: 18px; background-image: none; }
/* El botón de Google dentro de la hoja: la hoja pinta sus botones con texto
   claro, y sobre el blanco de Google el texto desaparecía. */
.hoja-modal .boton--google, .hoja-modal .boton--google:hover { color: #1F1F1F; }
.hoja-modal .boton--calmo { color: var(--ink); }
/* Un título al que se lleva el foco por código (tras publicar, al cambiar de
   paso) no necesita el anillo: no es un control y el lector ya lo anuncia. */
:is(h1, h2)[tabindex='-1']:focus { outline: none; }
.cuentas .boton--google, .hoja-modal .boton--google { max-width: none; width: 100%; }


/* ════════════════════════════════════════════════════════════════════
   CONFIANZA — «Cómo funciona» y páginas legales (6-oct-2026)
   ════════════════════════════════════════════════════════════════════ */
/* seo.css — se funde en consultorio.css al terminar (6-oct) */

/* ════════════════════════════════════════════════════════════════════
   «CÓMO FUNCIONA» Y LAS PÁGINAS LEGALES (agente D, 6-oct-2026)

   Son las páginas de la CONFIANZA: quien llega por WhatsApp a la voz de un
   desconocido, y Google en un tema de salud, se preguntan lo mismo —quién
   está detrás y cómo se hace esto—. Tienen que leerse como una publicación
   cuidada, no como letra pequeña: titulares en Fraunces, mucho aire, el arco
   de la portada, la ceja y la escalera de sombras tintadas.

   Reglas que se respetan aquí (contraste medido sobre estos mismos hex):
   · Texto de color siempre en `-deep` (`--gold-deep` 5,03:1 sobre papel,
     `--sage-deep` 5,1:1 sobre `--sage-tint`). El color de marca, de fondo.
   · Lo que se toca mide ≥ 44 px (índice, preguntas, líneas 106/123).
   · Los enlaces dentro del texto van subrayados: el color solo no basta
     (WCAG 1.4.1).
   · Con movimiento reducido no gira ni se desliza nada.
   ════════════════════════════════════════════════════════════════════ */

.cf { max-width: 1080px; margin: 0 auto; }

/* Los enlaces dentro de un párrafo: subrayados, finos y con aire. */
.cf p a, .cf dd a, .cf li p a, .legal p a, .legal li a {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}

/* ── La portada: el arco del muro, abierto por abajo ─────────────────── */
.cf-portada {
  position: relative; text-align: center;
  padding: 26px 20px 30px; margin: 4px auto 0; max-width: 900px;
  border: 1.5px solid var(--arc-line); border-bottom: none;
  border-radius: 46% 46% 0 0 / 22% 22% 0 0;
  background: linear-gradient(180deg, var(--arc-wash), transparent 85%);
}
.cf-migas {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 13.5px; color: var(--texto-mut); margin: 0 0 30px;
}
.cf-migas a { color: var(--texto-mut); padding: 12px 2px; text-decoration: underline; text-underline-offset: 3px; }
.cf-migas a:hover { color: var(--texto); }
.cf-migas .ico { color: var(--texto-mut); }
.cf-migas [aria-current] { color: var(--texto); font-weight: 600; }
/* La ceja centrada lleva raya a los dos lados, como en el diseño. */
.cf-portada__ceja { justify-content: center; color: var(--gold-deep); }
.cf-portada__ceja::after { content: ''; width: 28px; height: 1px; background: var(--gold); flex: none; }
.cf-portada h1 {
  font-size: 40px; line-height: 1.05; letter-spacing: -.025em; color: var(--texto);
  max-width: 13ch; margin: 0 auto 18px; text-wrap: balance;
}
.cf-entrada { font-size: 17px; line-height: 1.6; color: var(--texto-mut); max-width: 44ch; margin: 0 auto 26px; text-wrap: pretty; }

/* El índice: pastillas de 44 px. En el móvil es lo primero que se toca. */
.cf-indice ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.cf-indice a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--line-strong); border-radius: 999px; background: var(--fondo-2);
  color: var(--texto); font: 500 14px var(--fb); text-decoration: none; box-shadow: var(--shp1);
  transition: border-color .15s var(--facil), box-shadow .15s var(--facil);
}
.cf-indice a:hover { border-color: var(--gold-deep); box-shadow: var(--shp2); text-decoration: none; }

/* ── Las secciones: cabeza a la izquierda, cuerpo a la derecha ───────── */
.cf-sec { margin-top: 56px; padding-top: 34px; border-top: 1px solid var(--borde-f); scroll-margin-top: 84px; }
.cf-sec__cabeza { margin-bottom: 22px; }
.cf-sec__cabeza .ceja { color: var(--gold-deep); }
.cf-sec__cabeza h2 { font-size: 29px; line-height: 1.12; letter-spacing: -.02em; color: var(--texto); text-wrap: balance; max-width: 18ch; }
.cf-sec__cuerpo > p { font-size: 16.5px; color: var(--texto-mut); }
.cf-sec__cuerpo > p strong { color: var(--texto); }
.cf-grande { font: 400 21px/1.45 var(--fd) !important; color: var(--texto) !important; letter-spacing: -.005em; }

/* ── En tres pasos: tres arcos ───────────────────────────────────────── */
.cf-pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.cf-paso {
  position: relative; overflow: hidden; text-align: center;
  background: var(--fondo-2); border: 1px solid var(--borde-f);
  border-radius: 46% 46% 18px 18px / 26% 26% 18px 18px;
  padding: 40px 24px 26px; box-shadow: var(--shp2);
}
.cf-paso__icono {
  width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 50%;
  display: grid; place-items: center; background: var(--gold-wash); color: var(--gold-deep);
  box-shadow: inset 0 0 0 1px var(--gold-tint);
}
/* El número es decoración (aria-hidden): el orden ya lo dice la lista. */
.cf-paso__n {
  position: absolute; top: 10px; right: 22px;
  font: italic 400 64px/1 var(--fd); color: var(--gold-tint); pointer-events: none;
}
.cf-paso h3 { font-size: 21px; color: var(--texto); margin: 0 0 8px; }
.cf-paso p { font-size: 15px; color: var(--texto-mut); margin: 0 auto; max-width: 32ch; }

/* ── La tarjeta: el panel de papel ───────────────────────────────────── */
.cf-panel {
  background: var(--hoja-bg); color: var(--ink); border: 1px solid var(--hoja-borde);
  border-radius: 22px; padding: 26px 22px; box-shadow: var(--shp4);
}
.cf-panel a { color: var(--gold-deep); }
.cf-verif__sello {
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  background: var(--sage-tint); color: var(--sage-deep); margin: 0 0 16px;
  box-shadow: inset 0 0 0 1px var(--sage-line);
}
.cf-verif__entrada { font: 400 18.5px/1.5 var(--fd); color: var(--ink); margin-bottom: 20px; }
.cf-checks { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 14px; }
.cf-checks li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; color: var(--ink-soft); font-size: 15.5px; line-height: 1.55; }
.cf-checks strong { color: var(--ink); }
.cf-check {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--sage-tint); color: var(--sage-deep); margin-top: 1px;
}
.cf-verif__nota {
  font-size: 14px; color: var(--ink-soft); margin: 0;
  padding-top: 14px; border-top: 1px solid var(--line);
}

/* «Compruébalo tú»: la parte que hace la confianza COMPROBABLE. */
.cf-tu {
  margin-top: 18px; padding: 24px 22px; border-radius: 20px;
  background: var(--gold-wash); color: var(--ink); border: 1px solid var(--gold-tint);
}
.cf-tu h3 { font-size: 21px; color: var(--ink); margin: 0 0 14px; }
.cf-tu__pasos { list-style: none; counter-reset: paso; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
.cf-tu__pasos li { counter-increment: paso; display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; color: var(--ink-soft); font-size: 15.5px; }
.cf-tu__pasos li::before {
  content: counter(paso); width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; font: 700 13px var(--fb);
  background: var(--gold-deep); color: var(--ink-on-color);
}
.cf-tu__botones { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; max-width: none; }
.cf-tu .boton { color: var(--ink-on-color); box-shadow: var(--shp3); }
.cf-tu .boton--calmo { color: var(--ink); border-color: var(--line-strong); background: var(--surface); box-shadow: none; }

/* ── Crisis: las dos líneas, grandes y a mano ────────────────────────── */
.cf-lineas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 6px; }
.cf-linea {
  display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 12px 16px;
  border-radius: 16px; background: var(--sage-tint); border: 1px solid var(--sage-line);
  color: var(--ink); text-decoration: none; box-shadow: var(--shp1);
  transition: box-shadow .15s var(--facil), transform .15s var(--facil);
}
.cf-linea .ico { color: var(--sage-deep); }
.cf-linea span { display: grid; font-size: 13.5px; line-height: 1.3; color: var(--ink-soft); }
.cf-linea strong { font: 500 26px/1.05 var(--fd); color: var(--sage-deep); }
.cf-linea:hover { text-decoration: none; box-shadow: var(--shp3); }
.cf-linea:focus-visible { border-radius: 16px; }

/* ── Moderación ──────────────────────────────────────────────────────── */
.cf-lista { margin: 0 0 18px; }
.cf-lista > div { padding: 16px 0; border-top: 1px solid var(--borde-f); }
.cf-lista > div:first-child { border-top: 0; padding-top: 0; }
.cf-lista dt { font: 700 12px var(--fb); letter-spacing: .12em; text-transform: uppercase; color: var(--texto); margin-bottom: 6px; }
.cf-lista dd { margin: 0; color: var(--texto-mut); font-size: 16px; line-height: 1.6; max-width: var(--lectura); }
.cf-lista dd strong { color: var(--texto); }
.cf-aviso-reporte { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--texto-mut); }
.cf-aviso-reporte .ico { color: var(--gold-deep); margin-top: 3px; }

/* ── Privacidad: la frase, como cita ─────────────────────────────────── */
.cf-cita { margin: 0 0 18px; padding: 2px 0 2px 22px; border-left: 3px solid var(--gold); }
.cf-cita p { font: italic 400 23px/1.4 var(--fd); color: var(--texto); margin: 0; text-wrap: pretty; }

/* ── Lo que NO es: cuatro columnas con raya arriba ───────────────────── */
.cf-noes { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.cf-noes li { padding-top: 16px; border-top: 2px solid var(--line-strong); }
.cf-noes h3 { font-size: 20px; color: var(--texto); margin: 0 0 6px; }
.cf-noes p { font-size: 15px; color: var(--texto-mut); margin: 0; }

/* ── Preguntas: `<details>` de 56 px, con chevron que gira ───────────── */
.cf-faq details { border-bottom: 1px solid var(--borde-f); }
.cf-faq details:first-child { border-top: 1px solid var(--borde-f); }
.cf-faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 56px; padding: 14px 2px; font: 500 18.5px/1.3 var(--fd); color: var(--texto);
}
.cf-faq summary::-webkit-details-marker { display: none; }
.cf-faq summary .ico { color: var(--gold-deep); transition: transform .2s var(--facil); }
.cf-faq details[open] summary .ico { transform: rotate(90deg); }
.cf-faq summary:hover span { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.cf-faq details p { color: var(--texto-mut); font-size: 16px; margin: 0 0 20px; padding-right: 34px; }

/* ── El cierre: un arco pequeño ──────────────────────────────────────── */
.cf-cierre {
  margin: 72px auto 0; max-width: 640px; text-align: center; padding: 44px 22px 8px;
  border: 1.5px solid var(--arc-line); border-bottom: none;
  border-radius: 46% 46% 0 0 / 40% 40% 0 0;
  background: linear-gradient(180deg, var(--arc-wash), transparent 90%);
}
.cf-cierre p { margin-left: auto; margin-right: auto; color: var(--texto-mut); }
.cf-cierre__frase { font: 500 25px/1.25 var(--fd) !important; color: var(--texto) !important; max-width: 20ch; text-wrap: balance; }
.cf-cierre__fecha { font-size: 13px; margin-top: 18px; }

/* ── Tablet ──────────────────────────────────────────────────────────── */
@media (min-width: 640px) {
  .cf-portada { padding: 34px 40px 40px; border-radius: 46% 46% 0 0 / 30% 30% 0 0; }
  .cf-portada h1 { font-size: 54px; }
  .cf-entrada { font-size: 18px; }
  .cf-noes { grid-template-columns: 1fr 1fr; gap: 28px 32px; }
  .cf-panel { padding: 32px 34px; }
  .cf-tu { padding: 28px 30px; }
}

/* ── Escritorio: dos columnas editoriales, 96 px entre secciones ─────── */
@media (min-width: 1020px) {
  .cf-portada { padding: 40px 72px 52px; }
  .cf-portada h1 { font-size: 66px; max-width: 14ch; }
  .cf-entrada { font-size: 19px; }

  .cf-sec {
    margin-top: 96px; padding-top: 48px;
    display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 64px; align-items: start;
  }
  /* La cabeza acompaña mientras se lee su sección. */
  .cf-sec__cabeza { position: sticky; top: 96px; margin: 0; }
  .cf-sec__cabeza h2 { font-size: 38px; }
  .cf-sec--ancha { display: block; }
  .cf-sec--ancha .cf-sec__cabeza { position: static; margin-bottom: 34px; }
  .cf-sec--ancha .cf-sec__cabeza h2 { max-width: 24ch; }

  .cf-pasos { grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .cf-paso { padding: 52px 30px 32px; }
  .cf-noes { grid-template-columns: repeat(4, 1fr); }
  .cf-cita p { font-size: 27px; }
  .cf-grande { font-size: 24px !important; }
  .cf-faq summary { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .cf-faq summary .ico, .cf-indice a, .cf-linea { transition: none; }
}
/* Al saltar por el índice, el destino no queda debajo de la cabecera fija. */
.legal h2[id], .cf-sec { scroll-margin-top: 84px; }


/* ════════════════════════════════════════════════════════════════════
   LEGAL: la hoja con su índice al lado (escritorio)
   La hoja de 1120 px tenía una columna de texto de 560 y el resto VACÍO.
   Ahora el índice ocupa ese hueco y acompaña al leer.
   ════════════════════════════════════════════════════════════════════ */
.legal__cabeza { margin-bottom: 8px; }
.legal__cabeza .ceja { color: var(--gold-deep); }
.legal__cabeza h1 { font-size: 36px; letter-spacing: -.02em; margin-bottom: 10px; }
.legal__resumen { font: 400 19px/1.45 var(--fd); color: var(--ink); max-width: 40ch; text-wrap: balance; }
.legal__meta { font-size: 13.5px; color: var(--muted); margin: 0 0 6px; }
.legal__indice { margin: 22px 0 6px; padding: 16px 18px; border-radius: 16px; background: var(--paper-2); border: 1px solid var(--line); }
.legal__indice h2 { font: 700 11px var(--fb) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--ink) !important; margin: 0 0 6px !important; }
.legal__indice ol { margin: 0; padding: 0 0 0 18px; color: var(--muted); }
.legal__indice li { padding: 0; }
.legal__indice a { display: inline-block; padding: 9px 0; color: var(--ink-soft) !important; text-decoration: none !important; font-size: 15px; }
.legal__indice a:hover { color: var(--gold-deep) !important; text-decoration: underline !important; }
.legal__texto h2 { font-size: 23px; margin: 34px 0 10px !important; }
.legal__texto p, .legal__texto li { color: var(--ink-soft); font-size: 16px; line-height: 1.7; }
.legal__texto p strong, .legal__texto li strong { color: var(--ink); }
.legal__otras { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 10px; }
.legal__otras a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--line-strong); color: var(--ink) !important; text-decoration: none !important; font: 500 14px var(--fb);
}
.legal__otras a:hover { border-color: var(--gold-deep); }

@media (min-width: 1020px) {
  .hoja .legal { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 20px 64px; padding: 18px 26px 10px; }
  .legal__cabeza { grid-column: 1 / -1; }
  .legal__cabeza h1 { font-size: 48px; }
  .legal__indice { grid-column: 2; grid-row: 2; position: sticky; top: 96px; align-self: start; margin: 0; }
  .legal__texto { grid-column: 1; grid-row: 2; }
  .legal__texto h2:first-child { margin-top: 0 !important; }
}

/* Ajustes tras mirar las fotos (6-oct): los botones dentro de un párrafo no
   se subrayan; la primera sección no deja un hueco doble bajo el arco; la
   entrada cabe en tres líneas en escritorio. */
.cf p a.boton, .legal p a.boton { text-decoration: none; }
.cf-portada + .cf-sec { margin-top: 24px; }
.cf-verif__entrada { font-size: 17px; }
.cf-cierre { margin-bottom: -24px; }
@media (min-width: 1020px) {
  .cf-entrada { max-width: 52ch; }
  .cf-portada + .cf-sec { margin-top: 40px; }
  .cf-verif__entrada { font-size: 19px; }
}