/* ==========================================================================
   1. CONFIGURAÇÃO BASE E VARIÁVEIS
   ========================================================================== */

/* * Paleta de cores da marca, fontes e espaçamentos.
 * Usar variáveis garante consistência e facilita a manutenção.
*/
:root {
  /* Paleta da marca */
  --brand-yellow: #FFD54F; /* Amarelo original (pode ser o "amarelo mais claro" do hero) */
  --brand-orange: #FF8A00; /* Laranja original */
  --brand-red: #FF3D00; /* Vermelho original */
  --brand-black: #1a1a1a; /* Levemente mais suave que #000 para conforto visual */
  
  /* CORES baseadas na imagem e suas solicitações */
  --dark-yellow-button: #FFC000; /* Amarelo mais escuro para botões (mantido) */
  --hero-light-yellow: #FFD54F; /* Amarelo mais claro para o início do degradê do hero */
  --hero-dark-yellow: #FFC000; /* Amarelo mais escuro para o fim do degradê do hero (mesmo dos botões) */
  --hero-text-color: #000000; /* Texto do hero em preto para contraste */

  /* ATUALIZAÇÃO: Adiciona cor para a seção do app */
  --brand-blue: #0d47a1; /* Azul escuro para a nova seção */

  /* Paleta de suporte */
  --bg-light: #FFFFFF;
  --text-muted: #4F4F4F;
  --surface: #F9F9F9;
  --success: #2E7D32;
  --error: #D32F2F;

  /* Tipografia */
  --font-primary: 'Poppins', sans-serif;
  --font-secondary: 'Inter', sans-serif;

  /* Grid e Espaçamento */
  --container-width: 1200px;
  --radius-sm: 8px;
  --radius-md: 12px;
}

/* Reset simples para consistência cross-browser */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Tipografia base e scroll suave */
html {
  font-family: var(--font-secondary);
  font-size: 100%; /* 16px */
  color: var(--brand-black);
  scroll-behavior: smooth;
  scroll-padding-top: 80px; /* Offset para o header fixo */
}

body {
  background-color: var(--bg-light);
  line-height: 1.6;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

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

/* ==========================================================================
   2. COMPONENTES REUTILIZÁVEIS
   ========================================================================== */

/* Container centralizado com padding padrão */
.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* Grid responsivo */
.grid {
  display: grid;
  gap: 24px;
}

.grid--2-cols { grid-template-columns: 1fr; }
.grid--4-cols { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

/* Títulos de seção */
.section {
  padding: 64px 0;
}

.section--surface {
  background-color: var(--surface);
}

.section__title {
  font-family: var(--font-primary);
  font-size: clamp(1.75rem, 5vw, 2.5rem); /* Fonte fluida */
  text-align: center;
  /* ATUALIZAÇÃO: Reduzida margem para acomodar subtítulo */
  margin-bottom: 24px; 
}

/* Botões (CTAs) */
.btn {
  display: inline-block;
  padding: 14px 24px;
  border-radius: var(--radius-md);
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease-in-out;
  border: 2px solid transparent;
}

.btn--primary {
  /* Cor sólida para o botão primário, baseado no amarelo da imagem */
  background-color: var(--dark-yellow-button);
  color: var(--hero-text-color); /* Texto em preto para contraste */
  box-shadow: 0 6px 18px rgba(255, 192, 0, 0.2);
}

.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 192, 0, 0.3);
}

.btn--secondary {
  background-color: transparent;
  color: var(--dark-yellow-button); /* Amarelo escuro para texto */
  border-color: var(--dark-yellow-button); /* Amarelo escuro para borda */
}

.btn--secondary:hover {
  background-color: var(--dark-yellow-button);
  color: var(--hero-text-color); /* Texto em preto no hover */
}

.btn--full {
    width: 100%;
}


/* ==========================================================================
   3. ESTILOS ESPECÍFICOS DAS SEÇÕES
   ========================================================================== */

/* --- Header --- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  z-index: 100;
  height: 80px;
  transition: box-shadow 0.2s;
}

.header.scrolled {
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.header__container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.header__logo img {
  height: 40px;
}

.header__menu {
  display: flex;
  gap: 32px;
}

.header__link {
  font-weight: 700;
  color: var(--text-muted);
  transition: color 0.2s;
}

.header__link:hover {
  color: var(--dark-yellow-button); /* link hover na cor do botão */
}

.header__toggle {
  display: none; /* Oculto em desktop */
  background: none;
  border: none;
  cursor: pointer;
}

