/* ===== estilo/base.css ===== */
/* ============================================================
   BASE · página experimental-recife (19/08/2026)

   A lei visual é o CONTRATO.md do design system (Pulso Neon, rev.
   22/07). Aqui só entram tokens do índice fechado; o que é livre é
   layout, tratamento e assinatura.

   O que ele pediu por voz em 19/08:
   "a identidade visual da BORA e o site novo que a gente criou como
   referência ... na primeira sessão título, subtítulo, botão e uma
   foto do lado, numa box com bordas arredondadas, algo bem sutil ...
   a segunda sessão pode ser criativa, o fundo diferente do da
   primeira ... a terceira o CTA final como o do nosso site novo."

   Sequência de chãos (a lei desta página, medida no hero travado):
   BRANCO (hero) -> PRETO (pra quem é) -> BRANCO com a box NEON (CTA)
   -> PRETO (rodapé). O contraste é relacional: a S2 escura existe
   para o neon do fecho chegar como pico, e não como mais uma cor.
   ============================================================ */

@font-face{font-family:'Altone';font-weight:400;font-style:normal;font-display:swap;
  src:url("fontes/Altone-Regular.woff2") format("woff2")}
@font-face{font-family:'Altone';font-weight:700;font-style:normal;font-display:swap;
  src:url("fontes/Altone-Bold.woff2") format("woff2")}
@font-face{font-family:'Altone';font-weight:800;font-style:normal;font-display:swap;
  src:url("fontes/Altone-ExtraBold.woff2") format("woff2")}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{margin:0;
  background:var(--cor-fundo);
  color:var(--cor-texto);
  font-family:var(--fonte-texto);
  font-size:var(--txt-base);
  line-height:var(--lh-texto);
  -webkit-font-smoothing:antialiased}

img{display:block;max-width:100%}

/* o palco: a mesma calha da casa em todas as seções */
.palco{max-width:var(--cont-padrao);margin-inline:auto;
  padding-inline:var(--margem-palco)}

/* ============ o rótulo da casa (eyebrow) ============
   caixa alta, tracking de kicker, com o traço neon antes.
   No branco o texto do rótulo é PRETO (contrato, rev. 22/07:
   eyebrow no branco nunca é verde); o neon fica só no traço,
   que é decorativo e não carrega informação sozinho. */
.rotulo{display:inline-flex;align-items:center;gap:var(--esp-2xs);
  margin:0;font-size:var(--txt-xs);font-weight:var(--peso-bold);
  letter-spacing:var(--ls-kicker);text-transform:uppercase;
  color:var(--cor-texto)}
.rotulo::before{content:"";width:var(--traco-larg);height:var(--traco-alt);
  background:var(--cor-grafico);border-radius:var(--raio-xs);flex:none}

/* ============ o botão da casa ============
   pílula neon com rótulo preto, extrabold, caixa alta. É o mesmo
   componente das 7 CTAs da página de vendas: raio, peso, corpo,
   tracking, caixa e recuo idênticos. */
.btn{display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--botao-alt-min);
  padding:var(--botao-pad-y) var(--botao-pad-x);
  border-radius:var(--botao-raio);
  background:var(--botao-primario-bg);color:var(--botao-primario-fg);
  font-family:var(--fonte-texto);font-weight:var(--botao-peso);
  font-size:var(--txt-sm);letter-spacing:var(--ls-caps);
  text-transform:uppercase;text-decoration:none;border:0;cursor:pointer;
  transition:background var(--dur-padrao) var(--ease-enfase),
             transform var(--dur-padrao) var(--ease-enfase)}
.btn:hover{background:var(--botao-primario-bg-hover);transform:translateY(-2px)}
.btn:focus-visible{outline:var(--foco-anel) solid var(--cor-foco);
  outline-offset:var(--foco-offset)}

/* a linha miúda embaixo do botão (rev. 19/08, pedido dele: "embaixo
   de todos os botões, uma escrita bem pequenininha, tipo gratuito").
   Ela herda a tinta sutil do contexto, então funciona no branco, no
   escuro e dentro do neon sem regra nova. */
.micro-cta{margin:var(--esp-2xs) 0 0;font-size:var(--txt-sm);
  color:var(--cor-texto-sutil)}

/* o par fantasma + sólida: a manchete da casa. A linha de contexto
   entra em peso regular e tinta rebaixada, a de ênfase em bold e
   tinta cheia. Mesma régua do hero e do fecho da página de vendas. */
