/* ==========================================================================
   TransMarck · estilos
   Marca: rojo #CA0B0B, negro y blanco. Montserrat (la del logotipo) para
   titulares, Inter para el texto. El ángulo de los cortes del isotipo
   (29° desde la vertical) es el que inclina estelas, botones y bordes.
   ========================================================================== */

@font-face{ font-family:'Montserrat'; font-style:normal; font-weight:400 900; font-display:swap;
  src:url('../fonts/montserrat-normal.woff2') format('woff2'); }
@font-face{ font-family:'Montserrat'; font-style:italic; font-weight:700 900; font-display:swap;
  src:url('../fonts/montserrat-italic.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('../fonts/inter-normal.woff2') format('woff2'); }

:root{
  --rojo:#CA0B0B;          /* marca: 5,89:1 sobre blanco */
  --rojo-hover:#A80909;
  --rojo-luz:#F10D0D;      /* el rojo de marca sobre negro da 3,34: este llega a 4,5 */
  --rojo-texto:#FF4545;    /* rojo para texto chico sobre los paneles grafito: 4,5 o más */
  --negro:#0B0B0C;
  --grafito:#141518;
  --grafito-2:#1D1E22;
  --gris:#F2F2F2;          /* el gris claro del manual */
  --blanco:#FFFFFF;
  --texto:#16171A;
  --texto-2:#5A5D63;       /* 6,6:1 sobre blanco, 5,9 sobre el gris */
  --texto-osc:#A9ACB2;     /* texto secundario sobre negro */
  --linea:rgba(11,11,12,.12);
  --linea-osc:rgba(255,255,255,.12);

  --f-tit:'Montserrat', system-ui, sans-serif;
  --f-txt:'Inter', system-ui, sans-serif;

  --ancho:73.75rem;
  --margen:clamp(1.25rem, 6vw, 6.875rem);
  --sec:clamp(4.5rem, 8.5vw, 7.75rem);
  --radio:1.25rem;
  --radio-chico:.875rem;
  --nav-h:4.875rem;           /* 14 de aire arriba + la píldora de 62 + el borde */
  /* vidrio rojo: el de la cabecera, los botones rojos y la cinta */
  --vidrio-rojo:rgba(202,11,11,.7);
  --vidrio-borde:inset 0 0 0 1px rgba(255,255,255,.24), inset 0 1px 0 rgba(255,255,255,.26);
  --vidrio-blur:saturate(180%) blur(1.5rem);
  --corte:29deg;           /* inclinación de los cortes del isotipo */

  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }
/* Escala: en escritorio la base es 95 % y todo lo que está en rem baja junto,
   como si el navegador estuviera al 95 %. Lo que depende del ancho (vw) no cambia. */
@media (min-width:861px){ html{ font-size:95%; } }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + .75rem); }
body{ margin:0; font-family:var(--f-txt); font-size:1rem; line-height:1.6; color:var(--texto);
  background:var(--blanco); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }
h1,h2,h3{ font-family:var(--f-tit); margin:0; text-wrap:balance; }
p{ margin:0; text-wrap:pretty; }
button{ font:inherit; color:inherit; }
:focus-visible{ outline:.1875rem solid var(--rojo); outline-offset:.1875rem; border-radius:.375rem; }

.envoltura{ width:100%; max-width:calc(var(--ancho) + var(--margen) * 2); margin:0 auto; padding:0 var(--margen); }
.saltar{ position:absolute; left:.75rem; top:-3.75rem; z-index:9500; background:var(--blanco); color:var(--negro);
  padding:.625rem 1rem; border-radius:.625rem; font-weight:600; text-decoration:none; }
.saltar:focus{ top:.75rem; }

/* ---------- Tipografía de sección ---------- */
.volanta{ display:inline-flex; align-items:center; gap:.625rem; font:700 .75rem/1 var(--f-tit);
  letter-spacing:.16em; text-transform:uppercase; color:var(--rojo); }
.volanta::before{ content:""; width:1.375rem; height:.5625rem; background:currentColor;
  clip-path:polygon(28% 0,100% 0,72% 100%,0 100%); }
.volanta--clara{ color:var(--blanco); }
.volanta--clara::before{ background:var(--rojo-luz); }
.seguimiento .volanta--clara::before{ background:var(--blanco); }   /* sobre el rojo, el corte va en blanco */

.encabezado{ max-width:43.75rem; margin-bottom:clamp(2rem, 4vw, 3.25rem); }
.encabezado h2{ margin-top:1rem; font-size:clamp(1.875rem, 3.7vw, 3.25rem); font-weight:800; line-height:1.02; letter-spacing:-.025em; }
.encabezado__bajada{ margin-top:.875rem; font-size:clamp(.9688rem, 1.2vw, 1.0938rem); color:var(--texto-2); max-width:38.75rem; }
.encabezado--claro h2{ color:var(--blanco); }
.encabezado--claro .encabezado__bajada{ color:var(--texto-osc); }
/* servicios: la bajada en un renglón; cobertura: el título en uno */
.servicios .encabezado, .cobertura .encabezado, .horarios .encabezado{ max-width:none; }
.servicios .encabezado h2{ max-width:43.75rem; }
@media (min-width:861px){ .servicios .encabezado__bajada, .horarios .encabezado__bajada{ max-width:none; white-space:nowrap; } }
/* la de cobertura es más larga: en un renglón recién desde 1000 px, donde entra */
@media (min-width:1000px){ .cobertura .encabezado__bajada{ max-width:none; white-space:nowrap; } }

.seccion{ padding:var(--sec) 0; }

/* ---------- Botones ---------- */
.btn{ --alto:3.125rem; display:inline-flex; align-items:center; justify-content:center; gap:.625rem; height:var(--alto);
  padding:0 1.5rem; border:0; border-radius:62.4375rem; font:700 .875rem/1 var(--f-tit); letter-spacing:.01em;
  text-decoration:none; cursor:pointer; white-space:nowrap; position:relative; overflow:hidden; isolation:isolate;
  transition:transform .35s var(--ease-out), background-color .25s, color .25s, box-shadow .35s; }
.btn .ico{ width:1.25rem; height:1.25rem; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  transition:transform .35s var(--ease-out); }
.btn .ico--lleno{ fill:currentColor; stroke:none; }
/* barrido inclinado al pasar, con el ángulo del isotipo */
.btn::after{ content:""; position:absolute; inset:0 -20%; z-index:-1; background:rgba(255,255,255,.16);
  transform:translateX(-110%) skewX(calc(var(--corte) * -1)); transition:transform .55s var(--ease-out); }
.btn:hover::after{ transform:translateX(110%) skewX(calc(var(--corte) * -1)); }
.btn:hover .ico:last-child{ transform:translateX(.1875rem); }
.btn:active{ transform:scale(.97); }
.btn--rojo{ background:var(--vidrio-rojo); color:var(--blanco); box-shadow:var(--vidrio-borde), 0 1.125rem 2.5rem -1.25rem rgba(120,0,0,.75);
  -webkit-backdrop-filter:var(--vidrio-blur); backdrop-filter:var(--vidrio-blur); }
.btn--rojo:hover{ background:rgba(202,11,11,.86); }
/* sobre fondo claro el vidrio se lavaría a rosa: ahí va casi lleno */
.servicios .btn--rojo{ background:rgba(202,11,11,.94); }
.servicios .btn--rojo:hover{ background:var(--rojo-hover); }
.btn--vidrio{ background:rgba(255,255,255,.12); color:var(--blanco); box-shadow:inset 0 0 0 1px rgba(255,255,255,.35), inset 0 1px 0 rgba(255,255,255,.3);
  -webkit-backdrop-filter:var(--vidrio-blur); backdrop-filter:var(--vidrio-blur); }
