/* Events Section - Brutal Style */
.bw-section{padding:3rem 0}
.bw-container{max-width:1100px;margin:0 auto;padding:0 2rem}
.bw-eventos h3{font-family:var(--font-heading);font-size:1.5rem;font-weight:900;text-transform:uppercase;margin:2rem 0 1.5rem;letter-spacing:1px}
.bw-eventos .grid{display:grid;gap:2rem;grid-template-columns:1fr}
@media(min-width:720px){.bw-eventos .grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.bw-eventos .grid{grid-template-columns:repeat(3,1fr)}}
.bw-eventos .card{border:4px solid #000;background:#fff;overflow:hidden;box-shadow:8px 8px 0 #000;transition:transform 0.2s ease,box-shadow 0.2s ease;position:relative}
.bw-eventos .card:hover{transform:translate(-4px,-4px);box-shadow:12px 12px 0 #000}
.bw-eventos .card img{width:100%;height:200px;object-fit:cover;display:block;border-bottom:4px solid #000}
.bw-eventos .card-body{padding:1.5rem}
.bw-eventos .card-body h4{font-family:var(--font-heading);font-size:1.25rem;font-weight:900;text-transform:uppercase;margin:0.5rem 0 0.75rem;letter-spacing:0.5px}
.bw-eventos .card-body p{margin:0 0 1rem;color:#666;line-height:1.5}
.bw-eventos .meta{display:flex;gap:0.5rem;align-items:center;flex-wrap:wrap;margin-bottom:0.5rem}
.bw-eventos .date{font-family:var(--font-heading);font-weight:700;font-size:0.875rem;text-transform:uppercase;letter-spacing:0.5px}
.bw-eventos .badge{display:inline-block;font-size:0.75rem;font-weight:700;padding:0.25rem 0.75rem;border:2px solid #000;text-transform:uppercase;letter-spacing:0.5px;background:#fff}
.bw-eventos .badge-live{background:#FFD700;color:#000;border-color:#000}
.bw-eventos .badge-done{background:#f5f5f5;color:#666;border-color:#666}
.bw-eventos .btn{display:inline-block;padding:0.75rem 1.5rem;border:3px solid #000;background:#FFD700;color:#000;font-family:var(--font-heading);font-weight:700;font-size:0.875rem;text-decoration:none;text-transform:uppercase;letter-spacing:0.5px;transition:all 0.2s ease;cursor:pointer}
.bw-eventos .btn:hover{background:#000;color:#FFD700;transform:translate(-2px,-2px);box-shadow:4px 4px 0 #FFD700}
.bw-eventos .btn-ghost{background:#fff;border-color:#666;color:#000}
.bw-eventos .btn-ghost:hover{background:#000;color:#fff;border-color:#000;box-shadow:4px 4px 0 #666}
.bw-eventos .event-stamp{position:absolute;top:16px;right:16px;background:#dc2626;color:#fff;font-family:var(--font-heading);font-weight:900;font-size:0.7rem;padding:6px 14px;border:3px solid #dc2626;border-radius:4px;text-transform:uppercase;letter-spacing:1.2px;transform:rotate(3deg);box-shadow:0 3px 10px rgba(220,38,38,.5);z-index:10}
.bw-eventos .future-events-box{border:4px solid #000;background:#fff;padding:2rem;box-shadow:8px 8px 0 #000}
.bw-eventos .future-events-box h4{font-family:var(--font-heading);font-size:1.25rem;font-weight:900;text-transform:uppercase;margin:0 0 1.5rem;letter-spacing:0.5px;border-bottom:3px solid #000;padding-bottom:0.75rem}
.bw-eventos .future-list{list-style:none;margin:0;padding:0;display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:640px){.bw-eventos .future-list{grid-template-columns:repeat(2,1fr)}}
.bw-eventos .future-list li{display:flex;align-items:flex-start;gap:0.75rem;padding:0.75rem;border:2px solid #000;background:#fff;transition:all 0.2s ease}
.bw-eventos .future-list li:hover{background:#FFD700;transform:translateX(4px)}
.bw-eventos .future-list .icon{font-size:1.5rem;flex-shrink:0;line-height:1}
.bw-eventos .future-list .text{flex:1}
.bw-eventos .future-list .text strong{font-family:var(--font-heading);font-size:0.9rem;font-weight:900;text-transform:uppercase;display:block;margin-bottom:0.25rem;letter-spacing:0.3px}
.bw-eventos .future-list .text span{font-size:0.85rem;color:#666;line-height:1.3}
@media(max-width:768px){.bw-container{padding:0 1rem}.bw-eventos h3{font-size:1.25rem;margin:1.5rem 0 1rem}.bw-eventos .card{box-shadow:6px 6px 0 #000}.bw-eventos .card:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 #000}.bw-eventos .card-body{padding:1rem}.bw-eventos .btn{padding:0.625rem 1.25rem;font-size:0.8125rem}.bw-eventos .event-stamp{font-size:0.65rem;padding:5px 10px;top:12px;right:12px}}
/* CSS Reset and Base Styles */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* Colors */
  --color-primary: #000000;    /* Black */
  --color-secondary: #666666;  /* Gray */
  --color-accent: #FFD700;     /* Yellow accent instead of blue */
  --color-background: #FFFFFF; /* White background */
  --color-text: #000000;       /* Black text */
  --color-text-dark: #FFFFFF;  /* White text */
  --color-border: #000000;     /* Black borders */
  
  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 2rem;
  --spacing-lg: 4rem;
  --spacing-xl: 8rem;
  
  /* Fonts */
  --font-primary: 'Space Mono', monospace;
  --font-heading: 'Work Sans', sans-serif;
  
  /* Neobrutalist Color Palette */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-gray: #666666;
  --color-light: #f5f5f5;
  --color-dark-gray: #222222;
  --color-water-light: #FFFDF0;  /* Very light yellow instead of light blue */
  --color-water-dark: #000000;   /* Black instead of dark blue */
  
  /* Typography */
  --font-body: 'Space Mono', monospace;
  --font-secondary: 'Space Mono', monospace;
  
  /* Other */
  --border-thick: 4px solid var(--color-black);
  --shadow-offset: 8px;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  line-height: 1.6;
  color: var(--color-black);
  background-color: var(--color-white);
  overflow-x: hidden;
  padding-top: 0;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s;
}

a:hover {
  transform: translate(-2px, -2px);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
}

/* Layout */
.header,
.hero,
.about,
.classes,
.trainers,
.pricing,
.contact,
.footer {
  width: 100%;
}

/* Scroll offset for sticky header navigation */
section {
  scroll-margin-top: 120px;
}

@media (max-width: 768px) {
  section {
    scroll-margin-top: 140px;
  }
}

@media (max-width: 480px) {
  section {
    scroll-margin-top: 160px;
  }
}

.header__container,
.hero__container,
.about__container,
.classes__container,
.trainers__container,
.pricing__container,
.contact__container,
.footer__container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--spacing-md) 0;
  box-sizing: border-box;
}

.about__container {
  overflow: visible;
}

/* OLD ABOUT CONTENT - DISABLED FOR NEW PILLAR DESIGN */
/*
.about__content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg);
  width: 100%;
  box-sizing: border-box;
}
*/

/* OVERRIDE OLD ABOUT STYLES */
.about__content {
  display: block !important;
  grid-template-columns: none !important;
  gap: 0 !important;
}

.about__text {
  padding-right: var(--spacing-md);
  width: 100%;
  box-sizing: border-box;
}

/* About Secondary Text - Simple Style */
.about__secondary {
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.6;
  color: #333333;
  margin-bottom: var(--spacing-lg);
}

.about__lead {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: var(--spacing-md);
  color: #000000;
  line-height: 1.6;
}

.about__text p {
  margin-bottom: var(--spacing-md);
}

.about__social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-sm);
  margin: var(--spacing-lg) 0;
  padding: var(--spacing-sm);
  background-color: var(--color-accent);
  border: var(--border-thick);
  box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--color-primary);
  width: 100%;
  box-sizing: border-box;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.about__social-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: var(--color-primary);
  padding: var(--spacing-sm);
  transition: all 0.3s;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  flex: 0 0 calc(50% - var(--spacing-sm)/2);
  min-width: 140px;
}

.about__social-item:nth-child(3) {
  flex: 0 0 calc(50% - var(--spacing-sm)/2);
  margin: 0 auto;
}

.about__social-item:hover {
  transform: translate(-2px, -2px);
  background-color: var(--color-primary);
  color: var(--color-accent);
  text-decoration: none;
}

.about__social-item:hover i,
.about__social-item:hover .about__social-number,
.about__social-item:hover .about__social-label {
  color: var(--color-accent);
}

.about__social-item i {
  font-size: 2.5rem;
  margin-bottom: var(--spacing-xs);
  color: var(--color-primary);
}

.about__social-number {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 900;
  line-height: 1;
  margin-bottom: var(--spacing-xs);
  color: var(--color-primary);
}

.about__social-label {
  font-size: 1rem;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--color-primary);
  font-family: var(--font-heading);
}

.about__stats {
  display: flex;
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
  width: 100%;
  box-sizing: border-box;
}

.about__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 2px solid var(--color-primary);
  padding: var(--spacing-md);
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: var(--color-background);
  width: 100%;
  box-sizing: border-box;
}

.about__stat:hover {
  transform: translate(-4px, -4px);
  box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--color-primary);
  background-color: var(--color-primary);
}

.about__stat-number {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--color-primary);
  transition: color 0.3s ease;
}

.about__stat-label {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-primary);
  transition: color 0.3s ease;
}

.about__stat:hover .about__stat-number,
.about__stat:hover .about__stat-label {
  color: var(--color-accent);
}

.about__images {
  position: relative;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}

.about__image-container {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 400px;
  box-sizing: border-box;
  margin-top: var(--spacing-lg);
}

.about__image {
  position: absolute;
  border: var(--border-thick);
  box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--color-primary);
  background-color: var(--color-background);
  overflow: hidden;
  transition: transform 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 500px;
}

.about__image:hover {
  transform: translate(-4px, -4px);
  box-shadow: calc(var(--shadow-offset) + 4px) calc(var(--shadow-offset) + 4px) 0 var(--color-primary);
}

.about__actual-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.about__actual-image--contain {
  object-fit: contain;
  padding: var(--spacing-md);
}

.about__image--1 {
  top: 0;
  right: 0;
  width: 50%;
  height: 300px;
  z-index: 1;
}

.about__image--2 {
  bottom: 0;
  left: 0;
  width: 50%;
  height: 300px;
  z-index: 2;
  background-color: var(--color-accent);
}

/* Pillars Carousel - Brutalist Design */
.pillars-carousel {
  margin: var(--spacing-xl) 0;
  position: relative;
  width: 100%;
  overflow: hidden;
}

.carousel-container {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  overflow: hidden !important;
  background-color: #FFFFFF;
  border: 8px solid #000000;
  box-shadow: 16px 16px 0 rgba(0, 0, 0, 0.3);
}

.carousel-track {
  display: flex;
  transition: transform 0.5s ease;
  width: 600%; /* 6 slides × 100% */
  height: auto;
  overflow: hidden;
}

.carousel-slide {
  min-width: 16.67% !important; /* 100% / 6 slides */
  width: 16.67% !important;
  flex: 0 0 16.67% !important;
  position: relative;
  padding: var(--spacing-lg) !important;
  border: none !important;
  box-shadow: none !important;
  min-height: 500px !important;
  display: flex !important;
  align-items: stretch !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.carousel-slide .pillar-content {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  word-wrap: break-word !important;
  box-sizing: border-box !important;
}

/* Manter os estilos originais dos pilares no carousel */
.carousel-slide.pillar-frame--black {
  background-color: #FFFFFF !important;
}

.carousel-slide.pillar-frame--yellow {
  background-color: #FFD700 !important;
}

.carousel-slide.pillar-frame--yellow .pillar-content {
  background-color: #FFFFFF !important;
  padding: var(--spacing-md) !important;
  border: 4px solid #000000 !important;
  width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.carousel-slide.pillar-frame--gray {
  background-color: #666666 !important;
}

.carousel-slide.pillar-frame--gray .pillar-content {
  background-color: #FFFFFF !important;
  padding: var(--spacing-md) !important;
  border: 4px solid #000000 !important;
  width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.carousel-slide.pillar-frame--white {
  background-color: #000000 !important;
}

.carousel-slide.pillar-frame--white .pillar-content {
  background-color: #000000 !important;
  padding: var(--spacing-md) !important;
  border: 4px solid #FFFFFF !important;
  color: #FFFFFF !important;
  width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.carousel-slide.pillar-frame--red {
  background-color: #FFFFFF !important;
}

.carousel-slide.pillar-frame--red .pillar-content {
  background-color: #999999 !important;
  padding: var(--spacing-md) !important;
  border: 4px solid #FFD700 !important;
  color: #FFFFFF !important;
  width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.carousel-slide.pillar-frame--blue {
  background-color: #0088CC !important;
}

.carousel-slide.pillar-frame--blue .pillar-content {
  background-color: #FFFFFF !important;
  padding: var(--spacing-md) !important;
  border: 4px solid #000000 !important;
  width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Botões de Navegação */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  height: 60px;
  background-color: #000000;
  color: #FFFFFF;
  border: 4px solid #000000;
  font-size: 2rem;
  font-weight: 900;
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s ease;
  font-family: var(--font-heading);
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-btn:hover {
  background-color: #FFD700;
  color: #000000;
  transform: translateY(-50%) translate(-2px, -2px);
  box-shadow: 4px 4px 0 #000000;
}

.carousel-btn:active {
  transform: translateY(-50%) translate(2px, 2px);
  box-shadow: none;
}

.carousel-btn--prev {
  left: -45px;
}

.carousel-btn--next {
  right: -45px;
}

/* Indicadores */
.carousel-indicators {
  display: flex;
  justify-content: center;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-lg);
  padding: var(--spacing-sm);
}

.indicator {
  width: 60px;
  height: 20px;
  background-color: #666666;
  border: 3px solid #000000;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.indicator::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000000;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}

.indicator.active::before {
  transform: translateX(0);
}

.indicator:hover {
  background-color: #FFD700;
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 #000000;
}

/* Manter todos os estilos dos pilares originais */
.about .pillar-content {
  text-align: left !important;
  overflow: hidden !important;
  word-wrap: break-word !important;
}

.about .pillar-number {
  font-family: var(--font-heading) !important;
  font-size: 5.5rem !important;  /* Increased from 4.5rem */
  font-weight: 900 !important;
  color: #000000 !important;
  margin-bottom: var(--spacing-sm) !important;
  line-height: 1 !important;
  text-shadow: 2px 2px 0 #FFFFFF !important;
}

.about .pillar-frame--yellow .pillar-number {
  color: #FFD700 !important;
  text-shadow: 2px 2px 0 #000000 !important;
}

.about .pillar-frame--gray .pillar-number {
  color: #666666 !important;
  text-shadow: 2px 2px 0 #FFFFFF !important;
}

.about .pillar-frame--white .pillar-number {
  color: #FFFFFF !important;
  text-shadow: 2px 2px 0 #000000 !important;
}

.about .pillar-title {
  font-family: var(--font-heading) !important;
  font-size: 2.2rem !important;  /* Increased from 1.8rem */
  font-weight: 900 !important;
  margin-bottom: var(--spacing-xs) !important;
  text-transform: uppercase !important;
  color: #000000 !important;
  line-height: 1.2 !important;
  word-wrap: break-word !important;
}

.about .pillar-frame--white .pillar-title {
  color: #FFFFFF !important;
}

.about .pillar-subtitle {
  font-family: var(--font-heading) !important;
  font-size: 1.4rem !important;  /* Increased from 1.1rem */
  font-weight: 700 !important;
  margin-bottom: var(--spacing-md) !important;
  text-transform: uppercase !important;
  color: #666666 !important;
  line-height: 1.3 !important;
  word-wrap: break-word !important;
}

.about .pillar-frame--white .pillar-subtitle {
  color: #FFD700 !important;
}

.about .pillar-text {
  font-size: 1.1rem !important;  /* Increased from 0.95rem */
  line-height: 1.5 !important;
  margin-bottom: var(--spacing-md) !important;
  color: #000000 !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

.about .pillar-frame--white .pillar-text {
  color: #FFFFFF !important;
}

.about .pillar-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--spacing-xs) !important;
  margin-bottom: var(--spacing-md) !important;
}

.about .pillar-tags span {
  background-color: #000000 !important;
  color: #FFFFFF !important;
  padding: var(--spacing-xs) var(--spacing-sm) !important;
  font-size: 0.9rem !important;  /* Increased from 0.75rem */
  font-weight: 700 !important;
  text-transform: uppercase !important;
  border: 2px solid #000000 !important;
  white-space: nowrap !important;
}

.about .pillar-frame--yellow .pillar-tags span {
  background-color: #FFD700 !important;
  color: #000000 !important;
  border-color: #000000 !important;
}

.about .pillar-frame--gray .pillar-tags span {
  background-color: #666666 !important;
  color: #FFFFFF !important;
  border-color: #000000 !important;
}

.about .pillar-frame--white .pillar-tags span {
  background-color: #FFFFFF !important;
  color: #000000 !important;
  border-color: #FFFFFF !important;
}

.about .pillar-equipment {
  font-size: 0.95rem !important;  /* Increased from 0.8rem */
  font-weight: 700 !important;
  color: #666666 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  margin-bottom: var(--spacing-md) !important;
  border-top: 2px solid #000000 !important;
  padding-top: var(--spacing-sm) !important;
  line-height: 1.4 !important;
  word-wrap: break-word !important;
}

.about .pillar-frame--white .pillar-equipment {
  color: #FFD700 !important;
  border-top-color: #FFFFFF !important;
}

.about .pillar-highlight {
  background-color: #000000 !important;
  color: #FFFFFF !important;
  padding: var(--spacing-sm) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  font-size: 0.95rem !important;  /* Increased from 0.8rem */
  border: 3px solid #000000 !important;
  text-align: center !important;
  line-height: 1.3 !important;
  word-wrap: break-word !important;
}

.about .pillar-frame--yellow .pillar-highlight {
  background-color: #FFD700 !important;
  color: #000000 !important;
  border-color: #000000 !important;
}

.about .pillar-frame--gray .pillar-highlight {
  background-color: #666666 !important;
  color: #FFFFFF !important;
  border-color: #000000 !important;
}

.about .pillar-frame--white .pillar-highlight {
  background-color: #FFFFFF !important;
  color: #000000 !important;
  border-color: #FFFFFF !important;
}

/* Mobile Triangle Layout */
@media (max-width: 768px) {
  .about__social {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: var(--spacing-sm);
    justify-items: center;
    max-width: 400px;
  }
  
  .about__social-item {
    flex: none;
    width: 100%;
    max-width: 160px;
  }
  
  .about__social-item:nth-child(3) {
    grid-column: 1 / -1;
    justify-self: center;
    max-width: 160px;
  }
}

@media (max-width: 480px) {
  .about__social {
    max-width: 350px;
    gap: var(--spacing-xs);
  }
  
  .about__social-item {
    max-width: 140px;
    padding: var(--spacing-xs);
  }
  
  .about__social-item:nth-child(3) {
    max-width: 140px;
  }
}

/* Classes Section */
.classes {
  background-color: #000000;
  padding: var(--spacing-xl) 0;
  color: var(--color-white);
}

.classes__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--spacing-md);
}

.class-card {
  background-color: var(--color-background);
  border: 2px solid var(--color-primary);
  box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--color-primary);
  overflow: hidden;
  color: var(--color-text);
  transition: transform 0.3s;
}

.class-card:hover {
  transform: translate(-4px, -4px);
  border-color: var(--color-accent);
}

.class-card__image {
  height: 200px;
  background-size: cover;
  background-position: center;
  border-bottom: var(--border-thick);
}

.class-card__image--strength {
  background-image: url('../images/general/7c18eef0-2694-4241-aadd-2e9fa2d0d8ae.png');
}

.class-card__image--conditioning {
  background-image: url('../images/general/d88af4ef-e380-4b56-96c2-71197a7a6f72.png');
}

.class-card__image--powerlifting {
  background-image: url('../images/general/ccd81ca1-257a-4edf-b66c-ce2498a30dfa.png');
}

.class-card__image--mobility {
  background-image: url('../images/general/7b76cb8d-f94f-46be-be70-b470f40b6856.png');
}

.class-card__content {
  padding: var(--spacing-md);
}

.class-card__title {
  font-size: 1.5rem;
  margin-bottom: var(--spacing-sm);
}

.class-card__description {
  margin-bottom: var(--spacing-md);
}

.class-card__details {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--spacing-md);
  font-weight: 700;
  font-size: 0.8rem;
}

/* Trainers Section */
.trainers {
  background-color: var(--color-white);
  padding: 0.25rem 0;
}

.trainers__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--spacing-md);
  justify-content: center;
}

.trainer-card {
  border: 2px solid var(--color-primary);
  box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--color-primary);
  overflow: hidden;
  background-color: var(--color-background);
  transition: transform 0.3s, border-color 0.3s;
}

.trainer-card:hover {
  transform: translate(-4px, -4px);
  border-color: var(--color-accent);
}

.trainer-card__image {
  height: 380px;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}

.trainer-card__image--salgueiro {
  background-image: url('../images/coaches/coaches-optimized/CARD bruno salgueiro_thumb.webp');
}

.trainer-card__image--segurado {
  background-image: url('../images/coaches/coaches-optimized/CARD jorge segurado_thumb.webp');
}

.trainer-card__image--joaquim {
  background-image: url('../images/coaches/coaches-optimized/CARD joaquim coelho_thumb.webp');
}

.trainer-card__image--catarino {
  background-image: url('../images/coaches/coaches-optimized/CARD luís catarino_thumb.webp');
}

.trainer-card__image--ines {
  background-image: url('../images/coaches/coaches-optimized/CARD inês pires_thumb.webp');
}

.trainer-card__image--lourenco {
  background-image: url('../images/coaches/coaches-optimized/CARD lourenço santos_thumb.webp');
}

.trainer-card__image--alexandre {
  background-image: url('../images/coaches/coaches-optimized/CARD alexandre izidro_thumb.webp');
}

.trainer-card__image--diogo {
  background-image: url('../images/coaches/coaches-optimized/CARD diogo calado_thumb.webp');
}

.trainer-card__image--armenio {
  background-image: url('../images/coaches/coaches-optimized/CARD ARMÉNIO REIS_thumb.webp');
}

.trainer-card__content {
  padding: var(--spacing-sm);
}

.trainer-card__name {
  font-size: 1.4rem;
  margin-bottom: var(--spacing-xs);
  line-height: 1.2;
}

.trainer-card__specialty {
  color: #FFD700;
  font-weight: 700;
  margin-bottom: var(--spacing-sm);
  font-size: 0.9rem;
  line-height: 1.3;
}

.trainer-card__bio {
  margin-bottom: var(--spacing-md);
  font-size: 0.85rem;
  line-height: 1.4;
}

.trainer-card__certs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
}

.trainer-card__certs span {
  background-color: #E5E5E5;
  color: #333333;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
}

/* Responsive adjustments for trainer cards */
@media (max-width: 768px) {
  .trainers__grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--spacing-sm);
  }
  
  .trainer-card__image {
    height: 320px;
  }
  
  .trainer-card__name {
    font-size: 1.3rem;
  }
  
  .trainer-card__specialty {
    font-size: 0.85rem;
  }
  
  .trainer-card__bio {
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .trainers__grid {
    grid-template-columns: 1fr;
    max-width: 300px;
    margin: 0 auto;
  }
  
  .trainer-card__image {
    height: 280px;
  }
  
  .trainer-card__name {
    font-size: 1.2rem;
  }
  
  .trainer-card__specialty {
    font-size: 0.8rem;
  }
  
  .trainer-card__bio {
    font-size: 0.75rem;
  }
}

/* Pricing Section */
.pricing {
  background-color: #CCCCCC;
  padding: var(--spacing-xl) 0;
}

/* Pricing title with better contrast on light gray background */
.pricing .section-title {
  color: #000000;
}

.pricing__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--spacing-md);
}

/* Center the last card (PT) when it's the 7th card in a 3-column grid */
@media (min-width: 1200px) {
  .pricing__grid {
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
  }
  
  /* This targets the last card (PT) to be centered in the grid */
  .pricing__grid > .price-card:last-child {
    grid-column: 2 / 3;
    margin-top: var(--spacing-sm);
  }
}

/* For medium-large screens, maintain good spacing for 4 cards */
@media (min-width: 1000px) and (max-width: 1199px) {
  .pricing__grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    justify-items: center;
    max-width: 1000px;
    margin: 0 auto;
  }
}

/* For smaller desktop screens, ensure grid works nicely with 4 cards */
@media (min-width: 900px) and (max-width: 999px) {
  .pricing__grid {
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
    gap: var(--spacing-lg);
  }
}

/* For tablet screens, stack in 2 columns with good spacing */
@media (min-width: 768px) and (max-width: 899px) {
  .pricing__grid {
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
    gap: var(--spacing-md);
  }
}

/* For mobile screens, single column with full width */
@media (max-width: 767px) {
  .pricing__grid {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: var(--spacing-md);
  }
}

/* For very wide screens, keep the same centering behavior */
@media (min-width: 1600px) {
  .pricing__grid {
    max-width: 1200px;
    margin: 0 auto;
    grid-template-columns: repeat(3, 1fr);
  }
  
  .pricing__grid > .price-card:last-child {
    grid-column: 2 / 3;
    margin-top: var(--spacing-sm);
  }
}

.price-card {
  background-color: var(--color-background);
  border: 2px solid var(--color-primary);
  box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--color-primary);
  overflow: hidden;
  transition: transform 0.3s;
  display: flex;
  flex-direction: column;
  min-height: 550px;
}

.price-card:hover {
  transform: translate(-4px, -4px);
  border-color: var(--color-accent);
}

.price-card--featured {
  border-color: #FFD700;
  transform: scale(1.05);
  position: relative;
  z-index: 2;
}

.price-card--featured:hover {
  transform: scale(1.05) translate(-4px, -4px);
}

.price-card--student .price-card__header {
  background-color: #FFFFFF;
  color: #000000;
  border-bottom: var(--border-thick);
}

.price-card--elite .price-card__header {
  background-color: #000000;
  color: #FFFFFF;
  border-bottom: var(--border-thick);
}

.price-card--dropin .price-card__header {
  background-color: #16A085;
  color: #FFFFFF;
  border-bottom: var(--border-thick);
}

.price-card--pack5 .price-card__header {
  background-color: #FF69B4;
  color: #000000;
  border-bottom: var(--border-thick);
}

.price-card--pack10 .price-card__header {
  background-color: #0088CC;
  color: #FFFFFF;
  border-bottom: var(--border-thick);
}

.price-card--pt .price-card__header {
  background-color: #FF5722;
  color: #FFFFFF;
  border-bottom: var(--border-thick);
}

.price-card--pt .btn {
  background-color: #FF5722;
  border-color: #FF5722;
  color: white;
}

.price-card--pt .btn:hover {
  background-color: #E64A19;
  border-color: #E64A19;
}

.pricing-promos {
  text-align: center;
  margin-top: 3rem;
  padding: 1.5rem;
  background: #f4f4f4;
  border-radius: 8px;
  border: 1px solid #ddd;
}

.pricing-promos h4 {
  margin-bottom: 0.5rem;
  font-weight: 800;
}

