.elementor-3226 .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-3226 .elementor-element.elementor-element-7f02f0f{width:100%;max-width:100%;}/* 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 16px;
  box-sizing: border-box;
  transform: scale(0.85);
  transform-origin: top center;
}

/* Header */
.header {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* força alinhamento à esquerda */
  padding: 12px 0;          /* mesmo padding visual dos textos */
  gap: 6px;                    /* espaço entre logo e texto */
}

.logo-container img {
  height: 30px;
  margin: 0;
  display: block;
}

.company {
  margin: 0;
  font-family: Montserrat;
  font-size: 20px;
  color: #1a0a8c;
  font-weight: 400;
}


/* 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 {
  padding-left: 0;
  padding-right: 0;
}



/* 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; /* <- aqui você troca a cor */
  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; background:#fff; border:1px solid #ccc; border-radius:8px; cursor:pointer; transition:0.2s;
}
.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; }

/* Image options grid */
.image-options-grid { display:flex; flex-direction:column; gap:6px; margin-top:12px; }
.image-option { display:flex; align-items:center; padding:8px; border:2px solid #ccc; border-radius:10px; background:#fff; cursor:pointer; }
.image-option:hover { border-color:#5271ff; background:#f0f4ff; }
.image-option.selected { border-color:#5271ff; background:#e0eaff; }
.image-option img { width:60px; height:60px; object-fit:contain; margin-right:12px; border-radius:8px; }
.image-option p { font-size:14px; color:#2c3e50; margin:0; flex:1; font-weight:500; }
/* ===========================
   RELATÓRIO (BASE - desktop)
   =========================== */
.relatorio-bloco {
  display:flex;
  gap:20px;
  padding:16px;
  margin-bottom:20px;
  background:#fff;
  border-radius:12px;
  box-shadow:0 0 12px rgba(0,0,0,0.08);
  align-items:stretch; /* <- essencial para colunas iguais */
}

/* As duas colunas ocupam o mesmo espaço e são flex containers */
.relatorio-esquerda,
.relatorio-direita {
  flex:1 1 50%;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:0; /* importante para que filhos com overflow funcionem corretamente */
}

/* direita: imagem responsiva que preenche a altura */
.relatorio-direita { justify-content:center; align-items:center; overflow:hidden; }
.relatorio-direita img#imagem-personalizada {
  display:block;
  width:auto;          /* largura automática para manter proporção */
  height:100%;         /* preenche a altura da coluna */
  object-fit:cover;
  border-radius:8px;
  max-width:none;
}

/* Itens (esquerda) */
.bloco-item { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.icone-resposta { width:30px; height:30px; object-fit:contain; margin-right:12px; opacity: 1.0; }
.texto-bloco { display:flex; flex-direction:column; }
.texto-descricao { font-size:16px; color:#888888; line-height:1.1; }
.texto-resposta { font-size:18px; font-weight:bold; color:#2C3E50; line-height: 1.2; margin-top: 2px; word-break: break-word; }



/* IMC / gráficos / alertas */

#graficoIMC { margin:30px 0; text-align:center; position:relative; }

h4 { font-size: 0.95rem; font-weight: bold; margin-top: 2px; margin-bottom: 1px; }


.barra-imc-colorida {
  height: 14px; /* um pouco mais alta para destaque */
  width: 100%;
  border-radius: 12px;
  overflow: visible;
  position: relative;
background: linear-gradient(to right,
     #0279d9 0%,        /* Azul - escuro */
     #0279d9 05.70%,
    #42a5f5 07.70%,      /* Azul - abaixo do peso */
    #42a5f5 15.40%,
    #66bb6a 17.4%,   /* Verde - normal */
    #66bb6a 31.7%,
    #ffeb3b 33.7%,   /* Amarelo - sobrepeso */
    #ffeb3b 40.9%,
    #ff9800 42.9%,   /* Laranja - Obeso I */
    #ff9800 50%,
    #f44336 52%,     /* Vermelho - Obeso II */
    #f44336 65.1%,
    #e91e63 67.1%,   /* Rosa/ Magenta - Obeso III */
    #e91e63 85.4%,
    #c2185b 87.4%,   /* Rosa escuro até o final da barra */
    #c2185b 100%
  );


  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 6px 20px rgba(8,18,40,0.08);
  border: 1px solid rgba(0,0,0,0.08);
  transition: background 0.5s ease; /* transição suave caso queira animar */
}
.legenda-imc { display:flex; justify-content:space-between; font-size:0.7rem; color:#666; margin-top:8px; }

/* Indicador de IMC (balão) */
#indicadorIMC {
  position: absolute;
  top: -32px;
  transform: translateX(-50%);
  background: #212121; /* fundo escuro para contraste */
  color: #fff;
  padding: 6px 12px;
  border-radius: 6px;
  white-space: nowrap;
  z-index: 999;
  font-weight: 700;
  font-size: 0.85rem;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* Triângulo indicador */
#indicadorIMC::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #212121;
}




/* Alertas IMC */
.alerta-imc { padding:20px; border-radius:10px; text-align:left; font-size:1.3rem; font-weight:500; margin:20px 0; line-height:1.6; color: #ffffff; width:100%; box-sizing:border-box; white-space: pre-line; }

.alerta-imc.alerta-verde-suave { background-color: #d4edda; color: #155724 ; border: 1px solid #c3e6cb; } 
.alerta-imc.alerta-vermelho-suave { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; } 
.alerta-imc.alerta-vermelho-moderado { background-color: #fdecea; color: #c62828; border: 1px solid #e57373; } 
.alerta-imc.alerta-vermelho-intenso { background-color: #ffebee; color: #b71c1c; border: 1px solid #ef9a9a; } 
.alerta-imc.alerta-amarelo-suave { background-color: #fad96e; color: #000000; } 
.alerta-laranja-suave { background-color: #fff4e5; color: #5d4037; } .alerta-azul-suave { background-color: #b0cfdd; color: #01454f; } .alerta-verde-limao { background-color: #7dfabe; color: #3a6604; } .alerta-roxo-suave { background-color: #e0aaff; color: #3c096c; } .alerta-salmao { background-color: #fa8072; color: #8b0000; }


/* 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; }

/* bloco IMC branco */
.bloco-imc-alerta { background:#ffffff; border-radius:12px; box-shadow:0 0 12px rgba(0,0,0,0.08); padding:16px; margin-bottom:20px; max-width:768px; display:flex; flex-direction:column; gap:20px; }

/* BARRA DE IMC COM GRADE DE FUNDO */
.grafico-imc-escalado { position: relative; background-image: linear-gradient(to right, rgba(0,0,0,0.07) 1px, transparent 1px), linear-gradient(to bottom, rgba(0,0,0,0.07) 1px, transparent 1px); background-size: 20px 20px; border-radius: 10px; padding: 8px; }




/* -----------------------------
   Media: max-width: 768px
   (agrupado: mantive todas as regras que você forneceu para <=768px)
   ----------------------------- */
@media (max-width: 768px) {
  .app-wrapper { transform: none; padding: 0 12px; }

  .company { margin-left: 3px; font-family: 'Archivo Black', sans-serif; font-style: normal; font-weight: 800; font-size: 16px; color:#1a0a8c; }

  .relatorio-bloco { display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 8px; margin-bottom: 8px; }
  .relatorio-esquerda { flex: 1; display: flex; flex-direction: column; gap: 6px; }
  .relatorio-direita { flex: 1; max-width: 45%; display: flex; align-items: center; justify-content: center; margin: 0; height: auto; }
  .relatorio-direita img#imagem-personalizada { width: 100%; max-height: unset; object-fit: contain; border-radius: 6px; align-self: stretch; }
  .bloco-item { display: flex; align-items: center; gap: 6px; padding: 4px 0; margin: 0; }
  .icone-resposta { width: 40px; height: 40px; }
  .texto-descricao { font-size: 0.75rem; margin: 0; }
  .texto-resposta { font-size: 0.8rem; font-weight: 500; margin: 0; }

  h3 { font-size: 1.7rem; margin-bottom: 40px; line-height: 1.7; }
  h2 { font-size: 1.4rem; margin-bottom: 32px; margin: 10px 0 6px; line-height: 1.3; }

  .alerta-imc { font-size: 0.7rem; padding: 10px 14px; margin: 8px auto; }
  .btn-continuar { font-size: 1rem; padding: 10px 18px; margin: 10px auto 0; display: block; width: 100%; }

  #graficoIMC { margin: 14px 0; }
  .barra-imc-colorida { height: 14px; }
  .legenda-imc span { font-size: 10px; }
  

  /* ajustes autoimagem para mobile */
  .autoimagem-infografico { margin-left: -16px; margin-right: -16px; }
  .autoimagem-infografico img { width: 100vw; border-radius: 0; }

  /* Seção 7 mobile fine-tune */
  #secao7 { width: 92vw !important; transform: translateX(-14px); box-sizing: border-box; }
  #secao7 h4 { font-size: 1.05rem !important; text-align: left; margin-bottom: 40px; }
  #secao7 .autoimagem-infografico { width: 100%; max-width: 100%; text-align: center; margin: 0 auto 16px; }
  #secao7 .autoimagem-infografico img { width: 100% !important; height: auto !important; max-height: none !important; object-fit: contain; display: block; margin: 0 auto; }
  #secao7 .autoimagem-fonte { font-size: 0.85rem; text-align: center; color: #333; margin-top: 8px; margin-bottom: 40px; }
  #secao7 .section-content > div { flex-direction: row !important; align-items: flex-start !important; gap: 10px !important; margin-bottom: 24px !important; }
  #secao7 img[alt*="Harvard"] { max-height: 57px !important; height: auto; width: auto; flex-shrink: 0; }
  #secao7 img[alt*="USP"] { max-height: 24px !important; height: auto; width: auto; flex-shrink: 0; margin-bottom: 30px; }
  #secao7 .section-content > div p { font-size: 0.75rem !important; margin: 0 !important; line-height: 1.2rem !important; }
  #secao7 .btn-continuar { font-size: 0.85rem !important; padding: 10px 16px !important; display: block; margin: 16px auto 0 auto !important; }

  /* Seção 9 mobile fine-tune */
  #secao9 > h2 { font-size: 1.1rem !important; margin-top: 4px !important; margin-bottom: 10px !important; }
  #secao9 .bloco-imc-alerta h4 { margin-bottom: 0.5px !important; }
  #secao9 #graficoIMC { margin-top: 0.5px !important; margin-bottom: 0.5px !important; }
  #secao9 .alerta-imc { margin-top: 0.5px !important; margin-bottom: 0.5px !important; }
  #secao9 .buttons { margin-top: 0.5px !important; gap: 6px !important; }
  #secao9 .buttons button { padding: 10px !important; font-size: 0.85rem !important; }
  #secao9 { width: 90vw !important; transform: translateX(-14px); box-sizing: border-box; }

.barra-imc-colorida {
  height: 14px; /* um pouco mais alta para destaque */
  width: 100%;
  border-radius: 12px;
  overflow: visible;
  position: relative;
background: linear-gradient(to right,
     #0279d9 0%,        /* Azul - escuro */
     #0279d9 05.70%,
    #42a5f5 07.70%,      /* Azul - abaixo do peso */
    #42a5f5 15.40%,
    #66bb6a 17.4%,   /* Verde - normal */
    #66bb6a 31.7%,
    #ffeb3b 33.7%,   /* Amarelo - sobrepeso */
    #ffeb3b 40.9%,
    #ff9800 42.9%,   /* Laranja - Obeso I */
    #ff9800 50%,
    #f44336 52%,     /* Vermelho - Obeso II */
    #f44336 65.1%,
    #e91e63 67.1%,   /* Rosa/ Magenta - Obeso III */
    #e91e63 85.4%,
    #c2185b 87.4%,   /* Rosa escuro até o final da barra */
    #c2185b 100%
  );



  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 6px 20px rgba(8,18,40,0.08);
  border: 1px solid rgba(0,0,0,0.08);
  transition: background 0.5s ease; /* transição suave caso queira animar */
}
.legenda-imc { display:flex; justify-content:space-between; font-size:0.7rem; color:#666; margin-top:8px; }



/* Indicador de IMC (balão) */
#indicadorIMC {
  position: absolute !important;
  top: -32px !important;
  transform: translateX(-50%) !important;
  background: #212121 !important; /* fundo escuro para contraste */
  color: #fff !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
  z-index: 999 !important;
  font-weight: 00;
  font-size: 0.55rem;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* Triângulo indicador */
#indicadorIMC::after {
  content: "";
  position: absolute !important;
  left: 50% !important;
  top: 100% !important;
  transform: translateX(-50%) !important;
  width: 0; height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #212121;
}

/* --- FIX indicador IMC (sobrepõe regras anteriores) --- */
.barra-imc-colorida { overflow: visible !important; } /* evita corte do balão */

/* mata o glifo antigo em qualquer breakpoint */
#indicadorIMC::before,
#secao9 #indicadorIMC::before { content: none !important; }

  /* compact adjustments */
  .relatorio-direita img#imagem-personalizada { width: 100%; height: 100%; object-fit: cover; align-self: stretch; max-height: unset; }
}

/* Botões flutuantes no rodapé para telas pequenas */
@media (max-width: 768px) {
.section.active .buttons {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  gap: 8px;
  padding: 12px 16px;
background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.85),
    rgba(255, 255, 255, 0.65)
  );

  border-top: 1px solid rgba(200, 200, 200, 0.4); 
  z-index: 9999;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  
  /* efeito esfumaçado */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); /* compatibilidade iOS */
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.15);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}


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

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





/* -----------------------------
   Media: max-width: 480px
   (agrupado: mantive todas as regras que você forneceu para <=480px)
   ----------------------------- */
@media (max-width: 480px) {

   h2 { font-size:1.4rem; font-weight:bold; margin-bottom:32px; }
   h3 { font-size:1.7rem; font-weight:bold; margin-bottom:40px; }

.barra-imc-colorida {
  height: 12px; /* um pouco mais alta para destaque */
  width: 100%;
  border-radius: 12px;
  overflow: visible;
  position: relative;
background: linear-gradient(to right,
     #0279d9 0%,        /* Azul - escuro */
     #0279d9 05.70%,
    #42a5f5 07.70%,      /* Azul - abaixo do peso */
    #42a5f5 15.40%,
    #66bb6a 17.4%,   /* Verde - normal */
    #66bb6a 31.7%,
    #ffeb3b 33.7%,   /* Amarelo - sobrepeso */
    #ffeb3b 40.9%,
    #ff9800 42.9%,   /* Laranja - Obeso I */
    #ff9800 50%,
    #f44336 52%,     /* Vermelho - Obeso II */
    #f44336 65.1%,
    #e91e63 67.1%,   /* Rosa/ Magenta - Obeso III */
    #e91e63 85.4%,
    #c2185b 87.4%,   /* Rosa escuro até o final da barra */
    #c2185b 100%
  );


  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 6px 20px rgba(8,18,40,0.08);
  border: 1px solid rgba(0,0,0,0.08);
  transition: background 0.5s ease; /* transição suave caso queira animar */
}
.legenda-imc { display:flex; justify-content:space-between; font-size:0.73rem; font-weight: 700; color:#666; margin-top:6px; }

}
.escala-imc { display:flex; justify-content:space-between; font-size:0.8rem; font-weight: 700; color:#666; margin-bottom:16px; }

/* Indicador de IMC (balão) */
#indicadorIMC {
  position: absolute !important;
  top: -19px !important;
  transform: translateX(-50%) !important;
  background: #212121 !important; /* fundo escuro para contraste */
  color: #fff !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
  z-index: 999 !important;
  font-weight: 600;
  font-size: 0.55rem;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* Triângulo indicador */
#indicadorIMC::after {
  content: "";
  position: absolute !important;
  left: 50% !important;
  top: 100% !important;
  transform: translateX(-50%) !important;
  width: 0; height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #212121;
}

/* --- FIX indicador IMC (sobrepõe regras anteriores) --- */
.barra-imc-colorida { overflow: visible !important; } /* evita corte do balão */

/* mata o glifo antigo em qualquer breakpoint */
#indicadorIMC::before,
#secao9 #indicadorIMC::before { content: none !important; }

  .relatorio-bloco { flex-direction: row; align-items: stretch; padding: 8px; gap: 8px; margin-bottom: 8px; background-color: #ffffff !important; }
  .relatorio-esquerda { gap: 6px; }
  .relatorio-direita { max-width: 45%; margin: 0; display: flex; align-items: stretch; justify-content: center; }
  .relatorio-direita img#imagem-personalizada { width: 100%; height: 100%; object-fit: cover; align-self: stretch; max-height: unset; }
  .bloco-item { gap: 6px; padding: 4px 0; margin: 0; }
  .icone-resposta { width: 40px; height: 40px; }
  .texto-descricao { font-size: 0.75rem; }
  .texto-resposta { font-size: 0.8rem; font-weight: 500; }

  .alerta-imc { padding: 6px 10px; font-size: 0.7rem; line-height: 1.3; word-break: break-word; white-space: normal; max-height: 100vh; overflow-y: auto; border-radius: 8px; box-sizing: border-box; text-align: left; margin-top: 1px; margin-bottom: 1px; }
  .alerta-imc p { font-size: 0.7rem; padding: 4px 0; margin: 0; text-align: left; }
  .btn-continuar { font-size: 0.9rem; padding: 10px 14px; margin-top: 1px; }
 

  /* Seção 7 mobile smaller tweaks already preserved above */


/* Botões flutuantes no rodapé para telas pequenas */
@media (max-width: 480px) {
.section.active .buttons {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  gap: 8px;
  padding: 12px 16px;
 background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.85),
    rgba(255, 255, 255, 0.65)
  );

  border-top: 1px solid rgba(200, 200, 200, 0.4); 
  z-index: 9999;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  
  /* efeito esfumaçado */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); /* compatibilidade iOS */
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.15);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}


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

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

/* ====== Ajuste de largura para mobile/tablet ====== */
@media (max-width: 768px) {
  #secao1 .section-content,
  #secao2 .section-content,
  #secao3 .section-content,
  #secao4 .section-content,
  #secao5 .section-content,
  #secao6 .section-content,
  #secao8 .section-content {
    width: 100% !important;   /* ocupa todo o espaço da barra de progresso */
    max-width: 100% !important;
    margin: 0 auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
  }
}


/* ================================
   REFINAMENTO PARA TELAS GRANDES
   (mantive todas as regras que você colocou)
   breakpoints: >=769px e >=1024px
   ================================ */

/* ----- >= 769px: ajustes intermédios (tablets/pequenos laptops) ----- */
@media (min-width: 769px) {
  .alerta-imc {
    display:flex;
    align-items:center; justify-content:center;
    padding:12px 16px; font-family: sans-serif; font-size:1.2rem; font-weight:500; border-radius:8px;
    margin:20px auto; width:100%; max-width:768px; box-sizing:border-box; text-align:left;
      word-break: break-word;
    white-space: pre-line;
    text-align: left;
    margin-top: 0.5px;
    margin-bottom: 1px;
  }
 .alerta-imc.alerta-verde-suave { background-color: #d4edda !important; color: #155724 !important; border: 1px solid #c3e6cb !important; }
 .alerta-imc.alerta-vermelho-suave { background-color: #f8d7da !important; color: #721c24 !important; border: 1px solid #f5c6cb !important; } 
 .alerta-imc.alerta-vermelho-moderado { background-color: #fdecea !important; color: #c62828 !important; border: 1px solid #e57373 !important; } 
 .alerta-imc.alerta-vermelho-intenso { background-color: #ffebee !important; color: #b71c1c !important; border: 1px solid #ef9a9a !important; } 
 .alerta-imc.alerta-amarelo-suave { background-color: #fad96e !important; color: #000000 !important; }
  .alerta-laranja-suave { background-color: #fff4e5 !important; color: #5d4037 !important; }

   .alerta-imc { padding: 6px 10px; font-size: 0.7rem; line-height: 1.3; word-break: break-word; white-space: normal; max-height: 100vh; overflow-y: auto; border-radius: 8px; box-sizing: border-box; text-align: left; margin-top: 1px; margin-bottom: 1px; }
  .alerta-imc p { font-size: 1.2rem; padding: 4px 0; margin: 0; text-align: left; }
  .btn-continuar { width: 100%; max-width: 768px; height: 48px; margin: 20px auto; display: block; font-size: 1.4rem; }

    .legenda-imc { display:flex; justify-content:space-between; font-size:0.73rem; font-weight: 700; color:#666; margin-top:6px; }


.escala-imc { display:flex; justify-content:space-between; font-size:0.8rem; font-weight: 700; color:#666; margin-bottom:16px; }
    


  /* Seção 7: texto-intro / observation mais evidentes em telas maiores */
  #secao7 .texto-intro,
  #secao7 .observation {
    font-size:1.35rem !important; font-weight:700 !important;
    background-color: rgba(82,113,255,0.06) !important;
    padding:18px !important; border-radius:12px !important; margin:0 auto 36px !important;
    max-width:900px !important; text-align:center !important;
  }

  /* Seções 3/4/5: resultados e sliders ficam maiores */
  #secao3 .slider-value, #secao4 .slider-value, #secao5 .slider-value,
  #secao3 .resultado, #secao4 .resultado, #secao5 .resultado,
  #secao3 .texto-resposta, #secao4 .texto-resposta, #secao5 .texto-resposta {
    font-size:1.2rem !important; padding:14px 18px !important; border-radius:10px !important;
  }

#secao9 > h2 { font-size: 1.1rem !important; margin-top: 4px !important; margin-bottom: 10px !important; }

/* frase INDICE MASSA MUSCULAR (IMC) */
  #secao9 .bloco-imc-alerta h4, #secao9 h4 { font-size:1rem !important; margin-bottom:10px !important; font-weight:700 !important; }

/* Indicador de IMC (balão) */
#indicadorIMC {
  position: absolute !important;
  top: -26px !important;
  transform: translateX(-50%) !important;
  background: #212121 !important; /* fundo escuro para contraste */
  color: #fff !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
  z-index: 999 !important;
  font-weight: 500;
  font-size: 0.75rem;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* Triângulo indicador */
#indicadorIMC::after {
  content: "";
  position: absolute !important;
  left: 50% !important;
  top: 100% !important;
  transform: translateX(-50%) !important;
  width: 0; height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #212121;
}

/* ----- >= 1024px: refinamentos desktop/laptop ----- */
@media (min-width: 1024px) {

  /* Seção 2: opções com imagens maiores e mais espaçamento */
  #secao2 .option-button,
  #secao2 .image-option {
    gap:24px !important;
    padding:18px !important;
    align-items:center !important;
    max-width:900px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    width:100% !important;
  }
  #secao2 .option-button img, #secao2 .image-option img {
    width:120px !important; height:120px !important; margin-right:26px !important;
  }
  #secao2 .option-button p, #secao2 .image-option p { font-size:1.5rem !important; font-weight:700 !important; margin-left:12px !important; }

  /* Seções 3/4/5: títulos e espaçamentos maiores */
  #secao3 .section-content, #secao4 .section-content, #secao5 .section-content {
    padding-top:36px !important;
  }
  #secao3 h2, #secao4 h2, #secao5 h2 {
    font-size:1.5rem !important; margin-bottom:40px !important; font-weight:700 !important;
  }

  /* Seção 6: observation maior */
  #secao6 .observation, #secao6 .observation-box {
    font-size:1.25rem !important; line-height:1.45 !important; margin-top:36px !important;
  }

  /* Seção 7: título forte em desktop */
  #secao7 h4 {
    text-align:center !important;
    font-size:1.6rem !important;
    line-height:1.4 !important;
    font-weight:700 !important;
    margin-bottom:28px !important;
    max-width:900px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
  #secao7 .autoimagem-fonte { font-size:0.85rem !important; text-align:center !important; color:#555 !important; margin-top:8px !important; margin-bottom:8px !important; }
  #secao7 .btn-continuar { width:100%; padding:12px; border-radius:12px; background:#5271ff; color:#fff; border:none; font-size:22px; cursor:pointer; transition: background 0.3s ease; }

  /* Seção 8: imagens e texto maiores */
  #secao8 .option-button, #secao8 .image-option {
    width:100% !important; max-width:900px !important; margin:0 auto 6px !important; padding:4px !important; display:flex !important; align-items:center !important;
  }
  #secao8 .option-button img, #secao8 .image-option img {
    width:140px !important; height:140px !important; margin-right:26px !important;
  }
  #secao8 .option-button p, #secao8 .image-option p { font-size:1.4rem !important; font-weight:700 !important; margin-left:12px !important; }

/* ====== Seção 9: igualdade de alturas e imagem que preenche coluna ====== */
  #secao9 .relatorio-bloco {
    display:flex !important;
    align-items:stretch !important; /* força mesma altura */
    gap:24px !important;
  }
  #secao9 .relatorio-esquerda,
  #secao9 .relatorio-direita {
    flex:1 1 50% !important;
    display:flex !important;
    flex-direction:column !important;
    align-self:stretch !important;
    min-height:0 !important; /* evita overflow em flex */
  }

 /* esquerda: itens mais próximos */
  #secao9 .relatorio-esquerda .bloco-item {
    display:flex !important; align-items:flex-start !important; gap:10px !important; margin-bottom:12px !important;
  }
  #secao9 .relatorio-esquerda .icone-resposta {
    width:65px !important; height:65px !important; flex-shrink:0 !important; margin-right:12px !important; gap: 5px; opacity: 1.0;
  }
  
    #secao9 .relatorio-esquerda .texto-descricao {
      font-size:16px; color:#888888; line-height:1.1; 
  }
  
   #secao9 .relatorio-esquerda .texto-resposta {
     font-size:18px; font-weight:700; color:#2C3E50; line-height: 1.2; margin-top: 2px; word-break: break-word; 
  }


  /* direita: imagem ocupa toda a altura da coluna */
  #secao9 .relatorio-direita {
    display:flex !important; align-items:stretch !important; justify-content:center !important; overflow:hidden !important;
  }
  #secao9 .relatorio-direita img#imagem-personalizada {
    height:100% !important; width:auto !important; max-width:none !important; object-fit:cover !important; border-radius:8px !important; display:block !important;
  }



/* Ajusta a posição da mensagem de alerta do IMC em relação ao gráfico */
#secao9 .alerta-imc {
  margin-top: 0.5px !important;   /* aproxima do gráfico */
  margin-bottom: 0.25px !important;  /* elimina espaço extra */
}



  /* IMC bloco final - refinamentos */
  #secao9 .bloco-imc-alerta { background:#ffffff !important; padding:20px !important; border-radius:12px !important; }

