*{
    box-sizing: border-box;
}
/* ===========================
    Estilos para formulario hero
   =========================== */

:root {
    --primary-blue: #2d3088; 
    --light-bg: #EFF1F6;      
    --white: #FFFFFF;
    --text-dark: #333333;
    --border-color: #D1D1D1;
    --header-height: 100px; /* altura estimada del header fijo (ajustar si es necesario) */
}

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

body {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--light-bg);
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
}

/* Scroll suave por anclas y margen para evitar solapamiento con header fijo */
html {
    scroll-behavior: smooth;
}

/* Al usar un enlace a #cotiza-section, este margin evita que el header lo tape */
#cotiza-section {
    scroll-margin-top: var(--header-height);
    padding-top: 6px; /* pequeño espacio visual extra */
}

/* Asegurar mismo comportamiento para el objetivo #main-container */
#main-container {
    scroll-margin-top: var(--header-height);
    padding-top: 6px;
}

main {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0;
}

.main-container {
    align-items: center;
    width: 100%;
    min-height: 72vh;
    position: relative;
    justify-content:space-between;
    z-index: 10;
}

.hero-image {
    position: relative;
    display: block;
    width: auto;
    height: auto;
    max-height: 70vh;
    object-fit: contain;
    z-index: 2;
    pointer-events: none;
    margin: 0 auto;
}

.hero-image-desktop {
    display: block;
}

.hero-image-mobile {
    display: none;
}


/* Hero wrapper to generate the blue strip starting at the base of the image */
.hero-image-wrapper {
    position: relative;
    z-index: 2;
}

.hero-image-wrapper::after {
    content: "";
    position: absolute;
    top: 58%;
    left: 50%;
    transform: translateX(-50%);
    width: 200vw; /* empata con la pantalla, borde a borde */
    height: 280px; /* altura por defecto en desktop */
    background: #2d3088;
    z-index: 0; /* detrás de imagen y formulario */
}

/* Hero específico para proyecto La Alborada: ocupar 100% de la ventana */
.project-hero {
    height: calc(100vh - var(--header-height));
    min-height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: transparent;
    padding-top: 0;
}

.project-hero .container {
    width: 100%;
    max-width: 1300px;
    padding: 0 20px;
}

.hero-portada-la-alborada {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero-portada-la-alborada img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: none;
}



/* Wrapper del contenido (Formulario y Texto) */
.content-wrapper {
    display: flex;
    justify-content:space-between;
    max-width: 100%;
    margin: 0 auto; 
    margin-top: 40px;
}


/* --- TARJETA DEL FORMULARIO --- */
.form-card {
    background: var(--white);
    padding: 24px;
    border-radius: 18px;
    width: 340px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);

    /* Layout so content fills and button sits centered at bottom */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 520px; /* unified visual height */

    /* Sit above the blue strip */
    position: relative;
    z-index: 3;
}

/* Each step fills the card */
.form-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Forms inside steps stretch to push the button to the bottom */
.form-step form {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 9px;
    flex: 1;
}

/* Barra de progreso */
.progress-container {
    display: flex;
    gap: 5px;
    margin-bottom: 20px;
}

.progress-bar {
    height: 12px;
    flex: 1;
    border-radius: 10px;
    background-color: #E0E0E0;
    border: 1px solid var(--primary-blue);
}

.progress-bar.active {
    background-color: var(--primary-blue);
}

.step-label {
    font-size: 17px;
    color: #666;
    margin-bottom: 17px;
}

/* --- Newsletter / Suscripción (sección de recomendación) --- */
.noticias-section__recomendacion .newsletter-card {
    background: var(--white);
    padding: 22px;
    border-radius: 14px;
    width: 320px;
    box-shadow: 0 18px 40px rgba(7,10,26,0.12), inset 0 1px 0 rgba(255,255,255,0.6);
    margin-bottom: 18px;
}

.noticias-section__recomendacion .newsletter-card__inner h2 {
    color: var(--primary-blue);
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 20px;
    line-height: 1.1;
}

.noticias-section__recomendacion .newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.noticias-section__recomendacion .newsletter-form input[type="text"],
.noticias-section__recomendacion .newsletter-form input[type="email"] {
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid #ECECEC;
    border-radius: 10px;
    font-size: 15px;
    color: #333;
    background: #fff;
    outline: none;
}

.noticias-section__recomendacion .newsletter-form input:focus {
    box-shadow: 0 4px 14px rgba(45,48,136,0.07);
    border-color: rgba(45,48,136,0.15);
}

.noticias-section__recomendacion .newsletter-form input::placeholder {
    color: #CFCFCF;
    text-transform: uppercase;
    font-weight: 700;
}

.noticias-section__recomendacion .newsletter-privacy {
    display: flex;
    align-items: center; /* centra checkbox y texto */
    gap: 10px;
    font-size: 14px;
    color: #222;
    line-height: 1.2;
    width: 100%;
    justify-content: flex-start; /* evitar empujar elementos al extremo derecho */
    flex-wrap: wrap; /* permite adaptar en pantallas pequeñas */
}

.noticias-section__recomendacion .newsletter-privacy input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0; /* eliminar desplazamiento manual */
    flex: 0 0 auto;
}

/* Empujar el texto principal a la izquierda y mantener el enlace accesible */
.noticias-section__recomendacion .newsletter-privacy__left {
    display: inline-flex; /* mantener el texto y enlace como unidad inline dentro de la tarjeta */
    align-items: center;
    gap: 8px;
    max-width: 100%;
    white-space: normal; /* permitir envolver si es necesario dentro de la tarjeta */
    flex: 1 1 auto;
}

.noticias-section__recomendacion .newsletter-privacy__link {
    display: inline-block;
    width: auto; /* quitar ancho fijo para evitar escalados raros */
    text-align: left;
    color: var(--primary-blue);
    font-weight: 700;
    text-decoration: none;
    font-size: 14px;
    line-height: 1.1;
    margin-left: 6px; /* separación natural junto al texto */
}

/* En pantallas pequeñas permitir que el conjunto pueda saltar de línea sin desbordar */
@media (max-width: 540px) {
    .noticias-section__recomendacion .newsletter-privacy__left {
        white-space: normal;
        gap: 8px;
    }
    .noticias-section__recomendacion .newsletter-privacy__link {
        font-size: 13px;
    }
}

.noticias-section__recomendacion .btn-newsletter {
    display: block;
    width: 100%;
    background: var(--primary-blue);
    color: #fff;
    border: none;
    padding: 16px 18px;
    border-radius: 22px;
    font-size: 18px;
    font-weight: 700;
    box-shadow: 0 12px 30px rgba(45,48,136,0.32);
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.noticias-section__recomendacion .btn-newsletter:active {
    transform: translateY(1px);
}

.noticias-section__recomendacion .btn-newsletter:hover {
    box-shadow: 0 12px 28px rgba(45,48,136,0.28);
}

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

@media (max-width: 900px) {
    .noticias-section__recomendacion .newsletter-card {
        width: 100%;
        box-shadow: 0 10px 28px rgba(7,10,26,0.08);
        border-radius: 12px;
    }
    .noticias-section__recomendacion .newsletter-privacy a {
        margin-left: 8px; /* evitar que el enlace quede excesivamente a la derecha en móvil */
    }
}

.form-title {
    color: var(--primary-blue);
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 20px;
}

/* Inputs y Selects */
input[type="text"],
input[type="tel"],
input[type="number"],
select {
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 10px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    color: #555;
}

input::placeholder {
    color: #999;
    text-transform: uppercase;
    font-size: 13px;
}

.input-label-sm {
    font-size: 15px;
    font-weight: 800;
    color: var(--primary-blue);
    display: block;
    margin-bottom: 20px;
    text-transform: uppercase;
}

/* Checkboxes (Paso 2) */
.checkbox-group {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
    font-size: 13px;
    line-height: 1.4;
    color: #333;
}

.checkbox-group input {
    margin-top: 4px;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.checkbox-group label {
    flex: 1 1 auto;
}

.checkbox-group a {
    color: var(--primary-blue);
    text-decoration: underline;
}

/* Botones */
.btn-primary {
    display: inline-block;
    background-color: var(--primary-blue);
    box-shadow: #3333338f -1px 1px 5px;
    color: var(--white);
    border: none;
    padding: 14px 80px;
    border-radius: 35px;
    font-size: 18px;
    font-weight: 400;
    cursor: pointer;
    transition: background 0.3s;
    margin: 0px auto 0 auto;
    text-align: center;
    text-decoration: none;
}

.btn-primary:hover {
    background-color: #2d3088;
}


.btn-secondary {
    width: 100%;
    background-color: transparent;
    color: #666;
    border: none;
    padding: 10px;
    margin-top: 5px;
    cursor: pointer;
    font-size: 14px;
    text-decoration: underline;
}

/* Utilidades */
.hidden {
    display: none;
}

/* --- TEXTO HERO (DERECHA) --- */

/* --- Responsive (Móvil) --- */
@media (max-width: 900px) {
    .content-wrapper {
        flex-direction: column-reverse;
        padding: 20px;
    }

    .hero-image {
        height: 50vh;
        margin: 0 auto;
    }

    /* Make the card full-width-ish on mobile */
    .form-card {
        width: 100%;
        min-height: auto;
        box-shadow: 0 8px 20px rgba(0,0,0,0.06);
        border-radius: 14px;
    }

    .btn-primary {
        max-width: 260px;
        margin: 20px auto 0 auto;
        display: block;
    }


}



/* Ensure WhatsApp stays behind the mobile menu when opened (<=1199px) */
@media (max-width: 1199px) {
    .header__nav { z-index: 12000 !important; }
    .whatsapp-float { z-index: 1000 !important; }
}


/* Emergency final overrides: ensure close is visible and WhatsApp is behind everything on mobile */
@media (max-width: 1199px) {
    .hero-image-desktop {
        display: none;
    }

    .hero-image-mobile {
        display: block;
    }

    .mobile-close {
        display: flex !important;
        position: fixed !important;
        top: 18px !important;
        right: 18px !important;
        z-index: 2147483647 !important; /* highest possible */
        background: transparent !important;
    }
    

    .header__nav {
        z-index: 2147483646 !important;
    }

    /* Posicionar la lista del menú un poco más abajo en móviles para acercarla a "Síguenos" */
    @media (max-width: 1199px) {
        .header__nav-list {
            /* Empuja la lista hacia abajo sin alterar otros estilos */
            margin-top: 32vh !important;
            height: auto !important;
        }
    }
    .whatsapp-float {
        z-index: 1 !important;
    }
}

/* Fix: ensure close label inside the nav becomes visible when menu is opened */
@media (max-width: 1199px) {
    
        /* Centrar mobile-socials dentro del panel móvil y colocarlo hacia el pie como en la maqueta */
        .mobile-socials {
            display: block !important;
            text-align: center !important;
            margin-top: 28px;
            color: #fff;
            max-width: 100%;
        }
    
        /* Iconos centrados y con tamaño/espaciado uniforme */
        .mobile-social-icons {
            display: flex !important;
            justify-content: center !important;
            align-items: center !important;
            gap: 22px !important;
            margin-top: 12px !important;
            padding-bottom: 30px;
        }
    
        .mobile-social-icons a {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: 48px !important;
            height: 48px !important;
            border-radius: 50% !important;
            background: rgba(255,255,255,0.04) !important;
            text-decoration: none !important;
        }
    
        .mobile-social-icons svg {
            width: 34px !important;
            height: 34px !important;
            fill: #fff !important;
            opacity: 1 !important;
        }
    /* show the close label that lives inside .header__nav when checkbox is checked */
    .header__checkbox:checked ~ .header__nav .mobile-close,
    #open-menu:checked ~ .header__nav .mobile-close {
        display: flex !important;
        position: fixed !important;
        top: 18px !important;
        right: 18px !important;
        z-index: 2147483647 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* show the close icon SVG inside that label */
    .header__checkbox:checked ~ .header__nav .mobile-close .icon-close,
    #open-menu:checked ~ .header__nav .mobile-close .icon-close {
        display: block !important;
        stroke: #fff !important;
        fill: none !important;
        width: 36px !important;
        height: 36px !important;
    }

    /* hide the open icon (hamburger) when menu is open */
    .header__checkbox:checked ~ .header__open-nav-button .icon-open,
    #open-menu:checked ~ .header__open-nav-button .icon-open {
        display: none !important;
    }
}

