/* (e)studio49 - site institucional. Fonte da verdade: context/brandbook-e49.md.
   Formas: botões e tags em pílula; cartões, campos e painéis com raio 18px. Uma regra só, em todo o site. */

@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 600 800; font-display: swap; src: url("../assets/fonts/unbounded-var.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../assets/fonts/figtree-var.woff2") format("woff2"); }
@font-face { font-family: "DM Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/dmmono-400.woff2") format("woff2"); }
@font-face { font-family: "DM Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fonts/dmmono-500.woff2") format("woff2"); }

:root {
  --e49-nata: #FCF3D9;
  --e49-brasa: #F14625;
  --e49-brasa-escura: #C93A1B;
  --e49-serra: #1C2A3A;
  --e49-serra-profunda: #151E2A;
  --e49-geada: #AFCCED;
  --e49-geada-clara: #E8F0FA;
  --e49-titulo: "Unbounded", "Arial Black", sans-serif;
  --e49-texto: "Figtree", "Segoe UI", sans-serif;
  --e49-apoio: "DM Mono", ui-monospace, monospace;
  --e49-raio: 18px;
  --e49-raio-pill: 999px;

  --bg: var(--e49-nata);
  --fg: var(--e49-serra);
  --muted: #3E4E60;
  --line: rgba(28, 42, 58, .18);
  --surface: var(--e49-geada-clara);
  --link: var(--e49-brasa-escura);
  --on-band-muted: #D9D3BE;

  --header-h: 76px;
  --maxw: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); color-scheme: light; }
html.menu-open { overflow: hidden; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--e49-texto); font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-family: var(--e49-titulo); text-transform: lowercase; letter-spacing: -.02em; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--fg); outline-offset: 3px; border-radius: 6px; }
.band :focus-visible, .header :focus-visible { outline-color: var(--e49-nata); }
.skip { position: absolute; left: -999px; top: 8px; z-index: 80; background: var(--e49-nata); color: var(--e49-serra); padding: 10px 16px; border-radius: var(--e49-raio-pill); }
.skip:focus { left: 8px; }
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ícones (Phosphor) colorizados por currentColor */
.ic { display: inline-block; width: 1.25em; height: 1.25em; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; flex: none; }
.ic-whatsapp { --i: url("../assets/icons/whatsapp.svg"); }
.ic-arrow { --i: url("../assets/icons/arrow.svg"); }
.ic-check { --i: url("../assets/icons/check.svg"); }
.ic-plus { --i: url("../assets/icons/plus.svg"); }
.ic-minus { --i: url("../assets/icons/minus.svg"); }
.ic-mail { --i: url("../assets/icons/mail.svg"); }
.ic-pin { --i: url("../assets/icons/pin.svg"); }
.ic-phone { --i: url("../assets/icons/phone.svg"); }
.ic-play { --i: url("../assets/icons/play.svg"); }
.ic-instagram { --i: url("../assets/icons/instagram.svg"); }

/* botões: etiqueta em pílula, com o texto girando no hover */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6em; white-space: nowrap; min-height: 52px; padding: 0 26px; border-radius: var(--e49-raio-pill); border: 2px solid transparent; font-family: var(--e49-texto); font-weight: 700; font-size: 1.0625rem; text-decoration: none; cursor: pointer; transition: transform .3s var(--ease), background-color .25s, color .25s, border-color .25s; }
.btn:active { transform: translateY(1px) scale(.97); }
.btn .ic { width: 1.3em; height: 1.3em; }
.btn .bt { position: relative; display: inline-block; overflow: hidden; height: 1.3em; line-height: 1.3; }
.btn .bt > span { display: block; transition: transform .5s var(--ease); }
.btn .bt > span + span { position: absolute; left: 0; top: 100%; }
.btn:hover .bt > span { transform: translateY(-100%); }
.btn-main { background: var(--e49-brasa); color: var(--e49-nata); }
.btn-main:hover { background: var(--e49-brasa-escura); }
.btn-ghost { border-color: currentColor; background: transparent; color: inherit; }
.btn-ghost:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.band .btn-ghost:hover { background: var(--e49-nata); color: var(--e49-serra); border-color: var(--e49-nata); }

.tag { display: inline-block; font-family: var(--e49-apoio); font-weight: 500; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; padding: 6px 12px; border-radius: var(--e49-raio-pill); border: 1px solid currentColor; }
.par { color: var(--e49-brasa); font-style: normal; }
.hl { color: var(--e49-brasa); }
.page-hero .hl { color: var(--e49-brasa-escura); }

