/*
Theme Name: NGIngenieria
Theme URI: https://ngingenieria.com
Author: NGIngenieria
Description: Tema a medida para NGIngeniería — Electrónica para el agro. Diseño "campo moderno" con WooCommerce integrado.
Version: 3.9.187
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GPL v2 or later
Text Domain: ngingenieria
*/

/* NGIngeniería — Sistema de diseño */

/* ——— Self-hosted fonts ——— */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/InterVariable.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('assets/fonts/SpaceGrotesk-Variable.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/JetBrainsMono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/JetBrainsMono-500.woff2') format('woff2');
}

/* ——— SVG icon helper ——— */
.ngi-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--accent-oklch);
  flex-shrink: 0;
}
.ngi-icon svg { width: 100%; height: 100%; stroke-width: 1.6; }

/* Íconos SVG dentro de links/botones: click-transparentes. Así el objetivo del
   click es siempre el <a>/<button> (no el SVG), lo que además evita el error
   conocido de WooCommerce "e.className.split is not a function" (su función
   hasSomeParentWithClass recorre el DOM y en un SVG el className no es string). */
a svg, button svg, .btn svg, label svg, summary svg { pointer-events: none; }

/* ——— Force fonts (targeted overrides para WooCommerce) ———————————————————
/* ——— Force fonts ———————————————————————————————————————————————————————
   El prototipo no tiene reglas especiales para Woo: confía en que los `<h2>`
   y `<h3>` que renderiza Woo hereden de la regla genérica `h1, h2, h3, h4`.
   Acá hacemos lo mismo. NO agregamos reglas extra para Woo: si algún
   elemento se ve mal, lo arreglamos puntualmente con la clase específica. */

:root {
  /* Tweakable */
  --accent: 88 45% 35%;          /* verde oliva en HSL para mezcla */
  /* Sistema de verdes (2 por tema):
     - accent-oklch / accent-hover: relleno sólido (botones, texto blanco encima)
     - accent-soft:   fondo verde suave (detrás de íconos, etiquetas, chips)
     - accent-bright: dibujo/acento/hover (símbolos, texto verde, links al hover) */
  --accent-oklch: oklch(0.48 0.09 128);
  --accent-soft: oklch(0.88 0.07 128);
  --accent-hover: oklch(0.42 0.09 128);
  --accent-bright: oklch(0.48 0.09 128);

  /* Tierra */
  --bg: oklch(0.98 0.006 95);
  --bg-elevated: oklch(1 0 0);
  --bg-muted: oklch(0.95 0.008 95);
  --bg-sunken: oklch(0.93 0.01 95);

  --fg: oklch(0.22 0.015 85);
  --fg-muted: oklch(0.48 0.012 85);
  --fg-subtle: oklch(0.62 0.01 85);

  --border: oklch(0.88 0.008 85);
  --border-strong: oklch(0.78 0.01 85);

  /* Estados de stock (indicadores del puntito en la ficha de producto) */
  --ocre: oklch(0.65 0.11 70);       /* stock limitado (ámbar) */
  --success: oklch(0.55 0.14 145);   /* verde "en stock/ok"; mismo en ambos temas */

  /* Alertas / errores (rojo, hue 25). Dos familias con propósito distinto:
       --danger*     → TEXTO y BORDES de error. Se ACLARAN en modo oscuro (ver el
                       bloque [data-theme="dark"]) para que se lean sobre el fondo.
       --danger-btn* → FONDO del botón sólido "borrar". Se mantienen IGUAL en ambos
                       temas para que el texto blanco de encima siempre contraste.
     (WooCommerce: su --wc-red se apunta a --danger-btn más abajo, ~L3634.) */
  --danger:            oklch(0.55 0.18 25);   /* texto/borde de error */
  --danger-strong:     oklch(0.45 0.20 25);   /* error más intenso (foco de campo inválido) */
  --danger-soft:       oklch(0.95 0.05 25);   /* fondo suave de avisos rojos */
  --danger-btn:        oklch(0.55 0.18 25);   /* fondo del botón sólido "borrar" */
  --danger-btn-hover:  oklch(0.49 0.18 25);   /* ese botón al hover (-0.06, como el verde) */

  /* Typography */
  --font-display: "Space Grotesk", "Inter", -apple-system, sans-serif;
  --font-sans: "Inter", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Scale */
  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 10px;

  --shadow-sm: 0 1px 2px oklch(0.2 0.01 85 / 0.04);
  --shadow: 0 4px 16px oklch(0.2 0.01 85 / 0.06);
  --shadow-lg: 0 12px 40px oklch(0.2 0.01 85 / 0.10);
}

[data-theme="dark"] {
  --bg: oklch(0.17 0.008 95);
  --bg-elevated: oklch(0.21 0.01 95);
  --bg-muted: oklch(0.24 0.01 95);
  --bg-sunken: oklch(0.14 0.008 95);

  --fg: oklch(0.95 0.006 95);
  --fg-muted: oklch(0.72 0.012 85);
  --fg-subtle: oklch(0.55 0.01 85);

  --border: oklch(0.30 0.01 85);
  --border-strong: oklch(0.42 0.012 85);

  /* Relleno sólido idéntico al modo light (para que el texto blanco de los
     botones siga legible). El acento/dibujo sí se aclara en oscuro. */
  --accent-oklch: oklch(0.48 0.09 128);
  --accent-soft: oklch(0.30 0.05 128);
  --accent-hover: oklch(0.42 0.09 128);
  --accent-bright: oklch(0.60 0.11 128);

  /* Rojo de alerta más claro en oscuro para que se lea sobre el fondo */
  --danger: oklch(0.72 0.16 25);
  --danger-strong: oklch(0.80 0.18 25);
  --danger-soft: oklch(0.30 0.06 25);
  /* --danger-btn y --danger-btn-hover NO se redefinen acá: heredan el mismo valor
     del :root (rojo igual en ambos temas, como el botón verde). */
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* font-feature-settings removida: en Claude Design preview era no-op (Google Fonts Inter no soporta cv11/ss01),
     pero en nuestro Inter Variable local aplica y cambia los glifos (la 'a' de un piso). Sin esta línea
     ambos renders se ven igual con la 'a' de dos pisos, que es el default de Inter. */
}

#root { min-height: 100vh; }

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

button { cursor: pointer; border: none; background: none; }
a { color: inherit; text-decoration: none; }

/* ——— Deterrente de guardado de imágenes ———
   Desactiva el menú de "mantener apretado" (iOS) y el arrastrar la imagen fuera
   del navegador. El bloqueo del clic derecho va por JS (inline-scripts.php).
   NO es un candado: screenshots y herramientas de desarrollador siguen accediendo. */
img {
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--fg);
}

.mono { font-family: var(--font-mono); font-size: 0.82em; letter-spacing: 0.02em; }
.serif { font-family: var(--font-display); }

/* ——— Layout ——— */
.container {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 40px;
}

.container-narrow {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 40px;
}

/* ——— Topbar / Nav ——— */
.topbar {
  background: color-mix(in oklch, var(--bg) 90%, transparent);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: saturate(1.3) blur(8px);
}
.topbar-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 84px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: -0.01em;
}
.footer-col a.logo { font-size: 22px; color: inherit; }
.logo-img {
  height: 50px;
  width: auto;
  transition: filter 0.2s;
}
[data-theme="dark"] .logo-img {
  filter: invert(1) hue-rotate(180deg);
}
.logo-text b { font-weight: 400; transition: color 0.18s ease; }
/* Hover del logo (header y footer): "NGIngeniería" se pone verde. */
.logo:hover .logo-text b { color: var(--accent-bright); }
.logo-text em { font-style: normal; color: var(--fg-muted); font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; display: block; margin-top: -4px; }

.nav {
  display: flex;
  gap: 4px;
  flex: 1;
  margin-left: 20px;
}
.nav-link {
  padding: 8px 14px;
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--fg-muted);
  transition: all 0.15s ease;
  font-weight: 450;
}
.nav-link:hover { color: var(--fg); background: var(--bg-muted); }
.nav-link.active { color: var(--fg); background: var(--bg-muted); }

.nav-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}
.icon-btn {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-muted);
  position: relative;
  transition: all 0.15s;
}
.icon-btn:hover { background: var(--bg-muted); color: var(--fg); }
.cart-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: var(--accent-oklch);
  color: white;
  font-size: 10px;
  min-width: 16px;
  height: 16px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.lang-sel {
  display: flex;
  background: var(--bg-muted);
  border-radius: var(--radius);
  padding: 2px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.lang-sel button {
  padding: 4px 8px;
  border-radius: 4px;
  color: var(--fg-muted);
}
.lang-sel button.on { background: var(--bg-elevated); color: var(--fg); box-shadow: var(--shadow-sm); }

/* ——— Buttons ——— */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  transition: all 0.15s ease;
  border: 1px solid transparent;
  white-space: nowrap;
}
/* Hover general de todos los botones: se levantan un poco + sombra. */
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn-primary {
  background: var(--accent-oklch);
  color: white;
}
.btn-primary:hover { background: var(--accent-hover); box-shadow: var(--shadow-lg); }
.btn-secondary {
  background: var(--bg-elevated);
  color: var(--fg);
  border-color: var(--border);
}
.btn-secondary:hover { border-color: var(--border-strong); background: var(--bg-muted); }
.btn-ghost {
  background: transparent;
  color: var(--fg);
}
.btn-ghost:hover { background: var(--bg-muted); }
.btn-lg { padding: 14px 24px; font-size: 15px; }
.btn-sm { padding: 6px 12px; font-size: 13px; }

/* ——— Forms ——— */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field label {
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-muted);
  letter-spacing: 0.02em;
}
.input, .select, .textarea {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: all 0.15s;
  font-size: 14px;
  color: var(--fg);
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent-oklch);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent-oklch) 15%, transparent);
}
.textarea { resize: vertical; min-height: 100px; font-family: inherit; }

/* ——— Badge ——— */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-radius: 999px;
  background: var(--bg-muted);
  color: var(--fg-muted);
  font-family: var(--font-sans);
}
.badge-accent { background: var(--accent-soft); color: var(--accent-bright); }
.badge-ocre { background: color-mix(in oklch, var(--ocre) 20%, var(--bg)); color: var(--ocre); }
.badge-dark { background: var(--fg); color: var(--bg); }
.badge-top {
  background: color-mix(in oklch, var(--ocre) 20%, var(--bg));
  color: var(--ocre);
}
.badge-muted { background: var(--border); color: var(--fg-muted); }
/* Stock bajo: advertencia ámbar (mismo --ocre que el puntito de stock). */
.badge-low-stock {
  background: color-mix(in oklch, var(--ocre) 20%, var(--bg));
  color: var(--ocre);
}


/* ——— Card ——— */
.card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all 0.2s;
}
.card:hover { border-color: var(--border-strong); }

/* ——— Placeholder image ——— */
.placeholder-img {
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0 12px,
      color-mix(in oklch, var(--fg) 5%, transparent) 12px 13px
    ),
    var(--bg-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-subtle);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  position: relative;
  overflow: hidden;
}
.placeholder-img span {
  background: var(--bg-elevated);
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px solid var(--border);
  text-transform: uppercase;
  z-index: 1;
}

/* ——— Product Card ——— */
.product-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all 0.2s;
  cursor: pointer;
}
.product-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.product-card-img {
  aspect-ratio: 4/3;
  position: relative;
  overflow: hidden;
  background: #fff;
}
.product-card-img img {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}
.product-card-body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.product-card-sku {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--fg-subtle);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.product-card-title {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.15;
  color: var(--fg);
}
/* Stretched link: el título es un <a> y vía ::before cubre toda la card.
   Reemplaza el onclick="window.location.href=..." del article (que no era
   accesible: screen readers no anunciaban "link"). Los botones del foot
   están con z-index:2 para quedar por encima del overlay clickeable. */
a.product-card-title-link {
  display: block;
  text-decoration: none;
}
a.product-card-title-link::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
.product-card { position: relative; }
.product-card .product-card-foot a,
.product-card .add_to_cart_button {
  position: relative;
  z-index: 2;
}
.product-card-desc {
  font-size: 13px;
  color: var(--fg-muted);
  line-height: 1.45;
  min-height: 38px;
}
.product-card-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.product-price {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--fg);
}
.product-price small {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--fg-subtle);
  font-weight: 400;
  margin-left: 4px;
  letter-spacing: 0;
}

/* ——— Footer ——— */
.footer {
  border-top: 1px solid var(--border);
  background: var(--bg-muted);
  padding: 60px 0 24px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--border);
}
.footer-col h4 {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 14px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 8px; padding: 0; margin: 0; }
.footer-col li { margin: 0; }
.footer-col a { font-size: 13px; color: var(--fg); text-decoration: none; }
.footer-col a:hover { color: var(--accent-bright); }
/* "Pilotos · próximamente": sin link, no clickeable, atenuado */
.footer-soon { font-size: 13px; color: var(--fg-muted); cursor: default; }
.footer-soon em { font-style: normal; font-size: 11px; opacity: 0.85; }

/* Columna Contacto del footer: cada <li> con tono muted chico, los links
   heredan el color del <li> (sin estilo de hyperlink azul). */
.footer-contact li {
  color: var(--fg-muted);
  font-size: 13px;
}
.footer-contact a {
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.footer-contact a:hover { color: var(--accent-bright); }
/* Íconos de WhatsApp / mail: siempre en verde para que se lean como "contacto tocable". */
.footer-contact-ico {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--accent-bright);
}

/* Descripción corta de la marca en la primera columna del footer */
.footer-col-intro {
  font-size: 13px;
  color: var(--fg-muted);
  margin-top: 16px;
  max-width: 320px;
  line-height: 1.55;
}

/* Page wrapper estándar (page.php) — container con padding vertical
   (40 top, 80 bottom). Reemplaza el inline style del template. */
.ngi-page-wrap {
  padding-top: 40px;
  padding-bottom: 80px;
}
/* Carrito: el eyebrow arranca a 40px de arriba (igual que las demás páginas, lo
   da el page-wrap) y el final queda a 40px del footer. Antes cart.php anidaba su
   propio .container con 40/80px que se sumaban. Ahora el espaciado lo da solo el
   page-wrap; abajo lo bajamos de 80 a 40px. */
body.woocommerce-cart .ngi-page-wrap {
  padding-bottom: 40px;
}
/* Página de "Gracias" (order-received): mismo criterio, 40px abajo (era 80px). */
body.woocommerce-order-received .ngi-page-wrap {
  padding-bottom: 40px;
}

/* Título principal de una página (page.php, no WooCommerce). 56px display. */
.ngi-page-title {
  font-size: 56px;
  margin-bottom: 24px;
}

/* Contenido de una página estándar (lo que devuelve the_content): tipografía
   levemente más grande que el body, con max-width legible. */
.ngi-page-body {
  font-size: 16px;
  line-height: 1.65;
  color: var(--fg-muted);
  max-width: 760px;
}

/* Wrapper específico del single-product (40 top, 80 bottom) — variante
   chiquita del page-wrap para que el breadcrumb empiece más arriba. */
.ngi-single-wrap {
  padding-top: 40px;
  padding-bottom: 80px;
}

/* Breadcrumb del single-product (NGI / Catálogo / Categoría / Producto).
   Mono, muted, uppercase con tracking. Los links cambian al verde accent
   en hover via la regla existente en .ngi-crumbs a:hover. */
.ngi-breadcrumb {
  font-size: 12px;
  color: var(--fg-muted);
  margin-bottom: 30px;
  letter-spacing: 0.04em;
}
.ngi-breadcrumb .ngi-crumbs {
  text-transform: uppercase;
}
.ngi-breadcrumb-sep {
  margin: 0 6px;
}
/* En compu: Data Fiscal arriba, © / CUIT debajo (bloque en columna). */
.footer-fiscal-row { margin-top: 18px; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  padding-top: 24px;
  font-size: 12px;
  color: var(--fg-subtle);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}

/* ——— Hero / editorial ——— */
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(44px, 6vw, 84px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.hero-title em { font-style: normal; color: var(--accent-bright); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: currentColor;
}

/* ——— Divider ——— */
.hr {
  height: 1px;
  background: var(--border);
  border: none;
  margin: 40px 0;
}

/* ——— Utility ——— */
.muted { color: var(--fg-muted); }
.subtle { color: var(--fg-subtle); }
.tabular { font-variant-numeric: tabular-nums; }

/* ============================================================
   Layout primitives — clases reusables que reemplazan los inline
   styles repetidos en front-page.php, page-empresa.php, etc.
   La idea es que cambiar el ritmo visual del sitio (paddings,
   grids, sizes) sea editar UNA línea de CSS, no 5 archivos PHP.
   ============================================================ */

/* Sección estándar del home/landing: padding vertical 48px.
   Modifiers: --bordered (border-top) y --muted (bg + 2 borders). */
.ngi-section {
  padding: 48px 0;
}
/* La PRIMERA sección de una página (home, Empresa) arranca con el mismo
   padding-top que el resto de las páginas (40px), para que el eyebrow quede
   alineado. El espaciado entre secciones (48px) queda igual. */
main > .ngi-section:first-child {
  padding-top: 40px;
}
.ngi-section--bordered {
  border-top: 1px solid var(--border);
}
.ngi-section--muted {
  background: var(--bg-muted);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* Hero grid: texto a la izquierda (1.1fr), imagen a la derecha (1fr).
   Se usa en el home y en page-empresa (sección "Nuestra historia"). */
.ngi-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: center;
}

/* Grids simples por cantidad de columnas, todos con gap consistente. */
.ngi-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}
.ngi-grid-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
@media (max-width: 1024px) {
  .ngi-grid-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .ngi-grid-5 { grid-template-columns: repeat(2, 1fr); }
}

