.panel-cab h2{font-family:var(--f-display); font-size:20px; margin:2px 0 3px; letter-spacing:-.4px}
.panel-cab p{margin:0; font-size:12.5px; color:#C9A9B4}
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:16px}
.stat{background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); border-radius:var(--r-s); padding:10px 8px}
.stat b{font-family:var(--f-display); font-size:19px; display:block; letter-spacing:-.4px}
.stat span{font-size:9.5px; color:#C9A9B4; letter-spacing:.02em}
.plan-barra{margin:14px 16px 0; background:var(--blanco); border:1px solid var(--linea); border-radius:var(--r-m); padding:13px 14px}
.plan-barra .fila{display:flex; justify-content:space-between; align-items:center; font-size:12.5px; margin-bottom:9px}
.plan-barra b{font-weight:700}
.barra{height:7px; background:var(--fucsia-10); border-radius:999px; overflow:hidden}
.barra i{display:block; height:100%; background:var(--fucsia); border-radius:999px; transition:width .4s}
.item{display:flex; gap:11px; align-items:center; background:var(--blanco); border:1px solid var(--linea);
  border-radius:var(--r-m); padding:10px; margin-bottom:10px}
.item .thumb{width:56px; height:66px; border-radius:9px; flex:0 0 auto; display:grid; place-items:center; position:relative}
.item .thumb svg.prenda{width:62%; height:62%; opacity:.72}
.item h4{margin:0 0 2px; font-size:13.5px; font-weight:600}
.item .cod-txt{font-family:var(--f-codigo); font-size:10.5px; color:var(--gris); letter-spacing:.06em}
.item .precio{font-size:14px; margin-top:3px}
.acc-rapidas{display:flex; gap:6px; margin-top:8px; flex-wrap:wrap}
.acc{font-family:var(--f-codigo); font-size:10px; letter-spacing:.06em; text-transform:uppercase; padding:5px 9px;
  border-radius:6px; border:1.5px solid var(--linea); background:var(--papel); color:var(--tinta-70)}
.acc.on.d{background:var(--agua-10); border-color:var(--agua); color:var(--agua)}
.acc.on.r{background:var(--mango-10); border-color:#E9A23B; color:#B4650A}
.acc.on.v{background:#F3EAEC; border-color:#C9B3BA; color:var(--gris)}

/* ---------- formulario ---------- */
.campo{margin-bottom:15px}
.campo label{display:block; font-size:12.5px; font-weight:700; margin-bottom:6px}
.campo .ayuda{font-weight:400; color:var(--gris); font-size:11.5px}
.campo input[type=text],.campo input[type=number],.campo select,.campo textarea{
  width:100%; background:var(--blanco); border:1.5px solid var(--linea); border-radius:var(--r-s);
  padding:13px 14px; font-size:15px; outline:none;
}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--tinta)}
.campo textarea{resize:none; min-height:76px; font-family:var(--f-texto)}
.subir-foto{
  aspect-ratio:4/3; border:2px dashed #E0BFC9; border-radius:var(--r-m); background:var(--blanco);
  display:grid; place-items:center; text-align:center; gap:4px; padding:16px; width:100%;
  position:relative; overflow:hidden;
}
.subir-foto b{font-size:14px} .subir-foto small{font-size:11.5px; color:var(--gris)}
.subir-foto.lleno{border-style:solid; border-color:var(--agua); background:var(--agua-10)}
.extras{display:grid; grid-template-columns:repeat(3,1fr); gap:9px}
.extra{aspect-ratio:1; border:2px dashed #E0BFC9; border-radius:var(--r-s); background:var(--blanco);
  display:grid; place-items:center; font-size:20px; color:#C9A9B4}
.extra.lleno{border-style:solid; border-color:var(--agua); background:var(--agua-10); color:var(--agua)}
.opciones{display:flex; gap:7px; flex-wrap:wrap}

/* ---------- live ---------- */
.cambia-vista{display:flex; gap:5px; background:var(--blanco); border:1.5px solid var(--linea); border-radius:999px;
  padding:4px; margin:0 16px 16px}
.cambia-vista button{flex:1; padding:9px; border-radius:999px; font-size:13px; font-weight:600; color:var(--gris)}
.cambia-vista button.on{background:var(--tinta); color:#fff}
.live-card{
  background:var(--noche); color:#fff; border-radius:var(--r-xl); padding:20px; margin:0 16px 16px; position:relative; overflow:hidden;
}
.live-card::after{content:""; position:absolute; width:180px; height:180px; border-radius:50%;
  background:radial-gradient(circle, rgba(224,53,107,.55), transparent 70%); top:-70px; right:-60px}
.live-card::before{content:""; position:absolute; width:150px; height:150px; border-radius:50%;
  background:radial-gradient(circle, rgba(14,158,136,.45), transparent 70%); bottom:-70px; left:-50px}
.live-card > *{position:relative; z-index:1}
.vivo{display:inline-flex; align-items:center; gap:6px; background:var(--fucsia); padding:5px 11px; border-radius:999px;
  font-family:var(--f-codigo); font-size:10px; letter-spacing:.16em; text-transform:uppercase}
.punto{width:7px; height:7px; border-radius:50%; background:#fff; animation:late 1.4s infinite}
@keyframes late{0%,100%{opacity:1} 50%{opacity:.25}}
.live-card h2{font-family:var(--f-display); font-size:25px; margin:13px 0 6px; letter-spacing:-.6px; line-height:1.1}
.live-card p{margin:0; font-size:13.5px; color:#D6BDC7; line-height:1.5}
.cuenta{display:flex; gap:7px; margin-top:16px}
.cuenta div{flex:1; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); border-radius:var(--r-s);
  padding:9px 4px; text-align:center}
.cuenta b{font-family:var(--f-display); font-size:20px; display:block; letter-spacing:-.5px}
.cuenta span{font-family:var(--f-codigo); font-size:9px; color:#C9A9B4; letter-spacing:.1em; text-transform:uppercase}
.rsvp{display:grid; grid-template-columns:1fr 1fr; gap:9px; padding:0 16px}
.rsvp .ancho{grid-column:1/-1}
.sel-pieza{display:flex; align-items:center; gap:11px; background:var(--blanco); border:1.5px solid var(--linea);
  border-radius:var(--r-m); padding:9px 12px 9px 9px; margin-bottom:9px; width:100%; text-align:left}
.sel-pieza.on{border-color:var(--fucsia); background:var(--fucsia-10)}
.sel-pieza .thumb{width:48px; height:56px; border-radius:8px; flex:0 0 auto; display:grid; place-items:center}
.sel-pieza .thumb svg.prenda{width:60%; height:60%; opacity:.72}
.check{width:24px; height:24px; border-radius:8px; border:2px solid var(--linea); flex:0 0 auto; display:grid; place-items:center;
  color:transparent; font-size:13px; font-weight:700}
.sel-pieza.on .check{background:var(--fucsia); border-color:var(--fucsia); color:#fff}
.aviso-ok{display:flex; gap:11px; align-items:center; background:var(--agua-10); border:1.5px solid var(--agua);
  border-radius:var(--r-m); padding:13px 15px; margin:0 16px 12px; font-size:13.5px; line-height:1.4}
.aviso-ok b{display:block; font-size:14px; margin-bottom:2px}

/* ---------- planes ---------- */
.plan{background:var(--blanco); border:1.5px solid var(--linea); border-radius:var(--r-l); padding:18px; margin-bottom:12px}
.plan.destacado{border-color:var(--tinta); border-width:2px; position:relative}
.plan .cinta{position:absolute; top:-11px; right:16px; background:var(--mango); color:var(--tinta);
  font-family:var(--f-codigo); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; padding:4px 10px; border-radius:999px}
.plan h3{font-family:var(--f-display); font-size:19px; margin:0 0 2px; letter-spacing:-.3px}
.plan .costo{font-family:var(--f-display); font-size:26px; font-weight:800; letter-spacing:-.8px; margin:8px 0 12px}
.plan .costo small{font-family:var(--f-texto); font-size:12.5px; font-weight:400; color:var(--gris); letter-spacing:0}
.plan ul{list-style:none; margin:0 0 15px; padding:0; display:grid; gap:8px}
.plan li{display:flex; gap:9px; font-size:13.5px; line-height:1.4; color:var(--tinta-70)}
.plan li svg{flex:0 0 auto; margin-top:2px}
.nota{text-align:center; font-size:12.5px; color:var(--gris); padding:4px 26px 8px; line-height:1.5}

/* ---------- tab bar ---------- */
.tabs{
  position:fixed; bottom:0; width:100%; max-width:430px; display:grid; grid-template-columns:repeat(4,1fr);
  background:rgba(252,242,238,.96); backdrop-filter:blur(14px); border-top:1px solid var(--linea);
  padding:8px 6px calc(8px + env(safe-area-inset-bottom)); z-index:40;
}
@media(min-width:600px){.tabs{border-radius:0 0 38px 38px}}
.tab{display:flex; flex-direction:column; align-items:center; gap:4px; padding:6px 0; color:var(--gris); font-size:10.5px; font-weight:600}
.tab.on{color:var(--fucsia)}
.tab svg{width:22px; height:22px}

/* ---------- modo deslizar (feed a pantalla completa) ---------- */
.feed-abrir{display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  background:var(--tinta); color:#fff; padding:13px 16px; border-radius:999px; font-size:14px; font-weight:700}
#v-descubrir.activa{position:absolute; inset:0; padding:0; z-index:20; display:block}
.app.modo-feed .tabs{display:none}
.feed{width:100%; height:100%; overflow-y:scroll; scroll-snap-type:y mandatory; -webkit-overflow-scrolling:touch; background:#100810}
.feed::-webkit-scrollbar{display:none}
.feed-card{position:relative; width:100%; height:100%; scroll-snap-align:start; scroll-snap-stop:always;
  display:flex; align-items:flex-end; overflow:hidden; touch-action:pan-y}
.feed-galeria{position:absolute; inset:0; display:flex; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; touch-action:pan-x}
.feed-galeria::-webkit-scrollbar{display:none}
.feed-foto{flex:0 0 100%; scroll-snap-align:start; display:grid; place-items:center}
.feed-foto svg.prenda{width:64%; height:64%; opacity:.9}
.feed-puntos{position:absolute; top:calc(9px + env(safe-area-inset-top)); left:14px; right:14px; z-index:6;
  display:flex; gap:5px; pointer-events:none}
.punto-g{flex:1; height:3px; border-radius:2px; background:rgba(255,255,255,.4); box-shadow:0 0 3px rgba(0,0,0,.35)}
.punto-g.on{background:#fff}
.feed-card .velo{position:absolute; inset:0; background:linear-gradient(to bottom, rgba(0,0,0,0) 42%, rgba(16,8,16,.86) 100%); pointer-events:none}
.feed-top{position:absolute; top:0; left:0; right:0; z-index:12; display:flex; align-items:center; justify-content:space-between;
  padding:calc(24px + env(safe-area-inset-top)) 14px 14px}
.feed-top-acciones{display:flex; align-items:center; gap:8px}
.feed-cerrar,.feed-buscar,.feed-carrito{width:36px; height:36px; border-radius:50%; background:rgba(0,0,0,.35);
  backdrop-filter:blur(6px); display:grid; place-items:center; color:#fff; position:relative}
.feed-carrito .n{position:absolute; top:-3px; right:-3px; background:var(--fucsia); color:#fff; font-size:10px;
  font-weight:800; width:18px; height:18px; border-radius:50%; display:grid; place-items:center; border:2px solid #100810}
.feed-cuenta{position:absolute; top:calc(16px + env(safe-area-inset-top)); left:0; right:0; text-align:center;
  z-index:4; color:#fff; font-family:var(--f-codigo); font-size:10px; letter-spacing:.12em; opacity:.7}
.feed-rail{position:absolute; right:12px; bottom:158px; z-index:12; display:flex; flex-direction:column; gap:18px; align-items:center}
.feed-btn{display:flex; flex-direction:column; align-items:center; gap:4px; color:#fff; min-width:54px; touch-action:manipulation; -webkit-tap-highlight-color:transparent; -webkit-user-select:none; user-select:none}
.feed-circ{width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.16); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; transition:.15s; font-family:var(--f-display); font-weight:800; font-size:15px}
.feed-circ.on{background:var(--fucsia)}
.feed-btn span{font-size:10px; font-weight:600; text-shadow:0 1px 3px rgba(0,0,0,.5)}
.feed-info{position:relative; z-index:10; width:100%; padding:0 16px calc(18px + env(safe-area-inset-bottom)); color:#fff}
.feed-top button,.feed-rail button,.feed-info button{touch-action:manipulation; -webkit-tap-highlight-color:transparent}
.feed-tienda{display:flex; align-items:center; gap:8px; margin-bottom:10px; background:none; border:none; padding:0}
.feed-tienda .av{width:30px; height:30px; border-radius:10px; display:grid; place-items:center; font-family:var(--f-display); font-weight:800; font-size:12px; border:2px solid #fff; flex:0 0 auto}