/* Piel de la web pública de Pactto.
   Implementa el plano de Claude Design (proyecto "Imágenes rotas y consecu…",
   pactto_web_*.dc.html) en HTML y CSS a mano: sin React, sin Babel y sin fuentes
   embebidas. La maqueta de diseño pesaba ~4 MB; estas páginas, decenas de KB.

   Los valores salen del plano, que a su vez hereda del DESIGN_SYSTEM_PACTTO.md.
   Si mañana cambia el sistema de diseño hay que traerlo aquí a mano: esta capa
   comparte VALORES con la app, no código. Es el precio de que se vea al instante. */

:root {
  --pine: #1E4A38;
  --pine-dk: #163629;
  --ink: #2A2926;
  --ink-soft: #4A4843;
  --muted: #6E6B63;
  --line: #C7C4BC;
  --line-soft: #E4E1DA;
  --paper: #FFFEFB;
  --cream: #FBFAF7;
  --mint: #F0F5F2;
  /* SALVIA: sacada de la banda de cabecera, no del catalogo. El verde de su lado izquierdo
     es #92A694; aclarado al 14% sobre crema da esto. Es el fondo de los bloques con acento:
     mas terroso que el menta, y de la misma familia que la imagen que abre las paginas. */
  --salvia: #E9EDE9;
  --sand: #F2F1EC;
  --oxido: #8E3A26;
  --sombra: 0 1px 2px rgba(42, 41, 38, .04);
  --jakarta: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --marco: 1200px;
  --lado: 32px;
}

/* EL COLOR DE SELECCIONAR TEXTO (30-jul). Faltaba, asi que al arrastrar el raton sobre
   cualquier texto salia el AZUL DEL SISTEMA operativo — el unico color de todo el sitio
   que no era nuestro, y encima el mas chillon. Carlos lo vio en la cabecera de
   Organizaciones y lo tomo por un subrayado de la pagina; no lo era, pero el sintoma era
   real: el sitio perdia su gramatica visual en cuanto alguien tocaba una palabra.
   Salvia de fondo y tinta normal encima: se lee igual de bien y no grita. */
::selection { background: var(--salvia); color: var(--ink); }

/* LA TIPOGRAFÍA, ALOJADA AQUÍ Y NO EN GOOGLE (Carlos, 27-jul, con permiso expreso para
   descargarla). Era el punto que el Consejo marcó como bloqueante en `EXP-20260727-01`:
   mientras la letra viniera de `fonts.googleapis.com`, la IP de cada visitante llegaba a
   Google sin que nadie lo consintiera. Declararlo era veraz, pero eliminarlo es mejor.

   UN SOLO ARCHIVO PARA LOS CUATRO PESOS: Plus Jakarta Sans es una fuente VARIABLE, así que
   los cuatro woff2 que sirve Google son byte a byte el mismo archivo (comprobado por
   md5). 27 KB en total, no 109. `font-weight: 100 900` le dice al navegador que ese
   archivo cubre todo el rango.

   `font-display: swap` conserva el comportamiento que traía el enlace de Google: el texto
   se ve desde el primer momento con la letra del sistema y salta a la buena al cargar.
   Subconjunto latino, que es el que necesitan el español y el catalán.

   Licencia: SIL Open Font License, que permite alojarla y redistribuirla. */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/fuentes/jakarta-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* La flecha, estilada UNA vez y para cualquier sitio. Sin esto un SVG en línea se pinta
   con relleno negro y sin tamaño: salía un triángulo enorme dentro de las tarjetas de
   ruta, que además les inflaba la altura. */
.flecha {
  width: 16px; height: 16px; flex-shrink: 0;
  stroke: currentColor; fill: none;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--jakarta);
  font-size: 16px;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: var(--pine); }
:focus-visible { outline: 3px solid var(--pine); outline-offset: 3px; border-radius: 4px; }

.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 30;
  background: var(--pine); color: var(--cream);
  padding: 12px 16px; border-radius: 0 0 12px 0;
  text-decoration: none; font-weight: 700;
}
.saltar:focus { left: 0; }

@media (max-width: 700px) { :root { --lado: 20px; } }

/* ── Cabecera ─────────────────────────────────────────────────────── */

header.barra {
  position: sticky; top: 0; z-index: 20;
  background: rgba(251, 250, 247, .94);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid transparent;
}
header.barra .marco {
  display: flex; align-items: center; gap: 20px; min-height: 72px;
}
/* La marca respira aparte del menu (Carlos, 27-jul: «separalo mas del menu»). Con el mismo
   hueco que hay entre los enlaces, el logo parecia el primer item de la navegacion en vez
   de la firma de la casa. El doble de aire basta para que se lea como lo que es. */
.barra .marca { margin-right: 20px; }
@media (max-width: 360px) { .barra .marca { margin-right: 8px; } }
.marca { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; }
/* 22 px de LETRA de verdad, no de caja. Antes se pedían 20 px y salían 14 de letra porque
   el dibujo traía un 30% de aire dentro; el logo medía lo mismo que un enlace del menú y
   por eso parecía pequeño (Carlos, 27-jul: «el logo debe ser más grande, ¿no?»). Con el
   viewBox ya ajustado a la tinta, 22 px son 22 px: una vez y media el texto del menú, que
   es lo que hace que una marca mande en su barra sin gritar. */
.marca svg { height: 22px; width: auto; display: block; }

.barra nav { display: flex; align-items: center; gap: 20px; flex: 1; min-width: 0; }
.barra nav a {
  color: var(--ink-soft); text-decoration: none; font-size: 14.5px; font-weight: 500;
  padding: 4px 0; border-bottom: 1.5px solid transparent; white-space: nowrap;
}
.barra nav a:hover { color: var(--pine); }
.barra nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }

/* UNA SOLA FILA EN MÓVIL, CON EL MENÚ RECOGIDO (ronda visual del consejero, 28-jul, con
   OK de Carlos). SUPERSEDE las dos filas del 28-jul por la mañana: aquéllas arreglaban
   que «Contacto» se cayera del menú, pero al precio de una cabecera de dos alturas que
   retrasaba el arranque de cada página y cambiaba de sistema respecto a la home. Ahora
   la barra mide una fila —la marca y «Menú»— y los cinco enlaces viven en un panel
   desplegable. «Contacto» sigue sin caerse: en el panel los cinco van a lo alto.

   El panel es un <details> del navegador: cero script, lo abre y lo cierra él solo, y
   al navegar a otra página nace plegado. En escritorio no existe. */
.menu-movil { display: none; }
/* EL CORTE ESTÁ EN 800 px, Y ES UN NÚMERO MEDIDO, NO ELEGIDO (Carlos, 28-jul: «¿por qué
   el menú hamburguesa?», enseñando una ventana ancha con el menú escondido sin motivo).

   Medido sobre la web publicada, lo que la fila necesita para caber entera:
     · portada, sin botón en la barra ............ 595 px
     · interiores, con «Abrir demostración» ...... 781 px
   El corte estaba en 760: por debajo de lo que necesita la barra más cargada, así que
   escondía el menú en anchuras donde cabía de sobra.

   UN SOLO CORTE PARA LAS SEIS PÁGINAS, aunque la portada aguantaría hasta 600: si cada
   página cambiara de sistema a una anchura distinta, a 700 px la portada enseñaría el
   menú y Organizaciones no. Eso es justo lo que el consejero marcó como defecto en su
   primera ronda. Manda la página más cargada.

   Por debajo de 800 sí es el desplegable, y no es capricho: a 768 px —un iPad en
   vertical— la barra de las interiores necesita 781 y no caben. Si algún día se quiere
   el menú visible ahí, la palanca es el botón «Abrir demostración» de la barra, que ocupa
   186 px él solo; pero hoy es el ÚNICO camino a la app desde las interiores, así que no
   se toca sin decidirlo. */
@media (max-width: 800px) {
  header.barra .marco { min-height: 60px; gap: 12px; }
  header.barra .marco > nav, header.barra .marco > .boton { display: none; }
  .menu-movil { display: block; margin-left: auto; }
  .menu-movil summary {
    list-style: none; display: flex; align-items: center; gap: 8px;
    cursor: pointer; font-size: 14.5px; font-weight: 500; color: var(--ink-soft);
    /* Zona de dedo a la altura de la fila entera, sin engordar la barra. */
    padding: 18px 0;
  }
  .menu-movil summary::-webkit-details-marker { display: none; }
  .menu-movil summary svg { width: 20px; height: 20px; }
  .menu-movil[open] summary { color: var(--ink); }
  /* El panel cuelga de la BARRA, no del details: la barra es el ancestro posicionado
     (su sticky), así que `left:0; right:0` lo lleva de borde a borde. */
  .menu-movil nav {
    position: absolute; top: 100%; left: 0; right: 0;
    display: flex; flex-direction: column; flex: none; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--line-soft);
    box-shadow: 0 16px 28px rgba(30, 42, 36, .08);
    padding: 4px 20px 18px;
  }
  .menu-movil nav a {
    font-size: 16px; padding: 13px 0;
    border-bottom: 1px solid var(--line-soft);
  }
  .menu-movil nav a[aria-current="page"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--line-soft); }
  /* Dentro del panel la demo recupera el relleno: ahí no compite con ningún otro botón. */
  .menu-movil nav .boton {
    margin-top: 16px; border-bottom: 0; justify-content: center;
    font-size: 15px; padding: 12px 18px;
  }
}
/* A 320 px se le devuelve al contenido el margen lateral de la barra. Los recortes de
   menú que vivían aquí eran de la época de las dos filas: ya no hay enlaces que quepan
   o no quepan en una fila. */
@media (max-width: 360px) {
  header.barra .marco { padding-left: 14px; padding-right: 14px; }
}

/* ── Estructura ───────────────────────────────────────────────────── */

.marco { width: 100%; max-width: var(--marco); margin: 0 auto; padding: 0 var(--lado); }
.marco.angosto { max-width: 720px; }
.marco.medio { max-width: 900px; }

section.bloque { padding: 96px 0; }
section.bloque.corto { padding: 48px 0 0; }
section.bloque.salvia { background: var(--salvia); }

/* ── DOS TEMAS DENTRO DE UNA MISMA SECCION (01/08) ────────────────────
   Nace al fusionar las dos paradas del dinero de /organizaciones en una sola: «donde esta el
   dinero» y «lo que puedes ofrecerle a tu patrocinador» son dos asuntos del mismo tema, asi
   que comparten seccion pero necesitan respirar entre ellos.
   UNA LINEA Y AIRE, NO UN TITULAR MAS GRANDE: el h2 de la seccion ya manda; si el segundo
   tema levantara la voz, volverian a leerse como dos secciones y no habriamos arreglado nada. */
/* EL SEGUNDO TEMA VA EN CAJA PROPIA (01/08, tercer intento y el que funciona).
   INTENTO 1: linea de 1px + 40px de aire. Carlos: «parece que estan juntos».
   INTENTO 2: ojal propio + 56px de aire + linea mas marcada. Carlos: «estan igual».
   LO QUE FALLABA EN LOS DOS: mismo fondo, mismo ancho y misma tipografia. El ojo lee una
   columna continua, y ni el aire ni una linea fina la parten — solo retrasan el mismo texto.
   LO QUE LA PARTE ES EL FONDO. La caja en menta separa de golpe y ademas dice algo cierto:
   esto es un aparte DENTRO del capitulo del dinero, no un capitulo nuevo. Por eso menta y no
   el salvia de las secciones, que significaria «seccion nueva».
   El panel blanco de dentro recupera de paso el contraste para el que fue dibujado. */
.tema-anidado {
  margin-top: 52px; padding: 36px 32px 34px; border-radius: 18px;
  background: var(--mint);
}
@media (max-width: 700px) { .tema-anidado { padding: 28px 20px; margin-top: 40px; } }
h3.sub-tema { margin: 32px 0 10px; font-size: 22px; line-height: 1.25; letter-spacing: -.01em; }

/* EL PANEL, SOBRE FONDO DE PAGINA. `.panel-motor` se dibuja en `--paper`, que nacio para
   destacar sobre las secciones en salvia. Al mudarse el dinero a una seccion sin fondo, papel
   sobre papel casi no se distingue: se le sube el borde y la sombra para que el recuadro siga
   leyendose como una tarjeta y no como texto suelto. */
section.bloque:not(.salvia) .panel-motor { border-color: var(--line); }
@media (max-width: 700px) { section.bloque { padding: 56px 0; } }

.filete { border-top: 1px solid var(--line); padding-top: 64px; }
@media (max-width: 700px) { .filete { padding-top: 40px; } }

/* ── Bloque invertido ─────────────────────────────────────────────── */
/* EL ÚNICO DE LA WEB, y por eso funciona. Marca el punto exacto en que la página deja de
   explicar mecánica —GPS, hora, Bizum, consecuencia— y dice para qué sirve todo eso. Con
   fondo crema como el resto, ese cambio de registro no se veía: era un bloque más de
   texto. Invertido, el ojo se detiene antes de leer.

   Si algún día hay un segundo bloque invertido, este deja de significar nada. Es una pieza
   de un solo uso, a propósito. */
