/* ==========================================================================
   GLOBAL CSS — Bugar Design System v6
   Fuente de verdad: "Bugar UI Kit v6.dc.html" (Bugar Web Site/, raiz del sitio).

   Tesis del sistema (v4 pulido con el skill bugar-frontend):
     "Oscuro para el espacio. Vidrio para el contenido. Color para la accion."
   Lo que cambia respecto a v3:
     1. Excon (display) + Poppins (texto). Inter sale. La mono queda prohibida.
     2. El vidrio es la superficie por defecto (.card); el panel claro se
        conserva para lectura larga (.panel).
     3. Ningun relleno de acento lleva texto blanco: Abyss sobre Lava = 5.29:1.
     4. Neutro frio Ink para muted/faint (mismo hue que el Abyss).
     5. Tres radios, tres sombras, cuatro duraciones con una sola curva.
     6. Hover sin desplazamiento: el color se aclara, el elemento no se mueve.
     7. Sin numeracion 01/02/03, sin emoji, sin puntos que pulsan. Wordmark sin punto.

   Como esta montado este archivo:
     · Las secciones del kit van tal cual (tokens, base, glow, tipografia, nav,
       botones, badges, superficies, commerce, mini-carrito, footer, contacto,
       heros/banner, 404, responsive).
     · Lo que el kit no cubre viene de v3 re-tokenizado (layout del tema,
       listas, animaciones, utilidades, Gutenberg, blindaje, reCAPTCHA).
     · ALIAS v3 → v6 al final del :root: las hojas por plantilla siguen
       nombrando tokens v3 y se actualizan solas.
     · Dos AMBITOS CONGELADOS en v3, por decision: los formularios existentes
       (super-form, WPForms, SureForms, panel de contacto) y las cards finales
       de cada entrada del blog. Ver el ultimo bloque.
   ========================================================================== */

/* Los iconos Phosphor los carga su propia hoja (phosphor-sitio.css, functions.php), no este archivo. */

/* --- Fuentes, servidas desde el tema (3-oct). Antes venian de Fontshare y Google
   Fonts: dos cadenas externas que bloqueaban el titular del hero (el LCP).
   Excon solo existe en 700: el 800 del titular lo engrosa el navegador, como
   antes. Poppins, solo el subconjunto latin (cubre el español). --- */
