/*
Theme Name: Flux Digital
Theme URI: https://gofluxdigital.com
Author: Flux Digital
Author URI: https://gofluxdigital.com
Description: Tema propietario para Flux Digital — software independiente hecho en Colombia. Motor nativo, privacidad local, pago único.
Version: 1.0 Origins
License: Uso privado — Flux Digital
Text Domain: flux-digital
*/

/* ===== FLUX DIGITAL — sistema de diseño =====
   Concepto: "flujo" tomado literalmente. Un trazo de señal (flow-line)
   atraviesa las páginas como hilo visual, y cada producto se presenta
   dentro de un "terminal-chrome" (ventana de software), porque el
   negocio es software real, no un producto de infoproducto genérico.
*/

/**
 * La carga de Google Fonts se movió a functions.php (flux_digital_fonts_preload)
 * como <link> no bloqueante en vez de @import aquí. Un @import dentro de un
 * CSS obliga al navegador a esperar a que ESTE archivo termine de descargar
 * Y PARSEARSE antes de siquiera empezar la solicitud a fonts.googleapis.com
 * — dos viajes de red en serie, uno detrás del otro, ambos bloqueando el
 * primer pintado. Es exactamente lo que PageSpeed marca como "Solicitudes
 * que bloquean el renderizado". El patrón nuevo (preconnect + <link rel=
 * stylesheet media=print onload=…>) hace esa solicitud en PARALELO con
 * este archivo, sin bloquear nada.
 */

:root{
  --ink:#08070D;
  --surface:#141019;
  --surface-2:#1D1726;
  --surface-3:#251C33;
  --border:#332B42;
  --border-soft:#241D30;
  --text:#F6F2F5;
  --text-muted:#A89FB3;
  --accent:#FF6E4E;
  --accent-rgb:255,110,78;
  --accent-ink:#2B0E05;
  --accent-2:#8C6BFF;
  --accent-2-rgb:140,107,255;
  --gold:#F2C14E;
  --gold-rgb:242,193,78;
  --danger:#F2705F;
  --radius:14px;
  --radius-sm:8px;
  --radius-lg:22px;
  --font-display:'Space Grotesk',sans-serif;
  --font-body:'Inter',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
  --maxw:1180px;
}

/* =========================================================
   FASE 1 — Swup.js: transición fade mínima entre páginas.
   #swup es el contenedor que header.php abre y footer.php cierra.
   Swup añade/quita is-changing en <html> mientras dura la animación
   de salida/entrada (ver assets/swup-init.js, animationSelector).
   ========================================================= */
html.is-changing #swup{ transition: opacity .22s ease; }
html.is-leaving #swup{ opacity: 0; }

/* FASE 2 — Alpine.js: oculta elementos con x-cloak hasta que Alpine
   termine de inicializar, evitando parpadeos de estado incorrecto. */
[x-cloak]{ display: none !important; }

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.12;margin:0 0 .5em}
p{margin:0 0 1em;color:var(--text-muted)}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px}
@media (prefers-reduced-motion: reduce){*{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;}}

.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent-2);
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:14px;
}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent-2);box-shadow:0 0 0 3px rgba(var(--accent-2-rgb),.18)}

/* gradient text — used sparingly, one moment per page */
.grad-text{
  background:linear-gradient(100deg,var(--accent-2),var(--accent) 85%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}

/* ambient glow behind content, echo of the orb technique but tasteful + on-brand */
.ambient-glow{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.ambient-glow i{position:absolute;border-radius:50%;filter:blur(110px);animation:drift 26s ease-in-out infinite alternate}
.ambient-glow i:nth-child(1){top:-12%;left:-8%;width:46vw;height:46vw;background:radial-gradient(circle,rgba(var(--accent-2-rgb),.28),transparent 70%)}
.ambient-glow i:nth-child(2){bottom:-18%;right:-10%;width:52vw;height:52vw;background:radial-gradient(circle,rgba(var(--accent-rgb),.22),transparent 70%);animation-duration:32s;animation-delay:-6s}
@keyframes drift{
  0%{transform:translate(0,0) scale(1)}
  50%{transform:translate(3vw,-2vw) scale(1.06)}
  100%{transform:translate(-2vw,3vw) scale(1)}
}

/* ---------- firma visual: retícula de circuito ----------
   El "flujo de señal" ya vive en flow-svg (líneas del hero) y en el
   brillo de los terminal-chrome. Esta retícula de puntos es la tercera
   pata de esa misma idea, siempre presente de fondo en TODO el sitio
   (no solo el hero): una placa de circuito muy tenue, con algunas
   intersecciones marcadas en el color de marca, como si el fondo
   entero fuera la "placa madre" sobre la que corre el software. Muy
   sutil a propósito — es textura, no protagonista; el brillo ambiental
   de arriba sigue siendo el elemento con más peso visual. */
.circuit-grid{
  position:fixed;inset:0;z-index:-3;pointer-events:none;
  background-image:
    radial-gradient(rgba(var(--accent-2-rgb),.7) 1.2px, transparent 1.2px),
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:64px 64px, 32px 32px, 32px 32px;
  background-position:0 0, 0 0, 0 0;
  mask-image:radial-gradient(ellipse 90% 75% at 50% 0%, #000 0%, transparent 85%);
  -webkit-mask-image:radial-gradient(ellipse 90% 75% at 50% 0%, #000 0%, transparent 85%);
  opacity:.85;
}

/* scroll-reveal — usado en features, tarjetas, terminales y cabeceras de sección.
   Solo se oculta si JS confirma estar activo (clase .js en <html>), así el
   contenido nunca queda invisible si un plugin de caché/optimización rompe el script. */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.js .reveal.is-visible{opacity:1;transform:translateY(0)}
.reveal-1{transition-delay:.06s}
.reveal-2{transition-delay:.14s}
.reveal-3{transition-delay:.22s}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(10,8,15,.72);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--border-soft);
}
.nav::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--accent-2-rgb),.55) 20%,rgba(var(--accent-rgb),.5) 50%,rgba(var(--gold-rgb),.4) 80%,transparent);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:76px;position:relative}
.logo{font-family:var(--font-mono);font-weight:700;font-size:16px;letter-spacing:.01em;display:flex;align-items:center;gap:10px}
.logo .dot{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 14px 2px rgba(var(--accent-rgb),.6);animation:pulse 2.4s ease-in-out infinite}
.logo b{color:var(--text);font-family:var(--font-display);letter-spacing:-.01em}
.logo span{color:var(--accent-2);font-weight:600}
/* Logo — límite de tamaño obligatorio, tanto para el logo.png del tema
   como para cualquier imagen que el usuario suba en Personalizar > Identidad.
   Sin esto, un logo personalizado con dimensiones grandes se renderiza
   a tamaño completo y rompe el header. */
