:root{
  --cobalto:#1E6FD9;
  --presenca:#082C3F;
  --marfim-fundo:#FAF3E8;
  --marfim-casa:#F4E6D2;
  --coral:#E45F45;
  --branco:#FFFFFF;
  --whats:#1EBE5D;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{font-family:'Manrope',sans-serif;background:var(--presenca);color:var(--presenca)}
button,input{font:inherit}
.page{max-width:430px;margin:0 auto;background:var(--cobalto);min-height:100vh;position:relative}
.display{font-family:'Barlow Condensed',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.01em;line-height:.95}

/* DOBRA 1 */
.hero{background:var(--cobalto);padding:44px 24px 48px}
.hero .eyebrow{
  font-family:'Barlow Condensed',sans-serif;font-weight:800;text-transform:uppercase;
  letter-spacing:.16em;font-size:14px;color:var(--marfim-casa);margin-bottom:12px;
}
.hero h1{color:var(--branco);font-size:50px}
.hero h1 .fio{display:inline-block;position:relative}
.hero h1 .fio::after{content:"";position:absolute;left:0;right:-12px;bottom:-7px;height:5px;background:var(--coral)}
.hero .sub{margin-top:18px;font-size:16px;font-weight:700;line-height:1.45;color:var(--marfim-casa)}
.video-frame{
  margin-top:26px;background:var(--presenca);border-radius:14px;aspect-ratio:9/13;
  position:relative;overflow:hidden;box-shadow:0 18px 42px rgba(8,44,63,.24);
}
.video-frame video{width:100%;height:100%;display:block;object-fit:cover;background:#061c29}

/* BLOCOS */
section{padding:52px 24px 56px}
.bloco-marfim{background:var(--marfim-fundo)}
.bloco-cobalto{background:var(--cobalto)}
.titulo{font-size:38px;color:var(--presenca)}
.bloco-cobalto .titulo{color:var(--branco)}
.lead{margin-top:12px;font-size:15.5px;font-weight:500;line-height:1.55;color:var(--presenca);opacity:.88}
.bloco-cobalto .lead{color:var(--marfim-casa);opacity:1}
.passo{
  display:inline-block;font-family:'Barlow Condensed',sans-serif;font-weight:800;text-transform:uppercase;
  letter-spacing:.14em;font-size:14px;color:var(--coral);margin-bottom:10px;
}
.bloco-cobalto .passo{color:var(--marfim-casa)}

/* MISSÃO 1 */
.assistente{margin-top:24px}
.pergunta{
  font-family:'Barlow Condensed',sans-serif;font-weight:800;text-transform:uppercase;
  font-size:22px;color:var(--cobalto);margin-bottom:14px;letter-spacing:.03em;
}
.grade{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rel{
  display:flex;align-items:center;justify-content:center;min-height:58px;background:var(--cobalto);
  color:var(--branco);font-family:'Barlow Condensed',sans-serif;font-weight:800;text-transform:uppercase;
  font-size:22px;letter-spacing:.05em;border:none;border-radius:10px;cursor:pointer;
  transition:transform .12s ease,background .12s ease;padding:8px;
}
.rel:active{transform:scale(.97);background:#1A5FBB}
.rel-outra{grid-column:1/-1;background:var(--marfim-fundo);color:var(--cobalto);border:2.5px solid var(--cobalto)}
.voltar{
  margin-top:16px;background:none;border:none;font-family:'Manrope',sans-serif;font-weight:700;
  font-size:14px;color:#4A6273;text-decoration:underline;cursor:pointer;
}
.oculto{display:none!important}

.resultado{background:var(--branco);border:2.5px solid var(--cobalto);border-radius:14px;padding:22px 20px}
.resultado .rotulo{
  font-family:'Barlow Condensed',sans-serif;font-weight:800;text-transform:uppercase;
  letter-spacing:.12em;font-size:13px;color:var(--coral);
}
.resultado .combo{
  font-family:'Barlow Condensed',sans-serif;font-weight:800;text-transform:uppercase;
  font-size:30px;color:var(--presenca);margin-top:6px;line-height:1;
}
.resultado .desc{margin-top:10px;font-size:14px;font-weight:500;line-height:1.5;color:#4A6273}
.phone-label{
  display:block;margin-top:18px;margin-bottom:7px;font-family:'Barlow Condensed',sans-serif;
  font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--presenca);font-size:13px;
}
.phone-input{
  width:100%;min-height:55px;border:1.5px solid rgba(8,44,63,.20);border-radius:10px;
  padding:0 14px;background:#fff;color:var(--presenca);font-size:17px;font-weight:700;outline:none;
}
.phone-input:focus{border-color:var(--cobalto);box-shadow:0 0 0 3px rgba(30,111,217,.10)}
.btn-whats{
  margin-top:16px;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  min-height:60px;background:var(--whats);color:var(--branco);
  font-family:'Barlow Condensed',sans-serif;font-weight:800;text-transform:uppercase;font-size:21px;
  letter-spacing:.04em;border:none;border-radius:10px;cursor:pointer;transition:transform .12s ease;
}
.btn-whats:active,.btn-video-share:active,.cta:active{transform:scale(.97)}
.btn-video-share{
  margin-top:10px;width:100%;min-height:54px;background:var(--cobalto);color:#fff;border:0;border-radius:10px;
  font-family:'Barlow Condensed',sans-serif;font-weight:800;text-transform:uppercase;font-size:17px;cursor:pointer;
}
.micro{
  margin-top:16px;font-size:13px;font-weight:500;color:#4A6273;display:flex;align-items:flex-start;gap:8px;line-height:1.45;
}
.micro svg{flex-shrink:0;margin-top:1px}

/* FIGURINHAS */
.figs-real{margin-top:24px;background:rgba(255,255,255,.08);border-radius:16px;padding:12px;overflow:hidden}
.figs-real img{width:100%;height:auto;display:block;border-radius:12px}
.cta{
  margin-top:24px;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:60px;
  background:var(--coral);color:var(--branco);font-family:'Barlow Condensed',sans-serif;font-weight:800;
  text-transform:uppercase;font-size:22px;letter-spacing:.04em;border:none;border-radius:10px;cursor:pointer;
  text-decoration:none;transition:transform .12s ease;padding:10px 12px;text-align:center;
}
.cta-button{appearance:none}

/* SANTINHO REAL */
.santinho-real{
  display:block;margin:26px auto 0;width:230px;border:0;border-radius:14px;overflow:hidden;background:none;
  cursor:pointer;box-shadow:0 18px 38px rgba(8,44,63,.18);
}
.santinho-real img{display:block;width:100%;height:auto}
.micro-center{justify-content:center;text-align:center}

/* FECHO */
.fecho{background:var(--coral);padding:56px 24px 52px;text-align:center}
.fecho .grande{color:var(--branco);font-size:47px}
.fecho .apoio{margin-top:16px;color:var(--branco);font-weight:700;font-size:16px}
.contador{margin:22px auto 0;display:inline-block;background:rgba(255,255,255,.14);border-radius:12px;padding:16px 26px}
.contador .num{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:36px;color:var(--branco);line-height:1}
.contador .rot{
  margin-top:4px;font-family:'Barlow Condensed',sans-serif;font-weight:800;text-transform:uppercase;
  letter-spacing:.1em;font-size:13px;color:var(--branco);
}
.fecho .caminhada{margin-top:24px;color:var(--branco);font-weight:700;font-size:15px}
.fecho .bencao{margin-top:8px;color:var(--branco);font-style:italic;font-weight:500;font-size:17px}
.legal{background:var(--presenca);color:rgba(244,230,210,.75);font-size:10px;font-weight:500;text-align:center;line-height:1.6;padding:20px 24px 26px}

/* SANTINHO MODAL */
.image-modal{
  position:fixed;inset:0;z-index:50;background:rgba(4,18,29,.92);padding:28px 18px;
  display:flex;align-items:center;justify-content:center;
}
.image-modal[hidden]{display:none!important}
.image-modal img{max-width:min(92vw,390px);max-height:88vh;border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.modal-close{
  position:absolute;top:18px;right:18px;width:44px;height:44px;border:0;border-radius:50%;
  background:#fff;color:var(--presenca);font-size:30px;line-height:1;cursor:pointer;
}

@media (prefers-reduced-motion:reduce){*{transition:none!important}html{scroll-behavior:auto}}

/* =========================================================
   V3 — fluxo de envio mais claro
   ========================================================= */
#passo3 .resultado{
  box-shadow:0 16px 34px rgba(8,44,63,.08);
}
#passo3 .phone-label{
  margin-top:20px;
}

/* V4 — fluxo simplificado de compartilhamento */
#passo3 .btn-share-only{margin-top:18px;background:var(--whats)}
.phone-label,.phone-input,.btn-video-share{display:none!important}


/* V8 — vídeo principal inicia automaticamente */
#player-video{
  background:#061c29;
}

/* V25 — botão de ativar/desativar som sobreposto no vídeo */
.sound-toggle{
  position:absolute;z-index:5;right:14px;bottom:14px;width:42px;height:42px;border:0;border-radius:50%;
  background:rgba(8,44,63,.55);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:transform .12s ease,background .12s ease;
}
.sound-toggle:active{transform:scale(.92)}
.sound-toggle.ativo{background:rgba(30,111,217,.85)}

.name-label{display:block;margin:4px 0 8px;font-family:'Barlow Condensed',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:13px;color:var(--presenca)}
.name-input{width:100%;min-height:56px;padding:0 14px;border:1.5px solid rgba(8,44,63,.20);border-radius:10px;background:#fff;color:var(--presenca);font-size:17px;font-weight:700;outline:none}
.name-input:focus{border-color:var(--cobalto);box-shadow:0 0 0 3px rgba(30,111,217,.10)}
.btn-continue{width:100%;min-height:56px;margin-top:12px;border:0;border-radius:10px;background:var(--cobalto);color:#fff;font-family:'Barlow Condensed',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:21px;cursor:pointer}
.scroll-top{width:48px;height:48px;margin:24px auto 0;border:1px solid rgba(255,255,255,.35);border-radius:50%;background:rgba(255,255,255,.12);color:#fff;display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:28px;line-height:1}

/* =========================================================
   V26 — player principal estilo apoio.fabioteruel.com.br
   ========================================================= */
.hero .video-frame.video-frame-real{
  position:relative;
  width:100%;
  aspect-ratio:9 / 16;
  overflow:hidden;
  border-radius:24px;
  background:#0b2233;
  isolation:isolate;
}

.hero #video-container{
  position:absolute;
  inset:0;
  overflow:hidden;
  border-radius:inherit;
  background:#0b2233;
}

/*
  O iframe é ligeiramente ampliado para que o vídeo vertical preencha
  o card e as áreas de interface do YouTube fiquem fora do recorte.
*/
.hero #video-container .youtube-main-video{
  position:absolute;
  top:50%;
  left:50%;
  width:100%;
  height:100%;
  min-width:100%;
  min-height:100%;
  border:0;
  margin:0;
  padding:0;
  transform:translate(-50%,-50%) scale(1.035);
  transform-origin:center;
  pointer-events:none;
  background:#0b2233;
}

.hero .sound-toggle{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:5;
  width:76px;
  height:76px;
  padding:0;
  border:3px solid rgba(255,255,255,.72);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(25,20,20,.58);
  color:#fff;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  box-shadow:0 8px 26px rgba(0,0,0,.22);
  backdrop-filter:blur(2px);
}

.hero .sound-toggle svg{
  width:38px;
  height:38px;
  display:block;
}

.hero .sound-toggle:active{
  transform:translate(-50%,-50%) scale(.96);
}

.hero .sound-toggle.is-sound-on{
  background:rgba(8,44,63,.66);
}

@media (max-width:480px){
  .hero .video-frame.video-frame-real{
    border-radius:18px;
  }

  .hero .sound-toggle{
    width:70px;
    height:70px;
  }

  .hero .sound-toggle svg{
    width:34px;
    height:34px;
  }
}

/* =========================================================
   V28 — interação do player
   ========================================================= */
.hero #video-container .youtube-main-video{
  pointer-events:none;
}

.hero #video-container.show-controls .youtube-main-video{
  pointer-events:auto;
}

.hero .sound-toggle{
  transition:
    opacity .22s ease,
    transform .22s ease,
    visibility .22s ease,
    width .22s ease,
    height .22s ease,
    left .22s ease,
    top .22s ease,
    right .22s ease,
    bottom .22s ease,
    background .22s ease;
}

.hero .sound-toggle.is-docked{
  left:auto;
  top:auto;
  right:22px;
  bottom:22px;
  transform:none;
  width:62px;
  height:62px;
  border-width:2px;
  background:rgba(66, 62, 28, .82);
}

.hero .sound-toggle.is-docked svg{
  width:30px;
  height:30px;
}

.hero .sound-toggle.is-docked:active{
  transform:scale(.96);
}

@media (max-width:480px){
  .hero .sound-toggle.is-docked{
    right:16px;
    bottom:16px;
    width:58px;
    height:58px;
  }

  .hero .sound-toggle.is-docked svg{
    width:28px;
    height:28px;
  }
}








/* V34 — i37 igual às linhas legais, sem barra azul */
.legal .i37-credit{
  display:inline;
}

.legal .i37-credit a{
  font-family:inherit !important;
  font-size:inherit !important;
  font-weight:inherit !important;
  line-height:inherit !important;
  letter-spacing:inherit !important;
  text-transform:none !important;
  color:inherit !important;
  text-decoration:none !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  margin:0 !important;
  border-radius:0 !important;
  opacity:.88;
}

.legal .i37-credit a:hover{
  color:inherit !important;
  text-decoration:none !important;
  background:transparent !important;
}

/* =========================================================
   V43 — DESKTOP RESPONSIVO
   MOBILE permanece exatamente como na V42.
   Esta camada só entra em telas a partir de 900px.
   ========================================================= */
@media (min-width:900px){

  body{
    background:var(--presenca);
  }

  .page{
    max-width:1360px;
    width:100%;
    margin:0 auto;
    box-shadow:0 0 80px rgba(0,0,0,.16);
  }

  /* HERO — texto + vídeo em duas colunas */
  .hero{
    min-height:760px;
    padding:76px 72px 78px;
    display:grid;
    grid-template-columns:minmax(0,1fr) 390px;
    grid-template-rows:auto auto 1fr;
    column-gap:76px;
    align-items:center;
  }

  .hero .eyebrow{
    grid-column:1;
    grid-row:1;
    align-self:end;
    margin:0 0 18px;
    font-size:15px;
  }

  .hero h1{
    grid-column:1;
    grid-row:2;
    font-size:82px;
    max-width:700px;
  }

  .hero .sub{
    grid-column:1;
    grid-row:3;
    align-self:start;
    max-width:610px;
    margin-top:28px;
    font-size:19px;
    line-height:1.55;
  }

  .hero .video-frame.video-frame-real{
    grid-column:2;
    grid-row:1 / span 3;
    width:390px;
    margin:0;
    justify-self:end;
    align-self:center;
    border-radius:24px;
    box-shadow:0 28px 70px rgba(8,44,63,.34);
  }

  /* Seções gerais */
  section{
    padding:82px 72px 88px;
  }

  .passo{
    font-size:15px;
    margin-bottom:14px;
  }

  .titulo{
    font-size:54px;
    line-height:.94;
  }

  .lead{
    margin-top:18px;
    font-size:17px;
    line-height:1.65;
    max-width:520px;
  }

  /* 1ª MISSÃO — chamada à esquerda, assistente à direita */
  #videos{
    display:grid;
    grid-template-columns:minmax(300px,.85fr) minmax(520px,1.15fr);
    grid-template-rows:auto auto auto;
    column-gap:84px;
    align-items:start;
  }

  #videos > .passo,
  #videos > .titulo,
  #videos > .lead{
    grid-column:1;
  }

  #videos > .assistente{
    grid-column:2;
    grid-row:1 / span 3;
    width:100%;
    max-width:650px;
    justify-self:end;
    margin-top:0;
    background:rgba(255,255,255,.30);
    border:1px solid rgba(8,44,63,.07);
    border-radius:20px;
    padding:28px;
    box-shadow:0 20px 50px rgba(8,44,63,.08);
  }

  #videos .pergunta{
    font-size:25px;
    margin-bottom:18px;
  }

  #videos .grade{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
  }

  #videos .rel{
    min-height:60px;
    font-size:20px;
  }

  #videos .rel-outra{
    grid-column:1 / -1;
  }

  #videos .name-input,
  #videos .btn-continue{
    max-width:100%;
  }

  #videos .micro{
    max-width:600px;
    margin-top:20px;
  }

  /* 2ª MISSÃO — texto à esquerda, figurinhas à direita */
  #figurinhas{
    display:grid;
    grid-template-columns:minmax(300px,.82fr) minmax(500px,1.18fr);
    grid-template-rows:auto auto auto 1fr;
    column-gap:84px;
    align-items:center;
  }

  #figurinhas > .passo,
  #figurinhas > .titulo,
  #figurinhas > .lead{
    grid-column:1;
    align-self:start;
  }

  #figurinhas > .figs-real{
    grid-column:2;
    grid-row:1 / span 4;
    width:100%;
    max-width:610px;
    justify-self:end;
    margin-top:0;
    padding:16px;
    border-radius:22px;
  }

  #figurinhas > .cta{
    grid-column:1;
    width:100%;
    max-width:440px;
    margin-top:30px;
    justify-self:start;
  }

  /* 3ª MISSÃO — texto/CTA à esquerda, santinho à direita */
  #santinho{
    display:grid;
    grid-template-columns:minmax(320px,.9fr) minmax(420px,1.1fr);
    grid-template-rows:auto auto auto auto auto;
    column-gap:90px;
    align-items:center;
  }

  #santinho > .passo,
  #santinho > .titulo,
  #santinho > .lead,
  #santinho > .cta,
  #santinho > .micro{
    grid-column:1;
  }

  #santinho > .santinho-real{
    grid-column:2;
    grid-row:1 / span 5;
    width:320px;
    margin:0 auto;
    justify-self:center;
    border-radius:20px;
    box-shadow:0 26px 58px rgba(8,44,63,.20);
  }

  #santinho > .cta{
    max-width:440px;
    justify-self:start;
    margin-top:32px;
  }

  #santinho > .micro{
    max-width:440px;
    justify-content:flex-start;
    text-align:left;
  }

  /* FECHO — mais horizontal, sem exagerar o contador */
  .fecho{
    padding:82px 72px 76px;
  }

  .fecho .grande{
    font-size:72px;
    line-height:.92;
  }

  .fecho .apoio{
    margin-top:22px;
    font-size:18px;
  }

  .contador{
    margin-top:28px;
    padding:15px 28px;
  }

  .contador .num{
    font-size:36px;
  }

  .fecho .caminhada{
    margin-top:30px;
    font-size:16px;
  }

  .fecho .bencao{
    font-size:18px;
  }

  .legal{
    padding:22px 32px 28px;
  }

  /* Hover só para desktop */
  .rel:hover,
  .btn-continue:hover,
  .btn-whats:hover,
  .cta:hover{
    transform:translateY(-2px);
  }

  .rel:hover{
    background:#1A63C2;
  }

  .rel-outra:hover{
    background:rgba(30,111,217,.06);
    color:var(--cobalto);
  }
}

