/* ============================================================
   GAMOR · camada de assinatura
   Herda dados/swipe/base (tokens, motion, componentes, fundos,
   ornamentos). Aqui entram só a rampa de marca, o --display e o
   DOM próprio das seções.
   Paleta oficial do catálogo: navy #1B3A6B, creme #F5EFE0,
   dourado #C9A84C.
   ============================================================ */

/* ---------- fontes ---------- */
@font-face{font-family:'Playfair Display';src:url('fonts/PlayfairDisplay-latin.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Playfair Display';src:url('fonts/PlayfairDisplay-latin-ext.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Archivo';src:url('fonts/Archivo-400700-latin.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';src:url('fonts/Archivo-400700-latin-ext.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- rampa de marca ----------
   Identidade nova de 28/09/2026: azul #1B3A6B, creme #F5EFE0, dourado
   #8B6914 sobre fundo claro e #C9A84C sobre fundo escuro, tirados do
   vetor em identidade/Identidade Visual Gamor. A rampa do azul foi
   recalculada a partir do #1B3A6B. */
:root{
  --m-50:#F2F6FB;  --m-100:#E3ECF6; --m-200:#C3D3E9; --m-300:#96B0D4;
  --m-400:#6A89BA; --m-500:#3C5A88; --m-600:#254778; --m-700:#1B3A6B;
  --m-800:#142C50; --m-900:#0E1E36; --m-ink:#081322;

  --acento:#8B6914; --acento-luz:#C9A84C; --acento-fundo:#f7f1e2;

  --fg:#1b2033; --linha:#e3ddce; --bg:#F5EFE0; --bg-vivo:#faf7ee;
  --branco:#ffffff; --cinza:#5b6076; --cinza-2:#8a8fa3;

  --f-display:'Playfair Display',Georgia,'Times New Roman',serif;
  --f-body:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --display:clamp(2.05rem,1.35rem + 2.5vw,3.35rem);

  --sobre-fg:#F5EFE0;
  --azulejo:url('img/azulejo.png');
}

body{background:var(--bg);font-family:var(--f-body);color:var(--fg)}
h1,h2,h3{font-family:var(--f-display);font-weight:600;letter-spacing:.005em}
h1{font-size:var(--display);line-height:1.08}
h2{line-height:1.08}
.sec p{max-width:62ch}

/* ---------- peças de marca ---------- */
.olho{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--f-body);font-size:var(--s--1);font-weight:600;
  color:var(--acento);margin-bottom:.9rem;
}
.olho::before{content:"";width:26px;height:1px;background:var(--acento);opacity:.7}
.f-escuro .olho{color:var(--acento-luz)}
.f-escuro .olho::before{background:var(--acento-luz)}

.faixa-azulejo{
  height:34px;background:var(--az-flor) repeat-x center/34px 34px;
  border-block:1px solid rgba(27,58,107,.12);
}

.marca-logo{display:flex;align-items:center;gap:.6rem;text-decoration:none}
.marca-logo img{height:46px;width:auto;display:block}

.cabeca{max-width:60ch;margin-bottom:clamp(28px,4vw,46px)}
.cabeca.centro{margin-inline:auto;text-align:center}
.cabeca p{color:var(--cinza);font-size:var(--s-1);margin-top:.8rem}
.f-escuro .cabeca p{color:rgba(245,239,224,.72)}
.f-escuro h2,.f-escuro h3,.f-escuro p,.f-escuro li{color:var(--sobre-fg)}

/* ---------- hero · vídeo tela inteira ----------
   O header flutua por cima com margin-top negativo. Um véu só,
   escuro embaixo e à esquerda, porque o texto pisa ali. Nada de
   padrão por cima da imagem. */

.hero-sub{max-width:50ch;font-size:var(--s-1);color:rgba(245,239,224,.86);margin-bottom:2rem}
.hero-ctas{display:flex;flex-wrap:wrap;gap:.9rem}

.site-header.escuro .marca-logo img{filter:none}

/* ---------- barra de prova ---------- */

/* ---------- cards genéricos ---------- */

/* portas */

/* produtos */

/* preparo */

/* sobre / faixa escura */

/* passos */

/* consumidor */

/* prova local */

/* formulário */

.linha-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}

/* catálogo */

.aviso{
  background:var(--acento-fundo);border:1px solid rgba(139,105,20,.3);
  border-radius:14px;
  padding:1rem 1.2rem;font-size:var(--s--1);color:#5F480E;margin-top:1.4rem;
}

/* ---------- responsivo ---------- */

@media (max-width:700px){
  .linha-2{grid-template-columns:1fr}
  
  
  
  
  
}

/* ---------- botão na cor da marca ----------
   A base pinta o .btn com --fg (tinta do texto). Na Gamor o botão é
   o navy da caravela, e o ghost ganha borda azul em vez de preta. */
.btn{background:var(--m-700);color:var(--bg)}
.btn:hover{box-shadow:0 10px 26px rgba(14,30,54,.3)}
.btn.ghost{background:transparent;color:var(--m-700);border-color:rgba(27,58,107,.3)}
.btn.ghost:hover{background:var(--m-700);color:var(--bg);border-color:var(--m-700)}
.f-escuro .btn{background:var(--acento-luz);color:var(--m-900)}
.f-escuro .btn.ghost{background:transparent;color:var(--bg);border-color:rgba(245,239,224,.45)}

/* ============================================================
   ESTRUTURA DE 18/09/2026
   Oito seções: abertura, a Gamor, clientes, a linha, revenda,
   onde encontrar, perguntas e contato.
   Desde 25/09/2026 são nove: o preparo entrou como 6, e onde
   encontrar, perguntas e contato passaram a 7, 8 e 9. Em 27/10/2026 o
   preparo saiu e a numeração ficou como estava. Azulejo entra como peça de
   composição (coluna, ladrilho, faixa), nunca por cima de imagem.
   ============================================================ */
:root{
  --az-flor:url('img/azulejo-flor.svg');
  --az-estrela:url('img/azulejo-estrela.svg');
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 2 · a gamor, editorial */

/* 3 · clientes, espaço reservado */
.clientes{background:var(--bg-vivo);padding:clamp(46px,7vh,76px) 0;border-block:1px solid var(--linha)}
.clientes-titulo{font-family:var(--f-display);font-size:var(--s-1);text-align:center;color:var(--m-700);
  margin:0 auto 1.8rem;max-width:none}

/* 4 · a linha, categorias */

.linha-rodape{margin-top:clamp(28px,4vw,44px);text-align:center}

/* 5 · revenda, faixa escura */

.revenda h2{font-size:var(--s-4);max-width:13ch}

/* 7 · onde encontrar */
.onde{background:var(--bg)}

.onde-filtros{display:none;gap:12px;flex-wrap:wrap;margin-bottom:clamp(20px,3vw,32px)}
.onde-filtros .fselect{min-width:200px}
.com-dados .onde-filtros{display:flex}
.pontos{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:0;margin:0}
.ponto{background:var(--branco);border:1px solid var(--linha);border-radius:14px;padding:22px;display:grid;gap:4px;align-content:start}
.ponto b{font-family:var(--f-display);font-size:var(--s-1);color:var(--m-800)}
.ponto-tipo{font-size:var(--s--2);font-weight:700;color:var(--acento);letter-spacing:.03em}
.ponto-end,.ponto-local{font-size:var(--s--1);color:var(--cinza)}
.ponto-mapa{margin-top:10px;font-weight:600;color:var(--m-700);font-size:var(--s--1)}
.onde-vazio{display:none;background:var(--branco);border:1px solid var(--linha);border-radius:16px;
  padding:clamp(22px,3vw,32px);max-width:720px}
.onde-vazio p{color:var(--fg);margin-bottom:1.1rem}
.sem-dados .onde-vazio,.sem-resultado .onde-vazio{display:block}
.sem-dados .pontos{display:none}

@media (max-width:960px){
  
  
  
  
  .pontos{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .pontos{grid-template-columns:1fr}
  
  
  
  .onde-filtros .fselect{min-width:0;flex:1 1 140px}
}

/* ============================================================
   PASSE DE DIREÇÃO · 18/09/2026
   Tipografia do catálogo impresso: títulos em versalete, destaque
   em itálico dourado. Fundo de cal com o creme só nas seções
   alternadas. Assinatura única: a calçada portuguesa. Tudo
   centralizado onde o conteúdo permite.
   ============================================================ */
@font-face{font-family:'Playfair Display SC';src:url('fonts/PlayfairDisplaySC-normal-400-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Playfair Display SC';src:url('fonts/PlayfairDisplaySC-normal-400-latin-ext.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Playfair Display SC';src:url('fonts/PlayfairDisplaySC-normal-700-latin.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Playfair Display SC';src:url('fonts/PlayfairDisplaySC-normal-700-latin-ext.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Playfair Display';src:url('fonts/PlayfairDisplay-italic-400-700-latin.woff2') format('woff2');font-weight:400 700;font-style:italic;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Playfair Display';src:url('fonts/PlayfairDisplay-italic-400-700-latin-ext.woff2') format('woff2');font-weight:400 700;font-style:italic;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --bg:#FBF9F4;            /* cal: as páginas de produto do catálogo e os muros caiados */
  --bg-vivo:#F5EFE0;       /* creme da marca, só nas seções alternadas */
  --f-versalete:'Playfair Display SC','Playfair Display',Georgia,serif;
  --calcada:url('img/calcada.svg');
}

/* títulos em versalete, destaque em itálico dourado */
main h2,.clientes-titulo,.onde h2{font-family:var(--f-versalete);font-weight:400;letter-spacing:.01em}
main h2 em,.clientes-titulo em{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:500;letter-spacing:0;color:var(--acento)}
.f-escuro h2 em{color:var(--acento-luz)}
main h2 em::after{content:none !important}
.reveal.in h2 em{color:var(--acento)}
.f-escuro .reveal.in h2 em{color:var(--acento-luz)}

/* assinatura: calçada portuguesa, mar largo do Rossio */

@keyframes mar-largo{to{background-position:-120px 0}}

/* hero centralizado, véu que escurece do centro para as bordas */

.hero-sub{margin-inline:auto;max-width:54ch}
.hero-ctas{justify-content:center}

/* cabeças de seção centralizadas por padrão */
.cabeca{margin-inline:auto;text-align:center}
.cabeca p{margin-inline:auto}

/* ritmo de fundo: cal e creme alternando entre as faixas escuras */
.linha{background:var(--bg)}
.onde{background:var(--bg)}
#perguntas{background-color:var(--bg-vivo)}

/* 4 · cards centralizados, ladrilho no topo do texto */

/* 5 · revenda em coluna */

/* 7 · onde encontrar */

.onde-filtros{justify-content:center}
.onde-vazio{margin-inline:auto;text-align:center}
.pontos{text-align:center}
.ponto{justify-items:center}

/* 8 · perguntas numa coluna central */

/* 9 · contato em coluna */

/* ============================================================
   ESTILO KÁCIO · 18/09/2026
   Bordas de 1px em azul translúcido, cantos largos, pílulas com
   ícone, peças que entram inclinadas e se endireitam no scroll,
   trilho de logos correndo. Referência: páginas do Kácio Design,
   como no material do Instituto.
   ============================================================ */
:root{--borda:rgba(27,58,107,.16);--borda-clara:rgba(245,239,224,.2);--raio:28px}

.btn{min-height:52px;gap:10px}
.btn.lg{min-height:56px}
.ico-zap{width:18px;height:18px;flex:none;display:inline-block}

.pilula{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:1px solid var(--borda);
  border-radius:999px;transition:background .3s var(--ease,ease),color .3s var(--ease,ease),border-color .3s var(--ease,ease)}

.giro{transform:rotate(var(--giro,0deg));will-change:transform}

.ponto{border-radius:22px;border-color:var(--borda)}
.onde-vazio{border-radius:var(--raio);border-color:var(--borda)}

.form-card{border-radius:var(--raio)}

/* trilho de logos: duas listas iguais andando juntas, volta sem emenda */
.trilho-janela{display:flex;gap:16px;overflow:hidden;
  -webkit-mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
          mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.trilho{list-style:none;display:flex;gap:16px;padding:0;margin:0;flex:none;animation:trilho 36s linear infinite}
.trilho li{flex:none;width:180px;height:74px;display:grid;place-items:center;
  border:1px dashed rgba(27,58,107,.26);border-radius:18px;color:var(--cinza-2);
  font-size:var(--s--2);font-weight:600;letter-spacing:.04em}
.trilho-janela:hover .trilho{animation-play-state:paused}
@keyframes trilho{to{transform:translateX(calc(-100% - 16px))}}
@media (prefers-reduced-motion:reduce){.trilho{animation:none}}
@media (max-width:620px){.trilho li{width:140px;height:64px}}

/* ============================================================
   POLISH IMPECCABLE · 18/09/2026
   ============================================================ */
:root{--acento-texto:#7D5E12}   /* dourado da identidade (#8B6914) escurecido para texto pequeno, 5,2:1 no creme */
.olho,.ponto-tipo{color:var(--acento-texto)}
.olho::before{background:var(--acento-texto)}
.f-escuro .olho{color:var(--acento-luz)}
.rodape .rod-titulo{font-family:var(--f-body);font-size:var(--s--2);font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--acento-texto);margin:0 0 12px;line-height:1.4}

.revenda h2{max-width:20ch}

/* ============================================================
   ABERTURA E SEÇÃO 2 · aprovadas em 18/09/2026
   Board rodada 2: a capa do catálogo (B) com o movimento de entrar
   pela janela (C). O arco com moldura dupla e a caravela no fecho
   cresce com o scroll até o vídeo ocupar a tela. A seção 2 é o
   cartão de topo em arco subindo por cima do fim do vídeo, com a
   foto solta em polaroide.
   ============================================================ */
.portal{--lado:29vw;--topo:58vh;position:relative;height:230vh;background:var(--bg);
  margin-top:calc(-1 * (var(--header-h,72px) + 28px))}
.portal .palco{position:sticky;top:0;height:100vh;overflow:hidden;isolation:isolate}
.portal .palco::before{content:"";position:absolute;right:-4%;top:0;z-index:0;pointer-events:none;
  width:min(1100px,90vw);height:min(760px,62vw);
  background:url('img/belem-topo.webp') no-repeat right top/contain;opacity:.9;
  -webkit-mask:linear-gradient(180deg,#000 45%,transparent 92%);mask:linear-gradient(180deg,#000 45%,transparent 92%)}
.portal-texto{position:absolute;left:0;right:0;top:clamp(118px,15vh,150px);z-index:3;text-align:center;padding:0 var(--gutter);
  opacity:calc(1 - var(--p,0) * 2.4);transform:translateY(calc(var(--p,0) * -70px))}
.portal-texto h1{max-width:16ch;margin:0 auto 1.1rem;color:var(--m-900);font-size:clamp(2.4rem,1.3rem + 3.8vw,4.6rem);line-height:1.04}
.portal-texto h1 em{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:500;color:var(--acento)}
.portal-texto h1 em::after{content:none !important}
.portal-texto .hero-sub{color:var(--cinza);max-width:54ch;margin:0 auto 2rem;font-size:var(--s-1)}
.portal-texto .hero-ctas{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center}
.portal-texto .btn.ghost{background:transparent;color:var(--m-700);border-color:rgba(27,58,107,.3)}
.portal-texto .btn.ghost:hover{background:var(--m-700);color:var(--bg);border-color:var(--m-700)}
/* o raio gigante é reduzido pelo navegador até virar meio círculo exato, e some quando --p chega a 1 */
.portal-janela{position:absolute;inset:0;z-index:1;
  clip-path:inset(calc(var(--topo) * (1 - var(--p,0))) calc(var(--lado) * (1 - var(--p,0))) 0 calc(var(--lado) * (1 - var(--p,0)))
    round calc((1 - var(--p,0)) * 50vw) calc((1 - var(--p,0)) * 50vw) 0 0)}
.portal-janela video{width:100%;height:100%;object-fit:cover;display:block}
.portal-janela::after{content:"";position:absolute;inset:0;pointer-events:none;background:rgba(11,24,45,calc(var(--p,0) * .3))}
.portal-moldura{position:absolute;z-index:2;left:var(--lado);right:var(--lado);top:var(--topo);bottom:0;pointer-events:none;
  border-radius:999px 999px 0 0;
  box-shadow:0 0 0 1px rgba(201,168,76,.75),0 0 0 11px var(--bg),0 0 0 12px rgba(201,168,76,.45);
  opacity:calc(1 - var(--p,0) * 5)}
.fecho{position:absolute;left:50%;top:-38px;width:76px;height:76px;margin-left:-38px;border-radius:50%;
  background:var(--m-700);display:grid;place-items:center;
  box-shadow:0 0 0 1px rgba(201,168,76,.9),0 0 0 7px var(--bg),0 0 0 8px rgba(201,168,76,.5),0 14px 30px -12px rgba(14,30,54,.6)}
.fecho img{width:44px;height:auto}
.portal.estatico{height:auto}
.portal.estatico .palco{position:relative}
@media (max-width:760px){.portal{--lado:8vw;--topo:64vh}}

.receita{position:relative;z-index:4;margin-top:-220px;padding:0 var(--gutter) clamp(80px,12vh,130px);
  background:linear-gradient(transparent 220px,var(--bg) 220px)}
.cartao-arco{position:relative;width:min(760px,100%);margin:0 auto;background:var(--bg);text-align:center;
  border-radius:50% 50% 28px 28px / 26% 26% 28px 28px;
  padding:clamp(96px,11vw,130px) clamp(26px,5vw,64px) clamp(40px,5vw,58px);
  box-shadow:0 0 0 1px rgba(201,168,76,.7),0 0 0 10px var(--bg),0 0 0 11px rgba(201,168,76,.4),0 44px 80px -50px rgba(14,30,54,.6)}
.cartao-arco h2{font-size:var(--s-4);max-width:16ch;margin:0 auto 1.3rem;color:var(--m-800)}
.cartao-arco p{max-width:56ch;margin:0 auto;font-size:var(--s-1);line-height:1.72}
.selo{position:absolute;left:50%;top:34px;width:60px;height:60px;margin-left:-30px;border-radius:50%;background:var(--bg);
  display:grid;place-items:center;box-shadow:0 0 0 1px rgba(201,168,76,.8),0 10px 24px -12px rgba(14,30,54,.5)}
.selo img{width:34px;height:auto}
.polaroide{position:absolute;right:-110px;top:-150px;z-index:2;width:220px;background:#fff;padding:10px 10px 34px;
  box-shadow:0 26px 50px -24px rgba(14,30,54,.6)}
.polaroide img{display:block;width:100%;aspect-ratio:1;object-fit:cover}
@media (max-width:960px){.polaroide{right:-12px;top:-110px;width:150px;padding:7px 7px 24px}}

/* ============================================================
   ÁREAS 3 E 4 · aprovadas em 18/09/2026 (board: 3A e 4A)
   ============================================================ */
/* 3 · faixa corrida entre dois fios dourados, losango entre os logos */
.clientes{background:var(--bg);padding:clamp(48px,7vh,76px) 0;border-block:0}
.clientes-titulo{margin-bottom:26px}
.clientes-titulo em{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:500;color:var(--acento)}
.corrida{border-block:1px solid rgba(201,168,76,.55);padding:22px 0}
.corrida .trilho li{width:auto;height:auto;border:0;border-radius:0;padding:0 34px;position:relative;
  font-family:var(--f-versalete);font-size:var(--s-1);font-weight:400;color:rgba(27,58,107,.45);letter-spacing:.04em}
.corrida .trilho li::after{content:"";position:absolute;right:-5px;top:50%;width:8px;height:8px;margin-top:-4px;
  background:var(--acento-luz);transform:rotate(45deg)}

/* 4 · arcada: janelas de arco lado a lado, como o claustro dos Jerónimos */
.arcada{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);max-width:1080px;margin:0 auto;text-align:center}
.arco-foto{display:block;aspect-ratio:3/4;border-radius:999px 999px 18px 18px;overflow:hidden;margin-bottom:1.4rem;
  box-shadow:0 0 0 1px rgba(201,168,76,.75),0 0 0 9px var(--bg),0 0 0 10px rgba(201,168,76,.4)}
.arco-foto img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease,ease)}
.arcada article:hover .arco-foto img{transform:scale(1.06)}
.arcada h3{font-family:var(--f-versalete);font-weight:400;font-size:var(--s-2);color:var(--m-800);margin-bottom:.45rem}
.arcada p{color:var(--cinza);font-size:var(--s-0);max-width:30ch;margin:0 auto 1.1rem}
.arcada .pilula{text-decoration:none;color:var(--m-700);font-weight:600;font-size:var(--s--1)}
.arcada .pilula:hover,.arcada .pilula:focus-visible{background:var(--m-700);color:var(--bg);border-color:var(--m-700)}
@media (max-width:820px){.arcada{grid-template-columns:1fr;max-width:420px}}

/* ============================================================
   ÁREA 6 · aprovada em 18/09/2026 (board: 6C)
   A busca num cartão de topo em arco que sobe por cima do fim da
   seção anterior. Desde 27/10/2026, sem o preparo, volta a ser a
   revenda: a faixa do topo continua o azul do fim dela.
   ============================================================ */
.onde{position:relative;z-index:4;margin-top:-160px;padding:0 var(--gutter) clamp(80px,12vh,130px);
  background:linear-gradient(transparent 160px,var(--bg) 160px)}
.revenda + .onde{margin-top:0;background:linear-gradient(#0C1B32 160px,var(--bg) 160px)}
.cartao-busca{position:relative;max-width:900px;margin:0 auto;background:var(--bg);text-align:center;
  border-radius:50% 50% 28px 28px / 22% 22% 28px 28px;
  padding:clamp(100px,11vw,130px) clamp(22px,5vw,56px) clamp(36px,5vw,50px);
  box-shadow:0 0 0 1px rgba(201,168,76,.7),0 0 0 10px var(--bg),0 0 0 11px rgba(201,168,76,.4),0 44px 80px -50px rgba(14,30,54,.6)}
.cartao-busca h2{font-size:var(--s-4);max-width:17ch;margin:0 auto 1.1rem;color:var(--m-800)}
.onde-lead{max-width:46ch;margin:0 auto;font-size:var(--s-1);color:var(--cinza)}
.cartao-busca .onde-filtros{justify-content:center;margin:24px 0 0}
.cartao-busca .onde-filtros .fselect{width:auto;min-width:200px}
.cartao-busca .pontos{margin-top:28px}
.cartao-busca .onde-vazio{display:none;max-width:none;margin:26px 0 0;padding:24px 0 0;background:transparent;border:0;border-top:1px solid var(--borda);border-radius:0}
.cartao-busca.sem-dados .onde-vazio,.cartao-busca.sem-resultado .onde-vazio{display:block}
.cartao-busca.sem-dados .onde-vazio{border-top:0;padding-top:4px}

/* ============================================================
   ESCOLHAS DE 24/09/2026 · revenda 10, perguntas 4, contato 5
   e catálogo 9 do painel de variações
   ============================================================ */
/* 5 · revenda: convite que se abre com o scroll */
.revenda{position:relative;height:240vh;background:radial-gradient(ellipse 80% 70% at 50% 0%,#224373 0%,#142C50 55%,#0C1B32 100%);color:var(--bg);padding:0}
.revenda .palco{position:sticky;top:0;height:100vh;display:grid;place-items:center;padding:0 var(--gutter);overflow:hidden}
.revenda-miolo{text-align:center;width:100%}
.revenda h2{font-size:var(--s-4);max-width:17ch;margin:0 auto .6rem;color:var(--bg)}
.revenda h2 em{color:var(--acento-luz)}
.revenda-lead{max-width:48ch;margin:0 auto clamp(20px,3vw,32px);font-size:var(--s-1);color:rgba(245,239,224,.8)}
.convite{position:relative;width:min(820px,92vw,calc((100vh - 420px) * 1.78));aspect-ratio:16/9;perspective:1800px;margin:0 auto}
.convite .miolo{position:absolute;inset:0;border-radius:18px;background:var(--bg);display:grid;grid-template-columns:1fr 1.1fr 1fr;align-items:center;text-align:center;padding:0 2%;box-shadow:0 0 0 1px rgba(201,168,76,.7),0 60px 100px -50px rgba(0,0,0,.8)}
.convite .miolo b{display:block;font-family:var(--f-versalete);font-weight:400;font-size:var(--s-2);color:var(--m-800)}
.convite .miolo span{display:block;color:var(--cinza);font-size:var(--s--1);max-width:22ch;margin:6px auto 12px}
.convite .miolo .btn{background:var(--m-700);color:var(--bg);min-height:44px;padding:8px 16px;font-size:var(--s--1)}
.convite .miolo .ft{aspect-ratio:3/4;border-radius:999px 999px 14px 14px;overflow:hidden;max-height:80%;box-shadow:0 0 0 1px rgba(201,168,76,.75),0 0 0 7px var(--bg),0 0 0 8px rgba(201,168,76,.4)}
.convite .miolo .ft img{width:100%;height:100%;object-fit:cover}
.folha-c{position:absolute;top:0;bottom:0;width:50%;background:linear-gradient(180deg,#21467D,#1B3A6B 45%,#142C50);display:grid;place-items:center;backface-visibility:hidden}
.folha-c.esq{left:0;border-radius:18px 0 0 18px;transform-origin:left center;transform:rotateY(calc(var(--p,0) * -165deg))}
.folha-c.dir{right:0;border-radius:0 18px 18px 0;transform-origin:right center;transform:rotateY(calc(var(--p,0) * 165deg))}
.folha-c::before{content:"";position:absolute;inset:14px;border:1px solid rgba(201,168,76,.5);border-radius:10px}
.folha-c.esq::before{border-right:0;border-radius:10px 0 0 10px}.folha-c.dir::before{border-left:0;border-radius:0 10px 10px 0}
.folha-c img{width:30%;opacity:.9}
.folha-c small{font-family:var(--f-versalete);color:var(--acento-luz);font-size:var(--s-0);letter-spacing:.06em}
.revenda .dica{margin:18px 0 0;font-size:var(--s--1);color:rgba(245,239,224,.6);opacity:calc(1 - var(--p,0) * 3)}
.revenda.estatico{height:auto;padding:clamp(80px,11vh,120px) 0}
.revenda.estatico .palco{position:relative;height:auto}
.revenda.estatico .folha-c{display:none}
.revenda.estatico .dica{display:none}
/* no celular o cartão cresce com o conteúdo: com proporção fixa, o texto
   passava do cartão em tela baixa (360x640 e 360x700). As folhas seguem
   cobrindo o miolo porque são absolutas dentro do .convite. */
@media (max-width:700px){
  .convite{aspect-ratio:auto;width:min(92vw,400px)}
  .convite .miolo{position:relative;inset:auto;grid-template-columns:1fr;gap:var(--e-m);padding:var(--e-m) var(--e-s)}
  .convite .miolo .ft{display:none}
}
/* tela muito baixa (iPhone SE antigo, 320x568): a cena presa não cabe
   inteira, então a revenda rola normal, igual ao modo sem movimento */
@media (max-width:700px) and (max-height:600px){
  .revenda{height:auto;padding:clamp(56px,9vh,80px) 0}
  .revenda .palco{position:relative;height:auto}
  .revenda .folha-c,.revenda .dica{display:none}
}

/* 8 · perguntas: conversa */
.perguntas{background:var(--bg-vivo)}
.conversa{max-width:680px;margin:0 auto;display:grid;gap:14px}
.conversa .msg{display:flex;gap:10px;align-items:flex-end;opacity:0;transform:translateY(10px);transition:opacity .5s,transform .5s}
.conversa.in .msg{opacity:1;transform:none}
.conversa .msg.eu{justify-content:flex-end}
.conversa .av{width:36px;height:36px;border-radius:50%;background:var(--bg);display:grid;place-items:center;flex:none;box-shadow:0 0 0 1px rgba(201,168,76,.7)}
.conversa .av img{width:22px;height:auto}
.conversa .balao{max-width:78%;padding:12px 16px;border-radius:18px;font-size:var(--s-0);line-height:1.55}
.conversa .msg.eu .balao{background:var(--m-700);color:var(--bg);border-bottom-right-radius:4px;font-family:var(--f-versalete)}
.conversa .msg.ela .balao{background:#fff;color:var(--fg);border-bottom-left-radius:4px;box-shadow:0 1px 2px rgba(0,0,0,.08)}
@media (prefers-reduced-motion:reduce){.conversa .msg{opacity:1;transform:none;transition:none}}


/* catálogo · famílias que abrem */
.familias{max-width:1000px;margin:0 auto;display:grid;gap:14px}
.familia{border:0;border-radius:22px;overflow:hidden;background:var(--bg);box-shadow:0 0 0 1px rgba(201,168,76,.55);padding:0}
.familia:hover,.familia[open]{border-color:transparent;box-shadow:0 0 0 1px rgba(201,168,76,.75)}
.familia summary{list-style:none;position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;padding:0;cursor:pointer;color:var(--bg);min-height:120px;isolation:isolate}
.familia summary::after{content:none}
.familia summary::-webkit-details-marker{display:none}
.familia summary img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.familia summary::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,24,45,.82),rgba(11,24,45,.45));z-index:-1}
.familia summary b{font-family:var(--f-versalete);font-weight:400;font-size:var(--s-2);padding:0 28px}
.familia summary span{padding:0 28px;font-size:var(--s--1);color:rgba(245,239,224,.8)}
.familia .itens{padding:10px 26px 22px}
.familia .it{display:grid;grid-template-columns:90px 1fr auto;gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--borda)}
.familia .it:last-child{border-bottom:0}
.familia .it img{width:90px;height:68px;object-fit:contain}
.nome-c{font-family:var(--f-versalete);font-weight:400;color:var(--m-800);line-height:1.15}
.familia .dados{font-size:var(--s--2);color:var(--cinza);font-variant-numeric:tabular-nums;display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:4px}
.familia .pilula{text-decoration:none;color:var(--m-700);font-weight:600;font-size:var(--s--1);white-space:nowrap}
.familia .pilula:hover{background:var(--m-700);color:var(--bg);border-color:var(--m-700)}
@media (max-width:620px){.familia .it{grid-template-columns:70px 1fr}.familia .it .pilula{grid-column:2;justify-self:start}}

/* ============================================================
   PRIVACIDADE E COOKIES (28/09/2026)
   Página da política e aviso de cookies no padrão do guia da ANPD
   (out/2022): rejeitar, aceitar e gerenciar com o mesmo formato e
   destaque, categorias desligadas por padrão, escolha revisável.
   ============================================================ */
.politica{max-width:68ch;margin:0 auto;padding:calc(var(--header-h,72px) + var(--e-xl)) var(--gutter) var(--e-2xl)}
.politica h1{font-family:var(--f-versalete);font-weight:400;font-size:var(--s-4);color:var(--m-800);margin-bottom:var(--e-xs)}
.politica h1 em{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:500;color:var(--acento)}
.politica h1 em::after{content:none !important}
.politica-data{color:var(--cinza);font-size:var(--s--1);margin-bottom:var(--e-l)}
.politica h2{font-family:var(--f-versalete);font-weight:400;font-size:var(--s-2);color:var(--m-800);margin:var(--e-l) 0 var(--e-xs)}
.politica p,.politica li{color:var(--fg)}
.politica ul{padding-left:1.2em;margin:0 0 1em}
.politica li{margin-bottom:var(--e-2xs)}
.politica a{color:var(--m-700)}
.link-cookies,.rod-link{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}
.link-cookies{color:var(--m-700)}
.rod-legal{display:flex;flex-wrap:wrap;gap:var(--e-2xs) var(--e-s);margin-top:var(--e-2xs)}
.rod-legal a,.rod-legal button{display:inline-flex;align-items:center;min-height:24px;color:var(--cinza);font-size:var(--s--1)}

.ck{position:fixed;left:var(--gutter);right:var(--gutter);bottom:var(--e-s);z-index:200;max-width:640px;margin:0 auto;
  background:var(--bg);color:var(--fg);border-radius:20px;padding:var(--e-m) var(--e-m) var(--e-s);
  box-shadow:0 0 0 1px rgba(201,168,76,.7),0 30px 60px -30px rgba(14,30,54,.55);
  transform:translateY(0);opacity:1;transition:transform .45s var(--ease,ease),opacity .45s}
.ck[hidden]{display:none}
.ck.entra{transform:translateY(24px);opacity:0}
.ck h2{font-family:var(--f-versalete);font-weight:400;font-size:var(--s-1);color:var(--m-800);margin:0 0 var(--e-2xs)}
.ck p{font-size:var(--s--1);color:var(--fg);margin:0 0 var(--e-s)}
.ck p a{color:var(--m-700)}
.ck-acoes{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e-xs)}
.ck-btn{min-height:44px;padding:10px 14px;border-radius:999px;border:1px solid var(--m-700);background:var(--bg);color:var(--m-700);
  font:600 var(--s--1)/1.2 var(--f-body);cursor:pointer;transition:background .2s,color .2s}
.ck-btn:hover,.ck-btn:focus-visible{background:var(--m-700);color:var(--bg)}
.ck-cats{list-style:none;padding:0;margin:0 0 var(--e-s);display:grid;gap:var(--e-xs)}
.ck-cats li{display:grid;grid-template-columns:1fr auto;gap:var(--e-xs);align-items:center;padding:var(--e-xs) 0;border-top:1px solid rgba(27,58,107,.14)}
.ck-cats b{display:block;font-size:var(--s--1);color:var(--m-800)}
.ck-cats span{display:block;font-size:var(--s--1);color:var(--cinza)}
.ck-cats small{font-size:var(--s--1);color:var(--cinza);white-space:nowrap}
.ck-chave{position:relative;width:48px;height:28px;flex:none}
.ck-chave input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:1}
.ck-chave i{position:absolute;inset:0;border-radius:999px;background:rgba(27,58,107,.2);transition:background .2s}
.ck-chave i::after{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s}
.ck-chave input:checked + i{background:var(--m-700)}
.ck-chave input:checked + i::after{transform:translateX(20px)}
.ck-chave input:focus-visible + i{outline:2px solid var(--acento);outline-offset:2px}
.ck-nav{font-size:var(--s--1);color:var(--cinza);margin:0 0 var(--e-s)}
@media (max-width:520px){.ck-acoes{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.ck{transition:none}}

/* ============================================================
   9 · CONTATO, opção 2 do board v-contato-2 (28/09/2026)
   Cartão creme com topo em arco e moldura dupla sobre a foto dos
   pastéis, igual ao cartão da busca. A caravela fica no alto do arco.
   ============================================================ */
.ct2{position:relative;padding:var(--e-2xl) var(--gutter);overflow:hidden;background:#0C1B32}
.ct2-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.55)}
.ct2-cartao{position:relative;max-width:640px;margin:0 auto;background:var(--bg);text-align:center;
  border-radius:50% 50% 28px 28px / 22% 22% 28px 28px;
  padding:calc(clamp(20px,2.4vw,30px) + 84px + var(--e-m)) clamp(22px,5vw,56px) clamp(34px,5vw,48px);
  box-shadow:0 0 0 1px rgba(201,168,76,.7),0 0 0 10px var(--bg),0 0 0 11px rgba(201,168,76,.4),0 44px 80px -40px rgba(0,0,0,.7)}
.ct2 h2{font-family:var(--f-versalete);font-weight:400;font-size:var(--s-4);line-height:1.06;margin:0;color:var(--m-800)}
.ct2 h2 em{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:500;color:var(--acento)}
.ct2 h2 em::after{content:none !important}
.ct-selo{position:absolute;left:50%;top:clamp(20px,2.4vw,30px);margin-left:-42px;width:84px;height:84px;border-radius:50%;background:var(--m-700);
  display:grid;place-items:center;box-shadow:0 0 0 1px rgba(201,168,76,.9),0 0 0 6px var(--bg),0 0 0 7px rgba(201,168,76,.45)}
.ct-selo img{width:48px;height:auto}
.ct-zap{margin-top:var(--e-m)}
.ct-zap .ico-zap{width:20px;height:20px}
.ct-info{list-style:none;padding:0;margin:var(--e-l) 0 0;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--e-xs)}
.ct-info li{display:inline-flex;border-radius:999px;font-size:var(--s--1);border:1px solid rgba(201,168,76,.55)}
.ct-info li > span,.ct-info a{display:inline-flex;align-items:center;gap:var(--e-2xs);min-height:44px;padding:8px 16px;color:inherit;text-decoration:none;border-radius:999px}
.ct-info svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.ct-info.claro li{color:var(--m-800);background:var(--bg)}

/* ============================================================
   REVISÃO DE 28/09/2026 · defeitos achados na página inteira
   ============================================================ */
/* 1 · header no celular: o logo e o menu encolhiam e o logo ficava
   achatado. Logo e menu não encolhem, e até 480px o botão do topo
   vira só o ícone (o texto segue lá para leitor de tela). */
.marca-logo,.burger{flex:none}
@media (max-width:480px){
  .site-header .nav-pill > .btn{width:44px;height:44px;min-height:44px;padding:0;gap:0;font-size:0;justify-content:center}
  .site-header .nav-pill > .btn .ico-zap{width:22px;height:22px}
}
/* 2 · rodapé no celular: o botão flutuante cobria os links legais */
@media (max-width:1024px){.rodape{padding-bottom:96px}}
/* 5 · convite em cartão estreito (notebook baixo): o texto invadia a
   foto do meio. A coluna respeita a largura e o título encolhe. */
.convite{container-type:inline-size}
.convite .miolo{column-gap:var(--e-xs)}
.convite .miolo > div{min-width:0}
.convite .miolo span{max-width:min(22ch,100%)}
@container (max-width:640px){.convite .miolo b{font-size:var(--s-1)}}
/* 6 · aviso de cookies aberto: o botão flutuante some por baixo dele */
.ck-aberto .zap{opacity:0;pointer-events:none}

/* 30/09/2026 · logo horizontal no header e faixa de logos escondida */
.clientes[hidden]{display:none !important}
@media (max-width:480px){.marca-logo img{height:36px}}

/* ---------- catálogo: formulário em diálogo, o PDF baixa depois do envio ---------- */
.cat-dialogo{border:0;padding:0;margin:auto;background:transparent;color:var(--fg);
  width:min(560px,calc(100vw - 2*var(--gutter)));max-width:none;max-height:calc(100dvh - 32px);overflow:visible}
.cat-dialogo::backdrop{background:rgba(14,30,54,.6)}
.cat-dialogo[open]{animation:cat-entra .35s var(--ease,ease)}
@keyframes cat-entra{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.cat-caixa{position:relative;background:var(--bg);border-radius:var(--raio);
  padding:clamp(26px,4vw,42px) clamp(20px,4vw,40px) clamp(22px,3vw,34px);
  box-shadow:0 0 0 1px rgba(201,168,76,.7),0 30px 60px -30px rgba(14,30,54,.55);
  max-height:calc(100dvh - 32px);overflow:auto}
.cat-caixa h2{font-size:var(--s-3);color:var(--m-800);margin:0 0 var(--e-m);padding-right:48px}
.cat-caixa h2:focus{outline:none}
.cat-caixa p{margin:0 0 var(--e-s)}
.cat-fechar{position:absolute;top:14px;right:14px;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--borda);background:transparent;color:var(--m-700);font-size:26px;line-height:1;cursor:pointer}
.cat-fechar:hover{background:var(--m-700);color:var(--bg)}
.cat-form .linha-2{gap:0 1rem}
.cat-outro[hidden],.cat-etapa[hidden]{display:none}
.cat-mel{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cat-aviso{font-size:var(--s--1);color:var(--cinza);margin:var(--e-2xs) 0 var(--e-s)}
.cat-aviso a{color:var(--m-700)}
.cat-form .btn{width:100%}
.cat-form .btn[disabled]{opacity:.7;cursor:progress}
@media (max-width:560px){.cat-form .linha-2{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.cat-dialogo[open]{animation:none}}

/* 27/10/2026 · página 404: o cartão em arco da seção 2 sobre o azul da revenda */
.nao-encontrada{min-height:100vh;display:grid;place-items:center;
  padding:calc(var(--header-h,72px) + var(--e-xl)) var(--gutter) var(--e-2xl);
  background:radial-gradient(ellipse 80% 70% at 50% 0%,#224373 0%,#142C50 55%,#0C1B32 100%)}
.nao-encontrada h1{font-family:var(--f-versalete);font-weight:400;font-size:var(--s-4);max-width:16ch;margin:0 auto 1.3rem;color:var(--m-800)}
.nao-encontrada h1 em{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:500;color:var(--acento)}
.nao-encontrada .btn{margin-top:var(--e-l)}