@font-face{font-family:'Excon';src:url('../fonts/excon/excon-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('../fonts/poppins/poppins-400-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';src:url('../fonts/poppins/poppins-500-latin.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';src:url('../fonts/poppins/poppins-600-latin.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Reservas con las medidas de cada fuente (medidas el 3-oct contra Arial con el
   texto del hero): mientras la fuente buena llega, el texto ya ocupa lo mismo y
   la pagina no salta al cambiar (el CLS que PageSpeed achacaba a .trust-metrics). */
@font-face{font-family:'Excon Reserva';src:local('Arial Bold'),local('Arial-BoldMT'),local('Arial');font-weight:700 900;size-adjust:100%;ascent-override:105%;descent-override:27%;line-gap-override:0%}
@font-face{font-family:'Poppins Reserva';src:local('Arial'),local('ArialMT');font-weight:300 500;size-adjust:113%;ascent-override:92.9%;descent-override:31%;line-gap-override:0%}
@font-face{font-family:'Poppins Reserva';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:600 900;size-adjust:107.6%;ascent-override:97.6%;descent-override:32.5%;line-gap-override:0%}

/* ==========================================================================
   1. TOKENS — contexto por defecto: BASE OSCURA
   ========================================================================== */
:root{
  /* --- Marca --- */
  --lava:#FF4103;              /* lava-500 · accion */
  --lava-400:#FF8163;          /* Lava legible como TEXTO sobre Abyss · 7.54:1 */
  --lava-600:#D73300;          /* Lava con texto claro, si hiciera falta */
  --lava-soft:rgba(255,65,3,0.12);
  --lava-ring:rgba(255,65,3,0.24);
  --magenta:#FD1843;
  --magenta-400:#FF7D7F;       /* Magenta legible como TEXTO sobre Abyss */
  --magenta-soft:rgba(253,24,67,0.14);
  --abyss:#001621;
  --chalk:#FFF9FA;

  /* --- Neutro frio Ink: lleva el hue del Abyss, no es gris --- */
  --ink-200:#CDE2ED;
  --ink-300:#AAC2CF;
  --ink-400:#86A0AE;
  --ink-500:#637D8B;
  --ink-600:#445F6D;
  --ink-700:#294553;
  --ink-800:#122F3D;
  --platinum:#E6E6E6;
  --success:#4ADE80;
  --color-green-wa:#25D366;

  /* --- Texto SOBRE OSCURO. Cada paso con su ratio medido sobre #001621 --- */
  --text-strong:var(--chalk);                    /* 18.5:1 */
  --text-body:rgba(255,249,250,0.72);            /*  9.8:1 */
  --text-muted:var(--ink-300);                   /*  9.3:1 */
  --text-faint:var(--ink-400);                   /*  6.2:1 — piso de texto */
  --text-disabled:var(--ink-500);                /*  4.3:1 — solo disabled */
  --text-accent:var(--lava-400);                 /*  7.5:1 */
  /* Texto sobre CUALQUIER relleno de acento (Lava, Magenta, verde, gradiente) */
  --on-accent:var(--abyss);

  /* --- Degradados. Uno de color, y es el de marca --- */
  --grad-page:radial-gradient(120% 78% at 50% -12%,#002E3E 0%,#001621 52%,#000B11 100%);
  --grad-accent:linear-gradient(135deg,#FF4103 0%,#FD1843 100%);
  --grad-accent-hover:linear-gradient(135deg,#FF8163 0%,#FF7D7F 100%);
  --grad-panel:linear-gradient(180deg,#FFFFFF 0%,#FFF9FA 100%);
  --grad-panel-alt:linear-gradient(180deg,#FFF9FA 0%,#FFFFFF 62%);
  --grad-dark-card:radial-gradient(100% 120% at 100% 0%,#00303F 0%,#001621 58%,#000E15 100%);

  /* --- Superficies sobre oscuro --- */
  --surface:rgba(255,249,250,0.05);
  --surface-2:rgba(255,249,250,0.08);
  --surface-border:rgba(255,249,250,0.12);
  --surface-border-strong:rgba(255,249,250,0.28);

  /* --- La receta del vidrio, en un solo lugar --- */
  --glass-bg:rgba(0,22,33,0.55);
  --glass-bg-solid:rgba(0,22,33,0.82);
  --glass-blur:blur(20px) saturate(1.4);

  /* --- Inputs sobre oscuro --- */
  --input-bg:rgba(255,249,250,0.06);
  --input-bg-focus:rgba(255,249,250,0.10);
  --input-border:rgba(255,249,250,0.16);
  --input-ring:var(--lava-ring);

  /* --- Panel claro --- */
  --panel-bg:#FFFFFF;

  /* --- Tipografia. Sin mono: el rol utility es Poppins 600 tracked --- */
  --font-display:'Excon','Excon Reserva','Poppins','Poppins Reserva',system-ui,sans-serif;
  --font-sans:'Poppins','Poppins Reserva',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* --- Radios: TRES. Un cuarto radio es inconsistencia --- */
  --radius-sm:6px;      /* inputs, badges, tags */
  --radius-md:12px;     /* cards, botones, paneles */
  --radius-full:999px;  /* pills, avatares */

  /* --- Sombras: TRES, y codifican elevacion real --- */
  --shadow-1:0 1px 2px rgba(0,11,17,0.40);
  --shadow-2:0 12px 32px -12px rgba(0,11,17,0.72);
  --shadow-3:0 24px 64px -24px rgba(0,11,17,0.88);

  /* --- Movimiento: una curva, cuatro duraciones --- */
  --ease-out:cubic-bezier(0.2,0,0,1);
  --dur-instant:100ms;
  --dur-fast:150ms;
  --dur-base:250ms;
  --dur-slow:400ms;

  /* --- Espacio: una escala base 4, sin valores sueltos --- */
  --space-4:4px;    --space-8:8px;    --space-12:12px;  --space-16:16px;
  --space-24:24px;  --space-32:32px;  --space-48:48px;  --space-64:64px;
  --space-96:96px;  --space-128:128px;

  --container-max:80rem;
  --container-padding:32px;
  --section-gap:var(--space-96);
  --tap-min:44px;

  /* --- ALIAS v3 → v6. Las hojas por plantilla (front-page.css, template-*.css,
     blog.css, faq.css, woocommerce-custom.css) siguen nombrando tokens del
     sistema v3. Aqui cada nombre viejo apunta al valor v6 equivalente, asi
     que todas se actualizan solas. NO borrar sin migrar esas hojas. --- */
  --lava-light:var(--lava-400);
  --font-mono:var(--font-sans);          /* la mono queda prohibida en v6 */
  --panel-radius:var(--radius-md);
  --panel-shadow:var(--shadow-3);
  --radius-btn:var(--radius-md);
  --radius-btn-sm:var(--radius-md);
  --radius-input:var(--radius-sm);
  --radius-card:var(--radius-md);
  --radius-icon:var(--radius-sm);
  --radius-panel:var(--radius-md);
  --radius-lg:var(--radius-md);
  --radius-xl:var(--radius-md);
  --radius-2xl:var(--radius-md);
  --radius-block:var(--radius-md);
  --shadow-card:var(--shadow-1);
  --shadow-card-hover:var(--shadow-2);
  --shadow-btn:none;                     /* v6: el boton no cambia de sombra */
  --shadow-btn-hover:none;
  --shadow-accent:var(--shadow-2);
  --shadow-accent-hover:var(--shadow-3);
  --shadow-dark:var(--shadow-1);
  --shadow-dark-hover:var(--shadow-2);
  --shadow-glow-lava:var(--shadow-2);
  --shadow-glow-magenta:var(--shadow-2);
  --shadow-glow-orange:var(--shadow-2);
  --shadow-glow-accent:var(--shadow-2);
  --shadow-cta:var(--shadow-2);
  --ease:var(--ease-out);
  --t-fast:var(--dur-fast);
  --t-base:var(--dur-base);
  --t-slow:var(--dur-slow);
  --nav-height:5rem;
  --color-dark:var(--abyss);
  --color-surface:var(--surface);
  --color-surface-light:var(--surface-2);
  --color-border:var(--surface-border);
  --color-border-light:var(--surface-border);
  --color-lava:var(--lava);
  --color-lava-light:var(--lava-400);
  --color-orange:var(--lava);
  --color-orange-light:var(--lava-400);
  --color-magenta:var(--magenta);
  --color-magenta-light:var(--magenta-400);
  --color-accent:var(--magenta);
  --color-accent-light:var(--magenta-400);
  --color-white:var(--text-strong);
  --color-chalk:var(--text-strong);
  --color-muted:var(--text-muted);
  --color-platinum:var(--text-faint);
  --color-red:var(--magenta-400);
  --text-on-dark:var(--chalk);
  --text-on-dark-muted:var(--text-body);
  --bg-base:var(--abyss);
  --bg-light:var(--surface);
  --bg-subtle:var(--surface-2);
  --bg-disabled:rgba(255,249,250,0.08);
  --border:var(--surface-border);
  --border-card:var(--surface-border);
  --border-strong:var(--surface-border-strong);
  --primary:var(--lava);
  --text-dark:var(--text-strong);
}

/* --------------------------------------------------------------------------
   INVERSION DE CONTEXTO — contenedores CLAROS
   -------------------------------------------------------------------------- */
.panel,.wpforms-container,.srfm-form-container,.card--light{
  --text-strong:var(--abyss);
  --text-body:rgba(0,22,33,0.72);
  --text-muted:var(--ink-700);        /* 10.1:1 sobre blanco */
  --text-faint:var(--ink-600);        /*  6.8:1 sobre blanco */
  --text-disabled:rgba(0,22,33,0.34);
  --text-accent:#AB2600;              /* lava-700 · 7.0:1 sobre blanco */
  --surface:#FFF9FA;
  --surface-2:#F4F4F5;
  --surface-border:#E6E6E6;
  --surface-border-strong:rgba(0,22,33,0.22);
  --input-bg:#FFF9FA;
  --input-bg-focus:#FFFFFF;
  --input-border:#E6E6E6;
  --input-ring:rgba(255,65,3,0.16);
  --bg-disabled:#F4F4F5;
  --border-card:#F0F0F0;
}

/* Ambito OSCURO explicito: el vidrio puede vivir DENTRO de un panel claro. */
.card,.card--dark,.panel--dark,.mini-cart-panel,.wc-product,.tpl-cta-banner,.super-form{
  --text-strong:var(--chalk);
  --text-body:rgba(255,249,250,0.72);
  --text-muted:var(--ink-300);
  --text-faint:var(--ink-400);
  --text-disabled:var(--ink-500);
  --text-accent:var(--lava-400);
  --surface:rgba(255,249,250,0.06);
  --surface-2:rgba(255,249,250,0.10);
  --surface-border:rgba(255,249,250,0.12);
  --surface-border-strong:rgba(255,249,250,0.28);
  --input-bg:rgba(255,249,250,0.06);
  --input-bg-focus:rgba(255,249,250,0.10);
  --input-border:rgba(255,249,250,0.16);
  --input-ring:var(--lava-ring);
  --border-card:rgba(255,249,250,0.12);
}
@media (min-width:640px){:root{--container-padding:2rem}}
@media (min-width:1024px){:root{--container-padding:2.5rem}}

/* ==========================================================================
   2. RESET Y BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:var(--abyss);scroll-behavior:smooth}
body{
  background-color:var(--abyss);
  background-image:var(--grad-page);
  background-attachment:fixed;
  color:var(--text-strong);
  font-family:var(--font-sans);
  font-size:1rem;
  line-height:1.7;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  position:relative;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--text-accent);text-decoration:none;transition:color var(--dur-instant) var(--ease-out)}
a:hover{color:var(--text-strong)}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font:inherit;color:inherit}
ul,ol{list-style:none}
::selection{background:var(--lava);color:var(--on-accent)}
/* Focus fuerte: una marca fuerte puede tener un focus fuerte. */
:focus-visible{outline:2px solid var(--lava-400);outline-offset:2px}

h1,h2,h3,h4,h5,h6{color:var(--text-strong);text-wrap:balance}
p{text-wrap:pretty}

::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:#000B11}
::-webkit-scrollbar-thumb{background:var(--ink-800);border-radius:var(--radius-full);border:2px solid #000B11}
::-webkit-scrollbar-thumb:hover{background:var(--ink-700)}

/* ---------- Accesibilidad (del tema) ---------- */
.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link:focus{position:fixed;top:.5rem;left:.5rem;z-index:10000;padding:.75rem 1.5rem;background:var(--lava);color:var(--on-accent);font-weight:600;border-radius:var(--radius-md);clip:auto;width:auto;height:auto}

/* ==========================================================================
   3. RESPLANDOR FLOTANTE — .glow-layer (header.php)
   ========================================================================== */
@keyframes orbitarLuz{
  0%{transform:translate3d(0,0,0) scale(1)}
  25%{transform:translate3d(9vw,7vh,0) scale(1.09)}
  50%{transform:translate3d(3vw,15vh,0) scale(.94)}
  75%{transform:translate3d(-7vw,6vh,0) scale(1.06)}
  100%{transform:translate3d(0,0,0) scale(1)}
}
.glow-layer{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:var(--glow-opacity,1)}
.glow-orb{position:absolute;display:block;border-radius:50%;filter:blur(120px);will-change:transform;animation:orbitarLuz 25s cubic-bezier(.45,0,.55,1) infinite}
.glow-orb--lava{width:46vw;height:46vw;min-width:420px;min-height:420px;top:-12vh;left:4vw;background-image:radial-gradient(circle at 50% 50%,rgba(255,65,3,0.30) 0%,rgba(255,65,3,0.10) 42%,transparent 72%)}
.glow-orb--magenta{width:38vw;height:38vw;min-width:340px;min-height:340px;top:34vh;right:2vw;background-image:radial-gradient(circle at 50% 50%,rgba(253,24,67,0.24) 0%,rgba(253,24,67,0.08) 44%,transparent 74%);animation-direction:reverse;animation-delay:-9s}
.glow-orb--teal{width:52vw;height:52vw;min-width:460px;min-height:460px;bottom:-18vh;left:22vw;background-image:radial-gradient(circle at 50% 50%,rgba(0,92,122,0.34) 0%,transparent 70%);animation-delay:-16s}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}

/* ==========================================================================
   4. LAYOUT DEL KIT
   ========================================================================== */
.rule{height:1px;background:linear-gradient(90deg,var(--surface-border),transparent)}


/* Encabezado de seccion: sin numero. El titulo lleva la voz de display. */
.section-head{display:flex;align-items:center;gap:var(--space-24);margin-bottom:var(--space-8)}
.section-head__title{font-family:var(--font-display);font-size:1.5rem;font-weight:700;letter-spacing:-.02em;line-height:1.2;margin:0;flex-shrink:0}
.section-head__rule{flex:1;height:1px;background:linear-gradient(90deg,var(--surface-border),transparent)}


/* ==========================================================================
   4b. LAYOUT DEL TEMA — contenedor y secciones (v3, re-tokenizado)
   ========================================================================== */
.container{max-width:var(--container-max);margin-inline:auto;padding-inline:var(--container-padding);width:100%}
.section{padding-block:var(--section-gap);position:relative}
.panel > *:last-child{margin-bottom:0}
/* Fondos de seccion heredados: sobre base oscura son elevaciones sutiles */
.section--surface,.section--surface-subtle{background:rgba(255,249,250,0.03);border-top:1px solid var(--surface-border);border-bottom:1px solid var(--surface-border)}
.section--dark,.block-contrast{background:transparent;border:none}
/* v6: los encabezados de seccion no llevan numero. Si el markup todavia lo trae, no se pinta. */
.section-head__num{display:none}
.page-hero{padding:var(--space-48) 0;text-align:center}
.page-hero__title{font-family:var(--font-display);font-size:clamp(2.5rem,6.5vw,4.25rem);font-weight:800;letter-spacing:-.03em;line-height:1.0;color:var(--chalk);max-width:17ch;margin:0 auto}
.page-content{padding-block:var(--section-gap)}
.page-content__inner{max-width:48rem;margin-inline:auto}
.site-main{position:relative;z-index:1}
.pt-nav{padding-top:calc(var(--nav-height) + 3rem)}

/* ==========================================================================
   5. TIPOGRAFIA
   Display: Excon 700/800 — top-heavy, contraste de trazo que se acentua en
   pesos gruesos. Estructuralmente distinta de la geometria circular de
   Poppins, asi que el pairing es contraste dentro de armonia.
   Utility: Poppins 600 + 0.14em en mayusculas. La mono queda prohibida.
   ========================================================================== */
.t-display{font-family:var(--font-display);font-size:clamp(2.75rem,7vw,5rem);font-weight:800;line-height:1.0;letter-spacing:-.03em}
.t-h1{font-family:var(--font-display);font-size:clamp(2.25rem,5.5vw,3.75rem);font-weight:800;line-height:1.02;letter-spacing:-.028em}
.t-h2{font-family:var(--font-display);font-size:clamp(1.875rem,4.5vw,2.75rem);font-weight:700;line-height:1.1;letter-spacing:-.024em}
.t-h3{font-family:var(--font-display);font-size:clamp(1.375rem,3vw,1.75rem);font-weight:700;line-height:1.2;letter-spacing:-.02em}
.t-body{font-size:1rem;font-weight:400;line-height:1.7;color:var(--text-body);max-width:65ch}
.t-small{font-size:.875rem;font-weight:500;line-height:1.6;color:var(--text-faint)}
.t-eyebrow,.t-overline,.overline{display:inline-block;font-family:var(--font-sans);font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;line-height:1.4;color:var(--text-accent)}
.t-eyebrow--quiet{color:var(--text-faint)}
.text-gradient-accent{background-image:var(--grad-accent);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* --- Utilidades de color y texto (v3), sobre tokens v6 --- */
.text-orange-gradient,.text-accent-gradient{background-image:var(--grad-accent);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.text-gradient{color:var(--text-strong)}
.color-orange,.color-lava{color:var(--text-accent)}
.color-accent,.color-magenta{color:var(--magenta-400)}
.color-muted{color:var(--text-muted)}
.color-red{color:var(--magenta-400)}
.color-dark{color:var(--text-strong)}
/* v6 mata la mono: el rol utility es Poppins 600 con tracking */
.font-mono{font-family:var(--font-sans);font-weight:600;letter-spacing:.06em}
.font-black{font-weight:800}
.font-bold{font-weight:700}
.font-semibold{font-weight:600}
.font-light{font-weight:400}
.text-xs{font-size:.75rem}
.text-sm{font-size:.875rem}
.text-base{font-size:1rem}
.text-lg{font-size:1.125rem}
.text-xl{font-size:1.25rem}
.text-2xl{font-size:1.5rem}
.text-3xl{font-size:1.875rem}
.text-center{text-align:center}
.uppercase{text-transform:uppercase}
.tracking-widest{letter-spacing:.14em}
.leading-tight{line-height:1.1}
.leading-relaxed{line-height:1.7}
/* Los encabezados del tema llevan la voz de display */
h1,h2,h3{font-family:var(--font-display);letter-spacing:-.02em;line-height:1.1}
h4,h5,h6{font-family:var(--font-sans);font-weight:600}

/* ==========================================================================
   6. NAVEGACION — pildora flotante de vidrio
   ========================================================================== */
/* Fija y no sticky: el tema la coloca dentro de <header>, y un sticky se
   quedaria en el header al hacer scroll. Mismo comportamiento que v3. */
.nav-primary{position:fixed;top:.75rem;left:0;right:0;z-index:50;background:transparent;border:none}
@media (min-width:640px){.nav-primary{top:1.25rem}}
/* Todo el contenido por encima de la capa de luz, y por debajo de la barra */
.site-main,.site-footer,.mobile-sticky-cta{position:relative;z-index:1}
.mini-cart-overlay{z-index:90}.mini-cart-panel{z-index:91}
.nav-primary__inner{
  display:flex;justify-content:space-between;align-items:center;gap:var(--space-24);
  min-height:3.25rem;
  padding:var(--space-8) var(--space-8) var(--space-8) var(--space-24);
  border-radius:var(--radius-full);
  background:var(--glass-bg);
  border:1px solid var(--surface-border);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  box-shadow:var(--shadow-2);
  transition:background var(--dur-base) var(--ease-out);
}
.nav-primary--scrolled .nav-primary__inner{background:var(--glass-bg-solid)}
.nav-primary__logo{display:flex;align-items:center;gap:var(--space-12);flex-shrink:0;color:var(--chalk)}
.nav-primary__logo:hover{color:var(--chalk)}
/* Logo: la version negativa (B blanca) en SVG; el sitio es oscuro.
   Doble clase a proposito: en las paginas de WooCommerce `.woocommerce-page img
   {height:auto}` (0,1,1) le ganaba a una sola clase y el logo salia a 80x75 px. */
.nav-primary .nav-primary__logo-mark{display:block;height:2.25rem;width:auto;flex-shrink:0}
/* Wordmark sin punto final: el punto cierra una marca posicionada como sistema abierto. */
.nav-primary__logo-text{font-family:var(--font-display);font-weight:800;font-size:1.25rem;letter-spacing:.01em;color:var(--chalk)}
.nav-primary__links{display:flex;align-items:center;gap:var(--space-4)}
.nav-primary__link{display:inline-flex;align-items:center;min-height:var(--tap-min);padding:0 var(--space-16);border-radius:var(--radius-full);font-size:.875rem;font-weight:500;color:var(--text-muted);transition:color var(--dur-instant) var(--ease-out),background var(--dur-instant) var(--ease-out)}
.nav-primary__link:hover{color:var(--chalk);background:var(--surface-2)}
.nav-primary__actions{display:flex;align-items:center;gap:var(--space-8)}
.nav-primary__cart-toggle{position:relative;display:flex;align-items:center;justify-content:center;min-width:var(--tap-min);min-height:var(--tap-min);border-radius:var(--radius-sm);color:var(--chalk);font-size:1.25rem;background:var(--surface);border:1px solid var(--surface-border);transition:background var(--dur-instant) var(--ease-out),border-color var(--dur-instant) var(--ease-out)}
.nav-primary__cart-toggle:hover{background:var(--surface-2);border-color:var(--surface-border-strong)}
.nav-primary__cart-count{position:absolute;top:2px;right:2px;min-width:1.125rem;height:1.125rem;padding:0 .25rem;border-radius:var(--radius-full);background:var(--lava);color:var(--on-accent);font-size:.6875rem;font-weight:600;display:flex;align-items:center;justify-content:center;line-height:1}
.nav-primary__toggle{display:flex;align-items:center;justify-content:center;min-width:var(--tap-min);min-height:var(--tap-min);color:var(--chalk);font-size:1.5rem;border-radius:var(--radius-sm)}
.nav-primary__toggle:hover{background:var(--surface-2)}

/* Oculto por defecto; navigation.js alterna .nav-mobile--open. En el kit aparece
   abierto porque es una demo. */
.nav-mobile{display:none;position:fixed;top:calc(.75rem + 3.25rem + .5rem);left:var(--container-padding);right:var(--container-padding);z-index:49;background:rgba(0,22,33,0.92);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--surface-border);border-radius:var(--radius-md);max-width:22rem}
.nav-mobile__inner{padding:var(--space-8) var(--space-16) var(--space-24);display:flex;flex-direction:column;gap:var(--space-4)}
.nav-mobile__link{display:flex;align-items:center;min-height:var(--tap-min);padding:0 var(--space-12);font-size:1rem;font-weight:500;color:var(--text-body);border-radius:var(--radius-sm)}
.nav-mobile__link:hover{color:var(--chalk);background:var(--surface-2)}
.nav-mobile__cta{margin-top:var(--space-16);justify-content:center}
.nav-mobile--open{display:block}
@media (min-width:1025px){.nav-mobile{display:none !important}}
/* El CTA de la barra: mismo boton primario, compacto */
.nav-primary__cta{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-8);min-height:var(--tap-min);padding:0 var(--space-24);border-radius:var(--radius-full);background-color:var(--lava);background-image:var(--grad-accent);color:var(--on-accent);font-size:.875rem;font-weight:600;white-space:nowrap;transition:background-image var(--dur-fast) var(--ease-out)}
.nav-primary__cta:hover{background-image:var(--grad-accent-hover);color:var(--on-accent)}
.mini-cart-overlay{position:fixed;inset:0;z-index:60;background:rgba(0,11,17,0.6);opacity:0;visibility:hidden;transition:opacity var(--dur-base) var(--ease-out),visibility var(--dur-base)}
.mini-cart-overlay--visible{opacity:1;visibility:visible}

/* ==========================================================================
   7. BOTONES
   Regla dura: ningun relleno de acento lleva texto blanco.
   Blanco sobre Lava-500 = 3.36:1 (falla AA). Abyss sobre Lava-500 = 5.29:1.
   En hover el relleno se ACLARA. El boton no se mueve y no cambia de sombra.
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-8);
  min-height:var(--tap-min);
  padding:var(--space-12) var(--space-32);
  border:1px solid transparent;border-radius:var(--radius-md);
  font-family:inherit;font-size:.9375rem;font-weight:600;letter-spacing:-.01em;
  cursor:pointer;white-space:nowrap;
  transition:background-color var(--dur-fast) var(--ease-out),background-image var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
}
.btn--primary{background-color:var(--lava);background-image:var(--grad-accent);color:var(--on-accent)}
.btn--primary:hover{background-image:var(--grad-accent-hover);color:var(--on-accent)}
.btn--lava{background-color:var(--lava);color:var(--on-accent)}
.btn--lava:hover{background-color:var(--lava-400);color:var(--on-accent)}
/* "Comprar ahora" es lo unico que usa Magenta de fondo en todo el sitio. */
.btn--buy-now{background-color:var(--magenta);color:var(--on-accent)}
.btn--buy-now:hover{background-color:var(--magenta-400);color:var(--on-accent)}
.btn--dark{background-color:var(--abyss);color:var(--chalk);border-color:var(--surface-border)}
.btn--dark:hover{background-color:var(--ink-800);color:var(--chalk);border-color:var(--surface-border-strong)}
.btn--secondary{background:transparent;color:var(--text-strong);border-color:var(--surface-border-strong)}
.btn--secondary:hover{background:var(--surface-2);border-color:var(--text-strong);color:var(--text-strong)}
.panel .btn--secondary,.card--light .btn--secondary{background:#fff}
.panel .btn--secondary:hover,.card--light .btn--secondary:hover{background:#FFF9FA}
.btn--whatsapp{background-color:var(--color-green-wa);color:var(--abyss)}
.btn--whatsapp:hover{background-color:#43E07C;color:var(--abyss)}
.btn--outline-accent{background:transparent;color:var(--magenta-400);border-color:var(--magenta)}
.btn--outline-accent:hover{background:var(--magenta);color:var(--on-accent)}
/* Enlace de accion: el subrayado se afirma. No crece el gap. */
.btn--link{display:inline-flex;align-items:center;gap:var(--space-8);min-height:var(--tap-min);padding:0;background:none;border:none;border-radius:0;color:var(--text-accent);font-size:.9375rem;font-weight:600;box-shadow:inset 0 -1px 0 0 rgba(255,129,99,0.35);transition:box-shadow var(--dur-fast) var(--ease-out)}
.btn--link:hover{color:var(--text-accent);box-shadow:inset 0 -1px 0 0 var(--lava-400)}
.panel .btn--link{box-shadow:inset 0 -1px 0 0 rgba(171,38,0,0.35)}
.panel .btn--link:hover{box-shadow:inset 0 -1px 0 0 #AB2600}
.btn--sm{padding:var(--space-8) var(--space-24);font-size:.875rem}
.btn--xs{padding:var(--space-8) var(--space-16);font-size:.8125rem}
.btn--full{width:100%}
.btn:disabled{background-color:var(--surface-2);background-image:none;color:var(--text-disabled);border-color:var(--surface-border);cursor:not-allowed}
/* alias v3 */
.btn-link{display:inline-flex;align-items:center;gap:var(--space-8);min-height:var(--tap-min);padding:0;background:none;border:none;border-radius:0;color:var(--text-accent);font-size:.9375rem;font-weight:600;box-shadow:inset 0 -1px 0 0 rgba(255,129,99,0.35)}
.btn-link:hover{color:var(--text-accent);box-shadow:inset 0 -1px 0 0 var(--lava-400)}
.btn--ghost{background:transparent;color:var(--text-strong);border-color:var(--surface-border-strong)}
.btn--ghost:hover{background:var(--surface-2);border-color:var(--text-strong)}

/* ==========================================================================
   8. BADGES Y PILLS
   ========================================================================== */
.badge{display:inline-flex;align-items:center;gap:var(--space-8);padding:var(--space-4) var(--space-12);border-radius:var(--radius-sm);font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1.5}
.badge--surface{background:var(--surface);border:1px solid var(--surface-border);color:var(--text-muted)}
.badge--lava{background:var(--lava-soft);border:1px solid rgba(255,65,3,0.28);color:var(--text-accent)}
.badge--magenta{background:var(--magenta-soft);border:1px solid rgba(253,24,67,0.28);color:var(--magenta-400)}
.panel .badge--magenta,.card--light .badge--magenta{color:#B40029;border-color:rgba(180,0,41,0.28)}
.badge--muted{background:var(--surface);color:var(--text-muted)}
/* El punto ya no pulsa: un latido decorativo no ayuda a entender el producto. */
.badge__dot{width:.375rem;height:.375rem;border-radius:50%;flex-shrink:0}
.badge__dot--lava{background:var(--lava-400)}

.pill{display:inline-flex;align-items:center;min-height:var(--tap-min);padding:0 var(--space-24);border:1px solid var(--surface-border);border-radius:var(--radius-full);background:transparent;color:var(--text-body);font-family:inherit;font-size:.875rem;font-weight:500;cursor:pointer;transition:color var(--dur-instant) var(--ease-out),border-color var(--dur-instant) var(--ease-out),background var(--dur-instant) var(--ease-out)}
.pill:hover{background:var(--surface-2);border-color:var(--text-strong);color:var(--text-strong)}
.pill--active{background:var(--lava);border-color:var(--lava);color:var(--on-accent);font-weight:600}
.pill--active:hover{background:var(--lava-400);border-color:var(--lava-400);color:var(--on-accent)}

.shop-filters{display:flex;flex-wrap:wrap;gap:var(--space-8)}
.shop-filters__pill{flex-shrink:0;display:inline-flex;align-items:center;white-space:nowrap;min-height:var(--tap-min);padding:0 var(--space-24);border:1px solid var(--surface-border);border-radius:var(--radius-full);background:var(--surface);color:var(--text-body);font-size:.875rem;font-weight:500;transition:color var(--dur-instant) var(--ease-out),border-color var(--dur-instant) var(--ease-out),background var(--dur-instant) var(--ease-out)}
.shop-filters__pill:hover{background:var(--surface-2);border-color:var(--chalk);color:var(--chalk)}
.shop-filters__pill--active{background-color:var(--lava);background-image:var(--grad-accent);border-color:transparent;color:var(--on-accent);font-weight:600}
.shop-filters__pill--active:hover{background-image:var(--grad-accent-hover);color:var(--on-accent)}
/* alias v3: naranja = lava, accent = magenta. El punto no pulsa (v6). */
.badge--orange{background:var(--lava-soft);border:1px solid rgba(255,65,3,0.28);color:var(--text-accent)}
.badge--accent{background:var(--magenta-soft);border:1px solid rgba(253,24,67,0.28);color:var(--magenta-400)}
.badge__dot--orange{background:var(--lava-400)}
.badge__dot--accent{background:var(--magenta-400)}
.animate-pulse{animation:none}

/* ==========================================================================
   9. SUPERFICIES — el vidrio es la superficie por defecto
   Hover: el borde se aclara y la elevacion sube un nivel. Sin translate.
   ========================================================================== */
.card{
  display:flex;flex-direction:column;gap:var(--space-16);
  padding:var(--space-32);
  background:var(--glass-bg);
  border:1px solid var(--surface-border);
  border-radius:var(--radius-md);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  box-shadow:var(--shadow-2);
  color:var(--text-body);
  transition:border-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out);
}
.card:hover{border-color:var(--surface-border-strong);box-shadow:var(--shadow-3)}
.card--solid{background:var(--abyss);background-image:var(--grad-dark-card);border-color:var(--surface-border);backdrop-filter:none;-webkit-backdrop-filter:none}
.card--flat{background:var(--surface);border-color:var(--surface-border);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.card--flat:hover{box-shadow:none;border-color:var(--surface-border)}
.card--featured{border-color:rgba(255,65,3,0.55);box-shadow:var(--shadow-2)}
.card--featured:hover{border-color:var(--lava);box-shadow:var(--shadow-3)}
.card--light{background:#fff;background-image:var(--grad-panel);border-color:#F0F0F0;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:var(--shadow-1)}
.card--light:hover{border-color:var(--platinum);box-shadow:var(--shadow-2)}
.card__icon{width:2.75rem;height:2.75rem;border-radius:var(--radius-sm);background:var(--surface-2);border:1px solid var(--surface-border);display:flex;align-items:center;justify-content:center;font-size:1.375rem;color:var(--text-accent);flex-shrink:0}
.card--solid .card__icon,.card--dark .card__icon{background-image:var(--grad-accent);border-color:transparent;color:var(--on-accent)}
.card__footer{padding-top:var(--space-16);margin-top:auto;border-top:1px solid var(--border-card);display:flex;justify-content:space-between;align-items:center;font-size:.8125rem;color:var(--text-faint)}
.card h3{font-family:var(--font-display);font-size:1.3125rem;font-weight:700;letter-spacing:-.02em;line-height:1.25;margin:0}
.card p{margin:0;font-size:.9375rem;line-height:1.65;color:var(--text-body);max-width:46ch}

.panel{
  background:var(--panel-bg);
  background-image:var(--grad-panel);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-3);
  color:var(--text-body);
  padding:var(--space-64);
  overflow:hidden;
}
.panel--alt{background-image:var(--grad-panel-alt)}
.panel--dark{background:var(--abyss);background-image:var(--grad-dark-card);color:var(--text-body)}
/* alias v3 */
.card--accent{border-color:rgba(253,24,67,0.55)}
.card--accent:hover{border-color:var(--magenta)}
.card__icon--orange{background-image:var(--grad-accent);border-color:transparent;color:var(--on-accent)}
.card__icon--accent{background:var(--magenta-soft);border-color:rgba(253,24,67,0.28);color:var(--magenta-400)}

/* ==========================================================================
   10. FORMULARIOS — SIN CAMBIOS (v3). Los formularios existentes no entran en el rediseño.
   ========================================================================== */
.form-group, .form-field-group { display: flex; flex-direction: column; gap: 0.5625rem; }

.form-label {
	font-size: 0.875rem; font-weight: 500;
	color: var(--text-strong);
	letter-spacing: 0; text-transform: none;
}

.form-input, .form-field, .form-select, .form-textarea {
	width: 100%;
	min-height: var(--tap-min);
	padding: 0.875rem 1rem;
	border: 1px solid var(--input-border);
	border-radius: var(--radius-input);
	background: var(--input-bg);
	color: var(--text-strong);
	font-family: inherit; font-size: 0.9375rem; font-weight: 400; line-height: 1.6;
	outline: none;
	transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-input:focus, .form-field:focus, .form-select:focus, .form-textarea:focus {
	background: var(--input-bg-focus);
	border-color: var(--lava);
	box-shadow: 0 0 0 4px var(--input-ring);
}

.form-input::placeholder, .form-field::placeholder, .form-textarea::placeholder { color: var(--text-faint); }

.form-textarea { resize: vertical; }

.form-select {
	padding-right: 2.75rem; appearance: none; cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23FF4103' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 1rem center;
}

.form-help { font-size: 0.8125rem; font-weight: 400; color: var(--text-faint); }

.form-input--error, .form-field--error {
	border-color: var(--magenta);
	box-shadow: 0 0 0 4px var(--magenta-soft);
}

.form-error { display: flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; font-weight: 500; color: var(--magenta); }

input[type="checkbox"], input[type="radio"] { accent-color: var(--lava); width: 1.25rem; height: 1.25rem; }

/* ==========================================================================
   11. LISTAS, GRIDS Y DECORATIVOS
   ========================================================================== */
.checklist { display: flex; flex-direction: column; gap: 0.75rem; }
.checklist__item {
	display: flex; align-items: flex-start; gap: 0.625rem;
	font-size: 0.875rem; line-height: 1.6; color: var(--text-body);
}
.checklist__item i { margin-top: 0.1875rem; flex-shrink: 0; color: var(--text-accent); }

.bg-grid{background-image:none}  /* v6: sin patrones de rejilla */

/* Los "radial-glow" heredados quedan neutralizados: el resplandor global
   lo aporta ahora .glow-layer. Se conservan para no romper el markup. */
.radial-glow { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(120px); opacity: 0.35; }
.radial-glow--orange { background: rgba(255, 65, 3, 0.12); }
.radial-glow--accent { background: rgba(253, 24, 67, 0.10); }
.glow-orange, .glow-accent { box-shadow: none; }

.grid { display: grid; gap: 1.75rem; }
.grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }

@media (min-width: 640px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) {
	.grid--3 { grid-template-columns: repeat(3, 1fr); }
	.grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }

/* ==========================================================================
   11. COMMERCE — tarjeta de producto WooCommerce (glass)
   ========================================================================== */
.wc-product{
  display:flex;flex-direction:column;
  background:var(--glass-bg);
  border:1px solid var(--surface-border);
  border-radius:var(--radius-md);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  overflow:hidden;
  box-shadow:var(--shadow-2);
  color:var(--text-body);
  transition:border-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out);
  position:relative;
}
.wc-product:hover{border-color:var(--surface-border-strong);box-shadow:var(--shadow-3)}
.wc-product__media{width:100%;aspect-ratio:4 / 3;display:flex;align-items:center;justify-content:center;background:#000E15;border-bottom:1px solid var(--surface-border)}
.wc-product__ph{font-family:var(--font-sans);font-size:.6875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint)}
.wc-product__title{font-family:var(--font-display);font-size:1.1875rem;font-weight:700;line-height:1.25;letter-spacing:-.02em;color:var(--text-strong);padding:var(--space-24) var(--space-24) 0;margin:0 0 var(--space-12)}
.wc-product__price{display:flex;align-items:baseline;gap:var(--space-8);font-family:var(--font-display);font-size:1.75rem;font-weight:800;letter-spacing:-.02em;color:var(--text-strong);padding:0 var(--space-24);margin:0 0 var(--space-16)}
.wc-product__price del{font-family:var(--font-sans);font-size:.9375rem;font-weight:400;color:var(--text-faint);text-decoration:line-through;opacity:1}
.wc-product__actions{padding:0 var(--space-24) var(--space-24);display:flex;flex-direction:column;gap:var(--space-8);margin-top:auto}
.wc-onsale{position:absolute;top:var(--space-12);left:var(--space-12);padding:var(--space-4) var(--space-12);background:var(--magenta);color:var(--on-accent);font-size:.6875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;border-radius:var(--radius-sm);z-index:2;line-height:1.6}
.wc-onsale--out{background:rgba(0,22,33,0.82);color:var(--text-body);border:1px solid var(--surface-border-strong)}

/* ==========================================================================
   12. MINI-CARRITO — panel lateral glass
   ========================================================================== */
/* Fijo y fuera de pantalla hasta que mini-cart.js anada --open. En el kit es
   absolute dentro de una demo, por eso aparecia abierto. */
.mini-cart-panel{
  position:fixed;top:0;right:0;bottom:0;width:100%;max-width:24rem;z-index:91;
  transform:translateX(100%);transition:transform var(--dur-slow) var(--ease-out);
  background:var(--glass-bg-solid);
  background-image:var(--grad-dark-card);
  border-left:1px solid var(--surface-border);
  backdrop-filter:blur(24px) saturate(1.4);
  -webkit-backdrop-filter:blur(24px) saturate(1.4);
  display:flex;flex-direction:column;
  box-shadow:var(--shadow-3);
  color:var(--text-body);
}
.mini-cart-panel--open{transform:translateX(0)}
.mini-cart-panel__header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-24);border-bottom:1px solid var(--surface-border);flex-shrink:0}
.mini-cart-panel__title{font-family:var(--font-display);font-size:1.25rem;font-weight:700;color:var(--text-strong);letter-spacing:-.02em;margin:0}
.mini-cart-panel__close{display:flex;align-items:center;justify-content:center;min-width:var(--tap-min);min-height:var(--tap-min);border-radius:var(--radius-sm);color:var(--text-faint);font-size:1.125rem;transition:color var(--dur-instant) var(--ease-out),background var(--dur-instant) var(--ease-out)}
.mini-cart-panel__close:hover{color:var(--text-strong);background:var(--surface-2)}
.mini-cart-panel__body{flex:1;overflow-y:auto;padding:var(--space-24)}
.mc-item{display:flex;align-items:center;gap:var(--space-12);padding-bottom:var(--space-16);margin-bottom:var(--space-16);border-bottom:1px solid var(--border-card);position:relative}
.mc-item__thumb{width:3rem;height:3rem;border-radius:var(--radius-sm);flex-shrink:0;background:#000E15;border:1px solid var(--surface-border)}
.mc-item__name{color:var(--text-strong);font-size:.875rem;font-weight:600;line-height:1.4}
.mc-item__qty{display:block;font-size:.8125rem;color:var(--text-faint);margin-top:.125rem}
.mc-item__remove{position:absolute;top:0;right:0;color:var(--magenta-400);font-size:1.125rem;line-height:1}
.mc-total{display:flex;align-items:center;justify-content:space-between;font-size:1rem;font-weight:600;color:var(--text-strong);padding:var(--space-16) 0;border-top:1px solid var(--surface-border)}
.mc-buttons{display:flex;flex-direction:column;gap:var(--space-8)}
.mc-buttons a{display:flex;align-items:center;justify-content:center;width:100%;min-height:var(--tap-min);padding:var(--space-12) var(--space-24);border:1px solid transparent;border-radius:var(--radius-md);font-weight:600;font-size:.9375rem;text-align:center;transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.mc-buttons a.ghost{background:var(--surface);color:var(--text-strong);border-color:var(--surface-border-strong)}
.mc-buttons a.ghost:hover{background:var(--surface-2);border-color:var(--text-strong);color:var(--text-strong)}
.mc-buttons a.checkout{background-color:var(--lava);background-image:var(--grad-accent);color:var(--on-accent)}
.mc-buttons a.checkout:hover{background-image:var(--grad-accent-hover);color:var(--on-accent)}

/* ==========================================================================
   14. ANIMACIONES
   ========================================================================== */
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.animate-fade-in { animation: fadeInUp 0.4s var(--ease) forwards; }
.animate-float { animation: float 3s ease-in-out infinite; }
.animate-pulse { animation: pulse-dot 2s cubic-bezier(0.4,0,0.6,1) infinite; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation: none !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   15. UTILIDADES
   ========================================================================== */
.relative { position: relative; }
.overflow-hidden { overflow: hidden; }
.text-left { text-align: left; }
.inline-block { display: inline-block; }
.flex-shrink-0 { flex-shrink: 0; }

.mt-0 { margin-top: 0; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }


/* ==========================================================================
   16. CONTENIDO DE PAGINA + GUTENBERG
   (Utilidades de WordPress preservadas intactas)
   ========================================================================== */
.page-hero {
	padding: calc(var(--nav-height) + 4rem) 0 2.5rem;
	text-align: center;
}
@media (min-width: 768px) { .page-hero { padding: calc(var(--nav-height) + 6rem) 0 3rem; } }

.page-hero__title {
	font-size: clamp(2.25rem, 5.5vw, 4rem);
	font-weight: 800; letter-spacing: -0.035em; line-height: 1.02;
	color: var(--chalk);
}

.page-content { padding-block: 0 4rem; }

.page-content__inner {
	max-width: 65ch;
	margin-inline: auto;
	font-size: 1.0625rem; line-height: 1.7;
	color: var(--text-body);
}

.page-content__inner h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 800; color: var(--text-strong); margin: 3rem 0 1rem; letter-spacing: -0.03em; line-height: 1.1; }
.page-content__inner h3 { font-size: 1.5rem; font-weight: 600; color: var(--text-strong); margin: 2.5rem 0 0.75rem; letter-spacing: -0.02em; }
.page-content__inner h4 { font-size: 1.25rem; font-weight: 600; color: var(--text-strong); margin: 2rem 0 0.5rem; letter-spacing: -0.01em; }
.page-content__inner p { margin-bottom: 1.5rem; }
.page-content__inner > *:first-child { margin-top: 0; }

.page-content__inner a { color: var(--lava); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.page-content__inner a:hover { color: var(--magenta); }

.page-content__inner ul, .page-content__inner ol { margin: 1rem 0 1.5rem; padding-left: 1.5rem; }
.page-content__inner ul { list-style: disc; }
.page-content__inner ol { list-style: decimal; }
.page-content__inner li { margin-bottom: 0.5rem; }

.page-content__inner blockquote {
	margin: 2rem 0; padding: 1.5rem 2rem;
	border-left: 3px solid var(--lava);
	background: var(--surface);
	border-radius: 0 var(--radius-input) var(--radius-input) 0;
	font-style: italic; color: var(--text-body);
}

.page-content__inner img { border-radius: var(--radius-card); margin: 2rem 0; }
.page-content__inner hr { margin: 3rem 0; border: none; border-top: 1px solid var(--surface-border); }
.page-content__inner strong { color: var(--text-strong); font-weight: 600; }

.page-content__inner table { width: 100%; margin: 2rem 0; border-collapse: collapse; font-size: 0.9375rem; }
.page-content__inner th { background: var(--surface); color: var(--text-strong); font-weight: 600; text-align: left; padding: 0.875rem 1rem; border-bottom: 2px solid var(--surface-border); }
.page-content__inner td { padding: 0.875rem 1rem; border-bottom: 1px solid var(--border-card); }

.page-content__inner pre {
	background: var(--surface); border: 1px solid var(--surface-border);
	border-radius: var(--radius-input); padding: 1.25rem; overflow-x: auto;
	font-family: var(--font-mono); font-size: 0.875rem; margin: 1.5rem 0; color: var(--text-strong);
}
.page-content__inner code { font-family: var(--font-mono); font-size: 0.875em; background: var(--surface-2); padding: 0.15em 0.4em; border-radius: 0.25rem; color: var(--text-strong); }
.page-content__inner pre code { background: none; padding: 0; }

/* -- Alineaciones de Gutenberg (PRESERVADAS) -- */
.alignwide, .page-content__inner .alignwide {
	max-width: calc(65ch + 8rem);
	margin-left: -4rem; margin-right: -4rem;
}
.alignfull, .page-content__inner .alignfull {
	max-width: 100%;
	margin-left: 0; margin-right: 0;
}
.alignleft { float: left; margin-right: 1.5rem; margin-bottom: 1rem; }
.alignright { float: right; margin-left: 1.5rem; margin-bottom: 1rem; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }

@media (max-width: 767px) {
	.alignwide, .page-content__inner .alignwide { max-width: 100%; margin-left: 0; margin-right: 0; }
	.alignleft, .alignright { float: none; margin-left: 0; margin-right: 0; }
}

/* -- Bloques de Gutenberg (PRESERVADOS) -- */
.wp-block-image img { border-radius: var(--radius-card); }
.page-content__inner .wp-block-separator { margin: 3rem auto; border: none; border-top: 1px solid var(--surface-border); max-width: 6rem; }
.page-content__inner .wp-block-separator.is-style-wide { max-width: 100%; }
.page-content__inner .wp-block-columns { display: flex; gap: 2rem; margin: 2rem 0; }
@media (max-width: 767px) { .page-content__inner .wp-block-columns { flex-direction: column; } }

.page-content__inner .wp-block-button__link {
	display: inline-flex; align-items: center; min-height: var(--tap-min);
	background-image: var(--grad-accent); color: #fff; font-weight: 600;
	padding: 0.9375rem 2rem; border-radius: var(--radius-btn);
	text-decoration: none; box-shadow: var(--shadow-btn);
	transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.page-content__inner .wp-block-button__link:hover { color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-btn-hover); }
.page-content__inner .wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent; background-image: none;
	color: var(--text-strong); border: 1px solid var(--surface-border); box-shadow: none;
}

.wp-caption { max-width: 100%; }
.wp-caption-text, .page-content__inner figcaption { font-size: 0.8125rem; color: var(--text-faint); text-align: center; margin-top: 0.75rem; }
.sticky, .gallery-caption, .bypostauthor { display: block; }

.woocommerce-page .entry-content, .woocommerce .entry-content {
	max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-padding);
}

/* ==========================================================================
   17. FORMULARIOS DE TERCEROS (WPForms, SureForms) — SIN CAMBIOS (v3).
   ========================================================================== */
.wpforms-container, .srfm-form-container {
	background: #fff; background-image: var(--grad-panel);
	border: 1px solid var(--border-card);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	padding: 1.75rem;
	color: var(--text-body);
}
@media (min-width: 768px) { .wpforms-container, .srfm-form-container { padding: 2.5rem; } }

.wpforms-container input[type="text"], .wpforms-container input[type="email"],
.wpforms-container input[type="tel"], .wpforms-container input[type="url"],
.wpforms-container input[type="number"], .wpforms-container select, .wpforms-container textarea,
.srfm-form-container input[type="text"], .srfm-form-container input[type="email"],
.srfm-form-container input[type="tel"], .srfm-form-container input[type="url"],
.srfm-form-container input[type="number"], .srfm-form-container select, .srfm-form-container textarea,
.srfm-input-container input, .srfm-input-container textarea {
	width: 100%; min-height: var(--tap-min);
	background: var(--input-bg) !important;
	color: var(--text-strong) !important;
	border: 1px solid var(--input-border) !important;
	border-radius: var(--radius-input) !important;
	padding: 0.875rem 1rem !important;
	font-size: 0.9375rem !important;
	font-family: var(--font-sans) !important;
	outline: none; box-shadow: none !important;
	transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.wpforms-container input:focus, .wpforms-container select:focus, .wpforms-container textarea:focus,
.srfm-form-container input:focus, .srfm-form-container textarea:focus,
.srfm-input-container input:focus, .srfm-input-container textarea:focus {
	background: var(--input-bg-focus) !important;
	border-color: var(--lava) !important;
	box-shadow: 0 0 0 4px var(--input-ring) !important;
}

.wpforms-container label, .wpforms-field-label, .srfm-form-container label, .srfm-label {
	color: var(--text-strong) !important;
	font-size: 0.875rem !important; font-weight: 500 !important;
	text-transform: none !important; letter-spacing: 0 !important;
	margin-bottom: 0.5rem !important;
}

.wpforms-container .wpforms-field-description, .srfm-description {
	color: var(--text-faint) !important; font-size: 0.8125rem !important;
}

.wpforms-container button[type="submit"], .wpforms-submit,
.srfm-form-container button[type="submit"], .srfm-button {
	min-height: var(--tap-min);
	background-image: var(--grad-accent) !important;
	background-color: var(--lava) !important;
	color: #fff !important;
	font-weight: 600 !important; font-size: 1rem !important;
	border: none !important; border-radius: var(--radius-btn) !important;
	padding: 0.9375rem 2rem !important; cursor: pointer;
	box-shadow: var(--shadow-btn) !important;
	transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.wpforms-container button[type="submit"]:hover, .wpforms-submit:hover,
.srfm-form-container button[type="submit"]:hover, .srfm-button:hover {
	color: #fff !important; transform: translateY(-2px);
	box-shadow: var(--shadow-btn-hover) !important;
}

.wpforms-error, .srfm-error-message { color: var(--magenta) !important; font-size: 0.8125rem !important; font-weight: 500 !important; }

/* ==========================================================================
   13. MEGA FOOTER
   ========================================================================== */
.site-footer{
  margin-top:var(--space-32);padding:var(--space-48) var(--space-32) var(--space-24);
  background:rgba(0,11,17,0.55);
  border:1px solid var(--surface-border);
  border-radius:var(--radius-md);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  color:var(--text-body);
}
.site-footer__top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:var(--space-48);padding-bottom:var(--space-32);border-bottom:1px solid var(--surface-border)}
.site-footer__brand{display:flex;flex-direction:column;gap:var(--space-16)}
.site-footer__logo{display:inline-flex;align-items:center;gap:var(--space-12);color:var(--chalk);width:max-content}
.site-footer__logo:hover{color:var(--chalk)}
.site-footer .site-footer__logo-mark{display:block;height:2.5rem;width:auto;flex-shrink:0}
.site-footer__logo-text{font-family:var(--font-display);font-weight:800;font-size:1.375rem;letter-spacing:.01em}
.site-footer__tagline{font-size:.9375rem;line-height:1.65;color:var(--text-body);max-width:40ch;margin:0}
.site-footer__contacto{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-16);list-style:none;margin:0;padding:0}
.site-footer__contacto li{display:flex;align-items:flex-start;gap:var(--space-12)}
.site-footer__contacto li > i{flex-shrink:0;width:2.25rem;height:2.25rem;border-radius:var(--radius-sm);background:var(--surface);border:1px solid var(--surface-border);display:flex;align-items:center;justify-content:center;font-size:1.0625rem;color:var(--text-accent)}
.site-footer__contacto li > span{display:flex;flex-direction:column;gap:.125rem;min-width:0}
.site-footer__contacto-label{font-size:.6875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint)}
.site-footer__contacto a,.site-footer__contacto li > span > span:last-child{font-size:.9375rem;font-weight:500;color:var(--chalk);word-break:break-word}
.site-footer__contacto a:hover{color:var(--text-accent)}
.site-footer__social{display:flex;gap:var(--space-8);padding:var(--space-24) 0;border-bottom:1px solid var(--surface-border)}
.site-footer__social-link{display:flex;align-items:center;justify-content:center;min-width:var(--tap-min);min-height:var(--tap-min);border-radius:var(--radius-sm);background:var(--surface);border:1px solid var(--surface-border);color:var(--text-body);font-size:1.125rem;transition:color var(--dur-instant) var(--ease-out),background var(--dur-instant) var(--ease-out),border-color var(--dur-instant) var(--ease-out)}
.site-footer__social-link:hover{color:var(--text-accent);background:var(--lava-soft);border-color:rgba(255,65,3,0.28)}
.site-footer__links{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-32);padding:var(--space-32) 0;border-bottom:1px solid var(--surface-border)}
.site-footer__col-title{font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-accent);margin:0 0 var(--space-16)}
.site-footer__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.125rem}
.site-footer__col a{display:flex;align-items:center;min-height:2.25rem;font-size:.9375rem;color:var(--text-body);transition:color var(--dur-instant) var(--ease-out)}
.site-footer__col a:hover{color:var(--chalk)}
.site-footer__pagos{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-16);padding:var(--space-24) 0;border-bottom:1px solid var(--surface-border)}
.site-footer__pagos-label{font-size:.6875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint)}
.site-footer__pagos-list{display:flex;flex-wrap:wrap;gap:var(--space-8);list-style:none;margin:0;padding:0}
.site-footer__pagos-list li{display:inline-flex;align-items:center;gap:var(--space-8);padding:var(--space-8) var(--space-12);border-radius:var(--radius-sm);background:var(--surface);border:1px solid var(--surface-border);font-size:.8125rem;font-weight:500;color:var(--text-muted)}
.site-footer__pagos-list i{font-size:1rem;color:var(--text-faint)}
.site-footer__bottom{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:var(--space-12);padding-top:var(--space-24)}
.site-footer__copy{font-size:.8125rem;color:var(--text-muted);margin:0}
.site-footer__legal{display:flex;flex-wrap:wrap;gap:var(--space-24);list-style:none;margin:0;padding:0}
.site-footer__legal a{font-size:.8125rem;color:var(--text-muted);transition:color var(--dur-instant) var(--ease-out)}
.site-footer__legal a:hover{color:var(--chalk)}
.site-footer__recaptcha{font-size:.75rem;color:var(--text-faint);line-height:1.6;max-width:60ch}
.site-footer__recaptcha a{color:var(--text-muted)}
.site-footer__recaptcha a:hover{color:var(--chalk)}

/* ==========================================================================
   14. FICHA DE CONTACTO
   ========================================================================== */
.contacto-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--space-48);align-items:start}
.contacto-ficha{display:flex;flex-direction:column;gap:var(--space-16)}
.contacto-ficha__title{font-family:var(--font-display);font-size:clamp(1.75rem,3.5vw,2.25rem);font-weight:700;letter-spacing:-.024em;line-height:1.1;color:var(--chalk);margin:0}
.contacto-ficha__text{font-size:1rem;line-height:1.7;color:var(--text-body);max-width:46ch;margin:0 0 var(--space-8)}
.contacto-ficha__items{display:flex;flex-direction:column;gap:var(--space-16);list-style:none;margin:0;padding:0}
.contacto-ficha__item{display:flex;align-items:flex-start;gap:var(--space-12)}
.contacto-ficha__item > i{flex-shrink:0;width:2.5rem;height:2.5rem;border-radius:var(--radius-sm);background:var(--surface);border:1px solid var(--surface-border);display:flex;align-items:center;justify-content:center;font-size:1.1875rem;color:var(--text-accent)}
.contacto-ficha__item > span{display:flex;flex-direction:column;gap:.125rem;min-width:0}
.contacto-ficha__label{font-size:.6875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint)}
.contacto-ficha__value{display:inline-flex;align-items:center;min-height:1.75rem;font-size:1rem;font-weight:500;color:var(--chalk);word-break:break-word;transition:color var(--dur-instant) var(--ease-out)}
.contacto-ficha__value:hover{color:var(--text-accent)}
.contacto-ficha__social{display:flex;flex-direction:column;gap:var(--space-12);margin-top:var(--space-16);padding-top:var(--space-24);border-top:1px solid var(--surface-border)}
.contacto-ficha__social-links{display:flex;gap:var(--space-8)}

/* ==========================================================================
   15. HEROS DE PLANTILLA + BANNER DE CIERRE
   ========================================================================== */
.tpl-hero{padding:var(--space-48) 0;text-align:center}
.tpl-hero__inner{max-width:60rem;margin-inline:auto;display:flex;flex-direction:column;align-items:center;gap:var(--space-24)}
.tpl-hero__title{font-family:var(--font-display);font-size:clamp(2.5rem,6.5vw,4.25rem);font-weight:800;letter-spacing:-.03em;line-height:1.0;color:var(--chalk);max-width:17ch;margin:0}
.tpl-hero__subtitle{font-size:clamp(1rem,2vw,1.125rem);line-height:1.65;color:var(--text-body);max-width:65ch;margin:0 auto}
.tpl-cta-banner{text-align:center;position:relative;overflow:hidden;padding:var(--space-48) var(--space-24);border-radius:var(--radius-md);background:var(--abyss);background-image:var(--grad-dark-card);border:1px solid var(--surface-border)}
.tpl-cta-banner__inner{position:relative;z-index:1;max-width:46rem;margin-inline:auto;display:flex;flex-direction:column;align-items:center;gap:var(--space-16)}
.tpl-cta-banner__title{font-family:var(--font-display);font-size:clamp(1.75rem,4vw,2.5rem);font-weight:700;letter-spacing:-.024em;line-height:1.08;color:var(--chalk);max-width:24ch;margin:0}
.tpl-cta-banner__text{font-size:1rem;line-height:1.7;color:var(--text-body);max-width:65ch;margin:0}

/* ==========================================================================
   BLINDAJE FRENTE A CSS DE TERCEROS
   El plugin de Mercado Pago carga `super-token.bundle.min.css` desde su CDN
   (http2.mlstatic.com) DESPUES de las hojas del tema, con un reset amplio que
   anula `color` y `background` de la nav y del footer en el checkout.
   No se puede reordenar (URL externa del plugin), asi que estas pocas
   propiedades se marcan como importantes. Es un blindaje acotado: solo las
   propiedades que ese reset pisa, no un uso generalizado de !important.
   ========================================================================== */
.nav-primary .nav-primary__inner {
	background: rgba(0, 22, 33, 0.55) !important;
	border: 1px solid rgba(255, 249, 250, 0.12) !important;
}

.nav-primary--scrolled .nav-primary__inner { background: rgba(0, 22, 33, 0.78) !important; }

.nav-primary .nav-primary__link { color: rgba(255, 249, 250, 0.56) !important; }
.nav-primary .nav-primary__link:hover { color: var(--chalk) !important; }
.nav-primary .nav-primary__logo,
.nav-primary .nav-primary__logo-text { color: var(--chalk) !important; }
.nav-primary .nav-primary__cart-toggle { color: var(--chalk) !important; }

.site-footer .site-footer__logo,
.site-footer .site-footer__logo-text { color: var(--chalk) !important; }
.site-footer .site-footer__col a,
.site-footer .site-footer__contacto a { color: rgba(255, 249, 250, 0.72) !important; }
.site-footer .site-footer__col a:hover,
.site-footer .site-footer__contacto a:hover { color: var(--chalk) !important; }
.site-footer .site-footer__legal a,
.site-footer .site-footer__copy { color: rgba(255, 249, 250, 0.56) !important; }
.site-footer .site-footer__col-title { color: var(--lava-light) !important; }
.site-footer .site-footer__tagline { color: rgba(255, 249, 250, 0.72) !important; }

/* Enlaces dentro de los paneles del checkout */
.woocommerce-checkout .agencia-terminos a,
.woocommerce-checkout .woocommerce-privacy-policy-link { color: var(--lava-light) !important; }

/* ==========================================================================
   16. PAGINA 404
   ========================================================================== */
.error-404__panel{max-width:44rem;margin-inline:auto;padding:var(--space-64) var(--space-48);text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--space-16);background:var(--glass-bg);border:1px solid var(--surface-border);border-radius:var(--radius-md);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--shadow-2)}
.error-404__code{font-family:var(--font-display);font-size:clamp(4rem,12vw,6.5rem);font-weight:800;line-height:1;letter-spacing:-.04em;background-image:var(--grad-accent);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.error-404__title{font-family:var(--font-display);font-size:clamp(1.75rem,4vw,2.25rem);font-weight:700;letter-spacing:-.024em;line-height:1.1;color:var(--chalk);margin:0}
.error-404__text{font-size:1rem;line-height:1.7;color:var(--text-body);max-width:52ch;margin:0}
.error-404__acciones{display:flex;flex-wrap:wrap;gap:var(--space-12);justify-content:center;margin-top:var(--space-8)}
.error-404__ayuda{margin-top:var(--space-16);padding-top:var(--space-24);border-top:1px solid var(--surface-border);width:100%;display:flex;flex-direction:column;gap:var(--space-12)}
.error-404__links{display:flex;flex-wrap:wrap;gap:var(--space-24);justify-content:center;list-style:none;margin:0;padding:0}
.error-404__links a{display:inline-flex;align-items:center;min-height:2rem;font-size:.9375rem;color:var(--text-body)}
.error-404__links a:hover{color:var(--text-accent)}
.error-404__section{padding-top:calc(var(--nav-height) + 4rem);padding-bottom:var(--section-gap)}
.error-404__ayuda-label{font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint)}