/* Ajuste intermediário para notebooks menores */
@media (min-width:900px) and (max-width:1100px){

  .hero{
    padding-left:52px;
    padding-right:52px;
    grid-template-columns:minmax(0,1fr) 340px;
    column-gap:50px;
  }

  .hero h1{
    font-size:68px;
  }

  .hero .video-frame.video-frame-real{
    width:340px;
  }

  section{
    padding-left:52px;
    padding-right:52px;
  }

  #videos,
  #figurinhas,
  #santinho{
    column-gap:52px;
  }

  #videos{
    grid-template-columns:minmax(280px,.8fr) minmax(460px,1.2fr);
  }

  #videos .grade{
    grid-template-columns:1fr 1fr;
  }

  #figurinhas{
    grid-template-columns:minmax(280px,.8fr) minmax(440px,1.2fr);
  }

  #santinho{
    grid-template-columns:minmax(300px,.9fr) minmax(360px,1.1fr);
  }
}


/* V44 — fallback somente quando o YouTube bloquear o embed por ausência de Referer */
.youtube-local-fallback{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px;
  text-align:center;
  background:#0b0b0b;
  color:#fff !important;
  font-family:'Manrope',sans-serif !important;
  font-size:16px !important;
  font-weight:800 !important;
  text-transform:none !important;
  text-decoration:none !important;
  margin:0 !important;
}

