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

/* =============================================
   VARIABLES CSS
   ============================================= */
:root {
    /* Paleta de marca MO&DA (extraída del logo)
       - Primario: carbón casi negro del tipograma y símbolo
       - Acento:   rose gold del degradado del cabello */
    --brand-primary:       #2C3539;   /* Carbón MO&DA */
    --brand-primary-dark:  #1A2023;   /* Carbón más oscuro para hover */
    --brand-accent:        #D4A58A;   /* Rose gold del cabello */
    --brand-accent-dark:   #B88A6E;   /* Rose gold 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;

    --header-height: 100px;
    --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);
    padding: 6px 0;
    font-size: 14px;
    position: relative;
    z-index: 1001;
}

.topbar > .container > .topbar-icons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.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;
}

.topbar .social-links a {
    color: var(--topbar-text);
    font-size: 16px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: var(--transition);
}

.topbar .social-links a:hover {
    color: var(--topbar-text-hover);
    background: rgba(0, 0, 0, 0.05);
}

/* 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;
}

.topbar .quick-nav a {
    color: var(--topbar-text);
    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);
}

.topbar .quick-nav a:hover {
    color: var(--white);
    background: var(--primary-color);
    transform: scale(1.1);
}

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

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

.topbar .topbar-icons .social-links a {
    color: var(--topbar-text);
    font-size: 16px;
    width: 32px;
    height: 32px;
    background: var(--gray-100);
}

/* =============================================
   HEADER / NAVBAR
   ============================================= */
.header {
    /* Navbar sin fondo para ver la imagen del hero detrás.
       Al hacer scroll (.header-scrolled) se aplica fondo blanco translúcido
       + blur para mantener legibilidad del menú sobre el contenido. */
    background: transparent !important;
    box-shadow: none;
    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: el carrusel se extiende detrás del topbar y del navbar para
       que se vea la imagen completa. Se quita el padding-top del body y se
       transparentan las barras. Los iconos/links pasan a "píldora oscura
       translúcida con blur" (glass morphism) para ser legibles sobre cualquier
       fondo, tanto claro como oscuro. */
    body.has-hero {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    body.has-hero .hero-section {
        margin-top: 0 !important;
        padding-top: 0 !important;
        top: 0;
    }
    body.has-hero .topbar {
        background: transparent;
    }

    /* ICONOS DEL TOPBAR: píldoras en azul marino (color de marca) con icono
       blanco. En hover viran a amarillo con icono azul marino. */
    body.has-hero .topbar .quick-nav a,
    body.has-hero .topbar .social-links a,
    body.has-hero .topbar .topbar-icons .social-links a {
        color: var(--white) !important;
        background: var(--brand-primary) !important;
        border: 1px solid rgba(255, 255, 255, 0.15);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
        text-shadow: none;
        transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
    }
    body.has-hero .topbar .quick-nav a:hover,
    body.has-hero .topbar .social-links a:hover,
    body.has-hero .topbar .topbar-icons .social-links a:hover {
        background: var(--brand-accent) !important;
        color: var(--brand-primary) !important;
        border-color: var(--brand-primary);
        transform: scale(1.08);
    }
    body.has-hero .topbar .topbar-separator {
        background: rgba(30, 58, 107, 0.35);
    }

    /* LINKS DEL NAVBAR: sin fondo. Color azul marino (marca) con halo blanco
       sutil para legibilidad tanto sobre fondos claros como medios.
       Hover y active → amarillo (accent). */
    body.has-hero .header:not(.header-scrolled) .navbar-nav .nav-link {
        color: var(--brand-primary) !important;
        background: transparent !important;
        border: 0;
        padding: 8px 14px !important;
        text-shadow:
            0 0 6px rgba(255, 255, 255, 0.9),
            1px 1px 2px rgba(255, 255, 255, 0.8);
        transition: color 0.2s ease;
    }
    body.has-hero .header:not(.header-scrolled) .navbar-nav .nav-link:hover,
    body.has-hero .header:not(.header-scrolled) .navbar-nav .nav-link.active {
        color: var(--brand-accent-dark) !important;
    }
    /* Underline animado del nav en amarillo (en hero y siempre) */
    body.has-hero .header:not(.header-scrolled) .navbar-nav .nav-link::after {
        background: var(--brand-accent) !important;
    }

    /* ============================================================
       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;
}
.header.header-scrolled .logo-img {
    max-height: 55px;
    margin-top: 0;
}

.header .navbar {
    padding: 10px 0;
}

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

.header .logo-img {
    max-height: 110px;
    width: auto;
    /* El logo sobresale hacia arriba ocupando parte del topbar.
       Se eleva ~75% de la altura del topbar (= 30px con topbar de 40px) */
    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;
}

/* Efecto underline animado */
.header .navbar-nav .nav-link::after {
    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::after,
.header .navbar-nav .nav-link.active::after {
    width: calc(100% - 36px);
}

.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;
    height: 100vh;
    min-height: 100vh;
    max-height: 100vh;
    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%;
    background-size: cover;
    /* Encuadre: el sujeto principal queda en la parte superior de la imagen */
    background-position: center top;
    background-repeat: no-repeat;
}

/* Scrim sutil en la mitad inferior del hero: degradado blanco transparente
   que gana algo de opacidad sólo detrás del caption. Invisible sobre zonas
   claras, ayuda a despegar el texto de fondos fuertes (camisetas de color,
   sombras) sin introducir una caja/pill visible. */
.hero-img::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-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;
    bottom: 80px;
    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;
    /* Sin overlay en el hero: los captions van en oscuro con halo blanco
       para legibilidad tanto en fondos claros como medios. */
    color: var(--dark-color);
    padding: 0 5%;
}

