/* ============================================================================
   InmoBolivia · Capa visual 3D de la portada
   ----------------------------------------------------------------------------
   Se carga ÚNICAMENTE desde index.html, después de styles.css. Extiende la hoja
   principal sin modificarla, por lo que ninguna otra página se ve afectada.
   Reutiliza la paleta de marca (--color-accent cyan, --color-magenta) y añade
   profundidad, iluminación y movimiento cinematográfico.
   ========================================================================== */

/* Registrar --zoom permite animarlo con CSS puro: la entrada cinematográfica
   NO depende de ninguna librería externa. Si el navegador no soporta
   @property, --zoom queda en 1 y todo lo demás sigue funcionando. */
@property --zoom {
    syntax: '<number>';
    inherits: true;
    initial-value: 1;
}

/* ── Tokens derivados de la paleta existente (solo sombras/luces) ─────────── */
:root {
    --d-deep:        #060f18;
    --d-shadow-sm:   0 8px 24px rgba(6, 15, 24, .18);
    --d-shadow-md:   0 22px 60px rgba(6, 15, 24, .28);
    --d-shadow-lg:   0 40px 110px rgba(6, 15, 24, .42);
    --d-glow-cyan:   0 0 60px rgba(0, 212, 212, .22);
    --d-ease:        cubic-bezier(.22, 1, .36, 1);
    --d-ease-soft:   cubic-bezier(.4, 0, .2, 1);
}

/* Evita cualquier desbordamiento horizontal en toda la portada. */
html, body { overflow-x: hidden; }

/* ============================================================================
   1. HERO 3D — capas recortadas REALES (render de Claude Design)
   ----------------------------------------------------------------------------
   Ya no se enmascara una sola foto: cada plano es su propia imagen con canal
   alfa, así que la casa está de verdad separada del fondo y del jardín.

        hero-fondo.png    cielo · nubes · montañas · ciudad   →  5 px
        hero-casa.png     la residencia (recortada)           → 13 px
        hero-frente.png   piscina · jardín · vegetación       → 22 px
        hero-luces.png    luces cálidas (mezcla aditiva)      → respira

   Ese desfase entre capas es profundidad real, no un efecto simulado.
   ========================================================================== */

.hero {
    height: 100vh;
    height: 100svh;
    min-height: 640px;
    background: #050f1a;   /* color del render: evita destellos al cargar */
    perspective: 1500px;
    perspective-origin: 50% 48%;
    overflow: hidden;
    isolation: isolate;
}

.hero-scene {
    position: absolute;
    inset: -8%;
    transform-style: preserve-3d;
    pointer-events: none;
    z-index: 0;
    --mx: 0;      /* cursor X  (-1 … 1) */
    --my: 0;      /* cursor Y  (-1 … 1) */
    --sc: 0;      /* scroll    ( 0 … 1) */
    --zoom: 1;    /* dolly-in de la entrada */
    animation: heroCamara 3.6s cubic-bezier(.16, .8, .24, 1) both;
}

/* Dolly-in: la cámara arranca adelantada y retrocede. */
@keyframes heroCamara {
    from { --zoom: 1.16; opacity: 0; }
    10%  { opacity: 1; }
    to   { --zoom: 1;    opacity: 1; }
}

.hero-plane {
    position: absolute;
    inset: 0;
    background-position: center 52%;
    background-size: cover;
    background-repeat: no-repeat;
    will-change: transform;
    backface-visibility: hidden;
}

/* ── CAPA 1 · FONDO: cielo, montañas y ciudad ────────────────────────────────
   El horizonte apenas se desplaza, como en una cámara real.               */
.hero-plane--fondo {
    background-image: url('../img/hero/hero-fondo.png');
    transform:
        scale(calc(1.10 * var(--zoom)))
        translate3d(calc(var(--mx) * 5px), calc(var(--my) * 4px - var(--sc) * 12px), 0);
    filter: brightness(1.02);
}

/* ── CAPA 2 · LA CASA (protagonista, recortada) ──────────────────────────────
   Nítida y bien iluminada. Escala un poco con el scroll: la cámara avanza. */
