/* ==========================================================================
   ANALI-Z · Webinário — Design System
   Traduzido do arquivo Paper "ANALI-Z LANDINGPAGE"
   ========================================================================== */

:root{
  --dry:#131414;
  --ink:#0F1B16;
  --deep:#22312D;
  --forest:#10433D;
  --off-white:#F2F3F4;
  --sage:#CEDDD7;
  --gray:#BEC3C3;
  --muted:#6F7C79;
  --primary:#3D927B;
  --accent:#1FA685;
  --confirm:#57DE8A;

  --font-display:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-ui:"Inter",system-ui,sans-serif;
  --font-hand:"Caveat",system-ui,cursive;

  --shell:1080px;
  --pad:64px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--dry);
  color:var(--off-white);
  font-family:var(--font-display);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-synthesis:none;
  overflow-x:hidden;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
[hidden]{display:none !important}

/* Grão de página --------------------------------------------------------- */
.grain{
  position:fixed;
  inset:0;
  background:url("../img/grain.png") repeat 0 0/256px 256px;
  opacity:.05;
  pointer-events:none;
  z-index:60;
}

/* Layout ----------------------------------------------------------------- */
.shell{width:100%;max-width:var(--shell);margin-inline:auto}

.section{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:60px var(--pad) 112px;
}
.section--top{padding-top:104px}

.head{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  max-width:820px;
  text-align:center;
}

/* Kicker manuscrito ------------------------------------------------------ */
.kicker{
  display:flex;
  flex-direction:column;
  align-items:center;
  transform:rotate(-2.5deg);
}
.kicker span{
  font-family:var(--font-hand);
  font-size:25px;
  font-weight:600;
  line-height:1;
  color:var(--accent);
}
.kicker svg{flex-shrink:0}

/* Tipografia ------------------------------------------------------------- */
.h2{
  font-size:38px;
  font-weight:700;
  letter-spacing:-.022em;
  line-height:44px;
  margin:0;
}
.h2 .accent{color:var(--accent)}

.lede{
  font-size:18px;
  line-height:28px;
  color:#F2F3F49E;
  max-width:660px;
  margin:0;
}
.note{
  font-family:var(--font-ui);
  font-size:12.5px;
  line-height:18px;
  color:#F2F3F457;
  text-align:center;
  margin:0;
}

/* ==========================================================================
   Barra de contagem regressiva (topo)
   ========================================================================== */