.logo img,.custom-logo-wrap{display:flex;align-items:center}
.nav-inner .logo img,.nav-inner .custom-logo-wrap img,.nav-inner .custom-logo-wrap svg{max-height:34px;width:auto;display:block}
.footer-grid .logo img,.footer-grid .custom-logo-wrap img,.footer-grid .custom-logo-wrap svg{max-height:30px;width:auto;display:block}
.custom-logo-wrap a{display:flex;align-items:center;line-height:0}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(var(--accent-rgb),.35)}50%{opacity:.75;box-shadow:0 0 0 5px rgba(var(--accent-rgb),0)}}
.nav-links{display:flex;align-items:center;gap:34px}
.nav-links a{font-size:14px;color:var(--text-muted);transition:color .15s;position:relative;padding-bottom:4px}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1.5px;background:var(--accent);transition:width .2s ease}
.nav-links a:hover{color:var(--text)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-links a.active{color:var(--text)}
.nav-cta{display:flex;align-items:center;gap:14px}
.nav-toggle{display:none;background:none;border:0;color:var(--text);font-size:22px;cursor:pointer}
.nav-cart-mobile{display:none}

/* Burbuja flotante del carrito en mobile — ver header.php para el porqué.
   Vive FUERA de <nav> (fixed real, sin riesgo de que backdrop-filter en
   .nav le cree un containing block). Oculta por defecto en escritorio;
   se activa y posiciona solo dentro de la media query de mobile más abajo. */
.cart-bubble{
  display:none;position:fixed;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;color:var(--text);
  background:var(--surface-2);border:1px solid var(--border);
  transition:top .12s ease,left .12s ease,transform .12s ease;
  touch-action:none; /* el gesto lo maneja el JS de arrastre, no el scroll del navegador */
  /* Auditoría de rendimiento/compat móvil (ver CHANGELOG):
     estas tres evitan que el navegador trate la burbuja como un enlace
     arrastrable/con menú contextual nativo — en Samsung Internet en
     particular, sin esto, un toque sostenido dispara el menú "copiar
     enlace/abrir en pestaña nueva" del sistema en vez de dejar que el
     pointermove del JS controle el arrastre. */
  -webkit-user-drag:none; user-drag:none;
  -webkit-touch-callout:none;
  -webkit-user-select:none; user-select:none;
}
.cart-bubble.is-dragging{transition:none;cursor:grabbing}
.cart-bubble .cart-badge{
  position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 4px;
  border-radius:999px;background:var(--accent);color:var(--accent-ink);font-size:10.5px;font-weight:700;
  line-height:18px;text-align:center;box-shadow:0 0 0 2px var(--surface);
  z-index:1; /* por encima del ::before del aura, ver más abajo */
}
.cart-bubble .cart-badge.is-empty{display:none}

/* Aura pulsante — antes animaba "box-shadow" directamente sobre .cart-bubble.
   box-shadow NO es una propiedad que el navegador pueda "componer" en su
   propia capa: cada fotograma de la animación forzaba un repintado real
   del blur, encendido de forma indefinida (infinite) mientras el sitio
   estuviera abierto. En el CPU throttling que PageSpeed/Lighthouse simula
   para "Rendimiento en Móvil" (4-6x más lento que un CPU de escritorio)
   ese repintado continuo es justo el tipo de costo que penaliza fuerte —
   coincide con la caída de 98 (PC) a 59 (Móvil) que se ve en las capturas.
   Solución: el aura ahora vive en un ::before separado, con box-shadow
   FIJO (una sola vez, sin animar) y solo se anima su opacity/transform,
   que sí van por la capa compuesta de la GPU — visualmente idéntico,
   prácticamente gratis para el hilo principal. */
.cart-bubble::before{
  content:"";position:absolute;inset:-9px;z-index:-1;border-radius:50%;
  box-shadow:0 6px 18px rgba(0,0,0,.4),0 0 20px 4px rgba(var(--accent-2-rgb),.8),0 0 42px 10px rgba(var(--accent-2-rgb),.42);
  animation:flux-cart-aura-pulse 2.6s ease-in-out infinite;
}
.cart-bubble.is-dragging::before{animation-play-state:paused}

@keyframes flux-cart-aura-pulse{
  0%,100%{opacity:.62;transform:scale(.86)}
  50%{opacity:1;transform:scale(1)}
}

/* La regla global de prefers-reduced-motion (arriba, cerca de :root) deja
   la animación "congelada" en el fotograma en el que estuviera al forzar
   animation-duration a ~0 — con box-shadow ese fotograma podía ser el más
   tenue del ciclo, que es justo el "aura muy tenue" reportado. Con la
   animación ahora en opacity, se fuerza explícitamente el fotograma MÁS
   visible (no uno al azar) para quien tenga activado "quitar animaciones"
   en el sistema — algo bastante común en Android/Samsung por batería o
   accesibilidad, y no algo que se pueda "arreglar" del lado del sitio: es
   una preferencia del usuario que hay que respetar sin dejarlo mal. */
@media (prefers-reduced-motion: reduce){
  .cart-bubble::before{animation:none;opacity:1;transform:scale(1)}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-body);font-weight:600;font-size:14.5px;
  padding:13px 26px;border-radius:var(--radius-sm);
  border:1px solid transparent;cursor:pointer;transition:transform .18s cubic-bezier(.2,.8,.3,1),filter .15s,box-shadow .2s,background .15s;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px) scale(.98)}
