/* ============================================================
   AYV PROPOSALS — Prototipo de rediseño
   Estilo: romance editorial · cinematográfico · limpio
   ============================================================ */

/* ---------- Variables ----------
   Paleta v3 (S62, feedback de Alan): "demasiado beige" → base casi blanco cálido
   (como el fondo de Claude), vino real y PRESENTE en toda la página (no solo
   botones), dorado y negro como apoyos. Los tonos claros (wine-900/800/700/line)
   ya NO son beige/tan — están tintados de vino muy diluido, así que cualquier
   sección que los use automáticamente deja de leerse "beige".
   Las secciones con FOTO (hero, cards, subhero, CTA final) mantienen texto
   claro fijo (hardcode) porque van sobre overlays oscuros de la imagen,
   independientes del tema general. */
:root{
  /* marca */
  --wine-950:#fbfaf8;          /* fondo principal — casi blanco cálido, NO beige */
  --wine-900:#f7f1f0;          /* fondo alterno — blanco con lavado de vino sutil */
  --wine-800:#ffffff;          /* tarjetas — blanco puro, crujiente contra el fondo */
  --wine-700:#f3e9e8;          /* lavado de vino un poco más presente (franjas/bandas) */
  --wine-600:#7a1830;          /* ACENTO vino real (color de marca, protagonista) */
  --wine-deep:#450d1a;         /* vino profundo (hover/estado activo) */
  --wine-ink:#2b0a12;          /* vino casi negro — para la banda oscura de firma */
  --rose:#7a1830;              /* alias histórico → vino */
  --plum:#450d1a;              /* alias histórico → vino profundo */
  --blush:#e7b8be;             /* blush suave (detalle romántico, sin cambio) */
  --blush-soft:rgba(231,184,190,.28);
  --gold:#ad7f3e;              /* dorado bronce — apoyo, no protagonista */
  --gold-soft:#d2ac6c;
  --cream:#211316;             /* tinta casi negra (texto principal) — apoyo "negro" */
  --cream-dim:#5e4a48;         /* texto secundario */
  --cream-faint:#8a7573;       /* texto terciario / placeholders */
  --line:#ecdfde;              /* borde claro tintado de vino, ya no tan/caqui */
  --photo-ink:#f8f0ea;         /* texto claro fijo sobre fotos con overlay oscuro */
  --photo-ink-dim:rgba(248,240,234,.78);
  --photo-ink-faint:rgba(248,240,234,.55);

  /* tipografía */
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --script:'Great Vibes',cursive;

  --maxw:1240px;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --shadow:0 30px 80px -30px rgba(0,0,0,.7);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  background:var(--wine-950);
  color:var(--cream);
  line-height:1.6;
  overflow-x:hidden;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
ul{list-style:none}
::selection{background:var(--wine-600);color:#fff}

h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.05;letter-spacing:.01em}
.script{font-family:var(--script);font-weight:400}

/* ---------- Utilidades ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px,5vw,48px)}
.eyebrow{
  font-size:.72rem;letter-spacing:.42em;text-transform:uppercase;
  color:var(--wine-600);font-weight:400;display:inline-block;
}
/* sobre foto con overlay oscuro (hero/subhero/final) el dorado contrasta mejor que el vino */
.hero .eyebrow,.subhero .eyebrow,.final .eyebrow{color:var(--gold)}
.section{padding:clamp(72px,11vw,150px) 0;position:relative}
.center{text-align:center}

/* botones */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--sans);font-size:.82rem;font-weight:400;
  letter-spacing:.22em;text-transform:uppercase;
  padding:1.05em 2.1em;border-radius:100px;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),background .4s,color .4s;
  position:relative;overflow:hidden;white-space:nowrap;
}
.btn svg{width:1.1em;height:1.1em;transition:transform .5s var(--ease)}
.btn--solid{background:linear-gradient(120deg,var(--wine-600),var(--wine-deep));color:#fff;box-shadow:0 14px 38px -14px rgba(110,30,46,.55)}
.btn--solid:hover{transform:translateY(-3px);box-shadow:0 22px 50px -14px rgba(110,30,46,.6)}
.btn--solid:hover svg{transform:translateX(4px)}
.btn--gold{background:linear-gradient(120deg,var(--gold),var(--gold-soft));color:#2d181c;box-shadow:0 14px 38px -16px rgba(185,138,94,.55)}
.btn--gold:hover{transform:translateY(-3px)}
.btn--ghost{border:1px solid var(--line);color:var(--cream);background:rgba(110,30,46,.03);backdrop-filter:blur(6px)}
.btn--ghost:hover{border-color:var(--wine-600);color:var(--wine-600);transform:translateY(-3px)}
/* variante para botones ghost sobre foto (hero/subhero con overlay oscuro) */
.hero .btn--ghost,.subhero .btn--ghost{color:var(--photo-ink);border-color:rgba(248,240,234,.4);background:rgba(255,255,255,.06)}
.hero .btn--ghost:hover,.subhero .btn--ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn--wa{background:#1faf57;color:#fff;box-shadow:0 14px 38px -16px #1faf57}
.btn--wa:hover{transform:translateY(-3px);background:#25c264}

/* títulos de sección */
.sec-head{max-width:760px;margin-inline:auto;margin-bottom:clamp(40px,6vw,72px)}
.sec-head h2{
  font-size:clamp(2.4rem,6vw,4.5rem);margin:.18em 0 .35em;
  letter-spacing:.005em;
}
.sec-head p{color:var(--cream-dim);font-size:1.05rem;max-width:54ch;margin-inline:auto}
.flourish{color:var(--wine-600);font-size:1.6rem;line-height:1;opacity:.85}

/* ---------- Reveal (animación al hacer scroll) ----------
   A PRUEBA DE BLANCOS (S92): en reposo SIEMPRE visible. La animación de
   entrada solo se AÑADE si el IntersectionObserver corre a tiempo — nunca
   depende de JS para hacerse visible. Mismo patrón que .pkg.sg-anim en
   scroll-guia.js (aprobado por Alan). Si el observer no dispara, main.js
   trae un failsafe a los ~1800ms que igual la muestra. */
.reveal{opacity:1;transform:none}
.reveal.in{opacity:1;transform:none}
@keyframes revealIn{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
.reveal.reveal-anim{animation:revealIn 1s var(--ease) both}
.reveal[data-d="1"].reveal-anim{animation-delay:.1s}
.reveal[data-d="2"].reveal-anim{animation-delay:.2s}
.reveal[data-d="3"].reveal-anim{animation-delay:.3s}
.reveal[data-d="4"].reveal-anim{animation-delay:.4s}
.reveal[data-d="5"].reveal-anim{animation-delay:.5s}

/* barra de progreso */
.progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:1000;
  background:linear-gradient(90deg,var(--wine-600),var(--gold));box-shadow:0 0 12px rgba(110,30,46,.5)}

/* ============================================================
   HEADER
   ============================================================ */
.header{
  position:fixed;top:0;left:0;width:100%;z-index:900;
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(16px,2.4vw,26px) clamp(20px,5vw,48px);
  transition:background .5s var(--ease-soft),padding .5s var(--ease-soft),border-color .5s,transform .45s var(--ease-soft);
  border-bottom:1px solid transparent;
}
/* noviazgo/matrimonio: al recorrer los paquetes el header se esconde y queda SOLO
   la guía lateral derecha (rail); reaparece al scrollear hacia arriba. (Alan S90 p.1) */
.header.nav-hidden{transform:translateY(-110%)}
.header.scrolled{
  background:rgba(251,250,248,.92);backdrop-filter:blur(16px) saturate(1.2);
  padding-top:12px;padding-bottom:12px;border-bottom:1px solid var(--line);
}
/* scrim: mientras el header es transparente (sobre foto), un degradado oscuro
   detrás garantiza que el texto claro SIEMPRE se lea, aunque abajo haya zona clara.
   Al scrollear (fondo marfil sólido) el scrim se apaga y el texto pasa a tinta oscura. */
.header::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(15,8,12,.55),rgba(15,8,12,0));
  transition:opacity .5s var(--ease-soft)}
.header.scrolled::before{opacity:0}
/* header transparente va sobre la foto del hero → texto claro fijo; al scrollear
   gana fondo marfil sólido → texto pasa a tinta oscura (--cream ya es oscuro) */
.brand{font-family:var(--serif);font-size:clamp(1.2rem,2vw,1.55rem);letter-spacing:.14em;font-weight:500;display:flex;align-items:center;gap:.5em;color:var(--photo-ink);transition:color .5s var(--ease-soft)}
.header.scrolled .brand{color:var(--cream)}
.brand b{font-weight:500}
.brand .dot{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold);display:inline-block}
/* logo real A&V (corazón+diamante+AV) limpio: sin círculo/fondo/sombra.
   Silueta vía CSS mask → color por CSS: DORADO en fondo oscuro, NEGRO al scrollear (fondo marfil).
   Fade dorado↔negro .4s SOLO en el logo. */
.brand__logo{width:1.75em;height:1.75em;flex:0 0 auto;display:inline-block;vertical-align:middle;
  background-color:#C9A24B;
  -webkit-mask:url(../img/logo-ayv-mono.png?v=111) center/contain no-repeat;
          mask:url(../img/logo-ayv-mono.png?v=111) center/contain no-repeat;
  transition:background-color .4s ease}
.header.scrolled .brand__logo{background-color:#111111}
.nav{display:flex;align-items:center;gap:clamp(18px,2.4vw,38px)}
.nav a{font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--photo-ink);text-shadow:0 1px 14px rgba(0,0,0,.55);position:relative;padding:.3em 0;transition:color .35s,text-shadow .35s}
.header.scrolled .nav a{text-shadow:none}
.nav a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1px;background:var(--gold);transition:width .4s var(--ease)}
.header.scrolled .nav a::after{background:var(--wine-600)}
.nav a:hover{color:var(--photo-ink)}.nav a:hover::after{width:100%}
/* página activa: subrayado persistente (adapta color con el header), sin forzar tinta oscura que se perdía sobre la foto */
.nav a.active::after{width:100%}
/* flecha con rebote: pista de que hay que bajar para ver los paquetes */
@keyframes bounceY{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
.bounce-y{animation:bounceY 1.3s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.bounce-y{animation:none}}
/* botón WhatsApp del menú móvil, más bonito (pill con brillo verde).
   IMPORTANTE: ".mobile-menu a" define font-family serif + font-size 2rem para los links del
   menú, y por especificidad CSS eso GANABA sobre ".btn" (que pone sans + .82rem) — el botón
   se inflaba a texto gigante y desbordaba la pantalla ("banda verde full-bleed", feedback Alan
   S91). Aquí se reclaman esas propiedades explícitamente para que el botón quede como pill
   compacta, centrada, con margen a los lados. */
.mobile-menu .btn--wa{
  margin-top:1.6rem;border-radius:100px;gap:.5em;
  font-family:var(--sans);font-size:.82rem;font-weight:500;letter-spacing:.08em;
  max-width:calc(100vw - 64px);text-align:center;
  box-shadow:0 14px 34px -12px rgba(31,175,87,.6);
  transition:transform .18s var(--ease-soft),box-shadow .3s;
}
.mobile-menu .btn--wa svg{width:1.15em;height:1.15em;flex:none}
.mobile-menu .btn--wa:active{transform:scale(.96)}
.header.scrolled .nav a{color:var(--cream-dim)}
.header.scrolled .nav a:hover{color:var(--cream)}
.nav .nav-cta{margin-left:6px}
.nav-cta{display:inline-flex;align-items:center;gap:.5em;border:1px solid rgba(248,240,234,.4);padding:.7em 1.3em;border-radius:100px;color:var(--photo-ink);text-transform:uppercase;letter-spacing:.14em;font-size:.76rem;transition:all .4s var(--ease)}
.header.scrolled .nav-cta{border-color:var(--line);color:var(--cream)}
.nav-cta:hover{background:var(--wine-600);border-color:var(--wine-600);color:#fff;transform:translateY(-2px)}
.nav-cta::after{display:none}

.burger{display:none;flex-direction:column;gap:5px;padding:8px;z-index:950}
.burger span{width:26px;height:2px;background:var(--photo-ink);transition:.4s var(--ease)}
.header.scrolled .burger span{background:var(--cream)}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* menú móvil */
.mobile-menu{
  position:fixed;inset:0;z-index:910;background:linear-gradient(160deg,var(--wine-900),var(--wine-700));
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.4rem;
  opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s;
}
.mobile-menu.open{opacity:1;visibility:visible}
.mobile-menu a{font-family:var(--serif);font-size:2rem;color:var(--cream);opacity:0;transform:translateY(20px);transition:all .5s var(--ease)}
.mobile-menu.open a{opacity:1;transform:none}
.mobile-menu.open a:nth-child(1){transition-delay:.08s}
.mobile-menu.open a:nth-child(2){transition-delay:.14s}
.mobile-menu.open a:nth-child(3){transition-delay:.2s}
.mobile-menu.open a:nth-child(4){transition-delay:.26s}
.mobile-menu.open a:nth-child(5){transition-delay:.32s}
.mobile-menu .btn{margin-top:1rem;transition-delay:.4s}
/* Tache (X) para cerrar el menú móvil — feedback Alan 21-jul: el panel abría a pantalla
   completa SIN cierre visible (el burger→X del header queda debajo del overlay).
   Tinto de marca sobre el fondo marfil del panel; área táctil 48px. */
.mobile-menu__close{
  position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:16px;
  width:48px;height:48px;display:flex;align-items:center;justify-content:center;
  color:var(--wine-600);background:rgba(122,24,48,.06);
  border:1px solid rgba(122,24,48,.25);border-radius:50%;padding:0;
  opacity:0;transform:rotate(-90deg) scale(.7);
  transition:opacity .45s var(--ease),transform .45s var(--ease),background .3s;
}
.mobile-menu.open .mobile-menu__close{opacity:1;transform:none;transition-delay:.12s}
.mobile-menu__close:hover{background:rgba(122,24,48,.12)}
.mobile-menu__close:active{transform:scale(.88)}
.mobile-menu__close svg{width:22px;height:22px;display:block;pointer-events:none}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg img{width:100%;height:100%;object-fit:cover;animation:kenburns 22s ease-in-out infinite alternate}
.hero__bg--video video{width:100%;height:100%;object-fit:cover}
@keyframes kenburns{from{transform:scale(1.06) translate(0,0)}to{transform:scale(1.18) translate(-1.5%,-2%)}}
.hero__bg::after{   /* overlay para legibilidad — oscuro parejo detrás del texto (feedback Fani S92: no se leían las letras) */
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(70% 55% at 50% 42%,rgba(8,2,4,.5) 0%,transparent 72%),
    linear-gradient(180deg,rgba(12,3,5,.62) 0%,rgba(12,3,5,.5) 32%,rgba(12,3,5,.58) 55%,rgba(12,3,5,.8) 80%,var(--wine-950) 100%);
}
/* Contenedor del hero: flex COLUMNA centrada — el centrado horizontal ya NO depende
   de text-align ni del ancho de la caja del <h1>; cada hijo se centra respecto al
   ancho REAL del viewport (width:100%). El header es position:fixed → nunca empuja
   este bloque. (Fix definitivo "corrido a la izquierda" — S92 recurrente) */
.hero__inner{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px,5vw,48px);text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center}
.hero__inner>*{max-width:100%}
.hero .eyebrow{margin-bottom:1.4rem}
.hero h1{
  font-size:clamp(3.4rem,12vw,9.5rem);line-height:.92;font-weight:500;color:var(--photo-ink);
  letter-spacing:.02em;text-shadow:0 30px 80px rgba(0,0,0,.5);
}
.hero h1 .script{display:block;font-size:clamp(2.6rem,8vw,6rem);color:var(--gold);font-weight:400;letter-spacing:0;margin-top:-.18em;line-height:1.1;text-shadow:0 10px 40px rgba(74,20,32,.4)}
.hero__sub{font-family:var(--serif);font-size:clamp(1.15rem,2.4vw,1.7rem);font-weight:300;color:var(--photo-ink);font-style:italic;margin:1.5rem auto 2.4rem;max-width:30ch}
.hero__cta{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* palabras animadas del h1 */
.hero h1 .w{display:inline-block;opacity:0;transform:translateY(40px) rotate(3deg);animation:wordIn 1.1s var(--ease) forwards}
.hero h1 .script{opacity:0;transform:translateY(30px);animation:wordIn 1.1s var(--ease) forwards .5s}
.hero .eyebrow,.hero__sub,.hero__cta{opacity:0;animation:fadeUp 1s var(--ease) forwards}
.hero .eyebrow{animation-delay:.1s}
.hero__sub{animation-delay:.8s}
.hero__cta{animation-delay:1s}
@keyframes wordIn{to{opacity:1;transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* indicador scroll: solo un chevron chico y discreto (sin texto) con rebote sutil */
.scroll-cue{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:3;
  display:flex;align-items:center;justify-content:center;color:var(--photo-ink-faint);
  opacity:0;animation:fadeUp 1s 1.4s forwards}
.scroll-cue svg{width:22px;height:22px;animation:scrollCueBounce 1.7s ease-in-out infinite}
@keyframes scrollCueBounce{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(7px);opacity:1}}
@media(prefers-reduced-motion:reduce){.scroll-cue svg{animation:none}}

/* partículas flotantes (hearts) */
.particles{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.particle{position:absolute;bottom:-30px;color:var(--blush);opacity:0;font-size:14px;animation:float 14s linear infinite}
@keyframes float{
  0%{opacity:0;transform:translateY(0) scale(.6) rotate(0)}
  12%{opacity:.5}
  88%{opacity:.5}
  100%{opacity:0;transform:translateY(-105vh) scale(1) rotate(220deg)}
}

/* ============================================================
   STATS / TRUST
   ============================================================ */
.stats{background:linear-gradient(var(--wine-950),var(--wine-900));border-block:1px solid var(--line);padding:clamp(38px,5vw,58px) 0}
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.stat .num{font-family:var(--serif);font-size:clamp(2.2rem,4.4vw,3.4rem);color:var(--wine-600);font-weight:500;line-height:1}
.stat .lbl{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--cream-dim);margin-top:.6em}
.stats .stat+.stat{border-left:1px solid var(--line)}

/* ============================================================
   EXPERIENCIAS (cards)
   ============================================================ */
.exp{background:var(--wine-900)}
.exp__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
.card{
  position:relative;border-radius:18px;overflow:hidden;min-height:clamp(420px,52vw,560px);
  display:flex;align-items:flex-end;isolation:isolate;
  box-shadow:var(--shadow);transition:transform .6s var(--ease)}
.card:hover{transform:translateY(-8px)}
.card__img{position:absolute;inset:0;z-index:-2}
.card__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.card:hover .card__img img{transform:scale(1.08)}
.card::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(20,4,9,.1) 0%,rgba(20,4,9,.22) 34%,rgba(20,4,9,.95) 100%);
  transition:background .5s}
.card:hover::after{background:linear-gradient(180deg,rgba(80,16,32,.18) 0%,rgba(20,4,9,.5) 34%,rgba(20,4,9,.97) 100%)}
/* Franja sólida SIEMPRE oscura detrás del texto (independiente del tono de la foto) —
   garantiza legibilidad del título aunque la imagen sea clara en esa zona. */
.card__body{position:relative;z-index:1;width:100%}
.card__body::before{content:"";position:absolute;inset:-10% 0 0 0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,rgba(15,2,6,.55) 40%,rgba(15,2,6,.9) 100%)}
.card__body>*{position:relative;padding-inline:clamp(24px,3vw,38px)}
.card__body>:first-child{padding-top:clamp(24px,3vw,38px)}
.card__body>:last-child{padding-bottom:clamp(24px,3vw,38px)}
.card__tag{font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);text-shadow:0 2px 12px rgba(0,0,0,.5)}
.card h3{font-size:clamp(1.9rem,3vw,2.6rem);margin:.25em 0 .4em;color:var(--photo-ink);text-shadow:0 4px 20px rgba(0,0,0,.55)}
.card p{color:var(--photo-ink-dim);font-size:.96rem;max-width:34ch;
  max-height:0;opacity:0;overflow:hidden;transition:max-height .6s var(--ease),opacity .5s,margin .5s}
