/* ========================================
   ESTUDIO DE INGENIERÍA — STYLES
   ======================================== */
:root {
  --bg: #f8f9fb;
  --bg-dark: #0f172a;
  --text: #1e293b;
  --text-light: #64748b;
  --text-muted: #94a3b8;
  --accent: #1e6ba8;
  --accent-light: #3b82f6;
  --accent-hover: #1d4ed8;
  --line: rgba(30,41,59,0.08);
  --line-light: rgba(255,255,255,0.1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--text); background: var(--bg);
  line-height: 1.6; overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ========== NAV (Barra superior) ========== */
nav {
  position: fixed; top: 0; width: 100%; z-index: 1000;
  padding: 1.2rem 3rem;
  display: flex; justify-content: space-between; align-items: center;
  transition: all 0.4s ease;
}

nav.scrolled {
  background: rgba(15,23,42,0.95);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 0.8rem 3rem;
}

.nav-links { display: flex; gap: 2rem; list-style: none; }
.nav-links a {
  text-decoration: none; color: rgba(252, 145, 91, 0.801);
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; position: relative;
  transition: color 0.3s;
}
.nav-links a:hover { color: #fff; }

/* ========== LOGO PEQUEÑO DEL NAV ========== */
.nav-logo-bar {
  text-decoration: none;
  display: flex;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

nav.scrolled .nav-logo-bar {
  opacity: 1;
  pointer-events: auto;
}

/* El logo pequeño del menú */
.nav-logo-bar img {
  height: 4rem !important; /* Ajusta el alto a tu gusto (3.5rem, 4rem, 4.5rem) */
  width: auto !important;
  display: block;
  /* 🌟 ELIMINAMOS EL FILTRO QUE LO PONÍA EN BLANCO Y NEGRO */
}

/* ========== HERO (Portada) ========== */
.hero {
  height: 100vh; position: relative; overflow: hidden;
  display: flex; align-items: center;
  background: #0f172a;
}
.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 1;
}
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,23,42,0.25) 0%, rgba(15,23,42,0.55) 60%, rgba(15,23,42,0.8) 100%);
  z-index: 2;
}

/* ========== CUADRÍCULA DE FOTOS EN EL HERO ========== */
.hero-thumbs {
  position: absolute !important; 
  bottom: 5.5rem !important; 
  right: 3rem !important; 
  z-index: 4 !important;
  display: grid !important; 
  
  /* 🌟 FORZAMOS LAS 5 COLUMNAS */
  grid-template-columns: repeat(5, 1fr) !important; 
  
  gap: 0.5rem !important;
  width: 480px !important; 
}

.hero-thumb {
  aspect-ratio: 4/3; 
  border-radius: 6px; 
  overflow: hidden;
  border: 2px solid rgba(255,255,255,0.25);
  transition: transform 0.3s ease, border-color 0.3s ease;
  cursor: pointer; 
  background: transparent; /* 🌟 Evita el fondo negro */
}

/* 🌟 Regla para el espacio vacío */
.hero-thumb-empty {
  background: transparent !important; /* Fuerza a quitar el fondo negro */
  border: none !important;            /* Quita el borde */
  pointer-events: none;               /* Evita que el mouse haga zoom en el vacío */
}

.hero-thumb img {
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  display: block;
}

.hero-thumb:hover:not(.hero-thumb-empty) {
  transform: scale(1.08); 
  border-color: var(--accent-light); 
  z-index: 5;
}

/* ========== CONTENEDOR DEL LOGO HERO ========== */
.hero-logo-solo {
  position: absolute;
  top: 6rem; 
  left: 3rem;
  z-index: 10;
  
  /* 🌟 FORZAMOS EL TAMAÑO DEL CONTENEDOR */
  width: 550px !important;  /* Ancho máximo del bloque */
  height: 400px !important; /* Alto máximo del bloque */
  overflow: hidden;         /* Oculta lo que se salga */
}

/* La imagen se adapta al contenedor */
.hero-logo-solo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important; /* Ajusta la imagen sin deformarla */
  display: block;
}

/* ========== EMAIL HERO ========== */
.hero-email {
  position: absolute;
  bottom: 2rem;
  right: 3rem;
  z-index: 10;
  text-align: right;
}
.hero-email a {
  color: rgba(255,255,255,0.6);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: color 0.3s ease;
}
.hero-email a:hover {
  color: #fff;
}