.pricing-promos p {
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

.price-card__header {
  background-color: #000000;
  color: #FFD700;
  padding: var(--spacing-md);
  text-align: center;
  border-bottom: var(--border-thick);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.price-card--featured .price-card__header {
  background-color: #FFD700;
  color: #000000;
}

.price-card__title {
  font-size: 2rem;
  margin-bottom: var(--spacing-sm);
}

.price-card__price {
  display: flex;
  justify-content: center;
  align-items: baseline;
}

.price-card__amount {
  font-family: var(--font-heading);
  font-size: 3rem;
  font-weight: 900;
}

.price-card__period {
  font-size: 1rem;
  margin-left: var(--spacing-xs);
}

.price-card__features {
  padding: var(--spacing-md) var(--spacing-md) var(--spacing-sm);
  flex: 1;
}

.price-card__features ul {
  list-style: none;
}

.price-card__features li {
  padding: var(--spacing-xs) 0;
  position: relative;
  padding-left: 30px;
}

.price-card__features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-weight: 700;
}

.price-card__feature--disabled {
  color: var(--color-dark-gray);
  opacity: 0.5;
}

.price-card__feature--disabled::before {
  content: '✕' !important;
  color: var(--color-dark-gray) !important;
}

.price-card__cta {
  padding: 0 var(--spacing-md) var(--spacing-lg);
  text-align: center;
}

.price-card__anchor {
  margin: 0 0 var(--spacing-sm) 0;
  font-weight: 900;
  font-size: 1.2rem;
  color: var(--color-black);
  text-align: center;
  background-color: #FFD700;
  padding: 0.5rem 1rem;
  border: 3px solid #000000;
  box-shadow: 4px 4px 0 #000000;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Price Card Coupon Link */
.price-card__coupon-link {
  margin-top: var(--spacing-sm);
  text-align: center;
}

.price-card__coupon-btn {
  background: none;
  border: none;
  color: #0066cc; /* Blue color */
  font-family: var(--font-body); /* Space Mono - fonte do site */
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  padding: 0.5rem;
  transition: color 0.2s;
  letter-spacing: 0.5px;
}

.price-card__coupon-btn:hover {
  color: #004499; /* Darker blue on hover */
}

.price-card__subtitle {
  margin: 0.5rem 0 0 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: #000000;
  text-align: center;
  background-color: #FFFFFF;
  padding: 0.4rem 1rem;
  border: 2px solid #000000;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2);
  display: inline-block;
  width: auto;
  margin-left: auto;
  margin-right: auto;
}

/* Enhanced pricing buttons - neobrutalist style with site colors */
.pricing .btn {
  background-color: #0088CC;
  border: 4px solid #000000;
  color: #FFFFFF;
  font-size: 1.1rem;
  font-weight: 900;
  animation: ctaPulse 2s ease-in-out infinite;
  cursor: pointer;
  padding: var(--spacing-sm) var(--spacing-md);
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.2s ease;
  box-shadow: 8px 8px 0 #000000;
}

.pricing .btn:hover {
  background-color: #000000;
  border-color: #000000;
  transform: translate(-3px, -3px);
  box-shadow: 11px 11px 0 #0088CC;
  color: #0088CC;
  animation: none;
}

.pricing .btn:active {
  transform: translate(2px, 2px);
  box-shadow: 4px 4px 0 #000000;
  animation: none;
}

/* Featured plan button - same style as others */
.price-card--featured .btn {
  background-color: #0088CC;
  border: 4px solid #000000;
  color: #FFFFFF;
  box-shadow: 8px 8px 0 #000000;
}

.price-card--featured .btn:hover {
  background-color: #000000;
  border-color: #000000;
  color: #0088CC;
  transform: translate(-3px, -3px);
  box-shadow: 11px 11px 0 #0088CC;
}

/* Promotional Text */
.pricing__promo-text {
  text-align: center;
  font-weight: 700;
  font-size: 1.2rem;
  margin-bottom: var(--spacing-md);
  color: var(--color-black);
  line-height: 1.6;
}

.pricing__promo-text strong {
  font-weight: 900;
  color: #0088CC;
  font-size: 1.3rem;
}
/* Contact Section */
.contact {
  background-color: var(--color-white);
  padding: var(--spacing-xl) 0;
}

.contact__content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.contact__info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: var(--spacing-md);
}

.contact__info h3 {
  margin-bottom: var(--spacing-sm);
  color: #000000;
  font-size: 1.2rem;
  font-family: var(--font-heading);
  font-weight: 900;
  text-transform: uppercase;
}

.contact__parking {
  /* Same spacing as other contact sections */
}

.contact__parking h3 {
  margin-bottom: var(--spacing-sm);
  color: #000000;
  font-size: 1.2rem;
  font-family: var(--font-heading);
  font-weight: 900;
  text-transform: uppercase;
}

.contact__parking p {
  margin: 0;
  line-height: 1.4;
}

.contact__parking-link {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-color: var(--color-primary);
  text-underline-offset: 3px;
  font-weight: normal;
  cursor: pointer;
  transition: all 0.3s ease;
}

.contact__parking-link:hover {
  color: #FFD700;
  text-decoration-color: #FFD700;
  transform: translate(-2px, -2px);
  text-shadow: 1px 1px 0 rgba(0,0,0,0.1);
}

.contact__parking-link:focus {
  outline: 2px solid #FFD700;
  outline-offset: 2px;
  color: #FFD700;
  text-decoration-color: #FFD700;
}

/* Mobile specific improvements */
@media (max-width: 768px) {
  .contact__parking-link {
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    padding: 2px 0;
  }
  
  .contact__parking-link:hover,
  .contact__parking-link:active {
    background-color: rgba(255, 107, 53, 0.1);
    border-radius: 3px;
    padding: 4px 2px;
  }
}

.contact__hours-grid {
  display: grid;
  grid-template-columns: auto auto auto 1fr;
  gap: var(--spacing-xs) var(--spacing-sm);
  font-size: 0.9rem;
  line-height: 1.4;
}

.contact__social-icons {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.contact__social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: var(--color-primary);
  color: var(--color-text-dark);
  font-weight: 700;
  transition: all 0.3s;
  border: 2px solid var(--color-primary);
}

.contact__social-icon:hover {
  background-color: #FFD700;
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--color-primary);
}

.contact__form-container {
  border: var(--border-thick);
  box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--color-primary);
  padding: var(--spacing-md);
  background-color: var(--color-background);
}

.contact__form {
  display: grid;
  gap: var(--spacing-md);
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {
  margin-bottom: var(--spacing-xs);
  font-weight: 700;
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-size: 0.9rem;
}

.form-group input,
.form-group textarea {
  padding: var(--spacing-sm);
  border: 2px solid var(--color-primary);
  font-family: var(--font-body);
  resize: none;
  background: transparent;
  color: var(--color-text);
  font-size: 1rem;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #FFD700;
  transform: translate(-1px, -1px);
  box-shadow: 2px 2px 0 #FFD700;
}

.contact__map {
  width: 100%;
  height: 400px;
  border: var(--border-thick);
  box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--color-primary);
  overflow: hidden;
}

.map-placeholder {
  width: 100%;
  height: 100%;
  background-color: var(--color-gray);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-dark-gray);
}

/* Contact Section Responsive Styles */
@media (max-width: 992px) {
  .contact {
    padding: var(--spacing-lg) 0;
  }
  
  .contact__content {
    gap: var(--spacing-md);
  }
  
  .contact__info {
    gap: var(--spacing-sm);
  }
  
  .contact__map {
    height: 350px;
  }
}

@media (max-width: 768px) {
  .contact {
    padding: var(--spacing-md) 0;
  }
  
  .contact__content {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }
  
  .contact__info {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
    order: 2;
  }
  
  .contact__form-container {
    order: 1;
    margin-top: 0;
    margin-bottom: var(--spacing-md);
  }
  
  .contact__info h3 {
    font-size: 1.1rem;
  }
  
  .contact__hours-grid {
    font-size: 0.85rem;
    grid-template-columns: auto auto auto 1fr;
    gap: var(--spacing-xs) var(--spacing-sm);
  }
  
  .contact__social-icons {
    justify-content: flex-start;
  }
  
  .contact__social-icon {
    width: 35px;
    height: 35px;
    font-size: 0.8rem;
  }
  
  .contact__map {
    height: 400px;
    margin-top: var(--spacing-lg);
  }
  
  .contact__map iframe {
    width: 100% !important;
    height: 400px !important;
  }
}

@media (max-width: 576px) {
  .contact {
    padding: var(--spacing-sm) 0;
  }
  
  .contact__container {
    width: 95%;
  }
  
  .contact__content {
    gap: var(--spacing-md);
  }
  
  .contact__info {
    gap: var(--spacing-sm);
  }
  
  .contact__info > div {
    padding: var(--spacing-sm);
    background-color: #f5f5f5;
    border: 2px solid #000000;
    margin-bottom: var(--spacing-xs);
  }
  
  .contact__info h3 {
    font-size: 1rem;
    margin-bottom: var(--spacing-xs);
  }
  
  .contact__info p {
    font-size: 0.9rem;
    line-height: 1.4;
    margin: 0;
  }
  
  .contact__hours-grid {
    font-size: 0.8rem;
    gap: var(--spacing-xs);
  }
  
  .contact__social-icons {
    gap: var(--spacing-xs);
  }
  
  .contact__social-icon {
    width: 32px;
    height: 32px;
    font-size: 0.7rem;
  }
  
  .contact__form-container {
    padding: var(--spacing-sm);
    border-width: 2px;
    box-shadow: 4px 4px 0 var(--color-primary);
  }
  
  .contact__form {
    gap: var(--spacing-sm);
  }
  
  .form-group label {
    font-size: 0.8rem;
  }
  
  .form-group input,
  .form-group textarea {
    padding: var(--spacing-xs);
    font-size: 0.9rem;
    border-width: 2px;
  }
  
  .contact__map {
    height: 350px;
    border-width: 2px;
    box-shadow: 4px 4px 0 var(--color-primary);
  }
  
  .contact__map iframe {
    width: 100% !important;
    height: 350px !important;
  }
}

@media (max-width: 480px) {
  .contact {
    padding: var(--spacing-md) 0 var(--spacing-xl) 0;
  }
  
  .contact__container {
    width: 98%;
    padding: var(--spacing-xs);
  }
  
  .contact__info h3 {
    font-size: 0.9rem;
  }
  
  .contact__info p {
    font-size: 0.8rem;
  }
  
  .contact__hours-grid {
    font-size: 0.75rem;
  }
  
  .contact__social-icon {
    width: 28px;
    height: 28px;
    font-size: 0.6rem;
  }
  
  .contact__map {
    height: 320px;
  }
  
  .contact__map iframe {
    width: 100% !important;
    height: 320px !important;
  }
}

/* Footer - Brutalist Design */
.footer {
  background-color: #666666;
  color: #FFFFFF;
  padding: 0;
  border-top: 8px solid #000000;
  position: relative;
}

.footer__container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

/* Footer Main Content */
.footer__main {
  background-color: #666666;
  padding: var(--spacing-xl) 0;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: var(--spacing-xl);
  align-items: start;
}

/* Footer Logo Section */
.footer__logo-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.footer__logo {
  margin-bottom: var(--spacing-md);
}

.footer__logo .logo-container {
  background: #FFFFFF;
  border: 4px solid #000000;
  box-shadow: 8px 8px 0 #000000;
  max-width: 400px;
  height: 80px;
}

.footer__logo .logo-container:hover {
  transform: translate(-4px, -4px);
  box-shadow: 12px 12px 0 #000000;
}

.footer__description {
  font-size: 1rem;
  line-height: 1.6;
  color: #FFFFFF;
  font-family: var(--font-primary);
}

/* Footer Links Sections */
.footer__links-section {
  display: flex;
  flex-direction: column;
}

.footer__section-title {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 900;
  text-transform: uppercase;
  color: #FFD700;
  margin-bottom: var(--spacing-md);
  letter-spacing: 1px;
  border-bottom: 3px solid #FFD700;
  padding-bottom: var(--spacing-xs);
}

.footer__links-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer__links-list li {
  margin-bottom: var(--spacing-sm);
}

.footer__links-list a {
  color: #FFFFFF;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.3s ease;
  display: inline-block;
  position: relative;
}

.footer__links-list a::before {
  content: '▶';
  position: absolute;
  left: -20px;
  color: #FFD700;
  font-size: 0.8rem;
  opacity: 0;
  transition: all 0.3s ease;
}

.footer__links-list a:hover {
  color: #FFD700;
  transform: translateX(15px);
}

.footer__links-list a:hover::before {
  opacity: 1;
}



/* Newsletter Section */
.footer__newsletter-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.footer__newsletter-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.footer__newsletter-input {
  padding: var(--spacing-sm);
  border: 3px solid #000000;
  background-color: #FFFFFF;
  color: #000000;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.footer__newsletter-input:focus {
  outline: none;
  border-color: #FFD700;
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 #FFD700;
}

.footer__newsletter-input::placeholder {
  color: #666666;
  font-weight: 500;
}

.footer__newsletter-btn {
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: #FFD700;
  color: #000000;
  border: 3px solid #000000;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1rem;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 4px 4px 0 #000000;
}

.footer__newsletter-btn:hover {
  background-color: #000000;
  color: #FFD700;
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 #FFD700;
}

/* Footer Bottom */
.footer__bottom {
  background-color: #000000;
  color: #FFD700;
  padding: var(--spacing-md) 0;
  text-align: center;
  border-top: 4px solid #FFD700;
}

.footer__legal {
  margin-bottom: var(--spacing-sm);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid #333;
}

.footer__legal-links {
  text-align: center;
  font-size: 0.8rem;
  color: #666;
  font-weight: 600;
}

.footer__legal-link {
  color: #666;
  text-decoration: none;
  transition: color 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.footer__legal-link:hover {
  color: var(--color-primary);
  text-decoration: underline;
}



.footer__copyright {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0;
}

/* Responsive Footer */
@media (max-width: 992px) {
  .footer__main {
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
  }
  
  .footer__logo-section {
    grid-column: 1 / -1;
    text-align: center;
  }
}

@media (max-width: 768px) {
  .footer__main {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg) 0;
  }
  
  .footer__logo .logo-container {
    max-width: 300px;
    height: 60px;
    margin: 0 auto;
  }
  
  .footer__section-title {
    font-size: 1.1rem;
  }
  
  .footer__links-list a {
    font-size: 0.9rem;
  }
  
  .footer__newsletter-input,
  .footer__newsletter-btn {
    font-size: 0.9rem;
    padding: var(--spacing-xs) var(--spacing-sm);
  }
}

@media (max-width: 576px) {
  .footer__main {
    padding: var(--spacing-md) 0;
  }
  
  .footer__legal-links {
    font-size: 0.75rem;
  }
  
  .footer__copyright {
    font-size: 0.8rem;
  }
}

/* Privacy Policy Modal Styles */
.privacy-content {
  color: var(--color-primary);
}

.privacy-content h4 {
  margin: var(--spacing-md) 0 var(--spacing-sm) 0;
  font-family: var(--font-heading);
  color: var(--color-primary);
  text-transform: uppercase;
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: var(--spacing-xs);
}

.privacy-content p {
  margin-bottom: var(--spacing-sm);
  line-height: 1.5;
}

.privacy-content ul {
  margin: var(--spacing-sm) 0;
  padding-left: var(--spacing-md);
}

.privacy-content li {
  margin-bottom: var(--spacing-xs);
  line-height: 1.4;
}

/* Logo Styles with Smooth Scaling */
.logo-container {
  max-width: min(600px, 45vw);
  width: 100%;
  height: clamp(100px, 18vw, 150px);
  padding: 0.75rem 0.75rem 0.75rem 0.75rem;
  border: 4px solid #000000;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  overflow: hidden;
}

.logo-container:hover {
  border-color: #000000;
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.5);
}

.header__logo-img {
  max-width: 100%;
  width: 100%;
  height: clamp(35px, 7vw, 55px);
  display: block;
  object-fit: contain;
  transition: all 0.3s ease;
}

.header__logo-tagline {
  text-align: center;
  font-family: var(--font-primary);
  font-size: clamp(0.8rem, 2vw, 1rem);
  font-weight: 600;
  color: #0088CC;
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1;
}

.footer__logo-img {
  max-width: min(540px, 45vw);
  width: 100%;
  height: clamp(60px, 9vw, 90px);
  display: block;
  object-fit: contain;
  transition: all 0.3s ease;
}

.header__logo a {
  text-decoration: none;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
}

/* Ensure header logo is always visible but scales smoothly */
.header__container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-xs) var(--spacing-lg);
  min-height: clamp(80px, 12vw, 120px);
  transition: all 0.3s ease;
  max-width: 1600px;
  margin: 0 auto;
  width: 100%;
  overflow: hidden;
}

.header__logo {
  flex: 0 0 auto;
  min-width: clamp(160px, 18vw, 300px);
  max-width: clamp(240px, 25vw, 350px);
  z-index: 1000;
  transition: all 0.3s ease;
}

.header__nav {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding-right: var(--spacing-xl);
  overflow: visible;
  max-height: 100%;
}

.header__nav ul {
  display: flex;
  list-style: none;
  gap: var(--spacing-md);
  align-items: center;
  justify-content: center;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: visible;
  flex-wrap: nowrap;
}

.header__nav li {
  margin: 0;
}

.header__nav a {
  font-weight: 800;
  font-size: 2.0rem;
  position: relative;
  color: #000000;
  text-decoration: none;
  padding: var(--spacing-sm) var(--spacing-sm);
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
}

.header__nav a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 4px;
  background-color: #000000;
  transition: width 0.3s;
}

.header__nav a:hover {
  color: #000000;
  transform: translate(-1px, -1px);
}

.header__nav a:hover::after {
  width: 100%;
}

/* Active state for desktop navigation - underlined yellow */
.header__nav a.active::after {
  width: 100%;
  background-color: #FFD700;
}

/* Gradual scaling breakpoints */
@media (max-width: 1200px) {
  .logo-container {
    max-width: min(500px, 40vw);
    height: clamp(90px, 16vw, 130px) !important;
  }
  
  .header__logo-img {
    height: clamp(40px, 7vw, 60px);
  }
  
  .header__nav ul {
    gap: var(--spacing-sm);
  }
  
  .header__nav li {
    margin-left: var(--spacing-xs);
  }
  
  .header__nav a {
    font-size: 1.7rem;
    font-weight: 700;
  }
}

/* Highlight PREÇOS link in PC navigation - neobrutalist button style */
.header__nav a[href="#pricing"] {
  background-color: #0088CC;
  color: #FFFFFF;
  border: 3px solid #000000;
  border-radius: 0;
  padding: var(--spacing-xs) var(--spacing-sm);
  font-weight: 900;
  box-shadow: 4px 4px 0 #000000;
  text-transform: uppercase;
  transition: all 0.2s ease;
  animation: priceGlow 2s ease-in-out infinite;
}

@keyframes priceGlow {
  0%, 100% { box-shadow: 4px 4px 0 #000000; }
  50% { box-shadow: 4px 4px 0 #000000, 0 0 20px rgba(0, 136, 204, 0.5); }
}

.header__nav a[href="#pricing"]:hover {
  background-color: #000000;
  color: #0088CC;
  border-color: #0088CC;
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 #0088CC;
  animation: none;
}

.header__nav a[href="#pricing"]::after {
  display: none;
}

/* ========== SYSTEMATIC HEADER RESPONSIVENESS ========== */

/* === LARGE DESKTOP (1900px+) === */
@media (min-width: 1900px) {
  .header__container {
    overflow: visible !important;
    gap: 0.8rem !important;
    padding: var(--spacing-xs) var(--spacing-md) !important;
  }
  
  .header__logo {
    min-width: clamp(180px, 14vw, 260px);
    max-width: clamp(230px, 18vw, 300px);
    flex-shrink: 0;
  }
  
  .header__nav {
    flex: 1 1 auto !important;
    max-width: none !important;
    overflow: visible !important;
  }
  
  .header__nav a {
    font-size: 1.1rem;
    padding: 5px 8px;
  }
  
  .header__nav ul {
    gap: 8px;
    flex-wrap: nowrap;
    overflow: visible;
  }
  
  .header__nav a[href="#pricing"] {
    padding: 5px 10px;
    font-size: 0.95rem;
  }
  
  /* Ensure language toggle remains visible */
  .language-toggle {
    display: flex !important;
    visibility: visible !important;
    flex-shrink: 0 !important;
    margin-left: 1rem !important;
  }
  
  .language-toggle__btn {
    font-size: 0.85rem !important;
    padding: 0.4rem 0.8rem !important;
  }
  
  .header__nav {
    justify-content: center !important;
  }
}

/* === DESKTOP XL (1600px-1899px) === */
@media (min-width: 1600px) and (max-width: 1899px) {
  .header__container {
    overflow: visible !important;
    gap: 0.7rem !important;
    padding: var(--spacing-xs) var(--spacing-md) !important;
  }
  
  .header__logo {
    min-width: clamp(160px, 14vw, 250px);
    max-width: clamp(200px, 17vw, 280px);
    flex-shrink: 0;
  }
  
  .header__nav {
    flex: 1 1 auto !important;
    max-width: none !important;
    overflow: visible !important;
  }
  
  .header__nav a {
    font-size: 1.05rem;
    padding: 4px 7px;
  }
  
  .header__nav ul {
    gap: 7px;
    flex-wrap: nowrap;
    overflow: visible;
  }
  
  .header__nav a[href="#pricing"] {
    padding: 4px 9px;
    font-size: 0.9rem;
  }
  
  /* Ensure language toggle remains visible */
  .language-toggle {
    display: flex !important;
    visibility: visible !important;
    flex-shrink: 0 !important;
    margin-left: 1rem !important;
  }
  
  .language-toggle__btn {
    font-size: 0.8rem !important;
    padding: 0.35rem 0.7rem !important;
  }
  
  .header__nav {
    justify-content: center !important;
  }
}

/* === DESKTOP LARGE (1400px-1599px) === */
@media (min-width: 1400px) and (max-width: 1599px) {
  .header__container {
    overflow: hidden;
  }
  
  .header__logo {
    min-width: clamp(150px, 14vw, 260px);
    max-width: clamp(190px, 17vw, 280px);
  }
  
  .header__nav a {
    font-size: 1.4rem;
    padding: 5px 8px;
  }
  
  .header__nav ul {
    gap: 8px;
  }
  
  .header__nav a[href="#pricing"] {
    padding: 5px 10px;
    font-size: 1.15rem;
  }
  
  /* Ensure language toggle remains visible */
  .language-toggle {
    display: flex !important;
    visibility: visible !important;
  }
}

/* === DESKTOP MEDIUM (1200px-1399px) === */
@media (min-width: 1200px) and (max-width: 1399px) {
  .header__container {
    overflow: hidden;
  }
  
  .header__logo {
    min-width: clamp(140px, 14vw, 260px);
    max-width: clamp(180px, 18vw, 300px);
  }
  
  .header__nav a {
    font-size: 1.3rem;
    padding: 4px 6px;
  }
  
  .header__nav ul {
    gap: 6px;
  }
  
  .header__nav a[href="#pricing"] {
    padding: 4px 8px;
    font-size: 1.05rem;
  }
  
  /* Ensure language toggle remains visible */
  .language-toggle {
    display: flex !important;
    visibility: visible !important;
  }
}

/* === DESKTOP SMALL (1000px-1199px) === */
/* Removed conflicting breakpoint - now handled by hamburger menu activation at max-width: 1199px */

/* === HAMBURGER MENU ACTIVATION === */
/* Force hamburger menu for screens that might cut menu items */
@media (max-width: 1199px) {
  /* Prevent horizontal scroll */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  
  .header__container {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    position: relative !important;
    padding: var(--spacing-xs) var(--spacing-sm) !important;
    z-index: 1002 !important;
    min-height: clamp(70px, 10vw, 85px);
    overflow: hidden !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }
  
  .logo-container {
    max-width: min(350px, 55vw);
    height: clamp(70px, 12vw, 100px) !important;
    flex-shrink: 0;
  }
  
  .header__logo-img {
    height: clamp(35px, 5vw, 50px);
  }
  
     .header__logo {
     min-width: clamp(200px, 25vw, 350px);
     max-width: clamp(300px, 55vw, 350px);
   }

  .header__logo {
    flex: 1;
    display: flex;
    justify-content: center;
    order: 2;
  }
  
  /* Language toggle positioning for intermediate breakpoint */
  .language-toggle {
    order: 3 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: flex !important;
  }
  
  .header__nav {
    display: none !important;
  }
  
  /* Force hamburger menu to show at 992px */
  .header__menu-toggle {
    display: block !important;
    background: #FFD700 !important;
    border: 3px solid #000000 !important;
    cursor: pointer !important;
    width: 40px !important;
    height: 35px !important;
    position: relative !important;
    z-index: 1002 !important;
    padding: 5px !important;
    border-radius: 4px !important;
    order: 1 !important;
    flex-shrink: 0 !important;
    box-shadow: 2px 2px 0 #000000 !important;
    margin-right: 0 !important;
    pointer-events: auto !important;
  }
  
  .header__menu-toggle span {
    display: block !important;
    width: 100% !important;
    height: 3px !important;
    background-color: #000000 !important;
    position: absolute !important;
    left: 5px !important;
    transition: all 0.3s ease !important;
    border-radius: 1px !important;
    transform-origin: center !important;
    pointer-events: none !important;
  }
  
  .header__menu-toggle span:nth-child(1) {
    top: 8px !important;
  }
  
  .header__menu-toggle span:nth-child(2) {
    top: 15px !important;
  }
  
  .header__menu-toggle span:nth-child(3) {
    top: 22px !important;
  }

  /* Active state for hamburger button when menu is open */
  .header__menu-toggle.active {
    background: #FFF000 !important;
    border-color: #000000 !important;
    transform: translate(-2px, -2px) !important;
    box-shadow: 4px 4px 0 #000000 !important;
  }

  /* X transformation when menu is active */
  .header__menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px) !important;
    top: 16px !important;
    width: 25px !important;
    height: 4px !important;
    background-color: #000000 !important;
  }

  .header__menu-toggle.active span:nth-child(2) {
    opacity: 0 !important;
    transform: scale(0) !important;
  }

  .header__menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px) !important;
    top: 16px !important;
    width: 25px !important;
    height: 4px !important;
    background-color: #000000 !important;
  }

  /* Hover effect for hamburger menu */
  .header__menu-toggle:hover {
    background: #FFF000 !important;
    transform: translate(-2px, -2px) !important;
    box-shadow: 4px 4px 0 #000000 !important;
  }

  .header__menu-toggle:hover span {
    background-color: #000000 !important;
  }
}

@media (max-width: 768px) {
  .logo-container {
    max-width: min(350px, 70vw);
    height: clamp(90px, 16vw, 120px) !important;
    padding: 0.75rem;
    border-width: 4px;
  }
  
  .header__logo-img {
    height: clamp(45px, 8vw, 65px);
  }
  
  .header__logo {
    min-width: clamp(280px, 35vw, 350px);
    max-width: clamp(350px, 70vw, 350px);
  }
  
  .header__container {
    min-height: clamp(110px, 18vw, 130px);
  }
}

@media (max-width: 576px) {
  .logo-container {
    max-width: min(320px, 75vw);
    height: clamp(95px, 18vw, 125px) !important;
    padding: 1rem;
    border-width: 4px;
  }
  
  .header__logo-img {
    height: clamp(50px, 10vw, 70px);
  }
  
  .header__logo {
    min-width: clamp(250px, 40vw, 320px);
    max-width: clamp(320px, 75vw, 320px);
  }
  
  .header__container {
    min-height: clamp(115px, 20vw, 135px);
  }
}

@media (max-width: 480px) {
  .logo-container {
    max-width: min(300px, 80vw);
    height: clamp(100px, 20vw, 130px) !important;
    padding: 1rem;
  }
  
  .header__logo-img {
    height: clamp(55px, 12vw, 75px);
  }
  
  .header__logo {
    min-width: clamp(240px, 45vw, 300px);
    max-width: clamp(300px, 80vw, 300px);
  }
  
  .header__container {
    min-height: clamp(120px, 22vw, 140px);
  }
}

/* Remove the disappearing logo styles - keep it always visible */
@media (max-width: 400px) {
  .header__logo {
    opacity: 1;
    transform: scale(1);
  }
}

@media (max-width: 320px) {
  .header__logo {
    display: flex;
  }
}

/* Mobile Menu (Hidden by default) */
.mobile-menu {
  position: fixed !important;
  top: 120px !important;
  right: -100% !important;
  width: 80% !important;
  height: calc(100vh - 120px) !important;
  background-color: #000000 !important;
  color: #ffffff !important;
  padding: var(--spacing-sm) !important;
  transition: right 0.3s ease !important;
  z-index: 1000 !important;
  box-shadow: -4px 0 8px rgba(0, 0, 0, 0.3) !important;
  overflow-y: auto !important;
}

.mobile-menu.active {
  right: 0 !important;
}

.mobile-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-menu li {
  margin-bottom: var(--spacing-sm);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: var(--spacing-xs);
}

.mobile-menu a {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 900;
  display: block;
  transition: all 0.3s;
  text-transform: uppercase;
  padding: var(--spacing-xs) 0;
  color: var(--color-white);
}

.mobile-menu a:hover {
  transform: translateX(10px);
}

/* Active state for mobile menu links - underlined yellow */
.mobile-menu a.active {
  border-bottom: 3px solid #FFD700;
  padding-bottom: calc(var(--spacing-xs) - 3px);
}

/* Highlight PREÇOS link in mobile menu - Brutalist style */
.mobile-menu a[href="#pricing"] {
  background-color: #0088CC;
  color: #FFFFFF;
  border: 3px solid #000000;
  padding: 0.75rem 1rem;
  margin: 0.5rem 0 0.5rem -1rem; /* Negative left margin to align with other items */
  box-shadow: 4px 4px 0 #000000;
  font-weight: 900;
  animation: priceGlowMobile 2s ease-in-out infinite;
}