section.bloque.pino { background: var(--pine); color: var(--cream); }
section.bloque.pino .ojal { color: rgba(251, 250, 247, .64); }
section.bloque.pino h2 { color: var(--cream); }
section.bloque.pino .cuerpo { color: rgba(251, 250, 247, .88); }
section.bloque.pino ul.marcada li { color: var(--cream); font-size: 18px; }
section.bloque.pino ul.marcada { gap: 20px; }
section.bloque.pino ul.marcada.si li svg { stroke: rgba(251, 250, 247, .7); }

/* Dos columnas: título a la izquierda, contenido a la derecha. */
.dos-columnas { display: grid; gap: 56px; align-items: start; }
@media (min-width: 900px) {
  .dos-columnas { grid-template-columns: minmax(280px, 1fr) minmax(300px, 1.1fr); }
  /* EL BLANCO MUERTO DE LA IZQUIERDA (Carlos, 27-jul: «ocupa mucho espacio y hay mucho
     espacio blanco en las dos»). En los tres steppers la izquierda lleva dos líneas de
     título y la derecha cuatro pasos: pegado arriba, el título dejaba debajo medio
     bloque vacío. Centrado, el peso de las dos columnas se equilibra sin tocar el
     contenido. Y la izquierda adelgaza para que los pasos empiecen antes: el hueco
     grande no lo hacía el título, lo hacía la pista que tenía reservada. */
  .dos-columnas.ancha-derecha {
    grid-template-columns: minmax(240px, .85fr) minmax(320px, 1.5fr);
    gap: 48px; align-items: center;
  }
}

/* Cabeza de bloque: el rotulo, el titular y la tesis, a lo ancho y antes de la rejilla.
   El ancho de lectura se limita a 62ch aunque el bloque ocupe 1200: una linea de 1200 px
   es imposible de leer, y ese era medio problema del bloque anterior. */
.cabeza-bloque { margin-bottom: 40px; }
.cabeza-bloque .cuerpo { max-width: 62ch; }
@media (max-width: 700px) { .cabeza-bloque { margin-bottom: 28px; } }

