/*
 * Estilos compartidos del sitio (inicio y bono). Diseño iterado en Claude Design.
 * --magenta y --cian se pisan en cada página con los colores de setting('Bono.*').
 */
:root {
    --magenta: #E51353;
    --cian: #2BD9E6;
    --negro: #000;
    --blanco: #fff;
    --tenue: rgb(255 255 255 / 0.62);
    --linea: rgb(255 255 255 / 0.14);
}
*, *::before, *::after { box-sizing: border-box; }
/* clip (no hidden): hidden convierte a body en contenedor de scroll y rompe los sticky. */
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; scroll-padding-top: 4.5rem; }
body {
    margin: 0;
    background: var(--negro);
    color: var(--blanco);
    font-family: Archivo, ui-sans-serif, system-ui, sans-serif;
    font-size: 1.0625rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid var(--cian); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }

.envoltura { max-width: 76rem; margin-inline: auto; padding-inline: 1.25rem; }
@media (min-width: 640px) { .envoltura { padding-inline: 2rem; } }

/* Tipografía: una sola familia; el eje de ancho separa los roles. */
.ancha { font-stretch: 125%; font-weight: 850; letter-spacing: -0.02em; line-height: 0.92; }
.angosta { font-stretch: 62%; font-weight: 800; }
.t-seccion { font-stretch: 118%; font-weight: 800; letter-spacing: -0.015em; line-height: 1; font-size: clamp(2rem, 5.5vw, 3.5rem); text-wrap: balance; }
.t-bajada { color: var(--tenue); max-width: 38rem; margin-top: 1rem; }

.boton {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.8rem 1.25rem; border-radius: 999px; border: 0; cursor: pointer;
    font: inherit; font-weight: 700; font-stretch: 110%; text-decoration: none;
    transition: background-color .15s, color .15s;
}
.boton-lleno { background: var(--blanco); color: var(--negro); }
.boton-lleno:hover { background: var(--cian); }
.boton-borde { background: none; box-shadow: inset 0 0 0 2px var(--blanco); color: var(--blanco); }
.boton-borde:hover { background: var(--blanco); color: var(--negro); }
.boton-magenta { background: var(--magenta); color: var(--blanco); }
.boton-magenta:hover { background: var(--blanco); color: var(--negro); }
.boton svg { width: 1.1rem; height: 1.1rem; }

/* ---------- Cabecera ---------- */
.cabecera { position: sticky; top: 0; z-index: 20; background: rgb(0 0 0 / 0.86); backdrop-filter: blur(8px); border-bottom: 1px solid var(--linea); }
.cabecera .envoltura { display: flex; align-items: center; gap: 1rem; height: 4rem; }
.marca { display: flex; align-items: center; gap: 0.625rem; text-decoration: none; font-stretch: 112%; font-weight: 800; min-width: 0; }
.marca img { width: 2.25rem; height: 2.25rem; object-fit: contain; flex-shrink: 0; }
.marca span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 1.5rem; }
.nav a.enlace { text-decoration: none; color: var(--tenue); font-weight: 600; display: none; }
.nav a.enlace:hover, .nav a.enlace[aria-current="page"] { color: var(--blanco); }
@media (min-width: 820px) { .nav a.enlace { display: inline; } }
.nav .boton { padding: 0.5rem 1rem; background: var(--magenta); color: var(--blanco); }
.nav .boton:hover { background: var(--blanco); color: var(--negro); }
/* Menú móvil */
.menu-boton { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; background: none; border: 0; color: var(--blanco); cursor: pointer; padding: 0; }
.menu-boton svg { width: 1.5rem; height: 1.5rem; }
@media (min-width: 820px) { .menu-boton { display: none; } }
.menu-movil { display: none; border-top: 1px solid var(--linea); }
.menu-movil.abierto { display: block; }
@media (min-width: 820px) { .menu-movil { display: none !important; } }
.menu-movil a { display: block; padding: 0.9rem 1.25rem; text-decoration: none; font-stretch: 112%; font-weight: 700; font-size: 1.15rem; border-bottom: 1px solid var(--linea); }
.menu-movil a:last-child { border-bottom: 0; }
.menu-movil a:hover { color: var(--cian); }

/* ---------- Portada: el muro "Hack the Planet" ---------- */
.portada { position: relative; overflow: hidden; padding-block: 3.5rem 0; }
@media (min-width: 900px) { .portada { padding-block: 6rem 0; } }
.muro {
    position: absolute; inset: -1rem -30% auto -30%;
    display: flex; flex-direction: column;
    pointer-events: none; user-select: none;
    font-size: clamp(1.9rem, 5.2vw, 4.25rem); line-height: 0.9;
    white-space: nowrap; color: rgb(255 255 255 / 0.07);
}
.muro p:nth-child(odd) { transform: translateX(-9%); }
.muro p:nth-child(3n) { transform: translateX(-17%); }
.fila-viva { position: relative; }
.fila-viva span {
    position: absolute; inset: 0; color: var(--magenta);
    clip-path: inset(0 100% 0 0);
    animation: barrido 2.2s cubic-bezier(.65,0,.35,1) .35s forwards;
}
@keyframes barrido { to { clip-path: inset(0 0 0 0); } }

