:root {
    --bg: #0a0a0a;
    --text: #e8e4de;
    --accent: #059669;
    --border: rgba(255,255,255,0.07);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
video,
svg {
    max-width: 100%;
}

#lightbox-image,
#lightbox-video {
    transition: opacity 0.28s ease;
}

/* Ocupa todo el marco (con object-contain): así la miniatura que se muestra mientras
   baja la foto grande queda del mismo tamaño que la definitiva. */
#lightbox-image {
    width: 100%;
    height: 100%;
}

#lightbox-image.lightbox-fading,
#lightbox-video.lightbox-fading {
    opacity: 0;
}

#gallery-lightbox {
    opacity: 0;
    transition: opacity 0.3s ease;
}

#gallery-lightbox.lightbox-visible {
    opacity: 1;
}

/* =========================================
   1. CONFIGURACIÓN BASE Y TIPOGRAFÍA
   ========================================= */
body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg);
    color: var(--text);
    overflow-x: hidden;
    letter-spacing: 0.02em;
    font-feature-settings: "liga" 1, "kern" 1;
}

h1, h2, h3 { font-family: 'Playfair Display', serif; }

/* Ajuste para que el scroll se detenga antes de la sección al usar links */
section { scroll-margin-top: 120px !important; }

/* Padding-top para secciones — pt-32 no está en tailwind.min.css local */
#proyecto  { padding-top: 2rem; }
/* Escritorio: el botón flotante del asistente tapaba los lotes reservados de abajo a la
   derecha del plano. Se sube el contenido ~70px pasando espacio de arriba hacia abajo,
   sin cambiar el alto total de la sección (así no asoma la galería que sigue). */
@media (min-width: 1024px) {
    #proyecto { scroll-margin-top: 96px !important; padding-top: 1.25rem; padding-bottom: calc(8rem + .75rem); }
    #mapa .glass-container { padding-top: 1.75rem; padding-bottom: calc(3rem + 1.25rem); }
}
/* FAQ parte pegada al borde de arriba: con el margen de 120px asomaba bajo el menú
   el botón «Ver lotes disponibles» con que termina Ubicación. Su propio padding de
   arriba deja el contenido libre del menú. */
#faq       { scroll-margin-top: 0 !important; padding-top: 8.5rem; padding-bottom: 7rem; }
#contacto  { padding-top: 7rem; padding-bottom: 7rem; }
#ubicacion { padding-top: 6rem; }

.number-accent { color: #10b981; font-weight: 700; }

/* =========================================
   2. NAVBAR Y CONTENEDORES
   ========================================= */
/* =========================================
   GALERÍA — animación CSS sin bloquear pointer-events
   ========================================= */
@keyframes galleryFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.gallery-item { opacity: 0; animation: galleryFadeIn 0.6s ease forwards; }
.gi-1 { animation-delay: 0s; }
.gi-2 { animation-delay: 0.07s; }
.gi-3 { animation-delay: 0.14s; }
.gi-4 { animation-delay: 0.21s; }
.gi-5 { animation-delay: 0.28s; }

/* Mapa y secciones: reveal sin bloquear eventos */
.section-reveal { animation: galleryFadeIn 0.8s ease 0.2s both; }

/* =========================================
   FAQ — tarjetas
   ========================================= */
/* Centrar verticalmente la columna de texto respecto al acordeón (desktop) */
@media (min-width: 1024px) {
    #faq > .flex {
        align-items: center;
    }
}

#faq details.faq-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 0 1.5rem;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

#faq details.faq-item:hover {
    border-color: rgba(16, 185, 129, 0.35);
    background: rgba(255, 255, 255, 0.035);
}

#faq details.faq-item.faq-open {
    border-color: rgba(16, 185, 129, 0.45);
    background: rgba(16, 185, 129, 0.05);
}

#faq details.faq-item summary {
    padding: 1.35rem 0;
}

/* Chevron: dentro de un círculo, con giro fluido */
#faq details summary svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

