/* =====================================
    GLOBAL
===================================== */
:root {
    /* Colores principales */
    --color-primary: hsl(0, 90%, 40%);
    --color-terciary-medium: hsl(223, 69%, 33%);
    --color-terciary-dark:hsl(223, 71%, 17%);
    
    /* Textos*/
    --text-white: hsl(0, 0%, 100%);
    --text-light-2: hsl(0, 0%, 95%);
    --text-light: hsl(0, 0%, 87%);
    --text-medium: hsl(119, 9%, 46%);
    --text-dark-blue: hsl(215, 28%, 17%);
    --text-dark: hsl(0, 0%, 7%);

    /*Fondos*/
    --background-navbar-hero-transparent: hsla(0, 0%, 100%, 0.353);
    --background-light: hsl(210, 17%, 98%);
    --background-white: hsl(0, 0%, 100%);
    --background-dark:hsl(0, 0%, 7%);
    --about-background: hsl(218, 13%, 13%);

    /*Fondo input contacto*/
    --background-input-1: hsla(47, 73%, 84%, 0.493);
    --background-input-2: hsla(47, 30%, 76%, 0.493);

    /*Transparencias*/
    /* --hero-overlay-1: hsla(218, 13%, 13%, 0.35);
    --hero-overlay-2: hsla(218, 13%, 13%, 0.65);
    --hero-overlay-3: hsla(218, 13%, 13%, 0.85);
    --hero-overlay-4: hsla(218, 13%, 13%, 1); */

/* --hero-overlay-1: hsla(43, 47%, 88%, 0.05);
    --hero-overlay-2: hsla(43, 47%, 88%, 0.10);
    --hero-overlay-3: hsla(218, 13%, 13%, 0.75);
    --hero-overlay-4: hsla(218, 13%, 13%, 1); */

    /* --hero-overlay-1: hsla(29, 68%, 72%, 0.05);
    --hero-overlay-2: hsla(29, 68%, 72%, 0.10);
    --hero-overlay-3: hsla(29, 13%, 13%, 0.55);
    --hero-overlay-4: hsla(29, 13%, 13%, 0.75); */

    --hero-overlay-1: hsla(40, 33%, 84%, 0.500);
    --hero-overlay-2: hsla(40, 33%, 84%, 0.500);
    --hero-overlay-3: hsla(40, 33%, 84%, 0.500);
    --hero-overlay-4: hsla(40, 33%, 84%, 0.500);
    /* --background-navbar:hsla(0, 15%, 87%, 0.697); */
    --background-navbar:hsla(40, 33%, 84%, 0.500);

    --navbar-overlay: hsla(0, 0%, 4%, 0.3);
    --menu-overlay: hsla(0, 0%, 0%, 0.45);
    --card-overlay-1: hsla(218, 13%, 13%, 0);
    --card-overlay-2: hsla(218, 13%, 13%, 0.5);
    --card-overlay-3: hsla(0, 1%, 36%, 0.18);
    --card-overlay-4: hsla(0, 0%, 4%, 0.208);
    --card-overlay-5: hsla(0, 0%, 4%, 0.327);
    --card-overlay-6: hsla(0, 0%, 4%, 0.5);
    --card-overlay-7: hsla(0, 0%, 4%, 0.6);
    --footer-overlay-1: rgb(159, 160, 162);
    --footer-overlay-2: hsla(225, 2%, 60%, 0.85);
    --footer-overlay-3: hsla(220, 1%, 45%, 0.5);
    --footer-overlay-4: hsla(240, 1%, 33%, 0);
    --mision-overlay: hsla(0, 0%, 0%, 0.75);
 
    /*Degradados*/
    --color-gradient-1: hsl(4, 93%, 53%);
    --color-gradient-2: hsl(0, 100%, 27%);
    --color-gradient-3: hsl(0, 93%, 53%);
    --color-gradient-4: hsl(0, 100%, 37%);
    --about-gradient: hsl(98, 12%, 13%);

    /*Iconos*/
    --icon-light: hsla(0, 0%, 100%, 0.4);
    --icon-dark: hsl(0, 0%, 7%);
    
    /*Sombras*/
    --shadow-box-1: hsla(0, 0%, 0%, 0.06); 
    --shadow-box-2: hsla(0, 0%, 0%, 0.1);
    --shadow-box-3: hsla(0, 0%, 0%, 0.45); 
    --shadow-social-icon: hsla(0, 0%, 0%, 0.65);

    /*Lineas separadoras*/
    --linear-separator-light: hsl(0, 0%, 87%);

}

