/* Nela Malikova — "Semaforo de riesgo": papel, carcasa grafito y tres senales (verde, ambar, rojo). */
:root{
  --paper:#F5F3EE; --panel:#FFFFFF; --ink:#1E2320; --soft:#4A514C; --line:rgba(30,35,32,.14); --line-soft:rgba(30,35,32,.07);
  --housing:#23282A; --go:#2E7D4F; --go-lit:#2EA060; --wait:#E8A317; --wait-ink:#8A5A00; --stop:#B23A2E; --stop-lit:#D64536;
  --display:'Space Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif; --body:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Consolas,monospace; --r:18px;
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--body); line-height:1.65; -webkit-font-smoothing:antialiased;}
img{display:block; max-width:100%; height:auto;}
a{color:inherit;}
p{margin:0 0 1em;}
.wrap{max-width:1120px; margin:0 auto; padding:0 24px;}
h1,h2,h3{font-family:var(--display); font-weight:700; letter-spacing:-.02em; margin:0 0 .4em; line-height:1.1;}
h1{font-size:clamp(2.6rem,6.4vw,4.6rem);}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem);}
h3{font-size:1.2rem; letter-spacing:-.01em;}
.lede{font-size:1.07rem; color:var(--soft); max-width:40rem;}
.skip{position:absolute; left:-999px; top:8px; z-index:100; background:var(--housing); color:#fff; padding:8px 14px; border-radius:8px;}
.skip:focus{left:8px;}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--wait); outline-offset:2px;}

/* --- lamparas --- */
.dot{display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:10px; vertical-align:middle; flex-shrink:0;}
.dot.go{background:var(--go-lit); box-shadow:0 0 0 3px rgba(46,160,96,.18);}
.dot.wait{background:var(--wait); box-shadow:0 0 0 3px rgba(232,163,23,.2);}
.dot.stop{background:var(--stop-lit); box-shadow:0 0 0 3px rgba(214,69,54,.18);}
.kicker,.meta{font-family:var(--mono); font-size:.76rem; text-transform:uppercase; letter-spacing:.08em; color:var(--soft); margin:0 0 14px; display:flex; align-items:center;}