.card:hover p{max-height:120px;opacity:1;margin-bottom:1.1em}
.card__link{display:inline-flex;align-items:center;gap:.6em;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--photo-ink)}
.card__link svg{width:1.1em;transition:transform .5s var(--ease)}
.card:hover .card__link svg{transform:translateX(6px)}
.card__link .u{position:relative}
.card__link .u::after{content:"";position:absolute;left:0;bottom:-3px;width:100%;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.card:hover .card__link .u::after{transform:scaleX(1)}

/* ============================================================
   POR QUÉ (value props)
   ============================================================ */
.why{position:relative;background:
   linear-gradient(120deg,var(--wine-800),var(--wine-950));overflow:hidden}
.why::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(110,30,46,.10),transparent 65%);top:-160px;right:-120px;filter:blur(20px)}
.why::after{content:"";position:absolute;width:480px;height:480px;border-radius:50%;
  background:radial-gradient(circle,rgba(185,138,94,.14),transparent 65%);bottom:-180px;left:-140px;filter:blur(20px)}
.why__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,46px);position:relative;z-index:1}
.vp{text-align:center;padding:clamp(20px,2vw,30px)}
.vp__ic{width:74px;height:74px;margin:0 auto 1.4rem;border-radius:50%;
  display:grid;place-items:center;border:1px solid var(--line);
  background:radial-gradient(circle at 30% 25%,rgba(227,189,145,.18),transparent 70%);
  transition:transform .6s var(--ease),border-color .5s}