/* ==========================================================================
   FASE 18 · reCAPTCHA v3 — insignia flotante
   Google permite ocultarla siempre que el aviso legal quede visible; ese texto
   esta en el pie (footer.php). Se usa `visibility` y no `display` a proposito:
   el widget necesita seguir en el layout para poder ejecutarse.
   ========================================================================== */
/* (reCAPTCHA sustituido por Turnstile el 20-sep-2026) */

/* Aviso legal de reCAPTCHA al pie: presente y legible, pero discreto. */
.site-footer__recaptcha {
	margin: 1.25rem 0 0;
	font-size: 0.75rem;
	line-height: 1.5;
	color: rgba(255, 249, 250, 0.38);
	text-align: center;
}

.site-footer__recaptcha a {
	color: rgba(255, 249, 250, 0.55);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.site-footer__recaptcha a:hover { color: var(--chalk); }

/* Estado de error del Super Formulario (antispam, etc.) */
.super-form__error {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	margin-bottom: 1.25rem;
	padding: 0.875rem 1rem;
	border-radius: var(--radius-input);
	background: rgba(253, 24, 67, 0.10);
	border: 1px solid rgba(253, 24, 67, 0.32);
	color: var(--chalk);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.super-form__error i { color: var(--magenta); font-size: 1.125rem; flex-shrink: 0; }

/* La casilla de reCAPTCHA v2 no se puede reestilizar (vive en un iframe de
   Google): solo se centra y se le da aire. */
.super-form__captcha {
	display: flex;
	justify-content: center;
	overflow-x: auto;
}

/* La casilla de Google mide 304 px fijos y no es responsiva. En pantallas
   estrechas se escala para que entre sin scroll lateral dentro de su caja. */
@media (max-width: 400px) {
	.super-form__captcha .g-recaptcha {
		transform: scale(0.88);
		transform-origin: center top;
	}
}

/* ==========================================================================
   18. RESPONSIVE
   ========================================================================== */
@media (max-width:900px){
  :root{--container-padding:24px;--section-gap:var(--space-64);--space-64:40px}
  .card{padding:var(--space-24)}
  .panel{padding:var(--space-32)}
  .super-form{padding:var(--space-24)}
  .super-form__form{grid-template-columns:1fr}
  .site-footer__top{grid-template-columns:1fr;gap:var(--space-32)}
  .site-footer__links{grid-template-columns:1fr 1fr}
  .contacto-grid{grid-template-columns:1fr}
  .type-row{grid-template-columns:1fr;gap:var(--space-8) 0}
  .section-head__title{font-size:1.25rem}
}
/* Bajo 1024px el nav de escritorio no cabe: pasa al toggle movil. */
@media (max-width:1024px){
  .nav-primary__links{display:none}
  .nav-primary__toggle{display:flex}
}
@media (min-width:1025px){
  .nav-primary__toggle{display:none}
}
@media (max-width:560px){
  .site-footer__contacto{grid-template-columns:1fr}
  .site-footer__links{grid-template-columns:1fr}
  .site-footer__bottom{flex-direction:column;align-items:flex-start}
  .error-404__panel{padding:var(--space-32) var(--space-24)}
}


/* ==========================================================================
   AMBITOS CONGELADOS EN v3 — por decision: los formularios que ya existen y
   las cards finales de cada entrada del blog NO cambian con el rediseño.
   Se congelan por tokens: dentro de estos contenedores, los nombres v3 vuelven
   a valer lo que valian en v3, y sus hojas (super-form.css, blog.css, §10 y
   §17 de arriba) pintan exactamente lo mismo que antes. Heredan solo la
   tipografia del sitio.
   ========================================================================== */
.super-form,.wpforms-container,.srfm-form-container,.contacto-panel,
.single-cta,.single-relacionados{
  --lava-light:#FF8B63;
  --lava-soft:rgba(255,65,3,0.08);
  --lava-ring:rgba(255,65,3,0.10);
  --magenta-soft:rgba(253,24,67,0.08);
  --text-muted:rgba(255,249,250,0.56);
  --text-faint:rgba(255,249,250,0.45);
  --text-disabled:rgba(255,249,250,0.30);
  --text-accent:var(--lava-light);
  --surface-border-strong:rgba(255,249,250,0.24);
  --input-border:rgba(255,249,250,0.12);
  --input-ring:rgba(255,65,3,0.24);
  --panel-radius:36px;
  --panel-shadow:0 32px 80px -24px rgba(0,11,17,0.72);
  --radius-btn:14px;--radius-btn-sm:12px;--radius-input:12px;--radius-card:24px;
  --radius-icon:16px;--radius-panel:36px;--radius-sm:0.5rem;--radius-md:0.75rem;
  --radius-lg:12px;--radius-xl:14px;--radius-2xl:24px;--radius-block:36px;
  --shadow-card:0 4px 24px rgba(0,22,33,0.05);
  --shadow-card-hover:0 18px 48px rgba(0,22,33,0.09);
  --shadow-btn:0 2px 10px rgba(255,65,3,0.18);
  --shadow-btn-hover:0 12px 28px rgba(255,65,3,0.28);
  --shadow-accent:0 10px 30px -6px rgba(255,65,3,0.44);
  --shadow-accent-hover:0 20px 46px -8px rgba(255,65,3,0.60);
  --ease:cubic-bezier(0.16,1,0.3,1);
  --t-fast:0.22s;--t-base:0.28s;--t-slow:0.32s;
}
/* Los contenedores claros de formularios de terceros conservan su inversion (§17) */

/* ==========================================================================
   PARCHES v6 · 19-sep-2026 (medidos contra localhost:8888 a 1440px)
   ========================================================================== */

/* -- 3 · Mini-carrito: dos botones de verdad, apilados ----------------------
   Uno debajo del otro y a todo el ancho (antes «Ver carrito» iba a media
   columna y el de pago a la fila entera: se leian como cosas distintas). */
.mini-cart-panel .woocommerce-mini-cart__buttons,
.widget_shopping_cart_content .woocommerce-mini-cart__buttons {
	display: flex !important;
	flex-direction: column;
	gap: 0.75rem;
	margin: 1rem 0 0;
	padding: 0;
}
.mini-cart-panel .woocommerce-mini-cart__buttons a,
.widget_shopping_cart_content .woocommerce-mini-cart__buttons a {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 48px;
	padding: 0.75rem 1.25rem;
	border-radius: var(--radius-md, 14px);
	font-family: var(--font-sans);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}
/* Secundario: «Ver carrito» */
.mini-cart-panel .woocommerce-mini-cart__buttons a:not(.checkout),
.widget_shopping_cart_content .woocommerce-mini-cart__buttons a:not(.checkout) {
	background: rgba(255, 249, 250, 0.06);
	background-image: none;
	color: var(--chalk, #FFF9FA);
	border: 1px solid rgba(255, 249, 250, 0.18);
	box-shadow: none;
}
.mini-cart-panel .woocommerce-mini-cart__buttons a:not(.checkout):hover,
.widget_shopping_cart_content .woocommerce-mini-cart__buttons a:not(.checkout):hover {
	background: rgba(255, 249, 250, 0.12);
	border-color: rgba(255, 249, 250, 0.32);
}
/* Primario: «Finalizar compra» */
.mini-cart-panel .woocommerce-mini-cart__buttons a.checkout,
.widget_shopping_cart_content .woocommerce-mini-cart__buttons a.checkout {
	background: var(--grad-accent, linear-gradient(135deg, #FF4103, #FD1843));
	color: var(--on-accent, #001621);
	border: 0;
	box-shadow: var(--shadow-2, 0 8px 24px rgba(255, 65, 3, 0.25));
}
.mini-cart-panel .woocommerce-mini-cart__buttons a.checkout:hover,
.widget_shopping_cart_content .woocommerce-mini-cart__buttons a.checkout:hover {
	filter: brightness(1.06);
}

/* ==========================================================================
   PARCHES v6 · 19-sep-2026, 2.ª tanda (aviso WC, ítem del mini-carrito, footer)
   ========================================================================== */

/* -- 6 · Mini-carrito: cada ítem en una rejilla ----------------------------
   [×] [imagen 64px] [título / cantidad]. WooCommerce mete la imagen DENTRO del
   enlace del título y flotada a la derecha; se saca de flujo (absolute) y se
   coloca en la segunda columna: el marcado no se toca. */
.mini-cart-panel ul.cart_list,
.widget_shopping_cart_content ul.cart_list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.mini-cart-panel ul.cart_list li.mini_cart_item,
.widget_shopping_cart_content ul.cart_list li.mini_cart_item {
	position: relative;
	display: grid;
	grid-template-columns: 1.5rem 64px minmax(0, 1fr);
	grid-template-areas:
		"quitar imagen titulo"
		"quitar imagen cantidad";
	grid-template-rows: auto 1fr;
	column-gap: 0.875rem;
	row-gap: 0.25rem;
	align-items: start;
	min-height: 64px;
	padding: 0.875rem 0;
	border-bottom: 1px solid rgba(255, 249, 250, 0.1);
}
.mini-cart-panel ul.cart_list li.mini_cart_item:last-child,
.widget_shopping_cart_content ul.cart_list li.mini_cart_item:last-child {
	border-bottom: 0;
}
/* La × a la izquierda, centrada en el alto del ítem */
.mini-cart-panel ul.cart_list li.mini_cart_item a.remove,
.widget_shopping_cart_content ul.cart_list li.mini_cart_item a.remove {
	grid-area: quitar;
	align-self: center;
	position: static;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	margin: 0;
	border-radius: 999px;
	font-size: 1.125rem;
	line-height: 1;
	color: var(--text-muted, rgba(255, 249, 250, 0.55));
	background: transparent;
	float: none;
}
.mini-cart-panel ul.cart_list li.mini_cart_item a.remove:hover,
.widget_shopping_cart_content ul.cart_list li.mini_cart_item a.remove:hover {
	color: var(--chalk, #FFF9FA);
	background: rgba(253, 24, 67, 0.22);
}
/* Título: ocupa su celda; la imagen que lleva dentro se saca a la columna 2 */
.mini-cart-panel ul.cart_list li.mini_cart_item > a:not(.remove),
.widget_shopping_cart_content ul.cart_list li.mini_cart_item > a:not(.remove) {
	grid-area: titulo;
	display: block;
	font-weight: 600;
	font-size: 0.9375rem;
	line-height: 1.35;
	color: var(--text-strong, #FFF9FA);
	text-decoration: none;
}
.mini-cart-panel ul.cart_list li.mini_cart_item img,
.widget_shopping_cart_content ul.cart_list li.mini_cart_item img {
	position: absolute;
	left: calc(1.5rem + 0.875rem);
	top: 0.875rem;
	width: 64px;
	height: 64px;
	margin: 0;
	float: none;
	object-fit: cover;
	border-radius: var(--radius-sm, 8px);
	background: rgba(255, 249, 250, 0.06);
}
.mini-cart-panel ul.cart_list li.mini_cart_item .quantity,
.widget_shopping_cart_content ul.cart_list li.mini_cart_item .quantity {
	grid-area: cantidad;
	display: block;
	font-size: 0.875rem;
	color: var(--text-muted, rgba(255, 249, 250, 0.55));
}
.mini-cart-panel ul.cart_list li.mini_cart_item .quantity .amount,
.widget_shopping_cart_content ul.cart_list li.mini_cart_item .quantity .amount {
	color: var(--chalk, #FFF9FA);
	font-weight: 600;
}
/* Subtotal del carrito: una fila limpia bajo la lista, etiqueta a la izquierda
   e importe a la derecha */
.mini-cart-panel .woocommerce-mini-cart__total,
.widget_shopping_cart_content .woocommerce-mini-cart__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	margin: 1rem 0 0;
	padding: 1rem 0 0;
	border-top: 1px solid rgba(255, 249, 250, 0.14);
	font-size: 0.9375rem;
}
.mini-cart-panel .woocommerce-mini-cart__total strong,
.widget_shopping_cart_content .woocommerce-mini-cart__total strong {
	font-weight: 500;
	color: var(--text-muted, rgba(255, 249, 250, 0.55));
}
.mini-cart-panel .woocommerce-mini-cart__total .amount,
.widget_shopping_cart_content .woocommerce-mini-cart__total .amount {
	font-family: var(--font-display);
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--chalk, #FFF9FA);
}

/* -- 7 · Footer: barra inferior en una línea -------------------------------
   Copyright a la izquierda, legales a la derecha separados por barras. Los
   sellos (vacíos hoy) van en su propia fila y no ocupan sitio hasta que haya. */
.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 0.75rem 1.5rem;
}
.site-footer__copy {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--text-muted);
}
.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}
.site-footer__legal li {
	display: flex;
	align-items: center;
}
.site-footer__legal li + li::before {
	content: "|";
	margin: 0 0.75rem;
	color: rgba(255, 249, 250, 0.22);
}
.site-footer__legal a {
	font-size: 0.8125rem;
	color: var(--text-muted);
	text-decoration: none;
	transition: color 150ms ease;
}
.site-footer__legal a:hover {
	color: var(--chalk);
}
.site-footer__sellos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
}
.site-footer__sellos:empty {
	display: none;
}
@media (max-width: 640px) {
	.site-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ==========================================================================
   BOTÓN FLOTANTE DE WHATSAPP · 19-sep-2026
   Aquí y no en front-page.css: esa hoja solo carga en la home, y el botón va
   en el footer de TODAS las páginas (en las demás salía como un enlace suelto
   sin estilo). Solo icono, redondo, abajo a la derecha, verde oficial. En
   /finalizar-compra/ no se imprime (footer.php, is_checkout()).
   ========================================================================== */
.wa-fab {
	position: fixed;
	right: 24px;
	bottom: max(24px, env(safe-area-inset-bottom, 0px));
	z-index: 999;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 999px;
	background: #25D366;
	color: #FFFFFF;
	text-decoration: none;
	box-shadow: 0 8px 22px rgba(37, 211, 102, 0.38), 0 2px 6px rgba(0, 11, 17, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25);
	transition: box-shadow 160ms ease, filter 160ms ease;
}
.wa-fab:hover,
.wa-fab:focus-visible {
	color: #FFFFFF;
	filter: brightness(1.07);
	/* v6: el hover no desplaza; crece la sombra, no el botón */
	box-shadow: 0 12px 30px rgba(37, 211, 102, 0.48), 0 3px 8px rgba(0, 11, 17, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.wa-fab:focus-visible {
	outline: 3px solid rgba(37, 211, 102, 0.55);
	outline-offset: 3px;
}
.wa-fab__icono {
	width: 28px;
	height: 28px;
	display: block;
}
/* El texto ya no se imprime (footer.php); por si algún tema hijo lo deja. */
.wa-fab__texto { display: none; }

/* Latido (19-sep, a peticion): un anillo que se expande y se apaga, y un
   pulso suave del boton. Llama la atencion sin taparla: dura 2.4 s y para
   quien pidio menos movimiento no se mueve nada. */
.wa-fab::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	border: 2px solid #25D366;
	opacity: 0;
	pointer-events: none;
	animation: wa-fab-anillo 2.4s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
.wa-fab {
	animation: wa-fab-latido 2.4s ease-in-out infinite;
}
@keyframes wa-fab-anillo {
	0%   { transform: scale(1);    opacity: 0.85; }
	70%  { transform: scale(1.75); opacity: 0; }
	100% { transform: scale(1.75); opacity: 0; }
}
@keyframes wa-fab-latido {
	0%, 100% { transform: scale(1); }
	12%      { transform: scale(1.07); }
	24%      { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
	.wa-fab { transition: none; animation: none; }
	.wa-fab::before { animation: none; display: none; }
}