/* ===== 0) Variables & utilitarios ===== */
:root{
  --gap: 16px;
  --header-h-desktop: 110px;  /* ajusta a tu altura real */
  --header-h-mobile:   68px;  /* ajusta a tu altura real */
  --fab-bottom: 20px;         /* altura de botones flotantes */
}

/* ===== 1) Anclas bajo header fijo ===== */
/* Método moderno + compatible */
html{ scroll-padding-top: var(--header-h-desktop); }
@media (max-width: 991.98px){
  html{ scroll-padding-top: var(--header-h-mobile); }
}
#servicios{ scroll-margin-top: var(--header-h-desktop); }
@media (max-width: 991.98px){
  #servicios{ scroll-margin-top: var(--header-h-mobile); }
}

/* ===== 2) Servicios — layout responsive ===== */
#servicios .services-container{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:stretch;
  gap: var(--gap);
}

/* Base desktop: permitir 3–4 por fila si el resto del tema no fuerza porcentajes */
#servicios .service-box{
  display:flex;
  flex-direction:column;
  flex: 1 1 23%;
  min-width: 260px;
}

/* Tablet: 2 columnas */
@media (max-width: 991.98px){
  #servicios .service-box{
    flex: 1 1 calc(50% - var(--gap));
    width: auto !important;
    min-height: 0 !important;
  }
}

/* Mobile: 1 columna */
@media (max-width: 575.98px){
  #servicios .service-box{
    flex: 1 1 100% !important;
  }
}

/* Contenido dentro de la tarjeta */
#servicios .service-logo{
  display:block;
  margin:0 auto 12px;
  height: clamp(100px, 12vw, 140px);
  max-height: 140px;
  width:auto;
  object-fit:contain;
}

#servicios h5{
  margin:0 0 8px;
  font-weight:700;
  text-align:center;
  font-size: clamp(16px, 2.8vw, 18px);
}

#servicios .text-description,
#servicios .service-box p{
  margin:0 0 8px;
  line-height:1.4;
  font-size: clamp(14px, 2.6vw, 16px);
}

/* Bloque “Leer más” + flecha al pie y centrados */
#servicios .services-arrow{
  margin-top:auto !important;
  width:100% !important;
  text-align:center !important;
}
#servicios .services-arrow p.text{
  margin:0;
  font-weight:600;
  font-size:0.9rem;
  color:#2f5d4b; /* verde del tema */
}
#servicios .services-arrow img{
  display:block;
  margin:8px auto 0;
  max-height:24px;
  width:auto;
  filter: grayscale(1) brightness(0.6); /* gris */
  transform: rotate(180deg);            /* apunta hacia abajo */
  transform-origin: 50% 50%;
}

/* Versión textual del “leer más” (si se usa <a>) */
a.leer-mas, .leer-mas a, a.read-more{
  color:#1f5c4f !important;
  font-weight:600;
  text-decoration:none;
}
a.leer-mas::after, .leer-mas a::after, a.read-more::after{
  content:"▾";
  display:inline-block;
  margin-left:.4rem;
  transform:translateY(-1px);
  color:#777;
  opacity:.9;
}
a.leer-mas:hover, .leer-mas a:hover, a.read-more:hover{
  text-decoration:underline;
}

/* ===== 3) Contacto — asegurar fondo imagen y quitar fondo blanco ===== */
#contacto.contact-section-new,
#contacto .contact-section-new{
  background-color: transparent !important;
  background-image: var(--bg-img) !important; /* define --bg-img en el HTML inline si quieres */
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* ===== 4) Botones flotantes (WhatsApp / Contacto) — misma altura ===== */
.whatsapp-float{
  position: fixed;
  right: 18px;
  bottom: var(--fab-bottom);
  z-index: 9999;
}
.contact-icon{
  position: fixed !important;
  left: 18px;
  bottom: var(--fab-bottom) !important;
  z-index: 9999;
}

