/* =============================================================
   ASAMBLEA BENI — main.css
   Asamblea Legislativa Departamental del Beni
   ============================================================= */

/* ─────────────────────────────────────────────────────────────
   VARIABLES CSS
   ───────────────────────────────────────────────────────────── */
:root {
    --verde: #1a5c2a;
    --verde-medio: #236b33;
    --verde-oscuro: #2d8040;
    --verde-pale: #e8f3eb;
    --oro: #c8922a;
    --oro-claro: #e8b84b;
    --gris-bg: #f2f5f2;
    --gris-texto: #3d4d3f;
    --gris-muted: #6b7d6e;
    --border: #c8d9ca;
    --rojo: #dc2626;
    --fb: #1877F2;
    --blanco: #ffffff;
    --negro: #0e1a0f;

    --fuente-titulo: 'Playfair Display', Georgia, serif;
    --fuente-cuerpo: 'Source Sans 3', 'Segoe UI', Arial, sans-serif;

    --radio: 6px;
    --radio-lg: 12px;
    --sombra: 0 2px 8px rgba(0, 0, 0, .10);
    --sombra-lg: 0 4px 20px rgba(0, 0, 0, .15);
    --transition: 0.2s ease;

    --contenedor: 1200px;
    --sidebar-w: 270px;
    --gap: 24px;
}

/* ─────────────────────────────────────────────────────────────
   RESET Y BASE
   ───────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--fuente-cuerpo);
    color: var(--gris-texto);
    background: var(--gris-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

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

a {
    color: var(--verde);
    text-decoration: none;
    transition: color var(--transition);
}

a:hover,
a:focus {
    color: var(--oro);
}

ul,
ol {
    list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--fuente-titulo);
    color: var(--negro);
    line-height: 1.3;
}

/* ─────────────────────────────────────────────────────────────
   ACCESIBILIDAD
   ───────────────────────────────────────────────────────────── */
.saltar-nav {
    position: absolute;
    top: -100%;
    left: 0;
    background: var(--verde);
    color: var(--blanco);
    padding: 8px 16px;
    z-index: 9999;
    font-weight: 600;
    transition: top 0.2s;
}

.saltar-nav:focus {
    top: 0;
}

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

/* ─────────────────────────────────────────────────────────────
   CONTENEDOR
   ───────────────────────────────────────────────────────────── */
.container {
    max-width: var(--contenedor);
    margin: 0 auto;
    padding: 0 20px;
}

/* ─────────────────────────────────────────────────────────────
   HEADER Y NAVEGACIÓN
   ───────────────────────────────────────────────────────────── */
.site-header {
    background: var(--verde);
    color: var(--blanco);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: var(--sombra-lg);
}

.nav-wrapper {
    padding: 0;
}

.nav-wrapper .container {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 70px;
}

/* Branding */
.site-branding {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    text-decoration: none;
}

.site-logo img,
.site-logo svg {
    width: 56px;
    height: 56px;
    border-radius: 0;
}

.site-logo-placeholder svg {
    border: 2px solid var(--oro);
}

.site-identity {
    display: flex;
    flex-direction: column;
}

.site-name-link {
    text-decoration: none;
}

.site-name {
    display: block;
    font-family: var(--fuente-titulo);
    font-size: 1rem;
    font-weight: 700;
    color: var(--blanco);
    line-height: 1.2;
}

.site-subtitle {
    display: block;
    font-size: .72rem;
    color: var(--oro-claro);
    line-height: 1.2;
}

/* Menú de navegación */
.site-nav {
    flex: 1;
}

.nav-list {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-wrap: nowrap;
}

.nav-list .menu-item>a {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    color: var(--blanco);
    font-size: .88rem;
    font-weight: 600;
    border-radius: var(--radio);
    white-space: nowrap;
    transition: background var(--transition), color var(--transition);
}

.nav-list .menu-item>a:hover,
.nav-list .menu-item.activo>a {
    background: rgba(255, 255, 255, .15);
    color: var(--oro-claro);
}

/* Submenú desplegable */
.nav-list .menu-item-has-children {
    position: relative;
}

.nav-list .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: var(--blanco);
    border: 1px solid var(--border);
    border-top: 3px solid var(--oro);
    border-radius: 0 0 var(--radio) var(--radio);
    box-shadow: var(--sombra-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
    z-index: 100;
}

.nav-list .menu-item-has-children:hover>.sub-menu,
.nav-list .menu-item-has-children.submenu-abierto>.sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-list .sub-menu .menu-item a {
    display: block;
    padding: 10px 16px;
    color: var(--gris-texto);
    font-size: .85rem;
    border-bottom: 1px solid var(--border);
    transition: background var(--transition), color var(--transition);
}

.nav-list .sub-menu .menu-item:last-child a {
    border-bottom: none;
}

.nav-list .sub-menu .menu-item a:hover {
    background: var(--verde-pale);
    color: var(--verde);
}

/* Botón submenu (mobile) */
.submenu-toggle {
    background: none;
    border: none;
    color: var(--blanco);
    cursor: pointer;
    padding: 2px 4px;
    line-height: 1;
    transition: transform var(--transition);
}

.submenu-toggle.abierto i {
    transform: rotate(180deg);
}

/* Búsqueda */
.nav-busqueda {
    flex-shrink: 0;
}

.btn-busqueda {
    background: none;
    border: none;
    color: var(--blanco);
    cursor: pointer;
    padding: 8px;
    border-radius: var(--radio);
    font-size: 1.2rem;
    transition: background var(--transition);
    display: flex;
    align-items: center;
}

.btn-busqueda:hover {
    background: rgba(255, 255, 255, .15);
}

