/* ============================================================
   SITIO WEB CANDIDATO ASTOCAZA - ESTILOS 2026
   Alianza para el Progreso - Azul + Rojo + Blanco
   Inspirado en carloszegarra.pe
   Creado por FIBERYA E.I.R.L.
   ============================================================ */

/* :root variables dinamicas desde PHP */
:root {
    --azul: #0033A0;            /* Azul vibrante APP */
    --azul-oscuro: #001F5C;     /* Azul mas profundo */
    --azul-claro: #1E5BC6;      /* Azul claro para hover */
    --azul-suave: #E8F0FF;      /* Azul casi blanco */
    --rojo: #E30613;            /* Rojo vibrante APP */
    --rojo-oscuro: #B0000E;
    --rojo-claro: #FF3D4D;
    --blanco: #FFFFFF;
    --amarillo: #FFD100;        /* Acento dorado para esperanza */
    --gris-fondo: #F4F6FB;
    --gris-borde: #E1E6F0;
    --gris-texto: #4A5568;
    --negro: #0A1428;
    --color-primario: #0033A0;
    --color-secundario: #1E5BC6;
    --color-acento: #E30613;
    --color-fondo: #FFFFFF;
    --color-texto: #0A1428;
    --fuente-titulos: 'Playfair Display', 'Times New Roman', serif;
    --fuente-cuerpo: 'Montserrat', -apple-system, sans-serif;
    --sombra-suave: 0 4px 20px rgba(0, 51, 160, 0.08);
    --sombra-media: 0 10px 40px rgba(0, 51, 160, 0.12);
    --sombra-fuerte: 0 20px 60px rgba(0, 31, 92, 0.18);
    --transicion: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    --radio: 12px;
    --radio-grande: 24px;
}

/* ============ RESET ============ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

body {
    font-family: var(--fuente-cuerpo);
    color: var(--color-texto);
    background: var(--color-fondo);
    line-height: 1.65;
    font-size: 16px;
    overflow-x: hidden;
}

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

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

a:hover {
    color: var(--rojo);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--fuente-titulos);
    color: var(--azul-oscuro);
    font-weight: 700;
    line-height: 1.2;
}

.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

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

/* ============ TOP BAR ============ */
/* Barra superior refinada: email + teléfono + dirección a la izquierda,
   redes sociales (FB, TikTok, IG, YT) a la derecha siempre visibles */
.topbar {
    background: linear-gradient(90deg, var(--azul-oscuro) 0%, var(--azul) 100%);
    color: var(--blanco);
    padding: 9px 0;
    font-size: 13px;
    border-bottom: 3px solid var(--rojo);
    position: relative;
    z-index: 1001;
}

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

.topbar-info {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
}

.topbar-info span,
.topbar-info a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: rgba(255, 255, 255, 0.92);
    text-decoration: none;
    transition: var(--transicion);
    letter-spacing: 0.2px;
}

.topbar-info a:hover {
    color: var(--amarillo);
}

.topbar-info i {
    color: var(--amarillo);
    font-size: 12px;
}

.topbar-divider {
    color: rgba(255, 255, 255, 0.25);
    font-weight: 300;
}

.topbar-redes {
    display: flex;
    gap: 6px;
}

.topbar-redes a {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: var(--blanco);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: var(--transicion);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.topbar-redes a:hover {
    background: var(--rojo);
    border-color: var(--rojo);
    color: var(--blanco);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(227, 6, 19, 0.45);
}

/* ============ HEADER ============ */
.site-header {
    background: var(--blanco);
    padding: 14px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: var(--sombra-suave);
    border-bottom: 1px solid var(--gris-borde);
}

.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.logo-area {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

.logo-area img,
.logo-area .site-logo-img {
    height: 56px;
    width: auto;
    max-width: 240px;
    object-fit: contain;
    transition: opacity 0.2s ease;
}
.logo-area:hover .site-logo-img {
    opacity: 0.92;
}

/* Fallback si la imagen del logo no carga */
.logo-area .site-logo-fallback {
    display: none;
    align-items: center;
    height: 56px;
    color: #0033A0;
    font-family: 'Playfair Display', serif;
    font-weight: 800;
    font-size: 28px;
    letter-spacing: 1px;
    text-decoration: none;
}

.logo-text {
    display: none;
}

/* ============ NAVEGACION ============ */
nav {
    display: flex;
    align-items: center;
}

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

.nav-menu li {
    position: relative;
    margin: 0;
}

.nav-menu a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 18px;
    color: var(--azul-oscuro);
    font-weight: 600;
    font-size: 14.5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 8px;
    transition: var(--transicion);
    position: relative;
}

.nav-menu a i {
    font-size: 13px;
    color: var(--rojo);
    transition: transform 0.35s ease;
}

.nav-menu a:hover i {
    transform: scale(1.15);
}

.nav-menu a:hover,
.nav-menu a.active {
    color: var(--azul);
    background: var(--azul-suave);
}

/* Subrayado animado elegante bajo cada item del menú */
.nav-menu a::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--rojo), var(--amarillo));
    border-radius: 2px;
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1), left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-menu a:hover::after,
.nav-menu a.active::after {
    width: calc(100% - 36px);
    left: 18px;
}

/* Boton hamburger */
.menu-toggle {
    display: none;
    background: var(--azul);
    border: none;
    color: var(--blanco);
    width: 44px;
    height: 44px;
    border-radius: 8px;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0;
}

.menu-toggle span {
    display: block;
    width: 22px;
    height: 2.5px;
    background: var(--blanco);
    border-radius: 2px;
    transition: var(--transicion);
}

.menu-toggle.active span:nth-child(1) {
    transform: translateY(7.5px) rotate(45deg);
}

.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
    transform: translateY(-7.5px) rotate(-45deg);
}

/* ============ HERO SLIDER ============ */
/* ESTRATEGIA DEFINITIVA:
   - Desktop (>=992px): altura FIJA de 550px, exactamente como pide el usuario.
   - Tablet/Móvil (<992px): aspect-ratio 1920/550 (responsive, sin deformar).
   - background-size: cover => NUNCA deforma la imagen. Solo recorta mínimamente
     los bordes si la proporción no coincide exactamente. Esto es lo estándar
     para hero banners y resuelve el problema de "se deforma todo". */