/* frase INDICE MASSA MUSCULAR (IMC) */
  #secao9 .bloco-imc-alerta h4, #secao9 h4 { font-size:1rem !important; margin-bottom:10px !important; font-weight:700 !important; }
  
  
  #secao9 .escala-imc { font-size: 0.85rem !important; margin-bottom: 8px !important; }
  #secao9 .legenda-imc { gap: 6px !important; }
  #secao9 .legenda-imc span { font-size: 1.02rem !important; font-weight: 700 !important; }
  #secao9 .grafico-imc-escalado { background-image: linear-gradient(to right, rgba(0,0,0,0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(0,0,0,0.05) 1px, transparent 1px) !important; background-size: 20px 20px !important; padding: 16px !important; border-radius: 10px !important; }
  #secao9 .grafico-imc-escalado { padding:16px !important; background-size:20px 20px !important; border-radius:10px !important; }
  
 
  #secao9 .escala-imc { display: flex; justify-content: space-between; font-size: 0.95rem; font-weight: 700; color: #333; margin-bottom: 8px; padding: 0 4px; }

/* --- FIX indicador IMC (sobrepõe regras anteriores) --- */
.barra-imc-colorida { overflow: visible !important; } /* evita corte do balão */

/* mata o glifo antigo em qualquer breakpoint */
#indicadorIMC::before
,
#secao9 #indicadorIMC::before { content: none !important; }



