/* Brechó da Nenê — boutique de curadoria em Florianópolis.
   Identidade "Azulejo da Ilha": o ladrilho de quatro cabides (a flor do azulejo do casario açoriano, com a
   roseta de renda de bilro no miolo), o nome em versais espaçadas e as cores da Ilha.
   Plano: a vitrine 3D é o único momento ousado; o resto é quieto: texto alinhado à esquerda, muito respiro,
   sem cartões, sem sombras. A marca aparece no topo, nos cabides dos capítulos, no barrado de azulejo que
   separa as faixas azuis e no ladrilho que se desenha no rodapé. */
/* As letras ficam no próprio site (fonts/, recorte latino do Google Fonts, licença em fonts/OFL.txt): antes vinham do
   Google Fonts, um pedido a outro endereço que segurava a 1ª pintura e mandava o IP de quem visita ao Google. */
@font-face { font-family: "Bodoni Moda"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/bodoni-moda.woff2") format("woff2"); 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: "Cormorant Garamond"; font-style: normal; font-weight: 500 600; font-display: swap; src: url("../fonts/cormorant-garamond.woff2") format("woff2"); 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: "Cormorant Garamond"; font-style: italic; font-weight: 600; font-display: swap; src: url("../fonts/cormorant-garamond-italico.woff2") format("woff2"); 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: "Jost"; font-style: normal; font-weight: 300 600; font-display: swap; src: url("../fonts/jost.woff2") format("woff2"); 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; }

:root {
  --cal: #F4EFE6;            /* fundo: a cal das paredes do casario */
  --cal-funda: #EAE3D6;      /* faixas secundárias e fundo das fotos */
  --azul: #1F3A93;           /* Azul Azulejo: a cor da marca, faixas escuras e botões */
  --lavado: #C7D0EC;         /* Azul Lavado: detalhes claros e foco sobre o azul */
  --tinta: #15151A;          /* texto */
  --tinta-2: #565A70;        /* texto de apoio (5,9:1 sobre a cal) */
  --ocre: #D6A23A;           /* Ocre Bilro: só detalhe, nunca texto sobre a cal */
  --linha: #D9D2C3;
  --f-marca: "Bodoni Moda", Didot, "Bodoni 72", "Times New Roman", serif;   /* só a marca: logo e o BRECHÓ da abertura */
  --f-display: "Cormorant Garamond", Garamond, "EB Garamond", Georgia, serif; /* títulos e frases */
  --f-texto: "Jost", Futura, "Century Gothic", "Segoe UI", sans-serif;
  --gutter: clamp(16px, 5vw, 72px);
  --arco: 50% 50% 0 0 / 11% 11% 0 0; /* arco abatido das janelas açorianas */
  --azulejo: clamp(44px, 4.2vw, 60px); /* lado do azulejo do barrado */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  color-scheme: light;
  scrollbar-color: var(--azul) var(--cal);
  accent-color: var(--azul);
  caret-color: var(--azul);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cal);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
a, button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
section[id] { scroll-margin-top: 76px; }
h1, h2, h3 { text-wrap: balance; font-optical-sizing: auto; }
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; border-radius: 3px; }
.cinema :focus-visible, .consignacao :focus-visible, .rodape :focus-visible,
.topo:not(.solido) :focus-visible, .zap-flutuante:focus-visible { outline-color: var(--lavado); }
::selection { background: var(--lavado); color: var(--tinta); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 1.15em; height: 1.15em; flex: none; }

.pular {
  position: absolute; left: 16px; top: -80px; z-index: 100;
  background: var(--azul); color: var(--cal); padding: 10px 16px; border-radius: 999px; text-decoration: none;
}
.pular:focus { top: calc(env(safe-area-inset-top, 0px) + 12px); }

