/* ═══════════════════════════════════════════════════════════════
   VIDA ALÉM DA APOSENTADORIA — Landing Page Stylesheet
   Acessibilidade: WCAG AA · Público 50+ · Corpo ≥16px · Títulos ≥24px
   ═══════════════════════════════════════════════════════════════ */

/* ─── DESIGN TOKENS (NOVA PALETA TRANSCENDERTE) ─────────────── */
:root {
  /* Cores da Marca */
  --verde:          #13A89E;
  --verde-escuro:   #12766A;
  --vinho:          #A85D95;
  --vinho-claro:    #C3789F;
  --lilas:          #CE99BF;
  --branco:         #FFFFFF;
  
  /* Ouro Velho (Para botões e destaques) */
  --ouro-velho:       #B89947;
  --ouro-velho-hover: #9E8036;

  /* Neutros para textos e fundos alternativos */
  --off-white:      #F9F9F9;
  --gray-200:       #E0DDD8;
  --gray-600:       #6B6560;
  --gray-800:       #333333;

  /* Tipografia */
  --font-heading:   'Playfair Display', 'Georgia', serif;
  --font-body:      'Inter', 'Segoe UI', system-ui, sans-serif;

  /* Espaçamento */
  --space-xs:       0.5rem;
  --space-sm:       1rem;
  --space-md:       1.5rem;
  --space-lg:       2.5rem;
  --space-xl:       4rem;
  --space-2xl:      6rem;
  
  /* Altura do Header Fixo */
  --header-height:  80px;

  /* Bordas e Transições */
  --radius-sm:      6px;
  --radius-md:      10px;
  --radius-lg:      16px;
  --transition:     0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ─── RESET & BASE ──────────────────────────────────────────── */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 100%;            
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: 1.125rem;        
  line-height: 1.7;
  color: var(--gray-800);
  background-color: var(--off-white);
  -webkit-font-smoothing: antialiased;
  padding-top: var(--header-height); /* Espaço para o header fixo */
}

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

a {
  text-decoration: none;
  transition: color var(--transition);
}

/* ─── UTILIDADES ────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.container--narrow {
  max-width: 820px;
}

.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── TIPOGRAFIA ────────────────────────────────────────────── */
h1, h2, h3 {
  font-family: var(--font-heading);
  line-height: 1.25;
}

h1 { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 700; }
h2 { font-size: clamp(1.625rem, 4vw, 2.5rem); font-weight: 700; }
h3 { font-size: clamp(1.25rem, 3vw, 1.5rem); font-weight: 600; }

p {
  margin-bottom: var(--space-sm);
  max-width: 65ch;
}

strong {
  font-weight: 700;
}

/* ─── CABEÇALHO FIXO ────────────────────────────────────────── */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 160px;/*var(--header-height);*/
  background-color: var(--branco);
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  z-index: 1000;
  display: flex;
  align-items: center;
}

.header__container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative; /* Necessário para centralizar o título absolutamente */
  height: 100%;
}

.header__logo-link {
  display: flex;
  align-items: center;
  z-index: 2; /* Garante que fique clicável acima do título */
}

.header__logo-img {
  max-height: 130px; /* Ajuste a altura ideal para o seu logo aqui */
  width: auto;
  display: block;
}

.header__logo_pendente-link {
  display: flex;
  align-items: center;
  z-index: 2; /* Garante que fique clicável acima do título */
}

.header__logo__pendente-img {
  max-height: 130px; /* Ajuste a altura ideal para o seu logo aqui */
  width: auto;
  display: block;
  margin-bottom:30px;
}

.header__title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-heading);
  /* Tamanho responsivo: fica menor no celular e cresce até 2.5rem no desktop */
  font-size: clamp(1.1rem, 3vw, 2.5rem); 
  color: var(--verde-escuro);
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
  max-width: 40%; /* Permite que o texto quebre de linha sem encavalar na logo/botão no celular */
  z-index: 1;
  /* A linha 'display: none;' foi removida para aparecer no celular */
}


.header__btn {
  padding: 0.8em 3.0em; /* Preenchimento maior (era 0.6em 1.2em) */
  font-size: 1.4rem; /* Fonte maior (era 0.95rem) */
  font-weight: 700; /* Deixei o texto do botão mais gordinho/destacado */
  border-radius: var(--radius-sm);
  z-index: 2; 
  
}