.vp:hover .vp__ic{transform:translateY(-6px) rotate(-4deg);border-color:var(--wine-600)}
.vp__ic svg{width:34px;height:34px;stroke:var(--wine-600);fill:none;stroke-width:1.3}
.vp h3{font-size:clamp(1.4rem,2.2vw,1.9rem);margin-bottom:.5em}
.vp p{color:var(--cream-dim);font-size:.98rem;max-width:32ch;margin-inline:auto}

/* ============================================================
   BANDA DE FIRMA — vino oscuro sólido, el "acento real" de la marca
   protagonista de una sección entera (no solo botones). Signature element.
   ============================================================ */
.planners{background:radial-gradient(120% 140% at 15% 0%,rgba(160,40,66,.35),transparent 55%),linear-gradient(165deg,var(--wine-ink),var(--wine-deep) 70%);position:relative;overflow:hidden;color:var(--photo-ink)}
.planners::before{content:"";position:absolute;width:640px;height:640px;border-radius:50%;
  background:radial-gradient(circle,rgba(212,168,108,.14),transparent 65%);top:-240px;right:-200px;filter:blur(20px)}
.planners .eyebrow,.planners .flourish{color:var(--gold)}
.planners__grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(30px,5vw,70px);align-items:center;position:relative;z-index:1}
.planners__copy h2{font-size:clamp(2.2rem,4.6vw,3.4rem);margin:.25em 0 .5em;color:var(--photo-ink)}
.planners__copy h2 .script{color:var(--gold)}
.planners__copy p{color:var(--photo-ink-dim);font-size:1.02rem;max-width:52ch;margin-bottom:1em}
.planners__note{color:var(--photo-ink-faint)!important;font-size:.92rem!important;font-style:italic;border-left:2px solid var(--gold);padding-left:1em}
.planners__tags{display:flex;flex-wrap:wrap;gap:10px;align-content:flex-start}
.p-tag{display:inline-flex;flex-direction:column;gap:.15em;font-size:.86rem;letter-spacing:.02em;
  padding:.85em 1.2em;border:1px solid rgba(248,240,234,.28);border-radius:100px;color:var(--photo-ink);
  background:rgba(255,255,255,.05);transition:all .4s var(--ease)}
.p-tag:hover{border-color:var(--gold);transform:translateY(-3px);background:rgba(255,255,255,.08)}
.p-tag--soon{border-style:dashed;color:var(--photo-ink-faint)}
.p-tag--soon small{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}

/* ============================================================
   DALE UNA PISTA (hint loop)
   ============================================================ */
.hint{background:var(--wine-950)}
.hint__card{max-width:680px;margin-inline:auto;text-align:center;padding:clamp(40px,6vw,64px) clamp(24px,5vw,56px);
  border:1px solid var(--line);border-radius:24px;background:radial-gradient(120% 140% at 50% 0%,rgba(227,189,145,.08),transparent 60%)}
