@font-face {
    font-family: 'Twemoji Country Flags';
    src: url('https://cdn.jsdelivr.net/npm/country-flag-emoji-polyfill@0.1/dist/TwemojiCountryFlags.woff2') format('woff2');
    unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
    font-display: swap;
}

:root {
    --brand-dark: #232629;
    /* gris oscuro logo */
    --brand-mid: #4c5256;
    /* gris medio */
    --brand-accent: #0b4a27;
    /* verde profundo */
    --brand-accent-2: #7ca28a;
    /* verde suave */
    --surface: #ffffff;
    /* fondo home (blanco) */
    --surface-alt: #f3f5f6;
    /* gris muy claro para bloques */
    --radius: 14px;
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, .06);
    --shadow-md: 0 10px 25px rgba(0, 0, 0, .08);
    --c-dark: #232629;
    --c-mid: #4c5256;
    --c-accent: #0b4a27;
    --c-surface: #ffffff;
    --c-surface-alt: #f3f5f6;
    --radius-xl: 16px;
    --shadow-md: 0 10px 25px rgba(0, 0, 0, .08);
    --c-deep: #0b3b32;
    /* verde profundo del contorno */
    --c-leaf: #175f4b;
    /* verde hoja/bambú */
    --c-sage: #eef4f2;
    /* salvia muy claro */
    --c-cream: #f6f7f5;
    /* gris cálido neutro */
    --c-wood: #f2ebe2;
    /* “madera” claro */
    --c-wood-text: #4e3a2b;
}

body,
html {
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background-color: #FAF8F4;
    /* Prevent any white bleed below footer */
}

/* Logo dentro de la barra de navegación */
.logo img {
    max-width: 175px;
    height: auto;
    display: block;
    order: 1;

}



.container {
    max-width: none;
    /* Elimina restricciones de ancho */
    padding: 0;
}



/* Para evitar que el contenido se oculte detrás de la barra fija */
body {
    background: #FAF8F4;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    position: relative;
    width: 100%;
}



/* General styles */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;

}

/* Header styles */

/* Header styles */
.header {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 600px;
    /* Altura ajustable según necesites */
}

/* Estilos para el contenedor del video */
.video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.video-background video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Para que cubra todo el contenedor */
    will-change: transform;
    transform: translate3d(0, 0, 0);
}

/* Estilos para el contenido del header */
.header-content {
    position: absolute;
    z-index: 1;
    background: rgba(0, 0, 0, 0.5);
    /* Cuadro negro detrás del texto */
    text-align: center;
    color: #fff;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0;
    border-radius: 0;
}

.header-content .container {
    padding: 50px 20px;
    max-width: 800px;
}

.header-content h1,
.header-content h2,
.header-content h3,
.header-content p {
    margin-bottom: 1rem;
    margin-top: 1rem;
}

.header-content a {
    text-decoration: none;
    padding: 10px 20px;
    background-color: #ffcc00;
    color: #000;
    border-radius: 5px;
    font-weight: bold;
    display: inline-block;
    margin-top: 10px;
    margin-bottom: 2rem;
}

.header-content a:hover {
    background-color: #e6b800;
}

/* Responsividad */
@media (max-width: 768px) {

    /* === MOBILE NAVBAR REDUCTION (30-40% more compact) === */
    .site-header {
        height: 48px;
        /* Reducido de 68px */
    }

    .site-header.is-scrolled {
        top: 8px;
        height: 42px;
        /* Reducido de 58px */
        border-radius: 16px;
        width: calc(100% - 16px);
    }

    .nav-logo img {
        height: 34px;
        /* Reducido de 55px */
    }

    .site-header.is-scrolled .nav-logo img {
        height: 26px;
        /* Reducido de 32px */
    }

    .main-nav {
        padding: 0 1rem;
        /* Reducción de padding horizontal y vertical */
    }

    /* === HERO SECTION MOBILE ONLY OPTIMIZATION === */
    .header {
        height: auto;
        min-height: 520px;
        /* Reducido de 600px para que empiece más arriba y esté menos estirado */
    }

    .header h1 {
        font-size: 1.85rem;
        /* Ajuste premium */
        margin-top: 0.5rem;
        margin-bottom: 0.75rem;
    }

    .header h2,
    .header h3 {
        font-size: 1.2rem;
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
    }

    .header-content p {
        font-size: 0.88rem;
        line-height: 1.35;
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
    }

    .header-content {
        box-sizing: border-box;
        padding-top: 55px;
        /* Trae el contenido hacia arriba, dejando espacio suficiente para el navbar de 48px */
        padding-bottom: 1.5rem;
    }

    .header-content .container {
        padding: 10px 15px 30px;
        /* Más compacto para evitar espacio vacío */
        width: 90%;
        max-width: 95%;
    }

    .header-content a {
        margin-top: 0.75rem;
        margin-bottom: 0;
        padding: 8px 16px;
        position: relative;
    }
}

/* Para pantallas muy pequeñas */
@media (max-width: 480px) {
    .header {
        min-height: 500px;
        /* Reducido de 640px para evitar espacios vacíos en móviles pequeños */
    }

    .header h1 {
        margin-top: 0.5rem;
        font-size: 1.6rem;
    }

    .header h2,
    .header h3 {
        font-size: 1.1rem;
    }

    .header-content .container {
        padding: 10px 10px 20px;
    }
}




/* Estilos por defecto para el menú */


/* ==========================================================================
   NAVBAR (HEADER) PREMIUM WHITE TROPICAL
   ========================================================================== */
.site-header {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 100%;
    height: 50px;
    background-color: #FAF8F4;
    background-image: linear-gradient(180deg, #FAF8F4 0%, #F6F3EC 100%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%230F3D2E' fill-opacity='0.012'%3E%3Cpath d='M30 20c5 0 8 4 8 10s-3 10-8 10-8-4-8-10 3-10 8-10zm60 50c5 0 8 4 8 10s-3 10-8 10-8-4-8-10 3-10 8-10zM30 90c3 0 5-2 5-5s-2-5-5-5-5 2-5 5 2 5 5 5zm60-60c3 0 5-2 5-5s-2-5-5-5-5 2-5 5 2 5 5 5z'/%3E%3C/g%3E%3C/svg%3E");
    border-bottom: 1px solid rgba(15, 61, 46, 0.08);
    z-index: 1000;
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* EFECTO NUBE AL SCROLLEAR */
.site-header.is-scrolled {
    top: 16px;
    width: calc(100% - 48px);
    max-width: 1400px;
    height: 64px;
    border-radius: 50px;
    box-shadow: 0 18px 45px rgba(15, 61, 46, 0.12);
    background-color: rgba(250, 248, 244, 0.96);
    background-image: none;
    /* Sin patrón en scroll para mayor limpieza visual */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(15, 61, 46, 0.08);
}

.main-nav {
    max-width: 1400px;
    margin: 0 auto;
    height: 100%;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    padding: 0 2.5rem;
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.site-header.is-scrolled .main-nav {
    padding: 0 2rem;
}

/* Izquierda: Logo siempre a la izquierda */
.nav-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.nav-logo {
    display: flex;
    align-items: center;
}

.nav-logo img {
    height: 55px;
    width: auto;
    object-fit: contain;
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.site-header.is-scrolled .nav-logo img {
    height: 38px;
}

/* Centro: Enlaces de navegación centrados */
.nav-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav-links {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 1.25rem;
}

.nav-links li {
    position: relative;
    padding: 6px 0;
}

.nav-links li a {
    color: rgba(0, 0, 0, 0.72);
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    text-decoration: none;
    transition: color 0.3s ease;
    display: block;
}

.nav-links li a:hover {
    color: #0F3D2E;
}

/* Indicador de página activa con línea dorada elegante expandiéndose desde el centro */
.nav-links li::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background-color: #C99A3B;
    transition: width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.nav-links li.active::after,
.nav-links li:hover::after {
    width: 100%;
}

.nav-links li.active a {
    color: #0F3D2E;
    font-weight: 600;
}

/* Derecha: Selector de Idioma y WhatsApp */
.nav-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.25rem;
}

/* Selector de Idiomas Dropdown */
.language-dropdown {
    position: relative;
}

.lang-toggle {
    background: transparent;
    border: none;
    color: #2b2b2b;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 4px;
    transition: all 0.3s ease;
    font-family: "Twemoji Country Flags", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

.lang-toggle:hover {
    color: #0F3D2E;
}

.lang-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #FAF8F4;
    border: 1px solid rgba(15, 61, 46, 0.08);
    border-radius: 8px;
    padding: 6px 0;
    min-width: 110px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 8px 24px rgba(15, 61, 46, 0.08);
}

.language-dropdown.is-active .lang-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-menu a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    color: #2b2b2b;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
    font-family: "Twemoji Country Flags", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

.lang-menu a:hover {
    background-color: rgba(201, 154, 59, 0.1);
    color: #0F3D2E;
}

/* Botón WhatsApp */
.whatsapp-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #C99A3B;
    color: #FAF8F4;
    border: none;
    padding: 8px 18px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(201, 154, 59, 0.15);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.whatsapp-nav-btn i {
    font-size: 15px;
}

.whatsapp-nav-btn:hover {
    background-color: #0F3D2E;
    color: #FAF8F4;
    box-shadow: 0 6px 16px rgba(15, 61, 46, 0.2);
    transform: translateY(-1px);
}

/* Hamburguesa (Oculta en Desktop) */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 35px;
    height: 16px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 1001;
}

.mobile-menu-toggle span {
    display: block;
    height: 2px;
    width: 100%;
    background-color: #0F3D2E;
    border-radius: 2px;
    transition: all 0.3s ease;
}

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

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

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

/* Panel Mobile */
.mobile-nav-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(250, 248, 244, 0.98);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-100%);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 999;
}

.mobile-nav-panel.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mobile-nav-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    margin-bottom: 3rem;
}

.mobile-nav-links a {
    color: #2b2b2b;
    font-size: 20px;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 500;
    letter-spacing: 1px;
    transition: color 0.3s;
    position: relative;
}

.mobile-nav-links a.active {
    color: #0F3D2E;
    font-weight: 600;
}

.mobile-nav-links a.active::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 10%;
    width: 80%;
    height: 2px;
    background-color: #C99A3B;
}

.mobile-nav-links a:hover {
    color: #0F3D2E;
}

.mobile-nav-extras {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.lang-options-mobile {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}

.lang-options-mobile a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: rgba(0, 0, 0, 0.4);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
    padding: 5px;
    font-family: "Twemoji Country Flags", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

.lang-options-mobile a.active {
    color: #C99A3B;
    border-bottom: 2px solid #C99A3B;
}

/* Responsive Ajustes */
@media (max-width: 1024px) {

    .nav-center,
    .nav-right {
        display: none;
    }

    .main-nav {
        grid-template-columns: auto 1fr;
        padding: 0 1.5rem;
    }

    .nav-left {
        justify-content: flex-start;
    }

    .mobile-menu-toggle {
        display: flex;
        justify-self: end;
    }

    .site-header {
        height: 68px;
    }

    .site-header.is-scrolled {
        top: 12px;
        width: calc(100% - 24px);
        height: 58px;
        border-radius: 24px;
        box-shadow: 0 12px 35px rgba(15, 61, 46, 0.1);
    }

    .nav-logo img {
        height: 55px;
    }

    .site-header.is-scrolled .nav-logo img {
        height: 32px;
    }
}

/* About Us Section - Diseño Editorial y Arquitectónico Eco-Luxury */
.about-us {
    position: relative;
    background-color: #FAF8F4;
    padding: 7.5rem 0;
    overflow: hidden;
    width: 100%;
}

/* Sutil patrón de hojas/bambú de fondo vectorial */
.about-us::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='%230F3D2E' fill-opacity='0.008'%3E%3Cpath d='M10 20c15 0 25 10 25 25S25 70 10 70 0 60 0 45s10-25 10-25zm80 80c15 0 25 10 25 25s-10 25-25 25-25-10-25-25 10-25 25-25z'/%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 1;
}

.about-us__inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 4.5rem;
    position: relative;
    z-index: 2;
}

/* Columna Izquierda: Media (Team) + Stats Overlay */
.about-us__media {
    width: 52%;
    position: relative;
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(15, 61, 46, 0.08);
}

.about-us__image {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 24px;
    display: block;
    border: 1px solid rgba(15, 61, 46, 0.04);
}

/* Stats overlay capsula bar */
.about-us__stats {
    position: absolute;
    bottom: -28px;
    left: 5%;
    width: 90%;
    background: rgba(15, 61, 46, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(201, 154, 59, 0.2);
    border-radius: 20px;
    padding: 1.25rem 1rem;
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;
    box-shadow: 0 15px 35px rgba(7, 63, 53, 0.18);
}

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

.about-us__stat-value {
    color: #C99A3B;
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 4px;
    letter-spacing: -0.5px;
}

.about-us__stat-label {
    color: #FAF8F4;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 500;
    opacity: 0.9;
}

.about-us__stat-divider {
    width: 1px;
    height: 32px;
    background-color: rgba(201, 154, 59, 0.3);
}

/* Columna Derecha: Content & Editorial Typography */
.about-us__content {
    width: 48%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.about-us__eyebrow {
    color: #C99A3B;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 0.75rem;
}

.about-us__content h2 {
    font-size: 3.25rem;
    color: #0F3D2E;
    font-weight: 700;
    line-height: 1.15;
    margin: 0;
    font-family: inherit;
}

.about-us__line {
    width: 72px;
    height: 3px;
    background: linear-gradient(90deg, #C99A3B, transparent);
    margin: 1.5rem 0;
}

.about-us__text {
    color: rgba(43, 43, 43, 0.78);
    font-size: 15px;
    line-height: 1.75;
}

.about-us__text p {
    margin-bottom: 1.25rem;
    text-align: justify;
}

.about-us__text p:last-child {
    margin-bottom: 0;
}

/* Decoraciones vectoriales elegantes */
.about-us__decor {
    position: absolute;
    pointer-events: none;
    z-index: 1;
    opacity: 0.15;
    background-repeat: no-repeat;
    background-size: contain;
}

.about-us__decor--left {
    bottom: -50px;
    left: -50px;
    width: 300px;
    height: 600px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 800"><defs><linearGradient id="cane1" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="%23052c21" /><stop offset="35%" stop-color="%230b4a27" /><stop offset="70%" stop-color="%23146d3e" /><stop offset="90%" stop-color="%230b4a27" /><stop offset="100%" stop-color="%2304221a" /></linearGradient><linearGradient id="cane2" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="%2304221a" /><stop offset="30%" stop-color="%23073F35" /><stop offset="60%" stop-color="%230e6955" /><stop offset="85%" stop-color="%23073F35" /><stop offset="100%" stop-color="%23021410" /></linearGradient><linearGradient id="leafGrad" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="%231b5e20" /><stop offset="50%" stop-color="%232e7d32" /><stop offset="100%" stop-color="%231b5e20" /></linearGradient><linearGradient id="leafGradLight" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="%232e7d32" /><stop offset="60%" stop-color="%234caf50" /><stop offset="100%" stop-color="%231b5e20" /></linearGradient></defs><g transform="translate(-10, 0)"><g transform="translate(60, 0) scale(0.85) rotate(1.5, 50, 400)"><rect x="30" y="0" width="28" height="210" fill="url(%23cane2)" /><rect x="30" y="215" width="28" height="200" fill="url(%23cane2)" /><rect x="30" y="420" width="28" height="205" fill="url(%23cane2)" /><rect x="30" y="630" width="28" height="170" fill="url(%23cane2)" /><ellipse cx="44" cy="212.5" rx="15" ry="4" fill="%23021410" /><ellipse cx="44" cy="417.5" rx="15" ry="4" fill="%23021410" /><ellipse cx="44" cy="627.5" rx="15" ry="4" fill="%23021410" /></g><g transform="rotate(-1, 50, 400)"><rect x="20" y="0" width="42" height="170" fill="url(%23cane1)" /><rect x="20" y="175" width="42" height="220" fill="url(%23cane1)" /><rect x="20" y="400" width="42" height="210" fill="url(%23cane1)" /><rect x="20" y="615" width="42" height="185" fill="url(%23cane1)" /><ellipse cx="41" cy="172.5" rx="22" ry="5" fill="%23021410" /><ellipse cx="41" cy="172.5" rx="20.5" ry="2.5" fill="%23146d3e" /><ellipse cx="41" cy="397.5" rx="22" ry="5" fill="%23021410" /><ellipse cx="41" cy="397.5" rx="20.5" ry="2.5" fill="%23146d3e" /><ellipse cx="41" cy="612.5" rx="22" ry="5" fill="%23021410" /><ellipse cx="41" cy="612.5" rx="20.5" ry="2.5" fill="%23146d3e" /></g><path d="M62,172 Q130,190 170,240" stroke="%2304221a" stroke-width="2.2" fill="none" opacity="0.9" /><path d="M170,240 Q210,250 240,280 Q190,270 170,240 Z" fill="url(%23leafGrad)" /><path d="M170,240 Q190,210 200,180 Q175,210 170,240 Z" fill="url(%23leafGradLight)" /><path d="M62,397 Q140,410 180,470" stroke="%2304221a" stroke-width="2.2" fill="none" opacity="0.9" /><path d="M180,470 Q220,480 250,510 Q200,500 180,470 Z" fill="url(%23leafGrad)" /></g></svg>');
    -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0) 100%);
    opacity: 0.08 !important;
    /* Detalle izquierdo sutil */
}

.about-us__decor--right {
    top: 0;
    right: -50px;
    width: 350px;
    height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 800"><defs><linearGradient id="cane1" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="%23052c21" /><stop offset="35%" stop-color="%230b4a27" /><stop offset="70%" stop-color="%23146d3e" /><stop offset="90%" stop-color="%230b4a27" /><stop offset="100%" stop-color="%2304221a" /></linearGradient><linearGradient id="cane2" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="%2304221a" /><stop offset="30%" stop-color="%23073F35" /><stop offset="60%" stop-color="%230e6955" /><stop offset="85%" stop-color="%23073F35" /><stop offset="100%" stop-color="%23021410" /></linearGradient><linearGradient id="leafGrad" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="%231b5e20" /><stop offset="50%" stop-color="%232e7d32" /><stop offset="100%" stop-color="%231b5e20" /></linearGradient><linearGradient id="leafGradLight" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="%232e7d32" /><stop offset="60%" stop-color="%234caf50" /><stop offset="100%" stop-color="%231b5e20" /></linearGradient></defs><g><g transform="translate(-10, 0) scale(0.9) rotate(-1, 150, 400)"><rect x="180" y="0" width="30" height="190" fill="url(%23cane2)" /><rect x="180" y="195" width="30" height="200" fill="url(%23cane2)" /><rect x="180" y="400" width="30" height="200" fill="url(%23cane2)" /><rect x="180" y="605" width="30" height="195" fill="url(%23cane2)" /><ellipse cx="195" cy="192.5" rx="16" ry="4" fill="%2304221a" /><ellipse cx="195" cy="192.5" rx="15" ry="2" fill="%230e6955" /><ellipse cx="195" cy="397.5" rx="16" ry="4" fill="%2304221a" /><ellipse cx="195" cy="397.5" rx="15" ry="2" fill="%230e6955" /><ellipse cx="195" cy="602.5" rx="16" ry="4" fill="%2304221a" /><ellipse cx="195" cy="602.5" rx="15" ry="2" fill="%230e6955" /></g><g><rect x="220" y="0" width="45" height="150" fill="url(%23cane1)" /><rect x="220" y="155" width="45" height="210" fill="url(%23cane1)" /><rect x="220" y="370" width="45" height="220" fill="url(%23cane1)" /><rect x="220" y="595" width="45" height="205" fill="url(%23cane1)" /><ellipse cx="242.5" cy="152.5" rx="24" ry="5" fill="%23021410" /><ellipse cx="242.5" cy="152.5" rx="22.5" ry="2.5" fill="%23146d3e" /><ellipse cx="242.5" cy="367.5" rx="24" ry="5" fill="%23021410" /><ellipse cx="242.5" cy="367.5" rx="22.5" ry="2.5" fill="%23146d3e" /><ellipse cx="242.5" cy="592.5" rx="24" ry="5" fill="%23021410" /><ellipse cx="242.5" cy="592.5" rx="22.5" ry="2.5" fill="%23146d3e" /></g><path d="M220,152 Q150,130 110,80" stroke="%2304221a" stroke-width="2.5" fill="none" opacity="0.9" /><path d="M110,80 Q70,70 40,40 Q90,50 110,80 Z" fill="url(%23leafGrad)" /><path d="M110,80 Q90,110 80,140 Q105,110 110,80 Z" fill="url(%23leafGradLight)" /><path d="M130,96 Q140,70 160,50 Q145,80 130,96 Z" fill="url(%23leafGrad)" /><path d="M220,367 Q140,360 90,300" stroke="%2304221a" stroke-width="2.5" fill="none" opacity="0.9" /><path d="M90,300 Q40,300 10,270 Q60,280 90,300 Z" fill="url(%23leafGrad)" /><path d="M90,300 Q70,330 50,360 Q80,330 90,300 Z" fill="url(%23leafGradLight)" /><path d="M110,315 Q115,280 135,260 Q125,295 110,315 Z" fill="url(%23leafGrad)" /><path d="M265,367 Q320,340 350,280" stroke="%2304221a" stroke-width="2" fill="none" opacity="0.8" /><path d="M350,280 Q390,290 410,260 Q370,270 350,280 Z" fill="url(%23leafGrad)" /><path d="M220,592 Q150,600 100,540" stroke="%2304221a" stroke-width="2.5" fill="none" opacity="0.9" /><path d="M100,540 Q50,540 20,500 Q70,510 100,540 Z" fill="url(%23leafGrad)" /><path d="M100,540 Q80,570 60,600 Q95,570 100,540 Z" fill="url(%23leafGradLight)" /></g></svg>');
    background-position: right center;
    -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to left, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0) 100%);
    opacity: 0.16 !important;
    /* Claramente visible y premium */
}

