/* ═══════════════════════════════════════════════════════════════════════════
   MATRÍCULA — A ARTE É O LAYOUT
   ═══════════════════════════════════════════════════════════════════════════

   EXCEÇÃO DELIBERADA à régua do painel (assets/ondaa-ui.css), que é flat, de
   raio pequeno e de borda reta — certa para o painel, errada para a primeira
   tela que uma família vê. A régua fica intacta e continua valendo para tudo
   o que este arquivo não redefine. Carrega POR ÚLTIMO.

   A ideia: não existe "imagem | formulário". A capa-desktop.webp (1586×992)
   é a página, e o formulário ocupa a área clara que a própria ilustração
   deixa à direita. Medido pixel a pixel na imagem:
     · o desenho (nuvens, logo, frase, pássaros, menino, respingo) termina
       numa CURVA: 21% da largura nas nuvens, 42% na logo, 51,7% no ponto
       mais à direita (pássaros, y≈28%), 46–49% no menino;
     · só nos últimos ~18% da altura a água avança: 59% → 65% → 68%;
     · à direita da curva a imagem é branco #FEFEFE, até a borda — por isso a
       página tem EXATAMENTE essa cor, e a borda da arte não existe na tela.
   A área natural do formulário é esse branco: x ≥ ~54% da arte, eixo óptico
   em ~77% da largura.

   Regras que este arquivo segue: nenhum degradê, nenhuma coluna branca,
   nenhum cartão sólido, nenhuma sombra pesada. A arte é referenciada como
   url('images/…') — relativa a ESTE arquivo (var(--arte) resolveria contra
   assets/ e daria 404).

   Só aparência e composição: nenhum id, classe de estado, campo ou fluxo
   mudou; o matricula.js encontra tudo pelos mesmos seletores.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Paleta ─────────────────────────────────────────────────────────────────
   Creme, branco quebrado e azul muito claro vêm da arte. O azul Ondaa só
   aparece em AÇÃO (Próximo, link do portal, passo atual, foco, seleção);
   o resto é azul-acinzentado. Contrastes (WCAG): texto 12:1 · rótulo 7,9:1 ·
   apoio 5,0:1 · branco sobre a ação 5,4:1 · ação sobre o pálido 4,9:1. */
:root{
  --m-papel:   #FEFEFE;   /* o branco da própria arte — cor da página */
  --m-creme:   #FDFCF5;   /* o creme da arte, atrás da logo e da frase */
  --m-tinta:   #1D3553;   /* títulos: navy acinzentado, mais calmo que o da arte */
  --m-texto:   #1F3552;
  --m-rotulo:  #3C5372;
  --m-apoio:   #5A6E87;
  --m-icone:   #8A9BB0;   /* ícones decorativos (o rótulo carrega o sentido) */
  --m-acao:    #1E6FA8;   /* azul Ondaa */
  --m-acao-2:  #185D8E;
  --m-foco:    rgba(30,111,168,.16);
  --m-palido:  #F1F7FB;   /* azul muito claro: seleção, passo feito */
  --m-sel:     rgba(30,111,168,.42);   /* borda de algo escolhido */
  --m-linha:   rgba(20,58,105,.12);    /* borda de campo, quase nada */
  --m-linha-2: rgba(20,58,105,.20);    /* hover */
  --m-campo:   rgba(255,255,255,.55);

  /* Reapontar a régua: todos os estados de seleção, foco e ação da ficha
     (ondaa-ui.css e <style> da página) leem estes tokens. */
  --on-primary:        var(--m-acao);
  --on-primary-hover:  var(--m-acao-2);
  --on-focus-ring:     var(--m-acao);
  --on-primary-subtle: var(--m-palido);
  --on-bg:             var(--m-papel);
  --on-surface:        #EDF1F5;
  --on-border:         var(--m-linha);
  --on-border-strong:  var(--m-linha-2);
  --on-text:           var(--m-texto);
  --on-text-muted:     var(--m-apoio);
  --on-placeholder:    #607189;           /* 4,8:1 */
  --on-apoio:          var(--m-apoio);
  --ciano-ring:        var(--m-foco);
  --ciano-light:       var(--m-palido);
  --text-secondary:    var(--m-rotulo);
  --text-placeholder:  #607189;
}

/* ═══ 1. FUNDO ══════════════════════════════════════════════════════════════
   O #waveCanvas repintava a tela inteira com um degradê cinza-azulado e ondas
   a cada quadro. A água desta página é a da ilustração. (O laço de animação
   do matricula.js continua rodando com o canvas oculto — pendência de JS.) */
#waveCanvas{display:none !important;}
html,body{background:var(--m-papel);}
body{background-image:none;color:var(--m-texto);}
/* Tela de carregamento: mesmo papel, sem o degradê do estilo inline. */
#gate{background:var(--m-papel) !important;}

/* ═══ 2. SUPERFÍCIE DO FORMULÁRIO ══════════════════════════════════════════
   Não é um cartão. Por padrão, NENHUM fundo: o formulário está escrito
   direto no papel. Só no desktop, onde ele pode passar por cima da água ao
   rolar, ganha um véu (ver COMPOSIÇÃO). */
.card,
.container > .card{
  background:transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  border:0;border-radius:0;box-shadow:none;
}
.card::before{display:none;}

/* ═══ 3. CABEÇALHO ══════════════════════════════════════════════════════════
   Logo, nome, cidade e o atalho do portal ficam na mesma área clara do
   formulário: sem faixa, sem barra, sem caixa. A logo oficial continua numa
   bandeja quadrada pequena, `object-fit:contain` com respiro (vem da régua),
   nunca cortada nem deformada; sem logo, as iniciais no mesmo desenho. */
.header{background:transparent;border:0;box-shadow:none;}
.marca-escola,.marca-iniciais{
  border-radius:12px;
  background:rgba(255,255,255,.7);
  border:1px solid rgba(20,58,105,.07);
}
.marca-iniciais{
  background:var(--m-palido);border-color:transparent;
  color:var(--m-acao);letter-spacing:.02em;
}
.marca-nome{color:var(--m-tinta);font-size:16.5px;letter-spacing:-.015em;}
.marca-cidade{color:var(--m-apoio);}
.topo-portal-txt{color:var(--m-apoio);}
.btn-portal{color:var(--m-acao);border-radius:10px;font-weight:600;padding-inline:10px;}
.btn-portal:hover{background:rgba(30,111,168,.06);border-color:transparent;}

