/* ==========================================================================
   FitMe 3070 — Bootstrap 5 Override Stylesheet
   Base: Bootstrap 5.3.3 (vendor/bootstrap5/)
   Palette: Neon Moss (#C2D500) accent over a Void Black (#0B0B0D) → Charcoal
            Slate (#3D403E) dark ramp, with Ash Silver (#B8B9BE) + Arctic White
            (#F7F8FA) for light/secondary. Treat the green as a spotlight (~10%).
   ========================================================================== */

/* Roboto, self-hosted (variable font, latin subset) — no Google Fonts request. */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/roboto/roboto-latin.woff2') format('woff2');
}

/* ── Design Tokens ─────────────────────────────────────────────────────────────
   Brand palette — "Neon Moss" on a Void-Black → Charcoal-Slate dark ramp, with
   an Ash-Silver / Arctic-White light toolkit. Darks carry a cool, greenish-
   neutral undertone so they sit flush with the vibrant green. */
:root {
  /* The Hero — Neon Moss. Spotlight only (≈10%): CTAs, active states, accents. */
  --fitme-accent: #C2D500;
  --fitme-accent-rgb: 194, 213, 0;
  --fitme-accent-dark: #A6B600;
  /* Text-on-light variant: #C2D500/#A6B600 are only ~1.6–2.1:1 on white/surface
     (WCAG AA needs 4.5:1), so text uses this darker olive. Bright accent stays
     for dark sections and button backgrounds. */
  --fitme-accent-ink: #667000;
  /* readable text colour on top of --fitme-accent (a gym's brand colour may be dark) */
  --fitme-on-accent: #0B0B0D;
  /* deeper moss for hover / active */

  /* The Anchor — Void Black, and a cool ramp lifting toward Charcoal Slate. */
  --fitme-dark: #0B0B0D;
  /* Void Black — primary dark canvas */
  --fitme-dark-2: #16181A;
  /* lifted void (sections / overlays) */
  --fitme-dark-3: #26292A;
  /* structural dark (frames, pills) */
  --fitme-mid: #3D403E;
  /* Charcoal Slate — cards / structure */
  --fitme-slate: #3D403E;
  /* Charcoal Slate (alias) */
  --fitme-dark-rgb: 11, 11, 13;

  /* Ash Silver — secondary text, borders, inactive UI on dark backgrounds. */
  --fitme-ash: #B8B9BE;
  --fitme-ash-rgb: 184, 185, 190;

  /* Arctic White light toolkit (cool, crisp). */
  --fitme-white: #ffffff;
  --fitme-surface: #F7F8FA;
  /* Arctic White — light section canvas */
  --fitme-surface-2: #ECEEF2;
  --fitme-surface-dark: #DDE0E6;

  /* Text on light surfaces. */
  --fitme-text: #0B0B0D;
  /* Void Black */
  --fitme-text-soft: #3D403E;
  /* Charcoal Slate */
  --fitme-text-muted: #6B6E73;
  /* readable muted gray */

  --fitme-nav-bg: rgba(247, 248, 250, 0.68);
  --fitme-shadow: 0 2px 20px rgba(11, 11, 13, .07);
  --fitme-shadow-lg: 0 8px 40px rgba(11, 11, 13, .13);
  --fitme-radius: 2px;
  --fitme-transition: 0.15s ease;
}

/* ── Bootstrap 4 Overrides ─────────────────────────────────────────────────── */

/* Make Bootstrap rows use our gutters */
.row {
  margin-left: 0;
  margin-right: 0;
}

.container>.row {
  margin-left: -0.75rem;
  margin-right: -0.75rem;
}

/* Remove default outlines, use our focus ring */
input:focus,
select:focus,
button:focus,
textarea:focus {
  outline: none;
}

a:hover,
a:focus {
  text-decoration: none;
  outline: none;
}

ul,
ol {
  padding: 0;
  margin: 0;
}

img {
  max-width: 100%;
}

/* ── Skip to content (accessibility) ───────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: 8px;
  left: 16px;
  z-index: 9999;
  background: var(--fitme-accent);
  color: var(--fitme-dark);
  padding: 12px 20px;
  border-radius: var(--fitme-radius);
  font-weight: 700;
  font-size: .9rem;
  text-decoration: none;
  transform: translateY(-108px);
  transition: transform .2s;
}

.skip-link:focus {
  transform: translateY(0);
}

/* ── Focus ring (accessibility) ────────────────────────────────────────────── */
:focus-visible {
  outline: 3px solid var(--fitme-accent) !important;
  outline-offset: 2px;
}

/* Reset for elements with their own focus styles */
.site-btn:focus-visible,
.cta-btn:focus-visible {
  outline-color: var(--fitme-dark) !important;
}

/* ── Touch target minimum (WCAG 2.5.5) ─────────────────────────────────────── */
@media (pointer: coarse) {

  .nav-link,
  .footer-menu li a,
  .contact-info-warp a,
  .footer-widget a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ── Base & Typography ─────────────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Roboto', 'PT Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--fitme-text);
  background: var(--fitme-white);
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 .5em;
  color: var(--fitme-text);
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: -.02em;
}

h1 {
  font-size: 4.375rem;
}

/* 70px */
h2 {
  font-size: 2.25rem;
}

/* 36px */
h3 {
  font-size: 1.875rem;
}

/* 30px */
h4 {
  font-size: 1.5rem;
}

/* 24px */
h5 {
  font-size: 1.125rem;
}

/* 18px */
h6 {
  font-size: 1rem;
}

p {
  font-size: 1rem;
  color: var(--fitme-text-soft);
  line-height: 1.8;
  margin-bottom: 1rem;
}

/* ── Utility Classes ───────────────────────────────────────────────────────── */
.float_right {
  float: right;
}

.section-title {
  margin-bottom: 1.5rem;
}

.section-title h2 {
  /* Fluid: replaces 3 step values (2rem @768-991, 1.6rem @<=767, 1.4rem @<=479)
     with one clamp anchored at 768px (2rem) -> 992px (2.5rem, the old desktop
     value), audit 4.5. */
  font-size: clamp(1.4rem, calc(.2857rem + 3.5714vw), 2.5rem);
  line-height: 1.2;
  margin-bottom: .5rem;
}

.section-title h2 span {
  color: var(--fitme-accent);
}

.section-title p {
  color: var(--fitme-text-muted);
}

.set-bg {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4,
.text-white h5,
.text-white h6,
.text-white p,
.text-white span,
.text-white li,
.text-white a {
  color: #fff;
}

/* Section anchor offset for sticky nav */
section[id] {
  scroll-margin-top: 72px;
}

/* ── Fade-in animation (used by preloader + hero) ──────────────────────────── */
.fade-in {
  animation: fitmeFadeIn .8s ease forwards;
  opacity: 0;
}

/* Reveal on scroll (IntersectionObserver) */
.revealed {
  animation: fitmeReveal .6s ease forwards;
  opacity: 0;
}

@keyframes fitmeFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fitmeReveal {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.site-btn {
  position: relative;
  z-index: 0;
  text-decoration: none;   /* Bootstrap underlines every <a>; buttons never */
  display: inline-block;
  border: none;
  font-size: 1rem;
  font-weight: 700;
  min-width: 200px;
  padding: 16px 36px;
  background: var(--fitme-accent);
  color: var(--fitme-on-accent);
  text-align: center;
  cursor: pointer;
  border-radius: var(--fitme-radius);
  transition: background var(--fitme-transition), transform var(--fitme-transition);
  text-transform: uppercase;
  letter-spacing: .5px;
}

.site-btn:hover {
  background: var(--fitme-accent-dark);
  color: var(--fitme-on-accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(var(--fitme-accent-rgb), .35);
}

.site-btn.sb-dark {
  background: var(--fitme-dark-2);
  color: var(--fitme-accent);
}

.site-btn.sb-dark:hover {
  background: var(--fitme-dark-3);
}

.site-btn.sb-line {
  background: transparent;
  border: 2px solid var(--fitme-dark-2);
  color: var(--fitme-dark-2);
  padding: 14px 36px;
}

.site-btn.sb-line:hover {
  background: var(--fitme-dark-2);
  color: var(--fitme-accent);
}

/* ── Bootstrap Nav Overrides ───────────────────────────────────────────────── */
.nav-link {
  font-weight: 700;
  color: var(--fitme-text);
  margin: 0 .6rem !important;
  transition: color var(--fitme-transition);
  position: relative;
}

.nav-link:after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--fitme-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--fitme-transition);
}

.nav-link:hover:after,
.nav-item.active .nav-link:after {
  transform: scaleX(1);
}

.nav-link:hover,
.nav-item.active .nav-link {
  color: var(--fitme-dark);
  background: transparent !important;
}

/* ── CrossFit nav pill (follows the gym's brand colour) ─────────────────────────────────────────────────────── */
.crossfit-nav-link {
  color: var(--fitme-accent-ink) !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  border: 2px solid var(--fitme-accent-ink);
  border-radius: var(--fitme-radius);
  padding: 6px 14px !important;
  transition: background-color var(--fitme-transition), color var(--fitme-transition);
}

.crossfit-nav-link:after {
  display: none;
}

/* Hover and current-page state: filled pill, white text (must outrank the
   generic .nav-item.active .nav-link transparent-background rule above) */
.crossfit-nav-link:hover,
.nav-item.active .crossfit-nav-link {
  background: var(--fitme-accent) !important;
  border-color: var(--fitme-accent);
  color: var(--fitme-on-accent) !important;
}

/* ── Other-gym button (right end of the navbar) ────────────────────────────── */
.gym-switch-btn {
  position: relative;
  z-index: 0;
  display: inline-block;
  background: var(--fitme-accent);
  color: var(--fitme-on-accent);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  text-decoration: none;
  white-space: nowrap;
  border: 2px solid var(--fitme-accent);
  border-radius: var(--fitme-radius);
  padding: 6px 16px;
  transition: background-color var(--fitme-transition), color var(--fitme-transition);
}

.gym-switch-btn { display: inline-flex; align-items: center; gap: .5rem; }

/* The logo is a mask filled with the text colour, so any single-colour logo
   follows the button (brand colour, hover state, light or dark brand). */
.gym-switch-logo {
  height: 1.4em;
  aspect-ratio: 1;
  background-color: currentColor;
  -webkit-mask: var(--logo) center / contain no-repeat;
  mask: var(--logo) center / contain no-repeat;
}

/* ── Button hover: the same spinning edge as the Mensalidades cards ───────────
   Reuses their registered --pc-a angle + pc-spin keyframes. On hover the face
   turns near-black (10% brand colour) with WHITE text, lifts a few px, and a
   conic brand-colour edge sweeps round it with a soft blurred glow behind.
   ::before = the face + 2px edge, ::after = the glow. --elb is the element's own
   border (sb-line / sb-ghost), so the ring always sits outside it. */
:is(.site-btn, .gym-switch-btn) {
  --btn-face: color-mix(in srgb, var(--fitme-accent) 10%, #000);
  --elb: 0px;
  --ring: 2px;
}
.site-btn.sb-line, .site-btn.sb-ghost { --elb: 2px; }

/* Slower, softer lift (the face colour fades with it). */
.site-btn.site-btn,
.gym-switch-btn {
  transition: transform .5s cubic-bezier(.22, .8, .3, 1), background-color .4s ease, color .4s ease, border-color .4s ease;
}

.site-btn::before, .site-btn::after,
.gym-switch-btn::before, .gym-switch-btn::after {
  content: '';
  position: absolute;
  pointer-events: none;
  border-radius: calc(var(--fitme-radius) + var(--ring) + var(--elb));
  opacity: 0;
  transition: opacity .45s ease;
}
.site-btn::before, .gym-switch-btn::before {
  inset: calc(-1 * (var(--ring) + var(--elb)));
  z-index: -1;
  border: var(--ring) solid transparent;
  background:
    linear-gradient(var(--btn-face), var(--btn-face)) padding-box,
    conic-gradient(from var(--pc-a), rgba(var(--fitme-accent-rgb), 0) 0deg, rgba(var(--fitme-accent-rgb), 0) 150deg,
        var(--fitme-accent) 250deg, #f4ff9c 300deg, var(--fitme-accent) 330deg,
        rgba(var(--fitme-accent-rgb), 0) 360deg) border-box;
}
.site-btn::after, .gym-switch-btn::after {
  inset: calc(-1 * (var(--ring) + var(--elb)) - 2px);
  z-index: -2;
  background: conic-gradient(from var(--pc-a), rgba(var(--fitme-accent-rgb), 0) 0deg, rgba(var(--fitme-accent-rgb), 0) 150deg,
      var(--fitme-accent) 250deg, #f4ff9c 300deg, var(--fitme-accent) 330deg,
      rgba(var(--fitme-accent-rgb), 0) 360deg);
  filter: blur(10px);
}

.site-btn.site-btn:is(:hover, :focus-visible),
.gym-switch-btn:is(:hover, :focus-visible) {
  background: var(--btn-face);
  border-color: transparent;
  color: #fff;
  transform: translateY(-3px);
  box-shadow: none;
}
.site-btn:is(:hover, :focus-visible)::before,
.gym-switch-btn:is(:hover, :focus-visible)::before { opacity: 1; animation: pc-spin 3.2s linear infinite; }
.site-btn:is(:hover, :focus-visible)::after,
.gym-switch-btn:is(:hover, :focus-visible)::after { opacity: .75; animation: pc-spin 3.2s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  .site-btn:is(:hover, :focus-visible)::before, .site-btn:is(:hover, :focus-visible)::after,
  .gym-switch-btn:is(:hover, :focus-visible)::before, .gym-switch-btn:is(:hover, :focus-visible)::after { animation: none; }
}

/* ── Sticky Navbar ─────────────────────────────────────────────────────────── */
.navbar-toggler {
  min-width: 44px;
  min-height: 44px;
}

.header-section {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  background: var(--fitme-nav-bg);
  border-bottom: 1px solid rgba(0, 0, 0, .04);
}

.site-logo {
  max-width: 150px;
  padding: 12px 0;
}

.header-right {
  float: right;
  padding: 0 !important;
  width: auto;
}

.header-right .hr-box {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: 0 1.2rem;
  height: 10vh;
  background: rgba(var(--fitme-accent-rgb), .12);
  color: var(--fitme-text);
  font-size: .85rem;
  border-radius: 0;
  transition: background var(--fitme-transition);
}

.header-right .hr-box:hover {
  background: rgba(var(--fitme-accent-rgb), .22);
}

.header-right .hr-box .icon {
  font-size: 1.5rem;
  color: var(--fitme-accent);
}

.header-right .hr-box h6 {
  margin: 0;
  font-size: .8rem;
  font-weight: 700;
  color: var(--fitme-text);
  overflow: hidden;
}

.header-right a {
  color: var(--fitme-text);
}

/* ── Hero ──────────────────────────────────────────────────────────────────── */
.hero-section {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: var(--fitme-dark);
  overflow: hidden;
}

/* Depth gradient — darkens top for nav readability, lifts mid-section */
.hero-section:before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(0, 0, 0, 0.65) 0%,
      rgba(0, 0, 0, 0.40) 25%,
      rgba(0, 0, 0, 0.15) 50%,
      rgba(0, 0, 0, 0.30) 75%,
      rgba(0, 0, 0, 0.55) 100%);
}

