/* =========================================================
   VossStore · WooCommerce
   ---------------------------------------------------------
   WooCommerce trae su propio marcado; aquí se le da el aspecto
   del prototipo usando los mismos tokens. Todo lo de este
   archivo depende de tokens.css: no hay ni un color suelto.
   ========================================================= */

.woo-wrap{ padding-bottom:60px; }

/* ---------- Avisos ---------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error{
  list-style:none; margin:0 0 22px; padding:15px 20px;
  border-radius:var(--r-md); background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--line); color:var(--text-2);
  font-size:14.5px; line-height:1.6;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.woocommerce-message{ border-left:3px solid var(--accent-3); }
.woocommerce-info{ border-left:3px solid var(--accent); }
.woocommerce-error{ border-left:3px solid #FF6B6B; }
.woocommerce-message a, .woocommerce-info a, .woocommerce-error a{ color:var(--accent); }
/* WooCommerce pone su icono en un ::before absoluto que se monta encima del
   texto cuando el aviso es flex. Aquí el icono va como punto del borde. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before{ display:none; }
.woocommerce-message .button,
.woocommerce-info .button{ margin-left:auto; }

/* ---------- Botones de WooCommerce con el aspecto del prototipo ---------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wc-block-components-button{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--ff-display); font-weight:600; font-size:13.5px; letter-spacing:.01em;
  padding:12px 22px; border:0; border-radius:var(--r-full); cursor:pointer;
  background:rgba(255,255,255,.06); color:var(--text);
  box-shadow:inset 0 0 0 1px var(--line-2);
  transition:transform var(--t) var(--ease), background var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover{ background:rgba(255,255,255,.1); transform:translateY(-1px); }

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce button.single_add_to_cart_button{
  background:var(--grad); color:#06060A; box-shadow:var(--sh-glow);
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce button.single_add_to_cart_button:hover{
  background:var(--grad-rev); transform:translateY(-2px);
}
.woocommerce .button:disabled,
.woocommerce button.button:disabled[disabled]{ opacity:.45; cursor:not-allowed; transform:none; }

/* ---------- Rejilla de productos ---------- */
/* Rejilla que se adapta al número de productos, en vez de dejar huecos. */
.woocommerce ul.products,
.woocommerce-page ul.products{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:20px;
  margin:0; padding:0; list-style:none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after{ display:none; }

/* OJO con la especificidad: WooCommerce fija el ancho de cada tarjeta en
   porcentaje con `ul.products.columns-N li.product`, que gana a un selector
   sin la clase de columnas. Dentro de una rejilla ese porcentaje se calcula
   sobre la celda, así que las tarjetas salían a 90 px. */
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product,
.woocommerce ul.products li.product{
  width:auto; margin:0; float:none; padding:0;
  position:relative; display:flex; flex-direction:column;
  background:linear-gradient(168deg, var(--surface), var(--bg-elev));
  border-radius:var(--r-lg); overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--line);
  transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.woocommerce ul.products li.product:hover{
  transform:translateY(-5px);
  box-shadow:inset 0 0 0 1px var(--line-2), 0 26px 54px rgba(0,0,0,.5);
}
.woocommerce ul.products li.product > a{ display:block; color:inherit; text-decoration:none; }
.woocommerce ul.products li.product img{
  width:100%; height:230px; object-fit:contain; margin:0; padding:22px 18px 6px;
  background:radial-gradient(120% 90% at 50% 0%, rgba(123,92,255,.12), transparent 62%);
  filter:drop-shadow(0 18px 22px rgba(0,0,0,.45));
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--ff-display); font-size:16px; font-weight:600; letter-spacing:-.02em;
  color:var(--text); padding:4px 18px 0; margin:0;
}
.woocommerce ul.products li.product .price{
  display:block; padding:8px 18px 0; color:var(--text);
  font-family:var(--ff-display); font-size:18px; font-weight:700;
}
.woocommerce ul.products li.product .price del{ color:var(--muted); font-size:14px; font-weight:400; }
.woocommerce ul.products li.product .price ins{ text-decoration:none; }
.woocommerce ul.products li.product .button{ margin:14px 18px 18px; }
.woocommerce ul.products li.product .added_to_cart{ margin:0 18px 18px; font-size:12.5px; color:var(--accent); }

