/* =========================================================================
   Bruna Andrade Studio de Dança
   Sistema visual do site. Paleta extraída do logo oficial (pixel a pixel).
   Um arquivo para todas as páginas.
   ========================================================================= */

/* ---------- 1. TOKENS ---------------------------------------------------- */
:root{
  /* ===================================================================
     PALETA OFICIAL EBA, do Manual de Marca v1.3, secao "As cores da casa".
     O que estava aqui antes eram aproximacoes tiradas a olho (#662D8E no
     lugar de #6B1F91, #93C33C no lugar de #A3C81C): perto o bastante pra
     parecer certo na tela e errado ao lado de uma peca impressa.
     Proporcao que o manual pede: violeta domina, creme respira, e o VERDE
     nunca passa de 15% da peca nem vira fundo de area inteira.
     =================================================================== */
  --roxo:#6B1F91;          /* Violeta Palco: assinatura, titulos, destaque */
  --roxo-tinta:#6B1F91;    /* titulo de card e texto de botao claro */
  --roxo-fundo:#3B1160;    /* Ameixa Profunda: fundo das secoes escuras */
  --roxo-noite:#3B1160;    /* Ameixa Profunda */
  --roxo-hover:#581775;    /* DERIVADO: o manual define cor de marca, nao estado de interface */

  --verde:#A3C81C;         /* Verde Movimento: arco, brilho e chamada de acao */
  --verde-claro:#C6DE3F;   /* Verde Brilho: apoio do verde SOBRE fundo escuro */
  --verde-fundo:#8AAA17;   /* DERIVADO, so pra hover de botao verde */

  --creme:#FAF7F2;         /* Creme Cena: fundo padrao */
  --papel:#FFFFFF;         /* Branco: tambem listado como fundo ideal */
  --areia:#D8C2F0;         /* Lavanda Suave: so fundo e borda, NUNCA texto (1,6:1) */

  --tinta:#2A2430;         /* Grafite Cena: texto corrido. O preto puro nao existe na marca */
  --tinta-suave:#6A5F78;   /* DERIVADO do grafite, pra texto de apoio */
  --branco:#FFFFFF;

  --sombra-1:0 1px 2px rgba(42,36,48,.06), 0 6px 18px rgba(42,36,48,.06);
  --sombra-2:0 2px 6px rgba(42,36,48,.08), 0 18px 44px rgba(42,36,48,.12);

  --r-p:10px;
  --r-m:18px;
  --r-g:28px;
  --r-pill:999px;

  --wrap:1140px;
  --wrap-txt:760px;
  --gut:clamp(1.15rem,4.6vw,3rem);
  --sec-y:clamp(3.4rem,8.5vw,6.5rem);

  --fs-hero:clamp(1.72rem,6.4vw,3.55rem);
  --fs-h2:clamp(1.6rem,4.6vw,2.6rem);
  --fs-h3:clamp(1.06rem,1rem + .5vw,1.28rem);
  --fs-lead:clamp(1.04rem,.98rem + .45vw,1.28rem);
  --fs-body:clamp(1rem,.97rem + .18vw,1.09rem);
  --fs-mini:clamp(.86rem,.84rem + .12vw,.93rem);
  --fs-olho:.75rem;

  /* TIPOGRAFIA OFICIAL. O manual nomeia a Plus Jakarta Sans como a fonte
     institucional e cita "site" e "tabela de horarios" no proprio texto, entao
     titulo e corpo passam a ser a MESMA familia, mudando so o peso. Fraunces e
     Karla eram escolha minha de antes da marca existir.
     A Cormorant Garamond NAO entra aqui: o manual reserva ela pra peca de gala
     (convite, certificado, diploma). A Kaushan Script tambem nao: ela e pra
     chamada de no maximo tres palavras, nunca texto corrido.
     Poppins e a substituta que o proprio manual indica se a Jakarta faltar. */
  --display:"Plus Jakarta Sans","Poppins",system-ui,-apple-system,sans-serif;
  --texto:"Plus Jakarta Sans","Poppins",system-ui,-apple-system,sans-serif;

  --t-rapido:150ms cubic-bezier(.22,.61,.36,1);
  --t-medio:280ms cubic-bezier(.22,.61,.36,1);

  /* Grão de papel. SVG inline, zero download. */
  --grao:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.42'/%3E%3C/svg%3E");
}

/* ---------- 2. BASE ------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--creme);
  color:var(--tinta);
  font-family:var(--texto);
  font-size:var(--fs-body);
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:var(--grao);opacity:.035;mix-blend-mode:multiply;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit}
/* Hierarquia do manual: Titulo Jakarta ExtraBold, entrelinha 1.05 e -1% de entreletra. */
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:800;line-height:1.06;letter-spacing:-.01em}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
ul{margin:0;padding:0;list-style:none}

/* O anel de foco tem que ter 3:1 contra a superfície (WCAG 2.2, 1.4.11).
   O verde-fundo dá 2,4 a 2,8:1 sobre creme, papel e branco, que é onde o
   formulário inteiro mora, então o padrão é roxo (7,8:1 sobre creme). Nos
   blocos escuros o roxo sumiria, e ali vale o verde-claro. */
:focus-visible{
  outline:3px solid var(--roxo);
  outline-offset:3px;
  border-radius:4px;
}
.inv :focus-visible,
.topo :focus-visible,
.gaveta :focus-visible,
.final :focus-visible,
.rodape :focus-visible,
.lgpd :focus-visible,
.local__painel :focus-visible,
.passo :focus-visible{outline-color:var(--verde-claro)}

.pular{
  position:absolute;left:.5rem;top:-4rem;z-index:200;
  background:var(--verde);color:var(--tinta);
  padding:.7rem 1.1rem;border-radius:var(--r-p);font-weight:700;
  text-decoration:none;transition:top var(--t-rapido);
}
.pular:focus{top:.5rem}

.so-leitor{
  position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- 3. LAYOUT ---------------------------------------------------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);position:relative;z-index:1}
