/* Tokens: VS Phones, Criciúma
   Paleta: azul VS #0B4C87 (marca e tinta), azul vivo #1B6FB8 (hover), gelo #EEF3F8 (fundo alternado),
           branco #FFFFFF, grafite #14202B (texto), cinza #5B6873 (secundário), zap #0A6E52 (só no botão fixo)
   Tipos: Bricolage Grotesque (títulos), Instrument Sans (texto)
   Assinatura: o contorno de iPhone do logo se desenha em volta da foto real da loja no hero
   e é o mesmo traço dos ícones do catálogo. */
:root {
  --azul: #0B4C87;
  --azul-vivo: #1B6FB8;
  --gelo: #EEF3F8;
  --branco: #FFFFFF;
  --grafite: #14202B;
  --cinza: #5B6873;
  --linha: rgb(11 76 135 / .16);
  --zap: #0A6E52;          /* verde WhatsApp escuro: 6,2:1 sobre branco */
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --texto: "Instrument Sans", system-ui, sans-serif;
  --largura: 1200px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --raio: 12px;
  --raio-moldura: 30px;
  --topo-altura: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
body {
  margin: 0; font-family: var(--texto); color: var(--grafite); background: var(--branco);
  line-height: 1.55; font-size: 1.0625rem; overflow-x: clip; -webkit-font-smoothing: antialiased;
}
img, iframe, svg { max-width: 100%; display: block; }
img { width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--display); font-optical-sizing: auto; font-weight: 700; line-height: 1.05; margin: 0 0 .5em; letter-spacing: -.025em; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 4.4vw, 3.8rem); letter-spacing: -.035em; line-height: 1.02; }
h2 { font-size: clamp(1.9rem, 3.8vw, 2.9rem); }
h3 { font-size: 1.25rem; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--azul-vivo); outline-offset: 3px; }
.caixa { max-width: var(--largura); margin: 0 auto; padding: 0 var(--gutter); }
.visual-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip { position: absolute; left: -999px; top: .5rem; background: var(--azul); color: #fff; padding: .5rem 1rem; z-index: 100; border-radius: var(--raio); }
.skip:focus { left: .5rem; }

/* Botões */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 50px; padding: .8rem 1.5rem;
  border-radius: var(--raio); background: var(--azul); color: #fff; text-decoration: none; font-weight: 600;
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.botao:hover { background: var(--azul-vivo); transform: translateY(-1px); }
.botao--linha { background: transparent; color: var(--azul); box-shadow: inset 0 0 0 2px var(--azul); }
.botao--linha:hover { background: var(--azul); color: #fff; }
.botao--peq { min-height: 42px; padding: .5rem 1.1rem; font-size: .95rem; white-space: nowrap; }
.botao--grande { min-height: 58px; padding: 1rem 2.2rem; font-size: 1.125rem; }
.link { font-weight: 600; color: var(--azul); text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1.5px; }
.link:hover { color: var(--azul-vivo); }

/* Topo */
.topo { position: sticky; top: 0; z-index: 60; background: rgb(255 255 255 / .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--linha); }
.topo__caixa { max-width: var(--largura); margin: 0 auto; padding: .8rem var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; position: relative; }
.marca { color: var(--azul); display: inline-flex; align-items: center; }
.marca__logo { width: 190px; height: auto; }
.topo__nav { display: flex; align-items: center; gap: 1.6rem; }
.topo__nav a:not(.botao) { text-decoration: none; font-weight: 500; font-size: .98rem; min-height: 44px; display: inline-flex; align-items: center; border-bottom: 2px solid transparent; transition: color .15s ease, border-color .15s ease; }
.topo__nav a:not(.botao):hover, .topo__nav a.ativo { color: var(--azul); border-bottom-color: var(--azul); }
.topo__cta { margin-left: .5rem; }
.topo__menu { display: none; }

/* Hero: título à esquerda, apoio e ações à direita, a loja embaixo em largura total */
.hero {
  display: grid; grid-template-columns: 1.15fr minmax(0, .85fr); gap: 1.5rem clamp(2rem, 5vw, 5rem); align-items: end;
  max-width: var(--largura); margin: 0 auto; padding: clamp(2rem, 4vw, 3rem) var(--gutter) clamp(3rem, 7vw, 6rem);
}
.hero__titulo { color: var(--azul); margin: 0; }
.hero__lado { padding-bottom: .35rem; }
.hero__apoio { font-size: clamp(1.05rem, 1.4vw, 1.2rem); max-width: 36ch; color: var(--cinza); margin-bottom: 1.5rem; }
.hero__acoes { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1rem; }
.hero__confianca { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .9rem; font-size: .95rem; color: var(--cinza); margin: 0; }
.hero__confianca a { display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; color: var(--grafite); min-height: 44px; }
.hero__confianca a:hover { color: var(--azul); }
.hero__confianca svg { color: #E5A100; }

/* A moldura: o contorno de iPhone do logo, em escala, com a foto real da loja dentro */
.moldura { position: relative; margin: clamp(1rem, 2vw, 1.5rem) 0 0; grid-column: 1 / -1; }
.moldura__foto { position: relative; overflow: hidden; border-radius: var(--raio-moldura); background: var(--azul); aspect-ratio: 2.4 / 1; isolation: isolate; }
.moldura__foto img { width: 100%; height: 100%; object-fit: cover; transform-origin: center; will-change: transform; }
.moldura__traco { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.moldura__traco rect { fill: none; stroke: var(--azul); stroke-width: 8; }
.moldura__camera {
  position: absolute; top: 18px; left: 18px; width: 58px; height: 58px; border-radius: 16px;
  border: 3px solid #fff; background: rgb(11 76 135 / .6); z-index: 2;
}
.moldura__camera i { position: absolute; width: 11px; height: 11px; border-radius: 50%; background: #fff; }
.moldura__camera i:first-child { top: 10px; left: 10px; }
.moldura__camera i:last-child { right: 10px; bottom: 10px; }

/* Seções */
.secao { padding: clamp(3.5rem, 8vw, 7rem) 0; }
.secao--gelo { background: var(--gelo); }
.secao--azul { background: var(--azul); color: #fff; }

/* Catálogo: cabeça fixa à esquerda, fileiras à direita */
.catalogo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.catalogo__cabeca { position: sticky; top: calc(var(--topo-altura) + 2rem); }
.catalogo__cabeca p { color: var(--cinza); font-size: 1.125rem; max-width: 34ch; margin-bottom: 1.5rem; }
.linha { list-style: none; margin: 0; padding: 0; }
.linha li {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 1.5rem; align-items: center;
  padding: 1.4rem 0; border-top: 1px solid var(--linha); transition: padding-left .2s ease;
}
.linha li:last-child { border-bottom: 1px solid var(--linha); }
.linha__icone { width: 56px; height: 56px; fill: none; stroke: var(--azul); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s ease; }
.linha__texto h3 { margin: 0 0 .15em; }
.linha__texto p { margin: 0; color: var(--cinza); max-width: 48ch; }
.linha__acao { font-weight: 600; color: var(--azul); text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1.5px; white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; }
.linha li:hover .linha__icone { transform: translateY(-3px); }
.linha li:hover .linha__texto h3, .linha__acao:hover { color: var(--azul-vivo); }
.linha__extra .linha__icone { stroke: var(--cinza); }

/* Compromissos (a única seção azul) */
.compromissos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3.5rem) clamp(2rem, 5vw, 5rem); }
.compromissos li { border-top: 1px solid rgb(255 255 255 / .35); padding-top: 1.25rem; }
.compromissos strong { display: block; font-family: var(--display); font-weight: 700; font-size: clamp(1.6rem, 2.8vw, 2.3rem); line-height: 1.08; letter-spacing: -.02em; margin-bottom: .5rem; text-wrap: balance; }
.compromissos span { color: rgb(255 255 255 / .8); font-size: 1.05rem; max-width: 34ch; display: block; }

/* Troca: três passos lado a lado, numerados porque é uma sequência */
.troca__cabeca { max-width: 56ch; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.troca__cabeca p { color: var(--cinza); font-size: 1.125rem; margin: 0; }
.passos { list-style: none; counter-reset: passo; padding: 0; margin: 0 0 2.5rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 4rem); }
.passos li { counter-increment: passo; border-top: 2px solid var(--azul); padding-top: 1.25rem; }
.passos li::before { content: counter(passo); display: block; font-family: var(--display); font-weight: 700; font-size: clamp(2.4rem, 4vw, 3.4rem); line-height: 1; letter-spacing: -.04em; color: var(--azul); margin-bottom: .75rem; }
.passos strong { display: block; font-family: var(--display); font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; margin-bottom: .35rem; }
.passos p { margin: 0; color: var(--cinza); max-width: 30ch; }
.troca__acao { margin: 0; }

/* Avaliações */
.avaliacoes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.avaliacoes__nota { position: sticky; top: calc(var(--topo-altura) + 2rem); }
.avaliacoes__numero { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(5rem, 11vw, 8.5rem); line-height: .9; letter-spacing: -.05em; color: var(--azul); }
.avaliacoes__estrelas { display: block; color: #E5A100; font-size: 1.6rem; letter-spacing: .1em; margin: .5rem 0 .75rem; }
.avaliacoes__nota p { color: var(--cinza); max-width: 26ch; }
.depoimentos { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.75rem; }
.depoimentos blockquote { margin: 0; padding-left: 1.25rem; border-left: 3px solid var(--azul); }
.depoimentos p { font-size: 1.15rem; margin-bottom: .6rem; text-wrap: pretty; }
.depoimentos footer { font-weight: 600; color: var(--azul); }
.depoimentos footer::after { content: ", no Google"; font-weight: 400; color: var(--cinza); }

/* A loja: texto fixo enquanto as fotos passam */
.loja { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.loja__texto { position: sticky; top: calc(var(--topo-altura) + 2rem); }
.loja__texto p { color: var(--cinza); font-size: 1.125rem; max-width: 40ch; }
.loja__lema { font-family: var(--display); font-style: italic; font-weight: 500; font-size: 1.45rem; color: var(--azul); margin: 1.5rem 0; }
.loja__redes { display: flex; flex-direction: column; gap: .25rem; }
.loja__redes a { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; font-weight: 600; color: var(--grafite); min-height: 44px; }
.loja__redes a:hover { color: var(--azul); }
.loja__redes svg { color: var(--azul); flex: 0 0 auto; }
.loja__fotos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: end; }
.loja__fachada { grid-column: 1 / -1; aspect-ratio: 4 / 3; object-fit: cover; }
.loja__recepcao { aspect-ratio: 4 / 5; object-fit: cover; }
.loja__interior { aspect-ratio: 3 / 2; object-fit: cover; }

/* Onde e quando */
.onde { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); align-items: stretch; }
.onde address { font-style: normal; font-size: 1.125rem; line-height: 1.5; margin-bottom: 1.5rem; }
.horarios { margin: 0 0 1.75rem; }
.horarios div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; padding: .65rem 0; border-top: 1px solid var(--linha); }
.horarios div:last-child { border-bottom: 1px solid var(--linha); }
.horarios dt { font-weight: 600; }
.horarios dd { margin: 0; color: var(--cinza); text-align: right; }
.onde__acoes { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1rem; }
.onde__nota { color: var(--cinza); margin: 0; }
.mapa { width: 100%; min-height: 420px; height: 100%; border: 0; border-radius: 20px; background: #dfe7ee; }

/* CTA final */
.final { padding-top: clamp(3rem, 7vw, 6rem); }
.final__caixa { text-align: center; }
.final__caixa h2 { color: var(--azul); }
.final__caixa p { color: var(--cinza); font-size: 1.125rem; max-width: 40ch; margin: 0 auto 1.75rem; }

/* Botão fixo do WhatsApp */
.zap {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 50; display: inline-flex; align-items: center; gap: .5rem;
  min-height: 54px; padding: .8rem 1.2rem; border-radius: 999px; background: var(--zap); color: #fff; text-decoration: none;
  font-weight: 600; box-shadow: 0 10px 28px rgb(20 32 43 / .28); transition: transform .18s ease;
}
.zap:hover { transform: translateY(-2px); }

/* Rodapé */
.rodape { border-top: 1px solid var(--linha); padding: 2.5rem 0 6rem; font-size: .9rem; color: var(--cinza); }
.rodape__caixa p { max-width: 70ch; margin-bottom: .6rem; }
.rodape a { color: var(--azul); }

/* Motion. Hero em CSS puro, roda na primeira pintura sem depender de script:
   o texto sobe, o contorno se desenha em volta da loja, a câmera aparece por último.
   Reveals de scroll começam invisíveis e o GSAP revela; sem GSAP ou com reduced-motion, main.js devolve a opacidade. */
@keyframes subir { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes revelar { from { transform: scale(1.04); } to { transform: none; } }
@keyframes tracar { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes surgir { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  [data-hero] { animation: subir .8s cubic-bezier(.2, .7, .2, 1) both; }
  .hero__lado > [data-hero]:nth-child(1) { animation-delay: .1s; }
  .hero__lado > [data-hero]:nth-child(2) { animation-delay: .2s; }
  .hero__lado > [data-hero]:nth-child(3) { animation-delay: .3s; }
  /* A moldura só anima depois da primeira pintura (main.js adiciona .entrar); sem JS ela já aparece pronta */
  .moldura.entrar .moldura__foto { animation: revelar 1.2s cubic-bezier(.2, .7, .2, 1) both; }
  .moldura.entrar .moldura__traco rect { stroke-dasharray: 1; animation: tracar 1.5s cubic-bezier(.4, 0, .2, 1) .2s both; }
  .moldura.entrar .moldura__camera { animation: surgir .5s ease 1.5s both; }
  [data-reveal], [data-catalogo] > li { opacity: 0; }
}

/* Responsivo */
@media (max-width: 1024px) {
  .catalogo, .loja { grid-template-columns: 1fr; }
  .catalogo__cabeca, .loja__texto, .avaliacoes__nota { position: static; }
}
@media (max-width: 820px) {
  .topo__caixa { padding: .7rem var(--gutter); }
  .marca__logo { width: 160px; }
  .topo__menu {
    display: block; position: relative; width: 48px; height: 48px;
    border: 0; background: transparent; padding: 0; cursor: pointer; border-radius: var(--raio);
  }
  .topo__menu span { position: absolute; left: 12px; right: 12px; top: 50%; height: 2px; margin-top: -1px; background: var(--azul); border-radius: 2px; transition: transform .2s ease; }
  .topo__menu span:first-child { transform: translateY(-4px); }
  .topo__menu span:last-child { transform: translateY(4px); }
  .topo.aberto .topo__menu span:first-child { transform: rotate(45deg); }
  .topo.aberto .topo__menu span:last-child { transform: rotate(-45deg); }
  .topo__nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--linha); padding: .5rem var(--gutter) 1rem;
  }
  .topo.aberto .topo__nav { display: flex; }
  .topo__nav a:not(.botao) { min-height: 48px; border-bottom: 1px solid var(--linha); font-size: 1.05rem; }
  .topo__nav a.ativo { border-bottom-color: var(--linha); }
  .topo__cta { margin: 1rem 0 0; }

  /* No celular a foto da loja vem logo depois do título, antes do texto de apoio */
  .hero { grid-template-columns: 1fr; padding-top: 2rem; gap: 1.25rem; }
  .moldura { grid-column: auto; order: 1; margin-top: .5rem; }
  .hero__lado { order: 2; }
  .moldura__foto { aspect-ratio: 4 / 3; border-radius: 22px; }
  .moldura__traco rect { rx: 26; ry: 26; stroke-width: 6; }
  .moldura__camera { top: 12px; left: 12px; width: 44px; height: 44px; border-radius: 12px; }
  .moldura__camera i { width: 8px; height: 8px; }
  .moldura__camera i:first-child { top: 8px; left: 8px; }
  .moldura__camera i:last-child { right: 8px; bottom: 8px; }

  .avaliacoes, .onde { grid-template-columns: 1fr; }
  .passos { grid-template-columns: 1fr; gap: 1.5rem; }
  .passos li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: .75rem; padding-top: 1rem; }
  .passos li::before { grid-row: 1 / span 2; font-size: 2rem; margin: 0; }
  .passos p { max-width: none; }
  .avaliacoes__nota p { max-width: none; }
  .compromissos { grid-template-columns: 1fr; gap: 1.75rem; }
  .mapa { min-height: 320px; }
  .zap { left: 1rem; right: 1rem; justify-content: center; bottom: .9rem; }
  .rodape { padding-bottom: 6.5rem; }
}
@media (max-width: 560px) {
  .linha li { grid-template-columns: 44px minmax(0, 1fr); row-gap: .5rem; padding: 1.2rem 0; }
  .linha__icone { width: 44px; height: 44px; align-self: start; }
  .linha__acao { grid-column: 2; }
  .hero__acoes .botao, .catalogo__cabeca .botao, .troca__acao .botao { width: 100%; }
  .loja__fotos { grid-template-columns: 1fr; }
  .loja__interior { aspect-ratio: 16 / 10; }
  .horarios div { grid-template-columns: 1fr; gap: .1rem; }
  .horarios dd { text-align: left; }
  .onde__acoes .botao { width: 100%; }
}