/* Touching Sound — shared shell (tokens, nav, footer, buttons, toggle).
   Page-specific section styles live in each page's own <style>. */
:root{
  --bg:oklch(0.985 0.004 90); --ink:#1c1b1a; --muted:oklch(0.45 0.01 90);
  --soft:oklch(0.42 0.01 90); --line:oklch(0.9 0.008 90); --line2:oklch(0.92 0.008 90);
  --link:oklch(0.5 0.15 265);
  --orange:oklch(0.70 0.16 45); --amber:oklch(0.78 0.14 60); --teal:oklch(0.73 0.12 195);
  --blue:oklch(0.72 0.12 235); --indigo:oklch(0.58 0.15 265); --violet:oklch(0.55 0.17 300);
  --magenta:oklch(0.62 0.18 320); --pink:oklch(0.60 0.17 340); --rose:oklch(0.68 0.16 355);
  --lime:oklch(0.85 0.21 130);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Archivo,system-ui,sans-serif;line-height:1.5}
img{display:block;max-width:100%}
a{color:var(--link);text-decoration:none}
h1,h2,h3{margin:0}
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,56px)}
.mono{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:0.14em;text-transform:uppercase}
.eyebrow{color:oklch(0.5 0.05 265);margin-bottom:16px}
.serif{font-family:Newsreader,serif}
/* language visibility — keyed on <html lang> */
html:lang(en) [data-lang="es"], html:lang(es) [data-lang="en"]{display:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--indigo);outline-offset:3px;border-radius:3px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}}

/* NAV */
nav{position:sticky;top:0;z-index:100;background:oklch(0.985 0.004 90 / .85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line2)}
.nav-in{max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,56px);height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:17px;letter-spacing:-0.02em;color:var(--ink)}
.brand svg{display:block;flex:none}
.nav-links{display:flex;align-items:center;gap:clamp(16px,3vw,32px);font-size:13px;font-weight:500}
.nav-links a{color:var(--ink)}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--indigo)}
.lang-toggle{border:1.5px solid var(--ink);background:transparent;color:var(--ink);border-radius:100px;padding:5px 13px;font-family:Archivo,sans-serif;font-size:11px;font-weight:600;letter-spacing:0.08em;cursor:pointer;transition:background .15s,color .15s}
.lang-toggle:hover{background:var(--ink);color:#fff}

/* BUTTONS */
.btn{border-radius:100px;padding:13px 26px;font-size:13.5px;font-weight:600;transition:all .15s;display:inline-block}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:oklch(0.3 0.02 265);color:#fff}
.btn-outline{border:1.5px solid oklch(0.6 0.02 280);color:var(--ink)}
.btn-outline:hover{border-color:var(--ink)}

.card{background:#fff;border:1px solid var(--line);border-radius:14px}

/* generic section rhythm */
.sec{max-width:1180px;margin:0 auto;padding:clamp(44px,6vw,64px) clamp(20px,4vw,56px) 0}

/* FOOTER */
footer{border-top:1px solid var(--line2);background:var(--bg)}
.foot-in{max-width:1180px;margin:0 auto;padding:26px clamp(20px,4vw,56px);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;font-size:12.5px;color:oklch(0.5 0.01 90)}
.foot-in .fb{font-weight:600;color:var(--ink)}
@media (max-width:560px){ .nav-links{gap:14px} }