/* --- menu: barra de senales --- */
.bar{position:sticky; top:0; z-index:40; background:rgba(245,243,238,.92); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
.bar-in{display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:14px; padding-bottom:14px;}
.logo{display:flex; align-items:center; gap:12px; text-decoration:none; font-family:var(--display); font-weight:700; font-size:1.12rem; letter-spacing:-.01em;}
.housing{display:inline-flex; gap:4px; background:var(--housing); padding:5px 7px; border-radius:100px;}
.housing i{width:8px; height:8px; border-radius:50%; background:#3A4446;}
.housing i:nth-child(1){background:var(--go-lit);} .housing i:nth-child(2){background:var(--wait);} .housing i:nth-child(3){background:var(--stop-lit);}
.lamps{display:flex; gap:6px;}
.lamps a{display:flex; align-items:center; gap:8px; padding:8px 14px; border-radius:100px; text-decoration:none; font-weight:500; font-size:.93rem; color:var(--soft); border:1px solid transparent; transition:border-color .2s, color .2s;}
.lamps .lamp{width:9px; height:9px; border-radius:50%; background:transparent; border:1.5px solid #9AA29C; transition:background .2s, border-color .2s, box-shadow .2s;}
.lamps a:hover{color:var(--ink); border-color:var(--line);}
.lamps a:hover .lamp{border-color:var(--wait); background:var(--wait);}
.lamps a.on{color:var(--ink); border-color:var(--line); background:var(--panel);}
.lamps a.on .lamp{background:var(--go-lit); border-color:var(--go-lit); box-shadow:0 0 0 4px rgba(46,160,96,.18), 0 0 12px rgba(46,160,96,.6);}
.switch{position:relative; display:grid; grid-template-columns:repeat(3,40px); background:var(--housing); border-radius:100px; padding:4px;}
.switch .knob{position:absolute; top:4px; left:4px; width:40px; height:calc(100% - 8px); border-radius:100px; background:var(--paper); transform:translateX(calc(var(--pos) * 40px)); transition:transform .25s;}
.switch a{position:relative; z-index:1; text-align:center; font-family:var(--mono); font-size:.74rem; padding:6px 0; color:#C9D0CB; text-decoration:none;}
.switch a.on{color:var(--ink); font-weight:700;}
.switch a:not(.on):hover{color:#fff;}

/* --- portada --- */
.hero{padding:72px 0 64px;}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center;}
.chips{list-style:none; padding:0; margin:26px 0 0; display:flex; flex-wrap:wrap; gap:8px;}
.chips li{font-size:.86rem; padding:6px 14px; border-radius:100px; background:var(--panel); border:1px solid var(--line);}
.hero-visual{display:flex; gap:16px; align-items:flex-start; justify-content:flex-end;}
.portrait{margin:0; border-radius:var(--r); overflow:hidden; border:1px solid var(--line); max-width:380px; box-shadow:0 24px 50px -30px rgba(30,35,32,.45);}
.portrait img{width:100%; aspect-ratio:4/5; object-fit:cover; object-position:50% 25%;}
.pole{display:flex; flex-direction:column; gap:10px; background:var(--housing); padding:12px; border-radius:100px; margin-top:28px;}
.pole .l{width:30px; height:30px; border-radius:50%; background:#3B4243;}
.pole .red{animation:lit-red 15s infinite;} .pole .amber{animation:lit-amber 15s infinite;} .pole .green{animation:lit-green 15s infinite;}
@keyframes lit-green{0%,30%{background:var(--go-lit); box-shadow:0 0 18px rgba(46,160,96,.75);} 34%,100%{background:#2C3A33; box-shadow:none;}}
@keyframes lit-amber{0%,32%{background:#463E2C; box-shadow:none;} 36%,62%{background:var(--wait); box-shadow:0 0 18px rgba(232,163,23,.75);} 66%,100%{background:#463E2C; box-shadow:none;}}
@keyframes lit-red{0%,64%{background:#45302E; box-shadow:none;} 68%,96%{background:var(--stop-lit); box-shadow:0 0 18px rgba(214,69,54,.7);} 100%{background:#45302E; box-shadow:none;}}
.pole.static .l{animation:none;}
.pole.static .l.on{background:var(--stop-lit); box-shadow:0 0 18px rgba(214,69,54,.7);}
@media (prefers-reduced-motion:reduce){
  .pole .l{animation:none;} .pole .green{background:var(--go-lit);}
  html{scroll-behavior:auto;}
}

/* --- secciones --- */
.sec{padding:72px 0; border-top:1px solid var(--line);}
.sec.last{padding-bottom:96px;}
.sig-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:34px;}
.sig-card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:26px 26px 22px; border-top:6px solid var(--go-lit);}
.sig-card.wait{border-top-color:var(--wait);} .sig-card.stop{border-top-color:var(--stop-lit);}
.sig-card p:last-child{color:var(--soft); margin:0;}
.sig-tag{font-family:var(--mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.08em; color:var(--soft); display:flex; align-items:center; margin-bottom:12px;}

.signs{background:var(--housing); color:#EEF1EE; border-top:0;}
.signs h2{color:#fff;}
.signs .lede{color:#C5CCC7;}
.signs .kicker{color:#C5CCC7;}
.signs .lede em{color:#fff;}
.gauge{position:relative; display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; margin:38px 0 0; height:16px;}
.gauge .g{border-radius:100px;}
.gauge .go{background:var(--go-lit);} .gauge .wait{background:var(--wait);} .gauge .stop{background:var(--stop-lit);}
.needle{position:absolute; top:-8px; left:0; width:4px; height:32px; border-radius:4px; background:#fff; box-shadow:0 0 0 3px var(--housing); animation:sweep 15s ease-in-out infinite;}
@keyframes sweep{0%,100%{left:12%;} 33%{left:16%;} 50%{left:48%;} 66%{left:52%;} 83%{left:84%;}}
@media (prefers-reduced-motion:reduce){ .needle{animation:none; left:16%;} }
.zones{list-style:none; padding:0; margin:20px 0 0; display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.zone{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:var(--r); padding:24px;}
.zone h3{color:#fff; margin-top:8px;}
.zone p{color:#C5CCC7; margin:0; font-size:.95rem;}
.zone-n{font-family:var(--mono); font-size:.8rem; padding:3px 10px; border-radius:100px; color:var(--housing); font-weight:700;}
.zone.go .zone-n{background:var(--go-lit);} .zone.wait .zone-n{background:var(--wait);} .zone.stop .zone-n{background:var(--stop-lit); color:#fff;}
.signs .note{margin:22px 0 0; font-family:var(--mono); font-size:.76rem; color:#AEB6B0;}

.book-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin:34px 0 30px;}
.book-card{display:block; text-decoration:none; background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:16px 16px 20px; transition:transform .2s, box-shadow .2s;}
.book-card:hover{transform:translateY(-3px); box-shadow:0 18px 40px -28px rgba(30,35,32,.5);}
.book-card .cover{width:100%; border-radius:10px; border:1px solid var(--line-soft); margin-bottom:14px;}
.book-card h3{margin-bottom:4px;}
.book-card p{margin:0; color:var(--soft); font-size:.88rem;}

.off-grid{display:grid; grid-template-columns:1fr 400px; gap:56px; align-items:center;}
.off-photo,.wide-photo,.side-photo{margin:0;}
.off-photo img{border-radius:var(--r); width:100%;}
.off-photo figcaption{font-family:var(--mono); font-size:.74rem; color:var(--soft); margin-top:10px;}

.facts{margin:6px 0 34px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:6px 26px;}
.fact{display:grid; grid-template-columns:210px 1fr; gap:24px; padding:15px 0; border-bottom:1px solid var(--line-soft);}
.fact:last-child{border-bottom:0;}
.fact dt{font-family:var(--mono); font-size:.76rem; text-transform:uppercase; letter-spacing:.06em; color:var(--soft); padding-top:3px;}
.fact dd{margin:0;}

.btn{display:inline-flex; align-items:center; gap:10px; background:var(--housing); color:#fff; border:0; border-radius:100px; padding:13px 26px; font-family:var(--body); font-weight:600; font-size:.95rem; text-decoration:none; cursor:pointer; transition:background .2s;}
.btn::before{content:""; width:9px; height:9px; border-radius:50%; background:var(--go-lit); box-shadow:0 0 10px rgba(46,160,96,.8);}
.btn:hover{background:#000;}
.btn.ghost{background:transparent; color:var(--ink); border:1px solid var(--ink);}
.btn.ghost::before{background:var(--wait); box-shadow:none;}
.btn.ghost:hover{background:var(--panel);}

/* --- paginas --- */
.page-hero{padding-bottom:40px;}
.page-hero h1{font-size:clamp(2.2rem,5vw,3.6rem);}
.wide-photo{margin-bottom:30px;}
.wide-photo img{width:100%; aspect-ratio:16/7; object-fit:cover; object-position:50% 25%; border-radius:var(--r);}
.book-list{display:flex; flex-direction:column; gap:22px;}
.book{display:grid; grid-template-columns:220px 1fr; gap:34px; align-items:start; background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:28px; scroll-margin-top:90px;}
.book .cover{width:100%; border-radius:10px; border:1px solid var(--line-soft);}
.book-sub{font-weight:600; color:var(--soft);}
.book .meta{margin-top:6px;}
.parts{margin:0; padding-left:20px; color:var(--soft);}
.career-grid{display:grid; grid-template-columns:1fr 340px; gap:56px; align-items:start;}
.side-photo img{border-radius:var(--r); width:100%; aspect-ratio:4/5; object-fit:cover; object-position:50% 25%;}
.sub-h{font-size:1.25rem; display:flex; align-items:center; margin:0 0 18px;}
.steps{list-style:none; padding:0; margin:0 0 40px; border-left:2px solid var(--line); }
.step{position:relative; display:grid; grid-template-columns:120px 1fr; gap:20px; padding:0 0 26px 26px;}
.step::before{content:""; position:absolute; left:-7px; top:6px; width:12px; height:12px; border-radius:50%; background:var(--paper); border:2px solid var(--ink);}
.step:first-child::before{background:var(--go-lit); border-color:var(--go-lit);}
.step-when{font-family:var(--mono); font-size:.76rem; text-transform:uppercase; color:var(--soft); padding-top:4px;}
.step h3{margin-bottom:2px;}
.org{font-weight:600; color:var(--soft); margin-bottom:6px;}
.step p:last-child{margin:0;}
.contact-grid{display:grid; grid-template-columns:1.4fr 1fr; gap:40px; align-items:start;}
.form{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:30px;}
.form label{display:block; font-weight:600; font-size:.9rem; margin:14px 0 6px;}
.form input[type=text],.form input[type=email],.form textarea{width:100%; font:inherit; padding:11px 14px; border:1px solid #B9BFBA; border-radius:12px; background:var(--paper); color:var(--ink);}
.form input:focus,.form textarea:focus{outline:none; border-color:var(--go); box-shadow:0 0 0 3px rgba(46,125,79,.18);}
.consent{display:flex; gap:10px; align-items:flex-start; margin:18px 0 20px;}
.consent input{margin-top:5px; accent-color:var(--go);}
.consent label{margin:0; font-weight:400; font-size:.88rem; color:var(--soft);}
.form a,.legal a,.c-card a,.nf a{color:var(--go); text-underline-offset:3px;}
.note{font-size:.85rem; color:var(--soft); margin:14px 0 0;}
.contact-cards{display:flex; flex-direction:column; gap:16px;}
.c-card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:22px 24px;}
.c-card p:last-child{margin:0;}
.legal{max-width:46rem;}
.legal h2{font-size:1.25rem; margin:30px 0 8px;}
.legal p{color:var(--soft);}
.nf .pole{display:inline-flex; margin:0 0 24px;}
.nf .lede{margin-top:10px;}

/* --- pie --- */
.foot{border-top:1px solid var(--line); padding:0 0 40px; background:var(--panel);}
.foot-scale{display:grid; grid-template-columns:1fr 1fr 1fr; height:6px; margin-bottom:28px;}
.foot-scale span:nth-child(1){background:var(--go-lit);} .foot-scale span:nth-child(2){background:var(--wait);} .foot-scale span:nth-child(3){background:var(--stop-lit);}
.foot-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px 28px; margin-bottom:12px;}
.foot-c{margin:0; font-family:var(--mono); font-size:.78rem; color:var(--soft);}
.foot-links{display:flex; flex-wrap:wrap; gap:8px 20px; margin:0;}
.foot-links a{text-decoration:none; font-size:.9rem; color:var(--soft);}
.foot-links a:hover{color:var(--ink); text-decoration:underline;}
.fine{font-size:.8rem; color:var(--soft); margin:6px 0 0;}
.foot .kc-foot{max-width:1120px; margin:14px auto 0; padding:0 24px; font-size:.82rem; color:var(--soft);}
@media (max-width:600px){ .foot .kc-foot{padding:0 16px;} }

/* --- responsive --- */
@media (max-width:960px){
  .bar-in{flex-wrap:wrap;}
  .lamps{order:3; width:100%; flex-wrap:wrap; gap:4px;}
  .lamps a{padding:7px 12px; white-space:nowrap;}
  .hero-grid,.off-grid,.career-grid,.contact-grid{grid-template-columns:1fr; gap:36px;}
  .hero-visual{justify-content:flex-start;}
  .sig-grid,.zones{grid-template-columns:1fr;}
  .book-grid{grid-template-columns:repeat(2,1fr);}
  .off-photo,.side-photo{max-width:420px;}
}
@media (max-width:600px){
  .wrap{padding:0 16px;}
  .hero{padding:44px 0 40px;}
  .sec{padding:56px 0;}
  .portrait{max-width:none; flex:1;}
  .pole{padding:9px; gap:8px;} .pole .l{width:22px; height:22px;}
  .book-grid{grid-template-columns:1fr; max-width:320px;}
  .book{grid-template-columns:1fr; padding:20px;}
  .book .cover{max-width:200px;}
  .fact{grid-template-columns:1fr; gap:2px;}
  .facts{padding:4px 18px;}
  .step{grid-template-columns:1fr; gap:4px;}
  .form{padding:22px 18px;}
  .wide-photo img{aspect-ratio:4/3;}
  .switch{grid-template-columns:repeat(3,36px);} .switch .knob{width:36px; transform:translateX(calc(var(--pos) * 36px));}
}