.hint__card h2{font-size:clamp(2rem,4.4vw,3rem);margin:.2em 0 .5em}
.hint__card p{color:var(--cream-dim);max-width:46ch;margin:0 auto 1.8rem;font-size:1rem}

/* ============================================================
   GALERÍA
   ============================================================ */
.gallery{background:var(--wine-950)}
/* Grid de cuadrados perfectos, 12 imágenes (feedback Fani S91) — margen blanco entre
   fotos + esquinas redondeadas (feedback Fani S92 ronda 2: se veía "pegado", sin aire) */
.gallery__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;background:#fff;padding:8px;border-radius:14px}
.g-item{position:relative;overflow:hidden;cursor:pointer;aspect-ratio:1/1;border-radius:10px}
.g-item img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease),filter .6s}
.g-item::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(18,4,7,.55));opacity:.5;transition:opacity .5s}
.g-item:hover img{transform:scale(1.1)}
.g-item:hover::after{opacity:.15}
.g-item .g-zoom{position:absolute;right:14px;bottom:14px;width:40px;height:40px;border-radius:50%;background:rgba(18,4,7,.5);backdrop-filter:blur(6px);display:grid;place-items:center;opacity:0;transform:scale(.6);transition:all .5s var(--ease);z-index:2}
.g-item:hover .g-zoom{opacity:1;transform:scale(1)}
.g-item .g-zoom svg{width:18px;stroke:var(--photo-ink);fill:none;stroke-width:1.5}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:1100;background:rgba(10,2,4,.94);backdrop-filter:blur(8px);
  display:grid;place-items:center;opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s;padding:24px}
.lightbox.open{opacity:1;visibility:visible}
.lightbox img{max-width:92vw;max-height:88vh;border-radius:10px;box-shadow:var(--shadow);transform:scale(.92);transition:transform .5s var(--ease)}
.lightbox.open img{transform:scale(1)}
.lightbox .lb-close{position:absolute;top:24px;right:28px;font-size:2rem;color:var(--photo-ink);width:48px;height:48px;border-radius:50%;border:1px solid rgba(248,240,234,.3)}
.lightbox .lb-nav{position:absolute;top:50%;transform:translateY(-50%);font-size:2rem;color:var(--photo-ink);width:54px;height:54px;border-radius:50%;border:1px solid rgba(248,240,234,.3);background:rgba(255,255,255,.04);transition:background .3s}
.lightbox .lb-nav:hover{background:rgba(255,255,255,.12)}
.lb-prev{left:20px}.lb-next{right:20px}

/* lightbox de carrusel (tarjetas de paquete + configurador) — sobre TODO */
.pxlb{position:fixed;inset:0;z-index:1400;background:rgba(10,2,4,.95);backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:center;gap:8px;padding:20px;
  opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.pxlb.open{opacity:1;visibility:visible}
.pxlb__stage{position:relative;display:flex;flex-direction:column;align-items:center;max-width:94vw}
.pxlb__img{max-width:92vw;max-height:84vh;border-radius:12px;box-shadow:var(--shadow);
  transform:scale(.94);transition:transform .45s var(--ease)}
.pxlb.open .pxlb__img{transform:scale(1)}
.pxlb__cap{margin-top:12px;font-size:.82rem;letter-spacing:.04em;color:var(--photo-ink-faint);text-align:center;max-width:92vw}
.pxlb__dots{display:flex;justify-content:center;gap:6px;margin-top:10px}
.pxlb__dots span{width:6px;height:6px;border-radius:50%;background:rgba(248,240,234,.4);transition:all .3s}
.pxlb__dots span.on{background:var(--photo-ink);width:20px;border-radius:100px}
.pxlb__close{position:absolute;top:20px;right:24px;font-size:2rem;line-height:1;color:var(--photo-ink);
  width:48px;height:48px;border-radius:50%;border:1px solid rgba(248,240,234,.3);background:rgba(255,255,255,.04);z-index:2}
.pxlb__nav{flex:none;font-size:2rem;color:var(--photo-ink);width:54px;height:54px;border-radius:50%;
  border:1px solid rgba(248,240,234,.3);background:rgba(255,255,255,.05);transition:background .3s;z-index:2}
.pxlb__nav:hover{background:rgba(255,255,255,.14)}
.pxlb--single .pxlb__nav,.pxlb--single .pxlb__dots{display:none}
@media (max-width:640px){
  .pxlb__nav{position:absolute;top:auto;bottom:26px;width:46px;height:46px}
  .pxlb__prev{left:24px}.pxlb__next{right:24px}
  .pxlb__img{max-height:78vh}
}

/* ============================================================
   CÓMO RESERVAR (steps)
   ============================================================ */
.steps{background:linear-gradient(var(--wine-900),var(--wine-800))}
.steps__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,30px);counter-reset:step}
.step{position:relative;padding-top:2.6rem;text-align:center}
.step::before{counter-increment:step;content:"0" counter(step);font-family:var(--serif);font-size:3.2rem;color:transparent;-webkit-text-stroke:1px var(--wine-600);opacity:.5;line-height:1;display:block;margin-bottom:.3em;margin-inline:auto}
.step h3{font-size:1.4rem;margin-bottom:.4em}
.step p{color:var(--cream-dim);font-size:.94rem}
.step__line{position:absolute;top:1.5rem;left:0;width:100%;height:1px;background:var(--line);z-index:0}
.step:last-child .step__line{display:none}

/* ============================================================
   TESTIMONIOS
   ============================================================ */
.marquee{overflow:hidden;padding:26px 0;border-block:1px solid var(--line);background:var(--wine-950);white-space:nowrap}
.marquee__track{display:inline-flex;gap:3rem;animation:scrollx 28s linear infinite;will-change:transform}
.marquee span{font-family:var(--serif);font-size:clamp(1.6rem,3vw,2.4rem);color:var(--cream-faint);letter-spacing:.1em;text-transform:uppercase;display:inline-flex;align-items:center;gap:3rem}
.marquee span::after{content:"♥";color:var(--rose);font-size:.6em}
@keyframes scrollx{to{transform:translateX(-50%)}}

.testi{background:var(--wine-950);position:relative}
.testi__viewport{max-width:840px;margin-inline:auto;position:relative;min-height:320px}
.t-card{position:absolute;inset:0;text-align:center;display:flex;flex-direction:column;justify-content:center;opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease);pointer-events:none}
.t-card.active{opacity:1;transform:none;pointer-events:auto}
.t-stars{color:var(--gold);letter-spacing:.3em;font-size:1.1rem;margin-bottom:1.4rem}
.t-quote{font-family:var(--serif);font-size:clamp(1.4rem,3vw,2.1rem);font-style:italic;font-weight:300;line-height:1.4;color:var(--cream)}
.t-author{margin-top:1.6rem;font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--wine-600)}
.t-author span{display:block;color:var(--cream-faint);letter-spacing:.12em;margin-top:.3em;font-size:.72rem}
.t-avatar-wrap{display:block;margin:0 auto .7rem}
.t-avatar,.t-avatar--fallback{width:44px;height:44px;border-radius:50%;display:block;margin:0 auto}
.t-avatar{object-fit:cover;border:1px solid var(--line)}
.t-avatar--fallback{display:flex;align-items:center;justify-content:center;background:var(--wine-600);color:#fff;font-family:var(--serif);font-size:1.15rem;font-weight:600;letter-spacing:0;text-transform:none}
.t-author__name{display:block;color:var(--wine-600)}
.t-author__meta{display:block;color:var(--cream-faint);letter-spacing:.12em;margin-top:.3em;font-size:.72rem;text-transform:uppercase}
.t-dots{display:flex;gap:10px;justify-content:center;margin-top:2.6rem}
.t-dots button{width:9px;height:9px;border-radius:50%;background:var(--line);transition:all .4s var(--ease);border:none;cursor:pointer;padding:0}
.t-dots button.active{background:var(--gold);width:26px;border-radius:6px}
.testi__cta{margin-top:2.4rem;text-align:center}

/* ============================================================
   CTA FINAL
   ============================================================ */
.final{position:relative;overflow:hidden;text-align:center;padding:clamp(90px,13vw,170px) 0}
.final__bg{position:absolute;inset:0;z-index:0}
.final__bg img{width:100%;height:100%;object-fit:cover}
.final__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(45,24,28,.78),rgba(30,12,17,.86))}
.final__inner{position:relative;z-index:1}
.final h2{font-size:clamp(2.6rem,7vw,5.5rem);line-height:1;margin-bottom:.4em;color:var(--photo-ink)}
.final .script{color:var(--gold);font-size:clamp(2.2rem,6vw,4rem);display:block}
.final p{color:var(--photo-ink-dim);max-width:42ch;margin:0 auto 2.4rem;font-size:1.08rem}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--wine-950);border-top:1px solid var(--line);padding:clamp(56px,7vw,84px) 0 32px}
.footer__top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.1fr;gap:40px;margin-bottom:48px}
/* wrapper de Experiencias+Ayuda: en desktop "desaparece" (display:contents) para que sus 2
   columnas sigan siendo items directos del grid de 4 columnas de arriba, tal cual estaba.
   En móvil (ver media query) se activa como su propio grid de 2 columnas lado a lado. */
