/*
Theme Name: Hub Child
Theme URI: http://hub.liquid-themes.com/
Author: Liquid Themes
Author URI: https://themeforest.net/user/liquidthemes
Template: hub
Description: Smart, Powerful and Unlimited Customizable WordPress Theme.
Version: 1.0
License: GNU General Public License
License URI: license.txt
Text Domain: hub-child
Tags: responsive, retina, rtl-language-support, blog, portfolio, custom-colors, live-editor
*/

/* ============================================================
   OMEGA SUR — child theme styles
   Fuente única: Cairo (self-hosted) — Regular 400 / SemiBold 600 / Bold 700
   ============================================================ */

/* Maxi cmabios globales */

.nopading-margin{
	margin: 0px; 
	padding: 0px;
}

/* ---- Fuentes self-hosted ---- */
@font-face {
  font-family: 'Cairo';
  src: url('fonts/cairo-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cairo';
  src: url('fonts/cairo-semibold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cairo';
  src: url('fonts/cairo-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---- Design tokens ---- */
:root {
  /* Colores principales */
  --color-texto:       #231F20;
  --color-blanco:      #FFFFFF;
  --color-gris:        #707070;
  --color-amarillo:    #F8C523;
  --color-azul-medio:  #3D7CC9;
  --color-rosa:        #F26178;
  --color-azul-oscuro: #003595;
  --color-rojo:        #EC1C24;
  --color-negro:       #000000;
  --color-cafe-oscuro: #211915;
  --color-fondo-claro: #F1F4F4;

  /* Tipografía */
  --fuente-principal: 'Cairo', sans-serif;

  /* Escala tipográfica (del XD) */
  --texto-xs:  14px;
  --texto-sm:  18px;
  --texto-md:  20px;
  --texto-lg:  21px;
  --texto-xl:  23px;
  --texto-2xl: 40px;
  --texto-3xl: 50px;

  /* Espaciado base */
  --espacio-base: 8px;

  /* Breakpoints */
  --bp-mobile: 768px;
  --bp-tablet: 1024px;
}

/* ---- Reset / base ---- */
*, *::before, *::after {
  box-sizing: border-box;
}

/* ============================
   ESPACIO LIBRE — #seccion-espacio-libre
   2 columnas: imagen (íconos integrados) | texto + pasos + botón WA
   ============================ */

#seccion-espacio-libre {
  padding: 80px 0;
  background: var(--color-fondo-claro);
}

.espacio-row {
  display: flex;
  align-items: center;
  gap: 60px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

.espacio-col-imagen {
  flex: 0 0 48%;
}

.espacio-col-texto {
  flex: 1;
}

.espacio-imagen-foto img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

.espacio-titulo {
  font-family: var(--fuente-principal);
  font-weight: 400;
  font-size: var(--texto-3xl);
  line-height: 1.1;
  color: var(--color-azul-oscuro);
  margin: 0 0 24px;
}

.espacio-titulo strong {
  font-weight: 700;
}

.espacio-descripcion {
  font-family: var(--fuente-principal);
  font-weight: 400;
  font-size: var(--texto-lg);
  line-height: 1.35;
  color: var(--color-azul-oscuro);
  margin: 0 0 32px;
}

.espacio-descripcion strong {
  font-weight: 700;
}

.espacio-como-titulo {
  font-family: var(--fuente-principal);
  font-weight: 400;
  font-size: var(--texto-2xl);
  color: var(--color-azul-oscuro);
  margin: 0 0 24px;
}

.espacio-pasos {
  list-style: none;
  padding: 0;
  margin: 0 0 40px;
}

.espacio-pasos {
  list-style: none;
  padding: 0;
  margin: 0 0 40px;
}

.espacio-paso {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  font-family: var(--fuente-principal);
  font-weight: 400;
  font-size: var(--texto-sm);
  line-height: 1.4;
  color: var(--color-azul-oscuro);
  margin-bottom: 0;
}

.espacio-paso-indicador {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  flex-shrink: 0;
}

.espacio-paso-num {
  width: 36px;
  height: 36px;
  border: 2px solid var(--color-azul-medio);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--texto-sm);
  color: var(--color-azul-medio);
  line-height: 1;
  background: #fff;
  flex-shrink: 0;
}

.espacio-paso-conector {
  width: 2px;
  flex: 1;
  min-height: 16px;
  margin: 4px 0;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--color-azul-medio) 0, var(--color-azul-medio) 5px,
    transparent 5px, transparent 10px
  );
}

.espacio-paso-texto {
  padding-top: 6px;
  padding-bottom: 20px;
}

.espacio-boton {
  display: inline-block;
  background: var(--color-rosa);
  color: var(--color-blanco);
  font-family: var(--fuente-principal);
  font-weight: 700;
  font-size: var(--texto-md);
  padding: 14px 32px;
  border-radius: 40px;
  text-decoration: none;
  transition: opacity 0.2s;
}

.espacio-boton:hover {
  opacity: 0.88;
  color: var(--color-blanco);
}

@media (max-width: 768px) {
  #espacio-libre {
    padding: 48px 0;
  }

  .espacio-titulo {
    font-size: 32px;
  }

  .espacio-como-titulo {
    font-size: 26px;
  }
}

/* fin ESPACIO LIBRE */


/* ============================
   SOLUCIONES — #seccion-soluciones
   2 tarjetas (HOGAR / INDUSTRIA) sobre fondo fotográfico
   ============================ */

.soluciones-wrapper {
  position: relative;
  width: 100%;
  padding: 80px 20px;
  background-image: url('/wp-content/uploads/2026/06/imagen-soluciones-fondo.jpg');
  background-size: cover;
  background-position: center top;
}

/* overlay sutil para que las tarjetas blancas resalten sobre la foto */
.soluciones-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 0;
}

.soluciones-inner {
  position: relative;
  z-index: 1;
  max-width: 1040px;
  margin: 0 auto;
}

.soluciones-cards {
  display: flex;
  gap: 32px;
  align-items: stretch;
}

.soluciones-card {
  flex: 1;
  background: #fff;
  border-radius: 16px;
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
}

.soluciones-card-icono {
  margin-bottom: 16px;
}