/* Neon-Moss grounding accent at the base of the hero. One clean diagonal edge
   (no jagged peak) echoes the brand's straight-line language; the colour fades
   upward and stays low-opacity so the green reads as a spotlight, not a wash. */
.hero-section:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 72%;
  z-index: 1;
  pointer-events: none;
  background:
    /* soft glow grounding the base, slightly left of centre */
    radial-gradient(62% 62% at 30% 104%, rgba(var(--fitme-accent-rgb), 0.22) 0%, transparent 70%),
    /* gentle upward fade so only the lower hero is tinted */
    linear-gradient(180deg, transparent 46%, rgba(var(--fitme-accent-rgb), 0.13) 100%);
  /* single straight diagonal top edge, rising to the right */
  clip-path: polygon(0 28%, 100% 0, 100% 100%, 0 100%);
}

.hero-section .container {
  z-index: 2;
}

.hero-text {
  padding-top: 60px;
}

.hero-text h1 {
  /* Fluid: replaces 4 step values (3.2rem @992-1199, 2.7rem @768-991,
     2.1rem @<=767, 1.75rem @<=479) with one clamp anchored at 768px (2.7rem)
     -> 1200px (3.8rem, the old desktop value), audit 4.5. */
  font-size: clamp(1.75rem, calc(.7444rem + 4.0741vw), 3.8rem);
  font-weight: 900;
  color: #fff;
  text-shadow: 0 2px 40px rgba(0, 0, 0, .5);
  line-height: 1.05;
  letter-spacing: -.5px;
}

.hero-text h1 span {
  color: var(--fitme-accent);
}

.hero-brand {
  display: inline-block;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--fitme-accent);
  margin-bottom: 1rem;
  padding-left: .35em;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .5);
}

.hero-text .site-btn {
  margin-top: 2.5rem;
}

.hero-text .hero-tagline {
  color: #fff;
  font-size: 1.3rem;
  font-weight: 500;
  max-width: 600px;
  margin: 1.25rem auto 0;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .6);
}

.hero-cta-row {
  display: flex;
  flex-direction: column;   /* the button, then the trial link as plain text under it */
  align-items: center;
  gap: 14px;
  margin-top: 2.5rem;
}

/* "Marca uma aula experimental": text only, under the main button. */
.hero-text-link {
  background: none;
  border: 0;
  padding: 4px 8px;
  color: #fff;
  font: inherit;
  font-weight: 600;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
  cursor: pointer;
  transition: color .3s ease;
}
.hero-text-link:hover,
.hero-text-link:focus-visible {
  color: var(--fitme-accent);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.hero-cta-row .site-btn {
  margin-top: 0;
}

.site-btn.sb-ghost {
  background: transparent;
  border: 2px solid #fff;
  color: #fff;
  padding: 14px 36px;
}

/* .sb-ghost hover: handled by the shared button hover above (dark face, white text, spinning edge) */

/* ── CSS performance: skip rendering off-screen sections ──────────────────── */
.trainers-section,
.service-section,
.schedule-section,
.workhours-section,
.map-section,
.classes-section {
  content-visibility: auto;
  contain-intrinsic-size: 500px;
}

/* ── Section backgrounds (alternating) ─────────────────────────────────────── */
.feature-section {
  background: var(--fitme-white);
}

/* Team backdrop: the warm grey of the gym's block wall in the header photo
   (sampled ≈ rgb(70,66,62)), a touch darker so white names still pop. On top,
   very faint mortar joints in running bond (120×60 blocks, alternate rows
   offset by half a block) plus a fine concrete grain, both as inline SVG
   tiles, and a soft shade at the top and bottom edges. */
.trainers-section {
  position: relative;
  background-color: #403d3a;
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, .28) 0%, transparent 18%, transparent 82%, rgba(0, 0, 0, .28) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='120'%3E%3Cpath d='M0 1H240M0 61H240M1 0V60M121 0V60M61 60V120M181 60V120' fill='none' stroke='rgba(0,0,0,0.09)' stroke-width='1.5'/%3E%3Cpath d='M0 3.5H240M0 63.5H240' fill='none' stroke='rgba(255,255,255,0.022)' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 100% 100%, 200px 200px, 240px 120px;
}

.trainers-section:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--fitme-accent), transparent);
  opacity: .35;
}

.service-section {
  background: var(--fitme-white);
}

.schedule-section {
  background: var(--fitme-surface);
  position: relative;
}

.schedule-section:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--fitme-accent), transparent);
  opacity: .35;
}

.contact-section {
  background: var(--fitme-dark-2);
}

/* Horário de Funcionamento, nested inside Informações e contactos (not its
   own section) — plain text lines, centered, matching the "less graphics"
   direction the rest of that column took once the icons came out. */
.wh-text p {
  margin: 0 0 8px;
  color: rgba(255, 255, 255, .7);
}

.wh-text p:last-child {
  margin-bottom: 0;
}

.wh-text strong {
  color: var(--fitme-accent);
  font-weight: 700;
}

.wh-text .wh-closed {
  color: rgba(255, 255, 255, .45);
}

.map-section {
  background: var(--fitme-surface);
  position: relative;
}

.map-section:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--fitme-accent), transparent);
  opacity: .35;
}

/* ── Center orphans in flex grids ──────────────────────────────────────────── */
.row.auto-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.row.auto-grid>[class*="col-"] {
  flex: 0 0 auto;
}

.row.auto-grid>.col-6 {
  width: calc(50% - .75rem);
}

@media (min-width: 768px) {
  .row.auto-grid>.col-md-4 {
    width: calc(33.333% - 1rem);
  }
}

@media (min-width: 992px) {
  .row.auto-grid>.col-lg-3 {
    width: calc(25% - 1rem);
  }
}

/* ── Feature / Offer section ───────────────────────────────────────────────── */
.feature-section {
  padding: 100px 0 60px;
}

.icon-box-item {
  text-align: center;
  margin-bottom: 3rem;
}

.icon-box-item .ib-icon {
  width: 72px;
  height: 72px;
  border-radius: var(--fitme-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fitme-surface);
  margin: 0 auto 1.5rem;
  font-size: 2.5rem;
  color: var(--fitme-accent);
  transition: background-color var(--fitme-transition), transform var(--fitme-transition);
}

.icon-box-item .ib-icon img {
  max-width: 44px;
  max-height: 44px;
  mix-blend-mode: multiply;
}

.icon-box-item h3,
.icon-box-item h4 {
  margin-bottom: .75rem;
  /* Fluid: replaces the .95rem @<=479px step with one clamp anchored at
     479px (.95rem) -> 768px (1.15rem, the old desktop value), audit 4.5. */
  font-size: clamp(.95rem, calc(.6185rem + 1.1073vw), 1.15rem);
}

.icon-box-item p {
  font-size: .9rem;
  color: var(--fitme-text-muted);
}

.icon-box-item:hover .ib-icon {
  background: var(--fitme-accent);
  transform: scale(1.06);
}

.icon-box-item {
  transition: transform var(--fitme-transition);
}

.icon-box-item:hover {
  transform: translateY(-3px);
}

.icon-box-item .ib-icon img {
  transition: filter var(--fitme-transition);
}

.icon-box-item:hover .ib-icon img {
  filter: brightness(0) invert(0);
  /* darken icon on accent bg */
}

/* Icon boxes (Modalidades, offer): same hover as the buttons — dark face, white
   icon, spinning brand-colour edge (a 2px ring cut out of ::after with a mask)
   and a soft glow. The official YOURFIT PNGs keep their own colours on a white
   face instead of being turned into silhouettes. */
.icon-box-item .ib-icon {
  position: relative;
  z-index: 0;
  transition: background-color .4s ease, color .4s ease, transform .5s cubic-bezier(.22, .8, .3, 1), box-shadow .4s ease;
}
.icon-box-item .ib-icon::after {
  content: '';
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: inherit;
  background: conic-gradient(from var(--pc-a), rgba(var(--fitme-accent-rgb), .35) 0deg, rgba(var(--fitme-accent-rgb), .35) 150deg,
      var(--fitme-accent) 250deg, #f4ff9c 300deg, var(--fitme-accent) 330deg,
      rgba(var(--fitme-accent-rgb), .35) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
}
.icon-box-item:hover .ib-icon,
.icon-box-item:focus-visible .ib-icon {
  background: color-mix(in srgb, var(--fitme-accent) 10%, #000);
  color: #fff;
  transform: scale(1.06);
  box-shadow: 0 0 16px 1px rgba(var(--fitme-accent-rgb), .4);
}
.icon-box-item:hover .ib-icon::after,
.icon-box-item:focus-visible .ib-icon::after { opacity: 1; animation: pc-spin 3.2s linear infinite; }
.icon-box-item:hover .ib-icon svg.mi,
.icon-box-item:focus-visible .ib-icon svg.mi { color: #fff; }
.icon-box-item:hover .ib-icon img,
.icon-box-item:focus-visible .ib-icon img { filter: brightness(0) invert(1); mix-blend-mode: normal; }
.icon-box-item:hover .ib-icon:has(img[src*="yourfit"]),
.icon-box-item:focus-visible .ib-icon:has(img[src*="yourfit"]) { background: #fff; }
.icon-box-item:hover .ib-icon img[src*="yourfit"],
.icon-box-item:focus-visible .ib-icon img[src*="yourfit"] { filter: none; }
@media (prefers-reduced-motion: reduce) {
  .icon-box-item:hover .ib-icon::after { animation: none; }
}

/* ── Trainers / Team ───────────────────────────────────────────────────────── */
.trainers-section {
  padding: 100px 0 60px;
}

/* Homepage: sit the team section right under the gallery (no big gap) */
#equipa.trainers-section {
  padding-top: 48px;
}

.trainers-section>h2 {
  margin-bottom: 3rem;
}

.trainer-item {
  text-align: center;
  padding: 0 5px;
  margin-bottom: 2.5rem;
}

.trainer-item .trainer-pic {
  width: 200px;
  height: 200px;
  border-radius: 0;
  margin: 0 auto 1.5rem;
  overflow: hidden;
  position: relative;
  border: 4px solid var(--fitme-accent);
  box-shadow: var(--fitme-shadow-lg);
  transform: rotate(-3deg);
  /* Soft curve so the square straightens + lifts on hover (same as the buttons) */
  transition: transform .5s cubic-bezier(.22, .8, .3, 1),
    box-shadow .4s ease;
}

/* CSS overlay replaces the old small_overlay_white.svg — one less HTTP request */
.trainer-item .trainer-pic:after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, 0.25) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(255, 255, 255, 0.08) 0%, transparent 45%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, transparent 40%, rgba(0, 0, 0, 0.1) 100%);
  pointer-events: none;
  z-index: 1;
}