/* =========================================================
   V45 — revisão somente das 2 primeiras sections no DESKTOP
   Mantém MOBILE, FIGURINHAS e CONTADOR intactos.
   ========================================================= */
@media (min-width:900px){

  /* ---------------------------------------------------------
     1) HERO
     Volta à lógica vertical do mobile: texto em cima + vídeo.
     Conteúdo com largura estreita e centralizada.
     --------------------------------------------------------- */
  .hero{
    min-height:0;
    padding:72px 40px 78px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    text-align:left;
  }

  .hero .eyebrow{
    width:100%;
    max-width:430px;
    margin:0 auto 20px;
    align-self:auto;
    font-size:16px;
    line-height:1.35;
  }

  .hero h1{
    width:100%;
    max-width:430px;
    margin:0 auto;
    font-size:68px;
    line-height:.92;
    text-align:left;
  }

  .hero .sub{
    width:100%;
    max-width:430px;
    margin:26px auto 0;
    align-self:auto;
    font-size:20px;
    line-height:1.5;
    text-align:left;
  }

  .hero .video-frame.video-frame-real{
    width:100%;
    max-width:430px;
    margin:38px auto 0;
    justify-self:auto;
    align-self:auto;
    border-radius:24px;
    box-shadow:0 26px 64px rgba(8,44,63,.28);
  }

  /* ---------------------------------------------------------
     2) VÍDEOS PERSONALIZADOS
     Também volta à leitura vertical do mobile.
     Chamada em cima e assistente logo abaixo.
     --------------------------------------------------------- */
  #videos{
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:78px 40px 84px;
  }

  #videos > .passo,
  #videos > .titulo,
  #videos > .lead{
    width:100%;
    max-width:430px;
    margin-left:auto;
    margin-right:auto;
  }

  #videos > .passo{
    font-size:16px;
    margin-bottom:14px;
  }

  #videos > .titulo{
    font-size:58px;
    line-height:.94;
  }

  #videos > .lead{
    margin-top:20px;
    font-size:19px;
    line-height:1.58;
  }

  #videos > .assistente{
    width:100%;
    max-width:430px;
    margin:34px auto 0;
    padding:0;
    background:transparent;
    border:0;
    border-radius:0;
    box-shadow:none;
  }

  #videos .pergunta{
    font-size:25px;
    line-height:1.1;
    margin-bottom:18px;
  }

  #videos .grade{
    grid-template-columns:1fr 1fr;
    gap:12px;
  }

  #videos .rel{
    min-height:64px;
    font-size:21px;
  }

  #videos .rel-outra{
    grid-column:1 / -1;
  }

  #videos .micro{
    max-width:430px;
  }
}

