/*
 * CAMINHO: /home1/miille88/oscarindica.com.br/assets/css/oi-indica.css
 * Versão: 1.3.0
 *
 * OI INDICA — landing pública.
 *
 * 1.3.0
 * - tela de confirmação vira seção própria (.oiind-recebido);
 * - substitui .oiind-sucesso, que morava dentro do cartão do
 *   formulário e ficava abaixo da dobra depois do redirect;
 * - lista de próximos passos e rodapé de "não chegou o e-mail".
 *
 * 1.2.2
 * - consolida o CSS do formulário sem blocos duplicados;
 * - layout mais compacto para notebook (901px–1440px);
 * - card de inscrição reduzido e centralizado;
 * - campos, blocos e espaçamentos mais enxutos;
 * - coluna explicativa sticky no desktop;
 * - mantém formulário internacional em cinco etapas;
 * - mantém responsividade para desktop, notebook, tablet e celular.
 *
 *
 * Dependência:
 *   /assets/css/site.css
 *
 * Este arquivo usa as variáveis e a estrutura visual já existentes
 * no site público da Oscar Indica. Não redefine cabeçalho, rodapé,
 * menu, fita ao vivo ou estilos globais.
 */


/* =====================================================================
   BASE DA LANDING
   ===================================================================== */

.oiind-body {
    background: var(--fundo);
}

.oiind-body main {
    overflow: hidden;
}

.oiind-kicker {
    margin: 0 0 8px;
    color: var(--esmeralda);
    font-size: 12px;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.oiind-texto {
    color: var(--cinza);
    font-size: 15px;
    line-height: 1.7;
}

.oiind-btn {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    padding: 11px 22px;
    border: 2px solid transparent;
    border-radius: 26px;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color .15s ease,
        border-color .15s ease,
        color .15s ease,
        transform .15s ease,
        box-shadow .15s ease;
}

.oiind-btn:hover {
    transform: translateY(-1px);
}

.oiind-btn--principal {
    background: var(--esmeralda);
    color: #fff;
}

.oiind-btn--principal:hover {
    background: var(--coqueiro);
    color: #fff;
    box-shadow: 0 8px 24px rgba(11, 79, 67, .18);
}

.oiind-btn--secundario {
    border-color: var(--esmeralda);
    background: #fff;
    color: var(--esmeralda);
}

.oiind-btn--secundario:hover {
    border-color: var(--coqueiro);
    background: #f3faf8;
    color: var(--coqueiro);
}

.oiind-btn--cheio {
    width: 100%;
}

.oiind-btn:focus-visible,
.oiind-form input:focus-visible,
.oiind-form select:focus-visible,
.oiind-form textarea:focus-visible,
.oiind-consentimento input:focus-visible {
    outline: 3px solid rgba(15, 118, 101, .24);
    outline-offset: 2px;
}


/* =====================================================================
   HERO
   ===================================================================== */

.oiind-hero {
    position: relative;
    padding: 74px 0 70px;
    border-bottom: 1px solid var(--borda);
    background:
        radial-gradient(
            circle at 82% 18%,
            rgba(244, 197, 66, .16),
            transparent 26rem
        ),
        linear-gradient(
            135deg,
            #fff 0%,
            #fff 46%,
            #f2f8f6 100%
        );
}

.oiind-hero::after {
    content: "";
    position: absolute;
    right: -130px;
    bottom: -170px;
    width: 430px;
    height: 430px;
    border: 70px solid rgba(15, 118, 101, .045);
    border-radius: 50%;
    pointer-events: none;
}

.oiind-hero__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(330px, .85fr);
    gap: 64px;
    align-items: center;
}

.oiind-hero__conteudo {
    max-width: 650px;
}

.oiind-hero h1 {
    margin: 0;
    max-width: 680px;
    color: var(--coqueiro);
    font-size: clamp(36px, 5.4vw, 62px);
    line-height: 1.03;
    font-weight: 850;
    letter-spacing: -.04em;
}

