/* 
 * energia.css
 * Contiene estilos específicos de la página energia.html,
 * incluyendo secciones hero, contenido principal, servicios, contacto, FAQ y media queries.
 * Los estilos comunes se cargan desde common.css, header.css, y footer.css.
 */

/* Fondo general de la página */
body {
  background-color: #fff; /* Fondo blanco completo para toda la página */
}

/* Main Content */
.main-content { 
  padding: 60px 0; 
  text-align: center; 
  background-color: #fff; /* Fondo blanco, como en /index.html */
}
.main-content h1 { 
  font-size: 3em; /* Ajustado según /index.html */
  color: #003087; 
  margin-bottom: 20px; 
  font-weight: 700; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  gap: 10px; 
}
.title-icon { 
  color: #f4a261; 
  font-size: 1.2em; 
}
.main-content p { 
  font-size: 1.3em; /* Ajustado según /index.html */
  color: #555; 
  margin-bottom: 20px; 
  line-height: 1.8; 
}

/* Beneficios */
.benefits { 
  background-color: #e6f0fa; /* Fondo celeste claro, como en /index.html */
}
.enterprise-text { 
  margin-top: 40px; /* Más espaciado para separar del benefit-grid */
}

/* Servicios (Herramientas) */
.services { 
  background-color: #fff; /* Fondo blanco, como en /index.html */
}
.services-grid { 
  display: grid; 
  grid-template-columns: repeat(4, 1fr); /* Asegura 4 columnas para "Nuestras Herramientas" */
  gap: 20px; /* Espaciado entre las tarjetas */
}
.service-card { 
  display: flex; 
  flex-direction: column; /* Asegura que el contenido se distribuya verticalmente */
  justify-content: space-between; /* Distribuye el espacio para que los botones queden abajo */
  height: 100%; /* Asegura que todas las tarjetas tengan la misma altura */
}
.service-card .benefit-icon { 
  font-size: 2.5em; 
  color: #f4a261; 
  margin-bottom: 15px; 
}
.service-card h3 { 
  flex-grow: 1; /* Permite que el título ocupe el espacio necesario */
}
.service-card p { 
  flex-grow: 1; /* Permite que el texto ocupe el espacio necesario */
}
.service-card .btn--small { 
  margin-top: 15px; /* Asegura que el botón esté separado del texto */
}

/* Servicios de Gestión Energética */
.service-management { 
  background-color: #f5f7fa; /* Fondo gris claro, para alternar */
}
.service-management .services-grid { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); /* Asegura 3 columnas para los primeros servicios */
  gap: 20px; /* Espaciado entre las tarjetas */
}
.services-grid-bottom { 
  display: grid; 
  grid-template-columns: repeat(2, 1fr); /* Asegura 2 columnas para los servicios de abajo */
  gap: 20px; /* Espaciado entre las tarjetas */
  margin-top: 20px; /* Espaciado entre las dos filas de servicios */
}
.services-grid .service-card img.service-image, 
.services-grid-bottom .service-card img.service-image { 
  max-width: 200px; /* Imagen más pequeña */
  display: block; 
  margin: 0 auto; /* Centrado dentro del contenedor */
  margin-bottom: 15px; /* Espaciado debajo de la imagen */
}

/* Sección de contacto */
.cta-section { 
  background-color: #e6f0fa; /* Fondo celeste claro, como en /index.html y /empresa */
}
.cta-section .contact-container { 
  text-align: center; /* Asegura que todo dentro del contenedor esté centrado */
}
.cta-section p { 
  font-size: 1.1em; 
  color: #666; /* Texto en negro/gris oscuro */
  margin-bottom: 25px; 
  line-height: 1.8; 
  text-align: center; 
}
.cta-section .cta-button { 
  display: block; 
  margin: 0 auto; /* Centrado del botón */
}
.cta-section .cta-button--small { 
  display: block; /* Cambiado a block para un centrado más predecible */
  padding: 10px 15px; /* Reducido el padding horizontal para hacer el botón más corto */
  margin: 0 auto; /* Centrado */
  margin-bottom: 10px; /* Espaciado entre el botón y el horario */
}
.cta-section .schedule-text { 
  font-size: 0.9em; 
  color: #666; 
  text-align: center; 
  margin-top: 0; /* Eliminado el margen superior para que esté justo debajo del botón */
}

