html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* Colores corporativos Santiagotarrak */
:root {
  --santiagotarrak-rojo: #C41E3A;
  --santiagotarrak-rojo-oscuro: #A01830;
}

/* Header y navegación */
.navbar-santiagotarrak {
  background-color: var(--santiagotarrak-rojo) !important;
}

.navbar-santiagotarrak .navbar-brand,
.navbar-santiagotarrak .nav-link {
  color: white !important;
}

.navbar-santiagotarrak .navbar-brand:hover,
.navbar-santiagotarrak .nav-link:hover {
  color: rgba(255, 255, 255, 0.85) !important;
}

.navbar-santiagotarrak .dropdown-menu {
  border-top: 3px solid var(--santiagotarrak-rojo);
  background-color: white;
}

.navbar-santiagotarrak .dropdown-item {
  color: #333;
}

.navbar-santiagotarrak .dropdown-item:hover {
  background-color: var(--santiagotarrak-rojo);
  color: white;
}

/* Footer */
.footer-santiagotarrak {
  background-color: var(--santiagotarrak-rojo) !important;
  color: white !important;
  border-top: none !important;
}

.footer-santiagotarrak a {
  color: rgba(255, 255, 255, 0.85);
}

.footer-santiagotarrak a:hover {
  color: white;
}

/* Botones primarios con color corporativo */
.btn-santiagotarrak {
  background-color: var(--santiagotarrak-rojo);
  border-color: var(--santiagotarrak-rojo);
  color: white;
}

.btn-santiagotarrak:hover {
  background-color: var(--santiagotarrak-rojo-oscuro);
  border-color: var(--santiagotarrak-rojo-oscuro);
  color: white;
}

/* Tarjetas clicables en la página de inicio */
.card-hover {
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  cursor: pointer;
}

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