:root {
    --brand-primary: #FDCC3C;
    --brand-primary-soft: #F5DB73;
    --brand-primary-dark: #E7B54A;
    --brand-secondary: #3B3B3B;
    --brand-dark: #181818;
    --brand-background: #FEFDF5;
    --brand-surface: #FFFFFF;
    --brand-text: #222222;
    --brand-text-muted: #787977;
    --brand-border: #C7C7C6;
}

.public-access-links {
    width: min(1100px, 100%);
}

.public-access-links__title {
    margin: 0 0 0.65rem;
    color: #686158;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.public-access-links__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
}

.public-access-links__item {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 2.75rem;
    padding: 0.72rem 1rem;
    border: 1px solid #C7C7C6;
    border-radius: 2px;
    background: #FFFFFF;
    color: #222222;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    box-shadow: none;
    transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease, transform 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Igual que en la portada: se tiñe el botón entero en vez de levantarlo. Solo con mouse,
   porque en pantallas táctiles el hover queda pegado después de tocar. */
@media (hover: hover) and (pointer: fine) {
    .public-access-links__item:hover {
        color: #222222;
        border-color: #FDCC3C;
        background: #FFFBEC;
        box-shadow: none;
        text-decoration: none;
        transform: none;
    }
}

.public-access-links__item:focus-visible {
    outline: 2px solid #E7A11A;
    outline-offset: 2px;
}

.public-access-links__item:active {
    border-color: #E7A11A;
    background: #FFF4D6;
    transform: scale(0.99);
}

.public-access-links__item i {
    color: #3B3B3B;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.public-access-links--footer {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1rem 1.1rem 1.15rem;
    border: 1px solid #C7C7C6;
    border-radius: 2px;
    background: #FFFDF7;
    box-shadow: none;
}

.public-access-links--bar {
    margin: 0 auto 1rem;
    padding: 1rem 1.15rem;
    border: 1px solid #C7C7C6;
    border-radius: 2px;
    background: #FFFFFF;
    box-shadow: none;
}

.public-access-links--bar .public-access-links__title {
    margin-bottom: 0.55rem;
}

@media (max-width: 767.98px) {
    .public-access-links__item {
        width: 100%;
        justify-content: flex-start;
    }

    .public-access-links--footer,
    .public-access-links--bar {
        padding: 0.9rem;
        border-radius: 2px;
    }
}

/* Donar usa el ámbar de la marca, como en la portada: el naranja era un segundo acento
   que no existe en ninguna otra pantalla. */
.public-access-links__item--primary {
    background: #FDCC3C;
    border-color: #FDCC3C;
    color: #17140F;
    font-weight: 700;
}

.public-access-links__item--primary i { color: #17140F; }

@media (hover: hover) and (pointer: fine) {
    .public-access-links__item--primary:hover {
        background: #E7A11A;
        border-color: #E7A11A;
        color: #17140F;
    }
}

.public-access-links__item--primary:active {
    background: #E7A11A;
    border-color: #E7A11A;
}

/* ---------- Variante cabecera (fondo oscuro) ---------- */

/* Antes los accesos vivían en tres lugares distintos según la página: el pie, una barra
   sobre el contenido o directamente no existían. Ahora es una sola posición en las ocho
   páginas: dentro de la cabecera oscura, entre la marca y el título de la sección. */
/* Asimétrico a propósito: poco antes (el logo y el nav son un mismo bloque, van juntos)
   y más después (ahí sí cambia de tema, hacia el título de la sección). */
.public-access-links--oscura {
    margin: clamp(0.85rem, 2.5vw, 1.25rem) 0 clamp(1.5rem, 4vw, 2.25rem);
}

.public-access-links--oscura .public-access-links__title {
    margin: 0 0 0.6rem;
    color: #B3AA9B;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.public-access-links--oscura .public-access-links__item {
    background: transparent;
    border-color: #35302A;
    color: #F2EDE1;
    box-shadow: none;
}

/* El ícono va en ámbar: sobre el fondo oscuro un gris se pierde, y así queda igual
   de legible que el texto (13.5:1 el ámbar, 11.7:1 el hueso). */
.public-access-links--oscura .public-access-links__item i {
    color: #FDCC3C;
}

@media (hover: hover) and (pointer: fine) {
    .public-access-links--oscura .public-access-links__item:hover {
        border-color: rgba(253, 204, 60, 0.55);
        background-color: rgba(253, 204, 60, 0.1);
        color: #FFFFFF;
    }

    .public-access-links--oscura .public-access-links__item:hover i {
        color: #FDCC3C;
    }
}

.public-access-links--oscura .public-access-links__item:active {
    border-color: rgba(253, 204, 60, 0.7);
    background-color: rgba(253, 204, 60, 0.16);
}

/* Donar sigue destacado en ámbar lleno; su ícono va en tinta, no en ámbar sobre ámbar. */
.public-access-links--oscura .public-access-links__item--primary {
    background: #FDCC3C;
    border-color: #FDCC3C;
    color: #17140F;
}

.public-access-links--oscura .public-access-links__item--primary i {
    color: #17140F;
}

@media (hover: hover) and (pointer: fine) {
    .public-access-links--oscura .public-access-links__item--primary:hover {
        background: #E7A11A;
        border-color: #E7A11A;
        color: #17140F;
    }

    .public-access-links--oscura .public-access-links__item--primary:hover i {
        color: #17140F;
    }
}

/* ---------- Ítem actual (la página donde estás) ---------- */

/* El resto de los accesos invita a hacer clic; este no necesita invitarlo, porque no
   lleva a ningún lado nuevo. Por eso no reacciona igual: sin tinte de hover, sin hundido
   al presionar. La opacidad más baja y el relleno tenue son la marca de "ya estás acá". */
.public-access-links__item--actual {
    opacity: 0.6;
    background: rgba(23, 20, 15, 0.05);
    border-color: #C7C7C6;
    cursor: default;
}

.public-access-links__item--actual i {
    color: #3B3B3B;
}

@media (hover: hover) and (pointer: fine) {
    .public-access-links__item--actual:hover {
        border-color: #C7C7C6;
        background: rgba(23, 20, 15, 0.05);
        color: #222222;
        transform: none;
    }
}

.public-access-links__item--actual:active {
    background: rgba(23, 20, 15, 0.05);
    border-color: #C7C7C6;
    transform: none;
}

/* Sobre fondo oscuro (variante --oscura): mismo criterio, otros tonos. */
.public-access-links--oscura .public-access-links__item--actual {
    background: rgba(253, 204, 60, 0.08);
    border-color: #35302A;
}

.public-access-links--oscura .public-access-links__item--actual i {
    color: #FDCC3C;
}

@media (hover: hover) and (pointer: fine) {
    .public-access-links--oscura .public-access-links__item--actual:hover {
        border-color: #35302A;
        background-color: rgba(253, 204, 60, 0.08);
        color: #F2EDE1;
    }
}

.public-access-links--oscura .public-access-links__item--actual:active {
    background-color: rgba(253, 204, 60, 0.08);
    border-color: #35302A;
}

/* "Donar" es el CTA en las otras siete páginas; en /donar mismo no tiene sentido que
   siga gritando la acción que ya estás haciendo, así que "actual" le gana a "primary". */
.public-access-links__item--primary.public-access-links__item--actual {
    background: rgba(253, 204, 60, 0.16);
    border-color: #FDCC3C;
    color: #17140F;
}

.public-access-links__item--primary.public-access-links__item--actual i {
    color: #17140F;
}

/* En la cabecera oscura la tinta sobre el relleno tenue no se leía (oscuro sobre oscuro):
   ahí va como los demás ítems actuales, texto claro e ícono ámbar, con el borde ámbar
   que lo sigue marcando como el acceso destacado. */
.public-access-links--oscura .public-access-links__item--primary.public-access-links__item--actual {
    background: rgba(253, 204, 60, 0.1);
    border-color: rgba(253, 204, 60, 0.6);
    color: #F2EDE1;
}

.public-access-links--oscura .public-access-links__item--primary.public-access-links__item--actual i,
.public-access-links--oscura .public-access-links__item--primary.public-access-links__item--actual:hover i {
    color: #FDCC3C;
}

@media (hover: hover) and (pointer: fine) {
    .public-access-links--oscura .public-access-links__item--primary.public-access-links__item--actual:hover {
        background: rgba(253, 204, 60, 0.1);
        border-color: rgba(253, 204, 60, 0.6);
        color: #F2EDE1;
    }
}