/* ══ RESET & BASE ══════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy:       #06184E;
  --yellow:     #CCD325;
  --cyan:       #0BBBEF;
  --white:      #ffffff;
  --gray:       rgba(6,24,78,.04);
  --text:       #06184E;
  --muted:      rgba(6,24,78,.55);
  --radius:     12px;
  --shadow:     0 4px 24px rgba(6,24,78,.1);
  --transition: .3s ease;
  --map-h:      620px;   /* alto del mapa y de la lista lateral */
}

html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  font-family: 'DM Sans', system-ui, sans-serif;
  color: var(--text);
  overflow-x: hidden;
  line-height: 1.6;
}
img { display: block; }

.container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ══ NAVBAR ════════════════════════════════════════════════ */
.navbar {
  position: fixed;
  top: 0;
  left: 0; right: 0;
  padding-top: env(safe-area-inset-top);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  z-index: 100;
  background: transparent;
  transition: background var(--transition), box-shadow var(--transition);
}
.navbar.scrolled {
  background: var(--navy);
  box-shadow: 0 2px 16px rgba(0,0,0,.35);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}
.logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.logo-img { height: 56px; width: auto; }


.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav-links a {
  color: rgba(255,255,255,.85);
  text-decoration: none;
  font-size: .93rem;
  font-weight: 500;
  display: inline-block;
  transition: color var(--transition), transform var(--transition);
}
.nav-links a:hover {
  color: var(--yellow);
  transform: scale(1.08);
}

.nav-seguimiento {
  background: rgba(204,211,37,.15) !important;
  color: var(--yellow) !important;
  border: 1px solid rgba(204,211,37,.35);
  padding: 6px 14px;
  border-radius: 8px;
  font-weight: 600 !important;
}
.nav-seguimiento:hover {
  background: rgba(204,211,37,.28) !important;
  border-color: rgba(204,211,37,.6);
  transform: none !important;
}

.btn-nav {
  background: var(--yellow) !important;
  color: var(--navy) !important;
  padding: 9px 20px;
  border-radius: 8px;
  font-weight: 700 !important;
  transition: background var(--transition) !important;
}
.btn-nav:hover { background: var(--yellow) !important; filter: brightness(.9); }

.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.burger span {
  display: block; width: 24px; height: 2px;
  background: var(--white); border-radius: 2px;
  transition: var(--transition);
}

/* ══ HERO ══════════════════════════════════════════════════ */
.hero {
  /* Ancho de la imagen del camión. De acá salen tanto su posición como el
     padding del texto, para que siempre queden alineados.
     En el archivo el "MOSTTO" del sider arranca al 12% del ancho, así que se
     oculta sólo el 10% izquierdo (ver --truckCut) y entra con margen. */
  --truckW: clamp(660px, 66vw, 1500px);
  --truckCut: 0.10;
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: var(--navy);
  overflow: hidden;
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(6,24,78,.72);
  z-index: 1;
}
.hero-pattern {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.025'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");
}
/* El ancho se ata al ANCHO de la pantalla y la imagen se recorta con `cover`
   conservando la cabina. Antes el ancho salía del alto (height: 88%), así que
   en 16:9 el camión se estiraba hasta 1200px y se comía la columna del texto
   y las tarjetas.
   --bleed: sobreancho que se sale por la izquierda de la pantalla. El corte de
   `cover` cae ahí, fuera de la vista, así que al correrse con el parallax el
   acoplado se sigue viendo entero en vez de aparecer cortado a filo. Tiene que
   ser mayor que el desplazamiento máximo del parallax (5vh, ver script.js). */
/* La imagen es muy apaisada (1.78) y tiene el sider a la izquierda y la cabina
   a la derecha. Si se muestra entera queda chica; así que se agranda y el fondo
   del acoplado (mostto.ar y las ruedas traseras) se sale por la izquierda.
   Se ve el 82% derecho de la imagen: cabina + "MOSTTO Logística y Transporte"
   completos. El 18% que queda afuera es además el colchón que absorbe el
   corrimiento del parallax, así que al scrollear se descubre más acoplado en
   vez de aparecer un hueco. --truckW se define en .hero para que el
   padding del texto salga del mismo número y nunca se desincronicen. */
.hero-side-wrap {
  position: absolute;
  left: calc(-1 * var(--truckCut) * var(--truckW));
  bottom: 0;
  width: var(--truckW);
  height: auto;
  z-index: 3;
  pointer-events: none;
  transform: translateX(-100%);
  opacity: 0;
  transition: transform 1.1s cubic-bezier(.22,1,.36,1), opacity .9s ease;
  will-change: transform;
}
.hero-side-wrap.hero-img-visible {
  opacity: 1;
  transform: translateX(0);
}
/* Sin `object-fit`: la imagen se muestra completa a su proporción natural, así
   se ve el camión entero con el sider, no sólo la cabina. */
.hero-side-img {
  width: 100%;
  height: auto;
  display: block;
}

/* Velo derecho: el ancho del camión depende del ALTO de la pantalla, así que
   en 16:9 se mete en la columna del texto. Con este degradado el h1 y las
   tarjetas tienen contraste garantizado, cualquiera sea la parte del camión
   que les quede detrás. Va sobre la imagen (z-index 3) y debajo del
   contenido, que sube a 4. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(to left,
    rgba(6,24,78,.88) 0%,
    rgba(6,24,78,.60) 32%,
    rgba(6,24,78,.30) 56%,
    transparent 74%
  );
}

.hero-inner {
  position: relative;
  z-index: 4;
  width: 100%;
  /* A ancho completo, no al container de 1140: con el camión ocupando 60vw la
     columna del texto necesita todo el resto de la pantalla. */
  max-width: none;
  padding: 110px 24px 80px;
  /* Arranca justo donde termina la parte visible del camión (el 82% de
     --truckW), así la cabina no se le encima a las tarjetas. */
  padding-left: calc((1 - var(--truckCut)) * var(--truckW) + 14px);
  padding-right: clamp(24px, 5vw, 130px);
  display: flex;
  flex-direction: column;
  gap: 56px;
  align-items: flex-end;
}
.hero-top { max-width: 720px; width: 100%; }
.hero-top h1 {
  /* más chico y más ancho que antes: así corta en 2 líneas parejas en vez de
     3 dejando "cerca." huérfano en las pantallas de notebook */
  font-size: clamp(2rem, 3.2vw, 3.4rem);
  font-weight: 800;
  color: var(--white);
  line-height: 1.15;
  margin: 16px 0 18px;
  text-wrap: balance;
}
.hero-top p {
  font-size: 1.1rem;
  color: rgba(255,255,255,.7);
  max-width: 520px;
}
.accent { color: var(--yellow); }

