:root{
  --azul: #404095;
  --rojo: #ea3539;
  --negro: #000000;
  --font: 'Manjari', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

*{box-sizing:border-box}
body{
  font-family: var(--font);
  color: #222;
  background: #fff;
  scroll-behavior: smooth;
}

/* SECCION NAVBAR */
/* ==== Navbar con difuminado y contacto ==== */
.navbar {
  background-color: rgba(64, 64, 149);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background-color 0.3s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

/* Enlaces del menú */
.navbar .nav-link {
  color: #fff !important;
  font-weight: 500;
  margin: 0 0.25rem;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
  background-color: #ea3539;
  color: #fff !important;
}

/* Contacto y redes */
.navbar-contact {
  font-size: 0.9rem;
  color: #fff;
  line-height: 1.2;
}

.navbar-contact i {
  color: #fff;
}

.navbar-contact .social-icons a:hover {
  color: #ea3539;
}

/* Responsive: mostrar bloque de contacto en versión móvil (opcional) */
@media (max-width: 991px) {
  .navbar-contact {
    display: block;
    text-align: center;
    padding: 1rem 0;
  }
}


/* Hero */
.hero-img { object-fit: cover; height: 65vh; max-height:760px; }
.hero-overlay{
  background: linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.22));
  padding: 2rem;
  border-radius: 8px;
}
.hero-overlay h1{ color: #fff; font-weight:700; letter-spacing:0.5px; }
.hero-overlay p{ color: #fff; font-size:1.1rem; }

/* Section titles */
.section-title{
  color: var(--azul);
  font-weight:700;
  margin-bottom: 0.5rem;
}

/* Cards and services */
.service-card { border: none; transition: transform .18s ease, box-shadow .18s ease; }
.service-card:hover{ transform: translateY(-6px); box-shadow: 0 12px 30px rgba(64,64,149,0.1); }

#infraestructura{
  background-image: url('../assets/fondo-infraestructura.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Images gallery */
#infraestructura img{ height: 220px; object-fit: cover; width:100%; }

/* Contact form */
.card{ border: none; }

/* Buttons */
.btn-primary{
  background: var(--azul);
  border: none;
}
.btn-outline-light{ color: #fff; border-color: rgba(255,255,255,0.6); }

/* Fade-in for animated elements */
.fade-in{ opacity:0; transform: translateY(8px); transition: all .6s ease; }
.fade-in.visible{ opacity:1; transform: translateY(0); }

/* Responsive tweaks */
@media (max-width: 767px){
  .hero-overlay{ padding:1rem; }
  .hero-img{ height:50vh; }
}

/* Empresa */
.empresa-block {
  overflow: hidden;
  cursor: pointer;
}
.empresa-block img {
  transition: transform 0.4s ease;
}
.empresa-block:hover img {
  transform: scale(1.05);
}
.overlay-text {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.55);
  color: #fff;
  padding: 2rem;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.empresa-block:hover .overlay-text {
  opacity: 1;
}

/* === Bloques de Misión y Visión === */
.empresa-block {
  display: flex;
  flex-direction: column;
}

.empresa-img {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 10px;
}

.empresa-img img {
  object-fit: cover;
  height: 100%;
  width: 100%;
  filter: brightness(80%); /* oscurece un poco la imagen para legibilidad */
}

/* Fondo translúcido para el texto (similar al carrusel) */
.overlay-fixed {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.20); /* negro con transparencia */
  color: #fff;
  padding: 1.5rem;
  border-radius: 0 0 10px 10px;
  height: auto;
  backdrop-filter: blur(6px); /* difuminado detrás del texto */
}

/* Igualar alturas */
.row.align-items-stretch > [class*='col-'] {
  display: flex;
}

.empresa-block .overlay-fixed h2 {
  font-weight: 700;
  color: #fff;
}

/* === Fondo general de la sección === */
.empresa-mapa {
  position: relative;
  background-image: url('../assets/contenedores.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 500px;
  color: #fff;
  overflow: hidden;
}

/* Capa sutil de desenfoque y oscurecimiento */
.empresa-mapa::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
  z-index: 1;
}

/* Contenido encima del fondo */
.overlay-content {
  position: relative;
  z-index: 2;
  margin-top: 40px;
}

/* === Imagen del mapa (lado izquierdo) === */




/* === Bloque de valores (lado derecho) === */
.mapa-valores {
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.mapa-valores h3 {
  color: #ea3539;
  font-weight: 700;
  letter-spacing: 1px;
}

/* === Alineación perfecta y adaptabilidad === */
.row.align-items-center {
  display: flex;
  align-items: center;
}

@media (max-width: 991px) {
  .empresa-mapa {
    text-align: center;
    min-height: auto;
    padding: 3rem 1rem;
  }

  .mapa-valores {
    text-align: center;
    padding: 0 1rem;
  }
}

/* Contenedor del mapa */
.mapa-img {
  position: relative;
}

/* Logo flotante encima del mapa */
.logo-flotante {
  position: absolute;
  top: 15%;
  left: 70%;
  transform: translate(-15%, -70%);
  width: 150px; /* ajusta según tu diseño */
  animation: bounceSmooth 3s ease-in-out infinite;
  z-index: 3;
}

/* Animación suave de “salto” */
@keyframes bounceSmooth {
  0%, 100% {
    transform: translate(-50%, -50%) translateY(0);
  }
  50% {
    transform: translate(-50%, -50%) translateY(-10px);
  }
}



/* === Valores destacados (parte superior izquierda) === */
.textValores{
  text-shadow: #fff 1px 0 2px;
}
.mapa-valores {
  position: absolute;
  top: 3rem;
  left: 40rem;
  background: rgba(64, 64, 149, 0.75); /* Azul corporativo translúcido */
  padding: 1.5rem 2rem;
  border-left: 6px solid #ea3539; /* Línea roja para llamar atención */
  border-radius: 10px;
  z-index: 3;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.25);
  animation: slideIn 1.2s ease forwards;
  opacity: 0;
  width: 50%;
}

.mapa-valores h3 {
  color: #fff;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.mapa-valores li {
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.5px;
}

/* Efecto de entrada */
@keyframes slideIn {
  from { transform: translateX(-50px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}


/* Responsive */
@media (max-width: 768px) {
  .mapa-valores {
    top: 1rem;
    left: 1rem;
    padding: 1rem 1.5rem;
  }
  .mapa-valores li {
    font-size: 1rem;
  }
}

/* === Texto de la parte derecha (fusionado con el mapa) === */
.mapa-info {
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5); /* sombra suave para legibilidad */
  animation: fadeInRight 1s ease both;
}

/* Efecto de entrada suave */
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Títulos */
.mapa-info h4 {
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* Responsive ajustes */
@media (max-width: 991px) {
  .mapa-info {
    text-align: center;
    padding: 2rem 1rem;
  }
  .empresa-mapa::before {
    background: rgba(0,0,0,0.5);
  }
}

/* === Sección de estadísticas entre Empresa y Mapa === */
.stats-section {
  position: relative;
  z-index: 5;
  margin-top: -10px;   /* 🔧 antes -120px → ahora más suave */
  margin-bottom: -60px; /* 🔧 antes -120px → ahora más equilibrado */
}

.stat-box {
  background: #fff;
  border-radius: 15px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 6px 25px rgba(0, 0, 0, 1);
  padding: 10px;
}

/* Efecto al pasar el cursor */
.stat-box:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 30px rgba(64, 64, 149, 0.15);
}

/* Estilos del contenido */
.stat-box h3 {
  color: #404095; /* azul corporativo */
  font-size: 2rem;
  font-weight: 700;
}

.stat-box p {
  color: #333;
  font-weight: 500;
  letter-spacing: 0.5px;
  margin-bottom: 0;
}

/* Íconos */
.stat-box i {
  color: #ea3539; /* rojo institucional */
}

/* Responsive */
@media (max-width: 991px) {
  .stats-section {
    margin-top: -60px;
    margin-bottom: -60px;
  }
}

/* === Sección de servicios === */
.service-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-radius: 15px;
  overflow: hidden;
}

.service-card img {
  height: 200px;
  object-fit: cover;
  transition: transform 0.4s ease;
}

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

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* Botón de cotizar */
.btn-cotizar {
  background-color: #ea3539;
  color: #fff;
  font-weight: 500;
  border-radius: 30px;
  padding: 0.5rem 1.25rem;
  transition: all 0.3s ease;
}

.btn-cotizar:hover {
  background-color: #404095;
  color: #fff;
  transform: scale(1.05);
}

/* Responsive */
@media (max-width: 768px) {
  .service-card img {
    height: 180px;
  }
}

.masonry-grid {
  column-count: 3;
  column-gap: 1rem;
}

.masonry-grid img {
  width: 100%;
  margin-bottom: 1rem;
  border-radius: 12px;
  transition: all 0.3s ease;
  cursor: pointer;
  break-inside: avoid;
  filter: brightness(0.9);
}

.masonry-grid img:hover {
  transform: scale(1.03);
  filter: brightness(1);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

/* Responsive */
@media (max-width: 992px) {
  .masonry-grid { column-count: 2; }
}
@media (max-width: 576px) {
  .masonry-grid { column-count: 1; }
}


/* Animación suave al mostrar */
#modalImage {
  opacity: 0;
  transform: scale(0.95);
  transition: all 0.3s ease;
}
.modal.show #modalImage {
  opacity: 1;
  transform: scale(1);
}

/* === FOOTER ANIMADO FINAL === */
.footer-animado {
  position: relative;
  overflow: hidden;
  background: #fff;
  border-top: 3px solid #404095;
  padding: 0;
  margin: 0;
  width: 100%;
}

/* Fondo del footer */
.footer-animado .footer-bg {
  position: relative;
  width: 100%;
  height: 300px;
  background-image: url('../assets/fondo-bodega.png');
  background-size: cover;
  background-position: bottom center;
  background-repeat: no-repeat;
  opacity: 0.95;
  z-index: 0;
}

@keyframes moveRoad {
  from { background-position: 0 0; }
  to { background-position: 80px 0; }
}

/* === Carretera animada === */
.footer-animado .road {
  position: absolute;
  bottom: 45px; /* 🔧 Altura del pavimento — ajusta según tus camiones */
  left: 0;
  width: 100%;
  height: 6px;
  background: repeating-linear-gradient(
    to right,
    #404095 0 40px,
    #ea3539 40px 80px
  );
  animation: moveRoad 3s linear infinite;
  z-index: 1;
}


/* Camiones */
.truck {
  position: absolute;
  bottom: 50px; /* 👈 justo 5px encima de la carretera */
  width: 100px;
  z-index: 2;
  opacity: 0.95;
}


/* === Contenido del footer === */
.footer-animado .footer-content {
  position: relative;
  width: 100%;
  background: #000000;
  font-size: 0.9rem;
  color: #fff;
  z-index: 3;
  padding: 15px 0;
  text-align: center;
  margin-top: 0; /* 👈 sin margen */
}

/* Elimina cualquier espacio residual global */
body, html {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* === TELÓN DE ABAJO HACIA ARRIBA === */
#telon-vertical {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-end; /* inicia desde abajo */
  justify-content: center;
  background: #404095;
  overflow: hidden;
}

/* Cortina que sube */
.cortina {
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, #404095 100%, #404095);
  border-top-left-radius: 60% 20%;
  border-top-right-radius: 60% 20%;
  transition: transform 1.8s ease-in-out;
  transform: translateY(0);
}

/* Centrar logo y texto en el medio de la pantalla */
.contenido-telon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #ffffff;
  font-family: 'Manjari', sans-serif;
}


/* Logo */
.logo-telon {
  width: 150px;
  opacity: 0.95;
  animation: pulseLogo 1s ease-in-out infinite alternate;
}

/* Texto de bienvenida */
.texto-bienvenida {
  margin-top: 15px;
  font-size: 2rem;
  letter-spacing: 4px;
  color: #fff;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
  animation: fadeInText 1.5s ease forwards;
  opacity: 0;
}

/* Animaciones */
@keyframes pulseLogo {
  0% { transform: translateY(0) scale(1); opacity: 0.9; }
  100% { transform: translateY(-8px) scale(1.05); opacity: 1; }
}

@keyframes fadeInText {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Estado abierto (telón se eleva) */
#telon-vertical.open .cortina {
  transform: translateY(-100%);
}

/* Difuminado al desaparecer */
#telon-vertical.fade-out {
  opacity: 0;
  transition: opacity 0.8s ease;
}