/* ===================================================
   CAR&CE BIENES RAÍCES — COSTA DE OAXACA
   Editorial Luxury — Navy & Gold
   =================================================== */

:root {
  --arena:        #F5F0E8;
  --arena-deep:   #EDE7DB;
  --arena-warm:   #E8E0D2;
  --carbon:       #2B2B2B;
  --carbon-soft:  rgba(43,43,43,.55);
  --navy:         #07142A;
  --navy-mid:     #122A4A;
  --dorado:       #C9A84C;
  --dorado-dark:  #B8963F;
  --azul:         #85B7EB;
  --white:        #FFFFFF;

  --ff-display: 'Playfair Display', Georgia, serif;
  --ff-body:    'Lato', 'Helvetica Neue', Arial, sans-serif;
  --ff-brand:   'Cinzel', 'Playfair Display', Georgia, serif;

  --ease-out:   cubic-bezier(.22,1,.36,1);
  --ease-snap:  cubic-bezier(.5,0,0,1);

  --gutter:     clamp(20px, 5vw, 80px);
  --max-w:      1200px;
}

/* ─── RESET ─── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{
  font-family:var(--ff-body);
  font-weight:300;
  font-size:16px;
  line-height:1.75;
  color:var(--carbon);
  background:var(--arena);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
ul{list-style:none}
img{max-width:100%;height:auto;display:block}
button{font-family:inherit}

/* ─── UTILITY ─── */
.container{
  max-width:var(--max-w);
  margin:0 auto;
  padding:0 var(--gutter);
}

/* ─── TYPOGRAPHY ─── */
h1,h2,h3{
  font-family:var(--ff-display);
  color:var(--navy);
  font-weight:500;
  line-height:1.15;
}

/* ─── SECTION COMMON ─── */
.section{
  padding:clamp(80px,12vw,160px) 0;
  position:relative;
}

.section-eyebrow{
  display:block;
  font-family:var(--ff-body);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:4px;
  text-transform:uppercase;
  color:var(--dorado);
  margin-bottom:16px;
}
.section-eyebrow--light{color:var(--dorado)}
.section-eyebrow--center{text-align:center}

.section-title{
  font-size:clamp(2rem,4.5vw,3.4rem);
  margin-bottom:20px;
  letter-spacing:-0.02em;
}
.section-title--light{color:var(--arena)}
.section-title--center{text-align:center}

.section-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:40px;
  margin-bottom:60px;
}
.section-header--center{
  flex-direction:column;
  align-items:center;
  text-align:center;
  margin-bottom:72px;
}

.section-desc{
  max-width:400px;
  font-size:.95rem;
  color:#333;
  font-weight:400;
  line-height:1.7;
}
@media (max-width: 768px){
  .section-desc{
    font-weight:500;
    color:#222;
  }
}

/* ─── BUTTONS ─── */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--ff-body);
  font-size:.8rem;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
  padding:18px 36px;
  border:none;
  border-radius:40px;
  cursor:pointer;
  transition:all .4s var(--ease-out);
  position:relative;
  overflow:hidden;
}
.btn svg{transition:transform .3s var(--ease-out)}
.btn:hover svg{transform:translateX(4px)}

.btn-gold{
  background:var(--dorado);
  color:var(--white);
}
.btn-gold::after{
  content:'';
  position:absolute;
  inset:0;
  background:var(--navy);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .5s var(--ease-snap);
  z-index:0;
}
.btn-gold:hover::after{
  transform:scaleX(1);
  transform-origin:left;
}
.btn-gold>*{position:relative;z-index:1}

.btn-outline{
  background:transparent;
  border:1px solid var(--navy);
  color:var(--navy);
}
.btn-outline:hover{
  background:var(--navy);
  color:var(--white);
}

.btn-whatsapp{
  background:#25D366;
  color:var(--white);
  margin-top:32px;
}
.btn-whatsapp:hover{
  background:#1EBE5A;
}
.btn-whatsapp::after{display:none}

.btn-full{width:100%;justify-content:center}

/* ─── HEADER ─── */
.header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:1000;
  height:100px;
  transition:all .5s var(--ease-out);
}
.header.scrolled{
  height:70px;
  background:rgba(245,240,232,.92);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  box-shadow:0 1px 0 rgba(12,35,64,.06);
}
.header-inner{
  max-width:var(--max-w);
  margin:0 auto;
  padding:0 var(--gutter);
  height:100%;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:32px;
}

.header-logo{
  display:flex;
  flex-direction:column;
  align-items:center;
  line-height:1;
  text-align:center;
  transition:transform .5s var(--ease-out);
}
.header.scrolled .header-logo{transform:scale(.85)}

.logo-name{
  font-family:var(--ff-brand);
  font-size:1.5rem;
  font-weight:700;
  color:var(--navy);
  letter-spacing:.18em;
  line-height:1;
  white-space:nowrap;
  text-transform:uppercase;
}
.logo-tagline{
  font-family:var(--ff-body);
  font-size:.6rem;
  letter-spacing:4px;
  text-transform:uppercase;
  color:var(--dorado);
  font-weight:700;
  margin-top:6px;
}

.nav{display:flex;align-items:center}
.nav-left{justify-content:flex-end}
.nav-right{justify-content:flex-start}

.nav-list{
  display:flex;
  gap:32px;
}
.nav-link{
  font-size:.72rem;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--carbon-soft);
  position:relative;
  transition:color .3s;
}
.nav-link::after{
  content:'';
  position:absolute;
  bottom:-6px;left:50%;
  width:0;height:1px;
  background:var(--dorado);
  transition:all .4s var(--ease-out);
  transform:translateX(-50%);
}
.nav-link:hover,
.nav-link.active{color:var(--navy)}
.nav-link:hover::after,
.nav-link.active::after{width:20px}

/* Mobile drawer */
.nav-mobile{
  position:fixed;
  top:0;right:-100%;
  width:85%;max-width:340px;
  height:100vh;height:100dvh;
  background:var(--arena);
  padding:120px var(--gutter) 40px;
  transition:right .5s var(--ease-out);
  box-shadow:-20px 0 60px rgba(0,0,0,.1);
  z-index:999;
  display:flex;
  flex-direction:column;
  gap:32px;
}
.nav-mobile.open{right:0}
.nav-mobile-list{
  display:flex;
  flex-direction:column;
  gap:24px;
}
.nav-mobile-list .nav-link{
  font-size:1rem;
  letter-spacing:2px;
}

/* Hamburger */
.nav-toggle{
  display:none;
  flex-direction:column;
  gap:6px;
  background:none;border:none;cursor:pointer;
  padding:4px;
  z-index:1001;
  position:absolute;
  right:var(--gutter);
  top:50%;
  transform:translateY(-50%);
}
.nav-toggle span{
  display:block;width:26px;height:1.5px;
  background:var(--navy);
  transition:all .4s var(--ease-out);
  transform-origin:center;
}
.nav-toggle.active span:nth-child(1){transform:rotate(45deg) translate(5.5px,5.5px)}
.nav-toggle.active span:nth-child(2){opacity:0;transform:scaleX(0)}
.nav-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(5.5px,-5.5px)}

/* ─── LANGUAGE TOGGLE ─── */
.lang-toggle{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:600;
  letter-spacing:1px;
  color:rgba(255,255,255,.7);
  cursor:pointer;
  padding:6px 12px;
  border:none;
  background:none;
  border-radius:4px;
  transition:color .3s var(--ease-out);
  margin-left:12px;
}
.lang-toggle:hover{color:var(--white)}
.lang-active{color:var(--dorado)}
.lang-divider{opacity:.3}
.lang-inactive{opacity:.5}
.header.scrolled .lang-toggle{color:rgba(43,43,43,.55)}
.header.scrolled .lang-toggle:hover{color:var(--carbon)}
.header.scrolled .lang-active{color:var(--dorado)}

/* ─── HERO ─── */
.hero{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  position:relative;
  overflow:hidden;
  background:var(--navy);
  isolation:isolate;
}

/* Fallback gradient for when there's no video */
.hero:not(.hero--video){
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(201,168,76,.04) 0%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 80% 80%, rgba(133,183,235,.04) 0%, transparent 60%),
    linear-gradient(180deg, var(--arena) 0%, var(--arena-deep) 100%);
}