#faq details.faq-item.faq-open summary svg {
    transform: rotate(180deg);
}

#faq details.faq-item summary .faq-chevron {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(16, 185, 129, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background-color 0.38s ease, border-color 0.38s ease;
}

#faq details.faq-item.faq-open summary .faq-chevron {
    background: rgba(16, 185, 129, 0.18);
    border-color: rgba(16, 185, 129, 0.6);
}

/* La respuesta — colapso/expansión fluido con grid-template-rows */
#faq .faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.42s cubic-bezier(0.4, 0, 0.2, 1);
}

#faq details.faq-item.faq-open .faq-answer {
    grid-template-rows: 1fr;
}

#faq .faq-answer > p {
    overflow: hidden;
    min-height: 0;
    margin-top: 0;
    padding-bottom: 0;
    transition: padding-bottom 0.42s ease, opacity 0.3s ease;
    opacity: 0;
}

#faq details.faq-item.faq-open .faq-answer > p {
    padding-bottom: 1.35rem;
    opacity: 1;
}

/* Hero: garantiza altura completa y centrado vertical */
#inicio {
    min-height: 100vh;
    align-items: center;
}

/* Primer cuadro del video: mismo encuadre que el video para que el paso sea invisible. */
#inicio picture img { object-position: 50% 50%; }

/* Hero: video de fondo. Parte invisible sobre la imagen y aparece con un fundido
   cuando ya está reproduciendo (clase que pone script.js). Mismo `scale` que la imagen. */
.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.05);
    opacity: 0;
    transition: opacity 0.9s ease;
    pointer-events: none;
}
.hero-video.hero-video--visible { opacity: 1; }
/* Sombra en la franja del menú: el video tiene tomas claras arriba (piedras, cielo)
   y sin esto el logo y los links, que van en blanco, se pierden. */
.hero-sombra-nav {
    position: absolute;
    inset: 0 0 auto 0;
    height: 11rem;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), transparent);
    pointer-events: none;
}

/* Hero contenido: separación del navbar */
#inicio > div.relative {
    padding-top: 10rem;
}

/* Hero H1: tamaño grande garantizado sin depender de md: Tailwind */
#inicio h1 {
    font-size: clamp(2.8rem, 6vw, 5.5rem);
    line-height: 1;
}

/* =========================================
   HERO — Animaciones de entrada al cargar
   ========================================= */
@keyframes heroReveal {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

#inicio .hero-eyebrow  { animation: heroReveal 0.7s ease-out 0.2s both; }
#inicio h1             { animation: heroReveal 0.8s ease-out 0.4s both; }
#inicio .hero-price    { animation: heroReveal 0.7s ease-out 0.6s both; }
#inicio .hero-ctas     { animation: heroReveal 0.7s ease-out 0.75s both; }
#inicio .hero-stats    { animation: heroReveal 0.8s ease-out 0.9s both; }

/* Cifras del hero: en celular, cuatro columnas iguales y centradas. En escritorio la
   primera y la última quedan a ras de los bordes del menú (logo y «Contacto») y las
   del medio se reparten con el mismo espacio entre todas. */
#inicio .hero-stats { margin-top: 9rem; }
#inicio .hero-stat { flex: 1; text-align: center; }
@media (min-width: 768px) {
    /* La fila sube 4rem + 4rem para que el botón flotante del asistente no tape
       «Río Ñuble»: menos separación arriba y un colchón abajo; el título no se mueve. */
    #inicio .hero-contenido { padding-bottom: 4rem; }
    #inicio .hero-stats { justify-content: space-between; margin-top: 5rem; }
    #inicio .hero-stat { flex: none; }
    #inicio .hero-stat:first-child { text-align: left; }
    #inicio .hero-stat:last-child { text-align: right; }
}

/* Peso y separación del bloque de precio.
   Van acá y no con utilidades de Tailwind porque `tailwind.min.css` es un archivo
   precompilado, sin script de build: solo trae las clases que ya se usaban. No
   incluye `font-medium` ni `mb-7`, así que ponerlas en el HTML no hace nada
   (el `mb-7` que había no separaba el precio de los botones: quedaban pegados). */
#inicio .hero-price__cifra { font-weight: 500; }
/* Al quedar el hero en título + precio + botones, el `mb-4` del h1 dejaba el precio
   pegado al título. El aire lo pone el bloque, no el h1. */
#inicio .hero-price        { margin-top: 2.25rem; margin-bottom: 2.25rem; }

/* Bajada del h1: lleva «San Fabián de Alico» dentro del título principal, que es
   lo que la gente busca en Google. Estilos acá por el mismo motivo de arriba. */
#inicio .hero-location {
    margin-top: 1rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 300;
    line-height: 1.5;
    font-style: normal;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgb(255 255 255 / 0.6);
}
@media (min-width: 768px) {
    #inicio .hero-location { font-size: 0.875rem; }
}

