body {
  margin: 0;
  font-family: 'Raleway', sans-serif;
  line-height: 1.6;
  color: #003366;
}

header {
  position: fixed;      /* 🔥 se queda fijo arriba */
  top: 0;               /* se pega al borde superior */
  left: 0;
  width: 100%;          /* ocupa todo el ancho */
  z-index: 1000;        /* queda por encima de otros elementos */
  display: flex;
  justify-content: space-between; /* logo a la izquierda, menú a la derecha */
  align-items: center;
  padding: 1rem 2rem;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* opcional: sombra sutil */
}


header nav {
  flex: 1; /* ❌ ya no ocupa todo el espacio, solo lo necesario */
}

header nav ul {
  list-style: none;
  display: flex;
  justify-content: flex-end; /* links a la derecha */
  align-items: center;
  gap: 3rem; /* más aire entre links */
  margin-top: -60;
  padding: 0;
}

header nav ul li a {
  position: relative;
  text-decoration: none;
  color: #003366;
  font-weight: 600;
  padding-bottom: 6px;
  transition: color 0.3s ease;
}

header nav ul li a:hover {
  color: #00509e;
}

/* Línea debajo del link activo */
nav ul li a.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #66a3cc; /* 👈 azul oscuro para que coincida con tu diseño */
  border-radius: 2px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px; /* espacio entre imagen y texto */
  margin-left: 30px;
}

.logo img {
  height: 50px; /* ajustá según el tamaño que quieras */
}

.banner {
  position: relative;
  width: 100%;
  height: 100vh; /* ocupa toda la altura de la pantalla */
  overflow: hidden;
}

.swiper-slide {
  position: relative;
}

.swiper-slide img {
  width: 100%;
  height: 100vh;
  object-fit: cover; /* recorta y ajusta la imagen */
}

.overlay {
  position: absolute;
  top: 0;       /* pegado arriba */
  left: 0;
  width: 100%;  /* ocupa todo el ancho */
  height: 100%; /* ocupa toda la altura */
  background: rgba(0,0,0,0.4); /* capa oscura */
  color: #fff;

  display: flex;
  flex-direction: column;
  align-items: center;   /* centra horizontal */
  justify-content: flex-start; /* mantiene el texto arriba */
  text-align: center;

  padding-top: 10rem; /* espacio desde arriba */
}


.banner-text.medium {
  font-size: 2.2rem;   /* más grande que antes */
  font-weight: 600;
  margin: 0 0 15px;
}

.banner-text.large {
  font-size: 4rem;     /* el más grande y llamativo */
  font-weight: 800;
  margin: 0 0 20px;
}

.banner-text.small {
  font-family: 'Raleway', sans-serif;
  font-weight: 600;         /* ✅ Semibold */
  font-size: 18pt;          /* ✅ tamaño */
  line-height: 1.4;         /* altura de línea */
  max-width: 60ch;          /* controla el ancho del párrafo */
  margin: 0 auto;           /* centrado horizontal si es necesario */
  display: -webkit-box;
 -webkit-line-clamp: 3;    /* ✅ fuerza a 3 líneas */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;  /* agrega "..." si sobra texto */
}



@media (max-width: 768px) {
  .banner-text.medium {
    font-size: 1.5rem;
  }
  .banner-text.large {
    font-size: 2.5rem;
  }
  .banner-text.small {
    font-size: 1rem;
  }
}

.banner-btn {
  display: inline-block;
  margin-top: 20px;
  padding: 12px 30px;
  background-color: #003f7f; 
  color: #fff;
  font-size: 1.2rem;
  font-weight: 400; /* normal */
  text-decoration: none;
  border-radius: 10px; /* ✅ bordes redondeados pero rectangulares */
  transition: background 0.3s ease, transform 0.2s ease, font-weight 0.2s ease;
}

.banner-btn:hover {
  background-color: #00509e; /* un azul más claro al pasar encima */
  font-weight: 700;          /* ✅ se pone en bold */
  transform: translateY(-2px); /* efecto sutil de levantarlo */
}


.swiper-pagination {
  position: absolute !important;
  bottom: 30px;   /* distancia desde abajo */
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;    /* asegura que quede sobre la imagen y overlay */
  text-align: center;
}

.swiper-pagination-bullet {
  background: #fff;   /* puntos blancos */
  opacity: 0.7;
  width: 12px;
  height: 12px;
}

.swiper-pagination-bullet-active {
  background: #00509e; /* punto activo en azul */
  opacity: 1;
}

.sobre-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 4rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 8rem 2rem;
}

.sobre-nosotros,
.nuestro-enfoque {
  flex: 1;
  margin-bottom: 0;
  align-items: center;
  justify-content: center;
}

.sobre-nosotros h1,
.nuestro-enfoque h1 {
  font-size: 2rem;
  font-weight: 800;
  color: #003366;
  margin-bottom: 0.5rem;
}

.linea2 {
  display: block;
  width: 60px;
  height: 6px;
  background-color: #66a3cc;
  margin-bottom: 1.5rem;
  border-radius: 3px;
}

/* 🔹 Texto de Sobre Nosotros en azul */
.sobre-nosotros p {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 1rem;
  color: #003366;  /* azul */
}

.logos {
  display: flex;
  justify-content: center;
  align-items: left;
  gap: 3rem;         /* espacio entre logos */
  flex-wrap: wrap;   /* que bajen en pantallas chicas */
  margin-top: 1.5rem;
}

/* Estilos generales para todos los logos */
.logos img {
  object-fit: contain;
}

/* Estilos individuales (si querés afinar cada uno) */
.logo1 {
  height: 60px;
  max-width: 140px;
}
.logo2 {
  height: 60px;
  max-width: 160px;
}
.logo3 {
  height: 60px;
  max-width: 120px !important;
}
.logo4 {
  height: 70px;
  width: auto;
  max-width: 130px;
}



/* Estilos de enfoque */
.enfoque-item {
  display: flex;
  align-items: center;
  background-color: #b8d4e6;
  border: 0.5px solid #003366;
  border-radius: 14px;
  padding: 12.4px 22px;
  margin-bottom: 1rem;
  font-size: 1.1rem;
  color: #003366;
}

.enfoque-item .check {
  margin-right: 15px;
  font-size: 1.5rem;   /* ≈32px */
  color: #003366;
}


/* ✅ Responsive */
@media (max-width: 992px) {
  .sobre-container {
    flex-direction: column;
    gap: 3rem;
  }
  .logos {
    flex-wrap: wrap;
    justify-content: center;
  }
  .logos img {
    height: 50px;
  }
}



.servicios {
  text-align: center;
  padding: 12rem 2rem !important;
  background-color: #f0f6fa; /* azul muy claro */
  margin: 0;
  min-height: 100vh;
}

.servicios .linea {
  display: block;
  width: 60px;
  height: 6px;
  background-color: #66a3cc;
  margin: 0 auto 3rem auto;
  border-radius: 3px;
}

.servicios2 {
  text-align: center;
  padding: 6rem 2rem;       /* más espacio arriba y abajo */
  background-color: #eaf3f9; /* azul muy claro */
}

.servicios2 h2 {
  font-size: 2.5rem;
  font-weight: 700;
  color: #16325c;
  margin-bottom: 0.5rem;
  font-family: 'Raleway' sans-serif;
}

.servicios2 .linea {
  display: block;
  width: 60px;
  height: 4px;
  background: #66a3cc;
  margin: 0.5rem auto 2rem auto; /* centrada */
  border-radius: 2px;
}

.servicios2 p {
  max-width: 900px;
  margin: 0 auto 2rem auto;
  font-size: 1rem;
  color: #16325c;
  line-height: 1.6;
}

.servicios2 .certbox-buttons a {
  display: inline-block;
  background: #16325c;
  color: #fff;
  padding: 0.8rem 2rem;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.3s ease;
}

.servicios2 .certbox-buttons a:hover {
  background: #1e4d8a;
}

