/* =====================================================================
   AFX — pie de página
   Jerarquía, columnas de navegación y ritmo sobre la estructura de
   Elementor. Colores: escala azul del manual + neutros de marca.
   ===================================================================== */

.footer_wrap{
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  --afx-navy:#2A2E61; --afx-navy-hondo:#1C1E40; --afx-linea:#3A3F73;
  --afx-texto:#C3C6D2; --afx-tenue:#9BA0BC; --afx-electrico:#3C78F6;
}

/* ---- marca ---- */
.footer_wrap .afx-pie-marca{ margin-bottom:28px; }
.footer_wrap .afx-pie-marca img{ width:200px; height:auto; display:block; }
.footer_wrap .afx-pie-marca a{ display:inline-block; transition:opacity .25s ease; }
.footer_wrap .afx-pie-marca a:hover{ opacity:.82; }

/* ---- titular ---- */
.footer_wrap .elementor-element-7c1863a .sc_item_title_text{
  font-size:clamp(1.45rem,1.9vw,1.85rem); line-height:1.2; letter-spacing:-.004em;
  display:block; max-width:20ch; text-wrap:balance;
}

/* ---- aire de entrada ---- */
.footer_wrap .elementor-element-50a10be{ height:64px; }

/* ---- rótulos de columna ---- */
/* Los rótulos son texto de interfaz, no títulos: van con la tipografía de
   TEXTO, nunca con la de títulos. Hoy ambas caen en halyard-display, pero el
   día que se active Ethnocentric unas versalitas de 12 px en ella serían
   ilegibles. El peso 600 a 11.7 px empastaba los trazos: 500 y un punto más
   de cuerpo dejan la letra limpia. */
