/* ============================================================
   KETEZZA® — Design System
   Paleta extraída del feed de @ketezza
   ============================================================ */

:root {
  /* Marca */
  --pink:      #F0538C;
  --pink-deep: #D6246B;   /* para texto blanco encima (contraste AA) */
  --pink-soft: #FFD6E4;
  --rose:      #FF8FB1;
  --lilac:     #B565E8;
  --lilac-soft:#EBD9FA;
  --yellow:    #F5C542;
  --orange:    #F58A3C;
  --sage:      #8FB392;
  --cream:     #FBF3EA;
  --ink:       #14090E;
  --ink-60:    #5C4B53;
  --white:     #FFFFFF;
  --wa:        #25D366;
  --wa-deep:   #1DA851;

  /* Semánticos */
  --bg:        var(--cream);
  --surface:   var(--white);
  --fg:        var(--ink);
  --fg-muted:  var(--ink-60);
  --border:    #EFE2D8;
  --ring:      var(--pink);

  /* Espaciado (8pt) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  /* Radios */
  --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-full: 999px;

  /* Sombras */
  --sh-1: 0 1px 2px rgba(20,9,14,.06), 0 2px 8px rgba(20,9,14,.04);
  --sh-2: 0 4px 12px rgba(20,9,14,.08), 0 12px 32px rgba(20,9,14,.06);
  --sh-3: 0 12px 32px rgba(214,36,107,.14), 0 32px 64px rgba(20,9,14,.10);

  /* Motion */
  --e-out: cubic-bezier(.16,1,.3,1);
  --e-spring: cubic-bezier(.34,1.56,.64,1);
  --t-fast: 160ms; --t-mid: 260ms; --t-slow: 500ms;

  /* Layers */
  --z-nav: 40; --z-scrim: 60; --z-cart: 70; --z-toast: 80; --z-pre: 100;

  --maxw: 1200px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* clip (no hidden) para no crear un scroll container que rompa position:sticky */
  overflow-x: clip;
}

body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

body.is-locked { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* [hidden] debe ganarle a cualquier display de componente */
[hidden] { display: none !important; }

:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Wordmark (logo) ---------- */
.wordmark {
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  font-weight: 400;
  letter-spacing: .02em;
  text-transform: uppercase;
  transform: scaleX(.92);
  transform-origin: left center;
  display: inline-block;
}
.wordmark sup { font-size: .38em; vertical-align: super; letter-spacing: 0; }

/* ============================================================
   PRELOADER
   ============================================================ */
.preloader {
  position: fixed; inset: 0; z-index: var(--z-pre);
  display: grid; place-items: center;
  background: var(--cream);
  transition: opacity var(--t-slow) var(--e-out), visibility var(--t-slow);
}
.preloader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }

.preloader__inner { position: relative; text-align: center; padding: var(--s-5); }

.preloader__logo .wordmark {
  font-size: clamp(38px, 11vw, 76px);
  color: var(--ink);
  line-height: 1;
  animation: logoIn 900ms var(--e-spring) both;
}
@keyframes logoIn {
  from { opacity: 0; transform: scaleX(.92) translateY(18px); letter-spacing: .3em; }
  to   { opacity: 1; transform: scaleX(.92) translateY(0); letter-spacing: .02em; }
}

.preloader__tag {
  margin-top: var(--s-3);
  font-size: 13px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--pink-deep);
  animation: fadeUp 700ms 400ms var(--e-out) both;
}

.preloader__bar {
  margin: var(--s-5) auto 0; width: 180px; height: 3px;
  background: var(--pink-soft); border-radius: var(--r-full); overflow: hidden;
}
.preloader__bar i {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--pink), var(--lilac));
  border-radius: inherit;
  transition: width 200ms linear;
}