.soluciones-card-categoria {
  display: block;
  font-family: var(--fuente-principal);
  font-weight: 700;
  font-size: var(--texto-xs);
  color: var(--color-rosa);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.soluciones-card-titulo {
  font-family: var(--fuente-principal);
  font-weight: 400;
  font-size: var(--texto-2xl);
  line-height: 1.1;
  color: var(--color-azul-oscuro);
  margin: 0 0 20px;
}

.soluciones-card-titulo strong {
  font-weight: 700;
}

.soluciones-card-desc {
  font-family: var(--fuente-principal);
  font-weight: 400;
  font-size: var(--texto-xs);
  line-height: 1.6;
  color: var(--color-texto);
  margin: 0 0 24px;
}

.soluciones-card-lista {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}

.soluciones-card-item {
  font-family: var(--fuente-principal);
  font-weight: 700;
  font-size: var(--texto-sm);
  color: var(--color-azul-oscuro);
  padding: 10px 0;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #f0f0f0;
}

.soluciones-card-item:last-child {
  border-bottom: none;
}

.soluciones-card-item::before {
  content: '→';
  color: var(--color-rosa);
  flex-shrink: 0;
}

.soluciones-card-servicios-label {
  font-family: var(--fuente-principal);
  font-weight: 700;
  font-size: var(--texto-xs);
  color: var(--color-azul-oscuro);
  margin: 0 0 4px;
}

.soluciones-card-servicios {
  font-family: var(--fuente-principal);
  font-weight: 400;
  font-size: var(--texto-xs);
  color: var(--color-texto);
  margin: 0 0 32px;
  flex: 1;
}

.soluciones-boton {
  display: inline-block;
  background: var(--color-rosa);
  color: var(--color-blanco);
  font-family: var(--fuente-principal);
  font-weight: 600;
  font-size: var(--texto-sm);
  padding: 14px 32px;
  border-radius: 50px;
  text-decoration: none;
  text-align: center;
  transition: opacity 0.2s;
  align-self: flex-start;
}

.soluciones-boton:hover {
  opacity: 0.85;
  color: var(--color-blanco);
  text-decoration: none;
}

/* Mobile */
@media (max-width: 768px) {
  .soluciones-wrapper {
    padding: 60px 16px;
  }

  .soluciones-cards {
    flex-direction: column;
  }

  .soluciones-card-titulo {
    font-size: 28px;
  }

  .soluciones-boton {
    align-self: stretch;
    text-align: center;
  }
}

/* fin SOLUCIONES */

/* fondo azul temporal hasta tener la foto de fondo */
.soluciones-wrapper {
  background-image: none;
  background-color: var(--color-azul-oscuro);
}

/* flecha dentro del botón */
.soluciones-boton-flecha {
  display: inline-block;
  vertical-align: middle;
  width: 18px;
  height: 18px;
  margin-left: 8px;
}

/* fondo real de la sección Soluciones */
.soluciones-wrapper {
  background-image: url('/wp-content/uploads/2026/06/fondo-soluciones.jpg');
  background-color: transparent;
}

/* flecha azul como marcador de ítems de lista */
.soluciones-card-item::before {
  content: '';
  background-image: url('/wp-content/uploads/2026/06/flecha-azul.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 16px;
  height: 16px;
  display: inline-block;
  flex-shrink: 0;
}

/* correcciones tipográficas pixel-perfect vs XD */
.soluciones-card-categoria {
  font-size: 18px;
  font-weight: 600; /* SemiBold según XD */
}

.soluciones-card-titulo {
  line-height: 1.0; /* XD: 40px/40px */
}

.soluciones-card-desc {
  font-size: 18px;
  line-height: 22px;
  color: var(--color-azul-oscuro); /* XD: #003595 */
}

.soluciones-card-item {
  font-size: 20px; /* XD: 20px, no 18px */
}

.soluciones-card-servicios-label {
  font-size: 18px;
  font-weight: 400; /* XD: Regular */
  text-transform: none;
  letter-spacing: normal;
  color: var(--color-azul-oscuro);
}

.soluciones-card-servicios {
  font-size: 18px;
  color: var(--color-azul-oscuro);
}

/* correcciones visuales vs XD — flechas, label servicios, botón ancho */

/* flecha de lista: volver a → rosa (el SVG azul era incorrecto) */
.soluciones-card-item::before {
  content: '→';
  background-image: none;
  color: var(--color-rosa);
  width: auto;
  height: auto;
  display: inline;
  flex-shrink: 0;
}

/* label servicios: bold + mayúsculas según XD */
.soluciones-card-servicios-label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* botón: ocupa todo el ancho de la tarjeta */
.soluciones-boton {
  align-self: stretch;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* flecha de lista: azul, igual que el texto del ítem */
.soluciones-card-item::before {
  content: '→';
  background-image: none;
  color: var(--color-azul-oscuro);
  width: auto;
  height: auto;
  display: inline;
  flex-shrink: 0;
}

/* ============================
   BTN-PRIMARY — botón global del sitio
   ============================ */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--color-rosa);
  color: var(--color-blanco);
  font-family: var(--fuente-principal);
  font-weight: 600;
  font-size: 20px;
  padding: 14px 32px;
  border-radius: 50px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s;
}

.btn-primary:hover,
.btn-primary:focus {
  opacity: 0.85;
  color: var(--color-blanco);
  text-decoration: none;
}

.btn-primary img {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* en Soluciones el botón ocupa todo el ancho de la tarjeta */
.soluciones-boton {
  align-self: stretch;
}

/* botón: Cairo Bold según XD (no SemiBold) */
.btn-primary {
  font-weight: 700;
}

/* flechas de lista: SVG azul (imagen de WP) */
.soluciones-card-item::before {
  content: '';
  background-image: url('/wp-content/uploads/2026/06/flecha-azul.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  color: transparent;
  width: 16px;
  height: 16px;
  display: inline-block;
  flex-shrink: 0;
}

/* ítems de lista: SemiBold según XD (no Bold) */
.soluciones-card-item {
  font-weight: 600;
}

/* .espacio-boton heredaba estilos propios — ahora usa btn-primary como base */
.espacio-boton {
  background: var(--color-rosa);
  color: var(--color-blanco);
  font-family: var(--fuente-principal);
  font-weight: 700;
  font-size: 20px;
  padding: 14px 32px;
  border-radius: 50px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.espacio-boton:hover {
  opacity: 0.85;
  color: var(--color-blanco);
  text-decoration: none;
}

/* ============================================================
   SISTEMA TIPOGRÁFICO GLOBAL — Omega Sur
   Clases reutilizables en todos los bloques del sitio.
   Las clases de sección solo agregan overrides de layout.
   ============================================================ */

/* Etiqueta de sección: "SERVICIOS", "HOGAR", "INDUSTRIA", etc. */
.etiqueta-seccion {
  display: block;
  font-family: var(--fuente-principal);
  font-weight: 600;
  font-size: var(--texto-sm); /* 18px */
  color: var(--color-rosa);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* Título grande de sección — 50px (ej: "Tu espacio libre de plagas") */
.titulo-seccion {
  font-family: var(--fuente-principal);
  font-weight: 400;
  font-size: var(--texto-3xl); /* 50px */
  line-height: 1.1;
  color: var(--color-azul-oscuro);
  margin: 0 0 24px;
}
.titulo-seccion strong {
  font-weight: 700;
}

/* Título de bloque — 40px (ej: "¿Cómo empezamos?", "Soluciones para hogares") */
.titulo-bloque {
  font-family: var(--fuente-principal);
  font-weight: 400;
  font-size: var(--texto-2xl); /* 40px */
  line-height: 1.0;
  color: var(--color-azul-oscuro);
  margin: 0 0 20px;
}
.titulo-bloque strong {
  font-weight: 700;
}

/* Párrafo lead — 21px (primer párrafo descriptivo de sección) */
.lead-texto {
  font-family: var(--fuente-principal);
  font-weight: 400;
  font-size: var(--texto-lg); /* 21px */
  line-height: 1.4;
  color: var(--color-azul-oscuro);
  margin: 0 0 24px;
}
.lead-texto strong {
  font-weight: 700;
}

/* Descripción / body — 18px (textos de cards, párrafos secundarios) */
.descripcion-texto {
  font-family: var(--fuente-principal);
  font-weight: 400;
  font-size: var(--texto-sm); /* 18px */
  line-height: 1.5;
  color: var(--color-azul-oscuro);
  margin: 0 0 16px;
}

/* ============================================================
   MOBILE — Espacio libre + clases globales de tipografía
   Breakpoint: 768px
   Interpretado de desktop — no hay artboard mobile en el XD
   ============================================================ */

@media (max-width: 768px) {

  /* Sección: padding reducido */
  #seccion-espacio-libre {
    padding: 48px 0;
  }

  /* Row: de 2 columnas a apilado vertical */
  .espacio-row {
    flex-direction: column;
    gap: 32px;
    padding: 0 20px;
  }

  /* Imagen: ancho completo */
  .espacio-col-imagen {
    flex: 0 0 auto;
    width: 100%;
  }

  /* Texto: ancho completo */
  .espacio-col-texto {
    width: 100%;
  }

  /* Botón: ancho completo en mobile */
  .espacio-boton {
    align-self: stretch;
    text-align: center;
    justify-content: center;
  }

  /* Tipografía global — mobile */
  .titulo-seccion {
    font-size: 32px;
  }

  .titulo-bloque {
    font-size: 26px;
  }

  .lead-texto {
    font-size: var(--texto-sm); /* 18px en mobile */
  }

}

/* btn-primary mobile: fuente más chica para que el texto no corte */
@media (max-width: 768px) {
  .btn-primary {
    font-size: 16px;
    padding: 13px 24px;
    gap: 8px;
  }
  .btn-primary img {
    width: 15px;
    height: 15px;
  }
}

/* ============================
   SERVICIOS — #seccion-servicios
   Cabecera 2 cols + grid 3×2 de cards + botón centrado
   ============================ */

#seccion-servicios {
  background: var(--color-fondo-claro);
  padding: 80px 0;
}

.servicios-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

/* Cabecera: título izq, lead der */
.servicios-header {
  display: flex;
  align-items: flex-start;
  gap: 60px;
  margin-bottom: 56px;
}

.servicios-header-izq {
  flex: 0 0 38%;
}

.servicios-header-der {
  flex: 1;
  padding-top: 10px;
}

/* El título no necesita margin-bottom propio acá */
.servicios-titulo {
  margin-bottom: 0;
}

/* Grid 3 columnas */
.servicios-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 48px;
}

/* Card */
.servicios-card {
  background: #fff;
  border-radius: 16px;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0px 3px 17px #A3BBC3;
}

.servicios-card-icono {
  width: 56px;
  height: 56px;
  margin-bottom: 16px;
}

.servicios-card-titulo {
  font-family: var(--fuente-principal);
  font-weight: 600;
  font-size: var(--texto-sm);
  color: var(--color-azul-oscuro);
  margin: 0 0 12px;
}

.servicios-card-desc {
  margin: 0;
  text-align: center;
}

/* Botón centrado */
.servicios-boton-wrap {
  display: flex;
  justify-content: center;
}

/* ---- Mobile ---- */
@media (max-width: 768px) {

  #seccion-servicios {
    padding: 48px 0;
  }

  .servicios-inner {
    padding: 0 20px;
  }

  /* Cabecera apilada */
  .servicios-header {
    flex-direction: column;
    gap: 20px;
    margin-bottom: 36px;
  }

  .servicios-header-izq {
    flex: 0 0 auto;
    width: 100%;
  }

  .servicios-header-der {
    padding-top: 0;
  }

  /* Grid: 2 columnas en mobile */
  .servicios-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 32px;
  }

  .servicios-card {
    padding: 24px 16px;
  }

  .servicios-card-icono {
    width: 44px;
    height: 44px;
  }

  /* Botón ancho completo en mobile */
  .servicios-boton-wrap .btn-primary {
    width: 100%;
    justify-content: center;
  }

}

/* fin SERVICIOS */

/* Servicios — correcciones pesos y espaciado vs XD */

/* Card títulos: Bold según XD (no SemiBold) */
.servicios-card-titulo {
  font-weight: 700;
}