/* Grid de servicios */
.service-grid {
  display: flex;
  justify-content: center;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.service {
  flex: 1;
  min-width: 300px;
  max-width: 400px;
  background: #fff;
  border-radius: 15px;
  padding: 2rem;
  box-shadow: 0 6px 15px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* mantiene el botón alineado abajo */
  text-align: center;
  min-height: 250px; /* 🔹 altura mínima igual para todas */
}

.service:hover {
  transform: translateY(-5px);
}

.service i {
  font-size: 3rem;
  color: #00509e;
  margin-bottom: 1rem;
}

.service h3 {
  font-size: 1.3rem;
  font-weight: 700;
  color: #003366;
  margin-bottom: 1rem;
}

.service p {
  font-size: 1rem;
  color: #002244;
  line-height: 1.5;
  font-family: 'Raleway' sans-serif;
}

/* Responsive */
@media (max-width: 768px) {
  .service-grid {
    grid-template-columns: 1fr;
  }
}

.clientes {
  text-align: center;
  padding: 2rem 1rem;
  background-color: #fff;
  margin-bottom: 12rem;
}

.clientes h2 {
  font-size: 2.5rem;
  font-weight: 800;
  color: #003366;
  margin-bottom: 0.5rem;
}

.clientes .linea {
 display: block;
  width: 60px;
  height: 4px;
  color: #66a3cc; /* mismo azul que el título */
  margin: 0.5rem auto 2rem auto;
  border-radius: 3px;
}

/* 🔹 Texto centrado con énfasis en azul */
.clientes p {
  font-size: 1.2rem;
  color: #003366;
  line-height: 1.6;
  margin-bottom: 1rem;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.clientes p strong {
  font-weight: 700;
}

.clientes-logos {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* ✅ 4 logos por fila */
  gap: 2rem;                             /* espacio entre logos */
  align-items: center;
  justify-items: center;
  margin-top: 2rem;
}

.clientes-logos img {
  width: 160px;        /* 🔥 mismo ancho para todos */
  height: 80px;        /* 🔥 mismo alto para todos */
  object-fit: contain; /* mantiene proporción dentro del recuadro */
  filter: grayscale(100%);
  opacity: 0.8;
  transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}


/* Responsive: 2 columnas en móviles */
@media (max-width: 768px) {
  .clientes-logos {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

.extra-clientes {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.6s ease;
}

.extra-clientes.mostrar {
  max-height: 500px; /* suficiente para mostrar los logos */
}

.btn-ver-mas {
  margin-top: 2rem;
  padding: 0.8rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  background-color: #003366;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.btn-ver-mas:hover {
  background-color: #005599;
}

contacto seccion/

.contacto {
  background-color: #e9f1f7 !important;
  padding: 4rem 2rem; /* 👈 más padding abajo */
  margin: 0;
  min-height: auto;
  max-height: auto;
}

#contacto {
  background-color: #f0f7fc !important;  /* fuerza el celeste */
  width: 100%;
  display: block;
  padding: 4rem 0;
  margin: 0;
}


.contacto-contenedor {
  display: flex;
  justify-content: space-between;
  align-items: stretch; /* 👈 hace que ambas columnas tengan el mismo alto */
  max-width: 1200px;
  margin: 0 auto;
  gap: 2rem;
}

/* Columna izquierda (formulario) */
.formulario {
  flex: 1;
}

.formulario h2 {
  font-size: 2.5rem;
  font-weight: 800;
  color: #003366;
  margin-bottom: 0.5rem;
}

.linea {
  display: block;
  width: 60px;
  height: 6px;
  background-color: #66a3cc;
  margin-bottom: 1.5rem;
  border-radius: 3px;
}

.formulario p {
  font-size: 1.1rem;
  color: #003366;
  margin-bottom: 1.5rem;
}

.form-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

.form-row input {
  flex: 1;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
}

textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  min-height: 150px;
  margin-bottom: 1rem;
  font-size: 1rem;
  font-family: 'Roboto', sans-serif;
}

.certbox-buttons4 {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: flex-start; /* ✅ alineado a la izquierda */
  margin-top: 2rem;
}

.certbox-buttons4 a {
  background: #003366;
  color: #fff;
  text-decoration: none;
  padding: 0.6rem 1.2rem;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: background 0.3s ease;
}

.certbox-buttons4 a:hover {
  background: #005599;
  color: #fff !important;
}

/* Columna derecha (información) */
.info {
  flex: 1;
  background-color: #003366;
  color: #fff;
  padding: 1.5rem;
  border-radius: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 0;
  border-radius: 20px 20px 20px 20px;
}

h2 a {
  text-decoration: none;
  color: inherit; /* mantiene el color del h2 */
}

h2 a:hover {
  color: #00509e; /* opcional: un color distinto al pasar el mouse */
}


.info h3 {
  font-size: 2rem;
  font-weight: 700;
  margin-top: 0; 
}

.info .linea {
  background-color: #66a3cc;
  margin-bottom: 1.5rem;
}

.info p {
  font-size: 1rem;
  margin-bottom: 2rem;
  color: #e6e6e6;
}

.dato {
  display: flex;
  align-items: center; /* centra el ícono respecto al bloque */
  gap: 1rem;
} 

/* === Teléfonos en una sola línea === */
.telefonos {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.telefonos span::after {
  content: "|";
  margin: 0 0.2rem;
  color: #ffffff;
}

.telefonos span:last-child::after {
  content: ""; /* ✅ quita la barra después del último */
}


.dato i {
  font-size: 1.3rem;
  color: #66a3cc;
}

.info hr {
  border: none;
  border-top: 1px solid #66a3cc;
  margin: 1rem 0;
}

/* Responsive */
@media (max-width: 992px) {
  .contacto-contenedor {
    flex-direction: column;
  }
  .info {
    width: 100%;
  }
}

html {
  scroll-behavior: smooth;
}


.footer {
  background-color: #222; /* gris oscuro */
  color: #fff;
  padding: 2rem 1.5rem;
  font-family: 'Raleway', sans-serif;
  width: 100%;
  margin-top: 0;
}

.footer-container {
  max-width: 1200px;        /* ✅ mismo ancho que el resto de la web */
  margin: 0 auto;           /* centra el contenido */
  display: flex;
  justify-content: space-between;
  align-items: flex-start;  /* ✅ alinea títulos y redes arriba */
  flex-wrap: wrap;
  gap: 2rem;
}

.footer-logo {
  height: 25px; /* ajustá según el tamaño real del logo */
  margin-bottom: 0.8rem;
  display:block;
  
}

.footer-left {
   flex: 1;
}

.footer-left p {
  text-align: left;
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #ccc;
  max-width: 400px;
  font-weight: 400;
}

.footer-center h4 {
  font-size: 1.2rem;
  margin-bottom: 0.8rem;
  font-weight: 600;
  color: #ccc;
}

.social-icons {
  display: flex;
  justify-content: left;
  gap: 2.5rem;
}

.social-icons a {
  color: #ccc;
  font-size: 1.3rem;
  transition: color 0.3s ease
}

.social-icons a:hover {
  color: #66a3cc; /* azul al pasar el mouse */
}

.footer-right {
  flex: 1;
  text-align: center;
}

.footer-right p {
  font-size: 0.9rem;
  font-weight: 400;
  color: #ccc;
}

/* ✅ Responsive */
@media (max-width: 768px) {
  .footer-container {
    flex-direction: column;
    text-align: center;
    gap: 2rem;
  }

  .footer-left p {
    margin: auto;
  }
}

/* ======= SERVICIOS ======= */
.banner-servicios .banner-imagen img {
  width: 100%;
  height: 60vh; /* visible 60% de alto */
  object-fit: cover;
  display: block;
}

.servicios {
  background: #e9f1f7; /* mismo color de fondo celeste suave */
  text-align: center;
  padding: 6rem 2rem !important;
}

.servicios h2 {
  font-size: 2rem;
  font-weight: 700;
  color: #1a3763; /* azul fuerte */
  margin-bottom: 0.5rem;
}

.servicios .linea {
  display: block;
  width: 60px;
  height: 4px;
  color: #66a3cc; /* mismo azul que el título */
  margin: 0.5rem auto 2rem auto;
  border-radius: 3px;
}

.servicios p {
  max-width: 800px;
  margin: 0 auto 1rem auto;
  font-size: 1rem;
  line-height: 1.6;
  color: #1a3763;
  font-weight: 550;
}

/* Imagen de fondo */
.banner-servicios {
  position: relative;
  width: 100%;
}

.banner-servicios .banner-imagen img {
  width: 100%;
  height: 60vh; /* ocupa 60% de la pantalla */
  object-fit: cover;
  display: block;
}



/* Caja superpuesta */

.caja-servicios {
  position: absolute;
  top: 50%;
  left: 50px;
  transform: translateY(-50%);
  
  width: 600px; /* ✅ ancho igual para ambas */
  height: 575px;
  background: #fff;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  z-index: 2;

  margin-top: -80px;
}

.caja-servicios2 {
  position: absolute;
  top: 50%;
  left: 50px;
  transform: translateY(-50%);
  
  width: 600px; /* ✅ ancho igual para ambas */
  height: 450px;
  background: #fff;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  z-index: 2;

  margin-top: -80px;
}

/* Caja superpuesta */
.caja-imagen {
  position: absolute;
  top: 50%;
  right: 50px;             /* 👈 ajusta la distancia al borde derecho */
  transform: translateY(-50%);
  
  width: 600px;             /* 👈 más ancha */
  height: 455px;           /* 👈 más corta */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  z-index: 2;

  margin-top: -80px;
}

.caja-imagen img {
  width: 100%;
  height: 100%;             /* 👈 fuerza a llenar la caja */
  object-fit: cover;        /* 👈 recorta manteniendo proporción */
  display: block;
}

/* Caja superpuesta */
.caja-imagen2 {
  position: absolute;
  top: 50%;
  right: 50px;             /* 👈 ajusta la distancia al borde derecho */
  transform: translateY(-50%);
  
  width: 600px;             /* 👈 más ancha */
  height: 575px;            /* 👈 más corta */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  z-index: 2;

  margin-top: -80px;
}

.caja-imagen2 img {
  width: 100%;
  height: 100%;             /* 👈 fuerza a llenar la caja */
  object-fit: cover;        /* 👈 recorta manteniendo proporción */
  display: block;
}

.caja-imagen3 {
  position: absolute;
  top: 50%;
  right: 50px; /* ajusta según diseño */
  transform: translateY(-50%);
  
  width: 600px;  /* ✅ mismo ancho que .caja-servicios */
  height: 575px; /* mantenés proporción vertical */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  z-index: 2;

  margin-top: -80px;
}

.caja-imagen3 img {
  width: 100%;
  height: 100%;             /* 👈 fuerza a llenar la caja */
  object-fit: cover;        /* 👈 recorta manteniendo proporción */
  display: block;
}

.caja-servicios .icono {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  font-size: 0.8rem;
  flex-shrink: 0;
  margin-top: 1px;
  margin-right: 8px;
}

.caja-servicios h3 {
  font-size: 1.3rem;
  font-weight: 700;
  color: #1a3763;
  margin-bottom: 0.5rem;
}

.caja-servicios .linea {
  display: block;
  width: 60px;
  height: 3px;
  background: #66a3cc;
  margin-bottom: 1.5rem;
}

/* Lista */
.caja-servicios ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.caja-servicios li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 1rem 0;
border-bottom: 1px solid #1a3763;
}

.caja-servicios .icono svg,
.caja-servicios .icono img {
  width: 100%;
  height: auto;
}

.caja-servicios2 .icono svg,
.caja-servicios2 .icono img {
  width: 100%;
  height: auto;
}

.caja-servicios li:last-child {
  border-bottom: none;
}

.caja-servicios p {
  margin: 0;
  font-size: 1rem;
  color: #1a3763;
  line-height: 1.5;
}

.caja-servicios p strong {
  font-weight: 700;
}


.caja-servicios2 h3 {
  font-size: 1.3rem;
  font-weight: 700;
  color: #1a3763;
  margin-bottom: 0.5rem;
}

.caja-servicios2 .linea {
  display: block;
  width: 60px;
  height: 3px;
  background: #66a3cc;
  margin-bottom: 1.5rem;
}

/* Lista */
.caja-servicios2 ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.caja-servicios2 li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 1rem 0;
  margin-bottom: 1.5 rem;
  border-bottom: 1px solid #1a3763;
}

.caja-servicios2 li:last-child {
  border-bottom: none;
}

.caja-servicios2 p {
  margin: 0;
  color: #1a3763;
  line-height: 1.4;
}

.caja-servicios2 p strong {
  font-weight: 700;
}

.caja-servicios2 .icono {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  font-size: 0.8rem;
  flex-shrink: 0;
  margin-top: 1px;
  margin-right: 8px;
}

/* ===== Estilo base (pantallas grandes hasta 2560px) ===== */
.caja-servicios,
.caja-servicios2,
.caja-imagen,
.caja-imagen2,
.caja-imagen3 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 600px;
  height: 575px;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  z-index: 2;
  margin-top: -80px;
}

