/**
 * Estilos del sitio web publico
 * CMS - Estilos principales
 */

/* =============================================
   VARIABLES CSS
   ============================================= */
:root {
    /* =========================================================
       PALETA DE MARCA — CompliaPyme
       =========================================================
       Los valores NO están elegidos a ojo: salen de analizar los
       píxeles del logo (UTILES/logo.png e icono512.png). Los tres
       colores dominantes, descartando blancos y grises, eran:

         #1D3656  azul marino del escudo y la tipografía
         #327598  azul medio del check
         #F49A5B  naranja del check

       Se adoptan los valores que ya usa la aplicación
       (APP.COMPLIAPYME.COM, sección 10 de su CLAUDE.md), que
       coinciden con esos tonos hasta lo imperceptible. Así el logo,
       la web y la aplicación hablan el mismo idioma: un cliente que
       pasa de la web al alta no nota un cambio de marca.

       Lo que había antes era la paleta de zeropiojos.es —azul
       violáceo y amarillo—, heredada al copiar el CMS. Ese amarillo
       chocaba de frente con el naranja del logo.
       ========================================================= */
    --brand-primary:       #1E3A5F;   /* Azul marino corporativo */
    --brand-primary-dark:  #152B45;   /* Más oscuro, para hover y velos */
    --brand-secondary:     #2E86AB;   /* Azul medio del check */
    --brand-accent:        #F4A261;   /* Naranja del check */
    --brand-accent-dark:   #E08945;   /* Naranja más oscuro, para hover */

    --primary-color: var(--brand-primary);
    --primary-dark:  var(--brand-primary-dark);
    --secondary-color: #6c757d;
    --header-bg: #ffffff;
    --header-text: var(--brand-primary);
    --header-text-hover: var(--brand-accent-dark);
    --topbar-bg: #ffffff;
    --topbar-text: var(--brand-primary);
    --topbar-text-hover: var(--brand-accent-dark);
    --success-color: #198754;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #0dcaf0;
    --light-color: #f8f9fa;
    --dark-color: #212529;
    --white: #ffffff;
    --gray-100: #f8f9fa;
    --gray-200: #e9ecef;
    --gray-300: #dee2e6;
    --gray-400: #ced4da;
    --gray-500: #adb5bd;
    --gray-600: #6c757d;
    --gray-700: #495057;
    --gray-800: #343a40;
    --gray-900: #212529;

    --font-primary: 'Montserrat', sans-serif;
    --font-secondary: 'Open Sans', sans-serif;

    /* Altura de las barras: 104 px en total, un 25 % menos que los 140 px
       de antes (header 100 + topbar 40).

       Se reducen porque desde que dejaron de ser transparentes ocupan
       espacio de verdad: lo que antes era imagen del hero ahora es barra
       blanca, y cada píxel de más aquí es un píxel menos de la primera
       pantalla que ve el visitante.

       EL REPARTO ENTRE LAS DOS CAMBIÓ (topbar 30→40, header 75→64) sin
       tocar el total, y no es cosmético:

       - La topbar iba con 30 px mientras la regla de targets táctiles del
         final del fichero pide 40 px de alto para sus iconos. Es decir,
         el contenido no cabía en su propia barra desde antes de que
         hubiera botones. Con 40 px encaja exacto.
       - El header tenía 55 px de espacio interior para unos enlaces que
         miden 40: sobraban 15 px de aire que no hacían nada. */
    --header-height: 64px;
    --topbar-height: 40px;
    --transition: all 0.3s ease;
    --shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 5px 25px rgba(0, 0, 0, 0.15);
    --border-radius: 8px;

    /* Espaciado estándar para secciones */
    --section-spacing: 80px;
    --section-spacing-mobile: 50px;

    /* Colores corporativos AGON - Paleta ecológica */
    --agon-verde: #4CAF50;
    --agon-verde-dark: #388E3C;
    --agon-verde-light: #81c784;
    /* Verdes oscuros para fondos - identidad ecológica */
    --agon-bosque: #1B4332;
    --agon-bosque-dark: #0D2818;
    --agon-bosque-light: #2D6A4F;
    /* Grises neutros (para textos secundarios) */
    --agon-gris: #495057;
    --agon-gris-dark: #343a40;
    --agon-gris-light: #6c757d;
}

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

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: var(--font-secondary);
    font-size: 16px;
    line-height: 1.6;
    color: var(--gray-800);
    background-color: var(--white);
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    font-weight: 700;
    line-height: 1.3;
    color: var(--gray-900);
}

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

a:hover {
    color: var(--primary-dark);
}

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

/* =============================================
   PAGE LOADER
   ============================================= */
.page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.page-loader.loaded {
    opacity: 0;
    visibility: hidden;
}

/* =============================================
   AOS OVERRIDES - Evitar sensación de página vacía
   ============================================= */
/* Los elementos AOS empiezan con opacidad parcial en lugar de invisible */
[data-aos] {
    opacity: 0.4;
    transition-property: opacity, transform;
    transition-duration: 0.4s;
}

[data-aos].aos-animate {
    opacity: 1;
}

/* Elementos sin delay - mostrar rápido */
[data-aos][data-aos-delay="0"],
[data-aos]:not([data-aos-delay]) {
    transition-delay: 0s !important;
}

/* Reducir el desplazamiento de las animaciones para un efecto más sutil */
[data-aos="fade-up"] {
    transform: translateY(15px);
}

[data-aos="fade-up"].aos-animate {
    transform: translateY(0);
}

[data-aos="fade-down"] {
    transform: translateY(-15px);
}

[data-aos="fade-down"].aos-animate {
    transform: translateY(0);
}

[data-aos="fade-left"] {
    transform: translateX(15px);
}

[data-aos="fade-left"].aos-animate {
    transform: translateX(0);
}

[data-aos="fade-right"] {
    transform: translateX(-15px);
}

[data-aos="fade-right"].aos-animate {
    transform: translateX(0);
}

[data-aos="zoom-in"] {
    transform: scale(0.97);
}

[data-aos="zoom-in"].aos-animate {
    transform: scale(1);
}

/* En móviles, sin animaciones para mejor rendimiento */
@media (max-width: 575px) {
    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* =============================================
   TOP BAR
   ============================================= */
.topbar {
    background: var(--topbar-bg);
    color: var(--topbar-text);
    /* La ALTURA MANDA, no el padding.
       ==========================================================
       Antes era `padding: 6px 0` y la altura salía de lo que midiera
       el contenido: con iconos de 32 px, 44 px reales. Pero el header
       se posiciona en `top: var(--topbar-height)`, así que en cuanto
       esa variable no coincidía con la altura real, el header se
       montaba encima y tapaba los iconos.

       Fijando la altura, la variable pasa a ser la verdad y da igual lo
       que crezca el contenido: el header siempre encaja justo debajo. */
    height: var(--topbar-height);
    display: flex;
    align-items: center;
    padding: 0;
    font-size: 14px;
    position: relative;
    z-index: 1001;
}

/* El contenedor interior también ocupa el alto, para que el contenido
   quede centrado en vertical dentro de la barra. */
.topbar > .container {
    display: flex;
    align-items: center;
    width: 100%;
}

.topbar > .container > .topbar-icons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* Ocupa todo el ancho disponible.
       Al convertir .container en flex para centrar en vertical, este
       bloque pasó a ser un flex-item y se encogió al tamaño de su
       contenido: sus iconos, que iban alineados a la derecha DENTRO del
       bloque, se fueron con él a la izquierda y acabaron encima del logo.
       Con flex:1 el bloque vuelve a ocupar la fila entera y su
       justify-content: flex-end hace lo que se espera. */
    flex: 1 1 auto;
}

.topbar .contact-info {
    display: flex;
    gap: 20px;
}

.topbar .contact-link {
    color: var(--topbar-text);
    display: flex;
    align-items: center;
    gap: 6px;
}

.topbar .contact-link:hover {
    color: var(--topbar-text-hover);
}

.topbar .contact-link i {
    font-size: 16px;
}

.topbar .social-links {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

/* Mismo criterio que el resto de iconos del topbar: sin círculo y con
   área táctil generosa, aunque no se vea.
   40 px y no 24 porque es lo que ya forzaba la regla de targets táctiles
   del final del fichero (WCAG 2.2 SC 2.5.8 pide 24 como mínimo y
   recomienda 44): antes esos 40 px no cabían en una barra de 30 y se
   declaraba aquí un 24 que no era la altura real. Con la barra en 40,
   declarado y efectivo coinciden. */
.topbar .social-links a {
    color: var(--topbar-text);
    font-size: 16px;
    min-width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    background: none;
    transition: color 0.2s ease;
}

.topbar .social-links a:hover,
.topbar .social-links a:focus-visible {
    color: var(--brand-accent-dark);
    background: none;
}

/* Topbar Icons Container */
.topbar .topbar-icons {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
}

.topbar .quick-nav {
    display: flex !important;
    gap: 6px;
}

/* Iconos SIN círculo de fondo.
   ==========================================================
   El círculo gris obligaba a un botón bastante más alto que el propio
   icono, y en una barra de 30 px asomaba por debajo del header. Sin
   fondo, el icono manda: se ve más grande (16 px en vez de 14) ocupando
   menos alto total.

   El tamaño del ENLACE se mantiene en 40 px aunque ya no se vea: WCAG 2.2
   pide 24 como mínimo (SC 2.5.8) y recomienda 44, y dejarlo del tamaño
   del icono lo convertiría en un blanco de 16 px, incómodo con el dedo y
   muy incómodo con temblor o poca precisión. Área grande, dibujo pequeño.
   Es además la altura que ya forzaba la regla de targets del final del
   fichero, que con la barra en 40 px por fin cabe. */
.topbar .quick-nav a {
    color: var(--topbar-text);
    font-size: 16px;
    min-width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    background: none;
    /* Solo el color: sin scale, que con el fondo quitado solo produce un
       salto del glifo. */
    transition: color 0.2s ease;
}

/* Hover en naranja de marca, sobre el propio icono.
   :focus-visible incluido — quien navega con teclado tiene que ver dónde
   está, y con el fondo quitado el foco del navegador se apreciaba poco. */
.topbar .quick-nav a:hover,
.topbar .quick-nav a:focus-visible {
    /* --brand-accent-dark (#E08945) y no el naranja claro de marca:
       sobre blanco, el claro se queda en 2,06:1 y el oscuro sube a
       2,68:1. Ninguno alcanza el 3:1 que pide WCAG 1.4.11 para
       elementos gráficos —haría falta bajar a #C88550, que ya es un
       naranja terroso y se aleja del logo—. Se asume a conciencia: el
       estado NORMAL del icono va en azul marino con 11,5:1, que es el
       que de verdad tiene que verse; el hover solo lo tiñe y no lo
       oculta. */
    color: var(--brand-accent-dark);
    background: none;
    transform: none;
}

.topbar .topbar-separator {
    display: inline-block;
    width: 1px;
    height: 16px;
    background: var(--gray-500);
    margin: 0 10px;
}

.topbar .topbar-icons .social-links {
    display: flex !important;
    gap: 6px;
}

/* Mismo criterio que los iconos de navegación rápida: sin círculo, icono
   más grande y área táctil de 24 px aunque no se vea. */
.topbar .topbar-icons .social-links a {
    color: var(--topbar-text);
    font-size: 16px;
    min-width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    background: none;
    transition: color 0.2s ease;
}

.topbar .topbar-icons .social-links a:hover,
.topbar .topbar-icons .social-links a:focus-visible {
    /* --brand-accent-dark (#E08945) y no el naranja claro de marca:
       sobre blanco, el claro se queda en 2,06:1 y el oscuro sube a
       2,68:1. Ninguno alcanza el 3:1 que pide WCAG 1.4.11 para
       elementos gráficos —haría falta bajar a #C88550, que ya es un
       naranja terroso y se aleja del logo—. Se asume a conciencia: el
       estado NORMAL del icono va en azul marino con 11,5:1, que es el
       que de verdad tiene que verse; el hover solo lo tiñe y no lo
       oculta. */
    color: var(--brand-accent-dark);
    background: none;
    transform: none;
}

/* =============================================
   HEADER / NAVBAR
   ============================================= */
.header {
    /* Fondo BLANCO siempre, también sobre el hero.
       Antes era transparente para que se viese la imagen por detrás, y eso
       obligaba a sostener el menú con halos de texto y píldoras traslúcidas
       que cambiaban de legibilidad según la foto que tocara en el carrusel.
       Con fondo sólido, el menú se lee igual con cualquier imagen y el logo
       aparece sobre su propio color, no sobre una estantería. */
    background: var(--white) !important;
    /* Sombra SOLO hacia abajo.
       =================================================================
       Antes era `0 1px 3px`: 1 px de desplazamiento contra 3 de
       desenfoque, así que la sombra se extendía medio píxel por ENCIMA
       del header y caía sobre la topbar. Con las dos barras en blanco
       eso se veía como una raya gris (#FDFDFD medido) justo en la línea
       donde se tocan, y no separa nada: ahí no hay cambio de sección,
       es la misma cabecera.

       El spread negativo (-2) recorta la sombra 2 px por todos lados y
       el desplazamiento (2) la devuelve hacia abajo: arriba queda en
       2 - 2 - 2 = -2, o sea nada. Bajo el header se ve igual o mejor,
       que es donde sí tiene que marcarse el corte con el contenido. */
    box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.10);
    transition: var(--transition);
    /* El header debe crear su propio stacking context por encima del topbar
       para que el logo, con margin-top negativo, sobresalga correctamente. */
    z-index: 1010;
}