/* Video background */
.hero-video-wrap{
  position:absolute;
  inset:0;
  z-index:0;
}
.hero-video{
  width:100%;
  height:100%;
  /* Default mobile: cover (llena la pantalla, recorta laterales si hace falta).
     Desktop (min-width:769px) usa contain en la media query mas abajo. */
  object-fit:cover;
  display:block;
  /* Fondo negro porque el video del logo CAR&CE tiene fondo negro (#000).
     En mobile con contain queda letterbox arriba/abajo y el fondo debe coincidir. */
  background:#000;
}
@media (min-width: 769px){
  .hero-video{
    /* Desktop: contain para mostrar el video completo (incluidos logos quemados).
       El letterbox queda navy a los lados, blendea con el fondo del hero. */
    object-fit:contain;
  }
}
/* En movil/portrait, el video del logo (escena 1) se ajusta completo (contain)
   para no recortar las letras CAR&CE. El fondo negro del video se confunde
   con las barras laterales que agrega contain. */
@media (max-width: 768px){
  .hero-video.is-logo-scene{
    object-fit:contain;
  }
}
.hero-video-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(12,35,64,.40) 0%, rgba(12,35,64,.20) 40%, rgba(12,35,64,.55) 100%),
    radial-gradient(ellipse at center, transparent 0%, rgba(12,35,64,.18) 100%);
}

/*
  Logo CAR&CE encima del video de playa. mix-blend-mode: screen
  hace que las zonas oscuras del logo desaparezcan (revelando la playa)
  y las letras doradas se mantengan brillantes en composición.
*/
.hero-logo-overlay{
  position:absolute;
  top:50%;
  left:50%;
  width:clamp(300px, 50%, 640px);
  height:auto;
  transform:translate(-50%, -50%);
  display:block;
  mix-blend-mode:screen;
  pointer-events:none;
  z-index:1;
}

/* Esconder texto del hero durante la escena del logo (escena 1).
   Activado por JS via .hero-text-hidden en la seccion hero */
.hero.hero-text-hidden .anim-reveal,
.hero.hero-text-hidden .hero-scroll-hint{
  opacity:0 !important;
  transform:translateY(30px) !important;
  pointer-events:none;
  transition:opacity .6s ease, transform .6s ease;
}

/* Letterbox calc: cuanto navy queda a los lados / arriba-abajo dado el aspect 16:9 del video
   en un viewport de cualquier proporcion. Solo aplica en desktop (donde usamos contain).
   En mobile el video es cover (sin letterbox), asi que las variables = 0. */
.hero{
  --hero-letterbox-x: 0px;
  --hero-letterbox-y: 0px;
}
@media (min-width: 769px){
  .hero{
    --hero-letterbox-x: max(0px, (100vw - 100vh * 16 / 9) / 2);
    --hero-letterbox-y: max(0px, (100vh - 100vw * 9 / 16) / 2);
  }
}

/* Logo CAR&CE en esquina inferior izquierda. Visibilidad controlada por JS via .is-visible */
.hero-corner-logo{
  position:absolute;
  /* Se desplaza hacia el centro segun el letterbox para quedar SOBRE el video */
  bottom:calc(2rem + var(--hero-letterbox-y));
  left:calc(2rem + var(--hero-letterbox-x));
  width:200px;
  height:auto;
  z-index:2;
  pointer-events:none;
  opacity:0;
  transform:translateY(40px);
  transition:opacity .8s cubic-bezier(0.22, 1, 0.36, 1),
             transform .8s cubic-bezier(0.22, 1, 0.36, 1);
  filter:drop-shadow(0 4px 12px rgba(0,0,0,0.4));
}
.hero-corner-logo.is-visible{
  opacity:1;
  transform:translateY(0);
}
@media (max-width: 768px){
  .hero-corner-logo{
    width:130px;
    bottom:calc(1.25rem + var(--hero-letterbox-y));
    left:calc(1.25rem + var(--hero-letterbox-x));
  }
}
@media (prefers-reduced-motion: reduce){
  .hero-corner-logo{
    transition:none;
  }
}

/* Logo del desarrollo en esquina superior derecha.
   El contenedor maneja slide-down (entrada) y slide-up (salida).
   Las dos imagenes apiladas adentro hacen crossfade entre desarrollos. */
.hero-dev-logo{
  position:absolute;
  /* Header mide 100px (top) y el video puede tener letterbox vertical (--hero-letterbox-y).
     Sumamos AMBOS para que el logo quede sobre el video sin entrar al header. */
  top:calc(10.5rem + var(--hero-letterbox-y));
  right:calc(2rem + var(--hero-letterbox-x));
  width:200px;
  z-index:2;
  pointer-events:none;
  opacity:0;
  transform:translateY(-40px);
  transition:opacity .8s cubic-bezier(0.22, 1, 0.36, 1),
             transform .8s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Scrim radial oscuro detras del logo del desarrollo.
   Crea una zona oscurecida sutil en la esquina superior derecha
   para que cualquier logo (verde, claro, oscuro) quede legible. */
.hero-dev-logo::before{
  content:'';
  position:absolute;
  top:-70px;
  right:-90px;
  bottom:-110px;
  left:-150px;
  background:radial-gradient(
    ellipse at 70% 35%,
    rgba(0,0,0,0.6) 0%,
    rgba(0,0,0,0.35) 35%,
    rgba(0,0,0,0.15) 60%,
    rgba(0,0,0,0) 80%
  );
  pointer-events:none;
  /* Sin z-index: usa source order (::before pinta antes que el slot/imgs) */
}
/* Drop-shadow se aplica solo a las imagenes del logo (no al scrim) */
.hero-dev-logo-img{
  filter:
    drop-shadow(0 0 4px rgba(0,0,0,0.6))
    drop-shadow(0 4px 10px rgba(0,0,0,0.4));
}
.hero-dev-logo.is-visible{
  opacity:1;
  transform:translateY(0);
}
.hero-dev-logo-slot{
  position:relative;
  width:100%;
}
.hero-dev-logo-img{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:auto;
  opacity:0;
  transition:opacity .5s ease;
}
.hero-dev-logo-img:first-child{
  position:relative; /* asegura que el slot tenga altura definida */
}
.hero-dev-logo-img.is-active{
  opacity:1;
}
@media (max-width: 768px){
  .hero-dev-logo{
    width:140px;
    /* Bajar para no chocar con el hamburger del header (header mide 100px) + letterbox */
    top:calc(6rem + var(--hero-letterbox-y));
    right:calc(1.25rem + var(--hero-letterbox-x));
  }
}
@media (prefers-reduced-motion: reduce){
  .hero-dev-logo,
  .hero-dev-logo-img{
    transition:none;
  }
}

/* When video hero: light text + sombras fuertes para asegurar contraste sobre cualquier video */
.hero--video .hero-eyebrow-text{
  color:var(--dorado);
  text-shadow:0 1px 3px rgba(0,0,0,0.7), 0 0 12px rgba(0,0,0,0.4);
}
.hero--video .hero-eyebrow-line{background:var(--dorado);opacity:.5}
.hero--video .hero-title{
  color:var(--arena);
  text-shadow:0 2px 4px rgba(0,0,0,0.8), 0 0 20px rgba(0,0,0,0.5), 0 4px 16px rgba(0,0,0,0.4);
}
.hero--video .hero-title-italic em{
  color:var(--dorado);
  text-shadow:0 2px 4px rgba(0,0,0,0.8), 0 0 20px rgba(0,0,0,0.5);
}
.hero--video .hero-subtitle{
  color:rgba(245,240,232,1);
  text-shadow:0 2px 4px rgba(0,0,0,0.85), 0 0 14px rgba(0,0,0,0.6), 0 4px 12px rgba(0,0,0,0.5);
}
.hero--video .btn-outline{
  border-color:rgba(245,240,232,.4);
  color:var(--arena);
}
.hero--video .btn-outline:hover{
  background:var(--arena);
  color:var(--navy);
  border-color:var(--arena);
}
.hero--video .scroll-text{color:rgba(245,240,232,.4)}
.hero--video .scroll-line{background:linear-gradient(to bottom, var(--dorado), transparent)}

/* Header on video hero: light until scrolled */
.header:not(.scrolled) .logo-name{color:var(--arena)}
.header:not(.scrolled) .logo-tagline{color:rgba(245,240,232,.5)}
.header:not(.scrolled) .logo-divider{background:var(--dorado);opacity:.4}
.header:not(.scrolled) .nav-link{color:rgba(245,240,232,.6)}
.header:not(.scrolled) .nav-link:hover,
.header:not(.scrolled) .nav-link.active{color:var(--arena)}
.header:not(.scrolled) .header-cta{color:var(--arena)}
.header:not(.scrolled) .header-cta-icon{border-color:rgba(245,240,232,.3)}
.header:not(.scrolled) .header-cta-icon svg{stroke:var(--arena)}
.header:not(.scrolled) .nav-toggle span{background:var(--arena)}

/* Decorative elements */
.hero-deco{
  position:absolute;inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:1;
}
.hero-circle{
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(201,168,76,.15);
}
.hero--video .hero-circle{border-color:rgba(245,240,232,.06)}

.hero-circle--1{
  width:clamp(300px,45vw,700px);
  height:clamp(300px,45vw,700px);
  top:-10%;right:-8%;
  animation:heroFloat 20s ease-in-out infinite;
}
.hero-circle--2{
  width:clamp(200px,30vw,500px);
  height:clamp(200px,30vw,500px);
  bottom:-5%;left:-5%;
  border-color:rgba(133,183,235,.08);
  animation:heroFloat 25s ease-in-out infinite reverse;
}
.hero--video .hero-circle--2{border-color:rgba(245,240,232,.04)}

.hero-line{
  position:absolute;
  background:var(--dorado);
  opacity:.1;
}
.hero--video .hero-line{background:rgba(245,240,232,.15);opacity:.15}

.hero-line--1{
  width:1px;height:120px;
  top:15%;left:12%;
  animation:heroFade 4s ease-in-out infinite;
}
.hero-line--2{
  width:80px;height:1px;
  bottom:20%;right:10%;
  animation:heroFade 5s ease-in-out 1s infinite;
}

@keyframes heroFloat{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(20px,-20px) scale(1.03)}
}
@keyframes heroFade{
  0%,100%{opacity:.08}
  50%{opacity:.2}
}

