/* Natal Utilitá 2026: página de destino do Google Ads.
   Identidade lida no @utilitacasa em 09/11/2026:
   - campanha "O Natal começa aqui": porta verde com listras finas, fechadura, ornamento champanhe;
   - capas dos destaques: linho, terracota, caramelo e rosé em padrões geométricos (grade, quadrifólio,
     listras, chevron), usadas aqui como medalhas de seção com os mesmos nomes do perfil. */
:root {
  --verde: #0b3a27;
  --verde-fundo: #082c1d;
  --verde-claro: #145037;
  --ouro: #cdae74;
  --ouro-claro: #e8d3a6;
  --linho: #eee5dc;
  --linho-2: #e6d9cc;
  --creme: #f6efe6;
  --terracota: #9c482a;
  --caramelo: #c6844e;
  --rose: #c69c96;
  --grade: #4a3326;
  --tinta: #1f2b24;
  --tinta-suave: #4f5850;
  --display: 'Marcellus', 'Optima', 'Candara', serif;
  --texto: 'Jost', 'Avenir Next', 'Segoe UI', sans-serif;
  --borda: 18px;
  --gutter: clamp(20px, 5vw, 72px);
  --larg: 1240px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --porta: repeating-linear-gradient(90deg, rgba(232, 211, 166, .035) 0 1px, transparent 1px 7px);
  --t0: 0ms;
}
html.porta { --t0: 1250ms; }

* { box-sizing: border-box; margin: 0; padding: 0; }
/* Fundo verde no html: o puxão elástico do celular, no topo e no fim, mostra a porta e não o linho */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; background: var(--verde-fundo); }
body { font-family: var(--texto); font-weight: 300; font-size: 17px; line-height: 1.65; color: var(--tinta); background: var(--linho); -webkit-font-smoothing: antialiased; overflow-x: hidden; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; -webkit-tap-highlight-color: transparent; }
strong { font-weight: 500; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; letter-spacing: .01em; line-height: 1.08; text-wrap: balance; }
h2 { font-size: clamp(32px, 4.2vw, 54px); }
h3 { font-size: 26px; line-height: 1.15; }
p { text-wrap: pretty; }

.sobre { font-family: var(--display); font-size: 13px; letter-spacing: .3em; text-transform: uppercase; color: var(--ouro-claro); margin-bottom: 22px; }

