@font-face{font-family:"Bricolage Grotesque";src:url(/assets/fonts/Bricolage-Grotesque.woff2) format("woff2");font-weight:500 800;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(/assets/fonts/Instrument-Sans.woff2) format("woff2");font-weight:400 600;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/assets/fonts/JetBrains-Mono.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --paper:#EFF2EE;--surface:#FBFCFA;--ink:#101A33;--muted:#4F5A75;--line:#D2D9D0;
  --accent:#3A3FE4;--on-accent:#fff;
  --c1:#D6DCFF;--c2:#FFE7A3;--c3:#C9EBD4;
  --display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --body:"Instrument Sans",ui-sans-serif,system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --wrap:1040px;
}
@media (prefers-color-scheme:dark){:root{
  --paper:#0E1325;--surface:#151B33;--ink:#E7EAF7;--muted:#A0A9C6;--line:#262E4D;
  --accent:#8F95FF;--on-accent:#0E1325;
  --c1:#2A3170;--c2:#5A4A12;--c3:#1E4A36;
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.7 var(--body)}
a{color:var(--accent);text-underline-offset:3px}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}

.site-header,main,.site-footer{max-width:var(--wrap);margin:0 auto;padding-left:20px;padding-right:20px}
.site-header{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding-top:18px;padding-bottom:18px}
.brand{display:flex;align-items:center;gap:10px;font:700 1.1rem/1 var(--display);color:var(--ink);text-decoration:none;letter-spacing:-.01em}
.mark{display:block}
.site-header nav{display:flex;gap:20px;align-items:center;font-weight:500}
.site-header nav a{color:var(--ink);text-decoration:none;margin:0}
.site-header nav a:hover{color:var(--accent);text-decoration:underline}
.site-header nav a[hreflang]{border:1px solid var(--line);border-radius:999px;padding:2px 12px;font-size:.9rem}

main{padding-top:8px;padding-bottom:24px}
h1,h2,h3{font-family:var(--display);color:var(--ink);letter-spacing:-.015em}
h1{font-size:clamp(1.9rem,4.5vw,2.7rem);line-height:1.15;font-weight:700;margin:32px 0 20px}
h2{font-size:1.5rem;line-height:1.25;font-weight:700;margin:44px 0 12px}
h3{font-size:1.1rem;font-weight:600;margin:24px 0 4px}

/* Hero: el titular se lee como lo lee un modelo, en tokens */
.hero{padding:48px 0 40px}
.hero h1{font-size:clamp(2.3rem,7.2vw,4.6rem);line-height:1.2;font-weight:800;letter-spacing:-.025em;margin:0 0 28px;max-width:16ch}
.tok{display:inline-block;padding:0 .07em;margin:.04em 2px;border-radius:.16em;background:var(--c1);line-height:1.05}
.tok:nth-child(3n+2){background:var(--c2)}
.tok:nth-child(3n){background:var(--c3)}
.tok.w{margin-left:.3em}
.hero h1.plain{max-width:20ch}
.hero-sub{max-width:56ch;font-size:1.15rem;color:var(--muted);margin:0 0 28px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.btn,button{display:inline-block;padding:11px 20px;border:2px solid var(--accent);border-radius:8px;background:var(--accent);color:var(--on-accent);font:600 1rem/1.2 var(--body);text-decoration:none;cursor:pointer}
.btn:hover,button:hover{filter:brightness(1.08)}
.btn.ghost,button.ghost{background:transparent;color:var(--accent)}
@media (prefers-reduced-motion:no-preference){
  .hero .tok{animation:tok-in .5s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(var(--i)*55ms)}
  @keyframes tok-in{from{opacity:0;transform:translateY(.35em) scale(.92)}}
}

/* Tarifa de herramientas */
.rates{margin:8px 0 0;padding:0;list-style:none;border-bottom:1px solid var(--line)}
.rate{display:grid;grid-template-columns:1fr auto;gap:4px 24px;align-items:baseline;padding:22px 4px;border-top:1px solid var(--line);color:var(--ink);text-decoration:none}
.rate:hover{background:var(--surface)}
.rate:hover .rate-name{color:var(--accent);text-decoration:underline;text-underline-offset:4px}
.rate-name{font:700 1.3rem/1.25 var(--display);letter-spacing:-.01em}
.rate-desc{grid-column:1;color:var(--muted);margin:0;max-width:60ch}
.rate-hint{grid-column:2;grid-row:1 / span 2;align-self:center;font:500 .85rem/1.3 var(--mono);color:var(--accent);text-align:right}
@media (max-width:620px){.rate{grid-template-columns:1fr}.rate-hint{grid-column:1;grid-row:auto;text-align:left;margin-top:4px}}
.section-title{margin-top:48px}

/* Instrumento (formulario de cada herramienta) */
.instrument{background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--accent);border-radius:10px;padding:8px 20px 22px;margin:8px 0 8px}
label{display:block;margin:16px 0 6px;font-weight:600;font-size:.95rem}
input,textarea,select{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);font:500 1rem/1.4 var(--mono)}
textarea{resize:vertical}
input:focus-visible,textarea:focus-visible{outline-offset:1px}
form button{margin:20px 12px 0 0}
.result{margin-top:20px;padding:16px;border:1px dashed var(--line);border-radius:8px;min-height:3.5em;font:500 1.15rem/1.5 var(--mono);color:var(--accent);word-break:break-word}
.result{white-space:pre-line}
pre.result{color:var(--ink);font-size:.95rem}
.instrument small{color:var(--muted)}
.ad-slot{min-height:100px;margin:28px 0}

/* Artículo */
article{max-width:68ch;margin-top:12px}
article ol{padding-left:1.3em}
article li{margin:6px 0}
article h3{color:var(--ink)}

.site-footer{margin-top:56px;padding-top:24px;padding-bottom:40px;border-top:1px solid var(--line);color:var(--muted);font-size:.92rem}
.site-footer p{margin:6px 0}
.site-footer a{color:var(--muted)}
.site-footer a:hover{color:var(--accent)}

#cookie-banner{position:fixed;left:12px;right:12px;bottom:12px;max-width:640px;margin:0 auto;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:14px 16px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;box-shadow:0 8px 30px rgb(0 0 0/.18)}
#cookie-banner[hidden]{display:none}
#cookie-banner span{flex:1 1 240px;font-size:.95rem}
#cookie-banner button{margin:0;padding:9px 16px}
#cookie-reject{background:transparent;color:var(--accent)}