.hero-content {
  position: absolute; bottom: 5rem; left: 3rem; z-index: 4;
  color: #fff; max-width: 520px;
}
.hero-content h1 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  font-weight: 600; line-height: 1.1; margin-bottom: 1rem;
  text-shadow: 0 2px 30px rgba(0,0,0,0.5);
}
.hero-content p {
  font-size: 1.05rem; opacity: 0.85; line-height: 1.7;
  font-weight: 300; text-shadow: 0 1px 10px rgba(0,0,0,0.3);
}
.hero-thumbs {
  position: absolute; bottom: 5.5rem; right: 3rem; z-index: 4;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem;
  width: 280px;
}
.hero-thumb {
  aspect-ratio: 4/3; border-radius: 6px; overflow: hidden;
  border: 2px solid rgba(255,255,255,0.25);
  transition: transform 0.3s ease, border-color 0.3s ease;
  cursor: pointer; background: #000;
}
.hero-thumb:hover {
  transform: scale(1.08); border-color: var(--accent-light); z-index: 5;
}
.hero-thumb img, .hero-thumb video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* ========== SECCIONES ========== */
section { padding: 4rem 3rem; margin: 0 auto; }
.section-eyebrow {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 0.6rem;
}
.section-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 600;
  line-height: 1.2; margin-bottom: 1rem; color: var(--text);
}
.section-desc {
  color: var(--text-light); font-size: 1rem;
  line-height: 1.7; max-width: 550px;
}

/* ==========================================================
   PROYECTOS - Layout y altura controlada
   ========================================================== */

.project-editorial {
  margin-bottom: 6rem; 
  max-width: 1400px; 
  margin-left: auto; 
  margin-right: auto;
}
.project-editorial:last-child { 
  margin-bottom: 0; 
}

/* Contenedor de la fila (Grid) */
.project-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem; 
  align-items: start; /* Las cajas empiezan arriba */
}
.project-layout.reverse { 
  direction: rtl; 
}
.project-layout.reverse > * { 
  direction: ltr; 
}

/* Forzamos a la COLUMNA DERECHA a ser tan alta como la de la izquierda */
.project-layout > .media-grid {
  align-self: stretch;
}

/* Bloque de texto */
.project-text { 
  padding-top: 0.5rem; 
  display: flex;
  flex-direction: column;
}
.project-text h2 { 
  margin-bottom: 1rem; 
}
.project-text p {
  color: var(--text-light); 
  font-size: 0.95rem;
  line-height: 1.75; 
  margin-bottom: 1rem;
}
.project-meta-inline {
  display: flex; 
  gap: 2rem; 
  margin-top: 1.5rem; 
  flex-wrap: wrap;
}
.meta-item { 
  display: flex; 
  flex-direction: column; 
  gap: 0.2rem; 
}
.meta-item label {
  font-size: 0.6rem; 
  font-weight: 600; 
  letter-spacing: 0.12em;
  text-transform: uppercase; 
  color: var(--accent);
}
.meta-item span { 
  font-size: 0.85rem; 
  color: var(--text); 
  font-weight: 500; 
}

/* Imagen DEBAJO del texto (Pr_02.png) */
.project-text .media-item {
  margin-top: 1.5rem;
}
.project-text .media-item img {
  width: 100%;
  height: auto; /* Altura libre, proporcional */
  display: block;
  border-radius: 8px;
}


/* ==========================================================
   MEDIA GRID - La imagen de la derecha (Pr_01.png)
   ========================================================== */

/* El grid de la columna derecha */
.media-grid {
  display: grid; 
  gap: 0.6rem;
}

/* El div que contiene la imagen (la caja) */
.media-grid .media-item {
  height: 100%; /* Ocupa todo el alto del grid (gracias a stretch) */
  border-radius: 8px; 
  overflow: hidden; 
  position: relative;
  background: #ddd; 
  cursor: pointer;
}

/* LA IMAGEN DE LA DERECHA: Llena la caja */
.project-editorial .project-layout .media-grid .media-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top; /* IMPORTANTE: Agarra la imagen desde arriba */
  display: block;
  border-radius: 8px;
}

/* Efecto hover (solo para esta imagen) */
.media-grid .media-item:hover img { 
  transform: scale(1.05); 
}

/* Tag de la imagen */
.media-grid .media-item .media-tag {
  position: absolute; 
  top: 0.6rem; 
  left: 0.6rem; 
  z-index: 2;
  padding: 0.2rem 0.5rem; 
  background: var(--accent); 
  color: #fff;
  font-size: 0.6rem; 
  font-weight: 600; 
  letter-spacing: 0.05em;
  text-transform: uppercase; 
  border-radius: 3px;
}

/* ==========================================================
   RESPALDO: Asegurar que NINGUNA otra imagen se rompa
   ========================================================== */

/* ==========================================================
   MOSAICO: ANALISIS DE CONTINGENCIA
   ========================================================== */
.mosaico-contingencia {
  display: flex;
  gap: 20px;
  max-width: 1400px;
  margin: 0 auto;
  align-items: stretch;
}