@keyframes priceGlowMobile {
  0%, 100% { box-shadow: 4px 4px 0 #000000; }
  50% { box-shadow: 4px 4px 0 #000000, 0 0 20px rgba(0, 136, 204, 0.5); }
}

.mobile-menu a[href="#pricing"]:hover {
  background-color: #000000;
  color: #0088CC;
  border-color: #0088CC;
  box-shadow: 6px 6px 0 #0088CC;
  transform: translateX(10px);
  animation: none;
}

/* Add overlay when menu is open */
body.menu-open::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

/* Prevent body scroll when menu is open */
body.menu-open {
  overflow: hidden;
}

/* Ensure hamburger button stays clickable when menu is open */
body.menu-open .header__menu-toggle {
  z-index: 1005 !important;
  position: relative !important;
  border: 4px solid #000000 !important;
  box-shadow: 0 0 0 2px #FFF000, 4px 4px 0 #000000 !important;
}

/* Mobile menu responsive adjustments */
@media (max-width: 768px) {
  .mobile-menu {
    top: 130px !important;
    height: calc(100vh - 130px) !important;
  }
}

@media (max-width: 480px) {
  .mobile-menu {
    top: 140px !important;
    height: calc(100vh - 140px) !important;
    width: 85% !important;
    padding: var(--spacing-sm) !important;
  }
  
  .mobile-menu ul {
    margin: 0;
  }
  
  .mobile-menu a {
    font-size: 1.2rem;
  }
}

@media (max-width: 320px) {
  .mobile-menu {
    width: 90% !important;
  }
  
  .mobile-menu a {
    font-size: 1.1rem;
  }
}

/* Ensure header has proper z-index */
.header {
  background-color: #FFD700;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1003;
  border-bottom: 4px solid #000000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.header__container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-xs) 0;
  min-height: clamp(120px, 20vw, 160px);
  transition: all 0.3s ease;
  gap: 1rem;
  flex-wrap: nowrap;
  overflow: visible;
}

.header__logo {
  flex: 0 0 auto;
  min-width: clamp(250px, 30vw, 600px);
  max-width: clamp(350px, 50vw, 600px);
  z-index: 1000;
  transition: all 0.3s ease;
}

.header__nav {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  min-width: 0;
  max-width: none;
}

/* Language toggle positioning for desktop - ALWAYS VISIBLE */
.language-toggle {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
  white-space: nowrap !important;
  min-width: fit-content !important;
  margin-left: auto !important;
}

.header__nav ul {
  display: flex;
  list-style: none;
  gap: var(--spacing-md);
  align-items: center;
  height: 100%;
  flex-wrap: nowrap;
  overflow: visible;
}

/* Ensure nav doesn't overflow and hide logo */
@media (max-width: 1200px) {
  .header__nav ul {
    gap: var(--spacing-xs);
  }
  
  .header__nav li {
    margin-left: var(--spacing-xs);
  }
  
  .header__nav a {
    font-size: 0.9rem;
  }
}

/* Additional protection for medium screens */
@media (max-width: 1024px) {
  .header__logo {
    min-width: 250px;
    max-width: 400px;
  }
  
  .header__nav a {
    font-size: 0.8rem;
    padding: var(--spacing-xs);
  }
}

/* Hero Section */
.hero {
  min-height: 70vh;
  background-color: #FFFDF0;
  color: #000000;
  position: relative;
  overflow: hidden;
  padding: calc(clamp(120px, 20vw, 160px) + var(--spacing-lg)) 0 0 0;
  display: flex;
  align-items: center;
  margin-top: 0;
}

.hero__container {
  position: relative;
  z-index: 5;
  width: 100%;
  padding: 0 var(--spacing-lg);
  margin-bottom: 0;
}

.hero__title {
  font-size: 4.5rem;
  line-height: 1.1;
  margin-bottom: 1.5rem;
  color: #000000;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-family: var(--font-primary);
}

.hero__subtitle {
  font-size: 1.5rem;
  line-height: 1.4;
  margin-bottom: 2rem;
  color: var(--color-gray);
  font-family: var(--font-secondary);
}

.hero__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: 0;
}



/* Animation Styles */
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.animate-bounce {
  animation: bounce 2s infinite;
}

/* Utility Classes */
.text-primary {
  color: var(--color-primary);
}

.bg-primary {
  background-color: var(--color-primary);
}

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

.hidden {
  display: none;
}

/* Typography */
.section-title {
  font-size: 3rem;
  margin-bottom: var(--spacing-md);
  position: relative;
  display: inline-block;
}

.section-line {
  width: 100px;
  height: 8px;
  background-color: var(--color-primary);
  margin-bottom: var(--spacing-md);
}

/* Buttons */
.btn {
  display: inline-block;
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--color-primary);
  color: var(--color-text-dark);
  font-family: var(--font-heading);
  font-weight: 800;
  text-transform: uppercase;
  border: 2px solid var(--color-primary);
  box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--color-primary);
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  line-height: 1;
}

/* Ensure button elements have same styling */
button.btn {
  border: 2px solid var(--color-primary);
  font-family: var(--font-heading);
  font-weight: 800;
  text-transform: uppercase;
  background-color: var(--color-primary);
  color: var(--color-text-dark);
  cursor: pointer;
  outline: none;
}

button.btn:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.btn:hover,
button.btn:hover {
  background-color: #FFD700;
  border-color: #FFD700;
  text-decoration: none;
}

.btn:active,
button.btn:active {
  transform: translate(2px, 2px);
  box-shadow: calc(var(--shadow-offset) - 2px) calc(var(--shadow-offset) - 2px) 0 var(--color-primary);
}

/* Event promo block (below hero) */
.event-promo { padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-xxl, 4rem); }
.event-promo__card {
  display: grid;
  gap: var(--spacing-xl);
  grid-template-columns: 1.1fr 0.9fr;
  background: var(--color-white);
  border: var(--border-width) dashed #DC143C; /* temporary/red dashed border */
  box-shadow: 8px 8px 0 var(--color-primary);
  padding: var(--spacing-xl);
  align-items: center;
  position: relative;
}
.event-promo__media img {
  width: 100%;
  height: auto;
  display: block;
  border: var(--border-width) solid var(--color-black);
  box-shadow: 6px 6px 0 var(--color-black);
}
.event-promo__title {
  font-family: var(--font-heading);
  font-weight: 900;
  text-transform: uppercase;
  margin: 0 0 var(--spacing-md);
}
.event-promo__eyebrow {
  position: absolute;
  top: -48px;
  left: -16px;
  background: #DC143C;
  color: #FFFFFF;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: clamp(1.4rem, 3.2vw, 2.5rem);
  padding: 8px 16px;
  border: 4px solid #000000;
  box-shadow: 8px 8px 0 var(--color-black);
  letter-spacing: 1.5px;
  transform: rotate(-2deg);
  z-index: 5;
}
@media (max-width: 768px) {
  .event-promo__eyebrow { top: -32px; left: -10px; font-size: 1.25rem; padding: 6px 12px; border-width: 3px; box-shadow: 6px 6px 0 var(--color-black); }
}
.event-promo__text {
  margin: 0 0 var(--spacing-lg);
  color: var(--color-gray);
}
/* Decorative edge text around the dashed border */
.event-promo__edge {
  position: absolute;
  font-family: var(--font-heading);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #DC143C;
  pointer-events: none;
  z-index: 2;
}
.event-promo__edge span { background: var(--color-white); padding: 0 6px; position: relative; z-index: 1; }
.event-promo__edge--top,
.event-promo__edge--bottom {
  left: 8px;
  right: 8px;
  text-align: center;
  font-size: 0.8rem;
}
.event-promo__edge--top { top: -18px; }
.event-promo__edge--bottom { bottom: -18px; }
.event-promo__edge--left,
.event-promo__edge--right {
  top: 8px;
  bottom: 8px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 0.75rem;
}
.event-promo__edge--left { left: -18px; transform: rotate(180deg); }
.event-promo__edge--right { right: -18px; }

/* Fill remaining edge with dashed lines except where text appears */
.event-promo__edge::before,
.event-promo__edge::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

/* Horizontal edges */
.event-promo__edge--top::before,
.event-promo__edge--top::after,
.event-promo__edge--bottom::before,
.event-promo__edge--bottom::after {
  height: 0;
  border-top: 2px dashed #DC143C;
  top: 50%;
  transform: translateY(-50%);
}
.event-promo__edge--top::before,
.event-promo__edge--bottom::before { left: 8px; right: 50%; }
.event-promo__edge--top::after,
.event-promo__edge--bottom::after { left: 50%; right: 8px; }

/* Vertical edges */
.event-promo__edge--left::before,
.event-promo__edge--right::before,
.event-promo__edge--left::after,
.event-promo__edge--right::after {
  width: 0;
  border-left: 2px dashed #DC143C;
  left: 50%;
}
.event-promo__edge--left::before,
.event-promo__edge--right::before { top: 8px; bottom: 50%; }
.event-promo__edge--left::after,
.event-promo__edge--right::after { top: 50%; bottom: 8px; }

@media (max-width: 768px) {
  .event-promo__edge { display: none; }
}
/* Pink CTA inside event promo */
.event-promo .btn {
  background-color: #FF69B4;
  color: var(--color-white);
}
.event-promo .btn:hover {
  background-color: var(--color-black);
  color: #FF69B4;
  box-shadow: 8px 8px 0 #FF69B4;
}
@media (max-width: 768px) {
  .event-promo { padding: var(--spacing-lg) var(--spacing-md) var(--spacing-xl); }
  .event-promo__card {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg);
  }
  .event-promo__title { font-size: 1.1rem; }
  .event-promo__text { font-size: 0.95rem; }
  .event-promo .btn { width: 100%; text-align: center; }
}

.btn--small {
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: 0.8rem;
}

.btn--full {
  width: 100%;
  text-align: center;
}

/* Animação de pulsação para botões CTA */
@keyframes ctaPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 12px 12px 0 var(--color-primary);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 12px 12px 0 var(--color-primary), 0 0 30px rgba(0, 136, 204, 0.6);
  }
}

/* Animação de pulsação para botão de cupão */
@keyframes couponPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 6px 6px 0 var(--color-black);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 6px 6px 0 var(--color-black), 0 0 25px rgba(255, 215, 0, 0.6);
  }
}

/* Animação de pulsação para botão continuar (azul) */
@keyframes continuePulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 6px 6px 0 var(--color-black);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 6px 6px 0 var(--color-black), 0 0 30px rgba(0, 136, 204, 0.6);
  }
}

/* Enhanced primary button - larger for better visibility */
.btn--primary {
  background-color: #0088CC;
  color: #FFFFFF;
  font-size: 1.6rem;
  padding: calc(var(--spacing-md) + 0.8rem) calc(var(--spacing-lg) + 1.5rem);
  font-weight: 900;
  letter-spacing: 2px;
  border-width: 3px;
  box-shadow: 6px 6px 0 #000000;
  text-align: center;
  display: inline-block;
  animation: ctaPulse 2s ease-in-out infinite;
  cursor: pointer;
}

.btn--primary:hover {
  background-color: #000000;
  color: #0088CC;
  transform: translate(3px, 3px);
  box-shadow: 3px 3px 0 #000000;
  animation: none;
}

.btn--primary:active {
  transform: translate(6px, 6px);
  box-shadow: none;
  animation: none;
}

/* Responsive button sizes */
@media (max-width: 768px) {
  .btn--primary {
    font-size: 1.4rem;
    padding: calc(var(--spacing-sm) + 0.4rem) calc(var(--spacing-md) + 0.7rem);
    border-width: 3px;
    box-shadow: 4px 4px 0 #000000;
    letter-spacing: 1.5px;
    text-align: center;
  }
  
  .btn--primary:hover {
    background-color: #000000;
    color: #0088CC;
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 #000000;
    animation: none;
  }
  
  .btn--primary:active {
    transform: translate(4px, 4px);
    box-shadow: none;
    animation: none;
  }
}

@media (max-width: 480px) {
  .btn--primary {
    font-size: 1.2rem;
    padding: calc(var(--spacing-sm) + 0.3rem) calc(var(--spacing-md) + 0.5rem);
    border-width: 3px;
    box-shadow: 4px 4px 0 #000000;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    display: block;
    letter-spacing: 1px;
    text-align: center;
  }
  
  .btn--primary:hover {
    background-color: #000000;
    color: #0088CC;
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 #000000;
    animation: none;
  }
  
  .btn--primary:active {
    transform: translate(4px, 4px);
    box-shadow: none;
    animation: none;
  }
}

/* Hero Section */
.hero {
  min-height: calc(100vh - 80px);
  background-color: #FFFDF0;
  color: #000000;
  position: relative;
  overflow: hidden;
  padding: var(--spacing-lg) 0;
}

.hero__container {
  position: relative;
  z-index: 5;
}

.hero__title {
  font-size: 4.5rem;
  line-height: 1.1;
  margin-bottom: 1.5rem;
  color: #000000;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-family: var(--font-primary);
}

.hero__subtitle {
  font-size: 1.5rem;
  line-height: 1.4;
  margin-bottom: 2rem;
  color: var(--color-gray);
  font-family: var(--font-secondary);
}

/* Hero button hover/active states */
.hero__cta .btn:hover {
  transform: translate(3px, 3px);
  box-shadow: 3px 3px 0 #000000 !important;
  animation: none;
}

.hero__cta .btn:active {
  transform: translate(6px, 6px);
  box-shadow: none !important;
  animation: none;
}

/* Dicas do Salgueiro highlighted link box */
.dicas-link {
  display: inline-block;
  background-color: #FFD700;
  color: #000000;
  padding: 4px 8px;
  border: 2px solid #000000;
  box-shadow: 3px 3px 0 #000000;
  text-decoration: none;
  font-weight: 900;
  font-size: 0.9em;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
  margin: 0 2px;
}

.dicas-link:hover {
  background-color: #000000;
  color: #FFD700;
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 #FFD700;
  text-decoration: none;
}

.dicas-link:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 #000000;
}

/* Responsive adjustments for Dicas link */
@media (max-width: 768px) {
  .dicas-link {
    background-color: #FFD700;
    color: #000000;
    padding: 3px 6px;
    font-size: 0.8em;
    border: 2px solid #000000;
    box-shadow: 2px 2px 0 #000000;
    letter-spacing: 0.3px;
  }
  
  .dicas-link:hover {
    background-color: #000000;
    color: #FFD700;
    box-shadow: 3px 3px 0 #FFD700;
  }
  
  .dicas-link:active {
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0 #000000;
  }
}

@media (max-width: 768px) {
  .hero__title {
    margin-top: 60px !important;
    font-size: 3.8rem;
  }
}

@media (max-width: 480px) {
  .hero__title {
    margin-top: 80px !important;
    font-size: clamp(2.5rem, 8vw, 4rem); /* Fluid Typography */
    line-height: 1.1;
    padding-left: 1rem; /* Safe Margins */
    padding-right: 1rem; /* Safe Margins */
    word-break: keep-all; /* Prevent Word Splitting */
    overflow-wrap: normal; /* Prevent Word Splitting */
    width: 100%;
    box-sizing: border-box;
    hyphens: none;
  }
}

/* @media (max-width: 360px) {
  .hero__title {
    font-size: 2.4rem; 
  }
} */

/* Gallery Section */
.gallery {
  background-color: var(--color-background);
  padding: var(--spacing-xl) 0;
}

.gallery__container {
  text-align: center;
}

.gallery__slider {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  background-color: var(--color-white);
  border: 8px solid var(--color-black);
  box-shadow: 16px 16px 0 var(--color-black);
  overflow: hidden;
}

.gallery__track {
  display: flex;
  transition: transform 0.3s ease;
  width: 100%;
}

.gallery__item {
  min-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-white);
}

.gallery__image {
  width: 100%;
  height: 500px;
  object-fit: contain;
  display: block;
  border: 4px solid var(--color-black);
  background-color: var(--color-black);
}

.gallery__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  height: 60px;
  background-color: var(--color-black);
  color: var(--color-white);
  border: 4px solid var(--color-black);
  font-size: 2rem;
  font-weight: 900;
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s ease;
  font-family: var(--font-heading);
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery__btn:hover {
  background-color: var(--color-accent);
  color: var(--color-black);
  transform: translateY(-50%) translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--color-black);
}

.gallery__btn:active {
  transform: translateY(-50%) translate(2px, 2px);
  box-shadow: none;
}

.gallery__btn--prev {
  left: 10px;
}

.gallery__btn--next {
  right: 10px;
}

.gallery__caption-container {
  display: flex;
  justify-content: center;
  margin-top: var(--spacing-md);
}

.gallery__caption {
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-black);
  letter-spacing: 2px;
  background-color: var(--color-accent);
  padding: var(--spacing-sm) var(--spacing-md);
  border: 4px solid var(--color-black);
  display: inline-block;
  box-shadow: 8px 8px 0 var(--color-black);
  max-width: 600px;
  text-align: center;
}

/* Mobile Responsiveness for Gallery */
@media (max-width: 768px) {
  .gallery__slider {
    max-width: 90%;
    border-width: 4px;
    box-shadow: 8px 8px 0 var(--color-black);
  }
  
  .gallery__image {
    height: 300px;
    border-width: 2px;
    object-fit: contain;
    background-color: var(--color-black);
  }
  
  .gallery__btn {
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
    border-width: 2px;
  }
  
  .gallery__btn--prev {
    left: 8px;
  }
  
  .gallery__btn--next {
    right: 8px;
  }
  
  .gallery__caption-container {
    margin-top: var(--spacing-sm);
  }
  
  .gallery__caption {
    font-size: 0.9rem;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-width: 2px;
    box-shadow: 4px 4px 0 var(--color-black);
    letter-spacing: 1px;
  }
}

@media (max-width: 480px) {
  .gallery__slider {
    border-width: 3px;
    box-shadow: 6px 6px 0 var(--color-black);
  }
  
  .gallery__image {
    height: 250px;
    object-fit: contain;
    background-color: var(--color-black);
  }
  
  .gallery__btn {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }
  
  .gallery__btn--prev {
    left: 5px;
  }
  
  .gallery__btn--next {
    right: 5px;
  }
  
  .gallery__caption-container {
    margin-top: var(--spacing-xs);
  }
  
  .gallery__caption {
    font-size: 0.8rem;
    letter-spacing: 0.5px;
  }
}

.about .about__mission {
  margin-top: var(--spacing-xl) !important;
}

.about .mission-frame {
  border: 6px solid #000000 !important;
  padding: var(--spacing-lg) !important;
  background-color: #FFFFFF !important;
  box-shadow: 12px 12px 0 rgba(0, 0, 0, 0.2) !important;
}

.about .mission-text {
  font-size: 1.3rem !important;
  line-height: 1.6 !important;
  text-align: center !important;
  color: #000000 !important;
  margin: 0 !important;
}

.about .mission-text strong {
  color: #FFD700 !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
}

/* Brand Highlight - Brutalist Style */
.brand-highlight {
  display: inline-block;
  background-color: #FFD700;
  color: #000000;
  padding: 0.3rem 0.8rem;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.1em;
  text-transform: uppercase;
  letter-spacing: 2px;
  border: 4px solid #000000;
  box-shadow: 6px 6px 0 #000000;
  transform: rotate(-2deg);
  margin-right: 0.5rem;
}

/* Responsive Carousel */
@media (max-width: 768px) {
  /* Solution 1: Reduzir largura do carousel para criar margens laterais */
  .carousel-container {
    max-width: 88%;  /* Reduced from 95% to create more side margins */
    margin: 0 auto;
    border-width: 6px;
    box-shadow: 12px 12px 0 rgba(0, 0, 0, 0.3);
    position: relative;
  }
  
  .carousel-slide {
    padding: var(--spacing-xs) !important;  /* Even smaller padding */
    min-height: 250px !important;  /* Further reduced from 300px */
  }
  
  .carousel-slide.pillar-frame--yellow .pillar-content,
  .carousel-slide.pillar-frame--gray .pillar-content,
  .carousel-slide.pillar-frame--white .pillar-content {
    padding: var(--spacing-sm) !important;
    border-width: 3px !important;
  }
  
  /* Solution 2: Melhorar setas de navegação - maiores e posicionadas fora */
  .carousel-btn {
    width: 60px;    /* Increased from 50px */
    height: 60px;   /* Increased from 50px */
    font-size: 1.8rem;  /* Increased from 1.5rem */
    border-width: 4px;
    background-color: #FFD700;  /* More visible background */
    color: #000000;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.8);
    z-index: 20;
  }
  
  .carousel-btn:hover {
    background-color: #000000;
    color: #FFD700;
    transform: translateY(-50%) translate(-2px, -2px);
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.8);
  }
  
  .carousel-btn--prev {
    left: -35px;  /* Positioned further outside */
  }
  
  .carousel-btn--next {
    right: -35px;  /* Positioned further outside */
  }
  
  /* Solution 3: Criar padding lateral inteligente para áreas de scroll */
  .pillars-carousel {
    padding: 0 55px;  /* Add lateral padding for scroll zones */
    position: relative;
  }
  
  .pillars-carousel::before,
  .pillars-carousel::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 30px;
    z-index: 1;
    pointer-events: none;
  }
  
  .pillars-carousel::before {
    left: 0;
    background: linear-gradient(to right, rgba(255,255,255,0.5), transparent);
  }
  
  .pillars-carousel::after {
    right: 0;
    background: linear-gradient(to left, rgba(255,255,255,0.5), transparent);
  }
  
  .about .pillar-number {
    font-size: 2.8rem !important;  /* Slightly bigger */
    margin-bottom: 4px !important;
  }
  
  .about .pillar-title {
    font-size: 1.25rem !important;  /* Slightly bigger */
    margin-bottom: 4px !important;
  }
  
  .about .pillar-subtitle {
    font-size: 0.95rem !important;  /* Slightly bigger */
    margin-bottom: var(--spacing-xs) !important;
  }
  
  .about .pillar-text {
    font-size: 0.85rem !important;  /* Slightly bigger */
    line-height: 1.4 !important;
    margin-bottom: var(--spacing-sm) !important;
  }
  
  .about .pillar-tags span {
    font-size: 0.65rem !important;  /* Slightly bigger */
    padding: 3px 6px !important;
    margin: 2px !important;
  }
  
  .about .pillar-equipment {
    font-size: 0.7rem !important;  /* Slightly bigger */
  }
  
  .about .pillar-highlight {
    font-size: 0.7rem !important;  /* Slightly bigger */
  }
  
  .indicator {
    width: 50px;
    height: 15px;
    border-width: 2px;
  }

  /* Social Media Mobile Layout - Combined with Carousel Media Query */
  .about__social {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: var(--spacing-sm);
    justify-items: center;
    max-width: 400px;
  }
  
  .about__social-item {
    flex: none;
    width: 100%;
    max-width: 160px;
  }
  
  .about__social-item:nth-child(3) {
    grid-column: 1 / -1;
    justify-self: center;
    max-width: 160px;
  }
}

@media (max-width: 480px) {
  /* Further optimize for small mobile screens */
  .carousel-container {
    max-width: 85%;  /* Even more reduced for smaller screens */
    border-width: 4px;
    box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.3);
  }
  
  .carousel-slide {
    padding: 8px !important;  /* Very compact padding */
    min-height: 220px !important;  /* Further reduced from 270px */
  }
  
  /* Enhanced navigation buttons for small screens */
  .carousel-btn {
    width: 50px;    /* Increased from 40px */
    height: 50px;   /* Increased from 40px */
    font-size: 1.5rem;  /* Increased from 1.2rem */
    background-color: #FFD700;
    color: #000000;
    border-width: 3px;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.8);
    z-index: 20;
  }
  
  .carousel-btn:hover {
    background-color: #000000;
    color: #FFD700;
    transform: translateY(-50%) translate(-2px, -2px);
    box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.8);
  }
  
  .carousel-btn--prev {
    left: -40px;  /* Positioned further outside */
  }
  
  .carousel-btn--next {
    right: -40px;  /* Positioned further outside */
  }
  
  /* Adjust padding for smaller screens */
  .pillars-carousel {
    padding: 0 45px;  /* More padding to accommodate arrows */
  }
  
  .pillars-carousel::before,
  .pillars-carousel::after {
    width: 25px;  /* Narrower gradient zones */
  }
}

/* Extra small mobile screens optimization */
@media (max-width: 360px) {
  .carousel-container {
    max-width: 82%;  /* Further reduced for very small screens */
  }
  
  .carousel-btn {
    width: 45px;
    height: 45px;
    font-size: 1.3rem;
  }
  
    .carousel-btn--prev {
    left: -35px;
  }

  .carousel-btn--next {
    right: -35px;
  }
  
  .pillars-carousel {
    padding: 0 45px;
  }
  
  .pillars-carousel::before,
  .pillars-carousel::after {
    width: 20px;
  }
  
  .carousel-slide {
    padding: 6px !important;  /* Ultra compact padding */
    min-height: 240px !important;  /* Ultra compact for very small screens */
  }
}

@media (max-width: 480px) {
  .about .pillar-number {
    font-size: 2.3rem !important;  /* Slightly bigger */
    margin-bottom: 3px !important;
  }
  
  .about .pillar-title {
    font-size: 1.1rem !important;  /* Slightly bigger */
    margin-bottom: 3px !important;
  }
  
  .about .pillar-subtitle {
    font-size: 0.85rem !important;  /* Slightly bigger */
    margin-bottom: var(--spacing-xs) !important;
  }
  
  .about .pillar-text {
    font-size: 0.8rem !important;  /* Slightly bigger */
    line-height: 1.4 !important;
    margin-bottom: var(--spacing-sm) !important;
  }
  
  .about .pillar-tags span {
    font-size: 0.6rem !important;  /* Slightly bigger */
    padding: 3px 5px !important;
    margin: 2px !important;
  }
  
  .about .pillar-equipment {
    font-size: 0.65rem !important;  /* Slightly bigger */
  }
  
  .about .pillar-highlight {
    font-size: 0.65rem !important;  /* Slightly bigger */
  }
  
  .indicator {
    width: 40px;
    height: 12px;
  }

  /* Social Media Small Mobile Layout */
  .about__social {
    max-width: 350px;
    gap: var(--spacing-xs);
  }
  
  .about__social-item {
    max-width: 140px;
    padding: var(--spacing-xs);
  }
  
  .about__social-item:nth-child(3) {
    max-width: 140px;
  }
}

/* Salgueiro Section */
.salgueiro {
  background-color: var(--color-background);
  padding: var(--spacing-xl) 0 var(--spacing-xs) 0;
}

.salgueiro__container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--spacing-md) 0;
  box-sizing: border-box;
}

/* Bio Styles */
.salgueiro__bio {
  margin-bottom: var(--spacing-xl);
}

.bio-intro {
  text-align: center;
  margin-bottom: var(--spacing-lg);
  padding: var(--spacing-lg);
  background-color: #000000;
  color: #FFFFFF;
  border: 6px solid #000000;
  box-shadow: 12px 12px 0 #FFD700;
}

.bio-title {
  font-family: var(--font-heading);
  font-size: 3rem;
  font-weight: 900;
  text-transform: uppercase;
  color: #FFD700;
  margin-bottom: var(--spacing-sm);
  letter-spacing: 3px;
}

.bio-alias {
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 500;
  color: #CCCCCC;
  margin: 0;
  margin-bottom: var(--spacing-sm);
  text-align: center;
}

.bio-subtitle {
  font-family: var(--font-primary);
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #FFFFFF;
  letter-spacing: 1px;
  line-height: 1.4;
}

.bio-content {
  display: grid;
  gap: var(--spacing-lg);
}

