/* ============================================================
   LA GRAN MANSIÓN — Design System / Estilos globales
   Luxury · Editorial · Alto CRO
   ============================================================ */

:root{
  /* Paleta (basada en identidad de marca: negro + dorado + marfil) */
  --black:        #0b0a08;
  --black-soft:   #131210;
  --charcoal:     #1c1a17;
  --charcoal-2:   #262320;
  --gold:         #b08d2f;
  --gold-light:   #e6d3ab;
  --gold-dark:    #8a6e24;
  --cream:        #f7f2e8;
  --white:        #ffffff;
  --ink:          #171512;
  --ink-soft:     rgba(23,21,18,.68);
  --line:         rgba(176,141,47,.25);
  --line-soft:    rgba(255,255,255,.12);

  --font-display: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --font-body:    "Jost", "Montserrat", -apple-system, BlinkMacSystemFont, sans-serif;

  --container: 1240px;
  --radius: 2px;
  --ease: cubic-bezier(.22,.61,.36,1);

  --shadow-lg: 0 30px 80px -20px rgba(0,0,0,.55);
  --shadow-md: 0 14px 40px -12px rgba(0,0,0,.4);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--cream);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}
/* Grano fotográfico sutil — rompe la planitud digital, sensación de papel/film */
body::after{
  content:"";position:fixed;inset:0;z-index:400;pointer-events:none;
  opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input,select,textarea{font-family:inherit;font-size:16px}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.1;letter-spacing:.01em}
.container{max-width:var(--container);margin:0 auto;padding:0 24px}
@media(min-width:900px){.container{padding:0 48px}}

/* ---------- Utilities ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold-dark);font-weight:500;margin-bottom:18px;
}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--gold)}
.eyebrow.on-dark{color:var(--gold-light)}

.section{padding:110px 0}
@media(max-width:768px){.section{padding:72px 0}}
.section-head{max-width:680px;margin-bottom:56px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
h2.h-lg{font-size:clamp(34px,4.4vw,58px);color:var(--ink)}
h2.h-lg.on-dark{color:var(--white)}
p.lead{font-size:clamp(16px,1.6vw,19px);color:var(--ink-soft);margin-top:18px;font-weight:300}
p.lead.on-dark{color:rgba(255,255,255,.7)}

.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 30px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:500;transition:color .45s var(--ease),border-color .45s var(--ease);
  text-align:center;max-width:100%;overflow:hidden;isolation:isolate;
}
@media(min-width:560px){.btn{padding:16px 34px;font-size:12.5px;letter-spacing:.15em}}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease);
}
.btn:hover::before{transform:scaleX(1)}

.btn-gold{background:var(--gold);color:var(--black);border:1px solid var(--gold)}
.btn-gold::before{background:var(--ink)}
.btn-gold:hover{color:var(--white)}

.btn-outline{border:1px solid rgba(255,255,255,.4);color:var(--white)}
.btn-outline::before{background:var(--white)}
.btn-outline:hover{color:var(--black)}

.btn-outline-dark{border:1px solid rgba(23,21,18,.35);color:var(--ink)}
.btn-outline-dark::before{background:var(--ink)}
.btn-outline-dark:hover{color:var(--white)}

.btn-block{width:100%}
.btn svg{width:15px;height:15px;flex:none;position:relative;z-index:1}
.btn > span{position:relative;z-index:1}

/* CTA tipo enlace editorial — para acciones secundarias, sin caja */
.btn-text{
  display:inline-flex;align-items:center;gap:12px;font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;padding-bottom:3px;position:relative;font-weight:500;
}
.btn-text::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;opacity:.35}
.btn-text svg{width:15px;height:15px;transition:transform .4s var(--ease)}
.btn-text:hover svg{transform:translateX(6px)}

.divider-gold{width:64px;height:1px;background:var(--gold);margin:0 auto}

/* reveal-on-scroll */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.is-visible{opacity:1;transform:translateY(0)}
.reveal-d1{transition-delay:.08s}
.reveal-d2{transition-delay:.18s}
.reveal-d3{transition-delay:.28s}
.reveal-d4{transition-delay:.38s}

/* ============================================================
   HEADER
   ============================================================ */
.header{
  position:fixed;top:0;left:0;right:0;z-index:200;
  padding:26px 0;transition:all .4s var(--ease);
}
.header .container{display:flex;align-items:center;justify-content:space-between;gap:20px}
.header::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(0,0,0,.55),transparent);
  opacity:1;transition:opacity .4s var(--ease);z-index:-1;
}
.header.scrolled{padding:14px 0;background:rgba(11,10,8,.92);backdrop-filter:blur(10px);box-shadow:0 10px 30px -15px rgba(0,0,0,.6)}
.header.scrolled::before{opacity:0}

.logo{display:flex;align-items:center;gap:12px;color:var(--white)}
.logo-mark{
  width:44px;height:38px;display:flex;align-items:center;justify-content:center;flex:none;
}
.logo-mark img{width:100%;height:100%;object-fit:contain;display:block}
.logo-text{display:flex;flex-direction:column;line-height:1.15}
.logo-text b{font-family:var(--font-display);font-size:18px;letter-spacing:.06em;text-transform:uppercase}
.logo-text span{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-light);margin-top:3px}

.nav-desktop{display:none}
@media(min-width:1000px){
  .nav-desktop{display:flex;align-items:center;gap:22px;flex:none;white-space:nowrap}
  .nav-desktop a{
    font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.88);
    position:relative;padding:6px 0;font-weight:500;
  }
  .nav-desktop a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--gold);transition:width .3s var(--ease)}
  .nav-desktop a:hover::after,.nav-desktop a.active::after{width:100%}
  .nav-desktop a:hover{color:var(--gold-light)}
}
@media(min-width:1220px){
  .nav-desktop{gap:34px}
  .nav-desktop a{font-size:12.5px;letter-spacing:.14em}
}
.header-actions{display:flex;align-items:center;gap:14px;flex:none}
.header-actions .btn{display:none}
@media(min-width:1000px){.header-actions .btn{display:inline-flex;padding:12px 20px;font-size:11px;letter-spacing:.1em;white-space:nowrap}}
@media(min-width:1220px){.header-actions .btn{padding:13px 26px;font-size:13px;letter-spacing:.16em}}

.burger{
  width:42px;height:42px;display:flex;align-items:center;justify-content:center;
  color:var(--white);flex:none;
}
@media(min-width:1000px){.burger{display:none}}
.burger span{display:block;width:22px;height:1px;background:currentColor;position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:100%;height:1px;background:currentColor;transition:transform .3s}
.burger span::before{top:-7px}
.burger span::after{top:7px}