.footer_wrap .afx-pie-rotulo .sc_item_title_text,
.footer_wrap .afx-pie-afiliaciones .sc_item_title_text{
  font-family:acumin-pro-wide,acumin-variable-concept,halyard-display,sans-serif;
  font-size:.78rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:#A9ADBD; line-height:1;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.footer_wrap .afx-pie-rotulo{ margin-bottom:20px; }
.footer_wrap .afx-pie-afiliaciones{ margin-top:36px; margin-bottom:16px; }

/* ---- enlaces del pie: una sola manera de subrayarse ----
   El tema trae su propia línea (clase underline_anim, dibujada con un
   degradado de fondo) y encima estaba el subrayado del navegador: dos líneas
   en el correo. Se apagan las dos y manda el mismo filete que las columnas. */
.footer_wrap .afx-pie-enlaces ul{ list-style:none; margin:0; padding:0; }
.footer_wrap .afx-pie-enlaces li{ margin:0 0 11px; line-height:1.35; }
.footer_wrap .afx-pie-enlaces li:last-child{ margin-bottom:0; }

.footer_wrap .afx-pie-enlaces a,
.footer_wrap .elementor-element-b7a4933 a,
.footer_wrap .elementor-element-395a993 a{
  color:var(--afx-texto); font-size:.94rem; line-height:1.35;
  text-decoration:none !important; background-image:none !important;
  display:inline-block; position:relative; transition:color .2s ease;
}
.footer_wrap .elementor-element-395a993 a{ font-size:1rem; letter-spacing:.01em; }

.footer_wrap .afx-pie-enlaces a::after,
.footer_wrap .elementor-element-b7a4933 a::after,
.footer_wrap .elementor-element-395a993 a::after{
  content:''; position:absolute; left:0; right:100%; bottom:-3px; height:1px;
  background:var(--afx-electrico); transition:right .28s ease;
}
.footer_wrap .afx-pie-enlaces a:hover,
.footer_wrap .elementor-element-b7a4933 a:hover,
.footer_wrap .elementor-element-395a993 a:hover{ color:#fff; }
.footer_wrap .afx-pie-enlaces a:hover::after,
.footer_wrap .elementor-element-b7a4933 a:hover::after,
.footer_wrap .elementor-element-395a993 a:hover::after{ right:0; }
.footer_wrap .afx-pie-enlaces a:focus-visible,
.footer_wrap .elementor-element-b7a4933 a:focus-visible,
.footer_wrap .elementor-element-395a993 a:focus-visible{ outline:2px solid var(--afx-electrico); outline-offset:3px; }

/* ---- sellos: misma altura óptica, no el mismo ancho ---- */
.footer_wrap .elementor-element-54a9124{ width:100% !important; max-width:100% !important; flex:0 0 100% !important; }
.footer_wrap .elementor-element-54a9124 > .e-con-inner{
  display:flex !important; flex-direction:row; flex-wrap:wrap; align-items:center;
  gap:26px; width:100%; max-width:none; grid-template-columns:none;
}
.footer_wrap .elementor-element-54a9124 .e-con,
.footer_wrap .elementor-element-54a9124 .e-con-inner > *{
  width:auto !important; max-width:none; flex:0 0 auto; margin:0; padding:0;
}
.footer_wrap .elementor-element-54a9124 .elementor-widget-image,
.footer_wrap .elementor-element-54a9124 .elementor-widget-container{ width:auto !important; margin:0 !important; }
/* el ajuste "space" del widget escribe un ancho en % que en móvil deja los
   sellos en 8-16 px: manda la altura, el ancho lo pone la proporción */
.footer_wrap .elementor-element-54a9124 img{
  height:34px !important; width:auto !important; max-width:none !important;
  opacity:.9; transition:opacity .25s ease; display:block;
}
.footer_wrap .elementor-element-54a9124 img:hover{ opacity:1; }
/* corrección óptica: las flechas de amacarga salen de la caja del lettering */
.footer_wrap .elementor-element-4940eb7 img{ height:38px !important; }

/* ---- dirección ---- */
.footer_wrap .elementor-element-241c189{ font-size:.94rem; line-height:1.72; color:var(--afx-texto); }
.footer_wrap .elementor-element-b7a4933,
.footer_wrap .elementor-element-395a993{ line-height:1.6; color:var(--afx-texto); }

/* ---- redes: sólo el icono, sin aro ni relleno ---- */
.footer_wrap .elementor-element-9da4d89 .socials_wrap{ display:flex; align-items:center; gap:26px; }
.footer_wrap .elementor-element-9da4d89 .social_item{
  margin:0 !important; width:auto !important; height:auto !important;
}
.footer_wrap .elementor-element-9da4d89 .social_item .social_icon{
  width:24px !important; height:auto !important; line-height:1 !important;
  border:0 !important; background:transparent !important; border-radius:0 !important;
  padding:0 !important; color:var(--afx-texto); font-size:19px !important; text-align:center;
  display:inline-block; transition:color .2s ease;
}
.footer_wrap .elementor-element-9da4d89 .social_item:hover .social_icon{ color:#fff; }

/* ---- el filete sobra: la barra inferior ya cambia de tono ---- */
.footer_wrap .elementor-element-f3a9cdc{ display:none; }
.footer_wrap .elementor-element-f5d93bb{ height:20px; }

/* ---- barra inferior ---- */
.footer_wrap.footer_custom .elementor-element.elementor-element-85e5c8f{
  background-color:var(--afx-navy-hondo) !important;   /* Elementor pinta el fondo con la misma especificidad */
  border-top:1px solid var(--afx-linea);
  padding:24px 0 26px;
}
.footer_wrap .elementor-element-85e5c8f .sc_layouts_menu_nav > li > a{
  font-size:.88rem; color:var(--afx-tenue); transition:color .2s ease;
}
.footer_wrap .elementor-element-85e5c8f .sc_layouts_menu_nav > li > a:hover,
.footer_wrap .elementor-element-85e5c8f .sc_layouts_menu_nav > li.current-menu-item > a{ color:#fff; }
/* "Nuestras Soluciones" abría un desplegable hacia arriba que tapaba el pie,
   y esos seis servicios ya están en la columna Soluciones. Se retira del pie
   el único elemento con submenú —que además no lleva destino: href="#"—.
   En la cabecera el desplegable sigue igual. */
.footer_wrap .sc_layouts_menu_nav > li.menu-item-has-children{ display:none; }
.footer_wrap .sc_layouts_menu_nav .sub-menu{ display:none !important; }

.footer_wrap .elementor-element-1222819{ font-size:.82rem; color:var(--afx-tenue); line-height:1.5; }
.footer_wrap .elementor-element-1222819 a{ color:var(--afx-texto); text-decoration:none; }
.footer_wrap .elementor-element-1222819 a:hover{ color:#fff; }

/* =====================================================================
   Botones flotantes: se suben para que no pisen la barra inferior.
   El globo de WhatsApp trae bottom:0 y 24 px de margen propio; subiéndolo
   56 px su borde inferior queda a 80 px del borde de la ventana, por
   encima de la última línea del pie. La flecha de "subir" se coloca
   encima del globo.
   ===================================================================== */
.qlwapp .qlwapp__container{ bottom:56px !important; }
.trx_addons_scroll_to_top.show{ bottom:136px !important; }

/* ---- tabletas y móvil ---- */
@media (max-width:1024px){
  .footer_wrap .elementor-element-54a9124 > .e-con-inner{ gap:30px; }
  .footer_wrap .elementor-element-54a9124 img{ height:34px !important; }
  .footer_wrap .elementor-element-4940eb7 img{ height:38px !important; }
  .footer_wrap .afx-pie-marca img{ width:176px; }
  .footer_wrap .afx-pie-rotulo{ margin-bottom:16px; }
}
@media (max-width:767px){
  .footer_wrap .elementor-element-7c1863a .sc_item_title_text{ max-width:none; }
  /* En móvil el globo ocupa casi todo el ancho y la barra inferior se apila
     en dos líneas: subirlo no basta, taparía el menú. Ahí sí conviene que la
     barra termine con aire, que en una columna larga no se lee como hueco. */
  .qlwapp .qlwapp__container{ bottom:20px !important; }
  .trx_addons_scroll_to_top.show{ bottom:100px !important; }
  .footer_wrap.footer_custom .elementor-element.elementor-element-85e5c8f{ padding:24px 0 84px; }
}

/* =====================================================================
   Ajustes fuera del pie
   ===================================================================== */

/* Las pestañas de portada piden peso 600, pero halyard-display no tiene 600:
   el navegador sube al 700 y a 16 px sobre gris claro la letra se ve pesada y
   tosca. 500 sí existe en la fuente y se dibuja limpio. */
.e-n-tabs .e-n-tab-title-text{ font-weight:500; }

/* El imagotipo lleva bajada y eso obliga a elegir. Medido sobre el sitio:
     52 px -> letras AFX de 37.4 px · bajada 7.3 px
     46 px -> letras AFX de 33.1 px · bajada 6.4 px
     42 px -> letras AFX de 30.2 px · bajada 5.9 px
   Las marcas globales del sector llevan el logotipo de cabecera con letras de
   28 a 32 px (DHL, Maersk, Kuehne+Nagel, DSV). A 46 px las letras quedan en 33:
   dentro de la banda, por su borde alto, y la bajada se mantiene como textura.
   A 52 px las letras se salían de esa banda: por eso se veía enorme. */
.top_panel .sc_layouts_logo img,
.sc_layouts_row .sc_layouts_logo img{ max-height:46px !important; }

/* Al hacer scroll la barra se compacta: el logotipo la acompaña. */
.sc_layouts_row_fixed_on .sc_layouts_logo img,
.sc_layouts_row_fixed .sc_layouts_logo img{ max-height:38px !important; }

@media (max-width:1024px){
  .top_panel .sc_layouts_logo img,
  .sc_layouts_row .sc_layouts_logo img{ max-height:38px !important; }
}

/* =====================================================================
   Cabecera fija: entrada y salida animadas
   El tema cambia la fila a position:fixed de golpe, y al volver arriba la
   suelta igual de golpe: dos cortes. El propio tema prevé una ventana de
   400 ms para la salida (añade .sc_layouts_row_fixed_animation_off antes de
   soltar la fila), así que aquí se dibujan las dos mitades del movimiento.
   ===================================================================== */
@keyframes afx-sticky-entra{
  from{ transform:translateY(-100%); opacity:0; }
  to{   transform:translateY(0);     opacity:1; }
}
@keyframes afx-sticky-sale{
  from{ transform:translateY(0);     opacity:1; }
  to{   transform:translateY(-100%); opacity:0; }
}

/* Se reutilizan los fotogramas del propio tema, pero aplicados SIN exigir la
   clase de retardo: así la barra se fija en cuanto toca y aun así entra y sale
   animada. La especificidad iguala la del tema (clase repetida). */
body:not(.hide_fixed_rows) .sc_layouts_row_fixed_on.sc_layouts_row_fixed_on:not(.sc_layouts_row_fixed_animation_off){
  animation:trx-addons-layouts-fix-row2 var(--trx-addons-fixed-rows-duration, .4s) cubic-bezier(.22,.61,.36,1) 0s 1 forwards;
  will-change:margin-top;
}
.sc_layouts_row_fixed_on.sc_layouts_row_fixed_animation_off.sc_layouts_row_fixed_animation_off{
  animation:trx-addons-layouts-unfix-row2 var(--trx-addons-fixed-rows-duration, .4s) cubic-bezier(.55,.06,.68,.19) 0s 1 forwards;
}
/* Para filas fijas que no usen los fotogramas del tema (sin _with_fullscreen). */
body:not(.hide_fixed_rows) .sc_layouts_row_fixed_on:not(.sc_layouts_row_fixed_with_fullscreen):not(.sc_layouts_row_fixed_animation_off){
  animation:afx-sticky-entra .34s cubic-bezier(.22,.61,.36,1) both;
}
.sc_layouts_row_fixed_on:not(.sc_layouts_row_fixed_with_fullscreen).sc_layouts_row_fixed_animation_off{
  animation:afx-sticky-sale .3s cubic-bezier(.55,.06,.68,.19) both;
}

/* El logotipo cambia de 46 a 38 px al fijarse: que el cambio se vea como un
   ajuste, no como un salto. */
.sc_layouts_logo img{ transition:max-height .28s cubic-bezier(.22,.61,.36,1); }

/* Quien pide menos movimiento, no lo recibe. */
@media (prefers-reduced-motion: reduce){
  .sc_layouts_row_fixed_on,
  .sc_layouts_row_fixed_on.sc_layouts_row_fixed_animation_off{ animation:none; }
  .sc_layouts_logo img{ transition:none; }
}

/* La barra fija se despega del contenido con una sombra discreta; el tema no
   la pone y sin ella el texto pasa por debajo sin separación visible. */
.sc_layouts_row_fixed_on.sc_layouts_row_fixed_on{
  box-shadow:0 1px 0 rgba(42,46,97,.06), 0 10px 28px rgba(42,46,97,.09) !important;
}
body.hide_fixed_rows .sc_layouts_row_fixed_on.sc_layouts_row_fixed_on{ box-shadow:none !important; }

/* El panel del menú móvil y la barra fija comparten z-index (100002): con el
   mismo valor gana quien va después en el documento, así que la barra podía
   quedar por encima del menú abierto. El menú manda. */
.menu_mobile,
.menu_mobile_overlay{ z-index:100010 !important; }