/* ==========================================================
   Calvi Pedras, identidade 2026
   Da marca antiga ficam só a logo e o azul dela (#064b82).
   Nada preso à rolagem: os blocos entram uma vez quando chegam
   na tela, e o resto do movimento responde ao mouse e ao toque.
   ========================================================== */

/* letras servidas pelo próprio site (só o alfabeto latino, que cobre o português) */
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url("../fontes/archivo.woff2") format("woff2");
}

:root {
  --azul: #064b82;
  --azul-vivo: #0b5fa5;
  --azul-claro: #a8c9e8;
  --noite: #03213b;
  --noite-funda: #02172a;
  --branco: #ffffff;
  --gelo: #f3f6f9;
  --gelo-2: #e7eef5;
  --tinta: #0d1b29;
  --cinza: #586674;
  --linha: #dde5ec;

  --sans: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --suave: cubic-bezier(.22, 1, .36, 1);
  --vai-volta: cubic-bezier(.65, 0, .35, 1);
  --raio-g: 30px;
  --raio: 22px;

  interpolate-size: allow-keywords;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.anima { scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--sans); font-size: 1.0625rem; line-height: 1.6;
  color: var(--tinta); background: var(--branco); overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
body.travado { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 400; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2.5px solid var(--azul-vivo); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--azul); color: var(--branco); }

.caixa { width: min(1280px, 100% - 48px); margin-inline: auto; }
.caixa--larga { width: min(1400px, 100% - 32px); }
.secao { padding-block: clamp(96px, 11vw, 168px); scroll-margin-top: 0; }

.pular {
  position: absolute; left: 16px; top: -80px; z-index: 100;
  background: var(--azul); color: var(--branco); padding: 10px 16px; border-radius: 10px;
}
.pular:focus { top: 16px; }

/* títulos */
/* títulos: Archivo larga e pesada, com o espaço entre letras apertado */
h1, h2, h3, .manifesto__texto, .rodape__nome, .gaveta__nav a, .regua__item b, .palco__numero, .linha__fase, .passos span {
  font-family: var(--sans); font-weight: 700; font-stretch: 116%; letter-spacing: -0.035em;
  font-variant-numeric: lining-nums;
}
h2 { font-size: clamp(2.1rem, 3.9vw, 3.6rem); line-height: 1; }
h1 em, h2 em, .manifesto__texto em { font-style: normal; color: var(--azul); }

.cabeca { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px 64px; flex-wrap: wrap; }
.cabeca p { max-width: 25em; font-size: 1.12rem; color: var(--cinza); }
.cabeca--claro h2 { color: var(--branco); }
.cabeca--claro h2 em { color: var(--azul-claro); }
.cabeca--claro p { color: rgba(255, 255, 255, .7); }

/* ==========================================================
   Botões: fundo que sobe por dentro e texto que rola
   ========================================================== */
.botao {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 54px; padding: 0 26px; border-radius: 999px; border: 1.5px solid transparent;
  font-weight: 600; font-size: 1rem; line-height: 1; text-decoration: none; white-space: nowrap;
  transition: color .45s var(--suave), border-color .45s var(--suave), box-shadow .5s var(--suave), scale .25s var(--suave);
}
.botao::before {
  content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: inherit;
  translate: 0 102%; transition: translate .6s var(--suave);
}
.botao:hover::before { translate: 0 0; }
.botao:active { scale: .97; }
.botao svg { width: 20px; height: 20px; flex: none; transition: transform .6s var(--suave); }
.botao:hover svg { transform: translateX(2px) rotate(-8deg); }
.botao--azul { background: var(--azul); color: var(--branco); box-shadow: 0 14px 30px -16px rgba(6, 75, 130, .9); }
.botao--azul::before { background: var(--noite); }
.botao--azul:hover { box-shadow: 0 18px 36px -16px rgba(3, 33, 59, .9); }
.botao--branco { background: var(--branco); color: var(--azul); }
.botao--branco::before { background: var(--gelo-2); }
.botao--linha { border-color: rgba(13, 27, 41, .18); color: var(--tinta); }
.botao--linha::before { background: var(--tinta); }
.botao--linha:hover { color: var(--branco); border-color: var(--tinta); }
.botao--linha:hover svg { transform: translateY(3px); }
.botao--pequeno { height: 46px; padding: 0 20px; font-size: .94rem; }
.botao--largo { width: 100%; }

/* texto que rola (montado pelo JS em [data-rolo]) */
.rolo { display: inline-grid; overflow: hidden; line-height: 1.25; }
.rolo > span { grid-area: 1 / 1; transition: transform .6s var(--suave); }
.rolo > span + span { transform: translateY(105%); }
.botao:hover .rolo > span:first-child { transform: translateY(-105%); }
.botao:hover .rolo > span + span { transform: translateY(0); }
[data-ima] { transition: transform .7s var(--suave), color .45s var(--suave), box-shadow .5s var(--suave), scale .25s var(--suave); }

/* ==========================================================
   Topo: cápsula de vidro flutuante
   ========================================================== */