.hero-slider {
    position: relative;
    width: 100%;
    /* 550px FIJO en desktop. El media query de abajo lo cambia a responsive en móvil. */
    height: 550px;
    overflow: hidden;
    /* Fondo blanco: si la imagen no carga o tarda, no se ve azul */
    background: var(--blanco);
    margin: 0;
    border: 0;
    box-shadow: none;
    outline: none;
    /* CRÍTICO: anular el padding global de `section { padding: 80px 0; }`.
       Sin esto, el slider pierde 160px de altura visible (80 arriba + 80 abajo)
       y aparecen espacios blancos que el usuario reportó como "muy chico". */
    padding: 0 !important;
}

.slider-track {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Cuando el slide es un enlace, lo mostramos como bloque clickeable completo */
a.slider-slide {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    /* Permite swipe horizontal (nuestro JS) sin bloquear scroll vertical de la página */
    touch-action: pan-y;
}

.slider-slide {
    position: absolute;
    inset: 0;
    /* COVER: la imagen CUBRE todo el contenedor manteniendo su proporción.
       NUNCA deforma. Si la proporción del contenedor no coincide con la de la
       imagen, recorta los bordes (centro siempre visible). Es el estándar
       para sliders profesionales. */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

.slider-slide.active {
    opacity: 1;
}

.slider-overlay {
    /* Overlay completamente eliminado: la imagen se ve 100% nítida,
       tal cual es, sin ninguna capa encima.
       El elemento se conserva vacío para no romper el HTML/JS existente. */
    display: none;
}

.slider-content {
    position: relative;
    z-index: 2;
    width: 100%;
    color: var(--blanco);
    padding: 40px 0;
    pointer-events: auto;
}

/* Si el slide NO es enlace, desactivamos cursor pointer */
.slider-slide:not(a) .slider-content {
    cursor: default;
}

/* Slider minimalista: SOLO título + 1 línea de descripción */
.slider-eyebrow {
    display: none !important;
}

.btn-slider {
    display: none !important;
}

/* Línea decorativa roja sobre el título */
.slider-title::before {
    content: '';
    display: block;
    width: 56px;
    height: 4px;
    background: var(--rojo);
    margin-bottom: 22px;
    border-radius: 2px;
    box-shadow: 0 2px 12px rgba(227, 6, 19, 0.45);
}

.slider-title {
    font-family: var(--fuente-titulos);
    font-size: 52px;
    font-weight: 800;
    color: var(--blanco);
    line-height: 1.1;
    margin: 0 0 16px 0;
    max-width: 720px;
    /* Sombra de texto MINIMA: solo para legibilidad, casi imperceptible.
       Sin esto, el texto blanco se perdería sobre fondos claros de la imagen. */
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
    letter-spacing: -0.6px;
}

.slider-subtitle {
    font-size: 19px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.96);
    max-width: 580px;
    margin: 0;
    line-height: 1.55;
    /* Sombra MINIMA solo para legibilidad */
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
    font-family: 'Montserrat', sans-serif;
}

.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    /* Botón suave y elegante: vidrio esmerilado muy sutil */
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: var(--blanco);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    z-index: 6;
    transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 4px 18px rgba(0, 0, 0, 0.18),
        0 1px 4px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
    opacity: 0.82;
}

.slider-arrow:hover {
    background: rgba(255, 255, 255, 0.28);
    border-color: rgba(255, 255, 255, 0.55);
    transform: translateY(-50%) scale(1.06);
    box-shadow:
        0 8px 26px rgba(0, 0, 0, 0.26),
        0 2px 8px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
    opacity: 1;
}

.slider-arrow:active {
    transform: translateY(-50%) scale(0.98);
}

.slider-arrow.prev { left: 28px; }
.slider-arrow.next { right: 28px; }

.slider-dots {
    position: absolute;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 6;
}

.slider-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.35);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

.slider-dot:hover {
    background: rgba(255, 255, 255, 0.7);
}

.slider-dot.active {
    background: var(--amarillo);
    border-color: rgba(255, 209, 0, 0.9);
    width: 34px;
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(255, 209, 0, 0.5);
}

/* ============ SECCIONES GENERICAS ============ */
section {
    padding: 80px 0;
    position: relative;
}

.bg-claro {
    background: var(--gris-fondo);
}

.bg-azul {
    background: linear-gradient(135deg, var(--azul-oscuro) 0%, var(--azul) 100%);
    color: var(--blanco);
}

.bg-azul h2,
.bg-azul h3 {
    color: var(--blanco);
}

.seccion-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 50px;
}

.etiqueta {
    display: inline-block;
    background: var(--azul-suave);
    color: var(--azul);
    padding: 6px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 16px;
    border-left: 3px solid var(--rojo);
}

.bg-azul .etiqueta {
    background: rgba(255, 255, 255, 0.15);
    color: var(--amarillo);
    border-left-color: var(--amarillo);
}

.seccion-header h2 {
    font-size: 40px;
    font-weight: 800;
    margin-bottom: 16px;
    color: var(--azul-oscuro);
}

.bg-azul .seccion-header h2 {
    color: var(--blanco);
}

.seccion-header p {
    color: var(--gris-texto);
    font-size: 17px;
    line-height: 1.6;
}

.bg-azul .seccion-header p {
    color: rgba(255, 255, 255, 0.9);
}

/* ============ BOTONES ============ */
.btn-principal,
.btn-blanco,
.btn-rojo,
.btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    border: none;
    transition: var(--transicion);
    text-decoration: none;
}

.btn-principal {
    background: linear-gradient(135deg, var(--azul) 0%, var(--azul-oscuro) 100%);
    color: var(--blanco);
    box-shadow: 0 8px 25px rgba(0, 51, 160, 0.35);
}

.btn-principal:hover {
    background: linear-gradient(135deg, var(--rojo) 0%, var(--rojo-oscuro) 100%);
    color: var(--blanco);
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(227, 6, 19, 0.4);
}

.btn-rojo {
    background: linear-gradient(135deg, var(--rojo) 0%, var(--rojo-oscuro) 100%);
    color: var(--blanco);
    box-shadow: 0 8px 25px rgba(227, 6, 19, 0.35);
}