/* ===== 5) Ajustes menores de tipografía del menú en desktop (si el tema la sobredimensiona) ===== */
@media (min-width: 992px){
  .header.navbar-fixed-top .navbar .nav-collapse .navbar-nav > li > a,
  .header.navbar-fixed-top .navbar .navbar-nav > li > a,
  .header .navbar .nav-collapse .navbar-nav > li > a,
  .header .navbar .navbar-nav > li > a,
  .navbar .navbar-nav > li > a{
    font-size: 15px !important;
    line-height: 1.2 !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
  .header .navbar .dropdown-menu > li > a,
  .dropdown-menu > li > a{
    font-size: 14px !important;
    line-height: 1.2 !important;
  }
}
@media (max-width: 991.98px){
  .header .navbar .navbar-nav > li > a{
    font-size: 14px !important;
    line-height: 1.2 !important;
  }
}
/* ===== Hotfix: imagen del 4º slide apareciendo suelta en móvil ===== */
@media (max-width: 768px){

  /* 1) Asegurar que las imágenes dentro del carrusel NO queden “fixed” */
  .carousel .item picture > img,
  .carousel-inner .item picture > img{
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }

  /* 2) Si hubiera una copia suelta de la 4ª imagen fuera del carrusel, ocultarla */
  /* Ajustá los nombres si tu archivo difiere (ej: 4slide_n.jpg o slide_celu4.jpg) */
  body :not(.carousel) img[src*="4slide"],
  body :not(.carousel) img[src*="slide_celu4"]{
    display: none !important;
  }

  /* 3) Fondos parallax/fixed que en móvil quedan pegados cerca del footer */
  .parallax, .parallax-bg, .banner, .hero, [class*="slide"]{
    background-attachment: scroll !important; /* evita “fijo” en mobile */
    background-position: center center !important;
    background-size: cover !important;
  }
}
/* --- Captions visibles uniquement sur mobile --- */
@media (max-width: 767px){
  .carousel .item{ position: relative; }

  .slide-caption--mobile{
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    text-align: center;
    color: white;
    padding: 10px 16px;
    z-index: 2;
  }
  .slide-caption--mobile h2{
    margin: 0 0 8px;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
  }
  .slide-caption--mobile p{
    margin: 0;
    font-size: 1rem;
    line-height: 1.4;
    opacity: .95;
  }

}

@media (min-width: 768px){
  .slide-caption--mobile{ display:none !important; }
}
/* ===== Captions MOBILE (≤767px) — style "blanc + centré" ===== */
/* ===== Captions MOBILE (≤767px) — version finale ===== */
@media (max-width: 767px){

  .carousel .item{ position: relative; }

  .slide-caption--mobile{
    position: absolute;
    left: 50%; 
    top: 30%;                /* bloc plus bas que la version précédente */
    transform: translate(-50%, -50%);
    width: min(92%, 520px);
    padding: 10px 16px;
    text-align: center;      /* le titre reste centré */
    z-index: 3;

    /* meilleure lisibilité */
    color: #fff !important;
    text-shadow: 0 2px 8px rgba(0,0,0,.55), 0 0 1px rgba(0,0,0,.35);
  }

  .slide-caption--mobile h2{
    margin: 0 0 10px;
    font-weight: 800;
    letter-spacing: .3px;
    font-size: clamp(1.375rem, 5.2vw, 1.875rem); /* ~22–30px */
    line-height: 1.15;
    color: #fff !important;
  }

  .slide-caption--mobile p{
    margin: 0 auto;                 /* centré horizontalement */
    font-weight: 500;
    opacity: .98;
    font-size: clamp(0.95rem, 3.6vw, 1.125rem); /* ~15–18px */
    line-height: 1.35;
    color: #fff !important;
text-align: center;
text-align-last: center;
-moz-text-align-last: center;

    max-width: 90%;                 /* largeur contrôlée */
  }

  .slide-caption--mobile.bg-soft{
    background: rgba(0,0,0,.22);
    border-radius: 12px;
  }

  /* sécurité : forcer le blanc si un style précédent essaie de recoloriser */
  .carousel .item .slide-caption--mobile,
  .carousel .item .slide-caption--mobile *{
    color: #fff !important;
  }
}

/* cacher ces captions sur tablette/desktop */
@media (min-width: 768px){
  .slide-caption--mobile{ display:none !important; }
}
/* Móvil: al abrir el dropdown, desactivar clicks en el submenú por 300ms */
@media (max-width: 991px){
  .navbar-nav .dropdown.is-opening > .dropdown-menu a{
    pointer-events: none;
  }
}
/* ===== #company – versión móvil: texto primero + imagen abajo ===== */
@media (max-width: 767px){
  #company .company-row{
    display: flex; 
    flex-direction: column; 
    align-items: center;
  }

  /* Texto primero */
  #company .company-text-col{
    order: 1;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 4px 18px;
  }

  /* Imagen debajo y a todo lo ancho */
  #company .company-img-col{
    order: 2;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    padding: 10px 18px 0;
  }
  #company .company-img-col img{
    width: min(560px, 92vw);
    height: auto;
    display: block;
    margin: 8px auto 0;
  }

  /* Título y párrafo más pequeños para que quepa en 1 pantalla */
  #company .company-titre{
font-size: clamp(0.90rem, 4.5vw, 1.10rem) !important;;
    line-height: 1.15;
    text-align: center;
    margin: 0 0 8px;
  }
  #company .company-text{
    font-size: clamp(0.70rem, 2.8vw, 0.90rem) !important;
    line-height: 1.45;
    text-align: justify;
    margin: 0 auto;
    max-width: 92vw;
  }

  /* Por si el ancla #company queda debajo del header fijo */
  #company{ scroll-margin-top: var(--header-h-mobile, 68px); }
}

/* ===== Footer: ajustes SOLO para móvil ===== */
@media (max-width: 767px){
  /* 1) Ocultar el logo del footer (columna “logo + descripción”) */
  footer .logo-block picture,
  footer .logo-block img{
    display: none !important;
  }

  /* 2) Un poco más de espacio entre Instagram y LinkedIn */
  footer .col-md-3 .icon-row-link{
    display: flex;
    align-items: center;
    gap: 10px;              /* separa icono y texto */
    margin: 0;              /* reseteo */
  }
  footer .col-md-3 .icon-row-link + .icon-row-link{
    margin-top: 14px;       /* espacio extra entre las dos líneas */
  }
}
/* ===== Footer móvil: centrar y separar IG/LinkedIn ===== */
@media (max-width: 767px){
  /* Centra cada línea (icono + texto) */
  footer .col-md-3.mb-4 .icon-row-link{
    display: flex;
    align-items: center;
    justify-content: center !important; /* fuerza centrado */
    gap: 10px;
    width: 100%;
    margin: 0; /* reseteo por si hay estilos previos */
  }

  /* Más espacio entre Instagram y LinkedIn */
  footer .col-md-3.mb-4 .icon-row-link + .icon-row-link{
    margin-top: 16px !important;
  }

  /* (Opcional) Evitar solape con botones flotantes */
  footer{ padding-bottom: 72px; }
}
/* ===== Carrusel MOBILE (≤767px) — estilos responsive tipo carousel-title/sub-title ===== */
@media (max-width: 767px){

  /* Opcional: centrado y caja suave detrás del texto */
  .slide-caption--mobile{
    position: absolute;
    left: 50%;
    top: 65%;
    transform: translate(-50%, -50%);
    width: min(92%, 520px);
    padding: 12px 16px;
    text-align: center;
    z-index: 3;
  }
.slide-caption--mobile.bg-soft{
  background: none !important;
  border-radius: 0 !important;
}
  /* H2: como .carousel-title, pero responsive con clamp() */
  .slide-caption--mobile h2{
    margin: 0 0 10px;
    font-weight: 800;                 /* fuerte como el título del tema */
    text-transform: uppercase;        /* .carousel-title usa uppercase */
    color: #fff !important;           /* blanco del tema */
    text-shadow: 1px 1px 2px #000;    /* sombra del tema */
    letter-spacing: .3px;
font-size: clamp(1.75rem, 6vw, 2.25rem); 
    line-height: 1.15;
  }

  /* P: como .carousel-sub-title, responsive con clamp() */
  .slide-caption--mobile p{
    margin: 0 auto;
    max-width: 90%;
    font-weight: 700;
    color: #fff !important;           /* blanco del tema */
    text-shadow: 1px 1px 1px #000;    /* sombra del tema */
font-size: clamp(1.125rem, 4.5vw, 1.375rem);  
    line-height: 1.35;
  }
}
/* ===== Header MOBILE (≤767px) — hamburguesa izq, logo centrado y más grande, barra más baja ===== */
@media (max-width: 767px){

  /* 0) Actualizar la variable de altura del header (para anclas) */
  :root{ --header-h-mobile: 68px; }  /* antes 80px */

  /* 1) Reducir altura de la franja blanca (navbar) */
  .header .navbar{
    min-height: 68px !important;           /* baja la barra */
    border-bottom: 1px solid rgba(0,0,0,.12);
  }

  /* 2) La “pista” que contiene hamburguesa + logo */
  .header .menu-container{
    position: relative !important;
    padding-left: 8px !important;          /* deja la hamburguesa bien a la izquierda */
    padding-right: 8px !important;
  }

  /* 3) Hamburguesa pegada a la izquierda y centrada verticalmente */
  .header .navbar-toggle{
    position: absolute !important;
    left: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
  }

  /* 4) Logo centrado en la barra y un poco más grande */
  .header .logo{
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    height: 56px;                           /* área útil dentro de los 68px de barra */
    display: flex; align-items: center; justify-content: center;
    margin: 0 !important;
  }
  .header .logo .logo-wrap .logo-img{
    /* agrandá/achicá a gusto estos dos números */
    max-height: 52px !important;            /* +4 px sobre lo usual */
    width: auto !important;
  }

  /* 5) Evitar que otros estilos cambien el layout en móvil */
  .header .navbar>.container{ width:100%; }
}
/* Header MOBILE – eliminar línea entre menú y carrusel */
@media (max-width: 767px){
  .header .navbar{
    border-bottom: 0 !important;   /* sin línea */
    box-shadow: none !important;    /* por si alguna sombra aporta el “bisel” */
    margin-bottom: 0 !important;
  }
  /* aseguramos que el carrusel no deje “gap” arriba */
  .carousel{ margin-top: 0 !important; }
}
/* Quitar la franjita entre header y carrusel (solo móvil) */
@media (max-width: 767px){
  .header{
    border-bottom: 0 !important;   /* anula el borde del <header> */
    box-shadow: none !important;    /* por si hay sombra residual */
  }
  .header .navbar{
    border-bottom: 0 !important;    /* ya lo tenías, lo reforzamos */
    margin-bottom: 0 !important;
  }
  .carousel{ margin-top: 0 !important; } /* evita cualquier gap del carrusel */
}
/* PARTNERS — versión mobile igual a CLIENTES */
@media (max-width: 767px){
  /* separaciones como clientes */
  #partners{ padding: 16px 0 8px; }

  /* título más compacto (mismo espíritu que clientes) */
  #partners h2{
    margin: 8px 0 14px;
    letter-spacing: .5px;
    font-weight: 800;
    font-size: clamp(1.10rem, 5.8vw, 1.60rem); /* ~18–26px */
    text-align: center;
  }

  /* contenedor y caja del carrusel (mismo comportamiento de fila) */
  #carrusel-contenido-partners{ overflow: hidden; }
  #carrusel-caja-partners{
    display: flex; align-items: center;
    gap: clamp(24px, 6.5vw, 40px); /* espacio entre logos, como clientes */
  }

  /* logos más chicos, sin B/N */
  #partners .carrusel-elemento img{
    height: clamp(34px, 10.5vw, 56px);  /* ~34–56px */
    width: auto; max-height: 56px; object-fit: contain;
    filter: none !important;            /* quita escala de grises */
    opacity: 1 !important;
  }
}

