/* --- ESTILOS VISUALES DE GRUPO ALINCO --- */
:root {
  --color-primario: #f3b131; /* Amarillo/Naranja del logo */
  --color-oscuro: #2b2b2b;
  --color-claro: #f8f9fa;
  --texto: #4a4a4a;
}

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
  padding: 0;
  color: var(--texto);
  line-height: 1.6;
}

/* Sección de Inicio (Cabecera) */
.hero {
  background-color: var(--color-oscuro);
  color: white;
  padding: 25px 5%; /* Redujimos el relleno (padding) para que sea más angosto */
  border-bottom: 4px solid var(--color-primario);
  display: flex; /* Esto pone el logo y el texto uno al lado del otro */
  align-items: center; /* Los centra verticalmente */
  justify-content: flex-start; /* Los tira hacia la izquierda */
  gap: 30px; /* Espacio de separación entre el logo y las letras */
}
.logo-principal {
  max-width: 130px; /* Logo mucho más pequeño y sutil */
  height: auto;
}
.hero-texto {
  display: flex;
  flex-direction: column; /* Pone el título arriba y el subtítulo abajo */
}

.hero-texto h1 {
  font-size: 2rem; /* Letra más pequeña */
  margin: 0;
  letter-spacing: 1px;
}
.hero-texto h1 span {
  color: var(--color-primario);
}
.hero-texto p {
  font-size: 1rem; /* Subtítulo más pequeño */
  font-weight: 300;
  margin: 5px 0 0 0;
  color: #d1d1d1;
}

/* Formato general de secciones */
.seccion {
  padding: 80px 20px;
  max-width: 1100px;
  margin: 0 auto;
}
.seccion-titulo {
  text-align: center;
  font-size: 2.5rem;
  color: var(--color-oscuro);
  margin-bottom: 50px;
}
.seccion-titulo::after {
  content: "";
  display: block;
  width: 80px;
  height: 4px;
  background-color: var(--color-primario);
  margin: 10px auto 0;
}
/* Sección Nosotros (Ahora con imagen de fondo) */
.banner-nosotros {
  /* Aquí ponemos el filtro oscuro y luego la imagen */
  background-image:
    linear-gradient(rgba(43, 43, 43, 0.85), rgba(43, 43, 43, 0.85)),
    url("media/maquinas.jpg");
  background-size: cover;
  background-position: center;
  color: white; /* Hace que todo el texto dentro sea blanco */
  max-width: 100%; /* Para que ocupe todo el ancho de la pantalla */
  padding: 100px 20px;
}

/* Forzamos a que el título en esta sección también sea blanco */
.banner-nosotros .seccion-titulo {
  color: white;
}

.nosotros-texto {
  text-align: center;
  font-size: 1.1rem;
  max-width: 800px;
  margin: 0 auto;
  color: var(--texto); /* Vuelve a usar el gris oscuro principal */
}

/* Forzamos el color claro SOLO cuando el texto está sobre la imagen de fondo */
.banner-nosotros .nosotros-texto {
  color: #e0e0e0;
}

.destacado {
  font-weight: bold;
  color: var(--color-primario);
}

/* Cuadrícula de Servicios */
.servicios-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
}

.servicio-card {
  background-color: white;
  border: 1px solid #eaeaea;
  border-radius: 8px;
  padding: 0;
  width: calc(45% - 60px);
  min-width: 280px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  overflow: hidden;
}

.servicio-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* La barra de color, pero manteniendo tu texto original */
.servicio-card h3 {
  background-color: var(--color-primario);
  color: var(--color-oscuro);
  margin: 0;
  padding: 25px 30px; /* Le damos aire, pero alineado a la izquierda */
}

/* El texto descriptivo */
.servicio-card p {
  padding: 20px 30px 30px 30px;
  margin: 0;
}
/* Sección Contacto */
.contacto {
  background-color: var(--color-claro);
}
.contacto-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}
.contacto-item {
  background-color: white;
  padding: 20px 40px;
  border-radius: 8px;
  text-align: center;
  border-left: 4px solid var(--color-primario);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.contacto-item a {
  color: var(--color-oscuro);
  text-decoration: none;
  font-weight: bold;
  font-size: 1.1rem;
}
.contacto-item a:hover {
  color: var(--color-primario);
}

/* Pie de página */
footer {
  background-color: var(--color-oscuro);
  color: white;
  text-align: center;
  padding: 20px;
  font-size: 0.9rem;
}

/* --- Estilos para hacer clickeables las tarjetas --- */
.servicio-card {
  cursor: pointer; /* Cambia la flecha por la manito al pasar el mouse */
}

/* --- Estilos de la Ventana Emergente (Modal) --- */
.modal {
  display: none; /* Oculto por defecto */
  position: fixed;
  z-index: 9999; /* Para que quede por encima de todo */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(26, 26, 26, 0.9); /* Fondo negro semi-transparente */
  align-items: center;
  justify-content: center;
}

.modal-contenido {
  background-color: white;
  padding: 40px;
  border-radius: 8px;
  width: 90%;
  max-width: 800px;
  position: relative;
  max-height: 80vh; /* Para que no se salga de la pantalla */
  overflow-y: auto; /* Permite hacer scroll interno si hay muchas fotos */
}

.cerrar-modal {
  position: absolute;
  right: 20px;
  top: 15px;
  color: #999;
  font-size: 35px;
  font-weight: bold;
  cursor: pointer;
  line-height: 1;
}

.cerrar-modal:hover {
  color: var(--color-primario);
}

.galeria-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 20px;
}

.galeria-grid img {
  width: calc(50% - 8px); /* Dos fotos por fila */
  height: 250px;
  object-fit: cover; /* Para que la foto no se deforme */
  border-radius: 4px;
}

/* Adaptación del modal para celular */
@media (max-width: 768px) {
  .galeria-grid img {
    width: 100%; /* Una foto por fila en celular */
    height: 200px;
  }
  .modal-contenido {
    padding: 30px 20px;
  }
}
/* Adaptación a celulares */
@media (max-width: 768px) {
  .servicio-card {
    width: 100%;
  }
  .hero h1 {
    font-size: 2.5rem;
  }
  .hero {
    flex-direction: column; /* En celular vuelve a apilarse */
    align-items: flex-start;
    padding: 30px 20px;
    gap: 15px;
  }
  .servicio-card {
    width: 100%;
  }
}