.btn-rojo:hover {
    background: var(--azul);
    transform: translateY(-3px);
    color: var(--blanco);
}

.btn-blanco {
    background: var(--blanco);
    color: var(--azul);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.btn-blanco:hover {
    background: var(--amarillo);
    color: var(--azul-oscuro);
    transform: translateY(-3px);
}

.btn-outline {
    background: transparent;
    color: var(--azul);
    border: 2px solid var(--azul);
}

.btn-outline:hover {
    background: var(--azul);
    color: var(--blanco);
}

/* ============ PRESENTACION CANDIDATO ============ */
.seccion-presentacion {
    padding: 80px 0;
    background: var(--blanco);
    position: relative;
    overflow: hidden;
}

.seccion-presentacion::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 400px;
    height: 400px;
    background: var(--azul-suave);
    border-radius: 50%;
    opacity: 0.4;
    z-index: 0;
}

.presentacion-grid {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.presentacion-foto {
    position: relative;
}

.presentacion-foto::before {
    content: '';
    position: absolute;
    top: -15px;
    left: -15px;
    right: 15px;
    bottom: 15px;
    background: linear-gradient(135deg, var(--rojo), var(--amarillo));
    border-radius: var(--radio-grande);
    z-index: 0;
}

.presentacion-foto img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 480px;
    object-fit: cover;
    object-position: top center;
    border-radius: var(--radio-grande);
    box-shadow: var(--sombra-fuerte);
}

.foto-placeholder {
    width: 100%;
    height: 480px;
    background: var(--gris-fondo);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radio-grande);
    color: var(--azul);
    font-size: 80px;
    position: relative;
    z-index: 1;
}

.presentacion-info .etiqueta {
    margin-bottom: 12px;
}

.presentacion-info h2 {
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 18px;
    color: var(--azul-oscuro);
}

.presentacion-info h2 .resaltado {
    color: var(--rojo);
}

.presentacion-bio {
    color: var(--gris-texto);
    font-size: 16.5px;
    line-height: 1.75;
    margin-bottom: 24px;
}

.presentacion-redes {
    display: flex;
    gap: 10px;
}

.presentacion-redes a {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--azul);
    color: var(--blanco);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: var(--transicion);
}

.presentacion-redes a:hover {
    background: var(--rojo);
    color: var(--blanco);
    transform: translateY(-3px) rotate(8deg);
}

/* ============ CARDS TRAYECTORIA ============ */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.card {
    background: var(--blanco);
    padding: 36px 30px;
    border-radius: var(--radio-grande);
    box-shadow: var(--sombra-suave);
    transition: var(--transicion);
    border-top: 4px solid var(--azul);
    position: relative;
    overflow: hidden;
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--rojo), var(--amarillo));
    transform: scaleX(0);
    transform-origin: left;
    transition: var(--transicion);
}

.card:hover {
    transform: translateY(-8px);
    box-shadow: var(--sombra-media);
    border-top-color: var(--rojo);
}

.card:hover::before {
    transform: scaleX(1);
}

.card-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--azul-suave), var(--azul));
    color: var(--blanco);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin-bottom: 20px;
    box-shadow: 0 8px 20px rgba(0, 51, 160, 0.25);
}

.card h3 {
    font-size: 22px;
    margin-bottom: 12px;
    color: var(--azul-oscuro);
}

.card p {
    color: var(--gris-texto);
    font-size: 15px;
    line-height: 1.7;
}

/* ============ PROPUESTAS GRID ============ */
.propuestas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
}

.propuesta-item {
    background: var(--blanco);
    padding: 32px 26px;
    border-radius: var(--radio);
    box-shadow: var(--sombra-suave);
    transition: var(--transicion);
    position: relative;
    border-left: 4px solid var(--rojo);
}

.propuesta-item:hover {
    transform: translateY(-6px);
    box-shadow: var(--sombra-media);
    border-left-color: var(--azul);
}

.propuesta-num {
    font-family: var(--fuente-titulos);
    font-size: 48px;
    font-weight: 800;
    color: var(--azul-suave);
    line-height: 1;
    margin-bottom: 12px;
    -webkit-text-stroke: 1.5px var(--azul);
}

.propuesta-item h3 {
    font-size: 19px;
    margin-bottom: 10px;
    color: var(--azul-oscuro);
}

.propuesta-item p {
    color: var(--gris-texto);
    font-size: 14.5px;
    line-height: 1.65;
}

/* ============ PROPUESTAS COMPLETAS (página propuestas) ============ */
.propuestas-hero {
    background: linear-gradient(135deg, var(--azul-oscuro) 0%, var(--azul) 60%, var(--azul-claro) 100%);
    color: var(--blanco);
    padding: 80px 0 100px;
    position: relative;
    overflow: hidden;
}

.propuestas-hero::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 300px;
    height: 300px;
    background: rgba(227, 6, 19, 0.2);
    border-radius: 50%;
    filter: blur(40px);
}

.propuestas-hero::after {
    content: '';
    position: absolute;
    bottom: -80px;
    left: -80px;
    width: 400px;
    height: 400px;
    background: rgba(255, 209, 0, 0.15);
    border-radius: 50%;
    filter: blur(60px);
}

.propuestas-hero .container {
    position: relative;
    z-index: 1;
    text-align: center;
}

.propuestas-hero h1 {
    color: var(--blanco);
    font-size: 52px;
    font-weight: 800;
    margin-bottom: 18px;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

.propuestas-hero p {
    color: rgba(255, 255, 255, 0.95);
    font-size: 19px;
    max-width: 720px;
    margin: 0 auto;
    line-height: 1.6;
}

.propuestas-categorias {
    padding: 80px 0 100px;
    background: var(--gris-fondo);
}

.categoria-bloque {
    background: var(--blanco);
    border-radius: var(--radio-grande);
    padding: 40px 36px;
    margin-bottom: 28px;
    box-shadow: var(--sombra-suave);
    transition: var(--transicion);
    border-left: 6px solid var(--azul);
    position: relative;
    overflow: hidden;
}

.categoria-bloque:hover {
    box-shadow: var(--sombra-media);
    transform: translateX(4px);
}

.categoria-bloque::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 100%;
    background: linear-gradient(135deg, transparent 0%, var(--azul-suave) 100%);
    opacity: 0.4;
    pointer-events: none;
}

