/* ═══════════════════════════════════════════════════════════════
   TERRANOVA — home, coleções, header e rodapé no layout da agência
   (terranova (Copy)/home.pdf e colecoes.pdf, artboard de 1440 px: as
   medidas abaixo em px vêm dele); demais páginas na estrutura do tema
   Stretch. Cores do Guia de Identidade Visual: Azul Terranova #00234B,
   fundo lavanda #FAF9FF, creme #F6F5EA nos botões e títulos sobre foto.
   Botões retos, sem pílula. ES Allianz no texto; títulos serifados em
   Lyon Display — enquanto o arquivo licenciado não chega, Newsreader
   (fonts/newsreader-400.woff2) ocupa o lugar. Basta pôr os arquivos da
   Lyon em assets/font/Lyon Display/ e rodar o build: ele converte e
   declara a família no <head>, e ela assume por vir antes em --f-serif.
   ═══════════════════════════════════════════════════════════════ */
/* ── ES Allianz (Extraset) — tipografia principal da marca, hospedada aqui.
   Guia de identidade: títulos ES Allianz Book (Lyon Display Medium quando
   a família chegar), subtítulos e títulos de texto Book, texto Light,
   tracking 0. Cor de texto: Azul Terranova #00234B. ── */
@font-face{ font-family:"ES Allianz"; font-weight:200; font-style:normal; font-display:swap; src:url("/fonts/es-allianz-200.woff2") format("woff2"); }
@font-face{ font-family:"ES Allianz"; font-weight:300; font-style:normal; font-display:swap; src:url("/fonts/es-allianz-300.woff2") format("woff2"); }
@font-face{ font-family:"ES Allianz"; font-weight:300; font-style:italic; font-display:swap; src:url("/fonts/es-allianz-300i.woff2") format("woff2"); }
@font-face{ font-family:"ES Allianz"; font-weight:400; font-style:normal; font-display:swap; src:url("/fonts/es-allianz-400.woff2") format("woff2"); }
@font-face{ font-family:"ES Allianz"; font-weight:400; font-style:italic; font-display:swap; src:url("/fonts/es-allianz-400i.woff2") format("woff2"); }
@font-face{ font-family:"ES Allianz"; font-weight:500; font-style:normal; font-display:swap; src:url("/fonts/es-allianz-500.woff2") format("woff2"); }
@font-face{ font-family:"ES Allianz"; font-weight:600; font-style:normal; font-display:swap; src:url("/fonts/es-allianz-600.woff2") format("woff2"); }
@font-face{ font-family:"ES Allianz"; font-weight:700; font-style:normal; font-display:swap; src:url("/fonts/es-allianz-700.woff2") format("woff2"); }
/* substituta da Lyon Display (Newsreader, OFL, subconjunto latino, eixo óptico 6–72) */
/* size-adjust: a Newsreader é ~12% mais larga que a Lyon; reduzida, os títulos
   ocupam a largura do layout com os tamanhos reais do Figma (140, 128, 72) */
@font-face{ font-family:"Newsreader"; font-weight:300 400; font-style:normal; font-display:swap; size-adjust:87.7%; src:url("/fonts/newsreader-400.woff2") format("woff2"); }
:root{
  --bg:#faf9ff; --bg-2:#f0f0f0; --bg-3:#f9f8fe;   /* fundo das fotos de estúdio */
  --creme:#f6f5ea;
  --text:#00234B; --text-60:rgba(0,35,75,.6);   /* Azul Terranova */
  --white:#fff;
  --azul:#00234B; --azul-escuro:#0a3468;
  --tinta:#0B0D21;                          /* fundo do vídeo enquanto carrega */
  --btn-fundo:#00234B; --btn-texto:#fff; --btn2-fundo:#f6f5ea; --btn2-texto:#00234B;

  --f-head:"ES Allianz",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --f-text:var(--f-head);
  --f-serif:"Lyon Display","Newsreader",Georgia,serif;   /* Lyon Arabic Display Light no Figma */
  /* pesos da ES Allianz nesta família: Extralight 200 · Light 300 · Book 500 · Medium 600 */
  --w-text:500; --w-medium:600;
  --ls-text:0; --ls-caps:.05em;

  --text-xs:.75rem; --text-sm:.875rem; --text-base:1rem;   /* 12 · 14 · 16 px */
  --gutter:1.25rem; --radius-btn:0;
  --header-h:64px;
  --ease-out:cubic-bezier(.16,1,.3,1); --ease-soft:cubic-bezier(.22,1,.36,1);
}

@media (min-width:1000px){ :root{ --gutter:40px; --header-h:92px; } }
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font:var(--w-text) var(--text-base)/1.4 var(--f-text); letter-spacing:var(--ls-text);
  -webkit-font-smoothing:antialiased;
}
img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }
[hidden]{ display:none !important; }
.wrapper{ padding-inline:var(--gutter); }

/* ── tipografia ─────────────────────────────────────────────── */
/* cada título define a sua fonte; aqui só se zera o padrão do navegador */
h1,h2,h3{ margin:0; font-size:inherit; font-weight:inherit; }
/* títulos serifados do layout (Lyon Display) — sem caixa alta */
.serif{ font-family:var(--f-serif); font-weight:300; font-optical-sizing:auto; text-transform:none; letter-spacing:0; line-height:.9; margin:0; }
.lead{ margin:0; font:var(--w-medium) 1.5rem/1.4 var(--f-head); }
.kicker{ margin:0; font:var(--w-medium) var(--text-base)/1 var(--f-head); text-transform:uppercase; letter-spacing:var(--ls-caps); }

/* ── botões ─────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem; cursor:pointer; text-decoration:none;
  font:var(--w-medium) var(--text-base)/1 var(--f-head); text-transform:uppercase; letter-spacing:var(--ls-caps);
  min-height:44px; padding:0 1.5rem; border-radius:var(--radius-btn); border:1px solid transparent; white-space:nowrap;
  background:var(--btn-fundo); color:var(--btn-texto); transition:background .2s,color .2s,border-color .2s,opacity .2s,transform .15s;
  -webkit-appearance:none; appearance:none;
}
/* cores dos botões: variáveis do site inteiro, editáveis no painel (tema.botao.*, <style id="tema">);
   o hover clareia a cor escolhida, qualquer que seja */
