/* ============================================================
   CUMBRE REAL — V1
   Paleta: verde profundo, verde secundario, dorado, beige
   Tipografía: Playfair Display (títulos) + Montserrat (texto/UI)
   ============================================================ */
:root{
  --verde:        #123B2A;
  --verde-2:      #1E5B3A;
  --dorado:       #C8A45D;
  --beige:        #F4EFE6;
  --blanco:       #FFFFFF;
  --texto:        #17231D;
  --texto-suave:  #4B5A50;
  --whatsapp:     #25D366;
  --whatsapp-d:   #1DA851;

  /* Paleta azul institucional — exclusiva de Header, Logo, Hero y Formulario (fase 2) */
  --azul-inst:      #003B73;
  --azul-profundo:  #00264D;
  --azul-sec:       #0066A6;
  --amarillo:       #F5B800;
  --dorado-sec:     #D99F00;
  --fondo-claro:    #F4F6F8;
  --texto-oscuro:   #102A43;

  --font-title: 'Playfair Display', serif;
  --font-body:  'Montserrat', sans-serif;

  --radius: 10px;
  --radius-lg: 18px;
  --shadow: 0 12px 30px rgba(18,59,42,0.14);
  --container: 1180px;
  --ease: cubic-bezier(.2,.7,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--texto);
  background:var(--blanco);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}

h1,h2,h3,h4{
  font-family:var(--font-title);
  font-weight:700;
  line-height:1.15;
  margin:0 0 .5em;
  color:var(--verde);
}
h2{ font-size:clamp(1.7rem, 3.4vw, 2.4rem); }
h3{ font-size:1.15rem; }
p{ margin:0 0 1em; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }
em{ font-style:normal; color:var(--dorado); }

.container{ max-width:var(--container); margin:0 auto; padding:0 clamp(20px,5vw,40px); }
.container--narrow{ max-width:760px; }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{
  outline:3px solid var(--dorado);
  outline-offset:2px;
}

.center{ text-align:center; margin-left:auto; margin-right:auto; }
.muted{ color:var(--texto-suave); font-size:.9rem; }
.disclaimer{ font-size:.82rem; color:var(--texto-suave); margin-top:1.5em; }
.disclaimer--light{ color:rgba(244,239,230,.65); }

/* ============================================================
   FIX #2 — Navegación con header fijo (scroll-margin-top)
   ============================================================ */
#ubicacion,
#etapas,
#financiamiento,
#plano,
#faq,
#contacto,
#lead-card{
  scroll-margin-top: 100px;
}

/* ============================================================
   Fade-in on scroll
   ============================================================ */