.portada-grilla { position: relative; display: grid; gap: 0; }
.panel {
    position: relative; z-index: 1;
    background: var(--negro);
    padding: 1.75rem 1.5rem 2rem;
    box-shadow: 0 0 0 1px var(--linea);
    max-width: 46rem;
}
@media (min-width: 640px) { .panel { padding: 2.5rem 2.75rem 2.75rem; } }
.panel-logo { width: 5.5rem; height: auto; margin-bottom: 1.5rem; }
@media (min-width: 640px) { .panel-logo { width: 7rem; } }
.titulo { font-size: clamp(2.9rem, 10.5vw, 6.25rem); text-wrap: balance; }
.panel p { margin-top: 1.25rem; font-size: clamp(1.05rem, 2.2vw, 1.25rem); color: rgb(255 255 255 / 0.8); max-width: 34rem; }
.panel .acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }

/* La franja magenta del diseño original: acá lleva el bono. */
.franja {
    position: relative; z-index: 0;
    background: var(--magenta);
    margin-top: -1.25rem; margin-left: -1.25rem; margin-right: -1.25rem;
    padding: 2.5rem 1.25rem 1.75rem;
}
@media (min-width: 640px) { .franja { margin-left: -2rem; margin-right: 0; padding: 3rem 2rem 2rem; max-width: 60rem; } }
.franja-vacia { height: 3rem; padding: 0; }
.franja h2 { font-stretch: 112%; font-weight: 800; font-size: clamp(1.35rem, 3.2vw, 1.75rem); line-height: 1.1; }
.franja p { margin-top: 0.4rem; color: rgb(255 255 255 / 0.92); max-width: 34rem; }
.franja-fila { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.25rem; }
.franja .contador { font-size: clamp(3rem, 8vw, 4.5rem); line-height: 0.85; font-variant-numeric: tabular-nums; }
.franja .contador small { font-size: 1rem; font-stretch: 100%; font-weight: 600; display: block; margin-top: 0.35rem; }
.franja .boton-lleno:hover { background: var(--negro); color: var(--blanco); }

/* ---------- Secciones ---------- */
.seccion { padding-block: 5rem; border-top: 1px solid var(--linea); }
@media (min-width: 900px) { .seccion { padding-block: 7rem; } }
.portada + .seccion { border-top: 0; }

/* Eventos */
.eventos { margin-top: 2.5rem; border-top: 1px solid var(--linea); }
.evento { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1rem 1.5rem; padding-block: 1.5rem; border-bottom: 1px solid var(--linea); align-items: start; }
@media (min-width: 720px) { .evento { grid-template-columns: 9rem 1fr auto; padding-block: 2rem; } }
.fecha { line-height: 0.85; }
.fecha .dia { display: block; font-size: clamp(3rem, 7vw, 4.5rem); font-variant-numeric: tabular-nums; color: var(--cian); }
.fecha .dia-rango { font-size: clamp(2rem, 4.2vw, 2.9rem); padding-top: 0.2rem; }
.fecha .mes { display: block; font-stretch: 112%; font-weight: 700; color: var(--magenta); margin-top: 0.3rem; }
.fecha .pendiente { display: block; font-stretch: 100%; font-weight: 600; color: var(--cian); font-size: 0.95rem; line-height: 1.2; padding-top: 0.35rem; }
.evento h3 { font-stretch: 112%; font-weight: 800; font-size: clamp(1.3rem, 3vw, 1.9rem); line-height: 1.1; }
.evento p { color: var(--tenue); margin-top: 0.5rem; max-width: 36rem; }
.evento h3 a { color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; text-decoration-color: var(--magenta); }
.evento h3 a:hover { text-decoration-color: var(--cian); }
.evento .evento-donde { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin-top: 0.6rem; color: var(--blanco); font-weight: 600; font-size: 0.95rem; }
.evento-donde span { display: inline-flex; align-items: center; gap: 0.35rem; }
.evento-donde svg { width: 1rem; height: 1rem; color: var(--cian); }
.evento-donde span + span { color: var(--tenue); }
.etiqueta { grid-column: 2; justify-self: start; font-size: 0.875rem; font-weight: 600; padding: 0.2rem 0.7rem; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--linea); color: var(--tenue); white-space: nowrap; }
@media (min-width: 720px) { .etiqueta { grid-column: 3; justify-self: end; margin-top: 0.3rem; } }
.evento-destacado h3 { color: var(--blanco); }
.evento-destacado .etiqueta { background: var(--cian); color: var(--negro); box-shadow: none; }

