/* Footer de landing (footer-2026/landing.php): franja oscura con marca a la izquierda y
   sellos de seguridad + legal a la derecha. Copia del módulo "Footer 2026" de HubSpot;
   un cambio aquí va también allá.
   Todo va en em y el footer escala con el ancho (1.1k-1.7k px); debajo de 1080px se apila. */
.runa-f26l {
  background: #352c60;
  color: #fff;
  font-family: "Proxima Nova", sans-serif;
  font-size: clamp(10px, 0.95vw, 16px);
  padding: 2em 2em;
}

/* El kit de Elementor pinta los enlaces de lila; el footer los quiere blancos. */
.runa-f26l .runa-f26l__container a {
  color: #fff;
  text-decoration: none;
}

.runa-f26l a:hover {
  opacity: 0.75;
}

.runa-f26l ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Dos clases: el kit de Elementor (.elementor-kit-N p, 0,1,1) da margen y color a los p. */
.runa-f26l .runa-f26l__tagline,
.runa-f26l .runa-f26l__desc {
  margin: 0;
  color: #fff;
}

.runa-f26l__container {
  width: min(100%, 97.5em);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* Logo, texto y sellos quedan como hermanos: space-between reparte el espacio, con 20px mínimo. */
.runa-f26l__brand {
  display: contents;
}

/* El logo es lila sobre blanco: con el filtro queda una tarjeta blanca y las letras toman el fondo. */
.runa-f26l__logo img {
  display: block;
  width: 8.4375em;
  height: auto;
  filter: brightness(0) invert(1);
}

.runa-f26l .runa-f26l__tagline {
  font-size: 2.125em;
  font-weight: 700;
  line-height: 1.35;
}

.runa-f26l .runa-f26l__desc {
  margin-top: 0.25em;
  font-size: 1em;
  line-height: 1.6;
}

.runa-f26l__side {
  display: flex;
  flex-direction: column;
  gap: 1.75em;
}

.runa-f26l__badges {
  display: flex;
  flex-wrap: nowrap;
}

.runa-f26l__badges li {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0 0.625em;
  border-left: 1px solid rgba(255, 255, 255, 0.35);
}

.runa-f26l__badges li:first-child {
  border-left: 0;
  padding-left: 0;
}

.runa-f26l__badge-icon {
  display: block;
  width: 1.5em;
  height: 1.5em;
  object-fit: contain;
  flex-shrink: 0;
}

.runa-f26l__badge-text {
  display: flex;
  flex-direction: column;
  font-size: 0.8em;
  line-height: 1.35;
  white-space: nowrap;
}

.runa-f26l__badge-text strong {
  letter-spacing: 0.02em;
}

.runa-f26l__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em 1.5em;
  font-size: 0.875em;
  white-space: nowrap;
}

.runa-f26l__legal ul {
  display: flex;
  flex-wrap: wrap;
}

.runa-f26l__legal li + li::before {
  content: "·";
  margin: 0 0.9em;
  opacity: 0.7;
}

/* Tablet: marca arriba, sellos y legal debajo, a tamaño normal. Los sellos van en cuadrícula de 4. */
@media (max-width: 1079px) {
  .runa-f26l {
    font-size: 16px;
    padding: 32px;
  }

  .runa-f26l__container {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }

  .runa-f26l__brand {
    display: flex;
    align-items: center;
    gap: 40px;
  }

  .runa-f26l__side {
    width: 100%;
  }

  .runa-f26l__badges {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px 12px;
  }

  .runa-f26l__badges li,
  .runa-f26l__badges li:first-child {
    padding: 0;
    border-left: 0;
  }

  .runa-f26l__legal {
    white-space: normal;
  }
}

@media (max-width: 767px) {
  .runa-f26l {
    padding: 32px 20px;
  }

  .runa-f26l__brand {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  /* Mismo tamaño que el logo del header móvil (92px). */
  .runa-f26l__logo img {
    width: 92px;
  }

  .runa-f26l .runa-f26l__tagline {
    font-size: 28px;
  }

  .runa-f26l__desc br {
    display: none;
  }

  .runa-f26l__badges {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .runa-f26l__legal {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  /* Al envolver, el «·» quedaría al inicio de línea: basta con el hueco. */
  .runa-f26l__legal ul {
    justify-content: center;
    gap: 8px 16px;
  }

  .runa-f26l__legal li + li::before {
    content: none;
  }
}