/* =========================================================================
   3-componentes.css — el estilo de cada sección
   -------------------------------------------------------------------------
   POR QUÉ CADA REGLA EMPIEZA CON EL NOMBRE DE SU SECCIÓN

   En la versión de Astro cada componente tenía su propio <style> y Astro se
   encargaba de que los estilos de uno no se metieran en otro. En CSS normal
   eso no existe: todo lo que se escribe aquí vale para TODA la página.

   Si aquí escribiéramos `h2{font-size:var(--t-4)}` porque así lo quiere la
   sección "Qué hacemos", ese tamaño le caería encima también al h2 del
   buscador, al del cierre y al del pie. Los estilos se pisarían entre sí y el
   resultado dependería del orden en que están escritos, que es la peor forma
   de programar: funciona hasta que alguien mueve un bloque de lugar.

   La solución es una regla de disciplina, no de herramienta: TODA regla de una
   sección se escribe precedida por la clase de esa sección.

       .lineas h2   { ... }     <- solo el h2 de "Qué hacemos"
       .buscador h2 { ... }     <- solo el h2 del buscador

   Es la única cosa que hay que cuidar al pasar de Astro a CSS normal. Si al
   agregar una sección nueva respetas esta regla, nada se rompe nunca.

   ÍNDICE
     1. Cabecera y menú
     2. Hero (portada de index.html)
     3. Buscador de brigadas
     4. Cifras de impacto
     5. Qué hacemos (líneas de trabajo)
     6. Cierre de voluntariado
     7. Constructor de alianza (aliarse.html)
     8. Dónde actuamos (aliarse.html)
     9. Cierre de alianzas (aliarse.html)
    10. Página 404
    11. Pie
   ========================================================================= */


/* =========================================================================
   1. CABECERA Y MENÚ
   -------------------------------------------------------------------------
   El menú de celular usa la Popover API nativa del navegador: el atributo
   `popovertarget` en el botón y `popover` en el panel. Eso da gratis, sin una
   sola línea de JavaScript:
       - abrir y cerrar
       - cerrar con la tecla Escape
       - cerrar al tocar fuera
       - el foco del teclado atrapado dentro del panel mientras está abierto
   Es la razón por la que este menú no tiene script.
   ========================================================================= */
.cabecera{
  position:sticky;top:0;z-index:30;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--linea);
}
.cabecera .fila{display:flex;align-items:center;gap:var(--e-2);padding-block:.7rem}

.cabecera .marca{
  display:flex;align-items:center;gap:.6rem;text-decoration:none;
  color:var(--tinta);flex-shrink:0;margin-right:auto;
}
.cabecera .marca-circulo{width:34px;height:34px;flex-shrink:0}
.cabecera .marca-texto{font-weight:900;font-size:1.1rem;letter-spacing:-.03em;line-height:1}
.cabecera .marca-texto b{display:block;font-size:.6rem;font-weight:800;letter-spacing:.02em;margin-bottom:-2px}

/* Navegación de escritorio: oculta en celular, aparece a partir de 900px. */
.nav-escritorio{display:none}
.nav-escritorio ul{display:flex;gap:var(--e-3);list-style:none;margin:0;padding:0}
.nav-escritorio a{
  color:var(--tinta-70);text-decoration:none;font-weight:600;font-size:.93rem;
  padding-block:.35rem;border-bottom:2px solid transparent;white-space:nowrap;
  transition:color var(--micro), border-color var(--micro);
}
.nav-escritorio a:hover{color:var(--tinta);border-bottom-color:var(--cc-amarillo)}

/* Botón de hamburguesa: solo en celular. 44x44 es el mínimo táctil. */
.abrir-menu{
  display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;
  background:transparent;border:1px solid var(--linea-fuerte);border-radius:var(--radio);
  color:var(--tinta);cursor:pointer;
}
.abrir-menu:hover{background:var(--papel-2)}

.panel-movil{
  border:0;padding:0;margin:0;
  inset:0 0 auto auto;                    /* pegado arriba a la derecha */
  width:min(88vw,340px);height:100dvh;max-height:100dvh;
  background:var(--papel);
  box-shadow:-18px 0 48px -24px rgba(16,32,43,.5);
  /* El panel entra deslizándose. `allow-discrete` es lo que permite animar un
     elemento que pasa de display:none a visible sin JavaScript. */
  translate:100% 0;opacity:0;
  transition:translate var(--transicion) var(--curva), opacity var(--transicion),
             overlay var(--transicion) allow-discrete, display var(--transicion) allow-discrete;
}
.panel-movil:popover-open{translate:0 0;opacity:1}
@starting-style{ .panel-movil:popover-open{translate:100% 0;opacity:0} }
.panel-movil::backdrop{background:rgba(16,32,43,.45);backdrop-filter:blur(2px)}