.hero-plane--casa {
    background-image: url('../img/hero/hero-casa.png');
    transform:
        scale(calc((1.0 + var(--sc) * 0.06) * var(--zoom)))
        translate3d(calc(var(--mx) * 13px), calc(var(--my) * 9px - var(--sc) * 26px), 0);
    filter: brightness(1.06) contrast(1.03);
}

/* ── CAPA 3 · PRIMER PLANO: piscina, jardín y vegetación ─────────────────────
   Lo más cercano a cámara: es lo que más se desplaza.                     */
.hero-plane--frente {
    background-image: url('../img/hero/hero-frente.png');
    transform:
        scale(calc(1.04 * var(--zoom)))
        translate3d(calc(var(--mx) * 22px), calc(var(--my) * 15px + var(--sc) * 30px), 0);
    filter: brightness(1.04) contrast(1.04);
}

/* ── CAPA 4 · LUCES: ventanas y jardín, en mezcla aditiva ────────────────────
   Respiran lentamente, como interiores encendidos.                        */
.hero-plane--luces {
    background-image: url('../img/hero/hero-luces.png');
    transform:
        scale(calc(1.02 * var(--zoom)))
        translate3d(calc(var(--mx) * 15px), calc(var(--my) * 10px - var(--sc) * 20px), 0);
    mix-blend-mode: screen;
    animation: heroCalido 9s ease-in-out infinite alternate;
}
@keyframes heroCalido {
    from { opacity: .72; }
    to   { opacity: 1; }
}

/* Reflejo lento sobre el agua de la piscina (franja inferior izquierda). */
.hero-shimmer {
    position: absolute;
    left: -6%; right: 34%; bottom: 0;
    height: 34%;
    z-index: 1;
    pointer-events: none;
    background: repeating-linear-gradient(102deg,
        rgba(255,255,255,.045) 0px, rgba(255,255,255,.045) 2px,
        transparent 2px, transparent 20px);
    -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 74%);
            mask-image: linear-gradient(to top, #000 0%, transparent 74%);
    animation: heroAgua 14s ease-in-out infinite alternate;
    opacity: .5;
}
@keyframes heroAgua {
    from { transform: translate3d(-12px, 0, 0); }
    to   { transform: translate3d(12px, 0, 0); }
}

/* Bruma atmosférica entre capas. */
.hero-atmos {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(5, 15, 26, .34) 0%, transparent 20%),
        linear-gradient(0deg,  rgba(5, 15, 26, .30) 0%, transparent 24%);
    transform: translate3d(0, calc(var(--sc) * -10px), 0);
}

/* Luz ambiental de marca, muy discreta. */
.hero-light {
    position: absolute;
    inset: -10%;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(34% 28% at 14% 30%, rgba(0, 212, 212, .13), transparent 70%),
        radial-gradient(28% 24% at 86% 72%, rgba(255, 46, 146, .09), transparent 72%);
    mix-blend-mode: screen;
    animation: heroLuz 24s cubic-bezier(.4,0,.2,1) infinite alternate;
    transform: translate3d(calc(var(--mx) * 6px), calc(var(--my) * 5px), 0);
}
@keyframes heroLuz {
    from { opacity: .70; }
    to   { opacity: 1; }
}

/* Placa de legibilidad SOLO tras el texto: el render queda despejado. */
.hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        radial-gradient(50% 38% at 50% 42%, rgba(5, 15, 26, .62) 0%, rgba(5, 15, 26, .22) 66%, transparent 100%),
        linear-gradient(180deg, rgba(5, 15, 26, .38) 0%, transparent 18%, transparent 74%, rgba(5, 15, 26, .34) 100%);
}

.hero-vignette {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: radial-gradient(96% 90% at 50% 50%, transparent 64%, rgba(4, 11, 19, .32) 100%);
}

/* ── Contenido sobre la escena ───────────────────────────────────────────── */
.hero-content { position: relative; z-index: 3; animation: none; }

.hero-subtitle { text-shadow: 0 2px 20px rgba(4, 11, 19, .8); }
.hero-title    { text-shadow: 0 8px 44px rgba(4, 11, 19, .82); letter-spacing: -.01em; }
.hero-text     { text-shadow: 0 2px 22px rgba(4, 11, 19, .82); }