.manchete{margin:0;line-height:var(--display-lh);
  letter-spacing:var(--display-ls);font-weight:var(--titulo-peso-forte);
  color:var(--cor-texto);text-wrap:balance}
.manchete .linha{display:block}
.manchete .fantasma{font-weight:var(--titulo-peso-suave);
  color:var(--cor-texto-sutil)}

/* piso permanente: quem navega por teclado enxerga onde está, e
   quem pediu menos movimento recebe a página parada e inteira */
:focus-visible{outline:var(--foco-anel) solid var(--cor-foco);
  outline-offset:var(--foco-offset)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
}


/* ===== estilo/s1.css ===== */
/* ============================================================
   S1 · HERO (chão branco)
   ============================================================ */

.hero{background:var(--cor-fundo);color:var(--cor-texto);
  padding-block:clamp(2.4rem,6vh,4.4rem) clamp(3rem,8vh,5.6rem);
  overflow:clip}

/* duas colunas: a de texto mais larga que a da foto.
   MEDIDO em 19/08 (1440, navegador): com 1.06fr a coluna dava 514px
   e a manchete de 60px quebrava em QUATRO linhas. Com 1.18fr ela dá
   558px e o par fecha em duas, que é a régua do hero da casa. */
.hero__grade{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.8rem,4vw,3.4rem);align-items:center;
  min-height:min(68svh,38rem)}

/* a marca no alto da página: escrita preta sobre o branco, no mesmo
   eixo x da manchete (a calha do palco). Altura pequena, porque ela
   apresenta e não disputa a dobra com o botão. */
.hero__marca{margin-bottom:clamp(1.6rem,5vh,3rem)}
.hero__marca img{height:clamp(1.35rem,1.9vw,1.9rem);width:auto}

.hero__texto{display:flex;flex-direction:column;align-items:flex-start;
  gap:var(--esp-sm)}

/* a manchete não usa o --txt-hero cheio nem o --txt-2xl: aqui ela
   divide a dobra com a foto. A régua desta página é o teto de 2.9rem,
   medido para o par fechar em DUAS linhas dentro da coluna de 558px. */
.hero__titulo{font-size:clamp(1.9rem,1.25rem + 2.2vw,2.9rem);
  margin-block:var(--esp-2xs) 0}

.hero__sub{margin:0;max-width:34rem;font-size:var(--txt-md);
  line-height:var(--lh-media);color:var(--cor-texto-sutil);text-wrap:pretty}

.hero__acao{margin:var(--esp-2xs) 0 0}

/* ============ a box da foto ============
   raio grande (--raio-xl), sem sombra: o objeto se separa do branco
   pelo próprio recorte e pelo grafismo atrás, não por elevação
   genérica. A proporção 1.2 veio do corte do tratamento. */
.hero__foto{position:relative;margin:0;isolation:isolate}
.hero__foto img{position:relative;z-index:1;width:100%;height:auto;
  aspect-ratio:1.2;object-fit:cover;
  border-radius:var(--raio-xl)}

/* o grafismo: o raio da marca em tonal, sangrando pela direita por
   trás da box. Ele nunca passa por baixo de texto de leitura
   (CONTRATO) porque aqui não há texto do lado direito.

   TINTA: entra na alfa TONAL (0.12), não na lateral (0.50). A 0.50 ele
   virava um anel aceso em volta da foto e roubava a dobra, que é o
   oposto do "algo bem sutil" que ele pediu em 19/08. A 0.12 ele é
   textura: dá lugar à foto e mantém a assinatura da marca no branco. */
.hero__grafismo{position:absolute;z-index:0;pointer-events:none;
  width:var(--pattern-tam-lateral);aspect-ratio:750/840;
  right:clamp(-22rem,-18vw,-9rem);top:50%;transform:translateY(-50%);
  background:var(--cor-grafico);opacity:var(--pattern-op-tonal);
  -webkit-mask:url("marca/bora-pattern.svg") center/contain no-repeat;
          mask:url("marca/bora-pattern.svg") center/contain no-repeat}
/* sem variável local para a arte: o auditor de fidelidade trata toda
   variável fora do tokens.css como token fabricado, e a regra é boa
   demais para ser contornada por conveniência. */


