/* Guía Perruna · tokens de marca v1 (18/10/2026)
   Hoja de partida de la web (skill montaje-web-nicho). Fuentes autoalojadas: copiar marca/fonts/ a /fonts/ en la web.
   Nunca cargar fuentes desde fonts.googleapis.com (RGPD). Contrastes medidos con contraste.py (WCAG 2.1). */

/* ---------- Fuentes: Besley (títulos y logo, serif cálida) e Instrument Sans (texto) · licencia OFL ---------- */
@font-face {
  font-family: "Besley";
  src: url("/fonts/besley-400-900-latin-ext.woff2") format("woff2");
  font-weight: 400 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Besley";
  src: url("/fonts/besley-400-900-latin.woff2") format("woff2");
  font-weight: 400 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/instrument-sans-400-700-italic-latin-ext.woff2") format("woff2");
  font-weight: 400 700; font-style: italic; font-stretch: 75% 100%; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/instrument-sans-400-700-italic-latin.woff2") format("woff2");
  font-weight: 400 700; font-style: italic; font-stretch: 75% 100%; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/instrument-sans-400-700-latin-ext.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-stretch: 75% 100%; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/instrument-sans-400-700-latin.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-stretch: 75% 100%; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---------- Color ---------- */
  --gp-paper:     #F6F2EA;  /* fondo general: blanco roto cálido, como el de las marcas de comida fresca */
  --gp-surface:   #FFFDF8;  /* tarjetas, tablas y calculadoras */
  --gp-ink:       #1F2622;  /* texto principal · 13,8:1 sobre paper */
  --gp-ink-2:     #4F5852;  /* texto secundario · 6,6:1 sobre paper */
  --gp-line:      #E2DBCD;  /* bordes finos (decorativo) */
  --gp-night:     #1F3D35;  /* verde abeto: cabecera, pie y bloques oscuros · paper encima 10,6:1 */
  --gp-night-2:   #2C5247;  /* verde abeto claro: bordes y secciones oscuras secundarias */
  --gp-sage:      #DDE7DC;  /* salvia: fondo de secciones de salud y seguros · ink encima 12,2:1 */
  --gp-brass:     #D19A3A;  /* latón de la chapa: ÚNICO acento. Relleno con texto ink encima, o sobre night. Nunca texto sobre claro */
  --gp-brass-ink: #855A12;  /* latón oscuro: enlaces y texto de acento sobre claro · 5,4:1 sobre paper */
  --gp-ok:        #2E7A4E;  /* estado bien / ahorro · 4,7:1 sobre paper */
  --gp-warn:      #8F5B00;  /* estado ojo / pendiente de ley · 5,1:1 sobre paper */
  --gp-error:     #B3261E;  /* estado obligatorio / multa · 5,9:1 sobre paper */

  /* ---------- Tipografía ---------- */
  --gp-font-display: "Besley", Georgia, "Times New Roman", serif;
  --gp-font-text:    "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gp-fs-hero:  clamp(2.6rem, 1.6rem + 4.6vw, 5rem);
  --gp-fs-h1:    clamp(2.2rem, 1.5rem + 3vw, 3.5rem);
  --gp-fs-h2:    clamp(1.6rem, 1.25rem + 1.5vw, 2.3rem);
  --gp-fs-h3:    clamp(1.2rem, 1.1rem + .5vw, 1.4rem);
  --gp-fs-body:  1.125rem;
  --gp-fs-small: .9375rem;
  --gp-fs-label: .8125rem;
  --gp-fs-num:   clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem); /* resultado de las calculadoras y precios */

  /* ---------- Forma ---------- */
  --gp-radius-s: 10px;
  --gp-radius-m: 18px;       /* tarjetas */
  --gp-radius-l: 28px;       /* calculadoras y bloques destacados */
  --gp-radius-pill: 999px;   /* botones y etiquetas */
  --gp-shadow: 0 1px 0 rgba(31,38,34,.05), 0 14px 30px -18px rgba(31,61,53,.45);
  --gp-space: 8px;
  --gp-max: 72rem;
  --gp-measure: 66ch;

  /* ---------- Banner de cookies de LaPera (plantilla-tracking.html) ----------
     El botón principal lleva texto blanco: el acento del banner es brass-ink (6,0:1 con blanco). */
  --lp-cookie-bg: var(--gp-night);
  --lp-cookie-text: var(--gp-paper);
  --lp-cookie-muted: #B9C8C1;
  --lp-cookie-border: var(--gp-night-2);
  --lp-cookie-accent: var(--gp-brass-ink);
  --lp-cookie-surface: var(--gp-surface);
  --lp-cookie-ink: var(--gp-ink);
  --lp-cookie-line: var(--gp-line);
  --lp-cookie-stone: var(--gp-ink-2);
  --lp-cookie-radius: var(--gp-radius-s);
  --lp-cookie-font: var(--gp-font-text);
}