/* ─── SEÇÕES (BASE) ─────────────────────────────────────────── */
.section {
  padding: var(--space-2xl) 0;
}

.section--light {
  background-color: var(--off-white);
  color: var(--gray-800);
}

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

.section--vinho strong {
  color: var(--lilas);
}

.section--verde-escuro {
  background-color: var(--verde-escuro);
  color: var(--branco);
}

.section--verde-escuro strong {
  color: var(--verde);
}

.section--verde-claro {
  background-color: var(--verde);
  color: var(--branco);
}

.section--verde-claro strong {
  color: var(--branco);
}

.section__heading {
  text-align: center;
  margin-bottom: var(--space-lg);
  position: relative;
  color: var(--verde-escuro); 
}

.section__heading::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: var(--ouro-velho);
  margin: var(--space-sm) auto 0;
  border-radius: 2px;
}

.section__heading--light {
  color: var(--branco);
}

/* ═══════════════════════════════════════════════════════════════
   BLOCO 1 — HERO
   ═══════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: calc(100vh - var(--header-height));
  display: flex;
  align-items: center;
  background: linear-gradient(145deg, var(--verde-escuro) 0%, var(--verde) 100%);
  overflow: hidden;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 50%, rgba(255,255,255, 0.05) 0%, transparent 70%);
  pointer-events: none;
}

.hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
  position: relative;
  z-index: 1;
  padding: var(--space-xl) 0;
  margin-top:70px;
}

.hero__content {
  color: var(--branco);
}

.hero__badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--branco);
  color: var(--branco);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.4em 1.2em;
  border-radius: 50px;
  margin-bottom: var(--space-md);
}

.hero__headline {
  color: var(--branco);
  margin-bottom: var(--space-md);
}

.hero__subheadline {
  font-size: 1.2rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.9);
  margin-bottom: var(--space-lg);
}

.hero__cta {
  margin-bottom: var(--space-lg);
}

.hero__proof-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  font-size: 0.9rem;
  color: rgba(255,255,255,0.7);
}

.hero__proof-item strong {
  color: var(--ouro-velho);
}

.hero__proof-divider {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ouro-velho);
  flex-shrink: 0;
}

.hero__image-wrapper {
  display: flex;
  justify-content: center;
}

.hero__image-placeholder {
  width: 360px;
  height: 440px;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.1);
  border: 2px dashed rgba(255,255,255,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--branco);
  font-size: 1.125rem;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════
   BLOCO 2 — IDENTIFICAÇÃO (DOR)
   ═══════════════════════════════════════════════════════════════ */
.dor__content {
  max-width: 65ch;
  margin: 0 auto;
}

.dor__content p {
  margin-bottom: var(--space-md);
}

.dor__content strong {
  color: var(--vinho);
}

.dor__destaque {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--verde-escuro);
  text-align: center;
  margin: var(--space-lg) 0;
}

/* ═══════════════════════════════════════════════════════════════
   BLOCO 3 — SOLUÇÃO (Fundo Roxo Degradê igual ao Topo)
   ═══════════════════════════════════════════════════════════════ */
.section--purple, 
.section--vinho {
  /* Usando as cores hexadecimais exatas para não dar erro de fundo branco */
  background: linear-gradient(145deg, #3B1861 0%, #2A0E47 60%, #1A0830 100%) !important;
  color: #FFFFFF !important;
}

/* Garante que os textos em destaque fiquem dourados */
.section--purple strong,
.section--vinho strong {
  color: #B89947 !important; /* Cor Ouro Velho */
}

/* Deixa o título da seção branco para dar contraste com o fundo roxo */
.section--purple .section__heading,
.section--vinho .section__heading {
  color: #FFFFFF !important;
  font-size:32px;
}

.solucao__content {
  max-width: 750px; /* Define uma largura excelente para a leitura justificada */
  margin: 0 auto;   /* O "auto" nas laterais garante que a caixa fique EXATAMENTE no centro da tela */
}

.solucao__content p {
  max-width: 100%;  /* Remove a limitação global que estava puxando o texto para a esquerda */
  margin-bottom: var(--space-md);
}

.solucao__content ul {
  max-width: 100%;  /* Garante que a lista acompanhe a mesma largura do texto */
}

.solucao__diferencial {
  margin-top: var(--space-xl);
  text-align: center;
}

.solucao__diferencial-text {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--ouro-velho); 
  border-top: 1px solid rgba(255,255,255,0.2);
  border-bottom: 1px solid rgba(255,255,255,0.2);
  padding: var(--space-sm) var(--space-md);
  max-width: 55ch;
}