/* Additional tweaks to ensure the close icon is visible and big enough */
@media (max-width: 1199px) {
    .mobile-close { color: #fff !important; }
    .mobile-close svg.icon-close { width: 36px !important; height: 36px !important; stroke: #fff !important; fill: none !important; }
    .mobile-close .icon-close path { stroke: #fff !important; }
    .mobile-close { opacity: 1 !important; visibility: visible !important; }
}

/* Final fixes: ensure close button is visible on mobile and icon toggles work */
@media (max-width: 1199px) {
    /* Make close button fixed so it's always visible in the top-right of the viewport */
    .mobile-close {
        display: flex !important;
        position: fixed !important;
        top: 18px !important;
        right: 18px !important;
        z-index: 13000 !important;
        background: transparent !important;
    }

    /* If either checkbox implementation is used, show the close icon when menu is open */
    .header__checkbox:checked ~ .header__open-nav-button .icon-close,
    #open-menu:checked ~ .header__open-nav-button .icon-close,
    .header__checkbox:checked ~ .mobile-close .icon-close,
    #open-menu:checked ~ .mobile-close .icon-close {
        display: block !important;
        stroke: #fff !important;
    }

    /* Hide the open icon when menu is open (both implementations) */
    .header__checkbox:checked ~ .header__open-nav-button .icon-open,
    #open-menu:checked ~ .header__open-nav-button .icon-open {
        display: none !important;
    }
}

html, body {
    overflow-x: hidden;
}

body{
    font-family: 'Montserrat';
    background-color: #eeeff6;
    color: black;
    padding-top: 0;
    margin-top: 0;
}

/* Ocultar elementos del menú móvil por defecto (desktop >=1200px) */
.mobile-socials,
.mobile-close,
.menu-overlay {
    display: none;
}
body, h1, h2, h3, h4, h5, h6, .header__nav-item a, .header__open-nav-button {
            font-family: 'Montserrat', 'Arial', sans-serif;
}footer h4{
    font-weight: 600;
}


body, ul, nav, header, footer, a, li, label {
    margin: 0;
    padding: 0;
}

.container {
    max-width: 1300px;
    width: 100%;
    display: flex;
    align-items: center;
    margin: 0 auto;
    justify-content: space-between;
    padding: 0px 20px 0px 0px;
}

.header {
    background-color: #2d3088;
    display: flex;
    justify-content: space-between;
    align-items: center;
    container-type: inline-size;
    container-name: header;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 80px;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}


.page-alborada #action a:hover{
    color: #1B4332 !important;
}
.page-alborada .header__nav {
    background-color: #1B4332;
}
.page-alborada {
    background-color: #FDF9F0;
}

.page-alborada .slider .dots li {
    background-color: #ffffff;
}
.page-alborada .header {
    background-color: #1B4332;
}

.page-alborada #action a {
    background-color: #1B4332;
}
.page-alborada .header__nav-submenu {
    background-color: #1B4332;
}

/* Estilos de color específicos para La Alborada */
.page-alborada .tag-btn {
    background-color: #B35C38 ;
    color: white;
}

.page-alborada .project-title {
    color: #065524 !important;
}

.page-alborada .form-card {
    background-color: #fdf6ec;
    border: 1px solid #f0e6d8;
    position: relative;
    z-index: 50; /* debe ser menor que el header fijo */
}

.page-alborada .form-card h3 {
    color: #065524 !important;
}

.page-alborada .whatsapp-float {
    z-index: 1400 !important;
}

.page-alborada .header__nav {
    z-index: 2147483647 !important;
}


.page-alborada .btn-map:hover {
    background: #f0f7f3;
    border-color: #1B4332;
}


.header__open-nav-button{
    color: aliceblue;
    font-size: 2rem;
    font-weight: 800;
    position: static;
    margin-right: 12px;
    margin-left: 0;
    order: 2; 
}

.header__logo-container {
    order: 0; 
}

.header__nav{
    
    display: flex;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 80vw;
    max-width: 260px;
    height: 100vh;
    transform: translateX(110%); 
    transition: transform 0.28s ease, visibility 0.28s;
    z-index: 9999;
    background-color: #2d3088;
    justify-content: flex-start;
    padding: 20px;
    visibility: hidden;
    pointer-events: none;
    user-select: none;
}

.header__checkbox {
    display: none;    
}


.header__open-nav-button {
    transition: transform 0.3s ease;
}


.header__open-nav-button svg {
    display: block;
}

.icon-close {
    display: none;
    padding: 8%;
    margin-top: 20%;
}

.header__open-nav-button .icon-close {
    display: none;
}


.menu-overlay {
    display: none;
}

.header__checkbox:checked ~ .header__nav {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
}

.header__nav-list {
    display: flex;
    flex-direction: column;
    height: 40vh;
    justify-content: space-evenly;
}

.header__logo {
    max-width: 100%;
    width: 200px;
    margin: 20px;
}

.header__nav-item{
    list-style: none;
}

.header__nav-item a{
    color: aliceblue;
    text-decoration: none;
    font-weight: 400;
    white-space: nowrap;
}


/*----Header queries------*/