/* Animación Reveal */
.about-us .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.7s cubic-bezier(0.25, 0.8, 0.25, 1);
    will-change: opacity, transform;
}

/* Escalonado */
.about-us__media.reveal {
    transition-delay: 0.1s;
}

.about-us__content .reveal:nth-child(1) {
    transition-delay: 0.15s;
}

.about-us__content .reveal:nth-child(2) {
    transition-delay: 0.22s;
}

.about-us__content .reveal:nth-child(3) {
    transition-delay: 0.29s;
}

.about-us__content .reveal:nth-child(4) {
    transition-delay: 0.36s;
}

.about-us .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce) {
    .about-us .reveal {
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Responsive */
@media (max-width: 1024px) {
    .about-us {
        padding: 5.5rem 0;
    }

    .about-us__inner {
        gap: 3rem;
    }

    .about-us__content h2 {
        font-size: 2.75rem;
    }
}

@media (max-width: 992px) {
    .about-us__inner {
        flex-direction: column;
        gap: 4.5rem;
    }

    .about-us__media {
        width: 90%;
        max-width: 600px;
    }

    .about-us__content {
        width: 100%;
        align-items: center;
        text-align: center;
    }

    .about-us__line {
        margin: 1.25rem auto;
        background: linear-gradient(90deg, transparent, #C99A3B, transparent);
    }

    .about-us__text p {
        text-align: center;
    }
}

@media (max-width: 768px) {
    .about-us {
        padding: 4rem 0 5rem 0;
    }

    .about-us__media {
        width: 100% !important;
        max-width: 100% !important;
        display: flex;
        flex-direction: column;
        overflow: visible;
        box-shadow: none;
    }

    .about-us__image {
        box-shadow: 0 12px 30px rgba(15, 61, 46, 0.06);
    }

    .about-us__stats {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        width: 100% !important;
        margin: 1.25rem auto 0 !important;
        z-index: 3;
        display: grid !important;
        grid-template-columns: 1fr auto 1fr auto 1fr !important;
        align-items: center !important;
        padding: 1.25rem 1rem !important;
        box-shadow: 0 12px 30px rgba(7, 63, 53, 0.12) !important;
    }

    .about-us__stat-divider {
        width: 1px !important;
        height: 32px !important;
        margin: 0 !important;
    }

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

@media (max-width: 600px) {
    .about-us__stats {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
        padding: 24px 20px !important;
    }

    .about-us__stat-divider {
        width: 60% !important;
        height: 1px !important;
        margin: 0 auto !important;
        background-color: rgba(201, 154, 59, 0.2) !important;
    }

    .about-us__stat-value {
        font-size: 22px !important;
    }

    .about-us__stat-label {
        font-size: 10px !important;
    }

    .about-us__content h2 {
        font-size: 2.15rem;
    }
}

/* ==========================================================================
   WUISLER HORIZONTAL TICKER / MARQUEE
   ========================================================================== */
.wuisler-marquee {
    position: relative;
    width: 100%;
    background: #073F35;
    background: linear-gradient(135deg, #073F35 0%, #0F3D2E 100%);
    padding: 1.75rem 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    border-top: 1px solid rgba(201, 154, 59, 0.25);
    border-bottom: 1px solid rgba(201, 154, 59, 0.25);
    box-shadow: inset 0 10px 30px rgba(0, 0, 0, 0.15), inset 0 -10px 30px rgba(0, 0, 0, 0.15);
    z-index: 10;
}

/* Elegant left and right gradient fades */
.wuisler-marquee::before,
.wuisler-marquee::after {
    content: "";
    position: absolute;
    top: 0;
    width: 15%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.wuisler-marquee::before {
    left: 0;
    background: linear-gradient(90deg, #073F35 0%, transparent 100%);
}

.wuisler-marquee::after {
    right: 0;
    background: linear-gradient(-90deg, #0F3D2E 0%, transparent 100%);
}

.wuisler-marquee__track {
    display: flex;
    width: max-content;
    animation: wuislerTicker 34s linear infinite;
}

.wuisler-marquee:hover .wuisler-marquee__track {
    animation-play-state: paused;
}

.wuisler-marquee__content {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding-right: 2rem;
    white-space: nowrap;
}

.wuisler-marquee__content span {
    font-size: 2.2rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #FAF8F4;
    font-family: inherit;
    display: inline-block;
}

.wuisler-marquee__content span.separator {
    color: #C99A3B;
    font-size: 1.8rem;
    margin: 0 0.5rem;
    user-select: none;
}

/* Animations */
@keyframes wuislerTicker {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(-50%, 0, 0);
    }
}

/* Accessibility: respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .wuisler-marquee__track {
        animation: none !important;
        overflow-x: auto;
        width: 100%;
        justify-content: space-around;
    }

    .wuisler-marquee__content:last-child {
        display: none !important;
    }
}

/* Responsive design adjustments */
@media (max-width: 1024px) {
    .wuisler-marquee {
        padding: 1.5rem 0;
    }

    .wuisler-marquee__content span {
        font-size: 1.8rem;
    }

    .wuisler-marquee__content span.separator {
        font-size: 1.5rem;
    }
}

@media (max-width: 768px) {
    .wuisler-marquee {
        padding: 1.25rem 0;
    }

    .wuisler-marquee__content span {
        font-size: 1.4rem;
        letter-spacing: 0.08em;
    }

    .wuisler-marquee__content span.separator {
        font-size: 1.2rem;
    }
}



/* Services section con elementos de bambú */

.services {
    text-align: center;
    padding: 5rem 0;
    background-color: #f5f5f0;
    position: relative;
    overflow: hidden;
    width: 100%;
    /* Cambiado de 100vw */
    margin: 0;
    /* Elimina los márgenes negativos */
    box-sizing: border-box;
}

/* Decoración de bambú */
.services::before,
.services::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 1;
    opacity: 0.12;
    background-repeat: no-repeat;
    background-size: contain;
}

.services::before {
    top: 0;
    right: -40px;
    width: 200px;
    height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 800"><defs><linearGradient id="cane1" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="%23052c21" /><stop offset="35%" stop-color="%230b4a27" /><stop offset="70%" stop-color="%23146d3e" /><stop offset="90%" stop-color="%230b4a27" /><stop offset="100%" stop-color="%2304221a" /></linearGradient><linearGradient id="leafGrad" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="%231b5e20" /><stop offset="50%" stop-color="%232e7d32" /><stop offset="100%" stop-color="%231b5e20" /></linearGradient></defs><g><rect x="70" y="0" width="30" height="200" fill="url(%23cane1)" /><rect x="70" y="205" width="30" height="220" fill="url(%23cane1)" /><rect x="70" y="430" width="30" height="210" fill="url(%23cane1)" /><rect x="70" y="645" width="30" height="155" fill="url(%23cane1)" /><ellipse cx="85" cy="202.5" rx="16" ry="4" fill="%23021410" /><ellipse cx="85" cy="427.5" rx="16" ry="4" fill="%23021410" /><ellipse cx="85" cy="642.5" rx="16" ry="4" fill="%23021410" /><path d="M70,202 Q20,180 0,130" stroke="%2304221a" stroke-width="2" fill="none" opacity="0.8" /><path d="M0,130 Q30,140 50,110 Q40,140 0,130 Z" fill="url(%23leafGrad)" /></g></svg>');
    background-position: right top;
    -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to left, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 0) 100%);
}

.services::after {
    display: none !important;
}

.services>.container {
    width: 100%;
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}

.services h2 {
    font-size: 2.8rem;
    margin-bottom: 1rem;
    color: #0b4a27;
    position: relative;
    display: inline-block;
}

.services h2::after {
    content: "";
    display: block;
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, transparent, #0b4a27, transparent);
    margin: 10px auto 0;
}

.services p.intro {
    font-size: 1.2rem;
    margin-bottom: 3rem;
    color: #444;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.7;
}

.services-list {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
    justify-content: center;
    margin-bottom: 2rem;
}

/* Estilo base para los cuadros de servicio */
.service-item {
    position: relative;
    padding: 2.5rem 1.5rem;
    background-color: #fff;
    border: none;
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.35s ease;
    max-width: 320px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.service-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background-color: #0b4a27;
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.35s ease;
}

.service-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 25px rgba(11, 74, 39, 0.15);
}


.service-item:hover::before {
    transform: scaleY(1);
}

.service-icon-wrapper {
    width: 85px;
    height: 85px;
    border-radius: 50%;
    background-color: rgba(11, 74, 39, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
}

.service-item:hover .service-icon-wrapper {
    background-color: rgba(11, 74, 39, 0.15);
    transform: scale(1.1);
}

.service-icon {
    width: 45px;
    height: 45px;
    transition: transform 0.3s ease;
    fill: #0b4a27;
}

.service-item:hover .service-icon {
    transform: scale(1.1);
}

.service-item h3 {
    font-size: 1.5rem;
    margin: 0 0 1rem;
    color: #0b4a27;
    font-weight: 600;
    transition: color 0.3s ease;
}

.service-item p {
    font-size: 1rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.service-more-info {
    position: relative;
    bottom: auto;
    left: auto;
    right: auto;
    background: transparent;
    color: #0b4a27;
    padding: 0;
    border-radius: 0;
    opacity: 1;
    visibility: visible;
    transition: all 0.3s ease;
    margin-top: auto;
    display: inline-block;
}

.service-more-info a {
    color: #0b4a27;
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    position: relative;
    padding-bottom: 3px;
}

.service-more-info a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #0b4a27;
    transition: width 0.3s ease;
}

.service-item:hover .service-more-info a::after {
    width: 100%;
}

.service-more-info a i {
    margin-left: 5px;
    transition: transform 0.3s ease;
}

.service-item:hover .service-more-info a i {
    transform: translateX(5px);
}

.services .btn-all-services {
    display: inline-block;
    margin-top: 2.5rem;
    padding: 12px 28px;
    background-color: #0b4a27;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 2px solid #0b4a27;
}

.services .btn-all-services:hover {
    background-color: transparent;
    color: #0b4a27;
}

/* ---------- Reveal on scroll: Services ---------- */
/* Estados iniciales (ocultos) */
#services-section h2,
#services-section>.container>p,
#services-section .services-list .service-item {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s ease, transform .6s ease;
    will-change: opacity, transform;
}

/* Cuando la sección entra en viewport */
#services-section.is-inview h2,
#services-section.is-inview>.container>p {
    opacity: 1;
    transform: none;
}

/* Tarjetas con aparición escalonada */
#services-section.is-inview .services-list .service-item {
    opacity: 1;
    transform: none;
}

/* Delays escalonados para las 6 tarjetas */
#services-section .services-list .service-item:nth-child(1) {
    transition-delay: .10s;
}

#services-section .services-list .service-item:nth-child(2) {
    transition-delay: .18s;
}

#services-section .services-list .service-item:nth-child(3) {
    transition-delay: .26s;
}

#services-section .services-list .service-item:nth-child(4) {
    transition-delay: .34s;
}

#services-section .services-list .service-item:nth-child(5) {
    transition-delay: .42s;
}

#services-section .services-list .service-item:nth-child(6) {
    transition-delay: .50s;
}