.barra-imc-colorida {
  height: 14px; /* um pouco mais alta para destaque */
  width: 100%;
  border-radius: 12px;
  overflow: visible;
  position: relative;
background: linear-gradient(to right,
     #0279d9 0%,        /* Azul - escuro */
     #0279d9 05.70%,
    #42a5f5 07.70%,      /* Azul - abaixo do peso */
    #42a5f5 15.40%,
    #66bb6a 17.4%,   /* Verde - normal */
    #66bb6a 31.7%,
    #ffeb3b 33.7%,   /* Amarelo - sobrepeso */
    #ffeb3b 40.9%,
    #ff9800 42.9%,   /* Laranja - Obeso I */
    #ff9800 50%,
    #f44336 52%,     /* Vermelho - Obeso II */
    #f44336 65.1%,
    #e91e63 67.1%,   /* Rosa/ Magenta - Obeso III */
    #e91e63 85.4%,
    #c2185b 87.4%,   /* Rosa escuro até o final da barra */
    #c2185b 100%
  );


  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 6px 20px rgba(8,18,40,0.08);
  border: 1px solid rgba(0,0,0,0.08);
  transition: background 0.5s ease; /* transição suave caso queira animar */
}


/* Indicador de IMC (balão) */
#indicadorIMC {
  position: absolute !important;
  top: -24px !important;
  transform: translateX(-50%) !important;
  background: #212121 !important; /* fundo escuro para contraste */
  color: #fff !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
  z-index: 999 !important;
  font-weight: 500;
  font-size: 0.75rem;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* Triângulo indicador */
