.elementor-12844 .elementor-element.elementor-element-252ea36{--display:flex;--min-height:1440px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-12844 .elementor-element.elementor-element-7f02f0f{width:100%;max-width:100%;}:root{--page-title-display:none;}/* Start custom CSS *//* ============================
   BASE (Desktop / layout geral)
   ============================ */
html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  font-family: 'Montserrat', 'Poppins';
  background-color: rgba(82, 113, 255, 0.02);
  background-image: radial-gradient(rgba(180,180,180,0.15) 0.8px, transparent 0.2px);
  background-size: 5px 5px;
  color: #2C3E50;
  overflow-x: hidden;
}

.app-wrapper {
  max-width: 768px;
  margin: 0 auto;
  padding: 0 22px;
  box-sizing: border-box;
  transform: scale(0.95);
  transform-origin: top center;
}

/* Header */
.header { display:flex; align-items:center; padding:12px; }
.logo-container img { height:30px; }
.company {
  margin-left:3px;
  font-family:'Times New Roman', serif;
  font-size:20px;
  color:#1a0a8c;
  font-weight:bold;
}

/* Progress */
.progress-bar { width:100%; height:3px; margin-bottom:5px; background:#ddd; }
.progress { width:0; height:100%; background:#5271ff; transition: width 0.4s ease; }

/* Form / sections */
.form-container { flex:1; display:flex; flex-direction:column; justify-content:space-between; padding:0 12px; box-sizing:border-box; }
.section { display:none; flex-direction:column; justify-content:space-between; min-height:100%; flex:1; overflow-y:auto; padding:12px 0; background:transparent !important; }
.section.active { display:flex; }
.section-content { flex-grow:1; padding:0 12px; }

/* Buttons area */
.section .buttons { display:flex; justify-content:space-between; gap:8px; padding:0 12px; margin-top:12px; }

/* Headings */
h1 { font-size:0.8rem; color:#444; margin-bottom:12px; }
h2 { font-size:1.4rem; font-weight:bold; margin-bottom:32px; }
h3 { font-size:1.7rem; font-weight:bold; margin-bottom:40px; }
h4 { font-size:0.95rem; font-weight:bold; margin-bottom:12px; }

.highlight { color: #5271ff; }
.placeholder {font-size:0.8rem;  color: #C0C0C0; }

/* Observation */
.observation {
  font-size:0.9rem; font-weight:bold; color:#444;
  background:#f4f4f4; padding:10px 14px; border-radius:12px;
  margin:0 auto 12px; display:flex; align-items:center; gap:10px; justify-content:center;
}
.observation img { width:26px; height:auto; }

/* Small observation variants */
.observation1, .observation2 { display:flex; align-items:center; color:#949191; font-weight:bold; }
.observation1 { font-size:0.8rem; margin-top:10px; }
.observation2 { font-size:0.8rem; color: #C0C0C0; margin:0 auto 12px; }
.observation1 img, .observation2 img { width:26px; }

.observation-box {
  color: #000000;
  font-weight: normal;
  font-size: 0.90rem;
  text-align: left;
}

/* Inputs and sliders */
input::placeholder {
  color: #C0C0C0;
  font-size: 0.8rem;
}

input[type="text"], input[type="number"], input[type="range"] {
  width:100%;
  padding:10px;
  font-size:14px;
  border:1px solid #ccc;
  border-radius:8px;
  margin-bottom:4px;
  box-sizing:border-box;
}

.slider-container {
  display:flex;
  flex-direction:column;
  align-items:center;
  margin:10px 0;
}

.slider-value {
  border:2px solid #ccc;
  border-radius:8px;
  padding:6px 12px;
  font-size:1rem;
  font-weight:bold;
  color:#5271ff;
  margin-bottom:12px;
}

/* Options */
.options {
  display:flex;
  flex-direction:column;
  gap:8px;
}
.option-button {
  display:flex;
  align-items:center;
  padding:12px 18px;
  background:#fff;
  border:2px solid #ccc;
  border-radius:12px;
  cursor:pointer;
  transition:0.2s ease-in-out; font-size: 16px;
}
.option-button:hover { background:rgba(82,113,255,0.05); }
.option-button.selected { border-color:#5271ff; background:rgba(82,113,255,0.1); }
.option-button img { width:60px; height:60px; margin-right:12px; border-radius:8px; }

/* Buttons */
.buttons { display:flex; justify-content:space-between; gap:8px; padding:0 12px; margin-top:12px; }
.buttons button { flex:0 0 48%; height:34px; font-size:14px; border-radius:8px; border:1px solid; cursor:pointer; }
.back { background:#fff; color:#5271ff; border-color:#5271ff; }
.nav-btn { background:rgba(82,113,255,0.1); color:#5271ff; border-color:#ccc; }

.buttons .btn-continuar {
  flex: 1;
  padding: 12px;
  border-radius: 12px;
  background: #5271ff;
  color: #fff;
  border: none;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.buttons .btn-continuar:hover {
  background: #4055d0;
}


/* ===========================
   MULTI-OPÇÕES (Seções 6 e 7)
   =========================== */
.multi-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
  box-sizing: border-box;
}

.multi-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border: 2px solid #ccc;
  border-radius: 12px;
  padding: 14px 18px;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.18s ease-in-out;
  box-sizing: border-box;
}

.multi-option:hover {
  background: rgba(82,113,255,0.04);
}

.multi-option.selected {
  border-color: #5271ff;
  background: rgba(82,113,255,0.10);
  box-shadow: 0 6px 18px rgba(82,113,255,0.06);
  font-weight: 600;
}

.multi-option .circle {
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 50%;
  background: transparent;
  flex-shrink: 0;
  margin-left: 12px;
  transition: all 0.15s ease-in-out;
}

.multi-option.selected .circle {
  background: #5271ff;
  border-color: #5271ff;
}

/* MOBILE: mesma largura das option-buttons e título alinhado */
@media (max-width: 768px) {
  .multi-options { width:100% !important; max-width:100% !important; padding:0 !important; }
  .multi-option {
    width:100% !important;
    padding: 12px 20px !important;
    font-size: 0.95rem !important;
    text-align: left !important;
  }
  .multi-option .circle { width: 18px !important; height: 18px !important; }
  .multi-option.selected { transform: scale(0.997); }
}


/* Botão continuar */
.btn-continuar {
  width:100%;
  padding:12px;
  border-radius:12px;
  background:#5271ff;
  color:#fff;
  border:none;
  font-size:16px;
  cursor:pointer;
  transition: background 0.3s ease;
}
.btn-continuar:hover { background:#4055d0; }

/* =========================================
   BOTÕES FIXOS NO RODAPÉ (para celulares)
   ========================================= */

@media (max-width: 768px) {

  /* ===== Fixar botões no rodapé ===== */
  .app-wrapper { transform: none; padding: 0 12px; }
  .section .buttons {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    gap: 8px !important;
    display: flex !important;
    justify-content: space-between !important;
    padding: 12px 16px !important;
    background: linear-gradient(
      to top,
      rgba(255, 255, 255, 0.85),
      rgba(255, 255, 255, 0.65)
    ) !important;
    
   border-top: 1px solid rgba(200, 200, 200, 0.4) !important; 
  z-index: 9999 !important;
  padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
  
  /* efeito esfumaçado */
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important; /* compatibilidade iOS */
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.15) !important;
  transition: background 0.3s ease, box-shadow 0.3s ease !important;
}


  /* deixa os dois botões do mesmo tamanho */
  .section.active .buttons .back,
  .section.active .buttons .nav-btn {
    flex: 1 !important;
  }

  /* dá espaço no conteúdo para não ficar escondido atrás da barra fixa */
  .section.active .section-content {
    padding-bottom: 150px !important; /* ajuste fino se necessário */
    


}
  /* ===== Opções mais largas ===== */
  .options {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .option-button {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 12px !important;
    padding: 12px 26px !important;
    border: 2px solid #ccc !important;
    background: #fff !important;
    font-size: 0.9rem !important;
    text-align: left !important;
  }

  /* Imagem menor e alinhada */
  .option-button img {
    width: 40px !important;
    height: 40px !important;
    margin-right: 10px !important;
  }

  /* ===== Perguntas (título) ===== */
  .section-content h2 {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 1.4rem !important;
    font-weight: bold !important;
    line-height: 1.4 !important;
    text-align: left !important;
    word-break: normal !important;
    margin-bottom: 32px !important;
    
  }
  
}
@media (max-width: 768px) {
  /* Garante que o botão selecionado se destaque em celulares */
  .option-button.selected {
    border-color: #5271ff !important;
    background: rgba(82, 113, 255, 0.15) !important;
    box-shadow: 0 0 8px rgba(82, 113, 255, 0.3) !important;
    transform: scale(0.98);
    transition: 0.2s ease;
    
  }
  
  .option-button:active {
  transform: scale(0.97);


  }


}

/* ===================== */
/* Balões com efeito de entrada + flutuação suave */
/* ===================== */

/* ===== Balões: layout em grid, entrada + flutuação ===== */
.multi-options.balloon-style-random {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px 12px;
  justify-items: center;
  align-content: start;
  grid-auto-rows: minmax(64px, auto);
  margin-top: 16px;
  margin-bottom: 20px;
  padding: 8px 8px 18px;
  position: relative;
  overflow: visible;
  width: 100%;
  box-sizing: border-box;
}

/* Balões individuais */
.multi-option.balloon {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 180px;
  min-width: 110px;
  padding: 10px 12px;
  background: linear-gradient(135deg, #f9faff, #eef2ff);
  border: 2px solid #cbd3f8;
  border-radius: 20px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.05);
  color: #333;
  font-size: 13.5px;
  text-align: left;
  line-height: 1.25;
  cursor: pointer;
  user-select: none;
  opacity: 0;
  transform: translateY(14px);
  animation: fadeInUp 0.55s cubic-bezier(.2,.9,.2,1) forwards,
             floatAnimation var(--float-duration,6s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);

  /* Quebra de linha respeitando sílabas */
  word-break: keep-all;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Ícones */
.multi-option.balloon > img {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: block;
}

/* Efeito de entrada */
@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(18px) scale(.995); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Flutuação suave */
@keyframes floatAnimation {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}

/* Variações aleatórias */
.multi-option.balloon:nth-child(odd) { --float-duration: 5.8s; --delay: 0.06s; }
.multi-option.balloon:nth-child(even){ --float-duration: 6.3s; --delay: 0.12s; }

/* Estado selecionado */
.multi-option.balloon.selected {
  background: #dff0ff;
  border-color: #6b8eff;
  transform: scale(1.05);
  animation: pulseShadow 1.8s ease-in-out infinite; /* animação pulsante */
  opacity: 1 !important;
  box-shadow: 0 6px 14px rgba(78,115,223,0.18);
  position: relative;
  z-index: 10;
}

/* Animação de sombra pulsante */
@keyframes pulseShadow {
  0%, 100% {
    box-shadow: 0 6px 14px rgba(78,115,223,0.18);
  }
  50% {
    box-shadow: 0 6px 18px rgba(78,115,223,0.35);
  }
}

/* ===== Ajustes para MOBILE ===== */
@media (max-width: 768px) {
  .multi-options.balloon-style-random {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
    margin-top: 12px;
    margin-bottom: calc(84px + env(safe-area-inset-bottom));
    max-height: calc(100vh - 220px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 12px 18px; /* respiro lateral */
    overflow: visible !important;
  }

  .multi-option.balloon {
    max-width: 150px;
    font-size: 13px;
    padding: 9px 10px;
  }

  .multi-option.balloon.selected {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(78,115,223,0.25);
  }

  .multi-options.balloon-style-random::after {
    content: "";
    display: block;
    height: calc(16px + env(safe-area-inset-bottom));
    width: 1px;
  }
}

/* ===== Ajustes para DESKTOP / NOTEBOOK ===== */
@media (min-width: 1025px) {
  .multi-option.balloon {
    font-size: 15px;
    line-height: 1.3;
    padding: 12px 14px;
  }
}


.balloon-option.selected {
  animation: pulseColor 1.2s ease-in-out infinite;
}

@keyframes pulseColor {
  0% {
    transform: scale(1);
    background-color: var(--selected-color);
  }
  50% {
    transform: scale(1.05);
    background-color: color-mix(in srgb, var(--selected-color), white 10%);
  }
  100% {
    transform: scale(1);
    background-color: var(--selected-color);
  }
}
/* =====================================================
   🔧 CORREÇÃO FINAL: Espaçamento e visibilidade em mobile
   sem afetar layout das seções 6, 7 e 22 (balões)
   ===================================================== */

@media (max-width: 768px) {

  /* === Evita corte de conteúdo nas bordas === */
  .section-content {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* === Espaço inferior mais inteligente === */
  .section.active .section-content {
    padding-bottom: calc(140px + env(safe-area-inset-bottom)) !important;
    overflow-y: visible !important;
  }

  /* === Balões flutuantes livres (não presos por altura fixa) === */
  .multi-options.balloon-style-random {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    margin-bottom: 100px !important; /* respiro acima dos botões */
    padding-bottom: 30px !important;
  }

  /* === Evita que fiquem cortados lateralmente === */
  .multi-option.balloon {
    max-width: 45vw !important;
    min-width: 120px !important;
    margin: 4px !important;
  }

  /* === Corrige sobreposição dos botões fixos === */
  .section .buttons {
    z-index: 9999 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
  }
}
/* =====================================================
   🧩 Correção complementar:
   Evita que a última opção das seções "comuns" (como a 1)
   fique escondida sob os botões fixos em telas pequenas
   ===================================================== */

@media (max-width: 768px) {
  .section:not(#secao6):not(#secao7):not(#secao22) .section-content {
    padding-bottom: calc(120px + env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
  }
}

/* ============================================
   ✅ SEÇÕES 8, 17 e 21 — Layout unificado
   (Desktop + Mobile)
============================================ */
#secao8, #secao17, #secao21 {
  display: none;
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #000;
  z-index: 1;
}

/* Wrapper da imagem */
#secao8 .imagem-wrapper,
#secao17 .imagem-wrapper,
#secao21 .imagem-wrapper {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

/* Imagem preenche toda a tela */
#secao8 .imagemSecao8,
#secao17 .imagemSecao17,
#secao21 .imagemSecao21 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border: none;
  margin: 0;
  padding: 0;
}

/* Botão sobre a imagem (modo geral) */
#secao8 .btn-continuar,
#secao17 .btn-continuar,
#secao21 .btn-continuar {
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  background: #5271ff;
  color: #fff;
  border: none;
  border-radius: 14px;
  padding: 14px 36px;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
  transition: background 0.3s ease, transform 0.2s ease;
  z-index: 10;
}

#secao8 .btn-continuar:hover,
#secao17 .btn-continuar:hover,
#secao21 .btn-continuar:hover {
  background: #4055d0;
  transform: translateX(-50%) scale(1.04);
}

/* === Oculta cabeçalho e progresso quando ativa === */
body.secao8-ativa .header,
body.secao17-ativa .header,
body.secao21-ativa .header,
body.secao8-ativa .progress-bar,
body.secao17-ativa .progress-bar,
body.secao21-ativa .progress-bar {
  display: none !important;
}

/* === Esconde todas as outras seções quando ativa === */
body.secao8-ativa .section:not(#secao8),
body.secao17-ativa .section:not(#secao17),
body.secao21-ativa .section:not(#secao21) {
  display: none !important;
}

/* ============================================
   📱 Versão Mobile
============================================ */
@media (max-width: 768px) {
  #secao8, #secao17, #secao21 {
    height: 100vh !important;
    width: 100vw !important;
    overflow: hidden !important;
  }

  #secao8 .imagemSecao8,
  #secao17 .imagemSecao17,
  #secao21 .imagemSecao21 {
    width: 100vw !important;
    height: 100vh !important;
    object-fit: cover !important;
  }

  #secao8 .btn-continuar,
  #secao17 .btn-continuar,
  #secao21 .btn-continuar {
    bottom: 8% !important;
    padding: 12px 30px !important;
    font-size: 1rem !important;
  }
}

/* =======================
   📱 Versão Mobile
======================= */
@media (max-width: 768px) {
body.secao8-ativa .app-wrapper,
body.secao17-ativa .app-wrapper,
body.secao21-ativa .app-wrapper {
  transform: none !important;         /* remove a escala 0.85 apenas nesta seção */
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.secao8-ativa,
body.secao17-ativa,
body.secao21-ativa {
  margin: 0 !important;
  padding: 0 !important;
  background: #000 !important;
  overflow: hidden !important;        /* remove barras e cortes */
}

body.secao8-ativa #secao8, 
body.secao17-ativa #secao17,
body.secao21-ativa #secao21 {
  width: 100vw !important;
  height: 100vh !important;
  position: fixed !important;         /* ocupa a tela inteira */
  top: 0;
  left: 0;
  z-index: 9999 !important;
}

body.secao8-ativa #secao8 .imagem-wrapper, 
body.secao17-ativa #secao17 .imagem-wrapper,
body.secao21-ativa #secao21 .imagem-wrapper {
  width: 100vw !important;
  height: 100vh !important;
  overflow: hidden !important;
}

body.secao8-ativa #secao8 .imagemSecao8, 
body.secao17-ativa #secao17 .imagemSecao17,
body.secao21-ativa #secao21 .imagemSecao21 {
  width: 100vw !important;
  height: 100vh !important;
  object-fit: cover !important;
  object-position: center !important;

}

body.secao8-ativa #secao8 .btn-continuar,
body.secao17-ativa #secao17 .btn-continuar,
body.secao21-ativa #secao21 .btn-continuar {
  position: absolute !important;
  bottom: 5% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 10 !important;

  }
}



/* ============================================
   🔳 Retângulo branco sobreposto
============================================ */
#secao8 .secao8-retangulo,
#secao17 .secao17-retangulo,
#secao21 .secao21-retangulo {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40%;
  background: #fff;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
  padding: 50px 60px 100px;
  box-sizing: border-box;
  text-align: left;
 z-index: 5;
}

/* Títulos e textos */
#secao8 .secao8-retangulo h1,
#secao17 .secao17-retangulo h1,
#secao21 .secao21-retangulo h1 {
  font-family: 'Roboto', sans-serif;
  font-weight: 800;
  font-size: 3rem;
  margin-top: 0.5px;
  margin-bottom: 15px;
  color: #000;
}

#secao8 .secao8-retangulo h2,
#secao17 .secao17-retangulo h2,
#secao21 .secao21-retangulo h2 {
  font-family: 'Roboto', sans-serif;
  font-weight: 600;
  font-size: 1.3rem;
  margin-bottom: 15px;
  color: #000;
}

#secao8 .secao8-retangulo p,
#secao17 .secao17-retangulo p,
#secao21 .secao21-retangulo p {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 1.1rem;
  color: #444;
  line-height: 1.6;
  margin-bottom: 20px;
}

/* Botão dentro do retângulo */
#secao8 .secao8-retangulo .btn-continuar,
#secao17 .secao17-retangulo .btn-continuar,
#secao21 .secao21-retangulo .btn-continuar {
  display: block;
  margin: 50px auto 0 auto;
  background: #5271ff;
  color: #fff;
  border: none;
  border-radius: 14px;
  padding: 14px 36px;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
  transition: background 0.3s ease, transform 0.2s ease;
  z-index: 10;
  position: relative;
  left: 0;
  bottom: 0;
  transform: none;
}

#secao8 .secao8-retangulo .btn-continuar:hover,
#secao17 .secao17-retangulo .btn-continuar:hover,
#secao21 .secao21-retangulo .btn-continuar:hover {
  background: #4055d0;
  transform: scale(1.05);
}