.topbar{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:56px;
  padding-inline:var(--pad);
  background:#131414B8;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid #3D927B2E;
  position:relative;
  z-index:20;
}
.topbar__inner{display:flex;align-items:center;gap:16px}
.topbar__label{
  font-family:var(--font-ui);
  font-size:13.5px;
  font-weight:500;
  letter-spacing:-.005em;
  color:#CEDDD7B0;
  white-space:nowrap;
}
.count{display:flex;align-items:center;gap:9px;font-family:var(--font-ui)}
.count__seg{display:flex;align-items:baseline;gap:3px}
.count__n{
  font-size:16px;
  font-weight:700;
  letter-spacing:-.02em;
  line-height:20px;
  font-variant-numeric:tabular-nums;
  color:var(--off-white);
}
.count__u{font-size:11px;font-weight:500;line-height:14px;color:#CEDDD780}
.count__sep{font-size:13px;font-weight:600;line-height:16px;color:#3D927B99}
.count__seg--live .count__n{color:var(--accent)}
.count__seg--live .count__u{color:#1FA68599}

/* Cabeçalho com logo (SLO / Obrigado) ------------------------------------ */
.masthead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  height:84px;
  padding-inline:var(--pad);
  border-bottom:1px solid #3D927B2E;
  position:relative;
  z-index:15;
}
.masthead__logo{width:200px;height:30px;opacity:.92;object-fit:contain}

/* ==========================================================================
   Pílulas e chips
   ========================================================================== */
.pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  height:40px;
  padding-inline:16px;
  border-radius:999px;
  background:var(--deep);
  box-shadow:inset 0 0 0 1px #F2F3F41A;
  font-family:var(--font-display);
  font-size:13.5px;
  font-weight:500;
  letter-spacing:-.01em;
  color:var(--sage);
  white-space:nowrap;
}
.pill--accent{box-shadow:inset 0 0 0 1px #1FA68540}
.pill__avatars{width:86px;height:22px;background:url("../img/badge-avatars.avif") no-repeat left/contain;flex-shrink:0}
.pill__dot{
  width:7px;height:7px;border-radius:999px;
  background:var(--accent);
  box-shadow:0 0 0 4px #1FA68533;
  flex-shrink:0;
}

.slot{
  display:inline-flex;
  align-items:center;
  gap:12px;
  height:44px;
  padding-inline:18px;
  border-radius:999px;
  background:var(--deep);
  box-shadow:inset 0 0 0 1px #1FA68540;
  font-family:var(--font-ui);
  white-space:nowrap;
}
.slot__label{font-size:13.5px;font-weight:500;letter-spacing:-.005em;color:var(--gray)}
.slot__arrow{font-size:13px;font-weight:600;color:#1FA68599}
.slot__value{font-size:14.5px;font-weight:700;letter-spacing:-.01em;color:var(--off-white)}
.slot__value--accent{color:var(--accent);font-variant-numeric:tabular-nums}

/* ==========================================================================
   Botões
   ========================================================================== */
.btn-shell{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px;
  border-radius:20px;
  background:#F2F3F41A;
  box-shadow:inset 0 2px 29px #CEDDD71F;
}
.btn-shell--muted{background:#F2F3F40D;box-shadow:none}

.btn{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  height:62px;
  padding-inline:40px;
  border-radius:12px;
  overflow:hidden;
  font-family:var(--font-ui);
  font-size:16px;
  font-weight:500;
  letter-spacing:.04em;
  color:var(--off-white);
  text-shadow:0 1px 1px #0F1B168C;
  white-space:nowrap;
  transition:filter .18s ease,transform .18s ease;
}
.btn--primary{
  background-image:radial-gradient(ellipse 50% 100% at 51.4% 6%,#0E3B33 0%,#1FA685 100%);
  box-shadow:
    inset 0 2px 29px #CEDDD71F,
    inset 0 -.8px .56px -.71px #CEDDD74D,
    inset 0 -2.05px 1.43px -1.42px #CEDDD733,
    inset 0 -4.1px 2.87px -2.13px #CEDDD722,
    inset 0 -7.78px 5.45px -2.83px #CEDDD714,
    inset 0 -2px 3px #F2F3F466,
    inset 0 1px 2.8px #F2F3F433,
    0 4px 4px #00000040;
}
.btn--primary:hover{filter:brightness(1.08)}
.btn--primary:active{transform:translateY(1px)}
.btn--ghost{
  background:#22312D8C;
  box-shadow:inset 0 0 0 1px #F2F3F414,inset 0 1px 2px #00000040;
  color:var(--muted);
  font-size:15px;
  letter-spacing:.03em;
  text-shadow:none;
  padding-inline:20px;
}
.btn--ghost:hover{background:#22312DCC;color:var(--gray)}

.btn__glow{
  position:absolute;
  left:50%;
  top:-42px;
  width:247px;
  height:87px;
  translate:-50%;
  border-radius:493px;
  background-image:radial-gradient(ellipse 50% 50% at 50% 50%,#1FA685 0%,#1FA68500 100%);
  mix-blend-mode:plus-lighter;
  opacity:.78;
  pointer-events:none;
}
.btn__noise{
  position:absolute;
  inset:0;
  background:url("../img/btn-noise.svg") repeat 50%/16.5px 16.5px;
  opacity:.1;
  pointer-events:none;
}
.btn__label,.btn>svg{position:relative}

.btn-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  width:56px;
  height:62px;
  border-radius:12px;
  background:#00000029;
  box-shadow:inset 0 1px 2px #00000059,inset 0 0 0 1px #F2F3F40A;
  transition:background .18s ease;
}
.btn-icon:hover{background:#00000045}

.cta-row{display:flex;align-items:center;gap:0}

.linkish{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 0 8px 2px;
  font-size:15px;
  font-weight:700;
  line-height:18px;
  color:#F2F3F49E;
}
.linkish:hover{color:var(--off-white)}

/* ==========================================================================
   Hero (landing)
   ========================================================================== */
.hero{
  position:relative;
  width:100%;
  max-width:1440px;
  margin-inline:auto;
  height:760px;
  overflow:hidden;
}
.hero__photo{
  position:absolute;
  left:44.4%;
  top:0;
  width:45.35%;
  height:100%;
  background:url("../img/hero-desktop.png") no-repeat 50%/cover;
}
.hero__fade{
  position:absolute;
  left:26%;
  top:58%;
  width:100%;
  height:340px;
  background-image:linear-gradient(179deg,#13141400 3%,#131414 50%);
  pointer-events:none;
}
.hero__content{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:26px;
  padding:0 48px 0 80px;
}
.hero__h1{
  position:relative;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  column-gap:12px;
  row-gap:1px;
  max-width:560px;
  margin:0;
  font-size:48px;
  font-weight:700;
  letter-spacing:-.02em;
  line-height:54px;
}
.hero__h1 .accent{color:var(--accent)}
.hero__sub{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:9px;
  max-width:520px;
}
.hero__sub p{margin:0}
.hero__sub .l1{font-size:17.5px;line-height:27px;color:var(--gray)}
.hero__sub .l2{font-size:17.5px;font-weight:500;letter-spacing:-.005em;line-height:27px;color:var(--off-white)}
.hero__sub .l3{font-size:15px;line-height:23px;color:var(--muted)}

/* Notificações do Asaas (push do celular) -------------------------------- */
.push{
  position:absolute;
  display:flex;
  align-items:center;
  gap:15px;
  width:404px;
  padding:15px 18px;
  border-radius:28px;
  background:#3A3A3C4D;
  border:1px solid #FFFFFF14;
  box-shadow:0 24px 60px #00000099,0 2px 6px #00000045;
  backdrop-filter:blur(30px);
  -webkit-backdrop-filter:blur(30px);
  transform-origin:0 0;
  z-index:3;
}
.push__ico{
  flex-shrink:0;
  width:56px;height:56px;
  border-radius:14px;
  background:url("../img/asaas.png") no-repeat 50%/cover;
}
.push__body{display:flex;flex:1 1 0;flex-direction:column;gap:2px;min-width:0}
.push__top{display:flex;align-items:center;gap:8px}
.push__app{flex:1 1 0;font-family:var(--font-ui);font-size:13px;line-height:17px;color:#AEAEB2}
.push__when{flex-shrink:0;font-family:var(--font-ui);font-size:13px;line-height:17px;color:#AEAEB2;white-space:nowrap}
.push__title{
  font-family:var(--font-ui);font-size:16px;font-weight:700;
  letter-spacing:-.01em;line-height:21px;color:#fff;white-space:nowrap;
}
.push__text{
  font-family:var(--font-ui);font-size:15px;letter-spacing:-.005em;
  line-height:20px;color:#EBEBF0;white-space:nowrap;
}

/* Card do fundo — menor e desfocado, cria a profundidade de campo */
.push--back{
  width:286px;
  padding:15px 18px 15px 10px;
  gap:11px;
  border-radius:19px;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  z-index:2;
}
.push--back .push__ico{width:39px;height:39px;filter:blur(3px)}
.push--back .push__title{font-size:15px;filter:blur(2px)}
.push--back .push__text{font-size:13px;filter:blur(2px)}

/* Posições no hero, medidas na prancheta do Paper */
.push-1{left:41.94%;top:29.87%;rotate:7.63deg;animation:float-a 7.5s ease-in-out infinite}
.push-2{right:3.94%;top:54.21%;rotate:-4.6deg;transform-origin:100% 0;animation:float-b 8.6s ease-in-out infinite .9s}
.push-3{left:40.83%;top:61.71%;rotate:7.37deg;animation:float-c 9.4s ease-in-out infinite .4s}

@keyframes float-a{0%,100%{translate:0 0}50%{translate:0 -11px}}
@keyframes float-b{0%,100%{translate:0 0}50%{translate:0 9px}}
@keyframes float-c{0%,100%{translate:0 0}50%{translate:0 -8px}}

/* ==========================================================================
   Honestidade
   ========================================================================== */
.receipt{
  width:100%;
  max-width:811px;
  aspect-ratio:811/544;
  border-radius:32px;
  border:1px solid #F2F3F414;
  box-shadow:inset 0 1px 1.5px #F2F3F40F,0 24px 50px #00000066;
  background:url("../img/resumo-cobrancas.jpg") no-repeat 50%/cover;
}
.statement{
  font-size:25px;
  letter-spacing:-.018em;
  line-height:38px;
  color:#F2F3F494;
  text-align:center;
  max-width:840px;
  margin:0;
}
.sig{font-size:15px;font-weight:500;letter-spacing:-.005em;color:#3D927BD9}

/* Prints dos painéis de pagamento ---------------------------------------- */
.proof{
  --h:min(909px,calc((100vw - 152px) / 1.4202));
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  width:100%;
}
.proof>*{
  height:var(--h);
  flex-shrink:0;
  border-radius:30px;
  background-size:cover;
  background-position:50%;
  transition:var(--lift);
}
.proof__a{aspect-ratio:418/909;background-image:url("../img/print-1.png")}
.proof__b{aspect-ratio:418/909;background-image:url("../img/print-2.png")}
.proof__c{aspect-ratio:456/909;background-image:url("../img/print-3.jpg")}

/* ==========================================================================
   Cards genéricos
   ========================================================================== */
.grid-2{display:flex;gap:22px;width:100%;max-width:var(--shell)}
.grid-3{display:flex;gap:22px;width:100%;max-width:var(--shell)}

.card{
  display:flex;
  flex:1 1 0;
  flex-direction:column;
  gap:22px;
  padding:34px 34px 36px;
  border-radius:18px;
  background:#F2F3F409;
  box-shadow:inset 0 1px 1.5px #F2F3F414,inset 0 -1px 2px #00000066,0 24px 40px #00000059;
}
.card--solid{background:var(--deep);box-shadow:inset 0 0 0 1px #F2F3F414,0 18px 40px #00000066}
.card__eyebrow{display:flex;align-items:center;gap:9px;font-family:var(--font-ui);font-size:14.5px;font-weight:600;letter-spacing:-.005em}
.card__eyebrow--off{color:var(--gray)}
.card__eyebrow--on{color:var(--accent)}
.card__title{font-family:var(--font-ui);font-size:23px;font-weight:700;letter-spacing:-.02em;line-height:29px;margin:0}
.card__title--dim{color:#F2F3F4F0}

.checklist{display:flex;flex-direction:column;gap:15px;margin:0;padding:0;list-style:none}
.checklist li{display:flex;align-items:flex-start;gap:12px;font-family:var(--font-ui);font-size:16px;line-height:24px}
.checklist li>span:first-child{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:18px;height:24px}
.checklist--off li{color:#F2F3F499}
.checklist--on li{color:#F2F3F4BD}

.closing{
  font-size:24px;
  font-weight:500;
  letter-spacing:-.02em;
  line-height:34px;
  color:#F2F3F4B8;
  text-align:center;
  max-width:696px;
  margin:0;
}

/* ==========================================================================
   Mecanismo
   ========================================================================== */
.step-hero{
  position:relative;
  display:flex;
  width:100%;
  max-width:var(--shell);
  border-radius:16px;
  overflow:hidden;
  background:var(--deep);
  box-shadow:inset 0 0 0 1px #F2F3F412,0 18px 40px #00000073;
}
.step-hero__body{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:16px;
  padding:44px 46px;
  min-height:270px;
  flex:1 1 0;
}
.step-hero__photo{
  position:absolute;
  left:45%;
  top:-30px;
  width:594px;
  height:354px;
  background:url("../img/step01.png") no-repeat 50%/cover;
}
.step-hero__photo::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:linear-gradient(90deg,#22312D 0%,#22312D4D 35%,#22312D00 100%);
}
.step-meta{display:flex;align-items:center;gap:9px;font-size:13px;line-height:16px}
.step-meta__n{font-weight:500;color:var(--muted)}
.step-meta__dot{width:3px;height:3px;border-radius:9px;background:var(--muted);flex-shrink:0}
.step-meta__tag{font-weight:700;color:var(--accent)}
.step-hero__title{font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:31px;max-width:400px;margin:0}
.step-hero__text{font-size:15.5px;line-height:24px;color:var(--gray);max-width:430px;margin:0}

.step{
  display:flex;
  flex:1 1 0;
  flex-direction:column;
  gap:13px;
  padding:30px 32px;
  border-radius:16px;
  background:var(--deep);
  box-shadow:inset 0 0 0 1px #F2F3F40F;
}
.step__title{font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:26px;margin:0}
.step__text{font-size:15px;line-height:23px;color:var(--gray);margin:0}

/* ==========================================================================
   Ferramentas
   ========================================================================== */
.tool-hero{
  display:flex;
  align-items:center;
  gap:26px;
  width:100%;
  max-width:var(--shell);
  padding:30px 34px;
  border-radius:18px;
  background:var(--deep);
  box-shadow:inset 0 0 0 1px #F2F3F414,0 18px 40px #00000066;
}
.tool-hero__ico{
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  width:58px;height:58px;border-radius:14px;
  background:#1FA68521;box-shadow:inset 0 0 0 1px #1FA68538;
}
.tool-hero__title{font-size:23px;font-weight:700;letter-spacing:-.02em;line-height:28px;margin:0 0 6px}
.tool-hero__text{font-size:15.5px;line-height:23px;color:#F2F3F499;max-width:620px;margin:0}

.tools-grid{display:flex;flex-wrap:wrap;gap:20px;width:100%;max-width:var(--shell)}
.tool{
  display:flex;
  flex-direction:column;
  gap:14px;
  width:calc(33.3333% - 13.3333px);
  padding:24px;
  border-radius:16px;
  background:#F2F3F408;
  box-shadow:inset 0 1px 1.5px #CEDDD70D,inset 0 -1px 2px #0000004D;
}
.tool__ico{
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  width:40px;height:40px;border-radius:11px;
  background:#1FA6851A;box-shadow:inset 0 0 0 1px #1FA68529;
}
.tool__title{font-family:var(--font-ui);font-size:16px;font-weight:600;letter-spacing:-.01em;line-height:21px;margin:0 0 5px}
.tool__text{font-family:var(--font-ui);font-size:13.5px;line-height:19px;color:#F2F3F485;margin:0}

/* ==========================================================================
   TV Wall
   ========================================================================== */
.tvwall{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  max-width:var(--shell);
  padding:20px 0 10px;
}
.tv{
  flex-shrink:0;
  padding:11px;
  border-radius:16px;
  background:var(--ink);
  box-shadow:inset 0 0 0 1px #F2F3F40D,0 30px 55px #00000099;
  width:330px;height:228px;
}
.tv--mid{
  width:400px;height:268px;padding:12px;border-radius:18px;
  box-shadow:inset 0 0 0 1px #F2F3F40F,0 40px 70px #000000B3;
  margin-inline:-14px;
  z-index:2;
}
.tv--l{transform:rotate(-5deg)}
.tv--r{transform:rotate(5deg)}
.tv__screen{
  position:relative;
  width:100%;height:100%;
  border-radius:7px;overflow:hidden;
  background-size:cover;background-position:50%;
}
.tv--mid .tv__screen{border-radius:8px}
/* Vinheta interna — no Paper ela só existe no iPad e no mobile */
.tv__screen::after{content:"";position:absolute;inset:0}

.legend{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:22px}
.legend__item{display:flex;align-items:center;gap:8px;font-family:var(--font-ui);font-size:13px;line-height:16px;color:#F2F3F48C}
.legend__sw{width:11px;height:11px;border-radius:3px;flex-shrink:0}

/* ==========================================================================
   Datas
   ========================================================================== */
.datecard{
  display:flex;flex:1 1 0;flex-direction:column;gap:18px;
  padding:30px;border-radius:18px;background:#F2F3F409;
  box-shadow:inset 0 1px 1.5px #F2F3F412,inset 0 -1px 2px #00000066,0 24px 40px #0000004D;
  font-family:var(--font-ui);
}
.datecard__day{font-size:32px;font-weight:800;letter-spacing:-.03em;line-height:34px;color:var(--accent)}
.datecard__when{font-size:13px;font-weight:500;line-height:16px;color:#F2F3F473;margin-top:3px}
.datecard__rule{height:1px;width:100%;background:#F2F3F414}
.datecard__title{font-size:19px;font-weight:700;letter-spacing:-.015em;line-height:24px;margin:0 0 8px}
.datecard__text{font-size:15px;line-height:22px;color:#F2F3F494;margin:0}

/* ==========================================================================
   Prêmio
   ========================================================================== */
.stage{
  position:relative;
  width:100%;max-width:1000px;height:400px;
  border-radius:16px;overflow:hidden;opacity:.75;
  background:url("../img/prize-stage.png") no-repeat 50% 30%/cover;
}
.stage__fade{position:absolute;inset:auto 0 0 0;height:55%;background-image:linear-gradient(0deg,#131414 8%,#13141400 100%)}
.stage__cap{position:absolute;left:36px;bottom:28px;display:flex;flex-direction:column;gap:6px}
.stage__eyebrow{font-size:13px;font-weight:700;line-height:16px;color:var(--accent)}
.stage__title{font-size:23px;font-weight:700;letter-spacing:-.02em;line-height:29px;max-width:480px;color:#fff;margin:0}

.prize{
  display:flex;flex-direction:column;align-items:center;gap:26px;
  width:100%;max-width:880px;padding:52px 48px;
  border-radius:24px;background:#1C4B41;
  box-shadow:inset 0 0 0 1px #F2F3F414,0 18px 40px #00000066;
  text-align:center;
}
.prize__eyebrow{font-family:var(--font-ui);font-size:15px;font-weight:500;letter-spacing:-.005em;color:#CEDDD7E6}
.prize__title{font-size:62px;font-weight:700;letter-spacing:-.03em;line-height:64px;color:var(--accent);margin:0}
.prize__list{display:flex;flex-direction:column;gap:14px;width:100%;max-width:600px;margin:0;padding:0;list-style:none;text-align:left}
.prize__list li{display:flex;align-items:flex-start;gap:12px;font-family:var(--font-ui);font-size:16.5px;line-height:25px;color:#F2F3F4D1}
.prize__list li>span:first-child{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:20px;height:25px}
.prize__foot{font-family:var(--font-ui);font-size:12.5px;line-height:18px;color:#F2F3F45C;max-width:640px;margin:0}

/* ==========================================================================
   Rodapé
   ========================================================================== */
.footer{
  width:100%;
  display:flex;flex-direction:column;align-items:center;gap:26px;
  padding:56px var(--pad) 64px;
  border-top:1px solid #F2F3F40F;
}
.footer__logo{width:180px;height:27px;opacity:.7;object-fit:contain}
.footer__legal{
  font-family:var(--font-ui);font-size:12.5px;line-height:19px;
  color:#F2F3F457;text-align:center;max-width:980px;margin:0;
}
.footer__links{display:flex;gap:18px;font-family:var(--font-ui);font-size:12.5px;color:#F2F3F473}
.footer__links a:hover{color:var(--sage)}

/* ==========================================================================
   Player de vídeo (SLO / Obrigado)
   ========================================================================== */
.player{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  width:100%;max-width:var(--shell);aspect-ratio:16/9;
  border-radius:20px;overflow:hidden;
  background:var(--ink);
  box-shadow:inset 0 0 0 1px #F2F3F414,0 0 90px #1FA68526,0 34px 80px #00000080;
  cursor:pointer;
}
.player__slot{position:absolute;inset:0;background-image:radial-gradient(ellipse 60% 60% at 50% 45%,#16302A 0%,#0F1B16 100%)}
.player__play{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  width:92px;height:92px;border-radius:50%;
  background-image:radial-gradient(ellipse 50% 100% at 51.4% 6%,#0E3B33 0%,#1FA685 100%);
  box-shadow:inset 0 -2px 3px #F2F3F466,0 8px 30px #00000080;
  transition:transform .2s ease;
}
.player:hover .player__play{transform:scale(1.06)}
.player__chip{
  position:absolute;left:24px;top:24px;
  display:flex;align-items:center;gap:9px;
  height:30px;padding-inline:14px;border-radius:999px;
  background:#22312DE6;box-shadow:inset 0 0 0 1px #1FA68533;
  font-family:var(--font-ui);font-size:12.5px;font-weight:600;color:var(--sage);
}
.player__scrub{
  position:absolute;left:22px;right:22px;bottom:18px;
  display:flex;align-items:center;gap:14px;
}
.player__bar{flex:1 1 0;height:4px;border-radius:999px;background:#F2F3F41F;overflow:hidden}
.player__bar i{display:block;width:18%;height:100%;background:var(--accent);border-radius:999px}
.player__time{font-family:var(--font-ui);font-size:12.5px;font-weight:600;color:#F2F3F4A8;font-variant-numeric:tabular-nums}
.player__micro{font-family:var(--font-ui);font-size:13.5px;color:#F2F3F46B;text-align:center;margin:0}

/* ==========================================================================
   Escolha (SLO)
   ========================================================================== */
.choice{display:flex;align-items:stretch;gap:16px;width:100%;max-width:var(--shell)}
.choice>.btn-shell{flex:1 1 0}
.choice .btn{flex:1 1 0;padding-inline:24px}

/* ==========================================================================
   Cards de passo (Obrigado)
   ========================================================================== */
.steps{display:flex;gap:22px;width:100%;max-width:var(--shell)}
.stepcard{
  display:flex;flex:1 1 0;flex-direction:column;gap:20px;
  padding:32px;border-radius:18px;background:var(--deep);
  box-shadow:inset 0 0 0 1px #F2F3F414,0 18px 40px #00000066;
}
.stepcard--hi{background:#1B332C;box-shadow:inset 0 0 0 1px #1FA68533,0 18px 40px #00000066}
.stepcard__head{display:flex;align-items:center;gap:12px;width:100%}
.stepcard__n{
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  width:34px;height:34px;border-radius:10px;
  background:#F2F3F40F;box-shadow:inset 0 0 0 1px #F2F3F41F;
  font-family:var(--font-ui);font-size:14px;font-weight:700;letter-spacing:-.01em;color:var(--gray);
}
.stepcard--hi .stepcard__n{background:#1FA6851F;box-shadow:inset 0 0 0 1px #1FA68540;color:var(--accent)}
.stepcard__kick{
  flex:1 1 0;
  font-family:var(--font-ui);font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--muted);
}
.stepcard--hi .stepcard__kick{color:var(--accent)}
.stepcard__ico{
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  width:52px;height:52px;border-radius:15px;
  background:#1FA6851F;box-shadow:inset 0 0 0 1px #1FA68540;
}
.stepcard__title{font-family:var(--font-ui);font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:28px;margin:0 0 10px}
.stepcard__text{font-size:15.5px;line-height:24px;color:#F2F3F4A8;margin:0}
.stepcard__btn{
  display:flex;align-items:center;justify-content:center;
  height:54px;width:100%;margin-top:auto;border-radius:12px;
  font-family:var(--font-ui);font-size:14.5px;font-weight:600;letter-spacing:.03em;
}
.stepcard__btn--solid{
  background-image:radial-gradient(ellipse 50% 100% at 51.4% 6%,#0E3B33 0%,#1FA685 100%);
  box-shadow:inset 0 -.8px .56px -.71px #CEDDD74D,inset 0 -4.1px 2.87px -2.13px #CEDDD722,inset 0 -2px 3px #F2F3F466,0 4px 4px #00000040;
  color:var(--off-white);text-shadow:0 1px 1px #0F1B168C;
}
.stepcard__btn--solid:hover{filter:brightness(1.08)}
.stepcard__btn--outline{background:#F2F3F40A;box-shadow:inset 0 0 0 1px #F2F3F41F;color:var(--off-white)}
.stepcard__btn--outline:hover{background:#F2F3F414}

.detail-row{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:0;width:100%;max-width:var(--shell);
}
.detail{display:flex;flex-direction:column;gap:5px;padding-inline:34px;text-align:center}
.detail__k{font-family:var(--font-ui);font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--muted)}
.detail__v{font-family:var(--font-ui);font-size:16px;font-weight:600;color:var(--off-white)}
.detail-sep{width:1px;height:44px;background:#F2F3F414;flex-shrink:0}

/* ==========================================================================
   Quiz
   ========================================================================== */
.quiz-page{
  position:relative;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  overflow-x:hidden;
}
.quiz-glow{
  position:absolute;left:50%;top:-40px;translate:-50%;
  width:1100px;height:520px;pointer-events:none;
  background-image:radial-gradient(ellipse 60% 100% at 50% 0%,#1FA6851A 0%,#13141400 70%);
}
.quiz-segs{position:relative;z-index:3;display:flex;gap:6px;width:100%}
.quiz-segs i{flex:1 1 0;height:5px;background:var(--deep);transition:background .4s ease,box-shadow .4s ease}
.quiz-segs i.is-on{
  background-image:linear-gradient(90deg,#22312D 0%,#1FA685 100%);
  box-shadow:0 0 10px #1FA68599;
}
.quiz-top{
  position:relative;z-index:3;
  display:flex;align-items:center;justify-content:space-between;
  padding:32px var(--pad) 0;
}
.quiz-top img{width:200px;height:30px;opacity:.92;object-fit:contain}
.quiz-top span{font-family:var(--font-ui);font-size:14px;letter-spacing:.02em;color:#F2F3F473}

.quiz{
  position:relative;z-index:3;
  flex:1 1 auto;
  display:flex;flex-direction:column;justify-content:center;
  align-items:flex-start;
  gap:22px;
  width:100%;max-width:760px;
  margin-inline:auto;
  padding:48px var(--pad) 72px;
}
.quiz__kicker{
  font-family:var(--font-hand);font-size:34px;font-weight:600;line-height:1;
  color:var(--accent);transform:rotate(-2.5deg);
}
.quiz__q{font-size:38px;font-weight:700;letter-spacing:-.02em;line-height:1.16;margin:0;max-width:740px}
.quiz__sub{font-size:17px;line-height:1.5;color:var(--gray);margin:0;max-width:680px}
.quiz__opts{display:flex;flex-direction:column;gap:11px;width:100%;margin:4px 0 0;padding:0;list-style:none}
.opt{
  display:flex;align-items:center;gap:16px;width:100%;
  padding:19px 26px;border-radius:13px;text-align:left;
  background:var(--deep);
  box-shadow:inset 0 0 0 1px #F2F3F412;
  transition:background .16s ease,box-shadow .16s ease;
}
.opt:hover{box-shadow:inset 0 0 0 1px #1FA68547}
.opt.is-picked{background:#1FA68514;box-shadow:inset 0 0 0 1.5px var(--accent)}
.opt__key{
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  width:30px;height:30px;border-radius:8px;
  background:#F2F3F40F;box-shadow:inset 0 0 0 1px #F2F3F41F;
  font-family:var(--font-ui);font-size:13px;font-weight:700;color:var(--gray);
}
.opt.is-picked .opt__key{background:var(--accent);box-shadow:none;color:var(--ink)}
.opt__label{flex:1 1 0;font-size:20px;font-weight:500;line-height:24px;color:var(--sage)}
.opt.is-picked .opt__label{color:var(--off-white)}

.quiz__foot{display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:10px;gap:16px}

/* Quiz dentro de um pop-up (usado no SLO) -------------------------------- */
.quiz-modal{padding:24px}
.quiz-card{
  position:relative;
  margin:auto;
  width:100%;max-width:820px;
  border-radius:24px;
  overflow:hidden;
  background:var(--dry);
  border:1px solid #F2F3F417;
  box-shadow:0 40px 90px #00000099;
  padding-bottom:34px;
}
.quiz-card::before{
  content:"";position:absolute;left:50%;top:-60px;translate:-50%;
  width:640px;height:340px;pointer-events:none;
  background-image:radial-gradient(ellipse 60% 100% at 50% 0%,#1FA6851A 0%,#13141400 70%);
}
.quiz-card>*{position:relative}
.quiz-card__top{
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 30px 0;gap:16px;
}
.quiz-card__top img{width:150px;height:23px;opacity:.92;object-fit:contain}
.quiz-card__top span{font-family:var(--font-ui);font-size:13px;letter-spacing:.02em;color:#F2F3F473}
.quiz-card .quiz{
  flex:0 1 auto;
  max-width:none;
  margin:0;
  padding:26px 30px 0;
  gap:18px;
}
.quiz-card .quiz__q{font-size:31px}
.quiz-card .quiz__kicker{font-size:28px}
.quiz-card .modal__close{top:22px;right:22px}
.quiz__back{font-size:16px;font-weight:500;line-height:20px;color:#F2F3F466}
.quiz__back:hover{color:var(--sage)}

.btn--quiz{
  height:62px;padding-inline:40px;
  background-image:radial-gradient(circle farthest-corner at 50% 50%,#2FBE9A 0%,#1FA685 58%,#17836A 100%);
  box-shadow:
    inset 0 1.5px .5px #CEDDD78C,
    inset 0 -2px 2px -1px #0E3B3380,
    inset 0 -8px 14px -7px #1FA68599,
    inset 0 1px 2.8px #F2F3F42E,
    0 4px 14px #00000066,
    0 0 0 1px #1FA68529;
  transition:background-image .28s ease,box-shadow .28s ease,filter .18s ease;
}
.btn--quiz:hover{filter:brightness(1.035)}
.btn--quiz:disabled{cursor:default;filter:none}
.btn--quiz.is-confirmed{
  background-image:radial-gradient(circle farthest-corner at 50% 50%,#7BE9A6 0%,#57DE8A 58%,#33C46A 100%);
  box-shadow:inset 0 1.5px .5px #EAFBF0,inset 0 -2px 2px -1px #1B7A45,0 0 0 1px #57DE8A66,0 0 26px #57DE8A5C;
  animation:pulse .62s ease;
}
@keyframes pulse{0%{transform:scale(1)}38%{transform:scale(1.035)}100%{transform:scale(1)}}

/* Ao confirmar, a seta do quadrado ao lado vira um check verde ------------ */
.btn-icon .ico-check{display:none}
.btn--quiz.is-confirmed+.btn-icon .ico-arrow{display:none}
.btn--quiz.is-confirmed+.btn-icon .ico-check{display:block;animation:check-pop .42s cubic-bezier(.22,1.4,.36,1) both}
.btn--quiz.is-confirmed+.btn-icon{
  background:#57DE8A1A;
  box-shadow:inset 0 1px 2px #00000040,inset 0 0 0 1px #57DE8A5C,0 0 22px #57DE8A38;
}
@keyframes check-pop{from{opacity:0;scale:.55}to{opacity:1;scale:1}}

/* ==========================================================================
   Opt-in pop-up
   ========================================================================== */
.modal{
  position:fixed;inset:0;z-index:90;
  display:flex;align-items:flex-start;justify-content:center;
  padding:24px;
  background:#0A0A0AF0;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.modal::before{
  content:"";position:fixed;left:50%;top:50%;translate:-50% -50%;
  width:600px;height:460px;border-radius:50%;pointer-events:none;
  background-image:radial-gradient(circle at 50% 50%,#1FA68529 0%,#1FA68500 62%);
}
/* margin:auto centraliza quando cabe e deixa rolar quando não cabe */
.modal__card{
  position:relative;
  margin:auto;
  display:flex;flex-direction:column;align-items:center;gap:16px;
  width:100%;max-width:432px;
  padding:30px 30px 26px;
  border-radius:24px;
  background:var(--dry);
  border:1px solid #F2F3F417;
  box-shadow:0 40px 90px #00000099;
  overflow:hidden;
  text-align:center;
}
.modal__grain{
  position:absolute;inset:0;border-radius:24px;pointer-events:none;
  background:url("../img/grain.png") repeat 50%/256px 256px;
  opacity:.05;
}
.modal__card>*{position:relative}
.modal__count{display:flex;align-items:center;justify-content:center;gap:10px}
.modal__count-label{font-size:9.5px;font-weight:700;letter-spacing:.16em;line-height:12px;color:#F2F3F466}
.modal__count .count{gap:9px}
.modal__count .count__n{font-family:var(--font-display);font-size:12px;font-weight:700;line-height:16px}
.modal__count .count__u{font-family:var(--font-display);font-size:9px;line-height:12px;color:#F2F3F466}
.modal__count .count__sep{display:none}
.modal__count .count__seg{gap:1px}
.modal__head{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;padding-top:2px}
.modal__kicker{font-family:var(--font-hand);font-size:23px;font-weight:700;line-height:1;color:var(--accent);transform:rotate(-3deg)}
.modal__title{
  font-size:27px;font-weight:700;letter-spacing:-.02em;line-height:1.16;
  max-width:370px;margin:0;
}
.modal__title .accent{color:var(--accent)}
.modal__text{font-size:13.5px;line-height:1.55;color:#F2F3F48C;max-width:322px;margin:0}
.modal__close{
  position:absolute;right:16px;top:16px;z-index:4;
  display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;background:#F2F3F40D;color:#F2F3F480;
}
.modal__close:hover{background:#F2F3F41F}

.form{display:flex;flex-direction:column;gap:10px;width:100%;padding-top:2px}
.form input{
  height:50px;padding-inline:17px;border-radius:13px;
  background:var(--ink);border:1px solid #F2F3F41A;
  font-family:var(--font-display);font-size:14.5px;color:var(--off-white);
  outline:none;transition:border-color .18s ease,box-shadow .18s ease;
  width:100%;
}
.form input::placeholder{color:#F2F3F457}
.form input:focus{border-color:#1FA6858C;box-shadow:0 0 0 3px #1FA68524}
.form .btn-shell{width:100%;margin-top:2px}
.form .btn{flex:1 1 0;min-width:0;height:62px;padding-inline:20px;font-size:13px}
.form .btn-icon{width:44px;height:62px}
.form input.is-invalid{border-color:#E5484D;box-shadow:0 0 0 3px #E5484D2E}
.form__error{margin:-4px 2px 0;font-size:12px;line-height:16px;color:#FF8A8D;text-align:left}
.form__note{font-size:11px;line-height:14px;color:#F2F3F466;margin:0}
.modal__foot{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;padding-top:3px}
.modal__dismiss{font-size:12.5px;line-height:16px;color:#F2F3F473}
.modal__dismiss:hover{color:var(--sage)}

/* ==========================================================================
   Pré-loader
   ========================================================================== */
.preloader{
  position:fixed;inset:0;z-index:95;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--dry);
  text-align:center;padding:32px;
  animation:pl-in .35s ease both;
}
@keyframes pl-in{from{opacity:0}to{opacity:1}}
.preloader::before{
  content:"";position:absolute;left:50%;top:44%;translate:-50% -50%;
  width:360px;height:360px;border-radius:50%;pointer-events:none;
  background-image:radial-gradient(circle at 50% 50%,#1FA68533 0%,#1FA68500 60%);
}
.preloader__grain{
  position:absolute;inset:0;pointer-events:none;
  background:url("../img/grain.png") repeat 50%/256px 256px;opacity:.05;
}
.preloader__inner{
  position:relative;
  display:flex;flex-direction:column;align-items:center;gap:30px;
  width:100%;max-width:560px;
}

.pl-disc{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  width:168px;height:168px;flex-shrink:0;
}
.pl-disc__face{
  position:absolute;
  width:132px;height:132px;border-radius:50%;
  overflow:hidden;
  background-image:linear-gradient(225deg,#1FA685 0%,#22312D 50%,#0F1B16 100%);
  box-shadow:inset 0 0 0 1px #F2F3F41A;
}
.pl-disc__face img{width:100%;height:100%;object-fit:cover}
.pl-disc__ring{position:absolute;inset:0}
.pl-disc__ring circle{fill:none;stroke-width:4;stroke-linecap:round}
.pl-disc__ring .bg{stroke:#F2F3F414}
.pl-disc__ring .fg{
  /* o stroke vem do atributo, pra cada template ter seu próprio gradiente */
  stroke-dasharray:490;stroke-dashoffset:490;
  transform:rotate(-90deg);transform-origin:50% 50%;
  animation:pl-ring var(--pl-dur,2.8s) cubic-bezier(.35,0,.15,1) forwards;
}
@keyframes pl-ring{to{stroke-dashoffset:60}}

.pl-copy{display:flex;flex-direction:column;align-items:center;gap:9px;width:100%}
.pl-kicker{font-family:var(--font-hand);font-size:23px;font-weight:700;line-height:1;color:var(--accent);transform:rotate(-3deg)}
.pl-title{font-size:29px;font-weight:700;letter-spacing:-.02em;line-height:1.15;max-width:380px;margin:0}
.pl-title .accent{color:var(--accent)}
.pl-text{font-size:14px;line-height:1.55;color:#F2F3F48C;max-width:430px;margin:0;padding-top:2px}

/* Rodapé do v3 — pontinho pulsante */
.pl-dot-line{display:flex;align-items:center;gap:8px}
.pl-dot-line i{
  width:6px;height:6px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 4px #1FA68533;flex-shrink:0;
  animation:pl-pulse 1.6s ease-in-out infinite;
}
@keyframes pl-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.pl-dot-line span{font-size:12px;font-weight:500;letter-spacing:.02em;line-height:16px;color:#F2F3F473}

/* Checklist do Mix ------------------------------------------------------- */
.pl-list{
  display:flex;flex-direction:column;
  width:100%;max-width:392px;
  padding:6px 8px;
  border-radius:18px;
  background:var(--deep);
  border:1px solid #F2F3F414;
  box-shadow:0 20px 50px #0000006B;
}
.pl-list__row{
  display:flex;align-items:center;gap:13px;
  padding:13px 12px;
  border-bottom:1px solid #F2F3F40D;
  opacity:0;
  animation:pl-row .5s var(--ease,cubic-bezier(.22,1,.36,1)) forwards;
}
.pl-list__row:last-child{border-bottom:0}
@keyframes pl-row{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.pl-list__row:nth-child(1){animation-delay:.15s}
.pl-list__row:nth-child(2){animation-delay:.75s}
.pl-list__row:nth-child(3){animation-delay:1.35s}
.pl-list__row:nth-child(4){animation-delay:1.95s}
.pl-list__ok{
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  width:24px;height:24px;border-radius:50%;
  background-image:linear-gradient(165deg,#7BE9A6 0%,#57DE8A 100%);
}
.pl-list__spin{
  flex-shrink:0;width:24px;height:24px;border-radius:50%;
  border:2px solid #1FA68540;border-top-color:var(--accent);
  animation:pl-spin .85s linear infinite;
}
@keyframes pl-spin{to{transform:rotate(360deg)}}
.pl-list__row span{font-size:14px;font-weight:500;line-height:18px;color:#F2F3F4D1;text-align:left}
.pl-list__row--live span{font-weight:700;color:var(--off-white)}

/* ==========================================================================
   Responsivo — iPad (≤1023px)
   ========================================================================== */
@media (max-width:1023px){
  :root{--pad:40px;--shell:640px}

  .h2{font-size:32px;line-height:38px}
  .hero{height:auto;min-height:0;display:flex;flex-direction:column;padding-bottom:56px}
  .hero__photo{position:relative;left:auto;top:auto;width:344px;height:394px;margin:18px auto 0;background-image:url("../img/hero-ipad.png")}
  .hero__fade{display:none}
  .hero__content{
    position:static;
    align-items:center;
    text-align:center;
    padding:0 var(--pad);
    margin-top:-12px;
    gap:24px;
  }
  .hero__h1{justify-content:center;font-size:40px;line-height:46px;max-width:640px}
  .hero__sub{align-items:center;max-width:560px}
  .hero__sub p{text-align:center}

  .push{width:max-content;gap:13px;padding:13px 15px;border-radius:19px}
  .push__ico{width:48px;height:48px;border-radius:12px}
  .push__app,.push__when{font-size:10.5px;line-height:15px}
  .push__title{font-size:13px;line-height:18px}
  .push__text{font-size:12px;line-height:17px}

  .push--back{padding:13px 15px 13px 8px;gap:9px;border-radius:16px}
  .push--back .push__ico{width:33px;height:33px}
  .push--back .push__title{font-size:11px}
  .push--back .push__text{font-size:9px}

  .push-1{left:93px;top:98px;right:auto;rotate:7.63deg}
  .push-2{right:31px;left:auto;top:225px;rotate:-4.6deg}
  .push-3{left:74px;right:auto;top:262px;rotate:5.96deg}

  .statement{font-size:21px;line-height:32px}
  .proof{--h:460px;gap:12px}
  .section--tools{display:none}
  .grid-2,.grid-3,.steps,.choice{flex-direction:column}
  .card,.step,.datecard,.stepcard{width:100%}
  .choice>.btn-shell{width:100%}
  .closing{font-size:21px;line-height:31px}

  .step-hero{flex-direction:column}
  .step-hero__photo{position:relative;left:auto;top:auto;width:100%;height:230px;order:-1}
  .step-hero__photo::after{background-image:linear-gradient(0deg,#22312D 0%,#22312D4D 45%,#22312D00 100%)}
  .step-hero__body{padding:32px 34px 36px}
  .step-hero__title,.step-hero__text{max-width:none}

  .tool{width:calc(50% - 10px)}

  /* Continuam lado a lado, como nas pranchetas */
  .tvwall{flex-direction:row;gap:0;padding:20px 0 10px}
  .tv{width:205px;height:142px;padding:8px;border-radius:12px}
  .tv .tv__screen{border-radius:5px}
  .tv--mid{width:248px;height:166px;padding:9px;border-radius:14px;margin-inline:-10px}
  .tv--mid .tv__screen{border-radius:6px}
  .tv__screen::after{box-shadow:inset 0 0 50px #000000B3}
  .tv--mid .tv__screen::after{box-shadow:inset 0 0 60px #000000A6}

  .prize{padding:44px 32px}
  .prize__title{font-size:46px;line-height:52px}

  .stage{height:300px}

  .masthead{height:84px}
  .quiz__q{font-size:32px}
  .quiz-card .quiz__q{font-size:27px}
  .quiz-card .quiz__kicker{font-size:25px}
  .quiz-card .quiz{padding:22px 26px 0}
  .quiz-card__top{padding:20px 26px 0}
  .quiz__kicker{font-size:30px}
  .quiz-top img{width:200px;height:30px}

  .modal{padding:20px}
  .pl-title{font-size:26px}
  .pl-disc{width:150px;height:150px}
  .pl-disc__face{width:118px;height:118px}

  .detail-row{gap:0}
  .detail{padding-inline:22px}
}

/* ==========================================================================
   Responsivo — Mobile (≤767px)
   ========================================================================== */
@media (max-width:767px){
  :root{--pad:28px;--shell:334px}

  .section{padding:44px var(--pad) 76px}
  .h2{font-size:27px;line-height:34px}
  .lede{font-size:16px;line-height:25px}

  .topbar{height:48px;padding-inline:20px}
  .topbar__label{font-size:11.5px;letter-spacing:0}
  .topbar__inner{gap:12px}
  .count{gap:7px}
  .count__n{font-size:14px;line-height:18px}
  .count__u{font-size:10px}
  .count__sep{font-size:11.5px}

  .masthead{height:72px;justify-content:center;padding-inline:20px}
  .masthead .pill{display:none}
  /* No SLO e no Obrigado a barra some inteira: sem a logo e sem a pílula
     de status ela ficaria só um traço vazio. As páginas legais mantêm a
     logo, que lá é o caminho de volta pra home. */
  .masthead--funnel{display:none}

  .hero{padding-bottom:40px}
  .hero__photo{
    width:100%;height:290px;margin:0;
    background-image:url("../img/hero-mobile.png");
    /* A foto é 1536x2048 numa moldura de 390x290: com cover sobram ~230px
       de altura. Em 25% o corte comia o topo da cabeça; em 8% sobra
       espaço acima do cabelo. */
    background-position:50% 8%;
    -webkit-mask-image:radial-gradient(70% 84% at 50% 42%,#000 36%,transparent 84%);
    mask-image:radial-gradient(70% 84% at 50% 42%,#000 36%,transparent 84%);
  }
  .hero__content{margin-top:-26px;gap:18px}
  .hero__h1{font-size:29px;line-height:35px}
  .hero__sub .l1{font-size:15px;line-height:23px}
  .hero__sub .l2{font-size:15.5px;line-height:24px}
  .hero__sub .l3{font-size:13.5px;line-height:20px}
  .pill{height:36px;font-size:12px;padding-inline:12px;gap:8px}
  .pill__avatars{width:70px;height:18px}
  .slot{height:40px;padding-inline:14px;gap:9px}
  .slot__label{font-size:12px}
  .slot__value{font-size:13px}

  /* Menores e mais acima: sem o badge dos alunos o conteúdo do hero subiu,
     e nas posições antigas elas encostavam na headline. */
  .push{width:max-content;gap:8px;padding:8px 11px 8px 8px;border-radius:10px}
  .push__ico{width:28px;height:28px;border-radius:9px}
  .push__app,.push__when{font-size:5.5px;line-height:11px}
  .push__title{font-size:8px;line-height:13px}
  .push__text{font-size:7px;line-height:12px}

  /* No mobile o card do fundo sai de cena */
  .push--back{display:none}

  .push-2{right:12px;left:auto;top:196px;rotate:-3deg}

  /* A da esquerda recua: menor, desfocada e com a borda direita sumindo
     na silhueta do rapaz, como se passasse por trás dele. */
  .push-3{
    left:30px;right:auto;top:132px;rotate:4.5deg;
    z-index:1;
    padding:7px 9px 7px 6px;
    border-radius:9px;
    gap:7px;
    opacity:.9;
    filter:blur(.6px);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 58%,transparent 97%);
    mask-image:linear-gradient(90deg,#000 0%,#000 58%,transparent 97%);
  }
  .push-3 .push__ico{width:24px;height:24px;border-radius:8px}
  .push-3 .push__app,.push-3 .push__when{font-size:5px;line-height:9px}
  .push-3 .push__title{font-size:7px;line-height:11px}
  .push-3 .push__text{font-size:6px;line-height:10px}

  .receipt{border-radius:22px}
  .proof{--h:470px;flex-direction:column;gap:12px}
  .proof>*{border-radius:24px}
  .statement{font-size:18px;line-height:28px}
  .card{padding:26px 24px 28px}
  .closing{font-size:18px;line-height:27px}

  .step-hero__photo{height:210px}
  .step-hero__body{padding:26px 24px 30px}
  .step-hero__title{font-size:22px;line-height:27px}
  .step{padding:24px}

  .tool{width:100%}
  .tool-hero{flex-direction:column;align-items:flex-start;gap:18px;padding:26px 24px}
  .tool-hero__title{font-size:20px;line-height:25px}

  .tv{width:108px;height:76px;padding:5px;border-radius:8px}
  .tv .tv__screen{border-radius:4px}
  .tv--mid{width:138px;height:94px;padding:6px;border-radius:9px;margin-inline:-6px}
  .tv--mid .tv__screen{border-radius:4px}
  .tv__screen::after{box-shadow:inset 0 0 30px #000000B3}
  .tv--mid .tv__screen::after{box-shadow:inset 0 0 36px #000000A6}

  .prize{padding:34px 22px;gap:20px;border-radius:20px}
  .prize__title{font-size:34px;line-height:40px}
  .prize__list li{font-size:15px;line-height:23px}

  .stage{height:230px}
  .stage__cap{left:22px;bottom:22px}
  .stage__title{font-size:18px;line-height:24px}

  .btn{height:54px;padding-inline:18px;font-size:13px;gap:0}
  .btn--ghost{font-size:12px;padding-inline:14px}
  .btn-shell{padding:7px;border-radius:17px}
  .btn-icon{width:44px;height:54px}
  .choice{gap:10px}
  .choice .btn{padding-inline:14px}
  .choice .btn>svg{display:none}

  .quiz{gap:16px;padding:32px var(--pad) 56px}
  .quiz__q{font-size:25px}
  .quiz-modal{padding:14px}
  .quiz-card{border-radius:18px;padding-bottom:26px}
  .quiz-card .quiz__q{font-size:23px}
  .quiz-card .quiz__kicker{font-size:22px}
  .quiz-card .quiz{padding:18px 18px 0;gap:14px}
  .quiz-card__top{padding:16px 18px 0}
  .quiz-card__top img{width:120px;height:18px}
  .quiz-card__top span{font-size:11px}
  .quiz-card .modal__close{top:16px;right:16px}
  .quiz__sub{font-size:15px}
  .quiz__kicker{font-size:26px}
  .quiz-top{padding-top:22px}
  .quiz-top img{width:150px;height:23px}
  .quiz-top span{font-size:12px}
  .opt{padding:15px 16px;gap:12px}
  .opt__label{font-size:16px;line-height:22px}
  .quiz__foot{flex-direction:column-reverse;align-items:stretch;gap:14px}
  .quiz__foot .btn-shell{width:100%}
  .quiz__foot .btn{flex:1 1 0}
  .quiz__back{text-align:center}

  .modal{padding:16px}
  .modal__card{padding:26px 20px 22px;gap:14px;border-radius:20px}
  .modal__title{font-size:23px}
  .modal__text{font-size:13px}
  .form input{height:48px;font-size:14px}
  .form .btn{height:56px;font-size:12px}
  .form .btn-icon{width:40px;height:56px}

  .preloader{padding:24px}
  .preloader__inner{gap:24px}
  .pl-title{font-size:22px}
  .pl-text{font-size:13px}
  .pl-kicker{font-size:20px}
  .pl-disc{width:132px;height:132px}
  .pl-disc__face{width:104px;height:104px}
  .pl-list__row{padding:11px 10px;gap:11px}
  .pl-list__row span{font-size:12.5px}

  .detail-row{flex-direction:column;gap:0}
  .detail{padding:14px 0;width:100%}
  .detail-sep{width:100%;height:1px}

  .footer{padding:40px var(--pad) 48px}
}

/* ==========================================================================
   Reveal ao rolar
   Usa a propriedade `translate` (e não `transform`) pra não brigar com as
   rotações das TVs nem com o translateY do hover.
   ========================================================================== */
html.rv :is(
  .head>*, .grid-2>*, .grid-3>*, .steps>*, .tools-grid>*, .tvwall>*,
  .choice>*, .legend>*, .footer>*, .prize>*, .detail-row>*, .stepcard>*,
  .receipt, .statement, .sig, .closing, .note, .step-hero, .tool-hero,
  .stage, .player, .player__micro
){
  opacity:0;
  translate:0 26px;
  transition:opacity .75s cubic-bezier(.22,1,.36,1),translate .75s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--rvd,0ms);
}
html.rv .is-in{opacity:1 !important;translate:none !important}

/* Reveal escalonado do quiz a cada pergunta ------------------------------- */
.q-in>*{opacity:0;translate:0 16px;animation:q-in .5s cubic-bezier(.22,1,.36,1) forwards}
.q-in>*:nth-child(1){animation-delay:.02s}
.q-in>*:nth-child(2){animation-delay:.09s}
.q-in>*:nth-child(3){animation-delay:.16s}
.q-in>*:nth-child(4){animation-delay:.23s}
.q-in>*:nth-child(5){animation-delay:.30s}
.q-in .quiz__opts>li{opacity:0;translate:0 14px;animation:q-in .45s cubic-bezier(.22,1,.36,1) forwards}
.q-in .quiz__opts>li:nth-child(1){animation-delay:.26s}
.q-in .quiz__opts>li:nth-child(2){animation-delay:.33s}
.q-in .quiz__opts>li:nth-child(3){animation-delay:.40s}
.q-in .quiz__opts>li:nth-child(4){animation-delay:.47s}
.q-in .quiz__opts>li:nth-child(5){animation-delay:.54s}
@keyframes q-in{to{opacity:1;translate:none}}

/* ==========================================================================
   Interações — hover no desktop, toque no mobile
   Movimento curto e curva sem repique: a resposta é de luz e sombra,
   não de deslocamento.
   ========================================================================== */
:root{
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.25,.46,.45,.94);
  --lift:transform .72s var(--ease-soft),box-shadow .72s var(--ease-soft),
         background-color .65s ease,opacity .65s ease,filter .65s ease;
}

/* Blocos de conteúdo ----------------------------------------------------- */
.card,.step,.step-hero,.tool,.tool-hero,.datecard,.stepcard,
.prize,.receipt,.stage,.player,.detail{
  transition:var(--lift);
}

@media (hover:hover){
  .card:hover{
    transform:translateY(-1px);
    background:#F2F3F40C;
    box-shadow:inset 0 1px 1.5px #F2F3F41A,inset 0 -1px 2px #00000066,
               0 26px 46px #00000070,0 0 0 1px #1FA68524;
  }
  .card--solid:hover{
    background:#24352F;
    box-shadow:inset 0 0 0 1px #1FA6852B,0 24px 46px #00000075;
  }
  .step:hover{
    transform:translateY(-1px);
    background:#24352F;
    box-shadow:inset 0 0 0 1px #1FA6852B,0 20px 40px #00000063;
  }
  .step-hero:hover{
    transform:translateY(-1px);
    box-shadow:inset 0 0 0 1px #1FA6852B,0 24px 48px #0000007A;
  }
  .tool:hover{
    transform:translateY(-1px);
    background:#F2F3F40D;
    box-shadow:inset 0 1px 1.5px #CEDDD714,inset 0 -1px 2px #0000004D,
               0 18px 34px #0000005C,0 0 0 1px #1FA68524;
  }
  .tool:hover .tool__ico,
  .stepcard:hover .stepcard__ico,
  .tool-hero:hover .tool-hero__ico{
    background:#1FA6852B;
    box-shadow:inset 0 0 0 1px #1FA68552,0 0 18px #1FA6852B;
    transform:scale(1.015);
  }
  .tool-hero:hover{
    transform:translateY(-1px);
    background:#24352F;
    box-shadow:inset 0 0 0 1px #1FA6852B,0 22px 42px #00000075;
  }
  .datecard:hover{
    transform:translateY(-1px);
    background:#F2F3F40C;
    box-shadow:inset 0 1px 1.5px #F2F3F41A,inset 0 -1px 2px #00000066,
               0 26px 44px #0000005C,0 0 0 1px #1FA68524;
  }
  .stepcard:hover{
    transform:translateY(-1px);
    box-shadow:inset 0 0 0 1px #1FA6852B,0 24px 44px #0000007A;
  }
  .stepcard--hi:hover{box-shadow:inset 0 0 0 1px #1FA68547,0 24px 44px #0000007A,0 0 34px #1FA68517}
  .prize:hover{
    transform:translateY(-1px);
    box-shadow:inset 0 0 0 1px #1FA68538,0 24px 48px #00000075,0 0 56px #1FA68517;
  }
  .receipt:hover{
    transform:translateY(-1px);
    box-shadow:inset 0 1px 1.5px #F2F3F41A,0 30px 56px #00000075,0 0 0 1px #1FA68524;
  }
  .stage:hover{opacity:.93;transform:translateY(-1px);box-shadow:0 24px 48px #00000075}
  .player:hover{
    transform:translateY(-1px);
    box-shadow:inset 0 0 0 1px #1FA6852B,0 0 100px #1FA6852E,0 36px 78px #00000090;
  }
  .detail:hover .detail__v{color:var(--accent)}
  .proof>*:hover{transform:translateY(-1px);box-shadow:0 24px 46px #00000070,0 0 0 1px #1FA68524}

  /* Molduras da TV — preservam a rotação de cada uma */
  .tv{transition:var(--lift)}
  .tv--l:hover{transform:rotate(-5deg) translateY(-2px) scale(1.003);box-shadow:inset 0 0 0 1px #1FA6852B,0 32px 56px #0000009E}
  .tv--r:hover{transform:rotate(5deg) translateY(-2px) scale(1.003);box-shadow:inset 0 0 0 1px #1FA6852B,0 32px 56px #0000009E}
  .tv--mid:hover{transform:translateY(-2px) scale(1.003);box-shadow:inset 0 0 0 1px #1FA6852B,0 42px 72px #000000BA}

  /* Pílulas e links */
  .pill,.slot{transition:var(--lift)}
  .pill:hover{background:#24352F;box-shadow:inset 0 0 0 1px #1FA6852B;transform:translateY(-1px)}
  .slot:hover{box-shadow:inset 0 0 0 1px #1FA68580,0 0 20px #1FA68517;transform:translateY(-1px)}
  .footer__links a{transition:color .5s ease}
  .linkish{transition:color .5s ease,transform .65s var(--ease-soft)}
  .linkish:hover{transform:translateX(1px)}
}

/* Toque — vale para mobile e também no clique do desktop ------------------ */
.card:active,.step:active,.step-hero:active,.tool:active,.tool-hero:active,
.datecard:active,.stepcard:active,.prize:active,.receipt:active,
.stage:active,.player:active{
  transform:translateY(-1px) scale(.997);
  box-shadow:inset 0 0 0 1px #1FA68547,0 10px 22px #00000075;
  transition-duration:.2s;
}
.tv--l:active{transform:rotate(-5deg) scale(.994)}
.tv--r:active{transform:rotate(5deg) scale(.994)}
.tv--mid:active{transform:scale(.994)}
.stage:active{opacity:.93}
.opt:active{transform:scale(.995);transition-duration:.2s}

/* Botões — o brilho sobe devagar em vez de estourar ----------------------- */
.btn__glow{transition:opacity .72s var(--ease-soft),width .72s var(--ease-soft),height .72s var(--ease-soft)}

.btn--primary{
  transition:filter .6s ease,transform .5s var(--ease-soft),box-shadow .72s var(--ease-soft);
}
.btn--primary:hover{
  filter:brightness(1.04) saturate(1.02);
  box-shadow:
    inset 0 2px 29px #CEDDD72B,
    inset 0 -.8px .56px -.71px #CEDDD759,
    inset 0 -2px 3px #F2F3F473,
    inset 0 1px 2.8px #F2F3F440,
    0 5px 9px #00000052,
    0 0 20px #1FA6853D,
    0 0 0 1px #1FA6853D;
}
.btn--primary:hover .btn__glow{opacity:.92;width:276px;height:96px}
.btn--primary:active{
  transform:translateY(1px);
  filter:brightness(1.11) saturate(1.05);
  box-shadow:inset 0 2px 8px #0E3B3380,0 0 34px #1FA68580,0 0 0 1px #1FA68566;
  transition-duration:.16s;
}

.btn--quiz:hover:not(:disabled){
  filter:brightness(1.035);
  box-shadow:
    inset 0 1.5px .5px #CEDDD7A0,
    inset 0 -2px 2px -1px #0E3B3380,
    inset 0 1px 2.8px #F2F3F440,
    0 5px 15px #00000063,
    0 0 20px #1FA6853D,
    0 0 0 1px #1FA6853D;
}
.btn--quiz:active:not(:disabled){transform:translateY(1px);filter:brightness(1.1);box-shadow:inset 0 2px 8px #0E3B3380,0 0 34px #1FA68580;transition-duration:.16s}

.btn--ghost{transition:var(--lift),color .6s ease}
.btn--ghost:hover{
  background:#273833;
  color:var(--sage);
  box-shadow:inset 0 0 0 1px #F2F3F424,inset 0 1px 2px #00000040,0 0 18px #F2F3F40A;
}
.btn--ghost:hover svg path{stroke:#BEC3C3}
.btn--ghost:active{transform:translateY(1px);background:#22312D;box-shadow:inset 0 2px 6px #00000063;transition-duration:.16s}

.btn-icon{transition:background .6s ease,box-shadow .72s var(--ease-soft),transform .5s var(--ease-soft)}
.btn-icon:hover{background:#0000003D;box-shadow:inset 0 1px 2px #00000059,inset 0 0 0 1px #1FA6853D,0 0 16px #1FA68524}
.btn-icon:hover svg path{stroke:#57DE8A}
.btn-icon:active{transform:translateY(1px) scale(.985);transition-duration:.16s}

.btn-shell{transition:background .65s ease,box-shadow .72s var(--ease-soft)}
.btn-shell:has(.btn:hover),.btn-shell:has(.btn-icon:hover){
  background:#F2F3F421;
  box-shadow:inset 0 2px 29px #CEDDD72B,0 0 24px #1FA68517;
}
.btn-shell--muted:has(.btn:hover),.btn-shell--muted:has(.btn-icon:hover){
  background:#F2F3F414;
  box-shadow:inset 0 2px 20px #CEDDD70F;
}

.stepcard__btn{transition:var(--lift)}
.stepcard__btn--solid:hover{
  filter:brightness(1.035);
  box-shadow:inset 0 -.8px .56px -.71px #CEDDD74D,inset 0 -2px 3px #F2F3F459,
             0 5px 9px #00000052,0 0 18px #1FA6853D;
}
.stepcard__btn--solid:active{transform:translateY(1px);filter:brightness(1.1);box-shadow:inset 0 2px 8px #0E3B3380,0 0 30px #1FA68580;transition-duration:.16s}
.stepcard__btn--outline:hover{background:#F2F3F414;box-shadow:inset 0 0 0 1px #1FA6853D,0 0 16px #1FA68517}
.stepcard__btn--outline:active{transform:translateY(1px);background:#F2F3F40A;transition-duration:.16s}

.player__play{transition:transform .65s var(--ease-soft),box-shadow .72s var(--ease-soft),filter .6s ease}
.player:hover .player__play{filter:brightness(1.035);box-shadow:inset 0 -2px 3px #F2F3F459,0 9px 30px #00000090,0 0 26px #1FA6853D}
.player:active .player__play{transform:scale(.98);transition-duration:.16s}

.modal__close{transition:background .5s ease,transform .7s var(--ease-soft)}
.modal__close:hover{transform:rotate(90deg)}

.opt{transition:background .5s ease,box-shadow .5s ease}
.form input{transition:border-color .3s ease,background .3s ease,box-shadow .3s ease}
.form input:focus{box-shadow:0 0 0 3px #1FA68524}

/* Acessibilidade --------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  /* Nada some nem flutua: conteúdo entra já visível */
  html.rv :is(
    .head>*, .grid-2>*, .grid-3>*, .steps>*, .tools-grid>*, .tvwall>*,
    .choice>*, .legend>*, .footer>*, .prize>*, .detail-row>*, .stepcard>*,
    .receipt, .statement, .sig, .closing, .note, .step-hero, .tool-hero,
    .stage, .player, .player__micro
  ){opacity:1 !important;translate:none !important}
  .q-in>*,.q-in .quiz__opts>li{opacity:1 !important;translate:none !important}
  .push-1,.push-2,.push-3{animation:none !important}
  /* Mantém a resposta visual, tira o deslocamento */
  .card:hover,.step:hover,.step-hero:hover,.tool:hover,.tool-hero:hover,
  .datecard:hover,.stepcard:hover,.prize:hover,.receipt:hover,.stage:hover,
  .player:hover,.pill:hover,.slot:hover,.linkish:hover,
  .btn--primary:hover,.btn--quiz:hover,.btn--ghost:hover,.btn-icon:hover,
  .stepcard__btn:hover,.modal__close:hover,
  .card:active,.step:active,.step-hero:active,.tool:active,.tool-hero:active,
  .datecard:active,.stepcard:active,.prize:active,.receipt:active,
  .stage:active,.player:active,.opt:active{transform:none !important}
  .tv--l:hover,.tv--l:active{transform:rotate(-5deg) !important}
  .tv--r:hover,.tv--r:active{transform:rotate(5deg) !important}
  .tv--mid:hover,.tv--mid:active{transform:none !important}
  .push-1,.push-2,.push-3{translate:none !important}
}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}