.hero-content{
  position:relative;z-index:2;
  max-width:800px;
  padding:0 var(--gutter);
}

.hero-eyebrow{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  margin-bottom:32px;
}
.hero-eyebrow-text{
  font-size:.7rem;
  font-weight:700;
  letter-spacing:4px;
  text-transform:uppercase;
  color:var(--dorado);
  white-space:nowrap;
}
.hero-eyebrow-line{
  width:48px;height:1px;
  background:var(--dorado);
  opacity:.35;
}

.hero-title{
  font-size:clamp(2.2rem,5.5vw,4rem);
  font-weight:500;
  line-height:1.15;
  color:var(--navy);
  margin-bottom:32px;
  letter-spacing:-0.02em;
}
.hero-title-line{display:block}
.hero-title-italic em{
  color:var(--dorado);
  font-weight:400;
}

.hero-subtitle{
  font-size:clamp(1.1rem,1.5vw,1.4rem);
  color:var(--carbon-soft);
  max-width:580px;
  margin:0 auto 48px;
  line-height:1.8;
}

.hero-actions{
  display:flex;
  gap:16px;
  justify-content:center;
  flex-wrap:wrap;
}

/* Scroll hint */
.hero-scroll-hint{
  position:absolute;
  bottom:40px;left:50%;
  transform:translateX(-50%);
  display:flex;flex-direction:column;
  align-items:center;gap:12px;
  z-index:2;
}
.scroll-line{
  width:1px;height:48px;
  background:linear-gradient(to bottom, var(--dorado), transparent);
  animation:scrollPulse 2s ease-in-out infinite;
}
.scroll-text{
  font-size:.6rem;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--carbon-soft);
}
@keyframes scrollPulse{
  0%,100%{opacity:.3;transform:scaleY(1)}
  50%{opacity:.8;transform:scaleY(1.15)}
}

/* ─── SOUND TOGGLE ─── */
#oceanAudio{display:none !important;width:0;height:0}

.hero-sound-toggle{
  position:fixed !important;
  bottom:28px;
  right:28px;
  z-index:9999;
  /* Visible solo durante el hero. Se oculta al hacer scroll hacia siguiente seccion */
  transition:opacity .4s ease, transform .3s var(--ease-out), background .3s, border-color .3s;
  width:48px;
  height:48px;
  padding:0;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(12,35,64,.45);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border:1px solid rgba(245,240,232,.3);
  border-radius:50%;
  color:rgba(245,240,232,.9);
  cursor:pointer;
  transition:background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
  box-shadow:0 4px 16px rgba(0,0,0,.2);
}
.hero-sound-toggle:hover{
  background:rgba(12,35,64,.65);
  color:#fff;
  border-color:var(--dorado);
  transform:translateY(-2px);
}
.hero-sound-toggle.is-hidden{
  opacity:0;
  pointer-events:none;
  transform:translateY(20px);
}
.hero-sound-toggle svg{display:block;pointer-events:none}
.hero-sound-toggle .icon-sound-on{display:none}
.hero-sound-toggle.active .icon-sound-off{display:none}
.hero-sound-toggle.active .icon-sound-on{display:block}
.hero-sound-toggle.active{
  color:var(--dorado);
  border-color:var(--dorado);
  background:rgba(12,35,64,.6);
}

/* ─── PROPERTIES (Jade Mills editorial) ─── */
.section-propiedades{
  background:var(--arena);
}

.propiedades-header{
  text-align:center;
  max-width:720px;
  margin:0 auto 80px;
}
.propiedades-header .section-eyebrow{
  display:inline-block;
  margin-bottom:20px;
}
.propiedades-header .section-title{
  margin-bottom:24px;
}
.propiedades-header .section-desc{
  font-size:.95rem;
  color:var(--carbon-soft);
  line-height:1.8;
  max-width:560px;
  margin:0 auto;
}

.propiedades-carousel{
  position:relative;
  margin:0 -24px;
}
.propiedades-grid{
  display:flex;
  gap:40px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding:20px 24px 40px;
  scrollbar-width:none;
}
.propiedades-grid::-webkit-scrollbar{display:none}
.propiedades-grid > .propiedad-card{
  flex:0 0 calc((100% - 80px)/3);
  min-width:0;
  scroll-snap-align:start;
}
.carousel-arrow{
  position:absolute;
  top:calc(50% - 60px);
  transform:translateY(-50%);
  width:76px;height:76px;
  background:transparent;
  border:none;
  color:var(--navy);
  cursor:pointer;
  z-index:3;
  display:flex;align-items:center;justify-content:center;
}
.carousel-arrow .arrow-chevron{
  position:relative;
  z-index:2;
}
.carousel-arrow .arrow-circle{
  position:absolute;
  inset:0;
  transform:rotate(-90deg);
  overflow:visible;
}
.carousel-arrow .arrow-circle circle{
  stroke-dasharray:236;
  stroke-dashoffset:236;
  transition:stroke-dashoffset .8s var(--ease-out);
}
.propiedades-carousel:hover .arrow-circle circle{
  stroke-dashoffset:0;
}
.carousel-arrow:disabled{opacity:.25;cursor:default}
.propiedades-carousel:hover .carousel-arrow:disabled .arrow-circle circle{stroke-dashoffset:236}
.carousel-prev{left:-90px}
.carousel-next{right:-90px}

/* Property Card — editorial */
.propiedad-card{
  display:block;
  position:relative;
  color:inherit;
  text-decoration:none;
  transition:transform .6s var(--ease-out);
}
.propiedad-card:hover{transform:translateY(-4px)}

.propiedad-img{
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  background:var(--arena-deep);
  margin-bottom:28px;
}
.propiedad-img img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform 1.4s var(--ease-out);
}
.propiedad-card:hover .propiedad-img img{transform:scale(1.05)}

.propiedad-img-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(12,35,64,0) 55%, rgba(12,35,64,.25) 100%);
  opacity:0;
  transition:opacity .6s var(--ease-out);
  pointer-events:none;
}
.propiedad-card:hover .propiedad-img-overlay{opacity:1}

.propiedad-content{
  text-align:center;
  padding:0 8px;
}
.propiedad-tipo{
  display:inline-block;
  font-size:.62rem;font-weight:700;
  letter-spacing:3px;text-transform:uppercase;
  color:var(--dorado);
  margin-bottom:14px;
}
.propiedad-titulo{
  font-family:var(--ff-display);
  font-size:1.7rem;font-weight:400;
  color:var(--navy);
  margin-bottom:10px;
  letter-spacing:-0.01em;
  line-height:1.2;
}
.propiedad-ubicacion{
  font-size:.78rem;
  letter-spacing:2px;
  text-transform:uppercase;
  color:#444;
  font-weight:500;
  margin-bottom:22px;
}
@media (max-width: 768px){
  .propiedad-ubicacion{
    color:#222;
    font-weight:600;
  }
}