.footer__cols2{display:contents}
.footer .brand{font-size:1.8rem;margin-bottom:1rem;color:var(--cream)}
.footer__col h4{font-family:var(--sans);font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;color:var(--wine-600);margin-bottom:1.1em;font-weight:400}
.footer__col a,.footer__col p{display:block;color:var(--cream-dim);font-size:.95rem;margin-bottom:.7em;transition:color .3s}
.footer__col a:hover{color:var(--cream)}
.footer__phone{font-family:var(--serif);font-size:1.5rem!important;color:var(--cream)!important}
.footer__social{display:flex;gap:14px;margin-top:1rem}
.footer__social a{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;transition:all .4s var(--ease)}
.footer__social a:hover{border-color:var(--wine-600);transform:translateY(-3px)}
.footer__social svg{width:18px;height:18px;fill:var(--cream)}
.footer__handles{margin-top:.9rem;font-size:.82rem;color:var(--cream-faint);letter-spacing:.04em}
.footer__handles a{transition:color .3s}
/* footer en VINO con letras claras — se ve más limpio (feedback Estefani) */
.footer{background:var(--wine-ink);color:rgba(248,240,234,.72)}
.footer .brand{color:#fff}
.footer .brand .dot{background:var(--gold-soft);box-shadow:0 0 10px var(--gold-soft)}
.footer__col h4{color:var(--gold-soft)}
.footer__col p{color:rgba(248,240,234,.58)}
.footer__col a{color:rgba(248,240,234,.74)}
.footer__col a:hover{color:#fff}
.footer__phone{color:#fff!important}
.footer__social a{border-color:rgba(255,255,255,.22)}
.footer__social a:hover{border-color:var(--gold-soft);transform:translateY(-3px)}
.footer__social svg{fill:#fff}
.footer__handles{color:rgba(248,240,234,.5)}
.footer__handles a{color:var(--gold-soft)}
.footer__handles a:hover{color:#fff}
.footer__bottom{border-top-color:rgba(255,255,255,.14);color:rgba(248,240,234,.5)}
.footer__bottom a{color:rgba(248,240,234,.62)}
.footer__bottom a:hover{color:#fff}

/* ---------- FAQ (acordeón) ---------- */
.faq-list{display:flex;flex-direction:column;gap:12px}
.faq-item{background:var(--wine-800);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  box-shadow:0 2px 12px -8px rgba(74,20,32,.14);transition:border-color .35s}
.faq-item[open]{border-color:rgba(122,24,48,.35)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px clamp(18px,3vw,28px);font-family:var(--serif);font-size:clamp(1.1rem,2vw,1.32rem);color:var(--cream);font-weight:500}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-family:var(--sans);font-size:1.5rem;font-weight:300;color:var(--wine-600);
  transition:transform .4s var(--ease);flex:none;line-height:1}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item summary:hover{color:var(--wine-600)}
.faq-item__a{padding:0 clamp(18px,3vw,28px) 22px;color:var(--cream-dim);font-size:1rem;line-height:1.7}
.faq-item__a a{color:var(--wine-600);text-decoration:underline;text-underline-offset:2px}
.faq-item__a a:hover{color:var(--wine-deep)}
.footer__bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:26px;font-size:.78rem;color:var(--cream-faint);letter-spacing:.06em}

/* WhatsApp flotante — arrastrable (recuerda posición), cerrable con X, y colapsable
   al scrollear hacia abajo (feedback Alan S91: "estorba"; feedback Fani S92 ronda 2:
   logo real + cerrar + arrastre). Reposo/scroll-arriba/top = burbuja completa.
   Bajando = se encoge a media-burbuja pegada al borde (asoma ~40%, opacidad .6);
   un tap la re-expande (y no navega), el siguiente tap ya abre WhatsApp. */
.wa-float-wrap{position:fixed;right:22px;bottom:22px;z-index:800;width:60px;height:60px;touch-action:none}
.wa-float-wrap.wa-float--hidden{display:none}
.wa-float-wrap.wa-float--dragging{transition:none}
.wa-float-wrap.wa-float--dragging .wa-float{cursor:grabbing}
.wa-float{position:relative;display:grid;place-items:center;width:60px;height:60px;border-radius:50%;
  box-shadow:0 12px 34px -8px rgba(31,175,87,.7);cursor:grab;
  transition:transform .45s var(--ease),opacity .45s var(--ease)}
.wa-float:hover{transform:scale(1.08)}
.wa-float svg{width:60px;height:60px;display:block;pointer-events:none}
.wa-float::before{content:"";position:absolute;inset:0;border-radius:50%;background:#25D366;z-index:-1;animation:pulse 2.4s ease-out infinite;transition:opacity .3s}
@keyframes pulse{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.9);opacity:0}}
.wa-float-wrap--collapsed .wa-float{transform:translateX(58%);opacity:.6}
.wa-float-wrap--collapsed .wa-float:hover{transform:translateX(46%);opacity:.85}
.wa-float-wrap--collapsed .wa-float::before{opacity:0}
.wa-float__close{position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;z-index:2;
  background:rgba(20,20,20,.78);color:#fff;border:1px solid rgba(255,255,255,.45);font-size:14px;line-height:1;
  display:grid;place-items:center;cursor:pointer;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.wa-float__close:hover{background:rgba(0,0,0,.92)}
.wa-float-wrap--collapsed .wa-float__close{opacity:0;pointer-events:none;transform:scale(.5)}
@media(prefers-reduced-motion:reduce){.wa-float,.wa-float-wrap{transition:none}}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1024px){
  .gallery__grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:860px){
  .nav{display:none}
  .burger{display:flex}
  .exp__grid{grid-template-columns:1fr;gap:18px}
  .card{min-height:440px}
  .card p{max-height:120px;opacity:1;margin-bottom:1.1em}   /* en móvil siempre visible */
  .planners__grid{grid-template-columns:1fr;gap:30px}
  /* chips "idea especial" en 2 columnas en móvil (feedback Fani S91 — se veía muy largo en 1 columna) */
  .planners__tags{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .p-tag{border-radius:16px;text-align:center;align-items:center;justify-content:center}
  .why__grid{grid-template-columns:1fr;gap:34px}
  .steps__grid{grid-template-columns:1fr 1fr;gap:28px 22px}
  .step__line{display:none}
  .stats__grid{grid-template-columns:1fr 1fr;gap:34px 16px}
  .stats .stat:nth-child(3),.stats .stat:nth-child(2){border-left:1px solid var(--line)}
  .stats .stat:nth-child(odd){border-left:none}
  .footer__top{grid-template-columns:1fr;gap:30px}
  /* móvil: Experiencias + Ayuda lado a lado en 2 columnas (feedback Alan S91 — lista larguísima) */
  .footer__cols2{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
  .testi__viewport{min-height:400px}
  .gallery__grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:480px){
  .hero__cta{flex-direction:column;width:100%}
  .hero__cta .btn{width:100%;justify-content:center}
  .stats__grid{grid-template-columns:1fr 1fr}
  .steps__grid{grid-template-columns:1fr}
}
/* Hero móvil — CENTRADO ÓPTICO REAL (31-jul-2026, bug reportado por Alan: el bloque
   se veía "cargado arriba" con un hueco enorme de video vacío debajo, "nunca se logró
   centrar"). CAUSA REAL verificada con getBoundingClientRect() en el navegador —
   NO era el clásico bug de 100vh vs barra de direcciones:
   .hero__cta vivía con position:absolute DENTRO de .hero__inner, y .hero__inner tiene
   position:relative (línea ~263) → ese era el contenedor de referencia para "bottom",
   no .hero. .hero__inner solo mide lo que ocupa su contenido (~500px), así que
   "bottom:5vh" colocaba el CTA a 5vh del fondo de ESA caja de 500px, muy arriba del
   fondo real de la pantalla (844px) — de ahí el hueco de video vacío abajo.
   Fix: el CTA vuelve al flujo normal (position:static, ya no absolute) y todo el
   bloque (eyebrow+título+subtítulo+CTA) se centra COMO UNA SOLA COLUMNA dentro de
   .hero (align-items:center heredado de la regla base, línea 248), igual que en
   desktop — mismo patrón, cero contenedores rotos. min-height:100svh en .hero ya usa
   small-viewport-height (S110), así que un address bar que aparece/desaparece no
   desalinea nada: no hay nada pegado a un borde que se mueva.
   ⚠️ Ojo: .hero__cta es una clase COMPARTIDA con el subhero de noviazgo/matrimonio/citas
   — SIEMPRE escopar estas reglas con ".hero " (el hero principal del index), NUNCA
   ".hero__cta" solo. */
@media(max-width:680px){
  .hero .hero__inner{padding-top:calc(60px + env(safe-area-inset-top,0px));padding-bottom:calc(28px + env(safe-area-inset-bottom,0px))}
  .hero .hero__cta{position:static;margin:.4rem 0 0;padding-inline:0;width:100%}
  .hero .hero__cta .btn{width:100%;max-width:400px;margin-inline:auto;display:flex;align-items:center;justify-content:center}
}

/* ============================================================
   PÁGINAS INTERNAS (catálogo de paquetes)
   ============================================================ */
.subhero{position:relative;min-height:56svh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.subhero__bg{position:absolute;inset:0;z-index:0}
.subhero__bg img{width:100%;height:100%;object-fit:cover;animation:kenburns 24s ease-in-out infinite alternate}
/* scrim oscuro parejo (feedback Fani S92: el degradado viejo se lavaba a casi-blanco
   abajo — var(--wine-950) es casi blanco, no oscuro — y no se leía el título).
   Ahora: vino/negro elegante en toda la foto, con un respiro suave a blanco SOLO
   en el último tramo, justo en la costura con la sección clara de abajo. */
.subhero__bg::after{content:"";position:absolute;inset:0;background:
  radial-gradient(60% 55% at 50% 46%,rgba(8,2,4,.4) 0%,transparent 72%),
  linear-gradient(180deg,rgba(10,3,5,.56) 0%,rgba(10,3,5,.4) 35%,rgba(10,3,5,.6) 62%,rgba(10,3,5,.88) 86%,var(--wine-950) 100%)}
.subhero__inner{position:relative;z-index:2;padding:120px clamp(20px,5vw,48px) 40px}
.breadcrumb{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--photo-ink-dim);margin-bottom:1rem}
.breadcrumb a:hover{color:var(--gold)}
.breadcrumb span{color:var(--gold);margin:0 .5em}
.subhero h1{font-size:clamp(2.8rem,7vw,5.5rem);line-height:1;margin-bottom:.3em;color:var(--photo-ink)}
.subhero h1 .script{display:block;color:var(--gold);font-size:clamp(2rem,5vw,3.4rem);margin-top:.05em}
.subhero p{color:var(--photo-ink-dim);max-width:46ch;margin:1rem auto 0;font-size:1.05rem}

/* toggle de filtro (ciudad Y tipo Personalizado/Express) — contexto CLARO,
   vive en secciones de papel, no sobre foto: nada de blancos translúcidos. */
.city-toggle,.filter-toggle{display:inline-flex;gap:6px;padding:6px;border:1px solid var(--line);border-radius:100px;margin:0 auto;background:var(--wine-900)}
.city-toggle button,.filter-toggle button{font-family:var(--sans);font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cream-dim);padding:.8em 1.8em;border-radius:100px;transition:color .4s,background .4s}
.city-toggle button.active,.filter-toggle button.active{background:linear-gradient(120deg,var(--wine-600),var(--wine-deep));color:#fff;box-shadow:0 10px 26px -12px rgba(122,24,48,.45)}
.city-wrap,.filter-wrap{display:flex;justify-content:center;margin-bottom:clamp(18px,2.4vw,26px)}
.filter-wrap{flex-wrap:wrap;gap:14px}

/* explicación Express vs Personalizado */
.tipo-note{max-width:640px;margin:0 auto clamp(30px,4vw,46px);text-align:center;
  background:var(--wine-700);border:1px solid var(--line);border-radius:16px;padding:16px 22px;
  font-size:.88rem;color:var(--cream-dim);transition:opacity .3s}
.tipo-note b{color:var(--wine-600);font-family:var(--serif);font-size:1.02rem}

/* grid de paquetes */
.pkg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,30px)}
.pkg-grid[hidden]{display:none}
/* Encabezado de subsección dentro del grid (ej. Corazones & Letras / Picnics) — ocupa todo el ancho */
.pkg-subhead{grid-column:1/-1;display:flex;align-items:center;gap:.7rem;margin:.2rem 0 .1rem}
.pkg-subhead + *{--x:0}
.pkg-subhead:not(:first-child){margin-top:1.9rem;padding-top:1.9rem;border-top:1px solid var(--line)}
.pkg-subhead__ic{flex:none;width:2.3rem;height:2.3rem;display:grid;place-items:center;border-radius:50%;
  background:var(--wine-900);border:1px solid var(--line);color:var(--wine-600);font-size:1.05rem}
.pkg-subhead__tx{display:flex;flex-direction:column;line-height:1.15}
.pkg-subhead__tx{font-family:var(--serif);font-size:clamp(1.3rem,2.4vw,1.7rem);color:var(--cream)}
.pkg-subhead__tx small{font-family:var(--sans);font-size:.72rem;letter-spacing:.04em;color:var(--cream-dim);text-transform:none;margin-top:.15rem}
.pkg{display:flex;flex-direction:column;background:var(--wine-800);border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:transform .6s var(--ease),border-color .5s,box-shadow .6s var(--ease)}
.pkg:hover{transform:translateY(-8px);border-color:rgba(122,24,48,.35);box-shadow:0 30px 70px -34px rgba(74,20,32,.28)}
/* toda la tarjeta (foto + cuerpo) invita a clic → abre la ficha */
.pkg:has([data-detalle]){cursor:pointer}
.pkg__img{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--wine-900)}
.pkg__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.pkg:hover .pkg__img img{transform:scale(1.07)}
.pkg__img[data-fotos]{cursor:pointer}
/* badge "N fotos" + dots sobre la foto de la tarjeta */
.pkg__count{position:absolute;left:12px;bottom:12px;z-index:2;display:inline-flex;align-items:center;gap:.4em;
  background:rgba(43,10,18,.62);backdrop-filter:blur(8px);border:1px solid rgba(248,240,234,.22);
  padding:.34em .7em;border-radius:100px;font-size:.68rem;letter-spacing:.06em;color:var(--photo-ink);font-weight:500;pointer-events:none}
.pkg__count svg{width:.95em;height:.95em;stroke:currentColor;fill:none;stroke-width:1.7}
.pkg__dots{position:absolute;left:0;right:0;top:10px;z-index:2;display:flex;justify-content:center;gap:5px;pointer-events:none}
.pkg__dots span{width:5px;height:5px;border-radius:50%;background:rgba(248,240,234,.55)}
.pkg__dots span.on{background:var(--photo-ink);width:14px;border-radius:100px}
.pkg__price{position:absolute;right:12px;bottom:12px;display:flex;align-items:baseline;gap:.5em;
  background:rgba(43,10,18,.7);backdrop-filter:blur(8px);border:1px solid rgba(248,240,234,.25);
  padding:.5em .9em;border-radius:100px;font-family:var(--serif);font-size:1.25rem;color:var(--photo-ink)}
.pkg__price .was{font-size:.85rem;color:var(--photo-ink-faint);text-decoration:line-through;font-family:var(--sans)}
.pkg__price .mxn{font-size:.6rem;letter-spacing:.1em;color:var(--gold-soft);font-family:var(--sans);align-self:center}
/* Precio Express (doble Lun-Jue / Vie-Sáb): bloque limpio de 2 renglones alineado a la derecha */
.pkg__price--dual{flex-direction:column;align-items:flex-end;gap:.12em;border-radius:16px;padding:.55em .95em;font-size:1.18rem;line-height:1.05}
.pkg__price-row{display:flex;align-items:baseline;gap:.5em;white-space:nowrap}
.pkg__price-row b{font-weight:500}
.pkg__price--dual small{font-size:.56rem;letter-spacing:.09em;color:var(--gold-soft);text-transform:uppercase;font-family:var(--sans);min-width:3.4em;text-align:left}
.pkg__price--flat{position:static;background:var(--wine-900);border:1px solid var(--line);color:var(--wine-600);backdrop-filter:none}
.pkg__price--flat.pkg__price--dual{align-items:flex-start;border-radius:12px}
.pkg__price--flat .mxn{color:var(--gold)}
.pkg__badge{position:absolute;left:12px;top:12px;background:var(--gold);color:#2d181c;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;padding:.4em .8em;border-radius:100px;font-weight:500;z-index:2}
.pkg__sku{display:inline-block;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-faint);margin-bottom:.5em}
.pkg__body{padding:clamp(18px,2vw,26px);display:flex;flex-direction:column;flex:1}
.pkg__body h3{font-size:1.35rem;line-height:1.1;margin-bottom:.45em}
.pkg__body p{color:var(--cream-dim);font-size:.9rem;flex:1;margin-bottom:1em}
.pkg__note{display:flex;gap:.5em;align-items:flex-start;font-size:.8rem;color:var(--wine-600);background:var(--wine-700);
  border-radius:10px;padding:.6em .8em;margin-bottom:1.1em}
.pkg__note svg{width:1.1em;height:1.1em;flex:none;stroke:var(--wine-600);fill:none;stroke-width:1.6;margin-top:.1em}
/* tarjeta SIN foto real (33/44 paquetes) — nunca una foto genérica haciéndose pasar por el producto */
.pkg--nophoto{background:linear-gradient(155deg,var(--wine-800),var(--wine-900))}
.pkg__falta{display:flex;align-items:center;gap:7px;margin:12px clamp(18px,2vw,26px) 0;padding:7px 11px;border:1px dashed rgba(248,240,234,.3);border-radius:9px;font-size:.74rem;letter-spacing:.03em;color:var(--photo-ink-faint);background:rgba(0,0,0,.14)}
.pkg__falta svg{width:1.05em;height:1.05em;flex:none;opacity:.85;stroke:currentColor}
.pkg__head{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
  padding:18px clamp(18px,2vw,26px) 0}
.pkg__head .pkg__badge{position:static}
.pkg__cta{display:inline-flex;align-items:center;justify-content:center;gap:.6em;width:100%;
  background:linear-gradient(120deg,var(--wine-600),var(--wine-deep));color:#fff;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  padding:1em;border-radius:100px;transition:background .4s,transform .4s var(--ease);box-shadow:0 14px 30px -16px rgba(110,30,46,.55)}
.pkg__cta:hover{transform:translateY(-2px);box-shadow:0 18px 36px -14px rgba(110,30,46,.6)}
.pkg__cta svg{width:1.05em;fill:currentColor}
.pkg__cta-alt{display:inline-flex;align-items:center;justify-content:center;gap:.5em;width:100%;
  color:var(--cream-dim);font-size:.76rem;letter-spacing:.08em;margin-top:.6em;padding:.4em;transition:color .3s}
.pkg__cta-alt:hover{color:#25c264}
.pkg__cta-alt svg{width:1em;fill:currentColor}

/* franja informativa (cómo funciona / nota anticipo) */
.info-strip{background:var(--wine-900);border-block:1px solid var(--line)}
.info-strip__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px)}
.info-it{display:flex;gap:1rem;align-items:flex-start}
.info-it .n{font-family:var(--serif);font-size:1.8rem;color:transparent;-webkit-text-stroke:1px var(--wine-600);opacity:.6;line-height:1}
.info-it h4{font-size:1.15rem;margin-bottom:.3em}
.info-it p{color:var(--cream-dim);font-size:.9rem}
.note-deposit{text-align:center;color:var(--cream-faint);font-size:.85rem;max-width:60ch;margin:clamp(30px,4vw,46px) auto 0}

/* ---------- Pasos fáciles (S114, 31-jul-2026) ----------
   Franja chiquita entre el resumen SEO y "Nuestros paquetes": 5 pasos con
   numeral circulado (①-⑤) sobre un riel dorado, sin tarjetas ni texto largo
   — reemplaza al viejo bloque "Cómo reservar" (01/02/03) de hasta abajo,
   que casi nadie llegaba a ver. */
.easy-steps{padding-block:clamp(34px,5vw,54px)!important}
.easy-steps__head{margin-bottom:clamp(20px,3vw,30px)}
.easy-steps__title{font-family:var(--serif);font-style:italic;font-size:clamp(1.05rem,1.8vw,1.35rem);color:var(--cream-dim);margin-top:.3em;font-weight:400}
.easy-steps__rail{list-style:none;display:flex;align-items:flex-start;justify-content:space-between;gap:6px;max-width:900px;margin-inline:auto;position:relative}
.easy-steps__rail::before{content:"";position:absolute;top:14px;left:6%;right:6%;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold) 10%,var(--gold) 90%,transparent)}
.easy-steps__it{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.55em;max-width:150px}
.easy-steps__num{font-family:var(--serif);font-size:1.55rem;line-height:1;color:var(--gold);background:var(--wine-950);padding:0 .2em;position:relative;z-index:1}
.easy-steps__lbl{font-size:.8rem;color:var(--cream-dim);line-height:1.35}
.easy-steps__lbl small{display:block;font-size:.7rem;color:var(--cream-faint);margin-top:.25em}