.categoria-header {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
}

.categoria-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--rojo), var(--rojo-oscuro));
    color: var(--blanco);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    box-shadow: 0 6px 20px rgba(227, 6, 19, 0.3);
}

.categoria-titulo {
    font-family: var(--fuente-titulos);
    font-size: 26px;
    font-weight: 700;
    color: var(--azul-oscuro);
    margin: 0;
}

.categoria-lista {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
    z-index: 1;
}

.categoria-lista li {
    padding: 10px 0 10px 32px;
    color: var(--gris-texto);
    font-size: 15.5px;
    line-height: 1.6;
    border-bottom: 1px dashed var(--gris-borde);
    position: relative;
}

.categoria-lista li:last-child {
    border-bottom: none;
}

.categoria-lista li::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 12px;
    color: var(--rojo);
    font-size: 14px;
    width: 22px;
    height: 22px;
    background: var(--azul-suave);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============ NOTICIAS ============ */
/* Tarjeta editorial moderna inspirada en diseño de blog profesional.
   Imagen mediana (no tosca), insignia de fecha mes/día sobre la imagen,
   título bold, resumen y enlace de lectura. */
/* Noticias: cards más compactas y elegantes */
.noticias-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

@media (max-width: 900px) {
    .noticias-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 600px) {
    .noticias-grid {
        grid-template-columns: 1fr;
    }
}

.noticia-card {
    background: var(--blanco);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(10, 20, 40, 0.05);
    transition: var(--transicion);
    display: flex;
    flex-direction: column;
    border: 1px solid #eef1f6;
}

.noticia-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 31, 92, 0.12);
    border-color: rgba(0, 51, 160, 0.18);
}

.noticia-img {
    position: relative;
    /* Imagen compacta: no muy grande */
    height: 140px;
    overflow: hidden;
    background: var(--azul-suave);
}

.noticia-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.img-placeholder {
    width: 100%;
    height: 100%;
    background: var(--azul-suave);
    color: var(--azul);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
}

/* Insignia de fecha compacta: mes arriba + día abajo */
.noticia-fecha-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--rojo);
    color: var(--blanco);
    width: 44px;
    border-radius: 6px;
    overflow: hidden;
    text-align: center;
    box-shadow: 0 4px 14px rgba(227, 6, 19, 0.35);
    z-index: 2;
    display: flex;
    flex-direction: column;
}

.noticia-fecha-badge .mes {
    background: var(--rojo-oscuro);
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 3px 0 2px;
    line-height: 1;
}

.noticia-fecha-badge .dia {
    font-family: var(--fuente-titulos);
    font-size: 18px;
    font-weight: 800;
    padding: 4px 0 6px;
    line-height: 1;
}

.noticia-cat {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0, 31, 92, 0.88);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--blanco);
    padding: 4px 11px;
    border-radius: 16px;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 2;
}

.noticia-body {
    padding: 16px 18px 18px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.noticia-body h3 {
    font-size: 15.5px;
    margin-bottom: 8px;
    color: var(--azul-oscuro);
    line-height: 1.32;
    font-weight: 700;
    letter-spacing: -0.2px;
    /* Limitar a 2 líneas con elipsis */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 42px;
}

.noticia-body p {
    color: var(--gris-texto);
    font-size: 13px;
    margin-bottom: 14px;
    flex: 1;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.btn-leer {
    color: var(--azul);
    font-weight: 700;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    padding-bottom: 3px;
    border-bottom: 2px solid var(--azul);
    transition: var(--transicion);
}

.btn-leer:hover {
    color: var(--rojo);
    border-color: var(--rojo);
    gap: 10px;
}

/* ============ OBRAS SOCIALES ============ */
.obras-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.obra-card {
    position: relative;
    height: 320px;
    border-radius: var(--radio-grande);
    overflow: hidden;
    box-shadow: var(--sombra-suave);
    cursor: pointer;
    transition: var(--transicion);
}

.obra-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--sombra-fuerte);
}

.obra-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transicion);
}

.obra-card:hover img {
    transform: scale(1.1);
}

.obra-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 31, 92, 0.95) 0%, rgba(0, 51, 160, 0.5) 50%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 26px;
    color: var(--blanco);
}

.obra-overlay h3 {
    color: var(--blanco);
    font-size: 22px;
    margin-bottom: 8px;
}

.obra-overlay p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    line-height: 1.5;
}

/* ============ CTA SECTION ============ */
.seccion-cta {
    background: linear-gradient(135deg, var(--azul-oscuro) 0%, var(--azul) 50%, var(--rojo) 100%);
    color: var(--blanco);
    padding: 80px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.seccion-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 20% 30%, rgba(255, 209, 0, 0.15) 0%, transparent 40%),
                      radial-gradient(circle at 80% 70%, rgba(227, 6, 19, 0.2) 0%, transparent 40%);
}

.seccion-cta .container {
    position: relative;
    z-index: 1;
}

.seccion-cta h2 {
    color: var(--blanco);
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 16px;
}

