:root {
    --color-principal: #1f2a5f;
    --color-principal-oscuro: #141c42;
    --color-principal-claro: #33427f;
    --color-acento: #c9a227;
    --color-acento-claro: #e3c157;
    --color-papel: #faf8f3;
    --color-papel-alterno: #f2eee4;
    --color-tinta: #1b1b1f;
    --color-tinta-suave: #56565f;
    --color-borde: #e2dcd0;
    --color-blanco: #ffffff;
    --gh-font-heading: 'Cormorant Garamond', Georgia, serif;
    --gh-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-titulo: var(--gh-font-heading);
    --font-texto: var(--gh-font-body);
    --radio: 4px;
    --radio-grande: 10px;
    --sombra: 0 1px 2px rgba(31, 42, 95, 0.06), 0 8px 24px rgba(31, 42, 95, 0.08);
    --sombra-fuerte: 0 18px 48px rgba(20, 28, 66, 0.18);
    --ancho: 1180px;
    --ancho-estrecho: 760px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background-color: var(--color-papel);
    color: var(--color-tinta);
    font-family: var(--font-texto);
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--color-principal);
    text-decoration-color: rgba(31, 42, 95, 0.3);
    text-underline-offset: 3px;
}

a:hover {
    color: var(--color-principal-claro);
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-titulo);
    font-weight: 600;
    line-height: 1.15;
    color: var(--color-principal);
    margin: 0 0 0.5em;
    letter-spacing: -0.01em;
}

code {
    background: var(--color-papel-alterno);
    padding: 0.1em 0.35em;
    border-radius: var(--radio);
    font-size: 0.9em;
}

.salto-a-contenido {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--color-principal);
    color: var(--color-blanco);
    padding: 12px 20px;
    z-index: 100;
}

.salto-a-contenido:focus {
    left: 0;
}

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

.envoltorio {
    width: 100%;
    max-width: var(--ancho);
    margin: 0 auto;
    padding: 0 24px;
}

.envoltorio-estrecho {
    max-width: var(--ancho-estrecho);
}

.texto-centrado {
    text-align: center;
}

/* ---------- Botones ---------- */

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 26px;
    border: 1px solid transparent;
    border-radius: var(--radio);
    font-family: var(--font-texto);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.boton:hover {
    transform: translateY(-1px);
}

.boton-principal,
.boton-principal:hover {
    background: var(--color-principal);
    color: var(--color-blanco);
}

.boton-acento,
.boton-acento:hover {
    background: var(--color-acento);
    color: #241c00;
}

.boton-claro,
.boton-claro:hover {
    background: var(--color-blanco);
    color: var(--color-principal);
}

.boton-contorno {
    background: transparent;
    border-color: rgba(31, 42, 95, 0.35);
    color: var(--color-principal);
}

.boton-contorno:hover {
    background: rgba(31, 42, 95, 0.06);
    color: var(--color-principal);
}

.boton-compacto {
    padding: 10px 18px;
    font-size: 14px;
}

.boton-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    color: var(--color-principal);
    cursor: pointer;
}

.boton-icono:hover {
    background: var(--color-papel-alterno);
}