/* Hero service cards */
.hero-services-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 720px;
  width: 100%;
  opacity: 0;
  transform: translateY(32px);
  animation: cardsEntrance .9s cubic-bezier(.22,1,.36,1) .4s forwards;
}

@keyframes cardsEntrance {
  to { opacity: 1; transform: translateY(0); }
}

.hero-svc {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 16px;
  padding: 32px 28px;
  border-radius: 20px;
  text-decoration: none;
  border: 1.5px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(12px);
  overflow: hidden;
  transition: transform .4s cubic-bezier(.22,1,.36,1),
              box-shadow .4s ease,
              border-color .3s ease,
              background .3s ease;
}

/* glow de fondo al hover */
.hero-svc::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
  border-radius: 20px;
}
.hero-svc-tpy::before {
  background: radial-gradient(ellipse at 30% 50%, rgba(204,211,37,.12) 0%, transparent 70%);
}
.hero-svc-360::before {
  background: radial-gradient(ellipse at 70% 50%, rgba(11,187,239,.12) 0%, transparent 70%);
}
.hero-svc:hover::before { opacity: 1; }

/* línea decorativa superior */
.hero-svc::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 20px 20px 0 0;
  transform: scaleX(0);
  transition: transform .4s cubic-bezier(.22,1,.36,1);
}
.hero-svc-tpy::after  { background: var(--yellow); }
.hero-svc-360::after  { background: var(--cyan); }
.hero-svc:hover::after { transform: scaleX(1); }

.hero-svc:hover {
  transform: translateY(-8px);
  background: rgba(255,255,255,.09);
}
.hero-svc-tpy:hover {
  border-color: rgba(204,211,37,.5);
  box-shadow: 0 20px 60px rgba(6,24,78,.5), 0 0 40px rgba(204,211,37,.1);
}
.hero-svc-360:hover {
  border-color: rgba(11,187,239,.5);
  box-shadow: 0 20px 60px rgba(6,24,78,.5), 0 0 40px rgba(11,187,239,.1);
}

.hero-svc-logo { height: 52px; max-width: 100%; width: auto; object-fit: contain; align-self: center; }
.hero-svc-360 .hero-svc-logo { height: 57px; }

.hero-360-name {
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -2px;
  line-height: 1;
}
.hero-svc-tag {
  font-size: 1rem;
  color: rgba(255,255,255,.65);
  line-height: 1.55;
}
.hero-svc-tag strong { color: var(--white); }

.hero-svc-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* en una línea siempre: con el camión más grande las tarjetas se angostan y
     "Conocé el servicio" se partía en dos */
  white-space: nowrap;
  font-size: .9rem;
  font-weight: 700;
  color: var(--yellow);
  padding: 10px 18px;
  border-radius: 8px;
  background: rgba(204,211,37,.1);
  border: 1px solid rgba(204,211,37,.2);
  transition: gap .3s ease, background .3s ease, border-color .3s ease;
}
.hero-svc-link-cyan {
  color: var(--cyan);
  background: rgba(11,187,239,.1);
  border-color: rgba(11,187,239,.2);
}
.hero-svc:hover .hero-svc-link { gap: 14px; }
.hero-svc-tpy:hover .hero-svc-link {
  background: rgba(204,211,37,.18);
  border-color: rgba(204,211,37,.4);
}
.hero-svc-360:hover .hero-svc-link {
  background: rgba(11,187,239,.18);
  border-color: rgba(11,187,239,.4);
}
.arrow { font-style: normal; }

/* ══ BUTTONS ═══════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--transition);
}
.btn-primary {
  background: var(--yellow);
  color: var(--navy);
}
.btn-primary:hover {
  background: var(--yellow);
  filter: brightness(.9);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(204,211,37,.35);
}
.btn-cyan {
  background: var(--cyan);
  color: var(--navy);
}
.btn-cyan:hover {
  background: var(--cyan);
  filter: brightness(.9);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(11,187,239,.35);
}
.btn-outline-light {
  background: transparent;
  border-color: rgba(255,255,255,.4);
  color: var(--white);
}
.btn-outline-light:hover { border-color: var(--white); background: rgba(255,255,255,.08); }
.btn-full { width: 100%; justify-content: center; }
.btn-inline {
  align-self: flex-start;
  padding: 10px 20px;
  font-size: .95rem;
}
.btn-inline svg {
  width: 17px; height: 17px;
  flex-shrink: 0;
}

/* ══ BADGE ═════════════════════════════════════════════════ */
.badge {
  display: inline-block;
  align-self: flex-start;
  background: rgba(204,211,37,.15);
  color: var(--yellow);
  border: 1px solid rgba(204,211,37,.4);
  padding: 5px 14px;
  border-radius: 100px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.badge-cyan {
  background: rgba(11,187,239,.12);
  color: var(--cyan);
  border-color: rgba(11,187,239,.3);
}
.badge-navy {
  background: rgba(6,24,78,.07);
  color: var(--navy);
  border-color: rgba(6,24,78,.18);
}
.badge-yellow {
  background: rgba(204,211,37,.2);
  color: var(--yellow);
  border-color: rgba(204,211,37,.5);
}
.badge-light {
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.85);
  border-color: rgba(255,255,255,.2);
}

/* ══ SECTIONS (shared) ════════════════════════════════════ */
.section { padding: 96px 0; }
.section-dark { background: var(--gray); }

.section-header {
  text-align: center;
  max-width: 100%;
  margin: 0 auto 64px;
}
.section-header h2 {
  font-size: 56px;
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 14px;
  line-height: 1.2;
}
.section-header p { color: var(--muted); font-size: 1.05rem; }
.section-header-light h2 { color: var(--white); font-size: 56px; width: 100%; }
.section-header-light p { color: rgba(255,255,255,.65); }

/* ══ SERVICIOS — 3 cards ══════════════════════════════════ */
.cards-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.card {
  position: relative;
  background: var(--white);
  border-radius: 20px;
  padding: 0;
  box-shadow: 0 8px 32px rgba(6,24,78,.1);
  border: 1px solid rgba(6,24,78,.08);
  overflow: hidden;
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1),
              box-shadow .4s ease, border-color .3s ease;
}
.card.visible { opacity: 1; transform: translateY(0); }
.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 56px rgba(6,24,78,.18);
  border-color: rgba(6,24,78,.2);
}

/* línea inferior de acento al hover */
.card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 4px;
  background: var(--yellow);
  transform: scaleX(0);
  transition: transform .4s cubic-bezier(.22,1,.36,1);
}
.card:hover::after { transform: scaleX(1); }

