/* =========================================================
   VossStore · núcleo
   Puerta +18, cookies, selector de sabores, caja de 10,
   bloques de WhatsApp y páginas legales.
   Todo con los tokens del tema: ni un color suelto.
   ========================================================= */

/* ============ PUERTA +18 ============ */
.agegate{
  position:fixed; inset:0; z-index:400; display:grid; place-items:center; padding:22px;
  background:rgba(4,4,8,.82); backdrop-filter:blur(14px);
}
.agegate__card{
  width:min(420px,100%); text-align:center; padding:34px 28px 26px;
  background:linear-gradient(168deg,var(--surface),var(--bg-elev));
  border-radius:var(--r-xl); box-shadow:inset 0 0 0 1px var(--line-2), var(--sh-2);
}
.agegate__logo{ display:flex; align-items:center; justify-content:center; gap:11px; }
.agegate__mark{
  width:38px; height:38px; display:grid; place-items:center; border-radius:12px;
  background:var(--grad); padding:8px;
}
.agegate__brand{ font-family:var(--ff-display); font-size:22px; font-weight:800; letter-spacing:-.03em; margin:0; }
.agegate__brand span{ color:var(--accent); }
.agegate__claim{ color:var(--text-2); font-size:13.5px; margin:16px 0 0; }
.agegate__q{ font-family:var(--ff-display); font-size:20px; font-weight:700; margin:20px 0 18px; letter-spacing:-.02em; }
.agegate__actions{ display:grid; gap:10px; }
.agegate__legal{ color:var(--muted); font-size:11.5px; line-height:1.6; margin:20px 0 0; }
.agegate__legal a{ color:var(--accent); }
.agegate--denied .agegate__card{ box-shadow:inset 0 0 0 1px rgba(255,107,107,.3), var(--sh-2); }