/* Columna Izquierda (Texto + Foto Grande) */
.mosaico-col-izq {
  flex: 2; /* Ocupa el doble de espacio */
  display: flex;
  flex-direction: column;
  gap: 50px;
}

/* Forzar que el texto no se estire raro */
.mosaico-col-izq .project-text {
  flex: 1;
}

/* La foto grande de la izquierda */
.mosaico-col-izq .foto-grande {
  flex: 1;
  min-height: 350px; /* Ajusta la altura si quieres que sea más alta o baja */
  border-radius: 8px;
  overflow: hidden;
}

/* Columna Derecha */
.mosaico-col-der {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  
  /* 🌟 LA SOLUCIÓN: Le damos un alto fijo para que no se estire al alto del texto */
  height: 750px; /* Ajusta este número (400px, 500px) según el tamaño que quieras */
  align-self: flex-start; /* Evita que se estire al fondo */
}

/* Las cajas de las fotos */
.mosaico-col-der .media-item {
  flex: 1; 
  border-radius: 8px;
  overflow: hidden;
  background-color: #f1f5f9; /* Fondo gris suave por si la foto no llena la caja */
}

/* Las imágenes de la derecha (que se vean completas) */
.mosaico-col-der .media-item img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 🌟 Muestra la foto completa sin recortar */
  display: block;
  padding: 5px;
}

/* REGLA CLAVE: Asegurar que las imágenes llenen sus cajas sin deformarse */
.mosaico-contingencia img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Responsive: En celulares se pone una columna */
@media (max-width: 900px) {
  .mosaico-contingencia {
    flex-direction: column;
  }
  .mosaico-col-izq .foto-grande {
    min-height: 250px;
  }
}

/* ==========================================================
   MOSAICO: PLANIFICACIÓN REGIONAL (3 Columnas)
   ========================================================== */
.mosaico-regional {
  display: flex;
  gap: 20px; /* Separación entre las 3 columnas */
  max-width: 1400px;
  margin: 0 auto;
  align-items: stretch; /* Hace que todas las columnas midan lo mismo de alto */
}