/* Mobile menu */
.mobile-nav{
  position:fixed;inset:0;height:100vh;height:100dvh;background:var(--black);z-index:300;
  display:flex;flex-direction:column;padding:30px 28px;overflow-y:auto;
  transform:translateY(-100%);transition:transform .5s var(--ease);
  pointer-events:none;
}
/* BUG REAL (encontrado v44, ampliado v46, y de nuevo v54): el panel se
   posiciona con position:fixed;inset:0 y translateY(-100%) lo mueve hacia
   arriba exactamente su propio alto. v44 arregló que ese borde fantasma no
   fuera clicable (pointer-events:none); v46 arregló el caso de iOS Safari
   (un `height` implícito se mide contra el viewport "grande" sin la barra
   de direcciones, mayor al área real visible — `height:100dvh` lo ata al
   alto real). **v54: encontrado un TERCER caso, esta vez en Chrome de
   escritorio con la ventana NO maximizada** (alturas de ventana comunes en
   laptop, ej. 720-768px de alto) — ahí el contenido del panel (6 links +
   footer con botón y redes) mide más alto que el alto real de la ventana,
   y como el panel no tenía `overflow` declarado, ese contenido que sobra
   se desborda por FUERA de la caja en vez de recortarse dentro de ella —
   así que el `translateY(-100%)`, que se calcula sobre el alto de la CAJA
   (no sobre el alto real del contenido desbordado), ya no alcanza a sacar
   todo el contenido de la pantalla: el pie del menú (el botón dorado
   "Agenda tu visita") queda asomado como una franja dorada pegada arriba
   del header, en CUALQUIER navegador, no solo iOS Safari. Fix: `overflow-y:
   auto` en `.mobile-nav` — así la caja SIEMPRE respeta su propio alto (nunca
   se desborda hacia afuera, cerrada o abierta) y, de paso, si el menú se
   abre en una pantalla muy baja donde el contenido no cabe, queda
   scrolleable dentro del propio panel en vez de cortado. Cualquier futuro
   overlay de pantalla completa que se oculte con `transform` debe llevar
   los TRES tratamientos: `pointer-events` según su estado, altura explícita
   en `dvh`, y `overflow-y:auto` — nunca asumir que el contenido siempre
   cabrá dentro del alto declarado. */
.mobile-nav.open{transform:translateY(0);pointer-events:auto}
.mobile-nav-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:60px}
.mobile-nav-close{width:42px;height:42px;color:var(--white);display:flex;align-items:center;justify-content:center}
.mobile-nav a{
  font-family:var(--font-display);font-size:30px;color:var(--white);
  padding:16px 0;border-bottom:1px solid var(--line-soft);display:block;
}
.mobile-nav-foot{margin-top:auto;padding-top:30px;display:flex;flex-direction:column;gap:16px}
.mobile-nav-foot .btn{width:100%;font-size:12px;letter-spacing:.08em;padding:16px 14px;white-space:normal;text-align:center}
.mobile-nav-social{display:flex;gap:18px;color:var(--gold-light)}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:flex-end;
  color:var(--white);overflow:hidden;background:var(--black);
}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center}

/* Video de fondo: un <video> para desktop/tablet y otro para mobile (video vertical
   dedicado), mostrados por CSS según el ancho — mismo patrón que .page-hero-bg. */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0}
.hero-video--mobile{display:none}
@media(max-width:760px){
  .hero-video--desktop{display:none}
  .hero-video--mobile{display:block}
}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to top,rgba(6,5,4,.95) 0%,rgba(6,5,4,.55) 42%,rgba(6,5,4,.25) 68%,rgba(6,5,4,.55) 100%),
    linear-gradient(to right,rgba(6,5,4,.5),transparent 55%);
}
.hero-bg-fallback{
  position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(circle at 20% 15%,rgba(176,141,47,.22),transparent 45%),
    radial-gradient(circle at 85% 80%,rgba(176,141,47,.16),transparent 50%),
    linear-gradient(155deg,#141210,#0b0a08 60%);
}
.hero-content{position:relative;z-index:2;width:100%;padding-bottom:90px;padding-top:170px}

.hero-kicker{
  display:flex;align-items:center;gap:14px;margin-bottom:30px;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.66);
}
.hero-kicker::before{content:"";width:34px;height:1px;background:var(--gold)}
.hero h1{
  font-family:'Montserrat',var(--font-body),sans-serif;
  font-weight:800;text-transform:uppercase;letter-spacing:-.01em;
  font-size:clamp(29px,4.6vw,60px);line-height:1.1;max-width:15ch;color:var(--white);
}
.hero h1 em{font-style:italic;color:var(--gold-light);font-weight:800}
.hero-sub{max-width:480px;font-size:clamp(15px,1.6vw,18px);color:rgba(255,255,255,.75);margin-top:26px;font-weight:300;border-left:1px solid var(--line);padding-left:20px}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:34px;margin-top:44px}

/* Mobile: el video vertical trae un espacio oscuro pensado para el texto arriba
   (el sujeto queda libre abajo). Mismo tamaño de letra que siempre (no se toca) —
   lo que se ensancha es el bloque de texto a todo el ancho disponible, para que
   quepan más palabras por línea y el bloque sea más corto y suba solo. Desktop
   no se toca. */
@media(max-width:760px){
  .hero{align-items:flex-start}
  .hero-content{padding-top:100px;padding-bottom:0}
  .hero h1{max-width:100%;font-weight:900;-webkit-text-stroke:.6px currentColor;text-shadow:0 0 1px currentColor} /* 900 ya es el peso máximo de Montserrat — este truco engruesa el trazo un poco más */
  .hero-sub{max-width:100%;font-size:13px}
  .hero-cta{margin-top:32px}
  .hero-cta .btn-text{display:none} /* "Escríbenos por WhatsApp": se quita solo en mobile, el botón dorado queda solo */
}

.scroll-cue{
  position:absolute;right:28px;bottom:36px;z-index:2;color:rgba(255,255,255,.55);
  display:none;align-items:center;gap:10px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  writing-mode:vertical-rl;
}
@media(min-width:900px){.scroll-cue{display:flex}}
.scroll-cue::after{content:"";width:1px;height:46px;background:linear-gradient(var(--gold),transparent)}

/* ============================================================
   MARQUESINA — cinta continua entre Hero y Nosotros
   ============================================================ */
.marquee{background:var(--ink);color:var(--gold-light);overflow:hidden;padding:18px 0;position:relative;border-bottom:1px solid rgba(176,141,47,.2)}
.marquee-track{display:flex;width:max-content;animation:marquee 32s linear infinite}
.marquee-track span{
  display:flex;align-items:center;gap:20px;padding:0 20px;
  font-family:'Montserrat',var(--font-body),sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;font-size:14px;white-space:nowrap;color:var(--cream);
}
.marquee-track span::after{content:"—";color:var(--gold);font-weight:400;opacity:.6;text-transform:none}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none}}

/* ============================================================
   INTRO / ABOUT STRIP
   ============================================================ */
.about{background:var(--cream);position:relative}
.about-grid{display:grid;grid-template-columns:1fr;gap:56px;align-items:start}
@media(min-width:960px){.about-grid{grid-template-columns:.85fr 1.15fr;gap:64px;align-items:stretch}}
.about-media{position:relative;min-width:0;display:flex;gap:18px}
.about-media .frame{
  position:relative;aspect-ratio:4/5;overflow:hidden;flex:1;
  background:linear-gradient(155deg,var(--charcoal),var(--black));box-shadow:var(--shadow-lg);
}
/* En desktop la foto estira su alto para igualar la columna de texto (que ahora incluye los beneficios) */
@media(min-width:960px){.about-media .frame{aspect-ratio:auto}}
.about-media .frame img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;filter:saturate(.92)}
/* Etiqueta vertical rotada — sustituye el badge tipo "tarjeta SaaS" */
.about-vlabel{
  writing-mode:vertical-rl;transform:rotate(180deg);flex:none;
  display:flex;align-items:center;justify-content:center;gap:14px;
  font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-dark);
  padding:10px 2px;
}
.about-vlabel::after{content:"";width:1px;height:44px;background:var(--gold)}
.about-vlabel::before{content:"";width:1px;height:44px;background:var(--gold)}

.about-body{min-width:0}
.about-body h2.about-title{
  font-family:'Montserrat',var(--font-body),sans-serif;font-weight:800;
  text-transform:uppercase;letter-spacing:-.01em;line-height:1.2;
  font-size:clamp(30px,3.8vw,48px);color:var(--gold-dark);
}
.about-body p.lead{margin-top:20px;margin-bottom:34px}
.about-body p.lead::first-letter{
  font-family:var(--font-display);font-style:italic;font-size:3.6em;float:left;line-height:.78;
  padding:.06em .08em 0 0;color:var(--gold-dark);font-weight:500;
}