.panel-busqueda {
    background: var(--verde-medio);
    padding: 12px 0;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.panel-busqueda .container {
    display: flex;
    align-items: center;
    gap: 12px;
}

.panel-busqueda .search-form {
    flex: 1;
    display: flex;
    gap: 8px;
}

.panel-busqueda .search-field {
    flex: 1;
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: var(--radio);
    background: rgba(255, 255, 255, .1);
    color: var(--blanco);
    font-size: .9rem;
}

.panel-busqueda .search-field::placeholder {
    color: rgba(255, 255, 255, .6);
}

.panel-busqueda .search-submit {
    padding: 8px 16px;
    background: var(--oro);
    border: none;
    border-radius: var(--radio);
    color: var(--blanco);
    cursor: pointer;
    font-weight: 600;
    font-size: .85rem;
    transition: background var(--transition);
}

.panel-busqueda .search-submit:hover {
    background: var(--oro-claro);
}

.cerrar-busqueda {
    background: none;
    border: none;
    color: var(--blanco);
    cursor: pointer;
    font-size: 1.3rem;
    line-height: 1;
    padding: 4px;
}

/* Hamburger (mobile) */
.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    margin-left: auto;
}

.hamburger {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--blanco);
    border-radius: 2px;
    transition: transform var(--transition), opacity var(--transition);
}

/* ─────────────────────────────────────────────────────────────
   BARRA EN VIVO
   ───────────────────────────────────────────────────────────── */
.barra-vivo {
    background: var(--verde-pale);
    border-bottom: 2px solid var(--border);
    padding: 8px 0;
}

