:root{
  --paper:#f3ece1;--paper-2:#ebe2d2;--ink:#141111;--ink-2:#3a322b;--muted:#7a6f63;
  --accent:#ff4a1c;--accent-ink:#7a1f08;--moss:#19382b;--gold:#c89a3a;--ok:#1f7a4a;
  --hair: 1px solid rgba(20,17,17,.18);--hair-strong: 1px solid rgba(20,17,17,.55);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:88px}
html,body{background:var(--paper);color:var(--ink);font-family:"Inter Tight",sans-serif;font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{
  background-image:
    radial-gradient(1200px 600px at 85% -10%, rgba(255,74,28,.07), transparent 60%),
    radial-gradient(900px 700px at -10% 30%, rgba(25,56,43,.06), transparent 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.08 0 0 0 0 0.06 0 0 0 0 0.04 0 0 0 0.22 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-attachment: fixed, fixed, fixed;
  min-height:100vh;display:flex;flex-direction:column;
}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:var(--paper)}
.mono{font-family:"JetBrains Mono",monospace;font-weight:400;letter-spacing:.02em}
.serif{font-family:"Fraunces",serif;font-variation-settings:"opsz" 144,"SOFT" 30,"WONK" 0}
.container{max-width:1080px;margin:0 auto;padding:0 28px;width:100%}

nav.top{display:grid;grid-template-columns:1fr auto;align-items:center;padding:18px 28px;border-bottom:var(--hair-strong);position:sticky;top:0;z-index:30;background:rgba(243,236,225,.86);backdrop-filter:saturate(140%) blur(8px)}
.brand{display:flex;align-items:baseline;gap:10px}
.brand .logo{font-family:"Fraunces",serif;font-weight:600;font-size:24px;letter-spacing:-.02em;font-variation-settings:"opsz" 144,"SOFT" 100,"WONK" 1}
.brand .logo i{font-style:italic;color:var(--accent)}
.brand .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(255,74,28,.18);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 9px rgba(255,74,28,0)}}
.navcta{display:flex;gap:10px;align-items:center}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1.5px solid var(--ink);border-radius:999px;font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;background:var(--paper);transition:.2s ease;cursor:pointer}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn.primary{background:var(--ink);color:var(--paper)}
.btn.primary:hover{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.btn .arrow{transition:transform .25s}
.btn:hover .arrow{transform:translateX(4px)}
.lang-toggle{display:inline-flex;border:1.5px solid var(--ink);border-radius:999px;overflow:hidden;font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.lang-toggle button{background:transparent;border:0;padding:8px 12px;cursor:pointer;color:var(--ink-2);font:inherit}
.lang-toggle button.active{background:var(--ink);color:var(--paper)}

main{flex:1;padding:64px 0 96px}
.page-eyebrow{display:flex;align-items:center;gap:10px;font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);margin-bottom:18px}
.page-eyebrow .bar{height:1px;width:40px;background:var(--ink)}
.page-title{font-family:"Fraunces",serif;font-weight:340;font-variation-settings:"opsz" 144,"SOFT" 60,"WONK" 1;font-size:clamp(48px,7vw,108px);line-height:.92;letter-spacing:-.03em;margin-bottom:24px}
.page-title em{font-style:italic;color:var(--accent);font-variation-settings:"opsz" 144,"SOFT" 100,"WONK" 1}
.page-lead{font-size:18px;line-height:1.6;color:var(--ink-2);max-width:62ch;margin-bottom:48px}

h2.h2{font-family:"Fraunces",serif;font-weight:380;font-size:32px;line-height:1.1;letter-spacing:-.015em;margin:48px 0 16px;font-variation-settings:"opsz" 144}
h3.h3{font-family:"Fraunces",serif;font-weight:450;font-size:22px;letter-spacing:-.01em;margin:28px 0 10px}
.prose p{font-size:16px;line-height:1.7;color:var(--ink-2);margin-bottom:16px;max-width:68ch}
.prose ul{padding-left:22px;margin:6px 0 20px;max-width:68ch}
.prose ul li{font-size:16px;line-height:1.7;color:var(--ink-2);margin-bottom:6px}
.prose a{border-bottom:1px dashed var(--ink)}
.prose strong{color:var(--ink);font-weight:600}
.card{background:#fffaf1;border:1.5px solid var(--ink);border-radius:14px;padding:24px 28px;box-shadow:10px 10px 0 var(--accent);margin:24px 0}

.status-row{display:grid;grid-template-columns:24px 1fr auto;gap:14px;align-items:center;padding:14px 0;border-top:var(--hair)}
.status-row:last-child{border-bottom:var(--hair)}
.status-row .dot{width:10px;height:10px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px rgba(31,122,74,.18);justify-self:center}
.status-row b{font-family:"Fraunces",serif;font-weight:500;font-size:17px}
.status-row .mono{color:var(--muted);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.status-banner{display:flex;align-items:center;gap:14px;padding:22px 24px;background:#e8f4ec;border:1.5px solid var(--ok);border-radius:12px;margin:24px 0 40px}
.status-banner .pulse{width:14px;height:14px;border-radius:50%;background:var(--ok);position:relative;flex-shrink:0}
.status-banner .pulse::after{content:"";position:absolute;inset:-6px;border-radius:50%;background:var(--ok);opacity:.25;animation:pinging 2s ease-out infinite}
@keyframes pinging{0%{transform:scale(.6);opacity:.5}100%{transform:scale(1.4);opacity:0}}
.status-banner b{font-family:"Fraunces",serif;font-weight:500;font-size:20px;color:var(--moss);display:block}
.status-banner small{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}

footer.foot-mini{border-top:var(--hair-strong);padding:24px 0;font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
footer.foot-mini .container{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px}
footer.foot-mini a{border-bottom:1px dashed var(--muted)}
footer.foot-mini a:hover{color:var(--accent);border-color:var(--accent)}

[lang-section="en"]{display:none}
body.lang-en [lang-section="en"]{display:block}
body.lang-en [lang-section="es"]{display:none}

@media (max-width:640px){
  .page-lead{font-size:16px}
  main{padding:36px 0 64px}
}