#indicadorIMC::after {
  content: "";
  position: absolute !important;
  left: 50% !important;
  top: 100% !important;
  transform: translateX(-50%) !important;
  width: 0; height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #212121;
}

}

/* ====== Seção 10: Vídeo tela cheia ====== */

#secao10 {
  display: none; /* começa oculta */
  justify-content: center;
  align-items: center;
  background: #000;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

/* Container do vídeo */
.video-wrapper {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #000;
}

/* Vídeo ocupa a tela inteira em qualquer dispositivo */
#videoSecao10 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* preenche cortando sobras, sem barras pretas */
  border: none;
  outline: none;
  background: #000;
  pointer-events: none; /* impede cliques/pause */
}

/* Logo + nome sobrepostos no canto superior esquerdo */
.video-logo {
  position: absolute;
  top: 15px;
  left: 15px;
  display: flex;
  align-items: center;
  gap: 6px;
  color:#1a0a8c;
  font-weight:bold;
  z-index: 10;
  pointer-events: none; /* não bloqueia cliques */
}

.video-logo .logo-img {
  height: 28px; /* tamanho reduzido */
  width: auto;
}

.video-logo .company {
  font-family: 'Archivo Black', sans-serif;
  font-size: 1.1rem; /* menor que antes */
  color:#1a0a8c;
  font-weight:bold;
}