/* ---------- topo ---------- */
.topo {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; gap: 16px;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) var(--gutter) 14px;
  color: var(--cal);
  transition: background-color 250ms ease, color 250ms ease;
}
.topo.solido {
  background: rgba(244, 239, 230, .92);
  color: var(--azul);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
/* a assinatura da casa: o ladrilho e o nome em versais, desenhados (ver o sprite no fim do index.html) */
.marca { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.marca-ladrilho { width: 32px; height: 32px; flex: none; }
.marca-nome { width: 176px; height: 15.5px; flex: none; transition: opacity 250ms ease, visibility 250ms; } /* proporção do nome: 417,3 × 36,74 */
/* sobre a vitrine o nome já aparece grande (NENÊ e BRECHÓ): no topo fica só o ladrilho */
.topo:not(.solido) .marca-nome { opacity: 0; visibility: hidden; }
.topo-acoes { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.menu-desk { display: flex; gap: 28px; margin-right: 10px; }
.menu-desk a { text-decoration: none; font-size: .9375rem; }
@media (hover: hover) and (pointer: fine) {
  .menu-desk a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
}
.btn-topo {
  display: inline-flex; align-items: center; gap: 9px; padding: 9px 17px; border-radius: 999px;
  font-size: .9375rem; font-weight: 500; text-decoration: none;
  box-shadow: inset 0 0 0 1px currentColor;
}
.topo.solido .btn-topo { background: var(--azul); color: var(--cal); box-shadow: none; }
.btn-menu {
  display: none; align-items: center; justify-content: center; width: 42px; height: 42px;
  border-radius: 999px; border: 0; box-shadow: inset 0 0 0 1px currentColor; background: transparent; cursor: pointer;
}
@media (max-width: 860px) {
  .menu-desk { display: none; }
  .btn-menu { display: inline-flex; }
  .btn-topo { padding: 10px; }
  .btn-topo span { display: none; }
  .marca { gap: 10px; }
  .marca-ladrilho { width: 28px; height: 28px; }
  .marca-nome { width: 148px; height: 13.03px; }
}

/* menu do celular: folha de cal com a assinatura no topo, as seções numeradas entre fios (como o índice do
   manual da marca), a conversa com a Nenê embaixo e o barrado de azulejo no pé */
.menu-cel {
  position: fixed; inset: 0; z-index: 60; overscroll-behavior: contain; overflow-y: auto;
  display: flex; flex-direction: column;
  background: var(--cal); color: var(--tinta);
  padding: calc(env(safe-area-inset-top, 0px) + 14px) var(--gutter) 0;
}
.menu-topo { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--azul); }
.menu-fechar {
  width: 42px; height: 42px; flex: none; border-radius: 999px; border: 0; box-shadow: inset 0 0 0 1px currentColor;
  background: transparent; color: var(--azul); display: grid; place-items: center; cursor: pointer;
}
.menu-lista { display: grid; margin-top: clamp(28px, 6vh, 56px); border-top: 1px solid var(--linha); }
.menu-lista a {
  display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; align-items: center;
  min-height: 64px; padding: 10px 0; border-bottom: 1px solid var(--linha); text-decoration: none;
}
.menu-num { font-size: .8125rem; font-weight: 500; letter-spacing: .12em; color: var(--azul); font-variant-numeric: tabular-nums; }
.menu-nome { font-family: var(--f-display); font-size: clamp(1.875rem, 8vw, 2.4375rem); line-height: 1.1; }
.menu-lista .ico { width: 22px; height: 22px; color: var(--azul); }
.menu-pe { display: grid; gap: 12px; margin-top: auto; padding-top: 32px; }
.menu-zap { justify-content: center; }
.menu-local { margin: 0; text-align: center; font-size: .875rem; color: var(--tinta-2); }
.menu-cel::after {
  content: ""; flex: none; height: var(--azulejo); margin: 24px calc(-1 * var(--gutter)) env(safe-area-inset-bottom, 0px);
  background: #F7F3EC url("../img/marca/azulejo.svg") center top / var(--azulejo) var(--azulejo) repeat-x;
  box-shadow: 0 -1px 0 rgba(21, 21, 26, .18);
}

/* ---------- cinema ---------- */
.cinema { position: relative; height: 780vh; background: var(--tinta); color: var(--cal); }
@media (max-width: 860px) { .cinema { height: 660vh; } }
.cinema-palco { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; }
.cinema-tela { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 900ms var(--ease-out); }
.cinema.pronto .cinema-tela { opacity: 1; }
.cinema-veu {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(130% 95% at 50% 45%, rgba(14, 18, 34, 0) 60%, rgba(14, 18, 34, .42) 100%),
    linear-gradient(to top, rgba(14, 18, 34, .58) 0%, rgba(14, 18, 34, 0) 42%),
    linear-gradient(to bottom, rgba(14, 18, 34, .32) 0%, rgba(14, 18, 34, 0) 15%);
}
.cinema-grao {
  position: absolute; inset: -40%; pointer-events: none; opacity: .1; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  animation: grao 1s steps(4) infinite;
}
.cinema.fora .cinema-grao, .cinema.fora .dica-rolar .ico, .cinema.fora .cabide-anim { animation-play-state: paused; }
/* no celular o grão quase não aparece e custa caro: a mistura (overlay) por cima do 3D é refeita a cada quadro */
@media (pointer: coarse) { .cinema-grao { display: none; } }
@keyframes grao {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-3%, 2%); }
  50% { transform: translate(2%, -3%); }
  75% { transform: translate(-2%, -1%); }
  100% { transform: translate(0, 0); }
}

.cena { position: absolute; inset: 0; pointer-events: none; opacity: 0; will-change: opacity, transform; z-index: 4; }
.cena.ativa .cena-acoes { pointer-events: auto; }
.cena-titulo { opacity: 1; display: flex; align-items: flex-end; padding: 0 var(--gutter) calc(clamp(40px, 11vh, 120px) + (100lvh - 100svh)); }
.cena-titulo-miolo { display: grid; gap: 16px; min-width: 0; transform-origin: 0 100%; }
.titulo-visivel { display: block; }
/* " da Nenê": escondido só da vista (o 3D mostra NENÊ), mas inteiro no H1 para o Google e o leitor de tela */
.titulo-resto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* sem 3D não há o NENÊ atrás da bolsa: aí o título volta a ser o nome inteiro */
.cinema.sem-3d .titulo-visivel { display: inline; }
.cinema.sem-3d .titulo-resto { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; }
.cinema.sem-3d .titulo-gigante { font-size: clamp(1.6rem, calc((100vw - 2 * var(--gutter)) / 10.9), 4.25rem); }
/* BRECHÓ como na logo: versais da Bodoni Moda, a letra da marca (corte de 40 pt), com 200 de espaço;
   o NENÊ já está grande atrás da bolsa, então aqui fica só a primeira palavra (o nome inteiro vai para leitor de tela) */
