/* ==========================================================================
   CSS PRINCIPAL - GRUPO HPC
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. VARIABLES Y RESET
   -------------------------------------------------------------------------- */
:root {
  /* Paleta de colores */
  --azul-oscuro: #001a3b;
  --azul-medio: #005b88;
  --azul-claro: #07aff2;
  --verde-acento: #c5ec43;
  --verde-hover: #09fcce;
  --blanco: #f5f5f5;
  --blanco-puro: #ffffff;
  --texto-oscuro: #333333;

  /* Tipografías */
  --font-titulos: "Oswald", sans-serif;
  --font-textos: "Raleway", sans-serif;

  /* Transiciones */
  --transicion-rapida: 0.3s ease;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-textos);
  color: var(--texto-oscuro);
  background-color: var(--blanco-puro);
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-titulos);
  font-weight: 500;
}

a {
  transition: all var(--transicion-rapida);
}

/* Clases utilitarias comunes */
.center {
  text-align: center;
  justify-content: center;
  align-items: center;
}
.middle {
  display: flex;
  align-items: center;
  justify-content: center;
}
.column {
  display: flex;
  flex-direction: column;
}
.relative {
  position: relative;
}
.img-bg,
.img-bg-h {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* --------------------------------------------------------------------------
   PRELOADER
   -------------------------------------------------------------------------- */
body.no-scroll {
  overflow: hidden;
}

#page-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--blanco-puro);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  transition:
    opacity 0.6s ease,
    visibility 0.6s ease;
}

#page-loader.loaded {
  opacity: 0;
  visibility: hidden;
}

.loader-content {
  position: relative;
  width: 110px;
  height: 110px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.spinner-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 4px solid transparent;
  border-top-color: var(--azul-medio);
  border-right-color: var(--verde-acento);
  border-bottom-color: var(--azul-claro);
  border-left-color: var(--verde-hover);
  border-radius: 50%;
  animation: spin 1.5s linear infinite;
}

.loader-logo {
  width: 65px;
  height: auto;
  z-index: 2;
  animation: spin 2.5s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* --------------------------------------------------------------------------
   1b. CLASES DE FONDOS DE IMAGEN (gestionadas desde CSS, rutas relativas)
   -------------------------------------------------------------------------- */

/* Hero / Destacado */
.bg-hero {
  background-image: url("../img/fondos/fondo_seccion_1.jpg");
}

/* Sección Conócenos */
.bg-conocenos {
  background-image: url("../img/fondos/fondo_conocenos.jpg");
}

/* Sección Servicios */
.bg-servicios {
  background-image: url("../img/fondos/fondo_servicios.jpg");
}

/* Sección Proyectos */
.bg-proyectos {
  background-image: url("../img/fondos/fondo_proyectos.jpg");
}

/* Sección Contacto (cadena submarina) */
.bg-contacto {
  background-image: url("../img/fondos/fondo_cadena.jpg");
  background-position: center top;
}

/* Footer */
.bg-footer {
  background-image: url("../img/fondos/fondo_footer.jpg");
}

/* Copyright del footer */
.text-footer-copy {
  color: var(--blanco);
  font-family: var(--font-textos);
  font-size: 14px;
}

/* --------------------------------------------------------------------------
   2. HEADER Y NAVBAR
   -------------------------------------------------------------------------- */
.overlay-nav {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  background: linear-gradient(
    to bottom,
    rgba(0, 26, 59, 0.95),
    rgba(0, 91, 136, 0.85)
  );
  border-bottom: 3px solid var(--verde-acento);
  transition: background 0.4s ease;
}

.navbar {
  padding: 0.5rem 1rem;
}

.navbar-brand img.logo {
  transition: transform var(--transicion-rapida);
  margin-left: 60px;
  aspect-ratio: auto 175 / 60;
  vertical-align: middle;
  border-style: none;
}
.navbar-brand:hover img.logo {
  transform: scale(1.05);
}

.menu-principal .nav-link {
  color: var(--blanco) !important;
  font-family: var(--font-titulos);
  font-weight: 600;
  line-height: 1.5;
  padding: 0.5rem 1rem;
  text-transform: uppercase;
  text-align: left;
  transition: all 0.3s;
  font-size: clamp(1rem, 1.4vw, 1.4rem);
  letter-spacing: 0.5px;
}

.menu-principal .nav-link:hover,
.menu-principal .nav-item.active .nav-link {
  color: var(--verde-hover) !important;
}

.menu-redes .red-social {
  color: var(--verde-acento) !important;
  font-size: 1.2rem;
  padding: 0.5rem;
}

.menu-redes .red-social:hover {
  color: var(--verde-hover) !important;
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   3. SECCIÓN DESTACADO (HERO)
   -------------------------------------------------------------------------- */
.altura-dest {
  height: 100vh;
  min-height: 600px;
  padding-top: 100px; /* Compensa la navbar fija */
}

.slogan-container {
  margin-top: auto;
  margin-bottom: auto;
  margin-left: 0;
  padding-left: 4rem;
}

.hero-box {
  border: 4px solid var(--blanco);
  padding: 2rem 3rem;
  max-width: 650px;
}

.slogan-titulo {
  display: flex;
  flex-direction: column;
  color: var(--blanco);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
  margin: 0;
}

.slogan-l1 {
  font-size: clamp(2.4rem, 6vw, 5.5rem);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}
.slogan-l2 {
  font-size: clamp(1.6rem, 4.5vw, 4rem);
  font-weight: 500;
  line-height: 1.1;
  text-transform: uppercase;
}
.slogan-l3 {
  font-size: clamp(1.5rem, 3.8vw, 3.2rem);
  font-weight: 500;
  line-height: 1.1;
  text-transform: uppercase;
}

.button-featured {
  margin-top: 1.5rem;
}

.enviar {
  z-index: 111;
  background-color: var(--verde-hover);
  width: auto;
  cursor: pointer;
  transition: all 0.3s;
  font-style: normal;
  text-decoration: none;
}

.enviar a .escribe {
  font-family: var(--font-titulos);
  font-size: clamp(1rem, 1.5vw, 1.5rem);
  color: #005b88;
  font-style: normal;
  letter-spacing: -0.9px;
}

.btn-close-grey {
  color: black;
  z-index: 100;
}

.btn-hero-escribenos i {
  margin-right: 10px;
}

.fa-envelope {
  color: #005b88;
  font-size: 1.8em;
  padding-top: 2px;
  margin-right: 5px;
}
.enviar {
  padding: 5px 28px;
  z-index: 111;
  background: #09fcce;
  cursor: pointer;
  transition: all 0.3s;
  max-width: 15rem;
}

.enviar a {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  text-decoration: none;
}

.enviar a {
  -ms-flex-pack: space-evenly;
  justify-content: space-evenly;
}
.enviar a span {
  transition: all 0.3s;
  font-family: oswald-regular, sans-serif;
}
.enviar:hover {
  background: #005b88;
}
.enviar:hover .fa-envelope,
.enviar:hover span {
  color: #09fcce;
}

*,
::after,
::before {
  box-sizing: border-box;
}
/* --------------------------------------------------------------------------
   4. SECCIÓN CONÓCENOS
   -------------------------------------------------------------------------- */
.altura {
  min-height: 600px;
}

.overlay-conocenos {
  /*background-color: rgba(0, 26, 59, 0.7);*/
  width: 100%;
  height: 100%;
  padding: 3rem 0;
}

.caja-titulo-conocenos {
  border: 3px solid var(--blanco);
  padding: 15px 30px;
  display: inline-block;
  transition: background var(--transicion-rapida);
}

.caja-titulo-conocenos:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.titulo-claro-conocenos {
  color: var(--blanco);
  /*font-size: clamp(1.6rem, 3.5vw, 3rem);*/
  font-family: var(--font-titulos);
  font-weight: 600;
}

.titulo-claro {
  color: var(--blanco);
  font-size: clamp(1.4rem, 3vw, 2.5rem);
  margin-bottom: 2rem;
  text-transform: uppercase;
  position: relative;
  padding-bottom: 10px;
}

.titulo-claro::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background-color: var(--verde-acento);
}

.link-titulo-conocenos {
  text-decoration: none;
}
.link-titulo-conocenos:hover .titulo-claro {
  color: var(--verde-hover);
}

.txt-conocenos {
  max-width: 80%;
  color: var(--blanco);
  font-size: clamp(1.2rem, 1.8vw, 1.45rem);
  line-height: 1.3;
  text-align: center;
  font-weight: 400;
}

.whatsapp {
  background-color: var(--verde-hover);
  text-align: center;
  position: fixed;
  bottom: 5%;
  right: 3%;
  border-radius: 50%;
  color: #001a3b;
  z-index: 9990;
  transition: all 0.3s;
  width: 45px;
  height: 45px;
  font-size: 1.95em;
  -ms-flex-pack: center;
  justify-content: center;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
  text-decoration: none;
}
.whatsapp:hover {
  transform: scale(1.1);
  color: #09fcce;
  background: #001a3b;
}

/* --------------------------------------------------------------------------
   5. SECCIÓN SERVICIOS
   -------------------------------------------------------------------------- */
.titulo-servicios {
  color: var(--azul-medio);
  font-size: clamp(1.5rem, 2.5, 2.8rem);
  text-transform: uppercase;
  width: max-content;
  padding: 10px;
  margin: 40px auto;
  text-align: center;
}

.caja-titulo-servicios {
  padding: 10px 10px;
  display: inline-block;
  background-color: transparent;
  border: 4px solid #005b88;
}

.titulo-filtros {
  color: var(--blanco);
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-family: var(--font-titulos);
  font-weight: 600;
  letter-spacing: 0.12em;
  display: inline-block;
  background-color: var(--azul-medio);
  border: 2px solid var(--azul-claro);
  text-transform: uppercase;
  width: 12rem;
  margin: 40px auto;
  text-align: center;
  padding: 10px 10px;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 91, 136, 0.45);
}

