/* path: grupo-veterinario/landing-descargas/css/base.css
   Tokens, tema, reset y el fondo. Lo que decide cómo se ve TODO.
   Parte de la landing de descargables. El índice de qué hay en cada
   fichero está en `landing-descargas/LEEME.md`. */

/* ─── FICHA TÉCNICA ──────────────────────────────────────
   Display: Bricolage Grotesque. Sans con carácter (ancho variable, corte
   raro en la 'g' y la 'a') que no se parece a nada del feed de Instagram.
   Texto: Instrument Sans.

   Tema: claro por defecto, oscuro bajo prefers-color-scheme. Un solo tema
   por página; ninguna sección se invierte a mitad.

   Acento: UNO por página, y lo decide el pack de la URL. `?g=yorkie` pinta
   la página entera de naranja, `?g=urgencias` de rojo. La consistencia de
   color se mantiene (un acento, toda la página) y a la vez cada enlace de
   campaña se siente distinto, que es lo que promete el reel.          */

:root{
  --acento:#0f6b4f;
  --acento-hondo:#0a4f3a;

  --papel:#f6f7f4;
  --papel-alto:#ffffff;
  --papel-hondo:#eceee7;
  --tinta:#141a17;
  --tinta-media:#4c5a53;
  /* Oscurecido hasta pasar AA (4,5:1) sobre la tarjeta blanca: a 7b8a82 se
     quedaba en 3,62 y el peso del fichero es informacion util, no decoracion. */
  --tinta-tenue:#62706a;
  --linea:#dde1d9;

  --r:14px;
  --r-chico:10px;
  --sombra:0 1px 2px rgb(20 26 23 / .05), 0 8px 24px -12px rgb(20 26 23 / .18);
  --sombra-alta:0 2px 4px rgb(20 26 23 / .06), 0 18px 40px -16px rgb(20 26 23 / .28);

  --display:"Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --sans:"Instrument Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --salida:cubic-bezier(.16,1,.3,1);
}

/* Los packs. Cada uno tiñe la página entera cuando llegas por su enlace. */
[data-pack="yorkie"],[data-pack="chihuahua"]{ --acento:#c2410c; --acento-hondo:#9a3412 }
[data-pack="urgencias"]{ --acento:#b91c1c; --acento-hondo:#911616 }
[data-pack="moquillo"]{ --acento:#1d4ed8; --acento-hondo:#1e40af }
[data-pack="receta"]{ --acento:#a16207; --acento-hondo:#854d0e }
[data-pack="precios"],[data-pack="limpieza"]{ --acento:#0f766e; --acento-hondo:#115e59 }
[data-pack="rottweiler"]{ --acento:#9d174d; --acento-hondo:#831843 }

@media (prefers-color-scheme: dark){
  :root{
    --papel:#0f1613;
    --papel-alto:#171f1b;
    --papel-hondo:#131a17;
    --tinta:#eef2ef;
    --tinta-media:#a6b3ac;
    --tinta-tenue:#7d8b84;
    --linea:#26302b;
    --acento:#34d399;
    --acento-hondo:#6ee7b7;
    --sombra:0 1px 2px rgb(0 0 0 / .4), 0 8px 24px -12px rgb(0 0 0 / .6);
    --sombra-alta:0 2px 4px rgb(0 0 0 / .5), 0 18px 40px -16px rgb(0 0 0 / .7);
  }
  [data-pack="yorkie"],[data-pack="chihuahua"]{ --acento:#fb923c; --acento-hondo:#fdba74 }
  [data-pack="urgencias"]{ --acento:#f87171; --acento-hondo:#fca5a5 }
  [data-pack="moquillo"]{ --acento:#60a5fa; --acento-hondo:#93c5fd }
  [data-pack="receta"]{ --acento:#fbbf24; --acento-hondo:#fcd34d }
  [data-pack="precios"],[data-pack="limpieza"]{ --acento:#2dd4bf; --acento-hondo:#5eead4 }
  [data-pack="rottweiler"]{ --acento:#f472b6; --acento-hondo:#f9a8d4 }
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body{
  font-family:var(--sans);
  background:var(--papel);
  color:var(--tinta);
  line-height:1.55;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* Luz desplazada + grano. No es un fondo plano, y no cuesta ni una petición. */
body::before{
  content:"";
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(58rem 40rem at 78% -8%, color-mix(in oklab, var(--acento) 13%, transparent), transparent 70%),
    radial-gradient(44rem 34rem at -12% 8%, color-mix(in oklab, var(--acento) 7%, transparent), transparent 68%);
  transition:background .5s var(--salida);
}
body::after{
  content:"";
  position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:
    repeating-linear-gradient(90deg, rgb(20 26 23 / .014) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, rgb(20 26 23 / .014) 0 1px, transparent 1px 3px);
}
@media (prefers-color-scheme: dark){ body::after{ opacity:.9 } }

.env{width:min(100% - 2.2rem, 74rem);margin-inline:auto}
@media (min-width:48rem){ .env{width:min(100% - 5rem, 74rem)} }