/* ================================================================
   GALGO GROUP — Overrides & mejoras de diseño
   Cargado después de style.css y custom.css para mayor especificidad
   ================================================================ */

/* ─── HONEYPOT: trampa anti-bot ─────────────────────────────── */
.lw-hp {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0 !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  tab-index: -1;
}

/* ─── BANNER (home): contenido alineado a la izquierda ───────── */

/* Velo degradado sobre la foto: da contraste al texto blanco de la
   izquierda sin apagar la imagen del lado derecho. */
#home .slide-item .bg-image:before {
  display: block;
  opacity: 1;
  background-color: transparent;
  background-image: linear-gradient(
    100deg,
    rgba(4, 34, 62, 0.9) 0%,
    rgba(4, 34, 62, 0.74) 24%,
    rgba(4, 34, 62, 0.42) 46%,
    rgba(4, 34, 62, 0.1) 68%,
    rgba(4, 34, 62, 0) 86%
  );
}

/* Fuera el recuadro azul animado */
#home .slide-item .content-box:before {
  content: none;
  display: none;
}

#home .slide-item .auto-container {
  display: flex;
  justify-content: flex-start;
}

#home .slide-item .content-box {
  max-width: 780px;
  text-align: left;
  /* Arriba: 275px del tema dejaban el botón fuera de la primera pantalla
     en laptops. Abajo: las cards de servicios traslapan el hero y con
     150px quedaban a 26px del botón, pegadas y en la misma columna. */
  padding: 200px 0 250px;
}

/* Barra de acento: sustituye al recuadro y ancla el bloque de texto */
#home .slide-item .content-box .title:before {
  content: "";
  display: block;
  width: 72px;
  height: 4px;
  margin-bottom: 28px;
  border-radius: 2px;
  background: linear-gradient(90deg, #5bc6de 0%, #5bc6de 60%, rgba(91, 198, 222, 0.25) 100%);
}

#home .slide-item .content-box .title {
  line-height: 1.06;
  letter-spacing: 0.01em;
  margin-bottom: 20px;
  text-shadow: 0 2px 20px rgba(2, 18, 38, 0.45);
}

#home .slide-item .content-box .sub-title {
  font-family: "Helvetica", sans-serif;
  font-size: 26px;
  font-weight: 400;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 40px;
  text-shadow: 0 1px 14px rgba(2, 18, 38, 0.45);
}

#home .slide-item .content-box .btn-box {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 12px;
}

/* ─── Botón principal del hero ───────────────────────────────────
   Misma familia que el "Cotizar" del navbar (esquinas redondeadas,
   chip para el icono, elevación al hover), pero en cian y a mayor
   escala: es el llamado más fuerte de la página. El relleno azul que
   entra de izquierda a derecha en hover es el :before que ya trae el
   tema; aquí sólo se le pone el color y se recorta al radio. */
#home .slide-item .content-box .btnSlide {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 15px 15px 15px 30px;
  border-radius: 10px;
  background: linear-gradient(135deg, #74d4e7 0%, #5bc6de 55%, #45b6d2 100%);
  box-shadow: 0 14px 32px rgba(2, 18, 38, 0.34),
              inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transition: transform 280ms cubic-bezier(0.2, 0.7, 0.3, 1),
              box-shadow 280ms ease;
}

#home .slide-item .content-box .btnSlide .btn-title {
  position: relative;
  z-index: 1;
  display: block;
  font-family: "Mukta Mahee", sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.07em;
  line-height: 1;
  text-transform: uppercase;
  color: #04223e;
  transition: color 300ms ease;
}

/* Chip circular de la flecha */
#home .slide-item .content-box .btnSlide .btn-arrow {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: rgba(4, 34, 62, 0.14);
  color: #04223e;
  font-size: 13px;
  transition: background-color 300ms ease, color 300ms ease,
              transform 320ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

#home .slide-item .content-box .btnSlide .btn-arrow i {
  top: 0;
  margin: 0;
  color: inherit;
  font-size: inherit;
}

#home .slide-item .content-box .btnSlide:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px rgba(4, 67, 163, 0.42),
              inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

#home .slide-item .content-box .btnSlide:hover .btn-title {
  color: #fff;
}

#home .slide-item .content-box .btnSlide:hover .btn-arrow {
  background-color: #5bc6de;
  color: #04223e;
  transform: translateX(4px);
}

#home .slide-item .content-box .btnSlide:active {
  transform: translateY(0);
  box-shadow: 0 6px 16px rgba(2, 18, 38, 0.3);
  transition-duration: 90ms;
}

#home .slide-item .content-box .btnSlide:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.85);
  outline-offset: 3px;
}

@media (max-width: 1399.98px) {
  /* Menos arriba para no perder el botón bajo la línea de flotación en
     laptops, pero el mismo colchón abajo: las cards traslapan igual. */
  #home .slide-item .content-box {
    padding: 175px 0 250px;
  }
}

/* Tablet en vertical: el tema salta de 50px a 33px en el punto 768px y
   el título queda casi del tamaño del subtítulo. Aquí se emparejan. */
@media (min-width: 768px) and (max-width: 991.98px) {
  #home .slide-item .content-box .title {
    font-size: 44px !important;
  }
  #home .slide-item .content-box .sub-title {
    font-size: 22px;
  }
}

@media (max-width: 991.98px) {
  /* En vertical el texto ocupa todo el ancho: el velo va de arriba
     abajo en lugar de izquierda a derecha. */
  #home .slide-item .bg-image:before {
    background-image: linear-gradient(
      180deg,
      rgba(4, 34, 62, 0.78) 0%,
      rgba(4, 34, 62, 0.5) 45%,
      rgba(4, 34, 62, 0.8) 100%
    );
  }
  #home .slide-item .auto-container {
    justify-content: flex-start;
  }
  #home .slide-item .content-box {
    max-width: 100%;
    text-align: left;
    padding: 150px 0 110px;
  }
  #home .slide-item .content-box .btn-box {
    justify-content: flex-start;
  }
}

/* ─── SERVICIOS (home): cards de las 4 líneas de negocio ─────────
   El fondo era un mapa de mundo recortado con costura visible y cada
   card llevaba una marca de agua (.ghostImage) que se desbordaba fuera
   del recuadro. Ahora: degradado de marca sin imagen y cards limpias
   con el icono duotono como protagonista. */

.boxesSlide {
  background-color: #0443a3;
  background-image:
    radial-gradient(120% 90% at 12% 0%, rgba(91, 198, 222, 0.22) 0%, rgba(91, 198, 222, 0) 55%),
    linear-gradient(135deg, #06336f 0%, #0443a3 45%, #3366ca 100%);
  background-repeat: no-repeat;
  background-size: cover;
  padding: 0 0 90px;
}

/* La fila completa sube y traslapa el hero. El traslape va aquí y no en
   cada .inner-box: con margen negativo en la card, su height:100% deja
   de coincidir con el alto de la columna y el enlace se desborda. */
.boxesSlide .outer-box {
  margin-top: -72px;
  margin-bottom: 48px;
}

/* Columna como flex: la card la llena y las cuatro quedan a la misma
   altura aunque las descripciones tengan distinto número de líneas. */
.boxesSlide .feature-block-three {
  display: flex;
  margin-bottom: 24px;
}

/* ─── Card ───────────────────────────────────────────────────── */
.boxesSlide .inner-box {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  padding: 34px 30px 32px;
  text-align: left;
  background-color: #fff;
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(2, 24, 58, 0.16);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.boxesSlide .inner-box:hover {
  transform: translateY(-8px);
  box-shadow: 0 26px 54px rgba(2, 24, 58, 0.26);
}

/* Filo cian que se dibuja arriba al pasar el cursor */
.boxesSlide .inner-box:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 4px;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(90deg, #5bc6de, #3366ca);
  transition: width 0.4s ease;
}

.boxesSlide .inner-box:hover:before {
  width: 100%;
}

/* ─── Icono ──────────────────────────────────────────────────── */
.boxesSlide .inner-box .iconBox {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  margin: 0 0 22px;
  border-radius: 12px;
  background: linear-gradient(150deg, #eef5fb 0%, #e2eefb 100%);
  transition: background 0.3s ease, transform 0.3s ease;
}

.boxesSlide .inner-box .iconBox img {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

.boxesSlide .inner-box:hover .iconBox {
  background: linear-gradient(150deg, #e2f4fa 0%, #cfe6fb 100%);
  transform: translateY(-2px);
}

/* ─── Texto ──────────────────────────────────────────────────── */
.boxesSlide .inner-box .title {
  font-family: "Mukta Mahee", sans-serif;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.25;
  color: #0443a3;
  margin: 0 0 10px;
  transition: color 0.3s ease;
}

.boxesSlide .inner-box .text {
  font-family: "Helvetica", sans-serif;
  font-size: 14.5px;
  line-height: 1.55;
  color: #5a6b80;
  margin: 0 0 22px;
}

/* El bloque de texto empuja el enlace al fondo: los 4 enlaces quedan
   alineados aunque las descripciones tengan distinto largo. */
.boxesSlide .inner-box .text {
  flex: 1 1 auto;
}

/* El tema convierte .read-more en un botón cuadrado de 38x38 con sólo
   la flecha; aquí vuelve a ser un enlace de texto. */
.boxesSlide .inner-box .read-more {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  font-family: "Mukta Mahee", sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #3366ca;
  background: none;
  background-color: transparent;
  transition: color 0.3s ease, gap 0.3s ease;
}

.boxesSlide .inner-box .read-more i {
  font-size: 14px;
  color: inherit;
  transition: transform 0.3s ease;
}

.boxesSlide .inner-box:hover .read-more {
  color: #0443a3;
  gap: 14px;
}

.boxesSlide .inner-box:hover .title {
  color: #0443a3;
}

/* ─── Banda inferior de clientes ─────────────────────────────── */
.boxesSlide .bottom-box .info-box {
  padding: 16px 34px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.boxesSlide .bottom-box .info-box:before {
  display: none;
}

.boxesSlide .bottom-box .info-box .text {
  font-size: 17px;
  font-weight: 500;
  color: #fff;
}

.boxesSlide .bottom-box .info-box .read-more {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5bc6de;
  transition: color 0.3s ease;
}

.boxesSlide .bottom-box .info-box .read-more i {
  color: inherit;
}

.boxesSlide .bottom-box .info-box .read-more:hover {
  color: #fff;
}

/* La miniatura de la banda medía 121x86 y se veía pixeleada al lado
   del texto; la banda queda mejor sola y centrada. */
.boxesSlide .bottom-box img {
  display: none;
}

@media (max-width: 991.98px) {
  .boxesSlide {
    padding-bottom: 80px;
  }
  .boxesSlide .outer-box {
    margin-top: 0;
    padding-top: 70px;
    margin-bottom: 40px;
  }
}

@media (max-width: 575.98px) {
  .boxesSlide .inner-box {
    padding: 28px 24px 26px;
  }
}

/* ─── INPUTS: estados focus y validación visual ──────────────── */

/* Inputs en secciones oscuras (#contacto, #cotiza) */
#contacto .form-column .block .form-group input,
#contacto .form-column .block .form-group textarea,
#cotiza .form-column .block .form-group input:not([type=checkbox]),
#cotiza .form-column .block .form-group select,
#cotiza .form-column .block .form-group textarea {
  border: 2px solid rgba(255,255,255,0.2);
  padding: 11px 16px;
  font-size: 15px;
  color: #1a1a2e;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

#contacto .form-column .block .form-group input:focus,
#contacto .form-column .block .form-group textarea:focus,
#cotiza .form-column .block .form-group input:not([type=checkbox]):focus,
#cotiza .form-column .block .form-group select:focus,
#cotiza .form-column .block .form-group textarea:focus {
  border-color: #5bc6de;
  box-shadow: 0 0 0 3px rgba(91,198,222,0.3);
  outline: none;
  background-color: #fff;
}

/* Validación visual: rojo si inválido, verde si válido (solo tras interacción) */
#contacto .form-column .block .form-group input:invalid:not(:placeholder-shown),
#cotiza .form-column .block .form-group input:not([type=checkbox]):invalid:not(:placeholder-shown) {
  border-color: #e74c3c;
  box-shadow: 0 0 0 2px rgba(231,76,60,0.2);
}
#contacto .form-column .block .form-group input:valid:not(:placeholder-shown),
#cotiza .form-column .block .form-group input:not([type=checkbox]):valid:not(:placeholder-shown) {
  border-color: #27ae60;
}

/* Select vacío (placeholder) */
#cotiza .form-column .block .form-group select:invalid {
  color: #9ca3af;
}

/* Inputs en página de contacto (fondo claro) */
#contacto-page .contactForm input,
#contacto-page .contactForm textarea {
  border: 2px solid #dde6f0;
  padding: 11px 16px;
  font-size: 15px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
#contacto-page .contactForm input:focus,
#contacto-page .contactForm textarea:focus {
  border-color: #5bc6de;
  box-shadow: 0 0 0 3px rgba(91,198,222,0.2);
  outline: none;
  background-color: #fff;
}
#contacto-page .contactForm input:invalid:not(:placeholder-shown) {
  border-color: #e74c3c;
}
#contacto-page .contactForm input:valid:not(:placeholder-shown) {
  border-color: #27ae60;
}

/* Newsletter */
#subscribe .subscribe-form .form-control {
  border: 2px solid rgba(255,255,255,0.35);
  padding: 11px 16px;
  font-size: 15px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
#subscribe .subscribe-form .form-control:focus {
  border-color: #5bc6de;
  box-shadow: 0 0 0 3px rgba(91,198,222,0.25);
  outline: none;
}
#subscribe .subscribe-form .form-control:invalid:not(:placeholder-shown) {
  border-color: #e74c3c;
}

/* ─── BOTONES SUBMIT: mejoras ─────────────────────────────────── */

/* Botón de formularios (contact + contacto page) */
#contacto .form-column .block .form-group .btnForm,
#contacto-page .contactForm .btnForm {
  border-radius: 8px;
  width: 100%;
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: background-color 0.25s ease, color 0.25s ease,
              transform 0.18s ease, box-shadow 0.18s ease;
}
#contacto .form-column .block .form-group .btnForm:hover,
#contacto-page .contactForm .btnForm:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(91,198,222,0.45);
}
#contacto .form-column .block .form-group .btnForm:active,
#contacto-page .contactForm .btnForm:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Botón cotiza */
#cotiza .form-column .block .form-group .btnCotiza {
  border-radius: 8px;
  width: 100%;
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: background-color 0.25s ease, color 0.25s ease,
              transform 0.18s ease, box-shadow 0.18s ease;
}
#cotiza .form-column .block .form-group .btnCotiza:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(91,198,222,0.45);
}
#cotiza .form-column .block .form-group .btnCotiza:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Newsletter subscribe button */
#subscribe .btnSubscribe {
  transition: background-color 0.25s ease, transform 0.18s ease;
}
#subscribe .btnSubscribe:hover {
  transform: scale(1.06);
}

/* Botones CTA generales (theme-btn) */
.theme-btn.btn-style-one {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.theme-btn.btn-style-one:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(4,67,163,0.22);
}
.theme-btn.btn-style-one:active {
  transform: translateY(0);
  box-shadow: none;
}

/* ─── ALERTS / FEEDBACK ──────────────────────────────────────── */
.contact-form-success,
.contact-form-error {
  border-radius: 8px;
  font-size: 14px;
  padding: 12px 16px;
}

/* ─── FORMULARIO COTIZA: mejoras de legibilidad ──────────────── */
#cotiza .form-column .block .titleBlock {
  border-bottom: 2px solid rgba(255,255,255,0.2);
  padding-bottom: 8px;
  margin-top: 8px;
  margin-bottom: 14px;
}

/* Checkboxes más grandes y usables */
#cotiza .form-column .block .form-group .checkBox {
  width: 18px;
  height: 18px;
  min-width: 18px;
  cursor: pointer;
  accent-color: #5bc6de;
  margin-top: 2px;
}
#cotiza .form-column .block .form-group .flexCheck .textCheckbox {
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
  flex: 0 0 calc(90% - 8px);
  padding-left: 8px;
}

/* ─── MOBILE: correcciones ───────────────────────────────────── */
@media (max-width: 767.98px) {

  /* Formulario contacto homepage: columnas a full width */
  #contacto .form-column .block .form-group.col-md-6,
  #contacto .form-column .block .form-group.col-lg-6 {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
  }

  /* Sección contacto: apilar columnas */
  #contacto .row.g-0 .form-column,
  #contacto .row.g-0 .secondColumn,
  #contacto .row.g-0 .gg-aside {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
  }

  /* Cotiza: columnas a full width */
  #cotiza .form-column .block .form-group.col-md-6,
  #cotiza .form-column .block .form-group.col-lg-6,
  #cotiza .col-md-6 {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
  }

  /* Banner: tipografía en móvil */
  #home .slide-item .content-box {
    padding: 130px 0 100px;
  }
  #home .slide-item .content-box .title {
    font-size: clamp(30px, 8.4vw, 40px) !important;
    line-height: 1.14;
  }
  #home .slide-item .content-box .title:before {
    width: 52px;
    height: 3px;
    margin-bottom: 18px;
  }
  #home .slide-item .content-box .sub-title {
    font-size: clamp(15px, 4.2vw, 19px);
    margin-bottom: 28px;
  }

  /* Botón banner: alineado a la izquierda */
  #home .slide-item .content-box .btn-box {
    justify-content: flex-start;
    margin-top: 0;
  }

  /* Página de contacto: stack columnas */
  #contact-top .col-xl-6,
  #contacto-page .col-xl-7,
  #contacto-page .col-xl-5 {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
  }

  /* Calculadoras: stack vertical */
  [id^="calculadora-"] .row.g-0 > div {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
    order: 0 !important;
  }

  /* Ajuste de padding en secciones */
  #cotiza {
    padding: 50px 0;
  }
  .page-title.headerSection {
    min-height: 180px;
    display: flex;
    align-items: center;
  }
}

@media (max-width: 575.98px) {
  /* Botones: full width en móvil muy pequeño */
  .theme-btn.btn-style-one {
    display: block;
    text-align: center;
    width: 100%;
  }
  #subscribe .theme-btn.btn-style-one,
  #contacto .gg-aside .theme-btn.btn-style-one,
  #contacto-page .theme-btn.btn-style-one {
    display: inline-block;
    width: auto;
  }
}

/* ================================================================
   HEADER — cintillo compacto + navbar con CTA
   - Cintillo (.header-top): 32px, sólo contacto y accesos rápidos.
   - Navbar: 5 entradas + botón "Cotizar" (antes vivía en el cintillo).
   - Sticky y menú móvil replican el CTA.
   ================================================================ */

/* ─── CINTILLO ────────────────────────────────────────────────── */
.header-style-two .header-top {
  background-color: #0443a3;
}

.lw-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 40px;
  min-height: 32px;
}

.lw-top-bar .top-left {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
}

/* Razón social: primer elemento del cintillo, separado del bloque de datos */
.lw-top-bar .top-legal {
  position: relative;
  padding-right: 20px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  line-height: 32px;
  color: #fff;
  white-space: nowrap;
}
.lw-top-bar .top-legal:after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 14px;
  background-color: rgba(255, 255, 255, 0.28);
}

.lw-top-bar ul {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lw-top-bar li {
  display: flex;
  align-items: center;
  font-size: 12px;
  line-height: 32px;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.85);
}

.lw-top-bar li i {
  font-size: 11px;
  color: #5bc6de;
  margin-right: 7px;
}

.lw-top-bar a {
  color: rgba(255, 255, 255, 0.85);
  transition: color 200ms ease;
}
.lw-top-bar a:hover {
  color: #fff;
}

/* Accesos rápidos a la derecha: se distinguen del bloque informativo */
.lw-top-bar .top-links li a {
  font-weight: 700;
  letter-spacing: 0.2px;
  color: #fff;
}
.lw-top-bar .top-links li a:hover {
  color: #5bc6de;
}

/* Degradado de contenido al angostar el viewport */
/* Al angostar, la razón social se queda y el resto se va retirando. */
@media (max-width: 1499.98px) {
  .lw-top-bar { padding: 0 24px; }
  .lw-top-bar ul { gap: 18px; }
  .lw-top-bar .top-left { gap: 16px; }
  .lw-top-bar .top-info li:first-child { display: none; } /* horario */
}
@media (max-width: 1199.98px) {
  .lw-top-bar .top-info li:nth-child(2) { display: none; } /* teléfono */
  .lw-top-bar .top-legal { font-size: 11px; }
}
@media (max-width: 1049.98px) {
  .lw-top-bar .top-info { display: none; }
}
/* El tema oculta el cintillo completo a ≤991px */