.panel-cabeza{
  display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem 1.25rem;border-bottom:1px solid var(--linea);
}
.panel-titulo{font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-50)}
.cerrar-menu{
  display:grid;place-items:center;width:44px;height:44px;
  background:transparent;border:0;color:var(--tinta);cursor:pointer;border-radius:var(--radio);
}
.cerrar-menu:hover{background:var(--papel-2)}

.panel-movil nav ul{list-style:none;margin:0;padding:.5rem 0}
.panel-movil nav a{
  display:block;padding:1rem 1.25rem;min-height:44px;
  color:var(--tinta);text-decoration:none;font-weight:700;font-size:1.05rem;
  border-left:4px solid transparent;
}
.panel-movil nav a:hover{background:var(--papel-2);border-left-color:var(--cc-amarillo)}
.panel-cta{margin:1rem 1.25rem;width:calc(100% - 2.5rem)}

@media(min-width:900px){
  .nav-escritorio{display:block;margin-inline:auto}
  .abrir-menu{display:none}
  .cabecera .marca{margin-right:0}
}
@media(prefers-reduced-motion:reduce){ .panel-movil{transition:none} }


/* =========================================================================
   2. HERO — la primera pantalla de index.html
   -------------------------------------------------------------------------
   Se evalúa contra la PRUEBA DE LOS 30 SEGUNDOS: sin scroll ni clic, el
   visitante debe poder responder qué puede hacer, dónde, cuándo y si le
   queda cerca.
   ========================================================================= */
.hero{
  background:
    radial-gradient(80rem 40rem at 88% 8%, #fff8e8 0%, transparent 60%),
    linear-gradient(180deg, var(--papel) 0%, var(--papel-2) 100%);
  padding-block:clamp(2.5rem,7vw,5.5rem) clamp(3rem,8vw,6.5rem);
  border-bottom:1px solid var(--linea);
}
.hero .rejilla{display:grid;gap:clamp(2.5rem,6vw,4.5rem);align-items:center}
@media(min-width:940px){ .hero .rejilla{grid-template-columns:1.3fr .9fr} }

.hero .kicker{
  font-size:.75rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  color:var(--cc-azul);margin-bottom:var(--e-3);
}
/* El titular no usa --t-5 (que llega a 5.4rem) sino un tope propio de
   4.6rem. El motivo es el texto: "de habitantes a" son 15 caracteres, dos más
   que el titular anterior, y a 5.4rem ese renglón se salía de su columna.
   Cuando el tamaño depende del texto que hay dentro, el valor va aquí y no en
   los tokens: los tokens son la escala del sitio entero. */
.hero h1{font-size:clamp(2.4rem,1.2rem + 4vw,4.6rem);letter-spacing:-.045em}

/* El subrayado amarillo no es un border-bottom: es una imagen de fondo, para
   que pase POR DETRÁS de las letras y no por debajo de la línea completa. */
.subrayado{
  position:relative;display:inline-block;
  background-image:linear-gradient(var(--cc-amarillo),var(--cc-amarillo));
  background-repeat:no-repeat;background-position:0 88%;
  background-size:100% .34em;padding-inline:.06em;
}

 /* EL LEMA — el renglón de "las dos T".
   Va entre el titular y el párrafo, y su tamaño es el que sostiene esa
   jerarquía de tres escalones: titular enorme, lema mediano, párrafo normal.
   Si el lema fuera del tamaño del párrafo, se perdería; si fuera del tamaño
   del titular, competirían y no se leería ninguno. */
.hero .lema{
  font-size:var(--t-2);font-weight:800;letter-spacing:-.025em;line-height:1.25;
  color:var(--tinta);max-width:34ch;margin-top:var(--e-3);
}

.hero .bajada{
  font-size:var(--t-1);color:var(--tinta-70);max-width:38ch;
  margin-top:var(--e-3);line-height:1.55;
}
.hero .bajada b{color:var(--tinta);font-weight:700}
.hero .acciones{margin-top:var(--e-4)}

/* LOS DOS BOTONES DE LA PORTADA MÍNIMA, UNO ENCIMA DEL OTRO.
   No es capricho: medidos, "Empezar como voluntario →" y "Ver más sobre la
   asociación" ocupan 308 y 307 px, y con la separación de 16 px suman 631 en
   una columna de 619. Se pasan por 12 px, así que el navegador los baja de
   renglón igual. Puestos uno encima del otro Y DEL MISMO ANCHO, esa fila rota
   se lee como una decisión y no como un accidente; y el rojo, que es lo que
   esta página quiere que pase, queda arriba y solo.

   El max-width evita el otro extremo: dos botones de 619 px de ancho parecen
   dos barras, no dos botones. */
.hero .acciones--columna{
  display:flex;flex-direction:column;align-items:stretch;
  gap:.7rem;max-width:23rem;
}
.hero .acciones--columna .btn{width:100%}

/* LA LÍNEA DEBAJO DEL BOTÓN. Deliberadamente pequeña y gris: es letra
   pequeña honesta, no un argumento de venta. Si compitiera con el botón, le
   quitaría clics al botón. */
.hero .bajo-boton{
  margin-top:var(--e-2);font-size:.92rem;line-height:1.55;
  /* ⚠ NO usar --tinta-50 aquí. Sobre blanco da 3.92:1 de contraste y el
     mínimo que pide WCAG AA para texto de este tamaño es 4.5:1. --tinta-70
     da 7.36:1 y sigue leyéndose como letra pequeña y secundaria. Es el mismo
     criterio por el que el rojo de marca no se usa para texto. */
  color:var(--tinta-70);max-width:44ch;
}

/* --- Tarjeta del próximo evento --- */
.proxima{
  margin-top:var(--e-5);
  background:var(--papel);
  border:1px solid var(--linea);
  border-left:5px solid var(--cc-verde);
  border-radius:var(--radio);
  padding:1.15rem 1.35rem 1.25rem;
  box-shadow:var(--sombra);
  max-width:34rem;
}
.proxima-etiqueta{font-size:.7rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-50)}
.proxima-fecha{font-size:var(--t-2);font-weight:900;letter-spacing:-.03em;line-height:1.15;margin-top:.2rem}
.proxima-titulo{font-size:1rem;font-weight:700;color:var(--tinta);margin-top:.35rem}
.proxima-lugar{font-size:.92rem;color:var(--tinta-70);margin-top:.15rem;line-height:1.5}
.proxima-lugar span{white-space:nowrap;font-weight:600;color:var(--tinta)}