.oiind-hero h1 span {
    display: block;
    color: var(--esmeralda);
}

.oiind-hero__texto {
    max-width: 610px;
    margin: 21px 0 0;
    color: var(--cinza);
    font-size: clamp(16px, 1.8vw, 19px);
    line-height: 1.65;
}

.oiind-hero__acoes {
    display: flex;
    gap: 11px;
    flex-wrap: wrap;
    margin-top: 29px;
}

.oiind-hero__nota {
    margin: 13px 0 0;
    color: var(--cinza);
    font-size: 12.5px;
}


/* painel visual do hero */

.oiind-hero__painel {
    position: relative;
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 20px;
    background:
        linear-gradient(
            145deg,
            var(--coqueiro),
            #0e6959
        );
    color: #fff;
    box-shadow: 0 22px 55px rgba(7, 47, 36, .18);
}

.oiind-hero__painel::before {
    content: "";
    display: block;
    width: 48px;
    height: 4px;
    margin-bottom: 24px;
    border-radius: 999px;
    background: var(--dourado);
}

.oiind-painel__rotulo {
    margin: 0 0 8px;
    color: #add8cd;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.oiind-hero__painel > strong {
    display: block;
    max-width: 330px;
    margin-bottom: 25px;
    font-size: 22px;
    line-height: 1.28;
}

.oiind-painel__linha {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 0;
    border-top: 1px solid rgba(255, 255, 255, .14);
    color: #cfe8e0;
    font-size: 13px;
}

.oiind-painel__linha b {
    color: var(--dourado);
    font-size: 12px;
    text-transform: uppercase;
}

.oiind-painel__rodape {
    margin: 18px 0 0;
    color: #9fc9bd;
    font-size: 12px;
}


/* =====================================================================
   SEÇÕES / TÍTULOS
   ===================================================================== */

.oiind-secao {
    padding: 68px 0;
    background: #fff;
}

.oiind-secao--suave {
    border-top: 1px solid var(--borda);
    border-bottom: 1px solid var(--borda);
    background: var(--fundo);
}

.oiind-titulo {
    max-width: 720px;
    margin: 0 auto 34px;
    text-align: center;
}

.oiind-titulo h2,
.oiind-duas-colunas h2,
.oiind-regra h2,
.oiind-formulario-intro h2,
.oiind-fecho h2 {
    margin: 0;
    color: var(--coqueiro);
    font-size: clamp(27px, 3.8vw, 38px);
    line-height: 1.13;
    font-weight: 820;
    letter-spacing: -.025em;
}

.oiind-titulo > p:last-child {
    max-width: 620px;
    margin: 12px auto 0;
    color: var(--cinza);
    font-size: 15px;
}


/* =====================================================================
   PASSOS
   ===================================================================== */

.oiind-passos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.oiind-passo {
    min-width: 0;
    padding: 26px;
    border: 1px solid var(--borda);
    border-radius: 16px;
    background: #fff;
    transition:
        transform .15s ease,
        box-shadow .15s ease,
        border-color .15s ease;
}

.oiind-passo:hover {
    transform: translateY(-3px);
    border-color: #c7dfd8;
    box-shadow: 0 12px 32px rgba(7, 47, 36, .08);
}

.oiind-passo__numero {
    display: flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    border-radius: 50%;
    background: var(--dourado);
    color: #412402;
    font-size: 14px;
    font-weight: 850;
}

.oiind-passo h3 {
    margin: 0;
    color: var(--coqueiro);
    font-size: 17px;
    line-height: 1.3;
}

.oiind-passo p {
    margin: 9px 0 0;
    color: var(--cinza);
    font-size: 13.5px;
    line-height: 1.6;
}


/* =====================================================================
   QUEM PODE PARTICIPAR
   ===================================================================== */

.oiind-duas-colunas {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: 70px;
    align-items: center;
}

