/* Estilos básicos para FITNESS SUPPORT */
body {
  font-family: Arial, Helvetica, sans-serif;
  background: #f7f9fb;
  color: #222;
}
.navbar-brand {
  font-weight: 700;
  letter-spacing: 1px;
}
.header-bar {
  /* Preview: cambiar la cabecera a fondo negro */
  background: #000;
  color: #fff;
  padding: 18px 0;
}

/* Patrón repetido de logos detrás del contenido de la cabecera */
.header-bar {
  position: relative;
  overflow: hidden;
}
.header-bar::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  /* Ruta relativa al CSS: assets/css/ -> ../imagenes/logofs.jpg */
  background-image: url('../imagenes/logofs.jpg');
  background-repeat: repeat-x;
  background-position: center center;
  /* Ajusta la altura del logo repetido: usar 40-60px según diseño */
  background-size: auto 48px;
  /* Mostrar los logos repetidos un poco opacos (visible pero no compiten con texto/logo) */
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}

/* Asegurar que el contenido de la cabecera quede encima del patrón */
.header-bar .container { position: relative; z-index: 1; }
.company-name {
  font-size: 1.25rem;
  font-weight: 700;
}

/* Logo en la cabecera */
.company-logo {
  height: 48px;
  width: auto;
  margin-right: 12px;
  object-fit: contain;
}
.company-name {
  margin: 0;
}
/* Navbar personalizada: fondo negro y texto blanco */
.navbar-custom {
  background-color: #000 !important;
}
.navbar-custom .navbar-brand,
.navbar-custom .nav-link,
.navbar-custom .navbar-toggler-icon {
  color: #fff !important;
}
.navbar-custom .nav-link {
  opacity: 1;
}
.navbar-custom .form-control {
  background: rgba(255,255,255,0.04);
  /* Borde amarillo igual que la cabecera */
  border-color: #d4a200;
  color: #fff;
}
.navbar-custom .form-control::placeholder { color: rgba(255,255,255,0.7); }
.navbar-custom .form-control:focus {
  border-color: #d4a200;
  box-shadow: 0 0 0 0.2rem rgba(212,162,0,0.15);
}
/* Botón de búsqueda: amarillo igual que la barra superior */
.navbar-custom .btn-outline-primary {
  color: #000;
  background-color: #d4a200;
  border-color: #d4a200;
}
.navbar-custom .btn-outline-primary:hover {
  background-color: #f1c40f; /* aclarar ligeramente al pasar */
  border-color: #f1c40f;
}
.navbar-custom .navbar-brand { font-weight:700; }
.card-product {
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 8px;
}
.footer {
  margin-top: 40px;
  padding: 20px 0;
  text-align: center;
  color: #6c757d;
}
@media (max-width: 576px) {
  .company-name { font-size: 1rem; }
}

/* Hero / portada */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  /* Full-bleed: ocupar todo el ancho de la ventana, incluso si está dentro de un contenedor */
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  /* Altura: ocupar el espacio restante de la pantalla descontando cabecera y navbar (~120px) */
  min-height: calc(100vh - 120px);
  background-image: url('../imagenes/portadaweb_fs.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.hero .hero-overlay {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0,0,0,0.35); /* overlay para legibilidad */
}
.hero .hero-content {
  position: relative;
  z-index: 1;
  color: #fff;
  padding: 48px 0;
}
.hero h1 {
  color: #fff;
  font-size: 2rem;
  font-weight: 700;
}
.hero p.lead {
  color: rgba(255,255,255,0.92);
}
.hero .btn-hero {
  background: #d4a200; /* mismo amarillo de la cabecera */
  color: #000;
  border-radius: 6px;
  padding: 10px 18px;
  border: 1px solid #d4a200;
}
.hero .btn-hero:hover {
  background: #f1c40f;
  border-color: #f1c40f;
}

/* Card resaltadas (Servicios, Contacto rápido) */
.card-highlight {
  border: 2px solid #d4a200;
}

/* Nav: enlace activo en amarillo */
.navbar-custom .nav-link.active {
  color: #d4a200 !important;
  font-weight: 700;
  box-shadow: inset 0 -3px 0 0 #d4a200;
}
.navbar-custom .nav-link:hover {
  color: #f1c40f !important;
}

@media (min-width: 992px) {
  .hero h1 { font-size: 2.6rem; }
}