.propiedad-footer{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  padding-top:22px;
  border-top:1px solid rgba(12,35,64,.12);
}
.propiedad-precio{
  font-family:var(--ff-display);
  font-size:1.1rem;font-weight:500;
  color:var(--navy);
  font-style:italic;
}
.propiedad-cta{
  font-size:.65rem;font-weight:700;
  letter-spacing:2.5px;text-transform:uppercase;
  color:var(--dorado);
  display:inline-flex;align-items:center;gap:8px;
  transition:gap .4s var(--ease-out);
}
.propiedad-card:hover .propiedad-cta{gap:14px}

/* ─── SECTION DIVIDER ─── */
.section-divider{padding:0}
.divider-inner{
  display:flex;
  align-items:center;
  gap:20px;
}
.divider-line{
  flex:1;
  height:1px;
  background:var(--arena-deep);
}
.divider-diamond{
  color:var(--dorado);
  font-size:.7rem;
  opacity:.5;
}

/* ─── DESTINO (Puerto Escondido) ─── */
.section-destino{
  background:var(--navy-mid);
  overflow:hidden;
}
.destino-deco{
  position:absolute;inset:0;
  pointer-events:none;
}
.destino-circle{
  position:absolute;
  width:clamp(400px,50vw,800px);
  height:clamp(400px,50vw,800px);
  border-radius:50%;
  border:1px solid rgba(245,240,232,.04);
  top:50%;right:-15%;
  transform:translateY(-50%);
}

.destino-feature{
  position:relative;
  margin-top:20px;
}
.destino-stage{
  position:relative;
  width:100%;
  height:clamp(360px,58vh,640px);
  overflow:hidden;
  border:1px solid rgba(245,240,232,.08);
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  background-color:var(--navy);
}
.destino-stage-img{
  position:absolute;inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  transform:scale(1.06);
  transition:opacity 1.1s var(--ease-out), transform 6s var(--ease-out);
}
.destino-stage-img.active{
  opacity:1;
  transform:scale(1);
}
.destino-stage-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(10,20,35,.15) 0%, rgba(10,20,35,.55) 100%);
  pointer-events:none;
}
.destino-stage-label{
  position:absolute;
  left:clamp(24px,4vw,48px);
  bottom:clamp(24px,4vw,44px);
  font-family:var(--ff-display);
  font-size:clamp(1.8rem,4vw,3.2rem);
  font-weight:400;
  color:var(--arena);
  letter-spacing:.01em;
  line-height:1;
  z-index:2;
  transition:opacity .4s var(--ease-out), transform .6s var(--ease-out);
}

.destino-carousel-wrap{
  position:relative;
  margin-top:40px;
}
.destino-carousel{
  display:flex;
  gap:clamp(20px,2.5vw,40px);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -ms-overflow-style:none;
  scroll-behavior:smooth;
}
.destino-carousel::-webkit-scrollbar{display:none}
.destino-carousel > .destino-item{
  flex:0 0 calc((100% - clamp(20px,2.5vw,40px)) / 2);
  scroll-snap-align:start;
}
.destino-item{
  background:transparent;
  border:none;
  padding:0;
  text-align:center;
  color:inherit;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:16px;
  opacity:.55;
  transition:opacity .5s var(--ease-out);
  font-family:inherit;
  text-decoration:none;
}
.destino-item:hover,
.destino-item.active{
  opacity:1;
}
/* Solo la imagen es clickeable, no la descripcion ni los bullets.
   Esto permite leer sin que el carousel auto-navegue al darle click sin querer */
.destino-item-link{
  display:block;
  text-decoration:none;
  color:inherit;
  cursor:pointer;
}
.destino-item-img{
  position:relative;
  width:100%;
  aspect-ratio:4/5;
  overflow:hidden;
  background:rgba(0,0,0,.55);
}
.destino-item-img img{
  width:100%;height:100%;
  object-fit:contain;
  transition:transform 1.2s var(--ease-out);
}
.destino-item:hover .destino-item-img img:not(.destino-logo){
  transform:scale(1.04);
}
/* Logo grande del desarrollo en esquina superior izquierda de la imagen del destacado.
   Posicion uniforme para todos para evitar choques de color con vegetacion en otras esquinas. */
.destino-item-img img.destino-logo{
  position:absolute;
  top:4%;
  left:4%;
  bottom:auto;
  right:auto;
  width:45%;
  height:auto;
  max-width:none;
  z-index:2;
  pointer-events:none;
  filter:drop-shadow(0 4px 16px rgba(0,0,0,0.5))
         drop-shadow(0 0 4px rgba(0,0,0,0.4));
  transition:transform 1.2s var(--ease-out);
  transform-origin:top left;
}
.destino-item:hover .destino-item-img img.destino-logo{
  transform:scale(1.06);
}
.destino-item-img::after{
  content:'';
  position:absolute;inset:0;
  border:1px solid transparent;
  transition:border-color .5s var(--ease-out);
}
.destino-item.active .destino-item-img::after{
  border-color:var(--dorado);
}
.destino-item-num{
  font-family:var(--ff-display);
  font-size:.85rem;
  color:var(--dorado);
  letter-spacing:.15em;
  opacity:.7;
  margin-top:4px;
}
.destino-item h3{
  font-family:var(--ff-display);
  font-size:1.1rem;
  color:var(--arena);
  font-weight:500;
  line-height:1.3;
}
.destino-item p{
  font-size:.82rem;
  color:var(--arena);
  opacity:.92;
  font-weight:400;
  line-height:1.7;
}
.destino-bullets{
  list-style:none;
  padding:0;
  margin:8px 0 0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.destino-bullets li{
  font-size:.78rem;
  color:var(--arena);
  opacity:.85;
  font-weight:400;
  line-height:1.6;
}
.destino-bullets li strong{
  opacity:1;
  font-weight:700;
}
@media (max-width: 768px){
  .destino-item p{opacity:1; font-weight:500}
  .destino-bullets li{opacity:.95; font-weight:500}
}
.destino-bullets li strong{
  color:var(--arena);
  opacity:.8;
}

.destino-prev,.destino-next{
  color:var(--arena);
}
.destino-prev{left:-90px}
.destino-next{right:-90px}
.destino-feature:hover .destino-prev .arrow-circle circle,
.destino-feature:hover .destino-next .arrow-circle circle{
  stroke-dashoffset:0;
}

@media (max-width:960px){
  .destino-carousel > .destino-item{flex-basis:calc((100% - clamp(20px,2.5vw,40px)) / 2)}
  .destino-prev{left:8px}
  .destino-next{right:8px}
}
@media (max-width:560px){
  .destino-carousel > .destino-item{flex-basis:100%}
}

/* ─── ABOUT ─── */
.section-sobre{
  background:var(--white);
}

/* Vertical stacked layout (video on top, content below) */
.sobre-stack{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(40px,6vw,72px);
}

.sobre-video{
  position:relative;
  width:100%;
  max-width:640px;
  /*
    Recorte inferior del video (oculta marca de agua "Veo" baked-in).
    Solo cambia este número (0–0.30) para ajustar.
    El aspect-ratio del frame y la altura del video se calculan a partir de aquí.
  */
  --crop: 0.10;
}
.sobre-video-frame{
  position:relative;
  overflow:hidden;
  aspect-ratio: 16 / calc(9 * (1 - var(--crop)));
  background:var(--navy);
}
.sobre-video-frame::before{
  content:'';
  position:absolute;
  top:-12px;left:-12px;
  width:calc(100% + 12px);
  height:calc(100% + 12px);
  border:1px solid var(--dorado);
  opacity:.25;
  z-index:2;
  pointer-events:none;
}
.sobre-video-frame video{
  position:absolute;
  top:0;left:0;
  z-index:1;
  display:block;
  width:100%;
  height:calc(100% / (1 - var(--crop)));
  object-fit:cover;
  object-position:center top;
  background:var(--navy);
}

.sobre-tagline{
  margin-top:24px;
  text-align:center;
  font-family:var(--ff-display);
  font-size:clamp(1.05rem, 1.6vw, 1.35rem);
  font-style:italic;
  font-weight:400;
  color:var(--dorado);
  letter-spacing:.02em;
  line-height:1.4;
}
.sobre-tagline em{
  font-style:italic;
  color:var(--dorado-dark);
}

.sobre-content--center{
  text-align:center;
  max-width:720px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.sobre-content--center .section-eyebrow{
  display:block;
  margin-bottom:16px;
}
.sobre-content--center .section-title{
  margin-bottom:28px;
}
.sobre-text p{
  font-size:1rem;
  line-height:1.85;
  color:#1a1a1a;
  font-weight:400;
  margin-bottom:16px;
}
.sobre-text p strong{
  color:#000;
  font-weight:700;
}
@media (max-width: 768px){
  .sobre-text p{
    font-size:1.02rem;
    font-weight:500;
    color:#111;
    line-height:1.75;
  }
}
.sobre-text p:last-child{margin-bottom:0}
.sobre-content--center .sobre-text{
  margin-bottom:36px;
}

.sobre-stats{
  display:flex;gap:40px;
  margin:36px 0;
}
.sobre-stat{
  display:flex;align-items:flex-start;gap:16px;
}
.sobre-stat-line{
  width:1px;height:40px;
  background:var(--dorado);
  opacity:.35;
  flex-shrink:0;
  margin-top:4px;
}
.sobre-stat-value{
  display:block;
  font-family:var(--ff-display);
  font-size:1.1rem;font-weight:600;
  color:var(--navy);
  margin-bottom:2px;
}
.sobre-stat-label{
  font-size:.72rem;
  color:var(--carbon-soft);
  letter-spacing:0.5px;
}

/* ─── TESTIMONIALS ─── */
.section-testimonios{
  background:var(--arena);
}
.testimonios-inner{
  max-width:720px;
  margin:0 auto;
  text-align:center;
}

.testimonios-carousel{
  position:relative;
  min-height:200px;
  margin-bottom:48px;
}
.testimonio{
  display:none;
  animation:testimonioIn .6s var(--ease-out);
}
.testimonio.active{display:block}

@keyframes testimonioIn{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:translateY(0)}
}

.testimonio-quote{
  color:var(--dorado);
  margin:0 auto 24px;
  display:block;
}

.testimonio blockquote p{
  font-family:var(--ff-display);
  font-size:clamp(1.15rem,2.2vw,1.5rem);
  font-style:italic;
  font-weight:400;
  color:var(--navy);
  line-height:1.65;
  margin-bottom:28px;
}

.testimonio-autor{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
}
.testimonio-dash{
  width:24px;height:1px;
  background:var(--dorado);
  opacity:.4;
}
.autor-nombre{
  font-weight:700;
  font-size:1.05rem;
  color:var(--carbon);
}
.autor-detalle{
  font-size:.75rem;
  color:var(--carbon-soft);
  margin-left:8px;
}

.testimonios-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
}
.testimonios-btn{
  width:44px;height:44px;
  border:1px solid var(--arena-deep);
  background:transparent;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  color:var(--navy);
  transition:all .3s var(--ease-out);
}
.testimonios-btn:hover{
  border-color:var(--dorado);
  color:var(--dorado);
}
.testimonios-dots{display:flex;gap:8px}
.testimonios-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--arena-deep);
  cursor:pointer;
  transition:all .3s;
}
.testimonios-dot.active{
  background:var(--dorado);
  transform:scale(1.3);
}

