/* Mobile-first responsive CSS */
:root{
  --bg:#0f1724; --card:#0b1220; --muted:#9aa6b2; --accent:#00bcd4; --glass: rgba(255,255,255,0.04);
  --max-width:1100px;
  --radius:14px;
  color-scheme: dark;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; background:linear-gradient(180deg,#071022 0%, #081426 60%); color:#e6eef6; -webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
.container{max-width:var(--max-width);margin:24px auto;padding:20px}

header{display:flex;gap:12px;align-items:center;justify-content:space-between}
.brand{display:flex;gap:12px;align-items:center}
.logo{width:56px;height:56px;border-radius:12px;background:linear-gradient(135deg,var(--accent),#6a00ff);display:flex;align-items:center;justify-content:center;font-weight:700}
.site-title{font-size:15px;color:#fff}
nav{display:none}

main.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:var(--radius);padding:20px;margin-top:18px;box-shadow:0 6px 30px rgba(2,6,23,0.6)}
.hero{display:grid;gap:16px}
h1{font-size:22px;margin:0 0 6px 0}
.meta{color:var(--muted);font-size:13px}

.grid{display:grid;grid-template-columns:1fr;gap:18px;margin-top:14px}
article p{line-height:1.65;color:#d8e6f2}
h2{font-size:18px;margin:12px 0}
h3{font-size:16px;margin:10px 0;color:#cfeffd}
h4{font-size:15px;margin:8px 0;color:#bfe8f7}
h5{font-size:14px;margin:6px 0;color:#b4dff0}

.card-panel{background:var(--glass);padding:14px;border-radius:12px}
.cta{display:inline-block;padding:12px 18px;border-radius:12px;background:linear-gradient(90deg,var(--accent),#6a00ff);color:#001020;font-weight:600}
footer{margin-top:24px;color:var(--muted);font-size:13px;padding:12px 0}

/* Touch targets: Mejora accesibilidad para enlaces pequeños */
.touch-link, .touch-link-footer {
  display: inline-block;
  padding: 8px 12px; /* Aumenta el área táctil a ~44px en mobile */
  margin: 4px 0; /* Espaciado vertical para evitar solapamientos */
  border-radius: 6px;
  background: rgba(255,255,255,0.05); /* Fondo sutil para visibilidad */
  line-height: 1.4;
  min-height: 44px; /* Tamaño mínimo táctil */
  min-width: 44px;
  text-align: center;
  transition: background 0.2s;
}
.touch-link:hover, .touch-link-footer:hover {
  background: rgba(255,255,255,0.1);
}
@media (min-width: 480px) {
  .touch-link, .touch-link-footer {
    padding: 10px 16px; /* Ajuste para desktop */
  }
}

/* Two-column layout on wider screens */
@media(min-width:880px){
  nav{display:block}
  .grid{grid-template-columns: 2fr 1fr}
  .hero{grid-template-columns:1fr 360px}
  .logo{width:72px;height:72px;font-size:18px}
  h1{font-size:28px}
}

/* Utility */
.tags{display:flex;gap:8px;flex-wrap:wrap}
.tag{background:rgba(255,255,255,0.03);padding:6px 10px;border-radius:8px;font-size:13px;color:var(--muted)}
.aside-list{list-style:none;padding:0;margin:0}
.aside-list li{padding:8px 0;border-bottom:1px dashed rgba(255,255,255,0.03)}