:root{--azul:#1B3F8B;--azul-osc:#102A5C;--oro:#F2B705;--rojo:#C8102E;--crema:#F6F1E6;--caqui:#E9DFC6;--borde:#E3D9C2;--texto:#1B2A28;--gris:#4A5856;--claro:#DCE4F3}
[hidden]{display:none !important}
*{box-sizing:border-box}
body{margin:0;font-family:'Public Sans',system-ui,sans-serif;color:var(--texto);background:var(--crema);line-height:1.5}
img{max-width:100%;height:auto}
a{color:var(--azul)}a:hover{color:var(--rojo)}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.display{font-family:'Archivo Black','Arial Black',sans-serif;font-weight:400}

/* Encabezado */
header.site{background:var(--azul);color:#fff}
.site-head{max-width:1200px;margin:0 auto;padding:14px 24px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:14px;color:#fff;text-decoration:none}
.brand:hover{color:#fff}
.brand img{width:54px;height:54px;object-fit:contain}
.brand strong{display:block;font-family:'Archivo Black','Arial Black',sans-serif;font-weight:400;font-size:19px}
.brand em{display:block;font-size:14px;font-weight:600;color:var(--caqui)}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:4px 20px;font-size:15px;font-weight:600}
.nav a{color:#fff;text-decoration:none;padding:10px 0;display:inline-flex;align-items:center;gap:6px}
.nav a[aria-current]{color:var(--oro)}
.nav a.btn{padding:12px 20px;color:var(--azul-osc)}
.divisa{display:flex;height:10px}.divisa-fina{height:6px}
.divisa span{flex:1}
.divisa span:nth-child(1){background:#2F6FD1}.divisa span:nth-child(2){background:#C8102E}.divisa span:nth-child(3){background:#2E8B3E}
.divisa span:nth-child(4){background:#7A7F86}.divisa span:nth-child(5){background:#7A1F34}.divisa span:nth-child(6){background:#F2B705}

/* Botones */
.btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:14px 24px;border-radius:6px;font-weight:800;font-size:16px;text-decoration:none}
.btn-oro{background:var(--oro);color:var(--azul-osc)}.btn-oro:hover{color:var(--azul-osc);filter:brightness(1.06)}
.btn-borde{color:#fff;border:2px solid #8FA8D6}.btn-borde:hover{color:#fff;border-color:#fff}
.btn-azul{background:var(--azul);color:#fff}
.actions{display:flex;flex-wrap:wrap;gap:12px;padding-top:8px}

/* Portada */
.hero{background:var(--azul);color:#fff;overflow:hidden}
.hero-in{display:flex;flex-wrap:wrap;gap:48px;align-items:center;padding-top:76px;padding-bottom:96px}
.hero-text{flex:999 1 540px;min-width:0;display:flex;flex-direction:column;gap:24px}
.tira{align-self:flex-start;background:var(--rojo);color:#fff;font-family:'Archivo Black','Arial Black',sans-serif;font-size:13px;letter-spacing:.06em;padding:7px 14px;border-radius:3px}
.hero h1{margin:0;font-size:clamp(38px,6vw,58px);line-height:1.04}
.hero h1 span{color:var(--oro)}
.hero p{margin:0;font-size:19px;line-height:1.6;color:var(--claro);max-width:580px}
.hero-img{flex:1 1 300px;min-width:0;display:flex;justify-content:center}
.hero-img img{width:100%;max-width:380px;filter:drop-shadow(0 20px 30px rgba(5,12,28,.45))}

/* Secciones */
.section{padding:88px 0}.section-top0{padding-top:0}
.band{background:#fff;border-top:1px solid var(--borde);border-bottom:1px solid var(--borde)}
.eyebrow{display:block;font-family:'Archivo Black','Arial Black',sans-serif;font-size:13px;letter-spacing:.08em;color:var(--rojo);margin-bottom:10px}
.h2{margin:0;font-family:'Archivo Black','Arial Black',sans-serif;font-weight:400;font-size:clamp(30px,4vw,40px);line-height:1.1;color:var(--azul)}
.lead{margin:14px 0 0;font-size:17px;line-height:1.6;color:var(--gris);max-width:700px}
.head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:28px}
.more-link{font-weight:800;text-decoration:none;display:inline-block;padding:10px 0}
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid-news{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}

/* Cifras */
.tabs{display:flex;gap:4px;background:var(--caqui);padding:4px;border-radius:8px}
.tabs button{min-height:44px;padding:10px 18px;border:0;border-radius:6px;font:inherit;font-size:15px;font-weight:700;cursor:pointer;background:transparent;color:var(--azul)}
.tabs button[aria-pressed="true"]{background:var(--azul);color:#fff}
.stat{background:#fff;border:1px solid var(--borde);border-top:6px solid var(--azul);border-radius:10px;padding:24px;display:flex;flex-direction:column;gap:6px}
.stat b{font-family:'Archivo Black','Arial Black',sans-serif;font-weight:400;font-size:40px;line-height:1.1;color:var(--azul)}
.stat span{font-size:15px;font-weight:600;color:var(--gris)}
.fuente{margin:16px 0 0;font-size:13px;color:#5E6B69}

/* Noticias */
.news-card{background:#fff;border:1px solid var(--borde);border-radius:12px;overflow:hidden;text-decoration:none;color:inherit;display:flex;flex-direction:column}
.news-card:hover{color:inherit;box-shadow:0 10px 26px rgba(16,42,92,.12)}
.news-card > img,.news-noimg{width:100%;aspect-ratio:1200/630;object-fit:cover;display:block;background:var(--caqui)}
.news-noimg{display:flex;align-items:center;justify-content:center}.news-noimg img{width:72px;opacity:.6}
.news-card .body{padding:20px;display:flex;flex-direction:column;gap:8px}
.news-card h3{margin:0;font-size:19px;line-height:1.3}
.news-card p{margin:0;font-size:15px;color:var(--gris)}
.news-card time,.meta{font-size:13px;color:#5E6B69}
.badge{align-self:flex-start;display:inline-block;font-size:12px;font-weight:800;color:var(--azul);background:#E8EEF9;padding:4px 10px;border-radius:999px}
.pager{margin-top:32px}
.pager ul{display:flex;gap:10px;list-style:none;padding:0;margin:0}
.pager a,.pager span{display:inline-block;padding:10px 16px;border-radius:6px;background:#fff;border:1px solid var(--borde);text-decoration:none;font-weight:700}

/* Historia */
.teaser{display:flex;flex-wrap:wrap;text-decoration:none;color:#fff;background:var(--azul-osc);border-radius:14px;overflow:hidden}
.teaser:hover{color:#fff}
.teaser .year{flex:1 1 280px;background:var(--rojo);padding:40px;display:flex;flex-direction:column;justify-content:center;gap:4px}
.teaser .year small{font-size:14px;font-weight:700;letter-spacing:.08em;color:#FFE3E7}
.teaser .year b{font-size:84px;line-height:1}
.teaser .txt{flex:999 1 420px;padding:40px;display:flex;flex-direction:column;gap:14px}
.teaser h2{margin:0;font-size:32px;line-height:1.15}
.teaser p{margin:0;font-size:17px;line-height:1.6;color:var(--claro)}
.teaser .more{font-weight:800;color:var(--oro)}

/* Clases */
.clases{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin-top:32px}
.clase{border:1px solid var(--borde);border-radius:10px;padding:20px;display:flex;flex-direction:column;gap:10px;align-items:flex-start;background:#fff}
.clase i{width:40px;height:40px;border-radius:50%;border:4px solid #D4A21A;display:block}
.clase strong{font-size:18px}.clase span{font-size:14px;color:#5E6B69}

/* Uniforme */
.split{display:flex;flex-wrap:wrap;gap:40px;align-items:center}
.split > div:first-child{flex:999 1 460px;min-width:0}
.swatches{flex:1 1 320px;min-width:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.swatches div{display:flex;flex-direction:column;gap:8px}
.swatches i{display:block;height:90px;border-radius:8px}
.swatches span{font-size:13px;font-weight:700}

/* Llamado a líderes */
.cta{background:var(--oro);border-radius:14px;padding:48px 40px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px}
.cta > div{max-width:640px}
.cta .eyebrow{color:#7A1F34}
.cta h2{margin:0;font-family:'Archivo Black','Arial Black',sans-serif;font-weight:400;font-size:32px;line-height:1.15;color:var(--azul-osc)}
.cta p{margin:8px 0 0;font-size:17px;color:#26332F}

/* Artículo */
.article{max-width:780px;margin:0 auto;padding:48px 24px 88px}
.article h1{margin:12px 0 8px;font-family:'Archivo Black','Arial Black',sans-serif;font-weight:400;font-size:clamp(30px,5vw,44px);line-height:1.1;color:var(--azul)}
.article .cover{display:block;width:100%;border-radius:12px;margin:24px 0}
.prose{font-size:18px;line-height:1.75}
.prose img{border-radius:8px}

/* Pie */
footer.site{background:var(--azul-osc);color:var(--claro)}
.foot{max-width:1200px;margin:0 auto;padding:36px 24px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;font-size:14px}
.foot-brand{display:flex;align-items:center;gap:12px}
.fuentes{max-width:520px;display:flex;flex-direction:column;gap:6px;color:#A9BADB}
.fuentes strong{color:#fff}

/* Animaciones */
@keyframes rise{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.7) rotate(-6deg)}to{opacity:1;transform:none}}
.in{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.d1{animation-delay:.15s}.d2{animation-delay:.3s}.d3{animation-delay:.45s}
.popin{animation:pop 1s cubic-bezier(.2,.8,.2,1.1) .3s both}
.js [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.js [data-reveal="pop"]{transform:scale(.88)}
.js [data-reveal="side"]{transform:translateX(-40px)}
.js [data-reveal].is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .in,.popin{animation:none}
  .js [data-reveal]{opacity:1;transform:none;transition:none}
}

/* Encabezado fijo */
header.site{position:sticky;top:0;z-index:50;box-shadow:0 2px 12px rgba(5,12,28,.25)}
html{scroll-padding-top:110px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
@media (max-width:720px){
  .site-head{padding:10px 16px;gap:6px}
  .brand img{width:40px;height:40px}
  .brand strong{font-size:16px}
  .brand em{display:none}
  .nav{width:100%;flex-wrap:nowrap;overflow-x:auto;gap:18px;font-size:14px;scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .nav a{white-space:nowrap;padding:8px 0}
  .nav a.btn{padding:8px 14px;min-height:40px}
  html{scroll-padding-top:120px}
}
.pager ul{flex-wrap:wrap;align-items:center}
.pager span[aria-disabled]{opacity:.45}
.pager .pager-info{background:transparent;border:0;font-weight:600;color:var(--gris)}

/* ===== Historia ===== */
.night{position:relative;overflow:hidden;background:#0C1F48;color:#fff}
.star{position:absolute;border-radius:50%;background:#fff;opacity:.55}
.mtn{position:absolute;left:0;right:0;bottom:0;width:100%;height:100%}
.mtn-low{top:auto;height:300px}
.hist-hero{position:relative;max-width:900px;margin:0 auto;padding:84px 24px 150px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px}
.hist-hero img{width:170px}
.hist-hero .tira{align-self:center}
.hist-hero h1{margin:0;font-size:clamp(38px,6vw,60px);line-height:1.04}
.hist-hero h1 span{color:var(--oro)}
.hist-hero p{margin:0;font-size:19px;line-height:1.6;color:var(--claro);max-width:640px}
.trail-path{stroke-dasharray:1400;stroke-dashoffset:1400;animation:draw 3.5s ease-out .4s forwards}
@keyframes draw{to{stroke-dashoffset:0}}

.era{padding:88px 0}
.era-a{background:var(--crema)}.era-b{background:#fff}
.era-wrap{max-width:980px;margin:0 auto;padding:0 24px;display:flex;flex-direction:column;gap:40px}
.era-head{display:flex;flex-wrap:wrap;align-items:center;gap:22px}
.era-titles{flex:1 1 300px;min-width:0}
.era-badge{width:92px;height:92px;flex-shrink:0;border-radius:50%;border:5px solid #D4A21A;display:flex;flex-direction:column;align-items:center;justify-content:center}
.era-badge small{font-size:11px;font-weight:800;letter-spacing:.08em}
.era-badge b{font-family:'Archivo Black','Arial Black',sans-serif;font-weight:400;font-size:34px;line-height:1}
.era-range{display:block;font-family:'Archivo Black','Arial Black',sans-serif;font-size:13px;letter-spacing:.08em;color:var(--rojo)}
.era-title{margin:6px 0;font-family:'Archivo Black','Arial Black',sans-serif;font-weight:400;font-size:clamp(30px,4vw,40px);line-height:1.08;color:var(--azul)}
.era-intro{margin:0;font-size:17px;line-height:1.55;color:var(--gris)}
.hitos{list-style:none;margin:0 0 0 34px;padding:0;border-left:4px dashed #C9BFA6;display:flex;flex-direction:column;gap:22px}
.hito{display:flex;gap:22px;align-items:flex-start}
.patch{margin-left:-40px;width:76px;height:76px;flex-shrink:0;border-radius:50%;border:4px solid #D4A21A;display:flex;align-items:center;justify-content:center;font-family:'Archivo Black','Arial Black',sans-serif;font-size:17px}
.hito-card{flex:1;min-width:0;background:#fff;border-radius:12px;padding:20px 22px;display:flex;flex-direction:column;gap:6px;box-shadow:0 6px 18px rgba(16,42,92,.08)}
.era-b .hito-card{background:var(--crema)}
.hito-card strong{font-size:18px;line-height:1.35}
.hito-card span{font-size:15px;line-height:1.6;color:var(--gris)}
.fact{background:var(--oro);color:var(--azul-osc);border-radius:12px;padding:26px 30px;display:flex;flex-direction:column;gap:8px}
.fact b{font-family:'Archivo Black','Arial Black',sans-serif;font-weight:400;font-size:14px;letter-spacing:.06em}
.fact p{margin:0;font-size:18px;line-height:1.55;font-weight:600}

.ticlio-in{position:relative;max-width:980px;margin:0 auto;padding:96px 24px 230px;display:flex;flex-direction:column;gap:16px}
.ticlio-in h2{margin:0;font-size:clamp(32px,5vw,46px);line-height:1.08}
.ticlio-in h2 span{color:var(--oro)}
.ticlio-in p{margin:0;font-size:18px;line-height:1.65;color:var(--claro);max-width:640px}
.eyebrow-oro{color:var(--oro)}

.hoy{display:flex;flex-wrap:wrap;gap:24px}
.hoy-card{flex:999 1 460px;min-width:0;background:#fff;border:1px solid var(--borde);border-radius:14px;padding:36px;display:flex;flex-direction:column;gap:14px}
.hoy-nums{display:flex;flex-wrap:wrap;gap:28px}
.hoy-nums div{display:flex;flex-direction:column}
.hoy-nums b{font-family:'Archivo Black','Arial Black',sans-serif;font-weight:400;font-size:44px;color:var(--azul)}
.hoy-nums span{font-weight:600;color:var(--gris)}
.quiz-card{flex:1 1 320px;min-width:0;background:var(--rojo);color:#fff;border-radius:14px;padding:36px;display:flex;flex-direction:column;gap:14px;justify-content:center}
.quiz-card h2{margin:0;font-size:28px;line-height:1.15}
.quiz-card p{margin:0;font-size:16px;line-height:1.55;color:#FFE3E7}
.btn-blanco{align-self:flex-start;background:#fff;color:var(--rojo)}

@media (max-width:600px){
  .hitos{margin-left:24px;gap:18px}
  .hito{gap:14px}
  .patch{width:60px;height:60px;margin-left:-32px;font-size:14px}
  .era{padding:64px 0}
}
@media (prefers-reduced-motion:reduce){.trail-path{animation:none;stroke-dashoffset:0}}
.hito-foto{margin:10px 0 0;max-width:240px}
.hito-foto img{display:block;width:100%;border-radius:8px;border:3px solid #fff;box-shadow:0 4px 12px rgba(16,42,92,.18)}
.hito-foto figcaption{margin-top:6px;font-size:12px;color:#5E6B69}

/* Miniatura del hito + visor */
.hito-card.has-foto{display:grid;grid-template-columns:minmax(0,1fr) 140px;column-gap:20px;align-items:center}
.hito-txt{display:flex;flex-direction:column;gap:6px;min-width:0}
.hito-thumb{position:relative;display:block;width:140px;height:96px;padding:0;border:3px solid #fff;border-radius:8px;overflow:hidden;cursor:zoom-in;background:var(--caqui);box-shadow:0 4px 12px rgba(16,42,92,.18)}
.hito-thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.hito-thumb:hover img,.hito-thumb:focus-visible img{transform:scale(1.07)}
.hito-thumb:focus-visible{outline:3px solid var(--oro);outline-offset:2px}
.hito-thumb svg{position:absolute;right:5px;bottom:5px;padding:3px;border-radius:50%;background:rgba(16,42,92,.8);color:#fff}
.lightbox{padding:0;border:0;background:transparent;overflow:visible;max-width:min(92vw,720px)}
.lightbox::backdrop{background:rgba(8,18,40,.86)}
.lightbox figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:10px}
.lightbox img{display:block;width:auto;height:auto;min-width:min(80vw,420px);max-width:min(92vw,720px);max-height:80vh;border:4px solid #fff;border-radius:10px;background:#fff}
.lightbox figcaption{color:#fff;font-size:14px;text-align:center}
.lightbox-close{position:absolute;top:-16px;right:-16px;width:44px;height:44px;border:0;border-radius:50%;background:var(--oro);color:var(--azul-osc);font-size:28px;font-weight:800;line-height:1;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.3)}
@media (max-width:600px){
  .hito-card.has-foto{grid-template-columns:minmax(0,1fr) 96px;column-gap:12px}
  .hito-thumb{width:96px;height:72px}
  .lightbox-close{top:8px;right:8px}
}
@media (prefers-reduced-motion:reduce){.hito-thumb img{transition:none}}

/* ===== Desafío del Sendero ===== */
.quiz-night{padding:64px 0 88px}
.quiz-wrap{position:relative;max-width:760px;margin:0 auto;padding:0 24px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px}
.quiz-wrap .tira{align-self:center}
.quiz-wrap h1{margin:0;font-size:clamp(32px,5vw,48px);line-height:1.08}
.quiz-wrap h1 span{color:var(--oro)}
.quiz-box{width:100%;background:#fff;color:var(--texto);border-radius:16px;padding:32px;text-align:left;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.quiz-box [data-step]{display:flex;flex-direction:column;gap:14px}
.quiz-box [data-step][hidden]{display:none}
.quiz-lead{margin:0;font-size:17px;line-height:1.6;color:var(--gris)}
.quiz-label{font-weight:800}
.quiz-input{font:inherit;font-size:17px;padding:13px 14px;border:2px solid #C5CFE2;border-radius:8px}
.quiz-input:focus{outline:3px solid var(--oro);outline-offset:1px;border-color:var(--azul)}
.quiz-help{color:#5E6B69;margin-top:-6px}
.quiz-box .btn{align-self:flex-start;border:0;cursor:pointer;font:inherit;font-weight:800;font-size:16px}
.quiz-aviso{margin:0;padding:12px 14px;border-radius:8px;background:#FDF1CF;color:#6B4A00;font-weight:600}
.quiz-progress{display:flex;flex-direction:column;gap:8px;font-size:14px;font-weight:700;color:var(--gris)}
.quiz-bar{height:8px;border-radius:4px;background:#E6EBF5;overflow:hidden}
.quiz-bar i{display:block;height:100%;width:0;background:var(--azul);transition:width .4s ease}
.quiz-q{margin:4px 0 0;font-size:22px;line-height:1.35;outline:none}
.quiz-options{display:flex;flex-direction:column;gap:10px}
.quiz-opt{display:flex;align-items:center;gap:14px;width:100%;min-height:52px;padding:12px 16px;text-align:left;font:inherit;font-size:16px;background:#fff;color:var(--texto);border:2px solid #DEE4F0;border-radius:10px;cursor:pointer}
.quiz-opt b{flex-shrink:0;width:32px;height:32px;border-radius:50%;background:#EEF3FD;color:var(--azul);display:flex;align-items:center;justify-content:center}
.quiz-opt:hover:not(:disabled){border-color:var(--azul)}
.quiz-opt:disabled{cursor:default}
.quiz-opt.ok{border-color:#2E8B3E;background:#E8F5EA}.quiz-opt.ok b{background:#2E8B3E;color:#fff}
.quiz-opt.bad{border-color:var(--rojo);background:#FDECEF}.quiz-opt.bad b{background:var(--rojo);color:#fff}
.quiz-feedback{margin:0;font-size:15px;line-height:1.55;min-height:1em}
.quiz-feedback.is-ok{color:#1E6B2B}.quiz-feedback.is-bad{color:#8A0F22}
.quiz-back{color:var(--claro);font-weight:700}
.quiz-back:hover{color:#fff}
.result-who{margin:0;font-size:22px;font-weight:700;color:var(--claro)}
.result-score{margin:0;font-size:clamp(90px,16vw,150px);line-height:1;color:var(--oro)}
.result-score span{font-size:.45em;color:#fff}
.result-level{margin:0;font-size:22px;font-weight:800}
.result-img{width:100%;max-width:600px;border-radius:12px;border:4px solid #fff;margin-top:8px}
.share{width:100%;background:rgba(255,255,255,.08);border-radius:14px;padding:22px;display:flex;flex-direction:column;gap:12px}
.share-title{margin:0;font-weight:800;font-size:18px}
.share-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.share-btns .btn{border:0;cursor:pointer;font:inherit;font-weight:800;font-size:15px;color:#fff}
.share-fb{background:#1877F2}.share-wa{background:#13803F}.share-ig{background:#B4306F}.share-dl{background:#fff;color:var(--azul-osc)!important}
.share-help{margin:0;font-size:13px;color:var(--claro)}
.result-actions{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:6px}
@media (max-width:600px){.quiz-box{padding:22px}.quiz-q{font-size:19px}}