/* ============================================================
   Fundación TAO — sistema del sitio
   Actualizado: 2026-11-12

   La marca hereda de TAO México el ensō de pincel, la tipografía
   Stara para los títulos y Manrope para el texto. Lo que cambia es
   el color: donde TAO México va en oro y azul acero, la Fundación
   va en azul.

   NINGÚN color de aquí está elegido a ojo. Todos se midieron sobre
   los archivos que entregó la Fundación (ver Marca/Identidad/paleta.md).
   ============================================================ */

@font-face{
  font-family:Stara; src:url(../fonts/Stara-Black.woff2) format("woff2");
  font-weight:900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:Stara; src:url(../fonts/Stara-SemiBold.woff2) format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:Stara; src:url(../fonts/Stara-Medium.woff2) format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}
/* Manrope va variable: un archivo de 24 KB cubre todos los pesos. */
@font-face{
  font-family:Manrope; src:url(../fonts/Manrope-Variable.woff2) format("woff2-variations");
  font-weight:200 800; font-style:normal; font-display:swap;
}

:root{
  /* --- Paleta ----------------------------------------------
     El azul oscuro de la marca se cambió el 12 nov 2026. El del
     logotipo, #1E3A73, está en H 247°: eso no es azul, es violeta,
     y a pantalla completa se lee morado. La familia buena ya
     existía en el material de la Fundación: el marino de las
     piezas de campaña, H 220°. De ahí sale toda esta escala, que
     es un solo tono con cuatro valores.

     El azul del trazo (#3D7ABD) y el celeste se conservan tal
     cual: son los del logotipo, medidos contando píxeles.        */
  --profundo:#152B57;  /* el más oscuro: pie y fondo de los degradados */
  --tinta:#1E3A73;     /* azul principal, el de las piezas de jornada */
  --medio:#2B4C8F;     /* paso intermedio para degradados y estados */
  --azul:#3D7ABD;      /* azul del trazo del ensō (logotipo) */
  --celeste:#7AA9DB;   /* azul claro de las luces del ensō (logotipo) */
  /* Rótulo sobre fondo azul. NO se usa --celeste para eso: con la tinta
     nueva, más clara, el celeste del logotipo cae a 4.47 de contraste y
     deja de pasar AA. Con la tinta vieja pasaba (5.92), así que el azul
     más claro rompió un contraste que ya estaba bien. Medido el 12 nov
     2026. Éste da 5.96 sobre la tinta y 7.51 sobre el profundo. */
  --rotulo-claro:#A1C2E6;
  --hielo:#EBF5FF;     /* fondo frío de las piezas */
  --lavanda:#E3E9F7;   /* panel claro, corrido al azul para que case */
  /* Acento. Era el amarillo #FFE610 de las piezas de campaña; Fernando
     lo cambió a azul el 12 nov 2026.

     Y el cambio NO es sólo el valor. Medido: #5F95E7 da 3.64 sobre el
     azul tinta y 3.03 sobre blanco, así que como TEXTO no pasa AA en
     ningún fondo del sitio. Sirve como SUPERFICIE —un botón, una
     cápsula— porque para el borde de un componente la norma pide 3:1,
     no 4.5:1, y eso sí lo cumple. Lo que va encima es --acento-texto.

     Donde el amarillo hacía de texto (enlaces y rótulos sobre fondo
     oscuro) ahora se usa --rotulo-claro, que da 5.96. */
  --senal:#5F95E7;
  --acento-texto:#0C1832;   /* 5.82 sobre el acento */
  --papel:#fff;

  /* Alias: las piezas de jornada llamaban «marino» a este azul,
     y ahora es el principal. Se conserva el nombre para no romper
     nada que lo use. */
  --marino:#1E3A73;

  /* --- Azul de enlace, derivado ----------------------------
     El azul de marca #3D7ABD da 4.45 de contraste sobre blanco:
     NO llega al 4.5 que pide la WCAG para texto normal. Para
     texto chico se usa éste, en el mismo tono que la tinta nueva
     (H 220°): 7.28 sobre blanco y 6.60 sobre hielo.            */
  --enlace:#2F549E;

  --texto:#27303F;              /* gris azulado para párrafos largos */
  --tenue:#5A6472;              /* texto secundario */
  --linea:rgba(30,58,115,.15);
  --linea-clara:rgba(255,255,255,.22);

  --display:Stara,"Times New Roman",serif;
  --cuerpo:Manrope,system-ui,-apple-system,sans-serif;

  --ease:cubic-bezier(.2,.8,.2,1);
  --medida:66ch;                /* ancho de lectura cómodo */
  --aire:clamp(56px,8vw,120px); /* respiración vertical entre secciones */
  --margen:clamp(20px,5vw,72px);
  --ancho:1200px;
}

*{box-sizing:border-box}

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

