:root {
     --bg-input: #d6d6d6;
     --bg-button: #6a9c8d;
     --card-bg: #ffffff;
     --text-main: #1e293b;
     --text-secondary: #64748b;
     --program-bg: #00B5BE;
     --primary-mint: #00f5a0;

     /* Tons de Alerta Crítico / Perigo (Alterado para Vermelho) */
     --danger-border: #FE4947;
     /* --danger-text-heading: #991b1b; */
     --danger-text-heading: #474747;
     /* --danger-text-body: #7f1d1d; */
     --danger-btn-hover: #fee2e2;
     --danger-text-body: #474747;


     /* Tons de Alerta Médio / Perigo*/
     --alert-bg: #fffbeb;
     --alert-border: #fde68a;
     /* --medium-text-heading: #b45309; */
     --medium-text-heading: #474747;
     /* --medium-text-body: #78350f; */
     --medium-text-body: #474747;

     /* Cores de Ação */

     --btn-primary: #198754;
     --btn-primary-hover: #059669;

     --btn-secondary-border: #cbd5e1;
     --btn-secondary-text: #475569;
     --btn-secondary-hover-bg: #f1f5f9;

 }

 body {
     background-color: var(--bg-input);
     font-family: 'Montserrat', sans-serif;
 }

 .video-container {
     position: relative;
     padding-bottom: 56.25%;
     /* Proporção 16:9 */
     height: 0;
     overflow: hidden;
     border-radius: 16px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
     margin: 0 auto;
     max-width: 560px;
 }


 .video-container iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     border: 0;
 }

 .store-buttons-container {
     display: flex;
     justify-content: center;
     gap: 14px;
     flex-wrap: wrap;
     margin-top: 16px;
 }

 .step-title {
     color: var(--primary-mint);
     font-weight: 700;
     font-size: 1.8rem;
     letter-spacing: 1px;
     margin-top: 40px;
     margin-bottom: 10px;
 }

 .step-card {
     border: none;
     background: #ffffff;
     border-radius: var(--card-border-radius);
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     overflow: hidden;
     height: 100%;

 }

 .step-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
 }

 /* Imagem Genérica do Passo - Altere o src ou estilos conforme necessário */
 .step-image-placeholder {
     width: 100%;
     height: 320px;
     background-color: #E8EBED;
     display: flex;
     align-items: center;
     justify-content: center;
     border-bottom: 1px solid #edf2f7;
     position: relative;
 }

 .step-image-placeholder img {
     max-width: 100%;
     max-height: 100%;
     object-fit: contain;
     padding: 15px;
 }

 .step-description {
     font-size: 0.95rem;
     color: var(--text-dark);
     line-height: 1.5;
     padding: 20px 15px;
     text-align: center;
 }


 /* Banner de Atenção */
 .attention-banner {
     background-image: linear-gradient(135deg, rgb(0, 210, 255) 0%, rgb(0, 245, 160) 100%);
     border-radius: 30px;
     padding: 40px 20px;
     color: var(--dark-bg);
     box-shadow: 0 10px 25px rgba(0, 245, 160, 0.2);
     margin: 5px auto;
     max-width: 900px;
 }

 .attention-title {
     font-size: 2.6rem;
     font-weight: 800;
     letter-spacing: 2px;
     margin-bottom: 15px;
 }


 .app-store-btn {
     background-color: #000000;
     color: #ffffff;
     border: 1px solid #334155;
     border-radius: 10px;
     padding: 10px 20px;
     display: inline-flex;
     align-items: center;
     gap: 12px;
     text-decoration: none;
     text-align: left;
     min-width: 180px;
     transition: background-color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
 }

 .app-store-btn:hover {
     background-color: #111827;
     border-color: #4b5563;
     color: #ffffff;
     transform: translateY(-2px);
 }

 /* Ícones da loja através da fonte do Bootstrap */
 .app-store-btn i {
     font-size: 1.8rem;
     color: #ffffff;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .app-store-btn .btn-text-small {
     font-size: 0.65rem;
     text-transform: uppercase;
     display: block;
     line-height: 1.1;
     font-weight: 500;
     color: #94a3b8;
 }

 .app-store-btn .btn-text-large {
     font-size: 0.95rem;
     font-weight: 700;
     display: block;
     line-height: 1.2;
     color: #ffffff;
 }

 .btn-cta {
     background-image: linear-gradient(135deg, rgb(0, 210, 255) 0%, rgb(0, 245, 160) 100%);
     color: var(--dark-bg);
     font-size: 1.1rem;
     font-weight: 700;
     padding: 18px 40px;
     border-radius: 50px;
     border: none;
     box-shadow: 0 6px 20px rgba(0, 245, 160, 0.3);
     transition: all 0.3s ease;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     white-space: normal;
     display: inline-block;
     max-width: 100%;
 }

 #btn-jornada-psicoeducativa {
     font-size: 1.1rem;
     font-weight: 700;
     color: var(--dark-bg);
     text-transform: uppercase;

 }

 .btn-cta:hover {
     background-color: #00e090;
     transform: translateY(-2px);
     box-shadow: 0 10px 25px rgba(0, 245, 160, 0.4);
     color: var(--dark-bg);
 }

 .btn-cta:active {
     transform: translateY(1px);
 }

 /* Estado de Tela Suplementar (Interatividade) */
 .state-screen {
     display: none;
 }

 .state-screen.active {
     display: block;
     animation: fadeIn 0.4s ease-out;
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(10px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 /* Classe de liberação que será aplicada dinamicamente ao clicar em "Falar por chat" */
 body.zendesk-ativo #launcher,
 body.zendesk-ativo iframe#launcher,
 body.zendesk-ativo .zEWidget--launcher {
     display: block !important;
     visibility: visible !important;
     opacity: 1 !important;
     pointer-events: auto !important;
 }

 /*formulário*/
 .progress-bar {
     transition: width 0.4s ease-in-out;

 }

 .pergunta {
     display: none;
     animation-duration: 0.4s;
 }

 .pergunta.active {
     display: block;
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(20px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .fade-in {
     animation-name: fadeIn;
 }

 .answer-option {
     display: none;
 }

 .answer-label {
     display: block;
     background-color: var(--bg-input);
     padding: 1rem;
     border-radius: 8px;
     margin-bottom: 0.5rem;
     cursor: pointer;
     transition: all 0.2s ease;
     text-align: center;
     font-weight: 500;
 }

 .answer-label:hover {
     border-color: #0d6efd;
     background-color: #f8f9fa;
 }

 .answer-option:checked+.answer-label {
     background-color: #0d6efd;
     color: white;
     border-color: #0d6efd;
     box-shadow: 0 4px 10px rgba(13, 110, 253, 0.3);
 }

 .likert-scale-container {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 0.5rem;
 }

 .likert-scale-container .answer-label {
     padding: 0.5rem 1rem;
 }


 .card {
     border: none;
     border-radius: 60px;
     /*padding: 70px 80px 80px 5px; */
     /* Topo: 10px | Direita: 20px | Baixo: 15px | Esquerda: 5px */

 }


 /* Logos um pouco menores para economizar altura */
 .brand-logos img {
     max-height: 45px;
     margin: 0 10px;
     padding: 70;
 }

 .input-cpf input {
     border-radius: 40px;
     padding: 16px 16px;
     background-color: var(--bg-input);

 }

 .cadastro-label label {
     margin-bottom: 8px;
 }




 /* Ajuste na barra de rolagem para ficar mais elegante */
 .term-box::-webkit-scrollbar {
     width: 8px;
 }

 .term-box::-webkit-scrollbar-track {
     background: #f1f1f1;
 }

 .term-box::-webkit-scrollbar-thumb {
     background: #ccc;
     border-radius: 4px;
 }

 .term-box::-webkit-scrollbar-thumb:hover {
     background: #aaa;
 }

 /* Resultado alto */

 .premium-card {
     border: 1px solid rgba(226, 232, 240, 0.8);
     border-radius: 24px;
     box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.02),
         0 20px 48px -10px rgba(0, 0, 0, 0.04);
     overflow: hidden;
     transition: all 0.3s ease;
 }

 /* Seção 1: Box de Alerta (Resultado Alto - Atualizado para Vermelho) */
 .alert-result-box {
     border: 3px solid var(--danger-border);
     border-radius: 30px;
     padding: 20px;
     text-align: left;
     margin-bottom: 24px;
 }

 .alert-result-light {
     background-image: linear-gradient(135deg, rgb(0, 210, 255) 0%, rgb(0, 245, 160) 100%);
     border: 1rem;
     border-radius: 30px;
     padding: 20px;
     text-align: left;
     margin-bottom: 24px;
 }

 .alert-result-medium {
     border-width: 3px;
     border-style: solid;
     border-color: var(--alert-border);
     border-radius: 30px;
     padding: 20px;
     text-align: left;
     margin-bottom: 24px;
 }

 .alert-light-describ {
     border-width: 2px;
     /* Defina como largura para ser mais explícito */
     border-style: solid;
     /* <--- A propriedade mágica que faltava! */
     border-color: #474747;
     border-radius: 30px;
     padding: 20px;
     text-align: left;
     margin-bottom: 24px;
 }


 .btn-action-container-light button {
     width: 100%;
     background-color: #198754 !important;
     border-color: #198754 !important;
 }

 .medium-result-title {
     color: var(--medium-text-heading);
     margin-bottom: 8px;
 }

 .medium-result-desc {
     color: var(--medium-text-body);
     font-size: 1.2rem;
     line-height: 1.55;
     font-weight: 500;
     margin-top: 30px;
     margin-bottom: 30px;
 }

 .alert-result-title {
     color: var(--danger-text-heading);
     margin-bottom: 8px;
 }

 .alert-result-title {
     color: var(--danger-text-heading);
     margin-bottom: 8px;
 }

 .alert-result-desc {
     color: var(--danger-text-body);
     font-size: 1.2rem;
     line-height: 1.55;
     font-weight: 500;
     margin-top: 30px;
     margin-bottom: 30px;
 }

 /* Seção 2: Box do Convite / Programa CompulSafe */
 .program-invitation-box {
     background-color: var(--program-bg);
     border: 1.5px solid var(--program-border);
     border-radius: 30px;
     padding: 24px;
     text-align: left;
     margin-bottom: 28px;
 }

 .program-header-tag {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     background-color: #dcfce7;
     color: var(--program-accent);
     font-size: 0.75rem;
     font-weight: 800;
     text-transform: uppercase;
     letter-spacing: 0.06em;
     padding: 4px 10px;
     border-radius: 6px;
     margin-bottom: 14px;
 }

 .program-partnership-title {
     color: var(--text-main);
     font-size: 1.05rem;
     font-weight: 700;
     line-height: 1.5;
     margin-bottom: 14px;
 }

 .program-desc {
     color: var(--program-text);
     font-size: 0.88rem;
     line-height: 1.6;
     font-weight: 400;
     margin-bottom: 16px;
 }

 /* Seção 3: Botões de Ação Personalizados */
 .btn-action-container {
     display: flex;
     flex-direction: column;
     gap: 12px;
 }

 @media (min-width: 768px) {
     .btn-action-container {
         flex-direction: row;
     }
 }

 .btn-participate {
     background-color: var(--btn-primary);
     color: #ffffff;
     font-weight: 600;
     font-size: 0.9rem;
     padding: 14px 20px;
     border-radius: 12px;
     border: none;
     transition: all 0.2s ease;
     flex: 1;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 6px;
     box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
 }


 .btn-participate:hover,
 .btn-participate:focus {
     background-color: var(--btn-primary-hover);
     color: #ffffff;
     transform: translateY(-1px);
     box-shadow: 0 6px 16px rgba(16, 185, 129, 0.25);
 }

 /* Botão Mais Informações (Contextualizado no Box) */
 .btn-info-more {
     background-color: white;
     padding: 10px 18px;
     border-radius: 10px;
     display: inline-flex;
     align-items: center;
     gap: 6px;
     text-decoration: none;
 }

 .btn-info-more:hover{
    background-color: #e9ecef;
    border-color: #dee2e6;
 }

 .btn-decline {
     background-color: transparent;
     color: var(--btn-secondary-text);
     font-weight: 500;
     font-size: 0.9rem;
     padding: 14px 20px;
     border-radius: 12px;
     border: 1px solid var(--btn-secondary-border);
     transition: all 0.2s ease;
     flex: 1;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 6px;
 }

 .btn-decline:hover,
 .btn-decline:focus {
     background-color: var(--btn-secondary-hover-bg);
     color: var(--text-main);
     border-color: #94a3b8;
 }

 /* Estado de Tela Suplementar (Interatividade) */
 .state-screen {
     display: none;
 }

 .state-screen.active {
     display: block;
     animation: fadeIn 0.4s ease-out;
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(10px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 /* CSS DE SEGURANÇA ABSOLUTA PARA O WIDGET DO ZENDESK */
 #launcher,
 iframe#launcher,
 .zEWidget--launcher {
     display: none !important;
     visibility: hidden !important;
     opacity: 0 !important;
     pointer-events: none !important;
 }

 /* Classe de liberação que será aplicada dinamicamente ao clicar em "Falar por chat" */
 body.zendesk-ativo #launcher,
 body.zendesk-ativo iframe#launcher,
 body.zendesk-ativo .zEWidget--launcher {
     display: block !important;
     visibility: visible !important;
     opacity: 1 !important;
     pointer-events: auto !important;
 }