/* GuardaTutti — Color & Type Foundations
   Reference: assets/manual-de-marca.pdf
   Brand primary: #38A183  ·  Ink: #10181E  ·  Paper: #FFFFFF
   Type: Poppins (Regular 400, SemiBold 600, Bold 700) */

/* Brand fonts — self-hosted woff2 (latin + latin-ext para acentos y ñ).
   ¿Por qué self-hosted? 1 menos round trip a Google Fonts → LCP más rápido.
   Total payload ≈ 26KB para los 4 pesos críticos (latin), latin-ext lazy.
   Los archivos viven en /fonts/ — desplegate igual a Netlify y listo. */

/* 400 Regular */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/Poppins-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/Poppins-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 500 Medium */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/Poppins-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/Poppins-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 600 SemiBold */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/Poppins-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/Poppins-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 700 Bold */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/Poppins-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/Poppins-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ── Brand greens ───────────────────────────────────────── */
  /* Sprint 34 PROVISIONAL · revertido a #38A183 (manual de marca ORIGINAL)
     para brand cohesion ads ↔ web. Aprobación pendiente post-localhost review.
     Trade-off conocido: 3.18:1 sobre blanco FALLA WCAG AA para texto normal
     (necesita 4.5:1). FALLA en: botones primary (fondo verde + texto blanco),
     sticky CTA, badges BonosStack, panel Calculadora. PASA para: eyebrows,
     iconos, bordes, headlines grandes, fondos de sección con texto carbón.
     Si se aprueba: actualizar BRIEF.md. Si NO: revert con git checkout. */
  --gt-green:        #38A183;   /* PRIMARY – brand manual · WCAG AA fail @ small text + buttons on white */
  --gt-green-700:    #2A7A4B;   /* deeper marketing green from brief */
  --gt-green-800:    #1F5D39;
  --gt-green-900:    #14241B;   /* darkest green — bonos panel surface */
  --gt-green-50:     #EAF6F0;
  --gt-green-100:    #D2ECDF;
  --gt-green-200:    #A8DCC4;
  --gt-green-soft:   #F4FBF7;   /* page wash / hero backdrop */

  /* ── Ink / neutrals ─────────────────────────────────────── */
  --gt-ink:          #10181E;   /* SECONDARY – manual de marca */
  --gt-ink-2:        #2A323A;
  --gt-ink-3:        #4D5660;
  --gt-mute:         #6B7480;
  --gt-line:         #E4E7EB;
  --gt-line-2:       #EFF1F4;
  --gt-paper:        #FFFFFF;
  --gt-cream:        #FAF8F4;   /* warm page tint */

  /* ── Product finishes (galpón colors, real product) ─────── */
  --gt-finish-wood:    #EED09D;
  --gt-finish-grafito: #56585B;
  --gt-finish-green:   #02AEA0;
  --gt-finish-white:   #FFFFFF;
  --gt-finish-black:   #000000;

  /* ── Semantic ───────────────────────────────────────────── */
  --gt-success:      #2BAE6E;
  --gt-warn:         #E2A03F;
  --gt-danger:       #D14343;
  --gt-info:         #3B82F6;
  --gt-price:        var(--gt-green-700); /* cuotas highlight */

  /* ── Foreground roles ───────────────────────────────────── */
  --fg-1: var(--gt-ink);        /* primary text */
  --fg-2: var(--gt-ink-3);      /* secondary text */
  --fg-3: var(--gt-mute);       /* tertiary / metadata */
  --fg-on-green: #FFFFFF;
  --fg-on-cream: var(--gt-ink);

  /* ── Surfaces ───────────────────────────────────────────── */
  --bg-page:    var(--gt-paper);
  --bg-soft:    var(--gt-cream);            /* Sprint 34.9: noise grain probado y revertido — Damián no le tiró */
  --bg-wash:    var(--gt-green-soft);       /* idem — backgrounds flat sin texture */
  --bg-card:    #FFFFFF;
  --bg-hero:    var(--gt-ink);

  /* ── Type ───────────────────────────────────────────────── */
  --font-sans: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Poppins", "Helvetica Neue", Arial, sans-serif; /* SemiBold/Bold */

  /* type scale (mobile-first; 89% mobile traffic) */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-48: 3rem;

  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-normal: 1.45;
  --lh-loose:  1.6;

  /* ── Letter-spacing scale (Sprint 34.1 · Poppins Premium System) ── */
  --ls-tight:   -0.045em;   /* display 40-80px optical tightening */
  --ls-snug:    -0.020em;   /* h1-h2 28-40px */
  --ls-base:     0;          /* body */
  --ls-wide:     0.08em;     /* small CAPS */
  --ls-wider:    0.14em;     /* eyebrow */
  --ls-widest:   0.18em;     /* trust strip CAPS hero */

  /* ── Opacity hierarchy (Sprint 34.7 · Tim Gabe Material pattern) ── */
  --opacity-emphasis:  1.00;
  --opacity-high:      0.85;
  --opacity-body:      0.70;
  --opacity-meta:      0.55;

  /* Text colors con opacity baked in via rgba — evita cascade inheritance
     issues en componentes con override de color (dark-bg sections etc.) */
  --text-emphasis:  var(--gt-ink);
  --text-body:      rgba(16, 24, 30, 0.70);  /* gt-ink @ 70% */
  --text-meta:      rgba(16, 24, 30, 0.55);  /* gt-ink @ 55% */
  --text-eyebrow:   rgba(42, 122, 75, 0.85); /* gt-green-700 @ 85% */

  /* ── Spacing ────────────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ── Radii ──────────────────────────────────────────────── */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* ── Shadows ────────────────────────────────────────────── */
  /* Premium multicapa (contact + key + ambient) — usadas como token único
     en todas las cards. Cambiar acá actualiza todo el sistema.
     (Mejora aplicada en el sprint de polish post-auditoría — mayo 2026.) */
  --shadow-1:
    0 1px 2px rgba(16,24,30,.04),
    0 4px 8px rgba(16,24,30,.05),
    0 16px 32px rgba(16,24,30,.07);
  --shadow-2:
    0 2px 4px rgba(16,24,30,.05),
    0 8px 16px rgba(16,24,30,.08),
    0 24px 48px rgba(16,24,30,.10);
  --shadow-3: 0 10px 30px rgba(16,24,30,.14);
  --shadow-green: 0 8px 24px rgba(56,161,131,.28);
  --ring-focus: 0 0 0 3px rgba(56,161,131,.35);

  /* ── Motion ─────────────────────────────────────────────── */
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --t-fast: 120ms;
  --t-base: 200ms;
  --t-slow: 320ms;
}