.oiind-duas-colunas .oiind-texto {
    margin-top: 16px;
}

.oiind-publicos {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
    align-content: center;
}

.oiind-publicos span {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    padding: 7px 14px;
    border: 1px solid #d8e4df;
    border-radius: 999px;
    background: #fff;
    color: var(--coqueiro);
    font-size: 13px;
    font-weight: 700;
}


/* =====================================================================
   REGRA / TRANSPARÊNCIA
   ===================================================================== */

.oiind-regra {
    padding: 34px;
    border: 1px solid var(--borda);
    border-radius: 20px;
    background: var(--fundo);
}

.oiind-regra__cabecalho {
    max-width: 700px;
}

.oiind-regra__grade {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 27px;
}

.oiind-regra__item {
    padding: 21px 22px;
    border: 1px solid var(--borda);
    border-radius: 14px;
    background: #fff;
}

.oiind-regra__item--sim {
    border-color: #b9ded3;
    background: #f4fbf9;
}

.oiind-regra__item strong {
    display: block;
    color: var(--coqueiro);
    font-size: 14px;
}

.oiind-regra__item--sim strong::before {
    content: "✓ ";
    color: var(--esmeralda);
}

.oiind-regra__item p {
    margin: 7px 0 0;
    color: var(--cinza);
    font-size: 13.5px;
    line-height: 1.6;
}

.oiind-regra__nota {
    margin: 17px 0 0;
    color: var(--cinza);
    font-size: 12.5px;
}


/* =====================================================================
   FORMULÁRIO
   ===================================================================== */

#quero-participar {
    scroll-margin-top: 105px;
}

.oiind-formulario-secao {
    padding: 62px 0 70px;
    background:
        radial-gradient(
            circle at 12% 18%,
            rgba(244, 197, 66, .08),
            transparent 24rem
        ),
        linear-gradient(
            135deg,
            #0b5f52 0%,
            #0f6f60 100%
        );
}

/*
 * Desktop grande:
 * o formulário continua confortável, mas nunca vira um painel largo.
 */
.oiind-formulario-grid {
    display: grid;
    grid-template-columns: minmax(270px, 330px) minmax(0, 570px);
    justify-content: center;
    gap: 42px;
    align-items: start;
    max-width: 980px;
    margin: 0 auto;
}

.oiind-formulario-intro {
    max-width: 330px;
    padding-top: 10px;
    color: #fff;
}

.oiind-formulario-intro .oiind-kicker {
    color: var(--dourado);
}

.oiind-formulario-intro h2 {
    color: #fff;
}

.oiind-formulario-intro > p {
    max-width: 325px;
    margin: 14px 0 0;
    color: #d3e9e2;
    font-size: 15px;
    line-height: 1.65;
}

.oiind-checks {
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.oiind-checks li {
    position: relative;
    padding: 7px 0 7px 27px;
    color: #edf7f4;
    font-size: 13px;
    line-height: 1.5;
}

.oiind-checks li::before {
    content: "✓";
    position: absolute;
    top: 7px;
    left: 0;
    color: var(--dourado);
    font-weight: 850;
}


/* card principal */

.oiind-formulario-card {
    width: 100%;
    max-width: 570px;
    margin: 0;
    padding: 27px;
    border: 1px solid rgba(13, 84, 71, .08);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 24px 52px rgba(4, 35, 29, .18);
}

.oiind-formulario-card__cabecalho {
    margin-bottom: 20px;
}

.oiind-formulario-card__cabecalho span {
    display: block;
    color: var(--esmeralda);
    font-size: 10.5px;
    line-height: 1.2;
    font-weight: 850;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.oiind-formulario-card__cabecalho strong {
    display: block;
    margin-top: 4px;
    color: var(--coqueiro);
    font-size: 21px;
    line-height: 1.2;
    font-weight: 850;
}

.oiind-form {
    position: relative;
}


/* blocos / etapas */

.oiind-form-bloco {
    min-width: 0;
    margin: 0;
    padding: 18px;
    border: 1px solid #e2eae7;
    border-radius: 15px;
    background: #fbfcfc;
}

.oiind-form-bloco + .oiind-form-bloco {
    margin-top: 12px;
}

.oiind-form-bloco legend {
    display: flex;
    width: auto;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    padding: 0 3px;
    color: var(--coqueiro);
    font-size: 14px;
    line-height: 1.2;
    font-weight: 850;
}

.oiind-form-bloco legend span {
    display: inline-flex;
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--esmeralda);
    color: #fff;
    font-size: 11px;
    font-weight: 850;
}

.oiind-form-bloco__texto {
    margin: 0 0 13px;
    color: #6d7975;
    font-size: 11.5px;
    line-height: 1.5;
}


/* grids */

.oiind-form__duas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
    margin-top: 11px;
}