.fade-in{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.fade-in.is-visible{ opacity:1; transform:none; }

/* ============================================================
   Eyebrow / section titles
   ============================================================ */
.eyebrow{
  font-family:var(--font-body);
  font-weight:700;
  font-size:.75rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--dorado);
  margin:0 0 .8em;
}
.eyebrow--center{ text-align:center; }
/* FIX #1 — variante de alto contraste para fondos claros (blanco/beige) */
.eyebrow--light{ color:var(--verde-2); }
.section__title{ max-width:20ch; }
.section__title.center{ margin-left:auto; margin-right:auto; }
.section__lead{ max-width:56ch; color:var(--texto-suave); }
.section__lead.center{ margin-left:auto; margin-right:auto; }

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55em;
  padding:.95em 1.7em;
  font-family:var(--font-body);
  font-weight:700;
  font-size:.95rem;
  border-radius:var(--radius);
  border:2px solid transparent;
  cursor:pointer;
  transition:transform .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease), color .2s var(--ease);
}
.btn:hover{ transform:translateY(-2px); }
.btn--primary{ background:var(--dorado); color:var(--verde); box-shadow:var(--shadow); }
.btn--primary:hover{ background:#d9b878; }
.btn--outline{ background:transparent; color:var(--verde); border-color:var(--verde-2); }
.btn--outline:hover{ background:var(--verde); color:var(--beige); }
.btn--whatsapp{ background:var(--whatsapp); color:#fff; }
.btn--whatsapp:hover{ background:var(--whatsapp-d); }
.btn--full{ width:100%; }

/* ============================================================
   Header / Nav
   ============================================================ */
.header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  background:rgba(18,59,42,0);
  transition:background .3s var(--ease), box-shadow .3s var(--ease), padding .3s var(--ease);
  padding:18px 0;
}
.header.is-scrolled{
  background:var(--azul-inst);
  box-shadow:0 6px 20px rgba(0,0,0,.15);
  padding:10px 0;
}
.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.brand{ display:flex; align-items:center; gap:.6em; }
.brand__mark{ width:34px; height:34px; object-fit:contain; }
.brand__text{
  font-family:var(--font-title);
  font-weight:700;
  font-size:1.15rem;
  color:var(--beige);
  letter-spacing:.02em;
}
.brand__text em{ color:var(--dorado); }

/* ============================================================
   Logo + nombre del HEADER — mayor presencia visual (fase 2)
   Overrides exclusivos de .header para no afectar el logo del footer.
   ============================================================ */
.header .brand{ gap:.9em; }
.header .brand__mark{ width:60px; height:60px; }
.header .brand__text{
  font-size:1.65rem;
  color:#FFFFFF;
  white-space:nowrap;
}
.header .brand__text em{ color:var(--amarillo); }

@media (max-width:1024px){
  .header .brand{ gap:.75em; }
  .header .brand__mark{ width:52px; height:52px; }
  .header .brand__text{ font-size:1.42rem; }
}
@media (max-width:480px){
  .header .brand{ gap:.6em; }
  .header .brand__mark{ width:42px; height:42px; }
  .header .brand__text{ font-size:1.2rem; }
}

.nav{ display:flex; align-items:center; gap:1.8em; }
.nav a{
  color:#FFFFFF;
  font-size:.9rem;
  font-weight:600;
  opacity:.88;
}
.nav a:hover{ opacity:1; color:var(--amarillo); }
.nav__cta{
  background:var(--amarillo);
  color:var(--azul-profundo) !important;
  padding:.6em 1.2em;
  border-radius:var(--radius);
  opacity:1 !important;
}
.nav__cta:hover{ background:var(--dorado-sec); }

.hamburger{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  padding:8px;
  z-index:101;
  position:relative;
}
.hamburger span{
  width:24px; height:2px; background:#FFFFFF; display:block; border-radius:2px;
  transition:transform .3s var(--ease), opacity .2s var(--ease);
}
/* FIX #4 — hamburguesa se transforma en X */
.hamburger.is-active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger.is-active span:nth-child(2){ opacity:0; }
.hamburger.is-active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* FIX #4 — backdrop semitransparente detrás del menú mobile */
.nav-backdrop{
  position:fixed; inset:0;
  background:rgba(0,38,77,.6);
  opacity:0;
  visibility:hidden;
  transition:opacity .3s var(--ease), visibility .3s var(--ease);
  z-index:95;
}
.nav-backdrop.is-visible{ opacity:1; visibility:visible; }

@media (max-width:900px){
  .hamburger{ display:flex; }
  .nav{
    position:fixed;
    top:0; right:0;
    height:100vh;
    width:min(80vw,320px);
    background:var(--azul-inst);
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:1.8em;
    padding:0 40px;
    transform:translateX(100%);
    transition:transform .35s var(--ease);
    z-index:100;
  }
  .nav.is-open{ transform:translateX(0); }
}

/* ============================================================
   Hero
   ============================================================ */
.hero{ position:relative; overflow:hidden; padding-top:120px; }
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__media img{ width:100%; height:100%; object-fit:cover; }
.hero__overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,59,115,.87) 0%, rgba(0,38,77,.78) 45%, rgba(0,38,77,.68) 100%);
}
.hero__grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:clamp(24px,5vw,60px);
  align-items:center;
  padding:48px 0 76px;
}
.hero__copy .eyebrow{ color:var(--amarillo); display:flex; align-items:center; gap:.5em; }
.hero h1{
  font-size:clamp(2.6rem,6.5vw,4.4rem);
  color:#FFFFFF;
  margin-bottom:.2em;
  letter-spacing:.01em;
}
/* FIX #10 — evita que "CUMBRE REAL" quede forzado en pantallas de 320–430px */
@media (max-width:480px){
  .hero h1{ font-size:clamp(2.1rem, 10vw, 2.6rem); }
}
.hero__tagline{
  font-family:var(--font-title);
  font-style:italic;
  font-weight:600;
  font-size:clamp(1.1rem,2.4vw,1.5rem);
  color:#FFFFFF;
  margin-bottom:.3em;
}
.hero__desc{ color:#FFFFFF; opacity:.85; font-size:1.05rem; max-width:42ch; }

.hero__highlights{
  display:flex;
  flex-wrap:wrap;
  gap:.8em 1.4em;
  margin:1.4em 0 1.8em;
}
.hero__highlights li{
  display:flex;
  align-items:center;
  gap:.5em;
  color:#FFFFFF;
  font-weight:600;
  font-size:.92rem;
  background:rgba(0,59,115,.35);
  border:1px solid rgba(255,255,255,.28);
  padding:.6em 1em;
  border-radius:999px;
}
.hero__highlights i{ color:var(--amarillo); }
/* Precio destacado en amarillo dentro del primer indicador */
.hero__highlights li:first-child{ color:var(--amarillo); font-weight:700; }
.hero__price-block{ display:flex; flex-direction:column; line-height:1.2; }
.hero__price-block small{
  font-size:.66em;
  font-weight:500;
  color:rgba(255,255,255,.75);
  letter-spacing:.02em;
}

/* Mobile: permitir 2 chips por fila para acortar el scroll antes del CTA */
@media (max-width:640px){
  .hero__highlights{ gap:.6em; }
  .hero__highlights li{
    flex:1 1 calc(50% - .6em);
    justify-content:center;
    text-align:center;
    font-size:.8rem;
    padding:.55em .7em;
  }
  .hero__price-block{ align-items:center; }
}

.hero__actions{ display:flex; flex-wrap:wrap; gap:1em; margin-bottom:1.2em; }
.hero__actions .btn--primary{ background:var(--amarillo); color:var(--azul-profundo); }
.hero__actions .btn--primary:hover{ background:var(--dorado-sec); }
/* CTA secundario del Hero: WhatsApp en variante outline/fantasma,
   subordinado visualmente al CTA dorado principal. Mismo comportamiento,
   número y mensaje (vía .js-wa) — solo cambia la presentación. */
.btn--whatsapp-outline{
  background:transparent;
  color:#FFFFFF;
  border:1.5px solid var(--whatsapp);
}
.btn--whatsapp-outline:hover{
  background:rgba(37,211,102,.12);
  border-color:var(--whatsapp-d);
}
.btn--whatsapp-outline i{ color:var(--whatsapp); }
.hero__trust{
  display:flex;
  align-items:center;
  gap:.5em;
  color:rgba(255,255,255,.82);
  font-size:.78rem;
  font-weight:600;
  margin:0 0 .6em;
}
.hero__trust i{ color:var(--amarillo); }
.hero__note{ color:rgba(255,255,255,.7); font-size:.78rem; max-width:48ch; }

/* Lead card */
.lead-card{
  background:var(--blanco);
  border-radius:var(--radius-lg);
  padding:clamp(24px,3vw,34px);
  box-shadow:0 24px 60px rgba(0,0,0,.28);
}
.lead-card h2{ font-size:1.4rem; color:var(--azul-inst); }
.lead-card > p{ color:var(--texto-oscuro); font-size:.92rem; }

.lead-form{ display:flex; flex-direction:column; gap:1.1em; margin-top:1.2em; }
.field{ display:flex; flex-direction:column; gap:.4em; }
.field label{ font-size:.82rem; font-weight:700; color:var(--azul-inst); }
.field input, .field select{
  font-family:var(--font-body);
  font-size:.95rem;
  padding:.85em 1em;
  border:1.5px solid #dbe3ea;
  border-radius:var(--radius);
  background:var(--fondo-claro);
  color:var(--texto);
}
.field input:focus, .field select:focus{ border-color:var(--azul-sec); }
.field__error{
  display:none;
  color:#b3413a;
  font-size:.78rem;
  font-weight:600;
}
.field.has-error input,
.field.has-error select{ border-color:#b3413a; }
.field.has-error .field__error{ display:block; }

.lead-form .btn--primary{ background:var(--amarillo); color:var(--azul-profundo); }
.lead-form .btn--primary:hover{ background:var(--dorado-sec); }

.lead-success{ text-align:center; padding:1em 0; }
.lead-success i{ font-size:2.4rem; color:var(--verde-2); margin-bottom:.3em; }
.lead-success h3{ font-size:1.2rem; }
.lead-success p{ color:var(--texto-suave); font-size:.92rem; }

@media (max-width:960px){
  .hero__grid{ grid-template-columns:1fr; }
}

/* ============================================================
   Benefits bar
   ============================================================ */
.benefits-bar{ background:var(--beige); padding:34px 0; }
.benefits-bar__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.2em;
}
.benefit-chip{
  display:flex;
  align-items:center;
  gap:.9em;
  background:var(--blanco);
  padding:1.1em 1.2em;
  border-radius:var(--radius);
  box-shadow:0 6px 18px rgba(18,59,42,.08);
}
.benefit-chip i{ font-size:1.5rem; color:var(--dorado); }
.benefit-chip strong{ display:block; font-family:var(--font-title); color:var(--verde); font-size:1.05rem; }
.benefit-chip span{ font-size:.78rem; color:var(--texto-suave); }
@media (max-width:860px){ .benefits-bar__grid{ grid-template-columns:repeat(2,1fr); } }

/* ============================================================
   Sections generic
   ============================================================ */
.section{ padding:clamp(56px,8vw,96px) 0; }
.section--tint{ background:var(--beige); }
.section--dark{ background:var(--verde); color:var(--beige); }
.section--dark h2, .section--dark .eyebrow{ color:var(--beige); }
.section--dark .eyebrow{ color:var(--dorado); }

/* ============================================================
   Ubicación
   ============================================================ */
.location-grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:clamp(24px,4vw,50px);
  align-items:center;
  margin-top:2.4em;
}
.location-list{ display:flex; flex-direction:column; margin-bottom:1.8em; }
.location-list li{
  display:flex;
  align-items:center;
  gap:1.1em;
  padding:1.15em 0;
  border-bottom:1px solid rgba(200,164,93,.18);
}
.location-list li:first-child{ padding-top:0; }
.location-list li:last-child{ border-bottom:none; padding-bottom:0; }
.location-list__icon{
  flex-shrink:0;
  width:46px; height:46px;
  border-radius:50%;
  background:rgba(200,164,93,.14);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--dorado);
  font-size:1.15rem;
}
.location-list__text{
  font-size:clamp(1.15rem, 1.4vw + .6rem, 1.35rem);
  font-weight:600;
  color:var(--verde);
  line-height:1.35;
}
.location-list__text strong{ color:var(--verde-2); font-weight:800; }