/* Notebook: mantém a mesma lógica vertical, apenas reduz um pouco os títulos */
@media (min-width:900px) and (max-width:1100px){

  .hero{
    padding-left:32px;
    padding-right:32px;
  }

  .hero h1{
    font-size:62px;
  }

  #videos{
    padding-left:32px;
    padding-right:32px;
  }

  #videos > .titulo{
    font-size:54px;
  }

  /* sobrescreve a grade 2 colunas do V43 para manter o fluxo vertical */
  #videos{
    grid-template-columns:none;
    column-gap:0;
  }

  #videos .grade{
    grid-template-columns:1fr 1fr;
  }
}

/* =========================================================
   V46 — refinamento DESKTOP das sections 1 e 2
   ========================================================= */
@media (min-width:900px){

  /* HERO: chamada principal em duas linhas bem distribuídas */
  .hero .eyebrow{
    max-width:760px;
    text-align:center;
  }

  .hero h1{
    max-width:760px;
    font-size:74px;
    line-height:.92;
    text-align:center;
  }

  .hero h1 br{
    display:none;
  }

  .hero h1 .fio{
    display:inline;
  }

  .hero .sub{
    max-width:700px;
    margin-top:24px;
    font-size:20px;
    line-height:1.5;
    text-align:center;
  }

  .hero .video-frame.video-frame-real{
    max-width:430px;
    margin-top:36px;
  }

  /* SECTION 2: usa melhor a largura da página */
  #videos > .passo,
  #videos > .titulo,
  #videos > .lead{
    max-width:820px;
    text-align:center;
  }

  #videos > .titulo{
    font-size:60px;
    line-height:.95;
  }

  #videos > .lead{
    max-width:720px;
    font-size:19px;
    line-height:1.55;
  }

  #videos > .assistente{
    max-width:920px;
    margin-top:36px;
  }

  #videos .pergunta{
    text-align:center;
    font-size:25px;
    margin-bottom:22px;
  }

  #videos .grade{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
  }

  #videos .rel{
    min-height:62px;
    font-size:20px;
  }

  #videos .rel-outra{
    grid-column:1 / -1;
    max-width:100%;
  }

  #videos .micro{
    max-width:760px;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
    justify-content:center;
  }

  #videos .name-input,
  #videos .btn-continue,
  #videos .btn-whats,
  #videos #passo3,
  #videos #passo4{
    max-width:560px;
    margin-left:auto;
    margin-right:auto;
  }
}