/* ═══════════════════════════════════════════════════════════════
   BLOCO 4 — AUTORIDADE (VERDE ESCURO)
   ═══════════════════════════════════════════════════════════════ */
.autoridade__bio-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-xl);
  align-items: start;
  margin-bottom: var(--space-xl);
}

.autoridade__foto-placeholder {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.05);
  border: 2px dashed rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.4);
}

/* Estilo para a foto real da autoridade */
.autoridade__foto-img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4; /* Mantém a proporção de retrato elegante */
  object-fit: cover; /* Garante que a foto preencha o espaço sem amassar ou distorcer */
  border-radius: var(--radius-md); /* Aplica as bordas arredondadas */
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2); /* Adiciona uma sombra suave para destacar a foto */
}

.autoridade__nome {
  color: var(--branco);
  margin-bottom: var(--space-xs);
  font-size: 1.5rem;
}

.autoridade__titulo-profissional {
  color: var(--ouro-velho);
  font-weight: 900;
  margin-bottom: var(--space-md);
  font-size: 1.3rem;
}

.autoridade__credenciais {
  list-style: none;
  padding: 0;
}

.autoridade__credenciais li {
  position: relative;
  padding-left: 1.5em;
  margin-bottom: var(--space-xs);
  color: var(--branco);
}

.autoridade__credenciais li::before {
  content: '◆';
  position: absolute;
  left: 0;
  color: var(--ouro-velho);
  font-size: 0.6em;
  top: 0.55em;
}

.autoridade__logos {
  display: flex;
  flex-direction: column; /* Isso força cada <div> a ir para uma nova linha */
  align-items: center;    /* Centraliza os blocos na tela */
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Essa é a regra NOVA que organiza as tags <span> lado a lado dentro das suas <div> */
.autoridade__logos div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px; /* Espaço entre os botõezinhos na mesma linha */
}

/* O seu item continua exatamente igual! Não mudamos nada aqui: */
.autoridade__logo-item {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.05);
  padding: 0.6em 1.4em;
  border-radius: var(--radius-sm);
}


/* ═══════════════════════════════════════════════════════════════
   BLOCO 5 — OFERTA (VERDE)
   ═══════════════════════════════════════════════════════════════ */
.oferta__stack {
  max-width: 620px;
  margin: 0 auto var(--space-xl);
}

.oferta__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.oferta__item:last-child {
  border-bottom: none;
}

.oferta__check {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.oferta__item strong {
  display: block;
  margin-bottom: 0.25em;
}

.oferta__item p {
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 0;
}

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

.oferta__vagas {
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 1rem;
  
  /* As 4 linhas mágicas que forçam a centralização absoluta: */
  display: block;
  text-align: center !important;
  max-width: 100% !important; /* Quebra a regra global dos 65 caracteres */
  margin-left: auto;
  margin-right: auto;
}


/* ═══════════════════════════════════════════════════════════════
   BLOCO 6 — FAQ (BRANCO)
   ═══════════════════════════════════════════════════════════════ */
.faq__lista {
  max-width: 720px;
  margin: 0 auto;
}

.faq__item {
  border-bottom: 1px solid var(--gray-200);
  overflow: hidden;
}

.faq__pergunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: var(--space-md) 0;
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--verde-escuro);
  list-style: none;
  transition: color var(--transition);
}

.faq__pergunta::-webkit-details-marker { display: none; }
.faq__pergunta::marker { display: none; content: ''; }

.faq__pergunta::after {
  content: '+';
  font-size: 1.5rem;
  font-family: var(--font-body);
  color: var(--vinho);
  flex-shrink: 0;
  margin-left: var(--space-sm);
}

details[open] > .faq__pergunta::after { content: '−'; }

.faq__pergunta:hover { color: var(--verde); }

.faq__resposta { padding: 0 0 var(--space-md) 0; }
.faq__resposta p { color: var(--gray-600); margin-bottom: 0; }