/* Más espacio superior en la sección y entre header y grid */
#seccion-servicios {
  padding: 100px 0;
}

.servicios-header {
  margin-bottom: 80px;
}

/* Mobile: ajustar padding reducido */
@media (max-width: 768px) {
  #seccion-servicios {
    padding: 56px 0;
  }
  .servicios-header {
    margin-bottom: 40px;
  }
}

/* Servicios — dimensiones exactas del XD: card 261×228px */

/* Container más angosto para que las cards salgan 261px de ancho */
.servicios-inner {
  max-width: 923px;
}

/* Gap entre cards: 30px (XD: 3×261 + 2×30 + 80 padding = 923px) */
.servicios-grid {
  gap: 30px;
}

/* Altura mínima según XD */
.servicios-card {
  min-height: 228px;
}

/* ============================
   POR QUÉ ELEGIR — inicio
   ============================ */

#seccion-porque {
  background: url('/wp-content/uploads/2026/06/fondo-azul-quienes-somos.png') center center / cover no-repeat;
  padding: 100px 0;
}

.porque-inner {
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 40px;
}

/* cabecera centrada */
.porque-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 64px;
}

/* texto en blanco sobre fondo oscuro */
#seccion-porque .etiqueta-seccion { color: var(--color-blanco); }
.porque-titulo { color: var(--color-blanco); }
.porque-lead   { color: var(--color-blanco); text-align: center; margin-bottom: 0; }

/* grid 2×2 */
.porque-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 48px;
}

/* cards */
.porque-card {
  background: var(--color-blanco);
  border-radius: 16px;
  padding: 28px;
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.porque-card-icono {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
}

.porque-card-texto {
  display: flex;
  flex-direction: column;
}

.porque-card-titulo {
  font-family: var(--fuente-principal);
  font-weight: 700;
  font-size: var(--texto-sm);
  color: var(--color-azul-oscuro);
  margin: 0 0 8px;
}

.porque-card-desc { margin: 0; }

/* botón */
.porque-boton-wrap { display: flex; justify-content: center; }

/* mobile */
@media (max-width: 768px) {
  #seccion-porque { padding: 56px 0; }
  .porque-inner { padding: 0 20px; }
  .porque-header { margin-bottom: 36px; }
  .porque-grid { grid-template-columns: 1fr; gap: 16px; }
  .porque-card { padding: 20px; gap: 16px; }
  .porque-card-icono { width: 48px; height: 48px; }
  .porque-boton-wrap .btn-primary { width: 100%; justify-content: center; }
}

/* fin POR QUÉ ELEGIR */

/* Por qué elegir — corrección fondo */
#seccion-porque {
  background-color: #A3BBC3;
  background-image: url('/wp-content/uploads/2026/06/fondo-azul-quienes-somos.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Por qué elegir — corrección fondo y colores de texto */

/* fondo sólido, sin imagen */
#seccion-porque {
  background: #A3BBC3;
}

/* textos sobre fondo claro → azul oscuro */
#seccion-porque .etiqueta-seccion { color: var(--color-rosa); } /* restaura el rosa global */
.porque-titulo { color: var(--color-azul-oscuro); }
.porque-lead   { color: var(--color-azul-oscuro); text-align: center; margin-bottom: 0; }

/* Por qué elegir — fondo definitivo: color base + img posicionada */

/* fondo base = #A3BBC3 con opacidad sobre blanco → #f1f4f4 */
#seccion-porque {
  background: #f1f4f4;
  position: relative;
  overflow: hidden;
}

/* imagen decorativa: absoluta, cubre la sección, debajo del contenido */
.porque-fondo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* contenido sobre la imagen */
.porque-inner {
  position: relative;
  z-index: 1;
}

/* texto blanco — la imagen crea el fondo oscuro */
#seccion-porque .etiqueta-seccion { color: var(--color-blanco); }
.porque-titulo { color: var(--color-blanco); }
.porque-lead   { color: var(--color-blanco); text-align: center; margin-bottom: 0; }

/* Por qué elegir — revert al background original: imagen cover */
#seccion-porque {
  background: url('/wp-content/uploads/2026/06/fondo-azul-quienes-somos.png') center center / cover no-repeat;
  overflow: visible;
}

/* texto blanco sobre imagen oscura */
#seccion-porque .etiqueta-seccion { color: var(--color-blanco); }
.porque-titulo { color: var(--color-blanco); }
.porque-lead   { color: var(--color-blanco); text-align: center; margin-bottom: 0; }

/* ============================
   RESPALDO NACIONAL — inicio
   ============================ */

#seccion-respaldo {
  background: url('/wp-content/uploads/2026/06/banner-respaldo-nacional.jpg') center center / cover no-repeat;
  padding: 120px 0;
}

.respaldo-inner {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 40px;
  text-align: center;
}

.respaldo-titulo {
  color: var(--color-blanco);
  margin-bottom: 28px;
}

.respaldo-desc {
  color: var(--color-blanco);
  text-align: center;
  margin-bottom: 40px;
}

.respaldo-boton-wrap { display: flex; justify-content: center; }

@media (max-width: 768px) {
  #seccion-respaldo { padding: 64px 0; }
  .respaldo-inner { padding: 0 20px; }
  .respaldo-boton-wrap .btn-primary { width: 100%; justify-content: center; }
}

/* fin RESPALDO NACIONAL */

/* Respaldo — ajuste de padding: 120px → 80px */
#seccion-respaldo {
  padding: 80px 0;
}

/* ============================
   RUBROS — inicio
   ============================ */

#seccion-rubros {
  background: var(--color-azul-oscuro);
  padding: 100px 0;
}

.rubros-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 40px;
}

/* cabecera centrada */
.rubros-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 60px;
}

/* texto blanco sobre fondo oscuro */
#seccion-rubros .etiqueta-seccion { color: var(--color-blanco); }
.rubros-titulo { color: var(--color-blanco); }
.rubros-desc   { color: var(--color-blanco); text-align: center; margin-bottom: 0; }

/* grid 4×2 */
.rubros-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 52px;
}

/* cards: borde sutil, sin fondo */
.rubros-card {
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  padding: 28px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}

.rubros-card-icono {
  width: 52px;
  height: 52px;
}

.rubros-card-label {
  font-family: var(--fuente-principal);
  font-weight: 700;
  font-size: var(--texto-sm);
  color: var(--color-blanco);
  margin: 0;
  line-height: 1.3;
}

/* botón */
.rubros-boton-wrap { display: flex; justify-content: center; }

/* mobile */
@media (max-width: 768px) {
  #seccion-rubros { padding: 56px 0; }
  .rubros-inner { padding: 0 20px; }
  .rubros-header { margin-bottom: 36px; }
  .rubros-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .rubros-card { padding: 20px 12px; }
  .rubros-boton-wrap .btn-primary { width: 100%; justify-content: center; }
}

/* fin RUBROS */

/* Por qué elegir — nueva imagen de fondo */
#seccion-porque {
  background-image: url('/wp-content/uploads/2026/06/fondo-marca-de-agua.jpg');
}

/* Rubros — imagen de fondo (reemplaza color sólido) */
#seccion-rubros {
  background: url('/wp-content/uploads/2026/06/fondo-azul-rubros.png') center center / cover no-repeat;
}

/* Rubros — ajuste proporciones para igualar seccion 04 */
#seccion-rubros {
  padding: 100px 20px;
}
.rubros-inner {
  max-width: 1040px;
  padding: 0;
}

/* Rubros — mueve fondo y padding al wrapper (como soluciones-wrapper en sec 04) */
#seccion-rubros {
  background: none;
  padding: 0;
}
.rubros-wrapper {
  width: 100%;
  padding: 100px 20px;
  background: url('/wp-content/uploads/2026/06/fondo-azul-rubros.png') center center / cover no-repeat;
}
.rubros-inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0;
}
@media (max-width: 768px) {
  #seccion-rubros { padding: 0; }
  .rubros-wrapper { padding: 56px 16px; }
}

/* Rubros — nueva imagen de fondo */
.rubros-wrapper {
  background-image: url('/wp-content/uploads/2026/06/degrade-hacia-abajoMa.jpg');
}

/* ============================
   TESTIMONIOS — inicio
   ============================ */

#seccion-testimonios {
  background: none;
  padding: 0;
}

.testimonios-wrapper {
  position: relative;
  width: 100%;
  padding: 100px 20px;
  background-color: var(--color-fondo-claro);
  overflow: hidden;
}

/* marca de agua: posicionada a la derecha, grande, sin tapar contenido */
.testimonios-marca-agua {
  position: absolute;
  right: -60px;
  top: 50%;
  transform: translateY(-50%);
  width: 520px;
  height: auto;
  opacity: 0.12;
  pointer-events: none;
  user-select: none;
}

.testimonios-inner {
  position: relative; /* queda encima de la marca de agua */
  z-index: 1;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0;
}

/* cabecera centrada */
.testimonios-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 56px;
  gap: 12px;
}

.testimonios-logo {
  height: 52px;
  width: auto;
  margin-bottom: 4px;
}

.testimonios-titulo {
  color: var(--color-azul-oscuro);
  margin-bottom: 0;
}

.testimonios-desc {
  color: var(--color-azul-oscuro);
  text-align: center;
  margin-bottom: 0;
}