/* Lead paragraph: texto introductorio del hero. */
.ngi-lead {
  font-size: 18px;
  color: var(--fg-muted);
  max-width: 500px;
  line-height: 1.55;
  margin-bottom: 32px;
}

/* H2 grandes de sección. --md es la variante más chica (42px). */
.ngi-h2 {
  font-size: 48px;
  margin-top: 16px;
  margin-bottom: 40px;
  max-width: 720px;
}
.ngi-h2--md {
  font-size: 42px;
  margin-top: 16px;
}

/* Fila de botones horizontal con gap consistente. */
.ngi-btn-row {
  display: flex;
  gap: 12px;
}

/* Imagen principal del hero (alto fijo 620px, redondeada).
   Tanto el <img> real como el placeholder usan estas dimensiones. */
.ngi-hero-img-wrap { position: relative; }
.ngi-hero-img,
.ngi-hero-img-wrap .placeholder-img {
  width: 100%;
  height: 620px;
  border-radius: 12px;
  object-fit: cover;
  display: block;
  overflow: hidden;
}

/* Hero rotativo: los slides se apilan y se funden. El primero queda "en flujo"
   (define el alto del contenedor); los siguientes van absolutos encima. */
.ngi-hero-slide { transition: opacity 0.8s ease; }
.ngi-hero-slide:not(:first-child) {
  position: absolute;
  inset: 0;
}
.ngi-hero-slide:not(.is-active) {
  opacity: 0;
  pointer-events: none;
}
.ngi-hero-slide.is-active { opacity: 1; z-index: 2; }

/* Card flotante sobre el hero (la pill "98.7% precisión"). */
.ngi-hero-float-card {
  position: absolute;
  bottom: 24px;
  left: -24px;
  background: var(--bg-elevated);
  padding: 18px 22px;
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  min-width: 240px;
  transition: border-color 0.2s ease;
}

/* Slide clickeable: la imagen del hero linkea al producto. Afordancia suave
   al pasar el mouse (sin escalar, para no desbordar ni tapar el recuadro). */
.ngi-hero-link {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.ngi-hero-link .ngi-hero-img,
.ngi-hero-link .placeholder-img { transition: box-shadow 0.25s ease, filter 0.25s ease; }
.ngi-hero-link:hover .ngi-hero-img { box-shadow: var(--shadow-lg); filter: brightness(1.03); }
.ngi-hero-link:hover .ngi-hero-float-card { border-color: var(--accent-bright); }

/* Flechas prev/next del hero: sutiles, centradas vertical, sobre la imagen.
   Aparecen más al pasar el mouse por el hero. Sirven para 2+ slides. */
.ngi-hero-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: color-mix(in oklch, var(--bg-elevated) 82%, transparent);
  border: 1px solid var(--border);
  color: var(--fg-muted);
  box-shadow: var(--shadow);
  cursor: pointer;
  opacity: 0.28;
  backdrop-filter: blur(4px);
  transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.ngi-hero-img-wrap:hover .ngi-hero-nav { opacity: 0.75; }
.ngi-hero-nav:hover {
  opacity: 1;
  color: var(--fg);
  background: var(--bg-elevated);
  border-color: var(--border-strong);
}
.ngi-hero-nav:focus-visible {
  opacity: 1;
  outline: 2px solid var(--accent-oklch);
  outline-offset: 2px;
}
.ngi-hero-nav-prev { left: 12px; }
.ngi-hero-nav-next { right: 12px; }

/* Fila de stats al pie del hero ("28 años en el rubro", etc). */
.ngi-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}
.ngi-stat-value {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.15;
}
/* En pantallas chicas, 2x2 para que las frases no se amontonen. */
@media (max-width: 640px) {
  .ngi-stats { grid-template-columns: 1fr 1fr; gap: 22px 24px; }
}
.ngi-stat-label {
  font-size: 11px;
  color: var(--fg-subtle);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 6px;
}

/* Card de categoría con número arriba e icono al lado.
   Se compone con .card (que ya define padding/border/etc). */
.ngi-cat-card {
  padding: 28px;
  text-decoration: none;
  color: inherit;
  display: block;
}
.ngi-cat-card-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin-bottom: 10px;
}
.ngi-cat-card-num {
  font-size: 11px;
  color: var(--fg-subtle);
}
.ngi-cat-card-title {
  font-size: 26px;
  margin-bottom: 8px;
}
.ngi-cat-card-desc {
  font-size: 13px;
  color: var(--fg-muted);
  margin: 0;
}
.ngi-cat-badge {
  margin-top: 12px;
}
.ngi-cat-card--soon {
  cursor: default;
}
.ngi-cat-card:not(.ngi-cat-card--soon):hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent-oklch);
}
.ngi-cat-card:not(.ngi-cat-card--soon):hover .ngi-cat-card-title {
  color: var(--accent-bright);
}
.ngi-cat-card:not(.ngi-cat-card--soon):hover .ngi-cat-card-head span {
  color: var(--accent-bright) !important;
}

/* Icono circular para value props (con accent verde de fondo). */
.ngi-vp-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-bright);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.ngi-vp-title {
  font-size: 22px;
  margin-bottom: 10px;
}
.ngi-vp-desc {
  color: var(--fg-muted);
  font-size: 14px;
  margin: 0;
}

/* Bloque de testimonio centrado con quote grande tipo editorial. */
.ngi-testimonial {
  text-align: center;
}
.ngi-testimonial-quote {
  font-family: var(--font-display);
  font-size: 42px;
  line-height: 1.15;
  margin: 30px 0 24px;
  letter-spacing: -0.01em;
}
.ngi-testimonial-meta {
  font-size: 12px;
  color: var(--fg-subtle);
  letter-spacing: 0.1em;
}

/* Section variant: padding más chico (40px) para secciones secundarias. */
.ngi-section--sm {
  padding: 40px 0;
}

/* "Hitos" — timeline horizontal con bullet dots accent.
   Usada en page-empresa.php para la línea de años (1998 / 2004 / ...). */
.ngi-hitos {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
}
.ngi-hito {
  padding-right: 24px;
  border-left: 1px solid var(--border);
  padding-left: 20px;
  position: relative;
}
.ngi-hito::before {
  content: '';
  position: absolute;
  left: -4px;
  top: 0;
  width: 8px;
  height: 8px;
  background: var(--accent-oklch);
  border-radius: 50%;
}
.ngi-hito-year {
  font-family: var(--font-display);
  font-size: 36px;
  margin-bottom: 8px;
}
.ngi-hito-label {
  font-size: 13px;
  color: var(--fg-muted);
  line-height: 1.4;
}

/* Página de contacto — wrapper y título (antes eran inline styles en el
   template, por eso no se achicaban en mobile). */
.ngi-contact-wrap { padding: 40px 0 80px; }
.ngi-contact-title { font-size: 64px; margin: 16px 0 40px; max-width: 900px; line-height: 1; }

/* Página de contacto — layout 2-col (form + contact info).
   Diferente a .ngi-hero-grid: este NO centra verticalmente, los dos
   lados arrancan arriba. */
.ngi-contact-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
}

/* Form layout: stack vertical con gap consistente entre campos. */
.ngi-form-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ngi-form-row-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
/* Honeypot anti-bot: visible para bots, invisible para humanos. */
.ngi-honeypot {
  position: absolute;
  left: -9999px;
}

/* Caja "Mensaje enviado" después de submit exitoso */
.ngi-form-success {
  padding: 40px;
  background: var(--bg-muted);
  border-radius: 10px;
  text-align: center;
}
.ngi-form-success-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-oklch);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  font-size: 24px;
}
.ngi-form-success-title {
  font-size: 26px;
  margin-bottom: 8px;
}

/* Caja de error de validación (rojo suave con border-left) */
.ngi-form-error {
  padding: 14px 18px;
  background: var(--danger-soft);
  border-left: 3px solid var(--danger);
  border-radius: 6px;
  margin-bottom: 16px;
  color: var(--danger-strong);
  font-size: 14px;
}

/* Cards de contacto rápido (WhatsApp Ventas, Soporte, Email).
   Variante --wide ocupa las 2 columnas (para el email). */
.ngi-contact-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 24px;
}
.ngi-contact-card {
  padding: 20px;
  text-decoration: none;
  color: inherit;
  display: block;
}
.ngi-contact-card--wide {
  grid-column: span 2;
}
.ngi-contact-card-title {
  font-family: var(--font-display);
  font-size: 18px;
  margin: 10px 0 2px;
}
.ngi-contact-card--wide .ngi-contact-card-title {
  word-break: break-all;
}
.ngi-contact-card-meta {
  font-size: 13px;
  color: var(--fg-muted);
}
/* Hover igual a las cards de "Qué hacemos" del home: se levanta, sombra,
   borde verde y el título + ícono en verde. */
.ngi-contact-card {
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.ngi-contact-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent-oklch);
}
.ngi-contact-card:hover .ngi-contact-card-title,
.ngi-contact-card:hover > svg {
  color: var(--accent-bright);
}

/* Address box ("Casa central · Villa Constitución") */
.ngi-address-box {
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-elevated);
}
.ngi-address-eyebrow {
  font-size: 11px;
  color: var(--fg-subtle);
  letter-spacing: 0.12em;
  margin-bottom: 10px;
}
.ngi-address-title {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1.1;
  margin-bottom: 8px;
}
.ngi-address-title-suffix {
  font-size: 15px;
  color: var(--fg-muted);
  font-family: var(--font-sans);
}
.ngi-address-detail {
  font-size: 15px;
  color: var(--fg-muted);
  line-height: 1.5;
}
.ngi-address-hours {
  margin-top: 16px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
  font-size: 13px;
  color: var(--fg-muted);
}
/* "Ver en Google Maps" como pill con hover que se levanta */
.ngi-maps-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-muted);
  color: var(--accent-bright);
  text-decoration: none;
  font-weight: 500;
  transition: transform 0.18s ease, box-shadow 0.18s ease,
              border-color 0.18s ease, background 0.18s ease;
}
.ngi-maps-pill span { transition: transform 0.18s ease; }
.ngi-maps-pill:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: var(--accent-oklch);
  background: var(--accent-soft);
}
.ngi-maps-pill:hover span { transform: translateX(3px); }

/* Contacto en mobile. El grid form|info apila a ≤768; en el celu (≤600) se
   achica el título, se apila Nombre|Email y el horario/mapa van en columna. */
@media (max-width: 768px) {
  .ngi-contact-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 600px) {
  .ngi-contact-wrap { padding: 20px 0; }
  .ngi-contact-title { font-size: 34px; margin: 20px 0; line-height: 1.1; }
  .ngi-contact-grid { gap: 20px; }
  .ngi-form-row-2col { grid-template-columns: 1fr; gap: 16px; }
  .ngi-contact-card { padding: 16px; }
  .ngi-address-hours { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* "Motivo" del form de contacto: el <select> nativo abre una lista fea (la del SO
   en el celu / la del browser en compu). Mostramos SIEMPRE (mobile y compu) un
   desplegable custom (botón + lista estilada) y ocultamos el <select> nativo. */
.ngi-motivo-wrap { position: relative; }
.ngi-motivo { display: none; }
.ngi-motivo-list { display: none; }
.ngi-motivo-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 8px;
  padding: 10px 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--fg);
  font-family: var(--font-sans);
  text-align: left;
  cursor: pointer;
}
.ngi-motivo-list.is-open {
  display: block;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  margin: 0;
  list-style: none;
  z-index: 60;
}
.ngi-motivo-opt {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 12px 14px;
  border-radius: var(--radius);
  font-size: 15px;
  color: var(--fg);
  font-family: var(--font-sans);
  cursor: pointer;
}
.ngi-motivo-opt:hover { background: var(--bg-muted); }
.ngi-motivo-opt.is-active { background: var(--accent-soft); color: var(--accent-bright); }

/* Ficha de producto (content-single-product.php) — clases que reemplazan
   los inline styles del template. */

/* Imagen que llena su contenedor manteniendo aspect ratio (object-fit cover).
   Se usa para el main image de galería y para cada thumbnail. */
.ngi-single-img-fill {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Row de badges (Nuevo / Oferta / Categoría) arriba del título */
.ngi-single-badges {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

/* SKU eyebrow (mono uppercase chico) */
.ngi-single-sku {
  font-size: 11px;
  color: var(--fg-subtle);
  margin-bottom: 18px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Título del producto (h1 grande) */
.ngi-single-title {
  font-size: 48px;
  line-height: 1.1;
  margin-bottom: 6px;
}

/* Short description debajo del título */
.ngi-single-shortdesc {
  font-size: 17px;
  color: var(--fg-muted);
  line-height: 1.5;
  margin-bottom: 28px;
}

/* Card del precio: bordes arriba y abajo, padding vertical */
.ngi-single-price-card {
  padding: 24px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
}
.ngi-single-price-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
}
.ngi-single-price {
  font-family: var(--font-display);
  font-size: 44px;
  letter-spacing: -0.01em;
}
.ngi-single-price-iva {
  font-size: 12px;
  color: var(--fg-muted);
}

/* Stock indicator: dot de color + texto. El color del dot lo controla
   una modifier (--ok / --low / --off) según el estado del producto. */
.ngi-single-stock {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--fg-muted);
}
.ngi-single-stock-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.ngi-single-stock-dot--ok  { background: var(--success); }
.ngi-single-stock-dot--low { background: var(--ocre); }
.ngi-single-stock-dot--off { background: var(--fg-subtle); }

/* Trust badges (Envío en 24h / 12 meses garantía / Soporte técnico).
   Grid de 3 columnas con fondo bg-muted. */
.ngi-trust-badges {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 20px;
  background: var(--bg-muted);
  border-radius: 8px;
  margin: 28px 0;
}
.ngi-trust-badge {
  display: flex;
  gap: 10px;
  font-size: 13px;
  align-items: center;
}
.ngi-trust-badge > svg {
  color: var(--accent-bright);
  flex-shrink: 0;
}
/* Lista de documentos descargables — compartida por la página Soporte
   y el bloque "Documentación" de la ficha de producto. */
.ngi-docs-lbl {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin: 0 0 8px;
}
.ngi-doclist {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-elevated);
  margin: 0 0 10px;
}
.ngi-docrow {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.ngi-doclist .ngi-docrow:last-child { border-bottom: none; }
.ngi-doctag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-bright);
  background: var(--accent-soft);
  border-radius: 4px;
  padding: 2px 7px;
  margin-bottom: 6px;
}

/* Página de Soporte — clases que reemplazan los inline styles del template
   (para poder hacerlos responsive). */
.ngi-soporte-wrap { padding: 40px 0 80px; }
.ngi-soporte-title { font-size: 56px; margin: 16px 0 12px; }
.ngi-soporte-intro { color: var(--fg-muted); font-size: 17px; max-width: 640px; margin-bottom: 40px; }
/* Banner "Escribinos por WhatsApp": barra oscura con título + 3 links de contacto. */
.ngi-soporte-banner {
  background: var(--fg);
  color: var(--bg);
  padding: 28px 36px;
  border-radius: 10px;
  display: grid;
  grid-template-columns: 1fr auto auto auto auto;
  gap: 30px;
  align-items: center;
  margin-bottom: 48px;
}
.ngi-soporte-banner-h { font-family: var(--font-display); font-size: 34px; }
.ngi-soporte-divider { width: 1px; height: 40px; background: currentColor; opacity: 0.2; }
/* Manuales (1.3fr) | Preguntas frecuentes (1fr). */
.ngi-soporte-cols { display: grid; grid-template-columns: 1.3fr 1fr; gap: 60px; }
.ngi-soporte-h2 { font-size: 32px; margin-bottom: 20px; }

/* Soporte en mobile: banner y columnas apilan a ≤900; el celu (≤600) achica
   título/banner y aplica ritmo 20px. */
