/* ============================================================
   RED DE DEFENSA TRABAJADORA — Identidad visual
   Estética: grabado / cartel obrero / fanzine.
   Paleta: negro (firmeza) · rojo (lucha) · crema (raíces) · morado (comunidad)
   Todo en CSS: sin fuentes externas ni imágenes pesadas
   (compatible con internet lento y celular viejo).
   ============================================================ */

/* La fuente display ('RDT Display') se declara desde el layout SOLO si subes
   el archivo a assets/fonts/ (así no hay peticiones 404 si no existe). */

/* ---------- Tokens de color ---------- */
:root {
    --negro:   #1c1a17;   /* tinta, firmeza, organización */
    --rojo:    #9b2226;   /* lucha, defensa, denuncia */
    --rojo-osc:#6f171b;
    --crema:   #f3e9d6;   /* historia, tradición, raíces */
    --crema-2: #e9dcc2;
    --morado:  #6d4c7d;   /* cuidado, comunidad, transformación */
    --morado-osc:#523a5f;

    /* Roles semánticos (tema claro) */
    --bg:        var(--crema);
    --bg-panel:  #fbf5e9;
    --texto:     var(--negro);
    --texto-sua: #524b40;
    --borde:     #d8c9a8;
    --acento:    var(--rojo);
    --acento-2:  var(--morado);
    --sombra:    rgba(28,26,23,.12);

    --radio: 10px;
    --linea: 2px solid var(--negro);
    --ancho: 1080px;

    --serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
    /* Títulos grandes: usa tu fuente display si la subes; si no, la serif. */
    --display: 'RDT Display', Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
    --sans:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

/* ---------- Tema oscuro ---------- */
:root[data-theme="dark"] {
    --bg:        #1b1613;   /* tinta cálida / papel a media luz */
    --bg-panel:  #26201c;
    --texto:     #f1e8d7;
    --texto-sua: #bcac97;
    --borde:     #46392f;
    --crema:     #26201c;
    --crema-2:   #322820;
    --acento:    #d67065;   /* rojo aclarado para contraste */
    --acento-2:  #c19ad2;   /* morado aclarado */
    --sombra:    rgba(0,0,0,.5);
    --linea:     2px solid #f1e8d7;
}

/* ---------- Reset ligero ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--sans);
    font-size: 18px;              /* texto grande por accesibilidad */
    line-height: 1.65;
    color: var(--texto);
    background-color: var(--bg);
    /* Textura de papel muy sutil (grano), como fondo de fanzine */
    background-image:
        radial-gradient(var(--crema-2) 1px, transparent 1px),
        radial-gradient(var(--crema-2) 1px, transparent 1px);
    background-size: 22px 22px, 22px 22px;
    background-position: 0 0, 11px 11px;
    transition: background-color .25s, color .25s;
}
img { max-width: 100%; height: auto; }
a { color: var(--acento); text-underline-offset: 3px; }
a:hover { color: var(--acento-2); }

h1, h2, h3 { font-family: var(--display); line-height: 1.12; letter-spacing: .3px; }

.wrap { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 1.1rem; }

/* Accesibilidad: enlace para saltar al contenido */
.skip-link {
    position: absolute; left: -999px; top: 0;
    background: var(--negro); color: var(--crema);
    padding: .6rem 1rem; z-index: 100;
}
.skip-link:focus { left: .5rem; top: .5rem; }

:focus-visible { outline: 3px solid var(--morado); outline-offset: 2px; }

/* ============================================================
   Barra superior + navegación
   ============================================================ */
.topbar {
    background: var(--negro);
    color: var(--crema);
    border-bottom: 4px solid var(--rojo);
    position: sticky; top: 0; z-index: 50;
}
.topbar__inner {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    min-height: 74px;
}
.brand { display: flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--crema); }
.brand:hover { color: var(--crema); }
.brand__logo { height: 56px; width: auto; max-width: 100%; display: block; }
.brand__badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--crema); border: 2px solid var(--crema);
    box-shadow: 2px 2px 0 rgba(0,0,0,.35); flex-shrink: 0;
}
.brand__badge img { height: 34px; width: auto; }
.brand__name { font-family: var(--serif); font-size: 1.02rem; letter-spacing: .5px; }

