/* ACM NutriPet — estilos del hub de guías (tema navy + verde de la marca) */
:root{
  --bg:#0B1A2E; --bg-2:#0F2238; --card:#12263F; --border:rgba(255,255,255,.10);
  --text:#E8EEF5; --muted:#9FB2C6; --green:#2ECC71; --green-lt:#5CE0A0; --on-green:#06231A;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--text);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  line-height:1.7; font-size:17px; -webkit-font-smoothing:antialiased;
}
a{color:var(--green-lt); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}

/* Barra superior */
.topbar{
  position:sticky; top:0; z-index:50; background:rgba(11,26,46,.88); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border); padding:12px 16px;
}
.topbar .inner{max-width:760px; margin:0 auto; display:flex; align-items:center; gap:10px}
.topbar .brand{display:flex; align-items:center; gap:9px; font-weight:800; color:#fff; font-size:16px}
.topbar .brand img{width:26px; height:26px; border-radius:7px; display:block}
.topbar .cta{
  margin-left:auto; background:linear-gradient(135deg,var(--green),var(--green-lt)); color:var(--on-green);
  font-weight:700; font-size:13px; padding:8px 14px; border-radius:99px; white-space:nowrap;
}
.topbar .cta:hover{text-decoration:none; filter:brightness(1.05)}

/* Contenedor de artículo */
.wrap{max-width:760px; margin:0 auto; padding:28px 20px 60px}
.breadcrumb{font-size:13px; color:var(--muted); margin-bottom:18px}
.breadcrumb a{color:var(--muted)}
article h1{font-size:32px; line-height:1.18; font-weight:900; color:#fff; letter-spacing:-.4px; margin-bottom:10px}
.lede-meta{font-size:13px; color:var(--muted); margin-bottom:24px}
article h2{font-size:23px; line-height:1.28; font-weight:800; color:#fff; margin:30px 0 10px}
article h3{font-size:18px; font-weight:700; color:var(--green-lt); margin:22px 0 8px}
article p{margin:0 0 16px}
article ul,article ol{margin:0 0 18px; padding-left:22px}
article li{margin:0 0 8px}
article strong{color:#fff}
article em{color:var(--muted)}

/* Caja de aviso (disclaimer) */
.aviso{
  background:rgba(245,158,11,.10); border:1px solid rgba(245,158,11,.30); border-radius:12px;
  padding:14px 16px; font-size:15px; color:#FDE9C7; margin:22px 0;
}

/* CTA a la app */
.cta-box{
  background:linear-gradient(135deg,rgba(46,204,113,.14),rgba(46,204,113,.05));
  border:1px solid rgba(46,204,113,.35); border-radius:16px; padding:22px; margin:30px 0; text-align:center;
}
.cta-box .t{font-size:19px; font-weight:800; color:#fff; margin-bottom:6px}
.cta-box .s{font-size:14px; color:var(--muted); margin-bottom:16px}
.cta-box a.btn{
  display:inline-block; background:linear-gradient(135deg,var(--green),var(--green-lt)); color:var(--on-green);
  font-weight:800; font-size:15px; padding:13px 26px; border-radius:99px;
}
.cta-box a.btn:hover{text-decoration:none; filter:brightness(1.05)}

/* FAQ */
.faq{margin:32px 0 0}
.faq h2{margin-bottom:12px}
.faq details{background:var(--card); border:1px solid var(--border); border-radius:12px; margin-bottom:10px; overflow:hidden}
.faq summary{list-style:none; cursor:pointer; padding:15px 18px; font-size:16px; font-weight:600; color:#fff; display:flex; justify-content:space-between; gap:12px; align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+'; color:var(--green); font-size:22px; font-weight:300; line-height:1; flex:none}
.faq details[open] summary::after{content:'−'}
.faq .a{padding:0 18px 16px; color:var(--muted); font-size:15px; line-height:1.65}

/* Otras guías */
.relacionadas{margin:40px 0 0; border-top:1px solid var(--border); padding-top:24px}
.relacionadas h2{font-size:18px; color:#fff; margin-bottom:14px}
.relacionadas a{display:block; padding:12px 14px; background:var(--card); border:1px solid var(--border); border-radius:12px; margin-bottom:8px; color:var(--text); font-weight:600; font-size:15px}
.relacionadas a:hover{text-decoration:none; border-color:rgba(46,204,113,.4)}
.relacionadas a span{color:var(--muted); font-weight:400}

/* Hub */
.hub-head{text-align:center; padding:14px 0 26px}
.hub-head h1{font-size:34px}
.hub-head p{color:var(--muted); font-size:16px; max-width:560px; margin:10px auto 0}
.guia-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.guia-card{background:var(--card); border:1px solid var(--border); border-radius:16px; padding:20px; display:block; color:var(--text)}
.guia-card:hover{text-decoration:none; border-color:rgba(46,204,113,.45); transform:translateY(-2px); transition:all .15s}
.guia-card .ic{font-size:30px; display:block; margin-bottom:10px}
.guia-card .ct{font-size:17px; font-weight:800; color:#fff; line-height:1.3; margin-bottom:6px}
.guia-card .cd{font-size:13.5px; color:var(--muted); line-height:1.5}

/* Footer */
.pie{border-top:1px solid var(--border); margin-top:40px; padding:24px 20px; text-align:center; color:var(--muted); font-size:13px}
.pie a{color:var(--muted); margin:0 8px}

@media (max-width:560px){
  body{font-size:16px}
  article h1,.hub-head h1{font-size:26px}
  article h2{font-size:20px}
  .guia-grid{grid-template-columns:1fr}
  .wrap{padding:22px 16px 48px}
}