.trainer-item .trainer-pic:hover {
  transform: rotate(0deg) translateY(-8px) scale(1.05);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .22);
}

/* Alternate the tilt direction across the grid for a livelier team wall;
   #powerRotation wraps the homepage team cards (the col-* siblings). */
#powerRotation>div:nth-child(even) .trainer-pic {
  transform: rotate(3deg);
}

#powerRotation>div:nth-child(even) .trainer-pic:hover {
  transform: rotate(0deg) translateY(-8px) scale(1.05);
}

.trainer-item .trainer-pic:hover:after {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, 0.32) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(255, 255, 255, 0.10) 0%, transparent 45%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, transparent 40%, rgba(0, 0, 0, 0.08) 100%);
}

/* Same hover as the buttons / Mensalidades cards: the frame's 4px edge turns
   into a conic brand-colour sweep (--pc-a / pc-spin, shared) over a dimmed
   base of the same colour, with a soft glow round it. The photo covers the
   padding box, so only the border area shows the gradient. */
@media (hover: hover) {
  .trainer-item .trainer-pic:hover,
  #powerRotation>div:nth-child(even) .trainer-pic:hover {
    border-color: transparent;
    background:
      linear-gradient(var(--fitme-dark), var(--fitme-dark)) padding-box,
      conic-gradient(from var(--pc-a), rgba(var(--fitme-accent-rgb), .35) 0deg, rgba(var(--fitme-accent-rgb), .35) 150deg,
          var(--fitme-accent) 250deg, #f4ff9c 300deg, var(--fitme-accent) 330deg,
          rgba(var(--fitme-accent-rgb), .35) 360deg) border-box;
    box-shadow: 0 0 18px 2px rgba(var(--fitme-accent-rgb), .4), var(--fitme-shadow-lg);
    animation: pc-spin 3.2s linear infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .trainer-item .trainer-pic:hover { animation: none; }
}

.trainer-item .trainer-pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 0;
  background: var(--fitme-surface-2);
  object-position: top;
}

/* Graceful fallback when image src is empty or 404 */
.trainer-item .trainer-pic img[src=""]:after,
.trainer-item .trainer-pic img:not([src]),
.trainer-item .trainer-pic img[src=""] {
  /* Hide broken image icon — parent .trainer-pic already has :after overlay */
  visibility: hidden;
}

.trainer-item h3,
.trainer-item h4 {
  margin-bottom: .3rem;
}

.trainer-item>*:last-child {
  font-size: .9rem;
  color: var(--fitme-text-muted);
}

/* Team runs on the dark (Void Black) canvas: light text so names read and the
   accent photo frames pop — the photos' own dark backgrounds now blend in. */
.trainers-section {
  color: var(--fitme-ash);
}

.trainers-section .section-title h2,
.trainers-section .trainer-item h3,
.trainers-section .trainer-item h4,
.trainers-section .trainer-item>*:last-child {
  color: #fff;
}

.trainers-section .section-subtitle {
  color: var(--fitme-ash);
}

/* ── Classes / Modalidades ─────────────────────────────────────────────────── */
.service-section {
  padding: 100px 0 60px;
}

.service-section>.container>.row:first-child {
  margin-bottom: 2rem;
}

/* ── Schedule / Horário ────────────────────────────────────────────────────── */
.schedule_container {
  margin-top: 2rem;
  /* Scroll sideways rather than crush columns on narrow desktops/tablets. */
  overflow-x: auto;
}

/* Time-aligned weekly grid: columns are days, rows are start times. Each cell is
   placed by inline `grid-column` (day) + `grid-row` (time) from the PHP, so every
   class lines up on the row of its start time across the whole week. */
.schedule_panel {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(var(--sched-days, 6), minmax(150px, 1fr));
  /* Explicit rows (day header + Manhã/Tarde dividers + one per start time) so
     the day stripes can span the whole grid with grid-row: 1 / -1. */
  grid-template-rows: repeat(var(--sched-rows, 14), auto);
  align-items: start;          /* cells hug the top of their time row */
  column-gap: 14px;
  row-gap: 14px;
  min-width: 760px;            /* keep columns legible; the container scrolls if narrower */
}

/* Per-day vertical band, painted behind the cards (emitted first in the DOM) so
   each weekday column reads as its own stripe. A faint wash of the brand accent
   green; alternating columns get a deeper tint and the light column gaps act as
   the separators between them. */
.schedule_stripe {
  align-self: stretch;         /* fill every row (panel sets align-items:start) */
  grid-row: 1 / -1;
  border-radius: 8px;
  background: rgba(var(--fitme-accent-rgb), .06);
  pointer-events: none;
}

.schedule_stripe.is-alt {
  background: rgba(var(--fitme-accent-rgb), .13);
}

/* Manhã / Tarde divider spanning the whole week above each block of times. */
.schedule_section_label {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: .35rem 0 .1rem;
  text-align: center;
}

.schedule_section_label span {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .8rem;
  color: var(--fitme-text-muted);
}

.schedule_section_label::before,
.schedule_section_label::after {
  content: '';
  flex: 1 1 0;
  height: 2px;
  border-radius: 2px;
  background: rgba(var(--fitme-accent-rgb), .5);
}

/* Day header (grid row 1). Class cards carry their own time label, so the grid
   needs no separate time gutter — rows align purely by placement. */
.schedule_dayhead {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-bottom: .25rem;
}

/* One (day, time) slot. Concurrent classes (same day + time, different rooms)
   sit SIDE BY SIDE so the overlap reads at a glance; a lone class fills the
   column. They share the column width equally and shrink to fit. */
.schedule_cell {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 8px;
  min-width: 0;
}

.schedule_cell > .schedule_box {
  flex: 1 1 0;
  min-width: 0;        /* allow equal shrink instead of overflowing the column */
}

.rounded_frame {
  background: var(--fitme-dark-3);
  color: #fff;
  border-radius: var(--fitme-radius);
  height: 40px;
  width: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 700;
}

.rounded_frame_grey {
  margin: auto;
  text-align: center;
  background: var(--fitme-surface-2);
  border-radius: var(--fitme-radius);
  height: 44px;
  width: 210px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rounded_frame_grey p {
  margin: 0;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.rounded_frame_medium {
  margin: auto;
  text-align: center;
  background: var(--fitme-dark-3);
  border-radius: var(--fitme-radius);
  height: 42px;
  width: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.schedule_frame {
  min-width: 230px;
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff !important;
  text-decoration: none;
}

.schedule_box {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  padding: 8px 4px;
  border-radius: var(--fitme-radius);
  text-align: center;
  transition: transform var(--fitme-transition), box-shadow var(--fitme-transition);
}

/* Reserve up to two lines for the class name so 1- and 2-line names produce the
   same card height. */
.schedule_box a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5em;
  line-height: 1.15;
  text-align: center;
}

.schedule_box a {
  font-size: 11px;
  color: #fff;
}

/* Fixed-height logo slot so every card's icon lines up regardless of the source
   image's aspect ratio. */
.schedule_box img {
  height: 30px;
  width: auto;
  max-width: 84%;
  object-fit: contain;
  margin-bottom: 4px;
  mix-blend-mode: multiply;
  filter: brightness(1.3) contrast(1.1);
}

.schedule_box>div:first-of-type {
  /* Fluid: replaces the 14px @<=767px step with one clamp anchored at
     375px (14px) -> 768px (16px, the old desktop value), audit 4.5. */
  font-size: clamp(14px, calc(12.0916px + .5089vw), 16px);
  color: #fff;
}

.schedule_box>div:last-of-type {
  /* Fluid: replaces the 12px @<=767px step with one clamp anchored at
     375px (12px) -> 768px (13px, the old desktop value), audit 4.5. */
  font-size: clamp(12px, calc(11.0458px + .2545vw), 13px);
  color: rgba(255, 255, 255, .85);
}

.schedule_box {
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.schedule_box:hover {
  transform: scale(1.08);
  z-index: 100;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .22);
  filter: brightness(1.1);
}

.schedule_info {
  /* Full-bleed footer band the full width of the card. The box is a centered
     flex column, so the strip must align-self:stretch (otherwise it shrinks to
     its text); negative margins then cancel the .schedule_box padding (8px
     top/bottom, 4px sides) so it reaches the card edges. The time sits on its
     own line with the classroom stacked beneath it — consistent at every card
     width (no side-by-side / wrapping differences between wide and narrow). */
  align-self: stretch;
  width: auto;
  margin: auto -4px -8px;       /* margin-top:auto pins the strip to the card foot */
  padding: 6px 8px;
  background: rgba(0, 0, 0, .25);
  border-radius: 0 0 var(--fitme-radius) var(--fitme-radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-height: 2.6em;           /* same strip height whether or not a room is set */
  line-height: 1.25;
  font-weight: 700;            /* time — the primary line */
}

/* Classroom — the secondary line under the time. */
.schedule_info b {
  font-weight: 500;
  font-size: .88em;
  opacity: .9;
}

/* Some classes have no room set (<b></b>); don't reserve a blank second line. */
.schedule_info b:empty {
  display: none;
}

/* ── Contact section ───────────────────────────────────────────────────────── */
.contact-section {
  padding: 100px 0 80px;
  color: var(--fitme-ash);
  position: relative;
  overflow: hidden;
  background-color: var(--fitme-dark-2);
}

/* Strong overlay to keep text readable over the background image */
.contact-section:before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg,
      rgba(10, 10, 10, 0.88) 0%,
      rgba(10, 10, 10, 0.78) 40%,
      rgba(10, 10, 10, 0.82) 100%);
}

.contact-section .container {
  z-index: 1;
  position: relative;
}

.contact-section h1,
.contact-section h2,
.contact-section h3,
.contact-section h4,
.contact-section h5,
.contact-section h6 {
  color: #fff;
}

.contact-title {
  margin-bottom: 2.5rem;
}

/* The form heading is an h3 under the section's h2 — keep the h2 look. */
h3.contact-title {
  font-size: 2.25rem;
}

.contact-info-warp {
  margin-bottom: 1.4rem;
}

.contact-info-warp h3,
.contact-info-warp h4 {
  color: var(--fitme-accent);
  margin-bottom: .5rem;
  font-size: 1rem;
}

.contact-info p {
  color: rgba(255, 255, 255, .7);
  line-height: 1.8;
  margin: 0;
}

.contact-info-warp a {
  color: rgba(255, 255, 255, .7);
}

.contact-info-warp a:hover {
  color: var(--fitme-accent);
}

.contact-form input[type=text],
.contact-form input[type=email],
.contact-form textarea {
  width: 100%;
  padding: 14px 20px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .06);
  color: #fff;
  font-size: .95rem;
  border-radius: var(--fitme-radius);
  margin-bottom: 16px;
  transition: border-color var(--fitme-transition), background var(--fitme-transition);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: rgba(255, 255, 255, .35);
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--fitme-accent);
  background: rgba(255, 255, 255, .1);
}

.contact-form textarea {
  resize: vertical;
  min-height: 150px;
}

.contact-form .site-btn {
  float: right;
}

/* The Nome/Telemóvel row sits in Bootstrap columns (12px gutter, BS5); cancel
   that with negative margins so those inputs line up flush with the full-width
   Razão and Mensagem fields below them. */
.contact-form .row {
  margin-left: -0.75rem;
  margin-right: -0.75rem;
}

