/* Grupo Esfera — tokens de SITIO WEB (grupoesfera.com.ar, Wix Studio).
   OJO: no confundir con los tokens de pieza social (1080px). El sitio tiene
   su propia escala, su propio fondo (casi blanco, NO crema) y titulares en Dosis. */
:root{
  /* --- Breakpoints (defaults de Wix Studio) --- */
  --bp-mobile-max:750px;
  --bp-tablet-min:751px;
  --bp-tablet-max:1000px;
  --bp-desktop-min:1001px;
  --bp-desktop-ancho:1441px;   /* opcional: solo si hace falta acotar el contenido */

  /* --- Contenedor y grilla --- */
  --web-max:1280px;            /* ancho máximo del contenido, centrado */
  --web-margen:80px;           /* margen lateral desktop */
  --web-margen-tablet:48px;
  --web-margen-mobile:24px;
  --web-columnas:12; /* @kind other */
  --web-gutter:24px;

  /* --- Ritmo vertical de secciones --- */
  --sec-y:120px;               /* padding arriba/abajo de una sección, desktop */
  --sec-y-tablet:88px;
  --sec-y-mobile:64px;
  --sec-y-compacta:72px;       /* franjas de datos, logos, CTA */
  --sec-gap:48px;              /* del marcador de sección al contenido */
  --sec-gap-mobile:32px;

  /* --- Tipografía web --- */
  /* En web los titulares son DOSIS (no Inter, como en las piezas sociales). */
  --font-titular-web:"Dosis",system-ui,sans-serif;
  --weight-titular-web:600;
  --weight-titular-web-fuerte:700;
  --font-cuerpo-web:"Inter GE Text","Inter GE",system-ui,sans-serif;

  /* Desktop */
  --web-display:64px;          /* título de página en hero */
  --web-h1:48px;
  --web-h2:36px;               /* título de sección */
  --web-h3:24px;               /* título de card */
  --web-lead:20px;             /* bajada / primer párrafo (Inter Bold) */
  --web-body:17px;
  --web-small:15px;
  --web-label:13px;            /* volanta en Anka Coder mayúsculas */

  /* Mobile (≤750px) */
  --web-display-mobile:40px;
  --web-h1-mobile:34px;
  --web-h2-mobile:28px;
  --web-h3-mobile:21px;
  --web-lead-mobile:18px;
  --web-body-mobile:16px;

  --web-lh-titulo:1.15; /* @kind other */
  --web-lh-lead:1.45; /* @kind other */
  --web-lh-body:1.6; /* @kind other */
  --web-medida:68ch;           /* medida máxima de un párrafo */

  /* --- Superficies del sitio --- */
  --web-fondo:#fafafa;         /* fondo de página. NO es crema */
  --web-fondo-alt:#f6f4f9;     /* banda alterna, tinte frío casi imperceptible */
  --web-card:#ffffff;
  --web-borde-card:#ece9f0;
  --web-texto:#1a1a1a;
  --web-texto-2:#4b4b4b;       /* párrafos de cuerpo */
  --web-texto-3:#7a7a7a;       /* metadatos, pies */

  /* --- Chrome --- */
  --header-h:88px;
  --header-h-mobile:64px;
  --footer-fondo:#1f1f1f;
  --banda-header:200px;        /* alto de la banda de color bajo el header */
  --banda-header-mobile:140px;

  /* --- Formas e interacción --- */
  --web-radio-card:24px;
  --web-radio-caja:16px;
  --web-radio-pill:999px;
  --web-sombra-card:0 2px 10px rgba(26,26,26,.05);
  --web-sombra-card-hover:0 10px 28px rgba(26,26,26,.10);
  --dur-web:180ms; /* @kind other */
  --ease-web:cubic-bezier(.2,.7,.2,1); /* @kind other */
  --tap-min:44px;              /* alto mínimo de cualquier target táctil */
  --foco-web:3px;              /* grosor del anillo de foco, en color de acento */
}