h1,h2,h3,h4{font-family:var(--font-display);line-height:1.08;letter-spacing:-.02em;margin:0;font-weight:700;text-wrap:balance}
h1:focus{outline:none}
p{margin:0 0 1rem;text-wrap:pretty}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
button,a,select,summary,label{touch-action:manipulation}
ul,ol{margin:0;padding:0}
.wrap{width:min(100% - 2.5rem,var(--maxw));margin-inline:auto}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.6rem 1rem;z-index:100;border-radius:0 0 8px 0}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.mono{font-family:var(--font-mono);font-size:.9em;letter-spacing:0}
.lead{font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--ink-2);max-width:56ch}
.fine{font-size:.88rem;color:var(--ink-2)}

/* Entrada animada de las secciones (solo inicio) */
#app{overflow-x:clip}
.rv{opacity:0;transform:translate3d(var(--rx,0),var(--ry,0),0);transition:opacity .7s cubic-bezier(.22,.8,.24,1),transform .85s cubic-bezier(.22,.8,.24,1)}
.rv-l{--rx:-56px}
.rv-r{--rx:56px}
.rv-u{--ry:34px}
.rv.in{opacity:1;transform:none}

/* Barra de prototipo */
.proto-bar{background:var(--amber-soft);color:var(--amber);font-size:.86rem;text-align:center;padding:.45rem 1rem;font-weight:500}
.pb-short{display:none}

