/*
 * esbellsa-blocks — Base compartida del rediseño (Fase de Diseño · Dir 2 "Beauty-tech · mecha cian").
 * Tokens de marca (paleta del logo) + tipografía self-hosted (sin CDN, RGPD/CWV, consistente con F4a).
 * Dependencia de score-block / scores-product / pros-cons-* / toc-*.
 */

/* --- Tipografía self-hosted (latin, cubre castellano) --- */
@font-face{
  font-family:"Space Grotesk"; font-style:normal; font-weight:500; font-display:swap;
  src:url("../fonts/SpaceGrotesk-500.woff2") format("woff2");
}
@font-face{
  font-family:"Space Grotesk"; font-style:normal; font-weight:600; font-display:swap;
  src:url("../fonts/SpaceGrotesk-600.woff2") format("woff2");
}
@font-face{
  font-family:"Space Grotesk"; font-style:normal; font-weight:700; font-display:swap;
  src:url("../fonts/SpaceGrotesk-700.woff2") format("woff2");
}
@font-face{
  font-family:"Inter esbellsa"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/Inter-400.woff2") format("woff2");
}
@font-face{
  font-family:"Inter esbellsa"; font-style:normal; font-weight:600; font-display:swap;
  src:url("../fonts/Inter-600.woff2") format("woff2");
}
@font-face{
  font-family:"Inter esbellsa"; font-style:normal; font-weight:700; font-display:swap;
  src:url("../fonts/Inter-700.woff2") format("woff2");
}

/* --- Tokens Dir 2 (paleta del logo) --- */
:root{
  --esb-brand:#3D6BEE;      /* azul royal — relleno gráfico */
  --esb-brand-ink:#2E54C8;  /* azul texto/enlaces (AA) */
  --esb-cyan:#15C6C1;       /* cian — solo relleno/arco, nunca texto */
  --esb-ink:#131C3B;        /* titular navy */
  --esb-text:#3A3F51;       /* cuerpo */
  --esb-muted:#5A647A;      /* labels, /10 */
  --esb-line:#E4E9F2;       /* bordes hairline */
  --esb-track:#EDF1F8;      /* pistas de barra/anillo */
  --esb-canvas:#F6F8FC;
  --esb-pro:#0C7A74;        /* a favor (teal sobrio) */
  --esb-pro-tint:#E6F4F2;
  --esb-con:#B34A41;        /* en contra (coral sobrio) */
  --esb-con-tint:#F7EBE9;
  --esb-grad:linear-gradient(120deg,#3D6BEE,#15C6C1);
  --esb-hover:#EEF3FF;      /* hover azulado (flechas, items de lista) */
  --esb-divider:#E4EAF4;    /* divisor/etiqueta sombreada en tablas */
  --esb-display:"Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --esb-body:"Inter esbellsa", system-ui, -apple-system, "Segoe UI", sans-serif;
  --esb-radius:12px;
  --esb-shadow:0 1px 2px rgba(19,28,63,.05);
}

/* --- Icono por ítem en pros/contras (check / cruz, SVG inline) --- */
.esb-pc-ic{ width:18px; height:18px; flex:0 0 auto; margin-top:2px; display:block; }
.esb-pc-ic-pro{ fill:var(--esb-pro); }
.esb-pc-ic-con{ fill:var(--esb-con); }