.topo { position: fixed; top: 14px; left: 0; right: 0; z-index: 60; pointer-events: none; }
.topo__capsula {
  pointer-events: auto;
  width: min(1280px, 100% - 28px); margin-inline: auto; height: 64px;
  display: flex; align-items: center; gap: 6px; padding: 0 9px 0 12px;
  border-radius: 999px; border: 1px solid rgba(13, 27, 41, .07);
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
  box-shadow: 0 12px 40px -20px rgba(3, 33, 59, .45);
  transition: box-shadow .5s var(--suave), background-color .5s var(--suave);
}
.rolou .topo__capsula { background: rgba(255, 255, 255, .9); box-shadow: 0 14px 44px -18px rgba(3, 33, 59, .5); }
.marca {
  display: inline-flex; align-items: center; gap: 10px; padding-right: 10px;
  text-decoration: none; font-weight: 700; font-stretch: 112%; font-size: 1.02rem; letter-spacing: -.02em;
}
.marca img { width: 40px; height: 40px; transition: transform .8s var(--suave); }
.marca:hover img { transform: rotate(-12deg) scale(1.04); }

.nav { position: relative; display: flex; align-items: center; gap: 2px; margin-inline: auto; }
.nav a {
  position: relative; z-index: 1; padding: 10px 17px; border-radius: 999px;
  font-weight: 500; font-size: .95rem; text-decoration: none; color: var(--tinta);
  transition: color .3s var(--suave);
}
.nav__pilula {
  position: absolute; top: 0; left: 0; height: 100%; width: 0; border-radius: 999px;
  background: var(--gelo-2); opacity: 0;
  transition: transform .5s var(--suave), width .5s var(--suave), opacity .3s ease;
}
.topo__fone { padding: 10px 14px; font-size: .92rem; font-weight: 500; color: var(--cinza); text-decoration: none; transition: color .3s; }
.topo__fone:hover { color: var(--azul); }

.menu-botao {
  display: none; position: relative; width: 46px; height: 46px; margin-left: 4px; flex: none;
  border: 0; border-radius: 50%; background: var(--tinta);
}
.menu-botao span {
  position: absolute; left: 14px; right: 14px; height: 2px; border-radius: 2px; background: var(--branco);
  transition: transform .5s var(--suave), top .5s var(--suave);
}
.menu-botao span:first-child { top: 18px; }
.menu-botao span:last-child { top: 26px; }
.menu-botao[aria-expanded="true"] span:first-child { top: 22px; transform: rotate(45deg); }
.menu-botao[aria-expanded="true"] span:last-child { top: 22px; transform: rotate(-45deg); }

/* gaveta do celular */
.gaveta {
  position: fixed; inset: 0; z-index: 55; display: flex; flex-direction: column; justify-content: space-between;
  padding: 112px 24px max(28px, env(safe-area-inset-bottom));
  background: var(--noite); color: var(--branco);
  clip-path: inset(0 0 100% 0); transition: clip-path .7s var(--vai-volta);
}
.gaveta[hidden] { display: flex; visibility: hidden; }
.gaveta.aberta { clip-path: inset(0 0 0 0); visibility: visible; }
.gaveta__nav { display: flex; flex-direction: column; }
.gaveta__nav a {
  display: flex; align-items: baseline; gap: 14px; padding: 10px 0;
  font-size: clamp(2.1rem, 9.5vw, 2.8rem); line-height: 1.1; text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  opacity: 0; transform: translateY(30px);
  transition: opacity .5s ease, transform .7s var(--suave);
}
.gaveta__nav small { font-weight: 500; font-stretch: 100%; letter-spacing: 0; font-size: .8rem; color: var(--azul-claro); }
.gaveta.aberta .gaveta__nav a { opacity: 1; transform: none; }
.gaveta.aberta .gaveta__nav a:nth-child(1) { transition-delay: .18s; }
.gaveta.aberta .gaveta__nav a:nth-child(2) { transition-delay: .23s; }
.gaveta.aberta .gaveta__nav a:nth-child(3) { transition-delay: .28s; }
.gaveta.aberta .gaveta__nav a:nth-child(4) { transition-delay: .33s; }
.gaveta.aberta .gaveta__nav a:nth-child(5) { transition-delay: .38s; }
.gaveta__pe { display: grid; gap: 18px; opacity: 0; transition: opacity .6s ease .45s; }
.gaveta.aberta .gaveta__pe { opacity: 1; }
.gaveta__pe p { font-size: .92rem; color: rgba(255, 255, 255, .6); }

/* ==========================================================
   Capa
   ========================================================== */