@media (min-width: 1200px) {
    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .header .container {
        flex: 1;
    }

    .header__nav {
        display: flex;
        position: static;
        height: auto;
        width: auto;
        transform: translateX(0);
        visibility: visible;
        pointer-events: auto;
        background-color: transparent;
        padding: 0 40px;
        z-index: auto;
        flex: 1;
        justify-content: flex-end;
        align-items: center;
    }

    .header__nav-list{
        display: flex;
        flex-direction: row;
        height: auto;
        width: auto;
        gap: 30px;
        margin: 0;
        background-color: transparent;
        align-items: center;
    }

    .header__open-nav-button {
        display: none;
    }

    .header__nav-item a{
        color:aliceblue;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    /* Botón de Proyectos: aspecto igual que links del header */
    .projects-button{
        background: transparent;
        border: none;
        color: aliceblue;
        font-weight: 400;
        display: flex;
        align-items: center;
        gap: 6px;
        cursor: pointer;
        padding: 6px 8px;
    }
    .projects-button svg{ display: inline-block; vertical-align: middle; }
    .header__nav-item :hover {
        color:rgb(104, 194, 247);
        align-items: center;
        gap: 6px;
    }

    .header__nav-item a svg {
        width: 16px;
        height: 16px;
        vertical-align: middle;
        display: inline-block;
    }

    #action {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    #action li {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    #action a {
        background-color: #2d3088;
        color: aliceblue;
        padding: 10px 20px;
        border-radius: 15px;
        border: 2px solid #fff;
        font-weight: 800;
        transition: background-color 0.3s;
        box-shadow: 0 0px 10px rgba(0, 0, 0, 0.349);
        white-space: nowrap;
        display: inline-block;
    }

    #action a:hover {
        color:  #2d3189;
        background-color: #fffef9;
    }

    /* Estilos para el dropdown (details/summary) en NOSOTROS */
    details {
        position: relative;
        z-index: 1000;
    }

    .header__nav-item details {
        align-self: center;
    }

    summary {
        list-style: none;
        cursor: pointer;
        color: aliceblue;
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 0;
        margin: 0;
        background: transparent;
        border: none;
        font: inherit;
    }

    /* Mantener el submenu encima de overlays/ventanas (sin JS) */
    .header__nav-submenu {
        z-index: 11000;
    }

    /* Asegurar que cuando el <details> esté abierto el submenu se muestre por encima */
    details[open] > summary ~ .header__nav-submenu {
        display: block;
        z-index: 11000;
    }

    summary::-webkit-details-marker {
        display: none;
    }

    summary svg,
    summary img {
        width: 16px;
        height: 16px;
        transition: transform 0.3s ease;
    }

    details[open] > summary svg,
    details[open] > summary img {
        transform: rotate(180deg);
    }

    .header__nav-submenu {
        position: absolute;
        top: 100%;
        left: 0;
        background-color: #2d3088;
        border-radius: 0 0 8px 8px;
        list-style: none;
        margin: 0;
        padding: 8px 0;
        min-width: 200px;
        z-index: 1001;
        white-space: nowrap;
    }

    /* Estilos cuando el submenu se posiciona como fijo sobre overlays */
    .header__nav-submenu.fixed-submenu {
        border-radius: 8px;
        box-shadow: 0 12px 30px rgba(0,0,0,0.25);
        padding: 10px 0;
        background-color: #2d3088;
        white-space: normal;
        max-width: 420px;
    }

    .header__nav-submenu li {
        margin: 0;
        padding: 0;
    }

    .header__nav-submenu li a {
        display: block;
        padding: 12px 20px;
        color: aliceblue;
        text-decoration: none;
        transition: background-color 0.2s ease;
    }

    .header__nav-submenu li a:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }

    /* Mega menú: overlay y panel para Proyectos en escritorio >=1200px */
    .projects-overlay {
        position: fixed;
        top: 80px;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.45);
        z-index: 10000;
        display: none;
    }

    .project-card a {
        text-decoration: none !important;
    }

    .projects-grid-mobile {
        /* Oculta completamente el elemento y no ocupa espacio */
        display: none !important; 
    }
    .projects-overlay.show {
        display: block;
    }

    .projects-panel {
        position: fixed;
        top: 80px;
        left: 0;
        right: 0;
        height: calc(100vh - 80px);
        background: #ffffff;
        z-index: 10002;
        transform: translateY(-8px);
        opacity: 0;
        visibility: hidden;
        transition: transform 0.28s ease, opacity 0.28s ease, visibility 0.28s;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0px 20px;
    }

    .projects-panel.open {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    .projects-panel__inner {
        max-width: 1300px;
        margin: 0 auto;
        padding-left: 3%;
        padding-right: 3%;
        position: relative;
    }

    .projects-panel__close {
        position: absolute;
        top: 20px;
        right: 20px;
        background: transparent;
        border: none;
        font-size: 26px;
        color: #2d3088;
        cursor: pointer;
        z-index: 10003;
    }
    
    /* Mostrar el SVG de cierre en desktop */
    .projects-panel__close .icon-close {
        display: inline-block;
        width: 30px;
        height: 30px;
        vertical-align: middle;
    }
    
    .projects-panel__content h2 {
        color: #2d3088;
        margin: 28px 0 6px 0;
        font-size: 28px;
        margin-bottom: 5px;
    }

    .projects-grid {
        display: grid;
        max-width: 270px;
        gap: 18px;
        align-items: start;
    }

    /* Slider horizontal para proyectos entregados (solo en desktop >=1200px) */
    .delivered-projects-slider {
        position: relative;
        width: 100%;
        overflow: hidden;
        margin-bottom: 20px;
    }

    .slider-list {
        display: flex;
        gap: 18px;
        width: max-content;
        transition: transform 0.4s ease;
        touch-action: pan-y;
    }

    .project-card-delivered {
        flex: 0 0 280px;
        max-width: 270px;
        border: 1px solid rgba(45,48,136,0.08);
        border-radius: 10px;
        padding: 12px;
        background: #fff;
    }

    .project-card-delivered img {
        width: 100%;
        height: 160px;
        object-fit: cover;
        border-radius: 6px;
        display: block;
        margin-bottom: 8px;
    }

    .project-card-delivered h3 { color: #2d3088; margin: 6px 0; }
    .project-card-delivered .project-meta { color: #6b6b6b; font-size: 0.85rem; margin: 0; }

    .slider-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(45,48,136,0.85);
        color: white;
        border: none;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        font-size: 20px;
        font-weight: bold;
        cursor: pointer;
        z-index: 100;
        transition: background 0.2s, transform 0.2s;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .slider-btn:hover {
        background: #2d3088;
        transform: translateY(-50%) scale(1.1);
    }

    .slider-btn--prev { left: 8px; }
    .slider-btn--next { right: 8px; }

    /* Grid para móvil (<=1199px) - Ocultar segunda fila */
    .projects-grid-mobile {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 18px;
        align-items: start;
        max-height: 290px;
        overflow: hidden;
    }

    .project-card {
        border: 1px solid rgba(45,48,136,0.08);
        border-radius: 10px;
        padding: 12px;
        background: #fff;
        text-align: left;
    }

    .project-card img {
        width: 100%;
        height: 140px;
        object-fit: cover;
        border-radius: 6px;
        display: block;
        margin-bottom: 8px;
    }

    .project-card h3 { color: #2d3088; margin: 6px 0; }

    .project-meta { color: #6b6b6b; font-size: 0.95rem; margin: 0; }
}

/*-----Footer------*/
footer {
            background-color: #2d3088;
            color: aliceblue;
            padding: 40px 0 20px;
            margin-top: auto;
        }

.page-alborada footer {
    background-color: #1B4332;
}

        .footer-container {
            max-width: 1300px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 30px;
            padding: 0 20px;
        }

        .footer-container h4 {
            font-size: 1.1rem;
            color: aliceblue;
        }

        .footer-follow {
            grid-column: span 2;
        }

        .footer-section h3 {
            color: aliceblue;
            margin-bottom: 15px;
            font-size: 1.2em;
            position: relative;
            padding-bottom: 10px;
        }

        .footer-section h3::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 50px;
            height: 2px;
        }

        .footer-section ul {
            list-style: none;
        }

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

        .footer-section a {
            color: aliceblue;
            text-decoration: none;
            transition: color 0.3s;
        }

        .footer-section a:hover {
            color: #65afe0;
        }

        .footer-section p {
            color: #ffffff;
            margin-bottom: 10px;
        }

        .footer-bottom {
            text-align: center;
            padding-top: 20px;
            margin-top: 10px;
            border-top: 1px solid #d1d1d1;
            color: #bdc3c7;
            font-size: 0.9rem;
        }

        .footer__logo {
            max-width: 150px;
            margin-bottom: 10px;
            
        }

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

        .footer__red {
            display: flex;
            justify-content: center;
            list-style: none;
            gap: 20px;
        }

        .footer__red li {
            display: inline-block;
            margin-right: 0;
            padding: 0;
            align-items: center;
        }

        .footer__red li a {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 8px 12px;
        }



        /* Estilos responsivos */
@media (max-width: 1199px) {
    .footer-container {
        grid-template-columns: repeat(2, 1fr);
    }
    /* Alternar iconos (hamburguesa / close) en móviles y tablets hasta 1199px */
    .header__checkbox:checked + .header__open-nav-button .icon-open {
        display: none;
    }
    .page-alborada #open-projects-panel {
        color: #1B4332 !important;
    }
    .page-alborada #action a {
        color: #FFFFFF !important;
    }
    .header__checkbox:checked + .header__open-nav-button .icon-close {
        display: block;
    }

    /* Posicionar el botón open-nav-button (que contiene los iconos) en la esquina */
    .header__checkbox:checked + .header__open-nav-button {
        position: fixed;
        top: 18px;
        right: 18px;
        z-index: 10002;
    }

    .header__open-nav-button {
        display: flex;
    }

    .header__nav {
        padding: 1%;
        display: flex;
        position: fixed;
        flex-direction: column;
        
           }       /* Ocultar grid móvil en desktop */
    .projects-grid-mobile {
        display: none;
        right: 0;
        align-items: center;
        justify-content: center;
        height: 100%;
        gap: 36px;
        width: 100%;
        padding: 0 20px;
    }

    .header__nav-item a {
        color: aliceblue;
        font-weight: 600;
        font-size: 1rem;
        letter-spacing: 1px;
        text-decoration: none;
        padding: 16px 10px 22px 10px;
        display: flex;
        gap: 8px;
        width: 100%;
        position: relative;
        
    }

  
    .header__nav-item a svg {
        width: 16px;
        height: 16px;
        vertical-align: middle;
        display: inline-block;
    }

    /* Ajustes específicos para que el menú móvil coincida con la maqueta */
    .header__nav-list {
        justify-content: flex-start;
    }



    /* Hacer que las entradas del menú queden alineadas como en la maqueta */
    .header__nav-item a,
    .header__nav-item button,
    summary {
        width: 100%;
        text-align: left;
        padding-left: 28px;
        box-sizing: border-box;
        color: #fff;
        font-weight: 600;
        font-size: 1rem;
    }

    /* Ajustar el summary (Nosotros) para mantener el caret y tamaño correcto */
    details > summary {
        list-style: none;
        cursor: pointer;
        display: block;
        padding: 12px 0;
        color: #ffffff;
        font-weight: 500;
    }

    /* Líneas divisorias más discretas y con margen lateral igual al texto */
    .header__nav-item a::after {
        left: 28px;
        right: 28px;
    }

    /* Forzar visibilidad de las redes dentro del menú móvil y tamaño de iconos */
    .mobile-socials {
        display: block;
        text-align: center;
        margin-top: 28px;
        color: #fff;
        max-width: 100%;
        
    }

    .mobile-social-icons {
        justify-content: center;
        gap: 18px;
        margin-top: 12px;

    }

    .mobile-social-icons svg {
        width: 34px;
        height: 34px;
        fill: #fff;
        stroke: none;
        opacity: 1;
    }

    /* Asegurar que el botón X está por encima y visible */
    .mobile-close { z-index: 11150; }

    /* Línea verde que se extiende casi de extremo a extremo dejando un pequeño espacio lateral */
    .header__nav-item a::after {
        content: '';
        position: absolute;
        left: 12px;
        right: 12px;
        height: 2px;
        background: rgba(213, 224, 255, 0.658);
        bottom: 8px;
        transition: background-color 0.18s ease;
    }

    /* Agregar efecto hover más visible */
    .header__nav-item a:hover::after {
        background: rgba(255, 255, 255, 0.95);
    }

    .header__checkbox:checked ~ .header__nav {
        transform: translateX(0);
        visibility: visible;
        pointer-events: auto;
    }

    /* Overlay que difumina el contenido cuando el menú está abierto */
    .menu-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.28);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.28s ease, visibility 0.28s;
        z-index: 9998;
        pointer-events: none;
    }

    /* Cuando el checkbox esté marcado, mostrar overlay */
    .header__checkbox:checked ~ .menu-overlay {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* Overlay y panel para Proyectos (fijo, full-width debajo del header) */
    .projects-overlay {
        position: fixed;
        top: 80px;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.45);
        z-index: 10000;
        display: none;
    }

    .projects-overlay.show {
        display: block;
    }

    .projects-panel {
        position: fixed;
        top: 80px;
        left: 0;
        right: 0;
        height: calc(100vh - 80px);
        background: #ffffff;
        z-index: 10002;
        transform: translateY(-8px);
        opacity: 0;
        visibility: hidden;
        transition: transform 0.28s ease, opacity 0.28s ease, visibility 0.28s;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0px 20px;
    }

    .projects-panel.open {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    .projects-panel__inner {
        max-width: 1300px;
        margin: 0 auto;
        position: relative;
    }

    .projects-panel__close {
        position: absolute;
        top: 20px;
        right: 20px;
        background: transparent;
        border: none;
        font-size: 26px;
        color: #2d3088;
        cursor: pointer;
        z-index: 10003;
    }

    /* Mostrar el SVG de cierre dentro del panel (anula .icon-close global) */
    .projects-panel__close .icon-close {
        display: inline-block;
        width: 30px;
        height: 30px;
        vertical-align: middle;
    }

    .projects-panel__content h2 {
        color: #2d3088;
        margin: 28px 0 6px 0;
        font-size: 28px;
    }

    .projects-intro {
        margin-bottom: 10px;
    }

    .projects-grid {
        display: grid;
        max-width: 270px;
        gap: 18px;
        align-items: start;
    }

    /* Ocultar slider en móvil (<=1199px) */
    .delivered-projects-slider {
        display: none;
    }

    .project-card {
        border: 1px solid rgba(45,48,136,0.08);
        border-radius: 10px;
        padding: 12px;
        background: #fff;
        text-align: left;
    }

    .project-card img {
        width: 100%;
        height: 140px;
        object-fit: cover;
        border-radius: 6px;
        display: block;
        margin-bottom: 8px;
    }

    .project-card h3 { color: #2d3088; margin: 6px 0; }

    .project-meta { color: #6b6b6b; font-size: 0.95rem; margin: 0; }

    /* Grid visible en móvil para proyectos entregados - Ocultar segunda fila */
    .projects-grid-mobile {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 18px;
        align-items: start;
    }

    /* Estilos para el dropdown (details/summary) en móvil */
    details {
        position: relative;
        width: 100%;
    }

    summary {
        list-style: none;
        cursor: pointer;
        color: aliceblue;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-weight: 600;
        font-size: 1rem;
        letter-spacing: 1px;
        padding: 16px 10px 22px 10px;
        width: 100%;
        position: relative;
        box-sizing: border-box;
        margin: 0;
        background: transparent;
        border: none;
        font: inherit;
    }

    summary::-webkit-details-marker {
        display: none;
    }

    summary img {
        width: 16px;
        height: 16px;
        transition: transform 0.3s ease;
        vertical-align: middle;
        display: inline-block;
    }

    details[open] > summary img {
        transform: rotate(180deg);
    }

    summary::after {
        content: '';
        position: absolute;
        left: 12px;
        right: 12px;
        height: 2px;
        background: rgba(37,211,102,0.18);
        bottom: 8px;
    }

    summary:hover::after {
        background: rgba(255, 255, 255, 0.95);
    }

    .header__nav-submenu {
        list-style: none;
        margin: 0;
        padding: 15px 10px;
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: #2d3088;

        z-index: 1001;
    }

    details[open] > summary ~ .header__nav-submenu {
        display: block;
    }

    .header__nav-submenu li {
        margin: 0;
        padding: 0;
    }

    .header__nav-submenu li a {
        display: block;
        padding: 12px 20px;
        color: aliceblue;
        text-decoration: none;
        transition: background-color 0.2s ease;
        font-size: 0.9rem;
        font-weight: 500;
    }

    .header__nav-submenu li a:hover {
        background-color: rgba(248, 248, 248, 0.874);
    }

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

    #action {
        list-style: none;
        text-align: center;
        border-bottom: none;
        margin-bottom: 0px;
        margin: 20px;
        font-weight: 800 !important;

    }

    #action a {
        list-style: none;
        background-color: #ffffff;
        color: #2d3088 !important;
        border-radius: 15px;
        font-weight: 800 !important;
        text-align: center;
    }

}