.seccion-cta p {
    color: rgba(255, 255, 255, 0.95);
    font-size: 18px;
    margin-bottom: 28px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* ============ PAGINA GENERICA ============ */
.pagina-hero {
    background: linear-gradient(135deg, var(--azul-oscuro) 0%, var(--azul) 100%);
    color: var(--blanco);
    padding: 70px 0 60px;
    position: relative;
    overflow: hidden;
}

.pagina-hero::before {
    content: '';
    position: absolute;
    bottom: -60px;
    right: -60px;
    width: 280px;
    height: 280px;
    background: rgba(227, 6, 19, 0.18);
    border-radius: 50%;
    filter: blur(50px);
}

.pagina-hero .container {
    position: relative;
    z-index: 1;
}

.pagina-hero h1 {
    color: var(--blanco);
    font-size: 44px;
    font-weight: 800;
    margin-bottom: 12px;
}

.pagina-hero p {
    color: rgba(255, 255, 255, 0.92);
    font-size: 17px;
    max-width: 700px;
}

.pagina-contenido {
    padding: 70px 0;
}

.pagina-contenido .seccion-texto {
    max-width: 900px;
    margin: 0 auto 50px;
}

.pagina-contenido .seccion-texto h2 {
    color: var(--azul-oscuro);
    font-size: 30px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 3px solid var(--rojo);
    display: inline-block;
}

.pagina-contenido .seccion-texto p,
.pagina-contenido .seccion-texto li {
    color: var(--gris-texto);
    font-size: 16.5px;
    line-height: 1.8;
    margin-bottom: 14px;
}

.pagina-contenido .seccion-imagen {
    margin: 30px 0;
    border-radius: var(--radio-grande);
    overflow: hidden;
    box-shadow: var(--sombra-media);
}

.pagina-contenido .seccion-imagen img {
    width: 100%;
}

/* ============ SECCIONES DE PÁGINA (trayectoria, formacion academica, etc) ============ */
/* Estilos para las secciones renderizadas por pagina.php:
   - .seccion-tipo: contenedor de cada sección
   - .seccion-titulo: título h2
   - .seccion-contenido: contenido HTML (parrafos, listas)
   - .seccion-imagen-texto: layout dos columnas (imagen + texto)
   - .cita-block: bloque de cita destacada
   - .banner-section: banner con fondo de imagen
   - .galeria-grid: galería de imágenes */

.seccion-tipo {
    padding: 70px 0;
}
.seccion-tipo.bg-claro {
    background: var(--gris-fondo);
}

.seccion-titulo {
    font-family: var(--fuente-titulos);
    font-size: 32px;
    font-weight: 800;
    color: var(--azul-oscuro);
    margin: 0 0 24px;
    padding-bottom: 14px;
    border-bottom: 4px solid var(--rojo);
    display: inline-block;
    line-height: 1.2;
}

.seccion-contenido {
    color: var(--gris-texto);
    font-size: 16.5px;
    line-height: 1.85;
    max-width: 880px;
}
.seccion-contenido p { margin: 0 0 16px; }
.seccion-contenido p:last-child { margin-bottom: 0; }
.seccion-contenido h3,
.seccion-contenido h4 {
    color: var(--azul-oscuro);
    font-weight: 700;
    margin: 26px 0 12px;
    line-height: 1.3;
}
.seccion-contenido h3 { font-size: 22px; }
.seccion-contenido h4 { font-size: 18px; }
.seccion-contenido ul,
.seccion-contenido ol {
    margin: 12px 0 18px;
    padding-left: 22px;
}
.seccion-contenido li {
    margin-bottom: 8px;
    line-height: 1.7;
}
.seccion-contenido ul li::marker { color: var(--rojo); }
.seccion-contenido strong { color: var(--azul-oscuro); font-weight: 700; }
.seccion-contenido a {
    color: var(--azul);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
.seccion-contenido a:hover { color: var(--rojo); }
.seccion-contenido blockquote {
    border-left: 4px solid var(--rojo);
    padding: 12px 20px;
    margin: 20px 0;
    background: rgba(0,51,160,.04);
    border-radius: 0 10px 10px 0;
    font-style: italic;
    color: var(--azul-oscuro);
}

/* Layout dos columnas: imagen + texto (Formación Académica, etc) */
.seccion-imagen-texto {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;   /* texto más ancho que imagen */
    gap: 50px;
    align-items: center;
}
.seccion-imagen-texto.reverse {
    grid-template-columns: 1.15fr 0.85fr;
}
.seccion-imagen-texto.reverse > div:first-child { order: 2; }
.seccion-imagen-texto.reverse > div:last-child  { order: 1; }

/* Imagen: NO gigante, sino moderada con aspect ratio 4/3 y bordes redondeados */
.seccion-imagen-texto img,
.seccion-imagen-texto .foto-placeholder {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(0,51,160,.12);
    border: 4px solid #fff;
    display: block;
}
.seccion-imagen-texto .foto-placeholder {
    background: linear-gradient(135deg, #f0f3f9, #e6ecf5);
    color: #b0bbd1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 56px;
    border: 4px solid #fff;
}

/* Texto lado: títulos más destacados */
.seccion-imagen-texto h2 {
    font-family: var(--fuente-titulos);
    font-size: 28px;
    font-weight: 800;
    color: var(--azul-oscuro);
    margin: 0 0 18px;
    line-height: 1.25;
    position: relative;
    padding-bottom: 14px;
}
.seccion-imagen-texto h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background: var(--rojo);
    border-radius: 2px;
}
.seccion-imagen-texto .seccion-contenido {
    font-size: 16px;
    line-height: 1.8;
}

/* Cita destacada */
.cita-block {
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
    font-family: var(--fuente-titulos);
    font-size: 24px;
    font-weight: 600;
    font-style: italic;
    color: var(--azul-oscuro);
    line-height: 1.5;
    padding: 30px 40px;
    border-left: 4px solid var(--rojo);
    background: linear-gradient(135deg, rgba(0,51,160,.04), rgba(227,6,19,.04));
    border-radius: 0 16px 16px 0;
}

/* Banner con imagen de fondo */
.banner-section {
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: #fff;
    padding: 90px 0;
    text-align: center;
    position: relative;
}
.banner-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,31,92,.78), rgba(0,51,160,.82));
}
.banner-section .container { position: relative; z-index: 1; }
.banner-section h2 {
    font-family: var(--fuente-titulos);
    font-size: 36px;
    font-weight: 800;
    margin: 0 0 18px;
    color: #fff;
}
.banner-section .btn-blanco {
    background: #fff;
    color: var(--azul-oscuro);
    padding: 14px 32px;
    border-radius: 30px;
    font-weight: 700;
    text-decoration: none;
    display: inline-block;
    transition: transform .2s, box-shadow .2s;
    box-shadow: 0 6px 20px rgba(0,0,0,.18);
}
.banner-section .btn-blanco:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0,0,0,.25);
}

/* Galería de imágenes */
.galeria-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}
.galeria-grid img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(0,51,160,.10);
    transition: transform .25s, box-shadow .25s;
    cursor: pointer;
}
.galeria-grid img:hover {
    transform: scale(1.04);
    box-shadow: 0 10px 28px rgba(0,51,160,.20);
}