/* grid 3 columnas */
.testimonios-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 52px;
}

/* card */
.testimonios-card {
  background: var(--color-blanco);
  border: 1px solid rgba(0, 53, 149, 0.15);
  border-radius: 12px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* fila superior: estrellas a la izquierda, comillas a la derecha */
.testimonios-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.testimonios-card-estrellas {
  height: 18px;
  width: auto;
}

.testimonios-card-comillas {
  height: 28px;
  width: auto;
  opacity: 0.25;
}

/* cita: primera frase bold, resto regular */
.testimonios-card-cita {
  font-family: var(--fuente-principal);
  font-size: var(--texto-sm);
  color: var(--color-azul-oscuro);
  line-height: 24px;
  margin: 0;
  font-weight: 600;
}

.testimonios-card-cita strong {
  font-weight: 700;
  display: block;
  margin-bottom: 8px;
  font-size: var(--texto-sm);
  line-height: 1.4;
}

/* autor */
.testimonios-card-autor {
  font-family: var(--fuente-principal);
  font-size: var(--texto-xs);
  font-weight: 600;
  color: var(--color-azul-oscuro);
  text-transform: uppercase;
  margin: 0;
  margin-top: auto; /* empuja al fondo de la card */
}

/* botón */
.testimonios-boton-wrap {
  display: flex;
  justify-content: center;
}

/* mobile */
@media (max-width: 768px) {
  .testimonios-wrapper { padding: 56px 16px; }
  .testimonios-header { margin-bottom: 36px; }
  .testimonios-grid { grid-template-columns: 1fr; gap: 16px; }
  .testimonios-marca-agua { width: 280px; right: -40px; opacity: 0.08; }
  .testimonios-boton-wrap .btn-primary { width: 100%; justify-content: center; }
}

/* fin TESTIMONIOS */

/* Rubros — anula el background (lo maneja WPBakery desde la fila) */
.rubros-wrapper {
  background: none;
}

/* Testimonios — correcciones de card y marca de agua */

/* card: specs exactas del XD */
.testimonios-card {
  min-height: 250px;
  border: 1px solid #3D7CC9;
  box-shadow: 0px 3px 15px rgba(0, 53, 149, 0.45);
  text-align: center;
}

/* cita: la parte bold como bloque centrado */
.testimonios-card-cita strong {
  display: block;
  text-align: center;
  margin-bottom: 8px;
}

/* marca de agua: un poco más visible */
.testimonios-marca-agua {
  opacity: 1;
}

/* Testimonios — fix2: estrellas centradas, textos azules, padding uniforme */

/* card: position relative para anclar la comillas */
.testimonios-card {
  position: relative;
  padding: 25px 16px;
  gap: 12px;
}

/* comillas: esquina superior derecha, posicionada absolutamente */
.testimonios-card-comillas {
  position: absolute;
  top: 24px;
  right: 24px;
  height: 28px;
  width: auto;
  opacity: 1;
}

/* fila de estrellas: solo estrellas, centradas */
.testimonios-card-top {
  justify-content: center;
}

/* textos: color azul explícito, sin márgenes que rompan el gap */
.testimonios-card-cita,
.testimonios-card-cita strong,
.testimonios-card-autor {
  color: var(--color-azul-oscuro);
  margin-top: 10px;
}

/* Testimonios — fix3: espaciado y tamaños según diseño */

/* más gap entre elementos de la card */
.testimonios-card {
  gap: 16px;
}

/* frase bold: más grande, claramente distinguible del cuerpo */
.testimonios-card-cita strong {
  font-size: var(--texto-md);
  line-height: 1.35;
  display: block;
  margin-bottom: 4px;
}

/* firma: siempre pegada al fondo, con espacio claro arriba */
.testimonios-card-autor {
  margin-top: auto;
  padding-top: 16px;
  color: var(--color-azul-oscuro);
}

/* ============================
   MARCAS — inicio
   ============================ */

#seccion-marcas {
  background: none;
  padding: 0;
}

.marcas-wrapper {
  width: 100%;
  padding: 72px 20px;
  background-color: var(--color-fondo-claro);
}

.marcas-inner {
  max-width: 1040px;
  margin: 0 auto;
}

.marcas-titulo {
  color: var(--color-azul-oscuro);
  text-align: center;
  margin-bottom: 48px;
}

/* fila de logos: centrada, con espacio uniforme */
.marcas-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 40px 15px;
}

.marcas-logo {
  height: 80px;
  width: auto;
  object-fit: contain;
}

/* mobile */
@media (max-width: 768px) {
  .marcas-wrapper { padding: 48px 16px; }
  .marcas-titulo { margin-bottom: 32px; }
  .marcas-grid { gap: 24px 32px; }
  .marcas-logo { height: 36px; }
}

/* fin MARCAS */

#seccion-rubros > div.one-row_bottom_divider > svg{
  fill: #f1f4f4 !important;
}

#seccion-porque > div.one-row_top_divider > svg{
  fill: #f1f4f4 !important;
}

#slider-home > div.one-row_bottom_divider > svg {
  fill: #f1f4f4 !important;
}



/* ============================
   HERO — formulario de contacto
   ============================ */

/* card blanca del formulario */
.hero-form-card {
  background: var(--color-blanco);
  border-radius: 16px;
  padding: 32px 28px;
  width: 360px;
  box-shadow: 0px 8px 32px rgba(0, 53, 149, 0.18);
}

.hero-form-titulo {
  font-family: var(--fuente-principal);
  font-weight: 700;
  font-size: var(--texto-md);
  color: var(--color-azul-oscuro);
  text-align: center;
  margin: 0 0 20px;
}

/* dos campos en fila */
.hero-form-fila {
  display: flex;
  gap: 10px;
  margin-bottom: 0;
}

.hero-form-fila .wpcf7-form-control-wrap {
  flex: 1;
}

/* inputs, select y textarea */
.hero-form-card .wpcf7-text,
.hero-form-card .wpcf7-tel,
.hero-form-card .wpcf7-email,
.hero-form-card .wpcf7-select,
.hero-form-card .wpcf7-textarea {
  width: 100%;
  font-family: var(--fuente-principal);
  font-size: var(--texto-xs);
  color: var(--color-texto);
  background: var(--color-blanco);
  border: 1px solid #C8D8EC;
  border-radius: 8px;
  padding: 12px 14px;
  outline: none;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
}

.hero-form-card .wpcf7-text:focus,
.hero-form-card .wpcf7-tel:focus,
.hero-form-card .wpcf7-email:focus,
.hero-form-card .wpcf7-select:focus,
.hero-form-card .wpcf7-textarea:focus {
  border-color: var(--color-azul-medio);
}

.hero-form-card .wpcf7-textarea {
  resize: none;
  height: 100px;
}

/* espacio entre campos */
.hero-form-card .wpcf7-form-control-wrap {
  display: block;
  margin-bottom: 10px;
}

/* botón submit: igual al btn-primary del sitio */
.hero-form-card .wpcf7-submit {
  width: 100%;
  font-family: var(--fuente-principal);
  font-weight: 700;
  font-size: var(--texto-sm);
  color: var(--color-blanco);
  background: var(--color-rosa);
  border: none;
  border-radius: 50px;
  padding: 14px 28px;
  cursor: pointer;
  margin-top: 6px;
  transition: opacity 0.2s;
}

.hero-form-card .wpcf7-submit:hover {
  opacity: 0.88;
}

/* mensajes de validación */
.hero-form-card .wpcf7-not-valid-tip {
  font-size: 12px;
  color: var(--color-rojo);
}

.hero-form-card .wpcf7-response-output {
  font-size: 13px;
  text-align: center;
  margin-top: 10px;
  border-radius: 6px;
  padding: 8px;
}

/* select: flecha custom */
.hero-form-card .wpcf7-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%233D7CC9' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  color: #999;
}

/* fin HERO FORM */

/* Hero form — el card blanco ahora apunta al contenedor de CF7 dentro del slider */
.rev_slider .wpcf7,
.hero-form-card {
  background: var(--color-blanco);
  border-radius: 16px;
  padding: 32px 28px;
  width: 360px;
  box-shadow: 0px 8px 32px rgba(0, 53, 149, 0.18);
  box-sizing: border-box;
}

/* ============================
   HERO — formulario de contacto
   ============================ */

/* card blanca del formulario */
.hero-form-card {
  background: var(--color-blanco);
  border-radius: 16px;
  padding: 32px 28px;
  width: 450px;
  box-shadow: 0px 8px 32px rgba(0, 53, 149, 0.18);
}

.hero-form-titulo {
  font-family: var(--fuente-principal);
  font-weight: 700;
  font-size: var(--texto-md);
  color: var(--color-azul-oscuro);
  text-align: center;
  margin: 0 0 20px;
}

/* dos campos en fila */
.hero-form-fila {
  display: flex;
  gap: 10px;
  margin-bottom: 0;
}

.hero-form-fila .wpcf7-form-control-wrap {
  flex: 1;
}