.col-servicios {
  display: flex;
  flex-direction: column; /* vertical en desktop */
  justify-content: space-around;
  background-color: var(--azul-medio);
}

.servicio-c {
  padding: 20px 0;
  cursor: pointer;
  display: flex;
  justify-content: center;
  transition: background var(--transicion-rapida);
  flex-direction: column;
  height: 25%; /* vertical: 4 ítems en la columna */
  width: 100%;
  border-bottom: 0.1px solid rgba(255, 255, 255, 0.2);
  align-items: center;
}

.servicio-c:hover,
.servicio-c.activo {
  background-color: var(--azul-oscuro);
}

.servicio-c:hover .nombre-srv,
.servicio-c.activo .nombre-srv {
  color: var(--verde-hover);
}

.servicio-c .icono-srv {
  /*width: 70px;
  height: 70px;*/
  height: auto;
  width: auto;
  max-width: 45%;
  margin-bottom: 10px;
  filter: brightness(0) invert(1); /* Hace el SVG blanco */
  transition: filter var(--transicion-rapida);
}

.servicio-c:hover .icono-srv,
.servicio-c.activo .icono-srv {
  /* Filtro aproximado para color cyan / verde-hover */
  filter: brightness(0) saturate(100%) invert(75%) sepia(50%) saturate(3000%)
    hue-rotate(120deg) brightness(105%) contrast(100%);
}

.nombre-srv {
  color: var(--blanco);
  font-family: var(--font-titulos);
  font-size: 1rem;
  text-align: center;
}

