/* ================================================
   BBOX TRAINING — styles.css
   Estrutura:
   1. Variáveis e reset
   2. Tipografia base
   3. Utilitários (container, botões, labels)
   4. Navbar
   5. Menu mobile
   6. Hero
   7. Sobre
   8. Programas
   9. Por que escolher
   10. Nutricionista
   11. Footer
   12. WhatsApp flutuante
   13. Modal de horários
   14. Animações de reveal
   15. Responsivo
   ================================================ */


/* ================================================
   1. VARIÁVEIS E RESET
   Para mudar cores, edite apenas aqui em cima!
   ================================================ */
:root {
  /* Cores principais */
  --yellow:        #F5F000;       /* amarelo vibrante do BBOX */
  --yellow-dim:    rgba(245, 240, 0, 0.12); /* amarelo suave para fundos */
  --yellow-gold:   #d4af37;       /* dourado (seção nutricionista) */

  /* Fundos (do mais escuro ao menos escuro) */
  --bg-darkest:    #0a0a0a;
  --bg-dark:       #0f0f0f;
  --bg-mid:        #161616;
  --bg-card:       #1a1a1a;
  --bg-card-hover: #202020;

  /* Texto */
  --text-white:    #ffffff;
  --text-light:    #e0e0e0;
  --text-muted:    #888888;
  --text-subtle:   #555555;

  /* Bordas */
  --border:        rgba(255, 255, 255, 0.07);
  --border-yellow: rgba(245, 240, 0, 0.3);

  /* Largura máxima do conteúdo */
  --max-w: 1200px;

  /* Fontes */
  --font-display: 'Barlow Condensed', sans-serif;
  --font-body:    'Barlow', sans-serif;

  /* Navbar height (usada para offset do scroll) */
  --nav-h: 70px;

  /* Sombras */
  --shadow-card: 0 4px 30px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 40px rgba(245, 240, 0, 0.08);
}

/* Reset básico */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

body {
  font-family: var(--font-body);
  background-color: var(--bg-dark);
  color: var(--text-light);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

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

ul {
  list-style: none;
}

button {
  font-family: var(--font-body);
  cursor: pointer;
  border: none;
  background: none;
}


/* ================================================
   2. TIPOGRAFIA BASE
   ================================================ */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.1;
  color: var(--text-white);
}


/* ================================================
   3. UTILITÁRIOS
   ================================================ */

/* Container centralizado */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

/* Label de seção (texto pequeno acima do título) */
.section__label {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 0.75rem;
}

.section__label--gold {
  color: var(--yellow-gold);
}

/* Título de seção */
.section__title {
  font-size: clamp(1.8rem, 4vw, 2.75rem);
  font-weight: 800;
  color: var(--text-white);
  line-height: 1.15;
  margin-bottom: 1rem;
}

/* Parágrafo de seção */
.section__body {
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.8;
  margin-bottom: 1rem;
  max-width: 620px;
}

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

/* Cabeçalho de seção centralizado */
.section__head {
  text-align: center;
  max-width: 600px;
  margin-inline: auto;
  margin-bottom: 3.5rem;
}

/* ── Botões ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 6px;
  transition: all 0.25s ease;
  cursor: pointer;
  white-space: nowrap;
}

/* Botão amarelo sólido */
.btn--primary {
  background-color: var(--yellow);
  color: #000;
  border: 2px solid var(--yellow);
}
.btn--primary:hover {
  background-color: transparent;
  color: var(--yellow);
}

/* Botão transparente com borda amarela */
.btn--outline {
  background-color: transparent;
  color: var(--yellow);
  border: 2px solid var(--border-yellow);
}
.btn--outline:hover {
  background-color: var(--yellow-dim);
  border-color: var(--yellow);
}

/* Botão dourado (nutricionista) */
.btn--gold {
  background-color: var(--yellow-gold);
  color: #000;
  border: 2px solid var(--yellow-gold);
}
.btn--gold:hover {
  background-color: transparent;
  color: var(--yellow-gold);
}

/* Botão do nav (menor) */
.btn--nav {
  padding: 0.5rem 1.1rem;
  font-size: 0.85rem;
}


/* ================================================
   4. NAVBAR
   ================================================ */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  height: var(--nav-h);
  /* Fundo transparente por padrão — muda com JS ao scrollar */
  background-color: transparent;
  transition: background-color 0.35s ease, box-shadow 0.35s ease;
}

