/* =========================================================
   Tardezinha da Contraste — Dia do Dentista 2026
   Landing page  ·  HTML + CSS puro
   Layout de referência: PSD 1920 × 8198 px
   ========================================================= */

/* ---------- FONTES (auto-hospedadas) ---------- */
@font-face{font-family:'Luckiest Guy';src:url(../fonts/luckiest-guy-latin-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Luckiest Guy';src:url(../fonts/luckiest-guy-latin-ext-400.woff2) format('woff2');font-weight:400;font-display:swap;unicode-range:U+0100-02BA,U+0304,U+0308,U+0329,U+1E00-1EFF,U+2020,U+20A0-20AB,U+2113,U+2C60-2C7F,U+A720-A7FF}

@font-face{font-family:'Chakra Petch';src:url(../fonts/chakra-petch-latin-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Chakra Petch';src:url(../fonts/chakra-petch-latin-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Chakra Petch';src:url(../fonts/chakra-petch-latin-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Chakra Petch';src:url(../fonts/chakra-petch-latin-ext-400.woff2) format('woff2');font-weight:400;font-display:swap;unicode-range:U+0100-02BA,U+0304,U+0308,U+0329,U+1E00-1EFF,U+2020,U+20A0-20AB,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Chakra Petch';src:url(../fonts/chakra-petch-latin-ext-600.woff2) format('woff2');font-weight:600;font-display:swap;unicode-range:U+0100-02BA,U+0304,U+0308,U+0329,U+1E00-1EFF,U+2020,U+20A0-20AB,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Chakra Petch';src:url(../fonts/chakra-petch-latin-ext-700.woff2) format('woff2');font-weight:700;font-display:swap;unicode-range:U+0100-02BA,U+0304,U+0308,U+0329,U+1E00-1EFF,U+2020,U+20A0-20AB,U+2113,U+2C60-2C7F,U+A720-A7FF}

@font-face{font-family:'Open Sans';src:url(../fonts/open-sans-latin-300.woff2) format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Open Sans';src:url(../fonts/open-sans-latin-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Open Sans';src:url(../fonts/open-sans-latin-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Open Sans';src:url(../fonts/open-sans-latin-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Open Sans';src:url(../fonts/open-sans-latin-ext-300.woff2) format('woff2');font-weight:300;font-display:swap;unicode-range:U+0100-02BA,U+0304,U+0308,U+0329,U+1E00-1EFF,U+2020,U+20A0-20AB,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Open Sans';src:url(../fonts/open-sans-latin-ext-400.woff2) format('woff2');font-weight:400;font-display:swap;unicode-range:U+0100-02BA,U+0304,U+0308,U+0329,U+1E00-1EFF,U+2020,U+20A0-20AB,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Open Sans';src:url(../fonts/open-sans-latin-ext-600.woff2) format('woff2');font-weight:600;font-display:swap;unicode-range:U+0100-02BA,U+0304,U+0308,U+0329,U+1E00-1EFF,U+2020,U+20A0-20AB,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Open Sans';src:url(../fonts/open-sans-latin-ext-700.woff2) format('woff2');font-weight:700;font-display:swap;unicode-range:U+0100-02BA,U+0304,U+0308,U+0329,U+1E00-1EFF,U+2020,U+20A0-20AB,U+2113,U+2C60-2C7F,U+A720-A7FF}

@font-face{font-family:'Montserrat';src:url(../fonts/montserrat-latin-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Montserrat';src:url(../fonts/montserrat-latin-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Montserrat';src:url(../fonts/montserrat-latin-800.woff2) format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:'Montserrat';src:url(../fonts/montserrat-latin-ext-400.woff2) format('woff2');font-weight:400;font-display:swap;unicode-range:U+0100-02BA,U+0304,U+0308,U+0329,U+1E00-1EFF,U+2020,U+20A0-20AB,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Montserrat';src:url(../fonts/montserrat-latin-ext-500.woff2) format('woff2');font-weight:500;font-display:swap;unicode-range:U+0100-02BA,U+0304,U+0308,U+0329,U+1E00-1EFF,U+2020,U+20A0-20AB,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Montserrat';src:url(../fonts/montserrat-latin-ext-800.woff2) format('woff2');font-weight:800;font-display:swap;unicode-range:U+0100-02BA,U+0304,U+0308,U+0329,U+1E00-1EFF,U+2020,U+20A0-20AB,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- TOKENS ---------- */
:root{
  /* cores extraídas do PSD */
  --azul:#004C9F;
  --azul-noite:#001868;
  --laranja:#FFA400;
  --laranja-txt:#F5A300;
  --vermelho:#D34224;
  --vermelho-esc:#B7442A;
  --branco:#FFFFFF;
  --off:#F2F2F2;
  --cinza:#9E9E9E;
  --btn-txt:#2B2B5A;

  /* 1 unidade = 1 px do PSD (1920 de largura) */
  --s: 0.0520833vw;

  --display:'Luckiest Guy', 'Impact', system-ui, sans-serif;
  --square:'Chakra Petch', 'Trebuchet MS', system-ui, sans-serif;
  --sans:'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --form:'Montserrat', system-ui, sans-serif;
}
@media (min-width:1920px){ :root{ --s:1px } }

/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; overflow-x:clip}
body{
  margin:0; background:var(--branco); color:var(--azul);
  font-family:var(--sans); -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{max-width:100%; height:auto; display:block}
a{text-decoration:none; color:inherit}
ul,ol,dl,dd{margin:0; padding:0; list-style:none}
h1,h2,h3,p{margin:0}
button{font:inherit; cursor:pointer; border:0; background:none}

.wrap{
  width:calc(1080 * var(--s));
  max-width:calc(100% - 40px);
  margin-inline:auto;
  position:relative;
}
.display{font-family:var(--display); font-weight:400; letter-spacing:.01em; line-height:1}

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:absolute; top:0; left:0; right:0; z-index:20;
  padding-top:calc(62 * var(--s));
}
.nav__inner{
  display:flex; justify-content:center; gap:calc(46 * var(--s));
  font-family:var(--square); font-weight:600;
  font-size:calc(22 * var(--s));
  letter-spacing:.02em;
}
.nav__link{color:var(--branco); position:relative; padding-bottom:calc(10 * var(--s))}
.nav__link::after{
  content:''; position:absolute; left:-6%; right:-6%; bottom:0;
  height:calc(5 * var(--s)); background:var(--vermelho);
  transform:scaleX(0); transform-origin:center; transition:transform .25s ease;
}
.nav__link.is-active::after,
.nav__link:hover::after{transform:scaleX(1)}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  aspect-ratio:1920/1080;
  background:#001868 url(../img/bg-hero.webp) center top/cover no-repeat;
  overflow:hidden;
}
.hero__inner{position:absolute; inset:0}
.hero__inner > *{position:absolute}

.hero__lockup{
  left:50%; top:calc(260 * var(--s)); transform:translateX(-50%);
  width:calc(693 * var(--s));
}
.hero__word{width:calc(693 * var(--s)); max-width:none}
.hero__da{width:calc(367 * var(--s)); margin:calc(9 * var(--s)) auto 0 calc(154 * var(--s))}

.hero__data{
  left:calc(691 * var(--s)); top:calc(513 * var(--s));
  display:flex; align-items:flex-start; gap:0;
  font-family:var(--square); font-weight:700; line-height:1;
}
.hero__data .col{display:flex; flex-direction:column}
.hero__data .day{color:var(--branco); font-size:calc(44 * var(--s))}
.hero__data .day em{font-style:normal; color:var(--laranja-txt); font-size:calc(27 * var(--s))}
.hero__data .dow{color:var(--vermelho); font-size:calc(24 * var(--s)); display:block; margin-top:calc(10 * var(--s))}
.hero__data .bar{width:calc(6 * var(--s)); height:calc(79 * var(--s)); background:var(--laranja); margin-left:calc(15 * var(--s)); margin-right:calc(13 * var(--s)); flex:none}
.hero__data .hour{color:var(--branco); font-size:calc(54 * var(--s)); margin-top:calc(14 * var(--s))}
.hero__cities{
  left:calc(685 * var(--s)); top:calc(599 * var(--s));
  width:calc(302 * var(--s)); height:calc(44 * var(--s));
  display:flex; align-items:center; justify-content:center;
  background:var(--vermelho); color:var(--branco);
  font-family:var(--square); font-weight:600;
  font-size:calc(17 * var(--s)); letter-spacing:.005em; white-space:nowrap;
}
.hero__selo{left:calc(1023 * var(--s)); top:calc(494 * var(--s)); width:calc(206 * var(--s))}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--square); font-weight:700; letter-spacing:.02em;
  border-radius:999px; transition:transform .2s ease, filter .2s ease;
}
.btn:hover{transform:translateY(-2px); filter:brightness(1.05)}
.btn--hero{
  left:calc(756 * var(--s)); top:calc(743 * var(--s));
  width:calc(408 * var(--s)); height:calc(82 * var(--s));
  background:var(--laranja); color:var(--btn-txt);
  font-size:calc(30 * var(--s)); text-transform:uppercase;
  box-shadow:0 calc(6 * var(--s)) calc(24 * var(--s)) rgba(0,0,0,.18);
}

/* =========================================================
   DOMINGOU
   ========================================================= */
.domingou{
  position:relative;
  aspect-ratio:1920/1080;
  background:var(--vermelho) url(../img/bg-domingou.webp) center/cover no-repeat;
  overflow:hidden;
}
.domingou .wrap{height:100%}
.domingou__col{
  position:absolute; left:calc(54 * var(--s)); top:calc(140 * var(--s));
  width:calc(650 * var(--s));
}
.domingou__col h2{
  font-family:var(--display); font-weight:400; color:var(--branco);
  font-size:calc(58 * var(--s)); line-height:.98; text-transform:uppercase;
}
.domingou__sub{
  font-family:var(--square); font-weight:600; color:var(--laranja-txt);
  font-size:calc(34 * var(--s)); line-height:1.18;
  margin-top:calc(20 * var(--s));
}
.domingou__body{
  margin-top:calc(72 * var(--s));
  color:var(--branco); font-size:calc(23 * var(--s)); line-height:1.42;
  display:flex; flex-direction:column; gap:calc(23 * var(--s));
  max-width:calc(648 * var(--s));
}

/* =========================================================
   JÁ AVISA NO GRUPO
   ========================================================= */
.avisa{position:relative; background:var(--branco); z-index:5; padding-block:calc(60 * var(--s))}
.avisa__grid{
  display:grid; grid-template-columns:calc(602 * var(--s)) 1fr;
  gap:0; align-items:start;
  min-height:calc(960 * var(--s));
}
.avisa__art{position:relative; height:calc(960 * var(--s))}
.avisa__art img{position:absolute; max-width:none}
.avisa__leaf-a{left:calc(-125 * var(--s)); top:calc(300 * var(--s)); width:calc(545 * var(--s))}
.avisa__leaf-b{left:calc(276 * var(--s)); top:calc(394 * var(--s)); width:calc(307 * var(--s))}
.avisa__man{left:calc(-121 * var(--s)); top:calc(172 * var(--s)); width:calc(848 * var(--s))}

.bubble{
  position:absolute; left:calc(444 * var(--s)); top:calc(768 * var(--s));
  width:calc(379 * var(--s)); height:calc(121 * var(--s));
  background:var(--branco); border-radius:calc(18 * var(--s));
  box-shadow:0 calc(8 * var(--s)) calc(30 * var(--s)) rgba(0,0,0,.14);
  display:flex; align-items:center; justify-content:center; gap:calc(10 * var(--s));
  font-weight:700; font-size:calc(32 * var(--s)); color:#150401;
}
.bubble__check{width:calc(33 * var(--s)); position:absolute; right:calc(18 * var(--s)); bottom:calc(14 * var(--s))}
.avisa__avatar{left:calc(757 * var(--s)) !important; top:calc(711 * var(--s)) !important; width:calc(133 * var(--s)); z-index:2}

.avisa__content{padding-top:calc(43 * var(--s))}
/* medidas retiradas direto do PSD, relativas ao canto (1046, 2263) */
.avisa__title{
  position:relative; width:calc(314 * var(--s)); height:calc(136 * var(--s));
  margin-left:calc(24 * var(--s)); margin-bottom:calc(43 * var(--s));
  font-weight:700; line-height:1;
}
.avisa__title > *{position:absolute; white-space:nowrap}
.avisa__title .box--y{left:0; top:calc(20 * var(--s));
  width:calc(251 * var(--s)); height:calc(37 * var(--s)); background:var(--laranja)}
.avisa__title .box--b{left:calc(14 * var(--s)); top:calc(64 * var(--s));
  width:calc(300 * var(--s)); height:calc(72 * var(--s)); background:var(--azul)}
.avisa__title .l1{left:calc(10 * var(--s)); top:calc(-7 * var(--s));
  font-size:calc(60 * var(--s)); color:var(--azul)}
.avisa__title .l2{left:calc(26 * var(--s)); top:calc(61 * var(--s));
  font-size:calc(60 * var(--s)); color:var(--off)}
.perks{display:flex; flex-direction:column; gap:calc(14 * var(--s)); max-width:calc(500 * var(--s))}
.perks li{
  position:relative; padding-left:calc(41 * var(--s));
  font-size:calc(22 * var(--s)); line-height:1.34; color:var(--azul);
}
.perks strong{display:block; font-weight:700}
.perks__ico{position:absolute; left:0; top:calc(4 * var(--s)); width:calc(33 * var(--s))}
.perks__ico img{width:100%}

.avisa__leaf-orange{
  position:absolute; left:59.17%; top:calc(796 * var(--s));
  width:26.72%; z-index:3;
}

/* =========================================================
   POR QUE
   ========================================================= */
.porque{position:relative; background:var(--azul); z-index:4}
.porque__inner{text-align:center; padding-block:calc(167 * var(--s)) calc(174 * var(--s))}
.porque__inner h2{
  font-family:var(--display); font-weight:400; color:var(--off);
  font-size:calc(55 * var(--s)); text-transform:uppercase; line-height:1;
}
.porque__lead{
  margin-top:calc(15 * var(--s)); font-weight:700; color:var(--off);
  font-size:calc(34 * var(--s));
}
.porque__text{
  margin:calc(41 * var(--s)) auto 0; max-width:calc(680 * var(--s));
  font-weight:300; color:var(--laranja-txt);
  font-size:calc(23 * var(--s)); line-height:1.63;
}
.porque__text strong{font-weight:700}
.porque__selo{margin:calc(75 * var(--s)) auto 0; width:calc(206 * var(--s))}
.porque__leaf{position:absolute; left:12.29%; top:calc(791 * var(--s)); width:24.48%; z-index:3}

/* =========================================================
   CIDADES
   ========================================================= */
.cidades{position:relative; background:var(--laranja); z-index:3}
.cidades .wrap{padding-block:calc(122 * var(--s)) calc(154 * var(--s)); text-align:center}
.cidades__kicker{font-weight:700; color:var(--off); font-size:calc(34 * var(--s))}
.cidades__title{margin-top:calc(6 * var(--s))}
.cidades__title img{width:calc(500 * var(--s)); max-width:none; margin-inline:auto}
.cidades__text{
  margin:calc(33 * var(--s)) auto 0; max-width:calc(575 * var(--s));
  color:var(--azul); font-size:calc(23 * var(--s)); line-height:1.42;
}
.cards{
  margin-top:calc(68 * var(--s));
  display:grid; grid-template-columns:repeat(3, calc(286 * var(--s)));
  gap:calc(38 * var(--s)); justify-content:center;
}
.card img{
  width:100%; aspect-ratio:286/350; object-fit:cover;
  border-radius:calc(22 * var(--s));
  box-shadow:0 calc(10 * var(--s)) calc(28 * var(--s)) rgba(0,0,0,.15);
}
.card h3{margin-top:calc(26 * var(--s)); font-size:calc(25 * var(--s)); font-weight:700; color:var(--vermelho-esc)}
.card__place{margin-top:calc(4 * var(--s)); font-size:calc(23 * var(--s)); color:var(--vermelho-esc)}
.card__addr{margin-top:calc(4 * var(--s)); font-size:max(12px, calc(17 * var(--s))); line-height:1.35; color:var(--vermelho-esc)}

/* =========================================================
   INSCRIÇÃO
   ========================================================= */
.inscricao{position:relative; background:var(--branco); z-index:2}
.inscricao__grid{
  display:grid; grid-template-columns:calc(428 * var(--s)) calc(633 * var(--s));
  column-gap:calc(50 * var(--s)); row-gap:0; align-items:start;
  padding-block:calc(73 * var(--s)) calc(39 * var(--s));
}
.inscricao__col{min-width:0}
.inscricao__title{font-weight:700; color:var(--azul); font-size:calc(46 * var(--s)); line-height:1.12}
.inscricao__body{
  margin-top:calc(52 * var(--s)); color:var(--azul); max-width:calc(429 * var(--s));
  font-size:calc(23 * var(--s)); line-height:1.45;
  display:flex; flex-direction:column; gap:calc(23 * var(--s));
}
/* a data e a linha de destaques ocupam a largura toda numa linha própria
   do grid: assim nunca são cobertas pelo card do formulário, qualquer que
   seja a altura do iframe */
.inscricao__foot{grid-column:1 / -1; margin-top:calc(2 * var(--s))}
.inscricao__when{white-space:nowrap; margin-top:0; font-weight:700; color:var(--azul); font-size:calc(26 * var(--s)); line-height:1.4}
.inscricao__tags{white-space:nowrap; margin-top:calc(19 * var(--s)); font-weight:700; color:var(--laranja-txt); font-size:calc(24 * var(--s))}

/* ---- card do formulário ---- */
.formcard iframe{display:block; width:100%; border:0}
.formcard{
  width:calc(633 * var(--s)); margin-left:auto; margin-top:calc(195 * var(--s));
  background:var(--vermelho) url(../img/form-card.png) center bottom/100% auto no-repeat;
  border-radius:calc(26 * var(--s));
  padding:calc(44 * var(--s)) calc(50 * var(--s)) calc(48 * var(--s));
  overflow:hidden;
}
.form{display:flex; flex-direction:column; gap:calc(18 * var(--s))}
.form__head{display:flex; justify-content:space-between; align-items:flex-start; gap:calc(24 * var(--s)); margin-bottom:calc(14 * var(--s))}
.form__title{
  font-family:var(--form); font-weight:800; color:var(--branco);
  font-size:calc(44 * var(--s)); line-height:1; margin:0;
}
.form__cityblock{width:max(160px, calc(170 * var(--s))); flex:none}
.form__cityblock label{
  display:block; font-family:var(--form); font-weight:500; color:var(--branco);
  font-size:max(11px, calc(15 * var(--s))); line-height:1.35; margin-bottom:calc(8 * var(--s));
}
.form__row--2{display:grid; grid-template-columns:1fr calc(147 * var(--s)); gap:calc(12 * var(--s))}

.form input,
.form select{
  width:100%; font-family:var(--form); font-weight:400;
  font-size:max(14px, calc(17 * var(--s))); color:#3d3d3d;
  background:var(--branco); border:0; border-radius:calc(10 * var(--s));
  padding:calc(16 * var(--s)) calc(18 * var(--s));
  appearance:none; outline:0;
}
.form__cityblock .select select{
  padding:calc(7 * var(--s)) calc(12 * var(--s));
  font-size:max(11px, calc(13 * var(--s))); border-radius:calc(6 * var(--s));
}
.form input::placeholder{color:var(--cinza)}
.form select{color:var(--cinza); cursor:pointer}
.form select.has-value{color:#3d3d3d}
.form input:focus, .form select:focus{box-shadow:0 0 0 calc(3 * var(--s)) rgba(255,164,0,.75)}
.form select:disabled{opacity:.55; cursor:not-allowed}
.select{position:relative}
.select::after{
  content:''; position:absolute; right:calc(18 * var(--s)); top:50%;
  width:calc(9 * var(--s)); height:calc(9 * var(--s));
  border-right:calc(2 * var(--s)) solid var(--cinza);
  border-bottom:calc(2 * var(--s)) solid var(--cinza);
  transform:translateY(-70%) rotate(45deg); pointer-events:none;
}
.form__cityblock .select::after{right:calc(10 * var(--s)); width:calc(6 * var(--s)); height:calc(6 * var(--s))}

.form__note{
  font-family:var(--form); color:var(--branco);
  font-size:max(11px, calc(14 * var(--s))); margin-top:calc(-4 * var(--s));
}
.btn--send{
  align-self:flex-end;
  width:calc(203 * var(--s)); height:calc(52 * var(--s));
  background:var(--laranja); color:var(--branco);
  font-family:var(--form); font-weight:800; text-transform:uppercase;
  font-size:calc(20 * var(--s)); letter-spacing:.03em;
  margin-top:calc(6 * var(--s));
}
.form__msg{
  font-family:var(--form); font-size:max(12px, calc(15 * var(--s))); color:var(--branco);
  background:rgba(0,0,0,.22); border-radius:calc(8 * var(--s));
  padding:calc(10 * var(--s)) calc(14 * var(--s));
}
.form__msg[hidden]{display:none}
.form .is-invalid{box-shadow:0 0 0 calc(3 * var(--s)) rgba(0,76,159,.85)}

/* =========================================================
   FAQ
   ========================================================= */
.faq{background:var(--vermelho); position:relative; z-index:1}
.faq .wrap{padding-block:calc(128 * var(--s)) calc(255 * var(--s))}
.faq__kicker{font-weight:700; color:var(--off); font-size:calc(34 * var(--s))}
.faq__title{
  margin-top:calc(-14 * var(--s)); color:var(--laranja-txt);
  font-size:calc(62 * var(--s)); text-transform:uppercase;
}
.faq__list{margin-top:calc(83 * var(--s))}
.faq__item{padding-bottom:calc(11 * var(--s)); margin-bottom:calc(12 * var(--s)); border-bottom:calc(5 * var(--s)) solid var(--laranja)}
.faq__item dt{font-weight:700; color:var(--off); font-size:calc(21 * var(--s)); line-height:1.3}
.faq__item dd{margin-top:0; color:var(--off); font-size:calc(21 * var(--s)); line-height:1.3}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{
  background:var(--azul); text-align:center;
  padding-block:calc(112 * var(--s)) calc(99 * var(--s));
}
.footer img{width:calc(215 * var(--s)); margin:0 auto}
.footer p{
  margin-top:calc(36 * var(--s)); color:var(--branco);
  font-family:var(--form); font-size:max(12px, calc(15 * var(--s)));
}

/* =========================================================
   RESPONSIVO — TABLET
   ========================================================= */
@media (max-width:1100px){
  :root{ --s:0.0781vw }             /* comprime a escala: 1280 de design */
  .wrap{width:min(92%, 900px)}
}

/* =========================================================
   RESPONSIVO — MOBILE
   ========================================================= */
@media (max-width:820px){
  :root{ --s: calc(100vw / 620) }   /* “design” de 620 px para telas pequenas */

  .wrap{width:min(88%, 560px); max-width:none}

  /* --- nav --- */
  .nav{padding-top:calc(28 * var(--s))}
  .nav__inner{gap:calc(30 * var(--s)); font-size:calc(22 * var(--s))}

  /* --- hero --- */
  .hero{
    aspect-ratio:auto; min-height:100svh;
    background-position:center bottom; background-size:cover;
    display:flex; align-items:center;
    padding:calc(120 * var(--s)) calc(24 * var(--s)) calc(180 * var(--s));
  }
  .hero__inner{position:static; width:100%; display:flex; flex-direction:column; align-items:center; gap:calc(34 * var(--s))}
  .hero__inner > *{position:static; transform:none}
  .hero__lockup{width:100%; max-width:calc(520 * var(--s))}
  .hero__word{width:100%}
  .hero__da{width:calc(275 * var(--s)); margin-top:calc(8 * var(--s))}
  .hero__data{justify-content:center}
  .hero__cities{text-align:center}
  .hero__selo{width:calc(150 * var(--s))}
  .btn--hero{width:calc(360 * var(--s)); height:calc(76 * var(--s)); font-size:calc(28 * var(--s))}

  /* --- domingou --- */
  .domingou{aspect-ratio:auto; padding-block:calc(90 * var(--s)) calc(100 * var(--s)); background-position:70% center}
  .domingou::before{content:''; position:absolute; inset:0; background:rgba(211,66,36,.55)}
  .domingou .wrap{height:auto}
  .domingou__col{position:static; width:100%}
  .domingou__col h2{font-size:calc(62 * var(--s))}
  .domingou__sub{font-size:calc(34 * var(--s))}
  .domingou__body{font-size:calc(24 * var(--s)); max-width:none}

  /* --- avisa --- */
  .avisa{padding-block:calc(80 * var(--s)) calc(60 * var(--s))}
  .avisa__grid{grid-template-columns:1fr; gap:calc(20 * var(--s)); min-height:0}
  .avisa__art{height:calc(560 * var(--s)); order:2; margin-inline:calc(-20 * var(--s))}
  .avisa__leaf-a{left:calc(-40 * var(--s)); top:calc(120 * var(--s)); width:calc(340 * var(--s))}
  .avisa__leaf-b{left:calc(220 * var(--s)); top:calc(180 * var(--s)); width:calc(200 * var(--s))}
  .avisa__man{left:calc(20 * var(--s)); top:calc(40 * var(--s)); width:calc(520 * var(--s))}
  .bubble{left:auto; right:calc(6 * var(--s)); top:calc(430 * var(--s)); width:calc(300 * var(--s)); height:calc(96 * var(--s)); font-size:calc(28 * var(--s))}
  .avisa__avatar{left:auto !important; right:calc(-6 * var(--s)); top:calc(390 * var(--s)) !important; width:calc(96 * var(--s))}
  .avisa__content{order:1; padding-top:0}
  .avisa__title{transform:scale(1.28); transform-origin:left top;
    margin-left:0; margin-bottom:calc(80 * var(--s))}
  .perks{max-width:none; font-size:calc(24 * var(--s))}
  .perks li{font-size:calc(24 * var(--s))}
  .avisa__leaf-orange{left:auto; right:calc(-95 * var(--s)); top:auto; bottom:calc(-80 * var(--s)); width:calc(250 * var(--s))}

  /* --- porque --- */
  .porque__inner{padding-block:calc(100 * var(--s))}
  .porque__inner h2{font-size:calc(54 * var(--s))}
  .porque__lead{font-size:calc(32 * var(--s))}
  .porque__text{font-size:calc(24 * var(--s)); max-width:none}
  .porque__selo{margin-top:calc(70 * var(--s)); width:calc(170 * var(--s))}
  .porque__leaf{left:calc(-60 * var(--s)); top:auto; bottom:calc(-60 * var(--s)); width:calc(230 * var(--s))}

  /* --- cidades --- */
  .cidades .wrap{padding-block:calc(100 * var(--s))}
  .cidades__title img{width:calc(420 * var(--s))}
  .cidades__text{font-size:calc(24 * var(--s)); max-width:none}
  .cards{grid-template-columns:1fr; gap:calc(48 * var(--s)); max-width:calc(360 * var(--s)); margin-inline:auto}
  .card h3{font-size:calc(30 * var(--s))}
  .card__place{font-size:calc(26 * var(--s))}
  .card__addr{font-size:calc(21 * var(--s))}

  /* --- inscrição --- */
  .inscricao__grid{grid-template-columns:1fr; gap:calc(60 * var(--s)); padding-block:calc(100 * var(--s))}
  .inscricao__title{font-size:calc(52 * var(--s))}
  .inscricao__body{font-size:calc(24 * var(--s))}
  .formcard{width:100%; padding:calc(40 * var(--s)) calc(34 * var(--s)) calc(44 * var(--s)); background-size:cover}
  .form__head{flex-direction:column; gap:calc(18 * var(--s))}
  .form__title{font-size:calc(46 * var(--s))}
  .form__cityblock{width:100%}
  .form__cityblock label{font-size:calc(20 * var(--s))}
  .form__cityblock .select select{font-size:calc(20 * var(--s)); padding:calc(16 * var(--s)) calc(18 * var(--s)); border-radius:calc(10 * var(--s))}
  .form__cityblock .select::after{right:calc(18 * var(--s)); width:calc(9 * var(--s)); height:calc(9 * var(--s))}
  .form input, .form select{font-size:calc(21 * var(--s))}
  .form__row--2{grid-template-columns:1fr; }
  .form__note{font-size:calc(17 * var(--s))}
  .btn--send{align-self:stretch; width:100%; height:calc(64 * var(--s)); font-size:calc(24 * var(--s))}

  /* --- faq --- */
  .faq .wrap{padding-block:calc(100 * var(--s))}
  .faq__title{font-size:calc(56 * var(--s))}
  .faq__item dt, .faq__item dd{font-size:calc(23 * var(--s))}

  /* --- footer --- */
  .footer{padding-block:calc(80 * var(--s))}
  .footer img{width:calc(190 * var(--s))}
  .footer p{font-size:calc(19 * var(--s))}
}

/* =========================================================
   ANIMAÇÕES DE ENTRADA
   A classe .js-anim só é adicionada ao <html> quando há
   IntersectionObserver e o visitante não pediu menos movimento.
   Sem ela, tudo aparece estático e visível.
   ========================================================= */
.js-anim [data-reveal]{
  opacity:0;
  will-change:opacity, transform;
}
.js-anim [data-reveal="up"]   {transform:translateY(30px)}
.js-anim [data-reveal="down"] {transform:translateY(-16px)}
.js-anim [data-reveal="left"] {transform:translateX(-44px)}
.js-anim [data-reveal="right"]{transform:translateX(44px)}
.js-anim [data-reveal="zoom"] {transform:scale(.93)}
.js-anim [data-reveal="pop"]  {transform:scale(.7)}

.js-anim [data-reveal].is-in{
  opacity:1;
  transform:none;
  transition:opacity .75s cubic-bezier(.22,.72,.28,1) var(--d, 0ms),
             transform .75s cubic-bezier(.22,.72,.28,1) var(--d, 0ms);
}
/* o "pop" chega com uma leve ultrapassagem, como uma mensagem que entra */
.js-anim [data-reveal="pop"].is-in{
  transition:opacity .5s ease var(--d, 0ms),
             transform .62s cubic-bezier(.34,1.56,.48,1) var(--d, 0ms);
}

/* ---------- movimento ambiente (só depois da entrada) ---------- */
@keyframes sway{
  0%,100%{transform:rotate(-1.6deg) translateY(0)}
  50%    {transform:rotate(1.6deg) translateY(-10px)}
}
@keyframes flutuar{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(-9px)}
}
.js-anim .leaf{animation:sway 11s ease-in-out infinite; transform-origin:50% 90%}
.js-anim .avisa__leaf-b{animation-duration:9s; animation-delay:-3s}
.js-anim .avisa__leaf-orange{animation-duration:13s; animation-delay:-6s}
.js-anim .porque__leaf{animation-duration:12s; animation-delay:-2s}
.js-anim .hero__selo.is-live,
.js-anim .porque__selo.is-live{animation:flutuar 5.5s ease-in-out infinite}

/* ---------- micro-interações ---------- */
.card img{transition:transform .5s cubic-bezier(.22,.72,.28,1), box-shadow .35s ease}
.card:hover img{transform:translateY(calc(-8 * var(--s))) scale(1.03);
  box-shadow:0 calc(18 * var(--s)) calc(38 * var(--s)) rgba(0,0,0,.28)}
.faq__item{transition:transform .3s ease}
.faq__item:hover{transform:translateX(calc(6 * var(--s)))}
.perks li{transition:transform .3s ease}
.perks li:hover{transform:translateX(calc(5 * var(--s)))}
.form input, .form select{transition:box-shadow .2s ease, transform .2s ease}
.form input:focus, .form select:focus{transform:translateY(-1px)}
.btn--send{transition:transform .2s ease, filter .2s ease, box-shadow .25s ease}
.btn--send:hover{box-shadow:0 calc(6 * var(--s)) calc(20 * var(--s)) rgba(0,0,0,.25)}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{
  outline:3px solid var(--branco); outline-offset:3px;
}
.faq a:focus-visible, .cidades a:focus-visible{outline-color:var(--azul)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none !important; animation:none !important}
  [data-reveal]{opacity:1 !important; transform:none !important}
}