.sec{padding-block:var(--sec-y);position:relative}
.sec--papel{background:var(--papel)}
.sec--creme{background:var(--creme)}

/* Bloco invertido: roxo é a cor de comando. */
.inv{background:var(--roxo-fundo);color:#F4EAF6}
.inv h2,.inv h3{color:#fff}
.inv .olho{color:var(--verde-claro)}

.cab-sec{max-width:var(--wrap-txt)}
.cab-sec p{color:var(--tinta-suave)}
.inv .cab-sec p{color:#DECBE6}

.olho{
  display:block;font-family:var(--texto);font-size:var(--fs-olho);
  font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:var(--roxo);margin:0 0 .85rem;
}
.lead{font-size:var(--fs-lead);line-height:1.55}
.mini{font-size:var(--fs-mini);color:var(--tinta-suave)}
.inv .mini{color:#D6C2E0}

/* ---------- 4. ELEMENTO ASSINATURA: O TRAÇO ------------------------------
   O símbolo do logo é um traço de pincel verde. Ele vira a assinatura do site:
   uma palavra em itálico por seção, sublinhada por um traço que se DESENHA
   quando a seção entra na tela. Uma vez por seção, nunca mais que isso.
   ------------------------------------------------------------------------ */
.traco{position:relative;display:inline-block;font-style:italic;font-weight:600}
.traco__s{
  position:absolute;left:-.05em;bottom:-.16em;width:106%;height:.34em;
  overflow:visible;pointer-events:none;
}
.traco__s path{
  fill:none;stroke:var(--verde);stroke-width:5;stroke-linecap:round;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:215;stroke-dashoffset:215;
}
.inv .traco__s path{stroke:var(--verde-claro)}
.is-in .traco__s path{animation:risca .56s .14s cubic-bezier(.22,.61,.36,1) forwards}
@keyframes risca{to{stroke-dashoffset:0}}
html:not(.js) .traco__s path{stroke-dashoffset:0}

/* ---------- 5. BOTÕES ---------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:52px;padding:.85rem 1.5rem;
  font-family:var(--texto);font-size:1rem;font-weight:700;line-height:1.2;
  text-decoration:none;text-align:center;
  border:2px solid transparent;border-radius:var(--r-pill);
  cursor:pointer;
  transition:background-color var(--t-rapido),color var(--t-rapido),
             border-color var(--t-rapido),transform var(--t-rapido),
             box-shadow var(--t-rapido);
}
.btn svg{flex:none}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}

/* O par do repouso (tinta sobre verde) mede 8,0:1 e continua acima de 4,5:1
   sobre o verde escuro. Branco sobre verde-fundo dava 2,77:1 num rótulo de
   16px/700, e no celular o :hover fica grudado depois do toque, ou seja, é
   exatamente o estado que a pessoa vê enquanto o formulário envia. */
.btn--primario{background:var(--verde);color:var(--tinta);border-color:var(--verde);box-shadow:var(--sombra-1)}
.btn--primario:hover{background:var(--verde-fundo);color:var(--tinta);border-color:var(--verde-fundo)}

.btn--fantasma{background:transparent;color:var(--roxo);border-color:var(--roxo)}
.btn--fantasma:hover{background:var(--roxo);color:#fff;border-color:var(--roxo)}

.btn--claro{background:#fff;color:var(--roxo-tinta);border-color:#fff}
.btn--claro:hover{background:var(--verde);color:var(--tinta);border-color:var(--verde)}

.btn--vazio-claro{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn--vazio-claro:hover{background:#fff;color:var(--roxo-tinta);border-color:#fff}

.btn--bloco{width:100%}

/* ---------- 6. CABEÇALHO ------------------------------------------------- */
.topo{
  position:sticky;top:0;z-index:60;
  background:var(--roxo);
  box-shadow:0 1px 0 rgba(255,255,255,.14), 0 6px 22px rgba(51,22,74,.16);
}
.topo__in{
  display:flex;align-items:center;gap:1rem;
  min-height:62px;
  width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);
}
.marca{display:flex;align-items:center;min-height:44px;text-decoration:none;flex:none;margin-right:auto}
/* Monograma no cabeçalho: 38px de altura dão ~86px de largura, que lê bem. A assinatura
   completa aqui deixava o descritor com 5px, que o manual chama de "o descritor fecha e
   some", e por isso o recorte certo pra barra é o monograma. */
.marca img{height:38px;width:auto}
.marca:hover img{opacity:.9}

.nav{display:none}
.nav ul{display:flex;align-items:center;gap:.25rem}
.nav a,.nav button{
  display:block;background:transparent;border:0;cursor:pointer;
  padding:.55rem .8rem;border-radius:var(--r-pill);
  color:#F0E3F5;font-size:.95rem;font-weight:500;text-decoration:none;
  transition:background-color var(--t-rapido),color var(--t-rapido);
}
.nav a:hover,.nav button:hover{background:rgba(255,255,255,.14);color:#fff}
.nav a[aria-current="page"]{color:#fff;font-weight:700;background:rgba(255,255,255,.1)}
.topo .btn{min-height:44px;padding:.5rem 1.15rem;font-size:.94rem;display:none}

.menu-bt{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  min-height:44px;padding:.5rem .9rem;
  background:rgba(255,255,255,.12);color:#fff;
  border:0;border-radius:var(--r-pill);cursor:pointer;
  font-size:.9rem;font-weight:700;
  transition:background-color var(--t-rapido),color var(--t-rapido);
}
.menu-bt:hover{background:rgba(255,255,255,.24);color:#fff}

/* gaveta mobile */
.gaveta{
  position:fixed;inset:0;z-index:70;
  background:var(--roxo);
  padding:1rem var(--gut) 2.4rem;
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity var(--t-medio),transform var(--t-medio),visibility var(--t-medio);
  overflow-y:auto;
}
.gaveta[data-aberta="1"]{opacity:1;visibility:visible;transform:none}
.gaveta__topo{display:flex;align-items:center;min-height:62px;margin-bottom:1.2rem}
.gaveta__topo img{height:34px;width:auto;margin-right:auto}
.gaveta ul{display:flex;flex-direction:column;gap:.2rem}
.gaveta li a,.gaveta li button{
  display:block;width:100%;text-align:left;
  background:transparent;border:0;cursor:pointer;
  padding:.95rem .25rem;border-bottom:1px solid rgba(255,255,255,.16);
  color:#fff;font-family:var(--display);font-size:1.35rem;font-weight:600;
  text-decoration:none;
  transition:background-color var(--t-rapido),color var(--t-rapido),padding-left var(--t-rapido);
}
.gaveta li a:hover,.gaveta li button:hover{background:rgba(255,255,255,.1);color:var(--verde-claro);padding-left:.7rem}
.gaveta .btn{margin-top:1.6rem}
.fechar-x{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;flex:none;
  background:rgba(255,255,255,.12);color:#fff;
  border:0;border-radius:var(--r-pill);cursor:pointer;
  transition:background-color var(--t-rapido),color var(--t-rapido);
}
.fechar-x:hover{background:#fff;color:var(--roxo)}

/* ---------- 7. HERO ------------------------------------------------------ */
.hero{
  position:relative;overflow:hidden;
  background:var(--creme);
  padding-block:clamp(2.2rem,6vw,4.6rem) clamp(2.6rem,6vw,4.8rem);
}
.hero__arco{
  position:absolute;top:-16%;right:-24%;width:min(78vw,620px);height:auto;
  opacity:.5;pointer-events:none;z-index:0;
}
.hero__in{position:relative;z-index:1;display:grid;gap:clamp(2rem,5vw,3.4rem)}
.hero h1{
  font-size:var(--fs-hero);line-height:1.13;letter-spacing:-.02em;
  margin:0 0 .85rem;max-width:16ch;
}
.hero .lead{max-width:46ch;color:#42364B}
.hero__ctas{display:flex;flex-direction:column;gap:.7rem;margin-top:1.5rem;max-width:430px}
.hero__chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem}
.chip{
  display:inline-flex;align-items:center;gap:.42rem;
  padding:.42rem .85rem;border-radius:var(--r-pill);
  background:#fff;border:1px solid var(--areia);
  font-size:.83rem;font-weight:600;color:#4A3D53;
}
.chip svg{flex:none;color:var(--roxo)}

/* cartão do hero: onde o logo mora, em tamanho contido, sobre o roxo dele */
.hero__cartao{
  display:none;
  background:var(--roxo);border-radius:var(--r-g);
  padding:2rem 1.8rem;color:#F2E7F7;
  box-shadow:var(--sombra-2);
  align-self:start;
}
.hero__cartao img{width:min(100%,290px);border-radius:var(--r-p)}
.hero__cartao dl{margin:1.7rem 0 0;display:grid;gap:1.05rem}
.hero__cartao dt{font-family:var(--display);font-size:1.75rem;font-weight:700;color:#fff;line-height:1}
.hero__cartao dd{margin:.22rem 0 0;font-size:.9rem;color:#DCC9E6;line-height:1.45}

/* ---------- 8. CARTÕES / GRADES ------------------------------------------ */
.grade{display:grid;gap:1rem;margin-top:2.4rem}
.cartao{
  background:#fff;border:1px solid var(--areia);border-radius:var(--r-m);
  padding:1.5rem 1.4rem;
  transition:transform var(--t-rapido),box-shadow var(--t-rapido),border-color var(--t-rapido);
}
.cartao h3{font-size:var(--fs-h3);margin:0 0 .5rem;color:var(--roxo-tinta)}
.cartao p{color:#4E4356;font-size:.99rem;line-height:1.6}
.cartao__num{
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;margin-bottom:1rem;border-radius:var(--r-pill);
  background:var(--creme);color:var(--roxo);
}
.inv .cartao{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.2)}
/* .cartao h3 vem depois de .inv h3 e tem a mesma força, então precisa ser
   reescrito aqui, senão o título fica roxo escuro sobre roxo e some. */
.inv .cartao h3{color:#fff}
.inv .cartao p{color:#DFCEE8}
.inv .cartao__num{background:rgba(255,255,255,.14);color:var(--verde-claro)}

/* cartão clicável (Escolha por onde começar) */
a.cartao,button.cartao{
  display:block;width:100%;text-align:left;cursor:pointer;text-decoration:none;
  font:inherit;color:inherit;
}
a.cartao:hover,button.cartao:hover{
  background:#fff;color:var(--tinta);
  transform:translateY(-3px);box-shadow:var(--sombra-2);border-color:var(--roxo);
}
.inv a.cartao:hover,.inv button.cartao:hover{
  background:#fff;color:var(--tinta);border-color:#fff;
}
.inv a.cartao:hover h3,.inv button.cartao:hover h3{background:transparent;color:var(--roxo-tinta)}
.inv a.cartao:hover p,.inv button.cartao:hover p{background:transparent;color:#4E4356}
.inv a.cartao:hover .cartao__num,.inv button.cartao:hover .cartao__num{background:var(--creme);color:var(--roxo)}
.cartao__seta{
  display:inline-flex;align-items:center;gap:.4rem;margin-top:1.05rem;
  font-weight:700;font-size:.94rem;color:var(--roxo);
}
.inv .cartao__seta{color:var(--verde-claro)}
.inv a.cartao:hover .cartao__seta,.inv button.cartao:hover .cartao__seta{background:transparent;color:var(--roxo)}
a.cartao:hover .cartao__seta svg,button.cartao:hover .cartao__seta svg{transform:translateX(4px)}
.cartao__seta svg{transition:transform var(--t-rapido)}

/* ---------- 9. LOCALIZAÇÃO ----------------------------------------------- */
.local{display:grid;gap:1.2rem;margin-top:2.4rem}
/* Sem foto do espaço real ainda. Fica em roxo chapado, que é honesto e forte.
   Quando a Bruna mandar a foto da casa nova, basta criar img/estudio.webp
   e ligar a linha de background-image abaixo. */
.local__painel{
  background-color:var(--roxo-fundo);
  background-size:cover;background-position:center;
  border-radius:var(--r-g);overflow:hidden;
  color:#fff;
}
.local__painel > div{
  background:linear-gradient(180deg,rgba(72,31,104,.82),rgba(51,22,74,.94));
  padding:clamp(1.6rem,5vw,2.5rem);
}
.local__painel h3{font-size:1.28rem;margin:0 0 .8rem;color:#fff}
.local__painel address{font-style:normal;font-size:1.02rem;line-height:1.62;color:#EADCF2}
.local__painel .btn{margin-top:1.4rem}
.horas{
  background:#fff;border:1px solid var(--areia);border-radius:var(--r-g);
  padding:clamp(1.4rem,4vw,2rem);
}
.horas h3{font-size:1.1rem;margin:0 0 1rem;color:var(--roxo-tinta)}
/* coluna sem gap, senão a linha de baixo quebra no meio da tabela */
.horas dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:0}
.horas dt{padding:.5rem 1rem .5rem 0;font-weight:700;font-size:.94rem;color:var(--tinta)}
.horas dd{margin:0;padding:.5rem 0;text-align:right;font-size:.94rem;color:#4E4356;border-bottom:1px solid var(--creme)}
.horas dt{border-bottom:1px solid var(--creme)}
.horas dl > :nth-last-child(1),.horas dl > :nth-last-child(2){border-bottom:0}
.horas__nota{margin-top:1.1rem;font-size:.86rem;color:var(--tinta-suave);line-height:1.5}

/* ---------- 10. FAQ ------------------------------------------------------ */
.faq{margin-top:2.2rem;max-width:var(--wrap-txt)}
.faq details{
  background:#fff;border:1px solid var(--areia);border-radius:var(--r-m);
  margin-bottom:.7rem;overflow:hidden;
  transition:border-color var(--t-rapido),box-shadow var(--t-rapido);
}
.faq details[open]{border-color:var(--roxo);box-shadow:var(--sombra-1)}
.faq summary{
  display:flex;align-items:flex-start;gap:.9rem;
  padding:1.1rem 1.25rem;cursor:pointer;list-style:none;
  font-family:var(--display);font-size:1.06rem;font-weight:600;color:var(--roxo-tinta);
  line-height:1.35;
  transition:background-color var(--t-rapido),color var(--t-rapido);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::marker{content:""}
.faq summary:hover{background:var(--creme);color:var(--roxo)}
.faq summary span{flex:1}
.faq__ico{flex:none;margin-top:.15rem;color:var(--roxo);transition:transform var(--t-medio)}
.faq details[open] .faq__ico{transform:rotate(45deg)}
.faq__r{padding:0 1.25rem 1.3rem;color:#4E4356;font-size:.99rem;line-height:1.65}

/* ---------- 11. CHAMADA FINAL --------------------------------------------
   REGRA DE HONESTIDADE: nenhuma foto de sala de dança entra aqui enquanto a
   Bruna não mandar foto do espaço REAL dela. Foto genérica de estúdio, mesmo
   sob véu, é lida pela mãe como registro da casa, e isso é mentira visual.
   Enquanto isso o bloco vive de roxo chapado, que é forte e verdadeiro.
   Quando a foto real chegar, é só definir --textura na própria seção:
       <section class="final" style="--textura:url(/@studiobrunaandrade/img/sala.webp)">
   ------------------------------------------------------------------------ */
.final{
  background-color:var(--roxo-fundo);
  background-image:var(--textura,none);
  background-size:cover;background-position:center;
  color:#fff;
}
.final__veu{background:linear-gradient(180deg,rgba(87,38,124,.93),rgba(51,22,74,.97));padding-block:var(--sec-y)}
.final h2{color:#fff;max-width:16ch}
.final p{color:#E2D2EA;max-width:52ch}
.final .btn{margin-top:1.9rem}

/* ---------- 12. RODAPÉ ---------------------------------------------------- */
.rodape{background:var(--roxo-noite);color:#D8C7E2;padding-block:clamp(2.6rem,6vw,3.8rem) 1.6rem;font-size:.94rem}
.rodape a{color:#EADCF2;text-decoration:none;border-bottom:1px solid rgba(234,220,242,.3);transition:color var(--t-rapido),border-color var(--t-rapido)}
.rodape a:hover{background:transparent;color:var(--verde-claro);border-color:var(--verde-claro)}
.rodape__grade{display:grid;gap:2.2rem}
.rodape img{height:44px;width:auto;border-radius:6px;margin-bottom:1.1rem}
.rodape h3{font-family:var(--texto);font-size:var(--fs-olho);font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--verde-claro);margin:0 0 .9rem}
.rodape li{margin-bottom:.55rem}
.rodape address{font-style:normal;line-height:1.65}
.rodape__base{
  margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;align-items:center;justify-content:space-between;
  font-size:.82rem;color:#B7A3C4;
}
.selo{font-size:.8rem;color:#B7A3C4}
.selo a{color:#CBB8D6;border-bottom-color:rgba(203,184,214,.28)}
.selo a:hover{background:transparent;color:var(--verde-claro);border-bottom-color:var(--verde-claro)}

/* ---------- 13. FORMULÁRIO FLUTUANTE ------------------------------------- */
.modal{
  position:fixed;inset:0;z-index:120;
  display:flex;align-items:flex-end;justify-content:center;
  padding:0;
  opacity:0;visibility:hidden;
  transition:opacity var(--t-medio),visibility var(--t-medio);
}
.modal[data-aberto="1"]{opacity:1;visibility:visible}
.modal__veu{position:absolute;inset:0;background:rgba(37,17,53,.62);backdrop-filter:blur(2px)}
.modal__cx{
  position:relative;width:100%;max-width:560px;max-height:94dvh;overflow-y:auto;
  background:var(--papel);
  border-radius:var(--r-g) var(--r-g) 0 0;
  padding:1.5rem var(--gut) 2rem;
  transform:translateY(24px);
  transition:transform var(--t-medio);
  box-shadow:0 -8px 50px rgba(37,17,53,.3);
}
.modal[data-aberto="1"] .modal__cx{transform:none}
.modal__cab{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1.3rem}
.modal__cab h2{font-size:1.5rem;line-height:1.18;color:var(--roxo-tinta);margin:0 0 .4rem}
.modal__cab p{margin:0;font-size:.94rem;color:var(--tinta-suave);line-height:1.55}
.modal .fechar-x{background:var(--creme);color:var(--roxo)}
.modal .fechar-x:hover{background:var(--roxo);color:#fff}

.campo{margin-bottom:1.05rem}
.campo > label{display:block;font-size:.88rem;font-weight:700;color:#3A2E44;margin-bottom:.38rem}
.campo input,.campo select,.campo textarea{
  width:100%;min-height:50px;padding:.75rem .9rem;
  font-family:var(--texto);font-size:1rem;color:var(--tinta);
  /* --areia sobre o --papel do modal mede 1,28:1: o campo some. O limite de um
     controle precisa de 3:1 (WCAG 1.4.11). Medido no navegador, #B9A691 ainda
     dava só 2,25:1; #918880 (quente, R>G>B, na mesma família da areia) mede
     3,48:1 sobre o branco do próprio campo, 3,32:1 sobre o --papel do modal e
     3,04:1 sobre o --creme. Escurecer menos que isso não passa. */
  background:#fff;border:1.5px solid #918880;border-radius:var(--r-p);
  transition:border-color var(--t-rapido),box-shadow var(--t-rapido);
  appearance:none;
}
.campo textarea{min-height:96px;resize:vertical;line-height:1.55}
.campo select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23662D8E' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.6rem;
}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  border-color:var(--roxo);box-shadow:0 0 0 3px rgba(102,45,142,.14);outline:none;
}
.campo input:focus-visible,.campo select:focus-visible,.campo textarea:focus-visible{outline:none}
.campo[data-erro="1"] input,.campo[data-erro="1"] select,.campo[data-erro="1"] textarea{border-color:#B3261E}
.erro{display:none;margin:.4rem 0 0;font-size:.84rem;font-weight:600;color:#B3261E}
.campo[data-erro="1"] .erro{display:block}

/* A CAIXA DE ACEITE SAIU (13/08/2026) e as regras dela vieram junto. Ela não funcionava com o
   mouse: `.campo input` acima aplica `appearance:none`, e isso vale pro checkbox também, que
   passou a não desenhar marca nenhuma (com appearance:none o `accent-color` não faz nada). O
   clique alternava o estado sem NADA mudar na tela; pelo teclado parecia funcionar só porque o
   anel de foco aparecia junto. No lugar dela ficou a frase abaixo do botão, que diz o mesmo.
   SE ALGUÉM PUSER OUTRO CHECKBOX AQUI DENTRO, precisa de `appearance:auto` explícito. */
.campo input[type="checkbox"]{appearance:auto;-webkit-appearance:auto;width:auto;min-height:0}

.campo[hidden]{display:none}
.btn[hidden]{display:none}

/* honeypot: escondido por CSS, nunca type=hidden */
.hp{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;opacity:0}

/* na confirmação o cabeçalho do formulário vira redundante */
.modal[data-fase="ok"] .modal__cab > div{display:none}
.modal[data-fase="ok"] .modal__cab{justify-content:flex-end;margin-bottom:.4rem}
.modal__ok{display:none;text-align:center;padding:1.4rem 0 .6rem}
.modal[data-fase="ok"] form{display:none}
.modal[data-fase="ok"] .modal__ok{display:block}
.modal__ok svg{margin:0 auto 1.1rem;color:var(--verde-fundo)}
.modal__ok h2{font-size:1.5rem;color:var(--roxo-tinta);margin:0 0 .6rem}
.modal__ok p{color:var(--tinta-suave);font-size:.98rem}
.aviso-falha{
  display:none;margin-bottom:1rem;padding:.85rem 1rem;border-radius:var(--r-p);
  background:#FCEBEA;border:1px solid #E9BDB9;color:#8C1D18;font-size:.9rem;font-weight:600;
}
.modal[data-falha="1"] .aviso-falha{display:block}
/* "Enviando..." precisa continuar legível. opacity:.65 empilhado no hover
   derrubava o rótulo para 1,88:1 sobre o papel do modal. */
.btn[data-carregando="1"]{cursor:progress;pointer-events:none;box-shadow:none}

/* ---------- 14. AVISO LGPD ----------------------------------------------- */
.lgpd{
  position:fixed;left:0;right:0;bottom:0;z-index:110;
  display:none;
  background:var(--roxo-noite);color:#E4D6EC;
  padding:.9rem var(--gut);
  box-shadow:0 -6px 30px rgba(37,17,53,.28);
}
.lgpd[data-ver="1"]{display:block}
.lgpd__in{
  max-width:var(--wrap);margin-inline:auto;
  display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.4rem;
  font-size:.85rem;line-height:1.5;
}
.lgpd p{margin:0;flex:1 1 260px}
.lgpd a{color:var(--verde-claro);text-decoration:underline}
.lgpd a:hover{background:transparent;color:#fff}
/* É o primeiro toque de quem chega do Instagram: alvo abaixo de 44px aqui
   é o pior lugar possível para economizar altura. */
.lgpd .btn{min-height:48px;padding:.6rem 1.3rem;font-size:.88rem}

/* ---------- 14b. BOTÃO FLUTUANTE DE ATENDIMENTO -------------------------- */
/* Ícone de WhatsApp, mas NÃO é link pro WhatsApp: abre o MESMO formulário das
   outras chamadas (data-form). Mandar a pessoa direto pro wa.me entrega a
   conversa e não deixa contato registrado em lugar nenhum; quem some do outro
   lado some pra sempre. O que muda aqui é só o data-form-origem, que é o que
   diz depois, no CRM, que a pessoa entrou por este botão.

   CAMADA 65: acima do conteúdo e do cabeçalho grudento (60), ABAIXO da gaveta
   do menu (70), do aviso de cookies (110) e do modal (120). Assim o menu aberto
   cobre o botão, em vez de ele boiar por cima.

   TINTA ESCURA sobre o verde, e não branco: branco sobre #25D366 mede 2,1:1 e
   não passa nem no mínimo de elemento gráfico (3:1). Escuro mede 7,8:1, e é o
   mesmo par que o botão principal do site já usa. */
.zap{
  position:fixed;z-index:65;
  right:clamp(.9rem,3vw,1.6rem);
  /* Posição de repouso. Quando o aviso de cookies aparece, o site.js sobe o botão
     escrevendo um `bottom` em PIXEL aqui em cima (a barra quebra em duas ou três
     linhas no celular, então a altura só se sabe medindo). Feito por JS e não por
     calc() com variável de propósito: é uma conta a menos pra depender do suporte
     do navegador num ponto que, se falhar, tapa o texto do aviso. */
  bottom:clamp(.9rem,3vw,1.6rem);
  display:inline-flex;align-items:center;gap:.55rem;
  min-height:56px;padding:.7rem .95rem;
  border:0;border-radius:999px;
  background:#25D366;color:#0B2E13;
  font-family:var(--texto);font-size:.95rem;font-weight:700;line-height:1;
  cursor:pointer;
  box-shadow:0 10px 26px rgba(11,46,19,.3);
  transition:background var(--t-rapido),box-shadow var(--t-rapido),transform var(--t-rapido),bottom var(--t-medio);
}
.zap svg{flex:none;width:27px;height:27px;fill:currentColor}
.zap__t{display:none;padding-right:.3rem}
.zap:hover{background:#1DBA5A;color:#0B2E13;box-shadow:0 14px 32px rgba(11,46,19,.36);transform:translateY(-2px)}
.zap:focus-visible{outline:3px solid var(--roxo);outline-offset:3px}
/* O rótulo só entra quando há largura pra ele; no celular fica o círculo, e o
   nome acessível continua no aria-label. */
@media (min-width:560px){ .zap__t{display:inline} }
@media (prefers-reduced-motion:reduce){
  .zap{transition:none}
  .zap:hover{transform:none}
}

/* ---------- 14a. BLOCO DE TEXTO CORRIDO (privacidade, textos longos) ------ */
.texto{max-width:var(--wrap-txt);margin-top:2.4rem}
.texto h2{
  font-size:clamp(1.24rem,1.1rem + .8vw,1.6rem);
  color:var(--roxo-tinta);margin:2.4rem 0 .8rem;
}
.texto h2:first-child{margin-top:0}
.texto p,.texto li{color:#4E4356}
.texto .lead{color:var(--tinta);margin-bottom:1.4rem}
.texto strong{color:var(--tinta)}
.lista{margin:0 0 1.15em;padding:0}
.lista li{position:relative;padding-left:1.5rem;margin-bottom:.6rem;line-height:1.62}
.lista li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:8px;height:8px;border-radius:var(--r-pill);background:var(--verde);
}

/* ---------- 14b. UTILITÁRIOS ---------------------------------------------- */
.h2{font-size:var(--fs-h2)}
.cab-sec__txt{margin-top:1.3rem}
.mt-s{margin-top:1rem}
.mt-m{margin-top:1.9rem}
.mt-p{margin-top:.9rem}
.txt-centro{text-align:center}
/* CTA fantasma da dobra: precisa de alvo de toque, sem virar terceiro botão.
   O hover em verde-fundo dava 2,43:1 sobre o creme, por isso vai em roxo. */
.link-forte{
  display:inline-flex;align-items:center;min-height:44px;padding:.4rem .1rem;
  color:var(--roxo);font-weight:700;text-decoration:underline;text-underline-offset:3px;
}
.link-forte:hover{background:transparent;color:var(--roxo-tinta)}
.final__txt{margin-top:1.3rem;max-width:56ch;color:#E2D2EA}
.final .olho{color:var(--verde-claro)}
.final h2{color:#fff}

/* ---------- 15. REVELAÇÃO POR SCROLL ------------------------------------- */
.rv{opacity:0;transform:translateY(14px)}
.js .rv{transition:opacity .45s cubic-bezier(.22,.61,.36,1),transform .45s cubic-bezier(.22,.61,.36,1);transition-delay:var(--d,0ms)}
.rv.is-in{opacity:1;transform:none}
html:not(.js) .rv{opacity:1;transform:none}

/* ---------- 16. RESPONSIVO ----------------------------------------------- */
@media (min-width:600px){
  .grade--2,.grade--3,.grade--4{grid-template-columns:repeat(2,1fr);gap:1.1rem}
  .hero__ctas{flex-direction:row;flex-wrap:wrap;max-width:none}
  .hero__ctas .btn{flex:0 1 auto}
  .local{grid-template-columns:1fr 1fr;gap:1.2rem}
  .rodape__grade{grid-template-columns:1.4fr 1fr 1fr}
}
@media (min-width:900px){
  .marca img{height:46px}
  .nav{display:block}
  .menu-bt{display:none}
  .topo .btn{display:inline-flex}
  .topo__in{min-height:76px;gap:1.4rem}
  .grade--3{grid-template-columns:repeat(3,1fr)}
  .grade--4{grid-template-columns:repeat(4,1fr)}
  .hero__in{grid-template-columns:1.35fr .85fr;align-items:center;gap:3.2rem}
  .hero__cartao{display:block}
  .local{grid-template-columns:1.15fr .85fr}
  .modal{align-items:center;padding:2rem 1.25rem}
  .modal__cx{border-radius:var(--r-g);padding:2rem 2.2rem 2.2rem;max-height:88dvh}
  .campo--par{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
  .campo--par > *{margin:0}
}

/* ---------- 17. MOVIMENTO REDUZIDO --------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .rv{opacity:1;transform:none}
  .traco__s path{stroke-dashoffset:0}
  .btn:hover{transform:none}
}

/* ---------- 18. IMPRESSÃO ------------------------------------------------ */
@media print{
  .topo,.gaveta,.modal,.lgpd,.hero__arco{display:none!important}
  body{background:#fff}
  .inv,.final,.rodape{background:#fff!important;color:#000!important}
}

/* ---------- 19. COMPONENTES DA PÁGINA "PRIMEIRA AULA" ---------------------
   Adicionados no fim, sem tocar em nada acima. Nenhuma regra :hover nova,
   então a regra da casa (hover declara fundo e cor juntos) segue intacta.
   ------------------------------------------------------------------------ */

/* hero de página interna: sem o cartão lateral, o texto ocupa a largura toda */
.hero--pag .hero__in{grid-template-columns:1fr;gap:0}
.hero--pag h1{max-width:20ch}
.hero--pag .lead{max-width:54ch}

/* blocos de dúvida: um medo por bloco, com o traço verde do logo na lateral */
.duvidas{display:grid;gap:1rem;margin-top:2.4rem;max-width:var(--wrap-txt)}
.duvida{
  background:#fff;border:1px solid var(--areia);border-left:4px solid var(--verde);
  border-radius:var(--r-m);padding:1.5rem 1.4rem;
}
.duvida h3{font-size:var(--fs-h3);margin:0 0 .6rem;color:var(--roxo-tinta)}
.duvida p{color:#4E4356;font-size:.99rem;line-height:1.65}

/* passo a passo numerado (vive dentro de .inv) */
.passos{display:grid;gap:1rem;margin:2.4rem 0 0;padding:0;list-style:none;max-width:var(--wrap-txt)}
.passo{
  display:flex;align-items:flex-start;gap:1rem;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);
  border-radius:var(--r-m);padding:1.3rem 1.35rem;
}
.passo__n{
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;flex:none;border-radius:var(--r-pill);
  background:var(--verde);color:var(--tinta);
  font-family:var(--display);font-size:1.15rem;font-weight:700;line-height:1;
}
.passo p{margin:0;color:#DFCEE8;font-size:.99rem;line-height:1.65}

/* painel de endereço sozinho, sem a tabela de horários ao lado */
.painel-solo{margin-top:2.4rem;max-width:620px}

@media print{
  .duvida,.passo{border:1px solid #999!important;background:#fff!important}
  .passo p,.duvida p{color:#000!important}
  .passo__n{background:#fff!important;color:#000!important;border:1px solid #999}
}

/* ---------- 19. ACRÉSCIMOS DA PÁGINA SOBRE -------------------------------
   Componentes novos, no fim do arquivo. Nada acima foi alterado.
   ------------------------------------------------------------------------ */

/* Hero de página interna: uma coluna só, sem o cartão lateral da home.
   Sem isso o .hero__in de 900px acima deixaria a coluna de 1.35fr sozinha. */
.hero--texto h1{max-width:20ch}
.hero--texto .lead{max-width:54ch}
@media (min-width:900px){
  .hero--texto .hero__in{grid-template-columns:minmax(0,1fr);align-items:start}
  .hero--texto h1{max-width:18ch}
}

/* Lema da casa: linha de respiro entre blocos, no gesto italico da marca. */
.lema{
  margin:2.4rem 0 0;max-width:var(--wrap-txt);
  padding:.2rem 0 .2rem 1.3rem;
  border-left:4px solid var(--verde);
  font-family:var(--display);font-style:italic;font-weight:600;
  font-size:clamp(1.16rem,1rem + .95vw,1.65rem);line-height:1.32;
  letter-spacing:-.012em;color:var(--roxo-tinta);
}
.inv .lema{color:#fff;border-left-color:var(--verde-claro)}

/* Nomes da equipe, reusando o .chip do hero. */
.equipe{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.8rem}

/* Arco decorativo do hero interno: sem o cartão lateral da home ele cairia
   por cima do texto no celular, então recua e clareia. Vale para os TRÊS
   heróis internos (sobre, aulas e primeira aula), senão o traço verde corta
   a manchete em 375px nas duas páginas que ficaram com os valores da home. */
.hero--texto .hero__arco,
.hero--pag .hero__arco{top:-13%;right:-42%;width:min(74vw,540px);opacity:.34}
@media (min-width:900px){
  .hero--texto .hero__arco{top:-26%;right:-8%;width:min(44vw,520px);opacity:.5}
}

/* Nesta página o painel de endereço divide a linha com um cartão mais alto,
   e sem isso o véu do painel não chega até o fim do bloco roxo. */
body[data-pagina="sobre"] .local__painel{display:flex}
body[data-pagina="sobre"] .local__painel > div{width:100%}

/* O cabeçalho é grudento, então âncora sem folga esconde a primeira linha. */
body[data-pagina="sobre"] section[id],
body[data-pagina="sobre"] #conteudo{scroll-margin-top:92px}

/* ============================================================================
   GRADE DE HORÁRIOS (/horarios/)
   Cartão por dia e não tabela de 6 colunas: no celular uma tabela dessas ou
   rola de lado ou encolhe a fonte abaixo dos 11px que o manual proíbe. Em
   cartão, cada dia é um bloco legível em qualquer largura.
   O horário vai em Bold porque o manual manda: "Preços e horários sempre em
   Bold, para leitura rápida".
   ========================================================================= */
.grade{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:2rem}
.grade__dia{background:#fff;border:1px solid var(--areia);border-radius:var(--r-m);overflow:hidden}
.grade__nome{
  font-size:1.05rem;font-weight:800;color:#fff;background:var(--roxo);
  margin:0;padding:.7rem 1.1rem;letter-spacing:.01em;
}
.grade__lista{list-style:none;margin:0;padding:.4rem 0}
.grade__item{display:flex;gap:.9rem;padding:.5rem 1.1rem;align-items:baseline}
.grade__item--segue{padding-top:.05rem}
.grade__hora{
  flex:none;width:3.4rem;font-weight:700;color:var(--roxo);
  font-variant-numeric:tabular-nums;font-size:.95rem;
}
.grade__txt{display:flex;flex-wrap:wrap;gap:.1rem .5rem;align-items:baseline}
.grade__aula{color:var(--tinta);font-size:.95rem;line-height:1.35}
.grade__prof{color:var(--tinta-suave);font-size:.85rem}
.grade__prof::before{content:"·";margin-right:.4rem;color:var(--areia)}
/* Filete verde só como grafismo separando blocos de horário. O manual libera o
   verde em filete e proíbe ele como texto sobre fundo claro. */
.grade__item:not(.grade__item--segue) + .grade__item--segue{border-top:0}
.grade__item:not(.grade__item--segue):not(:first-child){
  margin-top:.35rem;border-top:1px solid var(--creme);padding-top:.7rem;
}

.idades{margin-top:2.2rem;background:var(--areia);border-radius:var(--r-m);padding:1.4rem 1.3rem}
.idades__t{font-size:1.05rem;margin:0 0 .9rem;color:var(--roxo-fundo)}
.idades__l{display:grid;grid-template-columns:1fr;gap:.5rem;margin:0}
.idades__l>div{display:flex;justify-content:space-between;gap:1rem;padding:.35rem 0;border-bottom:1px solid rgba(59,17,96,.12)}
.idades__l>div:last-child{border-bottom:0}
.idades__l dt{font-weight:700;color:var(--roxo-fundo);margin:0}
.idades__l dd{margin:0;color:var(--roxo-fundo);opacity:.8;text-align:right}
.grade__nota{margin-top:1.4rem;color:var(--tinta-suave);font-size:.9rem}

/* Só pra leitor de tela: o horário repetido some da vista mas continua sendo lido. */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media (min-width:640px){
  .grade{grid-template-columns:repeat(2,1fr)}
  .idades__l{grid-template-columns:repeat(2,1fr) ;gap:.5rem 2rem}
}
@media (min-width:1040px){
  .grade{grid-template-columns:repeat(3,1fr)}
}

/* ============================================================================
   MODAL DO FORMULÁRIO EM TELA GRANDE
   O modal nasceu como folha de baixo (colado na base, cantos arredondados só em
   cima), que é o padrão certo no celular. No desktop ele continuava assim: com
   nove campos empilhados em uma coluna de 560px, o formulário passava da altura
   da tela e rolava dentro do próprio modal num monitor Full HD.
   Aqui, a partir de 900px, ele vira caixa CENTRADA e mais larga, os campos se
   organizam em duas colunas e os espaços encolhem. Nada disso muda no celular,
   onde uma coluna e alvo grande continuam sendo o certo.
   ========================================================================= */
@media (min-width:900px){
  .modal{align-items:center;padding:2rem 1rem}
  .modal__cx{
    max-width:720px;max-height:90dvh;
    border-radius:var(--r-g);
    padding:1.5rem 1.7rem 1.6rem;
    transform:translateY(12px) scale(.99);
  }
  .modal[data-aberto="1"] .modal__cx{transform:none}

  .modal__cab{margin-bottom:1rem}
  .modal__cab h2{font-size:1.32rem;margin-bottom:.3rem}
  .modal__cab p{font-size:.9rem;line-height:1.45}

  /* O formulário vira grade de duas colunas. Os campos que precisam de linha
     inteira pedem explicitamente; o resto se acomoda de dois em dois. */
  .modal form{display:grid;grid-template-columns:1fr 1fr;gap:0 1.1rem;align-items:start}
  .modal form > *{grid-column:1 / -1}
  .modal .campo[data-campo="quem_vai_dancar"],
  .modal .campo[data-campo="faixa_etaria"],
  .modal .campo[data-campo="ja_dancou"],
  .modal .campo[data-campo="interesse"],
  .modal .campo[data-campo="melhor_periodo"]{grid-column:auto}

  /* Campos mais baixos e mais juntos. 44px continua acima do alvo mínimo de
     toque, e no desktop o ponteiro é preciso. */
  .modal .campo{margin-bottom:.72rem}
  .modal .campo > label{font-size:.83rem;margin-bottom:.26rem}
  .modal .campo input,
  .modal .campo select,
  .modal .campo textarea{min-height:44px;padding:.55rem .8rem;font-size:.95rem}
  .modal .campo textarea{min-height:64px;line-height:1.45}
  .modal .campo--par{gap:0 1.1rem}

  /* O aviso de LGPD e o botão fecham a grade sem herdar o respiro do mobile. */
  .modal form > button{margin-top:.2rem}
  .modal form > .mini{margin-top:.5rem;font-size:.78rem;line-height:1.45}
}

/* TELA LARGA MAS BAIXA (notebook de 1366x768 e afins).
   Em 1080px de altura o modal cabe com folga. Em 768px ele passava 81px e voltava a rolar,
   medido no navegador. Aqui o aperto é só o necessário para fechar esses 81px, e vale por
   ALTURA e não por largura: quem tem monitor alto continua com a versão folgada. */
@media (min-width:900px) and (max-height:840px){
  .modal{padding:1rem}
  .modal__cx{padding:1.1rem 1.5rem 1.2rem;max-height:94dvh}
  .modal__cab{margin-bottom:.7rem;gap:.8rem}
  .modal__cab h2{font-size:1.15rem;margin-bottom:.22rem}
  .modal__cab p{font-size:.85rem;line-height:1.4}
  .modal .campo{margin-bottom:.5rem}
  .modal .campo > label{font-size:.8rem;margin-bottom:.2rem}
  .modal .campo input,
  .modal .campo select,
  .modal .campo textarea{min-height:42px;padding:.45rem .75rem;font-size:.92rem}
  .modal .campo textarea{min-height:52px}
  .modal form > .mini{margin-top:.35rem;font-size:.74rem;line-height:1.4}
}