/* menu flutuante em Serra */
.header { position: fixed; top: 12px; left: 12px; right: 12px; z-index: 60; transition: transform .55s var(--ease); }
.header.is-hidden { transform: translateY(calc(-100% - 90px)); }
html.menu-open .header { transform: none; }
.hbar { position: relative; max-width: 1240px; margin-inline: auto; height: 64px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 0 10px 0 22px; background: var(--e49-serra); color: var(--e49-nata); border-radius: var(--e49-raio); }
.logo { display: block; flex: none; position: relative; z-index: 3; }
.logo img { height: 32px; width: auto; }
.nav { display: contents; }
.nav-list { display: flex; justify-content: center; gap: 2px; }
.nav-list a { display: block; text-decoration: none; font-weight: 600; font-size: .98rem; padding: 9px 15px; border-radius: var(--e49-raio-pill); white-space: nowrap; transition: background-color .25s, color .25s; }
.nav-list a:hover { background: rgba(252, 243, 217, .12); }
.nav-list a[aria-current="page"] { background: var(--e49-geada); color: var(--e49-serra); }
.nav-cta { min-height: 44px; padding: 0 22px; font-size: .98rem; }
.menu-btn { display: none; position: relative; z-index: 3; width: 52px; height: 52px; border: 0; background: none; color: inherit; border-radius: var(--e49-raio-pill); cursor: pointer; align-items: center; justify-content: center; }
.ham { display: grid; gap: 8px; width: 32px; }
.ham i { display: block; height: 2px; background: currentColor; transition: transform .45s var(--ease); }
html.menu-open .ham i:first-child { transform: translateY(5px) rotate(45deg); }
html.menu-open .ham i:last-child { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 1099px) {
  .hbar { grid-template-columns: 1fr auto; }
  .menu-btn { display: inline-flex; }
  .nav { display: flex; position: fixed; inset: 0; z-index: 2; flex-direction: column; justify-content: center; gap: 28px; padding: 96px var(--gutter) 40px; background: var(--e49-serra); clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .7s var(--ease), visibility 0s .7s; }
  html.menu-open .nav { clip-path: inset(0); visibility: visible; transition-delay: 0s; }
  .nav-list { flex-direction: column; gap: 6px; justify-content: flex-start; }
  .nav-list a { font-family: var(--e49-titulo); text-transform: lowercase; font-weight: 700; font-size: clamp(1.8rem, 8vw, 2.6rem); letter-spacing: -.03em; padding: 6px 0; border-radius: 0; opacity: 0; transform: translateY(24px); transition: opacity .5s, transform .6s var(--ease), color .25s; }
  .nav-list a:hover { background: none; color: var(--e49-brasa); }
  .nav-list a[aria-current="page"] { background: none; color: var(--e49-geada); }
  html.menu-open .nav-list a { opacity: 1; transform: none; }
  html.menu-open .nav-list li:nth-child(1) a { transition-delay: .15s; }
  html.menu-open .nav-list li:nth-child(2) a { transition-delay: .2s; }
  html.menu-open .nav-list li:nth-child(3) a { transition-delay: .25s; }
  html.menu-open .nav-list li:nth-child(4) a { transition-delay: .3s; }
  html.menu-open .nav-list li:nth-child(5) a { transition-delay: .35s; }
  .nav-cta { align-self: flex-start; min-height: 52px; padding: 0 26px; font-size: 1.0625rem; }
}

/* botão fixo de WhatsApp */
.fab { position: fixed; right: clamp(14px, 3vw, 28px); bottom: clamp(14px, 3vw, 28px); z-index: 40; transition: opacity .3s, translate .4s var(--ease), transform .3s var(--ease), background-color .25s; }
.fab.is-off { opacity: 0; translate: 0 24px; pointer-events: none; }

/* seções */
.band { background: var(--e49-serra); color: var(--e49-nata); }
.sec { padding-block: clamp(72px, 10vw, 140px); }
.sec-tight { padding-block: clamp(56px, 7vw, 96px); }
.lead { font-size: clamp(1.125rem, 1.6vw, 1.3125rem); max-width: 56ch; color: var(--muted); }
.h-1 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); line-height: 1.1; font-weight: 700; }
.h-2 { font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.2; font-weight: 600; }
.sec-head { max-width: 760px; margin-bottom: clamp(32px, 5vw, 56px); }
.sec-head p { margin: 16px 0 0; }