/* --- El emblema del hero: el logo como mecanismo, no como adorno --- */
.hero .emblema svg{width:min(100%,340px);overflow:visible}

/* El cuarto arco no existe hasta que el visitante avanza por la página.
   `animation-timeline:scroll()` liga la animación a la barra de scroll: CSS
   puro, sin JavaScript y sin librerías. Va dentro de @supports porque es
   reciente; donde no exista, el arco simplemente no aparece y lo cierra el
   JavaScript de js/3-emblema.js. */
.faltante{stroke-dasharray:0 453;opacity:0}
@supports (animation-timeline: scroll()){
  .faltante{
    animation:cerrar linear both;
    animation-timeline:scroll(root);
    animation-range:0 70vh;
  }
}
@keyframes cerrar{
  from{ stroke-dasharray:0 453; opacity:0 }
  10%{ opacity:1 }
  to{ stroke-dasharray:98 355; opacity:1 }
}

/* Estado COMPLETO: lo pone js/3-emblema.js al pasar el punto de cierre.
   Al fijar aquí el arco y apagar la animación de scroll, subir de nuevo ya no
   lo deshace: una vez que el círculo cierra, no se vuelve a abrir. */
.emblema.completo .faltante{animation:none;stroke-dasharray:98 355;opacity:1}
.emblema.completo svg{animation:celebrar 700ms var(--curva)}
@keyframes celebrar{ 0%{transform:scale(1)} 45%{transform:scale(1.05)} 100%{transform:scale(1)} }

.hero figcaption{
  text-align:center;margin-top:var(--e-3);
  font-size:.85rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--tinta-50);line-height:1.7;
}
.hero figcaption b{display:block}
.cap--abierto b{color:var(--cc-rojo-accion)}
.cap--cerrado{display:none}
.cap--cerrado b{color:var(--cc-verde);filter:saturate(1.5) brightness(.72)}
.emblema.completo .cap--abierto{display:none}
.emblema.completo .cap--cerrado{display:block}

/* CELULAR. Medido con capturas reales de iPhone (390x844): con el emblema
   arriba, la primera pantalla era SOLO el logo, sin titular ni fecha. Aquí
   manda el texto y el emblema baja al final, más chico. */
@media(max-width:939px){
  .hero{padding-block:var(--e-3) var(--e-5)}
  .hero .rejilla{gap:var(--e-4)}
  .hero .emblema{order:1}
  .hero .emblema svg{width:min(46%,170px)}
  .hero figcaption{margin-top:var(--e-2);font-size:.78rem}

  .hero .kicker{margin-bottom:var(--e-2);font-size:.68rem;letter-spacing:.12em}
  .hero h1{font-size:clamp(2.1rem,9.2vw,3rem)}
  .hero .lema{font-size:1.35rem;margin-top:var(--e-2);max-width:none}
  .hero .bajada{font-size:1.03rem;margin-top:var(--e-2);max-width:none}
  .hero .bajo-boton{max-width:none;font-size:.88rem}

  /* Botones a todo lo ancho: en pantalla angosta el texto largo se partía y
     la flecha quedaba sola en la segunda línea. */
  .hero .acciones{margin-top:var(--e-3);gap:.65rem}
  .hero .acciones .btn{width:100%;text-align:center}

  .proxima{margin-top:var(--e-3);padding:1rem 1.1rem}
  .proxima-fecha{font-size:1.45rem}
}
@media(prefers-reduced-motion:reduce){
  .emblema.completo svg{animation:none}
  /* El arco que falta NO se rellena solo: se queda abierto, que es el logo
     real de la marca, y lo cierra el JavaScript sin animación. */
  .faltante{animation:none}
}