/* Pétalos orbitando el logo */
.preloader__petals { position: absolute; inset: -40px; pointer-events: none; }
.preloader__petals span {
  position: absolute; top: 50%; left: 50%;
  width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 60% 0 60% 0;
  animation: orbit 3.2s linear infinite;
}
.preloader__petals span:nth-child(1){ background: var(--pink);   animation-delay: 0s; }
.preloader__petals span:nth-child(2){ background: var(--lilac);  animation-delay: -.53s; }
.preloader__petals span:nth-child(3){ background: var(--yellow); animation-delay: -1.06s; }
.preloader__petals span:nth-child(4){ background: var(--orange); animation-delay: -1.6s; }
.preloader__petals span:nth-child(5){ background: var(--sage);   animation-delay: -2.13s; }
.preloader__petals span:nth-child(6){ background: var(--rose);   animation-delay: -2.66s; }
@keyframes orbit {
  from { transform: rotate(0deg) translateX(clamp(80px,22vw,130px)) rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) translateX(clamp(80px,22vw,130px)) rotate(-180deg) scale(1.5); }
  to   { transform: rotate(360deg) translateX(clamp(80px,22vw,130px)) rotate(-360deg) scale(1); }
}

@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  padding-top: max(var(--s-3), env(safe-area-inset-top));
  transition: background var(--t-mid) var(--e-out), box-shadow var(--t-mid), backdrop-filter var(--t-mid);
}
.nav.is-stuck {
  background: rgba(251,243,234,.92);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  box-shadow: var(--sh-1);
}

.nav__brand .wordmark { font-size: 22px; color: var(--ink); }
.nav:not(.is-stuck) .nav__brand .wordmark { color: var(--white); }

.nav__links { display: none; gap: var(--s-5); }
.nav__links a {
  font-size: 14px; font-weight: 600; position: relative; padding: var(--s-2) 0;
  transition: color var(--t-fast);
}
.nav:not(.is-stuck) .nav__links a { color: var(--white); }
.nav__links a::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform var(--t-mid) var(--e-out);
}
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }

.cart-btn {
  position: relative;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  background: var(--ink); color: var(--white);
  transition: transform var(--t-fast) var(--e-spring), background var(--t-fast);
}
.cart-btn svg { width: 20px; height: 20px; }
.cart-btn:hover { transform: scale(1.06); background: var(--pink-deep); }
.cart-btn:active { transform: scale(.94); }
.cart-btn.is-bump { animation: bump 400ms var(--e-spring); }
@keyframes bump { 0%,100%{transform:scale(1)} 40%{transform:scale(1.22)} }

.cart-btn__count {
  position: absolute; top: -2px; right: -2px;
  min-width: 20px; height: 20px; padding: 0 5px;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  background: var(--pink); color: var(--white);
  font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums;
  border: 2px solid var(--cream);
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid; align-items: center;
  overflow: hidden;
  background: linear-gradient(135deg, #2A0F1C 0%, #5C1738 40%, #8E2352 70%, #B8336A 100%);
  isolation: isolate;
}

/* Fondo animado (fallback si no hay hero.mp4) */
.hero::before {
  content: ''; position: absolute; inset: -20%;
  background:
    radial-gradient(closest-side, rgba(240,83,140,.55), transparent 70%) 15% 25%/60% 60% no-repeat,
    radial-gradient(closest-side, rgba(181,101,232,.45), transparent 70%) 85% 20%/55% 55% no-repeat,
    radial-gradient(closest-side, rgba(245,197,66,.30), transparent 70%) 75% 85%/50% 50% no-repeat,
    radial-gradient(closest-side, rgba(143,179,146,.28), transparent 70%) 10% 90%/50% 50% no-repeat;
  filter: blur(30px);
  animation: drift 22s ease-in-out infinite alternate;
  z-index: -3;
}
@keyframes drift {
  0%   { transform: translate3d(0,0,0) scale(1) rotate(0deg); }
  50%  { transform: translate3d(3%,-3%,0) scale(1.12) rotate(4deg); }
  100% { transform: translate3d(-3%,2%,0) scale(1.05) rotate(-3deg); }
}

.hero__video {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
  transition: opacity 800ms var(--e-out);
}
.hero__video.is-ready { opacity: 1; }

.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(20,9,14,.55) 0%, rgba(20,9,14,.25) 40%, rgba(20,9,14,.75) 100%);
}
.hero__glow {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 50% at 50% 55%, rgba(255,143,177,.18), transparent 70%);
  mix-blend-mode: screen;
}
/* width/height explícitos: canvas es un elemento reemplazado y con inset:0
   conservaría su ancho intrínseco (el atributo width) y desbordaría. */