/* Beneficios — fila de círculos dentro de la columna de texto (no a todo el ancho),
   justo debajo del botón, aprovechando el espacio vertical que sobra junto a la foto */
.about-benefits-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:28px 16px;
  margin-top:44px;padding-top:34px;border-top:1px solid var(--line);
}
@media(min-width:480px){.about-benefits-grid{grid-template-columns:repeat(4,1fr);gap:14px}}
.benefit-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px}
.benefit-circle{
  width:76px;height:76px;border-radius:50%;overflow:hidden;flex:none;position:relative;
  border:1px solid var(--line);box-shadow:0 10px 26px -14px rgba(0,0,0,.35);
}
@media(min-width:480px){.benefit-circle{width:84px;height:84px}}
.benefit-circle img{width:100%;height:100%;object-fit:cover;display:block}
.benefit-item span{font-size:11.5px;letter-spacing:.01em;color:var(--ink-soft);line-height:1.35;max-width:12ch}

/* ============================================================
   SERVICIOS — 3 tarjetas visuales (Montserrat, muy gráfico)
   ============================================================ */
.showcase{background:var(--black);color:var(--white);position:relative;overflow:hidden}

.showcase .section-head.center{max-width:720px}
.showcase-title{
  font-family:'Montserrat',var(--font-body),sans-serif;font-weight:800;
  text-transform:uppercase;letter-spacing:.005em;
  font-size:clamp(32px,4.8vw,56px);
}

.showcase-cards{display:grid;grid-template-columns:1fr;gap:22px}
@media(min-width:700px){.showcase-cards{grid-template-columns:repeat(2,1fr);gap:24px}}
@media(min-width:1000px){.showcase-cards{grid-template-columns:repeat(3,1fr);gap:28px}}

.showcase-card{
  position:relative;display:block;aspect-ratio:3/4;overflow:hidden;
  border-radius:3px;box-shadow:0 30px 60px -28px rgba(0,0,0,.65);
}
@media(max-width:699px){.showcase-card{aspect-ratio:4/5}}

.showcase-card-img{position:absolute;inset:0;z-index:0;overflow:hidden}
.showcase-card-img img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.1s var(--ease);transform:scale(1.02);
}
.showcase-card:hover .showcase-card-img img{transform:scale(1.12)}

.showcase-card::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,10,8,0) 28%,rgba(11,10,8,.5) 60%,rgba(11,10,8,.94) 100%);
  transition:background .4s var(--ease);
}
.showcase-card:hover::before{background:linear-gradient(180deg,rgba(11,10,8,.08) 0%,rgba(11,10,8,.58) 42%,rgba(11,10,8,.96) 100%)}
.showcase-card::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(176,141,47,.28)}

.showcase-card-body{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:26px 24px 28px}
.showcase-card-index{
  display:block;font-size:12px;letter-spacing:.14em;color:var(--gold-light);
  font-variant-numeric:tabular-nums;margin-bottom:8px;
}
.showcase-card-title{
  font-family:'Montserrat',var(--font-body),sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.005em;color:var(--white);
  font-size:clamp(19px,2vw,24px);line-height:1.15;margin-bottom:10px;
}
.showcase-card-desc{
  font-size:13.5px;font-weight:300;color:rgba(255,255,255,.72);line-height:1.5;
  max-width:34ch;max-height:0;opacity:0;overflow:hidden;
  transition:max-height .5s var(--ease),opacity .4s var(--ease),margin .5s var(--ease);
}
@media(hover:hover){.showcase-card:hover .showcase-card-desc{max-height:80px;opacity:1;margin-bottom:14px}}
@media(hover:none){.showcase-card-desc{max-height:80px;opacity:1;margin-bottom:14px}}

.showcase-card-price{
  display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-light);margin-bottom:12px;
}
.showcase-card-price b{font-family:var(--font-display);font-style:italic;font-size:17.5px;font-weight:600;text-transform:none;color:var(--white);margin-left:6px}

.showcase-card-cta{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);
  opacity:0;transform:translateY(6px);transition:all .4s var(--ease);
}
.showcase-card-cta svg{width:15px;height:15px}
@media(hover:hover){.showcase-card:hover .showcase-card-cta{opacity:1;transform:translateY(0)}}
@media(hover:none){.showcase-card-cta{opacity:1;transform:none}}

/* ============================================================
   PILARES / EXPERIENCIA INTEGRAL — grid visual de tarjetas con foto
   ============================================================ */
.pillars{background:var(--cream)}

h2.h-lg.pillars-title{
  font-family:'Montserrat',var(--font-body),sans-serif;font-weight:800;
  text-transform:uppercase;letter-spacing:.005em;color:var(--gold-dark);
  font-size:clamp(30px,3.8vw,48px);
}
.pillars .section-head.center{max-width:880px}

/* Carrusel: en vez de una grilla de 2 filas, las 6 tarjetas viven en una
   sola fila que se desliza — 3 visibles en desktop, 2 en tablet, 1 en
   mobile. Se navega con las flechas/puntos o arrastrando (scroll-snap
   nativo, funciona con touch/trackpad sin JS adicional). */
.pillars-carousel{margin-top:56px}
.pillars-track{
  display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;-webkit-overflow-scrolling:touch;
  padding:14px 2px 30px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.pillars-track::-webkit-scrollbar{display:none}
.pillar-card{scroll-snap-align:start;flex:0 0 100%;min-width:0}
@media(min-width:640px){.pillars-track{gap:26px}.pillar-card{flex:0 0 calc((100% - 26px)/2)}}
@media(min-width:980px){.pillars-track{gap:30px}.pillar-card{flex:0 0 calc((100% - 60px)/3)}}

.pillars-nav{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:6px}
.pillars-arrow{
  width:48px;height:48px;border-radius:50%;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--ink);
  flex:none;transition:all .35s var(--ease);
}
.pillars-arrow:hover:not(:disabled){background:var(--gold);border-color:var(--gold);color:var(--white)}
.pillars-arrow:disabled{opacity:.3;cursor:default}
.pillars-arrow svg{width:18px;height:18px}
.pillars-dots{display:flex;align-items:center;gap:8px}
.pillars-dot{width:8px;height:8px;border-radius:50%;background:var(--line);transition:all .3s var(--ease);padding:0;flex:none}
.pillars-dot.active{background:var(--gold);width:24px;border-radius:5px}

/* Variante para cuando el carrusel vive sobre fondo oscuro (ej. el
   carrusel de fotos de "Un escenario Luxury..." en nosotros.html, dentro
   de un .stat-section) — .pillars-arrow/.pillars-dot por defecto están
   pensados para fondo claro (--ink/--line); esta variante los recolorea
   igual que el resto de elementos ".on-dark" del sitio. */
.pillars-nav.on-dark .pillars-arrow{border-color:var(--line-soft);color:var(--white)}
.pillars-nav.on-dark .pillars-arrow:hover:not(:disabled){background:var(--gold);border-color:var(--gold);color:var(--black)}
.pillars-nav.on-dark .pillars-dot{background:var(--line-soft)}
.pillars-nav.on-dark .pillars-dot.active{background:var(--gold)}

/* Carrusel de fotos (v48) — misma mecánica del carrusel de Pilares
   (.pillars-nav/.pillars-arrow/.pillars-dots reutilizados tal cual), pero
   con tarjetas que son solo foto (reutiliza .g-item/.g-photo/.g-item-tag
   de la Galería en vez de .pillar-card, que trae ícono+título+texto).
   Usar esta receta para cualquier sección futura que pida "una galería
   deslizable de fotos" en vez de una rejilla fija. */