@media(max-width:860px){
  .pkg-grid{grid-template-columns:1fr 1fr;gap:16px}
  .info-strip__grid{grid-template-columns:1fr;gap:24px}
}
@media(max-width:680px){
  .easy-steps__rail{flex-direction:column;align-items:stretch;gap:16px;max-width:340px}
  .easy-steps__rail::before{top:0;bottom:0;left:14px;right:auto;width:1px;height:auto;
    background:linear-gradient(180deg,transparent,var(--gold) 8%,var(--gold) 92%,transparent)}
  .easy-steps__it{flex-direction:row;text-align:left;max-width:none;align-items:flex-start;gap:.9em}
  .easy-steps__num{padding:.05em .2em}
}
@media(max-width:560px){
  .pkg-grid{grid-template-columns:1fr;max-width:380px;margin-inline:auto}
  .city-toggle button{padding:.7em 1.3em;font-size:.76rem}
}

/* Accesibilidad: reduce motion */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .hero__bg img{animation:none}
  .reveal{opacity:1;transform:none}
  .hero__bg--video video{display:none}
  .hero__bg--video{background-image:url(../video/portada-hero-poster.jpg);background-size:cover;background-position:center}
}

/* ============================================================
   PROMOCIONES COMPLETAS — carrusel coverflow
   (11-ago-2026, encargo de Alan: fuera el toggle Personalizado/Express;
   las Express se llaman PROMOCIONES y van en carrusel: la del centro
   grande, las de los lados recortadas atrás, loop infinito y deslizable.)
   ============================================================ */