/* Ícone de volume no canto inferior direito */
.volume-icon {
  position: absolute;
  bottom: 15px;
  right: 15px;
  font-size: 22px; /* menor que antes */
  cursor: pointer;
  color: white;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
  z-index: 10;
}

/* Fade de transição preta entre seções */
#transicaoFade {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  transition: opacity 2s ease;
}

#transicaoFade.mostrar {
  opacity: 1;
  pointer-events: all;
}

/* Responsivo para celulares (tela inteira 9:16) */
@media (max-width: 768px) {
  #videoSecao10 {
    width: 100%;
    height: 100%;
  }

  .video-logo .logo-img {
    height: 22px;
  }

  .video-logo .company {
    font-size: 0.9rem;
  }

  .volume-icon {
    font-size: 20px;
  }
}
/* =========================
   Ajustes do vídeo da seção 10
   ========================= */

/* Telas grandes (desktop e laptops) */
#secao10 .video-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

#secao10 .video-container video {
  max-width: 70%;     /* limita a largura a 70% da tela */
  height: auto;
  display: block;
  margin: 0 auto;      /* centraliza */
  border-radius: 12px; /* opcional: bordas arredondadas */
}

/* Telas pequenas (celulares) */
@media (max-width: 768px) {
  #secao10 .video-container video {
    max-width: 100%;
    width: 100%;
    height: auto;
    margin: 0 auto;
  }
}