.location-cta{
  background:var(--beige);
  border-radius:var(--radius);
  padding:1.7em 1.8em;
}
.location-cta__title{
  font-family:var(--font-title);
  font-weight:700;
  color:var(--verde);
  font-size:1.15rem;
  margin:0 0 .3em;
}
.location-cta__desc{
  color:var(--texto-suave);
  font-size:.92rem;
  margin:0 0 1.2em;
}

.location-grid__map img{
  width:100%;
  display:block;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
}
.location-grid__map-note{
  margin:.9em 0 0;
  font-size:.8rem;
  color:var(--texto-suave);
  text-align:center;
}

@media (max-width:860px){
  .location-grid{ grid-template-columns:1fr; }
}
@media (max-width:480px){
  .location-list__text{ font-size:1.05rem; }
  .location-list__icon{ width:40px; height:40px; font-size:1.02rem; }
  .location-cta{ padding:1.4em 1.5em; }
}

/* ============================================================
   Vivienda + Inversión
   ============================================================ */
.cards-2{ display:grid; grid-template-columns:1fr 1fr; gap:1.6em; }
.purpose-card{
  background:var(--blanco);
  border:1.5px solid #e7dfcb;
  border-radius:var(--radius-lg);
  padding:clamp(28px,3vw,40px);
  text-align:center;
}
.purpose-card i{ font-size:2.2rem; color:var(--dorado); margin-bottom:.4em; }
.purpose-card p{ color:var(--texto-suave); }
@media (max-width:760px){ .cards-2{ grid-template-columns:1fr; } }