.btn-primary{
  background:linear-gradient(120deg,var(--accent),#ff8f6e);color:var(--accent-ink);
  box-shadow:0 10px 24px -8px rgba(var(--accent-rgb),.55);
}
.btn-primary:hover{filter:brightness(1.06);transform:translateY(-2px);box-shadow:0 16px 32px -10px rgba(var(--accent-rgb),.65)}
.btn-outline{background:transparent;color:var(--text);border-color:var(--border)}
.btn-outline:hover{border-color:rgba(var(--accent-2-rgb),.6);transform:translateY(-2px);background:rgba(var(--accent-2-rgb),.06)}
.btn-block{width:100%}
.btn-sm{padding:9px 16px;font-size:13px}

/* ---------- terminal chrome (signature element) ---------- */
.terminal{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.03) inset;
}
.terminal-bar{
  display:flex;align-items:center;gap:8px;
  padding:12px 16px;border-bottom:1px solid var(--border);
  background:var(--surface-2);
}
.terminal-bar span{width:10px;height:10px;border-radius:50%;background:var(--border)}
.terminal-bar span:nth-child(1){background:#FF5F57}
.terminal-bar span:nth-child(2){background:#FEBC2E}
.terminal-bar span:nth-child(3){background:#28C840}
.terminal{position:relative;transition:transform .25s ease}
.terminal:hover{transform:translateY(-3px)}
.terminal::before{
  content:"";position:absolute;inset:-1px;border-radius:calc(var(--radius) + 1px);
  padding:1px;background:linear-gradient(135deg,rgba(var(--accent-2-rgb),.45),transparent 40%,rgba(var(--accent-rgb),.35));
  background-size:220% 220%;animation:sheen 9s ease-in-out infinite;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
@keyframes sheen{0%{background-position:0% 0%}50%{background-position:100% 100%}100%{background-position:0% 0%}}
.terminal-bar .path{
  margin-left:10px;font-family:var(--font-mono);font-size:12px;color:var(--text-muted);
}
.terminal-body{padding:22px}

/* Tratamiento especial del terminal del hero: leve inclinación (se
   endereza al pasar el mouse) + una píldora flotante superpuesta en la
   esquina — reduce la sensación de "recuadro plano" que tenía antes. */
.terminal-wrap{position:relative}
.terminal-wrap .terminal{transform:rotate(-1.1deg);transition:transform .3s cubic-bezier(.2,.8,.3,1)}
.terminal-wrap:hover .terminal{transform:rotate(0deg) translateY(-4px)}
.floating-chip{
  position:absolute;top:-16px;right:20px;z-index:2;
  background:var(--surface-2);border:1px solid var(--border);border-radius:100px;
  padding:9px 16px 9px 12px;font-family:var(--font-mono);font-size:11.5px;font-weight:700;
  display:flex;align-items:center;gap:7px;color:var(--text);
  box-shadow:0 14px 28px -10px rgba(0,0,0,.6);
  animation:chip-float 4s ease-in-out infinite;
}
.floating-chip .dot{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px 2px rgba(var(--gold-rgb),.7);flex-shrink:0}
@keyframes chip-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@media (prefers-reduced-motion: reduce){.floating-chip{animation:none}}

/* ---------- hero flow line ---------- */
.hero{position:relative;padding:120px 0 96px;overflow:hidden}
.flow-svg{position:absolute;inset:0;width:100%;height:100%;opacity:.5;pointer-events:none}
.flow-svg path{
  fill:none;stroke:var(--accent-2);stroke-width:1.4;stroke-dasharray:6 10;
  animation:flow 18s linear infinite;opacity:.55;
}
.flow-svg path.p2{stroke:var(--accent);stroke-dasharray:2 8;animation-duration:24s;opacity:.35}
@keyframes flow{to{stroke-dashoffset:-400}}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:64px;align-items:center}

/* La etiqueta "eyebrow" simple se reemplaza en el hero por una píldora con
   borde en degradado y fondo con textura — el mismo dato (categoría +
   ubicación) pero con mucho más peso visual: es lo primero que se ve al
   entrar, así que no puede sentirse como una etiqueta genérica de blog. */
.hero-badge{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-mono);font-size:12.5px;font-weight:600;letter-spacing:.02em;
  color:var(--text-muted);padding:9px 16px;border-radius:100px;margin-bottom:26px;
  background:var(--surface);border:1px solid var(--border);
}
.hero-badge i{width:6px;height:6px;border-radius:50%;background:var(--accent);flex-shrink:0}

.hero h1{font-size:clamp(40px,6.4vw,74px);letter-spacing:-.03em;line-height:1.03}
.hero .lede{font-size:clamp(16.5px,1.7vw,19.5px);max-width:48ch;margin-top:22px;color:var(--text-muted)}
.hero-actions{display:flex;gap:16px;margin-top:34px;flex-wrap:wrap}
.hero-trust{display:flex;gap:0;margin-top:44px;flex-wrap:wrap;border-top:1px solid var(--border-soft);padding-top:26px}
.hero-trust div{font-family:var(--font-mono);font-size:12px;color:var(--text-muted);padding-right:26px;margin-right:26px;border-right:1px solid var(--border-soft)}
.hero-trust div:last-child{border-right:0;margin-right:0;padding-right:0}
.hero-trust b{color:var(--text);display:block;font-family:var(--font-display);font-size:24px;letter-spacing:-.01em}

/* ---------- contenido de entradas (the_content del editor) ---------- */
.prose{font-size:16px;line-height:1.75;color:var(--text)}
.prose>*+*{margin-top:1.2em}
.prose p{color:var(--text)}
.prose h2{font-size:26px;margin-top:1.6em}
.prose h3{font-size:20px;margin-top:1.4em}
.prose a{color:var(--accent-2);text-decoration:underline;text-underline-offset:2px}
.prose ul,.prose ol{padding-left:1.3em;color:var(--text)}
.prose li{margin:.4em 0}
.prose img{border-radius:var(--radius);width:100%;height:auto}
.prose blockquote{
  margin:1.4em 0;padding:4px 0 4px 20px;border-left:3px solid var(--accent-2);
  color:var(--text-muted);font-style:italic;
}
.prose code{
  font-family:var(--font-mono);font-size:.9em;background:var(--surface-2);
  padding:.15em .4em;border-radius:4px;color:var(--accent);
}
.prose pre{
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:16px 18px;overflow-x:auto;
}
.prose pre code{background:none;padding:0;color:var(--text)}
.prose hr{border:0;border-top:1px solid var(--border);margin:2em 0}

/* ---------- sections ---------- */
/* Antes era "section{padding:74px 0}" sin ninguna clase: como es un
   selector genérico por etiqueta, también le caía a los <section> que
   WooCommerce inserta por su cuenta (woocommerce-order-downloads,
   woocommerce-order-details...), sumando 74px arriba + 74px abajo a cada
   uno aunque tengan poco contenido — eso era el hueco enorme entre
   "Descargas" y la caja de la licencia en la página de agradecimiento.
   Se acota para que solo aplique a las secciones del propio tema. */
section:not([class^="woocommerce-"]) { padding:74px 0 }
.section-head{max-width:640px;margin-bottom:44px}
.section-head h2{font-size:clamp(26px,3.4vw,38px);letter-spacing:-.015em}
.divider{height:1px;background:var(--border);border:0;margin:0}

/* ---------- feature grid ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.feature{
  background:var(--surface);border-radius:var(--radius-lg);
  padding:28px;transition:transform .25s cubic-bezier(.2,.8,.3,1),box-shadow .25s;position:relative;overflow:hidden;
  border:1px solid var(--border);
}
.feature::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(135deg,rgba(var(--accent-2-rgb),.6),transparent 45%,rgba(var(--accent-rgb),.5));
  opacity:0;transition:opacity .3s ease;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.feature:hover{transform:translateY(-5px);box-shadow:0 24px 48px -20px rgba(0,0,0,.55)}
.feature:hover::after{opacity:1}
.feature .icon{
  width:44px;height:44px;border-radius:12px;
  background:linear-gradient(135deg,var(--surface-2),var(--surface-3));
  border:1px solid var(--border-soft);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;
  font-family:var(--font-mono);color:var(--accent-2);font-size:17px;
}
.feature h3{font-size:17.5px;margin-bottom:9px;letter-spacing:-.01em}
.feature p{font-size:14.5px;margin:0}

/* ----------------------------------------------------------------
   Firma visual — páginas de contenido (legal, soporte, nosotros).
   Antes estas páginas solo tenían un <h1> plano; con el resto del
   sitio hablando en el lenguaje de "software" (terminal, mono, flow-
   line), una página de Términos con un <h1> genérico se sentía como
   una página aparte, sin editar. doc-hero le da el mismo tratamiento
   de "ventana de sistema" que ya tienen los productos: una ruta estilo
   terminal en vez de breadcrumb normal, y metadatos de "archivo" (última
   actualización) igual que un commit de código — coherente con el resto
   de la marca, sin inventar un lenguaje visual nuevo para estas páginas.
   ---------------------------------------------------------------- */
.doc-hero{position:relative;padding:64px 0 48px;overflow:hidden}
.doc-hero h1{font-size:clamp(30px,4.2vw,46px);letter-spacing:-.02em;max-width:20ch}
.doc-hero .lede{font-size:16.5px;max-width:56ch;margin-top:14px}
.doc-meta{display:flex;gap:32px;flex-wrap:wrap;margin-top:26px;padding-top:22px;border-top:1px solid var(--border)}
.doc-meta > div{display:flex;flex-direction:column;gap:3px}
.doc-meta b{color:var(--text);font-family:var(--font-display);font-size:15px;font-weight:600}
.doc-meta small{font-family:var(--font-mono);font-size:12px;color:var(--text-muted)}

/* callout — saca del párrafo un dato clave (7 días de garantía, sin
   envíos físicos, etc.) para que se pueda leer sin tener que buscarlo
   dentro de un bloque largo de texto legal. */
.callout{
  display:flex;gap:16px;background:var(--surface);border:1px solid var(--border);
  border-left:3px solid var(--accent-2);border-radius:var(--radius-sm);
  padding:20px 22px;margin:28px 0;
}
.callout .callout-icon{
  flex-shrink:0;width:34px;height:34px;border-radius:9px;background:var(--surface-2);
  display:flex;align-items:center;justify-content:center;font-size:16px;
}
.callout h4{font-family:var(--font-display);font-size:15.5px;color:var(--text);margin:0 0 4px}
.callout p{font-size:14px;margin:0;color:var(--text-muted)}
.callout.warm{border-left-color:var(--accent)}
.callout.gold{border-left-color:var(--gold)}

/* layout de documento largo: índice pegajoso + contenido. En mobile el
   índice se colapsa arriba del contenido (orden de documento normal). */
.doc-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:56px;align-items:start}
.doc-toc{position:sticky;top:92px}
.doc-toc .eyebrow{margin-bottom:16px}
.doc-toc a{
  display:block;font-size:13.5px;color:var(--text-muted);padding:7px 0 7px 14px;
  border-left:2px solid var(--border);transition:color .15s,border-color .15s;
}
.doc-toc a:hover{color:var(--text);border-color:var(--text-muted)}

/* tarjetas de reseña/testimonio — usan el mismo lenguaje "terminal"
   (barra con puntos) que el resto del sitio, con la cita como si fuera
   el contenido de la ventana en vez de una tarjeta de reseña genérica. */
.quote-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.quote-card .terminal-bar{padding:10px 14px}
.quote-card .terminal-bar span{width:8px;height:8px}
.quote-card blockquote{margin:0;padding:22px;font-size:14.5px;color:var(--text);line-height:1.65;font-style:normal}
.quote-card .quote-foot{display:flex;align-items:center;justify-content:space-between;padding:0 22px 20px;font-family:var(--font-mono);font-size:12.5px;color:var(--text-muted)}
.quote-card .stars{color:var(--gold);letter-spacing:1px}

/* franja de CTA de cierre — usada antes del footer en varias páginas */
.cta-band{
  background:linear-gradient(135deg,rgba(var(--accent-2-rgb),.14),rgba(var(--accent-rgb),.1));
  border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:52px;text-align:center;
}
.cta-band h2{font-size:clamp(24px,3vw,32px);margin-bottom:10px}
.cta-band p{max-width:52ch;margin:0 auto 26px}
.cta-band .hero-actions{justify-content:center;margin-top:0}

/* ---------- product card ---------- */
/* ---------- página de producto: galería + buy-box premium ----------
   Sin marco ni tarjeta: la imagen del producto "flota" sobre el fondo
   de la página. Detrás, un halo con los propios colores de la foto
   (desenfocado y con los bordes desvanecidos, igual que el resto de
   los elementos ambientales del tema) — nunca un rectángulo visible.
   La imagen en primer plano siempre se ve completa (object-fit:contain),
   sin importar su proporción u orientación. */
.flagship-card{display:grid;grid-template-columns:1fr 1fr}
.flagship-media,.gallery-main{
  position:relative;overflow:visible;aspect-ratio:4/3;min-width:0;
  display:flex;align-items:center;justify-content:center;
}
.gallery-col{display:flex;flex-direction:column;min-width:0}
.gallery-col .gallery-main{aspect-ratio:4/3}
.flagship-media{min-height:280px}
.flagship-media .media-backdrop,.gallery-main .media-backdrop{
  position:absolute;inset:-10%;width:120%;height:120%;object-fit:cover;
  filter:blur(46px) saturate(1.3) brightness(.55);transform:scale(1.15);opacity:.55;
  -webkit-mask-image:radial-gradient(closest-side,#000 55%,transparent 100%);
  mask-image:radial-gradient(closest-side,#000 55%,transparent 100%);
  pointer-events:none;
}
.flagship-media .media-fg,.gallery-main .media-fg{
  position:relative;width:100%;height:100%;object-fit:contain;padding:26px;box-sizing:border-box;
  filter:drop-shadow(0 20px 38px rgba(0,0,0,.55));display:block;
}
.gallery-main .media-fg{padding:10px}

.gallery-thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.gallery-thumbs button{
  padding:0;border-radius:var(--radius-sm);overflow:hidden;width:68px;height:68px;
  border:1px solid var(--border);background:var(--surface-2);cursor:pointer;opacity:.65;transition:opacity .15s,border-color .15s;
}
.gallery-thumbs button:hover,.gallery-thumbs button.is-active{opacity:1;border-color:var(--accent-2)}
.gallery-thumbs img{width:100%;height:100%;object-fit:cover;display:block}

.buy-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:30px;display:flex;flex-direction:column;height:100%;min-width:0}
.buy-box *{min-width:0}
.buy-box .trust-strip{margin-top:auto}
.rating-row{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:13.5px;color:var(--text-muted)}
.rating-row .star-rating{font-size:14px}

.trust-strip{display:flex;flex-wrap:wrap;gap:18px;margin-top:22px;padding-top:22px;border-top:1px solid var(--border)}
.trust-strip div{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-muted)}
.trust-strip div b{color:var(--accent-2);font-size:15px}

/* Precio con oferta: precio anterior pequeño/tachado/apagado, precio
   vigente grande y en color de marca — evita que ambos se vean del mismo
   tamaño y confundan cuál es el precio real a pagar. */
.price-html del{
  font-size:.55em !important;color:var(--text-muted) !important;font-weight:400 !important;
  text-decoration:line-through;opacity:.8;margin-right:6px;
}
/* los hijos heredan el tamaño ya reducido del <del> en vez de volver a
   multiplicarlo por .55em en cada nivel anidado (span > bdi > span),
   que era la causa de que el "$20" se viera microscópico y partido */
.price-html del *{font-size:1em !important;text-decoration:inherit;}
.price-html ins,.price-html ins *{
  text-decoration:none !important;color:var(--text) !important;font-weight:700 !important;
}
.buy-box .price-html{font-family:var(--font-mono);font-size:30px;font-weight:600;display:inline-flex;align-items:baseline;gap:2px}

/* ---------- entry-content: normaliza el texto pegado desde el editor
   (descripciones largas de producto, con encabezados, cajas de color,
   listas) para que respete la identidad visual del sitio en vez de verse
   como una página aparte, sin importar qué colores haya elegido quien
   escribió el contenido en el editor de bloques. ---------- */
.entry-content{color:var(--text-muted);font-size:15.5px;line-height:1.7}
.entry-content > *:first-child{margin-top:0}
.entry-content h1,.entry-content h2,.entry-content h3,.entry-content h4{
  font-family:var(--font-display);color:var(--text);line-height:1.25;margin:34px 0 12px;
}
.entry-content h1{font-size:26px}
.entry-content h2{font-size:22px}
.entry-content h3{font-size:18px}
.entry-content h4{font-size:16px}
.entry-content p{margin:0 0 16px}
.entry-content a{color:var(--accent-2);text-decoration:underline;text-underline-offset:2px}
.entry-content strong{color:var(--text)}
.entry-content ul,.entry-content ol{margin:0 0 20px;padding-left:0;list-style:none}
.entry-content ul li,.entry-content ol li{position:relative;padding-left:26px;margin-bottom:10px}
.entry-content ul li::before{content:"✓";position:absolute;left:0;color:var(--accent-2);font-weight:700}
/* si el <li> ya trae su propio ícono manual (ej. contenido pegado del editor
   con <span>✓</span> al inicio), no dupliques el check automático del tema */
.entry-content ul li:has(> span:first-child){padding-left:0}
.entry-content ul li:has(> span:first-child)::before{content:none}
.entry-content ol{counter-reset:entry-ol}
.entry-content ol li{counter-increment:entry-ol}
.entry-content ol li::before{content:counter(entry-ol)".";color:var(--accent-2);font-family:var(--font-mono);font-weight:600}
/* cajas / callouts (bloques "grupo" o cita del editor): se fuerzan a los
   tokens de marca en vez de dejar el color que haya elegido el editor */
.entry-content .wp-block-group,
.entry-content blockquote{
  background:var(--surface) !important;border:1px solid var(--border) !important;
  border-left:3px solid var(--accent-2) !important;border-radius:var(--radius-sm);
  padding:20px 22px !important;margin:24px 0;color:var(--text-muted) !important;
}
.entry-content .wp-block-group *,.entry-content blockquote *{color:inherit !important;background:transparent !important;border-color:inherit !important}
.entry-content .wp-block-group h1,.entry-content .wp-block-group h2,.entry-content .wp-block-group h3,
.entry-content .wp-block-group h4,.entry-content blockquote strong{color:var(--text) !important}
.entry-content img{max-width:100%;height:auto;border-radius:var(--radius-sm);display:block;margin:20px 0}
.entry-content table{width:100%;border-collapse:collapse;margin:20px 0;font-size:14px}
.entry-content table td,.entry-content table th{border:1px solid var(--border);padding:10px 12px}
.entry-content hr{border:none;border-top:1px solid var(--border);margin:30px 0}

/* ---------- misc ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;transition:border-color .2s,transform .25s cubic-bezier(.2,.8,.3,1),box-shadow .25s}
.card:hover{border-color:rgba(var(--accent-2-rgb),.45);transform:translateY(-4px);box-shadow:0 22px 44px -22px rgba(0,0,0,.55)}
.card-thumb{aspect-ratio:16/10;background:var(--surface-2);position:relative}
.card-body{padding:20px}
.card-cat{font-family:var(--font-mono);font-size:11px;color:var(--accent-2);text-transform:uppercase;letter-spacing:.08em}
.card h3{font-size:17px;margin:8px 0 6px}
.card p{font-size:14px;margin-bottom:14px}
.card-foot{display:flex;align-items:center;justify-content:space-between}
.price{font-family:var(--font-mono);font-weight:600;color:var(--text);font-size:16px}
.price .old{color:var(--text-muted);text-decoration:line-through;font-weight:400;font-size:13px;margin-right:6px}
.badge{
  font-family:var(--font-mono);font-size:11px;padding:4px 9px;border-radius:100px;
  background:rgba(var(--accent-2-rgb),.14);color:var(--accent-2);border:1px solid rgba(var(--accent-2-rgb),.32);
}
.badge.warm{background:rgba(var(--accent-rgb),.14);color:var(--accent);border-color:rgba(var(--accent-rgb),.32)}

/* mock app window graphic used instead of real screenshots */
.mock-app{padding:0}
.mock-row{display:flex;gap:8px;align-items:center;margin-bottom:10px}
.mock-bar{height:8px;border-radius:4px;background:var(--surface-2)}
.mock-line{height:10px;border-radius:4px;background:var(--surface-2);margin-bottom:8px}
.mock-progress{height:6px;border-radius:4px;background:var(--surface-2);overflow:hidden;margin-top:14px}
.mock-progress i{display:block;height:100%;width:72%;background:linear-gradient(90deg,var(--accent-2),var(--accent))}

/* ---------- forms ---------- */
.field{margin-bottom:18px}
.field label{display:block;font-size:13px;color:var(--text-muted);margin-bottom:7px;font-family:var(--font-mono)}
.field input,.field textarea,.field select{
  width:100%;background:var(--surface-2);border:1px solid var(--border);color:var(--text);
  padding:12px 14px;border-radius:var(--radius-sm);font-family:var(--font-body);font-size:14.5px;
}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent-2)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* ---------- table (specs / order summary) ---------- */
.table-mono{width:100%;border-collapse:collapse;font-family:var(--font-mono);font-size:13.5px}
.table-mono td{padding:11px 0;border-bottom:1px solid var(--border);color:var(--text-muted)}
.table-mono td:last-child{text-align:right;color:var(--text)}
.table-mono tr:last-child td{border-bottom:0}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--border);padding:44px 0 30px;margin-top:40px}
.trust-strip{
  display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:center;
  padding:22px 0;margin-bottom:34px;border-bottom:1px solid var(--border);
  font-family:var(--font-mono);font-size:12.5px;color:var(--text-muted);letter-spacing:.02em;
}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;margin-bottom:34px}
.footer-grid h4{font-size:13px;color:var(--text);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.06em;margin-bottom:14px}
.footer-grid a{display:block;font-size:14px;color:var(--text-muted);margin-bottom:10px}
.footer-grid a:hover{color:var(--text)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--text-muted);flex-wrap:wrap;gap:12px}
.footer-bottom .flag{width:16px;border-radius:2px;vertical-align:-2px;margin-right:6px}