/* ─── CONTACT ─── */
.section-contacto{
  background:var(--white);
}
.contacto-layout{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:clamp(40px,8vw,100px);
  align-items:start;
}

.contacto-intro{
  font-size:1rem;
  color:#333;
  font-weight:400;
  line-height:1.75;
  margin-bottom:8px;
}
@media (max-width: 768px){
  .contacto-intro{
    color:#222;
    font-weight:500;
  }
}

.contacto-datos{
  display:flex;flex-direction:column;
  gap:16px;
  margin-top:36px;
}
/* Mapa embebido de la oficina (ancho completo, estilo igual al de propiedad) */
.contacto-mapa{
  margin-top:clamp(60px,8vw,100px);
  width:100%;
  aspect-ratio:21/9;
  max-height:520px;
  overflow:hidden;
  background:var(--arena-deep);
  border:1px solid rgba(12,35,64,.1);
}
.contacto-mapa iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
  filter:grayscale(.2) contrast(1.05);
}
@media (max-width: 768px){
  .contacto-mapa{
    aspect-ratio:4/3;
    margin-top:48px;
  }
}
.contacto-dato{
  display:flex;align-items:center;
  gap:14px;
  transition:color .3s;
}
a.contacto-dato{
  text-decoration:none;
  color:inherit;
  cursor:pointer;
}
a.contacto-dato:hover{color:var(--dorado)}

.contacto-dato-icon{
  width:40px;height:40px;
  border:1px solid var(--arena-deep);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  color:var(--dorado);
  transition:all .3s var(--ease-out);
}
a.contacto-dato:hover .contacto-dato-icon{
  background:var(--dorado);
  border-color:var(--dorado);
  color:var(--white);
}
.contacto-dato-text{
  font-size:.9rem;
  color:var(--carbon);
}

/* Form */
.contacto-form-wrapper{
  background:var(--arena);
  padding:clamp(28px,4vw,48px);
}
.contacto-form{
  display:flex;flex-direction:column;
  gap:20px;
}
.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

.form-group{display:flex;flex-direction:column;gap:8px}
.form-group label{
  font-size:.68rem;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;
  color:var(--carbon);
}
.form-group input,
.form-group select,
.form-group textarea{
  font-family:var(--ff-body);
  font-size:.9rem;font-weight:300;
  padding:14px 16px;
  border:1px solid var(--arena-deep);
  background:var(--white);
  color:var(--carbon);
  outline:none;
  transition:border-color .3s;
  -webkit-appearance:none;
  border-radius:0;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  border-color:var(--dorado);
}
.form-group input::placeholder,
.form-group textarea::placeholder{
  color:var(--carbon-soft);
  font-weight:300;
}
.form-group textarea{resize:vertical}
.form-group select{cursor:pointer}

.form-status{
  display:none;
  padding:14px 18px;
  font-size:.85rem;
  text-align:center;
}
.form-status.success{
  background:rgba(201,168,76,.1);
  color:var(--dorado-dark);
  display:block;
}
.form-status.error{
  background:rgba(200,50,50,.08);
  color:#9B3030;
  display:block;
}
.spinner{animation:spin 1s linear infinite}
.btn-loading{display:inline-flex;align-items:center;gap:8px}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* ─── FOOTER ─── */
.footer{
  background:var(--navy);
  padding:clamp(48px,8vw,80px) 0 32px;
}
.footer-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:48px;
  padding-bottom:clamp(36px,5vw,56px);
  border-bottom:1px solid rgba(245,240,232,.06);
}

.footer-logo-name{
  font-family:var(--ff-brand);
  font-size:1.15rem;font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--arena);
  display:block;
  margin-bottom:6px;
}
.footer-logo-tag{
  font-size:.65rem;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--dorado);
  display:block;
  margin-bottom:16px;
}
.footer-desc{
  font-size:.88rem;
  color:var(--arena);
  opacity:.4;
  max-width:320px;
  line-height:1.6;
}

.footer-nav{
  display:flex;gap:64px;
}
.footer-col h4{
  font-family:var(--ff-body);
  font-size:.65rem;font-weight:700;
  letter-spacing:3px;text-transform:uppercase;
  color:var(--dorado);
  margin-bottom:20px;
}
.footer-col a{
  display:block;
  font-size:.85rem;
  color:var(--arena);
  opacity:.4;
  padding:5px 0;
  transition:all .3s;
}
.footer-col a:hover{
  opacity:1;color:var(--dorado);
}

.footer-bottom{
  padding-top:24px;
  text-align:center;
}
.footer-bottom p{
  font-size:.72rem;
  color:var(--arena);
  opacity:.35;
  letter-spacing:.5px;
  margin:4px 0;
}
.footer-bottom .footer-credit{
  opacity:.9;
  color:var(--arena);
}
.footer-credit a{
  color:var(--dorado);
  text-decoration:none;
  font-weight:700;
  transition:opacity .3s var(--ease-out);
}
.footer-credit a:hover{opacity:.75}