.grupo-botones {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.grupo-botones-centrado {
    justify-content: center;
}

/* ---------- Cabecera ---------- */

.cabecera {
    position: relative;
    z-index: 20;
    background: var(--color-blanco);
    border-bottom: 1px solid var(--color-borde);
}

.cabecera-cinta {
    background: var(--color-principal-oscuro);
    color: rgba(255, 255, 255, 0.82);
    font-size: 13px;
}

.cabecera-cinta-interior {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 38px;
}

.cabecera-cinta-texto {
    margin: 0;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 11.5px;
}

.cabecera-cinta-acciones {
    display: flex;
    align-items: center;
    gap: 18px;
}

.cinta-enlace {
    color: var(--color-blanco);
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.cinta-enlace:hover {
    color: var(--color-acento-claro);
}

.punto-vivo {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e2504a;
    box-shadow: 0 0 0 0 rgba(226, 80, 74, 0.7);
    animation: pulso 2s infinite;
}

@keyframes pulso {
    70% {
        box-shadow: 0 0 0 8px rgba(226, 80, 74, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(226, 80, 74, 0);
    }
}

.cabecera-principal {
    display: flex;
    align-items: center;
    gap: 28px;
    padding-top: 14px;
    padding-bottom: 14px;
}

.marca {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    /* La marca es lo que cede espacio: asi el encabezado nunca fuerza
       desplazamiento horizontal en pantallas estrechas. */
    min-width: 0;
}

.marca-logo {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    object-fit: contain;
}

.marca-texto {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.15;
}

.marca-titulo {
    font-family: var(--font-titulo);
    font-size: 27px;
    font-weight: 700;
    color: var(--color-principal);
    letter-spacing: 0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.marca-subtitulo {
    font-size: 11.5px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--color-tinta-suave);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.navegacion-principal {
    margin-left: auto;
}

.lista-navegacion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.elemento-navegacion a {
    display: inline-block;
    padding: 9px 10px;
    border-radius: var(--radio);
    white-space: nowrap;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-tinta);
    text-decoration: none;
}

.elemento-navegacion a:hover {
    background: var(--color-papel-alterno);
    color: var(--color-principal);
}

.elemento-navegacion-activo a {
    color: var(--color-principal);
    box-shadow: inset 0 -2px 0 var(--color-acento);
}

.cabecera-acciones {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.boton-menu {
    display: none;
}

.menu-movil {
    border-top: 1px solid var(--color-borde);
    background: var(--color-blanco);
    padding: 24px 0 32px;
}

.menu-movil-interior {
    display: grid;
    gap: 28px;
}

.menu-movil-titulo {
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-tinta-suave);
    font-family: var(--font-texto);
    font-weight: 600;
    margin-bottom: 10px;
}

.menu-movil .lista-navegacion {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}

.menu-movil .elemento-navegacion a {
    display: block;
    padding: 11px 0;
    border-bottom: 1px solid var(--color-borde);
    border-radius: 0;
    font-size: 16px;
}

.menu-movil-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* ---------- Portada ---------- */

.portada {
    position: relative;
    overflow: hidden;
    background: linear-gradient(150deg, var(--color-principal-oscuro), var(--color-principal) 55%, var(--color-principal-claro));
    color: var(--color-blanco);
    padding: 84px 0 92px;
}

.portada::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 15% 20%, rgba(201, 162, 39, 0.22), transparent 45%),
        radial-gradient(circle at 85% 80%, rgba(201, 162, 39, 0.14), transparent 40%);
    pointer-events: none;
}

.portada-fondo {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.22;
}

.portada-interior {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: 56px;
}

.portada-antetitulo {
    margin: 0 0 14px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--color-acento-claro);
}

.portada-titulo {
    color: var(--color-blanco);
    font-size: clamp(2.5rem, 5vw, 4rem);
    margin-bottom: 20px;
}

.portada-titulo em {
    font-style: italic;
    color: var(--color-acento-claro);
}

.portada-descripcion {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.86);
    max-width: 56ch;
    margin: 0;
}

.portada-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 30px;
}

.marco-video {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--radio-grande);
    overflow: hidden;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: var(--sombra-fuerte);
    display: flex;
    align-items: center;
    justify-content: center;
}

.marco-video iframe,
.marco-video video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.marco-video-boton {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    background: transparent;
    border: 0;
    color: var(--color-blanco);
    font-family: var(--font-texto);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
}

.marco-video-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: var(--color-acento);
    color: #241c00;
}

.marco-video-activo {
    max-width: 960px;
    margin: 0 auto;
    background: var(--color-principal-oscuro);
    border-color: var(--color-borde);
}

/* ---------- Secciones ---------- */

.seccion {
    padding: 72px 0;
}

.seccion-alterna {
    background: var(--color-papel-alterno);
}

.seccion-contador {
    background: var(--color-principal-oscuro);
    color: var(--color-blanco);
    padding: 56px 0;
}

.seccion-antetitulo {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-acento);
}

.seccion-titulo {
    font-size: clamp(1.7rem, 3vw, 2.5rem);
    margin-bottom: 14px;
}

.seccion-encabezado {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 36px;
}

.seccion-encabezado-centrado {
    display: block;
    text-align: center;
    max-width: 680px;
    margin: 0 auto 44px;
}

.enlace-seccion {
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid var(--color-acento);
    padding-bottom: 2px;
    white-space: nowrap;
}

.texto-guia {
    font-size: 17.5px;
    color: var(--color-tinta-suave);
    max-width: 64ch;
}

.texto-guia-centrado {
    margin-left: auto;
    margin-right: auto;
}

.nota-vacia {
    margin: 0;
    padding: 26px;
    border: 1px dashed var(--color-borde);
    border-radius: var(--radio-grande);
    background: var(--color-blanco);
    color: var(--color-tinta-suave);
    text-align: center;
}

.dos-columnas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 56px;
    align-items: start;
}

.dos-columnas-formulario {
    grid-template-columns: 1.55fr 1fr;
}

/* ---------- Contador ---------- */

.contador {
    text-align: center;
}

.contador-titulo {
    color: var(--color-blanco);
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    margin-bottom: 6px;
}

.contador-fecha {
    margin: 0 0 30px;
    color: var(--color-acento-claro);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-size: 12.5px;
    font-weight: 600;
}

.contador-bloques {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
}

.contador-bloque {
    min-width: 128px;
    padding: 20px 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radio-grande);
    background: rgba(255, 255, 255, 0.06);
}

.contador-numero {
    display: block;
    font-family: var(--font-titulo);
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-blanco);
    font-variant-numeric: tabular-nums;
}