@media (max-width: 900px) {
  .ngi-soporte-banner { grid-template-columns: 1fr; gap: 16px; }
  .ngi-soporte-divider { display: none; }
  .ngi-soporte-link { margin: 0; padding: 8px 0; }   /* alinear los links con el título al apilar */
  .ngi-soporte-cols { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 600px) {
  .ngi-soporte-wrap { padding: 20px 0; }
  .ngi-soporte-title { font-size: 34px; }
  .ngi-soporte-intro { margin-bottom: 20px; }
  .ngi-soporte-banner { padding: 20px; margin-bottom: 20px; }
  .ngi-soporte-banner-h { font-size: 24px; }
  .ngi-soporte-cols { gap: 20px; }
  .ngi-soporte-h2 { font-size: 26px; }
  .ngi-soporte-link-val { word-break: break-word; }
  .ngi-docrow { padding: 16px; }
}

/* "Cómo trabajamos" — layout 1:2 con título a la izquierda y lista
   numerada a la derecha. Cada valor en una fila con número + título + desc. */
.ngi-valores-layout {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 60px;
}
.ngi-valor {
  padding: 32px 0;
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: 80px 1fr 2fr;
  gap: 30px;
  align-items: baseline;
}
.ngi-valor-num {
  font-size: 12px;
  color: var(--fg-subtle);
}
.ngi-valor-title {
  font-family: var(--font-display);
  font-size: 28px;
}
.ngi-valor-desc {
  color: var(--fg-muted);
  font-size: 15px;
  line-height: 1.55;
}

/* Empresa en el celu: Hitos como timeline vertical (1 columna), valores apilados
   y ritmo de 20px. (.ngi-hitos / .ngi-valores / .ngi-section--sm son exclusivos
   de esta página, así que no hace falta scopear.) */
@media (max-width: 600px) {
  .ngi-section--sm { padding: 20px 0; }
  /* Hitos: timeline vertical. */
  .ngi-hitos { grid-template-columns: 1fr; gap: 20px; }
  .ngi-hito-year { font-size: 28px; }
  .ngi-section--muted .ngi-h2--md { margin-bottom: 20px !important; }   /* "Hitos" tenía 40px inline */
  /* Valores "Cómo trabajamos": todo apilado en 1 columna. */
  .ngi-valores-layout { grid-template-columns: 1fr; gap: 20px; }
  .ngi-valor { grid-template-columns: 1fr; gap: 6px; padding: 20px 0; }
  .ngi-valor:last-child { padding-bottom: 0; }   /* los 20px de abajo los da la sección, no duplicar */
  .ngi-valor-title { font-size: 22px; }
}

/* ——— Filter sidebar ——— */
.filter-group {
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}
.filter-group:last-child { border-bottom: none; }
.filter-group h5 {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 14px;
}
.filter-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  font-size: 13.5px;
  cursor: pointer;
  color: var(--fg);
}
.filter-opt input { accent-color: var(--accent-oklch); }
.filter-opt span.count { margin-left: auto; font-size: 11px; color: var(--fg-subtle); font-family: var(--font-mono); }

/* ——— Stepper / qty ——— */
.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
}
.qty button {
  width: 32px;
  height: 32px;
  color: var(--fg-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.qty button:hover { color: var(--fg); }
.qty .val {
  min-width: 28px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
}

/* ——— Modal ——— */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: color-mix(in oklch, var(--fg) 35%, transparent);
  backdrop-filter: blur(4px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: fade 0.2s;
}
.modal {
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  max-width: 440px;
  width: 100%;
  padding: 36px;
  box-shadow: var(--shadow-lg);
  animation: pop 0.2s ease-out;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* ——— Cart drawer ——— */
.drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: color-mix(in oklch, var(--fg) 25%, transparent);
  backdrop-filter: blur(3px);
}
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 440px;
  max-width: 100vw;
  background: var(--bg-elevated);
  z-index: 95;
  display: flex;
  flex-direction: column;
  box-shadow: -12px 0 40px oklch(0.2 0.01 85 / 0.12);
  animation: slideIn 0.25s ease-out;
}
@keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }

/* ——— Tweaks panel ——— */
.tweaks-panel {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 300px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: var(--shadow-lg);
  z-index: 200;
  font-size: 13px;
}
.tweaks-panel h4 {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-muted);
  margin-bottom: 14px;
}
.tweaks-row {
  margin-bottom: 14px;
}
.tweaks-row label {
  display: block;
  font-size: 11px;
  color: var(--fg-muted);
  margin-bottom: 8px;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.swatches { display: flex; gap: 6px; flex-wrap: wrap; }
.swatch {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--border);
  cursor: pointer;
}
.swatch.on { border-color: var(--fg); }

.font-opt {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 12px;
  margin-bottom: 4px;
  transition: all 0.15s;
}
.font-opt:hover { border-color: var(--border-strong); }
.font-opt.on { border-color: var(--accent-oklch); background: var(--accent-soft); color: var(--accent-bright); }

.theme-toggle-row {
  display: flex;
  gap: 6px;
  background: var(--bg-muted);
  border-radius: var(--radius);
  padding: 3px;
}
.theme-toggle-row button {
  flex: 1;
  padding: 6px;
  font-size: 12px;
  color: var(--fg-muted);
  border-radius: 4px;
}
.theme-toggle-row button.on { background: var(--bg-elevated); color: var(--fg); box-shadow: var(--shadow-sm); }

/* ——— Tabs ——— */
.tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
}
.tab {
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tab:hover { color: var(--fg); }
.tab.on { color: var(--fg); border-color: var(--accent-oklch); }

/* ——— Specs table ——— */
.specs {
  width: 100%;
  border-collapse: collapse;
}
.specs tr { border-bottom: 1px solid var(--border); }
.specs tr:last-child { border-bottom: none; }
.specs td {
  padding: 12px 0;
  font-size: 14px;
  vertical-align: top;
}
.specs td:first-child {
  color: var(--fg-muted);
  font-weight: 450;
  width: 40%;
  padding-right: 20px;
}
.specs td:last-child { font-family: var(--font-mono); font-size: 12.5px; }

/* Scrollbar subtle */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* Checkbox visual */
.chk {
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--border-strong);
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  flex-shrink: 0;
}
.chk.on {
  background: var(--accent-oklch);
  border-color: var(--accent-oklch);
  color: white;
}

/* ============================================================
   WooCommerce — Tienda / Archive
   ============================================================ */

/* Layout 2 columnas: sidebar filtros | grilla productos */
/* Encabezado de la tienda (reemplaza los estilos inline del template). */
.ngi-shop-wrap { padding-top: 40px; padding-bottom: 80px; }
.ngi-shop-title { font-size: 56px; margin: 16px 0 8px; }
.ngi-shop-intro { color: var(--fg-muted); max-width: 600px; font-size: 16px; margin-bottom: 40px; }
.ngi-filters-toggle { display: none; }   /* solo aparece en mobile */

.ngi-shop-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 48px;
  align-items: flex-start;
}

.ngi-shop-sidebar {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.ngi-shop-sidebar .filter-group h5 {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-muted);
  margin-bottom: 12px;
}

.ngi-shop-sidebar .filter-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 14px;
  color: var(--fg);
  cursor: pointer;
}
.ngi-shop-sidebar .filter-opt:hover { color: var(--accent-bright); }
.ngi-shop-sidebar .filter-opt .count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-subtle);
}

.ngi-shop-main {
  min-width: 0;
}

.ngi-shop-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 18px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border);
}
.ngi-shop-toolbar select,
.ngi-shop-toolbar .orderby {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 30px 8px 12px;
  font-size: 13px;
  color: var(--fg);
  font-family: var(--font-sans);
  cursor: pointer;
}

/* Desplegable de orden custom: mostramos SIEMPRE (mobile y compu) el desplegable
   custom (botón + lista) y ocultamos el <select> nativo, que no se puede estilar. */
.ngi-orderby-wrap { position: relative; }
.ngi-orderby { display: none; }
.ngi-orderby-list { display: none; }
.ngi-orderby-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--fg);
  font-family: var(--font-sans);
  cursor: pointer;
}
.ngi-orderby-list.is-open {
  display: block;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 210px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  margin: 0;
  list-style: none;
  z-index: 60;
}
.ngi-orderby-opt {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 12px 14px;
  border-radius: var(--radius);
  font-size: 15px;
  color: var(--fg);
  font-family: var(--font-sans);
  cursor: pointer;
}
.ngi-orderby-opt:hover { background: var(--bg-muted); }
.ngi-orderby-opt.is-active { background: var(--accent-soft); color: var(--accent-bright); }

/* Grilla de productos: pisamos ul.products de Woo */
.ngi-shop-main ul.products,
.ngi-shop-main .products {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 20px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Cada <li> de Woo no debe pisar el ancho */
.ngi-shop-main ul.products li,
.ngi-shop-main ul.products li.product {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  clear: none !important;
}

/* Woo a veces inserta ::before / ::after para clearfix en ul.products.
   Esos pseudo-elementos ocupan un slot de la grilla y dejan el primer hueco vacío. */
.ngi-shop-main ul.products::before,
.ngi-shop-main ul.products::after,
.ngi-shop-main .products::before,
.ngi-shop-main .products::after {
  display: none !important;
  content: none !important;
}

@media (max-width: 1000px) {
  .ngi-shop-layout { grid-template-columns: 1fr; gap: 20px; }   /* en mobile, 20px entre filtros y productos (en compu queda el gap grande) */
  /* Filtros colapsados detrás del botón "Filtros": se ven los productos primero.
     Espaciado vertical uniforme de 20px (entre grupos y debajo del panel). */
  .ngi-shop-sidebar { position: static; display: none; gap: 0; margin: 0; }   /* gap 0: cada .filter-group ya trae su padding. La separación con el main la da el gap del layout. */
  .ngi-shop-sidebar.is-open { display: flex; }
  .ngi-filters-toggle { display: inline-flex; align-items: center; gap: 8px; width: fit-content; }
  .ngi-shop-count { display: none; }   /* el contador "X productos" no se muestra en mobile */
  .ngi-shop-main ul.products,
  .ngi-shop-main .products { grid-template-columns: repeat(2, 1fr) !important; }
}
/* En el celu: 2 productos por fila con cards compactas (título/precio más chicos,
   sin descripción, precio y botón apilados). */
@media (max-width: 600px) {
  .ngi-shop-wrap { padding-top: 20px; padding-bottom: 20px; }
  .ngi-shop-title { font-size: 32px; }
  .ngi-shop-intro { font-size: 15px; margin-bottom: 20px; }
  /* Cards compactas en la tienda Y en "Productos relacionados" (2 columnas).
     El home ("Destacados") queda con la card completa (1 columna grande). */
  .ngi-shop-layout .product-card-body,
  .related.products .product-card-body { padding: 12px 12px 14px; gap: 4px; }
  .ngi-shop-layout .product-card-title,
  .related.products .product-card-title { font-size: 17px; }
  .ngi-shop-layout .product-card-desc,
  .related.products .product-card-desc { display: none; }
  .ngi-shop-layout .product-card-foot,
  .related.products .product-card-foot { flex-direction: column; align-items: stretch; gap: 8px; margin-top: 8px; padding-top: 10px; }
  .ngi-shop-layout .product-price,
  .related.products .product-price { font-size: 17px; }
  .ngi-shop-layout .product-card .product-card-foot a,
  .ngi-shop-layout .product-card .add_to_cart_button,
  .related.products .product-card .product-card-foot a,
  .related.products .product-card .add_to_cart_button { width: 100%; justify-content: center; }
}
/* "Destacados" del home: 1 columna grande en el celu (no 2 como la tienda). */
@media (max-width: 640px) {
  body.home .ngi-shop-main ul.products,
  body.home .ngi-shop-main .products { grid-template-columns: 1fr !important; }
}

/* Paginación */
.woocommerce-pagination {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}
.woocommerce-pagination ul.page-numbers {
  display: flex;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.woocommerce-pagination ul.page-numbers li { margin: 0; }
.woocommerce-pagination ul.page-numbers .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  color: var(--fg-muted);
  text-decoration: none;
}
.woocommerce-pagination ul.page-numbers .page-numbers.current,
.woocommerce-pagination ul.page-numbers .page-numbers:hover {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}

/* ============================================================
   WooCommerce — Single product
   ============================================================ */

.ngi-single-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: flex-start;
}
/* La columna de info NO debe estirarse por contenido ancho (ej. las pestañas en
   nowrap en mobile). min-width:0 hace que en vez de crecer, las pestañas
   scrolleen adentro de su propio overflow-x. */
.ngi-single-info { min-width: 0; }

.ngi-single-gallery { display: flex; flex-direction: column; gap: 14px; }
.ngi-gallery-main {
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
/* Imagen principal: se muestra COMPLETA (sin recortar). Como las fotos vienen
   con fondo blanco, las franjas a los costados se funden con el fondo del cuadro. */
.ngi-gallery-main .ngi-single-img-fill {
  object-fit: contain;
  width: 100% !important;
  height: 100% !important;
}
.ngi-gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.ngi-gallery-thumb {
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  overflow: hidden;
  border: 1.5px solid var(--border);
  background: #fff;
  cursor: pointer;
  padding: 0;
}
.ngi-gallery-thumb .ngi-single-img-fill {
  object-fit: contain;
  width: 100% !important;
  height: 100% !important;
}
.ngi-gallery-thumb.is-active { border-color: var(--accent-oklch); }

/* Miniatura de video: portada de YouTube + ▶ play encima */
.ngi-gallery-thumb--video { position: relative; }
.ngi-gallery-thumb--video .ngi-single-img-fill { object-fit: cover !important; }
.ngi-thumb-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.28);
  color: #fff;
}
.ngi-thumb-play svg { width: 22px; height: 22px; }
/* Video reproducido en el cuadro grande (16:9 centrado dentro del cuadro 1:1) */
.ngi-video-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}
.ngi-video-wrap iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  display: block;
}

.ngi-single-info .quantity { display: inline-flex; align-items: center; gap: 0; }
.ngi-single-info .quantity input.qty {
  width: 64px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0 8px;
  text-align: center;
  font-size: 15px;
  font-family: var(--font-sans);
  background: transparent !important;
}
.ngi-addtocart-row form.cart {
  display: flex;
  gap: 12px;
  align-items: center;
}
/* Para productos variables, el form contiene la tabla escondida + el wrap
   con qty/botón. Override: el form NO es flex (queda en bloque), y los
   controles de qty + add-to-cart se hacen flex dentro de su contenedor. */
.ngi-addtocart-row form.variations_form { display: block; }
.ngi-addtocart-row .woocommerce-variation-add-to-cart,
.ngi-addtocart-row .variations_button {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

/* Variable products: el JS mueve los botones-tile al anchor #ngi-variation-anchor
   (arriba del precio grande). La tabla original de Woo queda en el form pero
   escondida — el <select> debe quedar en el DOM porque WC lo usa internamente. */
.variations_form.ngi-variations-ready table.variations,
.variations_form.ngi-variations-ready .reset_variations { display: none !important; }

/* Desplegable de variación custom (cuando hay muchas opciones, ej. AXEM por surcos).
   Mismo estilo que "Motivo"/envío, en mobile y compu. La lista es scrolleable
   porque puede haber muchas opciones (surcos 7-64). Lo arma main.js. */
.ngi-variation-dd { position: relative; margin-top: 6px; }
.ngi-variation-dd-list { display: none; }
.ngi-variation-dd-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 8px;
  padding: 12px 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 15px;
  color: var(--fg);
  font-family: var(--font-sans);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.ngi-variation-dd-btn:hover { border-color: var(--fg-muted); }
.ngi-variation-dd-btn span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ngi-variation-dd-btn span.is-placeholder { color: var(--fg-muted); }
.ngi-variation-dd-btn svg { flex-shrink: 0; color: var(--fg-muted); }
.ngi-variation-dd-list.is-open {
  display: block;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 320px;
  overflow-y: auto;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  margin: 0;
  list-style: none;
  z-index: 60;
}
.ngi-variation-dd-opt {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 15px;
  color: var(--fg);
  font-family: var(--font-sans);
  cursor: pointer;
}
.ngi-variation-dd-opt:hover { background: var(--bg-muted); }
.ngi-variation-dd-opt.is-active { background: var(--accent-soft); color: var(--accent-bright); }

/* Bloque de precio + availability que Woo inyecta dentro del form (.single_variation).
   No lo necesitamos: el precio grande de arriba ya muestra la variación seleccionada
   y el indicador de stock de NGI ya se actualiza dinámicamente. */
.single_variation_wrap .woocommerce-variation-price,
.single_variation_wrap .woocommerce-variation-availability,
.single_variation_wrap .woocommerce-variation-description { display: none !important; }

/* Bloque de variación arriba del precio (label + botones). */
#ngi-variation-anchor:empty { display: none; }
#ngi-variation-anchor { margin-bottom: 24px; }
.ngi-variation-block-label {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: 500;
  margin-bottom: 12px;
}

/* WC pinta el price_html con un verde por default (.amount / .woocommerce-Price-amount).
   Forzamos color: inherit en el precio grande para que tome el --fg del template. */
#ngi-product-price,
#ngi-product-price .price,
#ngi-product-price .amount,
#ngi-product-price .woocommerce-Price-amount,
#ngi-product-price ins,
#ngi-product-price del,
#ngi-product-price bdi { color: var(--fg) !important; }
/* Si la variación tiene precio rebajado, el "del" (precio tachado) lo dejamos
   atenuado como suele ser convencional. */
#ngi-product-price del,
#ngi-product-price del .amount { color: var(--fg-muted) !important; opacity: 0.7; }

.ngi-variation-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 4px;
}
.ngi-variation-btn {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  border: 1.5px solid var(--border);
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  padding: 12px 18px;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
  min-width: 120px;
  text-align: left;
}
.ngi-variation-btn-label {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
}
.ngi-variation-btn-price {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  line-height: 1.2;
  color: var(--fg-muted);
  letter-spacing: -0.01em;
}
.ngi-variation-btn:hover {
  border-color: var(--fg-muted);
}
.ngi-variation-btn.is-active {
  border-color: var(--accent-oklch);
  background: color-mix(in oklch, var(--accent-oklch) 8%, var(--bg));
  color: var(--fg);
}
.ngi-variation-btn.is-active .ngi-variation-btn-price {
  color: var(--fg);
  opacity: 0.85;
}
.ngi-variation-btn.is-disabled,
.ngi-variation-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  text-decoration: line-through;
}
.ngi-variation-btn.is-disabled:hover {
  border-color: var(--border);
  background: var(--bg);
}

