/* ================================================
   Extracted inline <style> blocks from index.html
   Move this file to your server at: css/index.inline.styles.css
   IMPORTANT: Keep this stylesheet LAST in the <head> for identical cascade.
   ================================================ */

/* ===== Inlined <style> block #1 (extracted) ===== */
/* Desplazar la columna de mapas a la derecha solo en desktop (≥992px) */
@media (min-width: 992px){
  footer .contact-section .footer-seperator > .row > .col-md-6:last-child{
    padding-left: 64px; /* ajustá este valor: 24–64px según te guste */
  }
}

/* En pantallas chicas se mantiene pegado (opcional, por claridad) */
@media (max-width: 991px){
  footer .contact-section .footer-seperator > .row > .col-md-6:last-child{
    padding-left: 0;
  }
}


/* ===== Inlined <style> block #2 (extracted) ===== */
/* --- 1. Corrections pour la section SERVICIOS --- */

/* On force la largeur des blocs blancs */

#servicios .service-box {
  flex-basis: 25% !important; /* ANCHO: cambia 24% por 32%, 49%, 100%, etc. */
  width: 25% !important;      /* ANCHO: mismo valor que arriba */
  min-height: 500px !important; /* o height: 420px !important; si la quieres fija */
}


/* On force le centrage du bloc "Leer más" */
#servicios .services-arrow {
  width: 200%;
  text-align: center !important; /* Force le centrage du texte et de la flèche */
  margin-top: auto; /* Empousse le bloc vers le bas */
}

/* On s'assure que le paragraphe lui-même est centré */
#servicios .services-arrow p.text {
  text-align: center !important;
}


/* --- 2. Activation de l'image de fond pour la section CONTACTO --- */

/* Le sélecteur #contacto garantit une priorité maximale */
#contacto .contact-section-new {
  position: relative; /* Indispensable pour la superposition */
  background-image: var(--bg-img); /* Utilise la variable CSS de votre HTML */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  padding: 80px 0; /* Un peu d'espace pour la lisibilité */
}
/* CONTACTO : restaurer UNIQUEMENT l’image de fond */
#contacto .contact-section-new{
  background-image: var(--bg-img) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* Optionnel : Ajoute une surcouche sombre pour que le formulaire blanc ressorte mieux */


/* On s'assure que le contenu (formulaire, carte) est bien visible par-dessus */
#contacto .contact-section-new .container {
  position: relative;
  z-index: 2;
}


/* ===== Inlined <style> block #3 (extracted) ===== */
/* --- 1. Corrections pour la section SERVICIOS --- */

/* On force la largeur des blocs blancs */
#servicios .service-box {
  flex-basis: 24% !important; /* Utiliser flex-basis pour plus de robustesse */
  width: 24% !important;
}

/* On force le centrage du bloc "Leer más" */
#servicios .services-arrow {
  width: 100%;
  text-align: center !important; /* Force le centrage du texte et de la flèche */
  margin-top: auto; /* Empousse le bloc vers le bas */
}

/* On s'assure que le paragraphe lui-même est centré */
#servicios .services-arrow p.text {
  text-align: center !important;
}


/* ===== Inlined <style> block #4 (extracted) ===== */
/* Placeholders de #contacto : gris + foncé et en gras */
#contacto input::placeholder,
#contacto textarea::placeholder{
  color:#9aa5a1 !important;   /* gris plus foncé */
  font-weight:700 !important; /* gras */
  opacity:1;
}

/* Prefixes */
#contacto input::-webkit-input-placeholder,
#contacto textarea::-webkit-input-placeholder{
  color:#9aa5a1 !important;
  font-weight:700 !important;
}
#contacto input:-ms-input-placeholder,
#contacto textarea:-ms-input-placeholder{
  color:#9aa5a1 !important;
  font-weight:700 !important;
}
#contacto input::-ms-input-placeholder,
#contacto textarea::-ms-input-placeholder{
  color:#9aa5a1 !important;
  font-weight:700 !important;
}