.oiind-form__tres {
    display: grid;
    grid-template-columns:
        minmax(0, .88fr)
        minmax(0, 1.06fr)
        minmax(0, 1.06fr);
    gap: 11px;
}

.oiind-campo {
    min-width: 0;
}

.oiind-campo--cheio {
    margin-top: 0;
}

.oiind-campo--texto {
    margin-top: 15px;
}


/* campos */

.oiind-campo label {
    display: block;
    margin-bottom: 5px;
    color: #143c35;
    font-size: 11.5px;
    line-height: 1.35;
    font-weight: 800;
}

.oiind-campo input,
.oiind-campo select,
.oiind-campo textarea {
    width: 100%;
    min-height: 44px;
    padding: 9px 12px;
    border: 1px solid #d7e2de;
    border-radius: 10px;
    background: #fff;
    color: #16332d;
    font: inherit;
    font-size: 14px;
    outline: none;
    transition:
        border-color .15s ease,
        box-shadow .15s ease,
        background-color .15s ease;
}

.oiind-campo select {
    cursor: pointer;
}

.oiind-campo input:hover,
.oiind-campo select:hover,
.oiind-campo textarea:hover {
    border-color: #bfd2cb;
    background: #fcfefd;
}

.oiind-campo input:focus,
.oiind-campo select:focus,
.oiind-campo textarea:focus {
    border-color: var(--esmeralda);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(15, 118, 101, .09);
}

.oiind-campo input::placeholder,
.oiind-campo textarea::placeholder {
    color: #98a39f;
}

.oiind-campo textarea {
    min-height: 108px;
    resize: vertical;
    line-height: 1.55;
}

.oiind-campo-nota {
    margin: 5px 0 0;
    color: #7b8783;
    font-size: 10px;
    line-height: 1.45;
}

#pais_codigo {
    font-size: 14px;
}


/* opções: segmentos / público / canais */

.oiind-grupo-opcoes + .oiind-grupo-opcoes {
    margin-top: 16px;
}

.oiind-grupo-opcoes__cabecalho {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.oiind-grupo-opcoes__cabecalho strong {
    color: #143c35;
    font-size: 11.5px;
    line-height: 1.35;
    font-weight: 800;
}

.oiind-grupo-opcoes__cabecalho span {
    flex: 0 0 auto;
    color: #7d8885;
    font-size: 9.5px;
}

.oiind-opcoes-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}