/* La descripción de la variación seleccionada (precio extra, stock, etc.)
   que WC inserta en .single_variation_wrap. Le damos un poco de espacio. */
.single_variation_wrap { margin-top: 4px; }
.single_variation_wrap .woocommerce-variation-price,
.single_variation_wrap .woocommerce-variation-availability {
  font-size: 13px;
  color: var(--fg-muted);
  margin-bottom: 8px;
}

/* Select2 dropdowns (los que WC usa para país, provincia, etc.): respetar el
   tema light/dark. Sin estas reglas el dropdown queda con fondo blanco fijo. */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  background-color: var(--bg) !important;
  border-color: var(--border) !important;
}
/* select2 a veces le mete al .select2-container un ancho fijo en px que se pasa
   del ancho del form en mobile → provoca scroll horizontal en el checkout. Lo
   capamos al 100% del contenedor. */
.select2-container { max-width: 100% !important; box-sizing: border-box; }
/* select2 deja el <select> original OCULTO (.select2-hidden-accessible) para
   accesibilidad. Nuestra regla de form-row le forzaba width:100%, dejándolo
   visible a ancho completo → se metía bajo la barra de scroll y generaba 16px de
   scroll horizontal (aparecía al segundo, cuando select2 inicializa). Lo forzamos
   a 1px oculto, ganándole por especificidad. */
.ngi-checkout-layout .form-row select.select2-hidden-accessible,
.ngi-account-content .form-row select.select2-hidden-accessible,
select.select2-hidden-accessible {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  border: 0 !important;
  white-space: nowrap !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--fg) !important;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--fg-subtle) !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--fg-muted) transparent transparent transparent !important;
}
.select2-dropdown {
  background-color: var(--bg-elevated) !important;
  border-color: var(--border) !important;
  color: var(--fg) !important;
}
.select2-results__option {
  color: var(--fg) !important;
  background: transparent !important;
}
.select2-container--default .select2-results__option[aria-selected="true"] {
  background: var(--bg-muted) !important;
  color: var(--fg) !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
  background-color: var(--accent-soft) !important;
  color: var(--fg) !important;
}
.select2-search--dropdown .select2-search__field {
  background: var(--bg) !important;
  color: var(--fg) !important;
  border-color: var(--border) !important;
}

/* Indicador de fuerza de contraseña: dejamos apariencia de modo light en ambos
   temas (texto oscuro sobre fondo coloreado). El usuario prefiere así porque
   en dark mode quedaba con letras blancas y baja legibilidad. */
.woocommerce-password-strength {
  color: #2b2b2b !important;
}

/* "Sugerencia: La contraseña debe..." — texto de hint de fuerza de password.
   En modo claro se ve bien con color default. En modo oscuro casi no se ve,
   lo forzamos a casi-blanco para que sea legible. */
[data-theme="dark"] .woocommerce-password-hint,
[data-theme="dark"] em#password-strength-meter-description,
[data-theme="dark"] .indicator-hint,
[data-theme="dark"] em.password-input-text {
  color: #f0f0f0 !important;
}

/* Color del TEXTO de los inputs/textareas/selects de TODOS los forms del sitio.
   Sin esta regla el browser usa negro por default, lo que se ve mal en dark mode
   (texto negro sobre fondo oscuro). Usamos var(--fg) que respeta el tema.
   !important porque otras reglas con specificity alta también usan !important
   en propiedades del input (background, padding, etc.) y por compat de browser. */
input.input-text,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
textarea,
select {
  color: var(--fg) !important;
  background-color: var(--bg) !important;
}
input::placeholder,
textarea::placeholder {
  color: var(--fg-subtle) !important;
  opacity: 1;
}
/* Autofill del browser tiende a forzar blanco/amarillo — lo neutralizamos */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--fg) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--bg) inset !important;
  caret-color: var(--fg) !important;
}

/* Theme toggle button: muestra luna cuando está en light (click → ir a dark),
   sol cuando está en dark (click → ir a light). */
.ngi-theme-toggle .ngi-theme-icon-dark { display: none; }
[data-theme="dark"] .ngi-theme-toggle .ngi-theme-icon-light { display: none; }
[data-theme="dark"] .ngi-theme-toggle .ngi-theme-icon-dark { display: block; }

/* Breadcrumb del single product (NGI / Catálogo / Categoría / Nombre).
   Los links clickeables (todos menos el último) heredan el color muted del
   contenedor (.ngi-crumbs tiene color:var(--fg-muted) inline). Al pasar el
   mouse, solo cambia al verde accent. Sin borde, sin underline, sin caja —
   un hover mínimo que mantiene la apariencia plana del breadcrumb. */
.ngi-crumbs a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}
.ngi-crumbs a:hover,
.ngi-crumbs a:focus-visible {
  color: var(--accent-hover);
}

/* Esconder el <p class="stock"> default de Woo en la ficha de producto:
   ya tenemos nuestro propio indicador de stock con dot de color debajo del
   precio en content-single-product.php — el de WC duplicaría info. */
.ngi-single-info p.stock,
.ngi-single-grid .stock {
  display: none !important;
}

/* Quantity stepper (- valor +) en la ficha de producto */
.ngi-qty-stepper {
  display: inline-flex !important;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  height: 48px;
  overflow: hidden;
  flex-shrink: 0;
}
.ngi-qty-stepper-btn {
  width: 38px;
  height: 100%;
  background: transparent;
  border: 0;
  color: var(--fg-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: color 0.15s, background 0.15s;
}
.ngi-qty-stepper-btn:hover {
  color: var(--fg);
  background: var(--bg-muted);
}
.ngi-qty-stepper-input {
  width: 44px !important;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: 15px !important;
  font-family: var(--font-sans) !important;
  color: var(--fg) !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  -moz-appearance: textfield;
  appearance: textfield;
}
.ngi-qty-stepper-input::-webkit-outer-spin-button,
.ngi-qty-stepper-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
html body .ngi-addtocart-row button.single_add_to_cart_button,
html body .woocommerce div.product form.cart .button,
html body button.single_add_to_cart_button {
  flex: 1;
  background: var(--accent-oklch) !important;
  color: #fff !important;
  border: 0 !important;
  height: 52px !important;
  padding: 0 24px !important;
  border-radius: 8px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  font-family: var(--font-sans) !important;
  cursor: pointer;
  letter-spacing: 0 !important;
  text-transform: none !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}
html body .ngi-addtocart-row button.single_add_to_cart_button:hover,
html body .woocommerce div.product form.cart .button:hover,
html body button.single_add_to_cart_button:hover {
  background: var(--accent-hover) !important;
  opacity: 1;
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
/* Ícono de carrito antes del texto */
html body .ngi-addtocart-row button.single_add_to_cart_button::before {
  content: "";
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='21' r='1'/><circle cx='20' cy='21' r='1'/><path d='M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
}

/* Tabs de producto */
.woocommerce-tabs {
  margin-top: 40px;
  border-top: 1px solid var(--border);
  padding-top: 28px;
}
.woocommerce-tabs ul.tabs {
  display: flex;
  gap: 22px;
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  border-bottom: 1px solid var(--border);
}
.woocommerce-tabs ul.tabs li { margin: 0; }
.woocommerce-tabs ul.tabs li a {
  display: inline-block;
  padding: 10px 0;
  color: var(--fg-muted);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.woocommerce-tabs ul.tabs li.active a {
  color: var(--fg);
  border-bottom-color: var(--accent-oklch);
}

/* Related products */
.related.products {
  margin-top: 60px;
  padding-top: 40px;
  border-top: 1px solid var(--border);
}
.related.products > h2 {
  font-size: 28px;
  margin-bottom: 20px;
}
.related.products ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 22px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.related.products ul.products li { width: auto !important; float: none !important; margin: 0 !important; }
/* Sacar el ::before/::after que Woo mete como clearfix en ul.products — toma
   un slot del grid y deja la primera columna vacía. */
.related.products ul.products::before,
.related.products ul.products::after {
  display: none !important;
  content: none !important;
}

@media (max-width: 900px) {
  .ngi-single-grid { grid-template-columns: 1fr; gap: 32px; }
  .related.products ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Ficha de producto en el celu: título/precio más chicos y ritmo de 20px.
   (Las pestañas se ajustan más abajo, DESPUÉS de sus reglas base, si no las pisa.) */
@media (max-width: 600px) {
  .ngi-single-wrap { padding-top: 20px; padding-bottom: 20px; }
  .ngi-single-grid { gap: 20px; }
  .ngi-single-title { font-size: 32px; }
  .ngi-single-price { font-size: 34px; }
  .ngi-single-shortdesc { margin-bottom: 20px; }
  .ngi-single-price-card { padding: 20px 0; margin-bottom: 20px; }
  .ngi-trust-badges { margin: 20px 0; }
  .related.products { margin-top: 20px; padding-top: 20px; }   /* era 60 + 40 = 100px arriba */
}

/* ============================================================
   WooCommerce — Cart
   ============================================================ */

.ngi-cart-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 40px;
  align-items: flex-start;
}
.ngi-cart-items { min-width: 0; }
/* Item del carrito con el MISMO diseño que el drawer (mini-cart): miniatura a la
   izquierda (alto de 2 filas); sku + nombre arriba; y stepper (izq) + precio/tacho
   (der) en la fila de abajo. Igual en compu y mobile. */
.ngi-cart-row {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 18px;
  row-gap: 12px;
  align-items: start;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}
.ngi-cart-row:first-child { border-top: 1px solid var(--border); }
.ngi-cart-row > .ngi-cart-thumb { grid-column: 1; grid-row: 1 / span 2; }
.ngi-cart-row > .ngi-cart-info { grid-column: 2 / -1; grid-row: 1; min-width: 0; overflow-wrap: break-word; }
.ngi-cart-row > .ngi-cart-qty { grid-column: 2; grid-row: 2; align-self: center; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.ngi-cart-row > .ngi-cart-price { grid-column: 3; grid-row: 2; align-self: center; white-space: nowrap; }
.ngi-cart-thumb img {
  width: 80px;
  height: 80px;
  border-radius: 6px;
  object-fit: cover;
  display: block;
}
/* El input del stepper en el carrito debe ser transparente (que el número se funda
   con el fondo del stepper, igual que en la ficha de producto). Sin esto, una regla
   vieja le ponía --bg y se veía un recuadro más oscuro alrededor del número. */
.ngi-cart-qty .quantity input.qty {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
/* "X disponibles" debajo del stepper, igual que en el drawer (.ngi-mini-stock-info). */
.ngi-cart-stock-info {
  font-size: 10.5px;
  color: var(--fg-subtle);
  font-family: var(--font-mono);
}
.ngi-cart-price { text-align: right; }
/* Tacho de basura IDÉNTICO al del drawer: gris, con padding + fondo gris y rojo
   al hover (mismo SVG con tapita, stroke 1.6, ver cart.php). Sin esto WC lo pinta
   rojo y sin el hover con fondo. */
.ngi-cart-items a.remove,
.woocommerce .ngi-cart-items a.remove {
  color: var(--fg-subtle) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Caja explícita 21x21 (border-box: 4px de padding + 13px del SVG). Sin esto,
     el inline-flex + font-size:0 dejaba el <a> en 8x8 y el SVG se dibujaba POR
     FUERA → el fondo del hover quedaba como un cuadradito de 8px casi invisible.
     Con la caja fija, el recuadro del hover se ve igual que en el drawer. */
  width: 21px !important;
  height: 21px !important;
  box-sizing: border-box !important;
  padding: 4px !important;
  margin: 4px 0 0 !important;
  border-radius: 4px;
  line-height: 1;
  font-size: 0 !important;
  text-decoration: none;
}
.ngi-cart-items a.remove:hover,
.woocommerce .ngi-cart-items a.remove:hover {
  background: var(--bg-muted) !important;
  color: var(--danger) !important;
}
/* El font-size:0 del link le colapsaba el ANCHO al SVG (quedaba 0x13 = invisible).
   Le forzamos el tamaño explícito. */
.ngi-cart-items a.remove svg {
  width: 13px !important;
  height: 13px !important;
  flex-shrink: 0;
}
/* Nombre del item: verde al hover, igual que en el drawer (.ngi-mini-name:hover). */
.ngi-cart-info a { transition: color 0.18s ease; }
.ngi-cart-info a:hover { color: var(--accent-oklch) !important; }
.ngi-cart-summary { position: sticky; top: 96px; }
/* EL bug del carrito: WooCommerce achica la caja de totales a width:48% + float:right
   dentro de .cart-collaterals, así que el "RESUMEN" quedaba en ~173px (de los 360px
   de la columna) → todo angosto y amontonado (Subtotal pegado al monto, envíos
   cortados). La forzamos a ocupar toda la columna. Confirmado en vivo con la extensión. */
.ngi-cart-summary .cart_totals,
.ngi-cart-summary .cart-collaterals .cart_totals,
.ngi-cart-summary .cart-collaterals .cross-sells {
  width: 100% !important;
  float: none !important;
}

@media (max-width: 900px) {
  .ngi-cart-layout { grid-template-columns: 1fr; gap: 24px; }
  .ngi-cart-summary { position: static; }
  /* La fila ya es drawer-like en el diseño base (sirve igual en mobile). Solo el
     cupón + "actualizar" no deben empujar el ancho: que envuelvan bien. */
  .ngi-cart-items > div[style*="flex-wrap"] > div { min-width: 0 !important; }
}

/* ============================================================
   WooCommerce — Checkout
   ============================================================ */

.ngi-checkout-layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: flex-start;
}
.ngi-checkout-main { min-width: 0; }

/* Notices/errores de WC dentro del checkout: por default los inserta como hijos
   directos del form (que es nuestro grid 2 cols), entonces ocupan un slot del
   grid y desfasan todo. Forzamos que spaneen las 2 columnas para que aparezcan
   arriba a todo el ancho y solo empujen las cosas hacia abajo, sin moverlas
   horizontalmente. */
.ngi-checkout-layout > .woocommerce-NoticeGroup,
.ngi-checkout-layout > .woocommerce-NoticeGroup-checkout,
.ngi-checkout-layout > .woocommerce-error,
.ngi-checkout-layout > .woocommerce-message,
.ngi-checkout-layout > .woocommerce-info,
.ngi-checkout-layout > ul.woocommerce-error {
  grid-column: 1 / -1;
  margin-bottom: 0;
}
/* Caja del resumen de pedido a la derecha. Usamos var(--bg-muted) para
   matchear EXACTO el color que usa Claude Design en su <aside> del checkout.
   border:0 explícito para que ningún CSS de Woo core agregue un borde feo.
   NO usamos position:sticky — queda estática en su lugar y se scrollea con
   el resto de la página, como prefiere el usuario. */
.ngi-checkout-summary {
  background: var(--bg-muted);
  padding: 26px;
  border-radius: 10px;
  border: 0;
}
.ngi-checkout-layout .col2-set {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.ngi-checkout-layout .col2-set .col-1,
.ngi-checkout-layout .col2-set .col-2 {
  width: 100% !important;
  float: none !important;
  padding: 0 !important;
}
.ngi-checkout-layout h3 {
  font-family: var(--font-display);
  font-size: 22px;
  margin: 0 0 14px;
  font-weight: 500;
}
.ngi-checkout-layout .form-row {
  margin: 0 0 14px;
  padding: 0;
  width: 100%;
}
.ngi-checkout-layout .form-row label {
  display: block;
  font-size: 12px;
  color: var(--fg-muted);
  margin-bottom: 6px;
  font-family: var(--font-sans);
}
.ngi-checkout-layout .form-row input.input-text,
.ngi-checkout-layout .form-row textarea,
.ngi-checkout-layout .form-row .select2-selection,
.ngi-checkout-layout .form-row select {
  width: 100% !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  padding: 10px 12px !important;
  font-size: 14px !important;
  background: var(--bg) !important;
  font-family: var(--font-sans) !important;
  height: auto !important;
  min-height: 42px;
  box-sizing: border-box;
}
.ngi-checkout-layout .form-row-first,
.ngi-checkout-layout .form-row-last {
  width: calc(50% - 8px) !important;
  float: none !important;
  display: inline-block;
  margin-right: 12px;
}
.ngi-checkout-layout .form-row-last { margin-right: 0; }
.ngi-checkout-layout #order_review_heading { display: none; }
.ngi-checkout-layout table.shop_table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-bottom: 14px;
}
.ngi-checkout-layout table.shop_table th,
.ngi-checkout-layout table.shop_table td {
  padding: 8px 0;
  text-align: left;
  border: 0;
}
/* Separador único antes de los totales (no entre cada fila) — matchea
   el estilo limpio del checkout summary de Claude Design. */
.ngi-checkout-layout table.shop_table tfoot tr:first-child th,
.ngi-checkout-layout table.shop_table tfoot tr:first-child td {
  border-top: 1px solid var(--border);
  padding-top: 14px;
}
.ngi-checkout-layout table.shop_table tfoot td,
.ngi-checkout-layout table.shop_table tfoot th { font-weight: 500; }
.ngi-checkout-layout .wc_payment_methods {
  list-style: none;
  padding: 0;
  margin: 14px 0;
}
.ngi-checkout-layout .wc_payment_method {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 8px;
}
html body .ngi-checkout-layout #place_order,
html body.woocommerce-checkout #place_order,
html body #place_order.button {
  width: 100% !important;
  background: var(--accent-oklch) !important;
  color: #fff !important;
  border: 0 !important;
  height: 52px !important;
  border-radius: 8px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  font-family: var(--font-sans) !important;
  cursor: pointer;
  margin-top: 14px;
  letter-spacing: 0 !important;
  text-transform: none !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}
html body .ngi-checkout-layout #place_order:hover,
html body.woocommerce-checkout #place_order:hover,
html body #place_order.button:hover {
  background: var(--accent-hover) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
html body .ngi-checkout-layout #place_order:active,
html body.woocommerce-checkout #place_order:active,
html body #place_order.button:active {
  transform: translateY(0);
  box-shadow: none;
}
html body .ngi-checkout-layout #place_order::after {
  content: "→";
  font-size: 16px;
}

/* Título del checkout (antes inline style, no se achicaba en mobile). */
.ngi-checkout-title { font-size: 48px; margin: 12px 0 40px; }

@media (max-width: 900px) {
  .ngi-checkout-layout { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 600px) {
  .ngi-checkout-title { font-size: 34px; margin: 12px 0 0; }
  .ngi-checkout-empty-title { font-size: 30px; }
}

/* ============================================================
   WooCommerce — Custom review-order (sidebar del checkout)
   Layout estilo Claude Design: items como cards (thumbnail + qty
   badge + nombre + SKU + precio), totales prolijos, Total destacado.
   ============================================================ */

.ngi-review-items {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 20px;
}
.ngi-review-item {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 12px;
  align-items: start;
}
.ngi-review-thumb {
  position: relative;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}
.ngi-review-thumb img,
.ngi-review-thumb .placeholder-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 4px;
}
.ngi-review-info {
  min-width: 0;
}
.ngi-review-name {
  font-size: 13px;
  line-height: 1.3;
  color: var(--fg);
}
.ngi-review-sku {
  font-size: 11px;
  color: var(--fg-subtle);
  margin-top: 2px;
}
/* Fila stepper + eliminar abajo del nombre/SKU */
.ngi-review-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.ngi-review-controls .ngi-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  height: 28px;
}
.ngi-review-controls .ngi-qty.is-loading { opacity: 0.55; pointer-events: none; }
.ngi-review-controls .ngi-qty-btn {
  background: transparent;
  border: 0;
  color: var(--fg);
  width: 26px;
  height: 26px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ngi-review-controls .ngi-qty-btn:hover { background: var(--bg-muted); }
.ngi-review-controls .ngi-qty-val {
  min-width: 22px;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--fg);
}
.ngi-review-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  color: var(--fg-subtle);
  text-decoration: none;
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.ngi-review-remove:hover {
  color: var(--danger);
  background: var(--danger-soft);
}
.ngi-review-stock-info {
  font-size: 10.5px;
  color: var(--fg-subtle);
  font-family: var(--font-mono);
  margin-top: 4px;
}
.ngi-review-price {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
  text-align: right;
  white-space: nowrap;
}