/* ===== estilo/s2.css ===== */
/* ============================================================
   S2 · PRA QUEM É (chão FOTO, com véu escuro)

   Rev. 19/08, pedido dele olhando o link: "coloca essa foto de fundo,
   deixa o título e o subtítulo centralizado, e as box você pode
   colocar como se fosse vidro. E essa foto de fundo deixa ela com um
   overlay um pouco escuro."

   O contexto muda de .contexto-preto para .contexto-foto, que é o do
   contrato para texto sobre imagem. Ele exige scrim tokenizado, e o
   véu chapado entra POR CIMA da foto e POR BAIXO do scrim.
   ============================================================ */

.quem{position:relative;overflow:clip;isolation:isolate;
  color:var(--cor-sobre-foto);
  padding-block:var(--esp-secao)}

/* a cena: a foto cobre a seção inteira, borda a borda */
.quem__cena{position:absolute;inset:0;z-index:0}
.quem__cena img{width:100%;height:100%;object-fit:cover;object-position:50% 46%}

/* o véu escuro chapado (o "overlay um pouco escuro" que ele pediu) e,
   por cima dele, o scrim tokenizado da casa. Duas camadas com
   funções diferentes: o véu baixa a cena inteira, o scrim garante a
   base do texto sem apagar o céu. */
.quem::before{content:"";position:absolute;inset:0;z-index:1;
  background:var(--bora-preto);opacity:.62;pointer-events:none}
.quem::after{content:"";position:absolute;inset:0;z-index:2;
  background:var(--scrim-forte);pointer-events:none}

.quem__conteudo{position:relative;z-index:3;
  display:flex;flex-direction:column;align-items:center;text-align:center}

/* título e subtítulo centralizados */
.quem__titulo{margin:0;max-width:22ch;
  font-size:var(--txt-2xl);line-height:var(--display-lh);
  letter-spacing:var(--display-ls);font-weight:var(--peso-bold);
  color:var(--cor-sobre-foto);text-wrap:balance}
/* neon como texto só existe sobre campo escuro; aqui ele vive sobre
   a foto já rebaixada pelo véu, que é a mesma condição do preto */
.quem__acende{color:var(--cor-destaque)}

.quem__sub{margin:var(--esp-sm) 0 0;max-width:56ch;
  font-size:var(--txt-md);line-height:var(--lh-media);
  color:var(--cor-sobre-foto-sutil);text-wrap:pretty}

/* ============ as quatro caixas, em vidro ============
   vidro fosco é o tratamento sancionado para UI pequena sobre foto:
   desfoque no fundo mais um véu escuro por baixo do texto. O
   desfoque sozinho não garante contraste (a foto tem céu claro no
   topo), então o véu é obrigatório e o vidro é o acabamento. */
.quem__caixas{list-style:none;margin:clamp(1.8rem,4.5vh,2.8rem) 0 0;padding:0;width:100%;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(.7rem,1.4vw,1.1rem);text-align:left}

.caixa{display:flex;flex-direction:column;gap:var(--esp-2xs);
  background:var(--cor-superficie-sutil);
  border:1px solid var(--cor-borda);
  border-radius:var(--card-raio);
  padding:clamp(1.1rem,2.2vw,1.6rem);
  -webkit-backdrop-filter:blur(18px);
          backdrop-filter:blur(18px)}

.caixa__eco{font-size:var(--txt-xs);font-weight:var(--peso-bold);
  letter-spacing:var(--ls-kicker);text-transform:uppercase;
  color:var(--cor-destaque)}

.caixa__texto{font-size:var(--txt-md);line-height:1.24;
  letter-spacing:var(--ls-titulo);font-weight:var(--peso-bold);
  color:var(--cor-sobre-foto);text-wrap:pretty}

.quem__virada{margin:clamp(1.8rem,4.5vh,2.8rem) 0 0;max-width:34rem;
  font-size:var(--txt-xl);line-height:var(--lh-titulo);
  letter-spacing:var(--ls-titulo);font-weight:var(--peso-bold);
  color:var(--cor-sobre-foto);text-wrap:balance}

.quem__acao{margin:var(--esp-md) 0 0}


/* ===== estilo/s3.css ===== */
/* ============================================================
   S3 · O CONVITE (box neon no branco)
   Idioma herdado do .fecho da página de vendas (r35).
   ============================================================ */

.fecho{background:var(--bora-branco);
  padding:clamp(2.2rem,5vh,3.4rem) clamp(.8rem,1.8vw,1.4rem) clamp(2.6rem,5.2vh,3.9rem)}