.barra-vivo__inner {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* ─────────────────────────────────────────────────────────────
   TRANSMISIONES — archivo y single
   ───────────────────────────────────────────────────────────── */

/* Header del archivo */
.transmisiones-header { margin-bottom: 20px; }
.transmisiones-desc   { color: var(--gris-muted); font-size: .9rem; margin-top: 6px; }

/* Banner EN VIVO en el archivo */
.transmision-envivo-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fef2f2;
    border: 2px solid var(--rojo);
    border-radius: var(--radio);
    padding: 12px 18px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.transmision-envivo-banner .vivo-dot {
    width: 10px; height: 10px;
    background: var(--rojo);
    animation: parpadeo 1.2s ease-in-out infinite;
    flex-shrink: 0;
}

/* Tabla / listado de sesiones */
.transmisiones-tabla { background: var(--blanco); border: 1px solid var(--border); border-radius: var(--radio-lg); overflow: hidden; }

.transmisiones-tabla__head {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1.2fr 1fr;
    background: var(--verde);
    color: var(--blanco);
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 10px 16px;
    gap: 8px;
}

.transmision-fila {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1.2fr 1fr;
    padding: 12px 16px;
    gap: 8px;
    border-bottom: 1px solid var(--border);
    align-items: center;
    font-size: .85rem;
    transition: background var(--transition);
}
.transmision-fila:last-child { border-bottom: none; }
.transmision-fila:hover { background: var(--gris-bg); }
.transmision-fila--en-vivo { background: #fef2f2; }
.transmision-fila--en-vivo:hover { background: #fee2e2; }

.tf-titulo a { color: var(--negro); font-weight: 600; font-size: .88rem; }
.tf-titulo a:hover { color: var(--verde); }

.tf-fecha, .tf-hora {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--gris-texto);
    font-size: .82rem;
}
.tf-fecha i, .tf-hora i { color: var(--verde); font-size: .9rem; }

/* Badges de tipo */
.tipo-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.tipo-badge--ordinaria     { background: #dbeafe; color: #1d4ed8; }
.tipo-badge--extraordinaria{ background: #fef3c7; color: #92400e; }
.tipo-badge--especial      { background: #f3e8ff; color: #7e22ce; }

/* Badges de estado */
.estado-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-radius: 4px;
    font-size: .72rem;
    font-weight: 700;
}
.estado--programada { background: #dbeafe; color: #1d4ed8; }
.estado--previvo    { background: #fef3c7; color: #92400e; }
.estado--envivo     { background: #fecaca; color: #dc2626; }
.estado--finalizada { background: #dcfce7; color: #15803d; }

/* Botones de acciones en tabla */
.tf-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: var(--radio);
    font-size: .75rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.tf-btn--vivo      { background: var(--rojo);  color: var(--blanco); }
.tf-btn--grabacion { background: var(--verde); color: var(--blanco); }
.tf-btn:hover { opacity: .85; }
.tf-sin-link { color: var(--gris-muted); }

/* Single sesión */
.sesion-single-header { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 2px solid var(--verde-pale); }
.sesion-tipo-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 3px;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 10px;
}
.sesion-tipo-badge--ordinaria      { background: #dbeafe; color: #1d4ed8; }
.sesion-tipo-badge--extraordinaria { background: #fef3c7; color: #92400e; }
.sesion-tipo-badge--especial       { background: #f3e8ff; color: #7e22ce; }

.sesion-meta {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    font-size: .85rem;
    color: var(--gris-muted);
    margin: 8px 0 16px;
}
.sesion-meta span { display: flex; align-items: center; gap: 6px; }

.sesion-acciones { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; }

/* Responsive tabla */
@media (max-width: 1024px) {
    .transmisiones-tabla__head,
    .transmision-fila {
        grid-template-columns: 2fr 1fr 1fr 1fr;
    }
    .transmisiones-tabla__head span:nth-child(5),
    .transmisiones-tabla__head span:nth-child(6),
    .transmision-fila .tf-estado,
    .transmision-fila .tf-acciones { display: none; }
}
@media (max-width: 768px) {
    .transmisiones-tabla__head { display: none; }
    .transmision-fila {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 14px;
    }
    .transmision-fila .tf-estado,
    .transmision-fila .tf-acciones { display: flex; }
}

/* ── Estado 3: EN VIVO (override ON) ── */
.barra-vivo--activa {
    background: var(--verde-pale);
    border-bottom: 2px solid var(--border);
}

/* ── Estado 2: Sesión programada (próxima) ── */
.barra-vivo--programada {
    background: #eff6ff;
    border-bottom: 2px solid #bfdbfe;
}

/* ── Estado 1: Sin sesión ── */
.barra-vivo--inactiva {
    background: #f3f4f6;
    border-bottom: 2px solid #d1d5db;
    opacity: .8;
}

/* Badge */
.vivo-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--rojo);
    color: var(--blanco);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .05em;
    flex-shrink: 0;
}
.barra-vivo--programada .vivo-badge { background: #1d4ed8; }
.barra-vivo--inactiva   .vivo-badge { background: #6b7280; }

/* Punto: parpadea solo en EN VIVO */
.vivo-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--blanco);
    flex-shrink: 0;
}
.barra-vivo--activa .vivo-dot {
    animation: parpadeo 1.2s ease-in-out infinite;
}

@keyframes parpadeo {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.2; }
}

/* Botón deshabilitado */
.btn-vivo--disabled {
    opacity: .4;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(1);
}

.vivo-texto {
    flex: 1;
    font-size: .88rem;
    color: var(--gris-texto);
    font-weight: 600;
}

.vivo-acciones {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* ─────────────────────────────────────────────────────────────
   BOTONES GLOBALES
   ───────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: var(--radio);
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: background var(--transition), color var(--transition), transform var(--transition);
    text-decoration: none;
    white-space: nowrap;
}

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

.btn-vivo {
    background: var(--verde);
    color: var(--blanco);
}

.btn-vivo:hover {
    background: var(--verde-medio);
    color: var(--blanco);
}

.btn-pdf {
    background: var(--blanco);
    color: var(--verde);
    border: 1.5px solid var(--verde);
}

.btn-pdf:hover {
    background: var(--verde);
    color: var(--blanco);
}

.btn-descargar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--oro);
    color: var(--blanco);
    padding: 10px 20px;
    border-radius: var(--radio);
    font-weight: 700;
    font-size: .9rem;
    margin-top: 16px;
    transition: background var(--transition);
}

.btn-descargar:hover {
    background: var(--oro-claro);
    color: var(--blanco);
}

.btn-volver {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--verde);
    font-weight: 600;
    font-size: .9rem;
    padding: 8px 0;
    border-bottom: 2px solid transparent;
    transition: border-color var(--transition);
}

.btn-volver:hover {
    border-color: var(--verde);
    color: var(--verde);
}

/* ─────────────────────────────────────────────────────────────
   LAYOUT PRINCIPAL
   ───────────────────────────────────────────────────────────── */
.site-main {
    padding: 28px 0 40px;
}

.layout-principal {
    display: flex;
    gap: var(--gap);
    align-items: flex-start;
}

.col-principal {
    flex: 1;
    min-width: 0;
}

.col-sidebar {
    width: var(--sidebar-w);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ─────────────────────────────────────────────────────────────
   SECCIONES GENÉRICAS
   ───────────────────────────────────────────────────────────── */
.seccion {
    background: var(--blanco);
    border: 1px solid var(--border);
    border-radius: var(--radio-lg);
    padding: 24px;
    margin-bottom: 24px;
}

.seccion__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--verde-pale);
}

.seccion__titulo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.15rem;
    color: var(--verde);
}

.seccion__titulo i {
    font-size: 1.1em;
}

.seccion__ver-mas {
    font-size: .82rem;
    font-weight: 600;
    color: var(--oro);
    white-space: nowrap;
}

.seccion__ver-mas:hover {
    color: var(--verde);
}

.seccion-vacia {
    text-align: center;
    padding: 32px;
    color: var(--gris-muted);
}

.seccion-vacia i {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 8px;
}

/* ─────────────────────────────────────────────────────────────
   AGENDA DEL DÍA
   ───────────────────────────────────────────────────────────── */
.agenda-fecha {
    font-size: .8rem;
    color: var(--gris-muted);
    white-space: nowrap;
}

.agenda-lista {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.agenda-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--gris-bg);
    border-radius: var(--radio);
    padding: 10px 14px;
    border-left: 4px solid var(--oro);
    transition: border-color var(--transition), background var(--transition);
}

.agenda-item:hover {
    border-color: var(--verde);
    background: var(--verde-pale);
}

.agenda-hora {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: var(--verde);
    color: var(--blanco);
    padding: 6px 10px;
    border-radius: var(--radio);
    font-size: .78rem;
    font-weight: 700;
    min-width: 60px;
    text-align: center;
    flex-shrink: 0;
}

.agenda-hora i {
    font-size: .9rem;
}

.agenda-info {
    flex: 1;
}

.agenda-comision {
    display: block;
    font-weight: 700;
    font-size: .9rem;
    color: var(--negro);
}

.agenda-sala {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: .78rem;
    color: var(--gris-muted);
    margin-top: 2px;
}

.agenda-enlace {
    font-size: .8rem;
    font-weight: 600;
    color: var(--verde);
    white-space: nowrap;
    padding: 4px 8px;
    border: 1.5px solid var(--verde);
    border-radius: var(--radio);
    transition: background var(--transition), color var(--transition);
}

.agenda-enlace:hover {
    background: var(--verde);
    color: var(--blanco);
}

.agenda-vacia {
    text-align: center;
    padding: 24px;
    color: var(--gris-muted);
}

.agenda-vacia i {
    font-size: 2rem;
    display: block;
    margin-bottom: 8px;
}

/* ─────────────────────────────────────────────────────────────
   PROVINCIAS — Grid 4×2
   ───────────────────────────────────────────────────────────── */
.provincias-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-bottom: 14px;
}

/* Tarjeta clickeable */
.provincia-card {
    background: var(--gris-bg);
    border: 1.5px solid var(--border);
    border-radius: var(--radio);
    overflow: hidden;
    transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}

