/* ============================================================
   QENTROS — sistema de diseño compartido (multipágina)
   Estático, sin build, sin dependencias externas.
   ============================================================ */

:root{
  --bg:#0a1018;
  --panel:#0d1524;
  --card:#131f36;
  --border:#1c2840;
  --border2:#23324d;
  --accent:#0ea5e9;
  --accent2:#22d3ee;
  --text:#e8eef7;
  --muted:#93a4bd;
  --muted2:#5f7390;
  --dim:#3f5170;
  --green:#22c55e;
  --grad:linear-gradient(90deg,#0ea5e9,#22d3ee);
}

/* ---------- Base ---------- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; font-family:Inter,system-ui,sans-serif; -webkit-font-smoothing:antialiased; background:var(--bg); color:var(--text); overflow-x:hidden;}
a{text-decoration:none;}
@keyframes qpulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.3;transform:scale(.65);}}
@keyframes qfade{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
::selection{background:rgba(34,211,238,.25);}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent2); outline-offset:3px; border-radius:6px;}

/* ---------- Chrome compartido (nav / botones / links) ---------- */
.q-navlink{color:var(--muted); transition:color .15s;}
.q-navlink:hover{color:var(--text);}
.q-langbtn{font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600; letter-spacing:.06em; color:var(--accent2); background:rgba(34,211,238,.06); border:1px solid var(--border2); border-radius:6px; padding:6px 12px; cursor:pointer; transition:all .15s;}
.q-langbtn:hover{background:rgba(34,211,238,.14);}
.q-access{font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600; letter-spacing:.06em; color:#04121d; background:var(--grad); border-radius:6px; padding:7px 14px; transition:filter .15s, transform .15s;}
.q-access:hover{filter:brightness(1.1); transform:translateY(-1px);}
.q-cta-primary{background:var(--grad); color:#04121d; transition:filter .15s, transform .15s;}
.q-cta-primary:hover{filter:brightness(1.1); transform:translateY(-2px);}
.q-cta-ghost{border:1px solid #2a3a57; color:var(--text); background:rgba(11,18,32,.5); transition:background .15s;}
.q-cta-ghost:hover{background:#131f36;}
.q-synlink{color:var(--accent); transition:color .15s;}
.q-synlink:hover{color:var(--accent2);}
.q-proj-row{transition:transform .18s;}
.q-proj-row:hover{transform:translateX(8px);}
.q-proj-link{color:var(--text); transition:color .15s;}
.q-proj-row:hover .q-proj-link,.q-proj-link:hover{color:var(--accent2);}
.q-more{font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--accent); transition:color .15s;}
.q-more:hover{color:var(--accent2);}
.q-social{color:var(--muted); transition:all .15s;}
.q-social:hover{color:var(--accent2); border-color:var(--accent2);}

/* ---------- Home: media queries existentes ---------- */
@media (max-width:880px){
  .q-hero{padding:90px 28px 96px !important;}
  .q-h1{font-size:44px !important;}
  .q-about-grid{grid-template-columns:1fr !important; gap:20px !important;}
}
@media (max-width:620px){
  .q-nav{padding:14px 18px !important;}
  .q-navlinks{gap:16px !important;}
  .q-nav-hide{display:none !important;}
  .q-hero{padding:64px 20px 72px !important;}
  .q-h1{font-size:33px !important; line-height:1.12 !important;}
  .q-sub{font-size:16px !important;}
  .q-eyebrow{font-size:11px !important; letter-spacing:.12em !important;}
  .q-wrap{padding-left:20px !important; padding-right:20px !important;}
  .q-proj-title{font-size:27px !important;}
  .q-proj-cat{display:none !important;}
  .q-foot-row{flex-direction:column !important; align-items:flex-start !important;}
}

/* ============================================================
   Páginas de proyecto (Synapse / Bion / Lyceum)
   ============================================================ */

.pg-wrap{max-width:960px; margin:0 auto; padding:0 40px;}
.pg-mono{font-family:'IBM Plex Mono',monospace;}

/* Breadcrumb */
.pg-crumb{font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.08em; color:var(--muted2); display:flex; gap:9px; align-items:center; flex-wrap:wrap;}
.pg-crumb a{color:var(--muted2); transition:color .15s;}
.pg-crumb a:hover{color:var(--accent2);}
.pg-crumb .sep{color:#2a3a57;}
.pg-crumb .here{color:var(--muted);}

/* Hero de proyecto */
.pg-hero{position:relative; overflow:hidden; border-bottom:1px solid var(--border);}
.pg-hero-inner{position:relative; max-width:960px; margin:0 auto; padding:56px 40px 62px;}
.pg-glow{position:absolute; inset:0; background:radial-gradient(ellipse 60% 70% at 22% 20%, rgba(14,165,233,.14), rgba(10,16,24,0) 60%); pointer-events:none;}
.pg-eyebrow-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:26px;}
.pg-cat{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.14em; color:var(--muted2);}
.pg-h1{font-size:52px; font-weight:800; line-height:1.04; letter-spacing:-.025em; margin:14px 0 0;}
.pg-h1 .grad{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
.pg-lead{color:var(--muted); font-size:19px; line-height:1.65; max-width:620px; margin:20px 0 0;}
.pg-lead.tbd{color:#6b7d97; font-style:italic;}
.pg-hero-cta{display:flex; gap:14px; margin-top:30px; flex-wrap:wrap; align-items:center;}

/* Chips de estado */
.pg-chip{font-family:'IBM Plex Mono',monospace; font-size:10.5px; font-weight:600; padding:4px 10px; border-radius:4px; letter-spacing:.08em; display:inline-flex; align-items:center; gap:6px;}
.pg-chip.live{background:rgba(34,197,94,.15); color:var(--green);}
.pg-chip.soon{background:rgba(148,163,184,.15); color:var(--muted);}
.pg-chip .led{width:6px; height:6px; border-radius:50%; background:var(--green); display:inline-block; animation:qpulse 1.6s ease-in-out infinite;}

/* Secciones */
.pg-section{padding:60px 0; border-bottom:1px solid var(--border);}
.pg-section:last-of-type{border-bottom:none;}
.pg-kicker{font-family:'IBM Plex Mono',monospace; color:var(--accent); font-size:13px; letter-spacing:.12em;}
.pg-h2{font-size:30px; font-weight:700; letter-spacing:-.01em; margin:12px 0 0; max-width:680px;}
.pg-body{color:var(--muted); font-size:16.5px; line-height:1.75; max-width:680px; margin:16px 0 0;}
.pg-body.tbd{color:#6b7d97; font-style:italic;}

/* Grid de productos */
.pg-cards{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:30px;}
.pg-card{position:relative; background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:24px 24px 22px; transition:border-color .15s, transform .15s;}
.pg-card:hover{border-color:var(--border2); transform:translateY(-2px);}
.pg-card.muted{opacity:.72;}
.pg-card-top{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.pg-card-idx{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--dim);}
.pg-card h4{font-size:19px; font-weight:700; margin:14px 0 0;}
.pg-card p{color:var(--muted); font-size:14.5px; line-height:1.6; margin:9px 0 0;}
.pg-card .pg-card-cta{margin-top:16px; display:flex; gap:14px; flex-wrap:wrap; align-items:center;}

/* Bloque de resultados / estado "en preparación" */
.pg-prep{margin-top:26px; border:1px dashed var(--border2); border-radius:14px; padding:26px 26px; background:rgba(13,21,36,.5);}
.pg-prep .pg-prep-tag{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.1em; color:var(--accent2); display:inline-flex; align-items:center; gap:8px;}
.pg-prep .led{width:6px; height:6px; border-radius:50%; background:var(--accent2); display:inline-block;}
.pg-prep p{color:var(--muted); font-size:15px; line-height:1.65; margin:12px 0 0; max-width:640px;}

/* Métricas placeholder (avances) */
.pg-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:22px;}
.pg-stat{border:1px solid var(--border); border-radius:12px; padding:20px; background:var(--panel);}
.pg-stat .n{font-size:26px; font-weight:800; letter-spacing:-.01em; color:var(--text);}
.pg-stat .n.pending{color:var(--dim); font-family:'IBM Plex Mono',monospace; font-size:20px;}
.pg-stat .l{color:var(--muted2); font-size:12.5px; margin-top:6px; font-family:'IBM Plex Mono',monospace; letter-spacing:.04em;}

/* Banda CTA final */
.pg-band{padding:56px 0 60px; text-align:center;}
.pg-band h3{font-size:26px; font-weight:700; letter-spacing:-.01em; margin:0;}
.pg-band p{color:var(--muted); font-size:16px; margin:12px auto 0; max-width:520px; line-height:1.6;}
.pg-band-cta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:26px;}

.pg-btn{padding:14px 26px; border-radius:10px; font-weight:600; font-size:15px; display:inline-block;}

/* Lede grande de intro */
.pg-lede{font-size:20px; line-height:1.6; color:var(--text); max-width:720px; margin:16px 0 0; font-weight:400;}

/* Listas "¿Qué produce?" */
.pg-list{list-style:none; padding:0; margin:20px 0 0; max-width:700px;}
.pg-list li{position:relative; padding:11px 0 11px 28px; border-bottom:1px solid var(--border); color:var(--muted); font-size:15.5px; line-height:1.55;}
.pg-list li:before{content:"→"; position:absolute; left:0; top:11px; color:var(--accent); font-family:'IBM Plex Mono',monospace;}

/* Callout "¿Para quién es?" */
.pg-audience{margin-top:28px; border-left:2px solid var(--accent); background:rgba(14,165,233,.05); border-radius:0 12px 12px 0; padding:18px 22px; max-width:720px;}
.pg-audience .lab{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.1em; color:var(--accent2);}
.pg-audience p{color:var(--text); font-size:15.5px; line-height:1.6; margin:8px 0 0;}

/* Valores */
.pg-values{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:28px;}
.pg-value{border:1px solid var(--border); border-radius:14px; padding:22px; background:var(--panel);}
.pg-value h4{margin:0; font-size:17px; font-weight:700;}
.pg-value h4 .n{font-family:'IBM Plex Mono',monospace; color:var(--accent); font-size:13px; margin-right:9px;}
.pg-value p{color:var(--muted); font-size:14.5px; line-height:1.6; margin:9px 0 0;}

/* Fundador */
.pg-founder{display:grid; grid-template-columns:auto 1fr; gap:28px; align-items:start; margin-top:26px;}
.pg-founder .mark{width:84px; height:84px; border-radius:20px; background:var(--grad); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:30px; color:#04121d; letter-spacing:.04em; flex-shrink:0;}
.pg-founder p{color:var(--muted); font-size:16px; line-height:1.7; margin:0; max-width:660px;}

/* Rejilla de 3 (lanzamientos) */
.pg-cards3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:30px;}
@media (max-width:820px){ .pg-cards3{grid-template-columns:1fr;} }

/* Paneles Productos y Servicios */
.pg-panels{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:30px;}
.pg-panel{border:1px solid var(--border); border-radius:16px; padding:26px; background:var(--panel);}
.pg-panel h3{font-size:19px; font-weight:700; margin:0;}
.pg-panel .cap{color:var(--muted2); font-size:13.5px; line-height:1.55; margin:8px 0 0;}
.pg-panel .rows{margin-top:18px; border-top:1px solid var(--border);}
.pg-panel .rw{padding:13px 0; border-bottom:1px solid var(--border);}
.pg-panel .rw .k{font-size:14.5px; font-weight:600; color:var(--text);}
.pg-panel .rw .v{font-size:13.5px; color:var(--muted); margin-top:3px; line-height:1.5;}

/* Nota disclaimer contextual (salud) */
.pg-note{margin-top:22px; font-size:12.5px; color:var(--muted2); line-height:1.6; max-width:720px; border-top:1px solid var(--border); padding-top:16px;}

/* Banda promo destacada */
.pg-promo{margin-top:30px; border:1px solid var(--border2); border-radius:16px; padding:32px; background:linear-gradient(180deg, rgba(14,165,233,.08), rgba(13,21,36,.4)); text-align:center;}
.pg-promo h3{font-size:23px; font-weight:700; margin:0; letter-spacing:-.01em;}
.pg-promo p{color:var(--muted); font-size:15.5px; line-height:1.65; margin:12px auto 0; max-width:640px;}
.pg-promo .pg-band-cta{margin-top:22px;}

@media (max-width:820px){
  .pg-cards{grid-template-columns:1fr;}
  .pg-stats{grid-template-columns:1fr;}
  .pg-h1{font-size:40px;}
  .pg-values,.pg-panels{grid-template-columns:1fr;}
  .pg-founder{grid-template-columns:1fr; gap:16px;}
}
@media (max-width:620px){
  .pg-wrap,.pg-hero-inner{padding-left:20px !important; padding-right:20px !important;}
  .pg-hero-inner{padding-top:40px; padding-bottom:46px;}
  .pg-h1{font-size:32px;}
  .pg-lead{font-size:16px;}
  .pg-h2{font-size:25px;}
  .pg-cat{display:none;}
}