.btn:hover{ background:color-mix(in srgb, var(--btn-fundo) 84%, #fff); }
.btn--creme{ background:var(--btn2-fundo); color:var(--btn2-texto); }
.btn--creme:hover{ background:color-mix(in srgb, var(--btn2-fundo) 55%, #fff); }
.btn.is-disabled,.btn[disabled]{ opacity:.45; pointer-events:none; }

/* ── header: menu dividido em volta do logotipo ─────────────── */
/* fundo a 50%, como no Figma; o desfoque mantém o menu legível sobre fotos */
.site-header{ position:sticky; top:0; z-index:100; height:var(--header-h); background:rgba(250,249,255,.5); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); color:var(--text); }
.site-header__in{ height:100%; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1.25rem; }
.nav{ display:flex; gap:40px; align-items:center; }
.nav--right{ justify-content:flex-end; gap:20px; }
.nav--sec{ margin-right:60px; }
.navlink{
  font:var(--w-medium) var(--text-sm)/1 var(--f-head); text-transform:uppercase; letter-spacing:var(--ls-caps); text-decoration:none;
  padding:4px 0; position:relative; white-space:nowrap; background:none; border:0; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
}
.navlink::after{ content:''; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ease-out); }
.navlink:hover::after{ transform:scaleX(1); }
.navlink--icon{ flex:0 0 auto; padding:4px; }
.navlink--icon::after{ display:none; }
.navlink svg{ width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:1.6; }
.navlink--icon span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.logo{ display:flex; align-items:center; justify-content:center; text-decoration:none; }
.logo__mark{ height:30px; width:auto; color:currentColor; fill:currentColor; }
.burger{ display:none; background:none; border:0; padding:6px; cursor:pointer; }
.burger svg{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.5; }
/* o menu completo (4 links + logotipo + 2 ícones) precisa de ~1150 px;
   abaixo de 1200 vira hambúrguer, senão os ícones espremem e o menu cola no logotipo */
@media (max-width:1199px){
  .site-header__in{ grid-template-columns:auto 1fr auto; }
  .nav--main,.nav--sec{ display:none; }
  .burger{ display:block; }
  .logo{ padding-block:10px; }
  .logo__mark{ height:24px; }
}
@media (max-width:767px){
  .navlink--account{ display:none; }
  .logo__mark{ height:20px; }
}
/* gaveta */
.drawer{ position:fixed; inset:0; z-index:200; display:none; }
.drawer.is-open{ display:block; }
.drawer__bg{ position:absolute; inset:0; background:rgba(3,3,5,.4); }
.drawer__panel{
  position:absolute; top:0; left:0; bottom:0; width:min(86vw,380px); background:var(--bg); color:var(--text);
  padding:1.5rem var(--gutter); overflow:auto; display:flex; flex-direction:column; gap:0;
}
.drawer__close{ align-self:flex-end; background:none; border:0; font-size:1.6rem; cursor:pointer; padding:4px 8px; }
.drawer a{ font:300 1.75rem/1.2 var(--f-head); text-transform:uppercase; text-decoration:none; padding:.55rem 0; }
.drawer small{ display:block; margin-top:1.5rem; color:var(--text-60); font:400 var(--text-xs)/1.4 var(--f-head); text-transform:uppercase; letter-spacing:var(--ls-caps); }


/* ── preloader: mapa do Brasil que se enche de azul ─────────── */
.loader{ position:fixed; inset:0; z-index:1000; background:var(--bg); display:grid; place-items:center; transition:opacity .4s ease; }
.loader.is-hidden{ opacity:0; pointer-events:none; }
.loader.sem-transicao{ transition:none; }   /* troca de amostra: some sem o fade */
.loader__mapa{ width:min(84px,22vw); height:auto; overflow:visible; }
.loader__linha{ fill:none; stroke:var(--azul); stroke-width:.55; stroke-linejoin:round; }
.loader__cheio{ fill:var(--azul); }
/* o retângulo do clip cresce de baixo para cima; a classe is-on reinicia a animação a cada exibição */
.loader__nivel{ transform-box:fill-box; transform-origin:50% 100%; transform:scaleY(0); }
.loader.is-on .loader__nivel{ animation:loader-enche 1.3s var(--ease-soft) .15s forwards; }
@keyframes loader-enche{ to{ transform:scaleY(1); } }
@media (prefers-reduced-motion:reduce){ .loader__nivel{ transform:none; } .loader.is-on .loader__nivel{ animation:none; } }

/* ── hero: foto emoldurada pelas margens, título serifado ───── */
/* --altura: a proporção do Figma (--ar) sem passar da altura da tela */
.hero,.banner,.ihero{ --altura:min(calc((100vw - 2 * var(--gutter)) * var(--ar)), calc(100svh - var(--header-h))); }
.hero{ --ar:904/1360; position:relative; margin:0 var(--gutter); height:var(--altura); min-height:480px; display:grid; align-items:end; justify-items:center; overflow:hidden; background:var(--bg-2); color:var(--creme); }
.hero picture{ display:contents; }
.hero__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* topo da home: foto vertical no quadro horizontal do computador mostra a faixa escolhida no painel */
@media (min-width:768px){
  .hero__img[data-enquadre="alto"]{ object-position:50% 0; }
  .hero__img[data-enquadre="baixo"]{ object-position:50% 100%; }
}
/* degradê do Figma: preto de 0 a 100% da metade para baixo, camada a 40% */
.hero::after,.banner::after{ content:''; position:absolute; inset:0; background:linear-gradient(transparent 50%,rgba(0,0,0,.4)); pointer-events:none; }
.hero__content{ position:relative; z-index:2; display:grid; justify-items:center; gap:min(3.8vw,55px); padding:0 var(--gutter) min(5.6vw,80px); text-align:center; }
.hero__title{ font-size:min(9.72vw,140px); }
@media (max-width:767px){
  .hero{ height:auto; aspect-ratio:4/5; min-height:0; }
  .hero__title{ font-size:9.6vw; }   /* "Inspirado pelo Brasil" numa linha só */
  .hero::after,.banner::after{ background:linear-gradient(transparent 40%,rgba(0,0,0,.55)); }
  /* fotos largas (coleções, atelier) recortadas menos: quadradas em vez de 4:5 */
  .chero{ aspect-ratio:1; }
  .chero--retrato{ aspect-ratio:4/5; }
}

/* ── abas das coleções + carrossel ──────────────────────────── */
.fc{ padding:clamp(3rem,6.7vw,97px) 0 0; }
.fc .onda{ display:block; width:32px; height:32px; margin:0 auto clamp(3rem,6.7vw,97px); color:#132549; }
.fc__tabs{ display:flex; gap:40px; padding:0 var(--gutter); overflow-x:auto; scrollbar-width:none; }
.fc__tabs::-webkit-scrollbar{ display:none; }
.fc__tab{ flex:0 0 auto; background:none; border:0; padding:0; cursor:pointer; color:inherit; opacity:.5; transition:opacity .2s;
  font:300 min(2.5vw,36px)/1.4 var(--f-head); text-transform:uppercase; white-space:nowrap; }
.fc__tab.is-active,.fc__tab:hover{ opacity:1; }
@media (max-width:767px){ .fc__tabs{ gap:1.25rem; } .fc__tab{ font-size:1.25rem; padding-block:8px; } }
/* painéis empilhados na mesma célula: a seção fica com a altura do maior
   e a troca de aba não desloca o que vem abaixo; a coluna com largura
   definida impede o carrossel de alargar a página no celular */
.fc__panels{ display:grid; grid-template-columns:minmax(0,1fr); margin-top:clamp(2rem,7.5vw,108px); }
.fc__panel{ grid-area:1/1; min-width:0; visibility:hidden; opacity:0; transition:opacity .25s; }
.fc__panel.is-active{ visibility:visible; opacity:1; }
/* cartões de 311 × 384 a cada 320 px, a partir de 85 px; o quinto espia à direita */
.prow{ position:relative; }
.prow__track{ display:flex; gap:10px; padding:0 0 0 85px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-left:85px; scrollbar-width:none; }
.prow__track::-webkit-scrollbar{ display:none; }
.prow__nav,.diver__nav{ position:absolute; z-index:3; width:34px; height:44px; padding:0; border:0; background:none; color:var(--azul); cursor:pointer; display:grid; place-items:center; }
.prow__nav svg,.diver__nav svg{ width:34px; height:24px; stroke:currentColor; fill:none; stroke-width:2; }
.prow__nav:disabled,.diver__nav:disabled{ opacity:.25; cursor:default; }
.prow__nav{ top:calc(311px * 384 / 311 / 2 - 22px); }
.prow__nav--prev{ left:var(--gutter); } .prow__nav--next{ right:var(--gutter); }
.wcard{ flex:0 0 310px; scroll-snap-align:start; display:grid; justify-items:center; text-align:center; text-decoration:none; color:inherit; }
.wcard__media{ width:100%; aspect-ratio:310/384; background:var(--bg-3); overflow:hidden; margin-bottom:40px; }
.wcard__media img{ width:100%; height:100%; object-fit:cover; transition:opacity .3s; }
.wcard.is-out .wcard__media img{ opacity:.5; }
.wcard:hover .wcard__media img{ opacity:.85; }
.wcard__title{ font:var(--w-medium) var(--text-base)/1.2 var(--f-head); text-transform:uppercase; letter-spacing:var(--ls-caps); }
.wcard__sub{ font:300 var(--text-xs)/1.2 var(--f-head); }
@media (max-width:767px){
  .prow__track{ padding-left:var(--gutter); scroll-padding-left:var(--gutter); }
  .wcard{ flex-basis:62vw; } .wcard__media{ margin-bottom:1.25rem; }
  .prow__nav{ display:none; }
}

/* ── Copacabana Diver: painel preto + um relógio por vez ────── */
.diver{ display:grid; grid-template-columns:47.2% 1fr; min-height:min(62.8vw,904px); margin-top:clamp(4rem,13.2vw,191px); }
.diver__panel{ position:relative; overflow:hidden; background:#000; color:var(--creme); padding:80px var(--gutter); }
.diver__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center bottom; }
.diver__panel > :not(.diver__bg){ position:relative; }
/* cor de fundo escolhida no painel: a foto (relógio sobre preto) se mescla com ela —
   o preto vira a cor e o relógio fica como está; sem isso a foto escondia a cor */
.diver__panel[style*="background-color"] .diver__bg{ mix-blend-mode:lighten; }
.diver__title{ font-size:min(5vw,72px); margin-bottom:clamp(2rem,4.65vw,67px); }
.diver__txt{ max-width:503px; margin:22px 0 0; }
.diver__side{ position:relative; align-self:center; justify-self:start; width:310px; margin:3rem 0 3rem min(14.24vw,205px); }
.diver__track{ display:flex; gap:40px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.diver__track::-webkit-scrollbar{ display:none; }
.diver__nav{ top:calc(311px * 384 / 311 / 2 - 22px); }
.diver__nav--prev{ left:-44px; } .diver__nav--next{ right:-44px; }
.dslide{ flex:0 0 100%; scroll-snap-align:start; }
.dslide__media{ display:block; aspect-ratio:310/384; background:var(--bg-3); overflow:hidden; }
.dslide__media img{ width:100%; height:100%; object-fit:cover; }
/* no Figma é um texto só, com linhas em branco entre nome, preço e prazo */
.dslide__title{ margin:40px 0 0; font:var(--w-text) var(--text-base)/1.4 var(--f-head); text-transform:none; }
/* preço com parcelas e Pix (Diver da home, cartões das coleções) */
.preco{ display:block; }
.preco b{ font-weight:inherit; }
.preco small{ font:300 var(--text-xs)/1.4 var(--f-head); }
.preco__pix{ display:block; }
.dslide .preco{ margin-top:22px; }
.dslide__when{ margin:22px 0 0; font-weight:300; }
.dslide__when::first-letter{ text-transform:uppercase; }
.dslide .btn{ margin-top:32px; }
@media (max-width:900px){
  .diver{ grid-template-columns:1fr; }
  /* no celular a foto desce para baixo do texto; o topo preto dela passa por trás */
  .diver__panel{ display:flex; flex-direction:column; padding:2.5rem var(--gutter) 0; }
  .diver__bg{ order:1; position:relative; inset:auto; height:auto; width:calc(100% + 2 * var(--gutter)); max-width:none; margin:-60vw calc(-1 * var(--gutter)) 0; }
  .diver__panel > :not(.diver__bg){ z-index:1; }
  .diver__title{ font-size:clamp(2.6rem,11vw,4.5rem); }
  .diver__side{ width:min(310px,64vw); justify-self:center; margin-left:0; }
}

/* ── Vila Rica: painel azul + foto ──────────────────────────── */
.vila{ display:grid; grid-template-columns:1fr 1fr; margin:64px var(--gutter) 0; min-height:min(62.8vw,904px); }
.vila__panel{ background:var(--azul); color:var(--creme); padding:80px 40px 40px; display:flex; flex-direction:column; }
.vila__title{ font-size:min(8.9vw,128px); margin-bottom:clamp(1.5rem,4vw,57px); }
.vila__txt{ max-width:458px; margin:22px 0 2.5rem; }
.vila__btn{ margin-top:auto; align-self:flex-start; }
.vila__media,.manif__media{ position:relative; overflow:hidden; background:var(--bg-2); }
.vila__media img,.manif__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
@media (max-width:900px){
  .vila{ grid-template-columns:1fr; }
  .vila__title{ font-size:clamp(3rem,16vw,6rem); }
  .vila .lead{ font-size:1.25rem; }
  .vila .lead br{ display:none; }
  .vila__media{ aspect-ratio:4/5; }
}

/* ── manifesto: o título serifado avança sobre o calçadão ───── */
/* colunas fixas em meia largura: o título (sem quebra) transborda por cima da foto em vez de alargar a coluna */
.manif{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); margin:64px var(--gutter) 0; min-height:min(62.8vw,904px); }
.manif__text{ position:relative; z-index:2; align-self:end; padding-top:2rem; }
.manif__title{ font-size:min(8.9vw,128px); white-space:nowrap; }
.manif__body{ max-width:602px; padding-left:80px; margin-top:clamp(1.5rem,4vw,57px); }
.manif__body p{ margin:0 0 22px; }
.manif__body p:last-of-type{ margin-bottom:34px; }
@media (max-width:900px){
  .manif{ grid-template-columns:1fr; }
  .manif__title{ font-size:clamp(2.5rem,13.5vw,5.5rem); }
  .manif__body{ padding-left:0; }
  .manif__media{ aspect-ratio:4/5; order:-1; margin-bottom:1rem; }
}

/* ── Automobilista + vídeo: faixas largas com botão ao pé ───── */
.auto{ margin-top:clamp(4rem,7vw,101px); text-align:center; }
.auto__title{ margin:37px auto 47px; padding:0 var(--gutter); font:200 min(5vw,72px)/1.1 var(--f-head); text-transform:none; }
.banner{ position:relative; display:grid; place-items:end center; margin:0 var(--gutter); overflow:hidden; --ar:603/1360; height:var(--altura); background:var(--tinta); text-decoration:none; }
.banner img,.banner video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.banner .btn{ position:relative; z-index:2; margin-bottom:40px; }
.banner--video{ --ar:904/1360; margin-top:64px; }
@media (max-width:767px){
  .auto__title{ font-size:clamp(1.6rem,7.5vw,2.4rem); }
  .auto__title br,.colecoes__title br{ display:none; }
  .banner{ height:auto; aspect-ratio:1; }
  .banner--video{ aspect-ratio:3/4; height:auto; margin-top:2rem; }
  .banner .btn{ margin-bottom:1.5rem; }
}

/* ── página de coleções ─────────────────────────────────────── */
.colecoes{ padding:clamp(2.5rem,7.3vw,105px) var(--gutter) 41px; }
.colecoes__title{ margin:0 auto clamp(2.5rem,4.65vw,67px); text-align:center; font:200 min(5vw,72px)/1.1 var(--f-head); text-transform:none; }
.colecoes__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:40px; }
.colcard{ display:grid; justify-items:center; text-decoration:none; color:inherit; }
.colcard__media{ width:100%; aspect-ratio:310/384; overflow:hidden; background:var(--bg-3); }
.colcard__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease-out); }
.colcard:hover .colcard__media img{ transform:scale(1.04); }
.colcard__name{ margin-top:40px; font:300 min(2.22vw,32px)/1.4 var(--f-head); text-transform:uppercase; }
@media (max-width:767px){
  .colecoes__title{ font-size:clamp(1.6rem,7.5vw,2.4rem); }
  .colecoes__grid{ grid-template-columns:1fr 1fr; gap:2rem 1rem; }
  .colcard__name{ margin-top:1rem; font-size:1.1rem; }
}
/* ── rodapé: azul, newsletter, contatos e o mapa ────────────── */
.footer{ margin-top:64px; background:var(--azul); color:var(--creme); padding:120px 80px 118px; }
.footer a{ color:inherit; }
.footer__top,.footer__bottom{ max-width:1280px; margin-inline:auto; }
.footer__top{ display:grid; grid-template-columns:1fr 349px; gap:2.5rem 80px; }
.footer__title{ margin:0; font:300 min(3.68vw,53px)/1.2 var(--f-head); text-transform:none; }
.footer__form{ display:flex; gap:16px; margin-top:69px; max-width:744px; }
.footer__form input[type=email]{ flex:1; min-width:0; height:44px; padding:0 24px; font:inherit; color:var(--creme); background:transparent; border:1.5px solid var(--creme); border-radius:0; }
.footer__form input[type=email]::placeholder{ color:var(--creme); opacity:1; }
.footer__form input[type=email]:focus{ outline:0; box-shadow:inset 0 0 0 1px var(--creme); }
.footer__form .btn{ flex:0 0 auto; min-width:173px; font-weight:600; }
.footer__side{ display:flex; flex-direction:column; justify-content:space-between; gap:2.5rem; padding-top:62px; }
.footer__links{ display:grid; grid-template-columns:170px 1fr; line-height:2; }
.footer__links ul{ list-style:none; margin:0; padding:0; display:grid; align-content:start; }
.footer__links a{ text-decoration:underline; text-underline-offset:3px; display:inline-flex; align-items:center; gap:3px; }
.footer__links a:hover{ opacity:.75; }
.ext{ width:.7em; height:.7em; stroke:currentColor; fill:none; stroke-width:1.3; }
.footer__end{ font-style:normal; }
@media (min-width:901px){ .footer__end{ white-space:nowrap; } }
.footer__end a{ text-decoration:none; }
.footer__bottom{ display:flex; margin-inline:auto; align-items:flex-end; justify-content:space-between; gap:2rem; margin-top:200px; }
.footer__bottom p{ margin:0; max-width:575px; }
.footer__mapa{ flex:0 0 auto; width:153px; height:auto; color:var(--creme); }
@media (max-width:900px){
  .footer{ padding:3.5rem var(--gutter) 3rem; }
  .footer__top{ grid-template-columns:1fr; }
  .footer__title{ font-size:clamp(1.6rem,7vw,2.4rem); }
  .footer__title br{ display:none; }
  .footer__form{ margin-top:2rem; flex-wrap:wrap; }
  .footer__form input[type=email]{ flex-basis:100%; }
  .footer__form .btn{ flex:1 1 100%; }
  .footer__side{ padding-top:0; }
  .footer__bottom{ margin-top:3.5rem; flex-direction:column; align-items:flex-start; }
  .footer__mapa{ width:96px; }
}