@media (min-width: 992px) {
  /* Natural column heights — the textarea is stretched by JS to meet the map's
     bottom (see main.js), and the consent + submit button follow just below. */
  #contactos > .container > .row { align-items: flex-start; }
}

/* ── Newsletter ────────────────────────────────────────────────────────────── */
.newsletter-section {
  padding: 80px 0;
  background-color: var(--fitme-dark-3);   /* not shorthand → keeps .set-bg cover */
  position: relative;
  overflow: hidden;
}

.newsletter-section:before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg,
      rgba(31, 31, 31, 0.92) 0%,
      rgba(31, 31, 31, 0.85) 50%,
      rgba(31, 31, 31, 0.92) 100%);
}

.newsletter-section .container {
  z-index: 1;
  position: relative;
}

.newsletter-section .section-title {
  padding-top: .5rem;
}

.newsletter-form {
  margin-left: -55px;
}

.newsletter-form input {
  width: calc(100% - 210px);
  height: 58px;
  padding: 10px 28px;
  float: left;
  border: none;
  border-radius: var(--fitme-radius) 0 0 var(--fitme-radius);
  font-size: .95rem;
}

.newsletter-form .site-btn {
  min-width: 180px;
  border-radius: 0 var(--fitme-radius) var(--fitme-radius) 0;
  height: 58px;
  padding: 0 28px;
}

/* ── Map ───────────────────────────────────────────────────────────────────── */
.map {
  position: relative;
  height: 480px;
  background: var(--fitme-surface-dark);
  border-radius: var(--fitme-radius);
  overflow: hidden;
}

/* Full-width map in Informações e contactos, below the info + form grid. */
.map-full {
  margin-top: 2.5rem;
}

.map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ── Footer ────────────────────────────────────────────────────────────────── */
.footer-section {
  padding: 60px 0 30px;
  background-color: var(--fitme-dark);   /* not shorthand → keeps .set-bg cover */
  color: rgba(255, 255, 255, .6);
  position: relative;
  overflow: hidden;
}

.footer-section:before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Same matte-metal texture as the reviews section, over the (now barely
     visible) gym photo. */
  background-image:
    var(--metal-layers),
    linear-gradient(180deg,
      rgba(20, 21, 23, 0.96) 0%,
      rgba(20, 21, 23, 0.92) 50%,
      rgba(20, 21, 23, 0.96) 100%);
  background-size: var(--metal-sizes), 100% 100%;
}

.footer-section .container {
  z-index: 1;
  position: relative;
}

.footer-widget {
  margin-bottom: 2.5rem;
}

.footer-widget h4 {
  color: #fff;
  margin-bottom: 1.2rem;
  font-size: 1rem;
}

.footer-widget .fw-info-box {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  margin-bottom: .75rem;
}

.footer-widget .fw-info-box .fas {
  color: var(--fitme-accent);
  font-size: 1.1rem;
  margin-top: 3px;
}

.footer-widget .fw-info-box p {
  color: rgba(255, 255, 255, .55);
  line-height: 1.7;
  margin: 0;
  font-size: .88rem;
}

.footer-widget a {
  color: rgba(255, 255, 255, .55);
}

.footer-widget a:hover {
  color: var(--fitme-accent);
}

.footer-widget .social-links {
  display: flex;
  gap: .5rem;
}

.footer-widget .social-links a {
  font-size: 1.4rem;
  color: rgba(255, 255, 255, .45);
  transition: color var(--fitme-transition), transform var(--fitme-transition);
}

.footer-widget .social-links a:hover {
  color: var(--fitme-accent);
  transform: translateY(-2px);
}

/* Slimmed, centred footer: social row, site menu, legal links. */
.footer-social {
  display: flex;
  justify-content: center;
  gap: .9rem;
  font-size: 1.6rem;
  margin-bottom: 1.5rem;
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  color: rgba(255, 255, 255, .6);
  transition: color var(--fitme-transition), transform var(--fitme-transition);
}
.footer-social a:hover {
  color: var(--fitme-accent);
  transform: translateY(-2px);
}

.footer-menu {
  list-style: none;
  text-align: center;
  padding-top: 0;
  margin: 0 0 1rem;
}

.footer-menu li {
  display: inline-block;
}

.footer-menu li a {
  color: rgba(255, 255, 255, .6);
  font-size: .82rem;
  font-weight: 700;
  padding: 5px 10px;
  margin: 0 .35rem;
  transition: color var(--fitme-transition);
}

.footer-menu li a:hover {
  color: var(--fitme-accent);
}

.footer-legal {
  color: rgba(255, 255, 255, .5);
  margin: .25rem 0;
}
.footer-legal a {
  color: rgba(255, 255, 255, .7);
}
.footer-legal a:hover {
  color: var(--fitme-accent);
}
/* Discreet backoffice link — faint until hovered. */
.footer-legal-sep {
  color: rgba(255, 255, 255, .25);
  margin: 0 .35rem;
}
.footer-admin-link {
  opacity: .35;
  transition: opacity .2s ease;
}
.footer-admin-link:hover {
  opacity: 1;
}

/* ── Page-top header (CrossFit page) ───────────────────────────────────────── */
.page-top-section {
  height: 340px;
  text-align: center;
  padding-top: 140px;
  position: relative;
  overflow: hidden;
  background-color: var(--fitme-dark);
}

/* Depth gradient overlay */
.page-top-section:before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg,
      rgba(0, 0, 0, 0.55) 0%,
      rgba(0, 0, 0, 0.30) 50%,
      rgba(0, 0, 0, 0.50) 100%);
}

.page-top-section .container {
  z-index: 2;
  position: relative;
}

.page-top-section h1 {
  display: inline-block;
  position: relative;
  /* Fluid: replaces the 2.5rem @<=767px step with one clamp anchored at
     375px (2.5rem) -> 768px (4rem, the old desktop value), audit 4.5. */
  font-size: clamp(2.5rem, calc(1.0687rem + 6.1069vw), 4rem);
  color: #fff;
  padding-bottom: 16px;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .7);
}

.page-top-section h1:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 5px;
  bottom: 0;
  left: 0;
  background: var(--fitme-accent);
}

/* ── CrossFit video header ─────────────────────────────────────────────────── */
.video {
  position: relative;
  background: #000;
  height: 75vh;
  min-height: 20rem;
  width: 100%;
  overflow: hidden;
}

.video video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  transform: translate(-50%, -50%);
}

.video .container {
  position: relative;
  z-index: 2;
}

.video .overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(0, 0, 0, 0.45) 0%,
      rgba(0, 0, 0, 0.25) 35%,
      rgba(0, 0, 0, 0.35) 65%,
      rgba(0, 0, 0, 0.60) 100%);
}

@media (pointer: coarse) and (hover: none) {
  .video {
    background: url('../img/crossfit.jpg') #000 center/cover no-repeat;
  }

  .video video {
    display: none;
  }
}

/* ── Classes / CrossFit section ────────────────────────────────────────────── */
.classes-section {
  padding: 80px 0;
  /* background-color (not the `background` shorthand) so a .set-bg image keeps
     the cover/no-repeat from .set-bg instead of tiling at natural size. */
  background-color: var(--fitme-white);
}

.classes-section .section-title h2 span {
  color: var(--fitme-accent);
}

/* Variant with a background image (e.g. the CrossFit "O que é o CrossFit?"
   banner): dark gradient overlay for legible white text over the photo. */
.classes-section.has-bg {
  position: relative;
  background-color: var(--fitme-dark);
}
.classes-section.has-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, rgba(11,11,13,.82) 0%, rgba(11,11,13,.62) 55%, rgba(11,11,13,.40) 100%);
}
.classes-section.has-bg .container {
  position: relative;
  z-index: 1;
}
.classes-section.has-bg h2,
.classes-section.has-bg .classes-text p {
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.5);
}

.classes-text p {
  color: var(--fitme-text-soft);
  margin-bottom: 2.5rem;
}

/* ── Gallery (Splide overrides) ────────────────────────────────────────────── */
.splide__slide {
  background-size: cover;
}

/* Brand the arrows + pagination (the sea-green theme ships them blue). Loaded
   after the Splide theme CSS, so plain selectors win — no !important needed. */
.splide__arrow {
  background: var(--fitme-accent);
  opacity: 1;
  width: 2.4em;
  height: 2.4em;
  border-radius: var(--fitme-radius);
  transition: background var(--fitme-transition), transform var(--fitme-transition);
}

.splide__arrow svg,
.splide__arrow:hover svg,
.splide__arrow:focus svg {
  fill: var(--fitme-dark);
  width: 1.1em;
  height: 1.1em;
}

.splide__arrow:hover {
  background: var(--fitme-accent-dark);
}

.splide__arrow:disabled {
  opacity: .35;
}

.splide__arrow--prev {
  left: 1em;
}

.splide__arrow--next {
  right: 1em;
}

.splide__pagination__page {
  background: var(--fitme-ash);
  opacity: .6;
}

.splide__pagination__page.is-active {
  background: var(--fitme-accent);
  opacity: 1;
  transform: scale(1.3);
}

/* ── 404 / Error pages ─────────────────────────────────────────────────────── */
.page-top-section h1:after {
  background: var(--fitme-accent);
}

/* ── Modal / Pop-up ────────────────────────────────────────────────────────── */
.modal-content {
  border: none;
  background: transparent !important;
}

/* ── Sticky mobile CTA bar ─────────────────────────────────────────────────── */
.mobile-cta-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: rgba(10, 10, 10, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 8px 12px;
  gap: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.mobile-cta-bar .cta-btn {
  flex: 1;
  text-align: center;
  padding: 12px 8px;
  border-radius: var(--fitme-radius);
  font-weight: 700;
  font-size: .9rem;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background var(--fitme-transition);
}

.mobile-cta-bar .cta-btn-call {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.mobile-cta-bar .cta-btn-call:active {
  background: rgba(255, 255, 255, 0.1);
}

.mobile-cta-bar .cta-btn-cta {
  background: var(--fitme-accent);
  color: var(--fitme-dark);
}

.mobile-cta-bar .cta-btn-cta:active {
  background: var(--fitme-accent-dark);
}

/* ── Back to top button ────────────────────────────────────────────────────── */
.back-to-top {
  position: fixed;
  bottom: 80px;
  right: 16px;
  z-index: 998;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--fitme-accent);
  color: var(--fitme-dark);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 700;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .25s, visibility .25s, transform .25s;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .25);
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:active {
  transform: scale(0.95);
}

/* ── Consent checkbox (RGPD, contact + newsletter forms on dark sections) ──── */
.consent-check {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  clear: both;
  padding-top: 12px;
  font-size: .8rem;
  line-height: 1.5;
  font-weight: 400;
  color: rgba(255, 255, 255, .75);
  cursor: pointer;
}

.consent-check input[type=checkbox] {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--fitme-accent);
  cursor: pointer;
}

.consent-check a {
  color: #fff;
  text-decoration: underline;
}

.consent-check a:hover {
  color: var(--fitme-accent);
}

/* ── WhatsApp floating button ──────────────────────────────────────────────── */
.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 16px;
  z-index: 998;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .25);
}

.whatsapp-float:hover,
.whatsapp-float:focus {
  background: #1ebe5d;
  color: #fff;
  text-decoration: none;
}

/* ── Mobile schedule: horizontal scroll ────────────────────────────────────── */
.schedule-scroll-hint {
  display: none;
  text-align: center;
  font-size: .75rem;
  color: var(--fitme-text-muted);
  margin-top: .5rem;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* ── ≥ 1200px ──────────────────────────────────────────────────────────────── */
@media (min-width: 1200px) {
  .container {
    max-width: 1176px;
  }
}

/* ── 992px–1199px ──────────────────────────────────────────────────────────── */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header-right .hr-box {
    display: none !important;
  }

  .newsletter-form {
    margin-left: 0;
  }
}

/* ── 768px–991px ───────────────────────────────────────────────────────────── */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header-right .hr-box {
    display: none;
  }

  /* Schedule keeps the time-aligned grid here; .schedule_container scrolls it
     sideways when six columns don't fit. */

  .newsletter-section {
    text-align: center;
  }

  .newsletter-form {
    margin-top: 2rem;
    margin-left: 0;
  }

  .newsletter-form input {
    width: 100%;
    margin-bottom: 1rem;
    border-radius: var(--fitme-radius);
  }

  .newsletter-form .site-btn {
    border-radius: var(--fitme-radius);
    width: 100%;
  }

  .footer-menu {
    text-align: center;
  }

  .footer-menu li a {
    margin-left: .5rem;
  }

  .contact-form .site-btn {
    float: none;
    width: 100%;
  }

  .navbar-collapse {
    background: #fff;
    padding: 1rem;
  }

  .nav-link {
    text-align: center;
  }

  .navbar-toggler {
    margin-right: 1rem;
  }

  .trainer-item .trainer-pic {
    width: 150px;
    height: 150px;
  }

  .map {
    height: 320px;
  }
}