.ngi-review-totals {
  border-top: 1px solid var(--border);
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
}
.ngi-review-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.ngi-review-line .muted,
.ngi-review-line span:first-child {
  color: var(--fg-muted);
}
.ngi-review-line span:last-child {
  color: var(--fg);
}

/* Múltiples métodos de envío → select nativo, opción "Método — $costo" */
.ngi-review-shipping-select {
  margin: 8px 0 12px;
}
.ngi-review-shipping-select select.ngi-shipping-method-select {
  width: 100%;
  font-size: 14px;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--fg);
  cursor: pointer;
  height: 46px;
  box-sizing: border-box;
}
.ngi-review-shipping-select select.ngi-shipping-method-select:focus {
  outline: 2px solid var(--accent-oklch);
  outline-offset: -1px;
  border-color: transparent;
}
/* El <select> nativo abre una lista fea (la del SO en el celu / la del browser en
   compu). Igual que en "Motivo", lo ocultamos SIEMPRE y mostramos un desplegable
   custom (botón + lista) que arma el JS, en mobile y en compu. */
.ngi-shipping-dd { position: relative; }
.ngi-shipping-dd .ngi-shipping-method-select { display: none; }
.ngi-shipping-dd-list { display: none; }
.ngi-shipping-dd-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 8px;
  padding: 12px 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  color: var(--fg);
  font-family: var(--font-sans);
  text-align: left;
  cursor: pointer;
}
.ngi-shipping-dd-btn span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ngi-shipping-dd-btn svg { flex-shrink: 0; color: var(--fg-muted); }
.ngi-shipping-dd-list.is-open {
  display: block;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  margin: 0;
  list-style: none;
  z-index: 60;
}
.ngi-shipping-dd-opt {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 12px 14px;
  border-radius: 6px;
  font-size: 15px;
  color: var(--fg);
  font-family: var(--font-sans);
  cursor: pointer;
}
.ngi-shipping-dd-opt:hover { background: var(--bg-muted); }
.ngi-shipping-dd-opt.is-active { background: var(--accent-soft); color: var(--accent-bright); }

/* Total final destacado en font-display */
.ngi-review-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--fg);
}

/* Cobertura para Woo Blocks (Gutenberg-based cart/checkout):
   si el sitio usa los blocks nuevos en lugar del shortcode clásico, los
   templates PHP del tema no aplican. Estos selectores cubren los wrappers
   de "totals/order summary" del lado de blocks para que también se vean
   con el mismo recuadro gris. */
.wp-block-woocommerce-cart-totals-block,
.wp-block-woocommerce-checkout-totals-block,
.wc-block-cart__totals,
.wc-block-checkout__sidebar,
.wc-block-components-totals-wrapper,
.wc-block-components-sidebar-layout .wc-block-components-sidebar {
  background: var(--bg-muted) !important;
  padding: 26px !important;
  border-radius: 10px !important;
  border: 0 !important;
}

/* ============================================================
   WooCommerce — My Account
   ============================================================ */

/* Título "Mi cuenta" del área logueada (antes inline style, no se achicaba). */
.ngi-account-title { font-size: 52px; margin: 12px 0 40px; }
.ngi-account-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 20px;
  align-items: flex-start;
}
/* Content area de Mi Cuenta: forzamos width 100% del grid cell + sacamos float
   y max-width que Woo aplica por default a .woocommerce-MyAccount-content (que
   por compatibilidad con themes viejos viene con width:75% y float:right). */
.ngi-account-content,
.woocommerce-MyAccount-content {
  min-width: 0;
  width: 100% !important;
  float: none !important;
  max-width: none !important;
}

/* Sidebar items: forzamos width 100% + box-sizing border-box para que el highlight
   del item activo (background var(--bg-muted)) cubra TODO el ancho de la columna
   y no quede como un bloque chico ajustado al texto. Usamos !important + selector
   con elemento (a.nav-link) para ganar specificity contra cualquier estilo inline
   o regla de Woo que limite el ancho. */
.woocommerce-MyAccount-navigation {
  width: 100% !important;
  box-sizing: border-box !important;
}
.woocommerce-MyAccount-navigation a.nav-link {
  width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
}

@media (max-width: 900px) {
  .ngi-account-layout { grid-template-columns: 1fr; }
  /* Red de seguridad: si "Mis lotes" (endpoint de un plugin) trae algo ancho que
     NO sea una tabla estándar, al menos que se pueda scrollear y no quede cortado. */
  .woocommerce-MyAccount-content { overflow-x: auto; }
}

/* "Mis lotes" (plugin AXTOR) en el celu: la tabla se apila como tarjetas, una por
   lote. Los <td> no traen data-title, así que inyectamos las etiquetas por posición
   (columnas: Nombre · Fecha · Ha perímetro · Ha trabajadas · Archivos · Acciones).
   Apuntamos solo a las filas con data-lote-id (las de AXTOR) para no tocar nada más. */
@media (max-width: 700px) {
  .woocommerce-MyAccount-content table,
  .woocommerce-MyAccount-content tbody,
  .woocommerce-MyAccount-content tr,
  .woocommerce-MyAccount-content td { display: block; }
  .woocommerce-MyAccount-content thead { display: none; }
  .woocommerce-MyAccount-content table { border: 0; width: 100%; }

  .woocommerce-MyAccount-content tr[data-lote-id] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin: 0 0 12px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-elevated);
  }
  .woocommerce-MyAccount-content tr[data-lote-id] td { flex: 0 0 100%; padding: 0; border: 0; }

  /* Nombre = título de la tarjeta */
  .woocommerce-MyAccount-content tr[data-lote-id] td:nth-child(1) {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 17px;
    line-height: 1.2;
  }
  /* Fecha = subtítulo, con línea que separa el encabezado del cuerpo */
  .woocommerce-MyAccount-content tr[data-lote-id] td:nth-child(2) {
    color: var(--fg-muted);
    font-size: 13px;
    margin-top: 2px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
  }
  /* Ha perímetro / Ha trabajadas = etiqueta a la izquierda, valor a la derecha */
  .woocommerce-MyAccount-content tr[data-lote-id] td:nth-child(3),
  .woocommerce-MyAccount-content tr[data-lote-id] td:nth-child(4) {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: 14px;
    padding-top: 10px;
  }
  .woocommerce-MyAccount-content tr[data-lote-id] td:nth-child(3)::before { content: "Ha perímetro"; color: var(--fg-muted); }
  .woocommerce-MyAccount-content tr[data-lote-id] td:nth-child(4)::before { content: "Ha trabajadas"; color: var(--fg-muted); }
  /* Archivos (izquierda, crece a lo ancho) + Acciones (derecha) comparten renglón,
     con un separador arriba que cruza toda la tarjeta. */
  .woocommerce-MyAccount-content tr[data-lote-id] td.axtor-files,
  .woocommerce-MyAccount-content tr[data-lote-id] td.axtor-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
  }
  .woocommerce-MyAccount-content tr[data-lote-id] td.axtor-files { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; }
  .woocommerce-MyAccount-content tr[data-lote-id] td.axtor-actions { flex: 0 0 auto; justify-content: flex-end; }
}

/* Cards de pedidos en /mi-cuenta/orders/: en mobile colapsan a 1 columna
   con todo apilado vertical para que se lea bien sin scroll horizontal. */
@media (max-width: 700px) {
  /* Card de pedido en el celu (la usan tanto la página de Pedidos como
     "Tus últimos pedidos" del Inicio): la info va apilada a la izquierda
     (nº/fecha, items, estado) y el precio + "Ver detalle" a la derecha,
     centrado vertical. Así no quedan huecos raros. */
  .ngi-order-card {
    grid-template-columns: 1fr auto !important;
    gap: 8px 16px !important;
    align-items: start !important;
  }
  .ngi-order-card > div:nth-child(1) { grid-column: 1; grid-row: 1; }
  .ngi-order-card > div:nth-child(2) { grid-column: 1; grid-row: 2; }
  .ngi-order-card > div:nth-child(3) { grid-column: 1; grid-row: 3; }
  .ngi-order-card > div:nth-child(4) { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
}

/* Cards de direcciones en /mi-cuenta/edit-address/.
   Grid responsive: 1 col en mobile, 2 cols cuando hay espacio. Cada card tiene
   título arriba con botón "Editar" alineado derecha, dirección abajo en muted. */
/* Stats grid del Dashboard de Mi Cuenta. auto-fit con minmax para que se acomode
   solo según cuántas cards haya (2 o 3 según si hay pedidos en proceso). En
   pantallas chicas colapsa a 1 columna naturalmente. */
.ngi-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.ngi-addresses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.ngi-address-card {
  padding: 24px;
}
.ngi-address-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin-bottom: 14px;
  gap: 12px;
}
.ngi-address-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  margin: 0;
  line-height: 1.2;
  color: var(--fg);
}
.ngi-address-body {
  font-style: normal;
  color: var(--fg-muted);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}
.ngi-address-body .ngi-addr-line {
  margin: 0;
}
.ngi-address-body .ngi-addr-name {
  color: var(--fg);
  font-weight: 600;
  margin-bottom: 2px;
}
.ngi-address-body .ngi-addr-lbl {
  color: var(--fg-subtle);
  font-weight: 500;
}
.ngi-address-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.ngi-delete-shipping-form {
  margin: 0;
  display: inline;
}
.ngi-btn-danger {
  color: #fff !important;
  border-color: transparent !important;
  background: var(--danger-btn) !important;
}
.ngi-btn-danger:hover {
  color: #fff !important;
  background: var(--danger-btn-hover) !important;
}
.ngi-address-empty {
  color: var(--fg-subtle);
  font-size: 14px;
  margin: 0 0 16px;
  line-height: 1.5;
}

/* Forms dentro de Mi Cuenta (form-edit-address, form-edit-account, etc.):
   estilamos los campos para que matcheen el resto del tema. Es el mismo set
   de reglas que usa el checkout, pero scoped a .ngi-account-content así
   aplican automáticamente a cualquier form que aparezca en el área de cuenta. */
.ngi-account-content .form-row {
  margin: 0 0 14px;
  padding: 0;
  width: 100%;
}
.ngi-account-content .form-row label {
  display: block;
  font-size: 12px;
  color: var(--fg-muted);
  margin-bottom: 6px;
  font-family: var(--font-sans);
}
.ngi-account-content .form-row input.input-text,
.ngi-account-content .form-row textarea,
.ngi-account-content .form-row .select2-selection,
.ngi-account-content .form-row select {
  width: 100% !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  padding: 10px 12px !important;
  font-size: 14px !important;
  background: var(--bg) !important;
  font-family: var(--font-sans) !important;
  height: auto !important;
  min-height: 42px;
  box-sizing: border-box;
}
.ngi-account-content .form-row-first,
.ngi-account-content .form-row-last {
  width: calc(50% - 8px) !important;
  float: none !important;
  display: inline-block;
  margin-right: 12px;
  vertical-align: top;
}
.ngi-account-content .form-row-last {
  margin-right: 0;
}

/* ============================================================
   Single product — Tabs custom
   Especificaciones / Descripción / Incluye / Compatibilidad
   ============================================================ */

.woocommerce-tabs.wc-tabs-wrapper {
  margin-top: 36px;
  border-top: 0 !important;
  padding-top: 0 !important;
}
.woocommerce-tabs ul.tabs {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 24px !important;
  display: flex !important;
  gap: 2px !important;
  border-bottom: 1px solid var(--border) !important;
  flex-wrap: wrap;
  position: relative;
  background: transparent !important;
}
.woocommerce-tabs ul.tabs::before,
.woocommerce-tabs ul.tabs::after {
  display: none !important;
  content: none !important;
  border: 0 !important;
}
.woocommerce-tabs ul.tabs li {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  list-style: none !important;
  position: static !important;
  box-shadow: none !important;
}
.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after {
  display: none !important;
  content: none !important;
  border: 0 !important;
}
.woocommerce-tabs ul.tabs li a {
  display: block;
  padding: 10px 18px !important;
  color: var(--fg-muted);
  text-decoration: none;
  font-size: 14px;
  font-family: var(--font-sans);
  font-weight: 500;
  text-transform: none !important;
  letter-spacing: 0;
  border-bottom: 4px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
  text-shadow: none !important;
}
/* Hover: verde de marca, así el cambio se nota (antes pasaba a casi-negro y
   apenas se distinguía del estado normal). */
.woocommerce-tabs ul.tabs li a:hover {
  color: var(--accent-bright) !important;
  border-bottom-color: color-mix(in oklab, var(--accent-oklch) 40%, transparent) !important;
}
.woocommerce-tabs ul.tabs li.active {
  background: transparent !important;
  border: 0 !important;
}
.woocommerce-tabs ul.tabs li.active a {
  color: var(--fg) !important;
  border-bottom-color: var(--accent-oklch) !important;
}
/* Tema oscuro: las pestañas inactivas un poco más claras (se leían apagadas)
   y el hover en verde brillante para que resalte sobre el fondo oscuro.
   !important para ganarle al CSS propio de WooCommerce, que carga después. */
