/* ============================================================
   RESPONSIVE.CSS
   Ajustes puntuales fuera del grid de Bootstrap 5
   ============================================================ */

/* Tablets */
@media (max-width: 768px) {
  .hero h1 {
    font-size: 1.8rem;
  }

  .navbar-fundacion .navbar-brand img {
    height: 40px;
  }

  .seccion {
    padding: var(--espacio-md) var(--espacio-xs);
  }
}

/* Celulares */
@media (max-width: 480px) {
  .hero {
    padding: var(--espacio-lg) var(--espacio-xs);
  }

  .hero h1 {
    font-size: 1.4rem;
  }

  .btn-cta {
    width: 100%;
  }
}
/* Nombre junto al logo en el navbar */
.navbar-fundacion .nombre-fundacion {
  font-family: var(--fuente-titulos);
  font-weight: 600;
  color: var(--azul-marino);
  font-size: 1rem;
  line-height: 1.15;
}

@media (max-width: 480px) {
  .navbar-fundacion .nombre-fundacion {
    font-size: 0.75rem;
    max-width: 120px;
  }
}

@media (max-width: 412px) {
  .navbar-fundacion .nombre-fundacion {
    display: none; /* en pantallas muy angostas, solo el logo */
  }
}