.header__close-button {
    display: none; 
}

@media (max-width: 446px) {
    .footer-container {
        grid-template-columns: 1fr;
    }

    .footer-follow {
        grid-column: span 1;
    }
}

/*USP*/
.valor-usp {
    background-color: #EFF1F6;
    padding: 60px 20px;
}

.valor-usp__content {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    gap: 40px;
    justify-content: space-between;
}

.valor-usp__intro {
    flex: 1;
    min-width: 0;
}

.valor-usp__intro h1 {
    color:  #2d3088;
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 15px;
    line-height: 1.2;
}

.valor-usp__intro p {
    color: #666;
    font-size: 1.5rem;
    margin-bottom: 25px;
    font-weight: 400 !important;
}

.valor-usp__intro strong br{
    color: #666 !important;
    font-weight: 400;
}

.valor-usp__intro p b {
    color: #333;
    font-weight: 700;
}

.valor-usp__intro .btn-primary {
    display: inline-block;
    background-color: var(--primary-blue);
    color: var(--white);
    border-radius: 15px;
    cursor: pointer;
    transition: background 0.3s;
    margin: 0px auto 14px auto;
    max-width: 260px;
    text-decoration: none;
    font-size: 1rem;
}

.valor-usp__stats {
    gap: 20px;
    margin-top: 20px;
}

.valor-usp__stats p {
    color: white;
    font-size: 2.5rem;
    font-weight: 800 !important;
}

.card {
    padding: 25px 30px;
    border-radius: 30px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    text-align: left;
}

.card--solid {
    background-color:  #2d3088;
    color: white;
    flex: 0 0 auto;
    min-width: auto;
}

.card--outline {
    border: 3px solid  #2d3088;
    color:  #2d3088;
    background-color: white;
    flex: 1;
    min-width: auto;
}

.stat-number {
    font-size: 8rem;
    font-weight: 900;
    line-height: 1;
    margin: 0;
    flex-shrink: 0;
}

.stat-text {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.3;
    margin: 0;
}

.valor-usp__image {
    flex: 1;
    min-width: 0;
    padding: 0 0 23px 0;
}

.valor-usp__image img {
    width: 100%;
    height: 370px;
    border-radius: 35px;
    object-fit: cover;
    max-width: 850px;
}

/* Responsive USP */
@media (max-width: 1024px) {
    .valor-usp__content {
        flex-direction: column;
        gap: 30px;
    }

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

    .valor-usp__intro h2 {
        font-size: 2rem;
    }

    .valor-usp__image img {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .valor-usp {
        padding: 40px 20px;
    }

    .valor-usp__intro h2 {
        font-size: 1.6rem;
    }

    .valor-usp__stats {
        flex-wrap: wrap;
    }

    .card {
        flex: 1;
        min-width: 150px;
        padding: 20px;
    }

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

    .stat-text {
        font-size: 0.9rem;
    }
}

/*Testimonios*/





/* WhatsApp */
.whatsapp-float {
    position: fixed;
    right: 30px;
    bottom: 30px;
    z-index: 1000;
    width: 70px;
    height: 70px;
    background-color: #25D366;
    color: #8f8f8f;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0px 20px rgba(160, 160, 160, 0.637);
    transition: transform .15s ease, box-shadow .15s ease;
    padding: 8px;
}

.whatsapp-float:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 22px rgba(28, 255, 66, 0.87);
}