/* ═══ 4. PROGRESSO ══════════════════════════════════════════════════════════
   Presença mínima: trilha de 1px quase invisível, pontos claros sem
   contorno, números e rótulos pequenos. O único elemento forte é o passo
   atual, em azul Ondaa. Preenchimento em cor sólida (sem degradê). */
.progress-wrap{margin-bottom:8px;}
.prog-header{margin-bottom:0;}
.prog-label{font-size:10.5px;font-weight:500;letter-spacing:.12em;color:var(--m-apoio);}
.prog-counter{font-size:11.5px;font-weight:400;color:var(--m-apoio);}
.prog-counter .pc{color:var(--m-texto);font-weight:600;}
.prog-track{height:1px;background:#E6EBF1;}
.prog-fill{background:rgba(30,111,168,.45);}
/* -(11 + 0,5): metade do ponto + metade da trilha, para a trilha passar
   pelo centro dos pontos. */
.steps-row{margin-top:-11.5px;}
.step-item{gap:7px;}
.step-dot,
.step-dot.done{
  width:22px;height:22px;border:0;
  background:#F0F3F7;color:var(--m-apoio);
  font-size:10.5px;font-weight:500;
  box-shadow:0 0 0 3px var(--m-papel);
}
.step-dot.done{background:var(--m-palido);color:var(--m-acao);font-size:0;}
.step-dot.done::after{font-size:10.5px;color:var(--m-acao);}
.step-dot.active{
  background:var(--m-acao);color:#fff;font-weight:600;
  box-shadow:0 0 0 3px var(--m-papel);
}
.step-lbl{font-size:10.5px;font-weight:400;color:var(--m-apoio);}
.step-lbl.done{color:var(--m-apoio);}
.step-lbl.active{color:var(--m-acao);font-weight:600;}

/* ═══ 5. HIERARQUIA DA ETAPA ═══════════════════════════════════════════════ */
.step-panel>h2{
  font-size:22px;font-weight:700;color:var(--m-tinta);
  letter-spacing:-.02em;line-height:1.22;margin-bottom:6px;
}
.step-panel>.desc{font-size:14px;color:var(--m-apoio);line-height:1.55;margin-bottom:26px;}
/* Sem descrição, o título ganha respiro antes dos campos. */
.step-panel>h2+:not(.desc){margin-top:18px;}
.sec-lbl,.group-label{font-size:10.5px;font-weight:600;letter-spacing:.12em;color:var(--m-apoio);}
/* Sem filetes: quem separa as seções é o espaço e o micro-rótulo. O
   elemento continua lá (mesmo respiro), só não desenha linha. */
.sec-sep,.group-sep,.group-label-line{background:transparent;margin:20px 0;}

/* ═══ 6. CAMPOS ═════════════════════════════════════════════════════════════
   Branco a 55%, borda muito discreta, sem sombra. Foco = borda azul + anel
   de contorno (outline — é acessibilidade, não sombra). */
.form-group{margin-bottom:18px;}
.form-group>label{
  font-size:12px;font-weight:600;color:var(--m-rotulo);
  letter-spacing:.005em;margin-bottom:7px;
}
.form-group label .req,.req{color:var(--m-acao);font-weight:600;}
.card .input-wrap input,.card .input-wrap select,.card .input-wrap-ta textarea,
.card .form-group input,.card .form-group select,.card .form-group textarea{
  background-color:var(--m-campo);
  border:1px solid var(--m-linha);
  border-radius:12px;
  box-shadow:none;
  color:var(--m-texto);
  font-size:14.5px;
  min-height:48px;
  padding-top:12px;padding-bottom:12px;
}
.card .form-group textarea{min-height:96px;}
.card .input-wrap input:hover,.card .input-wrap select:hover,.card .input-wrap-ta textarea:hover,
.card .form-group input:hover,.card .form-group select:hover,.card .form-group textarea:hover{
  border-color:var(--m-linha-2);background-color:rgba(255,255,255,.8);
}
.card .input-wrap input:focus,.card .input-wrap select:focus,.card .input-wrap-ta textarea:focus,
.card .form-group input:focus,.card .form-group select:focus,.card .form-group textarea:focus{
  border-color:var(--m-acao);background-color:#fff;
  box-shadow:none;outline:3px solid var(--m-foco);outline-offset:0;
}
/* A página declara `font-family:'Inter',inherit` nos campos — CSS inválido,
   descartado inteiro: o <textarea> e o campo de data caíam em monoespaçada. */
.card input,.card select,.card textarea,.card button{font-family:inherit;}
/* Campo válido: a página força borda verde-escura (!important) em cada
   campo preenchido. O ✓ já avisa; a borda só acompanha, bem suave. */
.card .input-wrap.valid input,.card .input-wrap.valid select,
.card .input-wrap-ta.valid textarea{border-color:rgba(34,139,84,.32) !important;}
.field-icon{color:var(--m-icone);}
.input-wrap:focus-within .field-icon{color:var(--m-acao);}
.card .form-group select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238A9BB0' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;
}

/* ═══ 7. ESCOLHAS ═══════════════════════════════════════════════════════════
   Mesma pele dos campos. Escolhido = azul muito claro + borda azul suave —
   nunca preenchimento chapado; o único azul cheio da tela é o "Próximo". */
