/* HUB 2 puertas — split editorial / utilitario — anti-slop */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,ital,wght@9..144,0,700;9..144,1,700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@500&display=swap');

:root{
  --hub-amber:#ff8a1e;
  --hub-amber-2:#ffb84d;
  --hub-cyan:#00e5cc;
  --hub-cyan-2:#5af2e0;
  --hub-ink:#0a0a0f;
  --hub-paper:#f6f3ec;
}

/* override font for hub */
.hub-hero{font-family:'IBM Plex Sans',system-ui,sans-serif}
.hub-display{font-family:'Fraunces',serif; font-variation-settings:"SOFT" 0,"WONK" 1}
.mono{font-family:'IBM Plex Mono',monospace}

/* Hub hero — volvemos al hero claro original, menos IA */
.hub-hero{padding:2rem 0 1.5rem; position:relative}
.hub-kicker{display:inline-flex;align-items:center;gap:.6rem; font-family:'IBM Plex Mono',monospace; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted); border:1px solid var(--border-color); padding:.4rem .75rem; border-radius:999px; background:rgba(255,255,255,.04)}
.hub-kicker i{color:var(--hub-amber)}
.hub-title{font-family:'Fraunces',serif; font-size:clamp(2.2rem,5vw,3rem); line-height:1.05; letter-spacing:-.03em; margin:1rem 0 .6rem}
.hub-title .line{display:block}
.hub-title .accent-amber{background:linear-gradient(135deg,var(--hub-amber),var(--hub-amber-2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text}
.hub-title .accent-cyan{background:linear-gradient(135deg,var(--hub-cyan),var(--hub-cyan-2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text}
.hub-sub{max-width:42rem; color:var(--text-secondary); font-size:1rem; line-height:1.7}
.hub-sub strong{color:var(--text-primary)}

/* Split grid — bento 2 puertas */
.hub-split{display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; margin-top:2.2rem}
@media(max-width:900px){ .hub-split{grid-template-columns:1fr} }

/* Card — versión ligera, menos IA: sin números gigantes, sin glow agresivo */
.hub-card{position:relative; display:flex; flex-direction:column; min-height:260px; padding:1.5rem; border-radius:20px; border:1px solid var(--border-color); background:rgba(255,255,255,.02); overflow:hidden; text-decoration:none; color:inherit; transition:transform .2s ease, border-color .2s ease}
.hub-card:hover{transform:translateY(-4px); border-color:rgba(255,255,255,.14)}
.hub-card--empresas{--accent:var(--hub-amber); --accent2:var(--hub-amber-2)}
.hub-card--devs{--accent:var(--hub-cyan); --accent2:var(--hub-cyan-2)}
.hub-card--empresas:hover{border-color:rgba(255,138,30,.35)}
.hub-card--devs:hover{border-color:rgba(0,229,204,.35)}

.hub-eyebrow{font-family:'IBM Plex Mono',monospace; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent)}
.hub-card h2{font-family:'Fraunces',serif; font-size:clamp(1.7rem,3vw,2.2rem); line-height:1; letter-spacing:-.03em; margin:.6rem 0 .7rem}
.hub-card p{color:var(--text-secondary); line-height:1.65; font-size:.98rem}
.hub-meta{display:flex; flex-wrap:wrap; gap:.45rem; margin:.9rem 0 1.2rem}
.hub-chip{font-size:.74rem; padding:.32rem .6rem; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid var(--border-color); color:var(--text-secondary)}
.hub-card--empresas .hub-chip{border-color:rgba(255,138,30,.22)}
.hub-card--devs .hub-chip{border-color:rgba(0,229,204,.22)}
.hub-cta-inline{margin-top:auto; display:inline-flex; align-items:center; gap:.5rem; font-weight:600; color:var(--text-primary)}
.hub-cta-inline i{width:26px;height:26px; display:grid; place-items:center; border-radius:999px; background:var(--accent); color:#0a0a0f; font-size:.78rem; transition:transform .2s}
.hub-card:hover .hub-cta-inline i{transform:translateX(3px)}
/* número oculto — reducimos ruido IA */ .hub-num{display:none}

/* Trust bar */
.hub-trust{display:flex; flex-wrap:wrap; gap:1rem; align-items:center; margin-top:1.25rem; padding-top:1.25rem; border-top:1px solid var(--border-color); color:var(--text-muted); font-size:.84rem}
.hub-trust strong{color:var(--text-primary)}
.hub-dot{width:6px;height:6px;border-radius:50%; background:var(--success); box-shadow:0 0 0 6px rgba(16,185,129,.15)}

/* Section: cómo elegir */
.hub-choose{padding:3rem 0 1rem}
.hub-choose-grid{display:grid; grid-template-columns:1fr auto 1fr; gap:2rem; align-items:center; max-width:900px; margin:0 auto}
.hub-choose-card{border:1px solid var(--border-color); border-radius:20px; padding:1.5rem; background:rgba(255,255,255,.02)}
.hub-choose-card h3{font-family:'Fraunces',serif; font-size:1.2rem; margin-bottom:.35rem}
.hub-choose-card p{color:var(--text-secondary); font-size:.93rem; line-height:1.6}
.hub-or{font-family:'IBM Plex Mono',monospace; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--text-muted); border:1px solid var(--border-color); padding:.5rem .7rem; border-radius:999px; background:var(--bg-card)}
@media(max-width:800px){ .hub-choose-grid{grid-template-columns:1fr; } .hub-or{justify-self:center} }

/* Pillar shared */
.pillar-hero{padding:7rem 0 2rem; border-bottom:1px solid var(--border-color); background:linear-gradient(180deg, rgba(255,255,255,.03), transparent)}
.pillar-kicker{font-family:'IBM Plex Mono',monospace; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent)}
.pillar-title{font-family:'Fraunces',serif; font-size:clamp(2.2rem,5vw,3.4rem); line-height:.98; letter-spacing:-.03em; margin:.6rem 0 .8rem}
.pillar-lead{max-width:44rem; color:var(--text-secondary); line-height:1.7}
.pillar-grid{display:grid; grid-template-columns:1.6fr .9fr; gap:2rem; margin-top:1.8rem}
@media(max-width:900px){ .pillar-grid{grid-template-columns:1fr} }
.pillar-card{border:1px solid var(--border-color); border-radius:20px; padding:1.4rem; background:var(--bg-card)}
.pillar-card h3{font-family:'Fraunces',serif; font-size:1.15rem; margin-bottom:.4rem}
.pillar-card p{color:var(--text-secondary); font-size:.93rem; line-height:1.6}
.pillar-list{list-style:none; display:grid; gap:.6rem; margin:.8rem 0 0; padding:0}
.pillar-list li{display:flex; gap:.6rem; align-items:flex-start; color:var(--text-secondary); font-size:.93rem}
.pillar-list li i{color:var(--accent); margin-top:.2rem; font-size:.8rem}

/* Breadcrumbs */
.breadcrumbs{font-size:.85rem; color:var(--text-muted); display:flex; gap:.4rem; flex-wrap:wrap; align-items:center}
.breadcrumbs a{color:var(--text-muted)}
.breadcrumbs a:hover{color:var(--text-primary)}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){ .hub-card:hover{transform:none} }