.whatsapp-float a {
    color: inherit;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.whatsapp-float img {
    width: 24px;
    height: 24px;
    display: block;
}

.whatsapp-float svg {
    width: 36px;
    height: 36px;
    display: block;
}

@media (max-width: 480px) {
    .whatsapp-float {
        right: 20px;
        bottom: 20px;
        width: 60px;
        height: 60px;
    }

    .whatsapp-float svg {
        width: 30px;
        height: 30px;
    }

}

/* Hero section responsiva */
.hero {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: block;
}

.hero__image {
    display: block;
    width: 100%;
    height: auto; 
    max-width: 100%;
    object-fit: cover;
}

/* ===== SLIDER HORIZONTAL ===== */

.slider {
    /* Overlay used with the checkbox label */
    .menu-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.45);
        display: none;
        opacity: 0;
        transition: opacity .22s ease;
        z-index: 10900;
    }

    /* Off-canvas nav (right side) */
    .header__nav {
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        width: 260px;
        max-width: 86vw;
        background: #2d3088;
        color: #fff;
        /* hidden to the right by default */
        transform: translateX(110%);
        transition: transform .28s ease;
        padding: 36px 18px 24px 18px;
        /* shadow to the left when visible */
        box-shadow: -8px 0 30px rgba(0,0,0,0.4);
        overflow-y: auto;
        z-index: 12000;
    }

    /* Show nav when checkbox checked */
    #open-menu:checked ~ .header__nav {
        transform: translateX(0);
        visibility: visible;
        pointer-events: auto;
    }

    /* Show overlay when checked */
    #open-menu:checked ~ .menu-overlay {
        display: block;
        opacity: 1;
        pointer-events: auto;
    }

    /* Close button inside the panel */
    .mobile-close {
        position: absolute;
        top: 14px;
        right: 14px;
        background: transparent;
        border: none;
        cursor: pointer;
        color: #fff;
        z-index: 12100; /* higher than panel so it's always visible */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-close .icon-close { stroke: #fff; }

    .header__nav-list {
        display: flex;
        flex-direction: column;
        gap: 18px;
        padding: 24px 6px 10px 6px;
    }

    .header__nav-item a,
    .header__nav-item button,
    summary {
        color: #fff;
        text-decoration: none;
        font-weight: 600;
        padding: 8px 6px;
    }


    /* Divider lines like in the mock */
    .header__nav-item:not(.header__nav-item:last-child) {
        border-bottom: 1px solid rgba(255,255,255,0.12);
        padding-bottom: 10px;
    }

    /* Submenu styling inside mobile panel */
    .header__nav-submenu {
        background: transparent;
        padding-left: 6px;
        margin-top: 8px;
        display: none;
        list-style: none;
    }

    details[open] > summary ~ .header__nav-submenu {
        display: block;
    }

    .header__nav-submenu li a {
        color: #fff;
        display: block;
        padding: 8px 4px;
        font-weight: 500;
    }

    /* Social icons block at the bottom */
    .mobile-socials {
        margin-top: 26px;
        color: #fff;
        text-align: center;
    }

    .mobile-social-icons {
        display: flex;
        gap: 14px;
        justify-content: center;
        margin-top: 10px;
    }

    .mobile-social-icons a { color: #fff; }
    .mobile-social-icons svg { opacity: 0.95; }
    width: 100vw; /* full viewport */
    margin-left: calc(50% - 50vw);
    height: 750px;
    margin-top: 80px;
    position: relative;
    overflow: hidden;
}

.slider .list {
    position: absolute;
    /* Use full width so percentage-based slide widths are computed correctly */
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    display: flex;
    transition: transform 0.6s ease;
    will-change: transform;
    touch-action: pan-y;
}

/* Make each slide occupy exactly the slider viewport width so offsets are multiples
of the slider width and the JS offsetLeft calculations work reliably */
.slider .list .item {
    flex: 0 0 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.slider .list img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.slider .buttons {
    position: absolute;
    top: 45%;
    left: 5%;
    width: 90%;
    display: flex;
    justify-content: space-between;
    z-index: 10;
}

.slider .buttons button { 
    background-color:rgba(14, 16, 85, 0.288);/* mantiene fondo transparente */ 
    color: #ffffff; /* azul oscuro */ 
    border: none; 
    font-family: monospace; 
    font-weight: bold; 
    cursor: pointer; 
    font-size: 50px; /* más grande */ 
    border-radius: 35px;
    padding: 20px 20px; /* espacio interno */ 
    transition: background-color 0.3s, 
    transform 0.2s; 
}


.slider .buttons button:hover { 
    background-color: rgba(45, 48, 136, 0.1); /* efecto hover */ transform: scale(1.2); /* se agranda al pasar */ 
}

.slider .dots {
    position: absolute;
    bottom: 10px;
    left: 0;
    color: #fff;
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    z-index: 10;
}

.slider .dots li {
    list-style: none;
    width: 10px;
    height: 10px;
    background-color: #ffffff;
    margin: 10px;
    border-radius: 20px;
    transition: 0.5s;
    cursor: pointer;
}

.slider .dots li.active {
    width: 30px;
}

@media (min-width: 1440px) {
    .slider .list .item {
    flex: 0 0 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    overflow: hidden;
}
}

@media (max-width: 768px) {
    .slider {
        height: 400px;
    }

    .slider .list img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .slider .buttons button {
        width: 40px;
        height: 40px;
    }
}

@media (min-width: 1450px) {
    .slider {
        align-items: center !important;
    }
}
/* Override específico: eliminar borde/contorno/sombra del pill PROYECTOS en móvil */
@media (max-width: 1199px) {


    .projects-button:focus,
    .projects-button:active {
        outline: none !important;
        box-shadow: none !important;
        -webkit-box-shadow: none !important;
    }

    /* Asegurar que cualquier icono dentro del pill no genere contornos o filtros no deseados */
    .projects-button svg,
    .projects-button img {
        filter: none !important;
        box-shadow: none !important;
    }

    /* Si existiera un borde por pseudo-elementos, ocultarlo */
    .projects-button::before,
    .projects-button::after {
        content: none !important;
        display: none !important;
    }
}

/* Ajustes visuales para que el menú móvil se parezca más a la maqueta */
@media (max-width: 1199px) {
    /* Dar un poco más de espacio superior para separar logo/close del contenido */
    .header__nav {
        box-shadow: -8px 0 30px rgba(0,0,0,0.36) !important;
    }

    /* Entradas del menú: aumentar tamaño y espaciado para legibilidad */

    .header__nav-item a,
    .header__nav-item button,summary {
        font-size: 1.12rem !important;
        padding-top: 18px !important;
        padding-bottom: 18px !important;
        padding-left: 28px !important;
    }


    /* Scrollbar ligero dentro del panel (solo webkit) para que coincida con la captura */
    .header__nav::-webkit-scrollbar {
        width: 10px;
    }

    .header__nav::-webkit-scrollbar-track {
        background: transparent;
    }

    .header__nav::-webkit-scrollbar-thumb {
        background: rgb(255, 255, 255);
        border-radius: 10px;
    }
}

/* -------------------------------------------------------- */
/* Mobile visual overrides to match recurso1.png (<=1199px) */
/* Keep the existing close (X) behavior — only visual tweaks */
@media (max-width: 1199px) {
    /* Panel sizing & spacing */
    .header__nav {

        width: 70vw !important;
        box-shadow: -10px 0 36px rgba(0,0,0,0.45) !important;
    }

    /* Menu list spacing */
    .header__nav-list {
        gap: 20px !important;
        padding-bottom: 80px !important; /* leave room for socials */
    }

    /* Menu items — left aligned, larger touch targets */
    .header__nav-item a,
    .header__nav-item button,
    summary {
        font-size: 1.08rem !important;
        font-weight: 600 !important;
        padding-top: 16px !important;
        padding-bottom: 16px !important;
        padding-left: 22px !important;
        color: #fff !important;
    }


    /* Social icons centered at bottom of panel like maqueta */
    .mobile-socials {
        display: block !important;
        position: absolute !important;
        bottom: 22px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        text-align: center !important;
        width: auto !important;
        padding: 0 !important;
    }

    .mobile-social-icons {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 18px !important;
        margin-top: 8px !important;
    }

    .mobile-social-icons a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 48px !important;
        height: 48px !important;
        border-radius: 50% !important;
        background: rgba(255,255,255,0.04) !important;
        text-decoration: none !important;
    }

    .mobile-social-icons svg {
        width: 34px !important;
        height: 34px !important;
        fill: #fff !important;
        opacity: 1 !important;
    }

    /* Push WhatsApp behind the panel so it doesn't overlap */
    .whatsapp-float { z-index: 1 !important; }

    /* Ensure panel stays above whatsapp */
    .header__nav { z-index: 2147483646 !important; }

    /* Keep close button as in current model (no overrides here) */
}


/* Micro-ajustes adicionales para que coincida con recurso1.png */
@media (max-width: 1199px) {
    /* Thin colored underline under each menu link (left-aligned) */
    .header__nav-item > a {
        position: relative !important;
    }

    /* Full-width thin underline under each menu item (like maqueta) */
    .header__nav-item > a,
    .header__nav-item > button,
    .header__nav-item summary {
        display: block !important;
        position: relative !important;
        padding-left: 22px !important;
        padding-right: 22px !important;
    }

    .header__nav-item > a::after,
    .header__nav-item > button::after,
    .header__nav-item summary::after {
        content: '' !important;
        position: absolute !important;
        left: 22px !important;
        right: 22px !important;
        bottom: 8px !important;
        height: 2px !important;
        width: auto !important;
        background: rgba(255,255,255,0.18) !important;
        border-radius: 2px !important;
        opacity: 1 !important;
    }

    /* Estilo del botón COTIZA AQUÍ para que sea un pill oscuro con sombra ligera */
    /* Make COTIZA a white pill with dark text (matches maqueta) */
    .header__nav .button,
    .cotiza-button,
    .header__cta a,
    .header__nav .header__cta .button {
        display: block !important;
        width: calc(100% - 44px) !important;
        max-width: 480px !important;
        margin: 18px auto !important;
        padding: 14px 20px !important;
        text-align: center !important;
        background: #ffffff !important;
        color: #2d318c !important;
        border-radius: 14px !important;
        text-transform: uppercase !important;
        letter-spacing: 1.6px !important;
        box-shadow: none !important;
        border: none !important;
    }

    /* Remove underline for the COTIZA pill so the thin line doesn't appear inside it */
    .cotiza-button::after,
    .header__cta a::after,
    .header__nav .button::after {
        display: none !important;
        content: none !important;
    }
    #open-projects-panel {
        color: #2d318c !important; 
        font-weight: 800 !important;
    }
    #open-projects-panel svg{
        display: none !important;
    }

    .projects-button {
        font-weight: 800;
        display: block !important;
        border: none;
        width: calc(100% - 44px) !important;
        max-width: 560px !important;
        margin: 5px auto !important;
        background-color: #ffffff;
        border-radius: 15px !important;
        font-size: 1.5rem !important;
        text-align: center !important;

    }

    /* Asegurar que el botón de cerrar (X) quede siempre visible encima del panel */
    .mobile-close {
        z-index: 2147483647 !important;
        right: 18px !important;
        top: 18px !important;
    }
}

/* Override: en pantallas <=900px usar person.png (desktop) */
@media (max-width: 900px) {
    .hero-image-desktop { display: block !important; }
    .hero-image-mobile { display: none !important; }
}

/* Forzar que el botón/ícono de WhatsApp quede visible sobre el contenido pero debajo del header */
.whatsapp-float {
    position: fixed !important;
    right: 30px !important;
    bottom: 30px !important;
    z-index: 900 !important;
    pointer-events: auto !important;
}

/* Asegurar también para cualquier selector que intente subir el z-index en media queries */
@media (max-width: 1199px) {
    .whatsapp-float { z-index: 900 !important; }
}

/* A partir de 1200px hacia abajo, para La Alborada, WhatsApp debe quedar detrás del menú móvil */
@media (max-width: 1200px) {
    .page-alborada .whatsapp-float { z-index: 1 !important; }
    .page-alborada .header__nav { z-index: 2147483646 !important; }
}