/* En pantallas grandes, el header debe respetar el topbar */
@media (min-width: 992px) {
    .header.fixed-top {
        top: var(--topbar-height);
    }

    .topbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        /* Topbar por debajo del header. Visualmente no se solapan (el header
           arranca a partir de topbar-height), pero así el logo sale por
           encima de cualquier dropdown/tooltip del topbar. */
        z-index: 1000;
    }

    body {
        padding-top: calc(var(--topbar-height) + var(--header-height));
    }

    /* Sin topbar: ajustar posiciones */
    body.no-topbar {
        padding-top: var(--header-height);
    }

    body.no-topbar .header.fixed-top {
        top: 0;
    }

    /* ============================================================
       CON HERO: LAS BARRAS NO SE TRANSPARENTAN
       ============================================================
       Antes el carrusel se extendía por detrás del topbar y del navbar
       (padding-top: 0 y fondos transparentes). Se veía más imagen, pero
       a cambio:

         - la legibilidad del menú dependía de qué foto tocara en el
           carrusel, y había que sostenerla con halos de texto y píldoras
           traslúcidas;
         - el logo quedaba sobre la fotografía, no sobre su propio fondo;
         - la parte alta de la imagen, que es donde suelen estar las caras,
           quedaba tapada por las barras.

       Ahora las barras son blancas y opacas, así que el body recupera su
       padding y el hero empieza justo debajo. La imagen se ve entera. */
    body.has-hero {
        padding-top: calc(var(--topbar-height) + var(--header-height));
    }
    body.has-hero.no-topbar {
        padding-top: var(--header-height);
    }

    /* El topbar mantiene su fondo (--topbar-bg, blanco) también con hero:
       ya no hace falta ningún override. Los iconos y los enlaces conservan
       sus colores normales, sin píldoras ni halos, porque el fondo blanco
       les da contraste por sí solo. */

    /* ============================================================
       COLAPSO AL HACER SCROLL
       ============================================================
       - Topbar se oculta (translate + opacity)
       - Header sube a top: 0 (ocupa el hueco del topbar)
       - Navbar/logo/links se encogen
       La clase .is-scrolled la añade el JS al <body> junto con la
       clase .header-scrolled al <header>. */
    body.is-scrolled .topbar {
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
    body.is-scrolled .header.fixed-top {
        top: 0;
    }
}

/* Transición suave del topbar (fuera del media query: aplica también si se
   resize o cambia de móvil a desktop) */
.topbar {
    transition: transform 0.3s ease, opacity 0.25s ease, visibility 0.3s ease;
}

/* Header colapsado: altura y paddings reducidos, logo más pequeño */
.header.header-scrolled .navbar {
    padding: 4px 0;
    /* Con min-height fijo (ver abajo), reducir el padding ya no encoge
       nada: hay que bajar también el mínimo o el header no colapsa. */
    min-height: 54px;
}
.header.header-scrolled .logo-img {
    max-height: 42px;
    margin-top: 0;
}

/* La ALTURA MANDA, igual que en el topbar y por el mismo motivo.
   =====================================================================
   Antes la altura del header salía de sumar padding + logo, y
   --header-height era una estimación de ese resultado que había que
   recalcular a mano cada vez que se tocaba cualquiera de los dos —el
   comentario del logo, aquí debajo, es literalmente esa cuenta—. Como el
   body reserva `topbar + header` de padding, cualquier desajuste dejaba
   una franja blanca o tapaba el principio del contenido.

   Con min-height, la variable ES la altura: el logo puede crecer o
   encoger y el hueco reservado sigue siendo el correcto. */
.header .navbar {
    padding: 6px 0;
    min-height: var(--header-height);
}

.header .navbar-brand {
    padding: 0;
    position: relative;
    z-index: 1002;
}

.header .logo-img {
    /* 76 px: con el header en 64 px y el navbar con 6 px de padding arriba
       y abajo, quedan 52 px de espacio interior. El logo sube 30 px sobre
       el topbar (margin-top negativo, 75 % de sus 40 px), así que hacia
       abajo ocupa 76 - 30 = 46 px y cabe con holgura.

       Si se sube de 82, el logo empuja el min-height del navbar y el
       header crece por encima de --header-height: entonces hay que subir
       también la variable, no dejar que lo decida el logo. */
    max-height: 76px;
    width: auto;
    /* El logo sobresale hacia arriba ocupando parte del topbar.
       Se eleva ~75% de la altura del topbar. */
    margin-top: calc(var(--topbar-height) * -0.75);
    /* Permitir que se vea por encima del navbar si hace falta */
    position: relative;
    z-index: 1003;
    transition: max-height 0.3s ease, margin-top 0.3s ease;
}

/* Sin topbar: no hay nada hacia donde sobresalir */
.no-topbar .header .logo-img {
    margin-top: 0;
}

.header .site-title {
    font-family: var(--font-primary);
    font-weight: 800;
    font-size: 26px;
    color: var(--primary-color);
    letter-spacing: -0.5px;
    transition: all 0.3s ease;
}

.header.header-scrolled .site-title {
    font-size: 22px;
}

.header .navbar-nav .nav-link {
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--header-text) !important;
    padding: 10px 18px !important;
    margin: 0 2px;
    position: relative;
    transition: all 0.3s ease;
}

/* Entre 992 y 1400 px el menú va al límite y parte un enlace en dos
   líneas.
   =====================================================================
   Medido a 1264 px: el <ul> dispone de 870 px y los seis enlaces suman
   871. Uno de ellos rompe su texto, pasa de 44 px de alto a 68, y el
   header entero crece de 64 a 80. Como el `body` reserva
   `topbar + header` (104 px) y el header pasa a ocupar 80, el arranque
   del contenido queda tapado 16 px.

   No es nuevo —antes eran 88 de header contra 105 reservados, 13 px de
   desfase—, pero se ve porque en ese rango el menú se lee en dos
   alturas distintas. Se recupera el sitio quitando aire horizontal, que
   es lo que sobra ahí, en vez de tocar el tamaño del texto. */
@media (min-width: 992px) and (max-width: 1399.98px) {
    .header .navbar-nav .nav-link {
        padding: 10px 11px !important;
        /* Y si aun así no cupiera, que se apriete el espaciado antes que
           partirse: media palabra en una segunda línea descuadra la
           barra entera. */
        white-space: nowrap;
        letter-spacing: 0.3px;
    }
}

/* Efecto underline animado.
   =====================================================================
   VA EN ::before, Y NO EN ::after, A PROPOSITO
   =====================================================================
   Bootstrap dibuja la flecha de los desplegables en
   `.dropdown-toggle::after`. Cuando el subrayado vivia tambien ahi, los
   dos se peleaban por el mismo pseudoelemento en las opciones con
   submenu: ganaban `height: 2px`, `width: 0` y el `background` amarillo de
   esta regla, pero los `border` del triangulo de Bootstrap seguian
   aplicandose. Resultado: un cuadradito amarillo con el triangulo
   incrustado debajo del texto, en lugar de una flecha limpia.
   Separandolos, cada uno hace lo suyo: ::before el subrayado y ::after la
   flecha. */
.header .navbar-nav .nav-link::before {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 50%;
    width: 0;
    height: 2px;
    /* Underline en amarillo de marca */
    background: var(--brand-accent);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.header .navbar-nav .nav-link:hover::before,
.header .navbar-nav .nav-link.active::before {
    width: calc(100% - 36px);
}

/* La flecha del desplegable acompana al texto y hereda su color, asi que
   cambia a amarillo en hover igual que la palabra. Se le da un poco de
   aire para que no quede pegada a la ultima letra. */
.header .navbar-nav .nav-link.dropdown-toggle::after {
    margin-left: 0.4em;
    vertical-align: 0.15em;
}

.header .navbar-nav .nav-link:hover,
.header .navbar-nav .nav-link.active {
    /* Hover/activo en amarillo oscuro (mantiene contraste sobre blanco) */
    color: var(--brand-accent-dark) !important;
}

.header .dropdown-menu {
    border: none;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    padding: 12px 0;
    margin-top: 10px;
    animation: dropdownFade 0.25s ease;
}

@keyframes dropdownFade {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.header .dropdown-item {
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 500;
    color: var(--gray-700);
    transition: all 0.2s ease;
}

.header .dropdown-item:hover,
.header .dropdown-item.active {
    background: linear-gradient(90deg, var(--primary-color), var(--primary-color-light, var(--primary-color)));
    color: var(--white);
    padding-left: 28px;
}

.header.header-scrolled {
    /* Mismo patrón que .header: sombra contenida que no sube al topbar */
    box-shadow: 0 8px 16px -6px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.95) !important;
}

/* Las reglas .header.header-scrolled .navbar y .logo-img están definidas
   más arriba junto al bloque de colapso al scroll (con valores reducidos).
   Se elimina aquí el duplicado que pisaba el tamaño. */

.header .navbar-toggler {
    border-color: rgba(0, 0, 0, 0.3);
}

.header .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Quick Icons en Navbar (solo movil) */
.navbar-quick-icons {
    gap: 8px;
    margin-right: 10px;
}

.navbar-quick-icons .quick-icon {
    color: var(--gray-700);
    font-size: 18px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--gray-100);
    transition: var(--transition);
}

.navbar-quick-icons .quick-icon:hover {
    background: var(--primary-color);
    color: var(--white);
}

/* =============================================
   HERO / CAROUSEL
   ============================================= */
.hero-section {
    position: relative;
    /* =========================================================
       ALTURA DEL HERO
       =========================================================
       Antes era 100vh fijo, y tenía sentido cuando las barras se
       transparentaban y flotaban ENCIMA de la imagen: el hero ocupaba
       la pantalla entera.

       Al pasar las barras a opacas empezaron a ocupar su propio
       espacio, así que barras + hero sumaban 100vh + 105px. Resultado:
       el titular, anclado a 80 px del borde inferior del hero, caía por
       debajo del pliegue y no se veía sin hacer scroll. Justo el texto
       que más importa.

       Restando las barras, barras + hero vuelven a sumar exactamente
       una pantalla.

       Y se le pone un techo de 620 px: en un monitor grande, un hero de
       900 px de alto empuja todo lo demás fuera de la vista y el
       visitante no llega a intuir que hay contenido debajo. Con este
       tope siempre asoma el arranque de la sección siguiente, que es lo
       que invita a seguir bajando. */
    height: calc(100vh - var(--topbar-height) - var(--header-height));
    max-height: 620px;
    min-height: 380px;
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
}

/* Forzar que no haya gap después del hero-section */
.hero-section + main,
.hero-section + #main-content,
#hero + main,
#hero + #main-content {
    margin-top: 0 !important;
}

.hero-section .carousel,
.hero-section .carousel-inner,
.hero-section .carousel-item,
.hero-section .hero-single {
    height: 100%;
}

.hero-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Se conservan las propiedades de fondo: el placeholder (.hero-placeholder)
       sigue pintándose así, y cualquier plantilla antigua que aún ponga
       background-image en línea sigue funcionando igual que antes. */
    background-size: cover;
    /* Encuadre: el sujeto principal queda en la parte superior de la imagen */
    background-position: center top;
    background-repeat: no-repeat;
}

/* La imagen del hero ahora es un <img> real, no un fondo.
   Un background no admite srcset, así que el móvil descargaba la versión
   de 1920 px para pintarla en 390. Con <img> el navegador elige la
   variante que le conviene y el primer slide puede pedirse con prioridad.

   object-fit + object-position reproducen exactamente lo que hacían
   background-size: cover y background-position: center top, de modo que
   el encuadre no cambia respecto a como se veía antes.

   Sin z-index: queda por debajo del scrim (.hero-img::before, z-index: 1)
   por el orden natural de apilado. */
.hero-img-el {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

/* Velo OSCURO en la mitad inferior del hero, donde va el caption.
   ============================================================
   Antes era un degradado blanco y el texto iba en oscuro con halo blanco.
   Eso funciona sobre fotos claras y se cae en cuanto la imagen tiene
   colores fuertes: con la foto de la ferretería, llena de amarillos y
   producto, el titular quedaba ilegible por mucho halo que llevara.

   Con velo oscuro y texto blanco el contraste ya no depende de la foto:
   por debajo del velo todo es oscuro, salga lo que salga en el carrusel.
   Es la diferencia entre un contraste que se cumple y uno que se cruza
   los dedos.

   El azul es el de marca (#1E3A5F) y arriba se deja limpio, para no
   ensuciar las caras ni la parte alta de la imagen. */
.hero-img::before {
    content: '';
    position: absolute;
    inset: 0;
    /* Los rgba() son --brand-primary-dark (#152B45 = 21,43,69) y
       --brand-primary (#1E3A5F = 30,58,95). Van en literal porque una
       variable hex no se puede usar dentro de rgba() con alfa. Si se
       cambia la paleta, hay que tocarlos aquí también. */
    /* El velo llega más arriba que antes porque el titular también subió
       (de 80 px fijos a un 22 % de la altura). Si se hubiera dejado el
       degradado anterior, el texto habría acabado en la franja donde el
       velo ya estaba casi transparente y el contraste se habría caído a
       la mitad. Velo y caption tienen que moverse juntos. */
    background: linear-gradient(
        to top,
        rgba(21, 43, 69, 0.90) 0%,
        rgba(21, 43, 69, 0.80) 35%,
        rgba(30, 58, 95, 0.55) 55%,
        rgba(30, 58, 95, 0.22) 75%,
        rgba(30, 58, 95, 0) 92%
    );
    pointer-events: none;
    z-index: 1;
}

.hero-placeholder {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
}

.hero-video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Mismo encuadre que hero-img: desde arriba */
    object-position: center top;
}

/* Mismo scrim para hero de vídeo, ver nota en .hero-img::before. */
.hero-video-container::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(255, 255, 255, 0.55) 0%,
        rgba(255, 255, 255, 0.25) 30%,
        rgba(255, 255, 255, 0) 55%
    );
    pointer-events: none;
    z-index: 1;
}

.hero-content {
    position: absolute;
    /* 22 % en vez de 80 px fijos.
       Los 80 px estaban pensados para un hero de 900 px de alto; con 620
       el titular quedaba casi pegado al borde inferior, sin aire debajo.
       En porcentaje, la proporción se mantiene sea cual sea la altura. */
    bottom: 22%;
    left: 0;
    right: 0;
    z-index: 2;
    padding: 0;
}