/* Respeta la preferencia de reducir animaciones */
@media (prefers-reduced-motion: reduce) {

    #services-section h2,
    #services-section>.container>p,
    #services-section .services-list .service-item {
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Portfolio section con estética de bambú - ECO-LUXURY REDESIGN */
.portfolio {
    padding: 7rem 0;
    background-color: #FAF8F4;
    background-image: radial-gradient(circle at center, #FAF8F4 0%, #F5F1E6 100%);
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Organic background decors (subtle bamboo & leaves) */
.portfolio__decor {
    position: absolute;
    pointer-events: none;
    z-index: 1;
    opacity: 0.15;
    background-repeat: no-repeat;
    background-size: contain;
}

.portfolio__decor--left {
    top: 5%;
    left: -50px;
    width: 300px;
    height: 600px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 800"><defs><linearGradient id="cane1" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="%23052c21" /><stop offset="35%" stop-color="%230b4a27" /><stop offset="70%" stop-color="%23146d3e" /><stop offset="90%" stop-color="%230b4a27" /><stop offset="100%" stop-color="%2304221a" /></linearGradient><linearGradient id="cane2" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="%2304221a" /><stop offset="30%" stop-color="%23073F35" /><stop offset="60%" stop-color="%230e6955" /><stop offset="85%" stop-color="%23073F35" /><stop offset="100%" stop-color="%23021410" /></linearGradient><linearGradient id="leafGrad" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="%231b5e20" /><stop offset="50%" stop-color="%232e7d32" /><stop offset="100%" stop-color="%231b5e20" /></linearGradient><linearGradient id="leafGradLight" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="%232e7d32" /><stop offset="60%" stop-color="%234caf50" /><stop offset="100%" stop-color="%231b5e20" /></linearGradient></defs><g transform="translate(-10, 0)"><g transform="translate(60, 0) scale(0.85) rotate(1.5, 50, 400)"><rect x="30" y="0" width="28" height="210" fill="url(%23cane2)" /><rect x="30" y="215" width="28" height="200" fill="url(%23cane2)" /><rect x="30" y="420" width="28" height="205" fill="url(%23cane2)" /><rect x="30" y="630" width="28" height="170" fill="url(%23cane2)" /><ellipse cx="44" cy="212.5" rx="15" ry="4" fill="%23021410" /><ellipse cx="44" cy="417.5" rx="15" ry="4" fill="%23021410" /><ellipse cx="44" cy="627.5" rx="15" ry="4" fill="%23021410" /></g><g transform="rotate(-1, 50, 400)"><rect x="20" y="0" width="42" height="170" fill="url(%23cane1)" /><rect x="20" y="175" width="42" height="220" fill="url(%23cane1)" /><rect x="20" y="400" width="42" height="210" fill="url(%23cane1)" /><rect x="20" y="615" width="42" height="185" fill="url(%23cane1)" /><ellipse cx="41" cy="172.5" rx="22" ry="5" fill="%23021410" /><ellipse cx="41" cy="172.5" rx="20.5" ry="2.5" fill="%23146d3e" /><ellipse cx="41" cy="397.5" rx="22" ry="5" fill="%23021410" /><ellipse cx="41" cy="397.5" rx="20.5" ry="2.5" fill="%23146d3e" /><ellipse cx="41" cy="612.5" rx="22" ry="5" fill="%23021410" /><ellipse cx="41" cy="612.5" rx="20.5" ry="2.5" fill="%23146d3e" /></g><path d="M62,172 Q130,190 170,240" stroke="%2304221a" stroke-width="2.2" fill="none" opacity="0.9" /><path d="M170,240 Q210,250 240,280 Q190,270 170,240 Z" fill="url(%23leafGrad)" /><path d="M170,240 Q190,210 200,180 Q175,210 170,240 Z" fill="url(%23leafGradLight)" /><path d="M62,397 Q140,410 180,470" stroke="%2304221a" stroke-width="2.2" fill="none" opacity="0.9" /><path d="M180,470 Q220,480 250,510 Q200,500 180,470 Z" fill="url(%23leafGrad)" /></g></svg>');
    -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0) 100%);
    opacity: 0.08 !important;
    /* Detalle izquierdo sutil */
}

.portfolio__decor--right {
    top: 0;
    right: -50px;
    width: 350px;
    height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 800"><defs><linearGradient id="cane1" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="%23052c21" /><stop offset="35%" stop-color="%230b4a27" /><stop offset="70%" stop-color="%23146d3e" /><stop offset="90%" stop-color="%230b4a27" /><stop offset="100%" stop-color="%2304221a" /></linearGradient><linearGradient id="cane2" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="%2304221a" /><stop offset="30%" stop-color="%23073F35" /><stop offset="60%" stop-color="%230e6955" /><stop offset="85%" stop-color="%23073F35" /><stop offset="100%" stop-color="%23021410" /></linearGradient><linearGradient id="leafGrad" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="%231b5e20" /><stop offset="50%" stop-color="%232e7d32" /><stop offset="100%" stop-color="%231b5e20" /></linearGradient><linearGradient id="leafGradLight" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="%232e7d32" /><stop offset="60%" stop-color="%234caf50" /><stop offset="100%" stop-color="%231b5e20" /></linearGradient></defs><g><g transform="translate(-10, 0) scale(0.9) rotate(-1, 150, 400)"><rect x="180" y="0" width="30" height="190" fill="url(%23cane2)" /><rect x="180" y="195" width="30" height="200" fill="url(%23cane2)" /><rect x="180" y="400" width="30" height="200" fill="url(%23cane2)" /><rect x="180" y="605" width="30" height="195" fill="url(%23cane2)" /><ellipse cx="195" cy="192.5" rx="16" ry="4" fill="%2304221a" /><ellipse cx="195" cy="192.5" rx="15" ry="2" fill="%230e6955" /><ellipse cx="195" cy="397.5" rx="16" ry="4" fill="%2304221a" /><ellipse cx="195" cy="397.5" rx="15" ry="2" fill="%230e6955" /><ellipse cx="195" cy="602.5" rx="16" ry="4" fill="%2304221a" /><ellipse cx="195" cy="602.5" rx="15" ry="2" fill="%230e6955" /></g><g><rect x="220" y="0" width="45" height="150" fill="url(%23cane1)" /><rect x="220" y="155" width="45" height="210" fill="url(%23cane1)" /><rect x="220" y="370" width="45" height="220" fill="url(%23cane1)" /><rect x="220" y="595" width="45" height="205" fill="url(%23cane1)" /><ellipse cx="242.5" cy="152.5" rx="24" ry="5" fill="%23021410" /><ellipse cx="242.5" cy="152.5" rx="22.5" ry="2.5" fill="%23146d3e" /><ellipse cx="242.5" cy="367.5" rx="24" ry="5" fill="%23021410" /><ellipse cx="242.5" cy="367.5" rx="22.5" ry="2.5" fill="%23146d3e" /><ellipse cx="242.5" cy="592.5" rx="24" ry="5" fill="%23021410" /><ellipse cx="242.5" cy="592.5" rx="22.5" ry="2.5" fill="%23146d3e" /></g><path d="M220,152 Q150,130 110,80" stroke="%2304221a" stroke-width="2.5" fill="none" opacity="0.9" /><path d="M110,80 Q70,70 40,40 Q90,50 110,80 Z" fill="url(%23leafGrad)" /><path d="M110,80 Q90,110 80,140 Q105,110 110,80 Z" fill="url(%23leafGradLight)" /><path d="M130,96 Q140,70 160,50 Q145,80 130,96 Z" fill="url(%23leafGrad)" /><path d="M220,367 Q140,360 90,300" stroke="%2304221a" stroke-width="2.5" fill="none" opacity="0.9" /><path d="M90,300 Q40,300 10,270 Q60,280 90,300 Z" fill="url(%23leafGrad)" /><path d="M90,300 Q70,330 50,360 Q80,330 90,300 Z" fill="url(%23leafGradLight)" /><path d="M110,315 Q115,280 135,260 Q125,295 110,315 Z" fill="url(%23leafGrad)" /><path d="M265,367 Q320,340 350,280" stroke="%2304221a" stroke-width="2" fill="none" opacity="0.8" /><path d="M350,280 Q390,290 410,260 Q370,270 350,280 Z" fill="url(%23leafGrad)" /><path d="M220,592 Q150,600 100,540" stroke="%2304221a" stroke-width="2.5" fill="none" opacity="0.9" /><path d="M100,540 Q50,540 20,500 Q70,510 100,540 Z" fill="url(%23leafGrad)" /><path d="M100,540 Q80,570 60,600 Q95,570 100,540 Z" fill="url(%23leafGradLight)" /></g></svg>');
    background-position: right center;
    -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to left, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 100%);
    opacity: 0.16 !important;
    /* Claramente visible y premium */
}

.portfolio .container {
    position: relative;
    z-index: 2;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Elegant Portfolio Header */
.portfolio-eyebrow {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #C99A3B;
    margin-bottom: 0.75rem;
}

.portfolio h2 {
    font-size: 3.2rem;
    margin: 0;
    color: #073F35;
    font-weight: 800;
    line-height: 1.2;
}

.portfolio-heading-decor {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin: 1.5rem 0 2rem;
}

.portfolio-heading-decor__line {
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201, 154, 59, 0.6), transparent);
}

.portfolio-heading-decor__icon {
    font-size: 1.2rem;
    color: #C99A3B;
    user-select: none;
}

.portfolio p {
    font-size: 1.15rem;
    color: #555;
    margin-bottom: 2rem;
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.8;
}

/* Editorial Statement callout block */
.portfolio-statement {
    max-width: 850px;
    margin: 0 auto 4rem;
    padding: 1.8rem 2.5rem;
    border-left: 2px solid #C99A3B;
    border-right: 2px solid #C99A3B;
    background-color: rgba(201, 154, 59, 0.04);
    border-radius: 12px;
}

.portfolio-statement p {
    font-size: 1.3rem;
    font-style: italic;
    font-weight: 500;
    color: #0F3D2E;
    line-height: 1.7;
    margin: 0;
    letter-spacing: 0.01em;
}

/* Redesigned grid to feel extremely premium */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 3.5rem 3rem;
    margin-bottom: 2rem;
}

/* Renders 4 columns on large displays if needed */
@media (min-width: 1400px) {
    .portfolio-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Card item */
.portfolio-item {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(15, 61, 46, 0.04);
    overflow: hidden;
    transition: transform 0.45s cubic-bezier(0.165, 0.84, 0.44, 1),
        box-shadow 0.45s cubic-bezier(0.165, 0.84, 0.44, 1),
        border-color 0.45s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    border: 1px solid rgba(15, 61, 46, 0.05);
    border-bottom: 4px solid transparent;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.portfolio-item:hover {
    transform: translateY(-12px);
    box-shadow: 0 20px 40px rgba(15, 61, 46, 0.1);
    border-bottom-color: #C99A3B;
    border-color: rgba(201, 154, 59, 0.2);
}

/* Carousel and image styling */
.image-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    aspect-ratio: 16/10;
    border-radius: 20px 20px 0 0;
}

.portfolio-carousel {
    position: relative;
    width: 100%;
    height: 100%;
    margin-bottom: 0;
    border-radius: 0;
    box-shadow: none;
}

.portfolio-carousel-inner {
    position: relative;
    width: 100%;
    height: 100%;
    padding-bottom: 0;
    /* Aspect ratio handled by parent */
    overflow: hidden;
}

.portfolio-carousel-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    display: none;
    transform: scale(1.04);
}

.portfolio-carousel-item.active {
    opacity: 1;
    z-index: 10;
    display: block;
    transform: scale(1);
}

.portfolio-carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 0;
}

/* Semi-opaque refined carousel controls */
.portfolio-carousel-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    background: rgba(255, 255, 255, 0.85);
    border: none;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    color: #073F35;
}

.portfolio-carousel-control:hover {
    background: #073F35;
    color: #FAF8F4;
    box-shadow: 0 6px 16px rgba(7, 63, 53, 0.2);
}

.portfolio-prev {
    left: 12px;
}

.portfolio-next {
    right: 12px;
}

.portfolio-carousel-indicators {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 20;
}

.portfolio-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.portfolio-indicator.active {
    background: #C99A3B;
    transform: scale(1.25);
    box-shadow: 0 2px 5px rgba(201, 154, 59, 0.4);
}

/* Card details styling */
.portfolio-info {
    padding: 2.2rem;
    text-align: left;
    background: #ffffff;
    position: relative;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.portfolio-info h3 {
    font-size: 1.45rem;
    color: #073F35;
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.3;
    transition: color 0.3s ease;
}

.portfolio-item:hover .portfolio-info h3 {
    color: #C99A3B;
}

.portfolio-info p {
    font-size: 0.98rem;
    color: #666;
    line-height: 1.7;
    margin-bottom: 0;
    font-weight: 400;
}

.portfolio-info p strong {
    color: #0F3D2E;
    font-weight: 600;
}

/* Reveal-on-scroll animations triggered by is-inview */
#proyectos h2,
#proyectos .portfolio-eyebrow,
#proyectos .portfolio-heading-decor,
#proyectos .portfolio-statement,
#proyectos .container>p,
#proyectos .portfolio-grid .portfolio-item {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .8s cubic-bezier(0.165, 0.84, 0.44, 1), transform .8s cubic-bezier(0.165, 0.84, 0.44, 1);
    will-change: opacity, transform;
}

#proyectos.is-inview h2,
#proyectos.is-inview .portfolio-eyebrow,
#proyectos.is-inview .portfolio-heading-decor,
#proyectos.is-inview .portfolio-statement,
#proyectos.is-inview .container>p {
    opacity: 1;
    transform: none;
}

#proyectos.is-inview .portfolio-grid .portfolio-item {
    opacity: 1;
    transform: none;
}

/* Stagger delays for grid items */
#proyectos.is-inview .portfolio-grid .portfolio-item:nth-child(1) {
    transition-delay: .10s;
}

#proyectos.is-inview .portfolio-grid .portfolio-item:nth-child(2) {
    transition-delay: .18s;
}

#proyectos.is-inview .portfolio-grid .portfolio-item:nth-child(3) {
    transition-delay: .26s;
}

#proyectos.is-inview .portfolio-grid .portfolio-item:nth-child(4) {
    transition-delay: .34s;
}

#proyectos.is-inview .portfolio-grid .portfolio-item:nth-child(5) {
    transition-delay: .42s;
}

#proyectos.is-inview .portfolio-grid .portfolio-item:nth-child(6) {
    transition-delay: .50s;
}

#proyectos.is-inview .portfolio-grid .portfolio-item:nth-child(7) {
    transition-delay: .58s;
}

#proyectos.is-inview .portfolio-grid .portfolio-item:nth-child(8) {
    transition-delay: .66s;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .portfolio {
        padding: 5rem 0;
    }

    .portfolio h2 {
        font-size: 2.8rem;
    }

    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5rem;
    }
}

@media (max-width: 768px) {
    .portfolio {
        padding: 4rem 0;
    }

    .portfolio h2 {
        font-size: 2.2rem;
    }

    .portfolio p {
        font-size: 1.05rem;
        margin-bottom: 1.5rem;
    }

    .portfolio-statement {
        padding: 1.25rem 1.75rem;
        margin-bottom: 2.5rem;
    }

    .portfolio-statement p {
        font-size: 1.15rem;
    }

    .portfolio-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
        gap: 2.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {

    #proyectos h2,
    #proyectos .portfolio-eyebrow,
    #proyectos .portfolio-heading-decor,
    #proyectos .portfolio-statement,
    #proyectos .container>p,
    #proyectos .portfolio-grid .portfolio-item {
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Testimonios */
.testimonials {
    padding: 4rem 0;
    background: #f9f9f9;
    text-align: center;
}

.testimonials h2 {
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 1rem;
}

.testimonials p {
    font-size: 1rem;
    color: #555;
    margin-bottom: 2rem;
}

.video-container {
    margin-bottom: 2rem;
}

.video-container iframe {
    width: 100%;
    max-width: 800px;
    height: 450px;
    margin: 0 auto;
}

.testimonial-list {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.testimonial-item {
    background: #fff;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    text-align: left;
}

.testimonial-item p {
    font-size: 1rem;
    color: #555;
    margin-bottom: 1rem;
}

.testimonial-item h3 {
    font-size: 1.25rem;
    color: #333;
    margin-bottom: 0.5rem;
}

.testimonial-item p:last-child {
    font-size: 0.9rem;
    color: #777;
}

/* Blog con elementos de bambú - ECO-LUXURY EDITORIAL REDESIGN */
.blog {
    padding: 7rem 0;
    background-color: #FAF8F4;
    background-image: radial-gradient(circle at center, #FAF8F4 0%, #F5F1E6 100%);
    text-align: center;
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(201, 154, 59, 0.15);
}

/* Subtle leaf/bamboo background decors */
.blog__decor {
    position: absolute;
    pointer-events: none;
    z-index: 1;
    opacity: 0.10;
    background-repeat: no-repeat;
    background-size: contain;
}

.blog__decor--left {
    display: none !important;
}

.blog__decor--right {
    top: 0;
    right: -50px;
    width: 350px;
    height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 800"><defs><linearGradient id="cane1" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="%23052c21" /><stop offset="35%" stop-color="%230b4a27" /><stop offset="70%" stop-color="%23146d3e" /><stop offset="90%" stop-color="%230b4a27" /><stop offset="100%" stop-color="%2304221a" /></linearGradient><linearGradient id="cane2" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="%2304221a" /><stop offset="30%" stop-color="%23073F35" /><stop offset="60%" stop-color="%230e6955" /><stop offset="85%" stop-color="%23073F35" /><stop offset="100%" stop-color="%23021410" /></linearGradient><linearGradient id="leafGrad" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="%231b5e20" /><stop offset="50%" stop-color="%232e7d32" /><stop offset="100%" stop-color="%231b5e20" /></linearGradient><linearGradient id="leafGradLight" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="%232e7d32" /><stop offset="60%" stop-color="%234caf50" /><stop offset="100%" stop-color="%231b5e20" /></linearGradient></defs><g><g transform="translate(-10, 0) scale(0.9) rotate(-1, 150, 400)"><rect x="180" y="0" width="30" height="190" fill="url(%23cane2)" /><rect x="180" y="195" width="30" height="200" fill="url(%23cane2)" /><rect x="180" y="400" width="30" height="200" fill="url(%23cane2)" /><rect x="180" y="605" width="30" height="195" fill="url(%23cane2)" /><ellipse cx="195" cy="192.5" rx="16" ry="4" fill="%2304221a" /><ellipse cx="195" cy="192.5" rx="15" ry="2" fill="%230e6955" /><ellipse cx="195" cy="397.5" rx="16" ry="4" fill="%2304221a" /><ellipse cx="195" cy="397.5" rx="15" ry="2" fill="%230e6955" /><ellipse cx="195" cy="602.5" rx="16" ry="4" fill="%2304221a" /><ellipse cx="195" cy="602.5" rx="15" ry="2" fill="%230e6955" /></g><g><rect x="220" y="0" width="45" height="150" fill="url(%23cane1)" /><rect x="220" y="155" width="45" height="210" fill="url(%23cane1)" /><rect x="220" y="370" width="45" height="220" fill="url(%23cane1)" /><rect x="220" y="595" width="45" height="205" fill="url(%23cane1)" /><ellipse cx="242.5" cy="152.5" rx="24" ry="5" fill="%23021410" /><ellipse cx="242.5" cy="152.5" rx="22.5" ry="2.5" fill="%23146d3e" /><ellipse cx="242.5" cy="367.5" rx="24" ry="5" fill="%23021410" /><ellipse cx="242.5" cy="367.5" rx="22.5" ry="2.5" fill="%23146d3e" /><ellipse cx="242.5" cy="592.5" rx="24" ry="5" fill="%23021410" /><ellipse cx="242.5" cy="592.5" rx="22.5" ry="2.5" fill="%23146d3e" /></g><path d="M220,152 Q150,130 110,80" stroke="%2304221a" stroke-width="2.5" fill="none" opacity="0.9" /><path d="M110,80 Q70,70 40,40 Q90,50 110,80 Z" fill="url(%23leafGrad)" /><path d="M110,80 Q90,110 80,140 Q105,110 110,80 Z" fill="url(%23leafGradLight)" /><path d="M130,96 Q140,70 160,50 Q145,80 130,96 Z" fill="url(%23leafGrad)" /><path d="M220,367 Q140,360 90,300" stroke="%2304221a" stroke-width="2.5" fill="none" opacity="0.9" /><path d="M90,300 Q40,300 10,270 Q60,280 90,300 Z" fill="url(%23leafGrad)" /><path d="M90,300 Q70,330 50,360 Q80,330 90,300 Z" fill="url(%23leafGradLight)" /><path d="M110,315 Q115,280 135,260 Q125,295 110,315 Z" fill="url(%23leafGrad)" /><path d="M265,367 Q320,340 350,280" stroke="%2304221a" stroke-width="2" fill="none" opacity="0.8" /><path d="M350,280 Q390,290 410,260 Q370,270 350,280 Z" fill="url(%23leafGrad)" /><path d="M220,592 Q150,600 100,540" stroke="%2304221a" stroke-width="2.5" fill="none" opacity="0.9" /><path d="M100,540 Q50,540 20,500 Q70,510 100,540 Z" fill="url(%23leafGrad)" /><path d="M100,540 Q80,570 60,600 Q95,570 100,540 Z" fill="url(%23leafGradLight)" /></g></svg>');
    background-position: right center;
    -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to left, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 100%);
}

.blog .container {
    position: relative;
    z-index: 2;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Elegant Header */
.blog__eyebrow {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #C99A3B;
    margin-bottom: 0.75rem;
}

.blog__heading {
    font-size: 3.2rem;
    margin: 0;
    color: #073F35;
    font-weight: 800;
    line-height: 1.2;
    display: inline-block;
}

.blog-heading-decor {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin: 1.5rem 0 2rem;
}

.blog-heading-decor__line {
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201, 154, 59, 0.6), transparent);
}

.blog-heading-decor__icon {
    font-size: 1.2rem;
    color: #C99A3B;
    user-select: none;
}

.blog__intro {
    font-size: 1.15rem;
    color: #555;
    margin-bottom: 4rem;
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.8;
}

/* Refactored blog-grid layout: 2 elegant columns on desktop */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
    margin-bottom: 2rem;
}

/* Blog Article Cards */
.blog-item {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(15, 61, 46, 0.05);
    border-bottom: 4px solid transparent;
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(15, 61, 46, 0.04);
    padding: 2.5rem;
    text-align: left;
    display: flex;
    gap: 1.75rem;
    align-items: flex-start;
    transition: transform 0.45s cubic-bezier(0.165, 0.84, 0.44, 1),
        box-shadow 0.45s cubic-bezier(0.165, 0.84, 0.44, 1),
        border-color 0.45s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
}

.blog-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(15, 61, 46, 0.08);
    border-color: rgba(201, 154, 59, 0.2);
    border-bottom-color: #C99A3B;
}

