/* Modern, clean design */
:root{
  --bg:#0b1020; --surface:#0e152b; --text:#e8eefc; --muted:#a6b0cf;
  --card:#0f1a33; --border:#1b2647; --brand:#6ee7ff; --brand2:#8b5cf6; --link:#93c5fd;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Inter,Roboto,Arial;
  background: radial-gradient(1200px 600px at 20% -10%, #1a2b5b55, transparent),
              radial-gradient(1000px 700px at 120% 20%, #3b82f63b, transparent),
              var(--bg);
  color:var(--text); line-height:1.7;
}
a{color:var(--link); text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1120px; margin:auto; padding:0 1.1rem}
.header{
  position:sticky; top:0; z-index:50;
  background: color-mix(in oklab, var(--bg) 80%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.nav{display:flex; align-items:center; gap:1rem; padding:0.9rem 0}
.brand{display:flex; align-items:center; gap:.75rem; font-weight:800; letter-spacing:.2px}
.logo{display:flex; align-items:center; gap:.6rem}
.logo img{height:34px; width:auto; border-radius:.2rem}
.logo .wordmark{font-weight:800}
.nav a{color:var(--text); opacity:.9}
.nav a:hover{opacity:1}
.spacer{flex:1}
.btn{display:inline-block; border:1px solid var(--border); background:linear-gradient(180deg,#132142,#0c162e);
  color:var(--text); padding:.55rem .9rem; border-radius:.7rem; box-shadow: 0 0 0 1px #00000022 inset;}
.btn-primary{background: linear-gradient(135deg, #60a5fa, #22d3ee); color:#0b1020; font-weight:700; border: none}
.btn-primary:hover{filter: brightness(1.05)}
.btn:hover{border-color:#2a3866}

.hero{padding:3rem 0 2rem}
.kicker{display:inline-block; font-size:.9rem; color:var(--muted); margin-bottom:.4rem}
.hero h1{font-size:2.4rem; line-height:1.2; margin:.2rem 0 .6rem}
.hero p{max-width:780px; color:var(--muted); margin:0 0 1.1rem}
.hero-cta{display:flex; gap:.75rem; flex-wrap:wrap}

.hero-card{
  margin-top:1.4rem;
  border:1px solid var(--border); background: linear-gradient(180deg, #0e1630, #0b1123);
  border-radius:1.2rem; padding:1.2rem; display:grid; grid-template-columns: 1fr 1fr; gap:1.2rem;
}
.hero-card img{width:100%; height:100%; object-fit:cover; border-radius:1rem; border:1px solid var(--border)}
@media (max-width: 960px){ .hero-card{grid-template-columns:1fr} }

.section{padding:1.5rem 0}
.section-title{font-size:1.5rem; margin:1rem 0 .7rem}
.grid{display:grid; gap:1rem}
.cards-3{grid-template-columns: repeat(3, 1fr)}
.cards-2{grid-template-columns: repeat(2, 1fr)}
@media (max-width: 960px){ .cards-3,.cards-2{grid-template-columns: 1fr} }

.card{
  background: linear-gradient(180deg, #0f1a33, #0d1730);
  border:1px solid var(--border); border-radius:1rem; padding:1rem;
  box-shadow: 0 8px 30px #00000033;
}
.card h3{margin:.25rem 0 .4rem; font-size:1.15rem}
.card p{margin:.2rem 0 .6rem; color:var(--muted)}
.badge{display:inline-block; font-size:.75rem; background:linear-gradient(135deg, var(--brand), var(--brand2)); color:#0b1020; padding:.15rem .5rem; border-radius:.5rem; font-weight:800}

.table{width:100%; border-collapse:collapse; overflow:hidden; border-radius:.8rem}
.table th,.table td{border-bottom:1px solid var(--border); padding:.7rem .6rem; text-align:left}
.table th{background:#0f1a33}
.note{color:var(--muted); font-size:.95rem}

.footer{border-top:1px solid var(--border); margin-top:2rem; padding:1.2rem 0; color:var(--muted); text-align:center}

.layout{display:grid; grid-template-columns: 280px 1fr; gap:1rem}
@media (max-width: 960px){ .layout{grid-template-columns: 1fr} }
.side{position:sticky; top:80px; align-self:start; border:1px solid var(--border); background:#0f1a33; border-radius:1rem; padding:1rem; max-height:calc(100vh - 110px); overflow:auto}
.side h2{font-size:1rem; margin:.2rem 0 .7rem}
.side ul{list-style:none; margin:0; padding:0}
.side li{margin:.25rem 0}
.side a{display:block; padding:.35rem .5rem; border-radius:.5rem; color:var(--text); opacity:.9}
.side a:hover{opacity:1; background:#0e1731}

.article{background: linear-gradient(180deg, #0f1a33, #0d1730); border:1px solid var(--border); border-radius:1rem; padding:1rem; margin-bottom:1rem}
.article h2{margin:.2rem 0 .6rem; font-size:1.35rem}
.article h3{margin:.7rem 0 .25rem; font-size:1.05rem}
.img{width:100%; border-radius:.8rem; border:1px solid var(--border); object-fit:cover}
.list{padding-left:1.1rem}
.tip{border-left:4px solid var(--brand); padding:.6rem .8rem; background:#0e1731; border-radius:.5rem; font-size:.95rem; color:var(--text)}
.small{font-size:.95rem}

/* Nav separators */
.nav .sep{margin:0 .5rem; color:var(--muted); opacity:.8}


/* ===== Mobile navigation (hamburger) ===== */
.hamburger{display:none; background:none; border:1px solid var(--border); border-radius:.6rem; padding:.5rem; color:var(--text)}
.hamburger span{display:block; width:22px; height:2px; background:var(--text); margin:5px 0}
.mobile-menu{display:none; position:fixed; inset:0; background:rgba(7,12,25,.72); backdrop-filter: blur(6px); z-index:60}
.mobile-menu .panel{position:absolute; right:8px; top:62px; background:linear-gradient(180deg,#0f1a33,#0d1730); border:1px solid var(--border); border-radius:.9rem; width:min(92vw,360px); padding:.6rem}
.mobile-menu a{display:block; padding:.7rem .9rem; border-radius:.6rem; color:var(--text)}
.mobile-menu a:hover{background:#0e1731}
@media (max-width: 860px){
  .nav nav{display:none}
  .hamburger{display:block}
}

/* Table responsiveness */
.table{display:block; overflow-x:auto; -webkit-overflow-scrolling: touch}

/* Minor responsive tweaks */
.hero h1{font-size:clamp(1.6rem, 3.5vw, 2.4rem)}
.section-title{font-size:clamp(1.2rem, 2.6vw, 1.5rem)}
.img{height:auto; max-width:100%}

/* Accordion sidebar */
.accordion{border:1px solid var(--border); border-radius:1rem; background:#0f1a33; padding:.6rem}
.accordion summary{list-style:none; cursor:pointer; font-weight:800; padding:.5rem .7rem; border-radius:.6rem; background:#0e1731; user-select:none}
.accordion .content{margin-top:.6rem}
@media (max-width: 860px){
  .layout{grid-template-columns: 1fr}
  .accordion{width:100%}
  .accordion .content ul{max-height:40vh; overflow:auto}
}


/* ===== Mobile Topics FAB & Sheet (Artículos) ===== */
.fab{position:fixed; right:16px; bottom:16px; z-index:55; display:none;
  border:1px solid var(--border); background:linear-gradient(135deg, var(--brand), var(--brand2));
  color:#0b1020; font-weight:800; padding:.7rem 1rem; border-radius:999px; box-shadow:0 10px 30px #0007}
.sheet{position:fixed; inset:0; display:none; z-index:70}
.sheet .sheet-backdrop{position:absolute; inset:0; background:rgba(5,8,18,.65);}
.sheet .sheet-panel{position:absolute; left:0; right:0; bottom:0; background:linear-gradient(180deg,#0f1a33,#0d1730); border-top:1px solid var(--border); border-radius:1rem 1rem 0 0; padding:1rem; max-height:70vh; overflow:auto}
.sheet .sheet-header{display:flex; align-items:center; justify-content:space-between; margin-bottom:.6rem}
.btn-close{background:none; border:1px solid var(--border); color:var(--text); border-radius:.5rem; padding:.2rem .5rem}
@media (max-width: 860px){
  .fab{display:inline-flex}
  .accordion{display:none}
}
@media (min-width: 861px){
  .sheet{display:none !important}
}


/* ===== v4_7 Mobile polish: animations, blur, safe-areas ===== */
:root{ --anim: 300ms ease-in-out; }
@media (prefers-reduced-motion: reduce){
  :root{ --anim: 1ms linear; }
}

/* Hamburger overlay & drawer */
.mobile-menu{transition: opacity var(--anim); opacity:0; pointer-events:none;}
.mobile-menu.active{opacity:1; pointer-events:auto;}
.mobile-menu .panel{transform: translateX(100%); transition: transform var(--anim), box-shadow var(--anim); box-shadow: 0 0 0 rgba(0,0,0,0);}
.mobile-menu.active .panel{transform: translateX(0); box-shadow: -24px 0 60px rgba(0,0,0,.35);}
.mobile-menu{backdrop-filter: blur(8px); background: rgba(8,12,24,.45);}

/* Topics FAB and Sheet (improved) */
.fab{transform: translateY(0); transition: transform var(--anim), opacity var(--anim); padding: .65rem .9rem}
.fab:active{transform: scale(.98);}
.sheet{opacity:0; pointer-events:none; transition: opacity var(--anim);}
.sheet.active{opacity:1; pointer-events:auto;}
.sheet .sheet-panel{transform: translateY(100%); transition: transform var(--anim); border-top-left-radius: 1.2rem; border-top-right-radius: 1.2rem; padding-bottom: calc(1rem + env(safe-area-inset-bottom, 16px));}
.sheet.active .sheet-panel{transform: translateY(0);}
.sheet .drag-handle{width: 46px; height: 5px; border-radius: 999px; background:#2a3866; margin: 0 auto .7rem auto;}

/* Start sheet at ~60% height */
@media (max-width: 860px){
  .sheet .sheet-panel{max-height: 60vh;}
  .fab{bottom: calc(16px + env(safe-area-inset-bottom, 8px));}
}


/* v4_8: Ensure FAB/sheet stack correctly */
.fab{z-index: 1000}
.sheet{z-index: 1100}


/* v4_9: Replace FAB with sticky toggle bar (mobile only) */
.topics-toggle{
  display:none;
  position:sticky; top:66px; z-index:1000;
  width:max-content;
  padding:.45rem .8rem;
  border:1px solid var(--border);
  border-radius:999px;
  background:linear-gradient(135deg, var(--brand), var(--brand2));
  color:#0b1020; font-weight:800;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}
@media (max-width: 860px){
  .topics-toggle{display:inline-block}
}

/* Hide any leftover .fab */
.fab{display:none !important}


/* v4_10: Ensure topics toggle is a true button and clickable */
.topics-toggle{cursor:pointer}


/* v4_11: Submenu under Artículos */
.nav .nav-link.has-submenu{cursor:pointer; padding:.2rem .4rem; border-radius:.4rem}
.nav .nav-link.has-submenu:hover{background:#0e1731}
.submenu{display:none; position:absolute; right:0; top:calc(100% + 8px); background:linear-gradient(180deg,#0f1a33,#0d1730); border:1px solid var(--border); border-radius:.8rem; padding:.6rem; width:min(92vw, 420px); max-height:60vh; overflow:auto; box-shadow:0 20px 40px rgba(0,0,0,.35);}
.has-submenu.open + .submenu{display:block}
.submenu ul{list-style:none; margin:0; padding:0}
.submenu li{margin:.15rem 0}
.submenu a{display:block; padding:.4rem .5rem; border-radius:.5rem}
.submenu a:hover{background:#0e1731}

@media (max-width: 860px){
  /* Desktop submenu hidden on mobile; use details in drawer */
  .submenu{display:none !important}
  .nav .nav-link.has-submenu{display:none}
  .m-sub{border:1px solid var(--border); border-radius:.7rem; background:#0f1a33; padding:.4rem .5rem}
  .m-sub summary{cursor:pointer; font-weight:700; padding:.3rem .2rem}
  .m-sub-list{list-style:none; margin:0; padding:.2rem 0 0 0}
  .m-sub-list li a{display:block; padding:.35rem .3rem; border-radius:.4rem}
  .m-sub-list li a:hover{background:#0e1731}
}


/* v4_12: Mobile submenu (details) animation */
.m-sub{border:1px solid var(--border); border-radius:.7rem; background:#0f1a33; padding:.4rem .5rem}
.m-sub summary{cursor:pointer; font-weight:700; padding:.5rem .4rem; border-radius:.5rem}
.m-sub[open] summary{background:#0e1731}
.m-sub-list{list-style:none; margin:.2rem 0 0 0; padding:0; max-height:50vh; overflow:auto}
.m-sub-list li a{display:block; padding:.45rem .35rem; border-radius:.4rem}
.m-sub-list li a:hover{background:#0e1731}


/* v4_13: Robust mobile submenu styling */
.m-sub{border:1px solid var(--border); border-radius:.7rem; background:#0f1a33; padding:.4rem .5rem; margin-top:.3rem}
.m-sub summary{cursor:pointer; font-weight:700; padding:.55rem .5rem; border-radius:.5rem}
.m-sub[open] summary{background:#0e1731}
.m-sub-list{list-style:none; margin:.25rem 0 0 0; padding:0; max-height:50vh; overflow:auto}
.m-sub-list li a{display:block; padding:.45rem .4rem; border-radius:.4rem}
.m-sub-list li a:hover{background:#0e1731}


/* v4_14: Single mobile submenu (collapsed by default) with animation */
.m-sub{border:1px solid var(--border); border-radius:.7rem; background:#0f1a33; padding:.35rem .5rem; margin-top:.4rem}
.m-sub summary{cursor:pointer; font-weight:700; padding:.55rem .45rem; border-radius:.5rem; list-style:none; display:flex; align-items:center; justify-content:space-between}
.m-sub summary::-webkit-details-marker{display:none}
.m-sub summary::after{content:"▾"; transition: transform .25s ease-in-out; opacity:.8}
.m-sub[open] summary::after{transform: rotate(180deg)}
.m-sub-list{list-style:none; margin:0; padding:0 .1rem; max-height:0; overflow:hidden; opacity:0; transform: translateY(-4px); transition: max-height .3s ease, opacity .25s ease, transform .25s ease}
.m-sub[open] .m-sub-list{max-height:50vh; opacity:1; transform: translateY(0)}
.m-sub-list li a{display:block; padding:.45rem .35rem; border-radius:.4rem}
.m-sub-list li a:hover{background:#0e1731}


/* v4_15: Separate desktop/mobile navs */
.nav-desktop{display:flex; gap:.8rem}
@media (max-width: 860px){
  .nav-desktop{display:none}
}

/* Mobile drawer submenu styling (unchanged but ensured) */
.m-sub{border:1px solid var(--border); border-radius:.7rem; background:#0f1a33; padding:.35rem .5rem; margin-top:.4rem}
.m-sub summary{cursor:pointer; font-weight:700; padding:.55rem .45rem; border-radius:.5rem; list-style:none; display:flex; align-items:center; justify-content:space-between}
.m-sub summary::-webkit-details-marker{display:none}
.m-sub summary::after{content:"▾"; transition: transform .25s ease-in-out; opacity:.8}
.m-sub[open] summary::after{transform: rotate(180deg)}
.m-sub-list{list-style:none; margin:0; padding:0 .1rem; max-height:0; overflow:hidden; opacity:0; transform: translateY(-4px); transition: max-height .3s ease, opacity .25s ease, transform .25s ease}
.m-sub[open] .m-sub-list{max-height:50vh; opacity:1; transform: translateY(0)}
.m-sub-list li a{display:block; padding:.45rem .35rem; border-radius:.4rem}
.m-sub-list li a:hover{background:#0e1731}