/* ==========================================================================
   Transred · Refinamiento
   Segunda capa sobre site.css: header, footer, mapa, textura y microdetalle.
   Se carga despues, por eso puede sobrescribir sin pelear con especificidad.
   ========================================================================== */

/* ------------------------------------------------------------- textura */
/* Grano sutil sobre el fondo: le saca el aspecto plano al degradado sin
   sumar una sola peticion de red. */
body::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:900;
  pointer-events:none;
  opacity:.04;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------- header v2 */
.radar-announcement{
  position:relative;z-index:121;display:block;width:100%;
  min-height:38px;background:#C2410C;color:#fff;
  visibility:visible;opacity:1;
}
.radar-announcement-in{
  display:flex;align-items:center;justify-content:center;gap:7px;
  width:100%;min-height:38px;padding:7px var(--gut);text-align:center;
  font-family:var(--body);font-size:.85rem;font-weight:500;line-height:1.35;
}
.radar-announcement a{font-weight:750;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.radar-announcement a:hover,.radar-announcement a:focus-visible{color:#fff;text-decoration-thickness:2px}
.nav--with-radar-announcement{position:sticky;top:0;z-index:120}
.pag-inicio{
  --home-radar-height:38px;
  --home-header-height:86px;
  --home-header-stack:calc(var(--home-radar-height) + var(--home-header-height));
  --home-hero-available-height:calc(100svh - var(--home-header-stack));
  --home-hero-top-space:max(56px, calc(clamp(124px, 12vw, 164px) - var(--home-header-stack)));
  --home-hero-bottom-space:clamp(72px, 8vw, 96px);
}
.radar--editorial#radar-logistico{scroll-margin-top:96px}
.radar-privacy{margin-top:10px;font-size:.82rem;line-height:1.4}
.radar-privacy a{color:var(--blue-300);text-decoration:underline;text-underline-offset:3px}
.radar-privacy a:hover,.radar-privacy a:focus-visible{color:var(--tx)}
.nav{--nav-pad:20px}
.nav.stuck{--nav-pad:11px}
.nav-in{padding-block:var(--nav-pad);transition:padding .4s var(--ease)}

/* barra de avance de lectura */
.nav-progress{
  position:absolute;left:0;bottom:-1px;height:2px;width:100%;
  transform:scaleX(0);transform-origin:left;
  /* El motivo de la marca en vez de un degradado cualquiera: la barra de
     lectura es una ruta que se va recorriendo. El degradado queda debajo para
     que el trazo no se vea plano. */
  background:
    repeating-linear-gradient(90deg,
      var(--blue-300) 0 var(--vial-trazo-fino),
      transparent var(--vial-trazo-fino) var(--vial-paso-fino)),
    linear-gradient(90deg,var(--blue),var(--blue-300));
  opacity:0;transition:opacity .35s;
}
.nav.stuck .nav-progress{opacity:1}

/* marca */
.brand{gap:11px}
.brand-mark{font-size:1.22rem;line-height:1}
.brand-sub{font-size:.54rem;letter-spacing:.22em;padding-left:11px;line-height:1.4;max-width:10ch}

/* enlaces con seccion activa */
.nav-links{gap:26px}
.nav-links a{font-size:.85rem}
.nav-links a.activo{color:#fff}
.nav-links a.activo::after{transform:scaleX(1)}

/* idioma como pastilla */
.langs{
  background:rgba(255,255,255,.055);border:1px solid var(--line);
  border-radius:100px;padding:3px;gap:0;
}
.langs .sep{display:none}
/* Tono mas claro que --mut-2: sobre la pastilla, el tenue caia a 4.17 */
.langs a{padding:5px 11px;border-radius:100px;font-weight:500;letter-spacing:.04em;color:#7C93AB}
.langs a[aria-current]{background:var(--blue);color:#fff}
.langs a:not([aria-current]):hover{color:var(--tx);background:rgba(255,255,255,.06)}

.nav-cta{padding:10px 20px}
.nav-cta .ar{display:inline-block;transition:transform .3s var(--ease)}
.nav-cta:hover .ar{transform:translateX(3px)}

/* ------------------------------------------------------------ hero v2 */
.hero-bg{will-change:transform}
.hero-mask{display:block;overflow:hidden}

/* ------------------------------------------------------- soluciones v2 */
/* La bajada se lee siempre. Ocultarla en reposo dejaba las tarjetas vacias
   y el contenido es lo que vende. */
.sol-tx p{opacity:.85}
/* linea de senalizacion que cruza la tarjeta */
.sol::before{
  content:'';position:absolute;left:0;right:0;bottom:0;height:3px;z-index:2;
  background:repeating-linear-gradient(90deg,var(--blue-300) 0 var(--vial-trazo-fino),transparent var(--vial-trazo-fino) var(--vial-paso-fino));
  transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease);
}
.sol:hover::before,.sol:focus-visible::before{transform:scaleX(1)}

/* ----------------------------------------------------------- flota v2 */
.flota-head{align-items:center}
.track-bar{height:2px;background:var(--paper-line);border-radius:2px;margin-top:2px;overflow:hidden}
.track-bar i{display:block;height:100%;background:var(--blue);border-radius:2px;width:30%}
.unit{position:relative}
.unit::after{
  content:'';position:absolute;inset:0;border-radius:var(--r-m);pointer-events:none;
  box-shadow:inset 0 0 0 0 var(--blue-300);transition:box-shadow .35s var(--ease);
}
.unit:hover::after{box-shadow:inset 0 0 0 1.5px var(--blue-300)}

/* -------------------------------------------------------------- mapa */
.mapa{
  position:relative;border-radius:var(--r-l);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--sh-card);
  background:linear-gradient(158deg,#0B2438,#061524 70%);
}
.mapa svg{width:100%;height:auto;display:block;position:relative;z-index:2}
.mapa-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.13;z-index:1}
/* Por defecto las rutas se ven. Solo se ocultan cuando el JS confirma que va
   a animarlas: asi, si el script falla, el mapa igual queda completo. */
.ruta.animar{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.ruta.animar.on{animation:trazo 1.8s var(--ease) forwards}
@keyframes trazo{to{stroke-dashoffset:0}}
.pin-halo{transform-origin:center;transform-box:fill-box;animation:latido 3s ease-in-out infinite}
@keyframes latido{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:.1;transform:scale(1.6)}}
.mapa-lbl{font-family:var(--mono);font-size:11px;fill:#C6D8E6;letter-spacing:.05em}
.mapa-lbl.sec{fill:#7E97AC;font-size:9.5px}
.mapa-cap{
  position:absolute;left:22px;bottom:16px;z-index:3;font-family:var(--mono);
  font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mut-2);
}

/* ---------------------------------------------------------- cierre CTA */
.cierre{position:relative;overflow:hidden;border-top:1px solid var(--line)}
.cierre-bg{position:absolute;inset:0;z-index:0}
.cierre-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.cierre-bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,var(--ink) 6%,rgba(6,21,36,.92) 44%,rgba(6,21,36,.55));
}
.pag-soluciones .cierre-bg img{object-position:54% 72%}
.pag-nosotros .cierre-bg img{object-position:60% 55%}
.pag-nosotros .cierre-bg::after{
  background:linear-gradient(100deg,rgba(6,21,36,.97) 0%,rgba(6,21,36,.9) 37%,rgba(6,21,36,.58) 63%,rgba(6,21,36,.28) 100%);
}
/* En escritorio la foto de orientación no ocupa todo el fondo: mantenerla a
   la derecha permite mostrar el puesto de trabajo completo sin perder manos
   ni escritorio por el recorte de cover. */
@media(min-width:681px){
  .pag-selector .cierre{background:var(--ink)}
  .pag-selector .cierre-bg{left:35%;background:var(--ink)}
  .pag-selector .cierre-bg img{object-fit:contain;object-position:center right}
  .pag-selector .cierre-bg::after{
    background:linear-gradient(90deg,var(--ink) 0%,rgba(6,21,36,.8) 18%,rgba(6,21,36,.3) 48%,rgba(6,21,36,.08) 100%);
  }
}
@media(max-width:680px){
  .pag-nosotros .cierre-bg img{object-position:62% 52%}
  .pag-nosotros .cierre-bg::after{background:linear-gradient(145deg,rgba(6,21,36,.96) 0%,rgba(6,21,36,.86) 38%,rgba(6,21,36,.52) 66%,rgba(6,21,36,.32) 100%)}
  .pag-selector .cierre-bg img{object-position:62% 55%}
  .pag-selector .cierre-bg::after{background:linear-gradient(145deg,rgba(6,21,36,.96) 0%,rgba(6,21,36,.88) 38%,rgba(6,21,36,.58) 68%,rgba(6,21,36,.4) 100%)}
}
.pag-cobertura .hpag.con-foto{
  min-height:clamp(560px,42vw,680px);
  padding-block:clamp(154px,14vw,198px) clamp(64px,6vw,88px);
}
.pag-cobertura .hpag-foto{
  background-image:url('../img/hero-contacto-camiones.opt.webp');
  background-size:cover;
  background-position:58% 54%;
}
.pag-cobertura .hpag-foto picture{position:absolute;inset:0;display:block}
.pag-cobertura .hpag-foto img{opacity:0}
.pag-cobertura .hpag-foto::after{
  background:
    linear-gradient(90deg,rgba(6,21,36,.96) 0%,rgba(6,21,36,.86) 30%,rgba(6,21,36,.58) 58%,rgba(6,21,36,.2) 100%),
    linear-gradient(180deg,rgba(6,21,36,.3) 0%,rgba(6,21,36,.05) 48%,rgba(6,21,36,.5) 100%);
}
@media (min-width:681px) and (max-width:1100px){
  .pag-cobertura .hpag.con-foto{
    min-height:clamp(520px,58vw,610px);
    padding-block:clamp(136px,16vw,170px) clamp(56px,7vw,76px);
  }
  .pag-cobertura .hpag-foto{background-position:62% 53%}
  .pag-cobertura .hpag-foto::after{
    background:
      linear-gradient(90deg,rgba(6,21,36,.96) 0%,rgba(6,21,36,.84) 34%,rgba(6,21,36,.48) 68%,rgba(6,21,36,.16) 100%),
      linear-gradient(180deg,rgba(6,21,36,.28) 0%,rgba(6,21,36,.08) 48%,rgba(6,21,36,.56) 100%);
  }
}
.pag-cobertura .cierre-bg img{object-position:48% 56%}
@media(min-width:681px){
  .pag-cobertura .cierre{background:var(--ink)}
  .pag-cobertura .cierre-bg{left:30%;background:var(--ink)}
  .pag-cobertura .cierre-bg::after{
    background:linear-gradient(90deg,var(--ink) 0%,rgba(6,21,36,.78) 18%,rgba(6,21,36,.28) 48%,rgba(6,21,36,.1) 100%);
  }
}
@media(max-width:680px){
  .pag-cobertura .hpag.con-foto{
    min-height:clamp(500px,132vw,610px);
    padding-block:clamp(128px,28vw,172px) clamp(50px,12vw,70px);
  }
  .pag-cobertura .hpag-foto{
    background-position:66% 52%;
  }
  .pag-cobertura .hpag-foto::after{
    background:
      linear-gradient(90deg,rgba(6,21,36,.95) 0%,rgba(6,21,36,.78) 58%,rgba(6,21,36,.38) 100%),
      linear-gradient(180deg,rgba(6,21,36,.4) 0%,rgba(6,21,36,.12) 45%,rgba(6,21,36,.72) 100%);
  }
  .pag-cobertura .cierre-bg img{object-position:52% 56%}
  .pag-cobertura .cierre-bg::after{background:linear-gradient(145deg,rgba(6,21,36,.95) 0%,rgba(6,21,36,.82) 38%,rgba(6,21,36,.52) 68%,rgba(6,21,36,.28) 100%)}
}
.pag-inicio .cierre-bg img{object-position:54% 54%}
.pag-contacto .cierre-bg img{object-position:52% 52%}
.pag-contacto .cierre-bg::after{
  background:linear-gradient(90deg,rgba(6,21,36,.98) 0%,rgba(6,21,36,.86) 32%,rgba(6,21,36,.36) 67%,rgba(6,21,36,.08) 100%);
}

/* Contacto usa el mismo hero, con menos aire vertical que las páginas
   editoriales para llevar antes al formulario. */
.pag-contacto .hpag.con-foto{
  padding-block:clamp(112px,11vw,154px) clamp(44px,5vw,66px);
}
@media(max-width:680px){
  .pag-contacto .hpag.con-foto{
    padding-block:104px 44px;
  }
}
@media(min-width:681px){
  .pag-inicio .cierre{background:var(--ink)}
  .pag-inicio .cierre-bg{left:20%;background:var(--ink)}
  .pag-inicio .cierre-bg::after{
    background:linear-gradient(90deg,var(--ink) 0%,rgba(6,21,36,.82) 20%,rgba(6,21,36,.4) 50%,rgba(6,21,36,.16) 100%);
  }
}
@media(max-width:680px){
  .pag-inicio .cierre-bg img{object-position:58% 54%}
  .pag-inicio .cierre-bg::after{background:linear-gradient(145deg,rgba(6,21,36,.95) 0%,rgba(6,21,36,.82) 38%,rgba(6,21,36,.5) 68%,rgba(6,21,36,.28) 100%)}
  .pag-contacto .cierre-bg img{object-position:56% 52%}
  .pag-contacto .cierre-bg::after{
    background:linear-gradient(145deg,rgba(6,21,36,.96) 0%,rgba(6,21,36,.82) 38%,rgba(6,21,36,.42) 70%,rgba(6,21,36,.18) 100%);
  }
}
.cierre-in{position:relative;z-index:2;padding-block:clamp(66px,8vw,112px)}
.pag-selector .cierre-in{padding-top:clamp(40px,5vw,68px)}
.cierre h2{font-size:clamp(2.05rem,4.4vw,3.5rem);max-width:16ch}
.cierre p{color:var(--tx-soft);font-size:var(--fs-lead);max-width:44ch;margin-top:18px}
.cierre-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}

/* ----------------------------------------------------------- footer v2 */
.foot{position:relative;background:var(--ink);padding-block:clamp(50px,6vw,72px) 26px}
.foot-grid{grid-template-columns:1.6fr .8fr .9fr 1fr;gap:clamp(24px,3vw,44px)}
.foot-dir{color:var(--tx-soft);font-size:.87rem;margin-top:18px;max-width:42ch;line-height:1.75}
.foot-hor{color:var(--mut-2);font-size:.76rem;margin-top:14px;font-family:var(--mono);line-height:1.75}
.foot h4{color:var(--blue-300)}
.foot-redes{display:flex;gap:9px;margin-top:18px}
.foot-redes a{
  width:36px;height:36px;border-radius:9px;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--mut);transition:.26s var(--ease);
}
.foot-redes a:hover{border-color:var(--blue-300);color:var(--blue-300);transform:translateY(-2px)}
.foot-wa{
  display:inline-flex;align-items:center;gap:9px;margin-top:16px;padding:11px 18px;
  border-radius:100px;background:rgba(34,164,93,.12);border:1px solid rgba(34,164,93,.35);
  color:#6FDBA1;font-size:.83rem;font-weight:500;transition:.26s var(--ease);
}
.foot-wa:hover{background:rgba(34,164,93,.2);transform:translateY(-2px)}
.foot-bar{align-items:center}
.foot-bar .creditos{display:flex;gap:16px;flex-wrap:wrap;align-items:center}