/* En pantallas <=570px mostrar person_2.png */
@media (max-width: 570px) {
    .hero-image-desktop { display: none !important; }
    .hero-image-mobile { display: block !important; }
}

/* ===== TESTIMONIOS SLIDER ===== */
.testimnios {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: 'Montserrat', sans-serif;
    background-color: #EFF1F6;
    padding: 20px 20px;
}

.testimnios h2 {
    color: #2d3088;
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 40px;
    text-align: center;
}


.testimnios .slider {
    position: relative;
    width: 100%;
    max-width: 1300px;
    height: 600px;
    overflow: visible;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.testimnios .slider::before {
    content: '';
    position: absolute;
    width: 450px;
    height: 610px;
    border: 4px solid #2d3088;
    border-radius: 30px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    pointer-events: none;
}

.testimnios .item {
    position: absolute;
    width: 420px;
    height: 580px;
    background-color: transparent;
    border-radius: 20px;
    overflow: visible;
    transition: transform 0.5s ease, filter 0.5s ease, opacity 0.5s ease;
    left: 50%;
    top: 50%;
    /* centrar usando márgenes para liberar la propiedad transform al JS */
    margin-left: -210px;
    margin-top: -290px;
    transform: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.testimnios .item.active {
    transition: transform 0.5s ease, opacity 0.5s ease;
}

.testimnios .item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}

.testimnios .item h1 {
    display: none;
}

.testimnios .item p {
    display: none;
}

.testimnios #next {
    display: none;
}

.testimnios #prev {
    display: none;
}

.testimnios #prev,
.testimnios #next {
    color: #2A2D7C;
    background: none;
    border: none;
    font-size: 3rem;
    font-family: monospace;
    font-weight: bold;
    opacity: 0.5;
    transition: opacity 0.5s;
    cursor: pointer;
}

.testimnios #prev:hover,
.testimnios #next:hover {
    opacity: 1;
}

.testimnios-text {
    background-color: white;
    padding: 2%;
    margin: 0 20%;
    max-width: 1300px;
    border-radius: 40px;
}
.testimnios-title-with-deco {
    position: relative; /* contenedor para permitir desplazar el h3 */
    display: inline-block;
}
.testimnios-title-with-deco h3{
    position: relative; /* necesario para que `left` funcione */
    left: 110px;
    margin: 0;
    display: inline-block;
}

.testimnios-title-with-deco p {
    font-size: 1.1rem;
    margin: 15px 0;
}

@media (max-width: 900px) {
        .testimnios-title-with-deco p {
        font-size: 1.1rem;
    }
}

/* Decoración (comillas) para testimonio: posicionada a la izquierda del block */
.testimnios {
    position: relative; /* contenedor para la imagen absoluta */
}
.testimnios-text {
    position: relative;
    z-index: 10; /* contenedor para la decoración */
}

/* Decoración (comillas) para testimonio: ahora anexada a .testimnios-text y colocada encima del cuadro */
.decoracion {
    position: absolute;
    left: -30px; 
    top: -50px;  
    width: 150px;
    height: auto;
    z-index: 20; 
    pointer-events: none;
}

@media (max-width: 900px) {
    .decoracion {
        width: 90px;
        top: -18px;
        left: 17px;
    }
    .testimnios-text {
        margin: 0 6%;
        padding: 4%;
    }
}

/* ===== PROYECTOS DESTACADOS ===== */
.completed-projects {
    background-color: #EFF1F6;
    padding: 30px 20px; /* reducido */
    min-height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.completed-projects h2 {
    color: #2d3088;
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 30px; /* reducido */
    text-align: center;
}

.completed-projects__container {
    max-width: 1300px;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(280px,420px) 1fr;
    align-items: center;
    column-gap: 28px; /* reducido: acerca la columna izquierda de la imagen derecha */
    padding: 0 20px;
}

.completed-projects__left {
    display: flex;
    flex-direction: column;
    gap: 16px; /* reducido */
}

.completed-projects__image-wrapper {
    position: relative;
    width: 100%;
    max-width: 400px; /* más compacto */
}

.completed-projects__deco {
    position: absolute;
    left: -30px;
    top: -30px;
    width: 120px;
    height: auto;
    z-index: 15;
    pointer-events: none;
}

.completed-projects__image {
    width: 100%;
    height: auto;
    border-radius: 20px;
    object-fit: cover;
    display: block;
    position: relative;
    z-index: 10;
    border: 3px solid #2d3088;
}

.completed-projects__title {
    color: #2d3088;
    font-size: 1.6rem; /* reducido */
    font-weight: 800;
    margin: 0;
}

.completed-projects__description {
    color: #666;
    font-size: 1rem; /* ligero ajuste */
    line-height: 1.5;
    margin: 0;
    font-weight: 400;
}

.completed-projects__btn {
    align-self: flex-start;
    background-color: #2d3088;
    color: white;
    border: none;
    padding: 12px 44px; /* más compacto */
    border-radius: 35px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 6px; /* separar ligeramente del texto */
}

.completed-projects__btn:hover {
    background-color: #2d3088;
}


.completed-projects__image-right {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 35px;
}

/* Responsive */
@media (max-width: 1024px) {
    .completed-projects {
        padding: 60px 20px;
    }
    
    .completed-projects h2 {
        font-size: 2rem;
    }
    
    .completed-projects__container {
        gap: 28px;
    }
    
    .completed-projects__title {
        font-size: 1.5rem;
    }
    
}

@media (max-width: 768px) {
    .completed-projects {
        padding: 40px 15px;
    }
    
    .completed-projects h2 {
        font-size: 1.8rem;
        margin-bottom: 40px;
    }
    
    .completed-projects__container {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .completed-projects__image-wrapper {
        max-width: 100%;
    }
    
    .completed-projects__deco {
        left: -25px;
        top: -25px;
        width: 90px;
    }
    
    .completed-projects__title {
        font-size: 1.3rem;
    }
    
    .completed-projects__description {
        font-size: 1rem;
    }
}

.refiere-gana {
    position: relative;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    height: 500px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.refiere-gana__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.refiere-gana__card {
    max-width: 300px;
    z-index: 20;
    margin-left: 16%;
    border-radius: 20px;
    background-color: white;
    text-align:left;
    padding: 20px;
    position: relative;
}
.refiere-gana__card h2 {
    color: #2d3088;
    line-height: 1.5;
    margin: 0;
    font-weight: 800;
    padding-bottom: 10px;
}
.refiere-gana__card p {
    color: #000000;
    font-size: 1rem;
    line-height: 1.5;
    margin: 0;
    font-weight: 400;
    padding-bottom: 10px;
}

/* Contenedor principal */
.noticias-section {
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 20px;
    max-width: 1300px;
    margin: 0 auto;
}

/* La tarjeta que divide imagen y texto */
.noticia-card {
    max-width: 1300px;
    display: flex;
    align-items: center;
    overflow: hidden;
    gap: 5px;
}

/* Imagen a la izquierda */
.noticia-image-container {
    max-width: 900px;
    max-height: 400px;
    flex: 2.3; /* Toma más espacio */
}

.noticia-image-container img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 30px; /* Redondeado como en tu maqueta */
}

/* Contenido a la derecha */
.noticia-content {
    flex: 1;
    padding: 0px 0px 0 20px;
}

.noticia-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    color: #2d3088;
    font-size: 2.3rem;
    margin-bottom: 7px;
}

.noticia-description {
    font-size: 1rem;
    color: #666;
    margin-bottom: 7px;
    line-height: 1.5;
}

/* El botón azul de la maqueta */
.btn-saber-mas {
    display: inline-block;
    background-color: #2d3088; /* El azul oscuro de Palmas del Norte */
    color: white;
    padding: 12px 40px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.3s;
    text-align: center;
    width: 80%;
}

.btn-saber-mas:hover {
    background-color: #2d3088;
}

/* Responsivo: En celulares se pone uno sobre otro */
@media (max-width: 768px) {
    .noticia-card {
        flex-direction: column;
        text-align: center;
    }
    .btn-saber-mas {
        width: 100%;
    }
}

.noticias-section .slider {
    position: relative;
    width: 100%;
    max-width: 1300px;
    height: 500px;
    overflow: hidden;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;

}
.noticias-section .slider .buttons button{
    background-color: #00000000;
    color: #2d3088;
    border: none;
    font-family: monospace;
    font-weight: bold;
    cursor: pointer;
    font-size: 20px;
    transition: background-color 0.3s;
}

.noticias-section .slider .dots li {
background-color: #2d3088;
}


/*Sección de Blogs :)*/

.blogs-section {
    max-width: 1300px;
    margin: 0 auto;
    padding: 40px 20px;
}

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

.blog-card {
    border: 1px solid #2d3088; /* Borde azul delgado como la maqueta */
    border-radius: 30px; /* Bordes muy redondeados */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 20px; /* Espacio interno de la tarjeta */
    transition: transform 0.3s ease;
}

.blog-card:hover {
    transform: translateY(-5px);
}

.blog-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px; /* Redondeado interno de la imagen */
}

.blog-card__content {
    padding: 20px 0 0;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.blog-card__content h2 {
    font-family: 'Montserrat', sans-serif;
    color: #2d3088;
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: 15px;
    line-height: 1.2;
}

.blog-card__content p {
    color: #777;
    font-size: 1rem;
    margin-bottom: 25px;
    flex-grow: 1;
}

/* El botón azul de la maqueta */
.btn-saber-mas {
    background-color: #2d3088;
    color: white;
    text-decoration: none;
    padding: 12px 0;
    border-radius: 30px;
    font-weight: 600;
    width: 100%; /* Botón ancho como en la imagen */
    display: block;
    transition: background 0.3s;
}

.btn-saber-mas:hover {
    background-color: #2d3088;
}

/* Contenedor principal */
.blogs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Crea 3 columnas iguales */
    gap: 20px;
    max-width: 1300px;
    margin: 0 auto;
}

/* La segunda tarjeta se expande */
.blog-card--large {
    grid-column: span 2; /* Ocupa 2 de las 3 columnas */
    display: flex !important;
    align-items: center;
}