.hero__canvas {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  width: 100%; height: 100%;
}

.hero__content {
  position: relative;
  width: 100%; max-width: var(--maxw);
  margin: 0 auto;
  padding: calc(var(--s-9) + 20px) var(--s-4) var(--s-8);
  color: var(--white);
  text-align: center;
}

.hero__eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-full);
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.hero__eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--wa);
  box-shadow: 0 0 0 0 rgba(37,211,102,.7);
  animation: pulse 2.2s infinite;
}
@keyframes pulse {
  70%  { box-shadow: 0 0 0 9px rgba(37,211,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}

.hero__title {
  margin: var(--s-5) 0 var(--s-4);
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  font-weight: 400;
  font-size: clamp(52px, 14vw, 132px);
  line-height: .92;
  letter-spacing: -.01em;
  text-transform: uppercase;
  text-wrap: balance;
}
.hero__title .hero__line { display: block; }
.hero__title em {
  font-style: normal;
  background: linear-gradient(100deg, var(--pink) 0%, var(--rose) 30%, var(--yellow) 60%, var(--lilac) 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: shine 7s ease-in-out infinite;
}
@keyframes shine { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }

.hero__sub {
  max-width: 46ch; margin: 0 auto;
  font-size: clamp(15px, 3.6vw, 19px);
  color: rgba(255,255,255,.86);
  text-wrap: pretty;
}

.hero__cta {
  margin-top: var(--s-6);
  display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center;
}

.hero__trust {
  margin-top: var(--s-7);
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); justify-content: center;
  font-size: 13px; color: rgba(255,255,255,.7);
}
.hero__trust strong { display: block; font-size: 20px; color: var(--white); font-weight: 800; }

.hero__scroll {
  position: absolute; left: 50%; bottom: max(var(--s-5), env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: 26px; height: 42px;
  border: 2px solid rgba(255,255,255,.4); border-radius: var(--r-full);
  display: grid; place-items: start center; padding-top: 7px;
}
.hero__scroll span {
  width: 4px; height: 8px; border-radius: var(--r-full); background: var(--white);
  animation: wheel 1.8s var(--e-out) infinite;
}
@keyframes wheel { 0%{opacity:0;transform:translateY(0)} 30%{opacity:1} 100%{opacity:0;transform:translateY(16px)} }

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee {
  background: var(--ink); color: var(--cream);
  padding: var(--s-3) 0; overflow: hidden;
  border-block: 3px solid var(--pink);
}
.marquee__track {
  display: flex; align-items: center; gap: var(--s-5);
  width: max-content;
  animation: slide 34s linear infinite;
}
.marquee__track span {
  font-family: 'Anton', sans-serif; font-size: 18px;
  text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
}
.marquee__track i { color: var(--pink); font-style: normal; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ============================================================
   SECTIONS
   ============================================================ */
.section {
  max-width: var(--maxw); margin: 0 auto;
  padding: var(--s-9) var(--s-4);
}
.section--alt {
  max-width: none;
  background: var(--white);
  border-block: 1px solid var(--border);
}
.section--alt > * { max-width: var(--maxw); margin-inline: auto; }

.section__head { margin-bottom: var(--s-7); }

.section__eyebrow {
  font-size: 12px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  color: var(--pink-deep); margin-bottom: var(--s-3);
}
.section__title {
  font-family: 'Anton', sans-serif; font-weight: 400;
  font-size: clamp(38px, 8vw, 68px);
  line-height: 1; text-transform: uppercase; letter-spacing: -.01em;
  text-wrap: balance;
}
.section__title em {
  font-style: normal;
  background: linear-gradient(100deg, var(--pink), var(--lilac));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.section__lead {
  margin-top: var(--s-4); max-width: 58ch;
  color: var(--fg-muted); font-size: 17px; text-wrap: pretty;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 48px; padding: 0 var(--s-5);
  border-radius: var(--r-full);
  font-size: 15px; font-weight: 700;
  cursor: pointer; white-space: nowrap;
  touch-action: manipulation;
  transition: transform var(--t-fast) var(--e-spring), box-shadow var(--t-mid), background var(--t-fast), opacity var(--t-fast);
}
.btn svg { width: 19px; height: 19px; flex: none; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.97); }

.btn--primary { background: var(--ink); color: var(--white); box-shadow: var(--sh-2); }
.btn--primary:hover { background: var(--pink-deep); box-shadow: var(--sh-3); }

.btn--wa { background: var(--wa-deep); color: var(--white); box-shadow: var(--sh-2); }
.btn--wa:hover { background: var(--wa); box-shadow: 0 12px 32px rgba(37,211,102,.35); }

.btn--ghost { background: var(--white); color: var(--ink); border: 2px solid var(--border); }
.btn--ghost:hover { border-color: var(--pink); color: var(--pink-deep); }

.btn--lg { min-height: 56px; padding: 0 var(--s-6); font-size: 16px; }
.btn--block { width: 100%; }
.btn[disabled], .btn.is-disabled { opacity: .45; pointer-events: none; }

/* ============================================================
   FILTERS
   ============================================================ */
.filters {
  display: flex; gap: var(--s-2); margin-bottom: var(--s-6);
  overflow-x: auto; scrollbar-width: none;
  padding-bottom: var(--s-2);
  -webkit-overflow-scrolling: touch;
}
.filters::-webkit-scrollbar { display: none; }

.chip {
  flex: none;
  min-height: 44px; padding: 0 var(--s-5);
  border-radius: var(--r-full);
  background: var(--white); border: 2px solid var(--border);
  font-size: 14px; font-weight: 700; color: var(--fg-muted);
  white-space: nowrap;
  transition: all var(--t-fast) var(--e-out);
}
.chip:hover { border-color: var(--pink); color: var(--pink-deep); }
.chip.is-active {
  background: var(--ink); border-color: var(--ink); color: var(--white);
}

/* ============================================================
   GRID + CARDS
   ============================================================ */
/* 160px => 2 columnas en móvil (343px útiles), 3-4 en desktop */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr));
  gap: var(--s-3);
}
.grid__empty { text-align: center; color: var(--fg-muted); padding: var(--s-8) 0; }

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transform-style: preserve-3d;
  transition: transform var(--t-mid) var(--e-out), box-shadow var(--t-mid), border-color var(--t-mid);
  will-change: transform;
}
.card:hover { box-shadow: var(--sh-3); border-color: var(--pink-soft); }
.card.is-out { opacity: .62; }

