/* ===============================
   VARIABLES GLOBALES DE COLOR
================================== */
:root {
  --gris-oscuro: #4a5259;
  --verde-claro: #2d9359;
  --azul-medio: #1366ae;
  --verde-agua: #0a8d76;
  --azul-petroleo: #0f798d;

  --color-texto: var(--gris-oscuro);
  --color-hover: var(--verde-claro);
  --color-activo: var(--verde-claro);
  --color-fondo-navbar: #ffffff;
}
@font-face {
  font-family: "Magon360";
  src: url("fonts/Magon360-Medium.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "BRFirma";
  src: url("fonts/BRFirma-Medium.otf") format("opentype");
  font-display: swap;
}

.hero-section h1 {
  font-family: "Magon360", serif;
}

.hero-section p {
  font-family: "BRFirma", sans-serif;
}

.hero-logo {
  max-width: 600px; /* Tamaño para pantallas grandes */
  width: 100%; /* Que sea flexible */
  height: auto; /* Mantiene proporción */
}

@media (max-width: 768px) {
  /* Tablets y móviles grandes */
  .hero-logo {
    max-width: 300px;
  }
}

@media (max-width: 480px) {
  /* Móviles pequeños */
  .hero-logo {
    max-width: 200px;
  }
}

/* ===============================
   ESTILOS GENERALES
================================== */
body {
  color: var(--color-texto);
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

/* ===============================
   NAVBAR MODERNA
================================== */
.navbar {
  background-color: var(--color-fondo-navbar);
  transition: all 0.3s ease-in-out;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.nav-link {
  position: relative;
  padding: 8px 12px;
  font-weight: 500;
  color: var(--color-texto);
  transition: color 0.3s ease;
}

.nav-underline::after {
  content: "";
  position: absolute;
  width: 0%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: var(--color-hover);
  transition: width 0.4s ease;
}

.nav-underline:hover::after,
.nav-link.active::after {
  width: 100%;
}

.nav-link:hover {
  color: var(--color-hover);
}

/* ===============================
   SECCIÓN HERO
================================== */
.hero-section {
  background: linear-gradient(rgba(17, 110, 175, 0.7), rgba(15, 121, 141, 0.7)),
    url("../img/hero.png") no-repeat center center;
  background-size: cover;
  height: 80vh; /* Altura de la sección */
  min-height: 500px;
}

/* ===============================
    GENERALES
================================== */
.text-primary {
  color: var(--azul-medio) !important;
}

.btn-primary {
  background-color: var(--azul-medio);
  border-color: var(--azul-medio);
}

.btn-primary:hover {
  background-color: #0e5a8c;
  border-color: #0e5a8c;
}

.btn-outline-primary {
  border-color: var(--azul-medio);
  color: var(--azul-medio);
}

.btn-outline-primary:hover {
  background-color: var(--azul-medio);
  color: #fff;
}

.rounded-pill {
  border-radius: 50px !important;
  padding-left: 2rem;
  padding-right: 2rem;
}

.card {
  border: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1) !important;
}

.icon-custom {
  color: #1366ae !important;
}

/* ===============================
 SECCIÓN "NOSOTROS"
================================== */
.nosotros-decorated .display-6::after {
  content: "";
  display: block;
  width: 100px;
  height: 4px;
  background: linear-gradient(to right, var(--azul-medio), var(--verde-agua));
  margin: 1rem auto 0;
  border-radius: 2px; /* Bordes suaves */
}

/* ===============================
   ESTILOS PARA SECCIÓN "SERVICIOS" CON FONDO HERO
================================== */
.servicios-cards-row .card {
  background: linear-gradient(135deg, #2d9359, #1366ae);
  color: white;
  border: none;
}

.servicios-cards-row .card .text-primary {
  color: #f8f9fa !important;
}

.servicios-cards-row .card .card-title {
  color: white;
}

.servicios-cards-row .card .card-text {
  color: rgba(255, 255, 255, 0.8);
}

.servicios-cards-row .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2) !important;
}

/* ===============================
   ESTILOS PARA EL MAPA DE GOOGLE
================================== */
.google-map-container {
  position: relative;
  overflow: hidden;
  padding-top: 75%;
  border-radius: 0.25rem;
}

.google-map-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ===============================
   ESTILOS PARA ICONOS SOCIALES DEL FOOTER
================================== */
.footer-social-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #e9ecef;
  color: var(--gris-oscuro);
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.footer-social-icon:hover {
  background-color: var(--azul-medio);
  color: #fff;
}

/* ===============================
   FOOTER
================================== */
.main-footer {
  background-color: #f8f9fa;
  color: var(--gris-oscuro);
  border-top: 1px solid #e7e7e7;
}

.main-footer .footer-link {
  text-decoration: none;
  color: var(--gris-oscuro);
  transition: color 0.3s ease;
}

.main-footer .footer-link:hover {
  color: var(--azul-medio);
}

.main-footer .text-uppercase {
  color: var(--azul-medio);
}

.footer-bottom-bar {
  background-color: #e9ecef;
  border-top: 1px solid #dee2e6;
}