/* =========================
   Ajustes do vídeo da seção 10
   ========================= */

/* Telas grandes (desktop e laptops) */
#secao10 .video-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

#secao10 .video-wrapper video {
  max-width: 70%;       /* limita a largura do vídeo */
  height: auto;
  display: block;
  margin: 0 auto;        /* centraliza horizontalmente */
  border-radius: 12px;   /* opcional: bordas arredondadas */
}

/* Telas pequenas (celulares) */
@media (max-width: 768px) {
  #secao10 .video-wrapper video {
    max-width: 100%;
    width: 100%;
    height: auto;
    margin: 0 auto;
  }
}

}

/* ========== Seção 10: full-screen override ========== */
/* Garante que secao10 cubra toda a tela, mesmo dentro do .app-wrapper */
#secao10 {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100dvh !important; /* usa dVh para mobile browser bar */
  display: none;
  z-index: 9998;
  background: transparent;
  overflow: hidden;
}

/* Container central que mantém vídeo responsivo */
#secao10 .video-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
}

/* Vídeo: preenche o container, sem barras pretas (crop se necessário) */
#videoSecao10 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  max-width: none;
  border: 2px solid Black;
  object-fit: cover;
  pointer-events: none; /* impede pausar/arrastar tocando no vídeo */
  -webkit-user-select: none;
  user-select: none;
}