/* tela cheia da galeria */
.lightbox{ position:fixed; inset:0; z-index:300; background:rgba(3,3,5,.97); color:var(--white); display:grid; grid-template-rows:auto minmax(0,1fr); }
.lightbox__bar{ display:flex; justify-content:space-between; align-items:center; padding:.75rem var(--gutter); font:400 var(--text-xs)/1 var(--f-head); text-transform:uppercase; letter-spacing:var(--ls-caps); }
.lightbox__close{ background:none; border:0; color:var(--white); font-size:2rem; line-height:1; cursor:pointer; padding:2px 10px; }
.lightbox__track{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; min-height:0; }
.lightbox__track::-webkit-scrollbar{ display:none; }
.lightbox__slide{ flex:0 0 100%; scroll-snap-align:center; display:grid; grid-template-rows:minmax(0,1fr); grid-template-columns:minmax(0,1fr); place-items:center; padding:0 var(--gutter) var(--gutter); min-height:0; overflow:hidden; }
.lightbox__slide img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.lightbox__nav{ position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%; border:0; background:var(--white); color:var(--text); display:grid; place-items:center; cursor:pointer; }
.lightbox__nav--prev{ left:16px; } .lightbox__nav--next{ right:16px; }
.lightbox__nav svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; }
@media (max-width:767px){ .lightbox__nav{ display:none; } }

/* ── coleção (frame colecao_vilarica) ───────────────────────── */
.chero .hero__content{ gap:31px; }
.chero .kicker{ color:var(--creme); }
/* "Terranova Automobilista", "Terranova Copacabana Diver": numa linha só */
.chero .hero__title.is-longo{ font-size:min(7.6vw,110px); }
/* no celular o nome pode quebrar em duas linhas, em tamanho legível sobre a foto */
@media (max-width:767px){
  .chero .hero__title,.chero .hero__title.is-longo{ font-size:clamp(2.2rem,11vw,3rem); line-height:1; }
  .chero .hero__content{ gap:18px; }
}
.cfc{ padding-top:clamp(3rem,8.7vw,125px); }
.cfc .onda{ margin-bottom:clamp(3rem,8.7vw,125px); }
.ccard{ flex:0 0 310px; scroll-snap-align:start; display:block; text-decoration:none; color:inherit; }
.ccard__media{ display:block; aspect-ratio:310/384; background:var(--bg-3); overflow:hidden; margin-bottom:40px; }
.ccard__media img{ width:100%; height:100%; object-fit:cover; transition:opacity .3s; }
.ccard.is-out .ccard__media img{ opacity:.5; }
.ccard:hover .ccard__media img{ opacity:.85; }
.ccard__nome{ display:block; }
.ccard__sub{ display:block; font:300 var(--text-xs)/1.4 var(--f-head); }
.ccard .preco{ margin-top:22px; }
.ccard__prazo{ display:block; margin-top:22px; font-weight:300; }
.ccard__prazo::first-letter{ text-transform:uppercase; }
@media (max-width:767px){ .ccard{ flex-basis:62vw; } .ccard__media{ margin-bottom:1.25rem; } }
.cpainel{ margin-top:clamp(4rem,12vw,170px); }
.cpainel__title{ font-size:min(7.5vw,108px); }
.cpainel__texto{ margin-top:auto; padding-top:3rem; }
.cpainel .lead{ max-width:15em; }
@media (max-width:900px){ .cpainel__title{ font-size:clamp(2.6rem,12vw,4.5rem); } }

