/* ==========================================================================
   RAMÍREZ ARVIZU — La Neurología de los Negocios
   Sistema de diseño: clínico-diagnóstico aplicado a negocios
   ========================================================================== */

:root{
  --ink:        #0A0E17;
  --ink-2:      #121A2E;
  --ink-3:      #1B2540;
  --paper:      #EDEEF2;
  --paper-2:    #DEE1E8;
  --text-lt:    #EAEDF3;
  --text-lt-mut:#9CA6BC;
  --text-dk:    #10141F;
  --text-dk-mut:#4A5164;
  --signal:     #46D9C8;
  --signal-dim: #1F4A47;
  --alert:      #C7373B;
  --brass:      #B08D3E;
  --brass-dim:  #3A3020;

  --f-display: 'Fraunces', serif;
  --f-body:    'IBM Plex Sans', sans-serif;
  --f-mono:    'IBM Plex Mono', monospace;

  --radius: 2px;
  --maxw: 1180px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family: var(--f-body);
  background: var(--ink);
  color: var(--text-lt);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
.container{max-width:var(--maxw); margin:0 auto; padding:0 32px;}
:focus-visible{outline:2px solid var(--signal); outline-offset:3px;}

/* ---------- Typography ---------- */
h1,h2,h3,h4{font-family:var(--f-display); font-weight:700; letter-spacing:-0.01em; line-height:1.08;}
.eyebrow{
  font-family:var(--f-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--signal); display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before{content:""; width:18px; height:1px; background:var(--signal); display:inline-block;}
.mono{font-family:var(--f-mono);}

/* ---------- Header ---------- */
.header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 32px; background:rgba(10,14,23,.82); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.header .logo{height:30px;}
.header nav{display:flex; align-items:center; gap:28px;}
.nav-link{font-size:14px; color:var(--text-lt-mut); transition:color .2s;}
.nav-link:hover{color:var(--text-lt);}
.nav-links{display:flex; gap:26px;}
.btn-menu{display:none; background:none; border:none; color:var(--text-lt); font-size:22px; cursor:pointer;}

/* ---------- Buttons ---------- */
.btn-primary, .btn-outline, .btn-brass{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-mono); font-size:13px; letter-spacing:.04em; text-transform:uppercase;
  padding:14px 26px; border-radius:var(--radius); cursor:pointer; transition:all .22s ease;
  border:1px solid transparent; white-space:nowrap;
}
.btn-primary{background:var(--signal); color:#04211E; border-color:var(--signal);}
.btn-primary:hover{background:transparent; color:var(--signal);}
.btn-outline{background:transparent; color:var(--text-lt); border-color:rgba(255,255,255,.28);}
.btn-outline:hover{border-color:var(--signal); color:var(--signal);}
.btn-brass{background:var(--brass); color:#1A1406; border-color:var(--brass);}
.btn-brass:hover{background:transparent; color:var(--brass);}

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  padding:140px 0 100px; background:
    radial-gradient(ellipse 900px 500px at 78% 12%, rgba(70,217,200,.10), transparent 60%),
    var(--ink);
  overflow:hidden;
}
.hero .container{position:relative; z-index:2;}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:60px; align-items:center;}
.hero h1{
  font-size:clamp(2.4rem, 4.6vw, 4rem); color:var(--text-lt); margin:22px 0 24px;
}
.hero h1 em{font-style:italic; color:var(--signal);}
.hero-sub{font-size:17px; color:var(--text-lt-mut); max-width:52ch; margin-bottom:36px;}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:52px;}
.hero-stats{display:flex; gap:40px; flex-wrap:wrap;}
.hero-stats div{border-left:1px solid rgba(255,255,255,.14); padding-left:16px;}
.hero-stats strong{display:block; font-family:var(--f-mono); font-size:22px; color:var(--signal);}
.hero-stats span{font-size:12.5px; color:var(--text-lt-mut);}

/* signature EEG trace */
.trace-wrap{position:relative; width:100%; height:340px;}
.trace-wrap svg{width:100%; height:100%; overflow:visible;}
.trace-line{
  fill:none; stroke:var(--signal); stroke-width:1.6; stroke-linecap:round;
  filter:drop-shadow(0 0 6px rgba(70,217,200,.55));
  stroke-dasharray:1400; stroke-dashoffset:1400;
  animation:draw 3.4s cubic-bezier(.65,0,.35,1) forwards .3s;
}
@keyframes draw{to{stroke-dashoffset:0;}}
.trace-node{fill:var(--ink); stroke:var(--signal); stroke-width:1.4; opacity:0; animation:pop .5s ease forwards;}
@keyframes pop{to{opacity:1;}}