/* ── ≤ 767px ───────────────────────────────────────────────────────────────── */
@media only screen and (max-width: 767px) {

  /* Hero */
  .hero-section {
    min-height: max(100svh, 500px);
    min-height: max(100dvh, 500px);
  }

  .hero-text {
    padding-top: 120px;
    padding-bottom: 100px;
  }

  .hero-brand {
    font-size: .8rem;
    letter-spacing: .28em;
    margin-bottom: .6rem;
  }

  .hero-text .site-btn {
    min-width: 180px;
    padding: 14px 28px;
    font-size: .95rem;
  }

  /* General */
  html {
    scroll-padding-top: 60px;
  }

  /* Sticky mobile bar */
  .mobile-cta-bar {
    display: flex;
  }

  /* The dark footer clears the fixed CTA bar itself, so there's no blank strip
     after it (the old body padding-bottom showed a white gap below the footer). */
  .footer-section {
    padding-top: 44px;
    padding-bottom: 92px;
  }

  /* Glass bar on mobile too, just a touch more opaque for legibility. The open
     dropdown stays solid (.navbar-collapse below) so menu text never competes
     with the page content showing through the blur. */
  .header-section {
    background: rgba(247, 248, 250, 0.85);
  }

  .site-logo {
    padding-left: 12px;
    max-width: 130px;
  }

  .header-right {
    display: none !important;
  }

  .navbar-collapse {
    background: #fff;
    padding: 1rem;
  }

  .navbar-toggler {
    margin-right: .75rem;
  }

  /* The single-day layout + day picker now apply at every width (see the
     "Schedule day filter" block); only small-screen card sizing lives here. */
  .schedule:not(.schedule-export) .schedule_panel {
    max-width: none;          /* use the full phone width */
  }

  .schedule_box {
    padding: 8px 6px;
    gap: 3px;
  }

  .rounded_frame {
    margin: 0 auto .75rem;
    width: 130px;
    height: 36px;
    font-size: 1rem;
  }

  .schedule_box img {
    height: 26px;
  }

  .schedule_box a {
    font-size: 11px;
  }

  .schedule-scroll-hint {
    display: block;
    padding: 0 16px;
  }

  /* Work hours */
  .rounded_frame_grey {
    width: 160px;
  }

  .rounded_frame_medium {
    width: 180px;
  }

  .schedule_frame {
    min-width: auto;
    font-size: .95rem;
  }

  /* Team grid */
  .trainer-item .trainer-pic {
    width: 140px;
    height: 140px;
  }

  /* Gallery */
  #primary-slider .splide__slide {
    height: 280px !important;
  }

  /* Contact form */
  .contact-form input[type=text],
  .contact-form input[type=email],
  .contact-form textarea {
    font-size: 1rem;
    padding: 14px 16px;
    height: 50px;
  }

  .contact-form textarea {
    height: 130px;
  }

  .contact-form .site-btn {
    float: none;
    width: 100%;
    margin-top: .5rem;
  }

  .contact-form input:focus,
  .contact-form textarea:focus {
    box-shadow: 0 0 0 3px rgba(var(--fitme-accent-rgb), 0.35);
    outline: none;
  }

  /* Map */
  .map {
    height: 220px;
  }

  .map-section {
    padding-bottom: 0 !important;
  }

  /* Newsletter */
  .newsletter-section {
    text-align: center;
  }

  .newsletter-form {
    margin-top: 2rem;
    margin-left: 0;
  }

  .newsletter-form input {
    width: 100%;
    margin-bottom: .75rem;
    border-radius: var(--fitme-radius);
    height: 50px;
    font-size: 1rem;
  }

  .newsletter-form .site-btn {
    border-radius: var(--fitme-radius);
    width: 100%;
    height: 50px;
  }

  /* Footer */
  .footer-menu {
    text-align: center;
  }

  .footer-menu li a {
    margin-left: .3rem;
    font-size: .75rem;
    padding: 8px 6px;
  }

  /* Floating buttons: stack above the sticky CTA bar */
  .whatsapp-float {
    bottom: 80px;
  }

  .back-to-top {
    bottom: 140px;
  }
}

/* ── ≤ 575px (xs) ──────────────────────────────────────────────────────────── */
@media only screen and (max-width: 575px) {
  .hero-text {
    padding-top: 100px;
    padding-bottom: 80px;
  }

  .trainer-item .trainer-pic {
    width: 120px;
    height: 120px;
  }

  .site-btn {
    min-width: 150px;
    padding: 13px 22px;
    font-size: .88rem;
  }

  /* Contact: stack name + phone */
  .contact-form .col-md-6 {
    width: 100%;
  }

  /* Offer + modalidades: compact icons */
  .icon-box-item .ib-icon {
    width: 56px;
    height: 56px;
  }

  .icon-box-item .ib-icon img {
    max-width: 34px;
    max-height: 34px;
  }

  .rounded_frame {
    width: 100px;
    height: 30px;
    font-size: .85rem;
  }
}

/* ── Reduced motion ────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .fade-in {
    animation: none;
    opacity: 1;
  }

  /* The team / modalidade detail cards are exempt: reduced-motion is on by
     default over Remote Desktop and with Windows "animation effects" off, and
     this nuke turned their grow-out-of-the-card move into a jarring pop. They
     only move when the visitor asks (hover / tap) and settle in ~0.6s. */
  *:not(.trainer-detail):not(.td-body):not(.mod-detail):not(.md-body),
  *:before,
  *:after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }

}

/* ── Decorated section title (eyebrow + accent underline + subtitle) ────────── */
/* Reusable heading style — add `.deco` to a `.section-title` and optionally an
   `.section-eyebrow` above the h2 and an `.section-subtitle` below it. */
.section-eyebrow {
  display: inline-block;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--fitme-accent);
  margin-bottom: .5rem;
}

/* Short titles (e.g. "Modalidades") would otherwise sit on the eyebrow's line. */
.section-title.deco .section-eyebrow {
  display: block;
}

/* Eyebrow on light sections: the neon accent is ~1.6:1 there (WCAG AA needs
   4.5:1), so those use the ink green; dark sections keep the bright accent. */
.feature-section .section-eyebrow,
.gallery-section .section-eyebrow,
.service-section .section-eyebrow,
.schedule-section .section-eyebrow,
.workhours-section .section-eyebrow {
  color: var(--fitme-accent-ink);
}

.section-title.deco h2 {
  position: relative;
  display: inline-block;
  padding-bottom: .7rem;
}

.section-title.deco h2:after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 64px;
  height: 3px;
  border-radius: 2px;
  background: var(--fitme-accent);
}

.section-subtitle {
  color: var(--fitme-text-muted);
  margin-top: .9rem;
  margin-bottom: 0;
  font-size: 1rem;
}

/* ── Modalidades: scrollable strip + detail card ─────────────────────────────
   .mod-scroll is a real horizontal scroller (touch, trackpad, wheel, mouse
   drag, arrow buttons). main.js glides it on its own until someone interacts,
   and loops it seamlessly over a cloned second set of cards. */
/* content-visibility:auto implies paint containment, which would clip the
   detail card at the section edge and trap position:fixed on touch. */
#modalidades.service-section {
  content-visibility: visible;
  contain: none;
  position: relative;
  z-index: 2;
}

#modalidades.has-open-detail { z-index: 1100; }

.mod-strip {
  position: relative;
}

/* Soft fades at both ends, under the arrow buttons. */
.mod-strip:before,
.mod-strip:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: 90px;
  pointer-events: none;
}

.mod-strip:before { left: 0;  background: linear-gradient(90deg, var(--fitme-white), rgba(255, 255, 255, 0)); }
.mod-strip:after  { right: 0; background: linear-gradient(270deg, var(--fitme-white), rgba(255, 255, 255, 0)); }

@media (max-width: 767px), (hover: none) {
  .mod-strip:before, .mod-strip:after { width: 28px; }
}

.mod-scroll {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 10px 0 14px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  cursor: grab;
  outline: none;
}

.mod-scroll::-webkit-scrollbar { display: none; }
.mod-scroll.is-dragging { cursor: grabbing; user-select: none; }
.mod-scroll.is-dragging .mod-card { pointer-events: none; }

/* Trailing margin (not flex gap) keeps both copies the same width, so the
   loop jump from the clone back to the original is invisible. */
.mod-scroll .mod-card {
  flex: 0 0 auto;
  width: 180px;
  min-height: 200px;
  margin: 0 .5rem 0 0;
  position: relative;
}

.mod-scroll .mod-card:first-child { margin-left: .5rem; }

.mod-card.has-info { cursor: pointer; outline: none; }

.mod-card.has-info:hover h3 { color: var(--fitme-accent-ink); }

.mod-card.has-info:focus-visible {
  box-shadow: 0 0 0 3px rgba(var(--fitme-accent-rgb), .35);
  border-radius: var(--fitme-radius);
}

/* The card whose detail is open is covered by the panel — hide it so the
   panel reads as the card itself. */
.mod-card.is-source { visibility: hidden; }

/* Arrow buttons (desktop). Faded edges hint there is more to either side. */
.mod-nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 44px;
  height: 44px;
  margin-top: -30px;
  border: 0;
  border-radius: 50%;
  background: var(--fitme-dark-2);
  color: var(--fitme-accent);
  box-shadow: var(--fitme-shadow-lg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: .9;
  transition: opacity var(--fitme-transition), transform var(--fitme-transition);
}

.mod-nav:hover { opacity: 1; transform: scale(1.06); }
.mod-nav-prev { left: 14px; }
.mod-nav-next { right: 14px; }

@media (max-width: 767px), (hover: none) {
  .mod-nav { display: none; }
  .mod-scroll { cursor: auto; }
}

/* ── Detail panel: grows out of the card ───────────────────────────────────
   Same idea as the team card: main.js lays the panel so its left column
   (.md-card, a replica of the card) sits exactly on the card, clipped to it;
   opening unclips it sideways to reveal the description (.md-flip mirrors it
   near the right edge). While open, the mouse drives a small 3D tilt. */
.mod-detail {
  position: absolute;
  z-index: 30;
  left: var(--md-x, 0px);
  top: var(--md-y, 0px);
  width: var(--md-w, 540px);
  min-height: var(--md-ch, 200px);
  display: flex;
  text-align: left;
  background: #fff;
  border-radius: 6px;
  /* Discreet lift. Only visible because the open clip-path below reaches
     40px past the card — a flush inset() would cut the shadow off. */
  box-shadow: 0 12px 30px rgba(var(--fitme-dark-rgb), .16), 0 2px 6px rgba(var(--fitme-dark-rgb), .10);
  overflow: hidden;
  clip-path: inset(0px var(--md-cx, 360px) var(--md-cy, 0px) 0px round 2px);
  transform-origin: calc(var(--md-cw, 180px) / 2) 50%;
  transform: perspective(900px) rotateX(0deg) rotateY(0deg) translate(0px, 0px) scale(1);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    clip-path .38s cubic-bezier(.4, 0, .2, 1),
    transform .38s cubic-bezier(.4, 0, .2, 1),
    opacity .12s ease .26s,
    visibility 0s linear .38s;
}

.mod-detail.md-flip {
  flex-direction: row-reverse;
  clip-path: inset(0px 0px var(--md-cy, 0px) var(--md-cx, 360px) round 2px);
  transform-origin: calc(100% - var(--md-cw, 180px) / 2) 50%;
}

.mod-detail.is-open {
  clip-path: inset(-40px -40px -40px -40px round 6px);
  transform: perspective(900px) rotateX(var(--md-rx, 0deg)) rotateY(var(--md-ry, 0deg)) translate(var(--md-mx, 0px), var(--md-my, -6px)) scale(1.02);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    clip-path .55s cubic-bezier(.2, .9, .25, 1),
    transform .6s cubic-bezier(.34, 1.35, .64, 1),
    opacity 0s,
    visibility 0s;
}