/* Altura real del navbar */
:root {
    --navbar-height: 72px;
    /* --corporate-color: #c20a0a; */
}

@media (max-width: 992px) {
    :root {
        --navbar-height: 64px;
    }
}

@media (max-width: 576px) {
    :root {
        --navbar-height: 60px;
    }
}

nav {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 100;
    font-style: normal;
    letter-spacing: 0.5px;
    -webkit-font-smoothing: antialiased;
}

body {
    font-family: "Helvetica", "Arial", sans-serif;
    font-optical-sizing: auto;
    font-weight: 100;
    font-style: normal;
    letter-spacing: 0.5px;
    -webkit-font-smoothing: antialiased;
}

/* =====================================
    HERO
===================================== */
.hero {
    height: 100vh;  
    display: flex;
    align-items: center;

    
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    position: relative;    
    z-index: 0;
}

/* overlay degradado */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    /* background: linear-gradient(
        to bottom,
        var(--hero-overlay-1) 0%,
        var(--hero-overlay-2) 60%,
        var(--hero-overlay-3) 85%,
        var(--hero-overlay-4) 100%
    ); */
    /* background: var(--hero-overlay-4) ; */
    z-index: 0;
}

/*Fondo de logo*/
.hero-overlay-content {
    display: inline-block;
    background: var(--background-navbar-hero-transparent);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 0.5px solid hsla(0, 0%, 100%, 0.6);
    padding: 1.5rem 3rem;
    border-radius: 12px;
    margin-top: var(--navbar-height);
}

.hero-content {
    position: relative;
    z-index: 2;
}

.hero-inicio-title {
    color: var(--text-dark-blue);
    font-size: 2.1rem;
}

.hero-inicio-subtitle {
    position: relative;
    z-index: 2;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-dark-blue);
}

.hero-nosotros-title {
    color: var(--text-dark-blue);
    font-size: 2.1rem;
}

.hero-nosotros-subtitle {
    position: relative;
    z-index: 2;
     font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-dark-blue);
}

.hero-portafolio-title {
    color: var(--text-dark-blue);
}

.hero-portafolio-subtitle {
    position: relative;
    z-index: 2;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-dark-blue);
}

/*Animaciones*/
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade {
    animation: fadeInUp 1s ease-out forwards;
}

.delay-1 {
    animation-delay: .3s;
}

.delay-2 {
    animation-delay: .6s;
}

.delay-3 {
    animation-delay: .9s;
}

.hero-logo{
    width: 100%;
    max-width: 380px; /* tamaño máximo en escritorio */
    height: auto;
}

.hero-logo{
    width: 100%;
    max-width: 380px;
    height: auto;
}

@media (max-width: 768px){
    .hero-logo{
        max-width: 240px;
    }
}

/* =====================================
    ESTADISTICAS
===================================== */
.stats {
    background: var(--background-white);
}