/* =========================================================================
   3. BUSCADOR DE BRIGADAS — la pieza principal de index.html
   -------------------------------------------------------------------------
   Resuelve la pregunta peor contestada del sitio actual: "¿dónde reciclo?".
   Hoy son cuatro direcciones en texto plano; aquí el visitante da su
   ubicación y el sitio le ordena las fechas por cercanía real.

   DEGRADACIÓN ELEGANTE: las tarjetas están escritas completas en el HTML. Si
   el JavaScript falla, el visitante sigue viendo todas las fechas con lugar y
   horario. Solo pierde el orden por cercanía y la cuenta atrás.
   ========================================================================= */
.buscador{background:var(--papel)}
.buscador h2{font-size:var(--t-3);max-width:16ch}
.buscador .intro{margin-top:var(--e-2);color:var(--tinta-70);font-size:var(--t-0)}

.buscador .controles{
  display:flex;flex-wrap:wrap;align-items:end;gap:var(--e-2);
  margin-top:var(--e-4);padding:1rem 1.15rem;
  background:var(--papel-2);border:1px solid var(--linea);border-radius:var(--radio);
}
.buscador .separador{color:var(--tinta-50);font-size:.9rem;padding-bottom:.85rem}
.buscador .campo{display:flex;flex-direction:column;gap:.35rem;flex:1;min-width:14rem}
.buscador .campo span{font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-50)}
.buscador .campo select{
  font-family:inherit;font-size:1rem;font-weight:600;color:var(--tinta);
  padding:.8rem .9rem;min-height:52px;
  background:var(--papel);border:1px solid var(--linea-fuerte);border-radius:var(--radio);
}
/* role="status" + aria-live: cuando el JavaScript escribe aquí, un lector de
   pantalla lo lee en voz alta sin que la persona tenga que ir a buscarlo. */
.buscador .aviso{margin-top:var(--e-2);min-height:1.5rem;font-size:.95rem;font-weight:600;color:var(--cc-azul)}

.buscador .lista{list-style:none;margin:var(--e-3) 0 0;padding:0;display:grid;gap:var(--e-3)}
@media(min-width:1040px){ .buscador .lista{grid-template-columns:repeat(2,1fr)} }

.tarjeta{
  background:var(--papel);
  border:1px solid var(--linea);
  border-top:5px solid var(--linea-color);
  border-radius:var(--radio);
  padding:1.35rem 1.4rem 1.5rem;
  display:flex;flex-direction:column;gap:var(--e-2);
  transition:box-shadow var(--transicion) var(--curva), border-color var(--micro);
}
.tarjeta:hover{box-shadow:var(--sombra)}
.lista.ordenada .tarjeta{animation:aparecer var(--transicion) var(--curva) both}
@keyframes aparecer{ from{opacity:.35;transform:translateY(6px)} to{opacity:1;transform:none} }

/* Una vez ordenada, la primera tarjeta ES la respuesta a la pregunta. */
.lista.ordenada .tarjeta:first-child{
  border-color:var(--cc-azul);
  box-shadow:0 0 0 3px rgba(17,92,144,.12), var(--sombra);
}

.tarjeta-cabeza{display:flex;justify-content:space-between;align-items:start;gap:var(--e-2)}
.tarjeta .fecha{
  font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--linea-color);filter:saturate(1.4) brightness(.75);
}
.tarjeta h3{font-size:var(--t-1);margin-top:.25rem;letter-spacing:-.02em}
.tarjeta .lugar{font-size:.92rem;color:var(--tinta-70);margin-top:.35rem;line-height:1.5}
.tarjeta .horario{font-size:.92rem;font-weight:700;color:var(--tinta);margin-top:.1rem}

.distancia{
  flex-shrink:0;white-space:nowrap;
  font-size:.88rem;font-weight:800;font-variant-numeric:tabular-nums;
  color:var(--cc-azul);background:var(--papel-2);
  border:1px solid var(--linea);border-radius:99px;padding:.35rem .7rem;
}

.tarjeta .materiales{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:0;padding:0}
.tarjeta .materiales li{
  font-size:.76rem;font-weight:700;letter-spacing:.04em;
  color:var(--tinta-70);background:var(--papel-2);
  border:1px solid var(--linea);border-radius:99px;padding:.3rem .65rem;
}

/* `margin-top:auto` empuja la cuenta atrás y los botones al pie de la
   tarjeta. Las tarjetas de una fila miden lo mismo que la más alta, así que
   sin esto una tarjeta corta (la que no lleva materiales) dejaba un hueco
   blanco justo en medio, como si faltara algo. */