/* también en desktop/tablet por si alguna regla los pone en gris */
#partners .carrusel-elemento img{ filter: none !important; }
/* Mobile: centrar el título "¿Quiénes somos?" */
@media (max-width: 767px){
  #company .company-titre{
    text-align: center !important;   /* pisa el inline "left" */
    width: 100%;
    margin: 0 0 16px 0 !important;   /* mismo aire abajo del título */
  }
}
/* Solo móvil: mover el background vía ::before sin tocar nada más */
@media (max-width: 767px){
  #contacto{ position: relative; }

  #contacto::before{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;                 /* fondo detrás del contenido */
    background: inherit;        /* hereda la imagen/size/repeat del padre */
    background-position: left center !important; /* <-- AJUSTA AQUÍ */
    background-size: cover !important;
    background-repeat: no-repeat !important;
    pointer-events: none;
  }

  /* asegurar que el contenido quede por encima del pseudo-elemento */
  #contacto > *{ position: relative; z-index: 1; }
}
/* ===== Footer móvil centrado (#pie-de-pagina-final) ===== */
@media (max-width: 767px){
  /* Ocultar el logo de la 1ª columna (solo imagen) */
  #pie-de-pagina-final .col-md-4:first-child picture,
  #pie-de-pagina-final .col-md-4:first-child img{
    display:none !important;
  }

  /* Layout en columna y centrado perfecto */
  #pie-de-pagina-final .row{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    gap:22px !important;
    padding:0 16px !important;
  }

  /* Cols a ancho contenido, texto centrado */
  #pie-de-pagina-final .col-md-4{
    width:100% !important;
    max-width:640px !important;
    margin:0 auto !important;
    padding:0 !important;
    text-align:center !important;
  }

  /* Anular paddings/offsets heredados que empujan a la derecha */
  #pie-de-pagina-final .col-md-4:nth-child(2),
  #pie-de-pagina-final .col-md-4:nth-child(3){
    padding-left:0 !important;
    padding-right:0 !important;
  }
  #pie-de-pagina-final .col-md-4:first-child p{
    transform:none !important;
    margin-left:0 !important;
    width:100% !important;
    text-align:center !important;
  }

  /* Cualquier fila interna en flex: centrar contenido */
  #pie-de-pagina-final div[style*="display: flex"],
  #pie-de-pagina-final [class*="social"]{
    justify-content:center !important;
  }
}