/* ---------- breadcrumb ---------- */
.crumb{font-family:var(--font-mono);font-size:12.5px;color:var(--text-muted);margin-bottom:22px}
.crumb a:hover{color:var(--text)}
.crumb .sep{margin:0 8px;opacity:.5}

/* ---------- accordion ---------- */
details.faq{border-bottom:1px solid var(--border);padding:18px 0}
details.faq summary{cursor:pointer;font-family:var(--font-display);font-size:15.5px;font-weight:600;list-style:none;display:flex;justify-content:space-between;align-items:center}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";color:var(--accent-2);font-size:20px;font-family:var(--font-body)}
details.faq[open] summary::after{content:"–"}
details.faq p{margin-top:12px;font-size:14.5px}

/* ---------- misc ---------- */
.stack-16{display:flex;flex-direction:column;gap:16px}
.center{text-align:center}
.tag-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:34px}
.tag{font-family:var(--font-mono);font-size:12.5px;padding:8px 16px;border-radius:100px;border:1px solid var(--border);color:var(--text-muted);cursor:pointer}
.tag.active{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .nav-links{display:none}
  .nav-links.is-open{
    display:flex;flex-direction:column;position:absolute;top:76px;left:0;right:0;
    background:var(--surface);border-bottom:1px solid var(--border);padding:18px 24px;gap:16px;
  }
  .nav-toggle{display:block}
  .nav-cart{display:none}
  .cart-bubble{
    display:flex;top:50%;right:14px;transform:translateY(-50%);
    width:52px;height:52px;z-index:60;
    box-shadow:0 6px 18px rgba(0,0,0,.4);
  }
  .cart-bubble:active{transform:translateY(-50%) scale(.94)}
  .nav-links.is-open .nav-cart-mobile{
    display:block;font-size:14px;color:var(--text-muted);padding-top:4px;
    border-top:1px solid var(--border);margin-top:2px;
  }
  .hero-grid{grid-template-columns:1fr}
  .grid-3,.grid-2,.flagship-card,.field-row,.doc-layout{grid-template-columns:1fr}
  .doc-toc{position:static;display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px}
  .doc-toc .eyebrow{width:100%;margin-bottom:4px}
  .doc-toc a{
    border-left:0;padding:7px 13px;background:var(--surface);
    border:1px solid var(--border);border-radius:100px;font-size:12.5px;
  }
  .doc-toc a:hover{border-color:var(--text-muted)}
  .cta-band{padding:34px 24px}
  .footer-grid{grid-template-columns:1fr 1fr}
}