/* a box: mesmo raio de canto dos objetos flutuantes da casa. É a
   única massa de cor cheia da página, e é ela que concentra a
   ousadia (a assinatura mora aqui, e por isso não se repete). */
.fecho__painel{position:relative;overflow:clip;isolation:isolate;
  background:var(--cor-fundo);color:var(--cor-texto);
  border-radius:clamp(1.6rem,1.2rem + 1.2vw,2.4rem);
  display:flex;flex-direction:column}

/* o raio: sobre o neon a única tinta que lê é a preta (contrato,
   --pattern-op-lateral no contexto verde = 0.14). Ele sangra pela
   esquerda e se dissolve por máscara ANTES da coluna de leitura,
   que é a correção medida da r26 ("o grafismo está dificultando a
   leitura"): 0% da caixa da manchete, do apoio e da CTA. */
.fecho__raio{position:absolute;z-index:0;pointer-events:none;
  width:clamp(34rem,66vw,60rem);aspect-ratio:750/840;
  background:var(--bora-preto);opacity:var(--pattern-op-lateral);
  left:clamp(-26rem,-25vw,-14rem);top:56%;transform:translateY(-50%);
  -webkit-mask:url("marca/bora-pattern.svg") center/contain no-repeat;
          mask:url("marca/bora-pattern.svg") center/contain no-repeat}

/* a dissolução só entra onde o navegador sabe INTERSECTAR duas
   máscaras. Sem isso as camadas somariam e o degradê viraria uma
   laje preta sobre o neon, que é o pior resultado possível. */
@supports (mask-composite: intersect) or (-webkit-mask-composite: source-in){
  /* onde a dissolução acaba, em vw e não em %: medido na r26, com o
     degradê em % da caixa do grafismo o defeito voltava em 1280 e
     1024 sem ninguém ver. O max() é o piso do celular. */
  .fecho__raio{
    -webkit-mask-image:url("marca/bora-pattern.svg"),
      linear-gradient(90deg,var(--bora-preto) 0 max(calc(75vw - 555px),40%),transparent max(calc(75vw - 415px),56%));
            mask-image:url("marca/bora-pattern.svg"),
      linear-gradient(90deg,var(--bora-preto) 0 max(calc(75vw - 555px),40%),transparent max(calc(75vw - 415px),56%));
    -webkit-mask-size:contain,100% 100%;      mask-size:contain,100% 100%;
    -webkit-mask-position:center,center;      mask-position:center,center;
    -webkit-mask-repeat:no-repeat,no-repeat;  mask-repeat:no-repeat,no-repeat;
    -webkit-mask-composite:source-in;         mask-composite:intersect}
}

.fecho__miolo{position:relative;z-index:1;flex:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:var(--esp-sm);
  padding:clamp(3rem,8vh,5rem) clamp(1.2rem,4vw,3rem);
  min-height:min(46svh,26rem)}

/* dentro do neon o rótulo perde o traço: o neon do traço contra o
   campo neon mede 1,00:1 e sumiria. O texto preto basta. */
.fecho__rotulo{color:var(--cor-texto)}
.fecho__rotulo::before{display:none}

.fecho__titulo{font-size:clamp(2.05rem,1.15rem + 4.2vw,4.5rem)}

.fecho__apoio{margin:0;max-width:40rem;font-size:var(--txt-md);
  line-height:var(--lh-media);color:var(--preto-72);text-wrap:pretty}

/* os lugares: lista sem marcador, separada por filetes finos. Sem
   dia e sem horário, por decisão dele em 19/08. */
.fecho__lugares{list-style:none;margin:var(--esp-2xs) 0 0;padding:0;
  display:flex;flex-direction:column;align-items:center;
  gap:var(--esp-3xs);font-size:var(--txt-base);
  line-height:var(--lh-media);color:var(--cor-texto);font-weight:var(--peso-bold)}
.fecho__lugares li{padding-top:var(--esp-3xs)}
.fecho__lugares li + li{border-top:1px solid var(--preto-18);
  padding-top:var(--esp-2xs);margin-top:var(--esp-3xs)}

.fecho__acao{margin:var(--esp-2xs) 0 0}

/* a CTA invertida: campo preto, rótulo neon. É o que o
   design-system já prevê em .contexto-verde
   (--botao-primario-bg: preto, --botao-primario-fg: verde),
   então isto não é caso especial, é o contrato. */
