:root{
  --ink:#0b1b2b;
  --ink2:#13293f;
  --paper:#f3f6f9;
  --card:#fff;
  --line:#d9e3ec;
  --text:#16283a;
  --muted:#5d7287;
  --accent:#00a8e8;
  --amber:#ffb703;
}

*{box-sizing:border-box}

body{
  font-family:'DM Sans',system-ui,sans-serif;
  margin:0;
  padding:1.2em;
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  background-color:var(--paper);
  background-image:radial-gradient(circle at 1px 1px,#c9d6e2 1px,transparent 0);
  background-size:22px 22px;
  color:var(--text);
  line-height:1.6;
}

/* Contenedor principal */
.page{
  width:100%;
  max-width:1400px;
  background:var(--card);
  border-radius:24px;
  overflow-x:hidden;
  overflow-y:auto;
  max-height:calc(100vh - 2.4em);
  padding:2.5em 3em;
  box-shadow:0 30px 60px -20px rgba(11,27,43,.35);
}

/* Títulos */
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 .6em;
}
h2{
  font-weight:700;
  font-size:1.35em;
  letter-spacing:-.03em;
  line-height:1;
  margin:2.2em 0 1em;
  display:flex;
  align-items:center;
  gap:.8em;
}
h2::after{content:"";flex:1;height:1px;background:var(--line)}

/* Texto */
p{
  color:var(--muted);
  font-size:1.05em;
  line-height:1.6;
  margin:0 0 1em;
  text-align:left;
}
ul{
  color:var(--muted);
  font-size:1.05em;
  margin:0;
  padding-left:1.4em;
  list-style-type:disc;
}
li{margin-bottom:.5em}
li::marker{color:var(--accent)}

/* Código */
code{
  font-family:"Courier New",Courier,monospace;
  font-size:.92em;
  color:var(--ink);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:6px;
  padding:.05em .4em;
}
pre{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:14px;
  padding:1em 1.2em;
  margin:0 0 1.2em;
  overflow-x:auto;
  white-space:pre-wrap;
  word-wrap:break-word;
}
pre code{
  background:none;
  border:0;
  padding:0;
  font-size:.95em;
  color:var(--text);
}

/* Enlaces */
a{color:var(--accent);text-decoration:none;font-weight:600}
a:hover{text-decoration:underline}

/* Capturas */
.screenshot-container{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:.8em;
  margin-top:1em;
}
.screenshot-container img{
  width:100%;
  height:auto;
  display:block;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--paper);
}

/* Imagenes Ampliables */
.zoomable-image{cursor:zoom-in;transition:transform .25s ease,box-shadow .25s ease}
.zoomable-image:hover{transform:scale(1.02);box-shadow:0 8px 20px rgba(11,27,43,.18)}
.zoomable-image:focus-visible{outline:3px solid var(--amber);outline-offset:4px}
body.image-zoom-open{overflow:hidden}
.image-overlay{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.5em;
  background:rgba(5,14,24,.82);
  opacity:0;
  visibility:hidden;
  cursor:zoom-out;
  transition:opacity .3s ease,visibility .3s ease;
}
.image-overlay.open{opacity:1;visibility:visible}
.image-overlay img{
  display:block;
  max-width:94vw;
  max-height:92vh;
  width:auto;
  height:auto;
  border:3px solid var(--accent);
  border-radius:14px;
  background:var(--paper);
  box-shadow:0 25px 70px rgba(0,0,0,.55);
  transform:scale(.7);
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
  cursor:default;
}
.image-overlay.open img{transform:scale(1)}

/* Botón de descarga */
.button-container{text-align:left;margin-top:2.5em}
.download-button{
  display:inline-block;
  background:var(--accent);
  color:var(--ink);
  font-weight:700;
  font-size:1.1em;
  padding:.8em 1.6em;
  border:0;
  border-radius:14px;
  cursor:pointer;
  transition:background .2s ease,transform .2s ease;
}
.download-button:hover{
  background:var(--amber);
  transform:translateY(-3px);
  text-decoration:none;
}

/* Foco con teclado */
a:focus-visible,button:focus-visible{
  outline:3px solid var(--amber);
  outline-offset:3px;
}

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

/* Responsive */
@media (max-width:1024px){
  .page{padding:2em 2em}
}
@media (max-width:768px){
  body{align-items:flex-start}
  .page{max-height:none;overflow:visible;padding:1.5em 1.3em}
}
@media (max-width:480px){
  body{padding:.5em}
  .page{padding:1.2em 1em}
  .screenshot-container{grid-template-columns:1fr}
  .download-button{display:block;text-align:center}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}