/* ===== Mobile Menu overlay (≤ 991px) ===== */
@media (max-width: 991.98px){
  /* on masque l'ancien collapse bootstrap en mobile */
  .nav-collapse, .navbar-collapse { display: none !important; }

  /* bouton burger existant: on le garde visible */
  .navbar-toggle { display: inline-block !important; }

  /* Overlay */
  .mm{
    position: fixed; inset: 0;
    background: #ffffff;
    transform: translateX(100%);
    transition: transform .28s ease;
    z-index: 99999;
  }
  .mm.is-open{ transform: translateX(0); }

  .mm__header{
    display:flex; align-items:center; justify-content:space-between;
    padding: 14px 18px; border-bottom: 1px solid #eee;
  }
  .mm__brand img{ height: 36px; width:auto; }

  .mm__close{
    appearance:none; border:0; background:transparent; font-size:28px;
    line-height:1; padding:4px; cursor:pointer; color:#3b6e62;
  }

  .mm__nav{ padding: 8px 6px 24px; }
  .mm__list, .mm__submenu{ list-style:none; margin:0; padding:0; }

  .mm__link, .mm__toggle{
    display:block; width:100%;
    text-align:left;
    padding: 14px 18px;
    font-size: 20px; font-weight:700; letter-spacing:.02em;
    color:#285b53; text-decoration:none; background:#fff; border:0;
    border-bottom:1px solid #f0f0f0;
  }
  .mm__toggle{ cursor:pointer; }
  .mm__toggle .chev{ float:right; transition: transform .2s ease; color:#96a3a0; }

  .mm__submenu{
    overflow:hidden; max-height:0; transition:max-height .25s ease;
    background:#fafafa; border-bottom:1px solid #eee;
  }
  .mm__sublink{
    display:block; padding:12px 22px; font-size:17px; color:#234b45;
    text-decoration:none; border-top:1px dashed #eee;
  }
  .mm__sublink:active, .mm__sublink:focus{ background:#e8f1ef; }

  /* état ouvert d’un sous-menu */
  .has-sub.open > .mm__submenu{ max-height: 900px; }
  .has-sub.open > .mm__toggle .chev{ transform: rotate(180deg); }

  /* Evite le défilement de la page derrière le menu */
  body.mm-lock{ overflow:hidden !important; }

  /* garde la correction d’ancre sous header fixe */
  html{ scroll-padding-top: var(--header-h-mobile, 68px); }
  #servicios, #contacto{ scroll-margin-top: var(--header-h-mobile, 80px); }
}

/* --- Mobile menu: état par défaut --- */
#mobile-menu{ display:none; }

/* Desktop: ne jamais l'afficher */
@media (min-width: 992px){
  #mobile-menu{ display:none !important; }
}

/* Mobile: l'afficher seulement quand .is-open est présent */
@media (max-width: 991px){
  #mobile-menu{
    position: fixed; inset: 0; z-index: 9999;
    display: none;                       /* caché par défaut */
    background: rgba(0,0,0,.55);         /* overlay */
  }
  #mobile-menu.is-open{ display:block; } /* ouvert */
  body.mm-lock{ overflow:hidden; }       /* empêcher le scroll du body */

  /* panneau blanc + liste basique */
  #mobile-menu .mm__panel{
    position:absolute; left:0; right:0; top:0;
    background:#fff; max-height:100vh; overflow:auto;
    padding: 14px 18px 28px;
  }
  #mobile-menu ul{ list-style:none; margin:0; padding:0; }
  #mobile-menu li{ border-bottom:1px solid #eee; }
  #mobile-menu a{ display:block; padding:16px 6px; font-size:18px; color:#275d51; }

  /* sous-menus */
  #mobile-menu .mm__toggle{
    float:right; border:0; background:transparent; font-size:20px; line-height:1;
  }
  #mobile-menu .mm__submenu{ padding-left:10px; }
  #mobile-menu .mm__submenu[hidden]{ display:none !important; }
}
/* ===== Burger visible y bonito (solo mobile) ===== */
@media (max-width: 991.98px){

  /* Asegura contexto para posición absoluta */
  .header .navbar,
  .header .menu-container,
  .header .navbar-header { position: relative; }

  /* Mostrar el burger, cuadrado, alineado al centro-izquierda */
  .navbar-toggle{
    display:inline-flex !important;
    align-items:center; justify-content:center;
    position:absolute; left:8px; top:50%; transform:translateY(-50%);
    width:40px; height:40px;
    padding:0; margin:0;
    border:1px solid #2d6b5e; border-radius:8px;
    background:#fff;
    z-index: 1001;           /* sobre el header */
    box-shadow: 0 1px 2px rgba(0,0,0,.08);
  }

  /* Las tres rayas */
  .navbar-toggle .icon-bar{
    display:block; width:22px; height:2px;
    background:#2d6b5e !important;
    margin:3px 0; border-radius:1px;
  }

  /* Si queda tapado por el logo, empuja un poco el logo hacia la derecha */
  .header .logo, .header .navbar-brand{
    padding-left:56px; /* deja espacio para el botón a la izquierda */
  }
}