/* --- Hero Section --- */
.hero {
  padding-top: 160px;
  padding-bottom: 80px;
  /* ATUALIZAÇÃO: Degradê amarelo claro para amarelo escuro */
  background-image: linear-gradient(90deg, var(--hero-light-yellow), var(--hero-dark-yellow));
  color: var(--hero-text-color); /* Texto em preto para contraste */
  text-align: center;
}

.hero__title {
  font-family: var(--font-primary);
  font-size: clamp(2.5rem, 7vw, 4rem);
  line-height: 1.1;
  margin-bottom: 16px;
}

.hero__subtitle {
  font-size: 1.125rem;
  max-width: 600px;
  margin: 0 auto 32px;
  opacity: 0.9;
}

.hero__actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* --- Features Section --- */
.feature-card {
    text-align: center;
    padding: 24px;
}
.feature-card__icon {
    margin: 0 auto 16px;
    /* ATUALIZAÇÃO: Define um tamanho fixo para os ícones */
    width: 80px;
    height: 80px;
    object-fit: contain; /* Garante que a imagem caiba sem distorcer */
    /* REVERSÃO: Fundo branco removido desta seção */
}
.feature-card__title {
    font-family: var(--font-primary);
    margin-bottom: 8px;
}

/* ATUALIZAÇÃO: Adiciona linha separadora após a seção de diferenciais */
#diferenciais {
    border-bottom: 1px solid #e0e0e0;
}

/* --- Plans Section --- */

/* ATUALIZAÇÃO: Reduz o espaçamento superior das seções de planos */
#planos, #planos-studio {
    padding-top: 40px; /* Reduzido de 64px */
}

/* ATUALIZAÇÃO: Título da Unidade Getúlio Vargas maior */
.plans__unit-title {
    text-align: center;
    color: var(--dark-yellow-button);
    font-family: var(--font-primary);
    /* ATUALIZAÇÃO: Tamanho da fonte igual ao .section__title */
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    /* ATUALIZAÇÃO: Margem igual ao .section__title */
    margin-bottom: 24px; 
}

.plans__container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px; /* ATUALIZAÇÃO: Gap reduzido */
    max-width: 1200px; 
    margin: 0 auto;
}
.plan-card {
    background-color: var(--bg-light);
    border: 1px solid #eee;
    padding: 20px; /* ATUALIZAÇÃO: Padding reduzido */
    border-radius: var(--radius-md);
    text-align: center;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
}
.plan-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.07);
}
.plan-card--featured {
    border: 2px solid var(--dark-yellow-button); /* Borda do plano em destaque */
    position: relative;
    overflow: hidden;
}
/* Badge removido do HTML, mas a regra CSS pode permanecer ou ser removida */
.plan-card__badge {
    position: absolute;
    top: 15px;
    right: -30px;
    background-color: var(--dark-yellow-button); /* Cor do badge */
    color: var(--hero-text-color); /* Texto em preto para contraste */
    padding: 4px 32px;
    transform: rotate(45deg);
    font-size: 0.875rem;
    font-weight: 700;
}
.plan-card__title {
    font-family: var(--font-primary);
    font-size: 1.25rem; /* Diminui fonte para caber em 4 colunas */
}
/* ATUALIZAÇÃO: Novo estilo para o subtítulo do plano */
.plan-card__subtitle {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 8px;
    min-height: 1.25em; /* Garante altura mínima para alinhamento */
}
.plan-card__price {
    font-size: 2rem; /* Diminui fonte para caber */
    font-weight: 700;
    margin: 8px 0;
    color: var(--brand-black);
}
.plan-card__period {
    font-size: 1rem;
    font-weight: 400;
    color: var(--text-muted);
}
.plan-card__hours {
    color: var(--dark-yellow-button); /* Horário na cor do botão */
    font-weight: 700;
    margin-bottom: 24px;
    font-size: 0.9rem;
}
.plan-card__features {
    margin-bottom: 32px;
    text-align: left;
    flex-grow: 1; /* Faz a lista crescer para alinhar os botões */
    font-size: 0.9rem; /* Diminui fonte para caber */
}
.plan-card__features li {
    margin-bottom: 12px;
    padding-left: 24px;
    position: relative;
}
.plan-card__features li::before {
    content: '✔';
    color: var(--success);
    position: absolute;
    left: 0;
}
.plans__footer-note {
    text-align: center;
    margin-top: 32px;
    color: var(--text-muted);
}