/* Proporción FIJA en vez de alto fijo. Con `height: 220px` el ancho de la caja
   iba de 343px en desktop a 850px en una columna, o sea la proporción saltaba
   de 1.39 a 3.86, y `cover` recortaba distinto en cada breakpoint. Como las
   imágenes de servicios ahora traen el logo aplicado, cualquier recorte
   variable se lo come. Los archivos que entrega el cliente vienen en 16:9 y
   con el logo pegado al borde derecho (la RENPRE lo toca), así que la caja va
   en 16:9: cualquier otra proporción hace que `cover` recorte los costados y
   se coma el logo. Si cambian los archivos, esta proporción los sigue. */
.card-img-wrap {
  width: 100%;
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 0;
}
.card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.card:hover .card-img { transform: scale(1.07); }

/* contenido de la card */
.card-body {
  padding: 28px 28px 36px;
}
.card h3 {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 12px;
  line-height: 1.2;
}
.card p { color: var(--muted); font-size: .96rem; line-height: 1.65; }

/* ══ TU PAQUETE YA ════════════════════════════════════════ */
.section-tpy {
  background: var(--navy);
  position: relative;
  overflow: hidden;
}
.section-tpy::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 85% 30%, rgba(11,187,239,.11) 0%, transparent 55%),
    radial-gradient(ellipse at 60% 85%, rgba(204,211,37,.08) 0%, transparent 50%);
}

.tpy-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  min-height: 560px;
  position: relative;
  z-index: 2;
}

/* Empuja el contenido a la columna derecha */
.tpy-content { grid-column: 2; }
.tpy-content { display: flex; flex-direction: column; gap: 28px; }
.tpy-logo {
  max-height: 120px;
  max-width: 420px;
  width: auto;
  opacity: 0;
  transform: translateY(-18px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1);
}
.tpy-logo.logo-visible {
  opacity: 1;
  transform: translateY(0);
}

.tpy-subtitle {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  color: var(--white);
  line-height: 1.2;
}
.tpy-highlight {
  color: var(--yellow);
  font-style: italic;
}

.tpy-desc { color: rgba(255,255,255,.65); font-size: 1rem; line-height: 1.75; }

.tpy-items {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tpy-items li {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 24px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-left: 4px solid var(--yellow);
  border-radius: 0 12px 12px 0;
  font-size: 1rem;
  font-weight: 500;
  color: rgba(255,255,255,.9);
  line-height: 1.5;
  transition: background var(--transition), border-left-color var(--transition);
}
.tpy-items li:hover {
  background: rgba(255,255,255,.1);
  border-left-color: var(--yellow);
}
.tpy-icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  background: var(--yellow);
  color: var(--navy);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tpy-icon svg { width: 22px; height: 22px; }

/* Van de fondo — posicionada fuera del container */
.section-tpy::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(to right,
    rgba(204,211,37,.25),
    rgba(204,211,37,.6),
    rgba(204,211,37,1),
    rgba(204,211,37,.6),
    rgba(204,211,37,.25)
  );
  z-index: 3;
}

.tpy-grid { position: relative; z-index: 1; }

.tpy-van-bg {
  position: absolute;
  left: -40px;
  top: 50%;
  transform: translateY(-50%);
  width: 58%;
  pointer-events: none;
  z-index: 0;
}

/* fade lateral derecho para integrar con el contenido */
.tpy-van-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to left, var(--navy) 0%, transparent 35%);
  z-index: 2;
}

/* fade inferior fuerte para que llegue a la línea de corte */
.tpy-van-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    var(--navy) 0%,
    var(--navy) 10%,
    rgba(6,24,78,.9) 25%,
    rgba(6,24,78,.5) 45%,
    transparent 65%
  );
  z-index: 2;
}

.tpy-van {
  width: 100%;
  height: auto;
  display: block;
  mix-blend-mode: luminosity;
  opacity: 0;
  transform: translateX(80px);
  transition: transform 1s cubic-bezier(.22,1,.36,1), opacity .9s ease;
}

.tpy-van.van-visible {
  opacity: .9;
  transform: translateX(0);
}

/* ══ BLOQUE TPY + 360° — separadores ═══════════════════════ */



/* ══ MOSTTO 360° ══════════════════════════════════════════ */
.section-360 {
  background: var(--navy);
  position: relative;
  overflow: visible;
}
.section-360::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 15% 30%, rgba(11,187,239,.12) 0%, transparent 55%),
    radial-gradient(ellipse at 40% 85%, rgba(6,24,78,.0) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 60%, rgba(11,187,239,.07) 0%, transparent 45%);
}
.section-360::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(to right,
    rgba(11,187,239,.25),
    rgba(11,187,239,.6),
    rgba(11,187,239,1),
    rgba(11,187,239,.6),
    rgba(11,187,239,.25)
  );
  z-index: 3;
}

/* Camión de fondo — lado derecho, espejo del van en TPY.
   La imagen trae cielo/montañas/ruta incrustados, así que se funde
   con máscara en dos ejes + overlays navy (igual que .tpy-van-bg). */
.m360-truck-bg {
  position: absolute;
  right: -40px;
  top: 50%;
  transform: translateY(-35%);
  width: 62%;
  pointer-events: none;
  z-index: 2;
}

/* Sin overlays navy acá. Arrancaban en navy OPACO sobre el borde izquierdo del
   contenedor (x≈587, dentro de la sección) y tapaban el glow cian del fondo:
   eso era el "cuadrado" que se veía. El fundido lo hace la máscara elíptica
   de .m360-truck, que no deja bordes rectos. */

/* Máscara ELÍPTICA: la imagen trae cielo y ruta incrustados, y con degradados
   lineales quedaba un rectángulo visible (el borde derecho no tenía fundido).
   Una elipse no tiene ningún borde recto, así que el fondo se disuelve en
   todas las direcciones y el camión queda emergiendo del navy. */
.m360-truck {
  -webkit-mask-image:
    radial-gradient(ellipse 78% 84% at 58% 50%, black 42%, rgba(0,0,0,.5) 68%, transparent 88%),
    linear-gradient(to top, transparent 0%, black 22%);
  mask-image:
    radial-gradient(ellipse 78% 84% at 58% 50%, black 42%, rgba(0,0,0,.5) 68%, transparent 88%),
    linear-gradient(to top, transparent 0%, black 22%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  width: 100%;
  height: auto;
  display: block;
  opacity: 0;
  transform: translateX(-80px);
  transition: transform 1s cubic-bezier(.22,1,.36,1), opacity .9s ease;
}
.m360-truck.truck-visible {
  opacity: .95;
  transform: translateX(0);
}

/* "360°" gigante de fondo a la derecha — espejo del van en TPY */
.m360-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  min-height: 560px;
  position: relative;
  z-index: 2;
}