.contador-unidad {
    display: block;
    margin-top: 8px;
    font-size: 11.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}

.contador-celebracion {
    margin: 26px 0 0;
    font-family: var(--font-titulo);
    font-size: 1.6rem;
    color: var(--color-acento-claro);
}

/* ---------- Accesos rapidos ---------- */

.accesos-rapidos {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.acceso {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px;
    background: var(--color-blanco);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-grande);
    text-decoration: none;
    box-shadow: var(--sombra);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.acceso:hover {
    transform: translateY(-3px);
    box-shadow: var(--sombra-fuerte);
}

.acceso-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(201, 162, 39, 0.14);
    color: var(--color-principal);
}

.acceso-texto {
    display: flex;
    flex-direction: column;
}

.acceso-titulo {
    font-family: var(--font-titulo);
    font-size: 21px;
    font-weight: 600;
    color: var(--color-principal);
}

.acceso-nota {
    font-size: 13.5px;
    color: var(--color-tinta-suave);
}

/* ---------- Cifras ---------- */

.cifras {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.cifra {
    padding: 24px;
    background: var(--color-blanco);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-grande);
    border-top: 3px solid var(--color-acento);
}

.cifra-numero {
    display: block;
    font-family: var(--font-titulo);
    font-size: 2.6rem;
    line-height: 1;
    color: var(--color-principal);
}

.cifra-texto {
    display: block;
    margin-top: 8px;
    font-size: 14px;
    color: var(--color-tinta-suave);
}

/* ---------- Tarjetas ---------- */

.rejilla-tarjetas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr));
    gap: 28px;
}

.tarjeta {
    display: flex;
    flex-direction: column;
    background: var(--color-blanco);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-grande);
    overflow: hidden;
    box-shadow: var(--sombra);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.tarjeta:hover {
    transform: translateY(-3px);
    box-shadow: var(--sombra-fuerte);
}

.tarjeta-imagen-enlace {
    display: block;
    aspect-ratio: 16 / 10;
    background: var(--color-papel-alterno);
}

.tarjeta-imagen {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tarjeta-imagen-vacia {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.35;
}

.tarjeta-imagen-vacia img {
    width: 56px;
    height: 56px;
}

.tarjeta-cuerpo {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px;
    flex: 1;
}

.tarjeta-etiqueta {
    align-self: flex-start;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-acento);
    text-decoration: none;
}

.tarjeta-titulo {
    font-size: 22px;
    margin: 0;
}

.tarjeta-titulo a {
    text-decoration: none;
}

.tarjeta-extracto {
    margin: 0;
    font-size: 15px;
    color: var(--color-tinta-suave);
    flex: 1;
}

.tarjeta-pie {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--color-tinta-suave);
    padding-top: 12px;
    border-top: 1px solid var(--color-borde);
}

/* ---------- Patrocinadores ---------- */

.patrocinadores-muro {
    text-align: center;
}

.patrocinadores-lista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr));
    gap: 18px;
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
}

.patrocinador a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 110px;
    padding: 18px;
    background: var(--color-blanco);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-grande);
    text-decoration: none;
}

.patrocinador img {
    max-height: 64px;
    width: auto;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.8;
    transition: filter 0.2s ease, opacity 0.2s ease;
}

.patrocinador a:hover img {
    filter: grayscale(0);
    opacity: 1;
}

.patrocinador-texto {
    font-family: var(--font-titulo);
    font-size: 19px;
    color: var(--color-principal);
    text-align: center;
}

/* ---------- Niveles ---------- */

.rejilla-niveles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    gap: 24px;
}

.rejilla-niveles-secundaria {
    margin-top: 24px;
}

.nivel {
    padding: 28px;
    background: var(--color-blanco);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-grande);
    border-top: 4px solid var(--color-borde);
    box-shadow: var(--sombra);
}

.nivel-diamante {
    border-top-color: #7fb3d5;
}

.nivel-platino {
    border-top-color: #9aa5b1;
}

.nivel-oro {
    border-top-color: #c9a227;
}

.nivel-plata {
    border-top-color: #b9bcc2;
}

.nivel-bronce {
    border-top-color: #a9743f;
}

.nivel-amigos {
    border-top-color: var(--color-principal);
}

.nivel-especial {
    border-top-color: var(--color-principal-claro);
}

.nivel-titulo {
    font-size: 26px;
    margin-bottom: 2px;
}

.nivel-tipo {
    margin: 0 0 16px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-tinta-suave);
}

.nivel-descripcion {
    margin: 0;
    font-size: 15px;
    color: var(--color-tinta-suave);
}

.nivel-beneficios {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.nivel-beneficios li {
    position: relative;
    padding-left: 24px;
    font-size: 15px;
    color: var(--color-tinta-suave);
}

.nivel-beneficios li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 9px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-acento);
}

/* ---------- Pasos, listas, roles ---------- */

.pasos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: 18px;
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: paso;
}

.pasos-compactos {
    grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
}