/* --- App SCA Section --- */
.section--app {
    background-color: var(--brand-blue);
    color: white;
}
.app-section__wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: center;
}

.app-section__title {
    font-family: var(--font-primary);
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    color: white;
    margin-bottom: 16px;
}
.app-section__text {
    color: #f0f0f0;
    margin-bottom: 32px;
    font-size: 1.125rem;
    max-width: 500px;
}
.app-section__buttons {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center; /* Alinha os botões verticalmente */
}

/* ATUALIZAÇÃO: Novas regras para .btn-store (baseado no novo HTML) */
.btn-store {
    display: inline-flex;
    align-items: center;
    padding: 12px 16px;
    background-color: var(--bg-light);
    border-radius: var(--radius-md);
    color: var(--brand-black);
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: transform 0.2s ease-in-out;
}
.btn-store:hover {
    transform: scale(1.05);
}
.btn-store__icon {
    /* Define um tamanho fixo para os ícones */
    height: 32px;
    width: 32px;
    margin-right: 12px;
    object-fit: contain;
}
.btn-store__text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.btn-store__text span {
    font-size: 0.75rem; /* "Disponível na" */
}
.btn-store__text strong {
    font-size: 1rem; /* "App Store" / "Play Store" */
    font-weight: 700;
}

.app-section__icon {
    display: flex;
    justify-content: center;
    align-items: center;
    /* ATUALIZAÇÃO: Adiciona margem superior para espaçamento no mobile */
    margin-top: 32px;
}
.app-section__icon img {
    max-width: 300px;
    width: 100%;
    border-radius: var(--radius-md);
    /* REVERSÃO: Fundo branco removido desta seção */
}


/* --- Location Section --- */
.location__intro {
    text-align: center;
    color: var(--dark-yellow-button); /* Cor do intro na cor do botão */
    font-family: var(--font-primary);
    font-size: 1.5rem;
    margin-bottom: 48px;
}
.location__units-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 64px;
}
.location__wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: center;
    /* ATUALIZAÇÃO: Fundo cinza padrão para TODAS as unidades */
    background-color: var(--surface);
    padding: 32px;
    border-radius: var(--radius-md);
    /* ATUALIZAÇÃO: Borda amarela fina adicionada à Unidade 1 */
    border: 1px solid var(--dark-yellow-button);
}
.location__info h3 {
    font-family: var(--font-primary);
    font-size: 1.75rem;
    margin-bottom: 16px;
}
.location__info h4 {
    font-family: var(--font-primary);
    margin-top: 24px;
    margin-bottom: 8px;
}
/* ATUALIZAÇÃO: Adiciona margem ao botão "Como Chegar" */
.location__info .btn {
    margin-top: 24px;
}
.location__map iframe {
    width: 100%;
    height: 350px;
    border-radius: var(--radius-md);
}

/* ATUALIZAÇÃO: Unidade 2 (Studio) agora tem o mesmo estilo da Unidade 1 */
.location__unit--alt-bg {
    background-color: var(--surface); /* Fundo cinza (igual à Unidade 1) */
    color: inherit; /* Herda a cor de texto padrão (preto) */
    border: 1px solid var(--dark-yellow-button); /* Borda amarela (igual à Unidade 1) */
    opacity: 1; /* Remove a opacidade */
}
/* ATUALIZAÇÃO: Títulos da Unidade 2 voltam à cor padrão (preto) */
.location__unit--alt-bg .location__info h3,
.location__unit--alt-bg .location__info h4 {
    color: inherit; /* Herda a cor padrão */
}


/* --- FAQ Section --- */
.faq__container {
    max-width: 800px;
    margin: 0 auto;
}
.faq__item {
    border-bottom: 1px solid #e0e0e0;
}
.faq__question {
    padding: 20px 0;
    font-weight: 700;
    cursor: pointer;
    list-style: none; /* Remove a seta padrão */
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.faq__question::after {
    content: '+';
    font-size: 1.5rem;
    transition: transform 0.2s;
}
.faq__item[open] .faq__question::after {
    transform: rotate(45deg);
}
.faq__answer {
    padding-bottom: 20px;
    color: var(--text-muted);
}

/* --- Footer --- */
.footer {
    background-color: var(--brand-black); /* Fundo do rodapé preto */
    color: #ccc;
    padding-top: 64px;
}
.footer__container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 32px;
    padding-bottom: 48px;
}
/* ATUALIZAÇÃO: Define tamanho da logo no rodapé */
.footer__logo {
    height: 40px;
    width: auto;
    margin-bottom: 16px;
}
.footer__col h4 {
    font-family: var(--font-primary);
    color: white;
    margin-bottom: 16px;
}
.footer__col ul li {
    margin-bottom: 8px;
}
.footer__col a:hover {
    color: var(--dark-yellow-button); /* hover do link do rodapé */
}
.footer__social {
    display: flex;
    gap: 16px;
}
/* NOVO: Estilo para os ícones sociais no rodapé */
.footer__social img {
    width: 64px; /* Largura fixa */
    height: 64px; /* Altura fixa */
    object-fit: contain; /* Garante que a imagem se ajuste sem cortar */
}
.footer__bottom {
    text-align: center;
    padding: 24px 0;
    border-top: 1px solid #333;
    font-size: 0.875rem;
}