/* "Placeholder" pour <select> (option disabled/selected) */
#contacto select:invalid{
  color:#9aa5a1 !important;
  font-weight:700 !important;
}
#contacto option[disabled][selected]{
  color:#9aa5a1 !important;
  font-weight:700 !important;
}


/* ===== Inlined <style> block #5 (extracted) ===== */
/* CONTACTO: alinear los 2 mapas a la derecha dentro de su columna */
@media (min-width: 992px){
  #contacto .maps-row{
    max-width: 520px;                 /* ajustá el ancho del bloque total */
    margin-left: auto !important;     /* empuja el conjunto a la derecha */
  }
}


/* ===== Inlined <style> block #6 (extracted) ===== */
/* CONTACTO — overlay directo sobre el background (sin tocar el texto) */
#contacto .contact-section-new{
  /* superpone una capa oscura sobre tu var(--bg-img) */
  background-image:
    linear-gradient(rgba(0,0,0,.48), rgba(0,0,0,.48)),
    var(--bg-img) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-blend-mode: normal !important;
}


/* ===== Inlined <style> block #7 (extracted) ===== */
/* Ajusta estos valores si tu botón de WhatsApp tiene otro tamaño/posición */
  .btn-top-fixed{
    position: fixed;
    bottom: 15px;             /* misma altura que WhatsApp */
    right: 86px;              /* 24px (margen) + ~60px (WhatsApp) + 12px (separación) */
    width: 50px;              /* tamaño del PNG/JPG que me pasaste */
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;            /* por encima de todo */
    cursor: pointer;
    transition: transform .2s, opacity .2s;
    opacity: .95;
  }
  .btn-top-fixed:hover{ transform: translateY(-2px); opacity: 1; }

  /* La imagen del ícono */
  .btn-top-fixed img{
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;       /* opcional; quitá si tu imagen ya trae fondo/redondeo */
  }

  /* En pantallas chicas, acercarlo un poco al borde */
  @media (max-width: 480px){
    .btn-top-fixed{ right: 88px; bottom: 18px; width: 44px; height: 44px; }
  }
  #servicios, 
.section-servicios-bg {
  background-color: #f2f2f2 !important;  /* gris clarito */
}


/* ===== Inlined <style> block #8 (extracted) ===== */
.contact-icon{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    outline: none !important;
  }
  .contact-icon::before,
  .contact-icon::after{ display:none !important; }
  .contact-icon img{ display:block; width:60px; height:60px; }
    .navbar-nav .dropdown.open > .dropdown-menu{ display:block !important; }


/* ===== Inlined <style> block #9 (extracted) ===== */
/* Footer (solo desktop): más espacio entre Instagram y LinkedIn */
@media (min-width: 992px){
  footer .col-md-3 .icon-row-link + .icon-row-link{
    margin-top: 18px !important; /* subí a 20–24px si querés aún más */
  }
}
/* Footer – texte blanc à côté des icônes Instagram/LinkedIn */
footer .icon-row-link,
footer .icon-row-link span,
footer .icon-row-link:link,
footer .icon-row-link:visited,
footer .icon-row-link:hover{
  color: #fff !important;
}
/* === CLIENTES : compacter la section (desktop + mobile) === */
#clientes{
  padding: 16px 0 28px !important;   /* avant ~40px */
}
#clientes > h2{
  margin: 10px 0 14px !important;    /* réduit l'espace au-dessus du titre */
}

/* Logos un peu plus compacts, donc moins de hauteur globale */
#clientes .carrusel-elemento{ padding: 0 10px !important; }
#clientes .carrusel-elemento img{
  max-height: 56px !important;       /* avant ~70px */
  width: auto !important;
}

/* Mobile : encore plus serré */
@media (max-width: 767px){
  #clientes{ padding: 8px 0 20px !important; }
  #clientes > h2{
    margin: 6px 0 10px !important;
    font-size: clamp(18px, 4.8vw, 22px);
  }
  #clientes .carrusel-elemento img{
    max-height: clamp(40px, 6.5vw, 50px) !important;
  }
}