.paso {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
    background: var(--color-blanco);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-grande);
}

.paso-numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--color-principal);
    color: var(--color-blanco);
    font-family: var(--font-titulo);
    font-size: 17px;
    font-weight: 700;
}

.paso-texto {
    font-size: 15.5px;
    color: var(--color-tinta-suave);
}

.lista-verificacion {
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.lista-verificacion li {
    position: relative;
    padding-left: 32px;
    font-size: 16px;
    color: var(--color-tinta-suave);
}

.lista-verificacion li::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 7px;
    width: 11px;
    height: 6px;
    border-left: 2px solid var(--color-acento);
    border-bottom: 2px solid var(--color-acento);
    transform: rotate(-45deg);
}

.rejilla-roles,
.rejilla-accesos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    gap: 22px;
}

.rol,
.acceso-seccion {
    display: block;
    padding: 26px;
    background: var(--color-blanco);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-grande);
    text-decoration: none;
}

.acceso-seccion:hover {
    border-color: var(--color-acento);
}

.rol p,
.acceso-seccion p {
    margin: 0;
    font-size: 15px;
    color: var(--color-tinta-suave);
}

.rol-titulo,
.acceso-seccion-titulo {
    font-size: 22px;
    margin-bottom: 8px;
}

.rejilla-personas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
    gap: 24px;
}

.persona {
    text-align: center;
    padding: 24px 18px;
    background: var(--color-blanco);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-grande);
}

.persona-retrato {
    width: 104px;
    height: 104px;
    margin: 0 auto 14px;
    border-radius: 50%;
    object-fit: cover;
}

.persona-nombre {
    font-size: 20px;
    margin-bottom: 4px;
}

.persona-nombre a {
    text-decoration: none;
}

.persona-cargo {
    margin: 0;
    font-size: 13.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-tinta-suave);
}

/* ---------- Progreso ---------- */

.progreso {
    padding: 34px;
    background: var(--color-blanco);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-grande);
    box-shadow: var(--sombra);
}

.progreso-encabezado {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.progreso-titulo {
    margin: 0;
    font-size: 26px;
}

.progreso-cifras {
    margin: 0;
    font-size: 16px;
    color: var(--color-tinta-suave);
    display: flex;
    gap: 7px;
    align-items: baseline;
}

.progreso-cifras strong {
    font-family: var(--font-titulo);
    font-size: 30px;
    color: var(--color-principal);
}

.progreso-pista {
    position: relative;
    height: 14px;
    margin: 20px 0 12px;
    background: var(--color-papel-alterno);
    border-radius: 999px;
    overflow: hidden;
}

.progreso-relleno {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--color-acento), var(--color-acento-claro));
    transition: width 0.9s ease;
}

.progreso-porcentaje {
    margin: 0;
    font-size: 14px;
    color: var(--color-tinta-suave);
}

.progreso-porcentaje span {
    font-weight: 700;
    color: var(--color-principal);
}

/* ---------- Calendario ---------- */

.calendario-controles {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    padding: 22px 24px;
    background: var(--color-blanco);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-grande);
    margin-bottom: 26px;
}

.calendario-subtitulo {
    margin: 0 0 10px;
    font-family: var(--font-texto);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-tinta-suave);
}

.calendario-fichas {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ficha {
    padding: 8px 16px;
    background: var(--color-papel-alterno);
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: var(--font-texto);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-tinta);
    cursor: pointer;
}

.ficha:hover {
    border-color: var(--color-acento);
}

.ficha-activa,
.ficha-activa:hover {
    background: var(--color-principal);
    color: var(--color-blanco);
}

.calendario-resumen {
    margin: 0 0 20px;
    font-size: 14.5px;
    color: var(--color-tinta-suave);
}

.calendario-lista {
    display: grid;
    gap: 16px;
}

.evento {
    display: grid;
    grid-template-columns: 108px 1fr auto;
    align-items: center;
    gap: 24px;
    padding: 22px 24px;
    background: var(--color-blanco);
    border: 1px solid var(--color-borde);
    border-left: 4px solid var(--color-acento);
    border-radius: var(--radio-grande);
}

.evento-pasado {
    border-left-color: var(--color-borde);
    opacity: 0.75;
}

.evento-fecha {
    text-align: center;
    padding: 12px 8px;
    background: var(--color-papel-alterno);
    border-radius: var(--radio);
}

.evento-dia {
    display: block;
    font-family: var(--font-titulo);
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-principal);
}

.evento-mes {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-tinta-suave);
}

.evento-anio {
    display: block;
    font-size: 11px;
    color: var(--color-tinta-suave);
}

.evento-titulo {
    font-size: 22px;
    margin: 0 0 6px;
}

.evento-titulo a {
    text-decoration: none;
}

.evento-datos {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0;
    font-size: 13.5px;
    color: var(--color-tinta-suave);
}

.evento-ciudad {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--color-principal);
}