/* Encabezado */
.site-header{position:sticky;top:0;z-index:30;background-color:#DCE0E5;background-image:var(--metal);background-size:300px 140px,100% 100%,100% 100%;background-repeat:repeat,no-repeat,no-repeat;border-bottom:1px solid transparent;border-image:var(--chrome-line) 1;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 10px 20px -14px rgba(22,32,43,.45)}
.header-in{display:flex;align-items:center;gap:1.5rem;min-height:68px;width:min(100% - 1.5rem,calc(var(--maxw) + 5rem))}
.logo{font-family:var(--font-display);font-weight:800;font-size:1.7rem;letter-spacing:-.05em;text-decoration:none;display:inline-flex;align-items:baseline}
.logo{--ufo-body:currentColor;--ufo-dome:var(--verify);--ufo-light:var(--bg);
  /* sombras suaves en capas: dan volumen a las letras, como si flotaran sobre la página */
  text-shadow:0 1px 0 rgba(255,255,255,.75),0 3px 5px rgba(22,32,43,.2),0 8px 14px rgba(22,32,43,.13)}
@media (min-width:1100px){.header-in{width:min(100% - 1rem,calc(var(--maxw) + 9rem))}}
@media (min-width:1100px){.site-header .logo{font-size:2rem}}
@media (min-width:1100px) and (max-width:1279px){.site-header .logo{font-size:1.85rem}}
.logo-ufo{filter:drop-shadow(0 4px 3px rgba(22,32,43,.28));width:1.5em;height:1.02em;margin-left:.14em;align-self:center;margin-top:-.28em;flex:none;overflow:visible;transform:rotate(-8deg);transform-origin:50% 60%}
.nav{display:flex;gap:2.25rem;margin-left:auto}
.nav a{white-space:nowrap;text-decoration:none;font-weight:600;font-size:1.1rem;color:var(--ink);padding:0;border-bottom:2px solid transparent;text-shadow:0 1px 0 rgba(255,255,255,.7),0 2px 4px rgba(22,32,43,.22)}
.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ink)}
@media (max-width:1279px){.nav{gap:1.3rem}}
@media (max-width:1199px){.nav a{font-size:1rem}}
.menu-btn{display:none;flex:none;width:2.75rem;height:2.75rem;border:1.5px solid var(--ink);border-radius:50%;background:rgba(255,255,255,.38);align-items:center;justify-content:center}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform .55s cubic-bezier(.22,.8,.24,1),background .4s}
.menu-btn span{position:relative}
.menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0}
.menu-btn span::before{top:-6px}
.menu-btn span::after{top:6px}
.menu-btn[aria-expanded="true"] span{background:transparent}
.menu-btn[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}
.cart-btn{background:rgba(255,255,255,.38);display:inline-flex;align-items:center;gap:.5rem;background:transparent;border:1.5px solid var(--ink);border-radius:999px;padding:.5rem 1rem;font-weight:600}
.count{display:inline-grid;place-items:center;min-width:1.5rem;height:1.5rem;padding:0 .35rem;border-radius:999px;background:var(--ink);color:#fff;font-size:.8rem}

/* Botones */
/*
  CORRECCIÓN: faltaba "box-sizing:border-box" aquí. Sin esto, cuando
  un botón intenta estirarse al 100% del ancho de su caja (como pasa
  con "Ver producto" en móvil, cuando precio y botón se acomodan uno
  encima del otro), su propio relleno interno (padding) se SUMA por
  encima de ese 100%, en vez de contarse adentro. El botón terminaba
  más ancho que su tarjeta, y como la tarjeta recorta lo que se sale
  de ella, el lado derecho del botón (el borde redondeado) quedaba
  cortado. Por eso solo se veía mal en móvil: en pantallas grandes el
  botón nunca intenta llegar al 100% del ancho, así que el problema
  nunca se nota ahí.
*/
.btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.85rem 1.5rem;border-radius:999px;border:1.5px solid var(--ink);font-weight:600;text-decoration:none;background:transparent;line-height:1.2;transition:background .15s,color .15s}
.btn-primary{background:var(--ink);color:#fff}
.btn-chrome{position:relative;isolation:isolate;overflow:hidden;color:var(--ink);border-color:#56606B;background:linear-gradient(180deg,#F6F8FA 0%,#E6EAEE 32%,#C9CFD6 50%,#E3E7EB 68%,#EEF1F3 100%);text-shadow:0 1px 0 rgba(255,255,255,.65);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 8px 16px -10px rgba(22,32,43,.55);transition:color 0s linear .22s,text-shadow 0s linear .22s,border-color .45s ease}
.btn-chrome::before,.btn-chrome::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
.btn-chrome::before{background:var(--ink);opacity:0;transition:opacity .45s ease}
/* Destello cromado: espera a la izquierda mientras el cursor está encima y cruza el botón al soltarlo */
.btn-chrome::after{background:linear-gradient(105deg,rgba(60,72,86,0) 22%,rgba(60,72,86,.55) 50%,rgba(60,72,86,0) 78%);transform:translateX(90%);transition:transform .85s cubic-bezier(.3,.2,.3,1)}
.btn-sm{padding:.55rem 1.05rem;font-size:.92rem}
.btn-block{width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.link{font-weight:600;text-underline-offset:4px}

/* Héroe */
.hero{padding:clamp(2.2rem,5vw,4.5rem) 0 clamp(2.5rem,5vw,4rem)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.8rem,4.5vw,4.5rem);align-items:center}
.hero h1{font-size:clamp(2.5rem,5.2vw,4.2rem);font-weight:800;letter-spacing:-.045em;line-height:1;margin-bottom:1.3rem;text-align:center;text-shadow:0 2px 4px rgba(22,32,43,.16),0 6px 14px rgba(22,32,43,.10)}
.cta-row{display:flex;flex-wrap:wrap;gap:.8rem;margin:1.8rem 0 1.6rem}
.hero .cta-row{justify-content:center}
@media (min-width:681px){.hero .cta-row{margin:2.6rem 0 2.4rem}}
@media (min-width:981px){.hero-copy{align-self:start;margin-top:2.6rem}}
.btn-lg{padding:.95rem 1.6rem;font-size:1.02rem}
.btn-chrome.btn-lg{padding:1.15rem 3rem;font-size:1.15rem}
.hero-facts{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:.5rem 1.4rem;font-size:.82rem;color:var(--ink-2);max-width:34rem}
.hero-facts li{display:flex;align-items:center;gap:.45rem}
.hero-facts svg{width:1rem;height:1rem;flex:none;color:var(--verify)}

/* Vitrina de categorías */
.hero-tiles{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(150px,auto);gap:.75rem}
.tile{display:grid;grid-template-rows:1fr auto;min-width:0;border-radius:20px;background:var(--surface);overflow:hidden;text-decoration:none;border:1.5px solid transparent}
.tile:nth-child(1){grid-column:span 2;grid-row:span 2}
.tile:nth-child(8){grid-column:span 2}
.tile-art{display:grid;place-items:center;padding:.6rem;min-height:0;background:radial-gradient(120% 95% at 28% 12%,#fff 0%,#C6CDD5 50%,#A3ADB8 100%)}
.tile-art svg{width:100%;height:auto;max-height:100%}

/* Fotos reales de producto (Etapa 6): estas reglas antes solo existían
   para las ilustraciones del prototipo (que eran SVG). Una foto real
   subida a WordPress es una etiqueta <img>, no <svg>, así que sin esto
   no tenía ninguna regla que le dijera cómo llenar o centrarse dentro
   de su caja. "object-fit:contain" hace que la foto completa siempre
   se vea entera y centrada, sin recortarse, sin importar si es
   cuadrada, vertical or horizontal. */
.tile-art img,
.card-art img,
.pdp-thumb img,
.pdp-main img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.tile:nth-child(1) .tile-art{padding:1.2rem}
.tile-meta{display:grid;padding:.65rem .75rem .8rem;min-width:0}
.tile-name{font-family:var(--font-display);font-weight:700;font-size:.92rem;letter-spacing:-.01em;line-height:1.25}
.tile-from{font-size:.84rem;color:var(--ink-2)}
.tile-name,.tile-from{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile:nth-child(1) .tile-name{font-size:1.4rem}
.tile:nth-child(1) .tile-from{font-size:.95rem}
.tile:nth-child(1) .tile-meta{padding:.8rem 1.1rem 1rem}

/* Expediente (tarjeta oscura del héroe) */
.dossier{background:var(--dark);color:var(--on-dark);border-radius:28px;padding:1.5rem 1.6rem 1rem;box-shadow:0 30px 60px -30px rgba(22,32,43,.55)}
.dossier-head{display:flex;align-items:center;gap:1rem;padding-bottom:1.2rem;margin-bottom:1.2rem;border-bottom:1px solid var(--dark-line)}
.dossier-art{width:76px;flex:none;border-radius:14px;background:radial-gradient(120% 100% at 30% 15%,#fff,#DDE2E7);padding:.35rem}
.dossier-title{font-size:1.3rem}
.dossier-meta{margin:.2rem 0 0;font-size:.9rem;color:var(--on-dark-2)}
.dossier-meta .mono{color:var(--on-dark);display:block}
.pill{margin-left:auto;align-self:flex-start;border-radius:6px;padding:.15rem .55rem;font-size:.8rem;font-weight:600;background:var(--dark-2);color:var(--on-dark-2);border:1px solid var(--dark-line)}
.pill-ok{background:var(--verify-soft);color:var(--verify);border-color:transparent}
.pill-warn{background:var(--amber-soft);color:var(--amber);border-color:transparent}

/* Línea de tiempo */
.tl{list-style:none;--tl-fg:var(--on-dark);--tl-muted:var(--on-dark-2);--tl-line:var(--dark-line);--tl-done:var(--verify-bright);--tl-check:var(--dark)}
.tl.tl-light{--tl-fg:var(--ink);--tl-muted:var(--ink-2);--tl-line:var(--line);--tl-done:var(--verify);--tl-check:#fff}
.tl-item{position:relative;padding:0 0 1.15rem 2.4rem;color:var(--tl-muted)}
.tl-item:not(:last-child)::before{content:"";position:absolute;left:.72rem;top:1.7rem;bottom:.1rem;width:2px;background:var(--tl-line)}
.tl-item.is-done:not(:last-child)::before{background:var(--tl-done)}
.tl-mark{position:absolute;left:0;top:.08rem;width:1.5rem;height:1.5rem;border-radius:50%;border:2px solid var(--tl-line);transition:background .3s,border-color .3s}
.tl-item.is-done .tl-mark{background:var(--tl-done);border-color:var(--tl-done)}
.tl-item.is-done .tl-mark::after{content:"";position:absolute;left:.44rem;top:.16rem;width:.35rem;height:.7rem;border:solid var(--tl-check);border-width:0 2px 2px 0;transform:rotate(42deg)}
.tl-row{display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.tl-title{font-family:var(--font-body);font-size:1.02rem;font-weight:600;letter-spacing:0;line-height:1.35;color:var(--tl-muted);transition:color .3s}
.tl-item.is-done .tl-title{color:var(--tl-fg)}
.tl-time{font-size:.82rem;white-space:nowrap}
.tl-detail-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s ease}
.tl-item.is-done .tl-detail-wrap{grid-template-rows:1fr}
.tl-detail{overflow:hidden;min-height:0;font-size:.92rem;line-height:1.5}
.tl-detail>*:first-child{margin-top:.25rem}
.tl-item:last-child{padding-bottom:.4rem}
.dossier .tl-detail-wrap{grid-template-rows:1fr;transition:none}
.dossier .tl-detail{opacity:0;transition:opacity .5s ease}
.dossier .tl-item.is-done .tl-detail{opacity:1}
.facts{display:grid;grid-template-columns:auto 1fr;gap:.2rem 1rem;margin:.35rem 0 0;font-size:.9rem}
.facts dt{color:var(--tl-muted)}
.facts dd{margin:0;color:var(--tl-fg);word-break:break-word}

/* Secciones */
.section{padding:clamp(2.5rem,5vw,4.5rem) 0}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:1rem;flex-wrap:wrap;margin-bottom:1.8rem}
.section h2,.page-head h1{font-size:clamp(1.8rem,3.4vw,2.7rem)}
.page-head{padding:clamp(2rem,4vw,3.5rem) 0 1.4rem}

/* Contenido de páginas normales (Rastrear pedido, Entrega segura,
   Preguntas frecuentes, legales): texto simple y legible, en el
   mismo tono del resto del sitio. */
.page-content{max-width:46rem;padding-bottom:3rem}
.page-content--wide{max-width:none}
.page-content h2{font-size:clamp(1.3rem,2.2vw,1.7rem);margin:2rem 0 .9rem}
.page-content h2:first-child{margin-top:0}
.page-content p{color:var(--ink-2);margin-bottom:1rem}
.page-content ul,.page-content ol{padding-left:1.2rem;display:grid;gap:.4rem;margin-bottom:1.2rem;color:var(--ink-2)}
.page-content strong{color:var(--ink)}
.page-content a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}

/* Carrito y Pago (Etapa 7, pulido): con el CSS de WooCommerce ya
   encendido de nuevo en estas 3 páginas (ver functions.php), ya
   tienen una base decente. Esto solo ajusta la tipografía y el color
   de los botones para que combinen con el resto del sitio. Cubre
   tanto el sistema de "bloques" nuevo de WooCommerce como el sistema
   clásico (con tablas), porque no sabemos cuál de los dos se creó
   en este sitio, así que se cubren los dos por seguridad. */
.woocommerce,[class*="wc-block"],[class*="wp-block-woocommerce"]{font-family:var(--font-body);color:var(--ink)}
.woocommerce h1,.woocommerce h2,.woocommerce h3,
[class*="wc-block"] h1,[class*="wc-block"] h2,[class*="wc-block"] h3{font-family:var(--font-display)}
.woocommerce .button:not(a[href*="checkout"]):not(#place_order):not(button[class*="place-order"]):not(a[class*="place-order"]):not(button[class*="place_order"]):not(a[class*="place_order"]),.woocommerce button.button:not(a[href*="checkout"]):not(#place_order):not(button[class*="place-order"]):not(a[class*="place-order"]):not(button[class*="place_order"]):not(a[class*="place_order"]),.woocommerce input.button:not(a[href*="checkout"]):not(#place_order):not(button[class*="place-order"]):not(a[class*="place-order"]):not(button[class*="place_order"]):not(a[class*="place_order"]),
[class*="wc-block"] button:not(a[href*="checkout"]):not(#place_order):not(button[class*="place-order"]):not(a[class*="place-order"]):not(button[class*="place_order"]):not(a[class*="place_order"]),[class*="wc-block"] .components-button:not(a[href*="checkout"]):not(#place_order):not(button[class*="place-order"]):not(a[class*="place-order"]):not(button[class*="place_order"]):not(a[class*="place_order"]),[class*="wp-block-woocommerce"] .wp-block-button__link:not(a[href*="checkout"]):not(#place_order):not(button[class*="place-order"]):not(a[class*="place-order"]):not(button[class*="place_order"]):not(a[class*="place_order"]){
  font-family:var(--font-body);font-weight:600;background:var(--ink);border-radius:999px;border-color:var(--ink);color:#fff
}
.woocommerce .button:not(a[href*="checkout"]):not(#place_order):not(button[class*="place-order"]):not(a[class*="place-order"]):not(button[class*="place_order"]):not(a[class*="place_order"]):hover,.woocommerce button.button:not(a[href*="checkout"]):not(#place_order):not(button[class*="place-order"]):not(a[class*="place-order"]):not(button[class*="place_order"]):not(a[class*="place_order"]):hover,.woocommerce input.button:not(a[href*="checkout"]):not(#place_order):not(button[class*="place-order"]):not(a[class*="place-order"]):not(button[class*="place_order"]):not(a[class*="place_order"]):hover,
[class*="wc-block"] button:not(a[href*="checkout"]):not(#place_order):not(button[class*="place-order"]):not(a[class*="place-order"]):not(button[class*="place_order"]):not(a[class*="place_order"]):hover,[class*="wc-block"] .components-button:not(a[href*="checkout"]):not(#place_order):not(button[class*="place-order"]):not(a[class*="place-order"]):not(button[class*="place_order"]):not(a[class*="place_order"]):hover{background:#0B131B}
/*
  El botón de "Aplicar" cupón pediste que fuera simple, no como los
  demás. Esto lo saca por completo del estilo oscuro de arriba (con
  !important, para no tener que perseguir la lista larga de
  exclusiones) y le da algo mucho más discreto: fondo claro, texto
  oscuro, un borde delgado. Como ya no es oscuro, tampoco hay ningún
  riesgo de que el texto se pierda como pasó con los otros botones.
*/
button[class*="coupon"],a[class*="coupon"]{
  background:var(--surface) !important;
  color:var(--ink) !important;
  border:1.5px solid #AEB8C2 !important;
  border-radius:10px !important;
  font-weight:600 !important;
  box-shadow:none !important;
}
button[class*="coupon"]:hover,a[class*="coupon"]:hover{
  background:#E2E6EA !important;
}
/* El botón de "Proceder al pago" / "Realizar el pedido" se deja fuera
   de la regla de arriba a propósito: ese usa el estilo cromado (ver
   más arriba en este archivo), para que combine con el botón
   "Explorar el catálogo" de la portada. */

/*
  CORRECCIÓN: lo de arriba solo ajustaba tipografía y botones. Lo que
  seguía viéndose "de fábrica" eran las cajas de fondo, los bordes, y
  el espaciado del Carrito y el Pago, que en WooCommerce vienen con
  su propio azul y sus propios bordes grises genéricos. Esto va más a
  fondo: colores de fondo, bordes, y espaciado, usando los mismos
  tonos que el resto del sitio.

  Aviso honesto: esto lo escribí usando los nombres de clase que
  WooCommerce usa normalmente para el Carrito y el Pago, pero no pude
  verlo renderizado de verdad (esa parte la dibuja WooCommerce con su
  propio sistema, no algo que pueda simular aquí sin un WordPress
  real corriendo). Si después de instalar esto todavía se ve algo
  raro, dime exactamente QUÉ se ve mal (un color, un borde, un
  espacio) y lo afino directo a esa parte.
*/
/*
  CORRECCIÓN de fondo: todavía se veían líneas porque esta caja de
  resumen en realidad son VARIAS cajas hermanas por dentro (una para
  "Añadir cupones", otra para los totales, etc.), y mi regla les
  ponía su propio borde a CADA UNA por separado. Puestas una junto a
  otra, sus bordes se ven como una fila de líneas, no como líneas
  rotas dentro de una sola caja, por eso seguían apareciendo aunque
  cada elemento individual ya no tuviera un borde "extra".

  Ahora se hace al revés: se le da el fondo y el borde a un solo
  contenedor de verdad, el que envuelve TODO el resumen, usando su
  nombre de clase específico en vez de "cualquier cosa que diga
  totals". Y a todo lo que esté adentro de ese contenedor, sin
  excepción, se le quita cualquier borde propio.
*/
.wc-block-components-sidebar-layout,
.woocommerce-checkout #payment,
.woocommerce-cart-form{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  padding:1.5rem;
}
/*
  CORRECCIÓN: la página de Carrito (distinta a la de Pago, que ya
  habíamos revisado muchas veces) nunca se había probado a fondo en
  móvil hasta ahora, y resultó que usa su propia caja, aparte de la
  que ya cubríamos arriba, sin nada de aire interno. Esto le agrega
  el mismo relleno, usando el nombre de clase que WordPress le pone
  de forma automática a cualquier bloque de Carrito (así que no
  depende de adivinar un nombre interno de WooCommerce que podría
  cambiar). También soluciona que el precio del producto se viera
  recortado en la esquina: no era un elemento fuera de lugar, era
  esta misma caja sin espacio la que lo empujaba fuera de donde se
  podía ver bien.
*/
body.woocommerce-cart .wp-block-woocommerce-cart{
  padding:0 1rem;
}
body.woocommerce-cart .wc-block-cart-items,
body.woocommerce-cart .wc-block-cart__totals-title,
body.woocommerce-cart .wc-block-components-totals-wrapper,
body.woocommerce-cart .wc-block-cart__sidebar > *{
  padding-left:1.4rem !important;
  padding-right:1.4rem !important;
  box-sizing:border-box !important;
}
/*
  SEGUNDO INTENTO, más a fondo: el primer intento le dio aire a la
  caja en general, pero el precio seguía saliéndose por la derecha.
  Eso es la firma típica de algo con "position:absolute" en el CSS
  propio de WooCommerce (el que SÍ dejamos activo nada más en
  Carrito y Pago): ese tipo de posicionamiento ignora el espacio
  interno del contenedor por completo, salta directo a la orilla sin
  importar cuánto padding le hayamos puesto. No tengo forma de ver
  el nombre exacto de esa regla (viene empaquetada dentro del
  plugin, no en los archivos de este tema), así que en vez de seguir
  adivinando nombres de clase, esto obliga a CUALQUIER cosa dentro de
  la lista de productos del carrito a comportarse "normal" (sin ese
  posicionamiento flotante), para que ningún precio se pueda escapar
  del cuadro sin importar cómo se llame por dentro.
*/
body.woocommerce-cart .wc-block-cart-items *{
  position:static !important;
  max-width:100% !important;
}

/*
  Con tu captura, quedó claro que ese número no era nada "fuera de
  lugar", es el precio normal de esa línea (lo que WooCommerce
  muestra junto a cada producto en el resumen), solo que no le
  alcanzaba el ancho en pantallas angostas y se veía cortado. Como
  pediste, se oculta por completo, tanto en la página de Carrito
  como en el resumen de Pago; el Total general sigue mostrándose
  normal más abajo, eso no se toca.

  Aviso honesto: adiviné el nombre de esta clase específica con base
  en cómo WooCommerce suele nombrar sus propias piezas, pero viene
  empaquetada dentro del plugin, así que no puedo confirmarlo al 100%
  sin inspeccionar el sitio en vivo. Si después de subir esto el
  número sigue apareciendo, lo más rápido es: clic derecho sobre ese
  número → "Inspeccionar" → mándame una captura de la línea de HTML
  que se resalte, y lo corrijo apuntando exactamente a esa clase.
*/
body.woocommerce-cart .wc-block-cart-item__total,
body.woocommerce-checkout .wc-block-components-order-summary-item__total-price,
body.woocommerce-checkout .wc-block-components-order-summary-item__quantity ~ * .wc-block-formatted-money-amount{
  display:none !important;
}
/*
  CORRECCIÓN: el contenido (el formulario, "Información de contacto",
  el resumen del pedido) estaba tocando directamente el borde de la
  caja, sin ningún aire alrededor, por eso se sentía apretado. Esto
  le agrega separación por dentro, entre el borde de la caja y
  cualquier cosa que haya adentro, sin mover ni cambiar el tamaño de
  nada de lo que ya está ahí.
*/
.wc-block-components-sidebar-layout *:not(a[href*="checkout"]):not(#place_order):not([class*="place-order"]):not([class*="place_order"]),
.woocommerce-checkout #payment *:not(a[href*="checkout"]):not(#place_order):not([class*="place-order"]):not([class*="place_order"]){
  border:none !important;
  box-shadow:none !important;
}
.woocommerce table.shop_table{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
  border-collapse:separate;
  padding:.5rem;
}
.woocommerce table.shop_table tr,
.woocommerce table.shop_table thead,
.woocommerce table.shop_table td,
.woocommerce table.shop_table th{
  border:none !important;
  box-shadow:none !important;
}
[class*="wc-block"] input[type=text],
[class*="wc-block"] input[type=email],
[class*="wc-block"] input[type=tel],
[class*="wc-block"] input[type=number],
[class*="wc-block"] select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select{
  border:1.5px solid #AEB8C2;
  border-radius:10px;
  padding:.6rem .75rem;
  font-family:var(--font-body);
}
[class*="wc-block"] a{color:var(--ink)}
[class*="wc-block-components-radio-control__input"]:checked{accent-color:var(--ink)}

/*
  El icono de bote de basura (quitar producto) aparecía pegado a los
  botones de +/-. Esto le da espacio, sin depender del nombre exacto
  de su clase (que no pudimos confirmar): en vez de eso, le da
  espacio a "lo que sea que venga justo después" del contador de
  cantidad, que siempre es ese ícono, sin importar cómo se llame su
  clase.
*/
/*
  CORRECCIÓN: la regla de abajo usaba "+", que solo agarra al
  hermano INMEDIATO siguiente. Si hay algo de por medio (aunque sea
  invisible) entre el contador de cantidad y el ícono de basura, "+"
  no lo encuentra y no pasa nada. Cambié a "~", que agarra a
  CUALQUIER hermano que venga después, sin importar si hay algo más
  entre los dos, y subí el espacio para que se note con claridad.
*/
.wc-block-components-quantity-selector ~ *{margin-left:1.3rem}
[class*="cart-item__remove"],[class*="remove-link"],[class*="remove_link"],button[class*="remove"]{margin-left:1.3rem}

/*
  CORRECCIÓN de verdad: el botón "Proceder al pago" resultó ser un
  <a> normal, sin ninguna de las clases que WooCommerce suele usar
  (por eso mis intentos anteriores, que buscaban esas clases, no
  encontraban nada). En vez de seguir adivinando el nombre exacto,
  esto lo agarra por algo que SIEMPRE es cierto sin importar qué
  clase tenga: el enlace apunta a la página de pago. Se le da la
  apariencia completa de botón cromado desde cero (fondo, bordes,
  espaciado, la animación), porque no se puede confiar en heredar
  nada de WooCommerce aquí.
*/
.wc-block-cart a[href*="checkout"],
.wc-block-components-sidebar-layout a[href*="checkout"],
.wc-proceed-to-checkout a[href*="checkout"],
#place_order#place_order#place_order,
button[class*="place-order"][class*="place-order"],a[class*="place-order"][class*="place-order"],
button[class*="place_order"][class*="place_order"],a[class*="place_order"][class*="place_order"]{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;
  width:100%;box-sizing:border-box;
  padding:.95rem 1.6rem;margin-top:.8rem;
  border:1.5px solid #56606B !important;border-radius:999px;
  font-family:var(--font-body);font-weight:700;font-size:1.02rem;
  text-decoration:none !important;text-align:center;
  color:var(--ink) !important;text-shadow:0 1px 0 rgba(255,255,255,.65) !important;
  background:linear-gradient(180deg,#F6F8FA 0%,#E6EAEE 32%,#C9CFD6 50%,#E3E7EB 68%,#EEF1F3 100%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 8px 16px -10px rgba(22,32,43,.55);
  transition:background .4s ease,color 0s linear .18s,text-shadow 0s linear .18s,border-color .4s ease;
  cursor:pointer;
}
/*
  El texto seguía sin verse incluso con todo lo de arriba. La causa:
  WooCommerce a veces mete el texto del botón dentro de un elemento
  más (como un <span>), y ese elemento puede traer su propio color
  de letra ya definido. El color que le pusimos AL BOTÓN no llega
  automáticamente a ese texto interno si el texto ya tiene su propio
  color aparte, aunque el de afuera use !important. Esto obliga a
  CUALQUIER cosa que esté adentro del botón (haya o no un elemento de
  por medio) a usar el mismo color que el botón, sin excepción.
*/
.wc-block-cart a[href*="checkout"] *,
.wc-block-components-sidebar-layout a[href*="checkout"] *,
.wc-proceed-to-checkout a[href*="checkout"] *,
#place_order#place_order#place_order *,
button[class*="place-order"][class*="place-order"] *,a[class*="place-order"][class*="place-order"] *,
button[class*="place_order"][class*="place_order"] *,a[class*="place_order"][class*="place_order"] *{
  color:inherit !important;
}
/*
  CORRECCIÓN: la versión anterior usaba una capa extra (un
  "::before") para el relleno negro, la misma técnica que usa el
  botón cromado del resto del sitio. Esa técnica depende de cómo el
  navegador ordena las capas visuales (una cosa llamada "contexto de
  apilamiento"), y en esta página en particular, con todo el CSS de
  WooCommerce también presente, algo hacía que esa capa terminara
  tapando el texto en vez de quedar detrás.

  Esta versión ya no usa ninguna capa extra: en vez de "agregar una
  capa negra encima", ahora simplemente le dice al botón "cambia tu
  propio fondo a negro", que es una operación mucho más simple y no
  depende de ningún orden de capas, así que el texto no se puede
  tapar por accidente. También se quitó el destello que cruzaba el
  botón (el que sí tienen el botón de la portada y el del carrito
  chico): en estos dos botones en particular prefiero que se vean
  siempre bien a que se vean más lucidos pero con riesgo de romperse
  otra vez.

  "#place_order" y "[class*=\"place-order\"]" cubren, entre los dos,
  tanto el botón "Realizar pedido" de la página de Pago clásica como
  la versión de "bloques" más nueva, sin importar cuál de las dos
  esté usando este sitio.
*/
@media (hover:hover){
  .wc-block-cart a[href*="checkout"]:hover,
  .wc-block-components-sidebar-layout a[href*="checkout"]:hover,
  .wc-proceed-to-checkout a[href*="checkout"]:hover,
  #place_order#place_order#place_order:hover,
  button[class*="place-order"][class*="place-order"]:hover,a[class*="place-order"][class*="place-order"]:hover,
  button[class*="place_order"][class*="place_order"]:hover,a[class*="place_order"][class*="place_order"]:hover{
    background:var(--ink) !important;color:#fff !important;border-color:var(--ink) !important;text-shadow:none !important;
    transition:background .25s ease,color 0s linear .1s,text-shadow 0s linear .1s,border-color .25s ease;
  }
}
/*
  El destello, de vuelta, pero con una técnica más segura que la
  original. La vez pasada usaba una capa DETRÁS del texto (con
  z-index negativo), que es justo la parte que dependía del orden de
  capas del navegador y nos dio problemas. Esta vez la capa del
  destello va POR ENCIMA de todo, incluido el texto, sin ambigüedad
  posible sobre qué queda arriba o abajo, y como es casi transparente
  (solo una franja tenue), el texto se sigue leyendo perfectamente
  aunque el destello pase por encima.
*/
.wc-block-cart a[href*="checkout"]::after,
.wc-block-components-sidebar-layout a[href*="checkout"]::after,
.wc-proceed-to-checkout a[href*="checkout"]::after,
#place_order#place_order#place_order::after,
button[class*="place-order"][class*="place-order"]::after,a[class*="place-order"][class*="place-order"]::after,
button[class*="place_order"][class*="place_order"]::after,a[class*="place_order"][class*="place_order"]::after{
  content:"";position:absolute;inset:0;z-index:5;pointer-events:none;border-radius:inherit;
  background:linear-gradient(105deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 70%);
  transform:translateX(90%);transition:transform .95s cubic-bezier(.3,.2,.3,1);
}
@media (hover:hover){
  .wc-block-cart a[href*="checkout"]:hover::after,
  .wc-block-components-sidebar-layout a[href*="checkout"]:hover::after,
  .wc-proceed-to-checkout a[href*="checkout"]:hover::after,
  #place_order#place_order#place_order:hover::after,
  button[class*="place-order"][class*="place-order"]:hover::after,a[class*="place-order"][class*="place-order"]:hover::after,
  button[class*="place_order"][class*="place_order"]:hover::after,a[class*="place_order"][class*="place_order"]:hover::after{
    transform:translateX(-90%);transition:none;
  }
}
.page-head h1{margin-bottom:.8rem}

/* Productos */
.pick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.pick-grid .card:first-child{grid-column:span 2;grid-row:span 2}
.grid-products{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:1.3rem}
.card{position:relative;background:var(--surface);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;border:1.5px solid transparent}
.card:has(:focus-visible){border-color:transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--chrome-grad) border-box}
.card-art,.pdp-art{background:radial-gradient(120% 95% at 28% 12%,#fff 0%,#E4E8EC 58%,#D3D9DF 100%)}
.pick-grid .card-art{background:radial-gradient(120% 95% at 28% 12%,#fff 0%,#C6CDD5 50%,#A3ADB8 100%)}
.protect-side .dossier-art{background:radial-gradient(120% 100% at 30% 15%,#fff,#A9B3BE)}
.card-art{aspect-ratio:4/3;display:grid;place-items:center;padding:1rem}
.pick-grid .card:first-child .card-art{flex:1;aspect-ratio:auto;min-height:280px}
.card-body{padding:1rem 1.15rem 1.15rem;display:flex;flex-direction:column;gap:.15rem;flex:1}
.pick-grid .card:first-child .card-body{flex:none}
.card-cat{font-size:.85rem;color:var(--ink-2)}
.card-name{font-size:1.2rem;letter-spacing:-.02em}
.card-name a{text-decoration:none}
.card-name a::after{content:"";position:absolute;inset:0}
.card-tag{font-size:.92rem;color:var(--ink-2);margin:.25rem 0 .6rem}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-top:auto}
.card .msi{margin-top:.35rem}
.price{font-family:var(--font-display);font-weight:700;font-size:1.35rem;letter-spacing:-.02em;line-height:1.1}
.msi{font-size:.82rem;color:var(--verify);font-weight:600}
.msi-s{display:none}
.card .btn{position:relative;z-index:2}

/* Controles protegidos */
.protect{background:#D8DDE3}
.protect-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.protect-side{display:grid;gap:1.2rem;justify-items:start}
.protect-side .dossier{width:100%}
.protect h2{margin-bottom:1rem}
.protect .lead{margin-bottom:0}
.safeguards{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:1.8rem 2rem;margin-top:2.2rem}
.safeguards li{display:grid;gap:.5rem;align-content:start}
.safeguards svg{width:34px;height:34px;color:var(--verify)}
.safeguards h3{font-size:1.15rem}
.safeguards p{margin:0;color:var(--ink-2);font-size:.96rem}

/* Formas de pago */
.pay-strip{display:grid;grid-template-columns:repeat(3,1fr);border-top:1.5px solid var(--ink);border-bottom:1px solid var(--line)}
.pay-strip>div{padding:1.4rem 1.6rem 1.4rem 0}
.pay-strip>div+div{padding-left:1.6rem;border-left:1px solid var(--line)}
.pay-strip h3{font-size:1.15rem;margin-bottom:.4rem}
.pay-strip p{margin:0;color:var(--ink-2);font-size:.95rem}

/* Reseñas */
.reviews{background:#D8DDE3}
.stars{display:inline-flex;gap:2px;color:var(--ink);vertical-align:middle}
.stars svg{width:1.05rem;height:1.05rem}
.rating-sum{display:flex;align-items:center;flex-wrap:wrap;gap:.3rem .7rem;margin:0}
.rev-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(1.8rem,5vw,4.5rem);align-items:start}
.rev-top{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem .9rem;margin-bottom:.9rem}
.rev-badge{margin:0;align-self:auto;display:inline-flex;align-items:center;gap:.35rem;padding:.2rem .6rem}
.rev-badge svg{width:.95rem;height:.95rem}
.rev-feature{border-top:1.5px solid var(--ink);padding-top:1.4rem}
.rev-feature h3{font-size:clamp(1.6rem,3vw,2.5rem);letter-spacing:-.035em;line-height:1.08;margin-bottom:1rem}
.rev-feature>p:not(.rev-by){font-size:1.08rem;color:#2A3644;max-width:52ch}
.rev-list{display:grid}
.rev{padding:1.3rem 0;border-top:1px solid var(--line)}
.rev:first-child{border-top:1.5px solid var(--ink);padding-top:1.4rem}
.rev h3{font-family:var(--font-body);font-size:1.08rem;font-weight:600;letter-spacing:0;line-height:1.35;margin-bottom:.4rem}
.rev>p:not(.rev-by){color:var(--ink-2);font-size:.97rem;margin-bottom:.8rem}
.rev-by{display:flex;flex-wrap:wrap;gap:.2rem 1.2rem;font-size:.9rem;color:var(--ink-2);margin:0}
.rev-who strong{color:var(--ink);margin-right:.5rem}
.rev-prod{font-weight:600;color:var(--ink);text-underline-offset:3px}
.rev-feature .rev-by{margin-top:1.1rem}

/* Preguntas frecuentes */
.faq{max-width:820px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:1.1rem 2.5rem 1.1rem 0;font-weight:600;font-size:1.06rem;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.3rem;top:.85rem;font-size:1.5rem;font-weight:400;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq details p{color:var(--ink-2);padding-right:2rem}

/* Catálogo */
.toolbar{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;margin-bottom:1rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{border:1.5px solid var(--line);background:transparent;border-radius:999px;padding:.4rem .95rem;font-weight:500}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.sort{display:flex;align-items:center;gap:.6rem;font-size:.95rem;color:var(--ink-2)}
.sort select{border:1.5px solid var(--line);background:var(--surface);border-radius:10px;padding:.45rem .7rem}
.count-text{font-size:.92rem;color:var(--ink-2);margin-bottom:1rem}

/* Paginación del catálogo (Etapa 6): el prototipo nunca necesitó esto,
   mostraba todos los productos de ejemplo en una sola pantalla. Con
   productos reales, WordPress divide el catálogo en páginas, así que
   se necesita un estilo mínimo para esos números, en el mismo tono
   del resto del sitio. */
.pagination{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin:2.5rem 0}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:2.4rem;height:2.4rem;padding:0 .6rem;border:1.5px solid var(--line);border-radius:999px;color:var(--ink);text-decoration:none;font-weight:600;font-size:.92rem}
.pagination .page-numbers.current{background:var(--ink);border-color:var(--ink);color:#fff}
.pagination .page-numbers.dots{border-color:transparent}

/* Producto */
.crumbs{font-size:.92rem;color:var(--ink-2);padding:1.4rem 0 1rem}
.crumbs a{text-underline-offset:3px}
.pdp{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.6rem,4vw,3.5rem);align-items:start;padding-bottom:3rem}
.pdp-art{border-radius:26px;aspect-ratio:1/.9;display:grid;place-items:center;padding:2rem;position:sticky;top:96px}
.pdp h1{font-size:clamp(2rem,4vw,3.2rem);letter-spacing:-.04em;margin-bottom:.6rem}
.pdp .price{font-size:2rem;margin:1.2rem 0 .2rem}
.buy{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;margin:1.3rem 0}
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--ink);border-radius:999px;overflow:hidden;background:var(--surface)}
.qty button{width:2.6rem;height:2.6rem;border:0;background:transparent;font-size:1.25rem;line-height:1}
.qty output{min-width:2rem;text-align:center;font-weight:600}
.panel{background:var(--surface);border-radius:18px;padding:1.2rem 1.3rem;margin:1.4rem 0}
.panel h2,.panel h3{font-size:1.1rem;margin-bottom:.6rem}
.panel ul{list-style:none;display:grid;gap:.55rem;font-size:.95rem}
.panel li{display:grid;grid-template-columns:1.3rem 1fr;gap:.6rem;align-items:start}
.panel li svg{width:1.2rem;height:1.2rem;color:var(--verify);margin-top:.15rem}
.specs{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.55rem 1.4rem;font-size:.96rem}
.specs dt{color:var(--ink-2)}
.specs dd{margin:0;font-weight:500}
.demo-note{font-size:.86rem;color:var(--ink-2)}

/* Página de producto */
.pdp2{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) 296px;grid-template-areas:"gal info buy" "gal about buy";grid-template-rows:auto 1fr;column-gap:clamp(1.4rem,3vw,2.6rem);row-gap:0;align-items:start;padding-bottom:2.5rem}
.pdp-gallery{grid-area:gal;align-self:stretch}
.pdp-info{grid-area:info}
.pdp-about{grid-area:about;margin-top:1.2rem}
.pdp-buybox{grid-area:buy;align-self:stretch}
/* align-self:stretch (arriba) es la corrección: sin esto, la galería y
   la caja de compra se encogían a la altura de su propio contenido, y
   "position:sticky" no tenía espacio dentro de su caja para quedarse
   fija mientras el resto de la página (más alta) se desplaza. */
.pdp-gallery{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.8rem;align-items:start;position:sticky;top:96px}
.pdp-thumbs{display:grid;gap:.55rem}
.pdp-thumb{width:62px;height:62px;padding:2px;border:2px solid var(--line);border-radius:12px;background:radial-gradient(120% 100% at 30% 15%,#fff,#C9D0D8);display:grid;place-items:center;overflow:hidden}
.pdp-thumb svg{width:100%;height:100%}
.pdp-thumb[aria-pressed="true"]{border-color:var(--ink)}
.pdp-main{border-radius:26px;aspect-ratio:1/.9;display:grid;place-items:center;padding:1.4rem;overflow:hidden;background:radial-gradient(120% 95% at 28% 12%,#fff 0%,#D7DCE2 58%,#BAC3CC 100%)}
.pdp2 h1{font-size:clamp(1.7rem,2.8vw,2.3rem);letter-spacing:-.035em;margin:.25rem 0 .7rem}
.card .btn-sm{white-space:nowrap}
.card-foot{flex-wrap:wrap}
.pdp-cat{font-size:.92rem}
.pdp-rating{display:inline-flex;align-items:center;flex-wrap:wrap;gap:.2rem .5rem;background:none;border:0;padding:.2rem 0;font-size:.92rem;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.pdp-badges{display:flex;flex-wrap:wrap;gap:.5rem;margin:.9rem 0 0}
.pdp-badges .pill{margin:0;align-self:auto}
.pdp-price{padding:1rem 0;margin-top:1rem;border-top:1px solid var(--line)}
.pdp-price .price{font-size:2.1rem;margin:0 0 .25rem}
.pdp-price .fine,.pdp-price .msi{margin:0}
.pdp-about h2{font-size:1.15rem;margin:0 0 .7rem}
.pdp-about ul{list-style:none;display:grid;gap:.55rem;font-size:.98rem}
.pdp-about li{position:relative;padding-left:1.1rem}
.pdp-about li::before{content:"";position:absolute;left:0;top:.62em;width:.38rem;height:.38rem;border-radius:50%;background:var(--ink)}
.pdp-buybox{border:1.5px solid var(--line);border-radius:18px;background:var(--surface);padding:1.2rem;position:sticky;top:96px}
.pdp-buybox .pdp-price{margin-top:0;padding-top:0;border-top:0}
.pdp-stock{color:var(--verify);font-weight:600;margin:.4rem 0 0}
.pdp-buybox .buy{display:grid;grid-template-columns:1fr;gap:.6rem;margin:1rem 0 .5rem}
.pdp-buybox .buy .btn{width:100%}
.pdp-buybox .buy .qty{justify-self:start}
.pdp-facts{list-style:none;display:grid;gap:.7rem;font-size:.9rem;margin:1rem 0;padding-top:1rem;border-top:1px solid var(--line)}
.pdp-facts li{display:grid;grid-template-columns:1.4rem 1fr;gap:.6rem;align-items:start}
.pdp-facts svg{width:1.3rem;height:1.3rem;color:var(--verify);margin-top:.1rem}
.pdp-seller{display:grid;grid-template-columns:auto 1fr;gap:.35rem .9rem;font-size:.88rem;margin:0;padding-top:1rem;border-top:1px solid var(--line)}
.pdp-seller dt{color:var(--ink-2)}
.pdp-seller dd{margin:0}
.pdp-sec{padding:2.2rem 0;border-top:1px solid var(--line);scroll-margin-top:96px}
.pdp-sec>h2{font-size:clamp(1.4rem,2.4vw,1.8rem);margin-bottom:1rem}
.pdp-sec p{max-width:68ch}
.spec-table{width:100%;max-width:52rem;border-collapse:collapse;font-size:.96rem}
.spec-table tr{border-bottom:1px solid var(--line)}
.spec-table th,.spec-table td{padding:.8rem 1rem;text-align:left;vertical-align:top}
.spec-table th{width:34%;background:var(--surface);font-weight:600;color:var(--ink-2)}
.spec-table td{font-weight:500}
.pdp-revhead{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .8rem;margin:0 0 1rem}
.pdp-sec .rev-list{max-width:52rem}
.pdp-sec .panel{margin:0;max-width:40rem}

/* Formulario para dejar una reseña (Etapa 6, corrección): reutiliza el
   mismo estilo de campo que ya usa el formulario de pago, para que no
   se vea con la apariencia genérica de WordPress. */
.review-form{margin-top:2rem;padding-top:2rem;border-top:1px solid var(--line);max-width:36rem}
.review-form #reply-title{font-size:1.15rem;margin-bottom:1rem}
.review-form .comment-form-rating{margin-bottom:1rem}
.review-form .comment-form-rating label{display:block;font-weight:600;margin-bottom:.4rem;font-size:.92rem}
.review-form p.form-submit{margin:0}
.review-form .comment-notes,.review-form .logged-in-as{font-size:.88rem;color:var(--ink-2);margin-bottom:1rem}
@media (min-width:1100px){.pdp-price-info{display:none}}
@media (max-width:1099px){
  .pdp2{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"gal info" "gal buy" "gal about";grid-template-rows:auto auto 1fr;row-gap:1.2rem}
  .pdp-about{margin-top:0}
  .pdp-price-box{display:none}
  .pdp-buybox{position:static}
}
@media (max-width:980px){.pdp-rating{padding-block:.6rem}}
@media (max-width:820px){
  .pdp2{grid-template-columns:minmax(0,1fr);grid-template-areas:"gal" "info" "buy" "about";grid-template-rows:auto;row-gap:1.4rem;padding-bottom:1.5rem}
  .pdp-gallery{position:static;grid-template-columns:minmax(0,1fr)}
  .pdp-main{order:1;aspect-ratio:4/3;padding:1rem;border-radius:20px}
  .pdp-thumbs{order:2;display:flex;gap:.6rem;overflow-x:auto}
  .pdp-thumb{flex:none}
  .pdp-sec{padding:1.6rem 0}
  .spec-table th{width:42%}
}

/* Formularios */
.field{display:grid;gap:.35rem;margin-bottom:1rem}
.field label,.field .lbl{font-weight:600;font-size:.95rem}
.field .hint{font-size:.85rem;color:var(--ink-2)}
.field input:not([type=checkbox]):not([type=radio]),.field select,.field textarea{width:100%;border:1.5px solid #AEB8C2;background:#fff;border-radius:10px;padding:.72rem .85rem;min-height:2.85rem}
.field input:focus,.field select:focus,.field textarea:focus{outline:3px solid var(--focus);outline-offset:1px;border-color:var(--ink)}
.field [aria-invalid="true"]{border-color:var(--error);background:var(--error-soft)}
.err{color:var(--error);font-size:.88rem;font-weight:500;margin:0}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
.check{display:grid;grid-template-columns:1.4rem 1fr;gap:.7rem;align-items:start;margin-bottom:.9rem;font-size:.96rem}
.check input{width:1.2rem;height:1.2rem;margin:.2rem 0 0;accent-color:var(--ink)}
.choices{display:grid;gap:.7rem;margin-bottom:1rem}
.choice{display:grid;grid-template-columns:1.4rem 1fr;gap:.8rem;align-items:start;background:var(--surface);border:1.5px solid var(--line);border-radius:14px;padding:.95rem 1.1rem;cursor:pointer}
.choice:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.choice:has(input:disabled){opacity:.6;cursor:not-allowed}
.choice input{margin:.25rem 0 0;accent-color:var(--ink);width:1.1rem;height:1.1rem}
.choice strong{display:block}
.choice span span{display:block;font-size:.88rem;color:var(--ink-2);font-weight:400}
.fake-pay{border:1.5px dashed #9AA6B2;border-radius:14px;padding:1rem 1.1rem;background:rgba(255,255,255,.5);font-size:.92rem;color:var(--ink-2);margin-bottom:1rem}
.fake-pay .bars{display:grid;grid-template-columns:2fr 1fr 1fr;gap:.6rem;margin-top:.7rem}
.fake-pay .bars i{height:2.4rem;border-radius:8px;background:#DDE2E7;display:block}
.form-alert{background:var(--error-soft);color:var(--error);border-radius:12px;padding:.8rem 1rem;font-weight:600;margin-bottom:1.2rem}

/* Checkout */
.co{display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:clamp(1.6rem,4vw,3.5rem);align-items:start;padding-bottom:4rem}
.co-sec{margin-bottom:2.2rem}
.co-sec>h2{font-size:1.4rem;margin-bottom:1.1rem;display:flex;align-items:center;gap:.75rem}
.co-sec>h2 .n{display:inline-grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:var(--ink);color:#fff;font-size:1rem;font-family:var(--font-body);font-weight:600;letter-spacing:0}
.summary-m{display:none;background:var(--surface);border-radius:16px;padding:0 1.1rem}
.summary-m summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.8rem;min-height:3.2rem;font-weight:600}
.summary-m summary::-webkit-details-marker{display:none}
.summary-m summary span{margin-right:auto}
.summary-m summary::after{content:"";width:.55rem;height:.55rem;border:solid var(--ink);border-width:0 2px 2px 0;transform:rotate(45deg);margin:-.25rem .2rem 0 0;transition:transform .2s}
.summary-m[open] summary::after{transform:rotate(-135deg);margin-top:.25rem}
.summary-m .sum-body{padding:.3rem 0 1.1rem}
.row-cp{display:grid;grid-template-columns:8.5rem 1fr;gap:0 1rem}
.buy-bar{display:none}
.summary{background:var(--surface);border-radius:22px;padding:1.4rem;position:sticky;top:92px}
.summary h2{font-size:1.25rem;margin-bottom:1rem}
.sum-items{list-style:none;display:grid;gap:.9rem;margin-bottom:1rem}
.sum-items li{display:grid;grid-template-columns:64px 1fr auto;gap:.8rem;align-items:center;font-size:.95rem}
.sum-items .thumb{background:radial-gradient(120% 100% at 30% 15%,#fff,#DDE2E7);border-radius:10px;padding:.2rem}
.totals{border-top:1px solid var(--line);padding-top:.9rem;display:grid;gap:.65rem;font-size:.96rem}
.totals div{display:flex;justify-content:space-between;gap:1rem}
.totals .grand{font-family:var(--font-display);font-size:1.4rem;font-weight:700;margin-top:.3rem;padding-top:.6rem;border-top:1px solid var(--line)}
.totals .sub{color:var(--ink-2);font-size:.88rem}
.notice{background:var(--verify-soft);color:#0A5B41;border-radius:12px;padding:.8rem 1rem;font-size:.9rem;margin-top:1rem}

/* Entrega segura */
.faq-page{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(1.5rem,4vw,3.5rem);align-items:start;padding-bottom:4rem}
.faq-page .faq{max-width:none}
.story{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(1.5rem,4vw,4rem);padding:2.2rem 0;border-top:1px solid var(--line)}
.story h2{font-size:clamp(1.5rem,2.6vw,2.1rem);position:sticky;top:96px;align-self:start}
.story p,.story li{color:var(--ink-2)}
.story ul{padding-left:1.2rem;display:grid;gap:.4rem;margin-bottom:1rem}
.story strong{color:var(--ink)}

/* Seguimiento */
.track{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(1.5rem,4vw,3rem);align-items:start;padding-bottom:4rem}
.track-card{background:var(--surface);border-radius:24px;padding:1.6rem 1.7rem 1rem}
.track-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 1rem;align-items:center;margin-bottom:1.4rem;padding-bottom:1.1rem;border-bottom:1px solid var(--line)}
.track-head h2{font-size:1.4rem}
.seg{display:flex;flex-wrap:wrap;gap:.4rem;margin:.3rem 0 1.2rem}
.seg-label{margin:.6rem 0 0}
.seg button{border:1.5px solid var(--line);background:transparent;border-radius:999px;padding:.35rem .85rem;font-size:.9rem;font-weight:500}
.seg button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.side-note{background:var(--surface);border-radius:20px;padding:1.3rem 1.4rem;font-size:.95rem}

/* El enlace de "Editar carrito" junto a "Resumen del pedido" en Pago */
.mtk-edit-cart-link{
  font-size:.85rem;font-weight:600;color:var(--ink-2) !important;
  text-decoration:underline;text-underline-offset:2px;
  vertical-align:middle;
}
.mtk-edit-cart-link:hover{color:var(--ink) !important}

/*
  El botón "Solicitar devolución" (Rastrear pedido) salió con el
  mismo problema de texto invisible que ya vimos varias veces con
  los botones de pago, con las mismas clases (.btn.btn-primary) que
  SÍ funcionan bien en otros botones de esta misma página. No
  encontré, revisando el CSS, qué regla específica lo estaba
  tapando, así que en vez de seguir buscando, se le dio su propia
  clase exclusiva con su color escrito de forma directa y forzada
  (!important), la misma receta que ya nos funcionó de forma
  confiable para los botones de pago. Así, sin importar qué otra
  regla ande compitiendo por el estilo de ".btn-primary" en esta
  página, este botón específico no depende de ganarle esa pelea.
*/
.mtk-rma-cta{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.85rem 1.5rem;margin-top:.6rem;
  border-radius:999px;border:1.5px solid var(--ink) !important;
  font-weight:600 !important;text-decoration:none !important;
  background:var(--ink) !important;color:#fff !important;
  transition:background .15s,color .15s;
}
.mtk-rma-cta *{color:inherit !important}
@media (hover:hover){
  .mtk-rma-cta:hover{background:#0B131B !important;color:#fff !important}
}
.side-note h3{font-size:1.1rem;margin-bottom:.6rem}
.side-note p{color:var(--ink-2)}

/* Confirmación */
.confirm{max-width:760px;padding:clamp(2rem,5vw,4rem) 0 4rem}
.confirm h1{font-size:clamp(2rem,4.5vw,3.2rem);letter-spacing:-.04em;margin:.8rem 0 1rem}
.order-no{display:inline-block;background:var(--surface);border:1.5px solid var(--ink);border-radius:10px;padding:.35rem .8rem;font-size:1.05rem}

/* Legal */
.legal{display:grid;grid-template-columns:260px minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem);padding:clamp(1.6rem,3.5vw,3rem) 0 4rem;align-items:start}
.legal-nav{position:sticky;top:92px;display:grid;gap:.2rem}
.legal-nav a{display:block;padding:.55rem .8rem;border-radius:10px;text-decoration:none;font-weight:500;color:var(--ink-2)}
.legal-nav a[aria-current="page"]{background:var(--ink);color:#fff}
.legal-doc{max-width:74ch}
.legal-doc h1{font-size:clamp(1.9rem,3.6vw,2.8rem);margin-bottom:.5rem}
.legal-doc h2{font-size:1.25rem;margin:2rem 0 .6rem}
.legal-doc p,.legal-doc li{color:#2A3644}
.legal-doc ul{padding-left:1.3rem;display:grid;gap:.4rem;margin:0 0 1rem}
.legal-note{background:var(--amber-soft);color:var(--amber);border-radius:14px;padding:.9rem 1.1rem;font-size:.92rem;margin:1.2rem 0 1.6rem}
.fill{background:#FFE39A;color:#4A3000;padding:0 .25em;border-radius:4px;font-weight:500}
.legal-doc .updated{color:var(--ink-2);font-size:.92rem}

/* Carrito (cajón) */
.drawer{margin:0 0 0 auto;height:100dvh;max-height:100dvh;width:min(440px,100%);max-width:100%;border:0;padding:0;background:var(--surface);color:var(--ink);flex-direction:column}
.drawer[open]{display:flex;animation:slide-in .32s cubic-bezier(.22,.8,.24,1)}
.drawer.is-closing{animation:slide-out .26s cubic-bezier(.4,0,1,1) forwards}
.drawer::backdrop{background:rgba(22,32,43,.55);transition:opacity .28s ease}
.drawer.is-closing::backdrop{opacity:0}
@keyframes slide-in{from{transform:translateX(100%);opacity:0}to{transform:none;opacity:1}}
@keyframes slide-out{from{transform:none;opacity:1}to{transform:translateX(100%);opacity:0}}
@media (prefers-reduced-motion:reduce){
  .drawer[open],.drawer.is-closing{animation:none}
}
/*
  CORRECCIÓN: se aumentó este espacio interno de verdad (antes
  1.4rem/1.6rem, ahora más), y esta vez aplica siempre, en
  computadora y en celular por igual, no solo en una de las dos
  (antes había una versión aparte solo para móvil, que ya no hace
  falta porque esta base ya cubre los dos casos).
*/
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:1.7rem 2rem;border-bottom:1px solid var(--line)}
.drawer-head h2{font-size:1.35rem}
.icon-btn{border:0;background:transparent;width:2.5rem;height:2.5rem;border-radius:50%;font-size:1.5rem;line-height:1}
.drawer-body{flex:1;overflow:auto;overscroll-behavior:contain;padding:1.7rem 2rem;box-sizing:border-box}
html:has(dialog[open]){overflow:hidden}
.drawer-foot{padding:1.4rem 2rem calc(1.7rem + env(safe-area-inset-bottom));border-top:1px solid var(--line);display:grid;gap:.8rem;box-sizing:border-box}
.line-item{display:grid;grid-template-columns:84px 1fr;gap:1rem;padding-bottom:1.2rem;margin-bottom:1.2rem;border-bottom:1px solid var(--line)}
.line-item .thumb{background:radial-gradient(120% 100% at 30% 15%,#fff,#DDE2E7);border-radius:12px;padding:.3rem;align-self:start;overflow:hidden}
/*
  CORRECCIÓN: esta caja nunca tuvo una regla diciéndole a la FOTO de
  adentro qué tan grande debía verse, el mismo tipo de hueco que ya
  habíamos encontrado y corregido en las tarjetas de producto y los
  cuadros de categoría, hace tiempo, pero que en ese momento se nos
  pasó corregir aquí también. Sin esa regla, la foto se dibuja a su
  tamaño real (que puede ser mucho más grande que la cajita de 84px),
  y se desborda encima del nombre, precio y cantidad de al lado, que
  es justo el amontonamiento que viste en tu celular.
*/
.line-item .thumb img{width:100%;height:100%;object-fit:contain;display:block}
.line-item h3{font-size:1.02rem;font-family:var(--font-body);letter-spacing:0;font-weight:600}
.line-actions{display:flex;justify-content:space-between;align-items:center;margin-top:.5rem}
.line-actions .qty button{width:2.1rem;height:2.1rem}
.line-actions .rm{border:0;background:transparent;text-decoration:underline;text-underline-offset:3px;color:var(--ink-2);font-size:.9rem}
.empty{text-align:center;padding:2.5rem 1rem}
.empty h3{font-size:1.25rem;margin-bottom:.5rem}

/* Aviso, cookies, pie */
.toast{position:fixed;left:1rem;right:1rem;margin-inline:auto;width:max-content;max-width:calc(100% - 2rem);bottom:calc(1.2rem + var(--fixed-bottom,0px) + env(safe-area-inset-bottom));transform:translateY(20px);text-align:center;background:var(--ink);color:#fff;padding:.75rem 1.2rem;border-radius:999px;font-weight:500;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:60}
.toast.show{opacity:1;transform:none}
.cookies{position:fixed;left:0;right:0;bottom:0;background:var(--surface);border-top:1.5px solid var(--ink);padding:.8rem 1.25rem calc(.8rem + env(safe-area-inset-bottom));z-index:50;font-size:.9rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.6rem 1.2rem}
.cookies[hidden]{display:none}
.cookies p{margin:0;max-width:70ch}
.site-footer{background:var(--dark);color:var(--on-dark);margin-top:2rem;padding:3.2rem 0 calc(2rem + var(--fixed-bottom,0px))}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:2rem;padding-bottom:2.2rem;border-bottom:1px solid var(--dark-line)}
.site-footer .logo{font-size:1.9rem;margin-bottom:.8rem;--ufo-dome:var(--verify-bright);--ufo-light:var(--dark)}
.site-footer .logo{text-shadow:0 2px 4px rgba(0,0,0,.55),0 7px 14px rgba(0,0,0,.35),0 0 20px rgba(82,224,165,.14)}
.site-footer .logo-ufo{filter:drop-shadow(0 4px 4px rgba(0,0,0,.5))}
.site-footer p,.site-footer li{color:var(--on-dark-2);font-size:.92rem}
.site-footer h2{font-family:var(--font-body);font-size:.98rem;letter-spacing:0;margin-bottom:.8rem;color:var(--on-dark);font-weight:600}
.site-footer ul{list-style:none;display:grid;gap:.5rem}
.site-footer a{text-decoration:none}
.site-footer a:hover{text-decoration:underline;text-underline-offset:3px;color:#fff}
.foot-base{padding-top:1.4rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 2rem}
.foot-base p{margin:0;font-size:.85rem}
.site-footer .fill{background:#4B3A10;color:#FFE9A8}

/* Interacción con puntero (evita hover pegado en pantallas táctiles) */
@media (hover:hover){
  .cart-btn:hover{background:var(--ink);color:#fff}
  .cart-btn:hover .count{background:#fff;color:var(--ink)}
  .btn-primary:hover{background:#0B131B}
  .btn-chrome:hover{color:#fff;border-color:var(--ink);text-shadow:none;transition:color 0s linear .11s,text-shadow 0s linear .11s,border-color .3s ease}
  .btn-chrome:hover::before{opacity:1;transition-duration:.25s}
  .btn-chrome:hover::after{transform:translateX(-90%);transition:none}
  .btn-ghost:hover{background:var(--ink);color:#fff}
  .card:hover,.tile:hover{border-color:transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--chrome-grad) border-box}
  .chip:not([aria-pressed="true"]):hover{border-color:transparent;background:linear-gradient(var(--bg),var(--bg)) padding-box,var(--chrome-grad) border-box}
  .nav a:hover{color:var(--ink);border-bottom-color:var(--chrome)}
  .qty button:hover,.icon-btn:hover{background:var(--surface-2)}
  .legal-nav a:hover{background:var(--surface-2);color:var(--ink)}
}

/* Adaptación: tableta */
@media (max-width:980px){
  .hero-grid,.protect-grid,.pdp,.co,.track,.story,.legal,.faq-page,.rev-grid{grid-template-columns:minmax(0,1fr)}
  .hero-grid{gap:2rem}
  .hero-facts{max-width:none}
  .pdp-art,.story h2{position:static}
  .summary{display:none}
  .summary-m{display:block}
  .pick-grid{grid-template-columns:repeat(2,1fr)}
  .pick-grid .card:first-child{grid-column:span 2;grid-row:auto}
  .pick-grid .card:first-child .card-art{aspect-ratio:4/3;min-height:0;flex:none}
  .legal-nav{position:static;display:flex;overflow-x:auto;gap:.5rem;margin-inline:-1.25rem;padding:0 1.25rem .5rem;scrollbar-width:none}
  .legal-nav::-webkit-scrollbar{display:none}
  .legal-nav a{flex:none;white-space:nowrap;border:1.5px solid var(--line);border-radius:999px;padding:.5rem 1rem;min-height:44px;display:inline-flex;align-items:center}
  .legal-nav a[aria-current="page"]{border-color:var(--ink)}
  .foot-grid{grid-template-columns:1fr 1fr;gap:1.8rem 1rem}
  .foot-grid>:first-child,.foot-grid>:last-child{grid-column:1/-1}
}

/* Adaptación: encabezado con menú (enlaces en menú desplegable por debajo de 1100 px) */
@media (max-width:1099px){
  .header-in{min-height:60px;gap:.6rem}
  .menu-btn{display:inline-flex}
  .cart-btn{margin-left:auto;min-height:2.75rem}
  .nav{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;margin:0;padding:.2rem .75rem .8rem;background-color:#D9DEE3;background-image:var(--metal);background-size:300px 140px,100% 100%,100% 100%;background-repeat:repeat,no-repeat,no-repeat;border-bottom:1px solid transparent;border-image:var(--chrome-line) 1;box-shadow:0 22px 30px -22px rgba(22,32,43,.4);
    visibility:hidden;opacity:0;clip-path:inset(0 0 100% 0);
    transition:clip-path .4s ease,opacity .3s ease,visibility 0s linear .4s}
  .nav.open{visibility:visible;opacity:1;clip-path:inset(0 0 -40px 0);
    transition:clip-path 1s cubic-bezier(.3,.7,.2,1),opacity 0s,visibility 0s}
  .nav a{opacity:0;transform:translateY(-12px);transition:opacity .25s ease,transform .25s ease}
  .nav.open a{opacity:1;transform:none;transition:opacity .7s ease,transform .8s cubic-bezier(.22,.8,.24,1)}
  .nav.open a:nth-child(1){transition-delay:.3s}
  .nav.open a:nth-child(2){transition-delay:.42s}
  .nav.open a:nth-child(3){transition-delay:.54s}
  .nav.open a:nth-child(4){transition-delay:.66s}
  .nav.open a:nth-child(5){transition-delay:.78s}
  .nav a,.nav a:hover,.nav a[aria-current="page"]{padding:.95rem 0;font-size:1.1rem;color:var(--ink);border-bottom:1px solid rgba(56,67,79,.24);box-shadow:0 1px 0 rgba(255,255,255,.7)}
  .nav a[aria-current="page"]{font-weight:700}
  .nav a:last-child{border-bottom:0}
}

/* Adaptación: objetivos táctiles de al menos 44 px */
@media (max-width:980px){
  .logo{padding-block:.35rem}
  .link,.rev-prod,.crumbs a{display:inline-block;padding-block:.6rem}
  .crumbs{padding:.4rem 0}
  .site-footer ul{gap:0}
  .site-footer li a{display:inline-flex;align-items:center;min-height:44px}
  .check{min-height:44px;align-items:center}
  .check a{padding-block:.55rem}
  .icon-btn{width:2.75rem;height:2.75rem}
  .line-actions .rm{padding:.75rem .4rem}
  .line-actions .qty button{width:2.75rem;height:2.75rem}
  .side-note .link{padding-block:.5rem}
}

/* Barra de pago fija (teléfono): total siempre visible y botón al alcance del pulgar */
.co-bar{display:none}

/* Adaptación: teléfono */
@media (max-width:680px){
  .rv-l{--rx:-24px}
  .rv-r{--rx:24px}
  .rv-u{--ry:26px}
  .pb-full{display:none}
  .pb-short{display:inline}
  .hero{padding:1.4rem 0 2rem}
  .hero h1{font-size:clamp(2.3rem,10.8vw,3rem);margin-bottom:1rem}
  .cta-row{flex-direction:column;align-items:stretch;margin:1.9rem 0 1.5rem}
  .cta-row .btn{width:100%;min-height:52px}
  .btn-chrome.btn-lg{width:min(100%,18.5rem);align-self:center;min-height:46px;padding:.8rem 1.6rem;font-size:1rem}
  .hero-facts{grid-template-columns:1fr 1fr;gap:.5rem 1rem;font-size:.8rem}
  .hero-tiles{display:flex;overflow-x:auto;gap:.7rem;margin-inline:-1.25rem;padding:0 1.25rem .3rem;scrollbar-width:none;scroll-snap-type:x proximity;scroll-padding-inline:1.25rem}
  .hero-tiles::-webkit-scrollbar{display:none}
  .tile,.tile:nth-child(1),.tile:nth-child(8){flex:none;width:138px;grid-column:auto;grid-row:auto;scroll-snap-align:start}
  .tile-art,.tile:nth-child(1) .tile-art{aspect-ratio:1;padding:.5rem}
  .tile:nth-child(1) .tile-name{font-size:1.02rem}
  .tile:nth-child(1) .tile-from{font-size:.86rem}
  .tile:nth-child(1) .tile-meta{padding:.65rem .85rem .8rem}
  .protect-side{justify-items:stretch}
  .protect-side .btn{width:100%;min-height:50px}
  .dossier{padding:1.1rem 1.1rem .6rem;border-radius:24px}
  .dossier-head{display:grid;grid-template-columns:1fr auto;gap:.8rem;align-items:start;padding-bottom:1rem;margin-bottom:1rem}
  .dossier-art{display:none}
  .dossier-title{font-size:1.1rem}
  .section{padding:2.2rem 0}
  .section-head{margin-bottom:1.1rem}
  .page-head{padding:1.4rem 0 1rem}

  .pick-grid,.grid-products{grid-template-columns:repeat(2,1fr);gap:.8rem}
  .pick-grid .card:first-child{grid-column:1/-1}
  .card{border-radius:16px}
  .card-art{padding:.6rem}
  .card-body{padding:.75rem .8rem .9rem}
  .card-name{font-size:1rem;line-height:1.2}
  .card-tag{display:none}
  .card-foot{flex-direction:column;align-items:stretch;gap:.55rem;padding-top:.4rem}
  .card .price{font-size:1.15rem}
  .card .msi{font-size:.8rem;margin-top:.1rem}
  .card .msi-l{display:none}
  .card .msi-s{display:inline}
  .pick-grid .card:first-child .msi-l{display:inline}
  .pick-grid .card:first-child .msi-s{display:none}
  .card .btn-sm{width:100%;min-height:44px}
  .pick-grid .card:first-child .card-body{padding:.9rem 1rem 1rem}
  .pick-grid .card:first-child .card-name{font-size:1.2rem}
  .pick-grid .card:first-child .card-tag{display:block}
  .pick-grid .card:first-child .card-foot{flex-direction:row;align-items:center}
  .pick-grid .card:first-child .btn-sm{width:auto;padding-inline:1.3rem}
  .pick-grid .card:first-child .price{font-size:1.35rem}
  .pick-grid .card:first-child .msi{font-size:.82rem}

  .safeguards{grid-template-columns:1fr;gap:1.3rem}
  .safeguards li{grid-template-columns:34px 1fr;column-gap:.95rem;row-gap:.15rem}
  .safeguards svg{grid-row:span 2}
  .pay-strip{grid-template-columns:1fr}
  .pay-strip>div{padding:1.1rem 0}
  .pay-strip>div+div{padding-left:0;border-left:0;border-top:1px solid var(--line)}

  .toolbar{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:.8rem}
  .chips{flex-wrap:nowrap;overflow-x:auto;margin-inline:-1.25rem;padding:0 1.25rem .2rem;scrollbar-width:none;min-width:0}
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:none;min-height:44px;padding:.4rem 1.05rem}
  .sort{justify-content:space-between}
  .sort select{min-height:44px;flex:1;max-width:62%}

  .crumbs{padding:1rem 0 .7rem}
  .pdp{gap:1.3rem;padding-bottom:2rem}
  .pdp-art{aspect-ratio:4/3;padding:1rem;border-radius:20px}
  .pdp .price{font-size:1.8rem}
  .buy{display:grid;grid-template-columns:auto 1fr;gap:.6rem}
  .buy .btn{min-height:50px}
  .buy .btn:last-child{grid-column:1/-1}
  .qty button{width:2.9rem;height:2.9rem}
  .buy-bar{display:flex;position:fixed;left:0;right:0;bottom:var(--cookie-h,0px);z-index:40;align-items:center;gap:.9rem;padding:.7rem 1.25rem calc(.7rem + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line);transform:translateY(120%);visibility:hidden;transition:transform .25s,visibility .25s}
  .buy-bar.show{transform:none;visibility:visible}
  .buy-bar .bb-info{flex:1;min-width:0}
  .buy-bar .bb-name{font-size:.85rem;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .buy-bar .price{font-size:1.2rem}
  .buy-bar .btn{min-height:48px;flex:none}

  .co{gap:1rem;padding-bottom:2.5rem}
  .co-sec{margin-bottom:1.8rem}
  .co-sec>h2{font-size:1.25rem}
  .field input:not([type=checkbox]):not([type=radio]),.field select{min-height:3rem}
  .check{grid-template-columns:1.5rem 1fr;padding:.3rem 0}
  .check input{width:1.35rem;height:1.35rem}
  .row-2{grid-template-columns:1fr}
  .choice{padding:.9rem 1rem}
  .form-alert{position:sticky;top:68px;z-index:5}

  .line-actions .qty button{width:2.6rem;height:2.6rem}
  .track,.faq-page{padding-bottom:2.5rem}
  .track-card{padding:1.2rem 1.1rem .6rem;border-radius:20px}
  .seg{flex-wrap:nowrap;overflow-x:auto;margin-inline:-1.1rem;padding:0 1.1rem .3rem;scrollbar-width:none}
  .seg::-webkit-scrollbar{display:none}
  .seg button{flex:none;min-height:44px;padding:.4rem 1rem}
  .story{padding:1.6rem 0}
  .confirm{padding:1.6rem 0 2.5rem}
  .legal{padding-bottom:2.5rem}
  .legal-doc h2{margin-top:1.6rem}

  .co-bar{display:flex;position:fixed;left:0;right:0;bottom:var(--cookie-h,0px);z-index:40;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 1.25rem calc(.7rem + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line)}
  .co-total{display:grid;line-height:1.15}
  .co-total span{font-size:.8rem;color:var(--ink-2)}
  .co-total strong{font-family:var(--font-display);font-size:1.3rem;letter-spacing:-.02em}
  .co-bar .btn{min-height:50px;flex:none}
  .co-sec button[type=submit]{display:none}
  .foot-base{flex-direction:column}
  .cookies{flex-wrap:nowrap;justify-content:space-between;text-align:left;gap:.9rem;padding-top:.7rem}
  .cookies p{flex:1;font-size:.84rem;line-height:1.4}
  .cookies .btn{flex:none;min-height:44px}
}
.cart-ico{flex:none}
/* Vuelo del OVNI: el logo se muestra cuando empieza la animación */
.logo-fly:not(.logo-go) .site-header .logo{visibility:hidden}
.lg-wrap{display:inline}
.lg{display:inline-block;transform-origin:50% 100%}
@media (max-width:360px){
  .logo{font-size:1.35rem}
  .header-in{gap:.4rem}
  .cart-btn{padding:.5rem .65rem}
  .menu-btn{width:2.6rem;height:2.6rem}
}
@media (max-width:415px){
  .cart-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .cart-btn{padding:.5rem .8rem}
}
@media (max-width:400px){
  .logo{font-size:1.55rem}
}
@media (max-height:520px) and (max-width:980px){
  .site-header{position:relative}
  .buy-bar{display:none}
  .hero{padding:1rem 0 1.5rem}
  .cookies{padding-block:.5rem}
  .drawer-head{padding-block:.6rem}
}
/* Móvil: tarjetas de producto con filas alineadas */
@media (max-width:680px){
  .grid-products .card-name,.pick-grid .card:not(:first-child) .card-name{min-height:2.16em}
  .grid-products .card .msi,.pick-grid .card:not(:first-child) .msi{min-height:3.2em}
  /*
    La corrección anterior solo vivía aquí, dentro de este bloque de
    "solo en móvil", lo cual dejaba la versión de computadora con un
    espacio menor. Ya se movió la corrección real arriba, a la regla
    base de ".drawer-head/.drawer-body/.drawer-foot", para que
    aplique igual en los dos casos, como pediste.
  */
}
@media (max-width:980px){
  .chip{min-height:44px}
  .rev-by{align-items:baseline}
}
/* Pantallas pequeñas: título y puntos verdes centrados */
@media (max-width:980px){
  .hero-copy{text-align:center}
  .hero-facts{grid-template-columns:repeat(2,auto);justify-content:center;max-width:none;margin-inline:auto}
  .hero-facts li{text-align:left}
}
@media (max-width:520px){
  .hero-facts{grid-template-columns:repeat(2,auto);gap:.5rem .6rem;font-size:.7rem}
  .hero-facts li{gap:.3rem}
  .hero-facts svg{width:.8rem;height:.8rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}