/* FASE 2 — Alpine.js controla .nav-links con x-show (mobileOpen) para el
   menú off-canvas. x-show añade/quita "display:none" inline según ese
   estado, lo cual solo debe importar por debajo de 860px. En escritorio
   forzamos flex con !important — una regla !important en la hoja de
   estilos SÍ prevalece sobre un display puesto por JS vía style.display,
   así el menú de escritorio nunca depende del estado mobileOpen. */
@media (min-width:861px){
  .nav-links{display:flex !important}
}

/* =========================================================
   Compatibilidad WooCommerce — para que carrito, checkout,
   mi cuenta y notificaciones (que usan markup por defecto de
   WooCommerce) hereden la identidad de marca sin necesidad de
   sobreescribir esas plantillas por completo.
   ========================================================= */

.woocommerce, .woocommerce-page { color: var(--text); }

/* notices */
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: var(--radius-sm) !important;
  padding: 14px 18px !important;
  list-style: none !important;
}
.woocommerce-message::before, .woocommerce-info::before { color: var(--accent-2) !important; }
.woocommerce-error::before { color: var(--danger) !important; }

/* botones genéricos de WooCommerce (add to cart, update cart, place order...) */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .single_add_to_cart_button, .checkout-button {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  padding: 12px 22px !important;
  font-size: 14.5px !important;
  transition: filter .15s !important;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover {
  background: var(--accent) !important; filter: brightness(1.08) !important;
}
.woocommerce a.button.alt, .woocommerce #respond input#submit.alt { background: var(--accent) !important; }

/* precios */
.woocommerce .price, .price { font-family: var(--font-mono) !important; color: var(--text) !important; }
.woocommerce .price ins { color: var(--accent) !important; text-decoration: none; }
.woocommerce .price del { color: var(--text-muted) !important; opacity: .7; }

/* grid por defecto de productos (shortcodes, related products, upsells) */
.woocommerce ul.products { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 22px !important; list-style: none !important; margin: 0 !important; }
.woocommerce ul.products li.product {
  background: var(--surface) !important; border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important; padding: 18px !important; width: auto !important;
}
.woocommerce ul.products li.product img { border-radius: var(--radius-sm) !important; margin-bottom: 12px !important; }
.woocommerce ul.products li.product h2, .woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-display) !important; color: var(--text) !important; font-size: 16px !important;
}
@media (max-width: 860px){ .woocommerce ul.products { grid-template-columns: 1fr !important; } }

