/* ==========================================================================
   sistema.css — Sistema visual unificado · uxjosearroyo.com
   Derivado de Mini_Kit_Dashboard.html
   Se carga DESPUÉS del <style> inline de cada página, por eso gana la cascada.
   Para revertir: quitar el <link> de sistema.css. Nada más cambia.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  --brand:#1C0442;
  --accent:#FF0037;

  --bg:#1C0442;
  --surface:rgba(255,255,255,.055);
  --surface-2:rgba(255,255,255,.035);
  --ink:#FFFFFF;
  --ink-2:rgba(255,255,255,.76);
  --ink-3:rgba(255,255,255,.52);
  --line:rgba(255,255,255,.16);
  --line-2:rgba(255,255,255,.08);
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --accent-soft:rgba(255,0,55,.16);
  --hover:rgba(255,255,255,.42);
  --focus:rgba(255,255,255,.70);

  /* Puentes con la nomenclatura anterior del sitio */
  --bg-2:var(--surface);
  --text:var(--ink);
  --text-2:var(--ink-2);
  --text-3:var(--ink-3);
  --hairline:var(--line-2);
  --hairline-strong:var(--line);

  --radius:15px;
  --radius-sm:10px;
  --container:1180px;

  --sans:"Source Sans 3","Source Sans Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
  --display:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:'Source Serif 4', Georgia, serif;

  --sect:clamp(64px, 7vw, 96px);
}

/* ---------- 2. Base tipográfica ---------- */
body{
  font-family:var(--sans);
  font-size:17px;
  line-height:1.62;
  letter-spacing:0;
  color:var(--ink);
  background:var(--bg);
}
h1,h2,h3,h4,h5,.disp{
  font-family:var(--display);
  text-wrap:balance;
  letter-spacing:-.015em;
}
p{color:var(--ink-2)}

/* Escala contenida: el titular grita menos, el contenido respira más */
.hero h1{
  font-size:clamp(2.15rem, 5vw, 3.5rem);
  line-height:1.08;
  letter-spacing:-.022em;
  font-weight:800;
  margin:10px 0 14px;
}
.section-title{
  font-size:clamp(1.55rem, 3.2vw, 2.2rem);
  line-height:1.18;
  letter-spacing:-.015em;
  font-weight:700;
  margin:0 0 12px;
}
.section-lede{
  font-size:1.02rem;
  color:var(--ink-2);
  max-width:66ch;
  margin:0 0 44px;
}

/* Eyebrow: de píldora roja a etiqueta discreta */
.eyebrow{
  font-family:var(--display);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ink-3);
  background:transparent;
  border:0;
  padding:0;
  margin-bottom:18px;
}

/* ---------- 3. Ritmo vertical ---------- */
section{padding:var(--sect) 0}
.hero{padding:52px 0 12px}
.filosofia{padding:var(--sect) 0}
.container{max-width:var(--container)}

/* ---------- 4. Superficies y tarjetas ---------- */
.pilar,
.camino,
.newsletter,
.cta-card,
.module,
.sector,
.credencial,
.valor,
.entregable,
.audience-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:none;
}
.pilar{padding:24px}
.camino{padding:28px 26px}
.camino:hover{
  border-color:var(--hover);
  transform:none;
  box-shadow:var(--shadow);
}
.pilar h3,.camino h3{font-family:var(--display);font-size:1.05rem;font-weight:700;letter-spacing:-.005em}
.pilar p,.camino p{font-size:.96rem;color:var(--ink-2)}
.pilar__num{
  font-family:var(--display);
  font-style:normal;
  font-size:12px;
  font-weight:700;
  letter-spacing:.2em;
  color:var(--ink-3);
  margin-bottom:14px;
}

/* ---------- 5. Botones (pill, plano) ---------- */
.btn{
  font-family:var(--display);
  font-weight:700;
  font-size:14.5px;
  letter-spacing:0;
  padding:13px 24px;
  border-radius:100px;
  transition:.18s;
}
.btn:hover{transform:none}
.btn-primary{
  background:var(--accent);
  color:#FFFFFF;
  box-shadow:none;
}
.btn-primary:hover{opacity:.9;box-shadow:none}
.btn-ghost{
  background:transparent;
  color:var(--ink-2);
  border:1px solid var(--line);
  font-weight:600;
}
.btn-ghost:hover{border-color:var(--hover);color:var(--ink);opacity:1}

/* ---------- 6. Menos ruido: fuera glows y degradados ---------- */
body::before,body::after,
.hero__visual::before,
.sobre-breve__photo::before,
.camino::after{content:none;display:none}
.filosofia{background:none}
.caminos{background:none}
.workshop-banner{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.sobre-breve__photo img{border:1px solid var(--line)}
.hero__visual img{border-radius:var(--radius)}

/* ---------- 7. Header, nav, footer ---------- */
.site-header{background:rgba(28,4,66,.82);border-bottom:1px solid var(--line-2)}
.nav a{font-family:var(--display);font-size:13.5px;font-weight:500;color:var(--ink-3)}
.nav a:hover,.nav a.is-active{color:var(--ink)}
.site-footer{border-top:1px solid var(--line-2);color:var(--ink-3);padding:var(--sect) 0 40px}
.footer h4{font-family:var(--display);font-size:11.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3)}
.footer a{color:var(--ink-2)}
.footer a:hover{color:var(--ink)}

/* ---------- 8. Accesibilidad ---------- */
a:focus-visible,.btn:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:3px;
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ---------- 9. Compatibilidad con el buscador (search.css) ----------
   search.css usa los tokens antiguos con fallback: var(--bg-2,#2A1058).
   Como aquí --bg-2 es translúcido, el panel del modal necesita fondo
   sólido propio o el texto queda ilegible sobre el backdrop. */
.search-modal{background:rgba(28,4,66,.86)}
.search-modal__panel{
  background:#231052;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 30px 80px -24px rgba(0,0,0,.6);
}
.search-modal__input{font-family:var(--sans);font-weight:400}
.search-result__title{font-family:var(--display);font-weight:600;color:var(--ink)}
.search-result__snippet{font-family:var(--sans);color:var(--ink-2)}
.search-result__tag{font-family:var(--display)}
.search-button{border-color:var(--line);color:var(--ink-3)}
.search-button:hover{color:var(--ink);border-color:var(--hover);transform:none}