.m360-visual {
  position: absolute;
  right: -40px;
  bottom: auto;
  top: 50%;
  transform: translateY(-60%);
  width: 55%;
  pointer-events: none;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}
.m360-circle {
  font-size: clamp(12rem, 22vw, 22rem);
  font-weight: 800;
  color: transparent;
  -webkit-text-stroke: 2px rgba(11,187,239,.15);
  letter-spacing: -8px;
  line-height: 1;
  user-select: none;
  animation: rotate360 30s linear infinite;
  display: inline-block;
  position: relative;
  z-index: 1;
}
@keyframes rotate360 {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.m360-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
  z-index: 2;
}
.m360-logo { height: 160px; width: auto; max-width: 100%; object-fit: contain; align-self: flex-start; }

.m360-title {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 800;
  color: var(--white);
  line-height: 1.1;
  margin: 0;
}
.m360-tagline {
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--cyan);
  font-style: italic;
  letter-spacing: .3px;
  line-height: 1.6;
}
.m360-tagline strong { font-weight: 800; font-style: normal; }
.m360-desc { font-size: .97rem; color: rgba(255,255,255,.6); line-height: 1.75; }

.m360-items {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.m360-items li {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 24px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-left: 4px solid var(--cyan);
  border-radius: 0 12px 12px 0;
  line-height: 1.5;
  transition: background var(--transition), border-left-color var(--transition);
}
.m360-items li:hover {
  background: rgba(11,187,239,.08);
  border-left-color: var(--cyan);
}
.m360-icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  background: rgba(11,187,239,.15);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cyan);
}
.m360-icon svg { width: 22px; height: 22px; }
.m360-items strong { display: block; font-size: .95rem; color: var(--white); margin-bottom: 4px; }
.m360-items p { font-size: .9rem; color: rgba(255,255,255,.55); margin: 0; }

/* ══ FLOTA ═════════════════════════════════════════════════ */
.section-flota {
  position: relative;
  overflow: hidden;
  background: var(--navy);
}
.flota-parallax-bg {
  position: absolute;
  inset: -30% 0;
  background: url('images/fondo-aerea.webp') center center / cover no-repeat;
  will-change: transform;
  z-index: 0;
}
.section-flota::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='1' cy='1' r='1' fill='rgba(255,255,255,0.04)'/%3E%3C/svg%3E"),
    linear-gradient(rgba(6,24,78,.88), rgba(6,24,78,.92));
}
.section-flota .container {
  position: relative;
  z-index: 2;
}

.flota-counters {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.flota-counter {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-top: 3px solid var(--yellow);
  border-radius: 16px;
  padding: 44px 24px;
  text-align: center;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.flota-counter:hover {
  background: rgba(255,255,255,.12);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(6,24,78,.4);
}
.counter-num {
  font-size: 3.8rem;
  font-weight: 800;
  color: var(--yellow);
  line-height: 1;
}
.flota-counter sup {
  font-size: 2rem;
  font-weight: 800;
  color: var(--yellow);
  vertical-align: super;
}
.flota-counter span {
  display: block;
  font-size: .95rem;
  font-weight: 500;
  color: rgba(255,255,255,.8);
  margin-top: 12px;
  line-height: 1.4;
}
.flota-counter small { font-size: .8rem; color: rgba(255,255,255,.5); }

.flota-highlights {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}
.flota-hl {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-left: 4px solid var(--cyan);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 28px 28px;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  transition: background var(--transition);
}
.flota-hl:hover { background: rgba(255,255,255,.11); }
.flota-hl strong { display: block; color: var(--white); font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; }
.flota-hl p { color: rgba(255,255,255,.65); font-size: .92rem; line-height: 1.65; }

/* ══ CARRUSEL FLOTA ════════════════════════════════════════ */
.flota-carousel {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 24px;
  box-shadow: 0 16px 48px rgba(6,24,78,.5);
}
.carousel-track {
  display: flex;
  gap: 10px;
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.carousel-slide {
  min-width: calc(33.333% - 7px);
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 10px;
}
.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s ease;
}
.carousel-slide img:hover { transform: scale(1.03); }

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(6,24,78,.7);
  border: 1px solid rgba(255,255,255,.2);
  color: var(--white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), border-color var(--transition);
  z-index: 2;
}
.carousel-btn:hover { background: var(--yellow); border-color: var(--yellow); color: var(--navy); }
.carousel-btn svg { width: 20px; height: 20px; }
.carousel-prev { left: 16px; }
.carousel-next { right: 16px; }

.carousel-dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 2;
}
.carousel-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.4);
  cursor: pointer;
  padding: 0;
  transition: background var(--transition), transform var(--transition);
}
.carousel-dot.active {
  background: var(--yellow);
  transform: scale(1.3);
}

/* ══ NOSOTROS ══════════════════════════════════════════════ */
.section-nosotros { background: var(--gray); }

.nosotros-grid {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 64px;
  align-items: start;
}
.nosotros-content { display: flex; flex-direction: column; gap: 20px; }
.nosotros-content h2 {
  font-size: 56px;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.2;
}
.nosotros-content p { color: var(--muted); font-size: .97rem; line-height: 1.75; }
.nosotros-goal {
  background: var(--white);
  border-left: 4px solid var(--yellow);
  padding: 18px 20px;
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--text) !important;
}
.nosotros-goal strong { color: var(--navy); }
.flia-logo { display: block; max-width: 220px; height: auto; margin-top: 4px; align-self: center; }

.nosotros-image-wrap {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(6,24,78,.18);
}
.nosotros-image {
  width: 100%;
  max-height: 620px;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.nosotros-image-wrap::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 52%;
  background: linear-gradient(to top, rgba(6,24,78,.92) 0%, rgba(6,24,78,.5) 55%, transparent 100%);
  pointer-events: none;
}

.nosotros-stats {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  z-index: 2;
  padding: 24px 24px 28px;
  gap: 0;
}
.n-stats-row {
  display: flex;
  flex-direction: row;
}
.n-stat {
  text-align: center;
  padding: 12px 8px;
  border-right: 1px solid rgba(255,255,255,.15);
}
.n-stat:last-child { border-right: none; }
.n-stat-full { border-bottom: 1px solid rgba(255,255,255,.15); border-right: none; }
.n-stats-row .n-stat { flex: 1; }
.n-stat strong {
  display: block;
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--yellow);
  line-height: 1;
  margin-bottom: 6px;
  letter-spacing: -1px;
}
.n-stat span { font-size: 1rem; color: rgba(255,255,255,.8); line-height: 1.4; }