.capa { padding-top: clamp(124px, 15vh, 168px); }
.capa__topo {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 32px 56px; align-items: end;
  padding-bottom: clamp(36px, 5vw, 64px);
}
.capa__titulo { font-size: clamp(2.5rem, 5.1vw, 4.6rem); line-height: .95; letter-spacing: -.045em; font-stretch: 118%; }
.capa__lado p { max-width: 27em; font-size: 1.14rem; color: var(--cinza); }
.capa__botoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* sem animação (sem JS, ou toque com "menos movimento"): um quadro parado */
.capa__palco { width: min(1400px, 100% - 32px); margin-inline: auto; }
.capa__fixo { position: relative; aspect-ratio: 16 / 7.6; border-radius: var(--raio-g); overflow: hidden; background: var(--gelo-2); }
.capa__foto { position: absolute; inset: 0; margin: 0; overflow: hidden; }
.capa__contra, .capa__contra img { display: block; width: 100%; height: 100%; }
.capa__contra img { object-fit: cover; object-position: 50% 60%; }
.capa__canto { display: none; }
.capa__legenda {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding: 20px;
}
.capa__frase { display: none; }
.capa__selo {
  display: flex; align-items: center; gap: 12px; padding: 8px 20px 8px 8px; border-radius: 999px; flex: none;
  background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  font-size: .88rem; line-height: 1.3; color: var(--cinza);
}
.capa__selo img { width: 44px; height: 44px; }
.capa__selo b { display: block; color: var(--tinta); font-weight: 600; font-size: .96rem; }

/* com animação: o palco é alto e o quadro fica preso na tela. Tudo anda só por
   transform (a placa de vídeo faz sozinha, sem repintar a cada quadro):
   o quadro escala até a borda, a foto dentro escala ao contrário para não
   deformar, e os quatro cantinhos brancos fazem a borda arredondada.
   Os números vêm do JS: --sx --sy (quadro), --ix --iy (contra), --z (zoom). */
.anima .capa__palco { width: 100%; height: calc(100svh + 50svh); }
.anima .capa__fixo { position: sticky; top: 0; height: 100svh; aspect-ratio: auto; border-radius: 0; background: transparent; }
.anima .capa__foto { transform-origin: 50% 0; transform: scale(var(--sx, .9), var(--sy, .001)); will-change: transform; }
.anima .capa__contra { position: absolute; inset: 0; transform-origin: 50% 0; transform: scale(var(--ix, 1.1), var(--iy, 1000)); will-change: transform; }
.anima .capa__contra img { transform: scale(var(--z, 1.14)); transform-origin: 50% 62%; will-change: transform; }
.anima .capa__canto {
  --rc: 30px;
  display: block; position: absolute; top: 0; left: 0; z-index: 2; width: var(--rc); height: var(--rc);
  will-change: transform; pointer-events: none;
}
.anima .capa__canto[data-canto="ce"] { transform-origin: 0 0; background: radial-gradient(circle var(--rc) at 100% 100%, transparent 98%, var(--branco) 100%); }
.anima .capa__canto[data-canto="cd"] { transform-origin: 100% 0; background: radial-gradient(circle var(--rc) at 0 100%, transparent 98%, var(--branco) 100%); }
.anima .capa__canto[data-canto="be"] { transform-origin: 0 100%; background: radial-gradient(circle var(--rc) at 100% 0, transparent 98%, var(--branco) 100%); }
.anima .capa__canto[data-canto="bd"] { transform-origin: 100% 100%; background: radial-gradient(circle var(--rc) at 0 0, transparent 98%, var(--branco) 100%); }
.anima .capa__legenda {
  padding: 0 max(24px, calc((100% - 1280px) / 2)) clamp(28px, 6vh, 64px);
  min-height: 46%; align-items: flex-end; pointer-events: none;
}
.anima .capa__legenda > * { pointer-events: auto; }
.anima .capa__legenda::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgba(2, 23, 42, .72), rgba(2, 23, 42, 0));
  opacity: 0; transition: opacity .8s ease;
}
.anima .capa__frase {
  display: block; max-width: 13em; color: var(--branco);
  font-size: clamp(1.9rem, 3.7vw, 3.5rem); font-weight: 700; font-stretch: 116%; letter-spacing: -.04em; line-height: 1;
}
.anima .capa__selo { opacity: 0; translate: 0 14px; transition: opacity .6s ease, translate .8s var(--suave); }
/* quando o quadro toma a tela: a frase sobe palavra por palavra e o selo chega */
.anima .capa__fixo.cheia .capa__legenda::before { opacity: 1; }
.anima .capa__fixo.cheia .capa__frase .pal__in { transform: none; }
.anima .capa__fixo.cheia .capa__selo { opacity: 1; translate: 0 0; transition-delay: .35s; }

/* ==========================================================
   Manifesto
   ========================================================== */
.manifesto { padding-block: clamp(80px, 10vw, 150px) clamp(40px, 5vw, 72px); }
.manifesto__texto { max-width: 24em; font-size: clamp(1.6rem, 2.9vw, 2.7rem); line-height: 1.14; font-weight: 600; font-stretch: 108%; letter-spacing: -.03em; color: var(--tinta); }

/* ==========================================================
   Produtos
   ========================================================== */