.caja-servicios { left: 50px; background: #fff; padding: 2rem; }
.caja-servicios2 { left: 50px; background: #fff; padding: 2rem; height: 450px; }
.caja-imagen, .caja-imagen2, .caja-imagen3 { right: 50px; overflow: hidden; }

.caja-imagen img,
.caja-imagen2 img,
.caja-imagen3 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===== Pantallas muy grandes (≥1920px hasta 2560px) ===== */
@media (min-width: 1920px) {
  .caja-servicios,
  .caja-servicios2,
  .caja-imagen,
  .caja-imagen2,
  .caja-imagen3 {
    width: 800px;
    height: 650px;
  }
}

/* ===== Laptops estándar (≤1440px) ===== */
@media (max-width: 1440px) {
  .caja-servicios,
  .caja-servicios2,
  .caja-imagen,
  .caja-imagen2,
  .caja-imagen3 {
    width: 500px;
    height: 500px;
  }
}

/* ===== Tablets horizontales (≤1024px) ===== */
@media (max-width: 1024px) {
  .caja-servicios,
  .caja-servicios2,
  .caja-imagen,
  .caja-imagen2,
  .caja-imagen3 {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    transform: none;
    margin: 20px auto;
    width: 90%;
    height: auto;
  }
}


/* ======= OTROS SERVICIOS ======= */
.otros-servicios {
  text-align: center;
  padding: 4rem 0;         /* 🔹 padding lateral fuera, ya que ocupa todo el ancho */
  background: #fff;
  width: 100vw;            /* 🔹 ocupa todo el ancho */
  margin-top: 450px;
}

.otros-servicios h2 {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: #003366;          /* 🔹 igual al resto de secciones */
}

.otros-servicios .linea {
  display: block;
  width: 70px;
  height: 5px;
  background: #66a3cc;     /* 🔹 azul, no blanco */
  margin: 0.5rem auto 2rem auto;
  border-radius: 3px;
}

.otros-servicios-grid {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: auto;
}

.servicio-card {
  flex: 1;
  min-width: 320px;   /* más anchas en pantallas chicas */
  max-width: 500px;   /* aumenta el límite en pantallas grandes */
  background: #fff;
  border-radius: 15px;
  padding: 2rem;
  box-shadow: 0 6px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
}


.servicio-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 22px rgba(0,0,0,0.15);
}

.servicio-card i {
  font-size: 2.5rem;
  color: #66a3cc;
  margin-bottom: 1rem;
}

.servicio-card h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #003366;
}

.servicio-card a {
  color: #66a3cc;
  text-decoration: none;
  border-bottom: 1px solid #66a3cc;
  font-size: 0.95rem;
}

.servicio-card a:hover {
  color: #00509e;
  border-bottom-color: #00509e;
}

/* ======= RESPONSIVE ======= */
@media (max-width: 992px) {
  .contenedor-servicios {
    flex-direction: column;
    margin-top: -40px;
  }
  .caja-imagen { height: 300px; }.certificaciones {
  text-align: center;
  padding: 4rem 2rem;
  background: #fff;
}

.certificaciones h2 {
  font-size: 2rem;
  font-weight: 700;
  color: #1a3763;
  margin-bottom: 0.5rem;
}

.certificaciones .linea {
  display: block;
  width: 60px;
  height: 4px;
  background: #1a3763;
  margin: 0 auto 1.5rem auto;
  border-radius: 3px;
}

.certificaciones p {
  max-width: 900px;
  margin: 0 auto 3rem auto;
  font-size: 1rem;
  line-height: 1.6;
  color: #1a3763;
}

/* Grid de tarjetas */
.certificaciones-grid {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 2rem;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 3rem auto; /* centra y da espacio inferior */
  padding: 0 1rem;
}

/* Card */
.certificaciones .card {
  flex: 1;
  min-width: 300px;
  max-width: 450px;
  background: #e0effa;
  border-radius: 12px;
  padding: 2rem;
  text-align: left;
  box-shadow: 0 6px 15px rgba(0,0,0,0.1);
}

.certificaciones .card h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: #1a3763;
  margin-bottom: 1rem;
}

.certificaciones .card p {
  font-size: 0.95rem;
  color: #1a3763;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

/* Botones */
.certificaciones .botones {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.certificaciones .botones a {
  background: #1a3763;
  color: #fff;
  text-decoration: none;
  font-size: 0.9rem;
  padding: 0.6rem 1.2rem;
  border-radius: 6px;
  transition: background 0.3s;
}

.certificaciones .botones a:hover {
  background: #0f2345;
}

  .otros-servicios-grid { flex-direction: column; align-items: center; }
}

/* Reset básico */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  overflow-x: hidden; /* 👈 evita scroll horizontal */
}

/* CERTIFIACIONES */
.banner-certificaciones {
  position: relative;
  width: 100%;
  text-align: center;
}