.provincia-card:hover {
    border-color: var(--verde);
    box-shadow: var(--sombra-lg);
    transform: translateY(-3px);
}

.provincia-card--especial {
    border-color: var(--oro);
    background: #fdf6e9;
}
.provincia-card--especial:hover {
    border-color: var(--oro-claro);
}

.provincia-card__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 12px 10px;
    text-decoration: none;
    color: inherit;
    height: 100%;
    position: relative;
}

.provincia-card__icono {
    width: 36px;
    height: 36px;
    background: var(--verde-pale);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--verde);
    font-size: 1.05rem;
    margin-bottom: 8px;
    transition: background var(--transition), color var(--transition);
}

.provincia-card--especial .provincia-card__icono {
    background: #fdecd0;
    color: var(--oro);
}

.provincia-card:hover .provincia-card__icono {
    background: var(--verde);
    color: var(--blanco);
}

.provincia-card--especial:hover .provincia-card__icono {
    background: var(--oro);
    color: var(--blanco);
}

.provincia-card__flecha {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--verde);
    color: var(--blanco);
    font-size: .7rem;
    margin-top: 8px;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity var(--transition), transform var(--transition);
}

.provincia-card--especial .provincia-card__flecha { background: var(--oro); }

.provincia-card:hover .provincia-card__flecha {
    opacity: 1;
    transform: translateX(0);
}

.provincia-nombre {
    font-family: var(--fuente-titulo);
    font-size: .82rem;
    color: var(--verde);
    margin-bottom: 3px;
    text-align: center;
    line-height: 1.3;
}

.provincia-card--especial .provincia-nombre { color: var(--oro); }

.provincia-sede {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: .72rem;
    color: var(--gris-muted);
}

.provincia-puntos {
    display: flex;
    justify-content: center;
    gap: 5px;
    flex-wrap: wrap;
}

/* Puntos de representantes */
.punto {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.punto--titular {
    background: var(--verde);
}

.punto--indigena {
    background: var(--oro);
    border: 1.5px solid var(--oro-claro);
}

/* Leyenda */
.provincias-leyenda {
    display: flex;
    gap: 20px;
    justify-content: flex-end;
    font-size: .78rem;
    color: var(--gris-muted);
}

.leyenda-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.leyenda-item .punto {
    width: 12px;
    height: 12px;
}

/* ─────────────────────────────────────────────────────────────
   COMISIONES — Grid 3×2
   ───────────────────────────────────────────────────────────── */
.comisiones-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.comision-card {
    background: var(--blanco);
    border: 1.5px solid var(--border);
    border-radius: var(--radio-lg);
    padding: 18px 16px;
    text-align: center;
    transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
    cursor: default;
}

.comision-card:hover {
    border-color: var(--comision-color, var(--verde));
    background: var(--verde-pale);
    box-shadow: 0 4px 16px rgba(26, 92, 42, .12);
}

.comision-icono {
    width: 52px;
    height: 52px;
    background: var(--verde-pale);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    font-size: 1.5rem;
    color: var(--comision-color, var(--verde));
    transition: background var(--transition);
}

.comision-card:hover .comision-icono {
    background: var(--comision-color, var(--verde));
    color: var(--blanco);
}

.comision-nombre {
    font-size: .9rem;
    font-weight: 700;
    color: var(--negro);
    margin-bottom: 8px;
}

.comision-descripcion {
    font-size: .8rem;
    color: var(--gris-muted);
    margin-bottom: 10px;
}

.comision-enlace {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--comision-color, var(--verde));
    transition: color var(--transition);
}

.comision-enlace:hover {
    color: var(--oro);
}

/* ─────────────────────────────────────────────────────────────
   NOTICIAS — Grid 3 columnas
   ───────────────────────────────────────────────────────────── */
.noticias-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.noticia-card {
    background: var(--blanco);
    border: 1px solid var(--border);
    border-radius: var(--radio-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--transition), transform var(--transition);
}

.noticia-card:hover {
    box-shadow: var(--sombra-lg);
    transform: translateY(-3px);
}

.noticia-imagen {
    position: relative;
    height: 170px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--verde) 0%, var(--verde-medio) 100%);
}

.noticia-imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.noticia-card:hover .noticia-imagen img {
    transform: scale(1.04);
}

.noticia-imagen-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, .5);
    font-size: 3rem;
}

.noticia-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--oro);
    color: var(--blanco);
    font-size: .7rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: .04em;
    z-index: 1;
}

.noticia-tag:hover {
    background: var(--verde);
    color: var(--blanco);
}

.noticia-contenido {
    padding: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.noticia-fecha {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .75rem;
    color: var(--gris-muted);
}

.noticia-tipo {
    font-size: .72rem;
    font-weight: 700;
    color: var(--verde);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.noticia-titulo {
    font-size: .95rem;
    line-height: 1.4;
    flex: 1;
}

.noticia-titulo a {
    color: var(--negro);
}

.noticia-titulo a:hover {
    color: var(--verde);
}

.noticia-enlace {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--verde);
    margin-top: auto;
}

.noticia-enlace:hover {
    color: var(--oro);
}

/* ─────────────────────────────────────────────────────────────
   SIDEBAR — WIDGETS
   ───────────────────────────────────────────────────────────── */
.widget-leyes,
.widget-cifras,
.widget-facebook {
    background: var(--blanco);
    border: 1px solid var(--border);
    border-radius: var(--radio-lg);
    overflow: hidden;
}

.widget-titulo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .95rem;
    color: var(--verde);
    padding: 14px 16px;
    border-bottom: 2px solid var(--verde-pale);
    background: var(--gris-bg);
}

/* Leyes */
.leyes-lista {
    padding: 8px 0;
}