.tarjeta .cuenta{margin-top:auto;border-top:1px dashed var(--linea);padding-top:var(--e-2)}

.tarjeta-acciones{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;padding-top:var(--e-2)}
.enlace-mapa{
  font-size:.9rem;font-weight:700;color:var(--cc-azul);
  text-decoration:underline;text-underline-offset:3px;
  min-height:44px;display:inline-flex;align-items:center;
}
@media(prefers-reduced-motion:reduce){ .lista.ordenada .tarjeta{animation:none} }


/* =========================================================================
   4. CIFRAS DE IMPACTO
   -------------------------------------------------------------------------
   Cada cifra se puede abrir para ver su periodo y su metodología. Eso ataca
   directamente el hallazgo 5 de la auditoría: hoy las cifras no coinciden
   entre la home, "Nosotros" y el Informe Anual, y nadie puede saber cuál es
   la buena porque ninguna dice de dónde salió.

   La ventanita usa `popover`, el elemento nativo del navegador. Accesible de
   fábrica: cierra con Escape, atrapa el foco, oscurece el fondo. Sin librería.
   ========================================================================= */
.cifras{background:var(--papel-3);border-bottom:1px solid var(--linea);padding-block:clamp(3rem,6vw,4.5rem)}

/* gap:1px sobre un fondo gris: las líneas divisorias de la rejilla son el
   fondo asomándose entre las celdas. Más simple que poner bordes. */
.cifras-lista{
  list-style:none;margin:0;padding:0;display:grid;gap:1px;
  background:var(--linea);border:1px solid var(--linea);border-radius:var(--radio);
  overflow:hidden;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}
.cifras-lista li{background:var(--papel-3)}

.disparo{
  all:unset;display:flex;flex-direction:column;gap:.15rem;
  padding:1.5rem 1.4rem;width:100%;cursor:pointer;box-sizing:border-box;
  min-height:100%;transition:background var(--micro);
}
.disparo:hover{background:#fff}
.disparo:focus-visible{outline:3px solid var(--cc-rojo-accion);outline-offset:-3px}

.cifras .numero{
  font-size:var(--t-3);font-weight:900;line-height:1;letter-spacing:-.045em;
  font-variant-numeric:tabular-nums;color:var(--tinta);
}
.cifras .prefijo{color:var(--cc-rojo-accion)}
.cifras .unidad{font-weight:800;font-size:.98rem;margin-top:.5rem;color:var(--tinta)}
.cifras .desc{font-size:.92rem;color:var(--tinta-70);line-height:1.45}
.cifras .ver{
  margin-top:.7rem;font-size:.75rem;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--cc-azul);
}
.disparo:hover .ver{text-decoration:underline;text-underline-offset:3px}

.ficha{
  max-width:min(90vw,30rem);border:1px solid var(--linea-fuerte);
  border-radius:var(--radio);padding:1.75rem;box-shadow:var(--sombra);
  background:#fff;color:var(--tinta);
}
.ficha::backdrop{background:rgba(16,32,43,.4)}
.ficha h3{font-size:1.15rem;margin-bottom:1rem}
.ficha dl{margin:0;display:grid;gap:.9rem}
.ficha dt{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-50)}
.ficha dd{margin:.15rem 0 0;font-size:.95rem;color:var(--tinta-70);line-height:1.55}
.ficha .alerta{color:var(--cc-rojo-accion)}
.ficha .cerrar{
  all:unset;margin-top:1.4rem;cursor:pointer;font-weight:700;font-size:.9rem;
  color:var(--cc-azul);text-decoration:underline;text-underline-offset:3px;
}
.cifras .nota{margin-top:var(--e-3);font-size:.9rem;color:var(--tinta-70);max-width:64ch;line-height:1.6}
.cifras .nota b{color:var(--tinta)}


/* =========================================================================
   5. QUÉ HACEMOS — las cuatro líneas de trabajo
   -------------------------------------------------------------------------
   Los cuatro colores del logo no son decoración: cada uno etiqueta una línea
   de trabajo en todo el sitio, siempre. La variable --c la pone cada tarjeta
   en su atributo style; así una sola regla CSS sirve para las cuatro.
   ========================================================================= */
.lineas .encabezado{margin-bottom:clamp(2.5rem,5vw,3.5rem)}
.lineas h2{font-size:var(--t-4)}
.lineas .acento{color:var(--cc-azul)}
.lineas .intro{margin-top:var(--e-3);color:var(--tinta-70);max-width:58ch;font-size:var(--t-0)}

/* Retícula deliberadamente asimétrica: dos bloques grandes y un par apilado.
   Nunca cuatro tarjetas idénticas. */
.tablero{display:grid;gap:var(--e-3)}
@media(min-width:900px){
  .tablero{grid-template-columns:1fr 1fr 1fr;align-items:start}
  .tablero .par{grid-column:3}
}
.tablero .par{display:grid;gap:var(--e-3)}