/* Desktop: por si acaso, ocultamos el burger */
@media (min-width: 992px){
  .navbar-toggle{ display:none !important; }
}
/* ===== Menú móvil: tipografía homogénea + mayúsculas y alineación ===== */
@media (max-width: 991px){
  /* Quita márgenes/list-style del UL */
  #mobile-menu .mm__list{
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* Cada fila principal */
  #mobile-menu .mm__item{
    border-bottom: 1px solid rgba(0,0,0,.08);
  }

  /* Enlace de primer nivel: mayúsculas y alineado */
  #mobile-menu .mm__link{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16px 18px;
    text-decoration: none;
    color: #2a5d52;                 /* verde de la marca */
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;      /* << MAYÚSCULAS */
    text-align: left;               /* alineación homogénea */
  }

  /* Botón chevron para desplegar submenú */
  #mobile-menu .mm__toggle{
    margin-left: 12px;
    border: 0;
    background: transparent;
    width: 40px; height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  #mobile-menu .mm__chevron{
    display: inline-block;
    transition: transform .2s ease;
  }
  #mobile-menu .has-sub.open > .mm__link .mm__chevron{
    transform: rotate(180deg);
  }

  /* Submenú */
  #mobile-menu .mm__submenu{
    list-style: none;
    margin: 0;
    padding: 4px 0 10px 12px; /* sangría uniforme */
  }
  #mobile-menu .mm__submenu a{
    display: block;
    padding: 10px 18px;
    font-weight: 600;
    text-transform: none;       /* subitems en Caja Normal */
    color: #2a5d52;
    text-decoration: none;
  }

  /* Bloqueo de scroll del body cuando el panel está abierto */
  body.mm-lock{ overflow: hidden; }
}
@media (max-width: 991px){

  /* Cada item principal en fila */
  #mobile-menu .mm__item{
    display:flex;
    align-items:center;
    position: relative;
    border-bottom: 1px solid rgba(0,0,0,.08);
  }

  /* El enlace ocupa el ancho; texto en mayúsculas y sin desbordes */
  #mobile-menu .mm__link{
    flex: 1 1 auto;
    display:block;
    padding:16px 18px;
    text-decoration:none;
    color:#2a5d52;
    font-weight:700;
    letter-spacing:.4px;
    text-transform:uppercase;
    overflow-wrap:anywhere;     /* evita que se salga */
    white-space:normal;         /* por si algún reset lo pone en nowrap */
  }

  /* Botón chevron suelto, a la derecha */
  #mobile-menu .mm__toggle{
    flex: 0 0 auto;
    margin-right: 8px;
    width:40px; height:40px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:0; background:transparent;
  }

  /* Rotación del chevron cuando está abierto */
  #mobile-menu .mm__chevron{ transition: transform .2s ease; }
  #mobile-menu .has-sub.open .mm__chevron{ transform: rotate(180deg); }

  /* Submenú con sangría limpia */
  #mobile-menu .mm__submenu{
    list-style:none;
    margin:0;
    padding:6px 0 12px 12px;
  }
  #mobile-menu .mm__sublink{
    display:block;
    padding:10px 18px;
    text-decoration:none;
    color:#2a5d52;
    font-weight:600;
  }
}
/* ====== MENÚ MÓVIL: fila, texto y chevron ====== */
@media (max-width: 991px){
  /* La fila (texto + chevron) en línea */
  #mobile-menu .mm__row{
    display:flex;
    align-items:center;
    gap: 8px;
  }

  /* El enlace/etiqueta ocupa todo el ancho disponible */
  #mobile-menu .mm__row > a,
  #mobile-menu .mm__row .mm__txt,
  #mobile-menu .mm__row .mm__label{
    flex: 1 1 auto;
    min-width: 0;                 /* permite elipsis */
    white-space: nowrap;          /* evita salto de línea */
    overflow: hidden;
    text-overflow: ellipsis;      /* si no entra, agrega … */
  }

  /* Chevron más grande y con zona táctil amplia */
  #mobile-menu .mm__toggle{
    flex: 0 0 44px;
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border: 0; background: none;
    cursor: pointer;
  }
  /* Dibujamos el chevron con tipografía para asegurar tamaño */
  #mobile-menu .mm__toggle::before{
    content: "▾";
    font-size: 22px;
    line-height: 1;
    color: #2a5d51;               /* verde del tema */
  }
  #mobile-menu .has-sub.open > .mm__row .mm__toggle::before{
    content:"▴";
  }

  /* ====== ACORDEÓN: submenú debajo, no a la derecha ====== */
  #mobile-menu .mm__submenu{
    position: static !important;
    inset: auto !important;
    width: auto !important;
    display: block !important;    /* permanece en el flujo */
    max-height: 0;                /* colapsado por defecto */
    overflow: hidden;
    transition: max-height .28s ease;
    padding: 0 0 0 16px;          /* leve sangría */
    border-left: 2px solid rgba(0,0,0,.06);
  }
  #mobile-menu .has-sub.open > .mm__submenu{
    max-height: 800px;            /* suficientemente grande */
    padding-top: 8px;
  }

  /* (Opcional) Ajuste fino para el texto largo únicamente */
  #mobile-menu .mm__item--soluciones .mm__row > a{
    letter-spacing: .5px;
    font-size: 1.02rem;           /* un toque más chico si lo necesitas */
  }
}
/* ===== MOBILE MENU – correcciones de click + offset de anclas ===== */
@media (max-width: 991.98px){
  /* altura real del header en móvil y compensación de anclas */
  :root{ --header-h-mobile: 68px; }
  html{ scroll-padding-top: var(--header-h-mobile); }
  #company, #servicios, #contacto{ scroll-margin-top: var(--header-h-mobile); }

  /* que el chevron no tape el link */
  #mobile-menu .has-sub{ position: relative; }
  #mobile-menu .mm__link{ padding-right: 56px; }  /* deja hueco para el chevron */
  #mobile-menu .mm__toggle{
    position: absolute;
    right: 12px; top: 50%;
    transform: translateY(-50%);
    font-size: 24px;               /* chevron un poco más grande */
    padding: 12px;
    line-height: 1;
  }
}
/* ===== PATCH: anclas bajo header fijo ===== */
:root{
  --header-h-desktop: 110px;   /* ajusta a tu altura real en desktop */
  --header-h-mobile:  68px;    /* ajusta a tu altura real en móvil   */
}
html{ scroll-padding-top: var(--header-h-desktop); }
#company, #servicios, #contacto{ scroll-margin-top: var(--header-h-desktop); }

@media (max-width: 991.98px){
  html{ scroll-padding-top: var(--header-h-mobile); }
  #company, #servicios, #contacto{ scroll-margin-top: var(--header-h-mobile); }
}

/* ===== PATCH: menú móvil – fila, texto y chevron alineados + acordeón debajo ===== */
@media (max-width: 991.98px){
  /* Cada item principal en una fila (texto + chevron) */
  #mobile-menu .mm__item{
    display:flex;
    align-items:center;
    position:relative;
    border-bottom:1px solid rgba(0,0,0,.08);
  }

  /* Fila interior con texto + chevron */
  #mobile-menu .mm__row{
    display:flex;
    align-items:center;
    gap:8px;
    width:100%;
  }

  /* Texto del link: mayúsculas, sin saltos raros y con elipsis si no entra */
  #mobile-menu .mm__row > a,
  #mobile-menu .mm__row .mm__txt,
  #mobile-menu .mm__row .mm__label{
    flex:1 1 auto;
    min-width:0;
    padding:16px 18px;
    text-decoration:none;
    color:#2a5d52;
    font-weight:700;
    letter-spacing:.4px;
    text-transform:uppercase;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  /* Botón del chevron: siempre a la derecha y centrado verticalmente */
  #mobile-menu .mm__toggle{
    position:absolute;
    right:12px; top:50%;
    transform:translateY(-50%);
    width:44px; height:44px;
    display:grid; place-items:center;
    border:0; background:none; cursor:pointer;
  }
  #mobile-menu .mm__toggle::before{
    content:"▾";
    font-size:22px; line-height:1; color:#2a5d51;
  }
  #mobile-menu .has-sub.open > .mm__row .mm__toggle::before{ content:"▴"; }

  /* Submenú: DEBAJO del título, no lateral */
  #mobile-menu .mm__submenu{
    position:static !important;
    inset:auto !important;
    width:auto !important;
    display:block !important;
    max-height:0;                /* colapsado por defecto */
    overflow:hidden;
    transition:max-height .28s ease;
    padding:0 0 0 16px;          /* sangría */
    border-left:2px solid rgba(0,0,0,.06);
  }
  #mobile-menu .has-sub.open > .mm__submenu{
    max-height:800px;            /* suficientemente grande para su contenido */
    padding-top:8px;
  }

  /* (Opcional) pequeña corrección para el texto largo "SOLUCIONES RENOVABLES" */
  #mobile-menu .mm__item--soluciones .mm__row > a{
    letter-spacing:.5px;
    font-size:1.02rem;
  }
}
/* ===== Offset de anclas bajo header fijo (Desktop + Mobile) ===== */
:root{
  --header-h-desktop: 110px;   /* ajusta si tu header cambia */
  --header-h-mobile:  68px;    /* ajusta si tu header cambia */
}