.hero-content .container {
    max-width: 100%;
    padding: 0;
}

.hero-text {
    max-width: 100%;
    width: 100%;
    text-align: center;
    /* Texto BLANCO sobre el velo oscuro. Los halos blancos de antes ya no
       tienen sentido: servían para despegar un texto oscuro de una foto
       clara, y aquí el fondo es siempre oscuro. */
    color: var(--white);
    padding: 0 5%;
}

.hero-text h1 {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--white);
    margin-bottom: 15px;
    /* Sombra oscura muy suave: no hace falta para el contraste -de eso se
       encarga el velo- sino para que los bordes de la letra no vibren si
       justo detrás cae una zona clara de la foto. */
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
    max-width: 100%;
}

.hero-text p {
    font-size: 1.3rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.94);
    margin-bottom: 25px;
    max-width: 100%;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.btn-hero {
    background: var(--primary-color);
    color: var(--white);
    padding: 15px 40px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: var(--transition);
}

.btn-hero:hover {
    background: var(--primary-dark);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(13, 110, 253, 0.4);
}

.hero-section .carousel-control-prev,
.hero-section .carousel-control-next {
    width: 60px;
    opacity: 0.7;
}

.hero-section .carousel-control-prev:hover,
.hero-section .carousel-control-next:hover {
    opacity: 1;
}

.hero-section .carousel-indicators {
    bottom: 20px;
    margin-bottom: 0;
}

.hero-section .carousel-indicators button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin: 0 5px;
}

.scroll-indicator {
    position: absolute;
    bottom: 20px;
    right: 30px;
    left: auto;
    transform: none;
    z-index: 3;
}

/* Indicador de scroll: círculo amarillo de marca con flecha azul oscuro.
   Contraste máximo sobre cualquier fondo del hero (imagen, vídeo, scrim)
   y coherente con la paleta corporativa. Sombra sutil para anclarlo. */
.scroll-down {
    display: flex;
    width: 46px;
    height: 46px;
    background: var(--brand-accent);
    border: 2px solid var(--brand-accent);
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    color: var(--brand-primary);
    font-size: 1.25rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25),
                0 0 0 4px rgba(255, 201, 64, 0.2);
    animation: bounce 2s infinite;
    transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.scroll-down:hover,
.scroll-down:focus-visible {
    background: var(--brand-accent-dark);
    border-color: var(--brand-accent-dark);
    color: var(--brand-primary);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35),
                0 0 0 6px rgba(255, 201, 64, 0.25);
    transform: scale(1.08);
    animation-play-state: paused;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
}

/* =============================================
   SECTIONS
   ============================================= */
.section-padding {
    padding: 80px 0;
}

/* Párrafo de entrada del contenido.
   En gris oscuro y NO en color de acento: un párrafo entero en naranja
   se lee peor y le roba protagonismo al botón, que debería ser lo único
   de ese color en la página. */
.page-body .lead {
    color: var(--gray-700);
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.7;
    margin-bottom: 1.75rem;
}

/* Gap entre hero y wrapper de contenido: sólo eliminamos margin-top; el
   padding-top del primer bloque lo gestionan las reglas al final del
   archivo (ESPACIADO HERO ↔ CONTENIDO), que dan 80px por defecto y 0 para
   secciones tipo hero-empresa/cta que deben pegarse al hero. */
.hero-section + #main-content > section:first-child,
.hero-section + #main-content > .page-content:first-child,
.hero-section + #main-content > .home-content-wrapper,
#hero + #main-content > .home-content-wrapper,
#home-content,
.hero-section ~ #main-content #home-content,
#hero ~ #main-content #home-content {
    margin-top: 0 !important;
}

/* Hero-empresa como primera sección siempre pega al hero (sin margen). */
.home-content-wrapper > .hero-empresa:first-child,
.home-content-wrapper > section.hero-empresa:first-child,
section.hero-empresa:first-child,
.hero-section ~ #main-content .hero-empresa,
#hero ~ #main-content .hero-empresa {
    margin-top: 0 !important;
}

/* Espacio superior en páginas SIN hero (las que muestran .page-header-section).
   En páginas con hero, el propio carrusel + el padding de la primera sección
   (py-5 / section-padding) ya son suficientes; añadir aquí 60px extra
   provocaba un hueco claramente visible entre el hero y el primer texto. */
body:not(.has-hero) #main-content > section:first-child:not(.section-no-top-space) .container:first-child,
body:not(.has-hero) #main-content > .page-content:first-child .container:first-child {
    padding-top: 60px;
}

/* Clase para secciones sin espacio superior (ej: fondos de color que deben pegar al hero) */
.section-no-top-space {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Eliminar gap entre última sección y footer */
#main-content > section:last-child,
#main-content > .page-content:last-child,
#main-content > .home-content-wrapper:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Clase para secciones sin espacio inferior (ej: CTAs con fondo que deben pegar al footer) */
.section-no-bottom-space {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* Secciones full-width con fondo que deben ocupar todo el ancho */
.section-fullwidth {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    padding-left: 0;
    padding-right: 0;
}

/* Contenedor interno para secciones full-width */
.section-fullwidth > .container {
    max-width: 1320px;
    margin: 0 auto;
    padding-left: 12px;
    padding-right: 12px;
}

/* Secciones con fondo de color - espaciado interno con padding */
.section-colored {
    padding: 80px 0;
    margin: 0;
}

/* Eliminar márgenes de Bootstrap que puedan interferir */
#main-content {
    margin: 0 !important;
    padding: 0 !important;
    display: block;
}

/* Forzar body sin gap después del hero */
body > .hero-section + main,
body > #hero + main,
body .hero-section + #main-content,
body #hero + #main-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.section-header {
    margin-bottom: 50px;
}

.section-header h2 {
    font-size: 2.5rem;
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
}

.section-header h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: var(--primary-color);
}

.section-header p {
    color: var(--gray-600);
    font-size: 1.1rem;
    max-width: 600px;
    margin: 20px auto 0;
}

.bg-light {
    background: var(--gray-100) !important;
}

/* =============================================
   GALLERY SECTION
   ============================================= */
.gallery-card {
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: var(--transition);
    background: var(--white);
}

.gallery-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.gallery-card a {
    display: block;
    color: inherit;
}

.gallery-image {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.gallery-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

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

.gallery-placeholder {
    width: 100%;
    height: 100%;
    background: var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-placeholder i {
    font-size: 3rem;
    color: var(--gray-400);
}

.gallery-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 15px;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    color: var(--white);
}

.gallery-count {
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.gallery-info {
    padding: 20px;
}

.gallery-info h3 {
    font-size: 1.1rem;
    margin-bottom: 8px;
}

.gallery-info p {
    font-size: 14px;
    color: var(--gray-600);
    margin: 0;
}

.gallery-date {
    font-size: 13px;
    color: var(--gray-500);
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 8px;
}

.gallery-type-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: var(--primary-color);
    color: var(--white);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

/* Gallery Filters */
.filter-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.btn-filter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: 2px solid var(--gray-300);
    background: var(--white);
    color: var(--gray-700);
    border-radius: 30px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-filter:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.btn-filter.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white);
}

.btn-filter .badge {
    background: rgba(0,0,0,0.15);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
}

.btn-filter.active .badge {
    background: rgba(255,255,255,0.25);
}

@media (max-width: 767px) {
    .btn-filter {
        padding: 8px 14px;
        font-size: 13px;
    }

    .btn-filter .badge {
        display: none;
    }
}

/* Gallery Page */
.gallery-item {
    position: relative;
    border-radius: var(--border-radius);
    overflow: hidden;
}

.gallery-item img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.gallery-item:hover img {
    transform: scale(1.05);
}

.gallery-item-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: var(--transition);
}

.gallery-item:hover .gallery-item-overlay {
    opacity: 1;
}

.gallery-item-overlay i {
    font-size: 2rem;
    color: var(--white);
}

/* Gallery - Foto Denuncia Button */
.btn-foto-denuncia {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, var(--danger-color), #c82333);
    border: none;
    color: var(--white);
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-left: auto;
}

.btn-foto-denuncia:hover {
    background: linear-gradient(135deg, #c82333, #a71d2a);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.4);
    color: var(--white);
}

.btn-foto-denuncia i {
    font-size: 16px;
}

.gallery-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

/* Foto Denuncia Modal */
#fotoDenunciaModal .modal-header {
    background: linear-gradient(135deg, var(--danger-color), #c82333);
    color: var(--white);
    border-bottom: none;
}

#fotoDenunciaModal .modal-header .btn-close {
    filter: brightness(0) invert(1);
}

#fotoDenunciaModal .modal-title i {
    font-size: 1.2rem;
}

/* Upload Area */
.foto-denuncia-upload {
    border: 2px dashed var(--gray-400);
    border-radius: var(--border-radius);
    padding: 30px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: var(--gray-100);
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.foto-denuncia-upload:hover,
.foto-denuncia-upload.drag-over {
    border-color: var(--primary-color);
    background: rgba(30, 75, 143, 0.05);
}

.upload-placeholder {
    color: var(--gray-600);
}

.upload-placeholder i {
    font-size: 3rem;
    color: var(--gray-400);
    margin-bottom: 10px;
    display: block;
}

.upload-placeholder p {
    margin: 0;
    font-weight: 500;
}

.upload-preview {
    position: relative;
    width: 100%;
    max-width: 300px;
}

.upload-preview img {
    max-width: 100%;
    max-height: 200px;
    object-fit: contain;
    border-radius: var(--border-radius);
}

.upload-preview .remove-image {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Captcha */
.captcha-container {
    display: flex;
    gap: 10px;
    align-items: center;
}

#fdCaptchaCanvas {
    flex: 1;
    border-radius: var(--border-radius);
    border: 1px solid var(--gray-300);
    max-width: 180px;
    height: 50px;
}

#fdRefreshCaptcha {
    height: 44px;
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#fdRefreshCaptcha i {
    font-size: 1.2rem;
}

/* Modal responsive */
@media (max-width: 767px) {
    .btn-foto-denuncia {
        width: 100%;
        justify-content: center;
        margin-top: 15px;
    }

    .gallery-filters {
        flex-direction: column;
    }

    .gallery-filters .filter-buttons {
        width: 100%;
    }

    .foto-denuncia-upload {
        padding: 20px;
        min-height: 150px;
    }

    #fdCaptchaCanvas {
        max-width: 150px;
        height: 45px;
    }
}

/* =============================================
   NEWS SECTION
   ============================================= */
.news-card {
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: var(--transition);
    background: var(--white);
    height: 100%;
}

.news-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.news-card a {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
}

.news-image {
    position: relative;
    height: 180px;
    overflow: hidden;
}

.news-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

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

.news-placeholder {
    width: 100%;
    height: 100%;
    background: var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
}

.news-placeholder i {
    font-size: 2.5rem;
    color: var(--gray-400);
}

.news-category {
    position: absolute;
    top: 15px;
    left: 15px;
    background: var(--primary-color);
    color: var(--white);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.news-content {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.news-date {
    font-size: 13px;
    color: var(--gray-500);
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 10px;
}

.news-content h3 {
    font-size: 1rem;
    margin-bottom: 10px;
    line-height: 1.4;
}

.news-content p {
    font-size: 14px;
    color: var(--gray-600);
    margin-bottom: 15px;
    flex: 1;
}

.read-more {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Featured News Card */
.news-card-featured {
    background: var(--white);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.news-card-featured:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.news-card-featured a {
    text-decoration: none;
    color: inherit;
}

.news-featured-image {
    position: relative;
    height: 100%;
    min-height: 350px;
    overflow: hidden;
}

.news-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform 0.5s ease;
}

.news-card-featured:hover .news-featured-image img {
    transform: scale(1.05);
}

.news-placeholder-lg {
    width: 100%;
    height: 100%;
    min-height: 350px;
    background: var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
}

.news-placeholder-lg i {
    font-size: 4rem;
    color: var(--gray-400);
}

.news-featured-content {
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.news-badge {
    display: inline-block;
    background: var(--primary-color);
    color: var(--white);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 15px;
    width: fit-content;
}

.news-featured-content .news-date {
    font-size: 14px;
    margin-bottom: 15px;
}

.news-featured-content h2 {
    font-size: 1.75rem;
    margin-bottom: 15px;
    line-height: 1.3;
    color: var(--gray-900);
}

.news-featured-content p {
    font-size: 1rem;
    color: var(--gray-600);
    line-height: 1.6;
    margin-bottom: 20px;
}

.read-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--primary-color);
    transition: gap 0.3s ease;
}

.news-card-featured:hover .read-more-btn {
    gap: 12px;
}

/* News Module Layout */
.news-module {
    padding: 0;
}

.news-grid-section {
    margin-top: 40px;
}

/* Featured News Responsive */
@media (max-width: 991px) {
    .news-featured-image {
        min-height: 280px;
    }

    .news-featured-content {
        padding: 25px;
    }

    .news-featured-content h2 {
        font-size: 1.5rem;
    }
}

@media (max-width: 767px) {
    .news-card-featured .row {
        flex-direction: column;
    }

    .news-featured-image {
        min-height: 220px;
    }

    .news-placeholder-lg {
        min-height: 220px;
    }

    .news-featured-content {
        padding: 20px;
    }

    .news-featured-content h2 {
        font-size: 1.3rem;
    }
}

/* Opinion Module */
.opinion-module .opinion-badge {
    background: var(--secondary-color, #6c757d);
}

.opinion-module .news-category {
    background: var(--secondary-color, #6c757d);
}

/* News Detail */
.news-detail-content {
    background: var(--white);
    padding: 40px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
}

.news-meta {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.news-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    color: var(--gray-600);
}

.news-category-badge {
    background: var(--gray-100);
    padding: 4px 12px;
    border-radius: 20px;
}

.news-featured-image img {
    border-radius: var(--border-radius);
}

.news-body {
    font-size: 17px;
    line-height: 1.8;
}

.news-body p {
    margin-bottom: 20px;
}

.news-body img {
    border-radius: var(--border-radius);
    margin: 20px 0;
}

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

.share-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 15px;
}

.btn-facebook {
    background: #3b5998;
    color: var(--white);
}

.btn-facebook:hover {
    background: #2d4373;
    color: var(--white);
}

.btn-twitter {
    background: #000;
    color: var(--white);
}

.btn-twitter:hover {
    background: #333;
    color: var(--white);
}

.btn-whatsapp {
    background: #25d366;
    color: var(--white);
}

.btn-whatsapp:hover {
    background: #1da851;
    color: var(--white);
}

/* =============================================
   SIDEBAR WIDGETS (Home)
   ============================================= */
.sidebar-widget {
    background: var(--white);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    padding: 20px;
    margin-bottom: 20px;
}

.widget-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gray-800);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--primary-color);
    display: flex;
    align-items: center;
}