@media (min-width:900px) and (max-width:1100px){
  .hero h1{
    max-width:680px;
    font-size:66px;
  }

  .hero .sub{
    max-width:640px;
  }

  #videos > .titulo{
    font-size:56px;
  }

  #videos > .assistente{
    max-width:820px;
  }

  #videos .grade{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

/* =========================================================
   V47 — títulos das sections 1 e 2 em uma linha no DESKTOP
   ========================================================= */
.desktop-gap{
  display:none;
}

@media (min-width:900px){

  .hero h1{
    width:auto;
    max-width:none;
    white-space:nowrap;
    font-size:clamp(44px,5vw,64px);
    line-height:1;
  }

  .hero h1 br{
    display:none;
  }

  .hero h1 .desktop-gap{
    display:inline;
  }

  #videos > .titulo{
    width:auto;
    max-width:none;
    white-space:nowrap;
    font-size:clamp(40px,4.3vw,54px);
    line-height:1;
  }

  #videos > .titulo br{
    display:none;
  }

  #videos > .titulo .desktop-gap{
    display:inline;
  }
}

@media (min-width:900px) and (max-width:1100px){
  .hero h1{
    font-size:clamp(42px,5.2vw,56px);
  }

  #videos > .titulo{
    font-size:clamp(38px,4.5vw,48px);
  }
}