/* Comunidad */
.comunidad { display: grid; gap: 3rem; }
@media (min-width: 900px) { .comunidad { grid-template-columns: 5fr 6fr; gap: 5rem; } }
.cita { font-stretch: 105%; font-weight: 600; font-size: clamp(1.4rem, 3vw, 1.9rem); line-height: 1.25; margin-top: 1.5rem; text-wrap: pretty; }
.comunidad .t-bajada { margin-top: 1.5rem; }
.hacemos { display: grid; gap: 1.75rem; }
.hacemos li { display: grid; grid-template-columns: 2rem 1fr; }
.hacemos .tilde { color: var(--magenta); font-weight: 900; font-size: 1.4rem; line-height: 1.2; }
.hacemos h3 { font-stretch: 112%; font-weight: 800; font-size: 1.25rem; line-height: 1.2; }
.hacemos p { color: var(--tenue); margin-top: 0.25rem; }

/* Temas */
.temas { margin-top: 2.5rem; }
.temas li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1.25rem; padding-block: 1.1rem; border-bottom: 1px solid var(--linea); }
.temas li:first-child { border-top: 1px solid var(--linea); }
.temas .tema { font-size: clamp(1.6rem, 4.6vw, 3rem); line-height: 1; }
.temas .ejemplos { color: var(--tenue); }

/* Nosotros: mosaico en columnas, cada foto con su proporción, sin recortes ni huecos. */
.fotos { margin-top: 2.5rem; columns: 2; column-gap: 0.5rem; }
@media (min-width: 720px) { .fotos { columns: 3; } }
@media (min-width: 1100px) { .fotos { columns: 4; } }
.fotos figure { break-inside: avoid; margin-bottom: 0.5rem; background: #151515; }
.fotos img { width: 100%; height: auto; }

/* Aliados */
.aliados { margin-top: 2.5rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
@media (min-width: 640px) { .aliados { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .aliados { grid-template-columns: repeat(6, 1fr); } }
.aliado { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; padding: 1.25rem 1rem; min-height: 9.5rem; box-shadow: inset 0 0 0 1px var(--linea); text-align: center; }
.aliado img { height: 3.75rem; width: auto; max-width: 100%; object-fit: contain; }
.aliado span { font-size: 0.875rem; color: var(--tenue); line-height: 1.25; }
.aliados-pronto .aliado { box-shadow: none; border: 1px dashed rgb(255 255 255 / 0.28); }
.aliados-pronto .aliado img { opacity: 0.55; filter: grayscale(0.4); }
.subtitulo { font-stretch: 112%; font-weight: 800; font-size: 1.25rem; margin-top: 3rem; }

/* Red de Ekogroups: escudos oficiales */
.red { margin-top: 2.75rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(6.25rem, 1fr)); gap: 1.5rem 0.75rem; justify-items: center; align-items: center; }
@media (min-width: 640px) { .red { grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); } }
.escudo-img { width: 6.25rem; }
@media (min-width: 640px) { .escudo-img { width: 7.25rem; } }
.escudo-img img { width: 100%; height: auto; }
.red-pie { margin-top: 2.5rem; }

/* Contacto */
.contacto { margin-top: 2.5rem; display: grid; gap: 0; border-top: 1px solid var(--linea); }
@media (min-width: 900px) { .contacto { grid-template-columns: 1fr 1fr; column-gap: 3rem; } }
.contacto a { display: grid; grid-template-columns: 1.75rem 1fr; gap: 0 0.75rem; align-items: center; padding-block: 1.1rem; border-bottom: 1px solid var(--linea); text-decoration: none; }
.contacto a:hover .valor { color: var(--cian); }
.contacto svg { width: 1.35rem; height: 1.35rem; color: var(--magenta); grid-column: 1; grid-row: 1 / span 2; }
.contacto .quien, .contacto .valor { grid-column: 2; }
.contacto .quien { font-size: 0.9rem; color: var(--tenue); }
.contacto .valor { font-stretch: 108%; font-weight: 700; font-size: clamp(1.05rem, 2.4vw, 1.3rem); overflow-wrap: anywhere; transition: color .15s; }

/* ---------- Pie ---------- */
.pie { border-top: 1px solid var(--linea); padding-block: 3rem 2rem; color: var(--tenue); font-size: 0.9rem; }
.pie .envoltura { display: grid; gap: 1.5rem; }
@media (min-width: 720px) { .pie .envoltura { grid-template-columns: 1fr auto; align-items: start; } }
.pie .marca { color: var(--blanco); }
.pie .pie-nota { margin-top: 0.75rem; max-width: 26rem; }
.pie-enlaces { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; }
@media (min-width: 720px) { .pie-enlaces { flex-direction: column; text-align: right; } }
.pie a { text-decoration: none; }
.pie a:hover { color: var(--blanco); }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .fila-viva span { animation: none; clip-path: none; }
}