/* ─── MAIN BOX: logo | nav | CTA ──────────────────────────────── */
.header-style-two .header-lower .main-box {
  max-width: none !important;
  padding: 0 40px !important;
  display: flex !important;
  align-items: center !important;
}

/* ─── LOGO BOX ─────────────────────────────────────────────────── */
.header-style-two .header-lower .main-box .logo-box {
  flex-shrink: 0 !important;
  min-width: auto !important;
  height: auto !important;
  margin-top: 0 !important;
  margin-right: 32px !important;
  padding: 14px 0 !important;
}
.header-style-two .header-lower .main-box .logo-box:before {
  display: none !important;
}
.header-style-two .header-lower .main-box .logo-box .logo img {
  width: 180px !important;
  height: auto !important;
  display: block !important;
}
/* Sobre el banner va el logo blanco; el azul sólo entra en la barra sólida. */
.header-style-two .header-lower .main-box .logo-box .logo .logo-dark {
  display: none !important;
}
@media (max-width: 1399.98px) {
  .header-style-two .header-lower .main-box .logo-box .logo img {
    width: 155px !important;
  }
}

/* ─── NAV OUTER: ocupa el espacio libre, menú alineado a la derecha ── */
.header-style-two .main-box .nav-outer {
  flex: 1;
  display: flex !important;
  align-items: center;
  justify-content: flex-end !important;
  overflow: visible;
}

/* ─── NAV ITEMS ────────────────────────────────────────────────── */
/* El tema pinta un punto decorativo suelto entre ítems; queda descuadrado
   con cualquier espaciado propio y no aporta nada. Fuera. */
.main-header .main-menu .navigation > li:after {
  display: none !important;
}

/* Con 5 entradas sobra ancho: se recupera un tamaño legible (14px). */
.header-style-two .header-lower .main-box .main-menu .navigation > li {
  margin-right: 30px !important;
  padding: 22px 0 !important;
  white-space: nowrap;
}
.header-style-two .header-lower .main-box .main-menu .navigation > li:last-child {
  margin-right: 0 !important;
}
.header-style-two .header-lower .main-box .main-menu .navigation > li > a {
  font-size: 14px !important;
  letter-spacing: 0.4px;
  white-space: nowrap;
  color: var(--theme-color-light) !important;
}
.header-style-two .header-lower .main-box .main-menu .navigation > li > a:hover {
  color: #5bc6de !important;
}

/* Los ítems con desplegable reservan 16px para el chevron, así que el
   margen nunca baja de ~22px o el chevron se pega al ítem siguiente. */
@media (max-width: 1399.98px) {
  .header-style-two .header-lower .main-box .main-menu .navigation > li {
    margin-right: 26px !important;
  }
  .header-style-two .header-lower .main-box .main-menu .navigation > li > a {
    font-size: 13px !important;
  }
}
@media (max-width: 1199.98px) {
  .header-style-two .header-lower .main-box .main-menu .navigation > li {
    margin-right: 22px !important;
  }
  .header-style-two .header-lower .main-box .main-menu .navigation > li > a {
    font-size: 12px !important;
    letter-spacing: 0.2px !important;
  }
}

/* Indicador de desplegable: chevron en vez del "+" del tema */
.main-menu .navigation > li.dropdown > a {
  padding-right: 16px !important;
  margin-right: -16px !important;
}
.main-menu .navigation > li.dropdown > a:after {
  content: "\f107" !important;
  right: 0 !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  transition: transform 200ms ease;
}
.main-menu .navigation > li.dropdown:hover > a:after,
.main-menu .navigation > li.dropdown.open > a:after {
  transform: translateY(-50%) rotate(180deg);
}

/* ─── DROPDOWN PANEL ────────────────────────────────────────────── */
.main-menu .navigation > li > ul {
  width: max-content !important;
  min-width: 230px !important;
  padding: 6px 0 !important;
  border-top: 3px solid #5bc6de;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 12px 28px rgba(4, 34, 62, 0.18) !important;
}
.main-menu .navigation > li > ul > li {
  border-bottom: none !important;
}
/* El enlace ocupa toda la fila: el resaltado y el área clicable coinciden
   (antes el <a> iba con margen lateral y los bordes de la fila no eran
   clicables aunque se resaltaran). El hueco derecho reserva sitio para el
   chevron, así el panel no cambia de ancho al pasar el cursor. */
.main-menu .navigation > li > ul > li > a {
  position: relative;
  display: block;
  font-family: "Mukta Mahee", sans-serif;
  font-size: 14px !important;
  font-weight: 600;
  line-height: 22px !important;
  padding: 10px 40px 10px 24px !important;
  margin: 0 !important;
  white-space: nowrap;
  color: #04223e !important;
  transition: color 200ms ease, background-color 200ms ease;
}

/* Barra de acento que se despliega en el borde izquierdo */
.main-menu .navigation > li > ul > li > a:before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  bottom: 5px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background-color: #5bc6de;
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 240ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* Chevron que entra por la derecha al apuntar la fila */
.main-menu .navigation > li > ul > li > a:after {
  content: "\f105";
  font-family: "Font Awesome 6 Pro";
  font-weight: 900;
  position: absolute;
  right: 18px;
  top: 50%;
  font-size: 13px;
  line-height: 1;
  color: #5bc6de;
  opacity: 0;
  transform: translate(-7px, -50%);
  transition: opacity 200ms ease, transform 240ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* Página actual: barra azul y fondo tenue permanentes ("estás aquí").
   Va antes que :hover para que el hover mande al apuntarla. */
.main-menu .navigation > li > ul > li.active > a {
  color: #0443a3 !important;
  font-weight: 700;
  background-color: #f3f7ff;
}
.main-menu .navigation > li > ul > li.active > a:before {
  background-color: #0443a3;
  transform: scaleY(1);
}

/* Apuntada: fila completa resaltada, barra cian y chevron ("esto elegirías") */
.main-menu .navigation > li > ul > li:hover > a,
.main-menu .navigation > li > ul > li > a:focus-visible {
  color: #0443a3 !important;
  background-color: #e7f0ff;
}
.main-menu .navigation > li > ul > li:hover > a:before,
.main-menu .navigation > li > ul > li > a:focus-visible:before {
  transform: scaleY(1);
}
.main-menu .navigation > li > ul > li:hover > a:after,
.main-menu .navigation > li > ul > li > a:focus-visible:after {
  opacity: 1;
  transform: translate(0, -50%);
}
.main-menu .navigation > li > ul > li > a:focus-visible {
  outline: 2px solid #5bc6de;
  outline-offset: -2px;
}

/* Apertura y cierre suaves.
   El tema declara la transición sólo en la regla :hover, así que el panel
   entraba animado y desaparecía de golpe. La movemos al estado base y
   animamos `transform` (compositor) en lugar de `margin-top` (layout).
   Además abre con teclado (Tab) y con clic/tap, no sólo con hover. */
@media only screen and (min-width: 768px) {
  .main-menu .navigation > li > ul {
    top: 100% !important;
    margin-top: 0 !important;
    transform: translateY(14px);
    transform-origin: top center;
    transition: opacity 260ms ease,
                transform 320ms cubic-bezier(0.2, 0.7, 0.3, 1),
                visibility 320ms ease;
  }
  .main-menu .navigation > li.dropdown:hover > ul,
  .main-menu .navigation > li.dropdown:focus-within > ul,
  .main-menu .navigation > li.dropdown.open > ul {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 220ms ease,
                transform 320ms cubic-bezier(0.2, 0.7, 0.3, 1),
                visibility 320ms ease;
  }
}

/* ─── ACTIVE STATE ─────────────────────────────────────────────── */
.main-header .main-menu .navigation > li.active:before {
  background-color: #5bc6de !important;
  left: 0 !important;
  width: 100% !important;
}
.main-header .main-menu .navigation > li.active > a {
  color: #5bc6de !important;
}

/* ─── BOTÓN "COTIZAR" ──────────────────────────────────────────── */
/* Azul oscuro con texto blanco. Tres capas de movimiento en hover:
   el botón se eleva, un destello barre el fondo, el icono de cotización
   gira dentro de su chip y la flecha avanza. */
.header-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border-radius: 8px;
  background-color: #04223e;
  color: #fff;
  font-family: "Mukta Mahee", sans-serif;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  border: 0;
  box-shadow: 0 2px 10px rgba(4, 34, 62, 0.22);
  transition: background-color 300ms ease,
              transform 280ms cubic-bezier(0.2, 0.7, 0.3, 1),
              box-shadow 280ms ease;
}

/* Destello diagonal que cruza el botón */
.header-cta:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg,
              transparent 25%,
              rgba(91, 198, 222, 0.32) 50%,
              transparent 75%);
  transform: translateX(-115%);
  transition: transform 650ms cubic-bezier(0.3, 0.6, 0.3, 1);
}
.header-cta:hover:before,
.header-cta:focus-visible:before {
  transform: translateX(115%);
}

/* Chip del icono de cotización */
.header-cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: rgba(91, 198, 222, 0.16);
  color: #5bc6de;
  font-size: 11px;
  transition: background-color 300ms ease, color 300ms ease,
              transform 420ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.header-cta:hover .header-cta-icon,
.header-cta:focus-visible .header-cta-icon {
  background-color: #5bc6de;
  color: #04223e;
  transform: rotate(-10deg) scale(1.1);
}

.header-cta-label {
  position: relative;
}

.header-cta-arrow {
  font-size: 12px;
  opacity: 0.6;
  transition: transform 300ms cubic-bezier(0.2, 0.7, 0.3, 1), opacity 300ms ease;
}
.header-cta:hover .header-cta-arrow,
.header-cta:focus-visible .header-cta-arrow {
  transform: translateX(5px);
  opacity: 1;
}

.header-cta:hover,
.header-cta:focus-visible {
  background-color: #0443a3;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(4, 67, 163, 0.34);
}
.header-cta:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(4, 34, 62, 0.28);
  transition-duration: 90ms;
}
.header-cta:focus-visible {
  outline: 3px solid rgba(91, 198, 222, 0.6);
  outline-offset: 3px;
}

/* ─── OUTER BOX (CTA + toggler) ────────────────────────────────── */
.header-style-two .header-lower .main-box .outer-box,
.header-style-two .sticky-header .outer-box {
  display: flex !important;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  margin-left: 28px;
  margin-right: 0 !important;
}
@media (max-width: 1199.98px) {
  .header-style-two .header-lower .main-box .outer-box,
  .header-style-two .sticky-header .outer-box {
    margin-left: 16px;
  }
  .header-cta {
    padding: 10px 16px;
    font-size: 12.5px;
  }
}

/* El toggler ahora es <button>: reset de estilos nativos */
.mobile-nav-toggler {
  background: none;
  border: 0;
  padding: 0;
  appearance: none;
}

/* ─── MOBILE (≤991px): header sólido en el flujo ───────────────── */
/* El tema oculta header-top a ≤991px pero header-lower sigue siendo
   position:absolute — esto lo rompe en tablets. Lo corregimos: */
@media (max-width: 991.98px) {
  .header-style-two .header-lower {
    position: relative !important;
    background-color: #fff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 0 !important;
  }
  .header-style-two .header-lower .main-box {
    padding: 0 16px !important;
    justify-content: space-between;
  }
  .header-style-two .header-lower .main-box .logo-box {
    margin-right: 0 !important;
    padding: 10px 0 !important;
  }
  .header-style-two .header-lower .main-box .logo-box .logo img {
    max-width: 130px !important;
    max-height: 44px;
  }
  /* Barra blanca: el logo blanco era invisible aquí. */
  .header-style-two .header-lower .main-box .logo-box .logo .logo-light {
    display: none !important;
  }
  .header-style-two .header-lower .main-box .logo-box .logo .logo-dark {
    display: block !important;
  }
  .header-style-two .header-lower .main-box .outer-box {
    margin-left: auto;
    gap: 12px;
  }
  .header-cta {
    padding: 8px 14px;
    font-size: 11.5px;
    letter-spacing: 0.3px;
    gap: 8px;
  }
  .header-cta-arrow {
    display: none;
  }
  .header-cta-icon {
    width: 21px;
    height: 21px;
    font-size: 10px;
  }
}
/* En pantallas muy angostas el CTA vive sólo dentro del menú lateral */
@media (max-width: 359.98px) {
  .header-style-two .header-lower .main-box .outer-box .header-cta,
  .header-style-two .sticky-header .outer-box .header-cta {
    display: none;
  }
}

/* ─── STICKY HEADER ─────────────────────────────────────────────── */
.header-style-two .sticky-header {
  background-color: #fff;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.1);
}
/* El tema lo muestra con animate.css (slideInDown), que sólo anima la
   entrada: al volver arriba el header desaparecía de golpe. Lo sustituimos
   por una transición propia que corre en los dos sentidos. */
.header-style-two .sticky-header {
  transform: translateY(-100%);
  animation: none !important;
  transition: transform 360ms cubic-bezier(0.2, 0.7, 0.3, 1),
              opacity 260ms ease,
              visibility 360ms ease;
}
.header-style-two .sticky-header.fixed-header {
  transform: translateY(0);
}
.header-style-two .sticky-header .container-sticky {
  max-width: none !important;
  padding: 0 !important;
}
.header-style-two .sticky-header .inner-container {
  max-width: none !important;
  padding: 0 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}
.header-style-two .sticky-header .nav-outer {
  flex: 1;
  display: flex !important;
  align-items: center;
  justify-content: flex-end !important;
}
.header-style-two .sticky-header .logo img {
  width: 130px !important;
  height: auto !important;
  display: block !important;
}

/* Sticky nav items */
.header-style-two .sticky-header .main-menu .navigation > li {
  margin-left: 28px !important;
  margin-right: 0 !important;
  padding: 16px 0 !important;
  white-space: nowrap;
}
.header-style-two .sticky-header .main-menu .navigation > li > a {
  font-size: 14px !important;
  color: #0443a3 !important;
  white-space: nowrap;
}
.header-style-two .sticky-header .main-menu .navigation > li > a:hover {
  color: #3366ca !important;
}
@media (max-width: 1399.98px) {
  .header-style-two .sticky-header .main-menu .navigation > li {
    margin-left: 24px !important;
  }
  .header-style-two .sticky-header .main-menu .navigation > li > a {
    font-size: 12.5px !important;
  }
}
.header-style-two .sticky-header .main-menu .navigation > li.active:before {
  background-color: #3366ca !important;
  left: 0 !important;
  width: 100% !important;
}
.header-style-two .sticky-header .main-menu .navigation > li.active > a {
  color: #3366ca !important;
}
@media (max-width: 991.98px) {
  .header-style-two .sticky-header .inner-container {
    padding: 0 16px !important;
    justify-content: space-between !important;
  }
}
/* Toggler en sticky */
.sticky-header .mobile-nav-toggler {
  color: #0443a3 !important;
  font-size: 26px;
}

