/* ====================
Fuente personalizada Malacitana Sans Light
==================== */
@font-face {
  font-family: 'Malacitana Sans Light';
  src: url('../fonts/Malacitana-Sans-Regular.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* ====================
Variables CSS para temas (light y dark)
==================== */
:root {
  --bs-link-color: #0d6efd;
  --bs-link-hover-color: #0a58ca;
  --bs-border-color: #dee2e6;
}

[data-bs-theme="light"] {
  --bs-body-bg: #fff;
  --bs-body-color: #212529;
  --bs-link-color: #0d6efd;
  --bs-link-hover-color: #0a58ca;
  --bs-border-color: #dee2e6;
  --footer-bg-invert: #e0e0e0;
  --footer-color-invert: #121212;
  --footer-border-invert: #aaffff;
}

[data-bs-theme="dark"] {
  --bs-body-bg: #121212;
  --bs-body-color: #e0e0e0;
  --bs-link-color: #80b3ff;
  --bs-link-hover-color: #a3cdfd;
  --bs-border-color: #333;
  --footer-bg-invert: #212529;
  --footer-color-invert: #fff;
  --footer-border-invert: #002525;
}



/* ====================
Estilos globales básicos
==================== */
html {
  font-size: 100%;
  /* 16px por defecto */
  scroll-behavior: smooth;
}


body {
  margin: 0;
  font-family: 'Malacitana Sans Light', Arial, sans-serif;
  line-height: 1.5;
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ====================
Contenedor principal
==================== */
main {
  margin-top: clamp(6rem, 10vw, 8rem);
  margin-bottom: clamp(3rem, 5vw, 4rem);
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
  padding: 1rem;
  box-sizing: border-box;
  color: var(--bs-body-color);
}

/* Diseño grid para contenido principal */
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18.75rem, 1fr));
  gap: 1.5rem;
  align-items: stretch;
}

/* ====================
Navbar principal
==================== */
#main-navbar {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
  border-bottom: 0.03125rem solid var(--bs-border-color);
  transition: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease;
}

/* Enlaces y marca (logo/título) dentro del navbar */
#main-navbar .navbar-brand,
#main-navbar .nav-link {
  color: var(--bs-body-color);
  transition: color 0.6s ease;
}

#main-navbar .nav-link:hover,
#main-navbar .nav-link:focus {
  color: var(--bs-link-color);
  text-decoration: underline;
}

/* Botón toggle para menú responsive */
#main-navbar .navbar-toggler {
  border-color: var(--bs-border-color);
  transition: border-color 0.6s ease;
}

/* ====================
Footer fijo abajo
==================== */
footer.site-footer {
  font-size: 0.75rem;
  padding: 0 0.5rem;
  line-height: 1.5rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;



  /* Invertir colores para footer */
  background-color: var(--footer-bg-invert);
  color: var(--footer-color-invert);
  border-top: 1px solid var(--footer-border-invert);

  /* Transiciones */
  transition: background-color 0.6s ease, color 0.6s ease, border-color 0.6s ease;
}

/* Estilos para enlaces en footer */
footer.site-footer a {
  color: var(--bs-link-color);
  text-decoration: none;
  transition: color 0.3s ease, text-decoration 0.3s ease;
}

footer.site-footer a:hover,
footer.site-footer a:focus {
  text-decoration: underline;
  color: var(--bs-link-hover-color);
  outline: none;
}

/* ====================
Responsividad para móviles pequeños
==================== */
@media (max-width: 30rm) {
  main {
    max-width: 95%;
    padding: 0.75rem;
  }

  .grid-container {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* ====================
Transiciones globales para temas y colores
==================== */
html,
body,
main,
#main-navbar,
footer,
.navbar-nav .nav-link {
  transition: background-color 0.6s ease, color 0.6s ease, border-color 0.6s ease;
}

/* Aplica filtro grayscale por defecto y transición suave */
.img-grayscale {
  filter: grayscale(100%);
  transition: filter 0.5s ease, transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

/* Al hacer hover o focus, vuelve a color y añade zoom + sombra */
.img-grayscale:hover,
.img-grayscale:focus {
  filter: grayscale(0%);
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
}

.ancla-fija {
  scroll-margin-top: 4rem; /* o la altura real de tu navbar */
}