:root {
  --bg: #0b1020;
  --fg: #e7e9ee;
  --muted: #a9b1c3;
  --accent: #ff7a1a;
  --card: #121a33;
  --card-border: #1d274a;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--fg);
  background: linear-gradient(180deg, #0b1020 0%, #0f1530 100%);
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
header{
  position: sticky; top:0; z-index:10;
  background: rgba(11,16,32,.6);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--card-border);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding: .75rem 1rem; max-width:1100px; margin:0 auto;
}
.brand{display:flex; align-items:center; gap:.75rem; font-weight:700; letter-spacing:.3px}
.brand .logo{
  width:36px; height:36px; border-radius:10px; background:var(--accent);
  display:grid; place-items:center; color:#0b1020; font-weight:900;
}
nav ul{display:flex; list-style:none; gap:1rem; margin:0; padding:0; flex-wrap:wrap}
.hero{
  max-width:1100px; margin: 0 auto; padding: 3rem 1rem 2rem;
  display:grid; gap:1.25rem;
}
h1{font-size: clamp(1.6rem, 2.8vw, 2.4rem); margin:.25rem 0}
.lead{font-size: 1.1rem; color:var(--muted)}
.cta{display:flex; gap:.75rem; flex-wrap:wrap; margin-top:.25rem}
.button{
  display:inline-block; padding:.7rem 1rem; border-radius:.9rem; font-weight:600;
  border: 1px solid var(--card-border); background: var(--card);
}
.button.primary{background:var(--accent); color:#0b1020; border-color: transparent;}
.grid{
  display:grid; gap:1rem; grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
}
.section{max-width:1100px; margin: 1rem auto; padding: 1rem; }
.card{
  background: var(--card); border: 1px solid var(--card-border); border-radius: 1rem; padding: 1rem;
}
.card h3{margin-top:0}
.small{font-size:.9rem; color:var(--muted)}
footer{
  border-top:1px solid var(--card-border); color:var(--muted);
  text-align:center; padding:1rem; margin-top:2rem;
}
kbd{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:.9em; padding:.1rem .4rem; border:1px solid var(--card-border); border-bottom-width:2px; border-radius:.35rem; background:#0b1020; color:var(--fg);
}



/* contador por imagen (mínimo, sin cambios de color/fondo) */
.visitas{
  font-size:.9rem;
  white-space:nowrap;
  display:flex; align-items:center; gap:.35rem;
}