/* ==========================================================================
   No Estamos Solos — tokens de diseño (compartidos por el sitio y el panel)
   Colores medidos del logo. Los tonos "profundos" son versiones más oscuras
   del mismo matiz: se usan para texto, enlaces y botones (contraste AA sobre
   blanco). El amarillo y el verde claro del logo NO se usan como color de texto.
   ========================================================================== */
:root {
    /* Colores del logo (superficies, piezas, decoración) */
    --logo-rojo: #B40A22;
    --logo-azul: #0097D2;
    --logo-verde: #96B81A;
    --logo-amarillo: #F8E800;

    /* Tonos profundos para texto, enlaces y botones */
    --rojo-profundo: #A00A1E;
    --azul-profundo: #08628A;
    --verde-profundo: #4A6410;
    --ocre-profundo: #6B5C00;

    /* Tintes suaves para superficies grandes (calma visual) */
    --rojo-tinte: #FCEEF0;
    --azul-tinte: #E8F5FB;
    --verde-tinte: #F2F7E0;
    --amarillo-tinte: #FFFAC9;

    /* Neutros */
    --tinta: #1C2A33;
    --tinta-suave: #44525B;
    --linea: #D3DADE;
    --fondo: #FFFFFF;
    --superficie: #F5F7F8;

    /* Tipografía: sistema, sin fuentes externas (rápido y privado) */
    --fuente-texto: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --fuente-marca: "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", Georgia, serif;

    --radio: 14px;
    --radio-chico: 8px;
    --foco: #08628A;
}

/* Cada pieza del logo es un "acento": se aplica con la clase .acento-roja, etc. */
.acento-roja { --acento: var(--logo-rojo); --acento-fuerte: var(--rojo-profundo); --acento-tinte: var(--rojo-tinte); --acento-simbolo: #FFFFFF; }
.acento-azul { --acento: var(--logo-azul); --acento-fuerte: var(--azul-profundo); --acento-tinte: var(--azul-tinte); --acento-simbolo: #FFFFFF; }
.acento-verde { --acento: var(--logo-verde); --acento-fuerte: var(--verde-profundo); --acento-tinte: var(--verde-tinte); --acento-simbolo: var(--tinta); }
.acento-amarilla { --acento: var(--logo-amarillo); --acento-fuerte: var(--ocre-profundo); --acento-tinte: var(--amarillo-tinte); --acento-simbolo: var(--tinta); }

/* Foco siempre visible, en todos los elementos interactivos */
:focus-visible {
    outline: 3px solid var(--foco);
    outline-offset: 3px;
    border-radius: 4px;
}

.solo-lectores {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.saltar {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: 100;
    padding: 0.75rem 1.25rem;
    background: var(--tinta);
    color: #fff;
    border-radius: var(--radio-chico);
    font-weight: 600;
    text-decoration: none;
}
.saltar:focus { top: 1rem; }

/* Calma sensorial: sin animaciones ni desplazamientos suaves si la persona lo pide */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}