/*
 * VG7 Hoverdots: marca. Lo carga el tema padre después de vg7.css.
 * Variables propias del diseño (--ink, --violet...) y las --vg7-* que lee el tema padre.
 */
@font-face{font-family:"Syne";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/syne-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Syne";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/syne-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Syne";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/syne-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Syne";font-style:normal;font-weight:800;font-display:swap;src:url("../fonts/syne-latin-800-normal.woff2") format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:100 1000;font-display:swap;src:url("../fonts/dm-sans-latin-wght-normal.woff2") format("woff2")}
@font-face{font-family:"DM Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/dm-mono-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"DM Mono";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/dm-mono-latin-500-normal.woff2") format("woff2")}

:root{color-scheme: light;
  --paper:#FFFFFF;
  --ink:#1D1729;          /* berenjena de Hoverdots: paneles y texto */
  --ink-2:#2A2140;
  --violet:#7243F2;       /* violeta de Hoverdots: acción principal */
  --violet-2:#A58BFF;     /* violeta legible sobre berenjena */
  --violet-3:#DCD3F7;
  --magenta:#CC3366;      /* acento secundario, solo en detalles */
  --error:#B02A56;
  --lilac:#F4F2F9;
  --lilac-2:#EAE6F4;
  --line:#E6E2EF;
  --muted:#6C6A72;
  --on-ink:#FFFFFF;
  --on-ink-muted:#A59FB5;
  --on-ink-dim:#6F6687;
  --line-ink:rgba(255,255,255,.12);

  --f-display:"Syne","Arial Black",system-ui,sans-serif;
  --f-body:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"DM Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* Curvas: las de la referencia (IX2) + las de Emil para UI */
  --out-quart:cubic-bezier(.25,1,.5,1);
  --out-quint:cubic-bezier(.22,1,.36,1);
  --out-quad:cubic-bezier(.5,1,.89,1);
  --in-out:cubic-bezier(.77,0,.175,1);
  --in-out-back:cubic-bezier(.68,-.6,.32,1.6);
  --ease-out:cubic-bezier(.23,1,.32,1);

  --gutter:clamp(16px,2.4vw,32px);
  --inset:clamp(8px,1.1vw,16px);
  --r-panel:clamp(20px,2vw,28px);
  --section:clamp(88px,10vw,144px);
  --night:#110B21;        /* morado casi negro: cierre de servicios */
  --in-out-quad:cubic-bezier(.45,0,.55,1);}


/* Variables del tema padre con los valores de Hoverdots */
:root{
  --vg7-accent:var(--violet); --vg7-accent-2:var(--violet-2); --vg7-on-accent:#fff;
  --vg7-ink:var(--ink); --vg7-ink-2:var(--ink-2);
  --vg7-fg:var(--ink); --vg7-muted:var(--muted); --vg7-line:var(--line);
  --vg7-paper:var(--paper); --vg7-mist:var(--lilac); --vg7-soft:var(--lilac-2);
  --vg7-font-display:var(--f-display); --vg7-font-body:var(--f-body); --vg7-font-mono:var(--f-mono);
  --vg7-radius:999px; --vg7-header-h:72px; --vg7-wrap:1440px;
}