/* ---------- Section shell ---------- */
.section{padding:112px 0;}
.section.tight{padding:80px 0;}
.section.dark{background:var(--ink-2);}
.section.paper{background:var(--paper); color:var(--text-dk);}
.section.paper .eyebrow{color:#0C6E64;}
.section-header{max-width:640px; margin-bottom:64px;}
.section-header h2{font-size:clamp(1.8rem,3vw,2.6rem); margin:16px 0 14px;}
.section.paper .section-header p{color:var(--text-dk-mut);}
.section-header p{color:var(--text-lt-mut); font-size:16.5px;}
.section-header.center{margin-left:auto; margin-right:auto; text-align:center;}

/* ---------- Método / thesis ---------- */
.thesis-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:70px; align-items:start;}
.thesis-quote{
  font-family:var(--f-display); font-style:italic; font-size:1.5rem; line-height:1.4;
  color:var(--text-lt); border-left:2px solid var(--signal); padding-left:26px;
}
.thesis-body p{color:var(--text-lt-mut); margin-bottom:18px; font-size:15.5px;}
.thesis-body strong{color:var(--text-lt); font-weight:600;}

/* ---------- Protocol / 6 systems ---------- */
.protocol-list{display:flex; flex-direction:column; border-top:1px solid rgba(255,255,255,.1);}
.protocol-item{
  display:grid; grid-template-columns:70px 1.3fr 1.6fr 140px; gap:24px; align-items:center;
  padding:26px 0; border-bottom:1px solid rgba(255,255,255,.1); transition:background .2s;
}
.protocol-item:hover{background:rgba(70,217,200,.035);}
.protocol-num{font-family:var(--f-mono); font-size:13px; color:var(--signal);}
.protocol-name{font-family:var(--f-display); font-size:1.15rem; color:var(--text-lt);}
.protocol-name span{display:block; font-family:var(--f-mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-lt-mut); margin-top:4px; font-weight:400;}
.protocol-q{font-size:14px; color:var(--text-lt-mut);}
.tag{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  padding:6px 12px; border-radius:20px; text-align:center; justify-self:end;
}
.tag.free{background:rgba(70,217,200,.14); color:var(--signal); border:1px solid rgba(70,217,200,.4);}
.tag.paid{background:rgba(255,255,255,.06); color:var(--text-lt-mut); border:1px solid rgba(255,255,255,.16);}
.tag.locked{background:rgba(176,141,62,.12); color:var(--brass); border:1px solid rgba(176,141,62,.4);}

/* ---------- How it works ---------- */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.1);}
.step-card{background:var(--ink); padding:34px 26px;}
.step-card .n{font-family:var(--f-mono); font-size:12px; color:var(--signal); margin-bottom:16px; display:block;}
.step-card h4{font-size:1.05rem; margin-bottom:10px; color:var(--text-lt);}
.step-card p{font-size:14px; color:var(--text-lt-mut);}

/* ---------- Podcast ---------- */
.podcast-block{display:grid; grid-template-columns:.85fr 1.15fr; gap:60px; align-items:center;}
.podcast-cover{
  aspect-ratio:1/1; background:linear-gradient(155deg, var(--ink-3), var(--ink));
  border:1px solid rgba(70,217,200,.25); display:flex; align-items:center; justify-content:center;
  position:relative;
}
.podcast-cover .ring{width:62%; aspect-ratio:1/1; border-radius:50%; border:1px solid rgba(70,217,200,.35); display:flex; align-items:center; justify-content:center;}
.podcast-cover .ring::before{content:""; width:70%; height:70%; border-radius:50%; border:1px solid rgba(70,217,200,.5);}
.podcast-series{display:flex; gap:10px; flex-wrap:wrap; margin:26px 0 30px;}
.series-chip{font-family:var(--f-mono); font-size:12px; padding:8px 14px; border:1px solid rgba(255,255,255,.16); border-radius:20px; color:var(--text-lt-mut);}
.platform-row{display:flex; gap:22px; flex-wrap:wrap; font-family:var(--f-mono); font-size:12.5px; color:var(--text-lt-mut);}