.hero-text h1 {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--dark-color);
    margin-bottom: 15px;
    /* Halo blanco sutil para que el texto resalte sin overlay.
       4 sombras cruzadas = perímetro uniforme sin "anillo" visible. */
    text-shadow:
        0 0 8px rgba(255, 255, 255, 0.9),
        1px 1px 2px rgba(255, 255, 255, 0.9),
        -1px -1px 2px rgba(255, 255, 255, 0.9),
        0 2px 4px rgba(255, 255, 255, 0.6);
    max-width: 100%;
}

.hero-text p {
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--dark-color);
    margin-bottom: 25px;
    max-width: 100%;
    /* Halo blanco 4-way (mismo patrón que el h1) con algo más de difusión
       para que el subtítulo se lea bien sobre colores fuertes de la imagen. */
    text-shadow:
        0 0 10px rgba(255, 255, 255, 0.95),
        1px 1px 2px rgba(255, 255, 255, 0.9),
        -1px -1px 2px rgba(255, 255, 255, 0.9),
        0 2px 4px rgba(255, 255, 255, 0.7);
}

.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;
}

/* 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;
}

/* 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, #FFC940);
    color: var(--brand-primary, #1E3A6B);
    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, #1E3A6B);
    display: inline-block;
    margin: 0.25rem 0 0.75rem;
}
.step-card__title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--brand-primary, #1E3A6B);
    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, #FFC940);
    color: var(--brand-primary, #1E3A6B);
    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, #1E3A6B);
    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, #1E3A6B);
}
.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, #1E3A6B);
    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;
}

/* =============================================================================
   MO&DA — OVERRIDES LOCALES (no propagar al core)
   Diseño sin superposición hero: navbar y topbar siempre sólidas en blanco,
   el carrusel arranca debajo. La clase .has-hero está desactivada en el
   layout (ver resources/views/layouts/public.php).
   ============================================================================= */

/* Navbar: el core la define transparente por defecto. La forzamos a blanco
   con sombra SÓLO hacia abajo (el spread negativo contrae la sombra en los
   otros lados; el offset vertical positivo la desplaza bajo el navbar). */
