/* NutriLoPets — tokens del sistema de diseño v1.0 (mockup).
   Fuente: diseno/design.md y diseno/sistema-de-diseno.html. */
/* Fuentes alojadas en el sitio (sin Google Fonts). Subconjunto latin (cubre español),
   de @fontsource 5.3.0, licencia OFL en assets/fonts/. Outfit se precarga desde el <head>.
   Newsreader (citas y frase de apertura, muy abajo en la página) se declara aparte en
   css/serif.css, que se carga sin bloquear y después del load; mientras llega, cae a Georgia
   (var(--font-serif) más abajo). */
@font-face {
  font-family: "Outfit"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../assets/fonts/outfit-latin-wght-normal.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --green-900: #0A3326;
  --green-800: #0F4B35;
  --green-700: #1F6F4E;
  --green-100: #DCEBE2;
  --lima: #CFE654;
  --lima-soft: #E6F1A6;
  --lima-line: #7C9A10;
  --salvia: #CFE3DA;   --salvia-soft: #E6F1EC;   --salvia-line: #4E8F75;
  --sol: #F8E58A;      --sol-soft: #FCF3C4;      --sol-line: #B8920A;
  --rosa: #F2C6DB;     --rosa-line: #C2759B;
  --cielo: #B9D2F5;    --cielo-line: #5A84D8;
  --lavanda: #CDB4F6;  --lavanda-line: #8A63D8;
  --white: #FFFFFF;
  --page: #F1F6F2;
  --cloud: #E4EDE8;
  --line: #D3DFD8;
  --line-strong: #AFC2B8;   /* decorativo (separadores, asa del panel): 1,9 : 1, no sirve para identificar un control */
  --line-input: #768D82;    /* borde de campos, botones de especie, puntos del riel y barras de onda: 3,6 : 1 sobre blanco, 3,3 : 1 sobre bruma */
  --text: #233B33;
  --muted: #566A62;
  --sand: #D7E4DC;
  --danger: #B42318;
  --danger-soft: #FDE7E4;
  --focus: #2F6BFF;
  --font: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --r-panel: 40px; --r-xl: 28px; --r-lg: 20px; --r-md: 14px; --r-pill: 999px;
  --sh-2: 0 14px 34px -16px rgba(10, 51, 38, .28);
  --sh-float: 0 26px 50px -22px rgba(10, 51, 38, .4);
  --ease: cubic-bezier(.22, .61, .36, 1);
}
/* En celular (menos de 760 px) el panel baja a 28 px y la tarjeta a 22 px (design.md, sección 4). */
@media (max-width: 759px) { :root { --r-panel: 28px; --r-xl: 22px; } }