.fecho__cta{background:var(--bora-preto);color:var(--bora-verde)}
.fecho__cta:hover{background:var(--neutro-700);color:var(--bora-verde)}
/* o anel de foco padrão é o verde-profundo, que dentro do campo neon
   quase some: aqui ele vira PRETO */
.fecho__cta:focus-visible{outline:var(--foco-anel) solid var(--bora-preto);
  outline-offset:var(--foco-offset)}

.fecho__micro{color:var(--preto-72)}
.fecho__assinatura{margin:var(--esp-2xs) 0 0;font-size:var(--txt-xs);
  letter-spacing:var(--ls-caps);color:var(--preto-72)}


/* ===== estilo/rodape.css ===== */
/* ============================================================
   RODAPÉ (chão preto, borda a borda, raio 0)
   ============================================================ */

.rodape{position:relative;overflow:clip;
  background:var(--bora-preto);color:var(--branco-72);
  padding-block:clamp(2.8rem,7vh,4.6rem) 0}

.rodape__grade{display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:clamp(1.8rem,4vw,3.6rem);align-items:start}

.rodape__marca{display:flex;flex-direction:column;align-items:flex-start;
  gap:var(--esp-2xs)}
.rodape__logo{margin:0;line-height:0}
/* contrato do logo: no rodapé vai a ESCRITA, e ela faz a vez do
   nome. O ícone não aparece em lugar nenhum desta seção. */
.rodape__logo img{height:clamp(1.25rem,1.7vw,1.7rem);width:auto}
.rodape__assinatura{margin:var(--esp-2xs) 0 0;font-size:var(--txt-base);
  line-height:var(--lh-media);color:var(--bora-branco)}
.rodape__dados{margin:clamp(1.2rem,3vh,2rem) 0 0;font-size:var(--txt-xs);
  color:var(--branco-72)}

.rodape__titulo{margin:0 0 var(--esp-2xs);font-size:var(--txt-xs);
  font-weight:var(--peso-bold);letter-spacing:var(--ls-kicker);
  text-transform:uppercase;color:var(--bora-branco)}
.rodape__lista{font-style:normal;display:flex;flex-direction:column;
  gap:var(--esp-3xs);font-size:var(--txt-sm)}

/* links: o sublinhado é o decorativo que acende em neon; a
   informação continua branca (neon nunca vira texto no escuro de
   leitura corrida) */
/* alvo de toque: MEDIDO em 19/08 no 390 e no 360, estes dois links
   tinham 21px de altura, menos da metade do mínimo de 44px. Eles
   eram a única coisa da página fora da régua de toque. O alvo cresce
   sem mexer no espaçamento visual, porque o texto continua no mesmo
   lugar dentro da caixa maior. */
.rodape a{display:inline-flex;align-items:center;min-height:var(--botao-alt-min);
  color:var(--bora-branco);text-decoration:underline;
  text-underline-offset:.24em;text-decoration-thickness:1px;
  text-decoration-color:var(--branco-16);
  transition:text-decoration-color var(--dur-padrao) var(--ease-enfase)}
.rodape a:hover{text-decoration-color:var(--bora-verde)}
.rodape a:focus-visible{outline:var(--foco-anel) solid var(--bora-verde);
  outline-offset:var(--foco-offset);border-radius:var(--raio-xs)}

.rodape__pendencia{margin:var(--esp-sm) 0 0;font-size:var(--txt-xs);
  line-height:var(--lh-media);color:var(--bora-preto);
  background:var(--sys-aviso-fundo);border-left:var(--traco-alt) solid var(--sys-aviso);
  padding:var(--esp-2xs) var(--esp-xs);border-radius:var(--raio-xs);max-width:24rem}

/* A PALAVRA GIGANTE: textura, não informação.
   Aqui ela entra CHAPADA na alfa tokenizada --branco-08 (1,16:1
   medido sobre o preto), e não com o degradê cromático do rodapé da
   página de vendas. Lá o degradê existia para igualar o tratamento
   ao eco gigante da S8; esta página não tem esse eco, então uma
   solução só basta e ela é a mais simples. */
.rodape__gigante{
  position:relative;overflow:clip;height:clamp(4.3rem,15.5vw,16.7rem);
  max-width:var(--cont-padrao);
  margin:clamp(2.4rem,7vw,6rem) auto 0;
  padding-inline:var(--margem-palco);
  pointer-events:none;user-select:none;-webkit-user-select:none}