.topbar__actions {
    position: absolute; right: 1.1rem; top: 50%; transform: translateY(-50%);
    display: flex; gap: .4rem;
}
.icon-btn {
    background: transparent; border: 2px solid transparent; color: var(--crema);
    font-size: 1.2rem; width: 42px; height: 42px; border-radius: 8px;
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.icon-btn:hover { border-color: var(--crema); }
.icon-btn__moon { display: none; }
:root[data-theme="dark"] .icon-btn__sun  { display: none; }
:root[data-theme="dark"] .icon-btn__moon { display: inline; }
.menu-toggle { display: none; }

.mainnav { background: var(--negro); border-top: 1px solid rgba(255,255,255,.08); }
.mainnav__list {
    display: flex; flex-wrap: wrap; gap: .2rem; justify-content: center;
    list-style: none; margin: 0; padding: .2rem 0;
}
.navitem { position: relative; }
.navitem__link {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .55rem .85rem; margin: 0;
    color: var(--crema); text-decoration: none; font-weight: 600;
    font-family: var(--sans); font-size: 1rem; line-height: 1.2;
    background: transparent; border: 2px solid transparent; border-radius: 6px;
    cursor: pointer;
}
.navitem__link:hover { background: rgba(255,255,255,.08); color: #fff; }
.navitem.is-active > .navitem__link { background: var(--rojo); color: #fff; border-color: var(--crema); }
.navitem__caret { font-size: .7rem; transition: transform .15s ease; }
.navitem.open .navitem__caret { transform: rotate(180deg); }

/* Panel desplegable con descripciones */
.navpanel {
    position: absolute; top: calc(100% + 4px); left: 0; z-index: 60;
    display: none;
    min-width: 300px; max-width: 92vw;
    background: var(--bg-panel); color: var(--texto);
    border: 2px solid var(--negro); border-radius: var(--radio);
    box-shadow: 5px 5px 0 rgba(0,0,0,.35);
    padding: .5rem;
}
.navitem:hover > .navpanel,
.navitem:focus-within > .navpanel,
.navitem.open > .navpanel { display: block; }
.navpanel__all {
    display: block; font-family: var(--serif); font-weight: 700; font-size: .95rem;
    color: var(--acento); text-decoration: none;
    padding: .35rem .6rem; margin-bottom: .3rem;
    border-bottom: 2px dashed var(--borde);
}
.navpanel__all:hover { color: var(--acento-2); }
.navpanel__item { display: block; text-decoration: none; color: var(--texto); padding: .5rem .6rem; border-radius: 8px; }
.navpanel__item:hover, .navpanel__item:focus-visible { background: var(--crema-2); color: var(--texto); }
.navpanel__t { display: block; font-weight: 700; font-family: var(--serif); }
.navpanel__d { display: block; font-size: .85rem; color: var(--texto-sua); line-height: 1.3; }

/* ============================================================
   Contenido / componentes
   ============================================================ */
.page { padding: 2rem 1.1rem 3rem; }

/* Sellos / etiquetas — estilo estampa/banner */
.sello {
    display: inline-block;
    font-family: var(--serif); font-weight: 700; text-transform: uppercase;
    letter-spacing: 1.5px; font-size: .82rem;
    color: var(--rojo);
    background: var(--crema-2);
    border: 2px solid var(--negro);
    padding: .3rem 1rem; border-radius: 4px;
    box-shadow: 2px 2px 0 var(--sombra),
                inset 0 0 0 2px var(--crema-2),
                inset 0 0 0 3px rgba(155,34,38,.35);
    transform: rotate(-1.5deg);
}
:root[data-theme="dark"] .sello { color: var(--acento); }

/* Héroe de la portada */
.hero {
    text-align: center;
    padding: 2.5rem 1rem 1.5rem;
    border: var(--linea);
    border-radius: var(--radio);
    background:
        repeating-linear-gradient(45deg,
            transparent, transparent 12px,
            rgba(155,34,38,.04) 12px, rgba(155,34,38,.04) 24px),
        var(--bg-panel);
    box-shadow: 6px 6px 0 var(--sombra),
                inset 0 0 0 3px var(--bg-panel),
                inset 0 0 0 4px rgba(28,26,23,.22);
    position: relative;
}
.hero__emblema { margin-bottom: .5rem; }
.hero__emblema img { display: block; margin: 0 auto; }
.hero__emblema > img { max-height: 220px; width: auto; }        /* PNG seal */
.hero__badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 132px; height: 132px; border-radius: 50%;
    background: var(--crema-2); border: 3px solid var(--negro);
    box-shadow: 5px 5px 0 var(--sombra);
}
.hero__badge img { height: 104px; width: auto; }
.hero__lema {
    display: flex; align-items: center; justify-content: center; gap: .85rem;
    font-family: var(--serif); font-weight: 700; text-transform: uppercase;
    letter-spacing: 2px; font-size: .95rem; color: var(--acento);
    margin-top: 1.25rem;
}
.hero__lema::before, .hero__lema::after {
    content: ""; display: block; height: 2px; width: clamp(20px, 8vw, 48px);
    background: var(--rojo); opacity: .55;
}
.hero h1 { font-size: clamp(2rem, 5vw, 3.1rem); margin: .6rem 0 .3rem; }
.hero .lema { font-size: 1.25rem; color: var(--texto-sua); margin: 0 auto; max-width: 40ch; }
.hero .pregunta {
    font-family: var(--serif); font-style: italic;
    font-size: clamp(1.3rem, 3.5vw, 1.9rem);
    color: var(--acento-2); margin-top: 1rem;
}

/* Rejilla de "¿Qué necesitas?" — botones grandes */
.necesidades {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    margin: 1.75rem 0;
}
.nec-card {
    display: flex; flex-direction: column; gap: .35rem;
    text-decoration: none; color: var(--texto);
    background: var(--bg-panel);
    border: var(--linea); border-radius: var(--radio);
    padding: 1.25rem 1.1rem;
    box-shadow: 4px 4px 0 var(--sombra);
    transition: transform .12s ease, box-shadow .12s ease;
}
.nec-card:hover, .nec-card:focus-visible {
    transform: translate(-2px,-2px);
    box-shadow: 7px 7px 0 var(--sombra);
    color: var(--texto);
}
.nec-card__ico {
    font-family: var(--serif); font-size: 1.5rem; line-height: 1;
    width: 52px; height: 52px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--crema-2); color: var(--negro); border: 2px solid var(--negro);
    transform: rotate(-4deg);
    box-shadow: inset 0 0 0 2px var(--crema-2), inset 0 0 0 3px rgba(28,26,23,.25);
}
:root[data-theme="dark"] .nec-card__ico { background: var(--crema-2); color: var(--texto); }
.nec-card__cta {
    margin-top: auto; padding-top: .6rem;
    font-family: var(--display); text-transform: uppercase;
    font-size: .74rem; letter-spacing: 1.5px; color: var(--acento);
}
.nec-card:hover .nec-card__cta { color: var(--acento-2); }

/* Título "¿Qué necesitas?" como estandarte */
.necesidades-titulo {
    display: flex; align-items: center; justify-content: center; gap: .85rem;
    text-align: center; text-transform: uppercase; letter-spacing: 1px;
    margin: 2.25rem 0 1.25rem; font-size: clamp(1.4rem, 3.5vw, 2.1rem);
}
.necesidades-titulo::before, .necesidades-titulo::after {
    content: ""; height: 3px; width: clamp(24px, 10vw, 70px); background: var(--rojo); opacity: .55;
}

/* Banda de urgencia (cierre de la portada) */
.banda-urgente {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .3rem .7rem;
    background: var(--rojo); color: #fff; text-decoration: none; text-align: center;
    border: 3px solid var(--negro); border-radius: var(--radio);
    padding: 1.1rem 1.4rem; margin: 1.75rem 0 .5rem;
    box-shadow: 5px 5px 0 rgba(28,26,23,.45);
    font-family: var(--display); transition: transform .12s ease, box-shadow .12s ease;
}
.banda-urgente:hover { color: #fff; transform: translate(-2px,-2px); box-shadow: 7px 7px 0 rgba(28,26,23,.45); }
.banda-urgente strong { text-transform: uppercase; letter-spacing: 1px; }
.banda-urgente span { opacity: .92; }
.nec-card__t { font-family: var(--display); font-size: 1.2rem; font-weight: 700; letter-spacing: .5px; }
.nec-card__d { color: var(--texto-sua); font-size: .95rem; margin: 0; }

/* Tarjetas de sección genéricas */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem; margin: 1.5rem 0;
}
.card {
    background: var(--bg-panel);
    border: 2px solid var(--borde); border-radius: var(--radio);
    padding: 1.25rem; box-shadow: 4px 4px 0 var(--sombra);
    transition: transform .12s ease, box-shadow .12s ease;
}
a.card { display: block; text-decoration: none; color: var(--texto); }
a.card:hover, a.card:focus-visible {
    transform: translate(-2px,-2px); box-shadow: 7px 7px 0 var(--sombra); color: var(--texto);
    border-color: var(--acento-2);
}
.card h3 { margin: 0 0 .4rem; color: var(--acento); font-family: var(--display); }
.card p { margin: 0; color: var(--texto-sua); }
.card ul { margin: .5rem 0 0; padding-left: 1.2rem; color: var(--texto-sua); }

/* Encabezado de sección */
.section-head { margin-bottom: 1rem; }
.section-head h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: .4rem 0 .3rem; text-transform: uppercase; letter-spacing: 1px; }
.section-head h1::after {
    content: ""; display: block; width: 64px; height: 4px; margin-top: .55rem;
    background: var(--rojo); border-radius: 2px;
    box-shadow: 10px 0 0 -1px var(--morado);   /* segundo trazo morado */
}
.section-head p { color: var(--texto-sua); max-width: 60ch; margin: 0; }

