/* ===== ESCRITORIO ===== */
.container-fluid{max-width:1400px;margin:0 auto}

/* Header compacto */
.encabezado-img{height:60vh;max-height:500px}
.menu-toggle{top:30px;right:30px;font-size:20px;padding:10px 15px}

/* ===== GRID PRINCIPAL (4 rutas) ===== */
.section-grid-container{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr)); /* SIEMPRE 2x2 en desktop */
  gap:24px;
  padding:40px 20px;
  max-width:1100px;
  margin:0 auto;
}

/* Tarjeta hero: tamaño banner, imagen COMPLETA */
.section-img{
  position:relative;
  height:260px;                /* alto fijo “banner” (ajusta a gusto) */
  border-radius:18px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
}

/* Botón ocupa todo y no agrega padding */
.section-img .img-button{
  display:block;width:100%;height:100%;padding:0;margin:0;border:0;background:transparent;
}

/* Imagen visible COMPLETA (sin recorte) */
.section-img .img-button img{
  width:100%;height:100%;
  object-fit:contain;          /* <- muestra la foto completa */
  border-radius:18px;
  background:#f5f5f5;          /* color de relleno si sobran franjas */
  transition:transform .25s ease;
}

/* Overlay de color (aparece en hover) */
.section-img::after{
  content:"";position:absolute;inset:0;border-radius:18px;
  background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.45));
  opacity:0;transition:opacity .25s ease;
}

/* Botón “Ver más” (aparece en hover) */
.btn-ver-mas{
  position:absolute;right:16px;bottom:14px;z-index:2;
  background:linear-gradient(135deg,#E63E82,#8B1B27);
  color:#fff;border:0;border-radius:999px;padding:.5rem 1rem;
  font-weight:800;box-shadow:0 8px 20px rgba(139,27,39,.25);
  transform:translateY(6px);opacity:0;transition:all .25s ease;
}

/* Hover: overlay + botón visibles, micro-zoom agradable */
.section-img:hover::after{opacity:1}
.section-img:hover .img-button img{transform:scale(1.01)}
.section-img:hover .btn-ver-mas{opacity:1;transform:none}

/* ===== RUTAS (banner grande inferior) ===== */
#rutas{max-width:900px;margin:40px auto}
#rutas .img-button{height:auto;padding:0;border:0}
#rutas img{width:100%;height:auto;border-radius:18px;object-fit:contain;background:#f5f5f5}

/* ===== SERVICIOS ===== */
.servicios-section{padding:60px 0 40px}
.servicios-img{max-width:600px;height:auto}

.container .row{max-width:1200px;margin:0 auto;padding:0 20px}
.col{padding:15px}
.col img{height:200px;width:100%;object-fit:cover;border-radius:14px;transition:transform .3s ease,box-shadow .3s ease}
.col:hover img{transform:translateY(-5px);box-shadow:0 10px 25px rgba(0,0,0,.15)}
.titulo-grid{font-size:18px;margin-top:12px;font-weight:bold}
.subtitulo-grid{font-size:14px;opacity:.85}

/* ===== TESTIMONIOS ===== */
.testimonios-section{padding:60px 0}
.testimonios-img{max-width:500px;margin-bottom:40px}
.testimonial-box{max-width:720px;background:rgba(255,255,255,.95);border-radius:15px;box-shadow:0 5px 20px rgba(0,0,0,.1);margin:20px auto}
.testimonial-box p{font-size:18px;line-height:1.6;margin:20px 0}

/* ===== FOOTER ===== */
.footer-pagina{margin-top:60px}
.footer-cuerpo{padding:40px 0;max-width:1200px;margin:0 auto}
.footer-imagen{max-width:200px}
.columna-derecha a{font-size:16px;margin:0 15px;display:inline-block;padding:5px 0}
.footer-frase{padding:20px 0}

/* ===== Suavidad ===== */
html{scroll-behavior:smooth}

/* ===== PANTALLAS GRANDES ===== */
@media (min-width:1400px){
  .section-grid-container{max-width:1200px} /* sigue siendo 2x2 */
  .section-img{height:280px}
}

/* ===== ULTRA ANCHAS ===== */
@media (min-width:1600px){
  .container-fluid{max-width:1600px}
  .section-img{height:300px}
}

/* el overlay no debe bloquear los clics */
.section-img::after{
  pointer-events: none;
}

/* aseguro que el botón quede arriba */
.section-img .img-button{
  position: relative;
  z-index: 1;
}