/* hero */
.hero { position: relative; overflow: hidden; padding: calc(var(--header-h) + clamp(28px, 5vw, 64px)) 0 clamp(40px, 5vw, 72px); }
.hero .wrap { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 28px; align-items: center; }
.hero h1 { grid-column: 1 / span 6; grid-row: 1; align-self: end; font-size: clamp(2.1rem, 3.5vw, 3.05rem); line-height: 1.04; font-weight: 800; }
.hero h1 .l { display: block; }
.hero-body { grid-column: 1 / span 6; grid-row: 2; align-self: start; }
.hero-body p { font-size: clamp(1.125rem, 1.5vw, 1.25rem); color: var(--muted); max-width: 40ch; margin-bottom: 28px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.hero .stage { grid-column: 7 / span 6; grid-row: 1 / span 2; margin-right: 0; padding-bottom: 6%; }
/* hero: o estúdio no centro e as soluções em volta */
.orbit { position: relative; width: min(100%, 540px); aspect-ratio: 1; margin-inline: auto; --px: 0; --py: 0; }
.orbit::before, .orbit::after { content: ""; position: absolute; border-radius: 50%; border: 2px solid var(--fg); }
.orbit::before { inset: 6%; opacity: .12; }
.orbit::after { inset: 22%; opacity: .22; border-style: dashed; animation: spin 80s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.o-core { position: absolute; left: 50%; top: 50%; width: 34%; rotate: -6deg; translate: calc(-50% + var(--px) * -10px) calc(-50% + var(--py) * -8px); transition: translate .6s var(--ease); z-index: 1; }
.o-core img { width: 100%; height: auto; border-radius: 22%; }
.o-pill { position: absolute; z-index: 2; display: inline-flex; align-items: center; padding: .62em 1.3em; border-radius: var(--e49-raio-pill); font-family: var(--e49-titulo); font-weight: 700; font-size: clamp(.95rem, 1.45vw, 1.2rem); letter-spacing: -.02em; text-transform: lowercase; text-decoration: none; white-space: nowrap; rotate: var(--rot, 0deg); translate: calc(var(--px) * var(--mx, 12) * 1px) calc(var(--py) * var(--my, 10) * 1px); transition: translate .6s var(--ease), scale .35s var(--ease), background-color .25s, color .25s; animation: float var(--dur, 7s) ease-in-out infinite alternate; }
.o-pill:hover { scale: 1.07; }
@keyframes float { from { transform: translateY(-6px); } to { transform: translateY(9px); } }
.o-1 { left: 1%; top: 20%; background: var(--e49-serra); color: var(--e49-nata); --rot: -7deg; --dur: 7s; --mx: -14; font-size: clamp(1.1rem, 1.9vw, 1.5rem); }
.o-2 { right: 0; top: 12%; background: var(--e49-brasa-escura); color: var(--e49-nata); --rot: 6deg; --dur: 8s; --my: 16; }
.o-3 { left: -2%; top: 62%; background: var(--e49-geada); color: var(--e49-serra); --rot: 5deg; --dur: 6.5s; --mx: -18; }
.o-4 { right: 3%; top: 57%; background: var(--e49-nata); color: var(--e49-serra); border: 2px solid var(--e49-serra); --rot: -5deg; --dur: 7.5s; --my: -14; }
.o-5 { left: 31%; top: 85%; background: var(--e49-geada-clara); color: var(--e49-serra); border: 2px solid var(--e49-serra); --rot: 3deg; --dur: 9s; }
.hero .orbit { grid-column: 7 / span 6; grid-row: 1 / span 2; }
@media (max-width: 899px) { .hero .orbit { grid-column: 1; grid-row: auto; margin: 28px auto 8px; } }
@media (prefers-reduced-motion: reduce) { .orbit::after, .o-pill { animation: none; } }
.slash { position: absolute; z-index: 0; background: var(--e49-brasa); clip-path: polygon(30% 0, 100% 0, 70% 100%, 0 100%); pointer-events: none; }
.hero .slash { right: 3%; top: 0; width: 20%; height: 100%; }
.hero .wrap > * { position: relative; z-index: 1; }
@media (max-width: 899px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero h1, .hero-body, .hero .stage { grid-column: 1; grid-row: auto; }
  .hero .stage { margin: 28px 0 9%; }
  .hero .slash { width: 34%; right: -4%; top: 0; bottom: auto; height: 100%; }
  /* no celular o site abre direto no banner: ícone animado e as soluções (o título fica só para leitores de tela) */
  .hero h1 { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hero-body { display: none; }
  .hero .orbit { margin: 6px auto 0; }
}

/* aparelhos: molduras em CSS, telas em JPEG */
.stage { position: relative; width: 100%; max-width: 760px; margin-inline: auto; --px: 0; --py: 0; }
.mac { position: relative; transition: transform .6s var(--ease); transform: translate3d(calc(var(--px) * -9px), calc(var(--py) * -7px), 0); }
.mac-lid { position: relative; background: #0b0c0f; border-radius: 2.4% 2.4% .5% .5% / 3.8% 3.8% .9% .9%; padding: 1.8% 1.8% 2.2%; }
.mac-lid::before { content: ""; position: absolute; top: .85%; left: 50%; width: 1%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: #1b1d23; }
.mac-screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: .6% / 1%; background: #fff; }
.mac-base { position: relative; width: 112%; margin-left: -6%; aspect-ratio: 112 / 3.2; background: linear-gradient(180deg, #f1f2f5 0%, #cfd2d8 40%, #9da1aa 100%); border-radius: 0 0 4% 4% / 0 0 100% 100%; }
.mac-base::before { content: ""; position: absolute; left: 50%; top: 0; width: 16%; height: 42%; transform: translateX(-50%); background: linear-gradient(180deg, #aeb2ba, #c8cbd2); border-radius: 0 0 999px 999px / 0 0 100% 100%; }
.phone-wrap { position: absolute; right: 0; bottom: -3%; width: 24%; transition: transform .6s var(--ease); transform: translate3d(calc(var(--px) * 15px), calc(var(--py) * 11px), 0); }
.phone { position: relative; aspect-ratio: 9 / 19; background: #0b0c0f; border-radius: 15% / 7%; padding: 3.4%; }
.phone-screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 12% / 5.5%; background: #fff; }
.phone-screen::before { content: ""; position: absolute; z-index: 2; top: 2.2%; left: 50%; width: 30%; height: 3%; transform: translateX(-50%); border-radius: 99px; background: #0b0c0f; }
.screen { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease; }
.screen.on { opacity: 1; }
.shot { display: block; width: 100%; height: auto; will-change: transform; }
.phone .shot { --shift: .61; }
.screen.on .shot { animation: browse 26s ease-in-out infinite alternate; }
.phone .screen.on .shot { animation-duration: 30s; animation-delay: -6s; }
.is-paused .shot { animation-play-state: paused !important; }
@keyframes browse { 0%, 10% { transform: translateY(0); } 90%, 100% { transform: translateY(calc(var(--shift) * -100%)); } }
.shot-static { display: block; width: 100%; height: auto; transform: translateY(calc(var(--off, 0) * -1%)); }
.chip { position: absolute; z-index: 3; padding: 9px 16px; border-radius: var(--e49-raio-pill); background: var(--e49-geada); color: var(--e49-serra); font-weight: 700; font-size: .92rem; white-space: nowrap; transition: transform .6s var(--ease); }
.chip.c1 { left: 3%; top: -5%; transform: translate3d(calc(var(--px) * 20px), calc(var(--py) * 14px), 0); }
.chip.c2 { left: 6%; bottom: 8%; transform: translate3d(calc(var(--px) * 26px), calc(var(--py) * 18px), 0); }
.chip.c3 { right: 24%; top: -5%; background: var(--e49-serra); color: var(--e49-nata); transform: translate3d(calc(var(--px) * 14px), calc(var(--py) * 20px), 0); }
@media (max-width: 899px) {
  .chip { font-size: .8rem; padding: 7px 12px; }
  .chip.c3 { display: none; }
  .phone-wrap { right: 0; bottom: -2%; width: 26%; }
}

/* texto grande com adesivos */
.statement { padding-block: clamp(72px, 10vw, 150px) clamp(48px, 6vw, 90px); }
.display { font-size: clamp(2.4rem, 7.2vw, 6.4rem); line-height: .98; letter-spacing: -.05em; font-weight: 800; text-transform: lowercase; }
.display .row { display: flex; flex-wrap: wrap; align-items: center; column-gap: .22em; }
.display .wd { display: inline-block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.display .wd > span { display: inline-block; }
.display .hl { color: var(--e49-brasa); }
.stk { display: inline-flex; align-items: center; justify-content: center; rotate: var(--r, 0deg); }
.stk-tile img { width: .92em; height: auto; border-radius: .18em; }
.stk-pill { background: var(--e49-brasa); color: var(--e49-nata); border-radius: var(--e49-raio-pill); padding: .02em .36em .1em; font-size: .78em; line-height: 1.1; letter-spacing: -.04em; }
.statement .sub { max-width: 54ch; margin-top: clamp(28px, 4vw, 48px); }
.diffs { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 64px); margin-top: clamp(48px, 7vw, 96px); }
.diffs li { border-top: 2px solid var(--fg); padding-top: 20px; }
.diffs h3 { margin-bottom: 10px; }
.diffs p { margin: 0; color: var(--muted); max-width: 38ch; }
@media (max-width: 719px) { .diffs { grid-template-columns: 1fr; gap: 28px; } }

/* serviços: cartões que correm na horizontal ao rolar */
.hs { position: relative; }
.hs-sticky { padding: clamp(40px, 6vw, 96px) 0; }
.hs-head { margin-bottom: clamp(24px, 3vw, 40px); }
.hs-track { display: flex; gap: clamp(16px, 2vw, 28px); width: auto; overflow-x: auto; scroll-snap-type: x mandatory; padding: 28px max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter))); scrollbar-width: none; }
.hs-track::-webkit-scrollbar { display: none; }
.hs-card { flex: none; scroll-snap-align: center; position: relative; display: flex; flex-direction: column; gap: 22px; width: clamp(290px, 31vw, 440px); min-height: clamp(420px, 60dvh, 540px); padding: clamp(24px, 2.4vw, 36px); border-radius: var(--e49-raio); text-decoration: none; overflow: hidden; rotate: var(--rot, 0deg); translate: 0 var(--dy, 0); transition: rotate .6s var(--ease), translate .6s var(--ease); }
.hs-card:hover { rotate: 0deg; translate: 0 -8px; }
.hs-card h3 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); line-height: 1.1; font-weight: 700; max-width: 14ch; }
.hs-card p { margin: 10px 0 0; max-width: 32ch; }
.hs-card .foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: auto; flex-wrap: wrap; }
.hs-card .go { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.hs-card .go .ic { transition: transform .35s var(--ease); }
.hs-card:hover .go .ic { transform: translate(3px, -3px); }
.hs-card .price { font-family: var(--e49-apoio); font-weight: 500; font-size: .9rem; }
.hs-1 { width: clamp(320px, 42vw, 600px); background: var(--e49-serra); color: var(--e49-nata); --rot: -1.4deg; }
.hs-1 p { color: var(--on-band-muted); }
.hs-1 h3 { font-size: clamp(1.7rem, 3vw, 2.5rem); }
.hs-2 { background: var(--e49-brasa); color: var(--e49-nata); --rot: 1.2deg; --dy: 22px; }
.hs-2 p, .hs-2 .go, .hs-2 .price { font-size: 1.1875rem; font-weight: 700; }
.hs-3 { background: var(--e49-geada); color: var(--e49-serra); --rot: -1deg; }
.hs-3 p { color: #2C3C4E; }
.hs-4 { border: 2px solid var(--fg); color: var(--fg); --rot: 1.5deg; --dy: 18px; }
.hs-4 p { color: var(--muted); }
.art { flex: 1; display: flex; align-items: center; min-height: 0; }
.art-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.art-pills li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: var(--e49-raio-pill); border: 1.5px solid rgba(252, 243, 217, .4); font-weight: 600; }
.art-pills .ic { color: var(--e49-brasa); width: 1.1em; height: 1.1em; }
.art-browser { width: 100%; border-radius: 12px; overflow: hidden; background: var(--e49-nata); }
.art-browser::before { content: ""; display: block; height: 14px; background: var(--e49-nata); border-bottom: 1px solid rgba(28, 42, 58, .15); }
.art-browser img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; }
.art-media { display: grid; gap: 18px; width: 100%; }
.art-play { width: 96px; height: 96px; border-radius: 50%; background: var(--e49-serra); color: var(--e49-nata); display: grid; place-items: center; }
.art-play .ic { width: 38px; height: 38px; margin-left: 4px; }
.art-media .art-pills li { border-color: rgba(28, 42, 58, .45); }
.art-media .art-pills .ic { color: var(--e49-serra); }

.art-tee { justify-content: center; }
@media (max-width: 719px) { .hs-card, .hs-1 { width: 80vw; min-height: 440px; } }

/* a rolagem vertical vira horizontal (só onde o navegador suporta e a pessoa aceita movimento) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hs { height: 230vh; view-timeline: --hs block; }
    .hs-sticky { position: sticky; top: 0; height: 100dvh; overflow: hidden; container-type: inline-size; display: flex; flex-direction: column; justify-content: center; padding-top: calc(var(--header-h) + 8px); padding-bottom: clamp(36px, 7dvh, 72px); }
    .hs-head { margin-bottom: 0; }
    .hs-track { width: max-content; overflow: visible; scroll-snap-type: none; padding-inline: max(var(--gutter), calc((100cqw - var(--maxw)) / 2 + var(--gutter))); animation: pan linear both; animation-timeline: --hs; animation-range: cover 30.3% cover 69.7%; }
    .hs-track { padding-block: 14px; }
    .hs-card { min-height: clamp(340px, 48dvh, 500px); }
    @media (max-width: 719px) { .hs-card, .hs-1 { min-height: 0; } .hs-head .lead { display: none; } .hs-card { gap: 14px; } }
    @media (max-height: 720px) { .hs-head .lead, .hs-card .art { display: none; } .hs-card { min-height: 0; } }
    @keyframes pan { from { transform: translateX(0); } to { transform: translateX(calc(100cqw - 100%)); } }
  }
}

/* vitrine rolável: três exemplos de sites */
.sc { position: relative; }
.sc-sticky { position: sticky; top: var(--header-h); min-height: calc(100dvh - var(--header-h)); display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 80px); align-items: center; padding-block: clamp(32px, 5vh, 64px); }
.sc-tracks { margin-top: -20dvh; padding-bottom: 32dvh; }
.sc-track { height: 60dvh; }
.sc-copy h2 { margin-bottom: 18px; }
.sc-note { font-size: .95rem; color: var(--muted); max-width: 46ch; margin-top: 18px; }
.sc-tabs { margin: 28px 0 0; display: grid; gap: 4px; }
.sc-tab { width: 100%; display: block; text-align: left; background: none; border: 0; border-left: 4px solid var(--line); padding: 14px 0 14px 20px; color: var(--fg); font: inherit; cursor: pointer; opacity: .55; transition: opacity .3s, border-color .3s, padding-left .3s var(--ease); }
.sc-tab b { display: block; font-family: var(--e49-titulo); text-transform: lowercase; font-weight: 600; font-size: 1.1rem; letter-spacing: -.01em; }
.sc-tab span { display: block; font-size: .95rem; color: var(--muted); margin-top: 2px; }
.sc-tab:hover { opacity: .85; }
.sc-tab[aria-selected="true"] { opacity: 1; border-left-color: var(--e49-brasa); padding-left: 26px; }
.sc .stage { max-width: 800px; margin-right: 0; }
@media (max-width: 899px) {
  .sc-sticky { position: static; min-height: 0; grid-template-columns: 1fr; }
  .sc-tracks { display: none; }
  .sc .stage { margin-bottom: 40px; }
}

/* como funciona, em Brasa, com celulares que sobem */
.how { background: var(--e49-brasa); color: var(--e49-serra); position: relative; overflow: hidden; }
.how .sec-head h2 { color: var(--e49-serra); }
.how .sec-head .lead { color: var(--e49-serra); font-weight: 700; }
.flow { position: relative; margin-top: clamp(24px, 4vw, 56px); }
/* trilha pontilhada que se desenha ao rolar, com um número em cada etapa */
.flow-line { position: absolute; left: calc(50% - 6px); top: 0; width: 12px; height: 100%; z-index: 0; background: radial-gradient(circle, var(--e49-serra) 3.2px, transparent 3.7px) center top / 12px 18px repeat-y; }
.flow ol { position: relative; z-index: 1; margin: 0; padding: 0; list-style: none; display: grid; gap: clamp(48px, 7vw, 104px); counter-reset: etapa; }
.step::after { counter-increment: etapa; content: counter(etapa); position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 2; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--e49-nata); color: var(--e49-serra); border: 3px solid var(--e49-serra); font: 500 1.05rem var(--e49-apoio); }
.js .flow-line { clip-path: inset(0 0 100% 0); }
.step::after { transition: background-color .4s, color .4s; }
.step.on::after { background: var(--e49-serra); color: var(--e49-nata); }
.step { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 8vw, 140px); align-items: center; }
.step:nth-child(even) .step-card { order: 2; }
.step-card { background: var(--e49-serra); color: var(--e49-nata); border-radius: var(--e49-raio); padding: clamp(28px, 3.2vw, 48px); rotate: var(--rot, 0deg); }
.step-card h3 { margin-bottom: 12px; font-size: clamp(1.3rem, 2.4vw, 1.9rem); line-height: 1.1; font-weight: 700; }
.step-card p { margin: 0; color: var(--on-band-muted); max-width: 36ch; }
.step-sticker { justify-self: center; display: grid; place-items: center; width: clamp(120px, 15vw, 190px); aspect-ratio: 1; border-radius: 50%; background: var(--sbg, var(--e49-geada)); color: var(--sfg, var(--e49-serra)); rotate: var(--rot, 0deg); }
.step-sticker .ic { width: 44%; height: 44%; }
.step-sticker img { width: 52%; height: auto; border-radius: 18%; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
  }
}
@media (max-width: 899px) {
  .flow-line { left: 10px; }
  .step-card { padding-bottom: 62px; }
  .step::after { left: -48px; top: 40px; translate: 0 -50%; width: 40px; height: 40px; }
  .step { grid-template-columns: 1fr; gap: 0; margin-left: 44px; }
  .step:nth-child(even) .step-card { order: 0; }
  /* o ícone entra um pedaço no quadro da etapa, em vez de ficar solto embaixo */
  .step-sticker { position: relative; z-index: 2; justify-self: end; width: 104px; margin: -46px 22px 0 0; }
}

/* preço dos sites */
.price-band { background: var(--surface); }
.price-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.price-big { font-family: var(--e49-apoio); font-weight: 500; line-height: 1; color: var(--fg); }
.price-big small { display: block; font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 12px; color: var(--muted); }
.price-big strong { display: block; font-weight: 500; font-size: clamp(3.5rem, 9vw, 7rem); letter-spacing: -.04em; }
.price-big strong .cur { font-size: .4em; letter-spacing: 0; vertical-align: .9em; margin-right: .1em; }
.benefits { margin: 24px 0 28px; display: grid; gap: 18px; }
.benefits li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; }
.benefits .ic { margin-top: 4px; color: var(--link); }
.benefits b { display: block; }
.fine { font-size: .98rem; color: var(--muted); max-width: 60ch; }
@media (max-width: 899px) { .price-grid { grid-template-columns: 1fr; } }