/* Pie específico de Contacto: conserva el acceso al Radar y lo legal, sin
   repetir sedes, teléfonos ni navegación que ya se ven arriba. */
.foot--contacto-minimo{padding-block:24px}
.contacto-radar-inline{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(14px,2.2vw,28px);padding:0 0 18px;color:var(--tx-soft);border-bottom:1px solid var(--line);line-height:1.45}
.contacto-radar-inline__eyebrow{color:var(--tx);font-size:.98rem;font-weight:700;white-space:nowrap}
.contacto-radar-inline__text{max-width:62ch;font-size:.92rem}
.contacto-radar-inline__link{padding:8px 13px;border:1px solid rgba(39,149,214,.55);border-radius:100px;color:var(--blue-300);font-size:.84rem;font-weight:700;white-space:nowrap;transition:color .2s var(--ease),background .2s var(--ease),border-color .2s var(--ease)}
.contacto-radar-inline:hover .contacto-radar-inline__link,.contacto-radar-inline:focus-visible .contacto-radar-inline__link{color:#fff;border-color:var(--blue-400);background:var(--blue-400)}
.foot--contacto-minimo .foot-bar--minimo{margin-top:0;padding-top:14px;border-top:0;justify-content:space-between;color:var(--mut-2);font-size:.78rem}
.foot-bar--minimo a{color:var(--mut);text-decoration:underline;text-underline-offset:3px}
.foot-bar--minimo a:hover{color:var(--blue-300)}

/* El footer completo conserva sus columnas y suma la misma franja editorial
   del Radar antes del cierre legal. */
.foot-radar-inline{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(14px,2.2vw,28px);margin-top:clamp(26px,3vw,36px);padding:18px 0;color:var(--tx-soft);border-top:1px solid var(--line);line-height:1.45}
.foot-radar-inline__eyebrow{color:var(--tx);font-size:.98rem;font-weight:700;white-space:nowrap}
.foot-radar-inline__text{max-width:62ch;font-size:.92rem}
.foot-radar-inline__link{padding:8px 13px;border:1px solid rgba(39,149,214,.55);border-radius:100px;color:var(--blue-300);font-size:.84rem;font-weight:700;white-space:nowrap;transition:color .2s var(--ease),background .2s var(--ease),border-color .2s var(--ease)}
.foot-radar-inline:hover .foot-radar-inline__link,.foot-radar-inline:focus-visible .foot-radar-inline__link{color:#fff;border-color:var(--blue-400);background:var(--blue-400)}
.foot:not(.foot--contacto-minimo) .foot-bar{margin-top:0;padding-top:20px}

/* ------------------------------------------------------- volver arriba */
.arriba{
  /* Apoyado ENCIMA del WhatsApp y alineado con él por la derecha: los dos
     flotantes forman una sola columna en el rincón en vez de disputárselo.
     La cuenta sale de la altura del de WhatsApp más el aire entre ambos. */
  position:fixed;right:20px;bottom:calc(20px + 56px + 12px);z-index:95;
  width:44px;height:44px;border-radius:50%;
  background:rgba(10,117,187,.92);backdrop-filter:blur(8px);color:#fff;display:grid;place-items:center;
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s,background-color .25s;
  box-shadow:0 12px 30px -12px rgba(0,0,0,.9);
}
.arriba.on{opacity:1;visibility:visible;transform:none}
.arriba:hover{background:var(--blue-400)}

/* ------------------------------------------------------- responsive v2 */
@media(max-width:1040px){
  .foot-grid{grid-template-columns:1fr 1fr}
  .brand-sub{display:none}
}
@media(max-width:680px){
  .foot-grid{grid-template-columns:1fr}
  .contacto-radar-inline{display:flex;align-items:flex-start;flex-direction:column;gap:8px}
  .foot-radar-inline{display:flex;align-items:flex-start;flex-direction:column;gap:8px;margin-top:24px}
  .foot-bar--minimo{align-items:flex-start;gap:10px;flex-direction:column}
  .mapa-cap{left:16px;bottom:12px}
  .cierre h2{max-width:none}
  .pag-soluciones .cierre-bg img{object-position:58% 55%}
}

/* Sin animacion cuando el visitante lo pide */
@media(prefers-reduced-motion:reduce){
  .ruta{stroke-dashoffset:0!important;animation:none!important}
  .pin-halo{animation:none!important}
  .hero-in>*{opacity:1!important;transform:none!important}
}

/* ==================================================== TRANSICION DE PAGINA */
/* View Transitions: al navegar entre páginas el contenido se cruza en vez de
   parpadear en blanco. Donde el navegador no lo soporta, no pasa nada: la
   navegación es la de siempre.

   POR QUE ASI, Y NO CRUZANDO LAS DOS CAPAS
   Antes se animaban la saliente (hacia opacity 0) y la entrante (desde
   opacity 0) a la vez. Durante esos milisegundos las dos quedaban
   translúcidas y se veía el fondo a través: el logo y parte de los textos
   desaparecían a mitad de camino y volvían. Encima el translateY movía la
   barra fija, que se leía como un salto.

   La saliente se queda quieta y opaca debajo, y solo entra la nueva por
   encima. Nunca hay dos capas transparentes al mismo tiempo. */
/* ---------------------------------------------------------------------------
   APAGADA. Y por qué.

   Se intentó tres veces dejarla bien: primero cruzando bien las dos capas (se
   animaban las dos a la vez y durante 220 ms las dos quedaban translúcidas),
   después precargando el logotipo y forzando su decodificación, y por último
   bloqueando el pintado hasta que el documento estuviera montado. En las tres
   el cliente siguió viendo desaparecer el logotipo y las fotos a mitad de la
   navegación.

   El problema de fondo es que la captura de la página nueva se toma cuando el
   documento está listo, no cuando sus IMÁGENES lo están, y para eso no hay
   mecanismo declarativo. Lo que se gana es un fundido de 200 ms; lo que se
   pierde es ver la marca parpadear en cada clic. No compensa.

   Para volver a probarla: cambiar `none` por `auto` acá abajo. El resto de lo
   que se hizo en el camino (preload del logo con decoding=sync, y el
   rel=expect del head) sirve por sí solo y se queda: hacen que el encabezado
   esté listo antes del primer pintado, con o sin transición.
   --------------------------------------------------------------------------- */
@view-transition{ navigation: none; }

::view-transition-old(root){
  animation: none;
}
::view-transition-new(root){
  animation: entraPagina .2s cubic-bezier(0,0,.2,1) both;
}
@keyframes entraPagina{ from{ opacity:0 } to{ opacity:1 } }

/* La barra de navegación no debe viajar con la página: se queda fija. */
.nav{ view-transition-name: barra-nav; }
::view-transition-old(barra-nav),
::view-transition-new(barra-nav){ animation:none; mix-blend-mode:normal }

/* La foto de la unidad sí viaja: lleva el mismo nombre en las dos páginas.
   Necesita caja propia; con display:contents el navegador ignora el nombre. */
.vt-foto{ display:block }
::view-transition-group(*){ animation-duration:.3s }

@media(prefers-reduced-motion:reduce){
  @view-transition{ navigation: none }
  ::view-transition-group(*),
  ::view-transition-old(root),
  ::view-transition-new(root){ animation:none!important }
}

/* ============================================== WHATSAPP FLOTANTE */
/* En Paraguay y Brasil el WhatsApp es el canal real de contacto: conviene
   tenerlo siempre a mano, no solo al final de la página. */
/* El verde se conserva porque es lo que hace reconocible el canal de un
   vistazo, pero tratado como el resto del sitio y no como un plugin pegado
   encima: verde de marca más grave, sombra NEUTRA (la verde encendida era lo
   que le daba aire de widget), y un filo claro arriba que lo asienta sobre la
   foto igual que las demás piezas. */
.wa-flota{
  /* El WhatsApp manda en el rincón: es el canal real de contacto en Paraguay
     y en Brasil. El botón de subir se le apoya encima, no al lado. */
  position:fixed;right:20px;bottom:20px;z-index:96;
  display:inline-flex;align-items:center;gap:0;
  height:56px;padding:0 16px;border-radius:100px;
  background:linear-gradient(180deg,#1B8A54,#127042);
  color:#fff;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:
    0 1px 0 rgba(255,255,255,.14) inset,
    0 16px 32px -16px rgba(4,14,24,.9);
  transition:gap .35s var(--ease),padding .35s var(--ease),
             background .25s,transform .3s var(--ease),box-shadow .3s var(--ease);
  overflow:hidden;
}
.wa-flota svg{flex:0 0 auto}
.wa-flota .txt{
  max-width:0;opacity:0;white-space:nowrap;font-family:var(--display);
  font-weight:600;font-size:.88rem;
  transition:max-width .38s var(--ease),opacity .28s;
}
.wa-flota:hover{
  background:linear-gradient(180deg,#1F9A5E,#15804B);
  transform:translateY(-2px);gap:10px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.2) inset,
    0 20px 38px -16px rgba(4,14,24,.95);
}
.wa-flota:focus-visible{outline:2px solid var(--pure);outline-offset:3px}
.wa-flota:hover .txt{max-width:180px;opacity:1}
.wa-flota:focus-visible .txt{max-width:180px;opacity:1}

@media(max-width:680px){
  .wa-flota{right:14px;bottom:14px;height:52px;padding:0 14px}
  .arriba{right:14px;bottom:calc(14px + 52px + 10px);width:40px;height:40px}
}
@media(prefers-reduced-motion:reduce){
  .wa-flota,.wa-flota .txt{transition:none}
}


/* ------------------------------------------------------- logotipo oficial */
/* El SVG es blanco: así viene el archivo original de Transred, pensado para
   fondo oscuro, que es el del encabezado y el del pie. */
.brand-logo{
  display:block;height:26px;width:auto;
  transition:opacity .3s var(--ease);
}
.brand:hover .brand-logo{opacity:.85}
.foot-brand .brand-logo{height:30px}
@media(max-width:520px){ .brand-logo{height:22px} }
@media(min-width:681px) and (max-height:820px){
  .pag-inicio{
    --home-hero-top-space:36px;
    --home-hero-bottom-space:54px;
  }
}
@media(max-width:680px){
  .radar-announcement{min-height:64px}
  .radar-announcement-in{min-height:64px;padding-block:7px;font-size:.78rem;flex-wrap:wrap;column-gap:6px;row-gap:0}
  .pag-inicio{
    --home-radar-height:65px;
    --home-header-height:83px;
    --home-header-stack:calc(var(--home-radar-height) + var(--home-header-height));
    --home-hero-top-space:32px;
    --home-hero-bottom-space:13px;
  }
  .radar--editorial#radar-logistico{scroll-margin-top:96px}
}
@media(max-width:380px){
  .nav-in{padding-inline:14px;gap:8px}
  .nav .brand-logo{width:110px;height:auto}
  .nav-side{gap:8px}
  .langs a{padding-inline:7px}
}

/* ==========================================================================
   Detalle tipográfico: nada de líneas huérfanas
   `balance` reparte las líneas de un título para que ninguna quede sola y
   corta; `pretty` hace lo propio con los párrafos, evitando que la última
   línea sea una sola palabra. Son dos propiedades y se notan en cada bloque
   de texto del sitio.

   Van separadas a propósito: `balance` es caro en textos largos (el navegador
   lo limita a unas pocas líneas), así que en párrafos se usa `pretty`, que
   está pensado justo para eso.
   ========================================================================== */
h1,h2,h3,h4,
.eyebrow,.acor-nombre,.fr-lado h3,.cfg-nombre,.idx-que{
  text-wrap:balance;
}
p,li,dd,figcaption,.dsc,.hint,.fr-rol,.cfg-cat{
  text-wrap:pretty;
}
/* Los números y códigos técnicos no se parten nunca. */
.serv-n,.cfg-n,.fr-lista i,.idx-uni,.yr,.dato-n{
  white-space:nowrap;
}

/* ==========================================================================
   Pie: menos hueco y un cierre de verdad
   Con cuatro bloques en dos columnas quedaba alto y desparejo, y terminaba de
   golpe: sin una franja que cerrara, el sitio parecía cortado. Se ajusta la
   grilla para que las columnas se acomoden solas y se agrega la franja final.
   ========================================================================== */
.foot-grid{
  /* Las columnas se reparten por sí solas: nunca queda una fila con un solo
     bloque colgando, que era lo que hacía ver el pie desarmado. */
  grid-template-columns:1.5fr repeat(auto-fit,minmax(170px,1fr));
  align-items:start;
}

/* Marca vial en el borde superior, como en el resto de los cortes del sitio. */
.foot::before{
  content:'';position:absolute;left:0;right:0;top:0;height:2px;opacity:.45;
  background:repeating-linear-gradient(90deg,
    var(--blue) 0 var(--vial-trazo-fino),
    transparent var(--vial-trazo-fino) var(--vial-paso-fino));
}

/* Franja de cierre. Ya existía como .foot-bar: acá solo se le da aire y se
   separa del bloque de arriba con una línea, que es lo que faltaba para que
   el pie no terminara de golpe. */
.foot-bar{
  margin-top:clamp(34px,4vw,52px);padding-top:20px;
  border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:12px 26px;
}
.foot-bar .creditos{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:.78rem;color:var(--mut-2)}
.foot-bar a{color:var(--mut-2);text-decoration:none;transition:color .2s}
.foot-bar a:hover{color:var(--tx-soft)}

@media(max-width:680px){
  .foot-grid{grid-template-columns:1fr}
  .foot-bar{flex-direction:column;align-items:flex-start}
}