:root{
  --ink:#0b1b2b;
  --ink2:#13293f;
  --paper:#f3f6f9;
  --card:#fff;
  --line:#d9e3ec;
  --text:#16283a;
  --muted:#5d7287;
  --accent:#00a8e8;
  --amber:#ffb703;
}
*{box-sizing:border-box}
body{
  margin:0;padding:1.2em;min-height:100vh;
  display:flex;justify-content:center;align-items:flex-start;
  font-family:'DM Sans',system-ui,sans-serif;color:var(--text);line-height:1.6;text-align:left;
  background-color:var(--paper);
  background-image:radial-gradient(circle at 1px 1px,#c9d6e2 1px,transparent 0);
  background-size:22px 22px;
}
.container{
  width:100%;max-width:1400px;background:var(--card);
  border-radius:24px;overflow:hidden;
  box-shadow:0 30px 60px -20px rgba(11,27,43,.35);
  padding:2.5em 3em;
}
h1,h2{font-family:'Bricolage Grotesque',sans-serif;color:var(--ink);text-align:left}
h1{
  font-weight:800;font-size:clamp(2em,4.5vw,3.4em);
  letter-spacing:-.035em;line-height:1.02;margin:0 0 .4em;
}
.description{
  margin:0 0 2.5em;max-width:none;
  color:var(--muted);font-size:1.05em;line-height:1.6;
}

/* Selector de opciones */
.button-container{display:flex;flex-wrap:wrap;gap:.8em;margin:0 0 2em;justify-content:flex-start}
.button{
  flex:0 0 auto;max-width:none;margin:0;
  padding:.7em 1.4em;
  background:var(--paper);color:var(--ink);
  border:1px solid var(--line);border-radius:14px;
  font-family:'DM Sans',system-ui,sans-serif;font-weight:700;font-size:1em;
  cursor:pointer;
  transition:background .2s ease,color .2s ease,transform .2s ease,border-color .2s ease;
}
.button:hover{transform:translateY(-3px);background:var(--ink);color:#fff;border-color:var(--ink)}
/* Opción activa (sin tocar el JavaScript) */
body:has(#content-1.active) .button:nth-child(1),
body:has(#content-2.active) .button:nth-child(2),
body:has(#content-3.active) .button:nth-child(3),
body:has(#content-4.active) .button:nth-child(4){
  background:var(--ink);color:#fff;border-color:var(--ink);
}

/* Contenido */
.content{display:none;margin:0;max-width:100%}
.content.active{display:block}
.proxy-container{
  display:grid;grid-template-columns:repeat(3,1fr);gap:.8em;margin-top:0;
}
.proxy-box{
  position:relative;min-width:0;max-width:none;
  background:var(--paper);border:1px solid var(--line);border-radius:14px;
  padding:1.2em;text-align:left;box-shadow:none;color:var(--text);
}
.proxy-box h2{
  margin:0 0 .8em;padding-right:7em;
  font-weight:700;font-size:1.35em;letter-spacing:-.03em;line-height:1.5;
}
.proxy-box pre{
  margin:0;padding:.9em 1em;
  background:var(--card);border:1px solid var(--line);border-radius:10px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.85em;color:var(--text);
  white-space:pre-wrap;word-wrap:break-word;
  max-height:460px;overflow-y:auto;overflow-x:hidden;
}
.download-btn,.show-more-btn{
  background:var(--accent);color:var(--ink);border:0;border-radius:10px;
  font-family:'DM Sans',system-ui,sans-serif;font-weight:700;font-size:.9em;
  padding:.4em .9em;cursor:pointer;
  transition:background .2s ease,transform .2s ease;
}
.download-btn{position:absolute;top:1.2em;right:1.2em}
.show-more-btn{margin-top:.8em}
.download-btn:hover,.show-more-btn:hover{background:var(--amber);transform:translateY(-2px)}

/* Scrollbars */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(0,168,232,.35);border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:rgba(0,168,232,.6)}

.button:focus-visible,.download-btn:focus-visible,.show-more-btn:focus-visible{
  outline:3px solid var(--amber);outline-offset:3px;
}

@media (max-width:768px){
  body{padding:.8em}
  .container{padding:1.8em 1.4em;border-radius:20px}
  .proxy-container{grid-template-columns:1fr}
  .proxy-box pre{max-height:none;overflow:visible}
  .button-container{gap:.5em}
}
@media (max-width:480px){
  body{padding:.5em}
  .container{padding:1.5em 1.1em}
  .button-container{flex-direction:row}
  .button{flex:1 1 calc(50% - .5em);padding:.7em .5em}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}