.banner-certificaciones .banner-imagen img {
  width: 100%;
  height: 50vh; /* altura del banner */
  object-fit: cover;
  display: block;
}

/* ===== SECCIÓN CERTIFICACIONES ===== */
.certi-section {
  padding: 4rem 2rem;
  background: #fff;
}

.certi-section .certi-title {
  font-size: 2.5rem;
  font-weight: 800;
  color: #003366;
  margin-bottom: 0.5rem;
  text-align: center;
}

.certi-section .certi-line {
  display: block;
  width: 60px;
  height: 6px;
  background-color: #66a3cc;
  margin: 0 auto 2rem auto;
  border-radius: 3px;
}

.certi-section .certi-intro {
  font-size: 1.2rem;
  color: #003366;
  max-width: 900px;
  margin: 0 auto 2rem auto;
  line-height: 1.6;
  font-weight: 500;
  text-align: center;
}

/* ===== SECCIÓN CERTIFICACIONES (aislada con certbox-) ===== */
/* ===== SECCIÓN CERTIFICACIONES (aislada con certbox-) ===== */
.certbox-section {
  padding: 4rem 2rem;
  background: #fff;
  margin-bottom: 3rem; /* separación con el footer */
}

.certbox-title {
  font-size: 2.5rem;
  font-weight: 800;
  color: #003366;
  margin-bottom: 0.5rem;
  text-align: center;
}

.certbox-line {
  display: block;
  width: 60px;
  height: 6px;
  background-color: #66a3cc;
  margin: 0 auto 2rem auto;
  border-radius: 3px;
}

.certbox-intro {
  font-size: 1.2rem;
  color: #003366;
  max-width: 900px;
  margin: 0 auto 2rem auto;
  line-height: 1.6;
  font-weight: 500;
  text-align: center;
}

/* GRID */
.certbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

/* TARJETA */
.certbox-card {
  background: #f9f9f9;
  border-radius: 12px;
  /* 👇 sombra ahora usa el mismo color que el header */
  box-shadow: 0 6px 15px rgba(77, 128, 179, 0.4);
  overflow: hidden;
  text-align: center; /* 👈 centra texto en toda la tarjeta */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* HEADER de tarjeta */
.certbox-card-header {
  background: #4d80b3;
  color: #fff;
  padding: 1.2rem;
  font-weight: bold;
  text-align: center;
}

.certbox-card-header h3 {
  font-size: 1.2rem;
  margin: 0;
}

/* CUERPO */
.certbox-card-body {
  padding: 1.5rem;
}

.certbox-card-body p {
  font-size: 1rem;
  color: #003366;
  line-height: 1.5;
  margin-bottom: 1.5rem;
  text-align: center; /* 👈 asegura centrado */
}

/* BOTONES */
.certbox-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.certbox-buttons a {
  background: #003366;
  color: #fff;
  text-decoration: none;
  padding: 0.7rem 1.4rem;
  border-radius: 8px;      /* ✅ bordes suavemente redondeados */
  font-weight: 400;        /* normal */
  font-size: 0.95rem;
  transition: background 0.3s ease, font-weight 0.2s ease, transform 0.2s ease;
}

.certbox-buttons a:hover {
  background: #00509e;     /* ✅ azul más claro al pasar encima */
  font-weight: 700;        /* ✅ bold en hover */
  transform: translateY(-2px); /* opcional: efecto “levantar” */
}

.certbox-buttons a:hover {
  background: #6FA3CA;     /* ✅ azul más claro al pasar encima */
  font-weight: 700;        /* ✅ bold en hover */
  transform: translateY(-2px); /* opcional: efecto “levantar” */
}


/* BOTONES2 */
.certbox-buttons2 {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-top: 10px;
}

/* mismo estilo para <a> y <button> */
.certbox-buttons2 a,
.certbox-buttons2 button,
button.certbox-buttons2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;

  background: #003366;
  color: #fff;
  text-decoration: none;
  padding: 0.7rem 1.4rem;
  border-radius: 8px;
  font-weight: 400;
  font-size: 0.95rem;

  border: 1px solid transparent;   /* limpia borde nativo del button */
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;

  transition: background 0.3s ease, font-weight 0.2s ease, transform 0.2s ease;
}

/* hover */
.certbox-buttons2 a:hover,
.certbox-buttons2 button:hover,
button.certbox-buttons2:hover {
  background: #005599;
  color: #fff !important;
  transform: translateY(-1px);
}

/* active */
.certbox-buttons2 a:active,
.certbox-buttons2 button:active,
button.certbox-buttons2:active {
  transform: translateY(0);
}

/* accesibilidad: focus */
.certbox-buttons2 a:focus-visible,
.certbox-buttons2 button:focus-visible,
button.certbox-buttons2:focus-visible {
  outline: 3px solid rgba(0,85,153,.35);
  outline-offset: 2px;
}

/* estado deshabilitado */
.certbox-buttons2 button:disabled,
button.certbox-buttons2:disabled {
  opacity: .6;
  cursor: not-allowed;
}

/* Botón primario del formulario */
.btn-form {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;

  background: #003366;
  color: #fff;
  padding: .7rem 1.4rem;
  border-radius: 8px;
  border: 1px solid transparent;

  font: 400 0.95rem/1 'Roboto', sans-serif;
  text-decoration: none;
  cursor: pointer;

  appearance: none;
  -webkit-appearance: none;

  transition: background .3s ease, transform .2s ease;
}

.btn-form:hover { background: #005599; transform: translateY(-1px); }
.btn-form:active { transform: translateY(0); }
.btn-form:focus-visible { outline: 3px solid rgba(0,85,153,.35); outline-offset: 2px; }
.btn-form:disabled { opacity: .6; cursor: not-allowed; }




/* === Popup === */
.popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.popup-content {
  background: #f4f9fd; /* azul muy claro */
  padding: 3rem 2.5rem;
  border-radius: 12px;
  text-align: center;
  max-width: 600px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  animation: fadeIn 0.3s ease-in-out;
}

/* Ícono arriba */
.popup-icon {
  font-size: 4rem;
  color: #00509e;
  margin-bottom: 1rem;
}

/* Título */
.popup-content h2 {
  color: #003366;
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

/* Línea divisoria */
.popup-line {
  display: block;
  width: 60px;
  height: 4px;
  background-color: #66a3cc;
  margin: 0 auto 1.5rem auto;
  border-radius: 3px;
}

/* Texto debajo */
.popup-content p {
  color: #003366;
  font-size: 1.1rem;
  line-height: 1.5;
}

/* Animación */
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

/* Aplica a todas las secciones que usás en el menú */
#inicio,
#nosotros,
#servicios,
#clientes,
#contacto {
  scroll-margin-top: 80px; /* ajustá al alto real de tu header */
}

/* Ajuste para mobile: header suele ser más alto */
@media (max-width: 768px) {
  #inicio,
  #nosotros,
  #servicios,
  #clientes,
  #contacto {
    scroll-margin-top: 140px; /* más espacio en pantallas chicas */
  }
}

:root{
  --brand-blue:#003366;
  --brand-blue-hover:#005599;
}

/* ===========================
   MOBILE ONLY (≤ 768px)
   =========================== */
