.elementor-26 .elementor-element.elementor-element-b0d320f{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}/* Start custom CSS for html, class: .elementor-element-44b5eb6 *//* ============================================================
   TRANSSUMAPAZ S.A.S. — FOOTER
   Colores tomados del logo:
     #91BF1F  verde lima ("TSSP" y eslogan)
     #6F9D21  verde oscuro (degradado de la hoja)
     #2C2E7B  azul marino ("Transsumapaz" y la carretera)
   ============================================================ */

.tssp-footer{
  --navy:       #2C2E7B;
  --navy-deep:  #1E2058;
  --navy-legal: #191B4A;
  --navy-black: #12143A;
  --lime:       #91BF1F;
  --on-navy:    #AEB3D6;
  --on-navy-hi: #D7DAEE;
  --on-navy-lo: #8C91C4;
  --border-soft:#4A4D8C;

  --shell:      1200px;
  --flogo-h:    160px;         /* altura del logo — ajusta solo aquí */
  --ease:       cubic-bezier(.4,0,.2,1);

  font-family: "Inter", system-ui, sans-serif;
}

.tssp-footer *,
.tssp-footer *::before,
.tssp-footer *::after{ box-sizing: border-box; }

.tssp-fshell{
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: 24px;
}

/* ------------------------------------------------------------
   CUERPO
   ------------------------------------------------------------ */
.tssp-fmain{ background: var(--navy-deep); }

.tssp-fgrid{
  display: grid;
  grid-template-columns: 1.5fr 1fr .85fr 1.25fr;
  gap: 36px;
  padding-block: 52px 40px;
}

.tssp-fcol{ min-width: 0; }

/* Placa blanca detrás del logo.
   El archivo del cliente termina en .jpg, que no soporta
   transparencia. Esta placa hace que se vea limpio sobre el
   azul en cualquier caso. Si consigues el logo en PNG/SVG
   transparente o en versión blanca, borra background,
   padding y border-radius de .tssp-flogo. */
.tssp-flogo{
  display: inline-block;
  background: #fff;
  padding: 10px 14px;
  border-radius: 6px;
  line-height: 0;
  margin-bottom: 16px;
}

.tssp-flogo img{
  display: block;
  height: var(--flogo-h);
  width: auto;
}

.tssp-fabout{
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--on-navy);
  max-width: 40ch;
}

.tssp-fsocial{
  display: flex;
  gap: 7px;
  margin: 0; padding: 0;
  list-style: none;
}

.tssp-fsocial a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  color: var(--on-navy);
  transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}

.tssp-fsocial svg{ width: 16px; height: 16px; fill: currentColor; }

.tssp-fsocial a:hover,
.tssp-fsocial a:focus-visible{
  background: var(--lime);
  border-color: var(--lime);
  color: var(--navy-deep);
}

/* --- Títulos de columna --- */
.tssp-ftitle{
  position: relative;
  margin: 0 0 18px;
  padding-bottom: 12px;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.2;
  color: #fff;
}

.tssp-ftitle::after{
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 28px; height: 2px;
  background: var(--lime);
}

/* --- Listas de enlaces --- */
.tssp-flinks{
  margin: 0; padding: 0;
  list-style: none;
}

.tssp-flinks li + li{ margin-top: 11px; }

.tssp-flinks a{
  display: inline-block;
  font-size: 13px;
  line-height: 1.5;
  color: var(--on-navy);
  text-decoration: none;
  transition: color .18s var(--ease), transform .18s var(--ease);
}

.tssp-flinks a:hover,
.tssp-flinks a:focus-visible{
  color: var(--lime);
  transform: translateX(4px);
}

/* --- Contacto --- */
.tssp-fcontact{
  margin: 0; padding: 0;
  list-style: none;
}

.tssp-fcontact li{
  display: flex;
  gap: 9px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--on-navy);
}

.tssp-fcontact li + li{ margin-top: 13px; }

.tssp-fcontact svg{
  width: 14px; height: 14px;
  flex: none;
  margin-top: 3px;
  fill: var(--lime);
}

.tssp-fcontact span{ min-width: 0; word-break: break-word; }

.tssp-fcontact a{
  color: var(--on-navy);
  text-decoration: none;
  transition: color .18s var(--ease);
}

.tssp-fcontact a:hover,
.tssp-fcontact a:focus-visible{ color: #fff; }

/* ------------------------------------------------------------
   FRANJA DE DATOS LEGALES
   ------------------------------------------------------------ */
.tssp-flegal{
  background: var(--navy-legal);
  border-top: 1px solid var(--navy);
}

.tssp-flegal__in{
  display: flex;
  flex-wrap: wrap;
  gap: 9px 28px;
  padding-block: 14px;
}

.tssp-flegal p{
  margin: 0;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--on-navy-hi);
}

.tssp-flegal span{
  color: var(--on-navy-lo);
  margin-right: 4px;
}

/* ------------------------------------------------------------
   BARRA INFERIOR
   ------------------------------------------------------------ */
.tssp-fbottom{ background: var(--navy-black); }

.tssp-fbottom__in{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding-block: 14px;
}

.tssp-fbottom p{
  margin: 0;
  font-size: 11.5px;
  color: #7C81B8;
}

.tssp-fpolicies{
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0; padding: 0;
  list-style: none;
}

.tssp-fpolicies a{
  font-size: 11.5px;
  color: #7C81B8;
  text-decoration: none;
  transition: color .18s var(--ease);
}

.tssp-fpolicies a:hover,
.tssp-fpolicies a:focus-visible{ color: var(--lime); }

/* Foco visible con teclado */
.tssp-footer a:focus-visible{
  outline: 2px solid var(--lime);
  outline-offset: 3px;
}

/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 1024px){
  .tssp-fgrid{
    grid-template-columns: 1fr 1fr;
    gap: 32px 28px;
    padding-block: 44px 34px;
  }
  .tssp-fcol--brand{ grid-column: 1 / -1; }
  .tssp-fabout{ max-width: 60ch; }
}

@media (max-width: 640px){
  .tssp-fshell{ padding-inline: 18px; }

  .tssp-fgrid{
    grid-template-columns: 1fr;
    gap: 30px;
    padding-block: 38px 30px;
  }

  .tssp-footer{ --flogo-h: 44px; }

  .tssp-ftitle{
    margin-bottom: 15px;
    padding-bottom: 10px;
    font-size: 18px;
  }

  .tssp-flegal__in{ gap: 7px; }
  .tssp-flegal p{ width: 100%; }

  .tssp-fbottom__in{
    justify-content: flex-start;
    gap: 10px;
  }
}

@media (prefers-reduced-motion: reduce){
  .tssp-footer *{ transition-duration: .01ms !important; }
}/* End custom CSS */