.circulo-icono-central {
  background-color: var(--verde-hover);
  border: 2px solid var(--azul-oscuro);
  border-radius: 50%;
  width: 140px;
  height: 140px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

.circulo-icono-central img {
  width: 140px;
  height: 140px;
  filter: invert(56%) sepia(90%) saturate(2462%) hue-rotate(169deg) brightness(95%) contrast(80%);
/*filter:invert(10%) 
          sepia(100%) 
          hue-rotate(180deg) 
          brightness(40%);*/        
   
}

.titulo-servicio-central {
  color: #222;
  font-size: clamp(1.3rem, 2.5vw, 2.2rem);
  padding-bottom: 50px;
}

.texto-descripcion-servicios {
  font-family: var(--font-titulos);
  font-size: clamp(1.2, 1.3vw, 1.2rem);
  line-height: 1.5;
  padding-left: 4rem;
  letter-spacing: 2px;
  font-weight: 400;
  margin: 0 auto;
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: 0px;
  margin-left: auto;
  color: #212529;
  text-align: left;
}

/* --------------------------------------------------------------------------
   6. SECCIÓN PROYECTOS (SWIPER)
   -------------------------------------------------------------------------- */
.slider-proyectos {
  width: 100%;
  padding: 20px 0 50px 0;
}

/* Evitar FOUC en el slider antes de que inicialice el JS */
.slider-proyectos:not(.swiper-initialized) {
  opacity: 0;
  visibility: hidden;
}

.item-proyecto-card {
  width: 450px;
  position: relative;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: transform var(--transicion-rapida);
  cursor: pointer;
  border-radius: 50px;
}

.item-proyecto-card:hover {
  transform: translateY(-5px);
  border-radius: 50px;
}

.link-proyecto-nuevo {
  color: inherit;
}

.info-proyecto-inferior {
  transition: background-color var(--transicion-rapida);
  background-color: transparent !important;
}

.titulo-proyecto-card {
  color: var(--azul-oscuro);
  text-align: center;
  font-size: 1.5vw;
  font-family: myriad-regular, sans-serif;
  transition: color var(--transicion-rapida);
  font-weight: 500;
  line-height: 1.2;
}

/* Borde sólido y opaco */

.separador-proyecto {
  background-clip: padding-box;
  border: 5px solid var(--azul-oscuro);
  transition: border-color var(--transicion-rapida);
  background-color: var(--azul-oscuro);
}

.locacion-proyecto-card {
  color: var(--texto-oscuro);
  font-size: 0.95rem;
  transition: color var(--transicion-rapida);
}

/* Hover effects */
.item-proyecto-card:hover .info-proyecto-inferior {
  background-color: var(--azul-oscuro) !important;
}

.item-proyecto-card:hover .titulo-proyecto-card,
.item-proyecto-card:hover .locacion-proyecto-card {
  color: var(--blanco) !important;
}

.item-proyecto-card:hover .separador-proyecto {
  border-color: var(--verde-hover);
}

.titulo-select-proyectos {
  border-radius: 6px;
  background-color: var(--verde-hover);
  color: #001a3b;
  transition: all 0.3s;
  font-size: 0.9rem;
  /*-ms-flex-pack: center;*/
  justify-content: center;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  text-decoration: none;
  max-width: 15rem;
}
.titulo-select-proyectos:hover {
  font-size: 1rem;
  transform: scale(1.1);
  color: #09fcce;
  background: #001a3b;
}
.enviar-c a .escribe,
.enviar a .escribe {
  font-size: 1.3em;
  color: #005b88;
  text-transform: uppercase;
  font-style: normal;
  letter-spacing: -0.9px;
  transition: color 0.3s;
}

/* Fix: el color de .escribe sobre fondo azul al hacer hover */
.enviar:hover a .escribe {
  color: #09fcce;
}

.btn-ver-todos-cyan {
  font-size: 1.7vw !important;
  text-decoration: none;
  background-color: var(--verde-hover);
  color: #005b88;
  padding: 15px 15px;
  text-transform: uppercase;
  font-weight: 500;
  font-style: normal;
  transition:
    background-color var(--transicion-rapida),
    color var(--transicion-rapida);
}

.btn-ver-todos-cyan:hover {
  background-color: #005b88;
  color: var(--verde-hover);
}

/* --------------------------------------------------------------------------
   7. SECCIÓN ESTADÍSTICAS
   -------------------------------------------------------------------------- */
#estadisticas {
  background-color: var(--blanco-puro);
  padding: 4rem 0 !important;
}

.estadistica-con {
  padding: 20px;
  text-align: center;
}

.altura-est {
  border: 1px solid #eee;
  padding: 30px 20px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  background-color: #fff;
  transition: transform var(--transicion-rapida);
}

.altura-est:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.e-datos {
  color: var(--azul-claro);
  font-size: clamp(2rem, 4.5vw, 4rem);
  font-weight: 600;
  margin-bottom: 10px;
}

.e-titulo {
  color: var(--azul-oscuro);
  font-size: clamp(0.85rem, 1.3vw, 1.2rem);
  text-transform: uppercase;
  margin: 0;
}

/* --------------------------------------------------------------------------
   8. SECCIÓN CONTACTO
   -------------------------------------------------------------------------- */

/* Overlay oscuro azul sobre la imagen de fondo */

.contacto-overlay {
  /*background: linear-gradient(
    to right,
    rgba(0, 26, 59, 0.55) 0%,
    rgba(0, 26, 59, 0.8) 55%,
    rgba(0, 26, 59, 0.9) 100%
  );*/
  width: 100%;
  min-height: 100%;
}

/* Caja bordeada del título CONTACTO */
.caja-titulo-contacto {
  border: 3px solid var(--blanco-puro);
  padding: 12px 45px;
  display: inline-block;
}

