:root{
  --bg:#f8faf7;
  --surface:#ffffff;
  --surface-2:#eef7f0;
  --text:#18231f;
  --muted:#64736d;
  --brand:#0b6b3a;
  --brand-2:#0ea56b;
  --accent:#f2b705;
  --accent-2:#e95420;
  --line:#dfe8e2;
  --shadow:0 18px 45px rgba(18,43,31,.10);
  --shadow-soft:0 10px 30px rgba(18,43,31,.08);
  --radius:24px;
  --radius-sm:16px;
  --container:1160px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.65;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:hover{color:var(--brand)}
p{margin:.2rem 0 1rem}
h1,h2,h3,h4{line-height:1.12;margin:0 0 1rem;letter-spacing:-.035em}
h1{font-size:clamp(2.4rem,5vw,5rem)}
h2{font-size:clamp(2rem,3vw,3.4rem)}
h3{font-size:clamp(1.35rem,2vw,2rem)}
h4{font-size:1.08rem}
ul{padding-left:1.2rem}
.container{width:min(var(--container), calc(100% - 32px));margin-inline:auto}
.skip-link{position:absolute;left:-999px;top:0;background:var(--brand);color:#fff;padding:.7rem 1rem;border-radius:0 0 .75rem 0;z-index:99}
.skip-link:focus{left:0}
.topbar{
  background:#092e20;color:#dff8ea;font-size:.92rem;
}
.topbar .container{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.45rem 0}
.topbar a{color:#fff;font-weight:700}
.header{
  position:sticky;top:0;background:rgba(255,255,255,.88);backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(223,232,226,.85);z-index:50;
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:.85rem 0;gap:1rem}
.brand{display:flex;align-items:center;gap:.7rem;font-weight:900;letter-spacing:-.04em}
.brand img{width:74px;height:auto}
.brand span{font-size:1.1rem}
.nav-links{display:flex;align-items:center;gap:.35rem;list-style:none;margin:0;padding:0}
.nav-links a{display:inline-flex;align-items:center;padding:.68rem .85rem;border-radius:999px;color:#23352e;font-weight:750;font-size:.95rem}
.nav-links a:hover,.nav-links a[aria-current="page"]{background:var(--surface-2);color:var(--brand)}
.nav-actions{display:flex;gap:.55rem;align-items:center}
.menu-toggle{display:none;border:1px solid var(--line);border-radius:999px;background:#fff;padding:.65rem .9rem;font-weight:850}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;border:0;border-radius:999px;
  padding:.82rem 1.1rem;font-weight:900;cursor:pointer;transition:.2s ease;background:var(--brand);color:#fff;
  box-shadow:0 12px 22px rgba(11,107,58,.18);
}
.btn:hover{transform:translateY(-1px);color:#fff;background:#075c32}
.btn.secondary{background:#fff;color:var(--brand);border:1px solid var(--line);box-shadow:none}
.btn.secondary:hover{background:var(--surface-2);color:#064f2b}
.btn.ghost{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.30);box-shadow:none;color:#fff}
.hero{
  position:relative;isolation:isolate;color:#fff;background:#123;
  min-height:520px;display:grid;align-items:end;overflow:hidden;
}
.hero.compact{min-height:430px}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,29,19,.82),rgba(4,29,19,.50),rgba(4,29,19,.18));z-index:-1}
.hero::after{content:"";position:absolute;inset:auto 0 0;height:45%;background:linear-gradient(transparent,rgba(4,29,19,.55));z-index:-1}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero-inner{padding:5.4rem 0 4rem;max-width:860px}
.kicker{display:inline-flex;align-items:center;gap:.45rem;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25);padding:.35rem .72rem;border-radius:999px;font-weight:850;font-size:.88rem;text-transform:uppercase;letter-spacing:.08em}
.hero p{font-size:clamp(1.03rem,1.7vw,1.35rem);color:#edf8f0;max-width:780px;margin:1rem 0 1.4rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1.3rem}
.share-strip{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.35rem}
.share-strip .share-btn{
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.25);color:#fff;
  border-radius:999px;padding:.62rem .86rem;font-weight:850;cursor:pointer;display:inline-flex;gap:.35rem;align-items:center;
}
.share-strip .share-btn:hover{background:rgba(255,255,255,.24)}
.section{padding:5rem 0}
.section-sm{padding:3rem 0}
.section.alt{background:#fff}
.section-head{max-width:760px;margin-bottom:2rem}
.section-head.center{text-align:center;margin-inline:auto}
.section-label{color:var(--brand);font-weight:950;letter-spacing:.1em;text-transform:uppercase;font-size:.82rem}
.lead{font-size:1.12rem;color:#43524b}
.grid{display:grid;gap:1.1rem}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-soft);
  overflow:hidden;position:relative;
}
.card.pad{padding:1.35rem}
.card.media img{width:100%;height:230px;object-fit:cover}
.card-body{padding:1.25rem}
.card-meta{display:flex;flex-wrap:wrap;gap:.45rem;margin:.2rem 0 .9rem}
.badge{display:inline-flex;align-items:center;border-radius:999px;padding:.25rem .62rem;background:var(--surface-2);color:var(--brand);font-size:.78rem;font-weight:900}
.badge.yellow{background:#fff7d7;color:#765a00}
.badge.orange{background:#fff0e8;color:#9e320c}
.card p{color:var(--muted)}
.card a.read-more{font-weight:950;color:var(--brand)}
.featured{
  display:grid;grid-template-columns:1.08fr .92fr;gap:1.5rem;align-items:center;
  background:linear-gradient(135deg,#ffffff,#eef8f1);border:1px solid var(--line);border-radius:calc(var(--radius) + 10px);
  padding:1rem;box-shadow:var(--shadow)
}
.featured img{border-radius:24px;width:100%;height:420px;object-fit:cover}
.featured .content{padding:1.2rem}
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;margin-top:1.2rem}
.stat{background:#fff;border:1px solid var(--line);border-radius:18px;padding:1rem;text-align:center}
.stat strong{display:block;font-size:1.65rem;color:var(--brand);line-height:1}
.stat span{font-size:.88rem;color:var(--muted);font-weight:750}
.search-panel{
  display:grid;grid-template-columns:1.4fr repeat(2,.7fr);gap:.75rem;background:#fff;border:1px solid var(--line);
  padding:1rem;border-radius:22px;box-shadow:var(--shadow-soft);margin-bottom:1.2rem;
}
.search-panel input,.search-panel select,.field input,.field textarea{
  width:100%;border:1px solid var(--line);border-radius:16px;padding:.95rem 1rem;font:inherit;background:#fff;color:var(--text)
}
.search-panel input:focus,.search-panel select:focus,.field input:focus,.field textarea:focus{outline:3px solid rgba(14,165,107,.15);border-color:var(--brand-2)}
.toc{
  background:#fff;border:1px solid var(--line);border-radius:24px;padding:1.3rem;margin:2rem 0;box-shadow:var(--shadow-soft)
}
.toc strong{display:block;margin-bottom:.7rem}
.toc a{display:inline-flex;margin:.2rem .45rem .2rem 0;padding:.35rem .6rem;border-radius:999px;background:var(--surface-2);color:var(--brand);font-weight:800;font-size:.92rem}
.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:2rem;align-items:start}
.article{
  background:#fff;border:1px solid var(--line);border-radius:28px;padding:clamp(1.2rem,3vw,2.5rem);box-shadow:var(--shadow-soft)
}
.article p,.article li{color:#3d4b45}
.article h2{margin-top:2.4rem}
.article h3{margin-top:1.7rem}
.article blockquote{
  margin:1.4rem 0;padding:1.2rem 1.3rem;border-left:5px solid var(--accent);background:#fffbeb;border-radius:16px;color:#473b05;font-weight:750
}
.sidebar{position:sticky;top:98px;display:grid;gap:1rem}
.sidebar-card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:1.2rem;box-shadow:var(--shadow-soft)}
.sidebar-card a{display:block;padding:.55rem 0;border-bottom:1px solid var(--line);font-weight:800;color:#30453b}
.sidebar-card a:last-child{border-bottom:0}
.table-wrap{overflow:auto;border-radius:18px;border:1px solid var(--line);margin:1rem 0}
table{border-collapse:collapse;width:100%;background:#fff}
th,td{padding:.85rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{background:var(--surface-2);color:#163529}
.steps{counter-reset:step;display:grid;gap:1rem}
.step{display:grid;grid-template-columns:auto 1fr;gap:1rem;background:#fff;border:1px solid var(--line);border-radius:20px;padding:1rem}
.step::before{counter-increment:step;content:counter(step);width:38px;height:38px;border-radius:999px;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:950}
.faq{display:grid;gap:.75rem}
details{background:#fff;border:1px solid var(--line);border-radius:18px;padding:1rem}
summary{font-weight:900;cursor:pointer}
.cta-band{
  background:linear-gradient(135deg,#0b6b3a,#093a2a);color:#fff;border-radius:32px;padding:2rem;display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center;overflow:hidden;position:relative
}
.cta-band p{color:#daf9e7;margin:0}
.footer{background:#071f16;color:#d7eee2;padding:3.5rem 0 1.3rem}
.footer-grid{display:grid;grid-template-columns:1.2fr repeat(3,1fr);gap:2rem}
.footer a{color:#ecfff5}
.footer p{color:#bdd5c9}
.footer h3,.footer h4{color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:2rem;padding-top:1rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:#aac3b7;font-size:.92rem}
.breadcrumb{display:flex;flex-wrap:wrap;gap:.45rem;color:#e1fff0;font-weight:800;font-size:.9rem;margin-bottom:.8rem}
.breadcrumb a{color:#fff;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.article-card{display:flex;gap:1rem;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:#fff}
.article-card img{width:190px;object-fit:cover}
.hidden{display:none!important}
.notice{background:#f1fbf5;border:1px solid #cce8d6;border-radius:18px;padding:1rem;color:#214334}
.policy-box{background:#fff;border:1px solid var(--line);border-radius:24px;padding:1.2rem;margin:1rem 0}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.field{display:grid;gap:.35rem;margin-bottom:.75rem}
.field label{font-weight:850}
@media (max-width: 980px){
  .nav-links{position:absolute;inset:100% 16px auto 16px;background:#fff;border:1px solid var(--line);border-radius:22px;padding:.65rem;box-shadow:var(--shadow);display:none;flex-direction:column;align-items:stretch}
  .nav-links.open{display:flex}
  .nav-links a{justify-content:center}
  .menu-toggle{display:inline-flex}
  .nav-actions .btn{display:none}
  .grid-4,.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .featured,.article-layout,.contact-grid{grid-template-columns:1fr}
  .featured img{height:320px}
  .sidebar{position:static}
  .search-panel{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .stat-row{grid-template-columns:repeat(2,1fr)}
  .cta-band{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .topbar .container{display:none}
  .hero{min-height:500px}
  .hero-inner{padding:4.5rem 0 3rem}
  .grid-4,.grid-3,.grid-2{grid-template-columns:1fr}
  .brand img{width:58px}
  .article-card{display:block}
  .article-card img{width:100%;height:190px}
  .footer-grid{grid-template-columns:1fr}
  .stat-row{grid-template-columns:1fr}
  .share-strip .share-btn{width:100%;justify-content:center}
  .btn{width:100%}
}
@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto!important;transition:none!important}
}

/* Música ecuatoriana: bloques editoriales y SEO */
.music-map{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:1.2rem 0}
.music-item{background:#fff;border:1px solid var(--line);border-radius:22px;padding:1.1rem;box-shadow:var(--shadow-soft)}
.music-item h3{font-size:1.25rem;margin-bottom:.45rem}
.music-item p{color:var(--muted);margin-bottom:0}
.timeline{display:grid;gap:.85rem;margin:1.2rem 0}
.timeline-item{display:grid;grid-template-columns:130px 1fr;gap:1rem;background:#fff;border:1px solid var(--line);border-radius:18px;padding:1rem}
.timeline-item strong{color:var(--brand)}
.source-list{background:#f8fff9;border:1px solid #cfead7;border-radius:20px;padding:1rem;margin:1.2rem 0}
.source-list a{color:var(--brand);font-weight:850;text-decoration:underline;text-underline-offset:3px}
@media (max-width: 760px){.music-map{grid-template-columns:1fr}.timeline-item{grid-template-columns:1fr}}