/* Card stylized number badge */
.blog-item__badge {
    font-size: 1.8rem;
    font-weight: 800;
    color: #C99A3B;
    background: rgba(201, 154, 59, 0.08);
    width: 50px;
    height: 50px;
    min-width: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    user-select: none;
}

.blog-item__content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.blog-item h3 {
    font-size: 1.4rem;
    font-weight: 700;
    color: #073F35;
    line-height: 1.35;
    margin: 0 0 1rem 0;
}

.blog-item h3 a {
    color: #073F35;
    text-decoration: none;
    transition: color 0.3s ease;
}

.blog-item:hover h3 a {
    color: #C99A3B;
}

.blog-item p {
    font-size: 0.98rem;
    color: #666;
    line-height: 1.7;
    margin: 0 0 1.5rem 0;
    text-align: left;
}

/* Sleek interactive read-more arrow */
.blog-item__arrow {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(15, 61, 46, 0.05);
    color: #073F35;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    align-self: flex-start;
    margin-top: auto;
    text-decoration: none;
}

.blog-item__arrow-icon {
    font-size: 16px;
    font-weight: bold;
    transition: transform 0.3s ease;
}

.blog-item:hover .blog-item__arrow {
    background: #073F35;
    color: #FAF8F4;
    box-shadow: 0 4px 12px rgba(7, 63, 53, 0.15);
}

.blog-item:hover .blog-item__arrow-icon {
    transform: translateX(3px);
}

/* Suttle bamboo divider style */
.bamboo-divider {
    height: 3px;
    width: 100%;
    background: linear-gradient(90deg, transparent, rgba(201, 154, 59, 0.3), transparent);
    margin: 0;
}

/* ---------- Reveal on scroll: Blog ---------- */
#blog-section h2,
#blog-section .blog__eyebrow,
#blog-section .blog-heading-decor,
#blog-section .blog__intro,
#blog-section .blog-grid .blog-item {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .8s cubic-bezier(0.165, 0.84, 0.44, 1), transform .8s cubic-bezier(0.165, 0.84, 0.44, 1);
    will-change: opacity, transform;
}

#blog-section.is-inview h2,
#blog-section.is-inview .blog__eyebrow,
#blog-section.is-inview .blog-heading-decor,
#blog-section.is-inview .blog__intro {
    opacity: 1;
    transform: none;
}

#blog-section.is-inview .blog-grid .blog-item {
    opacity: 1;
    transform: none;
}

/* Delays escalonados para las 4 tarjetas */
#blog-section.is-inview .blog-grid .blog-item:nth-child(1) {
    transition-delay: .10s;
}

#blog-section.is-inview .blog-grid .blog-item:nth-child(2) {
    transition-delay: .18s;
}

#blog-section.is-inview .blog-grid .blog-item:nth-child(3) {
    transition-delay: .26s;
}

#blog-section.is-inview .blog-grid .blog-item:nth-child(4) {
    transition-delay: .34s;
}

/* Respeta la preferencia del usuario de reducir animaciones */
@media (prefers-reduced-motion: reduce) {

    #blog-section h2,
    #blog-section .blog__eyebrow,
    #blog-section .blog-heading-decor,
    #blog-section .blog__intro,
    #blog-section .blog-grid .blog-item {
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Responsive design */
@media (max-width: 1024px) {
    .blog {
        padding: 5rem 0;
    }

    .blog__heading {
        font-size: 2.8rem;
    }

    .blog-grid {
        gap: 2rem;
    }

    .blog-item {
        padding: 2rem;
    }
}

@media (max-width: 768px) {
    .blog {
        padding: 4rem 0;
    }

    .blog__heading {
        font-size: 2.2rem;
    }

    .blog__intro {
        font-size: 1.05rem;
        margin-bottom: 2.5rem;
    }

    .blog-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
        max-width: 550px;
        margin-left: auto;
        margin-right: auto;
    }

    .blog-item {
        padding: 1.75rem;
        gap: 1.25rem;
    }

    .blog-item__badge {
        width: 40px;
        height: 40px;
        min-width: 40px;
        font-size: 1.4rem;
        border-radius: 8px;
    }
}

/* Footer Estilizado con estética de bambú - ECO-LUXURY REDESIGN */
.footer {
    background-color: #073F35;
    background-image: linear-gradient(135deg, #073F35 0%, #042B25 100%);
    color: #FAF8F4;
    padding: 6rem 0 0;
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(201, 154, 59, 0.35);
    font-family: inherit;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Subtle corner vector leaf/bamboo decors */
.footer__decor {
    position: absolute;
    width: 250px;
    height: 400px;
    opacity: 0.03;
    pointer-events: none;
    z-index: 1;
    background-repeat: no-repeat;
    background-size: contain;
}

.footer__decor--left {
    bottom: -100px;
    left: -50px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 400"><path d="M10,0 Q30,100 10,200 T10,400" stroke="%23FAF8F4" stroke-width="3" fill="none"/><path d="M40,50 Q60,150 40,250 T40,450" stroke="%23FAF8F4" stroke-width="2" fill="none"/><path d="M10,80 Q-20,60 10,40 Q30,60 10,80 Z" fill="%23FAF8F4"/></svg>');
}

.footer__decor--right {
    top: -50px;
    right: -50px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 400"><path d="M190,0 Q170,100 190,200 T190,400" stroke="%23FAF8F4" stroke-width="3" fill="none"/><path d="M160,50 Q140,150 160,250 T160,450" stroke="%23FAF8F4" stroke-width="2" fill="none"/><path d="M190,120 Q220,100 190,80 Q160,100 190,120 Z" fill="%23FAF8F4"/></svg>');
}

.footer .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 2;
}

/* Three elegant columns layout on desktop */
.footer__inner {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 4.5rem;
    align-items: flex-start;
    margin-bottom: 4rem;
}

/* Columna 1: Brand & Tagline */
.footer__brand {
    text-align: left;
}

.footer__logo-link {
    display: inline-block;
}

.footer__logo {
    max-height: 65px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1));
}

.footer__tagline {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #ffffff;
    margin: 1.5rem 0 0 0;
    max-width: 320px;
    font-style: italic;
    font-weight: 400;
}

/* Column general titles */
.footer__title {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #FAF8F4;
    margin: 0 0 2.2rem 0;
    position: relative;
    display: inline-block;
}

.footer__title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 35px;
    height: 2px;
    background-color: #C99A3B;
}

/* Columna 2: Quick Links */
.footer__nav {
    text-align: left;
}

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

.footer__nav ul li {
    margin-bottom: 14px;
}

.footer__nav ul li a {
    text-decoration: none;
    color: rgba(250, 248, 244, 0.8);
    font-size: 1.02rem;
    transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
    display: inline-block;
    position: relative;
    padding-left: 16px;
    font-weight: 500;
}

.footer__nav ul li a::before {
    content: "›";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
    transition: transform 0.35s ease;
    color: #C99A3B;
}

.footer__nav ul li a:hover {
    color: #C99A3B;
    transform: translateX(6px);
}

.footer__nav ul li a:hover::before {
    transform: translateY(-50%) scale(1.3);
}

/* Columna 3: Social & Contact */
.footer__social-contact {
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer__social {
    display: flex;
    gap: 1.25rem;
    margin-bottom: 2rem;
    justify-content: flex-start;
}

.footer__social .social-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: rgba(250, 248, 244, 0.05);
    border: 1px solid rgba(250, 248, 244, 0.1);
    color: #FAF8F4;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
    text-decoration: none;
}

.footer__social .social-icon:hover {
    background-color: #C99A3B;
    border-color: #C99A3B;
    color: #073F35;
    transform: translateY(-6px);
    box-shadow: 0 8px 20px rgba(201, 154, 59, 0.3);
}

/* WhatsApp Button styling */
.footer__whatsapp-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background-color: #C99A3B;
    color: #073F35;
    padding: 12px 26px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.98rem;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(201, 154, 59, 0.25);
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    border: 1px solid #C99A3B;
}

.footer__whatsapp-btn i {
    font-size: 1.2rem;
}

.footer__whatsapp-btn:hover {
    background-color: transparent;
    color: #C99A3B;
    box-shadow: none;
}

/* Bottom copyright area */
.footer__bottom {
    font-size: 0.95rem;
    border-top: 1px solid rgba(250, 248, 244, 0.12);
    margin-top: 3.5rem;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
    margin-bottom: 0 !important;
    text-align: center;
    background-color: #042B25;
    /* Ensure full green coverage to page bottom */
}

.footer__bottom p {
    margin: 0 auto;
    font-weight: 400;
    color: rgba(250, 248, 244, 0.75);
    letter-spacing: 0.03em;
    text-align: center;
    width: 100%;
}

.footer__credit {
    font-size: 0.85rem;
    color: rgba(250, 248, 244, 0.55);
    margin-top: 0.6rem !important;
    margin-bottom: 0 !important;
    font-weight: 400;
    letter-spacing: 0.05em;
    text-align: center;
    width: 100%;
    display: block;
}

.footer__credit a {
    color: rgba(250, 248, 244, 0.55);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
    border-bottom: 1px dotted rgba(250, 248, 244, 0.3);
    padding-bottom: 1px;
}

.footer__credit a:hover {
    color: #C99A3B;
    border-bottom-color: #C99A3B;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .footer {
        padding: 5rem 0 2.5rem;
    }

    .footer__inner {
        grid-template-columns: repeat(3, 1fr);
        gap: 2.5rem;
    }
}

@media (max-width: 768px) {
    .footer {
        padding: 4rem 0 2rem;
    }

    .footer__inner {
        grid-template-columns: 1fr;
        gap: 3rem;
        text-align: center;
    }

    .footer__brand,
    .footer__nav,
    .footer__social-contact {
        text-align: center;
        align-items: center;
    }

    .footer__tagline {
        margin-left: auto;
        margin-right: auto;
    }

    .footer__title::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .footer__nav ul li a {
        padding-left: 0;
    }

    .footer__nav ul li a::before {
        display: none;
    }

    .footer__social {
        justify-content: center;
    }
}

/* Estilos generales para la página de contacto */
.contact-form {
    padding: 4rem 1rem;
    background-color: #f9f9f9;
    text-align: center;
}

.contact-form h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.contact-form p {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    color: #555;
}

.form {
    display: flex;
    flex-direction: column;
    max-width: 600px;
    margin: 0 auto;
    gap: 1rem;
}

.form label {
    font-size: 1rem;
    color: #333;
}

.form input,
.form textarea {
    padding: 0.75rem;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 100%;
}

.form button {
    background: #ffcc00;
    color: #000;
    padding: 0.75rem 1.5rem;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    border: none;
    transition: background 0.3s ease;
}

.form button:hover {
    background: #e6b800;
}

/* Para dispositivos móviles */
@media (max-width: 768px) {
    .contact-form {
        padding: 2rem 0;
        box-sizing: border-box;
        width: 100%;
        text-align: center;
    }

    .contact-form .container {
        padding-left: 1rem;
        padding-right: 1rem;
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        box-sizing: border-box;
    }

    .form {
        width: 100%;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }

    .form input,
    .form textarea,
    .form .g-recaptcha,
    .form button {
        width: 100%;
        box-sizing: border-box;
        max-width: 100%;
    }


    .g-recaptcha {
        transform: scale(0.85);
        transform-origin: center;
        margin: 0 auto;
        display: flex;
        justify-content: center;
    }


    section,
    .container,
    div {
        box-sizing: border-box;
    }
}


/* Información de contacto */
.contact-info {
    padding: 4rem 1rem;
    background-color: #f4f4f4;
    text-align: center;
}

.contact-info h3 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.contact-info p {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    color: #555;
}

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

.contact-details li {
    font-size: 1.2rem;
    margin-bottom: 0.8rem;
}

.contact-details a {
    color: #0b4a27;
    text-decoration: none;
}

.contact-details a:hover {
    text-decoration: underline;
}

/* Estilo de los íconos de redes sociales */
.social-media {
    margin-top: 1.5rem;
}

.social-media a {
    margin: 0 10px;
    display: inline-block;
}

.social-media img {
    width: 40px;
    height: 40px;
    transition: transform 0.3s ease;
}

.social-media img:hover {
    transform: scale(1.1);
}

/* Estilos generales */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #ffffff;
    color: #333333;
}

header,
footer {
    background-color: #222222;
    color: #ffffff;
    text-align: center;
    padding: 15px 10px;
}

header h1,
footer p {
    margin: 0;
    font-size: 1.5rem;
}

footer p {
    font-size: 1rem;
}

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

h2 {
    text-align: center;
    margin-bottom: 20px;
}




/* Galeria */


body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
    background-color: #f9f9f9;
    line-height: 1.6;
}



.header .menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.header .logo {
    font-size: 1.5rem;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
}

.header .navbar ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 1.5rem;
}

.header .navbar a {
    color: #fff;
    text-decoration: none;
    font-size: 1rem;
}

.header .navbar a:hover {
    color: #f0a500;
}

/* Contenedor principal */
.container {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 1rem;
    text-align: center;
}

.container h2 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
    color: #2a2a2a;
}

/* Galería */
/* Estilo específico para la sección de galería de obras */
.gallery-section {
    padding: 40px 0;
    background-color: #f9f9f9;
}

.gallery-section h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 40px;
    font-weight: bold;
    color: #333;
}

.gallery-section h3 {
    text-align: center;
    font-size: 1.8rem;
    margin-bottom: 20px;
    color: #444;
}

/* GRID ESTILO TETRIS */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-auto-rows: 250px;
    /* Altura fija */
    gap: 15px;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease-in-out;
}

/* Animación hover */
.gallery-item:hover img {
    transform: scale(1.05);
}

/* Estilo tipo Tetris */
.gallery-item:nth-child(1) {
    grid-row: span 2;
}

.gallery-item:nth-child(3) {
    grid-row: span 2;
}

/* Para pantallas pequeñas (móvil) */
@media (max-width: 768px) {
    .gallery {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }

    .gallery-item:nth-child(1),
    .gallery-item:nth-child(3) {
        grid-row: span 1;
        /* Quita el efecto tetris */
    }
}


/* Servicios */


/* Service - Design  */

/* Header */
.design-page-header {
    background: none;
    text-align: center;
    padding: 2rem 0;
    /* Reducir padding para evitar que ocupe mucho espacio */
    background-size: cover;
    background-position: center;
    background-attachment: scroll;
    position: relative;
    /* Cambiar a relative para evitar que se sobreponga sobre otros elementos */

}

.design-page-header-content {
    background: rgba(0, 0, 0, 0.7);
    display: inline-block;
    padding: 2rem 3rem;
    border-radius: 15px;
    max-width: 90%;
    width: auto;
    position: relative;
    z-index: 11;
    /* Asegurar que el contenido esté encima del fondo */
}

.design-page-header h1 {
    font-size: 3.5rem;
    font-family: 'Montserrat', sans-serif;
}

.design-page-header p {
    font-size: 1.2rem;
    font-family: 'Open Sans', sans-serif;
    max-width: 900px;
    margin: 0 auto;
}