.header {
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 8px 10px -8px rgba(0, 0, 0, 0.15);
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

/* Bajamos el navbar 10px respecto al topbar (sólo en desktop donde el
   topbar es fijo; en móvil el header se pega al top). */
@media (min-width: 992px) {
    .header.fixed-top {
        top: calc(var(--topbar-height) + 10px);
    }
}

/* Topbar: fondo blanco con borde inferior sutil para separarla de la navbar. */
.topbar {
    background: var(--white);
    border-bottom: 1px solid var(--gray-200, #e9ecef);
}

/* Como no hay superposición hero, el texto del logo (name-based logo) debe
   verse siempre en color de marca (no forzado a blanco por reglas de hero). */
.header .site-title,
.header .navbar-brand {
    color: var(--brand-primary);
}

/* Navbar de MO&DA: la fila del menú (INICIO, SERVICIOS, CONTACTO) debe
   quedar visualmente debajo del topbar, con aire. Pero el LOGO sí puede
   sobresalir hacia arriba ocupando parte del topbar (diseño intencionado
   para darle más presencia). Truco: añadimos padding-top al navbar (baja
   los items) y compensamos con un margin-top más negativo en el logo
   (mantiene al logo en su misma posición absoluta). */
.header .navbar {
    padding-top: 25px !important;
    padding-bottom: 10px !important;
}
.header .logo-img {
    /* Logo 10px más pequeño que el default (110→100) para reducir la altura
       global del navbar. El margen negativo se ajusta para que el logo
       mantenga el mismo asomo al topbar (compensa padding-top=25 + el
       navbar bajado 10px respecto al topbar). */
    margin-top: calc(var(--topbar-height) * -0.75 - 20px) !important;
    max-height: 100px !important;
}
/* Al hacer scroll, topbar desaparece y el navbar colapsa; restaurar
   padding del navbar y margen del logo a valores compactos. */
.header.header-scrolled .navbar {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}
.header.header-scrolled .logo-img {
    margin-top: 0 !important;
}

/* Hero: altura = viewport menos lo que ocupa topbar+header fijos. El
   margin-top negativo lo sube 5px para quedar justo bajo la navbar, y
   sumamos esos mismos 5px a la altura para que el borde inferior quede
   enrasado con la parte baja del viewport (sin hueco blanco abajo). */
@media (min-width: 992px) {
    .hero-section {
        margin-top: -5px !important;
        height: calc(100vh - var(--header-height) - var(--topbar-height) + 5px) !important;
        min-height: calc(100vh - var(--header-height) - var(--topbar-height) + 5px) !important;
        max-height: calc(100vh - var(--header-height) - var(--topbar-height) + 5px) !important;
    }
    body.no-topbar .hero-section {
        height: calc(100vh - var(--header-height) + 5px) !important;
        min-height: calc(100vh - var(--header-height) + 5px) !important;
        max-height: calc(100vh - var(--header-height) + 5px) !important;
    }
}
@media (max-width: 991.98px) {
    /* En móvil la navbar también es fija, ajustamos en consecuencia. */
    .hero-section {
        margin-top: -5px !important;
        height: calc(100vh - var(--header-height) + 5px) !important;
        min-height: calc(100vh - var(--header-height) + 5px) !important;
        max-height: calc(100vh - var(--header-height) + 5px) !important;
    }
}

/* =============================================================================
   HERO MO&DA — Overlay oscuro + textos en blanco
   Sustituye el scrim blanco heredado del core (pensado para títulos oscuros
   sobre imágenes claras) por un overlay oscuro con degradado y tipografía
   en blanco, más acorde con la estética cálida del salón.
   ============================================================================= */
.hero-img::before,
.hero-video-container::before {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.65) 0%,
        rgba(0, 0, 0, 0.45) 35%,
        rgba(0, 0, 0, 0.25) 70%,
        rgba(0, 0, 0, 0.1) 100%
    );
}

.hero-text {
    color: var(--white);
}

.hero-text h1 {
    color: var(--white);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55),
                 0 0 20px rgba(0, 0, 0, 0.25);
}

.hero-text p {
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
    font-weight: 400;
}