/* inputs, select y textarea */
.hero-form-card .wpcf7-text,
.hero-form-card .wpcf7-tel,
.hero-form-card .wpcf7-email,
.hero-form-card .wpcf7-select,
.hero-form-card .wpcf7-textarea {
  width: 100%;
  font-family: var(--fuente-principal);
  font-size: var(--texto-xs);
  color: var(--color-texto);
  background: var(--color-blanco);
  border: 1px solid #C8D8EC;
  border-radius: 8px;
  padding: 12px 14px;
  outline: none;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
}

.hero-form-card .wpcf7-text:focus,
.hero-form-card .wpcf7-tel:focus,
.hero-form-card .wpcf7-email:focus,
.hero-form-card .wpcf7-select:focus,
.hero-form-card .wpcf7-textarea:focus {
  border-color: var(--color-azul-medio);
}

.hero-form-card .wpcf7-textarea {
  resize: none;
  height: 100px;
}

/* espacio entre campos */
.hero-form-card .wpcf7-form-control-wrap {
  display: block;
  margin-bottom: 0px;
}

#SR7_1_1 > div > br{
  display: none;
}

/* botón submit: igual al btn-primary del sitio */
.hero-form-card .wpcf7-submit {
  width: 100%;
  font-family: var(--fuente-principal);
  font-weight: 700;
  font-size: var(--texto-sm);
  color: var(--color-blanco);
  background: var(--color-rosa);
  border: none;
  border-radius: 50px;
  padding: 5px 28px;
  cursor: pointer;
  margin-top: 6px;
  transition: opacity 0.2s;
}

.hero-form-card .wpcf7-submit:hover {
  opacity: 0.88;
}

/* mensajes de validación */
.hero-form-card .wpcf7-not-valid-tip {
  font-size: 12px;
  color: var(--color-rojo);
}

.hero-form-card .wpcf7-response-output {
  font-size: 13px;
  text-align: center;
  margin-top: 10px;
  border-radius: 6px;
  padding: 8px;
}

/* select: flecha custom */
.hero-form-card .wpcf7-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%233D7CC9' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  color: #999;
}

/* fin HERO FORM */

/* Hero form — fix fila de dos campos y select */

/* la fila flex tiene que ganarle a los <p> que agrega CF7 */
.hero-form-fila {
  display: flex !important;
  flex-direction: row !important;
  gap: 10px;
  margin-bottom: 0;
}

.hero-form-fila > p,
.hero-form-fila > span,
.hero-form-fila > br {
  flex: 1;
  margin: 0 !important;
}

.hero-form-fila .wpcf7-form-control {
  width: 100%;
}

/* select: "Asunto" como si fuera placeholder */
.hero-form-card .wpcf7-select option:first-child {
  color: #999;
}

/* Hero form — grid layout: nombre/email en 2 col, resto full width */

.hero-form-card .wpcf7-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* campos full width: teléfono, asunto, mensaje y botón */
.hero-form-card p:has([name="telefono"]),
.hero-form-card p:has([name="asunto"]),
.hero-form-card p:has([name="mensaje"]),
.hero-form-card p:has(.wpcf7-submit),
.hero-form-card .wpcf7-submit {
  grid-column: 1 / -1;
}

/* inputs al 100% de su celda */
.hero-form-card .wpcf7-form input,
.hero-form-card .wpcf7-form select,
.hero-form-card .wpcf7-form textarea {
  width: 100%;
  box-sizing: border-box;
}

/* párrafos del grid: sin margen */
.hero-form-card .wpcf7-form > p {
  margin: 0;
}

/* Hero form — grid 2 col (nth-child, sin :has) */

.hero-form-card .wpcf7-form {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* todos los hijos al 100% de su celda */
.hero-form-card .wpcf7-form > p {
  margin: 0;
}

/* del 3er p en adelante: ancho completo */
.hero-form-card .wpcf7-form > p:nth-child(n+3),
.hero-form-card .wpcf7-form > div,
.hero-form-card .wpcf7-form > br {
  grid-column: 1 / -1;
}

/* inputs al 100% de su celda (refuerzo) */
.hero-form-card .wpcf7-form input,
.hero-form-card .wpcf7-form select,
.hero-form-card .wpcf7-form textarea {
  width: 100%;
  box-sizing: border-box;
}

/* Hero form — grid en el <p> (CF7 mete todos los campos en uno solo) */

/* resetear grids anteriores que apuntaban al form */
.hero-form-card .wpcf7-form {
  display: block !important;
}

/* grid en el p que contiene todos los campos */
.hero-form-card .wpcf7-form > p {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0;
}

/* br entre campos: no ocupan celda */
.hero-form-card .wpcf7-form > p > br {
  display: none;
}

/* teléfono, asunto y mensaje: ancho completo */
.hero-form-card .wpcf7-form > p > span[data-name="telefono"],
.hero-form-card .wpcf7-form > p > span[data-name="asunto"],
.hero-form-card .wpcf7-form > p > span[data-name="your-message"] {
  grid-column: 1 / -1;
}

/* botón submit y spinner: ancho completo */
.hero-form-card .wpcf7-form > p > input[type="submit"],
.hero-form-card .wpcf7-form > p > .wpcf7-spinner {
  grid-column: 1 / -1;
}


/* Hero form — select custom de Hub (jQuery UI selectmenu) */

.hero-form-card .ui-selectmenu-button {
  width: 100% !important;
  background: var(--color-blanco) !important;
  border: 1px solid #C8D8EC !important;
  border-radius: 8px !important;
  padding: 12px 14px !important;
  font-family: var(--fuente-principal) !important;
  font-size: var(--texto-xs) !important;
  color: #999 !important;
  box-sizing: border-box !important;
  text-align: left;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  box-shadow: none !important;
}

/* cuando tiene un valor seleccionado: texto oscuro */
.hero-form-card .ui-selectmenu-button.valor-seleccionado,
.hero-form-card .ui-selectmenu-button:not([class*="Asunto"]) .ui-selectmenu-text {
  color: #757575;
}

/* texto del botón */
.hero-form-card .ui-selectmenu-button .ui-selectmenu-text {
  font-family: var(--fuente-principal);
  font-size: var(--texto-xs);
  color: inherit;
}

/* icono de flecha del widget */
.hero-form-card .ui-selectmenu-button .ui-selectmenu-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%233D7CC9' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 8px;
  width: 16px;
  height: 16px;
  text-indent: -9999px;
  overflow: hidden;
}

/* menú desplegado */
.hero-form-card .ui-selectmenu-menu .ui-menu {
  border: 1px solid #C8D8EC;
  border-radius: 8px;
  font-family: var(--fuente-principal);
  font-size: var(--texto-xs);
  background: var(--color-blanco);
}

.hero-form-card .ui-selectmenu-menu .ui-menu-item-wrapper {
  padding: 10px 14px;
  color: var(--color-azul-oscuro);
}

.hero-form-card .ui-selectmenu-menu .ui-state-active {
  background: var(--color-azul-medio);
  color: var(--color-blanco);
  border: none;
}

/* Hero form — fix select: texto a la izquierda, flecha a la derecha */

.hero-form-card .ui-selectmenu-button .ui-selectmenu-text {
  order: 1;
  flex: 1;
  text-align: left;
}

.hero-form-card .ui-selectmenu-button .ui-selectmenu-icon {
  order: 2;
  flex-shrink: 0;
}

/* Hero form — fix color texto select y flecha en hover */

/* texto en gris placeholder, igual que los demás inputs */
.hero-form-card .ui-selectmenu-button .ui-selectmenu-text {
  color: #757575;
}

/* hover/focus: no cambiar nada visual del botón */
.hero-form-card .ui-selectmenu-button:hover,
.hero-form-card .ui-selectmenu-button:focus,
.hero-form-card .ui-selectmenu-button.ui-state-hover,
.hero-form-card .ui-selectmenu-button.ui-state-focus,
.hero-form-card .ui-selectmenu-button.ui-state-active {
  background: var(--color-blanco) !important;
  border-color: var(--color-azul-medio) !important;
  color: #999 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* ícono: bloquear el SVG custom, que jQuery UI no lo pise en hover */
.hero-form-card .ui-selectmenu-button .ui-selectmenu-icon,
.hero-form-card .ui-selectmenu-button:hover .ui-selectmenu-icon,
.hero-form-card .ui-selectmenu-button.ui-state-hover .ui-selectmenu-icon,
.hero-form-card .ui-selectmenu-button.ui-state-focus .ui-selectmenu-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%233D7CC9' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-position: center !important;
  background-size: 12px 8px !important;
  background-repeat: no-repeat !important;
}

/* Hero form — flecha blanca en el botón submit (misma que btn-primary) */

.hero-form-card .wpcf7-submit {
  background-image: url('/wp-content/uploads/2026/06/flechita.svg');
  background-repeat: no-repeat;
  background-position: right 24px center;
  background-size: auto 14px;
  padding-right: 52px;
}

/* Hero form — botón submit: ancho automático centrado, igual que btn-primary del sitio */

.hero-form-card .wpcf7-submit {
  width: auto !important;
  display: block;
  margin: 6px auto 0;
}

/* Hero form — card más compacta: menos padding vertical */

