:root{
  --papel:#f2eee3;
  --papel2:#e8e2d2;
  --tinta:#1d1b17;
  --suave:#5d584d;
  --azul:#00508f;
  --verde:#00703c;
  --marron:#6e3b1c;
  --oro:#ffc400;
  --rojo:#c8102e;
  --titulos:"Barlow Condensed","Arial Narrow","Roboto Condensed",Impact,sans-serif;
  --cuerpo:"Barlow",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ancho:1080px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--papel);color:var(--tinta);
  font:18px/1.6 var(--cuerpo);-webkit-font-smoothing:antialiased;
}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--titulos);text-transform:uppercase;line-height:.95;margin:0;letter-spacing:.005em}
h2{font-size:clamp(2.4rem,6vw,4.2rem);font-weight:800}
h3{font-size:1.7rem;font-weight:700}
p{margin:0 0 1em}
kbd{
  font:600 .8em ui-monospace,Consolas,monospace;background:#fff;border:1.5px solid var(--tinta);
  border-radius:4px;padding:0 .35em;box-shadow:0 2px 0 var(--tinta);
}
.envoltorio{max-width:var(--ancho);margin:0 auto;padding:0 clamp(1.2rem,5vw,3rem)}
.envoltorio.estrecho{max-width:780px}

/* Carretera lateral */
.ruta{position:fixed;left:14px;top:0;bottom:0;width:26px;z-index:30;display:none}
@media (min-width:1280px){.ruta{display:block}}
.ruta-via{
  position:absolute;left:5px;top:80px;bottom:60px;width:16px;background:#2a2824;border-radius:3px;
}
.ruta-via::before{
  content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%);
  background:repeating-linear-gradient(#f2eee3 0 10px,transparent 10px 20px);
}
.ruta-coche{
  position:absolute;left:50%;top:0;width:12px;height:22px;margin-left:-6px;border-radius:4px;
  background:var(--rojo);box-shadow:0 0 0 2px #fff,0 2px 6px rgba(0,0,0,.4);transition:top .1s linear;
}
.ruta-coche::after{content:"";position:absolute;left:2px;right:2px;top:5px;height:5px;background:#fff;border-radius:2px;opacity:.85}
.ruta-km{
  position:absolute;left:0;bottom:20px;font:800 .8rem var(--titulos);background:var(--tinta);color:#fff;
  padding:.1rem .35rem;border-radius:3px;white-space:nowrap;letter-spacing:.05em
}

/* Cabecera */
.cabecera{
  position:absolute;inset:0 0 auto 0;z-index:10;display:flex;align-items:baseline;gap:1.2rem;
  padding:1.1rem clamp(1.2rem,5vw,3rem);max-width:calc(var(--ancho) + 6rem);margin:0 auto;
}
.logo{font:800 1.7rem var(--titulos);text-decoration:none;letter-spacing:.04em;color:var(--tinta)}
.logo span{background:var(--azul);color:#fff;margin-left:.3rem;padding:0 .35rem;border-radius:3px}
.dominio{color:var(--suave);font-size:.85rem;margin-right:auto}
.jugar-cab{
  margin-left:auto;font:800 1.2rem var(--titulos);text-transform:uppercase;text-decoration:none;background:var(--oro);color:var(--tinta);
  padding:.35rem 1.1rem;border-radius:6px;box-shadow:0 3px 0 var(--tinta);align-self:center;
}
.jugar-cab:hover{background:#ffd633}

/* Botón principal de la portada */
.cta-fila{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.2rem;margin:1.6rem 0 .4rem}
.cta{
  display:inline-flex;align-items:center;gap:.7rem;background:var(--oro);color:var(--tinta);text-decoration:none;
  font:800 clamp(2rem,4.6vw,3rem)/1 var(--titulos);text-transform:uppercase;letter-spacing:.02em;
  padding:.85rem 1.8rem;border:4px solid var(--tinta);border-radius:10px;box-shadow:0 7px 0 var(--tinta);
  transition:transform .12s,box-shadow .12s,background .12s;
}
.cta:hover{background:#ffd633;transform:translateY(-2px);box-shadow:0 9px 0 var(--tinta)}
.cta:active{transform:translateY(5px);box-shadow:0 2px 0 var(--tinta)}
.cta-nota{font:600 .95rem var(--cuerpo);color:var(--suave)}

/* Barra fija con el botón en móvil */
.barra-jugar{
  position:fixed;left:12px;right:12px;bottom:12px;z-index:40;display:none;justify-content:center;gap:.6rem;
  background:var(--oro);color:var(--tinta);text-decoration:none;font:800 1.7rem/1 var(--titulos);text-transform:uppercase;
  padding:.9rem 1rem;border:4px solid var(--tinta);border-radius:12px;box-shadow:0 5px 0 var(--tinta),0 10px 24px rgba(0,0,0,.3);
  transform:translateY(140%);transition:transform .25s;
}
.barra-jugar.ver{transform:none}

/* Portada */
.portada{
  position:relative;overflow:hidden;padding:5.2rem 0 3.5rem;border-bottom:6px solid var(--tinta);
  background:var(--papel);
}
.topo{position:absolute;inset:0;width:100%;height:100%;opacity:.55;pointer-events:none}
.portada-in{
  position:relative;max-width:calc(var(--ancho) + 6rem);margin:0 auto;padding:0 clamp(1.2rem,5vw,3rem);
  display:grid;grid-template-columns:1.15fr 1fr;gap:3rem;align-items:center;
}
.sobre{font:700 .95rem var(--titulos);text-transform:uppercase;letter-spacing:.14em;color:var(--suave);margin-bottom:1.2rem}
h1{font-size:clamp(3.6rem,9vw,7.2rem);font-weight:800;line-height:.86;margin-bottom:1.3rem}
h1 em{font-style:normal;color:#fff;background:var(--azul);padding:0 .12em;display:inline-block;transform:rotate(-1.5deg);margin-top:.08em}
.lead{font-size:1.2rem;max-width:520px}
.aviso{font-size:.9rem;color:var(--suave);min-height:1.4em}
.aviso.mal{color:var(--rojo);font-weight:600}

/* Señales */
.senal{border-radius:12px;color:#fff;position:relative}
.senal.azul{background:var(--azul);box-shadow:inset 0 0 0 4px var(--azul),inset 0 0 0 7px #fff,0 18px 30px -12px rgba(0,0,0,.45);padding:1.4rem 1.6rem}
.senal.marron{background:var(--marron);box-shadow:inset 0 0 0 3px var(--marron),inset 0 0 0 5px #fff,0 10px 18px -10px rgba(0,0,0,.5);padding:1.7rem 1.6rem}
.portico{position:relative;padding-bottom:70px}
.postes{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-around;z-index:-1}
.postes i{width:16px;height:90px;background:linear-gradient(90deg,#8a8f93,#c3c7ca 45%,#7c8184);display:block}
.senal-cab{display:flex;justify-content:space-between;align-items:center;margin-bottom:.8rem}
.via{
  font:800 1.2rem var(--titulos);background:#fff;color:var(--azul);padding:.1rem .6rem;border-radius:3px;letter-spacing:.06em
}
.senal-tit{font:600 .9rem var(--titulos);text-transform:uppercase;letter-spacing:.12em;opacity:.85}
.fila{
  display:flex;align-items:center;gap:.9rem;padding:.55rem .3rem;border-top:1.5px solid rgba(255,255,255,.35);
  text-decoration:none;color:#fff;font:700 1.45rem var(--titulos);text-transform:uppercase;letter-spacing:.02em;
}
.fila:hover{background:rgba(255,255,255,.14)}
.fila .nombre{flex:1}
.fila .salida{
  font:800 1rem var(--titulos);background:var(--oro);color:var(--tinta);width:1.7rem;height:1.7rem;
  border-radius:3px;display:grid;place-items:center;
}
.fila.grande{font-size:2.4rem;border-top:0;background:var(--oro);color:var(--tinta);margin:0 -.4rem .5rem;padding:.55rem .9rem;border-radius:6px}
.fila.grande:hover{background:#ffd633}
.flecha{font-family:var(--cuerpo);font-weight:600}

/* Bloques */
.bloque{padding:clamp(4rem,9vw,7rem) 0;position:relative}
.pk{
  display:inline-block;font:800 1rem var(--titulos);letter-spacing:.12em;background:var(--tinta);color:#fff;
  padding:.15rem .6rem;border-radius:3px;margin-bottom:1.2rem;
}
.sub{color:var(--suave);font-size:1.15rem;margin-top:.8rem;max-width:560px}

.cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,5vw,4rem);align-items:start}
.grande-p{font-size:1.35rem;line-height:1.4;font-weight:500}

.hitos{list-style:none;margin:3.5rem 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.hitos li{
  background:#fff;border:2px solid var(--tinta);border-radius:14px 14px 4px 4px;padding:1rem 1rem 1.1rem;
  position:relative;box-shadow:5px 5px 0 var(--tinta);
}
.hitos li::before{content:"";display:block;height:8px;background:var(--rojo);margin:-1rem -1rem .8rem;border-radius:12px 12px 0 0}
.hitos b{display:block;font:800 1.7rem/1 var(--titulos);text-transform:uppercase;margin-bottom:.5rem}
.hitos span{font-size:.9rem;color:var(--suave);line-height:1.35;display:block}

.verde-fondo{background:var(--verde);color:#fff}
.verde-fondo .pk{background:#fff;color:var(--verde)}
.verde-fondo .sub{color:rgba(255,255,255,.85)}
.turisticas{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:3rem}
.senal.marron h3{margin-bottom:.7rem;padding-bottom:.6rem;border-bottom:1.5px solid rgba(255,255,255,.4)}
.senal.marron p{margin:0;font-size:.98rem;line-height:1.45;color:#f6e9dc}

.lista{list-style:none;margin:2.5rem 0 0;padding:0;counter-reset:n}
.lista li{
  display:grid;grid-template-columns:minmax(180px,.9fr) 2fr;gap:2rem;padding:1.6rem 0;
  border-top:3px solid var(--tinta);counter-increment:n;align-items:baseline;
}
.lista li:last-child{border-bottom:3px solid var(--tinta)}
.lista h3{font-size:clamp(2.2rem,5vw,3.6rem);font-weight:800}
.lista h3::before{content:counter(n,decimal-leading-zero);display:block;font:700 1rem var(--cuerpo);color:var(--rojo);margin-bottom:.3rem;letter-spacing:.1em}
.lista p{margin:0;font-size:1.1rem}
.controles{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin-top:2.5rem}
.ctl{background:var(--papel2);border-radius:6px;padding:1.4rem 1.5rem;border-left:8px solid var(--azul)}
.ctl h4{font:800 1.3rem var(--titulos);text-transform:uppercase;margin-bottom:.4rem}
.ctl p{margin:0;font-size:1rem}

/* Obras */
.obras{background:var(--oro);padding:0}
.cinta{height:26px;background:repeating-linear-gradient(-45deg,var(--tinta) 0 22px,var(--oro) 22px 44px)}
.obras .envoltorio{padding-top:clamp(3rem,7vw,5rem);padding-bottom:clamp(3rem,7vw,5rem)}
.obras .pk{background:var(--tinta)}
.obras-cab{display:flex;gap:1.5rem;align-items:center;margin-bottom:2.5rem}
.rombo{
  flex:none;width:86px;height:86px;background:#fff;border:5px solid var(--tinta);transform:rotate(45deg);
  border-radius:8px;display:grid;place-items:center;
}
.rombo b{transform:rotate(-45deg);font:800 3rem var(--titulos)}
.obras .sub{color:var(--tinta);margin-top:.4rem}
.versiones{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.versiones li{background:var(--papel);border:3px solid var(--tinta);border-radius:6px;padding:1.2rem 1.5rem;display:grid;grid-template-columns:200px 1fr;gap:1.5rem}
.versiones li.prox{background:var(--tinta);color:#fff}
.ver{font:800 1.7rem/1 var(--titulos);text-transform:uppercase}
.ver small{display:block;font:500 .85rem var(--cuerpo);text-transform:none;margin-top:.3rem;opacity:.7}
.versiones p{margin:0;font-size:1rem}

/* Versiones desplegables con el cambiado completo */
.versiones li.version{display:block;padding:0}
.versiones .version details{border:0;margin:0;padding:0;background:none}
.versiones .version details:last-of-type{border:0}
.versiones .version summary{
  display:flex;align-items:baseline;gap:1rem;padding:1.1rem 1.5rem;font:inherit;text-transform:none;cursor:pointer;
}
.versiones .version summary small{font:500 .95rem var(--cuerpo);opacity:.75;margin-right:auto}
.versiones .version summary::after{content:"+";font:800 1.8rem/1 var(--titulos);color:var(--rojo)}
.versiones .version details[open] summary::after{content:"–"}
.versiones .version details[open] summary{border-bottom:3px solid var(--tinta)}
.versiones .version summary:hover{color:var(--azul)}
.cambios{padding:1.2rem 1.5rem 1.5rem}
.cambios h4{
  display:inline-block;font:800 1rem var(--titulos);text-transform:uppercase;letter-spacing:.12em;color:#fff;
  padding:.1rem .6rem;border-radius:3px;margin:1.2rem 0 .6rem;
}
.cambios h4:first-child{margin-top:0}
.c-nuevo{background:var(--verde)}
.c-arreglo{background:var(--rojo)}
.cambios ul{margin:0 0 .4rem;padding-left:1.2rem;list-style:disc}
.versiones .cambios li{
  display:list-item;margin:.45rem 0;font-size:.98rem;line-height:1.5;padding:0;
  border:0;border-radius:0;background:none;color:var(--tinta);
}
.cambios kbd{font-size:.8em}
.versiones .cambios p{margin:0}

/* Bandera de España (2:3, franjas 1/4 · 1/2 · 1/4) */
.bandera{
  display:inline-block;width:42px;height:28px;border-radius:3px;vertical-align:middle;margin-right:.7rem;
  background:linear-gradient(#c8102e 0 25%,#ffc400 25% 75%,#c8102e 75%);
  box-shadow:0 0 0 2px var(--tinta),3px 4px 0 2px var(--tinta);
}
.bandera.peq-b{width:30px;height:20px;margin-right:.6rem;box-shadow:0 0 0 1.5px #d8d3c5}
.pie-marca{display:flex;align-items:center}
.sobre .bandera{margin-right:.9rem;margin-top:-.2rem}

/* FAQ */
details{border-top:2px solid var(--tinta)}
details:last-of-type{border-bottom:2px solid var(--tinta)}
summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;
  font:700 1.5rem var(--titulos);text-transform:uppercase;padding:1rem 0;
}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:1.8rem;line-height:1;color:var(--rojo)}
details[open] summary::after{content:"–"}
summary:hover{color:var(--azul)}
details p{padding:0 2rem 1.2rem 0;margin:0;color:var(--suave)}
#faq h2{margin-bottom:2rem}

/* Llegada */
.llegada{padding:clamp(3rem,8vw,6rem) 0 clamp(4rem,9vw,7rem)}
.senal.gigante{
  display:block;text-decoration:none;text-align:center;padding:clamp(2rem,6vw,4rem) 1.5rem;transition:transform .2s;
}
.senal.gigante:hover{transform:translateY(-5px) rotate(-.4deg)}
.llegada-peq{display:block;font:600 1rem var(--titulos);text-transform:uppercase;letter-spacing:.18em;opacity:.85;margin-bottom:.6rem}
.llegada-gr{display:block;font:800 clamp(3rem,10vw,7rem)/.95 var(--titulos);text-transform:uppercase}
.llegada-gr .flecha{color:var(--oro)}

.pie{background:var(--tinta);color:#d8d3c5;padding:2.5rem 0}
.pie p{margin:0 0 .5rem}
.pie b{color:#fff;font-family:var(--titulos);font-size:1.2rem;letter-spacing:.05em}
.peq{font-size:.82rem;color:#a9a496;max-width:760px}

/* Aparición */
.js .revela{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.js .revela.visible{opacity:1;transform:none}

@media (max-width:900px){
  .portada-in{grid-template-columns:1fr}
  .cols{grid-template-columns:1fr}
  .hitos{grid-template-columns:1fr 1fr}
  .turisticas{grid-template-columns:1fr 1fr}
  .lista li{grid-template-columns:1fr;gap:.6rem}
  .controles{grid-template-columns:1fr}
  .versiones li{grid-template-columns:1fr;gap:.4rem}
  .dominio{display:none}
  .jugar-cab{margin-left:auto}
}
@media (max-width:900px){
  .barra-jugar{display:flex}
  .pie{padding-bottom:6rem}
}
@media (max-width:560px){
  .logo{font-size:1.45rem}
  .cta{display:flex;width:100%;justify-content:center;font-size:2.2rem}
  .jugar-cab{font-size:1.05rem;padding:.3rem .8rem}
  body{font-size:17px}
  .hitos,.turisticas{grid-template-columns:1fr}
  .portada{padding-top:5.5rem}
  .fila{font-size:1.2rem}
  .fila.grande{font-size:2rem}
  .obras-cab{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .revela{opacity:1;transform:none;transition:none}
  .senal.gigante{transition:none}
}