#main-nav {
    transition: background-color 0.4s ease, backdrop-filter 0.4s ease, box-shadow 0.4s ease;
    z-index: 100;
    background-color: transparent;
}

/* En el tope (hero): solo logo y links visibles, sin barra de fondo.
   Al hacer scroll aparece el fondo oscuro con blur. */
#main-nav.nav--scrolled {
    background-color: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
}

.glass-container {
    background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0) 100%);
    border: 1px solid rgba(255,255,255,0.05);
    overflow: visible !important; 
}

.map-dark {
    filter: contrast(1.08) saturate(1.05);
}

/* =========================================
   3. PLANO INTERACTIVO (Lotes y Caminos)
   ========================================= */
.lote { 
    transition: all 0.4s ease; 
    cursor: pointer; 
    fill: transparent !important; 
    stroke-width: 0.5;
}

/* Colores de las líneas iniciales (Wireframe) */
.lote.disponible { stroke: rgba(255, 255, 255, 0.55); }
.lote.vendido { stroke: rgba(220, 38, 38, 0.7); }
.lote.reservado { stroke: rgba(251, 191, 36, 0.7); }
/* Las en trámite van con línea segmentada: el deslinde todavía no está cerrado,
   y así se distinguen del resto sin cambiarles el color. */
.lote.tramite { stroke: rgba(6, 182, 212, 0.7); stroke-dasharray: 3 2; }

/* Estilo especial para el Camino */
.camino-interactivo { 
    fill: rgba(255, 255, 255, 0.05) !important; 
    stroke: rgba(255, 255, 255, 0.2); 
    pointer-events: auto;
    transition: all 0.4s ease;
}

/* EFECTOS HOVER: Relleno con transparencia (0.75) */
.lote:hover { 
    stroke-width: 1.5;
    stroke: #ffffff !important;
    /* Al pasar por encima la parcela se rellena: ahí el contorno va continuo, que es
       lo que marca cuál está seleccionada. */
    stroke-dasharray: none;
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.2));
    z-index: 50;
}

