/* ============================================================
   Solingua — Design tokens + base + reset
   Las variables de color se sobrescriben en runtime desde el
   panel de opciones (inc/dynamic-css.php → <style id="solingua-vars">).
   Los valores de aquí son el fallback por defecto.
   ============================================================ */
:root{
  --lime:#C1EA20;
  --lime-dim:#A6C71A;
  --lime-soft:#D4FF3F;
  --night:#FFFFFF;          /* canvas = blanco */
  --night-2:#F4F5F0;
  --card:#FFFFFF;
  --violet:#6F2DFF;
  --violet-glow:#8B5CFF;
  --coral:#FF5E3A;
  --sky:#16C8C0;
  --pink:#F0468C;
  --ink:#0B111F;
  --paper:#FFFFFF;
  --txt:#13171C;
  --txt-dim:#5A626E;
  --txt-faint:#9098A4;
  --gold:#FFC83D;
  --line:rgba(11,17,31,0.10);
  --line-2:rgba(11,17,31,0.16);
  --r:18px;--r-lg:28px;--r-xl:36px;
  --ease:cubic-bezier(0.16,1,0.3,1);
  --sol-font-display:'Poppins',sans-serif;
  --sol-font-body:'Inter',sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{font-family:var(--sol-font-body);background:var(--night);color:var(--txt);line-height:1.6;font-size:16px;overflow-x:hidden}
.disp,.serif{font-family:var(--sol-font-display);font-optical-sizing:auto}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
::selection{background:var(--lime);color:var(--ink)}
.wrap{max-width:1240px;margin:0 auto;padding:0 2rem}

/* botones base compartidos */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:600;font-size:15px;border-radius:100px;cursor:pointer;border:none;font-family:inherit;transition:transform .3s var(--ease),box-shadow .3s,background .3s,color .3s}
.btn-lime{background:var(--violet);color:#fff;padding:12px 24px;box-shadow:0 8px 22px -6px rgba(108,77,246,0.45)}
.btn-lime:hover{transform:translateY(-2px);box-shadow:0 14px 34px -8px rgba(108,77,246,0.55)}
.btn-violet{background:var(--violet);color:#fff;padding:13px 26px;box-shadow:0 8px 22px -6px rgba(108,77,246,0.45)}
.btn-violet:hover{transform:translateY(-2px);box-shadow:0 14px 32px -8px rgba(108,77,246,0.55)}
.btn-ghost{background:transparent;color:var(--txt);padding:12px 22px;border:1px solid var(--line-2)}
.btn-ghost:hover{border-color:var(--txt);transform:translateY(-2px)}
.btn-night{background:var(--ink);color:#fff;padding:16px 32px}
.btn-night:hover{transform:translateY(-2px)}
.btn-lg{padding:16px 32px;font-size:16px}

/* reveal on scroll (IntersectionObserver en main.js) */
.rv{opacity:0;transform:translateY(30px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}

@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* accesibilidad */
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:9999;background:var(--ink);color:#fff;padding:12px 18px;border-radius:0 0 12px 0}
.skip-link:focus{left:0}
:focus-visible{outline:2px solid var(--violet);outline-offset:2px}