/* ==========================================================================
   page.css · Estilos próprios desta página
   --------------------------------------------------------------------------
   O style.css é o export do Webflow e fica intocado, para poder ser
   reexportado sem perder nada. Tudo o que foi escrito à mão vive aqui.

   Índice
     1. Utilidades
     2. Formulário da lista de espera
     3. Seletor de DDI (país)
     4. Mensagens de sucesso e de erro
     5. Acordeão dos módulos
     6. Responsividade
     7. Acessibilidade e preferências do sistema
   ========================================================================== */


/* ==========================================================================
   1. Utilidades
   ========================================================================== */

/* Rótulo visível apenas para leitores de tela: cada campo do formulário
   precisa de um <label>, mas o design trabalha só com placeholders. */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}


/* ==========================================================================
   2. Formulário da lista de espera
   ========================================================================== */

/* Hierarquia de títulos: o hero virou <h1> e seis títulos de seção viraram
   <h2> (antes eram <div>, o que fazia a página saltar de h1 para os <h3> do
   acordeão). O reset do Webflow dá font-weight e margens aos headings, então
   aqui essas propriedades voltam ao que o layout original tinha. */
h1.text-block-67-p {
    margin-top: 10px;
    margin-bottom: 0;
}

/* Cada regra abaixo só desfaz o que o reset dos headings acrescentaria:
   onde a classe do Webflow já define a propriedade, ela é deixada em paz
   (o seletor h2.classe tem mais especificidade e sobreporia a classe). */

/* Sem margin-bottom: os <div> originais não tinham nenhuma. */
h2.text-block-78,
h2.text-block-81,
h2.text-block-39-2-copy,
h2.text-block-43 {
    margin-bottom: 0;
}

/* Sem margin-top pelo mesmo motivo. */
h2.text-block-73,
h2.text-block-81,
h2.text-block-39-2-copy {
    margin-top: 0;
}

/* Nestes dois o negrito vem só dos <strong> internos, não do bloco todo. */
h2.text-block-69,
h2.text-block-73 {
    font-weight: inherit;
}

/* Única classe da lista que não define line-height: sem isto o bloco herdaria
   os 36px da regra h2 do Webflow e a página ficaria 16px mais alta. */
h2.text-block-43 {
    line-height: inherit;
}

/* Linha DDI + WhatsApp. */
.div-block-149 {
    gap: 10px;
}

/* O campo do telefone é flexível; o do DDI tem largura fixa. */
.div-block-149 .telefone {
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 10px;
}

/* Campo reprovado na validação do app.js. */
.form-block [aria-invalid="true"] {
    border-color: #c0392b;
    box-shadow: 0 0 0 2px #c0392b33;
}

.form-block input:focus,
.form-block select:focus {
    border-color: #ffc76c;
    box-shadow: 0 0 0 3px #ffc76c4d;
    outline: none;
}

/* Enquanto o proxy não responde, o botão fica travado. */
.submit-button[disabled] {
    cursor: wait;
    opacity: .7;
}


/* ==========================================================================
   3. Seletor de DDI (país)
   --------------------------------------------------------------------------
   É um <select> nativo: funciona sem JS extra e, no celular, abre a roleta
   do sistema. O assets/js/ddi-select.js preenche as ~240 opções no formato
   "🇧🇷 Brasil (+55)" e marca o país detectado pelo IP.

   appearance:none remove a seta do sistema; a seta abaixo é um SVG embutido
   em data URI, então não depende de nenhum arquivo externo.
   ========================================================================== */