/* Ajuste proporcional para la tarjeta grande */
.blog-card--large .blog-card__image {
    flex: 1;
    height: 100%;
}

.blog-card--large .blog-card__content {
    flex: 1;
    padding: 20px 0 0;
}

/* Responsivo para celulares */
@media (max-width: 900px) {
    .blogs-grid {
        grid-template-columns: 1fr; /* Una sola columna en móvil */
    }
    .blog-card--large {
        grid-column: span 1;
        flex-direction: column !important;
    }

}

.pagination-container {
    display: flex;
    justify-content: center;
    padding: 50px 0;
    font-family: 'Montserrat', sans-serif;
}

.pagination-list {
    display: flex;
    list-style: none;
    align-items: center;
    gap: 15px;
}

.pagination-number, .pagination-arrow {
    text-decoration: none;
    color: #2d3088; /* El azul de tu marca */
    font-size: 24px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.pagination-number.active {
    color: #2d3088;
    border-bottom: 2px solid #2d3088; /* Subrayado para indicar página actual */
}

.pagination-number:hover:not(.active) {
    opacity: 0.7;
}

.pagination-arrow.disabled {
    opacity: 0.3;
    pointer-events: none; /* No se puede hacer clic */
}
/* Imagen superior */
.top-banner {
    width: 100%;
    overflow: hidden;
}
.top-banner img {
    margin-top: 80px;
    width: 100%;
    height: auto;
    display: block;
    max-height: 60vh; /* limita altura en pantallas grandes */
    object-fit: cover; /* recorta proporcionalmente si es necesario */
}

@media (max-width: 600px) {
    .top-banner img {
        margin-top: 20px;
        max-height: 40vh; /* menor altura en móviles */
    }
}

/* Contenedor principal */
.main-content {
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* --- SECCIÓN INTRO (Formulario + Texto) --- */
.intro-section {
    display: flex;
    justify-content: center;
    align-items: center; /* Alineación vertical */
    gap: 210px;
    margin-bottom: 80px;
}

/* Tarjeta Formulario */
.card-form {
    background: white;
    padding: 30px;
    border-radius: 20px;
    width: 350px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

/* Wrapper para aislar la tarjeta y evitar que se fusione con elementos adyacentes */
.card-wrapper {
    display: inline-block;
    padding: 6px; /* pequeño acolchado visual */
    border-radius: 22px;
    background: transparent;
}

.progress-dots {
    display: flex;
    gap: 5px;
    margin-bottom: 15px;
}

.dot {
    height: 8px;
    flex-grow: 1;
    background-color: #ddd;
    border-radius: 4px;
}
.dot.active {
    background-color: #2D3088; /* Azul oscuro */
}

.card-form h3 {
    color: #2D3088;
    margin-bottom: 10px;
}

.small-text {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
    line-height: 1.4;
}

.input-dni {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ccc;
    border-radius: 25px;
    margin-bottom: 15px;
    outline: none;
}

.btn-verify {
    width: 100%;
    padding: 12px;
    background-color: #2D3088;
    color: white;
    border: none;
    border-radius: 25px;
    font-size: 16px;
    cursor: pointer;
}

/* Texto Intro Derecha */
.intro-text {
    max-width: 400px;
}

.title-blue {
    color: #2D3088;
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 15px;
}

.quote-text {
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 15px;
    color: #222;
}

.promo-text {
    font-size: 16px;
    line-height: 1.5;
}

/* --- SECCIÓN PASOS --- */
.steps-container {
    display: flex;
    flex-direction: column;
    gap: 80px; /* Separación entre pasos */
}

.step-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

/* Clase para invertir el orden (Imagen a la izquierda) */
.step-row.reverse {
    flex-direction: row-reverse;
}

.step-text {
    flex: 1;
    padding: 0 20px;
}

.step-text p {
    font-size: 1.3rem;
    margin-bottom: 10px;
    line-height: 1.5;
    color: #201f1f;
}

/* Imagen decorativa debajo del texto en cada paso (maqueta) */
.step-text .decor-img {
    display: block;
    width: 84px;
    max-width: 22%;
    height: auto;
    margin-top: 16px;
    opacity: 0.98;
}

/* Voltear la segunda decoracion (mirar maqueta) */
.step-text .decor-img.flipped {
    transform: scaleX(-1);
}

@media (max-width: 768px) {
    .step-text .decor-img {
        margin: 12px auto 0 auto;
        max-width: 120px;
    }
    .blue-shape {
    width: 290px !important;
    height: 30% !important;
}
    .steps-container {
        gap: 50px;
    }
}

.big-quote {
    font-size: 80px;
    color: #2D3088;
    display: block;
    line-height: 0;
    margin-top: 40px;
    font-family: serif;
}

/* Imágenes y Formas Azules */
.step-image-wrapper {
    flex: 1;
    position: relative;
    height: 250px; /* Altura fija para controlar la forma azul */
    display: flex;
    align-items: flex-end; /* Alinear imagen abajo */
    justify-content: center;
}

.step-image-wrapper img {
    position: relative;
    z-index: 2;
    height: 130%; /* La imagen sobresale un poco hacia arriba */
    width: auto;
    object-fit: contain;
}

/* La mancha azul genérica */
.blue-shape {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 70%;
    background-color: #2D3088;
    z-index: 1;
}

/* Forma redondeada arriba-izquierda (Para img a la derecha) */
.shape-left-round {
    border-top-left-radius: 120px;
}

/* Forma redondeada arriba-derecha (Para img a la izquierda) */
.shape-right-round {
    border-top-right-radius: 120px;
}

/* --- RESPONSIVE (Móvil) --- */
@media (max-width: 768px) {
    .intro-section {
        flex-direction: column;
        gap: 30px;
        text-align: center;
    }

    .step-row, .step-row.reverse {
        flex-direction: column-reverse; /* Imagen arriba, texto abajo */
        text-align: center;
        gap: 20px;
    }
    
    .step-image-wrapper {
        width: 100%;
        height: 200px;
    }

    .step-image-wrapper img {
        height: 120%;
        width: 300px;
    }
}

/* --- CONFIGURACIÓN GENERAL --- */

.container-width {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.loc-icon img {
    width: 40%;
    justify-content: center;
    height: auto;
}

.btn-map img {
    width: 17%;
    height: auto;
    display: block;
}

/* --- BREADCRUMB BAR (Barra Azul) --- */
.breadcrumb-bar {
    background-color: #1B4332;
    color: white;
    padding: 18px 20px;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 30px;
}

.breadcrumb-bar .breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
}

.breadcrumb-bar .breadcrumb__item,
.breadcrumb-bar .breadcrumb__item.active {
    color: white;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.breadcrumb-bar .breadcrumb__home svg {
    display: block;
    width: 15px;
    height: 15px;
    color: white;
}

.breadcrumb-bar .breadcrumb__sep {
    color: #ffffffcc;
    margin: 0 6px;
}

/* --- GRID SYSTEM --- */
.content-grid {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    padding-top: 50px;
    padding-bottom: 50px;
}



/* --- COLUMNA IZQUIERDA (Info Proyecto) --- */
.project-info {
    flex: 1; /* Ocupa el espacio disponible */
    max-width: 600px;
}


.project-title {
    color: #005822;
    font-size: 2.6rem; /* Tamaño grande */
    font-weight: 900;  /* EL PESO MÁXIMO PARA QUE SE VEA GRUESO */
    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 10px;
    line-height: 1.1;
}

/* Iconos de especificaciones (Av Grau, 90m2) */
.project-specs {
    display: flex;
    gap: 30px;
    margin-bottom: 30px;
}


.spec-item p {
    color: #3d3d3d;
    font-size: 1.2rem;
    line-height: 1.2;
    font-weight: 200 !important;
}

/* Botones / Tags */
.project-tag span{
    font-size: 2.5rem;
    font-weight: 900;
    align-items: center;
    gap: 10px;
}
.project-tag p {
    font-size: 1.3rem;
    font-weight: 400;
    background-color: #ec6f26;
    color: white;
    padding: 15px 20px;
    border-radius: 15px;
}
.project-tag {
    max-width: 500px;
    display: flex;
    gap: 10px;
}
.tag-btn{
    min-width: 200px;
    text-align: center;
}
.project-tags {
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
    max-width: 190px;
    gap: 20px;
}

.tag-btn {
    background-color: #005822;
    color: white;
    padding: 10px 30px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 0.9rem;
}

.project-description {
    color: #666;
    font-size: 1rem;
    line-height: 1.6;
}

/* --- COLUMNA DERECHA (Formulario) --- */
.form-wrapper {
    flex: 0 0 380px; /* Ancho fijo para el form */
}

.form-card {
    background-color: white;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.form-card h3 {
    color: #067c34;
    font-weight: 800;
    margin-top: 0;
    margin-bottom: 20px;
}

.form-card input, 
.form-card select {
    padding: 12px 15px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.9rem;
    outline: none;
    color: #555;
    background: white;
}

.form-card input::placeholder {
    color: #aaa;
    text-transform: uppercase;
    font-size: 0.8rem;
}

.select-label {
    display: block;
    color: #005822;
    font-weight: 700;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

/* Checkboxes */
.checkbox-container {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 0.75rem;
    color: #333;
}

.checkbox-container input {
    width: auto;
    margin-top: 3px;
}

.checkbox-container a {
    color: #005822;
    text-decoration: underline;
    font-weight: 600;
}

/* Botón Siguiente */
.btn-submit {
    width: 100%;
    background-color: #B35C38;
    color: white;
    border: none;
    padding: 14px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    margin-top: 10px;
    transition: background 0.3s;
}

.btn-submit:hover {
    background-color: #2aaf5d;
}

/* --- BANNER INTERMEDIO --- */
.map {
    width: 100%;
}

.banner-img {
    width: auto;
    height: auto;
    align-items: center;
    display: block;
    margin: 0 auto;
}

/* --- SECCIÓN INFERIOR --- */
.bottom-grid {
    padding-top: 0;
}

.bottom-text {
    flex: 1;
}

.bottom-text h2 {
    color: #363636;
    font-size: 1.8rem;
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1.1;
    margin-bottom: 20px;
}

.highlight-text {
    color: #666;
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: 5px;
}

.schedule-text {
    color: #666;
    font-size: 1.4rem;
    font-weight: 400;
}

/* Tarjetas de Ubicación */
.location-cards {
    display: flex;
    gap: 20px;
}

.loc-card {
    background: white;
    padding: 25px;
    border-radius: 15px;
    text-align: center;
    width: 220px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}

.loc-icon {
    margin-bottom: 10px;
}

.loc-card h4 {
    color: #083100;
    font-weight: 800;
    margin: 10px 0;
    font-size: 0.9rem;
}

.loc-card p {
    font-size: 0.87rem;
    color: #666;
    margin-bottom: 15px;
    line-height: 1.1;
}

.btn-map {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px 15px;
    border: 1px solid #ccc;
    border-radius: 20px;
    text-decoration: none;
    color: #005822;
    font-weight: 700;
    font-size: 0.8rem;
    background: white;
    transition: all 0.3s;
}

.btn-map:hover {
    border-color: #2d3088;
    background: #f4f7ff;
}

.banner-img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    object-fit: content;
    padding-top: 80px;
}

.beneficios-alborada {
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    height: auto;
    
}

.map-container {
    width: 100%;
    max-width: 1150px;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 20px !important;
    object-fit: cover;
}

/* --- RESPONSIVE (Móvil) --- */
@media (max-width: 900px) {
    .banner-img,
    .map-container {
        height: auto;
    }

    /* Mover el padding al contenedor para evitar que la imagen recorte su borde */
    .map { padding: 0 20px; }

    .map-container {
        border-radius: 50px;
        padding: 0; /* sin padding en la imagen */
        width: 100%;
        max-width: none;
        display: block;
        box-sizing: border-box;
    }

    .content-grid {
        flex-direction: column;
        gap: 30px;
        padding-top: 30px;
    }

    /* En móvil, ponemos el form arriba o abajo según prefieras. 
       Aquí sigue el flujo natural (Info -> Form) */
    
.bottom-info {
        justify-content: center;
        text-align: center;
    }

    .form-wrapper {
        flex: auto;
        width: 100%;
    }

    .project-title {
        font-size: 2rem;
    }


    .loc-card {
        width: 100%;
    }

    .bottom-grid {
        flex-direction: column-reverse; /* Pone las tarjetas primero o después */
    }

    .bottom-text {
        text-align: center;
        margin-top: 30px;
    }

    .loc-icon {
        display: flex;
        justify-content: center;
        max-width: 200px;
        text-align: center;
    }
}

/* Ajustes específicos para pantallas muy pequeñas: borde normal y menos padding */
@media (max-width: 480px) {
    .slider .list .item {
    flex: 0 0 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
    .map-container {
        border-radius: 15px;
        padding: 0;
        width: 100%;
        max-width: none;
        display: block;
        box-sizing: border-box;
        margin-bottom: 20px;
    }

    .map { padding: 0 12px; }
}
/*Noticias*/
.noticias-section {
    display: flex;
    gap: 20px;
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
    align-items:start ;
}
.noticias-section__info {
    max-width: 800px;
}

.noticias-section__info p {
    font-size: 1.1rem;
    font-weight: 400;
    margin-bottom: 10px;
    line-height: 1.5;
}

.noticias-section__info li, ul {
    text-decoration: none;
    list-style-type: none;
    margin-left: 20px;
}

.breadcrumb-noticias {
    color: #2d3088;
    font-size: 0.95rem;
    font-weight: 500;
    padding: 6px 0;
    padding-top: 80px
}
.breadcrumb-noticias .breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
}
.container-width {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 5px;
}

.breadcrumb-noticias .breadcrumb__item {
    color: #2d3088;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.breadcrumb-noticias .breadcrumb__home svg {
    display: block;
    width: 15px;
    height: 15px;
}

.breadcrumb-noticias .breadcrumb__sep {
    color: #6b6b6b;
    margin: 0 6px;
}

.title-noticias {
    margin-bottom: 10px; 
}
.title-noticias h1 {
    margin: 0;
}
.fecha {
    display: block;
    margin-bottom: 10px; 
    color: #6b6b6b;
    font-size: 0.95rem;
}
.hero-noticias img {
    display: block;
    margin-top: 0; 
    max-width: 100%;
    height: auto;
}

.sub-title h2 {
    color: #2d3088;
    font-size: 1.7rem;
    font-weight: 800;
    margin-bottom: 20px;
}

.noticias-section__recomendacion img {
    width: 100%;
    height: auto;
    border-radius: 20px;
    object-fit: cover;
}

.noticias-section__recomendacion h3 {
    color: #2d3088;
    font-size: 1.5rem;
    font-weight: 800;
    margin-top: 40px;
    padding-bottom: 30px;
}

.noticias-section__recomendacion a, h4{
    text-decoration: none ;
    color: #2d3088;
    font-size: 1.3rem;
    font-weight: 800;
}

@media (min-width: 900px) {
    .noticias-section {
        flex-direction: row;
        align-items: flex-start;
        gap: 30px;
        padding: 30px 20px;
    }

    .noticias-section__info {
        flex: 1 1 66%;
        min-width: 0;
    }

    .noticias-section__recomendacion {
        flex: 0 0 320px;
        max-width: 360px;
        padding-top: 130px;
    }
}

.title-noticias h1{
    max-width: 1200px;
    color: #0a0a0a;
    font-size: 2.7rem;
    font-weight: 800;
    margin-bottom: 40px;
    margin: 0 auto;
    padding-left: 10px;
}

.hero-noticias {
    max-width: 1200px;
    position: relative;
    width: 100%;
    height: 550px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 50px;
}

.hero-noticias img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}
.fecha {
    color: #383838;
    padding: 0 20px;
    font-size: 1.2rem;
    font-weight: 600;
}

/* Bloque canónico de noticias (copiado desde css/style.css) */
.title-noticias h1 {
    color: #0a0a0a;
    font-size: 2.7rem;
    font-weight: 800;
    margin-bottom: 40px;
    margin: 0 auto;
    padding-left: 10px;
    line-height: 1.2;
}

.fecha {
    display: block;
    margin-bottom: 10px; 
    color: #383838;
    font-size: 1.2rem;
    font-weight: 600;
    padding: 0 10px; /* Ajustado levemente para alinear con título */
}

.hero-noticias {
    max-width: 1200px;
    position: relative;
    width: 100%;
    height: auto; /* Ajuste para móvil */
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 50px;
}

.hero-noticias img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    display: block;
}

.noticias-section__info p {
    font-size: 1.1rem;
    font-weight: 400;
    margin-bottom: 10px;
    line-height: 1.5;
    color: #666; /* Heredado de bloques similares */
}

/* Subtítulos dentro del contenido */
.sub-title h2 {
    color: var(--primary-blue);
    font-size: 1.7rem;
    font-weight: 800;
    margin-bottom: 20px;
}

/* ===========================
   Barra Lateral / Recomendación (Derecha)
   =========================== */
.noticias-section__recomendacion {
    display: flex;
    flex-direction: column;
}

/* --- Tarjeta Newsletter --- */
.noticias-section__recomendacion .newsletter-card {
    background: var(--white);
    padding: 22px;
    border-radius: 14px;
    width: 100%; /* Full width en móvil, fijo en desktop */
    box-shadow: 0 18px 40px rgba(7,10,26,0.12), inset 0 1px 0 rgba(255,255,255,0.6);
    margin-bottom: 18px;
}

.noticias-section__recomendacion .newsletter-card__inner h2 {
    color: var(--primary-blue);
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 20px;
    line-height: 1.1;
}

.noticias-section__recomendacion .newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Inputs del Newsletter */
.noticias-section__recomendacion .newsletter-form input[type="text"],
.noticias-section__recomendacion .newsletter-form input[type="email"] {
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid #ECECEC;
    border-radius: 10px;
    font-size: 15px;
    color: #333;
    background: #fff;
    outline: none;
}

.noticias-section__recomendacion .newsletter-form input:focus {
    box-shadow: 0 4px 14px rgba(45,48,136,0.07);
    border-color: rgba(45,48,136,0.15);
}

.noticias-section__recomendacion .newsletter-form input::placeholder {
    color: #CFCFCF;
    text-transform: uppercase;
    font-weight: 700;
}

/* Checkbox y Privacidad */
.noticias-section__recomendacion .newsletter-privacy {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #222;
    line-height: 1.2;
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.noticias-section__recomendacion .newsletter-privacy input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    flex: 0 0 auto;
}

.noticias-section__recomendacion .newsletter-privacy__left {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    white-space: normal;
    flex: 1 1 auto;
}

.noticias-section__recomendacion .newsletter-privacy__link {
    display: inline-block;
    color: var(--primary-blue);
    font-weight: 700;
    text-decoration: none;
    font-size: 14px;
    margin-left: 6px;
}

/* Botón Newsletter */
.noticias-section__recomendacion .btn-newsletter {
    display: block;
    width: 100%;
    background: var(--primary-blue);
    color: #fff;
    border: none;
    padding: 16px 18px;
    border-radius: 22px;
    font-size: 18px;
    font-weight: 700;
    box-shadow: 0 12px 30px rgba(45,48,136,0.32);
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.noticias-section__recomendacion .btn-newsletter:active {
    transform: translateY(1px);
}

.noticias-section__recomendacion .btn-newsletter:hover {
    box-shadow: 0 12px 28px rgba(45,48,136,0.28);
}

/* Utility: Screen Reader Only (usado en labels) */
.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Sección "También te podría interesar" --- */
.noticias-section__recomendacion h3 {
    color: var(--primary-blue);
    font-size: 1.5rem;
    font-weight: 800;
    margin-top: 40px;
    padding-bottom: 30px;
}

.noticias-section__recomendacion img {
    width: 100%;
    height: auto;
    border-radius: 20px;
    object-fit: cover;
}

.noticias-section__recomendacion a {
    text-decoration: none;
}