.titulo-gigante {
  font-family: var(--f-marca); font-weight: 400; margin: 0 -.2em 0 0;
  font-variation-settings: "opsz" 40;
  text-transform: uppercase; letter-spacing: .2em; white-space: nowrap;
  font-size: clamp(2.25rem, calc((100vw - 2 * var(--gutter)) / 8), 5.25rem); line-height: 1.05;
  color: var(--cal); text-shadow: 0 2px 30px rgba(14, 18, 34, .35);
}
/* abertura: o nome sobe letra a letra (js/animacoes.js). Até o script assumir, o nome fica guardado; se o script
   falhar, aparece sozinho em 2,5 s. A frase e a dica não esperam o script: sobem e aparecem na primeira pintura (a
   frase é o maior texto da tela, o LCP do Google; esperando o script, ele variava de 2 a 3,7 s na 4G lenta) */
.cena-titulo .titulo-gigante { animation: guardar-ate-js 0s linear 2.5s both; }
@keyframes guardar-ate-js { from { visibility: hidden; } to { visibility: visible; } }
.cena-titulo .subtitulo, .cena-titulo .dica-rolar { animation: chegar .6s cubic-bezier(.33, 1, .68, 1) .1s both; }
.cena-titulo .dica-rolar { animation-delay: .22s; }
@keyframes chegar { from { opacity: 0; transform: translateY(12px); } }
/* máscaras do texto que sobe: cortam só por baixo e deixam acento, itálico e sombra respirarem */
.tg-verso-mask, .cap-verso-mask { overflow: visible !important; clip-path: inset(-0.6em -0.6em -0.22em -0.6em); }
.cap-verso-mask.solta { clip-path: none; }
.subtitulo { margin: 0; max-width: 34ch; font-size: clamp(1rem, 1.5vw, 1.1875rem); color: var(--cal); text-shadow: 0 1px 16px rgba(14, 18, 34, .55); }
.dica-rolar {
  position: absolute; right: var(--gutter); bottom: calc(clamp(40px, 11vh, 120px) + (100lvh - 100svh)); margin: 0;
  display: inline-flex; align-items: center; gap: 10px; font-size: .875rem; white-space: nowrap;
}
.dica-rolar .ico { animation: descer 2s ease-in-out infinite; }
@keyframes descer { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@media (max-width: 600px) {
  .dica-rolar { left: var(--gutter); right: auto; bottom: calc(18px + (100lvh - 100svh)); }
}

.cap {
  position: absolute; left: var(--gutter); right: 64px;
  bottom: calc(clamp(40px, 11vh, 120px) + (100lvh - 100svh)); max-width: 36rem;
}
.cap h2 {
  font-family: var(--f-display); font-weight: 400; margin: 0;
  font-size: clamp(2.5625rem, 5.7vw, 5.125rem); line-height: 1.04; letter-spacing: -.01em;
  text-shadow: 0 2px 26px rgba(14, 18, 34, .4);
}
/* o cabide do ladrilho entre o título e o texto: gancho, ombros e barra, desenhados quando o capítulo chega */
.cap-fio { display: block; width: 62px; height: 26.2px; margin: 18px 0 12px; overflow: visible; }
.cap-fio path { fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.cap p { margin: 0; max-width: 38ch; font-size: clamp(1rem, 1.3vw, 1.125rem); text-shadow: 0 1px 14px rgba(14, 18, 34, .6); }

.cena-final { display: grid; place-items: center; text-align: center; padding: 0 16px; }
.cena-final h2 {
  font-family: var(--f-display); font-weight: 400; margin: 0;
  font-size: clamp(2.875rem, 8vw, 6.75rem); line-height: 1.04; text-shadow: 0 2px 30px rgba(14, 18, 34, .45);
}
.cena-acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }

.trilho {
  position: absolute; z-index: 4; right: clamp(14px, 3vw, 40px); top: 50%;
  width: 1px; height: min(38vh, 320px); transform: translateY(-50%);
  background: rgba(244, 239, 230, .25);
}
.trilho-cheio { position: absolute; inset: 0; background: var(--cal); transform-origin: top center; transform: scaleY(0); }
.trilho-marca {
  position: absolute; left: 50%; width: 7px; height: 7px; border-radius: 50%;
  background: var(--tinta); box-shadow: 0 0 0 1px rgba(244, 239, 230, .7); transform: translate(-50%, -50%);
}
.trilho-marca.passou { background: var(--cal); }
.indice {
  position: absolute; z-index: 4; margin: 0; top: calc(env(safe-area-inset-top, 0px) + 84px); right: clamp(14px, 3vw, 40px);
  font-size: .75rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: rgba(244, 239, 230, .92);
}

.cinema-carregando {
  position: absolute; z-index: 5; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; justify-items: center; gap: 12px; font-size: .9375rem; color: var(--cal);
  transition: opacity 300ms ease;
}
.cabide-anim { width: 44px; height: 28px; transform-origin: 50% 8%; animation: balanca 1.8s ease-in-out infinite; }
@keyframes balanca { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
.cinema.pronto .cinema-carregando { opacity: 0; pointer-events: none; }

/* ---------- dentro da loja, a loja de verdade (js/loja-real.js) ----------
   Quando a câmera do 3D passa pela porta, o vídeo do passeio com a Nenê cobre o 3D (a opacidade vem do JS). O fim
   é ela comemorando na porta: o convite desce para a parte de baixo, sobre um degradê, e deixa o rosto à mostra. */
.cinema-real { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; opacity: 0; pointer-events: none; }
.cinema.sem-3d .cinema-real { display: none; }
/* a porta: faixas de azulejo que descem, fecham a tela e sobem como porta de enrolar (o JS só liga .fechada) */
.cinema-porta { position: absolute; inset: 0; display: flex; pointer-events: none; z-index: 3; }
.cinema-porta span {
  flex: 1; height: 100%; transform: scaleY(0); transform-origin: top; will-change: transform;
  transition: transform 1s cubic-bezier(.76, 0, .24, 1) calc(var(--i, 0) * 90ms);
  /* cada faixa com sombra nas bordas (lê como lâmina de porta), o azulejo apagado sob um véu azul para a legenda ler */
  background:
    linear-gradient(90deg, rgba(14, 18, 34, .34), rgba(14, 18, 34, 0) 16%, rgba(14, 18, 34, 0) 84%, rgba(14, 18, 34, .34)),
    linear-gradient(rgba(31, 58, 147, .62), rgba(31, 58, 147, .62)),
    url("../img/marca/azulejo-noturno.svg") center top / var(--azulejo) var(--azulejo) repeat var(--azul);
  box-shadow: inset -1px 0 0 rgba(14, 18, 34, .55), inset 1px 0 0 rgba(244, 239, 230, .14);
}
.cinema-porta.fechada span { transform: scaleY(1); }
.cinema.sem-3d .cinema-porta { display: none; }
.cinema:not(.sem-3d) .cena-final {
  place-items: end center; padding-bottom: calc(clamp(56px, 11vh, 120px) + (100lvh - 100svh));
  background: linear-gradient(to top, rgba(14, 18, 34, .8), rgba(14, 18, 34, .35) 42%, rgba(14, 18, 34, 0) 68%);
}

/* sem 3D (aparelho antigo): capa estática */
.cinema.sem-3d { height: auto; }
.cinema.sem-3d .cinema-palco {
  position: relative; height: auto; min-height: 100svh; padding: 130px 0 72px;
  background: radial-gradient(90% 70% at 70% 40%, #DDE3F3 0%, #C7D0EC 40%, #1F3A93 100%);
}
.cinema.sem-3d .cinema-tela, .cinema.sem-3d .trilho, .cinema.sem-3d .indice,
.cinema.sem-3d .cinema-carregando, .cinema.sem-3d .dica-rolar, .cinema.sem-3d .cinema-grao { display: none; }
.cinema.sem-3d .cena { position: relative; inset: auto; opacity: 1 !important; transform: none !important; }
.cinema.sem-3d .cena-titulo { min-height: 60svh; }
.cinema.sem-3d .cap { position: relative; left: auto; right: auto; bottom: auto; margin: 56px var(--gutter) 0; }
.cinema.sem-3d .cena-final { margin-top: 64px; }

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 999px;
  font-size: 1rem; font-weight: 500; line-height: 1.1; letter-spacing: .01em; text-decoration: none; border: 0; cursor: pointer;
}
.btn-claro { background: var(--cal); color: var(--azul); }
.btn-contorno-claro { color: var(--cal); box-shadow: inset 0 0 0 1px currentColor; }
.btn-escuro { background: var(--azul); color: var(--cal); }
.btn-contorno { color: var(--azul); box-shadow: inset 0 0 0 1px currentColor; }
.btn, .btn-topo, .btn-menu, .menu-fechar, .filtro, .peca-reservar { transition: transform 160ms var(--ease-out); }
.btn:active, .btn-topo:active, .btn-menu:active, .menu-fechar:active, .filtro:active, .peca-reservar:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
}

/* ---------- seções claras ---------- */
.secao { position: relative; padding: clamp(88px, 12vw, 168px) var(--gutter); }
.secao-cab { max-width: 76rem; margin: 0 auto clamp(32px, 5vw, 56px); display: grid; gap: 14px; }
.titulo-secao {
  font-family: var(--f-display); font-weight: 400; margin: 0;
  font-size: clamp(2.5625rem, 5.25vw, 4.25rem); line-height: 1.04; letter-spacing: -.01em; color: var(--tinta);
}
.secao-cab > p { max-width: 52ch; margin: 0; color: var(--tinta-2); }
.nota-previa {
  max-width: 76rem; margin: 40px auto 0; font-size: .875rem; color: var(--azul);
  padding-left: 14px; box-shadow: inset 2px 0 0 var(--lavado);
}
.sem-previa .nota-previa { display: none; }

/* barrado de azulejo: a fileira de ladrilhos que separa a cal das faixas azuis, como o rodapé das casas da Ilha */
.consignacao::before, .rodape::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--azulejo); pointer-events: none;
  background: #F7F3EC url("../img/marca/azulejo.svg") center top / var(--azulejo) var(--azulejo) repeat-x;
  box-shadow: 0 1px 0 rgba(21, 21, 26, .25);
}