.bio-section {
  display: flex;
  gap: var(--spacing-md);
  align-items: flex-start;
  padding: var(--spacing-md);
  border: 4px solid #000000;
  background-color: #FFFDF5;
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.bio-section:hover {
  transform: translate(-4px, -4px);
  box-shadow: 12px 12px 0 rgba(0, 0, 0, 0.2);
}

.bio-section--featured {
  background-color: #666666;
  border-color: #000000;
  box-shadow: 8px 8px 0 #000000;
}

.bio-section--featured:hover {
  box-shadow: 12px 12px 0 #000000;
}

.bio-section--featured p {
  color: #FFFFFF !important;
}

.bio-section--mission {
  background-color: #000000;
  color: #FFFFFF;
  border-color: #FFD700;
  box-shadow: 8px 8px 0 #FFD700;
}

.bio-section--mission:hover {
  box-shadow: 12px 12px 0 #FFD700;
}

.bio-section--mission p {
  color: #FFFFFF !important;
}

.bio-highlight {
  flex: 0 0 auto;
  min-width: 120px;
  background-color: #000000;
  color: #FFD700;
  padding: var(--spacing-xs) var(--spacing-sm);
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 0.9rem;
  text-transform: uppercase;
  text-align: center;
  border: 3px solid #000000;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: var(--spacing-sm);
}

.bio-section--featured .bio-highlight {
  background-color: #000000;
  color: #FFD700;
  border-color: #000000;
}

.bio-section--mission .bio-highlight {
  background-color: #FFD700;
  color: #000000;
  border-color: #FFD700;
}

.bio-section p {
  flex: 1;
  font-size: 1.1rem;
  line-height: 1.6;
  color: #000000;
  margin: 0;
  font-weight: 500;
}

/* Gallery Integration within Salgueiro */
.salgueiro__gallery {
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-md);
}

.gallery__title {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 900;
  text-transform: uppercase;
  color: #000000;
  margin-bottom: var(--spacing-sm);
  text-align: center;
}

.gallery__line {
  width: 100px;
  height: 6px;
  background-color: #FFD700;
  margin: 0 auto var(--spacing-lg);
  border: 2px solid #000000;
}

/* Responsive Bio */
@media (max-width: 768px) {
  .bio-title {
    font-size: 2.2rem;
    letter-spacing: 2px;
  }
  
  .bio-alias {
    font-size: 0.9rem;
  }
  
  .bio-subtitle {
    font-size: 1rem;
    letter-spacing: 0.5px;
  }
  
  .bio-section {
    flex-direction: column;
    gap: var(--spacing-sm);
  }
  
  .bio-highlight {
    min-width: auto;
    width: 100%;
    margin-right: 0;
    margin-bottom: var(--spacing-xs);
  }
  
  .bio-section p {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .bio-intro {
    padding: var(--spacing-md);
  }
  
  .bio-title {
    font-size: 1.8rem;
    letter-spacing: 1px;
  }
  
  .bio-alias {
    font-size: 0.8rem;
  }
  
  .bio-subtitle {
    font-size: 0.9rem;
  }
  
  .bio-section {
    padding: var(--spacing-sm);
  }
  
  .bio-section p {
    font-size: 0.95rem;
    line-height: 1.5;
  }
}

.bio-section--featured {
  background-color: #666666;
  border-color: #000000;
  box-shadow: 8px 8px 0 #000000;
}

.bio-section--featured:hover {
  box-shadow: 12px 12px 0 #000000;
}

.bio-section--light {
  background-color: #FFFEF7;
  border-color: #000000;
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.15);
}

.bio-section--light:hover {
  box-shadow: 12px 12px 0 rgba(0, 0, 0, 0.25);
}

.bio-section--light .bio-highlight {
  background-color: #000000;
  color: #FFD700;
  border-color: #000000;
}

.bio-section--gray {
  background-color: #FFF9E6;
  border-color: #000000;
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.2);
}

.bio-section--gray:hover {
  box-shadow: 12px 12px 0 rgba(0, 0, 0, 0.3);
}

.bio-section--gray .bio-highlight {
  background-color: #E6C200;
  color: #000000;
  border-color: #000000;
}

.bio-section--gray p {
  color: #333333;
}

/* Salgueiro Image Styles */
.salgueiro__image-container {
  display: flex;
  justify-content: center;
  margin: var(--spacing-xl) 0;
  padding: var(--spacing-md) 0;
}

.salgueiro__image {
  max-width: 500px;
  width: 100%;
  background-color: #FFFFFF;
  border: 6px solid #000000;
  box-shadow: 12px 12px 0 #FFD700;
  overflow: hidden;
  transition: all 0.3s ease;
  position: relative;
}

.salgueiro__image:hover {
  transform: translate(-6px, -6px);
  box-shadow: 18px 18px 0 #FFD700;
}

.salgueiro__image::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  background: linear-gradient(45deg, #FFD700, #000000, #FFD700);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.salgueiro__image:hover::before {
  opacity: 0.1;
}

.salgueiro__photo {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.salgueiro__image:hover .salgueiro__photo {
  transform: scale(1.02);
}

/* Responsive Salgueiro Image */
@media (max-width: 768px) {
  .salgueiro__image {
    max-width: 450px;
    border-width: 4px;
    box-shadow: 8px 8px 0 #FFD700;
  }
  
  .salgueiro__image:hover {
    transform: translate(-4px, -4px);
    box-shadow: 12px 12px 0 #FFD700;
  }
}

@media (max-width: 480px) {
  .salgueiro__image {
    max-width: 350px;
    border-width: 3px;
    box-shadow: 6px 6px 0 #FFD700;
  }
  
  .salgueiro__image:hover {
    transform: translate(-3px, -3px);
    box-shadow: 9px 9px 0 #FFD700;
  }
  
  .salgueiro__image-container {
    margin: var(--spacing-lg) 0;
  }
}

/* Salgueiro Credentials Link */
.salgueiro__credentials {
  display: flex;
  justify-content: center;
  margin: var(--spacing-lg) 0;
  padding: 0 var(--spacing-md);
}

.credentials__link {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  background-color: #000000;
  color: #FFD700;
  border: 4px solid #000000;
  box-shadow: 8px 8px 0 #FFD700;
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.credentials__link:hover {
  background-color: #FFD700;
  color: #000000;
  transform: translate(-4px, -4px);
  box-shadow: 12px 12px 0 #000000;
  text-decoration: none;
}

.credentials__link:active {
  transform: translate(2px, 2px);
  box-shadow: 4px 4px 0 #000000;
}

.credentials__icon {
  font-size: 1.5rem;
  animation: pulse 2s infinite;
}

.credentials__text {
  font-weight: 900;
  letter-spacing: 1.5px;
}

.credentials__arrow {
  font-size: 1.2rem;
  transform: translateX(0);
  transition: transform 0.3s ease;
}

.credentials__link:hover .credentials__arrow {
  transform: translateX(5px);
}

.credentials__link:hover .credentials__icon {
  animation: bounce 0.6s ease;
}

@keyframes pulse {
  0%, 100% { 
    opacity: 1; 
    transform: scale(1);
  }
  50% { 
    opacity: 0.7; 
    transform: scale(1.1);
  }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-5px);
  }
  60% {
    transform: translateY(-3px);
  }
}

/* Responsive Credentials */
@media (max-width: 768px) {
  .credentials__link {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 0.9rem;
    border-width: 3px;
    box-shadow: 6px 6px 0 #FFD700;
  }
  
  .credentials__link:hover {
    box-shadow: 9px 9px 0 #000000;
  }
  
  .credentials__icon {
    font-size: 1.3rem;
  }
  
  .credentials__text {
    letter-spacing: 1px;
  }
}

@media (max-width: 480px) {
  .salgueiro__credentials {
    padding: 0 var(--spacing-sm);
  }
  
  .credentials__link {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: 0.8rem;
    border-width: 2px;
    box-shadow: 4px 4px 0 #FFD700;
    gap: var(--spacing-xs);
  }
  
  .credentials__link:hover {
    box-shadow: 6px 6px 0 #000000;
  }
  
  .credentials__icon {
    font-size: 1.1rem;
  }
  
  .credentials__text {
    letter-spacing: 0.5px;
  }
}

/* Pricing Modals - Neo-Brutalist Style */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-md);
  box-sizing: border-box;
}

.modal-overlay.active {
  display: flex;
}

.modal-container {
  background-color: var(--color-background);
  border: 6px solid var(--color-primary);
  box-shadow: 16px 16px 0 var(--color-primary);
  max-width: 1000px;
  width: 95%;
  max-height: 95vh;
  overflow-y: auto;
  position: relative;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.modal-overlay.active .modal-container {
  opacity: 1;
}

/* Estilo específico para modais com RegyFit */
.modal-container:has(.modal-regy-container) {
  max-width: 1200px;
  width: 98%;
  max-height: 95vh;
  overflow-x: hidden; /* Prevent horizontal scroll on container */
}

/* Fix horizontal scroll in coupon savings banner */
.coupon-savings-banner {
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.5rem;
  overflow: visible; /* Allow content to show */
}

.coupon-savings-banner__note {
  white-space: normal; /* Allow text to wrap */
  word-wrap: break-word; /* Break long words if needed */
  max-width: 100%;
}

/* Coupon modals - compact when showing form only */
#modal-elite-coupon .modal-container,
#modal-rise-coupon .modal-container,
#modal-starter-coupon .modal-container {
  max-width: 500px;
  width: 95%;
}

/* Coupon modals - medium when showing success info */
#modal-elite-coupon .modal-container:has(.coupon-success-info[style*="display: block"]),
#modal-rise-coupon .modal-container:has(.coupon-success-info[style*="display: block"]),
#modal-starter-coupon .modal-container:has(.coupon-success-info[style*="display: block"]) {
  max-width: 900px;
  width: 95%;
}

/* Coupon modals - large when showing Regyfit */
#modal-elite-coupon .modal-container:has(.modal-regy-container[style*="display: block"]),
#modal-rise-coupon .modal-container:has(.modal-regy-container[style*="display: block"]),
#modal-starter-coupon .modal-container:has(.modal-regy-container[style*="display: block"]) {
  max-width: 1200px;
  width: 98%;
}

/* Coupon modals need proper spacing */
#modal-elite-coupon .modal-content,
#modal-rise-coupon .modal-content,
#modal-starter-coupon .modal-content {
  padding: 2rem 2rem 1rem 2rem; /* Reduced bottom padding */
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center; /* Center content horizontally */
  overflow-x: visible;
  box-sizing: border-box;
}

/* Success info container - ensure proper spacing and no overflow */
.coupon-success-info {
  padding: 1rem;
  box-sizing: border-box;
  width: 100%; /* Force full width */
  max-width: 100%;
  overflow-x: hidden;
  word-wrap: break-word;
  margin: 0 auto; /* Center horizontally */
}

/* Reduce font sizes in savings banner to fit better */
.coupon-savings-banner {
  padding: 1.5rem;
  margin: 0 0 1.5rem 0;
  /* max-width: 100%; from fix */
}

.coupon-savings-banner__main {
  font-size: 1.6rem;
}

.coupon-savings-banner__main strong {
  font-size: 2rem;
}

.coupon-savings-banner__price-row {
  font-size: 1rem;
  padding: 0.4rem;
  flex-wrap: wrap;
}

.coupon-savings-banner__label {
  min-width: 100px;
  font-size: 1rem;
}

.coupon-savings-banner__old-price {
  font-size: 1.1rem;
}

.coupon-savings-banner__new-price,
.coupon-savings-banner__free {
  font-size: 1.4rem;
  padding: 0.3rem 0.8rem;
}

.coupon-savings-banner__note {
  font-size: 0.85rem;
  padding: 0.5rem;
  line-height: 1.3;
}

.coupon-pre-form__how-it-works li {
  font-size: 0.85rem;
  line-height: 1.5;
}

/* Responsividade dinâmica dos iframes */
.modal-regy-container {
  max-width: 100%;
  overflow-x: hidden;
}

.modal-regy-container iframe {
  width: 100%;
  min-height: 0; /* Start from 0 to prevent white space */
  height: auto;
  border: none;
  display: block;
  overflow-x: hidden;
}

/* Adaptação automática baseada no viewport - ONLY for visible iframes */
@media (max-height: 900px) {
  .modal-regy-container iframe:not([style*="display: none"]) {
    min-height: 80vh;
    max-height: 85vh;
  }
  
  .modal-container:has(.modal-regy-container) {
    max-height: 90vh;
  }
}

@media (max-height: 700px) {
  .modal-regy-container iframe:not([style*="display: none"]) {
    min-height: 70vh;
    max-height: 75vh;
  }
  
  .modal-container:has(.modal-regy-container) {
    max-height: 85vh;
  }
}

@media (max-width: 1024px) {
  .modal-container:has(.modal-regy-container) {
    max-width: 95%;
    width: 95%;
    padding: 0.75rem !important; /* Espaço nas laterais */
  }
  
  /* Adicionar espaço nas laterais do container do RegyFit */
  .modal-regy-container {
    margin: 0 0.75rem !important;
    padding: 0.75rem !important;
    width: calc(100% - 1.5rem) !important;
    max-width: calc(100% - 1.5rem) !important;
  }
  
  /* Garantir espaço nas laterais do modal-content */
  .modal-content:has(.modal-regy-container) {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
  
  .modal-regy-container iframe:not([style*="display: none"]) {
    min-height: 1200px;
    width: 100% !important;
  }
}

.modal-header {
  background-color: #000000;
  color: var(--color-accent);
  padding: var(--spacing-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 6px solid var(--color-primary);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.modal-title {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 900;
  text-transform: uppercase;
  margin: 0;
  letter-spacing: 2px;
}

.modal-subtitle {
  font-size: 1rem;
  color: #FFD700;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: block;
  margin-top: 4px;
}

.modal-close {
  background: var(--color-accent);
  color: var(--color-primary);
  border: 3px solid var(--color-primary);
  width: 50px;
  height: 50px;
  font-size: 2rem;
  font-weight: 900;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
}

.modal-close:hover {
  background-color: var(--color-primary);
  color: var(--color-accent);
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--color-accent);
}

.modal-content {
  padding: var(--spacing-lg);
}

/* Coupon modals need tighter spacing */
#modal-elite-coupon .modal-content,
#modal-rise-coupon .modal-content,
#modal-starter-coupon .modal-content {
  padding: 0.5rem;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* Success info container - ensure proper spacing and no overflow */
.coupon-success-info {
  padding: 1rem;
  box-sizing: border-box;
  max-width: 100%;
  overflow-x: hidden;
  word-wrap: break-word;
}

.modal-plan-summary {
  background-color: var(--color-accent);
  border: 4px solid var(--color-primary);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  box-shadow: 8px 8px 0 var(--color-primary);
}

.plan-price {
  font-family: var(--font-heading);
  font-size: 3rem;
  font-weight: 900;
  color: var(--color-primary);
  text-align: center;
  margin-bottom: var(--spacing-md);
  text-transform: uppercase;
}

.plan-features {
  color: var(--color-primary);
}

.plan-features p {
  margin-bottom: var(--spacing-xs);
  font-weight: 600;
  line-height: 1.4;
}

.plan-features strong {
  font-weight: 900;
  text-transform: uppercase;
}

.modal-regy-container {
  border: 4px solid var(--color-primary);
  background-color: var(--color-background);
  box-shadow: 8px 8px 0 var(--color-primary);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: auto;
}

.modal-regy-container iframe {
  width: 100% !important;
  min-height: 600px !important;
  border: none !important;
  background-color: var(--color-background) !important;
  flex: 1 1 auto;
  height: auto !important;
  max-height: none !important;
}

/* Hidden iframes should NOT take up any space */
.modal-regy-container iframe[style*="display: none"],
.modal-regy-container iframe[style*="position: absolute"] {
  position: absolute !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

/* Override Regy styles within modal */
.modal-regy-container * {
  font-family: var(--font-primary) !important;
}

.modal-regy-container input,
.modal-regy-container select,
.modal-regy-container button {
  border: 2px solid var(--color-primary) !important;
  background-color: var(--color-background) !important;
  padding: var(--spacing-sm) !important;
  margin: var(--spacing-xs) 0 !important;
  font-weight: 700 !important;
  transition: all 0.2s !important;
  box-shadow: 4px 4px 0 var(--color-primary) !important;
}

.modal-regy-container button {
  background-color: var(--color-primary) !important;
  color: var(--color-text-dark) !important;
  text-transform: uppercase !important;
  font-family: var(--font-heading) !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

.modal-regy-container button:hover {
  background-color: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  color: var(--color-primary) !important;
  transform: translate(-2px, -2px) !important;
  box-shadow: 6px 6px 0 var(--color-primary) !important;
}

.modal-regy-container input:focus,
.modal-regy-container select:focus {
  outline: none !important;
  border-color: var(--color-accent) !important;
  transform: translate(-2px, -2px) !important;
  box-shadow: 6px 6px 0 var(--color-primary) !important;
}

.modal-regy-container label {
  font-weight: 700 !important;
  text-transform: uppercase !important;
  margin-bottom: var(--spacing-xs) !important;
  display: block !important;
  color: var(--color-primary) !important;
}

.modal-regy-container .form-group,
.modal-regy-container .form-row {
  margin-bottom: var(--spacing-md) !important;
}

.modal-regy-container h1,
.modal-regy-container h2,
.modal-regy-container h3,
.modal-regy-container h4,
.modal-regy-container h5,
.modal-regy-container h6 {
  font-family: var(--font-heading) !important;
  text-transform: uppercase !important;
  color: var(--color-primary) !important;
  font-weight: 900 !important;
}

/* Modal Responsive Styles */
@media (max-width: 768px) {
  .modal-overlay {
    padding: var(--spacing-sm);
  }
  
  .modal-container {
    border-width: 4px;
    box-shadow: 12px 12px 0 var(--color-primary);
    max-height: 95vh;
  }
  
  .modal-header {
    padding: var(--spacing-sm);
    border-bottom-width: 4px;
  }
  
  .modal-title {
    font-size: 1.5rem;
    letter-spacing: 1px;
  }
  
  .modal-close {
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
    border-width: 2px;
  }
  
  .modal-content {
    padding: var(--spacing-md);
  }
  
  .modal-plan-summary {
    padding: var(--spacing-sm);
    border-width: 3px;
    box-shadow: 6px 6px 0 var(--color-primary);
  }
  
  .plan-price {
    font-size: 2.2rem;
  }
  
  /* Adicionar mais espaço nas laterais do container do RegyFit em mobile */
  .modal-content {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  .modal-regy-container {
    border-width: 3px;
    box-shadow: 6px 6px 0 var(--color-primary);
    margin: 0 0.5rem !important; /* Espaço nas laterais */
    padding: 0.5rem !important; /* Padding interno para dar mais espaço */
    width: calc(100% - 1rem) !important; /* Reduzir largura para dar espaço */
    max-width: calc(100% - 1rem) !important;
  }
  
  .modal-regy-container iframe {
    min-height: 800px !important;
    width: 100% !important;
    /* Garantir scroll dentro do iframe em mobile */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
  }
  
  /* Garantir que o container do modal permite scroll */
  .modal-container:has(.modal-regy-container) {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0.5rem !important; /* Mais espaço nas laterais do modal */
  }
  
  /* Garantir que o container do RegyFit permite scroll */
  .modal-regy-container {
    overflow-y: visible !important;
    max-height: none !important;
  }
}

@media (max-width: 480px) {
  .modal-overlay {
    padding: var(--spacing-xs);
  }
  
  .modal-container {
    border-width: 3px;
    box-shadow: 8px 8px 0 var(--color-primary);
  }
  
  .modal-header {
    padding: var(--spacing-xs);
    border-bottom-width: 3px;
  }
  
  .modal-title {
    font-size: 1.2rem;
  }
  
  .modal-close {
    width: 35px;
    height: 35px;
    font-size: 1.2rem;
  }
  
  .modal-content {
    padding: var(--spacing-sm) 0.75rem !important; /* Mais espaço nas laterais */
  }
  
  .plan-price {
    font-size: 1.8rem;
  }
  
  .plan-features p {
    font-size: 0.9rem;
  }
  
  /* Ainda mais espaço nas laterais em ecrãs muito pequenos */
  .modal-regy-container {
    margin: 0 0.75rem !important; /* Mais espaço nas laterais */
    padding: 0.75rem !important;
    width: calc(100% - 1.5rem) !important;
    max-width: calc(100% - 1.5rem) !important;
  }
  
  .modal-regy-container iframe {
    min-height: 750px !important;
    width: 100% !important;
    /* Garantir scroll dentro do iframe em mobile */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
  }
  
  /* Garantir que o container do modal permite scroll */
  .modal-container:has(.modal-regy-container) {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0.75rem !important; /* Mais espaço nas laterais do modal */
  }
  
  /* Garantir que o container do RegyFit permite scroll */
  .modal-regy-container {
    overflow-y: visible !important;
    max-height: none !important;
  }
}

/* Prevent body scroll when modal is open */
body.modal-open {
  overflow: hidden;
}

/* Modal Payment Information Styles */
.modal-payment-info {
  background-color: #FFF3CD;
  border: 3px solid #DC143C;
  border-radius: 8px;
  margin: var(--spacing-md) 0;
  padding: var(--spacing-md);
  box-shadow: 4px 4px 0 rgba(220, 20, 60, 0.2);
}

.payment-info-header {
  text-align: center;
  margin-bottom: var(--spacing-sm);
}

.payment-info-header h4 {
  color: #DC143C;
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0;
}

.payment-info-content {
  display: grid;
  gap: var(--spacing-sm);
}

.payment-breakdown {
  background-color: #FFFFFF;
  border: 2px solid #000000;
  border-radius: 4px;
  padding: var(--spacing-sm);
}

.payment-breakdown p {
  margin: 0 0 var(--spacing-xs) 0;
  font-weight: 700;
  color: #000000;
}

.payment-breakdown ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.payment-breakdown li {
  margin: var(--spacing-xs) 0;
  padding-left: 0;
  color: #000000;
  font-weight: 600;
}

.payment-timing {
  background-color: #E8F5E8;
  border: 2px solid #28A745;
  border-radius: 4px;
  padding: var(--spacing-sm);
}

.payment-timing p {
  margin: 0 0 var(--spacing-xs) 0;
  color: #000000;
}

.timing-highlight {
  background-color: #D4EDDA;
  border-left: 4px solid #28A745;
  padding: var(--spacing-xs);
  margin: var(--spacing-xs) 0 0 0 !important;
  font-weight: 700;
  color: #155724 !important;
  border-radius: 0 4px 4px 0;
}

/* Responsive adjustments for payment info */
@media (max-width: 768px) {
  .modal-payment-info {
    margin: var(--spacing-sm) 0;
    padding: var(--spacing-sm);
  }
  
  .payment-info-header h4 {
    font-size: 1.1rem;
  }
  
  .payment-breakdown, .payment-timing {
    padding: var(--spacing-xs);
  }
}

@media (max-width: 480px) {
  .modal-payment-info {
    margin: var(--spacing-xs) 0;
    padding: var(--spacing-xs);
  }
  
  .payment-info-header h4 {
    font-size: 1rem;
  }
  
  .timing-highlight {
    font-size: 0.9rem;
  }
}

/* Purchase Instructions Styles */
.modal-purchase-instructions {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border: 3px solid #000000;
  border-radius: 8px;
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.1);
}

.purchase-instructions-header {
  text-align: center;
  margin-bottom: var(--spacing-md);
}

.purchase-instructions-header h4 {
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0;
}

.purchase-steps {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.purchase-step {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  background: rgba(255, 255, 255, 0.7);
  border-radius: 6px;
  border: 2px solid #000000;
  transition: all 0.3s ease;
}

.purchase-step:hover {
  transform: translateY(-1px);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
}

.step-number {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #0088CC 0%, #0066AA 100%);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 1rem;
  border: 2px solid #000000;
  flex-shrink: 0;
}

.step-text {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.4;
}

/* Responsive adjustments for purchase instructions */
@media (max-width: 768px) {
  .modal-purchase-instructions {
    margin: var(--spacing-xs) 0;
    padding: var(--spacing-sm);
  }
  
  .purchase-instructions-header h4 {
    font-size: 1.1rem;
  }
  
  .purchase-step {
    padding: calc(var(--spacing-sm) * 0.8);
  }
  
  .step-number {
    width: 28px;
    height: 28px;
    font-size: 0.9rem;
  }
  
  .step-text {
    font-size: 0.85rem;
  }
}

@media (max-width: 480px) {
  .modal-purchase-instructions {
    margin: calc(var(--spacing-xs) * 0.5) 0;
    padding: calc(var(--spacing-sm) * 0.7);
  }
  
  .purchase-instructions-header h4 {
    font-size: 1rem;
  }
  
  .purchase-step {
    padding: calc(var(--spacing-xs) * 0.8);
    gap: var(--spacing-xs);
  }
  
  .step-number {
    width: 26px;
    height: 26px;
    font-size: 0.85rem;
  }
  
  .step-text {
    font-size: 0.8rem;
  }
}

/* Contact Section */


/* Salgueiro Social Media Section */
.salgueiro__social {
  margin: var(--spacing-xl) 0;
}

.salgueiro__social-intro {
  text-align: center;
  margin-bottom: var(--spacing-lg);
}

.salgueiro__social-intro p {
  font-family: var(--font-primary);
  font-size: 1.1rem;
  line-height: 1.6;
  color: #333333;
  max-width: 800px;
  margin: 0 auto;
}

.salgueiro__social-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-sm);
  margin: var(--spacing-lg) 0;
  padding: var(--spacing-sm);
  background-color: var(--color-accent);
  border: var(--border-thick);
  box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--color-primary);
  width: 100%;
  box-sizing: border-box;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.salgueiro__social-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: var(--color-primary);
  padding: var(--spacing-sm);
  transition: all 0.3s;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  flex: 0 0 calc(50% - var(--spacing-sm)/2);
  min-width: 140px;
}

.salgueiro__social-item:nth-child(3) {
  flex: 0 0 calc(50% - var(--spacing-sm)/2);
  margin: 0 auto;
}

.salgueiro__social-item:hover {
  transform: translate(-2px, -2px);
  background-color: var(--color-primary);
  color: var(--color-accent);
  text-decoration: none;
}

.salgueiro__social-item:hover i,
.salgueiro__social-item:hover .salgueiro__social-number,
.salgueiro__social-item:hover .salgueiro__social-label {
  color: var(--color-accent);
}

.salgueiro__social-item i {
  font-size: 2.5rem;
  margin-bottom: var(--spacing-xs);
  color: var(--color-primary);
}

.salgueiro__social-number {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 900;
  line-height: 1;
  margin-bottom: var(--spacing-xs);
  color: var(--color-primary);
}

.salgueiro__social-label {
  font-size: 1rem;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--color-primary);
  font-family: var(--font-heading);
}

/* Responsive Salgueiro Social */
@media (max-width: 768px) {
  .salgueiro__social-intro p {
    font-size: 1rem;
  }
  
  .salgueiro__social-stats {
    max-width: 500px;
    gap: var(--spacing-xs);
  }
  
  .salgueiro__social-item {
    flex: 0 0 calc(50% - var(--spacing-xs)/2);
    min-width: 120px;
    padding: var(--spacing-xs);
  }
  
  .salgueiro__social-item:nth-child(3) {
    flex: 0 0 calc(50% - var(--spacing-xs)/2);
  }
}

@media (max-width: 480px) {
  .salgueiro__social-intro p {
    font-size: 0.95rem;
    padding: 0 var(--spacing-sm);
  }
  
  .salgueiro__social-stats {
    max-width: 350px;
    gap: var(--spacing-xs);
  }
  
  .salgueiro__social-item {
    flex: 0 0 calc(50% - var(--spacing-xs)/2);
    min-width: 100px;
    padding: var(--spacing-xs);
  }
  
  .salgueiro__social-item:nth-child(3) {
    flex: 0 0 calc(50% - var(--spacing-xs)/2);
  }
}

/* Salgueiro Credentials */
.salgueiro__credentials {
  display: flex;
  justify-content: center;
  margin: var(--spacing-lg) 0;
  padding: 0 var(--spacing-md);
}

.credentials__link {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  background-color: #000000;
  color: #FFD700;
  border: 4px solid #000000;
  box-shadow: 8px 8px 0 #FFD700;
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.credentials__link:hover {
  background-color: #FFD700;
  color: #000000;
  transform: translate(-4px, -4px);
  box-shadow: 12px 12px 0 #000000;
  text-decoration: none;
}

.credentials__link:active {
  transform: translate(2px, 2px);
  box-shadow: 4px 4px 0 #000000;
}

.credentials__icon {
  font-size: 1.5rem;
  animation: pulse 2s infinite;
}

.credentials__text {
  font-weight: 900;
  letter-spacing: 1.5px;
}

.credentials__arrow {
  font-size: 1.2rem;
  transform: translateX(0);
  transition: transform 0.3s ease;
}

.credentials__link:hover .credentials__arrow {
  transform: translateX(5px);
}

.credentials__link:hover .credentials__icon {
  animation: bounce 0.6s ease;
}

@keyframes pulse {
  0%, 100% { 
    opacity: 1; 
    transform: scale(1);
  }
  50% { 
    opacity: 0.7; 
    transform: scale(1.1);
  }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-5px);
  }
  60% {
    transform: translateY(-3px);
  }
}