.photo-carousel{margin-top:8px}
.photo-carousel-track{
  display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;-webkit-overflow-scrolling:touch;
  padding:6px 2px 26px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.photo-carousel-track::-webkit-scrollbar{display:none}
.photo-carousel-card{scroll-snap-align:start;flex:0 0 78%;min-width:0}
.photo-carousel-card .g-photo{aspect-ratio:4/3}
@media(min-width:640px){.photo-carousel-track{gap:22px}.photo-carousel-card{flex:0 0 calc((100% - 22px)/2)}}
@media(min-width:980px){.photo-carousel-track{gap:26px}.photo-carousel-card{flex:0 0 calc((100% - 52px)/3)}}
@media(min-width:1280px){.photo-carousel-card{flex:0 0 calc((100% - 78px)/4)}}

.pillar-card{
  position:relative;background:var(--white);border-radius:4px;overflow:hidden;
  box-shadow:0 22px 46px -30px rgba(23,21,18,.3);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.pillar-card:hover{transform:translateY(-8px);box-shadow:0 42px 64px -30px rgba(23,21,18,.4)}

/* .pillar-card-media ya NO recorta contenido (overflow visible): así el
   badge circular puede sobresalir de la foto sin que se corte. Solo la
   foto en sí (.pillar-card-photo) recorta, para el zoom en hover. */
.pillar-card-media{position:relative}
.pillar-card-photo{position:relative;display:block;aspect-ratio:4/3;overflow:hidden}
.pillar-card-photo img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.1s var(--ease);transform:scale(1.03);
}
.pillar-card:hover .pillar-card-photo img{transform:scale(1.1)}

.pillar-card-num{
  position:absolute;top:16px;right:18px;z-index:2;pointer-events:none;
  font-family:var(--font-display);font-style:italic;font-weight:600;font-size:15px;
  color:var(--white);letter-spacing:.02em;text-shadow:0 2px 10px rgba(0,0,0,.55);
}

.pillar-card-badge{
  position:absolute;left:26px;bottom:-27px;z-index:3;width:54px;height:54px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(155deg,var(--gold-light),var(--gold));
  border:4px solid var(--white);box-shadow:0 14px 28px -12px rgba(176,141,47,.6);
}
.pillar-card-badge svg{width:22px;height:22px;color:var(--black)}

.pillar-card-body{padding:44px 26px 30px}
.pillar-card-title{
  font-family:'Montserrat',var(--font-body),sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.01em;font-size:15.5px;color:var(--ink);margin-bottom:12px;line-height:1.3;
}
.pillar-card-desc{font-size:14px;color:var(--ink-soft);font-weight:300;line-height:1.6}

/* ============================================================
   GALERÍA
   ============================================================ */
.gallery{background:var(--black);color:var(--white)}
.gallery .section-head.center{max-width:640px}
h2.h-lg.on-dark.gallery-title{
  font-family:'Montserrat',var(--font-body),sans-serif;font-weight:800;
  text-transform:uppercase;letter-spacing:.005em;
  font-size:clamp(30px,3.8vw,48px);
}

/* Rejilla pareja: todas las tarjetas de una misma fila miden exactamente
   lo mismo de alto, alineadas en filas prolijas — Bodas ocupa el doble
   de ancho (2 columnas) para llenar la fila superior junto a Quince años
   y Empresariales (2+1+1=4), sin dejar espacio vacío; 4 tarjetas iguales
   abajo. Las fotos se recortan de forma inteligente y centrada
   (object-position:center) para llenar su tarjeta sin dejar franjas ni
   verse desordenadas. */
.gallery-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:14px;
}
/* Tarjeta "Bodas": ocupa el doble de ancho para que la fila superior
   (Bodas + Quince años + Empresariales) llene las 4 columnas exactas,
   sin dejar espacio vacío a la derecha. En mobile (fila propia, sola)
   usa su propia proporción panorámica; en desktop se estira para
   igualar la altura de sus 2 vecinas cuadradas de la misma fila. */
.g-item--wide{grid-column:span 2;aspect-ratio:16/9}
.g-item--wide .g-photo{position:absolute;inset:0;aspect-ratio:unset}

@media(min-width:640px){
  .gallery-grid{grid-template-columns:repeat(4,1fr);gap:18px}
  /* En desktop la tarjeta ancha ya no fija su propia proporción: se
     estira (align-items:stretch, por defecto en grid) para igualar la
     altura de sus 2 vecinas cuadradas en la misma fila — así el borde
     inferior de Bodas, Quince y Empresariales queda perfectamente
     alineado, sin importar la proporción real de la foto de bodas. */
  .g-item--wide{aspect-ratio:unset}
}

.g-item{
  position:relative;border-radius:14px;box-shadow:0 26px 54px -30px rgba(0,0,0,.75);
}

.g-photo{
  display:block;position:relative;overflow:hidden;border-radius:inherit;
  aspect-ratio:1/1;background:var(--black);
}
.g-photo img{
  width:100%;height:100%;object-fit:cover;object-position:center;display:block;
  position:relative;z-index:1;transition:transform .8s var(--ease);transform:scale(1.02);
}
.g-item:hover .g-photo img{transform:scale(1.08)}

.g-item::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;
  background:linear-gradient(to top,rgba(0,0,0,.66),transparent 52%);
  box-shadow:inset 0 0 0 1px rgba(176,141,47,.22);
  opacity:.82;transition:opacity .4s var(--ease);
}
.g-item:hover::after{opacity:1}

.g-item-tag{
  position:absolute;left:14px;bottom:14px;z-index:3;
  display:inline-flex;align-items:center;gap:6px;padding:7px 15px;border-radius:30px;
  background:rgba(11,10,8,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.16);
  font-family:'Montserrat',var(--font-body),sans-serif;font-weight:600;
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--white);
  transition:all .4s var(--ease);
}
.g-item:hover .g-item-tag{background:var(--gold);border-color:var(--gold);color:var(--black)}

/* Línea corta, centrada, debajo de un mosaico de fotos (.gallery-grid
   reutilizado fuera de la Galería, ej. en nosotros.html) — para sumar un
   dato breve sin volver a un grid de íconos. */
.mosaic-note{text-align:center;max-width:620px;margin:28px auto 0;font-size:14px}

/* ============================================================
   UBICACIÓN — cómo llegar (reemplaza a "Diferenciales")
   ============================================================ */
.location{background:var(--ink);color:var(--white);position:relative;overflow:hidden}
.location::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at 85% 0%,rgba(176,141,47,.16),transparent 55%);
  pointer-events:none;
}
.location-grid{
  position:relative;display:grid;grid-template-columns:1fr;gap:40px;align-items:center;
}
@media(min-width:940px){.location-grid{grid-template-columns:.85fr 1.15fr;gap:60px}}

.location-title{
  font-family:'Montserrat',var(--font-body),sans-serif;font-weight:800;
  text-transform:uppercase;letter-spacing:.005em;
  font-size:clamp(28px,3.4vw,42px);margin-bottom:14px;
}
.location-info>.lead{max-width:46ch;margin-bottom:32px}

.location-list{display:flex;flex-direction:column;gap:0;margin-bottom:34px;border-top:1px solid var(--line-soft)}
.location-list li{
  display:flex;align-items:flex-start;gap:16px;padding:18px 0;border-bottom:1px solid var(--line-soft);
}
.location-list svg{width:22px;height:22px;flex:none;color:var(--gold-light);margin-top:2px}
.location-list b{
  display:block;font-family:'Montserrat',var(--font-body),sans-serif;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.45);font-weight:600;margin-bottom:5px;
}
.location-list div{font-size:15px;color:rgba(255,255,255,.88);font-weight:300}