/* ═══════════════════════════════════════════════════════════════
   BOTÕES E CTAs
   ═══════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all var(--transition);
  line-height: 1.2;
}

.btn--gold {
  background: var(--ouro-velho);
  color: var(--branco);
  box-shadow: 0 4px 16px rgba(184, 153, 71, 0.3);
  border-radius: var(--radius-sm);
}

.btn--gold:hover {
  background: var(--ouro-velho-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(158, 128, 54, 0.4);
}

.btn--large {
  font-size: 1.125rem;
  padding: 1em 2.25em;
  min-height: 56px;
}

/* ═══════════════════════════════════════════════════════════════
   RODAPÉ (Centralizado em Coluna Única | Off-White e Roxo | COMPACTO)
   ═══════════════════════════════════════════════════════════════ */
.footer {
  background-color: var(--off-white); 
  color: #3B1861; 
  padding: 2rem 0 1rem; /* Reduzi o espaço enorme que tinha em cima e embaixo */
  border-top: 1px solid var(--gray-200); 
}

.footer__container {
  display: flex;
  flex-direction: column;
  align-items: center; 
  text-align: center;
  gap: 0.3rem; /* Reduzi muito o buraco entre os blocos (era 1.5rem) */
}

.footer__logo-img {
  max-height: 150px; 
  width: auto;
  display: block;
  margin: 0 auto 0.2rem auto; /* Tirei quase todo o espaço embaixo da logo */
}

.footer__brand,
.footer__info,
.footer__legal {
  width: 100%;
}

.footer p {
  max-width: 100% !important; 
  margin: 0 auto; /* Zerei as margens extras dos parágrafos */
  line-height: 1.4; /* Apertei a altura da linha para o texto ficar mais junto */
}

.footer__tagline {
  font-size: 0.95rem;
  color: #5C2D91; 
  font-style: italic;
  font-weight: 500;
}

.footer__info p {
  font-size: 0.875rem;
  color: #3B1861; 
}

.footer__legal p {
  font-size: 0.8rem;
  color: var(--gray-600); 
  margin-top: 0.5rem; /* Deixei os direitos autorais mais colados no texto de cima */
}



/* ═══════════════════════════════════════════════════════════════
   RESPONSIVO
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .hero__grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero__proof-bar { justify-content: center; }
  .hero__image-wrapper { order: -1; }
  .hero__cta { width: 100%; }
  
  .autoridade__bio-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .autoridade__foto-placeholder {
    max-width: 240px;
    margin: 0 auto;
  }
  .autoridade__credenciais li { text-align: left; }
}

@media (max-width: 600px) {
  .section { padding: var(--space-xl) 0; }
  .hero { padding: var(--space-md) 0; }
  .btn--large { width: 100%; font-size: 1rem; padding: 1em 1.5em; }
  .hero__proof-bar { flex-direction: column; gap: var(--space-xs); }
  .hero__proof-divider { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   MODAL DE INSCRIÇÃO E FORMULÁRIO
   ═══════════════════════════════════════════════════════════════ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal.is-open {
  opacity: 1;
  visibility: visible;
}

.modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(18, 118, 106, 0.85); /* Verde escuro com opacidade */
  backdrop-filter: blur(5px);
  cursor: pointer;
}

.modal__content {
  position: relative;
  width: 90%;
  max-width: 480px;
  background: var(--branco);
  border-radius: var(--radius-md);
  padding: var(--space-lg) var(--space-md);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
  transform: translateY(20px) scale(0.95);
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  max-height: 95vh;
  overflow-y: auto;
}

.modal.is-open .modal__content {
  transform: translateY(0) scale(1);
}

.modal__close {
  position: absolute;
  top: 15px;
  right: 15px;
  background: transparent;
  border: none;
  font-size: 2rem;
  line-height: 1;
  color: var(--gray-600);
  cursor: pointer;
  transition: color var(--transition);
  padding: 0 10px;
}

.modal__close:hover {
  color: var(--vinho);
}

.modal__header {
  text-align: center;
  margin-bottom: var(--space-md);
}

.modal__title {
  font-family: var(--font-heading);
  color: var(--verde-escuro);
  font-size: 1.75rem;
  margin-bottom: var(--space-xs);
}

.modal__subtitle {
  font-size: 0.95rem;
  color: var(--gray-600);
  line-height: 1.4;
  margin-bottom: 0;
}

.form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form__group {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.form__label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--verde-escuro);
  margin-bottom: 0.4rem;
}

.form__input {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.8em 1em;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  background-color: var(--off-white);
  color: var(--gray-800);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.form__input:focus {
  outline: none;
  border-color: var(--verde);
  box-shadow: 0 0 0 3px rgba(19, 168, 158, 0.15);
  background-color: var(--branco);
}

.form__input::placeholder {
  color: #A0A0A0;
}

/* Customização da seta do select */
.form__select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312766A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.2em;
  padding-right: 2.5rem;
  cursor: pointer;
}