.cpainel .vila__txt{ margin:22px 0 0; max-width:528px; }
/* "Dois séculos de história": título sobre a cianotipia, legenda embaixo */
.chist{ position:relative; width:min(600px,100% - 2 * var(--gutter)); margin:64px auto 0; }
.chist__media{ aspect-ratio:600/798; overflow:hidden; background:var(--bg-2); }
.chist__media img{ width:100%; height:100%; object-fit:cover; }
.chist__title{ position:absolute; top:clamp(3rem,8vw,115px); left:50%; transform:translateX(-50%); width:max-content; max-width:calc(100vw - 2 * var(--gutter)); text-align:center; font-size:min(8.9vw,128px); }
.chist__txt{ margin:40px 0 0; max-width:608px; }
/* grade: duas fotos empilhadas à esquerda, uma alta à direita */
.cgrade{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto auto; gap:40px; margin:64px var(--gutter) 0; }
.cgrade > div{ overflow:hidden; background:var(--bg-2); }
.cgrade img{ width:100%; height:100%; object-fit:cover; }
.cgrade__a{ aspect-ratio:660/432; }
/* a foto alta acompanha a altura das duas da esquerda, sem empurrar a grade */
.cgrade__b{ grid-column:2; grid-row:1 / span 2; position:relative; }
.cgrade__b img{ position:absolute; inset:0; }
.cgrade__c{ aspect-ratio:660/432; }
@media (max-width:767px){
  .cgrade{ grid-template-columns:1fr; gap:1rem; }
  .cgrade__b{ grid-column:auto; grid-row:auto; }
  .cgrade__b img{ position:static; }
  .cgrade > div{ aspect-ratio:auto; }
  .cgrade img{ height:auto; }
}