/* Bonus : la "frange" blanche au-dessus vient souvent du padding bas de #contacto.
   On le réduit pour ne plus pousser #clientes vers le bas. */
#contacto{ padding-bottom: 56px !important; }
@media (max-width: 767px){
  #contacto{ padding-bottom: 36px !important; }
}
/* CONTACTO : image de fond différente pour mobile */
@media (max-width: 767px){
  #contacto{
    /*background-image: url('img/contacto-mobile.jpg') !important; */
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
  }
}
/* FOOTER (mobile) : centrer les rangées et resserrer l'espace icône/texte */
@media (max-width: 767px){
  #footer-info a.icon-row-link{
    display: inline-flex !important;         /* sécu */
    align-items: center !important;
    justify-content: center !important;      /* tout centré */
    gap: 8px !important;                     /* moins d'espace qu'avant */
    text-align: left !important;             /* lecture naturelle à côté de l’icône */
    margin-left: auto; margin-right: auto;   /* centrer le lien lui-même */
  }
  #footer-info a.icon-row-link .icon{
    width: 22px; height: 22px;               /* icône cohérente */
  }
  #footer-info a.icon-row-link span{
    display: inline-block;
    line-height: 1.35;                       /* compacter le texte multi-lignes */
  }
}
/* ===== Footer MOBILE — icône + texte centrés et compacts ===== */
@media (max-width: 767px){
  /* colonne "CONTACTÁNOS" centrée */
  #footer-info .col-md-4.mb-4{
    text-align: center !important;
  }

  /* chaque ligne (WhatsApp + 2 adresses) : icône collée au texte */
  #footer-info a.icon-row-link{
    display: inline-flex !important;          /* icône + texte sur la même ligne */
    align-items: center !important;
    justify-content: center !important;       /* bloc centré */
    gap: 6px !important;                      /* espace très court icône/texte */
    margin: 8px 0 !important;                 /* espace vertical régulier */
    max-width: 92vw;                          /* permet le retour à la ligne propre */
  }

  /* taille et alignement de l’icône */
  #footer-info a.icon-row-link .icon{
    width: 22px; height: 22px;                /* taille cohérente (WhatsApp + adresses) */
    flex: 0 0 22px;
    margin-top: -1px;                         /* petit calage vertical */
  }

  /* texte à gauche (par rapport à l’icône) mais bloc centré globalement */
  #footer-info a.icon-row-link span{
    display: inline-block;
    text-align: left;                         /* comme ton WhatsApp */
    line-height: 1.35;                        /* plus compact */
    font-size: 16px;                          /* lisible sur mobile */
  }
}


/* ===== Footer MOBILE — rééquilibrage des espacements sans agrandir la hauteur ===== */
@media (max-width: 767px){
  /* 1) Remonter le contenu (près du bord vert) et compenser en bas */
  #footer-info{
    padding-top: 8px !important;     /* était plus grand → on rapproche le texte du haut */
    padding-bottom: 10px !important;  /* on serre un peu le bas pour ne pas grandir le footer */
  }

  /* 2) Un peu plus d'espace entre le texte (colonne 1) et CONTACTÁNOS (colonne 2) */
  #footer-info .col-md-4.mb-4 h5{
    margin-top: 14px !important;      /* s'applique à CONTACTÁNOS (et à REDES SOCIALES par défaut) */
  }

  /* 3) Encore un peu + d'espace avant REDES SOCIALES */
  #footer-info .col-md-3.mb-4 h5{
    margin-top: 18px !important;      /* titre "REDES SOCIALES" un peu plus bas que CONTACTÁNOS */
  }

  /* 4) Ajouter un petit "respir" après la DERNIÈRE adresse */
  #footer-info .col-md-4.mb-4 a.icon-row-link:last-of-type{
    margin-bottom: 14px !important;
  }

  /* (On laisse intacts les réglages d’alignement/centrage icône+texte déjà faits) */
}
/* CONTACTO – móvil: alinear el fondo desde la IZQUIERDA */
@media (max-width: 767px){
  #contacto{
    background-position: left center !important; /* o left top si preferís arriba */
    background-size: cover !important;
    background-repeat: no-repeat !important;
  }
  #contacto::before{ background-position: left center !important; }
}
/* ===== PARTNERS — forzar tamaño uniforme de logos ===== */
#carrusel-contenido-partners .carrusel-elemento{
  flex: 0 0 auto;
  width: 200px;                 /* ancho “casilla” desktop */
  padding: 0 20px;
  display:flex; align-items:center; justify-content:center;
}

