/* ============================================================
   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}

/* 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}

/* ============================================================
   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: título/subtítulo arriba, CTA SIEMPRE pegado al borde inferior real
   de la pantalla (position:absolute, no depende de cuánto texto haya arriba —
   feedback Fani S92: los quería "hasta abajo, pegados al fondo"). Solo móvil — desktop intacto.
   ⚠️ Ojo: .hero__cta es una clase COMPARTIDA con el subhero de noviazgo/matrimonio/citas
   (S92: por esto mismo se descubrió tapando el título "Noviazgo" dorado) — SIEMPRE
   escopar estas reglas con ".hero " (el hero principal del index), NUNCA ".hero__cta" solo. */
@media(max-width:680px){
  .hero{align-items:flex-start}
  .hero .hero__inner{padding-top:12vh;padding-bottom:calc(96px + 6vh);text-align:center}
  /* centrado EXPLÍCITO y redundante (S92 ronda 2 — Fani lo vio corrido a la izquierda):
     display:flex + align-items:center + justify-content:center en el contenedor Y en
     cada botón, más margin-inline:auto por si algún ancestro pierde el text-align. */
  .hero .hero__cta{position:absolute;left:0;right:0;bottom:5vh;margin:0 auto;padding-inline:clamp(20px,6vw,32px);z-index:3;
    display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%}
  .hero .hero__cta .btn{width:100%;max-width:400px;margin-inline:auto;display:flex;align-items:center;justify-content:center}
}
@media(max-width:680px) and (max-height:700px){
  .hero .hero__inner{padding-top:9vh;padding-bottom:calc(90px + 4vh)}
  .hero .hero__cta{bottom:3.5vh}
}

/* ============================================================
   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}

@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: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}
}