.titulo-contacto {
  color: var(--blanco-puro);
  font-family: var(--font-titulos);
  font-size: clamp(1.2rem, 2.5vw, 2.2rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* ── Campos del formulario ── */
.campo-contacto {
  background-color: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 0;
  color: var(--texto-oscuro);
  font-family: var(--font-textos);
  font-size: 0.95rem;
  padding: 10px 14px;
  transition:
    border-color var(--transicion-rapida),
    box-shadow var(--transicion-rapida);
}

.campo-contacto::placeholder {
  color: #888;
}

.campo-contacto:focus {
  background-color: #fff;
  border-color: var(--verde-hover);
  box-shadow: 0 0 0 0.15rem rgba(9, 252, 206, 0.3);
  outline: none;
}

.buscar_archivo {
  background: none;
  border: none;
  color: #f5f5f5;
  cursor: pointer;
  font-weight: 600;
  text-align: left;
}

.buscar_archivo::placeholder {
  color: #09fcce;
}

select.campo-contacto {
  appearance: auto;
}

/* ── Botón ENVIAR ── */
.btn-enviar-contacto {
  background-color: transparent;
  border: 2px solid var(--blanco-puro);
  color: var(--blanco-puro);
  font-family: var(--font-titulos);
  font-size: 1.1rem;
  letter-spacing: 2px;
  padding: 10px 35px;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background-color var(--transicion-rapida),
    color var(--transicion-rapida);
}

.btn-enviar-contacto:hover {
  background-color: var(--blanco-puro);
  color: var(--azul-oscuro);
}

/* ── Tarjetas de países (fila inferior) ── */
.tarjetas-paises-row {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.tarjeta-pais-nueva {
  padding: 10px 0;
}

.bandera-pais-card {
  width: 40px;
  height: auto;
  margin-right: 10px;
}

.nombre-pais-card {
  color: var(--blanco-puro);
  font-family: var(--font-titulos);
  font-size: 1.3rem;
  font-weight: 600;
}

.separador-pais {
  border-top: 1px solid rgba(255, 255, 255, 0.4);
  margin: 8px 0;
}

.datos-pais-card {
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--font-textos);
  font-size: 0.85rem;
  line-height: 1.6;
  margin-bottom: 4px;
}

.datos-pais-card strong {
  color: var(--blanco-puro);
}

.puntero-mapa {
  color: var(--blanco-puro);
  font-size: 28px;
  cursor: pointer;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
}

.puntero-mapa:hover {
  color: #09fcce;
}

.pin-ubicacion {
  position: absolute;
  width: 30px;
  height: 30px;
  transform: translate(-50%, -100%);
  z-index: 10;
  transition: transform 0.2s ease;
}

.pin-ubicacion:hover {
  transform: translate(-50%, -100%) scale(1.2);
}

.caja_direccion_paises {
  background: hsla(0, 0%, 96%, 0.8);
  position: absolute;
  top: 0;
  left: 1.5em;
  height: auto;
  width: auto;
  padding: 15px;
  color: #575756;
  cursor: pointer;
  font-weight: 900;
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  text-align: left;
}

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */

/* --- Tablet horizontal y laptop pequeña (992px y menor) --- */
@media (max-width: 992px) {
  .navbar-brand img.logo {
    margin-left: 10px;
  }
  .hero-box {
    padding: 1.5rem 2rem;
    max-width: 90%;
  }
  .caja-titulo-servicios {
    padding: 10px 20px;
  }
  .caja-titulo-conocenos {
    padding: 12px 20px;
  }
  .caja-titulo-contacto {
    padding: 10px 25px;
  }
}

/* --- Tablet vertical y móvil grande (768px y menor) --- */
@media (max-width: 768px) {
  /* Servicios: columna lateral pasa a barra horizontal */
  .col-servicios {
    flex-direction: row !important;
    flex-wrap: nowrap;
  }
  .servicio-c {
    flex: 1; /* los 4 íconos se reparten el 100% del ancho */
    height: auto;
    min-height: 90px;
    border-bottom: none;
    border-right: 1px solid rgba(255, 255, 255, 0.15);
    padding: 8px 4px;
  }
  .servicio-c .icono-srv {
    width: 40px;
    height: 40px;
    margin-bottom: 6px;
  }
  .nombre-srv {
    font-size: 0.6rem;
    line-height: 1.2;
  }

  .altura-dest {
    min-height: 500px;
  }
  .slogan-container {
    padding-left: 1.2rem;
    padding-right: 1rem;
  }
  .overlay-conocenos {
    padding: 3rem 0;
  }
  .nombre-pais-card {
    font-size: clamp(1rem, 3vw, 1.3rem);
  }
}

/* --- Móvil pequeño (576px y menor) --- */
@media (max-width: 576px) {
  .servicio-c {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .hero-box {
    padding: 1rem 1.2rem;
    border-width: 2px;
  }
  .estadistica-con {
    padding: 10px;
  }
  .whatsapp {
    width: 50px;
    height: 50px;
    font-size: 28px;
    bottom: 20px;
    right: 20px;
  }
  .circulo-icono-central {
    width: 100px;
    height: 100px;
  }
  .circulo-icono-central img {
    width: 55px;
    height: 55px;
  }
  .btn-ver-todos-cyan {
    padding: 10px 24px;
    font-size: 1rem;
  }
}

/* ==========================================================================
   SECCIÓN OFICINAS
   ========================================================================== */

.bg-oficinas {
  background:
    linear-gradient(
      135deg,
      rgba(0, 18, 45, 0.96) 0%,
      rgba(0, 55, 90, 0.93) 50%,
      rgba(0, 12, 30, 0.97) 100%
    ),
    url("../img/fondos/fondo_seccion_1.jpg") center/cover no-repeat;
  border-top: 3px solid rgba(100, 220, 210, 0.3);
  border-bottom: 3px solid rgba(100, 220, 210, 0.3);
  overflow: hidden;
  position: relative;
}
.bg-oficinas::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 40px,
    rgba(0, 180, 200, 0.04) 40px,
    rgba(0, 180, 200, 0.04) 41px
  );
  pointer-events: none;
}

.caja-titulo-oficinas {
  border: 2px solid rgba(100, 220, 210, 0.6);
  padding: 10px 40px;
  position: relative;
}
.caja-titulo-oficinas::before,
.caja-titulo-oficinas::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--verde-acento);
}
.caja-titulo-oficinas::before {
  top: -5px;
  left: -5px;
}
.caja-titulo-oficinas::after {
  bottom: -5px;
  right: -5px;
}

.titulo-oficinas {
  font-family: var(--font-titulos);
  font-size: clamp(1.4rem, 3.5vw, 2.2rem);
  font-weight: 700;
  color: var(--blanco);
  letter-spacing: 3px;
  text-transform: uppercase;
}

/* ── Tarjeta 3D Flip ── */
.oficina-card-container {
  width: 310px;
  height: 360px;
  perspective: 1200px;
  cursor: pointer;
}

.oficina-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.oficina-card-container.flipped .oficina-card-inner {
  transform: rotateY(180deg);
}

.oficina-card-front,
.oficina-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 12px;
  overflow: hidden;
}

.oficina-card-front {
  background: linear-gradient(
    160deg,
    rgba(0, 30, 65, 0.97) 0%,
    rgba(0, 60, 100, 0.94) 100%
  );
  border: 1px solid rgba(100, 220, 210, 0.3);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.bandera-oficina {
  width: 36px;
  height: auto;
  border-radius: 3px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  flex-shrink: 0;
}

.pais-oficina {
  font-family: var(--font-titulos);
  font-size: 1.3rem;
  color: var(--blanco);
  letter-spacing: 1px;
}

.linea-sonar {
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 230, 220, 0.8),
    transparent
  );
  border-radius: 2px;
  animation: sonar-line 2.5s ease-in-out infinite;
}

@keyframes sonar-line {
  0%,
  100% {
    opacity: 0.4;
    transform: scaleX(0.6);
  }
  50% {
    opacity: 1;
    transform: scaleX(1);
  }
}