/* Sección de Preguntas Frecuentes */
.faq-section { 
  padding: 20px 0 60px; /* Reducido el padding superior para eliminar el espacio sobrante */
  text-align: center; 
  background-color: #fff; /* Fondo blanco, según solicitud */
  margin-top: 40px; /* Separación de la sección anterior */
}
.faq-item { 
  background-color: #fff; /* Fondo blanco para las FAQ, alineado con el tema */
  padding: 20px; 
  border-radius: 10px; 
  margin-bottom: 20px; 
  text-align: left; 
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); 
}
.faq-item h3 { 
  font-size: 1.2em; 
  color: #003087; 
  margin-bottom: 10px; 
  display: flex; 
  align-items: center; 
  gap: 10px; 
}
.faq-icon { 
  color: #f4a261; 
  font-size: 1.2em; 
}
.faq-item p { 
  font-size: 0.95em; 
  color: #555; 
  line-height: 1.6; 
}

/* CTA con imagen y botón */
.cta-section { 
  background-color: #e6f0fa; /* Fondo celeste claro, como en /index.html y /empresa */
  padding-bottom: 40px; /* Aumentado el espacio inferior para separar del footer */
}
.cta-image__img { 
  max-width: 350px; /* Aumentado según solicitud */
}
.cta-text { 
  flex: 1; 
  text-align: left; /* Alineación a la izquierda para el texto */
  padding-left: 20px; /* Espaciado para que no quede pegado a la imagen */
}
.cta-text h2 { 
  text-align: left; /* Alineación a la izquierda para el título */
}
.cta-text p { 
  text-align: left; /* Alineación a la izquierda para el párrafo */
}
.cta-text .cta-button--small { 
  display: inline-block; 
  padding: 10px 15px; /* Reducido el padding horizontal para hacer el botón más corto */
  margin: 0 auto; /* Centrado */
  margin-top: 15px; /* Espaciado encima del botón */
}

/* Footer */
.site-footer { 
  margin-top: 0; /* Elimina el espacio superior para evitar espacio en blanco */
}

/* Media queries */
@media (max-width: 1024px) {
  .main-content h1 { 
    font-size: 2.5em; 
  }
  .main-content p { 
    font-size: 1.2em; 
  }
  .cta-text { 
    padding-left: 10px; 
  }
  .services-grid { 
    grid-template-columns: repeat(2, 1fr); /* 2 columnas en pantallas medianas */
  }
  .service-management .services-grid { 
    grid-template-columns: repeat(2, 1fr); /* 2 columnas para los primeros servicios */
  }
  .services-grid-bottom { 
    grid-template-columns: repeat(2, 1fr); /* 2 columnas para los servicios de abajo */
  }
}

@media (max-width: 768px) {
  .main-content, 
  .faq-section { 
    padding: 20px 15px 40px; /* Ajustado para mantener consistencia */
  }
  .main-content h1 { 
    font-size: 2em; 
  }
  .main-content p { 
    font-size: 1.1em; 
  }
  .faq-section { 
    margin-top: 20px; 
  }
  .cta-text { 
    text-align: center; /* Centrado en móviles */
    padding-left: 0; 
  }
  .cta-text h2, 
  .cta-text p { 
    text-align: center; /* Centrado en móviles */
  }
  .services-grid { 
    grid-template-columns: 1fr; /* 1 columna en pantallas pequeñas */
  }
  .service-management .services-grid { 
    grid-template-columns: 1fr; /* 1 columna para los primeros servicios */
  }
  .services-grid-bottom { 
    grid-template-columns: 1fr; /* 1 columna para los servicios de abajo */
  }
}

@media (max-width: 480px) {
  .main-content h1 { 
    font-size: 1.8em; 
  }
  .main-content p { 
    font-size: 1em; 
  }
  .faq-item h3 { 
    font-size: 1.1em; 
  }
  .faq-item p { 
    font-size: 0.9em; 
  }
}