/* toner color — base de marca compartida (web + panel) */
:root{
  --blue:#1E53E6; --cyan:#16B4E8; --green:#2BA524; --yellow:#FDC500;
  --orange:#FF7A17; --magenta:#EC0C8E; --purple:#8E2DBF; --red:#ED1C24;
  --pink:#F06EC0; --ink:#2E2E2E;

  --bg:#ffffff; --surface:#f6f6f9; --surface-2:#ffffff;
  --fg:#23232a; --muted:#6a6a76; --line:#e7e7ee;
  --radius:14px; --shadow:0 1px 2px rgba(20,20,30,.05), 0 8px 24px rgba(20,20,30,.07);

  --font-display:"Fredoka", ui-rounded, "Segoe UI", system-ui, sans-serif;
  --font-body:"DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{font-family:var(--font-body);color:var(--fg);background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--blue)}
img{max-width:100%}

/* Wordmark toner color (fallback del PNG) */
.tc-wordmark{font-family:var(--font-display);font-weight:700;line-height:1;letter-spacing:-.01em}
.tc-sp{display:inline-block;width:.26em}

/* Botones */
.btn{display:inline-flex;align-items:center;gap:.5rem;border:none;border-radius:999px;
  padding:.7rem 1.2rem;font-family:var(--font-body);font-weight:700;font-size:.95rem;cursor:pointer;
  text-decoration:none;transition:transform .12s ease, filter .12s ease}
.btn:hover{transform:translateY(-1px);filter:brightness(1.03)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--magenta);color:#fff}
.btn-blue{background:var(--blue);color:#fff}
.btn-green{background:var(--green);color:#fff}
.btn-ghost{background:transparent;color:var(--fg);border:1.5px solid var(--line)}
.btn-wa{background:#25D366;color:#fff}

:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:8px}

/* Rainbow bar */
.tc-rainbow{height:6px;border-radius:999px;
  background:linear-gradient(90deg,var(--blue),var(--cyan),var(--green),var(--yellow),var(--orange),var(--magenta),var(--purple),var(--red),var(--pink))}

.tc-pill{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.04em;
  padding:.2rem .6rem;border-radius:999px;color:#fff}

@media (prefers-reduced-motion:reduce){*{transition:none !important}}