.direc-oficina,
.tel-oficina {
  font-family: var(--font-textos);
  font-size: 0.82rem;
  color: rgba(200, 225, 235, 0.85);
  line-height: 1.45;
}

.text-cyan {
  color: #45ddd5 !important;
}

.text-indicador {
  opacity: 0.65;
  transition: opacity 0.3s;
}
.oficina-card-container:hover .text-indicador {
  opacity: 1;
}

/* CARA TRASERA */
.oficina-card-back {
  background: linear-gradient(
    140deg,
    rgba(0, 45, 60, 0.98) 0%,
    rgba(0, 90, 110, 0.95) 100%
  );
  border: 1px solid rgba(0, 230, 220, 0.45);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  transform: rotateY(180deg);
}

/* Radar / Sonar */
.radar-container {
  width: 80px;
  height: 80px;
  margin: 0 auto;
}

.radar-pulse {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 2px solid rgba(0, 230, 220, 0.5);
  animation: radar-expand 1.8s ease-out infinite;
}

.radar-scanner {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: conic-gradient(
    rgba(0, 230, 220, 0.45) 0deg 60deg,
    transparent 60deg 360deg
  );
  animation: radar-spin 2.5s linear infinite;
}

@keyframes radar-expand {
  0% {
    transform: scale(0.5);
    opacity: 0.9;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}
@keyframes radar-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.btn-email-card {
  display: block;
  background: rgba(0, 200, 190, 0.12);
  border: 1px solid rgba(0, 220, 210, 0.45);
  color: #45ddd5;
  font-family: var(--font-textos);
  font-size: 0.78rem;
  border-radius: 6px;
  text-decoration: none;
  padding: 10px 14px;
  transition:
    background 0.3s,
    border-color 0.3s,
    color 0.3s;
  word-break: break-all;
}
.btn-email-card:hover {
  background: rgba(0, 220, 210, 0.25);
  border-color: #45ddd5;
  color: #fff;
}

/* Swiper overrides para oficinas */
.slider-oficinas {
  padding-bottom: 60px !important;
  padding-top: 20px !important;
}
.slider-oficinas swiper-slide {
  height: auto;
  padding: 10px 0 20px;
  display: flex;
  justify-content: center; /* Centra horizontalmente */
  align-items: center; /* Centra verticalmente */
}

.page-oficinas .swiper-pagination-bullet {
  background: rgba(255, 255, 255, 0.4);
  opacity: 1;
  width: 8px;
  height: 8px;
}
.page-oficinas .swiper-pagination-bullet-active {
  background: #45ddd5;
  transform: scale(1.3);
}

.next-oficinas,
.prev-oficinas {
  color: rgba(100, 220, 210, 0.8) !important;
}
.next-oficinas::after,
.prev-oficinas::after {
  font-size: 1.2rem !important;
  font-weight: 700;
}

@media (max-width: 768px) {
  .oficina-card-container {
    width: 280px;
    height: 340px;
  }
}
@media (max-width: 480px) {
  .oficina-card-container {
    width: 260px;
    height: 340px;
  }
}

/* ==========================================================================
   PÁGINA CONÓCENOS (STANDALONE)
   ========================================================================== */

.pagina-conocenos-wrapper {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.pagina-conocenos-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
   background: url("../img/fondos/fondo_conocenos_con_blur.jpg") center/cover
    no-repeat;
  /* El fondo de la imagen es claro y desenfocado */
  filter: blur(8px);
  transform: scale(1.05); /* Evita bordes blancos por el blur */
 }

/* Overlay sutil para mejorar legibilidad del texto oscuro */
.pagina-conocenos-bg::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: hsla(0, 0%, 100%, 0.55);
 }

.pagina-conocenos-content {
  position: relative;
  z-index: 10;
}

.txt-pagina-conocenos {
  font-family: var(--font-titulos);
  font-weight: 600;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: #005670; /* Color azul verdoso oscuro, similar a la captura */
  line-height: 1.6;
  text-shadow: 0px 0px 1px rgba(255, 255, 255, 0.8);
}

/* Stack de 3 imágenes en columna derecha de Conócenos */
.conocenos-img-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
}

.conocenos-img-item {
  width: 100%;
  overflow: hidden;
}

.conocenos-img-apilada {
  display: block;
  width: 100%;
  height: 370px;
  object-fit: cover;
  object-position: center;
  transition: transform 0.4s ease;
}

.conocenos-img-apilada:hover {
  transform: scale(1.04);
}

.btn-politicas {
  background-color: var(--verde-hover);
  border: 2px solid var(--verde-hover);
  color: var(--azul-oscuro);
  font-family: var(--font-titulos);
  font-weight: 400;
  font-size: 0.8rem;
  /*padding: 6px 8px;*/
  border-radius: 6px;
  box-shadow: 4px 4px 14px rgba(0, 0, 0, 0.3);
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, color 0.5s ease 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.05em;
  gap: 8px;
}

.btn-politicas span {
  transition: color 0.5s ease 0.15s;
}

.btn-politicas:hover {
  background-color: var(--azul-oscuro);
  color: var(--verde-hover);
  border-color: var(--azul-oscuro);
  transform: scale(1.1);
  box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.4);
}

.btn-politicas i {
  color: var(--azul-oscuro);
  font-size: 1.1rem;
  transition: color 0.1s ease;
}

.btn-politicas:hover i {
  color: var(--verde-hover);
}


/* El header necesita tener el background sólido ya que no iniciamos en hero */
body > #header {
  background: linear-gradient(
    to bottom,
    rgba(0, 26, 59, 0.95),
    rgba(0, 91, 136, 0.85)
  ) !important;
}

/* ==========================================================================
   PÁGINA SERVICIOS (pages/servicios.php)
   Layout: título | 4 iconos arriba | icono grande + texto | 4 iconos abajo
   ========================================================================== */