.rejilla { display: grid; gap: 16px; align-items: stretch; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.rejilla.holgada { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
/* Fichas que NO se estiran para igualarse. Por defecto la rejilla las alarga todas hasta
   la más alta, que está bien cuando llevan contenido parecido —como en Organizaciones—,
   pero en «La palabra dada» una tiene tres líneas y otra doce: la corta se quedaba con
   326 px de vacío dentro del recuadro. Un hueco así, enmarcado, se lee como un error;
   tres tarjetas de alturas distintas se leen como lo que son. */
.rejilla.libre { align-items: start; }

/* ── Texto ────────────────────────────────────────────────────────── */

.ojal {
  display: block; font-size: 12px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 16px;
}

h1 {
  margin: 0 0 20px; font-weight: 600; color: var(--ink);
  font-size: clamp(40px, 5.4vw, 64px); line-height: 1.06; letter-spacing: -.028em;
  max-width: 16ch; text-wrap: pretty;
}
h1.ancho { max-width: 20ch; font-size: clamp(38px, 4.8vw, 60px); line-height: 1.08; }

h2 {
  margin: 0 0 40px; font-weight: 600; color: var(--ink);
  font-size: clamp(30px, 3.4vw, 40px); line-height: 1.24; letter-spacing: -.018em;
  max-width: 20ch; text-wrap: pretty;
}
h2.pegado { margin-bottom: 20px; }
h2.suelto { margin-bottom: 0; }
h3 { margin: 0 0 10px; font-size: 20px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }

p { margin: 0 0 16px; color: var(--ink-soft); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
.entrada { font-size: 19px; line-height: 1.62; max-width: 56ch; }
.cuerpo { font-size: 18px; line-height: 1.62; max-width: 44ch; }
.nota { font-size: 14px; line-height: 1.6; color: var(--muted); }

/* ── Portada del Inicio ───────────────────────────────────────────── */
/* La ilustración sangra de borde a borde y el texto se apoya en la zona de
   niebla de la izquierda, que es la parte clara del dibujo. */

/* El titular arranca a la MISMA altura que el de las tres interiores (Carlos, 27-jul: en
   ellas está en la misma posición «pero cambia con respecto a Inicio»). Antes la portada
   centraba su contenido en vertical dentro de un bloque alto, así que su titular flotaba
   con el tamaño de la ventana —de 123 px en móvil a 221 en tableta— y no coincidía con
   nada. Ahora se ancla arriba con los mismos 96 px de `section.bloque`, que es de donde
   sale la altura de las interiores: mismo origen, mismo resultado en las cuatro páginas.
   El bloque conserva su altura mínima, así que la ilustración no pierde sitio. */
.portada {
  position: relative;
  /* LA ALTURA LA MANDA LA ILUSTRACIÓN (31/07, último ajuste, y este cierra el asunto).
     Carlos: «la imagen que pusimos al principio sí que encaja perfectamente y me gusta más,
     no teníamos que cambiar la imagen; ponla como yo la he puesto».

     EL DIAGNÓSTICO, y era de altura, no de encuadre: la ilustración servida es 2,75:1 y el
     hueco quedaba en 2,34:1 (1497x640 en su pantalla). Cuando el hueco es MÁS ALTO de lo que
     la imagen pide, `cover` no tiene otra que AMPLIAR y comerse los lados — 263 px. De ahí
     que las figuras salieran grandes y la franja crema de la izquierda, que es donde
     respira el titular, se estrechara. Los cuatro ajustes de encuadre de hoy (top, bottom,
     72 %, 62 %, 40 %) movían el recorte de sitio, pero ninguno podía quitar el zoom: la
     causa estaba en el alto del bloque, no en la posición del fondo.

     LA SALIDA: atar el alto al ratio de la imagen. Así `cover` encaja clavado, no amplía y
     no recorta — se ve exactamente el archivo, que es lo que él pidió.

     EL SUELO DE 500 px, Y DÓNDE MUERDE: el contenido de la portada mide 478 px (medido) y a
     partir de 1375 px de ancho el ratio ya da esa altura de sobra, así que de 1375 arriba el
     encaje es exacto y el suelo no actúa. POR DEBAJO DE 1375 —tableta y portátil pequeño—
     manda el suelo y `cover` vuelve a recortar de lado, y eso es inevitable, no un descuido:
     una imagen 2,75:1 no cabe entera en un bloque que necesita 460 px de alto y solo tiene
     820 de ancho. Ahí se elige que el texto se lea antes que ver la escena completa. En
     móvil ni se plantea: se sirve otro recorte, el vertical.

     SI ALGUIEN CAMBIA LA ILUSTRACIÓN, ESTE NÚMERO VA CON ELLA: sale de `gen_web_img.mjs`,
     que hoy la sirve en 1600x582. Dejarlo desparejado devuelve el zoom. */
  aspect-ratio: 1600 / 582;
  min-height: 500px;
  /* ⚠️ ESTE `width` NO ES DECORATIVO: SIN ÉL LA PORTADA DESBORDA (arreglado el 03/08).
     `aspect-ratio` + `min-height` sin ancho declarado hace que el navegador calcule el ANCHO
     A PARTIR DE LA ALTURA MÍNIMA: 500 x 2,749 = 1375 px. Por eso, en cualquier viewport por
     debajo de 1375 —tableta y portátil pequeño— la sección medía 1375 y empujaba scroll
     horizontal a toda la página. Medido: a 1265 px de ancho desbordaba 110 px, y llevaba así
     en producción.
     Con `width: 100%` manda el ancho y la altura sale del ratio; el suelo de 500 px sigue
     actuando por debajo de 1375, que es justo lo que la nota de arriba ya daba por asumido
     («manda el suelo y cover vuelve a recortar de lado»). Lo que no estaba previsto era que
     el bloque se ensanchara en vez de recortarse. */
  width: 100%;
  display: flex; align-items: flex-start;
  padding-top: 96px;
  /* EL PUNTO DE ENCUENTRO SUSTITUYE AL VIADUCTO (31/07, con OK de Carlos). Cuatro motivos,
     y el cuarto es el que decide: en el puente NO SALE NADIE —y el mecanismo es «con quien
     va contigo»—; no hay dos momentos —y el eslogan nuevo tiene un hoy y un mañana—; un
     puente cuenta un TRAYECTO y no un compromiso; y sobre todo, un puente es
     INFRAESTRUCTURA, que es justo lo que Pactto no debe enseñar porque no hay custodia ni
     pasarela. El producto es un punto y una hora, no una obra.
     Los `puente*.jpg` se quedan generados como histórico y dejan de servirse. */
  background-image: url("/img/punto.jpg");
  background-size: cover;
  /* ANCLADA ABAJO desde el 31/07, y es lo contrario de lo que pedía el viaducto.
     LA CUENTA, para que nadie la deshaga por gusto: la ilustración es 1600x933 (1,71:1) y
     el hueco de la portada ronda 3:1, así que `cover` escala por el ancho y RECORTA POR
     ARRIBA Y POR ABAJO — se pierde en torno al 42 % de la altura. Con `top` lo que se
     perdía era la franja de abajo, que es justo donde están el punto y las figuras que
     convergen: la persona salía cortada por el borde (Carlos, 31/07: «hay que ajustarla
     arriba», es decir, subir la imagen para que se vea su parte baja).
     RESUELTO EN LA IMAGEN, NO AQUÍ (31/07). La ilustración se sirve ya recortada a 2:1 desde
     `gen_web_img.mjs`, así que encaja casi clavada en el hueco y apenas se recorta nada: los
     porcentajes de compensación —se probaron `top`, `bottom` y un 72 %— dejan de hacer falta.
     ANCLADO ARRIBA (31/07, tercer ajuste): con `center`, el poco recorte que aún hace `cover`
     en pantallas muy anchas se repartía mitad arriba y mitad abajo, y arriba está el sol —el
     elemento con menos margen de toda la escena—. Anclando arriba, el sol queda garantizado
     en cualquier ancho y lo que se pierde es la parte baja del primer plano, que es lo más
     prescindible. El 62 % horizontal sigue mandando en tableta, donde el hueco es más alto
     que la imagen y el recorte pasa a ser de ancho: conserva el pin y las figuras, que viven
     en la mitad derecha.
     VUELVE A `center top` (31/07, último ajuste). Con el alto atado al ratio de la imagen,
     `cover` ya no recorta por ningún lado, así que este valor deja de mover nada y solo
     manda si el bloque llega a su suelo de 500 px en una ventana muy estrecha. El 62 % y el
     40 % que se probaron esta tarde eran parches del zoom, y el zoom ya no existe. */
  background-position: center top;
  background-color: var(--cream);
}
/* Velo de crema por la izquierda: garantiza que el texto se lea aunque el
   recorte cambie con el ancho de la ventana. Nunca oscurece la ilustración. */
.portada::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, var(--cream) 22%, rgba(251,250,247,.86) 44%, rgba(251,250,247,0) 68%);
}
.portada .marco { position: relative; z-index: 1; }
.portada h1 { font-size: clamp(48px, 7vw, 80px); line-height: 1.04; max-width: none; color: var(--pine); }
/* AQUÍ VIVÍA `.portada h1 .consecuencia`, que pintaba «O paga.» en teja. Se BORRA el 31/07
   con el cambio de eslogan: el titular pasa a ser «Decidir hoy. Aparecer mañana.» y va
   entero en pino, porque «aparecer mañana» NO es una consecuencia —es la segunda mitad del
   tiempo— y el óxido lo tiene reservado el sistema de diseño para el dinero, el sello y el
   fallo, nunca para decoración.
   Se borra en vez de dejarla huérfana por la lección del componente `Launched` (29/07): el
   código muerto se audita como si contara y miente en las auditorías. LA REGLA DEL ÓXIDO NO
   SE PIERDE — la sigue diciendo el comentario de aquí abajo, que es donde toca. */
/* Realce dentro de un titular: el trozo que carga el significado. En pino, no en oxido:
   el oxido esta reservado a la consecuencia y usarlo aqui diria algo distinto. */
h1 .destacado { color: var(--pine); }
.portada .lema { margin: 20px 0 0; font-size: clamp(19px, 2.2vw, 22px); line-height: 1.5; color: var(--ink-soft); max-width: 30ch; }
/* EL ÓXIDO VUELVE A LA PORTADA, PERO UNA LÍNEA MÁS ABAJO (31/07, Carlos: «el equilibrio de
   color rojo me gustaba en la anterior; ¿qué deberíamos resaltar?»).

   QUÉ SE PERDIÓ Y POR QUÉ: con «Aquí y ahora. O paga.» el óxido tenía un sitio evidente en
   el h1 —«O paga» ES la consecuencia—, y además el rojo salía DOS VECES en la portada: en el
   texto de la izquierda y en el pin de la derecha. Esa diagonal era el equilibrio que él
   echa de menos. Con el eslogan nuevo el h1 se quedó sin candidato y solo sobrevivió el pin,
   a la derecha y pequeño: de ahí que la portada se vea escorada.

   POR QUÉ AQUÍ Y NO EN EL TITULAR: ni «decidir hoy» ni «aparecer mañana» son la
   consecuencia; son las dos mitades del tiempo. Pintar «aparecer mañana» de óxido teñiría
   de alarma justo lo que queremos que se desee. La consecuencia, literal, vive en el lema:
   si no apareces, tu parte va a una causa. Ese es el único trozo de la portada que el
   sistema autoriza a llevar óxido.

   POR QUÉ NO EL BOTÓN: el pino es el color de ACCIÓN en las nueve páginas; un botón
   principal en óxido diría «pulsar esto tiene consecuencia», que es lo contrario de abrir
   una demostración, y rompería el sistema aquí o en todas partes.

   El 600 es para que el óxido no se apague sobre `--ink-soft`; sin él, el rojo sobre un
   texto ya suave se lee como un error de color, no como un énfasis. */
.portada .lema .consecuencia { color: var(--oxido); font-weight: 600; }
.portada .apoyo { margin: 14px 0 0; font-size: 16px; line-height: 1.6; color: var(--muted); max-width: 38ch; }
.portada .acciones { margin-top: 28px; }
.portada .pie-demo { margin: 20px 0 0; font-size: 14px; color: var(--muted); }

/* Sobra: en móvil la ilustración vuelve a ir DETRÁS del texto, no como bloque aparte. */
.portada-imagen { display: none; }

/* MÓVIL: la ilustración deja de ir DETRÁS del texto y pasa a ser un bloque propio
   debajo (Carlos, 26-jul: «no se ve la imagen de fondo»).

   Por qué. En pantalla estrecha la apaisada, recortada por `cover`, solo dejaba ver una
   columna de árboles —ni cielo, ni Tibidabo, ni pin— y encima el velo que hacía legible
   el texto tapaba la mitad de arriba. Cualquier ajuste del velo era elegir entre ver la
   imagen o leer el texto.

   Separándolos se resuelven los dos a la vez: el texto va sobre crema limpio y la
   ilustración se ve entera. Y se usa el RECORTE VERTICAL, no la apaisada encogida.
   (Actualizado el 31/07: el recorte es ahora `punto-movil.jpg`. El razonamiento de por qué
   hacen falta dos encuadres no cambia con la ilustración.) */
@media (max-width: 700px) {
  .portada {
    /* SE ANULA LA PROPORCIÓN DEL ESCRITORIO (31/07). Allí el alto lo manda la ilustración
       apaisada; aquí se sirve `punto-movil.jpg`, que es el recorte VERTICAL y tiene otro
       ratio, y además el alto lo manda la pantalla (92svh). Sin este `auto`, la portada del
       móvil heredaría 2,75:1 y quedaría una franja de nada. */
    aspect-ratio: auto;
    min-height: 92svh;
    /* 56 px arriba: los mismos que `section.bloque` en móvil, para que el titular de la
       portada y el de las interiores arranquen a la misma altura. */
    padding: 56px 0 40px;
    align-items: flex-start;
    /* El RECORTE VERTICAL, no la apaisada encogida: en pantalla estrecha la apaisada solo
       deja ver una franja del centro y se pierde lo que cuenta la escena.
       El recorte del punto de encuentro está encuadrado sobre el pin y las figuras que
       convergen, y viene calculado del generador: el pin cae a 531 px con 82 de holgura
       sobre el botón, medido en 375x812. */
    background-image: url("/img/punto-movil.jpg");
    background-position: center top;
  }
  /* Velo que se abre hacia abajo: opaco donde va el titular, casi transparente al final.
     El anterior se quedaba en un 55% de crema hasta el borde y por eso «no se veía la
     imagen». Con este, el texto se lee sobre crema y el tercio inferior deja ver el
     puente y el pin, que es lo que se pedía. */
  .portada::before {
    background: linear-gradient(180deg,
      rgba(251,250,247,.96) 0%,
      rgba(251,250,247,.93) 34%,
      rgba(251,250,247,.74) 52%,
      rgba(251,250,247,.26) 67%,
      rgba(251,250,247,0) 80%);
  }
}

/* ── Cabecera de las páginas interiores ───────────────────────────── */
/* EN BLANCO, a propósito y por ahora (Carlos, 27-jul).

   Aquí hubo primero el detalle de los arcos del viaducto y después cuatro intentos de
   banda de color: dos acuarelas encargadas fuera y dos dibujadas. Ninguna convenció, y
   se aparcó la discusión. La cabecera se queda sobre el crema de la página, sin más.

   Si se retoma, NO se empieza de cero: el commit «Cabecera interior: la banda, aparcada
   tras cuatro intentos» guarda las cuatro versiones y, sobre todo, por qué cayó cada una
   (la proporción manda, el punto más oscuro decide la legibilidad, no se deforma nunca, y
   el escalonado venía de construir el color en función de la altura, no de la
   compresión). Leerlo antes de volver a probar ahorra la tarde entera.

   La clase  se conserva en las tres páginas: no pinta nada hoy, pero marca el
   sitio y evita tener que volver a tocar el HTML cuando haya una imagen que valga. */

/* ── La banda de la cabecera, quinto intento (Carlos, 27-jul: «la banda de cabecera
   sigue») ─────────────────────────────────────────────────────────────────────────

   SE DIBUJA POR CÓDIGO, NO ES UNA IMAGEN, y es una decisión tomada contra lo aprendido
   en los cuatro intentos anteriores (commit «Cabecera interior: la banda, aparcada tras
   cuatro intentos»), no por comodidad:

   · «LA PROPORCIÓN MANDA»: una imagen servida a todo el ancho crece sin freno en un
     monitor y se come el sitio del titular; hacían falta 6:1 y dos versiones. Un
     degradado no tiene proporción — se le dice el alto y se acabó el problema.
   · «NO SE DEFORMA NUNCA»: fijar ancho y alto a la vez estiraba la imagen. Aquí no hay
     nada que estirar.
   · «EL PIE DEBE MORIR EN #FBFAF7 EXACTO»: muere en `transparent` sobre el crema de la
     página, así que el color de destino es exacto por construcción, no por ajuste.
   · «EL ESCALONADO NO ERA DE COMPRESIÓN, venía de construir el color como f(altura)»:
     por eso NO es un `linear-gradient` vertical. Son tres manchas radiales descentradas
     y solapadas — ninguna línea horizontal tiene un color uniforme.
   · Peso: 0 bytes y ninguna petición.

   EL ÓXIDO VA MUY BAJO (.14) A PROPÓSITO. El sistema lo reserva a la consecuencia —al
   fallo, al «o paga»— y en los titulares interiores se colorea en pino, no en óxido. Si
   aquí entrara a plena fuerza pasaría a ser adorno y perdería peso donde sí hace falta.
   Queda como el rescoldo de la esquina, no como color de marca.

   Sube 72 px por detrás de la barra (su altura) para que no haya una línea de corte
   entre barra y banda: ese fue justo el fallo del primer intento, que se leía como una
   pegatina. La barra es `sticky` con z-index 20 y fondo al 94 %, así que la tapa casi
   del todo y el color asoma ya fundido. */

/* AJUSTADA CONTRA LA VERSIÓN DEL PLANO (Carlos, 27-jul: «se ve mucho mejor en Claude
   Design»). Al comparar con lo que hay en el plano —un `div` con
   `assets/cabecera-continua.png`, `height:clamp(240px,26vw,360px)` y un `margin-bottom`
   negativo del mismo valor— salen tres diferencias, y las tres eran mías:

   1. LA MÍA ERA DEMASIADO TÍMIDA. Manchas al 42 % y encima una máscara que las apagaba a
      la mitad: casi no se veía. Se hizo conservadora por miedo al contraste, y el miedo
      sobraba — medido, bajo el titular el color ya está prácticamente en crema.
   2. ALTURA CONTENIDA Y ELÁSTICA en vez de 460 px fijos. Se copia el `clamp` del plano:
      la franja se adapta al ancho en vez de imponer siempre lo mismo.
   3. EL MARGEN NEGATIVO ES EL TRUCO BUENO. En el plano la banda NO ocupa sitio: el
      contenido sube por encima. Así el color vive arriba del todo y el titular cae donde
      ya ha clareado, en vez de tener que empujar la sección hacia abajo.

   Se mantiene el degradado por código en vez de la imagen: sigue sin tener proporción que
   se dispare, sin nada que deformar y sin una petición de red. La imagen del plano usa
   `background-size:100% 100%`, que la DEFORMA — con un degradado no se nota, pero es
   justo lo que la lección 3 del commit de los cuatro intentos prohíbe. */

/* UNA SOLA ESCALA DE TITULAR PARA LAS CINCO CABECERAS (Carlos, 28-jul: «noto un baile de
   posiciones de los elementos; todo debería estar en el mismo sitio»).

   El baile era real y medido: Organizaciones y Contacto llevaban `h1.ancho` (60 px,
   interlínea 1.08) y ONG y Confianza el `h1` normal (64 px, 1.06). Dos líneas miden 130 px
   en una escala y 136 en la otra, así que la entradilla y el botón de ONG caían 6 px por
   debajo de los de Organizaciones. Al pasar de una página a otra, todo saltaba.

   Se unifica en los valores de `.ancho` y no en los del `h1` grande, porque son los que
   dejan respirar al titular más largo del sitio —«Empleados, clientes y participantes»—
   sin partirlo en tres líneas. La clase en el HTML deja de decidir nada: aquí manda la
   cabecera, y una página nueva hereda la misma escala sin tener que acordarse.


   Y EL TITULAR VA EN UNA LÍNEA SI CABE (Carlos, 28-jul: «me gusta más en una línea si cabe;
   en PC igual se puede y en móvil se reparte en las líneas necesarias y ya está»). Se
   quita el límite de medida —16ch/20ch, que era lo que forzaba el corte en dos— y el
   titular ocupa lo que necesita.

   Medido antes de hacerlo, en el titular más largo del sitio («Empleados, clientes y
   participantes»): pide 972 px de los 1136 útiles a 1440, y sigue cabiendo al bajar porque
   la fuente encoge con la ventana — hasta unos 800 px. Por debajo de ahí, que es móvil, se
   reparte en las líneas que haga falta.

   REGALO DE PASO: en ordenador las cuatro cabeceras pasan a tener UNA línea, así que la
   entradilla y el botón caen en el mismo píxel en las cuatro páginas. La alineación deja de
   depender de que dos titulares distintos partan igual.

   Y POR ESO SE VA EL `min-height`: reservaba el alto de dos líneas, y con titulares de una
   dejaba un hueco debajo — el que Carlos vio en ONG. Con todas a una línea, sobra. */
.bloque.cabecera h1,
.bloque.cabecera h1.ancho {
  max-width: none;
  font-size: clamp(38px, 4.8vw, 60px);
  line-height: 1.08;
}
/* La entradilla de la cabecera SIEMPRE separa lo mismo del botón o del texto que siga.
   Estaba puesto a mano en tres páginas con `style="margin-bottom:32px"` y olvidado en
   Confianza, que caía a los 16 px por defecto del párrafo. Puesto aquí, no se olvida. */
.bloque.cabecera .entrada { margin: 0 0 32px; }

.bloque.cabecera { position: relative; }
.bloque.cabecera::before {
  /* `left:0;right:0` y NO `100vw`: medido, `100vw` incluye el ancho de la barra de
     scroll y provocaba desbordamiento horizontal (`scrollWidth > clientWidth`). La
     sección ya ocupa todo el ancho, así que no hace falta salirse de ella. */
  /* EMPIEZA DEBAJO DEL MENÚ, NO DETRÁS (Carlos, 27-jul: «¿puede ser que en la web la
     hayas colocado arriba y en Claude Design empiece después del primer menú?»). Sí, y
     era mío: había puesto `top:-72px` para que la banda subiera por detrás de la barra y
     no quedara línea de corte. El efecto secundario es que los 72 px superiores de la
     imagen —justo los de color pleno— se escondían tras el menú y solo asomaba la parte
     ya lavada. Por eso en el plano se veía mejor: allí el div va DESPUÉS del SiteHeader.
     Con `top:0` se ve la imagen entera, como está pensada. */
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: 0; right: 0;
  top: 0; height: clamp(240px, 26vw, 360px);
  background-image: url("/img/cabecera.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
/* El contenido va por encima de la banda. Sin esto el título queda debajo del pseudo. */
.bloque.cabecera > .marco { position: relative; z-index: 1; }

@media (max-width: 700px) {
  /* En móvil la pantalla es más alta que ancha y el `clamp` por ancho se queda corto de
     presencia; se le da un valor propio. */
  .bloque.cabecera::before { height: 280px; }
}

/* Aquí había una regla para teñir de tinta el rótulo de la cabecera. Ya no hace falta:
   los rótulos «Para organizaciones», «Para ONG» y «Confianza» se han retirado (Carlos,
   27-jul: «eso ya lo dice el menú»). Los rótulos de dentro de las páginas se quedan,
   porque esos no repiten la navegación: nombran secciones. */
/* ── Banda de cierre ──────────────────────────────────────────────── */
/* El viaducto cruzando de borde a borde antes del pie: la página abre con el puente y
   cierra con él. Encuadre más abierto que el membrete —se ve cruzar, no un detalle— y
   se funde con el crema por abajo para que no corte en seco contra el pie. */

/* VECTORIAL y en plano, no un recorte de la ilustración (Carlos, 26-jul). Es un módulo
   —un vano más media pila a cada lado— que se REPITE en horizontal: así el puente cruza
   toda la pantalla con tantos apoyos como haga falta y el arco NUNCA se deforma, porque
   `background-size: auto 100%` fija la altura y deja que el ancho salga de la
   proporción. Un dibujo único estirado se achataría en pantalla ancha. */
.puente-cierre {
  width: 100%;
  height: clamp(88px, 11vw, 132px);
  background-image: url("/img/puente-cierre.svg");
  background-repeat: repeat-x;
  background-position: center bottom;
  background-size: auto 100%;
  background-color: var(--cream);
}

/* ── Fichas ───────────────────────────────────────────────────────── */

/* Los tres contextos de Organizaciones: filas, no tarjetas (28-jul). Tres nombres con una
   frase cada uno no necesitan recuadro, sombra ni 28 px de relleno; con ese peso competían
   con la campaña de ejemplo, que es lo único que enseña el producto funcionando. El icono
   conserva su cuadrado de menta —es la marca de la casa— pero más pequeño y en la fila. */
.contextos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.contextos li {
  display: flex; gap: 18px; align-items: flex-start;
  padding: 22px 0; border-top: 1px solid var(--line-soft);
}
/* La última fila NO cierra con raya: el bloque siguiente abre con su filete a pocos
   píxeles y se leían dos hairlines seguidas, que parecen un error de maquetación. */
.contextos .icono {
  flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 9px; background: var(--mint);
  display: grid; place-items: center;
}
.contextos .icono svg { width: 18px; height: 18px; fill: none; stroke: var(--pine); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.contextos h3 { margin: 0 0 4px; font-size: 18px; }
.contextos p { margin: 0; font-size: 16px; line-height: 1.62; color: var(--ink-soft); max-width: 64ch; }

.ficha {
  background: var(--paper); border: 1px solid var(--line-soft);
  border-radius: 16px; padding: 28px; box-shadow: var(--sombra);
}
.ficha p { font-size: 16px; line-height: 1.62; margin: 0; }
.ficha .icono {
  width: 40px; height: 40px; border-radius: 10px; background: var(--mint);
  display: grid; place-items: center; margin-bottom: 20px;
}
.ficha .icono svg { width: 19px; height: 19px; stroke: var(--pine); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ficha .apostilla { margin: 14px 0 0; font-size: 14px; line-height: 1.6; color: var(--muted); }

/* Ficha de ruta: la que lleva a otra página. */
.ruta {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--paper); border: 1px solid var(--line-soft);
  border-radius: 16px; padding: 28px; text-decoration: none; color: inherit;
  box-shadow: var(--sombra);
}
.ruta:hover { border-color: var(--pine); }
/* El icono de cada ruta. Trazo, no relleno, como el resto de iconografía del sitio, y en
   pino: es la marca señalando el camino, no un adorno de color. 26px porque a 24 se perdía
   contra un titular de 20px y a 32 competia con el. */
.ruta .icono-ruta {
  width: 26px; height: 26px; stroke: var(--pine); fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.ruta .etiqueta { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ruta h3 { margin: 0; }
.ruta p { font-size: 15.5px; margin: 0; flex: 1; }
.ruta .accion { font-size: 15px; font-weight: 600; color: var(--pine); display: flex; align-items: center; gap: 6px; }

/* ── Ejemplos de pacto que se turnan ──────────────────────────────── */
/* Los tres ocupan la MISMA celda del grid, asi que el bloque mide lo que el mas alto y no
   pega saltos al cambiar. Sin JavaScript: la web no carga ni un script. */
.ejemplos { margin-top: 26px; }
.ejemplos-ojal {
  display: block; font-size: 12px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
}
.ejemplos-lista { list-style: none; margin: 0; padding: 0; display: grid; }
.ejemplos-lista li {
  grid-area: 1 / 1;
  opacity: 0;
  animation: turno-ejemplo 15s cubic-bezier(.4, 0, .2, 1) infinite;
  /* NEGATIVO a proposito: los tres arrancan YA dentro del ciclo. */
  animation-delay: calc(var(--i) * 5s - 15s);
}
/* RED DE SEGURIDAD, CORREGIDA. La primera version ponia `opacity:1` aqui y NO servia: una
   animacion aplicada pisa siempre el valor fijo, asi que con la animacion congelada los tres
   quedaban invisibles y el bloque, vacio. Ahora quien lo garantiza es el fotograma 0% —que
   es opacidad 1— junto al retardo negativo: si la animacion no avanzara, el primer ejemplo
   se queda visible. Se mantiene el `opacity:1` para el caso de que no haya animacion en
   absoluto. */
.ejemplos-lista li:first-child { opacity: 1; }
@keyframes turno-ejemplo {
  /* RELEVO, NO FUNDIDO CRUZADO. Antes las dos tarjetas se solapaban en la misma posicion y
     el resultado era un amasijo de texto sobre texto (visto en captura de Carlos). Ahora la
     que se va termina de irse EXACTAMENTE cuando la siguiente empieza a entrar: ni solape
     legible ni hueco perceptible. */
  0%, 30%  { opacity: 1; transform: none; }
  31.67%   { opacity: 0; transform: translateY(-6px); }
  98.33%   { opacity: 0; transform: translateY(6px); }
  100%     { opacity: 1; transform: none; }
}
/* VARIANTE DE DOS TARJETAS (Organizaciones, 30-jul: club deportivo y carrera popular).
   El ciclo de arriba esta calibrado para TRES —15 s de vuelta, 5 s por turno, 30 % de
   tramo visible—. Con dos tarjetas y ese mismo ciclo, la segunda terminaba su turno a los
   10 s y quedaban 5 s de bloque VACIO en cada vuelta. Aqui la vuelta dura 10 s y el tramo
   visible sube al 45 %, de modo que cada tarjeta se ve 4,5 s de cada 5 — exactamente el
   mismo ritmo que con tres, sin hueco. El retardo negativo sigue la misma regla: las dos
   arrancan ya dentro del ciclo. */
.ejemplos-lista.de-dos li {
  animation-name: turno-ejemplo-2;
  animation-duration: 10s;
  animation-delay: calc(var(--i) * 5s - 10s);
}
@keyframes turno-ejemplo-2 {
  0%, 45%  { opacity: 1; transform: none; }
  47.5%    { opacity: 0; transform: translateY(-6px); }
  97.5%    { opacity: 0; transform: translateY(6px); }
  100%     { opacity: 1; transform: none; }
}
/* A quien pide que nada se mueva no se le esconde contenido: se le dan los tres en lista. */
@media (prefers-reduced-motion: reduce) {
  .ejemplos-lista { display: flex; flex-direction: column; gap: 10px; }
  .ejemplos-lista li { opacity: 1; animation: none; transform: none; }
  /* OJO, ESTA LINEA NO SOBRA: `.ejemplos-lista.de-dos li` tiene MAS especificidad que la
     regla de arriba, asi que sin repetirlo aqui su `animation-name` ganaria al
     `animation: none` y las tarjetas seguirian moviendose a quien pidio que no. */
  .ejemplos-lista.de-dos li { animation: none; }
}

/* ── Avisos ───────────────────────────────────────────────────────── */

.aviso {
  display: flex; gap: 12px; align-items: flex-start;
  border-radius: 14px; padding: 18px 20px; max-width: 70ch;
  font-size: 15.5px; line-height: 1.6;
}
.aviso .marca-aviso { flex-shrink: 0; margin-top: 2px; }
.aviso .marca-aviso svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.aviso strong { display: block; font-weight: 600; margin-bottom: 4px; }
.aviso p { margin: 0; font-size: 15.5px; color: inherit; }
.aviso.demo { background: #FBEFEC; color: #7E3325; }
.aviso.info { background: var(--sand); color: var(--ink-soft); }
.aviso.info strong { color: var(--ink); }
.aviso.demo a, .aviso.info a { color: inherit; }

/* ── Listas de sí / todavía no ────────────────────────────────────── */

ul.marcada { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
ul.marcada li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
ul.marcada li svg { flex-shrink: 0; width: 18px; height: 18px; margin-top: 3px; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
ul.marcada.si li svg { stroke: var(--pine); }
ul.marcada.no li svg { stroke: var(--oxido); }
ul.marcada.grande li { font-size: 17px; }

/* Piezas de TEXTO LARGO, que la web no tenía porque no tenía ninguna página de leer
   seguido. Nacen con «Aviso legal y privacidad» (27-jul): allí hay listas que no son
   «cosas que sí» —no llevan check en pino— y hace falta separar dos documentos dentro
   de la misma página sin abrir una sección nueva. */
ul.simple { margin: 0 0 20px; padding-left: 22px; }
ul.simple li { margin-bottom: 8px; font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
ul.simple li::marker { color: var(--line); }
hr.separador { border: 0; border-top: 1px solid var(--line); margin: 56px 0 40px; }

/* ── Pasos (stepper) ──────────────────────────────────────────────── */

/* EL ICONO SUSTITUYE AL NÚMERO, no se suma (Carlos, 27-jul, sobre las capturas de
   Organizaciones y ONG: «mismas distancias, iconos, más equilibrio»).

   Reabre con matiz el criterio de anoche —«en un stepper el número YA es el icono, y
   dos marcas por paso compiten entre sí»—, que sigue siendo cierto y por eso NO se
   ponen las dos marcas. Lo que se cambia es cuál de las dos se queda: el número solo
   dice «vas por el 3 de 4», cosa que el titular del bloque ya cuenta; el icono dice de
   qué va el paso antes de leerlo. Lo único que se pierde —la sensación de secuencia—
   lo devuelve la línea fina que une los círculos, que además la dice mejor que un
   número suelto.

   Las distancias se controlan en UN solo sitio: el hueco entre título y texto era
   antes 4 px de `row-gap` MÁS 4 px de `margin` del h3, o sea 8 px que nadie había
   decidido. Ahora manda el `row-gap` y el h3 va sin margen. */

ol.pasos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
ol.pasos li {
  position: relative;
  display: grid; grid-template-columns: 34px 1fr; gap: 6px 16px;
  padding-bottom: 22px;
}
ol.pasos li:last-child { padding-bottom: 0; }

/* La línea que hace que cuatro bloques sueltos se lean como una secuencia. Va por el
   centro del círculo (17 px = 34/2) y muere antes del siguiente para no tocarlo. */
ol.pasos li:not(:last-child)::before {
  content: ""; position: absolute; left: 17px; top: 40px; bottom: 4px;
  width: 1px; background: var(--line-soft);
}

.paso-marca {
  grid-row: span 2; z-index: 1;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--paper);
  display: grid; place-items: center;
}
.paso-marca svg {
  width: 17px; height: 17px;
  fill: none; stroke: var(--pine);
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

ol.pasos h3 { margin: 0; font-size: 18px; align-self: center; }
/* 62ch es el ancho de lectura que ya usa `.cabeza-bloque`. Sin él, en pantalla ancha
   las líneas llegaban a rozar los 90 caracteres y costaba volver al principio. */
ol.pasos p { margin: 0; grid-column: 2; max-width: 62ch; font-size: 16px; line-height: 1.6; }

/* Pasos OPCIONALES (06/08). Una lista numerada con línea continua promete que hay que
   hacerlo todo y en orden; si dos pasos son opcionales, la propia forma miente.
   Se corrige en dos sitios, y el importante es el segundo:
   · la etiqueta lo DICE —apagada, porque es una condición del paso, no parte del título—;
   · y `corta-linea` lo ENSEÑA, quitando el hilo detrás del último paso obligatorio. Ahí es
     donde el ojo entiende que lo de abajo es otra cosa, antes de leer una palabra. */
/* Enlaces dentro de un paso (06/08). Carlos: «se ven poco, ¿los podríamos poner en rojo?».
   EN ROJO NO, Y NO ES CAPRICHO: el óxido está RESERVADO A LA CONSECUENCIA —la palabra «paga»
   del eslogan, las cruces de lo que no hacemos, el botón de sellar—, y la regla ya está
   escrita más arriba en esta hoja. Un enlace de navegación en ese rojo diría «esto es el
   dinero». Se pierde más de lo que se gana.
   LO QUE SÍ RESUELVE EL PROBLEMA REAL, que era que no se veían: peso 600 y un subrayado de
   2 px separado del texto, en vez del hilo de 1 px por defecto del navegador. Se ve a un
   metro y sigue siendo pino.
   VA LOCAL A `ol.pasos` y no a `a` global: el color y el trazo de los enlaces son de las
   nueve páginas, y esto nació de dos pasos concretos. */
ol.pasos a {
  font-weight: 600;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
ol.pasos a:hover { color: var(--pine-dk); }

ol.pasos .opcional {
  font-size: 13px; font-weight: 500; color: var(--muted);
  letter-spacing: .04em; margin-left: 9px; white-space: nowrap;
}
ol.pasos li.corta-linea::before { display: none; }

/* ── Preguntas plegables (sin JavaScript) ─────────────────────────── */

.preguntas { border-top: 1px solid var(--line); }
.preguntas details { border-bottom: 1px solid var(--line); }
.preguntas summary {
  cursor: pointer; list-style: none; position: relative;
  padding: 22px 44px 22px 0; font-weight: 600; font-size: 17px; color: var(--ink);
}
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after {
  content: ""; position: absolute; right: 10px; top: 29px;
  width: 9px; height: 9px; border-right: 1.8px solid var(--muted); border-bottom: 1.8px solid var(--muted);
  transform: rotate(45deg); transition: transform .18s ease;
}
.preguntas details[open] summary::after { transform: rotate(-135deg); top: 33px; }
.preguntas .respuesta { padding: 0 0 24px; max-width: 70ch; }
.preguntas .respuesta p { font-size: 16px; line-height: 1.65; margin: 0; }

/* ── Sigue en tu móvil ────────────────────────────────────────────── */

/* SIN CAJA. Antes era un recuadro con borde y esquinas redondeadas, y cae justo debajo del
   bloque invertido: una caja delimitada pegada a una franja de color a sangre compiten por
   la atención y la unión entre las dos queda sucia (Carlos, 27-jul: «no está bien esta
   unión»). El bloque pino ya aporta todo el peso visual que necesita esa zona; aquí basta
   el contenido, con el aire de la sección separándolos. El único marco que queda es el del
   propio código, que sí lo necesita para leerse. */
.continuar {
  display: flex; flex-wrap: wrap; gap: 40px; align-items: center; justify-content: space-between;
}
.continuar .texto { flex: 1 1 340px; min-width: 0; max-width: 44ch; }
.continuar h2 { font-size: clamp(26px, 3vw, 32px); margin-bottom: 14px; }
.continuar p { font-size: 17px; line-height: 1.62; margin: 0; }
.continuar .codigo { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.continuar .codigo .marco-qr {
  width: 168px; height: 168px; padding: 12px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--paper);
}
.continuar .codigo svg { width: 100%; height: 100%; display: block; }
.continuar .codigo span { font-size: 13px; color: var(--muted); max-width: 24ch; text-align: center; }

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

.acciones { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--pine); color: var(--cream);
  border: 1px solid var(--pine); border-radius: 999px;
  padding: 14px 26px; min-height: 48px;
  font-family: var(--jakarta); font-weight: 600; font-size: 15px;
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
/* En pantalla estrecha el texto SE PARTE en vez de salirse. El botón «Cuéntanos qué
   comunidad quieres movilizar» medía 396 px en una pantalla de 375 y se salía 41: el final
   de la frase y la flecha quedaban fuera. Y como el cuerpo oculta lo que desborda, no
   aparecía barra de desplazamiento: el botón salía cortado y parecía un fallo de la web.
   `max-width: 100%` lo encierra en la pantalla y `white-space: normal` le deja usar dos
   líneas; `text-align: center` mantiene el texto centrado al partirse. En ordenador sigue
   en una sola línea, que es donde la frase cabe entera. */
@media (max-width: 700px) {
  .boton { white-space: normal; max-width: 100%; text-align: center; }
}
.boton:hover { background: var(--pine-dk); border-color: var(--pine-dk); }
.boton.grande { padding: 17px 32px; min-height: 56px; font-size: 16.5px; }
/* EL BORDE SUBE UN GRADO (ronda visual del consejero, 28-jul): con `--line` (#C7C4BC) el
   botón secundario de la barra casi desaparecía sobre la crema. El texto ya era `--ink` y
   se leía bien; el que se perdía era el contorno, así que es el contorno lo que sube —a
   `--muted`, que es tono de la casa, no un color nuevo—. Secundario significa que no
   manda, no que cueste encontrarlo. Sigue sin relleno verde: eso era el problema. */
.boton.secundario { background: var(--paper); color: var(--ink); border-color: var(--muted); }
.boton.secundario:hover { background: var(--sand); border-color: var(--ink); }
.boton.pequeno { padding: 10px 18px; min-height: 40px; font-size: 14px; }

/* ── Pie ──────────────────────────────────────────────────────────── */

footer.pie { background: var(--paper); border-top: 1px solid var(--line-soft); padding: 44px 0 36px; }
footer.pie .marco { display: grid; gap: 32px; }
footer.pie .marca svg { height: 22px; }
/* Flex y no rejilla auto-ajustable: dentro de una columna `auto` la rejilla colapsaba y
   los dos grupos se apilaban, dejando un hueco enorme a la izquierda del pie. */
.pie-grupos { display: flex; flex-wrap: wrap; gap: 24px 56px; }
.pie-grupos h4 { margin: 0 0 12px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pie-grupos ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pie-grupos a { color: var(--ink-soft); font-size: 15px; text-decoration: none; }
.pie-grupos a:hover { color: var(--pine); }
.pie-legal { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; border-top: 1px solid var(--line-soft); padding-top: 24px; }
.pie-legal p { margin: 0; font-size: 14px; color: var(--muted); }
@media (min-width: 900px) {
  footer.pie .marco { grid-template-columns: 1fr auto; }
  footer.pie .marca { grid-column: 1; }
  .pie-grupos { grid-column: 2; }
  .pie-legal { grid-column: 1 / -1; }
}
/* EN MÓVIL EL PIE ADELGAZA (ronda visual del consejero, 28-jul, con OK de Carlos): en
   Contacto llegaba a medir tanto como la página. Fuera la columna de navegación —repite
   el menú que ahora vive siempre a un toque en la barra— y fuera los rótulos de columna;
   quedan la marca, el correo y lo legal. También la fila «Escríbenos» del grupo de
   contacto: duplica la entrada Contacto del menú, y el correo es el dato que el menú no
   da. El puente de cierre baja de altura en proporción. En escritorio no cambia nada. */
/* La salida del pie compacto. Solo existe en móvil (ver la nota del build): en escritorio
   el pie mantiene sus columnas de enlaces y esto sobraría. Discreto a propósito —tono del
   texto suave, tamaño del correo—: es una salida, no una llamada.

   VA ANTES DEL MEDIA QUERY, y no es casual: con la misma especificidad gana la última
   declaración del archivo. Puesto después, su `display: none` pisaba al del móvil y el
   enlace no aparecía en ningún sitio. Es la misma trampa que ya documenta el bloque
   «Mostrar/ocultar por dispositivo» del final. */
.pie-arriba {
  display: none; align-items: center; gap: 8px;
  color: var(--ink-soft); font-size: 15px; text-decoration: none;
  /* Ancho al contenido y no a la fila: la zona de dedo es el texto, no media pantalla.
     El pie es una REJILLA, así que quien encoge la celda en horizontal es `justify-self`;
     con `align-self` (que es el eje vertical) el enlace medía los 335 px de la fila
     entera y se podía pulsar a un dedo de distancia del texto. */
  justify-self: start;
  padding: 8px 0;
}
.pie-arriba svg { width: 16px; height: 16px; }
.pie-arriba:hover { color: var(--pine); }

@media (max-width: 760px) {
  footer.pie { padding: 32px 0 28px; }
  footer.pie .marco { gap: 20px; }
  .pie-grupos > div:first-child { display: none; }
  .pie-grupos h4 { display: none; }
  .pie-grupos > div:last-child li:first-child { display: none; }
  .puente-cierre { height: 68px; }
  .pie-arriba { display: inline-flex; }
}

/* ── Hablar con Pactto (widget flotante) ──────────────────────────── */
/* Un <details>, sin una línea de script. La tarjeta es la MISMA que la de ayuda de la app
   —foto, «te responde una persona», bocadillo, punto verde—, traducida a la paleta de la
   web: crema y pino, no el azul grisáceo provisional del widget de Vozla, que aquí cantaba.
   No guarda nada: nace cerrado en cada página y no recuerda visitas. */
.hablar {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  /* Sin ancho propio: lo da el resumen cerrado o el panel abierto. */
}
.hablar summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--pine); color: var(--cream);
  border-radius: 999px; padding: 8px 18px 8px 8px;
  font-family: var(--jakarta); font-weight: 600; font-size: 14.5px;
  box-shadow: 0 10px 26px rgba(30, 42, 36, .22);
  /* Se pega a la derecha cuando el panel abierto es más ancho que él. */
  margin-left: auto;
}
.hablar summary::-webkit-details-marker { display: none; }
.hablar summary img { border-radius: 50%; display: block; object-fit: cover; }
.hablar[open] summary { background: var(--pine-dk); }

.hablar-panel {
  position: absolute; right: 0; bottom: calc(100% + 12px);
  width: min(320px, calc(100vw - 40px));
  background: var(--paper); border: 1px solid var(--line-soft);
  border-radius: 18px; padding: 18px;
  box-shadow: 0 18px 44px rgba(30, 42, 36, .18);
}
.hablar-quien { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
/* El punto verde de «en línea», igual que en la app. Va sobre la foto, no al lado. */
.hablar-foto { position: relative; flex-shrink: 0; line-height: 0; }
.hablar-foto img { border-radius: 50%; display: block; object-fit: cover; }
.hablar-foto::after {
  content: ""; position: absolute; right: -1px; bottom: -1px;
  width: 13px; height: 13px; border-radius: 50%;
  background: #25D366; border: 2px solid var(--paper);
}
.hablar-quien strong { display: block; font-size: 15px; color: var(--ink); }
.hablar-quien span { display: block; font-size: 12px; color: var(--muted); }
/* El bocadillo: esquina superior izquierda recortada, como en la app. */
.hablar-globo {
  margin: 0 0 14px; padding: 10px 12px;
  background: var(--sand); color: var(--ink);
  font-size: 14px; line-height: 1.45;
  border-radius: 12px; border-top-left-radius: 3px;
}
.hablar-panel .boton { width: 100%; justify-content: center; font-size: 14.5px; padding: 11px 16px; min-height: 44px; }
.hablar-panel .boton.secundario { margin-top: 8px; }
.hablar-pie { margin: 12px 0 0; font-size: 12px; line-height: 1.45; color: var(--muted); }

@media (max-width: 700px) {
  .hablar { right: 14px; bottom: 14px; }
  /* En móvil el rótulo sobra: la foto ya dice qué es, y una píldora ancha tapa contenido. */
  .hablar summary { padding: 7px; gap: 0; }
  .hablar summary span { display: none; }
}
/* Quien haya pedido menos movimiento no tiene por qué ver una sombra que flota. */
@media (prefers-reduced-motion: reduce) { .hablar summary { box-shadow: none; } }

/* ── Mostrar/ocultar por dispositivo ──────────────────────────────── */
/* Hoy solo queda el caso del botón directo a la app: se enseña en móvil y se esconde en
   escritorio, porque desde el ordenador no lleva a ninguna parte útil. La regla del QR se
   fue con su recuadro (Carlos, 27-jul).
   VA AL FINAL A PROPÓSITO: estas clases se combinan con otras que también fijan
   `display` —`.acciones` es flex—, y con la misma especificidad gana la última
   declarada. Si esto sube de sitio, el botón de móvil reaparece en el ordenador. */
.solo-escritorio { display: block; }
.solo-movil { display: none; }
.continuar .codigo.solo-escritorio { display: flex; }
@media (max-width: 700px) {
  .solo-escritorio, .continuar .codigo.solo-escritorio { display: none; }
  .solo-movil { display: flex; }
}

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

/* La tarjeta del ejemplo: un pacto entero, no una frase. La anatomia en fila —donde, cuando,
   cuanto— es lo que enseña que un pacto es concreto. */
.pacto-ej {
  background: var(--paper); border: 1px solid var(--line-soft); border-radius: 16px;
  padding: 24px 26px; box-shadow: var(--sombra); max-width: 460px;
}
.pacto-tipo {
  display: block; font-size: 12px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--pine); margin-bottom: 8px;
}
.pacto-ej h3 { margin: 0 0 12px; font-size: 21px; line-height: 1.3; }
/* La hora manda sobre el sitio, igual que en la ficha de la app: lo primero que miras de un
   pacto es cuando es. */
.pacto-cuando { margin: 0; font-size: 19px; font-weight: 600; color: var(--ink); }
.pacto-donde {
  margin: 4px 0 0; font-size: 15.5px; color: var(--ink-soft);
  display: flex; align-items: center; gap: 6px;
}
.pacto-donde .pin {
  width: 15px; height: 15px; flex-shrink: 0;
  stroke: var(--muted); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.pacto-ej dd i { font-style: italic; color: var(--ink-soft); }
.pacto-verifica { margin: 14px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.pacto-ej dl {
  margin: 16px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 20px;
  padding-top: 16px; border-top: 1px solid var(--line-soft);
}
.pacto-ej dt { font-size: 14.5px; color: var(--muted); }
.pacto-ej dd { margin: 0; font-size: 15.5px; color: var(--ink); }
.pacto-ej dd b { font-weight: 600; color: var(--pine); }
.ejemplos-pie { margin: 20px 0 0; font-size: 15.5px; color: var(--ink-soft); max-width: 48ch; }

/* ── El sello ─────────────────────────────────────────────────────── */
/* Copiado de la especificacion del componente HoldToSeal de la app (28-jul). NO es el
   medallon con anillo: eso quedo superado el 26/07 y montarlo aqui habria enseñado un gesto
   que la app ya no tiene. Es un boton de ancho completo que se rellena de izquierda a
   derecha con el rotulo dentro. */
.sello-web {
  position: relative; overflow: hidden; display: block; width: 100%; max-width: 460px;
  margin-top: 20px; padding: 12px; border: 0; border-radius: 14px;
  background: var(--oxido); color: var(--paper);
  font-family: inherit; font-size: 14px; font-weight: 700; line-height: 1.35; text-align: center;
  text-decoration: none; cursor: pointer; user-select: none; -webkit-user-select: none;
  touch-action: none; transition: transform .12s ease, background .2s;
}
/* REGLA DURA: este boton nunca va en #A23B2E. Ese es el rojo del FALLO, y un mismo rojo no
   puede significar «has fallado» y «comprometete». */
.sello-web.sellando { transform: scale(.99); }
.sello-web.sellado { background: var(--pine); }
/* El avance es un VELO sobre el lacre, no un trazo ni una barra aparte. SIN TRANSICION a
   proposito: lo mueve el bucle de animacion, y una transicion encima lo dejaria por detras
   del dedo. */
.sello-velo {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: rgba(255, 255, 255, .18); pointer-events: none;
}
.sello-texto { position: relative; }
/* La linea de debajo: fuera del boton, centrada, 10 px, en lacre. */
.sello-pista {
  max-width: 460px; margin: 8px 0 0; text-align: center;
  font-size: 10px; font-weight: 600; line-height: 1.5; color: var(--oxido);
}
/* ── La pantalla de la app, simulada ──────────────────────────────── */
/* Rotulo pequeno encima, la pantalla debajo y un pie que aclara que es un ejemplo, no algo
   con lo que se pueda operar desde la web.
   OJO AL HISTORIAL (01/08): esto nacio para reproducir el SELECTOR DE ONG de /ong, y ese uso
   ya no existe — la app retiro el selector el 31/07 y la caja se borro de /ong el 01/08. Hoy
   su unico uso vivo es la pantalla del FALLO en /confianza. Si vuelve a hacer falta una lista,
   se escribe de nuevo: no queda nada de la anterior. */
.simula-app { max-width: 460px; }
.simula-ojal { display: block; font-size: 13px; color: var(--muted); margin-bottom: 8px; }
/* LA LISTA DEL SELECTOR DE ONG SE RETIRA (01/08): su unico uso era la caja simulada de
   /ong, borrada ese dia porque la app dejo de tener selector de destino y la simulacion no
   aportaba nada. Con ella se van .simula-lista (y su li.tuya) y .simula-chip, que era la
   pastilla de la desgravacion retirada el 28/07. Lo que queda arriba y abajo SIGUE VIVO en
   /confianza: .simula-app, .simula-ojal, .simula-pie y toda la familia .simula-fallo. */
.simula-pie { margin: 12px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }

/* La pantalla del fallo, en Confianza. Misma familia que el selector de ONG —papel, borde,
   radio 14— para que se lean como dos vistas de la MISMA app y no como dos inventos.
   El óxido aparece una sola vez, en el sello de estado: es el color que el sistema reserva
   a la consecuencia, y aquí la consecuencia es literalmente el tema. */
.simula-fallo {
  background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
  padding: 20px;
}
.simula-sello {
  display: inline-block; margin-bottom: 14px;
  padding: 4px 10px; border-radius: 999px;
  background: #F1DED9; color: var(--oxido);
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.simula-fallo h3 { margin: 0 0 6px; font-size: 20px; line-height: 1.25; }
.simula-fallo > p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); }
/* El bloque de asumir: en la app es un botón grande de borde. Aquí NO es pulsable —esto es
   una ilustración, no un formulario—, así que se queda con su forma y sin cursor de mano. */
.simula-asumo {
  margin-top: 18px; padding: 14px 16px;
  border: 1.5px solid var(--line); border-radius: 12px;
}
.simula-asumo strong { display: block; font-size: 15.5px; color: var(--ink); margin-bottom: 4px; }
.simula-asumo span { display: block; font-size: 14px; line-height: 1.55; color: var(--ink-soft); }

/* ── Panel de campaña (demostración) ──────────────────────────────── */
/* Solo lo usa /panel/demo (peldaño 2 del portal de organizaciones, 29-jul). Lo que
   enseña son AGREGADOS: cifras grandes, una tabla por sesión y el dinero por cauce.
   Nada aquí dibuja personas — es la regla nº 1 de esa página. */

.panel-cifras {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.panel-cifras li {
  background: var(--paper); border: 1px solid var(--line-soft); border-radius: 14px;
  box-shadow: var(--sombra); padding: 22px 24px;
}
.panel-cifras b {
  display: block; font-size: clamp(32px, 4vw, 42px); line-height: 1.05;
  font-weight: 700; color: var(--pine); margin-bottom: 8px;
}
.panel-cifras span { display: block; font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); }

/* En pantallas extremas (<320 px) la tabla no tiene a dónde encoger: se desliza dentro
   de su envoltorio en vez de desbordar la página entera. Detectado a 306 px el 29-jul. */
.panel-desliza { overflow-x: auto; }
.panel-tabla { width: 100%; border-collapse: collapse; }
.panel-tabla th {
  text-align: left; font-size: 12px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
  padding: 0 12px 10px 0; border-bottom: 1px solid var(--line);
}
.panel-tabla td { padding: 14px 12px 14px 0; border-bottom: 1px solid var(--line-soft); font-size: 15.5px; }
.panel-tabla tfoot td { border-bottom: 0; border-top: 2px solid var(--line); font-weight: 700; color: var(--ink); }
/* La barra vive DENTRO de la celda del porcentaje, delante del número: da lectura
   comparativa sin pedirle a nadie que reste. `--p` la fija cada fila en el HTML. */
.panel-barra {
  display: inline-block; vertical-align: middle;
  width: min(160px, 34vw); height: 8px; margin-right: 12px;
  background: var(--sand); border-radius: 99px; overflow: hidden; position: relative;
}
.panel-barra::before {
  content: ""; position: absolute; inset: 0; width: var(--p, 0%);
  background: var(--pine); border-radius: 99px;
}

.panel-euros { font-weight: 700; color: var(--pine); font-size: 19px; }

/* EL CONMUTADOR DE LOS TRES CASOS (29-jul, feedback de Carlos: el panel es transversal
   —empresa, comercio, club— y se enseña con el mismo panel). CSS puro con radios
   ocultos: cero script, como el menú móvil y «Hablemos». Los radios van ANTES de las
   pestañas y de los casos, y el ~ hace el resto. */
.panel-conmutador > input[type="radio"] {
  /* Ocultos pero ENFOCABLES: con display:none el teclado no podría cambiar de caso.
     Así, las flechas mueven el radio activo como en cualquier grupo. */
  position: absolute; opacity: 0; pointer-events: none;
}
.panel-pestanas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.panel-pestanas label {
  padding: 10px 20px; min-height: 40px; display: inline-flex; align-items: center;
  border: 1px solid var(--muted); border-radius: 999px;
  font-weight: 600; font-size: 14.5px; color: var(--ink);
  background: var(--paper); cursor: pointer; user-select: none;
}
.panel-pestanas label:hover { background: var(--sand); border-color: var(--ink); }
/* DOS CASOS, NO TRES (30-jul). Se van `caso-empresa` y `caso-comercio` con el cambio de
   estrategia —/organizaciones ya solo habla a clubes y carreras— y entra `caso-carrera`.
   Estos selectores van por ID: si se añade o se quita una pestaña en el HTML, HAY QUE
   TOCARLOS AQUÍ o el caso nuevo no se enseña nunca y el viejo se queda muerto. */
#caso-club:checked    ~ .panel-pestanas label[for="caso-club"],
#caso-carrera:checked ~ .panel-pestanas label[for="caso-carrera"] {
  background: var(--pine); border-color: var(--pine); color: var(--cream);
}
/* El anillo de foco del teclado se pinta en la pestaña, que es lo que se ve. */
#caso-club:focus-visible    ~ .panel-pestanas label[for="caso-club"],
#caso-carrera:focus-visible ~ .panel-pestanas label[for="caso-carrera"] {
  outline: 3px solid var(--pine); outline-offset: 3px;
}
.panel-caso { display: none; }
#caso-club:checked    ~ .panel-caso[data-caso="club"],
#caso-carrera:checked ~ .panel-caso[data-caso="carrera"] { display: block; }
.panel-caso .pacto-tipo { margin-bottom: 10px; }
.panel-caso .panel-cifras { margin: 28px 0 32px; }

/* Los dos cauces del dinero, como filas compactas bajo la tabla del caso. */
.panel-cauces { list-style: none; margin: 28px 0 0; padding: 0; }
.panel-cauces li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px;
  padding: 14px 0; border-top: 1px solid var(--line-soft);
  font-size: 15.5px; color: var(--ink);
}
.panel-cauces b { font-weight: 700; color: var(--pine); font-size: 19px; }
.panel-cauces span { flex-basis: 100%; font-size: 14px; color: var(--muted); }

/* EL MOTOR EN CUATRO FRASES (ronda de consejeros, 29-jul): la cabecera vendía el mueble
   y no la campaña. Cuatro celdas de lectura inmediata bajo la entrada. */
.panel-motor {
  display: grid; gap: 12px 28px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin-top: 28px; padding: 20px 24px;
  background: var(--paper); border: 1px solid var(--line-soft); border-radius: 14px;
  box-shadow: var(--sombra);
}
/* CADA FRASE CON SU MARCA (Carlos, 30-jul: «podríamos poner unos iconos o números en estos
   cuatro pasos y que parezcan como pasos»).
   ICONOS Y NO NÚMEROS, a propósito: las dos frases del medio —si cumple dona quien
   patrocina, si no llega dona él— NO son dos pasos seguidos, son las DOS RAMAS del mismo
   momento. Numerarlas de 1 a 4 diría que primero dona uno y después el otro, y en cada
   sesión ocurre una o la otra. El icono dice qué es cada cosa sin prometer un orden que no
   existe. Mismo círculo que los `paso-marca` del resto de la web. */
/* VARIANTE ANCHA (01/08), para /organizaciones. El panel nacio en `panel-demo.html`, cuyo
   marco es estrecho: alli cuatro columnas de 230px caen bien. En /organizaciones el marco es
   mucho mas ancho, asi que `auto-fit` metia las CUATRO en una sola fila y dejaba ~190px de
   texto por celda -media docena de caracteres por linea-. Con 380px de minimo salen 2x2 en
   escritorio y una sola columna en movil, y cada frase se lee de corrido. Mas aire entre
   filas, que con dos lineas por celda las cuatro se pegaban. */
.panel-motor.ancho { grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 22px 32px; padding: 26px 28px; }
.panel-motor > span { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.55; color: var(--ink-soft); }
.panel-motor b { color: var(--pine); font-weight: 700; }
.motor-marca {
  flex-shrink: 0; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--mint); border: 1px solid rgba(30, 74, 56, .14);
}
.motor-marca svg { width: 15px; height: 15px; stroke: var(--pine); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── LOS DOS CAUCES, EN UNA SOLA BARRA (Carlos, 30-jul) ──────────────
   Antes eran DOS BLOQUES SUELTOS —«de los socios que no llegaron 145 €» / «de quien
   patrocina 815 €»— y, aparte, una barra de progreso. Tres piezas para una sola idea, y
   ninguna enseñaba lo que importa: «que sea como una especie de conmutador, lo que no paga
   uno lo paga el otro, y en relación al tope».

   LO QUE ESTA BARRA DICE DE UN VISTAZO, y es el mejor argumento del producto: SIEMPRE ESTÁ
   LLENA. La ONG recibe el tope entero cumpla quien cumpla; lo único que se mueve es la
   frontera entre los dos colores. Si la gente cumple más, crece el tramo del patrocinador;
   si falla más, crece el otro. El total no se toca.

   LOS IMPORTES VAN ENCIMA, NO DENTRO de los tramos: el tramo pequeño puede quedarse en 40 px
   en un móvil y «145 €» no cabría. Fuera se leen siempre.

   COLORES: pino para quien patrocina, óxido para quien no llegó — el mismo óxido que la app
   usa en el fallo y en el pago pendiente. El texto de la leyenda deja claro que ese dinero
   TAMBIÉN llega a la ONG: el color distingue el origen, no marca nada como malo. */
.cauces-cifras { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.cauces-cifras b { display: block; font-size: 17px; color: var(--ink); }
.cauces-cifras > span:last-child { text-align: right; }
.cauces-barra { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--line-soft); }
.cauces-barra span { display: block; height: 100%; }
.cauces-barra .tramo-patro { width: var(--p); background: var(--pine); }
.cauces-barra .tramo-falla { width: var(--p); background: var(--oxido); }
.cauces-tope { margin: 8px 0 0; font-size: 13px; color: var(--muted); text-align: right; }
.cauces-leyenda { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.cauces-leyenda li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.5; }
.cauces-leyenda .punto { flex-shrink: 0; width: 11px; height: 11px; border-radius: 3px; margin-top: 5px; }
.cauces-leyenda .punto.patro { background: var(--pine); }
.cauces-leyenda .punto.falla { background: var(--oxido); }
.cauces-leyenda em { display: block; font-style: normal; color: var(--muted); font-size: 13px; margin-top: 2px; }

/* LAS TRES GARANTÍAS, antes de las cifras: la objeción decisiva de RR. HH. (presión,
   privacidad, evaluación) contestada antes de enseñar ningún número. */
.panel-garantias { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; padding: 0; }
.panel-garantias li {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--mint); color: var(--pine);
  border-radius: 999px; padding: 8px 16px;
  font-size: 14px; font-weight: 600;
}
.panel-garantias svg {
  width: 14px; height: 14px; flex-shrink: 0;
  stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}

/* La línea de contexto de cada pestaña: qué resuelve la campaña AQUÍ. */
.panel-para { margin: 0 0 14px; font-size: 15.5px; font-weight: 600; color: var(--muted); }

.panel-enlace-intro { margin: 0 0 12px; font-size: 15.5px; }

/* LA LIQUIDACIÓN (29-jul, pedido de Carlos: que el ganar del usuario se VEA como pagar
   de la organización). El marcador crece con los cumplimientos hacia el tope; el estado
   tiene dos momentos y la demo enseña los dos. */
.panel-liquidacion {
  margin-top: 32px; padding: 24px;
  background: var(--paper); border: 1px solid var(--line-soft); border-radius: 14px;
  box-shadow: var(--sombra);
}
.panel-liq-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 16px; }
.panel-liq-cab h3 { margin: 0; font-size: 19px; }
.panel-estado {
  display: inline-flex; align-items: center;
  padding: 6px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 600; letter-spacing: .02em;
}
.panel-estado.ok { background: var(--mint); color: var(--pine); }
/* El pendiente usa los tonos del aviso de demostración: es la misma familia de «esto
   aún no está cerrado», no un rojo de error — deber no es fallar. */
.panel-estado.pend { background: #FBEFEC; color: #7E3325; }
/* El marcador es primo de .panel-barra pero a lo ancho y más alto: aquí es protagonista,
   no una columna de tabla. */
.panel-marcador {
  height: 12px; border-radius: 99px; background: var(--sand);
  overflow: hidden; position: relative; margin-bottom: 14px;
}
.panel-marcador span {
  position: absolute; inset: 0; width: var(--p, 0%);
  background: var(--pine); border-radius: 99px; display: block;
}
.panel-liq-cuenta { margin: 0 0 10px; font-size: 15.5px; line-height: 1.6; max-width: 70ch; }
.panel-liq-cuenta b { color: var(--pine); }

/* El bloque de compartir: el chip del enlace + los dos lanzadores. */
/* CAJA PROPIA, CENTRADA Y A TODO LO ANCHO (Carlos, 30-jul: «queda como una L»). Y tenía
   razón: la sección de arriba es de dos columnas con el título a la izquierda, que deja
   media columna en blanco; este bloque colgaba justo debajo de ese blanco, alineado a la
   izquierda, y la nota larga se escapaba a lo ancho de la página. El ojo leía una ele.
   Al encerrarlo en su propia tarjeta y centrarlo deja de ser la continuación de una columna
   y pasa a ser lo que es: una pieza aparte, al final, para probar. */
.panel-enlace {
  margin-top: 44px; padding: 28px 24px;
  background: var(--paper); border: 1px solid var(--line-soft); border-radius: 16px;
  box-shadow: var(--sombra); text-align: center;
}
.panel-enlace .acciones { justify-content: center; }
/* La nota se ceñía al ancho del marco entero (más de 1.100 px) y se leía como una línea
   suelta perdida. Con `ch` queda en una medida de lectura normal. */
.panel-enlace .nota { max-width: 64ch; margin-left: auto; margin-right: auto; }
.panel-enlace-chip {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--paper); border: 1px dashed var(--muted); border-radius: 12px;
  padding: 12px 18px; margin-bottom: 16px;
  font-size: 15px; font-weight: 600; color: var(--ink);
  max-width: 100%; overflow-wrap: anywhere;
}
.panel-enlace-chip svg {
  width: 17px; height: 17px; flex-shrink: 0;
  stroke: var(--pine); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

/* ── El paso a paso de crear un pactto (portada, 30-jul) ─────────────
   TERCERA PIEZA DE APP EN LA WEB, tras el selector de ONG y la pantalla del fallo. Nace de
   una peticion de Carlos con las capturas del stepper de Crear delante, y con una condicion
   suya que manda sobre el parecido: FIGURADO, NO LITERAL. Un pantallazo de la app fuera de
   la app no se entiende —le faltan la navegacion, el contexto y los estados—, asi que aqui
   se cuenta la IDEA de cada paso con dos o tres elementos, no la pantalla.

   POR QUE NO CHOCA CON «Tres pasos, sin letra pequena», que esta justo encima: aquellos son
   el ciclo de vida del pacto (defines / vas / verificas). Este despliega POR DENTRO el
   primero de los tres, y el titular lo dice — si no, el lector se pregunta cual de los dos
   numeros es el bueno.

   SIN UNA LINEA DE SCRIPT, como el resto de la web (el unico script propio sigue siendo el
   del sello). Avanza solo con animacion CSS, y si tocas un circulo se queda en ese paso, con
   radios ocultos: el mismo recurso que el conmutador del panel de campana.

   LO QUE SE ACEPTA PERDER respecto a la app: los pasos ya recorridos NO acumulan su marca de
   hecho. Marcar «todos los anteriores al actual» exige estado acumulativo, y en CSS puro eso
   pide script o un enredo caro de mantener. Se resuelve con el circulo activo encendido y la
   linea de avance por detras, que basta para leer que hay un orden.

   EL SELLO DEL ULTIMO PASO ES UN DIBUJO, NO EL SELLO DE VERDAD: la portada ya tiene el sello
   funcional mas abajo, y dos gestos iguales en la misma pagina se roban fuerza. Si algun dia
   se quiere funcional aqui, hay que QUITARLO del otro sitio, no sumarlo. */

/* ANCHO ACOTADO: sin esto, en un monitor la pieza se estiraba a 1.136 px — cinco circulos
   de 30 px desperdigados a lo largo de un metro, y una tarjeta con cuatro lineas dentro de
   un campo de futbol. Lo que se esta contando es una pantalla de movil, asi que el ancho
   debe parecerse a una. Alineada a la izquierda con su titular, no centrada: el resto de la
   web ya deja ese blanco a la derecha en los cuerpos de texto. */
.crear { margin-top: 26px; max-width: 620px; }
/* Los radios viven fuera de la vista pero DENTRO del flujo del teclado: nada de
   `display:none`, que los sacaria del tabulador y dejaria la pieza sin manejo por teclado. */
.crear > input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }

.crear-stepper {
  position: relative;
  display: grid; grid-template-columns: repeat(5, 1fr);
  margin-bottom: 24px;
}
/* La linea que une los circulos va de centro a centro: con cinco columnas iguales eso es
   del 10% al 90%. Si algun dia son cuatro pasos o seis, este 10/80 hay que recalcularlo. */
.crear-stepper::before, .crear-progreso {
  content: ""; position: absolute; top: 15px; left: 10%; height: 2px; border-radius: 2px;
}
.crear-stepper::before { width: 80%; background: var(--line-soft); }
.crear-progreso {
  width: 0; background: var(--pine);
  animation: crear-avance 25s linear infinite;
}
@keyframes crear-avance { from { width: 0; } to { width: 80%; } }

.crear-paso {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  cursor: pointer;
}
.crear-circulo {
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--paper); border: 1.5px solid var(--line);
  font-size: 13px; font-weight: 700; color: var(--muted);
  animation: crear-encendido 25s steps(1, end) infinite;
  animation-delay: calc(var(--i) * 5s - 25s);
}
.crear-rotulo { font-size: 12px; font-weight: 600; color: var(--muted); text-align: center; }
@keyframes crear-encendido {
  /* 18% de 25 s son 4,5 s de cada turno de 5: el mismo respiro que las tarjetas de ejemplo.
     `steps(1, end)` evita que el color se degrade por el camino. */
  0%, 18%   { background: var(--pine); border-color: var(--pine); color: #fff; }
  20%, 100% { background: var(--paper); border-color: var(--line); color: var(--muted); }
}
/* El quinto es el del sello y lleva el oxido de la app, no el pino. */
.crear-paso:last-child .crear-circulo { animation-name: crear-encendido-fin; }
@keyframes crear-encendido-fin {
  0%, 18%   { background: var(--oxido); border-color: var(--oxido); color: #fff; }
  20%, 100% { background: var(--paper); border-color: var(--line); color: var(--muted); }
}

.crear-panels { display: grid; }
.crear-panel {
  grid-area: 1 / 1;
  /* En columna, para que el sello del último paso pueda irse al fondo con `margin-top:auto`
     y el paso llene la tarjeta en vez de dejar el hueco debajo (Carlos, 30-jul: «que ocupe
     todo el espacio»). Los pasos sin sello no se enteran. */
  display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line-soft); border-radius: 16px;
  /* 18 y no 22: el relleno se paga CINCO veces, una por paso, y solo se ve el del más
     alto. Bajarlo cuatro píxeles descuenta ocho de la caja entera. */
  padding: 18px; box-shadow: var(--sombra);
  opacity: 0;
  animation: crear-turno 25s cubic-bezier(.4, 0, .2, 1) infinite;
  animation-delay: calc(var(--i) * 5s - 25s);
}
/* Misma red de seguridad que en los ejemplos: si no hubiera animacion en absoluto, el
   primero se queda visible y el bloque nunca aparece vacio. */
.crear-panel:first-child { opacity: 1; }
@keyframes crear-turno {
  0%, 18% { opacity: 1; transform: none; }
  20%     { opacity: 0; transform: translateY(-6px); }
  98%     { opacity: 0; transform: translateY(6px); }
  100%    { opacity: 1; transform: none; }
}
.crear-panel h3 { margin: 0 0 14px; font-size: 17px; }
.crear-campo {
  display: flex; align-items: center; gap: 8px;
  background: var(--cream); border: 1px solid var(--line-soft); border-radius: 10px;
  padding: 11px 13px; margin-bottom: 10px;
  font-size: 15px; color: var(--ink);
}
.crear-campo.marcado { border-color: var(--pine); background: var(--mint); }
/* EL CAMPO QUE ESCRIBES TÚ, separado del resto (Carlos, 30-jul: «se confunde con individual
   y grupo, tienen el mismo peso visual»). Tenía razón y el fallo era de fondo: los tres eran
   la misma caja, cuando uno es un texto libre y los otros dos son opciones. Ahora este tiene
   borde de campo y cursor parpadeando —y se puede escribir de verdad—, y las opciones llevan
   su circulito, como en la app.
   NO RECOGE NADA: no hay formulario, ni nombre, ni envío, ni almacenamiento. Es un dibujo
   que se deja tocar. La web sigue sin guardar una sola letra de nadie. */
.crear-texto {
  display: block; cursor: text;
  background: var(--paper); border: 1.5px solid var(--pine); border-radius: 10px;
  padding: 11px 13px; margin-bottom: 14px;
  font-size: 15px; font-weight: 700; color: var(--ink);
}
.crear-texto:focus { outline: none; box-shadow: 0 0 0 3px rgba(30, 74, 56, .12); }
/* La barrita que parpadea al final del texto. Se va en cuanto enfocas, porque entonces ya
   hay un cursor de verdad y dos cursores a la vez despistan. */
.crear-texto::after {
  content: ""; display: inline-block; vertical-align: -3px;
  width: 1.5px; height: 17px; margin-left: 3px; background: var(--pine);
  animation: crear-cursor 1.06s steps(1, end) infinite;
}
.crear-texto:focus::after { display: none; }
@keyframes crear-cursor { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

.crear-opcion { position: relative; padding-left: 44px; }
.crear-opcion::before {
  content: ""; position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  /* `box-sizing` EXPLÍCITO, y no es adorno: sin él el borde de 5 px del marcado se sumaba
     al ancho (16 + 10 = 26 px), el circulito crecía solo en la opción elegida y se comía la
     sangría hasta pisar la palabra. Es el defecto que vio Carlos el 30/07 —«el círculo está
     encima del individual y no se deja ver»—. Con `border-box` el circulito mide 18 px
     siempre, marcado o no. */
  box-sizing: border-box;
  width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line);
  background: var(--paper);
}
/* Borde grueso en vez de un punto dentro: un solo elemento y el mismo dibujo. */
.crear-opcion.marcado::before { border-color: var(--pine); border-width: 5.5px; }
.crear-campo b { font-weight: 700; }
.crear-campo em { font-style: normal; color: var(--muted); font-size: 13.5px; }
.crear-campo svg { width: 16px; height: 16px; flex-shrink: 0; stroke: var(--pine); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* EL CALENDARIO DE UNA SEMANA, y esta es la TERCERA versión del paso (Carlos, 30-jul).
   El camino, para que nadie repita las dos primeras:
   1ª — calendario de tres semanas + chips de días debajo. Dos piezas contando lo mismo y
        sin alinearse entre sí: «muy alargado, y no coincide el día de la semana con el del
        calendario». (El mes estaba bien: julio de 2026 empieza en miércoles y el 6 sí es
        lunes. Lo que fallaba era leerlos como dos calendarios distintos.)
   2ª — una fila de siete casillas con letra, número y hora dentro. Se perdió LA FORMA de
        calendario: «no me has entendido, quería que apareciera el calendario, pero solo a
        una semana». Eran botones, no un calendario.
   3ª — ESTA: forma de calendario de verdad —el mes arriba y las iniciales de los días como
        ENCABEZADO de columna—, con una sola fila de números debajo. Y ocupando la tarjeta
        entera, que es lo que pidió.
   NO ES NAVEGABLE: es un dibujo, igual que el mapa del paso siguiente. Cómo se escogen los
   días es mecánica de la app y aquí no se cuenta. */
.crear-cal { border: 1px solid var(--line-soft); border-radius: 12px; padding: 16px 13px; background: var(--cream); }
.crear-cal-mes { text-align: center; font-size: 14px; font-weight: 700; color: var(--pine); margin: 0 0 3px; }
.crear-cal-que { text-align: center; font-size: 12px; color: var(--muted); margin: 0 0 16px; }
.crear-cal-rejilla { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.crear-cal-rejilla b {
  text-align: center; padding-bottom: 8px;
  font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .04em;
}
/* EL CALENDARIO NO LLEVA LA HORA DENTRO (Carlos, 30-jul: «lo de qué días y a qué hora va
   aparte, no lo integres en el propio calendario»). En la app son dos cosas distintas —el
   calendario marca los días, y debajo hay una sección propia para el horario— y meterlas en
   la misma casilla convertía el calendario en una fila de botones. */
.crear-cal-rejilla div {
  display: grid; place-items: center;
  padding: 11px 2px; border-radius: 10px;
  background: var(--pine); color: #fff; line-height: 1.15;
}
.crear-cal-rejilla div span { font-size: 15px; font-weight: 700; }
.crear-cal-rejilla div.off {
  background: transparent; border: 1px solid var(--line-soft); color: var(--muted);
}

/* ¿QUÉ DÍAS Y A QUÉ HORA? — la sección propia, debajo del calendario y fuera de él.
   ALINEADA COLUMNA A COLUMNA CON EL CALENDARIO (Carlos, 30-jul: «el lunes con el lunes, el
   miércoles con el miércoles, y el viernes que caiga debajo del viernes»). Antes era un
   flex con anchos mínimos y no cuadraba con nada.
   LA CUENTA, PARA QUE NADIE LA ROMPA: el calendario vive dentro de una caja con 1 px de
   borde y 13 px de relleno, así que sus columnas empiezan a 14 px del borde del panel. Estos
   14 px de `padding-inline` son exactamente eso, y el `gap` de 5 px es el mismo que el suyo.
   Si se toca el relleno o el borde de `.crear-cal`, hay que tocar este número o dejan de
   caer una debajo de otra. */
.crear-sub { margin: 18px 0 9px; padding-inline: 14px; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.crear-dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; padding-inline: 14px; }
/* PÍLDORAS, NO CUADROS, y es lo segundo que pidió Carlos: «cámbialos de alguna manera». Con
   la misma forma que el calendario, las dos filas se leían como dos calendarios repetidos.
   Redondeadas y más bajas, se leen como lo que son: los días que eliges, con su hora. */
.crear-dias span {
  display: grid; place-items: center; gap: 0;
  padding: 6px 2px; border-radius: 999px;
  background: var(--pine); color: #fff; font-size: 12px; font-weight: 700; line-height: 1.2;
}
.crear-dias span small { font-size: 9.5px; font-weight: 600; opacity: .85; }
/* Los apagados, solo con su contorno: sin relleno pesan menos y dejan mandar a los elegidos. */
.crear-dias span.off { background: transparent; color: var(--muted); border: 1px solid var(--line-soft); }
/* La cuenta de sesiones, como en la app. No es una nota explicativa de las que se quitaron:
   es un dato que sale de lo elegido —tres dias por ocho semanas son 24— y por eso se queda. */
.crear-cuenta { margin: 11px 0 0; padding-inline: 14px; font-size: 12.5px; color: var(--muted); }

/* EL MAPA (Carlos, 30-jul, en dos vueltas). La primera versión eran dos rejillas de líneas
   rectas hechas con gradientes, y su veredicto fue claro: «no se ve el mapa, aprovecha más
   el espacio de la caja, que se vea algo de Barcelona».
   Ahora es un SVG dibujado a mano con lo que hace reconocible a Barcelona sin nombrarla:
   las manzanas del Eixample —cuadrícula girada, con la esquina cortada—, una avenida en
   diagonal cruzándola, un parque y la costa. Es figurado, no cartográfico: no dice dónde
   estás, dice «esto es un mapa».
   SIGUE SIN COSTAR UNA PETICIÓN: va dentro del HTML. Nada de Leaflet ni de teselas, que
   serían llamadas a un tercero — y la web tiene verificado que no hace ninguna. */
.crear-mapa {
  display: block; width: 100%; height: auto; border-radius: 10px;
  border: 1px solid var(--line-soft);
}

/* Los chips de debajo de un campo: el destino de la donación y su nota fiscal. */
.crear-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.crear-chip {
  display: inline-flex; align-items: center; gap: 5px;
  border-radius: 999px; padding: 5px 11px;
  font-size: 12.5px; font-weight: 600;
  background: var(--mint); color: var(--pine); border: 1px solid rgba(30, 74, 56, .18);
}
.crear-chip svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* EL RESUMEN VA APRETADO A PROPÓSITO (30-jul). Es el paso más alto de los cinco y, como los
   cinco se apilan en la misma caja, EL MÁS ALTO MANDA: cada píxel que sobra aquí es un
   píxel de hueco vacío en los otros cuatro. Seis filas a 7 px de aire cada una sumaban
   sesenta y pico de más. */
/* EL AIRE DE LAS FILAS, DEVUELTO (Carlos, 30-jul: «no hace falta estrecharlo tanto»). Se
   había apretado a 3 px para que este paso dejara de ser el más alto de los cinco, y lo
   consiguió — ahora manda el calendario del paso 2 —. Conseguido eso, apretar más no ahorra
   ni un píxel de la caja y solo aprieta la lectura. El techo sano de este paso es lo que
   mida el paso 2; mientras no lo pase, puede respirar. */
.crear-filas { margin: 0 0 14px; font-size: 14.5px; }
.crear-filas div { display: flex; justify-content: space-between; gap: 14px; padding: 5px 0; border-bottom: 1px solid var(--line-soft); }
.crear-filas div:last-child { border-bottom: 0; }
.crear-filas i { font-style: normal; color: var(--muted); }
.crear-filas b { font-weight: 700; color: var(--pine); text-align: right; }
/* EL RÓTULO DE ENCIMA DEL TÍTULO, solo en el resumen: en la app esa pantalla se llama
   «Resumen del pactto» y el cuerpo dice «Repasa antes de sellar». Son dos cosas distintas y
   aquí estaban fundidas en una. */
.crear-ojal {
  display: block; margin-bottom: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
}
/* El importe manda sobre las demás filas: es el dato por el que se duda antes de sellar. */
.crear-filas div.destacada b { font-size: 17px; }
/* El «por qué» va escrito pero NO se toca: el gesto de escribir vive en el paso 1, que es
   donde empieza todo, y dos campos editables en la misma pieza reparten la atención. */
.crear-texto.quieto { border-color: var(--line-soft); background: var(--cream); font-weight: 600; margin-bottom: 12px; }
.crear-texto.quieto::after { display: none; }
/* El eco de lo escrito, al pie del paso 1: la app lo va componiendo mientras tecleas. */
.crear-eco { margin: 14px 0 0; padding-top: 13px; border-top: 1px solid var(--line-soft); font-size: 14px; color: var(--muted); }
.crear-eco b { color: var(--pine); font-weight: 700; }

/* EL SELLO SE SELLA SOLO (Carlos, 30-jul: «el sellar, cúrratelo más»). Antes era un botón
   granate quieto que decía «mantén pulsado» sin enseñar nada. Ahora una veladura lo recorre
   de izquierda a derecha, que es LO QUE HACE el sello de verdad de esta misma web al
   mantenerlo pulsado. Es un dibujo: no se puede sellar aquí.
   VA SINCRONIZADA CON EL PASO: mismo ciclo de 25 s y mismo retardo que el panel 5
   (`--i:4` → -5 s), así que la veladura corre justo mientras el paso se ve, y se rebobina
   cuando ya no lo ve nadie. Si se cambia la duración del ciclo, hay que cambiarla aquí. */
.crear-sello {
  position: relative; overflow: hidden;
  /* `margin-top:auto` empuja el sello al fondo de la tarjeta: el resumen queda arriba, el
     botón abajo, y el aire sobrante se va al medio en vez de quedar colgando debajo. */
  margin-top: auto;
  display: block; text-align: center; border-radius: 12px;
  background: var(--oxido); color: #fff; padding: 13px; font-size: 15px; font-weight: 700;
}
.crear-sello-velo {
  position: absolute; inset: 0 auto 0 0; width: 0;
  background: rgba(255, 255, 255, .16);
  animation: crear-sellando 25s linear infinite;
  animation-delay: -5s;
}
.crear-sello span { position: relative; }
@keyframes crear-sellando {
  0%        { width: 0; }
  14%, 100% { width: 100%; }
}
/* En cuanto alguien toca un paso, el sello vuelve a reposo: una veladura congelada a medias
   parecería un gesto interrumpido. */
.crear:has(input:checked) .crear-sello-velo { animation: none; width: 0; }
.crear-cierre { margin: 11px 0 0; text-align: center; font-size: 12.5px; color: var(--muted); }
.crear-nota { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }

/* MODO MANUAL. En cuanto hay un circulo pulsado todo se congela y manda la eleccion.
   `:has()` es lo que permite apagar la animacion del hijo mirando al hermano marcado. */
.crear:has(input:checked) .crear-panel,
.crear:has(input:checked) .crear-circulo,
.crear:has(input:checked) .crear-progreso { animation: none; }
.crear:has(input:checked) .crear-panel { opacity: 0; }
#crear-p1:checked ~ .crear-panels .crear-panel:nth-child(1),
#crear-p2:checked ~ .crear-panels .crear-panel:nth-child(2),
#crear-p3:checked ~ .crear-panels .crear-panel:nth-child(3),
#crear-p4:checked ~ .crear-panels .crear-panel:nth-child(4),
#crear-p5:checked ~ .crear-panels .crear-panel:nth-child(5) { opacity: 1; transform: none; }
/* OJO, `nth-of-type` Y NO `nth-child`: el primer hijo de `.crear-stepper` es la barra de
   avance (`span.crear-progreso`), asi que con `nth-child` los pasos salian corridos una
   posicion y tocar el 3 encendia el 2. Contando por TIPO, los `label` se numeran solos y el
   span no estorba. Si algun dia la barra se mueve o se cambia de etiqueta, revisar esto. */
#crear-p1:checked ~ .crear-stepper .crear-paso:nth-of-type(1) .crear-circulo,
#crear-p2:checked ~ .crear-stepper .crear-paso:nth-of-type(2) .crear-circulo,
#crear-p3:checked ~ .crear-stepper .crear-paso:nth-of-type(3) .crear-circulo,
#crear-p4:checked ~ .crear-stepper .crear-paso:nth-of-type(4) .crear-circulo {
  background: var(--pine); border-color: var(--pine); color: #fff;
}
#crear-p5:checked ~ .crear-stepper .crear-paso:nth-of-type(5) .crear-circulo {
  background: var(--oxido); border-color: var(--oxido); color: #fff;
}
/* El foco del teclado tiene que verse en el circulo, que es lo que el ojo sigue. */
#crear-p1:focus-visible ~ .crear-stepper .crear-paso:nth-of-type(1) .crear-circulo,
#crear-p2:focus-visible ~ .crear-stepper .crear-paso:nth-of-type(2) .crear-circulo,
#crear-p3:focus-visible ~ .crear-stepper .crear-paso:nth-of-type(3) .crear-circulo,
#crear-p4:focus-visible ~ .crear-stepper .crear-paso:nth-of-type(4) .crear-circulo,
#crear-p5:focus-visible ~ .crear-stepper .crear-paso:nth-of-type(5) .crear-circulo {
  outline: 2px solid var(--pine); outline-offset: 3px;
}

/* VARIANTE DE GRUPO (Organizaciones, 30-jul). En la app, elegir «Grupo» en el paso 1 cambia
   el final: el quinto paso deja de ser «Sellar» y pasa a «Crear grupo», con otro botón y
   otra letra —«todavía no te compromete: selláis dentro, uno a uno»—. Aquí se refleja con
   el color: el óxido es el del sello, que es un compromiso; crear un grupo no compromete a
   nadie todavía, así que va en pino como cualquier otro paso.
   Se reutilizan los MISMOS ids (`crear-p1`…`crear-p5`) que la pieza de la portada: son
   páginas distintas y no colisionan. OJO: no poner las dos en la misma página. */
.crear.grupo .crear-paso:last-child .crear-circulo { animation-name: crear-encendido; }
.crear.grupo #crear-p5:checked ~ .crear-stepper .crear-paso:nth-of-type(5) .crear-circulo {
  background: var(--pine); border-color: var(--pine); color: #fff;
}
.crear.grupo .crear-sello { background: var(--pine); }

/* A quien pide que nada se mueva se le dan los cinco pasos en lista, quietos y enteros. */
@media (prefers-reduced-motion: reduce) {
  .crear-stepper { display: none; }
  .crear-panels { display: flex; flex-direction: column; gap: 12px; }
  .crear-panel, .crear:has(input:checked) .crear-panel { opacity: 1; animation: none; transform: none; }
  .crear-progreso { animation: none; }
}
/* En pantallas estrechas los rotulos de cinco columnas se parten; se quedan solo los
   numeros, que siguen contando el orden. */
@media (max-width: 420px) {
  .crear-rotulo { display: none; }
}