.ley-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    transition: background var(--transition);
}

.ley-item:last-child {
    border-bottom: none;
}

.ley-item:hover {
    background: var(--verde-pale);
}

.ley-icono {
    width: 34px;
    height: 34px;
    background: var(--verde-pale);
    border-radius: var(--radio);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--verde);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.ley-info {
    flex: 1;
}

.ley-numero {
    display: block;
    font-size: .7rem;
    font-weight: 700;
    color: var(--verde);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.ley-nombre {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    color: var(--negro);
    line-height: 1.4;
}

a.ley-nombre:hover {
    color: var(--verde);
}

.ley-fecha {
    display: block;
    font-size: .72rem;
    color: var(--gris-muted);
    margin-top: 2px;
}

.ley-descargar {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--oro);
    color: var(--blanco);
    border-radius: var(--radio);
    font-size: 1rem;
    flex-shrink: 0;
    transition: background var(--transition);
}

.ley-descargar:hover {
    background: var(--verde);
    color: var(--blanco);
}

.widget-ver-mas {
    display: block;
    text-align: center;
    padding: 10px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--verde);
    border-top: 1px solid var(--border);
    transition: background var(--transition);
}

.widget-ver-mas:hover {
    background: var(--verde-pale);
    color: var(--verde);
}

.widget-vacio {
    padding: 16px;
    text-align: center;
    font-size: .85rem;
    color: var(--gris-muted);
}

/* Cifras */
.cifras-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.cifra-item {
    text-align: center;
    padding: 18px 12px;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.cifra-item:nth-child(even) {
    border-right: none;
}

.cifra-item:nth-child(3),
.cifra-item:nth-child(4) {
    border-bottom: none;
}

.cifra-item--verde {
    background: var(--verde-pale);
}

.cifra-item--dorado {
    background: #fdf6e9;
}

.cifra-numero {
    display: block;
    font-family: var(--fuente-titulo);
    font-size: 2rem;
    font-weight: 700;
    color: var(--verde);
    line-height: 1;
}

.cifra-item--dorado .cifra-numero {
    color: var(--oro);
}

.cifra-etiqueta {
    display: block;
    font-size: .75rem;
    color: var(--gris-muted);
    margin-top: 4px;
    font-weight: 600;
}

/* Facebook Feed */
.fb-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: var(--fb);
    color: var(--blanco);
}

.fb-header__info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fb-avatar {
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, .2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.fb-meta {
    display: flex;
    flex-direction: column;
}

.fb-nombre {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .88rem;
    color: var(--blanco);
}

.fb-verificado {
    font-size: .9rem;
    color: #64b5f6;
}

.fb-subtitulo {
    font-size: .7rem;
    color: rgba(255, 255, 255, .7);
}

.fb-seguir {
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, .15);
    color: var(--blanco);
    border: 1.5px solid rgba(255, 255, 255, .4);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: .78rem;
    font-weight: 600;
    transition: background var(--transition);
}

.fb-seguir:hover {
    background: rgba(255, 255, 255, .25);
    color: var(--blanco);
}

.fb-posts-lista {
    padding: 0 0 4px;
}

.fb-post-item {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
}

.fb-post-item:last-child {
    border-bottom: none;
}

.fb-post-avatar {
    width: 32px;
    height: 32px;
    background: var(--fb);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--blanco);
    font-size: 1rem;
    flex-shrink: 0;
}

.fb-post-body {
    flex: 1;
}

.fb-post-meta {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
}

.fb-post-meta strong {
    font-size: .82rem;
    color: var(--negro);
}

.fb-post-fecha {
    font-size: .7rem;
    color: var(--gris-muted);
}

.fb-post-texto {
    font-size: .8rem;
    color: var(--gris-texto);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 6px;
}

.fb-post-stats {
    display: flex;
    gap: 14px;
    font-size: .72rem;
    color: var(--gris-muted);
}

.fb-post-stats span {
    display: flex;
    align-items: center;
    gap: 3px;
}

.fb-post-stats i {
    font-size: .85rem;
}

.fb-ver-mas {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    background: var(--fb);
    color: var(--blanco);
    font-size: .8rem;
    font-weight: 600;
    border-top: 1px solid var(--border);
    transition: background var(--transition);
}

.fb-ver-mas:hover {
    background: #1565c0;
    color: var(--blanco);
}

/* ─────────────────────────────────────────────────────────────
   FOOTER
   ───────────────────────────────────────────────────────────── */
.footer-contacto {
    background: var(--verde);
    color: var(--blanco);
    padding: 44px 0 32px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 32px;
}

.footer-col__titulo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--fuente-titulo);
    font-size: 1rem;
    color: var(--oro-claro);
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, .15);
}

