/*
 * como-participar.css
 * 
 * Autor: (WSC TI) wscti.dev.br
 * Atualizado em 15/10/2026 às 14h40
 * 
 */
.secao-principal {min-height: 900px; padding-bottom: 16px;}

h1 {font-size: 64px; margin-top: 64px; color: rgba(15, 39, 71, 1);}
h6 {font-size: 19px; margin-top: 32px; color: rgba(114, 114, 114, 1);}

.conteudo {min-height: 1280px; margin-top: 32px; margin-bottom: 32px; padding: 32px; background: #FFFFFF; box-shadow: 0 0 13px 3px rgba(0, 0, 0, 0.1); border-radius: 12px;}

.passo-a-passo-titulo {margin-top: 16px; margin-bottom: 86px; font-size: 32px; color: rgba(15, 39, 71, 1);}
.passo-a-passo-linha {position: absolute; margin-top: 72px; width: 106px; height: 3px; border: 2px solid rgba(15, 39, 71, 1) !important; border-radius: 0 0 6px 6px; color: rgba(15, 39, 71, 1); background-color: rgba(15, 39, 71, 1);}
.passo-a-passo-caixa {width: 245px; height: 350px; box-sizing: border-box; border: 2px solid #D1D1D2; border-radius: 8px; margin: 16px;}
.passo-a-passo-caixa-numero {position: absolute; width: 50px; height: 50px; margin-top: -25px; background: #0F2747; font-style: normal; font-size: 26px; line-height: 87px; display: flex; align-items: center; text-align: center; color: #FFFFFF; border-radius: 50%;}
.passo-a-passo-caixa-icone {position: absolute; width: 96px; height: 96px; margin-top: 64px; background-color: #EAF1FB; color: rgba(15, 39, 71, 1); border-radius: 50%;}
.passo-a-passo-caixa-titulo {position: absolute; color: rgba(15, 39, 71, 1); font-size: 16px; margin-top: 186px;}
.passo-a-passo-caixa-texto {position: absolute; width: 206px; color: rgba(135, 134, 134, 1); font-size: 16px; margin-top: 242px;}
.passo-a-passo-caixa-texto-mn {position: absolute; width: 228px; color: rgba(135, 134, 134, 1); font-size: 15px; margin-top: 242px;}

.passo-a-passo-seta {height: 350px;}

.seguranca {height: 106px; margin-bottom: 32px; background-color: rgba(234, 241, 251, 1); border-radius: 10px;}
.seguranca-icone {width: 62px; height: 62px; border-radius: 50%; background-color: rgba(15, 39, 71, 1); color: rgba(234, 241, 251, 1); display: flex; align-items: center; text-align: center;}
.seguranca-icone svg {margin-left: 17px;}
.seguranca-titulo {font-size: 17px; color: rgba(15, 39, 71, 1); margin-bottom: 4px;}
.seguranca-texto {font-size: 15px; color: rgba(151, 151, 151, 1); padding-right: 52px;}
.seguranca-texto a {color: rgba(0, 109, 255, 1); text-decoration: none;}

.importante-caixa {width: 271px; height: 261px; box-sizing: border-box; border: 2px solid #D1D1D2; border-radius: 8px; margin: 16px;}
.importante-caixa-icone {width: 100% !important; height: 48px; margin-top: 32px; margin-bottom: 32px; color: rgba(15, 39, 71, 1); text-align: center;}
.importante-caixa-titulo {font-size: 16px; color: rgba(15, 39, 71, 1); margin-bottom: 16px;}
.importante-caixa-texto {font-size: 14px; color: rgba(151, 151, 151, 1); line-height: 24px;}
.importante-caixa-texto a {color: rgba(0, 109, 255, 1); text-decoration: none;}

.participar {width: 1220px; height: 106px; background-color: rgba(15, 39, 71, 1); border-radius: 10px;}
.participar-icone {width: 62px; height: 62px; border-radius: 50%; background-color: rgba(234, 241, 251, 1); color: rgba(15, 39, 71, 1); display: flex; align-items: center; text-align: center;}
.participar-icone svg {margin-left: 17px;}
.participar-titulo {font-size: 17px; color: #fff; margin-bottom: 4px;}
.participar-texto {font-size: 15px; color: #fff; padding-right: 52px;}
.participar-botao {width: 370px; height: 58px; background-color: rgba(234, 241, 251, 1); color: rgba(15, 39, 71, 1); border-radius: 10px; font-size: 17px; padding-top: 14px;}
.participar-botao:hover {background-color: #6B7280; color: rgba(234, 241, 251, 1);}

.quebra-linha {}

@media (max-width: 640px) {
    h1 {font-size: 28px; margin-top: 16px; color: rgba(15, 39, 71, 1);}
    h6 {font-size: 9px; margin-top: 8px; color: rgba(114, 114, 114, 1);}

    .conteudo {min-height: 400px; margin-top: 24px; margin-bottom: 16px; padding: 16px; background: #FFFFFF; box-shadow: 0 0 6px 1.5px rgba(0, 0, 0, 0.1); border-radius: 6px;}

    .passo-a-passo-titulo {margin-top: 16px; margin-bottom: 32px; font-size: 12px; color: rgba(15, 39, 71, 1);}
    .passo-a-passo-linha {position: absolute; margin-top: 36px; width: 42px; height: 3px; border: 2px solid rgba(15, 39, 71, 1) !important; border-radius: 0 0 3px 3px; color: rgba(15, 39, 71, 1); background-color: rgba(15, 39, 71, 1);}
    .passo-a-passo-caixa {width: 100%; height: 50px; box-sizing: unset; border: none; margin: 4px;}
    .passo-a-passo-caixa-numero {position: absolute; width: 22px; height: 22px; margin-top: 0; background: #0F2747; font-style: normal; font-size: 8px; line-height: 10px; display: flex; align-items: center; text-align: center; color: #FFFFFF; border-radius: 50%; z-index: 4; box-shadow: 0 0 4px 10px #ffffff;}
    .passo-a-passo-caixa-icone {display: none !important;}
    .passo-a-passo-caixa-titulo {position: relative; color: rgba(15, 39, 71, 1); font-size: 8px; margin-top: 16px; margin-left: 32px;}
    .passo-a-passo-caixa-texto {position: relative; width: 90%; color: rgba(135, 134, 134, 1); font-size: 7px; margin-top: 8px; margin-left: 32px;}
    .passo-a-passo-caixa-texto-mn {position: relative; width: 90%; color: rgba(135, 134, 134, 1); font-size: 7px; margin-top: 8px; margin-left: 32px;}
    .passo-a-passo-seta {display: none !important;}
    .passo-a-passo-meio {display: none !important;}

    .seguranca {height: 64px; margin-bottom: 16px; background-color: rgba(234, 241, 251, 1); border-radius: 4px; padding-top: 14px;}
    .seguranca-icone {width: 22px; height: 22px; border-radius: 50%; background-color: rgba(15, 39, 71, 1); color: rgba(234, 241, 251, 1);}
    .seguranca-icone svg {width: 9px; margin-left: 6px;}
    .seguranca-titulo {font-size: 7px; color: rgba(15, 39, 71, 1); margin-bottom: 4px;}
    .seguranca-texto {font-size: 5px; color: rgba(151, 151, 151, 1); padding-right: 2px;}
    .seguranca-texto a {color: rgba(0, 109, 255, 1); text-decoration: none;}

    .importante-linha {padding: 0 !important;}
    .importante-caixa {width: 95%; height: 140px; box-sizing: unset; border: 1px solid #D1D1D2; border-radius: 4px; margin-left: 4px !important; margin-right: 4px !important;}
    .importante-caixa-icone {width: 100% !important; height: 48px; margin-top: 8px; margin-bottom: 8px; color: rgba(15, 39, 71, 1); text-align: center;}
    .importante-svg {width: 26px;}
    .importante-caixa-titulo {font-size: 8px; color: rgba(15, 39, 71, 1); margin-bottom: 12px;}
    .importante-caixa-texto {font-size: 7px; color: rgba(151, 151, 151, 1); line-height: 14px;}
    .importante-caixa-texto a {color: rgba(0, 109, 255, 1); text-decoration: none;}

    .participar {width: 100%; height: 42px; background-color: rgba(15, 39, 71, 1); border-radius: 4px; padding-top: 6px;}
    .participar-icone {width: 20px; height: 20px; border-radius: 50%; background-color: rgba(234, 241, 251, 1); color: rgba(15, 39, 71, 1); display: flex; align-items: center; text-align: center; margin-top: 4px; margin-left: 4px;}
    .participar-icone svg {width: 9px; margin-left: 6px;}
    .participar-titulo {font-size: 7px; color: #fff; margin-bottom: 4px;}
    .participar-texto {font-size: 5px; color: #fff; padding-right: 0px;}
    .participar-botao {width: 100%; height: 22px; background-color: rgba(234, 241, 251, 1); color: rgba(15, 39, 71, 1); border-radius: 4px; font-size: 8px; padding-top: 2px; margin-top: 4px;}
    .participar-botao-svg {width: 8px;}
    .participar-botao:hover {background-color: #6B7280; color: rgba(234, 241, 251, 1);}

    .linha-vertical {position: absolute; top: 362px; left: 54px; border-left: 1px solid #D1D1D2; height: 360px; z-index: 1;}

    .quebra-linha {display: none;}
}