/* ============================================================
   Armá tu cheesecake — hoja de estilos
   Los colores de marca se inyectan desde cheesecake.json ("tema")
   ============================================================ */

:root{
  --acento:#C6265E;
  --acento-suave:#F9DDE7;
  --fondo:#FDF7F2;
  --panel:#FFFFFF;
  --tinta:#2A1B22;
  --tinta-suave:#8A7480;
  --borde:#F0E3E9;
  --escenario-a:#FBE9DE;
  --escenario-b:#F6D9E4;
  --exito:#2E9E6B;

  --serif:'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:'Outfit', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:34px;
  --sombra-sm:0 1px 2px rgba(42,27,34,.06), 0 4px 12px rgba(42,27,34,.05);
  --sombra-md:0 2px 6px rgba(42,27,34,.06), 0 14px 40px rgba(42,27,34,.09);
  --sombra-lg:0 30px 70px -20px rgba(42,27,34,.28);
  --spring:cubic-bezier(.34,1.46,.5,1);
  --suave:cubic-bezier(.22,.61,.36,1);
  --topbar-h:68px;
}

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }

html,body{ height:100%; overflow-x:hidden; }

body{
  margin:0;
  font-family:var(--sans);
  color:var(--tinta);
  background:var(--fondo);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

button{ font:inherit; color:inherit; }
:focus-visible{ outline:3px solid color-mix(in srgb, var(--acento) 45%, white); outline-offset:2px; border-radius:6px; }

/* ── Fondo decorativo ───────────────────────────────────── */
.decor{ position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.decor__blob{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.55; }
.decor__blob--a{ width:46vw; height:46vw; left:-14vw; top:-12vw; background:var(--escenario-b); animation:flotar 22s ease-in-out infinite; }
.decor__blob--b{ width:38vw; height:38vw; right:-10vw; top:22vh; background:var(--escenario-a); animation:flotar 28s ease-in-out infinite reverse; }
.decor__blob--c{ width:30vw; height:30vw; left:24vw; bottom:-16vw; background:color-mix(in srgb, var(--acento-suave) 70%, white); animation:flotar 34s ease-in-out infinite; }
@keyframes flotar{ 0%,100%{ transform:translate3d(0,0,0) scale(1) } 50%{ transform:translate3d(3vw,-3vh,0) scale(1.08) } }

/* ── Topbar ─────────────────────────────────────────────── */
.topbar{
  position:sticky; top:0; z-index:6;
  height:var(--topbar-h);
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:0 clamp(14px,3vw,34px);
  border-bottom:1px solid var(--borde);
  background:color-mix(in srgb, var(--fondo) 78%, transparent);
  backdrop-filter:blur(14px);
}
.topbar__brand{ display:flex; align-items:center; gap:12px; min-width:0; }
.topbar__mark{
  font-size:24px; line-height:1;
  width:42px; height:42px; flex:none;
  display:grid; place-items:center;
  background:var(--panel); border:1px solid var(--borde);
  border-radius:14px; box-shadow:var(--sombra-sm);
}
.topbar__name{ display:block; font-family:var(--serif); font-size:20px; letter-spacing:-.01em; line-height:1.1; }
.topbar__tag{ display:block; font-size:12.5px; color:var(--tinta-suave); letter-spacing:.01em; }
.topbar__side{ display:flex; align-items:center; gap:10px; }
.topbar__ig{ font-size:13px; color:var(--tinta-suave); text-decoration:none; padding:6px 10px; border-radius:999px; transition:color .2s, background .2s; }
.topbar__ig:hover{ color:var(--acento); background:var(--acento-suave); }

/* ── Layout ─────────────────────────────────────────────── */
.builder{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(380px,460px);
  height:calc(100dvh - var(--topbar-h));
}

/* ══════════════════════════════════════════════════════════
   ESCENARIO
   ══════════════════════════════════════════════════════════ */
.stage{ position:relative; display:grid; place-items:center; padding:clamp(10px,2vw,28px); min-width:0; }
.stage__inner{
  position:relative;
  width:100%; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(10px,2vh,26px);
  border-radius:var(--r-xl);
  background:
    radial-gradient(90% 62% at 50% 4%, color-mix(in srgb,#fff 62%, transparent) 0%, transparent 68%),
    radial-gradient(80% 46% at 50% 104%, rgba(120,60,85,.16) 0%, transparent 70%),
    linear-gradient(168deg, var(--escenario-a) 0%, var(--escenario-b) 62%, color-mix(in srgb, var(--escenario-b) 84%, var(--acento)) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), var(--sombra-md);
  overflow:hidden;
}
.stage__spot{
  position:absolute; left:50%; top:-18%;
  width:90%; max-width:760px; aspect-ratio:1;
  transform:translateX(-50%);
  background:radial-gradient(circle, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 62%);
  pointer-events:none;
}

.cake-wrap{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  width:100%;
  flex:0 0 auto;
  min-height:160px;
}
/* la altura la fija el JS (alto real de la torta × escala) para que el
   bloque nunca se recorte ni deje aire de más */
.cake-scaler{
  position:relative; z-index:2;
  display:flex; align-items:flex-end; justify-content:center;
  transform:scale(var(--escala,1));
  transform-origin:50% 100%;
  transition:transform .7s var(--spring), height .55s var(--spring);
  will-change:transform;
}

/* ── La torta ───────────────────────────────────────────── */
.cake{
  --w:352px;
  --persp:.095;                       /* ry/rx: cuán "desde arriba" se mira */
  --ey:calc(var(--w) * var(--persp)); /* semieje vertical de la elipse */
  --pw:calc(var(--w) * 1.19);         /* ancho del plato */
  --sb:var(--alto-total, 0px);        /* base de la cara superior */
  position:relative;
  width:var(--w);
  /* + 2·ey de aire arriba para el domo y la cara superior */
  height:calc(var(--alto-total, 0px) + var(--ey) * 2 + 12px);
  transition:height .55s var(--spring);
}

/* plato: misma perspectiva que la torta (mismo ratio ry/rx) */
.cake__plate{
  position:absolute; z-index:0;
  left:calc((var(--w) - var(--pw)) / 2);
  bottom:calc(var(--ey) - var(--pw) * var(--persp));
  width:var(--pw); height:calc(var(--pw) * var(--persp) * 2);
  border-radius:50%;
  background:
    radial-gradient(closest-side, rgba(140,95,115,.10) 0%, rgba(140,95,115,.035) 56%, rgba(140,95,115,0) 74%),
    linear-gradient(178deg,#FFFFFF 0%,#FDFAFB 48%,#F5EBEF 78%,#E7D8DF 100%);
  box-shadow:inset 0 -4px 8px rgba(255,255,255,.85);
}
.cake__plate::after{      /* canto del plato */
  content:""; position:absolute; z-index:-1;
  left:0; right:0; top:7px; bottom:-7px;
  border-radius:50%;
  background:linear-gradient(180deg,#EADCE3 0%,#CDB2BF 60%,#B195A2 100%);
  box-shadow:0 10px 18px -6px rgba(90,40,60,.34);
}
/* guía punteada cuando todavía no hay ninguna capa */
.cake.is-empty .cake__plate::before{
  content:""; position:absolute; left:11%; right:11%; top:16%; bottom:16%;
  border:2px dashed color-mix(in srgb, var(--acento) 30%, transparent);
  border-radius:50%;
  animation:latir 3.4s ease-in-out infinite;
}
@keyframes latir{ 0%,100%{ opacity:.5 } 50%{ opacity:.95 } }
.cake.is-wobbling{ animation:tambalear .7s var(--suave); }
@keyframes tambalear{
  0%{ transform:rotate(0) } 22%{ transform:rotate(.85deg) }
  48%{ transform:rotate(-.62deg) } 74%{ transform:rotate(.28deg) } 100%{ transform:rotate(0) }
}

/* capas */
.cake__layers{ position:absolute; inset:0; }
.capa{
  position:absolute; left:0; right:0;
  bottom:var(--b);
  height:calc(var(--h) + var(--ey));
  /* sólo el borde inferior curva: así el domo de cada capa tapa el canto
     plano de la de abajo y la costura queda limpia en todo el ancho */
  border-radius:0 0 50% 50% / 0 0 var(--ey) var(--ey);
  transform-origin:50% 100%;
  background-color:var(--lat);
  background-image:
    var(--tex, none),
    linear-gradient(90deg,
      var(--som) 0%,
      var(--lat) 16%,
      color-mix(in srgb, var(--lat) 74%, white) 42%,
      var(--lat) 70%,
      var(--som) 100%);
  background-size:var(--texsize, auto), auto;
  box-shadow:inset 0 -8px 14px -6px rgba(0,0,0,.22);
  transition:bottom .55s var(--spring), height .4s var(--suave);
  z-index:var(--z,1);
}
.capa.is-entering{ animation:capaEntra .62s var(--suave) both; }
.capa.is-leaving{ animation:capaSale .34s var(--suave) both; pointer-events:none; }

@keyframes capaEntra{
  0%  { opacity:0; transform:translateY(-72px) scaleY(.28) scaleX(1.06); }
  55% { opacity:1; transform:translateY(0)     scaleY(1.14) scaleX(.965); }
  74% {            transform:translateY(0)     scaleY(.93)  scaleX(1.025); }
  88% {            transform:translateY(0)     scaleY(1.03) scaleX(.992); }
  100%{ opacity:1; transform:none; }
}
@keyframes capaSale{
  0%  { opacity:1; transform:none; }
  100%{ opacity:0; transform:scaleY(.1) scaleX(1.08); }
}

/* texturas de capa */
.capa[data-tex="miga"]{
  --tex:
    radial-gradient(circle at 32% 34%, rgba(0,0,0,.30) 1.7px, transparent 2.2px),
    radial-gradient(circle at 74% 68%, rgba(255,255,255,.26) 1.5px, transparent 2px);
  --texsize:15px 13px, 21px 17px;
}
.capa[data-tex="trozos"]{
  --tex:
    radial-gradient(ellipse at 28% 42%, rgba(0,0,0,.34) 3.4px, transparent 4px),
    radial-gradient(circle at 76% 24%, rgba(255,255,255,.22) 2.2px, transparent 2.8px);
  --texsize:34px 26px, 27px 23px;
}
.capa[data-tex="remolino"]{
  --tex:repeating-linear-gradient(-14deg,
    rgba(255,255,255,.10) 0 11px,
    rgba(0,0,0,.045) 11px 24px);
  --texsize:auto;
}
.capa[data-tex="veteado"]{
  --tex:
    radial-gradient(ellipse 55% 115% at 24% 42%, rgba(255,255,255,.20), transparent 72%),
    radial-gradient(ellipse 48% 125% at 70% 60%, rgba(0,0,0,.10), transparent 72%);
  --texsize:104px 100%, 86px 100%;
}
.capa[data-tex="burbujas"]{
  --tex:
    radial-gradient(circle at 40% 30%, rgba(255,255,255,.55) 3px, transparent 3.6px),
    radial-gradient(circle at 80% 70%, rgba(0,0,0,.08) 4px, transparent 4.6px);
  --texsize:26px 22px, 33px 28px;
}

/* cara superior */
.cake__surface{
  position:absolute; left:0; right:0;
  bottom:var(--sb,0px);
  height:calc(var(--ey) * 2);
  border-radius:50%;
  z-index:60;
  opacity:var(--sop,0);
  transition:bottom .55s var(--spring), opacity .3s;
}
.surface__face{
  position:absolute; inset:0; border-radius:50%;
  background:
    radial-gradient(130% 150% at 36% 20%,
      color-mix(in srgb, var(--top,#fff) 82%, white) 0%,
      var(--top,#fff) 46%,
      color-mix(in srgb, var(--top,#fff) 84%, black) 100%);
  box-shadow:inset 0 2px 6px rgba(255,255,255,.4), inset 0 -3px 10px rgba(0,0,0,.12);
}
.surface__sheen{
  position:absolute; left:14%; top:14%; width:44%; height:38%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.9), rgba(255,255,255,0) 68%);
  opacity:var(--brillo,.28);
  filter:blur(2px);
}

/* salsa */
.cake__sauce{
  position:absolute; left:0; right:0;
  bottom:var(--sb,0px);
  height:calc(var(--ey) * 2);
  z-index:70;
  pointer-events:none;
  transition:bottom .55s var(--spring);
}
.sauce__pool{
  position:absolute; left:3.5%; right:3.5%; top:6%; bottom:6%;
  border-radius:50%;
  background:
    radial-gradient(120% 150% at 38% 24%, var(--luz) 0%, var(--col) 55%, color-mix(in srgb, var(--col) 78%, black) 100%);
  box-shadow:inset 0 -2px 8px rgba(0,0,0,.28);
  transform-origin:50% 50%;
  animation:salsaCae .5s var(--spring) both;
}
@keyframes salsaCae{ 0%{ transform:scale(.15); opacity:0 } 60%{ transform:scale(1.07); opacity:1 } 100%{ transform:scale(1) } }

.sauce__drip{
  position:absolute;
  width:var(--dw); height:var(--dh);
  margin-left:calc(var(--dw) / -2);
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--col) 62%, black) 0%,
    var(--col) 30%,
    color-mix(in srgb, var(--col) 62%, var(--luz)) 52%,
    var(--col) 74%,
    color-mix(in srgb, var(--col) 58%, black) 100%);
  border-radius:0 0 999px 999px / 0 0 calc(var(--dh) * .72) calc(var(--dh) * .72);
  transform-origin:50% 0;
  animation:chorrear .75s cubic-bezier(.3,.9,.3,1) both;
  animation-delay:var(--d,0ms);
}
.sauce__drip::after{ /* ensanche donde la salsa se despega del borde */
  content:""; position:absolute; left:50%; top:-2px;
  width:calc(var(--dw) * 1.5); height:calc(var(--dw) * .9);
  transform:translateX(-50%);
  border-radius:50%;
  background:var(--col);
  opacity:.85;
}
@keyframes chorrear{ 0%{ transform:scaleY(0); opacity:.4 } 100%{ transform:scaleY(1); opacity:1 } }

/* toppings */
.cake__toppings{
  position:absolute; left:0; right:0;
  bottom:var(--sb,0px);
  height:calc(var(--ey) * 2);
  z-index:80;
  pointer-events:none;
  transition:bottom .55s var(--spring);
}
.topping{
  position:absolute;
  left:var(--x); top:var(--y);
  transform:translate(-50%,-50%) rotate(var(--rot));
  animation:toppingCae .68s var(--suave) both;
  animation-delay:var(--d,0ms);
  /* al sacar un topping los demás se reacomodan: que se deslicen, no que salten */
  transition:left .45s var(--suave), top .45s var(--suave);
}
.topping.is-leaving{ animation:toppingSale .26s ease-in both; }
.topping--emoji{
  font-size:var(--s);
  line-height:1;
  filter:drop-shadow(0 4px 3px rgba(60,20,35,.38));
}
.topping--punto{
  width:var(--s); height:var(--s);
  border-radius:50%;
  background:radial-gradient(circle at 32% 28%, var(--luz) 0%, var(--col) 62%, color-mix(in srgb, var(--col) 76%, black) 100%);
  box-shadow:0 3px 4px rgba(60,20,35,.32), inset 0 -1px 2px rgba(0,0,0,.25);
}
.topping--punto[data-forma="irregular"]{ border-radius:52% 44% 58% 40% / 46% 56% 42% 54%; }

@keyframes toppingCae{
  0%  { opacity:0; transform:translate(-50%,-50%) translateY(-300px) rotate(calc(var(--rot) - 80deg)) scale(.65); }
  45% { opacity:1; }
  64% { transform:translate(-50%,-50%) translateY(3px)  rotate(var(--rot)) scale(1.1,.86); }
  80% { transform:translate(-50%,-50%) translateY(-7px) rotate(var(--rot)) scale(.95,1.06); }
  92% { transform:translate(-50%,-50%) translateY(1px)  rotate(var(--rot)) scale(1.02,.98); }
  100%{ opacity:1; transform:translate(-50%,-50%) translateY(0) rotate(var(--rot)) scale(1); }
}
@keyframes toppingSale{
  to{ opacity:0; transform:translate(-50%,-50%) translateY(-26px) rotate(calc(var(--rot) + 40deg)) scale(.5); }
}

/* pie del stand (el plato vive dentro de .cake para compartir perspectiva) */
.stand{ position:relative; z-index:1; width:100%; flex:none; margin-top:calc(9px * var(--e,1)); }
.stand__shadow{
  position:absolute; left:50%; top:calc(-4px * var(--e,1)); transform:translateX(-50%);
  width:var(--ancho-sombra,340px); height:calc(30px * var(--e,1));
  background:radial-gradient(ellipse, rgba(90,40,60,.28) 0%, rgba(90,40,60,0) 70%);
  filter:blur(6px);
  transition:width .7s var(--spring);
}
.stand__neck{
  display:block; margin:0 auto;
  width:calc(42px * var(--e,1)); height:calc(40px * var(--e,1));
  background:linear-gradient(90deg,#A98A99,#FFFAFC 40%,#B295A3 100%);
  clip-path:polygon(20% 0,80% 0,100% 100%,0 100%);
}
.stand__foot{
  display:block; margin:calc(-6px * var(--e,1)) auto 0;
  width:calc(152px * var(--e,1)); height:calc(20px * var(--e,1));
  border-radius:50%;
  background:linear-gradient(180deg,#FDF7F9 0%,#DCC8D1 52%,#A98A99 100%);
  box-shadow:0 16px 26px -12px rgba(90,40,60,.55);
}

/* chispas al elegir */
.sparkles{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.sparkle{
  position:absolute; width:var(--s,8px); height:var(--s,8px);
  border-radius:50%; background:var(--c,#fff);
  animation:chispa var(--t,900ms) ease-out both;
  box-shadow:0 0 8px currentColor;
}
@keyframes chispa{
  0%{ opacity:0; transform:translate(0,0) scale(.3) }
  25%{ opacity:1 }
  100%{ opacity:0; transform:translate(var(--dx),var(--dy)) scale(1.1) }
}

.stage__caption{ text-align:center; flex:none; padding:0 20px 6px; max-width:560px; }
.stage__title{ margin:0; font-family:var(--serif); font-size:clamp(19px,2vw,25px); letter-spacing:-.01em; }
.stage__desc{ margin:5px 0 0; font-size:13.5px; color:color-mix(in srgb, var(--tinta) 62%, transparent); line-height:1.5; min-height:2.6em; }

/* ══════════════════════════════════════════════════════════
   PANEL
   ══════════════════════════════════════════════════════════ */
.panel{
  position:relative;
  display:flex; flex-direction:column;
  min-height:0;
  background:var(--panel);
  border-left:1px solid var(--borde);
  box-shadow:-20px 0 60px -40px rgba(42,27,34,.4);
}

/* stepper */
.stepper{
  display:flex; gap:6px;
  padding:14px clamp(14px,2vw,22px) 12px;
  overflow-x:auto;
  scrollbar-width:none;
  border-bottom:1px solid var(--borde);
  flex:none;
  mask-image:linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 26px), transparent 100%);
}
.stepper::-webkit-scrollbar{ display:none; }
.stepper__item{
  display:flex; align-items:center; gap:7px;
  flex:none;
  padding:7px 13px 7px 8px;
  border:1px solid transparent; border-radius:999px;
  background:transparent; cursor:pointer;
  font-size:13px; font-weight:500; color:var(--tinta-suave);
  white-space:nowrap;
  transition:background .22s, color .22s, border-color .22s;
}
.stepper__item:hover{ background:color-mix(in srgb, var(--acento-suave) 55%, white); color:var(--tinta); }
.stepper__num{
  width:22px; height:22px; flex:none;
  display:grid; place-items:center;
  border-radius:50%;
  background:color-mix(in srgb, var(--tinta-suave) 18%, white);
  color:var(--tinta-suave);
  font-size:11.5px; font-weight:600;
  transition:background .22s, color .22s, transform .3s var(--spring);
}
.stepper__item.is-done .stepper__num{ background:var(--exito); color:#fff; }
.stepper__item.is-done{ color:var(--tinta); }
.stepper__item.is-current{
  background:var(--acento-suave); color:var(--acento);
  border-color:color-mix(in srgb, var(--acento) 22%, transparent);
}
.stepper__item.is-current .stepper__num{ background:var(--acento); color:#fff; transform:scale(1.06); }

/* contenido del paso */
.panel__scroll{ flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain; padding:clamp(16px,2.4vw,26px); }
.panel__scroll::-webkit-scrollbar{ width:10px; }
.panel__scroll::-webkit-scrollbar-thumb{ background:var(--borde); border-radius:99px; border:3px solid var(--panel); }

.step{ animation:pasoEntra .34s var(--suave) both; }
@keyframes pasoEntra{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }

.step__head{ margin-bottom:16px; }
.step__eyebrow{ font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--acento); font-weight:600; }
.step__title{ margin:5px 0 0; font-family:var(--serif); font-size:clamp(23px,2.6vw,29px); letter-spacing:-.015em; }
.step__sub{ margin:7px 0 0; font-size:14px; line-height:1.55; color:var(--tinta-suave); }
.step__rule{ display:flex; align-items:center; gap:7px; margin-top:11px; font-size:12.5px; font-weight:500; color:var(--tinta-suave); }
.step__rule.is-bad{ color:var(--acento); }
.step__rule b{ color:var(--tinta); font-weight:600; }

/* opciones */
.opts{ display:grid; gap:9px; }
.opt{
  position:relative;
  display:flex; align-items:center; gap:13px;
  width:100%; min-height:64px;
  padding:11px 14px 11px 11px;
  border:1.5px solid var(--borde); border-radius:var(--r-md);
  background:var(--panel);
  text-align:left; cursor:pointer;
  transition:border-color .2s, background .2s, transform .18s var(--spring), box-shadow .2s;
}
.opt:hover{ border-color:color-mix(in srgb, var(--acento) 35%, var(--borde)); transform:translateY(-1px); box-shadow:var(--sombra-sm); }
.opt:active{ transform:translateY(0) scale(.995); }
.opt.is-on{
  border-color:var(--acento);
  background:color-mix(in srgb, var(--acento-suave) 42%, white);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--acento) 12%, transparent);
}
.opt.is-block{ opacity:.42; cursor:not-allowed; }
.opt.is-block:hover{ transform:none; border-color:var(--borde); box-shadow:none; }

.opt__swatch{
  position:relative;
  width:46px; height:46px; flex:none;
  border-radius:13px;
  display:grid; place-items:center;
  font-size:23px; line-height:1;
  background:var(--sw, #eee);
  box-shadow:inset 0 -3px 8px rgba(0,0,0,.16), inset 0 2px 4px rgba(255,255,255,.4), 0 2px 5px rgba(42,27,34,.12);
  overflow:hidden;
}
.opt__swatch[data-plain="1"]{ background:color-mix(in srgb, var(--acento-suave) 60%, white); box-shadow:none; }
.opt__swatch::after{
  content:""; position:absolute; left:8%; top:6%; width:52%; height:34%;
  border-radius:50%; background:rgba(255,255,255,.36); filter:blur(3px);
}
.opt__body{ flex:1 1 auto; min-width:0; }
.opt__name{ display:block; font-size:15px; font-weight:600; letter-spacing:-.005em; }
.opt__desc{ display:block; margin-top:2px; font-size:12.8px; color:var(--tinta-suave); line-height:1.4; }
.opt__price{ flex:none; font-size:13.5px; font-weight:600; color:var(--tinta-suave); text-align:right; white-space:nowrap; }
.opt.is-on .opt__price{ color:var(--acento); }
.opt__price small{ display:block; font-size:11px; font-weight:500; opacity:.75; }

.opt__badge{
  position:absolute; top:-8px; right:12px;
  padding:2.5px 9px; border-radius:999px;
  background:var(--acento); color:#fff;
  font-size:10.5px; font-weight:600; letter-spacing:.03em;
  box-shadow:0 3px 8px -2px color-mix(in srgb, var(--acento) 60%, transparent);
}
.opt__order{
  position:absolute; left:-7px; top:-7px;
  width:23px; height:23px; border-radius:50%;
  background:var(--acento); color:#fff;
  display:grid; place-items:center;
  font-size:11.5px; font-weight:700;
  box-shadow:0 2px 6px rgba(42,27,34,.25);
  animation:sello .3s var(--spring) both;
}
@keyframes sello{ from{ transform:scale(0) rotate(-25deg) } to{ transform:none } }

/* formulario */
.fields{ display:grid; gap:14px; }
.field label{ display:block; font-size:13px; font-weight:600; margin-bottom:6px; }
.field label span{ color:var(--acento); }
.field input,.field textarea{
  width:100%; padding:12px 14px;
  font:inherit; font-size:14.5px; color:var(--tinta);
  border:1.5px solid var(--borde); border-radius:var(--r-sm);
  background:color-mix(in srgb, var(--fondo) 55%, white);
  transition:border-color .2s, background .2s;
}
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--acento); background:#fff; }
.field textarea{ min-height:88px; resize:vertical; }

/* resumen */
.resumen{
  margin-top:22px; padding:18px;
  border:1.5px dashed color-mix(in srgb, var(--acento) 30%, var(--borde));
  border-radius:var(--r-lg);
  background:color-mix(in srgb, var(--acento-suave) 26%, white);
}
.resumen__title{ margin:0 0 12px; font-family:var(--serif); font-size:19px; display:flex; align-items:center; gap:8px; }
.resumen__row{ display:flex; gap:10px; padding:7px 0; border-bottom:1px dashed color-mix(in srgb, var(--tinta) 12%, transparent); font-size:13.5px; }
.resumen__row:last-of-type{ border-bottom:0; }
.resumen__k{ flex:none; width:104px; color:var(--tinta-suave); font-weight:500; }
.resumen__v{ flex:1 1 auto; font-weight:500; }
.resumen__v em{ font-style:normal; color:var(--tinta-suave); }
.resumen__total{ display:flex; justify-content:space-between; align-items:baseline; margin-top:13px; padding-top:12px; border-top:2px solid color-mix(in srgb, var(--acento) 25%, transparent); }
.resumen__total b{ font-family:var(--serif); font-size:25px; color:var(--acento); }
.resumen__falta{ margin:12px 0 0; padding:10px 13px; border-radius:var(--r-sm); background:color-mix(in srgb, var(--acento) 10%, white); color:var(--acento); font-size:13px; font-weight:500; }

/* pie del panel */
.panel__foot{
  flex:none;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px;
  padding:13px clamp(14px,2vw,22px);
  padding-bottom:max(13px, env(safe-area-inset-bottom));
  border-top:1px solid var(--borde);
  background:color-mix(in srgb, var(--panel) 92%, transparent);
  backdrop-filter:blur(10px);
}
.total{ display:flex; flex-direction:column; line-height:1.15; }
.total__label{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-suave); font-weight:600; }
.total__value{ font-family:var(--serif); font-size:23px; letter-spacing:-.01em; }
.total__value.is-bump{ animation:precioSube .45s var(--spring); }
@keyframes precioSube{ 0%{ transform:scale(1) } 40%{ transform:scale(1.13); color:var(--acento) } 100%{ transform:scale(1) } }

/* botones */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:46px; padding:0 20px;
  border:0; border-radius:999px;
  font-size:14.5px; font-weight:600; letter-spacing:-.005em;
  cursor:pointer;
  transition:transform .18s var(--spring), box-shadow .2s, background .2s, opacity .2s;
}
.btn:active{ transform:scale(.97); }
.btn--sm{ min-height:36px; padding:0 14px; font-size:13px; }
.btn--ghost{ background:transparent; border:1.5px solid var(--borde); color:var(--tinta-suave); min-width:46px; padding:0 14px; }
.btn--ghost:hover{ border-color:var(--acento); color:var(--acento); }
.btn--primary{ background:var(--acento); color:#fff; box-shadow:0 6px 18px -6px color-mix(in srgb, var(--acento) 75%, transparent); }
.btn--primary:hover{ box-shadow:0 10px 26px -8px color-mix(in srgb, var(--acento) 85%, transparent); transform:translateY(-1px); }
.btn--wa{ background:#25D366; color:#0B3D22; box-shadow:0 6px 20px -6px rgba(37,211,102,.8); }
.btn--wa:hover{ background:#20BD5A; color:#fff; transform:translateY(-1px); }
.btn[disabled]{ opacity:.45; pointer-events:none; }

/* ── Boot / error ───────────────────────────────────────── */
.boot{ position:fixed; inset:0; z-index:50; display:grid; place-items:center; background:var(--fondo); transition:opacity .4s; }
.boot[hidden]{ display:none; }
.boot.is-gone{ opacity:0; pointer-events:none; }
.boot__card{ max-width:520px; padding:34px; text-align:center; }
.boot__spinner{
  width:44px; height:44px; margin:0 auto 20px;
  border:3px solid var(--acento-suave); border-top-color:var(--acento);
  border-radius:50%; animation:girar .8s linear infinite;
}
@keyframes girar{ to{ transform:rotate(360deg) } }
.boot__title{ font-family:var(--serif); font-size:24px; margin:0 0 8px; }
.boot__text{ margin:0; color:var(--tinta-suave); font-size:14.5px; line-height:1.6; }
.boot__text code{ background:var(--acento-suave); padding:2px 6px; border-radius:5px; font-size:13px; }
.boot__hint{
  margin:18px 0 0; padding:14px 16px; text-align:left;
  background:#2A1B22; color:#F6E7EE;
  border-radius:var(--r-sm); font-size:12.5px; line-height:1.7;
  white-space:pre-wrap; word-break:break-word;
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */
@media (max-width:1040px){
  .builder{ grid-template-columns:minmax(0,1fr); height:auto; min-height:calc(100dvh - var(--topbar-h)); }
  .stage{ position:sticky; top:var(--topbar-h); z-index:3; height:46dvh; min-height:310px; padding:8px; }
  .stage__inner{ gap:8px; border-radius:var(--r-lg); }
  .stage__caption{ padding-bottom:2px; }
  .stage__desc{ min-height:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .cake{ --w:238px; }
  .cake-wrap{ padding-top:10px; }
  .stand__plate{ height:17px; }
  .stand__neck{ height:26px; }
  .stand__foot{ width:104px; height:13px; }
  .panel{ border-left:0; border-top:1px solid var(--borde); box-shadow:none; }
  .panel__scroll{ overflow:visible; padding-bottom:20px; }
  .panel__foot{
    position:sticky; bottom:0; z-index:4;
    box-shadow:0 -8px 30px -18px rgba(42,27,34,.5);
  }
  .stepper{ position:sticky; top:calc(var(--topbar-h) + 46dvh); z-index:3; background:var(--panel); }
}
@media (max-width:560px){
  :root{ --topbar-h:60px; }
  .topbar__ig{ display:none; }
  .topbar__tag{ display:none; }
  .cake{ --w:212px; }
  .stage{ height:42dvh; min-height:270px; }
  .stepper{ top:calc(var(--topbar-h) + 42dvh); }

  /* Tipografía más chica: entran más opciones por pantalla y se elige más rápido.
     Los targets táctiles siguen arriba de 44px. */
  .stepper__item{ font-size:12.5px; padding:6px 11px 6px 7px; }
  .stepper__num{ width:19px; height:19px; font-size:10.5px; }

  .panel__scroll{ padding:14px 14px 18px; }
  .step__head{ margin-bottom:12px; }
  .step__eyebrow{ font-size:10.5px; letter-spacing:.11em; }
  /* line-height explícito: el emoji del título desborda la caja y pisa el subtítulo */
  .step__title{ font-size:20px; margin-top:3px; line-height:1.4; }
  .step__sub{ font-size:12.5px; margin-top:7px; }
  .step__rule{ font-size:11.5px; margin-top:9px; }

  .opts{ gap:7px; }
  .opt{ min-height:50px; padding:8px 12px 8px 8px; gap:10px; border-radius:13px; }
  .opt__desc{ display:none; }
  .opt__swatch{ width:36px; height:36px; border-radius:10px; font-size:18px; }
  .opt__name{ font-size:13.5px; }
  .opt__price{ font-size:12.5px; }
  .opt__badge{ font-size:9.5px; padding:2px 7px; top:-7px; }
  .opt__order{ width:19px; height:19px; font-size:10px; left:-5px; top:-5px; }

  /* Los inputs van a 16px a propósito: por debajo de eso iOS hace zoom solo
     al enfocarlos y descoloca toda la pantalla. */
  .field label{ font-size:12.5px; margin-bottom:5px; }
  .field input,.field textarea{ font-size:16px; padding:10px 12px; }
  .field textarea{ min-height:74px; }

  .resumen{ padding:15px; margin-top:18px; }
  .resumen__title{ font-size:17px; }
  .resumen__row{ font-size:12.5px; padding:6px 0; }
  .resumen__k{ width:84px; }
  .resumen__total b{ font-size:22px; }

  .panel__foot{ gap:9px; padding:10px 14px; padding-bottom:max(10px, env(safe-area-inset-bottom)); }
  .total__label{ font-size:10px; }
  .total__value{ font-size:19px; }
  .btn{ min-height:44px; }
  .btn--primary,.btn--wa{ padding:0 15px; font-size:13.5px; }
  .btn--ghost{ min-width:44px; padding:0 11px; }
}

/* ── Accesibilidad: menos movimiento ────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.06s !important;
  }
  .decor__blob{ animation:none !important; }
}