/* Medalhas: as capas dos destaques do Instagram da loja */
.medalha { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 26px; }
.medalha-disco { position: relative; width: 62px; height: 62px; border-radius: 50%; overflow: hidden; isolation: isolate; box-shadow: 0 0 0 3px var(--linho), 0 0 0 4px rgba(31, 43, 36, .22); transition: box-shadow .4s ease; }
.medalha-disco i { position: absolute; inset: -22%; background-color: var(--linho); transition: transform .9s var(--ease-out); }
.medalha-nome { font-size: 12.5px; letter-spacing: .02em; color: var(--tinta-suave); }
.m-natal i { background-color: #efe3d6; background-image: radial-gradient(circle, var(--caramelo) 69%, transparent 70%); background-size: 22px 22px; background-position: center; }
.m-essencial i { background-color: #efe3d6; background-image: linear-gradient(90deg, var(--grade) 1.5px, transparent 1.5px), linear-gradient(var(--grade) 1.5px, transparent 1.5px); background-size: 17px 17px; }
.m-mesa i { background-color: #efe3d6; background-image: linear-gradient(135deg, var(--rose) 25%, transparent 25%), linear-gradient(225deg, var(--rose) 25%, transparent 25%), linear-gradient(315deg, var(--rose) 25%, transparent 25%), linear-gradient(45deg, var(--rose) 25%, transparent 25%); background-size: 16px 16px; background-position: -8px 0, -8px 0, 0 0, 0 0; }
.m-local i { background-image: repeating-linear-gradient(90deg, #efe3d6 0 7px, var(--caramelo) 7px 9px, #efe3d6 9px 14px, #ddc2a6 14px 18px); }
.m-moveis i { background-color: var(--terracota); background-image: radial-gradient(circle, #efe3d6 69%, transparent 70%); background-size: 50% 50%; background-position: 0 0; }
.m-mesa i { transform: rotate(90deg); }
.m-foto i { inset: 0; background: url(img/anexo-noel-m.webp) center 30% / cover; }
.receber .medalha-disco { box-shadow: 0 0 0 3px var(--verde), 0 0 0 4px rgba(232, 211, 166, .4); }
.visite .medalha-disco { box-shadow: 0 0 0 3px var(--verde-fundo), 0 0 0 4px rgba(232, 211, 166, .4); }
.receber .medalha-nome, .visite .medalha-nome { color: rgba(246, 239, 230, .7); }

/* Botões */
.btn { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; font-family: var(--texto); font-size: 15.5px; font-weight: 500; letter-spacing: .02em; text-decoration: none; cursor: pointer; border: 1px solid transparent; white-space: nowrap; transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .2s ease, box-shadow .3s ease; }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn:active { transform: scale(.97); transition-duration: .12s; }
.btn-ouro { background: var(--ouro); color: var(--verde-fundo); }
.btn-ouro::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 30%, rgba(255, 250, 235, .7) 50%, transparent 70%); transform: translateX(-120%); }
.btn-verde { background: var(--verde); color: var(--creme); }
.btn-linha { border-color: rgba(232, 211, 166, .55); color: var(--creme); }
.btn-linha::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(232, 211, 166, .14); transform: scaleY(0); transform-origin: bottom; transition: transform .35s var(--ease-out); }
.btn-texto { padding: 0 6px; color: var(--creme); font-weight: 400; overflow: visible; }
.btn-texto span { background: linear-gradient(var(--ouro-claro), var(--ouro-claro)) 0 100% / 100% 1px no-repeat; padding-bottom: 3px; transition: background-size .45s var(--ease-out); }
.link { display: inline-flex; align-items: center; gap: 10px; margin-top: 28px; min-height: 44px; font-weight: 500; font-size: 15.5px; letter-spacing: .04em; color: var(--verde); text-decoration: none; background: linear-gradient(rgba(11, 58, 39, .25), rgba(11, 58, 39, .25)) 0 calc(100% - 8px) / 100% 1px no-repeat, linear-gradient(var(--ouro), var(--ouro)) 0 calc(100% - 8px) / 0 2px no-repeat; transition: background-size .5s var(--ease-out); }
.link svg { width: 20px; height: 20px; }
.link.claro { color: var(--ouro-claro); background-image: linear-gradient(rgba(232, 211, 166, .3), rgba(232, 211, 166, .3)), linear-gradient(var(--ouro-claro), var(--ouro-claro)); }
a:focus-visible, .btn:focus-visible { outline: 2px solid var(--ouro); outline-offset: 3px; }
/* Resposta ao toque: o dedo sente que a página ouviu */
.link, .marca { transition: background-size .5s var(--ease-out), opacity .16s ease; }
.link:active, .marca:active { opacity: .6; }

/* Topo */
.topo { position: fixed; inset: 0 0 auto; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px var(--gutter); padding-top: max(14px, env(safe-area-inset-top)); transition: background-color .35s ease, box-shadow .35s ease, transform .4s var(--ease-out); }
.topo.solido { background: rgba(8, 44, 29, .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 1px 0 rgba(232, 211, 166, .14); }
.topo.some { transform: translateY(-110%); }
.marca { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: var(--ouro-claro); transition: opacity .25s ease; }
.marca img { width: 112px; }
.marca span { margin-top: 5px; font-family: var(--display); font-size: 8.5px; letter-spacing: .5em; text-transform: uppercase; padding-left: .5em; color: var(--creme); opacity: .85; }
.topo .btn { min-height: 44px; padding: 0 18px; font-size: 14px; transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s var(--ease-out), opacity .25s ease, visibility 0s; }
/* Com o botão flutuante na tela, o topo não repete o WhatsApp */
@media (max-width: 899px) {
  .topo.com-flutuante .btn { opacity: 0; transform: scale(.94); visibility: hidden; pointer-events: none; transition: opacity .2s ease, transform .2s var(--ease-out), visibility 0s .2s; }
}

/* Capa: a porta verde da campanha, a fechadura e o cavalinho com a árvore */
.capa { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; color: var(--creme); background: var(--porta), var(--verde-fundo); overflow: hidden; isolation: isolate; padding: 120px var(--gutter) 56px; --fx: 50%; --fy: 34%; }
.capa-fundo, .capa-fundo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.capa-fundo { z-index: -2; }
.capa-fundo img { object-fit: cover; object-position: 50% 22%; animation: capa-zoom 9s var(--ease-out) var(--t0) both; }
.capa::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background:
  linear-gradient(180deg, rgba(8, 44, 29, .55) 0%, rgba(8, 44, 29, 0) 22%),
  linear-gradient(0deg, rgba(8, 44, 29, .97) 0%, rgba(8, 44, 29, .88) 34%, rgba(8, 44, 29, .35) 58%, rgba(8, 44, 29, 0) 74%); }
@keyframes capa-zoom { from { transform: scale(1.1); } to { transform: scale(1); } }
html.porta .capa-fundo { -webkit-mask: url(img/fechadura.svg) no-repeat; mask: url(img/fechadura.svg) no-repeat; -webkit-mask-position: var(--fx) var(--fy); mask-position: var(--fx) var(--fy); animation: abrir 1150ms var(--ease-in-out) 380ms both; }
@keyframes abrir {
  from { -webkit-mask-size: 18vmin 25.2vmin; mask-size: 18vmin 25.2vmin; }
  to { -webkit-mask-size: 560vmax 784vmax; mask-size: 560vmax 784vmax; }
}
.capa-texto { position: relative; max-width: 640px; }
.capa h1 { font-size: clamp(48px, 8vw, 116px); text-transform: uppercase; line-height: 1; letter-spacing: .02em; color: var(--creme); text-shadow: 0 2px 30px rgba(0, 0, 0, .25); }
.lh { display: block; overflow: hidden; padding-bottom: .16em; margin-bottom: -.16em; }
.lh > span { display: block; animation: sobe 1s var(--ease-out) both; animation-delay: calc(var(--t0) + 120ms); }
.lh:nth-child(2) > span { animation-delay: calc(var(--t0) + 200ms); }
.lh:nth-child(3) > span { animation-delay: calc(var(--t0) + 280ms); }
@keyframes sobe { from { transform: translateY(105%); } to { transform: none; } }
.entra { animation: aparece .9s var(--ease-out) both; animation-delay: calc(var(--t0) + 60ms); }
.capa-linha.entra { animation-delay: calc(var(--t0) + 420ms); }
.capa-sub.entra { animation-delay: calc(var(--t0) + 500ms); }
.acoes.entra { animation-delay: calc(var(--t0) + 580ms); }
@keyframes aparece { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.capa-linha { margin-top: 24px; font-family: var(--display); font-size: clamp(20px, 2.1vw, 27px); line-height: 1.3; color: var(--ouro-claro); max-width: 30ch; }
.capa-sub { margin-top: 16px; max-width: 46ch; color: rgba(246, 239, 230, .86); }
.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 34px; }

/* Pilares */
.pilares { display: grid; grid-template-columns: 1fr; background: var(--porta), var(--verde-fundo); color: var(--creme); padding: 8px var(--gutter); }
.pilares > div { display: flex; gap: 16px; align-items: baseline; padding: 22px 0; border-top: 1px solid rgba(232, 211, 166, .16); }
.pilares > div:first-child { border-top: 0; }
.cintila { flex: none; width: 15px; height: 15px; color: var(--ouro); transform: translateY(2px); animation: cintila 3.6s ease-in-out infinite; }
.pilares > div:nth-child(2) .cintila { animation-delay: 1.2s; }
.pilares > div:nth-child(3) .cintila { animation-delay: 2.4s; }
@keyframes cintila { 0%, 100% { opacity: .55; transform: translateY(2px) rotate(0) scale(.9); } 50% { opacity: 1; transform: translateY(2px) rotate(45deg) scale(1.08); } }
.pilares p { font-size: 15.5px; color: rgba(246, 239, 230, .75); }
.pilares strong { display: block; font-family: var(--display); font-weight: 400; font-size: 20px; color: var(--creme); margin-bottom: 2px; letter-spacing: .02em; }

/* Blocos editoriais */
.bloco { display: grid; grid-template-columns: 1fr; gap: 44px; padding: 96px var(--gutter); max-width: var(--larg); margin: 0 auto; align-items: center; }
.bloco h2 { color: var(--verde); margin-bottom: 24px; }
.bloco .texto p + p { margin-top: 14px; }
.bloco .texto > p { color: var(--tinta-suave); max-width: 52ch; }
.foto-alta { border-radius: var(--borda); overflow: hidden; aspect-ratio: 4 / 5; background: var(--linho-2); }
.foto-alta img { width: 100%; height: 100%; object-fit: cover; }
blockquote { margin-top: 30px; padding-left: 22px; border-left: 1px solid var(--ouro); font-family: var(--display); font-size: 22px; line-height: 1.4; color: var(--verde); max-width: 32ch; }

/* Kits */
.kits { background: var(--linho-2); padding: 96px var(--gutter); }
.kits-cab { max-width: 640px; margin: 0 auto 52px; text-align: center; }
.kits-cab h2 { color: var(--verde); margin-bottom: 18px; }
.kits-cab > p:last-child { color: var(--tinta-suave); }
.kits-grade { display: grid; grid-template-columns: 1fr; gap: 22px; max-width: var(--larg); margin: 0 auto; }
.kit { display: flex; flex-direction: column; background: var(--creme); border-radius: var(--borda); overflow: hidden; box-shadow: 0 1px 0 rgba(31, 43, 36, .06), 0 18px 40px -26px rgba(31, 43, 36, .35); transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), opacity .8s var(--ease-out); }
.kit figure { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--linho); }
.kit figure::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(232, 211, 166, .9); border-radius: 10px; opacity: 0; transform: scale(1.03); transition: opacity .45s ease, transform .6s var(--ease-out); pointer-events: none; }
.kit img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.kit-corpo { display: flex; flex-direction: column; flex: 1; padding: 24px 24px 26px; }
.kit-tag { font-size: 14px; font-weight: 400; color: var(--terracota); margin-bottom: 6px; }
.kit h3 { color: var(--verde); margin-bottom: 10px; }
.kit-corpo > p:not(.kit-tag) { font-size: 15.5px; color: var(--tinta-suave); flex: 1; }
.kit .btn { margin-top: 22px; align-self: flex-start; min-height: 46px; padding: 0 18px; gap: 8px; font-size: 14.5px; white-space: nowrap; }
.kit .btn svg { width: 18px; height: 18px; }
.sob-medida { position: relative; overflow: hidden; max-width: var(--larg); margin: 22px auto 0; display: flex; flex-direction: column; gap: 22px; align-items: flex-start; background: var(--porta), var(--verde); color: var(--creme); border-radius: var(--borda); padding: 34px 28px; }
.sob-medida h3 { color: var(--creme); margin-bottom: 8px; }
.sob-medida p { color: rgba(246, 239, 230, .78); max-width: 52ch; }

/* Receber */
.receber { background: var(--porta), var(--verde); color: var(--creme); display: grid; grid-template-columns: 1fr; gap: 48px; padding: 96px var(--gutter); }
.receber h2 { margin-bottom: 22px; color: var(--creme); }
.receber .texto > p { color: rgba(246, 239, 230, .8); max-width: 48ch; }
.receber-fotos { display: grid; grid-template-columns: 1.35fr 1fr; gap: 14px; align-items: end; }
.receber-fotos figure { border-radius: var(--borda); overflow: hidden; aspect-ratio: 4 / 5; }
.receber-fotos figure:last-child { margin-bottom: -32px; }
.receber-fotos img { width: 100%; height: 100%; object-fit: cover; }

/* Visite */
.visite { background: var(--porta), var(--verde-fundo); color: var(--creme); display: grid; grid-template-columns: 1fr; gap: 40px; padding: 96px var(--gutter); }
.visite h2 { margin-bottom: 26px; }
address { font-style: normal; font-size: 18px; line-height: 1.6; color: rgba(246, 239, 230, .85); }
address strong { display: block; font-family: var(--display); font-weight: 400; font-size: 22px; color: var(--ouro-claro); margin-bottom: 4px; letter-spacing: .02em; }
.aviso { margin-top: 18px; font-size: 15px; color: rgba(246, 239, 230, .62); }
.visite .acoes { margin-top: 30px; }
.mapa { border-radius: var(--borda); overflow: hidden; min-height: 320px; background: var(--verde); border: 1px solid rgba(232, 211, 166, .2); }
.mapa iframe { display: block; width: 100%; height: 100%; min-height: 320px; border: 0; filter: grayscale(.5) sepia(.12) contrast(1.02); transition: filter .6s ease; }

/* Rodapé */
.rodape { background: var(--porta), var(--verde); color: rgba(246, 239, 230, .7); text-align: center; padding: 64px var(--gutter) 104px; font-size: 14.5px; }
.rodape img { width: 140px; margin: 0 auto; }
.rodape-marca { margin: 8px 0 26px; font-family: var(--display); font-size: 10px; letter-spacing: .5em; padding-left: .5em; text-transform: uppercase; color: var(--creme); }
.privacidade { margin: 22px auto 0; max-width: 46ch; font-size: 13px; color: rgba(246, 239, 230, .5); }

/* Botão flutuante de WhatsApp: fixo no canto, em todas as telas, entra depois da abertura */
.flutuante { position: fixed; z-index: 30; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: center; gap: 10px; width: 60px; height: 60px; border-radius: 999px; background: var(--ouro); color: var(--verde-fundo); font-weight: 500; font-size: 15.5px; text-decoration: none; box-shadow: 0 16px 32px -12px rgba(0, 0, 0, .5), 0 0 0 1px rgba(8, 44, 29, .1); opacity: 0; transform: translateY(18px) scale(.94); pointer-events: none; -webkit-tap-highlight-color: transparent; transition: transform .5s var(--ease-out), opacity .35s ease, background-color .25s ease, box-shadow .25s ease; }
.flutuante svg { width: 28px; height: 28px; flex: none; }
.flutuante span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.flutuante.visivel { opacity: 1; transform: none; pointer-events: auto; }
.flutuante.visivel:active { transform: scale(.95); transition-duration: .12s; }
.flutuante::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(205, 174, 116, .6); pointer-events: none; }
.flutuante.visivel::after { animation: chama 1.6s var(--ease-out) .6s 2; }
@media (min-width: 700px) {
  .flutuante { width: auto; height: 58px; padding: 0 24px 0 20px; right: max(24px, env(safe-area-inset-right)); bottom: max(24px, env(safe-area-inset-bottom)); }
  .flutuante svg { width: 24px; height: 24px; }
  .flutuante span { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
}
@media (hover: hover) and (pointer: fine) {
  .flutuante.visivel:hover { background: var(--ouro-claro); transform: translateY(-2px); box-shadow: 0 20px 36px -12px rgba(0, 0, 0, .55), 0 0 0 1px rgba(8, 44, 29, .1); }
  .flutuante.visivel:active { transform: scale(.97); }
}
@keyframes chama { to { box-shadow: 0 0 0 14px rgba(205, 174, 116, 0); } }

/* Revelações na rolagem (disparadas uma vez pelo natal.js) */
.revela { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); transition-delay: var(--d, 0ms); }
.revela.on { opacity: 1; transform: none; }
.revela.cortina { opacity: 1; transform: none; clip-path: inset(100% 0 0 0 round var(--borda)); transition: clip-path 1.1s var(--ease-in-out); transition-delay: var(--d, 0ms); }
.revela.cortina.on { clip-path: inset(0 0 0 0 round var(--borda)); }
.revela.cortina img { transform: scale(1.14); transition: transform 1.5s var(--ease-out); transition-delay: var(--d, 0ms); }
.revela.cortina.on img { transform: none; }
.medalha .medalha-disco { transform: scale(.85); opacity: 0; transition: transform .7s var(--ease-out), opacity .5s ease, box-shadow .4s ease; }
.revela.on .medalha .medalha-disco, .medalha.on .medalha-disco { transform: none; opacity: 1; }
.palavra { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.palavra > span { display: inline-block; transform: translateY(108%); transition: transform .9s var(--ease-out); transition-delay: calc(var(--d, 0ms) + var(--w, 0) * 40ms); }
.on .palavra > span, h2.on .palavra > span { transform: none; }
.kit.revela { transform: translateY(28px); transition: opacity .8s var(--ease-out) var(--d, 0ms), transform .8s var(--ease-out) var(--d, 0ms), box-shadow .5s var(--ease-out); }
.kit.revela.on { transform: none; }
.sem-js .revela, .sem-js .revela.cortina { opacity: 1; transform: none; clip-path: none; }
.sem-js .revela.cortina img, .sem-js .medalha .medalha-disco { transform: none; opacity: 1; }

/* Paralaxe leve, só onde o navegador faz isso fora da thread principal */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .capa-fundo { animation: desce linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
    .receber-fotos figure:last-child { animation: flutua linear both; animation-timeline: view(); animation-range: cover; }
    @keyframes flutua { from { transform: translateY(60px); } to { transform: translateY(-60px); } }
    html.porta .capa-fundo { animation: abrir 1150ms var(--ease-in-out) 380ms both; }
    @keyframes desce { to { transform: translateY(16%); } }
  }
}