/* ─── MENÚ MÓVIL (panel lateral) ───────────────────────────────── */
.mobile-menu .navigation li a {
  font-family: "Mukta Mahee", sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.mobile-menu .navigation li:hover > a,
.mobile-menu .navigation li.active > a {
  color: #0443a3 !important;
}

/* Cintillo del panel: mismo bloque azul del header-top, que el tema oculta
   a ≤991px. Aquí la razón social puede envolver en dos líneas. */
.mobile-menu-topbar {
  background-color: #0443a3;
  padding: 11px 20px 12px;
}
.mobile-menu-topbar .top-legal {
  display: block;
  font-family: "Mukta Mahee", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2px;
  line-height: 1.45;
  color: #fff;
}
.mobile-menu-topbar .top-hours {
  display: flex;
  align-items: center;
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  font-family: "Mukta Mahee", sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}
.mobile-menu-topbar .top-hours i {
  font-size: 11px;
  color: #5bc6de;
  margin-right: 7px;
}

/* Bloque inferior: CTA + accesos que en desktop viven en el cintillo */
.mobile-menu-extra {
  padding: 22px 20px 32px;
  border-top: 1px solid #e6edf5;
  margin-top: 8px;
}
.mobile-menu-extra .header-cta-block {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 14px 18px;
  font-size: 13.5px;
  gap: 10px;
}
.mobile-menu-extra .header-cta-block .header-cta-arrow {
  display: inline-block;
}
.mobile-menu-extra .header-cta-block .header-cta-icon {
  width: 24px;
  height: 24px;
  font-size: 11px;
}
.mobile-menu-links {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
}
.mobile-menu-links li + li {
  margin-top: 2px;
}
.mobile-menu-links a {
  display: flex;
  align-items: center;
  padding: 9px 0;
  font-family: "Mukta Mahee", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #04223e;
  transition: color 200ms ease;
}
.mobile-menu-links a:hover {
  color: #0443a3;
}
.mobile-menu-links a i {
  width: 20px;
  font-size: 13px;
  color: #5bc6de;
  margin-right: 10px;
  text-align: center;
}

/* ================================================================
   FLOTANTES Y FOOTER
   ================================================================ */

/* ─── BURBUJA DE WHATSAPP ──────────────────────────────────────── */
/* Único contacto flotante (antes había además un icono de correo y una
   barra inferior en móvil). En reposo es un círculo con un halo que late;
   al apuntarlo se despliega en píldora hacia la izquierda y revela el
   mensaje, sin mover el icono de su sitio.
   Va en el azul de la marca y no en el verde de WhatsApp: el glifo es
   lo que da el reconocimiento, y el verde chocaba con toda la página. */
.wa-bubble {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 999;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  height: 60px;
  border-radius: 999px;
  background: linear-gradient(135deg, #0d55c4 0%, #0443a3 52%, #04223e 100%);
  color: #fff;
  text-decoration: none;
  /* El anillo cian la despega del azul de las secciones oscuras, donde
     un círculo azul liso se perdería contra el fondo. */
  box-shadow: 0 0 0 1.5px rgba(91, 198, 222, 0.55),
              0 10px 26px rgba(4, 34, 62, 0.42),
              0 2px 6px rgba(0, 0, 0, 0.12);
  transition: box-shadow 320ms ease, transform 320ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.wa-bubble:hover,
.wa-bubble:focus-visible {
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 0 0 2px rgba(91, 198, 222, 0.9),
              0 16px 34px rgba(4, 67, 163, 0.5),
              0 3px 8px rgba(0, 0, 0, 0.14);
}
.wa-bubble:active {
  transform: translateY(0);
  transition-duration: 90ms;
}
.wa-bubble:focus-visible {
  outline: 3px solid rgba(91, 198, 222, 0.75);
  outline-offset: 3px;
}

.wa-bubble-icon {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  font-size: 30px;
  line-height: 1;
  transition: transform 420ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.wa-bubble:hover .wa-bubble-icon,
.wa-bubble:focus-visible .wa-bubble-icon {
  transform: rotate(-8deg) scale(1.06);
}

.wa-bubble-label {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  max-width: 0;
  padding-left: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  text-align: left;
  transition: max-width 420ms cubic-bezier(0.2, 0.7, 0.3, 1),
              padding-left 420ms cubic-bezier(0.2, 0.7, 0.3, 1),
              opacity 240ms ease;
}
.wa-bubble:hover .wa-bubble-label,
.wa-bubble:focus-visible .wa-bubble-label {
  max-width: 230px;
  padding-left: 22px;
  opacity: 1;
}
.wa-bubble-title {
  font-family: "Mukta Mahee", sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.3px;
  line-height: 1.15;
}
.wa-bubble-sub {
  font-family: "Mukta Mahee", sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.15;
  opacity: 0.88;
}

/* Halo que se expande desde el borde del círculo */
.wa-bubble-pulse {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 60px;
  height: 60px;
  z-index: 0;
  border-radius: 50%;
  border: 2px solid rgba(91, 198, 222, 0.85);
  pointer-events: none;
  animation: waPulse 2.8s ease-out infinite;
}
@keyframes waPulse {
  0%   { transform: scale(1);    opacity: 0.75; }
  70%  { transform: scale(1.75); opacity: 0; }
  100% { transform: scale(1.75); opacity: 0; }
}
.wa-bubble:hover .wa-bubble-pulse,
.wa-bubble:focus-visible .wa-bubble-pulse {
  animation-play-state: paused;
  opacity: 0;
}

/* Indicador de disponibilidad */
.wa-bubble-dot {
  position: absolute;
  top: 9px;
  right: 9px;
  z-index: 3;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background-color: #5bc6de;
  border: 2px solid #04223e;
}

@media (max-width: 767.98px) {
  .wa-bubble {
    right: 16px;
    bottom: 16px;
    height: 54px;
  }
  .wa-bubble-icon {
    width: 54px;
    height: 54px;
    font-size: 27px;
  }
  .wa-bubble-pulse {
    width: 54px;
    height: 54px;
  }
  /* Sin hover en táctil: la píldora no aporta, se queda el círculo */
  .wa-bubble-label {
    display: none;
  }
  .wa-bubble-dot {
    top: 7px;
    right: 7px;
  }
}

/* ─── BACK TO TOP ──────────────────────────────────────────────── */
/* Sale del flotante (la esquina es de WhatsApp) y pasa a la barra
   inferior del footer, junto al aviso legal. */
.scroll-to-top {
  display: none !important;
}

.main-footer .footer-bottom .inner-container {
  align-items: center;
  gap: 18px;
}

.back-to-top {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding: 5px 20px 5px 5px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-family: "Mukta Mahee", sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  appearance: none;
  transition: background-color 260ms ease, border-color 260ms ease,
              transform 260ms cubic-bezier(0.2, 0.7, 0.3, 1),
              box-shadow 260ms ease;
}
.back-to-top-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: #5bc6de;
  color: #04223e;
  font-size: 13px;
  transition: background-color 260ms ease,
              transform 340ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.back-to-top:hover,
.back-to-top:focus-visible {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.42);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}
.back-to-top:hover .back-to-top-icon,
.back-to-top:focus-visible .back-to-top-icon {
  background-color: #fff;
  transform: translateY(-3px);
}
.back-to-top:active {
  transform: translateY(0);
  transition-duration: 90ms;
}
.back-to-top:focus-visible {
  outline: 3px solid rgba(91, 198, 222, 0.6);
  outline-offset: 3px;
}

@media (max-width: 767.98px) {
  .main-footer .footer-bottom .inner-container {
    gap: 4px;
  }
  .back-to-top {
    font-size: 12px;
  }
}


/* ─── PREFERENCIA DE MOVIMIENTO REDUCIDO ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .header-style-two .sticky-header,
  .main-menu .navigation > li > ul,
  .header-cta,
  .header-cta-icon,
  .header-cta-arrow {
    transition-duration: 1ms !important;
  }
  .header-cta:before {
    display: none;
  }
  .header-cta:hover,
  .header-cta:focus-visible {
    transform: none;
  }
  .header-cta:hover .header-cta-icon,
  .header-cta:focus-visible .header-cta-icon {
    transform: none;
  }
  .wa-bubble-pulse {
    animation: none;
    opacity: 0;
  }
  .wa-bubble,
  .wa-bubble-icon,
  .wa-bubble-label,
  .back-to-top,
  .back-to-top-icon,
  .main-menu .navigation > li > ul > li > a,
  .main-menu .navigation > li > ul > li > a:before,
  .main-menu .navigation > li > ul > li > a:after {
    transition-duration: 1ms !important;
  }
  .wa-bubble:hover,
  .back-to-top:hover {
    transform: none;
  }
  .wa-bubble:hover .wa-bubble-icon,
  .back-to-top:hover .back-to-top-icon {
    transform: none;
  }
}

/* ================================================================
   REDISEÑO DE SECCIONES — continuación del trabajo del hero
   ================================================================
   El tema original apoyaba cada sección en una foto de stock distinta
   (marrones, naranjas, mapas recortados) más clipart decorativo: aviones
   punteados, textos fantasma gigantes, rombos y círculos sueltos. El
   resultado era ruidoso y cada apartado tenía su propia paleta.

   Aquí se unifica todo en el sistema que ya usaban el hero y las cards
   de servicios: navy → azul de marca con acento cian, superficies claras
   para el contenido, cards de 14px de radio y una sola familia de botón.
   Las fotos que aportan (puerto, contenedores) se conservan bajo un velo
   de marca; las que sólo hacían ruido se van y las sustituye un degradado.
   ================================================================ */

:root {
  --gg-navy:      #04223e;
  --gg-navy-2:    #06336f;
  --gg-blue:      #0443a3;
  --gg-blue-2:    #3366ca;
  --gg-cyan:      #5bc6de;
  --gg-cyan-2:    #74d4e7;

  --gg-ink:       #0f2338;  /* títulos sobre fondo claro */
  --gg-body:      #5a6b80;  /* texto corrido */
  --gg-muted:     #5a6b80;  /* alias de --gg-body: css/blog.css usa este nombre */
  --gg-line:      #e3ebf5;
  --gg-surface:   #f5f8fc;  /* fondo de sección claro */
  --gg-surface-2: #eef4fb;  /* chips de icono */

  --gg-radius:    14px;
  --gg-radius-sm: 10px;
  --gg-shadow:    0 18px 40px rgba(2, 24, 58, 0.10);
  --gg-shadow-h:  0 26px 54px rgba(2, 24, 58, 0.20);
  --gg-ease:      cubic-bezier(0.2, 0.7, 0.3, 1);

  /* Ritmo vertical: una sola escala para todas las secciones */
  --gg-pad:       clamp(64px, 7vw, 104px);
}

/* Degradado de marca reutilizable (mismo que .boxesSlide) */
.gg-band-dark,
#cifras,
.cta1, .cta2, .cta3,
#subscribe .outer-box,
#contacto .gg-aside {
  background-color: var(--gg-blue);
  background-image:
    radial-gradient(120% 90% at 12% 0%, rgba(91, 198, 222, 0.20) 0%, rgba(91, 198, 222, 0) 55%),
    linear-gradient(135deg, var(--gg-navy-2) 0%, var(--gg-blue) 45%, var(--gg-blue-2) 100%);
  background-repeat: no-repeat;
  background-size: cover;
}

/* ─── FUERA EL CLIPART DEL TEMA ────────────────────────────────
   Aviones en trayectoria punteada, mapas recortados, textos fantasma
   gigantes, rombos y círculos sueltos. No aportan información y son
   el origen del "ruido" que hacía ver el sitio viejo. */
.icon-plane-1, .icon-plane-2, .icon-plane-3, .icon-plane-4,
.icon-plane-5, .icon-plane-6, .icon-plane-7, .icon-plane-8, .icon-plane-9,
.bg-map, .bg-map-2, .bg-map-3, .bg-map-4,
.icon-dots, .icon-dots-2, .icon-angle,
.services-section .float-text,
#atencion .image-column .float-text,
#contacto .titleSection .ghostImage,
.about-section .outer-box > .plane,
.service-block .icon-circles {
  display: none !important;
}

/* ─── TIPOGRAFÍA DE SECCIÓN ────────────────────────────────────
   Un solo encabezado para todo el sitio: etiqueta corta, título y
   barra de acento cian — el mismo gesto que ancla el texto del hero. */
.gg-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-family: "Mukta Mahee", sans-serif;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--gg-blue-2);
}
.gg-eyebrow:before {
  content: "";
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gg-cyan), rgba(91, 198, 222, 0.3));
}
/* Sobre fondo oscuro la etiqueta va en cian */
.gg-band-dark .gg-eyebrow,
#cifras .gg-eyebrow,
.cta1 .gg-eyebrow, .cta2 .gg-eyebrow, .cta3 .gg-eyebrow,
#contacto .gg-aside .gg-eyebrow,
.projects-section .gg-eyebrow,
.page-title .gg-eyebrow {
  color: var(--gg-cyan);
}
/* Centrada, la etiqueta lleva barra a los dos lados */
.text-center .gg-eyebrow,
.gg-eyebrow.is-center {
  justify-content: center;
}
.text-center .gg-eyebrow:after,
.gg-eyebrow.is-center:after {
  content: "";
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(270deg, var(--gg-cyan), rgba(91, 198, 222, 0.3));
}

/* Títulos de sección: una sola escala fluida en toda la web */
#atencion .sec-title .title,
#servicios-home .sec-title .title,
#contacto .titleSection .title,
#contacto .gg-aside .title,
.cta1 .sec-title .title, .cta2 .sec-title .title, .cta3 .sec-title .title,
.projects-section .sec-title .title,
.about-section .sec-title .title,
.offer-section .sec-title .title,
.about-section-four .sec-title .title,
#servicios-bloque .sec-title .title,
#importacion-exportacion .sec-title .title,
#trato-exclusivo .sec-title .title {
  font-family: "Mukta Mahee", sans-serif;
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.01em;
  margin-bottom: 18px;
}

/* Texto corrido de sección */
#atencion .sec-title .text,
.about-section .inner-column > .text,
#servicios-bloque .sec-title .text {
  font-family: "Helvetica", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--gg-body);
}

/* ─── BOTÓN SECUNDARIO UNIFICADO (.btnOne / .btnTwo) ───────────
   El tema tenía tres variantes de botón con colores distintos según la
   sección. Se dejan dos: cian sobre fondo oscuro y azul sobre claro,
   ambas con la geometría del botón del hero. */
.theme-btn.btnOne,
.theme-btn.btnTwo,
#contacto .gg-aside .theme-btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 15px 28px;
  border-radius: var(--gg-radius-sm);
  font-family: "Mukta Mahee", sans-serif;
  transition: transform 280ms var(--gg-ease), box-shadow 280ms ease,
              background-color 280ms ease;
}
.theme-btn.btnOne .btn-title,
.theme-btn.btnTwo .btn-title {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: "Mukta Mahee", sans-serif;
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: 0.07em;
  line-height: 1;
  text-transform: uppercase;
}
.theme-btn.btnOne .btn-title i,
.theme-btn.btnTwo .btn-title i {
  top: 0;
  font-size: 13px;
  transition: transform 300ms var(--gg-ease);
}
.theme-btn.btnOne:hover .btn-title i,
.theme-btn.btnTwo:hover .btn-title i {
  transform: translateX(4px);
}

/* Sobre claro: relleno azul de marca */
.theme-btn.btnOne {
  background-color: var(--gg-blue);
  box-shadow: 0 10px 26px rgba(4, 67, 163, 0.26);
}
.theme-btn.btnOne .btn-title { color: #fff; }
.theme-btn.btnOne:hover {
  background-color: var(--gg-navy);
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(4, 67, 163, 0.34);
}

/* Sobre oscuro: cian, hermano del botón del hero */
.theme-btn.btnTwo {
  background: linear-gradient(135deg, var(--gg-cyan-2) 0%, var(--gg-cyan) 55%, #45b6d2 100%);
  box-shadow: 0 12px 30px rgba(2, 18, 38, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.theme-btn.btnTwo .btn-title { color: var(--gg-navy); }
.theme-btn.btnTwo:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 38px rgba(2, 18, 38, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.theme-btn.btnOne:active,
.theme-btn.btnTwo:active {
  transform: translateY(0);
  transition-duration: 90ms;
}
.theme-btn.btnOne:focus-visible,
.theme-btn.btnTwo:focus-visible {
  outline: 3px solid rgba(91, 198, 222, 0.7);
  outline-offset: 3px;
}

/* ================================================================
   HOME · #atencion — "Atención puntual en proyectos personalizados"
   ================================================================
   Antes: el título quedaba tapado por un "LOGÍSTICA" rotado en gris, la
   columna de imagen apilaba tres fotos superpuestas más un icono azul
   suelto, y las tres ventajas eran cards con un icono de esquina doblada.
   Ahora: una foto con marco propio, la credencial GLA como tarjeta
   sobria, y las ventajas como filas legibles con chip de icono.
   ================================================================ */

#atencion {
  position: relative;
  padding: var(--gg-pad) 0;
  background-color: #fff;
}

#atencion .sec-title { margin-bottom: 34px; }

/* El tema pintaba en gris claro el primer renglón del título ("Atención
   puntual en"), que es justo la parte que da el contexto. Pasa a ser la
   etiqueta de sección: cian, pequeña y en versalitas. */
#atencion .sec-title .title span {
  display: block;
  margin-bottom: 12px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--gg-blue-2);
}
#atencion .sec-title .title span br { display: none; }
#atencion .sec-title .title span:before {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  margin-bottom: 20px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gg-cyan) 0%, var(--gg-cyan) 55%, rgba(91, 198, 222, 0.25) 100%);
}
#atencion .sec-title .title { color: var(--gg-ink); }

/* ─── Ventajas: filas, no cards ────────────────────────────────── */
#atencion .about-block-two { margin-bottom: 0; }

#atencion .about-block-two .inner-box {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 22px 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--gg-line);
  box-shadow: none;
  border-radius: 0;
}
#atencion .about-block-two:last-child .inner-box { border-bottom: 0; }

/* Chip cuadrado redondeado: sustituye a la forma azul con esquina doblada */
#atencion .about-block-two .inner-box .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  min-width: 52px;
  flex-shrink: 0;
  padding: 0;
  border-radius: 12px;
  background: linear-gradient(150deg, var(--gg-surface-2) 0%, #e2eefb 100%);
  background-color: var(--gg-surface-2);
  transition: background 300ms ease, transform 300ms var(--gg-ease);
}
#atencion .about-block-two .inner-box .icon:after { display: none; }
#atencion .about-block-two .inner-box .icon img {
  position: static;
  width: 26px;
  max-width: 26px;
  height: 26px;
  transform: none;
  right: auto;
  left: auto;
  top: auto;
  /* Los SVG vienen en blanco (eran para fondo azul); aquí van en el azul
     de marca sobre el chip claro. */
  filter: brightness(0) saturate(100%) invert(16%) sepia(88%) saturate(2588%)
          hue-rotate(206deg) brightness(94%) contrast(97%);
}
#atencion .about-block-two .inner-box:hover .icon {
  background: linear-gradient(150deg, #e2f4fa 0%, #cfe6fb 100%);
  transform: translateY(-2px);
}

#atencion .about-block-two .inner-box .content { padding: 0; }
#atencion .about-block-two .inner-box .content .title {
  font-family: "Mukta Mahee", sans-serif;
  font-size: 17.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--gg-ink);
  margin: 0 0 5px;
}
#atencion .about-block-two .inner-box .content .text {
  font-family: "Helvetica", sans-serif;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--gg-body);
  margin: 0;
}

#atencion .inner-column > .theme-btn { margin-top: 32px; }

/* ─── Columna de imagen ────────────────────────────────────────── */
#atencion .image-column .inner-column { position: relative; }

#atencion .image-column .image-box { position: relative; margin: 0; }

/* Foto principal: marco redondeado con sombra, sin recortes ni capas */
#atencion .image-column .image-box .image {
  position: relative;
  margin: 0;
  border-radius: var(--gg-radius);
  overflow: hidden;
  box-shadow: var(--gg-shadow);
}
#atencion .image-column .image-box .image img {
  display: block;
  width: 100%;
  height: auto;
}

/* El icono azul suelto sobre la foto no decía nada que no dijera ya la
   tarjeta de abajo. */
#atencion .image-column .image-box .icon.logistic { display: none !important; }

/* Credencial GLA: tarjeta blanca anclada abajo a la izquierda */
#atencion .image-column .image-box .image-2 {
  position: absolute;
  left: -14px;
  bottom: -26px;
  width: 168px;
  margin: 0;
  padding: 10px;
  border-radius: 12px;
  background-color: #fff;
  box-shadow: 0 14px 32px rgba(2, 24, 58, 0.18);
}
#atencion .image-column .image-box .image-2 img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

/* "Mercancía en movimiento": chip flotante arriba a la derecha.
   El tema le ponía una esquina doblada con un :before girado que se salía
   de la caja; aquí es una píldora sólida. */
#atencion .image-column .image-box .exp-box {
  position: absolute;
  right: -16px;
  top: 26px;
  left: auto;
  bottom: auto;
  width: auto;
  max-width: 210px;
  padding: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--gg-blue) 0%, var(--gg-navy) 100%);
  box-shadow: 0 14px 32px rgba(4, 34, 62, 0.34);
}
#atencion .image-column .image-box .exp-box .inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  text-align: left;
}
#atencion .image-column .image-box .exp-box .inner:before { display: none; }
#atencion .image-column .image-box .exp-box .inner img {
  width: 32px;
  max-width: 32px;
  margin: 0;
  flex-shrink: 0;
}
#atencion .image-column .image-box .exp-box .inner .title {
  margin: 0;
  font-family: "Mukta Mahee", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
}

@media (max-width: 991.98px) {
  #atencion .image-column .inner-column { margin-bottom: 54px; }
  #atencion .image-column .image-box .image-2 { width: 132px; bottom: -20px; left: -6px; }
  #atencion .image-column .image-box .exp-box { right: -6px; max-width: 180px; }
}
@media (max-width: 575.98px) {
  #atencion .image-column .image-box .exp-box { position: static; max-width: none; margin-top: 14px; }
  #atencion .image-column .image-box .image-2 { position: static; width: 148px; margin-top: 14px; }
  #atencion .image-column .inner-column { margin-bottom: 34px; }
}

/* ================================================================
   HOME · #cifras — contador de resultados
   ================================================================
   Antes: una foto de cartón y mapamundi en marrones y amarillos que no
   tenía nada que ver con la paleta, y encima números en gris sobre un
   recuadro con borde. Ahora: la banda de marca, número en cian y una
   línea divisoria entre columnas en lugar de cuatro recuadros.
   ================================================================ */

#cifras {
  /* La foto se retira: era el punto donde el sitio perdía la tonalidad. */
  background-image:
    radial-gradient(120% 90% at 12% 0%, rgba(91, 198, 222, 0.20) 0%, rgba(91, 198, 222, 0) 55%),
    linear-gradient(135deg, var(--gg-navy-2) 0%, var(--gg-blue) 45%, var(--gg-blue-2) 100%) !important;
  padding: var(--gg-pad) 0;
}
#cifras .fact-counter { margin-top: 0; }

#cifras .counter-block-two .inner-box {
  position: relative;
  padding: 6px 26px;
  text-align: left;
  background: none;
  border: 0;
}
/* Línea fina entre columnas: separa sin encajonar */
#cifras .counter-block-two + .counter-block-two .inner-box:before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background-color: rgba(255, 255, 255, 0.16);
}

/* Icono: glifo cian pequeño, sin el aro de 10px del tema */
#cifras .counter-block-two .inner-box .icon-box { margin-bottom: 16px; }
#cifras .counter-block-two .inner-box .icon-box .icon {
  width: auto;
  height: auto;
  border: 0 !important;
  border-radius: 0;
  background: none;
  line-height: 1;
}
#cifras .counter-block-two .inner-box .icon-box .icon:after { display: none !important; }
#cifras .counter-block-two .inner-box .icon-box .icon img {
  width: 34px;
  max-width: 34px;
  height: 34px;
  /* Los SVG blancos pasan al cian de la marca */
  filter: brightness(0) saturate(100%) invert(78%) sepia(38%) saturate(747%)
          hue-rotate(151deg) brightness(93%) contrast(88%);
}

#cifras .counter-block-two .inner-box .count-box {
  font-family: "Mukta Mahee", sans-serif;
  font-size: clamp(46px, 5vw, 62px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--gg-cyan);
  margin-bottom: 12px;
}
#cifras .counter-block-two .inner-box .count-box .thousand { margin-right: 32px; }
#cifras .counter-block-two .inner-box .count-box .thousand:before {
  font-size: inherit;
  right: -30px;
}

#cifras .counter-block-two .inner-box .counter-title {
  max-width: 100%;
  min-height: 0;
  padding: 0;
  border: 0 !important;
  font-family: "Helvetica", sans-serif;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
}

@media (max-width: 991.98px) {
  #cifras .counter-block-two .inner-box { padding: 22px 0; }
  #cifras .counter-block-two + .counter-block-two .inner-box:before {
    left: 0; right: 0; top: 0; bottom: auto;
    width: auto; height: 1px;
  }
}

/* ================================================================
   HOME · #servicios-home — carrusel de áreas de especialización
   ================================================================
   Antes: fondo fijo con camiones y contenedores + un "SERVICIOS" gigante
   en contorno detrás del título, y cards donde el bloque de texto blanco
   invadía la foto con un icono cuadrado a caballo entre las dos.
   Ahora: superficie clara, y la card es una pieza vertical — foto,
   contenido, enlace — de la misma familia que las del hero.
   ================================================================ */

#servicios-home {
  padding: var(--gg-pad) 0;
  background: var(--gg-surface) !important;
}
#servicios-home .sec-title { margin-bottom: 48px; }
#servicios-home .sec-title .title { color: var(--gg-ink); }

#servicios-home .carousel-outer { padding: 0; }
#servicios-home .services-carousel .owl-stage-outer { padding: 10px 0 40px; }

#servicios-home .service-block { margin-bottom: 0; }

#servicios-home .service-block .inner-box {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0 12px;
  overflow: hidden;
  background-color: #fff;
  border-radius: var(--gg-radius);
  box-shadow: var(--gg-shadow);
  transition: transform 300ms var(--gg-ease), box-shadow 300ms ease;
}
#servicios-home .service-block .inner-box:hover {
  transform: translateY(-8px);
  box-shadow: var(--gg-shadow-h);
}

/* Foto: proporción fija para que las cuatro cards midan igual */
#servicios-home .service-block .image-box { margin: 0; }
#servicios-home .service-block .image-box .image {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}
#servicios-home .service-block .image-box .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--gg-ease);
}
#servicios-home .service-block .inner-box:hover .image-box .image img {
  transform: scale(1.05);
}

