:root {
--fondo: #F6F5F9;
--blanco: #FFFFFF;
--tinta: #1E1B26;
--gris: #5D5969;
--raya: #DEDAE7;
--ruta: #5B34A8;
--ruta-honda: #45237F;
--ruta-tenue: #ECE6F7;
--ruta-rgb: 91, 52, 168;
--wa: #11823F;
--wa-honda: #0C6E34;
--error: #B42318;
--senal: #F2A516;
--senal-rgb: 242, 165, 22;
--calle: #ECE8F4;
--letra: 'Overpass', 'Segoe UI', system-ui, sans-serif;
--letra-mono: 'Overpass Mono', ui-monospace, 'Consolas', monospace;
--ancho: 1160px;
--orilla: 20px;
--via-x: 30px;
--via-grosor: 6px;
--redondeo: 14px;
--redondeo-chico: 8px;
--elevacion: 0 1px 2px rgba(30, 27, 38, .05), 0 16px 36px -20px rgba(30, 27, 38, .35);
--curva: cubic-bezier(.3, .7, .2, 1);
}
@media (min-width: 900px) {
:root { --orilla: 40px; --via-x: 64px; }
}
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
background: var(--fondo);
color: var(--tinta);
font-family: var(--letra);
font-size: 18px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
ul, ol { list-style: none; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
:focus-visible { outline: 3px solid var(--ruta); outline-offset: 3px; }
[hidden] { display: none !important; }
.brinco {
position: absolute;
left: 12px;
top: -60px;
z-index: 60;
padding: 10px 14px;
border-radius: var(--redondeo-chico);
background: var(--tinta);
color: var(--blanco);
}
.brinco:focus { top: 12px; }
.marco { width: 100%; max-width: var(--ancho); margin-left: auto; margin-right: auto; padding-left: var(--orilla); padding-right: var(--orilla); }
.pulsador {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 50px;
padding: 13px 24px 11px;
border-radius: 999px;
font-size: 17px;
font-weight: 800;
line-height: 1.1;
text-decoration: none;
text-align: center;
transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.pulsador svg { flex: none; margin-top: -2px; }
.pulsador[disabled] { opacity: .4; cursor: not-allowed; }
.pulsador--ruta { background: var(--ruta); color: var(--blanco); }
.pulsador--ruta:not([disabled]):hover { background: var(--ruta-honda); }
.pulsador--wa { background: var(--wa); color: var(--blanco); }
.pulsador--wa:hover { background: var(--wa-honda); }
.pulsador--linea { border: 2px solid var(--raya); color: var(--tinta); }
.pulsador--linea:hover { border-color: var(--tinta); }
.pulsador--compacto { min-height: 42px; padding: 10px 16px 8px; font-size: 15px; }
.barra { position: sticky; top: 0; z-index: 45; background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--raya); }
.barra__avance { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--ruta); transform-origin: left; transform: scaleX(var(--leido, 0)); }
.barra__fila { display: flex; align-items: center; gap: 28px; min-height: 70px; }
.emblema { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; text-decoration: none; }
.emblema__nombre { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1; padding-top: 3px; white-space: nowrap; }
.emblema__sub { font-weight: 400; color: var(--gris); }
.cierre__marca span { font-weight: 400; color: var(--gris); }
@media (max-width: 440px) {
.barra__fila { gap: 12px; }
.emblema { gap: 8px; }
.emblema__signo { width: 28px; height: 28px; }
.emblema__nombre { font-size: 22px; }
.pulsador--compacto { width: 44px; min-height: 44px; padding: 0; }
.pulsador--compacto .pulsador__texto { display: none; }
.pulsador--compacto svg { width: 20px; height: 20px; margin-top: 0; }
}
.barra__menu { display: none; gap: 28px; font-size: 16px; font-weight: 600; }
.barra__menu a { text-decoration: none; color: var(--gris); }
.barra__menu a:hover { color: var(--ruta); }
@media (min-width: 980px) { .barra__menu { display: flex; } }
.inicio { padding-top: 48px; padding-bottom: 56px; }
.inicio__fila { display: grid; gap: 40px; align-items: center; }
@media (min-width: 980px) {
.inicio { padding-top: 84px; padding-bottom: 96px; }
.inicio__fila { grid-template-columns: 1.25fr .75fr; gap: 72px; }
}
.rotulo {
font-family: var(--letra-mono);
font-size: 14px;
font-weight: 600;
letter-spacing: .02em;
color: var(--ruta);
}
.inicio__titulo {
margin-top: 16px;
font-size: clamp(40px, 6.2vw, 78px);
font-weight: 800;
line-height: .98;
letter-spacing: -.03em;
text-wrap: balance;
}
.inicio__acento { color: var(--ruta); }
.inicio__bajada { margin-top: 24px; max-width: 46ch; font-size: clamp(18px, 1.7vw, 21px); color: var(--gris); }
.inicio__acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.inicio__datos { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 28px; font-size: 15px; font-weight: 600; color: var(--gris); }
.inicio__datos li { display: inline-flex; align-items: center; gap: 8px; }
.inicio__datos li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ruta); }
@media (max-width: 560px) {
.inicio__acciones .pulsador { width: 100%; }
}
.mapa {
padding: 24px 26px;
background: var(--blanco);
border: 1px solid var(--raya);
border-radius: var(--redondeo);
box-shadow: var(--elevacion);
}
.mapa__titulo { font-family: var(--letra-mono); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gris); }
.mapa__lista { position: relative; margin-top: 18px; }
.mapa__lista::before {
content: "";
position: absolute;
left: 9px;
top: 12px;
bottom: 12px;
width: var(--via-grosor);
border-radius: 3px;
background: var(--ruta);
}
.mapa__punto a {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 10px;
min-height: 48px;
padding-left: 40px;
font-size: 17px;
font-weight: 600;
text-decoration: none;
}
.mapa__punto a::before {
content: "";
position: absolute;
left: 2px;
top: 50%;
width: 20px;
height: 20px;
margin-top: -10px;
border-radius: 50%;
background: var(--blanco);
border: 4px solid var(--ruta);
}
.mapa__punto a:hover .mapa__nombre { color: var(--ruta); text-decoration: underline; text-underline-offset: 4px; }
.mapa__punto--aqui a::before { background: var(--ruta); box-shadow: 0 0 0 5px rgba(var(--ruta-rgb), .18); }
.mapa__punto--fin a::before { border-radius: 6px; width: 24px; left: 0; background: var(--ruta); }
.mapa__aqui {
padding: 3px 8px 1px;
border-radius: 4px;
background: var(--ruta-tenue);
font-family: var(--letra-mono);
font-size: 12px;
font-weight: 600;
color: var(--ruta-honda);
}
.recorrido { position: relative; padding-bottom: 24px; }
.recorrido__via {
position: absolute;
top: 0;
bottom: 120px;
left: max(calc(var(--via-x) - var(--via-grosor) / 2), calc((100% - var(--ancho)) / 2 + var(--via-x) - var(--via-grosor) / 2));
width: var(--via-grosor);
border-radius: 3px;
background: var(--ruta-tenue);
overflow: hidden;
}
.recorrido__avance {
display: block;
height: 100%;
background: var(--ruta);
transform-origin: top;
transform: scaleY(1);
}
.js .recorrido__avance { transform: scaleY(var(--avance, 0)); }
.parada { position: relative; padding-top: 64px; padding-bottom: 64px; }
@media (min-width: 900px) { .parada { padding-top: 88px; padding-bottom: 88px; } }
.parada__marca {
position: absolute;
top: 64px;
left: max(calc(var(--via-x) - 17px), calc((100% - var(--ancho)) / 2 + var(--via-x) - 17px));
z-index: 2;
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--blanco);
border: 4px solid var(--ruta);
font-family: var(--letra-mono);
font-size: 14px;
font-weight: 600;
line-height: 1;
color: var(--ruta);
transition: background-color .3s ease, color .3s ease, box-shadow .3s ease;
}
@media (min-width: 900px) { .parada__marca { top: 88px; } }
.parada.is-llegada .parada__marca { background: var(--ruta); color: var(--blanco); box-shadow: 0 0 0 7px rgba(var(--ruta-rgb), .16); animation: llegada .55s var(--curva); }
.parada__marca--fin { border-radius: 10px; }
.parada__cuerpo { padding-left: calc(var(--via-x) + 30px); }
@media (min-width: 900px) { .parada__cuerpo { padding-left: calc(var(--via-x) + 48px); } }
.parada__etiqueta { font-family: var(--letra-mono); font-size: 14px; font-weight: 600; color: var(--ruta); }
.parada__titulo {
margin-top: 10px;
max-width: 22ch;
font-size: clamp(30px, 4vw, 50px);
font-weight: 800;
line-height: 1.04;
letter-spacing: -.025em;
text-wrap: balance;
}
.parada__bajada { margin-top: 14px; max-width: 56ch; color: var(--gris); }
.situaciones { display: grid; gap: 14px; margin-top: 34px; }
@media (min-width: 700px) { .situaciones { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .situaciones { grid-template-columns: repeat(3, 1fr); } }
.situacion {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 22px 22px 20px;
background: var(--blanco);
border: 1px solid var(--raya);
border-radius: var(--redondeo);
}
.situacion h3 { font-size: 20px; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; }
.situacion p { margin-top: 6px; margin-bottom: 18px; font-size: 16px; line-height: 1.5; color: var(--gris); }
.situacion__boton {
margin-top: auto;
min-height: 44px;
padding: 10px 18px 8px;
border-radius: 999px;
border: 2px solid var(--ruta);
font-size: 15px;
font-weight: 800;
color: var(--ruta);
transition: background-color .2s ease, color .2s ease;
}
.situacion__boton:hover { background: var(--ruta); color: var(--blanco); }
.revisamos { display: grid; gap: 14px; margin-top: 34px; }
@media (min-width: 760px) { .revisamos { grid-template-columns: 1fr 1fr; } }
.revisamos__item { padding: 20px 22px; border-radius: var(--redondeo); background: var(--ruta-tenue); }
.revisamos dt { font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.revisamos dd { margin-top: 6px; font-size: 17px; line-height: 1.5; color: #3E3A4A; }
.revisamos__nota { margin-top: 20px; font-size: 16px; color: var(--gris); }
.tramos { display: grid; gap: 14px; margin-top: 34px; }
@media (min-width: 900px) { .tramos { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
.tramo-paso {
position: relative;
padding: 24px 22px 22px;
background: var(--blanco);
border: 1px solid var(--raya);
border-radius: var(--redondeo);
}
.tramo-paso p { font-size: 17px; line-height: 1.5; color: #3E3A4A; }
.tramo-paso .tramo-paso__nombre { margin-bottom: 8px; font-size: 22px; font-weight: 800; letter-spacing: -.015em; color: var(--tinta); }
.tramo-paso .tramo-paso__nota {
display: inline-block;
margin-top: 16px;
padding: 4px 10px 2px;
border-radius: 4px;
background: var(--ruta-tenue);
font-family: var(--letra-mono);
font-size: 13px;
font-weight: 600;
color: var(--ruta-honda);
}
.saber { display: grid; gap: 22px; margin-top: 34px; }
@media (min-width: 960px) { .saber { grid-template-columns: 1.3fr .7fr; gap: 28px; align-items: start; } }
.saber__lista { display: grid; background: var(--blanco); border: 1px solid var(--raya); border-radius: var(--redondeo); }
.saber__lista li { padding: 22px 24px; }
.saber__lista li + li { border-top: 1px solid var(--raya); }
.saber__lista h3 { font-size: 20px; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; }
.saber__lista p { margin-top: 6px; font-size: 17px; line-height: 1.5; color: #3E3A4A; }
.saber__lista a { color: var(--ruta); text-underline-offset: 3px; }
.cuidado { padding: 22px 24px; border-radius: var(--redondeo); background: var(--tinta); color: var(--blanco); }
.cuidado__titulo { font-size: 20px; font-weight: 800; line-height: 1.25; }
.cuidado p:not(.cuidado__titulo) { margin-top: 10px; font-size: 16px; line-height: 1.55; color: rgba(255, 255, 255, .82); }
.terminal { display: grid; gap: 30px; margin-top: 10px; }
@media (min-width: 980px) { .terminal { grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: start; } }
.terminal__alterna { margin-top: 18px; font-size: 17px; font-weight: 600; }
.terminal__alterna a { color: var(--wa); text-underline-offset: 4px; }
.cuestionario {
padding: 24px 20px 22px;
background: var(--blanco);
border: 2px solid var(--ruta);
border-radius: var(--redondeo);
box-shadow: var(--elevacion);
}
@media (min-width: 560px) { .cuestionario { padding: 32px 32px 28px; } }
.cuestionario__cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cuestionario__titulo { font-size: 21px; font-weight: 800; letter-spacing: -.01em; }
.cuestionario__paso { font-family: var(--letra-mono); font-size: 13px; font-weight: 600; color: var(--gris); white-space: nowrap; }
.cuestionario__puntos { display: flex; align-items: center; margin: 16px 0 22px; }
.cuestionario__puntos li { position: relative; flex: none; width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--raya); background: var(--blanco); transition: border-color .25s ease, background-color .25s ease; }
.cuestionario__puntos li + li { margin-left: 40px; }
.cuestionario__puntos li + li::before { content: ""; position: absolute; right: 100%; top: 50%; width: 46px; height: 3px; margin-top: -1.5px; background: var(--raya); transition: background-color .25s ease; }
.cuestionario__puntos li.is-activo { border-color: var(--ruta); background: var(--ruta); }
.cuestionario__puntos li.is-activo::before { background: var(--ruta); }
.pregunta-paso { border: 0; min-width: 0; }
.pregunta-paso legend { margin-bottom: 14px; font-size: 20px; font-weight: 800; line-height: 1.3; letter-spacing: -.01em; }
.pregunta-paso legend:focus { outline: none; }
.eleccion { display: grid; gap: 8px; }
@media (min-width: 560px) { .eleccion--par { grid-template-columns: 1fr 1fr; } }
.eleccion__op { position: relative; display: block; cursor: pointer; }
.eleccion__op input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.eleccion__op span {
display: flex;
align-items: center;
gap: 12px;
min-height: 52px;
padding: 13px 16px 11px;
border: 2px solid var(--raya);
border-radius: var(--redondeo-chico);
font-size: 17px;
font-weight: 600;
line-height: 1.3;
transition: border-color .15s ease, background-color .15s ease;
}
.eleccion__op span::before {
content: "";
flex: none;
width: 18px;
height: 18px;
margin-top: -2px;
border-radius: 50%;
border: 2px solid #B9B3C7;
background: var(--blanco);
transition: border-color .15s ease, box-shadow .15s ease;
}
.eleccion__op:hover span { border-color: #C9C2D9; }
.eleccion__op input:checked + span { border-color: var(--ruta); background: var(--ruta-tenue); }
.eleccion__op input:checked + span::before { border-color: var(--ruta); box-shadow: inset 0 0 0 3px var(--blanco), inset 0 0 0 9px var(--ruta); }
.eleccion__op input:focus-visible + span { outline: 3px solid var(--ruta); outline-offset: 2px; }
.pregunta-paso__acciones { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
.pregunta-paso__acciones .pulsador { flex: 1 1 0; }
@media (min-width: 560px) { .pregunta-paso__acciones .pulsador { flex: 0 0 auto; } }
.dato { display: grid; gap: 6px; margin-bottom: 14px; }
.dato label { font-size: 16px; font-weight: 800; }
.dato__opcional { font-weight: 400; color: var(--gris); }
.dato input, .dato textarea {
width: 100%;
min-height: 50px;
padding: 12px 14px;
border: 2px solid var(--raya);
border-radius: var(--redondeo-chico);
background: var(--blanco);
font-size: 17px;
}
.dato textarea { resize: vertical; min-height: 96px; }
.dato input:focus, .dato textarea:focus { outline: none; border-color: var(--ruta); box-shadow: 0 0 0 4px rgba(var(--ruta-rgb), .15); }
.dato__error { display: none; font-size: 15px; font-weight: 600; color: var(--error); }
.dato.con-error input { border-color: var(--error); }
.dato.con-error .dato__error { display: block; }
.listo { display: grid; gap: 10px; justify-items: start; }
.listo:focus { outline: none; }
.listo__titulo { font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.preguntas { padding-top: 64px; padding-bottom: 72px; background: var(--blanco); border-top: 1px solid var(--raya); }
@media (min-width: 900px) { .preguntas { padding-top: 96px; padding-bottom: 104px; } }
.preguntas__titulo { font-size: clamp(30px, 4vw, 46px); font-weight: 800; line-height: 1.05; letter-spacing: -.025em; }
.preguntas__lista { max-width: 860px; margin-top: 28px; }
.duda { border-bottom: 1px solid var(--raya); }
.duda:first-child { border-top: 1px solid var(--raya); }
.duda summary {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
padding: 20px 0 18px;
font-size: 19px;
font-weight: 800;
line-height: 1.35;
cursor: pointer;
list-style: none;
}
.duda summary::-webkit-details-marker { display: none; }
.duda summary::after {
content: "+";
flex: none;
display: grid;
place-items: center;
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--ruta-tenue);
color: var(--ruta);
font-size: 22px;
font-weight: 600;
line-height: 1;
}
.duda[open] summary::after { content: "–"; }
.duda p { padding-bottom: 22px; max-width: 64ch; color: #3E3A4A; }
.datos { padding-top: 64px; padding-bottom: 72px; background: var(--ruta-honda); color: var(--blanco); }
@media (min-width: 900px) { .datos { padding-top: 88px; padding-bottom: 96px; } }
.datos__fila { display: grid; gap: 40px; }
@media (min-width: 940px) { .datos__fila { grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; } }
.datos__titulo { font-size: clamp(30px, 4vw, 46px); font-weight: 800; line-height: 1.05; letter-spacing: -.025em; }
.datos__bajada { margin-top: 12px; margin-bottom: 26px; color: rgba(255, 255, 255, .8); }
.tarjeta-datos { display: grid; padding: 6px 22px; border-radius: var(--redondeo); background: #3A1C6C; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1); }
.tarjeta-datos div { display: grid; gap: 2px; padding-top: 14px; padding-bottom: 14px; }
.tarjeta-datos div + div { border-top: 1px solid rgba(255, 255, 255, .16); }
@media (min-width: 560px) { .tarjeta-datos div { grid-template-columns: 130px 1fr; gap: 16px; } }
.tarjeta-datos dt { font-family: var(--letra-mono); font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .7); padding-top: 3px; }
.tarjeta-datos dd { font-size: 17px; }
.tarjeta-datos a { color: var(--blanco); text-underline-offset: 3px; }
.cierre { padding-top: 40px; padding-bottom: 120px; background: var(--fondo); }
.cierre__fila { display: grid; gap: 14px; }
.cierre__marca { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.cierre__deslinde { max-width: 84ch; font-size: 15px; line-height: 1.6; color: var(--gris); }
.cierre__avisos { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 15px; color: var(--gris); }
.cierre__avisos a { color: var(--tinta); text-underline-offset: 3px; }
.wa-fijo {
position: fixed;
right: 16px;
bottom: 16px;
z-index: 40;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 60px;
height: 60px;
border-radius: 999px;
background: var(--wa);
color: var(--blanco);
text-decoration: none;
font-size: 17px;
font-weight: 800;
box-shadow: 0 10px 28px -8px rgba(12, 110, 52, .55);
transition: background-color .2s ease, transform .2s ease;
}
.wa-fijo:hover { background: var(--wa-honda); transform: translateY(-2px); }
.wa-fijo__texto { display: none; padding-top: 3px; }
@media (min-width: 900px) {
.wa-fijo { right: 28px; bottom: 28px; width: auto; height: 56px; padding: 0 24px 0 20px; }
.wa-fijo__texto { display: inline; }
}
.documento { max-width: 760px; padding-top: 48px; padding-bottom: 96px; }
.documento h1 { font-size: clamp(32px, 4vw, 46px); font-weight: 800; line-height: 1.05; letter-spacing: -.025em; }
.documento h2 { margin-top: 36px; font-size: 22px; font-weight: 800; line-height: 1.2; }
.documento p, .documento li { margin-top: 12px; color: #3E3A4A; }
.documento ul { padding-left: 1.2em; list-style: disc; }
.documento .volver { display: inline-block; margin-top: 40px; font-weight: 800; color: var(--ruta); }
.inicio { position: relative; overflow: hidden; }
.inicio__fila { position: relative; z-index: 1; }
.inicio__calles {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
-webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 54%, #000 78%);
mask-image: linear-gradient(180deg, transparent 0, transparent 54%, #000 78%);
pointer-events: none;
}
@media (min-width: 980px) {
.inicio__calles { -webkit-mask-image: linear-gradient(90deg, transparent 18%, #000 62%); mask-image: linear-gradient(90deg, transparent 18%, #000 62%); }
}
.calle { fill: none; stroke: var(--calle); stroke-width: 16; stroke-linejoin: round; }
.flujo { fill: none; stroke: #CFC3EA; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1 26; animation: trafico 9s linear infinite; }
.flujo--lento { animation-duration: 14s; }
.flujo--atras { animation-direction: reverse; animation-duration: 12s; }
@keyframes trafico { to { stroke-dashoffset: -270; } }
.giro { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .4em; font-family: var(--letra-mono); font-size: 14px; font-weight: 600; color: var(--gris); }
.giro__ventana { position: relative; display: inline-block; color: var(--ruta); }
.giro__texto { display: inline-block; transition: transform .35s var(--curva), opacity .35s ease; }
.giro__texto.is-saliendo { transform: translateY(-70%); opacity: 0; }
.giro__texto.is-entrando { transform: translateY(70%); opacity: 0; transition: none; }
.giro__ventana::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 3px; vertical-align: -2px; background: var(--senal); animation: cursor 1s steps(2) infinite; }
@keyframes cursor { 50% { opacity: 0; } }
.inicio__acento { font-style: italic; }
@media (max-width: 560px) { .inicio__titulo { text-wrap: wrap; } }
.palabra { display: inline-block; }
.palabra > span { position: relative; display: inline-block; }
.js .palabra > span { opacity: 0; transform: translateY(.45em); animation: subir .75s var(--curva) forwards; animation-delay: calc(var(--i) * 55ms + 120ms); }
@keyframes subir { to { opacity: 1; transform: none; } }
.inicio__acento .palabra > span::after {
content: "";
position: absolute;
left: 0;
right: -.32em;
bottom: -.04em;
height: 0;
border-top: .085em dashed var(--senal);
transform: scaleX(0);
transform-origin: left;
animation: trazar .45s var(--curva) forwards;
animation-delay: calc(var(--i) * 55ms + 900ms);
}
.inicio__acento .palabra:last-child > span::after { right: 0; }
@keyframes trazar { to { transform: scaleX(1); } }
.pulsador__flecha { transition: transform .25s var(--curva); }
.pulsador:hover .pulsador__flecha { transform: translateX(4px); }
.mapa { position: relative; overflow: hidden; }
.mapa__lista::before { background: var(--ruta-tenue); }
.mapa__trazo, .mapa__tren { position: absolute; pointer-events: none; }
.mapa__trazo { left: 35px; top: 74px; bottom: 36px; width: var(--via-grosor); border-radius: 3px; background: var(--ruta); transform-origin: top; }
.js .mapa__trazo { transform: scaleY(0); animation: bajar 1.4s var(--curva) .35s forwards; }
@keyframes bajar { to { transform: scaleY(1); } }
.js .mapa__punto { opacity: 0; transform: translateX(-10px); animation: llegar .5s var(--curva) forwards; animation-delay: calc(var(--i) * 230ms + 450ms); }
@keyframes llegar { to { opacity: 1; transform: none; } }
.mapa__punto, .mapa__punto a { z-index: 1; }
.mapa__tren {
left: 32px;
top: 74px;
width: 12px;
height: 12px;
margin-left: 0;
border-radius: 50%;
background: var(--senal);
box-shadow: 0 0 0 4px rgba(var(--senal-rgb), .28);
opacity: 0;
z-index: 2;
animation: viaje 6s var(--curva) 2.2s 3;
}
@keyframes viaje {
0% { opacity: 0; transform: translateY(0); }
8% { opacity: 1; }
80% { opacity: 1; transform: translateY(var(--largo, 196px)); }
92%, 100% { opacity: 0; transform: translateY(var(--largo, 196px)); }
}
.mapa__punto--aqui a::before { background: var(--senal); border-color: var(--senal); box-shadow: 0 0 0 0 rgba(var(--senal-rgb), .5); animation: latido 2.4s ease-out 1.6s infinite; }
.mapa__aqui { background: rgba(var(--senal-rgb), .2); color: #6B4500; }
@keyframes latido { 0% { box-shadow: 0 0 0 0 rgba(var(--senal-rgb), .55); } 70%, 100% { box-shadow: 0 0 0 12px rgba(var(--senal-rgb), 0); } }
.emblema__via { stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .emblema__via { stroke-dashoffset: 1; animation: dibujar 1s var(--curva) .2s forwards; }
.emblema:hover .emblema__fin { animation: rebote .5s var(--curva); transform-origin: 24.5px 9px; }
@keyframes dibujar { to { stroke-dashoffset: 0; } }
@keyframes rebote { 40% { transform: scale(1.35); } }
.recorrido__tren {
position: absolute;
top: 0;
left: max(calc(var(--via-x) - 9px), calc((100% - var(--ancho)) / 2 + var(--via-x) - 9px));
z-index: 3;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--senal);
border: 3px solid var(--blanco);
box-shadow: 0 0 0 0 rgba(var(--senal-rgb), .5), 0 4px 10px rgba(30, 27, 38, .25);
transform: translateY(var(--tren-y, 0px));
opacity: 0;
transition: opacity .3s ease;
animation: latido 2s ease-out infinite;
pointer-events: none;
}
.recorrido__tren.is-visible { opacity: 1; }
@keyframes llegada { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }
.js .aparece { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--curva) var(--d, 0ms), transform .7s var(--curva) var(--d, 0ms); }
.js .parada .aparece { transform: translateX(-22px); }
.js .aparece.is-visible { opacity: 1; transform: none; }
.situacion { transition: transform .3s var(--curva), box-shadow .3s ease, border-color .3s ease; }
.situacion:hover { transform: translateY(-5px); border-color: #CDBFEA; box-shadow: var(--elevacion); }
.js .situacion.aparece.is-visible:hover { transform: translateY(-5px); }
.situacion { position: relative; overflow: hidden; }
.situacion h3 { padding-right: 44px; }
.situacion__icono {
position: absolute;
top: 18px;
right: 16px;
width: 38px;
height: 38px;
color: #CDBFEA;
transition: transform .4s var(--curva), color .3s ease;
}
.situacion__icono svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.situacion:hover .situacion__icono { transform: rotate(-10deg) scale(1.15); color: var(--ruta); }
.situacion__boton { display: inline-flex; align-items: center; gap: 6px; }
.situacion__boton svg { transition: transform .25s var(--curva); }
.situacion__boton:hover svg { transform: translateX(3px); }
.revisamos__item { position: relative; padding-left: 64px; transition: transform .3s var(--curva); }
.revisamos__item:hover { transform: translateX(4px); }
.revisamos__check { position: absolute; left: 20px; top: 21px; width: 30px; height: 30px; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.revisamos__check circle { fill: var(--blanco); stroke: #CDBFEA; stroke-width: 1.6; }
.revisamos__check path { stroke: var(--ruta); stroke-width: 2.6; stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .revisamos__check path { stroke-dashoffset: 1; transition: stroke-dashoffset .5s var(--curva) calc(var(--d, 0ms) + 450ms); }
.js .revisamos__item.is-visible .revisamos__check path { stroke-dashoffset: 0; }
.tramos-zona { position: relative; }
.tramos-zona__via { display: none; }
.tramo-paso__nodo { display: none; }
@media (min-width: 900px) {
.tramos-zona { padding-top: 46px; }
.tramos-zona__via { display: block; position: absolute; left: 30px; right: calc(33.33% - 30px); top: 17px; height: 4px; border-radius: 2px; background: var(--ruta-tenue); overflow: hidden; }
.tramos-zona__via span { display: block; height: 100%; background: var(--ruta); transform-origin: left; transform: scaleX(1); }
.js .tramos-zona__via span { transform: scaleX(0); transition: transform 1.3s var(--curva) .3s; }
.js .tramos-zona.is-visible .tramos-zona__via span { transform: scaleX(1); }
.tramos { margin-top: 0; }
.tramo-paso__nodo { display: block; position: absolute; left: 20px; top: -38px; width: 22px; height: 22px; border-radius: 50%; background: var(--blanco); border: 4px solid var(--ruta); }
.js .tramo-paso__nodo { transform: scale(0); transition: transform .45s var(--curva) calc(var(--d, 0ms) + 500ms); }
.js .tramo-paso.is-visible .tramo-paso__nodo { transform: scale(1); }
.tramos-zona .tramo-paso:last-child .tramo-paso__nodo { background: var(--ruta); border-radius: 7px; }
}
.cuidado { position: relative; padding-left: 70px; }
.cuidado__senal { position: absolute; left: 20px; top: 22px; width: 34px; height: 34px; color: var(--senal); }
.cuidado__senal svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cuidado.is-visible .cuidado__senal { animation: sacudir .7s ease 1s 1; }
@keyframes sacudir { 20%, 60% { transform: rotate(-9deg); } 40%, 80% { transform: rotate(9deg); } }
.eleccion__op input:checked + span::before { animation: marcar .35s var(--curva); }
@keyframes marcar { 50% { transform: scale(1.25); } }
.eleccion__op span { transition: border-color .15s ease, background-color .15s ease, transform .15s ease; }
.eleccion__op:active span { transform: scale(.985); }
.pregunta-paso:not([hidden]) { animation: entrarPaso .4s var(--curva); }
@keyframes entrarPaso { from { opacity: 0; transform: translateX(16px); } }
.listo__check { width: 56px; height: 56px; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.listo__check circle { stroke: var(--wa); stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 1; animation: dibujar .6s var(--curva) .1s forwards; }
.listo__check path { stroke: var(--wa); stroke-width: 4; stroke-dasharray: 1; stroke-dashoffset: 1; animation: dibujar .4s var(--curva) .6s forwards; }
:root { interpolate-size: allow-keywords; }
.duda::details-content { block-size: 0; overflow: clip; transition: block-size .35s var(--curva), content-visibility .35s allow-discrete; }
.duda[open]::details-content { block-size: auto; }
.duda summary::after { content: "+"; transition: transform .3s var(--curva), background-color .2s ease, color .2s ease; }
.duda[open] summary::after { content: "+"; transform: rotate(45deg); background: var(--ruta); color: var(--blanco); }
.duda summary:hover { color: var(--ruta); }
.datos { position: relative; overflow: hidden; }
.datos__fila { position: relative; z-index: 1; }
.datos__trazos { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.datos__trazos path { fill: none; stroke: rgba(255, 255, 255, .07); stroke-width: 18; stroke-linejoin: round; }
.datos__trazos .datos__flujo { stroke: rgba(255, 255, 255, .28); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 24; animation: trafico 10s linear infinite; }
.datos__trazos .datos__flujo--b { animation-duration: 15s; animation-direction: reverse; }
.wa-fijo::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
border: 3px solid var(--wa);
opacity: 0;
animation: llamado 7s ease-out 3s infinite;
pointer-events: none;
}
.wa-fijo:hover::before { animation: none; }
@keyframes llamado { 0% { opacity: .75; transform: scale(1); } 18% { opacity: 0; transform: scale(1.45); } 100% { opacity: 0; transform: scale(1.45); } }
.wa-fijo svg { transition: transform .3s var(--curva); }
.wa-fijo:hover svg { transform: rotate(-12deg) scale(1.08); }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
.js .recorrido__avance { transform: scaleY(1); }
.js .palabra > span, .js .mapa__punto, .js .aparece { opacity: 1; transform: none; }
.inicio__acento .palabra > span::after, .js .mapa__trazo, .js .tramos-zona__via span, .js .tramo-paso__nodo { transform: none; }
.js .emblema__via, .js .revisamos__check path, .listo__check circle, .listo__check path { stroke-dashoffset: 0; }
.mapa__tren, .recorrido__tren, .flujo, .giro__ventana::after { display: none; }
}