/* portalecm · portada (front-page.php). Rehecha el 2026-10-09 (plan: ~/ECMs/99_archivados/08_web/plan-portada-v2.md).
   Una idea por banda; las bandas alternan crema (--papel) y crema claro (--hoja). La audacia se gasta en las tarjetas
   de historias. Sin botones: se navega por tarjetas y enlaces. */
ul,ol{margin:0;padding:0;list-style:none}

/* Bandas: .gris ocupa todo el ancho de la ventana aunque el body tenga margen lateral */
.seccion{padding-block:clamp(4.5rem,9vw,7rem)}
.gris{background:var(--hoja);box-shadow:0 0 0 100vmax var(--hoja);clip-path:inset(0 -100vmax)}
.seccion-cabeza{display:grid;gap:1rem;max-width:40rem}
.seccion-cabeza h2{font-size:clamp(2.1rem,4.6vw,3.25rem);line-height:1.06;letter-spacing:-.025em}
.seccion-cabeza p{font-size:clamp(1.2rem,2vw,1.375rem);line-height:1.45;color:var(--suave);text-wrap:pretty}
.seccion-cabeza+*{margin-top:clamp(2.25rem,5vw,3.25rem)}
.datos{color:var(--suave);font-size:1rem;line-height:1.45}
.estado{display:inline-block;font-size:.9375rem;line-height:1.2;font-weight:700;color:var(--suave);border:1.5px dashed var(--suave);border-radius:999px;padding:.25rem .75rem;white-space:nowrap}

/* 1. Apertura «En la luz» (0.12.16, elegida por Miguel el 2026-10-13 entre dos maquetas; antes, 0.12.12-0.12.15).
   En el móvil y en la tableta en vertical, el dibujo vertical ocupa la primera pantalla entera y el título entra
   sobre la niebla de abajo; en pantallas apaisadas, también abajo y centrado (0.12.18). Sin movimiento al
   bajar (se probó «hacia la luz» en 0.12.16 y Miguel lo quitó). El subtítulo de Miguel, literal, más fino y en una línea. */