/* Classe adicionada via JS quando scrolla */
.navbar.scrolled {
  background-color: rgba(10, 10, 10, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--border);
}

.navbar__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: 1.25rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar__logo img {
  height: 40px;
  width: auto;
}

.navbar__links {
  display: none; /* escondido no mobile, visível no desktop */
  align-items: center;
  gap: 2rem;
}

.navbar__links a {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-light);
  transition: color 0.2s;
}
.navbar__links a:hover {
  color: var(--yellow);
}

.navbar__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-size: 1.5rem;
  color: var(--text-white);
  border: 1px solid var(--border);
  border-radius: 6px;
  transition: border-color 0.2s, color 0.2s;
}
.navbar__toggle:hover {
  border-color: var(--yellow);
  color: var(--yellow);
}


/* ================================================
   5. MENU MOBILE
   ================================================ */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  background-color: var(--bg-darkest);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  /* Animação: começa fora da tela (direita) e desliza */
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.77, 0, 0.18, 1);
}

.mobile-menu.open {
  transform: translateX(0);
}

.mobile-menu__close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  font-size: 2rem;
  color: var(--text-white);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 6px;
  transition: color 0.2s, border-color 0.2s;
}
.mobile-menu__close:hover {
  color: var(--yellow);
  border-color: var(--yellow);
}

.mobile-menu ul {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.mobile-menu a,
.mobile-menu .mobile-link {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-white);
  transition: color 0.2s;
}
.mobile-menu a:hover {
  color: var(--yellow);
}


/* ================================================
   6. HERO
   ================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  background-color: var(--bg-darkest);
  display: flex;
  align-items: center;
  /* Padding top para compensar o nav fixo */
  padding-top: var(--nav-h);
  overflow: hidden;
}

/* Fundo com grid sutil e gradiente diagonal */
.hero__bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(135deg, rgba(245, 240, 0, 0.04) 0%, transparent 50%),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 59px,
      var(--border) 59px,
      var(--border) 60px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 59px,
      var(--border) 59px,
      var(--border) 60px
    );
  pointer-events: none;
}

.hero__container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  padding-block: 5rem 4rem;
  align-items: center;
}

/* Label pequeno */
.hero__label {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--yellow);
  border: 1px solid var(--border-yellow);
  padding: 0.3rem 0.8rem;
  border-radius: 100px;
  margin-bottom: 1.25rem;
}

.hero__title {
  font-size: clamp(2.8rem, 7vw, 5.5rem);
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  color: var(--text-white);
  margin-bottom: 1.25rem;
}

.hero__title--accent {
  color: var(--yellow);
  /* Efeito de sublinhado personalizado */
  text-decoration: underline;
  text-decoration-color: rgba(245, 240, 0, 0.3);
  text-underline-offset: 6px;
}

.hero__description {
  font-size: 1.05rem;
  color: var(--text-muted);
  line-height: 1.75;
  max-width: 500px;
  margin-bottom: 1.5rem;
}

/* Pills de modalidades */
.hero__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.pill {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  padding: 0.3rem 0.75rem;
  border-radius: 100px;
  transition: all 0.2s;
}
.pill:hover {
  border-color: var(--yellow);
  color: var(--yellow);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Imagem do hero */
.hero__image {
  position: relative;
}

.hero__image img {
  border-radius: 12px;
  box-shadow: var(--shadow-card), var(--shadow-glow);
  max-width: 520px;
  margin-inline: auto;
}

/* Linha decorativa no rodapé do hero */
.hero__divider {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--yellow), transparent);
  opacity: 0.2;
}


/* ================================================
   7. SOBRE - COM ALTERAÇÃO MOBILE
   ================================================ */
.about {
  background-color: var(--bg-mid);
  padding-block: 2.5rem 5.2rem;
}

.about__container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}

/* No mobile: Texto primeiro, imagem depois */
.about__content {
  order: 1;
}
.about__image {
  order: 2;
}

.about__image {
  position: relative;
}

.about__image img {
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
}

/* Badge sobreposto (opcional - você pode deixar comentado se preferir) */
.about__badge {
  position: absolute;
  bottom: 1.5rem;
  right: 1rem;
  background-color: var(--yellow);
  color: #000;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  z-index: 2;
}

/* ====================== RESPONSIVO ====================== */