[data-theme="dark"] .woocommerce-tabs ul.tabs li a { color: oklch(0.86 0.01 85) !important; }
[data-theme="dark"] .woocommerce-tabs ul.tabs li a:hover { color: var(--accent-bright) !important; }
[data-theme="dark"] .woocommerce-tabs ul.tabs li.active a { color: var(--fg) !important; }

/* Pestañas en el celu: compactas (los nombres largos se abrevian por JS para que
   entren las 4 en un renglón). Va DESPUÉS de las reglas base para no ser pisado. */
@media (max-width: 600px) {
  .woocommerce-tabs.wc-tabs-wrapper { margin-top: 20px; }
  .woocommerce-tabs ul.tabs { margin-bottom: 20px !important; }
  .woocommerce-tabs ul.tabs li a { padding: 10px 12px !important; font-size: 13px; }
}

.woocommerce-Tabs-panel {
  padding: 8px 0 0;
}
/* WooCommerce le mete margin: 0 0 2em al panel de la pestaña por defecto. Lo
   anulamos (la separación con lo de abajo ya la maneja .related.products). */
.woocommerce div.product .woocommerce-tabs .panel { margin: 0 !important; }
.woocommerce-Tabs-panel h2 {
  display: none; /* WC a veces agrega un h2 con el título del tab — redundante */
}
/* Descripción: viñetas con un poco de aire entre sí (sin afectar la lista de "Incluye") */
.ngi-tab-desc ul {
  margin: 6px 0 0;
  padding-left: 20px;
}
.ngi-tab-desc ul li {
  margin-bottom: 12px;
  line-height: 1.5;
}
.ngi-tab-desc ul li:last-child {
  margin-bottom: 0;
}

/* Tab Especificaciones — tabla key/value estilo Claude Design */
.ngi-specs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.ngi-specs-table tr {
  border-bottom: 1px solid var(--border);
}
.ngi-specs-table tr:last-child {
  border-bottom: 0;
}
.ngi-specs-table td {
  padding: 10px 0;
  color: var(--fg);
}
.ngi-specs-table td:first-child {
  color: var(--fg-muted);
  width: 40%;
}
.ngi-specs-table td:last-child {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.02em;
}

/* Tab Descripción */
.ngi-tab-desc {
  font-size: 15px;
  color: var(--fg-muted);
  line-height: 1.65;
}
.ngi-tab-desc p:first-child { margin-top: 0; }
.ngi-tab-desc p:last-child  { margin-bottom: 0; }

/* Tab Incluye — lista con tildes */
.ngi-includes-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ngi-includes-list li {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 14px;
  color: var(--fg);
}
.ngi-includes-list li svg {
  color: var(--accent-oklch);
  flex-shrink: 0;
}
/* Subtítulo dentro de "Incluye" (líneas que empiezan con ## en el meta) */
.ngi-includes-list li.ngi-includes-header {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-top: 8px;
}
.ngi-includes-list li.ngi-includes-header:first-child {
  margin-top: 0;
}

/* Tab Compatibilidad — badges */
.ngi-compat-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.ngi-compat-badges .badge {
  padding: 8px 14px;
  font-size: 12px;
}
/* Badge de compatibilidad que linkea a un producto */
.ngi-compat-link {
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.ngi-compat-link:hover {
  background: var(--accent-soft);
  color: var(--accent-bright);
}

/* Login / Registro: card centrada horizontalmente. No agregamos padding propio
   acá porque page.php (la plantilla de WP que envuelve la página) ya da 48px
   arriba y 80px abajo. Solo seteamos el ancho máximo y el centrado. */
.ngi-login-wrapper {
  padding: 0;
}
.ngi-login-inner {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}
.ngi-login-card { padding: 36px; }

/* Mi Cuenta / Login en mobile: título de cuenta responsive, ritmo 20px en el
   wrapper de page.php (cuenta/carrito/checkout) y card de login más ajustada
   (el .container ya da margen lateral, no hace falta el padding extra del inner). */
@media (max-width: 600px) {
  .ngi-page-wrap { padding-top: 20px; padding-bottom: 20px; }
  /* En celu el carrito sigue el ritmo mobile de 20px (la regla de compu de 40px
     es más específica, así que la pisamos acá para no romperlo). */
  body.woocommerce-cart .ngi-page-wrap { padding-bottom: 20px; }
  body.woocommerce-order-received .ngi-page-wrap { padding-bottom: 20px; }
  .ngi-page-title { font-size: 34px; }
  .ngi-account-title { font-size: 34px; margin: 12px 0 20px; }
  .ngi-login-card { padding: 24px; }
  .ngi-login-inner { padding: 0; }
  .ngi-login-logo { display: none; }   /* en el celu no hace falta el logo arriba; en compu queda */
}
/* Reset del border/padding/margin que Woo agrega por default a estos forms.
   El card ya provee el wrapper visual, no queremos otra capa adentro. */
.ngi-login-wrapper .woocommerce-form-login,
.ngi-login-wrapper .woocommerce-form-register {
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* "Cambiar contraseña" colapsable en form-edit-account: estilo del <summary> */
.ngi-account-content details.ngi-password-toggle summary {
  cursor: pointer;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  color: var(--fg);
  padding: 6px 0;
  list-style-position: outside;
  user-select: none;
}
.ngi-account-content details.ngi-password-toggle summary:hover {
  color: var(--accent-oklch);
}

/* Mensajes Woo (notices) */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  padding: 14px 18px;
  border-radius: 8px;
  margin-bottom: 20px;
  font-size: 14px;
  list-style: none;
  border: 0 !important;                /* saca el border-top 3px de color hardcodeado de Woo */
  border-left: 3px solid !important;   /* nuestra rayita izquierda; el color lo pone cada tipo */
  box-shadow: none !important;
}
/* Verde apagado sobre verde-soft era ILEGIBLE (ej: aviso "... eliminado.
   Deshacer?" del carrito). Texto en --fg (casi blanco); el verde lo dan el fondo
   y la rayita izquierda. */
.woocommerce-message { background: var(--accent-soft); color: var(--fg); border-left-color: var(--accent-oklch) !important; }
.woocommerce-message li { color: var(--fg); background: transparent; border: 0; }
.woocommerce-info    { background: var(--bg-muted); color: var(--fg); border-left-color: var(--fg-subtle) !important; }
.woocommerce-error   { background: var(--danger-soft); border-left-color: var(--danger-btn) !important; }
.woocommerce-error, .woocommerce-error li { color: var(--danger-btn) !important; }
/* Link "Deshacer?" (undo del item eliminado): venía igual que el texto (mismo
   verde, sin subrayado) → no parecía botón. Lo hacemos botón outlined que se
   rellena de verde al hover. Selector descendiente → sirve para <div> y <ul><li>. */
.woocommerce-message .restore-item {
  display: inline-block;
  margin-left: 10px;
  padding: 3px 12px;
  border-radius: 6px;
  border: 1px solid var(--accent-bright);
  background: transparent;
  color: var(--fg) !important;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none !important;
  vertical-align: middle;
  transition: background 0.15s ease, color 0.15s ease;
}
.woocommerce-message .restore-item:hover {
  background: var(--accent-bright);
  color: #fff !important;
}
/* Asterisco de campo obligatorio (*): Woo lo pinta con su rojo default; lo pasamos
   al rojo de nuestro sistema. */
.required, abbr.required { color: var(--danger-btn) !important; border: 0; }
/* WooCommerce usa su propia variable --wc-red para TODOS sus rojos (mensaje de
   error inline del checkout, label de campo inválido, asterisco, etc.). La
   apuntamos a nuestro rojo → un solo sistema de rojo en todo el sitio. */
:root { --wc-red: var(--danger-btn) !important; }
.checkout-inline-error-message { color: var(--danger-btn) !important; }
/* Sacamos el ícono default de WooCommerce en los notices: es un glifo de su font
   que el estilo limpio del tema no contempla y queda flotando arriba del texto. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { display: none !important; }

/* Recordatorio de login arriba del checkout ("¿Ya tenés cuenta? Ingresá"). */
.woocommerce-form-login-toggle { margin-bottom: 20px; }
.woocommerce-form-login-toggle .woocommerce-info {
  margin: 0;
  color: var(--fg-muted);
}
.woocommerce-form-login-toggle .woocommerce-info a.showlogin {
  color: var(--accent-bright);
  font-weight: 600;
  text-decoration: none;
}
.woocommerce-form-login-toggle .woocommerce-info a.showlogin:hover { text-decoration: underline; }
/* Form de login desplegado en el checkout (al tocar "Ingresá"). Scoped a checkout
   para no tocar el form de la página de login, que tiene su propio estilo. */
body.woocommerce-checkout .woocommerce-form-login {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 24px;
}
body.woocommerce-checkout .woocommerce-form-login .form-row { margin: 0 0 14px; padding: 0; }
body.woocommerce-checkout .woocommerce-form-login label {
  display: block;
  font-size: 12px;
  color: var(--fg-muted);
  margin-bottom: 6px;
}
body.woocommerce-checkout .woocommerce-form-login input.input-text {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--fg);
  font-size: 14px;
  box-sizing: border-box;
}
body.woocommerce-checkout .woocommerce-form-login input.input-text:focus {
  outline: none;
  border-color: var(--accent-oklch);
}
body.woocommerce-checkout .woocommerce-form-login .button {
  background: var(--accent-oklch);
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 11px 22px;
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}
body.woocommerce-checkout .woocommerce-form-login .button:hover { background: var(--accent-hover); transform: translateY(-2px); box-shadow: var(--shadow); }
body.woocommerce-checkout .woocommerce-form-login .button:active { transform: translateY(0); box-shadow: none; }

/* Botón de WhatsApp Ventas dentro de la descripción de "Transferencia bancaria".
   Abre WhatsApp (celu) o WhatsApp Web (compu) con un mensaje pre-armado. */
.ngi-bacs-wa {
  display: flex;
  width: fit-content;
  margin: 16px auto 0;   /* centrado horizontal + separación del texto de arriba */
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 999px;
  background: var(--accent-bright);   /* mismo verde del footer (token del tema, parejo entre pantallas) */
  color: #fff;
  border: 0;
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}
.ngi-bacs-wa:hover { background: color-mix(in oklch, var(--accent-bright) 90%, black); transform: translateY(-2px); box-shadow: var(--shadow); }
.ngi-bacs-wa:active { transform: translateY(0); box-shadow: none; }
.ngi-bacs-wa svg { flex-shrink: 0; }

/* ---------- Página de "Gracias" (thank-you) ----------
   Estilos movidos desde inline a clases. TODO el padding (vertical y lateral) lo
   da .ngi-page-wrap (page.php), que ya envuelve la página: 40px arriba/abajo en
   compu (bottom scopeado a order-received) y 20px en celu. Acá anulamos el padding
   de .container-narrow para no duplicarlo (mismo criterio que el carrito). */
.ngi-thankyou { padding: 0; }
.ngi-ty-icon {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-oklch);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 24px;
}
.ngi-ty-title { font-size: 52px; margin: 0 0 16px; line-height: 1.1; }
.ngi-ty-msg {
  font-size: 17px; color: var(--fg-muted);
  max-width: 480px; margin: 0 auto 30px; line-height: 1.5;
}
.ngi-ty-msg strong { overflow-wrap: anywhere; }   /* emails largos no rompen el layout */
.ngi-ty-order {
  padding: 24px 32px; background: var(--bg-muted); border-radius: 10px;
  display: inline-block; max-width: 100%; box-sizing: border-box;
  margin-bottom: 30px;
}
.ngi-ty-order-label { font-size: 11px; color: var(--fg-muted); letter-spacing: 0.08em; }
.ngi-ty-order-num { font-family: var(--font-display); font-size: 32px; margin-top: 4px; line-height: 1; }
.ngi-ty-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 30px; }
.ngi-thankyou-extras { margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--border); }

/* Tarjeta "Datos para transferir" (BACS) en la página de gracias — reemplaza la
   tabla default europea de Woo por una tarjeta con el estilo del tema + copiar. */
.ngi-pay-card {
  max-width: 440px; margin: 0 auto; text-align: left;
  border: 1px solid var(--border); border-radius: 12px;
  padding: 26px 28px; background: var(--bg);
}
.ngi-pay-title { font-family: var(--font-display); font-size: 21px; margin: 0 0 6px; line-height: 1.2; }
.ngi-pay-sub { font-size: 14px; color: var(--fg-muted); margin: 0 0 20px; line-height: 1.5; }
.ngi-pay-total {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 14px 16px; margin-bottom: 8px; border-radius: 8px;
  /* Verde sólido (mismo del footer/WhatsApp) con texto blanco: antes era verde
     claro con texto verde y se leía mal. Ahora destaca fuerte y parejo. */
  background: var(--accent-bright);
}
.ngi-pay-total-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; opacity: 0.85; }
.ngi-pay-total-value { font-family: var(--font-display); font-size: 22px; color: #fff; white-space: nowrap; }
.ngi-pay-field { padding: 13px 0; border-top: 1px solid var(--border); }
.ngi-pay-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-subtle); margin-bottom: 5px; }
.ngi-pay-valrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ngi-pay-value { font-family: var(--font-mono); font-size: 15px; color: var(--fg); word-break: break-all; }
.ngi-pay-copy {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 11px; border: 1px solid var(--border); border-radius: 7px;
  background: var(--bg-muted); color: var(--fg-muted);
  font-family: var(--font-sans); font-size: 12px; font-weight: 600; cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.ngi-pay-copy:hover { border-color: var(--accent-oklch); color: var(--accent-oklch); }
.ngi-pay-copy.is-copied { border-color: var(--accent-oklch); color: var(--accent-oklch); background: var(--accent-soft); }
.ngi-pay-copy svg { flex-shrink: 0; }
.ngi-pay-wa { margin-top: 22px; }   /* .ngi-bacs-wa ya centra con margin auto */

@media (max-width: 600px) {
  .ngi-ty-icon { width: 60px; height: 60px; margin-bottom: 18px; }
  .ngi-ty-title { font-size: 34px; }
  .ngi-ty-msg { font-size: 15px; margin-bottom: 26px; }
  .ngi-ty-order { padding: 18px 24px; margin-bottom: 26px; }
  .ngi-ty-order-num { font-size: 26px; }
  .ngi-ty-actions { margin-bottom: 20px; }
  .ngi-thankyou-extras { margin-top: 20px; padding-top: 20px; }
  .ngi-pay-card { padding: 22px 18px; }
  .ngi-pay-total-value { font-size: 20px; }
}

/* ============================================================
   Checkboxes del checkout (¿Crear una cuenta?, ¿Enviar a una dirección
   diferente?, términos): al estilo del tema. Reemplazamos el checkbox celeste
   default del navegador por una caja redondeada con tilde blanco sobre el verde
   de acento cuando está marcado.
   ============================================================ */
.ngi-checkout-layout .input-checkbox {
  appearance: none;
  -webkit-appearance: none;
  /* display:inline-flex con !important porque WC core pone
     .form-row .input-checkbox { display:inline } y un input inline ignora
     width/height (la caja colapsaba en "¿Crear una cuenta?"). El flex además
     centra el tilde solo. */
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  border: 2px solid var(--border-strong);
  border-radius: 6px;
  background: var(--bg-elevated);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.ngi-checkout-layout .input-checkbox:hover { border-color: var(--accent-oklch); }
.ngi-checkout-layout .input-checkbox:checked {
  background: var(--accent-oklch);
  border-color: var(--accent-oklch);
}
.ngi-checkout-layout .input-checkbox:checked::after {
  content: "";
  width: 5px;
  height: 10px;
  margin-top: -2px;   /* sube el tilde para centrarlo ópticamente */
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.ngi-checkout-layout .input-checkbox:focus-visible {
  outline: 2px solid var(--accent-oklch);
  outline-offset: 2px;
}
/* Checkbox + texto del label alineados en una fila. El texto va igual que los
   <h3> del checkout (font-display, 22px, weight 500) para que "¿Crear una cuenta?"
   quede idéntico a "¿Enviar a una dirección diferente?".
   display:flex e line-height con !important porque "¿Crear una cuenta?" vive en un
   .form-row y WC deja ese label como inline (default) con line-height:2 (44px),
   pisando nuestro flex → el gap:10px no aplicaba y quedaba desalineado. */
.ngi-checkout-layout label.woocommerce-form__label-for-checkbox {
  display: flex !important;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2 !important;
  color: var(--fg);
  margin: 0;
}
/* "¿Enviar a una dirección diferente?" es un <h3> (no un .form-row), así que le
   falta la sangría de 3px que WC (.woocommerce form .form-row{padding:3px}) le da
   a los campos y a "¿Crear una cuenta?". Se la agregamos para que alinee. */
.ngi-checkout-layout #ship-to-different-address { padding-left: 3px; }
/* Aclaración gris debajo de "¿Crear una cuenta?" (alineada con la fila del checkbox). */
.ngi-checkout-layout .ngi-createaccount-hint {
  margin: 6px 0 0;
  padding-left: 3px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--fg-muted);
}

/* ============================================================
   Campos inválidos (validación de WooCommerce) con el estilo del
   tema en vez del rojo default. Aplica en checkout y en las formas
   de la cuenta (Datos, Direcciones). WC agrega .woocommerce-invalid
   a la .form-row cuando falta o está mal un campo requerido.
   ============================================================ */
.ngi-checkout-layout .form-row.woocommerce-invalid input.input-text,
.ngi-checkout-layout .form-row.woocommerce-invalid textarea,
.ngi-checkout-layout .form-row.woocommerce-invalid select,
.ngi-checkout-layout .form-row.woocommerce-invalid .select2-selection,
.ngi-account-content .form-row.woocommerce-invalid input.input-text,
.ngi-account-content .form-row.woocommerce-invalid textarea,
.ngi-account-content .form-row.woocommerce-invalid select {
  border-color: var(--danger-strong) !important;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--danger-strong) 15%, transparent) !important;
}