/* Sección Renderizados */
.section-with-carousel {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 2rem;
    background: rgba(7, 7, 7, 0.7);
    border-radius: 15px;
    text-align: center;
}

.section-with-carousel h2 {
    color: white;
    font-size: 2.5rem;
    font-weight: bold;
}

.section-with-carousel p {
    font-size: 1.3rem;
    color: white;
    max-width: 600px;
    margin: 0 auto 2rem auto;
}

.render-carousel {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 8px;
}

.carousel-track {
    display: flex;
    transition: transform 0.5s ease;
}

.carousel-slide {
    flex: 0 0 100%;
    min-width: 100%;
}

.carousel-slide img {
    width: 100%;
    max-height: 500px;
    height: auto;
    object-fit: contain;
    /* Contendrá la imagen sin hacer zoom */
    border-radius: 15px;
}

.carousel-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.8);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    color: #333;
    z-index: 10;
    transition: background-color 0.3s ease;
    margin: 0;
}

.carousel-button:hover {
    background: rgba(255, 255, 255, 0.9);
}

.carousel-button.prev {
    left: 10px;
}

.carousel-button.next {
    right: 10px;
}

.prev {
    left: 20px;
}

.next {
    right: 20px;
}

/* Sección Detalles */
.section-detail {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 2rem;
    background: rgba(7, 7, 7, 0.7);
    border-radius: 15px;
    text-align: left;
    color: white;
}


.section-detail h2 {
    color: white;
    font-size: 2.5rem;
    font-weight: bold;
}

.section-detail ul {
    list-style: disc;
    padding-left: 2rem;
    font-size: 1.3rem;
}

@media (max-width: 768px) {

    .design-page-header {
        padding: 1rem 0;
    }

    .design-page-header-content {
        padding: 1rem 2rem;
        max-width: 90%;
        margin: 0 auto;
    }

    .design-page-header h1 {
        font-size: 2.5rem;
    }

    .design-page-header p {
        font-size: 1rem;
    }


    .design-section img {
        max-height: 250px;
        object-fit: cover;
    }

}

/* Services - Construccion */

:root {

    --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;


    --c-deep: #0b3b32;
    --c-leaf: #175f4b;
    --c-sage: #eef4f2;
    --c-cream: #f6f7f5;
    --c-wood: #f2ebe2;
    --c-wood-text: #4e3a2b;
    --c-cacao: #8a5a36;


    /* Neutros + utilitarios usados en el layout */
    --c-surface: #ffffff;
    --c-surface-alt: #f7f9f8;
    --c-dark: #0f2a22;
    --c-mid: #4a5a55;
    --c-accent: #0d4b35;

    --radius-xl: 18px;
    --shadow-md: 0 10px 24px rgba(0, 0, 0, .10);
}

.construction-page {
    position: relative;
    isolation: isolate;
    background: #fff;
}

.construction-page::before {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* ¡clave!: empieza debajo del navbar, no en 0 */
    top: calc(var(--nav-safe) + env(safe-area-inset-top, 0px));
    background: #fff;
    z-index: 0;
    /* navbar debe tener un z-index mayor, p. ej. 100 */
    pointer-events: none;
}

/* =======================================
   HERO (se mantiene tal como lo tenías)
   ======================================= */
.construction-page-header {
    position: relative;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, .30), rgba(0, 0, 0, .30)),
        url('https://storage.googleapis.com/jwconstrucciones.appspot.com/Home/Proyectos_Realizados_Portafolio/Porta_Servicio-Construccion.avif') center/cover no-repeat;
    text-align: center;
    padding: 6rem 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
}

.construction-page-header-content {
    backdrop-filter: blur(2px);
    background: rgba(0, 0, 0, .45);
    display: inline-block;
    padding: 2rem 3rem;
    border-radius: var(--radius-xl);
    max-width: 980px;
    color: #fff;
    box-shadow: var(--shadow-md);
}

.construction-page-header h1 {
    font-size: clamp(2.2rem, 2.5vw + 1.2rem, 3.2rem);
    margin: 0 0 .5rem;
}

.construction-page-header p {
    font-size: clamp(1rem, .7vw + .9rem, 1.15rem);
    opacity: .95;
}

/* =======================================
   TIPOGRAFÍA unificada (excepto el HERO)
   ======================================= */
.construction-page .cta-banner,
.construction-page .cta-banner *,
.construction-page .content-band,
.construction-page .content-band *,
.construction-page .projects-marquee,
.construction-page .projects-marquee * {
    font-family: var(--font-sans) !important;
}

/* =========================
   CTA (mantener estructura)
   + gradiente verde → hoja
   ========================= */
.cta-banner {
    position: relative;
    z-index: 1;
    /* por encima del overlay blanco global */
    --bleed-top: 2rem;
    /* iguala tu margin-top */
    --bleed-bottom: 3rem;
    /* iguala tu margin-bottom */
    max-width: 1400px;
    margin: var(--bleed-top) auto var(--bleed-bottom);
    padding: 3rem 1rem;
    background: transparent;
    /* el fondo real va en ::before */
    border: none;
}

.cta-banner::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(-1 * var(--bleed-top));
    /* cubre márgenes arriba */
    bottom: calc(-1 * var(--bleed-bottom));
    /* y abajo */
    width: 100vw;
    /* ocupa todo el viewport */
    z-index: -1;
    /* detrás del contenido de la CTA */
    pointer-events: none;
    background: linear-gradient(180deg, var(--c-deep) 0%, var(--c-leaf) 100%);
}

.cta-banner__inner {
    background: rgba(255, 255, 255, .92);
    border-radius: var(--radius-xl);
    padding: 2.2rem 1.2rem;
    text-align: center;
    backdrop-filter: saturate(120%) blur(2px);
    -webkit-backdrop-filter: saturate(120%) blur(2px);
}

.cta-banner h2 {
    margin: 0 0 .4rem;
    font-weight: 700;
    color: #10241d;
}

.cta-banner p {
    margin: 0 0 1.2rem;
    color: #2f3b37;
    font-size: 1.05rem;
}

.btn-primary {
    display: inline-block;
    padding: .9rem 1.4rem;
    border-radius: 999px;
    background: var(--c-accent);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
    box-shadow: 0 8px 18px rgba(11, 74, 39, .18);
}

.btn-primary:hover {
    transform: translateY(-1px);
    background: #0a4223;
}

/* ==================================
   BANDAS de contenido (2 columnas)
   ================================== */
.content-band {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: clamp(2.8rem, 4vw, 5rem) 1rem;
    border-top: 1px solid rgba(0, 0, 0, .05);
    border-bottom: 1px solid rgba(0, 0, 0, .05);
}

.content-band.is-sage {
    background: var(--c-sage);
}

.content-band.is-cream {
    background: var(--c-cream);
}

.content-band.is-wood {
    background: var(--c-wood);
}

.content-band::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--c-deep), transparent);
    opacity: .25;
}

.content-band__inner {
    max-width: 1200px;
    margin: 0 auto;
    color: #1f2b28;
}

.band-grid {
    display: grid;
    grid-template-columns: minmax(240px, 420px) 1fr;
    gap: min(6vw, 64px);
    align-items: start;
}

/* Título izquierdo */
.band-heading {
    position: relative;
}

.band-title {
    font-weight: 800;
    font-size: clamp(2rem, 1.6vw + 1.6rem, 3rem);
    line-height: 1.05;
    margin: 0 0 .6rem;
    letter-spacing: .2px;
    text-wrap: balance;
}

.band-rule {
    display: block;
    width: 76px;
    height: 4px;
    border-radius: 3px;
    background: currentColor;
    margin-top: .9rem;
    opacity: .85;
}

/* Puntitos decorativos sutiles */
.band-heading::after {
    content: "";
    position: absolute;
    left: -14px;
    top: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: .18;
    box-shadow: 14px 0 0 currentColor, 28px 0 0 currentColor;
}

/* Texto derecho */
.band-copy p {
    margin: 0 0 .8rem;
    font-size: 1.125rem;
    line-height: 1.8;
}

.band-lead {
    font-size: clamp(1.1rem, .6vw + 1rem, 1.35rem);
}

.band-subtitle {
    margin: 1.2rem 0 .6rem;
    font-weight: 700;
}

.band-list {
    margin: .2rem 0 0 1.1rem;
    padding: 0;
    display: grid;
    gap: .4rem .9rem;
    list-style: disc;
    font-size: 1.06rem;
}

/* Colores de título por banda */
.is-sage .band-title {
    color: var(--c-deep);
}

.is-cream .band-title {
    color: var(--c-leaf);
}

.is-wood .band-title {
    color: var(--c-cacao);
}

.is-wood .band-subtitle,
.is-wood .band-copy {
    color: var(--c-wood-text);
}

/* ===========================
   MARQUEE / Galería (final)
   Fondo cacao #8a5a36
   =========================== */
.projects-marquee {
    position: relative;
    z-index: 1;
    --bleed-top: 3.5rem;
    /* iguala tu margin-top original */
    --bleed-bottom: 0rem;
    /* si luego agregas margin-bottom, ajústalo aquí */
    max-width: 1400px;
    margin: var(--bleed-top) auto var(--bleed-bottom);
    padding: 2.5rem 1rem 2.8rem;
    background: transparent;
    /* el fondo real va en ::before */
}

.projects-marquee::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(-1 * var(--bleed-top));
    bottom: calc(-1 * var(--bleed-bottom));
    width: 100vw;
    z-index: -1;
    pointer-events: none;
    background: var(--c-cacao);
    /* #8a5a36 */
}

.projects-marquee__title {
    text-align: center;
    font-size: clamp(1.6rem, 1.2vw + 1.1rem, 2rem);
    margin-bottom: 1.2rem;
    color: #fff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .15);
}

.marquee-row {
    overflow: hidden;
    position: relative;
    mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
    margin: 1rem 0;
}

.marquee-track {
    display: flex;
    gap: 1rem;
    align-items: center;
    will-change: transform;
}

.marquee-row img {
    height: 220px;
    width: auto;
    flex: 0 0 auto;
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
    border: 1px solid rgba(255, 255, 255, .06);
    object-fit: cover;
}

@keyframes marqueeLeft {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@keyframes marqueeRight {
    from {
        transform: translateX(-50%);
    }

    to {
        transform: translateX(0);
    }
}

.marquee-left .marquee-track {
    width: 200%;
    animation: marqueeLeft 38s linear infinite;
}

.marquee-right .marquee-track {
    width: 200%;
    animation: marqueeRight 42s linear infinite;
}

.marquee-row:hover .marquee-track {
    animation-play-state: paused;
}

/* ===============
   Responsive
   =============== */
@media (max-width: 992px) {
    .band-grid {
        gap: 32px;
    }

    .marquee-row img {
        height: 200px;
    }
}

@media (max-width: 768px) {
    .construction-page-header {
        padding: 3.5rem 1rem;
    }

    .construction-page-header-content {
        padding: 1.2rem 1.4rem;
    }

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

    .band-heading::after {
        display: none;
    }

    .band-rule {
        margin-left: 0;
    }

    .marquee-row img {
        height: 170px;
    }

    .cta-banner {
        padding: 2rem 1rem;
    }

    .cta-banner__inner {
        background: #fff;
    }
}

/* Services - Remodelación */

/* ---------- HERO con imagen de fondo ---------- */
.remodelation-page-header {
    position: relative;
    z-index: 1;
    --remodel-hero: url('https://storage.googleapis.com/jwconstrucciones.appspot.com/Home/Proyectos_Realizados_Portafolio/Porta_Servicio-Remodelacion.avif');
    background:
        linear-gradient(180deg, rgba(0, 0, 0, .30), rgba(0, 0, 0, .30)),
        var(--remodel-hero) center/cover no-repeat;
    text-align: center;
    padding: 6rem 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
}

.remodelation-page-header-content {
    backdrop-filter: blur(2px);
    background: rgba(0, 0, 0, .45);
    display: inline-block;
    padding: 2rem 3rem;
    border-radius: var(--radius-xl);
    max-width: 980px;
    color: #fff;
    box-shadow: var(--shadow-md);
}

.remodelation-page-header h1 {
    font-size: clamp(2.2rem, 2.5vw + 1.2rem, 3.2rem);
    margin: 0 0 .5rem;
}

.remodelation-page-header p {
    font-size: clamp(1rem, .7vw + .9rem, 1.15rem);
    opacity: .95;
}

/* ---------- Tipografía unificada (excepto el HERO) ---------- */
.section-text-only,
.section-text-only * {
    font-family: var(--font-sans) !important;
}

/* ---------- Bandas de contenido (full-bleed) ---------- */
.section-text-only {
    position: relative;
    z-index: 1;
    --bleed-top: 2.5rem;
    --bleed-bottom: 2.5rem;
    max-width: 1200px;
    margin: var(--bleed-top) auto var(--bleed-bottom);
    padding: clamp(2.2rem, 3.5vw, 4rem) 1rem;
    background: transparent;
    /* el fondo real va en ::before */
    border-top: 1px solid rgba(0, 0, 0, .05);
    border-bottom: 1px solid rgba(0, 0, 0, .05);
}

.section-text-only::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(-1 * var(--bleed-top));
    bottom: calc(-1 * var(--bleed-bottom));
    width: 100vw;
    z-index: -1;
    pointer-events: none;
    background: var(--c-cream);
    /* valor por defecto */
}

/* Colores de banda anclados al header (sin nth-of-type frágil) */
.remodelation-page-header+.section-text-only::before {
    background: var(--c-sage);
}

.remodelation-page-header+.section-text-only+.section-text-only::before {
    background: var(--c-cream);
}

/* La banda de pasos hereda salvia más abajo */
/* La última (link-to-gallery) va con cacao mediante override */

.section-text-only .text-content {
    display: grid;
    grid-template-columns: minmax(240px, 420px) 1fr;
    gap: min(6vw, 64px);
    align-items: start;
    max-width: 1200px;
    margin: 0 auto;
    color: #1f2b28;
}

/* Título “editorial” a la izquierda */
.section-text-only h2 {
    grid-column: 1;
    font-weight: 800;
    font-size: clamp(2rem, 1.6vw + 1.6rem, 3rem);
    line-height: 1.05;
    margin: 0 0 .6rem;
    letter-spacing: .2px;
    text-wrap: balance;
    color: var(--c-deep);
    position: relative;
}

.remodelation-page-header+.section-text-only h2 {
    color: var(--c-deep);
}

/* salvia */
.remodelation-page-header+.section-text-only+.section-text-only h2 {
    color: var(--c-leaf);
}

/* crema */

.section-text-only h2::after {
    content: "";
    display: block;
    width: 76px;
    height: 4px;
    border-radius: 3px;
    background: currentColor;
    margin-top: .9rem;
    opacity: .85;
}

.section-text-only h2::before {
    content: "";
    position: absolute;
    left: -14px;
    top: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: .18;
    box-shadow: 14px 0 0 currentColor, 28px 0 0 currentColor;
}

/* Párrafos a la derecha */
.section-text-only p {
    grid-column: 2;
    margin: 0 0 .8rem;
    font-size: 1.125rem;
    line-height: 1.8;
    color: #1f2b28;
}

.section-text-only p+p {
    margin-top: .75rem;
}

/* ---------- Banda NUEVA: pasos en tarjetas 2×2 ---------- */
.steps-band::before {
    background: var(--c-sage);
}

/* mismo fondo que la primera banda */
.steps-band h2 {
    color: var(--c-deep);
}

/* mismo tono en el título */

.steps-grid {
    grid-column: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    gap: 22px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.step-card {
    position: relative;
    background: #fff;
    border-radius: 16px;
    padding: 1.1rem 1.1rem 1.1rem 3.6rem;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .08);
    border: 1px solid rgba(0, 0, 0, .04);
}

.step-badge {
    position: absolute;
    left: 1rem;
    top: 1rem;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-weight: 800;
    color: #fff;
    background: var(--c-leaf);
    box-shadow: 0 6px 14px rgba(23, 95, 75, .25);
}

.step-card h3 {
    margin: 0 0 .3rem;
    font-size: 1.05rem;
    color: var(--c-dark);
}

.step-card p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.65;
    color: #2b3834;
}


.section-text-only.link-to-gallery {
    /* tarjeta blanca centrada; el fondo real va en ::before */
    --bleed-top: 3rem;
    /* altura de banda por arriba   */
    --overscan: 40px;
    /* se “mete” bajo el footer     */

    position: relative;
    isolation: isolate;
    /* nuevo stacking context */
    z-index: 2;

    max-width: 1200px;
    margin: var(--bleed-top) auto 0;
    /* <<< SIN margen inferior */
    padding: clamp(1.8rem, 1.2vw + 1.2rem, 2.6rem) 2rem;
    background: rgba(255, 255, 255, .96);
    border-radius: 22px;
    text-align: center;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .18);
}

.section-text-only.link-to-gallery::before {
    /* banda verde a todo lo ancho que además solapa el footer */
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(-1 * var(--bleed-top));
    bottom: calc(-1 * var(--overscan));
    /* <<< se mete por debajo */
    width: 100vw;
    z-index: 0;
    /* por detrás del contenido, pero sobre el body */
    pointer-events: none;
    background: linear-gradient(180deg, var(--c-deep) 0%, var(--c-leaf) 100%);
}

/* el contenido queda sobre la banda */
.section-text-only.link-to-gallery>* {
    position: relative;
    z-index: 1;
}

/* texto y botón dentro de la tarjeta */
.section-text-only.link-to-gallery .text-content {
    display: block;
}

.link-to-gallery p {
    margin: 0 0 1.1rem;
    font-size: clamp(1.05rem, .8vw + 1rem, 1.35rem);
    font-weight: 700;
    color: #fff;
    text-align: center;
}

.link-to-gallery a {
    display: inline-block;
    font-size: 1rem;
    color: #fff;
    background: var(--c-accent);
    padding: .75rem 1.35rem;
    border-radius: 999px;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
    box-shadow: 0 12px 22px rgba(11, 74, 39, .20);
}