/* V48 — copy específica do Santinho por dispositivo */
.santinho-copy-desktop{
  display:none;
}

@media (min-width:900px){
  .santinho-copy-mobile{
    display:none;
  }

  .santinho-copy-desktop{
    display:inline;
  }
}


/* V52 — seção FALE COM A GENTE com fundo próprio */
.whatsapp-contato{
  padding:64px 28px 70px;
  background:#EAF2FB;
  text-align:center;
}
.whatsapp-contato .passo{
  display:block;
  margin-bottom:12px;
}
.whatsapp-contato .titulo{
  max-width:520px;
  margin:0 auto;
  text-align:center;
}
.whatsapp-contato .lead{
  max-width:520px;
  margin:18px auto 0;
  text-align:center;
}
.contato-whats-btn{
  width:100%;
  max-width:430px;
  margin:28px auto 0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  text-decoration:none;
}
.contato-whats-btn .whatsapp-icon{
  width:24px;
  height:24px;
  flex:0 0 24px;
}
@media (min-width:900px){
  .whatsapp-contato{
    padding:78px 40px 82px;
  }
  .whatsapp-contato .titulo{
    max-width:900px;
    font-size:56px;
    line-height:1;
  }
  .whatsapp-contato .lead{
    max-width:720px;
    font-size:20px;
  }
  .contato-whats-btn{
    max-width:420px;
    margin-top:30px;
  }
}