.hero-title em {
    background: linear-gradient(120deg, var(--color-accent-light), var(--color-magenta-light));
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}

.scroll-indicator { position: relative; z-index: 3; }

/* Entrada del contenido, escalonada tras la cámara (CSS puro). */
.hero-content > * { animation: heroTexto 1s cubic-bezier(.22, 1, .36, 1) both; }
.hero-content > .hero-subtitle { animation-delay: .50s; }
.hero-content > .hero-title    { animation-delay: .70s; }
.hero-content > .hero-text     { animation-delay: .95s; }
.hero-content > .search-box    { animation-delay: 1.20s; }
.scroll-indicator              { animation: heroTexto 1s cubic-bezier(.22,1,.36,1) 2s both; }

@keyframes heroTexto {
    from { opacity: 0; transform: translate3d(0, 26px, 0); filter: blur(7px); }
    to   { opacity: 1; transform: none;                    filter: blur(0); }
}

/* ============================================================================
   2. BUSCADOR FLOTANTE — pieza central suspendida
   ========================================================================== */

.search-box {
    background: rgba(255, 255, 255, .93);
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 16px;
    box-shadow:
        var(--d-shadow-lg),
        var(--d-glow-cyan),
        inset 0 1px 0 rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
            backdrop-filter: blur(14px) saturate(1.15);
    transition: transform .5s var(--d-ease), box-shadow .5s var(--d-ease);
    transform: translateZ(0);
}
.search-box:hover,
.search-box:focus-within {
    transform: translate3d(0, -4px, 0);
    box-shadow: var(--d-shadow-lg), 0 0 80px rgba(0, 212, 212, .3);
}

.search-field input,
.search-field select {
    transition: border-color .25s var(--d-ease-soft), box-shadow .25s var(--d-ease-soft);
}
.search-field input:focus,
.search-field select:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(0, 212, 212, .16);
}

.search-btn {
    position: relative;
    overflow: hidden;
    transition: transform .22s var(--d-ease), box-shadow .22s var(--d-ease);
}
.search-btn:hover  { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0, 212, 212, .34); }
.search-btn:active { transform: translateY(0); }

/* ============================================================================
   3. HEADER — transparente sobre el hero, sólido al desplazar
   ========================================================================== */

.header {
    background: transparent;
    border-bottom: 1px solid transparent;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    transition: background .45s var(--d-ease-soft), backdrop-filter .45s var(--d-ease-soft),
                border-color .45s var(--d-ease-soft), box-shadow .45s var(--d-ease-soft);
}
.header .nav a,
.header .mobile-menu-btn { color: rgba(255, 255, 255, .92); transition: color .3s var(--d-ease-soft); }
/* El logotipo conserva SIEMPRE sus colores de marca (cyan + magenta): sobre el
   hero oscuro solo se le añade un halo suave para separarlo del fondo. */
.header .logo-img {
    filter: drop-shadow(0 2px 10px rgba(6, 15, 24, .55));
    transition: filter .45s var(--d-ease-soft);
}

/* Estado desplazado: recupera el aspecto original de la marca */
.header.scrolled {
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
    border-bottom-color: rgba(0, 212, 212, .18);
    box-shadow: 0 6px 30px rgba(6, 15, 24, .08);
}
.header.scrolled .nav a,
.header.scrolled .mobile-menu-btn { color: var(--color-text); }
.header.scrolled .logo-img { filter: none; }

/* El indicador «Descubrir» necesita algo más de contraste sobre la escena. */
.scroll-indicator { text-shadow: 0 2px 12px rgba(6, 15, 24, .6); opacity: .9; }

/* Indicador de navegación elegante */
.header .nav a {
    position: relative;
    padding-bottom: 3px;
}
.header .nav a::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 1.5px;
    background: linear-gradient(90deg, var(--color-accent), var(--color-magenta));
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .35s var(--d-ease);
}
.header .nav a:hover::after { transform: scaleX(1); transform-origin: left; }