/* Sub-navegación de sección */
.subnav {
    display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.25rem 0;
    border-bottom: 2px dashed var(--borde); padding-bottom: .9rem;
}
.subnav a {
    text-decoration: none; font-weight: 600;
    padding: .4rem .8rem; border: 2px solid var(--borde); border-radius: 999px;
    color: var(--texto); background: var(--bg-panel);
}
.subnav a:hover { border-color: var(--acento); color: var(--acento); }
.subnav a.is-active {
    background: var(--morado); color: #fff; border-color: var(--negro);
    box-shadow: 2px 2px 0 var(--sombra);
}

/* Aviso de emergencia (recursos urgentes) */
.nota--urgente {
    border-left-color: var(--rojo);
    background: rgba(155,34,38,.08);
}
:root[data-theme="dark"] .nota--urgente { background: rgba(214,112,101,.12); }

/* Aviso "en construcción" honesto */
.nota {
    border-left: 5px solid var(--morado);
    background: var(--crema-2);
    padding: .9rem 1.1rem; border-radius: 8px; margin: 1.25rem 0;
    color: var(--texto);
}

/* Botones */
.btn {
    display: inline-block; text-decoration: none; cursor: pointer;
    font-family: var(--display); font-weight: 700; font-size: 1.02rem;
    text-transform: uppercase; letter-spacing: 1px;
    background: var(--rojo); color: #fff;
    border: 2px solid var(--negro); border-radius: 8px;
    padding: .8rem 1.6rem;
    box-shadow: 4px 4px 0 rgba(28,26,23,.42), inset 0 2px 0 rgba(255,255,255,.18), inset 0 -2px 0 rgba(0,0,0,.2);
}
.btn:hover { background: var(--rojo-osc); color: #fff; transform: translate(-1px,-1px); box-shadow: 5px 5px 0 rgba(28,26,23,.42), inset 0 2px 0 rgba(255,255,255,.18), inset 0 -2px 0 rgba(0,0,0,.2); }
.btn:active { transform: translate(3px,3px); box-shadow: 1px 1px 0 rgba(28,26,23,.42); }
.btn--morado { background: var(--morado); }
.btn--morado:hover { background: var(--morado-osc); }

/* ============================================================
   Formularios y calculadoras
   ============================================================ */
.calc-form {
    background: var(--bg-panel);
    border: var(--linea); border-radius: var(--radio);
    padding: 1.25rem 1.25rem 1.5rem;
    box-shadow: 4px 4px 0 var(--sombra);
    max-width: 520px; margin: 1.25rem 0;
}
.calc-form label {
    display: block; font-weight: 600; margin: .9rem 0 .3rem;
    font-family: var(--serif);
}
.calc-form input {
    width: 100%; font-size: 1.05rem; padding: .6rem .7rem;
    border: 2px solid var(--borde); border-radius: 8px;
    background: var(--bg); color: var(--texto);
}
.calc-form input:focus, .calc-form select:focus { border-color: var(--morado); }
.calc-form select {
    width: 100%; font-size: 1.05rem; padding: .6rem .7rem;
    border: 2px solid var(--borde); border-radius: 8px;
    background: var(--bg); color: var(--texto);
}
.campo-doble { display: flex; gap: .5rem; }
.campo-doble input { flex: 2 1 0; }
.campo-doble select { flex: 1 1 0; min-width: 0; }
.calc-form label.check {
    display: flex; align-items: flex-start; gap: .5rem;
    font-family: var(--sans); font-weight: 500; cursor: pointer;
    margin-top: 1rem; line-height: 1.4;
}
.calc-form label.check input { width: auto; margin-top: .25rem; }

.alert { padding: .8rem 1rem; border-radius: 8px; margin: 1rem 0; font-weight: 600; }
.alert-error { background: #fdecea; color: #8a1c1c; border: 2px solid #e0a3a3; }
:root[data-theme="dark"] .alert-error { background: #3a1f1f; color: #f0b3b3; border-color: #6b2e2e; }

.resultado {
    margin: 1.5rem 0;
    border: var(--linea); border-radius: var(--radio);
    background: var(--crema-2);
    box-shadow: 4px 4px 0 var(--sombra);
    overflow: hidden;
}
.resultado h3 {
    margin: 0; padding: .8rem 1.1rem; color: #fff;
    background: var(--morado); font-family: var(--serif);
}
.tabla-resultado { width: 100%; border-collapse: collapse; }
.tabla-resultado td {
    padding: .65rem 1.1rem; border-bottom: 1px solid var(--borde);
    vertical-align: top;
}
.tabla-resultado td:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabla-resultado tr:last-child td { border-bottom: 0; }
.resultado__total td {
    font-family: var(--display); font-weight: 700; font-size: 1.2rem;
    background: rgba(155,34,38,.08); color: var(--acento);
    border-top: 2px solid var(--negro);
}
.tabla-nota { font-size: .85rem; color: var(--texto-sua); text-align: left !important; white-space: normal !important; }

/* ============================================================
   Documento generado (formatos)
   ============================================================ */
.calc-form textarea {
    width: 100%; font-size: 1.02rem; padding: .6rem .7rem; font-family: var(--sans);
    border: 2px solid var(--borde); border-radius: 8px;
    background: var(--bg); color: var(--texto); resize: vertical;
}
.calc-form textarea:focus { border-color: var(--morado); }

.doc-acciones { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.25rem 0 .5rem; }

.documento {
    background: #fffdf8;
    color: #1c1a17;
    border: 1px solid #d8c9a8;
    border-radius: 6px;
    box-shadow: 0 3px 14px rgba(0,0,0,.12);
    padding: 3rem 2.6rem;
    max-width: 720px;
    margin: 1rem 0;
    font-family: var(--serif);
    font-size: 1.08rem;
    line-height: 1.85;
    text-align: justify;
}
.documento p { margin: 0 0 1.1rem; }
.doc-derecha  { text-align: right !important; }
.doc-dest     { font-weight: 700; white-space: pre-line; text-align: left !important; }
.doc-titulo2  { text-align: center !important; font-weight: 700; letter-spacing: 1px; }
.doc-cierre   { margin-top: 2rem !important; margin-bottom: .5rem !important; text-align: left !important; }
.doc-firma    { text-align: center; white-space: pre-line; margin-top: 2.5rem !important; }
.doc-recibido { margin-top: 2.5rem !important; font-size: .95rem; white-space: pre-line; color: #524b40; text-align: left !important; }

/* En modo oscuro el documento sigue siendo "papel" para que se lea igual al imprimir */
:root[data-theme="dark"] .documento { background: #fffdf8; color: #1c1a17; }

/* ---- Impresión: solo el documento ---- */
@media print {
    body { background: #fff !important; }
    .topbar, .footer, .skip-link, .no-print, .section-head, .subnav { display: none !important; }
    .documento {
        box-shadow: none; border: 0; max-width: 100%;
        padding: 0; margin: 0;
    }
    .page { padding: 0; }
}

/* ============================================================
   Checklists
   ============================================================ */
.check-barra {
    height: 12px; background: var(--crema-2);
    border: 2px solid var(--negro); border-radius: 999px;
    overflow: hidden; margin: 1.25rem 0 .4rem; max-width: 640px;
}
.check-barra__fill {
    height: 100%; width: 0; background: var(--morado);
    transition: width .3s ease;
}
.check-estado { font-family: var(--serif); font-weight: 700; color: var(--acento-2); margin: 0 0 1rem; }

.checklist { list-style: none; margin: 1rem 0; padding: 0; max-width: 720px; }
.check-item {
    background: var(--bg-panel);
    border: 2px solid var(--borde); border-radius: var(--radio);
    margin-bottom: .6rem;
}
.check-item label {
    display: flex; gap: .7rem; align-items: flex-start;
    padding: .85rem 1rem; cursor: pointer;
}
.check-item input {
    width: 22px; height: 22px; margin-top: .15rem; flex-shrink: 0;
    accent-color: var(--morado); cursor: pointer;
}
.check-item__texto { line-height: 1.5; }
.check-item input:checked + .check-item__texto {
    color: var(--texto-sua); text-decoration: line-through;
}
.check-item input:checked + .check-item__texto .check-item__link { text-decoration: none; }
.check-item__link {
    display: inline-block; margin-top: .3rem; font-weight: 600; font-size: .95rem;
}

@media print {
    .check-item input { -webkit-appearance: checkbox; appearance: checkbox; }
    .check-item { break-inside: avoid; }
}

/* Bloque "Para saber más" */
.recursos {
    max-width: 720px; margin: 1.5rem 0;
    border: 2px solid var(--borde); border-left: 5px solid var(--acento-2);
    border-radius: var(--radio); background: var(--bg-panel);
    padding: 1.1rem 1.25rem;
}
.recursos h3 { margin: 0 0 .6rem; color: var(--acento-2); }
.recurso-guia { margin: 0 0 .9rem; }
.badge-prox {
    display: inline-block; font-size: .72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .5px;
    background: var(--morado); color: #fff;
    padding: .1rem .5rem; border-radius: 999px; margin-right: .4rem;
    vertical-align: middle;
}
.recurso-titulo { margin: .5rem 0 .3rem; font-weight: 600; }
.recurso-nota { font-weight: 400; color: var(--texto-sua); font-size: .9rem; }
.recurso-lista { margin: 0; padding-left: 1.2rem; }
.recurso-lista li { margin-bottom: .3rem; }

/* ============================================================
   Triaje (Necesito ayuda) — tarjetas póster
   ============================================================ */
.triaje {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.1rem; margin: 1.5rem 0;
}
.triaje-card {
    display: flex; flex-direction: column;
    text-decoration: none; color: #fff;
    border: 3px solid var(--negro); border-radius: var(--radio);
    padding: 1.5rem 1.35rem; min-height: 190px;
    box-shadow: 6px 6px 0 rgba(28,26,23,.5);
    transition: transform .12s ease, box-shadow .12s ease;
}
.triaje-card:hover, .triaje-card:focus-visible {
    transform: translate(-3px,-3px); box-shadow: 9px 9px 0 rgba(28,26,23,.5); color: #fff;
}
.triaje-card--rojo   { background: #9b2226; }
.triaje-card--negro  { background: #1c1a17; }
.triaje-card--morado { background: #6d4c7d; }
.triaje-card__t {
    font-family: var(--display); text-transform: uppercase;
    font-size: 1.5rem; line-height: 1.05; letter-spacing: .5px; margin: 0 0 .5rem;
}
.triaje-card__d { font-size: .98rem; line-height: 1.4; opacity: .95; }
.triaje-card__cta {
    margin-top: auto; padding-top: .9rem; font-weight: 700; text-transform: uppercase;
    font-size: .78rem; letter-spacing: 1px;
}
.triaje-mas { margin: 0 0 1.5rem; color: var(--texto-sua); }

.linea-directa {
    text-align: center; margin: 1.75rem 0;
    border: 3px solid var(--negro); border-radius: var(--radio);
    background: var(--bg-panel); padding: clamp(1.5rem, 4vw, 2.5rem);
    box-shadow: 6px 6px 0 var(--sombra);
}
.linea-directa h2 { color: var(--acento); margin-top: 0; }
.linea-directa__num {
    font-family: var(--display); font-size: clamp(1.8rem, 6vw, 3rem);
    color: var(--acento-2); letter-spacing: 2px; margin: .4rem 0 1.1rem;
}
.linea-directa__botones { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; }

/* ============================================================
   Guías y asesoría
   ============================================================ */
.alert-ok { background: #d8f5e0; color: #14663a; border: 2px solid #9ad9b2; }
:root[data-theme="dark"] .alert-ok { background: #17352a; color: #a7e8c4; border-color: #2e6b4e; }

.guia { max-width: 760px; }
.guia h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: .6rem 0; }
.guia-intro { font-size: 1.15rem; color: var(--texto-sua); }
.guia-sec { margin: 1.6rem 0; }
.guia-sec h2 {
    font-size: 1.3rem; color: var(--acento);
    border-bottom: 2px dashed var(--borde); padding-bottom: .3rem;
}
.guia-sec ul { padding-left: 1.2rem; }
.guia-sec li { margin-bottom: .4rem; }

.guia-herr { margin: 1.8rem 0; }
.guia-botones { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .5rem; }

.contacto-directo { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin: 1rem 0; }
.contacto-bloque {
    background: var(--bg-panel); border: var(--linea); border-radius: var(--radio);
    padding: 1.1rem 1.25rem; box-shadow: 4px 4px 0 var(--sombra);
}
.contacto-bloque h3 { margin-top: 0; color: var(--acento-2); }

/* Campo trampa anti-bots: oculto para personas, visible para bots */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ============================================================
   Panel interno
   ============================================================ */
.panel-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.panel-hola { margin: .2rem 0 0; color: var(--texto-sua); }
.panel-logout { margin: 0; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin: 1.25rem 0; }
.stat {
    background: var(--bg-panel); border: var(--linea); border-radius: var(--radio);
    padding: 1.2rem 1rem; text-align: center; box-shadow: 4px 4px 0 var(--sombra);
}
.stat--alerta { border-color: var(--rojo); }
.stat-num { display: block; font-family: var(--serif); font-size: 2.4rem; font-weight: 700; color: var(--acento-2); line-height: 1; }
.stat--alerta .stat-num { color: var(--acento); }
.stat-lbl { display: block; margin-top: .4rem; color: var(--texto-sua); font-size: .95rem; }

.muted { color: var(--texto-sua); font-size: .9rem; }
.tabla-scroll { overflow-x: auto; }
.tabla-panel { width: 100%; border-collapse: collapse; min-width: 640px; }
.tabla-panel th, .tabla-panel td { padding: .6rem .7rem; border-bottom: 1px solid var(--borde); text-align: left; vertical-align: top; }
.tabla-panel th { font-family: var(--serif); color: var(--acento); }
.celda-mensaje { max-width: 320px; }
.form-estado { margin: .4rem 0 0; }
.form-estado select { padding: .3rem .4rem; border: 2px solid var(--borde); border-radius: 6px; background: var(--bg); color: var(--texto); }

.badge { display: inline-block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; padding: .12rem .5rem; border-radius: 999px; color: #fff; }
.badge-nueva, .badge-propuesta { background: var(--rojo); }
.badge-en_proceso, .badge-en_desarrollo { background: #b8860b; }
.badge-atendida, .badge-lista { background: #2e7d4f; }
.badge-descartada { background: #777; }

.ideas { list-style: none; margin: 1.25rem 0; padding: 0; }
.idea { display: flex; gap: .9rem; background: var(--bg-panel); border: 2px solid var(--borde); border-radius: var(--radio); padding: 1rem; margin-bottom: .7rem; }
.idea-votos { display: flex; flex-direction: column; align-items: center; min-width: 48px; }
.voto-btn { font-size: 1.1rem; line-height: 1; cursor: pointer; border: 2px solid var(--negro); background: var(--crema); color: var(--negro); border-radius: 8px; padding: .2rem .5rem; }
.voto-btn--on, .voto-btn:disabled { background: var(--morado); color: #fff; cursor: default; }
.voto-num { font-family: var(--serif); font-weight: 700; font-size: 1.2rem; margin-top: .2rem; }
.idea-cuerpo h4 { margin: 0 0 .3rem; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.idea-cuerpo p { margin: 0 0 .4rem; }

/* ============================================================
   Observatorio ("Cuéntanos cómo trabajas")
   ============================================================ */
.obs-form { max-width: 640px; }
.obs-pregunta {
    border: 2px solid var(--borde); border-radius: var(--radio);
    background: var(--bg-panel); padding: 1rem 1.1rem; margin: 0 0 1rem;
}
.obs-pregunta legend { font-family: var(--serif); font-weight: 700; padding: 0 .4rem; color: var(--acento); }
.obs-pregunta select {
    width: 100%; font-size: 1.05rem; padding: .55rem .6rem;
    border: 2px solid var(--borde); border-radius: 8px; background: var(--bg); color: var(--texto);
}
.obs-opciones { display: flex; flex-wrap: wrap; gap: .5rem; }
.obs-op {
    display: inline-flex; align-items: center; gap: .4rem;
    border: 2px solid var(--borde); border-radius: 999px;
    padding: .4rem .9rem; cursor: pointer; background: var(--bg);
}
.obs-op:hover { border-color: var(--morado); }
.obs-op input { accent-color: var(--morado); }
.obs-op:has(input:checked) { background: var(--morado); color: #fff; border-color: var(--negro); }

/* Resultados */
.obs-res { max-width: 680px; }
.obs-total {
    font-family: var(--serif); font-size: 1.1rem;
    background: var(--crema-2); border-radius: 8px; padding: .6rem .9rem;
}
.obs-bloque { margin: 1.2rem 0; }
.obs-bloque h4 { margin: 0 0 .5rem; color: var(--acento-2); }
.obs-fila { display: flex; align-items: center; gap: .6rem; margin-bottom: .35rem; }
.obs-etq { flex: 0 0 40%; font-size: .95rem; }
.obs-barra { flex: 1; height: 16px; background: var(--crema-2); border: 1px solid var(--borde); border-radius: 999px; overflow: hidden; }
.obs-barra__fill { display: block; height: 100%; background: var(--morado); }
.obs-pct { flex: 0 0 3ch; text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }

@media (max-width: 520px) {
    .obs-etq { flex-basis: 100%; }
    .obs-fila { flex-wrap: wrap; }
}

/* ============================================================
   Nosotrxs — manifiesto
   ============================================================ */
/* Manifiesto — panel oscuro tipo cartel impreso */
.manifiesto {
    background: #16130f;
    color: var(--crema);
    border: 3px solid var(--negro);
    border-radius: var(--radio);
    box-shadow: 8px 8px 0 rgba(155,34,38,.55);
    padding: clamp(1.5rem, 5vw, 3rem);
    margin: 1.5rem 0 2rem;
    /* textura de papel oscuro muy sutil */
    background-image:
        radial-gradient(rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 20px 20px;
}
.manifiesto__sello {
    display: inline-block; font-family: var(--display); text-transform: uppercase;
    letter-spacing: 2px; font-size: .8rem; color: var(--crema);
    border: 2px solid var(--crema); border-radius: 4px; padding: .2rem .7rem;
}
.manifiesto__titulo {
    font-size: clamp(2.6rem, 9vw, 5rem); line-height: .95; margin: .6rem 0 .4rem;
    color: var(--rojo); text-transform: uppercase; letter-spacing: 1px;
    text-shadow: 2px 2px 0 rgba(0,0,0,.5);
}
:root[data-theme="dark"] .manifiesto__titulo { color: #d67065; }
.manifiesto__divisor { border-top: 2px dashed rgba(243,233,214,.5); margin: 0 0 1.5rem; }
.manifiesto__cuerpo { font-size: 1.08rem; line-height: 1.7; }
@media (min-width: 720px) {
    .manifiesto__cuerpo { column-count: 2; column-gap: 2.5rem; }
}
.manifiesto__cuerpo p { margin: 0 0 1rem; }
.manifiesto__cuerpo > p:first-child::first-letter {
    font-family: var(--display); font-size: 3.6rem; line-height: .8;
    float: left; margin: .1rem .5rem 0 0; color: var(--morado);
}
:root[data-theme="dark"] .manifiesto__cuerpo > p:first-child::first-letter { color: #c19ad2; }
.manifiesto__lema {
    font-family: var(--display); font-weight: 700; text-transform: uppercase;
    letter-spacing: 2px; font-size: clamp(1.1rem, 3vw, 1.5rem);
    color: var(--crema); margin: 1.75rem 0 0; padding-top: 1.2rem;
    border-top: 2px dashed rgba(243,233,214,.5); text-align: center;
}

.principios { margin: 2rem 0; }
.principios-lista { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .6rem; }
.sello--principio { transform: rotate(0); border-color: var(--morado); color: var(--morado); font-size: .9rem; }

.redes-sociales { margin: 2rem 0; }
.redes-botones { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .6rem; }

/* ============================================================
   Banco de Tiempo
   ============================================================ */
.bt-auth { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.bt-auth .calc-form { margin: 0; }
.bt-auth h3 { margin-top: 0; color: var(--acento-2); }

.bt-saldo {
    text-align: center; background: #16130f; color: var(--crema);
    border: 3px solid var(--negro); border-radius: var(--radio);
    padding: 2rem 1.5rem; margin: 1.25rem 0;
    box-shadow: 7px 7px 0 rgba(155,34,38,.5);
}
.bt-saldo__num {
    display: block; font-family: var(--display); font-weight: 700;
    font-size: clamp(3rem, 12vw, 5rem); line-height: .9; color: var(--crema);
    text-shadow: 2px 2px 0 rgba(0,0,0,.5);
}
.bt-saldo__lbl {
    display: block; margin-top: .5rem; font-family: var(--display);
    text-transform: uppercase; letter-spacing: 2px; font-size: .9rem; color: #d67065;
}

.bt-habs, .bt-tx { list-style: none; padding: 0; margin: .5rem 0 1.25rem; }
.bt-habs li, .bt-tx__item {
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    padding: .6rem .8rem; border: 2px solid var(--borde); border-radius: 8px;
    background: var(--bg-panel); margin-bottom: .5rem;
}
.bt-del { margin: 0 0 0 auto; }
.link-btn { background: none; border: 0; color: var(--acento); cursor: pointer; font-weight: 700; font-size: 1rem; padding: .2rem .4rem; }
.link-btn:hover { text-decoration: underline; }

/* ============================================================
   Mapa esquemático + agenda
   ============================================================ */
.mapa-puntos { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.25rem 0 1.75rem; }
.mapa-punto {
    display: flex; align-items: center; gap: .5rem; text-decoration: none;
    border: 2px solid var(--borde); border-radius: 999px; padding: .5rem .9rem;
    background: var(--bg-panel); color: var(--texto);
}
.mapa-punto__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--borde); border: 2px solid var(--negro); flex-shrink: 0; }
.mapa-punto.tiene .mapa-punto__dot { background: var(--rojo); }
.mapa-punto.is-active { background: var(--morado); color: #fff; border-color: var(--negro); }
.mapa-punto__n { background: var(--rojo); color: #fff; border-radius: 999px; font-size: .8rem; font-weight: 700; padding: 0 .45rem; }
.mapa-punto.is-active .mapa-punto__n { background: #fff; color: var(--morado); }

.agenda { display: flex; flex-direction: column; gap: .8rem; margin: 1rem 0; }
.agenda-item { display: flex; gap: 1rem; background: var(--bg-panel); border: 2px solid var(--borde); border-radius: var(--radio); padding: 1rem; }
.agenda-fecha {
    flex: 0 0 64px; text-align: center; align-self: flex-start;
    background: var(--negro); color: var(--crema); border-radius: 8px; padding: .5rem 0;
}
.agenda-dia { display: block; font-family: var(--serif); font-size: 1.6rem; font-weight: 700; line-height: 1; }
.agenda-mes { display: block; text-transform: uppercase; font-size: .8rem; letter-spacing: 1px; }
.agenda-cuerpo h3 { margin: 0 0 .3rem; }

/* Cine Club — carteles tipo póster */
.peliculas { display: flex; flex-direction: column; gap: 1.5rem; margin: 1.25rem 0; }
.pelicula {
    display: grid; grid-template-columns: 220px 1fr;
    background: #16130f; color: var(--crema);
    border: 3px solid var(--negro); border-radius: var(--radio);
    box-shadow: 7px 7px 0 rgba(28,26,23,.45);
    overflow: hidden;
}
.pelicula__cartel {
    background: var(--rojo); display: flex; align-items: center; justify-content: center;
    text-align: center; padding: 1rem; min-height: 300px;
}
.pelicula__cartel img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; }
.pelicula__cartel span { font-family: var(--display); color: var(--crema); opacity: .9; line-height: 1.5; }
.pelicula__info { padding: 1.6rem; display: flex; flex-direction: column; }
.pelicula__cuando {
    color: var(--acento); text-transform: uppercase; letter-spacing: 1px;
    font-size: .82rem; font-weight: 700; margin: 0 0 .4rem;
}
:root[data-theme="dark"] .pelicula__cuando { color: #d67065; }
.pelicula__titulo {
    font-size: clamp(1.7rem, 4.5vw, 2.6rem); text-transform: uppercase;
    color: var(--crema); margin: 0 0 .7rem; line-height: 1;
    text-shadow: 2px 2px 0 rgba(0,0,0,.5);
}
.pelicula__info p { line-height: 1.55; margin: 0 0 .6rem; }
.pelicula__info .btn { align-self: flex-start; margin-top: auto; }
.card__cartel { width: 100%; height: 160px; object-fit: cover; border-radius: 8px; margin-bottom: .6rem; border: 2px solid var(--borde); }

@media (max-width: 620px) {
    .pelicula { grid-template-columns: 1fr; }
    .pelicula__cartel { min-height: 200px; }
    .pelicula__cartel img { min-height: 200px; }
}

/* ============================================================
   Biblioteca y Escuelita
   ============================================================ */
.biblio-tema, .escuela-mod { margin: 1.75rem 0; }
.biblio-tema h2, .escuela-mod h2 {
    font-size: 1.3rem; color: var(--acento-2);
    text-transform: uppercase; letter-spacing: .5px;
    border-left: 5px solid var(--rojo); padding: .05rem 0 .05rem .65rem;
}
/* Etiqueta de tipo en tarjetas (PDF / Enlace, etc.) */
.card__tag {
    display: inline-block; font-family: var(--display); text-transform: uppercase;
    font-size: .66rem; letter-spacing: 1px; padding: .12rem .5rem; border-radius: 4px;
    background: var(--morado); color: #fff; margin-bottom: .45rem;
    border: 1.5px solid var(--negro);
}
.card__tag--pdf { background: var(--rojo); }
/* Párrafo introductorio de las secciones */
.lead { font-size: 1.15rem; color: var(--texto-sua); max-width: 62ch; line-height: 1.6; }
.calc-form input[type="file"] {
    width: 100%; padding: .5rem; border: 2px dashed var(--borde);
    border-radius: 8px; background: var(--bg); color: var(--texto);
}

/* ============================================================
   Pie de página
   ============================================================ */
.footer {
    background: var(--negro); color: var(--crema);
    border-top: 4px solid var(--morado); margin-top: 2rem;
}
.footer__inner {
    display: flex; flex-wrap: wrap; gap: 1rem;
    justify-content: space-between; align-items: center;
    padding: 1.6rem 1.1rem;
}
.footer__marca { display: flex; align-items: center; gap: .75rem; }
.footer__emblema {
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
    background: var(--crema); border: 2px solid var(--crema);
}
.footer__emblema img { height: 40px; width: auto; }
.footer strong { font-family: var(--serif); font-size: 1.15rem; }
.footer__lema { margin: .2rem 0 0; color: #cbb; font-style: italic; }
.footer__legal { margin: 0; color: #b7ab99; font-size: .9rem; }

/* ============================================================
   Responsive — celular
   ============================================================ */
@media (max-width: 760px) {
    .menu-toggle { display: inline-flex; }
    .brand__logo { height: 40px; max-width: 58vw; }
    .mainnav { display: none; }
    .mainnav.is-open { display: block; }
    .mainnav__list { flex-direction: column; justify-content: flex-start; }
    .navitem { position: static; }
    .navitem__link { width: 100%; justify-content: space-between; }
    /* En móvil solo abre con el toque (clase .open); nada de hover/focus */
    .navitem:hover > .navpanel,
    .navitem:focus-within > .navpanel { display: none; }
    .navitem.open > .navpanel { display: block; }
    .navpanel {
        position: static; min-width: 0; max-width: none;
        border: 0; border-radius: 0; box-shadow: none;
        background: rgba(255,255,255,.05); margin: 0 0 .3rem;
        padding: .3rem .3rem .5rem 1rem;
    }
    .navpanel__all { color: var(--crema); border-color: rgba(255,255,255,.2); }
    .navpanel__item { color: var(--crema); }
    .navpanel__item:hover, .navpanel__item:focus-visible { background: rgba(255,255,255,.08); color: #fff; }
    .navpanel__d { color: #cdbfa6; }
    .brand__name { display: none; }
}

/* Respeta a quien prefiere menos movimiento */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; scroll-behavior: auto !important; }
}

/* ============================================================
   Tipografía display — títulos con aire de cartel/imprenta
   ============================================================ */
.hero h1,
.section-head h1,
.manifiesto-lead {
    font-family: var(--display);
    letter-spacing: .5px;
    text-shadow: 1.5px 1.5px 0 rgba(28,26,23,.12);
}
:root[data-theme="dark"] .hero h1,
:root[data-theme="dark"] .section-head h1,
:root[data-theme="dark"] .manifiesto-lead {
    text-shadow: 1.5px 1.5px 0 rgba(0,0,0,.45);
}
.brand__name, .sello, .hero__lema,
.stat-num, .bt-saldo__num, .footer strong,
.manifiesto-lema {
    font-family: var(--display);
}