.stat-number {
    font-size: 6rem;
    font-weight: bold;
    background: linear-gradient(to bottom, var(--color-gradient-1), var(--color-gradient-2)); /* rojo claro → rojo oscuro */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* =====================================
    NAVBAR
===================================== */

/* Navbar base */
.navbar {
    transition: background .3s ease, box-shadow .3s ease;
    z-index: 1000;
}

/* Para landing page, navbar para hero section */
.navbar-landing {
    position: fixed;
    width: 100%;
    z-index: 1000;
    /* background: transparent; */
    transition: background 0.3s ease, box-shadow 0.3s ease;
    background: var(--background-navbar-hero-transparent);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 0.5px solid hsla(0, 0%, 100%, 0.6);
}

/* Navbar en páginas sin hero: siempre sólido */
.navbar:not(.navbar-landing) {
    background: var(--background-white);
    box-shadow: 0 4px 20px var(--shadow-box-1);
}

/* Links y logo en blanco mientras el navbar está transparente */
.navbar-landing:not(.scrolled) .nav-link,
.navbar-landing:not(.scrolled) .navbar-brand {
    color: var(--text-dark-blue);
    font-weight: 500;
}

/* Hover sobre links cuando transparente */
.navbar-landing:not(.scrolled) .nav-link:hover {
    color: var(--text-dark-blue); /* gris claro para contraste */
}

/* Links y logo cuando el navbar tiene fondo sólido */
.navbar-landing.scrolled .nav-link,
.navbar-landing.scrolled .navbar-brand {
    color: var(--text-medium);
}

/* Hover sobre links cuando sólido */
.navbar-landing.scrolled .nav-link:hover {
    color: var(--text-dark-blue); /* tu color original */
}

/* Cuando NO hay hero, empuja el contenido */
main.no-hero {
    padding-top: var(--navbar-height);
}

/* Hamburguesa blanca cuando navbar es transparente */
.navbar-landing:not(.scrolled) .navbar-toggler {
    border-color: var(--icon-light);
    background: var(--card-overlay-4);
    border-radius: 6px;
    border: none !important;
    padding: 6px 10px;
    transition: background 0.3s ease;
}

.navbar-landing:not(.scrolled) .navbar-toggler:hover {
    background: var(--card-overlay-5);
}

.navbar-landing:not(.scrolled) .navbar-toggler-icon {
    filter: invert(1);
}

/* Base link */
.navbar .nav-link {
    position: relative;
    padding-bottom: 12px;
}

/* Línea debajo de opciones navbar*/
.navbar .nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: var(--color-primary);
    transition: width .3s ease;
}

/* Hover */
.navbar .nav-link:hover::after {
    width: 100%;
}

/*Sombra de navbar*/
.navbar-landing.scrolled {
    background: var(--background-white);
    box-shadow: 0 2px 12px var(--shadow-box-1);
}

@media (max-width: 991px) {

    .navbar .nav-link {
        padding-bottom: 8px;
    }

    .navbar .nav-link::after {
        bottom: 4px; /* ajusta alineación en vertical */
    }

}

/*Fondo de menu desplegado hamburguesa*/
@media (max-width: 991px) {

    .navbar-landing:not(.scrolled) .navbar-collapse {
        background: var(--background-light);
        padding: 1rem;
    }

}

/* MOBILE DRAWER MENU */
@media (max-width: 991px) {

    /* Convertir collapse en panel lateral */
    .navbar-collapse {
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        width: 75%;
        background: var(--background-light);
        padding: 100px 30px 30px 30px; /* espacio arriba para navbar */
        box-shadow: -10px 0 30px var(--shadow-box-2);

        transform: translateX(100%);
        transition: transform .35s ease-in-out;
        z-index: 2000;
    }

    /* Cuando está abierto */
    .navbar-collapse.show {
        transform: translateX(0);
    }

    /* Links negros */
    .navbar-collapse .nav-link {
        color: var(--text-dark) !important;
        font-size: 1.1rem;
        padding: 12px 0;
        width: 100%;
    }

    /* Quitar underline en móvil si quieres más limpio */
    .navbar-collapse .nav-link::after {
        display: none;
    }

    .navbar-nav {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center !important; /* centra horizontal */
        text-align: center;
    }

}


.navbar-logo {
    height: 72px;
    width: auto;
} */

/* @media (max-width: 991px) {
    .navbar-logo {
        height: 64px;
        width: auto;
    }
} */

.navbar-logo {
    height: 60px;   /* tamaño base */
    width: auto;
    display: block;
}

.navbar-brand {
    padding: 0;
    display: flex;
    align-items: center;
}


@media (max-width: 991px) {
    .navbar-logo {
        height: 50px;   /* Tablet */
    }
}

@media (max-width: 576px) {
    .navbar-logo {
        height: 45px;   /* Mobile */
    }
}

.navbar {
    padding-top: .15rem;
    padding-bottom: .15rem;
}

.navbar .container {
    display: flex;
    align-items: center;
}

/*Transicion suave al hacer scroll y logo pasa de blanco a color*/
.navbar-logo {
    transition: filter 0.4s ease, opacity 0.3s ease;
}



/*Convertir logo en color blanco*/
/* .navbar-landing .navbar-logo {
    filter: brightness(0) invert(1);
} */

/*Regresar logo a color normal*/
.navbar-landing.scrolled .navbar-logo {
    filter: none;
}

