:root{--brand:#2E837D;--brand-dark:#205B55;--brand-light:#E6F3F2;--text:#1E293B;--bg:#F7FAF9;--radius:1rem;--radius-lg:1.25rem;--focus:#0ea5b7}
html{font-size:17.6px} /* +10% */
body{font-family:Inter,system-ui,Segoe UI,Roboto;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;moz-osx-font-smoothing:grayscale}
.container{max-width:1100px;margin-inline:auto}
a{color:inherit;text-decoration:none}
a:hover{color:var(--brand)}
nav a.active{color:var(--brand);font-weight:700}
.btn{display:inline-flex;align-items:center;gap:.5rem;background:var(--brand);color:#fff;padding:.8rem 1.3rem;border-radius:var(--radius-lg);font-weight:600}
.btn:hover{background:var(--brand-dark)}
.shadow-soft{box-shadow:0 10px 30px rgba(0,0,0,.08)}
.rounded-2xl{border-radius:calc(var(--radius-lg) + .25rem) !important}
.tag{font-size:.78rem;border:1px solid #cbd5e1;padding:.16rem .5rem;border-radius:.5rem}
img{max-width:100%;height:auto;display:block}
.hero-img{width:100%;height:auto;max-height:320px;object-fit:cover}
.card-img{width:100%;aspect-ratio:16/9;object-fit:cover}
.bg-theme{background:var(--brand-light)}
.counter{display:inline-flex;align-items:center;gap:.6rem;border:1px solid #e2e8f0;border-radius:.75rem;padding:.3rem .6rem}
.counter button{padding:.3rem .6rem}
.prose{font-size:1.21rem;line-height:1.9}
.prose h1,.prose h2,.prose h3{line-height:1.25}
.prose blockquote{border-left:4px solid var(--brand);padding-left:1rem;color:#334155;background:#f8fafc;border-radius:.5rem}
.nutri{background:#f8fafc;border:1px solid #e2e8f0;border-radius:1rem;padding:1rem}
.nutri .grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem}
.nutri .pill{display:inline-block;border:1px solid #cbd5e1;border-radius:999px;padding:.28rem .65rem;font-size:.88rem}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:.5rem}
@media (max-width:1024px){ html{font-size:17px} .hero-img{max-height:280px} }
@media (max-width:768px){ html{font-size:16.5px} .prose{font-size:1.15rem;line-height:1.8} header .container, footer{padding-inline:16px} .hero-img{max-height:240px} }
@media (max-width:480px){ html{font-size:15.5px} .btn{padding:.7rem 1.05rem} .hero-img{max-height:200px} .nutri .grid{grid-template-columns:1fr} }