/* --- WhatsApp Float Button --- */
.whatsapp-float {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 60px;
    height: 60px;
    background-color: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    z-index: 99;
    transition: transform 0.2s;
}
.whatsapp-float:hover {
    transform: scale(1.1);
}

/* Animações de scroll */
[data-animate] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
[data-animate].visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   4. MEDIA QUERIES (RESPONSIVIDADE - Mobile First)
   ========================================================================== */
@media (max-width: 768px) {
  .header__menu {
    position: fixed;
    top: 80px;
    left: 0;
    width: 100%;
    height: calc(100vh - 80px);
    background-color: var(--bg-light);
    flex-direction: column;
    align-items: center;
    padding-top: 48px;
    gap: 24px;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
  }
  .header__menu.active {
    transform: translateX(0);
  }
  .header__toggle {
    display: block;
  }
  .header__cta {
    display: none; /* Esconde o botão do header, mantendo o do menu */
  }
  
  /* ATUALIZAÇÃO: Ajusta o padding de TODAS as unidades em telas menores */
  .location__wrapper {
    padding: 24px;
  }

  /* Em telas muito pequenas, força 1 coluna para planos */
  .plans__container {
    grid-template-columns: 1fr;
  }

  /* ATUALIZAÇÃO: Diminui o ícone do app SCA FIT pela metade no mobile */
  .app-section__icon img {
      max-width: 150px; /* Metade do 300px do desktop */
      /* REVERSÃO: Fundo branco removido desta seção */
  }

  /* ATUALIZAÇÃO: Empilha os botões de download no mobile */
  .app-section__buttons {
      flex-direction: column;
      align-items: stretch; /* Botões esticam na largura disponível */
  }
  .btn-store {
      justify-content: center; /* Centraliza conteúdo do botão */
  }
}

@media (min-width: 768px) {
  /* ATUALIZAÇÃO: .plans__container padrão (Studio) é 2 colunas e centralizado */
  .plans__container { 
    grid-template-columns: repeat(2, 1fr); 
    max-width: 900px; /* Define um max-width razoável para 2 colunas */
  }
  .location__wrapper { grid-template-columns: 1fr 1.2fr; } /* Mapa um pouco maior */
  
  /* ATUALIZAÇÃO: Layout de 2 colunas para a seção App em desktop */
  .app-section__wrapper {
      /* ATUALIZAÇÃO: Layout corrigido com base no novo HTML */
      /* grid-template-columns: 2fr 1fr; (Removido do wrapper) */
      display: block; /* Desativa o grid do wrapper no desktop */
  }
  /* ATUALIZAÇÃO: Transforma o .app-section__content em grid no desktop */
  .app-section__content {
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: 32px;
      align-items: center;
  }
  .app-section__title {
      grid-column: 1 / 2;
      grid-row: 1;
  }
  .app-section__text {
      grid-column: 1 / 2;
      grid-row: 2;
  }
  .app-section__buttons {
      grid-column: 1 / 2;
      grid-row: 3;
  }
  .app-section__icon {
      grid-column: 2 / 3;
      grid-row: 1 / span 3; /* Ocupa as 3 linhas */
      margin-top: 0; /* Remove a margem do mobile */
  }
}

@media (min-width: 1024px) {
  .grid--2-cols { grid-template-columns: repeat(2, 1fr); }
  
  /* ATUALIZAÇÃO: Modificador para 4 colunas (GV) usa largura total */
  .plans__container--4-cols { 
    grid-template-columns: repeat(4, 1fr); 
    max-width: 1200px; /* Garante que a de 4 colunas use a largura total */
  } 
}