/* Columna 1: Texto + Foto chica */
.regional-col-izq {
  flex: 1.2; /* Un poco más ancha que las otras dos */
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.regional-col-izq .project-text {
  flex: 1; /* El texto empuja para ocupar su espacio */
}

.regional-img-chica {
  height: 200px; /* Altura fija para la foto de abajo a la izquierda */
  border-radius: 8px;
  overflow: hidden;
}

/* Columna 2 y 3: Imágenes altas */
.regional-img-centro,
.regional-img-der {
  flex: 1; /* Ocupan el mismo ancho */
  border-radius: 8px;
  overflow: hidden;
}

/* Ajuste para que todas las imágenes se adapten a sus cajas sin deformarse */
.mosaico-regional img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Responsive: En pantallas chicas se ponen una debajo de otra */
@media (max-width: 900px) {
  .mosaico-regional {
    flex-direction: column;
  }
  .regional-img-chica {
    height: 250px; /* Un poco más alta en móviles */
  }
  .regional-img-centro,
  .regional-img-der {
    height: 300px;
  }
}

/* ==========================================================
   MOSAICO: PLANIFICACIÓN URBANA
   ========================================================== */
.mosaico-urbana {
  display: flex;
  gap: 20px;
  max-width: 1400px;
  margin: 0 auto;
  align-items: stretch; 
}

/* Columna Izquierda */
.urbana-col-izq {
  flex: 1.5; 
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* El texto ya no se estira, toma su altura natural */
.urbana-col-izq .project-text {
  flex: none; 
}

/* La caja de la foto tampoco se estira */
.urbana-img-abajo {
  flex: none; /* 🌟 Evita que se estire forzosamente */
  border-radius: 8px;
  overflow: hidden;
}

/* Columna Derecha */
.urbana-col-der {
  flex: 1;
  border-radius: 8px;
  overflow: hidden;
}

/* Ajuste general (para la foto de la derecha) */
.mosaico-urbana img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 🌟 LA SOLUCIÓN PARA LA FOTO DE ABAJO */
.urbana-img-abajo img {
  width: 100%;
  height: auto !important; /* !important fuerza a ignorar cualquier altura fija */
  object-fit: contain;  
  display: block;
}

/* ==========================================================
   MOSAICO: SISTEMAS DE TRANSPORTE2 (Ajustado)
   ========================================================== */
.mosaico-transporte2 {
  display: flex;
  gap: 20px;
  max-width: 1400px;
  margin: 0 auto;
  align-items: stretch; /* Obliga a que ambas columnas midan lo mismo */
}

/* Columna Izquierda */
.trans2-col-izq {
  flex: 1.9;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.trans2-col-izq .project-text {
  flex: none;
}

/* 🌟 LA CLAVE: La foto grande se estira para llenar todo el espacio vertical sobrante */
.trans2-img-grande {
  flex: 1; 
  border-radius: 8px;
  overflow: hidden;
  min-height: 250px; /* Para que no se aplaste demasiado */
}

.trans2-img-grande img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Llena su caja */
  display: block;
}

/* Columna Derecha */
.trans2-col-der {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.trans2-foto-1,
.trans2-foto-2 {
  border-radius: 8px;
  overflow: hidden;
  /* 🌟 Quitamos el aspect-ratio y el background para que fluyan natural */
}

/* Dejamos que las imágenes de la derecha fluyan con su altura natural */
.trans2-foto-1 img,
.trans2-foto-2 img {
  width: 100%;
  height: auto !important; /* Respetan su proporción original */
  display: block;
}

/* Responsive */
@media (max-width: 900px) {
  .mosaico-transporte2 {
    flex-direction: column;
  }
  .trans2-img-grande {
    min-height: 300px;
  }
}

/* ==========================================================
   MOSAICO: CONCESIONES VIALES (Equilibrado)
   ========================================================== */
.mosaico-viales {
  display: flex !important;
  flex-direction: row !important;
  gap: 30px; /* Un poco más de separación */
  max-width: 1400px;
  margin: 0 auto;
  align-items: flex-start; /* 🌟 Alinea todo arriba, no estira las cajas */
}

/* Bloque Izquierdo */
.viales-bloque-izq {
  flex: 2; 
  display: flex !important;
  flex-direction: column !important;
  gap: 100px;
}

.viales-texto {
  flex: none; 
}

/* Las dos fotos de abajo */
.viales-fotos-abajo {
  display: flex !important;
  flex-direction: row !important;
  gap: 20px;
  height: 250px; /* Altura fija para las fotos chicas */
}

.viales-foto {
  flex: 1; 
  border-radius: 8px;
  overflow: hidden;
}

/* 🌟 BLOQUE DERECHO (Ajustado para no ser gigante) */
.viales-foto-der {
  flex: 1; 
  border-radius: 8px;
  overflow: hidden;
  background-color: #f1f5f9;
  
  /* Le damos una altura proporcional al bloque de la izquierda, no lo dejamos estirarse */
  height: 600px; /* Ajusta este número. Si el texto es largo, 480px o 500px debería quedar perfecto */
}

/* Las fotos de la izquierda (llenan su caja) */
.viales-foto img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* La foto de la derecha (se ve completa y con márgenes si es necesario) */
.viales-foto-der img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important; /* Sin perder contenido */
  display: block !important;
  padding: 10px;
}

/* Responsive */
@media (max-width: 900px) {
  .mosaico-viales {
    flex-direction: column !important;
    align-items: stretch;
  }
  .viales-fotos-abajo {
    flex-direction: column !important;
    height: auto;
  }
  .viales-foto {
    height: 200px;
  }
  .viales-foto-der {
    height: 350px; 
    width: 100%;
  }
}
@media (max-width: 900px) {
  /* 1. Ponemos el texto arriba y las fotos abajo */
  .mosaico-obras-viales {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 30px !important; /* Un poco más de espacio entre el texto y las fotos */
  }

  /* 2. El texto ocupa todo el ancho */
  .obras-texto {
    flex: none !important;
    width: 100% !important;
  }

  /* 3. Las fotos se ponen en una fila (lado a lado) o en columna (apiladas) */
  .obras-fotos {
    flex-direction: column !important; /* 🌟 Ponemos las fotos una debajo de otra */
    height: auto !important; /* Quitamos la altura fija para que fluyan natural */
    width: 100% !important;
    gap: 15px !important;
  }

  /* 4. Ajustamos el tamaño de cada foto para que no se aplasten */
  .obras-foto {
    height: 250px !important; /* Una altura fija cómoda para ver las fotos en el celular */
    width: 100% !important;
  }
}

/* ==========================================================
   MOSAICO: DISEÑO VIAL1
   ========================================================== */
.mosaico-vial1 {
  display: grid;
  /* 3 columnas: Video Izq, Foto, Video Der (la derecha es más ancha) */
  grid-template-columns: 1fr 1fr 1.5fr; 
  /* 2 filas: La de arriba se ajusta al texto, la de abajo mide 250px */
  grid-template-rows: auto 250px; 
  gap: 20px;
  max-width: 1400px;
  margin: 0 auto;
}

/* 1. El texto ocupa las dos primeras columnas de la fila de arriba */
.vial1-texto {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}

/* 2. El Video izquierdo ocupa la columna 1 de la fila de abajo */
.vial1-video-izq {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

/* 3. La Foto ocupa la columna 2 de la fila de abajo */
.vial1-foto {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

/* 4. El Video derecho ocupa la columna 3 en TODAS las filas (es alto) */
.vial1-video-der {
  grid-column: 3 / 4;
  grid-row: 1 / 3;
}

/* Ajustes para que los videos y la foto llenen sus cajas sin deformarse */
.vial1-video-izq,
.vial1-foto,
.vial1-video-der {
  border-radius: 8px;
  overflow: hidden;
  background-color: #000; /* Fondo negro para videos */
}

.vial1-video-izq video,
.vial1-video-der video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.vial1-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Responsive para celulares */
@media (max-width: 900px) {
  .mosaico-vial1 {
    display: flex;
    flex-direction: column;
  }
  .vial1-video-izq,
  .vial1-foto,
  .vial1-video-der {
    height: 250px;
  }
}

/* ==========================================================
   MOSAICO: CONCESIÓN AEROPORTUARIAS
   ========================================================== */
.mosaico-aeroportuarias {
  display: flex !important;
  flex-direction: column !important; /* 🌟 Pone las fotos DEBAJO del texto */
  gap: 30px; /* Espacio entre el texto y las fotos */
  max-width: 1400px;
  margin: 0 auto;
}

/* Columna del Texto (Ahora ocupa todo el ancho) */
.aeroportuarias-col-izq {
  width: 100%; 
}

/* Fila de las 3 Fotos */
.aeroportuarias-col-der {
  display: flex !important;
  flex-direction: row !important; /* 🌟 Las 3 fotos en línea horizontal */
  gap: 20px;
  width: 100%;
}

/* Cajas de las fotos */
.aeroportuarias-foto {
  flex: 1; /* 🌟 Cada foto ocupa exactamente 1/3 del ancho de la fila */
  aspect-ratio: 16 / 9; /* Proporción rectangular (panorámica) */
  border-radius: 8px;
  overflow: hidden;
  background-color: #f1f5f9; 
}

/* Ajuste de las imágenes */
.aeroportuarias-foto img {
  width: 100% !important;    
  height: 100% !important;   
  object-fit: cover !important; 
  display: block;
}

/* ==========================================================
   RESPONSIVE: CONCESIÓN AEROPORTUARIAS
   ========================================================== */
@media (max-width: 900px) {
  .aeroportuarias-col-der {
    flex-direction: column !important; /* En celular, las fotos se apilan */
  }
  .aeroportuarias-foto {
    aspect-ratio: 16 / 9; 
  }
}
/* ==========================================================
   MOSAICO: DISEÑO VIAL2
   ========================================================== */
.mosaico-vial2 {
  display: flex;
  gap: 20px;
  max-width: 1400px;
  margin: 0 auto;
  align-items: stretch; /* Iguala la altura de la foto derecha con la izquierda */
}

.vial2-col-izq {
  flex: 2.5; /* 🌟 Antes era 1.5. Al subirlo, ocupa más espacio horizontal */
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.vial2-col-izq .project-text {
  flex: none;
}

/* Contenedor del video y la foto de abajo */
.vial2-media-abajo {
  display: flex;
  gap: 20px;
  height: 250px; /* 🌟 Altura fija para que no se estiren de más */
}

.vial2-media-item {
  flex: 1; /* Ocupan 50% y 50% */
  border-radius: 8px;
  overflow: hidden;
  background-color: #000; /* Fondo negro para el video */
}

/* Ajuste para el video y la foto de abajo */
.vial2-media-item video,
.vial2-media-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* Ajuste para el video (que llene su caja) */
.vial2-media-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 🌟 Ajuste para la FOTO de abajo (que se vea completa sin recortes) */
.vial2-media-item img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 🌟 Muestra la imagen entera */
  background-color: #f1f5f9; /* Un fondo gris suave por si quedan espacios vacíos */
  display: block;
}

/* Columna Derecha (Más angosta) */
.vial2-col-der {
  flex: 1; /* 🌟 Ocupa menos espacio, por lo tanto la foto se achica */
  border-radius: 8px;
  overflow: hidden;
}

.vial2-col-der img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Responsive para celulares */
@media (max-width: 900px) {
  .mosaico-vial2 {
    flex-direction: column;
  }
  .vial2-media-abajo {
    flex-direction: column;
    height: auto;
  }
  .vial2-media-item {
    height: 200px;
  }
  .vial2-col-der {
    height: 300px;
  }
}


/* ==========================================================
   MOSAICO: CONCESIÓN DE OBRAS VIALES
   ========================================================== */
.mosaico-obras-viales {
  display: flex !important;
  flex-direction: row !important;
  gap: 40px;
  max-width: 1400px;
  margin: 0 auto;
  align-items: flex-start;  /* Hace que las fotos igualen la altura del texto */
}

/* Columna Izquierda (Texto) */
.obras-texto {
  flex: 1.2; /* Ocupa un poco más de espacio */
}

/* Columna Derecha (Fotos) */
.obras-foto {
  flex: 1; 
  border-radius: 8px;
  overflow: hidden;
  background-color: #f1f5f9; /* 🌟 Fondo gris suave por si quedan espacios vacíos */
}

/* Cajas de las fotos */
.obras-foto {
  flex: 1; /* Hace que las 3 fotos se repartan el alto por igual */
  border-radius: 8px;
  overflow: hidden;
}

/* Ajuste para que las imágenes llenen la caja sin deformarse */
.obras-foto img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important; /* 🌟 Muestra la foto COMPLETA, sin recortar */
  display: block !important;
  padding: 5px; /* Un pequeño margen interno */
}

/* Responsive para celulares */
@media (max-width: 900px) {
  .mosaico-obras-viales {
    flex-direction: column !important;
  }
  .obras-fotos {
    flex-direction: row !important; /* En celular se ponen lado a lado abajo */
    height: 200px;
  }
}


/* Lista de autopistas integrada al texto */
.lista-autopistas {
  list-style: none;
  padding-left: 0;
  
  /* 🌟 LA SOLUCIÓN: Controlamos los márgenes superior e inferior */
  margin-top: 0.5rem;    /* Da un pequeño respiro con el texto de arriba */
  margin-bottom: 1.5rem; /* Separa del siguiente párrafo */
  
  display: flex;
  flex-direction: column;
  gap: 0.3rem;           /* Espacio entre cada autopista */
}

.lista-autopistas li {
  position: relative;
  padding-left: 1.2rem;
  color: #03b338; /* 🌟 Aquí cambias el color. Usa --text (más oscuro) o --accent (azul) */
  font-size: 0.95rem;    
  line-height: 1.6;      
}

/* El guion elegante */
.lista-autopistas li::before {
  content: "◆";          
  position: absolute;
  left: 0;
  color: #03521b;  
  font-weight: 500;
}

/* ==========================================================
   CUADRÍCULA DE LOGOS
   ========================================================== */
.logos-grid {
  display: grid;
  /* Crea columnas automáticas de mínimo 120px de ancho. 
     Si hay espacio para 6, pondrá 6. Si no, bajarán a la siguiente fila. */
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 2rem; /* Espacio entre cada logo */
  align-items: center; /* Centra los logos verticalmente */
  justify-items: center; /* Centra los logos horizontalmente */
  max-width: 1400px; /* Ancho máximo de la sección */
  margin: 0 auto; /* Centra el bloque en la página */
  padding: 2rem 0;
}

/* Caja de cada logo */
.logo-item {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  /* Si quieres que tengan un fondo blanco o gris muy suave para resaltar, descomenta esta línea: */
  /* background: #ffffff; padding: 1rem; border-radius: 8px; */
}

/* Ajuste de la imagen del logo */
.logo-item img {
  max-width: 100%; /* No se sale de su caja */
  max-height: 80px; /* 🌟 Controla la altura máxima del logo (ajusta a 60px o 100px según tu gusto) */
  width: auto; /* Mantiene la proporción del logo */
  object-fit: contain; /* Evita que el logo se deforme */
  display: block;
  /* Opcional: filtro para volver los logos grises y que se vean uniformes */
  /* filter: grayscale(100%); opacity: 0.7; transition: 0.3s; */
}

/* Opcional: Efecto al pasar el mouse por el logo */
.logo-item img:hover {
  /* filter: grayscale(0%); opacity: 1; */
  transform: scale(1.05);
  transition: transform 0.3s ease;
}

/* ==========================================================
   MOSAICO: ESTUDIOS METODOLÓGICOS
   ========================================================== */
.mosaico-metodologicos {
  display: flex;
  gap: 20px;
  max-width: 1400px;
  margin: 0 auto;
  align-items: stretch; /* Iguala las alturas de ambas columnas */
}

/* Columna Izquierda */
.metodologicos-col-izq {
  flex: 1.5; /* Ocupa un poco más de ancho */
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.metodologicos-col-izq .project-text {
  flex: none; /* El texto toma su altura natural */
}

/* La foto de abajo no se estira, se adapta a su imagen */
.metodologicos-img-abajo {
  flex: none;
  border-radius: 8px;
  overflow: hidden;
}


.metodologicos-foto img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 🌟 La imagen se ve completa */
  background-color: #f1f5f9; /* Un fondo gris muy claro para los bordes sobrantes */
  display: block;
}

/* Columna Derecha */
.metodologicos-col-der {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  
}

/* Las dos cajas de la derecha se reparten el alto exacto en 2 */
.metodologicos-foto {
  flex: 1; 
  border-radius: 8px;
  overflow: hidden;
}

/* Ajuste para que las fotos de la derecha llenen su caja */
.metodologicos-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Responsive para celulares */
@media (max-width: 900px) {
  .mosaico-metodologicos {
    flex-direction: column;
  }
  .metodologicos-col-der {
    height: 400px; /* Le damos altura en móvil para que no colapsen */
  }
}


/* Imágenes en otras secciones (Equipo, Áreas, Contacto) */
.areas-section .media-item img,
.team-photo img,
.contact-info img,
.hero-logo-solo img,
.nav-logo img {
  width: 100%;
  height: auto !important; /* Anula cualquier altura forzada */
  display: block;
  border-radius: 8px;
}

/* Videos en Proyectos (si los hubiera a la derecha) */
.media-grid .media-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Videos en otras secciones */
.team-photo video,
.areas-section .media-item video {
  width: 100%;
  height: auto;
  display: block;
}

/* ========== ÁREAS ========== */
.areas-section { background: var(--bg-dark); color: #fff; }
.areas-section .section-title { color: #fff; }
.areas-section .section-desc { color: rgba(255,255,255,0.5); }
.areas-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border: 1px solid var(--line-light); border-radius: 12px; overflow: hidden;
  max-width: 1400px; margin: 0 auto;
}
.area-card {
  padding: 2.5rem 2rem; background: transparent;
  border-right: 1px solid var(--line-light);
  border-bottom: 1px solid var(--line-light);
  transition: background 0.3s;
}

/* 🌟 QUITA EL BORDE DERECHO A LA ÚLTIMA COLUMNA (La 4 y la 8) */
.area-card:nth-child(4n) { 
  border-right: none; 
}

/* 🌟 QUITA EL BORDE INFERIOR A LA ÚLTIMA FILA COMPLETA (Las últimas 4 tarjetas) */
.area-card:nth-last-child(-n+4) { 
  border-bottom: none; 
}

.area-card:hover { background: rgba(255,255,255,0.02); }
.area-card .icon { font-size: 1.5rem; margin-bottom: 1rem; }
.area-card h4 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1rem; font-weight: 600; margin-bottom: 0.5rem;
  color: #4ade80;
}
.area-card p {
  font-size: 0.82rem; color: rgba(255,255,255,0.4); line-height: 1.6;
}
.areas-img {
  display: grid; grid-template-columns: repeat(1, 1fr); gap: 2rem;
  max-width: 1400px; margin: 0 auto;
}


/* ========== CLIENTES ========== */
.clients-track {
  display: flex; gap: 3rem; align-items: center;
  justify-content: center; flex-wrap: wrap;
  max-width: 1400px; margin: 0 auto;
}
.client-item {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.1rem; font-weight: 500;
  color: var(--text-muted); transition: color 0.3s;
  cursor: default;
}
.client-item:hover { color: var(--accent); }

/* ========== EQUIPO ========== */
.team-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;
  max-width: 1400px; margin: 0 auto;
}
.team-member { text-align: center; }
.team-photo {
  width: 100%; height: 280px; border-radius: 8px;
  overflow: hidden; margin-bottom: 1rem; background: #ddd;
}
.team-photo img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(90%); /* Casi gris, deja ver un levísimo tono */
  transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1); /* Transición más fluida */
}