/* Hover só com mouse */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-2px); }
  .btn:active { transform: scale(.97); }
  .btn-ouro:hover { background: var(--ouro-claro); box-shadow: 0 10px 26px -12px rgba(205, 174, 116, .8); }
  .btn-ouro:hover::after { transform: translateX(120%); transition: transform .9s var(--ease-in-out); }
  .btn-verde:hover { background: var(--verde-claro); }
  .btn-linha:hover { border-color: var(--ouro-claro); }
  .btn-linha:hover::before { transform: scaleY(1); }
  .btn-texto:hover { transform: none; }
  .btn-texto:hover span { animation: risco .7s var(--ease-out); }
  @keyframes risco { from { background-size: 0 1px; } to { background-size: 100% 1px; } }
  .link:hover { background-size: 100% 1px, 100% 2px; }
  .marca:hover { opacity: .8; }
  .kit:hover, .kit.revela.on:hover { transform: translateY(-6px); box-shadow: 0 1px 0 rgba(31, 43, 36, .06), 0 30px 50px -28px rgba(31, 43, 36, .45); }
  .kit:hover img { transform: scale(1.06); }
  .kit:hover figure::after { opacity: 1; transform: none; }
  .kit:hover .btn-verde { background: var(--verde-claro); }
  .foto-alta img, .receber-fotos img { transition: transform 1.4s var(--ease-out); }
  .foto-alta:hover img, .receber-fotos figure:hover img { transform: scale(1.045); }
  .receber .texto:hover .medalha-disco { box-shadow: 0 0 0 3px var(--verde), 0 0 0 4px var(--ouro); }
  .texto:hover .m-mesa i { transform: rotate(135deg) scale(1.08); }
  .revela.cortina.on:hover img { transform: scale(1.045); }
  .medalha:hover .medalha-disco, .texto:hover .medalha-disco, .kits-cab:hover .medalha-disco, .visite-texto:hover .medalha-disco { box-shadow: 0 0 0 3px var(--linho), 0 0 0 4px var(--ouro); }
  .visite-texto:hover .medalha-disco { box-shadow: 0 0 0 3px var(--verde-fundo), 0 0 0 4px var(--ouro); }
  .texto:hover .medalha-disco i, .kits-cab:hover .medalha-disco i, .visite-texto:hover .medalha-disco i { transform: rotate(45deg) scale(1.08); }
  .m-foto i { transition: transform 1.2s var(--ease-out); }
  .mapa:hover iframe { filter: none; }
  .pilares > div:hover .cintila { animation-duration: 1.2s; }
}