/* ── produto (frames vila_rica_*) ───────────────────────────── */
.pdp{ display:grid; max-width:1440px; margin-inline:auto; grid-template-columns:min(47.3vw,681px) minmax(0,1fr); gap:min(5.6vw,80px); padding:28px var(--gutter) 96px; align-items:start; }
.pdp__gallery{ display:grid; gap:40px; }
.pdp__gallery figure{ margin:0; aspect-ratio:681/904; overflow:hidden; background:var(--bg-3); cursor:zoom-in; }
.pdp__gallery img{ width:100%; height:100%; object-fit:cover; }
.pinfo{ position:sticky; top:var(--header-h); padding-top:80px; max-width:599px; }
.pinfo__title{ margin-top:44px; max-width:480px; font-size:min(5vw,72px); }   /* caixa de 434 px no Figma: "Pulseira em" quebra sozinho */
.pinfo__title--curto{ max-width:none; }
.pinfo__preco{ margin-top:28px; }
.pinfo__preco p{ margin:0; }
.pinfo__valor{ font-size:1.5rem; }
.pinfo__valor s{ opacity:.5; margin-right:.25em; }
.pinfo__preco small,.pinfo__nota{ font:300 var(--text-xs)/1.4 var(--f-head); }
.pinfo__prazo{ margin-top:22px !important; font-weight:var(--w-medium); }
.pinfo__prazo::first-letter{ text-transform:uppercase; }
.pinfo__compra{ position:relative; display:flex; gap:16px; margin-top:35px; }
.qtd{ display:flex; align-items:center; width:131px; height:44px; border:1.5px solid var(--azul); }
.qtd button{ flex:1; height:100%; border:0; background:none; cursor:pointer; font:var(--w-medium) var(--text-base)/1 var(--f-head); color:var(--azul); }
.qtd input{ width:2.2em; height:100%; text-align:center; border:0; background:none; font:var(--w-medium) var(--text-base)/1 var(--f-head); color:var(--azul); -moz-appearance:textfield; appearance:textfield; }
.qtd input::-webkit-inner-spin-button,.qtd input::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }
.pinfo__add{ width:230px; }
/* selo laranja inclinado sobre o botão, como no Figma */
.pinfo__amostras{ margin-top:40px; }
.pinfo__amostras p{ margin:0; }
.pinfo__amostras b{ font-weight:var(--w-medium); }
.amostras{ display:flex; gap:12px; margin-top:15px; }
.amostra{ width:29px; height:29px; background:var(--cor); outline:3px solid transparent; outline-offset:0; transition:outline-color .2s; }
.amostra:hover{ outline-color:rgba(245,156,66,.5); }
.amostra.is-active{ outline-color:#f59c42; }
@media (pointer:coarse),(max-width:767px){ .amostras{ gap:14px; } .amostra{ width:36px; height:36px; } }
.pinfo__bloco{ margin-top:80px; }
.pinfo__bloco + .pinfo__bloco{ margin-top:64px; }
.pinfo__h{ margin:0 0 22px; font:var(--w-medium) 1.5rem/1.4 var(--f-head); text-transform:none; }
.pinfo__bloco p{ margin:0 0 22px; }
.pinfo__bloco p:last-child{ margin-bottom:0; }
.spec{ margin-bottom:22px; }
.spec h3{ margin:0; font:var(--w-medium) var(--text-base)/1.4 var(--f-head); text-transform:none; }
.spec p{ margin:0 !important; }
@media (max-width:420px){ .pinfo__add{ font-size:var(--text-sm); } }
@media (max-width:900px){
  .pdp{ grid-template-columns:minmax(0,1fr); gap:2rem; padding:0 0 3rem; }
  .pdp__gallery{ display:flex; gap:0; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
  .pdp__gallery::-webkit-scrollbar{ display:none; }
  .pdp__gallery figure{ flex:0 0 100%; scroll-snap-align:start; }
  .pinfo{ position:static; padding:0 var(--gutter); }
  .pinfo__title{ margin-top:1rem; font-size:clamp(2.4rem,11vw,4rem); }
  .pinfo__compra{ gap:12px; }
  .qtd{ width:112px; flex:0 0 auto; }
  .pinfo__add{ flex:1; width:auto; min-width:0; padding:0 .75rem; }
  .pinfo__bloco{ margin-top:3rem; }
}

/* ── nossa história (frame nossa_historia) ──────────────────── */
.ihero{ --ar:904/1360; margin:0 var(--gutter); height:var(--altura); overflow:hidden; background:var(--bg-2); }
.ihero img,.ihero video{ width:100%; height:100%; object-fit:cover; }
.ihero + .manif{ margin-top:64px; min-height:min(62.8vw,904px); }
.valores{ margin:64px var(--gutter) 0; background:var(--azul); min-height:min(62.8vw,904px); display:grid; place-items:center; padding:3rem 40px; }
.valores__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:40px; width:100%; max-width:1280px; }
@media (max-width:1199px){ .valores__grid{ grid-template-columns:1fr 1fr; gap:var(--gutter); } .valor{ min-height:300px; } }
.valor{ display:flex; flex-direction:column; justify-content:space-between; gap:2rem; min-height:384px; padding:24px; background:var(--creme); color:var(--azul); }
.valor h3{ margin:0; font:200 min(3.9vw,56px)/1.1 var(--f-head); text-transform:none; }
.valor p{ margin:0; }
.fundador{ display:grid; grid-template-columns:1fr 1fr; margin:64px var(--gutter) 0; min-height:min(62.8vw,904px); }
.valores + .cpainel{ margin-top:64px; }
.fundador__media{ position:relative; overflow:hidden; background:var(--bg-2); }
.fundador__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.fundador__text{ display:flex; flex-direction:column; justify-content:space-between; gap:3rem; padding:80px 0 0 40px; }
.fundador__title{ font-size:min(8.9vw,128px); }
/* Nossa história (segundo pacote): título e texto juntos, no meio da altura da foto */
.fundador--centro .fundador__text{ justify-content:center; gap:57px; padding-top:0; }
.fundador__text p{ margin:0 0 22px; max-width:552px; }
.fundador__text > p:last-child{ margin-bottom:0; }
@media (max-width:900px){
  .valores{ padding:var(--gutter); }
  .valores__grid{ grid-template-columns:1fr 1fr; gap:var(--gutter); }
  .valor{ min-height:280px; }
  .valor h3{ font-size:2rem; }
  .fundador{ grid-template-columns:1fr; }
  .fundador__media{ aspect-ratio:680/864; }
  .fundador__text{ padding:2rem 0 0; }
  .fundador__title{ font-size:clamp(3rem,15vw,6rem); }
}
@media (max-width:560px){ .valores__grid{ grid-template-columns:1fr; } }

/* ── atelier (frame nosso_atelier) ──────────────────────────── */
.ahead{ padding:40px var(--gutter) 0; text-align:center; }
.ahead__title{ margin:40px 0 67px; font:200 min(5vw,72px)/1.1 var(--f-head); text-transform:none; }
.ahero{ --ar:662/1360; min-height:320px; }
.ahero .hero__content{ padding-bottom:40px; }
.ahero + .cpainel{ margin-top:64px; }
/* o título avança sobre a foto, como no layout */
.visita .fundador__text{ justify-content:flex-end; gap:57px; padding-top:0; }
.visita .fundador__title{ margin-left:max(-173px,-12vw); position:relative; z-index:2; }
.visita__botoes{ display:flex; flex-wrap:wrap; gap:12px; margin-top:10px; }
@media (max-width:900px){ .visita .fundador__title{ margin-left:0; } }

/* ── contato (frame contato): o rodapé vira a página ─────────── */
.footer--contato{ margin-top:0; padding-top:80px; }
.footer__title--contato{ font-weight:300; font-size:min(5vw,72px); line-height:1.1; }
.footer__contato{ display:grid; grid-template-columns:1fr 172px; gap:16px; max-width:555px; margin-top:67px; }
.footer__contato input,.footer__contato textarea{ min-width:0; height:44px; padding:0 24px; font:inherit; color:var(--creme); background:transparent; border:1.5px solid var(--creme); border-radius:0; }
.footer__contato textarea{ grid-column:1 / -1; height:132px; padding:12px 16px; resize:vertical; }
.footer__contato input[type=email]{ grid-column:1 / -1; }
.footer__contato ::placeholder{ color:var(--creme); opacity:1; }
.footer__contato :focus{ outline:0; box-shadow:inset 0 0 0 1px var(--creme); }
.footer__contato .btn{ justify-self:start; }
.footer--contato .footer__bottom{ margin-top:88px; }
/* no celular os rótulos (que já são links) bastam; os valores por extenso saem */
@media (max-width:900px){
  .footer__title--contato{ font-size:clamp(2.2rem,10vw,3.5rem); }
  .footer__contato{ grid-template-columns:1fr; margin-top:2rem; }
}

/* ── páginas de texto (políticas) ───────────────────────────── */
.texto{ padding:clamp(2.5rem,7.3vw,105px) var(--gutter) 96px; }
.texto__title{ margin:0 auto 67px; text-align:center; font:200 min(5vw,72px)/1.1 var(--f-head); text-transform:none; }
.sanfona__texto p{ margin:0 0 22px; }
@media (max-width:767px){ .texto__title{ font-size:clamp(2rem,9vw,3rem); margin-bottom:2rem; } }

.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ── celular: ajustes que precisam vir depois das regras gerais ── */
@media (max-width:767px){
  /* o título sai de cima da cianotipia (azul sobre azul não se lê) e vem antes dela */
  .chist{ display:flex; flex-direction:column; }
  .chist__title{ order:-1; position:static; transform:none; width:auto; max-width:none; margin-bottom:1.5rem; text-align:left; font-size:clamp(2.4rem,11vw,3.5rem); }
  /* topo do atelier em 4:3, sem a altura mínima do desktop (com ela o bloco alargava além da tela) */
  .ahero{ aspect-ratio:4/3; min-height:0; }
  .ahero .hero__img{ object-position:78% center; }   /* o letreiro fica à direita da foto */
  /* header sólido: a película a 50% do Figma, sobre fotos e vídeos escuros, virava uma mancha cinza */
  .site-header{ background:var(--bg); -webkit-backdrop-filter:none; backdrop-filter:none; }
}

/* ═══ movimento (referência: página do MacBook Pro da Apple) ══════════
   Só com html.mov: o script do <head> liga para quem não pediu "reduzir
   movimento", e o editor desliga enquanto se edita. Posição e escala usam
   as propriedades translate/scale, separadas do transform do layout. */
/* entrada em cascata: sobe 30 px e aparece, um depois do outro */
html.mov [data-mov]{ opacity:0; translate:0 30px;
  transition:opacity 1s var(--ease-soft), translate 1s var(--ease-soft), background .2s, color .2s, border-color .2s;
  transition-delay:calc(var(--i, 0) * 110ms); }
html.mov [data-mov].is-in{ opacity:1; translate:none; }
/* fotos: abrem de um recorte para a moldura toda, com a imagem assentando */
html.mov [data-mov="foto"]{ opacity:1; translate:none; clip-path:inset(7% 5%); transition:clip-path 1.4s var(--ease-out); transition-delay:calc(var(--i, 0) * 120ms); }
html.mov [data-mov="foto"].is-in{ clip-path:inset(0); }
html.mov [data-mov="foto"] img{ scale:1.28; transition:scale 1.8s var(--ease-out); transition-delay:inherit; }
html.mov [data-mov="foto"].is-in img{ scale:1.12; }
/* paralaxe: as fotos andam um pouco mais devagar que a página */
html.mov [data-par]{ translate:0 var(--par, 0px); will-change:translate; }
/* topo: a foto se acomoda ao abrir e o título se despede ao rolar */
html.mov .hero__img,html.mov .ihero > img,html.mov .ihero > video{ scale:1.12; transition:scale 2.4s var(--ease-out); }
html.mov .is-pronto .hero__img,html.mov .is-pronto.ihero > img,html.mov .is-pronto.ihero > video{ scale:1; }
html.mov .hero__img,html.mov .ihero > img,html.mov .ihero > video{ translate:0 var(--sai-foto, 0px); }
html.mov .hero__content{ opacity:var(--sai-texto, 1); scale:var(--sai-escala, 1); }
html.mov .ahero .hero__content{ opacity:1; scale:1; }   /* Atelier: "Ver no mapa" fica parado, sem efeito */
/* vídeo da home: começa recortado e se abre até a largura toda ao chegar no meio da tela */
html.mov .banner--video{ clip-path:inset(calc(var(--fecha, 0) * 9%) calc(var(--fecha, 0) * 12%) round calc(var(--fecha, 0) * 28px)); }
/* manifesto: títulos sobem linha a linha por trás de uma máscara */
html.mov .linhas .linha{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.08em; margin-bottom:-.08em; }
html.mov .linhas .linha > span{ display:inline-block; translate:0 105%; transition:translate 1.1s var(--ease-out); transition-delay:calc(var(--i, 0) * 140ms); }
html.mov .linhas.is-in .linha > span{ translate:none; }
/* manifesto: o texto se acende palavra por palavra conforme a rolagem */
html.mov .acende .p{ opacity:.18; transition:opacity .35s linear; }
html.mov .acende .p.on{ opacity:1; }
/* abas das coleções: os relógios entram de novo em cascata */
html.mov .fc__panel.is-trocando .wcard{ opacity:0; translate:24px 0; transition:none; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

/* ═══ relógios da home: carrossel infinito, mais ar e foto a 90 % ═══ */
.fc .prow__track{ gap:clamp(24px,3.5vw,56px); }
.wcard__media{ display:grid; place-items:center; }
.wcard__media img{ grid-area:1/1; width:90%; height:90%; }
.prow.is-infinito .prow__nav:disabled{ opacity:1; cursor:pointer; }
.is-clone{ pointer-events:auto; }

/* ═══ esgotado: etiqueta no vão entre a foto e o nome, ao passar o mouse.
   As margens negativas a tiram do fluxo: os nomes ficam alinhados com os dos outros cartões */
.esgotado{ display:block; width:max-content; margin:-32px 0 9px; padding:6px 10px 5px; background:var(--azul); color:var(--creme);
  font:var(--w-medium) var(--text-xs)/1 var(--f-head); text-transform:uppercase; letter-spacing:.08em; opacity:0; transition:opacity .25s; pointer-events:none; }
.is-out:hover .esgotado,.is-out:focus-visible .esgotado{ opacity:1; }
/* sem mouse (celular, tablet), fica sempre à mostra: é o único aviso no cartão */
@media (hover:none){ .esgotado{ opacity:1; } }
/* coleções: o mesmo estilo, sempre visível, na linha do prazo de entrega */
.ccard .esgotado{ margin:0; opacity:1; }

/* ═══ faixa de vantagens sob o topo da home ═══ */
.faixa{ margin:0 var(--gutter); overflow:hidden; background:var(--azul); color:var(--creme); }
.faixa__trilho{ display:flex; width:max-content; }
.faixa ul{ display:flex; flex:0 0 auto; margin:0; padding:0; list-style:none; }
.faixa li{ display:flex; align-items:center; gap:clamp(48px,7vw,110px); padding:13px 0 12px clamp(48px,7vw,110px);
  font:var(--w-medium) var(--text-xs)/1 var(--f-head); text-transform:uppercase; letter-spacing:.12em; white-space:nowrap; }
.faixa li::after{ content:""; width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.6; order:-1; }
html.mov .faixa__trilho{ animation:faixa 38s linear infinite; }
html.mov .faixa:hover .faixa__trilho{ animation-play-state:paused; }
@keyframes faixa{ to{ translate:-50% 0; } }
html:not(.mov) .faixa__trilho{ width:auto; justify-content:center; flex-wrap:wrap; }
html:not(.mov) .faixa ul[aria-hidden]{ display:none; }
html:not(.mov) .faixa ul{ flex:1 1 100%; flex-wrap:wrap; justify-content:center; }   /* parada (edição, reduzir movimento): todos os textos à vista */

/* ═══ rodapé: links úteis ═══ */
.footer__uteis p{ margin:0 0 .5rem; font:var(--w-medium) var(--text-xs)/1 var(--f-head); text-transform:uppercase; letter-spacing:.12em; opacity:.7; }
/* um link depois do outro, com folga entre eles; o que não cabe desce para a linha de baixo */
.footer__uteis ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; column-gap:2rem; line-height:2; }
.footer__uteis a{ text-decoration:underline; text-underline-offset:3px; display:inline-flex; align-items:center; gap:3px; }
.footer__uteis a:hover{ opacity:.75; }
.footer__uteis .ext{ width:10px; height:10px; stroke:currentColor; fill:none; stroke-width:1.4; }

/* ═══ idioma ═══ */
.idiomas{ display:inline-flex; gap:2px; font:var(--w-medium) var(--text-xs)/1 var(--f-head); letter-spacing:.08em; }
.idiomas button{ padding:6px 5px; border:0; background:none; color:inherit; font:inherit; cursor:pointer; opacity:.45; }
.idiomas button:hover,.idiomas button[aria-pressed="true"]{ opacity:1; }
.idiomas button[aria-pressed="true"]{ text-decoration:underline; text-underline-offset:4px; }
.drawer .idiomas{ margin-top:1.5rem; font-size:var(--text-sm); }
@media (max-width:999px){ .nav--right > .idiomas{ display:none; } }

/* ═══ moeda (página do produto): sigla num seletor discreto, ao lado do preço ═══ */
.pinfo__valores{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; }
.moeda select{ -webkit-appearance:none; appearance:none; height:26px; padding:0 22px 0 10px; font:var(--w-medium) var(--text-xs)/1 var(--f-head); letter-spacing:.06em; color:inherit; cursor:pointer;
  border:1px solid rgba(0,35,75,.16); border-radius:13px; background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%2300234B' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 7px center / 10px;
  transition:border-color .2s; }
.moeda select:hover,.moeda select:focus-visible{ border-color:rgba(0,35,75,.4); outline:0; }
.moeda__valor{ margin:4px 0 2px !important; font-size:var(--text-sm); }
.moeda__valor small{ margin-left:6px; opacity:.65; }

/* ═══ pop-ups ═══ */
.popup{ position:fixed; inset:0; z-index:300; display:grid; place-items:center; padding:var(--gutter); }
.popup[hidden]{ display:none; }
.popup__fundo{ position:absolute; inset:0; background:rgba(0,20,45,.55); }
.popup__caixa{ position:relative; display:grid; grid-template-columns:1fr 1fr; width:min(880px,100%); max-height:calc(100svh - 2 * var(--gutter)); overflow:auto; background:var(--creme); color:var(--azul); }
.popup__foto img{ width:100%; height:100%; object-fit:cover; }
.popup__texto{ position:relative; display:grid; align-content:center; gap:1rem; padding:56px 44px 40px; }
.popup__titulo{ font-size:clamp(2.2rem,4vw,3.4rem); }
.popup__texto > p:not(.kicker){ margin:0; }
.popup__form{ display:grid; gap:10px; margin-top:.5rem; }
.popup__form input{ height:44px; padding:0 16px; font:inherit; color:var(--azul); background:transparent; border:1.5px solid var(--azul); border-radius:0; }
.popup__form input:focus{ outline:0; box-shadow:inset 0 0 0 1px var(--azul); }
.popup__x{ position:absolute; top:10px; right:12px; width:40px; height:40px; border:0; background:none; color:inherit; font-size:30px; line-height:1; cursor:pointer; }
.popup__depois{ justify-self:start; padding:4px 0; border:0; background:none; color:inherit; font:inherit; font-size:var(--text-sm); text-decoration:underline; text-underline-offset:3px; cursor:pointer; opacity:.75; }
html.mov .popup__fundo{ animation:pop-fundo .4s ease both; }
html.mov .popup__caixa{ animation:pop-caixa .6s var(--ease-out) both; }
@keyframes pop-fundo{ from{ opacity:0; } }
@keyframes pop-caixa{ from{ opacity:0; translate:0 40px; } }
@media (max-width:700px){
  .popup__caixa{ grid-template-columns:1fr; }
  .popup__foto{ height:180px; }
  .popup__texto{ padding:36px 24px 28px; }
}
.cookies{ position:fixed; left:var(--gutter); bottom:var(--gutter); z-index:250; display:grid; gap:14px; width:min(420px,calc(100% - 2 * var(--gutter)));
  padding:20px 22px; background:var(--azul); color:var(--creme); box-shadow:0 12px 40px rgba(0,0,0,.25); font-size:var(--text-sm); }
.cookies[hidden]{ display:none; }
.cookies p{ margin:0; }
.cookies a{ color:inherit; }
.cookies__acoes{ display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; }
.cookies .btn{ min-height:38px; background:var(--creme); color:var(--azul); }
.cookies .btn--leve{ background:transparent; color:var(--creme); border-color:rgba(246,245,234,.5); }
html.mov .cookies{ animation:pop-caixa .7s var(--ease-out) both; }
.footer__sac{ display:grid; line-height:1.3; margin-bottom:.45rem; }
.footer__sac span{ font:var(--w-medium) var(--text-xs)/1.4 var(--f-head); text-transform:uppercase; letter-spacing:.12em; opacity:.7; }
/* o e-mail do SAC é mais comprido que os rótulos: colunas do rodapé com espaço para ele */
@media (min-width:901px){
  .footer__top{ grid-template-columns:1fr 380px; }
  .footer__links{ grid-template-columns:150px 1fr; }
}
@media (max-width:900px){ .footer__links{ grid-template-columns:1fr; gap:1rem; } }

/* vídeo da home: um para tablet e computador, outro (vertical) para celular */
@media (max-width:767px){ .banner__tela{ display:none; } }
@media (min-width:768px){ .banner__celular{ display:none; } }

/* produto: preço e opções mais compactos, com a escolha de cor à vista sem rolar */
@media (min-width:901px){
  .pinfo{ padding-top:40px; }
  .pinfo__title{ margin-top:14px; font-size:min(3.6vw,52px); }
  .pinfo__preco{ margin-top:16px; }
  .pinfo__valor{ font-size:1.25rem; }
  .pinfo__prazo{ margin-top:10px !important; }
  .pinfo__compra{ margin-top:18px; }
  .pinfo__amostras{ margin-top:20px; }
  .amostras{ margin-top:10px; }
  .amostra{ width:26px; height:26px; }
  .qtd,.pinfo__add{ height:40px; min-height:40px; }
  .pinfo__bloco{ margin-top:56px; }
  .pinfo__bloco + .pinfo__bloco{ margin-top:44px; }
  .pinfo__h{ margin-bottom:14px; font-size:1.25rem; }
}
@media (max-width:900px){ .pinfo__title{ font-size:clamp(2rem,9vw,3rem); } }

/* páginas de política: faixa de calçadão e títulos internos */
.texto{ padding-top:0; }
.texto__faixa{ height:clamp(150px,20vw,290px); overflow:hidden; margin-bottom:clamp(2.5rem,5vw,72px); background:var(--azul); }
.texto__faixa img{ width:100%; height:100%; object-fit:cover; object-position:center 72%; }
.sanfona__texto h3{ margin:44px 0 16px; font:var(--w-medium) 1.25rem/1.3 var(--f-head); text-transform:none; }
.sanfona__texto h3:first-child{ margin-top:0; }
.sanfona__texto ul{ margin:0 0 22px; padding-left:1.25rem; }
.sanfona__texto li{ margin-bottom:8px; }

/* balão do WhatsApp: azul sobre fundo claro; branco, com o ícone azul, sobre fundo escuro */
.whats{ position:fixed; right:20px; bottom:calc(20px + var(--whats-acima, 0px)); z-index:150; display:grid; place-items:center; width:56px; height:56px; border-radius:50%;
  background:var(--azul); color:#fff; box-shadow:0 6px 20px rgba(0,20,45,.28); transition:background .3s, color .3s, bottom .3s, scale .2s; }
.whats:hover{ scale:1.06; }
.whats svg{ width:30px; height:30px; fill:currentColor; }
.whats.is-invertido{ background:#fff; color:var(--azul); }
@media (max-width:767px){ .whats{ right:14px; bottom:calc(14px + var(--whats-acima, 0px)); width:52px; height:52px; } }

/* ═══ lista de espera do Vila Rica ═══ */
.lista__caixa{ max-width:640px; margin:0 auto; }
.lista__titulo{ font-size:clamp(2.6rem,6vw,4.25rem); line-height:1; }
.lista__chamada{ margin:1.25rem 0 .5rem; font-size:1.125rem; }
.lista__produto{ display:grid; grid-template-columns:96px minmax(0,1fr); gap:20px; align-items:center; margin-top:24px; padding:12px; border:1px solid rgba(0,35,75,.2); }
.lista__produto img{ width:100%; height:auto; aspect-ratio:433/640; object-fit:cover; }
.lista__produto p{ margin:0; }
.lista__produto strong{ display:block; font-size:1.5rem; font-weight:400; line-height:1.15; }
.lista__produto small{ display:block; margin-top:6px; font-size:var(--text-sm); }
.lista__nota{ margin:0; font-size:var(--text-sm); opacity:.75; }
.lista fieldset{ margin:40px 0 0; padding:24px 0 0; border:0; border-top:1px solid rgba(0,35,75,.2); min-width:0; }
.lista legend{ float:left; width:100%; padding:0 0 16px; font:var(--w-medium) 1.25rem/1.3 var(--f-head); }
.lista legend + *{ clear:both; }
.lista em{ margin-left:8px; font:300 var(--text-xs)/1 var(--f-head); opacity:.7; }
.lista__grade{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:16px; }
.lista__c6{ grid-column:span 6; } .lista__c4{ grid-column:span 4; } .lista__c3{ grid-column:span 3; } .lista__c2{ grid-column:span 2; } .lista__c1{ grid-column:span 1; }
.lista__campo{ display:flex; flex-direction:column; gap:6px; font-size:var(--text-sm); }
.lista__campo input{ width:100%; height:44px; padding:0 14px; font:inherit; font-size:var(--text-base); color:var(--azul); background:transparent; border:1.5px solid var(--azul); border-radius:0; }
.lista__campo input:focus,.lista__check input:focus-visible,.lista__opcao input:focus-visible + span{ outline:0; box-shadow:inset 0 0 0 1px var(--azul); }
.lista__campo.is-erro input{ border-color:#a3261b; }
.lista__erro{ margin:0; color:#a3261b; font-size:var(--text-xs); }
.lista__erro:empty{ display:none; }
.lista__pergunta{ margin:0 0 10px; font-size:var(--text-sm); font-weight:var(--w-medium); }
.lista__opcoes{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
.lista fieldset > .lista__opcoes:last-child{ margin-bottom:0; }
.lista__opcao{ position:relative; }
.lista__opcao input{ position:absolute; inset:0; margin:0; opacity:0; cursor:pointer; }
.lista__opcao span{ display:flex; flex-direction:column; justify-content:center; min-height:44px; padding:0 16px; border:1.5px solid var(--azul); font-size:var(--text-sm); cursor:pointer; transition:background .2s, color .2s; }
.lista__opcao small{ font:300 var(--text-xs)/1.2 var(--f-head); opacity:.8; }
.lista__opcao input:checked + span{ background:var(--azul); color:var(--creme); }
.lista__modelos{ max-height:360px; margin-top:12px; overflow-y:auto; border:1px solid rgba(0,35,75,.2); }
.lista__familia{ position:sticky; top:0; z-index:1; margin:0; padding:8px 14px; background:var(--azul); color:var(--creme); font:var(--w-medium) var(--text-sm)/1.2 var(--f-head); }
.lista__linha{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 14px; border-bottom:1px solid rgba(0,35,75,.08); }
.lista__linha.is-on{ background:rgba(0,35,75,.05); }
.lista__modelo small{ display:block; font:300 var(--text-xs)/1.3 var(--f-head); }
.lista__passo{ display:flex; align-items:center; flex:none; }
.lista__passo button{ width:40px; height:40px; border:1.5px solid var(--azul); background:none; color:var(--azul); font-size:18px; line-height:1; cursor:pointer; }
.lista__passo button:disabled{ opacity:.3; cursor:default; }
.lista__passo output{ min-width:30px; text-align:center; font-variant-numeric:tabular-nums; }
.lista__total{ margin:10px 0 16px; font-size:var(--text-sm); }
.lista__check{ display:flex; align-items:flex-start; gap:10px; margin-bottom:12px; font-size:var(--text-sm); cursor:pointer; }
.lista__check input{ flex:none; width:20px; height:20px; margin:0; accent-color:var(--azul); }
.lista__robo{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.lista__enviar{ width:100%; margin-top:32px; }
.lista__aviso{ margin:12px 0 0; color:#a3261b; font-size:var(--text-sm); }
.lista__aviso.is-info{ padding:12px 14px; background:rgba(0,35,75,.06); color:var(--azul); }
.lista__aviso:empty{ display:none; }
.lista__numero{ margin:20px 0 8px; font-size:clamp(5rem,20vw,10rem); font-variant-numeric:lining-nums tabular-nums; }
.lista__fim p{ margin-bottom:12px; }
.lista__fim:focus{ outline:0; }
@media (max-width:560px){ .lista__c4,.lista__c3{ grid-column:span 6; } .lista__c2{ grid-column:span 3; } .lista__c1{ grid-column:span 3; } }
/* esgotado: "Avise-me quando voltar" leva à lista de espera */
a.pinfo__add{ width:273px; max-width:100%; }

/* faixa desativada pelo painel */
.faixa.is-desligada{ display:none; }

/* políticas em sanfona */
.texto__title{ margin-bottom:clamp(2.5rem,6vw,86px); }
.sanfona{ max-width:772px; margin:0 auto; border-top:1px solid rgba(0,35,75,.7); }
.sanfona__item{ scroll-margin-top:calc(var(--header-h) + 12px); }
.sanfona__item.is-aberto{ border-bottom:1px solid rgba(0,35,75,.7); }
.sanfona h2{ margin:0; font:inherit; }
.sanfona button{ display:flex; align-items:center; justify-content:space-between; gap:1rem; width:100%; padding:15px 0 14px; border:0; border-bottom:1px solid rgba(0,35,75,.7); background:none; color:inherit; cursor:pointer; text-align:left;
  font:var(--w-text) 1.25rem/1.2 var(--f-head); text-transform:uppercase; letter-spacing:.01em; }
.sanfona__item:last-child:not(.is-aberto) button{ border-bottom:1px solid rgba(0,35,75,.7); }
.sanfona__item.is-aberto:last-child{ border-bottom:0; }
.sanfona button::after{ content:"+"; flex:none; font-size:1.5rem; line-height:1; }
.sanfona__item.is-aberto button::after{ content:"−"; }
.sanfona__corpo{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s var(--ease-out); }
.sanfona__item.is-aberto .sanfona__corpo{ grid-template-rows:1fr; }
.sanfona__corpo > div{ overflow:hidden; min-height:0; visibility:hidden; transition:visibility .4s; }
.sanfona__item.is-aberto .sanfona__corpo > div{ visibility:visible; }
.sanfona__texto{ padding:28px 0 30px; font-size:var(--text-sm); }
.sanfona__texto > :last-child{ margin-bottom:0; }
.sanfona__texto p{ margin:0 0 18px; }
.sanfona__texto h3{ margin:30px 0 12px; font-size:1rem; }
@media (max-width:767px){ .sanfona button{ font-size:1.0625rem; } }
@media (prefers-reduced-motion:reduce){ .sanfona__corpo{ transition:none; } }
html:not(.mov) .faixa li{ gap:14px; padding-left:0; padding-right:0; margin:0 14px; white-space:normal; }
.footer__uteis a{ white-space:nowrap; }

/* celular: relógio no centro, com os vizinhos aparecendo dos dois lados (cartão de 62vw) */
@media (max-width:767px){
  .fc .prow__track{ padding-inline:19vw; scroll-padding-inline:19vw; }
  .fc .wcard,.fc .ccard{ scroll-snap-align:center; }
  /* setas sobre os vizinhos que espiam dos lados: avisam que dá para arrastar (e também funcionam no toque).
     Na altura do meio da foto do cartão (62vw × 384/310) */
  .fc .prow__nav{ display:grid; width:40px; height:40px; border-radius:50%; background:rgba(250,249,255,.88); box-shadow:0 1px 6px rgba(0,35,75,.15);
    top:calc(62vw * 384 / 310 / 2 - 20px); }
  .fc .prow__nav svg{ width:22px; height:16px; }
  .fc .prow__nav--prev{ left:6px; } .fc .prow__nav--next{ right:6px; }
  /* a etiqueta de esgotado precisa caber no vão entre a foto e o nome */
  .wcard__media{ margin-bottom:36px; }
  .wcard .esgotado{ margin:-30px 0 7px; }
  .colcard{ text-align:center; }
}
/* pop-up em coluna: a foto preenche o modal de borda a borda e fica com toda a altura
   que o texto não usa. Ancorada por baixo, logo depois dos relógios: se faltar altura,
   o que sai é o alto do cabelo, nunca o rosto ou o pulso. */
@media (max-width:700px){
  .popup__caixa{ grid-template-rows:minmax(0,1fr) auto; height:min(calc(100svh - 2 * var(--gutter)), calc((100vw - 2 * var(--gutter)) * 1.26 + 300px)); }
  .popup__foto{ position:relative; height:auto; min-height:0; overflow:hidden; }
  .popup__foto img{ position:absolute; left:0; bottom:0; width:100%; height:auto; translate:0 12%; }
  .popup__texto{ padding:18px 20px 14px; gap:.55rem; }
  .popup__titulo{ font-size:clamp(1.5rem,8vw,2.2rem); }
  .popup__texto > p:not(.kicker){ font-size:var(--text-sm); }
}
/* celular deitado: não sobra altura para a foto */
@media (max-width:767px) and (max-height:480px){
  .popup__caixa{ grid-template-columns:1fr; grid-template-rows:none; height:auto; }
  .popup__foto{ display:none; }
  .popup__texto{ padding:18px 20px 14px; gap:.55rem; }
  .popup__titulo{ font-size:1.75rem; }
}
.esgotado{ position:relative; z-index:1; }   /* a foto tem position:relative e ficaria por cima */

/* celular: todas as fotos na mesma coluna, inteiras e em ordem */
@media (max-width:767px){
  /* o painel do Diver respeita a margem, como os demais blocos */
  .diver__panel{ margin-inline:var(--gutter); }
  /* título separado da foto (no computador ele cruza a foto) */
  .fundador .fundador__text,.fundador--centro .fundador__text,.visita .fundador__text{ padding-top:24px; }
  /* grades de fotos: todas quadradas, com o mesmo respiro */
  .cgrade{ gap:12px; }
  .cgrade > div{ aspect-ratio:1; min-height:0; grid-column:auto; grid-row:auto; }
  .cgrade img{ height:100%; }
  /* sem zoom nem paralaxe: nada de rosto ou relógio cortado na tela pequena */
  html.mov [data-mov="foto"].is-in img{ scale:1; }
  html.mov [data-par]{ translate:none; }
}

/* faixa do Automobilista: o movimento termina com a foto inteira, sem zoom */
html.mov .auto .banner.is-in img{ scale:1; }
html.mov .auto .banner img{ translate:none; }
/* no celular a faixa fica mais baixa, para o mostrador caber de lado a lado */
@media (max-width:767px){
  .auto .banner{ aspect-ratio:16/9; }
  .auto .banner img{ object-position:41% 50%; }
}

/* painel do Vila Rica: botão de texto longo não pode alargar a coluna no celular */
@media (max-width:900px){ .vila{ grid-template-columns:minmax(0,1fr); } }
@media (max-width:480px){ .vila__btn{ max-width:100%; padding-inline:1rem; font-size:var(--text-sm); white-space:normal; text-align:center; } }

/* foto da pulseira ao passar o mouse (tag pulseira-N na Shopify); sem mouse, fica só a principal */
.wcard .wcard__media img.foto-pulseira,.ccard .ccard__media img.foto-pulseira,.dslide__media img.foto-pulseira{ opacity:0; transition:opacity .6s ease; pointer-events:none; }
.ccard .ccard__media img.foto-pulseira,.dslide__media img.foto-pulseira{ position:absolute; inset:0; }
.ccard__media,.dslide__media{ position:relative; }
@media (hover:hover){
  .wcard:hover .wcard__media img.foto-pulseira,.ccard:hover .ccard__media img.foto-pulseira,.dslide__media:hover img.foto-pulseira,
  .wcard:focus-visible .wcard__media img.foto-pulseira,.ccard:focus-visible .ccard__media img.foto-pulseira,.dslide__media:focus-visible img.foto-pulseira{ opacity:1; }
  /* só uma foto dá lugar à outra: a principal não clareia nem escurece junto, o que dava a impressão de piscar */
  .wcard__media:has(.foto-pulseira) img,.ccard__media:has(.foto-pulseira) img{ transition:opacity .6s ease; }
  :is(.wcard,.ccard):is(:hover,:focus-visible) :is(.wcard__media,.ccard__media):has(.foto-pulseira) img:not(.foto-pulseira){ opacity:1; }
  /* esgotado: as duas trocam de lugar na mesma transparência da foto em repouso */
  :is(.wcard,.ccard).is-out:is(:hover,:focus-visible) :is(.wcard__media,.ccard__media):has(.foto-pulseira) img:not(.foto-pulseira){ opacity:0; }
  :is(.wcard,.ccard).is-out:is(:hover,:focus-visible) :is(.wcard__media,.ccard__media) img.foto-pulseira{ opacity:.5; }
}
/* celular: o loja.js marca com is-pulseira o relógio do centro da tela, e a troca é a mesma do hover */
@media (hover:none){
  .wcard__media:has(.foto-pulseira) img,.ccard__media:has(.foto-pulseira) img{ transition:opacity .6s ease; }
  .wcard.is-pulseira .wcard__media img.foto-pulseira,.ccard.is-pulseira .ccard__media img.foto-pulseira,.dslide__media.is-pulseira img.foto-pulseira{ opacity:1; }
  :is(.wcard,.ccard).is-out.is-pulseira :is(.wcard__media,.ccard__media):has(.foto-pulseira) img:not(.foto-pulseira){ opacity:0; }
  :is(.wcard,.ccard).is-out.is-pulseira :is(.wcard__media,.ccard__media) img.foto-pulseira{ opacity:.5; }
}

/* ═══ menu: "Sobre" com menu suspenso (Nossa história, Nosso atelier) ═══
   Abre ao passar o mouse, com o teclado (foco) e no toque (.is-open, loja.js).
   O padding de cima do menu é a ponte: o mouse desce até ele sem fechar */
.navdrop{ position:relative; display:flex; align-items:center; }
.navdrop__btn{ color:inherit; }
.navdrop__seta{ width:10px !important; height:10px !important; stroke-width:1.6 !important; transition:rotate .25s var(--ease-out); }
.navdrop__menu{ position:absolute; top:100%; left:-18px; z-index:5; padding-top:14px; display:grid; min-width:200px;
  opacity:0; visibility:hidden; translate:0 -6px; transition:opacity .2s, translate .25s var(--ease-out), visibility .2s; }
.navdrop__menu::before{ content:""; position:absolute; inset:14px 0 0; background:var(--bg); box-shadow:0 10px 30px rgba(0,35,75,.12); z-index:-1; }
.navdrop__link{ padding:12px 18px; font:var(--w-medium) var(--text-sm)/1 var(--f-head); text-transform:uppercase; letter-spacing:var(--ls-caps); text-decoration:none; white-space:nowrap; }
.navdrop__link:first-child{ padding-top:18px; } .navdrop__link:last-child{ padding-bottom:18px; }
.navdrop__link:hover,.navdrop__link.is-active{ text-decoration:underline; text-underline-offset:4px; }
.navdrop:hover .navdrop__menu,.navdrop:focus-within .navdrop__menu,.navdrop.is-open .navdrop__menu{ opacity:1; visibility:visible; translate:none; }
.navdrop:hover .navdrop__seta,.navdrop.is-open .navdrop__seta{ rotate:180deg; }
.navdrop__btn.is-active::after{ transform:scaleX(1); }
/* gaveta do celular: "Sobre" vira um rótulo com os dois links embaixo */
.drawer__grupo{ margin:.9rem 0 .1rem; font:var(--w-medium) var(--text-xs)/1.4 var(--f-head); text-transform:uppercase; letter-spacing:var(--ls-caps); color:var(--text-60); }
.drawer a.drawer__sub{ font-size:1.35rem; padding:.4rem 0 .4rem 1rem; }

/* ═══ sacola: contador no ícone ═══ */
.navlink--cart{ position:relative; }
.sacola-qtd{ position:absolute; top:-2px; right:-6px; min-width:17px; height:17px; padding:0 4px; border-radius:9px; background:var(--azul); color:var(--creme);
  font:var(--w-medium) 10px/17px var(--f-head); text-align:center; letter-spacing:0; }
.sacola-qtd[hidden]{ display:none; }

/* ═══ acessórios: título da página de relógios e os cartões das coleções em grade ═══ */
.acess__grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:56px 40px; max-width:1360px; margin:0 auto; }
.acess__grid .ccard{ text-align:center; }
.acess__vazio{ display:grid; justify-items:center; gap:28px; padding:2rem 0 4rem; text-align:center; font:300 var(--text-lg, 1.25rem)/1.4 var(--f-head); }
@media (max-width:767px){ .acess__grid{ grid-template-columns:1fr 1fr; gap:2.5rem 1rem; } }

/* ═══ página da sacola ═══ */
.sacola{ padding:clamp(2.5rem,6vw,90px) var(--gutter) clamp(3rem,7vw,110px); max-width:1240px; margin:0 auto; }
/* faixa de foto no topo, como nas políticas (editável no painel: carrinho.faixa) */
.sacola-topo{ padding:0 var(--gutter); }
.sacola-topo .texto__faixa{ margin-bottom:0; }
.sacola-topo + .sacola{ padding-top:clamp(2.5rem,5vw,72px); }
.sacola__titulo{ margin:0 0 clamp(2rem,4vw,56px); font-size:clamp(2.2rem,5vw,4.5rem); font-weight:400; line-height:1.05; }
.sacola__corpo{ display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:clamp(2rem,5vw,80px); align-items:start; }
.sacola__itens{ list-style:none; margin:0; padding:0; border-top:1px solid rgba(0,35,75,.15); }
.sacola__itens[hidden]{ display:none; }
.sacola__item{ display:grid; grid-template-columns:120px minmax(0,1fr) auto; gap:24px; align-items:start; padding:24px 0; border-bottom:1px solid rgba(0,35,75,.15); }
.sacola__foto{ display:block; aspect-ratio:310/384; background:var(--bg-3); overflow:hidden; }
.sacola__foto img{ width:100%; height:100%; object-fit:cover; }
.sacola__info{ display:grid; gap:6px; justify-items:start; }
.sacola__nome{ font:var(--w-medium) var(--text-base)/1.25 var(--f-head); text-transform:uppercase; letter-spacing:var(--ls-caps); text-decoration:none; }
.sacola__sub{ font:300 var(--text-xs)/1.4 var(--f-head); }
.sacola__unit{ font:300 var(--text-sm)/1.4 var(--f-head); }
.sacola__item.is-out .sacola__foto img{ opacity:.45; }
.sacola__item.is-out .sacola__unit{ font-weight:var(--w-medium); }
.sacola__acoes{ display:flex; align-items:center; gap:20px; margin-top:12px; }
.sacola__acoes .qtd{ width:112px; height:40px; }
.qtd output{ min-width:2.2em; text-align:center; font:var(--w-medium) var(--text-base)/1 var(--f-head); color:var(--azul); }
.qtd button:disabled{ opacity:.3; cursor:default; }
.sacola__remover{ padding:4px 0; border:0; background:none; color:inherit; cursor:pointer; font:300 var(--text-xs)/1 var(--f-head); text-decoration:underline; text-underline-offset:3px; }
.sacola__total{ font:var(--w-medium) var(--text-base)/1.25 var(--f-head); white-space:nowrap; }
.sacola__resumo{ position:sticky; top:calc(var(--header-h) + 24px); display:grid; gap:10px; padding:28px; background:var(--bg-3); border:1px solid rgba(0,35,75,.1); }
.sacola__resumo[hidden]{ display:none; }
.sacola__linha{ display:flex; justify-content:space-between; align-items:baseline; margin:0; font:var(--w-medium) var(--text-lg, 1.25rem)/1.2 var(--f-head); }
.sacola__pix,.sacola__parcelas,.sacola__nota{ margin:0; font:300 var(--text-sm)/1.45 var(--f-head); }
.sacola__pix:empty,.sacola__parcelas:empty,.sacola__aviso:empty{ display:none; }
.sacola__aviso{ margin:0; font:var(--w-medium) var(--text-xs)/1.45 var(--f-head); }
.sacola__nota{ color:var(--text-60); font-size:var(--text-xs); }
.sacola__finalizar{ margin-top:14px; width:100%; justify-content:center; }
.sacola__continuar{ justify-self:center; margin-top:6px; font:300 var(--text-xs)/1 var(--f-head); text-decoration:underline; text-underline-offset:3px; }
.sacola__vazia{ display:grid; justify-items:center; gap:28px; padding:3rem 0; text-align:center; font:300 var(--text-lg, 1.25rem)/1.4 var(--f-head); }
.sacola__vazia[hidden]{ display:none; }
@media (max-width:900px){
  .sacola__corpo{ grid-template-columns:1fr; }
  .sacola__resumo{ position:static; }
}
@media (max-width:560px){
  .sacola__item{ grid-template-columns:88px minmax(0,1fr); gap:16px; }
  .sacola__total{ grid-column:2; }
  .sacola__acoes{ gap:14px; }
}