/* ─── LEGAL PAGES ─── */
.body-legal{background:var(--arena)}
.legal-header{
  padding:160px 0 60px;
  background:var(--navy);
  color:var(--arena);
  text-align:center;
}
.legal-header .section-eyebrow{color:var(--dorado)}
.legal-header h1{
  font-family:var(--ff-display);
  font-size:clamp(2rem,4.5vw,3.4rem);
  font-weight:400;
  margin:16px 0 12px;
}
.legal-header .legal-updated{
  font-size:.82rem;
  opacity:.6;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.legal-content{padding:80px 0 120px;color:var(--carbon)}
.legal-container{max-width:820px;margin:0 auto}
.legal-content h2{
  font-family:var(--ff-display);
  font-size:1.5rem;
  font-weight:500;
  margin:40px 0 16px;
  color:var(--navy);
}
.legal-content h3{
  font-family:var(--ff-display);
  font-size:1.15rem;
  font-weight:500;
  margin:24px 0 12px;
  color:var(--navy);
}
.legal-content p,
.legal-content li{
  font-size:.95rem;
  line-height:1.8;
  color:var(--carbon);
  opacity:.85;
  margin-bottom:14px;
}
.legal-content ul{
  padding-left:22px;
  margin-bottom:18px;
}
.legal-content a{
  color:var(--dorado-dark,var(--navy));
  text-decoration:underline;
}

/* ─── WHATSAPP FLOAT ─── */
/* Inicia oculto durante el hero. Aparece al hacer scroll a la siguiente seccion. */
.wa-float{
  position:fixed;
  bottom:28px;right:28px;
  width:54px;height:54px;
  background:#25D366;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 24px rgba(37,211,102,.3);
  z-index:999;
  opacity:0;
  pointer-events:none;
  transform:translateY(20px);
  transition:opacity .4s ease, transform .4s var(--ease-out), background .3s, box-shadow .3s;
}
.wa-float.is-visible{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}
/* Modificador "proximamente": cuando no tiene enlace activo aun.
   Mantiene la opacidad reducida y deshabilita el cursor de click */
.wa-float--disabled.is-visible{
  opacity:.55;
  cursor:default;
}
.wa-float--disabled:hover{
  transform:translateY(0); /* sin animacion de hover si esta disabled */
}
.wa-float:hover{
  transform:scale(1.1) translateY(-2px);
  box-shadow:0 8px 32px rgba(37,211,102,.4);
}

/* ─── ANIMATIONS ─── */

/* Hero staggered reveal */
.anim-reveal{
  opacity:0;
  transform:translateY(40px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.anim-reveal.visible{
  opacity:1;
  transform:translateY(0);
}
.anim-reveal[data-delay="1"]{transition-delay:.15s}
.anim-reveal[data-delay="2"]{transition-delay:.3s}
.anim-reveal[data-delay="3"]{transition-delay:.45s}
.anim-reveal[data-delay="4"]{transition-delay:.6s}

/* Scroll reveal */
.reveal-up{
  opacity:0;
  transform:translateY(50px);
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.reveal-up.visible{
  opacity:1;
  transform:translateY(0);
}

/* Stagger children */
.destino-item:nth-child(2){transition-delay:.08s}
.destino-item:nth-child(3){transition-delay:.16s}
.destino-item:nth-child(4){transition-delay:.24s}

/* Property card entrance — slide from side like Jade Mills */
.propiedad-card{
  opacity:0;
  transform:translateX(80px);
  transition:opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out);
}
.propiedad-card.card-visible{
  opacity:1;
  transform:translateX(0);
}
.propiedad-card:nth-child(1){transition-delay:0s}
.propiedad-card:nth-child(2){transition-delay:.15s}
.propiedad-card:nth-child(3){transition-delay:.3s}
.propiedad-card:nth-child(4){transition-delay:.45s}
.propiedad-card:nth-child(5){transition-delay:.6s}
.propiedad-card:nth-child(6){transition-delay:.75s}
.propiedad-card:hover{transform:translateY(-4px)}
.propiedad-card.card-visible:hover{transform:translateY(-6px)}

/* ─── RESPONSIVE ─── */

@media(max-width:1024px){
  .section-header{
    flex-direction:column;
    align-items:flex-start;
    gap:16px;
  }
  .section-header--center{
    align-items:center;
  }
  .section-desc{max-width:100%}

  .sobre-stack{gap:40px}
  .sobre-video{max-width:520px}
  .contacto-layout{
    grid-template-columns:1fr;
    gap:48px;
  }
  .propiedades-grid > .propiedad-card{flex:0 0 calc((100% - 40px)/2)}
}

@media(max-width:768px){
  /* Header */
  .header-inner{grid-template-columns:1fr;justify-items:center;padding-top:28px}
  .nav-left,.nav-right{display:none}
  .logo-name{font-size:1.2rem}
  .nav-toggle{display:flex}
  .lang-toggle{position:absolute;top:6px;left:var(--gutter);margin-left:0;padding:4px 8px;font-size:10px;letter-spacing:.5px}
  .header-cta{display:none}
  .nav-mobile-list{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:28px;
    padding:0;margin:0;
  }
  .nav-mobile-list .nav-link{
    font-size:1rem;
    letter-spacing:2px;
  }

  /* Mobile overlay */
  .nav-overlay{
    display:none;
    position:fixed;inset:0;
    background:rgba(12,35,64,.3);
    z-index:998;
    backdrop-filter:blur(4px);
  }
  .nav-overlay.active{display:block}

  /* Hero */
  .hero{
    min-height:100vh;min-height:100dvh;
    padding:120px 0 60px;
    align-items:center;
  }
  .hero-content{padding-top:0}
  .hero-eyebrow{margin-bottom:20px;gap:12px}
  .hero-eyebrow-text{font-size:.6rem;letter-spacing:2px;white-space:normal}
  .hero-eyebrow-line{width:20px}
  .hero-title{font-size:clamp(1.7rem,6.5vw,2.4rem);margin-bottom:22px;line-height:1.2}
  .hero-subtitle{font-size:1rem;line-height:1.7;margin-bottom:28px}
  .hero-actions{flex-direction:column;align-items:center}
  .hero-actions .btn{width:100%;max-width:300px;justify-content:center}
  .hero-scroll-hint{display:none}
  .hero-dot-grid{display:none}

  /* Properties */
  .propiedades-grid{gap:24px;padding:20px 20px 32px}
  .propiedades-grid > .propiedad-card{flex:0 0 100%}
  .carousel-arrow{display:none}
  .propiedades-header{margin-bottom:56px}
  .propiedad-titulo{font-size:1.5rem}

  /* Destino */
  .destino-stage{height:56vh}

  /* About */
  .sobre-video{max-width:100%}
  .sobre-video::before{top:-8px;left:-8px}

  /* Contact */
  .form-row{grid-template-columns:1fr}
  .contacto-form-wrapper{padding:24px}

  /* Footer */
  .footer-top{
    flex-direction:column;
    gap:36px;
  }
  .footer-nav{gap:40px}
}

@media(max-width:420px){
  .hero-title{font-size:1.7rem}
  .btn{padding:16px 28px;font-size:.72rem}
  .footer-nav{
    flex-direction:column;
    gap:28px;
  }
}

/* ═══════════════════════════════════════════════════
   PROPERTY DETAIL PAGE
   ═══════════════════════════════════════════════════ */

.body-detail{background:var(--arena)}

.header--solid{
  background:rgba(245,240,232,.96);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(12,35,64,.08);
}
.header--solid .nav-link{color:var(--carbon-soft)}
.header--solid .nav-link:hover,
.header--solid .nav-link.active{color:var(--navy)}
.header--solid .logo-name{color:var(--navy)}

#propDetail{padding-top:100px}

.prop-loading{
  min-height:60vh;
  display:flex;align-items:center;justify-content:center;
  color:var(--carbon-soft);
  font-size:.8rem;letter-spacing:2px;text-transform:uppercase;
}

/* ─── Gallery ─── */
.prop-hero{
  background:var(--navy);
  padding:0;
}
.prop-hero-main{
  position:relative;
  width:100%;
  height:min(82vh,820px);
  overflow:hidden;
  background:var(--navy);
  display:flex;
  align-items:center;
  justify-content:center;
}
.prop-hero-main::before{
  content:'';
  position:absolute;inset:0;
  background-image:var(--hero-bg, none);
  background-size:cover;
  background-position:center;
  filter:blur(40px) brightness(.55);
  transform:scale(1.1);
  z-index:0;
}
.prop-hero-main #galMain,
.prop-hero-main #galVideo{
  position:relative;
  z-index:1;
  max-width:100%;
  max-height:100%;
  width:auto;height:auto;
  object-fit:contain;
  display:block;
  animation:fadeIn .6s var(--ease-out);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.5);
}
.gal-thumb--video .gal-thumb-play{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--white);
  background:rgba(12,35,64,.3);
  pointer-events:none;
  z-index:2;
}
.gal-thumb--video .gal-thumb-play svg{
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.5));
}
@keyframes fadeIn{from{opacity:.3}to{opacity:1}}

.gal-arrow{
  position:absolute;
  top:50%;transform:translateY(-50%);
  width:86px;height:86px;
  background:transparent;
  border:none;
  color:var(--arena);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  z-index:3;
}
.gal-arrow .arrow-chevron{
  position:relative;
  z-index:2;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.5));
}
.gal-arrow .arrow-circle{
  position:absolute;
  inset:0;
  transform:rotate(-90deg);
  overflow:visible;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.35));
}
.gal-arrow .arrow-circle circle{
  stroke-dasharray:267;
  stroke-dashoffset:267;
  transition:stroke-dashoffset .9s var(--ease-out);
}
/* Wrapper que se ajusta al tamano real renderizado de la foto/video,
   para que el logo se posicione respecto a la imagen, no al contenedor */
