/* ==========================================================================
   L-TRANS S.A.S. — Hoja de estilos única del sitio
   --------------------------------------------------------------------------
   EDITAR AQUÍ: los colores, tipografías y medidas se cambian SOLO en el
   bloque ":root" de abajo. Todo el sitio toma los valores de ahí.
   ========================================================================== */

/* ---------- Fuentes alojadas en el propio sitio (Montserrat y Barlow, licencia libre SIL OFL) ---------- */
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/barlow-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/barlow-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/barlow-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/barlow-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/barlow-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/barlow-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/montserrat-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/montserrat-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/montserrat-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/montserrat-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/montserrat-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/montserrat-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Fuente de respaldo con medidas parecidas a Montserrat para evitar saltos mientras carga */
@font-face { font-family: 'Montserrat Respaldo'; src: local('Arial'); size-adjust: 112.8%; ascent-override: 85.8%; descent-override: 22.3%; line-gap-override: 0%; }

:root {
  /* Colores exactos del logo */
  --azul-claro: #136BA0;
  --azul-marino: #2D3E70;      /* color principal */
  --gris: #575757;
  /* Complementos */
  --fondo: #F2F4F8;
  --blanco: #FFFFFF;
  --tinta: #1C2747;            /* texto principal */
  --tinta-suave: #4A5577;      /* texto secundario */
  --linea: #D5DAE6;            /* bordes y separadores */
  --marino-profundo: #1F2C54;  /* fondos oscuros */
  --celeste: #9DCBEA;          /* acentos sobre fondo oscuro */
  --degradado: linear-gradient(135deg, var(--azul-claro) 0%, var(--azul-marino) 100%);

  /* Tipografías */
  --fuente-titulos: "Montserrat", "Montserrat Respaldo", "Segoe UI", sans-serif;
  --fuente-texto: "Barlow", "Segoe UI", sans-serif;


  /* ---------- Tamaños de letra: SOLO estos se usan en todo el sitio ----------
     EDITAR AQUÍ: cambiar un tamaño aquí lo cambia en todo el sitio. */
  --t-pequeno: .875rem;                         /* 14 px: etiquetas, menú, botones, datos menores */
  --t-texto: 1.0625rem;                         /* 17 px: texto normal */
  --t-medio: 1.25rem;                           /* 20 px: subtítulos (h3) e introducciones */
  --t-titulo: clamp(1.9rem, 3.2vw, 2.5rem);     /* títulos de sección (h2) */
  /* Exclusivo para cifras y el título de la portada */
  --t-cifra: clamp(2.6rem, 5vw, 4rem);
  --t-cifra-destacada: clamp(5rem, 11vw, 8rem); /* solo el 42 de la flota */

  /* Medidas */
  --ancho: 1200px;
  --margen: clamp(1rem, 4vw, 2.5rem);
  --seccion: clamp(4.5rem, 9vw, 7.5rem);
  --radio: 6px;
  --radio-foto: 18px;
  --alto-menu: 84px;
  --salida: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--alto-menu); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--fuente-texto);
  font-size: var(--t-texto);
  line-height: 1.65;
  color: var(--tinta);
  background: var(--fondo);
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--azul-claro); text-underline-offset: 3px; }
a:hover { color: var(--azul-marino); }
h1, h2, h3, h4 {
  font-family: var(--fuente-titulos);
  font-weight: 800;
  line-height: 1.12;
  color: var(--azul-marino);
  margin: 0 0 0.6em;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h1 { font-size: var(--t-cifra); }
h2 { font-size: var(--t-titulo); }
h3 { font-size: var(--t-medio); font-weight: 700; }
p { margin: 0 0 1em; text-wrap: pretty; } /* evita palabras sueltas en la última línea */
:focus-visible { outline: 3px solid var(--azul-claro); outline-offset: 3px; }
.saltar {
  position: absolute; left: 1rem; top: -100px; z-index: 200;
  background: var(--azul-marino); color: var(--blanco); padding: .6rem 1rem; border-radius: var(--radio);
}
.saltar:focus { top: 1rem; color: var(--blanco); }

.contenedor { width: min(100% - 2 * var(--margen), var(--ancho)); margin-inline: auto; }
/* --pad = espacio superior de la sección. Al usar el menú, la página baja hasta el título de la sección (no hasta el borde) */
.seccion { --pad: var(--seccion); padding-block: var(--pad); scroll-margin-top: calc(1.5rem - var(--pad)); }
.seccion--blanca { background: var(--blanco); }
.seccion--oscura { background: var(--marino-profundo); color: #DCE3F2; }
.seccion--oscura h2, .seccion--oscura h3 { color: var(--blanco); }

/* Etiqueta pequeña sobre cada título */
.etiqueta {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--fuente-titulos); font-weight: 700;
  font-size: var(--t-pequeno); letter-spacing: .12em; text-transform: uppercase;
  color: var(--azul-claro); margin-bottom: 1rem;
}
.etiqueta::before { content: ""; width: 28px; height: 3px; border-radius: 2px; background: currentColor; }
.seccion--oscura .etiqueta { color: #8FC3E6; }
.intro { font-size: var(--t-medio); line-height: 1.55; color: var(--tinta-suave); max-width: 60ch; }
.seccion--oscura .intro { color: #C4CEE6; }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--fuente-titulos); font-weight: 700; font-size: var(--t-pequeno);
  padding: .95rem 1.5rem; border-radius: 999px; border: 2px solid transparent;
  text-decoration: none; cursor: pointer; line-height: 1.2;
  transition: background-color .25s var(--salida), color .25s var(--salida), border-color .25s var(--salida), transform .25s var(--salida);
}
.boton:hover { transform: translateY(-2px); }
.boton:active { transform: translateY(0); }
.boton--principal { background: var(--azul-claro); color: var(--blanco); }
.boton--principal:hover { background: var(--azul-marino); color: var(--blanco); }
.boton--borde { border-color: currentColor; color: var(--azul-marino); background: transparent; }
.boton--borde:hover { background: var(--azul-marino); border-color: var(--azul-marino); color: var(--blanco); }
.boton--claro { border-color: rgba(255,255,255,.75); color: var(--blanco); }
.boton--claro:hover { background: var(--blanco); color: var(--azul-marino); }
.boton--whatsapp { background: #187A42; color: var(--blanco); }
.boton--whatsapp:hover { background: #11603A; color: var(--blanco); }
.boton svg { width: 1.2em; height: 1.2em; flex: none; }

/* ==========================================================================
   MENÚ SUPERIOR FIJO
   ========================================================================== */
.menu {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--alto-menu);
  background: rgba(255,255,255,.97);
  border-bottom: 1px solid transparent;
  transition: box-shadow .3s var(--salida), border-color .3s var(--salida);
}
.menu.con-sombra { border-bottom-color: var(--linea); box-shadow: 0 6px 24px rgba(31,44,84,.08); }
.menu .contenedor { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
/* EDITAR AQUÍ: tamaño del logo en el menú */
.menu__logo img { height: 58px; width: auto; }
.menu__enlaces { display: flex; align-items: center; gap: clamp(.7rem, 1.4vw, 1.6rem); list-style: none; margin: 0; padding: 0; }
.menu__enlaces a {
  font-family: var(--fuente-titulos); font-weight: 600; font-size: var(--t-pequeno);
  color: var(--tinta); text-decoration: none; padding-block: .4rem; white-space: nowrap; position: relative;
}
.menu__enlaces a:not(.boton)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--azul-claro);
  transform: scaleX(0); transform-origin: left; transition: transform .3s var(--salida);
}
.menu__enlaces a:not(.boton):hover::after { transform: scaleX(1); }
.menu__enlaces .boton { padding: .7rem 1.2rem; font-size: var(--t-pequeno); }
.menu__enlaces .boton--principal { color: var(--blanco); }
.menu__enlaces .boton--borde { color: var(--azul-marino); }
.menu__enlaces .boton--borde:hover { color: var(--blanco); }
.menu__abrir { display: none; }

@media (max-width: 1140px) {
  .menu__enlaces .solo-escritorio { display: none; }
}
@media (max-width: 860px) {
  :root { --alto-menu: 72px; }
  .menu__logo img { height: 46px; }
  /* Sin JavaScript el menú se muestra completo; con JavaScript se vuelve desplegable */
  .js .menu__abrir {
    display: inline-flex; align-items: center; gap: .5rem;
    background: none; border: 1px solid var(--linea); border-radius: 999px;
    padding: .55rem .9rem; font: 600 var(--t-pequeno) var(--fuente-titulos); color: var(--azul-marino); cursor: pointer;
  }
  .menu__abrir span, .menu__abrir span::before, .menu__abrir span::after {
    display: block; width: 18px; height: 2px; background: currentColor; position: relative; content: "";
  }
  .menu__abrir span::before { position: absolute; top: -6px; }
  .menu__abrir span::after { position: absolute; top: 6px; }
  .menu__enlaces {
    position: absolute; top: var(--alto-menu); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--blanco); border-bottom: 1px solid var(--linea);
    padding: .5rem var(--margen) 1.25rem; max-height: calc(100vh - var(--alto-menu)); overflow-y: auto;
  }
  .menu__enlaces .solo-escritorio { display: list-item; }
  .menu__enlaces a { display: block; padding: .8rem 0; font-size: var(--t-texto); border-bottom: 1px solid var(--fondo); }
  .menu__enlaces a:not(.boton)::after { display: none; }
  .menu__enlaces .boton { margin-top: .75rem; width: 100%; padding: .9rem; }
  .js .menu__enlaces { display: none; }
  .js .menu.abierto .menu__enlaces { display: flex; }
}
main { padding-top: var(--alto-menu); }

/* ==========================================================================
   INICIO (HERO)
   ========================================================================== */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  /* La portada ocupa exactamente la pantalla visible debajo del menú */
  min-height: calc(100vh - var(--alto-menu)); /* respaldo para navegadores antiguos */
  min-height: calc(100svh - var(--alto-menu)); display: grid; align-items: center;
  background: var(--marino-profundo); color: var(--blanco);
}
.hero__foto { position: absolute; inset: 0; z-index: -2; }
.hero__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 55%; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(31,44,84,.94) 0%, rgba(31,44,84,.78) 40%, rgba(31,44,84,.15) 78%),
    linear-gradient(0deg, rgba(31,44,84,.85) 0%, rgba(31,44,84,0) 45%);
}
/* El espacio inferior deja ver los puertos por encima del panel de cifras */
.hero .contenedor { padding-block: clamp(2rem, 5vh, 3.5rem) clamp(6rem, 13vh, 7.5rem); }
.hero__texto { max-width: 1120px; }
.hero__texto > p, .hero__puertos { max-width: 640px; }
.hero h1 { color: var(--blanco); margin-bottom: .4em; font-size: var(--t-cifra); line-height: 1.05; }
.hero__eslogan {
  font-family: var(--fuente-titulos); font-weight: 700; font-size: var(--t-pequeno);
  letter-spacing: .06em; color: var(--celeste); margin-bottom: .9rem; text-transform: uppercase;
}
.hero__bajada { font-size: var(--t-medio); line-height: 1.55; color: #DCE3F2; max-width: 62ch; margin-bottom: 1.75rem; }
.hero__acciones { display: flex; flex-wrap: wrap; gap: .8rem; }
.hero__puertos {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 2rem 0 0; padding: 1rem 0 0;
  border-top: 1px solid rgba(255,255,255,.22); list-style: none; max-width: 640px;
  font-family: var(--fuente-titulos); font-size: var(--t-pequeno); font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: #C4CEE6;
}
.hero__puertos li::before { content: "■"; color: var(--azul-claro); margin-right: .5rem; font-size: .7em; vertical-align: .15em; }
@media (max-height: 700px) and (min-width: 861px) {
  .hero__puertos { margin-top: 1.25rem; }
}

/* ==========================================================================
   CIFRAS: panel azul flotante con contador animado
   ========================================================================== */
.cifras { position: relative; z-index: 2; margin-top: clamp(-5.5rem, -9vh, -4rem); }
.cifras__panel {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--degradado); color: var(--blanco); border-radius: 28px;
  box-shadow: 0 30px 60px -25px rgba(31,44,84,.6);
  padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1rem, 3vw, 2.5rem);
}
/* Textura de contenedor corrugado */
.cifras__panel::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .09;
  background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 14px);
}
/* Brillo que recorre el panel */
.cifras__panel::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; z-index: -1;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
  transform: skewX(-20deg);
}
.cifras__lista { display: grid; grid-template-columns: repeat(5, 1fr); list-style: none; margin: 0; padding: 0; }
.cifra {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: .55rem;
  padding: .25rem clamp(.75rem, 2vw, 1.75rem);
  border-left: 1px solid rgba(255,255,255,.18);
}
.cifra:first-child { border-left: 0; }
.cifra__icono {
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  background: rgba(255,255,255,.12); color: var(--blanco); margin-bottom: .35rem;
  transition: transform .4s var(--salida), background-color .4s var(--salida);
}
.cifra__icono svg { width: 24px; height: 24px; }
.cifra:hover .cifra__icono { transform: translateY(-3px) rotate(-6deg); background: rgba(255,255,255,.2); }
.cifra__numero {
  font-family: var(--fuente-titulos); font-weight: 800; font-size: var(--t-cifra);
  color: var(--blanco); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.cifra__texto { font-size: var(--t-pequeno); line-height: 1.3; color: #D6E6F5; }
.cifra__texto strong { display: block; font: 700 var(--t-pequeno) var(--fuente-titulos); letter-spacing: .12em; text-transform: uppercase; color: var(--blanco); }
.cifra--verde .cifra__icono { background: rgba(91,179,122,.35); }
.cifra--verde .cifra__numero { color: #B8F0CB; }
@media (max-width: 900px) {
  .cifras__lista { grid-template-columns: repeat(2, 1fr); row-gap: 1.75rem; }
  .cifra { border-left: 0; padding-inline: .5rem; }
  .cifra:last-child { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: no-preference) {
  .cifras__panel::after { animation: brillo 6s var(--salida) infinite; }
}
@keyframes brillo { 0% { left: -40%; } 60%, 100% { left: 130%; } }

/* ==========================================================================
   FOTOS (común)
   ========================================================================== */
.foto { margin: 0; position: relative; background: #DCE2EE; border-radius: var(--radio-foto); overflow: hidden; }
.foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--salida); }
.foto:hover img { transform: scale(1.04); }
.foto--4x3 { aspect-ratio: 4 / 3; }
.foto--3x4 { aspect-ratio: 3 / 4; }
.foto--16x10 { aspect-ratio: 16 / 10; }

/* ==========================================================================
   NOSOTROS
   ========================================================================== */
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
@media (max-width: 860px) { .dos-columnas { grid-template-columns: 1fr; } }
.foto-marco { position: relative; isolation: isolate; }
.foto-marco::after {
  content: ""; position: absolute; z-index: -1; inset: 1.5rem -1.5rem -1.5rem 1.5rem;
  background: repeating-linear-gradient(90deg, var(--azul-marino) 0 6px, #36497F 6px 12px);
  border-radius: var(--radio-foto);
}
@media (max-width: 560px) { .foto-marco::after { inset: 1rem -.6rem -1rem 1rem; } }
.pilares { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .8rem; }
.pilar { display: grid; grid-template-columns: 40px 1fr; gap: 0 .9rem; align-items: center; }
.pilar__icono {
  grid-row: span 2; width: 44px; height: 44px; border-radius: 50%; background: var(--fondo);
  display: grid; place-items: center; color: var(--azul-claro);
}
.pilar__icono svg { width: 22px; height: 22px; }
.pilar strong { font-family: var(--fuente-titulos); color: var(--azul-marino); font-size: var(--t-texto); }
.pilar span { color: var(--tinta-suave); font-size: var(--t-texto); line-height: 1.4; }

/* ==========================================================================
   SERVICIOS: selector (lista a la izquierda, panel con foto a la derecha)
   Sin JavaScript se muestran todos los paneles uno debajo del otro.
   ========================================================================== */
.servicios__cabecera { display: grid; grid-template-columns: 1.25fr 1fr; gap: .5rem clamp(2rem, 5vw, 4rem); align-items: end; margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }
.servicios__cabecera h2 { margin-bottom: 0; }
.servicios__cabecera .intro { margin: 0; }
.servicios__pestanas { display: none; }
.servicios__paneles { display: grid; gap: 1rem; }
/* Panel de servicio: 3 tipos de fondo (foto con velo, duotono y mapa de rutas) */
.servicio-panel {
  position: relative; overflow: hidden; isolation: isolate; border-radius: 24px; min-height: 300px;
  background: var(--marino-profundo); color: #DCE8F6;
}
.servicio-panel__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
/* Opción 1: foto con velo azul marino */
.servicio-panel--foto::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(31,44,84,.96) 0%, rgba(31,44,84,.86) 45%, rgba(31,44,84,.5) 100%);
}
/* Opción 2: foto en duotono azul */
.servicio-panel--duotono { background: var(--azul-marino); }
.servicio-panel--duotono .servicio-panel__foto { filter: grayscale(1) contrast(1.1); mix-blend-mode: luminosity; opacity: .38; }
.servicio-panel--duotono::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgba(31,44,84,.95) 0%, rgba(19,107,160,.3) 100%);
}
/* Opción 4: mapa de rutas entre puertos */
.servicio-panel--mapa { background: radial-gradient(circle at 80% 30%, #24467E 0%, var(--marino-profundo) 60%); }
.servicio-panel__mapa { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
/* Sombra azul detrás del texto para que las rutas no lo tapen */
.servicio-panel--mapa::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(31,44,84,.95) 0%, rgba(31,44,84,.75) 40%, rgba(31,44,84,0) 72%),
              linear-gradient(0deg, rgba(31,44,84,.9) 0%, rgba(31,44,84,0) 45%);
}
.servicio-panel__texto { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(1.5rem, 3vw, 2.5rem); max-width: 34rem; }
.servicio-panel__icono {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; margin-bottom: 1.25rem;
  background: rgba(255,255,255,.14); color: var(--blanco);
}
.servicio-panel__icono svg { width: 28px; height: 28px; stroke-width: 1.8; }
.servicio-panel__numero { display: block; font: 800 var(--t-cifra) var(--fuente-titulos); line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.55); margin-bottom: .5rem; }
.servicio-panel h3 { color: var(--blanco); margin: 0 0 .5rem; }
/* EDITAR AQUÍ: ancho del texto de cada servicio (más pequeño = más angosto) */
.servicio-panel p { margin: 0; color: #DCE8F6; max-width: 30ch; text-wrap: balance; }

.js .servicios-selector { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.5fr); gap: clamp(1rem, 2.5vw, 2rem); align-items: stretch; }
.js .servicios__pestanas { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; gap: .35rem; }
.js .servicios__pestanas li { flex: 1; display: flex; }
.servicios__pestanas button {
  flex: 1; display: flex; align-items: center; gap: .9rem; text-align: left; cursor: pointer;
  font: 700 var(--t-texto) var(--fuente-titulos); color: var(--azul-marino);
  background: var(--fondo); border: 0; border-radius: 14px; padding: .7rem 1.1rem; position: relative; overflow: hidden;
  transition: background-color .3s var(--salida), color .3s var(--salida), transform .3s var(--salida);
}
.servicios__pestanas button span { font: 800 var(--t-pequeno) var(--fuente-titulos); color: var(--azul-claro); min-width: 1.6rem; }
.servicios__pestanas button:hover { background: #E3E9F3; }
.servicios__pestanas button[aria-selected="true"]:hover { background: var(--azul-marino); }
.servicios__pestanas button[aria-selected="true"] { background: var(--azul-marino); color: var(--blanco); }
.servicios__pestanas button[aria-selected="true"] span { color: var(--celeste); }
/* Barra de progreso del cambio automático */
.servicios__pestanas button[aria-selected="true"]::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--celeste);
  transform-origin: left; animation: progreso 5s linear forwards;
}
.servicios-selector.en-pausa .servicios__pestanas button::after { animation-play-state: paused; }
@keyframes progreso { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.js .servicios__paneles { position: relative; display: block; min-height: 440px; }
.js .servicio-panel { position: absolute; inset: 0; min-height: 0; opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s linear .25s; }
.js .servicio-panel.activo { transition: opacity .25s ease, visibility 0s; }
.js .servicio-panel.activo { opacity: 1; visibility: visible; }
.js .servicio-panel .servicio-panel__texto { transform: translateY(8px); transition: transform .3s var(--salida); }
.js .servicio-panel.activo .servicio-panel__texto { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .servicios__pestanas button[aria-selected="true"]::after { animation: none; transform: none; }
}
@media (max-width: 900px) {
  .servicios__cabecera, .js .servicios-selector { grid-template-columns: 1fr; }
  /* Tablet: los 7 servicios visibles en dos columnas */
  .js .servicios__pestanas { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
  .js .servicios__pestanas li { display: flex; }
  .js .servicios__paneles { min-height: 340px; }
}

/* ==========================================================================
   COBERTURA: foto y puertos con la misma altura
   ========================================================================== */
.cobertura { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: stretch; }
#cobertura { --pad: clamp(3.5rem, 7vw, 5rem); }
.cobertura .foto { height: 100%; min-height: 430px; }
/* EDITAR AQUÍ: encuadre de la foto de cobertura (horizontal % vertical %) */
.cobertura .foto img { object-position: 50% 28%; }
/* EDITAR AQUÍ: encuadre de la foto de servicios (más a la derecha = se ve más el camión) */
.servicios__foto img { object-position: 100% 60%; }
.cobertura__info { display: flex; flex-direction: column; }
.puertos { flex: 1; display: grid; grid-auto-rows: 1fr; gap: .75rem; margin-top: 1rem; }
.puerto {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.5rem; border-radius: 14px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14);
  transition: background-color .35s var(--salida), border-color .35s var(--salida);
}
.puerto:hover { background: rgba(255,255,255,.1); border-color: rgba(157,203,234,.5); }
.puerto h3 { margin: 0; }
.puerto__region { display: block; margin-top: .2rem; font: 600 var(--t-pequeno) var(--fuente-titulos); letter-spacing: .12em; text-transform: uppercase; color: #8FC3E6; }
.puerto__codigo {
  font: 800 var(--t-cifra) var(--fuente-titulos); line-height: 1; letter-spacing: .02em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(157,203,234,.55);
}
@media (max-width: 860px) {
  .cobertura { grid-template-columns: 1fr; }
  .cobertura .foto { min-height: 0; aspect-ratio: 4 / 3; }
}

/* ==========================================================================
   FLOTA, SOSTENIBILIDAD Y SEGURIDAD
   ========================================================================== */
.bloques { display: grid; gap: clamp(1.25rem, 3vw, 2rem); margin-top: clamp(2.5rem, 5vw, 4rem); }
.bloque {
  display: grid; grid-template-columns: 1fr 1fr; align-items: stretch;
  background: var(--fondo); border-radius: 24px; overflow: hidden;
}
.bloque .foto { border-radius: 0; min-height: 380px; height: 100%; }
/* La foto se adapta a la altura del texto (no al revés) */
.bloque .foto img, .cobertura .foto img { position: absolute; inset: 0; }
.bloque__texto { padding: clamp(1.75rem, 4vw, 3.5rem); align-self: center; }
.bloque__texto p:last-child { margin-bottom: 0; }
.bloque--invertido .foto { order: 2; }
.bloque--oscuro { background: var(--marino-profundo); color: #DCE3F2; }
.bloque--oscuro h3 { color: var(--blanco); }
.bloque--oscuro .etiqueta { color: #8FC3E6; }
.bloque h3 { font-size: var(--t-medio); font-weight: 800; }
.dato-grande {
  font-family: var(--fuente-titulos); font-weight: 800; font-size: var(--t-cifra);
  line-height: .9; color: var(--azul-marino); display: block; margin-bottom: 1rem;
}
.dato-grande small { display: block; font-size: var(--t-pequeno); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--azul-claro); margin-top: .6rem; }
.dato-grande--claro { color: var(--blanco); font-size: var(--t-cifra-destacada); }
.dato-grande--claro small { color: var(--celeste); }
.dato-grande--verde small { color: #237042; }
/* Bloque principal: 42 vehículos propios (más grande) */
.bloque--destacado { grid-template-columns: 1.15fr 1fr; }
.bloque--destacado .foto { min-height: 480px; }
/* Bloque de sostenibilidad en verde (segundo en importancia después de la flota) */
.bloque--verde { background: linear-gradient(135deg, #E9F6EE 0%, #D3EEDD 100%); }
.bloque--verde { grid-template-columns: 1fr 1fr; }
.bloque--verde .foto { min-height: 360px; }
.bloque--verde .bloque__texto { padding: clamp(1.5rem, 3.5vw, 2.75rem) clamp(1.75rem, 4vw, 3.25rem); }
.bloque--verde .etiqueta { color: #237042; }
.bloque--verde h3 { color: #1E5E3A; }
.bloque--verde p { color: #35584A; }
.dato-grande--verde { color: #237042; }
.etiqueta__icono { width: 18px; height: 18px; }
.etiqueta:has(.etiqueta__icono)::before { display: none; }
/* Franja de seguridad (Satrack): misma anchura que los bloques, más baja */
.seguridad {
  display: grid; grid-template-columns: auto minmax(0, .9fr) minmax(0, 1.4fr); gap: 1.25rem clamp(1.5rem, 3vw, 2.5rem); align-items: center;
  background: var(--marino-profundo); color: #C4CEE6; border-radius: 24px; padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 4vw, 3rem);
}
.seguridad__icono { width: 64px; height: 64px; border-radius: 18px; background: rgba(157,203,234,.15); color: var(--celeste); display: grid; place-items: center; }
.seguridad__icono svg { width: 32px; height: 32px; }
.seguridad .etiqueta { color: #8FC3E6; margin-bottom: .4rem; }
.seguridad h3 { color: var(--blanco); margin: 0; font-size: var(--t-medio); }
.seguridad p { margin: 0; }
@media (max-width: 860px) { .seguridad { grid-template-columns: auto 1fr; } .seguridad > p { grid-column: 1 / -1; } }
/* Par de bloques: foto arriba, texto abajo */
.bloques__par { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.25rem, 3vw, 2rem); }
.bloque--vertical { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
.bloque--vertical .foto { min-height: 0; height: auto; aspect-ratio: 16 / 9; }
.bloque--vertical .bloque__texto { align-self: start; padding: clamp(1.5rem, 3vw, 2.5rem); }
@media (max-width: 760px) {
  .bloque, .bloque--destacado, .bloques__par { grid-template-columns: 1fr; }
  .bloque .foto, .bloque--destacado .foto { min-height: 0; aspect-ratio: 4 / 3; }
  .bloque--invertido .foto { order: 0; }
}

/* ==========================================================================
   CERTIFICACIONES (franja compacta)
   ========================================================================== */
.certificaciones { padding-block: clamp(2rem, 4vw, 3rem); background: var(--blanco); border-block: 1px solid var(--linea); }
.certificaciones .contenedor { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2.5rem; }
.certificaciones h2 { font-size: var(--t-pequeno); letter-spacing: .12em; text-transform: uppercase; margin: 0; color: var(--azul-marino); }
.certificados { display: flex; flex-wrap: wrap; gap: 1.25rem 2.25rem; list-style: none; margin: 0; padding: 0; align-items: center; }
.certificado { display: flex; align-items: center; gap: .8rem; }
.certificado img { height: 46px; width: auto; }
.certificado strong { display: block; font: 700 var(--t-pequeno) var(--fuente-titulos); color: var(--azul-marino); }
.certificado span { display: block; font-size: var(--t-pequeno); color: var(--tinta-suave); }

/* ==========================================================================
   CLIENTES: carrusel continuo
   ========================================================================== */
.carrusel {
  margin-top: 2.5rem; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.js .carrusel__pista { display: flex; width: max-content; }
.carrusel { padding-inline: var(--margen); }
.js .carrusel { padding-inline: 0; }
.clientes__logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; list-style: none; margin: 0; padding: 0; }
.js .clientes__logos { flex-wrap: nowrap; padding-right: 1rem; }
.clientes__logos li {
  flex: none; width: 200px; height: 120px; display: flex; align-items: center; justify-content: center;
  background: var(--blanco); border-radius: 16px; padding: 1.25rem 1.5rem;
}
.clientes__logos img { max-height: 70px; max-width: 150px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .7; transition: filter .4s var(--salida), opacity .4s var(--salida); }
.clientes__logos li:hover img { filter: none; opacity: 1; }
@keyframes desplazar { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: no-preference) {
  .js .carrusel__pista { animation: desplazar 45s linear infinite; }
  .carrusel:hover .carrusel__pista { animation-play-state: paused; }
}

/* ==========================================================================
   EQUIPO
   ========================================================================== */
/* Sección compacta: no debe quitar protagonismo al resto del sitio */
.equipo { --pad: clamp(3.5rem, 7vw, 5.5rem); }
.equipo__cabecera { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.equipo__cabecera .intro { margin-bottom: 0; }
.equipo__grupo { aspect-ratio: 16 / 8; max-height: 260px; width: 100%; }
@media (max-width: 860px) { .equipo__cabecera { grid-template-columns: 1fr; } }
.equipo__lista { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 2rem 0 0; list-style: none; padding: 0; }
.persona {
  display: flex; align-items: center; gap: 1rem; padding: 1rem 1.1rem;
  background: var(--fondo); border-radius: 16px; transition: transform .35s var(--salida);
}
.persona:hover { transform: translateY(-3px); }
/* Si falta la foto, se ven las iniciales sobre el degradado (no se rompe el diseño) */
.persona__foto {
  position: relative; flex: none; width: 68px; height: 68px; border-radius: 50%; overflow: hidden;
  background: var(--degradado); display: grid; place-items: center;
}
.persona__iniciales { font: 800 var(--t-medio) var(--fuente-titulos); color: rgba(255,255,255,.92); letter-spacing: .04em; }
.persona__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.persona__datos { min-width: 0; }
.persona h3 { margin: 0; font-size: var(--t-texto); }
.persona__cargo { font: 600 var(--t-pequeno) var(--fuente-titulos); letter-spacing: .08em; text-transform: uppercase; color: var(--azul-claro); margin: .15rem 0 .4rem; }
.persona__contacto { list-style: none; padding: 0; margin: 0; font-size: var(--t-pequeno); display: grid; gap: .05rem; line-height: 1.4; }
.persona__contacto a { color: var(--tinta); text-decoration: none; overflow-wrap: anywhere; }
.persona__contacto a:hover { color: var(--azul-claro); text-decoration: underline; }
@media (max-width: 960px) { .equipo__lista { grid-template-columns: 1fr; max-width: 520px; } }

/* ==========================================================================
   PREGUNTAS FRECUENTES
   ========================================================================== */
.preguntas__cabecera { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: .5rem 2rem; margin-bottom: 2rem; }
.preguntas__cabecera h2 { margin-bottom: 0; }
.preguntas__cabecera .intro { margin: 0; }
.preguntas { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.preguntas__columna { border-top: 2px solid var(--azul-marino); }
@media (max-width: 860px) {
  .preguntas { grid-template-columns: 1fr; }
  .preguntas__columna + .preguntas__columna { border-top: 0; }
}
.pregunta { border-bottom: 1px solid var(--linea); }
.pregunta summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.25rem 0; font: 700 var(--t-texto) var(--fuente-titulos); color: var(--azul-marino);
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::after {
  content: "+"; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--fondo);
  display: grid; place-items: center; font-size: var(--t-medio); font-weight: 600; color: var(--azul-claro);
  transition: transform .35s var(--salida), background-color .35s var(--salida);
}
.pregunta[open] summary::after { transform: rotate(45deg); background: #E3EEF7; }
.pregunta__respuesta { padding: 0 0 1.4rem; color: var(--tinta-suave); max-width: 68ch; }
.pregunta__respuesta p:last-child { margin: 0; }

/* ==========================================================================
   CONTACTO Y FORMULARIOS
   ========================================================================== */
.contacto__cabecera { display: grid; grid-template-columns: 1.6fr 1fr; gap: .5rem clamp(2rem, 5vw, 4rem); align-items: end; margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }
.contacto__cabecera h2, .contacto__cabecera .intro { margin: 0; }
@media (max-width: 900px) { .contacto__cabecera { grid-template-columns: 1fr; } }
.contacto { display: grid; grid-template-columns: 1.3fr .7fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (max-width: 960px) { .contacto { grid-template-columns: 1fr; } }
.formulario {
  background: var(--blanco); border: 1px solid var(--linea); border-radius: 20px;
  padding: clamp(1.25rem, 3vw, 2rem); display: grid; grid-template-columns: 1fr 1fr; gap: .8rem 1.1rem;
}
.seccion--blanca .formulario { background: var(--fondo); border-color: transparent; }
.campo { display: grid; gap: .4rem; align-content: start; }
.campo--completo { grid-column: 1 / -1; }
@media (max-width: 640px) { .formulario { grid-template-columns: 1fr; } }
.campo label { font: 600 var(--t-pequeno) var(--fuente-titulos); color: var(--azul-marino); }
.campo .opcional { font-weight: 500; color: var(--tinta-suave); }
.campo input, .campo select, .campo textarea {
  width: 100%; font: inherit; font-size: var(--t-texto); color: var(--tinta);
  background: var(--blanco); border: 1.5px solid var(--linea); border-radius: 10px; padding: .65rem .85rem;
  transition: border-color .2s, box-shadow .2s;
}
.campo input[type="file"] { padding: .65rem; }
.campo textarea { min-height: 84px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--azul-claro); box-shadow: 0 0 0 3px rgba(19,107,160,.18); }
.campo select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--azul-marino) 50%), linear-gradient(135deg, var(--azul-marino) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 2.5rem; }
.campo__ayuda { font-size: var(--t-pequeno); color: var(--tinta-suave); }
.autorizacion { grid-column: 1 / -1; display: flex; gap: .75rem; align-items: flex-start; font-size: var(--t-pequeno); color: var(--tinta-suave); }
.autorizacion input { width: 1.2rem; height: 1.2rem; margin-top: .2rem; flex: none; accent-color: var(--azul-claro); }
.formulario .boton { grid-column: 1 / -1; justify-self: start; }
.oculto { display: none !important; }
.contacto__lateral { display: grid; gap: 1rem; }
.contacto__bloque { padding-bottom: 1.25rem; border-bottom: 1px solid var(--linea); display: grid; gap: .5rem; justify-items: start; }
.contacto__bloque:first-child { gap: 1rem; padding-bottom: 1.75rem; }
.contacto__bloque:first-child .contacto__telefono { padding-top: .25rem; }
.contacto__bloque:last-child { border-bottom: 0; }
.contacto__bloque h3 { font-size: var(--t-texto); margin: 0; }
.contacto__bloque p { margin: 0; color: var(--tinta-suave); font-size: var(--t-pequeno); }
.contacto__telefono { font: 800 var(--t-medio) var(--fuente-titulos); color: var(--azul-marino); text-decoration: none; }

/* ==========================================================================
   PÁGINAS INTERNAS (PQR, política, gracias)
   ========================================================================== */
.cabecera-pagina { background: var(--degradado); color: var(--blanco); padding-block: clamp(3rem, 7vw, 5rem); }
.cabecera-pagina h1 { color: var(--blanco); margin-bottom: .3em; }
.cabecera-pagina p { color: #DCE8F6; max-width: 64ch; margin: 0; font-size: var(--t-medio); }
.cabecera-pagina .etiqueta { color: #BFE0F5; }
.aviso {
  display: grid; gap: .3rem; padding: 1.2rem 1.4rem; border-radius: 14px;
  background: var(--blanco); border: 1px solid var(--linea); border-top: 4px solid var(--azul-claro);
}
.aviso strong { font-family: var(--fuente-titulos); color: var(--azul-marino); }
.texto-legal { max-width: 78ch; }
.texto-legal h2 { font-size: var(--t-medio); margin-top: 2.5rem; }
.texto-legal h3 { margin-top: 1.5rem; }
.texto-legal li { margin-bottom: .4rem; }
.radicado {
  display: inline-block; margin: 1rem 0; padding: 1rem 1.4rem; border-radius: 14px;
  background: var(--fondo); border: 2px dashed var(--azul-claro);
  font: 800 var(--t-medio) var(--fuente-titulos); color: var(--azul-marino); letter-spacing: .04em;
  overflow-wrap: anywhere;
}
.pendiente { background: #FFF4CC; color: #6B5300; padding: 0 .3em; border-radius: 2px; font-weight: 600; }

/* ==========================================================================
   PIE DE PÁGINA
   ========================================================================== */
.pie { background: var(--marino-profundo); color: #B9C4DE; padding-block: clamp(3rem, 6vw, 4.5rem) 1.5rem; font-size: var(--t-pequeno); }
.pie__columnas { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 2rem; }
@media (max-width: 900px) { .pie__columnas { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pie__columnas { grid-template-columns: 1fr; } }
.pie__logo img { height: 52px; width: auto; margin-bottom: 1rem; }
/* EDITAR AQUÍ: logos de certificaciones del pie de página */
.pie__sellos { display: flex !important; flex-wrap: wrap; gap: .6rem; margin: 1.1rem 0 .8rem !important; }
.pie__sellos li { background: var(--blanco); border-radius: 10px; padding: .4rem .6rem; display: grid; place-items: center; height: 58px; }
.pie__sellos img { height: 42px; width: auto; }
.pie h2 { font-size: var(--t-pequeno); letter-spacing: .14em; text-transform: uppercase; color: var(--blanco); margin-bottom: 1rem; }
.pie address { font-style: normal; }
.pie p { margin: 0 0 .6rem; }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.pie a { color: #DCE3F2; text-decoration: none; }
.pie a:hover { color: var(--blanco); text-decoration: underline; }
.pie__base {
  margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; font-size: var(--t-pequeno);
}

/* ---------- Botón flotante de WhatsApp ---------- */
.whatsapp-flotante {
  position: fixed; right: clamp(1rem, 3vw, 1.75rem); bottom: clamp(1rem, 3vw, 1.75rem); z-index: 90;
  width: 60px; height: 60px; border-radius: 50%; background: #187A42; color: var(--blanco);
  display: grid; place-items: center; box-shadow: 0 6px 18px rgba(20,40,30,.28);
  transition: transform .25s var(--salida), background-color .2s;
}
.whatsapp-flotante:hover { background: #11603A; color: var(--blanco); transform: translateY(-2px); }
.whatsapp-flotante svg { width: 32px; height: 32px; }

/* ---------- Animación de entrada (solo con JavaScript y si el usuario no pidió reducir movimiento) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .aparece { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--salida), transform .8s var(--salida); }
  .js .aparece.visible { opacity: 1; transform: none; }
  .js .aparece--retraso-1 { transition-delay: .12s; }
  .js .aparece--retraso-2 { transition-delay: .24s; }
  .hero__texto > * { animation: subir .9s var(--salida) both; }
  .hero__texto > *:nth-child(2) { animation-delay: .08s; }
  .hero__texto > *:nth-child(3) { animation-delay: .16s; }
  .hero__texto > *:nth-child(4) { animation-delay: .24s; }
  .hero__texto > *:nth-child(5) { animation-delay: .32s; }
}
@keyframes subir { from { opacity: 0; transform: translateY(16px); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Contacto: autorización y botón en la misma fila para que la sección quepa en una pantalla */
#contacto .autorizacion { grid-column: 1; }
#contacto .formulario .boton { grid-column: 2; justify-self: end; align-self: center; }
@media (max-width: 640px) { #contacto .autorizacion, #contacto .formulario .boton { grid-column: 1; justify-self: start; } }

/* ---------- Aviso de cookies (solo aparece si se configura Google Analytics en js/main.js) ---------- */
.aviso-cookies {
  position: fixed; left: clamp(1rem, 3vw, 1.75rem); bottom: clamp(1rem, 3vw, 1.75rem); z-index: 120;
  max-width: 460px; background: var(--blanco); color: var(--tinta); border-radius: 18px; padding: 1.25rem 1.4rem;
  box-shadow: 0 20px 50px -15px rgba(31,44,84,.45); font-size: var(--t-pequeno);
}
.aviso-cookies p { margin: 0 0 1rem; }
.aviso-cookies__botones { display: flex; gap: .6rem; justify-content: flex-end; flex-wrap: wrap; }
.aviso-cookies .boton { padding: .65rem 1.1rem; }
@media (max-width: 560px) { .aviso-cookies { right: 1rem; max-width: none; } }
.pie__enlace { background: none; border: 0; padding: 0; font: inherit; color: #DCE3F2; cursor: pointer; text-align: left; }
.pie__enlace:hover { color: var(--blanco); text-decoration: underline; }
/* ==========================================================================
   AJUSTES PARA CELULAR (pantallas de hasta 640 px)
   --------------------------------------------------------------------------
   Todo lo de este bloque solo se aplica en teléfonos. El diseño de
   computador no cambia. EDITAR AQUÍ los tamaños del celular.
   ========================================================================== */
@media (max-width: 640px) {
  :root {
    --margen: 1.15rem;
    --seccion: 3.25rem;                 /* espacio arriba y abajo de cada sección */
    --alto-menu: 64px;
    --t-texto: 1rem;                    /* 16 px */
    --t-medio: 1.0625rem;               /* 17 px: introducciones y subtítulos */
    --t-titulo: 1.65rem;                /* títulos de sección */
    --t-cifra: 2.1rem;                  /* título de portada y cifras */
    --t-cifra-destacada: 4rem;          /* el 42 de la flota */
    --t-pequeno: .8125rem;
  }
  body { line-height: 1.6; }
  .menu__logo img { height: 40px; }
  .intro { line-height: 1.55; }

  /* ---------- Portada ---------- */
  .hero { min-height: calc(100svh - var(--alto-menu)); }
  .hero .contenedor { padding-block: 1.5rem 4.25rem; }
  .hero__eslogan { font-size: .72rem; letter-spacing: .08em; margin-bottom: .6rem; }
  .hero h1 { font-size: 2.1rem; line-height: 1.08; margin-bottom: .55em; }
  .hero__bajada { font-size: 1rem; line-height: 1.55; margin-bottom: 1.25rem; }
  .hero__acciones { flex-direction: column; gap: .6rem; }
  .hero__acciones .boton { width: 100%; padding: .85rem 1rem; }
  .hero__puertos { margin-top: 1.25rem; padding-top: .75rem; gap: .35rem 1rem; font-size: .7rem; padding-right: 64px; }

  /* ---------- Cifras ---------- */
  .cifras { margin-top: -2.75rem; }
  .cifras__panel { border-radius: 20px; padding: 1.25rem .75rem; }
  .cifras__lista { row-gap: 1.1rem; }
  .cifra { gap: .2rem; padding-inline: .25rem; }
  .cifra__icono { width: 34px; height: 34px; border-radius: 10px; margin-bottom: .2rem; }
  .cifra__icono svg { width: 18px; height: 18px; }
  .cifra__texto { font-size: .8rem; }
  .cifra__texto strong { font-size: .7rem; letter-spacing: .1em; }

  /* ---------- Nosotros ---------- */
  .dos-columnas { gap: 2rem; }
  .pilares { margin-top: 1.25rem; gap: .7rem; }
  .pilar { grid-template-columns: 36px 1fr; gap: 0 .75rem; }
  .pilar__icono { width: 36px; height: 36px; }
  .pilar__icono svg { width: 18px; height: 18px; }
  .pilar span { font-size: .9rem; }
  .foto-marco::after { inset: .75rem -.5rem -.75rem .75rem; }

  /* ---------- Certificaciones: cuadrícula de 2 x 2 ---------- */
  .certificaciones { padding-block: 1.75rem; }
  .certificaciones .contenedor { gap: 1rem; }
  .certificados { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem .75rem; width: 100%; }
  .certificado { gap: .55rem; }
  .certificado img { height: 34px; }
  .certificado strong { font-size: .78rem; }
  .certificado span { font-size: .7rem; }

  /* ---------- Servicios ---------- */
  .servicios__cabecera { margin-bottom: 1.25rem; }
  .js .servicios-selector { gap: .9rem; }
  /* Celular: los 7 servicios visibles en una lista vertical; el panel queda debajo */
  .js .servicios__pestanas { grid-template-columns: 1fr; gap: .35rem; }
  .servicios__pestanas button { font-size: .9rem; padding: .7rem .95rem; gap: .65rem; border-radius: 12px; }
  .servicios__pestanas button span { font-size: .72rem; min-width: 1.3rem; }
  .servicios__pestanas button:hover { transform: none; }
  .js .servicios__paneles { min-height: 270px; }
  .servicio-panel { border-radius: 18px; }
  .servicio-panel__texto { padding: 1.25rem; }
  .servicio-panel__icono { width: 42px; height: 42px; border-radius: 12px; margin-bottom: .75rem; }
  .servicio-panel__icono svg { width: 22px; height: 22px; }
  .servicio-panel__numero { font-size: 1.75rem; margin-bottom: .3rem; }
  .servicio-panel h3 { font-size: 1.1rem; }
  .servicio-panel p { font-size: .95rem; }

  /* ---------- Cobertura ---------- */
  .cobertura { gap: 1.5rem; }
  .cobertura .foto { aspect-ratio: 16 / 10; }
  .puertos { gap: .6rem; }
  .puerto { padding: .85rem 1.1rem; border-radius: 12px; }
  .puerto h3 { font-size: 1.05rem; }
  .puerto__region { font-size: .7rem; }
  .puerto__codigo { font-size: 1.75rem; }

  /* ---------- Flota ---------- */
  .bloques { gap: 1rem; margin-top: 1.75rem; }
  .bloque { border-radius: 18px; }
  .bloque .foto, .bloque--destacado .foto { aspect-ratio: 16 / 10; }
  .bloque__texto, .bloque--verde .bloque__texto { padding: 1.4rem 1.25rem 1.5rem; }
  .bloque h3 { font-size: 1.1rem; }
  .dato-grande { margin-bottom: .6rem; }
  .dato-grande small { font-size: .72rem; margin-top: .35rem; }
  .dato-grande--verde { font-size: 2.6rem; }
  .seguridad { grid-template-columns: auto 1fr; gap: .8rem 1rem; padding: 1.25rem; border-radius: 18px; }
  .seguridad__icono { width: 46px; height: 46px; border-radius: 14px; }
  .seguridad__icono svg { width: 24px; height: 24px; }
  .seguridad h3 { font-size: 1.05rem; }
  .seguridad > p { font-size: .92rem; }

  /* ---------- Clientes ---------- */
  .carrusel { margin-top: 1.5rem; }
  .clientes__logos li { width: 150px; height: 92px; padding: 1rem; border-radius: 12px; }
  .clientes__logos img { max-height: 54px; max-width: 115px; }

  /* ---------- Equipo ---------- */
  .equipo { --pad: 3.25rem; }
  .equipo__lista { gap: .65rem; margin-top: 1.5rem; }
  .persona { padding: .85rem 1rem; gap: .85rem; }
  .persona__foto { width: 54px; height: 54px; }
  .persona__iniciales { font-size: 1rem; }
  .persona__cargo { font-size: .66rem; letter-spacing: .05em; margin-bottom: .25rem; }
  .persona__contacto { font-size: .82rem; }

  /* ---------- Preguntas frecuentes ---------- */
  .preguntas__cabecera { margin-bottom: 1.25rem; }
  .pregunta summary { padding: 1rem 0; font-size: .95rem; }
  .pregunta summary::after { width: 28px; height: 28px; font-size: 1.1rem; }
  .pregunta__respuesta { font-size: .93rem; padding-bottom: 1.1rem; }

  /* ---------- Contacto ---------- */
  .contacto__cabecera { margin-bottom: 1.25rem; gap: .4rem; }
  .formulario { padding: 1.15rem; gap: .75rem; border-radius: 16px; }
  .campo input, .campo select, .campo textarea { padding: .6rem .75rem; }
  #contacto .formulario .boton { width: 100%; }
  .contacto__lateral { gap: .75rem; }
  .contacto__bloque:first-child { gap: .75rem; padding-bottom: 1.25rem; }
  .contacto__bloque .boton--whatsapp { width: 100%; }

  /* ---------- Pie de página: más compacto ---------- */
  .pie { padding-block: 2.5rem 1.25rem; }
  .pie__columnas { grid-template-columns: 1fr 1fr; gap: 1.5rem 1rem; }
  .pie__columnas > div:nth-child(1), .pie__columnas > div:nth-child(2) { grid-column: 1 / -1; }
  .pie__logo img { height: 42px; margin-bottom: .75rem; }
  .pie h2 { margin-bottom: .6rem; }
  .pie__sellos li { height: 50px; padding: .35rem .5rem; }
  .pie__sellos img { height: 34px; }
  .pie__base { margin-top: 1.75rem; }

  /* ---------- Botón flotante de WhatsApp más pequeño ---------- */
  .whatsapp-flotante { width: 52px; height: 52px; right: .9rem; bottom: .9rem; }
  .whatsapp-flotante svg { width: 28px; height: 28px; }

  /* ---------- Páginas internas (PQR, política, términos, gracias) ---------- */
  .cabecera-pagina { padding-block: 2.25rem; }
  .cabecera-pagina h1 { font-size: 1.75rem; }
  .cabecera-pagina p { font-size: 1rem; }
  .texto-legal h2 { margin-top: 1.75rem; }
}

/* ==========================================================================
   PÁGINAS DE PUERTO (ej.: transporte-contenedores-buenaventura.html)
   ========================================================================== */
.hero-puerto { position: relative; isolation: isolate; overflow: hidden; background: var(--marino-profundo); color: var(--blanco); }
.hero-puerto__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; z-index: -2; }
.hero-puerto::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(31,44,84,.95) 0%, rgba(31,44,84,.82) 50%, rgba(31,44,84,.45) 100%);
}
.hero-puerto .contenedor { padding-block: clamp(2.5rem, 7vw, 5rem); max-width: var(--ancho); }
.hero-puerto h1 { color: var(--blanco); font-size: var(--t-cifra); line-height: 1.08; max-width: 18ch; margin-bottom: .45em; }
.hero-puerto__bajada { font-size: var(--t-medio); color: #DCE3F2; max-width: 58ch; margin-bottom: 1.75rem; }
.migas { font-size: var(--t-pequeno); color: #C4CEE6; margin-bottom: 1.25rem; }
.migas a { color: var(--celeste); }

/* Rutas frecuentes */
.rutas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.ruta {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: .15rem .9rem; align-items: center;
  background: var(--blanco); border-radius: 18px; padding: 1.25rem 1.4rem; border: 1px solid var(--linea);
  transition: transform .3s var(--salida), border-color .3s var(--salida);
}
.ruta:hover { transform: translateY(-3px); border-color: var(--azul-claro); }
.ruta__origen { grid-column: 1 / -1; font: 700 var(--t-pequeno) var(--fuente-titulos); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-suave); }
.ruta__flecha { width: 34px; height: 2px; background: var(--azul-claro); position: relative; grid-row: 2; }
.ruta__flecha::after { content: ""; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-left: 7px solid var(--azul-claro); border-right: 0; }
.ruta__destino { grid-row: 2; font: 800 var(--t-medio) var(--fuente-titulos); color: var(--azul-marino); }
.ruta__region { grid-column: 1 / -1; font-size: var(--t-pequeno); color: var(--tinta-suave); }
.ruta--otra { background: var(--degradado); border-color: transparent; grid-template-columns: 1fr; }
.ruta--otra .ruta__destino, .ruta--otra .ruta__region { grid-row: auto; color: var(--blanco); }

/* Servicios en el puerto */
.servicios-puerto { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.servicio-puerto { display: flex; gap: 1rem; align-items: flex-start; padding: 1.25rem; border-radius: 16px; background: var(--fondo); }
.servicio-puerto__icono { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--azul-marino); color: var(--blanco); }
.servicio-puerto__icono svg { width: 24px; height: 24px; }
.servicio-puerto h3 { margin: 0 0 .25rem; font-size: var(--t-texto); }
.servicio-puerto p { margin: 0; font-size: var(--t-pequeno); color: var(--tinta-suave); line-height: 1.5; }

/* Por qué L-TRANS */
.razones { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.razon { padding: 1.4rem; border-radius: 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); }
.razon__icono { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(157,203,234,.15); color: var(--celeste); margin-bottom: 1rem; }
.razon__icono svg { width: 22px; height: 22px; }
.razon h3 { color: var(--blanco); font-size: var(--t-texto); margin: 0 0 .4rem; }
.razon p { margin: 0; font-size: var(--t-pequeno); color: #C4CEE6; line-height: 1.5; }

.preguntas--una { grid-template-columns: 1fr; max-width: 860px; }

@media (max-width: 960px) {
  .rutas, .servicios-puerto { grid-template-columns: 1fr 1fr; }
  .razones { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .hero-puerto .contenedor { padding-block: 2rem 2.5rem; }
  .hero-puerto h1 { font-size: 1.9rem; }
  .hero-puerto__bajada { font-size: 1rem; margin-bottom: 1.25rem; }
  .rutas { grid-template-columns: 1fr 1fr; gap: .65rem; }
  .ruta { padding: .9rem 1rem; border-radius: 14px; gap: .1rem .6rem; }
  .ruta__flecha { width: 20px; }
  .ruta__destino { font-size: 1rem; }
  .servicios-puerto, .razones { grid-template-columns: 1fr; gap: .65rem; }
  .servicio-puerto { padding: 1rem; }
  .servicio-puerto__icono { width: 40px; height: 40px; }
  .razones { margin-top: 1.25rem; }
  .razon { padding: 1.1rem; display: grid; grid-template-columns: auto 1fr; gap: .2rem .9rem; }
  .razon__icono { grid-row: span 2; margin: 0; width: 40px; height: 40px; }
}

/* Terminales de Buenaventura (portada de la página del puerto) */
.terminales { list-style: none; margin: 1.75rem 0 0; padding: 1rem 0 0; border-top: 1px solid rgba(255,255,255,.22); display: flex; flex-wrap: wrap; gap: .5rem; }
.terminales::before { content: "Operamos en:"; width: 100%; font: 700 var(--t-pequeno) var(--fuente-titulos); letter-spacing: .1em; text-transform: uppercase; color: #C4CEE6; margin-bottom: .2rem; }
.terminales li { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); border-radius: 999px; padding: .35rem .85rem; font: 700 var(--t-pequeno) var(--fuente-titulos); color: var(--blanco); }
.terminales abbr { text-decoration: none; cursor: help; }

/* Página de puerto: cinco razones (3 arriba, 2 abajo) */
.razones--cinco { grid-template-columns: repeat(6, 1fr); }
.razones--cinco .razon { grid-column: span 2; }
.razones--cinco .razon:nth-child(n+4) { grid-column: span 3; }
@media (max-width: 900px) {
  .razones--cinco { grid-template-columns: 1fr 1fr; }
  .razones--cinco .razon, .razones--cinco .razon:nth-child(n+4) { grid-column: auto; }
  .razones--cinco .razon:last-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .razones--cinco { grid-template-columns: 1fr; }
}

/* Página de servicio: cuatro tarjetas de ruta en una fila */
.rutas--cuatro { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .rutas--cuatro { grid-template-columns: 1fr 1fr; } }

/* Páginas de ciudad: cifras montadas sobre la portada */
.hero-puerto--con-cifras .contenedor { padding-bottom: clamp(6rem, 13vh, 7.5rem); }
.cifras--pagina { margin-top: clamp(-5rem, -8vh, -3.5rem); }

/* Páginas de ciudad: a quién acompañamos */
.perfiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.perfil { background: var(--blanco); border: 1px solid var(--linea); border-radius: 16px; padding: 1.5rem; transition: transform .25s ease, box-shadow .25s ease; }
.perfil:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(31,44,84,.10); }
.perfil__icono { width: 48px; height: 48px; border-radius: 14px; background: var(--degradado); color: var(--blanco); display: grid; place-items: center; margin-bottom: 1rem; }
.perfil__icono svg { width: 24px; height: 24px; }
.perfil h3 { font-size: var(--t-texto); margin: 0 0 .4rem; }
.perfil p { margin: 0; font-size: var(--t-pequeno); line-height: 1.55; }

/* Páginas de ciudad: cómo funciona */
.pasos { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; counter-reset: paso; }
.paso { position: relative; padding: 1.4rem; border-radius: 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); counter-increment: paso; }
.paso::before { content: counter(paso, decimal-leading-zero); display: block; font: 800 var(--t-titulo) var(--fuente-titulos); color: var(--celeste); line-height: 1; margin-bottom: .8rem; }
.paso h3 { color: var(--blanco); font-size: var(--t-texto); margin: 0 0 .4rem; }
.paso p { margin: 0; font-size: var(--t-pequeno); color: #C4CEE6; line-height: 1.5; }

@media (max-width: 900px) {
  .perfiles, .pasos { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .perfiles, .pasos { grid-template-columns: 1fr; gap: .65rem; }
  .perfil, .paso { padding: 1.1rem; }
  .hero-puerto--con-cifras .contenedor { padding-bottom: 4.25rem; }
}
@media (max-width: 640px) {
  .cifras--pagina { margin-top: -2.5rem; }
}

/* ==========================================================================
   PÁGINA BARRANQUILLA: diseño propio
   ========================================================================== */
.hero-ciudad { background: var(--fondo); padding-block: clamp(2rem, 5vw, 4rem); overflow: hidden; }
.hero-ciudad__rejilla { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.hero-ciudad h1 { font-size: var(--t-cifra); line-height: 1.08; margin-bottom: .45em; }
.hero-ciudad__bajada { font-size: var(--t-medio); max-width: 52ch; margin-bottom: 1.75rem; }
.migas--oscuras { color: var(--gris); }
.migas--oscuras a { color: var(--azul-claro); }
.hero-ciudad__datos { list-style: none; margin: 2rem 0 0; padding: 1.25rem 0 0; border-top: 1px solid var(--linea); display: flex; gap: clamp(1.5rem, 4vw, 3rem); }
.hero-ciudad__datos strong { display: block; font: 800 var(--t-titulo) var(--fuente-titulos); color: var(--azul-marino); line-height: 1; }
.hero-ciudad__datos li:last-child strong { color: #237042; }
.hero-ciudad__datos span { font-size: var(--t-pequeno); color: var(--gris); }
.hero-ciudad__foto { position: relative; margin: 0; }
.hero-ciudad__foto img { width: 100%; height: auto; aspect-ratio: 4 / 3.4; object-fit: cover; border-radius: 28px 28px 28px 120px; box-shadow: 0 30px 60px rgba(31,44,84,.18); }
.hero-ciudad__sello { position: absolute; left: -1.5rem; bottom: 2rem; display: flex; align-items: center; gap: .75rem; background: var(--blanco); border-radius: 16px; padding: .9rem 1.2rem; box-shadow: 0 14px 30px rgba(31,44,84,.16); }
.hero-ciudad__sello svg { width: 28px; height: 28px; color: var(--azul-claro); flex: none; }
.hero-ciudad__sello strong { display: block; color: var(--azul-marino); font-family: var(--fuente-titulos); }
.hero-ciudad__sello span { font-size: var(--t-pequeno); color: var(--gris); }

.movimientos { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--azul-marino); }
.movimiento { display: grid; grid-template-columns: 11rem 3.5rem 14rem 1fr; align-items: center; gap: 1rem; padding: 1.2rem .5rem; border-bottom: 1px solid var(--linea); transition: background .25s ease, padding .25s ease; }
.movimiento:hover { background: var(--fondo); padding-inline: 1rem; }
.movimiento__desde { font: 700 var(--t-pequeno) var(--fuente-titulos); text-transform: uppercase; letter-spacing: .1em; color: var(--gris); }
.movimiento__flecha { height: 2px; background: var(--azul-claro); position: relative; }
.movimiento__flecha::after { content: ""; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-left: 8px solid var(--azul-claro); border-right: 0; }
.movimiento__hasta { font: 800 var(--t-medio) var(--fuente-titulos); color: var(--azul-marino); }
.movimiento p { margin: 0; font-size: var(--t-pequeno); color: var(--gris); }

.servicios-baq { display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.servicios-baq .intro { margin-bottom: 1.5rem; }
.lista-check { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 2rem; }
.lista-check li { display: flex; gap: .9rem; align-items: flex-start; }
.lista-check__icono { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--azul-claro); color: var(--blanco); display: grid; place-items: center; }
.lista-check__icono svg { width: 16px; height: 16px; }
.lista-check strong { display: block; color: var(--azul-marino); font-family: var(--fuente-titulos); margin-bottom: .2rem; }
.lista-check span { font-size: var(--t-pequeno); color: var(--gris); }

.franja-verde { position: relative; isolation: isolate; overflow: hidden; color: #E9F6EE; padding-block: clamp(3rem, 7vw, 5rem); background: #1E5E3A; }
.franja-verde__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.franja-verde::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(20,72,44,.96) 0%, rgba(20,72,44,.88) 55%, rgba(20,72,44,.55) 100%); }
.franja-verde__rejilla { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.franja-verde__numero { font: 900 clamp(5rem, 14vw, 10rem) var(--fuente-titulos); line-height: .85; color: #9FE0B5; }
.franja-verde h2 { color: var(--blanco); }
.franja-verde .etiqueta { color: #9FE0B5; display: flex; align-items: center; gap: .5rem; }
.franja-verde .etiqueta::before { display: none; }
.etiqueta__icono-verde svg { width: 18px; height: 18px; display: block; }
.franja-verde p { max-width: 55ch; margin: 0; }

.sede { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; border-radius: 24px; overflow: hidden; }
.sede__foto { margin: 0; min-height: 420px; position: relative; }
.sede__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sede__tarjeta { background: var(--marino-profundo); color: #DCE3F2; padding: clamp(1.75rem, 4vw, 3rem); }
.sede__tarjeta h2 { color: var(--blanco); }
.sede__tarjeta .etiqueta { color: #8FC3E6; }
.sede__datos { list-style: none; margin: 1.5rem 0 1.75rem; padding: 0; display: grid; gap: .8rem; }
.sede__datos li { display: flex; gap: .75rem; align-items: center; }
.sede__datos svg { width: 20px; height: 20px; color: var(--celeste); flex: none; }
.sede__datos a { color: var(--blanco); font-weight: 700; }

@media (max-width: 900px) {
  .hero-ciudad__rejilla, .servicios-baq, .sede { grid-template-columns: 1fr; }
  .hero-ciudad__sello { left: 1rem; bottom: 1rem; }
  .movimiento { grid-template-columns: 1fr; gap: .25rem; }
  .movimiento__flecha { display: none; }
  .movimiento__desde::after { content: " →"; }
  .sede__foto { min-height: 240px; }
}
@media (max-width: 640px) {
  .hero-ciudad__datos { gap: 1.25rem; }
  .hero-ciudad__foto img { border-radius: 20px 20px 20px 60px; }
  .lista-check { grid-template-columns: 1fr; gap: 1rem; }
  .franja-verde__rejilla { grid-template-columns: 1fr; gap: .5rem; }
}
.lista-check__icono svg { stroke-width: 3; color: var(--blanco); }
.lista-check span:not(.lista-check__icono) { display: block; line-height: 1.5; }

/* ==========================================================================
   PÁGINAS DE CIUDAD v3: portada dividida, franjas, mapa, sectores, comparativo
   ========================================================================== */
.hero-ciudad__datos--texto { gap: clamp(1rem, 3vw, 2rem); flex-wrap: wrap; }
.hero-ciudad__datos--texto li { display: flex; gap: .65rem; align-items: center; }
.hero-ciudad__datos--texto strong { font-size: var(--t-texto); font-weight: 800; margin-bottom: .1rem; }
.hero-ciudad__datos li:last-child strong { color: var(--azul-marino); }
.hero-ciudad__dato-icono { flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--blanco); color: var(--azul-claro); display: grid; place-items: center; box-shadow: 0 6px 16px rgba(31,44,84,.08); }
.hero-ciudad__dato-icono svg { width: 20px; height: 20px; }
.hero-ciudad--vertical .hero-ciudad__foto img { aspect-ratio: 4 / 4.2; object-position: 50% 30%; }
.certificaciones + .cifras--pagina { margin-top: clamp(2rem, 4vw, 3rem); margin-bottom: 0; }

.franja-verde--azul { background: var(--marino-profundo); }
.franja-verde--azul::before { background: linear-gradient(270deg, rgba(31,44,84,.96) 0%, rgba(31,44,84,.88) 55%, rgba(31,44,84,.55) 100%); }
.franja-verde--azul .franja-verde__numero, .franja-verde--azul .etiqueta { color: var(--celeste); }
.franja-verde--azul p { color: #DCE3F2; }
.franja-verde--invertida .franja-verde__rejilla { grid-template-columns: 1fr auto; }
.franja-verde--invertida .franja-verde__numero { order: 2; }
.franja-verde--invertida .franja-verde__rejilla > div { text-align: right; justify-self: end; }
.franja-verde--invertida .franja-verde__rejilla p { margin-left: auto; }
.franja-verde--invertida .etiqueta { justify-content: flex-end; }

.mapa { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.mapa__texto > p { color: #C4CEE6; }
.mapa__leyenda { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .85rem; }
.mapa__leyenda li { display: flex; gap: .85rem; align-items: flex-start; }
.mapa__leyenda strong { display: block; color: var(--blanco); font-family: var(--fuente-titulos); }
.mapa__leyenda span:not(.mapa__num) { font-size: var(--t-pequeno); color: #C4CEE6; }
.mapa__num { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--azul-claro); color: var(--blanco); font: 800 .8rem/28px var(--fuente-titulos); text-align: center; }
.mapa__figura { margin: 0; }
.mapa__figura svg { width: 100%; height: auto; display: block; border-radius: 24px; box-shadow: 0 30px 60px rgba(0,0,0,.25); }
.mapa__figura figcaption { font-size: .75rem; color: #8F9CC0; margin-top: .5rem; text-align: right; }
.mapa__tierra, .mapa__tierra-isla { fill: #EEF1F6; }
.mapa__mar { fill: #BFDDF2; }
.mapa__via { fill: none; stroke: var(--azul-claro); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 8 8; animation: via-flujo 1.6s linear infinite; }
@keyframes via-flujo { to { stroke-dashoffset: -32; } }
.mapa__rotulo-mar, .mapa__rotulo-bahia { font: italic 600 15px var(--fuente-texto); fill: #5C8DB5; letter-spacing: .04em; }
.mapa__rotulo { font: 700 14px var(--fuente-titulos); fill: var(--azul-marino); }
.mapa__circulo { fill: var(--azul-marino); stroke: var(--blanco); stroke-width: 3; }
.mapa__punto text { font: 800 13px var(--fuente-titulos); fill: var(--blanco); }
.mapa__pulso { fill: var(--azul-claro); opacity: .5; transform-box: fill-box; transform-origin: center; animation: pulso 2.4s ease-out infinite; animation-delay: var(--d); }
@keyframes pulso { from { transform: scale(1); opacity: .55; } to { transform: scale(2.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mapa__via, .mapa__pulso { animation: none; } }

.sectores { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.sector { background: var(--blanco); border: 1px solid var(--linea); border-radius: 16px; padding: 1.4rem; display: grid; gap: .35rem; align-content: start; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.sector:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(31,44,84,.10); border-color: var(--azul-claro); }
.sector__icono { width: 46px; height: 46px; border-radius: 14px; background: var(--fondo); color: var(--azul-claro); display: grid; place-items: center; margin-bottom: .5rem; }
.sector__icono svg { width: 24px; height: 24px; }
.sector strong { color: var(--azul-marino); font-family: var(--fuente-titulos); }
.sector span:last-child { font-size: var(--t-pequeno); color: var(--gris); line-height: 1.5; }

.comparativo { overflow-x: auto; border-radius: 20px; border: 1px solid var(--linea); }
.comparativo table { width: 100%; border-collapse: collapse; min-width: 560px; }
.comparativo th, .comparativo td { padding: 1rem 1.25rem; text-align: left; border-bottom: 1px solid var(--linea); font-size: var(--t-pequeno); }
.comparativo thead th { font: 800 var(--t-texto) var(--fuente-titulos); color: var(--azul-marino); background: var(--fondo); }
.comparativo tbody th { color: var(--azul-marino); font-family: var(--fuente-titulos); font-weight: 700; }
.comparativo tr:last-child th, .comparativo tr:last-child td { border-bottom: 0; }
.comparativo .comparativo__ltrans { background: rgba(19,107,160,.06); color: var(--azul-marino); font-weight: 600; }
.comparativo thead .comparativo__ltrans { background: var(--azul-marino); color: var(--blanco); }
.comparativo td { color: var(--gris); }
.comparativo__si, .comparativo__no { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; margin-right: .5rem; vertical-align: middle; }
.comparativo__si { background: #187A42; color: var(--blanco); }
.comparativo__no { background: #E6E9F0; color: #8A93A6; }
.comparativo__si svg, .comparativo__no svg { width: 13px; height: 13px; stroke-width: 3; }

.cotizador { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; background: var(--blanco); border: 1px solid var(--linea); border-radius: 24px; padding: clamp(1.5rem, 4vw, 2.5rem); }
.cotizador__form { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: .75rem; align-items: end; }
.cotizador__form label { display: grid; gap: .35rem; font: 700 var(--t-pequeno) var(--fuente-titulos); color: var(--azul-marino); }
.cotizador__form select, .cotizador__form input { width: 100%; padding: .7rem .75rem; border: 1px solid var(--linea); border-radius: 10px; font: inherit; font-weight: 400; background: var(--fondo); }

@media (max-width: 1100px) {
  .cotizador { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .mapa { grid-template-columns: 1fr; }
  .sectores { grid-template-columns: 1fr 1fr; }
  .cotizador__form { grid-template-columns: 1fr 1fr; }
  .cotizador__form .boton { grid-column: 1 / -1; }
  .franja-verde--invertida .franja-verde__rejilla { grid-template-columns: 1fr; }
  .franja-verde--invertida .franja-verde__numero { order: 0; }
  .franja-verde--invertida .franja-verde__rejilla > div { text-align: left; justify-self: start; }
  .franja-verde--invertida .etiqueta { justify-content: flex-start; }
}
@media (max-width: 640px) {
  .sectores { grid-template-columns: 1fr; gap: .65rem; }
  .sector { grid-template-columns: auto 1fr; column-gap: .9rem; }
  .sector__icono { grid-row: span 2; margin: 0; }
  .cotizador__form { grid-template-columns: 1fr; }
  .hero-ciudad__datos--texto { flex-direction: column; }
}
.cotizador { grid-template-columns: 1fr; }
.hero-ciudad__datos--texto { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.hero-ciudad__datos--texto li { flex-direction: column; align-items: flex-start; gap: .5rem; }
@media (max-width: 640px) {
  .hero-ciudad__datos--texto { grid-template-columns: 1fr; }
  .hero-ciudad__datos--texto li { flex-direction: row; align-items: center; }
}

/* Barranquilla v4: título compacto, franjas separadas, solo tamaños de la página principal */
.hero-ciudad--compacta h1 { font-size: var(--t-titulo); line-height: 1.12; max-width: 20ch; }
.franja-verde__numero { font-size: var(--t-cifra-destacada); }
.franja-verde--azul { border-bottom: .75rem solid var(--blanco); }
.sede__tarjeta .hero__acciones { margin-top: .25rem; }

/* Franjas de flota dentro del margen del sitio (como tarjetas) */
.franjas { padding-bottom: 0; }
.franjas__lista { display: grid; gap: .75rem; }
.franjas .franja-verde { border-radius: 24px; border-bottom: 0; padding-block: clamp(2.25rem, 5vw, 3.5rem); }
.franjas .franja-verde__rejilla { width: auto; padding-inline: clamp(1.5rem, 5vw, 3.5rem); }

/* Portada dividida: menos alto arriba (migas más cerca del menú) */
.hero-ciudad { padding-block: clamp(1.25rem, 2.5vw, 2rem) clamp(2rem, 4vw, 3rem); }
.hero-ciudad .migas { margin-bottom: .6rem; }
.hero-ciudad .etiqueta { margin-bottom: .6rem; }

/* Cartagena: cifras debajo de la portada dividida (sin montarse) y franjas con cierre propio */
.hero-ciudad + .cifras--pagina { margin-top: 0; margin-bottom: clamp(2rem, 4vw, 3rem); }
.franjas--cierre { padding-bottom: var(--seccion); }

/* Franja de llamado a la acción (color entre preguntas y cotización) */
.seccion--cta { padding-top: 0; }
.cta { display: grid; grid-template-columns: 1.4fr auto; gap: 1.5rem 3rem; align-items: center; background: var(--degradado); color: var(--blanco); border-radius: 24px; padding: clamp(1.75rem, 4vw, 3rem) clamp(1.5rem, 5vw, 3.5rem); }
.cta h2 { color: var(--blanco); margin: 0; max-width: 26ch; }
.cta .etiqueta { color: var(--celeste); }
@media (max-width: 900px) { .cta { grid-template-columns: 1fr; } }

/* Celular: Barranquilla · Cartagena · Buenaventura en una sola línea */
@media (max-width: 640px) {
  .hero__puertos { flex-wrap: nowrap; gap: .85rem; padding-right: 0; letter-spacing: .06em; font-size: .68rem; white-space: nowrap; }
  .hero__puertos li::before { margin-right: .35rem; }
}

/* Celular: páginas de ciudad más compactas */
@media (max-width: 640px) {
  .hero__puertos { gap: .7rem; }
  /* Portada: foto apaisada y datos más juntos */
  .hero-ciudad__foto img, .hero-ciudad--vertical .hero-ciudad__foto img { aspect-ratio: 16 / 11; border-radius: 18px 18px 18px 48px; }
  .hero-ciudad__sello { padding: .6rem .85rem; bottom: .75rem; left: .75rem; }
  .hero-ciudad__datos--texto { gap: .6rem; margin-top: 1.25rem; padding-top: 1rem; }
  .hero-ciudad__dato-icono { width: 34px; height: 34px; border-radius: 10px; }
  .hero-ciudad__dato-icono svg { width: 17px; height: 17px; }
  /* Sectores: mosaico de 2 columnas con ícono y nombre */
  .sectores { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .sector { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; padding: .9rem; }
  .sector__icono { width: 38px; height: 38px; border-radius: 12px; margin: 0; }
  .sector strong { font-size: var(--t-pequeno); line-height: 1.3; }
  .sector span:last-child { display: none; }
  /* Llamado a la acción */
  .cta { padding: 1.5rem 1.25rem; }
  .cta .hero__acciones { width: 100%; }
}

/* Celular: portada dividida sin foto y con más aire arriba */
@media (max-width: 640px) {
  .hero-ciudad__foto { display: none; }
  .hero-ciudad { padding-block: 2.25rem 2.5rem; }
  .hero-ciudad .migas { margin-bottom: 1.25rem; }
  .hero-ciudad .etiqueta { margin-bottom: .9rem; }
}

/* Cobertura: cada puerto enlaza a su página de ciudad */
a.puerto { color: inherit; text-decoration: none; }
.puerto__ver { display: block; margin-top: .35rem; font: 600 var(--t-pequeno) var(--fuente-titulos); color: var(--celeste); }
a.puerto:hover .puerto__ver { text-decoration: underline; }
@media (max-width: 640px) { .puerto__ver { font-size: .75rem; } }

/* ==========================================================================
   MENÚ: submenú de Cobertura con las tres sedes
   ========================================================================== */
.menu__grupo { position: relative; }
.menu__grupo > a { padding-right: 1rem; }
.menu__grupo::after {
  content: ""; position: absolute; right: 0; top: 50%; width: 6px; height: 6px; margin-top: -5px;
  border-right: 2px solid var(--azul-claro); border-bottom: 2px solid var(--azul-claro); transform: rotate(45deg);
  pointer-events: none; transition: transform .25s var(--salida), margin-top .25s var(--salida);
}
.menu__grupo:hover::after, .menu__grupo:focus-within::after { transform: rotate(225deg); margin-top: -1px; }
.menu__sub {
  position: absolute; top: calc(100% + .6rem); left: 50%; z-index: 5; min-width: 270px;
  list-style: none; margin: 0; padding: .5rem; background: var(--blanco);
  border: 1px solid var(--linea); border-radius: 16px; box-shadow: 0 18px 40px rgba(31,44,84,.14);
  opacity: 0; visibility: hidden; transform: translate(-50%, 8px);
  transition: opacity .2s var(--salida), transform .2s var(--salida), visibility .2s;
}
.menu__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -.8rem; height: .8rem; } /* puente para el mouse */
.menu__grupo:hover .menu__sub, .menu__grupo:focus-within .menu__sub { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.menu__enlaces .menu__sub a { display: block; padding: .65rem .85rem; border-radius: 10px; color: var(--azul-marino); font-size: var(--t-texto); font-weight: 700; }
.menu__enlaces .menu__sub a::after { display: none; }
.menu__enlaces .menu__sub a:hover, .menu__enlaces .menu__sub a:focus-visible { background: var(--fondo); }
.menu__sub span { display: block; margin-top: .1rem; font: 500 .75rem var(--fuente-texto); color: var(--gris); }

@media (max-width: 860px) {
  .menu__grupo::after { display: none; }
  .menu__grupo > a { padding-right: 0; }
  .menu__sub {
    position: static; min-width: 0; opacity: 1; visibility: visible; transform: none;
    padding: 0 0 .25rem 1rem; border: 0; border-radius: 0; box-shadow: none; background: none;
  }
  .menu__sub::before { display: none; }
  .menu__grupo:hover .menu__sub, .menu__grupo:focus-within .menu__sub { transform: none; }
  .menu__enlaces .menu__sub a { padding: .6rem 0; border-radius: 0; font-size: var(--t-pequeno); border-bottom: 1px solid var(--fondo); }
  .menu__enlaces .menu__sub a:hover { background: none; }
  .menu__sub span { display: inline; margin-left: .4rem; }
}