/* Responsive: en móvil, todo en una columna */
@media (max-width: 768px) {
    .seccion-tipo { padding: 50px 0; }
    .seccion-titulo { font-size: 26px; }
    .seccion-contenido { font-size: 15.5px; }
    .seccion-imagen-texto,
    .seccion-imagen-texto.reverse {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .seccion-imagen-texto.reverse > div:first-child { order: 1; }
    .seccion-imagen-texto.reverse > div:last-child  { order: 2; }
    .seccion-imagen-texto img,
    .seccion-imagen-texto .foto-placeholder {
        aspect-ratio: 16 / 10;
    }
    .seccion-imagen-texto h2 { font-size: 23px; }
    .cita-block { font-size: 18px; padding: 22px 24px; }
    .banner-section { padding: 60px 0; background-attachment: scroll; }
    .banner-section h2 { font-size: 26px; }
}

/* ============ CONTACTO ============ */
.seccion-contacto {
    padding: 70px 0;
    background: linear-gradient(180deg, #f7f9fc 0%, #ffffff 100%);
}

.contacto-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 50px;
    align-items: stretch;
}

/* ===== FORMULARIO ===== */
.contacto-form-wrap {
    background: #ffffff;
    border-radius: 16px;
    padding: 42px 44px;
    box-shadow: 0 10px 40px rgba(10, 20, 40, 0.08);
    border: 1px solid #eef1f6;
}

.contacto-form-head {
    margin-bottom: 28px;
    padding-bottom: 22px;
    border-bottom: 1px solid #eef1f6;
}

.contacto-form-eyebrow {
    display: inline-block;
    color: var(--rojo);
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2.2px;
    margin-bottom: 8px;
}

.contacto-form-head h2 {
    font-family: var(--fuente-titulos);
    font-size: 28px;
    font-weight: 800;
    color: var(--azul-oscuro);
    margin: 0 0 8px 0;
    line-height: 1.2;
}

.contacto-form-head p {
    color: #5a6577;
    font-size: 14.5px;
    margin: 0;
    line-height: 1.55;
}

.contacto-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Honeypot — oculto visualmente pero accesible a los bots */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

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

.form-grupo label {
    color: var(--azul-oscuro);
    font-weight: 600;
    font-size: 13.5px;
    margin-bottom: 7px;
    letter-spacing: 0.2px;
}

.form-grupo label .req {
    color: var(--rojo);
    margin-left: 2px;
}

.form-grupo input,
.form-grupo textarea,
.form-grupo select {
    width: 100%;
    padding: 13px 16px;
    border: 1.5px solid #dde3ec;
    border-radius: 10px;
    font-family: var(--fuente-cuerpo);
    font-size: 14.5px;
    color: var(--color-texto);
    background: #fbfcfe;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.form-grupo input::placeholder,
.form-grupo textarea::placeholder {
    color: #9ba6b5;
}

.form-grupo input:focus,
.form-grupo textarea:focus,
.form-grupo select:focus {
    outline: none;
    border-color: var(--azul);
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(0, 51, 160, 0.10);
}

.form-grupo input:focus:invalid,
.form-grupo textarea:focus:invalid {
    border-color: var(--rojo);
    box-shadow: 0 0 0 4px rgba(227, 6, 19, 0.10);
}

.form-grupo textarea {
    resize: vertical;
    min-height: 140px;
    line-height: 1.55;
}

.char-counter {
    text-align: right;
    font-size: 11.5px;
    color: #9ba6b5;
    margin-top: 4px;
    font-weight: 500;
}

.btn-contacto {
    width: 100%;
    justify-content: center;
    gap: 10px;
    padding: 16px 28px;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 6px;
    border-radius: 12px;
}

.btn-contacto:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.form-msg {
    margin-top: 4px;
    min-height: 0;
}

.form-msg:empty {
    display: none;
}

.form-msg .alert {
    padding: 14px 18px;
    border-radius: 10px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.45;
}

.form-msg .alert-success {
    background: #ecfdf3;
    color: #067647;
    border: 1px solid #abefc6;
}

.form-msg .alert-success i {
    color: #16a34a;
    font-size: 18px;
}

.form-msg .alert-error {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

.form-msg .alert-error i {
    color: var(--rojo);
    font-size: 18px;
}

.form-foot-note {
    margin: 8px 0 0 0;
    font-size: 12px;
    color: #8a95a5;
    line-height: 1.5;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.form-foot-note i {
    color: var(--azul);
    font-size: 13px;
}

/* ===== INFO LATERAL ===== */
.contacto-info-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.info-card-side {
    background: linear-gradient(135deg, var(--azul-oscuro) 0%, var(--azul) 100%);
    color: #ffffff;
    padding: 24px 26px;
    border-radius: 14px;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    box-shadow: 0 8px 24px rgba(0, 31, 92, 0.18);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.info-card-side:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(0, 31, 92, 0.25);
}

.info-card-side:nth-child(2n) {
    background: linear-gradient(135deg, #ffffff 0%, #f7f9fc 100%);
    color: var(--azul-oscuro);
    border: 1.5px solid #e3e9f2;
}

.info-card-side:nth-child(2n) h4 {
    color: var(--azul-oscuro);
}

.info-card-side:nth-child(2n) p,
.info-card-side:nth-child(2n) p a {
    color: #4a5567;
}

.info-card-side:nth-child(2n) .info-icon-side {
    background: rgba(0, 51, 160, 0.10);
    color: var(--azul);
}

.info-icon-side {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.15);
    color: #ffd700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
}

.info-card-side h4 {
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    margin: 0 0 4px 0;
}

.info-card-side p {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.92);
    word-break: break-word;
}

.info-card-side p a {
    color: rgba(255, 255, 255, 0.92);
    text-decoration: none;
    transition: color 0.2s ease;
}

.info-card-side p a:hover {
    color: #ffd700;
}

.info-card-redes .footer-redes {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}

.info-card-redes .footer-redes a {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: background 0.2s ease, transform 0.2s ease;
}

.info-card-redes .footer-redes a:hover {
    background: var(--rojo);
    transform: translateY(-2px);
}

/* ===== MAPA ===== */
.mapa-contacto {
    line-height: 0;
}

.mapa-contacto iframe {
    filter: grayscale(0.1) contrast(1.05);
}

/* Responsive */
@media (max-width: 992px) {
    .contacto-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .contacto-form-wrap {
        padding: 32px 26px;
    }
    .contacto-form-head h2 {
        font-size: 24px;
    }
}

@media (max-width: 600px) {
    .form-row-2 {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .contacto-form-wrap {
        padding: 26px 20px;
    }
    .info-card-side {
        padding: 20px 18px;
        gap: 14px;
    }
    .info-icon-side {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
}

/* ============ FOOTER ============ */
.site-footer {
    background: linear-gradient(135deg, var(--negro) 0%, var(--azul-oscuro) 100%);
    color: rgba(255, 255, 255, 0.85);
    padding: 60px 0 0;
    position: relative;
    overflow: hidden;
}

.site-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--rojo) 0%, var(--amarillo) 50%, var(--rojo) 100%);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
    gap: 40px;
    margin-bottom: 40px;
}

.footer-col h4 {
    color: var(--blanco);
    font-size: 17px;
    margin-bottom: 20px;
    font-family: var(--fuente-titulos);
    font-weight: 700;
    position: relative;
    padding-bottom: 10px;
    letter-spacing: 0.3px;
}

.footer-col h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background: var(--rojo);
    border-radius: 2px;
}

.footer-logo {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}

.footer-logo img,
.footer-logo-img {
    height: 50px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
}

.footer-logo .nombre,
.footer-logo .cargo {
    display: none;
}

.footer-col p {
    color: rgba(255, 255, 255, 0.75);
    font-size: 14.5px;
    line-height: 1.7;
    margin-bottom: 14px;
}

.footer-col ul {
    list-style: none;
    padding: 0;
}

.footer-col ul li {
    margin-bottom: 10px;
}

.footer-col ul li a {
    color: rgba(255, 255, 255, 0.75);
    font-size: 14.5px;
    transition: var(--transicion);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.footer-col ul li a::before {
    content: '\f054';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 9px;
    color: var(--rojo);
}

.footer-col ul li a:hover {
    color: var(--blanco);
    transform: translateX(4px);
}

.footer-redes {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.footer-redes a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: var(--blanco);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition: var(--transicion);
}

.footer-redes a:hover {
    background: var(--rojo);
    transform: translateY(-3px);
}

.footer-contacto-item {
    display: flex;
    gap: 12px;
    margin-bottom: 14px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    align-items: flex-start;
}

.footer-contacto-item i {
    color: var(--amarillo);
    font-size: 14px;
    margin-top: 4px;
}

.footer-bottom {
    background: rgba(0, 0, 0, 0.3);
    padding: 18px 0;
    text-align: center;
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.7);
}

.footer-bottom strong {
    color: var(--amarillo);
}

/* ============ BARRA SUPERIOR COMPROMISOS ============ */
.compromisos-bar {
    background: var(--rojo);
    color: var(--blanco);
    padding: 18px 0;
}

.compromisos-bar .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    text-align: center;
}