@media (max-width: 768px){

  /* HEADER layout móvil */
  header{
    display:flex; align-items:center; justify-content:space-between;
    height:64px; padding:10px 16px; box-shadow:0 2px 12px rgba(0,0,0,.06);
    position:sticky; top:0; z-index:100;
    background:#fff;
  }
  header .logo img{ height:40px; width:auto; display:block; }

  /* Burger en azul (Font Awesome) */
  header .burger{
    display:flex !important; width:44px; height:44px;
    align-items:center; justify-content:center;
    background:transparent; border:0; cursor:pointer;
  }
  header .burger i.fa-bars{ color:var(--brand-blue); font-size:30px; line-height:1; }
  header .burger:hover i.fa-bars{ color:var(--brand-blue-hover); }
  header .burger:focus-visible{ outline:3px solid rgba(0,85,153,.35); outline-offset:2px; }

  /* Ocultar nav desktop y convertirlo en menú móvil full */
  header #navbar{
    position:fixed; inset:64px 0 0 0;               /* debajo del header */
    background:#0c2f57; padding:12px 16px;
    display:none;                                    /* cerrado por defecto */
    z-index:99;
  }
  header #navbar.open{ display:block; }

  header #navbar ul{
    list-style:none; margin:0; padding:0;
    display:flex; flex-direction:column; gap:4px;
  }
  header #navbar li a{
    display:block; color:#fff; text-decoration:none;
    padding:14px 8px; border-bottom:1px solid rgba(255,255,255,.08);
    font-weight:600;
  }
  header #navbar li a.active{ color:#fff; }

  /* Bloquear scroll cuando el menú está abierto */
  body.no-scroll{ overflow:hidden; }

  /* ===== Banner / Hero (como en la captura) ===== */
  .banner .swiper, .banner .swiper-slide{
    min-height:calc(100vh - 64px);
  }
  .banner .swiper-slide{ position:relative; }
  .banner .swiper-slide > img{
    width:100%; height:100%; object-fit:cover; display:block;
  }

  /* Overlay centrado y legible */
  .banner .overlay{
    position:absolute; inset:0; padding:72px 16px 28px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center;
  }
  /* Degradado para contraste */
  .banner .swiper-slide::before{
    content:""; position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.45) 60%, rgba(0,0,0,.55) 100%);
    z-index:0;
  }
  .banner .overlay > *{ position:relative; z-index:1; }

  .banner .banner-text.medium{ font-size:1.05rem; margin:0 0 .5rem; }
  .banner .banner-text.large{ font-size:2rem; line-height:1.15; margin:.25rem 0 .75rem; }
  .banner .banner-text.small{ font-size:1rem; line-height:1.6; max-width:32ch; margin:0 auto 1rem; }

  .banner .banner-btn{
    display:inline-flex; justify-content:center; align-items:center;
    min-width:56%; padding:.9rem 1.2rem; border-radius:10px;
    background:var(--brand-blue); color:#fff; text-decoration:none; border:1px solid transparent;
    transition:background .2s ease, transform .12s ease;
  }
  .banner .banner-btn:hover{ background:var(--brand-blue-hover); transform:translateY(-1px); }

  /* Paginación del slider más cerca del borde inferior */
  .swiper-pagination{ bottom:14px !important; }
}

/* Ultra-chico */
@media (max-width:360px){
  .banner .banner-text.large{ font-size:1.8rem; }
}

:root{ --header-h: 64px; } /* si tu header mide otra cosa, cambiá este valor */

/* ===== Banner full height en MOBILE ===== */
@media (max-width: 768px){

  /* El contenedor y cada slide tienen el mismo alto (pantalla - header) */
  .banner .swiper,
  .banner .swiper-wrapper,
  .banner .swiper-slide{
    height: calc(100dvh - var(--header-h));
    min-height: calc(100dvh - var(--header-h));
  }
  .banner .swiper{ position: relative; overflow: hidden; }

  /* La imagen se estira a cubrir TODO el slide */
  .banner .swiper-slide{ position: relative; }
  .banner .swiper-slide > img{
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;            /* recorta sin deformar */
    display: block;
  }

  /* Overlay de texto arriba de la imagen */
  .banner .overlay{
    position: relative; z-index: 1;
    padding: 72px 16px 28px;
    text-align: center;
    background: transparent !important; /* por si algún estilo le metió fondo */
  }

  /* Degradado para legibilidad (opcional) */
  .banner .swiper-slide::before{
    content:""; position:absolute; inset:0; z-index:0;
    background: linear-gradient(180deg,
                rgba(0,0,0,.25) 0%,
                rgba(0,0,0,.45) 60%,
                rgba(0,0,0,.55) 100%);
  }

  /* Tipos del banner (ajustes de tamaño) */
  .banner .banner-text.medium{ font-size:1.05rem; margin:0 0 .5rem; }
  .banner .banner-text.large{ font-size:2rem; line-height:1.15; margin:.25rem 0 .75rem; }
  .banner .banner-text.small{ font-size:1rem; line-height:1.6; max-width:32ch; margin:0 auto 1rem; }

  /* Botón CTA */
  .banner .banner-btn{
    display:inline-flex; justify-content:center; align-items:center;
    min-width:56%; padding:.9rem 1.2rem; border-radius:10px;
    background:#003366; color:#fff; text-decoration:none; border:1px solid transparent;
    transition:background .2s ease, transform .12s ease;
  }
  .banner .banner-btn:hover{ background:#005599; transform:translateY(-1px); }

  /* Paginación más cerca del borde inferior */
  .swiper-pagination{ bottom: 14px !important; }
}

/* ===========================
   SOBRE NOSOTROS – MOBILE ONLY
   =========================== */
@media (max-width: 768px) {

  /* Contenedor (soporta id y/o clase) */
  #nosotros.sobre-container,
  .sobre-container {
    padding: 32px 16px;
    display: block !important;
  }

  /* Columna de texto */
  #nosotros .sobre-nosotros,
  .sobre-container .sobre-nosotros {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Título + línea (alineado a la izquierda) */
  #nosotros .sobre-nosotros h1,
  .sobre-container .sobre-nosotros h1 {
    text-align: left;
    font-size: 1.8rem;
    line-height: 1.2;
    margin: 0 0 .25rem;
  }

  #nosotros .sobre-nosotros .linea,
  .sobre-container .sobre-nosotros .linea {
    width: 72px;
    height: 6px;
    background: #66a3cc;
    border-radius: 3px;
    margin: .5rem 0 1rem 0;
  }

  /* Párrafos (ancho cómodo de lectura) */
  #nosotros .sobre-nosotros p,
  .sobre-container .sobre-nosotros p {
    text-align: left;
    font-size: 1rem;
    line-height: 1.7;
    margin: 0 0 .9rem;
    max-width: 42ch;
  }

  /* Logos: 4 en una sola fila (mobile) */
  #nosotros .logos,
  .sobre-container .logos {
    display: flex;            /* ← antes: grid */
    flex-wrap: nowrap;        /* una sola línea */
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: .5rem;

    /* opcional: si en pantallas muy chicas no entran los 4, habilitá scroll horizontal suave */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  #nosotros .logos img,
  .sobre-container .logos img {
    flex: 0 0 auto;           /* no se achican */
    height: 40px;             /* ajustá a 36–44px según prefieras */
    width: auto;
    display: block;
  }

  /* Ajustes finos por logo (opcional) */
  .sobre-container .logos .logo1 { height: 40px; }
  .sobre-container .logos .logo2 { height: 38px; }
  .sobre-container .logos .logo3 { height: 38px; }
  .sobre-container .logos .logo4 { height: 40px; }
} /* ← cierra @media (max-width: 768px) */

/* Ultra chico (≤360px): achicamos un toque */
@media (max-width: 360px) {
  #nosotros .sobre-nosotros h1,
  .sobre-container .sobre-nosotros h1 { font-size: 1.6rem; }

  #nosotros .logos img,
  .sobre-container .logos img { height: 34px; } /* un poco menos para que entren sin scroll */
}

@media (max-width: 768px){

  /* espacio extra entre logos y "Nuestro Enfoque" */
  .sobre-container .logos{ margin-bottom: 28px; }

    /* cajas tipo píldora (mismo look) */
  .nuestro-enfoque .enfoque-item{
    padding: 18px 20px;
    margin-bottom: 14px;
    border-radius: 40px;
    background: #cfe0ee;
    border: 2px solid #2f5a86;
    display: flex; align-items: center; gap: 12px;
    color:#003366; font-size: 1rem; line-height: 1.55;
    text-align: left;
  }
}

/* ===========================
   SERVICIOS – MOBILE (≤768px)
   =========================== */
@media (max-width: 768px){
  #servicios.servicios{ padding: 32px 16px; }

  /* 1 columna con espacio entre tarjetas */
  #servicios .service-grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px;                      /* ← separación entre tarjetas */
  }

  /* que las cards ocupen todo el ancho disponible */
  #servicios .service{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;           /* por si tenían margen lateral */
  }

  /* tipografía cómoda en mobile (opcional) */
  #servicios .service h3{ font-size: 1.25rem; line-height: 1.3; }
  #servicios .service p{ font-size: 1rem; }

  /* centrar el botón dentro de cada card */
  #servicios .service .certbox-buttons2{ justify-content: center; }
}
/* ===========================
   CLIENTES – Mobile (3 x 4)
   =========================== */
@media (max-width: 768px){
  #clientes { padding: 32px 16px; }

  /* 4 logos por fila, 3 filas */
  #clientes .clientes-logos{
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px 16px;                 /* separaciones (fila / columna) */
    justify-items: center;
    align-items: center;
  }

  /* cada celda centra su logo */
  #clientes .clientes-logos > *{
    display:flex; align-items:center; justify-content:center;
  }

  /* tamaño consistente de los logos */
  #clientes .clientes-logos img{
    height: 36px;                   /* alto uniforme */
    max-width: 80px;                /* evita que alguno sea muy ancho */
    width: auto;                    /* mantiene proporción */
    display:block;
  }
}