/* ============================================================
   Modal de confirmación custom (reemplaza el confirm() nativo).
   Se usa vía window.ngiConfirm({...}) — ver includes/inline-scripts.php.
   ============================================================ */
.ngi-confirm-overlay {
  position: fixed;
  inset: 0;
  background: color-mix(in oklch, var(--fg) 30%, transparent);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, visibility 0.18s ease;
  z-index: 200;
}
.ngi-confirm-overlay.is-open { opacity: 1; visibility: visible; }
.ngi-confirm-box {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  padding: 26px;
  max-width: 400px;
  width: 100%;
  transform: translateY(8px);
  transition: transform 0.18s ease;
}
.ngi-confirm-overlay.is-open .ngi-confirm-box { transform: translateY(0); }
.ngi-confirm-title {
  font-family: var(--font-display);
  font-size: 22px;
  margin: 0 0 8px;
  color: var(--fg);
}
.ngi-confirm-msg {
  color: var(--fg-muted);
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 22px;
}
.ngi-confirm-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.ngi-confirm-actions .ngi-confirm-ok.ngi-danger {
  background: var(--danger-btn);
  color: #fff;
  border: 0;
}
.ngi-confirm-actions .ngi-confirm-ok.ngi-danger:hover { background: var(--danger-btn-hover); }
@media (max-width: 480px) {
  .ngi-confirm-actions { flex-direction: column-reverse; }
  .ngi-confirm-actions .btn { width: 100%; justify-content: center; }
}

/* ============================================================
   Mini-cart drawer (panel lateral del carrito)
   ============================================================ */

.ngi-cart-overlay {
  position: fixed;
  inset: 0;
  background: color-mix(in oklch, var(--fg) 25%, transparent);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s, visibility 0.25s;
  z-index: 9998;
}
.ngi-cart-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.ngi-cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 440px;
  height: 100vh;
  height: 100dvh;   /* dvh = altura REAL visible en mobile (100vh se metía debajo de la barra del navegador y tapaba el subtotal/botón) */
  background: var(--bg-elevated);
  box-shadow: -12px 0 40px oklch(0.2 0.01 85 / 0.12);
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 9999;
  display: flex;
  flex-direction: column;
}
.ngi-cart-drawer.is-open {
  transform: translateX(0);
}

.ngi-cart-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 28px;
  border-bottom: 1px solid var(--border);
}
.ngi-cart-drawer-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.ngi-cart-drawer-count {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-muted);
  font-weight: 400;
}
.ngi-cart-drawer-close {
  background: transparent;
  border: 0;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-muted);
}
.ngi-cart-drawer-close:hover { background: var(--bg-muted); color: var(--fg); }

.ngi-cart-drawer-body {
  flex: 1;
  overflow: hidden;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* Lista de items del mini-cart de Woo: scroll propio, ocupa todo el espacio
   disponible y deja al subtotal/botones pegados al fondo del drawer. */
.ngi-cart-drawer-body ul.woocommerce-mini-cart,
.ngi-cart-drawer-body ul.cart_list {
  list-style: none;
  padding: 8px 28px;
  margin: 0;
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;   /* el scroll de la lista no se filtra al fondo */
}
.ngi-cart-drawer-body ul.woocommerce-mini-cart li.mini_cart_item {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 20px;
  align-items: start;
  padding: 0;
  border-bottom: 1px solid var(--border);
}
/* Thumbnail (col 1) */
.ngi-mini-thumb {
  grid-column: 1;
  display: block;
  width: 80px;
  height: 80px;
  border-radius: 6px;
  overflow: hidden;
}
.ngi-mini-thumb img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  position: static !important;
  inset: auto !important;
}
/* Content stack (col 2): SKU, nombre, fila qty+precio */
.ngi-mini-content {
  grid-column: 2;
  min-width: 0; /* permite truncate */
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ngi-mini-sku {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-subtle);
  letter-spacing: 0.02em;
}
/* Fila de arriba (estilo ML): título (crece/wrap) · tacho · precio pegado al margen. */
.ngi-mini-top {
  display: flex;
  align-items: flex-start;
}
.ngi-mini-name {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.25;
  color: var(--fg);
  text-decoration: none;
  margin: 0 20px 0 0; /* 20px de separación con el tacho */
}
.ngi-mini-name:hover {
  color: var(--accent-oklch);
}
/* Descripción de la variación (ej. "Surcos: 12"), debajo del título. */
.ngi-mini-desc {
  font-size: 12px;
  color: var(--fg-subtle);
  line-height: 1.3;
  margin-top: 3px;
}
/* Fila inferior: stepper + "X disponibles" al lado (estilo ML). */
.ngi-mini-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.ngi-mini-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
/* Columna derecha de la fila inferior: precio arriba + botón trash debajo
   alineados a la derecha (matchea el layout de Claude Design). */
.ngi-mini-price-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.ngi-mini-price {
  flex-shrink: 0;
  margin-left: 10px; /* pequeño gap con el tacho; queda pegado al margen derecho */
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  color: var(--fg);
  white-space: nowrap;
}
/* Wrapper del stepper + texto "X disponibles" debajo */
.ngi-qty-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}
.ngi-mini-stock-info {
  font-size: 10.5px;
  color: var(--fg-subtle);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}

/* Selector de cantidad +/- */
.ngi-qty {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  height: 30px;
  background: var(--bg);
}
.ngi-qty-btn {
  width: 28px;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s;
}
.ngi-qty-btn:hover { background: var(--bg-muted); }
.ngi-qty-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.ngi-qty-val {
  min-width: 28px;
  padding: 0 6px;
  font-family: var(--font-mono);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
}
.ngi-qty.is-loading { opacity: 0.6; pointer-events: none; }
/* Botón remove (trash icon) — vive dentro de .ngi-mini-price-col, debajo del precio */
.ngi-cart-drawer-body ul.woocommerce-mini-cart li.mini_cart_item .remove {
  position: static !important;
  width: 26px !important;
  height: 26px !important;
  background: transparent !important;
  color: var(--fg-subtle) !important;
  padding: 0 !important;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  line-height: 1;
  margin: 0 !important;
  font-size: 0 !important; /* evita el "×" si por algún motivo Woo lo inyecta */
  transition: color 0.15s, background 0.15s;
}
.ngi-cart-drawer-body ul.woocommerce-mini-cart li.mini_cart_item .remove:hover {
  background: var(--danger-soft) !important; /* mismo hover rojo que el checkout (.ngi-review-remove) */
  color: var(--danger) !important;
}

/* Footer del drawer: subtotal + envío estimado + total + botones forman un bloque
   con bg-muted, pegado al borde inferior. El <p>.woocommerce-mini-cart__total ahora
   contiene 3 spans (.ngi-mini-line) — uno por línea — en lugar de una fila única. */
.ngi-cart-drawer-body .woocommerce-mini-cart__total {
  display: flex;
  flex-direction: column;
  padding: 22px 28px 14px;
  margin: 0;
  background: var(--bg-muted);
  border-top: 1px solid var(--border);
}
@media (max-width: 600px) {
  .ngi-cart-drawer-body .woocommerce-mini-cart__total { padding: 10px 28px; }
}
.ngi-mini-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 14px;
  margin-bottom: 8px;
}
.ngi-mini-line strong {
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--fg-muted);
}
.ngi-mini-line .amount {
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--fg);
}
/* Nota "Envío e IVA se calculan al finalizar la compra" debajo del Subtotal.
   Convención profesional (Amazon, Shopify, etc.): el desglose vive en checkout. */
.ngi-mini-shipping-note {
  font-size: 12px;
  color: var(--fg-subtle);
  text-align: center;
  margin: 4px 0 14px;
  padding: 0 28px;
  line-height: 1.4;
}

/* Easter egg overlay (long-press de 5s en el logo) */
.ngi-easter-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: ngi-easter-fade 0.3s ease;
  overflow-y: auto;
}
@keyframes ngi-easter-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.ngi-easter-content {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  padding: 48px 56px;
  border-radius: 12px;
  text-align: center;
  max-width: 480px;
  box-shadow: var(--shadow-lg);
}

/* Mini-juego "Atrapá las semillas" */
.ngi-game-content {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: 100%;
  max-width: 660px;
  max-height: calc(100vh - 40px);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin: auto;
}
.ngi-game-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.ngi-game-header h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--fg);
}
.ngi-game-close {
  background: transparent;
  border: 0;
  color: var(--fg-muted);
  font-size: 26px;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ngi-game-close:hover {
  background: var(--bg-muted);
  color: var(--fg);
}
.ngi-game-body {
  padding: 20px;
  text-align: center;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}
.ngi-game-canvas {
  display: block;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  border-radius: 8px;
  background: #1a2332;
  outline: none;
}
.ngi-game-screen {
  padding: 20px 10px;
}
.ngi-game-instr {
  color: var(--fg-muted);
  font-size: 14px;
  line-height: 1.55;
  margin: 0 auto 18px;
  max-width: 460px;
}
.ngi-game-hi {
  color: var(--fg-subtle);
  font-size: 13px;
  margin: 0 0 24px;
}
.ngi-game-hi strong { color: var(--fg); }
.ngi-game-final {
  font-family: var(--font-display);
  font-size: 26px;
  margin: 0 0 8px;
  color: var(--fg);
}
.ngi-game-final strong { color: var(--accent-oklch); }

/* Selector de juegos (al abrir el easter egg) — grid de cards compactas */
.ngi-game-selector {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  padding: 4px;
}
@media (min-width: 600px) {
  .ngi-game-selector {
    grid-template-columns: repeat(4, 1fr);
  }
}
.ngi-game-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
  display: flex;
  flex-direction: column;
  color: var(--fg);
  font-family: inherit;
  text-align: left;
}
.ngi-game-card:hover {
  border-color: var(--accent-oklch);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}
/* Poster area: imagen 3:4, recortada y centrada */
.ngi-game-poster {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center;
  background: var(--bg-muted);
}
/* Placeholder cuando no hay imagen aún (SVG centrado en gradient) */
.ngi-game-poster-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--bg-muted) 0%, var(--bg-elevated) 100%);
  color: var(--fg-subtle);
}
.ngi-game-poster-placeholder svg {
  color: var(--accent-oklch);
  opacity: 0.55;
}
/* Info abajo del poster: título, descripción, badge */
.ngi-game-info {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}
.ngi-game-card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--fg);
  line-height: 1.2;
}
.ngi-game-card p {
  font-size: 11px;
  color: var(--fg-muted);
  margin: 0;
  line-height: 1.35;
}
.ngi-game-hi-badge {
  font-size: 9px;
  color: var(--fg-subtle);
  font-family: var(--font-mono);
  margin-top: 3px;
  padding: 2px 6px;
  background: var(--bg-muted);
  border-radius: 3px;
  letter-spacing: 0.05em;
  align-self: flex-start;
}

/* Layout cinematográfico para juegos en iframe (Freedoom, Tyrian, etc.):
   info panel izq + iframe 16:9 derecha, botón "Volver" arriba a la izq. */
.ngi-game-content.is-iframe-mode {
  max-width: 940px;
}
.ngi-game-iframe-layout {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ngi-game-iframe-toolbar {
  display: flex;
  justify-content: flex-start;
}
.ngi-game-iframe-content {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 14px;
  align-items: stretch;
}
@media (max-width: 720px) {
  .ngi-game-iframe-content {
    grid-template-columns: 1fr;
  }
}
.ngi-game-iframe-info {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 14px;
  text-align: left;
  display: flex;
  flex-direction: column;
}
.ngi-game-iframe-info h3 {
  font-family: var(--font-display);
  font-size: 18px;
  margin: 0 0 6px;
  color: var(--fg);
  line-height: 1.2;
}
.ngi-game-iframe-info p {
  color: var(--fg-muted);
  font-size: 12.5px;
  margin: 0 0 10px;
  line-height: 1.5;
}
.ngi-game-iframe-meta {
  font-family: var(--font-mono);
  font-size: 10.5px !important;
  color: var(--fg-subtle) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 14px !important;
}
.ngi-game-iframe-ctrls-title {
  font-size: 10px;
  color: var(--fg-subtle);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.ngi-game-iframe-ctrls {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ngi-game-iframe-ctrls li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  color: var(--fg-subtle);
  font-family: ui-monospace, SFMono-Regular, "Courier New", monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.3;
}
.ngi-game-iframe-ctrls kbd {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  padding: 3px 7px;
  border-radius: 3px;
  font-family: inherit;
  color: var(--fg-muted);
  font-size: 10px;
  white-space: nowrap;
  flex-shrink: 0;
}
.ngi-game-iframe-ctrls span {
  flex: 1;
}
.ngi-game-iframe-frame-wrap {
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.ngi-game-iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}
/* Canvas (juegos JS) dentro del frame-wrap 16:9 — letterbox preservando 3:2 */
.ngi-game-iframe-frame-wrap > canvas.ngi-game-canvas {
  display: block;
  width: auto;
  height: 100%;
  max-width: 100%;
  margin: 0 auto;
  background: #1a2332;
}
/* Stage de "Empezar" (antes que arranque el juego) */
.ngi-game-canvas-stage {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1a2332 0%, #0d1114 100%);
}
/* End screen (después del game over) */
.ngi-game-canvas-end {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  background: linear-gradient(135deg, #1a2332 0%, #0d1114 100%);
  text-align: center;
}
.ngi-game-canvas-end .ngi-game-final {
  font-family: var(--font-display);
  font-size: 22px;
  margin: 0 0 4px;
  color: var(--fg);
  line-height: 1.2;
}
.ngi-game-canvas-end .ngi-game-final strong { color: var(--accent-oklch); }
.ngi-game-canvas-end .ngi-game-hi {
  font-size: 12px;
  color: var(--fg-muted);
  margin: 0 0 16px;
}
.ngi-game-canvas-end .ngi-game-hi strong { color: var(--fg); }

/* Toast inline para warnings del carrito (ej: capeo por stock disponible).
   Por default cae abajo a la derecha. Si tiene .is-anchored, el JS pone
   coords explícitas (top/left) y se posiciona debajo del stepper que
   disparó la acción, clampeado al viewport. */
.ngi-cart-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--bg-elevated);
  border: 1px solid color-mix(in oklab, var(--danger) 40%, transparent);
  border-left: 3px solid var(--danger);
  color: var(--fg);
  padding: 14px 18px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.4;
  max-width: 340px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  z-index: 999999;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.ngi-cart-toast.is-anchored {
  bottom: auto;
  right: auto;
  /* top y left las setea el JS según el bounding rect del ancla */
}
.ngi-cart-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Esconder el link "Ver carrito" que WC inserta al lado del botón "Agregar"
   después de un add-to-cart exitoso. El drawer del cart abre automáticamente
   con el cambio, no hace falta el link redundante. */
.added_to_cart,
a.added_to_cart {
  display: none !important;
}

/* Empty state del checkout / carrito — mensaje amable + CTAs en lugar del
   default "Sesión caducada" de WC. Centrado vertical para balancear con
   header/footer (sin importar el padding del container exterior). */
.ngi-checkout-empty {
  text-align: center;
  padding: 40px 20px;
  max-width: 520px;
  margin: 0 auto;
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.ngi-checkout-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--bg-muted);
  color: var(--fg-subtle);
  margin-bottom: 28px;
}
.ngi-checkout-empty-title {
  font-size: 36px;
  margin: 0 0 12px;
  line-height: 1.15;
  font-family: var(--font-display);
}
.ngi-checkout-empty-text {
  font-size: 16px;
  color: var(--fg-muted);
  margin: 0 auto 32px;
  line-height: 1.5;
  max-width: 420px;
}
.ngi-checkout-empty-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
/* Línea Total — separada por border-top, font-display 18, mismo weight que el resto.
   margin-bottom 14 + padding-top 6 del bloque buttons = 20px hasta el botón. */
.ngi-mini-line-total {
  padding-top: 14px;
  margin-top: 6px;
  margin-bottom: 14px;
  border-top: 1px solid var(--border);
  font-size: 18px;
}
.ngi-mini-line-total strong,
.ngi-mini-line-total .amount {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--fg);
  font-size: 18px;
}
.ngi-cart-drawer-body .woocommerce-mini-cart__buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 6px 28px 24px;
  margin: 0;
  background: var(--bg-muted);
}
.ngi-cart-drawer-body .woocommerce-mini-cart__buttons .button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 20px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  font-family: var(--font-sans) !important;
  text-decoration: none;
  border: 1px solid var(--border) !important;
  background: var(--bg) !important;
  color: var(--fg) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.ngi-cart-drawer-body .woocommerce-mini-cart__buttons .button.checkout,
