/* ============================================================
   TORMUND v3 — app de catálogo
   Portado del prototipo "Tormund Movil.dc.html" (Claude Design).
   HTML/CSS/JS puros, sin build. Mobile first; en escritorio la app se centra
   en una columna, que es como está diseñada (barra de pestañas abajo, hojas
   que suben). No se inventa un layout de escritorio que el diseño no define.
   ============================================================ */

:root{
  --negro:      #07070A;
  --panel:      #0C0C10;
  --panel-alto: #101014;

  --oro:        #C9A86B;
  --oro-claro:  #EBD9AE;
  --oro-hondo:  #8C6F3E;
  --oro-linea:  rgba(201,168,107,.28);

  --texto:      #EFE9DE;
  --texto-2:    #B8B2A9;
  --tenue:      #97918A;
  --apagado:    #6B6660;
  --fantasma:   #4E4A45;
  --borde:      rgba(255,255,255,.07);

  --wa:         #25D366;

  --metal:      linear-gradient(180deg,#FFF8E7 0%,#EBD9AE 26%,#C9A86B 50%,#8C6F3E 64%,#E2C892 86%,#FFF6E2 100%);
  --oro-boton:  linear-gradient(160deg,#E4CB94,#C9A86B 45%,#A98849);
  --curva:      cubic-bezier(.22,.61,.36,1);

  --tope-alto:  66px;
  --tabs-alto:  74px;

  /* Las tiñe cada producto al vuelo. */
  --acento: #C9A86B;
  --halo:   rgba(201,168,107,.2);
}

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

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:radial-gradient(110% 70% at 50% 0%,#141118 0%,#08080B 62%) fixed;
  color:var(--texto);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
body.sin-scroll{ overflow:hidden; }

img{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
a{ color:var(--oro); text-decoration:none; }
h1,h2,h3{ margin:0; font-family:Cinzel,serif; font-weight:700; line-height:1.15; }
p{ margin:0; }

svg{ width:22px; height:22px; flex:none;
     fill:none; stroke:currentColor; stroke-width:1.4;
     stroke-linecap:round; stroke-linejoin:round; }
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }

/* Barras de desplazamiento ocultas: es una app, no un documento. */
.oculta-barra{ scrollbar-width:none; -ms-overflow-style:none; }
.oculta-barra::-webkit-scrollbar{ width:0; height:0; }

::selection{ background:var(--oro); color:#100C05; }
:focus-visible{ outline:2px solid var(--oro); outline-offset:2px; border-radius:4px; }

.metal{ background:var(--metal); -webkit-background-clip:text; background-clip:text; color:transparent; }
.display{ font-family:'Cinzel Decorative',Cinzel,serif; }


/* ---------- Armazón ---------- */
.app{
  position:relative;
  min-height:100dvh;
  max-width:520px; margin:0 auto;
  background:var(--negro);
  overflow:hidden;
}

/* Aviso de precios/WhatsApp sin confirmar. Se va solo cuando se confirmen. */
.aviso{
  position:relative; z-index:60;
  padding:8px 14px;
  background:linear-gradient(90deg,#4A3A12,#6B5320 50%,#4A3A12);
  border-bottom:1px solid rgba(201,168,107,.3);
  color:#F2E4BE; font-size:11.5px; line-height:1.45; text-align:center;
}

.tope{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:11px;
  padding:12px 16px;
  background:rgba(7,7,10,.94);
  backdrop-filter:blur(14px);
}
.tope__emblema{
  width:42px; height:42px; object-fit:contain; padding:5px; border-radius:50%;
  border:1px solid var(--oro-linea);
  background:radial-gradient(circle at 50% 35%,#17171E,#0A0A0E 70%);
}
.tope__texto{ display:flex; flex-direction:column; margin-right:auto; min-width:0; }
.tope__marca{
  font-family:Cinzel,serif; font-weight:800; font-size:17px;
  letter-spacing:.24em; line-height:1.1;
}
.tope__sello{
  color:var(--oro); font-size:7.5px; letter-spacing:.32em;
  text-transform:uppercase; line-height:1.7;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tope__carrito{
  position:relative; display:grid; place-items:center;
  width:42px; height:42px; flex:none; border-radius:50%;
  border:1px solid var(--oro-linea); background:rgba(255,255,255,.02);
}
.tope__carrito svg{ width:21px; height:21px; }
.contador{
  position:absolute; top:-5px; right:-5px;
  min-width:20px; height:20px; padding:0 5px;
  display:grid; place-items:center; border-radius:11px;
  background:linear-gradient(160deg,#E4CB94,#B9975B); color:#140F06;
  font-size:11px; font-weight:700; line-height:1;
  box-shadow:0 3px 10px -3px rgba(201,168,107,.9);
}
.contador.brinca{ animation:brinco .42s var(--curva); }
@keyframes brinco{ 0%{transform:scale(1)} 40%{transform:scale(1.5)} 100%{transform:scale(1)} }

.vista{ padding-bottom:calc(var(--tabs-alto) + 26px + env(safe-area-inset-bottom)); }
.pantalla[hidden]{ display:none; }
.pantalla{ animation:entra .34s var(--curva); }
@keyframes entra{ from{ opacity:0; transform:translateY(12px) } to{ opacity:1; transform:none } }
@keyframes sube{  from{ opacity:0; transform:translateY(100%) } to{ opacity:1; transform:none } }
@keyframes brasas{ from{ transform:translateY(0) } to{ transform:translateY(-50%) } }


/* ---------- Hero ---------- */
.hero{ position:relative; height:508px; overflow:hidden; touch-action:pan-y; }
.hero__humo{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:50% 26%;
  filter:blur(26px) brightness(.36) saturate(.7); transform:scale(1.16);
}
.hero__brasas{ position:absolute; inset:0; overflow:hidden; opacity:.8; }
.hero__brasas::before{
  content:""; position:absolute; left:0; right:0; top:0; height:200%;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%, rgba(233,180,90,.9), transparent),
    radial-gradient(1.4px 1.4px at 28% 62%, rgba(233,160,70,.8), transparent),
    radial-gradient(1.8px 1.8px at 47% 34%, rgba(255,200,120,.85), transparent),
    radial-gradient(1.3px 1.3px at 63% 74%, rgba(233,170,80,.75), transparent),
    radial-gradient(1.7px 1.7px at 79% 26%, rgba(255,190,110,.9), transparent);
  animation:brasas 17s linear infinite;
}
.hero__vikingo{
  position:absolute; z-index:1; left:-30%; bottom:0;
  height:96%; width:auto; max-width:none; opacity:.30;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 68%,transparent 95%);
          mask-image:linear-gradient(180deg,#000 0%,#000 68%,transparent 95%);
}
.hero__velo{
  position:absolute; inset:0; z-index:2;
  background:
    radial-gradient(110% 85% at 78% 56%, rgba(201,120,40,.20), transparent 62%),
    linear-gradient(180deg, rgba(7,7,10,.92) 0%, rgba(7,7,10,.32) 34%, rgba(7,7,10,.72) 74%, var(--negro) 100%);
}
.hero__cuerpo{
  position:absolute; inset:0; z-index:3;
  display:flex; align-items:flex-end; padding:0 20px 70px;
}
.hero__fila{ display:flex; align-items:flex-end; gap:4px; width:100%; }
.hero__texto{ flex:1; min-width:0; }
.hero__ojo{
  display:flex; align-items:center; gap:7px; margin-bottom:9px;
  color:var(--oro); font-family:Cinzel,serif; font-size:9.5px; font-weight:700;
  letter-spacing:.3em; text-transform:uppercase;
}
.hero__ojo::before{ content:""; width:16px; height:1px; background:currentColor; }
.hero__titular{
  margin-bottom:8px; font-family:'Cinzel Decorative',Cinzel,serif; font-weight:900;
  font-size:30px; line-height:1.1; text-wrap:balance;
  background:linear-gradient(180deg,#FFF8E7 0%,#EBD9AE 30%,#C9A86B 56%,#8C6F3E 70%,#E2C892 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__linea{ margin-bottom:15px; font-size:12.5px; color:var(--texto-2); }
.hero__foto{
  width:140px; height:176px; flex:none; object-fit:cover;
  border-radius:100px 100px 90px 90px;
  border:1px solid rgba(201,168,107,.3);
  box-shadow:0 24px 50px -18px rgba(0,0,0,.9);
  animation:entra .5s var(--curva);
}
.hero__puntos{
  position:absolute; left:0; right:0; bottom:24px; z-index:4;
  display:flex; justify-content:center; gap:9px;
}
.hero__punto{
  width:22px; height:3px; padding:0; border-radius:2px;
  background:rgba(201,168,107,.28); transition:background .3s;
}
.hero__punto.es-activo{ background:var(--oro); }


/* ---------- Piezas comunes ---------- */
.divisor{ display:flex; align-items:center; gap:12px; padding:24px 20px 0; }
.divisor span{ flex:1; height:1px; }
.divisor span:first-child{ background:linear-gradient(90deg,transparent,rgba(201,168,107,.35)); }
.divisor span:last-child{ background:linear-gradient(270deg,transparent,rgba(201,168,107,.35)); }
.divisor svg{ width:106px; height:13px; fill:var(--oro); stroke:none; opacity:.75; }

.seccion{ padding:18px 20px 0; }
.seccion__ojo{
  margin-bottom:3px; color:var(--oro); font-family:Cinzel,serif;
  font-size:9.5px; font-weight:700; letter-spacing:.3em; text-transform:uppercase;
}
.seccion__titulo{ font-size:21px; }
.seccion__titulo--grande{ font-family:'Cinzel Decorative',Cinzel,serif; font-size:25px; }
.seccion__bajada{ margin-top:6px; font-size:12.5px; line-height:1.6; color:var(--tenue); text-wrap:pretty; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 19px; border-radius:6px;
  font-family:Cinzel,serif; font-weight:700; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
  transition:transform .2s var(--curva), filter .2s;
}
.btn svg{ width:16px; height:16px; }
.btn:active{ transform:scale(.97); }
.btn--oro{ background:var(--oro-boton); color:#140F06;
  box-shadow:0 10px 26px -12px rgba(201,168,107,.75); }
.btn--wa{ background:var(--wa); color:#04240F;
  box-shadow:0 10px 26px -12px rgba(37,211,102,.8); }
.btn--wa svg{ fill:currentColor; stroke:none; }
.btn--linea{ border:1px solid var(--oro-linea); background:rgba(255,255,255,.02); color:var(--texto); }
.btn--ancho{ width:100%; }

/* Escala de fijación en rombos */
.escala{ display:flex; align-items:center; gap:5px; }
.escala i{
  width:9px; height:9px; transform:rotate(45deg); border-radius:1px;
  border:1px solid rgba(255,255,255,.16); background:transparent;
}
.escala i.on{ background:var(--acento); border-color:var(--acento); }
.escala b{ margin-left:3px; font-size:9px; font-weight:400;
  letter-spacing:.12em; text-transform:uppercase; color:var(--apagado); }


/* ---------- Inicio: elige tu camino ---------- */
.caminos{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:15px; }
.camino{
  text-align:left; padding:15px 14px 17px; border-radius:14px;
  border:1px solid var(--borde); background:linear-gradient(165deg,#111116,#0A0A0E);
  display:flex; flex-direction:column; gap:9px; min-height:152px;
  transition:border-color .25s, background .25s;
}
.camino svg{ width:26px; height:26px; color:var(--oro); stroke-width:1.3; }
.camino b{ font-family:Cinzel,serif; font-weight:700; font-size:14px;
  letter-spacing:.05em; margin-top:auto; }
.camino span{ font-size:11.5px; line-height:1.5; color:var(--tenue); }
.camino.es-activo{
  border-color:rgba(201,168,107,.34);
  background:linear-gradient(165deg,#1A1509,#0C0C10);
}

/* ---------- Inicio: los más rotados ---------- */
.rotados__tope{
  display:flex; align-items:baseline; justify-content:space-between;
  padding:0 20px; margin-bottom:13px;
}
.rotados__tope h2{ font-size:19px; }
.rotados__ver{ color:var(--oro); font-size:10.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; }
.riel{ display:flex; gap:12px; overflow-x:auto; padding:2px 20px 4px; }

.mini{
  flex:none; width:150px; text-align:left; padding:0 0 14px;
  border-radius:14px; border:1px solid var(--borde);
  background:linear-gradient(180deg,#101014,#0A0A0E); overflow:hidden;
  transition:transform .25s var(--curva), border-color .25s;
}
.mini:active{ transform:scale(.98); }
.mini__foto{ display:block; position:relative; height:152px;
  background:radial-gradient(70% 60% at 50% 55%, var(--halo), transparent 72%); }
.mini__foto img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  -webkit-mask-image:radial-gradient(72% 66% at 50% 52%,#000 58%,transparent 88%);
          mask-image:radial-gradient(72% 66% at 50% 52%,#000 58%,transparent 88%);
}
.mini__cuerpo{ display:block; padding:0 13px; }
.mini__nombre{ display:block; font-family:Cinzel,serif; font-weight:700; font-size:13.5px; }
.mini__titular{ display:block; margin-top:4px; font-size:11px; color:var(--tenue); }
.mini__precio{ display:block; margin-top:8px; font-size:12.5px; font-weight:700; color:var(--acento); }

/* ---------- Inicio: runas y golpes ---------- */
.runas{
  width:100%; text-align:left; padding:19px 18px; border-radius:16px;
  border:1px solid var(--oro-linea);
  background:linear-gradient(150deg,#1A1509,#0D0D11 62%);
  display:flex; align-items:center; gap:14px;
}
.runas__icono{ width:32px; height:32px; color:var(--oro); stroke-width:1.2; }
.runas b{ display:block; font-family:Cinzel,serif; font-weight:700;
  font-size:15px; letter-spacing:.04em; }
.runas span{ display:block; margin-top:3px; font-size:11.5px;
  line-height:1.5; color:var(--tenue); }
.runas__flecha{ width:20px; height:20px; color:var(--oro); stroke-width:1.6; }

.golpes{ display:flex; flex-direction:column; gap:10px; }
.golpe{ display:flex; gap:14px; padding:15px 16px; border-radius:14px;
  border:1px solid var(--borde); background:var(--panel); }
.golpe__num{ font-family:Cinzel,serif; font-weight:700; font-size:12px; color:var(--oro-hondo); }
.golpe b{ display:block; font-family:Cinzel,serif; font-weight:700;
  font-size:13.5px; line-height:1.35; }
.golpe span{ display:block; margin-top:5px; font-size:11.5px;
  line-height:1.6; color:var(--tenue); text-wrap:pretty; }

.pie{ margin:24px 20px 0; text-align:center; font-size:10px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--fantasma);
  font-family:Cinzel,serif; }


/* ---------- Vitrina ---------- */
.vitrina{ padding-top:8px; }
.chips{ display:flex; gap:8px; overflow-x:auto; padding:2px 20px 14px; }
.chip{
  flex:none; padding:9px 15px; border-radius:20px;
  font-family:Cinzel,serif; font-size:10.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
  border:1px solid rgba(255,255,255,.1); background:transparent; color:var(--tenue);
  transition:all .25s var(--curva);
}
.chip.es-activo{
  border-color:rgba(201,168,107,.55);
  background:var(--oro-boton); color:#140F06;
}

.rejilla{ display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:2px 20px 0; }
.carta{
  border-radius:16px; border:1px solid var(--borde);
  background:linear-gradient(180deg,#101014,#0A0A0E); overflow:hidden;
  display:flex; flex-direction:column;
  transition:border-color .3s, box-shadow .3s, transform .25s var(--curva);
}
.carta:active{ transform:scale(.985); }
/* La que ya está en el pedido se queda encendida con SU color. */
.carta.es-en-pedido{
  border-color:color-mix(in srgb, var(--acento) 55%, transparent);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--acento) 30%, transparent),
             0 0 34px -14px var(--acento);
}
.carta__abrir{ display:block; width:100%; text-align:left; padding:0; }
.carta__foto{ display:block; position:relative; height:156px;
  background:radial-gradient(70% 60% at 50% 55%, var(--halo), transparent 72%); }
.carta__foto img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  -webkit-mask-image:radial-gradient(72% 66% at 50% 52%,#000 58%,transparent 88%);
          mask-image:radial-gradient(72% 66% at 50% 52%,#000 58%,transparent 88%);
}
.carta__rotulo{
  position:absolute; top:9px; left:9px; padding:4px 8px; border-radius:4px;
  font-size:8px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  font-family:Cinzel,serif; border:1px solid rgba(255,255,255,.12);
  background:rgba(7,7,10,.74); color:var(--acento);
}
.carta__cuerpo{ display:block; padding:0 12px; }
.carta__nombre{ display:block; font-family:Cinzel,serif; font-weight:700;
  font-size:14px; line-height:1.25; }
.carta__titular{ display:block; margin-top:4px; font-size:11px;
  line-height:1.45; color:var(--tenue); min-height:32px; }
.carta__escala{ margin-top:8px; }
.carta__pie{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 12px 13px; margin-top:auto;
}
.carta__precio{ font-size:13px; font-weight:700; }
.carta__mas{
  display:grid; place-items:center; width:34px; height:34px; flex:none;
  border-radius:10px; background:linear-gradient(160deg,#E4CB94,#B9975B); color:#140F06;
  transition:transform .25s var(--curva);
}
.carta__mas svg{ width:18px; height:18px; stroke-width:2; }
.carta__mas:active{ transform:scale(.9); }
.carta__mas.es-puesto{ background:var(--wa); color:#04240F; }


/* ---------- Runas (oráculo) ---------- */
.quiz__pasos{ display:flex; gap:6px; margin-bottom:22px; }
.quiz__pasos i{ flex:1; height:3px; border-radius:2px; background:rgba(255,255,255,.1); }
.quiz__pasos i.on{ background:var(--oro); }
.quiz__num{ margin-bottom:5px; font-size:10px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--apagado); font-family:Cinzel,serif; }
.quiz__pregunta{ margin-bottom:18px; font-size:20px; line-height:1.25; text-wrap:balance; }
.quiz__ops{ display:flex; flex-direction:column; gap:10px; }
.quiz__op{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  padding:15px 16px; border-radius:13px;
  border:1px solid rgba(201,168,107,.2);
  background:linear-gradient(160deg,#131319,#0B0B0F);
  transition:border-color .25s, transform .2s var(--curva);
}
.quiz__op:active{ transform:scale(.985); }
/* Miniatura del producto que ilustra la respuesta, con la runa montada en la
   esquina. La foto adelanta la familia a la que lleva esa opción. */
.quiz__foto{
  position:relative; width:56px; height:56px; flex:none;
  border-radius:13px; overflow:hidden;
  border:1px solid color-mix(in srgb, var(--acento) 40%, transparent);
  background:radial-gradient(70% 62% at 50% 52%, var(--halo), transparent 76%);
}
.quiz__foto img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:center 46%; transform:scale(1.1);
  -webkit-mask-image:radial-gradient(76% 70% at 50% 50%,#000 60%,transparent 92%);
          mask-image:radial-gradient(76% 70% at 50% 50%,#000 60%,transparent 92%);
}
.quiz__foto .quiz__runa{
  position:absolute; right:-1px; bottom:-1px;
  width:20px; height:20px; border-radius:7px 0 12px 0;
  border:0; background:rgba(7,7,10,.82); font-size:10px;
}

.quiz__runa{
  display:grid; place-items:center; width:32px; height:32px; flex:none;
  border-radius:50%; border:1px solid rgba(201,168,107,.4);
  color:var(--oro); font-size:15px;
}
.quiz__op b{ display:block; font-size:14px; font-weight:600; }
.quiz__op span{ display:block; margin-top:2px; font-size:11px; color:var(--tenue); }
.quiz__atras{ margin-top:18px; color:var(--apagado); font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; }

.veredicto{ animation:entra .45s var(--curva); }
.veredicto__caja{
  border-radius:18px; border:1px solid rgba(201,168,107,.32);
  background:linear-gradient(160deg,#1A1509,#0C0C10 62%); overflow:hidden;
}
/* El veredicto muestra el producto ENTERO, no un recorte. Con `cover` sobre una
   foto vertical en una caja ancha se ve solo la tapa ampliada y el titular se
   le monta encima: parece rota. */
.veredicto__foto{
  position:relative; height:250px; padding:14px 14px 0;
  background:radial-gradient(60% 55% at 50% 52%, var(--halo), transparent 72%);
}
.veredicto__foto img{
  width:100%; height:100%; object-fit:contain;
  filter:drop-shadow(0 16px 28px rgba(0,0,0,.7));
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 82%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,#000 82%,transparent 100%);
}
.veredicto__texto{ padding:0 18px 20px; text-align:center; }
.veredicto__ojo{ margin-bottom:6px; font-size:9.5px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--oro); font-family:Cinzel,serif; }
.veredicto__nombre{ margin-bottom:8px; font-family:'Cinzel Decorative',Cinzel,serif;
  font-weight:700; font-size:24px; line-height:1.1; }
.veredicto__para{ margin-bottom:16px; font-size:12.5px; line-height:1.6;
  color:var(--texto-2); text-wrap:pretty; }
.veredicto__acciones{ display:flex; gap:9px; }
.veredicto__acciones .btn{ flex:1; padding:13px 10px; font-size:10.5px; letter-spacing:.12em; }
.quiz__reiniciar{ margin-top:16px; width:100%; color:var(--apagado);
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; }


/* ---------- Barbería (mayorista) ---------- */
.razones{ display:flex; flex-direction:column; gap:9px; margin-bottom:22px; }
.razon{ display:flex; gap:12px; align-items:flex-start; padding:13px 15px;
  border-radius:12px; border:1px solid var(--borde); background:var(--panel); }
.razon svg{ width:17px; height:17px; margin-top:2px; color:var(--oro); stroke-width:2; }
.razon span{ font-size:12px; line-height:1.55; color:var(--texto-2); }

.subtitulo{ margin-bottom:11px; font-family:Cinzel,serif; font-weight:700;
  font-size:15px; letter-spacing:.05em; }
.escalas{ display:flex; flex-direction:column; gap:10px; margin-bottom:22px; }
.escalon{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  padding:15px 16px; border-radius:13px;
  border:1px solid var(--borde); background:var(--panel);
  transition:border-color .25s, background .25s;
}
.escalon.es-activo{
  border-color:rgba(201,168,107,.5);
  background:linear-gradient(160deg,#1A1509,#0C0C10);
}
.escalon__punto{
  width:24px; height:24px; flex:none; transform:rotate(45deg); border-radius:3px;
  border:1px solid var(--borde); background:transparent;
}
.escalon.es-activo .escalon__punto{ border-color:rgba(201,168,107,.5); background:var(--oro); }
.escalon b{ display:block; font-family:Cinzel,serif; font-weight:700; font-size:13.5px; }
.escalon span{ display:block; margin-top:2px; font-size:11px; color:var(--tenue); }
.escalon__desc{ font-size:15px; font-weight:700; color:var(--oro-claro); }

/* Tabla de tarifa mayorista. Cuatro columnas apretadas: en 390 px cada
   carácter cuenta, por eso las cifras van sin separador de miles largo. */
.tarifa{
  border-radius:14px; border:1px solid var(--borde);
  background:var(--panel); overflow:hidden; margin-bottom:8px;
}
.tarifa__cab, .tarifa__fila{
  display:grid; grid-template-columns:1fr 1.15fr 1.35fr 1.35fr;
  gap:6px; align-items:center; padding:10px 12px;
  font-size:12px; font-variant-numeric:tabular-nums;
}
.tarifa__cab{
  font-size:9px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--apagado); font-family:Cinzel,serif;
  border-bottom:1px solid var(--borde); background:rgba(255,255,255,.02);
}
.tarifa__fila + .tarifa__fila{ border-top:1px solid rgba(255,255,255,.045); }
.tarifa__fila span{ color:var(--texto-2); }
.tarifa__fila b{ color:var(--oro-claro); font-weight:700; }
/* El escalón que ya alcanzaste con lo que llevas en el pedido. */
.tarifa__fila.es-activo{ background:linear-gradient(90deg,rgba(201,168,107,.14),transparent); }
.tarifa__fila.es-activo span:first-child{ color:var(--oro); font-weight:700; }
.tarifa__nota{
  margin-bottom:22px; font-size:10.5px; line-height:1.5; color:var(--apagado);
}

.forma{
  padding:17px 16px 19px; border-radius:16px;
  border:1px solid rgba(201,168,107,.24);
  background:linear-gradient(160deg,#15151B,#0B0B0F);
}
.forma__campos{ display:flex; flex-direction:column; gap:11px; }
.forma label{ display:block; font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--apagado); }
.forma input{
  display:block; width:100%; margin-top:6px; padding:12px 13px;
  border-radius:9px; border:1px solid rgba(255,255,255,.09);
  background:#08080B; color:var(--texto);
  font:400 13.5px Inter,sans-serif; letter-spacing:normal; text-transform:none;
}
.forma input:focus{ outline:none; border-color:rgba(201,168,107,.6); }
.forma__nota{ margin-top:2px; font-size:10.5px; line-height:1.5;
  color:var(--apagado); text-align:center; }


/* ---------- Barra de pestañas ---------- */
.tabs{
  position:fixed; left:0; right:0; bottom:0; z-index:55;
  max-width:520px; margin:0 auto;
  display:flex; align-items:center; gap:2px;
  padding:9px 10px calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(7,7,10,0),rgba(7,7,10,.97) 24%);
  backdrop-filter:blur(14px);
  border-top:1px solid rgba(201,168,107,.12);
}
.tab{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:7px 2px; color:#5C5852; transition:color .25s;
}
.tab span{ font-family:Cinzel,serif; font-size:9px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; }
.tab.es-activo{ color:var(--oro); }
.tab--consejo{ color:var(--oro); }


/* ---------- Consejo del barbero ---------- */
.consejo{
  position:fixed; left:16px; right:16px; z-index:75;
  bottom:calc(var(--tabs-alto) + 22px + env(safe-area-inset-bottom));
  max-width:488px; margin:0 auto;
  display:flex; gap:12px; padding:14px 15px; border-radius:14px;
  border:1px solid rgba(201,168,107,.3); background:rgba(20,18,12,.96);
  box-shadow:0 20px 40px -18px rgba(0,0,0,.9);
  animation:toast .28s var(--curva);
}
.consejo svg{ width:19px; height:19px; margin-top:1px; color:var(--oro); }
.consejo span{ flex:1; font-size:12.5px; line-height:1.55; text-wrap:pretty; }
@keyframes toast{ from{ opacity:0; transform:translateY(16px) } to{ opacity:1; transform:none } }


/* ---------- Ficha de producto ---------- */
.capa{
  position:fixed; inset:0; z-index:80;
  max-width:520px; margin:0 auto;
  background:var(--negro); animation:sube .34s var(--curva);
  display:flex; flex-direction:column;
}
.ficha__scroll{ flex:1; overflow-y:auto; padding-bottom:104px; }

.tarro{
  position:relative; height:394px; overflow:hidden; touch-action:none;
  background:radial-gradient(75% 55% at 50% 45%, var(--halo), var(--negro) 72%);
}
.tarro::before{
  content:""; position:absolute; inset:0;
  background-image:repeating-linear-gradient(115deg,rgba(255,255,255,.028) 0 1px,transparent 1px 7px);
}
.tarro img{
  position:absolute; left:50%; top:52%;
  width:264px; height:330px; margin:-165px 0 0 -132px;
  object-fit:cover; border-radius:132px 132px 116px 116px;
  box-shadow:0 40px 70px -26px rgba(0,0,0,.95);
  transition:transform .5s var(--curva); cursor:grab;
  -webkit-user-select:none; user-select:none;
}
/* El área segura importa: la ficha es una capa a pantalla completa, así que en
   un móvil con notch un `top:16px` deja el botón debajo de la barra de estado
   y no hay forma de tocarlo. */
.tarro__volver{
  position:absolute; z-index:2;
  top:calc(16px + env(safe-area-inset-top)); left:16px;
  display:grid; place-items:center; width:40px; height:40px; border-radius:50%;
  border:1px solid var(--oro-linea); background:rgba(7,7,10,.7);
  backdrop-filter:blur(8px); color:var(--texto);
}
.tarro__pista{
  position:absolute; left:0; right:0; bottom:12px; text-align:center;
  font-size:9px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--fantasma); font-family:Cinzel,serif;
}

.ficha__cuerpo{ padding:0 20px; }
.ficha__rotulo{
  display:flex; align-items:center; gap:8px; margin-bottom:8px;
  font-size:9.5px; letter-spacing:.26em; text-transform:uppercase;
  font-family:Cinzel,serif; color:var(--acento);
}
.ficha__rotulo::before{ content:""; width:14px; height:1px; background:currentColor; }
.ficha__nombre{ margin-bottom:6px; font-family:'Cinzel Decorative',Cinzel,serif;
  font-size:27px; line-height:1.1; }
.ficha__titular{ margin-bottom:13px; font-family:Cinzel,serif; font-size:14px;
  letter-spacing:.03em; color:var(--acento); }
.ficha__desc{ margin-bottom:18px; font-size:13.5px; line-height:1.7;
  color:var(--texto-2); text-wrap:pretty; }

.pastillas{ display:flex; gap:9px; margin-bottom:20px; }
.pastilla{ flex:1; padding:11px 8px; border-radius:11px;
  border:1px solid var(--borde); background:var(--panel); text-align:center; }
.pastilla b{ display:block; font-size:8px; font-weight:400; letter-spacing:.2em;
  text-transform:uppercase; color:var(--apagado); }
.pastilla span{ display:block; margin-top:5px; font-family:Cinzel,serif;
  font-weight:700; font-size:13px; }

.ficha__bloque{ margin-bottom:20px; }
.ficha__bloque-tope{ display:flex; align-items:center; justify-content:space-between;
  margin-bottom:8px; }
.ficha__rot{ font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--apagado); font-family:Cinzel,serif; }
.barras{ display:flex; gap:6px; }
.barras i{ flex:1; height:6px; border-radius:3px;
  border:1px solid rgba(255,255,255,.16); background:transparent; }
.barras i.on{ background:var(--acento); border-color:var(--acento); }

.beneficios{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:22px; }
.beneficio{ display:flex; align-items:flex-start; gap:8px; padding:11px;
  border-radius:10px; border:1px solid var(--borde); background:var(--panel);
  font-size:11.5px; line-height:1.4; color:var(--texto-2); }
.beneficio svg{ width:14px; height:14px; margin-top:1px; color:var(--acento); stroke-width:2; }

.pasos{ margin-bottom:22px; }
.paso{ display:flex; gap:13px; padding:11px 0; border-bottom:1px solid rgba(255,255,255,.06); }
.paso b{ font-family:Cinzel,serif; font-weight:700; font-size:11px;
  min-width:16px; color:var(--acento); }
.paso span{ flex:1; font-size:12.5px; line-height:1.6; color:var(--texto-2); text-wrap:pretty; }

.tecnica{ margin-bottom:22px; }
.tecnica div{ display:flex; justify-content:space-between; gap:16px; padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.06); font-size:12px; }
.tecnica dt{ color:var(--apagado); }
.tecnica dd{ margin:0; text-align:right; color:var(--texto-2); }

.hermano{
  flex:none; width:114px; text-align:left; padding:0 0 11px; border-radius:12px;
  border:1px solid var(--borde); background:var(--panel); overflow:hidden;
}
.hermano__foto{ display:block; position:relative; height:104px;
  background:radial-gradient(70% 60% at 50% 55%, var(--halo), transparent 74%); }
.hermano__foto img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  -webkit-mask-image:radial-gradient(70% 64% at 50% 52%,#000 56%,transparent 88%);
          mask-image:radial-gradient(70% 64% at 50% 52%,#000 56%,transparent 88%); }
.hermano b{ display:block; padding:0 10px; font-family:Cinzel,serif;
  font-weight:700; font-size:11.5px; line-height:1.3; }

.ficha__barra{
  position:absolute; left:0; right:0; bottom:0; z-index:5;
  display:flex; align-items:center; gap:12px;
  padding:14px 18px calc(18px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(7,7,10,0),rgba(7,7,10,.97) 26%);
  backdrop-filter:blur(10px);
}
.ficha__precio{ display:flex; flex-direction:column; }
.ficha__precio b{ font-size:9px; font-weight:400; letter-spacing:.2em;
  text-transform:uppercase; color:var(--apagado); }
.ficha__precio span{ font-family:Cinzel,serif; font-weight:700;
  font-size:19px; color:var(--oro-claro); }
.ficha__barra .btn{ flex:1; padding:15px; font-size:11.5px; letter-spacing:.13em; }


/* ---------- Pedido (hoja inferior) ---------- */
.hoja{ position:fixed; inset:0; z-index:90; max-width:520px; margin:0 auto;
  display:flex; flex-direction:column; justify-content:flex-end; }
.hoja__fondo{ position:absolute; inset:0; background:rgba(4,4,6,.74); backdrop-filter:blur(3px); }
.hoja__panel{
  position:relative; max-height:86%; display:flex; flex-direction:column;
  border-radius:26px 26px 0 0; border-top:1px solid rgba(201,168,107,.3);
  background:linear-gradient(180deg,#101014,#08080B);
  animation:sube .3s var(--curva);
}
.hoja__tope{ display:flex; align-items:center; padding:20px 20px 12px; }
.hoja__tope b{ display:block; font-family:'Cinzel Decorative',Cinzel,serif;
  font-weight:700; font-size:20px; }
.hoja__tope span{ display:block; margin-top:2px; font-size:10px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--apagado); }
.hoja__cerrar{ display:grid; place-items:center; width:34px; height:34px;
  border-radius:50%; border:1px solid rgba(255,255,255,.09); color:var(--tenue); }
.hoja__lista{ flex:1; overflow-y:auto; padding:0 20px; }

.vacio{ padding:32px 10px 40px; text-align:center; }
.vacio svg{ width:40px; height:40px; margin:0 auto; color:#3A3630; stroke-width:1.1; }
.vacio p{ margin-top:12px; font-size:13px; color:var(--apagado); }

.linea{ display:flex; align-items:center; gap:13px; padding:13px 0;
  border-bottom:1px solid rgba(255,255,255,.06); }
.linea__foto{ position:relative; width:56px; height:56px; flex:none;
  border-radius:12px; overflow:hidden;
  background:radial-gradient(70% 60% at 50% 50%, var(--halo), transparent 76%); }
.linea__foto img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.linea__texto{ flex:1; min-width:0; }
.linea__texto b{ display:block; font-family:Cinzel,serif; font-weight:700; font-size:13px; }
.linea__texto span{ display:block; margin-top:2px; font-size:11.5px; color:var(--tenue); }
.cant{ display:flex; align-items:center; gap:4px; padding:4px;
  border-radius:9px; border:1px solid rgba(255,255,255,.08); }
.cant button{ display:grid; place-items:center; width:26px; height:26px;
  border-radius:6px; color:var(--oro); }
.cant button svg{ width:14px; height:14px; stroke-width:2; }
.cant b{ min-width:16px; text-align:center; font-size:13px; }

.hoja__pie{ padding:16px 20px calc(20px + env(safe-area-inset-bottom));
  border-top:1px solid var(--borde); }
.total{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:4px; }
.total b{ font-size:10px; font-weight:400; letter-spacing:.2em;
  text-transform:uppercase; color:var(--apagado); }
.total span{ font-family:Cinzel,serif; font-weight:700; font-size:22px; color:var(--oro-claro); }
.total__nota{ margin-bottom:13px; font-size:10.5px; line-height:1.5; color:var(--apagado); }


/* ---------- Checkout ---------- */
.checkout{ z-index:95; }
.checkout__tope{ display:flex; align-items:center; gap:12px;
  padding:16px 18px 14px; border-bottom:1px solid var(--borde); }
.checkout__tope b{ font-family:Cinzel,serif; font-weight:700;
  font-size:15px; letter-spacing:.06em; }
.checkout__volver{ display:grid; place-items:center; width:36px; height:36px;
  border-radius:50%; border:1px solid rgba(255,255,255,.09); color:var(--texto); }
.checkout__scroll{ flex:1; overflow-y:auto; padding:18px 20px 0; }
.checkout__intro{ margin-bottom:14px; font-size:12.5px; line-height:1.6;
  color:var(--tenue); text-wrap:pretty; }
.burbuja{ padding:14px 15px; border-radius:14px 14px 14px 4px;
  background:#12251C; border:1px solid rgba(37,211,102,.22); margin-bottom:18px; }
.burbuja span{ display:block; font-size:12.5px; line-height:1.7;
  color:#DDE8E1; white-space:pre-wrap; }
.checkout__pie{ padding:12px 20px calc(20px + env(safe-area-inset-bottom));
  border-top:1px solid var(--borde); }
.checkout__pie .btn{ width:100%; padding:16px; font-size:12px; }

/* ---------- Enviado ---------- */
.enviado{
  z-index:99; align-items:center; justify-content:center;
  padding:0 34px; text-align:center;
  background:radial-gradient(80% 55% at 50% 40%,#1A1509,#07070A 70%);
  animation:entra .4s var(--curva);
}
.enviado__disco{ display:grid; place-items:center; width:74px; height:74px;
  border-radius:50%; border:1px solid rgba(201,168,107,.4);
  color:var(--oro); margin-bottom:20px; }
.enviado__disco svg{ width:32px; height:32px; stroke-width:1.6; }
.enviado h2{ margin-bottom:8px; font-family:'Cinzel Decorative',Cinzel,serif;
  font-size:25px; line-height:1.15; }
.enviado p{ margin-bottom:26px; font-size:13px; line-height:1.65;
  color:var(--tenue); text-wrap:pretty; }


/* ---------- Marca de precio provisional ---------- */
/* Mientras los precios no estén confirmados, cada cifra lo dice. Si se
   confirman, esta clase deja de ponerse y no queda rastro. */
.aprox::after{
  content:" aprox.";
  font-family:Inter,sans-serif; font-size:.62em; font-weight:400;
  letter-spacing:.06em; color:var(--apagado);
}


/* ---------- Escritorio ---------- */
/* La app se queda en su columna y el fondo respira alrededor. No se inventa
   una maqueta de escritorio que el diseño nunca definió. */
@media (min-width:900px){
  body{ padding:0; }
  .app{
    max-width:430px; min-height:100dvh;
    box-shadow:0 0 0 1px rgba(201,168,107,.14), 0 40px 90px -30px rgba(0,0,0,.9);
  }
  .tabs, .capa, .hoja, .consejo{ max-width:430px; }
  .consejo{ left:0; right:0; width:calc(100% - 32px); }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.12s!important;
  }
}