/* Em desktops limitamos a largura "visual" do conteúdo (mantém boa leitura) */
@media (min-width: 1024px) {
  #videoSecao10 {
    width: 70vw;      /* não estica até as bordas em telas muito largas */
    height: calc(70vw * (16/9) * (9/16)); /* mantém proporção aproximada */
    max-height: 90vh;
    object-fit: cover;
  }
  /* centraliza melhor para evitar deslocar para direita */
  #secao10 .video-wrapper { justify-content: center; align-items: center; }
}

/* Logo sobreposto - canto superior esquerdo */
.video-logo {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 1010;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none; /* não bloqueia nada */
  color: #1a0a8c;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}
.video-logo .logo-img { height: 34px; width: auto; display:block; }
.video-logo .company { font-family: 'Archivo Black', sans-serif; font-size: 1.05rem;  color:#1a0a8c; font-weight:bold; }

/* Ícone de volume (sempre sobre o vídeo, canto inferior direito) */
.volume-icon {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 1010;
  color: #fff;
  font-size: 22px;
  background: rgba(0,0,0,0.35);
  padding: 8px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .15s ease;
}
.volume-icon:active { transform: scale(0.96); }

/* Slider discreto que aparece quando o usuário clica no ícone (aparece via JS) */
.volume-popup {
  position: absolute;
  right: 14px;
  bottom: 56px;
  z-index: 1011;
  background: rgba(0,0,0,0.6);
  padding: 8px;
  border-radius: 8px;
  display: none;
  align-items: center;
  gap: 8px;
}
.volume-popup input[type="range"] {
  appearance: none;
  width: 120px;
}
.volume-popup input[type="range"]::-webkit-slider-runnable-track { height: 6px; background: rgba(255,255,255,0.25); border-radius: 6px; }
.volume-popup input[type="range"]::-webkit-slider-thumb { appearance: none; width: 12px; height: 12px; border-radius: 50%; background: #fff; margin-top: -3px; }

/* Tamanhos responsivos menores no mobile */
@media (max-width: 768px) {
  .video-logo .logo-img { height: 26px; }
  .video-logo .company { font-size: 0.92rem; }
  .volume-icon { font-size: 20px; padding: 7px; right: 10px; bottom: 10px; }
  .volume-popup { right: 10px; bottom: 52px; }

  #videoSecao10 { width: 100%; height: 100%; object-fit: cover; }

}


/* Esconde header e progress bar enquanto a secao10 estiver ativa (garante fallback) */
#secao10.visible ~ .app-wrapper .header,
#secao10.visible ~ .progress-bar { display: none !important; }

}

/* ==== FIX Seção 10 — sobrescreve conflitos e garante overlay ==== */
/* posição full-screen (uso de inset é mais robusto que top/left/right/bottom) */
#secao10 {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100dvh !important;
  z-index: 9999 !important;
  display: none;
  background: #000; /* fundo padrão (mas aplica mais nitidamente no mobile abaixo) */
  overflow: hidden;
}

/* wrapper ocupa toda a tela e centraliza conteúdo */
#secao10 .video-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background: #000;
}