.mod-detail.is-open.md-tracking {
  transition:
    clip-path .55s cubic-bezier(.2, .9, .25, 1),
    transform .18s ease-out,
    opacity 0s,
    visibility 0s;
}

/* Left column: looks exactly like the card it came from. */
.md-card {
  flex: 0 0 var(--md-cw, 180px);
  min-height: var(--md-ch, 200px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: var(--md-pad, 0px);
  text-align: center;
  background: #fff;
  border-right: 4px solid var(--md-color, var(--fitme-accent));
}

.md-flip .md-card { border-right: 0; border-left: 4px solid var(--md-color, var(--fitme-accent)); }

.md-card .ib-icon {
  width: 72px;
  height: 72px;
  border-radius: var(--fitme-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fitme-accent);
  margin: 0 auto 1.5rem;
}

.md-card .ib-icon img { max-width: 44px; max-height: 44px; }

.md-card h3 {
  font-size: 1.15rem;
  margin: 0 .5rem;
  color: var(--fitme-accent-ink);
}

.md-body {
  flex: 1 1 auto;
  padding: 20px 24px 20px 22px;
  max-height: 320px;
  overflow-y: auto;
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity .12s ease, transform .12s ease;
}

.md-flip .md-body { transform: translateX(10px); }

.mod-detail.is-open .md-body {
  opacity: 1;
  transform: none;
  transition: opacity .3s ease .18s, transform .35s ease .18s;
}

.md-name {
  display: block;
  font-size: 1.2rem;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--fitme-dark);
  margin-bottom: .5rem;
  padding-right: 18px;
}

.md-text {
  font-size: .9rem;
  line-height: 1.55;
  color: var(--fitme-text-soft);
}

.md-text p:last-child { margin-bottom: 0; }

.md-close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  width: 44px;
  height: 44px;
  display: none;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--fitme-text-muted);
  cursor: pointer;
}

/* Touch / narrow: a centred fixed card over a dimmed page; main.js flies it
   out of the card with a FLIP animation. */
@media (max-width: 767px), (hover: none) {
  .mod-detail,
  .mod-detail.md-flip {
    position: fixed;
    top: var(--md-top, 20vh);
    left: 16px;
    right: 16px;
    width: auto;
    max-width: 540px;
    min-height: 0;
    margin: 0 auto;
    max-height: calc(100dvh - 48px);
    flex-direction: row;
    clip-path: none;
    transform: none;
    transform-origin: top left;
    transition: opacity .15s ease, visibility 0s linear .15s;
  }
  .mod-detail.is-open {
    clip-path: none;
    transform: none;
    transition: opacity 0s, visibility 0s;
  }
  .mod-detail-backdrop {
    position: fixed;
    inset: 0;
    z-index: 29;
    background: rgba(0, 0, 0, .55);
  }
  .md-close { display: flex; }
  .md-card { flex-basis: 120px; min-height: 0; padding: 18px 6px; justify-content: center; }
  .md-flip .md-card { border-left: 0; border-right: 4px solid var(--md-color, var(--fitme-accent)); }
  .md-card .ib-icon { width: 60px; height: 60px; margin-bottom: .8rem; }
  .md-card h3 { font-size: .95rem; }
  .md-body,
  .md-flip .md-body { max-height: calc(100dvh - 48px); padding: 16px 16px 16px 14px; transform: none; }
}

@media (max-width: 575px) {
  .mod-detail, .mod-detail.md-flip { flex-direction: column; }
  .md-card { flex-basis: auto; border-right: 0; border-bottom: 4px solid var(--md-color, var(--fitme-accent)); }
}


/* ── Horário "save as JPG" link + capture-clone export board ────────────────
   A plain underlined link rather than a button — secondary action, shouldn't
   compete with the day-filter bar right below it. */
.schedule-dl-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--fitme-accent-ink);
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .3px;
  /* Alvo de toque ≥44px sem engordar o visual: padding compensado por
     margin negativa (o texto sublinhado fica do mesmo tamanho). */
  padding: 12px 4px;
  margin: -12px -4px;
  min-height: 44px;
  text-decoration: underline;
  transition: color var(--fitme-transition);
}

.schedule-dl-btn:hover {
  color: var(--fitme-accent);
}

.schedule-dl-btn:disabled {
  opacity: .6;
  cursor: default;
}

/* Applied (via html2canvas onclone) to the schedule clone inside the capture
   iframe — never visible on the live page. */
.schedule-export {
  width: 1920px;
  padding: 48px 40px 32px;
  box-sizing: border-box;
  background: var(--fitme-surface);
}

/* html2canvas snapshots the page inside a hidden iframe where the .fade-in /
   .revealed entry animations restart from their opacity:0 keyframe — freeze
   every node at its final visible state or the JPG exports blank white. */
.schedule-export,
.schedule-export * {
  animation: none !important;
  transition: none !important;
  opacity: 1 !important;
}

.schedule-stamp {
  text-align: center;
  margin: 22px 0 0;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .3px;
  color: var(--fitme-text-soft);
}

/* Force the full desktop time-grid inside the export board, independent of the
   real viewport's media queries (otherwise a phone renders the clone with the
   mobile single-column layout → a tall, mostly-empty image). */
.schedule-export .container {
  max-width: none !important;
  width: 100% !important;
}

.schedule-export .schedule-scroll-hint {
  display: none !important;
}

.schedule-export .schedule_container {
  overflow: visible !important;
}

.schedule-export .schedule_panel {
  display: grid !important;
  grid-template-columns: repeat(var(--sched-days, 6), minmax(0, 1fr)) !important;
  align-items: start !important;
  column-gap: 14px !important;
  row-gap: 14px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* Cells keep their inline grid-row/grid-column placement: the capture iframe is
   1920px wide so the ≤767px single-column override never applies, and inline
   styles outrank these stylesheet rules anyway. */
.schedule-export .schedule_box {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* On-screen single-day layout — one centred column showing the chosen day's
   classes in time order, keeping the Manhã / Tarde dividers as section breaks.
   Scoped to :not(.schedule-export) so the capture clone keeps the full week. */
.schedule:not(.schedule-export) .schedule_container {
  overflow-x: visible;
}

.schedule:not(.schedule-export) .schedule_panel {
  grid-template-columns: minmax(0, 720px);   /* single, comfortably wide column */
  justify-content: center;                    /* …centred in the section */
  column-gap: 0;
  row-gap: 0;
  min-width: 0;
  margin: 1rem auto 0;
  -webkit-mask-image: none;
  mask-image: none;
}

/* Day stripes are a week-only device; drop them. Keep the Manhã/Tarde labels. */
.schedule:not(.schedule-export) .schedule_stripe {
  display: none;
}
.schedule:not(.schedule-export) .schedule_section_label {
  grid-column: 1;
  margin: .9rem 0 1.1rem;
}

/* Pull the selected day's header + cells into the single column (override the
   inline grid-column that otherwise places them under their weekday). */
.schedule:not(.schedule-export) .schedule_dayhead {
  grid-column: 1 !important;
  margin-bottom: 1.1rem;
}
.schedule:not(.schedule-export) .schedule_cell {
  grid-column: 1 !important;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
/* A lone class stays a tidy card instead of stretching the whole column. */
.schedule:not(.schedule-export) .schedule_cell > .schedule_box {
  flex: 0 1 220px;
}

/* Hide every day but the selected one, plus any empty Manhã/Tarde divider
   (JS toggles .sched-hide by data-day / by section). */
.schedule:not(.schedule-export) .schedule_cell.sched-hide,
.schedule:not(.schedule-export) .schedule_dayhead.sched-hide,
.schedule:not(.schedule-export) .schedule_section_label.sched-hide {
  display: none !important;
}

/* Single-day mode: no day-filter bar any more (audit UX pass) — the header
   itself is the only day switcher, so it always shows, with prev/next arrows
   beside the day name. Kept plain (no arrows) for the 3-day desktop view
   (.is-3day), where the side days are already directly clickable. */
.schedule:not(.schedule-export):not(.is-3day) .schedule_dayhead {
  gap: 10px;
  align-items: center;
}

/* Desktop 3-day view: arrows stay only beside the centred/focused day —
   the side days are already directly clickable, arrows there would be noise. */
.schedule.is-3day .schedule_dayhead.sched-side .sched-nav,
.schedule-export .sched-nav {
  display: none;
}

.sched-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: var(--fitme-radius);
  background: var(--fitme-surface-2);
  color: var(--fitme-text-soft);
  font-size: 1rem;
  cursor: pointer;
  transition: background var(--fitme-transition), color var(--fitme-transition);
  flex: 0 0 auto;
}

.sched-nav:hover {
  background: var(--fitme-accent);
  color: var(--fitme-dark);
}

.schedule-scroll-hint {
  display: none !important;
}

/* ── Horário: compact cards (on screen, every width) ───────────────────────────
   Smaller, narrower cards and type so a day reads at a glance and three days
   fit side by side on desktop. The JPG export keeps its own sizing. */
.schedule:not(.schedule-export) .schedule_cell {
  gap: 6px;
  margin-bottom: .6rem;
}

.schedule:not(.schedule-export) .schedule_cell > .schedule_box {
  flex: 0 1 112px;
  padding: 6px 3px;
}

.schedule:not(.schedule-export) .schedule_box img {
  height: 22px;
  margin-bottom: 2px;
}

.schedule:not(.schedule-export) .schedule_box a {
  font-size: 10px;
  min-height: 2.3em;
}

.schedule:not(.schedule-export) .schedule_info {
  margin: auto -3px -6px;
  padding: 4px 6px;
  font-size: 11.5px;
  min-height: 2.4em;
}

.schedule:not(.schedule-export) .schedule_box:hover {
  transform: scale(1.05);
}

.schedule:not(.schedule-export) .schedule_dayhead {
  margin-bottom: .7rem;
}

.schedule:not(.schedule-export) .rounded_frame {
  width: 104px;
  height: 32px;
  font-size: .95rem;
}

.schedule:not(.schedule-export) .schedule_section_label {
  margin: .5rem 0 .8rem;
}

.schedule:not(.schedule-export) .schedule_section_label span {
  font-size: .72rem;
}

/* ── Desktop: yesterday · today · tomorrow ─────────────────────────────────────
   ≥992px, main.js shows three days — the chosen one (today by default) centred
   between its neighbours, wrapping round the week — and tags each visible
   header/cell with .sched-pos-1/2/3 for its column. Rows stay time-aligned, so
   classes at the same hour line up across the three days. The side days are
   toned down so the centre one leads. */
@media (min-width: 992px) {
  .schedule.is-3day:not(.schedule-export) .schedule_panel {
    grid-template-columns: repeat(3, minmax(0, 420px));
    column-gap: 28px;
  }
  .schedule.is-3day:not(.schedule-export) .schedule_section_label {
    grid-column: 1 / -1;
  }
  .schedule.is-3day:not(.schedule-export) .sched-pos-1 { grid-column: 1 !important; }
  .schedule.is-3day:not(.schedule-export) .sched-pos-2 { grid-column: 2 !important; }
  .schedule.is-3day:not(.schedule-export) .sched-pos-3 { grid-column: 3 !important; }

  .schedule.is-3day:not(.schedule-export) .schedule_cell.sched-side {
    opacity: .5;
    transition: opacity var(--fitme-transition);
  }
  .schedule.is-3day:not(.schedule-export) .schedule_cell.sched-side:hover {
    opacity: 1;
  }
  .schedule.is-3day:not(.schedule-export) .schedule_dayhead.sched-side .rounded_frame {
    background: var(--fitme-surface-2);
    color: var(--fitme-text-muted);
  }
  .schedule.is-3day:not(.schedule-export) .schedule_dayhead.sched-pos-2 .rounded_frame {
    background: var(--fitme-accent);
    color: var(--fitme-dark);
  }
  .schedule.is-3day:not(.schedule-export) .schedule_dayhead.sched-side {
    cursor: pointer;
  }
  .schedule.is-3day:not(.schedule-export) .schedule_dayhead.sched-pos-2 {
    gap: 10px;
    align-items: center;
  }
}

/* ── Aula experimental modal ───────────────────────────────────────────────── */
.modal-content.trial-modal {
  background: #fff !important;
  border-radius: var(--fitme-radius);
  overflow: hidden;
  box-shadow: var(--fitme-shadow-lg);
}

.trial-modal-head {
  position: relative;
  background: var(--fitme-dark-2);
  color: #fff;
  padding: 1.75rem 1.75rem 1.5rem;
}

.trial-modal-head h3 {
  margin: 0 0 .4rem;
  font-weight: 900;
  font-size: 1.5rem;
  color: #fff;   /* override the global dark h1–h6 colour (black-on-dark otherwise) */
}

.trial-modal-head p {
  margin: 0;
  color: var(--fitme-ash);
  font-size: .92rem;
}

.trial-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  opacity: .8;
  transition: opacity var(--fitme-transition);
}

.trial-close:hover {
  opacity: 1;
}

.trial-form {
  padding: 1.5rem 1.75rem 1.75rem;
}

.trial-form input,
.trial-form select,
.trial-form textarea {
  width: 100%;
  border: 1px solid var(--fitme-surface-2);
  border-radius: var(--fitme-radius);
  padding: 12px 14px;
  font-size: .95rem;
  color: var(--fitme-text);
  background: #fff;
  transition: box-shadow var(--fitme-transition), border-color var(--fitme-transition);
}

.trial-form input:focus,
.trial-form select:focus,
.trial-form textarea:focus {
  border-color: var(--fitme-accent);
  box-shadow: 0 0 0 3px rgba(var(--fitme-accent-rgb), .25);
}

.trial-form textarea {
  resize: vertical;
}

.trial-form .consent-check {
  margin-bottom: 1rem;
  color: var(--fitme-text-soft);
}

.trial-form .consent-check a {
  color: var(--fitme-text);
}

.trial-form .consent-check a:hover {
  color: var(--fitme-accent-ink);
}

.trial-form .site-btn {
  border: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   Events — homepage banner + landing page (/evento/<slug>)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Active events — featured inside the hero/header ───────────────────────── */
.event-live-dot {
  width: 9px; height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--fitme-accent);
  box-shadow: 0 0 0 0 rgba(var(--fitme-accent-rgb), .7);
  animation: event-pulse 1.8s infinite;
}
@keyframes event-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(var(--fitme-accent-rgb), .7); }
  70%  { box-shadow: 0 0 0 10px rgba(var(--fitme-accent-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--fitme-accent-rgb), 0); }
}