.location-ctas{display:flex;flex-wrap:wrap;gap:14px}

.location-map{
  position:relative;border-radius:16px;overflow:hidden;min-height:340px;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.8);border:1px solid var(--line-soft);
  filter:grayscale(.3) contrast(1.05);
}
@media(min-width:940px){.location-map{min-height:460px}}
.location-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

/* ============================================================
   FAQ — dos columnas: contexto/CTA + acordeón premium en tarjetas
   ============================================================ */
.faq{background:var(--cream)}
.faq-grid{display:grid;grid-template-columns:1fr;gap:48px}
@media(min-width:940px){.faq-grid{grid-template-columns:.75fr 1.25fr;gap:70px}}

.faq-side{position:relative}
@media(min-width:940px){.faq-side{position:sticky;top:110px;align-self:start}}
.faq-title{
  font-family:'Montserrat',var(--font-body),sans-serif;font-weight:800;
  text-transform:uppercase;letter-spacing:.005em;
  font-size:clamp(28px,3.4vw,42px);margin-bottom:14px;
}
.faq-side>.lead{max-width:42ch;margin-bottom:30px}

.faq-highlights{display:flex;flex-direction:column;gap:14px;margin-bottom:36px}
.faq-highlights li{display:flex;align-items:center;gap:12px;font-size:14.5px;color:var(--ink)}
.faq-highlights svg{
  width:22px;height:22px;flex:none;padding:4px;border-radius:50%;
  background:rgba(176,141,47,.12);color:var(--gold-dark);
}

.faq-list{display:flex;flex-direction:column;gap:14px;max-width:none}
.faq-item{
  background:var(--white);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 18px 40px -30px rgba(23,21,18,.35);overflow:hidden;
  border-left:3px solid transparent;transition:border-color .3s var(--ease);
}
.faq-item.open{border-left-color:var(--gold)}
.faq-q{
  width:100%;display:flex;align-items:center;gap:18px;
  padding:24px 22px;text-align:left;
}
.faq-q-num{
  flex:none;font-family:'Montserrat',var(--font-body),sans-serif;font-weight:700;
  font-size:12.5px;letter-spacing:.04em;color:var(--gold-dark);
  opacity:.65;min-width:22px;
}
.faq-q-text{
  flex:1;font-family:'Montserrat',var(--font-body),sans-serif;font-weight:600;
  font-size:15.5px;color:var(--ink);letter-spacing:.005em;line-height:1.4;
}
.faq-q .plus{width:20px;height:20px;flex:none;position:relative}
.faq-q .plus::before,.faq-q .plus::after{content:"";position:absolute;background:var(--gold-dark);left:50%;top:50%;transform:translate(-50%,-50%)}
.faq-q .plus::before{width:14px;height:1px}
.faq-q .plus::after{width:1px;height:14px;transition:transform .3s var(--ease)}
.faq-item.open .plus::after{transform:translate(-50%,-50%) rotate(90deg) scaleY(0)}
.faq-item:hover .faq-q-text{color:var(--gold-dark)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.faq-a p{padding:0 22px 24px 60px;color:var(--ink-soft);font-weight:300;max-width:62ch;font-size:14.5px;line-height:1.6}

/* ============================================================
   CTA BANNER — foto real de ancho completo (una para escritorio,
   otra para móvil — el sitio muestra solo la que corresponde) con
   degradado oscuro y el texto superpuesto, justificado a la izquierda.
   ============================================================ */
.cta-banner{
  position:relative;overflow:hidden;color:var(--white);
  display:flex;align-items:center;
  padding:96px 0;
  /* respaldo elegante mientras no haya fotos reales subidas (mismos tonos que .hero-bg-fallback) */
  background:
    radial-gradient(circle at 20% 30%,rgba(176,141,47,.18),transparent 50%),
    linear-gradient(155deg,var(--charcoal),var(--black));
}
@media(min-width:640px){.cta-banner{padding:130px 0}}

/* foto de fondo: desktop/tablet usa cta-bg--desktop, mobile usa cta-bg--mobile
   (mismo criterio de corte que el video/carrusel del Hero) */
.cta-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0;display:block}
.cta-bg--mobile{display:none}
@media(max-width:760px){
  .cta-bg--desktop{display:none}
  .cta-bg--mobile{display:block}
}

/* degradado para que el texto siempre sea legible sobre la foto:
   fuerte a la izquierda (donde va el texto), se aclara hacia la derecha en desktop;
   en mobile, al no haber "lado limpio", el degradado es más parejo y algo más oscuro. */
.cta-banner::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(11,10,8,.92) 0%,rgba(11,10,8,.8) 32%,rgba(11,10,8,.42) 60%,rgba(11,10,8,.18) 100%);
}
@media(max-width:760px){
  .cta-banner::after{background:linear-gradient(180deg,rgba(11,10,8,.55) 0%,rgba(11,10,8,.72) 45%,rgba(11,10,8,.9) 100%)}
}

/* el texto siempre pegado al borde izquierdo real de la pantalla, nunca centrado
   dentro del .container (que en monitores muy anchos deja un margen grande a
   los lados y hacía que el texto se viera "centrado" sobre la foto). */
.cta-banner .container{
  position:relative;z-index:2;
  max-width:none;margin-left:0;margin-right:0;
  padding-left:24px;padding-right:24px;
}
@media(min-width:640px){.cta-banner .container{padding-left:clamp(24px,6vw,90px);padding-right:24px}}
.cta-content{
  display:flex;flex-direction:column;align-items:flex-start;text-align:left;max-width:560px;
}
.cta-content .eyebrow{justify-content:flex-start}
.cta-title{
  font-family:'Montserrat',var(--font-body),sans-serif;font-weight:800;
  text-transform:uppercase;letter-spacing:.005em;color:var(--white);
  font-size:clamp(28px,3.6vw,40px);line-height:1.15;margin:16px 0 18px;max-width:15ch;
}
.cta-content .lead{max-width:40ch;margin-bottom:34px}

/* Mobile: mismo criterio que el Hero — el texto no debe llenar toda la sección.
   Se ensancha a todo el ancho (menos líneas, mismo tamaño de letra) y sube arriba,
   dejando la parte de abajo de la foto limpia. Aplica a las 5 páginas (comparten
   este mismo CSS). Desktop no se toca. */
@media(max-width:760px){
  .cta-banner{align-items:flex-start} /* sin min-height: el tamaño/recorte de la foto queda igual que siempre, solo cambia dónde se para el texto */
  .cta-content{max-width:100%}
  .cta-title{max-width:100%;font-weight:900;-webkit-text-stroke:.6px currentColor;text-shadow:0 0 1px currentColor} /* mismo truco del título del Hero: 900 es el máximo de Montserrat, el trazo lo engruesa más */
  .cta-content .lead{max-width:100%}
}

/* ============================================================
   FORMULARIO DE CONTACTO
   ============================================================ */
.contact{background:var(--cream);position:relative}
h2.h-lg.contact-title{
  font-family:'Montserrat',var(--font-body),sans-serif;font-weight:800;
  text-transform:uppercase;letter-spacing:.005em;color:var(--gold-dark);
  font-size:clamp(28px,3.4vw,42px);margin:14px 0 0;
}
/* Sin card ni caja oscura envolviendo la sección: dos columnas sueltas
   sobre el mismo fondo crema — izquierda texto/datos, derecha el
   formulario como única "card" (blanca, con borde y sombra) para darle
   jerarquía sin recurrir a un bloque negro. */
.contact-grid{display:grid;gap:48px;align-items:start}
@media(min-width:940px){.contact-grid{grid-template-columns:.85fr 1.15fr;gap:70px}}