#paquetes{padding-top:clamp(40px,5vw,72px)}
.promos{margin:0 auto clamp(30px,4vw,48px);max-width:1280px}
.promos__head{text-align:center;margin:0 auto clamp(16px,2vw,24px);max-width:640px}
.promos__head .eyebrow{display:block}
.promos__head h2,.promos__head h3{font-family:var(--serif);font-weight:500;line-height:1.05;color:var(--wine-600);margin:.1em 0 .28em;font-size:clamp(1.9rem,4.4vw,3.1rem)}
.promos--cfg .promos__head h3{font-size:clamp(1.15rem,2.6vw,1.35rem);color:var(--cream);margin:0 0 .2em}
.promos__head p{color:var(--cream-dim);font-size:.98rem;margin:0}
.promos--cfg .promos__head p{font-size:.85rem}

.promos__stage{
  --promo-w:min(540px,74vw);
  --promo-ar:1.12;
  position:relative;height:calc(var(--promo-w) / var(--promo-ar));
  overflow:hidden;outline:none;touch-action:pan-y;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
}
.promos--cfg .promos__stage{--promo-w:min(360px,62vw);--promo-ar:1.02}
@media (max-width:760px){
  /* En celular la tarjeta va más alta que ancha (la foto sigue mandando). DENTRO del
     configurador va notablemente más chica: la promo se comía la pantalla y no se
     alcanzaban a ver ni el paso ni el botón de continuar (Alan, 11-ago-2026).
     El resto de los ajustes de celular va AL FINAL del bloque (si no, las reglas base los pisan). */
  .promos__stage{--promo-w:76vw;--promo-ar:.72}
  .promos--cfg .promos__stage{--promo-w:64vw;--promo-ar:.88}
}