.evento-aviso {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    background: #fdf1e7;
    color: #9a4a12;
    border: 1px solid #f0c9a8;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.calendario-mes-barra {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-bottom: 18px;
}

.calendario-mes-titulo {
    margin: 0;
    font-size: 26px;
    min-width: 240px;
    text-align: center;
    text-transform: capitalize;
}

.calendario-rejilla {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
}

.celda-cabecera {
    padding: 8px 4px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-tinta-suave);
}

.celda {
    min-height: 92px;
    padding: 8px;
    background: var(--color-blanco);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    font-size: 13px;
}

.celda-vacia {
    background: transparent;
    border-color: transparent;
}

.celda-numero {
    display: block;
    font-weight: 600;
    color: var(--color-tinta-suave);
    margin-bottom: 5px;
}

.celda-con-eventos {
    border-color: var(--color-acento);
    box-shadow: inset 0 0 0 1px rgba(201, 162, 39, 0.35);
}

.celda-evento {
    display: block;
    padding: 4px 6px;
    margin-bottom: 4px;
    background: rgba(31, 42, 95, 0.08);
    border-radius: 3px;
    font-size: 12px;
    line-height: 1.25;
    color: var(--color-principal);
    text-decoration: none;
}

.celda-evento:hover {
    background: rgba(31, 42, 95, 0.16);
}

.eventos-proximos {
    display: grid;
    gap: 16px;
}

/* ---------- Mapa ---------- */

.tarjeta-mapa {
    padding: 26px;
    background: var(--color-blanco);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-grande);
}

.tarjeta-mapa-compacta {
    margin-top: 24px;
    padding: 12px;
}

.tarjeta-mapa-titulo {
    font-size: 22px;
    margin-bottom: 6px;
}

.tarjeta-mapa-texto {
    margin: 0 0 18px;
    font-size: 15px;
    color: var(--color-tinta-suave);
}

.mapa {
    width: 100%;
    height: 260px;
    border: 0;
    border-radius: var(--radio);
    margin-bottom: 14px;
}

/* ---------- Mosaico / galeria ---------- */

.mosaico {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
    gap: 14px;
}

.mosaico-amplio {
    grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
}

.mosaico-elemento {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--radio-grande);
    background: var(--color-papel-alterno);
    text-decoration: none;
}

.mosaico-elemento img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.mosaico-elemento:hover img {
    transform: scale(1.05);
}

.mosaico-titulo {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 26px 14px 12px;
    background: linear-gradient(transparent, rgba(20, 28, 66, 0.85));
    color: var(--color-blanco);
    font-size: 14px;
    font-weight: 500;
}

/* ---------- Documentos ---------- */

.lista-documentos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.documento {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 24px;
    background: var(--color-blanco);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-grande);
}

.documento-titulo {
    font-size: 20px;
    margin: 0 0 4px;
}

.documento-titulo a {
    text-decoration: none;
}

.documento-nota {
    margin: 0;
    font-size: 14.5px;
    color: var(--color-tinta-suave);
}

.documento-fecha {
    font-family: var(--font-titulo);
    font-size: 19px;
    color: var(--color-acento);
    white-space: nowrap;
}

/* ---------- Pagos ---------- */

.rejilla-pagos {
    list-style: none;
    margin: 0 0 36px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
    gap: 16px;
}

.pago {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 20px 22px;
    background: var(--color-blanco);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-grande);
}

.pago strong {
    font-family: var(--font-titulo);
    font-size: 20px;
    font-weight: 600;
    color: var(--color-principal);
}

.pago span {
    font-size: 14px;
    color: var(--color-tinta-suave);
}

.montos {
    padding: 32px;
    background: var(--color-blanco);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-grande);
    box-shadow: var(--sombra);
}

.montos-opciones {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 22px;
}

/* ---------- Cronologia ---------- */

.cronologia-controles {
    margin-bottom: 26px;
}

.cronologia {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0 0 0 34px;
}

.cronologia::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: linear-gradient(var(--color-acento), var(--color-borde));
}

.hito {
    position: relative;
    padding: 0 0 34px;
}

.hito::before {
    content: '';
    position: absolute;
    left: -33px;
    top: 8px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-blanco);
    border: 3px solid var(--color-acento);
}

.hito-anio {
    display: inline-block;
    font-family: var(--font-titulo);
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-principal);
    margin-bottom: 6px;
}

.hito-titulo {
    font-size: 22px;
    margin: 0 0 6px;
}

.hito-titulo a {
    text-decoration: none;
}

.hito-texto {
    margin: 0;
    font-size: 15.5px;
    color: var(--color-tinta-suave);
    max-width: 68ch;
}

/* ---------- Formularios ---------- */

.formulario {
    padding: 32px;
    background: var(--color-blanco);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-grande);
    box-shadow: var(--sombra);
}

.formulario-grupo {
    margin: 0 0 28px;
    padding: 0;
    border: 0;
}

