/* =====================================================================
   GRUPO AC DIESEL · Estilos del sitio
   Los colores de la marca están en el bloque :root, al inicio.
   ===================================================================== */
/* =====================================================================
   PALETA DEL GRUPO: amarillo, azul y negro
   ===================================================================== */
:root{
  --negro:#0A0D12;
  --azul:#0D2B4E;
  --azul-medio:#1B4F8A;
  --azul-claro:#E3EBF4;
  --amarillo:#F5B800;
  --amarillo-hover:#FFC926;
  --texto:#141A22;
  --acero:#566271;
  --linea:#D5DCE3;
  --fondo:#F4F6F8;
  --blanco:#FFFFFF;

  --contenido:1200px;
  --margen:clamp(1.25rem, 4vw, 3rem);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Archivo","Arial Narrow",Arial,sans-serif;font-size:1.0625rem;line-height:1.55;color:var(--texto);background:var(--fondo);-webkit-font-smoothing:antialiased}
img,video,svg{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--amarillo);outline-offset:3px}
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saltar{position:absolute;left:-999px;top:0;background:var(--amarillo);padding:.6rem 1rem;z-index:60}
.saltar:focus{left:1rem}
[hidden]{display:none !important}

h1,h2,h3{margin:0;font-weight:760;font-stretch:112%;line-height:1.06;letter-spacing:-.012em}
h1,h2{font-weight:380;font-stretch:106%}
h1 strong,h2 strong{font-weight:820;font-stretch:112%}
.logo{display:inline-flex;align-items:center;gap:.3em;font-family:"Archivo",sans-serif;font-stretch:125%;line-height:1;color:var(--negro);text-decoration:none}
.logo-sim{height:1.05em;flex:none}
.logo-sim svg{height:100%;width:auto;display:block}
.logo-txt{display:flex;flex-direction:column;gap:.14em}
.logo-txt b{font-size:1em;font-weight:820;letter-spacing:-.01em;white-space:nowrap}
.logo-txt small{font-size:max(8.5px,.235em);font-weight:700;letter-spacing:.42em;font-stretch:100%;color:var(--acero);white-space:nowrap}
.logo-grupo .logo-txt small{color:var(--azul-medio);letter-spacing:.46em}
.logo.logo-inv{color:var(--blanco)}
.logo.logo-inv .logo-txt small{color:#9DB7D6}
.corte{clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,0 100%)}
h1{font-size:clamp(2.3rem,5.4vw,4.6rem)}
h2{font-size:clamp(1.8rem,3.4vw,2.75rem)}
h3{font-size:1.18rem;line-height:1.2}
p{margin:0}
.entrada{font-size:clamp(1.08rem,1.5vw,1.28rem);line-height:1.5;max-width:40em;color:var(--acero)}
.envoltura{max-width:var(--contenido);margin:0 auto;padding:0 var(--margen)}
.bloque{padding:clamp(3.5rem,8vw,6.5rem) 0}
.cabeza{margin-bottom:clamp(2rem,4vw,3rem)}
.cabeza h2{max-width:22ch}
.cabeza .entrada{margin-top:1rem}
.claro{background:var(--blanco)}
.oscuro{background:var(--azul);color:var(--blanco)}
.oscuro .entrada{color:#BFD0E3}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.9rem 1.4rem;border-radius:2px;font:inherit;font-weight:700;font-size:1rem;text-decoration:none;cursor:pointer;border:2px solid transparent;transition:background .15s}
.btn-amarillo{background:var(--amarillo);color:var(--negro)}
.btn-amarillo:hover{background:var(--amarillo-hover)}
.btn-contorno{border-color:currentColor;background:transparent}
.btn-contorno:hover{background:rgba(255,255,255,.1)}
.btn-azul{background:var(--azul);color:var(--blanco)}
.btn-azul:hover{background:var(--azul-medio)}
.acciones{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}

/* ---------- Encabezado ---------- */
.utilidad{background:var(--azul);color:#BFD0E3;font-size:.88rem}
.utilidad .envoltura{display:flex;justify-content:flex-end;gap:1.75rem;min-height:36px;align-items:center}
.utilidad a{text-decoration:none;color:#DCE3EA}
.utilidad a:hover{color:var(--amarillo)}
.barra{position:sticky;top:0;z-index:40;background:var(--blanco);color:var(--texto);border-bottom:1px solid var(--linea);box-shadow:0 6px 24px -18px rgba(13,43,78,.45)}
.barra .envoltura{display:flex;align-items:center;gap:1.5rem;min-height:76px}
.barra .logo{font-size:32px}
.marca{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.marca-icono{width:34px;height:34px;background:var(--amarillo);display:grid;place-items:center;border-radius:2px;flex:none}
.marca-icono i{display:block;width:20px;height:3px;background:var(--negro);box-shadow:0 7px 0 var(--negro)}
.marca-texto{display:flex;flex-direction:column;line-height:1}
.marca-texto small{font-size:.72rem;font-weight:600;font-stretch:100%;color:#AEB8C3;letter-spacing:.02em}
.marca-texto strong{font-size:1.2rem;font-weight:800;font-stretch:125%;letter-spacing:-.01em}
.lineas{display:flex;gap:.25rem;margin-left:auto}
.lineas a{position:relative;text-decoration:none;font-weight:600;font-size:.97rem;padding:.6rem .9rem;color:var(--acero)}
.lineas a:hover{color:var(--azul)}
.lineas a[aria-current="page"]{color:var(--azul)}
.lineas a[aria-current="page"]::after{content:"";position:absolute;left:.9rem;right:.9rem;bottom:-.1rem;height:3px;background:var(--amarillo)}
.barra .btn{padding:.6rem 1.05rem;font-size:.95rem}
@media (max-width:820px){
  .utilidad{display:none}
  .barra .envoltura{flex-wrap:wrap;gap:.4rem 1rem;padding-top:.55rem;padding-bottom:.2rem;min-height:0}
  .barra .btn{margin-left:auto}
  .lineas{order:3;width:100%;margin-left:0;border-top:1px solid var(--linea)}
  .barra .logo{font-size:24px}
  .lineas a{flex:1;text-align:center;padding:.65rem .2rem;font-size:.92rem}
  .lineas a[aria-current="page"]::after{left:20%;right:20%;bottom:0}
}

/* ---------- Transición entre vistas ---------- */
@media (prefers-reduced-motion:no-preference){
  .vista.entra{animation:entra .45s cubic-bezier(.2,.7,.2,1) both}
}
@keyframes entra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* =====================================================================
   PORTADAS CON VIDEO O FOTO
   ===================================================================== */
.portada{position:relative;color:var(--blanco);min-height:min(86vh,760px);display:flex;flex-direction:column;justify-content:flex-end}
.portada .medio,.portada::after{background:var(--negro);clip-path:polygon(0 0,100% 0,100% calc(100% - 70px),calc(100% - 140px) 100%,0 100%)}
.portada .logo{font-size:clamp(26px,3vw,34px);margin-bottom:1.4rem}
.portada .medio{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.portada::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(10,13,18,.92) 0%,rgba(13,43,78,.78) 45%,rgba(13,43,78,.35) 100%)}
.portada > .envoltura{position:relative;z-index:1;width:100%;padding-top:5rem;padding-bottom:clamp(3rem,7vw,5rem)}
.portada h1{max-width:15ch}
.portada .entrada{color:#D3DDE8;margin-top:1.25rem}
.portada .giro{font-weight:700;font-stretch:112%;color:var(--amarillo);margin-bottom:.9rem;font-size:1.05rem}
.falta{visibility:hidden}

.cifras{position:relative;z-index:2;margin-bottom:-56px}
.cifras .envoltura{display:grid;grid-template-columns:repeat(4,1fr);background:var(--blanco);color:var(--texto);box-shadow:0 24px 50px -30px rgba(13,43,78,.55);clip-path:polygon(0 0,calc(100% - 30px) 0,100% 30px,100% 100%,0 100%)}
.cifra{padding:1.6rem 1.25rem 1.7rem;border-left:1px solid var(--linea)}
.cifra:first-child{border-left:0;padding-left:0}
.cifra b{display:block;font-size:clamp(1.9rem,3.4vw,2.8rem);font-weight:820;font-stretch:118%;line-height:1;color:var(--azul)}
.cifra b::after{content:"";display:block;width:28px;height:4px;background:var(--amarillo);margin-top:.7rem}
.cifra > span{display:block;margin-top:.6rem;color:var(--acero);font-size:.95rem;line-height:1.35;max-width:24ch}
.portada + section{padding-top:calc(clamp(3.5rem,8vw,6.5rem) + 56px)}
@media (max-width:760px){
  .cifras .envoltura{grid-template-columns:1fr 1fr}
  .cifra{padding:1.1rem 1rem}
  .cifra:nth-child(odd){border-left:0;padding-left:0}
  .cifra:nth-child(n+3){border-top:1px solid var(--linea)}
}

/* =====================================================================
   GRUPO: visión de negocio
   ===================================================================== */
.capacidades{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid rgba(255,255,255,.18)}
.capacidad{padding:1.75rem 1.5rem 1.75rem 0;border-right:1px solid rgba(255,255,255,.12)}
.capacidad:not(:first-child){padding-left:1.5rem}
.capacidad:last-child{border-right:0}
.capacidad h3{font-size:1.45rem;font-stretch:118%;margin-bottom:.6rem}
.capacidad p{color:#C3D2E2}
.etiqueta{display:inline-block;margin-top:1rem;font-size:.85rem;font-weight:700;padding:.3rem .6rem;border-radius:2px}
.etiqueta.acd{background:var(--amarillo);color:var(--negro)}
.etiqueta.myr{background:var(--blanco);color:var(--azul)}
@media (max-width:900px){
  .capacidades{grid-template-columns:1fr 1fr}
  .capacidad{padding:1.5rem 1rem 1.5rem 0;border-bottom:1px solid rgba(255,255,255,.12)}
  .capacidad:nth-child(2n){border-right:0}
  .capacidad:nth-child(odd){padding-left:0}
}
@media (max-width:520px){
  .capacidades{grid-template-columns:1fr}
  .capacidad,.capacidad:not(:first-child){padding-left:0;border-right:0}
}

/* ---------- Las dos empresas: el desvío ---------- */
.desvio{display:grid;grid-template-columns:minmax(48px,1fr) minmax(0,760px);padding-right:max(var(--margen),calc((100vw - var(--contenido)) / 2 + var(--margen)))}
.desvio svg{width:100%;height:100%}
.desvio path{fill:none;vector-effect:non-scaling-stroke}
.desvio .durmiente{stroke:#C4CDD6;stroke-width:30;stroke-dasharray:5 11}
.desvio .riel-a{stroke:var(--azul);stroke-width:18}
.desvio .riel-b{stroke:var(--fondo);stroke-width:13}
.destinos{display:grid;grid-template-rows:1fr 1fr;gap:1.25rem}
.destino{display:grid;grid-template-columns:44% 1fr;background:var(--blanco);border:1px solid var(--linea);text-decoration:none;min-height:250px;overflow:hidden;transition:box-shadow .2s,border-color .2s}
.destino:hover{border-color:var(--azul);box-shadow:0 10px 30px -18px rgba(13,43,78,.55)}
.destino .media{position:relative;background:var(--azul)}
.destino .media video,.destino .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.destino .texto{display:flex;flex-direction:column;justify-content:center;gap:.55rem;padding:clamp(1.25rem,2.6vw,2rem);border-left:6px solid var(--amarillo)}
.destino .nombre{font-weight:800;font-stretch:125%;font-size:clamp(1.55rem,2.6vw,2.1rem);line-height:1;color:var(--azul)}
.destino .rol{font-weight:700;color:var(--texto)}
.destino p{color:var(--acero)}
.destino .ir{margin-top:.35rem;font-weight:700;color:var(--azul-medio)}
.destino:hover .ir{text-decoration:underline;text-underline-offset:4px}
@media (prefers-reduced-motion:no-preference){
  .desvio.visto svg{animation:tender 1.2s cubic-bezier(.3,.7,.2,1) both}
}
@keyframes tender{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@media (max-width:760px){
  .desvio{grid-template-columns:40px 1fr}
  .destino{grid-template-columns:1fr;grid-template-rows:170px auto}
  .destino .texto{border-left:0;border-top:6px solid var(--amarillo)}
}

.banda{background:var(--negro);color:var(--blanco)}
.banda .envoltura{display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center;padding-top:3rem;padding-bottom:3rem}
.banda h2{font-size:clamp(1.5rem,2.8vw,2.2rem);max-width:24ch}
.banda p{color:#AEB8C3;margin-top:.6rem;max-width:48ch}
@media (max-width:760px){.banda .envoltura{grid-template-columns:1fr}}

.padron{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
.padron h3{font-size:1rem;font-stretch:100%;font-weight:700;color:var(--azul-medio);padding-top:.8rem;border-top:3px solid var(--azul);margin-bottom:.4rem}
.padron ul{list-style:none;margin:0;padding:0}
.padron li{font-weight:650;font-stretch:110%;padding:.6rem 0;border-bottom:1px solid var(--linea)}
@media (max-width:900px){.padron{grid-template-columns:1fr 1fr}}
@media (max-width:340px){.padron{grid-template-columns:1fr}}

.respaldo{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.respaldo > div{border-top:3px solid var(--amarillo);padding-top:1.1rem}
.respaldo h3{margin-bottom:.5rem}
.respaldo p{color:var(--acero)}
@media (max-width:820px){.respaldo{grid-template-columns:1fr}}

/* =====================================================================
   AC DIESEL
   ===================================================================== */
.parque{border-top:3px solid var(--azul)}
.parque-encabezado,.equipo{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr) minmax(0,1.6fr);gap:1.5rem}
.parque-encabezado{padding:.75rem 0;font-weight:700;font-size:.92rem;color:var(--acero);border-bottom:1px solid var(--linea)}
.equipo{padding:1.35rem 0;border-bottom:1px solid var(--linea);align-items:baseline}
.equipo .tipo{font-weight:800;font-stretch:118%;font-size:1.2rem;line-height:1.15;color:var(--azul)}
.equipo .fabricante{font-weight:650;color:var(--texto)}
.equipo p{color:var(--acero)}
@media (max-width:760px){.equipo{grid-template-columns:1fr;gap:.25rem}.parque-encabezado{display:none}}

/* ---------- Simulador: qué hace cada máquina ---------- */
.sim{display:grid;grid-template-columns:minmax(0,1fr);gap:0;background:var(--negro);border:1px solid #1E2630}
.sim-pestanas{min-width:0;display:flex;overflow-x:auto;border-bottom:1px solid #26303C;scrollbar-width:thin}
.sim-pestanas button{flex:1 0 auto;font:inherit;font-weight:650;font-size:.95rem;color:#AEB8C3;background:transparent;border:0;border-bottom:3px solid transparent;padding:1rem 1.1rem;cursor:pointer;display:flex;align-items:center;gap:.55rem;white-space:nowrap}
.sim-pestanas button:hover{color:var(--blanco)}
.sim-pestanas button[aria-selected="true"]{color:var(--blanco);border-bottom-color:var(--amarillo);background:#111820}
.sim-pestanas .n{display:inline-grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:50%;border:1.5px solid currentColor;font-size:.8rem;font-weight:800}
.sim-pestanas button[aria-selected="true"] .n{background:var(--amarillo);border-color:var(--amarillo);color:var(--negro)}
.sim-escena{position:relative;aspect-ratio:1000/340;overflow:hidden;background:linear-gradient(180deg,#0D2B4E 0%,#123A66 75%)}
.sim-escena svg{position:absolute;inset:0;width:100%;height:100%}
.sim-rotulo{position:absolute;top:.9rem;z-index:1;font-size:.85rem;font-weight:700;padding:.3rem .6rem;border-radius:2px}
.sim-rotulo.izq{left:.9rem;background:var(--amarillo);color:var(--negro)}
.sim-rotulo.der{right:.9rem;background:rgba(255,255,255,.14);color:var(--blanco)}
.sim-pausa{position:absolute;right:.9rem;bottom:.9rem;z-index:1;font:inherit;font-size:.85rem;font-weight:700;color:var(--blanco);background:rgba(10,13,18,.6);border:1px solid rgba(255,255,255,.3);padding:.45rem .8rem;border-radius:2px;cursor:pointer}
.sim-info{padding:clamp(1.4rem,3vw,2.25rem);color:var(--blanco);border-top:1px solid #26303C;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,2fr);gap:1.5rem 3rem;align-items:start}
.sim-info .cab{display:flex;flex-direction:column;align-items:flex-start}
.sim-info .paso{color:var(--amarillo);font-weight:700;font-size:.95rem}
.sim-info h3{font-size:clamp(1.4rem,2.4vw,1.85rem);font-stretch:118%;margin:.35rem 0 1.1rem}
.sim-info dl{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:1.25rem 2rem}
.sim-info dt{font-weight:700;font-size:.92rem;color:#8FA3B8}
.sim-info dd{margin:.2rem 0 0;color:#E3E9EF;line-height:1.5}
.sim-info .btn{padding:.65rem 1rem;font-size:.92rem}
.sim-info .botones{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.4rem}
@media (max-width:700px){.sim-escena{aspect-ratio:auto;height:250px}}
@media (max-width:900px){
  .sim-info{grid-template-columns:1fr}
  .sim-info dl{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:no-preference){
  .sim.corriendo .bates{animation:bate .42s ease-in-out infinite alternate}
  .sim.corriendo .cepillo{animation:gira .7s linear infinite}
  .sim.corriendo .vibra{animation:vibra .09s linear infinite alternate}
  .sim.corriendo .ondas{animation:pulso .6s ease-out infinite}
  .sim.corriendo .carga{animation:mece 1.6s ease-in-out infinite alternate}
  .sim.corriendo .chispas{animation:destello .18s steps(2) infinite}
}
.cepillo{transform-box:fill-box;transform-origin:center}
@keyframes bate{from{transform:translateY(-18px)}to{transform:translateY(0)}}
@keyframes gira{to{transform:rotate(360deg)}}
@keyframes vibra{from{transform:translateX(-2px)}to{transform:translateX(2px)}}
@keyframes pulso{from{opacity:.9}to{opacity:0}}
@keyframes mece{from{transform:translateY(-4px)}to{transform:translateY(3px)}}
@keyframes destello{0%{opacity:1}100%{opacity:.25}}

.servicios{display:grid;grid-template-columns:repeat(2,1fr);gap:0 3rem}
.servicio{padding:1.5rem 0;border-top:1px solid var(--linea)}
.servicio h3{margin-bottom:.4rem;color:var(--azul)}
.servicio p{color:var(--acero);max-width:46ch}
@media (max-width:760px){.servicios{grid-template-columns:1fr}}

.videos{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.videos figure{margin:0}
.videos video{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--azul)}
.videos figcaption{padding-top:.75rem;font-weight:700;font-stretch:108%}
@media (max-width:820px){.videos{grid-template-columns:1fr}}

.socios{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.socios .grupo h3{font-size:1rem;font-stretch:100%;color:var(--azul-medio);padding-top:.8rem;border-top:3px solid var(--azul);margin-bottom:.25rem}
.socio{padding:.9rem 0;border-bottom:1px solid var(--linea)}
.socio strong{display:block;font-weight:800;font-stretch:112%;font-size:1.08rem}
.socio span{display:block;color:var(--acero);font-size:.95rem;line-height:1.45;margin-top:.2rem}
@media (max-width:980px){.socios{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.socios{grid-template-columns:1fr}}

.lista-nombres{list-style:none;margin:0;padding:0;columns:3;column-gap:2rem}
.lista-nombres li{break-inside:avoid;padding:.55rem 0;border-bottom:1px solid var(--linea);font-weight:650}
@media (max-width:760px){.lista-nombres{columns:2}}

.cruce-lineas{background:var(--azul);color:var(--blanco)}
.cruce-lineas .envoltura{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem;padding-top:2.5rem;padding-bottom:2.5rem}
.cruce-lineas p{font-size:clamp(1.1rem,2vw,1.35rem);font-weight:650;max-width:34ch}

/* =====================================================================
   MARIN Y ROJAS: trayectoria como vía
   ===================================================================== */
.via-envoltura{position:relative}
.via{position:relative;list-style:none;margin:0;padding:0 0 0 68px}
.via::before{content:"";position:absolute;left:14px;top:0;bottom:0;width:30px;
  background:
    linear-gradient(var(--azul),var(--azul)) left 6px top / 3px 100% no-repeat,
    linear-gradient(var(--azul),var(--azul)) right 6px top / 3px 100% no-repeat,
    repeating-linear-gradient(180deg,#C4CDD6 0 6px,transparent 6px 17px)}
.tren-marca{position:absolute;left:10px;top:0;width:38px;height:22px;background:var(--amarillo);border:2px solid var(--negro);border-radius:3px;z-index:2;will-change:transform}
.tren-marca::after{content:"";position:absolute;left:5px;right:5px;top:5px;height:5px;background:var(--azul)}
.estacion{position:relative;display:grid;grid-template-columns:9rem minmax(0,1fr) 280px;gap:1.5rem;padding:1.75rem 0;border-bottom:1px solid var(--linea)}
.estacion::before{content:"";position:absolute;left:-58px;top:2.3rem;width:48px;height:8px;background:#C4CDD6;transition:background .3s}
.estacion.activa::before{background:var(--amarillo)}
.estacion .cuando{font-stretch:80%;font-weight:800;font-size:1.35rem;line-height:1.1;color:var(--azul)}
.estacion h3{margin-bottom:.4rem}
.estacion .alcance{font-size:1.1rem}
.estacion .quien{color:var(--acero);margin-top:.35rem}
.estacion .foto{background:var(--azul-claro);aspect-ratio:16/10;overflow:hidden}
.estacion .foto img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.estacion:hover .foto img{transform:scale(1.04)}
.estacion .foto.dato{display:flex;flex-direction:column;justify-content:flex-end;padding:1.2rem 1.3rem;background:var(--azul);color:var(--blanco);clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%)}
.estacion .foto.dato b{font-weight:820;font-stretch:118%;font-size:clamp(1.9rem,3vw,2.5rem);line-height:1;color:var(--amarillo)}
.estacion .foto.dato span{margin-top:.45rem;color:#BFD0E3;font-weight:600}
.estacion.en-curso .foto.dato{background:var(--negro)}
.estacion.en-curso::before{background:var(--amarillo)}
.sello-curso{display:inline-flex;align-items:center;gap:.4rem;margin-top:.6rem;font-stretch:100%;font-size:.8rem;font-weight:750;color:var(--negro);background:var(--amarillo);padding:.25rem .55rem;border-radius:2px;width:fit-content}
.sello-curso::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--negro)}
.estacion .cuando{display:flex;flex-direction:column;align-items:flex-start}
@media (prefers-reduced-motion:no-preference){.sello-curso::before{animation:titila 1.6s ease-in-out infinite}}
@keyframes titila{50%{opacity:.25}}
@media (max-width:860px){
  .via{padding-left:54px}
  .via::before{left:6px}
  .tren-marca{left:2px}
  .estacion{grid-template-columns:1fr;gap:.6rem}
  .estacion::before{left:-52px;top:2.1rem}
  .estacion .foto.dato{aspect-ratio:auto;flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:.2rem .6rem;padding:.9rem 1.1rem}
  .estacion .foto.dato span{margin-top:0}
  .estacion.en-curso .foto.dato{display:none}
}
.resumen-via{font-size:clamp(1.15rem,2vw,1.45rem);font-weight:650;max-width:36ch;margin-top:1rem}

.empresa{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.empresa .foto{background:var(--azul-claro);aspect-ratio:4/3;overflow:hidden}
.empresa .foto img{width:100%;height:100%;object-fit:cover}
.empresa h2{margin-bottom:1.25rem}
.empresa p+p{margin-top:1rem}
.empresa p{max-width:46ch}
@media (max-width:820px){.empresa{grid-template-columns:1fr}}

/* =====================================================================
   CONTACTO
   ===================================================================== */
.contacto{background:var(--negro);color:var(--blanco)}
.contacto > .envoltura{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,6vw,5rem)}
.contacto h2{margin-bottom:1rem;max-width:18ch}
.contacto .entrada{color:#AEB8C3;margin-bottom:2rem}
.campos{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.campo{display:flex;flex-direction:column;gap:.35rem}
.campo.completo{grid-column:1 / -1}
.campo label{font-weight:600;font-size:.95rem;color:#DCE3EA}
.campo input,.campo select,.campo textarea{font:inherit;color:var(--blanco);background:#141B24;border:1px solid #334150;border-radius:2px;padding:.78rem .85rem;width:100%}
.campo textarea{min-height:160px;resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--amarillo);box-shadow:0 0 0 1px var(--amarillo)}
.contacto form .btn{margin-top:1.25rem}
.aviso{margin-top:1rem;padding:.9rem 1rem;border-left:4px solid var(--amarillo);background:#141B24;display:none}
.aviso.visible{display:block}
.aviso a{color:var(--amarillo)}
.sedes{display:flex;flex-direction:column;gap:2rem}
.sede h3{margin-bottom:.5rem;color:var(--amarillo);font-size:1.05rem}
.sede p{color:#C3CCD6}
.sede p+p{margin-top:.25rem}
.sede a{color:var(--blanco);font-weight:600}
.sede .mapa{display:inline-block;margin-top:.5rem;text-decoration-color:var(--amarillo);text-underline-offset:4px}
@media (max-width:900px){.contacto > .envoltura{grid-template-columns:1fr}.campos{grid-template-columns:1fr}}
.pie{background:#05070A;color:#8793A0;font-size:.92rem}
.pie .envoltura{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;padding-top:1.5rem;padding-bottom:1.5rem}
/* =====================================================================
   FRANJA DE FOTOS EN MOVIMIENTO
   ===================================================================== */
.franja{background:var(--negro);padding:1.25rem 0;overflow:hidden}
.franja-pista{display:flex;gap:.75rem;width:max-content}
@media (prefers-reduced-motion:no-preference){
  .franja-pista{animation:desliza 70s linear infinite}
  .franja:hover .franja-pista,.franja:focus-within .franja-pista{animation-play-state:paused}
}
@keyframes desliza{to{transform:translateX(-50%)}}
.franja button{position:relative;flex:none;height:clamp(190px,24vw,300px);padding:0;border:0;background:var(--azul);cursor:zoom-in;overflow:hidden}
.franja img{height:100%;width:auto;transition:transform .5s}
.franja button:hover img{transform:scale(1.05)}
.franja .pie-foto{position:absolute;left:0;bottom:0;padding:.35rem .6rem;background:rgba(10,13,18,.75);color:var(--blanco);font-size:.82rem;font-weight:650}

.banda-foto{position:relative;color:var(--blanco);overflow:hidden}
.banda-foto > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.banda-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,13,18,.94) 0%,rgba(13,43,78,.82) 55%,rgba(13,43,78,.4) 100%)}
.banda-foto .envoltura{position:relative;z-index:1;display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center;padding-top:clamp(3.5rem,7vw,5.5rem);padding-bottom:clamp(3.5rem,7vw,5.5rem)}
.banda-foto h2{font-size:clamp(1.6rem,3vw,2.4rem);max-width:22ch}
.banda-foto p{color:#C9D4DF;margin-top:.7rem;max-width:46ch}
@media (max-width:760px){.banda-foto .envoltura{grid-template-columns:1fr}}

/* =====================================================================
   TÁNDEMS
   ===================================================================== */
.tandems{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
.tandem{background:var(--blanco);border:1px solid var(--linea);display:flex;flex-direction:column}
.tandem-fotos{display:grid;grid-template-columns:1fr 1fr;gap:3px;background:var(--negro);position:relative}
.tandem-fotos button{position:relative;padding:0;border:0;background:var(--azul);aspect-ratio:4/3;overflow:hidden;cursor:pointer}
.tandem-fotos img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.tandem-fotos button:hover img{transform:scale(1.05)}
.tandem-fotos .mas{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;background:var(--amarillo);color:var(--negro);display:grid;place-items:center;font-weight:900;font-size:1.3rem;z-index:1;border:3px solid var(--negro);pointer-events:none}
.tandem-texto{padding:1.25rem 1.4rem 1.4rem;display:grid;grid-template-columns:auto 1fr;gap:.25rem 1rem;align-items:baseline}
.tandem-texto .num{grid-row:span 2;font-weight:850;font-stretch:118%;font-size:2.4rem;line-height:1;color:var(--amarillo);-webkit-text-stroke:1px var(--negro)}
.tandem-texto h3{font-size:1.15rem}
.tandem-texto p{color:var(--acero);font-size:.97rem}
.tandem-texto b{color:var(--texto);font-weight:700}
@media (max-width:820px){.tandems{grid-template-columns:1fr}}

/* =====================================================================
   EXPLORADOR DEL PARQUE
   ===================================================================== */
.explorador{display:grid;grid-template-columns:300px minmax(0,1fr);gap:0;border:1px solid var(--linea);background:var(--blanco)}
.columna-modelos{display:flex;flex-direction:column;border-right:1px solid var(--linea);min-width:0}
.modelos{display:flex;flex-direction:column}
.nota-renta{margin-top:auto;padding:1.25rem;background:var(--fondo);border-top:1px solid var(--linea)}
.nota-renta p{color:var(--acero);font-size:.95rem;margin-bottom:1rem}
.nota-renta .btn{width:100%;padding:.7rem 1rem;font-size:.95rem}
.modelos button{display:grid;grid-template-columns:64px 1fr;gap:.85rem;align-items:center;text-align:left;font:inherit;background:transparent;border:0;border-bottom:1px solid var(--linea);border-left:4px solid transparent;padding:.85rem 1rem .85rem .85rem;cursor:pointer;color:var(--texto)}
.modelos button:hover{background:var(--fondo)}
.modelos button[aria-selected="true"]{background:var(--azul);color:var(--blanco);border-left-color:var(--amarillo)}
.modelos img{width:64px;height:48px;object-fit:cover;background:var(--azul-claro)}
.modelos small{display:block;font-size:.8rem;font-weight:700;color:var(--azul-medio)}
.modelos button[aria-selected="true"] small{color:var(--amarillo)}
.modelos strong{display:block;font-weight:750;font-stretch:106%;font-size:.98rem;line-height:1.2}
.ficha{min-width:0}
.galeria-principal{position:relative;aspect-ratio:16/9;background:var(--negro);overflow:hidden}
.galeria-principal img{width:100%;height:100%;object-fit:cover;transition:opacity .25s ease;cursor:zoom-in}
.galeria-principal img.cambia{opacity:0}
.galeria-principal .flecha{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:0;background:rgba(10,13,18,.65);color:var(--blanco);font-size:1.3rem;cursor:pointer;display:grid;place-items:center}
.galeria-principal .flecha:hover{background:var(--amarillo);color:var(--negro)}
.galeria-principal .ant{left:.9rem}
.galeria-principal .sig{right:.9rem}
.galeria-principal .conteo{position:absolute;right:.9rem;bottom:.9rem;background:rgba(10,13,18,.7);color:var(--blanco);font-size:.85rem;font-weight:700;padding:.3rem .6rem;border-radius:2px}
.galeria-principal .marca-modelo{position:absolute;left:.9rem;bottom:.9rem;background:var(--amarillo);color:var(--negro);font-size:.85rem;font-weight:750;padding:.3rem .6rem;border-radius:2px}
.tiras{display:flex;gap:6px;padding:8px;background:var(--negro);overflow-x:auto;scrollbar-width:thin}
.tiras button{flex:none;width:92px;height:62px;padding:0;border:2px solid transparent;background:var(--azul);cursor:pointer;opacity:.6;transition:opacity .2s}
.tiras button:hover{opacity:1}
.tiras button[aria-current="true"]{border-color:var(--amarillo);opacity:1}
.tiras img{width:100%;height:100%;object-fit:cover}
.datos{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:2rem;padding:clamp(1.4rem,3vw,2.25rem)}
.datos .tipo{font-weight:700;color:var(--azul-medio);font-size:.95rem}
.datos h3{font-size:clamp(1.4rem,2.3vw,1.85rem);font-stretch:114%;margin:.3rem 0 .9rem;color:var(--azul)}
.datos p{color:var(--texto);line-height:1.6}
.datos dl{margin:0;border-top:3px solid var(--azul)}
.datos dl div{display:grid;grid-template-columns:8.5rem 1fr;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--linea)}
.datos dt{font-weight:700;color:var(--acero);font-size:.92rem}
.datos dd{margin:0;font-weight:600}
.datos .botones{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem}
.datos .botones .btn{padding:.65rem 1rem;font-size:.92rem}
.complemento{margin-top:1.25rem;color:var(--acero)}
.complemento b{color:var(--texto)}
@media (max-width:980px){
  .explorador{grid-template-columns:1fr}
  .columna-modelos{border-right:0}
  .nota-renta{display:none}
  .modelos{flex-direction:row;overflow-x:auto;border-bottom:1px solid var(--linea);scrollbar-width:thin}
  .modelos button{flex:none;width:240px;border-bottom:0;border-left:0;border-right:1px solid var(--linea);border-top:4px solid transparent}
  .modelos button[aria-selected="true"]{border-left:0;border-top-color:var(--amarillo)}
  .datos{grid-template-columns:1fr}
}
@media (max-width:520px){.datos dl div{grid-template-columns:1fr;gap:.15rem}}

/* ---------- Visor de fotos ---------- */
.visor{border:0;padding:0;margin:0;width:100vw;height:100vh;max-width:none;max-height:none;background:rgba(5,7,10,.96);color:var(--blanco)}
.visor::backdrop{background:rgba(5,7,10,.96)}
.visor[open]{display:grid;grid-template-rows:1fr auto}
.visor figure{margin:0;display:grid;place-items:center;padding:3.5rem 4rem 0;min-height:0}
.visor img{max-width:100%;max-height:calc(100vh - 8rem);object-fit:contain}
.visor figcaption{padding:1rem;text-align:center;font-weight:650;color:#DCE3EA}
.visor button{position:absolute;border:0;background:rgba(255,255,255,.1);color:var(--blanco);width:48px;height:48px;border-radius:50%;font-size:1.4rem;cursor:pointer}
.visor button:hover{background:var(--amarillo);color:var(--negro)}
.visor .cerrar{top:1rem;right:1rem}
.visor .ant{left:1rem;top:50%;transform:translateY(-50%)}
.visor .sig{right:1rem;top:50%;transform:translateY(-50%)}
@media (max-width:600px){.visor figure{padding:3.5rem .5rem 0}.visor .ant,.visor .sig{top:auto;bottom:1rem;transform:none}}
/* ---------- Soluciones ---------- */
.soluciones{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
.solucion{position:relative;display:flex;flex-direction:column;background:var(--blanco);text-decoration:none;color:var(--texto);border:1px solid var(--linea);transition:transform .25s,box-shadow .25s}
.solucion:hover{transform:translateY(-4px);box-shadow:0 22px 40px -28px rgba(13,43,78,.6)}
.solucion .foto{aspect-ratio:4/3;overflow:hidden;background:var(--azul)}
.solucion .foto img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.solucion:hover .foto img{transform:scale(1.06)}
.solucion .cuerpo{padding:1.25rem 1.3rem 1.4rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.solucion .empresa-de{font-size:.82rem;font-weight:700;color:var(--azul-medio)}
.solucion h3{font-size:1.25rem}
.solucion p{color:var(--acero);font-size:.97rem}
.solucion .ir{margin-top:auto;padding-top:.6rem;font-weight:700;color:var(--azul);display:flex;align-items:center;gap:.5rem}
.solucion .ir::after{content:"";width:22px;height:2px;background:var(--amarillo);transition:width .25s}
.solucion:hover .ir::after{width:40px}
@media (max-width:1000px){.soluciones{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.soluciones{grid-template-columns:1fr}}

/* ---------- Tres razones ---------- */
.razones{display:flex;flex-direction:column;gap:clamp(2.5rem,6vw,4.5rem)}
.razon{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.razon:nth-child(even) .razon-foto{order:2}
.razon-foto{aspect-ratio:16/11;overflow:hidden;background:var(--azul)}
.razon-foto img{width:100%;height:100%;object-fit:cover}
.razon .num{display:block;font-weight:820;font-stretch:118%;font-size:clamp(3rem,6vw,4.6rem);line-height:1;color:var(--amarillo);margin-bottom:.6rem}
.razon h3{font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:780;font-stretch:110%;margin-bottom:1rem;max-width:20ch}
.razon p{color:var(--acero);font-size:1.08rem;max-width:44ch}
@media (max-width:820px){.razon{grid-template-columns:1fr}.razon:nth-child(even) .razon-foto{order:0}}

/* ---------- Seguridad y calidad ---------- */
.pilares{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:.5rem}
.pilar{border-top:3px solid var(--amarillo);padding-top:1.2rem}
.pilar h3{margin-bottom:.6rem;font-size:1.3rem}
.pilar p{color:#C3D2E2}
.pendiente{margin-top:2.25rem;padding:1rem 1.25rem;border:1.5px dashed rgba(255,255,255,.35);color:#DCE6F1}
.pendiente b{color:var(--amarillo)}
@media (max-width:820px){.pilares{grid-template-columns:1fr}}

/* ---------- Muro de clientes ---------- */
.muro{display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--linea);border-left:1px solid var(--linea)}
.muro div{border-right:1px solid var(--linea);border-bottom:1px solid var(--linea);padding:1.4rem 1rem;min-height:104px;display:flex;flex-direction:column;justify-content:center;gap:.3rem;background:var(--blanco);transition:background .2s}
.muro div:hover{background:var(--azul-claro)}
.muro b{font-weight:780;font-stretch:108%;font-size:1.06rem;line-height:1.2}
.muro span{font-size:.8rem;color:var(--acero);font-weight:600}
@media (max-width:1000px){.muro{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){.muro{grid-template-columns:repeat(2,1fr)}}

/* ---------- Proceso ---------- */
.proceso{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;position:relative}
.proceso::before{content:"";position:absolute;left:0;right:0;top:27px;height:14px;
  background:linear-gradient(var(--azul),var(--azul)) left top / 100% 3px no-repeat,linear-gradient(var(--azul),var(--azul)) left bottom / 100% 3px no-repeat,repeating-linear-gradient(90deg,#C4CDD6 0 6px,transparent 6px 17px)}
.proceso li{position:relative}
.proceso .n{position:relative;z-index:1;display:grid;place-items:center;width:68px;height:68px;border-radius:50%;background:var(--amarillo);color:var(--negro);font-weight:850;font-stretch:118%;font-size:1.5rem;border:5px solid var(--fondo)}
.proceso h3{margin:1.1rem 0 .5rem}
.proceso p{color:var(--acero)}
@media (max-width:860px){
  .proceso{grid-template-columns:1fr;gap:1.75rem}
  .proceso::before{left:27px;right:auto;top:0;bottom:0;width:14px;height:auto;
    background:linear-gradient(var(--azul),var(--azul)) left top / 3px 100% no-repeat,linear-gradient(var(--azul),var(--azul)) right top / 3px 100% no-repeat,repeating-linear-gradient(180deg,#C4CDD6 0 6px,transparent 6px 17px)}
  .proceso li{display:grid;grid-template-columns:68px 1fr;gap:0 1.25rem;align-items:start}
  .proceso h3{margin:.5rem 0 .4rem}
}

/* ---------- Pie ---------- */
.pie{background:var(--azul);color:#BFD0E3;font-size:.95rem}
.pie .envoltura{display:block;padding-top:3.5rem;padding-bottom:2rem}
.pie-arriba{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem;padding-bottom:2.5rem;border-bottom:1px solid rgba(255,255,255,.14)}
.pie .logo{font-size:30px}
.pie h4{margin:0 0 .8rem;color:var(--blanco);font-size:.95rem;font-weight:700}
.pie p{margin:0 0 .35rem}
.pie a{color:var(--blanco);text-decoration:none}
.pie a:hover{color:var(--amarillo)}
.pie-empresas{display:flex;flex-direction:column;gap:1rem;margin-top:1.6rem}
.pie-empresas .logo{font-size:19px}
.pie-abajo{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;padding-top:1.5rem;color:#8FA6C2;font-size:.88rem}
@media (max-width:900px){.pie-arriba{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.pie-arriba{grid-template-columns:1fr}}

.destino .logo{font-size:clamp(22px,2.4vw,30px)}


/* Logos finales (archivos SVG con trazos) */
.logo-img{display:block;width:auto;max-width:100%}
.barra .logo-img{height:46px}
.portada .logo-img{height:50px;margin:0 0 1.2rem -6px}
.destino .logo-img{width:min(100%,240px);height:auto;margin-left:-5px}
.pie-arriba > div:first-child > .logo-img{width:min(100%,270px);height:auto;margin-left:-6px}
.pie-empresas .logo-img{height:30px;width:auto;max-width:100%;object-fit:contain;object-position:left center;margin-left:-4px}
.pie-arriba > div{min-width:0}
@media (max-width:820px){.barra .logo-img{height:38px}.portada .logo-img{height:42px}}
@media (max-width:520px){.barra .logo-img{height:30px}.barra .envoltura{flex-wrap:wrap}.barra .btn{padding:.5rem .85rem}}

/* ---------- Logos de socios ---------- */
.socio-logo{height:76px;display:flex;align-items:center;justify-content:flex-start;margin-bottom:.6rem;padding:10px 16px;background:var(--blanco);border:1px solid var(--linea);width:min(100%,240px)}
.socio-logo img{max-height:52px;max-width:100%;width:auto;object-fit:contain;filter:grayscale(1);opacity:.85;transition:filter .25s,opacity .25s}
.socio:hover .socio-logo img{filter:none;opacity:1}
.socio-logo.sin-logo{display:none}

/* ---------- Disponibilidad de tándems ---------- */
.disp-resumen{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.4rem;margin-top:1.4rem;padding:.9rem 1.2rem;background:var(--blanco);border:1px solid var(--linea);width:fit-content;max-width:100%}
.disp-resumen b{font-weight:800}
.disp-resumen .fecha{color:var(--acero);font-size:.9rem}
.estado{display:inline-flex;align-items:center;gap:.45rem;font-weight:700;font-size:.92rem;white-space:nowrap}
.estado::before{content:"";width:10px;height:10px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 22%,transparent)}
.estado.disponible{color:#11804F}
.estado.en-obra{color:#B07800}
.estado.en-taller{color:var(--azul-medio)}
@media (prefers-reduced-motion:no-preference){.estado.disponible::before{animation:latido 2.2s ease-in-out infinite}}
@keyframes latido{50%{box-shadow:0 0 0 6px color-mix(in srgb,currentColor 0%,transparent)}}
.tandem-estado{position:absolute;left:12px;top:12px;z-index:2;background:var(--blanco);padding:.4rem .75rem;border-radius:2px;box-shadow:0 6px 16px -8px rgba(10,13,18,.5)}
.tandem-libre{grid-column:2;font-size:.9rem;color:var(--acero);margin-top:.15rem}
.tandem-accion{grid-column:2;justify-self:start;margin-top:.8rem;padding:.6rem 1rem;font-size:.92rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}