/* ============================================
   📱 Mobile — Ajustes do retângulo e botão
============================================ */
@media (max-width: 768px) {
  #secao8 .secao8-retangulo,
  #secao17 .secao17-retangulo,
  #secao21 .secao21-retangulo {
  position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 57%;
    background: #fff;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    padding: 25px 20px 60px;
    box-sizing: border-box;
    text-align: left;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    scroll-behavior: smooth;
  }


  #secao8 .secao8-retangulo h1,
  #secao17 .secao17-retangulo h1,
  #secao21 .secao21-retangulo h1 {
    font-family: 'Roboto', sans-serif;
    font-weight: 800;
    font-size: 1.8rem;
    color: #000;
    margin-top: 1px;
    margin-bottom: 7px;
    max-width: 95%;
    word-break: normal;
  }


  #secao8 .secao8-retangulo h2,
  #secao17 .secao17-retangulo h2,
  #secao21 .secao21-retangulo h2 {
   font-family: 'Roboto', sans-serif;
    font-weight: 600;
    font-size: 1.1rem;
    color: #333;
    margin-bottom: 7px;
    max-width: 95%;
  }


  #secao8 .secao8-retangulo p,
  #secao17 .secao17-retangulo p,
  #secao21 .secao21-retangulo p {
       font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 0.80rem;
    color: #444;
    margin-bottom: 20px;
    max-width: 95%;
  }

  #secao8 .secao8-retangulo .btn-continuar,
  #secao17 .secao17-retangulo .btn-continuar,
  #secao21 .secao21-retangulo .btn-continuar {
       align-self: center;             /* centraliza no eixo horizontal */
    width: 90%;                     /* ✅ aumenta o comprimento */
    min-width: 180px;               /* tamanho mínimo */
    padding: 14px 26px;                /* mais alto e equilibrado */
    background: #5271ff;
    color: #fff;
    border: none;
    border-radius: 14px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    margin-top: 40px;
    margin-bottom: 10px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
    transition: background 0.3s ease, transform 0.2s ease;
    z-index: 10;
    position: relative;
  }


  /* ✨ Efeito hover */
  #secao8 .secao8-retangulo .btn-continuar:hover,
  #secao17 .secao17-retangulo .btn-continuar:hover,
  #secao21 .secao21-retangulo .btn-continuar:hover  {
    background: #4055d0;
    transform: scale(1.04);
  }
}
/* ============================================
   🖥️ Ajuste refinado da sobreposição — sem lacuna
============================================ */
@media (min-width: 769px) {

  #secao8, #secao17, #secao21 {
    position: relative;
    height: auto;
    overflow: visible;
  }

  /* ✅ Retângulo sobre a imagem */
  #secao8 .secao8-retangulo,
  #secao17 .secao17-retangulo,
  #secao21 .secao21-retangulo {
    position: relative;
    margin-top: -85vh;             /* ⬆️ sobe mais — cobre 55% da imagem */
    width: 100%;
    background: #fff;
    border-radius: 40px;
    padding: 70px 60px 60px;     /* textos e botão mais amplos na horizontal */
    box-sizing: border-box;
    text-align: left;
    box-shadow: 0 -8px 25px rgba(0,0,0,0.25);
    z-index: 5;
  }

  /* Títulos */
  #secao8 .secao8-retangulo h1,
  #secao17 .secao17-retangulo h1,
  #secao21 .secao21-retangulo h1 {
    font-size: 2.8rem;
    font-weight: 800;
    margin-bottom: 30px;
    color: #000;
  }

  /* Subtítulos */
  #secao8 .secao8-retangulo h2,
  #secao17 .secao17-retangulo h2,
  #secao21 .secao21-retangulo h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 25px;
    color: #000;
  }

  /* Parágrafos */
  #secao8 .secao8-retangulo p,
  #secao17 .secao17-retangulo p,
  #secao21 .secao21-retangulo p {
    font-size: 1.10rem;
    font-weight: 400;
    line-height: 1.75;
    color: #444;
    margin-bottom: 30px;
    max-width: 95%;
  }

  /* Botão */
  #secao8 .secao8-retangulo .btn-continuar,
  #secao17 .secao17-retangulo .btn-continuar,
  #secao21 .secao21-retangulo .btn-continuar {
    display: inline-block;
    margin-top: 40px;
    background: #5271ff;
    color: #fff;
    border: none;
    border-radius: 14px;
    padding: 14px 36px;
    font-size: 1.10rem;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(0,0,0,0.25);
    transition: background 0.3s ease, transform 0.2s ease;
  }

  #secao8 .secao8-retangulo .btn-continuar:hover,
  #secao17 .secao17-retangulo .btn-continuar:hover,
  #secao21 .secao21-retangulo .btn-continuar:hover {
    background: #4055d0;
    transform: scale(1.05);
  }
}
/* Oculta o scrollbar apenas em telas grandes */
@media (min-width: 1025px) {
  /* Chrome, Edge, Safari */
  ::-webkit-scrollbar {
    display: none;
  }

  /* Firefox */
  html, body {
    scrollbar-width: none; /* Oculta a barra no Firefox */
    -ms-overflow-style: none; /* Oculta no Edge/IE antigos */
  }
}