/* ══ DISTRIBUCIÓN — mapas Leaflet ═══════════════════════════ */
/* Los 2 mapas se apilan: así cada uno tiene ancho completo
   para el mapa + su lista lateral. */
.distrib-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}
.distrib-block h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 16px;
}

/* Las dos columnas comparten el alto de --map-h. Sin la fila explícita el
   grid crecía hasta los 13 items de la lista y el mapa quedaba corto,
   dejando un hueco debajo. */
.branch-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  grid-template-rows: var(--map-h);
  gap: 20px;
}
.branch-aside {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  min-height: 0;
}

.map-embed {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: #e9ecef;
  box-shadow: 0 6px 20px rgba(6,24,78,.08);
  /* contiene el stacking de Leaflet: sin esto los popups
     (z-index 700) taparían el navbar y los botones flotantes */
  z-index: 0;
  isolation: isolate;
}
.leaflet-container { font-family: inherit; }

/* Atribución al mínimo posible: la licencia ODbL de OpenStreetMap y los
   términos de CARTO obligan a mantener el crédito, así que se deja pero
   discreto en vez de sacarlo. */
.leaflet-control-attribution {
  background: rgba(255,255,255,.62) !important;
  padding: 0 5px;
  font-size: 9px;
  line-height: 1.5;
  color: rgba(6,24,78,.45);
  border-radius: 4px 0 0 0;
}
.leaflet-control-attribution a { color: rgba(6,24,78,.55); text-decoration: none; }
.leaflet-control-attribution a:hover { text-decoration: underline; }

/* ── Buscador de la lista ── */
.branch-search {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.branch-search svg {
  position: absolute;
  left: 12px;
  width: 16px; height: 16px;
  color: var(--muted);
  pointer-events: none;
}
.branch-search input {
  width: 100%;
  padding: 11px 14px 11px 36px;
  font-family: inherit;
  font-size: .88rem;
  color: var(--text);
  background: var(--white);
  border: 1px solid rgba(6,24,78,.14);
  border-radius: 10px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.branch-search input::placeholder { color: rgba(6,24,78,.4); }
.branch-search input:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(11,187,239,.15);
}
/* la X nativa de <input type=search> en WebKit */
.branch-search input::-webkit-search-cancel-button { cursor: pointer; }

.branch-empty {
  font-size: .85rem;
  color: var(--muted);
  padding: 14px 4px;
  margin: 0;
}

/* Aviso debajo de la sucursal seleccionada */
.branch-sede {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  /* aire respecto del item de arriba, para que no quede pegado */
  margin: 8px 0 10px;
  padding: 11px 13px;
  flex-shrink: 0;
  background: rgba(11,187,239,.09);
  border-left: 3px solid var(--cyan);
  border-radius: 0 8px 8px 0;
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--navy);
}
.branch-sede svg {
  width: 14px; height: 14px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--cyan);
}
.branch-sede[hidden] { display: none; }

/* ── Renglón de localidad encontrada ──
   Confirma qué localidad del alcance coincidió con lo buscado y con qué
   frecuencia. Va entre el buscador y la lista. Lleva el filo amarillo del
   item activo (es la misma respuesta a la búsqueda) pero fondo blanco, para
   no pelearse con la card navy de la sucursal seleccionada ni con el cartel
   celeste de "esta sede es la indicada". */
.branch-loc {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin: 0;
  padding: 10px 13px;
  background: var(--white);
  border: 1px solid rgba(6,24,78,.12);
  border-left: 3px solid var(--yellow);
  border-radius: 0 8px 8px 0;
  font-size: .82rem;
  line-height: 1.35;
  color: var(--navy);
}
.branch-loc svg {
  width: 15px; height: 15px;
  flex-shrink: 0;
  color: var(--cyan);
}
.branch-loc-txt { flex: 1; min-width: 0; }
.branch-loc-txt strong { font-weight: 700; }
.branch-loc-cp {
  color: var(--muted);
  font-size: .92em;
}
/* La frecuencia es el dato que se viene a buscar: va en pastilla navy. */
.branch-loc-plazo {
  flex-shrink: 0;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--navy);
  color: var(--white);
  font-size: .74rem;
  font-weight: 700;
  white-space: nowrap;
}
/* Varias localidades del PDF no declaran plazo: se dice, no se inventa. */
.branch-loc-plazo.sin {
  background: rgba(6,24,78,.07);
  color: var(--muted);
  font-weight: 600;
}
.branch-loc[hidden] { display: none; }

/* ── Lista lateral de sucursales ── */
.branch-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(6,24,78,.25) transparent;
}
.branch-item[hidden], .branch-group[hidden] { display: none; }
.branch-list::-webkit-scrollbar { width: 6px; }
.branch-list::-webkit-scrollbar-track { background: transparent; }
.branch-list::-webkit-scrollbar-thumb {
  background: rgba(6,24,78,.2);
  border-radius: 3px;
}

.branch-group {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  padding: 14px 4px 2px;
}
.branch-group:first-child { padding-top: 0; }

.branch-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  font-family: inherit;
  background: var(--white);
  border: 1px solid rgba(6,24,78,.1);
  border-left: 3px solid transparent;
  border-radius: 8px;
  padding: 10px 13px;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
}
.branch-item:hover {
  border-left-color: var(--cyan);
  transform: translateX(2px);
}
.branch-item:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}
.branch-item.active {
  background: var(--navy);
  border-color: var(--navy);
  border-left-color: var(--yellow);
}
.branch-item-name {
  font-size: .92rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.3;
}
.branch-item-dir {
  font-size: .77rem;
  color: var(--muted);
  line-height: 1.35;
}
.branch-item.active .branch-item-name { color: var(--white); }
.branch-item.active .branch-item-dir  { color: rgba(255,255,255,.6); }