.btn--vidrio:hover{ background:rgba(255,255,255,.2); }
.btn--blanco{ background:var(--blanco); color:var(--negro); }
.btn--blanco::after{ background:rgba(202,11,11,.08); }
.btn--grande{ --alto:3.5rem; padding:0 1.75rem; font-size:.9375rem; }
.btn--rastreo{ --alto:2.875rem; padding:0 1.25rem; font-size:.8438rem; background:var(--blanco); color:var(--rojo); }
.btn--rastreo:hover{ background:var(--gris); }
.btn--rastreo .ico{ width:1.125rem; height:1.125rem; }

/* ---------- Íconos propios ---------- */
.ico-tm{ width:100%; height:100%; display:block; overflow:visible; }
.ico-tm .acento{ stroke:var(--acento, var(--rojo)); }
/* dibujado al entrar: cada trazo tiene pathLength=1 */
.js [data-revela] .ico-tm path, .js [data-revela] .ico-tm circle{ stroke-dasharray:1; stroke-dashoffset:1;
  transition:stroke-dashoffset .9s var(--ease-out); }
.js [data-revela].visible .ico-tm path, .js [data-revela].visible .ico-tm circle{ stroke-dashoffset:0; }
.js [data-revela].visible .ico-tm .acento{ transition-delay:.35s; }
/* movimiento propio de cada pieza, al pasar o mientras viaja */
@keyframes girar{ to{ transform:rotate(360deg); } }
@keyframes estela{ 0%{ transform:translateX(0); opacity:1; } 50%{ transform:translateX(-.25rem); opacity:.35; } 100%{ transform:translateX(0); opacity:1; } }
@keyframes saltar{ 0%,100%{ transform:translateY(0); } 40%{ transform:translateY(-.25rem); } 60%{ transform:translateY(-.25rem); } }
@keyframes agujas{ to{ transform:rotate(360deg); } }
@keyframes lupa{ 0%,100%{ transform:translate(0,0); } 30%{ transform:translate(-.1875rem,2px); } 65%{ transform:translate(2px,-1px); } }
.ico-tm .salto, .ico-tm .lupa{ transform-box:fill-box; transform-origin:center; }
.movido .rueda, .la-fila:hover .rueda, .la-fila.activa .rueda, .viaje.anda .rueda{ animation:girar .7s linear infinite; }
.la-fila.activa .estela, .viaje.anda .estela{ animation:estela .6s var(--ease) infinite; }
.la-fila.activa .salto, .canal:hover .salto{ animation:saltar .8s var(--ease) infinite; }
.aviso:hover .agujas, .canal:hover .agujas{ animation:agujas 2.4s linear infinite; }

.insignia{ --tam:3.25rem; display:grid; place-items:center; width:var(--tam); height:var(--tam); padding:.6875rem;
  border-radius:.875rem; background:var(--rojo); color:var(--blanco); --acento:var(--blanco); flex:none; }
.insignia--grande{ --tam:4rem; padding:.8125rem; }

/* ==========================================================================
   PRECARGA: el CSS la anima y la retira; el JS sólo decide si se ve
   ========================================================================== */
.precarga{ position:fixed; inset:0; z-index:9000; display:grid; place-items:center; background:var(--negro);
  /* el borde izquierdo ya está inclinado (fuera de pantalla) y barre hacia la derecha como un corte de la T */
  clip-path:polygon(-35% 0,100% 0,100% 100%,-65% 100%);
  animation:precarga-salir .6s cubic-bezier(.7,0,.2,1) .95s forwards; }
.precarga__marca{ display:grid; justify-items:center; gap:1.625rem; }
.precarga svg{ width:7rem; height:auto; fill:var(--rojo-luz); overflow:visible; }
/* las tres piezas del isotipo entran por la diagonal del corte, una tras otra */
.pc{ opacity:0; animation:pieza .5s var(--ease-out) forwards; }
.pc--1{ animation-delay:.05s; }
.pc--2{ animation-delay:.17s; }
.pc--3{ animation-delay:.27s; }
@keyframes pieza{ from{ opacity:0; transform:translate(-4.375rem, 7.8125rem); } to{ opacity:1; transform:none; } }
.precarga__barra{ display:block; width:7.5rem; height:.1875rem; background:rgba(255,255,255,.14); overflow:hidden; }
.precarga__barra i{ display:block; height:100%; background:var(--rojo-luz); transform-origin:left; transform:scaleX(0);
  animation:barra .8s var(--ease) .15s forwards; }
@keyframes barra{ to{ transform:scaleX(1); } }
/* sale cortando en diagonal, con el ángulo de la marca */
@keyframes precarga-salir{ to{ clip-path:polygon(135% 0,100% 0,100% 100%,105% 100%); visibility:hidden; } }
.espera .precarga, .espera .precarga *{ animation-play-state:paused; }
.sin-precarga .precarga{ display:none; }
@media (prefers-reduced-motion:reduce){ .precarga{ display:none; } }

/* ==========================================================================
   CABECERA
   ========================================================================== */
.nav{ position:fixed; top:0; left:0; right:0; z-index:100; padding:.875rem var(--margen) 0; color:var(--blanco); pointer-events:none; }
/* La cabecera es una píldora de vidrio rojo que flota: logo, menú y botón en blanco */
.nav__in{ position:relative; pointer-events:auto; height:3.875rem; max-width:93.75rem; margin:0 auto; padding:0 .5625rem 0 1.625rem;
  display:flex; align-items:center; gap:1.75rem; border-radius:62.4375rem;
  background:var(--vidrio-rojo); box-shadow:var(--vidrio-borde), 0 1.125rem 2.75rem -1.5rem rgba(90,0,0,.6);
  -webkit-backdrop-filter:var(--vidrio-blur); backdrop-filter:var(--vidrio-blur); }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .nav__in{ background:rgba(202,11,11,.96); } }
.nav__logo{ display:block; width:4.25rem; flex:none; color:var(--blanco); padding:.375rem 0; }
.nav__logo svg{ width:100%; height:auto; display:block; }
.nav__menu{ display:flex; gap:.375rem; margin-left:auto; }
.nav__menu a{ position:relative; padding:.9375rem .8125rem; font:600 .875rem/1 var(--f-tit); text-decoration:none; opacity:.9; }
.nav__menu a::after{ content:""; position:absolute; left:.875rem; right:.875rem; bottom:.25rem; height:2px; background:var(--blanco);
  transform:scaleX(0); transform-origin:right; transition:transform .35s var(--ease-out); }
.nav__menu a:hover::after, .nav__menu a.activo::after{ transform:scaleX(1); transform-origin:left; }
.nav__menu a:hover, .nav__menu a.activo{ opacity:1; }
.nav__boton{ display:none; }

/* ==========================================================================
   INICIO
   ========================================================================== */
.hero{ position:relative; min-height:100vh; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end;
  color:var(--blanco); background:var(--negro); overflow:hidden; isolation:isolate; }
.hero__foto{ position:absolute; inset:0; z-index:-3; }
.hero__foto img{ width:100%; height:100%; object-fit:cover; object-position:60% 62%;
  transform:scale(1.08); animation:acercar 2.4s var(--ease-out) .2s forwards; }
