/* =========================================
   1. Variables & Settings
   ========================================= */
:root {
  --primary-color: #ff3643;
  --primary-hover: #cf082b;
  --secondary-color: #0b2957;
  --text-dark: #000;
  --text-light: #fff;
  --btn-radius: 1.5rem;
  --transition-speed: 0.3s;
}

/* =========================================
   2. Resets & Utilities
   ========================================= */
   
/* Basic Responsive Optimization */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

.brand-logo {
  max-width: 200px;
}

.img-fluid {
  width: 100%;
}

.noPadding {
  padding: 0 !important; /* Kept for utility strictness, but used sparingly */
}

/* Bootstrap Row Overrides - Scoped to avoid global conflicts if possible */
.row.no-gutters {
  margin-right: 0;
  margin-left: 0;
}

.row.no-gutters > [class^="col-"],
.row.no-gutters > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}

/* Container Fixes */
.container-fluid {
  overflow-x: hidden;
  max-width: 100%;
}

.noPadding {
  padding: 0 !important;
  overflow-x: hidden;
}

/* Form container max-width */
section .col-12 {
  max-width: 100%;
  overflow-x: hidden;
}

/* =========================================
   3. Background Styles
   ========================================= */
body {
  background-image: url('https://image.republicarojiblanca.fxp.mx/lib/fe26117473640578701c77/m/1/db8a8171-accc-44b0-810e-cb095ca238cf.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  min-height: 100vh;
}

/* Header Background */
header {
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: transparent;
  padding: 0;
  min-height: 120px;
}

/* Header background div */
.header-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://image.republicarojiblanca.fxp.mx/lib/fe26117473640578701c77/m/1/16dc61a5-79b6-4d6f-bba6-1b3569660a50.png');
  background-size: cover;
  background-position: bottom center;
  background-repeat: no-repeat;
  z-index: -1;
}

/* Footer Background */
footer {
  position: relative;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: transparent;
  padding: 1rem 0;
  min-height: 150px;
}

/* Footer background div */
.footer-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://image.republicarojiblanca.fxp.mx/lib/fe26117473640578701c77/m/1/c87b636b-7b93-40a8-8d28-603f42db05f0.png');
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  z-index: -1;
}

/* =========================================
   4. Color & Background Utilities
   ========================================= */

/* Text Colors */
.color-1 { color: var(--primary-color); }
.color-2 { color: var(--secondary-color); }
.color-dark { color: var(--text-dark); }
.color-light { color: var(--text-light); }

/* Background Colors */
.bg-1 { background-color: var(--primary-color); }
.bg-2 { background-color: var(--secondary-color); }
.bg-dark { background-color: var(--text-dark); }
.bg-light { background-color: var(--text-light); }

/* Hover States */
.color-primary:hover { color: var(--primary-hover); }
.bg-primary:hover { background-color: var(--primary-hover); }

/* =========================================
   5. Typography
   ========================================= */
body, input, textarea, select {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-style: normal;
  /* font-display is for @font-face, removing invalid property here */
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Anton', sans-serif;
  margin-bottom: 0.5em;
}

/* Fluid Typography using Clamp */
.display_ {
  font-size: clamp(2rem, 0.5938rem + 4.5vw, 3.125rem);;
}

h1 { font-size: clamp(1.75rem, 0.6563rem + 3.5vw, 2.625rem); }
h2 { font-size: clamp(1.5rem, 1.0313rem + 1.5vw, 1.875rem); }
h3 { font-size: clamp(1.1875rem, 0.7969rem + 1.25vw, 1.5rem); }
p, li { font-size: clamp(1rem, 0.8438rem + 0.5vw, 1.125rem) !important;}
label { font-size: clamp(0.9rem, 0.775rem + 0.4vw, 1rem); font-weight: 500; }

.smallTxt {
  font-size: 0.75rem;
  text-align: center;
}

/* Mobile Typography */
@media (max-width: 768px) {
  h1 { font-size: clamp(1.352rem, 1.206rem + 0.728vw, 2.08rem); }
}

/* =========================================
   6. Links & Buttons
   ========================================= */
a {
  color: var(--primary-color);
  text-decoration: underline;
  transition: color var(--transition-speed);
}

a:hover,
a:active,
a:focus {
  color: var(--primary-hover);
}

.btn {
  font-style: normal;
  font-weight: 400;
  font-size: 1rem;
  padding: 0.5em 1em;
  border-radius: var(--btn-radius);
  background-color: var(--primary-color);
  border: 1px solid var(--primary-color);
  color: var(--text-light);
  max-width: 200px;
  width: 100%;
  transition: all var(--transition-speed) ease;
  display: inline-block;
  text-align: center;
  text-decoration: none;
}

.btn:hover {
  background-color: var(--primary-hover);
  border-color: var(--primary-hover);
  color: var(--text-light);
  max-width: 210px;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}