.rodape__gigante span{position:absolute;left:var(--margem-palco);top:0;display:block;
  font-size:clamp(7rem,25vw,27rem);line-height:.8;font-weight:var(--peso-extrabold);
  letter-spacing:var(--display-ls);color:var(--branco-08);white-space:nowrap}



/* ===== estilo/modal.css ===== */
/* ============================================================
   MODAL DE AGENDAMENTO
   ============================================================ */

.agenda{position:fixed;inset:0;z-index:50;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(.8rem,3vw,2rem)}
.agenda[hidden]{display:none}

/* o véu usa o scrim tokenizado da casa (o mesmo que cobre foto sob
   texto), em vez de uma alfa inventada aqui */
.agenda__veu{position:absolute;inset:0;background:var(--bora-preto);opacity:.62}

.agenda__caixa{position:relative;z-index:1;
  width:min(38rem,100%);max-height:92svh;overflow-y:auto;
  background:var(--cor-superficie);color:var(--cor-texto);
  border-radius:var(--raio-xl);
  padding:clamp(1.6rem,4vw,2.6rem)}

/* alvo de toque de 44px (medido em 19/08: o X tinha 37px e os campos
   36px, os dois abaixo do mínimo no celular) */
.agenda__fechar{position:absolute;top:.4rem;right:.5rem;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:var(--botao-alt-min);min-height:var(--botao-alt-min);
  background:none;border:0;cursor:pointer;line-height:1;
  font-size:1.8rem;color:var(--cor-texto-sutil);
  border-radius:var(--raio-sm)}
.agenda__fechar:hover{color:var(--cor-texto)}

/* o recuo à direita é o espaço do X: sem ele, no 390 a última palavra
   do título passa por baixo do botão de fechar (visto no print) */
.agenda__titulo{margin:0;padding-right:var(--esp-xl);
  font-size:var(--txt-xl);line-height:var(--lh-titulo);
  letter-spacing:var(--ls-titulo);font-weight:var(--peso-bold)}
.agenda__sub{margin:var(--esp-2xs) 0 0;color:var(--cor-texto-sutil);
  font-size:var(--txt-base)}

.agenda__bloco{border:0;margin:var(--esp-md) 0 0;padding:0}
.agenda__legenda{padding:0;margin-bottom:var(--esp-2xs)}

/* ============ a escolha ============
   linha, não caixa: cada opção é uma faixa com filete embaixo, e a
   escolhida acende com o neon à esquerda. O alvo de toque é a linha
   inteira. */
.opcao{display:flex;align-items:flex-start;gap:var(--esp-2xs);
  padding:var(--esp-2xs) var(--esp-2xs) var(--esp-2xs) var(--esp-xs);
  border-bottom:1px solid var(--cor-borda);
  border-left:var(--traco-alt) solid transparent;
  cursor:pointer;transition:border-color var(--dur-padrao) var(--ease-padrao),
                            background var(--dur-padrao) var(--ease-padrao)}
.opcao:hover{background:var(--cor-superficie-sutil)}
.opcao:has(input:checked){border-left-color:var(--cor-grafico);
  background:var(--cor-superficie-sutil)}
.opcao input{margin-top:.35rem;accent-color:var(--cor-marca-texto);flex:none}
.opcao__corpo{display:flex;flex-direction:column;gap:.15rem}
.opcao__dia{font-weight:var(--peso-bold);font-size:var(--txt-base)}
.opcao__lugar{font-size:var(--txt-sm);color:var(--cor-texto-sutil)}
.opcao__nota{margin-top:var(--esp-3xs);font-size:var(--txt-xs);
  line-height:var(--lh-media);color:var(--cor-texto-sutil);max-width:30rem}

/* ============ os campos ============
   campo em caixa está vetado: rótulo na margem, entrada na medida,
   filete atravessando */
.campo{display:flex;flex-direction:column;gap:.2rem;margin:var(--esp-sm) 0 0}
.campo__rotulo{font-size:var(--txt-xs);font-weight:var(--peso-bold);
  letter-spacing:var(--ls-kicker);text-transform:uppercase;
  color:var(--cor-texto-sutil)}
.campo__entrada{border:0;border-bottom:1px solid var(--cor-borda-forte);
  background:transparent;color:var(--cor-texto);
  font-family:var(--fonte-texto);font-size:var(--txt-base);
  min-height:var(--botao-alt-min);
  padding:var(--esp-2xs) 0;border-radius:0}
.campo__entrada:focus{outline:0;border-bottom-width:var(--traco-alt);
  border-bottom-color:var(--cor-marca-texto)}