.oiind-opcoes-grid--quatro {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.oiind-opcao {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 38px;
    align-items: center;
    gap: 7px;
    padding: 7px 9px;
    border: 1px solid #dce5e2;
    border-radius: 9px;
    background: #fff;
    color: var(--texto);
    cursor: pointer;
    transition:
        border-color .14s ease,
        background-color .14s ease,
        box-shadow .14s ease;
}

.oiind-opcao:hover {
    border-color: #b8d1ca;
    background: #f6fbf9;
}

.oiind-opcao:has(input:checked) {
    border-color: #8cc5b6;
    background: #edf8f4;
    box-shadow: inset 0 0 0 1px rgba(15, 118, 101, .07);
}

.oiind-opcao input {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    margin: 0;
    accent-color: var(--esmeralda);
}

.oiind-opcao span {
    min-width: 0;
    font-size: 10.5px;
    line-height: 1.25;
    font-weight: 700;
}


/* redes sociais */

.oiind-redes {
    display: grid;
    gap: 8px;
}

.oiind-rede-linha {
    display: grid;
    grid-template-columns:
        minmax(105px, .72fr)
        minmax(155px, 1.35fr)
        minmax(125px, .9fr);
    gap: 8px;
    align-items: end;
    padding: 10px;
    border: 1px solid #e1e8e5;
    border-radius: 10px;
    background: #fff;
}

.oiind-rede-linha__usuario {
    min-width: 0;
}

.oiind-rede-linha .oiind-campo label {
    font-size: 10px;
}

.oiind-rede-linha .oiind-campo input,
.oiind-rede-linha .oiind-campo select {
    min-height: 40px;
    padding-block: 7px;
    font-size: 12.5px;
}


/* consentimento / ação */

.oiind-consentimento {
    display: grid;
    grid-template-columns: 17px minmax(0, 1fr);
    gap: 9px;
    align-items: start;
    margin: 16px 0 14px;
}

.oiind-consentimento input {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    accent-color: var(--esmeralda);
}

.oiind-consentimento label {
    color: #66736f;
    font-size: 10.5px;
    line-height: 1.5;
}

.oiind-consentimento a {
    font-weight: 750;
}

.oiind-btn--cheio {
    width: 100%;
    min-height: 48px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 850;
}

.oiind-form__nota {
    margin: 9px 0 0;
    color: #74807d;
    font-size: 10px;
    line-height: 1.4;
    text-align: center;
}


/* honeypot */

.oiind-campo-fantasma {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}


/* erro */

.oiind-erro {
    margin-bottom: 14px;
    padding: 10px 12px;
    border: 1px solid #efc5bf;
    border-radius: 10px;
    background: #fff2f1;
    color: #942f28;
    font-size: 12px;
    line-height: 1.5;
}


/* sucesso */

/* =====================================================================
   CONFIRMAÇÃO — 1.3.0
   =====================================================================
 *
 * Antes isto vivia dentro do cartão do formulário, abaixo da dobra.
 * Depois do redirect o navegador abria no topo da landing e a pessoa
 * nunca via o agradecimento. Agora é a seção inteira.
 */

.oiind-recebido {
    max-width: 560px;
    margin: 0 auto;
    padding: 40px 28px 34px;
    border: 1px solid var(--oiind-borda, #e8e4da);
    border-radius: 16px;
    background: #fff;
    text-align: center;
}

.oiind-recebido__marca {
    display: flex;
    width: 56px;
    height: 56px;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: #e2f3ee;
    color: var(--esmeralda);
    font-size: 26px;
    font-weight: 900;
    line-height: 1;
}

.oiind-recebido__titulo {
    margin: 0;
    color: var(--coqueiro);
    font-size: 27px;
    line-height: 1.2;
}

.oiind-recebido__linha {
    max-width: 430px;
    margin: 12px auto 0;
    color: var(--cinza);
    font-size: 15px;
    line-height: 1.6;
}

.oiind-recebido__passos {
    max-width: 430px;
    margin: 22px auto 0;
    padding: 16px 18px;
    border-radius: 10px;
    background: #faf8f3;
    list-style: none;
    text-align: left;
}

.oiind-recebido__passos li {
    position: relative;
    padding-left: 22px;
    color: #243a34;
    font-size: 14px;
    line-height: 1.6;
}

.oiind-recebido__passos li + li {
    margin-top: 10px;
}

.oiind-recebido__passos li::before {
    position: absolute;
    top: 0;
    left: 0;
    color: var(--esmeralda);
    content: "•";
    font-size: 18px;
    line-height: 1.3;
}

.oiind-recebido__passos strong {
    color: var(--coqueiro);
    font-weight: 700;
    word-break: break-all;
}

.oiind-recebido .oiind-btn {
    margin-top: 24px;
}

.oiind-recebido__rodape {
    margin: 16px 0 0;
    color: var(--cinza);
    font-size: 13px;
    line-height: 1.55;
}

.oiind-recebido__rodape a {
    color: var(--esmeralda);
}

@media (max-width: 560px) {
    .oiind-recebido {
        padding: 32px 20px 28px;
    }

    .oiind-recebido__titulo {
        font-size: 23px;
    }
}


/* =====================================================================
   FECHO
   ===================================================================== */

.oiind-fecho {
    padding: 48px 0;
    border-top: 1px solid var(--borda);
    background: #fff;
}

.oiind-fecho__conteudo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.oiind-fecho h2 {
    max-width: 680px;
    font-size: clamp(24px, 3vw, 31px);
}




/* =====================================================================
   RESPONSIVO
   ===================================================================== */

/*
 * Notebook:
 * cobre inclusive 1366px, que era justamente onde o layout ainda
 * ficava largo demais.
 */
@media (min-width: 901px) and (max-width: 1440px) {
    .oiind-formulario-secao {
        padding: 48px 0 58px;
    }

    .oiind-formulario-grid {
        grid-template-columns: 275px minmax(0, 500px);
        gap: 28px;
        max-width: 830px;
    }

    .oiind-formulario-intro {
        position: sticky;
        top: 105px;
        max-width: 275px;
        padding-top: 6px;
    }

    .oiind-formulario-intro h2 {
        font-size: 32px;
        line-height: 1.08;
    }

    .oiind-formulario-intro > p {
        max-width: 270px;
        font-size: 13.5px;
        line-height: 1.6;
    }

    .oiind-checks {
        margin-top: 20px;
    }

    .oiind-checks li {
        padding-block: 6px;
        font-size: 12px;
    }

    .oiind-formulario-card {
        max-width: 500px;
        padding: 22px;
        border-radius: 19px;
    }

    .oiind-formulario-card__cabecalho {
        margin-bottom: 17px;
    }

    .oiind-formulario-card__cabecalho strong {
        font-size: 19px;
    }

    .oiind-form-bloco {
        padding: 15px;
        border-radius: 13px;
    }

    .oiind-form-bloco + .oiind-form-bloco {
        margin-top: 10px;
    }

    .oiind-form-bloco legend {
        margin-bottom: 10px;
        font-size: 13px;
    }

    .oiind-form-bloco legend span {
        width: 25px;
        height: 25px;
        flex-basis: 25px;
        font-size: 10px;
    }

    .oiind-form__duas,
    .oiind-form__tres {
        gap: 9px;
        margin-top: 9px;
    }

    .oiind-campo label {
        font-size: 10.5px;
    }

    .oiind-campo input,
    .oiind-campo select,
    .oiind-campo textarea {
        min-height: 41px;
        padding: 8px 10px;
        font-size: 12.5px;
    }

    .oiind-campo textarea {
        min-height: 96px;
    }

    .oiind-campo-nota {
        font-size: 9px;
    }

    .oiind-opcoes-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .oiind-opcao {
        min-height: 36px;
        padding: 6px 8px;
    }

    .oiind-opcao span {
        font-size: 10px;
    }

    .oiind-rede-linha {
        grid-template-columns:
            minmax(95px, .7fr)
            minmax(145px, 1.3fr)
            minmax(115px, .85fr);
        gap: 7px;
        padding: 8px;
    }

    .oiind-rede-linha .oiind-campo input,
    .oiind-rede-linha .oiind-campo select {
        min-height: 38px;
        font-size: 11.5px;
    }
}


/* tablet */

@media (max-width: 900px) {
    .oiind-hero {
        padding: 56px 0;
    }

    .oiind-hero__grid {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .oiind-hero__conteudo {
        max-width: 720px;
    }

    .oiind-hero__painel {
        max-width: 620px;
    }

    .oiind-duas-colunas {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .oiind-formulario-secao {
        padding: 52px 0 58px;
    }

    .oiind-formulario-grid {
        grid-template-columns: 1fr;
        gap: 25px;
        max-width: 700px;
    }

    .oiind-formulario-intro {
        position: static;
        max-width: 100%;
        padding-top: 0;
    }

    .oiind-formulario-intro > p {
        max-width: 620px;
    }

    .oiind-formulario-card {
        max-width: 620px;
        margin: 0;
    }

    .oiind-opcoes-grid,
    .oiind-opcoes-grid--quatro {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* celular */

@media (max-width: 720px) {
    .oiind-secao {
        padding: 50px 0;
    }

    .oiind-passos {
        grid-template-columns: 1fr;
    }

    .oiind-regra {
        padding: 23px;
    }

    .oiind-regra__grade {
        grid-template-columns: 1fr;
    }

    .oiind-formulario-secao {
        padding: 44px 0 50px;
    }

    .oiind-formulario-card {
        max-width: 100%;
        padding: 20px 17px;
        border-radius: 17px;
    }

    .oiind-form-bloco {
        padding: 16px 14px;
        border-radius: 13px;
    }

    .oiind-form__duas,
    .oiind-form__tres,
    .oiind-rede-linha {
        grid-template-columns: 1fr;
    }

    .oiind-rede-linha {
        gap: 8px;
        padding: 10px;
    }

    .oiind-grupo-opcoes__cabecalho {
        flex-direction: column;
        align-items: flex-start;
        gap: 3px;
    }

    .oiind-fecho__conteudo {
        align-items: flex-start;
        flex-direction: column;
    }
}


@media (max-width: 520px) {
    .oiind-hero {
        padding: 44px 0 48px;
    }

    .oiind-hero h1 {
        font-size: 39px;
    }

    .oiind-hero__acoes {
        display: grid;
        grid-template-columns: 1fr;
    }

    .oiind-hero__acoes .oiind-btn {
        width: 100%;
    }

    .oiind-hero__painel {
        padding: 23px;
        border-radius: 16px;
    }

    .oiind-secao {
        padding: 43px 0;
    }

    .oiind-passo {
        padding: 21px;
    }

    .oiind-regra {
        margin-inline: -2px;
        padding: 20px;
        border-radius: 16px;
    }

    .oiind-formulario-intro h2 {
        font-size: 29px;
        line-height: 1.1;
    }

    .oiind-formulario-card {
        padding: 18px 14px;
    }

    .oiind-formulario-card__cabecalho strong {
        font-size: 18px;
    }

    .oiind-form-bloco {
        margin-inline: -1px;
        padding: 14px 12px;
    }

    .oiind-form-bloco legend {
        font-size: 13px;
    }

    .oiind-opcoes-grid,
    .oiind-opcoes-grid--quatro {
        grid-template-columns: 1fr;
    }

    .oiind-opcao {
        min-height: 40px;
        padding: 7px 9px;
    }

    .oiind-opcao span {
        font-size: 10.5px;
    }

    .oiind-publicos {
        gap: 7px;
    }

    .oiind-publicos span {
        min-height: 36px;
        padding: 6px 11px;
        font-size: 12px;
    }

    .oiind-fecho {
        padding: 40px 0;
    }

    .oiind-fecho .oiind-btn {
        width: 100%;
    }
}


/* =====================================================================
   ACESSIBILIDADE
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
    .oiind-btn,
    .oiind-passo,
    .oiind-opcao {
        transition: none;
    }

    .oiind-btn:hover,
    .oiind-passo:hover,
    .oiind-opcao:hover {
        transform: none;
    }
}