/* Estilos de X en menu hamburguesa*/
@media (max-width: 991px) {

    .drawer-header {
        display: flex;
        justify-content: center;   /* centra horizontalmente */
        align-items: center;
        padding: 1rem 0;
        width: 100%;
    }

    .btn-close-menu {
        background: none;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
        color: inherit;             /* hereda el color del nav */
        line-height: 1;
    }

    .btn-close-menu:hover {
        transform: scale(1.2);
    }

}

.navbar-landing {
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
}

.navbar-landing .navbar-logo {
    height: 75px;
}

/* =====================================
    NOSOTROS
===================================== */
/* .about p {
    color: rgba(255, 255, 255, 0.85);
} */

.about h2 {
    font-size: 2.5rem;
}

.about {
    background: var(--about-background);
    padding: 60px 0 100px;
    color: var(--text-white);
}

.about-img {
    width: 100%;
    max-width: 420px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    box-shadow: 0 30px 60px var(--shadow-box-3);
}


/* ====================
   DARK WRAPPER HERO-IMAGE
==================== */
/* asegurar contenido encima */
.hero,
.about {
    position: relative;
    z-index: 2;
}

.hero,
.about,
.wave-separator {
    position: relative;
    z-index: 2;
}

/*Separador entre hero y seccion de about us*/
.wave-separator {
    background: var(--about-gradient);
    line-height: 0;
}

.wave-separator svg {
    width: 100%;
    height: 70px;
    display: block;
}

/* ====================
   TRANSICION - APARECEN SECCIONES EN 1 SEGUNDO
==================== */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: all .5s ease;
}

.animate-fast {
    transition-duration: .3s;
}

.animate-on-scroll.show {
    opacity: 1;
    transform: translateY(0);
}

.delay-1 { transition-delay: .2s; }
.delay-2 { transition-delay: .4s; }

/* =====================================
    CLIENTE
===================================== */
.clients {
    background: var(--background-white); /* gris claro de fondo */
}

.clients .section-title {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--text-dark-blue);
}

.client-logo {
    max-width: 100%;
    height: auto;
}

/* =====================================
    FOOTER
===================================== */
/*color fondo y texto*/
.footer {
    /* background: linear-gradient(to right, var(--color-terciary-dark) 0%, var(--color-terciary-medium) 100%); */
    /* background-color: var(--color-terciary-medium); */
    position: relative;
    z-index: 10;
    color: var(--text-dark);
    overflow-x: hidden;
}

.footer-top {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    margin: 0;
    position: relative;
}

.footer-left {
    display: flex;
    align-items: center;
}

/* Solo desktop */
@media (min-width: 992px) {
    .footer-left {
        padding: 10px 5rem;
    }
}

/* Solo movil y tablet */
@media (max-width: 991px) {
    .footer-left {
        padding: 20px 20px;
    }
}

.footer-info {
    padding: 10px 0;
    width: 100%;
}

.footer-info i {
    width: 22px;
    text-align: center;
    margin-right: 10px;
}

/* Información columna izquierda */
.footer-info h5 {
    font-size: 1.2rem;
}

.footer-info p {
    margin-bottom: 7px;   
    line-height: 1.5;
    font-size: 1.05rem;
}

/* Subtítulos en negrita */
.footer-label {
    font-weight: 700;   /* remarcado elegante */
}

/* Texto normal */
.footer-value {
    font-weight:600;
}

.footer-image {
    position: relative;
    padding: 0;
    overflow: hidden;
}

.footer-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 37% 100%);
}

/* Overlay alineado con la diagonal */
@media (min-width: 992px) {

    .footer-image {
        background-image:
            linear-gradient(
                65deg,
                var(--footer-overlay-1) 0%,
                var(--footer-overlay-2) 12%,
                var(--footer-overlay-3) 25%,
                var(--footer-overlay-4) 45%
            ),
            var(--footer-bg); /*IMPORTANTE: NO BORRAR, LA VARIABLE SE USA EN LA VISTA DE FOOTER */

        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;

        clip-path: polygon(0 0, 100% 0, 100% 100%, 37% 100%);
    }
}

@media (max-width: 991px) {

    .footer-image {
        clip-path: none;

        background-image:
            linear-gradient(
                to bottom,
                var(--footer-overlay-1) 0%,
                var(--footer-overlay-4) 20%
            ),
            var(--footer-bg);

        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;

        min-height: 350px; 
    }
}