.compromiso-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.compromiso-item i {
    font-size: 22px;
    color: var(--amarillo);
}

/* ============ PAGE HEADER INTERNO ============ */
.page-header {
    background: linear-gradient(135deg, var(--azul-oscuro), var(--azul));
    color: var(--blanco);
    padding: 60px 0 50px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.page-header::before {
    content: '';
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 200px;
    background: rgba(227, 6, 19, 0.2);
    border-radius: 50%;
    filter: blur(40px);
}

.page-header h1 {
    color: var(--blanco);
    font-size: 44px;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
}

.page-header p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 17px;
    position: relative;
    z-index: 1;
}

.breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.15);
    padding: 6px 18px;
    border-radius: 30px;
    font-size: 13px;
    margin-bottom: 18px;
    position: relative;
    z-index: 1;
}

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

.breadcrumb span {
    color: var(--blanco);
}

/* ============ CONTENIDO NOTICIA INDIVIDUAL ============ */
.noticia-single {
    max-width: 900px;
    margin: 0 auto;
    padding: 50px 0;
}

.noticia-single-img {
    width: 100%;
    height: 460px;
    object-fit: cover;
    border-radius: var(--radio-grande);
    margin-bottom: 30px;
    box-shadow: var(--sombra-media);
}

.noticia-single h1 {
    font-size: 38px;
    color: var(--azul-oscuro);
    margin-bottom: 14px;
    line-height: 1.25;
}

.noticia-single-meta {
    display: flex;
    gap: 18px;
    align-items: center;
    color: var(--gris-texto);
    font-size: 14px;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--gris-borde);
}

.noticia-single-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.noticia-single-meta i {
    color: var(--rojo);
}

.noticia-single-cuerpo {
    font-size: 16.5px;
    line-height: 1.85;
    color: var(--color-texto);
}

.noticia-single-cuerpo p {
    margin-bottom: 18px;
}

.noticia-single-cuerpo h2,
.noticia-single-cuerpo h3 {
    margin: 30px 0 14px;
    color: var(--azul-oscuro);
}

.noticia-single-cuerpo img {
    margin: 24px 0;
    border-radius: var(--radio);
}

/* ============ RESPONSIVE ============ */
@media (max-width: 992px) {
    .presentacion-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .presentacion-foto img,
    .foto-placeholder {
        height: 420px;
        max-width: 380px;
        margin: 0 auto;
    }

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

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

    .slider-title {
        font-size: 44px;
    }

    .seccion-header h2,
    .seccion-cta h2,
    .page-header h1 {
        font-size: 32px;
    }

    .propuestas-hero h1 {
        font-size: 38px;
    }
}

