body {
 font-family: 'Oswald', sans-serif;
 margin: 0;
 min-height: 100vh;
 background: linear-gradient(to bottom right, #ffffff, #f1f1f1);
 color: #333;
}

.navbar {
 background-color: #343a40;
}
.navbar .nav-link, .navbar-brand {
 color: white;
}
.navbar .nav-link:hover {
 color: #28a745;
}

.texto-nav { /* Esto es solo para la pagina principal, para que no cambie el color del texto al seleccionarlo */
 font-size: 1.25rem;
 text-transform: uppercase;
 color: #ffffff;
 text-decoration: none;
 margin-left: 1rem;
 white-space: nowrap;
}

.hero {
 background: linear-gradient(to right, #28a745, #dc3545);
 color: white;
 padding: 100px 0;
 text-align: center;
 clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.hero h1 {
 font-family: 'Bebas Neue', sans-serif;
 letter-spacing: 2px;
}

.section-title {
 font-weight: 700;
 color: #dc3545;
 border-bottom: 3px solid #28a745;
 display: inline-block;
 padding-bottom: 6px;
 margin-top: 60px;
}
.section-title-one {
 font-weight: 700;
 color: #dc3545;
 border-bottom: 3px solid #28a745;
 display: inline-block;
 padding-bottom: 5px;
 margin-top: 10px;
}

.card {
 border: none;
 transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
 transform: translateY(-5px);
 box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
.card-title {
 color: #28a745;
}

.btn-primary {
 background: linear-gradient(45deg, #dc3545, #ff4d4d);
 border: none;
}
.btn-primary:hover {
 background: linear-gradient(45deg, #c82333, #e60000);
}

.contact-container {
 background-color: #f8f9fa;
 padding: 40px;
 border-radius: 10px;
 box-shadow: 0 0 10px rgba(0,0,0,0.1);
 font-family: Verdana, Geneva, Tahoma, sans-serif;
 font-size: small;
}

label {
 color: #333;
}

.footer {
 background-color: #333333;
 color: white;
 padding: 20px 0;
 text-align: center;
}

.dropdown-toggle {
 text-decoration: none !important;
}
.dropdown-toggle::after {
 border-left: .3em solid transparent;
 border-right: .3em solid transparent;
 border-top: .3em solid white;
 margin-left: .3em;
}

h4 {
 font-size: large;
 color: white;
 font-weight: bold;
 font-family: Verdana, Geneva, Tahoma, sans-serif;
}

h5 {
 font-size: 165%;
}

a {
 text-decoration: none !important;
}

#sobre {
 text-align: justify;
}
p {
 font-size: 125%;
 font-family: Verdana, Geneva, Tahoma, sans-serif;
}
ul {
 font-size: 125%;
 font-family: Verdana, Geneva, Tahoma, sans-serif;
}
label {
 font-size: 125%;
}

/* ================== RESPONSIVE ================== */

/* Ajuste general de imágenes */
.responsive-img {
 max-width: 100%;
 height: auto;
 border-radius: 8px;
}

@media (max-width: 992px) {
 .hero {
  padding: 70px 20px;
 }
 .hero h1 {
  font-size: 2.5rem;
 }
 p.lead {
  font-size: 1.1rem;
 }
}

@media (max-width: 768px) {
 .hero {
  padding: 50px 15px;
 }
 .hero h1 {
  font-size: 2rem;
 }
 p.lead {
  font-size: 1rem;
 }
 p, ul, label {
  font-size: 110%;
 }
 h3 {
  font-size: 140%;
 }
 h5 {
  font-size: 140%;
 }
}

/* ---------------------------------------------------- */
/* CORRECCIÓN PRINCIPAL: MÓVILES (576px o menos)      */
/* ---------------------------------------------------- */
@media (max-width: 576px) {
 .hero {
  padding: 40px 10px;
  /* Aseguramos que el hero no tenga un ancho fijo y pueda encogerse */
  width: 100%; 
 }
  
 /* AJUSTE CLAVE: Usamos 'vw' para el título */
 .hero h1 {
  /* 8vw asegura que el texto se encoge proporcionalmente al ancho del dispositivo */
  font-size: 8vw; 
  /* Si tenías 'white-space: nowrap' en algún lado, esto lo anula y permite el salto de línea */
  white-space: normal !important; 
  line-height: 1.1; /* Ayuda a que las líneas queden juntas si el texto salta */
 }
  
 p.lead {
  font-size: 0.95rem;
 }
 p, ul, label {
  font-size: 100%;
 }
 h3 {
  font-size: 120%;
 }
 h5 {
  font-size: 120%;
 }
}