/* Responsive */
@media (max-width: 992px) {
    .footer-top {
        flex-direction: column;
    }
    .footer-image {
        margin-top: 2rem;
    }
}

.footer-top {
    position: relative;
}

/* Aviso de privacidad */
.footer-privacy {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
}

/*color texto aviso privacidad*/
.footer-privacy a {
    color: var(--text-dark);
    font-size: 0.9rem;
    opacity: 0.85;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.footer-privacy a:hover {
    opacity: 1;
    text-decoration: underline;
}

/*tamaño icono red social*/
.social-icon {
    width: 28px;
    height: 28px;
     filter: drop-shadow(0 1px 2px var(--shadow-social-icon));
}

.footer-socials a {
    transition: transform .2s ease;
}

.footer-socials a:hover {
    transform: scale(1.1);
}

.linkedin .social-icon {
    transform: scale(1.30);
}

.whatsapp .social-icon {
    transform: scale(1.15);
}

/*aviso privacidad en movil y tablet*/
@media (max-width: 991px) {
    .footer-top {
        flex-direction: column;
    }

    .footer-privacy {
        position: relative;
        padding: 15px 0;
        background-color: var(--footer-overlay-4);
        text-align: center; 
    }
}

@media (min-width: 992px) {

    .footer-privacy {
        position: absolute;
        bottom: 16px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 5;
    }

}

/* @media (max-width: 992px) {
    .footer-top {
        flex-direction: column;
    }
} */

.footer-overlay-box{
    /* background: var(--card-overlay-6);  */
    /* padding: 10px 35px; */

    /* border-radius: 8px; */

    max-width: 720px; /* evita que llegue a los extremos */
}

/* =====================================
    PORTAFOLIO
===================================== */
/*Linea debajo de menu categorias*/
.portfolio-menu {
    border-bottom: 1px solid var(--linear-separator-light);
}

/*Titulo sin marcar de categorias*/
.portfolio-tab {
    cursor: pointer;
    font-weight: 600;
    padding: 8px 4px;
    position: relative;
    color: var(--text-medium);
    transition: color .3s ease;
}

/*Titulo marcado de categoria*/
.portfolio-tab::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0;
    height: 2px;
    background: var(--color-primary);
    transition: width .3s ease;
}

/*Color de titulo categoria al pasar mouse*/
.portfolio-tab:hover {
    color: var(--text-dark);
}

.portfolio-tab.active {
    color: var(--text-dark);
}

.portfolio-tab.active::after {
    width: 100%;
}

/* Animación suave al filtrar */
.portfolio-item {
    transition: opacity .3s ease, transform .3s ease;
}

.portfolio-item.hidden {
    opacity: 0;
    transform: scale(0.95);
    pointer-events: none;
    display: none;
}

/* Estado base */
.portfolio-item {
    opacity: 1;
    transform: scale(1);
    transition: opacity .35s ease, transform .35s ease;
}

/* Oculto con animación */
.portfolio-item.hidden {
    opacity: 0;
    transform: scale(0.95);
    pointer-events: none;
}

/* Visible */
.portfolio-item.show {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

/*Animacion para las cards estaticas cuando se usa la paginacion*/
.portfolio-grid {
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.portfolio-grid.is-animating {
    opacity: 0;
    transform: scale(0.96);
}

.portfolio-item {
    display: none;
}

/*EMPIEZA PAGINACION*/
/*Animacion de paginacion*/
.pagination {
    display: flex;
    gap: 8px;
}

.page-btn {
    border: none;
    background: transparent;
    padding: 6px 12px;
    cursor: pointer;
    font-weight: 500;
}

.page-btn.active {
    background: var(--color-primary);
    color: var(--text-white);
    border-radius: 6px;
}
/*TERMINA PAGINACION*/

/* lazy loading para portafolio*/
.portfolio-img {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    /* border-radius: 16px; */
}

.lazy-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.05);
    transition: opacity .4s ease, transform .4s ease;
}

.lazy-img.loaded {
    opacity: 1;
    transform: scale(1);
}

/* =====================================
   PORTAFOLIO CARDS
===================================== */
/* Contenedor de la imagen de la card */
.portfolio-section .section-title {
    font-size: 2.5rem;
    font-weight: bold;
}

.portfolio-card {
    display: block;
    text-decoration: none;
    cursor: pointer;
}