/* ── Pins ── */
.mostto-pin {
  background: none;
  border: none;
  transition: transform .2s cubic-bezier(.22,1,.36,1);
}
.mostto-pin:hover { transform: translateY(-3px) scale(1.08); }
.mostto-pin svg {
  width: 26px;
  height: 36px;
  display: block;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.35));
}
.mostto-pin .pin-body { fill: #E33; }
.mostto-pin .pin-dot  { fill: var(--white); }

/* ── Popup de sucursal ── */
.branch-popup .leaflet-popup-content-wrapper {
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(6,24,78,.28);
}
/* Sin ancho fijo acá: Leaflet calcula el suyo inline y un `auto !important`
   dejaba que el contenido se encogiera al mínimo. El ancho lo fija .bp. */
.branch-popup .leaflet-popup-content {
  margin: 0;
  line-height: 1.5;
}
.bp { width: 320px; position: relative; }
/* pista visual de que el cuerpo sigue hacia abajo, sin tapar una fila entera */
.bp::after {
  content: '';
  position: absolute;
  left: 0; right: 9px; bottom: 0;
  height: 14px;
  background: linear-gradient(to top, rgba(255,255,255,.95), rgba(255,255,255,0));
  pointer-events: none;
  border-radius: 0 0 12px 12px;
}
.branch-popup .leaflet-popup-tip { background: var(--white); }
.branch-popup a.leaflet-popup-close-button {
  color: rgba(255,255,255,.7);
  width: 30px;
  height: 32px;
  font-size: 20px;
  padding: 6px 6px 0 0;
}
.branch-popup a.leaflet-popup-close-button:hover {
  color: var(--white);
  background: transparent;
}

/* título = nombre de la sucursal, sobre fondo azul */
.bp-head {
  background: var(--navy);
  color: var(--white);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.25;
  padding: 13px 42px 13px 16px;
  border-bottom: 3px solid var(--yellow);
}
/* La tabla de entregas puede tener 18 localidades: el cuerpo scrollea
   en vez de estirar el popup más alto que el mapa. */
.bp-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  /* tiene que entrar dentro de --map-h menos el header y el pico del popup,
     si no Leaflet no lo puede encuadrar y el mapa lo recorta */
  max-height: 440px;
  overflow-y: auto;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(6,24,78,.3) rgba(6,24,78,.07);
}
/* barra siempre visible: es la señal de que hay más contenido */
.bp-body::-webkit-scrollbar { width: 8px; }
.bp-body::-webkit-scrollbar-track { background: rgba(6,24,78,.06); border-radius: 4px; }
.bp-body::-webkit-scrollbar-thumb { background: rgba(6,24,78,.28); border-radius: 4px; }
.bp-body::-webkit-scrollbar-thumb:hover { background: rgba(6,24,78,.45); }

.bp-row { display: flex; align-items: flex-start; gap: 10px; }
.bp-row-block > div { flex: 1; min-width: 0; }

/* ── Foto de la sucursal ── */
/* Sin `aspect-ratio` fijo: de las fotos hay 14 horizontales y 11 verticales,
   así que un recorte 16:9 les cortaba media imagen. Con `contain` y un tope de
   alto se ven enteras: las horizontales llenan el ancho sin bandas y sólo las
   verticales quedan centradas con aire a los costados. */
.bp-foto {
  position: relative;
  margin: -14px -16px 4px;      /* rompe el padding del cuerpo */
  overflow: hidden;
  background: rgba(6,24,78,.06);
  display: flex;
  justify-content: center;
  /* sin esto el flex column del cuerpo la comprime hasta casi 0 */
  flex-shrink: 0;
}
/* relleno: la misma foto a lo ancho, ampliada y desenfocada. El `scale` evita
   que el blur deje los bordes lavados. Sólo se ve en las fotos verticales. */
.bp-foto-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.18);
  filter: blur(16px) saturate(1.15);
  opacity: .6;
}
/* la foto real, entera y sin recortar */
.bp-foto-fg {
  position: relative;
  width: 100%;
  height: auto;
  max-height: 260px;
  object-fit: contain;
  display: block;
}
/* el placeholder no tiene <img>, así que necesita su propio alto */
.bp-foto-vacia {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 150px;
  gap: 7px;
  color: rgba(6,24,78,.32);
  border-bottom: 1px solid rgba(6,24,78,.08);
}
.bp-foto-vacia svg { width: 26px; height: 26px; }
.bp-foto-vacia span {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
}

/* ── Entregas y frecuencia ── */
.bp-ent {
  margin-top: 6px;
  border-top: 1px solid rgba(6,24,78,.08);
}
.bp-ent-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(6,24,78,.07);
}
.bp-ent-row:last-child { border-bottom: 0; }
.bp-ent-loc {
  font-size: .84rem;
  color: var(--text);
  line-height: 1.35;
}
.bp-ent-cp {
  font-size: .74rem;
  color: var(--muted);
  white-space: nowrap;
}
.bp-ent-plazo {
  flex-shrink: 0;
  font-size: .78rem;
  font-weight: 700;
  color: var(--cyan);
  white-space: nowrap;
}
/* la localidad de la propia sucursal, destacada */
.bp-ent-row.propia .bp-ent-loc   { font-weight: 700; color: var(--navy); }
.bp-ent-row.propia .bp-ent-plazo { color: var(--navy); }

/* ── Listado desplegable (listas de más de 12 localidades) ── */
.bp-ent-resumen {
  margin: 5px 0 0;
  font-size: .84rem;
  color: var(--text);
  line-height: 1.4;
}
.bp-ent-mas {
  display: block;
  margin-top: 4px;
  font-size: .76rem;
  color: var(--muted);
}
.bp-details > summary {
  cursor: pointer;
  list-style: none;
  margin-top: 8px;
  font-size: .8rem;
  font-weight: 700;
  color: var(--cyan);
  user-select: none;
}
.bp-details > summary::-webkit-details-marker { display: none; }
.bp-details > summary::before {
  content: '▸';
  display: inline-block;
  margin-right: 6px;
  transition: transform var(--transition);
}
.bp-details[open] > summary::before { transform: rotate(90deg); }
.bp-details > summary:hover { text-decoration: underline; }
/* al desplegar, el "y N más" pierde sentido */
.bp-details[open] ~ .bp-ent-mas { display: none; }

/* subtítulo de grupo dentro del desplegable (GBA / CABA) */
.bp-ent-group {
  display: block;
  margin: 12px 0 2px;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--muted);
}

.bp-icon {
  width: 15px; height: 15px;
  flex-shrink: 0;
  margin-top: 4px;
  color: var(--cyan);
}
.bp-label {
  display: block;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--muted);
}
.bp-value {
  display: block;
  font-size: .88rem;
  color: var(--text);
  line-height: 1.45;
}
.bp-value a { color: var(--text); text-decoration: none; font-weight: 600; }
.bp-value a:hover { color: var(--cyan); text-decoration: underline; }
.bp-sep { color: rgba(6,24,78,.3); margin: 0 4px; }
.bp-link {
  margin-top: 3px;
  padding-top: 11px;
  border-top: 1px solid rgba(6,24,78,.1);
  font-size: .82rem;
  font-weight: 700;
  color: var(--cyan);
  text-decoration: none;
}
.bp-link:hover { text-decoration: underline; }