.hero-form-card {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

.hero-form-titulo {
  margin-bottom: 14px !important;
}

.hero-form-card .wpcf7-form > p {
  gap: 8px !important;
}

.hero-form-card .wpcf7-submit {
  margin-top: 4px !important;
}

/* Hero form — card aún más compacta */

.hero-form-card {
  padding: 30px 24px !important;
}

.hero-form-titulo {
  margin: 0 0 18px !important;
}

.hero-form-card .wpcf7-form > p {
  gap: 6px !important;
}

.hero-form-card .wpcf7-submit {
  margin-top: 2px !important;
}

/* Hero form — spinner, respuesta y brs sueltos */

/* spinner: oculto cuando no está activo, no ocupa espacio */
.hero-form-card .wpcf7-spinner:not(.is-active) {
  display: none !important;
}
.hero-form-card .wpcf7-spinner.is-active {
  display: block;
  margin: 6px auto 0;
  grid-column: 1 / -1;
}

/* mensaje de respuesta: compacto y legible */
.hero-form-card .wpcf7-response-output {
  margin: 6px 0 0 !important;
  padding: 6px 12px !important;
  font-family: var(--fuente-principal);
  font-size: 12px !important;
  border-radius: 6px !important;
  text-align: center;
  word-break: break-word;
  white-space: normal;
  line-height: 1.4;
}

/* brs sueltos dentro del form — todos, no solo los del grid */
.hero-form-card .wpcf7-form br {
  display: none !important;
}

/* Hero form — mensaje de respuesta: sin espacio cuando está vacío, tipografía correcta */

/* cuando está oculto (antes de enviar): no ocupa nada */
.hero-form-card .wpcf7-response-output[aria-hidden="true"] {
  display: none !important;
}

/* cuando aparece: tipografía del sitio, compacto */
.hero-form-card .wpcf7-response-output {
  font-family: var(--fuente-principal) !important;
  font-size: 13px !important;
  font-weight: 400;
  color: var(--color-azul-oscuro) !important;
  background: transparent !important;
  border: 1px solid #C8D8EC !important;
  border-radius: 6px !important;
  padding: 8px 12px !important;
  margin: 8px 0 0 !important;
  text-align: center;
  word-break: break-word;
  line-height: 1.4;
}

/* éxito: borde verde */
.hero-form-card .wpcf7-response-output.wpcf7-mail-sent-ok {
  border-color: #4caf50 !important;
  color: #2e7d32 !important;
}

/* error: borde rojo */
.hero-form-card .wpcf7-response-output.wpcf7-validation-errors,
.hero-form-card .wpcf7-response-output.wpcf7-mail-sent-ng {
  border-color: var(--color-rosa) !important;
  color: #c0392b !important;
}

/* Hero form — mensajes de validación: ocultar duplicados de Hub/jQuery Validate */

/* labels de error que agrega Hub fuera del wrap de CF7 */
.hero-form-card label.error,
.hero-form-card .wpcf7-form > p > label {
  display: none !important;
}

/* si CF7 duplica el tip: mostrar solo el primero */
.hero-form-card .wpcf7-form-control-wrap .wpcf7-not-valid-tip ~ .wpcf7-not-valid-tip {
  display: none !important;
}

/* el tip válido: tipografía del sitio, debajo del input */
.hero-form-card .wpcf7-not-valid-tip {
  font-family: var(--fuente-principal) !important;
  font-size: 11px !important;
  color: var(--color-rosa) !important;
  display: block;
  margin-top: 3px;
}

/* Hero form — forzar visibilidad del mensaje de respuesta cuando CF7 lo activa */

.hero-form-card .wpcf7-response-output:not([aria-hidden="true"]),
.hero-form-card .wpcf7-response-output.wpcf7-mail-sent-ok,
.hero-form-card .wpcf7-response-output.wpcf7-mail-sent-ng,
.hero-form-card .wpcf7-response-output.wpcf7-validation-errors,
.hero-form-card .wpcf7-response-output.wpcf7-spam-blocked {
  display: block !important;
  font-family: var(--fuente-principal) !important;
  font-size: 13px !important;
  font-weight: 500;
  text-align: center;
  border-radius: 6px !important;
  padding: 8px 12px !important;
  margin: 8px 0 0 !important;
  word-break: break-word;
  line-height: 1.4;
}

.hero-form-card .wpcf7-response-output.wpcf7-mail-sent-ok {
  color: #2e7d32 !important;
  border-color: #4caf50 !important;
  background: #f1f8f1 !important;
}

.hero-form-card .wpcf7-response-output.wpcf7-mail-sent-ng,
.hero-form-card .wpcf7-response-output.wpcf7-validation-errors,
.hero-form-card .wpcf7-response-output.wpcf7-spam-blocked {
  color: #c0392b !important;
  border-color: var(--color-rosa) !important;
  background: #fff5f5 !important;
}

/* Hero form — fix definitivo del mensaje de respuesta */

/* oculto: sin espacio, sin borde */
.hero-form-card .wpcf7-response-output[aria-hidden="true"] {
  display: none;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

/* cuando CF7 lo activa (aria-hidden="false" o atributo removido) */
.hero-form-card .wpcf7-response-output[aria-hidden="false"],
.hero-form-card .wpcf7-response-output:not([aria-hidden="true"]) {
  display: block !important;
  visibility: visible !important;
  font-family: var(--fuente-principal) !important;
  font-size: 13px !important;
  font-weight: 500;
  text-align: center;
  border-radius: 6px !important;
  padding: 8px 12px !important;
  margin: 8px 0 0 !important;
  word-break: break-word;
  line-height: 1.4;
}

/* éxito */
.hero-form-card .wpcf7-response-output.wpcf7-mail-sent-ok {
  display: block !important;
  color: #2e7d32 !important;
  border: 1px solid #4caf50 !important;
  background: #f1f8f1 !important;
}

/* error / validación */
.hero-form-card .wpcf7-response-output.wpcf7-validation-errors,
.hero-form-card .wpcf7-response-output.wpcf7-mail-sent-ng,
.hero-form-card .wpcf7-response-output.wpcf7-spam-blocked {
  display: block !important;
  color: #c0392b !important;
  border: 1px solid var(--color-rosa) !important;
  background: #fff5f5 !important;
}

/* Hero form — fix final respuesta: usar :empty en vez de aria-hidden */

/* ocultar TODOS los estados anteriores que usaban aria-hidden */
.hero-form-card .wpcf7-response-output[aria-hidden="true"],
.hero-form-card .wpcf7-response-output[aria-hidden="false"],
.hero-form-card .wpcf7-response-output:not([aria-hidden="true"]) {
  display: revert;
}

/* vacío = sin espacio */
.hero-form-card .wpcf7-response-output:empty {
  display: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

/* con contenido = siempre visible */
.hero-form-card .wpcf7-response-output:not(:empty) {
  display: block !important;
  visibility: visible !important;
  font-family: var(--fuente-principal) !important;
  font-size: 13px !important;
  font-weight: 500;
  text-align: center;
  border-radius: 6px !important;
  padding: 8px 12px !important;
  margin: 8px 0 0 !important;
  word-break: break-word;
  line-height: 1.4;
  color: var(--color-azul-oscuro) !important;
  border: 1px solid #C8D8EC !important;
  background: var(--color-blanco) !important;
}

.hero-form-card .wpcf7-response-output.wpcf7-mail-sent-ok:not(:empty) {
  color: #2e7d32 !important;
  border-color: #4caf50 !important;
  background: #f1f8f1 !important;
}

.hero-form-card .wpcf7-response-output.wpcf7-validation-errors:not(:empty),
.hero-form-card .wpcf7-response-output.wpcf7-mail-sent-ng:not(:empty),
.hero-form-card .wpcf7-response-output.wpcf7-spam-blocked:not(:empty) {
  color: #c0392b !important;
  border-color: var(--color-rosa) !important;
  background: #fff5f5 !important;
}

/* ============================
   CONTACTO MOBILE — sección 10
   Visible solo en ≤768px
   ============================ */

/* oculto en desktop */
#contacto-mobile-seccion {
  display: none !important;
}

@media (max-width: 768px) {
  #contacto-mobile-seccion {
    display: block !important;
    background-color: var(--color-fondo-claro);
    padding: 40px 20px !important;
  }

  /* card: ancho completo, sin el fixed 360px del hero */
  #contacto-mobile-seccion .hero-form-card,
  #contacto-mobile-seccion .contacto-mobile-card {
    width: 100% !important;
    max-width: 480px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 24px 20px !important;
  }

  /* inputs al 100% en mobile */
  #contacto-mobile-seccion .wpcf7-form input,
  #contacto-mobile-seccion .wpcf7-form select,
  #contacto-mobile-seccion .wpcf7-form textarea {
    font-size: 16px !important; /* evita zoom en iOS */
  }

  /* el select custom de Hub también al 100% */
  #contacto-mobile-seccion .ui-selectmenu-button {
    width: 100% !important;
  }

  /* botón submit centrado */
  #contacto-mobile-seccion .wpcf7-submit {
    display: block;
    margin: 8px auto 0;
  }
}

/* fin CONTACTO MOBILE */

/* Hero slider — ocultar el formulario en mobile */

@media (max-width: 768px) {
  #slider-form {
    display: none !important;
    visibility: hidden !important;
  }
}

/* Sección formulario mobile (#noslider-form) — oculto en desktop, visible en mobile */

