/* ===========================
   RESETEO BÁSICO
=========================== */
html, body {
  overflow-x: hidden !important;
}

body {
  font-family: 'Poppins', sans-serif;
  background: var(--fondo);
  scroll-behavior: smooth;
}

main { 
  flex: 1 0 auto; 
}

/* ===========================
   VARIABLES DE COLOR
=========================== */
:root {
  --azul-oscuro: #012B57;
  --azul: #004AAD;
  --dorado: #F4B400;
  --fondo: #F8FAFC;
}

/* ===========================
   NAVBAR GENERAL
=========================== */
.navbar {
  background: linear-gradient(90deg, var(--azul-oscuro), var(--azul));
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* Evita desbordes horizontales */
.navbar-collapse {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* Asegura que el contenedor interno no rompa el layout */
.navbar .container,
.navbar .container-fluid {
  flex-wrap: nowrap;
  max-width: 100% !important;
  overflow-x: hidden;
}

/* Marca y botón del menú */
.navbar-brand,
.navbar-toggler {
  flex-shrink: 0;
}

.navbar-brand {
  min-width: 0; /* por si el texto es largo */
}

.navbar-brand span {
  color: var(--dorado);
  font-weight: 700;
}

.navbar-toggler {
  margin-right: 0 !important;
  padding-right: 0 !important;
}

/* El menú colapsado puede ocupar todo el ancho */
#menuPublico {
  flex-basis: 100%;
}

/* Ítems del menú */
.navbar-nav {
  flex-wrap: wrap;
  margin-right: 0 !important;
  padding-right: 0 !important;
  justify-content: flex-start;
}

/* Botones del navbar */
.navbar .btn {
  white-space: nowrap;
}

.navbar .btn-outline-light:hover {
  background-color: #F4B400 !important;
  color: #012B57 !important;
  box-shadow: 0 0 10px rgba(244, 180, 0, 0.6);
  transition: all 0.3s ease;
}

/* ===========================
   SECCIONES Y CONTENEDORES
=========================== */
section {
  scroll-margin-top: 80px;
}

section, .container-fluid, .row {
  max-width: 100%;
  overflow-x: hidden;
}

/* ===========================
   ELEMENTOS GENERALES
=========================== */
.btn-gold {
  background: var(--dorado);
  color: var(--azul-oscuro);
  font-weight: 600;
  border: none;
}

.btn-gold:hover {
  background: #FFD633;
  color: #002b5c;
}

.btn-warning {
  color: #000;
  font-weight: 600;
}

footer {
  background: var(--azul-oscuro);
  color: #fff;
}

/* ===========================
   SECCIÓN HERO / BANNER
=========================== */
#hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  text-align: center;
  color: #fff;
  background: linear-gradient(90deg, rgba(1,43,87,.92), rgba(0,74,173,.82)),
              url('/assets/img/banner.jpg') center/cover no-repeat;
}

#hero h1 span {
  color: var(--dorado);
}

/* Imagenes en la marca del navbar */
.navbar-brand img {
  filter: drop-shadow(0 0 5px #000);
}

/* ===========================
   TARJETAS Y OTROS COMPONENTES
=========================== */
.card.lift {
  transition: transform 0.25s, box-shadow 0.25s;
}

.card.lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 1rem 2rem rgba(0,0,0,.12);
}

.section-title {
  color: var(--azul-oscuro);
}

.badge-soft {
  background: rgba(244,180,0,.15);
  color: #916f00;
}

/* ===========================
   AJUSTES FINALES
=========================== */
#inicio {
  background: url('../img/banner.jpg') center/cover no-repeat;
}

/* BOTONES DE ACCESO Y REGISTRO */
.btn-acceso {
  border: 2px solid #F4B400 !important;
  color: #F4B400 !important;
  background: transparent !important;
  font-weight: 600;
  border-radius: 50px;
  padding: 6px 18px;
  transition: all 0.3s ease;
}

.btn-acceso:hover {
  background: #F4B400 !important;
  color: #0B1B3B !important;
  box-shadow: 0 0 10px rgba(244,180,0,0.4);
}

.btn-registro {
  background: #F4B400 !important;
  color: #0B1B3B !important;
  font-weight: 600;
  border-radius: 50px;
  padding: 6px 18px;
  border: none;
  transition: all 0.3s ease;
}

.btn-registro:hover {
  background: #ffcb28 !important;
  box-shadow: 0 0 10px rgba(244,180,0,0.4);
}