/* tablas: carrito, checkout review, mi cuenta */
.woocommerce table.shop_table {
  border-collapse: collapse !important; width: 100% !important; border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important; overflow: hidden !important;
}
.woocommerce table.shop_table th {
  background: var(--surface-2) !important; color: var(--text-muted) !important;
  font-family: var(--font-mono) !important; font-size: 12px !important; text-transform: uppercase !important;
  padding: 12px !important; border-bottom: 1px solid var(--border) !important;
}
.woocommerce table.shop_table td { padding: 14px 12px !important; border-bottom: 1px solid var(--border) !important; background: var(--surface) !important; }

/* formularios: checkout, mi cuenta, valoraciones (checkout clásico por shortcode) */
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  background: var(--surface-2) !important; border: 1px solid var(--border) !important;
  color: var(--text) !important; border-radius: var(--radius-sm) !important; padding: 12px 14px !important;
}
.woocommerce form .form-row label { color: var(--text-muted) !important; font-family: var(--font-mono) !important; font-size: 13px !important; }

/* Checkout por bloques (WooCommerce Blocks): WooCommerce marca su estructura
   interna como privada y gestiona su propio modo oscuro/claro automático,
   así que solo tocamos bordes y radios — nunca el padding — para no romper
   el posicionamiento de su etiqueta flotante ni el ancho de sus columnas. */