/* Redes sociales */
.footer-logo-area {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.footer-logo-placeholder svg {
    border: 2px solid var(--oro);
    border-radius: 50%;
}

.footer-logo-texto {
    display: flex;
    flex-direction: column;
}

.footer-logo-texto strong {
    font-size: .9rem;
    color: var(--blanco);
}

.footer-logo-texto span {
    font-size: .75rem;
    color: rgba(255, 255, 255, .7);
}

.redes-lista {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.red-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: var(--radio);
    background: rgba(255, 255, 255, .07);
    transition: background var(--transition);
    color: var(--blanco);
}

.red-item:hover {
    background: rgba(255, 255, 255, .15);
    color: var(--blanco);
}

.red-icono {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, .12);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.red-info {
    display: flex;
    flex-direction: column;
}

.red-info strong {
    font-size: .85rem;
}

.red-info small {
    font-size: .72rem;
    color: rgba(255, 255, 255, .65);
}

/* Mapa */
.mapa-contenedor {
    border-radius: var(--radio);
    overflow: hidden;
    margin-bottom: 14px;
    border: 2px solid rgba(255, 255, 255, .2);
}

.mapa-contenedor iframe {
    display: block;
}

.horario-titulo {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .85rem;
    color: var(--oro-claro);
    margin-bottom: 4px;
}

.horario-texto {
    font-size: .82rem;
    color: rgba(255, 255, 255, .8);
    line-height: 1.6;
}

/* Formulario de contacto */
.asamblea-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.form-grupo {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-grupo label {
    font-size: .8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .85);
}

.form-control {
    width: 100%;
    padding: 8px 12px;
    background: rgba(255, 255, 255, .1);
    border: 1.5px solid rgba(255, 255, 255, .25);
    border-radius: var(--radio);
    color: var(--blanco);
    font-size: .85rem;
    font-family: var(--fuente-cuerpo);
    transition: border-color var(--transition), background var(--transition);
}

.form-control::placeholder {
    color: rgba(255, 255, 255, .45);
}

.form-control:focus {
    outline: none;
    border-color: var(--oro-claro);
    background: rgba(255, 255, 255, .15);
}

.form-control option {
    color: var(--gris-texto);
    background: var(--blanco);
}

.form-error {
    font-size: .72rem;
    color: #fca5a5;
    min-height: 16px;
}

.btn-enviar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px;
    background: var(--oro);
    color: var(--blanco);
    border: none;
    border-radius: var(--radio);
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--transition);
}

.btn-enviar:hover {
    background: var(--oro-claro);
}

.btn-enviar:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.form-resultado {
    padding: 10px 14px;
    border-radius: var(--radio);
    font-size: .85rem;
    font-weight: 600;
}

.form-resultado.exito {
    background: rgba(34, 197, 94, .2);
    color: #86efac;
}

.form-resultado.error {
    background: rgba(239, 68, 68, .2);
    color: #fca5a5;
}

/* Datos de contacto en footer */
.contacto-datos {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.contacto-dato {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: .82rem;
    color: rgba(255, 255, 255, .8);
}

.contacto-dato i {
    font-size: 1rem;
    color: var(--oro-claro);
    flex-shrink: 0;
    margin-top: 2px;
}

.contacto-dato a {
    color: rgba(255, 255, 255, .8);
}

.contacto-dato a:hover {
    color: var(--oro-claro);
}

.contacto-dato address {
    font-style: normal;
}

/* Pie del footer */
.footer-pie {
    background: #0e3a19;
    padding: 14px 0;
}

.footer-pie__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.footer-nav__lista {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.footer-nav__lista li a {
    font-size: .75rem;
    color: rgba(255, 255, 255, .65);
    padding: 4px 8px;
    border-radius: 3px;
    transition: color var(--transition), background var(--transition);
}

.footer-nav__lista li a:hover {
    color: var(--blanco);
    background: rgba(255, 255, 255, .1);
}

.footer-copyright {
    font-size: .75rem;
    color: rgba(255, 255, 255, .5);
}

/* ─────────────────────────────────────────────────────────────
   PÁGINAS INTERIORES
   ───────────────────────────────────────────────────────────── */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .8rem;
    color: var(--gris-muted);
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.breadcrumb a {
    color: var(--verde);
}

.breadcrumb a:hover {
    color: var(--oro);
}

.breadcrumb .current {
    color: var(--gris-texto);
}

.pagina-interior,
.entrada-single,
.ley-single,
.comision-single {
    background: var(--blanco);
    border: 1px solid var(--border);
    border-radius: var(--radio-lg);
    padding: 32px;
    margin-bottom: 24px;
}

.pagina-header,
.entrada-header,
.ley-header,
.comision-header {
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--verde-pale);
}

.pagina-titulo,
.archivo-titulo {
    font-size: 1.8rem;
    color: var(--verde);
    margin-bottom: 8px;
}

.pagina-institucional {
    background: var(--blanco);
    border: 1px solid var(--border);
    border-radius: var(--radio-lg);
    padding: 32px;
}

.pagina-institucional__icono {
    width: 70px;
    height: 70px;
    background: var(--verde-pale);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--verde);
    margin-bottom: 20px;
}

.pagina-contenido {
    line-height: 1.75;
}

.pagina-contenido h2 {
    font-size: 1.3rem;
    color: var(--verde);
    margin: 24px 0 10px;
}

.pagina-contenido h3 {
    font-size: 1.1rem;
    margin: 18px 0 8px;
}

.pagina-contenido p {
    margin-bottom: 14px;
}

.pagina-contenido ul,
.pagina-contenido ol {
    padding-left: 20px;
    margin-bottom: 14px;
    list-style: disc;
}

.pagina-contenido li {
    margin-bottom: 6px;
}

.pagina-contenido a {
    color: var(--verde);
    text-decoration: underline;
}

/* Ley */
.ley-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--verde-pale);
    color: var(--verde);
    font-size: .78rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 10px;
}

.ley-numero-grande {
    font-family: var(--fuente-titulo);
    font-size: 1.3rem;
    color: var(--oro);
    font-weight: 700;
    margin-bottom: 4px;
}

.ley-nombre-largo {
    font-size: .95rem;
    color: var(--gris-muted);
    margin-bottom: 10px;
}

.ley-meta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: .82rem;
    color: var(--gris-muted);
    margin-top: 8px;
}

.ley-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Comisión single */
.comision-icono-grande {
    width: 80px;
    height: 80px;
    background: var(--verde-pale);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    color: var(--comision-color, var(--verde));
    margin-bottom: 16px;
}

.comision-proyectos {
    margin-top: 28px;
}

.comision-proyectos h2 {
    font-size: 1.2rem;
    color: var(--verde);
    margin-bottom: 14px;
}

/* Organigrama */
.organigrama-imagen {
    margin-bottom: 24px;
    border: 1px solid var(--border);
    border-radius: var(--radio);
    overflow: hidden;
}