.ngi-cart-drawer-body .woocommerce-mini-cart__buttons .checkout {
  background: var(--accent-oklch) !important;
  color: #fff !important;
  border-color: var(--accent-oklch) !important;
}
.ngi-cart-drawer-body .woocommerce-mini-cart__buttons .button.checkout:hover {
  background: var(--accent-hover) !important;
}

/* Empty state: ícono grande + texto + botón "Ver catálogo", centrado vertical y
   horizontalmente. Se expande a flex:1 para ocupar todo el body del drawer. */
.ngi-cart-drawer-body .woocommerce-mini-cart__empty-message,
.ngi-empty-cart {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 28px;
  color: var(--fg-muted);
  font-size: 14px;
}
.ngi-empty-icon {
  color: var(--fg-subtle);
  margin-bottom: 18px;
}
.ngi-empty-cart p {
  margin: 0 0 22px;
  font-size: 15px;
  color: var(--fg-muted);
}

/* Scroll del fondo bloqueado con el drawer abierto. Lockeamos html Y body (el
   scroller real en mobile es el <html>, por eso el body solo no alcanzaba) y
   matamos el scroll-chaining/rebote hacia la página de atrás con overscroll-behavior.
   El padding-right compensa la barra de scroll que desaparece en compu (en mobile
   es 0 → barras overlay, sin salto). */
html.ngi-cart-open { overflow: hidden; overscroll-behavior: none; }
body.ngi-cart-open {
  overflow: hidden;
  overscroll-behavior: none;
  padding-right: var(--ngi-sbw, 0);
}

/* ============================================================
   Páginas legales (Términos, Privacidad, Arrepentimiento)
   Mismo lenguaje que el resto del tema: eyebrow + display h1,
   lead 18px, prosa muted en columna angosta, card elevada.
   ============================================================ */
.ngi-legal {
  padding: 40px 0 100px;
}
.ngi-legal .eyebrow {
  margin-bottom: 18px;
}
.ngi-legal h1 {
  font-family: var(--font-display);
  font-size: clamp(38px, 5vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}
.ngi-legal-updated {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin: 0 0 20px;
}
.ngi-legal-body {
  max-width: 720px;
}
/* Primer párrafo: intro más grande, separado por una línea (como el lead del home) */
.ngi-legal-lead {
  font-size: 18px !important;
  line-height: 1.6 !important;
  color: var(--fg-muted);
  margin: 0 0 20px !important;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.ngi-legal-body h2 {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: -0.01em;
  margin: 20px 0;
}
.ngi-legal-body p {
  color: var(--fg-muted);
  font-size: 15.5px;
  line-height: 1.75;
  margin: 0 0 18px;
}
.ngi-legal-body ul {
  margin: 0 0 18px;
  padding-left: 20px;
  list-style: none;
}
.ngi-legal-body li {
  position: relative;
  color: var(--fg-muted);
  font-size: 15.5px;
  line-height: 1.7;
  margin-bottom: 10px;
  padding-left: 8px;
}
.ngi-legal-body li::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 11px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-bright);
}
.ngi-legal-body strong { color: var(--fg); font-weight: 600; }
.ngi-legal-body a:not(.btn) {
  color: var(--accent-bright);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 0.15s ease;
}
.ngi-legal-body a:not(.btn):hover { color: var(--accent-hover); }
[data-theme="dark"] .ngi-legal-body a:not(.btn):hover { color: var(--accent-oklch); }

/* Bloque destacado del botón de arrepentimiento: card elevada del tema */
.ngi-legal-cta {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 30px 32px;
  margin: 36px 0;
}
.ngi-legal-cta-title {
  font-family: var(--font-display) !important;
  font-size: 20px !important;
  color: var(--fg) !important;
  margin: 0 0 10px !important;
}
.ngi-legal-cta-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

/* Legales (Términos / Privacidad / Arrepentimiento) en mobile: todo texto, ya
   responsive por el .container; solo achicamos título, ritmo 20px y ponemos los
   botones del CTA en columna full-width. */
@media (max-width: 600px) {
  .ngi-legal { padding: 20px 0 0; }
  .ngi-legal h1 { font-size: 34px; }
  .ngi-legal-cta { padding: 20px; margin: 20px 0; }
  .ngi-legal-cta-btns { flex-direction: column; margin-top: 20px; }
  .ngi-legal-cta-btns .btn { width: 100%; justify-content: center; }
}

/* ——— Línea de links legales en la base del footer ———
   Mono, chico y sutil, igual que el copyright de footer-bottom.
   Separadores con barra fina; hover al verde acento. */
.footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 24px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
}
.footer-legal-links a {
  color: var(--fg-subtle);
  text-decoration: none;
  padding: 2px 14px;
  line-height: 1;
  border-right: 1px solid var(--border);
  transition: color 0.18s ease;
}
.footer-legal-links a:first-child { padding-left: 0; }
.footer-legal-links a:last-child { border-right: 0; }
.footer-legal-links a:hover { color: var(--accent-bright); }
/* El botón de arrepentimiento es obligatorio destacarlo: un punto verde */
.footer-legal-arrep { color: var(--fg-muted) !important; }
.footer-legal-arrep::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-bright);
  margin-right: 7px;
  vertical-align: middle;
}
@media (max-width: 640px) {
  /* Links legales en filas (2 por fila) y CENTRADOS, sin las líneas separadoras
     (centrados se ven más limpios con solo espacio). Un toque más chicos. */
  .footer-legal-links { justify-content: center; row-gap: 8px; column-gap: 16px; font-size: 10px; }
  .footer-legal-links a { padding: 2px 0; border-right: 0; }
  .footer-legal-links a:first-child { padding-left: 0; }
}

/* ============================================================
   Responsive — "chrome" del tema en mobile (nav, hero, footer)
   El WooCommerce ya tenía sus breakpoints; esto cubre el marco.
   ============================================================ */

/* Botón hamburguesa: oculto en desktop, aparece en mobile. */
.nav-toggle { display: none; }
.nav-toggle .nav-toggle-close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle-open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle-close { display: inline; }

/* ≤860px: el menú principal pasa a desplegable bajo la barra. */
@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  /* Con el menú colapsado, logo a la izquierda e íconos pegados a la derecha. */
  .topbar-inner { justify-content: space-between; }
  /* Panel desplegable: tarjeta flotante de "vidrio esmerilado" (semi-transparente
     + desenfoque, misma estética que la barra), redondeada y con aparición suave. */
  .nav {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 8px;
    right: 8px;
    flex: none;
    margin: 0;
    flex-direction: column;
    gap: 2px;
    padding: 8px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 60;
  }
  .nav.is-open { display: flex; animation: ngiNavDrop 0.18s ease; }
  .nav .nav-link {
    padding: 13px 14px;
    border-radius: var(--radius);
    font-size: 16px;
  }
  /* Página actual, marcada con un toque de verde del tema. */
  .nav .nav-link.active {
    background: var(--accent-soft);
    color: var(--accent-bright);
  }
}

/* Aparición del panel del menú mobile (fundido + leve bajada). */
@keyframes ngiNavDrop {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ≤768px: hero y grillas del home a una sola columna. En el hero, el orden
   pasa a: título → imagen → (texto + botones + datos). */
@media (max-width: 768px) {
  /* Hero apilado. El gap de 20px (título→imagen→resto) solo lo necesita la home;
     en Empresa la separación la da el margin inferior de .ngi-lead. */
  .ngi-hero-grid { grid-template-columns: 1fr; gap: 0; }
  body.home .ngi-hero-grid { gap: 20px; }
  .ngi-lead { margin-bottom: 20px; }
  .ngi-grid-3 { grid-template-columns: 1fr; gap: 28px; }
  /* display:contents "disuelve" el bloque de texto para intercalar la imagen
     entre el título y el resto, ordenando con order. */
  .ngi-hero-text { display: contents; }
  .ngi-hero-head { order: 1; }
  .ngi-hero-img-wrap { order: 2; }
  .ngi-hero-rest { order: 3; }
  /* El título ya no necesita margen inferior (lo separa el gap del grid). */
  .ngi-hero-head .hero-title { margin-bottom: 0 !important; }
  /* La imagen del hero es más baja en celular (620px es enorme en un teléfono). */
  .ngi-hero-img,
  .ngi-hero-img-wrap .placeholder-img { height: 380px; }
  /* Tarjetita flotante colgada de la esquina inferior izquierda: ~90% queda por
     DEBAJO de la imagen y solo ~10% la tapa. Le damos lugar debajo con margin.
     Solo la home tiene tarjeta flotante; en otras páginas (Empresa) queda en 0. */
  body.home .ngi-hero-img-wrap { margin-bottom: 44px; }
  .ngi-hero-float-card {
    position: absolute;
    left: 0;
    right: auto;
    bottom: 0;
    top: auto;
    transform: translateY(70%);
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 8px 14px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    text-align: left;
    z-index: 3;
  }
  /* Ritmo vertical uniforme de 20px en el hero mobile. */
  .ngi-hero-rest .ngi-lead { margin-bottom: 20px; }         /* párrafo → botones */
  /* Botones → datos con la línea divisoria: 20px arriba de la línea + 20px abajo
     (así cada gap se ve de 20px, parejo con el resto del hero). */
  .ngi-stats { margin-top: 20px; padding-top: 20px; }
  main > .ngi-section:first-child {                          /* arriba y abajo del hero */
    padding-top: 20px;
    padding-bottom: 20px;
  }
}

/* Home (SOLO): mismo ritmo de 20px de "Qué hacemos" hacia abajo en mobile.
   Scopeado a body.home para no tocar las otras páginas. */
@media (max-width: 768px) {
  body.home .ngi-section { padding-top: 20px; padding-bottom: 20px; }  /* borde de cada sección */
  body.home .ngi-h2 { margin-top: 20px; margin-bottom: 20px; }         /* eyebrow → título → grilla */
  body.home .ngi-h2--md { margin-top: 20px; }                          /* eyebrow → título (Destacados) */
  /* Encabezado Destacados: en el celu, título arriba y "Ver todo el catálogo"
     debajo (en compu van lado a lado). */
  body.home .ngi-featured-head {
    margin-bottom: 20px !important;
    flex-direction: column;
    align-items: flex-start !important;
    gap: 14px;
  }
  body.home .ngi-grid-3 { gap: 20px; }                                 /* entre las 3 tarjetas de valor */
  /* Tarjetas de valor en el celu: ícono a la IZQUIERDA, texto a la derecha
     (fila compacta), en vez de ícono arriba y texto abajo (quedaba muy alto). */
  body.home .ngi-grid-3 > div {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "icon title"
      "icon desc";
    column-gap: 14px;
    align-items: start;
  }
  body.home .ngi-grid-3 .ngi-vp-icon { grid-area: icon; margin-bottom: 0; }
  body.home .ngi-grid-3 .ngi-vp-title { grid-area: title; font-size: 18px; margin-bottom: 4px; }
  body.home .ngi-grid-3 .ngi-vp-desc { grid-area: desc; }
}

/* ≤720px: footer a 2 columnas (marca a lo ancho arriba) y ritmo vertical de 20px,
   igual que el resto de la home en mobile. */
@media (max-width: 720px) {
  .footer { padding-top: 20px; padding-bottom: 20px; }        /* arriba/abajo del footer (era 60 / 24) */
  /* Columnas centradas como bloque en el contenedor, pero el texto sigue a la
     izquierda (margen parejo a los dos lados, no pegado al borde). */
  .footer-grid {
    justify-content: center;
    grid-template-columns: auto auto;
    column-gap: 44px;
    row-gap: 20px;
    padding-bottom: 20px;                                      /* grilla → línea divisoria (era 40) */
  }
  .footer-grid .footer-col:first-child { grid-column: 1 / -1; justify-self: center; }  /* marca centrada */
  .footer-grid .footer-col:last-child { grid-column: 1 / -1; justify-self: start; }    /* Contacto alineado al borde izq del bloque (= Productos) */
  .footer-col ul { gap: 6px; }                                 /* links de cada columna más juntos (era 8) */
  /* En el celu no hay hover: coloreamos los links en verde para que se entienda
     qué es tocable (el texto que NO es link —dirección, horario— queda gris). */
  .footer-col a:not(.logo),
  .footer-contact a,
  .footer-legal-links a { color: var(--accent-bright); }
  .footer-legal-arrep { color: var(--accent-bright) !important; }  /* que quede verde como los otros (tenía gris con !important) */
  .footer-datafiscal img { max-width: 44px !important; }       /* Data Fiscal más chico en celu (solo tiene que estar visible/clickeable) */
  .footer-legal-links { padding-top: 20px; }                  /* línea → links legales (era 24) */
  /* Data Fiscal a la izquierda y el © / CUIT a su derecha (aprovecha el espacio). */
  .footer-fiscal-row { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 20px; }
  /* © / CUIT más chico y con menos interletrado para que entre en un renglón al
     lado del QR en cualquier celu (en el S23, más angosto, se partía el CUIT). */
  .footer-bottom {
    padding-top: 0;
    flex-direction: column;
    align-items: flex-end;   /* HECHO EN ARGENTINA pegado a la derecha, donde termina el CUIT */
    gap: 4px;
    font-size: 10px;
    letter-spacing: 0.02em;
  }
}

/* ≤600px (teléfonos): achicar el margen lateral del sitio y compactar el
   header para que el logo + los 4 íconos entren y no haya scroll lateral. */
@media (max-width: 600px) {
  .container,
  .container-narrow { padding-left: 14px; padding-right: 14px; }
  .topbar-inner { gap: 12px; height: 68px; }
  .topbar .logo { font-size: 18px; gap: 8px; }
  .topbar .logo-img { height: 40px; }
  .topbar .logo-text em { display: none; }
  .nav-tools { gap: 4px; }
  .icon-btn { width: 36px; height: 36px; }
  /* Botones del hero un toque más compactos para que entren lado a lado sin
     escaparse del borde (era lo que hacía el margen izq/der desparejo). */
  .ngi-btn-row { gap: 10px; justify-content: center; }
  .ngi-btn-row .btn-lg { padding: 12px 16px; font-size: 14px; }
  /* TODOS los eyebrows al mismo tamaño en el celu (10px) e igual interletrado,
     así son idénticos entre sí; el interletrado apenas menor hace que el más
     largo (el del hero) entre igual en un renglón. La rayita, más corta. */
  .eyebrow { font-size: 10px; letter-spacing: 0.06em; }
  .eyebrow::before { width: 16px; }
  /* La meta del testimonio también 10px (mismo tamaño); interletrado un toque
     menor porque el texto es más largo. */
  .ngi-testimonial-meta { font-size: 10px; letter-spacing: 0.03em; }
}

/* Títulos más chicos en el celu (los de escritorio son grandes para un teléfono). */
@media (max-width: 600px) {
  .hero-title { font-size: 34px; }
  /* Sacamos el salto de línea forzado del título en el celu: dejaba "entiende"
     solo en un renglón. Sin él, el texto se acomoda natural. (En compu queda.) */
  .hero-title br { display: none; }
  .ngi-h2 { font-size: 32px; }
  .ngi-h2--md { font-size: 30px; }
  .ngi-testimonial-quote { font-size: 30px; margin: 20px 0; }   /* 20px arriba y abajo (era 30 / 24) */
  /* Cards de "Qué hacemos" en el celu: una debajo de la otra (1 columna), cada
     una en UNA sola fila: número + ícono + título. Compacto y prolijo. */
  .ngi-grid-5 { grid-template-columns: 1fr; gap: 10px; }
  .ngi-cat-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
  }
  .ngi-cat-card-head {
    margin-bottom: 0;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }
  .ngi-cat-card-title { font-size: 16px; margin-bottom: 0; flex: 1; }
  .ngi-cat-card-desc { display: none; }
  .ngi-cat-badge { margin: 0; flex-shrink: 0; }
}

/* Red de seguridad: la página nunca hace scroll horizontal. Va en html Y body:
   el drawer del carrito es position:fixed y "estaciona" fuera de pantalla a la
   derecha; los elementos fixed se recortan a nivel de la raíz (html), no del body.
   Usamos "clip" (no "hidden") para no romper el header sticky. */
html,
body { overflow-x: clip; }   /* clip (no hidden) para no romper el header sticky. NO ponerlo en html: rompe el sticky del header. */