/* ---------- Blindaje (premium) ---------- */
.section.premium{
  background:
    radial-gradient(ellipse 800px 400px at 15% 20%, rgba(176,141,62,.10), transparent 60%),
    #08070B;
  border-top:1px solid rgba(176,141,62,.25); border-bottom:1px solid rgba(176,141,62,.25);
}
.premium .eyebrow{color:var(--brass);}
.premium .eyebrow::before{background:var(--brass);}
.premium-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start;}
.premium-sectors{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:rgba(176,141,62,.2); border:1px solid rgba(176,141,62,.2);}
.sector-card{background:#08070B; padding:24px;}
.sector-card h4{font-size:.98rem; color:var(--text-lt); margin-bottom:8px; font-family:var(--f-display);}
.sector-card p{font-size:13.5px; color:var(--text-lt-mut);}
.premium-stats{display:flex; gap:36px; margin:30px 0 34px;}
.premium-stats strong{display:block; font-family:var(--f-mono); font-size:26px; color:var(--brass);}
.premium-stats span{font-size:12px; color:var(--text-lt-mut);}

/* ---------- Contact / CTA final ---------- */
.contact-section{
  background: var(--paper); color:var(--text-dk); text-align:center; padding:120px 0;
  position:relative;
}
.contact-section h2{color:var(--text-dk); font-size:clamp(1.9rem,3.4vw,2.8rem); margin-bottom:16px;}
.contact-section p{color:var(--text-dk-mut); max-width:56ch; margin:0 auto 44px; font-size:16.5px;}
.contact-ctas{display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-bottom:36px;}
.contact-section .btn-outline{border-color:rgba(16,20,31,.3); color:var(--text-dk);}
.contact-section .btn-outline:hover{border-color:var(--text-dk); color:var(--text-dk); background:rgba(16,20,31,.05);}
.contact-links{display:flex; gap:28px; justify-content:center; flex-wrap:wrap; font-family:var(--f-mono); font-size:13px;}
.contact-links a{color:var(--text-dk-mut); border-bottom:1px solid transparent;}
.contact-links a:hover{color:var(--text-dk); border-color:var(--text-dk);}

/* ---------- Footer ---------- */
.footer{background:var(--ink); padding:30px 0; border-top:1px solid rgba(255,255,255,.08);}
.footer .container{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;}
.footer p{font-size:12.5px; color:var(--text-lt-mut); font-family:var(--f-mono);}

/* ---------- Fade-in on scroll ---------- */
.fade{opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s ease;}
.fade.in{opacity:1; transform:translateY(0);}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr;}
  .trace-wrap{height:220px; order:-1;}
  .thesis-grid{grid-template-columns:1fr; gap:36px;}
  .podcast-block{grid-template-columns:1fr;}
  .premium-grid{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr 1fr;}
  .protocol-item{grid-template-columns:1fr; gap:8px; text-align:left;}
  .tag{justify-self:start;}
  .nav-links{display:none;}
  .btn-menu{display:block;}
}
@media (max-width: 600px){
  .container{padding:0 20px;}
  .steps{grid-template-columns:1fr;}
  .premium-sectors{grid-template-columns:1fr;}
  .hero-stats{gap:24px;}
}

@media (prefers-reduced-motion: reduce){
  .trace-line{animation:none; stroke-dashoffset:0;}
  .trace-node{animation:none; opacity:1;}
  .fade{transition:none; opacity:1; transform:none;}
  html{scroll-behavior:auto;}
}

/* ==========================================================================
   Componentes compartidos: páginas de diagnóstico / cuestionario / resultado
   (Taller 0 y siguientes — evita duplicar este bloque en cada archivo)
   ========================================================================== */
.quiz-wrap{max-width:760px; margin:0 auto; padding:70px 24px 100px;}
.sistema-block{margin-bottom:44px;}
.sistema-block h3{font-family:var(--f-display); font-size:1.15rem; margin-bottom:18px; color:var(--signal);}
.pregunta{padding:18px 0; border-bottom:1px solid rgba(255,255,255,.08);}
.pregunta p{margin-bottom:12px; font-size:15px;}
.escala{display:flex; gap:14px; flex-wrap:wrap;}
.escala label{
  display:flex; flex-direction:column; align-items:center; gap:5px; cursor:pointer;
  font-family:var(--f-mono); font-size:10.5px; color:var(--text-lt-mut); width:64px; text-align:center;
}
.escala input{accent-color:var(--signal); width:18px; height:18px;}
.escala-num{font-size:12px; font-weight:600; color:var(--text-lt);}
.escala-label{line-height:1.25;}