@media (max-width: 699px) {
  .capa { min-height: 0; padding-top: calc(125vw - 112px); padding-bottom: 52px; --fx: 49%; --fy: 64%; }
  .capa-fundo { bottom: auto; height: auto; aspect-ratio: 4 / 5; }
  .capa-fundo img { -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 100%); mask-image: linear-gradient(180deg, #000 58%, transparent 100%); }
  .capa::after { background: linear-gradient(180deg, rgba(8, 44, 29, .55) 0%, rgba(8, 44, 29, 0) 18%); }
  .capa h1 { text-shadow: 0 2px 24px rgba(8, 44, 29, .7); }
  .capa-sub { font-size: 15.5px; }

  /* Ritmo de celular: seções mais curtas, entradas mais rápidas para quem rola com o polegar */
  .bloco, .receber, .visite { gap: 36px; padding-top: 76px; padding-bottom: 76px; }
  .receber { padding-bottom: 92px; }
  .revela { transform: translateY(12px); transition-duration: .6s; }
  .revela.cortina { transition-duration: .9s; }
  .revela.cortina img { transition-duration: 1.2s; }
  .palavra > span { transition-duration: .7s; transition-delay: calc(var(--d, 0ms) + var(--w, 0) * 30ms); }
  .topo.solido { background: rgba(8, 44, 29, .97); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Kits no celular: carrossel de polegar, com o próximo kit aparecendo na borda */
.kits-trilho { display: none; }
@media (max-width: 899px) {
  .kits { padding: 76px 0 72px; }
  .kits-cab { padding: 0 var(--gutter); margin-bottom: 30px; }
  .kits-grade { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding: 6px var(--gutter) 30px; scrollbar-width: none; }
  .kits-grade::-webkit-scrollbar { display: none; }
  .kit { scroll-snap-align: start; }
  .kits-trilho { display: block; position: relative; width: 76px; height: 2px; margin: 0 auto; border-radius: 2px; background: rgba(11, 58, 39, .16); overflow: hidden; }
  .kits-trilho i { position: absolute; inset: 0 auto 0 0; width: 33.334%; border-radius: inherit; background: var(--verde); will-change: transform; }
  .sob-medida { margin: 30px var(--gutter) 0; }
}
/* Tablet: dois kits e meio na tela */
@media (min-width: 640px) and (max-width: 899px) {
  .kits-grade { grid-auto-columns: 46%; }
  .kit-corpo { padding: 22px 18px 24px; }
}

@media (min-width: 640px) {
  .pilares { grid-template-columns: repeat(3, 1fr); gap: 32px; padding: 30px var(--gutter); }
  .pilares > div { border-top: 0; padding: 8px 0; }
  .sob-medida { flex-direction: row; align-items: center; justify-content: space-between; padding: 36px 40px; }
}

@media (min-width: 900px) {
  .marca img { width: 128px; }
  .capa { align-items: center; padding-top: 120px; padding-bottom: 96px; --fx: 75%; --fy: 72%; }
  .capa-fundo img { left: 22%; width: 100%; max-width: none; object-position: 50% 40%; }
  .capa h1 { font-size: clamp(56px, 6.4vw, 96px); }
  .capa-texto { max-width: 560px; }
  .capa::after { background:
    linear-gradient(90deg, #082c1d 0%, #082c1d 12.5%, rgba(8, 44, 29, .86) 30%, rgba(8, 44, 29, .32) 50%, rgba(8, 44, 29, 0) 66%),
    linear-gradient(180deg, rgba(8, 44, 29, .5) 0%, rgba(8, 44, 29, 0) 20%, rgba(8, 44, 29, 0) 78%, rgba(8, 44, 29, .7) 100%); }
  .bloco { grid-template-columns: 1fr 1fr; gap: 80px; padding: 140px var(--gutter); }
  .anexo { grid-template-columns: 1.1fr .9fr; }
  .alem { grid-template-columns: .85fr 1.15fr; }
  .kits { padding: 140px var(--gutter); }
  .kits-grade { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .receber { grid-template-columns: 1.1fr .9fr; align-items: center; gap: 80px; padding: 140px var(--gutter) 160px; }
  .visite { grid-template-columns: .9fr 1.1fr; gap: 64px; padding: 130px var(--gutter); align-items: stretch; }
  .mapa, .mapa iframe { min-height: 420px; }
  .rodape { padding-bottom: 64px; }
}

@media (min-width: 1100px) {
  .receber, .visite, .capa { padding-left: max(var(--gutter), calc((100vw - var(--larg)) / 2)); padding-right: max(var(--gutter), calc((100vw - var(--larg)) / 2)); }
}

@media (max-width: 380px) {
  .topo .btn span { display: none; }
  .topo .btn { padding: 0 14px; }
  .kits-grade { grid-auto-columns: 88%; }
  .kit-corpo { padding: 22px 18px 24px; }
  .kit .btn { padding: 0 14px; font-size: 14px; }
}

/* Movimento reduzido: sem deslocamento, só opacidade */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .capa-fundo img, .lh > span, .cintila, .flutuante.visivel::after { animation: none; }
  .entra { animation: so-opacidade .4s ease both; }
  @keyframes so-opacidade { from { opacity: 0; } to { opacity: 1; } }
  .revela, .kit.revela { transform: none; transition: opacity .4s ease; }
  .revela.cortina { clip-path: none; transition: none; }
  .revela.cortina img, .palavra > span, .medalha .medalha-disco { transform: none; transition: none; opacity: 1; }
  .kit, .kit img, .flutuante, .topo, .btn, .btn::after, .btn::before, .medalha-disco i, .foto-alta img, .receber-fotos img { transition: none; }
}

/* Quatro categorias lado a lado só quando o botão cabe inteiro no cartão */
@media (min-width: 1280px) {
  .kits-grade { grid-template-columns: repeat(4, 1fr); }
}