/* Responsive Credentials */
@media (max-width: 768px) {
  .credentials__link {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 0.9rem;
    border-width: 3px;
    box-shadow: 6px 6px 0 #FFD700;
  }
  
  .credentials__link:hover {
    box-shadow: 9px 9px 0 #000000;
  }
  
  .credentials__icon {
    font-size: 1.3rem;
  }
  
  .credentials__text {
    letter-spacing: 1px;
  }
}

@media (max-width: 480px) {
  .salgueiro__credentials {
    padding: 0 var(--spacing-sm);
  }
  
  .credentials__link {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: 0.8rem;
    border-width: 2px;
    box-shadow: 4px 4px 0 #FFD700;
    gap: var(--spacing-xs);
  }
  
  .credentials__link:hover {
    box-shadow: 6px 6px 0 #000000;
  }
  
  .credentials__icon {
    font-size: 1.1rem;
  }
  
  .credentials__text {
    letter-spacing: 0.5px;
  }
}

/* SCHEDULE SECTION */
.schedule {
  background-color: var(--color-white);
  padding: var(--spacing-xs) 0;
}

.schedule__container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--spacing-md) 0;
  box-sizing: border-box;
}

.schedule__subtitle {
  font-family: var(--font-body);
  font-size: 1.2rem;
  font-weight: 700;
  text-align: center;
  color: var(--color-gray);
  margin: var(--spacing-md) 0 var(--spacing-lg) 0;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* Activity Legend */
.schedule__legend {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-md);
  margin: var(--spacing-lg) 0;
  padding: var(--spacing-lg);
  border: var(--border-thick);
  background-color: var(--color-light);
  box-shadow: 8px 8px 0 var(--color-black);
}

.legend__item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  width: 100%;
}

.legend__color {
  width: 20px;
  height: 20px;
  border: 3px solid var(--color-black);
  box-shadow: 3px 3px 0 var(--color-black);
  flex-shrink: 0;
  margin-top: 2px;
}

.legend__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  flex: 1;
}

.legend__label {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-black);
}

.legend__description {
  font-family: var(--font-body);
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--color-gray);
  text-align: left;
}

/* Color Variants for Legend */
.legend__item--bewater .legend__color {
  background-color: #FFD700; /* Yellow - Primary activity */
}

.legend__item--opengym .legend__color {
  background-color: #E8E8E8; /* Light Gray - Open gym */
}

.legend__item--bewater-live .legend__color {
  background-color: #FF6B35; /* Orange - Live training */
}
/* Muay Thai Legend Color - use site pink */
.legend__item--muaythai .legend__color {
  background-color: #FF69B4; /* Site pink */
}

.legend__item--jiujitsu .legend__color {
  background-color: #4A90E2; /* Blue - Martial arts */
}

.legend__item--boxe .legend__color {
  background-color: #8E44AD; /* Purple - Combat sports */
}

.legend__item--closed .legend__color {
  background-color: #F5F5F5; /* Light Gray - Closed */
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 4px,
    rgba(0, 0, 0, 0.1) 4px,
    rgba(0, 0, 0, 0.1) 8px
  );
  border-style: dashed;
}

.schedule__note {
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-sm);
  border-top: 2px solid var(--color-black);
  text-align: center;
  width: 100%;
}

.schedule__note small {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--color-gray);
  font-style: italic;
  opacity: 0.8;
}

@media (max-width: 768px) {
  .schedule__note small {
    font-size: 0.7rem;
  }
}

@media (max-width: 480px) {
  .schedule__note small {
    font-size: 0.65rem;
  }
}

/* Schedule Grid */
.schedule__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
}

.schedule__day {
  background-color: var(--color-white);
  border: var(--border-thick);
  box-shadow: 8px 8px 0 var(--color-black);
  transition: all 0.2s ease;
  min-height: 500px;
}

.schedule__day:hover {
  transform: translate(-2px, -2px);
  box-shadow: 10px 10px 0 var(--color-black);
}

.schedule__day--rest {
  background-color: #f0f8ff;
  border-color: var(--color-gray);
}

.schedule__day--rest:hover {
  box-shadow: 10px 10px 0 var(--color-gray);
}

/* Day Header */
.day__header {
  background-color: var(--color-black);
  color: var(--color-white);
  padding: var(--spacing-md);
  text-align: center;
  border-bottom: var(--border-thick);
}

.day__header--sunday {
  background-color: #4A90E2;
}

.day__title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 900;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 2px;
}



/* Timeline */
.day__timeline {
  padding: var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

/* Activity Items */
.activity {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 2px solid var(--color-black);
  background-color: var(--color-white);
  box-shadow: 3px 3px 0 var(--color-black);
  transition: all 0.15s ease;
  /* Prevent content overflow */
  overflow: hidden;
  word-wrap: break-word;
  min-height: 42px;
  font-size: 0.8rem;
}

.activity:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--color-black);
}

.activity__time {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-black);
  min-width: 75px;
  flex-shrink: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.activity__name {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-black);
  text-align: right;
  flex: 1;
  word-wrap: break-word;
  overflow-wrap: break-word;
  overflow: hidden;
}

/* Activity Color Variants */
.activity--bewater {
  background-color: #FFD700;
  border-color: var(--color-black);
}

.activity--bewater:hover {
  background-color: #FFC700;
}

.activity--opengym {
  background-color: #E8E8E8;
  border-color: var(--color-black);
}

.activity--opengym:hover {
  background-color: #DDDDDD;
}

.activity--opengym-main {
  background-color: #E8E8E8;
  border-color: var(--color-black);
  min-height: 80px;
  padding: var(--spacing-md) var(--spacing-lg);
  margin-bottom: var(--spacing-md);
}

.activity--opengym-main:hover {
  background-color: #DDDDDD;
}

.activity--opengym-main .activity__time {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
}

.activity--opengym-main .activity__name {
  font-size: 1.1rem;
  font-weight: 900;
  line-height: 1.2;
}

.activity--opengym-main .activity__name small {
  font-size: 0.75rem;
  font-weight: 400;
  opacity: 0.8;
}

/* Timeline Container with Open Gym Sidebar */
/* Removed opengym sidebar styles - using regular activities now */

.activity--bewater-live {
  background-color: #FF6B35;
  border-color: var(--color-black);
}

.activity--bewater-live:hover {
  background-color: #FF5722;
}

.activity--bewater-live .activity__name,
.activity--bewater-live .activity__time {
  color: var(--color-white);
}

.activity--jiujitsu {
  background-color: #4A90E2;
  border-color: var(--color-black);
}

.activity--jiujitsu:hover {
  background-color: #357ABD;
}

.activity--jiujitsu .activity__name,
.activity--jiujitsu .activity__time {
  color: var(--color-white);
}

.activity--boxe {
  background-color: #8E44AD;
  border-color: var(--color-black);
}

.activity--boxe:hover {
  background-color: #7B1FA2;
}

.activity--boxe .activity__name,
.activity--boxe .activity__time {
  color: var(--color-white);
}
/* Muay Thai activity styling - site pink */
.activity--muaythai {
  background-color: #FF69B4;
  border-color: var(--color-black);
}

.activity--muaythai:hover {
  background-color: #FF4DA6;
}

.activity--muaythai .activity__name,
.activity--muaythai .activity__time {
  color: var(--color-white);
}

.activity--closed {
  background-color: #F5F5F5;
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 8px,
    rgba(0, 0, 0, 0.1) 8px,
    rgba(0, 0, 0, 0.1) 16px
  );
  border-color: var(--color-black);
  border-style: dashed;
  opacity: 0.7;
}

.activity--closed:hover {
  background-color: #EEEEEE;
  opacity: 0.8;
}

.activity--closed .activity__name,
.activity--closed .activity__time {
  color: var(--color-black);
  font-style: italic;
}

/* Rest Day Styling */
.rest-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--spacing-lg) var(--spacing-md);
  background-color: #f8f9fa;
  border: 3px solid var(--color-black);
  border-radius: 8px;
  box-shadow: 4px 4px 0 var(--color-black);
  min-height: 400px;
  height: 100%;
}

.rest-icon {
  font-size: 3rem;
  margin-bottom: var(--spacing-sm);
}

.rest-text {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-gray);
  margin-bottom: var(--spacing-xs);
}

.rest-subtitle {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--color-gray);
  font-style: italic;
}

/* Responsive Design */
/* Large desktop screens - reduce activity size to prevent overflow */
@media (max-width: 1300px) {
  .schedule__container {
    padding: var(--spacing-md) var(--spacing-sm);
    max-width: 100vw;
    overflow-x: hidden;
  }
  
  .schedule__grid {
    max-width: 100%;
    overflow-x: auto;
  }
  
  .activity {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: 0.75rem;
    min-height: 40px;
  }
  
  .activity__name {
    font-size: 0.75rem;
    letter-spacing: 0.3px;
  }
  
  .activity__time {
    font-size: 0.7rem;
    min-width: 70px;
  }
  
  .schedule__day {
    min-width: 320px;
    flex-shrink: 0;
  }
  
  .section-title {
    font-size: clamp(2rem, 5vw, 2.8rem);
    word-wrap: break-word;
  }
}

/* Medium screens - better padding for activities and prevent overflow */
@media (max-width: 1024px) {
  .schedule__container {
    padding: var(--spacing-sm) var(--spacing-xs);
    max-width: 100vw;
    width: 100%;
  }
  
  .schedule__header {
    padding: 0 var(--spacing-sm);
    text-align: left;
  }
  
  .section-title {
    font-size: clamp(1.8rem, 4.5vw, 2.5rem);
    margin-bottom: var(--spacing-sm);
  }
  
  .activity {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 0.8rem;
    min-height: 38px;
  }
  
  .activity__name {
    font-size: 0.75rem;
    letter-spacing: 0.3px;
  }
  
  .activity__time {
    font-size: 0.7rem;
    min-width: 75px;
  }
  
  .day__timeline {
    padding: var(--spacing-sm);
  }
  
  .schedule__day {
    min-width: 300px;
    flex-shrink: 0;
  }
  
  .schedule__grid {
    padding: var(--spacing-sm) 0;
    gap: var(--spacing-sm);
  }
}

@media (max-width: 992px) {
  .schedule__container {
    padding: var(--spacing-sm) var(--spacing-xs);
    margin: 0 auto;
    max-width: 100vw;
    box-sizing: border-box;
  }
  
  .schedule__header {
    padding: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    text-align: left;
  }
  
  .section-title {
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    text-align: center;
    margin-bottom: var(--spacing-sm);
    padding: 0 var(--spacing-xs);
    line-height: 1.2;
  }
  
  .schedule__grid {
    display: flex;
    overflow-x: auto;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-xs);
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  
  .schedule__legend {
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    margin: 0 var(--spacing-xs);
    flex-wrap: wrap;
    justify-content: center;
  }
  
    .legend__label {
    font-size: 0.75rem;
  }

  .legend__description {
    font-size: 0.7rem;
    line-height: 1.3;
  }

  .activity {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: 0.75rem;
    min-height: 36px;
  }
  
  .activity__name {
    font-size: 0.7rem;
    letter-spacing: 0.3px;
  }
  
  .activity__time {
    font-size: 0.65rem;
    min-width: 70px;
  }
  
  .day__timeline {
    padding: var(--spacing-sm);
  }
  
  .schedule__day {
    min-width: 280px;
    max-width: 280px;
    min-height: 450px;
    flex-shrink: 0;
    scroll-snap-align: center;
  }
}

/* Mobile Swipe Instruction */
.schedule__mobile-instruction {
  display: none;
  text-align: center;
  padding: var(--spacing-xs) var(--spacing-md);
  margin: var(--spacing-md) auto var(--spacing-sm) auto;
  background-color: var(--color-accent);
  border: var(--border-thick);
  box-shadow: 4px 4px 0 var(--color-black);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--color-black);
  border-radius: 8px;
  animation: swipeHint 2s ease-in-out infinite;
  max-width: 300px;
  width: fit-content;
}

@keyframes swipeHint {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

@media (max-width: 768px) {
  .schedule__container {
    padding: var(--spacing-xs) 0;
    width: 100vw;
    max-width: 100vw;
    margin: 0;
    box-sizing: border-box;
  }
  
  .schedule__header {
    padding: 0 var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    text-align: left !important;
  }
  
  .schedule .section-title {
    font-size: clamp(1.4rem, 6vw, 1.8rem);
    text-align: left !important;
    margin-bottom: var(--spacing-xs);
    padding: 0;
    line-height: 1.1;
  }
  
  .schedule__mobile-instruction {
    display: block;
  }
  
  .schedule__grid {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-lg) var(--spacing-sm);
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* Hide scrollbar but keep functionality */
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Add shadow indicators for more content */
    position: relative;
  }
  /* Removed gradient overlays that were causing white fog during mobile scroll */
  
  .schedule__grid::-webkit-scrollbar {
    display: none;
  }
  
  .schedule__day {
    flex: 0 0 320px;
    scroll-snap-align: center;
    min-height: 500px;
  }
  
    .schedule__legend {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    margin: 0 var(--spacing-sm);
  }

  .legend__item {
    align-items: flex-start;
    width: 100%;
  }

  .legend__description {
    font-size: 0.75rem;
  }
  
  .day__title {
    font-size: 1.3rem;
  }
  
  .activity {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xs);
  }
  
  .activity__time {
    min-width: auto;
    font-size: 0.8rem;
  }
  
  .activity__name {
    font-size: 0.85rem;
    text-align: left;
  }
}

@media (max-width: 480px) {
  .schedule__container {
    width: 100vw;
    max-width: 100vw;
    padding: var(--spacing-xs) 0;
    margin: 0;
    box-sizing: border-box;
  }
  
  .schedule__header {
    padding: 0 var(--spacing-xs);
    margin-bottom: var(--spacing-xs);
    text-align: left !important;
  }
  
  .schedule .section-title {
    font-size: clamp(1.2rem, 8vw, 1.6rem);
    text-align: left !important;
    margin-bottom: var(--spacing-xs);
    padding: 0;
    line-height: 1;
    word-wrap: break-word;
  }
  
  .schedule__mobile-instruction {
    font-size: 0.75rem;
    padding: var(--spacing-xs) var(--spacing-sm);
    margin: var(--spacing-sm) auto var(--spacing-xs) auto;
    max-width: 250px;
    width: fit-content;
  }
  
  .schedule__grid {
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-md) var(--spacing-xs) var(--spacing-md);
  }
  
  .schedule__day {
    flex: 0 0 300px;
    min-height: 480px;
  }
  
  .schedule__legend {
    margin: var(--spacing-md) var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
  }
  
  .legend__color {
    width: 16px;
    height: 16px;
    border: 2px solid var(--color-black);
    box-shadow: 2px 2px 0 var(--color-black);
  }
  
    .legend__label {
    font-size: 0.75rem;
  }

  .legend__description {
    font-size: 0.65rem;
    line-height: 1.3;
  }

  .day__header {
    padding: var(--spacing-sm);
  }
  
  .day__title {
    font-size: 1.1rem;
  }
  
  .day__timeline {
    padding: var(--spacing-sm);
    gap: var(--spacing-xs);
  }
  
  .activity {
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 2px solid var(--color-black);
    box-shadow: 3px 3px 0 var(--color-black);
  }
  
  .activity:hover {
    box-shadow: 4px 4px 0 var(--color-black);
  }
  
  .activity__time {
    font-size: 0.75rem;
  }
  
  .activity__name {
    font-size: 0.8rem;
  }
  
  .activity--opengym-main {
    min-height: 70px;
    padding: var(--spacing-sm) var(--spacing-md);
  }
  
  .activity--opengym-main .activity__time {
    font-size: 0.85rem;
  }
  
  .activity--opengym-main .activity__name {
    font-size: 1rem;
  }
  
  .activity--opengym-main .activity__name small {
    font-size: 0.7rem;
  }
  
  .rest-message {
    padding: var(--spacing-md) var(--spacing-sm);
    min-height: 350px;
  }
  
  .rest-icon {
    font-size: 2.5rem;
  }
  
  .rest-text {
    font-size: 1rem;
  }
  
  .rest-subtitle {
    font-size: 0.8rem;
  }
}

/* ===============================================
   COMPREHENSIVE HEADER RESPONSIVENESS SYSTEM
   =============================================== */

/* Prevent horizontal scroll on all screen sizes */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Ensure corner badge never causes horizontal scroll */
.corner-opening-badge {
  clip: rect(0, calc(100vw - 20px), auto, 0);
}

@media (max-width: 768px) {
  .corner-opening-badge {
    clip: rect(0, calc(100vw - 10px), auto, 0);
  }
}

@media (max-width: 480px) {
  .corner-opening-badge {
    clip: rect(0, calc(100vw - 5px), auto, 0);
  }
}

/* Base header styles for all screens */
.header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1003;
  background-color: #FFD700;
  border-bottom: 4px solid #000000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.header__container {
  width: 100%;
  max-width: 100vw;
  padding: 0 var(--spacing-md);
  box-sizing: border-box;
}

/* Add body padding-top for desktop to compensate for fixed header */
@media (min-width: 1150px) {
  body {
    padding-top: clamp(80px, 12vw, 120px) !important;
  }
}

/* Hide hamburger menu by default on desktop */
.header__menu-toggle {
  display: none;
}

/* Ensure language toggle is visible on desktop */
@media (min-width: 1200px) {
  .header__container {
    gap: 1rem !important;
  }
  
  .language-toggle {
    display: flex !important;
    align-items: center !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    flex-shrink: 0 !important;
    order: 10 !important;
  }
  
  .header__nav {
    order: 5 !important;
  }
  
  .header__logo {
    order: 1 !important;
  }
  
  .header__menu-toggle {
    display: none !important;
  }
}

/* === DESKTOP BREAKPOINTS === */

/* Extra Large Desktops (1800px+) */
@media (min-width: 1800px) {
  .header__logo {
    min-width: clamp(180px, 14vw, 260px);
    max-width: clamp(230px, 18vw, 300px);
    flex-shrink: 0;
  }
  .header__nav {
    overflow: visible !important;
  }
  .header__nav a {
    font-size: 1.1rem;
    padding: 5px 8px;
  }
  .header__nav ul {
    gap: 8px;
    flex-wrap: nowrap;
  }
  
  /* Ensure language toggle remains visible */
  .language-toggle {
    display: flex !important;
    flex-shrink: 0 !important;
  }
  
  .language-toggle__btn {
    font-size: 0.85rem !important;
    padding: 0.4rem 0.8rem !important;
  }
}

/* Large Desktops (1400px-1799px) */
@media (min-width: 1400px) and (max-width: 1799px) {
  .header__logo {
    min-width: clamp(200px, 18vw, 350px);
    max-width: clamp(280px, 22vw, 450px);
  }
  .header__nav a {
    font-size: 1.0rem;
    padding: 6px 10px;
  }
  .header__nav ul {
    gap: 10px;
  }
  .header__nav a[href="#pricing"] {
    padding: 6px 12px;
    font-size: 0.95rem;
  }
  
  /* Ensure language toggle remains visible */
  .language-toggle {
    display: flex !important;
  }
}

/* Medium Desktops (1100px-1399px) */
@media (min-width: 1100px) and (max-width: 1399px) {
  .header__logo {
    min-width: clamp(180px, 16vw, 320px);
    max-width: clamp(250px, 20vw, 400px);
  }
  .header__nav a {
    font-size: 0.9rem;
    padding: 5px 8px;
  }
  .header__nav ul {
    gap: 8px;
  }
  .header__nav a[href="#pricing"] {
    padding: 5px 10px;
    font-size: 0.85rem;
  }
  
  /* Ensure language toggle remains visible */
  .language-toggle {
    display: flex !important;
  }
}

/* Small Desktops (1150px-1399px) - Reduce further before hamburger */
@media (min-width: 1150px) and (max-width: 1399px) {
  .header__nav a {
    font-size: 0.85rem;
    padding: 4px 7px;
  }
  .header__nav ul {
    gap: 7px;
  }
  .header__nav a[href="#pricing"] {
    padding: 4px 9px;
    font-size: 0.8rem;
  }
  
  /* Ensure language toggle remains visible */
  .language-toggle {
    display: flex !important;
  }
}

/* Removed - now covered by hamburger menu activation at max-width: 1199px */

/* === MOBILE RESPONSIVE LAYOUT === */
/* Additional responsive adjustments for remaining smaller screens */
@media (max-width: 1149px) {
  /* Prevent horizontal scroll in mobile */
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  body {
    padding-top: clamp(80px, 12vw, 100px) !important;
  }

  .header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1003 !important;
  }

  .header__container {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    position: relative !important;
    padding: var(--spacing-xs) var(--spacing-sm) !important;
    z-index: 1002 !important;
    min-height: clamp(80px, 12vw, 100px);
    max-width: 100vw;
  }

  .logo-container {
    max-width: min(400px, 60vw);
    height: clamp(80px, 14vw, 110px) !important;
  }

  .header__logo-img {
    height: clamp(40px, 6vw, 55px);
  }

  .header__logo {
    flex: 1;
    display: flex;
    justify-content: center;
    order: 2;
    min-width: clamp(200px, 25vw, 350px);
    max-width: clamp(300px, 55vw, 350px);
  }

  /* Hide desktop navigation */
  .header__nav {
    display: none !important;
  }

  /* Show hamburger menu */
  .header__menu-toggle {
    display: block !important;
    background: #FFD700 !important;
    border: 3px solid #000000 !important;
    cursor: pointer !important;
    width: 40px !important;
    height: 35px !important;
    position: relative !important;
    z-index: 1002 !important;
    padding: 5px !important;
    border-radius: 4px !important;
    order: 1 !important;
    box-shadow: 2px 2px 0 #000000 !important;
    margin-right: var(--spacing-sm) !important;
    pointer-events: auto !important;
    flex-shrink: 0;
  }

  .header__menu-toggle span {
    display: block !important;
    width: 100% !important;
    height: 3px !important;
    background-color: #000000 !important;
    position: absolute !important;
    left: 5px !important;
    transition: all 0.3s ease !important;
    border-radius: 1px !important;
    transform-origin: center !important;
    pointer-events: none !important;
  }

  .header__menu-toggle span:nth-child(1) {
    top: 8px !important;
  }

  .header__menu-toggle span:nth-child(2) {
    top: 15px !important;
  }

  .header__menu-toggle span:nth-child(3) {
    top: 22px !important;
  }

  /* Active hamburger animation */
  .header__menu-toggle.active {
    background: #FFF000 !important;
    border-color: #000000 !important;
    transform: translate(-2px, -2px) !important;
    box-shadow: 4px 4px 0 #000000 !important;
  }

  .header__menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px) !important;
    top: 16px !important;
    width: 25px !important;
    height: 4px !important;
  }

  .header__menu-toggle.active span:nth-child(2) {
    opacity: 0 !important;
    transform: scale(0) !important;
  }

  .header__menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px) !important;
    top: 16px !important;
    width: 25px !important;
    height: 4px !important;
  }

  /* Hover effects */
  .header__menu-toggle:hover {
    background: #FFF000 !important;
    transform: translate(-2px, -2px) !important;
    box-shadow: 4px 4px 0 #000000 !important;
  }

  .header__menu-toggle:hover span {
    background-color: #000000 !important;
  }
}

/* === TABLET OPTIMIZATIONS === */
@media (max-width: 768px) {
  .logo-container {
    max-width: min(350px, 70vw);
    height: clamp(90px, 16vw, 120px) !important;
    padding: 0.75rem;
    border-width: 4px;
  }

  .header__logo-img {
    height: clamp(45px, 8vw, 65px);
  }

  .header__logo {
    min-width: clamp(280px, 35vw, 350px);
    max-width: clamp(350px, 70vw, 350px);
  }

  .header__container {
    min-height: clamp(110px, 18vw, 130px);
    padding: var(--spacing-xs) var(--spacing-sm);
  }
}

/* === MOBILE OPTIMIZATIONS === */
@media (max-width: 480px) {
  .logo-container {
    max-width: min(300px, 80vw);
    height: clamp(100px, 20vw, 130px) !important;
    padding: 1rem;
  }

  .header__logo-img {
    height: clamp(55px, 12vw, 75px);
  }

  .header__logo {
    min-width: clamp(240px, 45vw, 300px);
    max-width: clamp(300px, 80vw, 300px);
  }

  .header__container {
    min-height: clamp(120px, 22vw, 140px);
    padding: var(--spacing-xs) var(--spacing-xs);
  }

  .header__menu-toggle {
    width: 35px !important;
    height: 30px !important;
    margin-right: var(--spacing-xs) !important;
  }
}

/* === EXTRA SMALL SCREENS === */
@media (max-width: 320px) {
  .header__logo {
    min-width: clamp(220px, 50vw, 280px);
    max-width: clamp(280px, 85vw, 300px);
  }

  .header__menu-toggle {
    width: 30px !important;
    height: 25px !important;
  }
}

/* ===========================
   GYM SECTION SPACING
   =========================== */

#gym.about {
  margin-top: 0;
}

/* ===========================
   GYM HERO SECTION - NEOBRUTALIST STYLE
   =========================== */

.gym-hero {
  position: relative;
  height: 60vh;
  min-height: 400px;
  max-height: 600px;
  overflow: hidden;
  margin-bottom: var(--spacing-xl);
  border: 8px solid var(--color-black);
  box-shadow: 16px 16px 0 var(--color-black);
}

.gym-hero__background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../images/gym/optimized/5.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  
  /* REDUCED NEOBRUTALIST FILTERS - Less distracting */
  filter: contrast(110%) saturate(60%) brightness(95%) hue-rotate(3deg);
  opacity: 0.7;
  
  /* Zoom effect on hover */
  transition: transform 0.3s ease, filter 0.3s ease, opacity 0.3s ease;
}

.gym-hero:hover .gym-hero__background {
  transform: scale(1.05);
  filter: contrast(120%) saturate(65%) brightness(100%) hue-rotate(5deg);
  opacity: 0.8;
}

.gym-hero__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(255, 215, 0, 0.2) 0%,      /* Yellow overlay - reduced */
    rgba(0, 0, 0, 0.3) 30%,         /* Black overlay - increased */
    rgba(255, 215, 0, 0.08) 70%,    /* Yellow overlay - reduced */
    rgba(0, 0, 0, 0.6) 100%         /* Black overlay at bottom - increased */
  );
  
  /* Additional brutal pattern overlay - more subtle */
  background-image: 
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 10px,
      rgba(0, 0, 0, 0.08) 10px,
      rgba(0, 0, 0, 0.08) 12px
    );
}

.gym-hero__container {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--spacing-lg);
}

.gym-hero__content {
  text-align: center;
  background-color: rgba(0, 0, 0, 0.8);
  color: var(--color-white);
  padding: var(--spacing-lg) var(--spacing-xl);
  border: 6px solid var(--color-black);
  box-shadow: 12px 12px 0 rgba(255, 215, 0, 0.9);
  transform: rotate(-1deg);
  transition: all 0.3s ease;
  backdrop-filter: blur(2px);
  
  /* Neobrutalist shape */
  clip-path: polygon(
    0 0, 
    calc(100% - 15px) 0, 
    100% 15px, 
    100% 100%, 
    15px 100%, 
    0 calc(100% - 15px)
  );
}

.gym-hero__content:hover {
  transform: rotate(0deg) translate(-4px, -4px);
  box-shadow: 16px 16px 0 rgba(255, 215, 0, 1);
}

.gym-hero__title {
  font-family: var(--font-heading);
  font-size: 3.5rem;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--spacing-md);
  letter-spacing: 2px;
  line-height: 1;
  text-shadow: 4px 4px 0 var(--color-black);
}

.gym-hero__subtitle {
  font-family: var(--font-primary);
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-white);
  letter-spacing: 3px;
  line-height: 1.4;
  text-shadow: 2px 2px 0 var(--color-black);
}

/* Responsive Design */
@media (max-width: 768px) {
  .gym-hero {
    height: 50vh;
    min-height: 350px;
    margin-bottom: var(--spacing-lg);
    border-width: 6px;
    box-shadow: 12px 12px 0 var(--color-black);
  }
  
  .gym-hero__content {
    padding: var(--spacing-md) var(--spacing-lg);
    box-shadow: 8px 8px 0 rgba(255, 215, 0, 0.9);
    transform: rotate(-0.5deg);
  }
  
  .gym-hero__content:hover {
    transform: rotate(0deg) translate(-3px, -3px);
    box-shadow: 12px 12px 0 rgba(255, 215, 0, 1);
  }
  
  .gym-hero__title {
    font-size: 2.8rem;
    letter-spacing: 1px;
    text-shadow: 3px 3px 0 var(--color-black);
  }
  
  .gym-hero__subtitle {
    font-size: 1rem;
    letter-spacing: 2px;
    text-shadow: 2px 2px 0 var(--color-black);
  }
}