#carrusel-contenido-partners .carrusel-elemento img{
  height: 64px !important;      /* ALTURA FIJA DESKTOP */
  width: auto !important;
  max-width: 100% !important;   /* no desborda su casilla */
  object-fit: contain;          /* respeta proporción sin recortar */
  image-rendering: -webkit-optimize-contrast; /* un toque de nitidez */
}

/* Mobile: casillas algo más angostas y logos un poco más bajos */
@media (max-width: 767px){
  #carrusel-contenido-partners .carrusel-elemento{
    width: 42vw;                /* 2–3 logos a la vista, fluido */
    padding: 0 12px;
  }
  #carrusel-contenido-partners .carrusel-elemento img{
    height: 48px !important;    /* ALTURA FIJA MOBILE */
  }
}
/* ===== PARTNERS: carrusel igual al de Clientes ===== */
#carrusel-contenido-partners{ overflow:hidden; width:100%; }
#carrusel-caja-partners{
  display:flex; align-items:center; width:max-content;
  animation: carruselPartners 45s linear infinite;
}
#carrusel-caja-partners:hover{ animation-play-state: paused; }

#carrusel-contenido-partners .carrusel-elemento{
  flex:0 0 auto; width:190px; padding:0 22px;
  display:flex; align-items:center; justify-content:center;
}
#carrusel-contenido-partners .carrusel-elemento img{
  height:64px !important;      /* desktop */
  width:auto !important; max-width:100% !important; object-fit:contain;
  filter:grayscale(100%); opacity:.9; transition:transform .2s, filter .2s, opacity .2s;
}
#carrusel-contenido-partners .carrusel-elemento img:hover{
  filter:none; opacity:1; transform:scale(1.05);
}

/* loop suave: como duplicamos la lista A otra vez, se traslada la mitad */
@keyframes carruselPartners{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); }
}

/* Mobile */
@media (max-width:767px){
  #carrusel-contenido-partners .carrusel-elemento{ width:42vw; padding:0 12px; }
  #carrusel-contenido-partners .carrusel-elemento img{ height:48px !important; }
}
/* ===== PARTENARIOS = mismo look & spacing que CLIENTES ===== */

/* mismos rellenos que #clientes */
#partners{
  padding: 16px 0 28px !important;
  background:#fff;                   /* como clientes */
}
#partners > h2{
  margin: 10px 0 14px !important;    /* como #clientes > h2 */
  color: #4d897c;                    /* mismo color del título de clientes */
  font-weight: 700;
  text-transform: uppercase;
}

/* quitar el blanco-y-negro y la semitransparencia de los logos */
#carrusel-contenido-partners .carrusel-elemento img{
  filter: none !important;
  opacity: 1 !important;
}

/* un pequeño respiro debajo del carrusel para que no “corte” los logos */
#carrusel-contenido-partners{ padding-bottom: 6px; }

