/*
 * VG7 Group: marca. Lo carga el tema padre después de vg7.css.
 * Fuentes locales (Montserrat 600-800 títulos, Poppins 400-600 texto, subconjunto latino) y los tokens del diseño
 * aprobado (disenos/viva-group/css/styles.css). Las variables --vg7-* las lee el tema padre.
 * Insurance redefine --brand y compañía en su propio bloque/clase (no aquí).
 */
@font-face{font-family:"Montserrat";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/montserrat-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/montserrat-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:800;font-display:swap;src:url("../fonts/montserrat-latin-800-normal.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/poppins-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/poppins-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/poppins-latin-600-normal.woff2") format("woff2")}

/* ---------- 1. Tokens ---------- */
:root{
  --brand:#006aff;
  --brand-700:#0052cc;
  --brand-900:#001e5c;
  /* El mismo azul en componentes, para poder escribir rgba() con él. Sin esto
     cada borde y cada sombra llevaría el color escrito a mano y una página con
     otro color de marca (Insurance) se quedaría a medias. */
  --brand-rgb:0,106,255;
  /* Versiones claras, para cuando el color va SOBRE FONDO OSCURO. */
  --brand-light:#6fb4ff;
  --brand-soft:#8ec5ff;
  --ink:#00072b;
  --ink-soft:#0b1436;
  --sky:#dbeaff;
  --sky-deep:#b9d6ff;
  --paper:#f9f9f9;
  --white:#ffffff;

  --text:#0d1533;
  --text-muted:#5a6486;
  --text-on-dark:rgba(255,255,255,.76);
  --line:rgba(0,7,43,.10);
  --line-dark:rgba(255,255,255,.14);

  --font-display:'Montserrat',system-ui,sans-serif;
  --font-body:'Poppins',system-ui,sans-serif;

  --r-sm:14px; --r-md:22px; --r-lg:32px; --r-xl:44px; --r-pill:999px;

  --shadow-sm:0 2px 8px rgba(0,7,43,.06);
  --shadow-md:0 18px 44px -22px rgba(0,7,43,.28);
  --shadow-lg:0 40px 90px -40px rgba(0,30,92,.45);
  --shadow-brand:0 22px 50px -22px rgba(var(--brand-rgb),.65);

  /* El header es fijo y flota, asi que el hero se separa a partir de su altura.
     Este valor es el correcto hoy; main.js lo re-mide al cargar y al redimensionar
     para que siga cuadrando si cambia el contenido del header. */
  --header-top:16px;
  --header-h:78px;
  --header-gap:22px;

  --pad-x:clamp(20px,5vw,64px);
  --section-y:clamp(56px,7vw,104px);
  --maxw:1320px;

  --ease:cubic-bezier(.22,1,.36,1);

  --check:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  --plus:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='%23006aff' stroke-width='2.5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
}

/* Variables del tema padre con los valores de Viva Group */
:root{
  --vg7-accent:var(--brand); --vg7-accent-2:var(--brand-700); --vg7-on-accent:#fff;
  --vg7-ink:var(--ink); --vg7-ink-2:var(--ink-soft);
  --vg7-fg:var(--text); --vg7-muted:var(--text-muted); --vg7-line:var(--line);
  --vg7-paper:var(--paper); --vg7-mist:var(--sky); --vg7-soft:var(--sky-deep);
  --vg7-font-display:var(--font-display); --vg7-font-body:var(--font-body);
  --vg7-radius:var(--r-pill); --vg7-header-h:calc(var(--header-top) + var(--header-h)); --vg7-wrap:var(--maxw);
}