@media (max-width: 480px) {
  .gym-hero {
    height: 45vh;
    min-height: 300px;
    border-width: 4px;
    box-shadow: 8px 8px 0 var(--color-black);
  }
  
  .gym-hero__container {
    padding: 0 var(--spacing-md);
  }
  
  .gym-hero__content {
    padding: var(--spacing-md);
    box-shadow: 6px 6px 0 rgba(255, 215, 0, 0.9);
    border-width: 4px;
  }
  
  .gym-hero__content:hover {
    transform: rotate(0deg) translate(-2px, -2px);
    box-shadow: 8px 8px 0 rgba(255, 215, 0, 1);
  }
  
  .gym-hero__title {
    font-size: 2.2rem;
    letter-spacing: 0.5px;
    text-shadow: 2px 2px 0 var(--color-black);
    line-height: 0.9;
  }
  
  .gym-hero__subtitle {
    font-size: 0.85rem;
    letter-spacing: 1px;
    text-shadow: 1px 1px 0 var(--color-black);
  }
}

/* ===========================
   COLLAGE SLIDER BRUTAL - GYM PHOTOS
   =========================== */

.gym-collage-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 20px;
  margin: 60px 0;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.gym-collage-slider__mobile-instruction {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  text-align: center;
  z-index: 2;
  display: none;
}

.gym-collage-slider__track {
  display: flex;
  transition: transform 0.5s ease;
}

.gym-collage-slide {
  width: 100%;
  flex-shrink: 0;
  position: relative;
}

/* GYM COLLAGE SLIDER */
.gym-collage-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 20px;
  margin: 60px 0;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.gym-collage-slider__mobile-instruction {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  text-align: center;
  z-index: 2;
  display: none;
}

.gym-collage-slider__track {
  display: flex;
  transition: transform 0.5s ease;
}

.gym-collage-slide {
  width: 100%;
  flex-shrink: 0;
  position: relative;
}

/* Mobile swipe instruction */
.gym-collage-slider__mobile-instruction {
  display: none;
  text-align: center;
  padding: var(--spacing-sm) 0;
  background-color: var(--color-yellow);
  border-bottom: 4px solid var(--color-black);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-black);
  text-transform: uppercase;
  letter-spacing: 1px;
}

@media (max-width: 768px) {
  .gym-collage-slider__mobile-instruction {
    display: block;
  }
  
  .gym-collage-slider__track {
    cursor: grab;
  }
  
  .gym-collage-slider__track:active {
    cursor: grabbing;
  }
}

.gym-collage-slider__track {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.gym-collage-slide {
  width: 100%;
  flex-shrink: 0;
  position: relative;
  padding: var(--spacing-lg) 0;
}

.gym-collage-slide.active {
  /* Active slide styles if needed */
}

.gym-collage__container {
  position: relative;
  height: 950px;
  max-width: 1300px;
  margin: 0 auto;
  padding: var(--spacing-md);
}

/* Desktop-only height reduction */
@media (min-width: 1024px) {
  .gym-collage__container {
    height: 600px;
  }
}

/* Base Photo Styles */
.gym-photo {
  position: absolute;
  transition: all 0.3s ease;
  cursor: pointer;
}

.gym-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  
  /* NEOBRUTALIST FILTERS - SAME AS GYM HERO */
  filter: contrast(140%) saturate(70%) brightness(110%) hue-rotate(5deg);
}

.gym-photo:hover img {
  filter: contrast(150%) saturate(60%) brightness(115%) hue-rotate(8deg);
}

.gym-photo__caption {
  display: none !important;
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--color-black);
  color: var(--color-white);
  padding: 6px 14px;
  border-radius: 0;
  font-size: 0.65rem;
  font-weight: bold;
  letter-spacing: 0.5px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  border: 2px solid var(--color-yellow);
  font-family: var(--font-primary);
  text-transform: uppercase;
}

/* Captions are hidden in main gallery, only shown in popup */
.gym-photo:hover .gym-photo__caption {
  opacity: 0;
  visibility: hidden;
}

/* Individual Single Photo Positions & Styles */

/* Photo 1 - Top Left */
.gym-photo--single-1 {
  top: 50%;
  left: 50%;
  transform: translate(-65%, -40%) rotate(-5deg);
  width: 720px;
  height: 540px;
  border: 10px solid var(--color-black);
  box-shadow: 30px 30px 0 #FFD700;
  z-index: 2;
}

.gym-photo--single-1:hover {
  transform: translate(-65%, -40%) rotate(-2deg) scale(1.08);
  box-shadow: 38px 38px 0 #FFD700;
}

/* Photo 2 - Top Right */
.gym-photo--single-2 {
  top: 50%;
  left: 50%;
  transform: translate(-35%, -40%) rotate(8deg);
  width: 690px;
  height: 520px;
  border: 8px solid var(--color-black);
  box-shadow: -22px 22px 0 #FF6B35;
  z-index: 2;
}

.gym-photo--single-2:hover {
  transform: translate(-35%, -40%) rotate(5deg) scale(1.08);
  box-shadow: -28px 28px 0 #FF6B35;
}

/* Photo 3 - Center Left */
.gym-photo--single-3 {
  top: 50%;
  left: 50%;
  transform: translate(-70%, -50%) rotate(-12deg);
  width: 710px;
  height: 535px;
  border: 12px solid var(--color-black);
  box-shadow: 32px -22px 0 #4A90E2;
  z-index: 2;
}

.gym-photo--single-3:hover {
  transform: translate(-70%, -50%) rotate(-8deg) scale(1.08);
  box-shadow: 40px -28px 0 #4A90E2;
}

/* Photo 4 - Bottom Center */
.gym-photo--single-4 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -30%) rotate(6deg);
  width: 715px;
  height: 540px;
  border: 9px solid var(--color-black);
  box-shadow: 18px -25px 0 #8E44AD;
  z-index: 2;
}

.gym-photo--single-4:hover {
  transform: translate(-50%, -30%) rotate(3deg) scale(1.08);
  box-shadow: 24px -32px 0 #8E44AD;
}

/* Photo 5 - Top Center */
.gym-photo--single-5 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%) rotate(-7deg);
  width: 725px;
  height: 545px;
  border: 11px solid var(--color-black);
  box-shadow: 28px 32px 0 #9B59B6;
  z-index: 2;
}

.gym-photo--single-5:hover {
  transform: translate(-50%, -60%) rotate(-4deg) scale(1.08);
  box-shadow: 36px 40px 0 #9B59B6;
}

/* Photo 6 - Center Right */
.gym-photo--single-6 {
  top: 50%;
  left: 50%;
  transform: translate(-30%, -50%) rotate(10deg);
  width: 700px;
  height: 525px;
  border: 8px solid var(--color-black);
  box-shadow: -25px 20px 0 #F39C12;
  z-index: 2;
}

.gym-photo--single-6:hover {
  transform: translate(-30%, -50%) rotate(7deg) scale(1.08);
  box-shadow: -32px 25px 0 #F39C12;
}

/* Photo 7 - Bottom Left */
.gym-photo--single-7 {
  top: 50%;
  left: 50%;
  transform: translate(-65%, -25%) rotate(-9deg);
  width: 715px;
  height: 540px;
  border: 10px solid var(--color-black);
  box-shadow: 28px -22px 0 #27AE60;
  z-index: 2;
}

.gym-photo--single-7:hover {
  transform: translate(-65%, -25%) rotate(-6deg) scale(1.08);
  box-shadow: 36px -30px 0 #27AE60;
}

/* Photo 8 - Bottom Right */
.gym-photo--single-8 {
  top: 50%;
  left: 50%;
  transform: translate(-35%, -25%) rotate(11deg);
  width: 700px;
  height: 525px;
  border: 9px solid var(--color-black);
  box-shadow: -22px -28px 0 #E67E22;
  z-index: 2;
}

.gym-photo--single-8:hover {
  transform: translate(-35%, -25%) rotate(8deg) scale(1.08);
  box-shadow: -30px -36px 0 #E67E22;
}

/* Photo 9 - Center Slight Left */
.gym-photo--single-9 {
  top: 50%;
  left: 50%;
  transform: translate(-65%, -50%) rotate(-6deg);
  width: 730px;
  height: 550px;
  border: 11px solid var(--color-black);
  box-shadow: 25px 22px 0 #8E44AD;
  z-index: 2;
}

.gym-photo--single-9:hover {
  transform: translate(-65%, -50%) rotate(-3deg) scale(1.08);
  box-shadow: 32px 30px 0 #8E44AD;
}

/* Photo 10 - Center Slight Right */
.gym-photo--single-10 {
  top: 50%;
  left: 50%;
  transform: translate(-35%, -50%) rotate(9deg);
  width: 725px;
  height: 545px;
  border: 10px solid var(--color-black);
  box-shadow: -28px 25px 0 #D35400;
  z-index: 2;
}

.gym-photo--single-10:hover {
  transform: translate(-35%, -50%) rotate(6deg) scale(1.08);
  box-shadow: -36px 32px 0 #D35400;
}

/* Photo 11 - Top Far Left */
.gym-photo--single-11 {
  top: 50%;
  left: 50%;
  transform: translate(-70%, -55%) rotate(-11deg);
  width: 710px;
  height: 535px;
  border: 8px solid var(--color-black);
  box-shadow: 30px 20px 0 #16A085;
  z-index: 2;
}

.gym-photo--single-11:hover {
  transform: translate(-70%, -55%) rotate(-8deg) scale(1.08);
  box-shadow: 38px 25px 0 #16A085;
}

/* Photo 12 - Top Far Right */
.gym-photo--single-12 {
  top: 50%;
  left: 50%;
  transform: translate(-30%, -55%) rotate(7deg);
  width: 720px;
  height: 540px;
  border: 12px solid var(--color-black);
  box-shadow: -25px 30px 0 #7B1FA2;
  z-index: 2;
}

.gym-photo--single-12:hover {
  transform: translate(-30%, -55%) rotate(4deg) scale(1.08);
  box-shadow: -32px 38px 0 #7B1FA2;
}

/* Photo 13 - Center */
.gym-photo--single-13 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-3deg);
  width: 735px;
  height: 560px;
  border: 13px solid var(--color-black);
  box-shadow: 32px 32px 0 #FFD700;
  z-index: 2;
}

.gym-photo--single-13:hover {
  transform: translate(-50%, -50%) rotate(0deg) scale(1.08);
  box-shadow: 40px 40px 0 #FFD700;
}

/* Photo 14 - Center Right */
.gym-photo--single-14 {
  top: 50%;
  left: 50%;
  transform: translate(-35%, -45%) rotate(4deg);
  width: 720px;
  height: 545px;
  border: 11px solid var(--color-black);
  box-shadow: -30px 25px 0 #E74C3C;
  z-index: 2;
}

.gym-photo--single-14:hover {
  transform: translate(-35%, -45%) rotate(1deg) scale(1.08);
  box-shadow: -38px 32px 0 #E74C3C;
}

/* Photo 15 - Center Left Rotated */
.gym-photo--single-15 {
  top: 50%;
  left: 50%;
  transform: translate(-60%, -40%) rotate(-8deg);
  width: 715px;
  height: 540px;
  border: 10px solid var(--color-black);
  box-shadow: 28px 30px 0 #2ECC71;
  z-index: 2;
}

.gym-photo--single-15:hover {
  transform: translate(-60%, -40%) rotate(-5deg) scale(1.08);
  box-shadow: 36px 38px 0 #2ECC71;
}

/* Photo 16 - Top Right Angled */
.gym-photo--single-16 {
  top: 50%;
  left: 50%;
  transform: translate(-40%, -60%) rotate(9deg);
  width: 700px;
  height: 525px;
  border: 9px solid var(--color-black);
  box-shadow: -25px 28px 0 #E91E63;
  z-index: 2;
}

.gym-photo--single-16:hover {
  transform: translate(-40%, -60%) rotate(6deg) scale(1.08);
  box-shadow: -32px 36px 0 #E91E63;
}

/* Photo 17 - Bottom Center */
.gym-photo--single-17 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -30%) rotate(-5deg);
  width: 725px;
  height: 545px;
  border: 11px solid var(--color-black);
  box-shadow: 30px -25px 0 #FF9800;
  z-index: 2;
}

.gym-photo--single-17:hover {
  transform: translate(-50%, -30%) rotate(-2deg) scale(1.08);
  box-shadow: 38px -32px 0 #FF9800;
}

/* Photo 18 - Left Side Tilted */
.gym-photo--single-18 {
  top: 50%;
  left: 50%;
  transform: translate(-70%, -45%) rotate(-10deg);
  width: 710px;
  height: 535px;
  border: 8px solid var(--color-black);
  box-shadow: 32px 22px 0 #673AB7;
  z-index: 2;
}

.gym-photo--single-18:hover {
  transform: translate(-70%, -45%) rotate(-7deg) scale(1.08);
  box-shadow: 40px 30px 0 #673AB7;
}

/* Photo 19 - Right Side Angled */
.gym-photo--single-19 {
  top: 50%;
  left: 50%;
  transform: translate(-30%, -45%) rotate(7deg);
  width: 720px;
  height: 540px;
  border: 12px solid var(--color-black);
  box-shadow: -28px 30px 0 #009688;
  z-index: 2;
}

.gym-photo--single-19:hover {
  transform: translate(-30%, -45%) rotate(4deg) scale(1.08);
  box-shadow: -36px 38px 0 #009688;
}

/* Photo 20 - Top Left Corner */
.gym-photo--single-20 {
  top: 50%;
  left: 50%;
  transform: translate(-65%, -55%) rotate(-6deg);
  width: 715px;
  height: 540px;
  border: 10px solid var(--color-black);
  box-shadow: 25px 28px 0 #FFC107;
  z-index: 2;
}

.gym-photo--single-20:hover {
  transform: translate(-65%, -55%) rotate(-3deg) scale(1.08);
  box-shadow: 32px 36px 0 #FFC107;
}

/* Photo 21 - Center Diagonal */
.gym-photo--single-21 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(8deg);
  width: 730px;
  height: 550px;
  border: 9px solid var(--color-black);
  box-shadow: -30px -25px 0 #795548;
  z-index: 2;
}

.gym-photo--single-21:hover {
  transform: translate(-50%, -50%) rotate(5deg) scale(1.08);
  box-shadow: -38px -32px 0 #795548;
}

/* Photo 22 - Bottom Right */
.gym-photo--single-22 {
  top: 50%;
  left: 50%;
  transform: translate(-35%, -25%) rotate(-7deg);
  width: 705px;
  height: 530px;
  border: 11px solid var(--color-black);
  box-shadow: 28px -30px 0 #607D8B;
  z-index: 2;
}

.gym-photo--single-22:hover {
  transform: translate(-35%, -25%) rotate(-4deg) scale(1.08);
  box-shadow: 36px -38px 0 #607D8B;
}

/* Photo 23 - Center High */
.gym-photo--single-23 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -65%) rotate(3deg);
  width: 720px;
  height: 545px;
  border: 12px solid var(--color-black);
  box-shadow: -25px 32px 0 #FF5722;
  z-index: 2;
}

.gym-photo--single-23:hover {
  transform: translate(-50%, -65%) rotate(0deg) scale(1.08);
  box-shadow: -32px 40px 0 #FF5722;
}

/* Photo 24 - Bottom Left Corner */
.gym-photo--single-24 {
  top: 50%;
  left: 50%;
  transform: translate(-70%, -30%) rotate(-9deg);
  width: 710px;
  height: 535px;
  border: 10px solid var(--color-black);
  box-shadow: 30px 25px 0 #00BCD4;
  z-index: 2;
}

.gym-photo--single-24:hover {
  transform: translate(-70%, -30%) rotate(-6deg) scale(1.08);
  box-shadow: 38px 32px 0 #00BCD4;
}

/* Photo 25 - Top Center */
.gym-photo--single-25 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -70%) rotate(6deg);
  width: 725px;
  height: 545px;
  border: 11px solid var(--color-black);
  box-shadow: -28px 30px 0 #CDDC39;
  z-index: 2;
}

.gym-photo--single-25:hover {
  transform: translate(-50%, -70%) rotate(3deg) scale(1.08);
  box-shadow: -36px 38px 0 #CDDC39;
}

/* Photo 26 - Right Side */
.gym-photo--single-26 {
  top: 50%;
  left: 50%;
  transform: translate(-25%, -50%) rotate(-4deg);
  width: 715px;
  height: 540px;
  border: 9px solid var(--color-black);
  box-shadow: 25px -28px 0 #FF4081;
  z-index: 2;
}

.gym-photo--single-26:hover {
  transform: translate(-25%, -50%) rotate(-1deg) scale(1.08);
  box-shadow: 32px -36px 0 #FF4081;
}



/* Single Photo Text Graphics */
.gym-graphic--single-text {
  position: absolute;
  bottom: 80px;
  right: 60px;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 2.2rem;
  color: rgba(0, 0, 0, 0.12);
  text-transform: uppercase;
  letter-spacing: 3px;
  z-index: 1;
  text-shadow: none;
  transform: rotate(-3deg);
  pointer-events: none;
}

.gym-graphic--single-text-opposite {
  position: absolute;
  top: 80px;
  left: 60px;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 2.2rem;
  color: rgba(0, 0, 0, 0.12);
  text-transform: uppercase;
  letter-spacing: 3px;
  z-index: 1;
  text-shadow: none;
  transform: rotate(3deg);
  pointer-events: none;
}