/* Desktop: compensa el header fijo */
html{ scroll-padding-top: var(--header-h-desktop); }
#company, #servicios, #contacto{ scroll-margin-top: var(--header-h-desktop); }

/* Mobile: compensa el header móvil */
@media (max-width: 991.98px){
  html{ scroll-padding-top: var(--header-h-mobile); }
  #company, #servicios, #contacto{ scroll-margin-top: var(--header-h-mobile); }
}
/* === FIX: chevron alineado en la fila del título (solo móvil) === */
@media (max-width: 991.98px){
  /* La fila del título define el contexto para el absolute */
  #mobile-menu .mm__row{
    position: relative; /* <- clave */
  }

  /* Botón chevron: absoluto respecto a .mm__row, sin floats heredados */
  #mobile-menu .mm__toggle{
    position: absolute !important;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border: 0; background: none;
    float: none !important;          /* cancela reglas antiguas */
  }

  /* Dejar hueco para que el texto no choque con el chevron */
  #mobile-menu .mm__row > a{ padding-right: 56px; }
}
/* ===== Slider HOME – flechas más chicas SOLO en móvil ===== */
@media (max-width: 767px){

  /* Mantiene un área táctil cómoda pero reduce el icono */
  .carousel .carousel-control{
    width: 44px;
    height: 44px;
    top: 50%;
    transform: translateY(-50%);
    opacity: .9;
    text-shadow: none;
  }
  .carousel .left.carousel-control{  left: 8px;  }
  .carousel .right.carousel-control{ right: 8px; }

  /* Si las flechas son fuentes (FontAwesome/Glyphicon/Bootstrap) */
  .carousel .carousel-control .fa,
  .carousel .carousel-control .glyphicon,
  .carousel .carousel-control .icon-prev,
  .carousel .carousel-control .icon-next{
    font-size: 18px;          /* << ajustá este número si querés aún más chico/grande */
    line-height: 22px;
  }

  /* Si las flechas son imágenes o SVG dentro del control */
  .carousel .carousel-control img,
  .carousel .carousel-control svg{
    width: 18px;              /* << ajustá aquí para imágenes */
    height: auto;
    display: inline-block;
  }

  /* Si el tema dibuja la flecha con ::before */
  .carousel .carousel-control::before{
    font-size: 18px;          /* << mismo tamaño del icono */
  }
}
/* === Slider home: chevrons más chicos en móvil === */
@media (max-width: 767.98px){
  /* achica el ícono del chevron */
  :root{
    --chev-size: 22px !important;     /* prueba 20–26 según gusto */
  }

  /* achica el contenedor táctil del botón */
  #hero-slider .nav{
    width: 38px !important;
    height: 38px !important;
  }

  /* por si alguna regla interna fija tamaño del ícono */
  #hero-slider .nav .glyphicon{
    font-size: var(--chev-size) !important;
    line-height: 1 !important;
  }

  /* opcional: acerca un poco a los bordes */
  #hero-slider .nav.prev{  left: 10px !important; }
  #hero-slider .nav.next{ right: 10px !important; }
}
/* === Contact modal (#contactModal) — texte lisible dans le formulaire === */
#contactModal textarea,
#contactModal input[type="text"],
#contactModal input[type="email"],
#contactModal input[type="tel"],
#contactModal .form-control {
  color: #213a35 !important;          /* texte foncé */
  background-color: #fff !important;  /* fond blanc */
  caret-color: #213a35;               /* curseur visible */
}

/* Focus cohérent */
#contactModal .form-control:focus,
#contactModal textarea:focus {
  color: #1b3130 !important;
  background-color: #fff !important;
  border-color: #2a5d52 !important;   /* vert du thème (optionnel) */
  box-shadow: none !important;
  outline: none !important;
}

/* Placeholders lisibles */
#contactModal textarea::placeholder,
#contactModal input::placeholder {
  color: #7e8f8b !important;
  opacity: 1;
}

/* (Optionnel) autofill Chrome/iOS */
#contactModal input:-webkit-autofill,
#contactModal textarea:-webkit-autofill {
  -webkit-text-fill-color: #213a35 !important;
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
          box-shadow: 0 0 0 1000px #fff inset;
}
/* ===== Footer MOBILE ===== */
.footer-mobile{ display:none; }