.mod-opt,.freq-btn,.plan-card,.dia-btn,.hora-btn,.check-row{
  background:var(--m-campo);border:1px solid var(--m-linha);box-shadow:none;
}
.mod-opt,.freq-btn,.plan-card,.check-row{border-radius:14px;}
.dia-btn,.hora-btn{border-radius:99px;color:var(--m-rotulo);}
.mod-opt:hover,.freq-btn:hover,.plan-card:hover,.dia-btn:hover,.hora-btn:hover,.check-row:hover{
  border-color:var(--m-linha-2);background:rgba(255,255,255,.8);box-shadow:none;
}
.mod-opt[aria-checked="true"],.freq-btn.active,.plan-card.sel,.dia-btn.sel,.hora-btn.sel{
  background:var(--m-palido);border-color:var(--m-sel);color:var(--m-acao);
  box-shadow:none;font-weight:600;
}
.mod-opt .mo-t{color:var(--m-texto);font-weight:600;}
.mod-opt[aria-checked="true"] .mo-t{color:var(--m-acao);}
.mod-opt .mo-r,.plan-radio{border-color:var(--m-linha-2);}
.plan-name,.price-val{color:var(--m-texto);}
.plan-card.sel .plan-name,.plan-card.sel .price-val{color:var(--m-acao);}
.rec-badge{background:var(--m-papel);color:var(--m-acao);border:1px solid var(--m-sel);}
.check-box{border-color:var(--m-linha-2);border-radius:6px;}
.check-row input:checked ~ .check-box{background:var(--m-acao);border-color:var(--m-acao);}
.check-txt{color:var(--m-rotulo);}
.check-txt strong{color:var(--m-texto);}

/* Avisos, resumo, assinatura, LGPD: superfícies irmãs, sem barra lateral e
   sem filetes internos fortes. */
.aviso,.sum-box{
  background:rgba(241,247,251,.7);
  border:1px solid transparent;border-left:1px solid transparent;
  border-radius:14px;color:var(--m-rotulo);
}
.aviso.resumo{background:rgba(255,255,255,.6);border-color:var(--m-linha);}
.aviso strong,.resumo-val{color:var(--m-tinta);}
.sum-sec{background:rgba(241,247,251,.9);color:var(--m-acao);border-color:transparent;}
.sum-row{border-bottom-color:rgba(20,58,105,.05);}
.sum-val{color:var(--m-texto);}
.sig-wrap{background:rgba(255,255,255,.7);border:1px solid var(--m-linha);border-radius:14px;}
.sig-wrap:focus-within,.sig-wrap:active{border-color:var(--m-acao);}
#lgpdTexto{background:rgba(255,255,255,.7);border:1px solid var(--m-linha);border-radius:14px;color:var(--m-rotulo);}
/* O esmaecimento do texto da LGPD era um degradê. Sai: o aviso escrito
   "role para ler" (#lgpdRole) continua dizendo que o texto segue. */
#lgpdFade{display:none;}
#lgpdRole{color:var(--m-acao);}
#lgpdRodape{color:var(--m-apoio);}

/* ═══ 8. BOTÕES ═════════════════════════════════════════════════════════════
   "Próximo" em azul Ondaa, cor sólida, sem sombra. "Voltar" é texto com
   uma superfície quase invisível. Sem filete acima: o espaço separa. */