/* ---------- Estilos base de la marca ---------- */
body { background: var(--gp-paper); color: var(--gp-ink); font: 400 var(--gp-fs-body)/1.6 var(--gp-font-text); }
h1, h2, .gp-display { font-family: var(--gp-font-display); font-weight: 700; line-height: 1.08; letter-spacing: -0.015em; text-wrap: balance; }
h1 { font-size: var(--gp-fs-h1); }
h2 { font-size: var(--gp-fs-h2); font-weight: 650; }
h3 { font: 650 var(--gp-fs-h3)/1.3 var(--gp-font-text); }
p { max-width: var(--gp-measure); }
a { color: var(--gp-brass-ink); text-decoration-thickness: 1.5px; text-underline-offset: .18em; }
.gp-label { font: 650 var(--gp-fs-label)/1 var(--gp-font-text); text-transform: uppercase; letter-spacing: .08em; }
.gp-label .u, .u { text-transform: none; letter-spacing: .02em; } /* kg, g, kcal: nunca «KG» */
.gp-num { font: 700 var(--gp-fs-num)/1 var(--gp-font-display); font-variant-numeric: lining-nums; }
.gp-tnum { font-variant-numeric: tabular-nums; } /* tablas de precios (Instrument Sans tiene cifras tabulares) */

/* Etiquetas: la chapa pequeña */
.gp-tag { display: inline-flex; align-items: center; gap: .45em; padding: .4em .85em; border-radius: var(--gp-radius-pill);
  font: 650 var(--gp-fs-label)/1.1 var(--gp-font-text); letter-spacing: .02em; background: var(--gp-sage); color: var(--gp-ink); }
.gp-tag::before { content: ""; width: .55em; height: .55em; border-radius: 50%; background: var(--gp-brass); }
.gp-tag--ok::before { background: var(--gp-ok); }
.gp-tag--warn::before { background: var(--gp-warn); }
.gp-tag--error::before { background: var(--gp-error); }

.gp-btn { display: inline-flex; align-items: center; gap: .55em; padding: .85em 1.45em; min-height: 48px;
  font: 650 1.0625rem/1 var(--gp-font-text); border-radius: var(--gp-radius-pill); border: 2px solid transparent;
  text-decoration: none; cursor: pointer; transition: transform .15s ease, background-color .15s ease; }
.gp-btn--brass { background: var(--gp-brass); color: var(--gp-ink); }       /* ink sobre brass: 6,2:1 */
.gp-btn--brass:hover { background: #DDA94D; }
.gp-btn--dark { background: var(--gp-night); color: var(--gp-paper); }
.gp-btn--dark:hover { background: var(--gp-night-2); }
.gp-btn--ghost { background: transparent; color: var(--gp-ink); border-color: var(--gp-ink); }
.gp-btn--ghost:hover { background: var(--gp-ink); color: var(--gp-paper); }
.gp-btn:active { transform: translateY(1px); }
.gp-btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible { outline: 3px solid var(--gp-brass-ink); outline-offset: 2px; }
.gp-dark :focus-visible { outline-color: var(--gp-brass); }
@media (prefers-reduced-motion: reduce) { .gp-btn { transition: none; } }