.contact-side{position:relative}
.contact-side .lead{max-width:44ch;margin-top:16px;margin-bottom:38px}
.contact-info{position:relative;display:flex;flex-direction:column;gap:0;margin-bottom:40px;border-top:1px solid var(--line)}
.contact-info li{
  display:flex;align-items:flex-start;gap:16px;font-size:15px;color:var(--ink);
  padding:16px 0;border-bottom:1px solid var(--line);
}
.contact-info svg{width:22px;height:22px;flex:none;color:var(--gold-dark);margin-top:2px}
.contact-info li b{
  display:block;font-family:'Montserrat',var(--font-body),sans-serif;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);font-weight:600;margin-bottom:5px;
}
.contact-info li div{font-size:15px;color:var(--ink);font-weight:300}
.contact-info li a{color:var(--gold-dark);font-weight:400;transition:color .25s}
.contact-info li a:hover{color:var(--gold)}
.contact-social{position:relative;display:flex;gap:14px}
.contact-social a{
  width:40px;height:40px;border:1px solid var(--line);border-radius:50%;color:var(--ink-soft);
  display:flex;align-items:center;justify-content:center;transition:.3s;
}
.contact-social a:hover{border-color:var(--gold-dark);color:var(--gold-dark);background:rgba(176,141,47,.08)}
.contact-social svg{width:17px;height:17px}

.contact-form{
  background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow-lg);
  padding:52px 44px;position:relative;
}
.contact-form h3{
  font-family:'Montserrat',var(--font-body),sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.03em;color:var(--gold-dark);
  font-size:17px;margin-bottom:8px;
}
.contact-form>p{color:var(--ink-soft);font-size:14px;margin-bottom:30px;font-weight:300}
.f-row{display:grid;gap:20px;margin-bottom:20px}
@media(min-width:600px){.f-row.two{grid-template-columns:1fr 1fr}.f-row.three{grid-template-columns:1fr 1fr 1fr}}
.f-field label{
  display:block;font-family:'Montserrat',var(--font-body),sans-serif;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--ink-soft);margin-bottom:10px;
}
.f-field input,.f-field select,.f-field textarea{
  width:100%;border:1px solid rgba(23,21,18,.2);background:transparent;padding:14px 4px;
  font-size:15px;color:var(--ink);border-radius:0;border-width:0 0 1px 0;transition:border-color .3s;
}
.f-field input:focus,.f-field select:focus,.f-field textarea:focus{outline:none;border-color:var(--gold-dark)}
.f-field textarea{resize:vertical;min-height:90px}
.f-radio-group{display:flex;flex-wrap:wrap;gap:10px}
.f-radio{position:relative}
.f-radio input{position:absolute;opacity:0;width:100%;height:100%;cursor:pointer;margin:0}
.f-radio span{
  display:inline-flex;align-items:center;padding:12px 20px;border:1px solid rgba(23,21,18,.2);
  font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;
  transition:all .25s var(--ease);
}
.f-radio:hover span{border-color:var(--gold-dark)}
.f-radio input:checked + span{background:var(--ink);border-color:var(--ink);color:var(--white)}
.f-note{font-size:12px;color:var(--ink-soft);margin-top:16px;display:flex;gap:8px;align-items:flex-start}
.f-note svg{width:15px;height:15px;flex:none;margin-top:1px;color:var(--gold-dark)}
.form-success{
  display:none;text-align:center;padding:40px 10px;
}
.form-success.show{display:block}
.form-success svg{width:52px;height:52px;color:var(--gold-dark);margin:0 auto 18px}
.form-success h4{
  font-family:'Montserrat',var(--font-body),sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.03em;color:var(--ink);
  font-size:19px;margin-bottom:10px;
}
.form-success p{color:var(--ink-soft);font-size:14.5px}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--black);color:rgba(255,255,255,.65);padding:80px 0 0}
.footer-grid{display:grid;gap:44px;padding-bottom:60px;border-bottom:1px solid var(--line-soft)}
@media(min-width:860px){.footer-grid{grid-template-columns:1.3fr 1fr 1fr 1fr}}
.footer-brand .logo-text b{color:var(--white)}
.footer-brand p{font-size:13.5px;margin-top:18px;max-width:32ch;font-weight:300}
.footer-social{display:flex;gap:12px;margin-top:26px}
.footer-social a{width:38px;height:38px;border:1px solid var(--line-soft);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:.3s}
.footer-social a:hover{border-color:var(--gold);color:var(--gold-light)}
.footer-social svg{width:16px;height:16px}
.footer h5{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--white);margin-bottom:22px}
.footer ul{display:flex;flex-direction:column;gap:13px}
.footer ul a{font-size:14px;transition:color .25s}
.footer ul a:hover{color:var(--gold-light)}
.footer-bottom{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;padding:26px 0;font-size:12.5px}

/* WhatsApp floating button — solo desktop/tablet (mobile usa la barra fija inferior) */
.wa-float{
  position:fixed;right:22px;bottom:22px;z-index:150;width:60px;height:60px;border-radius:50%;
  background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 14px 30px -8px rgba(0,0,0,.5);
  transition:transform .3s var(--ease);
}
.wa-float:hover{transform:scale(1.08)}
.wa-float svg{width:30px;height:30px;fill:#fff}
.wa-float::before{
  content:"";position:absolute;inset:0;border-radius:50%;background:#25D366;opacity:.55;
  animation:pulse 2.2s infinite;
}
@keyframes pulse{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.9);opacity:0}}
@media(max-width:760px){.wa-float{display:none}}

/* ============================================================
   BARRA DE ACCIÓN FIJA — mobile, alto CRO (llamar / WhatsApp)
   ============================================================ */
.mobile-cta-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:150;display:none;
  border-top:1px solid rgba(176,141,47,.35);
  background:rgba(11,10,8,.94);backdrop-filter:blur(10px);
  transform:translateY(100%);transition:transform .4s var(--ease);
  padding-bottom:env(safe-area-inset-bottom,0);
}
.mobile-cta-bar.show{transform:translateY(0)}
@media(max-width:760px){.mobile-cta-bar{display:flex}body{padding-bottom:60px}}
.mcb-btn{
  flex:1;display:flex;align-items:center;justify-content:center;gap:9px;
  padding:16px 10px;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;
}
.mcb-btn svg{width:17px;height:17px;flex:none}
.mcb-call{color:var(--white);border-right:1px solid rgba(176,141,47,.25)}
.mcb-wa{color:#171512;background:var(--gold-light)}

/* Preloader (simple, no layout shift) */
html.no-js .reveal{opacity:1;transform:none}

/* ============================================================
   PLACEHOLDER DE IMAGEN — marca de agua elegante mientras no
   hay fotos reales subidas (evita cajas vacías/rotas)
   ============================================================ */
.about-media .frame,
.g-photo,
.benefit-circle,
.feature-card-photo,
.reel-thumb{position:relative}
.about-media .frame::before,
.showcase-card-img::before,
.pillar-card-photo::before,
.g-photo::before,
.benefit-circle::before,
.feature-card-photo::before,
.reel-thumb::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(circle at 50% 42%,rgba(176,141,47,.14),transparent 60%),
    linear-gradient(155deg,var(--charcoal),var(--black));
}
.about-media .frame::after,
.showcase-card-img::after,
.pillar-card-photo::after,
.g-photo::after,
.benefit-circle::after,
.feature-card-photo::after,
.reel-thumb::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a24b' stroke-width='0.9'%3E%3Cpath d='M4 21V9l8-5 8 5v12'/%3E%3Cpath d='M9 21v-7h6v7'/%3E%3Cpath d='M4 9l8 5 8-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:15%;opacity:.4;
}
.g-photo::after{background-size:24%}
.showcase-card-img::after{opacity:.28}
.pillar-card-photo::after{background-size:20%}
.benefit-circle::after{background-size:34%}
.feature-card-photo::after{background-size:22%}
.reel-thumb::after{background-size:20%}
/* la img real (o su ausencia) queda siempre por encima del placeholder */
.showcase-card-img img,.pillar-card-photo img,.g-photo img,.benefit-circle img,.feature-card-photo img,.reel-thumb img{position:relative;z-index:1}