.link-to-gallery a:hover {
    transform: translateY(-1px);
    background: #0a4223;
}

/* Garantiza que el footer no añada espacio extra por margen-top */
footer,
.site-footer {
    margin-top: 0 !important;
    position: relative;
    z-index: 3;
}

/* Responsive */
@media (max-width: 768px) {
    .section-text-only.link-to-gallery {
        max-width: 92%;
        padding: 1.6rem 1rem;
        border-radius: 18px;
    }

    .section-text-only.link-to-gallery::before {
        bottom: -28px;
        /* overscan un poco menor en móvil */
    }

    .link-to-gallery p {
        font-size: 1.05rem;
    }

    .link-to-gallery a {
        padding: .6rem 1.1rem;
    }
}


/* ===============  RESPONSIVE  =============== */
@media (max-width: 1024px) {
    .section-text-only {
        --bleed-top: 2rem;
        --bleed-bottom: 2rem;
    }

    .section-text-only .text-content {
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .remodelation-page-header {
        padding: 3.5rem 1rem;
    }

    .remodelation-page-header-content {
        padding: 1.2rem 1.4rem;
    }

    .section-text-only {
        padding: 1.8rem 1rem;
        border-top-color: rgba(0, 0, 0, .04);
        border-bottom-color: rgba(0, 0, 0, .04);
    }

    /* grid → 1 columna */
    .section-text-only .text-content {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .section-text-only h2 {
        text-align: center;
        margin-bottom: .2rem;
    }

    .section-text-only h2::before {
        display: none;
    }

    .section-text-only h2::after {
        margin-left: 0;
    }

    .section-text-only p {
        grid-column: 1;
        font-size: 1.05rem;
        line-height: 1.75;
    }

    .steps-grid {
        grid-column: 1;
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .step-card {
        padding-left: 3.2rem;
    }

    /* CTA final más compacta */
    .section-text-only.link-to-gallery {
        max-width: 92%;
        padding: 1.6rem 1rem;
    }

    .section-text-only.link-to-gallery::before {
        top: -1.8rem;
        bottom: -2.2rem;
    }

    .link-to-gallery p {
        font-size: 1.05rem;
    }

    .link-to-gallery a {
        padding: .55rem 1.05rem;
    }
}



/* ===== Services - Technical Advice ===== */

/* ---------- HERO con imagen de fondo (mismo patrón) ---------- */
.technical-advice-header {
    position: relative;
    z-index: 1;
    /* Puedes cambiar la imagen del header desde el atributo style en el HTML */
    --advice-hero: url('https://storage.googleapis.com/jwconstrucciones.appspot.com/Technical_Advice/Technical_Advice_image%20(1).avif');
    background:
        linear-gradient(180deg, rgba(0, 0, 0, .30), rgba(0, 0, 0, .30)),
        var(--advice-hero) center/cover no-repeat;
    text-align: center;
    padding: 6rem 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
}

.technical-advice-header-content {
    backdrop-filter: blur(2px);
    background: rgba(0, 0, 0, .45);
    display: inline-block;
    padding: 2rem 3rem;
    border-radius: var(--radius-xl);
    max-width: 980px;
    color: #fff;
    box-shadow: var(--shadow-md);
}

.technical-advice-header h1 {
    font-size: clamp(2.2rem, 2.5vw + 1.2rem, 3.2rem);
    margin: 0 0 .5rem;
}

.technical-advice-header p {
    font-size: clamp(1rem, .7vw + .9rem, 1.15rem);
    opacity: .95;
}

/* ---------- Tipografía unificada (excepto el HERO) ---------- */
.section-text-only,
.section-text-only * {
    font-family: var(--font-sans) !important;
}

/* ---------- Bandas de contenido full-bleed ---------- */
.section-text-only {
    position: relative;
    z-index: 1;
    --bleed-top: 2.5rem;
    --bleed-bottom: 2.5rem;
    max-width: 1200px;
    margin: var(--bleed-top) auto var(--bleed-bottom);
    padding: clamp(2.2rem, 3.5vw, 4rem) 1rem;
    background: transparent;
    /* el fondo real va en ::before */
    border-top: 1px solid rgba(0, 0, 0, .05);
    border-bottom: 1px solid rgba(0, 0, 0, .05);
}

.section-text-only::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(-1 * var(--bleed-top));
    bottom: calc(-1 * var(--bleed-bottom));
    width: 100vw;
    z-index: -1;
    pointer-events: none;
    background: var(--c-cream);
    /* valor por defecto */
}

/* La primera banda tras el header usa salvia */
.technical-advice-header+.section-text-only::before {
    background: var(--c-sage);
}

/* Layout: título a la izquierda / texto a la derecha */
.section-text-only .text-content {
    display: grid;
    grid-template-columns: minmax(240px, 420px) 1fr;
    gap: min(6vw, 64px);
    align-items: start;
    max-width: 1200px;
    margin: 0 auto;
    color: #1f2b28;
}

/* Título editorial (coincide con otras páginas) */
.section-text-only h2 {
    grid-column: 1;
    font-weight: 800;
    font-size: clamp(2rem, 1.6vw + 1.6rem, 3rem);
    line-height: 1.05;
    margin: 0 0 .6rem;
    letter-spacing: .2px;
    text-wrap: balance;
    color: var(--c-deep);
    position: relative;
}

.section-text-only h2::after {
    content: "";
    display: block;
    width: 76px;
    height: 4px;
    border-radius: 3px;
    background: currentColor;
    margin-top: .9rem;
    opacity: .85;
}

/* Puntitos sutiles */
.section-text-only h2::before {
    content: "";
    position: absolute;
    left: -14px;
    top: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: .18;
    box-shadow: 14px 0 0 currentColor, 28px 0 0 currentColor;
}

/* Copia derecha */
.section-text-only p {
    grid-column: 2;
    margin: 0 0 .8rem;
    font-size: 1.125rem;
    line-height: 1.8;
    color: #1f2b28;
}

/* ---------- CTA final: banner verde con tarjeta blanca ---------- */
.section-text-only.link-to-articles {
    /* tarjeta blanca centrada; el fondo real va en ::before */
    --bleed-top: 3rem;
    --bleed-bottom: 3.5rem;
    max-width: 1200px;
    margin: var(--bleed-top) auto var(--bleed-bottom);
    padding: clamp(1.8rem, 1.2vw + 1.2rem, 2.6rem) 2rem;
    background: rgba(255, 255, 255, .96);
    border-radius: 22px;
    text-align: center;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .18);
}

.section-text-only.link-to-articles::before {
    /* banda verde full-bleed detrás */
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(-1 * var(--bleed-top));
    bottom: 0;
    /* cubre hasta el pie para que no se vea hueco */
    width: 100vw;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg, var(--c-deep) 0%, var(--c-leaf) 100%);
}

/* Contenido de la tarjeta */
.section-text-only.link-to-articles .text-content {
    display: block;
}

.link-to-articles p {
    margin: 0 0 1.1rem;
    font-size: clamp(1.05rem, .8vw + 1rem, 1.35rem);
    font-weight: 700;
    color: #fff;
    /* texto oscuro dentro de la tarjeta blanca */
    text-align: center;

}

.section-text-only.link-to-articles::before {
    bottom: -28px;
}

.link-to-articles a {
    display: inline-block;
    font-size: 1rem;
    color: #fff;
    background: var(--c-accent);
    padding: .75rem 1.35rem;
    border-radius: 999px;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
    box-shadow: 0 12px 22px rgba(11, 74, 39, .20);
}

.link-to-articles a:hover {
    transform: translateY(-1px);
    background: #0a4223;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .section-text-only {
        --bleed-top: 2rem;
        --bleed-bottom: 2rem;
    }

    .section-text-only .text-content {
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .technical-advice-header {
        padding: 3.5rem 1rem;
    }

    .technical-advice-header-content {
        padding: 1.2rem 1.4rem;
    }

    .section-text-only {
        padding: 1.8rem 1rem;
        border-top-color: rgba(0, 0, 0, .04);
        border-bottom-color: rgba(0, 0, 0, .04);
    }

    /* grid → 1 columna */
    .section-text-only .text-content {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .section-text-only h2 {
        text-align: center;
        margin-bottom: .2rem;
    }

    .section-text-only h2::before {
        display: none;
    }

    .section-text-only h2::after {
        margin-left: 0;
    }

    .section-text-only p {
        grid-column: 1;
        font-size: 1.05rem;
        line-height: 1.75;
    }

    /* CTA final más compacta y sin hueco inferior */
    .section-text-only.link-to-articles {
        max-width: 92%;
        padding: 1.6rem 1rem;
        border-radius: 18px;
    }

    .section-text-only.link-to-articles::before {
        top: -1.6rem;
        bottom: 0;
        /* mantiene la banda hasta el footer */
    }
}

.link-to-articles p {
    color: #fff;
    /* texto oscuro dentro de la tarjeta */
}

/* 1) Sin borde ni margen inferior propios */
.section-text-only.link-to-articles {
    --bleed-bottom: 0;
    /* la banda ya no reserva espacio abajo */
    margin: var(--bleed-top) auto 0;
    /* sin margin-bottom */
    border-bottom: 0;
    /* evita la línea gris base */
}

/* 2) Solape real con el footer: empuja el pie “hacia arriba” */
:root {
    --cta-footer-overlap: 40px;
}

/* ajusta 30–48px según tu footer */

.section-text-only.link-to-articles {
    /* añadimos ese solape a la zona acolchada para que la tarjeta no se corte */
    padding-bottom: calc(clamp(1.8rem, 1.2vw + 1.2rem, 2.6rem) + var(--cta-footer-overlap));
    /* y usamos margen negativo para que el footer suba dentro de la banda verde */
    margin-bottom: calc(-1 * var(--cta-footer-overlap));
}

/* 3) La banda verde llega justo hasta el borde de la sección (el footer ya sube) */
.section-text-only.link-to-articles::before {
    top: calc(-1 * var(--bleed-top));
    bottom: 0;
    /* no hace falta extenderla más */
}

/* 4) Por si el footer trae un margin-top o una franja decorativa con ::before */
.section-text-only.link-to-articles+footer,
.section-text-only.link-to-articles+.site-footer {
    margin-top: 0 !important;
}

.section-text-only.link-to-articles+.site-footer::before {
    /* si tu footer dibuja una “franja” superior con ::before y no la quieres aquí */
    /* content: none !important;  <-- descomenta si la franja sigue apareciendo */
}

/* --- Responsive: solape un poco menor en móvil si hace falta --- */
@media (max-width:768px) {
    :root {
        --cta-footer-overlap: 32px;
    }
}

/* Services - Compra y Venta Terrenos */


/* Botones */
.btn-green {
    background: #28a745;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    font-weight: bold;
}

.btn-blue {
    background: #007bff;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    font-weight: bold;
}

.btn-green:hover {
    background: #218838;
}

.btn-blue:hover {
    background: #0056b3;
}

/* Sección: ¿Cómo Funciona? */
.how-it-works {
    text-align: center;
    padding: 50px 20px;
    background-color: #f0f4f8;
    /* Fondo suave gris para crear contraste */
}

.how-it-works h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    color: #333;
}

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

.step {
    width: 45%;
    padding: 20px;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
    text-align: center;
    border: 1px solid #e0e0e0;
    /* Añadir borde suave */
    transition: box-shadow 0.3s ease-in-out, border 0.3s ease-in-out;
}

.step:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    /* Hover effect */
    border: 1px solid #007bff;
    /* Añadir borde azul al hacer hover */
}

/* Sección: Beneficios */
.benefits {
    text-align: center;
    padding: 50px 20px;
    background-color: #f7f9fc;
    /* Fondo muy suave azul claro */
}

.benefit-list {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.benefit {
    width: 30%;
    padding: 20px;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
    text-align: center;
    border: 1px solid #e0e0e0;
    /* Añadir borde suave */
    transition: box-shadow 0.3s ease-in-out, border 0.3s ease-in-out;
}

.benefit:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    /* Hover effect */
    border: 1px solid #007bff;
    /* Añadir borde azul al hacer hover */
}

/* Sección: Información adicional */
.why-choose-us {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    padding: 50px 20px;
    background-color: #f0f4f8;
    /* Fondo suave gris */
}

.info {
    flex: 1;
    padding: 20px;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
    text-align: center;
    border: 1px solid #e0e0e0;
    /* Añadir borde suave */
    transition: box-shadow 0.3s ease-in-out, border 0.3s ease-in-out;
}

.info:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    /* Hover effect */
    border: 1px solid #007bff;
    /* Añadir borde azul al hacer hover */
}

/* Sección: Servicios Adicionales */
.additional-services {
    text-align: center;
    padding: 50px 20px;
    background-color: #f7f9fc;
    /* Fondo azul muy claro */
}

.additional-services h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    color: #333;
}

.services-list {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.service {
    width: 30%;
    padding: 20px;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
    text-align: center;
    border: 1px solid #e0e0e0;
    /* Borde suave */
    transition: box-shadow 0.3s ease-in-out, border 0.3s ease-in-out, background 0.3s ease-in-out;
}

.service:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    /* Hover effect */
    background: #e0f7fa;
    /* Fondo azul suave al hacer hover */
    border: 1px solid #007bff;
    /* Añadir borde azul al hacer hover */
}

.land-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    /* Espacio entre los botones */
}

.land-button {
    width: 80%;
    /* Ocupa el 80% del ancho del contenedor */
    max-width: 300px;
    /* Ancho máximo para evitar que sea muy grande */
    padding: 10px 20px;
    background-color: #ffcc00;
    color: #000;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
}

.land-button:hover {
    background-color: #e6b800;
}

/* Responsividad */
@media (max-width: 768px) {

    .step,
    .benefit {
        width: 100%;
    }

    .why-choose-us {
        flex-direction: column;
    }

    .service {
        width: 100%;
        /* Hacer que ocupe el 100% en móviles */
        margin-bottom: 20px;
        /* Espacio entre los servicios */
        padding: 15px;
        /* Ajustar el padding para que no quede muy grande */
        padding-left: 10px;
        padding-right: 10px;
        flex-direction: column;
    }

    .services-list {
        gap: 10px;
        /* Reducir el gap entre los cuadros */
        padding-left: 10px;
        padding-right: 10px;
        flex-direction: column;
    }
}


/* Terrenos Disponibles*/

.page-header {
    background-color: #2c3e50;
    color: white;
    text-align: center;
    padding: 20px 0;
}

.terreno {
    background: white;
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.carousel {
    position: relative;
    max-width: 100%;
    overflow: hidden;
}

.carousel img {
    width: 100%;
    display: none;
    border-radius: 8px;
}

.carousel img.active {
    display: block;
}

.carousel button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    border-radius: 50%;
}

.carousel .prev {
    left: 10px;
}

.carousel .next {
    right: 10px;
}

.btn-green,
.btn-blue {
    display: inline-block;
    padding: 10px 20px;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    text-align: center;
    margin: 10px 5px;
}

.btn-green {
    background-color: #28a745;
}

.btn-blue {
    background-color: #007bff;
}

.mapa {
    width: 100%;
    height: 300px;
    border-radius: 8px;
    margin-top: 20px;
}

@media (max-width: 600px) {
    .terreno {
        padding: 15px;
    }

    .btn-green,
    .btn-blue {
        display: block;
        width: 100%;
    }
}





/* Terrenos Disponibles */



.terrenos-page-header {
    text-align: center;
    padding: 20px 0;
    background: rgba(0, 0, 0, 0.5);
    margin-bottom: 30px;
}


.terrenos-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px 30px;
}

.terreno-card {
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    padding: 20px;
    transition: transform 0.3s ease;
}

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

.terreno-card h2 {
    font-size: 22px;
    margin: 0 0 15px 0;
    color: #2c3e50;
}

.terreno-info-block {
    margin: 15px 0;
}

.terreno-info-block p {
    margin: 8px 0;
    line-height: 1.5;
}


.terreno-buttons-container {
    display: flex;
    gap: 10px;
    margin: 15px 0;
}

.terreno-btn-green,
.terreno-btn-blue {
    display: inline-block;
    padding: 10px 18px;
    text-decoration: none;
    color: white;
    border-radius: 8px;
    font-weight: 600;
    text-align: center;
    transition: all 0.3s ease;
    flex: 1;
}

.terreno-btn-green {
    background: #28a745;
}

.terreno-btn-green:hover {
    background: #218838;
}

.terreno-btn-blue {
    background: #007bff;
}

.terreno-btn-blue:hover {
    background: #0069d9;
}

.terreno-mapa {
    height: 220px;
    border-radius: 10px;
    margin-top: 15px;
    border: 1px solid #eaeaea;
}


.terreno-carousel {
    position: relative;
    width: 100%;
    border-radius: 12px;
    margin-bottom: 15px;
    overflow: hidden;
}

.terreno-carousel-inner {
    position: relative;
    width: 100%;
    padding-bottom: 66.67%;
    overflow: hidden;
}

.terreno-carousel-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.6s ease;
    display: none;
}

.terreno-carousel-item.active {
    opacity: 1;
    z-index: 10;
    display: block;
}

.terreno-carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 10px;
}

.terreno-carousel-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    background: rgba(255, 255, 255, 0.7);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

.terreno-carousel-control:hover {
    background: rgba(255, 255, 255, 0.9);
}

.terreno-prev {
    left: 10px;
}

.terreno-next {
    right: 10px;
}

.terreno-carousel-indicators {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 20;
}

.terreno-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: background 0.3s ease;
}

.terreno-indicator.active {
    background: #ffffff;
}


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


@media (min-width: 1200px) {
    .terreno-card {
        max-width: 100%;
    }
}






.articles-link {
    text-align: center;
    margin-top: 2rem;
}