.card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  transform: translateZ(20px);
}
.card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--t-slow) var(--e-out);
}
.card:hover .card__media img { transform: scale(1.07); }

/* Placeholder cuando la foto todavía no existe */
.ph { position: relative; overflow: hidden; border-radius: inherit; }
.ph::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(closest-side, rgba(255,255,255,.7), transparent) 30% 30%/55% 55% no-repeat,
    radial-gradient(closest-side, rgba(255,255,255,.35), transparent) 75% 70%/45% 45% no-repeat,
    var(--ph-bg, var(--pink-soft));
}
.ph::after {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(20,9,14,.07) 1px, transparent 0);
  background-size: 14px 14px;
}
.ph--pink   { --ph-bg: linear-gradient(135deg, #FFD6E4, #F0538C); }
.ph--lilac  { --ph-bg: linear-gradient(135deg, #EBD9FA, #B565E8); }
.ph--yellow { --ph-bg: linear-gradient(135deg, #FFF0C2, #F5C542); }
.ph--orange { --ph-bg: linear-gradient(135deg, #FFE0C7, #F58A3C); }
.ph--sage   { --ph-bg: linear-gradient(135deg, #DCE9DD, #8FB392); }
.ph--cream  { --ph-bg: linear-gradient(135deg, #FFFDF8, #E8D9C5); }

.ph img { position: relative; z-index: 2; }

.ph__label {
  position: absolute; inset: auto 0 0 0; z-index: 1;
  padding: var(--s-2);
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  color: rgba(20,9,14,.5);
  background: rgba(255,255,255,.55);
  text-align: center;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}

.card__flag {
  position: absolute; top: var(--s-3); left: var(--s-3); z-index: 3;
  display: inline-flex; align-items: center;
  padding: 5px var(--s-3);
  border-radius: var(--r-full);
  background: var(--ink); color: var(--white);
  font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  /* Nunca invadir el chip de stock, sin importar qué texto se escriba en products.js */
  max-width: calc(100% - 84px);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card__flag--sale { background: var(--pink); }
.card__flag--out  { background: var(--ink-60); }

.card__stock {
  position: absolute; top: var(--s-3); right: var(--s-3); z-index: 3;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px var(--s-3);
  border-radius: var(--r-full);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: 11px; font-weight: 800;
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}
.card__stock i { width: 6px; height: 6px; border-radius: 50%; background: var(--sage); flex: none; }
/* En móvil la tarjeta mide ~163px: solo el número, sin la palabra */
.card__stock-w { display: none; }
@media (min-width: 768px) { .card__stock-w { display: inline; } }
.card__stock.is-low i  { background: var(--orange); }
.card__stock.is-low    { color: #A0522A; }
.card__stock.is-out i  { background: #C0392B; }
.card__stock.is-out    { color: #C0392B; }

.card__body {
  padding: var(--s-3);
  display: flex; flex-direction: column; gap: 6px;
  flex: 1;
  transform: translateZ(12px);
}
.card__name { font-size: 15px; font-weight: 800; line-height: 1.3; }
.card__desc { font-size: 12.5px; color: var(--fg-muted); line-height: 1.45; flex: 1; }

.card__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin-top: var(--s-1); }
.card__now  { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.card__was  { font-size: 12px; color: var(--fg-muted); text-decoration: line-through; font-variant-numeric: tabular-nums; }

.card__add {
  margin-top: var(--s-2);
  min-height: 44px; width: 100%;
  border-radius: var(--r-full);
  background: var(--ink); color: var(--white);
  font-size: 14px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  touch-action: manipulation;
  transition: background var(--t-fast), transform var(--t-fast) var(--e-spring);
}
.card__add svg { width: 17px; height: 17px; }
.card__add:hover { background: var(--pink-deep); }
.card__add:active { transform: scale(.96); }
.card__add[disabled] { background: var(--border); color: var(--fg-muted); pointer-events: none; }
.card__add.is-added { background: var(--wa-deep); }

/* ============================================================
   STEPS
   ============================================================ */
.steps {
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}
.step {
  position: relative;
  padding: var(--s-6) var(--s-5);
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--t-mid) var(--e-out), box-shadow var(--t-mid);
}
.step:hover { transform: translateY(-6px); box-shadow: var(--sh-2); }
.step::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--pink), var(--lilac));
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-slow) var(--e-out);
}
.step:hover::before { transform: scaleX(1); }
.step__n {
  font-family: 'Anton', sans-serif; font-size: 46px; line-height: 1;
  color: var(--pink-soft); display: block; margin-bottom: var(--s-3);
}
.step h3 { font-size: 19px; font-weight: 800; margin-bottom: var(--s-2); }
.step p  { font-size: 14px; color: var(--fg-muted); }

/* ============================================================
   SPLIT (talleres)
   ============================================================ */
.split { display: grid; gap: var(--s-7); align-items: center; }
.split__media .ph {
  aspect-ratio: 4 / 5;
  border-radius: var(--r-xl);
  box-shadow: var(--sh-3);
  transform-style: preserve-3d;
  transition: transform var(--t-mid) var(--e-out);
  will-change: transform;
}
.split__media img { width: 100%; height: 100%; object-fit: cover; }

.ticks { margin: var(--s-5) 0; display: grid; gap: var(--s-3); }
.ticks li {
  display: flex; align-items: center; gap: var(--s-3);
  font-size: 15px; font-weight: 600;
}
.ticks li::before {
  content: ''; flex: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--pink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat;
}

/* ============================================================
   CTA
   ============================================================ */
.cta {
  position: relative;
  margin: 0 var(--s-4) var(--s-8);
  padding: var(--s-9) var(--s-5);
  border-radius: var(--r-xl);
  background: linear-gradient(135deg, var(--ink) 0%, #4A1229 55%, var(--pink-deep) 100%);
  overflow: hidden;
  text-align: center;
}
.cta::before {
  content: ''; position: absolute; inset: -50%;
  background:
    radial-gradient(closest-side, rgba(181,101,232,.5), transparent) 20% 30%/50% 50% no-repeat,
    radial-gradient(closest-side, rgba(245,197,66,.3), transparent) 80% 70%/45% 45% no-repeat;
  filter: blur(40px);
  animation: drift 18s ease-in-out infinite alternate;
}
.cta__inner { position: relative; max-width: 640px; margin: 0 auto; color: var(--white); }
.cta h2 {
  font-family: 'Anton', sans-serif; font-weight: 400;
  font-size: clamp(34px, 8vw, 60px); line-height: 1;
  text-transform: uppercase; margin-bottom: var(--s-4);
  text-wrap: balance;
}
.cta h2 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--yellow), var(--rose));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.cta p { color: rgba(255,255,255,.82); margin-bottom: var(--s-6); text-wrap: pretty; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--ink); color: var(--cream);
  padding: var(--s-8) var(--s-4) calc(var(--s-6) + env(safe-area-inset-bottom));
  display: grid; gap: var(--s-6); justify-items: center; text-align: center;
}
.footer__brand .wordmark { font-size: 32px; color: var(--white); }
.footer__brand p { margin-top: var(--s-3); font-size: 14px; color: rgba(251,243,234,.6); }
.footer__links { display: flex; flex-wrap: wrap; gap: var(--s-5); justify-content: center; }
.footer__links a { font-size: 14px; font-weight: 600; transition: color var(--t-fast); }
.footer__links a:hover { color: var(--pink); }
.footer__copy { font-size: 12px; color: rgba(251,243,234,.4); }

/* ============================================================
   CARRITO
   ============================================================ */
.scrim {
  position: fixed; inset: 0; z-index: var(--z-scrim);
  background: rgba(20,9,14,.55);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; transition: opacity var(--t-mid) var(--e-out);
}
.scrim.is-open { opacity: 1; }

.cart {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--z-cart);
  width: min(420px, 100%);
  background: var(--cream);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--t-slow) var(--e-out);
  box-shadow: -20px 0 60px rgba(20,9,14,.2);
}
.cart.is-open { transform: none; }

.cart__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-4);
  padding-top: max(var(--s-4), env(safe-area-inset-top));
  border-bottom: 1px solid var(--border);
  background: var(--white);
  flex: none;
}
.cart__head h2 { font-family: 'Anton', sans-serif; font-weight: 400; font-size: 26px; text-transform: uppercase; }

.icon-btn {
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: var(--r-full);
  transition: background var(--t-fast);
}
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn:hover { background: var(--pink-soft); }

.cart__body { flex: 1; overflow-y: auto; padding: var(--s-4); display: grid; gap: var(--s-3); align-content: start; }

.cart-line {
  display: grid; grid-template-columns: 72px 1fr auto; gap: var(--s-3);
  align-items: center;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-3);
  animation: lineIn 300ms var(--e-out) both;
}
@keyframes lineIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
.cart-line.is-going { animation: lineOut 220ms var(--e-out) forwards; }
@keyframes lineOut { to { opacity: 0; transform: translateX(30px); height: 0; padding-block: 0; margin-bottom: -12px; } }

.cart-line__media { width: 72px; height: 72px; border-radius: var(--r-sm); overflow: hidden; flex: none; }
.cart-line__media img { width: 100%; height: 100%; object-fit: cover; }

.cart-line__info { min-width: 0; }
.cart-line__name { font-size: 14px; font-weight: 800; line-height: 1.3; margin-bottom: 2px; }
.cart-line__price { font-size: 13px; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.cart-line__max { font-size: 11px; color: var(--orange); font-weight: 700; margin-top: 2px; }

.cart-line__side { display: grid; gap: var(--s-2); justify-items: end; }

.qty {
  display: inline-flex; align-items: center;
  background: var(--cream); border: 1px solid var(--border);
  border-radius: var(--r-full); overflow: hidden;
}
.qty button {
  width: 32px; height: 32px; display: grid; place-items: center;
  font-size: 17px; font-weight: 800; color: var(--fg-muted);
  transition: background var(--t-fast), color var(--t-fast);
}
.qty button:hover { background: var(--pink-soft); color: var(--pink-deep); }
.qty button[disabled] { opacity: .3; pointer-events: none; }
.qty span {
  min-width: 28px; text-align: center;
  font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums;
}

.cart-line__del {
  font-size: 11px; font-weight: 700; color: var(--fg-muted);
  text-decoration: underline; text-underline-offset: 2px;
  padding: var(--s-1);
  transition: color var(--t-fast);
}
.cart-line__del:hover { color: #C0392B; }

.cart__empty {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s-3); padding: var(--s-6); text-align: center;
}
.cart__empty-art { font-size: 52px; animation: float 3.5s ease-in-out infinite; }
@keyframes float { 0%,100%{transform:translateY(0) rotate(-6deg)} 50%{transform:translateY(-12px) rotate(6deg)} }
.cart__empty p { font-family: 'Anton', sans-serif; font-size: 24px; text-transform: uppercase; }
.cart__empty span { font-size: 14px; color: var(--fg-muted); max-width: 30ch; }
.cart__empty .btn { margin-top: var(--s-3); }

.cart__foot {
  flex: none;
  padding: var(--s-4);
  padding-bottom: max(var(--s-4), env(safe-area-inset-bottom));
  background: var(--white);
  border-top: 1px solid var(--border);
  display: grid; gap: var(--s-2);
}
.cart__row { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; }
.cart__row strong { font-variant-numeric: tabular-nums; }
.cart__row--muted { color: var(--fg-muted); font-size: 13px; }
.cart__row--total {
  border-top: 1px solid var(--border);
  padding-top: var(--s-3); margin-top: var(--s-1);
  font-size: 16px; font-weight: 800;
}
.cart__row--total strong { font-size: 24px; font-family: 'Anton', sans-serif; font-weight: 400; }
.cart__foot .btn { margin-top: var(--s-2); }
.cart__note { font-size: 11px; color: var(--fg-muted); text-align: center; }

/* ============================================================
   TOAST
   ============================================================ */
.toast {
  position: fixed; z-index: var(--z-toast);
  left: 50%; bottom: calc(var(--s-5) + env(safe-area-inset-bottom));
  transform: translate(-50%, 150%);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-full);
  background: var(--ink); color: var(--white);
  font-size: 14px; font-weight: 700;
  box-shadow: var(--sh-3);
  transition: transform var(--t-mid) var(--e-spring);
  pointer-events: none;
  max-width: calc(100vw - 32px);
}
.toast.is-on { transform: translate(-50%, 0); }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal {
  opacity: 0;
  transition: opacity 700ms var(--e-out), transform 700ms var(--e-out);
  will-change: opacity, transform;
}
.reveal[data-reveal="left"]  { transform: translate3d(-48px, 0, 0); }
.reveal[data-reveal="right"] { transform: translate3d(48px, 0, 0); }
.reveal[data-reveal="up"]    { transform: translate3d(0, 36px, 0); }
.reveal.is-in { opacity: 1; transform: none; }

/* ============================================================
   BREAKPOINTS
   ============================================================ */
@media (min-width: 768px) {
  .nav { padding: var(--s-4) var(--s-6); }
  .nav__links { display: flex; }
  .section { padding-inline: var(--s-6); }
  .hero__content { padding-inline: var(--s-6); text-align: left; }
  .hero__sub, .hero__trust, .hero__cta { margin-inline: 0; justify-content: flex-start; }
  .hero__trust { justify-content: flex-start; }
  .grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
    gap: var(--s-5);
  }
  .card__body { padding: var(--s-4); }
  .card__name { font-size: 16px; }
  .card__now  { font-size: 20px; }
  .cta { margin-inline: var(--s-6); }
  .footer {
    grid-template-columns: 1fr auto;
    justify-items: start; text-align: left;
    align-items: center;
    padding-inline: var(--s-6);
  }
  .footer__copy { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--s-9); }
  .section { padding-block: 120px; }
}

/* ============================================================
   A11Y — Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .hero__canvas { display: none; }
}