/* ============================================================
   Etapas
   ============================================================ */
.stage-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.2em;
  margin-top:2.2em;
}
.stage-card{
  background:var(--blanco);
  border:1.5px solid #e7dfcb;
  border-radius:var(--radius-lg);
  padding:1.8em 1.5em;
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:.6em;
}
.stage-card__tag{
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:.72rem;
  color:var(--verde-2);
}
.stage-card__price{
  font-family:var(--font-title);
  font-size:1.8rem;
  color:var(--verde);
  margin:0;
}
.stage-card__info{ color:var(--texto-suave); font-size:.85rem; flex-grow:1; }
.stage-card--highlight{
  background:var(--verde);
  border-color:var(--verde);
}
.stage-card--highlight .stage-card__tag{ color:var(--dorado); }
.stage-card--highlight .stage-card__price{ color:var(--beige); }
.stage-card--highlight .stage-card__info{ color:rgba(244,239,230,.75); }

@media (max-width:860px){ .stage-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .stage-grid{ grid-template-columns:1fr; } }

/* FIX #7 — CTA "Consultar precios" */
.section-cta{ text-align:center; margin-top:2em; }

/* ============================================================
   Promociones
   ============================================================ */
.promo-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.4em;
  margin-top:2.2em;
}
.promo-card{
  background:rgba(244,239,230,.06);
  border:1.5px solid rgba(200,164,93,.35);
  border-radius:var(--radius-lg);
  padding:2em 1.5em;
  text-align:center;
}
.promo-card i{ font-size:2rem; color:var(--dorado); margin-bottom:.5em; }
.promo-card h3{ color:var(--beige); margin-bottom:.3em; }
.promo-card__value{ font-family:var(--font-title); font-size:1.3rem; color:var(--dorado); margin:0; }
/* FIX #7 — CTA "Quiero separar mi lote" dentro de la tarjeta de Separación */
.promo-card .btn{ margin-top:1.2em; }
@media (max-width:760px){ .promo-grid{ grid-template-columns:1fr; } }