/* Contenido: en el flujo, ya no encima de la foto */
#servicios-home .service-block .content-box {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  width: auto;
  max-width: none;
  flex: 1 1 auto;
  display: flex;
  padding: 0 !important;
  background: none;
  transform: none;
}
#servicios-home .service-block .content-box:before { display: none !important; }
#servicios-home .service-block .content-box .content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 1 auto;
  padding: 26px 26px 24px;
  background: none;
}

/* Chip del icono, en la misma familia que las cards del hero */
#servicios-home .service-block .content-box .content .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  position: static;
  width: 52px;
  height: 52px;
  margin: 0 0 16px;
  border-radius: 12px;
  background: linear-gradient(150deg, var(--gg-surface-2) 0%, #e2eefb 100%) !important;
  transition: background 300ms ease;
}
#servicios-home .service-block .content-box .content .icon:after { display: none !important; }
#servicios-home .service-block .content-box .content .icon img {
  width: 28px;
  max-width: 28px;
  height: 28px;
  filter: brightness(0) saturate(100%) invert(16%) sepia(88%) saturate(2588%)
          hue-rotate(206deg) brightness(94%) contrast(97%);
}

#servicios-home .service-block .content-box .content .title {
  font-family: "Mukta Mahee", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 10px;
  /* El tema reservaba 65px a la izquierda para el icono que iba ahí:
     dejaba el título desalineado del chip y del párrafo. */
  padding-left: 0 !important;
}
#servicios-home .service-block .content-box .content .title a {
  color: var(--gg-blue);
  transition: color 300ms ease;
}
#servicios-home .service-block .inner-box:hover .content .title a { color: var(--gg-navy); }

#servicios-home .service-block .content-box .content .text {
  flex: 1 1 auto;
  padding-top: 0 !important;
  margin: 0 0 20px;
  font-family: "Helvetica", sans-serif;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--gg-body) !important;
}

/* El botón cuadrado con sólo la flecha vuelve a ser un enlace de texto */
#servicios-home .service-block .content-box .content .read-more {
  /* Era un botón cuadrado en position:absolute clavado en la esquina
     inferior derecha; al volverlo enlace de texto quedaba pegado al borde
     de la card, sin padding y fuera del flujo. */
  position: static !important;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: auto;
  height: auto;
  padding: 0;
  background: none !important;
  font-family: "Mukta Mahee", sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gg-blue-2);
  transition: color 300ms ease, gap 300ms ease;
}
#servicios-home .service-block .content-box .content .read-more i {
  font-size: 13px;
  color: inherit;
}
#servicios-home .service-block .inner-box:hover .content .read-more {
  color: var(--gg-blue);
  gap: 14px;
}

/* Puntos del carrusel */
#servicios-home .services-carousel .owl-dots { margin-top: 6px; }
#servicios-home .services-carousel .owl-dot {
  width: 8px;
  height: 8px;
  margin: 0 5px;
  border: 0 !important;
  border-radius: 999px;
  background-color: rgba(4, 67, 163, 0.22) !important;
  transition: width 300ms var(--gg-ease), background-color 300ms ease;
}
#servicios-home .services-carousel .owl-dot.active {
  width: 26px;
  background-color: var(--gg-blue) !important;
}

@media (max-width: 575.98px) {
  #servicios-home .service-block .inner-box { margin: 0 6px; }
  #servicios-home .service-block .content-box .content { padding: 22px 20px 20px; }
}

/* La clase `.reveal` del tema salió del HTML de estas columnas: montaba un
   barrido con GSAP que dejaba la foto desplazada a medio camino sobre el
   texto y, peor, arrancaba con `visibility:hidden` — si el JS no cargaba,
   las imágenes no aparecían nunca. La entrada la sigue dando el `wow` de
   la columna. Esta regla es la red por si alguna plantilla la reintroduce. */
.about-section .image-column .reveal,
.about-section-three .image-column .reveal {
  display: block;
  width: 100%;
  visibility: visible;
}

/* El tema reservaba 75px de padding a los lados de la columna para dejar
   sitio al texto rotado; sin él, la foto ocupa la columna completa. */
#atencion .image-column .inner-column {
  padding: 0 !important;
  margin-bottom: 0 !important;
}
#atencion .image-column .image-box {
  position: relative;
  width: 100%;
}
#atencion .image-column .image-box .image {
  aspect-ratio: 4 / 3.4;
}
#atencion .image-column .image-box .image img {
  height: 100%;
  object-fit: cover;
}
/* El alto fijo de 169px del tema convertía la píldora en un cuadrado */
#atencion .image-column .image-box .exp-box {
  width: auto !important;
  height: auto !important;
}

/* ================================================================
   BANDAS DE LLAMADA A LA ACCIÓN (.cta1 / .cta2 / .cta3)
   ================================================================
   El tema traía tres variantes con colores y tamaños distintos según la
   página. Se unifican en una sola banda: degradado de marca, etiqueta,
   título y el botón cian. Cuando la banda va sobre foto, la clase
   .cta-photo pone el velo navy para que el texto siempre contraste.
   ================================================================ */

.cta1, .cta2, .cta3 {
  position: relative;
  padding: clamp(56px, 6vw, 82px) 0;
  overflow: hidden;
}
.cta1 > *, .cta2 > *, .cta3 > * { position: relative; z-index: 2; }

/* Velo para las bandas que llevan fotografía de fondo */
.cta-photo:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: linear-gradient(
    120deg,
    rgba(4, 34, 62, 0.94) 0%,
    rgba(4, 67, 163, 0.86) 52%,
    rgba(51, 102, 202, 0.72) 100%
  );
}

.cta1 .sec-title, .cta2 .sec-title, .cta3 .sec-title {
  margin-bottom: 30px;
}
.cta1 .sec-title .title,
.cta2 .sec-title .title,
.cta3 .sec-title .title {
  font-family: "Mukta Mahee", sans-serif;
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.01em;
  color: #fff;
  margin-bottom: 0;
}
/* Barra de acento centrada, igual que la del hero pero horizontal */
.cta1 .sec-title .title:after,
.cta2 .sec-title .title:after,
.cta3 .sec-title .title:after {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  margin: 24px auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(91, 198, 222, 0.25), var(--gg-cyan), rgba(91, 198, 222, 0.25));
}

/* ================================================================
   #contacto — bloque de contacto (home y páginas de servicio)
   ================================================================
   Antes: el formulario iba sobre un rectángulo azul plano encima de una
   foto de stock con hexágonos que se salía del contenedor, y la columna
   derecha ("O cotiza hoy mismo") quedaba ilegible sobre la misma foto.
   Ahora: superficie clara, formulario en tarjeta blanca y a su lado un
   panel navy con los datos de contacto y el paso al cotizador.
   ================================================================ */

#contacto {
  padding: var(--gg-pad) 0;
  background-color: var(--gg-surface);
}
/* La foto de fondo desbordaba 100vw fuera del contenedor */
#contacto .bgContacto { display: none !important; }

#contacto .titleSection { margin-bottom: 42px; }
#contacto .titleSection .title {
  font-size: clamp(28px, 3.4vw, 44px) !important;
  line-height: 1.14 !important;
  color: var(--gg-ink) !important;
  margin-bottom: 0 !important;
}
#contacto .titleSection .title:before {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  margin-bottom: 22px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gg-cyan) 0%, var(--gg-cyan) 55%, rgba(91, 198, 222, 0.25) 100%);
}

/* Las dos columnas comparten alto y esquinas: leen como una sola pieza */
#contacto .row.g-0 { align-items: stretch; }

/* ─── Columna del formulario ───────────────────────────────────── */
#contacto .form-column .inner-column { height: 100%; }
#contacto .form-column .block {
  height: 100%;
  padding: 44px 42px 40px !important;
  background-color: #fff !important;
  border: 1px solid var(--gg-line);
  border-radius: var(--gg-radius) 0 0 var(--gg-radius);
  box-shadow: var(--gg-shadow);
}
#contacto .form-column .block .title {
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-align: left !important;
  color: var(--gg-ink) !important;
  margin-bottom: 26px !important;
}

#contacto .form-column .block .form-group input,
#contacto .form-column .block .form-group textarea {
  border-radius: var(--gg-radius-sm) !important;
  background-color: #fff !important;
  border: 1.5px solid var(--gg-line) !important;
  color: var(--gg-ink);
}
#contacto .form-column .block .form-group input::placeholder,
#contacto .form-column .block .form-group textarea::placeholder {
  color: #93a4b8;
}
#contacto .form-column .block .form-group input:focus,
#contacto .form-column .block .form-group textarea:focus {
  border-color: var(--gg-cyan) !important;
  box-shadow: 0 0 0 3px rgba(91, 198, 222, 0.22) !important;
}
#contacto .form-column .block .form-group .btnForm {
  background-color: var(--gg-blue) !important;
  border-radius: var(--gg-radius-sm) !important;
  color: #fff !important;
  font-family: "Mukta Mahee", sans-serif;
  font-size: 14.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 15px 28px;
}
#contacto .form-column .block .form-group .btnForm:hover {
  background-color: var(--gg-navy) !important;
  box-shadow: 0 14px 30px rgba(4, 67, 163, 0.3);
}

/* ─── Panel lateral navy ───────────────────────────────────────── */
#contacto .gg-aside {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: 46px 42px;
  border-radius: 0 var(--gg-radius) var(--gg-radius) 0;
  box-shadow: var(--gg-shadow);
}
#contacto .gg-aside .title {
  font-size: clamp(24px, 2.4vw, 30px) !important;
  font-weight: 700;
  line-height: 1.2;
  color: #fff !important;
  margin-bottom: 14px !important;
  text-align: left !important;
}
#contacto .gg-aside .gg-aside-text {
  font-family: "Helvetica", sans-serif;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 30px;
}

/* Datos de contacto */
.gg-contact-list { list-style: none; margin: 0 0 34px; padding: 0; }
.gg-contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.gg-contact-list li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.gg-contact-list i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 10px;
  background-color: rgba(91, 198, 222, 0.14);
  color: var(--gg-cyan);
  font-size: 14px;
}
.gg-contact-list .gg-contact-label {
  display: block;
  font-family: "Mukta Mahee", sans-serif;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 3px;
}
.gg-contact-list .gg-contact-value,
.gg-contact-list .gg-contact-value a {
  font-family: "Helvetica", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: #fff;
  transition: color 200ms ease;
}
.gg-contact-list .gg-contact-value a:hover { color: var(--gg-cyan); }

@media (max-width: 991.98px) {
  #contacto .form-column .block { border-radius: var(--gg-radius) var(--gg-radius) 0 0; }
  #contacto .gg-aside { border-radius: 0 0 var(--gg-radius) var(--gg-radius); }
}
@media (max-width: 575.98px) {
  #contacto .form-column .block { padding: 30px 22px 28px !important; }
  #contacto .gg-aside { padding: 32px 22px; }
}

/* ================================================================
   #subscribe — newsletter
   ================================================================
   Antes: una foto de camión en naranjas con un sobre de caricatura en un
   círculo blanco. Ahora: banda de marca, chip de icono y un solo campo.
   ================================================================ */

#subscribe { background-color: transparent; }
#subscribe .outer-box {
  position: relative;
  overflow: hidden;
  padding: 40px 44px;
  border-radius: var(--gg-radius);
  box-shadow: 0 24px 54px rgba(4, 34, 62, 0.26);
}
/* La foto de fondo era el otro punto donde el sitio perdía la tonalidad */
#subscribe .outer-box .bg-image { display: none !important; }
#subscribe .outer-box .row { align-items: center; }

#subscribe .content-column .inner-column {
  display: flex;
  align-items: center;
  gap: 20px;
}
/* El sobre de caricatura sale; queda un chip con el glifo de la marca */
#subscribe .content-column .inner-column .image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  min-width: 56px;
  margin: 0;
  border-radius: 14px;
  background-color: rgba(91, 198, 222, 0.16) !important;
}
#subscribe .content-column .inner-column .image img { display: none; }
#subscribe .content-column .inner-column .image:after {
  content: "\f0e0";
  font-family: "Font Awesome 6 Pro";
  font-weight: 900;
  font-size: 21px;
  color: var(--gg-cyan);
}
#subscribe .content-column .inner-column .title {
  margin: 0;
  font-family: "Mukta Mahee", sans-serif;
  font-size: clamp(19px, 2vw, 25px);
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
}

#subscribe .subscribe-form .form-group {
  display: flex;
  align-items: stretch;
  gap: 10px;
}
#subscribe .subscribe-form .input-outer { flex: 1 1 auto; }
#subscribe .subscribe-form .form-control {
  height: 54px;
  border-radius: var(--gg-radius-sm) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.28) !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #fff;
}
#subscribe .subscribe-form .form-control::placeholder { color: rgba(255, 255, 255, 0.62); }
#subscribe .subscribe-form .form-control:focus {
  border-color: var(--gg-cyan) !important;
  background-color: rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 0 0 3px rgba(91, 198, 222, 0.25) !important;
}
#subscribe .subscribe-form .btnSubscribe {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  flex-shrink: 0;
  border: 0;
  border-radius: var(--gg-radius-sm);
  background-color: var(--gg-cyan) !important;
  color: var(--gg-navy);
  transition: background-color 240ms ease, transform 240ms var(--gg-ease);
}
#subscribe .subscribe-form .btnSubscribe i { color: inherit; font-size: 17px; }
#subscribe .subscribe-form .btnSubscribe:hover {
  background-color: #fff !important;
  transform: translateY(-2px) scale(1);
}

@media (max-width: 991.98px) {
  #subscribe .outer-box { padding: 32px 26px; }
  #subscribe .content-column .inner-column { margin-bottom: 24px; }
}

/* ================================================================
   CINTILLO DE PÁGINA INTERIOR (.page-title.headerSection)
   ================================================================
   Antes: la foto de stock salía a pelo con el título centrado encima,
   sin velo ni jerarquía — en varias páginas el texto blanco caía sobre
   la parte clara de la foto. Ahora repite el gesto del hero: velo
   diagonal navy, etiqueta, título a la izquierda y ruta de navegación.
   Lo genera module-page-title.php, uno para las 12 páginas.
   ================================================================ */

.page-title.headerSection {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 420px;
  padding: 190px 0 62px !important;
  background-position: center;
  background-size: cover;
  overflow: hidden;
}

/* Velo: el mismo degradado del hero, para que el texto contraste sin
   apagar la foto del lado derecho. */
.page-title.headerSection:before {
  content: "";
  display: block !important;
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 1;
  background: linear-gradient(
    100deg,
    rgba(4, 34, 62, 0.94) 0%,
    rgba(4, 34, 62, 0.82) 26%,
    rgba(4, 34, 62, 0.52) 52%,
    rgba(4, 34, 62, 0.22) 76%,
    rgba(4, 34, 62, 0.08) 100%
  );
}

.page-title.headerSection .auto-container { position: relative; z-index: 2; }

.page-title.headerSection .title-outer {
  max-width: 780px;
  text-align: left !important;
}

.page-title.headerSection .gg-eyebrow {
  margin-bottom: 16px;
  color: var(--gg-cyan);
}

.page-title.headerSection .title {
  font-family: "Mukta Mahee", sans-serif;
  font-size: clamp(30px, 4.4vw, 56px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: #fff;
  margin-bottom: 18px !important;
  text-shadow: 0 2px 20px rgba(2, 18, 38, 0.45);
}

/* ─── Ruta de navegación ───────────────────────────────────────── */
.gg-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gg-crumbs li {
  display: flex;
  align-items: center;
  font-family: "Mukta Mahee", sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
}
.gg-crumbs li + li:before {
  content: "\f105";
  font-family: "Font Awesome 6 Pro";
  font-weight: 900;
  font-size: 11px;
  margin-right: 8px;
  color: rgba(255, 255, 255, 0.42);
}
.gg-crumbs a {
  color: rgba(255, 255, 255, 0.78);
  transition: color 200ms ease;
}
.gg-crumbs a:hover { color: var(--gg-cyan); }
.gg-crumbs li[aria-current="page"] span { color: var(--gg-cyan); }

@media (max-width: 991.98px) {
  .page-title.headerSection {
    min-height: 300px;
    padding: 70px 0 46px !important;
  }
}
@media (max-width: 575.98px) {
  .page-title.headerSection {
    min-height: 240px;
    padding: 54px 0 38px !important;
  }
  .gg-crumbs li { font-size: 12px; }
}

/* ================================================================
   PÁGINAS DE SERVICIO — secciones compartidas
   ================================================================
   Las cuatro páginas (logística, agencia aduanal, servicios integrales
   y comercializadora) comparten el mismo puñado de plantillas del tema.
   Se rediseñan aquí una sola vez y las cuatro quedan alineadas con el
   home: superficies claras, cards de 14px, chips de icono y bandas de
   marca. Fuera las marcas de agua que había detrás de cada icono.
   ================================================================ */

/* ─── Marcas de agua e ilustraciones sueltas ───────────────────── */
.feature-block-four .inner-box .icon-two,
.features-section .feature-block .inner-box .ghostImageIcon,
#trato-exclusivo .video-column .inner-column .icon-ship,
#trato-exclusivo .video-column .inner-column .shape,
#servicios-bloque .bg-plane,
#servicios-bloque .bg-location,
#despacho-aduanal .bgMap,
#despacho-aduanal .icon-global,
#importacion-exportacion .info-banner .content-box > .icon {
  display: none !important;
}

/* ================================================================
   .about-section — "Trabajo y cooperación" (página de logística)
   ================================================================ */
.about-section { padding: var(--gg-pad) 0; }
.about-section .outer-box { padding: 0; background: none; }

/* El segundo renglón del título iba en gris claro y se leía apagado */
.about-section .sec-title .title { color: var(--gg-ink); }
.about-section .sec-title .title span { color: inherit; }
.about-section .sec-title .title:before {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  margin-bottom: 22px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gg-cyan) 0%, var(--gg-cyan) 55%, rgba(91, 198, 222, 0.25) 100%);
}

/* Lista de puntos */
.about-section .list-style-two li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 14px;
  font-family: "Helvetica", sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--gg-ink);
}
.about-section .list-style-two li i {
  position: absolute;
  left: 0;
  top: 4px;
  font-size: 15px;
  color: var(--gg-cyan);
}

/* Nota lateral: tarjeta clara en vez del recuadro gris del tema */
.about-section .author-box .inner-box {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 20px;
  background-color: var(--gg-surface);
  border: 1px solid var(--gg-line);
  border-radius: var(--gg-radius);
  box-shadow: none;
}
.about-section .author-box .inner-box .author-img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: linear-gradient(150deg, var(--gg-surface-2) 0%, #e2eefb 100%);
}
.about-section .author-box .inner-box .author-img img { width: 24px; max-width: 24px; }
.about-section .author-box .inner-box .author-info .name {
  margin: 0;
  font-family: "Mukta Mahee", sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--gg-ink);
}

/* Columna de imagen: mismo patrón que el home */
.about-section .image-column .inner-column { padding: 0 !important; }
.about-section .image-column .image-box { position: relative; width: 100%; }
.about-section .image-column .image-box .image {
  margin: 0;
  border-radius: var(--gg-radius);
  overflow: hidden;
  box-shadow: var(--gg-shadow);
  aspect-ratio: 4 / 3.2;
}
.about-section .image-column .image-box .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about-section .image-column .image-box .image-2 {
  position: absolute;
  right: -18px;
  bottom: -30px;
  width: 220px;
  margin: 0;
  padding: 8px;
  border-radius: 14px;
  background-color: #fff;
  box-shadow: 0 16px 36px rgba(2, 24, 58, 0.2);
}
.about-section .image-column .image-box .image-2 img {
  display: block;
  width: 100%;
  border-radius: 8px;
}

/* "¡Estamos listos para tu proyecto!": el tema lo pintaba como un círculo
   azul de 200px que tapaba media foto. Pasa a píldora sobre la esquina. */
.about-section .image-column .image-box .exp-box {
  position: absolute;
  left: -16px;
  top: 24px;
  right: auto;
  bottom: auto;
  width: auto !important;
  height: auto !important;
  max-width: 230px;
  padding: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--gg-blue) 0%, var(--gg-navy) 100%);
  box-shadow: 0 14px 32px rgba(4, 34, 62, 0.34);
  animation: none;
}
.about-section .image-column .image-box .exp-box .inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  text-align: left;
  border-radius: inherit;
  background: none;
}
.about-section .image-column .image-box .exp-box .inner:before { display: none; }
.about-section .image-column .image-box .exp-box .inner img {
  width: 32px;
  max-width: 32px;
  margin: 0;
  flex-shrink: 0;
}
.about-section .image-column .image-box .exp-box .inner .title {
  margin: 0;
  font-family: "Mukta Mahee", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
}