.linea-trabajo{
  position:relative;background:var(--papel);border:1px solid var(--linea);
  border-radius:var(--radio);padding:1.8rem 1.6rem 1.6rem;
  box-shadow:var(--sombra);overflow:hidden;
  transition:transform var(--transicion) var(--curva), border-color var(--transicion);
}
.linea-trabajo:hover{transform:translateY(-3px);border-color:var(--c)}
.linea-trabajo .barra{position:absolute;inset:0 0 auto 0;height:5px;background:var(--c)}
.linea-trabajo h3{font-size:var(--t-1);margin-top:.4rem}
.linea-trabajo .promesa{margin-top:.7rem;font-weight:600;font-size:1.02rem;color:var(--tinta);line-height:1.45}
.linea-trabajo .cuerpo{margin-top:.8rem;color:var(--tinta-70);font-size:.96rem;line-height:1.62}
.linea-trabajo--grande{padding-block:2.2rem 2rem}
.linea-trabajo--grande h3{font-size:var(--t-2)}

/* =========================================================================
   DÓNDE PUEDES SUMARTE — los cinco programas
   -------------------------------------------------------------------------
   Reutiliza la tarjeta .linea-trabajo tal cual (mismo borde, misma barra de
   color, mismo hover). Lo único propio es la retícula, porque cinco tarjetas
   no se reparten igual que cuatro.

   EL TRUCO DE LAS SEIS COLUMNAS: cinco tarjetas en una retícula de cinco
   columnas salen flaquísimas, y en tres columnas dejan un hueco feo al final.
   Con SEIS columnas y tarjetas que ocupan DOS cada una, salen tres arriba; y
   a las dos últimas se les dice en qué columna empezar (2 y 4) para que
   queden centradas debajo. Tres arriba, dos centradas abajo.
   ========================================================================= */
.programas-vol{padding-block:clamp(3rem,7vw,5rem)}
.programas-vol .encabezado{margin-bottom:clamp(2.2rem,5vw,3rem)}
.programas-vol h2{font-size:var(--t-4)}
.programas-vol .acento{color:var(--cc-rojo-accion)}
.programas-vol .intro{margin-top:var(--e-3);color:var(--tinta-70);max-width:54ch;font-size:var(--t-0)}

.rejilla-programas{display:grid;gap:var(--e-3)}
@media(min-width:760px){
  .rejilla-programas{grid-template-columns:1fr 1fr}
}
@media(min-width:1000px){
  .rejilla-programas{grid-template-columns:repeat(6,1fr)}
  .rejilla-programas > *{grid-column:span 2}
  .rejilla-programas > *:nth-child(4){grid-column:2 / span 2}
  .rejilla-programas > *:nth-child(5){grid-column:4 / span 2}
}
.rejilla-programas .linea-trabajo h3{font-size:var(--t-0);line-height:1.25}

.programas{list-style:none;margin:var(--e-3) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem}
.programas li{
  font-size:.8rem;font-weight:700;padding:.4rem .75rem;
  border:1px solid var(--linea);border-radius:999px;color:var(--tinta-70);
  background:var(--papel-2);
}


/* =========================================================================
   6. CIERRE DE VOLUNTARIADO — el último llamado de index.html
   -------------------------------------------------------------------------
   Quien llega hasta aquí ya leyó todo y no ha hecho clic. Este bloque no
   agrega información: quita fricción. Contesta las tres dudas que frenan a un
   voluntario primerizo y ofrece un único botón.
   ========================================================================= */