.formulario-leyenda {
    padding: 0;
    margin-bottom: 18px;
    font-family: var(--font-titulo);
    font-size: 24px;
    font-weight: 600;
    color: var(--color-principal);
}

.formulario-rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
    gap: 18px;
}

.campo {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 18px;
}

.formulario-rejilla .campo {
    margin: 0;
}

.campo label {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-tinta);
}

.campo input[type='text'],
.campo input[type='email'],
.campo input[type='tel'],
.campo input[type='url'],
.campo select,
.campo textarea,
.boletin-entrada {
    width: 100%;
    padding: 12px 14px;
    background: var(--color-papel);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    font-family: var(--font-texto);
    font-size: 15px;
    color: var(--color-tinta);
}

.campo textarea {
    resize: vertical;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
    border-color: var(--color-principal);
    background: var(--color-blanco);
}

.campo-obligatorio {
    color: #b4342d;
}

.campo-nota,
.formulario-aviso,
.boletin-nota,
.pie-lista-nota {
    font-size: 13.5px;
    color: var(--color-tinta-suave);
}

.campo-consentimiento label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: var(--color-tinta-suave);
    font-weight: 400;
}

.campo-consentimiento input {
    margin-top: 4px;
}

.formulario-acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.formulario-estado {
    font-size: 14px;
    font-weight: 500;
}

.formulario-estado-exito {
    color: #1d7a4c;
}

.formulario-estado-error {
    color: #b4342d;
}

/* ---------- Boletin ---------- */

.boletin {
    display: block;
}

.boletin-etiqueta {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 500;
}

.boletin-campos {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.boletin-campos .boletin-entrada {
    flex: 1 1 220px;
    width: auto;
}

.boletin-mensaje {
    display: none;
    margin: 12px 0 0;
    font-size: 14px;
}

.boletin-mensaje-exito {
    color: #1d7a4c;
}

.boletin-mensaje-error {
    color: #b4342d;
}

.boletin-visible-exito .boletin-mensaje-exito,
.boletin-visible-error .boletin-mensaje-error {
    display: block;
}

.boletin-bloque {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 56px;
    align-items: center;
}

.seccion-boletin {
    background: var(--color-papel-alterno);
}

/* ---------- Entradas y paginas ---------- */

.encabezado-archivo,
.pagina-encabezado,
.entrada-encabezado {
    padding: 62px 0 34px;
}

.encabezado-archivo-titulo,
.pagina-titulo,
.entrada-titulo {
    font-size: clamp(2rem, 4vw, 3.2rem);
    margin-bottom: 14px;
    max-width: 26ch;
}

.pagina-bajada,
.entrada-bajada {
    font-size: 19px;
    color: var(--color-tinta-suave);
    max-width: 62ch;
    margin: 0;
}

.encabezado-archivo-cuenta {
    margin: 16px 0 0;
    font-size: 13.5px;
    color: var(--color-tinta-suave);
}

.autor-retrato {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 18px;
}

.entrada-etiqueta {
    display: inline-block;
    margin-bottom: 14px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-acento);
    text-decoration: none;
}

.entrada-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
    font-size: 14px;
    color: var(--color-tinta-suave);
}

.entrada-imagen,
.pagina-imagen {
    max-width: 1100px;
    margin: 10px auto 44px;
    padding: 0 24px;
}

.entrada-imagen img,
.pagina-imagen img {
    width: 100%;
    border-radius: var(--radio-grande);
    box-shadow: var(--sombra);
}

.entrada-imagen figcaption {
    margin-top: 12px;
    text-align: center;
    font-size: 13.5px;
    color: var(--color-tinta-suave);
}

.contenido {
    font-size: 18px;
    line-height: 1.75;
    padding-bottom: 20px;
}

.contenido > * {
    margin-top: 0;
    margin-bottom: 1.4em;
}

.contenido h2 {
    font-size: 2rem;
    margin-top: 2em;
}

.contenido h3 {
    font-size: 1.5rem;
    margin-top: 1.8em;
}

.contenido ul,
.contenido ol {
    padding-left: 1.4em;
}

.contenido li {
    margin-bottom: 0.5em;
}

.contenido blockquote {
    margin-left: 0;
    margin-right: 0;
    padding: 6px 0 6px 26px;
    border-left: 3px solid var(--color-acento);
    font-family: var(--font-titulo);
    font-size: 1.35rem;
    color: var(--color-principal);
}

.contenido img,
.contenido .kg-image {
    border-radius: var(--radio-grande);
}

.contenido .kg-card {
    margin-bottom: 1.6em;
}

.kg-width-wide {
    position: relative;
    width: calc(100vw - 48px);
    max-width: 1100px;
    margin-left: 50%;
    transform: translateX(-50%);
}

.kg-width-full {
    position: relative;
    width: 100vw;
    max-width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
}

.kg-width-full img,
.kg-width-full .kg-image {
    width: 100%;
    border-radius: 0;
}