/* ── Banda Patagonia ── */
.patagonia-band {
  margin-top: 48px;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 26px 30px;
  background: var(--navy);
  border-left: 4px solid var(--cyan);
  border-radius: 0 16px 16px 0;
  box-shadow: 0 12px 32px rgba(6,24,78,.16);
}
.patagonia-icon {
  flex-shrink: 0;
  width: 52px; height: 52px;
  border-radius: 14px;
  background: rgba(11,187,239,.15);
  color: var(--cyan);
  display: flex;
  align-items: center;
  justify-content: center;
}
.patagonia-icon svg { width: 26px; height: 26px; }
.patagonia-text { flex: 1; min-width: 0; }
.patagonia-text strong {
  display: block;
  color: var(--white);
  font-size: 1.15rem;
  font-weight: 800;
  margin-bottom: 4px;
}
.patagonia-text p {
  color: rgba(255,255,255,.62);
  font-size: .93rem;
  line-height: 1.6;
  margin: 0;
}
.patagonia-cta { flex-shrink: 0; align-self: center; }

/* ══ CONTACTO ═══════════════════════════════════════════════ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 48px;
  align-items: start;
}
.contact-info { display: flex; flex-direction: column; gap: 28px; }
.info-item { display: flex; align-items: flex-start; gap: 14px; }
.info-icon { font-size: 1.4rem; flex-shrink: 0; margin-top: 2px; }
.info-item strong { display: block; color: var(--navy); font-weight: 700; margin-bottom: 3px; }
.info-item p { color: var(--muted); font-size: .93rem; line-height: 1.6; }

.contact-form {
  background: var(--white);
  border-radius: var(--radius);
  padding: 40px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(6,24,78,.1);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { display: flex; flex-direction: column; margin-bottom: 20px; }
.form-group label { font-size: .87rem; font-weight: 600; color: var(--navy); margin-bottom: 7px; }
.form-group input,
.form-group select,
.form-group textarea {
  padding: 12px 16px;
  border: 1.5px solid rgba(6,24,78,.15);
  border-radius: 8px;
  font-size: .95rem;
  font-family: inherit;
  color: var(--text);
  background: var(--white);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(11,187,239,.15);
}
.form-group textarea { resize: vertical; }
.form-feedback {
  margin-top: 14px; font-size: .9rem; font-weight: 600;
  text-align: center; min-height: 20px;
}
.form-feedback.success { color: var(--cyan); }
.form-feedback.error   { color: var(--yellow); }

/* ══ FOOTER ════════════════════════════════════════════════ */
.footer {
  background: var(--navy);
  color: rgba(255,255,255,.6);
}
.footer-top {
  display: grid;
  grid-template-columns: 1.9fr 1fr 1fr 1.3fr;
  gap: 48px;
  padding: 72px 24px 56px;
  align-items: start;
}
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}
.footer-brand { max-width: 360px; }
.footer-logo { height: 44px; width: auto; max-width: 200px; object-fit: contain; }

.footer-tagline {
  font-size: .9rem;
  color: rgba(255,255,255,.45);
  line-height: 1.65;
  margin: 0;
}

.footer-contact-items {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.footer-info-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.footer-info-icon {
  width: 16px; height: 16px;
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--yellow);
  stroke: var(--yellow);
}
.footer-info-item p {
  margin: 0;
  font-size: .88rem;
  line-height: 1.6;
  color: rgba(255,255,255,.6);
}

.footer-socials { display: flex; gap: 10px; }
.social-link {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.7);
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.social-link:hover { background: var(--yellow); color: var(--navy); border-color: var(--yellow); }
.social-link svg { width: 16px; height: 16px; }

.footer-col h4 {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255,255,255,.95);
  margin: 0;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; }
.footer-col ul a {
  font-size: .9rem;
  color: rgba(255,255,255,.55);
  text-decoration: none;
  transition: color var(--transition), padding-left var(--transition);
  display: inline-block;
}
.footer-col ul a:hover { color: var(--yellow); padding-left: 4px; }

.footer-divider {
  height: 1px;
  background: rgba(255,255,255,.06);
  margin: 0 24px;
}

.footer-bottom {
  padding: 22px 0;
  border-top: 1px solid rgba(255,255,255,.06);
}
.footer-bottom .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-bottom p {
  font-size: .82rem;
  color: rgba(255,255,255,.35);
  margin: 0;
}
.footer-bottom-links {
  display: flex;
  gap: 20px;
}
.footer-bottom-links a {
  font-size: .82rem;
  color: rgba(255,255,255,.35);
  text-decoration: none;
  transition: color var(--transition);
}
.footer-bottom-links a:hover { color: rgba(255,255,255,.7); }
.footer-bottom-logos {
  display: flex;
  align-items: center;
  gap: 22px;
}
.footer-cert-logo {
  height: 36px;
  width: auto;
  opacity: .85;
  transition: opacity var(--transition);
}
.footer-cert-logo:hover { opacity: 1; }

/* Los dos PNG de certificación tienen fondo blanco opaco. `invert` los pasa
   a claro y `screen` hace desaparecer el fondo (blanco invertido = negro). */

/* El archivo ya viene rediseñado, en blanco y con fondo transparente: se
   muestra tal cual, sin filtros ni recortes. */
.cert-imo {
  height: 76px;
  width: auto;
  opacity: 1;
}

.cert-renpre {
  height: 58px;
  opacity: 1;
  filter: invert(1) brightness(1.4);
  mix-blend-mode: screen;
}

.cert-imo:hover, .cert-renpre:hover { opacity: 1; }

/* ══ BOTONES FLOTANTES ══════════════════════════════════════ */
.fab {
  position: fixed;
  right: 24px;
  width: 52px; height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  z-index: 200;
  transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease, opacity .25s ease;
  text-decoration: none;
}
.fab:hover { transform: translateY(-4px) scale(1.08); }

.fab-whatsapp {
  bottom: 88px;
  background: #25D366;
  color: #fff;
  box-shadow: 0 4px 20px rgba(37,211,102,.45);
}
.fab-whatsapp:hover { box-shadow: 0 8px 28px rgba(37,211,102,.6); }
.fab-whatsapp svg { width: 26px; height: 26px; }

.fab-top {
  bottom: 24px;
  background: var(--navy);
  color: var(--white);
  box-shadow: 0 4px 20px rgba(6,24,78,.35);
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
}
.fab-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.fab-top:hover { box-shadow: 0 8px 28px rgba(6,24,78,.5); }
.fab-top svg { width: 22px; height: 22px; }