@keyframes acercar{ to{ transform:scale(1); } }
.hero__velo{ position:absolute; inset:0; z-index:-2;
  background:
    linear-gradient(90deg, rgba(11,11,12,.86) 0%, rgba(11,11,12,.55) 38%, rgba(11,11,12,0) 66%),
    linear-gradient(0deg, rgba(11,11,12,.35) 0%, rgba(11,11,12,.88) 9%, rgba(11,11,12,0) 38%),   /* abajo aclara: la foto se ve detrás de la cinta */
    linear-gradient(180deg, rgba(11,11,12,.55) 0%, rgba(11,11,12,0) 22%); }
/* velo negro elegido en el laboratorio: 52 %, más fuerte a la izquierda (sólo escritorio por ahora) */
@media (min-width:861px){
  .hero__velo::after{ content:""; position:absolute; inset:0;
    background:linear-gradient(90deg, rgba(0,0,0,.52) 0%, rgba(0,0,0,.182) 70%, rgba(0,0,0,.104) 100%); }
}
/* estelas: los cortes del isotipo cruzando como velocidad */
.hero__estelas{ position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.hero__estelas i{ position:absolute; height:.875rem; width:34vw; left:-40vw; background:var(--rojo);
  transform:skewX(calc(var(--corte) * -1)); opacity:.85; animation:estela-hero 5.5s var(--ease) infinite; }
.hero__estelas i:nth-child(1){ top:calc(var(--nav-h) + 5vh); animation-delay:1.2s; }
.hero__estelas i:nth-child(2){ top:calc(var(--nav-h) + 5vh + 1.625rem); width:22vw; height:.5rem; background:var(--blanco); opacity:.5; animation-delay:1.35s; }
.hero__estelas i:nth-child(3){ top:calc(var(--nav-h) + 5vh + 2.875rem); width:12vw; height:.3125rem; animation-delay:1.5s; }
@keyframes estela-hero{ 0%{ transform:translateX(0) skewX(calc(var(--corte) * -1)); } 38%,100%{ transform:translateX(180vw) skewX(calc(var(--corte) * -1)); } }

/* en pantallas anchas el texto arranca más a la izquierda para no pisar el camión */
.hero .envoltura{ max-width:none; padding-left:max(var(--margen), calc((100% - var(--ancho)) / 2)); }
/* el bloque arranca en la misma línea que el resto del sitio; a la derecha sigue llegando hasta el margen */
.hero__texto{ padding-top:calc(var(--nav-h) + clamp(1rem, 4vh, 2.5rem)); margin-bottom:clamp(1rem, 6vh, 4.5rem); }  /* sube el bloque sobre las cifras */
/* en escritorio el bloque va a media altura, entre la cabecera y las cifras */
@media (min-width:861px){ .hero__texto{ margin-top:auto; margin-bottom:auto; padding-top:var(--nav-h); } }
.hero__titulo{ margin-top:clamp(.75rem, 2.2vh, 1.375rem); font-size:clamp(2.25rem, min(4.4vw, 8vh), 4.75rem); font-weight:900; line-height:1.02; letter-spacing:-.035em;
  text-transform:uppercase; }
.hero__titulo em{ font-style:italic; color:var(--rojo-luz); padding-right:.06em; }
.linea{ display:block; overflow:hidden; white-space:nowrap; padding-bottom:.16em; margin-bottom:-.12em; }  /* lugar para la cola de la Q */
.linea > span{ display:inline-block; transform:translateY(105%); animation:subir .9s var(--ease-out) forwards; }
.linea:nth-child(2) > span{ animation-delay:.1s; }
@keyframes subir{ to{ transform:none; } }
.hero__bajada{ margin-top:clamp(.875rem, 2.6vh, 1.5rem); max-width:30rem; font-size:clamp(.9375rem, min(1.25vw, 2.1vh), 1.125rem); color:rgba(255,255,255,.88); }
.hero__acciones{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:clamp(1.125rem, 3.4vh, 2.125rem); }
[data-entra]{ opacity:0; transform:translateY(1.125rem); animation:entrar .8s var(--ease-out) forwards; }
.hero__bajada[data-entra]{ animation-delay:.3s; } .hero__acciones[data-entra]{ animation-delay:.42s; }
.volanta[data-entra]{ animation-delay:.05s; } .cifras[data-entra]{ animation-delay:.6s; }
@keyframes entrar{ to{ opacity:1; transform:none; } }
/* con precarga, la entrada del hero espera a que se abra la cortina */
html:not(.sin-precarga) .hero .linea > span, html:not(.sin-precarga) .hero [data-entra],
html:not(.sin-precarga) .hero__foto img{ animation-delay:calc(var(--d, 0s) + 1.15s); }
html:not(.sin-precarga) .linea:nth-child(2) > span{ --d:.1s; }
html:not(.sin-precarga) .hero__bajada[data-entra]{ --d:.3s; } html:not(.sin-precarga) .hero__acciones[data-entra]{ --d:.42s; }
html:not(.sin-precarga) .cifras[data-entra]{ --d:.6s; }
.espera .hero *{ animation-play-state:paused !important; }

.hero__datos{ display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; padding-top:clamp(1.25rem, 4.5vh, 3.5rem); padding-bottom:clamp(1.125rem, 3.5vh, 2.5rem); }
.cifras{ display:flex; gap:clamp(1.5rem, 4vw, 4rem); margin:0; padding-top:clamp(.875rem, 2.4vh, 1.5rem); border-top:1px solid rgba(255,255,255,.22); }
.cifras div{ max-width:13.125rem; }
.cifras dt{ font:900 clamp(1.75rem, min(2.8vw, 4.8vh), 2.625rem)/1 var(--f-tit); letter-spacing:-.03em; }
.cifras dd{ margin:.5rem 0 0; font-size:.8125rem; line-height:1.4; color:rgba(255,255,255,.75); }
/* la palabra que acompaña al número, chica y al lado */
.cifras dt small{ margin-left:.4375rem; font:700 .8125rem/1 var(--f-tit); letter-spacing:.02em; color:var(--blanco); }
.cifras dd.una-linea{ white-space:nowrap; }
.cifras div:has(.una-linea){ max-width:none; }

/* ---------- Cinta de destinos ---------- */
.cinta{ position:relative; background:rgba(202,11,11,.3); color:var(--blanco); overflow:hidden; padding:.6875rem 0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(255,255,255,.08);
  -webkit-backdrop-filter:saturate(140%) blur(.3125rem); backdrop-filter:saturate(140%) blur(.3125rem); }   /* la foto se ve detrás, apenas desenfocada */
.cinta__pista{ display:flex; align-items:center; gap:2.125rem; width:max-content; animation:cinta 46s linear infinite; }
.cinta span{ font:800 italic clamp(.75rem, .95vw, .875rem)/1 var(--f-tit); text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; }
.cinta i{ width:.3125rem; height:.3125rem; background:var(--blanco); opacity:.75; flex:none; }
@keyframes cinta{ to{ transform:translateX(-50%); } }

/* ==========================================================================
   SERVICIOS: lista y foto (la línea de avance se frena sólo sobre la lista)
   ========================================================================== */
.la{ display:grid; grid-template-columns:1fr 1.05fr; gap:1.75rem; align-items:stretch; }
.la-lista{ display:grid; gap:.375rem; }
.la-filas{ display:grid; gap:.375rem; }
.la-fila__foto, .la-puntos{ display:none; }   /* sólo en el carrusel del celular */
.la-fila{ position:relative; display:grid; grid-template-columns:1.875rem 2.875rem 1fr; gap:.875rem; align-items:center; text-align:left; padding:.8125rem 1.125rem; border:0; border-radius:1rem; background:transparent; cursor:pointer; overflow:hidden; transition:background-color .3s; }
.la-fila:hover{ background:var(--gris); }
.la-fila.activa{ background:var(--negro); color:#fff; }
.la-num{ font:700 .8125rem var(--f-tit); letter-spacing:.12em; color:var(--rojo); }
.la-ico{ width:2.875rem; height:2.875rem; padding:.625rem; border-radius:.875rem; background:var(--gris); color:var(--negro); --acento:var(--rojo); transition:background-color .3s, color .3s; }
.la-fila.activa .la-ico{ background:var(--rojo); color:#fff; --acento:#fff; }
.la-txt strong{ display:block; font:800 1.125rem/1.15 var(--f-tit); letter-spacing:-.015em; }
.la-txt span{ display:block; max-height:0; overflow:hidden; opacity:0; font-size:.875rem; color:var(--texto-osc); transition:max-height .45s var(--ease-out), opacity .35s, margin .35s; }
.la-fila.activa .la-txt span{ max-height:3.75rem; opacity:1; margin-top:.375rem; }
/* el avance recorre todo el marco del recuadro negro en los mismos 4 s */
.la-barra{ position:absolute; inset:1px; width:calc(100% - 2px); height:calc(100% - 2px); overflow:visible; pointer-events:none; }
.la-barra rect{ fill:none; stroke:var(--rojo-luz); stroke-width:2; stroke-dasharray:1; stroke-dashoffset:1; }
.la-fila:not(.activa) .la-barra{ visibility:hidden; }   /* sin el puntito del arranque en las filas quietas */
.la-fila.activa .la-barra rect{ animation:la-avance 4s linear forwards; }
.la.pausa .la-barra rect{ animation-play-state:paused; }
@keyframes la-avance{ to{ stroke-dashoffset:0; } }
.la-fotos{ position:relative; border-radius:var(--radio); overflow:hidden; min-height:33.75rem; background:var(--negro); }
.la-foto{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.06); transition:opacity .6s, transform 1.2s var(--ease-out); }
.la-foto.activa{ opacity:1; transform:none; }
.la-corte{ position:absolute; inset:0 -30%; background:var(--rojo); transform:translateX(-120%) skewX(-29deg); pointer-events:none; }
.la-corte.pasa{ animation:la-corte .7s cubic-bezier(.7,0,.2,1); }
@keyframes la-corte{ 0%{ transform:translateX(-120%) skewX(-29deg); } 100%{ transform:translateX(120%) skewX(-29deg); } }


.la-cta{ margin-top:.75rem; justify-self:start; }
.la-fotos{ min-height:30rem; }

/* ==========================================================================
   SEGUIMIENTO
   ========================================================================== */
.seguimiento{ position:relative; background:var(--rojo); color:var(--blanco); padding:clamp(3.5rem, 6vw, 5.25rem) 0; overflow:hidden; isolation:isolate; }
/* un corte del isotipo gigante, de fondo */
.seguimiento::before{ content:""; position:absolute; z-index:-1; top:-20%; right:4%; width:38%; height:140%;
  background:linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,0)); transform:skewX(calc(var(--corte) * -1)); }