.portada-apertura{display:flex;flex-direction:column;align-items:center;margin-inline:calc(-1 * var(--canal));padding:0 var(--canal) clamp(3.5rem,8vh,5.5rem);text-align:center}
.portada-apertura h1{position:relative;z-index:1;max-width:66rem;margin-top:-11.5rem;font-size:clamp(2.2rem,10.5vw,4.1rem);line-height:1.02;letter-spacing:-.03em}
.portada-apertura h1 span{display:block}
.portada-apertura h1 span+span{margin-top:.65rem;font-size:clamp(1.05rem,5.2vw,1.6rem);font-weight:600;letter-spacing:0;line-height:1.3;color:var(--suave);white-space:nowrap}
.portada-apertura .entradilla{max-width:40rem;margin:2rem auto 0;font-size:clamp(1.25rem,2.4vw,1.5rem);line-height:1.45;color:var(--suave);text-wrap:pretty}
.portada-apertura .que-es{max-width:36rem;margin:1.75rem auto 0;padding:1rem 1.25rem;background:var(--hoja);border-radius:var(--radio);text-align:left;font-size:1.0625rem;line-height:1.5}
.apertura-imagen{order:-1;align-self:stretch;margin:0 calc(-1 * var(--canal))}
.apertura-imagen img,.tema-imagen img{display:block;width:100%;height:auto;object-fit:cover;background:var(--hoja)}
.apertura-imagen img{height:max(22rem,calc(100svh - 4.25rem));background:none;object-position:15% 30%;-webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent)}
/* En oscuro, la niebla se funde con el fondo oscuro y la tinta clara no se leería encima: el título va debajo */
@media (prefers-color-scheme:dark){
  .apertura-imagen img{-webkit-mask-image:linear-gradient(#000 55%,transparent 95%);mask-image:linear-gradient(#000 55%,transparent 95%)}
  .portada-apertura h1{margin-top:-2.25rem}
}
/* …y para que el título siga en la primera pantalla, el dibujo deja sitio debajo (solo en vertical) */
@media (prefers-color-scheme:dark) and (max-width:40rem),(prefers-color-scheme:dark) and (max-width:64rem) and (orientation:portrait){
  .apertura-imagen img{height:max(18rem,calc(100svh - 4.25rem - 11rem))}
}
/* Pantallas apaisadas (ordenador, portátil, tableta en horizontal): el dibujo a un 70 % de la pantalla y el título
   abajo, centrado, entrando en la niebla, como en las historias (0.12.18, Miguel). En 0.12.16-0.12.17 iba dentro de la
   luz, a la derecha: a Miguel le gustó menos, y el subtítulo chocaba con las figuras que esperan. */
@media (min-width:64.01rem),(min-width:40.01rem) and (orientation:landscape){
  .apertura-imagen img{height:clamp(24rem,70vh,max(46rem,38.5vw));object-position:50% 40%;-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}
  .portada-apertura h1{margin-top:-7rem;font-size:clamp(2.25rem,5.5vw,4.1rem);line-height:1.04}
  .portada-apertura h1 span+span{margin-top:.75rem;font-size:clamp(1.05rem,2.2vw,1.6rem)}
  .portada-apertura .entradilla{margin-top:1.5rem}
}
@media (prefers-color-scheme:dark) and (min-width:64.01rem),(prefers-color-scheme:dark) and (min-width:40.01rem) and (orientation:landscape){
  .apertura-imagen img{-webkit-mask-image:linear-gradient(#000 50%,transparent 92%);mask-image:linear-gradient(#000 50%,transparent 92%)}
  .portada-apertura h1{margin-top:-3rem}
}
/* El dibujo vivo (0.12.19): un vídeo de 4,8 s en bucle encima de la imagen, con el mismo encuadre y el mismo fundido.
   Lo pone portada.js al terminar de cargar la página (la imagen sigue siendo lo primero que se ve); con «reducir
   movimiento» o el ahorro de datos, no se carga. El botón lo para (una animación de más de 5 s tiene que poder pararse). */
.apertura-imagen{position:relative}
.apertura-imagen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:15% 30%;opacity:0;transition:opacity .9s ease;pointer-events:none;-webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent)}
.apertura-imagen.en-marcha video{opacity:1}
/* Con el vídeo en marcha, la imagen de debajo se va: en la franja que se funde con el papel los dos son semitransparentes
   y se veía la silueta quieta de la foto detrás de la que camina (Miguel, 0.12.20). */
.apertura-imagen img{transition:opacity .9s ease}
.apertura-imagen.en-marcha img{opacity:0}
@media (prefers-color-scheme:dark){
  .apertura-imagen video{-webkit-mask-image:linear-gradient(#000 55%,transparent 95%);mask-image:linear-gradient(#000 55%,transparent 95%)}
}
@media (min-width:64.01rem),(min-width:40.01rem) and (orientation:landscape){
  .apertura-imagen video{object-position:50% 40%;-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}
}
@media (prefers-color-scheme:dark) and (min-width:64.01rem),(prefers-color-scheme:dark) and (min-width:40.01rem) and (orientation:landscape){
  .apertura-imagen video{-webkit-mask-image:linear-gradient(#000 50%,transparent 92%);mask-image:linear-gradient(#000 50%,transparent 92%)}
}

/* 2. Historias: las tarjetas y las bolas están en tarjetas.css (un solo sistema para toda la web, 0.9.6). */

/* 3. Qué cuentan: tres dibujos animados */
.tres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.5rem 2rem}
.v{margin:0;background:var(--hoja);border-radius:var(--radio-grande);overflow:hidden}
.v svg{display:block;width:100%;height:auto}
.cuenta h3{font-size:1.5rem;line-height:1.2;margin-top:1.25rem}
.cuenta p{margin-top:.4rem;text-wrap:pretty}
.cuenta .datos{margin-top:.5rem}
.cuentan-pie{max-width:36rem;margin-top:2.5rem}
.cuentan-pie p{color:var(--suave);font-size:1.0625rem;line-height:1.45}

/* 4. Cómo comprobamos: las cinco preguntas y, al lado, cómo se marcan y un ejemplo */
.metodo-cuerpo{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:2rem 4rem;align-items:start}
.preguntas{counter-reset:pregunta;border-top:1px solid var(--filete)}
.preguntas li{counter-increment:pregunta;display:grid;grid-template-columns:2rem minmax(0,1fr);gap:1rem;padding-block:1.1rem;border-bottom:1px solid var(--filete);font-size:clamp(1.2rem,1.8vw,1.375rem);line-height:1.4;text-wrap:pretty}
.preguntas li::before{content:counter(pregunta);font-weight:800;color:var(--suave)}
.metodo-lado{background:var(--papel);border-radius:var(--radio-grande);padding:1.5rem 1.5rem 1.25rem}
.metodo-titulo{font-weight:700}
.leyenda{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin-top:.75rem;font-size:1rem}
.leyenda .bola{width:1.1rem;height:1.1rem;border-width:2px}
.aclaracion{margin-top:1.25rem;font-size:1.0625rem;line-height:1.5}
.metodo-ejemplo{display:grid;gap:.6rem;margin-top:1.25rem;padding-top:1.1rem;border-top:1px solid var(--filete);color:var(--tinta);text-decoration:none;font-weight:700}
.metodo-ejemplo>span:first-child{color:var(--enlace)}
@media (hover:hover) and (pointer:fine){
  .metodo-ejemplo:hover>span:first-child{text-decoration:underline}
}

/* 5. Para entender: seis tarjetas con ilustración */
.temas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
.tema{display:grid;align-content:start;background:var(--hoja);border-radius:var(--radio-grande);overflow:hidden;padding-bottom:1.25rem}
.tema-imagen img{aspect-ratio:4/3}
.tema h3{padding:1.1rem 1.25rem 0;font-size:1.25rem;line-height:1.25}
.tema p{padding:.4rem 1.25rem 0;color:var(--suave);font-size:1.0625rem;line-height:1.45;text-wrap:pretty}
.tema .estado{justify-self:start;margin:1rem 1.25rem 0}

/* 6. El archivo: las cifras, grandes */
.cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(11.5rem,1fr));gap:1rem}
.cifras li{display:grid;gap:.5rem;align-content:start;background:var(--papel);border-radius:var(--radio);padding:1.25rem 1.25rem 1.4rem}
.cifras b{font-weight:800;font-size:clamp(2.25rem,4vw,2.75rem);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.cifras span{font-size:1rem;line-height:1.45;color:var(--suave)}
.promesa{margin-top:clamp(2.5rem,5vw,3.5rem);font-size:clamp(1.3rem,2.2vw,1.5rem);line-height:1.4;font-weight:700}

/* Dibujos y su movimiento: se mueven una vez al entrar en pantalla (portada.js) */
.t{fill:none;stroke:var(--tinta);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.t-fino{stroke-width:2}
.t-raya{stroke-dasharray:5 6}
.m{fill:var(--tinta)}
.halo{fill:url(#halo)}
.sol{fill:var(--luz)}
.gira{transform-box:fill-box;transform-origin:center}
@keyframes aparecer{
  from{opacity:0}
}
@keyframes crecer{
  from{transform:scale(.08);opacity:.25}
}
@keyframes elevar{
  from{transform:translateY(66px);opacity:0}
}
@keyframes acercar{
  from{transform:translateX(-16px)}
}
.viva .a-ap{animation:aparecer var(--t,.7s) var(--d,0s) both ease-out}
.viva .a-cre{animation:crecer var(--t,2.6s) var(--d,0s) both cubic-bezier(.2,.7,.2,1)}
.viva .a-ele{animation:elevar var(--t,2.4s) var(--d,0s) both cubic-bezier(.3,.7,.2,1)}
.viva .a-ace{animation:acercar var(--t,3s) var(--d,0s) both ease-out}

@media (max-width:60rem){
  .tres{grid-template-columns:minmax(0,1fr);max-width:30rem}
  .metodo-cuerpo{grid-template-columns:minmax(0,1fr)}
  .temas{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:40rem){
  .temas{grid-template-columns:minmax(0,1fr)}
}
/* Para entender y Estudios en el móvil (0.12.16): una lista con la miniatura a la izquierda, para que se vean todas
   las preguntas sin deslizar (los carruseles de 0.12.12 se quitaron: casi nadie pasa de la primera tarjeta). Toda la
   fila se pulsa; «Leer» sobra. */
@media (max-width:39.99rem){
  #entender .temas,#estudios .temas{gap:.75rem}
  #entender .tema,#estudios .tema{grid-template-columns:6rem minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:1rem;align-items:start;padding:.75rem}
  #entender .tema-imagen,#estudios .tema-imagen{grid-row:1 / span 2}
  #entender .tema-imagen img,#estudios .tema-imagen img{aspect-ratio:1;border-radius:var(--radio)}
  #entender .tema h3,#estudios .tema h3{padding:0;font-size:1.125rem;line-height:1.25}
  #entender .tema p,#estudios .tema p{padding:.3rem 0 0;font-size:1rem;line-height:1.4}
  #entender .tema-accion,#estudios .tema-accion{display:none}
  #entender .tema .estado,#estudios .tema .estado{grid-column:2;margin:.5rem 0 0}
}


/* Páginas de sección (0.5.2): Historias y Para entender. Cabecera con migas, título e introducción. */
.cabeza-pagina{padding-block:clamp(2.5rem,6vw,4rem) clamp(2.5rem,6vw,3.5rem)}
.cabeza-pagina h1{font-size:clamp(2.6rem,6vw,4rem);line-height:1.02;letter-spacing:-.03em}
.cabeza-pagina .entradilla-seccion{margin-top:1rem;max-width:40rem;font-size:clamp(1.2rem,2vw,1.375rem);line-height:1.45;color:var(--suave);text-wrap:pretty}
.cabeza-pagina .entradilla-seccion a{font-weight:700}
.seccion.pegada{padding-top:clamp(2.5rem,5vw,3.5rem)}
.tema--listo{position:relative}
.tema--listo h3 a{color:var(--tinta);text-decoration:none}
.tema--listo h3 a::after{content:"";position:absolute;inset:0}
.tema-accion{justify-self:start;margin:1rem 1.25rem 0;font-weight:700;color:var(--enlace)}
@media (hover:hover) and (pointer:fine){
  .tema--listo:hover{box-shadow:0 0 0 2px var(--enlace)} .tema--listo:hover h3 a{color:var(--enlace)}
}
/* «Ver todo» bajo el título de cada sección de la portada */
.seccion-cabeza .ver-todo{font-size:1.125rem;color:inherit}
.seccion-cabeza .ver-todo a{display:inline-flex;align-items:center;min-height:2.75rem;font-weight:700;text-decoration:none}
@media (hover:hover) and (pointer:fine){ .seccion-cabeza .ver-todo a:hover{text-decoration:underline} }

/* Portada v5 (2026-11-09): imagen y vídeo a la medida exacta de la caja (21:9 y 1:2), así que se centran. */
/* La v6 del ordenador, centrada; solo donde se ve la imagen ancha (las mismas medidas que el <picture>). Desde 0.16.27, en
   apaisado se ven la 21:9 o la 16:9 (tableta en horizontal), las dos centradas; en vertical, la 9:16 o la 3:4, un poco
   hacia arriba y hacia la izquierda (15% 30%: la cama está en la esquina izquierda; si sobra ancho, se recortan las nubes de la derecha), porque abajo solo hay nubes bajo el título. En pantallas muy anchas, la caja crece
   con el ancho (hasta un 38,5 % del ancho de la ventana) para que la 21:9 no se recorte por arriba y por abajo. */
@media (min-width:64.0625rem),(min-width:40.0625rem) and (orientation:landscape){.apertura-imagen.apertura-imagen--exacta img,.apertura-imagen.apertura-imagen--exacta video{object-position:50% 50%}}