/* ============ COOKIES ============ */
.cookies{
  position:fixed; left:18px; bottom:18px; z-index:300; width:min(400px,calc(100% - 36px));
  padding:20px; border-radius:var(--r-lg);
  background:linear-gradient(168deg,var(--surface),var(--bg-elev));
  box-shadow:inset 0 0 0 1px var(--line-2), var(--sh-2);
  transform:translateY(20px); opacity:0; transition:all .5s var(--ease-out);
}
.cookies.is-open{ transform:none; opacity:1; }
.cookies__head h4{ font-family:var(--ff-display); font-size:16px; margin:0; letter-spacing:-.02em; }
.cookies__text{ color:var(--text-2); font-size:13px; line-height:1.65; margin:10px 0 0; }
.cookies__text a{ color:var(--accent); }
.cookies__prefs{ display:none; margin-top:14px; gap:10px; }
.cookies.is-config .cookies__prefs{ display:grid; }
.cookies__pref{ display:flex; align-items:center; gap:14px; justify-content:space-between; }
.cookies__pref h5{ font-size:13px; margin:0; }
.cookies__pref p{ font-size:11.5px; color:var(--muted); margin:2px 0 0; }
.switch{
  flex:0 0 auto; width:40px; height:23px; border-radius:99px; border:0; cursor:pointer;
  background:var(--surface-3); position:relative; transition:background var(--t) var(--ease);
}
.switch::after{
  content:""; position:absolute; top:3px; left:3px; width:17px; height:17px; border-radius:50%;
  background:var(--text-2); transition:transform var(--t) var(--ease), background var(--t);
}
.switch.is-on{ background:var(--grad); }
.switch.is-on::after{ transform:translateX(17px); background:#08080B; }
.switch.is-locked{ opacity:.55; cursor:not-allowed; }
.cookies__actions{ display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; }
.cookies__actions .btn{ flex:1; }

/* ============ SELECTOR DE SABORES ============ */
/* El desplegable original sigue ahí para WooCommerce, pero no se ve. */
.woocommerce div.product table.variations{ display:none; }
.woocommerce div.product .woocommerce-variation-add-to-cart{ margin-top:6px; }

.fpicker{ margin:6px 0 22px; }
.fpicker__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; }
.fpicker__t{
  font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin:0;
}
.fpicker__sub{ color:var(--text-2); font-size:13px; margin:6px 0 0; }
.fpicker__n{ color:var(--muted); font-size:11.5px; white-space:nowrap; }
.fpicker__tools{ display:flex; gap:10px; margin:14px 0 12px; flex-wrap:wrap; }
.fpicker__search{
  flex:1; min-width:180px; display:flex; align-items:center; gap:9px; padding:0 14px;
  background:var(--surface-2); border-radius:var(--r-full); box-shadow:inset 0 0 0 1px var(--line);
}
.fpicker__search svg{ width:16px; height:16px; color:var(--muted); flex:0 0 auto; }
.fpicker__search input{
  flex:1; min-width:0; background:transparent; border:0; box-shadow:none; color:var(--text);
  font-size:13.5px; padding:11px 0; outline:none;
}
.fpicker__chips{ display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; }
.fpicker__chips::-webkit-scrollbar{ display:none; }
.chip{
  flex:0 0 auto; border:0; cursor:pointer; padding:8px 14px; border-radius:var(--r-full);
  background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px var(--line);
  color:var(--text-2); font-size:12.5px; font-family:var(--ff-body);
  transition:all var(--t) var(--ease);
}
.chip:hover{ color:var(--text); }
.chip.is-on{ background:var(--grad); color:#06060A; box-shadow:none; font-weight:600; }

.fpicker__grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px;
  max-height:420px; overflow-y:auto; padding-right:4px;
}
.fcard{
  position:relative; min-width:0; display:grid; grid-template-columns:44px minmax(0,1fr);
  grid-template-rows:auto auto; gap:2px 11px; align-items:center; text-align:left;
  padding:11px 12px; border:0; cursor:pointer; border-radius:var(--r-md);
  background:linear-gradient(150deg, color-mix(in srgb, var(--c1) 16%, var(--surface)), var(--surface));
  box-shadow:inset 0 0 0 1px var(--line); font-family:var(--ff-body);
  transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.fcard:hover{ transform:translateY(-2px); box-shadow:inset 0 0 0 1px var(--line-2); }
.fcard.is-on{ box-shadow:inset 0 0 0 1.8px var(--accent), 0 10px 26px rgba(0,0,0,.4); }
.fcard.is-out{ opacity:.42; cursor:not-allowed; }
.fcard.is-out:hover{ transform:none; }
.fcard[hidden]{ display:none; }
.fcard__art{ grid-row:1 / span 2; width:44px; height:44px; display:grid; place-items:center; }
.fcard__art img{ width:100%; height:100%; object-fit:contain; }
.fcard__dot{
  width:22px; height:22px; border-radius:50%;
  background:linear-gradient(140deg,var(--c1),var(--c2));
}
.fcard__txt{ min-width:0; display:grid; }
.fcard__txt b{ font-size:12.5px; font-weight:600; color:var(--text); line-height:1.25; }
.fcard__txt i{ font-size:11px; font-style:normal; color:var(--text-2); line-height:1.3; }
.fcard__estado{ font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.fcard.is-out .fcard__estado{ color:var(--warn); }
.fpicker__vacio{ color:var(--muted); font-size:13px; padding:18px 0; }

/* ============ CREA TU CAJA ============ */
.caja{ max-width:900px; }
.caja__cab{
  display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap;
  padding:20px 22px; border-radius:var(--r-lg);
  background:linear-gradient(150deg,var(--surface),var(--bg-elev));
  box-shadow:inset 0 0 0 1px var(--line);
}
.caja__t{ font-family:var(--ff-display); font-size:19px; font-weight:700; margin:0; letter-spacing:-.02em; }
.caja__sub{ color:var(--text-2); font-size:13.5px; margin:6px 0 0; max-width:46ch; }
.caja__precio{ text-align:right; }
.caja__precio b{ font-family:var(--ff-display); font-size:30px; font-weight:800; letter-spacing:-.03em; }
.caja__precio small{ display:block; color:var(--accent-3); font-size:12px; margin-top:3px; }

.caja__barra{ display:flex; align-items:center; gap:16px; margin:20px 0 14px; }
.caja__progreso{ flex:1; height:7px; border-radius:99px; background:var(--surface-3); overflow:hidden; }
.caja__progreso span{ display:block; height:100%; background:var(--grad); transition:width .35s var(--ease); }
.caja__cuenta{ margin:0; font-size:13px; color:var(--text-2); white-space:nowrap; }
.caja__cuenta b{ color:var(--text); font-family:var(--ff-display); font-size:16px; }

.caja__grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px; }
.ccard{
  min-width:0; display:grid; grid-template-columns:44px minmax(0,1fr); gap:4px 11px;
  align-items:center; padding:11px 12px; border-radius:var(--r-md);
  background:linear-gradient(150deg, color-mix(in srgb, var(--c1) 16%, var(--surface)), var(--surface));
  box-shadow:inset 0 0 0 1px var(--line);
}
.ccard.is-on{ box-shadow:inset 0 0 0 1.8px var(--accent); }
.ccard__art{ grid-row:1 / span 2; width:44px; height:44px; }
.ccard__art img{ width:100%; height:100%; object-fit:contain; }
.ccard__txt{ min-width:0; display:grid; }
.ccard__txt b{ font-size:12.5px; font-weight:600; line-height:1.25; }
.ccard__txt i{ font-size:11px; font-style:normal; color:var(--text-2); }
.ccard__pasos{ grid-column:2; display:flex; align-items:center; gap:6px; margin-top:4px; }
.ccard__btn{
  width:26px; height:26px; flex:0 0 auto; border:0; cursor:pointer; border-radius:50%;
  background:rgba(255,255,255,.07); color:var(--text); font-size:15px; line-height:1;
}
.ccard__btn:hover{ background:rgba(255,255,255,.14); }
.ccard__pasos input{
  width:46px; text-align:center; background:transparent; border:0; color:var(--text);
  font-family:var(--ff-display); font-weight:700; font-size:15px;
  box-shadow:inset 0 0 0 1px var(--line); border-radius:var(--r-sm); padding:4px 0;
  -moz-appearance:textfield;
}
.ccard__pasos input::-webkit-outer-spin-button,
.ccard__pasos input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

.caja__pie{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:20px; }
.caja__pie .btn--lg{ margin-left:auto; }
.caja__aviso{ color:var(--muted); font-size:13px; margin:12px 0 40px; }
.caja__aviso.is-ok{ color:var(--accent-3); }

/* ============ COMPRA POR SABOR ============ */
.fshop{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; padding-bottom:40px; }
.fshop__card{
  min-width:0; display:grid; gap:6px; padding:16px; border-radius:var(--r-lg); text-decoration:none;
  background:linear-gradient(150deg, color-mix(in srgb, var(--c1) 18%, var(--surface)), var(--surface));
  box-shadow:inset 0 0 0 1px var(--line);
  transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.fshop__card:hover{ transform:translateY(-4px); box-shadow:inset 0 0 0 1px var(--line-2), 0 20px 40px rgba(0,0,0,.45); }
.fshop__card.is-out{ opacity:.5; }
.fshop__card img{ width:100%; height:110px; object-fit:contain; }
.fshop__txt{ display:grid; }
.fshop__txt b{ font-size:13.5px; color:var(--text); line-height:1.3; }
.fshop__txt i{ font-size:11.5px; font-style:normal; color:var(--text-2); }
.fshop__estado{ font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }

/* ============ BLOQUES DE WHATSAPP ============ */
.wa-box{
  margin:20px 0; padding:22px; border-radius:var(--r-lg); max-width:560px;
  background:linear-gradient(150deg,var(--surface),var(--bg-elev));
  box-shadow:inset 0 0 0 1px var(--line);
}
.wa-box h4{ font-family:var(--ff-display); font-size:17px; margin:0 0 8px; letter-spacing:-.02em; }
.wa-box p{ color:var(--text-2); font-size:14px; line-height:1.65; margin:0 0 16px; }
.wa-box__nota{ font-size:12px; color:var(--muted); margin:12px 0 0; }
.btn--wa{ background:#25D366; color:#062A14; }
.btn--wa:hover{ background:#2ee574; }
.dist__cab{ max-width:60ch; margin-bottom:36px; }
.dist__eyebrow{
  font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin:0 0 10px;
}
.dist__t{
  font-family:var(--ff-display); font-weight:800; font-size:clamp(26px,3.6vw,42px);
  letter-spacing:-.04em; line-height:1.05; margin:0; text-wrap:balance;
}
.dist__lead{ color:var(--text-2); font-size:16px; line-height:1.7; margin:16px 0 0; }
.dist__cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; }
.dist__nota{ color:var(--muted); font-size:12.5px; margin:14px 0 0; }

.dist__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:12px; margin-bottom:40px; }
.dist__item{
  display:grid; gap:6px; padding:20px; border-radius:var(--r-lg);
  background:linear-gradient(150deg,var(--surface),var(--bg-elev));
  box-shadow:inset 0 0 0 1px var(--line);
}
.dist__item i{
  display:grid; place-items:center; width:34px; height:34px; border-radius:10px;
  background:var(--grad-soft); color:var(--accent); margin-bottom:4px;
}
.dist__item i svg{ width:17px; height:17px; }
.dist__item b{ font-family:var(--ff-display); font-size:15px; }
.dist__item span{ color:var(--text-2); font-size:13.5px; line-height:1.6; }

.dist__pasos{ margin-bottom:40px; }
.dist__pasos ol{
  list-style:none; padding:0; margin:14px 0 0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px;
}
.dist__pasos li{
  display:grid; gap:6px; padding:20px; border-radius:var(--r-lg);
  background:var(--surface); box-shadow:inset 0 0 0 1px var(--line);
}
.dist__num{
  display:grid; place-items:center; width:28px; height:28px; border-radius:50%;
  background:var(--grad); color:#06060A; font-family:var(--ff-display);
  font-weight:800; font-size:13px; margin-bottom:4px;
}
.dist__pasos b{ font-family:var(--ff-display); font-size:15px; }
.dist__pasos li > span:not(.dist__num){ color:var(--text-2); font-size:13.5px; line-height:1.6; }
.wa-box--ancha{ max-width:100%; }

/* ============ PÁGINAS LEGALES ============ */
.legal-date{ margin-top:0; font-size:12.5px; color:var(--muted); }
.legal-alert{
  max-width:820px; margin:22px 0 0; padding:18px 20px; border-radius:var(--r-md);
  border:1px solid var(--line); border-left:3px solid var(--warn); background:var(--surface);
  font-size:14px; line-height:1.7; color:var(--text-2);
}
.legal-alert--stop{ border-left-color:#FF6B6B; }
.legal-alert b{ color:var(--text); font-family:var(--ff-display); font-size:15px; }
.legal-alert p{ margin:8px 0 0; }
.legal-alert__list{ color:var(--text); font-weight:500; }
.legal-alert__where{ color:var(--muted); font-size:13px; }
mark.falta{
  background:rgba(255,107,107,.14); color:#FF8A8A; padding:1px 7px; border-radius:5px;
  box-shadow:inset 0 0 0 1px rgba(255,107,107,.35); font-size:.9em; font-weight:600;
}
.legal-grid{ display:grid; grid-template-columns:minmax(0,1fr) 232px; gap:48px; align-items:start; margin-top:26px; }
.legal-grid .info-body{ order:-1; }
.legal-toc{ position:sticky; top:calc(var(--header-h) + 22px); font-size:13px; }
.legal-toc__t{
  font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin:0 0 10px;
}
.legal-toc ol{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.legal-toc a{ display:block; padding:5px 10px; border-radius:var(--r-xs); color:var(--text-2); text-decoration:none; }
.legal-toc a:hover{ background:rgba(255,255,255,.05); color:var(--text); }
.legal-sec{ scroll-margin-top:calc(var(--header-h) + 26px); }
.info-body ul.datos{
  list-style:none; padding:0; margin:14px 0 0; display:grid; gap:1px;
  background:var(--line); border-radius:var(--r-md); overflow:hidden;
}
.info-body ul.datos li{
  display:grid; grid-template-columns:190px minmax(0,1fr); gap:14px;
  padding:11px 16px; background:var(--surface); font-size:14px; margin:0;
}
.info-body ul.datos span{ color:var(--muted); font-size:12.5px; }
.info-body ul.datos b{ color:var(--text); font-weight:500; }
.info-body ul.plain{ list-style:none; padding:0; margin:12px 0 0; }
.info-body ul.plain li{ position:relative; padding:7px 0 7px 20px; margin:0; }
.info-body ul.plain li::before{
  content:""; position:absolute; left:2px; top:16px; width:5px; height:5px;
  border-radius:50%; background:var(--accent-2);
}
.scrollx{ overflow-x:auto; margin-top:14px; }
.info-body table.tabla{ border-collapse:collapse; width:100%; min-width:560px; font-size:13.5px; line-height:1.6; }
.info-body table.tabla th{
  text-align:left; padding:10px 14px 10px 0; color:var(--muted);
  font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  border-bottom:1px solid var(--line-2); white-space:nowrap;
}
.info-body table.tabla td{ padding:11px 14px 11px 0; border-bottom:1px solid var(--line); vertical-align:top; }
.info-body table.tabla td:first-child{ color:var(--text); font-weight:500; }
.info-body blockquote.modelo{
  margin:14px 0 0; padding:20px 22px; border-radius:var(--r-md);
  background:var(--surface); box-shadow:inset 0 0 0 1px var(--line); font-size:14px;
}
.info-body blockquote.modelo p{ margin:0 0 9px; }
.info-body .aviso-salud{
  margin:0 0 16px; padding:16px 20px; border-radius:var(--r-md);
  background:#F4F4F7; color:#0A0A0C; font-weight:700; font-size:15px;
  font-family:var(--ff-display); line-height:1.45; border:2px solid #0A0A0C;
}
.info-body .nota{
  margin-top:14px; padding-left:14px; border-left:2px solid var(--line-2);
  font-size:13.5px; color:var(--muted);
}
.legal-otras{ margin-top:48px; padding-top:24px; border-top:1px solid var(--line); }
.legal-otras > p{
  font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin:0 0 12px;
}
.legal-otras > div{ display:flex; flex-wrap:wrap; gap:8px; }

@media (max-width: 1000px){
  .legal-grid{ grid-template-columns:minmax(0,1fr); gap:0; }
  .legal-toc{ display:none; }
  .info-body ul.datos li{ grid-template-columns:minmax(0,1fr); gap:2px; }
}
@media (max-width: 620px){
  .cookies{ left:12px; right:12px; bottom:12px; width:auto; }
  .caja__pie .btn--lg{ margin-left:0; width:100%; }
}

/* Las páginas de texto van a 760 px para que se lean bien, pero los módulos
   con rejilla (distribuidores, compra por sabor, la caja) necesitan el ancho
   completo. */
.info-body:has(.dist),
.info-body:has(.fshop),
.info-body:has(.caja){ max-width:none; }

/* =========================================================
   BIENVENIDA A LA ZONA VIP
   ---------------------------------------------------------
   Tres segundos al cruzar la puerta. El humo y las brasas los
   dibuja voss.js en un canvas; aquí van el escenario, el
   horizonte encendido, el barrido de luz y el texto.
   La puerta del PIN ya es roja, así que no hay salto de color:
   esto se abre sobre rojo y se levanta sobre rojo.
   ========================================================= */
.vipwelcome{
  position:fixed; inset:0; z-index:600; overflow:hidden;
  background:radial-gradient(120% 90% at 50% 108%, #3B121A 0%, #150609 46%, #070203 100%);
  display:grid; place-items:center;
  animation:vipwelcome-salir .85s cubic-bezier(.65,0,.35,1) 2.35s forwards;
}
.vipwelcome__humo{ position:absolute; inset:0; width:100%; height:100%; }

/* Horizonte encendido: la brasa de la que sale el vapor */
.vipwelcome__horizonte{
  position:absolute; left:50%; bottom:-32vh; width:150vw; height:70vh;
  transform:translateX(-50%) scaleY(.35); transform-origin:50% 100%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(255,70,86,.55), rgba(190,20,44,.20) 45%, transparent 72%);
  filter:blur(28px); opacity:0;
  animation:vipwelcome-horizonte 1.5s cubic-bezier(.16,1,.3,1) .1s forwards;
}

/* Barrido de luz que cruza la escena una sola vez */
.vipwelcome__barrido{
  position:absolute; top:-30%; left:-40%; width:26%; height:160%;
  background:linear-gradient(90deg, transparent, rgba(255,225,228,.16) 45%, rgba(255,120,135,.10) 60%, transparent);
  transform:rotate(14deg); filter:blur(14px); opacity:0;
  animation:vipwelcome-barrido 1.15s cubic-bezier(.5,0,.2,1) .5s forwards;
}

.vipwelcome__centro{
  position:relative; display:grid; justify-items:center; gap:16px; text-align:center;
  padding:0 24px;
}

.vipwelcome__marca{
  position:relative; width:72px; height:72px; display:grid; place-items:center; padding:16px;
  border-radius:22px; background:linear-gradient(140deg,#FF4A5C,#B4102C);
  opacity:0; transform:scale(.6) rotate(-8deg);
  animation:vipwelcome-marca 1.05s cubic-bezier(.16,1,.3,1) .18s forwards,
            vipwelcome-latido 2.4s ease-in-out .9s;
}
/* Onda expansiva que sale del logotipo */
.vipwelcome__onda{
  position:absolute; inset:0; border-radius:22px;
  box-shadow:0 0 0 0 rgba(255,74,92,.55);
  animation:vipwelcome-onda 1.5s cubic-bezier(.16,1,.3,1) .62s forwards;
}

.vipwelcome__linea{
  width:0; height:1.5px; border-radius:2px;
  background:linear-gradient(90deg, transparent, #FF4A5C 35%, #FFD9DC 50%, #FF4A5C 65%, transparent);
  box-shadow:0 0 18px rgba(255,74,92,.5);
  animation:vipwelcome-linea 1.1s cubic-bezier(.16,1,.3,1) .6s forwards;
}

.vipwelcome__t{
  margin:0; font-family:var(--ff-display, 'Sora', sans-serif);
  font-size:clamp(32px,6.4vw,60px); font-weight:800; letter-spacing:.2em;
  color:#FFF; text-indent:.2em; display:flex; gap:0; justify-content:center;
  text-shadow:0 0 34px rgba(255,74,92,.45);
}
/* Cada letra entra por su cuenta: se resuelve de un desenfoque */
.vipwelcome__t span{
  display:inline-block; white-space:pre;
  opacity:0; transform:translateY(18px) scale(1.3); filter:blur(9px);
  animation:vipwelcome-letra .75s cubic-bezier(.16,1,.3,1) forwards;
}
.vipwelcome__sub{
  margin:0; font-size:11.5px; font-weight:700; letter-spacing:.36em;
  text-transform:uppercase; color:#FF9AA3; text-indent:.36em;
  opacity:0; animation:vipwelcome-texto .9s cubic-bezier(.16,1,.3,1) 1.35s forwards;
}

@keyframes vipwelcome-marca  { to{ opacity:1; transform:scale(1) rotate(0); } }
@keyframes vipwelcome-latido {
  0%,100%{ box-shadow:0 18px 50px rgba(255,74,92,.34); }
  50%    { box-shadow:0 18px 74px rgba(255,74,92,.62); }
}
@keyframes vipwelcome-onda   { to{ box-shadow:0 0 0 46px rgba(255,74,92,0); } }
@keyframes vipwelcome-linea  { to{ width:min(260px,64vw); } }
@keyframes vipwelcome-letra  { to{ opacity:1; transform:none; filter:blur(0); } }
@keyframes vipwelcome-texto  { to{ opacity:1; transform:none; } }
@keyframes vipwelcome-horizonte {
  60% { opacity:1; transform:translateX(-50%) scaleY(1.06); }
  to  { opacity:.72; transform:translateX(-50%) scaleY(1); }
}
@keyframes vipwelcome-barrido {
  10% { opacity:1; }
  to  { opacity:0; left:130%; }
}
/* Se levanta como un telón, con un último destello */
@keyframes vipwelcome-salir {
  35% { opacity:1; transform:scale(1.03); filter:blur(0) brightness(1.28); }
  to  { opacity:0; visibility:hidden; transform:scale(1.14); filter:blur(10px) brightness(1); }
}

@media (prefers-reduced-motion: reduce){
  .vipwelcome{ animation:vipwelcome-salir .3s linear .5s forwards; }
  .vipwelcome__marca, .vipwelcome__sub{ opacity:1; transform:none; animation:none; }
  .vipwelcome__t span{ opacity:1; transform:none; filter:none; animation:none; }
  .vipwelcome__linea{ width:min(260px,64vw); animation:none; }
  .vipwelcome__humo, .vipwelcome__barrido, .vipwelcome__onda{ display:none; }
  .vipwelcome__horizonte{ opacity:.6; animation:none; transform:translateX(-50%); }
}

/* =========================================================
   Protección de envío · casilla de la pantalla de pago
   ---------------------------------------------------------
   Toda la etiqueta es zona pulsable: en un móvil, acertar a un
   cuadradito de 16 px es una lotería.
   ========================================================= */
.voss-extra{ margin:18px 0 22px; }
.voss-extra__box{
  display:flex; gap:14px; align-items:flex-start;
  padding:16px 18px; border:1px solid var(--line-2); border-radius:var(--r-md);
  background:var(--surface); cursor:pointer;
  transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.voss-extra__box:hover{ border-color:var(--accent); background:var(--surface-2); }
.voss-extra__box:has(input:checked){ border-color:var(--accent); background:var(--grad-soft); }
.voss-extra__box input{
  width:24px; height:24px; flex:0 0 24px; margin:1px 0 0;
  accent-color:var(--accent); cursor:pointer;
}
.voss-extra__txt{ display:flex; flex-direction:column; gap:5px; }
.voss-extra__txt b{ font-family:var(--ff-display); font-size:15px; }
.voss-extra__txt small{ font-size:13px; line-height:1.5; color:var(--text-2); }

/* =========================================================
   MÓVIL · comprar con el pulgar                (23-09-2026)
   ========================================================= */

/* La rejilla de sabores fluye en la página.
   Tenía scroll propio dentro del scroll de la página: en un
   teléfono se veían 6 de 20 sabores y el dedo se enganchaba
   entre los dos desplazamientos. */
@media (max-width: 760px){
  .fpicker__grid{
    max-height:none; overflow:visible; padding-right:0;
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}

/* Barra de compra fija: precio, sabor elegido y las dos acciones.
   Aparece solo cuando el botón de verdad se ha ido de la pantalla,
   así en la parte de arriba no estorba. */
.cbar{ display:none; }
@media (max-width: 760px){
  .cbar{
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    display:flex; align-items:center; gap:10px;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:#0A0A0E; border-top:1px solid var(--line-2);
    box-shadow:0 -10px 30px rgba(0,0,0,.45);
  }
  .cbar[hidden]{ display:none; }
  .cbar__info{ min-width:0; flex:1 1 auto; display:grid; }
  .cbar__precio{ font-family:var(--ff-display); font-size:16px; line-height:1.15; }
  .cbar__precio .amount{ font-size:inherit; }
  .cbar__sabor{
    font-size:11.5px; color:var(--text-2);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .cbar .btn{ flex:0 0 auto; min-height:44px; padding:0 14px; }
  .cbar .btn[disabled]{ opacity:.45; pointer-events:none; }
  body.single-product{ padding-bottom:86px; }
}

/* La nota de almacenamiento va con el mismo peso visual que el texto legal
   de la puerta: es información, no un segundo mensaje que compita con el
   botón. */
.agegate__nota{
  margin:10px 0 0; font-size:11.5px; line-height:1.55; color:var(--muted);
}
.agegate__nota a{ color:var(--text-2); }

/* =========================================================
   CARRUSEL 3D DE SABORES · portada               (24-09-2026)
   ---------------------------------------------------------
   Un desplazamiento horizontal nativo con scroll-snap: el dedo
   manda y el navegador hace la inercia. El 3D es una sola
   transformación por tarjeta, que el script ajusta según lo lejos
   que esté del centro (--d, de -2 a 2; --ad es su valor absoluto).
   Sin script, es una fila normal que se desliza igual.
   ========================================================= */
.c3d{ --c3d-w:min(58vw, 250px); position:relative; }
.c3d__escena{ position:relative; }
.c3d__pista{
  position:relative; display:flex; margin:0; list-style:none;
  padding:10px calc(50% - var(--c3d-w) / 2) 18px;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.c3d__pista::-webkit-scrollbar{ display:none; }
.c3d__item{ flex:0 0 var(--c3d-w); scroll-snap-align:center; --d:0; --ad:0; }
.c3d__tarjeta{
  position:relative; display:grid; justify-items:center; gap:6px;
  color:var(--text); text-decoration:none; -webkit-tap-highlight-color:transparent;
  transform:perspective(900px) translateX(calc(var(--d) * -38%))
            translateZ(calc(var(--ad) * -210px)) rotateY(calc(var(--d) * -50deg));
  opacity:calc(1 - var(--ad) * .36);
  will-change:transform;
}
.c3d__halo{
  position:absolute; left:50%; top:44%; width:78%; aspect-ratio:1; border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, color-mix(in srgb, var(--c1) 55%, transparent),
             color-mix(in srgb, var(--c2) 18%, transparent) 60%, transparent);
  opacity:.35; transition:opacity .4s var(--ease);
}
.c3d__img{
  position:relative; width:100%; height:auto; aspect-ratio:1; object-fit:contain;
  -webkit-user-drag:none; user-select:none;
}
/* Sombra en el suelo: da el «peso» del objeto sin filtros caros. */
.c3d__tarjeta::after{
  content:""; position:absolute; left:22%; right:22%; top:86%; height:14px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(0,0,0,.55), transparent); z-index:-1;
}
.c3d__txt{ display:grid; text-align:center; gap:2px; min-height:44px; padding:0 4px; }
.c3d__txt b{ font-family:var(--ff-display); font-size:15px; font-weight:700; letter-spacing:-.01em; line-height:1.25; }
.c3d__txt i{ font-style:normal; font-size:12.5px; color:var(--text-2); line-height:1.3; }
.c3d__item:not(.is-activo) .c3d__txt{ opacity:0; transition:opacity .2s; }

.c3d__item.is-activo .c3d__halo{ opacity:1; }
.c3d__item.is-activo .c3d__img{ animation:c3d-giro 7s ease-in-out infinite; }
@keyframes c3d-giro{
  0%,100%{ transform:perspective(700px) rotateY(-16deg) translateY(0); }
  50%    { transform:perspective(700px) rotateY(16deg)  translateY(-8px); }
}
@media (prefers-reduced-motion: reduce){
  .c3d__tarjeta{ transform:none; opacity:1; }
  .c3d__item.is-activo .c3d__img{ animation:none; }
}

.c3d__flecha{
  position:absolute; top:42%; z-index:5; width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center; border:0; cursor:pointer; color:var(--text);
  background:rgba(18,18,24,.9); box-shadow:inset 0 0 0 1px var(--line-2), var(--sh-1);
}
.c3d__flecha svg{ width:18px; height:18px; }
.c3d__flecha--prev{ left:max(0px, calc(50% - var(--c3d-w) / 2 - 64px)); }
.c3d__flecha--prev svg{ transform:rotate(90deg); }
.c3d__flecha--next{ right:max(0px, calc(50% - var(--c3d-w) / 2 - 64px)); }
.c3d__flecha--next svg{ transform:rotate(-90deg); }
@media (pointer: coarse){ .c3d__flecha{ display:none; } }

.c3d__panel{ display:grid; gap:10px; justify-items:center; max-width:420px; margin:0 auto; text-align:center; }
.c3d__cuenta{ margin:0; font-size:12px; color:var(--muted); letter-spacing:.02em; }
.c3d__cuenta span{ color:var(--text); font-weight:700; }
.c3d__comprar{ font-size:14px; }
.c3d__ficha{ color:var(--text-2); font-size:13px; text-decoration:underline; text-underline-offset:3px;
  padding:10px 12px; min-height:44px; display:inline-flex; align-items:center; }
.c3d__pago{ margin:0; font-size:12.5px; color:var(--muted); }
.c3d__pago b{ color:var(--accent-3); font-weight:600; }

/* =========================================================
   FICHA · envío gratis, caja y barra de compra   (24-09-2026)
   ========================================================= */
.vnudge{
  display:flex; align-items:center; gap:10px; margin:-4px 0 16px;
  font-size:13px; color:var(--text-2);
}
.vnudge svg{ width:18px; height:18px; color:var(--accent-3); flex:none; }
.vnudge b{ color:var(--text); font-weight:600; }

.vupsell{
  display:flex; align-items:center; gap:14px; margin:18px 0 6px; padding:16px;
  border-radius:var(--r-md); text-decoration:none; color:var(--text);
  background:radial-gradient(120% 140% at 0% 0%, rgba(61,220,151,.12), transparent 60%), var(--surface);
  box-shadow:inset 0 0 0 1px var(--line-2);
}
.vupsell__ic{ flex:none; width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background:rgba(61,220,151,.14); color:var(--accent-3); }
.vupsell__ic svg{ width:20px; height:20px; }
.vupsell__txt{ display:grid; gap:3px; min-width:0; }
.vupsell__txt b{ font-family:var(--ff-display); font-size:14.5px; }
.vupsell__txt b .amount{ font:inherit; }
.vupsell__txt small{ font-size:12.5px; color:var(--text-2); line-height:1.45; }
.vupsell__ir{ margin-left:auto; flex:none; color:var(--text-2); }
.vupsell__ir svg{ width:18px; height:18px; }

/* El selector se deja ver bajo la cabecera fija cuando la barra lo pide. */
.fpicker{ scroll-margin-top:96px; }
.fpicker.is-llamada .fpicker__t{ animation:voss-llamada .9s var(--ease) 2; }
.fpicker.is-llamada .fpicker__grid{ animation:voss-borde 1.8s var(--ease); border-radius:var(--r-md); }
@keyframes voss-llamada{ 0%,100%{ transform:none; } 30%{ transform:translateX(-6px); } 60%{ transform:translateX(6px); } }
@keyframes voss-borde{ 0%,100%{ box-shadow:0 0 0 0 rgba(77,225,255,0); } 30%{ box-shadow:0 0 0 3px rgba(77,225,255,.55); } }

/* Barra: los botones ya no se apagan sin explicación. Hasta que hay
   sabor se ven más discretos, pero al tocarlos llevan al selector. */
.cbar__add{ gap:1px !important; }
.cbar__add span{ font-size:15px; font-weight:700; line-height:1; }
@media (max-width: 760px){
  .cbar .cbar__add{ padding:0 12px; }
  /* Los nombres de sabor son largos: dos líneas mejor que «Cereza bur…». */
  .cbar .cbar__sabor{
    white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    font-size:11px; line-height:1.3;
  }
}
.cbar__mini{ width:40px; height:40px; flex:none; object-fit:contain; border-radius:10px; background:var(--surface-2); }
.cbar__mini[hidden]{ display:none; }
@media (max-width: 760px){
  .cbar:not(.is-listo) [data-cbar-ya]{ background:var(--surface-3); color:var(--text); box-shadow:none; }
  .cbar:not(.is-listo) .cbar__sabor{ color:var(--accent); }
  .cbar.is-listo .cbar__sabor{ color:var(--text-2); }
  .cbar.is-latido{ animation:voss-latido .5s var(--ease); }
}
@keyframes voss-latido{ 0%{ transform:translateY(0) } 40%{ transform:translateY(-4px) } 100%{ transform:translateY(0) } }

/* Cantidad con − y + del tamaño de un dedo. */
.quantity--pasos{ display:inline-flex !important; align-items:center; gap:6px; }
.quantity--pasos input.qty{ width:54px !important; min-height:44px; text-align:center; -moz-appearance:textfield; }
.quantity--pasos input.qty::-webkit-outer-spin-button,
.quantity--pasos input.qty::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.qbtn{
  width:44px; height:44px; border-radius:12px; border:0; cursor:pointer; flex:none;
  background:var(--surface-2); color:var(--text); font-size:20px; line-height:1;
  box-shadow:inset 0 0 0 1px var(--line-2); touch-action:manipulation;
}
.qbtn:active{ transform:scale(.94); }

/* =========================================================
   CARRITO · cuánto falta para el envío gratis
   ========================================================= */
.vgratis{
  margin:0 0 18px; padding:14px 16px; border-radius:var(--r-md);
  background:var(--surface); box-shadow:inset 0 0 0 1px var(--line);
}
.vgratis p{ margin:0 0 10px; font-size:14px; color:var(--text-2); }
.vgratis p b{ color:var(--text); }
.vgratis.is-ok p b{ color:var(--accent-3); }
.vgratis__barra{ display:block; height:7px; border-radius:99px; background:var(--surface-3); overflow:hidden; }
.vgratis__barra span{ display:block; height:100%; background:var(--grad); border-radius:inherit; }
.vgratis.is-ok .vgratis__barra span{ background:var(--accent-3); }

/* =========================================================
   PAGO · resumen arriba, botón con el total
   ========================================================= */
.vresumen{
  position:relative; margin:0 0 22px; padding:14px 16px; border-radius:var(--r-md);
  background:var(--surface); box-shadow:inset 0 0 0 1px var(--line-2);
}
.vresumen:empty{ display:none; }
/* Con el pago a dos columnas (más de 1000 px) el pedido ya se ve a la
   derecha; el resumen es para cuando todo va en una sola columna. */
@media (min-width: 1001px){ .vresumen{ display:none; } }
.vresumen__cab{ display:flex; align-items:center; justify-content:space-between; margin:-4px 0 8px; }
.vresumen__cab span{ font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.vresumen__cab a{ display:inline-flex; align-items:center; min-height:36px; padding:0 2px 0 12px; font-size:13px; color:var(--accent); text-decoration:none; }
.vresumen .vresumen__lineas{ list-style:none; margin:0 0 10px; padding:0; display:grid; gap:8px; }
.vresumen__lineas li{ display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--text-2); }
.vresumen__lineas img{ width:44px; height:44px; object-fit:contain; border-radius:10px; background:var(--surface-2); flex:none; }
.vresumen__lineas span{ min-width:0; }
.vresumen__lineas b{ margin-left:auto; color:var(--text); font-weight:600; white-space:nowrap; }
.vresumen__total{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin:0; padding-top:10px; border-top:1px solid var(--line);
}
.vresumen__total span{ font-size:13px; color:var(--text-2); }
.vresumen__total b{ font-family:var(--ff-display); font-size:20px; }
.vresumen__total b .amount{ font:inherit; }

.vpago-nota{
  display:flex; gap:10px; align-items:flex-start; margin:14px 0 0; padding:12px 14px;
  border-radius:var(--r-sm); background:rgba(61,220,151,.08); color:var(--text-2); font-size:13px; line-height:1.5;
}
.vpago-nota svg{ width:18px; height:18px; flex:none; color:var(--accent-3); margin-top:1px; }
.vpago-nota b{ color:var(--text); }
.vpago-ayuda{ margin:10px 0 0; text-align:center; }
.vpago-ayuda a{ display:inline-flex; align-items:center; min-height:44px; padding:0 10px; font-size:13px; color:var(--text-2); }

.vnota-btn{
  display:block; width:100%; margin:6px 0 16px; padding:12px 14px; min-height:44px; text-align:left;
  border:1px dashed var(--line-2); border-radius:var(--r-sm); background:none; color:var(--text-2);
  font:inherit; font-size:14px; cursor:pointer;
}
#order_comments_field[hidden]{ display:none !important; }

.vgracias{
  margin:0 0 28px; padding:20px; border-radius:var(--r-lg);
  background:var(--surface); box-shadow:inset 0 0 0 1px var(--line-2);
}
.vgracias h3{ font-family:var(--ff-display); font-size:18px; margin:0 0 12px; }
.vgracias ol{ margin:0 0 18px; padding-left:20px; display:grid; gap:10px; color:var(--text-2); font-size:14px; line-height:1.55; }
.vgracias b{ color:var(--text); }
.vgracias b .amount{ font:inherit; }
.vgracias .btn{ white-space:normal; letter-spacing:.06em; }

/* =========================================================
   CREA TU CAJA · el recuento y el botón, siempre a mano
   ========================================================= */
.caja__pie{
  position:sticky; bottom:0; z-index:20; display:grid; gap:8px;
  margin:18px calc(var(--gutter) * -1) 40px; padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  background:rgba(10,10,14,.97); border-top:1px solid var(--line-2);
  box-shadow:0 -12px 30px rgba(0,0,0,.45);
}
.caja__pie .caja__barra{ margin:0; }
.caja__pie .caja__aviso{ margin:0; font-size:12.5px; }
.caja__herr{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 12px; }
.caja__herr span{ flex:1 1 180px; font-size:13px; color:var(--text-2); }
.caja__botones{ display:flex; gap:8px; align-items:center; }
.caja__botones .btn--primary{ margin-left:auto; flex:1 1 auto; min-height:48px; min-width:0; white-space:normal; }
.caja__pie .caja__barra{ min-width:0; }
.caja__pie .caja__progreso{ min-width:0; }
.caja__botones .btn--primary .amount{ font:inherit; }
.caja__pie .btn--lg{ margin-left:0; }
@media (min-width: 761px){
  .caja__pie{ margin-inline:0; border-radius:var(--r-lg); border:1px solid var(--line-2); padding:14px 18px; }
  .caja__botones .btn--primary{ flex:0 0 auto; }
}
.ccard__art, .ccard__txt{ cursor:pointer; }
@media (max-width: 760px){
  .ccard__btn{ width:44px; height:44px; font-size:20px; border-radius:12px; }
  .ccard__pasos input{ width:48px; height:44px; }
  .ccard__art{ width:56px; height:56px; }
  .caja__cab{ padding:18px; }
  .caja__precio{ text-align:left; }
}

/* =========================================================
   PORTADA · botón fijo mientras el carrusel no se ve
   ========================================================= */
.hbar{ display:none; }
@media (max-width: 760px){
  .hbar{
    position:fixed; left:0; right:0; bottom:0; z-index:60; display:block;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:#0A0A0E; border-top:1px solid var(--line-2); box-shadow:0 -10px 30px rgba(0,0,0,.45);
    transition:transform .3s var(--ease);
  }
  .hbar[hidden]{ display:block; transform:translateY(110%); pointer-events:none; }
  .hbar .btn{ min-height:50px; }
}

/* ============ SOBRE VOSSSTORE ([voss_sobre], 25-09-2026) ============ */
.info-body:has(.sobre){ max-width:none; }
.sobre{ display:grid; grid-template-columns:minmax(0,1fr); gap:34px; max-width:980px; }
.sobre h3{ font-family:var(--ff-display); font-size:18px; color:var(--text); margin:0 0 8px; letter-spacing:-.02em; }
.sobre p{ margin:0; }
.sobre figure{ margin:0; }
.sobre__intro{ display:grid; gap:22px; align-items:center; }
.sobre__eyebrow{
  font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); margin:0 0 10px !important;
}
.sobre__t{
  font-family:var(--ff-display); font-weight:800; font-size:clamp(26px,3.6vw,40px) !important;
  letter-spacing:-.04em; line-height:1.06; margin:0 !important; text-wrap:balance;
}
.sobre__lead{ color:var(--text-2); font-size:16px; line-height:1.75; margin-top:14px !important; }
.sobre__lead b{ color:var(--text); }
.sobre__principal img{
  display:block; width:100%; height:auto; aspect-ratio:1; object-fit:cover;
  border-radius:var(--r-lg); box-shadow:0 18px 50px rgba(0,0,0,.45), inset 0 0 0 1px var(--line);
}
.sobre figcaption{ font-size:12.5px; color:var(--muted); margin-top:9px; }
.sobre__bloques{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.sobre__bloque{
  padding:20px; border-radius:var(--r-lg);
  background:linear-gradient(150deg,var(--surface),var(--bg-elev)); box-shadow:inset 0 0 0 1px var(--line);
}
.sobre__bloque p{ font-size:15px; line-height:1.75; }
/* Las fotos de la galería miden 360 px: a cuatro columnas, dentro de los
   980 px de la sección, cada una se pinta a ~235 px y no se estira. */
.sobre__galeria{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.sobre__galeria img{
  display:block; width:100%; height:auto; aspect-ratio:3/4; object-fit:cover;
  border-radius:var(--r-md); box-shadow:inset 0 0 0 1px var(--line);
}
.sobre__puntos{
  list-style:none; padding:0 !important; margin:0 !important;
  display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
}
.sobre__puntos li{
  display:grid; gap:6px; align-content:start; padding:18px; margin:0; border-radius:var(--r-lg);
  background:var(--surface); box-shadow:inset 0 0 0 1px var(--line);
}
.sobre__puntos li::before{ content:none; }
.sobre__puntos i{
  display:grid; place-items:center; width:34px; height:34px; border-radius:10px;
  background:var(--grad-soft); color:var(--accent); margin-bottom:4px;
}
.sobre__puntos i svg{ width:17px; height:17px; }
.sobre__puntos b{ font-family:var(--ff-display); font-size:15px; color:var(--text); }
.sobre__puntos span{ color:var(--text-2); font-size:13.5px; line-height:1.6; }
.sobre__cta{ display:flex; gap:12px; flex-wrap:wrap; }
/* .info-body a pinta los enlaces de color acento; los botones conservan el suyo. */
.sobre__cta .btn--primary{ color:#05050A; }
.sobre__cta .btn--ghost{ color:var(--text); }
@media (min-width:900px){
  .sobre__intro{ grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:44px; }
  .sobre__galeria{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (max-width:600px){
  .sobre{ gap:28px; }
  .sobre__cta .btn{ width:100%; justify-content:center; white-space:normal; text-align:center; }
}

/* ============ VARIOS MODELOS (19-10-2026: Waspe 40K + Razzbar 65K) ============ */
/* Pestañas de modelo: portada (botones) y «Crea tu caja» (enlaces) */
.vmodelos{
  display:flex; gap:6px; width:max-content; max-width:100%; margin:0 auto 22px; padding:6px;
  border-radius:var(--r-full); background:rgba(8,8,11,.88); box-shadow:inset 0 0 0 1px var(--line-2);
}
.vmodelos__tab{
  display:grid; gap:1px; justify-items:center; min-height:52px; padding:8px 20px; border:0; cursor:pointer;
  border-radius:var(--r-full); background:transparent; color:var(--text-2); text-decoration:none;
  font:inherit; line-height:1.2; transition:background var(--t, .2s), color var(--t, .2s);
}
.vmodelos__tab b{ font-family:var(--ff-display); font-size:15px; color:var(--text); }
.vmodelos__tab span{ font-size:12px; color:var(--muted); }
.vmodelos__tab:hover{ background:rgba(255,255,255,.05); }
.vmodelos__tab.is-on{ background:var(--grad); }
.vmodelos__tab.is-on b, .vmodelos__tab.is-on span{ color:#05050A; }
.vmodelos__tab:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.vmodelos__panel[hidden]{ display:none !important; }
.vmodelos--caja{ margin:0 0 20px; }
@media (max-width:600px){
  .vmodelos{ width:100%; }
  .vmodelos__tab{ flex:1; padding:8px 10px; }
}

/* Página «Sabores»: un bloque por modelo */
.fshop__modelo + .fshop__modelo{ margin-top:38px; }
.fshop__t{ font-family:var(--ff-display); font-size:clamp(22px,3vw,28px); color:var(--text); margin:0 0 14px; }
.fshop__t small{ display:block; font-family:inherit; font-size:13px; font-weight:500; color:var(--muted); margin-top:4px; }