@media (max-width: 991.98px) {
  .about-section .image-column .inner-column { margin-bottom: 58px; }
}
@media (max-width: 575.98px) {
  .about-section .image-column .image-box .exp-box,
  .about-section .image-column .image-box .image-2 {
    position: static;
    max-width: none;
    width: auto;
    margin-top: 14px;
  }
}

/* ================================================================
   .projects-section — carrusel de modalidades de flete
   ================================================================
   Antes: foto de fondo desaturada, cards con el bloque de texto blanco
   saliéndose de la imagen y un icono cuadrado a caballo entre ambos.
   ================================================================ */
.projects-section {
  position: relative;
  padding: var(--gg-pad) 0;
  background-color: var(--gg-navy);
  background-image:
    radial-gradient(120% 90% at 12% 0%, rgba(91, 198, 222, 0.18) 0%, rgba(91, 198, 222, 0) 55%),
    linear-gradient(135deg, var(--gg-navy) 0%, var(--gg-navy-2) 55%, var(--gg-blue) 100%);
}
.projects-section:before,
.projects-section .bg { display: none !important; }
.projects-section .auto-container,
.projects-section .carousel-outer { position: relative; z-index: 2; }

.projects-section .sec-title { margin-bottom: 46px; }
.projects-section .sec-title .title { color: #fff; }

.projects-section .carousel-outer { padding: 0 20px; }
.projects-section .project-block { margin-bottom: 0; }

.projects-section .project-block .inner-box {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0 12px;
  overflow: hidden;
  border-radius: var(--gg-radius);
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  transition: transform 300ms var(--gg-ease), border-color 300ms ease,
              background-color 300ms ease;
}
.projects-section .project-block .inner-box:hover {
  transform: translateY(-8px);
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(91, 198, 222, 0.5);
}

.projects-section .project-block .inner-box .image {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 16 / 11;
}
.projects-section .project-block .inner-box .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--gg-ease);
}
.projects-section .project-block .inner-box:hover .image img { transform: scale(1.05); }

/* El bloque de contenido entra al flujo: deja de flotar sobre la foto */
.projects-section .project-block .inner-box .content-box {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  top: auto !important;
  width: auto !important;
  max-width: none !important;
  flex: 1 1 auto;
  padding: 0 !important;
  background: none !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.projects-section .project-block .inner-box .content-box:before { display: none !important; }
.projects-section .project-block .inner-box .content-box .inner {
  padding: 24px 24px 26px;
  background: none;
}
.projects-section .project-block .inner-box .content-box .inner .title {
  margin: 0 0 10px;
  font-family: "Mukta Mahee", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
}
.projects-section .project-block .inner-box .content-box .inner .text {
  margin: 0;
  font-family: "Helvetica", sans-serif;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.74);
}
/* El icono repetido en las cuatro cards no distinguía nada */
.projects-section .project-block .inner-box .content-box .inner .icon { display: none; }

.projects-section .owl-dots { margin-top: 34px; }
.projects-section .owl-dot {
  width: 8px;
  height: 8px;
  margin: 0 5px;
  border: 0 !important;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.28) !important;
  transition: width 300ms var(--gg-ease), background-color 300ms ease;
}
.projects-section .owl-dot.active {
  width: 26px;
  background-color: var(--gg-cyan) !important;
}

/* ================================================================
   .offer-section (#despacho-aduanal) — banda de mensaje
   ================================================================ */
#despacho-aduanal.offer-section {
  position: relative;
  padding: var(--gg-pad) 0;
  background-color: var(--gg-blue);
  background-image:
    radial-gradient(120% 90% at 12% 0%, rgba(91, 198, 222, 0.20) 0%, rgba(91, 198, 222, 0) 55%),
    linear-gradient(135deg, var(--gg-navy-2) 0%, var(--gg-blue) 45%, var(--gg-blue-2) 100%);
}
#despacho-aduanal.offer-section:before { display: none !important; }
#despacho-aduanal .content-column {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
#despacho-aduanal .content-column .inner-column {
  max-width: 720px;
  padding: 0;
  background: none;
}
#despacho-aduanal .sec-title .title { color: #fff; }
#despacho-aduanal .sec-title .title:before {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  margin-bottom: 22px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gg-cyan) 0%, var(--gg-cyan) 55%, rgba(91, 198, 222, 0.25) 100%);
}
#despacho-aduanal .sec-title .text {
  font-family: "Helvetica", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 12px;
}
#despacho-aduanal .inner-column > .theme-btn { margin-top: 26px; }

/* ================================================================
   .about-section-four (#agencia-aduanal) — cobertura + 4 servicios
   ================================================================ */
#agencia-aduanal.about-section-four { padding: var(--gg-pad) 0; }
#agencia-aduanal .sec-title .title { color: var(--gg-ink); }
#agencia-aduanal .sec-title .title:before {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  margin-bottom: 22px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gg-cyan) 0%, var(--gg-cyan) 55%, rgba(91, 198, 222, 0.25) 100%);
}

/* Dato de 80 años: cifra grande en cian sobre panel navy */
#agencia-aduanal .count-box {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 32px;
  padding: 24px 26px;
  border-radius: var(--gg-radius);
  background: linear-gradient(135deg, var(--gg-navy) 0%, var(--gg-blue) 100%);
  box-shadow: var(--gg-shadow);
}
#agencia-aduanal .count-box .count {
  margin: 0;
  flex-shrink: 0;
  font-family: "Mukta Mahee", sans-serif;
  font-size: 56px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--gg-cyan);
}
#agencia-aduanal .count-box .count:after { content: "+"; }
#agencia-aduanal .count-box .title {
  margin: 0;
  font-family: "Helvetica", sans-serif;
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
}

#agencia-aduanal .image-column .inner-column { padding: 0; }
#agencia-aduanal .image-column .image {
  margin: 0 0 26px;
  border-radius: var(--gg-radius);
  overflow: hidden;
  box-shadow: var(--gg-shadow);
}
#agencia-aduanal .image-column .image img { display: block; width: 100%; height: auto; }

/* ─── Cards de servicio (feature-block-four) ───────────────────── */
.feature-block-four .inner-box {
  height: 100%;
  padding: 28px 24px 26px;
  background-color: #fff;
  border: 1px solid var(--gg-line);
  border-radius: var(--gg-radius);
  box-shadow: none;
  transition: transform 300ms var(--gg-ease), box-shadow 300ms ease,
              border-color 300ms ease;
}
.feature-block-four { display: flex; margin-bottom: 20px; }
.feature-block-four .inner-box:hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: var(--gg-shadow-h);
}
.feature-block-four .inner-box .icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin: 0 0 16px;
  border-radius: 12px;
  background: linear-gradient(150deg, var(--gg-surface-2) 0%, #e2eefb 100%) !important;
}
.feature-block-four .inner-box .icon-box:after { display: none !important; }
.feature-block-four .inner-box .icon-box .icon {
  width: 28px;
  max-width: 28px;
  height: 28px;
  filter: brightness(0) saturate(100%) invert(16%) sepia(88%) saturate(2588%)
          hue-rotate(206deg) brightness(94%) contrast(97%);
}
.feature-block-four .inner-box .title {
  margin: 0 0 8px;
  font-family: "Mukta Mahee", sans-serif;
  font-size: 17.5px;
  font-weight: 700;
  line-height: 1.28;
  color: var(--gg-ink);
}
.feature-block-four .inner-box .text {
  margin: 0;
  font-family: "Helvetica", sans-serif;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--gg-body);
}
/* Las cuatro cards iban pegadas dentro de un .row.g-0 */
#agencia-aduanal .features-box .row.g-0 { margin: 0 -10px; }
#agencia-aduanal .features-box .row.g-0 > [class*="col-"] { padding: 0 10px; }

/* ================================================================
   .features-section (#importacion-exportacion) — comercializadora
   ================================================================ */
#importacion-exportacion {
  padding: var(--gg-pad) 0 !important;
  text-align: left;
  background-color: var(--gg-surface);
}
#importacion-exportacion .outer-box { padding: 0; }
#importacion-exportacion .outer-box .bg,
#importacion-exportacion .outer-box .bgImp { display: none !important; }
#importacion-exportacion .sec-title { margin-bottom: 44px; }
#importacion-exportacion .sec-title .title { color: var(--gg-ink); }
#importacion-exportacion .row.g-0 { margin: 0 -10px; align-items: stretch; }
#importacion-exportacion .row.g-0 > [class*="col-"] { padding: 0 10px; }
#importacion-exportacion .features-column .inner-column { padding: 0; }
#importacion-exportacion .features-column .row.g-0 { margin: 0 -10px; }

.features-section .feature-block { display: flex; margin-bottom: 20px; }
.features-section .feature-block .inner-box {
  height: 100%;
  width: 100%;
  padding: 28px 24px 26px;
  text-align: left;
  background-color: #fff;
  border: 1px solid var(--gg-line);
  border-radius: var(--gg-radius);
  box-shadow: none;
  transition: transform 300ms var(--gg-ease), box-shadow 300ms ease,
              border-color 300ms ease;
}
.features-section .feature-block .inner-box:hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: var(--gg-shadow-h);
}
.features-section .feature-block .inner-box .icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin: 0 0 16px;
  border-radius: 12px;
  background: linear-gradient(150deg, var(--gg-surface-2) 0%, #e2eefb 100%) !important;
}
.features-section .feature-block .inner-box .icon-box:after { display: none !important; }
.features-section .feature-block .inner-box .icon-box .icon {
  width: 28px;
  max-width: 28px;
  height: 28px;
  filter: brightness(0) saturate(100%) invert(16%) sepia(88%) saturate(2588%)
          hue-rotate(206deg) brightness(94%) contrast(97%) !important;
}
.features-section .feature-block .inner-box .title {
  margin: 0 0 8px;
  font-family: "Mukta Mahee", sans-serif;
  font-size: 17.5px;
  font-weight: 700;
  line-height: 1.28;
  color: var(--gg-ink);
}
.features-section .feature-block .inner-box .text {
  margin: 0;
  font-family: "Helvetica", sans-serif;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--gg-body);
}

/* Panel lateral "Innovación y mejora continua" */
#importacion-exportacion .info-banner { display: flex; margin-bottom: 20px; }
#importacion-exportacion .info-banner .content-box {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  width: 100%;
  min-height: 320px;
  padding: 32px 28px;
  overflow: hidden;
  border-radius: var(--gg-radius);
  background: linear-gradient(135deg, var(--gg-navy) 0%, var(--gg-blue) 100%);
  box-shadow: var(--gg-shadow);
}
/* La foto queda de textura al fondo, no compitiendo con el texto */
#importacion-exportacion .info-banner .content-box .image-box {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 0;
}
#importacion-exportacion .info-banner .content-box .image-box .image { margin: 0; height: 100%; }
#importacion-exportacion .info-banner .content-box .image-box .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.22;
}
#importacion-exportacion .info-banner .content-box .title,
#importacion-exportacion .info-banner .content-box .theme-btn { position: relative; z-index: 2; }
#importacion-exportacion .info-banner .content-box .title {
  margin: 0 0 22px;
  font-family: "Mukta Mahee", sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
}

/* ================================================================
   .video-section (#trato-exclusivo) — comercializadora
   ================================================================ */
#trato-exclusivo.video-section {
  position: relative;
  padding: var(--gg-pad) 0;
  margin-top: 0 !important;
}
#trato-exclusivo .bg.bg-image {
  background-color: var(--gg-navy);
  background-image:
    radial-gradient(120% 90% at 85% 0%, rgba(91, 198, 222, 0.18) 0%, rgba(91, 198, 222, 0) 55%),
    linear-gradient(135deg, var(--gg-navy) 0%, var(--gg-navy-2) 55%, var(--gg-blue) 100%) !important;
}
#trato-exclusivo .bg.bg-image:before { display: none !important; }
#trato-exclusivo .sec-title .title { color: #fff; }
#trato-exclusivo .sec-title .title:before {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  margin-bottom: 22px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gg-cyan) 0%, var(--gg-cyan) 55%, rgba(91, 198, 222, 0.25) 100%);
}
#trato-exclusivo .sec-title .text {
  font-family: "Helvetica", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.8);
}
#trato-exclusivo .features-box { margin-top: 34px; }
.feature-block-two .inner-box {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-radius: var(--gg-radius);
  background-color: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  transition: background-color 300ms ease, border-color 300ms ease;
}
.feature-block-two .inner-box:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(91, 198, 222, 0.5);
}
.feature-block-two .inner-box .icon {
  width: 36px;
  max-width: 36px;
  margin: 0;
  flex-shrink: 0;
}
.feature-block-two .inner-box .title {
  margin: 0;
  font-family: "Mukta Mahee", sans-serif;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
}
.feature-block-two .inner-box .title br { display: none; }

/* ================================================================
   #servicios-bloque — los seis servicios integrales
   ================================================================
   Antes: cada bloque mezclaba una foto redonda, el nombre encima y el
   texto en un recuadro suelto de distinta altura. Ahora son seis cards
   iguales: foto, nombre y descripción.
   ================================================================ */
#servicios-bloque {
  position: relative;
  padding: var(--gg-pad) 0;
  background-color: var(--gg-surface);
}
#servicios-bloque .sec-title { margin-bottom: 46px; }
#servicios-bloque .sec-title .title { color: var(--gg-ink); }

#servicios-bloque .testimonial-block { display: flex; margin-bottom: 24px; }
#servicios-bloque .testimonial-block .inner-box {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  padding: 0;
  background-color: #fff;
  border-radius: var(--gg-radius);
  box-shadow: var(--gg-shadow);
  transition: transform 300ms var(--gg-ease), box-shadow 300ms ease;
}
#servicios-bloque .testimonial-block .inner-box:hover {
  transform: translateY(-8px);
  box-shadow: var(--gg-shadow-h);
}
#servicios-bloque .testimonial-block .inner-box:before,
#servicios-bloque .testimonial-block .inner-box:after { display: none !important; }

#servicios-bloque .author-box {
  display: block;
  padding: 0;
  margin: 0;
}
#servicios-bloque .author-box .image {
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}
#servicios-bloque .author-box .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  transition: transform 600ms var(--gg-ease);
}
#servicios-bloque .testimonial-block .inner-box:hover .author-box .image img {
  transform: scale(1.05);
}
#servicios-bloque .author-box .author-info { padding: 22px 24px 0; }
#servicios-bloque .author-box .author-info .name {
  margin: 0;
  font-family: "Mukta Mahee", sans-serif;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--gg-blue);
}
#servicios-bloque .content-box {
  flex: 1 1 auto;
  padding: 10px 24px 26px;
  background: none;
  border: 0;
}
#servicios-bloque .content-box .text {
  margin: 0;
  font-family: "Helvetica", sans-serif;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--gg-body);
}

/* ================================================================
   #servicios-integrales — variante de .about-section-three
   ================================================================ */
#servicios-integrales.about-section-three {
  padding: var(--gg-pad) 0;
  background-color: #fff;
}
#servicios-integrales .sec-title .title { color: var(--gg-ink); }
#servicios-integrales .sec-title .title span {
  display: block;
  margin-bottom: 12px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--gg-blue-2);
}
#servicios-integrales .sec-title .title span:before {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  margin-bottom: 20px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gg-cyan) 0%, var(--gg-cyan) 55%, rgba(91, 198, 222, 0.25) 100%);
}
#servicios-integrales .image-column .inner-column { padding: 0 !important; margin-bottom: 0 !important; }
#servicios-integrales .image-column .image-box { position: relative; width: 100%; }
#servicios-integrales .image-column .image-box .image {
  margin: 0;
  border-radius: var(--gg-radius);
  overflow: hidden;
  box-shadow: var(--gg-shadow);
  aspect-ratio: 4 / 3.4;
}
#servicios-integrales .image-column .image-box .image img {
  width: 100%; height: 100%; object-fit: cover;
}
#servicios-integrales .image-column .image-box .icon.logistic { display: none !important; }
#servicios-integrales .image-column .image-box .exp-box {
  position: absolute;
  right: -16px;
  top: 26px;
  left: auto;
  bottom: auto;
  width: auto !important;
  height: auto !important;
  max-width: 210px;
  padding: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--gg-blue) 0%, var(--gg-navy) 100%);
  box-shadow: 0 14px 32px rgba(4, 34, 62, 0.34);
}
#servicios-integrales .image-column .image-box .exp-box .inner {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; text-align: left;
}
#servicios-integrales .image-column .image-box .exp-box .inner:before { display: none; }
#servicios-integrales .image-column .image-box .exp-box .inner img { width: 32px; max-width: 32px; margin: 0; }
#servicios-integrales .image-column .image-box .exp-box .inner .title {
  margin: 0;
  font-family: "Mukta Mahee", sans-serif;
  font-size: 14px; font-weight: 700; line-height: 1.25; color: #fff;
}

/* ─── #acerca-de-logistica: mismos ajustes, a la profundidad que usa
   custom.css para poder ganarle en especificidad ───────────────── */
#acerca-de-logistica { padding: var(--gg-pad) 0; }
#acerca-de-logistica .outer-box {
  background-color: transparent;
  padding: 0;
}
#acerca-de-logistica .outer-box .plane { display: none !important; }

#acerca-de-logistica .outer-box .content-column .inner-column { padding: 0; }
#acerca-de-logistica .outer-box .content-column .inner-column .sec-title .title {
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 700;
  line-height: 1.14;
  color: var(--gg-ink);
}
#acerca-de-logistica .outer-box .content-column .inner-column .sec-title .title span {
  color: inherit;
}
#acerca-de-logistica .outer-box .content-column .inner-column .list-box .list-style-two li {
  color: var(--gg-ink);
}
#acerca-de-logistica .outer-box .content-column .inner-column .list-box .list-style-two li i {
  color: var(--gg-cyan);
}
#acerca-de-logistica .outer-box .content-column .inner-column .author-box .inner-box {
  background-color: var(--gg-surface);
  border: 1px solid var(--gg-line);
  border-radius: var(--gg-radius);
}
#acerca-de-logistica .outer-box .content-column .inner-column .author-box .inner-box .author-img {
  width: 46px;
  height: 46px;
  margin-bottom: 0;
  border-radius: 12px;
  background: linear-gradient(150deg, var(--gg-surface-2) 0%, #e2eefb 100%);
}
#acerca-de-logistica .outer-box .content-column .inner-column .author-box .inner-box .author-img img {
  width: 24px;
  height: 24px;
  padding: 0;
  filter: brightness(0) saturate(100%) invert(16%) sepia(88%) saturate(2588%)
          hue-rotate(206deg) brightness(94%) contrast(97%);
}
#acerca-de-logistica .outer-box .content-column .inner-column .author-box .inner-box .author-info .name {
  color: var(--gg-ink);
  line-height: 1.4;
}
#acerca-de-logistica .outer-box .content-column .inner-column .text { font-weight: 400; }

/* La barra cian suelta al costado de la columna de imagen */
#acerca-de-logistica .outer-box .image-column .inner-column:before { display: none !important; }
#acerca-de-logistica .outer-box .image-column .inner-column { padding: 0 !important; }
#acerca-de-logistica .outer-box .image-column .inner-column .image-box { position: relative; }
#acerca-de-logistica .outer-box .image-column .inner-column .image-box .image {
  margin: 0;
  border-radius: var(--gg-radius);
  overflow: hidden;
  box-shadow: var(--gg-shadow);
  aspect-ratio: 4 / 3.2;
}
#acerca-de-logistica .outer-box .image-column .inner-column .image-box .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#acerca-de-logistica .outer-box .image-column .inner-column .image-box .image-2 {
  position: absolute;
  right: -18px;
  bottom: -34px;
  left: auto;
  top: auto;
  width: 230px;
  margin: 0;
  padding: 8px;
  border-radius: 14px;
  background-color: #fff;
  box-shadow: 0 16px 36px rgba(2, 24, 58, 0.2);
}
#acerca-de-logistica .outer-box .image-column .inner-column .image-box .image-2 img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* El círculo azul de 200px tapaba media foto; pasa a píldora en la esquina */
#acerca-de-logistica .outer-box .image-column .inner-column .image-box .exp-box {
  position: absolute;
  left: -16px;
  top: 22px;
  right: auto;
  bottom: auto;
  width: auto !important;
  height: auto !important;
  max-width: 220px;
  padding: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--gg-blue) 0%, var(--gg-navy) 100%);
  background-color: var(--gg-blue);
  box-shadow: 0 14px 32px rgba(4, 34, 62, 0.34);
  animation: none;
}
#acerca-de-logistica .outer-box .image-column .inner-column .image-box .exp-box:before { display: none !important; }
#acerca-de-logistica .outer-box .image-column .inner-column .image-box .exp-box .inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  text-align: left;
}
#acerca-de-logistica .outer-box .image-column .inner-column .image-box .exp-box .inner img {
  width: 32px;
  max-width: 32px;
  height: auto;
  margin-bottom: 0;
  flex-shrink: 0;
}
#acerca-de-logistica .outer-box .image-column .inner-column .image-box .exp-box .inner .title {
  padding: 0;
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
}