/* ===== MODAL / BOTTOM-SHEET DE SAÚDE ===== */
#modalSaude.modal-saude {
  position: fixed;
  inset: 0;
  display: none;
  justify-content: center;
  align-items: flex-end;    /* aparece como bottom sheet */
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(4px);
  z-index: 10050;           /* acima de 9999 (botões fixos) */
  -webkit-tap-highlight-color: transparent;
}

/* Quando ativo, mostramos o modal */
#modalSaude.modal-saude.ativo {
  display: flex;
}

/* backdrop ocupa toda a tela e passa o clique para fechar */
.modal-saude-backdrop {
  position: absolute;
  inset: 0;
  cursor: default;
}

/* sheet (painel branco) */
.modal-saude-sheet {
  position: relative;
  width: 100%;
  max-width: 760px;         /* centraliza em desktop */
  border-radius: 14px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 18px;
  background: #fff;
  box-shadow: 0 -8px 30px rgba(0,0,0,0.25);
  z-index: 10051;           /* maior que backdrop */
  pointer-events: auto;     /* garante que receba cliques */
}

/* conteúdo interno */
.modal-saude-content { text-align: left; }
.modal-saude-titulo { font-size: 1.05rem; font-weight:800; margin:0 0 8px; text-align:center; }
.modal-saude-texto { font-size:0.95rem; color:#333; line-height:1.4; margin: 0 0 12px; }

/* ações */
.modal-saude-actions { display:flex; gap:10px; justify-content:center; padding-top:6px; }
.modal-saude-cancel,
.modal-saude-confirm {
  min-width: 120px;
  padding: 10px 14px;
  border-radius: 10px;
  border: none;
  font-weight:700;
  cursor: pointer;
}
.modal-saude-cancel { background:#efefef; color:#222; }
.modal-saude-confirm { background:#5271ff; color:#fff; }

/* toque para acessibilidade */
.modal-saude-cancel:active, .modal-saude-confirm:active { transform: translateY(1px); }

/* evita que outros elementos fixos recebam clique enquanto modal aberto */
body.modal-aberto { pointer-events: none; }
body.modal-aberto #modalSaude, body.modal-aberto #modalSaude * { pointer-events: auto; }

/* ================================
   🔥 ESTILIZAÇÃO DO MODAL — MOBILE
   ================================ */
@media (max-width: 768px) {

  /* Título alinhado à esquerda e em negrito */
  .modal-saude-titulo {
    text-align: left !important;
    font-size: 1.3rem !important;
    font-weight: 800 !important;
    margin-bottom: 14px !important;
  }

  /* Texto normal, alinhado à esquerda */
  .modal-saude-texto {
    text-align: left !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    margin-bottom: 28px !important;
  }

  /* Some o botão VOLTAR apenas no mobile */
  .modal-saude-cancel {
    display: none !important;
  }

  /* Botão continuar ocupa largura total no mobile */
  .modal-saude-confirm {
    width: 100% !important;
    padding: 14px !important;
    font-size: 1.1rem !important;
    border-radius: 10px !important;
    background: #5271ff !important;
    color: #fff !important;
  }

  /* Ajuste do box interno para parecer mais “sheet” */
  .modal-saude-sheet {
    border-radius: 22px !important;
    padding: 20px !important;
  }

  /* Área interna */
  .modal-saude-content {
    padding: 10px 4px !important;
  }
}

/* ================================================
   🖥️ AJUSTES PARA TELAS GRANDES (≥ 769px)
   ================================================ */
@media (min-width: 769px) {

  /* 1) Remove o botão VOLTAR em desktop/tablet */
  .modal-saude-cancel {
    display: none !important;
  }

  /* 2) Botão CONTINUAR ocupa quase toda largura */
  .modal-saude-confirm {
      display: inline-block !important;
       width: 100% !important;
    background: #5271ff !important;
    color: #fff !important;
    border: none !important;
    border-radius: 14px !important;
    padding: 14px 36px !important;
    font-size: 1.10rem !important;
    font-weight: bold !important;
    cursor: pointer !important;
    box-shadow: 0 4px 18px rgba(0,0,0,0.25) !important;
    transition: background 0.3s ease, transform 0.2s ease !important;
  }

 .btn-continuar:hover {
    background: #4055d0 !important;
    transform: scale(1.05) !important;
  }

  /* 3) Painel branco maior e com largura igual ao fundo cinza */
  .modal-saude-sheet {
    max-width: 100% !important;       /* ocupa toda largura possível */
    width: 100% !important;
    padding: 42px !important;         /* aumenta espaço interno */
    border-radius: 22px !important;
  }

  /* 3.1) Aumenta altura do painel (~5 cm extras) */
  .modal-saude-sheet {
    padding-bottom: 30px !important;  /* ~5 cm dependendo da tela */
  }

  /* 4) Título principal maior e alinhado à esquerda */
  .modal-saude-titulo {
    font-size: 1.6rem !important;       /* maior */
    font-weight: 800 !important;
    text-align: center !important;
    margin-bottom: 20px !important;
    color: #000 !important;
    margin-bottom: 40px !important;
  }

  /* 5) Texto maior e mais confortável */
  .modal-saude-texto {
    font-size: 1.10rem !important;
    font-weight: 400 !important;
    text-align: center !important;
    line-height: 1.75 !important;
    color: #444 !important;
    margin-bottom: 80px !important;
    max-width: 95%; !important;
 


  }

}



/* ============================================
   🎨 Botão do Modal — idêntico ao .btn-continuar
============================================ */
.modal-saude-confirm {
  background: #5271ff !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 14px 26px !important;
  font-size: 16px !important;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.25s ease-in-out;
  box-shadow: 0 4px 18px rgba(0,0,0,0.20);
}

.modal-saude-confirm:hover {
  background: #4055d0 !important;
  transform: scale(1.03);
}

.modal-saude-confirm:active {
  transform: scale(0.96);
  }
}

/* ============================================
   📱 TABLET (769px–1024px)
============================================ */
@media (min-width: 769px) and (max-width: 1024px) {

  .app-wrapper {
    transform: none !important;
    padding: 0 32px !important;
  }

  .section-content h2 {
    font-size: 1.55rem !important;
  }

  .option-button {
    padding: 16px 26px !important;
    font-size: 1rem !important;
  }

  .buttons button {
    height: 40px !important;
    font-size: 15px !important;
  }

  .btn-continuar,
  .modal-saude-confirm {
    padding: 14px 28px !important;
    font-size: 1.05rem !important;
  }
}
/* ============================================
   👆 Efeito táctil para botão do modal
============================================ */
.modal-saude-confirm.pressed-temp,
.modal-saude-confirm:active {
  transform: scale(0.94) !important;
  filter: brightness(0.92);

    
  }
}/* End custom CSS */