.wc-block-components-text-input input,
.wc-block-components-textarea textarea,
.wc-block-components-address-form select,
.wc-block-components-radio-control__option {
  border-radius: var(--radius-sm) !important;
}
.wc-block-checkout__form,
.wc-block-components-sidebar,
.wc-block-components-main { border-radius: var(--radius) !important; }

/* Causa real de la superposición en País/Región y Departamento: esos dos
   campos no son un <input> normal sino un combobox de WooCommerce
   (role="combobox") cuyo texto se centra verticalmente en la caja. El
   line-height heredado del body (1.55, pensado para párrafos) hace que ese
   texto centrado invada el espacio reservado arriba para la etiqueta.
   Se ataca por dos vías para asegurar que una de las dos gane la cascada:
   1) reset de line-height con !important dentro del wrapper oficial del
      bloque de checkout (documentado y estable por WooCommerce);
   2) reserva explícita de espacio superior en cualquier control con
      role="combobox" (atributo ARIA estable, no depende de clases internas
      "privadas" que WooCommerce puede cambiar sin aviso). */
/* Antes esto era ".wp-block-woocommerce-checkout *" (comodín universal).
   Ese comodín también recalcula la altura de línea de los avisos/paneles
   superpuestos que WooCommerce Blocks posiciona con JS (por ejemplo el
   aviso de "cupón aplicado" o cualquier tooltip/popover dentro del bloque):
   como esos componentes calculan su posición con el alto real del elemento
   en el momento en que aparecen, cambiarles el line-height por debajo hace
   que ese cálculo quede desfasado y el aviso puede quedar "flotando" fijo,
   tapando el botón que esté justo debajo, sin cerrarse solo. Se acota el
   reset a los elementos de texto reales (la razón original del fix: las
   etiquetas de País/Región y Departamento) y se deja fuera cualquier
   contenedor (div) que pueda ser un panel, notice o tooltip. */