/* Quick Actions Widget */
.quick-actions-widget {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: var(--white);
}

.quick-actions-widget .widget-title {
    color: var(--white);
    border-bottom-color: rgba(255,255,255,0.3);
}

.quick-action-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: rgba(255,255,255,0.1);
    border-radius: var(--border-radius);
    margin-bottom: 10px;
    text-decoration: none;
    color: var(--white);
    transition: all 0.3s ease;
}

.quick-action-card:last-child {
    margin-bottom: 0;
}

.quick-action-card:hover {
    background: rgba(255,255,255,0.2);
    transform: translateX(5px);
    color: var(--white);
}

.quick-action-icon {
    width: 50px;
    height: 50px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.quick-action-icon i {
    font-size: 1.5rem;
}

.quick-action-card.foto-denuncia .quick-action-icon {
    background: var(--danger-color);
}

.quick-action-card.sugerencias .quick-action-icon {
    background: var(--warning-color);
    color: var(--gray-800);
}

.quick-action-content {
    flex: 1;
}

.quick-action-content h5 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 5px 0;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    letter-spacing: 0.02em;
}

.quick-action-content p {
    font-size: 0.85rem;
    margin: 0;
    opacity: 0.95;
    text-shadow: 0 1px 1px rgba(0,0,0,0.2);
}

.quick-action-card > .bi-chevron-right {
    font-size: 1.2rem;
    opacity: 0.7;
}

/* Events Widget */
.events-widget {
    background: var(--white);
}

.events-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.event-item {
    display: flex;
    gap: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--gray-200);
}

