/* Paginas publicas nuevas (mayorista, transparencia, hub). Colores y escalas en
   tokens.css; reglas de DESIGN.md: un solo acento, sin sombras ni gradientes,
   numeros en --font-num. index.html NO carga este archivo. */

*{ margin:0; padding:0; box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; overflow-x:clip; }
body{
  font-family:var(--font-text); background:var(--bg); color:var(--ink);
  line-height:1.6; font-size:clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  -webkit-font-smoothing:antialiased; overflow-x:clip; max-width:100%;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; }
button{ font:inherit; color:inherit; cursor:pointer; border:none; background:none; }
h1,h2,h3{ font-weight:700; line-height:1.12; letter-spacing:-0.015em; text-wrap:balance; }
p{ text-wrap:pretty; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.num{ font-family:var(--font-num); font-variant-numeric:tabular-nums; }
.muted{ color:var(--muted); }

.wrap{ max-width:var(--container); margin:0 auto; padding-inline:clamp(1rem, 4vw, 2.5rem); }

/* Nav */
.nav{
  position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-4); padding:0.8rem clamp(1rem, 4vw, 2.5rem);
  background:color-mix(in oklch, var(--bg-deep) 88%, transparent); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.brand{ display:flex; align-items:center; gap:0.6rem; font-family:"Bricolage Grotesque", system-ui, sans-serif; font-weight:800; font-size:1.25rem; letter-spacing:-0.03em; text-decoration:none; }
.brand-mark{ width:28px; height:28px; border-radius:8px; flex:none; background:var(--primary); position:relative; }
.brand-mark::before{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 32% 34%, var(--primary-ink) 2.4px, transparent 2.8px), radial-gradient(circle at 64% 34%, var(--primary-ink) 2.4px, transparent 2.8px); }
.brand-mark::after{ content:""; position:absolute; left:34%; right:24%; bottom:30%; border-bottom:2.2px solid var(--primary-ink); border-radius:0 0 6px 6px; }
.nav-links{ display:flex; align-items:center; gap:1.5rem; }
.nav-links a{ color:var(--muted-strong); font-weight:500; font-size:0.95rem; text-decoration:none; }
.nav-links a:hover, .nav-links a[aria-current="page"]{ color:var(--ink); }
/* El color de los links le ganaba al del boton: texto oscuro sobre amarillo, siempre. */
.nav-links a.btn-primary, .nav-links a.btn-primary:hover{ color:var(--primary-ink); }
.nav-links a.btn-line{ color:var(--ink); }
@media (max-width:760px){ .nav-links .opcional{ display:none; } }

/* Botones */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
  font-weight:600; font-size:0.95rem; line-height:1; text-decoration:none;
  padding:0.78rem 1.25rem; border-radius:var(--r-md);
  transition:background-color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.btn-primary{ background:var(--primary); color:var(--primary-ink); }
.btn-primary:hover{ background:var(--primary-active); }
.btn-pill{ border-radius:var(--r-pill); padding:1rem 1.7rem; }
.btn-line{ border:1px solid var(--line); background:var(--surface); color:var(--ink); }
.btn-line:hover{ border-color:var(--line-strong); background:var(--surface-2); }
.btn:active{ transform:scale(0.98); }

/* Bandas */
.banda{ padding:var(--band) 0; border-top:1px solid var(--line); }
.banda:first-of-type{ border-top:none; }
.banda-densa{ padding:var(--band-dense) 0; }
.kicker{ color:var(--primary); font-weight:600; font-size:var(--t-caption); margin-bottom:var(--s-3); }
.hero h1{ font-size:var(--t-hero); letter-spacing:-0.02em; max-width:18ch; }
.hero .sub{ color:var(--muted-strong); font-size:1.15rem; max-width:56ch; margin-top:var(--s-4); }
.hero .acciones{ display:flex; gap:var(--s-3); flex-wrap:wrap; margin-top:var(--s-6); }
.titulo{ font-size:var(--t-section); font-weight:600; margin-bottom:var(--s-3); }
.bajada{ color:var(--muted); max-width:62ch; margin-bottom:var(--s-6); }

.grilla{ display:grid; gap:var(--s-4); grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); }
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); padding:1.4rem 1.3rem; min-width:0; }
.card h3{ font-size:var(--t-subtitle); font-weight:600; margin-bottom:var(--s-2); }
.card p{ color:var(--muted); font-size:var(--t-small); }
.cifra{ font-family:var(--font-num); font-variant-numeric:tabular-nums; font-weight:700; font-size:var(--t-num-hero); line-height:1; color:var(--primary); letter-spacing:-0.03em; overflow-wrap:anywhere; }
.cifra-lab{ margin-top:var(--s-3); font-weight:600; font-size:var(--t-small); }
.cifra-sub{ color:var(--muted); font-size:var(--t-caption); margin-top:var(--s-1); }

.lista{ list-style:none; display:grid; gap:var(--s-3); }
.lista li{ padding-left:1.1rem; position:relative; color:var(--muted-strong); }
.lista li::before{ content:""; position:absolute; left:0; top:0.7em; width:6px; height:6px; border-radius:2px; background:var(--primary); }

.pasos{ counter-reset:paso; display:grid; gap:var(--s-4); grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); }
.paso{ counter-increment:paso; }
.paso::before{ content:counter(paso); font-family:var(--font-num); color:var(--primary); font-weight:700; font-size:1.2rem; display:block; margin-bottom:var(--s-2); }

.tabla{ width:100%; border-collapse:collapse; font-size:var(--t-small); }
.tabla th, .tabla td{ text-align:left; padding:0.65rem 0.5rem; border-bottom:1px solid var(--line); }
.tabla th{ color:var(--muted); font-weight:500; }
.tabla td.num, .tabla th.num{ text-align:right; }
.tabla-scroll{ overflow-x:auto; }

.nota{ font-size:var(--t-small); color:var(--muted); border-left:2px solid var(--line-strong); padding-left:var(--s-3); max-width:70ch; }

/* Comunidad */
.comunidad-meta{ margin-top:var(--s-5); max-width:560px; }
.meta-barra{ height:8px; background:var(--surface-2); border-radius:var(--r-pill); overflow:hidden; }
.meta-barra span{ display:block; height:100%; background:var(--primary); }
.meta-txt{ display:flex; justify-content:space-between; color:var(--muted); font-size:var(--t-caption); margin-top:var(--s-2); }

/* Puertas del hub */
.puertas{ display:grid; gap:var(--s-4); grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); margin-top:var(--s-6); }
.puerta{ display:block; text-decoration:none; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); padding:2rem 1.6rem; transition:border-color var(--dur-base) var(--ease), background-color var(--dur-base) var(--ease); }
.puerta:hover{ border-color:var(--primary); background:var(--surface-2); }
.puerta h2{ font-size:var(--t-section); }
.puerta p{ color:var(--muted); margin-top:var(--s-2); }
.puerta .ir{ display:inline-block; margin-top:var(--s-4); color:var(--primary); font-weight:600; }

/* Footer */
.foot{ border-top:1px solid var(--line); padding:var(--s-7) 0 var(--s-6); color:var(--muted); font-size:var(--t-small); }
.foot-fila{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--s-4); }
.foot a{ color:var(--muted); text-decoration:none; margin-right:var(--s-4); }
.foot a:hover{ color:var(--ink); }

[hidden]{ display:none !important; }