/* Mobile: mismo ajuste que aplicaste a #clientes */
@media (max-width: 767px){
  #partners{ padding: 8px 0 20px !important; }
  #partners > h2{ margin: 6px 0 10px !important; }
}
@media (max-width: 767px){
  #contacto{
    background-position-x: 50% !important; /* izquierda/derecha */
    background-position-y: 40% !important; /* arriba/abajo    */
  }
  #contacto::before.
}
.navbar-nav .dropdown.open > .dropdown-menu{ display:block !important; }
/* Solo móvil: centrar títulos en INGENIERÍA y en la sección de servicios/beneficios */
@media (max-width: 767px){
  /* INGENIERÍA Y PROYECTOS */
  #ingenieria h3{
    text-align: center !important;
  }

  /* Nuestros servicios incluyen / Beneficios para su empresa */
  #servicios-beneficios h3{
    text-align: center !important;
  }
}
/* ===== Logo stepper (solo partners y clientes) ===== */
#partners .logo-stepper, #clientes .logo-stepper {
  --visible: 6;              /* valor por defecto si olvidas el inline */
  --gap: 16px;               /* espacio entre logos */
  --row-height: 72px;        /* alto de la fila de logos */
  --step-duration: 1400ms;    /* “tac” (animación de cada paso) */
}

#partners .logo-viewport, #clientes .logo-viewport {
  overflow: hidden;
  width: 100%;
}

#partners .logo-track, #clientes .logo-track {
  display: flex;
  align-items: center;
  gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
  transform: translateX(0);          /* se anima vía JS */
  will-change: transform;
   flex-wrap: nowrap;
}

#partners .logo-item, #clientes .logo-item {
  flex: 0 0 calc((100% - (var(--gap) * (var(--visible) - 1))) / var(--visible));
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--row-height);
}

#partners .logo-item img, #clientes .logo-item img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  display: block;
  filter: grayscale(0);              /* cambia a 1 si quieres gris */
  transition: transform .2s ease;
}

#partners .logo-item img:hover, #clientes .logo-item img:hover {
  transform: scale(1.03);
}

/* Responsive: menos visibles en pantallas pequeñas si quieres */
@media (max-width: 768px) {
  #partners .logo-stepper, #clientes .logo-stepper { --visible: 4; --row-height: 64px; }
}
@media (max-width: 480px) {
  #partners .logo-stepper, #clientes .logo-stepper { --visible: 3; --row-height: 56px; }
}
/* Tamaño fijo de los logos sin deformación */
#partners .logo-stepper, #clientes .logo-stepper {
  --logo-w: 120px;   /* ancho visual del logo */
  --logo-h: 60px;    /* alto visual del logo */
  --logo-pad: 8px;   /* respiro interno opcional */
}

/* La celda sigue ocupando su parte del carrusel, pero centramos el logo fijo */
#partners .logo-item, #clientes .logo-item {
  display: grid;
  place-items: center;
  padding: var(--logo-pad);
}

/* El <img> se ajusta dentro del rectángulo fijo SIN perder proporción */
#partners .logo-item img, #clientes .logo-item img {
  width: var(--logo-w);
  height: var(--logo-h);
  object-fit: contain;   /* clave: mantiene proporción */
  object-position: center;
  display: block;
}

/* Opcional: en pantallas chicas, baja un poco el tamaño fijo */
@media (max-width: 480px) {
  #partners .logo-stepper, #clientes .logo-stepper {
    --logo-w: 96px;
    --logo-h: 48px;
  }
}

/* Velocidad carrusel logos */
#carrusel-caja-partners{
  animation-name: carruselPartners !important;
  animation-duration: 50s !important;   /* ← cambia aquí (más grande = más lento) */
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
}
#carrusel-caja{
  animation-name: carruselPartners !important;
  animation-duration: 50s !important;   /* idem CLIENTES */
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
}
/* === TITULOS UNIFICADOS (PARTNERS / CLIENTES) === */
#partners > h2,
#clientes > h2{
  margin: 24px 0 14px !important;
  text-align: center !important;
  color: #3b6e62 !important;        /* mismo verde */
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  font-size: clamp(18px, 2.4vw, 28px) !important;
}