@media (max-width: 991.98px) {
  #acerca-de-logistica .outer-box .image-column .inner-column { margin-bottom: 60px; }
}
@media (max-width: 575.98px) {
  #acerca-de-logistica .outer-box .image-column .inner-column .image-box .exp-box,
  #acerca-de-logistica .outer-box .image-column .inner-column .image-box .image-2 {
    position: static;
    width: auto;
    max-width: none;
    margin-top: 14px;
  }
}

/* ================================================================
   AJUSTES POR ID — reconciliación de especificidad
   ================================================================
   custom.css declara buena parte del diseño anterior bajo el id de cada
   sección (#proyectos-logistica, #servicios-bloque, …). Un id gana a
   cualquier número de clases, así que las reglas por clase de arriba no
   alcanzaban a esas propiedades. Aquí se repiten al mismo nivel.
   ================================================================ */

/* ─── #proyectos-logistica (cards sobre navy) ──────────────────── */
#proyectos-logistica .project-carousel .project-block .inner-box .content-box .inner .title,
#proyectos-logistica .project-carousel .project-block .inner-box:hover .content-box .title {
  color: #fff;
  margin-bottom: 10px;
}
#proyectos-logistica .project-carousel .project-block .inner-box .content-box .inner .text,
#proyectos-logistica .project-carousel .project-block .inner-box:hover .content-box .text {
  color: rgba(255, 255, 255, 0.74);
  line-height: 1.6;
  padding-right: 0;
  min-height: 0;
}
#proyectos-logistica .project-carousel .project-block .inner-box .content-box .inner .icon { display: none; }
#proyectos-logistica .project-carousel .project-block .inner-box .content-box:before,
#proyectos-logistica .project-carousel .project-block .inner-box .content-box:after { display: none; }
#proyectos-logistica .project-carousel .owl-dots .owl-dot {
  border: 0;
  background-color: rgba(255, 255, 255, 0.28);
}
#proyectos-logistica .project-carousel .owl-dots .owl-dot.active { background-color: var(--gg-cyan); }

/* ─── #servicios-bloque (seis cards) ───────────────────────────── */
#servicios-bloque { padding: var(--gg-pad) 0; background-color: var(--gg-surface); }
#servicios-bloque .testimonial-block {
  background-color: transparent;
  padding-top: 0;
  padding-bottom: 0;
}
#servicios-bloque .testimonial-block .inner-box .author-box { flex-direction: column; flex-wrap: nowrap; }
#servicios-bloque .testimonial-block .inner-box .author-box .image { flex: 0 0 auto; width: 100%; }
#servicios-bloque .testimonial-block .inner-box .author-box .author-info {
  flex: 0 0 auto;
  width: 100%;
  padding: 22px 24px 0;
  background-color: transparent;
}
#servicios-bloque .testimonial-block .inner-box .author-box .author-info:before { display: none; }
#servicios-bloque .testimonial-block .inner-box .author-box .author-info .name,
#servicios-bloque .testimonial-block .inner-box:hover .author-info .name {
  min-height: 0;
  font-size: 19px;
  color: var(--gg-blue);
}
#servicios-bloque .testimonial-block .inner-box .content-box .text {
  min-height: 0;
  line-height: 1.6;
  color: var(--gg-body);
}

/* ─── #importacion-exportacion (comercializadora) ──────────────── */
#importacion-exportacion { text-align: left; }
#importacion-exportacion .outer-box { background-color: transparent; }
#importacion-exportacion .outer-box .sec-title .sub-title-outer .title {
  color: var(--gg-ink);
  text-align: center;
}
#importacion-exportacion .features-column .feature-block .inner-box:before { display: none; }
#importacion-exportacion .features-column .feature-block .inner-box .icon-box {
  margin-bottom: 16px;
}
#importacion-exportacion .features-column .feature-block .inner-box .icon-box .icon {
  width: 28px;
  max-width: 28px;
  height: 28px;
}
#importacion-exportacion .features-column .feature-block .inner-box .title,
#importacion-exportacion .features-column .feature-block .inner-box:hover .title {
  font-size: 17.5px;
  font-weight: 700;
  color: var(--gg-ink);
}
#importacion-exportacion .features-column .feature-block .inner-box .text,
#importacion-exportacion .features-column .feature-block .inner-box:hover .text {
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--gg-body);
}
/* El icono ya va azul sobre el chip claro: el filtro a blanco del hover
   lo volvía invisible. */
#importacion-exportacion .features-column .feature-block .inner-box:hover .icon-box .icon.fillColorWhite {
  filter: brightness(0) saturate(100%) invert(16%) sepia(88%) saturate(2588%)
          hue-rotate(206deg) brightness(94%) contrast(97%);
}
#importacion-exportacion .outer-box .info-banner .content-box .title {
  text-align: left;
  font-size: 22px;
  font-weight: 700;
}

/* ─── #trato-exclusivo ─────────────────────────────────────────── */
#trato-exclusivo .content-column .inner-column .sec-title {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}
#trato-exclusivo .content-column .inner-column .features-box .inner-box .icon {
  max-width: 36px;
}

/* ─── #despacho-aduanal ────────────────────────────────────────── */
#despacho-aduanal .content-column { background-color: transparent; }
#despacho-aduanal .content-column .inner-column .sec-title .title { color: #fff; }
#despacho-aduanal .content-column .inner-column .sec-title .text { color: rgba(255, 255, 255, 0.8); }

/* ─── #agencia-aduanal ─────────────────────────────────────────── */
#agencia-aduanal .content-column .inner-column .sec-title .title {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 700;
  color: var(--gg-ink);
}
/* La cifra iba pintada con una imagen de fondo recortada */
#agencia-aduanal .content-column .inner-column .count-box .count {
  background-image: none;
  -webkit-text-fill-color: var(--gg-cyan);
  color: var(--gg-cyan);
}
#agencia-aduanal .content-column .inner-column .count-box .title {
  color: rgba(255, 255, 255, 0.82);
}
#agencia-aduanal .image-column .boxBlock .inner-box { background-color: #fff; }
#agencia-aduanal .image-column .boxBlock .inner-box .icon-box .icon {
  margin-bottom: 0;
  max-width: 28px;
}
#agencia-aduanal .image-column .boxBlock .inner-box .title {
  font-size: 17.5px;
  color: var(--gg-ink);
}
#agencia-aduanal .image-column .boxBlock .inner-box .text {
  font-weight: 400;
  line-height: 1.6;
  color: var(--gg-body);
}

/* ─── #servicios-integrales (variante del bloque del home) ─────── */
#servicios-integrales { padding: var(--gg-pad) 0; }
#servicios-integrales .sec-title .title { color: var(--gg-ink); }
#servicios-integrales .sec-title .title span { color: var(--gg-blue-2); }
#servicios-integrales .about-block-two .inner-box .icon {
  min-width: 52px;
  background-color: transparent;
}
#servicios-integrales .about-block-two .inner-box .icon:after { display: none; }
#servicios-integrales .about-block-two .inner-box .icon img {
  position: static;
  transform: none;
  right: auto;
  max-width: 26px;
}
#servicios-integrales .about-block-two .inner-box .title { color: var(--gg-ink); }
#servicios-integrales .image-column .image-box .exp-box { background-color: var(--gg-blue); }
#servicios-integrales .image-column .image-box .exp-box .inner { padding: 14px 18px; }
#servicios-integrales .image-column .image-box .exp-box .inner:before { display: none; }
#servicios-integrales .image-column .image-box .exp-box .inner img {
  margin-bottom: 0;
  max-width: 32px;
}
#servicios-integrales .image-column .image-box .exp-box .inner .title {
  font-family: "Mukta Mahee", sans-serif;
  font-weight: 700;
}
#servicios-integrales .btnOne {
  font-size: 14.5px;
  font-weight: 800;
  background-color: var(--gg-blue);
}

/* ─── Botón cian: el texto siempre en navy, en todas las secciones ─ */
#contacto .btnTwo span,
#contacto .gg-aside .btnTwo span,
#trato-exclusivo .btnTwo span,
#despacho-aduanal .content-column .inner-column .btnTwo span,
#importacion-exportacion .outer-box .info-banner .content-box .btnTwo span {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: "Mukta Mahee", sans-serif;
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gg-navy);
}
#contacto .btnTwo span i,
#trato-exclusivo .btnTwo span i,
#despacho-aduanal .content-column .inner-column .btnTwo span i,
#importacion-exportacion .outer-box .info-banner .content-box .btnTwo span i {
  font-size: 13px;
  color: var(--gg-navy);
}

/* Las cuatro cards iban en absoluto encima de la foto: la tapaban a
   medias y dejaban un hueco enorme bajo la columna de texto. Pasan al
   flujo, debajo de la foto. */
#agencia-aduanal .image-column .inner-column .features-box {
  position: relative !important;
  top: auto;
  left: auto;
  padding-right: 0 !important;
  margin-top: 24px;
}
#agencia-aduanal .image-column .inner-column .image {
  display: block !important;
  text-align: left;
}

/* Las bandas CTA siempre centran su contenido, lleve o no .text-center
   el markup de la página. */
.cta1 .row > [class*="col-"],
.cta2 .row > [class*="col-"],
.cta3 .row > [class*="col-"] {
  text-align: center;
}
.cta1 .sec-title, .cta2 .sec-title, .cta3 .sec-title {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ================================================================
   HERRAMIENTAS Y FORMULARIOS
   (#cotiza, #calculadora-cubicaje, #calculadora-peso-cargable,
    #calculadora-peso-volumetrico)
   ================================================================
   Las cuatro repetían el mismo montaje: una foto de 100vw anclada fuera
   del contenedor, un avión de clipart girado sobre el título y el
   formulario en un rectángulo azul semitransparente encima de la foto,
   con inputs grises que costaba leer. Ahora: superficie clara, panel
   navy con esquinas redondeadas y campos de contraste alto.
   ================================================================ */

#cotiza,
#calculadora-cubicaje,
#calculadora-peso-cargable,
#calculadora-peso-volumetrico {
  padding: var(--gg-pad) 0 !important;
  background-color: var(--gg-surface);
}

/* Las fotos que se salían del contenedor y el avión de clipart */
#cotiza .bgCotiza,
#calculadora-cubicaje .bgCalculadoraC,
#calculadora-peso-cargable .bgCalculadoraP,
#calculadora-peso-volumetrico .bgCalculadoraP,
#cotiza .titleSection .ghostImage,
#calculadora-cubicaje .titleSection .ghostImage,
#calculadora-peso-cargable .titleSection .ghostImage,
#calculadora-peso-volumetrico .titleSection .ghostImage {
  display: none !important;
}

/* ─── Encabezado ───────────────────────────────────────────────── */
#cotiza .titleSection,
#calculadora-cubicaje .titleSection,
#calculadora-peso-cargable .titleSection,
#calculadora-peso-volumetrico .titleSection {
  margin-bottom: 40px;
}
#cotiza .titleSection .subtitle,
#calculadora-cubicaje .titleSection .subtitle,
#calculadora-peso-cargable .titleSection .subtitle,
#calculadora-peso-volumetrico .titleSection .subtitle {
  display: block;
  margin-bottom: 12px;
  font-family: "Mukta Mahee", sans-serif;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--gg-blue-2);
}
#cotiza .titleSection .subtitle:before,
#calculadora-cubicaje .titleSection .subtitle:before,
#calculadora-peso-cargable .titleSection .subtitle:before,
#calculadora-peso-volumetrico .titleSection .subtitle:before {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  margin-bottom: 20px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gg-cyan) 0%, var(--gg-cyan) 55%, rgba(91, 198, 222, 0.25) 100%);
}
#cotiza .titleSection .title,
#calculadora-cubicaje .titleSection .title,
#calculadora-peso-cargable .titleSection .title,
#calculadora-peso-volumetrico .titleSection .title {
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.14;
  color: var(--gg-ink);
  margin-bottom: 0;
}

/* ─── Panel del formulario ─────────────────────────────────────── */
#cotiza .row.g-0,
#calculadora-cubicaje .row.g-0,
#calculadora-peso-cargable .row.g-0,
#calculadora-peso-volumetrico .row.g-0 { align-items: stretch; }

#cotiza .form-column .block,
#calculadora-cubicaje .form-column .block,
#calculadora-peso-cargable .form-column .block,
#calculadora-peso-volumetrico .form-column .block {
  height: 100%;
  padding: 44px 42px 40px;
  background-color: var(--gg-blue);
  background-image:
    radial-gradient(120% 90% at 12% 0%, rgba(91, 198, 222, 0.18) 0%, rgba(91, 198, 222, 0) 55%),
    linear-gradient(135deg, var(--gg-navy) 0%, var(--gg-blue) 60%, var(--gg-blue-2) 100%);
  border-radius: var(--gg-radius) 0 0 var(--gg-radius);
  box-shadow: var(--gg-shadow);
}
#cotiza .form-column .block .title,
#calculadora-cubicaje .form-column .block .title,
#calculadora-peso-cargable .form-column .block .title,
#calculadora-peso-volumetrico .form-column .block .title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
  margin-bottom: 26px;
}
#cotiza .form-column .block .titleBlock {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}

/* Campos: fondo blanco sólido y radio acorde al resto del sitio */
#cotiza .form-column .block .form-group input,
#cotiza .form-column .block .form-group select,
#cotiza .form-column .block .form-group textarea,
#calculadora-cubicaje .form-column .block .form-group input,
#calculadora-cubicaje .form-column .block .form-group textarea,
#calculadora-peso-cargable .form-column .block .form-group input,
#calculadora-peso-cargable .form-column .block .form-group textarea,
#calculadora-peso-volumetrico .form-column .block .form-group input,
#calculadora-peso-volumetrico .form-column .block .form-group textarea {
  border-radius: var(--gg-radius-sm);
  background-color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  color: var(--gg-ink);
}
#cotiza .form-column .block .form-group label,
#calculadora-cubicaje .form-column .block .form-group label,
#calculadora-peso-cargable .form-column .block .form-group label,
#calculadora-peso-volumetrico .form-column .block .form-group label {
  font-family: "Mukta Mahee", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.86);
  margin-bottom: 7px;
}

/* Botones de envío / cálculo */
/* El botón de las calculadoras es un <button onclick="doMath()"> sin id:
   ni custom.css ni esta hoja lo alcanzaban con #btnCalcC/#btnCalcP, así que
   se quedaba con el estilo genérico del tema. Se apunta por su lugar. */
#cotiza .form-column .block .form-group .btnCotiza,
#calculadora-cubicaje .form-column .block .form-group button.theme-btn,
#calculadora-peso-cargable .form-column .block .form-group button.theme-btn,
#calculadora-peso-volumetrico .form-column .block .form-group button.theme-btn {
  border-radius: var(--gg-radius-sm);
  background-color: var(--gg-cyan);
  color: var(--gg-navy);
  font-family: "Mukta Mahee", sans-serif;
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 15px 30px;
  cursor: pointer;
  transition: transform 200ms var(--gg-ease), box-shadow 200ms ease,
              background-color 200ms ease;
}
#cotiza .form-column .block .form-group .btnCotiza:hover,
#calculadora-cubicaje .form-column .block .form-group button.theme-btn:hover,
#calculadora-peso-cargable .form-column .block .form-group button.theme-btn:hover,
#calculadora-peso-volumetrico .form-column .block .form-group button.theme-btn:hover {
  background-color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(2, 18, 38, 0.3);
}

/* ─── Columna de resultado (calculadoras) ──────────────────────── */
#calculadora-cubicaje .secondColumn,
#calculadora-peso-cargable .secondColumn,
#calculadora-peso-volumetrico .secondColumn {
  padding: 44px 42px;
  background-color: #fff;
  border: 1px solid var(--gg-line);
  border-left: 0;
  border-radius: 0 var(--gg-radius) var(--gg-radius) 0;
  box-shadow: var(--gg-shadow);
  align-items: stretch;
  justify-content: center;
}
#calculadora-cubicaje .secondColumn .sec-title .title,
#calculadora-peso-cargable .secondColumn .sec-title .title,
#calculadora-peso-volumetrico .secondColumn .sec-title .title {
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
  color: var(--gg-ink);
  margin-bottom: 24px;
}
#calculadora-cubicaje .secondColumn .sec-title .form-group label,
#calculadora-peso-cargable .secondColumn .sec-title .form-group label,
#calculadora-peso-volumetrico .secondColumn .sec-title .form-group label {
  font-family: "Mukta Mahee", sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gg-body);
  margin-bottom: 6px;
}
#calculadora-cubicaje .secondColumn .sec-title .form-group input,
#calculadora-peso-cargable .secondColumn .sec-title .form-group input,
#calculadora-peso-volumetrico .secondColumn .sec-title .form-group input {
  border-radius: var(--gg-radius-sm);
  background-color: var(--gg-surface);
  border: 1.5px solid var(--gg-line);
  font-family: "Mukta Mahee", sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--gg-ink);
}
/* Resultado activo: el amarillo mostaza del tema no era de la paleta */
#calculadora-cubicaje .secondColumn .sec-title .form-group input.active,
#calculadora-peso-cargable .secondColumn .sec-title .form-group input.active,
#calculadora-peso-volumetrico .secondColumn .sec-title .form-group input.active {
  background-color: rgba(91, 198, 222, 0.16);
  border-color: var(--gg-cyan);
  color: var(--gg-blue);
}

@media (max-width: 991.98px) {
  #cotiza .form-column .block,
  #calculadora-cubicaje .form-column .block,
  #calculadora-peso-cargable .form-column .block,
  #calculadora-peso-volumetrico .form-column .block {
    border-radius: var(--gg-radius) var(--gg-radius) 0 0;
  }
  #calculadora-cubicaje .secondColumn,
  #calculadora-peso-cargable .secondColumn,
  #calculadora-peso-volumetrico .secondColumn {
    border-left: 1px solid var(--gg-line);
    border-radius: 0 0 var(--gg-radius) var(--gg-radius);
  }
}
@media (max-width: 575.98px) {
  #cotiza .form-column .block,
  #calculadora-cubicaje .form-column .block,
  #calculadora-peso-cargable .form-column .block,
  #calculadora-peso-volumetrico .form-column .block,
  #calculadora-cubicaje .secondColumn,
  #calculadora-peso-cargable .secondColumn,
  #calculadora-peso-volumetrico .secondColumn {
    padding: 30px 22px;
  }
}

/* ================================================================
   PÁGINA DE CONTACTO (#contact-top, #contacto-page)
   ================================================================ */
#contact-top { padding: var(--gg-pad) 0 0; }

/* Panel de ayuda de la barra lateral */
#contact-top .service-sidebar .sidebar-widget .service-details-help {
  padding: 34px 30px;
  border-radius: var(--gg-radius);
  background-color: var(--gg-blue);
  background-image: linear-gradient(135deg, var(--gg-navy) 0%, var(--gg-blue) 100%);
  box-shadow: var(--gg-shadow);
}
#contact-top .service-sidebar .sidebar-widget .service-details-help .help-title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
}
#contact-top .service-sidebar .sidebar-widget .service-details-help .help-icon {
  background-color: rgba(91, 198, 222, 0.18);
  color: var(--gg-cyan);
  border-radius: 14px;
}
#contact-top .service-sidebar .sidebar-widget .service-details-help .help-contact .link {
  font-size: 26px;
  font-weight: 700;
}

#contact-top .contact-details__right .sec-title .title {
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 700;
  line-height: 1.14;
  color: var(--gg-ink);
}
#contact-top .contact-details__right .sec-title .text {
  font-size: 16px;
  line-height: 1.65;
  color: var(--gg-body);
}

/* Datos de contacto: chips redondeados en vez de cuadros azules */
#contact-top .contact-details__right .contact-details__info li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--gg-line);
}
#contact-top .contact-details__right .contact-details__info li .icon {
  width: 46px;
  height: 46px;
  min-width: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(150deg, var(--gg-surface-2) 0%, #e2eefb 100%);
  background-color: var(--gg-surface-2);
  transition: background 300ms ease;
}
#contact-top .contact-details__right .contact-details__info li .icon span { color: var(--gg-blue); }
#contact-top .contact-details__right .contact-details__info li .icon:hover {
  background: linear-gradient(150deg, #e2f4fa 0%, #cfe6fb 100%);
  background-color: #e2f4fa;
}
#contact-top .contact-details__right .contact-details__info li .contInfo .text {
  font-size: 15px;
  font-weight: 700;
  color: var(--gg-ink);
  margin-bottom: 2px;
}
#contact-top .contact-details__right .contact-details__info li .contInfo .link {
  margin-left: 0;
  font-family: "Helvetica", sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: var(--gg-body);
}
#contact-top .contact-details__right .contact-details__info li .contInfo .link:hover { color: var(--gg-blue); }