.lote.disponible:hover { fill: rgba(255, 255, 255, 0.75) !important; }
.lote.vendido:hover { fill: rgba(220, 38, 38, 0.75) !important; stroke: #ff4d4d !important; }
.lote.reservado:hover { fill: rgba(251, 191, 36, 0.75) !important; stroke: #fbbf24 !important; }
.lote.tramite:hover { fill: rgba(6, 182, 212, 0.75) !important; stroke: #22d3ee !important; }

.camino-interactivo:hover {
    fill: rgba(255, 255, 255, 0.12) !important;
    stroke: rgba(255, 255, 255, 0.4);
}

/* =========================================
   4. IMAGEN SATELITAL (Fondo sutilmente más claro)
   ========================================= */
#satelital-bg {
    /* Difuminado de bordes */
    mask-image: radial-gradient(circle, black 40%, transparent 95%);
    -webkit-mask-image: radial-gradient(circle, black 40%, transparent 95%);
    /* Opacidad y Brillo ajustados ligeramente al alza */
    opacity: 0.55; 
    filter: brightness(0.7) contrast(1.1);
}

/* =========================================
   5. TOOLTIP PREMIUM (Tarjeta informativa)
   ========================================= */
#info-lote {
    position: absolute;
    display: none;
    background: rgba(10, 10, 10, 0.92);
    color: #f9fafb;
    padding: 20px 24px;
    border-radius: 4px;
    font-size: 13px;
    z-index: 50;
    pointer-events: auto;
    box-shadow: 0 30px 60px rgba(0,0,0,0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#info-lote.lote-tooltip--touch {
    padding: 10px 14px;
    font-size: 10px;
    min-width: 160px;
    max-width: 100vw;
}

/* Estilo precio (desktop por defecto) */
.precio-lote {
    font-size: 1.2rem;
}

/* Tarjeta de escritorio más compacta: en las parcelas de abajo no alcanzaba a verse entera. */
#info-lote:not(.lote-tooltip--touch) {
    padding: 12px 16px;
    font-size: 12px;
    pointer-events: none; /* solo informa: el clic lo recibe la parcela de abajo */
}
#info-lote:not(.lote-tooltip--touch) .precio-lote {
    font-size: 1rem;
    margin-top: 8px;
    padding-top: 6px;
}
#info-lote:not(.lote-tooltip--touch) .lote-tooltip__pista {
    margin-top: 8px;
    padding-top: 6px;
}

/* Acción del tooltip del mapa de lotes.
   En escritorio es solo una pista: el tooltip sigue al cursor y un botón ahí sería
   inalcanzable. En táctil sí es un botón, porque el tap no navega a otra parte:
   abre el asistente con la ficha de esa parcela. */
.lote-tooltip__pista {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 9px;
    letter-spacing: 0.2em;
    color: #9ca3af;
}

.lote-tooltip__cta {
    display: block;
    width: 100%;
    margin-top: 12px;
    padding: 11px 14px;
    /* Esmeralda del sitio y del asistente, no el verde de WhatsApp: este botón abre
       el chat, no una conversación de WhatsApp. */
    background: #059669;
    color: #ffffff;
    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.lote-tooltip__cta:hover,
.lote-tooltip__cta:focus-visible {
    background: #047857;
}

@media (max-width: 768px) {
    /* En móvil, el panel va en flujo bajo el mapa */
    #info-lote {
        position: static;
        left: auto;
        top: auto;
        transform: none;
        width: 100%;
        min-height: 100px;
        margin-top: 8px;
        border-radius: 8px;
    }

    #info-lote.lote-tooltip--touch {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    #info-lote.lote-tooltip--touch .lote-tooltip__cta {
        flex: 1 1 100%;
        margin-top: 10px;
    }

    #info-lote.lote-tooltip--touch .precio-lote {
        font-size: 0.8rem;
    }
}

/* =========================================
   6. MENÚ MÓVIL (Full Screen)
   ========================================= */
.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 10001;
    visibility: hidden;
    pointer-events: none;
}

.mobile-menu.active {
    visibility: visible;
    pointer-events: auto;
}

.mobile-menu__backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.95);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.mobile-menu.active .mobile-menu__backdrop {
    opacity: 1;
}

.mobile-menu__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 400px;
    background-color: var(--bg);
    display: flex;
    flex-direction: column;
    padding: 100px 40px;
    transform: translateX(100%);
    transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.5);
}

.mobile-menu.active .mobile-menu__panel {
    transform: translateX(0);
}

.mobile-menu__nav {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    height: 100%;
}

.mobile-menu__link {
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    display: block;
    padding: 8px 0;
    margin: 0;
    text-align: center;
    border-bottom: none;
    transition: color 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;
    width: 100%;
    max-width: 260px;
}

/* El ítem del asistente es un <button>, no un <a>: sin este reset traería el fondo,
   el borde y la tipografía por defecto del navegador y desentonaría con el resto. */
button.mobile-menu__link {
    background: none;
    border: none;
    cursor: pointer;
    font-weight: inherit;
}