.seguimiento__in{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(2.5rem, 6vw, 6rem); align-items:center; }
.seguimiento h2{ margin-top:1rem; font-size:clamp(2.125rem, 4.3vw, 3.75rem); font-weight:900; line-height:1.05; letter-spacing:-.035em; text-transform:uppercase; }
.seguimiento__texto > p:not(.volanta){ margin:1.125rem 0 1.75rem; font-size:clamp(.9688rem, 1.25vw, 1.125rem); color:rgba(255,255,255,.9); max-width:29.375rem; }
.seguimiento .btn--blanco{ padding-right:.4375rem; background:var(--negro); color:var(--blanco); box-shadow:0 1.125rem 2.5rem -1.25rem rgba(0,0,0,.7); }
.seguimiento .btn--blanco:hover{ background:var(--grafito-2); }
.seguimiento .btn--blanco::after{ background:rgba(255,255,255,.1); }
/* la flecha va aparte, en un círculo blanco */
.seguimiento .btn--blanco .ico:last-child{ box-sizing:content-box; width:1rem; height:1rem; padding:.8125rem; border-radius:50%; background:var(--blanco); color:var(--rojo); }
.viaje{ background:var(--negro); border-radius:var(--radio); padding:clamp(1.75rem, 3.5vw, 2.5rem) clamp(1rem, 2.5vw, 1.75rem); box-shadow:0 2.5rem 5rem -2.5rem rgba(0,0,0,.6); --viaje:1.4s; }
/* el camión avanza por etapas: cada una se enciende al llegar (JS pone --p y las clases) */
.viaje__pista{ position:relative; padding-top:3.875rem; --p:0; }
.viaje__pista::before, .viaje__relleno{ content:""; position:absolute; top:4.3125rem; left:16.667%; height:.1875rem; border-radius:.1875rem; }
.viaje__pista::before{ right:16.667%; background:rgba(255,255,255,.14); }
.viaje__relleno{ width:calc(66.667% * var(--p)); background:var(--rojo-luz); transition:width var(--viaje) cubic-bezier(.65,0,.35,1); }
.viaje__movil{ position:absolute; top:.875rem; left:calc(16.667% + 66.667% * var(--p)); width:3.25rem; height:3.25rem; margin-left:-1.625rem;
  color:var(--blanco); --acento:var(--rojo-luz); transition:left var(--viaje) cubic-bezier(.65,0,.35,1); }