.portfolio-card:hover .overlay,
.portfolio-card:focus .overlay,
.portfolio-card:active .overlay {
    background: var(--card-overlay-2);
}

.portfolio-img .obra-title {
    color: var(--text-light-2);
    font-weight: bold;
    font-size: 1.2rem;
    z-index: 2;
}

/* .portfolio-img {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background-size: cover;
    background-position: center;
    
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.portfolio-img .overlay {
    position: absolute;
    inset: 0;
    background: var(--card-overlay-1); 
    display: flex;
    align-items: flex-end;
    padding: 12px;
    transition: background 0.3s ease; 
    pointer-events: none; 
} */

.portfolio-img {
    position: relative;
    width: 100%;
    padding-top: 100%; /* hace que el contenedor sea cuadrado */
    overflow: hidden;
}

/* Imagen dentro de la card */
.portfolio-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* zoom y recorte automático */
    transition: transform 0.3s ease; /* efecto suave para hover */
    z-index: 0;
}

/* Efecto de zoom al pasar el mouse (opcional) */
.portfolio-img:hover img {
    transform: scale(1.1);
}

/* Overlay con título */
.portfolio-img .overlay {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 10px;
    background: var(--card-overlay-5);
    color: var(--text-white);
    text-align: left;
    font-weight: bold;
    transition: background 0.3s ease;
    z-index: 2;
}

.portfolio-img:hover .overlay {
    background: var(--card-overlay-2);
}

.portfolio-img::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--card-overlay-3); /* overlay más claro */
    z-index: 1;
    pointer-events: none;
}

.portfolio-card:hover .portfolio-img::before {
    background: var(--card-overlay-4);
}

/* =====================================
    CONTACTO
===================================== */
/* Animación */
.section-title,
.section-subtitle,
.title-divider {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 0.8s ease forwards;
}

.section-subtitle {
    animation-delay: 0.2s;
}

.title-divider {
    width: 0;
    height: 4px;
    margin-top: 15px;
    background: linear-gradient(
        90deg,
        var(--color-gradient-2),
        var(--color-gradient-1)
    );
    border-radius: 3px;
    animation: expandLine 0.8s ease forwards;
    animation-delay: 0.6s;
}

/* Animación expansión */
@keyframes expandLine {
    0% {
        width: 0;
        opacity: 0;
    }
    100% {
        width: 100px;
        opacity: 1;
    }
}


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

/* Título */
.section-title {
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--text-dark-blue);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

/* Frase motivadora de vista contacto */
.section-subtitle {
    color: var(--text-medium);
    max-width: 600px;
    margin: 0 auto 20px auto;
    font-size: 1.05rem;
}

#contactForm .form-control {
    background-color: var(--background-input-1);
}

#contactForm .form-control:focus {
    background-color: var(--background-input-2);
}

.grecaptcha-badge {
    visibility: hidden;
}

.recaptcha-legal {
    font-size: 0.75rem;
    line-height: 1.4;
    opacity: 0.8;
}

.recaptcha-legal a {
    color: var(--color-primary);
    text-decoration: none;
}

.recaptcha-legal a:hover {
    text-decoration: underline;
}

.secure-icon {
    font-size: 0.9rem;
    cursor: pointer;
    opacity: 0.8;
    transition: all 0.3s ease;
}

.secure-icon:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* =====================================
   NOSOTROS
===================================== */

/* ===== SECCION MISION VISION ===== */

.mision_vision {
    position: relative;
    min-height: 600px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: stretch;
}