/* pantallas muy chicas */
@media (max-width: 360px){
  #clientes .clientes-logos{ gap: 16px 12px; }
  #clientes .clientes-logos img{ height: 32px; max-width: 72px; }
}

/* Compactar espacio bajo los logos – solo mobile */
@media (max-width: 768px){
  /* reduce el aire del propio bloque */
  #clientes.clientes{
    padding-bottom: 0 !important;   /* antes suele ser 40–80px */
    min-height: auto !important;       /* por si hay un min-height heredado */
  }

  /* que el contenedor de logos no agregue aire extra */
  #clientes .clientes-logos{
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* eliminar márgenes del último hijo del section (por si queda un gap) */
  #clientes > :last-child{
    margin-bottom: 0 !important;
  }

  /* si el siguiente bloque trae un margin-top grande, lo acortamos */
  #clientes + section{
    margin-top: 12px !important;
  }
}

/* ===========================
   CONTACTO – Mobile (≤768px)
   =========================== */
@media (max-width: 768px){

  /* contenedor y fondo clarito */
  #contacto.contacto{
    padding: 28px 16px 36px;
    background: #e9f2f7;                 /* el celeste del mock */
  }
  #contacto .contacto-contenedor{ display:block !important; }
  #contacto .formulario{ width:100%; max-width:100%; }

  /* título + línea a la izquierda */
  #contacto .formulario h2{
    font-size: 2rem;
    line-height: 1.2;
    margin: 0 0 .25rem;
    text-align: left;
  }
  #contacto .formulario .linea{
    display:block; width:72px; height:6px;
    background:#66a3cc; border-radius:3px;
    margin:.5rem 0 1rem 0;
  }

  /* texto introductorio */
  #contacto .formulario p{
    font-size: 1.05rem;
    line-height: 1.55;
    margin: 0 0 14px;
    color: #1c3d66;
    text-align: left;
  }

  /* campos: 1 por fila, con sombra suave */
  #contacto .form-row{
    display:flex; flex-direction:column; gap:12px;
  }
  #contacto input[type="text"],
  #contacto input[type="email"],
  #contacto textarea{
    width:100%;
    background:#fff;
    border:1.5px solid #dfe7ef;
    border-radius:10px;
    padding:14px 16px;
    font-size:1rem;
    box-shadow:0 3px 14px rgba(0,0,0,.06);
    outline:none;
  }
  #contacto textarea{ min-height:160px; resize:vertical; }
  #contacto input::placeholder,
  #contacto textarea::placeholder{ color:#b9c6d3; }

  /* botón centrado y con pastilla azul */
  #contacto .btn-form{
    display:block;
    margin: 16px auto 0;
    padding:.9rem 1.6rem;
    width: 120px;                       /* similar a la imagen */
    border-radius: 28px;                /* forma de pastilla */
    box-shadow: 0 10px 24px rgba(0,0,0,.08);
  }
}

/* ===========================
   CONTACTO → PANEL "Información" (≤768px)
   =========================== */
@media (max-width: 768px){

  /* Card azul */
  #contacto .info{
    background:#0c2f57;        /* azul oscuro del sitio */
    color:#fff;
    border-radius:20px;
    padding:22px;
    margin-top:18px;            /* debajo del formulario */
    box-shadow:0 10px 24px rgba(0,0,0,.12);
  }

  /* Título + línea celeste */
  #contacto .info h3{
    font-size:1.8rem;
    line-height:1.2;
    margin:0 0 .25rem;
    color:#fff;
    text-align:left;
  }
  #contacto .info .linea{
    display:block;
    width:72px; height:6px;
    background:#66a3cc;        /* celeste */
    border-radius:3px;
    margin:.5rem 0 1rem 0;
  }

  /* Intro */
  #contacto .info > p{
    font-size:1.05rem;
    line-height:1.6;
    margin:0 0 18px;
    color:#dfe9f3;
    text-align:left;
  }

  /* Filas con icono + texto */
  #contacto .info .dato{
    display:flex;
    align-items:flex-start;
    gap:12px;
    color:#fff;
    text-align:left;
  }
  #contacto .info .dato i{
    font-size:26px;
    color:#a9c7e6;             /* icono más claro */
    line-height:1;
    margin-top:2px;            /* alineación con la 1ª línea del texto */
    min-width:26px;
  }
  #contacto .info .dato > span{
    font-size:1.05rem;
    line-height:1.6;
    font-weight:700;           /* dirección en bold como la maqueta */
  }

  /* Teléfonos en una línea con “|” al medio */
  #contacto .info .telefonos{
    display:flex; flex-wrap:wrap; align-items:center;
    gap:8px;
    color:#fff;
    font-weight:700;
  }
  #contacto .info .telefonos span + span::before{
    content:"|";
    margin:0 8px 0 4px;
    opacity:.85;
  }

  /* Separadores */
  #contacto .info hr{
    border:0;
    height:1px;
    background:rgba(255,255,255,.35);
    margin:18px 0;
  }
}

/* CONTACTO → Info full-bleed (cubrir derecha y abajo) */
@media (max-width: 768px){
  /* quita padding inferior del section para que el azul llegue abajo */
  #contacto.contacto{ padding-bottom: 0; }

  #contacto .info{
    background:#0c2f57;
    /* full-bleed */
    position: relative;
    left: 50%;
    right: 50%;
    width: 100vw;            /* ocupa todo el viewport */
    max-width: 100vw;
    margin-left: -50vw;      /* come los márgenes/paddings laterales */
    margin-right: -50vw;
    margin-top: 18px;
    margin-bottom: 0;        /* sin hueco abajo */
    padding: 22px 24px;      /* ajusta a gusto */
    border-radius: 0;        /* sin esquinas para cubrir bordes */
    box-sizing: border-box;  /* padding incluido en el ancho */
    box-shadow: none;        /* quita sombra si dejaba borde claro */
  }

  /* por si el siguiente section trae un margin-top grande */
  #contacto + section { margin-top: 16px; }
}


/* ===== Banner + caja superpuesta ===== */
.banner-servicios { position: relative; }

/* Imagen del banner */
.banner-servicios .banner-imagen img{
  width: 100%;
  height: clamp(260px, 45vh, 520px);
  object-fit: cover;
  display: block;
}

/* Caja superpuesta */
.caja-servicios2{
  position: relative;
  z-index: 2;                         /* por encima del banner */
  background: #fff;
  width: min(1100px, calc(100% - 48px));
  margin: -80px auto 40px;            /* 👈 sube la caja sobre la imagen */
  padding: 24px 22px;
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
}

/* Ocultar la imagen inferior */
.caja-imagen{ display: none !important; }

/* Opcional: estilos de la lista para que quede prolija */
.caja-servicios2 ul{ list-style: none; margin: 0; padding: 0; }
.caja-servicios2 li{
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 0;
  border-bottom: 2px solid #dbe6f0;
}
.caja-servicios2 li:last-child{ border-bottom: 0; }
.caja-servicios2 .icono{
  flex: 0 0 28px; width: 28px; height: 28px; margin-top: 2px;
  display: flex; align-items: center; justify-content: center;
}
.caja-servicios2 .icono img{ width: 100%; height: auto; display:block; }

/* Responsive: ajusta la superposición en pantallas chicas */
@media (max-width: 768px){
  .caja-servicios2{
    width: calc(100% - 32px);
    margin: -60px auto 28px;
    padding: 18px 16px;
    border-radius: 14px;
  }
}


/* Caja superpuesta */
.caja-servicios{
  position: relative;
  z-index: 2;                         /* por encima del banner */
  background: #fff;
  width: min(1100px, calc(100% - 48px));
  margin: -80px auto 40px;            /* sube la caja sobre la imagen */
  padding: 24px 22px;
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
}

/* Ocultar la imagen inferior */
.caja-imagen2{ display: none !important; }

/* Lista prolija */
.caja-servicios ul{ list-style:none; margin:0; padding:0; }
.caja-servicios li{
  display:flex; align-items:flex-start; gap:12px;
  padding:16px 0;
  border-bottom:2px solid #dbe6f0;
}
.caja-servicios li:last-child{ border-bottom:0; }
.caja-servicios .icono{
  flex:0 0 28px; width:28px; height:28px; margin-top:2px;
  display:flex; align-items:center; justify-content:center;
}
.caja-servicios .icono img{ width:100%; height:auto; display:block; }

/* Eliminar hueco entre esta caja y la siguiente sección (opcional) */
.banner-servicios{ --overlap: 80px; }           /* ajustá 60–90px según veas */
.caja-servicios{ margin-top: calc(-1 * var(--overlap)); }
.banner-servicios{ margin-bottom: calc(-1 * var(--overlap)); }