/* ============================================================
   Financiamiento
   ============================================================ */
.financing__grid{
  display:grid;
  grid-template-columns:1.3fr .7fr;
  gap:2.4em;
  align-items:center;
}
.financing__badge{
  background:var(--verde);
  border-radius:var(--radius-lg);
  padding:2.4em 1.5em;
  text-align:center;
  color:var(--beige);
}
.financing__number{
  display:block;
  font-family:var(--font-title);
  font-size:4.5rem;
  color:var(--dorado);
  line-height:1;
}
.financing__label{ font-size:.9rem; font-weight:600; }
@media (max-width:760px){ .financing__grid{ grid-template-columns:1fr; } }

/* ============================================================
   Plano
   ============================================================ */
.plano-wrap{
  margin-top:2.2em;
  background:var(--beige);
  border-radius:var(--radius-lg);
  padding:14px;
}
/* FIX #11 — visor acotado: alto máximo fijo, ancho legible, scroll/pan interno */
.plano-scroll{
  max-width:1300px;
  margin:0 auto;
  max-height:68vh;
  overflow:auto;
  border-radius:var(--radius);
  border:1px solid #e7dfcb;
  -webkit-overflow-scrolling:touch;
}
.plano-scroll img{
  display:block;
  width:1100px;
  max-width:none;
  height:auto;
  border-radius:var(--radius);
}
@media (max-width:700px){
  .plano-scroll{ max-height:58vh; }
  .plano-scroll img{ width:900px; }
}
.plano-hint{
  text-align:center;
  font-size:.8rem;
  color:var(--texto-suave);
  margin:.8em 0 0;
}
@media (min-width:900px){ .plano-hint{ display:none; } }

.stage-buttons{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:1em;
  margin-top:1.6em;
}
.stage-btn{
  padding:.7em 1.6em;
  border-radius:999px;
  border:1.5px solid var(--verde-2);
  color:var(--verde);
  font-weight:700;
  font-size:.9rem;
  transition:background .2s, color .2s;
}
.stage-btn:hover{ background:var(--verde); color:var(--beige); }

/* ============================================================
   Amenities
   ============================================================ */
.amenities-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:#e7dfcb;
  border:1px solid #e7dfcb;
  margin-top:2.2em;
  border-radius:var(--radius-lg);
  overflow:hidden;
}
.amenity{
  background:var(--blanco);
  padding:2em 1.4em;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.7em;
  text-align:center;
}
.amenity i{ font-size:1.6rem; color:var(--dorado); }
.amenity span{ font-weight:600; font-size:.9rem; color:var(--verde); }
@media (max-width:760px){ .amenities-grid{ grid-template-columns:repeat(2,1fr); } }

/* ============================================================
   Lote ideal
   ============================================================ */