@media (max-width: 767px){
  /* Ocultamos el footer desktop sólo en mobile */
  #pie-de-pagina-final{ display:none !important; }

  /* Mostramos el nuevo */
  .footer-mobile{
    display:block;
    background:#2e6c60;        /* verde del tema */
    color:#fff;
    text-align:center;
    padding: 22px 16px 92px;    /* margen inferior por botones flotantes */
  }

  .footer-mobile .fm-wrapper{
    max-width: 640px;
    margin: 0 auto;
  }

  .footer-mobile .fm-lead{
    margin: 6px auto 18px;
    font-size: 16px;
    line-height: 1.45;
    max-width: 46ch;
  }

  .footer-mobile .fm-title{
    margin: 14px 0 10px;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: .4px;
  }

  .footer-mobile .fm-list{
    list-style:none; margin:0 0 8px; padding:0;
  }
  .footer-mobile .fm-item{
    display:flex;
    align-items:flex-start;
    justify-content:center;     /* centro icono + texto */
    gap: 12px;
    margin: 8px 0;
    text-align:left;            /* mejora lectura de párrafos de dirección */
  }

  .footer-mobile .fm-ico-img{
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex: 0 0 22px;
    /* Si tus íconos del desktop ya son blancos, dejá el filtro en none */
    filter: none !important;
  }

  .footer-mobile .fm-item a{
    color:#fff; text-decoration:none; font-weight:700;
  }
  .footer-mobile .fm-block p{ margin:.25rem 0 0; }

  .footer-mobile .fm-social{
    list-style:none; margin: 10px 0 0; padding:0;
  }
  .footer-mobile .fm-social-link{
    display:flex; align-items:center; justify-content:center;
    gap: 10px; padding: 8px 0;
    color:#fff; text-decoration:none; font-weight:700;
  }

  .footer-mobile .fm-copy{
    margin: 16px 0 0; font-size: 12px; opacity: .9;
  }
}
/* ==== FOOTER MÓVIL: texto e íconos en blanco y centrado ==== */
@media (max-width: 767.98px){

  /* color y centrado para todo el contenido del bloque verde */
  #pie-de-pagina-final,
  #pie-de-pagina-final *{
    color:#fff !important;
    text-align:center !important;
  }

  /* títulos “CONTÁCTANOS” y “REDES SOCIALES” un poco más fuertes */
  #pie-de-pagina-final h2,
  #pie-de-pagina-final h3{
    color:#fff !important;
    font-weight:800 !important;
    letter-spacing:.3px;
  }

  /* filas con icono + texto centradas y con separación uniforme */
  #pie-de-pagina-final .icon-row-link{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:10px !important;
    margin:6px 0 !important;
  }

  /* Íconos raster (PNG/SVG) a blanco */
  #pie-de-pagina-final .icon-row-link img,
  #pie-de-pagina-final .social img{
    width:22px !important;
    height:22px !important;
    filter: brightness(0) invert(1) !important; /* vuelve el icono blanco */
    opacity: .98;
  }

  /* Íconos de librerías (simple-line-icons, font icons, etc.) a blanco */
  #pie-de-pagina-final [class^="icon-"],
  #pie-de-pagina-final [class*=" icon-"],
  #pie-de-pagina-final .glyphicon,
  #pie-de-pagina-final .fa{
    color:#fff !important;
  }

  /* enlaces en blanco (por si alguna hoja los dejaba grises) */
  #pie-de-pagina-final a{
    color:#fff !important;
    text-decoration:none;
  }
  #pie-de-pagina-final a:hover{ opacity:.9; }
}

/* ===== Footer móvil (≤767.98px): pie-grops SIEMPRE blanco ===== */
@media (max-width: 767.98px){
  /* Muestra pie-grops y oculta el footer desktop en móvil */
  #pie-grops{ display:block !important; }
  #pie-de-pagina-final{ display:none !important; }

  /* TODO texto/enlace en blanco (pisa cualquier color previo) */
  #pie-grops,
  #pie-grops *{
    color: #fff !important;
    -webkit-text-fill-color: #fff !important; /* por si algún user-agent usa esto */
  }
  #pie-grops a,
  #pie-grops a:visited,
  #pie-grops a:active{ color:#fff !important; text-decoration:none; }

  /* SVG inline (si los hubiera): relleno y trazo blancos */
  #pie-grops svg,
  #pie-grops svg *{
    fill: #fff !important;
    stroke: #fff !important;
  }

  /* Íconos cargados como <img> (instagram/linkedin/ubicación/whatsapp) a blanco */
  #pie-grops img{
    filter: brightness(0) invert(1) !important;
    opacity: .98;
  }

  /* Si tenés alguna foto/logo a color dentro de pie-grops, EXCLUÍLA así:
     #pie-grops img[src*="logo-color"]{ filter:none !important; }  */
}
/* === Footer móvil: forzar texto blanco en TODO el bloque === */
@media (max-width: 767.98px){
  /* Aplica a todo dentro de #pie-de-pagina-final */
  #pie-de-pagina-final,
  #pie-de-pagina-final *{
    color:#fff !important;
    -webkit-text-fill-color:#fff !important; /* iOS/Android WebKit */
  }

  /* Asegura también links/strong y estados de hover */
  #pie-de-pagina-final a,
  #pie-de-pagina-final a *,
  #pie-de-pagina-final b,
  #pie-de-pagina-final strong{
    color:#fff !important;
  }
  #pie-de-pagina-final a:hover{ opacity:.9; }
}
#pie-de-pagina-final, #pie-grops, #pie-de-pagina-final *, #pie-grops *{ color:#fff !important; }
/* ===== Móvil: reducir logos y altura en Partners / Clientes ===== */
@media (max-width: 767px){
  .footer-mobile .fm-sede-link{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:#fff !important;
    text-decoration:none !important;
    line-height:1 !important;
  }
  .footer-mobile .fm-sede-link:visited{ color:#fff !important; }
  .footer-mobile .fm-sede-link:hover{ opacity:.92; }
}

@media (max-width: 767px){
  /* menos aire del bloque */
  #partners, #clientes{
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  /* logos más chicos (ajustá 32→28 si los querés aún más chicos) */
  #partners img, #clientes img{
    max-height: 32px !important;
    width: auto !important;
    height: auto !important;
  }

  /* menos relleno por item */
  #partners .logo-item, #clientes .logo-item{
    padding: 4px 6px !important;
  }

  /* forzar que el carrusel no fije alturas grandes si usa slider */
  #partners .swiper-container, #clientes .swiper-container,
  #partners .slick-slider,     #clientes .slick-slider{
    height: auto !important;
  }
  #partners .swiper-slide, #clientes .swiper-slide,
  #partners .slick-slide,  #clientes .slick-slide{
    height: auto !important;
    padding: 6px !important;
  }
}
/* Compactar altura de PARTNERS/CLIENTES en móvil */
@media (max-width: 767px){
  #partners{ padding: 10px 0 !important; }                 /* menos alto total */
  #partners h2{ margin: 6px 0 10px !important; }          /* título más compacto */

  /* carrusel más “finito” */
  #partners .logo-stepper{ padding: 0 !important; }
  #partners .logo-viewport{ padding: 0 !important; margin: 0 auto !important; }
  #partners .logo-track{ gap: clamp(16px,4.5vw,26px) !important; }
  #partners .logo-item{ margin: 0 !important; }
  #partners .logo-item img{
    max-height: 56px !important;                          /* antes ~56px */
    height: auto !important; width: auto !important;
    object-fit: contain !important;
  }
}
/* Quitar cualquier línea/sombra entre header y carrusel (móvil) */
@media (max-width: 767px){
  .header,
  .header .navbar,
  #carousel-example-generic,
  .carousel,
  .carousel-inner{
    border-top: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    margin-top: 0 !important;
  }
}
/* Carruseles Partners / Clientes: bajar la altura en móvil */
@media (max-width: 767px){
  #partners .logo-viewport,
  #clientes .logo-viewport{
    height: 64px !important;     /* <-- ajustá 56–72px a gusto */
    min-height: 0 !important;    /* anula min-heights del tema */
    padding: 0 !important;       /* por si el tema mete relleno */
  }

  /* opcional: que los logos acompañen la nueva altura */
  #partners .logo-item img,
  #clientes .logo-item img{
    max-height: 38px !important; /* probá 34–42px */
  }

  /* (opcional) menos aire vertical en la sección */
  #partners h2, #clientes h2{ margin: 12px 0 8px !important; }
  #partners, #clientes{ padding: 6px 0 !important; }
}
/* === FIXS FINALES MOBILE (home) === */
@media (max-width: 767px){

  /* 1) Quitar “franjita” arriba del slider */
  #carousel-example-generic,
  .carousel,
  .carousel-inner{
    background: transparent !important;
    margin-top: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  .header .navbar{ margin-bottom:0 !important; border-bottom:0 !important; box-shadow:none !important; }

  /* 2) Compactar Partners y Clientes (menos alto) */
  #partners, #clientes{
    padding: 6px 0 8px !important;
  }
  #partners > h2, #clientes > h2{
    margin: 10px 0 8px !important;
    font-size: 1rem !important;
  }
 
}
@media (max-width: 767px){
  #carousel-example-generic{ background: transparent !important; }
}


  /* opcional: que los logos acompañen la nueva altura */
  #partners .logo-item img,
  #clientes .logo-item img{
    max-height: 38px !important; /* probá 34–42px */
  }

  /* (opcional) menos aire vertical en la sección */
  #partners h2, #clientes h2{ margin: 12px 0 8px !important; }
  #partners, #clientes{ padding: 6px 0 !important; }