/* perguntas frequentes */
.faq { max-width: 820px; margin-inline: auto; }
.faq h2 { margin-bottom: clamp(24px, 4vw, 40px); }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; cursor: pointer; font-weight: 700; font-size: 1.125rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { width: 22px; height: 22px; transition: transform .35s var(--ease); }
.faq details[open] summary .ic { transform: rotate(45deg); }
.faq .ans { padding: 0 0 24px; color: var(--muted); max-width: 64ch; }
.faq .ans p:last-child { margin-bottom: 0; }

/* rodapé com o logo gigante cortado ao meio */
.footer { padding-top: clamp(64px, 9vw, 120px); position: relative; overflow: hidden; }
.foot-cta h2 { font-size: clamp(1.75rem, 4vw, 3rem); line-height: 1.05; font-weight: 800; max-width: 18ch; }
.foot-cta p { color: var(--on-band-muted); max-width: 46ch; margin: 18px 0 28px; }
.foot-grid { display: grid; grid-template-columns: 1.2fr .9fr 1.5fr 1.1fr; gap: 32px; margin-top: clamp(56px, 8vw, 96px); padding-top: 36px; border-top: 1px solid rgba(252, 243, 217, .2); }
.foot-grid h3 { font-family: var(--e49-apoio); font-weight: 500; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--on-band-muted); margin-bottom: 14px; }
.foot-grid ul { display: grid; gap: 8px; }
.foot-grid a { text-decoration: none; }
.foot-grid a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--e49-brasa); }
.foot-grid .sig { color: var(--on-band-muted); font-size: 1rem; max-width: 26ch; margin: 0; }
.foot-ct li { display: flex; align-items: flex-start; gap: 10px; }
.foot-ct .ic { margin-top: .32em; flex: none; }
.foot-ct .ic { color: var(--e49-geada); }
.foot-end { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 40px; color: var(--on-band-muted); font-size: .9rem; }
.foot-logo { padding: 0 var(--gutter) clamp(28px, 4vw, 56px); margin-top: clamp(40px, 6vw, 88px); }
.foot-logo .crop { box-sizing: border-box; width: min(100%, 1180px); margin-inline: auto; padding: 0 1%; }
.foot-logo img { display: block; width: 100%; height: auto; }
@media (prefers-reduced-motion: no-preference) {
  .js .foot-logo img { clip-path: inset(100% 0 0 0); transition: clip-path 1.1s var(--ease); }
  .js .footer.in .foot-logo img { clip-path: inset(0); }
}
@media (max-width: 899px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-grid > :first-child { grid-column: 1 / -1; } }
@media (max-width: 519px) { .foot-grid { grid-template-columns: 1fr; } }