/* ---------- curadoria ---------- */
/* rótulos em versais pequenas, como a cidade na assinatura da marca */
.rotulo {
  max-width: 76rem; margin: 0 auto 18px;
  font-size: .8125rem; font-weight: 500; line-height: 1.4; letter-spacing: .2em; text-transform: uppercase; color: var(--azul);
}
.rotulo-grade { margin-top: clamp(56px, 7vw, 96px); }

/* destaques da semana: faixas que abrem. Fechadas, a foto fica no azul do azulejo com o nome de lado;
   a aberta ganha cor e a etiqueta de cal. O topo em arco abatido repete as janelas do casario. */
.destaques { max-width: 76rem; margin: 0 auto; }
.faixas { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; height: clamp(440px, 40vw, 560px); }
.faixa {
  position: relative; flex: 1 1 0; min-width: 0; min-height: 0; overflow: hidden; isolation: isolate;
  border-radius: var(--arco); background: var(--cal-funda);
}
.faixa.ativa { flex-grow: 5; }
.faixa-botao {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0;
  background: none; border-radius: inherit; cursor: pointer;
}
.faixa-botao:focus-visible { outline-offset: -5px; outline-color: var(--cal); }
.faixa-foto {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%;
  transform: scale(1.08); filter: grayscale(1);
}
.faixa-tinta { position: absolute; inset: 0; background: rgba(31, 58, 147, .66); mix-blend-mode: multiply; }
.faixa-nome {
  position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%) rotate(180deg); writing-mode: vertical-rl;
  max-height: calc(100% - 48px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: .8125rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--cal);
  text-shadow: 0 1px 10px rgba(14, 18, 34, .45);
}
.faixa.ativa .faixa-foto { transform: none; filter: none; }
.faixa.ativa .faixa-tinta, .faixa.ativa .faixa-nome { opacity: 0; }
.faixa-info {
  position: absolute; left: 16px; bottom: 16px; z-index: 3; max-width: min(380px, calc(100% - 32px));
  display: grid; gap: 4px; padding: 18px 22px 20px; background: var(--cal); visibility: hidden; opacity: 0;
}
.faixa.ativa .faixa-info { visibility: visible; opacity: 1; }
.faixa-titulo { margin: 0; font-family: var(--f-display); font-size: clamp(1.5625rem, 2.3vw, 2rem); line-height: 1.15; color: var(--tinta); }
.faixa-detalhe { margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--tinta-2); }
.faixa-preco { margin: 0; font-size: .875rem; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.faixa-reservar {
  justify-self: start; display: inline-flex; align-items: center; gap: 8px; margin-top: 10px;
  font-size: .9375rem; font-weight: 500; color: var(--azul);
  text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px;
}
@media (hover: hover) and (pointer: fine) { .faixa-reservar:hover { color: var(--tinta); } }
/* no celular as faixas ficam deitadas, uma embaixo da outra */
@media (max-width: 720px) {
  .faixas { flex-direction: column; gap: 8px; height: min(840px, 224vw); }
  .faixa { border-radius: 14px; }
  .faixa-foto { object-position: center 42%; }
  .faixa-nome {
    writing-mode: horizontal-tb; transform: none; translate: 0 -50%;
    left: 18px; right: 18px; top: 50%; bottom: auto; max-height: none;
  }
  .faixa-info { left: 10px; right: 10px; bottom: 10px; max-width: none; padding: 14px 16px 16px; }
  .faixa-titulo { font-size: 1.4375rem; }
}

/* a lupa: um círculo com a mesma foto ampliada (js/animacoes.js, lupaNasFotos) */
.lupa {
  --x: 50%; --y: 50%; --r: 0px;
  position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none;
  clip-path: circle(var(--r) at var(--x) var(--y));
}
.lupa-foto {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform-origin: var(--x) var(--y); transform: scale(var(--ampliacao, 2.4));
}
.lupa-aro {
  position: absolute; left: 0; top: 0; z-index: 2; border-radius: 50%; pointer-events: none; visibility: hidden; opacity: 0;
  box-shadow: 0 0 0 1.5px rgba(244, 239, 230, .95), 0 0 0 2.5px rgba(31, 58, 147, .3), 0 10px 26px rgba(21, 21, 26, .22);
}
/* no celular: um aviso discreto de que a foto amplia ao toque */
.lupa-dica {
  display: none; position: absolute; right: 12px; bottom: 12px; z-index: 3; width: 36px; height: 36px; border-radius: 50%;
  place-items: center; background: rgba(244, 239, 230, .92); color: var(--azul); pointer-events: none;
}
@media (hover: none), (pointer: coarse) { .lupa-dica { display: grid; } }
.ampliada .lupa-dica { opacity: 0; }
.peca-foto.ampliada { touch-action: none; }

.filtros {
  max-width: 76rem; margin: 0 auto 36px; display: flex; gap: 6px 26px; overflow-x: auto;
  padding: 2px 2px 10px; scrollbar-width: none; border-bottom: 1px solid var(--linha);
}
.filtros::-webkit-scrollbar { display: none; }
.filtro {
  flex: 0 0 auto; padding: 4px 0; border: 0; background: none; cursor: pointer;
  font-size: .9375rem; color: var(--tinta-2);
}
@media (hover: hover) and (pointer: fine) { .filtro:hover { color: var(--tinta); } }
.filtro[aria-pressed="true"] { color: var(--azul); text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 1px; }
.grade {
  position: relative; list-style: none; margin: 0 auto; padding: 0; max-width: 76rem;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(28px, 3.4vw, 48px) clamp(14px, 2.2vw, 28px);
}
.peca { display: grid; gap: 6px; align-content: start; min-width: 0; }
.peca-destaque { grid-column: span 2; grid-row: span 2; }
@media (max-width: 1020px) { .grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .peca-destaque { grid-column: 1 / -1; grid-row: auto; }
}
.peca-foto { position: relative; margin: 0 0 10px; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--arco); background: var(--cal-funda); }
.peca-foto img { width: 100%; height: 100%; object-fit: cover; }
.peca-foto .sem-foto { position: absolute; inset: 0; display: grid; place-items: center; color: var(--tinta-2); }
.peca-foto .sem-foto .ico { width: 36%; height: 36%; opacity: .45; }
.peca-selo {
  position: absolute; z-index: 3; left: 12px; bottom: 12px; padding: 4px 11px; border-radius: 999px;
  background: var(--cal); color: var(--azul); font-size: .8125rem;
}
.peca-nome { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: 1.5rem; line-height: 1.2; }
.peca-destaque .peca-nome { font-size: clamp(1.6875rem, 2.75vw, 2.25rem); }
.peca-detalhe { margin: 0; font-size: .9375rem; color: var(--tinta-2); }
.peca-linha { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.peca-preco { font-size: .9375rem; color: var(--tinta); }
.peca-reservar { font-size: .9375rem; font-weight: 500; color: var(--azul); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
@media (hover: hover) and (pointer: fine) { .peca-reservar:hover { color: var(--tinta); } }
.peca.vendida .peca-foto img { filter: grayscale(1); opacity: .55; }
.peca.vendida .peca-reservar { color: var(--tinta-2); text-decoration: none; pointer-events: none; }
.vazio { grid-column: 1 / -1; color: var(--tinta-2); padding: 32px 0; }

/* ---------- o cuidado ---------- */
.cuidado { background: var(--cal-funda); }
.cuidado-grade { max-width: 76rem; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 7vw, 112px); align-items: center; }
@media (max-width: 820px) { .cuidado-grade { grid-template-columns: 1fr; } }
.cuidado-texto { display: grid; gap: 22px; }
.cuidado-frase { margin: 0; max-width: 26ch; font-family: var(--f-display); font-size: clamp(1.6875rem, 3vw, 2.4375rem); line-height: 1.28; }
.cuidado-lista { list-style: none; margin: 6px 0 0; padding: 0; }
/* as linhas das listas são desenhadas: --fio vai de 0 a 1 quando a lista aparece (js/animacoes.js) */
.cuidado-lista li {
  --fio: 1; padding: 14px 0; color: var(--tinta-2);
  background: linear-gradient(rgba(31, 58, 147, .22), rgba(31, 58, 147, .22)) no-repeat 0 0 / calc(var(--fio) * 100%) 1px;
}
.cuidado-lista li:last-child {
  background:
    linear-gradient(rgba(31, 58, 147, .22), rgba(31, 58, 147, .22)) no-repeat 0 0 / calc(var(--fio) * 100%) 1px,
    linear-gradient(rgba(31, 58, 147, .22), rgba(31, 58, 147, .22)) no-repeat 0 100% / calc(var(--fio) * 100%) 1px;
}
.cuidado .nota-previa { margin: 6px 0 0; }
.cuidado-foto { margin: 0; aspect-ratio: 4 / 5; border-radius: var(--arco); overflow: hidden; background: var(--cal-funda); width: min(100%, 460px); justify-self: center; }
.cuidado-foto img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- como reservar ---------- */
.passos { list-style: none; margin: 0 auto; padding: 0; max-width: 76rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 5vw, 72px); }
@media (max-width: 760px) { .passos { grid-template-columns: 1fr; } }
.passos li {
  --fio: 1; display: grid; gap: 8px; align-content: start; padding-top: 18px;
  background: linear-gradient(var(--azul), var(--azul)) no-repeat 0 0 / calc(var(--fio) * 100%) 1px;
}
.passo-num { font-family: var(--f-display); font-size: 2.5625rem; line-height: 1; color: var(--azul); font-variant-numeric: lining-nums; }
.passos h3 { margin: 6px 0 0; font-family: var(--f-display); font-weight: 400; font-size: 1.6875rem; }
.passos p { margin: 0; color: var(--tinta-2); max-width: 34ch; }
.pagamentos { max-width: 76rem; margin: 48px auto 0; color: var(--tinta-2); }