.event-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.event-date {
    width: 55px;
    height: 55px;
    background: var(--primary-color);
    color: var(--white);
    border-radius: var(--border-radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.event-date .day {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
}

.event-date .month {
    font-size: 0.7rem;
    text-transform: uppercase;
    font-weight: 600;
}

.event-info {
    flex: 1;
    min-width: 0;
}

.event-info h5 {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0 0 8px 0;
    color: var(--gray-800);
    line-height: 1.3;
}

.event-time,
.event-location {
    display: block;
    font-size: 0.8rem;
    color: var(--gray-600);
    margin-bottom: 3px;
}

.event-time i,
.event-location i {
    width: 16px;
    margin-right: 5px;
    color: var(--primary-color);
}

.no-events {
    text-align: center;
    padding: 30px 15px;
    color: var(--gray-500);
}

.no-events i {
    font-size: 2.5rem;
    margin-bottom: 10px;
    display: block;
    opacity: 0.5;
}

.no-events p {
    margin: 0;
    font-size: 0.9rem;
}

/* Responsive sidebar */
@media (max-width: 991px) {
    .sidebar-widget {
        margin-top: 30px;
    }

    .quick-action-card {
        padding: 12px;
    }

    .quick-action-icon {
        width: 45px;
        height: 45px;
    }

    .quick-action-icon i {
        font-size: 1.3rem;
    }
}

/* =============================================
   CTA SECTION
   ============================================= */
.cta-section {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: var(--white);
}

.cta-content h2 {
    color: var(--white);
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.cta-content p {
    font-size: 1.1rem;
    opacity: 0.9;
    margin-bottom: 30px;
}

.cta-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

/* =============================================
   PAGE HEADER (usado en páginas secundarias sin hero)
   Fondo blanco, compacto, pegado a la navbar (se extiende bajo la
   navbar transparente con margin-top negativo + padding-top que
   compensa la altura del header). Texto en colores de marca para
   contraste sobre blanco.
   ============================================= */
.page-header-section {
    background: var(--white);
    border-bottom: 1px solid var(--gray-200, #e9ecef);
    /* Pegado a la navbar: la sección arranca bajo el header fijo. */
    margin-top: calc(var(--header-height) * -1);
    padding: calc(20px + var(--header-height)) 0 20px;
}

@media (min-width: 992px) {
    .page-header-section {
        padding: calc(30px + var(--header-height)) 0 28px;
    }
}

.page-header-content {
    text-align: center;
    color: var(--gray-800, #343a40);
}

.page-header-content h1 {
    color: var(--brand-primary);
    font-size: 1.75rem;
    margin-bottom: 10px;
    font-weight: 700;
}

@media (min-width: 992px) {
    .page-header-content h1 {
        font-size: 2rem;
    }
}

.page-header-content .breadcrumb {
    justify-content: center;
    margin: 0;
    font-size: 0.9rem;
}

/* Breadcrumbs sobre fondo blanco: enlace en azul marino, activo en gris. */
.page-header-content .breadcrumb-item {
    color: var(--gray-600, #6c757d);
}
.page-header-content .breadcrumb-item a {
    color: var(--brand-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}
.page-header-content .breadcrumb-item a:hover {
    color: var(--brand-accent-dark, #E0A800);
}
.page-header-content .breadcrumb-item.active {
    color: var(--gray-700, #495057);
    font-weight: 600;
}
.page-header-content .breadcrumb-item + .breadcrumb-item::before {
    color: var(--gray-400, #ced4da);
}

/* =============================================
   FOOTER
   ============================================= */
.footer {
    background: var(--gray-900);
    color: var(--gray-400);
    margin-top: 0; /* Sin margen - la sección anterior gestiona su espacio */
}

.footer-main {
    padding: 60px 0;
}

.footer-logo img {
    max-height: 60px;
    width: auto;
}

.footer-title {
    color: var(--white);
    font-size: 1.5rem;
}

.footer-about p,
.footer-contact p {
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 1.7;
}

/* Iconos del footer en amarillo de marca para máximo contraste sobre el
   fondo oscuro (antes: --primary-color azul marino, bajo contraste). */
.footer-contact i {
    color: var(--brand-accent);
    margin-right: 8px;
    font-size: 1.05rem;
}

.footer-links h4,
.footer-social h4 {
    color: var(--white);
    font-size: 1.1rem;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
}

.footer-links h4::after,
.footer-social h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background: var(--brand-accent);
}

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

.footer-links li {
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.footer-links li i {
    color: var(--brand-accent);
    margin-top: 4px;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.footer-links a {
    color: var(--gray-300, #dee2e6);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-links a:hover,
.footer-links a:focus-visible {
    color: var(--brand-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Lista de navegación del sitio en el footer: compacta, con chevron. */
.footer-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-nav-list li {
    margin-bottom: 10px;
    display: block;
}

.footer-nav-list a {
    color: var(--gray-300, #dee2e6);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.2s ease, transform 0.2s ease;
}

.footer-nav-list a .bi {
    color: var(--brand-accent);
    font-size: 0.85rem;
    transition: transform 0.2s ease;
}

.footer-nav-list a:hover,
.footer-nav-list a:focus-visible {
    color: var(--white);
}

.footer-nav-list a:hover .bi,
.footer-nav-list a:focus-visible .bi {
    transform: translateX(3px);
}

.footer-social .social-links {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.footer-social .social-links a {
    width: 42px;
    height: 42px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: var(--transition);
}

.footer-social .social-links a:hover,
.footer-social .social-links a:focus-visible {
    background: var(--brand-accent);
    color: var(--brand-primary);
    border-color: var(--brand-accent);
    transform: translateY(-2px);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 20px 0;
    font-size: 14px;
}

.footer-legal {
    display: flex;
    gap: 20px;
    justify-content: flex-end;
}

.footer-legal a {
    color: var(--gray-400);
}

.footer-legal a:hover {
    color: var(--white);
}

/* =============================================
   BACK TO TOP
   ============================================= */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 45px;
    height: 45px;
    background: var(--primary-color);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    box-shadow: var(--shadow);
}

.back-to-top:hover {
    background: var(--primary-dark);
    color: var(--white);
    transform: translateY(-3px);
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
}

/* =============================================
   ERROR PAGE
   ============================================= */
.error-section {
    min-height: 60vh;
    display: flex;
    align-items: center;
}

.error-icon {
    font-size: 5rem;
    color: var(--warning-color);
    margin-bottom: 20px;
}

.error-code {
    font-size: 8rem;
    font-weight: 800;
    color: var(--gray-300);
    line-height: 1;
    margin-bottom: 20px;
}

.error-content h2 {
    margin-bottom: 15px;
}

.error-content p {
    color: var(--gray-600);
    margin-bottom: 0;
}

/* =============================================
   PAGE CONTENT
   ============================================= */
.page-content {
    background: var(--white);
    margin: 0; /* Sin márgenes externos */
}

/* Cuando page-content tiene secciones internas con fondo, quitar su fondo */
.page-content:has(.section-fullwidth) {
    background: transparent;
}

/* Home content wrapper - permite secciones full-width */
.home-content-wrapper {
    margin: 0;
    padding: 0;
}

/* Contenido directo sin secciones (texto, párrafos, etc.) */
.home-content-wrapper > p,
.home-content-wrapper > h1,
.home-content-wrapper > h2,
.home-content-wrapper > h3,
.home-content-wrapper > h4,
.home-content-wrapper > h5,
.home-content-wrapper > h6,
.home-content-wrapper > ul,
.home-content-wrapper > ol,
.home-content-wrapper > div:not(.container):not([class*="section"]) {
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

/* Las secciones dentro del contenido del home gestionan su propio espacio */
.home-content-wrapper > section {
    margin: 0;
}

/* Primera sección después del hero - sin espacio superior si tiene fondo */
.home-content-wrapper > section:first-child {
    margin-top: 0;
}

/* Última sección antes del footer - sin margen extra */
.home-content-wrapper > section:last-child {
    margin-bottom: 0;
}

.page-body {
    font-size: 17px;
    line-height: 1.8;
}

.page-body p {
    margin-bottom: 20px;
}

.page-body h2, .page-body h3, .page-body h4 {
    margin-top: 30px;
    margin-bottom: 15px;
}

.page-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius);
    margin: 20px 0;
}

.page-body ul, .page-body ol {
    margin-bottom: 20px;
    padding-left: 25px;
}

.page-body li {
    margin-bottom: 8px;
}

.page-body.page-intro {
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid #eee;
}

.page-body.page-intro:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* =============================================
   TEAM / CONCEJALES SECTION
   ============================================= */
.team-section {
    padding: 20px 0;
}

.team-group-title {
    color: var(--primary-color);
    font-size: 1.5rem;
    position: relative;
    display: inline-block;
}

.team-group-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 3px;
    background: var(--primary-color);
}

.team-card {
    background: var(--white);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: var(--transition);
    height: 100%;
}

.team-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.team-image {
    position: relative;
    height: 380px;
    overflow: hidden;
}

.team-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform 0.5s ease;
}

.team-card:hover .team-image img {
    transform: scale(1.05);
}

.team-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--gray-200), var(--gray-300));
    display: flex;
    align-items: center;
    justify-content: center;
}

.team-placeholder i {
    font-size: 5rem;
    color: var(--gray-400);
}

.team-social {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 15px;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    display: flex;
    gap: 10px;
    justify-content: center;
    opacity: 0;
    transform: translateY(20px);
    transition: var(--transition);
}

.team-card:hover .team-social {
    opacity: 1;
    transform: translateY(0);
}

.team-social a {
    width: 36px;
    height: 36px;
    background: var(--white);
    color: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.team-social a:hover {
    background: var(--primary-color);
    color: var(--white);
}

.team-info {
    padding: 25px;
    text-align: center;
}

.team-info h4 {
    font-size: 1.1rem;
    margin-bottom: 5px;
    color: var(--gray-900);
}

.team-position {
    display: block;
    color: var(--primary-color);
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 15px;
}

.team-bio {
    font-size: 14px;
    color: var(--gray-600);
    margin-bottom: 15px;
    line-height: 1.6;
}

.team-contact {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.team-contact-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    color: var(--gray-600);
}

.team-contact-link:hover {
    color: var(--primary-color);
}

.team-contact-link i {
    color: var(--primary-color);
}

/* =============================================
   CONTACT SECTION
   ============================================= */
/* =============================================
   CONTACT MODULE
   Módulo de formulario de contacto (module-contact.php)
   Paleta alineada con la marca: azul primario + amarillo de acento.
   ============================================= */
.contact-section {
    padding: 20px 0;
}

/* El módulo completo necesita aire inferior porque va seguido por el CTA o
   el footer sin hueco propio. */
.contact-module {
    padding-bottom: 80px;
}

@media (max-width: 767px) {
    .contact-module {
        padding-bottom: 50px;
    }
}

/* Tarjeta de información de contacto: fondo de marca (azul primario)
   con un acento amarillo en la franja superior para firmar la identidad. */
.contact-info-card {
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
    color: var(--white);
    padding: 40px 30px;
    border-radius: var(--border-radius);
    height: 100%;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(30, 58, 107, 0.15);
}

.contact-info-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--brand-accent);
}

.contact-info-card h2,
.contact-info-card h3 {
    color: var(--white);
    margin-bottom: 10px;
}

.contact-info-card p.text-muted {
    /* Sobreescribe el gris de Bootstrap: sobre fondo azul oscuro necesitamos
       un blanco translúcido para mantener contraste (WCAG AA). */
    color: rgba(255, 255, 255, 0.8) !important;
}

.contact-info-item {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
    align-items: flex-start;
}

.contact-info-item:last-of-type {
    margin-bottom: 20px;
}

.contact-icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 201, 64, 0.18);
    border: 1px solid rgba(255, 201, 64, 0.35);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--brand-accent);
    transition: transform 0.2s ease, background 0.2s ease;
}

.contact-info-item:hover .contact-icon {
    background: rgba(255, 201, 64, 0.3);
    transform: scale(1.05);
}

.contact-icon i {
    font-size: 20px;
}

.contact-text h3,
.contact-text h5 {
    color: var(--white);
    font-size: 1rem;
    margin-bottom: 5px;
    font-weight: 600;
}

.contact-text p,
.contact-text address {
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    font-style: normal;
    line-height: 1.6;
}

.contact-text a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: color 0.2s ease;
}

.contact-text a:hover,
.contact-text a:focus-visible {
    color: var(--brand-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.contact-social h3,
.contact-social h5 {
    color: var(--white);
    font-size: 1rem;
    margin-bottom: 15px;
    font-weight: 600;
}

/* Botones sociales dentro de la tarjeta azul: coherencia con el footer. */
.contact-social .social-links {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.contact-info-card .contact-social .social-links a {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.contact-info-card .contact-social .social-links a:hover,
.contact-info-card .contact-social .social-links a:focus-visible {
    background: var(--brand-accent);
    color: var(--brand-primary);
    border-color: var(--brand-accent);
    transform: translateY(-2px);
}

/* Tarjeta del formulario: blanco limpio, sombra sutil. */
.contact-form-card {
    background: var(--white);
    padding: 40px;
    border-radius: var(--border-radius);
    box-shadow: 0 10px 30px rgba(30, 58, 107, 0.08);
    height: 100%;
}

.contact-form-card h2,
.contact-form-card h3 {
    color: var(--brand-primary);
    margin-bottom: 10px;
}

.contact-form .form-label {
    font-weight: 500;
    color: var(--gray-800);
    margin-bottom: 6px;
}

.contact-form .form-control {
    padding: 12px 15px;
    border-color: var(--gray-300);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-form .form-control:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(30, 58, 107, 0.15);
}

/* Checkbox de política de privacidad: acento de marca cuando está marcado. */
.contact-form .form-check-input:checked {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.contact-form .form-check-input:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(30, 58, 107, 0.15);
}

/* Botón de enviar en azul primario con hover amarillo de marca. */
.contact-form .btn-primary {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    padding: 12px 32px;
    font-weight: 600;
    transition: all 0.25s ease;
}

.contact-form .btn-primary:hover:not(:disabled),
.contact-form .btn-primary:focus-visible:not(:disabled) {
    background: var(--brand-primary-dark);
    border-color: var(--brand-primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(30, 58, 107, 0.25);
}

/* Enlace "Política de Privacidad" dentro del checkbox y bloque legal. */
.contact-form-card a {
    color: var(--brand-primary);
    font-weight: 500;
}
.contact-form-card a:hover,
.contact-form-card a:focus-visible {
    color: var(--brand-accent-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.contact-map {
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(30, 58, 107, 0.1);
}

.contact-map iframe {
    border-radius: var(--border-radius);
}

/* Privacy info (aviso RGPD bajo el formulario): marca con borde amarillo. */
.privacy-info {
    background: var(--gray-100);
    padding: 20px;
    border-radius: var(--border-radius);
    border-left: 4px solid var(--brand-accent);
}

.privacy-info p {
    margin-bottom: 8px;
    color: var(--gray-700);
    line-height: 1.5;
}

.privacy-info p:last-child {
    margin-bottom: 0;
}

.privacy-info strong {
    color: var(--brand-primary);
}

.privacy-info a {
    color: var(--brand-primary);
    text-decoration: underline;
    font-weight: 500;
}

.privacy-info a:hover,
.privacy-info a:focus-visible {
    color: var(--brand-accent-dark);
}

/* =============================================
   SUGGESTIONS MODULE
   ============================================= */
.suggestions-module {
    padding: 20px 0;
}

.suggestions-intro {
    max-width: 700px;
    margin: 0 auto;
}

.suggestions-icon {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.suggestions-icon i {
    font-size: 3rem;
    color: var(--white);
}

.suggestions-intro h2 {
    color: var(--gray-900);
    margin-bottom: 15px;
}

.suggestions-intro .lead {
    color: var(--gray-700);
    font-size: 1.15rem;
}

.suggestions-form-card {
    background: var(--white);
    padding: 40px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
}

.suggestions-form .input-group-text {
    background: var(--gray-100);
    border-color: var(--gray-300);
    color: var(--gray-600);
}

.suggestions-form .form-control,
.suggestions-form .form-select {
    border-color: var(--gray-300);
}

.suggestions-form .form-control:focus,
.suggestions-form .form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(30, 75, 143, 0.1);
}

.suggestions-form textarea {
    resize: vertical;
    min-height: 150px;
}

.suggestions-info .info-item {
    padding: 20px;
}

.suggestions-info .info-item i {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 15px;
}

.suggestions-info .info-item h5 {
    color: var(--gray-800);
    margin-bottom: 8px;
}

@media (max-width: 767px) {
    .suggestions-form-card {
        padding: 25px;
    }

    .suggestions-icon {
        width: 80px;
        height: 80px;
    }

    .suggestions-icon i {
        font-size: 2.5rem;
    }
}

/* =============================================
   UNETE AL EQUIPO MODULE
   ============================================= */
.unete-module {
    padding: 20px 0;
}

.unete-info {
    background: var(--white);
    padding: 40px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    height: 100%;
}

.unete-badge {
    background: var(--primary-color);
    color: var(--white);
    padding: 12px 30px;
    font-weight: 700;
    font-size: 1.1rem;
    text-align: center;
    margin-bottom: 25px;
    border-radius: 4px;
}

.unete-title {
    color: var(--primary-color);
    font-size: 2rem;
    font-weight: 400;
    text-align: center;
    margin-bottom: 20px;
}

.unete-subtitle {
    background: var(--primary-color);
    color: var(--white);
    padding: 12px 20px;
    font-weight: 600;
    font-size: 0.95rem;
    text-align: center;
    margin-bottom: 25px;
    border-radius: 4px;
}

.unete-text {
    color: var(--gray-700);
    line-height: 1.8;
    text-align: justify;
    margin-bottom: 25px;
}

.unete-text p {
    margin-bottom: 15px;
}

.unete-text .highlight {
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: underline;
}

.unete-cta-text {
    color: var(--gray-800);
    font-weight: 600;
    text-align: center;
    font-size: 1.1rem;
    margin-bottom: 10px;
}

.unete-cta {
    color: var(--primary-color);
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    font-style: italic;
}

/* Grid de concejales con barrios */
.concejales-barrios-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px 20px;
    align-items: start;
}

.concejal-barrio-card {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    min-height: 110px;
}

.concejal-barrio-photo {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 3px solid var(--primary-color);
}

.concejal-barrio-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.concejal-barrio-photo .photo-placeholder {
    width: 100%;
    height: 100%;
    background: var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
}

.concejal-barrio-photo .photo-placeholder i {
    font-size: 2.5rem;
    color: var(--gray-400);
}

.concejal-barrio-info {
    flex: 1;
}

.concejal-barrio-name {
    color: var(--primary-color);
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 1.3;
}

.concejal-barrio-name .concejal-number {
    color: var(--primary-dark);
}

.barrios-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.barrios-list li {
    color: var(--primary-color);
    font-size: 0.85rem;
    line-height: 1.5;
    padding-left: 0;
}

/* Unete Responsive */
@media (max-width: 991px) {
    .concejales-barrios-grid {
        grid-template-columns: 1fr;
    }

    .unete-info {
        margin-bottom: 30px;
    }
}

@media (max-width: 767px) {
    .unete-info {
        padding: 25px;
    }

    .unete-title {
        font-size: 1.5rem;
    }

    .unete-cta {
        font-size: 1.2rem;
    }

    .concejal-barrio-photo {
        width: 70px;
        height: 70px;
    }

    .concejal-barrio-name {
        font-size: 0.9rem;
    }

    .barrios-list li {
        font-size: 0.8rem;
    }
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 991.98px) {
    .hero-content {
        bottom: 60px;
    }

    .hero-text {
        padding: 0 4%;
    }

    .hero-text h1 {
        font-size: 2.5rem;
    }

    .hero-text p {
        font-size: 1rem;
    }

    .section-header h2 {
        font-size: 2rem;
    }

    .cta-content h2 {
        font-size: 2rem;
    }

    .news-detail-content {
        padding: 25px;
    }

    .footer-legal {
        justify-content: center;
        margin-top: 15px;
    }

    .contact-info-card {
        margin-bottom: 30px;
    }

    .contact-form-card {
        padding: 30px;
    }

    .team-image {
        height: 320px;
    }
}

@media (max-width: 767.98px) {
    :root {
        --section-spacing: var(--section-spacing-mobile, 50px);
    }

    .hero-section {
        height: 100vh;
        min-height: 100vh;
        max-height: 100vh;
    }

    .hero-content {
        bottom: 50px;
    }

    .hero-text {
        padding: 0 3%;
    }

    .hero-text h1 {
        font-size: 1.6rem;
    }

    .hero-text p {
        font-size: 0.9rem;
    }

    .btn-hero {
        padding: 12px 30px;
        font-size: 14px;
    }

    .scroll-indicator {
        display: none;
    }

    .section-padding {
        padding: 50px 0;
    }

    .section-header {
        margin-bottom: 30px;
    }

    .page-header-content h1 {
        font-size: 1.8rem;
    }

    .error-code {
        font-size: 5rem;
    }

    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }

    .contact-form-card {
        padding: 25px 20px;
    }

    .contact-info-card {
        padding: 30px 20px;
    }

    .team-image {
        height: 300px;
    }

    .team-info {
        padding: 20px 15px;
    }

    .page-body {
        font-size: 16px;
    }
}

@media (max-width: 575.98px) {
    .footer-legal {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
}

/* =============================================
   LIGHTBOX
   ============================================= */
.lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.lightbox.active {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
}

.lightbox-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-image {
    max-width: 100%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 4px;
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.lightbox.active .lightbox-image {
    opacity: 1;
    transform: scale(1);
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 28px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease, transform 0.3s ease;
    z-index: 10;
}

.lightbox-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease, transform 0.3s ease;
    z-index: 10;
}

.lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-50%) scale(1.1);
}

.lightbox-prev {
    left: 20px;
}

.lightbox-next {
    right: 20px;
}

.lightbox-nav:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.lightbox-nav:disabled:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-50%) scale(1);
}

.lightbox-info {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: white;
    z-index: 10;
}

.lightbox-counter {
    font-size: 14px;
    opacity: 0.8;
    margin-bottom: 8px;
}

.lightbox-caption {
    font-size: 16px;
    max-width: 80vw;
    line-height: 1.4;
}

.lightbox-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 40px;
}

.lightbox-loading .spin {
    animation: lightbox-spin 1s linear infinite;
}

@keyframes lightbox-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.lightbox-thumbnails {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    max-width: 80vw;
    overflow-x: auto;
    padding: 10px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.3) transparent;
}

.lightbox-thumb {
    width: 60px;
    height: 60px;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.3s ease, transform 0.3s ease;
    flex-shrink: 0;
    border: 2px solid transparent;
}

.lightbox-thumb:hover {
    opacity: 0.8;
}

.lightbox-thumb.active {
    opacity: 1;
    border-color: var(--primary-color);
}

.lightbox-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Lightbox Responsive */
@media (max-width: 767px) {
    .lightbox-nav {
        width: 45px;
        height: 45px;
        font-size: 20px;
    }

    .lightbox-prev {
        left: 10px;
    }

    .lightbox-next {
        right: 10px;
    }

    .lightbox-close {
        top: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
        font-size: 22px;
    }

    .lightbox-thumbnails {
        display: none;
    }

    .lightbox-info {
        bottom: 15px;
    }

    .lightbox-caption {
        font-size: 14px;
    }
}

/* =============================================
   CUSTOM CONTENT SECTIONS
   Estilos para contenido personalizado insertado
   en p_contenido de páginas
   ============================================= */

/* Secciones con fondo que deben ocupar todo el ancho */
.home-content-wrapper > section[class*="bg-"],
.home-content-wrapper > section[style*="background"],
.page-body > section[class*="bg-"],
.page-body > section[style*="background"] {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    padding-left: 0;
    padding-right: 0;
}

/* Contenedor interno de secciones full-width */
.home-content-wrapper > section .container,
.page-body > section .container {
    max-width: 1320px;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
}

/* Sin gap entre secciones con fondos de color */
.home-content-wrapper > section + section {
    margin-top: 0;
}

/* Secciones estándar - sin margin, padding definido por cada clase */
.home-content-wrapper > section {
    margin: 0;
}

/* Secciones con clase section-padding usan padding interno */
.home-content-wrapper > section.section-padding {
    padding: 80px 0;
}

/* Hero sections personalizadas - ancho completo, padding definido en cada clase específica */
.home-content-wrapper > section[class*="hero-"],
.page-body > section[class*="hero-"] {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

/* CTA sections */
.home-content-wrapper > section[class*="cta-"],
.page-body > section[class*="cta-"] {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

/* Responsive para contenido personalizado */
@media (max-width: 767px) {
    .home-content-wrapper > section.section-padding {
        padding: 50px 0;
    }
}

/* =============================================
   EMPRESA SECTIONS
   Estilos para páginas de empresa/servicios
   ============================================= */

/* --- Hero Empresa --- */
.hero-empresa {
    background: linear-gradient(135deg, var(--agon-bosque-dark) 0%, var(--agon-bosque) 50%, var(--agon-bosque-light) 100%);
    color: #ffffff;
    padding: 60px 0;
    position: relative;
    overflow: hidden;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-top: 0;
    margin-bottom: 0;
}

.hero-empresa::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2381c784' fill-opacity='0.08'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

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

.hero-empresa-content {
    display: flex;
    align-items: center;
    gap: 60px;
    flex-wrap: wrap;
}

.hero-empresa-text {
    flex: 1;
    min-width: 300px;
}

.hero-empresa-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.hero-empresa h1 {
    font-size: 2.8rem;
    font-weight: 800;
    margin-bottom: 20px;
    line-height: 1.2;
    color: #ffffff;
}

.hero-empresa h1 span {
    color: var(--agon-verde);
}

.hero-empresa-desc {
    font-size: 1.15rem;
    line-height: 1.8;
    opacity: 0.95;
    margin-bottom: 30px;
}

.hero-empresa-stats {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
}

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

.stat-number {
    display: block;
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--agon-verde);
    line-height: 1;
}

.stat-label {
    font-size: 0.85rem;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.hero-empresa-visual {
    flex: 0 0 280px;
    display: flex;
    justify-content: center;
}

.hero-icon-circle {
    width: 220px;
    height: 220px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid rgba(255, 255, 255, 0.2);
    animation: pulse-glow 3s ease-in-out infinite;
}

.hero-icon-circle i {
    font-size: 5rem;
    color: var(--agon-verde);
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 30px rgba(76, 175, 80, 0.3); }
    50% { box-shadow: 0 0 50px rgba(76, 175, 80, 0.5); }
}

/* --- Sección Servicios --- */
.servicios-section {
    background: #ffffff;
    padding: 80px 0;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

.servicios-section .section-title {
    text-align: center;
    margin-bottom: 50px;
}

.servicios-section .section-title h2 {
    font-size: 2.2rem;
    color: var(--agon-gris-dark);
    margin-bottom: 15px;
}

.servicios-section .section-title p {
    color: #4a5568;
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
}

.servicios-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.servicio-card {
    background: #f7fafc;
    border-radius: 16px;
    padding: 35px 30px;
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid #e2e8f0;
}

.servicio-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(74, 74, 74, 0.15);
    border-color: var(--agon-verde);
}

.servicio-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--agon-verde-dark), var(--agon-verde));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    transition: transform 0.3s ease;
}

.servicio-card:hover .servicio-icon {
    transform: scale(1.1);
}

.servicio-icon i {
    font-size: 2rem;
    color: #ffffff;
}

.servicio-card h3 {
    font-size: 1.25rem;
    color: var(--agon-gris-dark);
    margin-bottom: 15px;
}

.servicio-card p {
    color: #4a5568;
    line-height: 1.7;
    margin: 0;
}

/* --- Sección Por Qué Elegirnos --- */
.porque-section {
    background: #f7fafc;
    padding: 80px 0;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

.porque-section .section-title {
    text-align: center;
    margin-bottom: 50px;
}

.porque-section .section-title h2 {
    font-size: 2.2rem;
    color: var(--agon-gris-dark);
    margin-bottom: 15px;
}

.porque-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
}

.porque-item {
    background: #ffffff;
    border-radius: 12px;
    padding: 30px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    border-left: 4px solid var(--agon-verde);
}

.porque-item:hover {
    transform: translateX(5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.porque-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--agon-verde-dark), var(--agon-verde));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.porque-icon i {
    font-size: 1.3rem;
    color: #ffffff;
}

.porque-content h4 {
    font-size: 1.1rem;
    color: var(--agon-gris-dark);
    margin-bottom: 8px;
}

.porque-content p {
    color: #4a5568;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* --- Sección Compromiso Verde --- */
.verde-section {
    background: linear-gradient(135deg, #276749 0%, #2f855a 50%, #38a169 100%);
    color: #ffffff;
    padding: 70px 0;
    position: relative;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

.verde-content {
    display: flex;
    align-items: center;
    gap: 50px;
    flex-wrap: wrap;
}

.verde-icon {
    flex: 0 0 auto;
}

.verde-icon-circle {
    width: 120px;
    height: 120px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.verde-icon-circle i {
    font-size: 3rem;
    color: #9ae6b4;
}

.verde-text {
    flex: 1;
    min-width: 280px;
}

.verde-text h2 {
    font-size: 1.8rem;
    margin-bottom: 15px;
    color: #ffffff;
}

.verde-text p {
    font-size: 1.05rem;
    line-height: 1.8;
    opacity: 0.95;
    margin: 0;
}

/* --- Sección CTA --- */
.cta-empresa {
    background: linear-gradient(135deg, var(--agon-gris-dark) 0%, var(--agon-gris) 100%);
    color: #ffffff;
    padding: 70px 0;
    text-align: center;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

.cta-empresa h2 {
    font-size: 2rem;
    margin-bottom: 15px;
    color: #ffffff;
}

.cta-empresa p {
    font-size: 1.1rem;
    opacity: 0.9;
    margin-bottom: 30px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.cta-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--agon-verde);
    color: #ffffff;
    padding: 16px 35px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid var(--agon-verde);
}

.btn-cta-primary:hover {
    background: var(--agon-verde-dark);
    border-color: var(--agon-verde-dark);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(76, 175, 80, 0.4);
    color: #ffffff;
}

.btn-cta-secondary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    color: #ffffff;
    padding: 16px 35px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid rgba(255, 255, 255, 0.5);
}

.btn-cta-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #ffffff;
    color: #ffffff;
}

/* --- Responsive Empresa --- */
@media (max-width: 991px) {
    .hero-empresa {
        padding: 60px 0;
    }

    .hero-empresa h1 {
        font-size: 2.2rem;
    }

    .hero-empresa-content {
        gap: 40px;
    }

    .hero-empresa-visual {
        flex: 0 0 100%;
        order: -1;
    }

    .hero-icon-circle {
        width: 150px;
        height: 150px;
    }

    .hero-icon-circle i {
        font-size: 3.5rem;
    }

    .hero-empresa-stats {
        justify-content: center;
    }

    .verde-content {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 767px) {
    .hero-empresa {
        padding: 50px 0;
    }

    .hero-empresa h1 {
        font-size: 1.8rem;
    }

    .hero-empresa-desc {
        font-size: 1rem;
    }

    .stat-number {
        font-size: 2rem;
    }

    .hero-empresa-stats {
        gap: 25px;
    }

    .servicios-section,
    .porque-section {
        padding: 60px 0;
    }

    .servicios-section .section-title h2,
    .porque-section .section-title h2 {
        font-size: 1.8rem;
    }

    .servicio-card {
        padding: 25px 20px;
    }

    .verde-section,
    .cta-empresa {
        padding: 50px 0;
    }

    .verde-text h2,
    .cta-empresa h2 {
        font-size: 1.5rem;
    }

    .btn-cta-primary,
    .btn-cta-secondary {
        padding: 14px 28px;
        font-size: 0.95rem;
    }
}

/* --- Página Quiénes Somos --- */
.about-intro {
    background: #ffffff;
    padding: 80px 0;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

.about-intro-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.about-intro-text h1 {
    font-size: 2.5rem;
    color: var(--agon-gris-dark);
    margin-bottom: 25px;
}

.about-intro-text .lead {
    font-size: 1.2rem;
    color: var(--agon-verde);
    font-weight: 500;
    margin-bottom: 20px;
}

.about-intro-text p {
    color: #4a5568;
    line-height: 1.8;
    margin-bottom: 15px;
}

.about-intro-image {
    position: relative;
}

.about-image-main {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(74, 74, 74, 0.2);
}

.about-image-main img {
    width: 100%;
    height: auto;
    display: block;
}

.about-image-badge {
    position: absolute;
    bottom: -20px;
    left: -20px;
    background: linear-gradient(135deg, var(--agon-verde-dark), var(--agon-verde));
    color: #ffffff;
    padding: 25px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(76, 175, 80, 0.3);
}

.about-image-badge .badge-number {
    display: block;
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
}

.about-image-badge .badge-text {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Valores de empresa */
.valores-section {
    background: #f7fafc;
    padding: 80px 0;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

.valores-section .section-title {
    text-align: center;
    margin-bottom: 50px;
}

.valores-section .section-title h2 {
    font-size: 2.2rem;
    color: var(--agon-gris-dark);
}

.valores-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.valor-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 35px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.valor-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.valor-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--agon-verde-dark), var(--agon-verde));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.valor-icon i {
    font-size: 1.8rem;
    color: #ffffff;
}

.valor-card h3 {
    font-size: 1.2rem;
    color: var(--agon-gris-dark);
    margin-bottom: 12px;
}

.valor-card p {
    color: #4a5568;
    line-height: 1.7;
    margin: 0;
}

/* Responsive Quiénes Somos */
@media (max-width: 991px) {
    .about-intro-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .about-intro-image {
        order: -1;
        max-width: 500px;
        margin: 0 auto;
    }

    .about-image-badge {
        bottom: -15px;
        left: auto;
        right: 20px;
        padding: 20px;
    }

    .about-image-badge .badge-number {
        font-size: 2rem;
    }
}

@media (max-width: 767px) {
    .about-intro {
        padding: 60px 0;
    }

    .about-intro-text h1 {
        font-size: 1.8rem;
    }

    .about-intro-text .lead {
        font-size: 1.05rem;
    }

    .valores-section {
        padding: 60px 0;
    }

    .valores-section .section-title h2 {
        font-size: 1.8rem;
    }

    .valor-card {
        padding: 25px;
    }
}

/* =============================================
   PÁGINA DE SERVICIOS DETALLADOS
   ============================================= */

/* Skip link para accesibilidad - oculto hasta focus */
.skip-link {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    background: var(--agon-gris-dark);
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    z-index: 10000;
}

.skip-link:focus {
    position: fixed;
    top: 10px;
    left: 10px;
    width: auto;
    height: auto;
    padding: 12px 24px;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    border-radius: 4px;
    outline: 3px solid var(--agon-verde);
    outline-offset: 2px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Contenedor principal de lista de servicios */
#lista-servicios {
    margin: 0;
    padding: 0;
}

/* Sección de servicio individual */
.seccion-servicio-detalle {
    padding: 80px 0;
    margin: 0;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

/* Alternar fondos */
.seccion-servicio-detalle:nth-child(odd) {
    background: #ffffff;
}

.seccion-servicio-detalle:nth-child(even) {
    background: #f7fafc;
}

/* Contenido del servicio - layout flex */
.servicio-detalle-contenido {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 15px;
    display: flex;
    align-items: center;
    gap: 60px;
}

/* Alternar orden imagen/texto */
.seccion-servicio-detalle:nth-child(even) .servicio-detalle-contenido {
    flex-direction: row-reverse;
}

/* Parte de texto */
.servicio-detalle-texto {
    flex: 1;
    min-width: 0;
}

.servicio-detalle-texto h2 {
    font-size: 1.8rem;
    color: var(--agon-gris-dark);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    line-height: 1.3;
}

.servicio-detalle-texto h2 i {
    font-size: 2rem;
    color: var(--agon-verde);
    flex-shrink: 0;
}

.servicio-detalle-texto p {
    font-size: 1.05rem;
    color: #4a5568;
    line-height: 1.8;
    margin-bottom: 25px;
}

.servicio-detalle-texto ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.servicio-detalle-texto ul li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 12px;
    color: #4a5568;
    font-size: 1rem;
    line-height: 1.6;
}

.servicio-detalle-texto ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 8px;
    height: 8px;
    background: linear-gradient(135deg, var(--agon-verde-dark), var(--agon-verde));
    border-radius: 50%;
}

/* Parte de imagen */
.servicio-detalle-imagen {
    flex: 0 0 45%;
    max-width: 500px;
}

.servicio-detalle-imagen img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(74, 74, 74, 0.15);
    display: block;
}

/* CTA de servicios */
.servicios-cta {
    background: linear-gradient(135deg, var(--agon-gris-dark) 0%, var(--agon-gris) 100%);
    color: #ffffff;
    padding: 70px 0;
    text-align: center;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

.servicios-cta h2 {
    font-size: 2rem;
    margin-bottom: 15px;
    color: #ffffff;
}

.servicios-cta p {
    font-size: 1.1rem;
    opacity: 0.9;
    margin-bottom: 30px;
}

/* Botón CTA blanco */
.btn-cta-blanco {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    color: var(--agon-gris-dark);
    padding: 16px 35px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid #ffffff;
}

.btn-cta-blanco:hover {
    background: transparent;
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.btn-cta-blanco i {
    font-size: 1.1rem;
}

/* Clase genérica full-width */
.full-width {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

/* Responsive servicios detallados */
@media (max-width: 991px) {
    .seccion-servicio-detalle {
        padding: 60px 0;
    }

    .servicio-detalle-contenido {
        flex-direction: column !important;
        gap: 40px;
    }

    .servicio-detalle-imagen {
        flex: 0 0 100%;
        max-width: 100%;
        order: -1;
    }

    .servicio-detalle-texto h2 {
        font-size: 1.5rem;
    }

    .servicio-detalle-texto h2 i {
        font-size: 1.6rem;
    }
}

@media (max-width: 767px) {
    .seccion-servicio-detalle {
        padding: 50px 0;
    }

    .servicio-detalle-contenido {
        gap: 30px;
    }

    .servicio-detalle-texto h2 {
        font-size: 1.3rem;
        gap: 12px;
    }

    .servicio-detalle-texto h2 i {
        font-size: 1.4rem;
    }

    .servicio-detalle-texto p {
        font-size: 1rem;
    }

    .servicio-detalle-texto ul li {
        font-size: 0.95rem;
        padding-left: 24px;
    }

    .servicios-cta {
        padding: 50px 15px;
    }

    .servicios-cta h2 {
        font-size: 1.5rem;
    }

    .btn-cta-blanco {
        padding: 14px 28px;
        font-size: 0.95rem;
    }
}

/* =============================================
   PÁGINA QUIÉNES SOMOS
   ============================================= */

/* --- Sección Intro --- */
.sobre-nosotros-intro {
    background: #ffffff;
    padding: 80px 0;
}

.contenido-intro {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 15px;
    display: flex;
    align-items: center;
    gap: 60px;
}

.texto-intro {
    flex: 1;
    min-width: 0;
}

.texto-intro h1 {
    font-size: 2.5rem;
    color: var(--agon-gris-dark);
    margin-bottom: 20px;
    line-height: 1.2;
}

.texto-intro .destacado {
    font-size: 1.25rem;
    color: var(--agon-verde);
    font-weight: 600;
    margin-bottom: 25px;
    padding-left: 15px;
    border-left: 4px solid var(--agon-verde);
}

.texto-intro p {
    font-size: 1.05rem;
    color: #4a5568;
    line-height: 1.8;
    margin-bottom: 20px;
}

.imagen-intro {
    flex: 0 0 45%;
    max-width: 500px;
}

.imagen-intro img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(74, 74, 74, 0.15);
    display: block;
}

/* --- Sección Historia --- */
.seccion-historia {
    background: #f7fafc;
    padding: 80px 0;
}

.contenido-historia {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 15px;
    text-align: center;
}

.contenido-historia h2 {
    font-size: 2rem;
    color: var(--agon-gris-dark);
    margin-bottom: 30px;
}

.contenido-historia p {
    font-size: 1.05rem;
    color: #4a5568;
    line-height: 1.8;
    margin-bottom: 20px;
}

/* Cita/Blockquote */
.cita,
.contenido-historia blockquote {
    background: #ffffff;
    border-left: 5px solid var(--agon-verde);
    border-radius: 0 12px 12px 0;
    padding: 30px 35px;
    margin: 0 0 30px 0;
    text-align: left;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    position: relative;
}

.cita::before,
.contenido-historia blockquote::before {
    content: '"';
    font-size: 4rem;
    color: var(--agon-verde);
    opacity: 0.2;
    position: absolute;
    top: 10px;
    left: 15px;
    font-family: Georgia, serif;
    line-height: 1;
}

.cita p,
.contenido-historia blockquote p {
    font-style: italic;
    color: #4a5568;
    font-size: 1.1rem;
    line-height: 1.8;
    margin: 0;
    padding-left: 30px;
}

/* --- Sección Valores --- */
.seccion-valores {
    background: #ffffff;
    padding: 80px 0;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

.seccion-valores .titulo-seccion {
    text-align: center;
    margin-bottom: 50px;
}

.seccion-valores .titulo-seccion h2 {
    font-size: 2rem;
    color: var(--agon-gris-dark);
    margin: 0;
}

/* Grid de valores */
.grid-valores {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 15px;
    list-style: none;
}

/* Tarjeta de valor */
.grid-valores .valor-card {
    background: #f7fafc;
    border-radius: 16px;
    padding: 35px 30px;
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid #e2e8f0;
}

.grid-valores .valor-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(74, 74, 74, 0.12);
    border-color: var(--agon-verde);
}

.valor-icono {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--agon-verde-dark), var(--agon-verde));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    transition: transform 0.3s ease;
}

.grid-valores .valor-card:hover .valor-icono {
    transform: scale(1.1);
}

.valor-icono i {
    font-size: 1.8rem;
    color: #ffffff;
}

.grid-valores .valor-card h3 {
    font-size: 1.2rem;
    color: var(--agon-gris-dark);
    margin-bottom: 12px;
}

.grid-valores .valor-card p {
    color: #4a5568;
    line-height: 1.7;
    margin: 0;
    font-size: 0.95rem;
}

/* Responsive Quiénes Somos */
@media (max-width: 991px) {
    .sobre-nosotros-intro {
        padding: 60px 0;
    }

    .contenido-intro {
        flex-direction: column;
        gap: 40px;
    }

    .imagen-intro {
        flex: 0 0 100%;
        max-width: 100%;
        order: -1;
    }

    .texto-intro h1 {
        font-size: 2rem;
    }

    .seccion-historia {
        padding: 60px 0;
    }

    .seccion-valores {
        padding: 60px 0;
    }
}

@media (max-width: 767px) {
    .sobre-nosotros-intro {
        padding: 50px 0;
    }

    .contenido-intro {
        gap: 30px;
    }

    .texto-intro h1 {
        font-size: 1.7rem;
    }

    .texto-intro .destacado {
        font-size: 1.1rem;
    }

    .texto-intro p {
        font-size: 1rem;
    }

    .seccion-historia {
        padding: 50px 0;
    }

    .contenido-historia h2 {
        font-size: 1.6rem;
    }

    .cita,
    .contenido-historia blockquote {
        padding: 25px 20px;
    }

    .cita p,
    .contenido-historia blockquote p {
        font-size: 1rem;
        padding-left: 20px;
    }

    .seccion-valores {
        padding: 50px 0;
    }

    .seccion-valores .titulo-seccion h2 {
        font-size: 1.6rem;
    }

    .grid-valores .valor-card {
        padding: 25px 20px;
    }
}

/* =============================================
   PÁGINA INDEX - SECCIONES PRINCIPALES
   ============================================= */

/* --- Hero Index ---
   Nota: .hero-empresa ya está definido arriba, estas reglas complementan/sobrescriben
   para el contexto del index con layout centrado */

.hero-contenido {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 15px;
    position: relative;
    z-index: 1;
}

.hero-empresa h1 {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 20px;
    line-height: 1.2;
    color: #ffffff;
}

.hero-empresa .subtitulo {
    font-size: 1.2rem;
    line-height: 1.8;
    opacity: 0.95;
    margin-bottom: 35px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* Botón CTA principal */
.btn-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--agon-verde);
    color: #ffffff;
    padding: 16px 40px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1.1rem;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid var(--agon-verde);
    margin-bottom: 50px;
}

.btn-cta:hover {
    background: var(--agon-verde-dark);
    border-color: var(--agon-verde-dark);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(76, 175, 80, 0.4);
    color: #ffffff;
}

/* Destacados del hero */
.hero-destacados {
    display: flex;
    justify-content: center;
    gap: 50px;
    flex-wrap: wrap;
}

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

.destacado-numero {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--agon-verde);
    line-height: 1;
    margin-bottom: 5px;
}

.destacado-texto {
    font-size: 0.9rem;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- Sección Servicios Index --- */
.seccion-servicios {
    background: #ffffff;
    padding: 80px 0;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

.seccion-servicios .titulo-seccion,
.seccion-porque .titulo-seccion {
    text-align: center;
    margin-bottom: 50px;
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 15px;
}

.seccion-servicios .titulo-seccion h2,
.seccion-porque .titulo-seccion h2 {
    font-size: 2.2rem;
    color: var(--agon-gris-dark);
    margin-bottom: 15px;
}

.seccion-servicios .titulo-seccion p,
.seccion-porque .titulo-seccion p {
    color: #4a5568;
    font-size: 1.1rem;
    margin: 0;
}

/* Grid de servicios */
.grid-servicios {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 15px;
}

.grid-servicios .servicio-card {
    background: #f7fafc;
    border-radius: 16px;
    padding: 35px 30px;
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid #e2e8f0;
}

.grid-servicios .servicio-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(74, 74, 74, 0.15);
    border-color: var(--agon-verde);
}

.grid-servicios .servicio-icono {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--agon-verde-dark), var(--agon-verde));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    transition: transform 0.3s ease;
}

.grid-servicios .servicio-card:hover .servicio-icono {
    transform: scale(1.1);
}

.grid-servicios .servicio-icono i {
    font-size: 2rem;
    color: #ffffff;
}

.grid-servicios .servicio-card h3 {
    font-size: 1.25rem;
    color: var(--agon-gris-dark);
    margin-bottom: 15px;
}

.grid-servicios .servicio-card p {
    color: #4a5568;
    line-height: 1.7;
    margin: 0;
}

/* --- Sección Por Qué Elegirnos --- */
.seccion-porque {
    background: #f7fafc;
    padding: 80px 0;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

.grid-porque {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 15px;
}

.porque-item {
    background: #ffffff;
    border-radius: 12px;
    padding: 30px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    border-left: 4px solid var(--agon-verde);
}

.porque-item:hover {
    transform: translateX(5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.porque-icono {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--agon-verde-dark), var(--agon-verde));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.porque-icono i {
    font-size: 1.3rem;
    color: #ffffff;
}

.porque-contenido h4 {
    font-size: 1.1rem;
    color: var(--agon-gris-dark);
    margin-bottom: 8px;
}

.porque-contenido p {
    color: #4a5568;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* --- Sección Verde/Ecológica --- */
.seccion-verde {
    background: linear-gradient(135deg, #276749 0%, #2f855a 50%, #38a169 100%);
    color: #ffffff;
    padding: 80px 0;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

.verde-contenido {
    display: flex;
    align-items: center;
    gap: 60px;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 15px;
}

.verde-texto {
    flex: 1;
    min-width: 0;
}

.verde-texto h2 {
    font-size: 2rem;
    margin-bottom: 20px;
    color: #ffffff;
}

.verde-texto p {
    font-size: 1.05rem;
    line-height: 1.8;
    opacity: 0.95;
    margin-bottom: 25px;
}

.verde-lista {
    list-style: none;
    padding: 0;
    margin: 0;
}

.verde-lista li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 12px;
    font-size: 1rem;
    line-height: 1.6;
}

.verde-lista li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #9ae6b4;
    font-weight: bold;
    font-size: 1.1rem;
}

.verde-imagen {
    flex: 0 0 40%;
    max-width: 450px;
}

.verde-imagen img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}

/* --- CTA Final --- */
.seccion-cta {
    background: linear-gradient(135deg, var(--agon-gris-dark) 0%, var(--agon-gris) 100%);
    color: #ffffff;
    padding: 80px 0;
    text-align: center;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

.seccion-cta h2 {
    font-size: 2.2rem;
    margin-bottom: 15px;
    color: #ffffff;
}

.seccion-cta p {
    font-size: 1.1rem;
    opacity: 0.9;
    margin-bottom: 35px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.cta-contacto {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Botón outline */
.btn-cta-outline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    color: #ffffff;
    padding: 16px 35px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid rgba(255, 255, 255, 0.5);
}

.btn-cta-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #ffffff;
    color: #ffffff;
    transform: translateY(-3px);
}

/* Responsive Index */
@media (max-width: 991px) {
    .hero-empresa {
        padding: 70px 0 60px;
    }

    .hero-empresa h1 {
        font-size: 2.3rem;
    }

    .hero-empresa .subtitulo {
        font-size: 1.1rem;
    }

    .hero-destacados {
        gap: 30px;
    }

    .destacado-numero {
        font-size: 2rem;
    }

    .seccion-servicios,
    .seccion-porque {
        padding: 60px 0;
    }

    .verde-contenido {
        flex-direction: column;
        text-align: center;
        gap: 40px;
    }

    .verde-texto {
        order: 1;
    }

    .verde-imagen {
        order: 0;
        flex: 0 0 100%;
        max-width: 400px;
    }

    .verde-lista {
        text-align: left;
        max-width: 400px;
        margin: 0 auto;
    }

    .seccion-verde {
        padding: 60px 0;
    }

    .seccion-cta {
        padding: 60px 0;
    }
}

@media (max-width: 767px) {
    .hero-empresa {
        padding: 60px 0 50px;
    }

    .hero-empresa h1 {
        font-size: 1.8rem;
    }

    .hero-empresa .subtitulo {
        font-size: 1rem;
    }

    .btn-cta {
        padding: 14px 30px;
        font-size: 1rem;
        margin-bottom: 40px;
    }

    .hero-destacados {
        gap: 20px;
    }

    .destacado-numero {
        font-size: 1.7rem;
    }

    .destacado-texto {
        font-size: 0.8rem;
    }

    .seccion-servicios,
    .seccion-porque {
        padding: 50px 0;
    }

    .seccion-servicios .titulo-seccion h2,
    .seccion-porque .titulo-seccion h2 {
        font-size: 1.7rem;
    }

    .grid-servicios .servicio-card {
        padding: 25px 20px;
    }

    .grid-servicios .servicio-icono {
        width: 65px;
        height: 65px;
    }

    .grid-servicios .servicio-icono i {
        font-size: 1.6rem;
    }

    .porque-item {
        padding: 20px;
    }

    .seccion-verde {
        padding: 50px 0;
    }

    .verde-texto h2 {
        font-size: 1.6rem;
    }

    .seccion-cta {
        padding: 50px 15px;
    }

    .seccion-cta h2 {
        font-size: 1.6rem;
    }

    .btn-cta-blanco,
    .btn-cta-outline {
        padding: 14px 28px;
        font-size: 0.95rem;
        width: 100%;
        justify-content: center;
    }

    .cta-contacto {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
}

/* =============================================
   ESPACIADO HERO ↔ CONTENIDO
   Reglas de alta especificidad al final del archivo.
   Tras unificar home y resto de páginas en page.php, toda página con hero
   usa el wrapper .home-content-wrapper. Queremos:
   - Sin margen extra entre hero y main (el hero va pegado al carrusel).
   - La primera sección de contenido SÍ lleva padding-top para respirar
     visualmente con respecto al hero.
   Excepciones (hero-empresa, cta-*) se tratan por separado: esas secciones
   están diseñadas para pegarse al hero y mantienen padding-top:0.
   ============================================= */
body > #hero + main#main-content,
body > section.hero-section + main#main-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body > #hero + main#main-content > #home-content,
body > #hero + main#main-content > .home-content-wrapper,
body > section.hero-section + main#main-content > #home-content,
body > section.hero-section + main#main-content > .home-content-wrapper {
    margin-top: 0 !important;
    /* No tocamos padding-top del wrapper — el espacio lo gestiona
       la primera sección interna con su propio padding. */
}

/* Padding-top del primer bloque de contenido tras el hero.
   100px en escritorio para equilibrar con el padding inferior de la
   sección (py-5 = 48px) y el ritmo entre secciones (96px). 60px en móvil. */
#main-content > .home-content-wrapper > section:first-child,
#main-content > #home-content > section:first-child {
    margin-top: 0 !important;
    padding-top: 100px;
}
@media (max-width: 767px) {
    #main-content > .home-content-wrapper > section:first-child,
    #main-content > #home-content > section:first-child {
        padding-top: 60px;
    }
}

/* Excepción: secciones full-width diseñadas para pegarse al hero
   (hero-empresa, cta-*) conservan padding-top cero. */
body > #hero + main#main-content .hero-empresa:first-child,
body > section.hero-section + main#main-content .hero-empresa:first-child,
#home-content > .hero-empresa:first-child,
.home-content-wrapper > .hero-empresa:first-child,
.home-content-wrapper > section[class*="hero-"]:first-child,
.home-content-wrapper > section[class*="cta-"]:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Evitar margin-top colapsado del primer hijo dentro del primer bloque
   (p.ej. un <h2> que abra la sección). No tocamos padding para no
   reducir el aire superior que acabamos de añadir. */
#main-content > .home-content-wrapper > section:first-child > *:first-child,
#main-content > #home-content > section:first-child > *:first-child,
.home-content-wrapper > section:first-child > *:first-child > *:first-child {
    margin-top: 0 !important;
}

/* Contenido NORMAL (no full-width) justo después del hero.
   ==========================================================
   Las reglas de arriba cubren el wrapper .home-content-wrapper, que solo
   se usa cuando el contenido empieza por <section>. Una página corriente
   —como la portada— cae en #page-content.section-padding y se llevaba los
   80 px de arriba.

   Con el hero acotado a 620 px, esos 80 px dejaban un vacío grande justo
   donde la página tiene que enganchar: desde el hero parecía que no venía
   nada detrás. 45 px mantienen el aire sin romper el hilo de lectura. */
body.has-hero #main-content > #page-content.section-padding,
body.has-hero #main-content > .page-content.section-padding {
    padding-top: 45px;
}

/* FIX: Asegurar que no hay scroll horizontal por 100vw */
.section-fullwidth,
.home-content-wrapper > section[style*="background"],
.home-content-wrapper > section[class*="hero-"],
.home-content-wrapper > section[class*="cta-"] {
    max-width: 100%;
}

/* =============================================
   FIX: Secciones full-width dentro de page-content
   Cuando el contenido de una página contiene secciones
   que deben ser full-width (hero-empresa, etc.)
   ============================================= */

/* Eliminar padding del page-content cuando contiene secciones full-width */
.page-content:has(.hero-empresa),
.page-content:has(.page-body > .hero-empresa:first-child),
.page-content:has(.page-body > section[class*="hero-"]:first-child) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Eliminar padding del container cuando tiene secciones full-width */
.page-content:has(.hero-empresa) > .container,
.page-content:has(.seccion-servicios) > .container,
.page-content:has(.seccion-verde) > .container,
.page-content:has(.seccion-cta) > .container {
    padding: 0 !important;
    max-width: 100% !important;
}

/* Permitir que las secciones full-width dentro de page-body escapen del container */
.page-body > section.hero-empresa,
.page-body > section.seccion-servicios,
.page-body > section.seccion-porque,
.page-body > section.seccion-verde,
.page-body > section.seccion-cta {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-left: 0;
    margin-right: 0;
}

/* Eliminar margin-top de la primera sección dentro de page-body */
.page-body > section:first-child,
.page-body > .hero-empresa:first-child {
    margin-top: 0 !important;
}

/* Fallback para navegadores sin soporte de :has() - clase aplicable manualmente */
.page-content.has-fullwidth-sections {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.page-content.has-fullwidth-sections > .container {
    padding: 0 !important;
    max-width: 100% !important;
}

/* Contenedor para páginas con contenido full-width (sin container wrapper) */
.page-body-fullwidth {
    width: 100%;
    margin: 0;
    padding: 0;
}

.page-body-fullwidth > section:first-child {
    margin-top: 0 !important;
}

/* Padding para separar hero-contenido del carousel - SOLO para home */
.home-content-wrapper .hero-contenido {
    padding-top: 60px !important;
}

/* Secciones dentro de page-body-fullwidth ya están a ancho completo */
.page-body-fullwidth > section.hero-empresa,
.page-body-fullwidth > section.seccion-servicios,
.page-body-fullwidth > section.seccion-porque,
.page-body-fullwidth > section.seccion-verde,
.page-body-fullwidth > section.seccion-cta {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    left: auto;
    right: auto;
    position: relative;
}

/* Forzar secciones específicas a ser full-width cuando están dentro de container */
.page-body > section.hero-empresa,
.page-body > section.seccion-servicios,
.page-body > section.seccion-porque,
.page-body > section.seccion-verde,
.page-body > section.seccion-cta {
    width: 100vw !important;
    max-width: none !important;
    position: relative;
    left: 50%;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
}

/* =============================================
   ACCESIBILIDAD WCAG 2.1 / 2.2 AA
   Bloque añadido: no elimina estilos existentes; solo añade garantías
   de cumplimiento mínimo (foco visible, tamaños de target, motion).
   ============================================= */

/* ---------- Skip link (WCAG 2.4.1 A) ---------- */
/* Ya existe .skip-link arriba. Reforzamos contraste para AA 3:1 en foco. */
.skip-link:focus {
    background: var(--primary-color);
    color: #ffffff;
    outline: 3px solid #ffffff;
    outline-offset: 2px;
    box-shadow: 0 0 0 6px var(--primary-color);
}

/* ---------- Foco visible (WCAG 2.4.7 AA / 2.4.11 AA en 2.2) ----------
   Regla general para teclado: el foco nunca debe desaparecer y
   debe mantener contraste >= 3:1 con el fondo adyacente. */
:focus {
    outline: 2px solid transparent; /* reset para evitar outline del user-agent en click/mouse */
}
:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(30, 75, 143, 0.25);
    border-radius: 3px;
}
/* Sobre fondos oscuros (topbar verde, hero, footer), invertir para garantizar contraste */
.topbar a:focus-visible,
.hero-section :focus-visible,
.footer :focus-visible,
.carousel-control-prev:focus-visible,
.carousel-control-next:focus-visible,
.carousel-pause-btn:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 3px;
    box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.35);
}

