/* ================================================================
   Temas Eidetic — redefinen los tokens según [data-theme].
   El tema por defecto (sin atributo) es "Azul" (ver main.css :root).
   Paleta de marca: #ffe500 #fed960 #bcde1b #20a8ed #304cf8 #4dd16b
   ================================================================ */

/* A · Azul protagonista (por defecto en :root) — reafirmado aquí */
:root[data-theme="azul"]{
  --bg:#ffffff;--surface:#ffffff;--surface-2:#f5f7fb;
  --ink:#0e1116;--ink-soft:#565d68;--ink-faint:#9aa1ac;--line:#e8ebf2;--line-2:#dfe3ec;
  --accent:#304cf8;--accent-2:#20a8ed;--accent-ink:#ffffff;--accent-soft:#eaeeff;
}

/* B · Multicolor jugueton */
:root[data-theme="multicolor"]{
  --bg:#ffffff;--surface:#ffffff;--surface-2:#f7f7f8;
  --ink:#15181d;--ink-soft:#555b64;--ink-faint:#9aa0a8;--line:#ececef;--line-2:#e2e3e7;
  --accent:#304cf8;--accent-2:#4dd16b;--accent-ink:#ffffff;--accent-soft:#fff6c9;
}
/* toques de color por sección (solo en multicolor) */
:root[data-theme="multicolor"] .grid-feats .card:nth-child(1) .card__ic{background:#eab308}
:root[data-theme="multicolor"] .grid-feats .card:nth-child(2) .card__ic{background:#20a8ed}
:root[data-theme="multicolor"] .grid-feats .card:nth-child(3) .card__ic{background:#4dd16b}
:root[data-theme="multicolor"] .grid-feats .card:nth-child(1){background:linear-gradient(180deg,#fffdf2,#fff)}
:root[data-theme="multicolor"] .grid-feats .card:nth-child(2){background:linear-gradient(180deg,#f2fbff,#fff)}
:root[data-theme="multicolor"] .grid-feats .card:nth-child(3){background:linear-gradient(180deg,#f3fdf5,#fff)}

/* C · Tinta oscura + acentos vivos (neón) */
:root[data-theme="oscuro"]{
  --bg:#0c0e13;--surface:#14171f;--surface-2:#12141b;
  --ink:#e9eaef;--ink-soft:#a4abb8;--ink-faint:#6b7280;--line:#20242e;--line-2:#2b303b;
  --accent:#20a8ed;--accent-2:#4dd16b;--accent-ink:#04121b;--accent-soft:#152433;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 40px rgba(0,0,0,.5);
}
:root[data-theme="oscuro"] .hero .grad{background:linear-gradient(100deg,#20a8ed,#4dd16b);-webkit-background-clip:text;background-clip:text;color:transparent}
:root[data-theme="oscuro"] .cta{background:#05070b;border:1px solid var(--line)}
:root[data-theme="oscuro"] .cta .btn--primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
:root[data-theme="oscuro"] .btn--dark{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}

/* D · Lima / verde */
:root[data-theme="lima"]{
  --bg:#fbfdf6;--surface:#ffffff;--surface-2:#f3f8ec;
  --ink:#14201a;--ink-soft:#4f5d54;--ink-faint:#93a394;--line:#e6efdf;--line-2:#dcead2;
  --accent:#37b24d;--accent-2:#bcde1b;--accent-ink:#ffffff;--accent-soft:#e8f6df;
}
:root[data-theme="lima"] .hero .grad{background:linear-gradient(100deg,#37b24d,#bcde1b);-webkit-background-clip:text;background-clip:text;color:transparent}

/* E · V18 — pastel cálido */
:root[data-theme="v18"]{
  --bg:#F8F5F0;--surface:#FFFFFF;--surface-2:#F0EDE8;--surface-3:#E6E2DC;
  --ink:#2E3138;--ink-soft:#6A6E78;--ink-faint:#A2A6AF;--line:#E3DFD8;--line-2:#D8D3CB;
  --accent:#304cf8;--accent-2:#6B8BFF;--accent-ink:#FFFFFF;--accent-soft:#EAEDFF;
  --rose:#D4A88C;--dorado:#D4B895;
  --shadow:0 4px 24px rgba(107,143,163,.08);
  --font:'DM Sans',system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --font-display:'DM Serif Display',Georgia,serif;
}
:root[data-theme="v18"] .hero .grad{background:linear-gradient(100deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
:root[data-theme="v18"] .brand__mark{background:linear-gradient(135deg,var(--accent),var(--accent-2))}
:root[data-theme="v18"] .tech{background:#1a1e2e}
:root[data-theme="v18"] .tech .veil{background:radial-gradient(90% 120% at 15% 0,rgba(48,76,248,.28),transparent 60%)}
:root[data-theme="v18"] .tech .eyebrow{color:var(--accent-2)}
:root[data-theme="v18"] .cap-i .dot{background:var(--accent-2);box-shadow:0 0 10px var(--accent-2)}
:root[data-theme="v18"] .cap-i .ib{color:var(--accent-2);background:rgba(107,139,255,.12);border-color:rgba(107,139,255,.28)}
:root[data-theme="v18"] .cap-i:hover{border-color:rgba(107,139,255,.4)}
:root[data-theme="v18"] .cta{background:var(--ink)}
:root[data-theme="v18"] .side__me .av{background:linear-gradient(135deg,var(--rose),var(--dorado))}