.instrucciones{background:var(--ink-2); border:1px solid rgba(70,217,200,.2); padding:22px 26px; margin-bottom:34px;}
.instrucciones h4{font-family:var(--f-display); font-size:1.02rem; margin-bottom:8px; color:var(--text-lt);}
.instrucciones > p{font-size:13.5px; color:var(--text-lt-mut); margin-bottom:16px;}
.leyenda-escala{display:flex; flex-wrap:wrap; gap:16px;}
.leyenda-escala > div{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text-lt-mut);}
.leyenda-escala .num{
  font-family:var(--f-mono); font-size:12px; color:var(--signal); border:1px solid rgba(70,217,200,.4);
  width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.error-box{background:rgba(199,55,59,.12); border:1px solid rgba(199,55,59,.4); color:#f2a3a5; padding:12px 14px; font-size:13.5px; margin-bottom:24px; border-radius:2px;}

.result-card{background:var(--ink-2); border:1px solid rgba(70,217,200,.3); padding:36px; margin-bottom:26px;}
.fecha-tag{font-family:var(--f-mono); font-size:11.5px; color:var(--text-lt-mut); margin-bottom:6px; display:block;}
.bars{margin:28px 0 6px;}
.bar-row{margin-bottom:16px;}
.bar-label{display:flex; justify-content:space-between; font-family:var(--f-mono); font-size:12px; margin-bottom:6px; color:var(--text-lt-mut);}
.bar-label strong{color:var(--text-lt); font-weight:500;}
.bar-track{background:rgba(255,255,255,.08); height:8px; border-radius:4px; overflow:hidden;}
.bar-fill{height:100%; border-radius:4px;}
.bar-fill.saludable{background:#3FBF8F;}
.bar-fill.moderado{background:#D9A93E;}
.bar-fill.critico{background:var(--alert);}
.leyenda-severidad{display:flex; gap:20px; margin-top:18px; font-size:11.5px; color:var(--text-lt-mut); flex-wrap:wrap;}
.leyenda-severidad span{display:flex; align-items:center; gap:6px;}
.dot{width:9px; height:9px; border-radius:50%; display:inline-block;}
.dot.saludable{background:#3FBF8F;} .dot.moderado{background:#D9A93E;} .dot.critico{background:var(--alert);}

.cta-card{
  background:linear-gradient(155deg, var(--ink-3), var(--ink-2)); border:1px solid rgba(70,217,200,.35);
  padding:30px 32px; margin-bottom:30px;
}
.cta-card h3{font-family:var(--f-display); font-size:1.25rem; margin:10px 0 10px; color:var(--text-lt);}
.cta-card p{color:var(--text-lt-mut); font-size:14.5px; margin-bottom:20px;}
.result-actions{display:flex; gap:14px; flex-wrap:wrap;}

/* ---- Mapa de decisiones (Taller 2 y herramientas cualitativas similares) ---- */
.decision-row{
  display:grid; grid-template-columns:1.4fr 1fr 1fr .9fr auto; gap:10px; align-items:center;
  padding:12px 0; border-bottom:1px solid rgba(255,255,255,.06);
}
.decision-row input, .decision-row select{
  width:100%; padding:9px 10px; background:var(--ink); border:1px solid rgba(255,255,255,.14);
  color:var(--text-lt); border-radius:2px; font-family:var(--f-body); font-size:13px;
}
.decision-row input:focus, .decision-row select:focus{outline:none; border-color:var(--signal);}
.decision-remove{
  background:none; border:1px solid rgba(255,255,255,.14); color:var(--text-lt-mut);
  border-radius:2px; padding:8px 10px; cursor:pointer; font-size:12px;
}
.decision-remove:hover{border-color:var(--alert); color:var(--alert);}
.decision-header{
  display:grid; grid-template-columns:1.4fr 1fr 1fr .9fr auto; gap:10px;
  font-family:var(--f-mono); font-size:10.5px; text-transform:uppercase; color:var(--text-lt-mut);
  padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,.14);
}
.btn-add-row{
  margin-top:14px; background:none; border:1px dashed rgba(70,217,200,.4); color:var(--signal);
  padding:10px 16px; border-radius:2px; cursor:pointer; font-family:var(--f-mono); font-size:12px;
}
.btn-add-row:hover{background:rgba(70,217,200,.08);}
.brecha-item{
  display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.06);
  font-size:13.5px;
}
.brecha-item .quien{color:var(--text-lt-mut); font-family:var(--f-mono); font-size:11.5px;}

@media (max-width: 700px){
  .decision-row, .decision-header{grid-template-columns:1fr; gap:6px;}
  .decision-header{display:none;}
  .decision-row{background:var(--ink-2); padding:14px; border:1px solid rgba(255,255,255,.08); margin-bottom:10px; border-radius:2px;}
}