/* ─── Formulario de la página de contacto ──────────────────────── */
#contacto-page { padding: var(--gg-pad) 0 0; }
#contacto-page .sec-title .title {
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 700;
  line-height: 1.14;
  color: var(--gg-ink);
}
#contacto-page .contactForm input,
#contacto-page .contactForm textarea {
  border-radius: var(--gg-radius-sm);
  background-color: #fff;
  border: 1.5px solid var(--gg-line);
}
#contacto-page .contactForm .btnForm {
  border-radius: var(--gg-radius-sm);
  border: 0;
  background-color: var(--gg-blue);
  color: #fff;
  font-family: "Mukta Mahee", sans-serif;
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 15px 30px;
}
#contacto-page .contactForm .btnForm:hover {
  background-color: var(--gg-navy);
  color: #fff;
  box-shadow: 0 14px 30px rgba(4, 67, 163, 0.3);
}
#contacto-page .secondColumn {
  padding: 40px;
  border-radius: var(--gg-radius);
  background-color: var(--gg-surface);
  border: 1px solid var(--gg-line);
}
#contacto-page .secondColumn .sec-title .title {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 700;
  margin-bottom: 22px;
}

/* ================================================================
   PÁGINAS DE TEXTO (#incoterms, #aviso-de-privacidad)
   ================================================================ */
#incoterms,
#aviso-de-privacidad {
  padding: var(--gg-pad) 0 !important;
}
#aviso-de-privacidad .text {
  font-family: "Helvetica", sans-serif;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--gg-body);
}
#aviso-de-privacidad .link { color: var(--gg-blue); }

/* Owl deja cada slide con su alto natural, así que las cards de una
   misma fila quedaban desparejas. Con la etapa en flex, las cuatro
   miden lo mismo y los enlaces se alinean. */
#servicios-home .services-carousel .owl-stage,
.projects-section .project-carousel .owl-stage {
  display: flex;
}
#servicios-home .services-carousel .owl-item,
.projects-section .project-carousel .owl-item {
  display: flex;
  height: auto;
}
#servicios-home .services-carousel .owl-item > div,
#servicios-home .services-carousel .service-block,
.projects-section .project-carousel .owl-item > div,
.projects-section .project-carousel .project-block {
  display: flex;
  width: 100%;
}

/* La foto de la tarjeta de innovación es cálida (cartón, madera) y al
   bajarle la opacidad dejaba un tinte rojizo sobre el panel azul.
   Con `luminosity` la imagen aporta sólo el claroscuro y el color lo pone
   el degradado del panel. */
#importacion-exportacion .info-banner .content-box .image-box .image img {
  mix-blend-mode: luminosity;
  opacity: 0.3;
}

/* #servicios-integrales usa la misma plantilla que #atencion: la columna
   de imagen necesita el mismo tratamiento (foto con marco, credencial
   como tarjeta desplazada y píldora flotante). */
#servicios-integrales .image-column .inner-column {
  padding: 0 !important;
  margin-bottom: 0 !important;
}
#servicios-integrales .image-column .inner-column .image-box {
  position: relative;
  width: 100%;
}
#servicios-integrales .image-column .inner-column .image-box .image-2 {
  position: absolute;
  left: -18px;
  bottom: -34px;
  right: auto;
  top: auto;
  display: block;
  width: 230px;
  margin: 0;
  padding: 8px;
  border-radius: 14px;
  background-color: #fff;
  box-shadow: 0 16px 36px rgba(2, 24, 58, 0.2);
}
#servicios-integrales .image-column .inner-column .image-box .image-2 img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}
@media (max-width: 991.98px) {
  #servicios-integrales .image-column .inner-column { margin-bottom: 60px !important; }
}
@media (max-width: 575.98px) {
  #servicios-integrales .image-column .inner-column .image-box .image-2,
  #servicios-integrales .image-column .image-box .exp-box {
    position: static;
    width: auto;
    max-width: none;
    margin-top: 14px;
  }
}

/* Línea de entrada de las herramientas: el cintillo ya trae etiqueta y
   título, así que aquí sólo va lo que la calculadora hace. */
.gg-lead {
  max-width: 640px;
  margin: 0;
  font-family: "Helvetica", sans-serif;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--gg-body);
}
.gg-lead:before {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  margin-bottom: 22px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gg-cyan) 0%, var(--gg-cyan) 55%, rgba(91, 198, 222, 0.25) 100%);
}

/* La foto de cobertura venía a tamaño natural y estiraba la sección casi
   1000 px, dejando la columna de texto flotando en un hueco enorme. */
#agencia-aduanal .image-column .inner-column .image {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
#agencia-aduanal .image-column .inner-column .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* La tabla de Incoterms es una sola imagen: se le pone el mismo marco que
   a las demás piezas para que no quede flotando sobre el fondo. */
#incoterms .content-column img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--gg-radius);
  box-shadow: var(--gg-shadow);
}

/* El tema subía el icono 68px para que el aro de 129px quedara a caballo
   sobre el borde de la banda. Sin aro, ese margen dejaba el glifo flotando
   fuera de la sección, sobre el fondo blanco. */
#cifras .counter-block-two .inner-box .icon-box .icon {
  margin: 0 0 14px;
}

/* La columna derecha de #trato-exclusivo se quedó vacía al retirar el barco
   de line-art y el cuadrado suelto; ahora lleva la foto que antes era el
   fondo de la sección, con el mismo marco que el resto del sitio. */
#trato-exclusivo .video-column .inner-column {
  display: flex;
  align-items: center;
  height: 100%;
}
#trato-exclusivo .video-column .inner-column .image {
  width: 100%;
  margin: 0;
  overflow: hidden;
  border-radius: var(--gg-radius);
  box-shadow: 0 24px 54px rgba(2, 18, 38, 0.4);
  aspect-ratio: 4 / 3;
}
#trato-exclusivo .video-column .inner-column .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 991.98px) {
  #trato-exclusivo .video-column .inner-column { margin-top: 34px; }
  #trato-exclusivo .video-column .inner-column .image { aspect-ratio: 16 / 9; }
}


/* Las correcciones van al final: deben ganar por orden a las secciones
   originales de esta misma hoja, que se declaran más arriba. */

/* ================================================================
   CORRECCIONES — auditoría UX/UI + front-end + abogado del diablo
   ================================================================ */

/* ─── P0 · Header invisible en las páginas de post ─────────────────
   .post-header va sobre #f7f9fc y el header es absoluto con logo y menú
   blancos: en cada post la navegación entera desaparecía. Aquí el header
   deja de flotar y usa la variante oscura. */
#blogPostPage .header-lower {
  position: relative !important;
  background-color: #fff !important;
  box-shadow: 0 1px 0 var(--gg-line);
}
#blogPostPage .header-lower .main-box .logo-box .logo .logo-light { display: none !important; }
#blogPostPage .header-lower .main-box .logo-box .logo .logo-dark  { display: block !important; }
#blogPostPage .header-lower .main-box .main-menu .navigation > li > a {
  color: var(--gg-blue) !important;
}
#blogPostPage .header-lower .main-box .main-menu .navigation > li > a:hover,
#blogPostPage .header-lower .main-menu .navigation > li.active > a {
  color: var(--gg-blue-2) !important;
}
#blogPostPage .header-lower .main-menu .navigation > li.active:before {
  background-color: var(--gg-blue-2) !important;
}
/* Ya no hace falta reservar sitio para un header flotante */
#blogPostPage .post-header { padding-top: 52px; }

/* ─── P0 · Calculadora de peso cargable: columna en blanco ─────────
   custom.css deja label y .disclosure en #fff. En cubicaje el <form> vive
   dentro de .sec-title y lo alcanzan los overrides; aquí está fuera, así
   que las tres etiquetas y las notas quedaban blanco sobre blanco. */
#calculadora-peso-cargable .secondColumn label,
#calculadora-peso-cargable .secondColumn .form-group label,
[id^="calculadora-"] .secondColumn .results label {
  color: var(--gg-ink) !important;
  font-family: "Mukta Mahee", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
#calculadora-peso-cargable .secondColumn .disclosure,
[id^="calculadora-"] .secondColumn .disclosure,
#calculadora-peso-cargable .secondColumn .disclosure a {
  color: var(--gg-body) !important;
}
#calculadora-peso-cargable .secondColumn input[readonly],
[id^="calculadora-"] .secondColumn .results input {
  background-color: var(--gg-surface) !important;
  border: 1px solid var(--gg-line) !important;
  color: var(--gg-ink) !important;
  font-weight: 700;
}

/* ─── P4 · El único naranja del sitio ─────────────────────────────
   .theme-btn.btn-style-one sin modificador toma --theme-color1 del tema
   (#ff6d2e). Redefinir el token mata la fuga en cualquier botón, icono o
   enlace que el rediseño no haya alcanzado, en las 13 páginas. */
:root {
  --theme-color1: #0443a3;
}

/* ─── P1 · Cards ──────────────────────────────────────────────────
   1. Doble traslape: galgo.css movió el -72px a .outer-box pero el tema
      lo sigue declarando en .feature-block-three .inner-box (style.css
      :4996). En ≥992px se sumaban: -144px, y las cards se comían la
      parte baja del hero.
   2. Cinco familias de card con tres elevaciones distintas (-4/-6/-8px)
      y sombras escritas a mano en vez de los tokens. Se unifican. */
.boxesSlide .inner-box {
  margin-top: 0 !important;
  border-radius: var(--gg-radius);
  box-shadow: var(--gg-shadow);
}
.boxesSlide .inner-box:hover,
#servicios-home .service-block .inner-box:hover,
#servicios-bloque .inner-box:hover,
.projects-section .project-block .inner-box:hover,
.feature-block-four .inner-box:hover,
.features-section .feature-block .inner-box:hover {
  transform: translateY(-6px);
  box-shadow: var(--gg-shadow-h);
}

/* La sombra del hover se recortaba contra el overflow del carrusel: sólo
   había 10px de holgura arriba y 0 a los lados. */
#servicios-home .carousel-outer { margin: 0 -24px; }
#servicios-home .services-carousel .owl-stage-outer { padding: 18px 24px 50px; }

/* ─── P2 · Contadores ─────────────────────────────────────────────
   La "k" era un :before en position:absolute con right:-30px y el "+" un
   nodo empujado con margin-right:32px — offsets fijos contra un número
   en clamp(46px,5vw,62px). Al contar de 0 a 28 el <span> cambiaba de
   ancho y ambos saltaban en horizontal. Ahora el sufijo va en el markup. */
#cifras .count-box .thousand:before { content: none !important; }
#cifras .count-box .thousand { margin-right: 0 !important; }

/* La divisoria salía asimétrica en tablet: con col-md-6 la fila 1 quedaba
   [sin línea][con línea] y la fila 2 [con línea][con línea]. */
@media (min-width: 768px) and (max-width: 991.98px) {
  #cifras .counter-block-two:nth-child(2n + 1) .inner-box:before {
    display: none !important;
  }
}

/* ─── P3 · Animaciones ────────────────────────────────────────────
   El H1 del hero, el subtítulo y el CTA nacen con opacity:0 y sólo los
   revive la clase .active que pone owl.js. Si jQuery u owl fallan (172 KB
   de JS) el hero se queda en blanco para siempre, y aun cargando bien el
   LCP no puede ocurrir antes de ejecutarlos. El primer slide entra ya
   visible; el resto conserva la animación. */
#home .owl-carousel .owl-item:first-child .animate-1,
#home .owl-carousel .owl-item:first-child .animate-2,
#home .owl-carousel .owl-item:first-child .animate-3,
#home .slide-item:first-child .animate-1,
#home .slide-item:first-child .animate-2,
#home .slide-item:first-child .animate-3 {
  opacity: 1;
  transform: none;
}

/* Los títulos con scrub de GSAP vivían al 20 % de opacidad hasta que el
   usuario scrolleaba: texto blanco sobre navy a 0.2 da ~1.4:1, y si el
   elemento queda cerca del pie nunca termina de aparecer. */
.scrub-each-word .word,
.scrub-each-word .char { opacity: 1 !important; }

/* SplitType pone display:inline-block en cada .word y el tema recorta con
   overflow:hidden dejando sólo 0.1em: las colas de la "g" salían mochadas
   en "logística", "soluciones", "compromiso". No hay ninguna animación de
   máscara que necesite el recorte. */
.word {
  overflow: visible !important;
  padding-bottom: 0.1em;
  margin-bottom: -0.35em;
}

/* Las flechas del banner iban a rgba(255,255,255,.3) sobre foto (~1.6:1) y
   desaparecían por completo bajo 992px: en móvil el hero era una
   diapositiva muerta, sin drag ni controles. */
#home .owl-nav .owl-prev,
#home .owl-nav .owl-next {
  color: #fff !important;
  background-color: rgba(4, 34, 62, 0.42) !important;
  border-color: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(2px);
}
#home .owl-nav .owl-prev:hover,
#home .owl-nav .owl-next:hover {
  background-color: var(--gg-blue) !important;
  border-color: var(--gg-blue) !important;
}
@media (max-width: 991.98px) {
  #home .owl-nav { display: flex !important; }
}

/* ─── P4 · Contraste ──────────────────────────────────────────────
   Placeholders a #93a4b8 y #9ca3af sobre blanco: 2.5:1, por debajo del
   4.5:1. Y como los campos no tienen <label>, ese texto tenue es la única
   etiqueta que ve el usuario. */
#contacto .form-column .block .form-group input::placeholder,
#contacto .form-column .block .form-group textarea::placeholder,
#contacto-page .contactForm input::placeholder,
#contacto-page .contactForm textarea::placeholder,
[id^="calculadora-"] .form-group input::placeholder {
  color: var(--gg-body) !important;
  opacity: 1;
}
#cotiza .form-column .block .form-group select:invalid {
  color: var(--gg-body) !important;
}

/* La etiqueta del hero del blog quedaba en --gg-blue-2 sobre el degradado
   azul: ~2.7:1 a 12.5px. */
.blog-hero .gg-eyebrow { color: var(--gg-cyan) !important; }

/* El blog redefinía --gg-ink/--gg-muted/--gg-line con valores propios: el
   texto salía más claro y más frío que en el resto del sitio. */
#blogPage, #blogPostPage {
  --gg-ink: #0f2338;
  --gg-muted: #5a6b80;
  --gg-line: #e3ebf5;
}

/* ─── P3 · Movimiento reducido, cobertura real ────────────────────
   El bloque anterior sólo cubría header, burbuja y back-to-top. Quedaban
   fuera los ~40 reveals de WOW, el banner, el scrub de GSAP, los tres
   carruseles y los .bounce-y/.bounce-x que corren en bucle infinito. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .wow, .animate-1, .animate-2, .animate-3 {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }
}

/* ─── P0 · Página de tracking ─────────────────────────────────────
   Era un parche con estilos inline flotando en medio de una pantalla en
   blanco. Ahora es una tarjeta del sistema, con el ritmo de sección. */
#tracking-cta {
  padding: var(--gg-pad) 0;
  background-color: var(--gg-surface);
}
#tracking-cta .tracking-cta-box {
  max-width: 780px;
  margin: 0 auto;
  padding: clamp(32px, 4vw, 52px);
  text-align: center;
  background-color: #fff;
  border: 1px solid var(--gg-line);
  border-radius: var(--gg-radius);
  box-shadow: var(--gg-shadow);
}
#tracking-cta .gg-eyebrow { justify-content: center; }
#tracking-cta .title {
  margin: 14px 0 12px;
  font-family: "Mukta Mahee", sans-serif;
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 700;
  line-height: 1.15;
  color: var(--gg-ink);
}
#tracking-cta p {
  max-width: 52ch;
  margin: 0 auto 26px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--gg-body);
}
#tracking-cta .tracking-note {
  margin: 22px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--gg-line);
  font-size: 14.5px;
}
#tracking-cta .tracking-note a {
  color: var(--gg-blue);
  font-weight: 700;
}

/* ─── P1 · Calculadoras: etiqueta y placeholder decían lo mismo ────
   Cada campo mostraba "Piezas*" arriba y "Piezas*" dentro. El placeholder
   pasa a ser un ejemplo del dato que se espera. */
[id^="calculadora-"] .form-group input::placeholder {
  font-style: normal;
}

/* La columna de resultados dejaba media pantalla vacía a la derecha
   porque el panel no crecía con la sección. */
[id^="calculadora-"] .secondColumn { display: flex; flex-direction: column; }
[id^="calculadora-"] .secondColumn .results { flex: 1 1 auto; }

/* ─── P3 · Entradas WOW más cortas ────────────────────────────────
   animate.css corre a 1 s y fadeInUp/Left/Right desplazan el bloque
   ~100px. Con secciones a pantalla completa el usuario alcanza la banda
   antes de que termine y la ve vacía: es la queja de "aparece en blanco".
   0.55 s y 28px conservan el gesto sin dejar huecos. */
.wow.animated {
  animation-duration: 0.55s !important;
  animation-fill-mode: both;
}
@keyframes ggFadeInUp    { from { opacity: 0; transform: translate3d(0, 28px, 0); }  to { opacity: 1; transform: none; } }
@keyframes ggFadeInLeft  { from { opacity: 0; transform: translate3d(-28px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes ggFadeInRight { from { opacity: 0; transform: translate3d(28px, 0, 0); }  to { opacity: 1; transform: none; } }
.wow.fadeInUp    { animation-name: ggFadeInUp !important; }
.wow.fadeInLeft  { animation-name: ggFadeInLeft !important; }
.wow.fadeInRight { animation-name: ggFadeInRight !important; }

/* ─── P1 · .cta3: el botón quedaba pegado a la barra del título ────
   En .cta1/.cta2 el <a> va fuera del .sec-title (que trae 30px de margen);
   en .cta3 va dentro, en un contenedor flex, sin colchón. */
.cta3 .sec-title .theme-btn { margin-top: 30px; }

/* ─── P1 · Título fantasma en servicios integrales ────────────────
   galgo.css convierte el <span> del <h2> en la etiqueta (display:block),
   así que el <br> que va después abre un renglón vacío de ~50px. */
#servicios-integrales .sec-title .title span + br { display: none; }

/* ================================================================
   REDISEÑO · #cifras — de fila plana a cuatro piezas con jerarquía
   ================================================================
   Antes: cuatro columnas de texto suelto separadas por pelos de 1px, sin
   encabezado que las presentara, con el número en cian y debajo una frase
   larga en blanco al 82 %. Se leía como decoración, no como argumento.
   Ahora: cabecera propia, y cada dato es una pieza con superficie, chip
   de icono, número, rótulo corto y línea de apoyo.
   ================================================================ */

#cifras .cifras-head {
  max-width: 620px;
  margin: 0 0 46px;
}
#cifras .cifras-head .title {
  margin: 0;
  font-family: "Mukta Mahee", sans-serif;
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: #fff;
}

#cifras .fact-counter > .row {
  row-gap: 20px;
}

/* La pieza: superficie translúcida en vez de la línea divisoria */
#cifras .counter-block-two .inner-box {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 28px 26px 26px !important;
  text-align: left;
  background-color: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--gg-radius);
  transition: background-color 300ms ease, border-color 300ms ease,
              transform 300ms var(--gg-ease);
}
#cifras .counter-block-two .inner-box:hover {
  background-color: rgba(255, 255, 255, 0.09);
  border-color: rgba(91, 198, 222, 0.45);
  transform: translateY(-4px);
}
/* Fuera la línea divisoria: ya no hay nada que separar */
#cifras .counter-block-two + .counter-block-two .inner-box:before {
  display: none !important;
}

/* Chip del icono, de la misma familia que las cards claras */
#cifras .counter-block-two .inner-box .icon-box {
  display: flex;
  margin-bottom: 20px !important;
}
#cifras .counter-block-two .inner-box .icon-box .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background-color: rgba(91, 198, 222, 0.14);
}
#cifras .counter-block-two .inner-box .icon-box .icon img {
  width: 26px;
  max-width: 26px;
  height: 26px;
}

#cifras .counter-block-two .inner-box .count-box {
  margin-bottom: 6px;
  font-size: clamp(40px, 3.6vw, 52px);
}

/* El rótulo es lo que se lee de un vistazo; la frase pasa a apoyo */
#cifras .counter-block-two .inner-box .counter-title {
  margin-bottom: 8px;
  font-family: "Mukta Mahee", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
}
#cifras .counter-block-two .inner-box .counter-note {
  margin: 0;
  font-family: "Helvetica", sans-serif;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.66);
}

@media (max-width: 991.98px) {
  #cifras .cifras-head { margin-bottom: 32px; }
  #cifras .counter-block-two .inner-box { padding: 24px 22px !important; }
}