.promo{
  position:absolute;top:0;left:50%;width:var(--promo-w);height:100%;
  transform-origin:50% 50%;
  /* sin will-change a propósito: con la máscara del escenario creaba capas de composición
     de más y algunos motores dejaban la tarjeta en blanco tras hacer scroll. */
  transition:transform .62s cubic-bezier(.22,.61,.36,1),opacity .5s ease;
}
.promo__card{
  position:relative;width:100%;height:100%;overflow:hidden;
  border-radius:20px;background:var(--wine-ink);cursor:pointer;
  box-shadow:0 18px 46px rgba(43,10,18,.24),0 2px 8px rgba(43,10,18,.14);
  transition:box-shadow .4s ease;
}
.promo--activa .promo__card{box-shadow:0 26px 64px rgba(43,10,18,.34),0 3px 12px rgba(43,10,18,.18)}
.promo__img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s cubic-bezier(.22,.61,.36,1)}
.promo--activa .promo__card:hover .promo__img{transform:scale(1.045)}
.promo__img--vacia{background:linear-gradient(140deg,var(--wine-deep),var(--wine-ink))}
.promo__veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(20,4,9,.92) 0,rgba(20,4,9,.68) 32%,rgba(20,4,9,.12) 62%,rgba(20,4,9,.28) 100%)}
.promo__tag{
  position:absolute;top:14px;left:14px;z-index:2;
  font-family:var(--sans);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:#2b0a12;background:linear-gradient(135deg,var(--gold-soft),var(--gold));
  padding:.42em .85em;border-radius:999px;font-weight:600;
}
.promo__txt{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(16px,2.4vw,26px);color:var(--photo-ink)}
.promo__where{display:block;font-family:var(--sans);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--photo-ink-dim);margin-bottom:.5em}
.promo__where::before{content:"◈ ";color:var(--gold-soft)}
.promo__name{font-family:var(--serif);font-weight:500;font-size:clamp(1.4rem,2.9vw,2.05rem);line-height:1.08;margin:0 0 .22em;color:#fff}
.promo__desc{font-size:.87rem;line-height:1.45;color:var(--photo-ink-dim);margin:0 0 .85em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.promo__bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.promo__price{font-family:var(--serif);font-size:1.06rem;color:#fff;display:flex;align-items:baseline;gap:.3em;flex-wrap:wrap}
.promo__price b{font-size:1.42rem;font-weight:600;letter-spacing:.01em}
.promo__price i{font-style:normal;font-family:var(--sans);font-size:.6rem;letter-spacing:.11em;text-transform:uppercase;color:var(--photo-ink-faint)}
.promo__price s{color:var(--photo-ink-faint);font-size:.95rem}
.promo__sep{color:var(--photo-ink-faint);margin:0 .1em}
/* La promoción no se abre "en grande": la tarjeta ES la vista y este botón es la única
   salida (orden de Alan 11-ago-2026). La nota avisa que el precio viene cerrado. */
.promo__nota{
  font-family:var(--sans);font-size:.68rem;line-height:1.35;color:var(--photo-ink-faint);
  margin:.55em 0 .7em;display:flex;align-items:flex-start;gap:.4em;
}
.promo__nota::before{content:"i";flex:none;width:1.05em;height:1.05em;border-radius:50%;
  border:1px solid var(--photo-ink-faint);font-size:.62rem;line-height:1.05em;text-align:center;font-style:italic;margin-top:.1em}
.promo__btn{
  display:block;text-align:center;font-family:var(--sans);font-size:.72rem;letter-spacing:.13em;
  text-transform:uppercase;color:#2b0a12;background:linear-gradient(135deg,var(--gold-soft),var(--gold));
  border-radius:999px;padding:.85em 1.2em;font-weight:600;
  transition:filter .28s ease,transform .28s ease;
}
.promo--activa .promo__card:hover .promo__btn{filter:brightness(1.08)}
.promo:not(.promo--activa) .promo__card{cursor:pointer}
.promo:not(.promo--activa) .promo__txt{opacity:.9}

.promos__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:60;
  width:46px;height:46px;border-radius:50%;border:1px solid var(--line);
  background:rgba(255,255,255,.92);color:var(--wine-600);
  font-size:26px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 20px rgba(43,10,18,.16);
  transition:background .25s ease,color .25s ease,transform .25s ease;
}
.promos__nav:hover{background:var(--wine-600);color:#fff}
.promos__nav--prev{left:10px}
.promos__nav--next{right:10px}
@media (max-width:760px){.promos__nav{width:38px;height:38px;font-size:21px}.promos__nav--prev{left:6px}.promos__nav--next{right:6px}}

.promos__dots{display:flex;gap:8px;justify-content:center;margin-top:clamp(16px,2vw,24px)}
.promos__dots button{
  width:8px;height:8px;padding:0;border:none;border-radius:50%;cursor:pointer;
  background:var(--line);transition:width .3s ease,background .3s ease;
}
.promos__dots button.on{width:26px;border-radius:999px;background:var(--wine-600)}
.promos--sola .promos__nav,.promos--sola .promos__dots{display:none}

/* separador entre PROMOCIONES y las decoraciones a la medida */
.promos-sep{display:flex;align-items:center;gap:1rem;margin:clamp(26px,4vw,46px) auto clamp(22px,3vw,34px);max-width:1100px}
.promos-sep::before,.promos-sep::after{content:"";flex:1;height:1px;background:var(--line)}
.promos-sep span{font-family:var(--sans);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cream-faint);white-space:nowrap}

/* Celular · ajustes finos del texto de la tarjeta (van al final para ganarle a las reglas base) */
@media (max-width:760px){
  .promo__txt{padding:14px}
  .promo__where{font-size:.58rem;margin-bottom:.35em}
  .promo__name{font-size:1.32rem}
  .promo__desc{-webkit-line-clamp:1;font-size:.79rem;margin-bottom:.6em}
  .promo__bottom{align-items:center;gap:.5rem}
  .promo__price{font-size:.92rem}
  .promo__price b{font-size:1.18rem}
  .promo__price i{font-size:.54rem}
  .promo__nota{font-size:.6rem;margin:.4em 0 .55em}
  .promo__btn{font-size:.62rem;padding:.75em 1em;letter-spacing:.1em}
  /* dentro del configurador la tarjeta es chica: el texto se aprieta todavía más */
  .promos--cfg .promo__txt{padding:11px}
  .promos--cfg .promo__name{font-size:1.05rem}
  .promos--cfg .promo__desc{display:none}
  .promos--cfg .promo__nota{font-size:.55rem;margin:.3em 0 .45em}
  .promos--cfg .promo__price b{font-size:1rem}
  .promos--cfg .promo__btn{font-size:.56rem;padding:.62em .8em}
}

@media (prefers-reduced-motion:reduce){
  .promo{transition:none}
  .promo__img{transition:none}
}

/* promoción ELEGIDA dentro del configurador (en la página no aplica: ahí se abre la ficha) */
.promo__card.promo--elegida{outline:3px solid var(--wine-600);outline-offset:-3px}
.promo__card.promo--elegida::after{
  content:"✓";position:absolute;top:12px;right:12px;z-index:3;
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--wine-600);color:#fff;font-size:15px;font-weight:700;
  box-shadow:0 3px 10px rgba(43,10,18,.35);
}