/* ---------- a Nenê ---------- */
.sobre { max-width: 76rem; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 7vw, 112px); align-items: center; }
@media (max-width: 820px) { .sobre { grid-template-columns: 1fr; } }
.retrato { margin: 0; width: min(100%, 440px); justify-self: center; }
/* a Nenê na porta da loja, no arco das janelas açorianas; o azulejo lavado aparece enquanto a foto carrega */
.retrato-foto {
  aspect-ratio: 4 / 5; border-radius: var(--arco); overflow: hidden;
  background: var(--cal) url("../img/marca/azulejo-lavado.svg") center / 128px 128px repeat;
}
.retrato-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sobre-texto { display: grid; gap: 18px; }
.sobre-texto p { margin: 0; max-width: 54ch; color: var(--tinta-2); }
.assinatura { justify-self: start; font-family: var(--f-display); font-style: italic; font-size: 2.875rem; line-height: 1; color: var(--azul) !important; }

/* ---------- consignação ---------- */
.consignacao { background: var(--azul); color: var(--cal); padding-top: calc(var(--azulejo) + clamp(88px, 12vw, 168px)); }
.consignacao-miolo { max-width: 76rem; margin: 0 auto; display: grid; gap: 18px; justify-items: start; }
.consignacao h2 { font-family: var(--f-display); font-weight: 400; margin: 0; font-size: clamp(2.5625rem, 5.7vw, 4.5rem); line-height: 1.04; }
.consignacao p { margin: 0 0 10px; max-width: 48ch; color: var(--lavado); }
.consignacao .nota-previa { margin: 16px 0 0; color: var(--lavado); box-shadow: inset 2px 0 0 var(--ocre); }