.kg-width-wide img {
    width: 100%;
}

.kg-gallery-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.kg-gallery-row {
    display: flex;
    gap: 12px;
}

.kg-gallery-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kg-embed-card,
.kg-video-card,
.kg-audio-card {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.kg-embed-card iframe {
    max-width: 100%;
}

.kg-bookmark-card a.kg-bookmark-container {
    display: flex;
    flex-wrap: wrap;
    text-decoration: none;
    background: var(--color-blanco);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-grande);
    overflow: hidden;
}

.kg-bookmark-content {
    flex: 1 1 240px;
    padding: 20px 22px;
}

.kg-bookmark-title {
    font-family: var(--font-titulo);
    font-size: 20px;
    color: var(--color-principal);
}

.kg-bookmark-description {
    margin-top: 6px;
    font-size: 14.5px;
    color: var(--color-tinta-suave);
}

.kg-bookmark-metadata {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 13px;
    color: var(--color-tinta-suave);
}

.kg-bookmark-icon {
    width: 18px;
    height: 18px;
}

.kg-bookmark-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kg-callout-card {
    display: flex;
    gap: 12px;
    padding: 20px 24px;
    border-radius: var(--radio-grande);
    background: var(--color-papel-alterno);
}

.kg-toggle-card {
    padding: 20px 24px;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-grande);
    background: var(--color-blanco);
}

.kg-button-card a.kg-btn {
    display: inline-flex;
    align-items: center;
    padding: 13px 26px;
    border-radius: var(--radio);
    background: var(--color-acento);
    color: #241c00;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

@media (max-width: 860px) {
    .kg-gallery-row {
        flex-direction: column;
    }
}

.contenido figcaption {
    margin-top: 10px;
    text-align: center;
    font-size: 13.5px;
    color: var(--color-tinta-suave);
}

.contenido hr {
    border: 0;
    border-top: 1px solid var(--color-borde);
}

.contenido table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15.5px;
}

.contenido th,
.contenido td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--color-borde);
    text-align: left;
}

.contenido th {
    background: var(--color-papel-alterno);
    font-family: var(--font-texto);
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-principal);
}

.datos-evento {
    display: grid;
    gap: 10px;
    padding: 22px 26px;
    background: var(--color-papel-alterno);
    border-left: 4px solid var(--color-acento);
    border-radius: var(--radio-grande);
    font-size: 15.5px;
}

.entrada-etiquetas {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 12px 0 30px;
    padding: 26px 0 0;
    border-top: 1px solid var(--color-borde);
}

.entrada-etiquetas a {
    display: inline-block;
    padding: 6px 14px;
    background: var(--color-papel-alterno);
    border-radius: 999px;
    font-size: 13px;
    text-decoration: none;
}

.entrada-compartir {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding: 22px 0 40px;
    font-size: 14px;
    color: var(--color-tinta-suave);
}

.entrada-compartir a {
    font-weight: 600;
    text-decoration: none;
}

.seccion-relacionadas {
    background: var(--color-papel-alterno);
}

.paginacion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 56px 0 24px;
}

.paginacion-estado {
    font-size: 14px;
    color: var(--color-tinta-suave);
}

.paginacion-hueco {
    display: block;
    width: 1px;
}

/* ---------- Area privada ---------- */

.seccion-privada {
    background: var(--color-principal);
    color: var(--color-blanco);
}

.seccion-privada .seccion-titulo,
.seccion-privada .texto-guia {
    color: var(--color-blanco);
}

.bienvenida-privada {
    padding: 30px 34px;
    margin-bottom: 32px;
    background: var(--color-blanco);
    border: 1px solid var(--color-borde);
    border-left: 4px solid var(--color-acento);
    border-radius: var(--radio-grande);
}

.bienvenida-privada .seccion-titulo {
    margin-bottom: 4px;
}

.bloque-acceso {
    padding: 32px;
    margin-bottom: 24px;
    background: var(--color-blanco);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-grande);
    box-shadow: var(--sombra);
}

.bloque-acceso-nota {
    background: var(--color-papel-alterno);
    box-shadow: none;
}

.aviso-vivo {
    max-width: 720px;
    margin: 0 auto;
    padding: 46px;
    text-align: center;
    background: var(--color-blanco);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-grande);
}

.aviso-vivo .texto-guia {
    margin: 0 auto 18px;
}

.aviso-vivo .redes {
    justify-content: center;
    margin-top: 22px;
}

/* ---------- Error ---------- */

.error-interior {
    padding: 110px 24px 120px;
    text-align: center;
}

.error-codigo {
    margin: 0;
    font-family: var(--font-titulo);
    font-size: 6rem;
    line-height: 1;
    color: var(--color-acento);
}

.error-titulo {
    font-size: clamp(1.8rem, 3.4vw, 2.8rem);
}

.error .texto-guia {
    margin: 0 auto;
}