.team-member:hover .team-photo img {
  filter: grayscale(0%) sepia(10%); /* Recupera color con un tono cálido */
  transform: scale(1.05) translateY(-3px); /* Zoom y sube un poquito */
}
.team-member h4 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.95rem; font-weight: 600;
}
.team-member span {
  font-size: 0.75rem; color: var(--text-muted);
}
/* 🌟 Asegurarnos de que los videos llenen la caja igual que las fotos */
.team-photo video,
.team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Llena el espacio sin dejar franjas */
  display: block;
}

/* ==========================================================
   RESPONSIVE: EQUIPO CONSULTOR (Quitar velo y ajustar fotos)
   ========================================================== */
@media (max-width: 900px) {
  .team-grid {
    /* Si las fotos se ven muy apretadas, cambiamos a 1 columna en celular */
    grid-template-columns: 1fr !important; 
    gap: 1.5rem !important;
  }

  .team-photo {
    /* 🌟 LA SOLUCIÓN: Quitamos la altura fija para que la foto fluya */
    height: auto !important; 
    min-height: 250px;
    background-color: transparent !important; /* 🌟 Quitamos el velo gris */
  }

  .team-photo img {
    /* Aseguramos que la imagen llene el espacio sin deformarse */
    height: 100% !important;
    object-fit: cover !important;
  }
}
/* ========== DESCRIPCIÓN EQUIPO ========== */
.team-descripcion {
  max-width: 900px;
  margin: 0 auto 3rem;
  text-align: center;
}
.team-descripcion p {
  color: var(--text-light);
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 1.2rem;
}
.team-descripcion p:last-child {
  margin-bottom: 0;
}
.team-descripcion .highlight {
  color: #06b6d4;
  font-weight: 600;
}

