/* =====================================================
   Gymforce Custom Overrides
   Load this file AFTER app.css / theme CSS
   Version: 2025-08-12
   ===================================================== */

/* ---------- Brand tokens ---------- */
:root {
  --gf-red: #fa7070;
  --gf-red-700: #e55656;
  --gf-navy: #2b2350;
  --gf-navy-700: #1f2b6d;
  --gf-text: #2f2f2f;
  --gf-muted: #70768a;
  --gf-border: rgba(0, 0, 0, 0.08);
}

/* ---------- Typography & base ---------- */
body {
  color: var(--gf-text);
}

a {
  color: var(--gf-navy-700);
}

a:hover {
  color: var(--gf-navy);
}

/* ---------- Hero (banner-two) ---------- */
/* Override the template's blue .text-primary inside the hero only */
.banner-two .title .text-primary {
  color: var(--gf-navy-700) !important;
  /* choose --gf-red if you want red accent */
}

.banner-two .title .gf-accent {
  font-weight: 750;
}

/*
.banner-two .title .gf-accent {
  position: relative;
  font-weight: 750;
  background-image: linear-gradient(to top, rgba(250, 112, 112, .35) 0.28em, rgba(250, 112, 112, 0) 0.28em);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
  */

/* Fine-tune hero subtitle */
.banner-two .banner-content>p {
  color: var(--gf-muted);
  line-height: 1.55;
  margin-bottom: 1rem;
}

/* Make hero image always respect column width */
.banner-two .animate-promo-mockup img {
  width: 100%;
  height: auto;
  display: block;
}

/* ---------- Buttons ---------- */
.pix-btn.btn-brand,
.pxs-btn.btn-brand {
  background-color: var(--gf-red);
  border-color: var(--gf-red);
  color: #fff;
  box-shadow: 0 10px 18px rgba(250, 112, 112, 0.18);
}

.pix-btn.btn-brand:hover,
.pxs-btn.btn-brand:hover {
  background-color: var(--gf-red-700);
  border-color: var(--gf-red-700);
  color: #fff;
}

.pix-btn.btn-outline-brand,
.pxs-btn.btn-outline-brand {
  background: #fff;
  border: 2px solid var(--gf-red);
  color: var(--gf-red);
  box-shadow: none;
}

.pix-btn.btn-outline-brand:hover,
.pxs-btn.btn-outline-brand:hover {
  background: var(--gf-red);
  color: #fff;
}

/* If the template has a generic .btn-outline-two conflicting, win the cascade */
.btn-outline-two.btn-outline-brand {
  border-color: var(--gf-red) !important;
  color: var(--gf-red) !important;
}

.btn-outline-two.btn-outline-brand:hover {
  background: var(--gf-red) !important;
  color: #fff !important;
}

/* ---------- Brand logos row ---------- */
.brand-logos img {
  max-height: 40px;
  opacity: .75;
  filter: grayscale(100%);
  transition: opacity .2s ease, filter .2s ease;
}

.brand-logos img:hover {
  opacity: 1;
  filter: grayscale(0%);
}

/* ---------- Utilities ---------- */
.text-brand {
  color: var(--gf-red) !important;
}

.text-brand-navy {
  color: var(--gf-navy-700) !important;
}

.bg-brand {
  background-color: var(--gf-red) !important;
}

.border-brand {
  border-color: var(--gf-red) !important;
}

/* Reduce weird spacing if any inline styles slipped in from WOW.js */
.wow[style*="visibility"] {
  visibility: visible !important;
}


.hero-points {
  list-style: none;
  padding: 0;
  margin: .5rem 0 1.25rem;
  display: grid;
  gap: .25rem;
  /* orden vertical compacto */
  width: min(100%, 64ch);
  /* llena la columna pero no pasa de 64ch */
  color: var(--gf-muted);
  line-height: 1.55;
  font-size: clamp(15px, 1vw, 17px);
}

.hero-points li {
  display: flex;
  align-items: center;
}

.hero-points i {
  color: var(--gf-red);
  margin-right: .5rem;
}