.cierre-vol{
  background:
    radial-gradient(60rem 30rem at 15% 0%, #14639b 0%, transparent 65%),
    var(--cc-azul-profundo);
  color:#fff;
}
.cierre-vol .rejilla{display:grid;gap:clamp(2.5rem,6vw,4rem);align-items:start}
@media(min-width:900px){ .cierre-vol .rejilla{grid-template-columns:1.05fr .95fr} }

.eyebrow.claro{color:rgba(255,255,255,.72)}
.eyebrow.claro::after{background:rgba(255,255,255,.28)}

.cierre-vol h2{font-size:var(--t-3);letter-spacing:-.035em}
.cierre-vol .texto{margin-top:var(--e-3);font-size:var(--t-0);line-height:1.65;color:rgba(255,255,255,.82);max-width:38ch}
.cierre-vol .acciones{margin-top:var(--e-4)}
.cierre-vol .contacto{margin-top:var(--e-3);font-size:.92rem;line-height:1.9;color:rgba(255,255,255,.68)}
.cierre-vol .contacto a{color:var(--cc-amarillo);font-weight:700;text-decoration:underline;text-underline-offset:3px}

.dudas{margin:0;display:grid;gap:var(--e-2)}
.duda{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
  border-left:4px solid var(--cc-amarillo);
  border-radius:var(--radio);
  padding:1.05rem 1.25rem;
}
.duda dt{font-weight:800;font-size:1.02rem;letter-spacing:-.01em}
.duda dd{margin:.4rem 0 0;font-size:.94rem;line-height:1.6;color:rgba(255,255,255,.78)}


/* =========================================================================
   7. CONSTRUCTOR DE ALIANZA — aliarse.html
   -------------------------------------------------------------------------
   La persona mueve tres controles y ve al instante el alcance estimado. La
   idea: que no haga falta una junta para saber si esto sirve.
   ========================================================================= */
.aliarse{background:var(--papel-2);border-block:1px solid var(--linea)}
.aliarse .encabezado{margin-bottom:clamp(2.2rem,5vw,3rem)}
.aliarse h2{font-size:var(--t-4)}
.aliarse .acento{color:var(--cc-rojo-accion)}
.aliarse .intro{margin-top:var(--e-3);color:var(--tinta-70);max-width:56ch}

.constructor{
  display:grid;gap:0;background:var(--papel);
  border:1px solid var(--linea-fuerte);border-radius:var(--radio);
  overflow:hidden;box-shadow:var(--sombra);
}
@media(min-width:920px){ .constructor{grid-template-columns:.85fr 1.15fr} }

.constructor .controles{
  padding:clamp(1.6rem,3vw,2.2rem);display:flex;flex-direction:column;gap:var(--e-3);
  background:var(--papel-2);border-bottom:1px solid var(--linea);
}
@media(min-width:920px){ .constructor .controles{border-bottom:none;border-right:1px solid var(--linea)} }

.constructor .campo{display:flex;flex-direction:column;gap:.55rem}
.constructor label{font-size:.78rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--tinta-50)}
.constructor .atajo{
  margin-top:auto;padding-top:var(--e-3);border-top:1px solid var(--linea);
  font-size:.88rem;color:var(--tinta-70);line-height:1.55;
}
.constructor .atajo a{font-weight:700}

.rango{display:flex;align-items:center;gap:var(--e-2)}
.rango input[type=range]{flex:1;accent-color:var(--cc-rojo-accion);height:28px;cursor:pointer}
.rango output{
  font-size:var(--t-2);font-weight:900;font-variant-numeric:tabular-nums;
  min-width:3.2ch;text-align:right;letter-spacing:-.03em;
}

.constructor select{
  font-family:inherit;font-size:1rem;font-weight:600;color:var(--tinta);
  padding:.85rem 1rem;border:1px solid var(--linea-fuerte);border-radius:var(--radio);
  background:var(--papel);min-height:50px;cursor:pointer;
}

.resultado{padding:clamp(1.6rem,3vw,2.4rem)}
.resultado-titulo{font-size:var(--t-1);font-weight:800;letter-spacing:-.02em;line-height:1.25}

.estimados{
  list-style:none;margin:var(--e-3) 0 0;padding:0;
  display:grid;gap:var(--e-2);grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
}
.estimados li{border-left:3px solid var(--cc-verde);padding-left:.85rem;display:flex;flex-direction:column;gap:.15rem}
.estimados .valor{font-size:var(--t-2);font-weight:900;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.estimados .etiqueta{font-size:.85rem;color:var(--tinta-70);line-height:1.4}

.resultado .disclaimer{
  margin-top:var(--e-3);font-size:.86rem;color:var(--tinta-70);
  background:var(--papel-3);border-radius:var(--radio);padding:.8rem 1rem;line-height:1.55;
}
.resultado .disclaimer b{color:var(--tinta)}
.resultado .sub{
  font-size:.78rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tinta-50);margin-top:var(--e-4);
}
.entregables{list-style:none;margin:.9rem 0 0;padding:0;display:grid;gap:.5rem}
.entregables li{position:relative;padding-left:1.6rem;font-size:.95rem;color:var(--tinta-70);line-height:1.5}
.entregables li::before{
  content:"";position:absolute;left:0;top:.55em;width:.7rem;height:.7rem;
  border-radius:50%;background:var(--cc-amarillo);
}
.resultado .acciones{margin-top:var(--e-4)}

.prototipo-nota{margin-top:var(--e-3);font-size:.88rem;color:var(--tinta-70);max-width:66ch;line-height:1.6}
.prototipo-nota b{color:var(--tinta)}


/* =========================================================================
   8. DÓNDE ACTUAMOS — aliarse.html
   ========================================================================= */
.donde .encabezado{margin-bottom:clamp(2.2rem,5vw,3rem)}
.donde h2{font-size:var(--t-4)}
.donde .acento{color:var(--cc-verde)}
.donde .intro{margin-top:var(--e-3);color:var(--tinta-70);max-width:52ch}