/* ============================================================
   PÁGINAS DE EXPERIENCIA (Bodas / Quince Años / Empresariales)
   Componentes reutilizables entre las 3 landing pages.
   ============================================================ */

/* ---- Hero de página interior: foto de fondo + degradado + texto
   superpuesto, mismo patrón que el Hero y el CTA banner del Home,
   pero de un solo bloque (sin video ni carrusel) y algo más bajo
   que el Hero de la Home. Reutiliza .hero-kicker/.hero-sub/.hero-cta
   (ya son selectores genéricos, no van amarrados a .hero). ---- */
.page-hero{
  position:relative;overflow:hidden;color:var(--white);
  display:flex;align-items:flex-end;min-height:82svh;
  background:
    radial-gradient(circle at 20% 15%,rgba(176,141,47,.22),transparent 45%),
    radial-gradient(circle at 85% 80%,rgba(176,141,47,.16),transparent 50%),
    linear-gradient(155deg,#141210,#0b0a08 60%);
}
.page-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0;display:block}
.page-hero-bg--mobile{display:none}
@media(max-width:760px){
  .page-hero-bg--desktop{display:none}
  .page-hero-bg--mobile{display:block}
}
.page-hero::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(6,5,4,.95) 0%,rgba(6,5,4,.55) 42%,rgba(6,5,4,.25) 68%,rgba(6,5,4,.55) 100%);
}
.page-hero .container{position:relative;z-index:2;width:100%;padding-bottom:90px;padding-top:170px}
.page-hero h1{
  font-family:'Montserrat',var(--font-body),sans-serif;
  font-weight:800;text-transform:uppercase;letter-spacing:-.01em;
  font-size:clamp(30px,4.8vw,56px);line-height:1.12;max-width:16ch;color:var(--white);
}
.page-hero h1 em{font-style:italic;color:var(--gold-light);font-weight:800}

/* Mobile: mismo criterio que el Hero del Home — el texto sube arriba y se
   ensancha a todo el ancho (mismo tamaño de letra, menos líneas), para que no
   ocupe toda la foto. Aplica a Nosotros, Bodas, Quinceañeras y Empresariales
   (comparten este componente). Desktop no se toca. */
@media(max-width:760px){
  .page-hero{align-items:flex-start;min-height:0;aspect-ratio:5/8} /* el alto lo da la proporción real de la foto mobile (1000×1600), no el texto ni un % de pantalla */
  .page-hero .container{padding-top:100px;padding-bottom:0}
  .page-hero h1{max-width:100%}
}

/* ---- Tarjetas de característica reutilizables: ícono en círculo +
   título + descripción corta, en grilla responsiva. Se usa tanto
   para "Diseñamos cada detalle" como para "Experiencia gastronómica"
   y "Estilos de decoración" — mismo componente, distinto contenido.
   Variante .on-dark para fondos oscuros (ink/negro). ---- */
.feature-grid{display:grid;grid-template-columns:1fr;gap:36px 28px}
@media(min-width:640px){.feature-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.feature-grid{grid-template-columns:repeat(3,1fr)}}
/* Tarjeta centrada: ícono, título y texto alineados al centro — regla única
   para dondequiera que aparezca este componente (.feature-card), en cualquier
   página o sección, mobile y escritorio por igual. */
.feature-card{position:relative;text-align:center}
/* Ícono "premium": aro dorado con degradado + sombra suave (efecto medalla),
   en vez del círculo plano. Mismo tratamiento en cualquier página/sección
   donde aparezca .feature-icon. */
.feature-icon{
  width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;
  background:radial-gradient(circle at 32% 26%,rgba(230,211,171,.65),rgba(176,141,47,.08) 72%);
  border:1px solid rgba(176,141,47,.45);color:var(--gold-dark);margin:0 auto 20px;
  box-shadow:0 14px 26px -16px rgba(176,141,47,.55),inset 0 1px 1px rgba(255,255,255,.6);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.feature-icon svg{width:22px;height:22px;stroke-width:1.3}
@media(hover:hover){.feature-card:hover .feature-icon{transform:translateY(-4px);box-shadow:0 20px 34px -16px rgba(176,141,47,.65),inset 0 1px 1px rgba(255,255,255,.65)}}
.feature-card h3{
  font-family:'Montserrat',var(--font-body),sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.01em;font-size:15.5px;color:var(--ink);margin-bottom:9px;
}
.feature-card p{font-size:14px;color:var(--ink-soft);font-weight:300;line-height:1.65}
.feature-grid.on-dark .feature-icon{
  background:radial-gradient(circle at 32% 26%,rgba(230,211,171,.3),rgba(176,141,47,.05) 72%);
  border-color:rgba(230,211,171,.4);color:var(--gold-light);
  box-shadow:0 14px 26px -16px rgba(0,0,0,.55),0 0 0 1px rgba(176,141,47,.15),inset 0 1px 1px rgba(255,255,255,.1);
}
@media(hover:hover){.feature-grid.on-dark .feature-card:hover .feature-icon{box-shadow:0 20px 34px -16px rgba(0,0,0,.6),0 0 0 1px rgba(176,141,47,.25),inset 0 1px 1px rgba(255,255,255,.14)}}
.feature-grid.on-dark .feature-card h3{color:var(--white)}
.feature-grid.on-dark .feature-card p{color:rgba(255,255,255,.66)}

/* ---- Foto opcional arriba de una .feature-card (ej. estilos de
   mobiliario en Decoración) — mismo zoom-hover que las tarjetas premium
   de Nuestras experiencias/Pilares. Sumada al sistema de placeholder
   elegante de más abajo. ---- */
.feature-card-photo{position:relative;aspect-ratio:4/3;overflow:hidden;margin-bottom:18px}
.feature-card-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.feature-card:hover .feature-card-photo img{transform:scale(1.06)}

/* ---- Proceso en pasos numerados (planeación → ensayo → ceremonia →
   minuto a minuto). Lista vertical con numeral circular + contenido;
   funciona igual en mobile sin breakpoints extra. ---- */
.process-list{display:flex;flex-direction:column;margin-top:8px}
.process-item{
  display:grid;grid-template-columns:auto 1fr;gap:22px;padding:30px 0;border-top:1px solid var(--line);
}
.process-item:last-child{border-bottom:1px solid var(--line)}
.process-num{
  font-family:'Montserrat',var(--font-body),sans-serif;font-weight:800;font-size:14px;color:var(--gold-dark);
  width:42px;height:42px;border-radius:50%;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;flex:none;
}
.process-body h3{
  font-family:'Montserrat',var(--font-body),sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.01em;font-size:16.5px;color:var(--ink);margin-bottom:8px;
}
.process-body p{font-size:14px;color:var(--ink-soft);font-weight:300;line-height:1.65;max-width:64ch}
.process-tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}
.process-tags span{
  padding:7px 14px;border:1px solid var(--line);font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:500;
}

/* ---- Variante espejo de .about-grid: foto a la derecha en vez de
   izquierda (misma proporción de columnas, solo invertida), para no
   repetir el mismo layout dos veces seguidas en una misma página. ---- */