/* Responsive */
@media (max-width: 768px){
  .caja-servicios{
    width: calc(100% - 32px);
    margin: -60px auto 28px;
    padding: 18px 16px;
    border-radius: 14px;
  }
}

/* ===== Banner + caja superpuesta (para .caja-servicios) ===== */
.banner-servicios{ position: relative; --overlap: 80px; }  /* solape con el banner */

/* Caja superpuesta */
.caja-servicios{
  position: relative;
  z-index: 2;                          /* arriba del banner */
  background: #fff;
  width: min(1100px, calc(100% - 48px));
  margin: calc(-1 * var(--overlap)) auto 40px;   /* sube sobre la imagen */
  padding: 24px 22px;
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
}

/* Ocultar la imagen inferior */
.caja-imagen3{ display: none !important; }

/* Lista e icono */
.caja-servicios ul{ list-style: none; margin: 0; padding: 0; }
.caja-servicios li{
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 0;
  border-bottom: 2px solid #dbe6f0;
}
.caja-servicios li:last-child{ border-bottom: 0; }
.caja-servicios .icono{
  flex: 0 0 28px; width: 28px; height: 28px; margin-top: 2px;
  display: flex; align-items: center; justify-content: center;
}
.caja-servicios .icono img{ width: 100%; height: auto; display:block; }

/* Quitar hueco blanco entre el banner y la siguiente sección */
.banner-servicios{ margin-bottom: calc(-1 * var(--overlap)); }

/* Responsive */
@media (max-width: 768px){
  .banner-servicios{ --overlap: 60px; }  /* solape un poco menor en mobile */

  .caja-servicios{
    width: calc(100% - 32px);
    margin: calc(-1 * var(--overlap)) auto 28px;
    padding: 18px 16px;
    border-radius: 14px;
  }
}