/* Rectángulo vertical */
.mv-overlay-box {
    position: absolute;
    top: 0;
    right: 60px; /* margen del borde derecho */
    width: 33.333%;
    height: 85%; /* termina antes del borde inferior */
    background: var(--mision-overlay);
    padding: 60px 40px;
    color: var(--text-white);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Títulos */
.mv-title {
    font-weight: 700;
    margin-bottom: 15px;
    padding-left: 15px;
    border-left: 4px solid; 
    border-image-source: linear-gradient(
        200deg,
        var(--color-gradient-2),
        var(--color-gradient-1)
    );
    border-image-slice: 1;
}

/* Texto */
.mv-text {
    font-size: 1rem;
    line-height: 1.7;
    opacity: 0.9;
}

@media (max-width: 992px) {

    .mv-overlay-box {
        position: relative;
        width: 100%;
        right: 0;
        height: auto;
    }

    .mision_vision {
        padding: 60px 20px;
    }

}

.historia {
    background-color: var(--background-white);
}

.historia h2 {
    position: relative;
    display: inline-block;
}

/* Línea decorativa elegante */
.historia h2::after {
    content: "";
    display: block;
    width: 60px;
    height: 3px;
    background: linear-gradient(
        90deg,
        var(--color-gradient-2),
        var(--color-gradient-1)
    ); /* tu color corporativo */
    margin-top: 10px;
    border-radius: 3px;
}

/* Imagen con estilo moderno */
.historia-img {
    /* border-radius: 12px; */
    box-shadow: 0 30px 60px var(--shadow-box-2);
    /* transition: transform 0.4s ease, box-shadow 0.4s ease; */
}

/* .historia-img:hover {
    transform: translateY(-5px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);
} */

/* =====================================
   SERVICIOS VARIOS
===================================== */
.servicios-varios-card {
    display: block;
    text-decoration: none;
    cursor: pointer;
}

/* proporciones */
.servicios-varios-img-horizontal{
    aspect-ratio: 16 / 9;
}

.servicios-varios-img-vertical{
    aspect-ratio: 3 / 4 ;

}

.servicios-varios-img-vertical-corto{
    aspect-ratio: 3 / 2; /* más “chaparrita” */
}

.servicios-varios-img-cuadrado{
    aspect-ratio: 1 / 1;
}

/* contenedor imagen */
.servicios-varios-img {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* imagen */
.servicios-varios-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

/* zoom al hover */
.servicios-varios-card:hover img {
    transform: scale(1.1);
}

/* overlay SOLO abajo */
.servicios-varios-img .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;

    padding: 12px;

    display: flex;
    justify-content: flex-start;
    align-items: center;

    background: var(--card-overlay-6);
    transition: background 0.3s ease;
}

/* hover overlay */
.servicios-varios-card:hover .overlay {
    background: var(--card-overlay-7);
}

/* titulo */
.servicios-varios-img .obra-title {
    color: var(--text-white);
    font-weight: bold;
    font-size: 1.2rem;
    text-align: left;
}

/* =====================================
   SERVICIOS PROFESIONALES
===================================== */
.servicios-profesionales-card {
    display: block;
    text-decoration: none;
    cursor: pointer;
}

/* contenedor de la imagen */
.servicios-profesionales-img {
    position: relative;
    width: 100%;
    aspect-ratio: 13 / 9;
    overflow: hidden;
}

/* imagen */
.servicios-profesionales-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

/* zoom */
.servicios-profesionales-card:hover img {
    transform: scale(1.1);
}

/* overlay SOLO abajo */
.servicios-profesionales-img .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    
    padding: 12px;

    display: flex;
    align-items: center;
    justify-content: flex-start;

    background: var(--card-overlay-6);
    transition: background 0.3s ease;
}

/* hover */
.servicios-profesionales-card:hover .overlay {
    background: var(--card-overlay-7);
}

/* titulo */
.servicios-profesionales-img .obra-title {
    color: var(--text-white);
    font-weight: bold;
    font-size: 1.2rem;
    text-align: left;
}


/* =====================================
   NOSOTROS-SERVICIOS-CARDS
===================================== */
.nosotros-servicios-card {
    display: block;
    text-decoration: none;
    cursor: pointer;
}

.nosotros-servicios-img-horizontal{
    aspect-ratio: 11 / 9;
}

.nosotros-servicios-img-vertical{
    aspect-ratio: 3 / 4;
}

.nosotros-servicios-img-cuadrado{
    aspect-ratio: 1 / 1;
}

.nosotros-servicios-img {
    position: relative;
    width: 100%; 
    background-size: cover;
    background-position: center;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
} 

/* .nosotros-servicios-img .overlay {
    position: absolute;
    inset: 0;
    background: var(--card-overlay-1); 
    display: flex;
    align-items: flex-end;
    padding: 12px;
    transition: background 0.3s ease; 
    pointer-events: none; 
} */

/* overlay visible al hover, focus o active */
.nosotros-servicios:hover .overlay,
.nosotros-servicios:focus .overlay,
.nosotros-servicios:active .overlay {
    background: var(--card-overlay-2);
}