.wp-block-woocommerce-checkout,
.wp-block-woocommerce-checkout p,
.wp-block-woocommerce-checkout span,
.wp-block-woocommerce-checkout label,
.wp-block-woocommerce-checkout li,
.wp-block-woocommerce-checkout td,
.wp-block-woocommerce-checkout th,
.wp-block-woocommerce-checkout a,
.wp-block-woocommerce-checkout strong,
.wp-block-woocommerce-checkout small {
  line-height: 1.4 !important;
}
.wp-block-woocommerce-checkout input[role="combobox"],
.wp-block-woocommerce-checkout button[role="combobox"] {
  padding-top: 22px !important;
  padding-bottom: 6px !important;
  line-height: 1.2 !important;
  height: auto !important;
  min-height: 54px !important;
}
.wp-block-woocommerce-checkout [role="combobox"] + label,
.wp-block-woocommerce-checkout label:has(+ [role="combobox"]) {
  top: 8px !important;
  transform: none !important;
  font-size: 12px !important;
}

/* cantidad + botón: fila alineada en vez de apilados */
.buy-box form.cart{display:flex !important;align-items:stretch !important;gap:12px !important;flex-wrap:wrap;margin:0 !important}
.buy-box form.cart .quantity{margin:0 !important;display:flex}
.buy-box .single_add_to_cart_button{flex:1 1 auto !important}

/* Legibilidad de los campos del checkout (Nombre, Apellidos, Dirección...):
   esos campos usan fondo blanco propio de WooCommerce Blocks, pero el color
   de la etiqueta/placeholder que trae por defecto es un gris muy claro con
   poco contraste sobre blanco. Se oscurece explícitamente sin depender de
   si el bloque tiene o no activado "Dark Mode Inputs". */
.wp-block-woocommerce-checkout label{
  color:#4a4a55 !important;
}
.wp-block-woocommerce-checkout input,
.wp-block-woocommerce-checkout select,
.wp-block-woocommerce-checkout textarea,
.wp-block-woocommerce-checkout [role="combobox"]{
  color:#18181f !important;
}
.wp-block-woocommerce-checkout input::placeholder,
.wp-block-woocommerce-checkout textarea::placeholder{
  color:#7a7a85 !important;
  opacity:1 !important;
}

/* Aviso de "cupón aplicado" (WooCommerce Blocks): no basta con darle margen
   porque no estaba en el flujo normal de la página (por eso quedaba
   flotando encima del botón). Se fuerza a quedar en flujo normal, con
   espacio propio arriba y abajo, para que empuje el contenido en vez de
   superponerse. */
.wc-block-components-notice-banner {
  position: static !important;
  inset: auto !important;
  margin-top: 16px !important;
  margin-bottom: 16px !important;
}
/* WordPress define esta clase por convención para ocultar texto de
   accesibilidad (visible solo a lectores de pantalla); el tema nunca la
   declaraba, así que la etiqueta oculta que WooCommerce inserta junto al
   campo de cantidad ("Cantidad de...") se mostraba en línea y era la causa
   real del scroll horizontal al convertir la fila en flex. */
.screen-reader-text{
  border:0 !important;clip:rect(1px,1px,1px,1px) !important;clip-path:inset(50%) !important;
  height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;
  position:absolute !important;width:1px !important;word-wrap:normal !important;
}

.woocommerce .quantity .qty {
  background: var(--surface-2) !important; border: 1px solid var(--border) !important; color: var(--text) !important;
  border-radius: var(--radius-sm) !important; padding: 10px !important; width: 70px !important;
}

/* estrellas de valoración */
.woocommerce .star-rating span::before, .woocommerce .star-rating::before { color: var(--accent) !important; }

/* galería de producto */
.woocommerce div.product div.images { border-radius: var(--radius) !important; overflow: hidden !important; }

/* tabs de producto (descripción, valoraciones) */
.woocommerce-tabs ul.tabs li { background: transparent !important; border: none !important; }
.woocommerce-tabs ul.tabs li a { color: var(--text-muted) !important; font-family: var(--font-mono) !important; font-size: 13px !important; text-transform: uppercase !important; }
.woocommerce-tabs ul.tabs li.active a { color: var(--accent-2) !important; }
.woocommerce-tabs .panel { border-top: 1px solid var(--border) !important; padding-top: 20px !important; color: var(--text-muted) !important; }

/* breadcrumb por defecto de WooCommerce */
.woocommerce-breadcrumb { font-family: var(--font-mono) !important; font-size: 12.5px !important; color: var(--text-muted) !important; margin-bottom: 22px !important; }
.woocommerce-breadcrumb a { color: var(--text-muted) !important; }
.woocommerce-breadcrumb a:hover { color: var(--text) !important; }

/* =========================================================
   Toast "Añadido al carrito" — feedback inmediato, sobre todo en
   mobile: antes había que abrir el menú hamburguesa y bajar hasta el
   final para notar que un producto se había añadido al carrito.
   Se dispara desde assets/theme.js al detectar el evento nativo de
   WooCommerce "added_to_cart" en document.body.
   ========================================================= */
.flux-toast{
  position:fixed;left:50%;bottom:18px;transform:translate(-50%,140%);
  z-index:99999;display:flex;align-items:center;gap:12px;
  max-width:min(92vw,380px);padding:13px 16px;border-radius:12px;
  background:var(--surface-2);border:1px solid var(--border);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  transition:transform .28s cubic-bezier(.22,1,.36,1);
  font-size:13.5px;color:var(--text);
}
.flux-toast.is-visible{transform:translate(-50%,0)}
.flux-toast__icon{
  flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--accent);
  color:var(--accent-ink);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;
}
.flux-toast__text{flex:1 1 auto;line-height:1.4}
.flux-toast__link{flex-shrink:0;color:var(--accent-2);font-weight:600;white-space:nowrap;text-decoration:underline}
@media (min-width:861px){
  .flux-toast{left:auto;right:24px;bottom:24px;transform:translateY(140%)}
  .flux-toast.is-visible{transform:translateY(0)}
}