/* ============================================================================
   4. TARJETAS DE PROPIEDAD — profundidad e inclinación suave
   ========================================================================== */

.properties-grid { perspective: 1200px; }

.property-card {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--d-shadow-sm);
    transform-style: preserve-3d;
    transition: transform .5s var(--d-ease), box-shadow .5s var(--d-ease);
    will-change: transform;
}
.property-card::after {              /* brillo direccional muy sutil */
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, rgba(255, 255, 255, .16) 0%, transparent 42%);
    opacity: 0;
    transition: opacity .5s var(--d-ease);
    pointer-events: none;
}
.property-card img { transition: transform .7s var(--d-ease); }

@media (hover: hover) and (pointer: fine) {
    .property-card:hover        { box-shadow: var(--d-shadow-md); }
    .property-card:hover::after { opacity: 1; }
    .property-card:hover img    { transform: scale(1.04); }
}

.property-badge {
    background: linear-gradient(135deg, var(--color-accent), var(--color-magenta));
    color: #fff;
    box-shadow: 0 6px 18px rgba(255, 46, 146, .3);
    letter-spacing: .04em;
}

/* ============================================================================
   5. SOBRE NOSOTROS — composición editorial con marco tridimensional
   ========================================================================== */

.about-image {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--d-shadow-md);
    transform: translateZ(0);
}
.about-image::before {               /* marco de luz */
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid rgba(0, 212, 212, .22);
    border-radius: 18px;
    z-index: 2;
    pointer-events: none;
}
.about-image::after {                /* línea técnica decorativa */
    content: '';
    position: absolute;
    left: -14px; top: -14px;
    width: 74px; height: 74px;
    border-left: 2px solid var(--color-accent);
    border-top: 2px solid var(--color-accent);
    border-radius: 4px 0 0 0;
    opacity: .55;
    z-index: 2;
}

/* ============================================================================
   6. ESTADÍSTICAS
   ========================================================================== */

.stat-number {
    background: linear-gradient(120deg, var(--color-primary), var(--color-secondary));
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    font-variant-numeric: tabular-nums;
}

/* ============================================================================
   7. UBICACIONES — parallax interno y profundidad
   ========================================================================== */

.locations-grid { perspective: 1200px; }

.location-card {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--d-shadow-sm);
    transition: transform .55s var(--d-ease), box-shadow .55s var(--d-ease);
}
.location-card img { transition: transform .8s var(--d-ease); }
.location-card .location-overlay {
    background: linear-gradient(180deg, transparent 30%, rgba(6, 15, 24, .82) 100%);
}
.location-name  { transition: transform .5s var(--d-ease); }
.location-count { transition: transform .5s var(--d-ease) .04s, opacity .5s var(--d-ease); }

@media (hover: hover) and (pointer: fine) {
    .location-card:hover     { transform: translateY(-6px); box-shadow: var(--d-shadow-md); }
    .location-card:hover img { transform: scale(1.07); }
    .location-card:hover .location-name  { transform: translateY(-4px); }
    .location-card:hover .location-count { transform: translateY(-4px); }
}

/* ============================================================================
   8. SERVICIOS
   ========================================================================== */

.services-grid { perspective: 1100px; }

.service-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    transition: transform .45s var(--d-ease), box-shadow .45s var(--d-ease);
}
.service-card::before {              /* línea superior de acento */
    content: '';
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 2px;
    background: linear-gradient(90deg, var(--color-accent), var(--color-magenta));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .5s var(--d-ease);
}
.service-icon { transition: transform .45s var(--d-ease); }

@media (hover: hover) and (pointer: fine) {
    .service-card:hover          { transform: translateY(-6px); box-shadow: var(--d-shadow-md); }
    .service-card:hover::before  { transform: scaleX(1); }
    .service-card:hover .service-icon { transform: translateY(-3px) scale(1.06); }
}

/* ============================================================================
   9. LLAMADA FINAL — cierre inmersivo
   ========================================================================== */