/* Alinea todo el texto del contenedor a la izquierda */
.team-cipres {
  text-align: left;
}

/* Aplica el color específico a "CIPRES Ingeniería" */
.team-cipres .ccipres {
  color: #0056b3; /* Puedes cambiar este código por tu color corporativo */
}


/* ========== CONTACTO ========== */
.contact-section { background: var(--bg-dark); color: #fff; }
.contact-wrapper {
  display: grid; grid-template-columns: 1fr 1fr; gap: 5rem;
  max-width: 1400px; margin: 0 auto;
}
.contact-info h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.8rem; font-weight: 600; margin-bottom: 1rem;
}
.contact-info > p {
  color: rgba(255,255,255,0.45); font-size: 0.95rem;
  line-height: 1.7; margin-bottom: 2rem;
}
.contact-detail {
  margin-bottom: 1.5rem; padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line-light);
}
.contact-detail label {
  font-size: 0.6rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent-light);
  display: block; margin-bottom: 0.3rem;
}
.contact-detail span { font-size: 0.9rem; color: rgba(255,255,255,0.75); }

.contact-form { display: flex; flex-direction: column; gap: 1.5rem; }
.form-group { position: relative; }
.form-group input, .form-group textarea {
  width: 100%; background: transparent; border: none;
  border-bottom: 1px solid var(--line-light); color: #fff;
  padding: 0.7rem 0; font-size: 0.95rem; outline: none;
  transition: border-color 0.3s; font-family: inherit;
}
.form-group input:focus, .form-group textarea:focus {
  border-bottom-color: var(--accent-light);
}
.form-group label {
  position: absolute; left: 0; top: 0.7rem;
  font-size: 0.85rem; color: rgba(255,255,255,0.35);
  pointer-events: none; transition: all 0.3s;
}
.form-group input:focus + label,
.form-group input:not(:placeholder-shown) + label,
.form-group textarea:focus + label,
.form-group textarea:not(:placeholder-shown) + label {
  top: -0.6rem; font-size: 0.6rem; color: var(--accent-light);
  text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600;
}
.form-group textarea { resize: vertical; min-height: 70px; }
.btn-submit {
  align-self: flex-start; padding: 0.9rem 2.5rem;
  background: var(--accent); color: #fff; border: none;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; cursor: pointer;
  transition: all 0.3s; border-radius: 4px;
}
.btn-submit:hover { background: var(--accent-hover); transform: translateY(-2px); }