.organigrama-img {
    width: 100%;
    height: auto;
}

/* Entrada blog */
.entrada-meta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: .82rem;
    color: var(--gris-muted);
    margin-top: 8px;
}

.entrada-meta span,
.entrada-meta time {
    display: flex;
    align-items: center;
    gap: 5px;
}

.entrada-imagen {
    margin-bottom: 24px;
    border-radius: var(--radio-lg);
    overflow: hidden;
}

.entrada-imagen img {
    width: 100%;
    height: 360px;
    object-fit: cover;
}

.entrada-footer {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

/* ─────────────────────────────────────────────────────────────
   404
   ───────────────────────────────────────────────────────────── */
.pagina-404 {
    text-align: center;
    padding: 60px 20px;
    background: var(--blanco);
    border-radius: var(--radio-lg);
    border: 1px solid var(--border);
}

.error-icono {
    font-size: 4rem;
    color: var(--border);
    margin-bottom: 8px;
}

.error-titulo {
    font-size: 5rem;
    color: var(--verde);
    font-weight: 700;
    line-height: 1;
}

.error-subtitulo {
    font-size: 1.5rem;
    color: var(--gris-texto);
    margin-bottom: 16px;
}

.error-texto {
    color: var(--gris-muted);
    max-width: 480px;
    margin: 0 auto 24px;
}

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

/* Paginación */
.nav-links {
    display: flex;
    gap: 6px;
    margin-top: 28px;
    flex-wrap: wrap;
}

.nav-links a,
.nav-links span {
    padding: 6px 12px;
    border: 1.5px solid var(--border);
    border-radius: var(--radio);
    font-size: .85rem;
    color: var(--gris-texto);
    transition: background var(--transition), border-color var(--transition);
}

.nav-links a:hover {
    background: var(--verde-pale);
    border-color: var(--verde);
    color: var(--verde);
}

.nav-links .current {
    background: var(--verde);
    color: var(--blanco);
    border-color: var(--verde);
}

/* ─────────────────────────────────────────────────────────────
   RESPONSIVE — 1024px
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    :root {
        --sidebar-w: 240px;
    }

    .nav-wrapper .container {
        height: auto;
        padding: 10px 20px;
        flex-wrap: wrap;
    }

    .site-branding {
        flex: 1;
    }

    .menu-toggle {
        display: flex;
    }

    .site-nav {
        width: 100%;
        order: 3;
        display: none;
    }

    .site-nav.nav-abierta {
        display: block;
    }

    .nav-list {
        flex-direction: column;
        align-items: stretch;
        background: var(--verde-medio);
        border-top: 1px solid rgba(255, 255, 255, .1);
        padding: 8px 0;
        gap: 0;
    }

    .nav-list .menu-item>a {
        padding: 10px 16px;
        border-radius: 0;
    }

    .nav-list .sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        border: none;
        border-top: none;
        border-left: 3px solid var(--oro);
        border-radius: 0;
        box-shadow: none;
        background: rgba(0, 0, 0, .15);
        display: none;
    }

    .nav-list .submenu-abierto>.sub-menu {
        display: block;
    }

    .nav-list .sub-menu .menu-item a {
        color: rgba(255, 255, 255, .85);
        border-bottom-color: rgba(255, 255, 255, .1);
        padding-left: 28px;
    }

    .nav-list .sub-menu .menu-item a:hover {
        background: rgba(255, 255, 255, .1);
        color: var(--blanco);
    }

    .provincias-grid {
        grid-template-columns: repeat(5, 1fr);
    }

    .comisiones-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .noticias-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    .footer-col--formulario {
        grid-column: 1 / -1;
    }
}

/* ─────────────────────────────────────────────────────────────
   RESPONSIVE — 768px (móvil)
   ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    :root {
        --sidebar-w: 100%;
    }

    .site-name {
        font-size: .88rem;
    }

    .site-subtitle {
        display: none;
    }

    .barra-vivo__inner {
        flex-wrap: wrap;
        gap: 10px;
    }

    .vivo-texto {
        width: 100%;
        order: 2;
    }

    .vivo-acciones {
        width: 100%;
        order: 3;
        justify-content: flex-start;
    }

    .layout-principal {
        flex-direction: column;
    }

    .col-sidebar {
        width: 100%;
    }

    .provincias-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .comisiones-grid {
        grid-template-columns: 1fr 1fr;
    }

    .noticias-grid {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-pie__inner {
        flex-direction: column;
        text-align: center;
    }

    .footer-nav__lista {
        justify-content: center;
    }

    .pagina-interior,
    .entrada-single,
    .ley-single,
    .comision-single {
        padding: 20px 16px;
    }

    .pagina-titulo {
        font-size: 1.4rem;
    }

    .error-titulo {
        font-size: 3.5rem;
    }
}

/* ─────────────────────────────────────────────────────────────
   ALDB ÍTEM — página individual en mantenimiento
   ───────────────────────────────────────────────────────────── */
.aldb-item-pagina { padding: 32px; }

.aldb-item-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--verde-pale);
}

.aldb-item-badge {
    width: 56px;
    height: 56px;
    background: var(--verde-pale);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--verde);
    margin-bottom: 4px;
}

.aldb-item-subtitulo {
    font-size: .85rem;
    color: var(--gris-muted);
}

/* Bloque de mantenimiento */
.aldb-mantenimiento {
    display: flex;
    gap: 36px;
    align-items: center;
    background: var(--gris-bg);
    border: 1.5px dashed var(--border);
    border-radius: var(--radio-lg);
    padding: 36px 32px;
}

.aldb-mant-ilustracion {
    flex-shrink: 0;
}

.aldb-mant-ilustracion svg {
    width: 260px;
    height: auto;
    border-radius: var(--radio);
}

.aldb-mant-texto { flex: 1; }