.produtos { padding-top: clamp(48px, 6vw, 88px); }
.produtos__lista { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 64px; }
.produto { position: relative; display: block; color: inherit; text-decoration: none; }
.produto__foto { aspect-ratio: 3 / 4; border-radius: var(--raio); overflow: hidden; background: var(--gelo-2); }
.produto__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--suave); }
.produto:hover .produto__foto img { transform: scale(1.06); }
.produto__texto { padding: 22px 4px 0; }
.produto h3 { font-size: 1.55rem; line-height: 1.05; }
.produto__texto p { margin-top: 10px; color: var(--cinza); max-width: 24em; }
.produto__seta {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  background: var(--branco); color: var(--azul);
  box-shadow: 0 10px 24px -14px rgba(3, 33, 59, .6);
  transition: transform .7s var(--suave), background-color .4s, color .4s;
}
.produto__seta svg { width: 22px; height: 22px; }
.produto:hover .produto__seta { transform: rotate(45deg); background: var(--azul); color: var(--branco); }

/* ==========================================================
   Tamanhos
   ========================================================== */
.tamanhos { background: var(--noite); color: var(--branco); }

.regua {
  position: relative; margin-top: 64px;
  display: grid; grid-template-columns: repeat(7, 1fr);
  border-top: 1px solid rgba(255, 255, 255, .28);
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .22) 0 1px, transparent 1px calc(100% / 28)) top left / 100% 7px no-repeat;
}
.regua__marca {
  position: absolute; top: 0; left: 0; height: 100%; width: calc(100% / 7);
  border-radius: 0 0 20px 20px; background: var(--branco);
  transition: transform .7s var(--suave), width .7s var(--suave);
}
.regua__item {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 24px 4px 18px; background: none; border: 0; color: rgba(255, 255, 255, .6);
  transition: color .4s var(--suave);
}
.regua__item::before {
  content: ""; position: absolute; top: 0; left: 50%; width: 1.5px; height: 14px; margin-left: -.75px;
  background: currentColor; opacity: .7;
}
.regua__item b { font-weight: 800; font-stretch: 125%; font-size: 1.75rem; line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.regua__item small { font-size: .76rem; font-weight: 500; letter-spacing: .02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.regua__item:hover { color: var(--branco); }
.regua__item[aria-selected="true"] { color: var(--noite); }

.palco {
  margin-top: 40px; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: clamp(32px, 4.5vw, 64px); align-items: stretch;
}
.palco__fotos { position: relative; align-self: start; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--raio-g); overflow: hidden; background: var(--noite-funda); }
.palco__foto { position: absolute; inset: 0; opacity: 0; transform: scale(1.08); transition: opacity .8s ease, transform 1.4s var(--suave); }
.palco__foto img { width: 100%; height: 100%; object-fit: cover; }
.palco__foto.ativo { opacity: 1; transform: none; z-index: 1; }

.palco__info { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.palco__numero { height: clamp(5.5rem, 9vw, 8.4rem); overflow: hidden; font-weight: 800; font-stretch: 125%; letter-spacing: -.05em; line-height: 1; }
.palco__trilho { transition: transform .9s var(--suave); }
.palco__trilho span { display: flex; align-items: flex-end; height: clamp(5.5rem, 9vw, 8.4rem); font-size: clamp(5.5rem, 9vw, 8.4rem); line-height: .9; }
.palco__trilho span:first-child { font-size: clamp(2.6rem, 4.4vw, 4rem); letter-spacing: -.04em; }

.palco__paineis { display: grid; }
.painel {
  grid-area: 1 / 1; opacity: 0; transform: translateY(18px); visibility: hidden;
  transition: opacity .45s ease, transform .7s var(--suave), visibility 0s linear .45s;
}
.painel.ativo { opacity: 1; transform: none; visibility: visible; transition-delay: .12s, .12s, 0s; }
.painel h3 { font-size: clamp(1.8rem, 2.6vw, 2.4rem); line-height: 1; }
.painel h3 span { margin-left: 10px; font-size: .95rem; font-weight: 500; font-stretch: 100%; letter-spacing: .02em; color: var(--azul-claro); vertical-align: middle; }
.painel p { margin-top: 14px; font-size: 1.08rem; color: rgba(255, 255, 255, .76); max-width: 28em; }
.usos { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; }
.usos li { padding: 6px 14px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; font-size: .86rem; color: rgba(255, 255, 255, .86); }
.painel__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 26px; }
.seta--claro { color: var(--branco); }
.seta--claro:hover { color: var(--azul-claro); }

.mao { display: flex; align-items: center; gap: 16px; margin: auto 0 0; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .14); }
.mao__fotos { position: relative; width: 132px; height: 132px; flex: none; border-radius: 18px; overflow: hidden; background: var(--noite-funda); }
.mao__fotos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.1); transition: opacity .6s ease, transform 1s var(--suave); }
.mao__fotos img.ativo { opacity: 1; transform: none; }
.mao figcaption { font-size: .92rem; color: rgba(255, 255, 255, .62); max-width: 16em; }
.mao figcaption a { color: var(--branco); text-underline-offset: 3px; }
html:not(.js) .palco__foto, html:not(.js) .mao__fotos img { opacity: 1; }

/* ==========================================================
   História
   ========================================================== */