/* ─── Micro-títulos: iban pegados al titular ──────────────────────
   12.5px con 14px de aire debajo de un título de hasta 44px: la etiqueta
   se leía como parte del titular en vez de como antetítulo. */
.gg-eyebrow {
  gap: 12px;
  margin-bottom: 22px;
  font-size: 13px;
  letter-spacing: 0.16em;
}
.gg-eyebrow:before,
.text-center .gg-eyebrow:after,
.gg-eyebrow.is-center:after {
  width: 30px;
  height: 2px;
}
/* El <span> que hace de antetítulo dentro de un <h2> comparte el gesto.
   SplitType envuelve cada palabra en <span class="word"> para el efecto de
   scroll: hay que excluirlas o cada palabra del titular se separa 18px. */
.sec-title .title > span:not(.word):not(.char):not(.line),
.titleSection .title > span:not(.word):not(.char):not(.line) {
  margin-bottom: 18px;
}

/* ─── Cards funcionales: toda la superficie es el enlace ──────────
   Las cards se elevaban al pasar el cursor pero sólo el título y el
   "Conocer más" navegaban: el usuario hacía clic en la foto o en el
   texto y no pasaba nada. El enlace del título se estira sobre la card
   entera (los otros dos <a> apuntan al mismo destino, así que no se
   pierde nada) y el foco de teclado se dibuja sobre la card, no sobre
   dos palabras sueltas. */
#servicios-home .service-block .inner-box { position: relative; }
/* El overlay se resuelve contra el ancestro posicionado más cercano: hay
   que desactivar el position:relative que el tema pone en .title y en
   .content-box, o sólo cubre el título. */
#servicios-home .service-block .content-box,
#servicios-home .service-block .content .title {
  position: static;
}
#servicios-home .service-block .content .title a:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--gg-radius);
}
/* El "Conocer más" queda por encima para conservar su propio hover */
#servicios-home .service-block .content .read-more {
  position: relative;
  z-index: 2;
}
#servicios-home .service-block .inner-box:has(a:focus-visible),
.boxesSlide .inner-box:focus-visible {
  outline: 3px solid var(--gg-cyan);
  outline-offset: 3px;
}
#servicios-home .service-block .content .title a:focus-visible { outline: none; }
/* El cursor de "mano" en toda la pieza confirma que es clicable */
#servicios-home .service-block .inner-box { cursor: pointer; }

/* Las modalidades de flete no llevan a ninguna parte: no deben
   comportarse como si fueran clicables. */
.projects-section .project-block .inner-box {
  cursor: default;
}
.projects-section .project-block .inner-box:hover {
  transform: none;
}

/* ─── Fotos: el velo del tema ya no hace falta ────────────────────
   Las imágenes se graduaron al archivo (misma temperatura y luminancia
   en toda la serie), así que el filtro que las apagaba en CSS sobraba y
   sólo restaba nitidez. */
#servicios-home .service-block .image-box .image img,
.projects-section .project-block .image img {
  filter: none;
}


/* ================================================================
   CONTENEDOR DEL CARRUSEL DE MODALIDADES
   ================================================================
   El <div class="carousel-outer"> vive FUERA del .auto-container, así que
   el carrusel salía a sangre: el título arrancaba en 176px y la primera
   card en 32px, con la última cortada por el borde. Se le da el mismo
   ancho que al contenedor, descontando los 12px de margen de cada card
   para que el borde visible de la card alinee con el del título.
   ================================================================ */
.projects-section .carousel-outer {
  max-width: 1190px;
  margin: 0 auto;
  padding: 0 3px !important;
}
.projects-section .services-carousel,
.projects-section .project-carousel { overflow: visible; }
/* Holgura para que la sombra/elevación del hover no se recorte */
.projects-section .owl-stage-outer {
  padding: 14px 0 34px;
  margin: -14px 0 -34px;
}
@media (max-width: 767.98px) {
  .projects-section .carousel-outer { padding: 0 !important; }
}

/* ================================================================
   HOVER: una sola gramática
   ================================================================
   El tema movía el CONTENIDO de las piezas al pasar el cursor: la foto
   hacía zoom al 110 %, los iconos giraban y escalaban, los botones
   barrían un fondo desde un borde. Con el cursor encima de una card el
   conjunto temblaba. A partir de aquí el hover mueve la PIEZA (se eleva,
   cambia de color, la flecha avanza) y nunca su contenido.
   ================================================================ */

/* Zoom de foto: fuera en todas las cards */
.project-block .inner-box:hover .image img,
.projects-section .project-block .inner-box:hover .image img,
#servicios-home .service-block .inner-box:hover .image-box .image img,
.service-block .inner-box:hover .image img,
.news-block .inner-box:hover .image img,
.blog-card:hover img {
  transform: none !important;
}
/* La foto ya no necesita transición de transform */
#servicios-home .service-block .image-box .image img,
.projects-section .project-block .inner-box .image img {
  transition: none;
}

/* Iconos que giraban o crecían */
.header-cta:hover .header-cta-icon,
.header-cta:focus-visible .header-cta-icon,
.wa-bubble:hover .wa-bubble-icon,
.wa-bubble:focus-visible .wa-bubble-icon,
#subscribe .btnSubscribe:hover,
#subscribe .subscribe-form .btnSubscribe:hover {
  transform: none !important;
}
/* El chip del CTA conserva el cambio de color, que sí informa */
.header-cta:hover .header-cta-icon,
.header-cta:focus-visible .header-cta-icon {
  background-color: var(--gg-cyan);
  color: var(--gg-navy);
}
#subscribe .subscribe-form .btnSubscribe:hover {
  background-color: #fff !important;
}

/* Barridos de fondo del tema en botones y overlays */
.theme-btn.btn-style-one:before,
.theme-btn.btn-style-one:hover:before,
.header-cta:before,
.overlay-anim:after,
.overlay-anim:hover:after {
  display: none !important;
}

/* Elevación: un solo valor en todo el sitio */
.boxesSlide .inner-box:hover,
#servicios-home .service-block .inner-box:hover,
#servicios-bloque .inner-box:hover,
.feature-block-four .inner-box:hover,
.features-section .feature-block .inner-box:hover,
.blog-card:hover,
#cifras .counter-block-two .inner-box:hover {
  transform: translateY(-6px);
}


/* ================================================================
   CAPA DE MOVIMIENTO EN SCROLL
   ================================================================
   Sustituye al fadeInUp de animate.css (todo entraba igual, desde abajo,
   en un segundo). Tres gestos distintos según qué es la pieza:
     · rise   — bloques de texto y cabeceras: suben 26px
     · wipe   — fotos: se revelan con una máscara y se asientan de 1.04 a 1
     · draw   — la barra de acento se dibuja de izquierda a derecha
   Las rejillas de cards entran en cascada (70ms entre hermanas), así que
   se lee el orden en vez de aparecer todo de golpe.

   El estado inicial cuelga de .gg-motion, que pone el propio JS: sin JS
   no se oculta nada. Todo corre en transform/opacity/clip-path.
   ================================================================ */

.gg-motion [data-gg] {
  opacity: 0;
  will-change: transform, opacity;
}
.gg-motion [data-gg="rise"]  { transform: translate3d(0, 26px, 0); }
.gg-motion [data-gg="wipe"]  { clip-path: inset(18% 0 0 0); transform: scale(1.045); }
.gg-motion [data-gg="draw"]  { transform: translate3d(0, 12px, 0); }
.gg-motion [data-gg="draw"]:before { transform: scaleX(0); transform-origin: left center; }

.gg-motion [data-gg].is-in {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
  transition:
    opacity   620ms cubic-bezier(0.2, 0.7, 0.3, 1) var(--gg-delay, 0ms),
    transform 760ms cubic-bezier(0.2, 0.7, 0.3, 1) var(--gg-delay, 0ms),
    clip-path 860ms cubic-bezier(0.2, 0.7, 0.3, 1) var(--gg-delay, 0ms);
}
.gg-motion [data-gg="draw"].is-in:before {
  transform: scaleX(1);
  transition: transform 620ms cubic-bezier(0.2, 0.7, 0.3, 1)
              calc(var(--gg-delay, 0ms) + 140ms);
}

/* La foto necesita recortar la máscara sin que se vea el borde duro */
.gg-motion [data-gg="wipe"] { overflow: hidden; }

/* ─── Barra de progreso de lectura en el header fijo ──────────────
   No es adorno: dice cuánto queda de página, que en las de servicio son
   largas. Vive en el borde inferior del header pegajoso. */
.gg-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(var(--gg-scroll, 0));
  transform-origin: left center;
  background: linear-gradient(90deg, var(--gg-cyan), var(--gg-blue-2));
  pointer-events: none;
  opacity: 0;
  transition: opacity 260ms ease;
}
.sticky-header.fixed-header .gg-progress { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .gg-motion [data-gg] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  .gg-motion [data-gg="draw"]:before { transform: scaleX(1) !important; }
  .gg-progress { transition: none; }
}


/* ================================================================
   HOME · continuidad hero → cards de servicio
   ================================================================
   Las cuatro cards son la primera parada después del banner: se montan
   sobre él para que la lectura no se corte en el borde de la foto. En
   móvil también traslapan (antes bajaban a ras y quedaba un escalón).

   `flow-root` es lo que hace que el traslape se vea: sin él, el margen
   negativo de .outer-box colapsaba con la sección y subía el bloque azul
   entero — la foto se recortaba y las cards seguían a ras del borde. */
.boxesSlide {
  display: flow-root;
  padding-bottom: 64px;
}
.boxesSlide .outer-box {
  margin-top: -104px;
}

@media (max-width: 991.98px) {
  .boxesSlide { padding-bottom: 56px; }
  .boxesSlide .outer-box {
    margin-top: -56px;
    padding-top: 0;
  }
}

/* ================================================================
   HOME · #atencion — composición de la columna de imagen
   ================================================================
   La foto medía menos que la columna de texto y las dos piezas
   flotantes salían del recuadro: la píldora "Mercancía en movimiento"
   quedaba suspendida por encima de la imagen y la credencial GLA
   asomaba media fuera por la esquina. Ahora la foto llena la columna en
   vertical y las dos piezas viven dentro, sobre un velo que les da
   contraste. */
@media (min-width: 992px) {
  #atencion > .auto-container > .row {
    align-items: center;
  }
  #atencion .image-column .image-box .image {
    aspect-ratio: 4 / 5;
  }
  #atencion .image-column .image-box .image img {
    height: 100%;
    object-fit: cover;
  }
}

/* Velo inferior: la credencial blanca necesita fondo para leerse */
#atencion .image-column .image-box .image:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 52%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(4, 34, 62, 0) 0%, rgba(4, 34, 62, 0.55) 100%);
}

/* Credencial GLA: dentro de la foto, esquina inferior izquierda */
#atencion .image-column .image-box .image-2 {
  left: 22px;
  bottom: 22px;
  width: 186px;
  padding: 9px;
  border-radius: 14px;
  background-color: rgba(255, 255, 255, 0.96);
  box-shadow: 0 16px 34px rgba(2, 24, 58, 0.28);
}

/* "Mercancía en movimiento": píldora dentro de la foto, arriba a la
   derecha, en vidrio oscuro para no competir con la credencial. */
#atencion .image-column .image-box .exp-box {
  right: 22px;
  top: 22px;
  max-width: 216px;
  border-radius: 999px;
  background: rgba(4, 34, 62, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 12px 28px rgba(2, 24, 58, 0.3);
}
#atencion .image-column .image-box .exp-box .inner {
  padding: 10px 18px 10px 12px;
  gap: 10px;
}
#atencion .image-column .image-box .exp-box .inner img {
  width: 26px;
  max-width: 26px;
}
#atencion .image-column .image-box .exp-box .inner .title {
  font-size: 13px;
  letter-spacing: 0.2px;
}

@media (max-width: 991.98px) {
  #atencion .image-column .inner-column { margin-bottom: 46px; }
  #atencion .image-column .image-box .image { aspect-ratio: 16 / 10; }
  #atencion .image-column .image-box .image img { height: 100%; object-fit: cover; }
  #atencion .image-column .image-box .image-2 { width: 150px; left: 16px; bottom: 16px; }
  #atencion .image-column .image-box .exp-box { right: 16px; top: 16px; max-width: 200px; }
}
@media (max-width: 575.98px) {
  /* En pantallas angostas la píldora tapaba la foto: baja al flujo. */
  #atencion .image-column .image-box .exp-box {
    position: static;
    max-width: none;
    margin-top: 16px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: linear-gradient(135deg, var(--gg-blue) 0%, var(--gg-navy) 100%);
  }
  #atencion .image-column .image-box .image-2 { width: 128px; left: 12px; bottom: 12px; }
}

/* ================================================================
   HOME · #servicios-home — rejilla en lugar de carrusel
   ================================================================
   Eran cuatro áreas de negocio dentro de un owl-carousel que sólo
   enseñaba tres: la cuarta dependía de que alguien arrastrara. Al ser
   contenido de navegación, no de galería, van todas a la vez. */
#servicios-home .services-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
}

#servicios-home .services-grid .service-block {
  display: flex;
  margin: 0;
}
#servicios-home .services-grid .service-block .inner-box {
  margin: 0;
  width: 100%;
}

@media (max-width: 1199.98px) {
  #servicios-home .services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
}
@media (max-width: 575.98px) {
  #servicios-home .services-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
}

/* ================================================================
   FOOTER — cierre de página
   ================================================================
   Antes: una foto de contenedores de fondo tapada al 96 % por un azul
   plano (se veía como una mancha), títulos con un cuadrito y una raya,
   enlaces con dobles flechas y una regla blanca de 2px cruzando el pie.
   Ahora: degradado navy propio sin imagen, más aire, cuatro columnas
   con jerarquía clara y una barra inferior discreta. */
.main-footer.footer-style-one {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #04223e 0%, #063061 48%, #04223e 100%);
}

/* Luz de marca: dos halos muy abiertos, nada de fotografía */
.main-footer.footer-style-one:before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(64% 58% at 6% 0%, rgba(91, 198, 222, 0.16) 0%, rgba(91, 198, 222, 0) 62%),
    radial-gradient(58% 52% at 100% 96%, rgba(51, 102, 202, 0.3) 0%, rgba(51, 102, 202, 0) 66%);
}
/* Filo superior de acento */
.main-footer.footer-style-one:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gg-cyan) 0%, var(--gg-blue-2) 42%, rgba(51, 102, 202, 0) 78%);
}

.main-footer.footer-style-one .widgets-section,
.main-footer.footer-style-one .footer-bottom {
  position: relative;
  z-index: 1;
}

/* Más alto: el pie es la última impresión y venía apretado. El tope
   grande absorbe además los -90px con que sube el bloque de newsletter. */
.main-footer .widgets-section {
  padding: clamp(170px, 16vw, 230px) 0 clamp(44px, 4.5vw, 72px);
}
.main-footer .footer-column {
  margin-bottom: 46px;
}
/* El tope grande existe para alojar el bloque de newsletter, que sube
   90px sobre el pie. En las páginas que no lo llevan (blog) sería un
   hueco vacío. */
body:not(:has(.subscribe-section.pull-down)) .main-footer .widgets-section {
  padding-top: clamp(64px, 7vw, 100px);
}

/* ─── Columna de marca ─────────────────────────────────────────── */
.main-footer .about-widget .logo {
  margin-bottom: 26px;
}
.main-footer .about-widget .logo img {
  max-width: 224px;
  height: auto;
}
.main-footer.footer-style-one .widgets-section .footer-column .footer-widget .widget-content .text {
  max-width: 360px;
  margin-bottom: 26px;
  font-family: "Helvetica", sans-serif;
  font-size: 15px;
  line-height: 1.72;
  color: rgba(255, 255, 255, 0.74);
}

/* Datos de confianza en píldoras: horario y membresía */
.footer-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}
.footer-badges li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.06);
  font-family: "Mukta Mahee", sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.86);
}
.footer-badges li i {
  font-size: 11px;
  color: var(--gg-cyan);
}

/* Acceso directo a WhatsApp: el canal por el que más entra la gente */
.footer-wa {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 10px 22px 10px 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.05);
  transition: background-color 260ms ease, border-color 260ms ease,
              transform 260ms var(--gg-ease);
}
.footer-wa:hover,
.footer-wa:focus-visible {
  background-color: rgba(255, 255, 255, 0.11);
  border-color: rgba(91, 198, 222, 0.5);
  transform: translateY(-2px);
}
.footer-wa-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--gg-cyan-2) 0%, var(--gg-cyan) 100%);
  color: var(--gg-navy);
  font-size: 20px;
}
.footer-wa-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.2;
}
.footer-wa-text small {
  font-family: "Mukta Mahee", sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.footer-wa-text strong {
  font-family: "Mukta Mahee", sans-serif;
  font-size: 16.5px;
  font-weight: 700;
  color: #fff;
}

/* ─── Títulos de columna ───────────────────────────────────────── */
.main-footer .widgets-section .footer-column .footer-widget .widget-title {
  padding-bottom: 0;
  margin-bottom: 24px;
  font-family: "Mukta Mahee", sans-serif;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}
/* El cuadrito y la rayita del tema se sustituyen por una barra cian
   sobre el rótulo, el mismo gesto que abre cada sección de la página. */
.main-footer .widgets-section .footer-column .footer-widget .widget-title:before {
  position: static;
  display: block;
  width: 34px;
  height: 3px;
  margin-bottom: 14px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gg-cyan) 0%, rgba(91, 198, 222, 0.2) 100%);
}
.main-footer .widgets-section .footer-column .footer-widget .widget-title:after {
  display: none;
}

/* ─── Listas de enlaces ────────────────────────────────────────── */
.main-footer .user-links li {
  margin-bottom: 13px;
  line-height: 1.4;
}
.main-footer.footer-style-one .widgets-section .footer-column .footer-widget .widget-content .user-links li a {
  position: relative;
  display: inline-block;
  padding-left: 16px;
  font-family: "Helvetica", sans-serif;
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.74);
  transition: color 260ms ease, padding-left 260ms var(--gg-ease);
}
/* Guion cian que crece al apuntar: sustituye a la doble flecha */
.main-footer.footer-style-one .widgets-section .footer-column .footer-widget .widget-content .user-links li a:before {
  position: absolute;
  left: 0;
  top: 0.72em;
  bottom: auto;
  width: 8px;
  height: 2px;
  border-radius: 2px;
  background-color: rgba(91, 198, 222, 0.55);
  transition: width 260ms var(--gg-ease), background-color 260ms ease;
}
.main-footer.footer-style-one .widgets-section .footer-column .footer-widget .widget-content .user-links li a:hover {
  color: #fff;
  padding-left: 22px;
}
.main-footer.footer-style-one .widgets-section .footer-column .footer-widget .widget-content .user-links li a:hover:before {
  width: 14px;
  background-color: var(--gg-cyan);
}

/* ─── Contacto ─────────────────────────────────────────────────── */
.main-footer .contact-list-two li {
  margin-bottom: 16px;
  padding-left: 34px;
  line-height: 1.6;
}
.main-footer.footer-style-one .widgets-section .footer-column .footer-widget .widget-content .contact-list-two li i {
  top: 1px;
  font-size: 13px;
  color: var(--gg-cyan);
}
.main-footer.footer-style-one .widgets-section .footer-column .footer-widget .widget-content .contact-list-two li a {
  font-family: "Helvetica", sans-serif;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.74);
  transition: color 260ms ease;
}
.main-footer.footer-style-one .widgets-section .footer-column .footer-widget .widget-content .contact-list-two li a:hover {
  color: #fff;
}

/* ─── Barra inferior ───────────────────────────────────────────── */
.main-footer .footer-bottom .inner-container {
  flex-wrap: wrap;
  gap: 18px 32px;
  padding: 22px 0 26px;
  /* La regla blanca de 2px partía el pie en dos; basta un filo. */
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.main-footer .footer-bottom .inner-container .copyright-text {
  font-family: "Helvetica", sans-serif;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.56);
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
  margin: 0 auto 0 0;
  padding: 0;
  list-style: none;
}
.footer-legal a {
  font-family: "Mukta Mahee", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  transition: color 260ms ease;
}
.footer-legal a:hover {
  color: var(--gg-cyan);
}

@media (max-width: 991.98px) {
  .main-footer .widgets-section {
    padding: clamp(150px, 22vw, 190px) 0 32px;
  }
  .main-footer .footer-column { margin-bottom: 40px; }
}
@media (max-width: 767.98px) {
  .main-footer .footer-bottom .inner-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
  }
  .footer-legal {
    justify-content: center;
    margin: 0;
  }
  .main-footer .footer-bottom .inner-container .copyright-text {
    margin-bottom: 0;
  }
}