.articles-link p {
    font-size: 1.5rem;
    font-weight: bold;
    color: #0b4a27;
    padding: 0.5rem 0.5rem;
    background: rgba(245, 245, 220, 0.8);
    border-radius: 10px;
    max-width: 50%;
    margin: 0 auto;
    margin-bottom: 1rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
}


/* Link styling */
.articles-link a {
    color: #0b4a27;
    font-weight: bold;
    text-decoration: none;
    padding: 0.25rem 1rem;

}

.articles-link a:hover {
    color: #ffffff;
    /* Cambiar color a blanco al pasar el mouse */
    text-decoration: underline;
    /* Subrayado al pasar el mouse */
    background-color: rgba(0, 0, 0, 0.8);
    /* Fondo más oscuro al pasar el mouse */
}

/* Adjust for mobile view */
@media (max-width: 768px) {
    .articles-link p {
        font-size: 1rem;
        /* Ajustar el tamaño de fuente en móviles */
        padding: 1rem 1.5rem;
    }

    .articles-link a {
        font-size: 1rem;
        /* Ajustar tamaño de fuente del enlace */
    }
}


/* Mobile View */
@media (max-width: 768px) {
    .section-with-image {
        flex-direction: column;
        text-align: center;
    }

    .section-with-image img {
        width: 100%;
        max-width: 100%;
        align-self: center;
    }

    .section-with-image .text-content {
        max-width: 100%;
    }
}

/* Articulo - Construcciones Elevadas */

.article-banner {
    padding: 4rem 0;
    background-color: #0b4a27;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.article-banner::before {
    content: "";
    position: absolute;
    top: -20px;
    right: -20px;
    width: 150px;
    height: 150px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150"><g opacity="0.2"><path d="M75,0 C97.5,30 120,60 135,75 C120,90 97.5,120 75,150 C52.5,120 30,90 15,75 C30,60 52.5,30 75,0Z" fill="%23ffffff"/></g></svg>');
    background-repeat: no-repeat;
    z-index: 1;
}

.article-banner .container {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.article-banner h1 {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    position: relative;
    display: inline-block;
    line-height: 1.3;
}

.article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.95rem;
}

.article-meta span {
    display: flex;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.2);
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
}

.article-meta i {
    margin-right: 8px;
}

/* Contenido principal del artículo */
.article-content {
    width: 100%;
    padding: 0;
}

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

.article-body {
    background: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    padding: 2.5rem;
    position: relative;
    border-left: 5px solid #0b4a27;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.article-intro {
    font-size: 1.2rem;
    color: #333;
    line-height: 1.8;
    margin-bottom: 2rem;
    font-weight: 500;
    padding: 1rem 1.5rem;
    background-color: rgba(11, 74, 39, 0.05);
    border-radius: 8px;
}

.article-body h2 {
    color: #0b4a27;
    font-size: 1.8rem;
    margin: 2.5rem 0 1.2rem;
    position: relative;
}

.article-body h2::after {
    content: "";
    display: block;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #0b4a27, transparent);
    margin-top: 8px;
}

.article-body p {
    margin-bottom: 1.5rem;
    line-height: 1.8;
    color: #444;
}

.article-list,
.article-list-numbered {
    margin: 1.5rem 0 2rem;
    padding-left: 1.5rem;
}

.article-list li,
.article-list-numbered li {
    margin-bottom: 1rem;
    position: relative;
    line-height: 1.6;
}

.article-list li strong,
.article-list-numbered li strong {
    color: #0b4a27;
}

/* Compartir artículo */
.article-share {
    display: flex;
    align-items: center;
    padding-top: 2rem;
    margin-top: 3rem;
    border-top: 1px solid #eee;
}

.article-share span {
    margin-right: 1rem;
    font-weight: 600;
}

.share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: #f5f5f5;
    color: #333;
    border-radius: 50%;
    margin-right: 0.8rem;
    transition: all 0.3s ease;
}

.share-btn:hover {
    background-color: #0b4a27;
    color: #fff;
}

.share-btn.facebook:hover {
    background-color: #3b5998;
}

.share-btn.twitter:hover {
    background-color: #1da1f2;
}

.share-btn.whatsapp:hover {
    background-color: #25d366;
}

/* Responsive */
/* Responsive */
@media (max-width: 768px) {
    .article-banner {
        padding: 3rem 0;
    }

    .article-banner h1 {
        font-size: 2rem;
    }

    .article-content .container {
        width: 100%;
        margin: 0 auto;
    }

    .article-body {
        margin: 0 auto;
        max-width: 100%;
        box-sizing: border-box;
    }

    .article-intro {
        font-size: 1.1rem;
    }

    .article-body h2 {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .article-banner h1 {
        font-size: 1.8rem;
    }

    .article-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .article-body {
        padding: 1.2rem;
    }
}

/* =========================================
   MODULAR CABANAS PAGE STYLES
   ========================================= */

/* --- Variables Specific to this page --- */
:root {
    --mod-bg-hero: #232629;
    --mod-text-light: #f6f7f5;
    --mod-accent: #0b4a27;
    --mod-accent-light: #7ca28a;
    --mod-card-bg: #ffffff;
    --mod-section-bg: #f9f9f9;
}

/* --- Global Utilities for this page --- */
.modular-section {
    padding: 4rem 1rem;
    position: relative;
}

.modular-grid-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
}

@media (min-width: 768px) {
    .modular-grid-2 {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
    }
}

.section-title {
    text-align: center;
    font-size: 2rem;
    color: var(--mod-accent);
    margin-bottom: 3rem;
    font-weight: 700;
}

/* --- Hero Section --- */
.modular-hero {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url('../img/cabanas/modular_hero.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: var(--mod-text-light);
    text-align: center;
    padding-top: 80px;
    /* Space for navbar */
}

.modular-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(11, 74, 39, 0.8));
    z-index: 1;
}

.modular-hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    padding: 2rem;
}