.ideal-lot{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:2.4em;
  align-items:center;
  background:var(--beige);
  border-radius:var(--radius-lg);
  padding:clamp(28px,4vw,48px);
}
.ideal-lot__list{ display:flex; flex-direction:column; gap:1em; }
.ideal-lot__list li{
  display:flex;
  align-items:center;
  gap:.7em;
  font-weight:700;
  color:var(--verde);
  background:var(--blanco);
  padding:.9em 1.2em;
  border-radius:var(--radius);
}
.ideal-lot__list i{ color:var(--dorado); }
@media (max-width:760px){ .ideal-lot{ grid-template-columns:1fr; } }

/* ============================================================
   Galería + Lightbox
   ============================================================ */
.gallery{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1em;
  margin-top:2.2em;
}
.gallery__item{
  border:none;
  padding:0;
  background:none;
  cursor:pointer;
  border-radius:var(--radius);
  overflow:hidden;
  aspect-ratio:4/3;
}
.gallery__item img{ width:100%; height:100%; object-fit:cover; transition:transform .4s var(--ease); }
.gallery__item:hover img{ transform:scale(1.06); }
@media (max-width:760px){ .gallery{ grid-template-columns:repeat(2,1fr); } }

.lightbox{
  position:fixed; inset:0;
  background:rgba(18,59,42,.94);
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:5vw;
}
.lightbox[hidden]{ display:none; }
.lightbox img{ max-width:100%; max-height:88vh; border-radius:var(--radius); }
.lightbox__close{
  position:absolute;
  top:24px; right:28px;
  background:none;
  border:none;
  color:var(--beige);
  font-size:2.4rem;
  line-height:1;
  cursor:pointer;
}

/* ============================================================
   Documentación
   ============================================================ */
.docs{ background:var(--beige); border-radius:var(--radius-lg); padding:clamp(28px,4vw,48px); }
.docs__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.4em;
  margin:1.6em 0;
}
.docs__item{
  background:var(--blanco);
  border-radius:var(--radius);
  padding:1.6em;
}
.docs__item i{ font-size:1.6rem; color:var(--dorado); margin-bottom:.4em; }
.docs__item p{ color:var(--texto-suave); font-size:.9rem; margin:0; }
@media (max-width:640px){ .docs__grid{ grid-template-columns:1fr; } }

/* ============================================================
   Asesor
   ============================================================ */
.advisor{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:2.8em;
  align-items:center;
  background:var(--blanco);
  border-radius:var(--radius-lg);
  padding:clamp(28px,4.5vw,48px);
  box-shadow:var(--shadow);
}
.advisor__photo{
  width:260px; height:260px;
  border-radius:50%;
  background:var(--verde);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--dorado);
  font-size:5rem;
  flex-shrink:0;
  overflow:hidden;
  border:6px solid var(--blanco);
  box-shadow:0 10px 32px rgba(18,59,42,.22);
}
/* La foto original tiene bastante espacio en blanco alrededor de Willy.
   Se usa transform:scale() (no width%) porque el reset global "img{max-width:100%}"
   recorta de forma asimétrica cualquier ancho/alto expresado en %.
   transform actúa en la fase de pintado, fuera del alcance de max-width,
   por lo que escala ambos ejes de forma perfectamente uniforme (sin deformar).
   scale(1.18) + translate centrado sobre el punto real de Willy (56.1%, 55.1%)
   lo lleva a ~78-80% del círculo. */
.advisor__photo-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform: translate(-7.2%, -6%) scale(1.18);
  transform-origin:center center;
}
.advisor__photo-fallback{ display:none; }
.advisor__photo--fallback .advisor__photo-fallback{ display:block; }
.advisor__role{ color:var(--verde-2); font-weight:700; }
.advisor__info p{ margin:0 0 .5em; }
/* Botón WhatsApp más grande y centrado bajo el bloque de información */
.advisor__info .btn--whatsapp{
  display:flex;
  width:320px;
  padding:1.02em 2.3em;
  font-size:1.02rem;
  line-height:1.2;
  border-radius:14px;
  margin:1.2em auto 0;
}
@media (max-width:1024px){
  .advisor__photo{ width:210px; height:210px; font-size:4.2rem; }
}
@media (max-width:640px){
  .advisor{ grid-template-columns:1fr; text-align:center; }
  .advisor__photo{ margin:0 auto; width:165px; height:165px; font-size:3.2rem; border-width:5px; }
  .advisor__info .btn--whatsapp{
    width:90%;
    max-width:340px;
    min-width:0;
    margin-left:auto;
    margin-right:auto;
  }
}

