/* ===================== VIAZZO — Canastas navideñas =====================
   Landing de temporada. Hereda tokens y átomos de styles.css (.btn, .eyebrow,
   .faq-*, .cta-final, footer, wa-float). Acá solo lo propio de la landing. */
:root{
  --gold:#D9B26A; --gold-deep:#B8893A; --gold-soft:#F6ECD6;
  --xmas-red:#C82020;
}

/* ---------- Hero ---------- */
.xm-hero{position:relative; overflow:hidden; color:#fff;
  background:
    radial-gradient(70% 90% at 78% 30%, rgba(43,82,197,.45), transparent 62%),
    radial-gradient(60% 80% at 10% 110%, rgba(217,178,106,.16), transparent 60%),
    linear-gradient(165deg, var(--navy-900), var(--navy-950));
  padding-block:clamp(2.4rem,6vw,4.6rem) clamp(3rem,7vw,5.4rem)}
/* Destellos: puntos dorados fijos, sin imágenes ni animación costosa */
.xm-hero::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:.55;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%, #fff 60%, transparent),
    radial-gradient(1.2px 1.2px at 28% 64%, var(--gold) 60%, transparent),
    radial-gradient(1.8px 1.8px at 46% 12%, #fff 60%, transparent),
    radial-gradient(1.2px 1.2px at 64% 82%, #fff 60%, transparent),
    radial-gradient(1.6px 1.6px at 88% 14%, var(--gold) 60%, transparent),
    radial-gradient(1.2px 1.2px at 94% 58%, #fff 60%, transparent),
    radial-gradient(1.4px 1.4px at 6% 86%, var(--gold) 60%, transparent),
    radial-gradient(1.2px 1.2px at 56% 40%, #fff 60%, transparent)}
.xm-hero-grid{position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.6rem,4vw,3.6rem);
  align-items:center}
.xm-hero .eyebrow{color:var(--gold)}
.xm-hero .eyebrow .swoosh-mini{filter:brightness(0) invert(1)}
.xm-hero h1{color:#fff; font-size:clamp(2.3rem,5vw,4rem)}
.xm-hero h1 em{color:var(--gold)}
.xm-hero .lead{font-size:clamp(1.02rem,1.3vw,1.15rem); color:rgba(255,255,255,.82); max-width:50ch}
.xm-hero .lead strong{color:#fff}
.xm-hero-cta{display:flex; flex-wrap:wrap; gap:.9rem; margin-top:1.6rem}
.btn-ghost-light{border-color:rgba(255,255,255,.55); color:#fff; background:transparent}
.btn-ghost-light:hover{background:rgba(255,255,255,.1); border-color:#fff}
.xm-hero .hero-proof li{color:rgba(255,255,255,.8)}
.xm-hero .hero-proof li::before{background:var(--gold)}

.xm-hero-art{position:relative; aspect-ratio:1/0.82}
.xm-hero-art img{position:absolute; height:auto; filter:drop-shadow(0 26px 34px rgba(0,0,0,.45))}
.xm-hero-art .a1{width:74%; right:0; top:2%}
.xm-hero-art .a2{width:62%; left:0; bottom:0}
.xm-hero-art::after{content:""; position:absolute; left:8%; right:4%; bottom:-2%; height:16%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(0,0,0,.4), transparent); z-index:-1}

/* Sello de reserva anticipada */
.xm-seal{position:absolute; left:46%; top:-4%; z-index:2; width:clamp(112px,11vw,140px); aspect-ratio:1;
  border-radius:50%; display:grid; place-content:center; text-align:center; color:var(--navy-950);
  background:radial-gradient(circle at 35% 30%, #F3DDA8, var(--gold) 55%, var(--gold-deep));
  box-shadow:0 14px 30px -10px rgba(0,0,0,.55), inset 0 0 0 4px rgba(255,255,255,.35);
  rotate:-10deg; line-height:1.05}
.xm-seal b{font-family:var(--font-d); font-size:clamp(2rem,3.2vw,2.6rem); font-weight:700; display:block}
.xm-seal span{font-size:.62rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase}

/* ---------- Banda de beneficios ---------- */
.xm-perks{background:#fff; border-bottom:1px solid var(--line)}
/* Columnas implícitas: si vence la reserva anticipada y se oculta esa card, las otras 3 ocupan el ancho */
.xm-perks-grid{display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:0}
[data-until][hidden]{display:none}
.xm-perk{padding:1.6rem 1.4rem; display:flex; gap:.9rem; align-items:flex-start}
.xm-perk + .xm-perk{border-left:2px dashed var(--line)}
.xm-perk-ico{flex:none; width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background:var(--gold-soft); color:var(--gold-deep); font-size:1.25rem}
.xm-perk b{display:block; font-size:.98rem; color:var(--navy-900); line-height:1.25; margin-bottom:.2rem}
.xm-perk p{margin:0; font-size:.88rem; color:var(--ink-soft); line-height:1.45}

/* ---------- Catálogo ---------- */
.xm-catalog{padding:clamp(3.5rem,7vw,6rem) 0}
.xm-catalog h2 em{color:var(--crimson)}
.xm-catalog-intro{max-width:62ch; margin-inline:auto; color:var(--ink-soft)}
.xm-filters{display:flex; flex-wrap:wrap; justify-content:center; gap:.55rem; margin:2rem 0 2.4rem}
.xm-chip{font:inherit; font-weight:700; font-size:.9rem; padding:.55rem 1.1rem; border-radius:100px; cursor:pointer;
  border:2px solid var(--line); background:#fff; color:var(--navy-700);
  transition:background .2s ease, border-color .2s ease, color .2s ease}
.xm-chip:hover{border-color:var(--navy-700)}
.xm-chip[aria-pressed="true"]{background:var(--navy-900); border-color:var(--navy-900); color:#fff}

.xm-line{margin-top:3rem}
.xm-line:first-of-type{margin-top:0}
.xm-line[hidden]{display:none}
.xm-line-head{display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap; margin-bottom:1.3rem;
  padding-bottom:.8rem; border-bottom:2px solid var(--line)}
.xm-line-head h3{margin:0; font-size:clamp(1.4rem,2.4vw,1.9rem)}
.xm-line-head p{margin:0; color:var(--ink-soft); font-size:.95rem}

.xm-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem}
.xm-card{position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease-out), box-shadow .3s ease}
.xm-card:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.xm-card-media{position:relative; aspect-ratio:4/3;
  background:
    radial-gradient(80% 70% at 50% 40%, rgba(43,82,197,.5), transparent 70%),
    linear-gradient(165deg, var(--navy-900), var(--navy-950))}
.xm-card-media img{position:absolute; inset:2.2rem 1.1rem .6rem; width:calc(100% - 2.2rem); height:calc(100% - 2.8rem); object-fit:contain; filter:drop-shadow(0 14px 18px rgba(0,0,0,.4));
  transition:transform .4s var(--ease-out)}
.xm-card:hover .xm-card-media img{transform:scale(1.03)}
.xm-badge{position:absolute; left:12px; top:12px; z-index:1; font-size:.66rem; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; padding:.32rem .65rem; border-radius:100px; background:var(--gold); color:var(--navy-950)}
.xm-card-body{display:flex; flex-direction:column; flex:1; padding:1.2rem 1.3rem 1.3rem}
.xm-card-body h4{font-family:var(--font-d); font-size:1.45rem; font-weight:600; color:var(--navy-900); margin:0 0 .15rem;
  line-height:1.1}
.xm-count{font-size:.8rem; font-weight:700; color:var(--blue-mid); margin:0 0 .8rem}
.xm-items{list-style:none; padding:0; margin:0 0 1.2rem; font-size:.88rem; line-height:1.35}
.xm-items li{display:flex; align-items:baseline; gap:.4rem; padding:.28rem 0}
.xm-items li + li{border-top:1px dotted var(--line)}
.xm-items .n{flex:1}
.xm-items .q{flex:none; font-weight:700; color:var(--navy-700); font-size:.8rem; white-space:nowrap}
.xm-items .box{color:var(--gold-deep); font-weight:700}
.xm-card .btn{margin-top:auto; justify-content:center; width:100%}

.xm-note{margin:2.4rem auto 0; text-align:center; font-size:.82rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-soft)}

/* ---------- Personalización ---------- */
.xm-custom{padding:clamp(3.5rem,7vw,6rem) 0; background:var(--paper-2)}
.xm-custom-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(1.6rem,4vw,3.6rem); align-items:center}
.xm-custom-art{position:relative; border-radius:var(--r); aspect-ratio:1; display:grid; place-items:center;
  background:
    radial-gradient(70% 60% at 50% 45%, #fff, transparent 70%),
    linear-gradient(160deg, var(--gold-soft), #EADBB8)}
.xm-custom-art img{width:62%; height:auto; filter:drop-shadow(0 26px 26px rgba(80,50,10,.3))}
.xm-custom h2 em{color:var(--xmas-red)}
.xm-custom-opts{display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:1.6rem 0}
.xm-opt{background:#fff; border:1px solid var(--line); border-radius:16px; padding:1.1rem 1.2rem}
.xm-opt b{display:block; color:var(--navy-900); margin-bottom:.45rem}
.xm-opt ul{list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.4rem}
.xm-opt li{font-size:.8rem; font-weight:700; padding:.25rem .6rem; border-radius:100px; background:var(--gold-soft);
  color:var(--gold-deep)}

/* ---------- Pasos ---------- */
.xm-steps{padding:clamp(3.5rem,7vw,6rem) 0}
.xm-steps h2 em{color:var(--crimson)}
.xm-steps-grid{list-style:none; padding:0; margin:2.2rem 0 0; display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem;
  counter-reset:s}
.xm-steps-grid li{counter-increment:s; background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:1.4rem 1.3rem}
.xm-steps-grid li::before{content:counter(s, decimal-leading-zero); display:block; font-family:var(--font-d);
  font-size:2rem; font-weight:700; color:var(--gold-deep); line-height:1; margin-bottom:.6rem}
.xm-steps-grid b{display:block; color:var(--navy-900); margin-bottom:.3rem}
.xm-steps-grid p{margin:0; font-size:.92rem; color:var(--ink-soft)}

.cta-final h2 em.gold{color:var(--gold)}

/* ---------- Responsive ---------- */
@media (max-width:1020px){
  .xm-grid{grid-template-columns:1fr 1fr}
  .xm-perks-grid{grid-auto-flow:row; grid-template-columns:1fr 1fr}
  .xm-perk:nth-child(3){border-left:0}
  .xm-perk:nth-child(n+3){border-top:2px dashed var(--line)}
  .xm-steps-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .xm-hero-grid, .xm-custom-grid{grid-template-columns:1fr}
  .xm-hero-art{max-width:520px; width:100%; margin-inline:auto}
  .xm-custom-art{max-width:420px; width:100%; margin-inline:auto}
}
@media (max-width:600px){
  .xm-grid, .xm-perks-grid, .xm-steps-grid, .xm-custom-opts{grid-template-columns:1fr}
  .xm-perk + .xm-perk{border-left:0; border-top:2px dashed var(--line)}
  .xm-hero-cta .btn{width:100%; justify-content:center}
  .xm-seal{left:auto; right:0; top:-6%}
}
@media (prefers-reduced-motion:reduce){
  .xm-card, .xm-card-media img{transition:none}
}