@media (max-width: 768px) {
    .menu-toggle {
        display: flex;
    }

    nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 280px;
        height: 100vh;
        background: var(--blanco);
        padding: 80px 20px 30px;
        box-shadow: -10px 0 40px rgba(0, 0, 0, 0.15);
        transition: right 0.35s ease;
        z-index: 999;
        overflow-y: auto;
    }

    nav.active {
        right: 0;
    }

    .nav-menu {
        flex-direction: column;
        gap: 4px;
        width: 100%;
        align-items: stretch;
    }

    .nav-menu li {
        width: 100%;
    }

    .nav-menu a {
        padding: 14px 18px;
        border-radius: 10px;
        display: block;
        font-size: 15px;
    }

    .nav-menu a.active::after,
    .nav-menu a:hover::after {
        display: none;
    }

    .nav-menu a.active,
    .nav-menu a:hover {
        background: var(--azul);
        color: var(--blanco);
    }

    .nav-menu a i {
        color: var(--amarillo);
    }

    body.menu-open {
        overflow: hidden;
    }

    body.menu-open::after {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 998;
    }

    .topbar-info {
        gap: 14px;
    }

    .topbar-info span {
        font-size: 12px;
    }

    section {
        padding: 50px 0;
    }

    .hero-slider {
        /* TABLET: responsive con aspect-ratio 1920/550.
           NO se deforma porque background-size: cover mantiene la proporción
           de la imagen. La altura se calcula sola según el ancho de pantalla. */
        height: auto;
        aspect-ratio: 1920 / 550;
    }

    .slider-title {
        font-size: 34px;
    }

    .slider-subtitle {
        font-size: 16px;
    }

    .slider-arrow {
        width: 44px;
        height: 44px;
        font-size: 14px;
    }

    .slider-arrow.prev { left: 16px; }
    .slider-arrow.next { right: 16px; }

    .presentacion-info h2 {
        font-size: 34px;
    }

    .seccion-header h2,
    .seccion-cta h2,
    .page-header h1,
    .propuestas-hero h1,
    .pagina-hero h1 {
        font-size: 28px;
    }

    .categoria-bloque {
        padding: 28px 22px;
    }

    .categoria-titulo {
        font-size: 22px;
    }

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

    .compromisos-bar .container {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .compromiso-item {
        font-size: 12px;
    }

    .noticia-single h1 {
        font-size: 28px;
    }

    .noticia-single-img {
        height: 280px;
    }

    .container {
        padding: 0 18px;
    }
}

@media (max-width: 480px) {
    /* En móvil: ocultar teléfono y dirección, mostrar solo el email principal */
    .topbar-info .topbar-divider,
    .topbar-info span:not(.topbar-divider) {
        display: none;
    }
    .topbar-info > a:first-child,
    .topbar-info > a {
        display: inline-flex !important;
    }

    .topbar-redes a {
        width: 26px;
        height: 26px;
        font-size: 12px;
    }

    .logo-text .nombre {
        font-size: 18px;
    }

    .logo-text .cargo {
        font-size: 9px;
    }

    .logo-area img {
        height: 46px;
    }

    .hero-slider {
        /* MÓVIL: mismo aspect-ratio responsive. En pantallas muy angostas
           la altura queda pequeña pero PROPORCIONAL, sin deformar. */
        height: auto;
        aspect-ratio: 1920 / 550;
    }

    .slider-title {
        font-size: 26px;
    }

    .slider-arrow {
        width: 40px;
        height: 40px;
        font-size: 13px;
        opacity: 0.92;
    }

    .slider-arrow.prev { left: 12px; }
    .slider-arrow.next { right: 12px; }

    .slider-dots {
        bottom: 18px;
    }

    .slider-dot {
        width: 9px;
        height: 9px;
    }

    .slider-dot.active {
        width: 26px;
    }

    .btn-slider,
    .btn-principal,
    .btn-rojo,
    .btn-blanco {
        padding: 12px 22px;
        font-size: 13px;
    }
}

/* ============ ANIMACIONES ============ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.fade-in-up {
    animation: fadeInUp 0.8s ease forwards;
}

/* ============ UTILIDADES ============ */
.mt-20 { margin-top: 20px; }
.mt-30 { margin-top: 30px; }
.mt-40 { margin-top: 40px; }
.mb-20 { margin-bottom: 20px; }
.mb-30 { margin-bottom: 30px; }
.mb-40 { margin-bottom: 40px; }

@media print {
    .topbar, .site-header, .site-footer, .menu-toggle, nav { display: none !important; }
    body { color: black; }
}

/* ============ BOTÓN FLOTANTE WHATSAPP ============ */
.whatsapp-float {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 58px;
    height: 58px;
    background: #25D366;
    color: var(--blanco);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    box-shadow: 0 8px 30px rgba(37, 211, 102, 0.5);
    z-index: 999;
    animation: pulse-wa 2s ease-in-out infinite;
    transition: var(--transicion);
}

.whatsapp-float:hover {
    background: #128C7E;
    color: var(--blanco);
    transform: scale(1.1);
}

@keyframes pulse-wa {
    0%, 100% { box-shadow: 0 8px 30px rgba(37, 211, 102, 0.5); }
    50% { box-shadow: 0 8px 50px rgba(37, 211, 102, 0.8); }
}

@media (max-width: 768px) {
    .whatsapp-float {
        width: 50px;
        height: 50px;
        font-size: 24px;
        bottom: 18px;
        right: 18px;
    }
}

/* ============ SCROLLBAR ELEGANTE ============ */
/* Scroll delgado y profesional con colores del partido */
::-webkit-scrollbar {
    width: 11px;
    height: 11px;
}

::-webkit-scrollbar-track {
    background: #f1f4fa;
    border-left: 1px solid var(--gris-borde);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--azul) 0%, var(--azul-oscuro) 100%);
    border-radius: 10px;
    border: 2px solid #f1f4fa;
    transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--rojo) 0%, var(--rojo-oscuro) 100%);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--azul) #f1f4fa;
}

/* Selección de texto con color del partido */
::selection {
    background: var(--azul);
    color: var(--blanco);
}

::-moz-selection {
    background: var(--azul);
    color: var(--blanco);
}

/* Scroll suave al hacer clic en anclas internas */
html {
    scroll-behavior: smooth;
}

/* Reveal-on-scroll suave para tarjetas y secciones (opcional, sin JS) */
@media (prefers-reduced-motion: no-preference) {
    .noticia-card,
    .obra-card,
    .card,
    .propuesta-item {
        animation: fadeUp 0.6s ease both;
    }
}

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