/*
Theme Name: Finotrato
Theme URI: https://finotrato.com.uy
Author: Finotrato Uruguay
Author URI: https://finotrato.com.uy
Description: Tema WooCommerce 100% custom para Finotrato Uruguay — nutrición premium para mascotas. Sin constructores visuales. HTML + CSS + JS limpio sobre hooks nativos de WooCommerce.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
WC requires at least: 8.0
Text Domain: finotrato
Tags: woocommerce, e-commerce, custom
*/

/* =========================================================
   DESIGN TOKENS  —  USAR SIEMPRE, NUNCA HARDCODEAR
   Sistema V3 (ver _previews/v3-ajustada.html y el comparador).

   Los nombres viejos (--primario, --fondo-suave, --texto...) se mantienen
   para que las ~4.000 líneas de CSS del tema sigan funcionando, pero sus
   VALORES pasan a los de V3. Debajo se agregan los nombres de V3 como alias,
   que son los que usan los componentes nuevos.
   ========================================================= */
:root {
  /* ---------- Nombres de V3 (los que usan los componentes nuevos) ---------- */
  --navy-900: #001835;
  --navy:     #00234e;
  --navy-700: #123a70;

  --base:      #ffffff;
  --surface:   #f4f6f8;   /* neutro tintado hacia el azul de marca, NO crema */
  --surface-2: #eef1f5;
  --line:      #dde1e8;

  --ink:       #0d1420;
  --ink-2:     #4a5566;
  --on-navy:   #eaeff6;
  --on-navy-2: #9fb2ca;

  --rojo:   #DB1320;   /* solo pérdida o escasez: oferta, tachado, stock bajo */
  --verde:  #2E5044;   /* transferencia, disponibilidad */
  --verde-2:#3f8f6d;
  --ambar:  #E8A33D;   /* estrellas */

  --r:      6px;
  --r-lg:   10px;
  --r-pill: 999px;

  --display: 'Familjen Grotesk', system-ui, -apple-system, sans-serif;
  --body:    'Public Sans', system-ui, -apple-system, sans-serif;

  --out: cubic-bezier(.22, 1, .36, 1);

  /* Escala de z-index con nombre, para no volver a los 999 sueltos. */
  --z-nav: 40; --z-sticky: 50; --z-panel: 60; --z-modal: 70; --z-toast: 80;

  /* ---------- Nombres heredados, remapeados a V3 ---------- */
  --primario:    var(--navy);
  --secundario:  var(--navy-700);
  --acento:      var(--rojo);

  --fondo-base:  var(--base);
  --fondo-suave: var(--surface);    /* antes crema #f7f5f2 */
  --fondo-panel: var(--surface-2);
  --fondo-navy:  var(--navy);

  --texto:       var(--ink);        /* antes #1a1a1a */
  --texto-2:     var(--ink-2);      /* antes #5a5f6e */
  --texto-claro: #ffffff;

  --verde-ok:    var(--verde);
  --alerta:      var(--rojo);
  --borde:       var(--line);       /* antes cálido #e0ddd8 */

  --nav-h:   74px;
  --max-w:   1300px;
  --gutter:  clamp(20px, 5vw, 56px);

  --fuente-display: var(--display);
  --fuente-cuerpo:  var(--body);

  --radius:      var(--r-lg);       /* antes 14px */
  --radius-sm:   var(--r);          /* antes 8px  */
  --radius-pill: var(--r-pill);
  --sombra-card: 0 14px 40px -18px rgba(0, 24, 78, .3);

  --ease-img: var(--out);
}

/* =========================================================
   RESET MÍNIMO  —  CLAUDE.md §6.2
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--fuente-cuerpo);
  font-size: 15px;
  line-height: 1.5;
  color: var(--texto);
  background: var(--fondo-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Imágenes — CLAUDE.md §6.3 */
img {
  display: block;
  max-width: 100%;
  height: auto;
}

a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; }
ul, ol { list-style: none; }

/* =========================================================
   TIPOGRAFÍA BASE  —  CLAUDE.md §4
   ========================================================= */
h1, h2, h3, .pf { font-family: var(--fuente-display); }

.fnt-eyebrow {
  font-family: var(--fuente-cuerpo);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--texto-2);
}

/* =========================================================
   UTILIDADES GLOBALES
   ========================================================= */
.fnt-container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Oculta el <select> de variaciones sin romper WooCommerce — CLAUDE.md §8.3 */
.fnt-select-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Accesibilidad: texto solo para lectores de pantalla */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Bloqueo de scroll cuando hay panel/modal abierto */
body.fnt-no-scroll { overflow: hidden; }

/* =========================================================
   BOTONES  —  sistema base (tokens del CLAUDE.md + pill híbrido)
   ========================================================= */
.fnt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: var(--radius-pill);
  padding: 12px 28px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  transition: opacity .15s ease, transform .1s ease, background .15s ease;
}
.fnt-btn:hover  { opacity: .9; }
.fnt-btn:active { transform: scale(.98); }

.fnt-btn--primario { background: var(--primario); color: var(--texto-claro); }
.fnt-btn--transfer { background: var(--verde-ok); color: var(--texto-claro); }
.fnt-btn--alerta   { background: var(--acento);   color: var(--texto-claro); }
.fnt-btn--ghost {
  background: transparent;
  color: var(--texto-claro);
  border: 1.5px solid rgba(255, 255, 255, .45);
}
.fnt-btn--ghost:hover { background: rgba(255, 255, 255, .08); opacity: 1; }