/* Wrapper principal: ocupa toda la pantalla sin scroll extra */
.ps-wrapper {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Fondo con imagen de ingeniería */
.ps-bg {
  position: fixed;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  filter: grayscale(35%) brightness(0.9);
}

/* Overlay semitransparente claro (como en las capturas) */
.ps-overlay {
  position: fixed;
  inset: 0;
  background: rgba(220, 230, 240, 0.55);
}

/* Contenedor general por encima de fondo + overlay */
.ps-container {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 70px 20px 20px; /* top deja espacio al navbar fijo */
  gap: 10px;
  min-height: 100vh;
}

/* ----- TÍTULO "SERVICIOS" ----- */
.ps-titulo-wrap {
  margin-bottom: 90px;
}
.ps-titulo {
  font-family: "Oswald", sans-serif;
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1a5f8a;
  border: 3px solid #1a5f8a;
  padding: 8px 40px;
  display: inline-block;
}

/* ----- FILAS DE ÍCONOS (arriba y abajo) ----- */
.ps-iconos-fila {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  padding: 0 20px;
}

/* ----- BOTÓN DE ÍCONO ----- */
.ps-icono-btn {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 4px;
  flex: 1;
  max-width: 160px;
  transition: transform 0.2s ease;
}
.ps-icono-btn:hover {
  transform: scale(1.07);
}

/*
  Envoltorio del SVG — SIN borde ni fondo propio.
  Los SVGs ya tienen su propio círculo interior dibujado.
  Solo sirve para la capa de color activo (fondo cian).
*/
.ps-icono-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.3s ease,
    box-shadow 0.3s ease;
  overflow: hidden;
}
.ps-icono-btn .ps-svg {
  width: 120px;
  height: 120px;
  object-fit: contain;
  transition: filter 0.3s ease;
}

/* Etiqueta bajo el ícono */
.ps-icono-label {
  font-family: "Raleway", sans-serif;
  font-size: clamp(0.65rem, 1.1vw, 0.85rem);
  color: #1a2a3a;
  font-weight: 600;
  text-align: center;
  max-width: 130px;
  line-height: 1.25;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.85);
}

/* ----- ÁREA PRINCIPAL (icono grande + texto) ----- */
.ps-main-area {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 40px;
  width: 100%;
  max-width: 100%;
  padding: 10px 60px;
  flex: 1;
}