#noslider-form {
  display: none !important;
}

@media (max-width: 768px) {
  #noslider-form {
    display: block !important;
    background-color: var(--color-fondo-claro);
    padding: 40px 20px !important;
  }

  #noslider-form .hero-form-card {
    width: 100% !important;
    max-width: 480px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 24px 20px !important;
  }

  #noslider-form .wpcf7-form input,
  #noslider-form .wpcf7-form select,
  #noslider-form .wpcf7-form textarea {
    font-size: 16px !important;
  }

  #noslider-form .ui-selectmenu-button {
    width: 100% !important;
  }

  #noslider-form .wpcf7-submit {
    display: block;
    margin: 8px auto 0;
  }
}

/* noslider-form — fix mobile: 1 columna y fondo consistente */

@media (max-width: 768px) {
  /* 1 columna: cada campo en su propia fila */
  #noslider-form .wpcf7-form > p {
    grid-template-columns: 1fr !important;
  }

  /* fondo igual al de la página */
  #noslider-form {
    background-color: #ffffff !important;
  }

  /* sacar el box-shadow del card en mobile (queda más integrado) */
  #noslider-form .hero-form-card {
    box-shadow: none !important;
    border: 1px solid #e0e7ef;
  }
}

/* noslider-form — siempre 1 columna, sin importar breakpoint */

#noslider-form .wpcf7-form > p {
  grid-template-columns: 1fr !important;
}

#noslider-form .wpcf7-form > p > span[data-name],
#noslider-form .wpcf7-form > p > input[type="submit"],
#noslider-form .wpcf7-form > p > .wpcf7-spinner {
  grid-column: 1 / -1 !important;
}

/* noslider-form — forzar 1 columna, selector máxima especificidad */

html body #noslider-form .hero-form-card .wpcf7-form > p,
html body #noslider-form .wpcf7-form > p {
  display: grid !important;
  grid-template-columns: 1fr !important;
}

/* todos los spans al ancho completo por las dudas */
html body #noslider-form .wpcf7-form > p > span[data-name] {
  grid-column: 1 / -1 !important;
  width: 100% !important;
}

/* noslider-form — reemplazar grid por flex columna */

html body #noslider-form .hero-form-card .wpcf7-form > p {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

html body #noslider-form .hero-form-card .wpcf7-form > p > span[data-name],
html body #noslider-form .hero-form-card .wpcf7-form > p > input[type="submit"],
html body #noslider-form .hero-form-card .wpcf7-form > p > .wpcf7-spinner {
  width: 100% !important;
  flex: none !important;
  grid-column: unset !important;
}

/* noslider-form — selector correcto: #noslider-form ES el <form>, no el row */

#noslider-form > p {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

#noslider-form > p > span[data-name],
#noslider-form > p > input[type="submit"],
#noslider-form > p > .wpcf7-spinner {
  width: 100% !important;
}

/* ============================
   HEADER — Nav Principal
   ============================ */

/* nav: tipografía ajustada al diseño */
#header .main-nav > ul > li > a {
  font-family: var(--fuente-principal) !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  color: var(--color-azul-oscuro) !important;
  letter-spacing: 0 !important;
}

#header .main-nav > ul > li > a:hover {
  color: var(--color-azul-medio) !important;
}

/* badge "11" sobre CONTACTO */
#menu-item-143 {
  position: relative;
}

#menu-item-143 > a::after {
  content: "11";
  position: absolute;
  top: -6px;
  right: -20px;
  background: #F5A623;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--fuente-principal);
  line-height: 1;
  min-width: 18px;
  height: 18px;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

/* botón Consultanos: de outline azul a relleno rosa */
#header .module-button .btn {
  background-color: var(--color-rosa) !important;
  border-color: var(--color-rosa) !important;
  color: var(--color-blanco) !important;
  font-family: var(--fuente-principal) !important;
  font-weight: 600 !important;
  font-size: 18px !important;
}

#header .module-button .btn span,
#header .module-button .btn i,
#header .module-button .btn .btn-txt {
  color: var(--color-blanco) !important;
}

#header .module-button .btn:hover {
  opacity: 0.88;
}

/* badge "1" sobre el botón Consultanos */
#header .module-button {
  position: relative;
}

#header .module-button::after {
  content: "1";
  position: absolute;
  top: 2px;
  right: -8px;
  background: #F5A623;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--fuente-principal);
  line-height: 1;
  min-width: 18px;
  height: 18px;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  z-index: 10;
}

/* fin HEADER */

/* Header — badges: reposicionar dentro del area visible del header */

/* badge CONTACTO "11" — ajuste vertical (el <a> tiene 103px, badge iba fuera del viewport) */
#menu-item-143 > a::after {
  top: 10px !important;
  right: -22px !important;
}

/* badge Consultanos "1" */
#header .module-button::after {
  top: 6px !important;
  right: -6px !important;
}

/* badge CONTACTO — fix: el <a> de Hub tiene overflow:hidden, cortaba el ::after
   Movemos el badge al <li>, que sí desborda correctamente */
#menu-item-143 > a::after {
  display: none !important;
}

#menu-item-143::after {
  content: "11";
  position: absolute;
  top: 10px;
  right: -22px;
  background: #F5A623;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--fuente-principal);
  line-height: 1;
  min-width: 18px;
  height: 18px;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  z-index: 100;
}

/* header — sacar badges (eran anotaciones del XD, no van al sitio) */
#menu-item-143 > a::after,
#menu-item-143::after,
#header .module-button::after {
  display: none !important;
  content: none !important;
}

/* ============================
   FOOTER — footer-principal
   ============================ */

.footer-wrapper {
  position: relative;
  overflow: hidden;
  background-color: #0B1D3A;
}

.footer-bg-img {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

/* overlay azul oscuro sobre la foto */
.footer-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.footer-inner {
  position: relative;
  z-index: 2;
  max-width: 1140px;
  margin: 0 auto;
  padding: 60px 40px;
  display: flex;
  align-items: flex-start;
  gap: 60px;
}

/* --- Columna 1: Marca --- */
.footer-col-marca {
  flex: 0 0 220px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.footer-logo {
  width: 180px;
  height: auto;
}

.footer-banderas {
    width: 50%;
    margin: 0 auto;
}

.footer-tagline {
  font-family: var(--fuente-principal);
  font-size: 15px;
  font-weight: 400;
  color: var(--color-blanco);
  line-height: 1.5;
  margin: 0;
}

.footer-social {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 4px;
}

.footer-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.9;
  transition: opacity 0.2s;
}

.footer-social-link:hover {
  opacity: 1;
}

.footer-social-link img {
  width: 28px;
  height: 28px;
}

/* --- Columna 2: Contacto --- */
.footer-col-contacto {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 22px;
  justify-content: center;
  align-self: center;
}

.footer-contacto-item {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}

.footer-contacto-icono {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.footer-contacto-texto {
  font-family: var(--fuente-principal);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-blanco);
  line-height: 1.4;
}

a.footer-contacto-item:hover .footer-contacto-texto {
  opacity: 0.8;
}

/* --- Columna 3: Nav --- */
.footer-col-nav {
  flex: 0 0 180px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-self: center;
}

.footer-nav-link {
  font-family: var(--fuente-principal);
  font-size: 17px;
  font-weight: 700;
  color: var(--color-blanco);
  text-decoration: none;
  letter-spacing: 0.03em;
  transition: opacity 0.2s;
}

.footer-nav-link:hover {
  opacity: 0.75;
  color: var(--color-blanco);
}

/* --- Mobile --- */
@media (max-width: 768px) {
  .footer-inner {
    flex-direction: column;
    gap: 36px;
    padding: 48px 24px;
  }

  .footer-col-marca,
  .footer-col-nav {
    flex: none;
    width: 100%;
  }

  .footer-col-contacto {
    width: 100%;
  }

  .footer-col-nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px 24px;
  }

  .footer-nav-link {
    font-size: 15px;
  }
}

/* fin FOOTER */

/* footer — ajuste de columnas y crédito Tehuentec */

/* eliminar padding del row de WPBakery para control total */
#footer-principal,
#footer-principal .vc_column-inner {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* proporciones de columnas ajustadas al diseño */
.footer-col-marca {
  flex: 0 0 230px;
}

.footer-col-contacto {
  flex: 0 0 440px;
}

.footer-col-nav {
  flex: 0 0 200px;
}

.footer-inner {
  justify-content: space-between;
  gap: 0;
}

/* crédito Tehuentec — franja blanca debajo del footer */
.footer-credito {
  background: var(--color-blanco);
  text-align: center;
  padding: 14px 20px;
  font-family: var(--fuente-principal);
  font-size: 13px;
  font-weight: 400;
  color: var(--color-gris);
}

.footer-credito a {
  color: var(--color-azul-oscuro);
  text-decoration: none;
  font-weight: 600;
}

.footer-credito a:hover {
  text-decoration: underline;
}

/* footer — eliminar todo espacio blanco debajo del wrapper */

/* WPBakery row y column sin padding */
#footer-principal.vc_row,
#footer-principal .ld-container,
#footer-principal .ld-row,
#footer-principal .wpb_column,
#footer-principal .vc_column-inner,
#footer-principal .wpb_wrapper,
#footer-principal .wpb_raw_code,
#footer-principal .wpb_raw_html {
  padding: 0 !important;
  margin: 0 !important;
}