/* móvil: un poco más compacto (opcional) */
@media (max-width: 767px){
  #partners > h2,
  #clientes > h2{
    margin: 10px 0 12px !important;
    font-size: clamp(18px, 5.2vw, 22px) !important;
  }
}
/* PARTNERS / CLIENTES — títulos unificados, más chicos y sin bold */
#partners > h2,
#clientes > h2{
  margin: 16px 0 10px !important;
  text-align: center !important;
  color: #3b6e62 !important;
  font-weight: 400 !important;                 /* ← sin negrita */
  font-size: clamp(16px, 1.8vw, 22px) !important;  /* ← más chico */
  letter-spacing: .03em !important;
  text-transform: uppercase;                   /* quítalo si no querés MAYÚSC. */
}

/* Mobile aún más compacto (opcional) */
@media (max-width: 767px){
  #partners > h2,
  #clientes > h2{
    margin: 10px 0 8px !important;
    font-size: clamp(15px, 4.5vw, 18px) !important;
  }
}
/* TITULOS UNIFICADOS (PARTNERS / CLIENTES) */
#partners > h2,
#partners h2.section-title,
#clientes > h2,
#clientes h2.section-title{
  display:block !important;
  margin: 16px 0 10px !important;
  text-align: center !important;
  color: #3b6e62 !important;
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight: 600 !important;              /* sin negrita */
  font-size: clamp(16px, 1.8vw, 22px) !important; /* más chico en todos los viewports */
  letter-spacing: .03em !important;
  text-transform: uppercase !important;     /* quítalo si no querés mayúsculas */
  line-height: 1.2 !important;
}


/* Partners + Clientes: logos más grandes en mobile */
@media (max-width: 768px){
  #partners .logo-stepper,
  #clientes  .logo-stepper{
    --visible: 4 !important;     /* menos por fila => cada logo más ancho */
    --row-height: 84px !important;/* más alto el “renglón” de logos */
    --gap: 12px !important;       /* opcional: menos espacio entre logos */

    /* si estás usando tamaño fijo “sin deformar” */
    --logo-w: 120px !important;
    --logo-h: 60px  !important;
  }
}
@media (max-width: 420px){
  #partners .logo-stepper,
  #clientes  .logo-stepper{
    --visible: 3 !important;      /* aún más grandes en pantallas muy chicas */
    --row-height: 92px !important;
    --logo-w: 136px !important;
    --logo-h: 68px  !important;
  }
}
@media (max-width: 991px){
  .header .navbar-toggle{
    position: absolute !important;
    left: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    z-index: 1002 !important; /* por encima del logo */
  }
  .header .logo{ z-index: 1001 !important; }
}
/* === FIX MENÚ MÓVIL (Bootstrap 3) === */
@media (max-width: 991px){
  .navbar { position: relative !important; }

  .navbar-toggle{
    display: block !important;
    position: absolute !important;
    left: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    z-index: 1002 !important; /* por encima del logo */
  }

  .logo, .logo-wrap, .logo-img{ z-index: 1001 !important; }

  /* Panel colapsable: ocupar ancho completo bajo la barra */
  .navbar-collapse.nav-collapse{
    position: absolute !important;
    top: 100% !important;
    left: 0 !important; right: 0 !important;
    width: 100% !important;
    background: #ffffff !important; /* cámbialo si querés otro fondo */
    z-index: 1000 !important;
  }
  .navbar-collapse.nav-collapse.collapse{ display: none !important; }
  .navbar-collapse.nav-collapse.collapse.in{ display: block !important; }

  /* Items apilados en vertical */
  .navbar-nav{ float: none !important; margin: 0 !important; }
  .navbar-nav > li{ float: none !important; }
  .navbar-nav > li > a{
    display: block !important;
    padding: 12px 16px !important;
  }

  /* Submenús (dropdown) visibles en pila cuando el padre está abierto */
  .navbar-nav .dropdown.open > .dropdown-menu{
    display: block !important;
    position: static !important;
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
}