.historia__topo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.historia__texto p { margin-top: 20px; font-size: 1.12rem; color: var(--cinza); max-width: 31em; }
.historia__texto h2 + p { margin-top: 30px; }
.historia__foto { margin: 0; border-radius: var(--raio-g); overflow: hidden; aspect-ratio: 1080 / 800; }
.historia__foto img { width: 100%; height: 100%; object-fit: cover; }

.linha { list-style: none; margin: clamp(72px, 9vw, 120px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.linha__foto { aspect-ratio: 4 / 3; border-radius: var(--raio); overflow: hidden; background: var(--gelo-2); }
.linha__foto img { width: 100%; height: 100%; object-fit: cover; }
.linha__fase { display: block; margin-top: 22px; font-size: 1.35rem; line-height: 1.1; }
.linha p { margin-top: 10px; color: var(--cinza); max-width: 26em; }

/* ==========================================================
   Contato
   ========================================================== */
.contato { background: var(--azul); color: var(--branco); }
.contato h2 em { color: var(--azul-claro); }
.passos { list-style: none; margin: 64px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.passos li { padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .28); font-size: 1.1rem; color: rgba(255, 255, 255, .8); }
.passos span { display: block; margin-bottom: 14px; font-size: 2.8rem; font-weight: 800; font-stretch: 125%; line-height: 1; color: var(--branco); }
.passos b { color: var(--branco); font-weight: 600; }

.contato__grade { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); margin-top: 80px; align-items: start; }
.pedido { background: var(--branco); color: var(--tinta); border-radius: var(--raio-g); padding: clamp(24px, 3.4vw, 44px); box-shadow: 0 40px 80px -40px rgba(2, 23, 42, .6); }
.pedido h3 { font-size: 1.7rem; line-height: 1.05; }
.pedido__nota { margin-top: 10px; color: var(--cinza); font-size: .98rem; }
.pedido__campos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; margin-top: 26px; }
.campo { display: block; }
.campo--inteiro { grid-column: 1 / -1; }
.campo > span { display: block; font-weight: 500; font-size: .92rem; }
.campo i { font-style: normal; color: var(--cinza); }
.campo input, .campo select, .campo textarea {
  display: block; width: 100%; margin-top: 7px; padding: 14px 16px; font-size: 1rem;
  background: var(--gelo); border: 1.5px solid transparent; border-radius: 14px;
  transition: border-color .3s, background-color .3s, box-shadow .3s;
}
.campo textarea { resize: vertical; min-height: 100px; }
.campo select {
  appearance: none; -webkit-appearance: none; padding-right: 44px;
  background: var(--gelo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23064b82' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") right 18px center no-repeat;
}
.campo input::placeholder, .campo textarea::placeholder { color: #95a1ad; }
.campo input:hover, .campo select:hover, .campo textarea:hover { background-color: var(--gelo-2); }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; background-color: var(--branco); border-color: var(--azul); box-shadow: 0 0 0 5px rgba(6, 75, 130, .12); }
.campo [aria-invalid="true"] { border-color: #c0392b; background-color: #fff5f4; }
.pedido__erro { margin-top: 16px; color: #b42318; font-weight: 600; font-size: .95rem; }
.pedido .botao { margin-top: 24px; height: 58px; }

.contatos { list-style: none; margin: 0; padding: 0; }
.contatos li { display: flex; align-items: center; gap: 16px; padding: 18px 0; border-bottom: 1px solid rgba(255, 255, 255, .2); }
.contatos li:first-child { padding-top: 4px; }
.contatos svg { width: 24px; height: 24px; flex: none; color: var(--azul-claro); }
.contatos small { display: block; font-size: .8rem; color: rgba(255, 255, 255, .62); }
.contatos a, .contatos span { font-size: 1.06rem; font-weight: 500; text-decoration: none; }
.contatos a { background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat; transition: background-size .45s var(--suave); }
.contatos a:hover { background-size: 100% 1px; }

/* ==========================================================
   Dúvidas
   ========================================================== */
.duvidas__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.duvidas__lista { border-top: 1px solid var(--linha); }
.duvidas details { border-bottom: 1px solid var(--linha); }
.duvidas summary {
  position: relative; list-style: none; cursor: pointer;
  padding: 26px 64px 26px 0; font-size: 1.16rem; font-weight: 500; transition: color .3s;
}
.duvidas summary::-webkit-details-marker { display: none; }
.duvidas summary::after {
  content: ""; position: absolute; right: 0; top: 50%; width: 40px; height: 40px; margin-top: -20px;
  border-radius: 50%; background: var(--gelo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M7 1v12M1 7h12' stroke='%23064b82' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center no-repeat;
  transition: transform .6s var(--suave), background-color .3s;
}
.duvidas summary:hover { color: var(--azul); }
.duvidas summary:hover::after { background-color: var(--gelo-2); }
.duvidas details[open] summary::after { transform: rotate(135deg); }
.duvidas details::details-content { block-size: 0; overflow: clip; transition: block-size .55s var(--suave), content-visibility .55s allow-discrete; }
.duvidas details[open]::details-content { block-size: auto; }
.duvidas__resp p { padding: 0 64px 26px 0; color: var(--cinza); max-width: 60ch; }

/* ==========================================================
   Rodapé
   ========================================================== */
.rodape { background: var(--noite); color: rgba(255, 255, 255, .7); overflow: hidden; }
.rodape__chamada {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap;
  padding-block: clamp(96px, 11vw, 150px) 64px; border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.rodape__chamada h2 { color: var(--branco); max-width: 11em; }
.rodape__chamada h2 em { color: var(--azul-claro); }
.rodape__grade { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-block: 56px 24px; }
.rodape__marca { display: flex; gap: 16px; align-items: center; }
.rodape__marca img { width: 52px; height: 52px; flex: none; }
.rodape__marca p { max-width: 20em; }
.rodape__links { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.rodape a { text-decoration: none; transition: color .3s; }
.rodape a:hover { color: var(--branco); }
.rodape__nome {
  margin: 24px 0 0; font-size: clamp(3rem, 12.4vw, 12rem); font-weight: 800; font-stretch: 125%; letter-spacing: -.06em; line-height: .86; white-space: nowrap; text-align: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .02));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rodape__fim { padding-block: 24px 32px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .88rem; color: rgba(255, 255, 255, .62); }

/* ==========================================================
   WhatsApp flutuante (some na capa e no contato)
   ========================================================== */
.zap {
  position: fixed; right: 20px; bottom: 20px; z-index: 40;
  width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center;
  background: #25d366; color: var(--branco); box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .5);
  transition: opacity .4s var(--suave), transform .6s var(--suave), visibility 0s;
}
.zap svg { width: 30px; height: 30px; }
.zap:hover { transform: scale(1.06); }
.js .zap:not(.mostrar) { opacity: 0; transform: translateY(20px) scale(.8); visibility: hidden; pointer-events: none; transition: opacity .3s ease, transform .5s var(--suave), visibility 0s .5s; }

/* ==========================================================
   Entradas (uma vez, quando chegam na tela)
   ========================================================== */
.anima [data-revela="sobe"] {
  opacity: 0; translate: 0 32px;
  transition: opacity .9s ease var(--atraso, 0s), translate 1.1s var(--suave) var(--atraso, 0s);
}
.anima [data-revela="sobe"].visto { opacity: 1; translate: 0 0; }

/* palavras sobem de dentro de uma máscara (a folga evita cortar "g", "ç" e acentos) */
.so-leitor { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.pal { display: inline-block; vertical-align: top; }
.anima .pal { overflow: hidden; padding: .1em .04em .2em; margin: -.1em -.04em -.2em; }
.anima .pal__in {
  display: inline-block; transform: translateY(118%) rotate(5deg); transform-origin: 0 100%;
  transition: transform .95s var(--suave) calc(var(--atraso, 0s) + var(--i, 0) * var(--passo, 40ms));
}
.anima .visto .pal__in { transform: none; }

/* foto abre de baixo para cima e assenta */
.anima [data-revela="foto"] { clip-path: inset(100% 0 0 0 round var(--raio)); transition: clip-path 1.3s var(--vai-volta) var(--atraso, 0s); }
.anima [data-revela="foto"] img { transform: scale(1.22); transition: transform 1.9s var(--suave) var(--atraso, 0s); }
.anima [data-revela="foto"].visto { clip-path: inset(0 0 0 0 round var(--raio)); }
.anima [data-revela="foto"].visto img { transform: none; }
.anima .produto:hover .produto__foto.visto img { transform: scale(1.06); transition-delay: 0s; transition-duration: 1.4s; }

/* topo e selo da capa chegam depois da página pronta */
.anima .topo__capsula { opacity: 0; translate: 0 -24px; }
.anima.pronto .topo__capsula { opacity: 1; translate: 0 0; transition: opacity .8s ease .1s, translate 1s var(--suave) .1s, box-shadow .5s, background-color .5s; }

/* ==========================================================
   Telas médias
   ========================================================== */
@media (max-width: 1120px) {
  .topo__fone { display: none; }
  .palco { grid-template-columns: 1fr; }
  .palco__info { display: grid; grid-template-columns: auto 1fr; gap: 8px 32px; align-items: start; }
  .palco__numero { grid-row: span 2; }
  .mao { grid-column: 1 / -1; margin-top: 8px; }
}
@media (max-width: 900px) {
  .nav { display: none; }
  .menu-botao { display: block; }
  .topo__zap { margin-left: auto; }
  .capa__topo { grid-template-columns: 1fr; }
  .produtos__lista { gap: 16px; }
  .historia__topo, .duvidas__in, .contato__grade { grid-template-columns: 1fr; }
  .rodape__grade { grid-template-columns: 1fr 1fr; }
  .rodape__marca { grid-column: 1 / -1; }
}

/* ==========================================================
   Celular
   ========================================================== */
@media (max-width: 760px) {
  body { font-size: 1rem; }
  .caixa, .caixa--larga { width: calc(100% - 32px); }
  .secao { padding-block: 80px; }
  h2 { font-size: clamp(1.9rem, 8.6vw, 2.5rem); }
  .cabeca p { font-size: 1.04rem; }

  .topo { top: 10px; }
  .topo__capsula { height: 58px; width: calc(100% - 20px); padding: 0 6px 0 8px; }
  .marca { font-size: 1rem; gap: 8px; }
  .marca img { width: 38px; height: 38px; }
  .topo__zap { width: 46px; padding: 0; }
  .topo__zap .rolo { display: none; }
  .menu-botao { width: 46px; height: 46px; }

  .capa { padding-top: 104px; }
  .capa__topo { gap: 18px; padding-bottom: 28px; }
  .capa__titulo { font-size: clamp(1.95rem, 8.7vw, 2.5rem); line-height: .98; font-stretch: 110%; }
  .capa__lado p { font-size: 1.04rem; }
  .capa__botoes { margin-top: 22px; display: grid; grid-template-columns: 1fr; }
  .capa__botoes .botao { width: 100%; }
  .capa__fixo { aspect-ratio: 4 / 5; border-radius: 24px; }
  .anima .capa__canto { --rc: 24px; }
  .capa__legenda { padding: 12px; }
  .anima .capa__legenda { flex-direction: column; align-items: flex-start; gap: 18px; padding: 0 20px 28px; min-height: 55%; justify-content: flex-end; }
  .anima .capa__frase { font-size: clamp(1.7rem, 7.6vw, 2.2rem); }
  .capa__selo { padding-right: 14px; }

  .manifesto__texto { font-size: clamp(1.45rem, 6.4vw, 1.9rem); }

  /* produtos e história deslizam de lado no celular */
  .produtos__lista {
    margin: 40px -16px 0; padding: 0 16px 8px;
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%; gap: 14px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none;
  }
  .produtos__lista::-webkit-scrollbar { display: none; }
  .produto { scroll-snap-align: start; }
  .produto__foto { aspect-ratio: 4 / 5; }
  .produto h3 { font-size: 2rem; }

  .regua { margin-top: 40px; }
  .regua__marca { border-radius: 0 0 14px 14px; }
  .regua__item { padding: 18px 0 12px; gap: 4px; }
  .regua__item b { font-size: 1.55rem; }
  .regua__item[data-tam="malha"] b { font-size: 1.02rem; line-height: 1.52; }
  .regua__item small { font-size: .6rem; }
  .so-pc { display: none; }
  .palco { margin-top: 24px; gap: 26px; }
  .palco__fotos { aspect-ratio: 3 / 4; border-radius: 24px; }
  .palco__info { display: flex; gap: 16px; }
  .palco__numero, .palco__trilho span { height: 5.6rem; font-size: 5.6rem; }
  .palco__trilho span:first-child { font-size: 3.2rem; }
  .painel .botao { width: 100%; }

  .historia__texto p { font-size: 1.04rem; }
  .historia__foto { border-radius: 24px; }
  .linha {
    margin: 64px -16px 0; padding: 0 16px 8px;
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%; gap: 14px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none;
  }
  .linha::-webkit-scrollbar { display: none; }
  .linha li { scroll-snap-align: start; }
  .linha__fase { font-size: 1.7rem; }

  .passos { grid-template-columns: 1fr; gap: 0; margin-top: 40px; }
  .passos li { display: grid; grid-template-columns: 2.2rem 1fr; align-items: baseline; gap: 14px; padding: 18px 0; }
  .passos span { margin: 0; font-size: 2.6rem; }
  .contato__grade { margin-top: 48px; gap: 40px; }
  .pedido { border-radius: 24px; }
  .pedido__campos { grid-template-columns: 1fr; }

  .duvidas summary { font-size: 1.05rem; padding: 20px 56px 20px 0; }
  .duvidas__resp p { padding-right: 8px; }

  .rodape__chamada { padding-top: 88px; }
  .rodape__chamada .botao { width: 100%; }
  .rodape__grade { grid-template-columns: 1fr; gap: 28px; }
  .rodape__links { flex-direction: row; flex-wrap: wrap; gap: 10px 22px; }

  .zap { right: 14px; bottom: 14px; width: 56px; height: 56px; }
}

/* ==========================================================
   Páginas de produto e guia do seixo (geradas por _tools/paginas.js)
   ========================================================== */
.pagina { padding-top: clamp(112px, 13vh, 150px); }
.migalhas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: clamp(24px, 4vw, 44px); font-size: .9rem; color: var(--cinza); }
.migalhas a { text-decoration: none; color: var(--azul); }
.migalhas a:hover { text-decoration: underline; text-underline-offset: 3px; }
.migalhas span[aria-hidden] { color: #b7c2cc; }

.ficha { padding-bottom: clamp(56px, 7vw, 96px); }
.ficha__grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.ficha h1 { font-size: clamp(2.3rem, 4.4vw, 4.1rem); line-height: .98; letter-spacing: -.045em; font-stretch: 118%; }
.ficha__medida {
  display: inline-block; margin-top: 18px; padding: 6px 14px; border-radius: 999px;
  background: var(--gelo-2); color: var(--azul); font-weight: 700; font-stretch: 112%; letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}
.ficha__lead { margin-top: 20px; max-width: 32em; font-size: 1.14rem; color: var(--cinza); }
.ficha__lead--largo { max-width: 44em; }
.usos--claro li { border-color: var(--linha); color: var(--tinta); background: var(--branco); }
.ficha__botoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.ficha__foto { margin: 0; aspect-ratio: 4 / 3; border-radius: var(--raio-g); overflow: hidden; background: var(--gelo-2); }
.ficha__foto--alta { aspect-ratio: 4 / 5; max-height: 72vh; justify-self: center; width: 100%; }
.ficha__foto picture, .ficha__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ficha--guia h1 { max-width: 15em; }

.tabela { margin-top: clamp(32px, 4vw, 48px); overflow-x: auto; border: 1px solid var(--linha); border-radius: var(--raio); }
.tabela table { width: 100%; border-collapse: collapse; min-width: 560px; }
.tabela th, .tabela td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--linha); vertical-align: top; }
.tabela thead th { font-size: .82rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--cinza); background: var(--gelo); }
.tabela tbody tr:last-child th, .tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tbody th a { font-weight: 700; font-stretch: 112%; color: var(--azul); text-decoration: none; }
.tabela tbody th a:hover { text-decoration: underline; text-underline-offset: 3px; }
.tabela td:nth-child(2) { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.tabela td { color: var(--cinza); }

.corpo { background: var(--gelo); }
.corpo__grade { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.corpo__texto h2 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); }
.corpo__texto h2:not(:first-child) { margin-top: 44px; }
.corpo__texto p { margin-top: 16px; font-size: 1.1rem; color: var(--cinza); max-width: 36em; }
.corpo__mao { margin: 0; position: sticky; top: 110px; }
.corpo__mao img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--raio-g); }
.corpo__mao figcaption { margin-top: 12px; color: var(--cinza); font-size: .95rem; }

.duvidas--pagina { background: var(--branco); }

.vizinhos h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.vizinhos__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 36px; max-width: 820px; }
.vizinhos__lista--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); max-width: none; gap: 16px; }
.mini { display: block; text-decoration: none; color: inherit; }
.mini__foto { aspect-ratio: 1; border-radius: var(--raio); overflow: hidden; background: var(--gelo-2); }
.mini__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--suave); }
.mini:hover .mini__foto img { transform: scale(1.06); }
.mini__nome { display: block; margin-top: 14px; font-weight: 700; font-stretch: 112%; font-size: 1.15rem; letter-spacing: -.02em; }
.mini__medida { display: block; color: var(--cinza); font-size: .92rem; font-variant-numeric: tabular-nums; }
.grade-tamanhos { padding-top: 0; }

