:root{
  --crema:#F7F2E8;--papel:#FFFDF8;--tinta:#101C18;--tinta-2:#3C4A44;
  --menta:#1F6B5A;--menta-2:#2E8A73;--menta-claro:#BFE6D8;
  --linea:rgba(16,28,24,.14);--linea-2:rgba(16,28,24,.07);
  --ambar:#B7791F;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--crema);color:var(--tinta);font-family:'Inter',system-ui,sans-serif;font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.page{width:min(1000px,94vw);margin:0 auto;padding-bottom:40px}

.topbar{display:flex;align-items:center;justify-content:space-between;padding:18px 0;border-bottom:1px solid var(--linea-2);margin-bottom:22px}
.brand{font-family:'Archivo Black',sans-serif;font-size:13px;letter-spacing:-.01em;display:flex;align-items:center;gap:9px}
.brand i{width:9px;height:9px;border-radius:50%;background:var(--menta);display:inline-block}
.tb-links{display:flex;gap:18px;font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-2)}
.tb-links a:hover{color:var(--menta)}

/* ── hero ── */
.hero{background:var(--tinta);color:var(--crema);border-radius:8px;padding:clamp(22px,3.4vw,40px);display:flex;gap:clamp(20px,4vw,44px);align-items:center;margin-bottom:22px}
.hero-ring{position:relative;flex:none;width:clamp(120px,15vw,158px)}
.hero-ring svg{width:100%;display:block;transform:rotate(-90deg)}
.ring-bg{fill:none;stroke:rgba(247,242,232,.14);stroke-width:7}
.ring-fg{fill:none;stroke:var(--menta-claro);stroke-width:7;stroke-linecap:round;transition:stroke-dashoffset .6s ease}
.ring-txt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.ring-txt b{font-family:'Anton',sans-serif;font-size:clamp(1.6rem,3.2vw,2.3rem);font-weight:400;line-height:1}
.ring-txt span{font-family:'Space Mono',monospace;font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;opacity:.65}
.hero-body{flex:1;min-width:0}
.kicker{font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--menta-claro);margin-bottom:8px}
.hero h1{font-family:'Anton',sans-serif;font-weight:400;font-size:clamp(1.7rem,4.2vw,2.6rem);line-height:.98;text-transform:uppercase;letter-spacing:-.02em;margin-bottom:8px}
.hero-sub{font-size:.92rem;opacity:.78;margin-bottom:16px}
.next{display:flex;align-items:center;gap:12px;background:rgba(247,242,232,.08);border:1px solid rgba(247,242,232,.22);border-radius:5px;padding:11px 14px;transition:.18s}
.next:hover{background:rgba(247,242,232,.15);border-color:var(--menta-claro)}
.nx-label{font-family:'Space Mono',monospace;font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.6;flex:none}
.nx-title{font-size:.9rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nx-arrow{margin-left:auto;font-size:1rem;flex:none}

/* ── secciones ── */
.sections{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:34px}
.sec-card{background:var(--papel);border:1px solid var(--linea);border-radius:7px;padding:16px 18px;display:flex;gap:14px;align-items:center}
.sec-body{flex:1;min-width:0}
.sec-title{font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-2);margin-bottom:7px}
.sec-bar{height:5px;background:var(--linea-2);border-radius:99px;overflow:hidden}
.sec-bar i{display:block;height:100%;background:var(--menta);border-radius:99px;transition:width .5s ease}
.sec-meta{font-size:.78rem;color:var(--tinta-2);margin-top:6px}
.sec-meta b{color:var(--tinta)}

/* ── mapa ── */
.map-head{margin-bottom:16px}
.map-head h2{font-family:'Anton',sans-serif;font-weight:400;font-size:clamp(1.35rem,2.6vw,1.75rem);text-transform:uppercase;letter-spacing:-.01em}
.map-head p{font-size:.88rem;color:var(--tinta-2);margin-top:4px}
#groups{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;align-items:start}
.grp{background:var(--papel);border:1px solid var(--linea);border-radius:7px;padding:15px 17px}
.grp-head{display:flex;flex-direction:column;gap:9px;padding-bottom:11px;border-bottom:1px solid var(--linea-2)}
.grp-left{display:flex;gap:11px;align-items:center}
.grp-title{font-family:'Archivo Black',sans-serif;font-size:.84rem;line-height:1.25;letter-spacing:-.005em}
.grp-meta{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.08em;color:var(--tinta-2);margin-top:3px}
.grp-bar{height:4px;background:var(--linea-2);border-radius:99px;overflow:hidden}
.grp-bar i{display:block;height:100%;background:var(--menta-2);border-radius:99px;transition:width .5s ease}
.items{display:flex;flex-direction:column;gap:1px;margin-top:7px}
.item{display:flex;align-items:flex-start;gap:9px;padding:7px 0;cursor:pointer;border-radius:4px;transition:.15s}
.item:hover{background:rgba(31,107,90,.045)}
.item input{position:absolute;opacity:0;width:0;height:0}
.box{flex:none;width:16px;height:16px;border:1.5px solid var(--linea);border-radius:3px;margin-top:2px;position:relative;transition:.15s}
.item.on .box{background:var(--menta);border-color:var(--menta)}
.item.on .box::after{content:"";position:absolute;left:5px;top:1.5px;width:4px;height:8px;border:solid var(--papel);border-width:0 2px 2px 0;transform:rotate(45deg)}
.it-title{font-size:.855rem;line-height:1.4;color:var(--tinta-2);flex:1}
.item.on .it-title{color:var(--tinta);opacity:.62}
.item.on .it-title{text-decoration:line-through;text-decoration-color:rgba(16,28,24,.25)}
.go{flex:none;font-size:.8rem;color:var(--menta);opacity:.5;padding:0 2px}
.go:hover{opacity:1}

.footer-note{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.1em;color:var(--tinta-2);text-align:center;padding:28px 0 10px;opacity:.7}

@media (max-width:820px){
  .hero{flex-direction:column;text-align:center;gap:20px}
  .hero-body{width:100%}
  .next{justify-content:center}
  .nx-title{white-space:normal}
  .sections{grid-template-columns:1fr}
  #groups{grid-template-columns:1fr}
  .tb-links{gap:12px}
}
@media (max-width:430px){
  .tb-links{font-size:8.5px;gap:10px}
  .grp{padding:13px 14px}
}

@media (max-width:820px){
  .next{display:grid;grid-template-columns:1fr auto;gap:3px 10px;text-align:left;padding:12px 14px}
  .nx-label{grid-column:1/-1}
  .nx-title{grid-column:1;white-space:normal;font-size:.86rem}
  .nx-arrow{grid-column:2;grid-row:2/3;align-self:center}
}