/* <p> vacíos que Hub inyecta dentro del footer */
#footer > p,
#footer-principal > p,
#footer-principal p:empty {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Hub footer sin padding propio */
#footer.main-footer {
  padding: 0 !important;
  margin: 0 !important;
}

/* crédito dentro del wrapper oscuro */
.footer-credito {
  position: relative;
  z-index: 2;
  background: rgba(0, 0, 0, 0.25);
  text-align: center;
  padding: 10px 20px;
  font-family: var(--fuente-principal);
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
}

.footer-credito a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-weight: 600;
}

.footer-credito a:hover {
  color: var(--color-blanco);
}

/* ============================
   MARCAS — slider infinito
   ============================ */

.marcas-wrapper {
  padding: 60px 0 70px;
  background: var(--color-blanco);
  overflow: hidden;
}

.marcas-titulo {
  font-family: var(--fuente-principal);
  font-size: 36px;
  font-weight: 400;
  color: var(--color-azul-oscuro);
  text-align: center;
  margin: 0 0 48px;
  line-height: 1.2;
}

.marcas-titulo strong {
  font-weight: 700;
}

/* contenedor con máscara fade en los bordes */
.marcas-slider {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    black 100px,
    black calc(100% - 100px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    black 100px,
    black calc(100% - 100px),
    transparent 100%
  );
}

/* track: todos los logos en fila, ancho automático */
.marcas-track {
  display: flex;
  align-items: center;
  gap: 72px;
  width: max-content;
  animation: marcas-scroll 32s linear infinite;
}

/* pausa al pasar el mouse */
.marcas-slider:hover .marcas-track {
  animation-play-state: paused;
}

@keyframes marcas-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.marca-logo {
  height: 56px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}

/* Mobile */
@media (max-width: 768px) {
  .marcas-wrapper {
    padding: 40px 0 50px;
  }

  .marcas-titulo {
    font-size: 28px;
    margin-bottom: 36px;
    padding: 0 20px;
  }

  .marca-logo {
    height: 40px;
  }

  .marcas-track {
    gap: 48px;
    animation-duration: 24s;
  }
}

/* fin MARCAS */

/* marcas slider — ajuste: logos más chicos, área limitada, fade fuerte */

.marcas-wrapper {
  padding: 60px 0 70px;
}

/* limitar ancho visible → solo 5-6 logos en pantalla */
.marcas-slider {
  max-width: 1100px;
  margin: 0 auto;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    black 160px,
    black calc(100% - 160px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    black 160px,
    black calc(100% - 160px),
    transparent 100%
  );
}

.marca-logo {
  height: 80px;
}

.marcas-track {
  gap: 88px;
}

@media (max-width: 768px) {
  .marcas-slider {
    max-width: 100%;
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0,
      black 60px,
      black calc(100% - 60px),
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0,
      black 60px,
      black calc(100% - 60px),
      transparent 100%
    );
  }

  .marca-logo {
    height: 100px;
  }

  .marcas-track {
    gap: 52px;
  }
}

@media (max-width: 900px) {

  #seccion-espacio-libre > div > div > div > div > div > div > div > div{
    text-align: center;
  }

  #seccion-espacio-libre > div > div > div > div > div > div > div > div > div.espacio-col-imagen{
    margin: 0 auto;
  }

  #seccion-rubros > div.one-row_bottom_divider{
    height: 30px !important;
  }

  #seccion-porque > div.one-row_top_divider{
    height: 30px !important;
  }

  #slider-home > div.one-row_bottom_divider {
    height: 30px !important;
  }
}



/* hero form — overlay estático sobre SR7 (fuera de los slides) */

/* El form movido al SR7-MODULE queda fijo en la derecha del hero */
SR7-MODULE > .hero-form-static {
  position: absolute;
  top: 43%;
  right: 5%;
  transform: translateY(-50%);
  z-index: 9999;
  width: 450px;
}

/* Ocultar la capa del form dentro del SR7-SLIDE para evitar duplicado */
SR7-SLIDE .hero-form-card {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ============================
   HERO — ocultar en mobile
   ============================ */
@media (max-width: 768px) {
  SR7-MODULE {
    display: none !important;
  }
}

/* Revert: el SR7-MODULE NO se oculta en mobile — solo el formulario */
@media (max-width: 768px) {
  SR7-MODULE {
    display: block !important;
  }
}

/* Formulario del hero — ocultar en mobile (la sección mobile lo reemplaza) */
@media (max-width: 768px) {
  SR7-MODULE > .hero-form-static {
    display: none !important;
  }
}

/* ============================
   SPINNER — overlay sobre el form card al enviar
   ============================ */

/* El card necesita ser el contexto de posicionamiento */
.hero-form-card {
  position: relative;
}

/* Saca el spinner de CF7 del flujo y lo convierte en overlay */
.hero-form-card .wpcf7-spinner {
  display: block;
  visibility: hidden;
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  background-color: rgba(255, 255, 255, 0.75);
  border-radius: 16px;
  z-index: 20;
}

.hero-form-card .wpcf7-spinner.is-active {
  visibility: visible;
}

/* Ring spinner centrado sobre el overlay */
.hero-form-card .wpcf7-spinner::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border: 4px solid rgba(0, 55, 130, 0.15);
  border-top-color: var(--color-primario, #003782);
  border-radius: 50%;
  animation: spinner-giro 0.7s linear infinite;
  background-color: transparent;
}

@keyframes spinner-giro {
  to { transform: rotate(360deg); }
}

/* Fix: restaurar position:absolute en el card (lo pisó el spinner CSS) */
SR7-MODULE > .hero-form-static {
  position: absolute !important;
}

/* El card con position:absolute ya es containing block para el spinner — no hace falta relative */
.hero-form-card {
  position: unset;
}

/* Fix: el selector combinado (2 clases) tiene más especificidad y restaura position:absolute */
.hero-form-card.hero-form-static {
  position: absolute !important;
}

/* Spinner más visible: ring más grande y borde más grueso */
.hero-form-card.hero-form-static .wpcf7-spinner::before {
  width: 56px !important;
  height: 56px !important;
  margin: -28px 0 0 -28px !important;
  border: 5px solid rgba(0, 55, 130, 0.2) !important;
  border-top-color: #003782 !important;
  border-radius: 50% !important;
  background-color: transparent !important;
  animation: spinner-giro 0.7s linear infinite !important;
}

/* Revert: spinner CF7 por defecto — inline junto al botón, sin overlay */
.hero-form-card .wpcf7-spinner,
.hero-form-card.hero-form-static .wpcf7-spinner {
  position: relative !important;
  display: inline-block !important;
  inset: auto !important;
  width: 24px !important;
  height: 24px !important;
  margin: 0 24px !important;
  background-color: #23282d !important;
  background-image: none !important;
  border-radius: 100% !important;
  border: none !important;
  z-index: auto !important;
  visibility: hidden;
}

.hero-form-card .wpcf7-spinner.is-active,
.hero-form-card.hero-form-static .wpcf7-spinner.is-active {
  visibility: visible !important;
}

.hero-form-card .wpcf7-spinner::before,
.hero-form-card.hero-form-static .wpcf7-spinner::before {
  content: '' !important;
  position: absolute !important;
  background-color: #fbfbfc !important;
  top: 4px !important;
  left: 4px !important;
  width: 6px !important;
  height: 6px !important;
  border: none !important;
  border-radius: 100% !important;
  transform-origin: 8px 8px !important;
  animation-name: spin !important;
  animation-duration: .5s !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
  margin: 0 !important;
}

/* Spinner CF7 por defecto — especificidad alta para ganar sobre overlay */
html body .hero-form-card .wpcf7-spinner {
  position: relative !important;
  display: inline-block !important;
  width: 24px !important;
  height: 24px !important;
  background-color: #23282d !important;
  background-image: none !important;
  opacity: 0.75 !important;
  border-radius: 100% !important;
  border: none !important;
  inset: auto !important;
  margin: 0 24px !important;
  z-index: auto !important;
  visibility: hidden !important;
}

html body .hero-form-card .wpcf7-spinner.is-active {
  visibility: visible !important;
}

html body .hero-form-card .wpcf7-spinner::before {
  content: '' !important;
  position: absolute !important;
  background-color: #fbfbfc !important;
  top: 4px !important;
  left: 4px !important;
  width: 6px !important;
  height: 6px !important;
  border: none !important;
  border-radius: 100% !important;
  transform-origin: 8px 8px !important;
  animation-name: spin !important;
  animation-duration: .5s !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
  margin: 0 !important;
}

/* Spinner CF7: sin espacio cuando no está enviando */
html body .hero-form-card .wpcf7-spinner {
  display: none !important;
}

html body .hero-form-card .wpcf7-spinner.is-active {
  display: inline-block !important;
  visibility: visible !important;
  width: 24px !important;
  height: 24px !important;
  background-color: #23282d !important;
  opacity: 0.75 !important;
  border-radius: 100% !important;
  position: relative !important;
  inset: auto !important;
  margin: 0 24px !important;
}