/* Tablet: 640px+ */
@media (min-width: 640px) {
  .about, 
  .programs, 
  .why {
    padding-block: 2.5rem 6.5rem;
  }

  .hero {
    min-height: 100svh;
  }

  .programs__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop: 900px+ */
@media (min-width: 900px) {
  .about, 
  .programs, 
  .why {
    padding-block: 5rem 7rem;
  }

  .about__container,
  .why__container {
    gap: 5rem;
  }

  .hero__image img,
  .about__image img,
  .why__image img {
    max-height: none;
  }
  
  .navbar__links { 
    display: flex; 
  }
  .navbar__toggle { 
    display: none; 
  }

  /* Hero */
  .hero__container {
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    padding-block: 6rem;
  }

  /* Sobre - Volta para imagem primeiro no desktop */
  .about__container {
    grid-template-columns: 1fr 1fr;
    gap: 4.5rem;
  }
  .about__content { order: 2; }
  .about__image { order: 1; }

  /* Programas */
  .programs__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Por que escolher */
  .why__container {
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
  }
  .why__image {
    order: 2;
  }

  /* Nutricionista */
  .nutri__container {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
    gap: 3.5rem;
  }
  .nutri__text {
    flex: 1;
  }

  /* Footer */
  .footer__grid {
    grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
  }
}


/* ================================================
   8. PROGRAMAS
   ================================================ */
.programs {
  background-color: var(--bg-dark);
  padding-block: 2.5rem 5.2rem;
}

.programs__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.program-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2rem 1.5rem;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* Linha amarela animada no topo do card */
.program-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 0;
  height: 3px;
  background-color: var(--yellow);
  transition: width 0.4s ease;
}
.program-card:hover::before {
  width: 100%;
}
.program-card:hover {
  background-color: var(--bg-card-hover);
  border-color: var(--border-yellow);
  transform: translateY(-4px);
  box-shadow: var(--shadow-card), var(--shadow-glow);
}

.program-card__icon {
  width: 60px;
  height: 60px;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
}

.program-card__icon img {
  width: 60px;
  height: 60px;
  object-fit: contain;
  filter: brightness(0) invert(1); /* ícones brancos */
  transition: filter 0.3s;
}
.program-card:hover .program-card__icon img {
  filter: brightness(1) saturate(1); /* ícones coloridos no hover */
}

.program-card__title {
  font-size: 1.5rem;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.program-card__body {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.75;
  margin-bottom: 1.25rem;
}

.program-card__tag {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--yellow);
  background-color: var(--yellow-dim);
  border: 1px solid var(--border-yellow);
  padding: 0.25rem 0.65rem;
  border-radius: 100px;
}


/* ================================================
   9. POR QUE ESCOLHER
   ================================================ */
.why {
  background-color: var(--bg-mid);
  padding-block: 2.5rem 5.2rem;
}

.why__container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3.5rem;
  align-items: center;
}

.why__list {
  display: grid;
  gap: 1.5rem;
  margin: 2rem 0;
}

.why__item {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}

.why__item-icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  background-color: var(--yellow-dim);
  border: 1px solid var(--border-yellow);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: var(--yellow);
}

.why__item h4 {
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.35rem;
}

.why__item p {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.7;
}

.why__image img {
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  max-width: 520px;
  margin-inline: auto;
}


/* ================================================
   10. NUTRICIONISTA
   ================================================ */
.nutri {
  background-color: var(--bg-darkest);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding-block: 2.5rem 5.2rem;
}

.nutri__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2rem;
}

.nutri__title {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 800;
  margin-bottom: 0.75rem;
}

.nutri__container p {
  font-size: 1rem;
  color: var(--text-muted);
  max-width: 480px;
}

.nutri__container strong {
  color: var(--text-light);
}


/* ================================================
   11. FOOTER
   ================================================ */
.footer {
  background-color: var(--bg-darkest);
  padding-top: 2rem;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  padding-bottom: 4rem;
  border-bottom: 1px solid var(--border);
}

.footer__logo {
  height: 40px;
  width: auto;
  margin-bottom: 1rem;
}

.footer__brand p {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.7;
  max-width: 260px;
}

.footer__col h4 {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-white);
  margin-bottom: 1.25rem;
}

.footer__col ul {
  display: grid;
  gap: 0.75rem;
}

.footer__col a,
.footer__link-btn {
  font-size: 0.9rem;
  color: var(--text-muted);
  transition: color 0.2s;
  text-align: left;
}