/* "Como pedir": só o que a Calvi já dizia (orçamento grátis, 24 h, frete a combinar) */
.fatos { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 12px; max-width: 36em; }
.fatos li { position: relative; padding-left: 32px; font-size: 1.06rem; font-weight: 500; color: var(--tinta); }
.fatos li::before {
  content: ''; position: absolute; left: 0; top: .2em; width: 20px; height: 20px; border-radius: 50%;
  background: var(--azul) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4 4L18.5 7.5'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.corpo__texto .fatos + p { margin-top: 28px; }
.corpo__texto a:not(.botao) { color: var(--azul); text-underline-offset: 3px; }
.corpo__mao figcaption a { color: var(--azul); text-underline-offset: 3px; }

/* guia do seixo: o "Como pedir" num cartão ao lado do texto */
.cartao-pedido {
  position: sticky; top: 110px;
  background: var(--branco); border-radius: var(--raio-g); padding: clamp(24px, 3vw, 36px);
  box-shadow: 0 30px 70px -40px rgba(3, 33, 59, .45); border: 1px solid var(--linha);
}
.cartao-pedido h2 { font-size: clamp(1.5rem, 2.2vw, 1.9rem); }
.cartao-pedido p { margin-top: 12px; color: var(--cinza); }
.cartao-pedido .fatos { margin-bottom: 26px; }

.rodape__grade--4 { grid-template-columns: 1.3fr 1fr .8fr 1fr; }
.rodape__links span { color: rgba(255, 255, 255, .5); font-size: .92rem; }

@media (max-width: 1100px) {
  .vizinhos__lista--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .ficha__grade, .corpo__grade { grid-template-columns: 1fr; }
  .corpo__mao, .cartao-pedido { position: static; max-width: 520px; }
  .rodape__grade--4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .pagina { padding-top: 96px; }
  .ficha h1 { font-size: clamp(1.9rem, 8.4vw, 2.5rem); font-stretch: 110%; }
  .ficha__lead { font-size: 1.04rem; }
  .ficha__botoes { display: grid; grid-template-columns: 1fr; }
  .ficha__botoes .botao { width: 100%; }
  .ficha__foto { aspect-ratio: 3 / 4; border-radius: 24px; }
  .corpo__texto p { font-size: 1.02rem; }
  .vizinhos__lista { gap: 14px; }
  .vizinhos__lista--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rodape__grade--4 { grid-template-columns: 1fr; }
}