.prop-hero-media{
  position:relative;
  z-index:1;
  max-width:100%;
  max-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
/* Solo aplica a la imagen/video principal, NO al logo */
.prop-hero-media #galMain,
.prop-hero-media #galVideo{
  max-width:100%;
  max-height:100%;
  width:auto;height:auto;
  display:block;
}
/* Logo del desarrollo: chiquito en esquina inferior derecha DE LA IMAGEN */
.prop-hero-media > .prop-hero-logo{
  position:absolute;
  top:10px;
  left:10px;
  width:85px;
  height:auto;
  max-width:none;
  z-index:3;
  pointer-events:none;
  filter:drop-shadow(0 0 3px rgba(0,0,0,0.7))
         drop-shadow(0 2px 4px rgba(0,0,0,0.5));
  animation:fadeIn .6s var(--ease-out);
}
@media (max-width: 768px){
  .prop-hero-media > .prop-hero-logo{
    width:55px;
    top:6px;
    left:6px;
  }
}

.prop-hero-main:hover .arrow-circle circle{
  stroke-dashoffset:0;
}
.gal-prev{left:32px}
.gal-next{right:32px}

.gal-counter{
  position:absolute;
  bottom:24px;right:24px;
  background:rgba(12,35,64,.7);
  color:var(--arena);
  padding:8px 16px;
  font-size:.72rem;letter-spacing:2px;
  font-family:var(--ff-body);
  z-index:2;
}

.prop-hero-thumbs{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:2px;
  background:var(--navy);
  max-width:1400px;
  margin:0 auto;
}
.gal-thumb{
  position:relative;
  aspect-ratio:4/3;
  border:none;
  padding:0;
  cursor:pointer;
  overflow:hidden;
  background:var(--navy);
}
.gal-thumb img{
  width:100%;height:100%;
  object-fit:cover;
  opacity:.55;
  transition:opacity .4s;
}
.gal-thumb:hover img{opacity:.85}
.gal-thumb.active img{opacity:1}
.gal-thumb.active::after{
  content:'';
  position:absolute;
  inset:0;
  border:2px solid var(--dorado);
  pointer-events:none;
}

/* ─── Intro ─── */
.prop-intro{
  padding:80px 0 40px;
}
.prop-intro-inner{
  max-width:760px;
  margin:0 auto;
  text-align:center;
}
.prop-back{
  display:inline-flex;
  align-items:center;gap:10px;
  font-size:.68rem;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;
  color:var(--carbon-soft);
  margin-bottom:32px;
  text-align:left;
  transition:all .3s;
}
.prop-back:hover{color:var(--dorado);gap:14px}

.prop-eyebrow{
  display:block;
  font-size:.7rem;font-weight:700;
  letter-spacing:4px;text-transform:uppercase;
  color:var(--dorado);
  margin-bottom:12px;
  text-align:center;
}
.prop-title{
  font-family:var(--ff-display);
  font-size:clamp(2.4rem,5vw,3.8rem);
  font-weight:400;
  color:var(--navy);
  letter-spacing:-0.02em;
  line-height:1.1;
  margin-bottom:16px;
}
.prop-location{
  font-size:.82rem;
  letter-spacing:3px;text-transform:uppercase;
  color:var(--carbon-soft);
  margin-bottom:48px;
}

.prop-keyfacts{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  border-top:1px solid rgba(12,35,64,.12);
  border-bottom:1px solid rgba(12,35,64,.12);
  padding:32px 0;
  margin-top:8px;
}
.prop-keyfact{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:0 16px;
  border-right:1px solid rgba(12,35,64,.12);
}
.prop-keyfact:last-child{border-right:none}
.kf-label{
  font-size:.6rem;font-weight:700;
  letter-spacing:2.5px;text-transform:uppercase;
  color:var(--dorado);
}
.kf-value{
  font-family:var(--ff-display);
  font-size:1.15rem;font-weight:500;
  color:var(--navy);
  font-style:italic;
}

/* ─── Body ─── */
.prop-body{padding:80px 0 100px}
.prop-body-grid{
  display:grid;
  grid-template-columns:1fr 380px;
  gap:80px;
  align-items:start;
}
.prop-section-title{
  font-family:var(--ff-display);
  font-size:1.6rem;font-weight:500;
  color:var(--navy);
  margin-bottom:24px;
  letter-spacing:-0.01em;
}
.prop-section-title--center{text-align:center;margin-bottom:8px}

.prop-description-text p{
  font-size:1rem;
  line-height:1.9;
  color:#1a1a1a;
  margin-bottom:20px;
}
.prop-description-text p:last-child{margin-bottom:48px}

.ficha-beneficios-list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px 32px;
  list-style:none;
  padding:0;
  margin:0;
}
.ficha-beneficio{
  display:flex;
  align-items:center;
  gap:14px;
  font-size:.88rem;
  color:var(--carbon);
  padding:14px 0;
  border-bottom:1px solid rgba(12,35,64,.08);
}
.ficha-beneficio svg{
  flex-shrink:0;
  color:var(--dorado);
}

/* ─── Sidebar contact card ─── */
.prop-sidebar{
  position:sticky;
  top:120px;
}
.prop-contact-card{
  background:var(--white);
  padding:40px 36px;
  border:1px solid rgba(12,35,64,.08);
  box-shadow:0 20px 60px -30px rgba(12,35,64,.15);
}
.prop-sidebar-eyebrow{
  display:block;
  font-size:.62rem;font-weight:700;
  letter-spacing:3px;text-transform:uppercase;
  color:var(--dorado);
  margin-bottom:12px;
}
.prop-sidebar-title{
  font-family:var(--ff-display);
  font-size:1.4rem;font-weight:500;
  color:var(--navy);
  margin-bottom:14px;
  line-height:1.25;
}
.prop-sidebar-desc{
  font-size:.85rem;
  color:var(--carbon-soft);
  line-height:1.7;
  margin-bottom:24px;
}
.btn-block{
  width:100%;
  justify-content:center;
  margin-bottom:12px;
}
.btn-outline-dark{
  background:transparent;
  border:1px solid rgba(12,35,64,.25);
  color:var(--navy);
  padding:18px 32px;
  font-size:.68rem;font-weight:700;
  letter-spacing:2.5px;text-transform:uppercase;
  display:inline-flex;align-items:center;justify-content:center;
  gap:10px;
  transition:all .4s var(--ease-out);
  cursor:pointer;
}
.btn-outline-dark:hover{
  background:var(--navy);
  color:var(--arena);
  border-color:var(--navy);
}
.prop-sidebar-divider{
  height:1px;
  background:rgba(12,35,64,.1);
  margin:28px 0 24px;
}
.prop-sidebar-elsa{
  font-size:.8rem;
  color:var(--carbon-soft);
  line-height:1.7;
}
.prop-sidebar-elsa strong{
  color:var(--navy);
  font-family:var(--ff-display);
  font-size:1rem;
  font-weight:500;
  display:block;
  margin-bottom:4px;
}

/* ─── Map ─── */
.prop-map{padding:40px 0 100px}
.prop-map-caption{
  text-align:center;
  font-size:.78rem;
  letter-spacing:2px;text-transform:uppercase;
  color:var(--carbon-soft);
  margin-bottom:40px;
}
.prop-map-frame{
  position:relative;
  width:100%;
  aspect-ratio:21/9;
  max-height:520px;
  overflow:hidden;
  background:var(--arena-deep);
  border:1px solid rgba(12,35,64,.1);
}
.prop-map-frame iframe{
  width:100%;height:100%;
  border:0;
  display:block;
  filter:grayscale(.2) contrast(1.05);
}

/* ─── Responsive ─── */
@media(max-width:1024px){
  .prop-body-grid{grid-template-columns:1fr;gap:48px}
  .prop-sidebar{position:static}
}
@media(max-width:768px){
  #propDetail{padding-top:80px}
  .prop-hero-main{aspect-ratio:4/3}
  .gal-arrow{width:44px;height:44px}
  .gal-prev{left:12px}
  .gal-next{right:12px}
  .prop-intro{padding:56px 0 32px}
  .prop-title{font-size:2rem}
  .prop-keyfacts{
    grid-template-columns:1fr;
    padding:0;
  }
  .prop-keyfact{
    padding:20px 0;
    border-right:none;
    border-bottom:1px solid rgba(12,35,64,.12);
  }
  .prop-keyfact:last-child{border-bottom:none}
  .prop-body{padding:48px 0 64px}
  .prop-contact-card{padding:32px 24px}
  .ficha-beneficios-list{grid-template-columns:1fr;gap:0}
  .prop-map-frame{aspect-ratio:4/3}
  .prop-hero-thumbs{grid-template-columns:repeat(4,1fr)}
  .prop-hero-main{height:70vh}
}

