/* ============================================================
   TORMECAN — Estilos generales (compartidos por todas las páginas)
   ============================================================ */

* { scroll-behavior: smooth; }

/* Ninguna imagen puede superar el ancho de su contenedor */
img {
  max-width: 100%;
  height: auto;
}

html { font-size: 21px; }
/* En mobile los 21px agrandan todo (texto, logo, paddings en rem) y la página
   queda apretada: volvemos a la base estándar. */
@media (max-width: 767px) {
  html { font-size: 16px; }
}
/* Red de seguridad: nada debe generar scroll horizontal */
html, body { overflow-x: hidden; }

body {
  font-family: 'Barlow', sans-serif;
  background: #fff;
  color: #111;
}

/* Navbar */
#navbar { transition: background 0.3s, box-shadow 0.3s; }
#navbar.scrolled {
  background: #111111 !important;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

/* Navbar compacto al hacer scroll */
#navbar .h-24 { transition: height 0.3s ease; }
#navbar img { transition: height 0.3s ease; }
#navbar.scrolled .h-24 { height: 4rem; }
#navbar.scrolled img { height: 2.25rem; }

/* Menú móvil */
#mobile-menu { display: none; }
#mobile-menu.open { display: block; }
/* Con el menú abierto la barra toma fondo sólido, si no queda flotando sobre la foto */
#navbar:has(#mobile-menu.open) { background: #111111 !important; }

/* Navbar más bajo en mobile: a 6rem tapaba buena parte de los heros internos */
@media (max-width: 767px) {
  #navbar .h-24 { height: 4.5rem; }
  #navbar img { height: 2.75rem; }
  #navbar.scrolled .h-24 { height: 3.5rem; }
  #navbar.scrolled img { height: 2rem; }
  #mobile-menu a { display: block; padding: 0.35rem 0; }
}

/* Descripción de los heros internos: mismo tratamiento que el párrafo del inicio */
.hero-desc {
  font-size: calc(1.125rem + 3px);
  text-shadow: 0 0 2px rgba(0, 0, 0, 1), 0 1px 4px rgba(0, 0, 0, 1), 0 2px 10px rgba(0, 0, 0, 1), 0 6px 24px rgba(0, 0, 0, 0.9);
}

/* Separador rojo */
.red-line {
  width: 60px;
  height: 4px;
  background: #EB1B23;
  display: block;
}

/* Animaciones de entrada */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}
.fade-left {
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-left.visible {
  opacity: 1;
  transform: translateX(0);
}
.fade-right {
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Números de estadísticas */
.stat-number {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  line-height: 1;
  color: #EB1B23;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #EB1B23; border-radius: 3px; }