/* Insignias */
.pcard__badges{ position:absolute; top:14px; left:14px; z-index:2; display:flex; gap:6px; flex-wrap:wrap; }
.badge{
  font-family:var(--ff-display); font-size:10px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; padding:5px 10px; border-radius:var(--r-full);
  background:rgba(0,0,0,.55); color:var(--text); backdrop-filter:blur(8px);
  box-shadow:inset 0 0 0 1px var(--line-2);
}
.badge--best{ background:var(--grad); color:#06060A; box-shadow:none; }
.badge--out{ background:rgba(0,0,0,.7); color:var(--muted); }
.badge--sale{ background:var(--warn); color:#0A0A0C; box-shadow:none; }
.woocommerce span.onsale{ display:none; }

/* Orden y contador */
.woocommerce .woocommerce-result-count{ color:var(--muted); font-size:13px; margin:0 0 18px; }
.woocommerce .woocommerce-ordering{ margin:0 0 18px; }
.woocommerce .woocommerce-ordering select,
.woocommerce select, .woocommerce input[type=text], .woocommerce input[type=email],
.woocommerce input[type=tel], .woocommerce input[type=password], .woocommerce input[type=number],
.woocommerce textarea, .select2-container .select2-selection--single{
  background:var(--surface-2); color:var(--text); border:0;
  box-shadow:inset 0 0 0 1px var(--line-2); border-radius:var(--r-sm);
  padding:11px 14px; font-family:var(--ff-body); font-size:14px; width:100%;
}
.woocommerce input:focus, .woocommerce select:focus, .woocommerce textarea:focus{
  outline:2px solid var(--accent); outline-offset:1px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{ color:var(--text); line-height:1.6; }
.select2-dropdown{ background:var(--surface-2); border:1px solid var(--line-2); color:var(--text); }
.select2-container--default .select2-results__option--highlighted[aria-selected]{ background:var(--accent-2); }

/* ---------- Ficha de producto ---------- */
.woocommerce div.product{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(28px,4vw,64px); align-items:start; }
.woocommerce div.product div.images,
.woocommerce div.product .woocommerce-product-gallery{ width:100% !important; float:none; margin:0; }
.woocommerce div.product div.summary{ width:100%; float:none; margin:0; }
.woocommerce #content div.product div.images,
.woocommerce #content div.product div.summary{ width:100%; float:none; }
.woocommerce div.product .woocommerce-product-gallery__wrapper{
  border-radius:var(--r-xl); overflow:hidden;
  background:radial-gradient(120% 90% at 50% 0%, rgba(123,92,255,.16), transparent 62%),
             linear-gradient(170deg,#101016,#08080C);
  box-shadow:inset 0 0 0 1px var(--line);
}
.woocommerce div.product .woocommerce-product-gallery img{ padding:6%; }
.woocommerce div.product .flex-control-thumbs{ display:flex; gap:10px; margin-top:14px; padding:0; }
.woocommerce div.product .flex-control-thumbs li{ width:auto; flex:1; margin:0; list-style:none; }
.woocommerce div.product .flex-control-thumbs img{
  border-radius:var(--r-md); background:linear-gradient(170deg,#101016,#0A0A0E);
  box-shadow:inset 0 0 0 1px var(--line); padding:8%; opacity:.75; transition:opacity var(--t);
}
.woocommerce div.product .flex-control-thumbs img.flex-active,
.woocommerce div.product .flex-control-thumbs img:hover{ opacity:1; }

.woocommerce div.product .summary{ width:auto; float:none; margin:0; padding-top:4px; }
.woocommerce div.product .product_title{
  font-family:var(--ff-display); font-weight:800; letter-spacing:-.04em; line-height:1.02;
  font-size:clamp(30px,4.4vw,52px); color:var(--text); margin:0 0 16px;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price{
  font-family:var(--ff-display); font-size:36px; font-weight:800; letter-spacing:-.03em;
  color:var(--text); margin:20px 0 6px;
}
.woocommerce div.product .woocommerce-product-details__short-description{
  color:var(--text-2); font-size:15px; line-height:1.7; max-width:52ch;
}
.woocommerce div.product .stock{ font-size:13px; }
.woocommerce div.product .stock.in-stock{ color:var(--accent-3); }
.woocommerce div.product .stock.out-of-stock{ color:var(--warn); }

/* Variaciones: el desplegable de sabor */
.woocommerce div.product form.cart{ margin-top:22px; }
.woocommerce table.variations{ width:100%; border:0; margin:0 0 18px; }
.woocommerce table.variations td, .woocommerce table.variations th{
  border:0; padding:0 0 12px; display:block; text-align:left;
}
.woocommerce table.variations th.label label{
  font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin-bottom:8px; display:block;
}
.woocommerce a.reset_variations{ font-size:12.5px; color:var(--muted); }
.woocommerce div.product .woocommerce-variation-price{ margin-bottom:14px; }
.woocommerce div.product form.cart .quantity{ margin-right:12px; }
.woocommerce .quantity input.qty{
  width:88px; text-align:center; background:var(--surface-2); color:var(--text);
  box-shadow:inset 0 0 0 1px var(--line-2); border:0; border-radius:var(--r-full); padding:12px 8px;
}
.woocommerce div.product form.cart .button{ padding:14px 30px; font-size:14.5px; }
.woocommerce .product_meta{ margin-top:24px; font-size:12.5px; color:var(--muted); }
.woocommerce .product_meta a{ color:var(--text-2); }

/* Pestañas */
.woocommerce div.product .woocommerce-tabs{ grid-column:1 / -1; margin-top:48px; }
.woocommerce div.product .woocommerce-tabs ul.tabs{ padding:0; margin:0 0 22px; display:flex; gap:8px; flex-wrap:wrap; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before{ display:none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  background:var(--chip-bg, rgba(255,255,255,.05)); border:0; border-radius:var(--r-full);
  box-shadow:inset 0 0 0 1px var(--line); margin:0; padding:0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after{ display:none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  padding:9px 18px; font-family:var(--ff-display); font-size:13px; font-weight:600; color:var(--text-2);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{ background:var(--grad); box-shadow:none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{ color:#06060A; }
.woocommerce div.product .woocommerce-tabs .panel{
  color:var(--text-2); font-size:15px; line-height:1.8; max-width:760px; margin:0;
}
.woocommerce div.product .woocommerce-tabs .panel h2{
  font-family:var(--ff-display); font-size:22px; color:var(--text); margin:0 0 14px;
}
.woocommerce div.product .woocommerce-tabs .panel h3{
  font-family:var(--ff-display); font-size:18px; color:var(--text); margin:26px 0 10px;
}
.woocommerce div.product .woocommerce-tabs .panel ul{ padding-left:18px; }

/* Relacionados y ventas cruzadas */
.woocommerce .related, .woocommerce .upsells, .woocommerce .cross-sells{ grid-column:1 / -1; margin-top:56px; }
.woocommerce .related > h2, .woocommerce .upsells > h2, .woocommerce .cross-sells > h2{
  font-family:var(--ff-display); font-size:26px; letter-spacing:-.03em; color:var(--text); margin:0 0 22px;
}

/* ---------- Carrito ---------- */
.woocommerce table.shop_table{
  border:0; border-collapse:collapse; width:100%;
  background:var(--surface); border-radius:var(--r-lg); overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--line);
}
.woocommerce table.shop_table th{
  background:transparent; color:var(--muted); font-family:var(--ff-body);
  font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  padding:16px 18px; border-bottom:1px solid var(--line-2);
}
.woocommerce table.shop_table td{
  padding:16px 18px; border-top:1px solid var(--line); color:var(--text-2); font-size:14.5px;
}
.woocommerce table.shop_table td.product-name a{ color:var(--text); font-weight:600; }
.woocommerce table.shop_table img{ width:62px; border-radius:var(--r-sm); background:var(--surface-2); }
.woocommerce a.remove{
  color:var(--muted) !important; font-size:20px; line-height:1;
  width:26px; height:26px; border-radius:50%;
}
.woocommerce a.remove:hover{ background:rgba(255,107,107,.16); color:#FF8A8A !important; }
.woocommerce .cart_totals h2, .woocommerce-checkout h3{
  font-family:var(--ff-display); font-size:20px; color:var(--text); margin:0 0 16px; letter-spacing:-.02em;
}
.woocommerce .cart-collaterals .cart_totals{ width:100%; float:none; }
.woocommerce-cart .cart-collaterals{ margin-top:32px; }
.woocommerce .cart_totals table.shop_table td, .woocommerce .cart_totals table.shop_table th{ padding:14px 18px; }
.woocommerce ul#shipping_method{ list-style:none; padding:0; margin:0; }
.woocommerce ul#shipping_method li{ padding:4px 0; color:var(--text-2); }
.woocommerce .woocommerce-shipping-destination{ color:var(--muted); font-size:12.5px; }

/* ---------- Finalizar compra ---------- */
/* Datos a la izquierda y resumen a la derecha, como en el prototipo.
   WooCommerce los saca como tres hermanos sueltos dentro del formulario. */
.woocommerce-checkout form.checkout{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,400px);
  gap:14px 36px; align-items:start;
}
.woocommerce-checkout form.checkout #customer_details{ grid-column:1; grid-row:1 / span 2; min-width:0; }
.woocommerce-checkout form.checkout #order_review_heading{ grid-column:2; grid-row:1; margin:0; }
.woocommerce-checkout form.checkout #order_review{ grid-column:2; grid-row:2; min-width:0; }

/* Dentro de los datos del cliente, una sola columna: la segunda va vacía
   mientras no se pida dirección de envío distinta. */
.woocommerce-checkout .col2-set{ display:block; }
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2{ width:100%; float:none; margin:0; }
.woocommerce-checkout .col2-set .col-2:empty{ display:none; }
.woocommerce form .form-row{ padding:0; margin:0 0 14px; }
.woocommerce form .form-row label{
  display:block; font-size:12px; color:var(--muted); margin-bottom:6px; letter-spacing:.02em;
}
.woocommerce form .form-row .required{ color:var(--accent); text-decoration:none; }
/* WooCommerce estiliza estos campos con su propia hoja: hay que igualar
   especificidad o los deja en blanco sobre el fondo oscuro. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.woocommerce-page form .form-row textarea{
  background:var(--surface-2); color:var(--text); border:0;
  box-shadow:inset 0 0 0 1px var(--line-2); border-radius:var(--r-sm);
  padding:12px 14px; font-family:var(--ff-body); font-size:14.5px; line-height:1.4; width:100%;
}
.woocommerce form .form-row input.input-text::placeholder,
.woocommerce form .form-row textarea::placeholder{ color:var(--muted); }
.woocommerce form .form-row.woocommerce-invalid input.input-text{
  box-shadow:inset 0 0 0 1.5px #FF6B6B;
}
.woocommerce form .form-row-first, .woocommerce form .form-row-last{ width:calc(50% - 7px); }
.select2-container--default .select2-selection--single{
  background:var(--surface-2); border:0; box-shadow:inset 0 0 0 1px var(--line-2);
  border-radius:var(--r-sm); height:auto; padding:10px 14px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow{ top:8px; }
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper{ margin:18px 0; }
.woocommerce form .form-row.validate-required label .optional{ color:var(--muted); }
.woocommerce-checkout #payment{
  background:var(--surface); border-radius:var(--r-lg); padding:22px;
  box-shadow:inset 0 0 0 1px var(--line);
}
.woocommerce-checkout #payment ul.payment_methods{ border:0; padding:0; }
.woocommerce-checkout #payment div.payment_box{
  background:var(--surface-2); color:var(--text-2); border-radius:var(--r-md); font-size:13.5px;
}
.woocommerce-checkout #payment div.payment_box::before{ display:none; }
.woocommerce-checkout #payment div.form-row.place-order{ padding:18px 0 0; }

/* ---------- Mi cuenta ---------- */
.woocommerce-account .woocommerce-MyAccount-navigation{ width:24%; }
.woocommerce-account .woocommerce-MyAccount-navigation ul{ list-style:none; padding:0; margin:0; display:grid; gap:3px; }
.woocommerce-account .woocommerce-MyAccount-navigation li a{
  display:block; padding:10px 14px; border-radius:var(--r-sm); color:var(--text-2); font-size:14px;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{
  background:rgba(255,255,255,.05); color:var(--text);
}
.woocommerce-account .woocommerce-MyAccount-content{ width:72%; color:var(--text-2); }

/* ---------- Paginación ---------- */
.woocommerce nav.woocommerce-pagination ul{ border:0; display:flex; gap:6px; justify-content:center; }
.woocommerce nav.woocommerce-pagination ul li{ border:0; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
  border-radius:var(--r-full); padding:9px 15px; color:var(--text-2);
  box-shadow:inset 0 0 0 1px var(--line); background:transparent;
}
.woocommerce nav.woocommerce-pagination ul li span.current{ background:var(--grad); color:#06060A; box-shadow:none; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px){
  .woocommerce ul.products{ grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); }
}
@media (max-width: 1000px){
  .woocommerce div.product{ grid-template-columns:minmax(0,1fr); }
  .woocommerce-checkout form.checkout{ grid-template-columns:minmax(0,1fr); }
  .woocommerce-checkout form.checkout #customer_details,
  .woocommerce-checkout form.checkout #order_review_heading,
  .woocommerce-checkout form.checkout #order_review{ grid-column:1; grid-row:auto; }
  .woocommerce-account .woocommerce-MyAccount-navigation,
  .woocommerce-account .woocommerce-MyAccount-content{ width:100%; float:none; }
}
@media (max-width: 760px){
  .woocommerce ul.products{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; gap:14px; }
  .woocommerce ul.products li.product img{ height:150px; padding:14px 12px 4px; }
  .woocommerce ul.products li.product .woocommerce-loop-product__title{ font-size:14px; padding:4px 13px 0; }
  .woocommerce ul.products li.product .price{ padding:6px 13px 0; font-size:16px; }
  .woocommerce ul.products li.product .button{ margin:10px 13px 14px; width:calc(100% - 26px); }
  .woocommerce table.shop_table img{ width:46px; }
}

/* ---------- Buscador emergente ---------- */
.searchbox{
  position:fixed; inset:0; z-index:200; display:none;
  align-items:flex-start; justify-content:center; padding:14vh 20px 0;
  background:rgba(4,4,8,.72); backdrop-filter:blur(10px);
}
.searchbox.is-open{ display:flex; }
.searchbox form{
  display:flex; gap:10px; width:min(620px,100%);
  background:var(--surface); padding:12px; border-radius:var(--r-lg);
  box-shadow:inset 0 0 0 1px var(--line-2), var(--sh-2);
}
.searchbox input[type=search]{
  flex:1; min-width:0; background:transparent; border:0; color:var(--text);
  font-size:16px; padding:10px 14px; outline:none;
}

/* =========================================================
   Cabecera de página, migas y cuerpo de texto
   (portado de views.css del prototipo: son las clases que
   usan header.php, page.php y woocommerce.php)
   ========================================================= */
.page-head{ padding:clamp(30px,4vw,54px) 0 clamp(24px,3vw,40px); }
.crumbs{ display:flex; align-items:center; gap:9px; font-size:11.5px; color:var(--muted); letter-spacing:.06em; flex-wrap:wrap; }
.crumbs a{ color:var(--muted); text-decoration:none; }
.crumbs a:hover{ color:var(--accent); }
.crumbs__now{ color:var(--text-2); }
.page-title{ font-family:var(--ff-display); font-weight:800; font-size:clamp(34px,5.6vw,68px);
  letter-spacing:-.04em; line-height:1.02; margin-top:16px; }
.page-lead{ color:var(--text-2); margin-top:14px; max-width:60ch; font-size:clamp(14.5px,1.5vw,17px); }

.info-body{ max-width:760px; color:var(--text-2); font-size:15px; line-height:1.8; padding-bottom:40px; }
.info-body h2{ font-family:var(--ff-display); font-size:24px; color:var(--text); margin:36px 0 12px; }
.info-body h3{ font-family:var(--ff-display); font-size:20px; color:var(--text); margin:32px 0 12px; }
.info-body p{ margin:0 0 14px; }
.info-body a{ color:var(--accent); }
.info-body ul, .info-body ol{ padding-left:20px; margin:0 0 16px; }
.info-body li{ margin-bottom:7px; }

.postlist{ display:grid; gap:18px; max-width:760px; padding-bottom:40px; }
.postcard{ padding:22px; border-radius:var(--r-lg); background:var(--surface); box-shadow:inset 0 0 0 1px var(--line); }
.postcard h2{ font-family:var(--ff-display); font-size:20px; margin:0 0 8px; }
.postcard h2 a{ color:var(--text); text-decoration:none; }
.postcard__ex{ color:var(--text-2); font-size:14.5px; }
.pagenav{ padding:20px 0 60px; }

/* =========================================================
   PORTADA
   ========================================================= */
.section{ padding:clamp(44px,6vw,86px) 0; }
.section:first-child{ padding-top:clamp(28px,4vw,48px); }

.hero{ position:relative; overflow:hidden; padding:clamp(30px,5vw,70px) 0 clamp(40px,6vw,80px); }
.hero__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,4vw,60px); align-items:center; }
.hero__eyebrow{
  font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); margin:0 0 18px;
}
.hero__title{
  font-family:var(--ff-display); font-weight:800; font-size:clamp(38px,6.4vw,84px);
  letter-spacing:-.05em; line-height:.94; margin:0; text-wrap:balance;
}
.hero__title em{
  font-style:italic; background:var(--grad-text); -webkit-background-clip:text;
  background-clip:text; color:transparent;
}
.hero__sub{ color:var(--text-2); font-size:clamp(15px,1.6vw,17px); margin:20px 0 0; max-width:44ch; }
.hero__actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }
.hero__facts{ display:flex; gap:20px; flex-wrap:wrap; margin-top:26px; color:var(--text-2); font-size:12.5px; }
.hero__facts span{ display:inline-flex; align-items:center; gap:8px; }
.hero__facts svg{ width:16px; height:16px; color:var(--accent); }

.hero__visual{ position:relative; display:grid; place-items:center; min-height:clamp(260px,34vw,440px); }
.hero__img{
  width:100%; max-height:clamp(260px,34vw,440px); object-fit:contain;
  filter:drop-shadow(0 40px 50px rgba(0,0,0,.6));
  animation:voss-flota 8s ease-in-out infinite;
}
@keyframes voss-flota{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-12px) } }
@media (prefers-reduced-motion: reduce){ .hero__img{ animation:none; } }
.hero__chip{
  position:absolute; display:grid; gap:2px; padding:11px 16px; border-radius:var(--r-full);
  background:rgba(12,12,17,.72); backdrop-filter:blur(12px);
  box-shadow:inset 0 0 0 1px var(--line-2), var(--sh-1); white-space:nowrap;
}
.hero__chip small{ font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.hero__chip b{ font-family:var(--ff-display); font-size:13.5px; font-weight:700; }
.hero__chip--precio{ top:8%; left:2%; }
.hero__chip--envio{ top:46%; right:-2%; }
.hero__chip--puffs{ bottom:6%; left:14%; }

.benefits{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--line);
  border-radius:var(--r-lg); overflow:hidden; }
.benefit{ display:grid; gap:7px; padding:24px 22px; background:var(--bg-elev); }
.benefit i{ display:grid; place-items:center; width:36px; height:36px; border-radius:11px;
  background:var(--grad-soft); color:var(--accent); }
.benefit i svg{ width:18px; height:18px; }
.benefit b{ font-family:var(--ff-display); font-size:15px; margin-top:5px; }
.benefit span{ color:var(--text-2); font-size:13px; line-height:1.55; }

.sechead{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:26px; flex-wrap:wrap; }
.sechead__eyebrow{ font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin:0 0 8px; }
.sechead__t{ font-family:var(--ff-display); font-weight:800; font-size:clamp(26px,3.6vw,44px);
  letter-spacing:-.04em; line-height:1.04; margin:0; }

.boxcta{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,4vw,54px);
  align-items:center; padding:clamp(24px,3vw,40px); border-radius:var(--r-xl);
  background:radial-gradient(90% 120% at 100% 0%, rgba(123,92,255,.16), transparent 60%),
             linear-gradient(150deg,var(--surface),var(--bg-elev));
  box-shadow:inset 0 0 0 1px var(--line); }
.boxcta__text{ color:var(--text-2); font-size:15px; margin:16px 0 0; max-width:46ch; }
.boxcta__specs{ display:flex; gap:26px; flex-wrap:wrap; margin:24px 0 26px; }
.boxcta__specs div{ display:grid; gap:2px; min-width:0; }
.boxcta__specs b{ font-family:var(--ff-display); font-size:22px; font-weight:800; letter-spacing:-.03em; }
.boxcta__specs span{ font-size:11.5px; color:var(--muted); }
.boxcta__visual img{ width:100%; object-fit:contain; filter:drop-shadow(0 30px 44px rgba(0,0,0,.55)); }

@media (max-width: 1000px){
  .hero__grid{ grid-template-columns:minmax(0,1fr); text-align:center; }
  .hero__visual{ order:-1; }
  .hero__sub{ margin-inline:auto; }
  .hero__actions, .hero__facts{ justify-content:center; }
  .benefits{ grid-template-columns:1fr 1fr; }
  .boxcta{ grid-template-columns:minmax(0,1fr); }
  .boxcta__visual{ order:-1; }
}
@media (max-width: 620px){
  .hero__chip--envio{ right:0; }
  .hero__chip--puffs{ left:4%; }
  .benefits{ grid-template-columns:1fr; }
}

/* =========================================================
   ZONA VIP
   ========================================================= */
.nav__link--vip{ display:inline-flex; align-items:center; gap:6px; }
.nav__link--vip svg{ width:13px; height:13px; opacity:.6; }

.vip-tag{
  display:inline-block; margin-right:8px; padding:3px 8px; border-radius:var(--r-full);
  background:var(--grad); color:#06060A; font-family:var(--ff-display);
  font-size:9.5px; font-weight:800; letter-spacing:.14em;
}

/* Formulario del PIN */
.vipgate{
  max-width:400px; margin:0 auto 80px; padding:32px 30px 28px;
  border-radius:var(--r-xl); text-align:center;
  background:radial-gradient(120% 90% at 50% 0%, rgba(123,92,255,.14), transparent 62%),
             linear-gradient(168deg,var(--surface),var(--bg-elev));
  box-shadow:inset 0 0 0 1px var(--line-2), var(--sh-2);
}
.vipgate__label{
  display:block; font-size:10.5px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); margin-bottom:12px;
}
.vipgate__input{
  width:100%; text-align:center; background:var(--surface-2); border:0; color:var(--text);
  box-shadow:inset 0 0 0 1px var(--line-2); border-radius:var(--r-md);
  padding:16px 14px; margin-bottom:16px;
  font-family:var(--ff-display); font-size:26px; font-weight:700; letter-spacing:.34em;
}
.vipgate__input:focus{ outline:2px solid var(--accent); outline-offset:2px; }
.vipgate__error{
  margin:-6px 0 14px; font-size:13px; color:#FF8A8A;
}
.vipgate__ayuda{ margin:16px 0 0; font-size:12px; color:var(--muted); line-height:1.6; }

.vip-salir{
  text-align:center; color:var(--muted); font-size:13px; margin:0;
  padding-top:26px; border-top:1px solid var(--line);
}
.vip-salir b{ color:var(--text-2); }
.vip-salir a{ color:var(--accent); margin-left:6px; }

/* Zona VIP: la cabecera cambia de cara al pasar la puerta */
.announce--vip{ background:linear-gradient(90deg,#0B0B10,#171429,#0B0B10); }
.announce--vip b{ color:var(--accent-2); }
.vip-tag--hdr{ margin:0 0 0 10px; align-self:center; }
.nav__link--salir{ color:var(--muted); }
.nav__link--salir:hover{ color:var(--text); }

/* La caja de 10 no se compra suelta: se monta */
.cajacta{
  margin:22px 0 0; padding:20px 22px; border-radius:var(--r-lg);
  background:radial-gradient(90% 120% at 100% 0%, var(--grad-soft), transparent 60%),
             linear-gradient(150deg,var(--surface),var(--bg-elev));
  box-shadow:inset 0 0 0 1px var(--line);
}
.cajacta__t{ font-family:var(--ff-display); font-size:16px; font-weight:700; margin:0; letter-spacing:-.02em; }
.cajacta__d{ color:var(--text-2); font-size:14px; line-height:1.6; margin:8px 0 18px; }

/* =========================================================
   PALETA DE LA ZONA VIP
   ---------------------------------------------------------
   Mismo fondo oscuro, otro acento: la pública va en cian y violeta,
   la VIP en rojo. Se redefinen solo los tokens, así que todo lo demás
   —botones, chips, degradados, focos— cambia solo.
   ========================================================= */
body.voss-vip,
body.voss-vip-piel{
  --accent:        #FF3B4E;
  --accent-2:      #C31432;
  --accent-3:      #FF8A5B;   /* éxito / envío gratis, en cálido */
  --grad:          linear-gradient(118deg, #FF3B4E 0%, #C31432 100%);
  --grad-rev:      linear-gradient(118deg, #C31432 0%, #FF3B4E 100%);
  --grad-soft:     linear-gradient(118deg, rgba(255,59,78,.16), rgba(195,20,50,.16));
  --grad-text:     linear-gradient(100deg, #FFFFFF 10%, #FFB4B8 45%, #FF6B7A 90%);
  --sh-glow:       0 20px 60px rgba(255,59,78,.22);
  --surface:       #16100F;
  --surface-2:     #1E1513;
  --surface-3:     #2A1B19;
  --bg-elev:       #100A0A;
  --line:          rgba(255,180,184,.08);
  --line-2:        rgba(255,180,184,.16);
}
/* Los focos ambientales del fondo, también en rojo */
body.voss-vip-piel .bg-fx__blob--a{ background:radial-gradient(circle, rgba(255,59,78,.20), transparent 70%); }
body.voss-vip-piel .bg-fx__blob--b{ background:radial-gradient(circle, rgba(195,20,50,.16), transparent 70%); }
body.voss-vip .announce--vip{ background:linear-gradient(90deg,#0C0707,#2A0F14,#0C0707); }
body.voss-vip .announce--vip b{ color:var(--accent); }