/* Mover foco al #main-content sin saltar visualmente */
#main-content:focus,
#auth-main:focus {
    outline: none;
}

/* ---------- Targets mínimos táctiles (WCAG 2.2 SC 2.5.8 AA: 24×24) ----------
   Subimos a 40×40 (recomendado) en iconos-enlace de topbar/navbar/footer. */
.topbar .quick-nav a,
.topbar .social-links a,
.navbar-quick-icons .quick-icon,
.footer .social-links a {
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.pagination .page-link {
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.back-to-top {
    min-width: 44px;
    min-height: 44px;
}
/* Botones genéricos: garantizar altura mínima salvo que ya sea más alto */
.btn-sm {
    min-height: 32px; /* 32 > 24 WCAG mínimo */
}
.btn {
    min-height: 40px;
}

/* ---------- Botón de pausa del carrusel hero (WCAG 2.2.2) ---------- */
.carousel-pause-btn {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 5;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.7);
    background: rgba(0, 0, 0, 0.55);
    color: #ffffff;
    font-size: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.carousel-pause-btn:hover,
.carousel-pause-btn:focus-visible {
    background: rgba(0, 0, 0, 0.85);
    border-color: #ffffff;
}

/* ---------- Botón de ajustes de cookies en footer ----------
   Reemplaza al <a href="#"> por un <button> semántico accesible. */
.footer .footer-legal .footer-legal-btn {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0 0 0 1rem;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
    min-height: 32px;
}
.footer .footer-legal .footer-legal-btn:hover,
.footer .footer-legal .footer-legal-btn:focus-visible {
    text-decoration: none;
}

/* ---------- Ocultar visualmente sin perder accesibilidad ----------
   (Bootstrap aporta .visually-hidden, lo reforzamos por si algún tema lo pisa) */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ---------- Preferencia de movimiento reducido (WCAG 2.3.3 AAA / 2.2.2 AA) ----------
   Desactivar animaciones, transiciones y smooth-scroll. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto !important;
    }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0 !important;
    }
    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    /* Pausar vídeo decorativo de fondo del hero para reducir movimiento */
    .hero-video {
        display: none;
    }
}