/* páginas internas */
.page-hero { position: relative; overflow: hidden; padding: calc(var(--header-h) + clamp(40px, 6vw, 88px)) 0 clamp(48px, 6vw, 88px); }
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero h1 { font-size: clamp(2rem, 5vw, 4rem); line-height: 1.04; font-weight: 800; max-width: 16ch; }
.page-hero .lead { margin: 24px 0 32px; }
.page-hero .slash { right: 2%; top: 0; width: 20%; height: 100%; z-index: 0; }
@media (max-width: 899px) { .page-hero .slash { width: 34%; right: -6%; opacity: .55; } }
.ph-grid { display: grid; grid-template-columns: 6fr 6fr; gap: clamp(24px, 4vw, 64px); align-items: center; }
.ph-grid .stage { max-width: 600px; margin-right: 0; padding-bottom: 10%; }
@media (max-width: 899px) { .ph-grid { grid-template-columns: 1fr; } .ph-grid .stage { margin-top: 24px; } }
.split { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
@media (max-width: 899px) { .split { grid-template-columns: 1fr; } }
.groups { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.group { padding: 24px; border-radius: var(--e49-raio); background: var(--surface); }
.group h3 { margin-bottom: 8px; }
.group p { margin: 0; color: var(--muted); }
.group:nth-child(3n) { background: transparent; border: 2px solid var(--fg); }
@media (max-width: 719px) { .groups { grid-template-columns: 1fr; } }
.plain-list { display: grid; gap: 14px; }
.plain-list li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; }
.plain-list .ic { margin-top: 4px; color: var(--link); }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.facts li { padding: 28px 24px; border-radius: var(--e49-raio); background: var(--surface); display: grid; gap: 12px; align-content: start; }
.facts strong { font-family: var(--e49-titulo); font-weight: 700; font-size: clamp(2.6rem, 6vw, 4rem); line-height: 1; letter-spacing: -.04em; color: var(--e49-brasa-escura, #C93A1B); }
.facts span { color: var(--muted); }
.src { margin: 16px 0 0; font-size: .875rem; }
.benefits.why { margin-top: 40px; max-width: 760px; }
@media (max-width: 719px) { .facts { grid-template-columns: 1fr; } }
.note { margin-top: 28px; padding: 20px 24px; border-radius: var(--e49-raio); border: 2px solid var(--fg); }
.note p { margin: 0; }
.prose { max-width: 70ch; }
.prose h2 { font-size: 1.375rem; margin: 40px 0 12px; text-transform: none; letter-spacing: -.01em; }
.prose ul { padding-left: 1.2em; list-style: disc; }

/* calculadora de uniformes */
.calc { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.field { margin-bottom: 36px; border: 0; padding: 0; min-width: 0; }
.field legend, .field > label.lab { display: block; padding: 0; font-family: var(--e49-titulo); text-transform: lowercase; font-weight: 600; font-size: 1.25rem; margin-bottom: 14px; letter-spacing: -.01em; }
.opts { display: flex; flex-wrap: wrap; gap: 10px; }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt span { display: inline-flex; flex-direction: column; justify-content: center; min-height: 52px; padding: 8px 22px; border-radius: var(--e49-raio-pill); border: 2px solid var(--fg); font-weight: 700; cursor: pointer; transition: background-color .2s, color .2s, transform .25s var(--ease); }
.opt span small { font-weight: 500; font-size: .85rem; color: inherit; opacity: .85; }
.opt:hover span { transform: translateY(-2px); }
.opt input:checked + span { background: var(--fg); color: var(--bg); }
.opt input:focus-visible + span { outline: 3px solid var(--e49-brasa); outline-offset: 3px; }
.opts.stack .opt span { border-radius: var(--e49-raio); align-items: flex-start; min-width: 220px; }
.help { margin: 12px 0 0; font-size: .98rem; color: var(--muted); max-width: 56ch; }
.stepper { display: inline-flex; align-items: center; border: 2px solid var(--fg); border-radius: var(--e49-raio-pill); overflow: hidden; }
.stepper button { width: 56px; height: 56px; background: none; border: 0; color: inherit; cursor: pointer; display: grid; place-items: center; }
.stepper button:hover { background: var(--fg); color: var(--bg); }
.stepper input { width: 96px; height: 56px; text-align: center; border: 0; background: transparent; color: inherit; font-family: var(--e49-apoio); font-weight: 500; font-size: 1.5rem; -moz-appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.result { padding: clamp(24px, 3vw, 36px); border-radius: var(--e49-raio); background: var(--e49-serra); color: var(--e49-nata); }
.result h2 { font-size: 1.125rem; font-weight: 600; margin-bottom: 20px; }
.result dl { margin: 0; display: grid; gap: 10px; }
.result .row { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid rgba(252, 243, 217, .2); padding-bottom: 10px; }
.result dt { color: var(--on-band-muted); }
.result dd { margin: 0; font-family: var(--e49-apoio); font-weight: 500; text-align: right; }
.result .total { margin: 24px 0 6px; font-family: var(--e49-apoio); font-weight: 500; font-size: clamp(2.25rem, 4.6vw, 3.25rem); line-height: 1; letter-spacing: -.03em; color: var(--e49-brasa); }
.result .small { font-size: .95rem; color: var(--on-band-muted); margin-bottom: 24px; }
.result .warn { display: none; padding: 14px 16px; border-radius: 12px; background: rgba(241, 70, 37, .18); margin-bottom: 20px; }
.result.under .warn { display: block; }
.result.under .total { color: var(--on-band-muted); }
.result .btn { width: 100%; }
.result .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
@media (max-width: 899px) { .calc { grid-template-columns: 1fr; } }
.tiers { width: 100%; border-collapse: collapse; font-family: var(--e49-apoio); font-weight: 500; font-size: .95rem; }
.tiers th, .tiers td { text-align: right; padding: 12px 8px; border-bottom: 1px solid var(--line); }
.tiers th:first-child, .tiers td:first-child { text-align: left; }
.tiers thead th { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.table-scroll { overflow-x: auto; }

/* uniformes: os mockups enviados, sem alterar a peça, sobre fundo escuro */
.side { display: grid; gap: 16px; }
@media (min-width: 900px) and (min-height: 980px) { .side { position: sticky; top: calc(var(--header-h) + 20px); } }
.preview { padding: 22px 22px 18px; border-radius: var(--e49-raio); background: var(--e49-serra); color: var(--e49-nata); text-align: center; }
.pv-stage { position: relative; width: min(100%, 360px); aspect-ratio: 4 / 5; margin-inline: auto; container-type: inline-size; }
.pv-g { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
[data-g="camiseta"] .pv-camiseta, [data-g="polo"] .pv-polo, [data-g="moletom"] .pv-moletom { display: block; }
.preview .cap { margin: 12px 0 0; font-size: .85rem; color: var(--on-band-muted); }
@media (prefers-reduced-motion: no-preference) { .preview.swap .pv-stage { animation: pop .5s var(--ease); } @keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } } }
.art-tee { background: var(--e49-serra); border-radius: 14px; padding: 8px 0; }
.art-tee .pv-stage { width: min(88%, 250px); }
/* contato */
.contact { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.ct-list { margin: 28px 0 0; display: grid; gap: 16px; }
.ct-list li { display: flex; gap: 14px; align-items: flex-start; }
.ct-list .ic { margin-top: 4px; color: var(--link); }
.ct-list a { font-weight: 700; }
.form { display: grid; gap: 22px; padding: clamp(24px, 3vw, 36px); border-radius: var(--e49-raio); background: var(--e49-geada-clara); color: var(--e49-serra); }
.form label { display: block; font-weight: 700; margin-bottom: 8px; }
.form input, .form select, .form textarea { width: 100%; padding: 14px 16px; border-radius: var(--e49-raio); border: 2px solid var(--e49-serra); background: #fff; color: var(--e49-serra); font: inherit; }
.form textarea { min-height: 140px; resize: vertical; }
.form .hint { font-size: .92rem; margin: 8px 0 0; opacity: .85; }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { outline: 3px solid var(--e49-brasa); outline-offset: 2px; }
.err { color: var(--e49-brasa-escura); font-weight: 700; margin-top: 8px; font-size: .95rem; display: none; }
.bad .err { display: block; }
.bad input, .bad select { border-color: var(--e49-brasa-escura); }
@media (max-width: 899px) { .contact { grid-template-columns: 1fr; } }

/* entradas ao rolar: só quando há JS e a pessoa aceita movimento */
@media (prefers-reduced-motion: no-preference) {
  .js .rv { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0ms); }
  .js .rv.in { opacity: 1; transform: none; }
  .js .split-h .wi { display: inline-block; transform: translateY(108%); transition: transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 55ms); }
  .js .split-h.in .wi { transform: none; }
  .js .display .wd > span { transform: translateY(112%); transition: transform 1.05s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
  .js .display.in .wd > span { transform: none; }
  .js .display .stk { scale: 0; transition: scale .9s var(--spring); transition-delay: calc(var(--i, 0) * 80ms + 350ms); }
  .js .display.in .stk { scale: 1; }
  .js .rise { translate: 0 140px; opacity: 0; transition: translate .9s var(--ease), opacity .6s; transition-delay: var(--d, 0ms); }
  .js .rise.in { translate: 0 0; opacity: 1; }
  .hero h1 .l, .hero-body, .hero .stage, .hero .orbit { animation: rise-in .9s var(--ease) both; }
  .hero h1 .l:nth-child(2) { animation-delay: .1s; }
  .hero h1 .l:nth-child(3) { animation-delay: .2s; }
  .hero-body { animation-delay: .3s; }
  .hero .stage, .hero .orbit { animation-delay: .4s; }
  @keyframes rise-in { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
}
.split-h .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .screen.on .shot { animation: none !important; }
}

/* efeitos de movimento: abertura, transição de rabisco e traço que percorre o site */
html.intro-cover::before, html.tr-cover::before { content: ""; position: fixed; inset: 0; z-index: 300; background: var(--e49-serra); }
html.intro-cover { overflow: hidden; }
html.intro-cover *, html.tr-cover * { animation-play-state: paused !important; }
.fx { position: fixed; inset: 0; z-index: 300; pointer-events: none; }
.fx-wipe .wp { position: absolute; top: 0; bottom: 0; left: -25vw; width: 150vw; clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%); will-change: transform; }
.fx-wipe .wp-a { background: var(--e49-brasa); }
.fx-wipe .wp-b { background: var(--e49-serra); }
.fx-bg { position: absolute; inset: 0; background: var(--e49-serra); }
.fx-edge { position: absolute; inset: 0; background: var(--e49-brasa); clip-path: inset(0 0 0 100%); }
.fx-logo { position: absolute; left: 50%; top: 50%; width: min(76vw, 640px); translate: -50% -50%; }
.fx-logo svg { display: block; width: 100%; height: auto; overflow: visible; }
body { position: relative; }
.trail { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; z-index: 0; overflow: hidden; }
.trail svg { display: block; }
.t-line { fill: none; stroke: var(--e49-brasa); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; opacity: .5; }

main > section, .footer { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .trail { display: none; } }
/* celular: menos espaço entre as sessões (fica no fim para valer sobre as regras de cada bloco) */
@media (max-width: 719px) {
  .sec { padding-block: 44px; }
  .sec-tight { padding-block: 34px; }
  .sec-head { margin-bottom: 24px; }
  .statement { padding-block: 40px 28px; }
  .footer { padding-top: 48px; }
  .foot-grid { margin-top: 40px; }
  .foot-logo { margin-top: 32px; }
}
/* movimentos leves */
.facts .bar { display: block; height: 8px; border-radius: 99px; background: rgba(28, 42, 58, .12); overflow: hidden; margin-top: 4px; }
.facts .bar b { display: block; height: 100%; width: calc(var(--v) * 1%); border-radius: 99px; background: var(--e49-brasa-escura); transform-origin: left; }
.group { transition: translate .5s var(--ease); }
.group:hover { translate: 0 -5px; }
@media (prefers-reduced-motion: no-preference) {
  .facts .bar b { transform: scaleX(0); transition: transform 1.5s var(--ease) .25s; }
  .facts li.in .bar b { transform: scaleX(1); }
  .js .plain-list li, .js .benefits li { opacity: 0; translate: -10px 0; transition: opacity .7s var(--ease), translate .7s var(--ease); }
  .js .plain-list.in li, .js .in .plain-list li, .js .benefits li.in, .js .benefits.in li, .js .in .benefits li { opacity: 1; translate: 0 0; }
  .js .in .plain-list li:nth-child(2), .js .plain-list.in li:nth-child(2) { transition-delay: .08s; } .js .in .plain-list li:nth-child(3), .js .plain-list.in li:nth-child(3) { transition-delay: .16s; }
  .js .in .plain-list li:nth-child(4), .js .plain-list.in li:nth-child(4) { transition-delay: .24s; } .js .in .plain-list li:nth-child(5), .js .plain-list.in li:nth-child(5) { transition-delay: .32s; } .js .in .plain-list li:nth-child(6), .js .plain-list.in li:nth-child(6) { transition-delay: .4s; }
  .js .plain-list li .ic-check { transition: scale .5s var(--ease) .3s; scale: 0; }
  .js .plain-list.in li .ic-check, .js .in .plain-list li .ic-check { scale: 1; }
  .page-hero .hl { background: linear-gradient(var(--e49-brasa), var(--e49-brasa)) no-repeat 0 96% / 0 .09em; animation: hl-sweep .9s var(--ease) .7s forwards; }
  @keyframes hl-sweep { to { background-size: 100% .09em; } }
  .price-big strong { display: inline-block; }
}
.groups.g3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 899px) { .groups.g3 { grid-template-columns: 1fr; } }

/* mapa da página de contato: só carrega depois do clique */
.map { position: relative; overflow: hidden; min-height: clamp(320px, 46vw, 480px); border: 2px solid var(--fg); border-radius: var(--e49-raio); background-color: var(--e49-geada-clara); background-image: repeating-linear-gradient(0deg, rgba(28, 42, 58, .07) 0 2px, transparent 2px 46px), repeating-linear-gradient(90deg, rgba(28, 42, 58, .07) 0 2px, transparent 2px 46px), linear-gradient(115deg, transparent 44%, rgba(241, 70, 37, .14) 44% 47%, transparent 47%); display: grid; place-items: center; }
.map-ph { display: grid; justify-items: center; gap: 14px; padding: 28px 20px; text-align: center; }
.map-pin { width: 44px; height: 44px; color: var(--e49-brasa); }
.map-ad { margin: 0; font-size: 1.1rem; } .map-ad b { display: block; font: 700 1.25rem var(--e49-titulo); letter-spacing: -.02em; }
.map-btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.map .hint { margin: 0; font-size: .9rem; opacity: .8; }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.nw { white-space: nowrap; }