.form-nav{border-top:0;padding-top:0;margin-top:30px;gap:12px;}
.btn-submit,.btn-primary{
  min-height:50px;border-radius:14px;
  background:var(--m-acao);border:1px solid var(--m-acao);
  font-size:15px;font-weight:600;letter-spacing:0;box-shadow:none;
}
.btn-submit:hover:not(:disabled),.btn-primary:hover:not(:disabled){
  background:var(--m-acao-2);border-color:var(--m-acao-2);
}
.btn-submit:disabled{background:#BCCAD8;border-color:#BCCAD8;}
.btn-back,.btn-ghost{
  min-height:50px;border-radius:14px;
  background:rgba(20,58,105,.035);border:1px solid transparent;
  color:var(--m-rotulo);font-weight:600;box-shadow:none;
}
.btn-back:hover,.btn-ghost:hover{background:rgba(20,58,105,.06);border-color:transparent;color:var(--m-tinta);}
.btn-sig-clear{color:var(--m-apoio);}
/* "Limpar assinatura" tinha 27px de altura — pequeno demais para o dedo
   (mínimo confortável ~40px). Mesma aparência de link, área maior. */
.btn-sig-clear{min-height:40px;padding:8px 12px;border-radius:10px;}
/* Em tela de toque (celular, iPad em qualquer orientação), campo com texto
   abaixo de 16px faz o Safari do iOS dar zoom ao tocar nele e a página
   "pula". Com mouse nada muda — o desktop fica exatamente como está. */
@media (pointer:coarse){
  .card .input-wrap input,.card .input-wrap select,.card .input-wrap-ta textarea,
  .card .form-group input,.card .form-group select,.card .form-group textarea{font-size:16px;}
}

/* ═══ 9. RODAPÉ E MODAL ═════════════════════════════════════════════════════ */
footer{color:var(--m-apoio);font-size:11px;letter-spacing:.04em;}
.modal-content{border-radius:22px;border:1px solid var(--m-linha);box-shadow:0 24px 60px -40px rgba(20,58,105,.3);}
.modal-content.sucesso-modal::before{background:var(--success, #16A34A);}
.modal-content.erro-modal::before{background:var(--error, #DC2626);}
.modal h3{color:var(--m-tinta);}
.modal button{background:var(--m-acao);border-color:var(--m-acao);border-radius:14px;box-shadow:none;}
.modal button:hover{background:var(--m-acao-2);border-color:var(--m-acao-2);}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPOSIÇÃO
   Dois modos que se complementam EXATAMENTE (o segundo é a negação do
   primeiro), para nenhuma largura cair entre as regras antigas da página.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── A. A ARTE COMO TELA (≥1000px e janela no mínimo 4:3) ───────────────────
   A arte ocupa 100% da ALTURA da janela, sempre inteira na vertical (logo,
   frase, menino e água nunca cortados), presa à esquerda e fixa: ela é a
   tela, e não cresce com o formulário. O que sobra à direita é o próprio
   branco dela (a página tem a mesma cor, então não há emenda).
   Nada de `cover`: numa janela mais larga que 1,6:1 ele cortaria o topo e a
   água; numa mais estreita, o formulário não caberia no branco.

   A coluna é CALCULADA sobre a arte, não sobre a janela:
     --arte-w   largura da arte na tela (altura × 1,5988);
     --recuo    quanto a arte anda para a esquerda quando falta lugar (até
                8% dela — o menino começa em 9,5%, então ele fica inteiro);
     --livre-e  onde a área clara começa na tela: 54% da arte + 24px;
     --livre-d  onde ela termina: a borda da janela, ou pouco depois do fim
                da arte (numa janela muito larga, o formulário não foge para
                longe da ilustração);
     a coluna (até 540px) fica CENTRADA nessa área — o eixo cai perto dos
     77% da arte, o centro óptico do branco.
   O formulário rola por cima da arte parada; quando passa sobre a água do
   pé (só nos últimos ~18% da altura), o véu translúcido mantém a leitura.
   Sobre o branco o véu é invisível. */
/* 30/09/2026 — arte nova: ficha-matricula-desktop.webp (1660×947, 1,7529:1),
   SÓ ilustração (logo e frase vêm em HTML: .arte-marca). Medido nela:
   céu creme de ~8% a ~90% da largura até 45% da altura; o menino ocupa
   9–39% da largura (touca a 43% da altura); dali para baixo é água de borda
   a borda, e a borda direita é nuvem azul (não branco). Por isso, diferente
   da arte anterior, ela COBRE a janela inteira (nunca sobra faixa lisa à
   direita, que faria emenda com a nuvem): altura = o maior entre 100vh e a
   largura/1,7529, presa embaixo (a água nunca é cortada; em janela muito
   larga sai só céu do topo) e recuada à esquerda no máximo 6% (as gotas do
   respingo começam em ~2,5%, o menino em 9%). */
@media (min-width:1000px) and (min-aspect-ratio:4/3){
  :root{
    --arte-h:  max(100vh, calc(100vw / 1.7529));
    --arte-w:  calc(var(--arte-h) * 1.7529);
    --arte-y:  calc(100vh - var(--arte-h));   /* topo da arte (≤ 0) */
    --recuo:   clamp(0px, calc(var(--arte-w) - 100vw), calc(var(--arte-w) * .06));
    --livre-e: calc(var(--arte-w) * .44 - var(--recuo) + 16px);
    --livre-d: calc(100vw - 24px);
    --col-w:   min(540px, calc(var(--livre-d) - var(--livre-e)));
    --col-x:   calc((var(--livre-e) + var(--livre-d) - var(--col-w)) / 2);
  }
  body{
    background:var(--m-papel) url('images/ficha-matricula-desktop.webp')
      calc(var(--recuo) * -1) 100% / auto var(--arte-h) no-repeat fixed;
    padding-bottom:0;
  }
  /* Marca sobre o céu, presa à arte (mesmas coordenadas dela): logo com
     eixo em ~28% da largura da arte e topo em 8% da altura; a frase logo
     abaixo, terminando antes da touca (43%). Tamanhos em fração da arte:
     acompanham a ilustração em qualquer janela. */
  .arte-marca{
    display:block;position:fixed;inset:0;z-index:1;pointer-events:none;
    --ax:calc(var(--recuo) * -1);--ay:var(--arte-y);
    --aw:var(--arte-w);--ah:var(--arte-h);
  }
  .container{position:relative;z-index:2;}
  .arte-mobile{display:none;}
  .marca-ondaa,.marca-divisor{display:none !important;}

  .container{
    width:var(--col-w);max-width:none;
    margin:0 0 0 var(--col-x);
    padding:0 0 48px;
    container-type:inline-size;
  }
  .header,.container > .card,footer{max-width:none;width:auto;margin-inline:0;}
  .header{padding:clamp(24px, 5.5vh, 56px) 24px 18px;margin:0;text-align:left;}
  /* Cabeçalho numa linha só: marca à esquerda, atalho do portal à direita.
     Quem cede espaço é o nome (duas linhas, no máximo), nunca o atalho. */
  .topo{flex-wrap:nowrap;}
  .marca{flex:1 1 auto;min-width:0;}
  .topo-portal{flex:0 0 auto;}
  .marca-nome{white-space:normal;line-height:1.22;
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;}
  /* O véu: branco a 58% e um desfoque leve. Sobre o branco da arte ele
     não aparece; sobre a água vira um azul muito claro. Sem sombra, sem
     borda. */
  /* Véu mais branco que na arte anterior: nesta, a metade de baixo da
     coluna passa sobre nuvem azul e água (antes era quase tudo branco). */
  .container > .card{
    background:rgba(255,255,255,.86);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    border:0;
    border-radius:24px;
    padding:22px 24px 28px;
    container-type:inline-size;
  }
  footer{color:var(--m-apoio);padding:18px 24px 0;text-align:left;justify-content:flex-start;}
}
/* Coluna estreita (medida na própria coluna, não na janela): "Já tem
   cadastro?" empurraria o atalho para outra linha; o link sozinho já diz o
   que faz. Só vale no modo A — é o único em que .container é um container. */
@container (max-width:500px){
  .topo-portal-txt{display:none;}
}
/* A coluna pode ter só ~400px (tablet deitado, 1024×768): as grades da
   página seguem a largura da JANELA e ficariam espremidas. Aqui elas seguem
   a largura do próprio formulário. */
@container (max-width:400px){
  .mod-grid{grid-template-columns:1fr;}
  .freq-row{grid-template-columns:1fr 1fr;}
}

/* ── B. TABLET EM PÉ E CELULAR (o resto) ────────────────────────────────────
   Quando a janela não comporta o formulário dentro da arte, a arte vem
   primeiro e o formulário ganha a largura toda.

   A arte é um <picture class="arte-mobile"> no HTML, não um fundo do CSS:
     · ≥768px  → sempre a capa-desktop.webp, recortada (B1 abaixo);
     · <768px  → a capa-mobile.webp, QUANDO a linha <source> do HTML estiver
                 ativa (B3); sem ela, a capa-desktop.webp recortada (B2).
   O recorte da arte desktop é feito com o <img> maior que a moldura
   (overflow:hidden) — a imagem nunca é esticada: só a altura é fixada e a
   largura segue a proporção natural. Sem degradê em nenhum dos modos. */
@media not all and (min-width:1000px) and (min-aspect-ratio:4/3){
  body{background:var(--m-papel) none;}
  .container{
    width:auto;max-width:640px;
    margin:0 auto;padding:0 20px 32px;
  }
  .header,.card,.container > .card,footer{max-width:none;}
  .marca-ondaa,.marca-divisor{display:none !important;}

  /* Moldura da arte: de borda a borda. --arte-h é a altura visível;
     --arte-escala (>1) amplia a imagem além da moldura e --arte-topo diz
     quanto do alto dela fica escondido (fração da altura da imagem). */
  .arte-mobile{
    display:block;position:relative;
    width:100vw;margin:0 0 0 calc(50% - 50vw);
    height:var(--arte-h);aspect-ratio:auto;overflow:hidden;
    background:none;   /* a página pintava a arte também como fundo daqui */
    -webkit-mask-image:none;mask-image:none;
  }
  .arte-mobile > img{
    display:block;max-width:none;width:auto;
    height:calc(var(--arte-h) * var(--arte-escala));
    margin-top:calc(var(--arte-h) * var(--arte-escala) * var(--arte-topo) * -1);
  }
  /* A "folha": o cabeçalho abre o papel, de ponta a ponta, por cima da
     água do pé da arte desktop. Corte de forma — sem linha, sem degradê. */
  .header{
    position:relative;z-index:1;
    width:100vw;margin:-40px 0 0 calc(50% - 50vw);
    padding:26px calc((100vw - min(100vw, 640px)) / 2 + 20px) 16px;
    background:var(--m-papel);
    border-radius:28px 28px 0 0;
    text-align:left;
  }
  .card,.container > .card{padding:10px 0 8px;}
  footer{padding-top:14px;}

  /* B1. TABLET EM PÉ (768px até o desktop): arte desktop, y de 5% a 95%;
     a largura mostrada vem da altura (~73% da arte em 768px): logo, frase,
     menino e o começo da curva branca. Teto de 58% da tela para o
     formulário começar na primeira dobra. */
  @media (min-width:768px){
    .arte-mobile,.arte-marca{--arte-h:min(80vw, 58vh);--arte-escala:1.112;--arte-topo:.05;}
  }

  /* ── CELULAR (<768px): o formulário é a prioridade ─────────────────────
     Largura quase total (18px de margem), campos de 48px com texto de 16px
     (abaixo disso o iOS dá zoom ao tocar no campo), rótulos de 13px,
     "Próximo" de 52px, stepper compacto, espaço entre os campos. */
  @media (max-width:767px){
    .container{padding:0 18px 28px;}
    /* Recuo lateral = o do formulário: entre 641 e 767px o .container
       para em 640px e fica centrado; 18px fixos desalinhariam a marca. */
    .header{
      padding:22px calc((100vw - min(100vw, 640px)) / 2 + 18px) 12px;
      border-radius:24px 24px 0 0;margin-top:-24px;
    }
    .progress-wrap{margin-bottom:6px;}
    .prog-header{margin-bottom:0;}
    .step-panel>h2{font-size:20px;}
    .step-panel>h2+:not(.desc){margin-top:16px;}
    .step-panel>.desc{font-size:14px;margin-bottom:22px;}
    .form-group{margin-bottom:20px;}
    .form-group>label{font-size:13px;}
    .card .input-wrap input,.card .input-wrap select,.card .input-wrap-ta textarea,
    .card .form-group input,.card .form-group select,.card .form-group textarea{
      font-size:16px;min-height:50px;
    }
    .form-nav{margin-top:28px;}
    .btn-submit,.btn-primary,.btn-back,.btn-ghost{min-height:52px;}

    /* B2. FALLBACK (sem capa-mobile.webp): a arte desktop vira uma faixa
       de identidade — no máximo 72% da largura e 38% da altura da tela
       (antes: 98% da largura, quase metade da tela). Recorte de y 4% a 95%:
       logo, frase e menino; a largura mostrada fica em ~79% da arte. As
       mãos do menino terminam ~13px acima da folha em 390px. */
    .arte-mobile,.arte-marca{--arte-h:min(72vw, 38vh);--arte-escala:1.099;--arte-topo:.04;}
    /* Celular DEITADO (arte desktop, horizontal): com o teto de 38vh a
       arte ficava um selo de ~240px no canto. Aqui usa o recorte do
       tablet — a arte ocupa a metade esquerda e a metade direita é o
       próprio branco dela, que continua na cor da página sem emenda. */
    @media (orientation:landscape){
      .arte-mobile,.arte-marca{--arte-h:min(80vw, 58vh);--arte-escala:1.112;--arte-topo:.05;}
    }

    /* B3. ARTE MOBILE PRÓPRIA (<source> ativo no HTML), celular EM PÉ: a
       ilustração vertical é o fundo do alto da página, inteira, na largura
       da tela e na proporção natural — nada de recorte. Ela mesma pinta a
       transição para o papel (#FEFEFE), então aqui não há folha: o
       cabeçalho começa onde a zona limpa da arte começa, e o formulário
       segue sobre ela.
       --m-arte-livre = onde a zona limpa começa, em fração da LARGURA da
       arte. Medido na capa-mobile.webp (941×1672): a onda branca que fecha
       a água termina em 49% da altura = 0,87 × a largura; dali para baixo
       é papel puro (#FEFDFD). É o único número que depende do desenho: se
       a arte for trocada, muda só ele (e width/height no HTML).
       A condição aqui é a MESMA do <source> no HTML (largura <768px e tela
       em pé). Tem de ser: o :has(> source) é verdadeiro mesmo quando o
       navegador não escolheu o <source>. Celular DEITADO usa a arte desktop
       (B2) — ela é horizontal, e a vertical numa tela de 360px de altura
       mostraria só um pedaço do menino. */
    @media (orientation:portrait){
      .arte-mobile:has(> source){
        position:absolute;top:0;left:calc(50% - 50vw);z-index:-1;
        margin:0;height:auto;overflow:visible;
      }
      .arte-mobile:has(> source) > img{width:100%;height:auto;margin:0;}
      /* PADDING, não margin: a margem do cabeçalho "vazaria" pelo topo do
         .container (colapso de margens) e levaria a arte junto para baixo. */
      .container:has(> .arte-mobile > source) > .header{
        width:auto;margin:0;
        padding:calc(100vw * var(--m-arte-livre)) 0 12px;
        background:transparent;border-radius:0;
      }
    }

    /* B4. ARTE MOBILE EM TELA MAIS LARGA (481–767px em pé: celulares
       grandes, tablets pequenos). Inteira na largura, a arte cresce junto
       com a tela: em 700px o cabeçalho só começaria em 609px (quase 70%
       da primeira tela). Aqui ela vira uma faixa: continua na largura toda
       (as bordas da arte têm céu e água — encolher e centralizar criaria
       arestas), mas mostra só de 7% a 42,5% da altura — logo, frase e o
       menino até as mãos (que terminam em 39%) — e a folha do formulário
       sobe 24px sobre a água, como no fallback.
       0,631 = 0,355 × 1,7768 (a proporção da arte). Até 480px a arte
       inteira ainda deixa o formulário começar em ~40–49% da tela; acima,
       não. */
    @media (min-width:481px) and (orientation:portrait){
      .arte-mobile:has(> source){
        position:relative;left:auto;z-index:auto;
        margin:0 0 0 calc(50% - 50vw);
        height:63.1vw;overflow:hidden;
      }
      .arte-mobile:has(> source) > img{margin-top:calc(-100vw * 1.7768 * .07);}
      .container:has(> .arte-mobile > source) > .header{
        width:100vw;margin:-24px 0 0 calc(50% - 50vw);
        padding:22px calc((100vw - min(100vw, 640px)) / 2 + 18px) 12px;
        background:var(--m-papel);border-radius:24px 24px 0 0;
      }
    }
  }
}
/* Arte mobile própria — ver B3 e o <picture> no HTML.
   A atual (941×1672, 9:16): ilustração de 0 a ~47% da altura, onda branca
   de transição até 49%, papel puro até o fim. Para uma próxima versão:
   manter 9:16, a transição pintada NA ARTE (nunca no CSS), o papel em
   #FEFEFE e o arquivo leve (WebP q≈80: ~40–60 KB nessa resolução). */
:root{--m-arte-livre:.87;}

/* ═══════════════════════════════════════════════════════════════════════════
   MARCA SOBRE A ARTE (.arte-marca) — 30/09/2026
   A ficha-matricula-desktop.webp é só ilustração; a logo do Ondaa (o mesmo
   ondaa-logo-azul.svg do Portal) e a frase são HTML por cima dela. Tudo é
   medido em fração da ARTE na tela — --ax/--ay (canto superior esquerdo),
   --aw/--ah (largura/altura) —, então logo e frase acompanham a ilustração
   em qualquer janela e em qualquer recorte:
     · logo com eixo em 28% da largura da arte e topo em 8% da altura;
     · frase logo abaixo, dentro do céu, terminando antes da touca (43%).
   Modo A (desktop) define as quatro medidas a partir da arte fixa do fundo;
   modo B (tablet / celular deitado) a partir do recorte do <picture>.
   Celular em pé usa a capa-mobile.webp, que já traz logo e frase: some.
   ═══════════════════════════════════════════════════════════════════════════ */
.arte-marca-in{
  position:absolute;
  left:calc(var(--ax) + var(--aw) * .28);
  top:calc(var(--ay) + var(--ah) * .08);
  width:calc(var(--aw) * .36);
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.arte-marca-logo{display:block;width:calc(var(--aw) * .205);height:auto;}
.arte-marca-frase{
  position:relative;margin:calc(var(--aw) * .026) 0 0;
  font-family:'Inter',system-ui,sans-serif;font-weight:800;
  font-size:calc(var(--aw) * .0335);line-height:1.1;letter-spacing:-.025em;
  color:#0B2D62;
}
.arte-marca-frase > span{display:block;}
.arte-marca-frase em{font-style:normal;color:#0C97DE;}
/* Coração em traço no fim da frase — o mesmo gesto do login do Portal. */
.arte-marca-coracao{position:absolute;right:-1.15em;top:.12em;width:1.05em;height:auto;color:#18A5EA;overflow:visible;}

/* Modo B: a marca é uma régua de altura zero logo abaixo do <picture> e
   sobe sobre ele. Medidas da arte recortada: altura da imagem = --arte-h ×
   --arte-escala; o topo dela fica --arte-topo acima da moldura. */
@media not all and (min-width:1000px) and (min-aspect-ratio:4/3){
  .arte-marca{
    display:block;position:relative;z-index:2;pointer-events:none;
    height:0;width:100vw;margin-left:calc(50% - 50vw);
    --ah:calc(var(--arte-h) * var(--arte-escala));
    --aw:calc(var(--ah) * 1.7529);
    --ax:0px;
    --ay:calc(var(--arte-h) * -1 - var(--ah) * var(--arte-topo));
  }
  /* Celular DEITADO (tela baixa): a arte recortada pela altura ficava
     estreita (~440px de 844) e, como a borda direita desta ilustração é
     nuvem azul e não branco, terminava num corte seco no meio da tela.
     Aqui ela ocupa a LARGURA toda e mostra só a faixa do céu (0 a 47% da
     altura): logo e frase sobre o creme, sem emenda, e o formulário começa
     logo abaixo (~225px numa tela de 844). A imagem continua na proporção
     natural: altura = largura / 1,7529; a moldura mostra 47% dela. */
  @media (orientation:landscape) and (max-height:600px){
    .arte-mobile,.arte-marca{--arte-h:calc(100vw / 1.7529 * .47);--arte-escala:2.1277;--arte-topo:0;}
  }
  /* Celular em pé: a arte vertical já tem logo e frase (mesma condição do
     <source> no HTML). */
  @media (max-width:767px) and (orientation:portrait){
    .arte-marca{display:none;}
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   REFINAMENTO DO FORMULÁRIO NO DESKTOP (modo A) — 30/09/2026
   O formulário ganha presença equivalente à arte: coluna de até 580px
   (≈40% da janela), um ÚNICO painel de vidro claro atrás de toda a área da
   matrícula (progresso + etapa + botões) e campos brancos, sólidos, dentro
   dele — vidro só no painel, nunca nos campos. O cabeçalho da escola fica
   fora do vidro, direto sobre a arte.
   Vidro: branco a 72%, desfoque de 22px (a arte continua aparecendo atrás,
   só suavizada), filete branco de 1px e uma sombra longa e muito fraca —
   sem brilho, sem degradê. Tudo em clamp()/vw: nada preso a uma resolução.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width:1000px) and (min-aspect-ratio:4/3){
  :root{
    --livre-d: calc(100vw - clamp(32px, 5vw, 96px));
    --col-w:   min(clamp(480px, 40vw, 580px), calc(var(--livre-d) - var(--livre-e)));
  }
  .header{padding:clamp(28px, 6.5vh, 72px) 8px clamp(16px, 2.4vh, 24px);}

  .container > .card{
    background:rgba(255,255,255,.72);
    -webkit-backdrop-filter:blur(22px) saturate(1.1);
    backdrop-filter:blur(22px) saturate(1.1);
    border:1px solid rgba(255,255,255,.65);
    border-radius:clamp(24px, 2vw, 30px);
    box-shadow:0 1px 2px rgba(15,23,42,.04), 0 30px 60px -40px rgba(11,79,132,.30);
    padding:clamp(28px, 2.6vw, 40px) clamp(28px, 2.8vw, 40px) clamp(30px, 2.8vw, 40px);
  }

  /* Progresso: rótulo discreto, com respiro, integrado ao topo do painel. */
  .progress-wrap{margin:0 0 clamp(10px, 1.4vh, 14px);}
  .prog-label{font-size:11px;letter-spacing:.14em;color:var(--m-rotulo);}

  /* "Dados do aluno" (o título da etapa) é o título principal. */
  .step-panel>h2{font-size:clamp(24px, 1.9vw, 28px);line-height:1.18;margin-bottom:6px;}
  .step-panel>h2+:not(.desc){margin-top:clamp(20px, 2.6vh, 26px);}

  /* Campos confortáveis: brancos e sólidos sobre o vidro (contraste total),
     um pouco mais altos, com mais espaço entre eles. */
  .form-group{margin-bottom:clamp(18px, 2.4vh, 22px);}
  .form-group>label{font-size:12.5px;margin-bottom:8px;}
  .card .input-wrap input,.card .input-wrap select,.card .input-wrap-ta textarea,
  .card .form-group input,.card .form-group select,.card .form-group textarea{
    background-color:#fff;min-height:52px;font-size:15px;border-radius:14px;
  }
  .card .input-wrap input:hover,.card .input-wrap select:hover,.card .input-wrap-ta textarea:hover,
  .card .form-group input:hover,.card .form-group select:hover,.card .form-group textarea:hover{background-color:#fff;}
  .mod-opt{min-height:52px;background:#fff;}

  /* Próximo: 54px, mesmo raio dos campos, azul Ondaa sólido. */
  .form-nav{margin-top:clamp(26px, 3.4vh, 34px);}
  .btn-submit,.btn-primary,.btn-back,.btn-ghost{min-height:54px;border-radius:14px;font-size:15.5px;}

  footer{padding:16px 8px 0;}
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRELOADER — o mesmo do Painel (css/style.css, bloco "PRELOADER")
   Branco sólido em tela inteira, acima de tudo (inclusive do #gate), com o
   traço da onda desenhado por CSS (no Painel quem anima é o boot.js; aqui
   não há boot.js, e a animação é só decorativa). A saída é decidida pelo
   assets/preloader.js; `preSeguro` é a rede de segurança: sem o script, o
   preloader some sozinho depois de 8s. pointer-events:none — ele nunca
   segura um toque. Movimento reduzido: sem desenho, só o traço parado.
   ═══════════════════════════════════════════════════════════════════════════ */
#preloader{
  position:fixed;inset:0;z-index:100000;
  background:#fff;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
  transition:opacity .35s ease,visibility .35s ease;
  animation:preSeguro .35s ease 8s forwards;
}
#preloader .pre-wrap{display:flex;flex-direction:column;align-items:center;}
#preloader .pre-path{animation:preDesenha 1.6s cubic-bezier(.45,0,.25,1) .1s infinite alternate;}
#preloader.pre-saindo{opacity:0;visibility:hidden;}
#preloader.pre-hidden{display:none;}
@keyframes preDesenha{from{stroke-dashoffset:680}to{stroke-dashoffset:0}}
@keyframes preSeguro{to{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:reduce){
  #preloader .pre-path{animation:none;stroke-dashoffset:0;}
}

/* ═══════════════════════════════════════════════════════════════════════════
   DESKTOP (modo A) — FORMULÁRIO CENTRADO NA VERTICAL — 30/09/2026
   A coluna vira uma pilha flex com a altura da janela: o cabeçalho da
   escola fica no alto, o rodapé embaixo e o painel de vidro se centra no
   espaço entre os dois (margin-block:auto). Etapa mais alta que a janela:
   as margens zeram e a página rola normalmente. Largura, vidro e o
   interior do painel não mudam. Para caber em 768px de altura sem rolar,
   o respiro de fora (topo do cabeçalho e pé da coluna) passa a seguir a
   altura da janela.
   "Powered by Ondaa" fica sobre a água: tinta mais escura e um halo branco
   muito leve, continua pequeno e discreto.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width:1000px) and (min-aspect-ratio:4/3){
  .container{
    display:flex;flex-direction:column;
    min-height:100vh;box-sizing:border-box;
    padding-bottom:clamp(10px, 2.2vh, 28px);
  }
  .header{padding-top:clamp(20px, 4.4vh, 60px);}
  .container > .card{margin-block:auto;}
  footer{
    padding-top:clamp(10px, 1.6vh, 16px);
    color:rgba(16,42,72,.78);
    text-shadow:0 0 6px rgba(255,255,255,.55);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACABAMENTO "DESIGN SYSTEM" DO FORMULÁRIO — 30/09/2026
   Só aparência: nenhum seletor de estado, id ou fluxo muda.
   Régua de espaço (múltiplos de 4): rótulo→campo 6 · campo→próximo rótulo 18
   · título→campos 20 · último campo→botão 26. Campo e botão com o MESMO raio
   (12px) e alturas da mesma família (50/52). Cores: filete #DCE4EE, rótulo
   #52647A, placeholder #9AA8B8, ícone #A5B3C3 — o campo vira o protagonista.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --m-filete:#DCE4EE;
  --m-filete-2:#C3D2E2;
  --m-lbl:#52647A;
  --m-ph:#9AA8B8;
}
/* Rótulos menores e mais calmos. */
.form-group>label{font-size:12px;font-weight:500;color:var(--m-lbl);letter-spacing:.01em;margin-bottom:6px;}
/* Campos: branco sólido, filete mais leve, ícone e placeholder recuados. */
.card .input-wrap input,.card .input-wrap select,.card .input-wrap-ta textarea,
.card .form-group input,.card .form-group select,.card .form-group textarea{
  background-color:#fff;border:1px solid var(--m-filete);border-radius:12px;
}
.card .input-wrap input:hover,.card .input-wrap select:hover,.card .input-wrap-ta textarea:hover,
.card .form-group input:hover,.card .form-group select:hover,.card .form-group textarea:hover{
  background-color:#fff;border-color:var(--m-filete-2);
}
.card .input-wrap input:focus,.card .input-wrap select:focus,.card .input-wrap-ta textarea:focus,
.card .form-group input:focus,.card .form-group select:focus,.card .form-group textarea:focus{
  border-color:var(--m-acao);outline:3px solid rgba(30,111,168,.12);outline-offset:0;
}
.card input::placeholder,.card textarea::placeholder{color:var(--m-ph);opacity:1;}
.field-icon{color:#A5B3C3;}
/* Modalidade: opções limpas; a escolhida é inequívoca (filete azul, fundo
   azul muito claro, ponto no anel). */
.mod-opt{background:#fff;border-color:var(--m-filete);border-radius:12px;box-shadow:none;}
.mod-opt:hover{border-color:var(--m-filete-2);background:#fff;}
.mod-opt .mo-t{color:var(--m-texto);font-weight:600;}
.mod-opt .mo-r{border-color:#B8C6D6;}
.mod-opt[aria-checked="true"]{border-color:var(--m-acao);background:#EEF5FC;box-shadow:inset 0 0 0 1px var(--m-acao);}
.mod-opt[aria-checked="true"] .mo-t{color:var(--m-acao);}
.mod-opt[aria-checked="true"] .mo-r{border-color:var(--m-acao);}
.mod-opt[aria-checked="true"] .mo-r::after{background:var(--m-acao);}
/* Botão: mesmo raio dos campos; "Próximo" com uma seta discreta desenhada em
   CSS (o mesmo traço do "Entrar no portal" — nenhum ícone novo). Só nos
   botões de avançar etapa. Hover: só o azul um tom abaixo. */
.btn-submit,.btn-primary,.btn-back,.btn-ghost{border-radius:12px;}
.btn-submit{font-weight:600;letter-spacing:.005em;}
.btn-submit[id^="btn-next-"]{display:inline-flex;align-items:center;justify-content:center;gap:10px;}
.btn-submit[id^="btn-next-"]::after{
  content:'';width:6px;height:6px;flex-shrink:0;
  border:1.75px solid currentColor;border-left:0;border-bottom:0;
  transform:rotate(45deg);opacity:.85;margin-left:1px;
  transition:transform .18s ease;
}
.btn-submit[id^="btn-next-"]:hover:not(:disabled)::after{transform:rotate(45deg) translate(1px,-1px);}
@media (prefers-reduced-motion:reduce){ .btn-submit[id^="btn-next-"]::after{transition:none;} }

/* Cabeçalho da escola: um pouco mais discreto. */
.marca-nome{font-size:15px;font-weight:600;}
.marca-cidade{font-size:12px;color:var(--m-apoio);}
.marca-iniciais{font-size:14px;}
.topo-portal-txt{font-size:12px;color:var(--m-apoio);}
.btn-portal{font-size:12.5px;}

@media (min-width:1000px) and (min-aspect-ratio:4/3){
  /* Hierarquia: rótulo da seção pequeno e espaçado; título da etapa forte,
     um ponto menor e mais justo. */
  .progress-wrap{margin:0 0 8px;}
  .prog-label{font-size:10.5px;font-weight:500;letter-spacing:.16em;color:#6B7F99;}
  .step-panel>h2{font-size:clamp(22px, 1.75vw, 25px);font-weight:700;letter-spacing:-.022em;line-height:1.2;}
  .step-panel>h2+:not(.desc){margin-top:20px;}
  .form-group{margin-bottom:18px;}
  .form-group>label{margin-bottom:6px;}
  .card .input-wrap input,.card .input-wrap select,.card .input-wrap-ta textarea,
  .card .form-group input,.card .form-group select,.card .form-group textarea{min-height:50px;font-size:14.5px;border-radius:12px;}
  .form-nav{margin-top:26px;}
  .btn-submit,.btn-primary,.btn-back,.btn-ghost{min-height:52px;border-radius:12px;font-size:15px;}
  /* Modalidade na horizontal, dividindo a largura: cada opção tem no mínimo
     o próprio conteúdo e o resto é repartido por igual (3 opções cabem lado
     a lado mesmo na coluna de 1024px). Vence a regra de coluna estreita. */
  .container > .card .mod-grid{
    display:grid;grid-template-columns:none;grid-auto-flow:column;
    grid-auto-columns:minmax(max-content,1fr);gap:8px;
  }
  .container > .card .mod-opt{min-height:50px;padding:0 14px;gap:10px;border-radius:12px;}
  /* Rodapé: menor e mais calmo, ainda legível sobre a água. */
  footer{font-size:10.5px;letter-spacing:.06em;color:rgba(16,42,72,.66);text-shadow:0 0 5px rgba(255,255,255,.55);}
}

/* ═══════════════════════════════════════════════════════════════════════════
   FRASE EM DUAS LINHAS + "POWERED BY" — 30/09/2026
   A frase já quebra em duas linhas (um <span> por linha). Agora a hierarquia
   acompanha a quebra: "Aqui, seu filho" em azul-marinho Ondaa e a segunda
   linha INTEIRA — "vai mais longe." — no azul vivo (antes o "vai" ficava
   marinho). Mesma fonte, peso e tamanho; o coração continua onde está, ao
   lado da primeira linha. Só vale onde a frase é HTML (desktop, tablet e
   celular deitado); no celular em pé a frase é parte da arte vertical.
   "Powered by Ondaa": branco sobre a água no desktop, com uma sombra de 1px
   quase imperceptível só para não sumir onde a água clareia. No tablet e no
   celular ele fica sobre o papel branco — lá continua cinza (branco sumiria).
   ═══════════════════════════════════════════════════════════════════════════ */
.arte-marca-frase > span:last-of-type,
.arte-marca-frase > span:last-of-type em{color:#0C97DE;}
@media (min-width:1000px) and (min-aspect-ratio:4/3){
  footer{color:rgba(255,255,255,.92);text-shadow:0 1px 2px rgba(6,45,78,.28);}
}