/* ===== Footer full & sin recortes (≤768px) ===== */
@media (max-width:768px){
  /* el section anterior no deja hueco */
  section + footer,
  .otros-servicios + footer,
  #contacto + footer { margin-top: 0 !important; }

  /* footer ocupa todo el ancho y altura automática */
  footer, .footer{
    width: 100%;
    max-width: 100%;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: 20px 16px 28px !important;   /* aire abajo para que no se “corte” */
    box-sizing: border-box;
  }

  /* si tu footer usa un contenedor interno */
  footer .footer-inner, .footer .footer-inner{
    max-width: 1200px; margin: 0 auto; padding: 0;
  }

  /* texto no forzado a una sola línea */
  footer .copyright, 
  footer p, 
  .footer .copyright{
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
}

@media (max-width:768px){
  footer{
    position: relative;
    left: 50%;
    right: 50%;
    width: 100vw;          /* ocupa todo el viewport */
    margin-left: -50vw;
    margin-right: -50vw;
  }
}

/* OTROS SERVICIOS — FIX DEFINITIVO MOBILE */
@media (max-width: 768px){

  /* quita cualquier hueco que deje el bloque anterior */
  .banner-servicios{ margin-bottom: 0 !important; }
  .banner-servicios + .otros-servicios{ margin-top: 0 !important; padding-top: 0 !important; }

  /* SIN overflow lateral en la sección */
  section.otros-servicios{
    padding: 0 16px 40px !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* fuerza stack vertical (por si está en grid o flex en desktop) */
  section.otros-servicios .otros-servicios-grid,
  .otros-servicios .otros-servicios-grid,
  .otros-servicios-grid{
    display: block !important;              /* ← apila */
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* cada tarjeta ocupa el ancho con gutters y queda centrada */
  section.otros-servicios .servicio-card,
  .otros-servicios .servicio-card,
  .servicio-card{
    width: calc(100% - 32px) !important;    /* gutters de 16px a cada lado */
    margin: 0 auto 22px !important;         /* centradas y con gap abajo */
    box-sizing: border-box !important;

    /* estilo consistente */
    background: #fff;
    border-radius: 22px !important;
    padding: 24px 20px !important;
    text-align: center !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.10) !important;
  }
  /* última sin margen extra */
  section.otros-servicios .servicio-card:last-child,
  .otros-servicios .servicio-card:last-child,
  .servicio-card:last-child{ margin-bottom: 0 !important; }

  /* tipografías dentro de la card */
  section.otros-servicios .servicio-card h3,
  .otros-servicios .servicio-card h3{ 
    font-size: 1.35rem !important; line-height: 1.25 !important; margin: 0 0 10px !important; 
  }
  section.otros-servicios .servicio-card p,
  .otros-servicios .servicio-card p{ 
    font-size: 1rem !important; line-height: 1.55 !important; margin: 0 0 16px !important; 
  }

  /* botón centrado y sin desbordar */
  section.otros-servicios .certbox-buttons2,
  .otros-servicios .certbox-buttons2{ 
    display: flex !important; justify-content: center !important; 
  }
  section.otros-servicios .certbox-buttons2 a,
  .otros-servicios .certbox-buttons2 a{ 
    padding: .9rem 1.6rem !important; border-radius: 12px !important; max-width: 100% !important; 
  }

  /* cinturón y tirantes contra la barrita negra lateral */
  html, body{ overflow-x: hidden !important; }
}

/* Subir toda la sección "otros servicios" (≤768px) */
@media (max-width: 768px){
  /* cuánto la querés levantar (ajustá 16–40px) */
  section.otros-servicios{ --lift: 28px; }

  /* quitar aire del bloque anterior por si lo hubiera */
  .banner-servicios{ margin-bottom: 0 !important; }

  /* levantar la sección completa */
  section.otros-servicios{
    margin-top: calc(-1 * var(--lift)) !important;
    padding-top: 2rem !important;
  }

  /* evitar márgenes colapsados del primer hijo (h2, etc.) */
  section.otros-servicios > :first-child{ margin-top: 0 !important; }
}

/* Por defecto oculto (evita parpadeos) */
header .burger{
  display: none;
  border: 0;
  background: transparent;
  color: #003366;
  font-size: 28px;
  line-height: 1;
}

/* Mobile / tablet: mostrar burger */
@media (max-width: 1024px){
  header .burger{
    display: inline-flex;         /* visible */
    align-items: center;
    justify-content: center;
    margin-left: auto;            /* lo lleva a la derecha */
  }

  /* (opcional) si ocultas el menú en mobile */
  /* #navbar{ display: none; } */
}

/* Desktop: asegurarse que esté oculto y que el nav quede a la derecha */
@media (min-width: 1025px){
  header .burger{ display: none !important; }
  #navbar{ margin-left: auto; }   /* empuja el nav a la derecha */
}

/* El padre debe ser relativo */
.banner-servicios{ position: relative; }

/* =======================
   DESKTOP (≥1025px)
   ======================= */
@media (min-width:1025px){

  /* Cajas de texto (izquierda) */
  .caja-servicios,
  .caja-servicios2{
    position: absolute;
    top: 50%;
    left: 50px;
    transform: translateY(-50%);
    width: 600px;
    background: #fff;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    z-index: 2;
    margin-top: -80px;
  }
  .caja-servicios{ height: 575px; }
  .caja-servicios2{ height: 450px; }

  /* Cajas de imagen (derecha) – SIEMPRE visibles en desktop */
  .caja-imagen,
  .caja-imagen2,
  .caja-imagen3{
    display: block !important;         /* ← restaura en desktop */
    position: absolute;
    top: 50%;
    right: 50px;
    transform: translateY(-50%);
    width: 600px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
    z-index: 2;
    margin-top: -80px;
  }
  .caja-imagen{  height: 455px; }
  .caja-imagen2{ height: 575px; }
  .caja-imagen3{ height: 575px; }

  .caja-imagen img,
  .caja-imagen2 img,
  .caja-imagen3 img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Estilos internos (listas/íconos) – tus reglas originales */
  .caja-servicios .icono,
  .caja-servicios2 .icono{
    display: flex; justify-content: center; align-items: center;
    width: 24px; height: 24px; font-size: .8rem; flex-shrink: 0;
    margin-top: 1px; margin-right: 8px;
  }

  .caja-servicios h3,
  .caja-servicios2 h3{
    font-size: 1.3rem; font-weight: 700; color: #1a3763; margin-bottom: .5rem;
  }
  .caja-servicios .linea,
  .caja-servicios2 .linea{
    display:block; width:60px; height:3px; background:#66a3cc; margin-bottom:1.5rem;
  }

  .caja-servicios ul,
  .caja-servicios2 ul{ list-style:none; margin:0; padding:0; }

  .caja-servicios li{
    display:flex; align-items:flex-start; gap:10px;
    padding:1rem 0; border-bottom:1px solid #1a3763;
  }
  .caja-servicios2 li{
    display:flex; align-items:flex-start; gap:12px;
    padding:1rem 0; border-bottom:1px solid #1a3763;
    margin-bottom: 1.5rem;                 /* 🔧 corregí el espacio (antes “1.5 rem”) */
  }
  .caja-servicios li:last-child,
  .caja-servicios2 li:last-child{ border-bottom:none; }

  .caja-servicios p,
  .caja-servicios2 p{
    margin:0; color:#1a3763; line-height:1.5; font-size:1rem;
  }
  .caja-servicios p strong,
  .caja-servicios2 p strong{ font-weight:700; }
}

/* =======================
   MOBILE/TABLET (≤1024px)
   ======================= */
@media (max-width:1024px){

  /* Oculta la imagen de la derecha solo en mobile */
  .caja-imagen,
  .caja-imagen2,
  .caja-imagen3{ display: none !important; }

  /* Caja responsiva superpuesta al banner */
  .banner-servicios{ --overlap: 60px; }
  .caja-servicios,
  .caja-servicios2{
    position: relative;
    top: auto; left: auto; right: auto;
    transform: none;
    width: calc(100% - 32px);
    margin: calc(-1 * var(--overlap)) auto 28px;
    padding: 18px 16px;
    height: auto;                   /* no altura fija en mobile */
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(0,0,0,.10);
  }

  /* Que el banner “se coma” el hueco bajo la superposición */
  .banner-servicios{
    margin-bottom: calc(-1 * var(--overlap)) !important;
    padding-bottom: 0 !important;
  }
}

/* Fix: que la tarjeta crezca con su contenido */
@media (min-width:1025px){
  .caja-servicios,
  .caja-servicios2{
    height: auto !important;      /* ← quita la altura fija */
    box-sizing: border-box;
    padding-bottom: 24px;         /* aire al final */
  }
  .caja-servicios{  min-height: 575px; }  /* opcional: alinear con imagen */
  .caja-servicios2{ min-height: 450px; }  /* opcional: alinear con imagen */
}

/* En mobile ya la hacemos responsive: sin altura fija */
@media (max-width:1024px){
  .caja-servicios,
  .caja-servicios2{
    height: auto !important;
  }
}

/* Asegura que el último item no agregue espacio extra */
.caja-servicios li:last-child,
.caja-servicios2 li:last-child{
  border-bottom: none;
  margin-bottom: 0;
}

/* ===========================
   FOOTER – Desktop (≥1025px)
   =========================== */
@media (min-width: 1025px){
  footer, .footer{
    position: relative;
    background: #222;         /* tu gris oscuro */
    color: #fff;
    width: 100%;
    left: auto; right: auto;  /* anula full-bleed de mobile si quedó */
    margin: 0;                /* sin saltos arriba */
    clear: both;              /* cae debajo de floats previos */
    overflow: visible !important;
    height: auto !important;
  }

  /* contenedor central */
  footer .footer-inner{
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 24px 28px;
    box-sizing: border-box;
  }

  /* dos columnas: texto / redes */
  footer .footer-grid{
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 32px;
    align-items: start;
  }

  /* títulos/párrafos */
  footer h4, footer .title{
    margin: 0 0 10px;
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
  }
  footer p{
    margin: 0;
    line-height: 1.7;
    color: #e5e7eb;            /* texto clarito */
  }

  /* redes a la derecha */
  footer .social, footer .redes{
    justify-self: end;
    text-align: right;
  }
  footer .social-list,
  footer .redes ul{
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    gap: 22px;
    justify-content: flex-end;
    align-items: center;
  }
  footer .social-list a,
  footer .redes a{
    color: #fff;
    font-size: 28px;           /* tamaño de íconos */
    line-height: 1;
    display: inline-flex;
  }
  footer .social-list a:hover,
  footer .redes a:hover{ color: #66a3cc; }

  /* copyright a todo el ancho, debajo */
  footer .copyright{
    border-top: 1px solid rgba(255,255,255,.15);
    margin-top: 24px;
    padding-top: 14px;
    color: #cbd5e1;
    font-size: .95rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
  }
}

/* ===== FIX mobile: que no se tape el último card ===== */
@media (max-width: 768px){

  /* 1) Levantamos un poco menos la sección anterior */
  .banner-servicios{ --lift-m: 56px; } /* si aún queda hueco, sube a 60–64 */

  /* mantené el comer-hueco, pero sin excederte arriba */
  .banner-servicios{
    margin-bottom: calc(-1 * var(--lift-m)) !important;
    padding-bottom: 0 !important;
  }
  .banner-servicios + .otros-servicios{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* 2) La sección de tarjetas con aire al pie y sin recortes */
  section.otros-servicios{
    padding-bottom: 72px !important;   /* colchón para que no lo pise el footer */
    overflow: visible !important;
    position: relative;
    z-index: 2;                         /* queda por encima del fondo del footer */
  }
  .otros-servicios .servicio-card{
    position: relative;
    z-index: 2;
  }

  /* 3) Footer NO debe “tapar” nada */
  footer, .footer{
    position: relative !important;   /* evita fixed/absolute en mobile */
    z-index: 1 !important;           /* más bajo que las cards */
    margin-top: 0 !important;
    clear: both;
  }
}

/* Subir la caja de "Servicios incluidos" 1 cm en mobile */
@media (max-width: 768px){
  /* 1 cm en CSS ≈ 37.8px → usamos 38px */
  .banner-servicios{ --bump-1cm: 38px; }

  /* Si ya usás --lift-box / --lift-next, los incrementamos en 1cm */
  .caja-servicios,
  .caja-servicios2{
    margin: calc(-1 * ((var(--lift-box, 72px)) + var(--bump-1cm))) auto 28px !important;
  }
  .banner-servicios{
    margin-bottom: calc(-1 * ((var(--lift-next, 72px)) + var(--bump-0cm))) !important;
    padding-bottom: 0 !important;
  }
}

/* === GAP entre secciones (tuneables) === */
:root{
  --gap-top-m: 28px;   /* espacio DESPUÉS del banner en mobile */
  --gap-top-d: 80px;   /* espacio DESPUÉS del banner en desktop */
  --gap-bottom-m: 100px;/* espacio ANTES del footer en mobile */
  --gap-bottom-d: 100px;/* espacio ANTES del footer en desktop */
}

/* Mobile / Tablet */
@media (max-width:768px){
  /* + aire entre “Servicios incluidos” y “Conocé nuestros otros servicios” */
  .banner-servicios + .otros-servicios{
    margin-top: var(--gap-top-m) !important;
    padding-top: 0 !important;
  }

  /* + aire antes del footer para que no pise las tarjetas */
  .otros-servicios{
    padding-bottom: var(--gap-bottom-m) !important;
  }
}

/* Desktop */
@media (min-width:1025px){
  /* + aire entre “Servicios incluidos” y “Conocé nuestros otros servicios” */
  .banner-servicios + .otros-servicios{
    margin-top: var(--gap-top-d) !important;
  }

  /* + aire antes del footer */
  .otros-servicios{
    padding-bottom: var(--gap-bottom-d) !important;
  }
}

/* Desktop (≥1025px): levantar ambas cajas del banner */
@media (min-width:1025px){
  .banner-servicios{ 
    --lift-desktop: 120px;           /* ⇦ subí/bajá este valor (p. ej. 110–140px) */
    overflow: visible;               /* por si algún contenedor recortaba */
  }

  .caja-servicios,
  .caja-servicios2,
  .caja-imagen,
  .caja-imagen2,
  .caja-imagen3{
    margin-top: calc(-1 * var(--lift-desktop)) !important;
  }

  /* (opcional) un poco de aire extra antes de la sección siguiente */
  .banner-servicios + .otros-servicios{
    margin-top: 64px !important;
  }
}

/* MOBILE: subir un poco la caja y dejar un gap visible con la siguiente sección */
@media (max-width: 768px){
  /* La caja sube visualmente 16px. Probá 12–22px si querés afinar */
  .caja-servicios,
  .caja-servicios2{
    position: relative;
    transform: translateY(-16px) !important;  /* ← levanta la caja */
    will-change: transform;
    height: auto !important;                  /* por si quedó fija */
    box-sizing: border-box;
  }

  /* Que no se recorte la sombra al subirla */
  .banner-servicios{ overflow: visible; }

  /* Gap real con “Conocé nuestros otros servicios” */
  .banner-servicios + .otros-servicios{
    margin-top: 20px !important;   /* ajustá 16–28px a gusto */
  }

  /* remate prolijo del último ítem */
  .caja-servicios li:last-child,
  .caja-servicios2 li:last-child{
    border-bottom: none;
    margin-bottom: 0;
  }
}