.puntos{display:grid;gap:var(--e-2);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.punto{
  display:flex;gap:.9rem;align-items:flex-start;
  padding:1.3rem;border:1px solid var(--linea);border-radius:var(--radio);
  background:var(--papel);transition:border-color var(--micro);
}
.punto:hover{border-color:var(--cc-verde)}
.punto .pin{flex-shrink:0;margin-top:.15rem}
.punto h3{font-size:1.05rem}
.punto .dir{font-size:.92rem;color:var(--tinta-70);margin-top:.3rem;line-height:1.45}
.punto .zona{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-50);margin-top:.55rem}

.donde .materiales{margin-top:var(--e-4);display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-2)}
.donde .materiales h3{font-size:.78rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-50)}
.donde .materiales ul{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0}
.donde .materiales li{
  font-size:.85rem;font-weight:700;padding:.45rem .85rem;border-radius:999px;
  background:var(--cc-verde);color:#0d2e28;
}

.pendiente{
  margin-top:var(--e-5);padding:1.8rem;border-radius:var(--radio);
  background:var(--papel-2);border:1px dashed var(--linea-fuerte);
}
.pendiente h3{font-size:var(--t-1)}
.pendiente p{margin-top:.9rem;color:var(--tinta-70);max-width:62ch;line-height:1.65}
.pendiente .requisito b{color:var(--tinta)}


/* =========================================================================
   9. CIERRE DE ALIANZAS — aliarse.html
   ========================================================================= */
.cierre{background:var(--cc-azul-profundo);color:#fff;padding-block:clamp(3.5rem,8vw,6rem)}
.cierre .rejilla{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center}
@media(min-width:880px){ .cierre .rejilla{grid-template-columns:1.3fr .7fr} }

.cierre .eyebrow.claro{color:var(--cc-amarillo)}
.cierre h2{font-size:var(--t-4);color:#fff}
.cierre .texto{margin-top:var(--e-3);color:#cfe4f2;max-width:44ch;font-size:var(--t-1);line-height:1.55}
.cierre .acciones{margin-top:var(--e-4)}
.cierre .contacto{margin-top:var(--e-3);color:#a9cbe3;font-size:.95rem}
.cierre .contacto a{color:#fff;font-weight:700}

.cierre .emblema svg{width:min(100%,220px)}
.cierre figcaption{
  text-align:center;margin-top:var(--e-2);color:var(--cc-amarillo);
  font-size:.82rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
}


/* =========================================================================
   10. PÁGINA 404
   -------------------------------------------------------------------------
   Se llega aquí por un enlace roto o por una dirección vieja del sitio
   anterior. Ese segundo caso va a ser el más común cuando se migre desde
   WordPress: hay 286 direcciones y muchas cambian.

   Por eso esta página no se disculpa y ya: ofrece la salida.
   ========================================================================= */
.error{
  background:linear-gradient(180deg,var(--papel) 0%,var(--papel-2) 100%);
  min-height:60vh;display:grid;place-items:center;
  padding-block:clamp(3rem,10vw,7rem);text-align:center;
}
.error .emblema{margin:0 auto var(--e-4)}
.error .emblema svg{width:120px;opacity:.55}
.error .codigo{
  font-size:.75rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--tinta-50);margin-bottom:var(--e-2);
}
.error h1{font-size:var(--t-4);letter-spacing:-.04em}
.error .texto{margin:var(--e-3) auto 0;max-width:42ch;color:var(--tinta-70);font-size:var(--t-0);line-height:1.6}
.error .acciones{justify-content:center;margin-top:var(--e-4)}
@media(max-width:600px){ .error .acciones .btn{width:100%} }


/* =========================================================================
   11. PIE
   ========================================================================= */
.pie{background:#08283e;color:#b9d3e5;padding-block:var(--e-5) var(--e-4);font-size:.95rem}
.pie .columnas{display:grid;gap:var(--e-4);grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
@media(min-width:900px){ .pie .col--marca{max-width:26ch} }

.pie .marca{font-weight:900;font-size:1.35rem;letter-spacing:-.03em;color:#fff;line-height:1;display:block}
.pie .marca b{display:block;font-size:.68rem;font-weight:800;letter-spacing:.02em;margin-bottom:-3px}
.pie .marca sup{font-size:.5em;vertical-align:super}
.pie .col--marca p{margin-top:var(--e-2);line-height:1.6;font-size:.9rem;color:#8fb4cd}

.pie h3{font-size:.75rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--cc-amarillo);margin-bottom:var(--e-2)}
.pie ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.pie li{line-height:1.4}
.pie li span{display:block;font-size:.75rem;color:#6e97b3;margin-top:.1rem}
.pie a{color:#dbeaf5;text-decoration:none}
.pie a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}

.pie .legal{
  margin-top:var(--e-5);padding-top:var(--e-3);border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;gap:.5rem var(--e-3);justify-content:space-between;
  font-size:.82rem;color:#6e97b3;
}
.pie .legal p{margin:0}