.mobile-menu__link--active {
    color: #10b981;
}

.mobile-menu__link:hover {
    color: #10b981;
}

.mobile-menu__close {
    position: absolute;
    top: 30px;
    right: 30px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    width: 45px;
    height: 45px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =========================================
   7. MODAL DE ÉXITO FORMULARIO
   ========================================= */
#contact-success-modal {
    display: none;
}
#contact-success-modal.flex {
    display: flex;
}

/* =========================================
   8. PROMOCIÓN TEMPORAL — Lotes 2 y 33
   ========================================= */
.lote.promo {
    stroke: rgba(251, 191, 36, 0.85) !important;
    animation: promo-pulse 2s ease-in-out infinite;
}

.lote.promo:hover {
    fill: rgba(251, 191, 36, 0.4) !important;
    stroke: #fbbf24 !important;
}

@keyframes promo-pulse {
    0%, 100% { filter: drop-shadow(0 0 3px rgba(251, 191, 36, 0.3)); }
    50%       { filter: drop-shadow(0 0 10px rgba(251, 191, 36, 0.85)); }
}

@keyframes promo-dot {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.2; }
}
/* =========================================
   FOOTER — espacio para el botón del asistente
   ========================================= */
/* El botón flotante del asistente (widget IA) se ancla abajo a la derecha, contra el
   mismo borde del contenedor al que se alinea el crédito "Implementada por", así que
   lo tapaba. Se le reserva abajo la banda que ocupa el botón (60px de alto + su
   separación del borde), medida en 84px: el footer sube y el botón queda flotando en
   el espacio libre, sin cubrir nada. */
/* Va con !important porque la clase `py-10` de Tailwind que trae el <footer> gana
   por especificidad sobre un selector de elemento. Mismo patrón que ya usa la regla
   de `scroll-margin-top` de las secciones, más arriba en este archivo. */
footer {
    padding-bottom: 8rem !important;
}

/* =========================================
   Plano de lotes sobre mapa satelital (mapa-proyecto.js)
   ========================================= */
.mapa-lotes { position: relative; }
/* El mapa va detrás del SVG y ocupa su mismo recuadro: el alto lo sigue dando el SVG. */
.mapa-lotes__lienzo {
    position: absolute; inset: 0; z-index: 1; isolation: isolate; background: transparent;
    /* Mismo tratamiento que tenía la foto: oscurecida y difuminada hacia los bordes. */
    filter: brightness(0.6) contrast(1.1) saturate(0.9);
    mask-image: radial-gradient(ellipse at center, black 45%, transparent 98%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 45%, transparent 98%);
}
#mapa-lotes .leaflet-container { background: transparent; font: inherit; }
.mapa-lotes--vivo #plano-lotes { position: relative; z-index: 2; transition: opacity 0.7s ease; }
/* Las parcelas aparecen al terminar el vuelo. */
.mapa-lotes--volando #plano-lotes { opacity: 0; pointer-events: none; }
#mapa-lotes .leaflet-control-attribution {
    background: transparent; color: rgba(255, 255, 255, 0.6);
    font-size: 8px; letter-spacing: 0.08em; padding: 1px 6px; margin: 0 12% 6% 0;
}
#mapa-lotes .leaflet-control-attribution a { color: inherit; }/* Sobre la imagen satelital las líneas necesitan más cuerpo que sobre la foto. */
.mapa-lotes .lote { stroke-width: 1; }
.mapa-lotes .lote:hover { stroke-width: 2; }
.mapa-lotes .lote.tramite { stroke-dasharray: 4 2.5; }
/* Mientras las líneas se dibujan, el plano se muestra de inmediato (sin fundido) y las
   parcelas todavía no responden al mouse. */
.mapa-lotes--dibujando #plano-lotes { transition: none; pointer-events: none; }

/* Contacto en escritorio: título más chico para que la columna de datos calce con el formulario. */
@media (min-width: 1024px) {
    #contacto h2 { font-size: 2.5rem; margin-bottom: 2rem; }
}