/* ══ HERO — desktop wider containers ════════════════════════ */
@media (min-width: 901px) {
  .hero-top { max-width: 720px; }
  .hero-services-row { max-width: 920px; }
}

/* Con el camión ocupando 70vw la columna del texto se angosta: menos padding
   lateral en las tarjetas para que el contenido siga entrando cómodo. */
@media (min-width: 901px) and (max-width: 1500px) {
  .hero-svc { padding: 26px 18px; gap: 13px; }
  .hero-svc-link { padding: 9px 14px; font-size: .85rem; }
  .hero-svc-tag { font-size: .94rem; }
}

/* ══ RESPONSIVE ════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .tpy-grid   { grid-template-columns: 1fr; min-height: auto; }
  .tpy-content { grid-column: 1; }
  .tpy-van-bg { display: none; }
  .m360-grid  { grid-template-columns: 1fr; min-height: auto; }
  .m360-visual { display: none; }
  .m360-truck-bg { display: none; }
  .nosotros-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 36px; }
}

@media (max-width: 900px) {
  .burger {
    display: flex;
    width: 44px; height: 44px;
    align-items: center; justify-content: center;
    gap: 5px;
    background: rgba(6,24,78,.55);
    border-radius: 10px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  .navbar { background: rgba(6,24,78,.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  .navbar.scrolled { background: var(--navy); }
  .nav-inner { height: 60px; }
  .logo-img { height: 36px; }
  .nav-links {
    position: fixed;
    top: calc(60px + env(safe-area-inset-top)); left: 0; right: 0;
    background: var(--navy);
    flex-direction: column;
    align-items: stretch;
    padding: 20px 24px 28px;
    gap: 6px;
    transform: translateY(-110%);
    visibility: hidden;
    transition: transform var(--transition), visibility var(--transition);
    box-shadow: 0 8px 24px rgba(0,0,0,.3);
    max-height: calc(100vh - 60px - env(safe-area-inset-top));
    overflow-y: auto;
  }
  .nav-links a {
    padding: 14px 12px;
    border-radius: 10px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    font-size: 1.05rem;
  }
  .nav-links a:last-child { border-bottom: 0; }
  .nav-links.open { transform: translateY(0); visibility: visible; }
  .hero-side-img, .hero-side-wrap { display: none; }
  .hero {
    min-height: 100svh;
    align-items: stretch;
  }
  .hero-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 20px; padding-right: 20px;
    padding-top: calc(env(safe-area-inset-top, 0px) + 76px);
    padding-bottom: 48px;
    align-items: stretch;
    gap: 28px;
    min-height: 100svh;
  }
  .hero-top h1 { font-size: clamp(2rem, 8vw, 2.8rem); text-align: left !important; }
  .hero-services-row { grid-template-columns: 1fr; gap: 12px; }
  .hero-svc { padding: 24px 20px; gap: 12px; align-items: center; text-align: center; }
  .hero-svc-link { align-self: center; }
  .hero-svc-logo { height: 48px; }
  .hero-360-name { font-size: clamp(2rem, 7vw, 2.6rem); }

  .section { padding: 64px 0; }
  .section-header h2 { font-size: clamp(1.6rem, 5vw, 2.2rem); }

  /* en una columna se topa el ancho: si no, la tarjeta se estira a 850px y la
     imagen queda como una franja desproporcionada */
  .cards-grid-3 { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .flota-counters { grid-template-columns: 1fr 1fr; }
  .flota-highlights { grid-template-columns: 1fr; }
  .distrib-grid { gap: 40px; }
  /* apiladas: cada una toma su propio alto, no la fila compartida */
  :root { --map-h: 480px; }
  .branch-layout { grid-template-columns: 1fr; grid-template-rows: auto auto; gap: 14px; }
  .map-embed { height: var(--map-h); }
  .branch-aside { height: auto; }
  .branch-list { flex: none; max-height: 260px; }
  .bp-body { max-height: 340px; }
  .patagonia-band {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 24px 22px;
  }
  .patagonia-cta { align-self: stretch; justify-content: center; }
  .contact-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .contact-form { padding: 28px 20px; }
  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 28px 32px;
    padding: 48px 24px 32px;
  }
  .footer-brand {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px 28px;
    max-width: 100%;
  }
  .footer-brand .footer-tagline { display: none; }
  .footer-bottom .container { justify-content: center; text-align: center; flex-direction: column; }
  .footer-bottom-links { display: none; }
}

@media (max-width: 900px) {
  .section-tpy { overflow-x: clip; }
  .tpy-grid { gap: 32px; }
  .tpy-content { min-width: 0; }
  .tpy-logo { max-width: 100%; max-height: 90px; }
  .tpy-items li { padding: 16px 16px; gap: 14px; font-size: .95rem; }
  .tpy-icon { width: 40px; height: 40px; }
  .tpy-subtitle { font-size: clamp(1.4rem, 5vw, 1.8rem); }
  .tpy-desc { font-size: .95rem; }
  .section-tpy .container { padding-left: 18px; padding-right: 18px; }
  .tpy-items li { word-break: break-word; }
  img { max-width: 100%; height: auto; }
}

@media (max-width: 640px) {
  .container { padding: 0 16px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 24px 20px; padding: 40px 16px 28px; }
  .footer-brand { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: center; gap: 14px; }
  .footer-brand .footer-tagline { display: none; }
  .footer-col:not(.footer-brand):not(.footer-contact-col) { text-align: center; align-items: center; }
  .footer-col.footer-contact-col { grid-column: 1 / -1; }
  .footer-contact-items { flex-direction: row; flex-wrap: wrap; gap: 12px 32px; justify-content: center; }
  .footer-info-item { flex-direction: column; align-items: center; text-align: center; gap: 6px; }
  .footer-col { gap: 14px; }
  .footer-col h4 { padding-bottom: 10px; }
  .hero-top h1 { font-size: clamp(1.8rem, 9vw, 2.2rem); line-height: 1.15; }
  .badge { font-size: .75rem; }
  /* el mapa tiene que ser más alto que el popup, si no Leaflet no puede
     encuadrarlo y el `overflow:hidden` del contenedor lo recorta */
  :root { --map-h: 440px; }
  .branch-list { max-height: 230px; }
  .bp-body { max-height: 280px; }
  .bp { width: 300px; }
  .bp-foto-fg { max-height: 230px; }   /* 300/1.33 = 225: una 4:3 llena el ancho sin banda */
  .footer-bottom-logos { gap: 14px; }
  .cert-imo { height: 62px; }
  .cert-renpre { height: 47px; }
  .section { padding: 56px 0; }
}