.campo__entrada:focus-visible{outline:var(--foco-anel) solid var(--cor-foco);
  outline-offset:var(--foco-offset)}

.agenda__erro{margin:var(--esp-sm) 0 0;font-size:var(--txt-sm);
  color:var(--cor-erro);font-weight:var(--peso-bold)}
.agenda__erro[hidden]{display:none}

.agenda__acao{margin:var(--esp-md) 0 0}
.agenda__micro{margin:var(--esp-2xs) 0 0;font-size:var(--txt-sm);
  color:var(--cor-texto-sutil)}

.agenda__pendencia{margin:var(--esp-md) 0 0;font-size:var(--txt-xs);
  line-height:var(--lh-media);color:var(--cor-texto);
  background:var(--sys-aviso-fundo);border-left:var(--traco-alt) solid var(--sys-aviso);
  padding:var(--esp-2xs) var(--esp-xs);border-radius:var(--raio-xs)}

.agenda__okcorpo{margin:var(--esp-sm) 0 0;font-size:var(--txt-md);
  line-height:var(--lh-media)}
.agenda__okconvite{margin:var(--esp-sm) 0 0;font-size:var(--txt-lg);
  line-height:var(--lh-titulo);letter-spacing:var(--ls-titulo);
  font-weight:var(--peso-bold);color:var(--cor-texto)}

/* enquanto o envio está no ar: o botão fica claramente ocupado, em vez de
   parecer que o clique não pegou. Foi o que ele sentiu em 20/08 ("demorou
   um pouco pra concluir"). */
.btn[data-enviando]{opacity:.72;cursor:progress}
.agenda__form[data-enviando] .opcao,
.agenda__form[data-enviando] .campo__entrada{opacity:.6;pointer-events:none}
.agenda__ok[hidden]{display:none}

html.agenda-aberta{overflow:hidden}

/* a armadilha de robô sai da tela sem sair do formulário: display:none em
   campo de isca é o primeiro sinal que robô procura */