@media(min-width:960px){
  .about-grid.flip{grid-template-columns:1.15fr .85fr}
  .about-grid.flip .about-media{order:2}
}

/* ---- Bloque de cierre "equipo + precio": fondo oscuro (--ink),
   texto de confianza a un lado y el precio como cifra destacada al
   otro — mismo tratamiento visual que Ubicación/FAQ (fondo oscuro
   entre secciones claras). ---- */
.stat-section{background:var(--ink);color:var(--white);position:relative;overflow:hidden}
/* Foto de fondo opcional (misma receta que .page-hero/.cta-banner): si la
   sección lleva una <img class="stat-bg">, se ve detrás del degradado; si
   falta el archivo, onerror la oculta y queda el fondo --ink de siempre. */
.stat-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0;display:block}
.stat-section::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(155deg,rgba(11,10,8,.88),rgba(11,10,8,.62) 45%,rgba(11,10,8,.92)),
    radial-gradient(ellipse at 15% 100%,rgba(176,141,47,.18),transparent 55%);
}
.stat-section .container{position:relative;z-index:2}
.stat-grid{display:grid;grid-template-columns:1fr;gap:48px;align-items:center}
@media(min-width:760px){.stat-grid{grid-template-columns:1.15fr .85fr;gap:60px}}
.stat-text .lead{max-width:48ch;margin-top:16px}
.stat-price-box{
  text-align:center;padding:40px 30px;border:1px solid var(--line-soft);position:relative;
}
@media(min-width:760px){.stat-price-box{text-align:left;padding:44px 40px}}
.stat-price-box small{
  display:block;font-family:'Montserrat',var(--font-body),sans-serif;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;font-size:10.5px;color:rgba(255,255,255,.5);margin-bottom:16px;
}
.stat-price-box .price{
  font-family:var(--font-display);font-style:italic;font-weight:500;color:var(--gold-light);
  font-size:clamp(38px,5.4vw,58px);line-height:1;
}
.stat-price-box .price span{font-size:.34em;font-style:normal;font-weight:600;color:rgba(255,255,255,.7);letter-spacing:.02em;text-transform:none}
/* Modificador para un precio en rango ("$120.000 – $150.000"), más largo
   que una cifra única — mismo tratamiento, tamaño reducido para que quepa
   cómodo en una sola línea en mobile. Usado en Eventos Empresariales. */
.stat-price-box .price.is-range{font-size:clamp(26px,3.6vw,40px)}
.stat-price-box p{font-size:12.5px;color:rgba(255,255,255,.55);margin-top:16px;font-weight:300;line-height:1.6}

/* ---- Título de impacto reutilizable (Montserrat mayúscula), para
   section-heads de las páginas de experiencia — mismo tratamiento que
   .pillars-title/.contact-title del Home. Combinar SIEMPRE con h2.h-lg
   (ver nota de especificidad CSS más abajo). ---- */
h2.h-lg.impact-title{
  font-family:'Montserrat',var(--font-body),sans-serif;font-weight:800;
  text-transform:uppercase;letter-spacing:.005em;
  font-size:clamp(28px,3.4vw,42px);
}
h2.h-lg.impact-title.impact-title-sm{font-size:clamp(26px,3.2vw,38px)}

/* ============================================================
   REELS — click-to-play con video propio (página Nosotros)
   ------------------------------------------------------------
   Patrón "facade": se muestra solo una miniatura (frame real extraído
   del propio video) + botón de play. El video (self-hosted, sin marco
   ni marca de Instagram) NO se carga en el HTML hasta que el visitante
   hace clic — así la página no descarga nada de video a menos que
   alguien pida verlo.
   El click lo maneja main.js: agrega la clase .is-playing e inserta un
   <video> nativo (controles del navegador, autoplay al click) leyendo
   `data-reel-video` (ruta base en assets/video/, sin extensión — arma
   .webm y .mp4 como <source>) y `data-reel-poster` (miniatura) de la
   tarjeta.
   ============================================================ */
.reel-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media(min-width:640px){.reel-grid{grid-template-columns:repeat(3,1fr);gap:22px}}
@media(min-width:1080px){.reel-grid{grid-template-columns:repeat(4,1fr)}}
.reel-card{
  position:relative;aspect-ratio:9/16;overflow:hidden;cursor:pointer;
  background:var(--charcoal);box-shadow:0 20px 40px -24px rgba(0,0,0,.5);
}
.reel-thumb{position:absolute;inset:0;width:100%;height:100%}
.reel-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.reel-card:hover .reel-thumb img{transform:scale(1.05)}
.reel-card::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,10,8,0) 55%,rgba(11,10,8,.75));
}
.reel-play{
  position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;
}
.reel-play span{
  width:56px;height:56px;border-radius:50%;background:rgba(11,10,8,.55);
  border:1.5px solid rgba(255,255,255,.6);backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center;transition:transform .35s var(--ease),background .35s;
}
.reel-play svg{width:20px;height:20px;fill:var(--white);margin-left:3px}
.reel-card:hover .reel-play span{transform:scale(1.1);background:var(--gold)}
.reel-tag{
  position:absolute;left:14px;bottom:14px;z-index:2;
  font-family:'Montserrat',var(--font-body),sans-serif;font-weight:600;font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--white);
}
/* Estado reproduciendo: se reemplaza el facade por el video propio (self-hosted, sin marca de Instagram) */
.reel-card.is-playing .reel-thumb,
.reel-card.is-playing .reel-play,
.reel-card.is-playing .reel-tag,
.reel-card.is-playing::before{display:none}
.reel-embed{position:absolute;inset:0;z-index:3;background:var(--black)}
.reel-embed video{width:100%;height:100%;object-fit:cover;display:block;background:var(--black)}

/* ============================================================
   LIGHTBOX — ver una foto ampliada al hacer clic (ej. carrusel de Espacios)
   Cualquier elemento con la clase .lightbox-trigger que contenga un <img>
   abre esta capa a pantalla completa con esa misma foto en grande.
   ============================================================ */
.lightbox-trigger{cursor:zoom-in}
.lightbox{
  position:fixed;inset:0;z-index:999;display:none;align-items:center;justify-content:center;
  background:rgba(11,10,8,.94);padding:24px;
}
.lightbox.is-open{display:flex}
.lightbox img{max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.lightbox-close{
  position:absolute;top:20px;right:20px;width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.5);
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .25s;
}
.lightbox-close:hover{background:var(--gold)}
.lightbox-close svg{width:20px;height:20px;stroke:var(--white)}

/* ============================================================
   FEATURE GALLERY — foto grande + miniaturas (Espacios, Nosotros)
   Cambia sola cada 5s o al clic en una miniatura; clic en la foto
   grande abre el lightbox (ver arriba).
   ============================================================ */
.feature-gallery-main{
  position:relative;aspect-ratio:16/9;border-radius:4px;overflow:hidden;
  box-shadow:0 24px 50px -24px rgba(0,0,0,.6);background:var(--charcoal);
}
.feature-gallery-main img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:opacity .5s ease;
}
.feature-gallery-main img.is-fading{opacity:0}
.feature-gallery-thumbs{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px;
}
@media(min-width:640px){.feature-gallery-thumbs{grid-template-columns:repeat(6,1fr)}}
.feature-gallery-thumb{
  position:relative;aspect-ratio:4/3;border-radius:3px;overflow:hidden;cursor:pointer;
  border:2px solid transparent;padding:0;opacity:.55;transition:opacity .3s,border-color .3s;
}
.feature-gallery-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.feature-gallery-thumb:hover{opacity:.85}
.feature-gallery-thumb.is-active{opacity:1;border-color:var(--gold)}

/* Selection */
::selection{background:var(--gold);color:var(--black)}