/* =========================================
   1. RESET, BASE Y VARIABLES
========================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    overflow-x: clip;
    scroll-behavior: smooth;
}

:root {
    --azul-costa: #00aaff;
    --azul-dark: #038dcb;
    --rojo-badge: #e30613;
    --gris-texto: #666666;
    --negro: #1d1d1d;
    --blanco: #ffffff;
    --transition: all 0.3s ease-in-out;
    --overlay-dark: rgba(0, 0, 0, 0.7);
    --section-spacing: clamp(3rem, 5vw, 4rem); /* Espaciado fluido */
}

body {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--blanco);
    color: var(--negro);
    font-size: 16px;
}

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

/* Clases utilitarias */
.page-padding-top { padding-top: 100px; }
.section-divider { margin-top: var(--section-spacing); }

.blue-bar-divider, .banner-blue-bg {
    background-color: var(--azul-dark);
    color: var(--blanco);
    text-align: center;
    padding: 20px 0;
    font-size: clamp(1.2rem, 3vw, 1.5rem); /* Título fluido */
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    width: 100%;
    position: relative;
    z-index: 10;
}

.blue-bar-divider strong, .banner-blue-bg strong { font-weight: 700; }

/* =========================================
   2. HEADER Y NAVEGACIÓN
========================================= */
.header { position: fixed; top: 0; width: 100%; background: rgba(255, 255, 255, 0.99); z-index: 2000; padding: 20px 0; transition: var(--transition); box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
.header.scrolled { padding: 10px 0; }
.header-container { display: flex; justify-content: space-between; align-items: center; }
.logo img { height: clamp(55px, 7vw, 90px); transition: var(--transition); }
.header.scrolled .logo img { height: 55px; }
.header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px; /* Grosor de la línea */
    /* Degradado lineal con corte duro al 30% */
    background: linear-gradient(90deg, #dcdcdc 0%, #dcdcdc 30%, var(--azul-costa) 30%, var(--azul-costa) 100%);
}

.nav-list { display: flex; list-style: none; gap: clamp(10px, 2vw, 20px); }
.nav-link { position: relative; padding-bottom: 8px; color: #444; text-decoration: none; font-weight: 600; font-size: clamp(11px, 1.2vw, 12px); text-transform: uppercase; transition: var(--transition); }
.nav-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 3px; background-color: #ccc; transition: var(--transition); }
.nav-link:hover { color: var(--negro); }
.nav-link:hover::after { width: 100%; }
.nav-link.active { color: var(--azul-costa); }
.nav-link.active::after { width: 100%; background-color: var(--azul-costa); }

/* =========================================
   3. SECCIÓN HERO HOME (BANNERS)
========================================= */
.hero-slider { width: 100%; position: relative; aspect-ratio: 1680 / 745; height: auto; overflow: hidden; margin-top: 85px; background-color: var(--blanco); }
.slider-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s ease-in-out; z-index: 1; }
.slide.active { opacity: 1; z-index: 2; }
.img-banner { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

/* =========================================
   4. PROYECTOS EN VENTA (HOME)
========================================= */
.proyectos-section-bg { background-image: url('img/fondo-home-living.jpg'); background-size: cover; background-position: center; background-attachment: fixed; width: 100%; }
.dark-overlay { background: var(--overlay-dark); padding: clamp(40px, 6vw, 80px) 0; width: 100%; }
.projects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(20px, 3vw, 30px); }
.project-card { background: #2a2a2a; color: var(--blanco); border-radius: 8px; overflow: hidden; transition: var(--transition); box-shadow: 0 10px 20px rgba(0,0,0,0.3); }
.project-img-container { position: relative; overflow: hidden; height: clamp(200px, 25vw, 300px); }
.project-img-container img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.project-card:hover .project-img-container img { transform: scale(1.1); }
.badge { position: absolute; top: 15px; left: 15px; background: var(--rojo-badge); color: var(--blanco); padding: 6px 15px; font-size: clamp(13px, 1.6vw, 16px); font-weight: 700; text-transform: uppercase; z-index: 10; border-radius: 2px; }
.project-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(3, 141, 203, 0.6); display: flex; justify-content: center; align-items: center; opacity: 0; transition: var(--transition); }
.project-card:hover .project-overlay { opacity: 1; }
.btn-ver-proyecto { border: 2px solid var(--blanco); color: var(--blanco); padding: 10px 20px; text-decoration: none; font-weight: 600; font-size: clamp(11px, 1.5vw, 13px); transition: var(--transition); }
.btn-ver-proyecto:hover { background: var(--blanco); color: var(--azul-dark); }
.project-info { padding: clamp(15px, 3vw, 25px); }
.project-info h3 { font-size: clamp(1.2rem, 2.5vw, 1.4rem); margin-bottom: 8px; color: var(--blanco); }
.project-info .location { font-size: clamp(0.8rem, 1.5vw, 0.9rem); color: #bbb; margin-bottom: 15px; }
.features { border-top: 1px solid #444; padding-top: 15px; margin-bottom: 15px; font-size: clamp(11px, 1.5vw, 13px); }
.price { font-size: clamp(12px, 1.5vw, 14px); margin-bottom: 20px; }
.price span { color: var(--azul-costa); font-weight: 700; font-size: clamp(1.1rem, 2vw, 1.2rem); }
.btn-card { display: block; width: 100%; padding: clamp(10px, 2vw, 14px); background: var(--azul-costa); color: var(--blanco); text-decoration: none; font-weight: 700; border-radius: 5px; text-align: center; transition: var(--transition); font-size: clamp(13px, 1.8vw, 16px); }
.btn-card:hover { background: var(--azul-dark); }

/* =========================================
   5. VIDEO CORPORATIVO
========================================= */
.corporate-video { width: 100%; padding: clamp(30px, 5vw, 40px) 0; background-image: url('../img/video/vista-previa-video.jpg'); background-size: cover; background-position: center center; position: relative; margin-top: var(--section-spacing); }
.video-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--overlay-dark); z-index: 1; }
.video-content { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; color: var(--blanco); flex-wrap: wrap; gap: 15px; }
.video-title { font-size: clamp(1.4rem, 3vw, 1.8rem); font-weight: 500; margin: 0; letter-spacing: 0.1em; }
.video-separator { width: 2px; height: clamp(1.5rem, 3vw, 2.5rem); background-color: var(--blanco); margin: 0 1rem; opacity: 0.8; }
.play-trigger { display: flex; align-items: center; text-decoration: none; color: var(--blanco); transition: transform 0.3s ease, opacity 0.3s ease; }
.play-trigger:hover { transform: scale(1.05); opacity: 0.9; }
.play-icon-circle { width: clamp(2.5rem, 5vw, 3.2rem); height: clamp(2.5rem, 5vw, 3.2rem); background-color: var(--azul-costa); border-radius: 50%; display: flex; justify-content: center; align-items: center; margin-right: 0.8rem; box-shadow: 0 4px 10px rgba(0, 170, 255, 0.4); }
.play-icon-circle i { font-size: clamp(1rem, 2vw, 1.2rem); margin-left: 0.2rem; }
.play-text { font-size: clamp(1rem, 2vw, 1.2rem); font-weight: 500; letter-spacing: 0.1em; }

/* =========================================
   6. QUIÉNES SOMOS (MAMPOSTERÍA)
========================================= */
.about-section { padding: clamp(40px, 6vw, 80px) 0; background-color: var(--blanco); }
.about-top-wrapper { display: flex; gap: clamp(20px, 4vw, 40px); margin-bottom: 20px; align-items: stretch; }
.about-gallery-grid { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: clamp(10px, 2vw, 15px); }
.about-gallery-grid img { width: 100%; height: 100%; object-fit: cover; }
.img-tall { grid-column: 1; grid-row: 1 / 3; }
.img-short { grid-column: 2; }
.about-text-content { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.about-title { color: var(--azul-costa); font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: clamp(15px, 2.5vw, 25px); display: flex; align-items: center; gap: 15px; text-transform: uppercase; }
.about-title::before { content: ''; display: block; width: 6px; height: 1.1em; background-color: var(--azul-costa); }
.about-text-content p { color: var(--gris-texto); line-height: 1.8; font-size: clamp(0.9rem, 1.5vw, 1rem); margin-bottom: 20px; text-align: justify; }
.about-text-content p strong { color: var(--azul-costa); }
.about-bottom-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 2vw, 15px); }
.about-bottom-gallery img { width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* =========================================
   7. CONTADORES ANIMADOS
========================================= */
.counters-section { padding: clamp(60px, 8vw, 100px) 0 clamp(80px, 12vw, 160px) 0; background-color: var(--blanco); }
.counters-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(20px, 4vw, 40px); justify-content: center; }
.counter-box { display: flex; flex-direction: column; align-items: flex-start; max-width: 250px; margin: 0 auto; }
.counter-prefix { color: var(--azul-costa); font-size: clamp(1rem, 2vw, 1.2rem); font-weight: 700; text-transform: uppercase; margin-bottom: -5px; }
.counter-number { color: #BCBBBF; font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 700; line-height: 1.1; margin-bottom: 5px; font-family: 'Montserrat', sans-serif; font-variant-numeric: tabular-nums; }
.counter-text { border-left: 4px solid var(--azul-dark); padding-left: 12px; }
.counter-text p { color: #BCBBBF; font-size: clamp(0.85rem, 1.5vw, 1.1rem); font-weight: 400; line-height: 1.3; text-transform: uppercase; margin: 0; }

/* =========================================
   8. FOOTER Y BOTONES FLOTANTES
========================================= */
.main-footer { background-color: #04537A; color: var(--blanco); position: relative; padding-bottom: 30px; }
.footer-top-bar { width: 100%; height: 18px; background-color: #e6e6e6; }
.footer-content { padding-top: clamp(30px, 5vw, 50px); }
.footer-grid { display: flex; justify-content: space-between; flex-wrap: wrap; gap: clamp(20px, 4vw, 40px); margin-bottom: 40px; }
.footer-col h4 { font-size: clamp(0.95rem, 2vw, 1.1rem); font-weight: 500; margin-bottom: 20px; letter-spacing: 0.05em; text-transform: uppercase; }
.footer-contact-list { list-style: none; padding: 0; }
.footer-contact-list li { margin-bottom: 15px; }
.footer-contact-list a { color: var(--blanco); text-decoration: none; font-size: clamp(0.85rem, 1.5vw, 1rem); display: flex; align-items: center; gap: 12px; transition: var(--transition); }
.footer-contact-list a:hover { color: var(--azul-costa); }
.footer-contact-list i { font-size: clamp(1rem, 2vw, 1.2rem); width: 20px; text-align: center; }
.social-links { display: flex; gap: 20px; }
.social-links a { color: var(--blanco); font-size: clamp(1.2rem, 2.5vw, 1.4rem); transition: var(--transition); }
.social-links a:hover { color: var(--azul-costa); transform: translateY(-3px); }
.footer-legal { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 25px; text-align: center; }
.footer-legal p { font-size: clamp(9px, 1.2vw, 10px); line-height: 1.6; color: #cccccc; margin: 0 auto; max-width: 90%; }

.whatsapp-btn { position: fixed; bottom: 20px; left: 20px; background: #25d366; color: var(--blanco); padding: clamp(10px, 1.5vw, 12px) clamp(15px, 2.5vw, 20px); border-radius: 30px; text-decoration: none; z-index: 1000; display: flex; align-items: center; gap: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.2); transition: var(--transition); font-weight: 600; font-size: clamp(13px, 1.8vw, 16px); }
.whatsapp-btn:hover { transform: translateY(-3px); box-shadow: 0 6px 15px rgba(0,0,0,0.3); }
.scroll-top-btn { position: fixed; bottom: 20px; right: 20px; width: clamp(40px, 6vw, 50px); height: clamp(40px, 6vw, 50px); background: var(--azul-costa); color: var(--blanco); border: none; border-radius: 50%; cursor: pointer; display: none; z-index: 1000; box-shadow: 0 4px 10px rgba(0,0,0,0.2); transition: var(--transition); font-size: clamp(1rem, 1.5vw, 1.2rem); }
.scroll-top-btn:hover { background: var(--azul-dark); }

/* =========================================
   9. MODAL POPUP (BIENVENIDA)
========================================= */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.88); display: none; justify-content: center; align-items: center; z-index: 9999; opacity: 0; transition: opacity 0.5s ease; }
.modal-wrapper { position: relative; width: 90%; max-width: 500px; animation: modalEntrada 0.4s ease; }
@keyframes modalEntrada { from { transform: translateY(-30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.modal-body img { width: 100%; height: auto; border-radius: 8px; display: block; border: 3px solid rgba(255,255,255,0.1); }
.close-modal { position: absolute; top: -40px; right: -10px; background: var(--rojo-badge); color: var(--blanco); border: none; width: clamp(30px, 4vw, 35px); height: clamp(30px, 4vw, 35px); border-radius: 50%; font-size: clamp(20px, 3vw, 24px); cursor: pointer; z-index: 10001; display: flex; justify-content: center; align-items: center; transition: var(--transition); }
.close-modal:hover { transform: rotate(90deg) scale(1.1); background: #ff0000; }
.timer-badge { position: absolute; bottom: -45px; left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, 0.7); color: var(--blanco); padding: 5px 15px; border-radius: 20px; font-size: clamp(12px, 1.5vw, 14px); border: 1px solid rgba(255,255,255,0.2); }

/* =========================================
   10. PÁGINA: PROYECTOS REALIZADOS
========================================= */
.inner-hero { position: relative; width: 100%; height: 55vh; min-height: 250px; margin-top: 85px; display: flex; align-items: center; overflow: hidden; }
.inner-hero-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }
.inner-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.inner-hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: 1; }
.relative-z { position: relative; z-index: 2; }
.inner-hero-container { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 5%; }
.inner-hero-text { border-left: clamp(4px, 1vw, 6px) solid var(--azul-costa); padding-left: clamp(10px, 2vw, 20px); color: var(--blanco); max-width: 600px; }
.inner-hero-text h2 { font-size: clamp(1.5rem, 4vw, 2.5rem); margin-bottom: 5px; font-weight: 600; }
.inner-hero-text p { font-size: clamp(0.9rem, 1.5vw, 1.2rem); font-weight: 500; }
.title-underline { width: clamp(30px, 5vw, 50px); height: 3px; background-color: var(--blanco); margin: 5px auto 0 auto; }

.realizados-section { padding: clamp(40px, 6vw, 60px) 0; background-color: #fff; }
.realizados-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(15px, 2.5vw, 30px); }
.realizado-item { background: var(--blanco); padding: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; height: 100%; }
.realizado-item:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.15); }
.realizado-item a { text-decoration: none; display: flex; flex-direction: column; height: 100%; }
.realizado-img-wrap { width: 100%; aspect-ratio: 1 / 1; overflow: hidden; flex-shrink: 0; }
.realizado-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.realizado-item:hover .realizado-img-wrap img { transform: scale(1.05); }
.realizado-info { background-color: var(--azul-costa); color: var(--blanco); padding: clamp(10px, 1.5vw, 15px); text-align: left; margin-top: 0; flex-grow: 1; display: flex; flex-direction: column; justify-content: center; }
.realizado-info h4 { font-size: clamp(0.75rem, 1.2vw, 0.9rem); margin-bottom: 3px; font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.realizado-info span { font-size: clamp(0.7rem, 1vw, 0.8rem); font-weight: 400; margin-top: auto; }

/* =========================================
   11. PÁGINA: EDIFICIO HUASCO
========================================= */
.huasco-slider { aspect-ratio: 21 / 9; height: auto; background-color: var(--blanco); margin-top: 85px; }

.huasco-attributes-bar { 
border-top: 1px solid #eaeaea; 
    border-bottom: 1px solid #eaeaea; 
    padding: clamp(15px, 2vw, 25px) 0; /* Un poco más de padding vertical para respirar */
    background-color: var(--blanco); 
    width: 100%;
 }
.attributes-grid { display: flex; justify-content: space-between; align-items: center; flex-direction: row; flex-wrap: nowrap; gap: 15px; }
.attr-item { display: flex; flex-direction: column; justify-content: center; }

.location-item h4 { color: var(--azul-costa); font-size: clamp(1.1rem, 1.8vw, 1.3rem); font-weight: 700; margin-bottom: 4px; }
.location-item span { color: var(--gris-texto); font-size: clamp(0.75rem, 1.2vw, 0.85rem); font-weight: 600; text-transform: uppercase; }

.features-item .feature-row:last-child {
    margin-bottom: 0; /* Evita margen sobrante abajo */
}
.features-item .feature-row { display: flex; align-items: center; gap: 8px; color: var(--azul-dark); font-size: clamp(0.9rem, 1.5vw, 1.1rem); font-weight: 600; margin-bottom: 12px; }
.features-item i { color: #b0b0b0; width: 20px; text-align: center; font-size: 1.1rem; /* Íconos un poco más grandes */}

.attr-divider { width: 1px; height: 45px; background-color: #dcdcdc; }

.status-badge { color: var(--azul-costa); font-weight: 700; font-size: clamp(1.1rem, 1.8vw, 1.3rem); letter-spacing: 0.05em; text-transform: uppercase; }

.price-item { text-align: right; flex-direction: row; align-items: center; gap: 10px; }
.price-item span { color: var(--gris-texto); font-size: clamp(0.9rem, 1.4vw, 1.1rem); }
.price-item strong { color: var(--azul-costa); font-size: clamp(1.4rem, 2.8vw, 1.8rem); font-weight: 700; }

.huasco-sticky-nav { 
    background-color: #f4f4f4; 
    padding: clamp(10px, 1.5vw, 15px) 0; 
    
    /* Reglas para que se quede pegado */
    position: sticky !important; 
    top: 69px !important; /* La altura exacta de tu menú superior al hacer scroll */
    z-index: 1500 !important; /* Lo mantiene por encima del contenido, pero por debajo del menú principal (z-index: 2000) */
    
    box-shadow: 0 4px 10px rgba(0,0,0,0.5); 
}

/* Botón Móvil (Oculto en Desktop) */
.mobile-project-menu-btn {
    display: none;
    width: 100%;
    background-color: var(--negro);
    color: var(--blanco);
    border: none;
    padding: 12px;
    font-size: 1rem;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    border-radius: 5px;
    cursor: pointer;
    text-transform: uppercase;
}

.mobile-project-menu-btn i {
    margin-right: 8px;
}
.nav-buttons-container { 
    display: flex; 
    justify-content: center; 
    gap: clamp(8px, 1.5vw, 15px); 
    flex-wrap: wrap; 
}
.btn-internal { 
    background-color: #e0e0e0; 
    color: #555; 
    padding: clamp(6px, 1vw, 8px) clamp(12px, 2vw, 20px); 
    border-radius: 20px; 
    text-decoration: none; 
    font-size: clamp(0.75rem, 1.2vw, 0.85rem); 
    font-weight: 600; 
    transition: var(--transition); 
}

.btn-internal:hover { 
    background-color: #d0d0d0; 
    color: var(--negro); 
}

.btn-gradient { 
    background: linear-gradient(90deg, #3b82f6, #9b51e0); 
    color: var(--blanco); 
    border: none; 
}

.btn-gradient:hover { 
    background: linear-gradient(90deg, #2563eb, #7e22ce); 
    color: var(--blanco); 
    transform: translateY(-2px); 
}

/* --- 4. SECCIÓN EDIFICIO (Render Full Width y Multiply Real) --- */
.huasco-edificio-section {
    width: 100%;
    margin-top: 40px;
    background-color: var(--blanco);
    display: flex;
    flex-direction: column; /* Apila el título arriba y la foto abajo */
}

/* 1. Fila del título (El "Techo") */
.edificio-title-row {
    width: 100%;
    background-color: var(--blanco); /* El fondo a la derecha queda blanco */
}

.edificio-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 95%; /* La imagen llega al 95% como indicaste */
    height: 100%;
    background-size: cover;
    background-position: left center;
    z-index: 1;
}

/* LA MAGIA: La capa Multiply aislada */
.edificio-blue-multiply {
    position: absolute;
    top: 0;
    right: 0; /* Anclado a tope a la derecha */
    width: 45%; /* 45% + 55% del título = Convergencia milimétrica */
    height: 85%; /* Sube un poco para que se vea foto abajo */
    background-color: #003688; /* Azul oscuro para un multiply perfecto */
    mix-blend-mode: multiply; /* ¡Ahora sí funcionará el efecto fusión! */
    border-bottom-left-radius: 60px; /* Curva abajo a la izquierda */
    opacity: 0.95; /* REDUCIMOS LA INTENSIDAD para mayor transparencia */
    z-index: 2; /* Sobre la foto */
}

/* Contenedor del texto (sobre la capa multiply) */
.edificio-text-container {
    position: absolute;
    top: 0;
    right: 0; /* Anclado a tope a la derecha */
    width: 45%;
    height: 85%;
    display: flex;
    align-items: center; /* Centrado vertical */
    padding-left: clamp(40px, 4vw, 60px);
    padding-right: max(20px, calc(50vw - 580px)); /* Alineado con el borde del container */
    z-index: 3; /* Texto por encima de todo */
}

/* 2. Franja del título superior (Capa 2) */
.edificio-header-row {
    position: relative;
    z-index: 4;
}

.edificio-title-badge {
    width: 55%; /* Llega exactamente hasta el 55% */
    background: linear-gradient(90deg, #5A7ECA 0%, #D40B83 100%);
    border-top-right-radius: 25px; /* Esto crea la curva arriba a la derecha */
    border-bottom-right-radius: 0; /* Esto asegura que abajo quede totalmente recto */
    padding: 15px 0;
    padding-left:  max(20px, calc(40vw - 580px)); /* Alineación perfecta con el container */
}

.edificio-title-badge h2 {
    color: var(--blanco);
    font-size: clamp(1.1rem, 1.8vw, 1.6rem);
    font-weight: 600;
    letter-spacing: 0.1em;
    margin: 0;
    text-transform: uppercase;
}

/* 2. Área de contenido (Imagen + Azul) */
.edificio-content-area {
    position: relative;
    width: 100%;
    min-height: 750px; /* Altura de la foto aumentada */
}
/* Contenedor que empuja el azul a la derecha */
.edificio-main-wrapper {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: flex-end; /* Fuerza la caja azul a la orilla derecha */
    padding: 0 20px;
}

/* 3. El bloque azul Multiply (Apegado arriba y a la orilla derecha, Capa 3) */
.edificio-blue-box {
    position: relative;
    z-index: 2;
    /* Ancho calculado para que nazca *exactamente* donde termina el título superior */
    width: 100%;
    max-width: calc(100vw - max(20px, calc(50vw - 580px)) - 55%); /* 55% es el ancho aprox del título superior */
    background-color: rgba(0, 61, 133, 0.95); /* Azul corporativo oscuro */
    mix-blend-mode: multiply; /* Efecto fusión perfecto con la foto y el blanco */
    border-bottom-left-radius: 60px; /* Curva ABAJO a la izquierda */
    padding: clamp(40px, 5vw, 60px) clamp(30px, 4vw, 50px);
    color: var(--blanco);
}

.edificio-blue-box::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #003e82; 
    mix-blend-mode: multiply; 
    border-bottom-left-radius: 60px; 
    z-index: -1;
}

/* Ajustes para el texto interno */
.info-box-content {
    color: var(--blanco);
    width: 100%;
    max-width: 500px;
}

.info-box-content h3 {
    /* Tamaño reducido para evitar cortes */
    font-size: clamp(1.2rem, 2vw, 1.5rem); 
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 25px;
    text-transform: uppercase;
}

.info-box-content .underline-text {
    border-bottom: 3px solid var(--blanco);
    padding-bottom: 2px;
}

.info-box-content .lead-text {
    font-weight: 700;
    font-size: clamp(0.85rem, 1.3vw, 0.95rem);
    margin-bottom: 15px;
    text-transform: uppercase;
}

.info-box-content p {
    font-size: clamp(0.85rem, 1.3vw, 0.9rem);
    line-height: 1.6;
    margin-bottom: 10px;
}

.info-box-content small {
    display: block;
    margin-top: 30px;
    font-size: 0.75rem;
    font-weight: 700;
}

/* =========================================
   SECCIÓN 5: UBICACIÓN
========================================= */
.huasco-ubicacion-section {
    padding: clamp(60px, 8vw, 100px) 0;
    background-color: var(--blanco);
}

.ubicacion-grid {
    display: grid;
    /* AQUÍ HACEMOS EL MAPA MÁS ANCHO: 4 partes a la izq, 5.5 partes a la der */
    grid-template-columns: 4fr 5.5fr; 
    gap: clamp(60px, 8vw, 120px);
    align-items: start;
}

/* --- Títulos Lado Izquierdo --- */
.ubicacion-title-box {
    margin-bottom: 25px;
}

.ubicacion-title-box h2 {
    color: var(--azul-costa);
    font-size: clamp(2rem, 3.5vw, 2.8rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 5px;
}

.ubicacion-title-box h3 {
    color: #4a78b9; 
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    font-weight: 400;
    line-height: 1.1;
}

.ubicacion-intro {
    color: var(--negro);
    font-size: clamp(0.95rem, 1.5vw, 1.05rem);
    font-weight: 500;
    line-height: 1.6;
    margin-bottom: 40px;
}

/* --- Lista de Características --- */
.ubicacion-features-list {
    display: flex;
    flex-direction: column;
    gap: 45px;
}

.feature-item {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

/* Los cuadrados azules con íconos */
.feature-icon-box {
    flex-shrink: 0;
    width: 110px; /* Tamaño base del SVG */
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.feature-icon-box img {
    width: 100%;
    height: auto;
    display: block;
}

.feature-text-box h4 {
    color: var(--azul-costa);
    font-size: clamp(1.1rem, 1.8vw, 1.25rem);
    font-weight: 700;
    margin-bottom: 8px;
}

.feature-text-box p {
    color: var(--gris-texto);
    font-size: clamp(0.85rem, 1.2vw, 0.95rem);
    line-height: 1.6;
}

/* --- Columna Derecha (Mapa) --- */
.ubicacion-map-wrapper {
    width: 100%;
    border-radius: 15px; 
    overflow: hidden;    
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.map-gradient-header {
    background: linear-gradient(90deg, #5A7ECA 0%, #D40B83 100%);
    color: var(--blanco);
    padding: 15px 30px;
    font-size: clamp(1.1rem, 1.8vw, 1.3rem);
    font-weight: 600;
    letter-spacing: 0.05em;
}

.map-iframe-container {
    width: 100%;
    height: 660px; 
    background-color: #eaeaea; 
}

.map-iframe-container iframe {
    width: 100%;
    height: 100%;
    display: block;
}

/* --- Galería de Imágenes de Ubicación --- */
.ubicacion-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: clamp(15px, 2vw, 30px);
    margin-top: clamp(60px, 8vw, 100px); 
    /* EL CAMBIO ESTÁ AQUÍ: Agregamos espacio flexible a izquierda y derecha */
    padding: 0 clamp(20px, 5vw, 80px);
}

.ubicacion-gallery-item {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3; /* Proporción rectangular clásica para las fotos */
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* Sutil sombra para dar volumen */
}

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

/* Efecto hover suave en la imagen */
.ubicacion-gallery-item:hover img {
    transform: scale(1.05);
}

.ubicacion-gallery-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(43, 104, 172, 0.85); /* Azul con un toque de transparencia */
    padding: clamp(12px, 1.5vw, 16px) 10px;
    text-align: center;
}

.ubicacion-gallery-caption span {
    color: var(--blanco);
    font-size: clamp(0.9rem, 1.2vw, 1.05rem);
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* =========================================
   SECCIÓN 6: ÁREAS COMUNES
========================================= */
.huasco-areas-comunes-section {
    padding: clamp(60px, 8vw, 100px) 0;
    background-color: #f7f8f9; /* Gris atenuado muy elegante */
}

/* --- Títulos --- */
.areas-header {
    text-align: center;
    margin-bottom: clamp(30px, 4vw, 50px);
}

.areas-header h2 {
    color: var(--azul-costa);
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    font-weight: 700;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.areas-header h3 {
    color: #4a78b9; /* Azul ligeramente más suave */
    font-size: clamp(1.1rem, 1.8vw, 1.4rem);
    font-weight: 400;
    text-transform: uppercase;
}

/* --- Imagen Hero de la sección --- */
.areas-hero-image {
    width: 100%;
    /* Aspect Ratio para que quede rectangular tipo banner */
    aspect-ratio: 21 / 9; 
    overflow: hidden;
    margin-bottom: clamp(40px, 6vw, 60px);
}

.areas-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* --- Grid de Contenido Inferior --- */
.areas-content-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr; /* Columna derecha un poco más ancha */
    gap: clamp(40px, 6vw, 80px);
    align-items: start;
}

/* Columna Izquierda: Descripción */
.areas-description h4 {
    color: var(--azul-dark);
    font-size: clamp(1.3rem, 2vw, 1.6rem);
    font-weight: 500;
    margin-bottom: 20px;
}

.areas-description p {
    color: var(--negro);
    font-size: clamp(0.85rem, 1.2vw, 0.95rem);
    line-height: 1.7;
    margin-bottom: 15px;
    font-weight: 400;
}

/* Columna Derecha: Listado de Amenities */
.areas-amenities-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.amenity-row {
    display: grid;
    grid-template-columns: 1fr 2fr; /* Categoría izq, Items der */
    gap: 20px;
}

.amenity-category {
    color: var(--azul-costa);
    font-size: clamp(0.9rem, 1.3vw, 1.05rem);
    font-weight: 600;
    line-height: 1.3;
}

.amenity-items-wrapper {
    /* Agrega la línea superior del primer elemento */
    border-top: 1px solid #dcdcdc; 
    display: flex;
    flex-direction: column;
}

.amenity-item {
    padding: 12px 0;
    border-bottom: 1px solid #dcdcdc; /* Líneas separadoras */
    color: var(--negro);
    font-size: clamp(0.85rem, 1.2vw, 0.9rem);
    font-weight: 500;
}

/* =========================================
   SECCIÓN 7: GALERÍA (Grilla y Fancybox)
========================================= */
.huasco-galeria-section {
    padding: clamp(60px, 8vw, 80px) 0;
    background-color: var(--blanco);
}

/* Título Central */
.galeria-header {
    text-align: center;
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.galeria-header h2 {
    color: var(--azul-dark);
    font-size: clamp(1.8rem, 3vw, 2.2rem);
    font-weight: 800;
    text-transform: uppercase;
}
.title-underline-blue {
    width: 60px;
    height: 4px;
    background-color: var(--azul-costa);
    margin-top: 5px;
}

/* Grilla Exterior de Fotos */
.galeria-fotos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px; /* Poco espacio entre fotos como en tu diseño */
}

.galeria-foto-item {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    display: block;
}

.galeria-foto-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

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

.galeria-foto-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(18, 77, 143, 0.85); /* Azul oscuro con transparencia */
    padding: 15px 10px;
    text-align: center;
}

.galeria-foto-caption span {
    color: var(--blanco);
    font-size: clamp(0.9rem, 1.2vw, 1.1rem);
    font-weight: 600;
}


/* =========================================
   ESTILOS INTERNOS DEL MODAL FANCYBOX
========================================= */

/* 1. Forzamos flexbox porque Fancybox inyecta "display: block" por defecto */
.fancybox-html-modal {
    display: flex !important; 
    flex-direction: row !important;
    gap: 20px; 
    width: 95vw !important;
    max-width: 1200px !important;
    background: transparent !important; 
    padding: 0 !important; 
    align-items: stretch; 
    margin: 0 auto;
}

/* Caja de Información (Izquierda) */
.modal-info-box {
    width: 40%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 20px;
    padding: 50px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: var(--blanco);
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.modal-logo-huasco {
    width: 130px;
    height: auto;
    margin-bottom: auto; /* Empuja el contenido al centro */
}

.modal-text-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: auto;
    margin-bottom: auto;
}

.vive-full-svg {
    width: 220px; /* SVG mucho más grande, igual al diseño */
    height: auto;
    margin-bottom: 10px;
}

.modal-title-cyan {
    font-size: clamp(2.2rem, 3vw, 2.8rem); /* Texto destacado */
    font-weight: 800;
    color: #00ffff; /* Cyan eléctrico brillante */
    line-height: 1.1;
    margin-bottom: 5px;
}

.modal-subtitle {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--blanco);
}

.modal-info-box p {
    font-size: 0.95rem;
    line-height: 1.5;
    font-weight: 400;
    padding: 0 10px;
}

/* Caja de Foto (Derecha) */
.modal-photo-box {
    width: 60%;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    display: flex;
}

.modal-main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    min-height: 500px; /* Asegura una excelente altura */
}

.modal-logo-costasur {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 110px;
    background-color: var(--blanco);
    padding: 10px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* =========================================
   2. OVERRIDE A FANCYBOX (FONDO BLANCO)
========================================= */
/* Cambiamos el fondo oscuro por el blanco de tu diseño */
.fancybox__backdrop {
    background: rgba(15, 15, 15, 0.95) !important;
}
.fancybox__slide {
    background: transparent !important;
    /* Damos un margen superior en móviles para que no choque con tu header */
    padding-top: clamp(20px, 10vh, 80px) !important;
}
/* Cambiamos los botones a oscuros para que se vean sobre el blanco */
.fancybox__nav .carousel__button,
.fancybox__toolbar .carousel__button {
    color: var(--blanco) !important; /* Volvemos a ponerlos blancos para que se vean en fondo oscuro */
    background: rgba(0, 0, 0, 0.5) !important; /* Un fondito sutil para que destaquen */
    border-radius: 50% !important;
}
/* Hacemos la X de cerrar un poco más grande y notoria */
.fancybox__toolbar .carousel__button.is-close {
    transform: scale(1.2);
    margin-top: 10px;
    margin-right: 10px;
}
/* Asegura que el modal de Fancybox cubra siempre los menús fijos */
.fancybox__container {
    z-index: 9999 !important;
}

/* =========================================
   SECCIÓN 8: QUIÉN VIVIRÁ O INVERTIRÁ (BANNER)
========================================= */
.huasco-inversion-section {
    width: 100%;
    padding: clamp(60px, 8vw, 100px) 0;
    background-color: var(--blanco);
    display: flex;
    justify-content: center;
}

/* El contenedor al 90% según diseño */
.banner-90-container {
    width: 90%;
    max-width: 1400px;
    display: flex;
    flex-direction: column;
}

/* Contenedor del banner ahora relativo para atajar a la imagen */
.banner-inversion-top {
    position: relative;
    width: 100%;
    min-height: 580px;
    display: flex;
    justify-content: flex-end; /* Empuja el texto a la derecha */
    align-items: center;
    padding: 60px 6%; /* Deja un margen derecho seguro */
    overflow: hidden;
}

/* La magia del <picture> como fondo */
.banner-inversion-picture {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 1; /* Al fondo */
}

.banner-inversion-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Columna de texto angostada para despejar el logo */
.banner-inversion-text {
    position: relative;
    z-index: 2; /* Sobre la foto */
    width: 38%; /* ANGOSTADO: Deja más del 60% para la foto libre */
    max-width: 480px; 
    color: var(--blanco);
}

.banner-inversion-text h2 {
    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: 800;
    line-height: 1.1;
}

.banner-inversion-text h3 {
    font-size: clamp(1.2rem, 2vw, 1.8rem);
    font-weight: 500;
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.banner-inversion-text p {
    font-size: clamp(0.9rem, 1.2vw, 1rem);
    line-height: 1.6;
    font-weight: 400;
}

/* Franja Azul inferior */
.banner-inversion-bottom {
    width: 100%;
    background-color: #00459c; /* Azul oscuro */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 8%;
}

.cyan-accent-box {
    width: 60px;
    height: 80px;
    background-color: #00c3ff; /* Rectángulo cyan de la izquierda */
}

.btn-outline-white {
    display: inline-block;
    color: var(--blanco);
    border: 1px solid var(--blanco);
    padding: 12px 30px;
    text-decoration: none;
    font-weight: 600;
    text-transform: uppercase;
    font-size: clamp(0.85rem, 1.2vw, 0.95rem);
    transition: var(--transition);
}

.btn-outline-white:hover {
    background-color: var(--blanco);
    color: #00459c;
}

/* =========================================
   ESTILOS DEL MODAL (PERFILES)
========================================= */
.modal-perfiles {
    background-color: var(--blanco) !important; 
    padding: 60px !important; 
    display: flex !important;
    flex-direction: column !important;
    gap: 80px; 
    max-width: 1200px !important;
    
    /* --- CORRECCIÓN DEL SCROLL --- */
    overflow-x: hidden !important; /* Solo esconde el exceso lateral de las franjas */
    overflow-y: auto !important;   /* ¡Habilita el scroll hacia abajo! */
    max-height: 95vh !important;   /* Evita que el modal sea más alto que tu pantalla */
}

.perfil-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start !important; /* Alinea todo arriba (top) en vez del centro */
}

/* Las imágenes con borde desplazado (offset frame) */
.img-offset-frame {
    position: relative;
    width: 100%;
    /* ANTES 75% -> AHORA 95%: Aumenta la altura y tamaño de las imágenes */
    padding-bottom: 95%; 
    z-index: 1;
    margin-top: 10px; /* Ajuste milimétrico para quedar a la altura exacta del texto de la franja */
}

.perfil-img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 2;
    border-radius: 5px; /* Suave toque de diseño en las esquinas */
}

/* El marco azul delgado */
.img-offset-frame::before {
    content: '';
    position: absolute;
    border: 2px solid #5A7ECA;
    z-index: 0;
    border-radius: 5px;
}

/* Ajuste del marco para que no se salga de la pantalla al pegar la foto al borde izquierdo */
.frame-top-left::before {
    top: -15px; left: 15px; /* Invertimos el offset para que vaya hacia adentro */
    right: -15px; bottom: 15px;
}
.frame-bottom-right::before {
    top: 15px; left: -15px;
    right: 15px; bottom: -15px;
}

/* ----- FILA 1: COMPRADOR RESIDENCIAL ----- */
/* 1. Imagen pegada al borde izquierdo */
.perfil-row:nth-child(1) .perfil-img-col {
    margin-left: -60px; /* Empuja la imagen anulando el padding del modal */
}

/* 2. Franja Superior extendida a la derecha */
.perfil-row:nth-child(1) .perfil-badge {
    display: block;
    width: calc(100% + 60px); /* Crece para cubrir el borde derecho */
    margin-right: -60px; /* Se estira hacia la derecha al máximo */
    padding-right: 60px; /* Empuja el texto hacia la izquierda manteniendo su lugar original */
    border-radius: 10px 0 0 10px; /* Borde totalmente recto en la derecha */
}

/* ----- FILA 2: INVERSIONISTA ----- */
/* 3. Franja Inferior extendida a la izquierda */
.perfil-row:nth-child(2) .perfil-badge {
    display: block;
    width: calc(100% + 60px); /* Crece para cubrir el borde izquierdo */
    margin-left: -60px; /* Se estira hacia la izquierda al máximo */
    padding-left: 60px; /* Empuja el texto hacia la derecha manteniendo su lugar original */
    border-radius: 0 10px 10px 0; /* Borde totalmente recto en la izquierda */
}
/* La Imagen Inferior hereda la clase .img-offset-frame por lo que ya es más grande y ajustada arriba */


/* ----- Textos, Títulos y Etiquetas Base ----- */
.img-overlay-title {
    position: absolute;
    bottom: 0;
    left: 20px;
    z-index: 3;
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.img-overlay-title i {
    color: var(--blanco);
    font-size: 3.5rem;
}

.img-overlay-title h4 {
    color: var(--blanco);
    font-size: clamp(1.8rem, 2.5vw, 2.5rem);
    font-weight: 800;
    line-height: 1.1;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.5); 
}

.perfil-badge {
    color: var(--blanco);
    font-size: clamp(1.1rem, 1.8vw, 1.4rem);
    font-weight: 700;
    padding: 15px 30px;
    margin-bottom: 30px;
}

.gradient-blue-purple { background: linear-gradient(90deg, #5A7ECA 0%, #D40B83 100%); }
.gradient-purple-blue { background: linear-gradient(90deg, #D40B83 0%, #5A7ECA 100%); }

.perfil-content p {
    color: var(--gris-texto);
    font-size: clamp(0.9rem, 1.2vw, 1rem);
    line-height: 1.6;
}
.perfil-content strong { color: var(--negro); font-weight: 700; }

/* =========================================
   SECCIÓN 9: PLANTAS
========================================= */
.huasco-plantas-section {
    padding: clamp(60px, 8vw, 100px) 0;
    background-color: #f2f2f2; /* Gris claro de fondo */
}

.plantas-header {
    margin-bottom: 40px;
}

.plantas-header h2 {
    color: var(--azul-dark);
    font-size: clamp(1.8rem, 3vw, 2.2rem);
    font-weight: 800;
    text-transform: uppercase;
}

/* Grilla de 4 columnas */
.plantas-grid {
    display: grid;
    /* Ajustamos las columnas para darles más protagonismo.
       Al usar repeat(auto-fit, minmax(...)), las cards se adaptarán 
       al espacio disponible, volviéndose más anchas si hay espacio. */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    /* Aumentamos el espacio entre columnas (gap horizontal) y filas (gap vertical) */
    gap: 50px 30px; 
}

/* Tarjeta individual */
.planta-card {
    background-color: var(--blanco);
    padding: 25px 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
}

.planta-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}

.planta-img-wrap {
    width: 100%;
    aspect-ratio: 1 / 1; /* Mantiene la imagen cuadrada */
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.planta-img-wrap img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.planta-title {
    color: #00b4d8;
    font-size: clamp(0.85rem, 1vw, 0.95rem);
    font-weight: 700;
    margin-bottom: 15px;
    min-height: 40px; /* Fuerza a que todos los títulos ocupen el espacio de 2 líneas */
    display: flex;
    align-items: center; /* Centra el texto verticalmente en ese espacio */
}

/* Iconos y metrajes */
.planta-features {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #eaeaea;
    border-bottom: 1px solid #eaeaea;
    padding: 12px 0;
    margin-bottom: 15px;
}

.p-feature {
    color: var(--negro);
    font-size: clamp(0.7rem, 1vw, 0.8rem);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
}

.p-feature i {
    color: #00b4d8; /* Iconos en cyan */
    font-size: 1rem;
}

/* Separadores verticales entre íconos */
.p-feature:not(:last-child) {
    border-right: 1px solid #eaeaea;
    padding-right: 10px;
}
.p-feature:not(:first-child) {
    padding-left: 5px;
}

/* Total y Botones */
.planta-total {
    font-size: clamp(0.8rem, 1vw, 0.9rem);
    color: var(--negro);
    margin-bottom: 15px;
    font-weight: 600;
}

.planta-actions {
    display: flex;
    gap: 10px;
    margin-top: auto; /* Empuja los botones al fondo de la tarjeta */
}

.btn-planta-outline, .btn-planta-solid {
    flex: 1; /* Ambos botones ocupan el 50% */
    text-align: center;
    padding: 10px 5px;
    font-size: 0.75rem;
    font-weight: 700;
    text-decoration: none;
    transition: var(--transition);
}

.btn-planta-outline {
    color: #00b4d8;
    border: 1px solid #00b4d8;
}
.btn-planta-outline:hover {
    background-color: #00b4d8;
    color: var(--blanco);
}

.btn-planta-solid {
    background-color: #00b4d8;
    color: var(--blanco);
    border: 1px solid #00b4d8;
}
.btn-planta-solid:hover {
    background-color: var(--azul-dark);
    border-color: var(--azul-dark);
}

/* =========================================
   ESTILO ESPECÍFICO PARA MODAL DE FICHAS
========================================= */
.modal-ficha-tecnica {
    max-width: 900px !important; /* Un ancho óptimo para leer textos y cotas de planos */
    background-color: var(--blanco) !important;
    border-radius: 15px;
    overflow-y: auto !important; /* Habilita scroll si la ficha es muy vertical en pantallas chicas */
    max-height: 92vh !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}

.ficha-tecnica-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

/* =========================================
   SECCIÓN 10: CONTACTO
========================================= */
.huasco-contacto-section {
    position: relative;
    width: 100%;
    padding: clamp(60px, 8vw, 100px) 0;
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Efecto parallax sutil */
}

.contacto-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(14, 82, 142, 0.9); /* Azul corporativo oscuro con 90% opacidad */
    z-index: 1;
}

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

.contacto-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr; /* Formulario más ancho que la info */
    gap: clamp(40px, 6vw, 80px);
    align-items: start;
}

/* Columna Izquierda */
.contacto-form-col h2 {
    color: var(--blanco);
    font-size: clamp(2rem, 3.5vw, 2.8rem);
    font-weight: 800;
    margin-bottom: 5px;
}

.title-underline-white {
    width: 60px;
    height: 4px;
    background-color: var(--blanco);
    margin-bottom: 15px;
}

.contacto-form-col h3 {
    color: var(--blanco);
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    font-weight: 400;
    margin-bottom: 30px;
    letter-spacing: 0.05em;
}

/* Formulario */
.contacto-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.form-input {
    width: 100%;
    padding: 15px 20px;
    border: none;
    border-radius: 5px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    color: var(--negro);
    background-color: var(--blanco);
    outline: none;
    transition: box-shadow 0.3s ease;
}

.form-input:focus {
    box-shadow: 0 0 0 3px rgba(0, 195, 255, 0.5); /* Resplandor cyan al escribir */
}

.select-input {
    appearance: none; /* Quita la flecha nativa fea */
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
    background-repeat: no-repeat;
    background-position-x: 98%;
    background-position-y: 50%;
    cursor: pointer;
}

.textarea-input {
    resize: vertical;
    min-height: 120px;
}

.btn-enviar {
    background-color: #0088cc; /* Azul claro del botón */
    color: var(--blanco);
    border: none;
    border-radius: 5px;
    padding: 15px;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: var(--transition);
}

.btn-enviar:hover {
    background-color: #00aaff;
}

/* Columna Derecha Info */
.contacto-info-col {
    padding-top: 100px; /* Para alinear con el inicio del formulario */
}

.info-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    color: var(--blanco);
}

.info-item i {
    font-size: 1.8rem;
    margin-top: 5px;
}

.info-item h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 5px;
}

.info-item p {
    font-size: 0.95rem;
    line-height: 1.5;
}

/* =========================================
   ESTILOS MODAL DE COTIZACIÓN (BLANCO)
========================================= */
.modal-cotizacion-blanco {
    background-color: #ffffff !important;
    padding: clamp(30px, 5vw, 50px) !important;
    width: 95% !important;
    max-width: 800px !important; /* Ancho ideal para formularios */
    border-radius: 10px;
    display: flex;
    flex-direction: column;
}

.modal-cotizacion-header {
    text-align: center;
    margin-bottom: 25px;
}

.modal-cotizacion-header h3 {
    color: var(--azul-dark);
    font-size: clamp(1.4rem, 2.2vw, 1.8rem);
    font-weight: 800;
    margin-bottom: 10px;
}

.modal-cotizacion-header h3 span {
    color: #00b4d8; /* Cyan para destacar el nombre del modelo */
    font-weight: 700;
    text-transform: uppercase;
}

.modal-cotizacion-header p {
    color: var(--gris-texto);
    font-size: clamp(0.9rem, 1.2vw, 1rem);
    line-height: 1.5;
}

/* Campos del formulario */
.form-input-cotizacion {
    width: 100%;
    padding: 15px;
    border: 1px solid #dcdcdc;
    border-radius: 5px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    color: var(--negro);
    margin-bottom: 15px;
    background-color: #fcfcfc;
    transition: border-color 0.3s ease;
}

.form-input-cotizacion:focus {
    border-color: #00b4d8;
    background-color: #ffffff;
    outline: none;
}

.textarea-cotizacion {
    min-height: 100px;
    resize: vertical;
}

/* Contenedor del reCAPTCHA para centrarlo */
.recaptcha-container {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

/* Botón de Enviar a todo lo ancho */
.btn-enviar-cotizacion {
    width: 100%;
    background-color: #00b4d8; /* Mismo cyan del proyecto Huasco */
    color: var(--blanco);
    border: none;
    border-radius: 5px;
    padding: 16px;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-enviar-cotizacion:hover {
    background-color: var(--azul-dark);
}

/* =========================================
   ESTILOS PÁGINA POSTVENTA
========================================= */

/* --- HERO SECTION --- */
.hero-postventa {
    position: relative;
    background-image: url('img/fondo-postventacostasur.jpg'); /* ASEGÚRATE DE PONER LA RUTA DE TU IMAGEN AQUÍ */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    /* Le damos más espacio arriba (150px) para que el menú no lo tape */
    padding: 180px 0 80px 0; 
    color: #ffffff;
}

.overlay-hero {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Oscurece la imagen de fondo para que el texto se lea bien */
    z-index: 1;
}

.posicion-relativa {
    position: relative;
    z-index: 2;
}

/* La línea celeste al lado de los títulos */
.titulo-con-linea {
    border-left: 5px solid #00b4d8; /* Celeste Costa Sur */
    padding-left: 20px;
    margin-bottom: 25px;
    margin-left: clamp(20px, 5vw, 60px); /* Nuevo: Empuja hacia la derecha */
}

.titulo-con-linea h1, 
.titulo-con-linea h3 {
    font-weight: 800;
    margin: 0 0 5px 0;
    letter-spacing: 1px;
}

.titulo-con-linea h2 {
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    font-weight: 600;
    margin: 0;
}

.texto-hero {
    font-size: clamp(0.9rem, 1.2vw, 1rem);
    line-height: 1.8;
    max-width: 1000px;
    margin-top: 70px;
    text-align: justify; /* justifica el texto */
    margin-left: clamp(20px, 5vw, 60px); /* Nuevo: Misma separación que el título */
}

/* --- SECCIÓN FORMULARIO --- */
.seccion-formulario-postventa {
    padding: 60px 0;
    background-color: #ffffff;
}

.titulo-con-linea.oscuro {
    color: #00b4d8;
}

.titulo-con-linea.oscuro h3 {
    color: #00b4d8;
    font-size: 1.8rem;
}

.titulo-con-linea.oscuro p {
    color: #666;
    font-size: 0.95rem;
    margin-top: 5px;
    font-weight: 500;
}

.contenedor-formulario {
    max-width: 1100px; /* Antes estaba en 100%, esto lo hace más angosto */
    margin-top: 40px;
    margin-left: auto;  /* Empuja automáticamente desde la izquierda */
    margin-right: auto; /* Empuja automáticamente desde la derecha */

}

.input-postventa {
    width: 100%;
    padding: 15px;
    margin-bottom: 15px;
    border: 1px solid #cccccc;
    border-radius: 4px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    color: #333;
    transition: all 0.3s ease;
}

.input-postventa:focus {
    border-color: #00b4d8;
    outline: none;
    box-shadow: 0 0 5px rgba(0, 180, 216, 0.3);
}

.textarea-postventa {
    min-height: 120px;
    resize: vertical;
}

.btn-enviar-azul {
    width: 100%;
    background-color: #3f88c5; /* Color azul del botón de la imagen */
    color: white;
    border: none;
    padding: 15px;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-enviar-azul:hover {
    background-color: #2b6a9e;
}

/* --- SECCIÓN CONTADORES (Ajuste rápido) --- */
.seccion-contadores {
    padding: 60px 0 80px 0;
    background-color: #ffffff;
}

.item-contador {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.texto-top {
    color: #00b4d8;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 1px;
}

.numero-contador {
    color: #cccccc;
    font-size: 4rem;
    font-weight: 800;
    line-height: 1;
    margin: 5px 0;
}

.texto-bottom {
    display: flex;
    align-items: center;
    text-align: left;
}

.texto-bottom .linea-vertical {
    width: 3px;
    height: 40px;
    background-color: #00b4d8;
    margin-right: 10px;
}

.texto-bottom p {
    color: #999;
    font-weight: 600;
    font-size: 0.85rem;
    margin: 0;
    line-height: 1.2;
}

/* ========================================= */
/* PÁGINA DE CONTACTO                        */
/* ========================================= */

/* 1. Hero con imagen de fondo */
/* =========================================
   PÁGINA DE CONTACTO                        
========================================= */

/* 1. Hero con imagen de fondo (Medidas de Proyectos Realizados) */
.hero-contacto {
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('img/fondo-contactocostasur.jpg') no-repeat center center/cover;
    height: 55vh; /* Altura dinámica igual que proyectos realizados */
    min-height: 250px;
    margin-top: 85px; /* Empuja bajo el menú */
    display: flex;
    align-items: center;
}

/* 2. Alineación perfecta al contenedor */
.hero-contacto .container {
    width: 100%;
    max-width: 1400px;
    display: flex;
    justify-content: flex-start;
    padding: 0 5%; /* NUEVO: Igualamos la distancia exacta de Proyectos Realizados */
}

/* 3. La línea azul idéntica a .inner-hero-text */
.hero-contacto .titulo-con-linea {
    border-left: clamp(4px, 1vw, 6px) solid var(--azul-costa);
    padding-left: clamp(10px, 2vw, 20px);
    margin-left: 0;
    margin-bottom: 0;
    max-width: 600px;
}

/* 4. Tipografía: Blanca, Mismo Grosor y Tamaño que Proyectos Realizados */
.hero-contacto .titulo-con-linea.claro h2,
.hero-contacto .titulo-con-linea.claro p {
    color: var(--blanco); /* ¡Esto arregla el texto negro! */
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0;
}

.hero-contacto .titulo-con-linea.claro h2 { 
    font-size: clamp(1.5rem, 4vw, 2.5rem); 
    font-weight: 600;
    margin-bottom: 5px; 
}

.hero-contacto .titulo-con-linea.claro p { 
    font-size: clamp(0.9rem, 1.5vw, 1.2rem); 
    font-weight: 500;
}


/* 2. Contenedor principal del formulario */
.seccion-formulario-contacto {
    padding: 60px 0;
    background-color: #fff;
}
.contenedor-contacto {
    max-width: 900px;
    margin: 0 auto;
}

/* 3. Cuadrícula (Grid) del formulario */
.grid-contacto {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 columnas iguales */
    gap: 20px;
    margin-top: 30px;
}
.ancho-completo {
    grid-column: 1 / -1; /* Ocupa todo el ancho disponible */
}

/* 4. Diseño de los Inputs con Ícono */
.input-grupo-contacto {
    display: flex;
    border: 1px solid #ccc;
    border-radius: 5px;
    overflow: hidden;
    background-color: #fff;
    transition: border-color 0.3s;
}
.input-grupo-contacto:focus-within {
    border-color: #408ec6; /* Azul al hacer clic */
}

/* El cuadrito azul del ícono */
.icono-contacto {
    background-color: #408ec6; /* Ajusta este azul al de tu marca */
    color: #fff;
    width: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}
.icono-contacto.alinear-arriba {
    align-items: flex-start;
    padding-top: 15px;
}

/* El campo de texto per se */
.input-grupo-contacto input,
.input-grupo-contacto select,
.input-grupo-contacto textarea {
    flex: 1;
    border: none;
    padding: 12px 15px;
    outline: none;
    font-size: 0.95rem;
    font-family: inherit;
    color: #333;
    background: transparent;
}
.input-grupo-contacto textarea {
    resize: vertical;
}

/* 5. Botón de Enviar (Azul oscuro) */
.btn-enviar-contacto {
    background-color: #2c4c6e; /* Azul oscuro del botón */
    color: #fff;
    border: none;
    padding: 10px 30px;
    border-radius: 5px;
    font-weight: bold;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background-color 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.btn-enviar-contacto:hover {
    background-color: #1a2f45;
}

/* 6. Responsivo: Apilar en celulares */
@media (max-width: 768px) {
    .grid-contacto {
        grid-template-columns: 1fr; /* 1 sola columna en móvil */
    }
}

/* =========================================
   ESTILOS ESPECÍFICOS: EDIFICIO MARPACÍFICO
========================================= */

.seccion-header-sencillo { margin-bottom: 30px; }
.seccion-header-sencillo h2 {
    color: var(--azul-costa);
    font-size: clamp(1.8rem, 3vw, 2.2rem);
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 5px;
}
.linea-baja-cyan { width: 60px; height: 4px; background-color: var(--azul-costa); }

/* Layout "Edificio" (Foto Izq, Texto Der) */
.marpacifico-edificio-seccion { padding: clamp(50px, 8vw, 80px) 0; background-color: #fff; }
.edificio-clasico-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 60px); align-items: start; }

.edificio-imagen-col { position: relative; }
.img-responsive-radius { width: 100%; height: auto; display: block; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }

.caja-azul-clara { background-color: #00b4d8; color: #fff; text-align: center; font-weight: 700; font-size: 1.1rem; padding: 10px; margin-bottom: 25px; border-radius: 4px; }
.texto-justificado-proyecto p { color: var(--gris-texto); font-size: clamp(0.7rem, 1.0vw, 0.9rem); font-weight: 500; line-height: 1.7; text-align: justify; margin-bottom: 15px; }
.texto-justificado-proyecto strong { color: var(--negro); }

/* Layout "Espacios Comunes" (Fotos Izq, Texto Der) */
.bg-gris-claro { background-color: #f8f9fa; }
.marpacifico-comunes-seccion { padding: clamp(50px, 8vw, 80px) 0; }
.comunes-clasico-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(30px, 5vw, 60px); align-items: center; }

.foto-comun-grande img { width: 100%; height: auto; display: block; border-radius: 8px; margin-bottom: 15px; }
.fotos-comunes-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.fotos-comunes-row img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 8px; }

/* Lista de Amenities */
.lista-amenities-marpacifico { list-style: none; padding: 0; margin: 0; }
.lista-amenities-marpacifico li { padding: 12px 0; border-bottom: 1px solid #ddd; color: var(--negro); font-weight: 500; font-size: clamp(0.9rem, 1.2vw, 1rem); }
.lista-amenities-marpacifico li:last-child { border-bottom: none; }

/* Responsivo para estas grillas */
@media (max-width: 900px) {
    .edificio-clasico-grid, .comunes-clasico-grid { grid-template-columns: 1fr; }
    .comunes-texto-col { order: -1; margin-bottom: 30px; } /* Pone el título arriba de las fotos en móvil */
}

/* =========================================
   CONTINUACIÓN: DEPARTAMENTOS Y UBICACIÓN
========================================= */

/* Galería Lineal de Departamentos */
.marpacifico-deptos-seccion { padding: clamp(50px, 8vw, 80px) 0; background-color: #fff; }
.deptos-galeria-lineal { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); 
    gap: 10px; 
    margin-bottom: 30px;
}
.deptos-galeria-lineal img { 
    width: 100%; 
    aspect-ratio: 4/3; 
    object-fit: cover; 
    border-radius: 4px;
    transition: transform 0.3s;
}
.deptos-galeria-lineal a:hover img { transform: scale(1.03); }

/* Terminaciones */
.terminaciones-title { color: var(--azul-costa); font-size: clamp(1.2rem, 2vw, 1.4rem); font-weight: 700; margin-bottom: 15px; text-transform: uppercase; }
.terminaciones-box p { color: var(--gris-texto); font-size: clamp(0.9rem, 1.2vw, 1rem); line-height: 1.6; }
.terminaciones-list { margin-top: 15px; color: #555; }

/* Ubicación: Mapa y 4 Fotos */
.marpacifico-ubicacion-seccion { padding: clamp(50px, 8vw, 80px) 0; background-color: #f8f9fa; }
.mapa-iframe-wrapper { 
    border-radius: 8px; 
    overflow: hidden; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); 
    margin-bottom: clamp(30px, 4vw, 50px); /* Esto crea el espacio perfecto hacia abajo */
}

.ubicacion-galeria-marpacifico {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.ubicacion-item-mp { position: relative; border-radius: 6px; overflow: hidden; aspect-ratio: 16/10; }
.ubicacion-item-mp img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.ubicacion-item-mp:hover img { transform: scale(1.05); }
.caption-mp { 
    position: absolute; bottom: 0; left: 0; width: 100%; 
    background: rgba(0, 0, 0, 0.7); color: #fff; 
    text-align: center; padding: 10px; font-size: 0.85rem; font-weight: 600; 
}



/* =========================================
   CONTACTO MARPACÍFICO (Capa Negra)
========================================= */
.contacto-overlay-black {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(15, 15, 15, 0.85); /* Negro translúcido al 85% */
    z-index: 1;
}

.grid-2-col-form { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }

@media (max-width: 768px) {
    .ubicacion-galeria-marpacifico { grid-template-columns: 1fr 1fr; }
    .grid-2-col-form { grid-template-columns: 1fr; }
}

/* =========================================
   LINKS EJECUTIVAS MARPACÍFICO
========================================= */
.ejecutiva-block {
    margin-bottom: 25px;
}
.ejecutiva-block p {
    color: #ffffff;
    margin-bottom: 8px;
    font-size: 0.95rem;
}
.ejecutiva-block a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s ease;
}
.ejecutiva-block a:hover {
    color: #00b4d8; /* Cambia a cyan al pasar el mouse */
}
.ejecutiva-block i {
    margin-right: 8px;
    width: 20px;
    text-align: center;
}
.text-white {
    color: #ffffff !important;
}

/* =========================================
   BADGES PARA PLANTAS (Actualización)
========================================= */
.planta-card { position: relative; }

.planta-badge-agotado, .planta-badge-ultimas {
    /* Eliminamos el position absolute para que se integre al flujo de la tarjeta */
    width: 100%;
    text-align: center;
    color: #fff;
    padding: 8px 15px;
    font-size: 0.85rem;
    font-weight: 700;
    border-radius: 4px;
    margin-bottom: 10px;
}
.planta-badge-agotado { background-color: #04537A; } /* Azul marino oscuro */
.planta-badge-ultimas { background-color: #00b4d8; } /* Cyan */

/* Nos aseguramos de que la caja que contiene la foto sea el ancla */
.modal-photo-box {
    position: relative;
}

/* El bloque oscuro que se superpone a la foto */
.photo-overlay-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    /* Gradiente oscuro desde abajo hacia arriba para legibilidad */
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0) 100%);
    padding: 60px 40px 30px 40px; 
    z-index: 10;
}

.photo-overlay-content h2 {
    color: #ffffff;
    font-size: 1.8rem; /* Un poco más grande para darle presencia */
    font-weight: 600;
    line-height: 1.3;
    margin: 0; /* Sin margen inferior ya que no hay elementos debajo */
    text-shadow: 1px 1px 4px rgba(0,0,0,0.6);
    max-width: 70%;
}

/* ========================================= */
/* ESTILOS WIDGET WHATSAPP MÚLTIPLE          */
/* ========================================= */

/* Contenedor anclado a la izquierda */
.wa-float-container {
    position: fixed;
    bottom: 20px;
    left: 20px; 
    z-index: 9999;
    font-family: 'Montserrat', sans-serif;
}

/* El botón estilo Huasco ("¡HABLEMOS!") */
.btn-hablemos-flotante {
   font-family: 'Montserrat', sans-serif;
    background-color: #25D366;
    color: #ffffff;
    border: none;
    padding: clamp(10px, 1.5vw, 12px) clamp(15px, 2.5vw, 20px);
    border-radius: 50px;
    font-size: clamp(13px, 1.8vw, 16px);
    font-weight: 600; /* Grosor exacto de Huasco */
    letter-spacing: 0.5px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2); /* Sombra original */
    display: flex;
    align-items: center;
    gap: 10px; /* Separación exacta entre ícono y texto */
    transition: all 0.3s ease;
}

.btn-hablemos-flotante i {
    font-size: 24px; /* Ícono un poco más grande */
}

/* Efecto Hover idéntico a Huasco (se eleva) */
.btn-hablemos-flotante:hover {
    transform: translateY(-5px); /* En lugar de scale, se mueve hacia arriba */
    box-shadow: 0 6px 20px rgba(0,0,0,0.3); /* Sombra más pronunciada al elevarse */
}

/* La tarjeta del menú desplegable */
.wa-menu {
    position: absolute;
    bottom: 75px; /* Sube para no tapar el botón */
    left: 0; /* Nace desde la izquierda */
    width: 300px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    overflow: hidden;
    /* Oculto por defecto con animación */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
}

/* Clase que activa el menú a través de JS */
.wa-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: all;
}

/* Cabecera del menú */
.wa-menu-header {
    background-color: #075E54;
    color: white;
    padding: 20px;
}

.wa-menu-header h4 {
    margin: 0 0 5px 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.wa-menu-header p {
    margin: 0;
    font-size: 0.85rem;
    opacity: 0.8;
}

/* Lista de contactos */
.wa-contacts {
    padding: 10px;
}

.wa-contact-item {
    display: flex;
    align-items: center;
    padding: 15px;
    text-decoration: none;
    color: #333333;
    border-radius: 8px;
    transition: background-color 0.2s ease;
}

.wa-contact-item:hover {
    background-color: #f5f5f5;
}

.wa-icon-small {
    background-color: #25D366;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-right: 15px;
}

.wa-contact-info {
    display: flex;
    flex-direction: column;
}

.wa-name {
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 3px;
}

.wa-status {
    font-size: 0.8rem;
    color: #888888;
}

/* Ajustes para móviles */
@media (max-width: 768px) {
    .btn-hablemos-flotante {
        padding: 10px 20px;
        font-size: 13px; /* Un poco más pequeño en celular */
    }
    .btn-hablemos-flotante i {
        font-size: 22px;
    }
}

/* =========================================
   12. MEDIA QUERIES GLOBALES (Layouts)
========================================= */
/* Escritorio Pequeño / Tablets Landscape */
@media (max-width: 1250px) {
    .hamburger { display: flex; flex-direction: column; gap: 6px; cursor: pointer; z-index: 3000; }
    .hamburger span { width: 35px; height: 3px; background: var(--azul-costa); transition: 0.3s; border-radius: 3px; }
    .hamburger.toggle span:nth-child(1) { transform: rotate(45deg) translate(7px, 6px); }
    .hamburger.toggle span:nth-child(2) { opacity: 0; }
    .hamburger.toggle span:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px); }
    .nav { position: fixed; top: 0; right: -100%; width: 80%; max-width: 400px; height: 100vh; background: var(--blanco); padding: 120px 40px; transition: 0.5s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: -10px 0 30px rgba(0,0,0,0.2); z-index: 2500; }
    .nav.active { right: 0; }
    .nav-list { flex-direction: column; align-items: flex-start; gap: 35px; }
}

@media (max-width: 1024px) {
    /* Ajustes para el Banner en Tablet y Móvil */
    .banner-inversion-top {
        min-height: 650px; /* Da más altura para ver las caras arriba */
        align-items: flex-end; /* Tira el texto a la parte inferior de la imagen */
        justify-content: center; /* Centra el texto */
        padding: 20px 5%;
    }

    .banner-inversion-text {
        width: 100%;
        max-width: 600px;
        background-color: rgba(0, 0, 0, 0.6); /* Cuadro negro traslúcido */
        border-radius: 15px; /* Bordes curvos */
        padding: 30px;
        text-align: center;
    }
}

/* Tablets Portrait */
@media (max-width: 992px) {
    .about-top-wrapper { flex-direction: column-reverse; }
    .about-bottom-gallery { grid-template-columns: repeat(2, 1fr); }
    .realizados-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Intermedios */
@media (max-width: 900px) {
    .hero-slider { aspect-ratio: 1 / 1; margin-top: 75px; }
    .huasco-slider { aspect-ratio: 16 / 9; margin-top: 75px; }
    .attributes-grid { flex-direction: column; flex-wrap: wrap; text-align: center; }
    .attr-divider { width: 60%; height: 1px; margin: 12px 0; }
    .features-item .feature-row { justify-content: center; }
    .price-item { justify-content: center; }

    /* Adaptación Sección Ubicación (Móviles) */
    .ubicacion-grid {
        grid-template-columns: 1fr; /* Pasa todo a una sola columna vertical */
        gap: 50px;
    }
    
    .map-iframe-container {
        height: 450px; /* Reducimos la altura del mapa para que no sea infinito en celular */
    }

    /* Áreas Comunes (Móviles) */
    .areas-content-grid {
        grid-template-columns: 1fr; /* Apilamos descripción arriba, lista abajo */
        gap: 50px;
    }
    .areas-hero-image {
        aspect-ratio: 16 / 9; /* Imagen un poco más alta en celular */
    }
    .amenity-row {
        /* En celulares pequeños, bajamos los items bajo la categoría */
        grid-template-columns: 1fr; 
        gap: 10px;
    }

   /* Ajuste de la Grilla y Ventana Modal (Tablets y Móviles) */
    .galeria-fotos-grid {
        grid-template-columns: 1fr 1fr; /* 2 columnas en tablet */
    }
    
    .fancybox-html-modal {
        flex-direction: column !important; 
        gap: 20px !important;
        width: 100% !important; /* Aprovechamos todo el ancho en el celular */
        max-width: 100% !important; /* Evita que se salga de la pantalla */
        padding: 0 !important;
    }
    
    .modal-info-box {
        width: 100% !important; /* Fuerza a ocupar todo el ancho */
        padding: 30px 20px !important; /* Reducimos el padding interno para ahorrar espacio */
        background-size: cover !important; /* Asegura que el fondo cubra la caja */
        border-radius: 15px !important; /* Bordes un poco menos curvos en móvil */
    }

    .modal-photo-box {
        width: 100% !important; /* Fuerza a ocupar todo el ancho */
        height: 300px !important; /* Altura fija para la foto en móvil */
        min-height: auto !important;
        border-radius: 15px !important;
    }
    
    .vive-full-svg {
        width: 140px !important; /* Achicamos el SVG en móvil para que no ocupe tanta pantalla */
        margin-bottom: 5px !important;
    }

    .modal-title-cyan {
        font-size: 1.6rem !important; /* Título un poco más compacto */
    }
    
    .modal-logo-huasco {
        width: 100px !important;
        margin-bottom: 20px !important; /* Separa el logo del texto en el modo apilado */
    }

    /* Banner Inversión (Móviles) */
    .banner-inversion-top {
        justify-content: center;
        padding: 40px 5%;
        text-align: center;
    }
    
    .banner-inversion-text {
        width: 100%; /* El texto usa todo el ancho en móvil */
        background-color: rgba(0, 0, 0, 0.4); /* Fondo oscuro sutil por si la imagen choca con el texto */
        padding: 20px;
        border-radius: 10px;
    }

    .banner-inversion-bottom {
        padding: 15px; /* Reducimos padding */
        justify-content: center;
        position: relative;
    }
    
    .cyan-accent-box {
        position: absolute; /* En móvil lo tiramos al fondo a la izquierda */
        left: 0;
        bottom: 0;
        height: 100%;
        width: 20px;
    }

    /* Modal Inversión (Móviles) */
    .modal-perfiles {
        padding: 30px 20px !important;
        gap: 50px;
    }
    .perfil-row {
        grid-template-columns: 1fr; /* Apilamos a 1 columna */
        gap: 30px;
    }

    /* Recalculamos los márgenes para que choquen con los bordes del móvil */
    .perfil-row:nth-child(1) .perfil-img-col,
    .perfil-row:nth-child(2) .perfil-img-col {
        margin-left: -20px;
        margin-right: -20px; /* Estira la foto a los bordes en móvil */
    }
    
    .perfil-row:nth-child(1) .perfil-badge {
        width: calc(100% + 20px);
        margin-right: -20px;
        padding-right: 20px;
    }
    
    .perfil-row:nth-child(2) .perfil-badge {
        width: calc(100% + 20px);
        margin-left: -20px;
        padding-left: 20px;
    }

    /* Forzamos que en móvil la imagen siempre vaya arriba y el texto abajo */
    .reverse-desktop .perfil-img-col {
        order: -1; 
    }

    .frame-top-left::before, .frame-bottom-right::before {
        display: none; /* En móvil quitamos el marco desplazado por temas de espacio */
    }

    /* Plantas: 2 columnas en Tablets */
    .plantas-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px 15px;
    }

    /* Contacto Móvil */
    .contacto-grid { grid-template-columns: 1fr; gap: 40px; }
    .contacto-info-col { padding-top: 0; border-top: 1px solid rgba(255,255,255,0.2); padding-top: 30px; }
}

/* Teléfonos (Mobile) */
@media (max-width: 768px) {
    .video-separator { display: none; }
    .play-trigger { flex-direction: column; }
    .play-icon-circle { margin-right: 0; margin-bottom: 0.8rem; }
    .whatsapp-btn span { display: none; }
    
    .counters-grid { grid-template-columns: 1fr 1fr; gap: 40px 15px; }
    .counter-box:nth-child(1) { grid-column: 1 / 3; }
    
    .about-gallery-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; height: 350px; }
    .img-tall { grid-column: 1; grid-row: 1 / 3; height: 100%; }
    .img-short { grid-column: 2; grid-row: auto; height: 100%; }

    .footer-grid { flex-direction: column; text-align: center; }
    .footer-contact-list a { justify-content: center; }
    .social-links { justify-content: center; }
    .footer-legal p { max-width: 100%; text-align: justify; }

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

    /* Adaptación del Menú del Proyecto a Móvil */
    .huasco-sticky-nav { top: 75px; padding: 10px 20px; }
    .mobile-project-menu-btn { display: block; }
    .nav-buttons-container { display: none; flex-direction: column; background-color: #f4f4f4; padding-top: 15px; gap: 10px; }
    .nav-buttons-container.show-menu { display: flex; }
    .btn-internal { width: 100%; text-align: center; padding: 12px; border-radius: 5px; }
    
    /* Adaptación Sección Edificio (Móviles) */
    .huasco-edificio-section {
        min-height: auto;
        flex-direction: column;
        padding-bottom: 0;
    }
    .edificio-bg-image {
        position: relative;
        width: 100%;
        height: 350px;
    }
    .edificio-header-row {
        position: absolute;
    }
    .edificio-title-badge { width: 90%; }
    .edificio-content-area { min-height: auto; display: flex; flex-direction: column; }
    .edificio-bg-image { position: relative; width: 100%; height: 400px; }
    .edificio-blue-multiply, .edificio-text-container { position: relative; width: 100%; height: auto; }
    
    /* En móvil, ocultamos la capa multiply y le damos color sólido directo al texto */
    .edificio-blue-multiply { display: none; }
    
    .edificio-text-container {
        background-color: #003e82; 
        padding: 40px 20px;
        margin-top: -30px; /* Monta el bloque un poco sobre la imagen */
    }
    .edificio-main-wrapper {
        justify-content: center;
        padding: 0;
        margin-top: -30px;
    }
    .edificio-blue-box {
        max-width: 100%;
        padding: 40px 20px;
        border-bottom-left-radius: 0;
        mix-blend-mode: normal; /* Apagamos multiply en móvil para facilitar lectura */
    }
    .edificio-blue-box::before { border-bottom-left-radius: 0; mix-blend-mode: normal; }
    .info-box-content { margin-left: 0; max-width: 100%; }

    /* Galería de Ubicación (Móviles) */
    .ubicacion-gallery-grid {
        grid-template-columns: 1fr; 
        gap: 20px;
        margin-top: 50px;
        padding: 0; /* En celular le quitamos el espacio lateral para que se vea grande */
    }

    .galeria-fotos-grid {
        grid-template-columns: 1fr; /* 1 columna en teléfonos */
    }

   /* Ajustes específicos del Banner para Móviles */
    .banner-inversion-top {
        min-height: 650px; /* Aumentamos la altura total para darle más "cielo" a la foto */
        align-items: flex-end; /* Asegura que la caja se pegue abajo */
        padding: 50px 5% 10px 5%; /* Reducimos el padding inferior a solo 10px para que baje al tope */
    }

    .banner-inversion-text {
        padding: 25px 20px; /* Reducimos un poco el aire interno para que la caja negra sea menos alta */
    }

    .banner-inversion-text h2 {
        font-size: 1.7rem; /* Achicamos ligeramente el título para ahorrar espacio vertical */
        margin-bottom: 5px;
    }
    
    .banner-inversion-text h3 {
        margin-bottom: 15px; /* Reducimos el margen debajo del subtítulo */
    }
    /* Adaptación para dispositivos móviles */
@media (max-width: 768px) {
    .photo-overlay-content {
        padding: 40px 20px 20px 20px;
    }
    .photo-overlay-content h2 {
        font-size: 1.2rem;
    }
}
}