/* ---------- Pie ---------- */

.pie {
    background: var(--color-principal-oscuro);
    color: rgba(255, 255, 255, 0.76);
    padding-top: 66px;
    margin-top: 0;
}

.pie-interior {
    display: grid;
    grid-template-columns: 1.25fr 1fr 1fr 1.25fr;
    gap: 44px;
    padding-bottom: 52px;
}

.pie-logo {
    width: 76px;
    height: 76px;
    margin-bottom: 18px;
    background: var(--color-blanco);
    border-radius: 50%;
    padding: 6px;
}

.pie-descripcion {
    margin: 0 0 20px;
    font-size: 15px;
}

.pie-titulo {
    font-family: var(--font-texto);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-acento);
    margin-bottom: 16px;
}

.pie-lista,
.pie .lista-navegacion {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 11px;
}

.pie .lista-navegacion {
    flex-direction: column;
    align-items: stretch;
}

.pie-lista li,
.pie .elemento-navegacion a {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.76);
    padding: 0;
}

.pie-lista strong {
    color: var(--color-blanco);
    font-size: 13px;
    letter-spacing: 0.04em;
}

.pie a,
.pie .elemento-navegacion a {
    color: rgba(255, 255, 255, 0.86);
    text-decoration: none;
}

.pie a:hover,
.pie .elemento-navegacion a:hover {
    color: var(--color-acento-claro);
    background: transparent;
}

.pie .elemento-navegacion-activo a {
    box-shadow: none;
    color: var(--color-acento-claro);
}

.pie .boletin-etiqueta,
.pie-lista-nota {
    color: rgba(255, 255, 255, 0.7);
}

.pie-lista-nota {
    margin: 0 0 14px;
}

.pie .boletin-entrada {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--color-blanco);
}

.pie .boletin-entrada::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

.redes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.redes a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--color-borde);
    border-radius: 50%;
    color: var(--color-principal);
}

.pie .redes a {
    border-color: rgba(255, 255, 255, 0.24);
    color: rgba(255, 255, 255, 0.86);
}

.redes a:hover {
    border-color: var(--color-acento);
    color: var(--color-acento);
}

.pie-legal {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding: 22px 0;
    font-size: 13.5px;
}

.pie-legal-interior {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.pie-legal p {
    margin: 0;
}

.pie-legal-lista {
    display: flex;
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ---------- Responsivo ---------- */

@media (max-width: 1080px) {
    .navegacion-principal {
        display: none;
    }

    .boton-menu {
        display: inline-flex;
    }

    .accesos-rapidos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pie-interior {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    body {
        font-size: 16px;
    }

    .portada {
        padding: 56px 0 64px;
    }

    .portada-interior,
    .dos-columnas,
    .dos-columnas-formulario,
    .boletin-bloque {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
    }

    .seccion {
        padding: 52px 0;
    }

    .evento {
        grid-template-columns: 84px 1fr;
        gap: 18px;
    }

    .evento .boton {
        grid-column: 1 / -1;
    }

    .calendario-rejilla {
        gap: 3px;
    }

    .celda {
        min-height: 64px;
        padding: 5px;
        font-size: 11px;
    }

    .celda-evento {
        font-size: 10px;
        padding: 2px 4px;
    }

    .formulario,
    .montos,
    .progreso {
        padding: 24px 20px;
    }

    .documento {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

@media (max-width: 560px) {
    .cabecera-cinta-texto {
        display: none;
    }

    .cabecera-cinta-interior {
        justify-content: flex-end;
    }

    .cabecera-principal {
        gap: 12px;
    }

    .cabecera-acciones {
        gap: 6px;
    }

    .boton-compacto {
        padding: 9px 13px;
        font-size: 13px;
    }

    .accesos-rapidos,
    .cifras,
    .pie-interior {
        grid-template-columns: minmax(0, 1fr);
    }

    .marca-titulo {
        font-size: 23px;
    }

    .marca-logo {
        width: 46px;
        height: 46px;
    }

    .contador-bloque {
        min-width: 44%;
        padding: 16px 8px;
    }

    .contador-numero {
        font-size: 2.3rem;
    }

    .paginacion {
        flex-direction: column;
    }
}

/* En pantallas muy estrechas se libera ancho real en la cabecera en vez de
   dejar que la marca se recorte: el buscador pasa al menu desplegable. */
@media (max-width: 420px) {
    .envoltorio {
        padding: 0 16px;
    }

    .marca-logo {
        width: 40px;
        height: 40px;
    }

    .marca-titulo {
        font-size: 20px;
    }

    .boton-buscar {
        display: none;
    }

    .boton-compacto {
        padding: 8px 12px;
        font-size: 12.5px;
    }
}

@media (max-width: 360px) {
    .marca-subtitulo {
        display: none;
    }
}

@media print {
    .cabecera,
    .pie,
    .seccion-boletin,
    .entrada-compartir,
    .menu-movil {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}