.form__submit {
  margin-top: 0.5rem;
  width: 100%;
}

@media (min-width: 600px) {
  .modal__content {
    padding: var(--space-lg);
  }
}

/* ═══════════════════════════════════════════════════════════════
   PÁGINA DE INSCRIÇÃO PENDENTE (CONFIRMAÇÃO DE E-MAIL)
   ═══════════════════════════════════════════════════════════════ */
.pendente__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: start; /* ✅ Mude de "center" para "start" */
  margin-top: 10px;
}

.pendente__title {
  color: var(--vinho);
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: var(--space-sm);
}

.pendente__subtitle {
  font-size: 1.125rem;
  color: var(--gray-800);
  margin-bottom: var(--space-lg);
  line-height: 1.6;
}

/* Lista de Passos Numerada */
.pendente__steps {
  list-style: none;
  padding: 0;
  margin-bottom: var(--space-lg);
}

.pendente__steps li {
  position: relative;
  padding-left: 3.5rem;
  margin-bottom: 1.5rem;
  font-size: 1.125rem;
  color: var(--gray-800);
  line-height: 1.5;
  display: flex;
  align-items: center;
  min-height: 40px;
}

.pendente__steps .step-number {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background-color: var(--ouro-velho);
  color: var(--branco);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(184, 153, 71, 0.3);
}

/* Caixa de Aviso (Spam) */
.pendente__aviso {
  background-color: rgba(18, 118, 106, 0.05); /* Fundo verde super claro */
  border-left: 4px solid var(--verde-escuro);
  padding: 1rem 1.5rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.pendente__aviso p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--gray-600);
}

/* Ilustração CSS do E-mail (Mockup) */
.email-mockup {
  background-color: var(--verde-escuro); /* Fundo remetendo à marca */
  border-radius: var(--radius-md);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  max-width: 500px;
  margin: 0 auto;
  align-content: start;
}

.email-mockup__header {
  background-color: rgba(0, 0, 0, 0.2);
  padding: 1rem 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.email-mockup__title {
  color: var(--branco);
  font-weight: 600;
  font-size: 1.1rem;
}

.email-mockup__body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.email-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border-radius: var(--radius-sm);
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* O E-mail em Destaque */
.email-item--highlight {
  background-color: var(--off-white);
  border: none;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transform: scale(1.02);
  margin: 0.5rem 0;
}

.email-item__icon {
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.4);
}

.email-item--highlight .email-item__icon {
  color: var(--ouro-velho);
}

.email-item__content {
  flex: 1;
}

.email-item__subject {
  font-weight: 700;
  color: var(--verde-escuro);
  font-size: 1rem;
  margin-bottom: 0.2rem;
}

.email-item__sender {
  font-size: 0.85rem;
  color: var(--gray-600);
}

/* Linhas falsas para os e-mails de fundo */
.email-line {
  height: 8px;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  margin-bottom: 6px;
}
.email-line:last-child { margin-bottom: 0; }
.email-line--long { width: 85%; }
.email-line--medium { width: 60%; }
.email-line--short { width: 40%; }

/* Responsivo da Página Pendente */
@media (max-width: 900px) {
  .pendente__grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
  
  .pendente__title {
    text-align: center;
  }
  
  .pendente__subtitle {
    text-align: center;
  }
}

/* ═══════════════════════════════════════════════════════════════
   PÁGINA DE OBRIGADO / PESQUISA (DIAGNÓSTICO)
   ═══════════════════════════════════════════════════════════════ */
.solucao__diferencial_obrigado {
  margin-top: var(--space-xl);
  text-align: center;
}

.solucao__diferencial__obrigado-text {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--ouro-velho); 
  border-top: 1px solid rgba(255,255,255,0.2);
  border-bottom: 1px solid rgba(255,255,255,0.2);
  padding: var(--space-sm) var(--space-md);
  max-width: 55ch;
}

.pesquisa-box {
  background: var(--branco);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  margin-top: 0; /* Puxa a caixa para cima do fundo vinho */
  position: relative;
  z-index: 10;
  padding: var(--space-xl);
}

/* Zera apenas o que é necessário do fieldset, sem apagar o espaçamento inferior */
.pesquisa-form fieldset {
  border: none;
  padding-inline: 0;
  margin-inline: 0;
  margin-top: 0;
  padding-top: 0;
}