body{
  margin:0; background:var(--papel); color:var(--texto);
  font:400 17px/1.65 var(--cuerpo);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

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

h1,h2,h3,h4{
  font-family:var(--display); font-weight:500;
  color:var(--tinta); line-height:1.08;
  letter-spacing:-.01em; margin:0 0 .5em;
  text-wrap:balance;
}
h1{font-size:clamp(38px,6.2vw,76px)}
h2{font-size:clamp(30px,4.4vw,52px)}
h3{font-size:clamp(21px,2.4vw,27px)}
p{margin:0 0 1.1em; max-width:var(--medida); text-wrap:pretty}

a{color:var(--enlace); text-underline-offset:.18em; text-decoration-thickness:1px}
a:hover{color:var(--tinta)}

/* Un foco que se ve en los dos fondos: el anillo lleva su propio
   halo claro para no perderse sobre el azul profundo. */
:focus-visible{
  outline:3px solid var(--azul); outline-offset:3px;
  border-radius:3px;
}
.fondo-tinta :focus-visible,.fondo-marino :focus-visible,
.portada :focus-visible,.pie :focus-visible{outline-color:var(--senal)}

/* ---------- Saltar al contenido ----------
   Misma técnica que en el sitio de TAO México: no se oculta con
   display:none, que lo sacaría del orden de tabulación y lo dejaría
   inservible; se saca de la pantalla y vuelve al recibir el foco. */
.salto{
  position:fixed; top:-100px; left:16px; z-index:200;
  padding:12px 18px; border-radius:0 0 10px 10px;
  background:var(--senal); color:var(--acento-texto);
  font:700 15px/1 var(--cuerpo); text-decoration:none;
  transition:top .18s var(--ease);
}
.salto:focus{top:0}

/* ============================================================
   Rejilla
   ============================================================ */
.env{width:min(var(--ancho),100% - var(--margen)*2); margin-inline:auto}
.seccion{padding-block:var(--aire)}
.seccion-corta{padding-block:clamp(36px,5vw,72px)}

.fondo-hielo{background:var(--hielo)}
.fondo-lavanda{background:var(--lavanda)}
.fondo-tinta{background:var(--tinta); color:#E6ECF7}
.fondo-marino{background:var(--marino); color:#E6EEFB}
.fondo-tinta h1,.fondo-tinta h2,.fondo-tinta h3,
.fondo-marino h1,.fondo-marino h2,.fondo-marino h3{color:#fff}
.fondo-tinta a,.fondo-marino a{color:var(--rotulo-claro)}
.fondo-tinta a:hover,.fondo-marino a:hover{color:#fff}

.rotulo{
  font:700 12px/1 var(--cuerpo); letter-spacing:.18em;
  text-transform:uppercase; color:var(--enlace);
  margin:0 0 18px; display:block;
}
.fondo-tinta .rotulo,.fondo-marino .rotulo{color:var(--rotulo-claro)}

.entrada{font-size:clamp(18px,2vw,21px); color:var(--tenue); max-width:60ch}
.fondo-tinta .entrada,.fondo-marino .entrada{color:#C3D0E8}

/* ============================================================
   Barra de navegación
   ============================================================ */
.barra{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.6) blur(14px);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid var(--linea);
}
.barra-in{
  width:min(var(--ancho),100% - var(--margen)*2); margin-inline:auto;
  display:flex; align-items:center; gap:18px;
  min-height:72px;
}
.marca{display:flex; align-items:center; gap:12px; text-decoration:none; margin-right:auto}
/* El logotipo va solo: ya lleva «Hablemos de próstata» en el arco, así
   que repetirlo al lado era decir lo mismo dos veces. Al quitarlo cabe
   más grande, que es lo que esa marca necesita. */
.marca img{height:58px; width:auto}

.menu{display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0}
.menu a{
  display:block; padding:10px 13px; border-radius:8px;
  font:600 15px/1 var(--cuerpo); color:var(--tinta); text-decoration:none;
  transition:background .18s var(--ease),color .18s var(--ease);
}
.menu a:hover{background:var(--hielo); color:var(--enlace)}
.menu a[aria-current="page"]{color:var(--enlace); background:var(--hielo)}

.boton{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 26px; border-radius:999px; border:2px solid transparent;
  font:700 16px/1 var(--cuerpo); text-decoration:none; cursor:pointer;
  transition:transform .18s var(--ease),background .18s var(--ease),
             border-color .18s var(--ease),color .18s var(--ease);
}
.boton:hover{transform:translateY(-2px)}
.boton-fuerte{background:var(--tinta); color:#fff}
.boton-fuerte:hover{background:var(--marino); color:#fff}
/* Lleva borde propio: sobre hielo el acento queda en 2.74 contra el
   fondo y el botón perdería su contorno. El borde garantiza que el
   componente se delimite en cualquier fondo. */
.boton-senal{background:var(--senal); color:var(--acento-texto);
  border-color:rgba(12,24,50,.22)}
.boton-senal:hover{background:#7CAAEE; color:var(--acento-texto)}

/* Sobre fondo oscuro el botón primario se invierte a blanco.
   Con el acento amarillo no hacía falta: saltaba solo. El acento azul,
   sobre azul, pierde incluso contra un botón secundario de contorno
   blanco, y entonces el primario deja de parecer el primario. Se
   invierte, que es lo que hace cualquier sistema serio, y el azul de
   marca se queda para los fondos claros, donde sí destaca. */
.portada .boton-senal,
.escena .boton-senal,
.fondo-tinta .boton-senal,
.fondo-marino .boton-senal{
  background:#fff; color:var(--tinta); border-color:transparent;
}
.portada .boton-senal:hover,
.escena .boton-senal:hover,
.fondo-tinta .boton-senal:hover,
.fondo-marino .boton-senal:hover{
  background:#DCE9FB; color:var(--tinta);
  box-shadow:0 10px 26px rgba(0,0,0,.3);
}
.boton-linea{border-color:currentColor; color:var(--tinta); background:transparent}
/* La portada va sobre azul profundo igual que .fondo-tinta, pero no lleva
   esa clase. Se midió el 12 nov 2026: sin esta línea el botón salía en
   tinta sobre tinta, es decir, invisible. */
.fondo-tinta .boton-linea,.fondo-marino .boton-linea,.portada .boton-linea{color:#fff}
.boton-linea:hover{background:var(--tinta); color:#fff; border-color:var(--tinta)}
.fondo-tinta .boton-linea:hover,.fondo-marino .boton-linea:hover,
.portada .boton-linea:hover{
  background:#fff; color:var(--tinta); border-color:#fff;
}
.barra .boton{padding:11px 20px; font-size:15px}

/* Menú plegable en pantallas chicas */
.hamburguesa{
  display:none; width:46px; height:46px; border:1px solid var(--linea);
  border-radius:10px; background:var(--papel); cursor:pointer;
  align-items:center; justify-content:center; padding:0;
}
.hamburguesa span{
  display:block; width:20px; height:2px; background:var(--tinta);
  position:relative; transition:background .16s var(--ease);
}
.hamburguesa span::before,.hamburguesa span::after{
  content:""; position:absolute; left:0; width:20px; height:2px;
  background:var(--tinta); transition:transform .22s var(--ease);
}
.hamburguesa span::before{top:-6px}
.hamburguesa span::after{top:6px}
.hamburguesa[aria-expanded="true"] span{background:transparent}
.hamburguesa[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.hamburguesa[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

@media (max-width:980px){
  .hamburguesa{display:flex}
  .barra .boton{display:none}
  .menu{
    position:absolute; inset:72px 0 auto; flex-direction:column; gap:0;
    background:var(--papel); border-bottom:1px solid var(--linea);
    padding:8px var(--margen) 20px; display:none;
  }
  .menu.abierto{display:flex}
  .menu a{padding:14px 4px; font-size:17px; border-radius:0}
  .menu li{border-bottom:1px solid var(--linea)}
  .menu li:last-child{border-bottom:0; padding-top:14px}
  .menu .boton{display:inline-flex; width:100%}
}

/* ============================================================
   Portada
   ============================================================ */
.portada{
  position:relative; overflow:hidden;
  background:
    radial-gradient(120% 90% at 78% 8%,#2B4C8F 0%,transparent 58%),
    linear-gradient(170deg,var(--tinta) 0%,#152B57 55%,var(--marino) 100%);
  color:#fff;
}
/* El ensō vive detrás del texto como marca de agua. Va en una capa
   propia para poder bajarle la opacidad sin tocar el contenido. */
.portada::after{
  content:""; position:absolute; z-index:0; pointer-events:none;
  width:min(76vw,860px); aspect-ratio:527/459;
  right:-14%; top:50%; transform:translateY(-50%);
  background:url(../img/fundacion-tao-enso-mono.svg) center/contain no-repeat;
  opacity:.1;
  filter:invert(1);
}
.portada-in{
  position:relative; z-index:1;
  width:min(var(--ancho),100% - var(--margen)*2); margin-inline:auto;
  padding-block:clamp(72px,11vw,150px);
}
/* El énfasis del titular se da por LUMINOSIDAD, no por color.
   Con el acento amarillo, pintar la frase de acento bastaba. Con el
   acento azul no: sobre un fondo azul queda a 3.64 y se lee como un
   azul un poco distinto, no como la frase importante. Así que las dos
   primeras líneas bajan de brillo y la frase de marca se queda en
   blanco puro, que es lo más luminoso del encuadre. */
.portada h1{color:#A9C0E0; max-width:15ch}
.portada h1 em{
  font-style:normal; color:#fff;
  display:block;
}
.portada .entrada{color:#CBD8EE; max-width:54ch; margin-top:22px}
.portada .acciones{display:flex; flex-wrap:wrap; gap:14px; margin-top:38px}

/* ============================================================
   Cifras
   ============================================================ */
.cifras{
  display:grid; gap:2px; background:var(--linea);
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  border:1px solid var(--linea); border-radius:14px; overflow:hidden;
}
.cifra{background:var(--papel); padding:30px 26px}
.fondo-hielo .cifra{background:var(--hielo)}
/* --- Las cifras NO van en Stara -----------------------------------
   Se midió en el navegador (12 nov 2026): el cero de Stara lleva una
   barra diagonal incrustada en el glifo. No es una característica
   OpenType; se probaron "zero" 0, "ss01" 1, slashed-zero y lining-nums
   y las cinco salen idénticas. En un sitio de salud, un "10" que parece
   llevar un símbolo encima es una cifra que se lee dos veces.
   Por eso todo número grande va en Manrope. Stara se queda para los
   títulos, que es donde da carácter sin estorbar. */
.cifra b{
  display:block; font:700 clamp(40px,5vw,58px)/1.05 var(--cuerpo);
  color:var(--tinta); letter-spacing:-.025em;
}
/* Para una cifra suelta dentro de un título en Stara. */
.num{font-family:var(--cuerpo); font-weight:700; letter-spacing:-.02em}
.cifra p{margin:12px 0 0; font-size:16px; color:var(--texto); max-width:30ch}
/* La fuente del dato va siempre visible: en salud, un número sin
   procedencia no vale nada. */
.cifra cite{
  display:block; margin-top:12px; font:500 12.5px/1.4 var(--cuerpo);
  font-style:normal; color:var(--tenue); letter-spacing:.01em;
}

/* ============================================================
   Tarjetas
   ============================================================ */
.malla{display:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.malla-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr))}

.tarjeta{
  background:var(--papel); border:1px solid var(--linea);
  border-radius:16px; padding:30px 28px;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.tarjeta h3{margin-bottom:.4em}
.tarjeta p:last-child{margin-bottom:0}
a.tarjeta{text-decoration:none; color:inherit; display:block}
a.tarjeta:hover{transform:translateY(-3px); box-shadow:0 14px 34px rgba(39,34,83,.11)}
.fondo-hielo .tarjeta{border-color:rgba(39,34,83,.1)}

.tarjeta-num{
  display:flex; gap:20px; align-items:flex-start;
  background:var(--papel); border:1px solid var(--linea);
  border-radius:16px; padding:26px 28px;
}
.tarjeta-num b{
  flex:none; width:44px; height:44px; border-radius:50%;
  background:var(--hielo); color:var(--enlace);
  display:grid; place-items:center;
  font:700 17px/1 var(--cuerpo);
}
.tarjeta-num h3{font-size:21px; margin-bottom:.35em}
.tarjeta-num p:last-child{margin-bottom:0}

/* ============================================================
   Jornada destacada
   ============================================================ */
.jornada{
  border-radius:20px; overflow:hidden;
  background:var(--marino); color:#E6EEFB;
  display:grid; grid-template-columns:1.2fr .8fr;
}
@media (max-width:860px){.jornada{grid-template-columns:1fr}}
.jornada-txt{padding:clamp(28px,4vw,48px)}
.jornada-txt h2{color:#fff}
.jornada-datos{
  background:rgba(255,255,255,.07); padding:clamp(28px,4vw,48px);
  border-left:1px solid var(--linea-clara);
}
@media (max-width:860px){.jornada-datos{border-left:0; border-top:1px solid var(--linea-clara)}}
.gratis{
  display:inline-block; background:var(--senal); color:var(--acento-texto);
  font:800 13px/1 var(--cuerpo); letter-spacing:.14em; text-transform:uppercase;
  padding:9px 15px; border-radius:999px; margin-bottom:20px;
}
.dato{display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--linea-clara)}
.dato:last-child{border-bottom:0}
.dato dt{flex:none; width:104px; font:700 13px/1.5 var(--cuerpo);
         letter-spacing:.07em; text-transform:uppercase; color:var(--rotulo-claro)}
.dato dd{margin:0; font-size:16px; color:#fff}
dl{margin:0}

/* ============================================================
   Historial de jornadas
   Las tarjetas funcionan con foto y sin ella: hoy no hay ninguna,
   y el día que lleguen no hay que rehacer el bloque.
   ============================================================ */
.historial{
  display:grid; gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
}
.jor{
  background:rgba(255,255,255,.07); border:1px solid var(--linea-clara);
  border-radius:16px; overflow:hidden; display:flex; flex-direction:column;
}
.fondo-hielo .jor,.fondo-lavanda .jor{
  background:var(--papel); border-color:var(--linea);
}
.jor-foto{width:100%; aspect-ratio:3/2; object-fit:cover; display:block}
.jor-txt{padding:24px 24px 26px}
.jor-fecha{
  font:700 12px/1.3 var(--cuerpo); letter-spacing:.13em; text-transform:uppercase;
  color:var(--senal); margin:0 0 10px;
}
.fondo-hielo .jor-fecha,.fondo-lavanda .jor-fecha{color:var(--enlace)}
.jor h3{font-size:20px; margin-bottom:14px; color:#fff}
.fondo-hielo .jor h3,.fondo-lavanda .jor h3{color:var(--tinta)}
.jor .dato{padding:9px 0}
.jor .dato dt{width:70px; font-size:11.5px}
.jor .dato dd{font-size:15px}
.fondo-hielo .jor .dato,.fondo-lavanda .jor .dato{border-color:var(--linea)}
.fondo-hielo .jor .dato dt,.fondo-lavanda .jor .dato dt{color:var(--enlace)}
.fondo-hielo .jor .dato dd,.fondo-lavanda .jor .dato dd{color:var(--texto)}

/* ============================================================
   Caja de donativo
   ============================================================ */
.donativo{
  background:var(--hielo); border:1px solid var(--linea);
  border-radius:16px; padding:30px 28px;
}
.donativo h3{margin-bottom:.3em}
.montos{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:18px}
.monto{
  display:flex; align-items:center; justify-content:center;
  padding:16px 10px; border-radius:10px;
  background:var(--papel); border:1.5px solid var(--linea);
  font:700 19px/1 var(--cuerpo); color:var(--tinta); text-decoration:none;
  transition:border-color .18s var(--ease),transform .18s var(--ease),
             background .18s var(--ease);
}
a.monto:hover{
  border-color:var(--azul); background:#fff;
  transform:translateY(-2px); color:var(--enlace);
}
/* Mientras no haya cuenta de PayPal, los montos no son enlaces: un
   importe que parece pulsable y no lleva a ningún lado es peor que un
   importe apagado. */
.monto-apagado{opacity:.45; cursor:not-allowed}

/* ============================================================
   Listas de contenido
   ============================================================ */
.lista-marcada{list-style:none; margin:0; padding:0; max-width:var(--medida)}
.lista-marcada li{
  position:relative; padding:0 0 14px 32px; margin-bottom:14px;
  border-bottom:1px solid var(--linea);
}
.lista-marcada li:last-child{border-bottom:0; margin-bottom:0; padding-bottom:0}
.lista-marcada li::before{
  content:""; position:absolute; left:4px; top:9px;
  width:10px; height:10px; border-radius:50%;
  border:2.5px solid var(--azul);
}
.fondo-tinta .lista-marcada li,.fondo-marino .lista-marcada li{border-color:var(--linea-clara)}
.fondo-tinta .lista-marcada li::before,.fondo-marino .lista-marcada li::before{border-color:var(--senal)}

/* Mito / realidad */
.mito{display:grid; gap:0; border:1px solid var(--linea); border-radius:16px; overflow:hidden}
.mito>div{padding:26px 28px}
.mito .m{background:var(--lavanda)}
.mito .r{background:var(--papel); border-top:1px solid var(--linea)}
.mito h4{
  font:700 12px/1 var(--cuerpo); letter-spacing:.16em; text-transform:uppercase;
  margin:0 0 12px; color:var(--enlace);
}
.mito .m h4{color:#5A6C96}
.mito p:last-child{margin-bottom:0}

/* Preguntas */
details{border-bottom:1px solid var(--linea); max-width:var(--medida)}
details summary{
  cursor:pointer; padding:22px 44px 22px 0; position:relative; list-style:none;
  font:600 18px/1.4 var(--cuerpo); color:var(--tinta);
}
details summary::-webkit-details-marker{display:none}
details summary::after{
  content:""; position:absolute; right:10px; top:50%; width:11px; height:11px;
  border-right:2px solid var(--azul); border-bottom:2px solid var(--azul);
  transform:translateY(-70%) rotate(45deg); transition:transform .2s var(--ease);
}
details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
details .cuerpo{padding:0 0 22px}
details .cuerpo p:last-child{margin-bottom:0}

/* ============================================================
   Dato pendiente de la Fundación
   Se marca en pantalla a propósito: es preferible que se vea el
   hueco a publicar un teléfono inventado.
   ============================================================ */
.pendiente{
  background:repeating-linear-gradient(135deg,#FFF6D6 0 7px,#FFEFBE 7px 14px);
  color:#6B4E00; border:1px dashed #C9A227; border-radius:6px;
  padding:1px 8px; font:600 .92em/1.55 var(--cuerpo);
  /* Parte en varias líneas. Con `nowrap` una nota larga medía 780 px y
     metía barra horizontal en móvil: medido el 12 nov 2026 en /contacto,
     scrollWidth 800 contra 375 de pantalla.
     `box-decoration-break:clone` hace que el fondo y el borde se dibujen
     completos en cada línea; sin él, los trozos intermedios salen sin
     borde y parece un error de pintado. */
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}

/* ============================================================
   Pie
   ============================================================ */
.pie{background:var(--tinta); color:#BBC9E2; padding-block:clamp(48px,6vw,80px) 0}
.pie h2,.pie h3{color:#fff}
.pie a{color:#E1E9F7; text-decoration:none}
.pie a:hover{color:var(--senal); text-decoration:underline}
.pie-malla{
  display:grid; gap:40px;
  grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  padding-bottom:48px;
}
@media (max-width:900px){.pie-malla{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.pie-malla{grid-template-columns:1fr}}
.pie-marca img{height:84px; width:auto; filter:invert(1) brightness(2.6)}
.pie h4{
  font:700 12px/1 var(--cuerpo); letter-spacing:.16em; text-transform:uppercase;
  color:var(--rotulo-claro); margin:0 0 16px;
}
.pie ul{list-style:none; margin:0; padding:0}
.pie li{margin-bottom:11px; font-size:15.5px}
.pie-abajo{
  border-top:1px solid var(--linea-clara); padding-block:24px;
  display:flex; flex-wrap:wrap; gap:14px 28px; align-items:center;
  font-size:13.5px; color:#8FA1C0;
}
.pie-abajo p{margin:0; max-width:none}
.pie-abajo .credito{margin-left:auto}

/* Aviso médico: el sitio informa, no diagnostica. Va en el pie de
   todas las páginas por la misma razón por la que va en el folleto. */
.aviso-medico{
  border:1px solid var(--linea-clara); border-radius:12px;
  padding:18px 22px; font-size:14.5px; line-height:1.6; color:#C3D0E8;
  margin-bottom:40px;
}
.aviso-medico b{color:#fff}
.aviso-medico p{margin:0; max-width:none}

/* ============================================================
   Utilidades
   ============================================================ */
.centro{text-align:center}
.centro p,.centro .entrada{margin-inline:auto}
.ancho-corto{max-width:var(--medida)}
.acciones{display:flex; flex-wrap:wrap; gap:14px; margin-top:32px}
.solo-lectores{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.nota{font-size:14px; color:var(--tenue); max-width:var(--medida)}
.fondo-tinta .nota,.fondo-marino .nota{color:#A3B3D0}

/* ============================================================
   MOVIMIENTO
   Añadido el 12 nov 2026.

   Tres reglas que se respetan sin excepción:

   1. Nada se mueve si el sistema pide menos movimiento. Todo lo
      de aquí cuelga de `html.anima`, y esa clase sólo la pone el
      <head> cuando prefers-reduced-motion lo permite.
   2. Nada se esconde para siempre. Si anima.js no carga, un
      vigilante en el <head> quita la clase a los 2.5 s y todo
      vuelve a verse. Un sitio de salud no puede quedarse en
      blanco porque falló un script decorativo.
   3. Sólo se animan `opacity` y `transform`, que el navegador
      resuelve en la tarjeta gráfica. Nada de animar altura,
      margen ni posición: eso recalcula la maqueta en cada cuadro.
   ============================================================ */

/* ---- Revelado al entrar en pantalla ---- */
html.anima .revelar{
  opacity:0;
  transform:translateY(22px);
  transition:
    opacity .75s var(--ease) var(--retraso,0s),
    transform .75s var(--ease) var(--retraso,0s);
  will-change:opacity,transform;
}
html.anima .revelar.visible{
  opacity:1; transform:none; will-change:auto;
}

/* ---- Entrada de la portada ----
   No espera al desplazamiento: ya está en pantalla al cargar. */
@keyframes surge{
  from{opacity:0; transform:translateY(26px)}
  to{opacity:1; transform:none}
}
@keyframes ensoEntra{
  from{opacity:0; transform:translateY(-50%) scale(1.09)}
  to{opacity:.1; transform:translateY(-50%) scale(1)}
}
html.anima .portada h1{animation:surge .95s var(--ease) both .06s}
html.anima .portada .entrada{animation:surge .95s var(--ease) both .24s}
html.anima .portada .acciones{animation:surge .95s var(--ease) both .40s}
html.anima .portada::after{animation:ensoEntra 1.8s var(--ease) both .1s}

/* ---- La barra al desplazarse ----
   Se encoge, se opaca y gana una sombra muy baja. El cambio es
   pequeño a propósito: tiene que notarse sin llamar la atención. */
.barra{
  transition:box-shadow .3s var(--ease), background .3s var(--ease);
}
.barra-in{transition:min-height .3s var(--ease)}
.marca img{transition:height .3s var(--ease)}
.barra.encogida{
  background:rgba(255,255,255,.96);
  box-shadow:0 1px 0 rgba(30,58,115,.1), 0 8px 28px rgba(30,58,115,.07);
}
.barra.encogida .barra-in{min-height:62px}
.barra.encogida .marca img{height:46px}

/* ---- Subrayado que crece en el menú ---- */
.menu a:not(.boton){position:relative}
.menu a:not(.boton)::after{
  content:""; position:absolute; left:13px; right:13px; bottom:5px;
  height:1.5px; background:currentColor; border-radius:2px;
  transform:scaleX(0); transform-origin:left;
  transition:transform .32s var(--ease);
}
.menu a:not(.boton):hover::after,
.menu a[aria-current="page"]::after{transform:scaleX(1)}
@media (max-width:980px){.menu a:not(.boton)::after{display:none}}

/* ---- Botones ---- */
.boton{
  transition:transform .22s var(--ease), background .22s var(--ease),
             border-color .22s var(--ease), color .22s var(--ease),
             box-shadow .28s var(--ease);
}
.boton-fuerte:hover{box-shadow:0 10px 26px rgba(30,58,115,.26)}
.boton-senal:hover{box-shadow:0 10px 26px rgba(95,149,231,.38)}
.boton:active{transform:translateY(0) scale(.985)}

/* ---- Tarjetas ---- */
.tarjeta,.tarjeta-num{
  transition:transform .28s var(--ease), box-shadow .28s var(--ease),
             border-color .28s var(--ease);
}
a.tarjeta:hover{
  transform:translateY(-4px);
  border-color:rgba(61,122,189,.4);
  box-shadow:0 18px 40px rgba(30,58,115,.12);
}

/* ---- Jornadas e historial ---- */
.jor{transition:transform .28s var(--ease), box-shadow .28s var(--ease)}
.jor:hover{transform:translateY(-3px)}
.jor-foto{transition:transform .6s var(--ease)}
.jor:hover .jor-foto{transform:scale(1.035)}

/* ---- Preguntas desplegables ---- */
details summary{transition:color .2s var(--ease)}
details summary:hover{color:var(--enlace)}
@keyframes abre{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}
html.anima details[open] .cuerpo{animation:abre .34s var(--ease) both}

/* ---- Rótulo de sección: una línea corta que lo ancla ---- */
.rotulo{display:flex; align-items:center; gap:12px}
.rotulo::before{
  content:""; width:26px; height:1.5px; background:currentColor;
  flex:none; opacity:.55;
}

/* ============================================================
   ACABADOS
   ============================================================ */

/* Más aire arriba y titulares más apretados: es casi todo lo que
   separa una portada correcta de una que se siente cara. */
.portada-in{padding-block:clamp(88px,13vw,172px)}
h1{letter-spacing:-.022em}
h2{letter-spacing:-.016em}
.portada h1{letter-spacing:-.028em}

/* El degradado de la portada, en la escala azul nueva. */
.portada{
  background:
    radial-gradient(118% 92% at 80% 6%,var(--medio) 0%,transparent 58%),
    linear-gradient(168deg,var(--tinta) 0%,#1A3466 52%,var(--profundo) 100%);
}

/* Filete superior de las secciones oscuras: separa sin una línea dura. */
.fondo-tinta,.fondo-marino{position:relative}
.fondo-tinta::before,.fondo-marino::before{
  content:""; position:absolute; inset:0 0 auto; height:1px;
  background:linear-gradient(90deg,transparent,rgba(122,169,219,.45),transparent);
}

/* Las cifras, con la medida tabular para que no bailen al alinearse. */
.cifra b,.num{font-variant-numeric:tabular-nums}

/* El pie, un punto más profundo que la tinta. */
.pie{background:var(--profundo)}

/* Al imprimir, todo visible.
   El revelado esconde lo que aún no se ha desplazado hasta la pantalla.
   Si alguien imprime la página sin haber bajado —o la guarda como PDF—,
   esos bloques saldrían en blanco. Medido el 12 nov 2026: la portada
   mide 5975 px y una ventana típica ve 900, así que serían cinco de
   cada seis secciones. */
@media print{
  html.anima .revelar{opacity:1 !important; transform:none !important}
  html.anima .portada h1,
  html.anima .portada .entrada,
  html.anima .portada .acciones{animation:none !important; opacity:1}
  .barra{position:static}
}

/* Rejilla de cuatro: 2x2, no 3+1.
   `.malla-2` reparte por ancho mínimo, y con cuatro tarjetas en un
   contenedor de 1200 px daba tres arriba y una huérfana abajo. */
.malla-par{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
@media (min-width:1000px){.malla-par{grid-template-columns:1fr 1fr}}

/* El rótulo lleva una línea corta delante, y en las secciones
   centradas esa línea lo descolocaba a la izquierda. */
.centro .rotulo{justify-content:center}

/* ============================================================
   ILUSTRACIONES
   Registro: atlas de anatomía. Fondo casi negro, la pieza
   flotando con halo —sin marco ni caja—, acento cálido y
   secciones numeradas.

   El volumen sale de degradados radiales desplazados y de una
   luz de borde, no de sombras: una sombra sobre fondo oscuro
   no se ve.
   ============================================================ */
.escena{
  position:relative; overflow:hidden;
  background:
    radial-gradient(72% 58% at 50% 42%,#17336A 0%,transparent 72%),
    linear-gradient(175deg,#0D1B3A 0%,#080F24 100%);
  color:#C3D0E8;
}
.escena::before{
  content:""; position:absolute; inset:0 0 auto; height:1px;
  background:linear-gradient(90deg,transparent,rgba(122,169,219,.35),transparent);
}
.escena h2,.escena h3{color:#fff}
.escena .entrada{color:#9FB2D4}
.escena .rotulo{color:var(--rotulo-claro)}
.escena-malla{
  display:grid; gap:clamp(28px,4vw,64px); align-items:center;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.35fr);
}
@media (max-width:980px){.escena-malla{grid-template-columns:1fr}}
.ilu{display:block; width:100%; height:auto; overflow:hidden}

.ilu-rejilla line{stroke:#7AA9DB; stroke-width:.5; opacity:.07}
.ilu-silueta path{fill:none; stroke:#7AA9DB; stroke-width:1.2; opacity:.18;
  stroke-dasharray:5 8}

/* --- Órganos: relleno, contorno y luz de borde --- */
.org .relleno{opacity:.92}
.org .borde{fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.org .luz{fill:none; stroke-linecap:round; stroke-width:3; opacity:.5}
.o-pubis .borde{stroke:#AFC3DD}
/* El recto, con algo más de cuerpo: a 2.4 quedaba tan tenue que se
   leía como parte de la rejilla del fondo. */
.o-recto .borde{stroke:#86A9D8; stroke-width:3; opacity:.9}
.o-recto .relleno{fill:none !important; opacity:0}
.o-vesicula .borde{stroke:#8CB4E4}
.o-vejiga .borde{stroke:#A9CDF2; stroke-width:2.6}
.o-vejiga .luz{stroke:#DCEBFF}
.o-uretra .borde{stroke:#D7E9FF; stroke-width:3.4}
.o-prostata .borde{stroke:#EAF4FF; stroke-width:3.4}
.o-prostata .luz{stroke:#FFFFFF; stroke-width:3.5; opacity:.9}

/* El recto se dibuja como dos trazos, no como volumen: son las dos
   paredes de un conducto, y rellenarlas lo convertiría en dos salchichas. */

.ilu-etq path{fill:none; stroke:#A1C2E6; stroke-width:1; opacity:.55}
.ilu-etq circle{fill:#A1C2E6}
.ilu-etq text{font:600 18px/1 Manrope,sans-serif; fill:#D4E0F2; letter-spacing:.03em}
.ilu-etq-fuerte path{stroke:#EAF4FF; opacity:.95}
.ilu-etq-fuerte circle{fill:#EAF4FF; r:5}
.ilu-etq-fuerte text{fill:#FFFFFF; font-weight:800; font-size:23px}

/* --- Escala del PSA --- */
.ilu-psa .tramo{opacity:.92}
.ilu-psa .tramo-1{fill:#2F7F5C}
.ilu-psa .tramo-2{fill:#AD8600}
.ilu-psa .tramo-3{fill:#A54430}
.ilu-marcas text{font:600 15px/1 Manrope,sans-serif; fill:#C3D0E8; text-anchor:middle}
.ilu-aguja{transform:translate(197px,132px)}
.ilu-aguja path{fill:#fff}
.ilu-aguja line{stroke:#fff; stroke-width:2}
.ilu-aguja text{font:700 13px/1 Manrope,sans-serif; fill:#fff; text-anchor:middle;
  letter-spacing:.12em; text-transform:uppercase}
.ilu-llave{fill:none; stroke:#7AA9DB; stroke-width:1.4; opacity:.5}
.ilu-nota-psa text{font:500 17px/1 Manrope,sans-serif; fill:#A1C2E6; text-anchor:middle}

/* --- Contraste de detección --- */
.ilu-barra .rot{font:700 13px/1 Manrope,sans-serif; letter-spacing:.2em}
.ilu-barra .pista{fill:rgba(255,255,255,.07)}
.ilu-barra .cifra{font:700 42px/1 Manrope,sans-serif; fill:#fff}
.ilu-barra .pie{font:500 17px/1 Manrope,sans-serif; fill:#A3B3D0}
.ilu-barra-bien .relleno{fill:#3E9B6E}
.ilu-barra-bien .rot{fill:#7FD3AC}
.ilu-barra-mal .relleno{fill:#C1553C}
.ilu-barra-mal .rot{fill:#E9A091}

/* ============================================================
   Cómo entran las ilustraciones
   ============================================================ */
html.anima .org .borde,
html.anima .ilu-silueta path,
html.anima .ilu-llave{
  stroke-dasharray:1; stroke-dashoffset:1;
  transition:stroke-dashoffset 1.6s var(--ease) var(--retraso,0s);
}
html.anima .org .relleno,
html.anima .org .luz,
html.anima .ilu-aura{
  opacity:0;
  transition:opacity .9s var(--ease) calc(var(--retraso,0s) + .75s);
}
html.anima .ilu-etq,
html.anima .ilu-marcas,
html.anima .ilu-aguja,
html.anima .ilu-nota-psa text,
html.anima .ilu-barra .cifra,
html.anima .ilu-barra .pie,
html.anima .ilu-barra .rot{
  opacity:0; transition:opacity .7s var(--ease) var(--retraso,0s);
}
html.anima .ilu-barra .relleno{
  transform:scaleX(0); transform-origin:36px center;
  transition:transform 1.5s var(--ease) var(--retraso,0s);
}

/* El contenedor recibe .visible y arranca todo, escalonado: primero la
   silueta, luego los órganos de fondo, la próstata al final, y las
   etiquetas cuando el dibujo ya se entiende. */
.escena.visible .ilu-silueta path{stroke-dashoffset:0}
.escena.visible .org .borde{stroke-dashoffset:0}
.escena.visible .org .relleno,
.escena.visible .org .luz{opacity:.92}
.escena.visible .o-prostata .luz{opacity:.75}
.escena.visible .ilu-aura{opacity:1}
.escena.visible .o-pubis{--retraso:.15s}
.escena.visible .o-recto{--retraso:.3s}
.escena.visible .o-vesicula{--retraso:.5s}
.escena.visible .o-vejiga{--retraso:.68s}
.escena.visible .o-uretra{--retraso:.9s}
.escena.visible .o-prostata{--retraso:1.15s}
.escena.visible .ilu-aura{--retraso:1.3s}
.escena.visible .ilu-etq{opacity:1}
.escena.visible .ilu-etq:nth-of-type(1){--retraso:2.2s}
.escena.visible .ilu-etq:nth-of-type(2){--retraso:2.4s}
.escena.visible .ilu-etq:nth-of-type(3){--retraso:2.55s}
.escena.visible .ilu-etq:nth-of-type(4){--retraso:2.7s}
.escena.visible .ilu-etq:nth-of-type(5){--retraso:2.85s}
.escena.visible .ilu-etq:nth-of-type(6){--retraso:3s}
.escena.visible .ilu-llave{stroke-dashoffset:0; --retraso:.4s}
.escena.visible .ilu-marcas{opacity:1; --retraso:.55s}
.escena.visible .ilu-aguja{opacity:1; --retraso:.95s}
.escena.visible .ilu-nota-psa text{opacity:1; --retraso:1.25s}
.escena.visible .ilu-barra .rot{opacity:1; --retraso:.1s}
.escena.visible .ilu-barra .relleno{transform:none}
.escena.visible .ilu-barra-mal .relleno{--retraso:.5s}
.escena.visible .ilu-barra .cifra{opacity:1; --retraso:1.15s}
.escena.visible .ilu-barra .pie{opacity:1; --retraso:1.3s}

/* La próstata respira: muy lento y muy poco, lo justo para que el ojo
   vuelva a ella después de leer. */
@keyframes latido{0%,100%{opacity:1} 50%{opacity:.55}}
html.anima .escena.visible .ilu-aura{animation:latido 4s var(--ease) 3.2s infinite}

/* El barrido del escáner: una pasada al entrar. */
@keyframes barre{
  from{transform:translateY(0); opacity:1}
  80%{opacity:1}
  to{transform:translateY(700px); opacity:0}
}
.ilu-barrido{opacity:0}
html.anima .escena.visible .ilu-barrido{
  opacity:1; animation:barre 2.8s cubic-bezier(.4,0,.2,1) .25s 1 both;
}
html:not(.anima) .ilu-barrido{display:none}

/* ============================================================
   Secciones numeradas, como en un atlas
   ============================================================ */
.paso{display:flex; align-items:center; gap:14px; margin:0 0 18px}
.paso b{
  flex:none; width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--senal); color:var(--acento-texto);
  font:800 15px/1 var(--cuerpo); font-variant-numeric:tabular-nums;
}
.paso span{
  font:700 12px/1 var(--cuerpo); letter-spacing:.2em; text-transform:uppercase;
  color:var(--enlace);
}
.escena .paso span{color:var(--rotulo-claro)}
.escena .paso b{background:var(--senal); color:var(--acento-texto)}

/* ============================================================
   SIMULACIÓN: del cuerpo entero a la próstata
   Un solo SVG y una cámara. El dibujo no se mueve: se mueve el
   encuadre, que es como se hace en vídeo y cuesta muchísimo
   menos que animar cada pieza por separado.

   Ciclo de 20 s:
     0-8 %    el cuerpo, entero y sólido
     8-30 %   la cámara baja a la pelvis
    14-32 %   el cuerpo se vuelve radiografía
    22-38 %   aparecen los órganos
    42-56 %   se apagan todos menos la próstata y la uretra
    56-64 %   entran los rótulos
    64-86 %   se sostiene
    86-93 %   se apaga
    93-100 %  vuelve al principio, ya invisible, y reaparece

   El reinicio de cámara ocurre con la escena apagada: un
   alejamiento rápido marea y un corte no se nota.

   ESTADO BASE = ESTADO FINAL. Sin `html.anima` —o sin
   JavaScript— se ve el encuadre cerrado, con los órganos y los
   rótulos puestos. Quien pida menos movimiento no pierde
   información, sólo la película.
   ============================================================ */
.ilu-sim{overflow:hidden}

/* --- Estado base: lo que se ve si nada se anima --- */
.sim-camara{transform:translate(500px,350px) scale(8.6) translate(-498px,-364px)}
.sim-figura-llena{opacity:0}
.sim-figura-llena path{fill:#2B3F5F}
.sim-figura-linea{opacity:.18}
.sim-figura-linea path{fill:none; stroke:#7AA9DB; stroke-width:.9;
  vector-effect:non-scaling-stroke}
.sim-organos .o-pubis,
.sim-organos .o-recto,
.sim-organos .o-vesicula,
.sim-organos .o-vejiga{opacity:.14}
.sim-rotulos{opacity:1}
.sim-rotulos .rot path{fill:none; stroke:#A1C2E6; stroke-width:1; opacity:.55}
.sim-rotulos .rot circle{fill:#A1C2E6}
.sim-rotulos .rot text{font:600 17px/1 Manrope,sans-serif; fill:#D4E0F2;
  letter-spacing:.03em}
.sim-rotulos .rot-fuerte path{stroke:#EAF4FF; opacity:.95}
.sim-rotulos .rot-fuerte circle{fill:#EAF4FF; r:5}
.sim-rotulos .rot-fuerte text{fill:#FFFFFF; font-weight:800; font-size:22px}

/* --- La película, sólo cuando se permite movimiento --- */
@keyframes sim-camara{
  0%,8%   {transform:translate(500px,350px) scale(1) translate(-500px,-350px)}
  30%,86% {transform:translate(500px,350px) scale(8.6) translate(-498px,-364px)}
  93%,100%{transform:translate(500px,350px) scale(1) translate(-500px,-350px)}
}
@keyframes sim-llena{
  0%,12%{opacity:1} 30%,88%{opacity:0} 93%{opacity:0} 100%{opacity:1}
}
@keyframes sim-linea{
  /* Entra marcado mientras se ve el cuerpo entero —es lo que cuenta que
     el cuerpo se volvió transparente— y se apaga al cerrar el encuadre,
     donde sólo estorbaría a los rótulos. */
  0%,10%{opacity:0} 26%,34%{opacity:.55} 52%,86%{opacity:.18}
  93%,100%{opacity:0}
}
@keyframes sim-interior{
  0%,20%{opacity:0} 36%,86%{opacity:1} 92%,100%{opacity:0}
}
/* Los órganos que se apagan. Escalonados para que se lea como una
   secuencia y no como un interruptor. */
@keyframes sim-apaga{
  0%,42%{opacity:1} 56%,86%{opacity:.14} 100%{opacity:.14}
}
@keyframes sim-rotulos{
  0%,56%{opacity:0} 64%,86%{opacity:1} 91%,100%{opacity:0}
}
@keyframes sim-escena{
  0%,86%{opacity:1} 93%{opacity:0} 97%,100%{opacity:1}
}

html.anima .escena.visible .ilu-sim{animation:sim-escena 20s linear infinite}
html.anima .escena.visible .sim-camara{
  animation:sim-camara 20s cubic-bezier(.65,0,.35,1) infinite;
}
html.anima .escena.visible .sim-figura-llena{animation:sim-llena 20s linear infinite}
html.anima .escena.visible .sim-figura-linea{animation:sim-linea 20s linear infinite}
html.anima .escena.visible .sim-interior{animation:sim-interior 20s linear infinite}
html.anima .escena.visible .sim-rotulos{animation:sim-rotulos 20s linear infinite}
html.anima .escena.visible .sim-organos .o-pubis{animation:sim-apaga 20s linear infinite; animation-delay:0s}
html.anima .escena.visible .sim-organos .o-recto{animation:sim-apaga 20s linear infinite; animation-delay:.4s}
html.anima .escena.visible .sim-organos .o-vesicula{animation:sim-apaga 20s linear infinite; animation-delay:.8s}
html.anima .escena.visible .sim-organos .o-vejiga{animation:sim-apaga 20s linear infinite; animation-delay:1.2s}

/* Dentro de la simulación, los órganos NO se dibujan trazo a trazo: ya
   entran con el acercamiento, y hacer las dos cosas a la vez se lee
   como un error. */
html.anima .ilu-sim .org .borde{stroke-dasharray:none; stroke-dashoffset:0}
html.anima .ilu-sim .org .relleno,
html.anima .ilu-sim .org .luz,
html.anima .ilu-sim .ilu-aura{opacity:1; transition:none}
.ilu-sim .ilu-aura{opacity:1}

/* ============================================================
   Lo que no se ve, no se anima
   La simulación es un bucle infinito sobre un grupo con filtros
   de ruido y desenfoque: el navegador los recalcula en cada
   cuadro mientras el encuadre se mueve. Dejarla corriendo
   mientras alguien lee el pie es gasto puro.

   Se PAUSA en vez de quitarse, para que al volver siga donde
   estaba en lugar de empezar de cero. Si el JavaScript no
   cargara, la clase nunca se pone y nada se pausa: la animación
   se comporta como antes, que es el fallo correcto.
   ============================================================ */
html.anima .escena:not(.en-pantalla) .ilu-sim,
html.anima .escena:not(.en-pantalla) .sim-camara,
html.anima .escena:not(.en-pantalla) .sim-figura-llena,
html.anima .escena:not(.en-pantalla) .sim-figura-linea,
html.anima .escena:not(.en-pantalla) .sim-interior,
html.anima .escena:not(.en-pantalla) .sim-rotulos,
html.anima .escena:not(.en-pantalla) .sim-organos .org,
html.anima .escena:not(.en-pantalla) .ilu-aura{
  animation-play-state:paused;
}

/* Dentro de la simulación el aura NO late.
   Ya tiene su propia coreografía, y un latido infinito sobre un
   elemento con filtro obliga a recalcular el desenfoque en cada
   cuadro incluso cuando la cámara está quieta. El latido se queda
   para el esquema estático, donde sí hace falta que el ojo vuelva
   a la próstata. */
html.anima .escena.visible .ilu-sim .ilu-aura{animation:none}

/* ============================================================
   La prueba: lo que la gente imagina contra lo que es
   ============================================================ */
.ilu-prueba{overflow:visible}
.pr-jeringa rect{fill:none; stroke:#7E93B4; stroke-width:2.4}
.pr-jeringa path{fill:none; stroke:#7E93B4; stroke-width:2.4;
  stroke-linejoin:round}
.pr-jeringa line{stroke:#7E93B4; stroke-width:2.4; stroke-linecap:round}
.pr-no{opacity:.5}
.pr-aro{fill:none; stroke:#C1553C; stroke-width:3.5; opacity:.9}
.pr-tacha{stroke:#C1553C; stroke-width:3.5; stroke-linecap:round}
.pr-pie{font:600 18px/1 Manrope,sans-serif; fill:#A3B3D0; text-anchor:middle}
.pr-pie-fuerte{fill:#fff; font-weight:700; font-size:21px}
/* En SVG, un atributo de presentación pierde contra cualquier
   regla CSS. `text-anchor="end"` en el elemento no hacía nada
   porque .pr-pie ya fijaba `middle`. */
.pr-pie-der{text-anchor:end}

.pr-borde{fill:none; stroke:#A9CDF2; stroke-width:2.6; stroke-linejoin:round}
.pr-una{fill:rgba(207,228,255,.3); stroke:#CFE4FF; stroke-width:1.8}
.pr-gota path{fill:#C92D2D; stroke:#8E1A1A; stroke-width:1.4}
.pr-brillo{fill:#fff; opacity:.5}

/* Entra escalonado: primero lo que NO es, después lo que sí.
   Ese orden importa: la imagen tiene que desmentir antes de afirmar. */
html.anima .pr-no,
html.anima .pr-si,
html.anima .pr-gota{opacity:0; transition:opacity .8s var(--ease) var(--retraso,0s)}
html.anima .pr-no{--retraso:.1s}
html.anima .pr-si{--retraso:.7s}
html.anima .pr-gota{--retraso:1.5s}
.escena.visible .pr-no{opacity:.5}
.escena.visible .pr-si,
.escena.visible .pr-gota{opacity:1}


/* ============================================================
   Aviso legal destacado dentro de un texto legal
   Se usa para lo que de verdad hay que leer: en el aviso de
   privacidad, el párrafo de los datos sensibles.
   ============================================================ */
.aviso-legal{
  border-left:3px solid var(--senal); background:#FFFCEA;
  padding:20px 24px; border-radius:0 10px 10px 0;
  margin:26px 0; max-width:var(--medida);
}
.aviso-legal p{margin:0; font-size:16px}
.aviso-legal strong{color:var(--tinta)}

/* En las páginas legales los títulos van algo más chicos: son muchos
   y a tamaño de portada partirían el texto en bloques inconexos. */
.ancho-corto h2{font-size:clamp(23px,2.6vw,30px)}
.ancho-corto h3{font-size:clamp(18px,1.9vw,21px)}

/* ============================================================
   HUECOS
   Sitios reservados para material que todavía no existe: una
   fotografía, un logotipo de aliado, un retrato.

   Se dibujan a propósito, con su medida escrita. Un hueco que
   se ve como hueco comunica «aquí va una foto de 3:2»; un hueco
   disimulado comunica «esta página está rota». En una propuesta
   lo primero es información y lo segundo es un problema.

   Cuando llegue el material, se sustituye el bloque y ya.
   ============================================================ */
.hueco{
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:10px; text-align:center;
  padding:26px 22px; border-radius:14px;
  border:1.5px dashed rgba(47,84,158,.42);
  background:
    repeating-linear-gradient(135deg,
      rgba(47,84,158,.04) 0 10px, transparent 10px 20px);
  color:var(--enlace);
  min-height:150px;
}
.hueco svg{width:30px; height:30px; opacity:.55}
.hueco b{font:700 15px/1.3 var(--cuerpo); color:var(--tinta)}
.hueco span{
  font:600 11.5px/1.3 var(--cuerpo); letter-spacing:.11em;
  text-transform:uppercase; color:var(--enlace); opacity:.85;
}
.hueco em{font:400 13.5px/1.45 var(--cuerpo); font-style:normal;
  color:var(--tenue); max-width:34ch}

/* Sobre fondo oscuro cambia de ropa pero no de idea. */
.escena .hueco,.fondo-tinta .hueco,.fondo-marino .hueco{
  border-color:rgba(161,194,230,.42); color:var(--rotulo-claro);
  background:repeating-linear-gradient(135deg,
    rgba(161,194,230,.05) 0 10px, transparent 10px 20px);
}
.escena .hueco b,.fondo-tinta .hueco b,.fondo-marino .hueco b{color:#fff}
.escena .hueco span,.fondo-tinta .hueco span,.fondo-marino .hueco span{
  color:var(--rotulo-claro);
}
.escena .hueco em,.fondo-tinta .hueco em,.fondo-marino .hueco em{color:#A3B3D0}

/* Proporciones de uso común, para que el hueco ocupe en la maqueta
   exactamente lo que ocupará la imagen. */
.hueco-32{aspect-ratio:3/2; min-height:0}
.hueco-45{aspect-ratio:4/5; min-height:0}
.hueco-169{aspect-ratio:16/9; min-height:0}
.hueco-logo{min-height:104px; padding:18px}
.hueco-logo b{font-size:14px}

/* ============================================================
   Formulario
   Diseñado y accesible, pero SIN destino: el botón va inhabilitado
   a propósito hasta que se decida a dónde llegan los mensajes. Un
   formulario que parece enviar y no envía es peor que no tenerlo.
   ============================================================ */
.formulario{display:flex; flex-direction:column; gap:18px}
.formulario label{display:flex; flex-direction:column; gap:7px}
.formulario label > span{
  font:700 12px/1 var(--cuerpo); letter-spacing:.1em;
  text-transform:uppercase; color:var(--enlace);
}
.formulario input[type=text],
.formulario input[type=email],
.formulario select,
.formulario textarea{
  font:400 16px/1.5 var(--cuerpo); color:var(--texto);
  padding:13px 15px; border-radius:10px;
  border:1.5px solid var(--linea); background:var(--papel);
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
  width:100%;
}
.formulario textarea{resize:vertical; min-height:120px}
.formulario input:focus,
.formulario select:focus,
.formulario textarea:focus{
  border-color:var(--azul); box-shadow:0 0 0 3px rgba(61,122,189,.18);
}
.casilla-form{flex-direction:row !important; align-items:flex-start; gap:12px}
.casilla-form input{margin-top:3px; width:18px; height:18px; flex:none;
  accent-color:var(--enlace)}
/* Lleva `.formulario` delante a propósito: sin él,
   `.formulario label > span` (0,1,2) gana por especificidad a
   `.casilla-form > span` (0,1,1) y el texto de la casilla salía en
   versalitas espaciadas, ilegible. */
.formulario .casilla-form > span{
  font:400 14.5px/1.5 var(--cuerpo); color:var(--texto);
  letter-spacing:0; text-transform:none;
}
.formulario button[disabled]{opacity:.45; cursor:not-allowed}
.formulario button[disabled]:hover{transform:none; box-shadow:none}

/* El hueco de foto dentro de una tarjeta de jornada ocupa exactamente
   lo que ocupará la imagen, para que la maqueta no se mueva cuando
   llegue el material. */
.jor-hueco{padding:14px 14px 0}
.jor-hueco .hueco{aspect-ratio:3/2; min-height:0; border-radius:10px}