/* ── Base type ────────────────────────────────────────────── */
html, body { font-family: var(--font-sans); color: var(--fg-1); background: var(--bg-page); }
body { font-size: var(--fs-16); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; }

/* Sprint 34.1: letter-spacing via tokens (--ls-*) — optical tightening en display */
h1, .h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-40); line-height: var(--lh-tight); letter-spacing: var(--ls-snug); color: var(--fg-1); }
h2, .h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-32); line-height: var(--lh-tight); letter-spacing: var(--ls-snug); color: var(--fg-1); }
h3, .h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-24); line-height: var(--lh-snug); color: var(--fg-1); }
h4, .h4 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-20); line-height: var(--lh-snug); color: var(--fg-1); }
/* Sprint 34.7: Opacity Hierarchy via tokens — un solo color base + niveles de transparencia */
p, .body  { font-size: var(--fs-16); line-height: var(--lh-normal); color: var(--text-body); }
.lead     { font-size: var(--fs-18); line-height: var(--lh-loose); color: var(--text-body); }
.small    { font-size: var(--fs-14); color: var(--text-meta); }
.tiny     { font-size: var(--fs-12); color: var(--text-meta); }
.eyebrow  { font-size: var(--fs-12); font-weight: 700; letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--text-eyebrow); }
/* N7: variante neutra para crear ritmo \u2014 secciones tipo Comparativa/FAQ
   no necesitan el verde \"premium\" que reservamos para Bonos/Garant\u00eda. */
.eyebrow--neutral { color: var(--gt-ink-3); }
.price-cuota   { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-32); color: var(--gt-ink); letter-spacing: -0.01em; }
.price-cuota strong { color: var(--gt-green-700); }
.price-total   { font-size: var(--fs-14); color: var(--fg-3); }

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-16);
  border-radius: var(--r-pill); padding: 14px 22px; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px;
  transition: transform var(--t-fast) var(--ease-out), background var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn-primary { background: var(--gt-green); color: #fff; box-shadow: var(--shadow-green); }
.btn-primary:hover { background: var(--gt-green-700); }
.btn-secondary { background: var(--gt-ink); color: #fff; }
.btn-secondary:hover { background: #000; }
.btn-ghost { background: transparent; color: var(--gt-ink); border: 1.5px solid var(--gt-line); }
.btn-ghost:hover { border-color: var(--gt-ink); }