/* Ícono principal grande — sin borde extra, el SVG ya lo tiene */
.ps-main-icono-wrap {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ps-main-icono-circle {
  width: 320px;
  height: 320px;
  border-radius: 50%;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ps-main-svg-img {
  width: 320px;
  height: 320px;
  object-fit: contain;
  transition: opacity 0.3s ease;
}

/* Columna de texto */
.ps-main-texto {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ps-main-h2 {
  font-family: "Oswald", sans-serif;
  font-size: clamp(1.3rem, 2.8vw, 2rem);
  font-weight: 600;
  color: #1a2a3a;
  margin-bottom: 16px;
  text-shadow: 0 1px 4px rgba(255, 255, 255, 0.6);
}
.ps-parrafo {
  font-family: "Raleway", sans-serif;
  font-size: clamp(0.85rem, 1.5vw, 1.05rem);
  color: #1a2a3a;
  line-height: 1.7;
  margin-bottom: 10px;
  text-align: justify;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.55);
}

/* Animación de fade al cambiar contenido */
.ps-fade-out {
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}
.ps-fade-in {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

/* ==========================================================================
   RESPONSIVE – PÁGINA SERVICIOS
   ========================================================================== */

@media (max-width: 1200px) {
  .ps-main-icono-circle,
  .ps-main-svg-img {
    width: 260px;
    height: 260px;
  }
  .ps-icono-circle,
  .ps-icono-btn .ps-svg {
    width: 100px;
    height: 100px;
  }
  .ps-main-area {
    padding: 10px 30px;
    gap: 30px;
  }
}

@media (max-width: 992px) {
  .ps-main-icono-circle,
  .ps-main-svg-img {
    width: 200px;
    height: 200px;
  }
  .ps-icono-circle,
  .ps-icono-btn .ps-svg {
    width: 80px;
    height: 80px;
  }
  .ps-main-area {
    padding: 10px 20px;
    gap: 24px;
  }
}

@media (max-width: 768px) {
  .ps-container {
    padding: 80px 10px 14px;
    gap: 8px;
  }
  /* En tablet/móvil, área principal va en columna */
  .ps-main-area {
    flex-direction: column;
    align-items: center;
    padding: 12px;
    gap: 14px;
  }
  .ps-main-icono-circle,
  .ps-main-svg-img {
    width: 160px;
    height: 160px;
  }
  .ps-main-h2 {
    text-align: center;
  }
  .ps-icono-circle,
  .ps-icono-btn .ps-svg {
    width: 62px;
    height: 62px;
  }
  .ps-icono-label {
    font-size: 0.6rem;
    max-width: 70px;
  }
  .ps-iconos-fila {
    flex-wrap: wrap;
    justify-content: space-around;
  }
  .ps-icono-btn {
    max-width: 80px;
  }
}

@media (max-width: 480px) {
  .ps-icono-circle,
  .ps-icono-btn .ps-svg {
    width: 48px;
    height: 48px;
  }
  .ps-titulo {
    font-size: 1.1rem;
    padding: 6px 22px;
    letter-spacing: 0.08em;
  }
  .ps-icono-label {
    display: none;
  }
  /* ==========================================================================
   PÁGINA PROYECTOS
   ========================================================================== */

  /* ---- Panel de Filtros Premium ---- */

  .filtro-container {
    background: linear-gradient(
      135deg,
      rgba(0, 26, 59, 0.92) 0%,
      rgba(0, 91, 136, 0.88) 100%
    );
    border: 1px solid rgba(197, 236, 67, 0.3);
    border-radius: 10px;
    box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    overflow: hidden;
    margin-bottom: 35px;
  }

  /* Cabecera del panel de filtros */
  .filtro-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 28px;
    background: rgba(197, 236, 67, 0.12);
    border-bottom: 1px solid rgba(197, 236, 67, 0.25);
    font-family: var(--font-titulos);
    font-size: 0.85rem;
    letter-spacing: 0.18em;
    color: var(--verde-acento);
    text-transform: uppercase;
  }

  .filtro-icono-titulo {
    font-size: 0.9rem;
    color: var(--verde-acento);
  }

  .filtro-label {
    font-family: var(--font-titulos);
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    color: rgba(197, 236, 67, 0.85);
    text-transform: uppercase;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .filtro-label i {
    color: var(--verde-acento);
    font-size: 0.82rem;
  }

  /* Helpers Tipográficos Auxiliares */
  .font-titulos {
    font-family: var(--font-titulos) !important;
  }
  .font-textos {
    font-family: var(--font-textos) !important;
  }
  .custom-dropdown-toggle {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: #fff;
    font-family: var(--font-textos);
    font-size: 0.9rem;
    font-weight: 500;
    padding: 10px 14px;
    cursor: pointer;
    transition:
      border-color 0.25s ease,
      background 0.25s ease,
      box-shadow 0.25s ease;
    outline: none;
    text-align: left;
  }

  .custom-dropdown-toggle:focus,
  .custom-dropdown-toggle:active,
  .show > .custom-dropdown-toggle {
    border-color: var(--verde-acento) !important;
    background: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 0 0 3px rgba(197, 236, 67, 0.2) !important;
    color: #fff !important;
  }

  .custom-dropdown-toggle:hover {
    border-color: rgba(197, 236, 67, 0.5);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
  }

  .custom-dropdown-toggle i {
    color: var(--verde-acento);
    font-size: 0.85rem;
    transition: transform 0.3s ease;
  }

  .show > .custom-dropdown-toggle i {
    transform: rotate(180deg);
  }

  /* Opciones del Dropdown */
  .custom-dropdown-menu {
    background: rgba(0, 26, 59, 0.95);
    border: 1px solid rgba(197, 236, 67, 0.3);
    backdrop-filter: blur(10px);
    border-radius: 8px;
    padding: 8px 0;
    margin-top: 5px !important;
  }

  .custom-dropdown-menu .dropdown-item {
    color: #fff;
    font-family: var(--font-textos);
    font-size: 0.9rem;
    padding: 8px 20px;
    transition: all 0.2s ease;
  }

  .custom-dropdown-menu .dropdown-item:hover,
  .custom-dropdown-menu .dropdown-item:focus {
    background: rgba(197, 236, 67, 0.15);
    color: var(--verde-acento);
  }

  .custom-dropdown-menu .dropdown-item.active {
    background: var(--verde-acento);
    color: var(--azul-oscuro);
    font-weight: 600;
  }

  /* Botón LIMPIAR — estilo coherente con btn-politicas del sitio */
  .btn-filtro-limpiar {
    background-color: transparent;
    border: 2px solid rgba(197, 236, 67, 0.7);
    color: var(--verde-acento);
    font-family: var(--font-titulos);
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    padding: 10px 22px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    transition: all 0.3s ease;
    white-space: nowrap;
  }

  /* Hover de iconos dentro de los botones */
  .btn-filtro-limpiar i {
    font-size: 0.95rem;
    transition: transform 0.3s ease;
  }

  .btn-filtro-limpiar:hover {
    background-color: var(--verde-acento);
    border-color: var(--verde-acento);
    color: var(--azul-oscuro);
    box-shadow: 0 4px 18px rgba(197, 236, 67, 0.35);
    transform: translateY(-2px);
  }

  .btn-filtro-limpiar:hover i {
    transform: rotate(90deg);
  }

  /* Reducciones en móvil para el panel */
  @media (max-width: 768px) {
    .filtro-container {
      padding: 1rem !important;
    }
  }

  /* ---- Tarjeta de Proyecto ---- */
  .item-proyecto-card {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition:
      transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
      box-shadow 0.35s ease;
    background: #fff;
  }

  .item-proyecto-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
  }

  .item-proyecto-card img {
    transition: transform 0.5s ease;
  }

  .item-proyecto-card:hover img {
    transform: scale(1.05);
  }

  /* ============================================
   MODAL PROYECTO — Layout Vertical
   ============================================ */

  /* Diálogo: ancho generoso pero sin ocupar toda la pantalla */
  .modal-proyecto-dialog {
    max-width: 1100px;
    width: 88vw;
    margin: 1.75rem auto;
  }

  /* Contenedor principal */
  .modal-proyecto-content {
    background-color: transparent !important;
    background-image: url("../img/fondos/fondo_modals.jpg") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    border-radius: 14px !important;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
    border: none !important;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
  }

 
  /* Header */
  .modal-proyecto-header {
    background: linear-gradient(
      135deg,
      var(--azul-oscuro) 0%,
      var(--azul-medio) 100%
    );
    border-bottom: 3px solid var(--verde-acento);
    padding: 16px 28px;
    flex-shrink: 0;
    text-align: center;    
}

.modal-proyecto-title {
  color: #fff;
  font-family: var(--font-titulos);
  font-size: 1.1rem;
  letter-spacing: 0.12em;
  margin: 0;
}

/* Body: scrollable verticalmente */
.modal-proyecto-body {
  overflow-y: auto;
  flex: 1;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* ---- Panel de TEXTO (arriba, ancho completo) ---- */
.modal-proyecto-text-panel {
  background: rgba(255, 255, 255, 0.35) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 24px 32px 20px;
  margin: 20px 28px 0; /* Márgenes laterales */
  border-radius: 10px;
  border-bottom: 3px solid rgba(255, 255, 255, 0.6); /* Línea separadora visible */
}

.modal-proyecto-titulo {
  font-family: var(--font-titulos);
  color: var(--azul-claro); /* Azul claro #07aff2 — color de acento del sitio */
  font-size: 1.4rem;
  line-height: 1.3;
  text-transform: uppercase;
  margin-bottom: 16px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

/* Meta-datos en línea horizontal */
.modal-proyecto-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin-bottom: 4px;
}

.modal-proyecto-meta span {
  font-family: var(--font-textos);
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.85);
}

.meta-label {
  font-weight: 700;
  color: var(--verde-acento);
  font-family: var(--font-titulos);
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}

.modal-proyecto-hr {
  border-color: rgba(255, 255, 255, 0.25);
  margin: 14px 0;
}

.modal-proyecto-descripcion {
  font-family: var(--font-textos);
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.75;
  font-size: 0.9rem;
  text-align: justify; /* Texto justificado */
}

/* ---- Panel de GALERÍA (abajo, ancho completo) ---- */
.modal-proyecto-gallery-panel {
  background: transparent;
  padding: 20px 28px 32px; /* Márgenes iguales al texto + espacio final generoso */
  flex-shrink: 0;
  display: flex;
  justify-content: center;
}

/* Swiper con ancho máximo para ajustarse a las imágenes y centrado */
.modal-gallery-swiper {
  width: 100%;
  max-width: 750px; /* Ancho máximo para no estirarse demasiado */
  margin: 0 auto; /* Centrado clásico */
  height: 400px;
  padding-bottom: 38px !important;
}

/* Cada slide */
.modal-gallery-swiper .swiper-slide {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px; /* Rounded leve en el marco del slide */
}

/* Contenedor de la imagen */
.modal-gallery-img-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px; /* Rounded leve */
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.modal-gallery-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Llena el contenedor manteniendo proporción */
  display: block;
  border-radius: 10px;
}

/* Controles de navegación del swiper */
.modal-gallery-swiper .swiper-button-next,
.modal-gallery-swiper .swiper-button-prev {
  color: #fff;
  background: rgba(0, 91, 136, 0.8);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  top: 50%;
  transform: translateY(-50%);
  backdrop-filter: blur(4px);
  transition: background 0.25s;
}

.modal-gallery-swiper .swiper-button-next:hover,
.modal-gallery-swiper .swiper-button-prev:hover {
  background: var(--azul-medio);
}

.modal-gallery-swiper .swiper-button-next::after,
.modal-gallery-swiper .swiper-button-prev::after {
  font-size: 15px;
  font-weight: 700;
}

.modal-gallery-swiper .swiper-pagination-bullet-active {
  background: var(--verde-acento);
}

/* Responsive tablet */
@media (max-width: 768px) {
  .modal-proyecto-dialog {
    width: 96vw;
  }
  .modal-proyecto-text-panel {
    padding: 20px 20px 16px;
  }
  .modal-proyecto-meta {
    flex-direction: column;
    gap: 4px;
  }
  .modal-gallery-swiper {
    height: 280px;
  }
  .modal-gallery-img-container {
    width: 100%;
    max-width: 600px; /* Ajusta según el tamaño deseado */
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

/* Responsive móvil */
@media (max-width: 480px) {
  .modal-gallery-swiper {
    height: 220px;
  }
  .modal-gallery-img-container {
    height: 190px;
  }
}

/* Sin resultados placeholder */
.no-results-placeholder {
  width: 100%;
  text-align: center;
  padding: 60px 20px;
}

/* Ajustes moviles para Conocenos */
@media (max-width: 768px) {
  .txt-pagina-conocenos {
    font-size: 0.9rem !important;
    line-height: 1.5;
  }
}

/* ==========================================================================
   POR QUE ELEGIRNOS - LAYOUT FINAL
   ========================================================================== */
#porque-elegirnos {
  display: flex;
  flex-direction: row;
  width: 100%;
  min-height: 900px;
  background: #ffffff;
  overflow: hidden;
}

#porque-elegirnos .pqe-left {
  width: 45%;
  padding: 80px 4% 80px 7%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #ffffff;
  box-sizing: border-box;
}

#porque-elegirnos .pqe-right {
  width: 55%;
  min-height: 900px;
  position: relative;
  overflow: hidden;
}

#porque-elegirnos .pqe-right img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-top-left-radius: 90px;
  display: block;
}

