/* =====================================================================
   Grupo Perera · tokens de diseño
   Colores medidos sobre los recursos originales (tipografía: DM Sans, la de la web en producción):
   - #0F206B y #2B42A5: píxeles dominantes de logo_Grupo_Perera-2023.png
   - #22A5E5 y #6592E6: acentos del tema Mobirise 2023 (mbr-additional.css)
   Todo el CSS del sitio usa estas variables; no hay valores de marca fuera.
   ===================================================================== */
@font-face{font-family:"DM Sans";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/dmsans-400.woff2") format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/dmsans-500.woff2") format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/dmsans-700.woff2") format("woff2")}

:root{
  /* Color de marca (HSL para derivar variantes) */
  --azul-h:229;
  --azul-900:hsl(229 75% 24%);   /* #0F206B, logotipo */
  --azul-950:hsl(229 78% 17%);
  --azul-700:hsl(229 59% 41%);   /* #2B42A5, logotipo */
  --azul-500:hsl(219 72% 65%);   /* #6592E6 */
  --celeste:hsl(200 78% 52%);    /* #22A5E5, solo decorativo: no cumple AA como texto sobre blanco */
  --celeste-claro:hsl(200 80% 78%);

  /* Neutros */
  --blanco:#fff;
  --gris-50:hsl(222 60% 98%);
  --gris-100:hsl(222 55% 95%);
  --gris-200:hsl(222 35% 88%);
  --gris-500:hsl(226 12% 42%);
  --gris-700:hsl(228 18% 26%);
  --tinta:hsl(229 40% 13%);

  /* Usos */
  --c-fondo:var(--blanco);
  --c-fondo-suave:var(--gris-50);
  --c-fondo-azul-claro:hsl(220 90% 95%);
  --c-texto:var(--gris-700);
  --c-titulo:var(--azul-900);
  --c-texto-suave:var(--gris-500);
  --c-enlace:var(--azul-700);
  --c-borde:var(--gris-200);
  --c-sobre-azul:#fff;
  --c-sobre-azul-suave:hsl(220 60% 88%);
  --c-foco:hsl(200 90% 45%);

  /* Gradientes */
  --g-panel:linear-gradient(155deg,var(--azul-700) 0%,var(--azul-900) 55%,var(--azul-950) 100%);
  --g-banda:linear-gradient(120deg,var(--azul-900),var(--azul-950));
  --g-suave:linear-gradient(180deg,var(--c-fondo-azul-claro),var(--gris-50));
  --velo-foto:linear-gradient(180deg,hsl(226 70% 42% / .28),hsl(229 70% 30% / .42) 45%,hsl(229 75% 18% / .62));
  --c-cabecera:hsl(220 55% 92% / .94);
  --lavanda:hsl(232 80% 90%);

  /* Tipografía */
  --f-display:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-texto:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fs-xs:.8125rem;
  --fs-s:.9375rem;
  --fs-m:1.0625rem;
  --fs-l:clamp(1.125rem,1.05rem + .35vw,1.3125rem);
  --fs-h3:clamp(1.1875rem,1.1rem + .4vw,1.375rem);
  --fs-h2:clamp(1.625rem,1.3rem + 1.4vw,2.375rem);
  --fs-h1:clamp(1.9rem,1.4rem + 2.2vw,3.1rem);
  --lh-t:1.12;
  --lh-c:1.65;
  --medida:65ch;

  /* Espaciado */
  --e-1:.25rem; --e-2:.5rem; --e-3:.75rem; --e-4:1rem; --e-5:1.5rem;
  --e-6:2rem; --e-7:3rem; --e-8:4rem; --e-9:6rem;
  --seccion:clamp(3.5rem,2.5rem + 4vw,6.5rem);
  --gutter:clamp(1rem,.6rem + 2vw,2rem);
  --ancho:1200px;
  --ancho-texto:760px;

  /* Forma */
  --r-s:3px; --r-m:4px; --r-l:6px;
  --sombra-1:0 1px 2px hsl(229 50% 20% / .06),0 2px 8px hsl(229 50% 20% / .06);
  --sombra-2:0 6px 24px hsl(229 60% 20% / .12);
  --borde:1px solid var(--c-borde);

  /* Movimiento (capa artemovil-movimiento) */
  --t-fast:.18s; --t:.28s; --t-slow:.6s;
  --ease:cubic-bezier(.25,.6,.3,1);
  --ease-out:cubic-bezier(.22,1,.36,1);

  /* Capas */
  --z-cabecera:50; --z-barra:60; --z-visor:100;
  --alto-cabecera:72px;
}