.ddi-select {
    flex: 0 0 auto;
    width: 210px;
    height: 52px;
    margin-bottom: 10px;
    padding: 8px 34px 8px 12px;
    color: #333;
    font-family: Montserrat, sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    cursor: pointer;

    /* Seta própria, encostada à direita. */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px 8px;

    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* Nomes longos ("Emiratos Árabes Unidos (+971)") são cortados na caixa
       fechada; a lista aberta sempre mostra o nome inteiro. */
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

/* Enquanto o ddi-select.js não respondeu, a única opção é o aviso de
   carregamento: fica em cinza para não parecer um país já escolhido. */
.ddi-select:invalid,
.ddi-select option[value=""] {
    color: #999;
}

/* A lista aberta é desenhada pelo sistema: a cor do texto é forçada aqui
   para os navegadores que herdam o cinza da regra acima. */
.ddi-select option {
    color: #333;
    background-color: #fff;
}


/* ==========================================================================
   4. Mensagens de sucesso e de erro
   ========================================================================== */

.w-form-done,
.w-form-fail {
    border-radius: 8px;
    font-family: Montserrat, sans-serif;
    font-size: 15px;
    line-height: 22px;
}

.w-form-done {
    color: #14532d;
    background-color: #dcfce7;
}

.w-form-fail {
    color: #7f1d1d;
    background-color: #ffdede;
}


/* ==========================================================================
   5. Acordeão dos módulos
   --------------------------------------------------------------------------
   A animação é feita pelo assets/js/app.js (antes eram as interações do
   Webflow). Aqui fica só o foco por teclado.
   ========================================================================== */

.wbs-accordion-3-heading:focus-visible {
    outline: 2px solid #ffc76c;
    outline-offset: 2px;
}


/* ==========================================================================
   6. Responsividade
   ========================================================================== */

/* Tablet e celular grande. */
@media screen and (max-width: 767px) {
    .ddi-select {
        width: 175px;
        font-size: 14px;
    }
}

/* Celular: o hero tem 360px com 10px de padding de cada lado (340px úteis).
   210px de DDI + 10px de gap deixariam menos de 120px para o telefone. */
@media screen and (max-width: 479px) {
    .ddi-select {
        width: 152px;
        padding-right: 28px;
        font-size: 13px;
        background-position: right 9px center;
    }

    /* Título da dobra 2 ("En los próximos 4 meses aprenderás sobre:").
       No desktop a seção tem fundo branco e o título é preto (#000) com o
       destaque em vinho (#4a0303). No celular a seção troca o fundo por um
       SVG marrom-escuro e as duas cores praticamente somem — era isso que
       deixava a frase ilegível, com o trecho em destaque invisível. */
    .text-block-69 {
        color: #fff;
        line-height: 1.25;
    }

    .bold-text-7 {
        color: #ffc76c;
    }

    /* Mesma causa nos cards: o painel é translúcido (#d9d9d966). Sobre o
       branco do desktop ele fica claro; sobre o marrom do celular escurece e
       o texto preto cai para ~2,4:1 de contraste. Painel opaco resolve sem
       mexer na tipografia. */
    .card-dig,
    .card-dig-2 {
        background-color: #d9d9d9;
    }
}

/* Telas bem estreitas (iPhone SE 1ª geração, 320px).
   O export do Webflow foi feito para 360px: várias caixas têm largura fixa
   (360px, 350px, 340px…) e estouram a viewport. max-width limita a largura
   usada sem mexer em nenhum outro breakpoint. */
@media screen and (max-width: 359px) {

    [class*="container-"],
    [class*="div-block-"],
    [class*="text-block-"],
    [class*="image-"],
    [class*="columns-"],
    [class*="button-"],
    [class*="card-dig"],
    [class*="wbs-accordion-3"] {
        max-width: 100% !important;
    }

    /* O DDI ganha a própria linha para o nome do país não ficar cortado. */
    .div-block-149 {
        flex-wrap: wrap;
    }

    .ddi-select,
    .div-block-149 .telefone {
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
    }
}


/* ==========================================================================
   7. Acessibilidade e preferências do sistema
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

        .wbs-accordion-3-content,
    .wbs-accordion-3-icon-minus {
        animation: none !important;
        transition: none !important;
    }
}