.aldb-mant-texto h2 {
    font-size: 1.4rem;
    color: var(--verde);
    margin-bottom: 12px;
}

.aldb-mant-texto p {
    font-size: .95rem;
    color: var(--gris-texto);
    line-height: 1.7;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .aldb-mantenimiento {
        flex-direction: column;
        padding: 24px 16px;
        text-align: center;
    }
    .aldb-mant-ilustracion svg { width: 200px; }
    .aldb-item-header { align-items: center; }
}

/* ─────────────────────────────────────────────────────────────
   CARRUSEL HERO
   ───────────────────────────────────────────────────────────── */
.hero-carousel {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
    background: var(--verde);
    user-select: none;
}

/* Barra de progreso superior */
.hc-progreso {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, .2);
    z-index: 20;
}

.hc-progreso__barra {
    height: 100%;
    background: var(--oro);
    width: 0%;
    transition: width linear;
    box-shadow: 0 0 8px var(--oro);
}

/* Track y slides */
.hc-track {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hc-slide {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.hc-slide--activo {
    opacity: 1;
    z-index: 2;
    pointer-events: none; /* nunca bloquea clics sobre flechas */
}

/* Overlay degradado */
.hc-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(0, 0, 0, .75) 0%,
        rgba(0, 0, 0, .45) 45%,
        rgba(0, 0, 0, .1)  75%,
        transparent        100%
    );
    z-index: 1;
}

/* Decoración lateral derecha */
.hc-deco {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 35%;
    background: linear-gradient(
        to left,
        rgba(26, 92, 42, .35) 0%,
        transparent 100%
    );
    z-index: 1;
}

/* Contenido del slide */
.hc-contenido-wrap {
    position: relative;
    z-index: 5;
    height: 100%;
    display: flex;
    align-items: center;
}

.hc-contenido {
    max-width: 580px;
    padding: 20px 0;
    animation: hcEntrada 0.7s ease both;
}

@keyframes hcEntrada {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
}

.hc-slide:not(.hc-slide--activo) .hc-contenido {
    animation: none;
}

/* Tag institucional */
.hc-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--oro);
    color: var(--blanco);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 5px 12px;
    border-radius: 3px;
    margin-bottom: 16px;
}

/* Título */
.hc-titulo {
    font-family: var(--fuente-titulo);
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--blanco);
    line-height: 1.2;
    margin-bottom: 14px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .4);
}

/* Subtítulo */
.hc-subtitulo {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, .88);
    line-height: 1.6;
    margin-bottom: 28px;
    max-width: 480px;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .3);
}

/* Botones */
.hc-acciones {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.hc-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    border-radius: var(--radio);
    font-size: .9rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
    white-space: nowrap;
}

.hc-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
}

.hc-btn--primario {
    background: var(--oro);
    color: var(--blanco);
}

.hc-btn--primario:hover {
    background: var(--oro-claro);
    color: var(--blanco);
}

.hc-btn--secundario {
    background: rgba(255, 255, 255, .15);
    color: var(--blanco);
    border: 1.5px solid rgba(255, 255, 255, .5);
    backdrop-filter: blur(4px);
}

.hc-btn--secundario:hover {
    background: rgba(255, 255, 255, .25);
    color: var(--blanco);
}

/* Numeración decorativa */
.hc-numeracion {
    position: absolute;
    bottom: 28px;
    right: 32px;
    z-index: 6;
    display: flex;
    align-items: baseline;
    gap: 4px;
    color: rgba(255, 255, 255, .5);
    font-family: var(--fuente-titulo);
    font-size: .8rem;
    letter-spacing: .04em;
}

.hc-num-actual {
    font-size: 2.2rem;
    font-weight: 700;
    color: rgba(255, 255, 255, .7);
    line-height: 1;
}

/* Flechas */
.hc-flecha {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 30;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    border: 1.5px solid rgba(255, 255, 255, .3);
    color: var(--blanco);
    font-size: 1.3rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.2s, border-color 0.2s;
    backdrop-filter: blur(4px);
}

.hc-flecha:hover {
    background: var(--oro);
    border-color: var(--oro);
    transform: translateY(-50%) scale(1.08);
}

.hc-flecha--prev { left: 20px; }
.hc-flecha--next { right: 20px; }

/* Dots indicadores */
.hc-dots {
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
    display: flex;
    gap: 8px;
    align-items: center;
}

.hc-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .4);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background 0.25s, width 0.25s, border-radius 0.25s;
}

.hc-dot--activo {
    background: var(--oro);
    width: 24px;
    border-radius: 4px;
}

/* Botón pausar */
.hc-pausar {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 30;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .3);
    border: 1px solid rgba(255, 255, 255, .2);
    color: rgba(255, 255, 255, .7);
    font-size: .95rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    backdrop-filter: blur(4px);
}

.hc-pausar:hover { background: rgba(0, 0, 0, .55); color: var(--blanco); }

/* ── Responsive carrusel ── */
@media (max-width: 1024px) {
    .hero-carousel { height: 420px; }
    .hc-titulo { font-size: 2rem; }
}

@media (max-width: 768px) {
    .hero-carousel { height: 360px; }

    .hc-overlay {
        background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, .3) 0%,
            rgba(0, 0, 0, .75) 100%
        );
    }

    .hc-deco { display: none; }

    .hc-contenido-wrap { align-items: flex-end; padding-bottom: 60px; }
    .hc-contenido { max-width: 100%; }
    .hc-titulo { font-size: 1.5rem; }
    .hc-subtitulo { font-size: .9rem; display: none; }
    .hc-btn--secundario { display: none; }

    .hc-flecha { width: 38px; height: 38px; font-size: 1rem; }
    .hc-flecha--prev { left: 10px; }
    .hc-flecha--next { right: 10px; }

    .hc-numeracion { display: none; }
}