.cta-section {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.cta-section::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(60% 70% at 20% 20%, rgba(0, 212, 212, .16), transparent 65%),
        radial-gradient(50% 60% at 82% 74%, rgba(255, 46, 146, .14), transparent 70%);
    animation: heroBreath 20s var(--d-ease-soft) infinite alternate;
}
.cta-section .btn-magenta {
    box-shadow: 0 16px 44px rgba(255, 46, 146, .32);
    transition: transform .25s var(--d-ease), box-shadow .25s var(--d-ease);
}
.cta-section .btn-magenta:hover { transform: translateY(-3px); box-shadow: 0 22px 60px rgba(255, 46, 146, .44); }

/* ============================================================================
   10. FOOTER
   ========================================================================== */

.footer-links a {
    position: relative;
    transition: color .3s var(--d-ease-soft), padding-left .3s var(--d-ease-soft);
}
.footer-links a:hover { color: var(--color-accent); padding-left: 5px; }
.footer-social a { transition: transform .3s var(--d-ease), background .3s var(--d-ease-soft); }
.footer-social a:hover { transform: translateY(-3px); }

/* ============================================================================
   12. MÓVIL — escena simplificada, sin efectos costosos
   ========================================================================== */

@media (max-width: 900px) {
    /* El hero crece con su contenido y deja hueco al encabezado fijo, de modo
       que el texto nunca queda oculto tras él en pantallas pequeñas. */
    .hero {
        perspective: 900px;
        height: auto;
        min-height: 100svh;
        padding: 104px 0 56px;
    }
    .hero-content { padding-top: 8px; }
    /* En móvil se usa UNA sola imagen (el render completo) en vez de cuatro
       capas: se ahorran ~3,6 MB de datos y la escena conserva la entrada de
       cámara y la deriva por scroll. La casa se sigue viendo igual. */
    .hero-plane--casa,
    .hero-plane--frente,
    .hero-shimmer      { display: none; }
    .hero-plane--fondo { background-image: url('../img/hero/hero-completo.png'); }
    .hero-plane--luces { animation-duration: 12s; opacity: .8; }
    .hero-light        { animation-duration: 28s; }
    .search-box {
        -webkit-backdrop-filter: blur(8px);
                backdrop-filter: blur(8px);
    }
    /* Áreas de toque cómodas */
    .search-field input,
    .search-field select { min-height: 46px; font-size: 16px; }  /* 16px evita zoom en iOS */
    .search-btn          { min-height: 50px; }
    .header .nav a::after { display: none; }
}

@media (max-width: 520px) {
    .hero { min-height: 560px; }
    /* En pantallas muy pequeñas, encuadre algo más cerrado sobre la propiedad. */
    .hero-plane { background-position: center 55%; }
}

/* Respeta el área segura en móviles con notch / barra inferior */
@supports (padding: max(0px)) {
    .hero-content {
        padding-left:  max(24px, env(safe-area-inset-left));
        padding-right: max(24px, env(safe-area-inset-right));
    }
}

/* ============================================================================
   13. MOVIMIENTO REDUCIDO — composición estática de alta calidad
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    /* Composición estática: la escena multicapa se conserva, sin movimiento. */
    .hero-scene,
    .hero-content > *,
    .scroll-indicator,
    .hero-light,
    .hero-plane--luces,
    .hero-shimmer,
    .cta-section::before { animation: none !important; }

    .hero-content > *, .scroll-indicator { opacity: 1 !important; transform: none !important; filter: none !important; }

    .hero-scene { opacity: 1 !important; --mx: 0 !important; --my: 0 !important; --sc: 0 !important; --zoom: 1 !important; }
    .hero-plane--fondo  { transform: scale(1.10) !important; }
    .hero-plane--casa   { transform: scale(1.0)  !important; }
    .hero-plane--frente { transform: scale(1.04) !important; }
    .hero-plane--luces  { transform: scale(1.02) !important; }
    .hero-atmos, .hero-light { transform: none !important; }
    .hero-shimmer { display: none !important; }

    .js-3d .hero-content > * {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }

    .property-card,
    .location-card,
    .service-card,
    .search-box { transition: none !important; transform: none !important; }

    .property-card img,
    .location-card img { transition: none !important; transform: none !important; }
}