/* Força a margem e a linha em TODAS as perguntas de forma absoluta */
.pesquisa-form .pesquisa__pergunta {
  margin-bottom: var(--space-xl) !important;
  padding-bottom: var(--space-xl) !important;
  border-bottom: 1px solid var(--gray-200) !important;
}

/* Apaga a linha e o espaço APENAS da Pergunta 7 (para ficar mais perto do botão) */
.pesquisa-form > div.pesquisa__pergunta:nth-last-child(2) {
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}


.pesquisa__pergunta:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}

.pesquisa__pergunta .form__label {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--verde-escuro);
  margin-bottom: 1rem;
  display: block;
}

/* Opções de Múltipla Escolha */
.pesquisa__opcoes {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.pesquisa__radio {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 1rem;
  color: var(--gray-800);
  cursor: pointer;
  padding: 0.5rem;
  border-radius: var(--radius-sm);
  transition: background-color var(--transition);
}

.pesquisa__radio:hover {
  background-color: var(--off-white);
}

.pesquisa__radio input[type="radio"] {
  width: 1.25rem;
  height: 1.25rem;
  accent-color: var(--verde-escuro);
  cursor: pointer;
  flex-shrink: 0;
}

/* Campo "Outro" */
.input-outro {
  border: none;
  border-bottom: 1px solid var(--gray-600);
  background: transparent;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.2rem 0.5rem;
  color: var(--gray-800);
  width: 100%;
  max-width: 300px;
  outline: none;
  transition: border-color var(--transition);
}

.input-outro:focus {
  border-bottom-color: var(--verde-escuro);
}

/* Escala Linear (Pergunta 6) */
.pesquisa__escala {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  background-color: var(--off-white);
  padding: 1rem;
  border-radius: var(--radius-md);
  margin-top: 0.5rem;
}

.escala-label {
  font-size: 0.85rem;
  color: var(--gray-600);
  font-weight: 600;
  text-align: center;
  flex: 1;
}

.escala-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.escala-item span {
  font-weight: 600;
  color: var(--verde-escuro);
}

.escala-item input[type="radio"] {
  width: 1.5rem;
  height: 1.5rem;
  accent-color: var(--verde-escuro);
  cursor: pointer;
}

/* Responsivo Específico da Pesquisa */
@media (max-width: 768px) {
  .pesquisa-box {
    padding: var(--space-md);
    margin-top: -3rem;
  }
  
  .pesquisa__escala {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .escala-label {
    width: 100%;
    margin-bottom: 0.5rem;
  }
  
  .escala-label:last-child {
    margin-bottom: 0;
    margin-top: 0.5rem;
  }
}

/* Container do vídeo */
.video-hero-wrapper {
  position: relative;
  width: 100%;
  
  /* Diminuímos a largura máxima para não ficar gigantesco na tela do PC */
  max-width: 360px; 
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
  background-color: #000;
  
  /* A MÁGICA ACONTECE AQUI: Invertemos de 16/9 para 9/16 */
  aspect-ratio: 9 / 16; 
}


/* O vídeo em si */
.video-hero {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* O Botão Overlay de Som */
.btn-unmute-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4); /* Escurece um pouco o vídeo */
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: background-color 0.3s ease;
}

.btn-unmute-overlay:hover {
  background-color: rgba(0, 0, 0, 0.5);
}

/* O conteúdo dentro do botão */
.unmute-content {
  background-color: #C5A55A; /* Seu dourado */
  color: #3B1861; /* Seu roxo escuro */
  padding: 12px 24px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: bold;
  font-size: 1.1rem;
  box-shadow: 0 4px 15px rgba(197, 165, 90, 0.4);
  animation: pulseSom 2s infinite; /* Efeito de pulsar */
}

@keyframes pulseSom {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* Faz o iframe do YouTube preencher 100% da caixa */
#youtube-player {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none; /* Impede que a pessoa pause o vídeo sem querer antes de clicar no botão dourado */
}

/* Quando a classe .ativo for adicionada pelo JS, devolvemos os cliques para o YouTube */
#youtube-player.ativo {
  pointer-events: auto;
}

/* ═══════════════════════════════════════════════════════════════
   RODAPÉ (FOOTER)
   ═══════════════════════════════════════════════════════════════ */