/* Responsive Design for Single Photos */
@media (max-width: 768px) {
  .gym-collage__container {
    height: 650px;
    padding: var(--spacing-sm);
  }
  
  /* Scale down all single photos proportionally */
  .gym-photo--single-1, .gym-photo--single-2, .gym-photo--single-3,
  .gym-photo--single-4, .gym-photo--single-5, .gym-photo--single-6,
  .gym-photo--single-7, .gym-photo--single-8, .gym-photo--single-9,
  .gym-photo--single-10, .gym-photo--single-11, .gym-photo--single-12,
  .gym-photo--single-13, .gym-photo--single-14, .gym-photo--single-15,
  .gym-photo--single-16, .gym-photo--single-17, .gym-photo--single-18,
  .gym-photo--single-19, .gym-photo--single-20, .gym-photo--single-21,
  .gym-photo--single-22, .gym-photo--single-23 {
    width: 450px !important;
    height: 340px !important;
    border-width: 6px !important;
  }

  /* Adjust shadows for tablet */
  .gym-photo--single-1 { box-shadow: 12px 12px 0 #FFD700 !important; }
  .gym-photo--single-2 { box-shadow: -10px 10px 0 #FF6B35 !important; }
  .gym-photo--single-3 { box-shadow: 14px -8px 0 #4A90E2 !important; }
  .gym-photo--single-4 { box-shadow: 8px -12px 0 #8E44AD !important; }
  .gym-photo--single-5 { box-shadow: 10px 14px 0 #9B59B6 !important; }
  .gym-photo--single-6 { box-shadow: -12px 10px 0 #F39C12 !important; }
  .gym-photo--single-7 { box-shadow: 14px -10px 0 #27AE60 !important; }
  .gym-photo--single-8 { box-shadow: -10px -14px 0 #E67E22 !important; }
  .gym-photo--single-9 { box-shadow: 12px 10px 0 #8E44AD !important; }
  .gym-photo--single-10 { box-shadow: -14px 12px 0 #D35400 !important; }
  .gym-photo--single-11 { box-shadow: 16px 10px 0 #16A085 !important; }
  .gym-photo--single-12 { box-shadow: -12px 16px 0 #7B1FA2 !important; }
  .gym-photo--single-13 { box-shadow: 14px 14px 0 #FFD700 !important; }
  .gym-photo--single-14 { box-shadow: -12px 10px 0 #E74C3C !important; }
  .gym-photo--single-15 { box-shadow: 12px 14px 0 #2ECC71 !important; }
  .gym-photo--single-16 { box-shadow: -10px 12px 0 #E91E63 !important; }
  .gym-photo--single-17 { box-shadow: 14px -10px 0 #FF9800 !important; }
  .gym-photo--single-18 { box-shadow: 16px 8px 0 #673AB7 !important; }
  .gym-photo--single-19 { box-shadow: -12px 14px 0 #009688 !important; }
  .gym-photo--single-20 { box-shadow: 10px 12px 0 #FFC107 !important; }
  .gym-photo--single-21 { box-shadow: -14px -10px 0 #795548 !important; }
  .gym-photo--single-22 { box-shadow: 12px -14px 0 #607D8B !important; }
  .gym-photo--single-23 { box-shadow: -10px 16px 0 #FF5722 !important; }
  .gym-photo--single-24 { box-shadow: 14px 10px 0 #00BCD4 !important; }
  .gym-photo--single-25 { box-shadow: -12px 14px 0 #CDDC39 !important; }
  .gym-photo--single-26 { box-shadow: 10px -12px 0 #FF4081 !important; }
  
  
  .gym-graphic--single-text {
    font-size: 1.8rem;
    letter-spacing: 2px;
    bottom: 60px;
    right: 40px;
  }
  
  .gym-graphic--single-text-opposite {
    font-size: 1.8rem;
    letter-spacing: 2px;
    top: 60px;
    left: 40px;
  }
}

@media (max-width: 480px) {
  .gym-collage__container {
    height: 550px;
  }
  
  /* Further scale down for mobile */
  .gym-photo--single-1, .gym-photo--single-2, .gym-photo--single-3,
  .gym-photo--single-4, .gym-photo--single-5, .gym-photo--single-6,
  .gym-photo--single-7, .gym-photo--single-8, .gym-photo--single-9,
  .gym-photo--single-10, .gym-photo--single-11, .gym-photo--single-12,
  .gym-photo--single-13, .gym-photo--single-14, .gym-photo--single-15,
  .gym-photo--single-16, .gym-photo--single-17, .gym-photo--single-18,
  .gym-photo--single-19, .gym-photo--single-20, .gym-photo--single-21,
  .gym-photo--single-22, .gym-photo--single-23, .gym-photo--single-24,
  .gym-photo--single-25, .gym-photo--single-26 {
    width: 350px !important;
    height: 265px !important;
    border-width: 5px !important;
  }

  /* Smaller shadows for mobile */
  .gym-photo--single-1 { box-shadow: 8px 8px 0 #FFD700 !important; }
  .gym-photo--single-2 { box-shadow: -6px 6px 0 #FF6B35 !important; }
  .gym-photo--single-3 { box-shadow: 8px -6px 0 #4A90E2 !important; }
  .gym-photo--single-4 { box-shadow: 6px -8px 0 #8E44AD !important; }
  .gym-photo--single-5 { box-shadow: 6px 8px 0 #9B59B6 !important; }
  .gym-photo--single-6 { box-shadow: -8px 6px 0 #F39C12 !important; }
  .gym-photo--single-7 { box-shadow: 8px -6px 0 #27AE60 !important; }
  .gym-photo--single-8 { box-shadow: -6px -8px 0 #E67E22 !important; }
  .gym-photo--single-9 { box-shadow: 8px 6px 0 #8E44AD !important; }
  .gym-photo--single-10 { box-shadow: -8px 8px 0 #D35400 !important; }
  .gym-photo--single-11 { box-shadow: 10px 6px 0 #16A085 !important; }
  .gym-photo--single-12 { box-shadow: -6px 10px 0 #7B1FA2 !important; }
  .gym-photo--single-13 { box-shadow: 8px 8px 0 #FFD700 !important; }
  .gym-photo--single-14 { box-shadow: -6px 8px 0 #E74C3C !important; }
  .gym-photo--single-15 { box-shadow: 8px 8px 0 #2ECC71 !important; }
  .gym-photo--single-16 { box-shadow: -6px 8px 0 #E91E63 !important; }
  .gym-photo--single-17 { box-shadow: 8px -6px 0 #FF9800 !important; }
  .gym-photo--single-18 { box-shadow: 10px 6px 0 #673AB7 !important; }
  .gym-photo--single-19 { box-shadow: -8px 8px 0 #009688 !important; }
  .gym-photo--single-20 { box-shadow: 6px 8px 0 #FFC107 !important; }
  .gym-photo--single-21 { box-shadow: -8px -6px 0 #795548 !important; }
  .gym-photo--single-22 { box-shadow: 8px -8px 0 #607D8B !important; }
  .gym-photo--single-23 { box-shadow: -6px 10px 0 #FF5722 !important; }
  .gym-photo--single-24 { box-shadow: 8px 6px 0 #00BCD4 !important; }
  .gym-photo--single-25 { box-shadow: -6px 8px 0 #CDDC39 !important; }
  .gym-photo--single-26 { box-shadow: 6px -8px 0 #FF4081 !important; }
  
  
  .gym-graphic--single-text {
    font-size: 1.4rem;
    letter-spacing: 1px;
    bottom: 40px;
    right: 30px;
  }
  
  .gym-graphic--single-text-opposite {
    font-size: 1.4rem;
    letter-spacing: 1px;
    top: 40px;
    left: 30px;
  }
  
  .gym-photo__caption {
    font-size: 0.55rem;
    padding: 4px 8px;
    border-width: 1px;
  }

  .collage-indicator {
    width: 12px;
    height: 12px;
    border-width: 1px;
  }

  .gym-collage-slider__indicators {
    gap: 5px;
    max-width: 400px;
  }
}

/* ===========================
   SLIDER NAVIGATION & INDICATORS
   =========================== */

.gym-collage-slider__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  pointer-events: none;
  z-index: 10;
}

.collage-nav-btn {
  background-color: var(--color-black);
  color: var(--color-white);
  border: 4px solid var(--color-black);
  width: 60px;
  height: 60px;
  font-size: 2rem;
  font-weight: 900;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 8px 8px 0 var(--color-yellow);
  pointer-events: all;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-3deg);
}

.collage-nav-btn:hover {
  background-color: var(--color-yellow);
  color: var(--color-black);
  transform: rotate(0deg) scale(1.1);
  box-shadow: 12px 12px 0 var(--color-black);
}

.collage-nav-btn--prev {
  left: 20px;
}

.collage-nav-btn--next {
  right: 20px;
}

.gym-collage-slider__indicators {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: var(--spacing-md);
  flex-wrap: wrap;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.collage-indicator {
  width: 16px;
  height: 16px;
  background-color: transparent;
  border: 2px solid var(--color-black);
  cursor: pointer;
  transition: all 0.3s ease;
  transform: rotate(45deg);
}

.collage-indicator.active {
  background-color: var(--color-yellow);
  border-color: var(--color-black);
  box-shadow: 3px 3px 0 var(--color-black);
  transform: rotate(45deg) scale(1.15);
}

.collage-indicator:hover {
  background-color: var(--color-yellow);
  transform: rotate(45deg) scale(1.1);
}

/* ===========================
   PHOTO POPUP MODAL
   =========================== */

.gym-photo-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
}

.gym-photo-popup.active {
  display: flex;
}

.popup-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  cursor: pointer;
}

.popup-container {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  background-color: var(--color-white);
  border: 8px solid var(--color-black);
  box-shadow: 20px 20px 0 var(--color-yellow);
  transform: rotate(-2deg);
  animation: popupEntrance 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: flex;
  flex-direction: column;
}

.popup-container:hover {
  transform: rotate(0deg);
}

.popup-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 50px;
  height: 50px;
  background-color: var(--color-black);
  color: var(--color-white);
  border: 4px solid var(--color-black);
  font-size: 2rem;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 6px 6px 0 var(--color-yellow);
  transition: all 0.3s ease;
  z-index: 10001;
}

.popup-close:hover {
  background-color: var(--color-yellow);
  color: var(--color-black);
  transform: rotate(90deg);
}

.popup-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  height: 60px;
  background-color: var(--color-black);
  color: var(--color-white);
  border: 4px solid var(--color-black);
  font-size: 2.5rem;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 6px 6px 0 var(--color-yellow);
  transition: all 0.3s ease;
  z-index: 10001;
  user-select: none;
}

.popup-nav--prev {
  left: 20px;
}

.popup-nav--next {
  right: 20px;
}

.popup-nav:hover {
  background-color: var(--color-yellow);
  color: var(--color-black);
  transform: translateY(-50%) scale(1.1);
}

.popup-content {
  padding: var(--spacing-lg);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
  flex: 1;
}

.popup-content img {
  max-width: 100%;
  max-height: 60vh;
  object-fit: contain;
  border: 4px solid var(--color-black);
  flex-shrink: 0;
}

.popup-caption {
  display: none !important;
  margin-top: var(--spacing-md);
  font-family: var(--font-primary);
  font-size: 1.1rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-black);
  background-color: var(--color-yellow);
  padding: var(--spacing-sm) var(--spacing-md);
  border: 3px solid var(--color-black);
  transform: rotate(1deg);
  flex-shrink: 0;
  margin-bottom: var(--spacing-sm);
}

@keyframes popupEntrance {
  0% {
    opacity: 0;
    transform: rotate(-2deg) scale(0.8);
  }
  100% {
    opacity: 1;
    transform: rotate(-2deg) scale(1);
  }
}

/* Desktop specific adjustments for popup */
@media (min-width: 769px) {
  .popup-container {
    max-height: 95vh;
  }
  
  .popup-content img {
    max-height: 65vh;
  }
  
  .popup-caption {
    font-size: 1.1rem;
    padding: var(--spacing-sm) var(--spacing-md);
    border-width: 2px;
  }
}

/* Responsive Design for Slider & Popup */
@media (max-width: 768px) {
  .collage-nav-btn {
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
    box-shadow: 6px 6px 0 var(--color-yellow);
  }

  .collage-nav-btn:hover {
    box-shadow: 8px 8px 0 var(--color-black);
  }

  .collage-indicator {
    width: 14px;
    height: 14px;
    border-width: 2px;
  }

  .gym-collage-slider__indicators {
    gap: 6px;
    max-width: 500px;
  }

  .popup-close {
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
    top: 8px;
    right: 8px;
  }

  .popup-nav {
    width: 45px;
    height: 45px;
    font-size: 2rem;
    box-shadow: 4px 4px 0 var(--color-yellow);
  }

  .popup-nav--prev {
    left: 10px;
  }

  .popup-nav--next {
    right: 10px;
  }

  .popup-caption {
    font-size: 1rem;
    padding: var(--spacing-xs) var(--spacing-sm);
  }
}

@media (max-width: 480px) {
  .gym-collage-slider__nav {
    padding: 0 10px;
  }

  .collage-nav-btn {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
    box-shadow: 4px 4px 0 var(--color-yellow);
  }

  .collage-nav-btn:hover {
    box-shadow: 6px 6px 0 var(--color-black);
  }

  .collage-indicator {
    width: 14px;
    height: 14px;
    gap: 8px;
  }

  .popup-container {
    max-width: 95vw;
    max-height: 90vh;
    border-width: 6px;
    box-shadow: 15px 15px 0 var(--color-yellow);
  }

  .popup-close {
    width: 35px;
    height: 35px;
    font-size: 1.2rem;
    top: 6px;
    right: 6px;
    box-shadow: 4px 4px 0 var(--color-yellow);
  }

  .popup-content {
    padding: var(--spacing-sm);
  }

  .popup-content img {
    max-height: 50vh;
  }

  .popup-caption {
    font-size: 0.85rem;
    margin-top: var(--spacing-xs);
    padding: 6px 10px;
  }
}

/* FAQ Section */
.faq {
  padding: var(--spacing-lg) 0;
  background-color: var(--color-white);
}

.faq__container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--spacing-md) 0;
}

.faq__header {
  text-align: center;
  margin-bottom: var(--spacing-lg);
}

.faq__section {
  margin-bottom: var(--spacing-xl);
}

.faq__section:last-child {
  margin-bottom: 0;
}

.faq__section-title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md);
  border: var(--border-thick);
  box-shadow: 6px 6px 0px var(--color-black);
  text-align: center;
  max-width: 800px;
  margin: 0 auto var(--spacing-md) auto;
}

/* Seção TREINOS - Vermelho */
.faq__section-title--training {
  background-color: #DC143C;
  color: var(--color-white);
}

/* Seção PREÇOS - Amarelo (mantém original) */
.faq__section-title--pricing {
  background-color: var(--color-accent);
  color: var(--color-black);
}

/* Seção CENTRO DE TREINO - Azul */
.faq__section-title--facilities {
  background-color: #0088CC;
  color: var(--color-white);
}

/* Seção SUPORTE - Rosa */
.faq__section-title--support {
  background-color: #FF69B4;
  color: var(--color-white);
}

.faq__grid {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  max-width: 800px;
  margin: 0 auto;
}

.faq-item {
  border: var(--border-thick);
  background: var(--color-white);
  box-shadow: 8px 8px 0px var(--color-black);
  transition: all 0.3s ease;
}

.faq-item:hover {
  box-shadow: 12px 12px 0px var(--color-black);
  transform: translate(-2px, -2px);
}

.faq-question {
  padding: var(--spacing-md);
  background: var(--color-black);
  color: var(--color-white);
  border: none;
  width: 100%;
  text-align: left;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-transform: uppercase;
  transition: background-color 0.3s ease;
}

.faq-question:hover {
  background: var(--color-dark-gray);
}

.faq-question:focus {
  outline: none;
  background: var(--color-dark-gray);
}

.faq-answer {
  padding: 0 var(--spacing-md);
  background: var(--color-white);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

.faq-answer.active {
  max-height: 1400px;
  padding: var(--spacing-md);
}

.faq-answer p {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
  color: var(--color-black);
}

.faq-answer p strong {
  font-weight: 700;
  color: var(--color-black);
}

.faq-icon {
  font-size: 1.2rem;
  transition: transform 0.3s ease;
  min-width: 20px;
  text-align: center;
}

.faq-icon.rotated {
  transform: rotate(180deg);
}

/* FAQ Mobile Styles */
@media (max-width: 768px) {
  .faq {
    padding: var(--spacing-md) 0;
  }

  .faq__container {
    width: 95%;
    padding: var(--spacing-sm) 0;
  }

  .faq__section-title {
    font-size: 1.3rem;
    padding: var(--spacing-xs) var(--spacing-sm);
    box-shadow: 4px 4px 0px var(--color-black);
  }

  /* Manter cores específicas nos títulos em tablet */
  .faq__section-title--training { background-color: #DC143C; color: var(--color-white); }
  .faq__section-title--pricing { background-color: var(--color-accent); color: var(--color-black); }
  .faq__section-title--facilities { background-color: #0088CC; color: var(--color-white); }
  .faq__section-title--support { background-color: #FF69B4; color: var(--color-white); }

  .faq__grid {
    gap: var(--spacing-sm);
  }

  .faq-item {
    box-shadow: 6px 6px 0px var(--color-black);
  }

  .faq-item:hover {
    box-shadow: 8px 8px 0px var(--color-black);
  }

  .faq-question {
    padding: var(--spacing-sm);
    font-size: 1rem;
  }

  .faq-answer.active {
    max-height: 1000px;
    padding: var(--spacing-sm);
  }

  .faq-answer p {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .faq__section-title {
    font-size: 1.1rem;
    padding: var(--spacing-xs);
    box-shadow: 3px 3px 0px var(--color-black);
    margin: 0 var(--spacing-xs) var(--spacing-sm) var(--spacing-xs);
  }

  /* Manter cores específicas nos títulos em mobile */
  .faq__section-title--training { background-color: #DC143C; color: var(--color-white); }
  .faq__section-title--pricing { background-color: var(--color-accent); color: var(--color-black); }
  .faq__section-title--facilities { background-color: #0088CC; color: var(--color-white); }
  .faq__section-title--support { background-color: #FF69B4; color: var(--color-white); }

  .faq__grid {
    margin: 0 var(--spacing-xs);
  }

  .faq-item {
    box-shadow: 4px 4px 0px var(--color-black);
  }

  .faq-item:hover {
    box-shadow: 6px 6px 0px var(--color-black);
  }

  .faq-question {
    padding: var(--spacing-xs);
    font-size: 0.9rem;
  }

  .faq-answer.active {
    max-height: 1200px;
    padding: var(--spacing-xs);
  }

  .faq-answer p {
    font-size: 0.85rem;
  }
}

/* ============================================
   COUPON SYSTEM - BRUTALIST STYLE
   ============================================ */

/* Pré-Form: Validação de Cupão */
.coupon-pre-form {
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
  border: 5px solid var(--color-black);
  padding: 1.5rem;
  margin-bottom: 10px; /* Add margin to prevent shadow clipping */
  margin-right: 10px; /* Add right margin for shadow */
  box-shadow: 8px 8px 0 var(--color-black);
  position: relative;
  overflow: hidden;
  display: none; /* Hidden by default, shown via JS */
}

.coupon-pre-form::before {
  content: '🎟️';
  position: absolute;
  top: -20px;
  right: -20px;
  font-size: 120px;
  opacity: 0.1;
  transform: rotate(15deg);
}

.coupon-pre-form__header {
  text-align: center;
  margin-bottom: 1.25rem;
  position: relative;
  z-index: 1;
  background: linear-gradient(135deg, var(--color-accent) 0%, #FFB700 100%);
  padding: 1rem 1.25rem;
  border: 4px solid var(--color-black);
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.3);
  margin: -1.25rem -1.25rem 1.25rem -1.25rem;
  transform: rotate(-0.5deg);
}

.coupon-pre-form__title {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  letter-spacing: 1px;
  color: var(--color-black);
  text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.5);
}

.coupon-pre-form__subtitle {
  font-size: 1rem;
  color: var(--color-black);
  line-height: 1.5;
  font-weight: 600;
}

.coupon-pre-form__discount-badge {
  background: var(--color-black);
  color: var(--color-accent);
  border: 4px solid var(--color-black);
  padding: 0.75rem 1rem;
  margin: 1rem 0;
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.05rem;
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.3);
  transform: rotate(-1deg);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: rotate(-1deg) scale(1); }
  50% { transform: rotate(-1deg) scale(1.02); }
}

/* Reduce font sizes in savings banner to fit better */
.coupon-savings-banner {
  padding: 1.5rem;
  margin: 0 0 1.5rem 0;
}

.coupon-savings-banner__main {
  font-size: 1.6rem;
}

.coupon-savings-banner__main strong {
  font-size: 2rem;
}

.coupon-savings-banner__price-row {
  font-size: 1rem;
  padding: 0.4rem;
  flex-wrap: wrap;
}

.coupon-savings-banner__label {
  min-width: 100px;
  font-size: 1rem;
}

.coupon-savings-banner__old-price {
  font-size: 1.1rem;
}

.coupon-savings-banner__new-price,
.coupon-savings-banner__free {
  font-size: 1.4rem;
  padding: 0.3rem 0.8rem;
}

.coupon-savings-banner__note {
  font-size: 0.85rem;
  padding: 0.5rem;
  line-height: 1.3;
}

.coupon-pre-form__how-it-works li {
  font-size: 0.85rem;
  line-height: 1.5;
}

.coupon-savings-banner::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(255, 255, 255, 0.1) 10px,
    rgba(255, 255, 255, 0.1) 20px
  );
  animation: slide 20s linear infinite;
}

@keyframes slide {
  0% { transform: translate(0, 0); }
  100% { transform: translate(50px, 50px); }
}

.coupon-savings-banner__content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.coupon-savings-banner__icon {
  font-size: 4rem;
  line-height: 1;
  filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, 0.2));
  animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.coupon-savings-banner__text {
  flex: 1;
}

.coupon-savings-banner__title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-black);
  text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.5);
  margin-bottom: 0.5rem;
}

.coupon-savings-banner__main {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 900;
  color: var(--color-black);
  text-shadow: 3px 3px 0 rgba(255, 255, 255, 0.5);
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

.coupon-savings-banner__main strong {
  color: #DC2626;
  font-size: 2.5rem;
  text-shadow: 3px 3px 0 rgba(255, 255, 255, 0.7);
}

.coupon-savings-banner__breakdown {
  font-family: var(--font-body);
  font-size: 1rem;
  color: rgba(0, 0, 0, 0.8);
  font-weight: 600;
  line-height: 1.4;
}

.coupon-savings-banner__plus {
  display: inline-block;
  margin: 0 0.25rem;
  font-weight: 900;
  color: var(--color-black);
}

/* Price Breakdown Styles */
.coupon-savings-banner__prices {
  margin: 1.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.coupon-savings-banner__price-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 600;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 8px;
}

.coupon-savings-banner__label {
  min-width: 110px;
  font-weight: 800;
  font-size: 1.1rem;
  color: #000000;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.coupon-savings-banner__old-price {
  position: relative;
  color: #000000;
  font-weight: 800;
  font-size: 1.3rem;
  padding: 0.25rem 0.5rem;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 4px;
  display: inline-block;
}

.coupon-savings-banner__old-price::after {
  content: '';
  position: absolute;
  left: -5%;
  right: -5%;
  top: 50%;
  height: 2px;
  background: #DC2626;
  transform: translateY(-50%);
  z-index: 1;
}

.coupon-savings-banner__arrow {
  font-size: 2rem;
  font-weight: 900;
  color: var(--color-black);
  margin: 0 0.5rem;
}

.coupon-savings-banner__new-price {
  font-size: 1.8rem;
  font-weight: 900;
  color: #FFFFFF;
  background: #16A34A;
  padding: 0.4rem 1rem;
  border-radius: 8px;
  border: 3px solid #000000;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.3);
  display: inline-block;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
}

.coupon-savings-banner__free {
  font-size: 1.8rem;
  font-weight: 900;
  color: #FFFFFF;
  background: #16A34A;
  padding: 0.4rem 1rem;
  border-radius: 8px;
  border: 3px solid #000000;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.3);
  display: inline-block;
  text-transform: uppercase;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
  animation: pulse-green 2s ease-in-out infinite;
}

@keyframes pulse-green {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.coupon-savings-banner__insurance {
  font-size: 1.2rem;
  font-weight: 800;
  color: #000000;
  background: rgba(255, 255, 255, 0.7);
  padding: 0.3rem 0.75rem;
  border-radius: 6px;
  border: 2px solid rgba(0, 0, 0, 0.3);
  display: inline-block;
}

.coupon-savings-banner__note {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.8);
  text-align: center;
  margin-top: 0.5rem;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  border: 2px solid rgba(0, 0, 0, 0.2);
}

/* Savings Banner - Mobile Responsive */
@media (max-width: 768px) {
  .coupon-savings-banner {
    padding: 1.5rem;
    margin: 0 0 1.5rem 0;
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.4);
  }
  
  .coupon-savings-banner__content {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
  
  .coupon-savings-banner__icon {
    font-size: 3rem;
  }
  
  .coupon-savings-banner__title {
    font-size: 1.2rem;
    letter-spacing: 1px;
  }
  
  .coupon-savings-banner__main {
    font-size: 1.5rem;
  }
  
  .coupon-savings-banner__main strong {
    font-size: 2rem;
  }
  
  .coupon-savings-banner__breakdown {
    font-size: 0.9rem;
  }
  
  .coupon-savings-banner__prices {
    gap: 1rem;
    margin: 1rem 0;
  }
  
  .coupon-savings-banner__price-row {
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;
    font-size: 1rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.5);
  }
  
  .coupon-savings-banner__label {
    min-width: auto;
    font-size: 1rem;
    margin-bottom: 0.25rem;
  }
  
  .coupon-savings-banner__old-price {
    font-size: 1.4rem;
    padding: 0.4rem 0.75rem;
  }
  
  .coupon-savings-banner__old-price::after {
    height: 2px;
  }
  
  .coupon-savings-banner__arrow {
    font-size: 1.8rem;
    margin: 0.5rem 0;
  }
  
  .coupon-savings-banner__new-price {
    font-size: 1.6rem;
    padding: 0.5rem 1.25rem;
  }
  
  .coupon-savings-banner__free {
    font-size: 1.6rem;
    padding: 0.5rem 1.25rem;
  }
  
  .coupon-savings-banner__note {
    font-size: 0.9rem;
    padding: 0.75rem;
    line-height: 1.4;
  }
  
  .coupon-savings-banner__insurance {
    font-size: 1.1rem;
  }
}

.coupon-pre-form__how-it-works {
  background: rgba(0, 0, 0, 0.05);
  border: 3px solid var(--color-black);
  padding: 0.875rem 1rem;
  margin: 1rem 0;
  position: relative;
  z-index: 1;
}

.coupon-pre-form__how-it-works h5 {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.1rem;
  margin-bottom: 1rem;
  text-transform: uppercase;
  color: var(--color-black);
}

.coupon-pre-form__how-it-works ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.coupon-pre-form__how-it-works li {
  font-family: var(--font-primary);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 0.75rem;
  color: var(--color-black);
  font-weight: 600;
  padding-left: 0;
}

.coupon-pre-form__how-it-works li:last-child {
  margin-bottom: 0;
}

.coupon-pre-form__input-group {
  margin-bottom: 1rem;
}

.coupon-pre-form__label {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  letter-spacing: 0.5px;
}

.coupon-pre-form__input {
  width: 100%;
  padding: 1rem 1.25rem;
  border: 4px solid var(--color-black);
  background: var(--color-white);
  font-family: var(--font-primary);
  font-size: 1.1rem;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
}

.coupon-pre-form__input:focus {
  outline: none;
  background: var(--color-white);
  border-color: var(--color-black);
  transform: translate(-3px, -3px);
  box-shadow: 7px 7px 0 var(--color-black);
}

.coupon-pre-form__input::placeholder {
  color: #999;
  opacity: 0.7;
  font-weight: 500;
}

.coupon-pre-form__buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.coupon-btn {
  flex: 1;
  min-width: 150px;
  padding: 1.125rem 2rem;
  border: 4px solid var(--color-black);
  background: var(--color-black);
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.3);
  position: relative;
  overflow: hidden;
}

.coupon-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s;
}

.coupon-btn:hover:not(:disabled)::before {
  left: 100%;
}

.coupon-btn:hover:not(:disabled) {
  background: var(--color-accent);
  color: var(--color-black);
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 var(--color-black);
}

.coupon-btn:active:not(:disabled) {
  transform: translate(0, 0);
  box-shadow: 3px 3px 0 var(--color-black);
  animation: none;
}

.coupon-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  animation: none;
}

.coupon-btn--primary {
  background: var(--color-accent); /* Amarelo forte - ação principal */
  color: var(--color-black);
  border-color: var(--color-black);
  font-weight: 900;
  cursor: pointer;
}

.coupon-btn--primary:hover:not(:disabled) {
  background: #FFB700; /* Amarelo mais escuro */
  color: var(--color-black);
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 var(--color-black);
  animation: none;
}

.coupon-btn--secondary {
  background: var(--color-white); /* Fundo branco para contraste */
  border-color: var(--color-black);
  color: var(--color-black);
  box-shadow: 6px 6px 0 var(--color-black);
  font-weight: 700;
  position: relative;
}

.coupon-btn--secondary:hover:not(:disabled) {
  background: #f0f0f0; /* Cinza muito claro no hover */
  color: var(--color-black);
  border-color: var(--color-black);
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 var(--color-black);
}

/* Botão Continuar para Inscrição - Azul como INSCREVE-TE JÁ */
.coupon-btn--continue {
  background: #0088CC; /* Azul como o INSCREVE-TE JÁ */
  color: var(--color-white);
  border-color: var(--color-black);
  font-weight: 900;
  animation: continuePulse 2s ease-in-out infinite;
  cursor: pointer;
}

.coupon-btn--continue:hover:not(:disabled) {
  background: #000000; /* Preto no hover */
  color: #0088CC;
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 #0088CC;
  animation: none;
}

.coupon-btn--continue:active:not(:disabled) {
  transform: translate(0, 0);
  box-shadow: 3px 3px 0 var(--color-black);
  animation: none;
}

/* Mensagens de Validação */
.coupon-message {
  padding: 1.25rem 1.5rem;
  border: 4px solid var(--color-black);
  margin-top: 1.5rem;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.1rem;
  display: none;
  animation: slideDown 0.4s ease;
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.3);
  text-align: center;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.coupon-message.show {
  display: block;
}

.coupon-message--success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: var(--color-white);
  border-color: #047857;
  animation: slideDown 0.4s ease, successPulse 1s ease 0.5s;
}

@keyframes successPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.coupon-message--error {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: var(--color-white);
  border-color: #b91c1c;
  animation: slideDown 0.4s ease, shake 0.5s ease 0.2s;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-10px); }
  75% { transform: translateX(10px); }
}

.coupon-message--loading {
  background: linear-gradient(135deg, var(--color-accent) 0%, #FFA500 100%);
  color: var(--color-black);
  border-color: var(--color-black);
  position: relative;
  overflow: hidden;
}

.coupon-message--loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: loadingShimmer 1.5s infinite;
}

@keyframes loadingShimmer {
  to { left: 100%; }
}

/* Pós-Form: Captura de Dados */
.coupon-post-form {
  background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);
  border: 5px solid var(--color-black);
  padding: 2.5rem;
  margin-bottom: 2rem;
  box-shadow: 12px 12px 0 var(--color-black);
  display: none;
  position: relative;
}

.coupon-post-form::before {
  content: '✅';
  position: absolute;
  top: -15px;
  right: -15px;
  font-size: 100px;
  opacity: 0.08;
  transform: rotate(-15deg);
}

.coupon-post-form.show {
  display: block;
  animation: slideDown 0.5s ease;
}

.coupon-post-form__header {
  text-align: center;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 4px solid var(--color-black);
  position: relative;
  z-index: 1;
}

.coupon-post-form__title {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  color: var(--color-black);
}

.coupon-post-form__subtitle {
  font-size: 1rem;
  color: var(--color-secondary);
  font-weight: 600;
}

.coupon-post-form__field {
  margin-bottom: 1.25rem;
}

.coupon-post-form__label {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  letter-spacing: 0.5px;
}

.coupon-post-form__input {
  width: 100%;
  padding: 0.875rem 1rem;
  border: 3px solid var(--color-black);
  background: var(--color-white);
  font-family: var(--font-primary);
  font-size: 0.95rem;
  transition: all 0.2s ease;
}

.coupon-post-form__input:focus {
  outline: none;
  background: var(--color-accent);
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--color-black);
}

.coupon-post-form__submit {
  width: 100%;
  padding: 1.25rem 2rem;
  border: 5px solid var(--color-black);
  background: linear-gradient(135deg, var(--color-accent) 0%, #FFA500 100%);
  color: var(--color-black);
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.125rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 8px 8px 0 var(--color-black);
  margin-top: 1.5rem;
  position: relative;
  overflow: hidden;
}

.coupon-post-form__submit::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 0.6s;
}

.coupon-post-form__submit:hover:not(:disabled)::before {
  left: 100%;
}

.coupon-post-form__submit:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--color-black) 0%, #333 100%);
  color: var(--color-accent);
  transform: translate(-4px, -4px);
  box-shadow: 12px 12px 0 var(--color-accent);
}

.coupon-post-form__submit:active:not(:disabled) {
  transform: translate(0, 0);
  box-shadow: 4px 4px 0 var(--color-black);
}

.coupon-post-form__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Mensagem de Sucesso Final */
.coupon-final-success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border: 5px solid var(--color-black);
  padding: 3rem 2.5rem;
  text-align: center;
  box-shadow: 12px 12px 0 var(--color-black);
  animation: popIn 0.6s ease, celebrate 1s ease 0.7s;
  position: relative;
  overflow: hidden;
}

.coupon-final-success::before {
  content: '🎉';
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 60px;
  opacity: 0.2;
  animation: float 3s ease-in-out infinite;
}

.coupon-final-success::after {
  content: '🎊';
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: 60px;
  opacity: 0.2;
  animation: float 3s ease-in-out infinite reverse;
}

@keyframes popIn {
  0% {
    opacity: 0;
    transform: scale(0.5) rotate(-5deg);
  }
  70% {
    transform: scale(1.05) rotate(2deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

@keyframes celebrate {
  0%, 100% { transform: scale(1); }
  25% { transform: scale(1.02) rotate(1deg); }
  75% { transform: scale(1.02) rotate(-1deg); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.coupon-final-success h3 {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  letter-spacing: 2px;
  color: var(--color-white);
  text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 1;
}

.coupon-final-success p {
  font-size: 1.15rem;
  line-height: 1.7;
  margin-bottom: 1.25rem;
  color: var(--color-white);
  font-weight: 600;
  position: relative;
  z-index: 1;
}

.coupon-final-success strong {
  font-family: var(--font-heading);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 1.3rem;
  letter-spacing: 1px;
  color: var(--color-accent);
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
}

/* Estados de Loading */
.coupon-btn--loading::after {
  content: "...";
  animation: loadingDots 1.5s infinite;
}

@keyframes loadingDots {
  0%, 20% { content: "."; }
  40% { content: ".."; }
  60%, 100% { content: "..."; }
}

/* Responsivo */
@media (max-width: 768px) {
  .coupon-pre-form,
  .coupon-post-form {
    padding: 1.5rem;
    box-shadow: 8px 8px 0 var(--color-black);
  }

  .coupon-pre-form::before {
    font-size: 80px;
    top: -10px;
    right: -10px;
  }

  .coupon-pre-form__title {
    font-size: 1.5rem;
  }

  .coupon-pre-form__subtitle {
    font-size: 0.9rem;
  }

  .coupon-pre-form__discount-badge {
    font-size: 1rem;
    padding: 0.875rem 1rem;
  }

  .coupon-pre-form__input {
    font-size: 1rem;
    padding: 0.875rem 1rem;
  }

  .coupon-pre-form__buttons {
    flex-direction: column;
  }

  .coupon-btn {
    width: 100%;
    min-width: 100%;
    padding: 1rem 1.5rem;
    font-size: 0.95rem;
  }

  .coupon-message {
    font-size: 1rem;
    padding: 1rem 1.25rem;
  }

  .coupon-post-form__title {
    font-size: 1.5rem;
  }

  .coupon-post-form__submit {
    padding: 1.125rem 1.5rem;
    font-size: 1rem;
  }

  .coupon-final-success {
    padding: 2rem 1.5rem;
    box-shadow: 8px 8px 0 var(--color-black);
  }

  .coupon-final-success::before,
  .coupon-final-success::after {
    font-size: 40px;
  }

  .coupon-final-success h3 {
    font-size: 1.75rem;
  }

  .coupon-final-success p {
    font-size: 1rem;
  }

  .coupon-final-success strong {
    font-size: 1.15rem;
  }
}

/* ============================================
   MOBILE BOTTOM ACTION BAR
   ============================================ */

/* Hide on desktop - mobile only */
.mobile-bottom-bar {
  display: none;
}

/* Hide mobile bottom bar when modal is open */
body.modal-open .mobile-bottom-bar {
  display: none !important;
}

@media (max-width: 768px) {
  .mobile-bottom-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 9999;
    background-color: #FFFFFF;
    border-top: 4px solid #000000;
    box-shadow: 0 -10px 25px rgba(0, 0, 0, 0.4);
    padding: 0;
    gap: 0;
  }

  .mobile-bottom-bar__main-cta {
    flex: 1;
    background-color: #FFD700;
    color: #000000;
    border: none;
    border-right: 4px solid #000000;
    padding: 1rem;
    font-family: var(--font-primary);
    font-weight: 900;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .mobile-bottom-bar__main-cta:active {
    background-color: #FFC700;
    transform: scale(0.98);
  }

  .mobile-bottom-bar__icon-link {
    width: 3.5rem;
    flex: 0 0 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FFFFFF;
    border-right: 4px solid #000000;
    color: #000000;
    transition: background-color 0.2s ease;
  }

  .mobile-bottom-bar__icon-link:last-child {
    border-right: none;
  }

  .mobile-bottom-bar__icon-link:active {
    filter: brightness(0.95);
  }

  .mobile-bottom-bar__icon-link svg {
    width: 24px;
    height: 24px;
  }

  /* Subtle colored backgrounds for better affordance */
  .mobile-bottom-bar__icon-link--whatsapp {
    background-color: #E8F5E9; /* Very light green */
  }

  .mobile-bottom-bar__icon-link--instagram {
    background-color: #FCE4EC; /* Very light pink */
  }

  .mobile-bottom-bar__icon-link--whatsapp svg {
    fill: #25D366;
  }

  .mobile-bottom-bar__icon-link--instagram svg {
    fill: #E1306C;
  }
}

/* Desktop Floating Action Button Group */
.desktop-fab {
  display: none;
}

/* Hide desktop FAB when modal is open */
body.modal-open .desktop-fab {
  display: none !important;
}

@media (min-width: 769px) {
  .desktop-fab {
    display: block;
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 9998;
  }

  /* Main CTA Button */
  .desktop-fab__button {
    background-color: #FFD700;
    color: #000000;
    border: 4px solid #000000;
    box-shadow: 6px 6px 0 #000000;
    padding: 1rem 1.5rem;
    font-family: var(--font-primary);
    font-weight: 900;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    animation: fab-pulse 2s ease-in-out infinite;
    display: block;
    width: 100%;
  }

  .desktop-fab__button:hover {
    background-color: #000000;
    color: #FFD700;
    transform: translate(-3px, -3px);
    box-shadow: 9px 9px 0 #000000;
  }

  @keyframes fab-pulse {
    0%, 100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.05);
    }
  }

  /* Secondary Actions (WhatsApp & Instagram) */
  .desktop-fab__secondary {
    margin-top: 1rem;
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
  }

  .desktop-fab__secondary-btn {
    width: 50px;
    height: 50px;
    background-color: #FFFFFF;
    border: 3px solid #000000;
    box-shadow: 4px 4px 0 #000000;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
  }

  .desktop-fab__secondary-btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 #000000;
  }

  .desktop-fab__secondary-btn svg {
    width: 24px;
    height: 24px;
  }

  .desktop-fab__secondary-btn--whatsapp svg {
    fill: #25D366;
  }

  .desktop-fab__secondary-btn--instagram svg {
    fill: #E1306C;
  }

  /* Tooltip on hover */
  .desktop-fab__secondary-btn {
    position: relative;
  }

  .desktop-fab__secondary-btn::before {
    content: attr(aria-label);
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    background-color: #000000;
    color: #FFFFFF;
    padding: 0.5rem 0.75rem;
    font-family: var(--font-primary);
    font-size: 0.875rem;
    font-weight: 700;
    white-space: nowrap;
    margin-right: 0.5rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }

  .desktop-fab__secondary-btn:hover::before {
    opacity: 1;
  }
}

/* ============================================
   TRIAL BOOKING MODAL & FORM
   ============================================ */

/* Trial modal - prevent scroll */
#modal-trial .modal-container {
  max-height: none;
  overflow-y: visible;
}

#modal-trial .modal-content {
  overflow: visible;
}

.trial-form-container {
  max-width: 600px;
  margin: 0 auto;
  padding-bottom: 1rem; /* Reduced space at bottom */
}

.trial-intro {
  background-color: #E8F8F0;
  border: 3px solid #000000;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 6px 6px 0 #000000;
}

.trial-intro p {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.5;
  color: #000000;
}

.trial-form .form-group {
  margin-bottom: 1.2rem;
}

.trial-form label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 700;
  font-family: var(--font-primary);
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 0.5px;
}

.trial-form input[type="text"],
.trial-form input[type="tel"],
.trial-form input[type="email"],
.trial-form textarea {
  width: 100%;
  padding: 0.875rem;
  border: 3px solid #000000;
  background-color: #FFFFFF;
  font-family: var(--font-secondary);
  font-size: 1rem;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.trial-form input[type="text"]:focus,
.trial-form input[type="tel"]:focus,
.trial-form input[type="email"]:focus,
.trial-form textarea:focus {
  outline: none;
  border-color: #0088CC;
  box-shadow: 4px 4px 0 #0088CC;
  transform: translate(-2px, -2px);
}

.trial-form textarea {
  resize: vertical;
  min-height: 85px;
}

.trial-form textarea::placeholder {
  font-size: 0.85rem;
  line-height: 1.3;
}

.trial-form .btn--full {
  width: 100%;
  margin-top: 1rem;
  padding: 1.25rem 2rem;
  font-size: 1.1rem;
  background-color: #0088CC;
  color: #FFFFFF;
  border: 3px solid #000000;
  box-shadow: 6px 6px 0 #000000;
  font-family: var(--font-primary);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.trial-form .btn--full:hover {
  transform: translate(3px, 3px);
  box-shadow: 3px 3px 0 #000000;
}

.trial-form .btn--full:active {
  transform: translate(6px, 6px);
  box-shadow: none;
}

.trial-success-message {
  text-align: center;
  padding: 3rem 2rem;
  background-color: #E8F8F0;
  border: 3px solid #25D366;
  box-shadow: 8px 8px 0 #25D366;
}

.trial-success-message .success-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
}

.trial-success-message h4 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: #000000;
  font-family: var(--font-primary);
  text-transform: uppercase;
}

.trial-success-message p {
  font-size: 1.2rem;
  color: #000000;
  line-height: 1.6;
}

/* Secondary button style (Free Trial) - AMARELO BeWater #FFD700 */
.btn--secondary {
  background-color: #FFD700 !important;
  color: #000000 !important;
  border: 3px solid #000000 !important;
  box-shadow: 6px 6px 0 #000000 !important;
  font-family: var(--font-primary);
  font-weight: 700;
  padding: 1rem 2rem;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  display: inline-block;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.btn--secondary:hover {
  background-color: #FFC700 !important;
  transform: translate(3px, 3px) scale(1);
  box-shadow: 3px 3px 0 #000000 !important;
  animation: none;
}

.btn--secondary:active {
  transform: translate(6px, 6px);
  box-shadow: none !important;
  animation: none;
}

/* Hero CTA - Single Button + Microcopy Layout */
.hero__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  max-width: 600px;
  margin: 0 auto;
}

.hero__cta-eyebrow {
  font-family: var(--font-primary);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-gray);
  margin-bottom: 1rem;
  text-align: center;
}

.hero__cta-main {
  background-color: #FFD700;
  color: #000000;
  border: 4px solid #000000;
  box-shadow: 8px 8px 0 #000000;
  padding: 1.5rem 3rem;
  font-family: var(--font-primary);
  font-weight: 900;
  font-size: 1.8rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
  max-width: 500px;
  animation: hero-cta-pulse 2s ease-in-out infinite;
}

.hero__cta-main:hover {
  background-color: #000000;
  color: #FFD700;
  transform: translate(-4px, -4px);
  box-shadow: 12px 12px 0 #000000;
  animation: none;
}

.hero__cta-main:active {
  transform: translate(4px, 4px);
  box-shadow: 4px 4px 0 #000000;
}

@keyframes hero-cta-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}

.hero__cta-benefits {
  list-style: none;
  display: flex;
  gap: 1.5rem;
  margin: 1.5rem 0;
  padding: 0;
  justify-content: center;
  flex-wrap: wrap;
}

.hero__cta-benefits li {
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-gray);
  display: flex;
  align-items: center;
}

.hero__cta-secondary {
  margin-top: 1rem;
  font-family: var(--font-primary);
  font-size: 1rem;
  color: var(--color-gray);
  text-align: center;
}

.hero__cta-link {
  color: #0088CC;
  text-decoration: underline;
  font-weight: 700;
  transition: color 0.2s ease;
}

.hero__cta-link:hover {
  color: #000000;
}

/* Mobile responsive hero CTA */

/* Mobile responsive */
@media (max-width: 768px) {
  #modal-trial .modal-container {
    max-height: 90vh;
    overflow-y: auto;
  }

  .trial-form-container {
    padding-bottom: 0.5rem;
  }

  .trial-intro {
    padding: 0.875rem;
    font-size: 0.9rem;
    box-shadow: 4px 4px 0 #000000;
    margin-bottom: 0.875rem;
  }

  .trial-intro p {
    font-size: 0.9rem;
    line-height: 1.35;
  }

  .trial-form .form-group {
    margin-bottom: 0.875rem;
  }

  .trial-form label {
    font-size: 0.8rem;
    margin-bottom: 0.35rem;
  }

  .trial-form input[type="text"],
  .trial-form input[type="tel"],
  .trial-form input[type="email"],
  .trial-form textarea {
    padding: 0.65rem;
    font-size: 0.9rem;
    border-width: 2px;
  }

  .trial-form textarea {
    min-height: 75px;
  }

  .trial-form textarea::placeholder {
    font-size: 0.75rem;
    line-height: 1.25;
  }

  .trial-form .btn--full {
    padding: 0.875rem 1.25rem;
    font-size: 0.95rem;
    box-shadow: 4px 4px 0 #000000;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }

  .trial-form .btn--full:hover {
    box-shadow: 2px 2px 0 #000000;
  }

  #modal-trial .modal-content {
    padding: 1rem;
  }

  .trial-flexibility-message {
    padding: 0.75rem !important;
    margin-bottom: 0.875rem !important;
    font-size: 0.85rem !important;
  }

  .trial-flexibility-message p {
    font-size: 0.85rem !important;
    line-height: 1.35 !important;
  }

  .trial-success-message {
    padding: 2rem 1.5rem;
    box-shadow: 6px 6px 0 #25D366;
  }

  .trial-success-message .success-icon {
    font-size: 3rem;
  }

  .trial-success-message h4 {
    font-size: 1.5rem;
  }

  .trial-success-message p {
    font-size: 1rem;
  }

  .btn--secondary {
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
    box-shadow: 4px 4px 0 #000000 !important;
  }

  .btn--secondary:hover {
    box-shadow: 2px 2px 0 #000000 !important;
  }

  .hero__cta {
    padding: 0 1rem;
  }

  .hero__cta-eyebrow {
    font-size: 1.2rem;
  }

  .hero__cta-main {
    font-size: 1.4rem;
    padding: 1.25rem 2rem;
    box-shadow: 6px 6px 0 #000000;
  }

  .hero__cta-main:hover {
    transform: translate(-2px, -2px);
    box-shadow: 8px 8px 0 #000000;
  }
  
  .hero__cta-main:active {
    transform: translate(3px, 3px);
    box-shadow: 3px 3px 0 #000000;
  }

  .hero__cta-benefits {
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
  }

  .hero__cta-benefits li {
    font-size: 0.95rem;
  }

  .hero__cta-secondary {
    font-size: 0.95rem;
  }
}

@media (max-width: 480px) {
  .hero__cta .btn {
    width: 100% !important;
    max-width: 300px !important;
    font-size: 1.2rem !important;
    padding: calc(var(--spacing-sm) + 0.3rem) calc(var(--spacing-md) + 0.5rem) !important;
    box-shadow: 4px 4px 0 #000000 !important;
    letter-spacing: 1px !important;
    margin: 0 auto !important;
    display: block !important;
  }

  .hero__cta .btn:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 #000000 !important;
  }
  
  .hero__cta .btn:active {
    transform: translate(4px, 4px);
    box-shadow: none !important;
  }
}

/* ============================================
   HIDDEN PRICES STYLING
   ============================================ */

.price-card__price-hidden {
  padding: 1rem 0;
  text-align: center;
}

.price-hidden-badge {
  display: inline-block;
  background-color: #FFD700;
  color: #000000;
  padding: 0.75rem 1.5rem;
  border: 3px solid #000000;
  box-shadow: 4px 4px 0 #000000;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
}

@media (max-width: 768px) {
  .price-hidden-badge {
    font-size: 0.8rem;
    padding: 0.625rem 1.25rem;
    box-shadow: 3px 3px 0 #000000;
  }
}

/* ============================================
   REQUEST CODE FORM STYLING
   ============================================ */

.request-code-form {
  max-width: 600px;
  margin: 0 auto;
}

.request-code-form__header {
  background-color: #FFD700;
  border: 3px solid #000000;
  padding: 1.5rem;
  margin-bottom: 2rem;
  box-shadow: 6px 6px 0 #000000;
  text-align: center;
}

.request-code-form__title {
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
  color: #000000;
  font-family: var(--font-primary);
  text-transform: uppercase;
}

.request-code-form__subtitle {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: #000000;
}

.request-code-form__inputs .form-group {
  margin-bottom: 1.5rem;
}

.request-code-form__inputs label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 700;
  font-family: var(--font-primary);
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 0.5px;
}

.request-code-form__inputs input[type="text"],
.request-code-form__inputs input[type="tel"],
.request-code-form__inputs input[type="email"] {
  width: 100%;
  padding: 1rem;
  border: 3px solid #000000;
  background-color: #FFFFFF;
  font-family: var(--font-secondary);
  font-size: 1rem;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.request-code-form__inputs input:focus {
  outline: none;
  border-color: #FFD700;
  box-shadow: 4px 4px 0 #FFD700;
  transform: translate(-2px, -2px);
}

.request-code-form__buttons {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
}

.request-code-form__buttons .coupon-btn {
  flex: 1;
}

.coupon-btn--tertiary {
  background-color: #FFFFFF;
  color: #000000;
  border: 3px solid #000000;
  box-shadow: 6px 6px 0 #000000;
}

.coupon-btn--tertiary:hover {
  background-color: #F5F5F5;
  transform: translate(3px, 3px);
  box-shadow: 3px 3px 0 #000000;
}

.coupon-btn--tertiary:active {
  transform: translate(6px, 6px);
  box-shadow: none;
}

.request-code-success {
  text-align: center;
  padding: 3rem 2rem;
  background-color: #E8F8F0;
  border: 3px solid #25D366;
  box-shadow: 8px 8px 0 #25D366;
}

/* ============================================
   PRICING REQUEST FORM (LEAD CAPTURE)
   ============================================ */

.pricing-request-form {
  max-width: 600px;
  margin: 0 auto;
}

.pricing-request-form__header {
  background-color: #0088CC;
  border: 3px solid #000000;
  padding: 1.5rem;
  margin-bottom: 2rem;
  box-shadow: 6px 6px 0 #000000;
  text-align: center;
}

.pricing-request-form__title {
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
  color: #FFFFFF;
  font-family: var(--font-primary);
  text-transform: uppercase;
}

.pricing-request-form__subtitle {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: #FFFFFF;
}

.pricing-request-form__inputs .form-group {
  margin-bottom: 1.5rem;
}

.pricing-request-form__inputs label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 700;
  font-family: var(--font-primary);
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 0.5px;
}

.pricing-request-form__inputs input[type="text"],
.pricing-request-form__inputs input[type="tel"],
.pricing-request-form__inputs input[type="email"] {
  width: 100%;
  padding: 1rem;
  border: 3px solid #000000;
  background-color: #FFFFFF;
  font-family: var(--font-secondary);
  font-size: 1rem;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.pricing-request-form__inputs input:focus {
  outline: none;
  border-color: #0088CC;
  box-shadow: 4px 4px 0 #0088CC;
  transform: translate(-2px, -2px);
}

.pricing-request-form__submit {
  width: 100%;
  padding: 1rem 2rem;
  background-color: #FFD700;
  color: #000000;
  border: 3px solid #000000;
  font-family: var(--font-primary);
  font-weight: 900;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 6px 6px 0 #000000;
  margin-top: 1.5rem;
}

.pricing-request-form__submit:hover {
  background-color: #000000;
  color: #FFD700;
  transform: translate(3px, 3px);
  box-shadow: 3px 3px 0 #FFD700;
}

.pricing-request-form__submit:active {
  transform: translate(6px, 6px);
  box-shadow: none;
}

.pricing-request-form__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.pricing-request-form__coupon-link {
  display: block;
  text-align: center;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 2px solid #E0E0E0;
}

.pricing-request-form__coupon-link button {
  background: none;
  border: none;
  color: #0088CC;
  text-decoration: underline;
  font-family: var(--font-secondary);
  font-size: 0.95rem;
  cursor: pointer;
  transition: color 0.2s ease;
}

.pricing-request-form__coupon-link button:hover {
  color: #006699;
}

/* Success State */
.pricing-request-success {
  text-align: center;
  padding: 2rem;
}

.pricing-request-success__icon {
  font-size: 4rem;
  margin-bottom: 1rem;
}

.pricing-request-success__title {
  font-size: 1.75rem;
  margin-bottom: 1rem;
  color: #000000;
  font-family: var(--font-primary);
  text-transform: uppercase;
}

.pricing-request-success__message {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #000000;
  margin-bottom: 2rem;
}

.pricing-request-upsell {
  background-color: #E8F8F0;
  border: 3px solid #000000;
  padding: 2rem;
  margin-top: 2rem;
  box-shadow: 6px 6px 0 #000000;
}

.pricing-request-upsell__text {
  font-size: 1rem;
  line-height: 1.5;
  color: #000000;
  margin-bottom: 1.5rem;
  font-weight: 500;
}

.pricing-request-upsell__cta {
  width: 100%;
  padding: 1rem 2rem;
  background-color: #FFD700;
  color: #000000;
  border: 3px solid #000000;
  font-family: var(--font-primary);
  font-weight: 900;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 6px 6px 0 #000000;
  text-decoration: none;
  display: inline-block;
  text-align: center;
}

.pricing-request-upsell__cta:hover {
  background-color: #000000;
  color: #FFD700;
  transform: translate(3px, 3px);
  box-shadow: 3px 3px 0 #FFD700;
}

.pricing-request-upsell__cta:active {
  transform: translate(6px, 6px);
  box-shadow: none;
}

.request-code-success .success-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
}

.request-code-success h4 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: #000000;
  font-family: var(--font-primary);
  text-transform: uppercase;
}

.request-code-success p {
  font-size: 1.2rem;
  color: #000000;
  line-height: 1.6;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .request-code-form__header {
    padding: 1.25rem;
    box-shadow: 4px 4px 0 #000000;
  }

  .request-code-form__title {
    font-size: 1.25rem;
  }

  .request-code-form__subtitle {
    font-size: 0.9rem;
  }

  .request-code-form__inputs label {
    font-size: 0.85rem;
  }

  .request-code-form__inputs input {
    padding: 0.875rem;
    font-size: 0.95rem;
  }

  .request-code-form__buttons {
    flex-direction: column;
  }

  .coupon-btn--tertiary {
    box-shadow: 4px 4px 0 #000000;
  }

  .coupon-btn--tertiary:hover {
    box-shadow: 2px 2px 0 #000000;
  }

  .request-code-success {
    padding: 2rem 1.5rem;
    box-shadow: 6px 6px 0 #25D366;
  }

  .request-code-success .success-icon {
    font-size: 3rem;
  }

  .request-code-success h4 {
    font-size: 1.5rem;
  }

  .request-code-success p {
    font-size: 1rem;
  }
}

/* =========================================
   ANIMATIONS & INTERACTIVITY
   ========================================= */

/* 1. Scroll Animations (Slide + Fade) */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, transform;
}

.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays for children if needed */
.animate-stagger-1 { transition-delay: 0.1s; }
.animate-stagger-2 { transition-delay: 0.2s; }
.animate-stagger-3 { transition-delay: 0.3s; }


/* 2. Hero Text Animation (Vertical Clip Slide) */
.hero__title.text-animated .line-wrapper {
  display: block;
  overflow: hidden; /* Ensures the clip effect works per line */
}

.hero__title.text-animated .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(100%);
  animation: textSlideUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero__title.text-animated .char.space {
  width: 0.3em; /* Preserve space width */
}

@keyframes textSlideUp {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}


/* 3. Button Beam Animation (Adapted for Brutalist/Square) */
/* Adds a moving border effect on hover */
.btn {
  position: relative;
  overflow: hidden; /* Contains the beam */
  z-index: 1;
}

.btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.8),
    transparent
  );
  transform: skewX(-20deg);
  transition: left 0.5s ease;
  z-index: -1;
  opacity: 0;
}

.btn:hover::after {
  animation: beamSlide 1.5s infinite linear;
  opacity: 0.3;
}

@keyframes beamSlide {
  0% { left: -100%; }
  100% { left: 200%; }
}


/* 4. Flashlight/Spotlight Effect on Cards */
/* Uses CSS variables set by JS */
.card,
.price-card,
.trainer-card,
.gym-collage-slide {
  position: relative;
  /* Ensure background handles the gradient overlay */
  background-color: #fff; /* Fallback */
}

/* The Spotlight Overlay */
.card::before,
.price-card::before,
.trainer-card::before,
.gym-collage-slide::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  pointer-events: none; /* Let clicks pass through */
  z-index: 2;
  
  /* The gradient follows the mouse */
  background: radial-gradient(
    600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(255, 215, 0, 0.06), /* Very subtle Gold glow */
    transparent 40%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}

.card:hover::before,
.price-card:hover::before,
.trainer-card:hover::before,
.gym-collage-slide:hover::before {
  opacity: 1;
}

/* Add a border glow effect as well */
.card::after,
.price-card::after,
.trainer-card::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  z-index: -1;
  background: radial-gradient(
    400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(255, 215, 0, 0.4), 
    transparent 40%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.card:hover::after,
.price-card:hover::after,
.trainer-card:hover::after {
  opacity: 1;
}
/* --- GYM SECTION REFACTOR (Light Theme) --- */
#gym.about {
  background-color: #FFFFFF;
  color: var(--color-gray);
  padding-bottom: 4rem;
}

#gym .section-title {
  color: var(--color-black);
}

#gym .about__lead {
  color: var(--color-black);
  font-weight: 500;
}

#gym .about__intro {
  margin-bottom: 3rem;
}

/* --- 3 PILLARS LAYOUT --- */
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 3rem;
  margin-bottom: 4rem;
}

.pillar-card {
  text-align: center;
  padding: 1.5rem;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pillar-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.05);
  border-color: var(--color-primary);
}

.pillar-icon {
  font-size: 2.5rem;
  color: var(--color-primary);
  margin-bottom: 1rem;
}

.pillar-title {
  font-family: var(--font-heading);
  color: var(--color-black);
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  /* Alignment improvements */
  min-height: 2.4em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pillar-desc {
  font-size: 0.95rem;
  color: var(--color-gray);
  line-height: 1.5;
  margin: 0;
}

/* Mobile: Row Layout (Icon Left, Text Right) */
@media (max-width: 768px) {
  .pillars-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .pillar-card {
    display: flex;
    align-items: center;
    text-align: left;
    padding: 1rem;
  }

  .pillar-icon {
    margin-bottom: 0;
    margin-right: 1.5rem;
    font-size: 2rem;
    width: 40px; /* Fixed width for alignment */
    display: flex;
    justify-content: center;
  }

  .pillar-content {
    flex: 1;
  }
  
  .pillar-title {
    margin-bottom: 0.2rem;
    font-size: 1.1rem;
  }
}

/* --- BENTO GRID GALLERY --- */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 250px;
  gap: 1rem;
  margin-bottom: 4rem;
}

.bento-item {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  cursor: pointer;
  background-color: #f5f5f5;
}

.bento-item img,
.bento-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.bento-item:hover img,
.bento-item:hover video {
  transform: scale(1.05);
}

/* Overlay Icon */
.bento-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.bento-overlay i {
  color: white;
  font-size: 2rem;
  background: rgba(0,0,0,0.5);
  padding: 1rem;
  border-radius: 50%;
}

.bento-item:hover .bento-overlay {
  opacity: 1;
}

/* Item Sizes */
.bento-item--large {
  grid-column: span 8;
  grid-row: span 2;
}

.bento-item--tall {
  grid-column: span 4;
  grid-row: span 2;
}

.bento-item--wide {
  grid-column: span 6;
  grid-row: span 1;
}

.bento-item--box {
  grid-column: span 3;
  grid-row: span 1;
}

/* Mobile Stack */
@media (max-width: 768px) {
  .bento-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 300px; /* Taller rows on mobile */
    gap: 1rem;
  }
  
  .bento-item {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
  }
  
  .bento-item--large {
    grid-row: span 1 !important;
  }
}

/* --- REVIEWS SECTION --- */
.reviews-section {
  margin-top: 4rem;
}

.reviews-header {
  text-align: center;
  margin-bottom: 2rem;
}

.reviews-title {
  font-family: var(--font-heading);
  color: var(--color-black);
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.review-card {
  background: white;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  border: 1px solid #f0f0f0;
  transition: transform 0.3s ease;
}

.review-card:hover {
  transform: translateY(-5px);
}

.review-stars {
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.review-text {
  font-style: italic;
  color: var(--color-gray);
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.review-author {
  font-weight: 700;
  color: var(--color-black);
  font-size: 0.9rem;
  text-align: right;
}

@media (max-width: 768px) {
  .reviews-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .review-card {
    padding: 1.5rem;
  }
}

/* --- LIGHTBOX --- */
.bento-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.95);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.bento-lightbox.active {
  display: flex;
  opacity: 1;
}

.lightbox-content {
  max-width: 90%;
  max-height: 90vh;
  transition: opacity 0.2s ease; /* Smooth content switch */
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-content img,
.lightbox-content video {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 0 30px rgba(0,0,0,0.5);
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 30px;
  color: white;
  font-size: 3rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  z-index: 10001;
}


.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.3); /* Semi-transparent background for better tap target */
  color: rgba(255, 255, 255, 0.9);
  border: none;
  font-size: 3rem;
  padding: 1rem;
  cursor: pointer;
  z-index: 10001;
  width: 60px; /* Fixed width for easier tapping */
  height: 100px; /* Taller hit area */
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  text-shadow: 0 2px 5px rgba(0,0,0,0.5);
  font-family: monospace;
  border-radius: 8px; /* Slight rounding */
}

.lightbox-nav:hover,
.lightbox-nav:active {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  transform: translateY(-50%) scale(1.05);
}

.lightbox-prev {
  left: 10px;
}

.lightbox-next {
  right: 10px;
}

.lightbox-counter {
  position: absolute;
  top: 20px;
  left: 20px;
  color: white;
  font-family: 'Roboto Mono', monospace; /* Example font */
  font-size: 1rem;
  z-index: 10002;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  pointer-events: none;
}

/* Shake/Bounce animation for end of gallery */
@keyframes bounce-left {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-20px); }
  75% { transform: translateX(5px); }
}

@keyframes bounce-right {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(20px); }
  75% { transform: translateX(-5px); }
}

.bounce-left {
  animation: bounce-left 0.4s ease;
}

.bounce-right {
  animation: bounce-right 0.4s ease;
}


/* --- REVIEWS SECTION UPDATES --- */
.review-stars {
  color: #FFD700; /* Gold color requested */
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.review-author {
  font-weight: 700;
  color: var(--color-black);
  font-size: 0.9rem;
  text-align: left; /* Changed to left align */
  margin-bottom: 0.2rem;
}

.review-source {
  font-size: 0.8rem;
  color: #777;
  display: flex;
  align-items: center;
  gap: 5px;
}

.review-source i {
  color: #4285F4; /* Google Blue */
}

/* Trust Badge Styles */
.reviews-trust {
  margin-top: 3rem;
  text-align: center;
  display: flex;
  justify-content: center;
}

.trust-badge {
  background: white;
  padding: 0.8rem 1.5rem;
  border-radius: 50px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #e0e0e0;
}

.trust-label {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-black);
}

.trust-score {
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-black);
}

.trust-stars {
  color: #FFD700;
  font-size: 0.9rem;
}



/* =========================================
   MOBILE SCHEDULE TABS (NEW)
   ========================================= */
.schedule__mobile-tabs {
  display: none; /* Hidden on desktop */
}

@media (max-width: 768px) {
  /* Hide the old instruction */
  .schedule__mobile-instruction {
    display: none !important;
  }

  /* Show and style the tabs */
  .schedule__mobile-tabs {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    padding: 0 var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    scrollbar-width: none; /* Firefox */
    padding-bottom: 4px; /* Space for shadow */
  }
  
  .schedule__mobile-tabs::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }

  .schedule__tab-btn {
    flex: 1; /* Distribute space evenly if possible, or use 0 0 auto for scroll */
    min-width: 45px;
    padding: 8px 4px;
    background-color: var(--color-white);
    border: 2px solid var(--color-black);
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 3px 3px 0 var(--color-black);
    text-align: center;
    text-transform: uppercase;
  }

  .schedule__tab-btn.active {
    background-color: var(--color-black);
    color: var(--color-white);
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 var(--color-black);
  }

  /* Override the horizontal scroll grid behavior */
  .schedule__grid {
    display: block !important; /* Force block layout */
    overflow-x: visible !important; /* No internal scroll */
    scroll-snap-type: none !important;
    padding: 0 var(--spacing-sm) var(--spacing-lg) var(--spacing-sm) !important;
    gap: 0 !important;
  }

  .schedule__day {
    display: none; /* Hide all days by default */
    flex: none !important;
    margin-bottom: 0 !important;
    
    /* Fix alignment and width */
    width: calc(100% - 10px) !important; /* Slightly narrower to ensure shadow fits */
    margin: 0 auto !important; /* Center it */
    min-height: auto !important; /* Allow it to be shorter */
  }

  .schedule__day.active {
    display: block; /* Show only active day */
    animation: fadeIn 0.3s ease-out;
  }
  
  /* COMPACT MODE FOR MOBILE - Fixes "too long" issue */
  .schedule__day.active .day__timeline {
    padding: var(--spacing-sm) !important; /* Reduced padding (1rem) */
    gap: 8px !important; /* Reduced gap */
  }
  
  .schedule__day.active .activity {
    min-height: auto !important;
    padding: 8px 10px !important; /* Compact padding */
  }
  
  .schedule__day.active .activity__time {
    font-size: 0.75rem !important;
    min-width: 65px !important; /* Slightly tighter */
  }
  
  .schedule__day.active .activity__name {
    font-size: 0.8rem !important;
  }
  
  /* Compact Open Gym Main specifically */
  .schedule__day.active .activity--opengym-main {
    padding: 10px !important;
    margin-bottom: 4px !important;
    min-height: auto !important;
  }
  
  .schedule__day.active .activity--opengym-main .activity__time {
    font-size: 0.85rem !important;
  }
  
  .schedule__day.active .activity--opengym-main .activity__name {
    font-size: 0.95rem !important;
  }
  
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
  }
}