@media (max-width: 767px){
  /* Cambiar imagen de fondo del bloque decorativo dentro de #company */
#company::before{
  content:"";
  position: fixed;
  inset: 0;
  background: url("img/tu-imagen.jpg") center/cover no-repeat;
  z-index: -1; /* detrás del contenido */
}
}
/* === GESTIÓN (móvil) — ajustes puntuales === */
@media (max-width: 767px){

  /* 1) Header: logo centrado y burger a la izquierda */
  .header .menu-container{ position: relative !important; }
  .header .navbar-toggle{
    position: absolute !important;
    left: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
  }
  .header .logo{
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    height: 56px;
    display: flex; align-items: center; justify-content: center;
  }
  .header .logo .logo-img{
    max-height: 52px !important;
    width: auto !important;
  }

  /* 2) #servicesGes: centrar los dos títulos */
  #servicesGes h3{
    text-align: center !important;
    margin: 0 0 16px !important;
  }
  /* si algún contenedor trae text-align:left inline, lo pisamos */
  #servicesGes [class*="col-"]{ text-align: center !important; }

  /* 3) “Beneficios clave”: subir el bloque y compactar */
  #servicios-beneficios{ margin-bottom: 8px !important; padding-bottom: 20px !important; }
  #FAQ_INTEGRA{ padding-top: 12px !important; margin-top: 0 !important; }
  #FAQ_INTEGRA .margin-b-40{ margin: 8px 0 12px !important; } /* fila del título */

  /* 4) Tarjetas a ancho completo + títulos centrados + menos alto */
  #FAQ_INTEGRA .col-sm-4{
    width: 100% !important;
    float: none !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  #FAQ_INTEGRA .benefitsSGE-card{
    height: auto !important;        /* anula el height inline 325px */
    min-height: 180px !important;
    padding: 16px 14px !important;
  }
  #FAQ_INTEGRA .benefitsSGE-card h3{
    text-align: center !important;
    margin: 8px 0 6px !important;
  }
  #FAQ_INTEGRA .benefitsSGE-card p{
    text-align: center !important;
    margin: 0 !important;
  }
}

/* ===== GESTION (móvil) – fixes header + títulos + tarjetas ===== */
@media (max-width: 767px){



  /* 3) “Beneficios clave”: acercar al bloque anterior */
  #FAQ_INTEGRA{ padding-top: 10px !important; margin-top: 0 !important; }
  #FAQ_INTEGRA h2{
    text-align: center !important;
    white-space: nowrap !important;
    margin: 8px 0 12px !important;
  }

  /* 4) Tarjetas: ancho completo + altura más baja */
  #FAQ_INTEGRA .col-sm-4{
    width: 100% !important;
    float: none !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  #FAQ_INTEGRA .benefitsSGE-card{
    height: auto !important;           /* anula el inline 325px */
    min-height: 170px !important;      /* ajustá 160–190 si querés */
    padding: 16px 14px !important;
  }
  #FAQ_INTEGRA .benefitsSGE-card h3{
    text-align: center !important;
    margin: 8px 0 6px !important;
  }
  #FAQ_INTEGRA .benefitsSGE-card p{
    text-align: center !important;
    margin: 0 !important;
  }
}


/* Footer móvil: centrar el primer texto bajo el logo */
@media (max-width: 767px){
  #pie-de-pagina-final .col-md-4:first-child p{
    text-align: center !important;
    margin: 0 !important;
    transform: none !important;
    width: 100% !important;
  }
}
/* Compensar header fijo cuando navego con anclas en móvil */
@media (max-width: 767px){
  #company,
  #servicios,
  #contacto {
    /* bajá este número si sigue quedando muy abajo, subilo si queda tapado */
    scroll-margin-top: 40px !important;
  }
}

/* === HEADER: centrar logo por viewport (solo móvil) === */
@media (max-width: 767px){

  /* El contenedor del nav ocupa todo el ancho y sin padding lateral */
  .header .navbar > .container{
    width: 100vw !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
  }

  /* Pista del header (burger + logo) con contexto para posicionar */
  .header .menu-container{
    position: relative !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* LOGO centrado por viewport, no por la columna */
  .header .logo{
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    padding-left: 0 !important;          /* anula el corrimiento */
  }

  /* Por si el tema usa .navbar-brand para el logo */
  .header .navbar-brand{
    padding-left: 0 !important;
  }
}

/* MÓVIL: mostrar solo el footer mobile y ocultar el desktop */
@media (max-width: 767px){
  /* coincide con id exacto y también con el id que tiene un espacio final */
  #footer-mobile, [id="footer-mobile "]{ display:block !important; }
  #pie-de-pagina-final, [id="pie-de-pagina-final "]{ display:none !important; }
}