/* título siempre blanco y encima del overlay */
.nosotros-servicios-img .obra-title {
    color: var(--text-light-2);
    font-weight: bold;
    font-size: 1.2rem;
    z-index: 2;
}

/* Imagen dentro de la card */
.nosotros-servicios-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    transition: transform 0.3s ease; /* efecto suave para hover */
}

/* Efecto de zoom al pasar el mouse (opcional) */
.nosotros-servicios-img:hover img {
    transform: scale(1.1);
}

/* Overlay con título */
.nosotros-servicios-img .overlay {
    position: absolute;
    bottom: 0;
    left:0;
    width: 100%;
    padding: 10px;
    color: var(--text-white);
    text-align: left;
    font-weight: bold;
    background: var(--card-overlay-6);
    transition: background 0.3s ease;
    pointer-events: none;
}

.nosotros-servicios-img:hover .overlay {
    background: var(--card-overlay-7);
}

.nosotros-servicios-img-horizontal img {
    object-position: left top; /* mueve el recorte hacia arriba */
}


/* =====================================
   CONSTRUCCIONES
===================================== */
.construcciones-card {
    display: block;
    text-decoration: none;
    cursor: pointer;
}

/* proporciones */
.construcciones-img-horizontal{
    aspect-ratio: 16 / 9;
}

.construcciones-img-vertical{
    aspect-ratio: 3 / 4;
}

.construcciones-img-cuadrado{
    aspect-ratio: 1 / 1;
}

/* contenedor imagen */
.construcciones-img {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* imagen */
.construcciones-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

/* zoom al pasar el mouse en toda la card */
.construcciones-card:hover img {
    transform: scale(1.1);
}

/* overlay solo abajo */
.construcciones-img .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;

    padding: 12px;

    background: var(--card-overlay-6);
    color: var(--text-white);

    display: flex;
    align-items: center;

    transition: background 0.3s ease;
}

/* hover del overlay */
.construcciones-card:hover .overlay {
    background: var(--card-overlay-7);
}

/* titulo */
.construcciones-img .obra-title {
    color: var(--text-light-2);
    font-weight: bold;
    font-size: 1.2rem;
}

/* posición especial de recorte */
.construcciones-img-horizontal img {
    object-position: left top;
}

/* ===============================
   DETALLE DE OBRA
================================ */
.obra-info .list-group-item{
    padding-left: 0;
    border: none;
    font-size: 1.25rem;
}

.obra-info strong{
    font-weight: 700;
    color: var(--text-dark-blue);
}

.obra-info li{
    margin-bottom: 6px;
}


/* ===============================
   GALERÍA - PROCESO CONSTRUCTIVO
================================ */
.obra-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 310px;   /* altura base de cada fila */
    gap: 16px;
}

/* Horizontal: ocupa 1 fila */
.gallery-item {
    overflow: hidden;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Vertical: ocupa 2 filas */
.gallery-item.vertical {
    grid-row: span 2;
}

/* Tablet */
@media (max-width: 992px) {
    .obra-gallery {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 180px;
    }
}

/* Mobile */
@media (max-width: 576px) {
    .obra-gallery {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }

    /* En móvil las verticales vuelven a su proporción natural */
    .gallery-item.vertical {
        grid-row: span 1;
    }

    .gallery-item img {
        height: 260px;
    }
}


/* ===============================
   BOTONES DE TODO EL SITIO
================================ */

.button-left {
    background: linear-gradient(
        270deg,
        var(--color-gradient-3),
        var(--color-gradient-4)
    ); 
    /* border-color: hsl(223, 69%, 33%) !important; */
    color: var(--text-white);
}

.button-left:hover {
    background: linear-gradient(
        270deg,
        var(--color-gradient-1),
        var(--color-gradient-2)
    ); 
    color: var(--text-white);
    /* border-color: hsl(223, 69%, 25%) !important; */
}

.button-right {
    background: linear-gradient(
        90deg,
        var(--color-gradient-3),
        var(--color-gradient-4)
    ); 
    /* border-color: hsl(223, 69%, 33%) !important; */
    color: var(--text-white);
}

.button-right:hover {
    background: linear-gradient(
        90deg,
        var(--color-gradient-1),
        var(--color-gradient-2)
    ); 
    color: var(--text-white);
    /* border-color: hsl(223, 69%, 25%) !important; */
}