/* ═══════════════════════════════════════════════════
   CUSTOM CURSOR
   ═══════════════════════════════════════════════════ */
@media(hover:hover) and (pointer:fine){
  html,body{cursor:none}
  a,button,input,textarea,select,label,[role="button"],.filtro-btn,.carousel-arrow,.gal-arrow,.gal-thumb,.propiedad-card,.nav-link,.btn{cursor:none}

  .cursor-dot,
  .cursor-ring{
    position:fixed;
    top:0;left:0;
    pointer-events:none;
    z-index:9999;
    opacity:0;
    will-change:transform,opacity;
  }
  .cursor-dot{
    width:8px;height:8px;
    border-radius:50%;
    background:var(--dorado);
    transform:translate(-50%,-50%);
    transition:opacity .3s, width .35s var(--ease-out), height .35s var(--ease-out), background .3s;
    mix-blend-mode:difference;
  }
  .cursor-ring{
    width:40px;height:40px;
    border-radius:50%;
    border:1.5px solid var(--navy);
    transform:translate(-50%,-50%);
    transition:opacity .4s, width .4s var(--ease-out), height .4s var(--ease-out), border-color .3s, background .3s;
  }
  .cursor-visible .cursor-dot{opacity:1}
  .cursor-visible .cursor-ring{opacity:.6}

  .cursor-hover .cursor-dot{
    width:14px;height:14px;
  }
  .cursor-hover .cursor-ring{
    width:60px;height:60px;
    border-color:var(--dorado);
    background:rgba(201,168,76,.08);
    opacity:.9;
  }
}
@media(hover:none),(pointer:coarse){
  .cursor-dot,.cursor-ring{display:none}
}

/* ============================================
   STORYTELLING ENGINE (canvas + scrollable sections)
   ============================================ */

.story-wrap {
  position: relative;
  width: 100%;
  /* Altura natural: cada seccion 100vh, el video acompana el scroll por sticky */
  background: var(--navy);
}

.story-canvas-wrap {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  z-index: 0;
}

#storyCanvas,
.story-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Overlay oscuro encima del canvas para mejor contraste con contenido */
.story-canvas-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(12, 35, 64, 0.35) 0%,
    rgba(12, 35, 64, 0.55) 100%
  );
  pointer-events: none;
}

/* Loader del storytelling */
.story-loader {
  position: fixed;
  inset: 0;
  background: var(--navy);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 24px;
  transition: opacity .8s ease, visibility .8s ease;
}
.story-loader--hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.story-loader-bar {
  width: 200px;
  height: 2px;
  background: rgba(245, 240, 232, 0.2);
  overflow: hidden;
}
.story-loader-fill {
  height: 100%;
  width: 0%;
  background: var(--dorado);
  transition: width .15s ease;
}
.story-loader-text {
  font-family: var(--ff-display);
  font-size: .9rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--arena);
  opacity: 0.6;
}

/* Contenedor de secciones encima del canvas */
.story-content {
  position: relative;
  z-index: 1;
  /* Mover hacia arriba para que cada section "flote" encima del canvas */
  margin-top: -100vh;
}

/* Secciones del storytelling: fondos translucidos para que se vea el video */
.story-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 80px 0;
  z-index: 2;
}

/* Container interno (igual que el resto del sitio) */
.story-section .container {
  position: relative;
  z-index: 2;
}

/* Backdrop sutil: oscurecemos un poco el video detras del contenido para legibilidad,
   pero la playa SIGUE visible. Opacidad baja (15-25%) en vez de 92%. */
.story-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(12, 35, 64, 0) 0%,
    rgba(12, 35, 64, 0.18) 50%,
    rgba(12, 35, 64, 0) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Variante dark (mas oscuro para secciones que originalmente eran navy como destacados) */
.story-section--dark::before {
  background: linear-gradient(
    180deg,
    rgba(12, 35, 64, 0) 0%,
    rgba(12, 35, 64, 0.55) 30%,
    rgba(12, 35, 64, 0.55) 70%,
    rgba(12, 35, 64, 0) 100%
  );
}

/* Variante clear: sin backdrop, contenido directo sobre el video */
.story-section--clear::before {
  background: transparent;
}

/* Reset de fondos de secciones que originalmente tenian fondo opaco.
   Las secciones tienen ambas clases (.story-section.section-X), por eso el selector
   sin espacio (que requiere ambas clases en el mismo elemento) */
section.story-section,
.story-section.section-sobre,
.story-section.section-propiedades,
.story-section.section-destino,
.story-section.section-testimonios,
.story-section.section-contacto {
  background: transparent !important;
}

/* El section-divider tambien tiene color de fondo por defecto */
.story-content .section-divider {
  background: transparent !important;
}

/* ============================================
   TEXT COLORS dentro del storytelling
   Todo el texto sobre el video de playa va en blanco/dorado con sombra
   ============================================ */

/* Titulos y headings principales: blanco con sombra */
.story-content .section-title,
.story-content .section-eyebrow,
.story-content .propiedad-titulo,
.story-content .propiedad-precio,
.story-content .destino-item h3,
.story-content .testimonio blockquote p,
.story-content .autor-nombre,
.story-content h2,
.story-content h3,
.story-content h4,
.story-content .footer-logo-name,
.story-content .footer-logo-tag {
  color: var(--arena) !important;
  text-shadow: 0 2px 4px rgba(0,0,0,0.6), 0 0 12px rgba(0,0,0,0.3);
}

/* Texto de cuerpo (parrafos, descripciones): blanco con sombra mas suave */
.story-content .sobre-text p,
.story-content .sobre-text p strong,
.story-content .section-desc,
.story-content .contacto-intro,
.story-content .propiedad-ubicacion,
.story-content .prop-location,
.story-content .destino-item p,
.story-content .destino-bullets li,
.story-content .footer-desc,
.story-content .footer-col h4,
.story-content .footer-col ul li a {
  color: rgba(255,255,255,0.95) !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7), 0 0 8px rgba(0,0,0,0.4);
}

/* Strong dentro de bullets/parrafos: dorado para destacar */
.story-content .destino-bullets li strong,
.story-content .sobre-text p strong {
  color: var(--dorado) !important;
}

/* Labels de keyfacts y datos de contacto: claros con sombra */
.story-content .contacto-dato,
.story-content .contacto-dato-text {
  color: rgba(255,255,255,0.95) !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

/* Labels del formulario: navy para contrastar con el fondo beige del form-wrapper */
.story-content .form-group label {
  color: var(--navy) !important;
  text-shadow: none;
}

/* Inputs del formulario con fondo translucido oscuro */
.story-content .form-group input,
.story-content .form-group textarea,
.story-content .form-group select {
  background: rgba(255,255,255,0.92) !important;
  color: var(--navy) !important;
  border: 1px solid rgba(245,240,232,0.3) !important;
}

/* Numeros decorativos de los destacados (01, 02, etc): dorado bien visible */
.story-content .destino-item-num {
  color: var(--dorado) !important;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}

/* Variante "image" del frame de Sobre Carce (cuando es foto en vez de video).
   La imagen es cuadrada (1:1) en vez del 16:9 del video original. */
.sobre-video-frame--image {
  aspect-ratio: 1 / 1 !important;
  background: transparent !important;
  border-radius: 4px;
}
.sobre-video-frame--image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Body navy como fallback cuando el canvas no llena 100% (mejor que arena cream).
   En este archivo de storytelling SIEMPRE aplica este body bg. */
html, body {
  background: var(--navy) !important;
}

/* Mobile: ajustes para que el storytelling funcione bien en portrait.
   Cambiamos el flex layout a block para que el contenido fluya verticalmente normal. */
@media (max-width: 768px) {
  .story-section {
    /* Quitar el flex para que el contenido fluya normalmente en mobile */
    display: block !important;
    min-height: auto;
    padding: 80px 0;
    align-items: initial;
  }
  /* En mobile mantenemos el overlap: las secciones se sobreponen al video */
  .story-content {
    margin-top: -100vh;
    margin-top: -100dvh;
  }
  .story-canvas-wrap {
    height: 100vh;
    height: 100dvh;
  }
  /* Carrusel de propiedades: card centrado en viewport */
  .propiedades-grid > .propiedad-card {
    scroll-snap-align: center;
  }
}