/* ---------- visite ---------- */
.visite-grade { max-width: 76rem; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
@media (max-width: 820px) { .visite-grade { grid-template-columns: 1fr; } }
.visite-texto { display: grid; gap: 18px; justify-items: start; }
.status {
  display: inline-flex; align-items: center; gap: 9px; margin: 0; padding: 6px 14px; border-radius: 999px;
  font-size: .9375rem; background: var(--cal-funda); color: var(--tinta-2);
}
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status.aberto { background: #E1EFE6; color: #1F5E3A; }
.status.fechado { background: #F2E4E6; color: #7A2E3C; }
.info { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 28px; margin: 10px 0 12px; }
.info dt { color: var(--tinta-2); }
.info dd { margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.info dd .fraco { color: var(--tinta-2); }
.visite-acoes { display: flex; flex-wrap: wrap; gap: 10px; }
/* a fachada de verdade, para a pessoa reconhecer a loja quando chegar */
.fachada { margin: 0; display: grid; gap: 12px; }
.fachada img { display: block; width: 100%; height: auto; border-radius: var(--arco); background: var(--cal-funda); }
.fachada figcaption { font-size: .875rem; color: var(--tinta-2); }
/* a loja por dentro: o vídeo com a Nenê e três fotos, lado a lado; no celular o vídeo vem inteiro e as fotos
   viram uma fita que corre com o dedo. O vídeo só baixa quando a pessoa aperta o play. */
.por-dentro-titulo { max-width: 76rem; margin: clamp(56px, 7vw, 96px) auto 18px; }
.por-dentro-bloco { --g: clamp(10px, 1.6vw, 20px); max-width: 76rem; margin: 0 auto; display: grid; grid-template-columns: calc((100% - 3 * var(--g)) / 4) minmax(0, 1fr); gap: var(--g); align-items: start; }
.passeio { margin: 0; display: grid; gap: 10px; }
.passeio video { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; background: var(--cal-funda); }
.passeio figcaption { font-size: .875rem; color: var(--tinta-2); }
.por-dentro { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--g); }
.por-dentro img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; background: var(--cal-funda); }
@media (max-width: 600px) {
  .por-dentro-bloco { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .por-dentro { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 74%; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
  .por-dentro li { scroll-snap-align: start; }
}

/* ---------- perguntas frequentes (texto simples, sem JS: o Google e as respostas por IA leem daqui) ---------- */
.perguntas { background: var(--cal-funda); }
.perguntas-miolo { max-width: 52rem; margin: 0 auto; display: grid; }
.perguntas .titulo-secao { margin-bottom: 18px; }
.perguntas details { border-bottom: 1px solid var(--linha); }
.perguntas summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; cursor: pointer; list-style: none;
  font-family: var(--f-display); font-weight: 600; font-size: 1.375rem; line-height: 1.25; color: var(--tinta);
}
.perguntas summary::-webkit-details-marker { display: none; }
.perguntas summary::after { content: "+"; flex: none; font-family: var(--f-texto); font-weight: 300; font-size: 1.625rem; line-height: 1; color: var(--azul); transition: transform 200ms var(--ease-out); }
.perguntas details[open] summary::after { transform: rotate(45deg); }
.perguntas details p { margin: 0 0 20px; max-width: 60ch; color: var(--tinta-2); }

/* ---------- rodapé ---------- */
.rodape {
  position: relative; background: var(--azul); color: var(--lavado);
  padding: calc(var(--azulejo) + 88px) var(--gutter) calc(48px + env(safe-area-inset-bottom, 0px));
}
.rodape-miolo { max-width: 76rem; margin: 0 auto; display: grid; gap: 14px; justify-items: start; }
/* a logo principal: o ladrilho (desenhado traço a traço quando aparece), o nome e a cidade em ocre */
.rodape-marca { display: block; width: clamp(220px, 24vw, 300px); height: auto; color: var(--cal); overflow: visible; }
.rodape-cidade { color: var(--ocre); }
.rodape-frase { margin: 18px 0 0; }
.rodape-links { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 14px; }
.rodape-links a { text-decoration: none; color: var(--cal); }
@media (hover: hover) and (pointer: fine) { .rodape-links a:hover { text-decoration: underline; text-underline-offset: 5px; } }
.rodape-copy { margin: 22px 0 0; font-size: .875rem; opacity: .8; }
/* assinatura de quem fez o site (Golem), na cor do rodapé, discreta, logo abaixo do copyright */
.rodape-golem { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: -4px 0 0; font-size: .8125rem; opacity: .7; }
/* a marca (logo + estúdio digital) não quebra no meio; espaço à direita para o botão flutuante do WhatsApp */
.rodape-golem { padding-right: 72px; }
.rodape-golem .golem-marca { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.rodape-golem-logo { display: block; height: 16px; width: auto; }
/* quem responde pela loja (Decreto 7.962/2013) e os links das páginas legais, discretos, antes da assinatura */
.rodape-identificacao { margin: -6px 0 0; font-size: .8125rem; opacity: .8; }
.rodape-legais { margin-top: 0; gap: 6px 20px; font-size: .875rem; }

/* ---------- páginas legais (privacidade, termos e cookies, geradas por tools/paginas-legais.mjs) ---------- */
.legal-topo { padding: calc(env(safe-area-inset-top, 0px) + 22px) var(--gutter) 22px; border-bottom: 1px solid var(--linha); }
.legal-marca { font-family: var(--f-marca); font-size: .9375rem; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; color: var(--azul); }
.legal { max-width: 44rem; margin: 0 auto; padding: 48px var(--gutter) 112px; }
.legal h1 { margin: 0; font-family: var(--f-display); font-weight: 500; font-size: clamp(2.25rem, 7vw, 3.25rem); line-height: 1.08; color: var(--azul); }
.legal-data { margin: 10px 0 36px; font-size: .9375rem; color: var(--tinta-2); }
.legal h2 { margin: 48px 0 12px; font-family: var(--f-display); font-weight: 600; font-size: 1.625rem; line-height: 1.2; }
.legal h3 { margin: 28px 0 8px; font-size: 1.0625rem; font-weight: 600; }
.legal p, .legal ul, .legal ol { margin: 0 0 14px; color: var(--tinta-2); }
.legal ul, .legal ol { display: grid; gap: 8px; padding-left: 1.25em; }
.legal strong { font-weight: 600; color: var(--tinta); }
.legal a { color: var(--azul); text-underline-offset: 3px; }
.legal-tabela { margin: 0 0 18px; overflow-x: auto; }
.legal table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.legal th, .legal td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--linha); text-align: left; vertical-align: top; }
.legal th { font-weight: 600; color: var(--tinta); }
.legal td { color: var(--tinta-2); }
.rodape-loja { margin: 0; font-family: var(--f-marca); letter-spacing: .2em; text-transform: uppercase; color: var(--cal); }

/* ---------- WhatsApp flutuante ---------- */
.zap-flutuante {
  position: fixed; z-index: 45; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: var(--azul); color: var(--cal); box-shadow: 0 0 0 1px var(--lavado);
  transform: translateY(130px); transition: transform 300ms var(--ease-out);
}
.zap-flutuante.visivel:active { transform: scale(0.94); transition-duration: 160ms; }
.zap-flutuante .ico { width: 26px; height: 26px; }
.zap-flutuante.visivel { transform: none; }

/* ---------- leitura na tela ----------
   Títulos e frases em Cormorant Garamond, a letra "delicada" escolhida no provador (02/10): a Bodoni cansava a
   leitura e ficou só na marca. A Cormorant tem o olho pequeno, por isso os tamanhos acima já são 14% maiores.
   Peso 500 nos títulos grandes sobre a cal; 600 sobre o escuro (passeio, consignação) e nos tamanhos menores. */
.titulo-secao { font-weight: 500; }
.cap h2, .cena-final h2, .consignacao h2, .passo-num,
.cuidado-frase, .peca-nome, .passos h3, .faixa-titulo, .assinatura, .menu-nome { font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .cinema-grao, .dica-rolar .ico, .cabide-anim { animation: none; }
  .cena-titulo .titulo-gigante, .cena-titulo .subtitulo, .cena-titulo .dica-rolar { animation: none; }
  .zap-flutuante, .cinema-tela, .topo, .marca-nome { transition: none; }
  .btn:active, .btn-topo:active, .btn-menu:active, .menu-fechar:active, .filtro:active, .peca-reservar:active { transform: none; }
}