.footer-legal {
  background-color: #ffffff; /* Fundo limpo */
  border-top: 1px solid #eaeaea; /* Linha sutil separando do resto do site */
  text-align: center;
  padding: 3rem 1.5rem;
  color: #777777; /* Cinza elegante para não brigar com o conteúdo principal */
  font-size: 0.85rem;
}

.footer-legal p {
  margin-bottom: 0.8rem;
}

/* Container dos Links */
.footer-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-bottom: 1.5rem;
  margin-top: 1rem;
}

/* O separador (a bolinha entre os links) */
.footer-links .separator {
  color: #cccccc;
  font-size: 0.8rem;
}

/* Estilo dos Links em si */
.footer-links a {
  color: #555555;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
  padding: 5px 10px;
  border-radius: 4px;
}

/* Efeito ao passar o mouse */
.footer-links a:hover {
  color: var(--purple-dark, #3B1861); /* Fica roxo */
  background-color: #f4f4f6; /* Ganha um fundinho cinza bem suave */
}

/* Texto de isenção de responsabilidade (Facebook/Meta) */
.footer-disclaimer {
  font-size: 0.7rem;
  color: #aaaaaa;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════
   RODAPÉ FINAL (CORRIGIDO E BLINDADO)
   ═══════════════════════════════════════════════════════════════ */
.footer-legal {
  background-color: #ffffff;
  border-top: 1px solid #eaeaea;
  padding: 3rem 1.5rem;
  /* Força tudo dentro do rodapé a centralizar, ignorando regras globais */
  text-align: center !important; 
}

/* Garante que nenhum parágrafo dentro do rodapé fuja para a esquerda */
.footer-legal p, 
.footer-legal div {
  text-align: center !important;
}

/* Resetamos o container pro padrão dele para não quebrar seu layout */
.footer-legal .container {
  display: block; 
  max-width: 800px;
  margin: 0 auto;
}

/* 1. A Logo da Marca */
.footer__logo-img {
  max-width: 180px;
  height: auto;
  display: block;
  margin: 0 auto 1rem auto; /* Centraliza a imagem e dá 1rem de espaço embaixo */
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.footer__logo-img:hover {
  opacity: 1;
}

/* 2. O Slogan / Info */
.footer__info p {
  font-style: italic;
  color: #555555;
  font-size: 0.95rem;
  margin: 0 auto 1.5rem auto; /* Margem embaixo para separar dos links */
}

/* 3. Os Links Legais (Política e Termos) */
.footer-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 0 auto 1.5rem auto; /* Espaço embaixo para separar do aviso do Meta */
}

.footer-links .separator {
  color: #cccccc;
  font-size: 0.8rem;
}

.footer-links a {
  color: #555555;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
}

.footer-links a:hover {
  color: var(--purple-dark, #3B1861);
  text-decoration: underline;
}

/* 4. O Aviso do Facebook (Disclaimer) */
.footer-disclaimer {
  font-size: 0.7rem;
  color: #aaaaaa;
  max-width: 650px;
  line-height: 1.5;
  margin: 0 auto 1.5rem auto; /* Margem embaixo para separar do copyright */
}

/* 5. Direitos Autorais */
.footer__legal p {
  font-size: 0.8rem;
  color: #888888;
  margin: 0 auto; /* Zero margem embaixo pois é o último elemento */
}

/* ═══════════════════════════════════════════════════════════════
   AJUSTES DO CABEÇALHO E HERO PARA CELULAR (Mobile)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* 1. Altura do cabeçalho */
  .header {
    height: 110px; 
  }
  
  /* 2. Logo maior */
  .header__logo-img {
    max-height: 80px; 
    width: auto;
  }
  
  /* 3. Botão ajustado */
  .header__btn {
    padding: 0.6em 1.2em; 
    font-size: 1rem;   
    white-space: nowrap;  
  }

  /* 4. TIRA O BURACO ACIMA DO TEXTO DO HERO */
  .hero {
    padding-top: 2.5rem; 
    padding-left: 10px;
    padding-right: 10px;
  }

  .hero__grid {
    margin-top: 0; 
    padding-top: 0.5rem; 
  }
}

/* Ajuste fino para celulares menores */
@media (max-width: 400px) {
  .header {
    height: 100px;
  }
  
  .header__logo-img {
    max-height: 65px; 
  }
  
  .header__btn {
    padding: 0.5em 1em;
    font-size: 0.9rem;
  }
}