.modular-hero h1 {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.modular-hero .subtitle {
    font-size: 1.2rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    opacity: 0.9;
}

.modular-hero .description {
    font-size: 1rem;
    margin-bottom: 2rem;
    opacity: 0.8;
}

.modular-cta-group {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}

.btn-primary,
.btn-secondary {
    padding: 0.8rem 2rem;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-primary {
    background-color: var(--mod-accent);
    color: white;
    border: 2px solid var(--mod-accent);
}

.btn-primary:hover {
    background-color: transparent;
    color: white;
}

.btn-secondary {
    background-color: transparent;
    color: white;
    border: 2px solid white;
}

.btn-secondary:hover {
    background-color: white;
    color: var(--mod-accent);
}

/* Video Container */
.modular-video-container {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    margin-top: 2rem;
}

.modular-video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media (min-width: 768px) {
    .modular-hero h1 {
        font-size: 3.5rem;
    }

    .modular-hero .subtitle {
        font-size: 1.5rem;
    }

    .modular-hero .description {
        font-size: 1.2rem;
    }
}

/* --- What Is Section --- */
.modular-what-is {
    background-color: white;
}

.modular-what-is h2 {
    color: var(--mod-accent);
    font-size: 2rem;
    margin-bottom: 1.5rem;
}

.modular-what-is p {
    color: #555;
    line-height: 1.8;
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

.modular-what-is img {
    width: 100%;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* --- Who Is This For Section --- */
.modular-who-for {
    background-color: var(--mod-section-bg);
}

.who-for-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.who-card {
    background: white;
    padding: 2rem;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
}

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

.who-card .icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.who-card p {
    color: #444;
    font-weight: 500;
}

/* --- Price Section --- */
.modular-price {
    background-color: #eef4f2;
    /* Sage light */
}

.price-box {
    background: white;
    padding: 3rem;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.price-text {
    text-align: center;
    font-size: 1.2rem;
    margin-bottom: 3rem;
    color: #333;
}

.price-details {
    align-items: start;
}

.includes h3,
.not-includes h3 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid #eee;
    padding-bottom: 0.5rem;
}

.includes h3 {
    color: var(--mod-accent);
}

.not-includes h3 {
    color: #d9534f;
}

.price-details ul {
    list-style: none;
    padding: 0;
}

.price-details ul li {
    margin-bottom: 0.8rem;
    padding-left: 1.5rem;
    position: relative;
    color: #555;
}

.price-details ul li::before {
    content: "";
    position: absolute;
    left: 0;
    color: #aaa;
}

.price-note {
    text-align: center;
    margin-top: 2rem;
    font-style: italic;
    color: #777;
}

/* --- How It Works Section --- */
.modular-how-works {
    background-color: white;
}

.how-list {
    list-style: none;
    padding: 0;
    margin: 2rem 0;
}

.how-list li {
    margin-bottom: 1rem;
    font-size: 1.1rem;
    color: #444;
}

.closing-text {
    font-weight: 600;
    color: var(--mod-accent);
}

/* --- Benefits Section --- */
.modular-benefits {
    background-color: var(--mod-section-bg);
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}

.benefit-card {
    background: white;
    padding: 1.5rem;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.benefit-card .icon {
    font-size: 2rem;
    background: #f0f7f4;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--mod-accent);
}

/* --- Animations --- */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.modular-how-works img {
    width: 100%;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* --- Mobile optimizations for Bamboo decors --- */
@media (max-width: 768px) {

    .about-us__decor--left,
    .portfolio__decor--left {
        width: 140px !important;
        height: 350px !important;
        opacity: 0.02 !important;
        left: -30px !important;
    }

    .about-us__decor--right,
    .services::before,
    .services::after,
    .portfolio__decor--right,
    .blog__decor--right {
        width: 140px !important;
        height: 350px !important;
        opacity: 0.02 !important;
        right: -30px !important;
    }

    /* Centrado perfecto de las tarjetas de servicios en móvil */
    .services-list {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        gap: 24px !important;
    }

    .service-item {
        width: min(100%, 420px) !important;
        max-width: 420px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }
}

/* ==========================================================================
   CATALOG PAGE
   ========================================================================== */
.catalog-page {
    background-color: #FAF8F4 !important;
    /* Detalle sutil de bambú/hojas vectorial como background-image */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='%230F3D2E' fill-opacity='0.03'%3E%3Cpath d='M10 20c15 0 25 10 25 25S25 70 10 70 0 60 0 45s10-25 10-25zm80 80c15 0 25 10 25 25s-10 25-25 25-25-10-25-25 10-25 25-25z'/%3E%3C/g%3E%3C/svg%3E") !important;
    background-attachment: fixed !important;
    background-size: auto !important;
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    padding-bottom: 6rem;
}

.catalog-hero {
    background-color: #073F35 !important;
    color: #FAF8F4;
    text-align: center;
    padding: 80px 20px 50px;
    position: relative;
    z-index: 1;
}

.catalog-hero__inner {
    max-width: 800px;
    margin: 0 auto;
}

.catalog-hero__eyebrow {
    color: #C99A3B;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 1rem;
    display: block;
}

.catalog-hero h1 {
    font-size: 2.8rem;
    font-weight: 700;
    margin: 0 0 1rem;
    color: #ffffff;
    letter-spacing: -0.5px;
}

.catalog-hero p {
    font-size: 1.1rem;
    color: rgba(250, 248, 244, 0.9);
    line-height: 1.6;
    margin: 0;
    font-weight: 300;
}

.catalog-actions-section {
    padding: 3rem 20px;
    position: relative;
    z-index: 2;
}

.catalog-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.catalog-actions a {
    text-decoration: none !important;
}

.catalog-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 32px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.catalog-btn i {
    font-size: 18px;
}

.catalog-btn--primary {
    background-color: #C99A3B !important;
    color: #ffffff !important;
    border: 2px solid #C99A3B !important;
    box-shadow: 0 8px 20px rgba(201, 154, 59, 0.2);
}

.catalog-btn--primary:hover {
    background-color: #b58832 !important;
    border-color: #b58832 !important;
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(201, 154, 59, 0.3);
}

.catalog-btn--secondary {
    background-color: #ffffff !important;
    color: #073F35 !important;
    border: 2px solid #073F35 !important;
}

.catalog-btn--secondary:hover {
    background-color: #073F35 !important;
    color: #ffffff !important;
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(7, 63, 53, 0.15);
}

.catalog-btn--whatsapp {
    background-color: #ffffff !important;
    color: #25D366 !important;
    border: 2px solid #25D366 !important;
}

.catalog-btn--whatsapp:hover {
    background-color: #25D366 !important;
    color: #ffffff !important;
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(37, 211, 102, 0.2);
}

.catalog-viewer-section {
    padding: 0 20px;
    position: relative;
    z-index: 2;
}

.catalog-viewer-card {
    max-width: 1180px;
    margin: 0 auto;
    background: #fff;
    border-radius: 24px;
    padding: 16px;
    box-shadow: 0 24px 70px rgba(15, 61, 46, 0.16);
    border: 1px solid rgba(15, 61, 46, 0.10);
}

.catalog-viewer__iframe {
    width: 100%;
    height: 85vh;
    min-height: 900px;
    border: none;
    border-radius: 16px;
    background: #fff;
    display: block;
}

.catalog-mobile-note {
    display: none;
    text-align: center;
    color: #073F35;
    font-size: 14px;
    margin-top: 2rem;
    padding: 12px;
    background-color: rgba(201, 154, 59, 0.1);
    border-radius: 8px;
    font-weight: 500;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .catalog-hero {
        padding: 60px 15px 40px;
    }

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

    .catalog-actions-section {
        padding: 2.5rem 15px;
    }

    .catalog-actions {
        flex-direction: column;
        gap: 1.2rem;
    }

    .catalog-btn {
        width: 100%;
    }

    .catalog-viewer-card {
        padding: 12px;
        border-radius: 20px;
    }

    .catalog-viewer__iframe {
        height: 70vh;
        min-height: 620px;
        border-radius: 12px;
    }

    .catalog-mobile-note {
        display: block;
    }
}

@media (max-width: 480px) {
    .catalog-hero h1 {
        font-size: 1.8rem;
    }
}


/* Catalog Home Promotion Section */
section.catalog-home-section {
    background: #FAF8F4 !important;
    background-image: none !important;
    padding: 110px 24px !important;
    overflow: hidden !important;
    position: relative !important;
    isolation: isolate !important;
    contain: layout paint !important;
}

section.catalog-home-section .catalog-home__inner {
    max-width: 1240px !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: 0.95fr 1.05fr !important;
    align-items: center !important;
    gap: 80px !important;
}

section.catalog-home-section .catalog-home__visual {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

section.catalog-home-section .catalog-home__stack {
    position: relative !important;
    width: 420px !important;
    height: 540px !important;
    flex: 0 0 420px !important;
    overflow: visible !important;
    border: none !important;
}

section.catalog-home-section .catalog-home__card {
    position: absolute !important;
    inset: 0 !important;
    width: 420px !important;
    height: 540px !important;
    overflow: hidden !important;
    border-radius: 24px !important;
    box-shadow: 0 24px 60px rgba(15, 61, 46, .16) !important;
    clip-path: inset(0 round 24px) !important;
}

section.catalog-home-section .catalog-home__card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

section.catalog-home-section .catalog-home__card--back {
    transform: rotate(-7deg) translate(-28px, 18px) !important;
    opacity: .45 !important;
}

section.catalog-home-section .catalog-home__card--middle {
    transform: rotate(5deg) translate(24px, 10px) !important;
    opacity: .65 !important;
}

section.catalog-home-section .catalog-home__card--front {
    transform: rotate(-2deg) !important;
    z-index: 3 !important;
}

section.catalog-home-section .catalog-home__content {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

section.catalog-home-section .catalog-home__eyebrow {
    color: #C99A3B !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 3px !important;
    margin-bottom: 16px !important;
}

section.catalog-home-section .catalog-home__title {
    color: #073F35 !important;
    font-size: 3.2rem !important;
    line-height: 1.12 !important;
    margin: 0 0 24px !important;
}

section.catalog-home-section .catalog-home__description {
    color: rgba(7, 63, 53, .78) !important;
    font-size: 1.15rem !important;
    line-height: 1.7 !important;
    margin: 0 0 36px !important;
}

section.catalog-home-section .catalog-home__button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: #C99A3B !important;
    color: #fff !important;
    padding: 16px 36px !important;
    border-radius: 999px !important;
    text-decoration: none !important;
    font-weight: 700 !important;
}

@media (max-width: 768px) {
    section.catalog-home-section {
        padding: 70px 20px 80px !important;
    }

    section.catalog-home-section .catalog-home__inner {
        display: flex !important;
        flex-direction: column !important;
        gap: 34px !important;
        text-align: center !important;
    }

    section.catalog-home-section .catalog-home__content {
        align-items: center !important;
    }

    section.catalog-home-section .catalog-home__title {
        font-size: clamp(2.4rem, 10vw, 3.4rem) !important;
        line-height: 1.05 !important;
    }

    section.catalog-home-section .catalog-home__stack {
        width: min(82vw, 310px) !important;
        height: 390px !important;
        flex: 0 0 auto !important;
        margin: 0 auto !important;
        overflow: visible !important;
        position: relative !important;
    }

    section.catalog-home-section .catalog-home__card {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        border-radius: 22px !important;
        box-shadow: 0 24px 60px rgba(15, 61, 46, .16) !important;
        clip-path: inset(0 round 22px) !important;
        overflow: hidden !important;
    }

    section.catalog-home-section .catalog-home__card img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
    }

    section.catalog-home-section .catalog-home__card--back {
        transform: rotate(-4deg) translate(-12px, 10px) !important;
        opacity: .35 !important;
    }

    section.catalog-home-section .catalog-home__card--middle {
        transform: rotate(3deg) translate(12px, 8px) !important;
        opacity: .5 !important;
    }

    section.catalog-home-section .catalog-home__card--front {
        transform: rotate(-1deg) !important;
        z-index: 3 !important;
    }
}

/* ==========================================================================
   PROJECT DETAIL PAGE (English Language Center Mindo Case Study)
   ========================================================================== */

.project-detail-page {
    background-color: #FAF8F5;
    color: #333333;
    font-family: 'Outfit', 'Inter', sans-serif;
    overflow-x: hidden;
}

/* 1. Hero Section */
.project-hero {
    position: relative;
    height: 75vh;
    min-height: 550px;
    background-size: cover;
    background-position: center;
    background-attachment: scroll;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #ffffff;
    padding-top: 100px; /* space for fixed navbar */
}

.project-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(15, 61, 46, 0.4) 0%, rgba(11, 47, 37, 0.8) 100%);
    z-index: 1;
}

.project-hero__content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    padding: 0 20px;
}

.project-hero h1 {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 800;
    line-height: 1.1;
    color: #ffffff;
    margin-bottom: 20px;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.project-hero__subtitle {
    font-size: clamp(1.1rem, 2vw, 1.6rem);
    color: #C99A3B;
    font-weight: 500;
    margin-bottom: 35px;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.project-hero__cta .btn-primary {
    display: inline-flex;
    align-items: center;
    background-color: #C99A3B;
    color: #ffffff;
    padding: 16px 40px;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 8px 24px rgba(201, 154, 59, 0.3);
}

.project-hero__cta .btn-primary:hover {
    background-color: #b08530;
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(201, 154, 59, 0.45);
}

/* 2. Specs / Overview Section */
.project-overview {
    padding: 100px 0 60px;
    background-color: #ffffff;
}

.project-overview .section-title {
    text-align: center;
    font-size: clamp(2rem, 4vw, 3rem);
    color: #0F3D2E;
    margin-bottom: 15px;
    font-weight: 700;
}

.project-overview .section-desc {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 60px;
    color: #666666;
    font-size: 1.1rem;
    line-height: 1.6;
}

.project-specs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.spec-card {
    background-color: #FAF8F5;
    border: 1px solid rgba(15, 61, 46, 0.08);
    border-radius: 20px;
    padding: 30px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

.spec-card:hover {
    transform: translateY(-5px);
    border-color: rgba(201, 154, 59, 0.3);
    box-shadow: 0 12px 30px rgba(15, 61, 46, 0.05);
}

.spec-card__icon {
    font-size: 2.2rem;
    margin-bottom: 20px;
}

.spec-card__content h4 {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #888888;
    margin-bottom: 8px;
}

.spec-card__content p {
    font-size: 1.15rem;
    font-weight: 700;
    color: #0F3D2E;
    line-height: 1.3;
}

/* 3. Story Section (Split) */
.project-story {
    padding: 80px 0;
    background-color: #FAF8F5;
}

.story-split {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 60px;
    align-items: center;
}

.story-split__text h3 {
    font-size: 1.8rem;
    color: #0F3D2E;
    margin-bottom: 15px;
    margin-top: 35px;
    font-weight: 700;
}

.story-split__text h3:first-of-type {
    margin-top: 0;
}

.story-split__text p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #555555;
    margin-bottom: 25px;
}

.story-split__visual img {
    width: 100%;
    height: 520px;
    object-fit: cover;
    border-radius: 24px;
    box-shadow: 0 20px 40px rgba(15, 61, 46, 0.1);
}

/* 4. Photo Gallery */
.project-gallery {
    padding: 100px 0;
    background-color: #ffffff;
}

.project-gallery .section-title {
    text-align: center;
    font-size: clamp(2rem, 4vw, 3rem);
    color: #0F3D2E;
    margin-bottom: 50px;
    font-weight: 700;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 30px;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    height: 280px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.gallery-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(15, 61, 46, 0.15);
}

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

/* 5. Render Comparison Section */
.project-render-comparison {
    padding: 100px 0;
    background-color: #FAF8F5;
    border-top: 1px solid rgba(15, 61, 46, 0.05);
    border-bottom: 1px solid rgba(15, 61, 46, 0.05);
}

.project-render-comparison .section-title {
    text-align: center;
    font-size: clamp(2rem, 4vw, 3rem);
    color: #0F3D2E;
    margin-bottom: 50px;
    font-weight: 700;
}

.comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.comparison-card {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    height: 420px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
}

.comparison-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.comparison-card__tag {
    position: absolute;
    top: 20px;
    left: 20px;
    background-color: rgba(15, 61, 46, 0.95);
    color: #ffffff;
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    z-index: 2;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* 6. CTA Section */
.project-cta {
    padding: 100px 0;
    background-color: #ffffff;
}

.cta-card {
    background: linear-gradient(135deg, #0F3D2E 0%, #0B2F25 100%);
    border-radius: 30px;
    padding: 80px 40px;
    text-align: center;
    color: #ffffff;
    box-shadow: 0 25px 50px rgba(15, 61, 46, 0.25);
    position: relative;
    overflow: hidden;
}

.cta-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(201, 154, 59, 0.15), transparent 60%);
    z-index: 1;
}

.cta-card h2 {
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 800;
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
    color: #ffffff;
}

.cta-card p {
    font-size: 1.2rem;
    max-width: 600px;
    margin: 0 auto 40px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    position: relative;
    z-index: 2;
}

.cta-actions {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
}

.cta-actions .btn-whatsapp {
    background-color: #25D366;
    color: #ffffff;
    padding: 16px 40px;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.3);
}

.cta-actions .btn-whatsapp:hover {
    background-color: #20ba59;
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(37, 211, 102, 0.45);
}

.cta-actions .btn-outline {
    background-color: transparent;
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.3);
    padding: 14px 40px;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
}

.cta-actions .btn-outline:hover {
    background-color: #ffffff;
    color: #0F3D2E;
    border-color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(255, 255, 255, 0.15);
}

/* 7. Home Portfolio "More information" Button */
.portfolio-more-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 15px;
    background-color: transparent;
    border: 2px solid #C99A3B;
    color: #C99A3B;
    padding: 10px 24px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.portfolio-more-button i {
    transition: transform 0.3s ease;
}

.portfolio-more-button:hover {
    background-color: #C99A3B;
    color: #ffffff;
}

.portfolio-more-button:hover i {
    transform: translateX(4px);
}


/* ==========================================================================
   RESPONSIVE MEDIA QUERIES FOR CASE STUDY
   ========================================================================== */

@media (max-width: 991px) {
    .story-split {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .story-split__visual img {
        height: 380px;
    }
}

@media (max-width: 768px) {
    .project-hero {
        height: 60vh;
        min-height: 420px;
    }
    
    .project-overview {
        padding: 60px 0 40px;
    }
    
    .project-specs-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .spec-card {
        padding: 24px;
        flex-direction: row;
        text-align: left;
        gap: 20px;
    }
    
    .spec-card__icon {
        margin-bottom: 0;
    }
    
    .project-gallery {
        padding: 60px 0;
    }
    
    .gallery-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .gallery-item {
        height: 240px;
    }
    
    .project-render-comparison {
        padding: 60px 0;
    }
    
    .comparison-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .comparison-card {
        height: 300px;
    }
    
    .project-cta {
        padding: 60px 0;
    }
    
    .cta-card {
        padding: 50px 24px;
        border-radius: 20px;
    }
}

/* ==========================================================================
   Project Gallery Marquee Layout
   ========================================================================== */
.project-gallery-marquee {
    overflow: hidden;
    background: #FAF8F4;
}

.project-gallery-marquee__viewport {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: 18px 0;
}

.project-gallery-marquee__viewport::before,
.project-gallery-marquee__viewport::after {
    content: "";
    position: absolute;
    top: 0;
    width: 120px;
    height: 100%;
    z-index: 5;
    pointer-events: none;
}

.project-gallery-marquee__viewport::before {
    left: 0;
    background: linear-gradient(90deg, #FAF8F4 0%, rgba(250, 248, 244, 0) 100%);
}

.project-gallery-marquee__viewport::after {
    right: 0;
    background: linear-gradient(270deg, #FAF8F4 0%, rgba(250, 248, 244, 0) 100%);
}

.project-gallery-marquee__track {
    display: flex;
    gap: 18px;
    width: max-content;
    margin-bottom: 18px;
    will-change: transform;
}

.project-gallery-marquee__track--left {
    animation: projectGalleryMoveLeft 45s linear infinite;
}

.project-gallery-marquee__track--right {
    animation: projectGalleryMoveRight 50s linear infinite;
}

.project-gallery-marquee__item {
    flex: 0 0 auto;
    width: clamp(240px, 28vw, 420px);
    height: clamp(170px, 19vw, 280px);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 18px 45px rgba(7, 63, 53, 0.16);
    background: #0B3F35;
}

.project-gallery-marquee__item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.5s ease, filter 0.5s ease;
}

.project-gallery-marquee__item:hover img {
    transform: scale(1.04);
    filter: brightness(0.92);
}

@keyframes projectGalleryMoveLeft {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

@keyframes projectGalleryMoveRight {
    from {
        transform: translateX(-50%);
    }
    to {
        transform: translateX(0);
    }
}

.project-gallery-marquee__viewport:hover .project-gallery-marquee__track {
    animation-play-state: paused;
}

@media (max-width: 768px) {
    .project-gallery-marquee__viewport::before,
    .project-gallery-marquee__viewport::after {
        width: 56px;
    }

    .project-gallery-marquee__track {
        gap: 12px;
        margin-bottom: 12px;
    }

    .project-gallery-marquee__item {
        width: 260px;
        height: 180px;
        border-radius: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .project-gallery-marquee__track {
        animation: none !important;
        transform: none !important;
        overflow-x: auto;
    }
}

/* Home Hero Image Slider */
.home-hero-slider {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: clamp(650px, 92svh, 950px);
    background-color: #09261E; /* Brand background fallback */
    z-index: 1;
}

/* Base style for slides: hidden by default */
.home-hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 1;
    transition: opacity 800ms ease-in-out, visibility 800ms ease-in-out;
}

/* Fallback: If JS is disabled/fails, show first slide */
.home-hero-slide:first-of-type {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 2;
}

/* Active style when JS is active and slide is chosen */
.home-hero-slider.is-initialized .home-hero-slide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 1;
}

.home-hero-slider.is-initialized .home-hero-slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 3;
}

/* Media wrapper */
.home-hero-slide__media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.home-hero-slide__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Specific object position per slide */
.home-hero-slide__media--slide1 img {
    object-position: center 55%;
}

.home-hero-slide__media--slide2 img {
    object-position: center 60%;
}

.home-hero-slide__media--slide3 img {
    object-position: center;
}

/* Dark cinematic overlay */
.home-hero-slide__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(9, 38, 30, 0.45) 0%, rgba(9, 38, 30, 0.78) 100%);
    z-index: 1;
}

/* Content layout */
.home-hero-slide__content-container {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
}

/* Editorial content card */
.home-hero-slide__content {
    background: rgba(9, 38, 30, 0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: clamp(32px, 5vw, 56px);
    max-width: 650px;
    width: 100%;
    color: #FAF9F6;
    text-align: center;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
    box-sizing: border-box;
}

/* Micro-animations inside slide contents */
.home-hero-slide__eyebrow,
.home-hero-slide__title,
.home-hero-slide__text,
.home-hero-slide__actions {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 600ms ease-out, transform 600ms ease-out;
}

.home-hero-slide.is-active .home-hero-slide__eyebrow {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 200ms;
}

.home-hero-slide.is-active .home-hero-slide__title {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 350ms;
}

.home-hero-slide.is-active .home-hero-slide__text {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 500ms;
}

.home-hero-slide.is-active .home-hero-slide__actions {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 650ms;
}

/* Slide elements typography */
.home-hero-slide__eyebrow {
    display: block;
    font-size: clamp(11px, 1.2vw, 13px);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #C59B27;
    margin-bottom: 18px;
}

.home-hero-slide__title {
    font-size: clamp(26px, 3.8vw, 42px);
    font-weight: 800;
    line-height: 1.2;
    color: #FAF9F6;
    margin-bottom: 22px;
}

.home-hero-slide__text {
    font-size: clamp(14px, 1.4vw, 16px);
    line-height: 1.65;
    color: rgba(250, 249, 246, 0.88);
    margin-bottom: 36px;
}

/* Buttons actions */
.home-hero-slide__actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.home-hero-slide__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 600;
    padding: 14px 28px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    box-sizing: border-box;
}

.home-hero-slide__btn--primary {
    background-color: #C59B27;
    color: #09261E !important;
    border: none;
    box-shadow: 0 8px 20px rgba(197, 155, 39, 0.25);
}

.home-hero-slide__btn--primary:hover,
.home-hero-slide__btn--primary:focus {
    background-color: #FAF9F6;
    color: #09261E !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(250, 249, 246, 0.2);
    outline: none;
}

.home-hero-slide__btn--secondary {
    background-color: transparent;
    color: #FAF9F6 !important;
    border: 1px solid rgba(250, 249, 246, 0.3);
}

.home-hero-slide__btn--secondary:hover,
.home-hero-slide__btn--secondary:focus {
    background-color: rgba(250, 249, 246, 0.08);
    border-color: #FAF9F6;
    color: #FAF9F6 !important;
    transform: translateY(-2px);
    outline: none;
}

/* Controls */
.home-hero-slider__control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: rgba(9, 38, 30, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #FAF9F6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.home-hero-slider.is-initialized:hover .home-hero-slider__control {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.home-hero-slider.is-initialized .home-hero-slider__control:focus {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    outline: 2px solid #C59B27;
    outline-offset: 2px;
}

.home-hero-slider__control:hover {
    background-color: #C59B27;
    color: #09261E;
    border-color: #C59B27;
    transform: translateY(-50%) scale(1.05);
}

.home-hero-slider__control--prev {
    left: 24px;
}

.home-hero-slider__control--next {
    right: 24px;
}

/* Indicators */
.home-hero-slider__indicators {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 10;
    padding: 0;
    margin: 0;
    list-style: none;
}

.home-hero-slider__indicator {
    width: 28px;
    height: 4px;
    border-radius: 2px;
    background-color: rgba(255, 255, 255, 0.3);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.home-hero-slider__indicator:hover {
    background-color: rgba(255, 255, 255, 0.6);
}

.home-hero-slider__indicator.is-active {
    background-color: #C59B27;
    width: 44px;
}

.home-hero-slider__indicator:focus {
    outline: 2px solid #C59B27;
    outline-offset: 2px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .home-hero-slider {
        height: clamp(520px, 82svh, 750px);
    }

    .home-hero-slide__content-container {
        padding-top: calc(50px + env(safe-area-inset-top, 0px) + 20px);
    }


    .home-hero-slide__content {
        max-width: 92%;
        padding: 36px 24px;
        border-radius: 12px;
    }

    .home-hero-slider__control {
        display: none; /* Hide arrows on touch screens, use swipe */
    }

    .home-hero-slide__media--slide1 img {
        object-position: center 60%;
    }

    .home-hero-slide__media--slide2 img {
        object-position: center 50%;
    }
}

@media (max-width: 480px) {
    .home-hero-slider {
        height: clamp(480px, 78svh, 600px);
    }

    .home-hero-slide__content {
        max-width: 95%;
        padding: 24px 16px;
    }

    .home-hero-slide__eyebrow {
        margin-bottom: 12px;
    }

    .home-hero-slide__title {
        font-size: 22px;
        margin-bottom: 16px;
    }

    .home-hero-slide__text {
        font-size: 13.5px;
        margin-bottom: 28px;
        line-height: 1.55;
    }

    .home-hero-slide__actions {
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }

    .home-hero-slide__btn {
        width: 100%;
        padding: 12px 20px;
        font-size: 14px;
    }
    
    .home-hero-slider__indicators {
        bottom: 20px;
    }
}

/* Accessibility: prefers-reduced-motion support */
@media (prefers-reduced-motion: reduce) {
    .home-hero-slide {
        transition: none !important;
    }
    
    .home-hero-slide__eyebrow,
    .home-hero-slide__title,
    .home-hero-slide__text,
    .home-hero-slide__actions {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .home-hero-slider__control,
    .home-hero-slider__indicator,
    .home-hero-slide__btn {
        transition: none !important;
        transform: none !important;
    }
    
    .home-hero-slider__control:hover {
        transform: translateY(-50%) !important;
    }
}

/* Portfolio Desktop Marquee Loop */
.portfolio-viewport {
    width: 100%;
}

.portfolio-viewport.is-marquee-active {
    overflow: hidden;
    position: relative;
    padding: 20px 0;
    margin-top: -20px;
    margin-bottom: -20px;
}

.portfolio-track.is-marquee-active {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 3rem;
    width: max-content;
    animation: portfolio-marquee 45s linear infinite;
}

.portfolio-track.is-marquee-active:hover,
.portfolio-track.is-marquee-active:focus-within,
.portfolio-viewport.is-marquee-active:hover .portfolio-track,
.portfolio-viewport.is-marquee-active:focus-within .portfolio-track {
    animation-play-state: paused !important;
}

.portfolio-group {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 3rem;
}

@media (min-width: 1024px) {
    .portfolio-viewport.is-marquee-active .portfolio-item {
        flex: 0 0 370px;
        width: 370px;
        box-sizing: border-box;
    }
}

@keyframes portfolio-marquee {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(calc(-1 * (var(--portfolio-group-width) + 3rem)), 0, 0);
    }
}

/* Reduced Motion horizontal scroll */
.portfolio-viewport.is-reduced-motion {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    width: 100%;
    position: relative;
    padding: 20px 0;
    margin-top: -20px;
    margin-bottom: -20px;
    -webkit-overflow-scrolling: touch;
}

.portfolio-track.is-reduced-motion {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 3rem;
    width: max-content;
    animation: none !important;
    transform: none !important;
}

@media (min-width: 1024px) {
    .portfolio-viewport.is-reduced-motion .portfolio-item {
        flex: 0 0 370px;
        width: 370px;
        box-sizing: border-box;
    }
}