/* ========== FOOTER ========== */
footer {
  background: var(--bg-dark); color: rgba(255,255,255,0.2);
  text-align: center; padding: 2.5rem 3rem; font-size: 0.75rem;
  border-top: 1px solid var(--line-light);
}

/* ========== RESPONSIVE ========== */
@media (max-width: 900px) {
  .project-layout, .project-layout.reverse { grid-template-columns: 1fr; direction: ltr; }
  .project-layout.reverse > * { direction: ltr; }
  .areas-grid { grid-template-columns: 1fr; }
  .area-card { border-right: none !important; }
  .team-grid { grid-template-columns: 1fr 1fr; }
  .contact-wrapper { grid-template-columns: 1fr; gap: 3rem; }
  .hero-thumbs { width: 200px; right: 1.5rem; bottom: 4.5rem; }
  .hero-email { right: 1.5rem; bottom: 1.5rem; }
  .hero-email a { font-size: 0.65rem; }
  .hero-content { left: 1.5rem; right: 1.5rem; bottom: 3rem; }
  .hero-logo-solo { left: 1.5rem; top: 5rem; }
  .hero-logo-solo .logo-text span { font-size: 1.1rem; }
  .hero-logo-solo .logo-mark { font-size: 1.1rem; }
  .hero-logo-solo .logo-divider { height: 2.2rem; }
  nav { padding: 1rem 1.5rem; }
  .nav-links { display: none; }
  section { padding: 4rem 1.5rem; }
}
@media (max-width: 500px) {
  .team-grid { grid-template-columns: 1fr; }
  .hero-thumbs { display: none; }
  .hero-email { display: none; }
  .media-grid.count-3,
  .media-grid.count-4,
  .media-grid.count-5,
  .media-grid.count-6 { grid-template-columns: 1fr; }
  .media-grid.count-3 .media-item:nth-child(3) { grid-column: 1; }
}