.hero-events {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 1.75rem;
}
.hero-event {
  --ev-accent: var(--fitme-accent);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 16px;
  width: min(640px, 92vw);
  padding: 12px 14px 12px 18px;
  background: rgba(11, 11, 13, .55);
  border: 1.5px solid rgba(var(--fitme-accent-rgb), .55);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-decoration: none;
  text-align: left;
  animation: hero-event-glow 2.8s ease-in-out infinite;
  transition: transform var(--fitme-transition), box-shadow var(--fitme-transition), border-color var(--fitme-transition);
}
/* The event's own image as a frosted (blurred + darkened) backdrop inside the
   pill — only when --ev-img is set; otherwise the translucent dark bg shows. */
.hero-event.has-img::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--ev-img);
  background-size: cover;
  background-position: center;
  filter: blur(6px) saturate(1.15) brightness(.5);
  transform: scale(1.18);   /* hide the blur's transparent edges */
  transition: transform var(--fitme-transition);
}
.hero-event.has-img:hover::before { transform: scale(1.24); }
/* Keep the content above the image layer. */
.hero-event > * { position: relative; z-index: 1; }
@keyframes hero-event-glow {
  0%, 100% { box-shadow: 0 10px 34px rgba(0,0,0,.45), 0 0 18px rgba(var(--fitme-accent-rgb), .14); }
  50%      { box-shadow: 0 10px 34px rgba(0,0,0,.45), 0 0 30px rgba(var(--fitme-accent-rgb), .32); }
}
.hero-event:hover {
  transform: translateY(-2px);
  border-color: var(--ev-accent);
  box-shadow: 0 16px 44px rgba(0, 0, 0, .55), 0 0 34px rgba(var(--fitme-accent-rgb), .38);
}
.hero-event-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--fitme-accent);
  background: rgba(var(--fitme-accent-rgb), .14);
  border-radius: 999px;
}
.hero-event-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.22;
}
.hero-event-title {
  font-size: 1.12rem;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero-event-sub {
  font-size: .9rem;
  color: rgba(255, 255, 255, .72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero-event-go {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  font-size: .92rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--fitme-dark);
  background: var(--ev-accent);
  border-radius: 999px;
}
.hero-event-go i { transition: transform var(--fitme-transition); }
.hero-event:hover .hero-event-go i { transform: translateX(4px); }

@media (max-width: 575px) {
  .hero-event {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    border-radius: 18px;
    gap: 10px;
    padding: 14px;
  }
  .hero-event-text { flex-basis: 100%; align-items: center; }
  .hero-event-title, .hero-event-sub { white-space: normal; }
  .hero-event-go { flex-basis: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-event { animation: none; }
  .event-live-dot { animation: none; }
}

/* ── Staff preview ribbon ──────────────────────────────────────────────────── */
.event-preview-bar {
  position: sticky;
  top: 0;
  z-index: 1080;
  padding: 8px 16px;
  text-align: center;
  font-size: .85rem;
  font-weight: 600;
  color: var(--fitme-text);
  background: #ffd84d;
}

/* ── Landing hero ──────────────────────────────────────────────────────────── */
.event-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 70vh;
  padding: 160px 0 90px;
  background-size: cover;
  background-position: center;
  color: #fff;
}
.event-hero--plain {
  background: linear-gradient(135deg, var(--fitme-dark) 0%, var(--fitme-dark-2) 100%);
}
.event-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,11,13,.35) 0%, rgba(11,11,13,.78) 100%);
}
.event-hero .container { position: relative; z-index: 2; }
.event-hero-inner { max-width: 760px; }
.event-hero-eyebrow {
  display: inline-block;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.event-hero-inner h1 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.08;
  margin: 0 0 14px;
  color: #fff;
}
.event-hero-sub {
  font-size: 1.2rem;
  color: rgba(255,255,255,.85);
  margin-bottom: 20px;
}
.event-hero-meta {
  list-style: none;
  padding: 0;
  margin: 0 0 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
}
.event-hero-meta li {
  font-size: 1rem;
  color: rgba(255,255,255,.9);
}
.event-hero-meta i { margin-right: 8px; opacity: .85; }
.event-hero-cta { border: none; color: var(--fitme-dark) !important; }

/* ── Landing body (admin HTML) ─────────────────────────────────────────────── */
.event-body { padding: 70px 0; background: var(--fitme-white); }
.event-body p { font-size: 1.05rem; line-height: 1.7; color: var(--fitme-text-soft); }
.event-body h2, .event-body h3, .event-body h4 { margin-top: 1.6rem; }
.event-body img { max-width: 100%; height: auto; border-radius: var(--fitme-radius); }

/* ── Lead form ─────────────────────────────────────────────────────────────── */
.event-leadform { padding: 70px 0; background: var(--fitme-surface); }
.event-form { margin-top: 26px; }
.event-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.event-field--full { grid-column: 1 / -1; }
.event-field label {
  display: block;
  font-size: .85rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--fitme-text-soft);
}
.event-field input,
.event-field textarea {
  width: 100%;
  padding: 12px 14px;
  font-size: 1rem;
  background: var(--fitme-white);
  border: 1px solid var(--fitme-surface-dark);
  border-radius: var(--fitme-radius);
  color: var(--fitme-text);
}
.event-field input:focus,
.event-field textarea:focus {
  outline: none;
  border-color: var(--fitme-accent);
  box-shadow: 0 0 0 3px rgba(var(--fitme-accent-rgb), .2);
}
/* honeypot — visually hidden, kept in the layout flow for bots */
.event-hp {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.event-alert {
  padding: 12px 16px;
  margin-bottom: 16px;
  border-radius: var(--fitme-radius);
  font-size: .95rem;
}
.event-alert--ok  { background: #e6f6ea; color: #1c6b34; border: 1px solid #9fdcb0; }
.event-alert--err { background: #fdecec; color: #a32424; border: 1px solid #f1b5b5; }
.event-consent {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 16px;
  font-size: .88rem;
  color: var(--fitme-text-soft);
  cursor: pointer;
}
.event-consent input { margin-top: 3px; flex: 0 0 auto; }
.event-consent a { color: var(--fitme-accent-ink); text-decoration: underline; }
@media (max-width: 575px) {
  .event-form-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Equipa — título + cartão de detalhe horizontal
   Default card = photo + name + title. The detail card is laid OVER the grid
   (absolute), so opening it never reflows the team wall. Desktop (fine pointer)
   opens it on hover / keyboard focus; touch opens it on tap (.is-open, main.js),
   where it becomes a centred fixed card with its own close button.
   ══════════════════════════════════════════════════════════════════════════ */
/* content-visibility:auto implies paint containment, which would clip the
   overlay at the section edge and trap position:fixed inside the section. */
#equipa.trainers-section {
  content-visibility: visible;
  contain: none;
  position: relative;
  z-index: 3;             /* hover card may overhang the next section */
}

/* While a card is open on touch, lift the whole section over the navbar and
   the mobile CTA bar so the dimmed backdrop covers everything. */
#equipa.trainers-section.has-open-detail {
  z-index: 1100;
}

/* The global scroll-reveal keeps transform:translateY(0) applied (fill
   forwards), and any transform makes an element the containing block for
   position:fixed descendants — which would pin the mobile detail card inside
   its own tile. Reveal the team with opacity only. */
#equipa.revealed,
#equipa .trainer-item.revealed,
#modalidades.revealed {
  animation-name: fitmeFadeOnly;
}

@keyframes fitmeFadeOnly {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.trainer-item {
  position: relative;
}

/* The name used to be the tile's last child and got its size from the
   `.trainer-item>*:last-child` rule; pin it so it stays the same whether or
   not a title follows it. */
.trainers-section .trainer-item h3,
.trainers-section .trainer-item h4 {
  font-size: .9rem;
}

/* …and keep that same rule (white, .9rem) off the detail card when it is the
   last child. */
.trainers-section .trainer-item>.trainer-detail {
  color: var(--fitme-text);
  font-size: 1rem;
}

.trainers-section .trainer-item p.trainer-title {
  margin: 0;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--fitme-accent);
}

.trainer-item.has-detail {
  cursor: pointer;
  outline: none;
}

/* On tiles with a card, the card IS the hover effect: keep the photo in its
   resting tilt (the card starts from exactly that pose) and hide it while the
   card covers it, bringing it back only once the card has folded back in. */
#powerRotation>div:nth-child(odd) .trainer-item.has-detail .trainer-pic:hover { transform: rotate(-3deg); }
#powerRotation>div:nth-child(even) .trainer-item.has-detail .trainer-pic:hover { transform: rotate(3deg); }

.trainer-item.has-detail .trainer-pic {
  transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), box-shadow var(--fitme-transition), visibility 0s linear .38s;
}

.trainer-item.has-detail.is-open .trainer-pic {
  visibility: hidden;
  transition-delay: 0s;
}

@media (max-width: 767px), (hover: none) {
  /* Touch: the card flies to the centre, so leave the tile photo in place. */
  .trainer-item.has-detail.is-open .trainer-pic { visibility: visible; }
}

/* ── Detail card: grows out of the tile's own photo ─────────────────────────
   main.js places the card so its photo column sits exactly on the tile photo
   (--td-x/--td-y, size --td-pw/--td-ph) with the tile's tilt (--td-rot). Closed,
   the clip-path shows only that photo square, so it reads as the tile itself;
   opening straightens it and unclips it sideways — the card "stretches" out of
   the photo and the text fades in behind the edge. .td-flip mirrors it for
   right-hand tiles (photo on the right, card stretching left). While open, the
   mouse position feeds a small 3D tilt + drift (--td-rx/--td-ry/--td-mx/--td-my).
   Both transform lists have the same functions so they interpolate. */
.trainer-detail {
  position: absolute;
  z-index: 30;
  left: var(--td-x, 0px);
  top: var(--td-y, 0px);
  width: var(--td-w, 560px);
  min-height: var(--td-ph, 200px);
  display: flex;
  text-align: left;
  background: #fff;
  color: var(--fitme-text);
  border-radius: 6px;
  /* Discreet lift (a little deeper than the modalidades one: it sits on the
     dark grey team backdrop). Visible only because the open clip-path reaches
     40px past the card. */
  box-shadow: 0 12px 30px rgba(0, 0, 0, .32), 0 2px 6px rgba(0, 0, 0, .18);
  overflow: hidden;
  /* px from main.js: Chrome won't interpolate inset() with calc(100% - …). */
  clip-path: inset(0px var(--td-cx, 360px) var(--td-cy, 0px) 0px round 2px);
  transform-origin: calc(var(--td-pw, 200px) / 2) calc(var(--td-ph, 200px) / 2);
  transform: perspective(900px) rotateX(0deg) rotateY(0deg) translate(0px, 0px) rotate(var(--td-rot, 0deg));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    clip-path .38s cubic-bezier(.4, 0, .2, 1),
    transform .38s cubic-bezier(.4, 0, .2, 1),
    opacity .12s ease .26s,
    visibility 0s linear .38s;
}