/* vídeo: por padrão cobre todo o container (sem barras pretas) */
#videoSecao10 {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  object-fit: cover !important;
  pointer-events: none !important; /* impede toque de pausar */
  border: 0 !important; /* remove qualquer borda preta que estava aparecendo */
  box-sizing: border-box !important;
}



/* ===== Mobile: fundo preto e vídeo 100% 9:16 ===== */
@media (max-width: 768px) {
  /* fundo vai ficar preto e o vídeo ocupará toda a tela (9:16) */
  #secao10 { background: #000 !important; }

  /* video full-screen em mobile: garante 100% viewport sem margens */
  #videoSecao10 {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    object-fit: cover !important;
    transform: none !important; /* manter posicionamento natural em mobile */
    top: 0 !important;
    left: 0 !important;
  }

  /* Logo e ícone menores e sobrepostos ao vídeo (não abaixo) */
  .video-logo { top: 12px !important; left: 12px !important; }
  .video-logo .logo-img { height: 24px !important; }
  .video-logo .company { font-size: 0.88rem !important; }

  .volume-icon { right: 12px !important; bottom: 12px !important; width: 40px !important; height: 40px !important; font-size: 18px !important; }
  .volume-popup { right: 12px !important; bottom: 58px !important; }
}

/* Segurança: força z-index caso outro elemento tente cobrir */
#secao10, #secao10 .video-wrapper, #videoSecao10, .video-logo, .volume-icon { z-index: 9998 !important; }

/* Remove bordas/outline residuais (override final) */
#videoSecao10 { border: 0 !important; outline: 0 !important; box-shadow: none !important; }
/* Telas grandes */


@media (min-width: 1024px) {
  #videoSecao10 {
    width: 70vw;       /* largura proporcional à tela */
    height: auto;      /* ajusta altura automaticamente */
    max-height: 90vh;  /* não ultrapassa 90% da altura da tela */
    object-fit: cover;
    object-position: top center; /* mostra mais o topo do vídeo */
transform: translate(-50%, -50%);
top: 50%;
left: 50%;

  }
}  

/* 🔒 Corrige alinhamento real do header com o conteúdo */
.header {
  padding-left: 12px !important;
  padding-right: 12px !important;
}
/* Compensa o transform: scale do app-wrapper */
.app-wrapper .header {
  transform: translateX(-2px);
}

transform: translateX(-2.3px);/* End custom CSS */