.agenda__isca{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ============ o mini calendário ============
   Pedido dele em 20/08: "podemos melhorar o formulário de inscrição,
   fazemos um mini calendário que cobre a semana atual e a seguinte,
   pois não adianta o lead marcar a data muito para frente".

   As duas semanas aparecem INTEIRAS, e não só os dias possíveis. É de
   propósito: só os dias possíveis esconderia que a terça desta semana
   já passou, e o mês inteiro esconderia que existe um limite. Vendo a
   grade, a pessoa entende sozinha por que a escolha é curta.

   Quem decide a janela e quais dias acendem é a plataforma, não o
   relógio do aparelho de quem está olhando. */
.cal[hidden]{display:none}
.cal__mes{margin:0 0 var(--esp-2xs);font-size:var(--txt-xs);
  text-transform:uppercase;letter-spacing:var(--ls-kicker);
  font-weight:var(--peso-bold);color:var(--cor-texto-sutil)}

.cal__grade{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
  gap:.2rem}
.cal__cab{font-size:var(--txt-xs);text-align:center;
  color:var(--cor-texto-fraco);padding-bottom:.15rem;
  letter-spacing:var(--ls-kicker);text-transform:uppercase}

/* dia que não dá: continua legível, mas claramente fora. Não é
   cinza-apagado a ponto de sumir, porque ele também informa. */
.cal__dia{display:flex;align-items:center;justify-content:center;
  min-height:var(--botao-alt-min);border-radius:var(--raio-sm);
  font-size:var(--txt-sm);font-variant-numeric:tabular-nums;
  color:var(--cor-texto-fraco);background:transparent;
  border:1px solid transparent}

/* dia que dá: o alvo de toque é a célula inteira */
.cal__dia--livre{cursor:pointer;color:var(--cor-texto);
  font-weight:var(--peso-bold);
  border-color:var(--cor-borda-forte);
  background:var(--cor-superficie-sutil);
  transition:border-color var(--dur-padrao) var(--ease-padrao),
             background var(--dur-padrao) var(--ease-padrao)}
.cal__dia--livre:hover{border-color:var(--cor-marca-texto)}
.cal__dia input{position:absolute;opacity:0;width:1px;height:1px}
.cal__dia:has(input:checked){background:var(--cor-marca);
  color:var(--cor-sobre-destaque);border-color:var(--cor-marca)}
.cal__dia:has(input:focus-visible){outline:var(--foco-anel) solid var(--cor-foco);
  outline-offset:var(--foco-offset)}

/* três estados, não dois. O dia que JÁ PASSOU não pode parecer igual ao
   dia que existe mas não é deste treino: no print de 20/08 o 17, 18, 19 e
   20 liam como opções recusadas, e não como dias que ficaram para trás. */
.cal__dia--passado{color:var(--cor-desabilitado-texto);
  text-decoration:line-through;text-decoration-thickness:1px}

/* hoje ancora a grade: sem ele a pessoa não sabe de onde está olhando */
.cal__dia--hoje{border-color:var(--cor-borda-forte);
  border-style:dashed}

.cal__nota{margin:var(--esp-2xs) 0 0;font-size:var(--txt-xs);
  line-height:var(--lh-media);color:var(--cor-texto-sutil)}


/* ===== estilo/responsivo.css ===== */
/* ============================================================
   CELULAR E TABLET · bloco único, no fim da folha

   Lei da casa (10/08): o responsivo mora num bloco só, no fim, e
   nunca espalhado seção a seção. Assim dá para provar por computed
   style que o desktop não mudou.
   ============================================================ */

@media (max-width:900px){

  /* o hero empilha e MUDA DE ORDEM (pedido dele em 19/08, olhando o
     celular): primeiro a logo, depois a foto da galera, e só então o
     rótulo, o título, o subtítulo e o botão. Tudo centralizado.
     A ordem só existe aqui: no desktop a foto continua à direita do
     texto, e isso está provado por computed style. */
  .hero__grade{grid-template-columns:1fr;gap:clamp(1.4rem,4vh,2.2rem)}
  .hero__foto{order:-1}
  .hero__foto img{aspect-ratio:1.35}

  .hero__marca{display:flex;justify-content:center}
  .hero__texto{align-items:center;text-align:center}
  /* o eyebrow é inline-flex com o traço antes: centralizar o bloco não
     basta, ele precisa centralizar o próprio conteúdo */
  .hero__texto .rotulo{justify-content:center}
  .hero__sub{margin-inline:auto}
  /* o grafismo tonal sai: medido em 10/08, ~1,4:1 em 390px não lê e
     vira sujeira atrás da foto */
  .hero__grafismo{display:none}

  /* as quatro caixas viram 2x2 no tablet */
  .quem__caixas{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* no estreito a assinatura precisa de massa: o tonal grande some,
     então o grafismo da S2 também sai (mesma medida de 10/08) */
  .quem__grafismo{display:none}

  .rodape__grade{grid-template-columns:1fr;gap:clamp(1.6rem,4vh,2.4rem)}
}

@media (max-width:560px){

  /* a manchete do hero desce um degrau da régua: com --txt-2xl ela
     quebrava em 4 linhas em 390px */
  .hero__titulo{font-size:var(--txt-xl)}
  .hero__sub{font-size:var(--txt-base)}
  /* o botão ocupa a largura: alvo de toque cheio, e ele é a única
     ação da dobra */
  .hero__acao .btn,
  .quem__acao .btn,
  .fecho__acao .btn,
  .agenda__acao .btn{width:100%}
  .hero__acao + .micro-cta{text-align:center}

  /* no 390 as caixas empilham: 2x2 deixaria cada uma com ~160px e a
     frase quebraria em 5 linhas */
  .quem__caixas{grid-template-columns:1fr}
  .quem__titulo{font-size:var(--txt-xl)}
  .quem__sub{font-size:var(--txt-base)}
  .caixa__texto{font-size:var(--txt-base)}
  .quem__virada{font-size:var(--txt-lg)}

  .fecho__miolo{padding:clamp(2.4rem,7vh,3.4rem) var(--esp-sm);
    min-height:min(42svh,23rem)}
  .fecho__raio{width:32rem;left:-13rem;top:60%}
  .fecho__lugares{font-size:var(--txt-sm)}

  .agenda{padding:0}
  .agenda__caixa{border-radius:var(--raio-lg) var(--raio-lg) 0 0;
    max-height:94svh;align-self:flex-end;width:100%}
}


/* ===== estilo/coerencia.css ===== */
/* ============================================================
   FOLHA DE COERÊNCIA · entra por último

   Aqui mora só o que a conferência da página inteira encontrar:
   divergência entre o que a lei da página diz e o que o navegador
   mede. Correção de conferência é bug, não gosto, e nunca se
   espalha nas folhas de seção.

   Vazia até a primeira medição.
   ============================================================ */