/* ============================================================
   Testimonios
   ============================================================ */
.testimonials__grid{
  display:grid;
  grid-template-columns:minmax(260px,360px) 1fr;
  gap:1.6em;
  align-items:start;
  margin-top:2.4em;
}
.testimonials__side{
  display:flex;
  flex-direction:column;
  gap:1.2em;
}
.testimonial-card{
  background:var(--blanco);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  overflow:hidden;
  position:relative;
}
.testimonial-card--main{
  border:2px solid var(--dorado);
}
.testimonial-card__badge{
  position:absolute;
  top:14px; left:14px;
  z-index:2;
  background:var(--verde);
  color:var(--dorado);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:.45em .9em;
  border-radius:999px;
}
.testimonial-card__media{
  width:100%;
  background:#0d1b14;
  display:flex;
  align-items:center;
  justify-content:center;
}
.testimonial-card__media--vertical{ aspect-ratio:9/16; }
.testimonial-card__media--wide{ aspect-ratio:16/9; }
.testimonial-card__media video{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.testimonials__cta{
  text-align:center;
  margin-top:2.6em;
}
.testimonials__cta p{
  font-family:var(--font-title);
  font-weight:700;
  font-size:1.2rem;
  color:var(--verde);
  margin:0 0 .8em;
}
@media (max-width:860px){
  .testimonials__grid{ grid-template-columns:1fr; }
  .testimonial-card--main .testimonial-card__media--vertical{ max-width:420px; margin:0 auto; }
}

/* ============================================================
   FAQ / Accordion
   ============================================================ */
.accordion{ margin-top:2.2em; display:flex; flex-direction:column; gap:.8em; }
.accordion__item{
  border:1.5px solid #e7dfcb;
  border-radius:var(--radius);
  overflow:hidden;
}
.accordion__trigger{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1em;
  background:var(--blanco);
  border:none;
  padding:1.1em 1.4em;
  font-family:var(--font-body);
  font-weight:700;
  font-size:.98rem;
  color:var(--verde);
  cursor:pointer;
  text-align:left;
}
.accordion__trigger i{ color:var(--dorado); transition:transform .3s var(--ease); flex-shrink:0; }
.accordion__trigger[aria-expanded="true"] i{ transform:rotate(180deg); }
.accordion__panel{
  max-height:0;
  overflow:hidden;
  background:var(--beige);
  transition:max-height .3s var(--ease);
}
.accordion__panel p{ margin:0; padding:1.1em 1.4em; color:var(--texto-suave); }

/* ============================================================
   CTA final
   ============================================================ */
.cta-final{ background:var(--verde); }
.cta-final__inner{ text-align:center; max-width:720px; }
.cta-final h2{ color:var(--beige); }
.cta-final p{ color:rgba(244,239,230,.8); }
.cta-final__actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:1em; margin-top:1em; }

/* ============================================================
   Footer
   ============================================================ */
.footer{ background:#0d2b1d; color:rgba(244,239,230,.85); padding:56px 0 0; }
.footer__grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:2em;
  padding-bottom:36px;
  border-bottom:1px solid rgba(244,239,230,.12);
}
.brand--footer{ margin-bottom:.6em; }
.brand--footer img{ width:30px; height:30px; }
.footer h4{ color:var(--dorado); font-family:var(--font-body); font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:.7em; }
.footer p{ margin:0 0 .4em; font-size:.9rem; }
.footer__bottom{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:.5em;
  padding:22px 0;
  font-size:.78rem;
}
.footer__bottom .muted{ color:rgba(244,239,230,.55); }
@media (max-width:760px){ .footer__grid{ grid-template-columns:1fr; } }

/* ============================================================
   WhatsApp flotante
   ============================================================ */
.wa-float{
  position:fixed;
  right:22px;
  bottom:22px;
  width:58px; height:58px;
  border-radius:50%;
  background:var(--whatsapp);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.7rem;
  box-shadow:0 10px 26px rgba(0,0,0,.25);
  z-index:90;
  transition:transform .2s var(--ease), background .2s var(--ease);
}
.wa-float:hover{ transform:scale(1.08); background:var(--whatsapp-d); }