:root{
--bg:#0b132b; --bg2:#1c2541; --accent:#56AE36; --accent2:#f25f5c; --text:#e6edf3; --muted:#97a6b2; --card:#111827ee; --ring:#3b82f6;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;color:var(--text);background:linear-gradient(135deg,var(--bg),var(--bg2));}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block; margin-right: auto; margin-left: auto;}
.container{max-width:1100px;margin-inline:auto;padding:0 1rem}


/* Header / Nav */
.header{position:sticky;top:0;z-index:20;background:rgba(10,15,30,.8);backdrop-filter:blur(10px);border-bottom:1px solid #ffffff22}
.nav{display:flex;align-items:center;justify-content:space-between;padding:.8rem 0}
.brand{display:flex;align-items:center;gap:.7rem}
.brand img{width:40px;height:40px;border-radius:50%;box-shadow:0 0 0 2px #ffffff22}
.brand strong{letter-spacing:.5px}
.menu{display:flex;gap:1rem;align-items:center}
.menu a{padding:.55rem .8rem;border-radius:999px;color:var(--muted)}
.menu a.active, .menu a:hover{color:#111;background:var(--accent)}


/* Mobile */
.burger{display:none;border:1px solid #ffffff2e;border-radius:.7rem;padding:.5rem;background:#0f172a;}
.burger span{display:block;width:22px;height:2px;background:#fff;margin:4px 0}
@media (max-width:880px){
.menu{display:none;position:absolute;inset:60px 1rem auto 1rem;flex-direction:column;background:#0b1120;border:1px solid #ffffff1e;border-radius:1rem;padding:1rem}
.menu.open{display:flex}
.burger{display:block}
}


/* Hero */
.hero{position:relative;isolation:isolate}
.hero-media{position:absolute;inset:0;z-index:-1;opacity:.25;background:url('https://images.unsplash.com/photo-1503122703469-3dbbe39d0b9a?q=80&w=2000&auto=format&fit=crop') center/cover no-repeat}
.hero .container{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center;padding:3.5rem 1rem}
.hero h1{font-size:clamp(1.8rem,4vw,3rem);line-height:1.1;margin:.2rem 0}
.kicker{color:var(--accent);text-transform:uppercase;letter-spacing:1.5px;font-weight:700}
.hero p{color:#d6dee6}
.cta{margin-top:1rem;display:flex;gap:.8rem;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1rem;border-radius:.8rem;border:1px solid #ffffff2a;background:#0f172a;color:var(--text)}
.btn.primary{background:var(--accent);color:#111;border-color:#0000}
.btn:hover{transform:translateY(-1px)}


/* Sections */
.section{padding:0.1rem 0}
.grid{display:grid;gap:1rem}
.grid.cards{grid-template-columns:repeat(3,1fr)}
.card{background:var(--card);border:1px solid #ffffff1a; aspect-ratio: 16 / 10;        /* ajusta la proporción si quieres */
  width: 100%;
  max-width: 520px;             /* opcional */
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,.15);}
.card .body{padding:1rem}

.card h3{margin:.2rem 0 .5rem}
.meta{color:var(--muted);font-size:.95rem}
@media (max-width:900px){.grid.cards{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.hero .container{grid-template-columns:1fr}.grid.cards{grid-template-columns:1fr}}


/* Footer */
.footer{border-top:1px solid #ffffff22;background:#0b1120;padding:2rem 0;margin-top:2rem;}
.footer small{color:var(--muted)}
.notice{font-size:.9rem;color:#b9c5cf}


/* Page headings */
.page-hero{background:#0b1120;border-bottom:1px solid #ffffff1a}
.page-hero .container{padding:2rem 1rem}
.page-hero h1{margin:0}
.breadcrumbs{color:var(--muted);margin-top:.3rem}

/* Content */
.prose p{color:#dbe3ea}
.prose h2{margin-top:1.5rem}
.prose ul{line-height:1.7}
.prose li+li{margin-top:.3rem}
.prose code{background:#0b1220;padding:.15rem .35rem;border-radius:.35rem}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px dashed #ffffff22;padding:.6rem .5rem;text-align:left}
.tag{display:inline-block;padding:.25rem .5rem;border-radius:.5rem;background:#1f2937;color:#cbd5e1;border:1px solid #ffffff22;font-size:.85rem}


/* Utility */
.hidden{display:none}