.viaje.reinicio *, .viaje.reinicio *::before{ transition:none !important; }
.viaje__etapas{ display:grid; grid-template-columns:repeat(3, 1fr); margin:0; padding:0; list-style:none; counter-reset:e; }
.viaje__etapas li{ counter-increment:e; display:grid; align-content:start; justify-items:center; gap:.375rem; text-align:center; color:var(--texto-osc); transition:color .4s; }
.viaje__etapas li::before{ content:""; width:1rem; height:1rem; margin-bottom:.875rem; border-radius:50%; background:var(--grafito-2);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.22); transition:background-color .4s, box-shadow .4s; }
.viaje__etapas b{ font:800 1rem/1.1 var(--f-tit); }
.viaje__etapas b::before{ content:"0" counter(e); display:block; margin-bottom:.375rem; font-size:.75rem; letter-spacing:.14em; opacity:.7; }
.viaje__etapas small{ max-width:8.125rem; font-size:.8125rem; line-height:1.35; }
.viaje__etapas li.hecho{ color:#D9DADD; }
.viaje__etapas li.hecho::before{ background:var(--rojo-luz); box-shadow:none; }
.viaje__etapas li.actual{ color:var(--blanco); }
.viaje__etapas li.actual b::before{ color:var(--rojo-texto); opacity:1; }
.viaje__etapas li.actual::before{ animation:latir 1.2s ease-out infinite; }
@keyframes latir{ 0%{ box-shadow:0 0 0 0 rgba(241,13,13,.55); } 100%{ box-shadow:0 0 0 .875rem rgba(241,13,13,0); } }
/* ==========================================================================
   COBERTURA
   ========================================================================== */
.cobertura{ background:var(--negro); color:var(--blanco); position:relative; overflow:hidden; }
.cobertura__in{ display:block; }
/* el mapa llena todo el rectángulo; la columna de líneas va encima, a la izquierda */
.mapa{ position:relative; height:clamp(28.75rem, 44vw, 37.5rem); border-radius:var(--radio); background:var(--grafito); box-shadow:inset 0 0 0 1px var(--linea-osc); overflow:hidden; }
.mapa__svg{ position:absolute; inset:0; }
.mapa__svg{ width:100%; height:100%; display:block; }
.mapa__nota{ position:absolute; right:1.375rem; bottom:1rem; font-size:.75rem; color:var(--texto-osc); letter-spacing:.04em; }
/* piezas del mapa (las crea el JS) */
.m-punto{ fill:#fff; }
/* --k: cuánto se acercó la cámara (1 = mapa entero). Letras, puntos y trazos se compensan para mantener su tamaño */
.mapa__svg{ --k:1; }
.m-limite{ fill:none; stroke:rgba(255,255,255,.22); stroke-width:calc(1.2px * var(--k)); stroke-dasharray:3 5; }
.m-limite.er{ fill:rgba(255,255,255,.035); stroke:rgba(255,255,255,.5); stroke-width:calc(1.5px * var(--k)); stroke-dasharray:none; }
.m-provincia{ font:700 calc(.8125rem * var(--k)) var(--f-tit); letter-spacing:.32em; fill:rgba(255,255,255,.28); text-transform:uppercase; }
.m-punto.er{ fill:#fff; }
.m-ruta{ fill:none; stroke:var(--rojo-luz); stroke-width:calc(.1375rem * var(--k)); opacity:.9; stroke-linecap:round; stroke-dasharray:var(--l) var(--l); stroke-dashoffset:var(--l);
  transition:stroke-dashoffset 1.6s var(--ease-out) var(--retraso, 0s), opacity .4s, stroke-width .3s;  /* el retraso es sólo para el dibujo inicial */ }
.m-ruta.linea-er{ stroke:var(--blanco); stroke-width:calc(1.3px * var(--k)); opacity:.38; }
.mapa.dibujado .m-ruta{ stroke-dashoffset:0; }
.m-ciudad circle{ r:calc(.3125rem * var(--k)); fill:var(--negro); stroke:var(--blanco); stroke-width:calc(2px * var(--k)); transition:opacity .4s; }
.m-ciudad text{ font:600 calc(.8438rem * var(--k)) var(--f-txt); fill:var(--blanco); paint-order:stroke; stroke:var(--grafito); stroke-width:calc(.25rem * var(--k)); transition:opacity .4s; }
.m-ciudad.chica text{ opacity:0; }
.m-ciudad.chica circle{ r:calc(.2125rem * var(--k)); }
.m-centro .anillo{ fill:none; stroke:var(--rojo-luz); stroke-width:calc(2px * var(--k)); r:calc(.5625rem * var(--k)); transform-box:fill-box; transform-origin:center; animation:anillo 2.4s var(--ease-out) infinite; }
.m-centro .anillo:nth-of-type(2){ animation-delay:1.2s; }
@keyframes anillo{ from{ transform:scale(.4); opacity:1; } to{ transform:scale(3.2); opacity:0; } }
.m-centro .nucleo{ r:calc(.5rem * var(--k)); fill:var(--rojo-luz); stroke:var(--blanco); stroke-width:calc(.1875rem * var(--k)); }
.m-centro text{ font:800 calc(.9375rem * var(--k)) var(--f-tit); fill:var(--blanco); letter-spacing:.06em; text-transform:uppercase; paint-order:stroke; stroke:var(--grafito); stroke-width:calc(.3125rem * var(--k)); }
.m-movil{ will-change:transform; }
.m-movil .cuerpo{ fill:var(--rojo-luz); stroke:var(--blanco); stroke-width:2; }  /* el grupo se escala con --k desde el JS */
.m-movil.er .cuerpo{ fill:var(--blanco); stroke:var(--rojo-luz); }
/* filtro de una línea */
.mapa[data-ver]:not([data-ver="todo"]) .m-ruta:not(.activa){ opacity:.06; }
.mapa[data-ver]:not([data-ver="todo"]) .m-movil:not(.activa){ visibility:hidden; }
.mapa[data-ver]:not([data-ver="todo"]) .m-ciudad:not(.activa){ opacity:.15; }
.mapa[data-ver]:not([data-ver="todo"]) .m-ciudad.activa text{ opacity:1; }
.mapa[data-ver]:not([data-ver="todo"]) .m-ciudad.activa circle{ stroke:var(--rojo-luz); }
.mapa[data-ver]:not([data-ver="todo"]) .m-ruta.activa{ stroke-width:calc(1.8px * var(--k)); opacity:.9; }
.m-ciudad.larga circle{ stroke:var(--rojo-luz); }
.m-ciudad.entrega circle{ fill:var(--blanco); }
.m-ciudad.larga.entrega circle{ fill:var(--rojo-luz); }
.m-ciudad.resalta circle{ r:calc(.4375rem * var(--k)); fill:var(--rojo-luz); }
.m-ciudad.resalta text{ opacity:1; }

.red__pestanas{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1rem; }
.red__tabs{ display:contents; }   /* en el celular es una fila que se desliza */
.red__pestanas button{ min-height:2.75rem; padding:0 1rem; border-radius:62.4375rem; border:0; cursor:pointer;
  background:rgba(255,255,255,.06); color:var(--blanco); font:600 .875rem/1 var(--f-tit);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), inset 0 1px 0 rgba(255,255,255,.12);
  -webkit-backdrop-filter:var(--vidrio-blur); backdrop-filter:var(--vidrio-blur);
  transition:background-color .25s, color .25s, box-shadow .25s; }
.red__pestanas button:hover{ background:rgba(255,255,255,.12); }
.red__pestanas button[aria-pressed="true"]{ background:var(--vidrio-rojo); box-shadow:var(--vidrio-borde), 0 .875rem 1.875rem -1.125rem rgba(202,11,11,.9); }
/* buscador de destinos: al elegir uno, el mapa va a la línea que lo cubre */
.buscador{ position:relative; margin-left:auto; width:15.625rem; }
.buscador__etiqueta{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.buscador__lupa{ position:absolute; left:1rem; top:50%; width:1.125rem; height:1.125rem; margin-top:-.5625rem; z-index:1; fill:none; stroke:var(--rojo-luz); stroke-width:2.2; stroke-linecap:round; pointer-events:none; }   /* encima del vidrio del campo */
.buscador input{ width:100%; height:2.75rem; padding:0 1rem 0 2.625rem; border:0; border-radius:62.4375rem; font:600 .875rem var(--f-tit); color:var(--blanco);
  background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), inset 0 1px 0 rgba(255,255,255,.12);
  -webkit-backdrop-filter:var(--vidrio-blur); backdrop-filter:var(--vidrio-blur); outline:none; transition:box-shadow .25s, background-color .25s; -webkit-appearance:none; appearance:none; }
.buscador input::placeholder{ color:var(--texto-osc); }
.buscador input::-webkit-search-cancel-button{ -webkit-appearance:none; }
.buscador input:focus{ background:rgba(255,255,255,.1); box-shadow:inset 0 0 0 1.5px var(--rojo-luz); }
.buscador__lista{ position:absolute; z-index:6; top:calc(100% + .5rem); right:0; width:min(20rem, 100vw - 2.5rem); max-height:20rem; overflow:auto; margin:0; padding:.375rem; list-style:none;
  border-radius:var(--radio-chico); background:rgba(29,30,34,.97); box-shadow:inset 0 0 0 1px var(--linea-osc), 0 1.875rem 3.75rem -1.25rem rgba(0,0,0,.8); }
.buscador__lista li{ display:flex; justify-content:space-between; align-items:baseline; gap:.75rem; padding:.625rem .75rem; border-radius:.625rem; cursor:pointer; font-size:.9062rem; color:#E7E8EA; }
.buscador__lista li small{ flex:none; font:700 .75rem var(--f-tit); color:var(--rojo-texto); }
.buscador__lista li[aria-selected="true"], .buscador__lista li:hover{ background:rgba(255,255,255,.08); color:var(--blanco); }
.buscador__lista li.vacio{ display:block; cursor:default; color:var(--texto-osc); font-size:.8438rem; }
.buscador__lista li.vacio:hover{ background:none; }
.red__grupo li.elegido{ background:rgba(241,13,13,.16); color:var(--blanco); }
.red__grupo li.elegido::before{ background:var(--rojo-luz); }
.red__listas{ position:absolute; z-index:2; top:clamp(.75rem, 1.4vw, 1.125rem); bottom:clamp(.75rem, 1.4vw, 1.125rem); left:clamp(.75rem, 1.4vw, 1.125rem); width:13.125rem;
  display:flex; flex-direction:column; gap:.5rem; min-width:0; overflow:auto; scrollbar-width:none; }
.red__grupo{ border-radius:var(--radio-chico); background:rgba(29,30,34,.92); -webkit-backdrop-filter:blur(.5rem); backdrop-filter:blur(.5rem); box-shadow:inset 0 0 0 1px var(--linea-osc); padding:.75rem .875rem; cursor:pointer;
  display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:2px .625rem; transition:background-color .3s, box-shadow .3s; }
.red__grupo:hover{ background:#26272C; }
.red__grupo h3{ display:flex; flex-direction:column; gap:2px; font-size:.9688rem; font-weight:800; letter-spacing:-.01em; }
.red__grupo h3 small{ font:500 .7812rem var(--f-txt); color:var(--texto-osc); }
.red__grupo .cuenta{ font:700 .7812rem var(--f-tit); color:var(--rojo-texto); white-space:nowrap; }
.red__grupo ul{ display:none; margin:0; padding:0; list-style:none; }
/* con una línea elegida: sólo ella, vertical, con sus destinos uno debajo del otro y el total al final */
.red[data-ver]:not([data-ver="todo"]) .red__grupo:not(.activo){ display:none; }
.red__grupo.activo{ flex:1; display:flex; flex-direction:column; align-items:stretch; gap:.625rem; padding:1rem; cursor:default;
  background:rgba(29,30,34,.94); box-shadow:inset 0 0 0 1.5px var(--rojo-luz); }
.red__grupo.activo ul{ display:grid; gap:2px; animation:entrar .5s var(--ease-out) both; }
.red__grupo.activo .cuenta{ margin-top:auto; padding-top:.75rem; border-top:1px solid var(--linea-osc); font-size:.8125rem; }
.red__grupo li{ position:relative; padding:.3125rem .5rem .3125rem 1.375rem; border-radius:.5rem; font-size:.8438rem; line-height:1.3; color:#E7E8EA; cursor:default; transition:background-color .2s, color .2s; }
.red__grupo li::before{ content:""; position:absolute; left:.5rem; top:50%; width:.375rem; height:.375rem; margin-top:-.1875rem; border-radius:50%; box-shadow:inset 0 0 0 1.5px var(--rojo-luz); }
.red__grupo li:hover{ background:rgba(255,255,255,.07); color:var(--blanco); }
.red__grupo li:hover::before{ background:var(--rojo-luz); }

/* ==========================================================================
   HORARIOS
   ========================================================================== */
.horarios{ background:var(--gris); }
.tabla-horarios{ border-radius:var(--radio); background:var(--blanco); overflow:hidden; box-shadow:0 1.875rem 3.75rem -2.8125rem rgba(11,11,12,.4); }
.fila{ display:grid; grid-template-columns:1.25fr 1.6fr .8fr .8fr .8fr; align-items:center; gap:1rem; padding:1.125rem 1.75rem; border-top:1px solid var(--linea);
  transition:background-color .25s; }
.fila:hover:not(.fila--cabeza){ background:#FAFAFA; }
.fila--cabeza{ border-top:0; padding-top:1.125rem; padding-bottom:1.125rem; background:var(--negro); color:var(--blanco);
  font:700 .75rem/1.2 var(--f-tit); letter-spacing:.12em; text-transform:uppercase; }
.fila span{ font-size:.9375rem; }
.fila__destino{ font:800 1.1875rem/1.1 var(--f-tit) !important; letter-spacing:-.02em; position:relative; padding-left:1.25rem; }
.fila__destino::before{ content:""; position:absolute; left:0; top:50%; width:.625rem; height:1rem; margin-top:-.5rem; background:var(--rojo);
  clip-path:polygon(40% 0,100% 0,60% 100%,0 100%); }
.fila span[data-r="Sale hacia"], .fila span[data-r="Sale desde"], .fila span[data-r="Llega"]{ font:700 1rem/1 var(--f-tit); font-variant-numeric:tabular-nums; }
.horarios__extra{ display:grid; grid-template-columns:1fr 1fr; gap:1.125rem; margin-top:1.125rem; }
.aviso{ display:flex; align-items:center; gap:1.375rem; padding:1.625rem 1.875rem; border-radius:var(--radio); background:var(--rojo); color:var(--blanco); }
.aviso .insignia{ background:rgba(0,0,0,.2); --acento:var(--blanco); }
.aviso__hora{ font:900 1.625rem/1 var(--f-tit); letter-spacing:-.02em; white-space:nowrap; }
.aviso p{ font-size:.9688rem; color:rgba(255,255,255,.92); }
.aviso strong{ color:var(--blanco); }
.aviso--oscuro{ background:var(--negro); }
.aviso--oscuro .insignia{ background:var(--rojo); --acento:var(--blanco); }
.aviso--oscuro .aviso__hora{ font-size:1.375rem; line-height:1.05; }

/* ==========================================================================
   EMPRESA
   ========================================================================== */
.empresa__in{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(2.25rem, 6vw, 5.5rem); align-items:center; }
.empresa__foto{ margin:0; position:relative; border-radius:var(--radio); overflow:hidden; aspect-ratio:4/3.4; }
.empresa__foto img{ width:100%; height:100%; object-fit:cover; object-position:40% 50%; }
.empresa__foto::after{ content:""; position:absolute; left:-6%; bottom:1.625rem; width:46%; height:1rem; background:var(--rojo); transform:skewX(calc(var(--corte) * -1)); }
.empresa h2{ margin-top:1rem; font-size:clamp(1.875rem, 3.4vw, 2.875rem); font-weight:800; line-height:1.02; letter-spacing:-.025em; }
.empresa__texto > p:not(.volanta){ margin-top:1.125rem; color:var(--texto-2); font-size:1.0312rem; text-wrap:pretty; }   /* sin palabra sola en el último renglón */
.puntos{ margin:1.875rem 0 0; padding:0; list-style:none; display:grid; gap:1rem; }
.puntos li{ display:flex; gap:1rem; align-items:center; font-size:.9688rem; color:var(--texto-2); }
.puntos li strong{ color:var(--texto); }
.puntos .ico-tm{ width:2.75rem; height:2.75rem; flex:none; padding:.5625rem; border-radius:.75rem; background:var(--rojo); color:var(--blanco); --acento:var(--blanco); }

/* ==========================================================================
   CONTACTO
   ========================================================================== */
.contacto{ position:relative; background:var(--negro); color:var(--blanco); padding:var(--sec) 0; overflow:hidden; isolation:isolate; }
.contacto__in{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(2.5rem, 6vw, 6rem); align-items:center; }
.contacto h2{ margin-top:1rem; font-size:clamp(2.375rem, 4.4vw, 4rem); font-weight:900; line-height:1.04; letter-spacing:-.035em; text-transform:uppercase; }   /* aire para que las tildes no toquen el renglón de arriba */
.contacto h2 em{ font-style:italic; color:var(--rojo-luz); }
.contacto__titulo > p:not(.volanta){ margin-top:1.25rem; font-size:1.0625rem; color:rgba(255,255,255,.88); white-space:nowrap; }
.contacto__datos{ display:grid; gap:.625rem; }
.canal{ display:grid; grid-template-columns:3rem 1fr; grid-template-rows:auto auto; column-gap:1.125rem; align-items:center;
  padding:1.125rem 1.375rem; border-radius:var(--radio-chico); background:var(--grafito); box-shadow:inset 0 0 0 1px var(--linea-osc); text-decoration:none;
  transition:background-color .3s, transform .4s var(--ease-out); }
a.canal:hover{ background:var(--grafito-2); transform:translateX(.25rem); }
.canal .ico-tm{ grid-row:span 2; width:3rem; height:3rem; padding:.625rem; border-radius:.75rem; background:var(--rojo); color:var(--blanco); --acento:var(--blanco); }
.ico-tm .lleno{ fill:currentColor; stroke:none; }
.canal__etiqueta{ font:700 .75rem/1.2 var(--f-tit); letter-spacing:.14em; text-transform:uppercase; color:var(--texto-osc); }
.canal__valor{ margin-top:.25rem; font:700 1.0625rem/1.3 var(--f-tit); }

/* ==========================================================================
   PIE
   ========================================================================== */
.pie{ background:var(--negro); color:var(--blanco); padding:4rem 0 2.125rem; border-top:1px solid var(--linea-osc); }
.pie__in{ display:grid; grid-template-columns:auto 1fr; gap:1.75rem 3rem; align-items:center; }
.pie__logo{ width:7.375rem; display:block; }
.pie__logo svg{ width:100%; height:auto; display:block; }
.pie__nav{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.25rem .375rem; }
.pie__nav a{ padding:.9375rem .75rem; font:600 .9375rem/1 var(--f-tit); text-decoration:none; color:var(--texto-osc); transition:color .2s; }
.pie__nav a:hover{ color:var(--blanco); }
.pie__base{ grid-column:1 / -1; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:.875rem;
  padding-top:1.625rem; padding-right:5.25rem; border-top:1px solid var(--linea-osc); font-size:.875rem; color:var(--texto-osc); }
/* el botón flotante vive en la esquina: la firma no queda debajo */
.firma{ display:inline-flex; align-items:center; gap:.625rem; min-height:2.75rem; text-decoration:none; color:var(--texto-osc); transition:color .25s; }
.firma:hover{ color:var(--blanco); }
.firma__logo{ height:1.0625rem; aspect-ratio:3562/1014; background:currentColor;
  -webkit-mask:url('../img/crossity.svg') center/contain no-repeat; mask:url('../img/crossity.svg') center/contain no-repeat; }

/* ---------- Botón flotante de WhatsApp ---------- */
.flotante{ position:fixed; right:1.375rem; bottom:1.375rem; z-index:90; width:3.75rem; height:3.75rem; border-radius:50%; display:grid; place-items:center;
  background:rgba(202,11,11,.86); color:var(--blanco); box-shadow:var(--vidrio-borde), 0 1rem 2.125rem -.75rem rgba(202,11,11,.85);
  -webkit-backdrop-filter:var(--vidrio-blur); backdrop-filter:var(--vidrio-blur);
  transform:scale(0); transition:transform .5s var(--ease-out), background-color .25s; }
.flotante.visible{ transform:scale(1); }
.flotante:hover{ background:var(--rojo-hover); }
.flotante svg{ width:1.875rem; height:1.875rem; fill:currentColor; }

/* ==========================================================================
   APARICIÓN AL BAJAR (la clase .js la pone el guion: sin JS se ve todo)
   ========================================================================== */
.js [data-revela]{ opacity:0; transform:translateY(2.125rem); transition:opacity .9s var(--ease-out), transform 1s var(--ease-out); }
.js [data-revela].visible{ opacity:1; transform:none; }
/* la foto de la empresa se destapa con un corte inclinado */
.js .empresa__foto[data-revela]{ clip-path:polygon(0 0,0 0,-20% 100%,-20% 100%); transform:none; opacity:1;
  transition:clip-path 1.2s cubic-bezier(.7,0,.2,1); }
.js .empresa__foto[data-revela].visible{ clip-path:polygon(0 0,120% 0,100% 100%,-20% 100%); }

/* ==========================================================================
   MOBILE: corte en 53.75rem (la tablet vertical queda del lado mobile)
   ========================================================================== */
@media (max-width:1100px){
  .nav__menu a{ padding:.9375rem .5625rem; font-size:.875rem; }
  .cobertura__in{ grid-template-columns:1fr; }
  .buscador{ width:100%; margin-left:0; }
}
@media (max-width:860px){
  :root{ --nav-h:4rem; --radio:1.125rem; }   /* 10 de aire + la píldora de 54 */
  .nav{ padding:.625rem .75rem 0; }
  .nav__in{ height:3.375rem; padding:0 .375rem 0 1.125rem; }
  body{ font-size:1rem; }
  .nav__logo{ width:4.125rem; }
  .nav__in{ gap:.625rem; }
  /* el menú se abre debajo de la píldora, con el mismo rojo (el vidrio la vuelve contenedor: va en absolute) */
  .nav__menu{ position:absolute; top:calc(100% + .5rem); left:0; right:0; flex-direction:column; gap:0; padding:.5rem 1.375rem 1.125rem;
    border-radius:1.5rem; background:rgba(202,11,11,.97); box-shadow:0 1.875rem 2.5rem -1.25rem rgba(90,0,0,.6);
    opacity:0; visibility:hidden; transform:translateY(-.625rem); transition:opacity .3s, transform .35s var(--ease-out), visibility 0s .35s; }
  .nav__menu a{ padding:1rem .25rem; font-size:1.25rem; font-weight:700; border-bottom:1px solid rgba(255,255,255,.2); }
  .nav__menu a:last-child{ border-bottom:0; }
  .nav__menu a::after{ display:none; }
  .nav.abierta .nav__menu{ opacity:1; visibility:visible; transform:none; transition:opacity .3s, transform .35s var(--ease-out); }
  .btn--rastreo{ margin-left:auto; --alto:2.75rem; padding:0 .875rem; font-size:.8125rem; }
  .nav__boton{ display:grid; place-content:center; gap:.375rem; width:2.75rem; height:2.75rem; border:0; background:transparent; cursor:pointer; flex:none; }
  .nav__boton span{ width:1.5rem; height:2px; background:currentColor; transition:transform .3s var(--ease-out); }
  .nav.abierta .nav__boton span:first-child{ transform:translateY(.25rem) rotate(45deg); }
  .nav.abierta .nav__boton span:last-child{ transform:translateY(-.25rem) rotate(-45deg); }

  .hero{ justify-content:flex-start; }
  .hero__foto img{ object-position:50% 100%; }
  .hero__velo{ background:linear-gradient(180deg, rgba(11,11,12,.78) 0%, rgba(11,11,12,.35) 46%, rgba(11,11,12,0) 60%, rgba(11,11,12,.85) 94%, rgba(11,11,12,.4) 100%); }
  .hero__texto{ padding-top:calc(var(--nav-h) + 1.875rem); }
  .hero__titulo{ font-size:clamp(2.625rem, 12.5vw, 4.125rem); }
  .hero .btn--rojo{ background:rgba(202,11,11,.88); }   /* en el celular cae sobre la lona roja del camión */
  .linea{ white-space:normal; }
  .hero__titulo{ line-height:.98; }
  .hero__bajada{ margin-top:1.125rem; }
  .hero__acciones{ margin-top:1.5rem; }
  .hero__acciones .btn{ flex:1 1 auto; }
  .solo-escritorio{ display:none !important; }
  .hero__bajada{ font-size:.9688rem; max-width:20.625rem; }
  .hero__titulo{ margin-top:1rem; }
  .hero__datos{ margin-top:auto; padding-top:1.5rem; padding-bottom:4.5rem; }   /* abajo queda el lugar del botón de WhatsApp */
  .cifras{ width:100%; gap:.625rem; justify-content:space-between; }
  .cifras dt{ font-size:1.75rem; white-space:nowrap; }
  .cifras dt small{ margin-left:.25rem; font-size:.6875rem; }
  .cifras dd{ font-size:.75rem; }
  .cifras dd.una-linea{ white-space:normal; }   /* en el celular no entra en un renglón */
  .hero__estelas i:nth-child(1){ top:56%; } .hero__estelas i:nth-child(2){ top:calc(56% + 1.25rem); } .hero__estelas i:nth-child(3){ top:calc(56% + 2.25rem); }

  .cinta{ padding:.5625rem 0; }
  /* servicios: un carrusel de tarjetas que se desliza con el dedo, cada una con su foto */
  .la{ grid-template-columns:1fr; gap:0; }
  .la-fotos{ display:none; }
  .la-filas{ display:flex; gap:.75rem; overflow-x:auto; scroll-snap-type:x mandatory; margin:0 calc(var(--margen) * -1);
    padding:.25rem var(--margen) .5rem; scroll-padding:0 var(--margen); scrollbar-width:none; overscroll-behavior-x:contain; }
  .la-filas::-webkit-scrollbar{ display:none; }
  .la-fila, .la-fila:hover, .la-fila.activa{ flex:0 0 84%; scroll-snap-align:start; grid-template-columns:0 2.875rem 1fr; column-gap:.875rem; row-gap:.875rem;
    align-items:start; padding:0 1rem 1.25rem 0; border-radius:var(--radio); background:var(--negro); color:var(--blanco); }
  .la-fila__foto{ display:block; grid-column:1 / -1; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; }
  .la-num{ position:absolute; top:.75rem; left:.75rem; padding:.375rem .625rem; border-radius:62.4375rem; color:var(--blanco);
    background:var(--vidrio-rojo); box-shadow:var(--vidrio-borde); -webkit-backdrop-filter:var(--vidrio-blur); backdrop-filter:var(--vidrio-blur); }
  .la-ico, .la-fila.activa .la-ico{ grid-column:2; width:2.875rem; height:2.875rem; padding:.625rem; background:var(--rojo); color:var(--blanco); --acento:var(--blanco); }
  .la-txt{ grid-column:3; }
  .la-txt strong{ font-size:1.0625rem; }
  .la-txt span, .la-fila.activa .la-txt span{ max-height:none; opacity:1; margin-top:.375rem; }
  .la-fila .la-barra{ display:none; }   /* sin el avance automático: se pasa a mano */
  .la-puntos{ display:flex; justify-content:center; gap:.375rem; margin-top:.75rem; }
  .la-puntos i{ width:.5rem; height:.5rem; border-radius:62.4375rem; background:rgba(11,11,12,.18); transition:width .3s var(--ease-out), background-color .3s; }
  .la-puntos i.activo{ width:1.5rem; background:var(--rojo); }
  .la-cta{ justify-self:stretch; margin-top:1.25rem; }

  /* cobertura: pestañas en una fila que se desliza, el mapa a todo el ancho y la lista de la línea debajo */
  .red__pestanas{ flex-direction:column; flex-wrap:nowrap; gap:.625rem; }
  .red__tabs{ display:flex; gap:.5rem; overflow-x:auto; margin:0 calc(var(--margen) * -1); padding:0 var(--margen) .25rem; scrollbar-width:none; }
  .red__tabs::-webkit-scrollbar{ display:none; }
  .red__tabs button{ flex:none; }
  .mapa{ height:auto; display:flex; flex-direction:column; }
  .mapa__svg{ position:relative; inset:auto; }
  .mapa__nota{ top:calc(14rem - 1.75rem); bottom:auto; right:.875rem; }
  .red__listas{ position:static; width:auto; padding:0 .75rem .75rem; overflow:visible; }
  .red[data-ver="todo"] .red__listas{ display:none; }
  .red__grupo.activo{ flex:none; }
  .red__grupo.activo ul{ grid-template-columns:1fr 1fr; }
  .mapa__svg{ height:14rem; }
  /* el mapa chico no tiene lugar para todo: sin los nombres de provincia y, en la red entera, sólo las ciudades más grandes */
  .m-provincia{ display:none; }
  .mapa[data-ver="todo"] :is([data-n="San Francisco"], [data-n="Rafaela"], [data-n="La Paz"], [data-n="Villaguay"], [data-n="Gualeguaychú"]) text{ opacity:0; }
  .mapa[data-ver="todo"] [data-n="Santa Fe"] text{ text-anchor:middle; transform:translate(calc(10px * var(--k)), calc(-9px * var(--k))); }   /* arriba del punto, lejos de Paraná */

  .seguimiento__in, .empresa__in, .contacto__in{ grid-template-columns:1fr; }
  .contacto__titulo > p:not(.volanta){ white-space:normal; }
  .viaje__movil{ width:2.875rem; height:2.875rem; margin-left:-1.4375rem; top:1.125rem; }

  .fila--cabeza{ display:none; }
  .fila{ grid-template-columns:repeat(3, 1fr); gap:.5rem .625rem; padding:.875rem 1.125rem; }
  .fila__destino{ grid-column:1 / -1; }
  .fila span[data-r="Días"]{ grid-column:1 / -1; margin-top:-.25rem; font-size:.8438rem; color:var(--texto-2); }
  .fila span[data-r]::before{ content:attr(data-r); display:block; margin-bottom:.25rem; font:700 .625rem/1 var(--f-tit); letter-spacing:.12em; text-transform:uppercase; color:var(--texto-2); }
  .fila span[data-r="Días"]::before{ display:none; }
  .horarios__extra{ grid-template-columns:1fr; gap:.75rem; }
  .aviso{ padding:1.375rem; gap:1rem; flex-wrap:wrap; }

  .pie__in{ grid-template-columns:1fr; }
  .pie__nav{ justify-content:flex-start; margin-left:-.75rem; }
  .flotante{ right:1rem; bottom:1rem; width:3.5rem; height:3.5rem; transition:transform .5s var(--ease-out), background-color .25s, bottom .4s var(--ease-out); }
  .flotante.en-inicio{ bottom:3rem; }   /* arriba de la cinta mientras se ve el inicio */
  .pie{ padding-bottom:5.5rem; }        /* el botón flotante no tapa el pie */
  .btn--vidrio{ -webkit-backdrop-filter:none; backdrop-filter:none; }
  .btn--vidrio{ background:rgba(11,11,12,.45); }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .hero__estelas{ display:none; }
  .js [data-revela]{ opacity:1; transform:none; }
  .js .empresa__foto[data-revela]{ clip-path:none; }
}