.trainer-detail.td-flip {
  flex-direction: row-reverse;
  clip-path: inset(0px 0px var(--td-cy, 0px) var(--td-cx, 360px) round 2px);
  transform-origin: calc(100% - var(--td-pw, 200px) / 2) calc(var(--td-ph, 200px) / 2);
}

.trainer-item.is-open .trainer-detail {
  clip-path: inset(-40px -40px -40px -40px round 6px);
  transform: perspective(900px) rotateX(var(--td-rx, 0deg)) rotateY(var(--td-ry, 0deg)) translate(var(--td-mx, 0px), var(--td-my, 0px)) rotate(0deg);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    clip-path .55s cubic-bezier(.2, .9, .25, 1),
    transform .6s cubic-bezier(.34, 1.35, .64, 1),
    opacity 0s,
    visibility 0s;
}

/* After the opening move, follow the mouse with a short, soft transition. */
.trainer-item.is-open .trainer-detail.td-tracking {
  transition:
    clip-path .55s cubic-bezier(.2, .9, .25, 1),
    transform .18s ease-out,
    opacity 0s,
    visibility 0s;
}

.trainer-item.is-open { z-index: 31; }

/* ── Galeria — endless horizontal strip + lightbox (site/includes/gallery.php) ──
   Full-height photos alternate with 2x2 grids of four. The strip is rendered
   --gal-copies times and slides by exactly one copy, so the loop is seamless;
   it pauses on hover / focus. With "reduce motion" it is a plain swipeable row. */
.gal-wrap {
  --gal-h: 420px;
  --gal-gap: 12px;
  overflow: hidden;
  margin: 0 0 70px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.gal-track {
  display: flex;
  width: max-content;
  animation: gal-scroll var(--gal-dur, 60s) linear infinite;
  will-change: transform;
}
.gal-marquee:hover .gal-track,
.gal-marquee:focus-within .gal-track { animation-play-state: paused; }
@keyframes gal-scroll {
  to { transform: translateX(calc(-100% / var(--gal-copies, 2))); }
}
.gal-set { display: flex; flex: 0 0 auto; }
.gal-unit {
  flex: 0 0 auto;
  height: var(--gal-h);
  margin-right: var(--gal-gap);
}
.gal-unit--full { width: calc(var(--gal-h) * .82); }
.gal-unit--grid {
  width: calc(var(--gal-h) * 1.05);
  display: grid;
  grid-template: 1fr 1fr / 1fr 1fr;
  gap: var(--gal-gap);
}
.gal-tile { position: relative; margin: 0; min-width: 0; min-height: 0; height: 100%; }

@media (max-width: 991px) { .gal-wrap { --gal-h: 340px; } }
@media (max-width: 575px) { .gal-wrap { --gal-h: 260px; --gal-gap: 8px; margin-bottom: 48px; } }
@media (prefers-reduced-motion: reduce) {
  .gal-wrap { overflow-x: auto; -webkit-mask-image: none; mask-image: none; scrollbar-width: thin; }
  .gal-track { animation: none; }
  .gal-set[aria-hidden="true"] { display: none; }
}

.gal-link {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--fitme-radius);   /* brand: square-ish corners */
  position: relative;
  background: var(--fitme-surface-2);
  cursor: zoom-in;
}

.gal-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.2, .8, .2, 1), filter .4s ease;
}

/* Accent frame + slow zoom on hover / focus. */
.gal-link::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 0 var(--fitme-accent);
  transition: box-shadow .3s ease;
  pointer-events: none;
}

.gal-link:hover img,
.gal-link:focus-visible img {
  transform: scale(1.06);
  filter: brightness(1.05);
}

/* Hover: the frame becomes the spinning brand-colour edge (same as buttons and
   Mensalidades cards): ::after = 3px ring cut out with a mask, ::before = soft
   inner glow. */
.gal-link::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 22px 2px rgba(var(--fitme-accent-rgb), .5);
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
  z-index: 1;
}
.gal-link::after {
  z-index: 2;
  padding: 3px;
  box-shadow: none;
  background: conic-gradient(from var(--pc-a), rgba(var(--fitme-accent-rgb), .35) 0deg, rgba(var(--fitme-accent-rgb), .35) 150deg,
      var(--fitme-accent) 250deg, #f4ff9c 300deg, var(--fitme-accent) 330deg,
      rgba(var(--fitme-accent-rgb), .35) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  transition: opacity .45s ease;
}
.gal-link:hover::before,
.gal-link:focus-visible::before { opacity: 1; }
.gal-link:hover::after,
.gal-link:focus-visible::after { opacity: 1; animation: pc-spin 3.2s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .gal-link:hover::after { animation: none; }
}

/* ── Photos at rest: 10% desaturated (team photos also get a light brand-colour
   tint), both lifted on hover. ──────────────────────────────────────────── */
.gal-link img { filter: saturate(.9); }
.gal-link:hover img,
.gal-link:focus-visible img { filter: saturate(1) brightness(1.05); }


.trainer-item .trainer-pic img { filter: saturate(.9); transition: filter .45s ease; }
.trainer-item .trainer-pic::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: color-mix(in srgb, var(--fitme-accent) 14%, #fff);
  mix-blend-mode: multiply;
  transition: opacity .45s ease;
  pointer-events: none;
}
.trainer-item .trainer-pic:hover img { filter: saturate(1); }
.trainer-item .trainer-pic:hover::before { opacity: 0; }

/* Official YOURFIT lock-ups are wide (≈4.5:1) PNGs. In the square icon box they
   were squeezed to 44px wide while keeping their height attribute, so they came
   out stretched and unreadable. Give their box a wide landscape shape and keep
   the natural aspect ratio. */
.icon-box-item .ib-icon:has(img[src*="yourfit"]),
.md-card .ib-icon:has(img[src*="yourfit"]) {
  width: 148px;
  max-width: 100%;
}
.icon-box-item .ib-icon img[src*="yourfit"],
.md-card .ib-icon img[src*="yourfit"] {
  width: 124px;
  height: auto;
  max-width: 100%;
  max-height: none;
  object-fit: contain;
}
/* At rest the YOURFIT lock-ups are black like every other icon; their own
   (certified) colours come back on hover, on the white face. */
.icon-box-item .ib-icon img[src*="yourfit"],
.md-card .ib-icon img[src*="yourfit"] {
  filter: brightness(0);
  transition: filter .45s ease;
}
@media (max-width: 767px) {
  .icon-box-item .ib-icon:has(img[src*="yourfit"]),
  .md-card .ib-icon:has(img[src*="yourfit"]) { width: 128px; }
  .icon-box-item .ib-icon img[src*="yourfit"],
  .md-card .ib-icon img[src*="yourfit"] { width: 106px; }
}

/* Lightbox */
.gal-lightbox {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
}

.gal-lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.gal-lightbox::backdrop {
  background: rgba(11, 11, 13, .92);
}

.gal-lb-figure {
  margin: 0;
  max-width: calc(100vw - 140px);
  max-height: calc(100dvh - 80px);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gal-lb-figure img {
  max-width: 100%;
  max-height: calc(100dvh - 110px);
  object-fit: contain;
  border-radius: var(--fitme-radius);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
  animation: gal-in .35s ease;
}

@keyframes gal-in {
  from { opacity: 0; transform: scale(.97); }
  to   { opacity: 1; transform: none; }
}

.gal-lb-count {
  margin-top: 10px;
  font-size: .85rem;
  color: var(--fitme-ash);
  letter-spacing: .08em;
}

.gal-lb-close,
.gal-lb-nav {
  position: absolute;
  border: 0;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  cursor: pointer;
  transition: background var(--fitme-transition), color var(--fitme-transition);
}

.gal-lb-close:hover,
.gal-lb-nav:hover {
  background: var(--fitme-accent);
  color: var(--fitme-dark);
}

.gal-lb-close {
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 1.8rem;
  line-height: 1;
}

.gal-lb-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 1.1rem;
}

.gal-lb-prev { left: 20px; }
.gal-lb-next { right: 20px; }

@media (max-width: 575px) {
  .gal-lb-figure { max-width: calc(100vw - 24px); }
  .gal-lb-nav { top: auto; bottom: 18px; transform: none; }
  .gal-lb-prev { left: calc(50% - 60px); }
  .gal-lb-next { right: calc(50% - 60px); }
}

@media (prefers-reduced-motion: reduce) {
  .gal-link img, .gal-lb-figure img { transition: none; animation: none; }
}

/* ── "In the middle of the screen" = hovered ─────────────────────────────────────
   main.js adds .is-centered to the photo / card / icon that sits on the vertical
   middle of the viewport (and, inside the sliding strips, on the horizontal
   middle too), so scrolling past shows the same state as a hover. These mirror
   the :hover rules above. ─────────────────────────────────────────────────── */
.gal-tile.is-centered .gal-link img { transform: scale(1.06); filter: saturate(1) brightness(1.05); }
.gal-tile.is-centered .gal-link::before { opacity: 1; }
.gal-tile.is-centered .gal-link::after { opacity: 1; animation: pc-spin 3.2s linear infinite; }

.trainer-item .trainer-pic.is-centered,
#powerRotation>div:nth-child(even) .trainer-pic.is-centered {
  transform: rotate(0deg) translateY(-8px) scale(1.05);
  border-color: transparent;
  background:
    linear-gradient(var(--fitme-dark), var(--fitme-dark)) padding-box,
    conic-gradient(from var(--pc-a), rgba(var(--fitme-accent-rgb), .35) 0deg, rgba(var(--fitme-accent-rgb), .35) 150deg,
        var(--fitme-accent) 250deg, #f4ff9c 300deg, var(--fitme-accent) 330deg,
        rgba(var(--fitme-accent-rgb), .35) 360deg) border-box;
  box-shadow: 0 0 18px 2px rgba(var(--fitme-accent-rgb), .4), var(--fitme-shadow-lg);
  animation: pc-spin 3.2s linear infinite;
}
.trainer-item .trainer-pic.is-centered img { filter: saturate(1); }
.trainer-item .trainer-pic.is-centered::before { opacity: 0; }

.icon-box-item.is-centered { transform: translateY(-3px); }
.icon-box-item.is-centered .ib-icon {
  background: color-mix(in srgb, var(--fitme-accent) 10%, #000);
  color: #fff;
  transform: scale(1.06);
  box-shadow: 0 0 16px 1px rgba(var(--fitme-accent-rgb), .4);
}
.icon-box-item.is-centered .ib-icon::after { opacity: 1; animation: pc-spin 3.2s linear infinite; }
.icon-box-item.is-centered .ib-icon svg.mi { color: #fff; }
.icon-box-item.is-centered .ib-icon img { filter: brightness(0) invert(1); mix-blend-mode: normal; }
.icon-box-item.is-centered .ib-icon:has(img[src*="yourfit"]) { background: #fff; }
.icon-box-item.is-centered .ib-icon img[src*="yourfit"] { filter: none; }

.price-card.is-centered { --pc-lift: -4px; --pc-bw: 2px; box-shadow: var(--fitme-shadow-lg); }
.price-card.is-centered::before {
  background:
    linear-gradient(var(--pc-face), var(--pc-face)) padding-box,
    conic-gradient(from var(--pc-a) at var(--pc-x, 50%) var(--pc-y, 50%),
        rgba(var(--fitme-accent-rgb), 0) 0deg, rgba(var(--fitme-accent-rgb), 0) 150deg,
        var(--fitme-accent) 250deg, #f4ff9c 300deg, var(--fitme-accent) 330deg,
        rgba(var(--fitme-accent-rgb), 0) 360deg) border-box;
  animation: pc-spin 3.2s linear infinite;
}
.price-card.is-centered::after { opacity: .75; animation: pc-spin 3.2s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .gal-tile.is-centered .gal-link::after,
  .trainer-item .trainer-pic.is-centered,
  .icon-box-item.is-centered .ib-icon::after,
  .price-card.is-centered::before, .price-card.is-centered::after { animation: none; }
}