/* ---------- Estados activos con aria-current (WCAG 1.3.1) ---------- */
[aria-current="page"],
.nav-link[aria-current="page"],
.dropdown-item[aria-current="page"] {
    font-weight: 600;
}

/* ---------- Enlaces con subrayado visible (WCAG 1.4.1) ----------
   Prohibido identificar enlaces solo por color. Aseguramos subrayado en texto. */
.page-content a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.footer-legal-btn) {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ---------- Alto contraste forzado (Windows High Contrast / forced-colors) ---------- */
@media (forced-colors: active) {
    .btn,
    .nav-link,
    .back-to-top,
    .carousel-pause-btn {
        border: 1px solid ButtonText;
    }
    :focus-visible {
        outline: 3px solid Highlight;
    }
}

/* =============================================================================
   UTILIDADES DE CONTENIDO (para páginas editadas desde TinyMCE)
   ============================================================================= */

/* --- Tarjetas "paso a paso" numeradas ---
   Uso en HTML:
   <div class="step-card">
     <span class="step-card__num">1</span>
     <i class="bi bi-search step-card__icon"></i>
     <h3 class="step-card__title">Diagnóstico</h3>
     <p class="step-card__text">...</p>
   </div>
   Se usan clases porque los <span style="..."> que TinyMCE puede sanear
   no son fiables. Las clases siempre aplican. */
.step-card {
    position: relative;
    background: #fff;
    border-radius: 10px;
    padding: 2.25rem 1.5rem 1.5rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    height: 100%;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.step-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}
.step-card__num {
    position: absolute;
    top: -20px;
    left: 20px;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--brand-accent, #F4A261);
    color: var(--brand-primary, #1E3A5F);
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
}
.step-card__icon {
    font-size: 2rem;
    color: var(--brand-primary, #1E3A5F);
    display: inline-block;
    margin: 0.25rem 0 0.75rem;
}
.step-card__title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--brand-primary, #1E3A5F);
    margin-bottom: 0.75rem;
}
.step-card__text {
    margin-bottom: 0;
    color: var(--gray-700, #495057);
    line-height: 1.55;
}

/* --- CTA con aire vertical generoso ---
   Se usa !important para ganar a .section-padding y a la regla específica
   .home-content-wrapper > section.section-padding (que es más específica). */
.cta-section {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
}
@media (min-width: 992px) {
    .cta-section {
        padding-top: 8rem !important;
        padding-bottom: 8rem !important;
    }
}
.cta-section .cta-content {
    padding-left: 1rem;
    padding-right: 1rem;
}
.cta-section .cta-content p {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    opacity: 1;
}

/* --- Topbar: píldora con número visible + botón WhatsApp ---
   .topbar-phone-pill amplía el "círculo" de la quick-nav cuando se muestra
   el número de texto. .topbar-whatsapp se estila con el color corporativo
   de WhatsApp en hover. */
.topbar .quick-nav a.topbar-phone-pill {
    width: auto !important;
    min-width: 0;
    padding: 0 14px 0 12px;
    gap: 8px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.2px;
}
.topbar-phone-number {
    white-space: nowrap;
    line-height: 1;
}
body.has-hero .topbar .quick-nav a.topbar-phone-pill {
    /* Sobre el hero, la píldora mantiene el azul marino corporativo */
    background: var(--brand-primary) !important;
    color: var(--white) !important;
}
body.has-hero .topbar .quick-nav a.topbar-phone-pill:hover {
    background: var(--brand-accent) !important;
    color: var(--brand-primary) !important;
}
.topbar .quick-nav a.topbar-whatsapp:hover {
    background: #25D366 !important;   /* verde WhatsApp solo en hover */
    color: #fff !important;
    border-color: #25D366 !important;
}

/* --- Badge circular reutilizable para iconos de "feature" ---
   Uso:
   <span class="feature-badge feature-badge--lg">
       <i class="bi bi-heart-fill"></i>
   </span>
   Tamaño por defecto 56px; modificador --lg lo sube a 80px; --sm a 44px.
   Siempre centra el icono y respeta el tamaño aunque TinyMCE sanee attrs. */
.feature-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--brand-accent, #F4A261);
    color: var(--brand-primary, #1E3A5F);
    line-height: 1;
    flex-shrink: 0;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease;
}
.feature-badge--lg { width: 80px; height: 80px; }
.feature-badge--sm { width: 44px; height: 44px; }
.feature-badge i { font-size: 1.5rem; line-height: 1; }
.feature-badge--lg i { font-size: 2.2rem; }
.feature-badge--sm i { font-size: 1.2rem; }
.feature-card:hover .feature-badge { transform: scale(1.06); }

/* --- Tarjeta "feature" (columna con badge + título + texto centrado) --- */
.feature-card {
    text-align: center;
    padding: 1rem 0.5rem;
    height: 100%;
}
.feature-card__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--brand-primary, #1E3A5F);
    margin: 1rem 0 0.5rem;
}
.feature-card__text {
    margin-bottom: 0;
    color: var(--gray-700, #495057);
    line-height: 1.55;
}

/* =============================================================================
   SELECTOR DE IDIOMA
   Estos estilos vivían dentro de un <style> inline en
   resources/views/partials/public/language-selector.php. Se han centralizado
   aquí para no tener CSS suelto por las plantillas.
   ============================================================================= */
.language-selector .btn-link {
    color: inherit;
    text-decoration: none;
    padding: 0.5rem;
}
.language-selector .btn-link:hover {
    color: var(--brand-primary, #1E3A5F);
}
.language-selector .dropdown-menu {
    min-width: 150px;
}
.language-selector .dropdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.language-selector .dropdown-item.active {
    background-color: var(--brand-primary, #1E3A5F);
    color: #fff;
}
.language-selector .dropdown-item.active .text-muted {
    color: rgba(255, 255, 255, 0.7) !important;
}
.language-selector .lang-code {
    font-size: 0.85em;
}