.footer__link-btn {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color 0.2s;
}

.footer__col a:hover,
.footer__link-btn:hover {
  color: var(--yellow);
}

.footer__contact li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.footer__contact i {
  color: var(--yellow);
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.footer__bottom {
  padding-block: 1.5rem;
  text-align: center;
}

.footer__bottom p {
  font-size: 0.85rem;
  color: var(--text-subtle);
}


/* ================================================
   12. BOTÃO FLUTUANTE WHATSAPP
   ================================================ */
.whatsapp-float {
  position: fixed;
  bottom: 1.75rem;
  right: 1.75rem;
  z-index: 99;
  width: 56px;
  height: 56px;
  background-color: #25D366;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
  transition: transform 0.25s, box-shadow 0.25s;
}

.whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 28px rgba(37, 211, 102, 0.6);
}

/* Pulso animado ao redor */
.whatsapp-float::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid #25D366;
  opacity: 0;
  animation: pulse 2.5s ease-out infinite;
}

@keyframes pulse {
  0%   { transform: scale(0.9); opacity: 0.6; }
  100% { transform: scale(1.4); opacity: 0; }
}


/* ================================================
   13. MODAL DE HORÁRIOS
   ================================================ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  /* Escondido por padrão */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.modal.open {
  opacity: 1;
  pointer-events: all;
}

.modal__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
}

.modal__box {
  position: relative;
  z-index: 1;
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2rem;
  width: 100%;
  max-width: 440px;
  box-shadow: var(--shadow-card);
  /* Animação de entrada */
  transform: translateY(20px);
  transition: transform 0.3s ease;
}

.modal.open .modal__box {
  transform: translateY(0);
}

.modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: var(--text-muted);
  transition: color 0.2s, border-color 0.2s;
}
.modal__close:hover {
  color: var(--yellow);
  border-color: var(--yellow);
}

.modal__box h2 {
  font-size: 1.5rem;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  padding-right: 2rem;
}

/* Tabs */
.modal__tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.75rem;
}

.modal__tab {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0.4rem 1rem;
  border-radius: 6px;
  border: 1px solid transparent;
  transition: all 0.2s;
}

.modal__tab.active,
.modal__tab:hover {
  background-color: var(--yellow-dim);
  border-color: var(--border-yellow);
  color: var(--yellow);
}

/* Conteúdo de cada tab */
.modal__content {
  display: none;
}

.modal__content.active {
  display: block;
}

.modal__schedule {
  display: grid;
  gap: 0.75rem;
}

.modal__schedule li {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.6;
  padding: 0.75rem 1rem;
  background-color: var(--bg-mid);
  border-radius: 8px;
  border-left: 3px solid var(--yellow);
}

.modal__schedule li.closed {
  border-left-color: var(--text-subtle);
  color: var(--text-subtle);
}

.modal__schedule strong {
  color: var(--text-white);
}


/* ================================================
   14. ANIMAÇÕES DE REVEAL (scroll)
   ================================================ */

/* Estado inicial: invisível e deslocado */
[data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

[data-reveal-right] {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

[data-reveal-left] {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

/* Estado visível: adicionado via IntersectionObserver no JS */
[data-reveal].visible,
[data-reveal-right].visible,
[data-reveal-left].visible {
  opacity: 1;
  transform: translate(0);
}


/* ================================================
   15. RESPONSIVO
   ================================================ */

/* Tablet: 640px+ */
@media (min-width: 640px) {
  .programs__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop: 900px+ */
@media (min-width: 900px) {

  /* Nav: mostra links, esconde hamburguer */
  .navbar__links {
    display: flex;
  }
  .navbar__toggle {
    display: none;
  }

  /* Hero: 2 colunas */
  .hero__container {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    padding-block: 6rem;
  }

  /* Sobre: 2 colunas */
  .about__container {
    grid-template-columns: 1fr 1fr;
  }

  /* Programas: 4 colunas */
  .programs__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Por que escolher: 2 colunas */
  .why__container {
    grid-template-columns: 1fr 1fr;
  }
  /* Imagem do why vai para a direita */
  .why__image {
    order: 2;
  }

  /* Nutricionista: lado a lado */
  .nutri__container {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
    gap: 3rem;
  }
  .nutri__text {
    flex: 1;
  }

  /* Footer: 4 colunas */
  .footer__grid {
    grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
  }
}