.pqe-titulo-exacto {
  margin-bottom: 45px;
  line-height: 1.0;
}

.pqe-titulo-exacto .l1 {
  display: block;
  font-family: var(--font-titulos);
  font-size: clamp(3rem, 4.5vw, 4.8rem);
  font-weight: 900;
  color: #0c1a2d;
  letter-spacing: -0.02em;
}

.pqe-titulo-exacto .l2 {
  display: block;
  font-family: var(--font-titulos);
  font-size: clamp(3rem, 4.5vw, 4.8rem);
  font-weight: 900;
  color: #0fb8b1;
  letter-spacing: -0.02em;
}

.pqe-lista-exacta {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.pqe-item-ex {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.pqe-icono-caja {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid #0fb8b1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
}

.pqe-icono-caja img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.pqe-texto-caja h3 {
  font-family: var(--font-titulos);
  font-size: 0.95rem;
  font-weight: 800;
  color: #0c1a2d;
  margin: 0 0 3px;
  text-transform: uppercase;
}

.pqe-texto-caja p {
  font-family: var(--font-textos);
  font-size: 0.88rem;
  color: #3b4d61;
  line-height: 1.45;
  margin: 0;
}

@media (max-width: 991px) {
  #porque-elegirnos {
    flex-direction: column;
    min-height: auto;
  }
  #porque-elegirnos .pqe-left {
    width: 100%;
    padding: 50px 6%;
  }
  #porque-elegirnos .pqe-right {
    width: 100%;
    min-height: 450px;
  }
  #porque-elegirnos .pqe-right img {
    border-top-left-radius: 0;
  }
}
/* ==========================================================================
   SECCION: POR QUE ELEGIRNOS (DISEÑO EXACTO)
   ========================================================================== */
.seccion-pqe-nueva {
  background-color: #ffffff;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

.pqe-contenedor-izq {
  padding: 80px 5% 80px 10%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.pqe-titulo-principal {
  line-height: 1;
  margin-bottom: 40px;
}

.pqe-titulo-principal .linea1 {
  display: block;
  font-family: var(--font-titulos);
  font-size: clamp(3rem, 5vw, 4.5rem);
  font-weight: 900;
  color: #0c1a2d;
  letter-spacing: -0.02em;
}

.pqe-titulo-principal .linea2 {
  display: block;
  font-family: var(--font-titulos);
  font-size: clamp(3rem, 5vw, 4.5rem);
  font-weight: 900;
  color: #0fb8b1;
  letter-spacing: -0.02em;
}

.pqe-lista-items {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.pqe-item-fila {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.pqe-icono-borde {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid #0fb8b1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
}

.pqe-icono-borde img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.pqe-item-textos h3 {
  font-family: var(--font-titulos);
  font-size: 1rem;
  font-weight: 800;
  color: #0c1a2d;
  margin: 0 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.pqe-item-textos p {
  font-family: var(--font-textos);
  font-size: 0.95rem;
  color: #3b4d61;
  line-height: 1.4;
  margin: 0;
  font-weight: 500;
}

.pqe-columna-imagen {
  padding: 0;
  min-height: 600px;
}

.pqe-imagen-full {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border-top-left-radius: 80px;
}

@media (max-width: 991px) {
  .pqe-contenedor-izq {
    padding: 60px 5%;
  }
  .pqe-columna-imagen {
    height: 500px;
  }
  .pqe-imagen-full {
    border-top-left-radius: 0;
  }
}