/* Desenvolvido por MTHBARROS · mthbarros.com.br | Fellow Ship - agenciafellowship.com.br */
/* =====================================================================
   Página da live. Só anima transform e opacity, para ficar fluido no celular.
   Sem JavaScript (sem a classe .js no <html>), tudo aparece parado.
   ===================================================================== */

main { overflow-x: clip; }

/* ---------- Botão ---------- */
.cta {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 15px 30px; border: 0; border-radius: 999px; overflow: hidden;
  background: linear-gradient(135deg, #00a395 0%, var(--turquesa-forte) 100%);
  box-shadow: 0 12px 28px rgb(0 135 124 / 32%);
  color: #fff; font-family: var(--fonte-titulo); font-weight: 700; font-size: 18px; line-height: 1.15; letter-spacing: .03em;
  text-align: center; text-decoration: none;
  transition: box-shadow .35s var(--suave), scale .35s var(--suave);
  transform: translate3d(var(--ima-x, 0), var(--ima-y, 0), 0);
  -webkit-tap-highlight-color: transparent;
}
.cta::after { /* brilho que passa de tempos em tempos */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgb(255 255 255 / 42%) 50%, transparent 62%);
  transform: translateX(-110%);
}
.js .cta::after { animation: brilho 5.2s var(--suave) 1.6s infinite; }
@keyframes brilho { 0%, 62% { transform: translateX(-110%); } 88%, 100% { transform: translateX(110%); } }
.cta > span { position: relative; z-index: 1; transition: opacity .2s; }
.cta:active { scale: .97; }
.cta-largo { width: 100%; }
.cta-pequeno { min-height: 42px; padding: 9px 20px; font-size: 15px; box-shadow: none; }
.cta-branco { background: #fff; color: var(--turquesa-forte); box-shadow: 0 14px 34px rgb(0 60 55 / 28%); }
.cta-branco::after { background: linear-gradient(105deg, transparent 38%, rgb(0 184 169 / 22%) 50%, transparent 62%); }
@media (hover: hover) {
  .cta:hover { box-shadow: 0 18px 40px rgb(0 135 124 / 42%); scale: 1.025; }
  .cta-branco:hover { box-shadow: 0 20px 44px rgb(0 60 55 / 36%); }
}
.cta-giro {
  position: absolute; width: 24px; height: 24px; border-radius: 50%; opacity: 0;
  border: 3px solid rgb(255 255 255 / 35%); border-top-color: #fff;
}
.cta.enviando { pointer-events: none; }
.cta.enviando > span { opacity: 0; }
.cta.enviando .cta-giro { opacity: 1; animation: giro .75s linear infinite; }
@keyframes giro { to { transform: rotate(360deg); } }

/* ---------- Fundo vivo: seda da lâmina + manchas que respiram ---------- */
.fundo { position: absolute; inset: 0; overflow: hidden; z-index: -1; background: linear-gradient(180deg, #e6e6e8 0%, #f1f1f2 58%, #f8f8f8 100%); }
.fundo-seda {
  position: absolute; inset: -6%;
  background: url("../../img/textura-seda.webp") center / cover no-repeat;
  opacity: .7;
}
.js .fundo-seda { animation: seda 26s ease-in-out infinite alternate; }
@keyframes seda { from { transform: scale(1.02) translate3d(-1.5%, -1%, 0); } to { transform: scale(1.1) translate3d(1.5%, 1.5%, 0); } }
.fundo-mancha { position: absolute; border-radius: 50%; will-change: transform; }
.fundo-mancha-a { width: 62vmax; height: 62vmax; left: -22vmax; top: -24vmax; background: radial-gradient(closest-side, rgb(0 205 185 / 20%), transparent); }
.fundo-mancha-b { width: 54vmax; height: 54vmax; right: -18vmax; top: 6vmax; background: radial-gradient(closest-side, rgb(241 90 36 / 13%), transparent); }
.fundo-mancha-c { width: 46vmax; height: 46vmax; left: 26vw; bottom: -24vmax; background: radial-gradient(closest-side, rgb(255 255 255 / 85%), transparent); }
.js .fundo-mancha-a { animation: boia-a 15s ease-in-out infinite alternate; }
.js .fundo-mancha-b { animation: boia-b 19s ease-in-out infinite alternate; }
.js .fundo-mancha-c { animation: boia-a 23s ease-in-out infinite alternate-reverse; }
@keyframes boia-a { to { transform: translate3d(9vw, 7vh, 0) scale(1.14); } }
@keyframes boia-b { to { transform: translate3d(-8vw, 10vh, 0) scale(.9); } }
.fundo-grao {
  position: absolute; inset: 0; opacity: .32; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ---------- Entrada da primeira dobra ---------- */
.js .ent { animation: subir 1s var(--suave) both; animation-delay: var(--d, 0s); }
.js .ent-zoom { animation: abrir 1.15s var(--suave) both; animation-delay: var(--d, 0s); }
.js .ent-dir { animation: da-direita 1.15s var(--suave) both; animation-delay: var(--d, 0s); }
@keyframes subir { from { opacity: 0; transform: translate3d(0, 26px, 0); } }
@keyframes abrir { from { opacity: 0; transform: scale(.78); } }
@keyframes da-direita { from { opacity: 0; transform: translate3d(48px, 10px, 0); } }

/* ---------- Hero ---------- */
.hero { position: relative; isolation: isolate; overflow: clip; padding: clamp(16px, 3.2vh, 34px) var(--margem) clamp(36px, 6vh, 64px); }
.hero-grade { display: grid; gap: 34px; max-width: 1280px; margin: 0 auto; align-items: center; }
.hero-texto { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.selo-live { font-size: clamp(15px, 2.6vh, 20px); }
.js .selo-live i::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: #fff;
  animation: pulso 1.7s var(--suave) infinite;
}
@keyframes pulso { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(3); } }

/* Títulos: linhas sobem de dentro de uma máscara */
.titulo { margin-top: clamp(10px, 1.8vh, 18px); }
.mascara { display: block; overflow: hidden; padding: .06em .08em .1em; margin: -.06em -.08em -.1em; }
.mascara > span { display: block; }
.js .mascara > span { animation: linha 1.05s var(--suave) both; animation-delay: var(--d, 0s); }
@keyframes linha { from { transform: translate3d(0, 112%, 0); } }
.titulo-fino, .titulo-italico { display: block; color: var(--tinta); font-size: min(9.2vw, clamp(32px, 5.4vh, 54px)); line-height: 1.04; text-transform: uppercase; }
.titulo-forte {
  display: block; margin-top: .22em; font-size: min(11vw, clamp(41px, 7.3vh, 74px)); line-height: .97;
  text-transform: uppercase;
  color: var(--turquesa);
}
/* Brilho que atravessa o nome do produto */
.js .titulo-forte .mascara > span {
  background: linear-gradient(100deg, var(--turquesa) 40%, #7ff5e9 50%, var(--turquesa) 60%) 0 0 / 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: linha 1.05s var(--suave) both, reflexo 6.5s ease-in-out 1.6s infinite;
  animation-delay: var(--d, 0s), 1.6s;
}
@keyframes reflexo { 0% { background-position: 100% 0; } 45%, 100% { background-position: 0 0; } }

/* Cena: foto, silhueta e caixa */
.cena {
  position: relative; display: flex; justify-content: center; width: min(100%, 560px);
  margin-top: clamp(14px, 2.6vh, 24px);
}
.cena-pessoa { display: flex; flex-direction: column; align-items: center; position: relative; z-index: 2; }
.corpo {
  position: absolute; left: 0; top: -3%; width: auto; height: 106%; z-index: 0;
  stroke: #a3a3a5; stroke-width: 10; stroke-linecap: round;
  transform: translate3d(calc(var(--par-x, 0) * -10px), calc(var(--par-y, 0) * -10px), 0);
  transition: transform .5s var(--suave);
}
.js .corpo path { stroke-dasharray: 1; animation: traco 3s cubic-bezier(.45, 0, .2, 1) .35s both; }
.js .corpo path:nth-child(2) { animation-delay: .55s; }
.js .corpo path:nth-child(3) { animation-delay: 1.5s; animation-duration: 1.5s; }
@keyframes traco { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

.retrato { position: relative; width: min(47vw, clamp(176px, 29vh, 268px)); aspect-ratio: 1; }
.retrato > img { position: absolute; inset: 5%; width: 90%; height: 90%; border-radius: 50%; object-fit: cover; box-shadow: 0 20px 44px rgb(30 30 30 / 22%); }
.retrato-anel { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.retrato-anel circle { fill: none; stroke: var(--turquesa); stroke-width: 1.4; stroke-dasharray: 74 26; stroke-linecap: round; }
.retrato-anel .retrato-anel-ponto { fill: var(--laranja); stroke: none; stroke-dasharray: none; }
.js .retrato-anel { animation: orbita 14s linear infinite; }
@keyframes orbita { to { transform: rotate(360deg); } }
/* A profundidade do mouse vai numa propriedade à parte para não brigar com as animações */
.hero .retrato { translate: calc(var(--par-x, 0) * 8px) calc(var(--par-y, 0) * 8px); transition: translate .5s var(--suave); }

.nome-pilula {
  position: relative; margin-top: clamp(-30px, -3vh, -14px); padding: .36em 1.05em .4em; border-radius: 16px;
  background: var(--preto); color: #fff; font-family: var(--fonte-titulo); font-weight: 700; font-size: clamp(18px, 3vh, 27px); line-height: 1.08;
}
.nome-sub { margin-top: 8px; font-size: clamp(14px, 2.1vh, 19px); line-height: 1.16; color: var(--tinta); }

.caixa-pos {
  position: absolute; right: 0; top: 0; z-index: 3; width: min(19.5vw, clamp(66px, 11.6vh, 112px));
  translate: calc(var(--par-x, 0) * 22px) calc(var(--par-y, 0) * 22px);
  transition: translate .5s var(--suave);
  perspective: 700px;
}
.caixa-flutua { position: relative; transform-style: preserve-3d; rotate: y calc(var(--par-x, 0) * 10deg); transition: rotate .5s var(--suave); }
.js .caixa-flutua { animation: flutua 5.6s ease-in-out infinite; }
@keyframes flutua { 0%, 100% { transform: translate3d(0, -5px, 0) rotate(-.6deg); } 50% { transform: translate3d(0, 8px, 0) rotate(.8deg); } }
.caixa-sombra {
  position: absolute; left: 6%; right: 2%; bottom: -7%; height: 7%; border-radius: 50%; z-index: -1;
  background: radial-gradient(closest-side, rgb(90 35 10 / 38%), transparent);
}
.js .caixa-sombra { animation: sombra 5.6s ease-in-out infinite; }
@keyframes sombra { 0%, 100% { transform: scale(.86); opacity: .75; } 50% { transform: scale(1.06); opacity: 1; } }

/* Data, como a tabela da lâmina */
.data-caixa { width: min(100%, 560px); margin-top: clamp(12px, 2vh, 20px); border: 1px solid #5d5d5d; }
.data-caixa strong, .data-caixa > span { display: block; padding: clamp(5px, 1vh, 9px) 8px; }
.data-caixa strong { font-family: var(--fonte-titulo); font-weight: 700; font-size: min(6.6vw, clamp(21px, 3.5vh, 33px)); line-height: 1.1; }
.data-caixa > span { border-top: 1px solid #5d5d5d; font-weight: 400; font-size: clamp(14px, 2.2vh, 20px); line-height: 1.2; text-transform: uppercase; letter-spacing: .005em; }
.barra-sep { font-weight: 400; }

.condicoes {
  display: flex; align-items: center; justify-content: center; gap: .7em; margin-top: clamp(10px, 1.6vh, 16px);
  font-weight: 400; font-size: min(3.7vw, clamp(14px, 2.15vh, 19px)); line-height: 1.2; letter-spacing: 0; text-transform: uppercase;
}
.condicoes i { flex: none; width: .55em; height: .55em; border-radius: 50%; background: var(--preto); }
.js .condicoes i { animation: bate 1.8s ease-in-out infinite; }
.js .condicoes i:last-child { animation-delay: .9s; }
@keyframes bate { 50% { transform: scale(1.5); background: var(--laranja); } }

.cta-hero { margin-top: 16px; width: min(100%, 420px); }

/* ---------- Formulário ---------- */
.form-cartao {
  position: relative; width: 100%; max-width: 460px; justify-self: center; min-width: 0;
  background: rgb(255 255 255 / 86%); border: 1px solid rgb(255 255 255 / 90%); border-radius: 26px;
  box-shadow: 0 30px 70px rgb(30 30 30 / 16%), 0 2px 6px rgb(30 30 30 / 6%);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  scroll-margin-top: 84px;
}
.form-cartao::before { /* contorno turquesa que passeia */
  content: ""; position: absolute; inset: -1.5px; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--giro, 0deg), transparent 0 62%, var(--turquesa-vivo) 80%, var(--laranja) 92%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
}
@property --giro { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.js .form-cartao::before { animation: contorno 7s linear infinite; }
@keyframes contorno { to { --giro: 360deg; } }

.form-altura { position: relative; overflow: hidden; border-radius: inherit; transition: height .55s var(--suave); }
.form { padding: clamp(20px, 3vh, 30px) clamp(18px, 2.6vw, 30px) clamp(18px, 2.6vh, 26px); }
.form-topo h2 { color: var(--turquesa-forte); font-size: clamp(25px, 3.6vh, 31px); line-height: 1.04; }
.form-topo p { font-size: 15px; line-height: 1.32; }
.form-topo > p:first-of-type { margin-top: 6px; color: var(--tinta-suave); }
.form-progresso { height: 5px; margin-top: 14px; border-radius: 5px; background: var(--cinza-2); overflow: hidden; }
.form-progresso i { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--turquesa-vivo), var(--turquesa-forte)); transform: scaleX(var(--progresso, .08)); transform-origin: left; transition: transform .6s var(--suave); }
.form-etapa { margin-top: 7px; font-size: 13px !important; font-weight: 700; color: var(--tinta-suave); }
.form-isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Duas etapas lado a lado: o trilho desliza */
.form-trilho { display: flex; width: 200%; margin-top: 14px; align-items: flex-start; transition: transform .6s var(--suave); }
.form-trilho.etapa-2 { transform: translate3d(-50%, 0, 0); }
.form-passo { display: grid; gap: 12px; width: 50%; min-width: 0; margin: 0; padding: 0 2px; border: 0; transition: opacity .35s; }
.form-trilho:not(.etapa-2) .form-passo[data-passo="2"], .form-trilho.etapa-2 .form-passo[data-passo="1"] { opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .4s; }

/* Campo com rótulo que sobe */
.campo { position: relative; min-width: 0; }
.campo input, .campo select {
  display: block; width: 100%; height: 56px; padding: 22px 42px 7px 15px;
  background: #fff; border: 1.5px solid var(--cinza-3); border-radius: 13px; outline: 0;
  font-size: 16px; font-weight: 400; color: var(--preto); letter-spacing: 0;
  transition: border-color .25s, box-shadow .25s, background-color .25s;
  -webkit-appearance: none; appearance: none;
}
.campo select {
  padding-right: 30px; cursor: pointer; text-overflow: ellipsis;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none' stroke='%235d5d5d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1.5 6 6 6-6'/%3E%3C/svg%3E") right 13px center no-repeat;
}
.campo label {
  position: absolute; left: 16px; top: 17px; color: var(--tinta-suave); font-size: 16px; line-height: 1.3; pointer-events: none;
  transform-origin: left top; white-space: nowrap;
  transition: transform .28s var(--suave), color .25s;
}
.campo input:focus, .campo select:focus { border-color: var(--turquesa-forte); box-shadow: 0 0 0 4px rgb(0 184 169 / 17%); }
.campo input:focus + label, .campo input:not(:placeholder-shown) + label,
.campo input:-webkit-autofill + label, .campo select:focus + label, .campo.preenchido label {
  transform: translate3d(0, -9px, 0) scale(.74);
}
.campo input:focus + label, .campo select:focus + label { color: var(--turquesa-forte); }

.campo-ok { position: absolute; right: 13px; top: 17px; width: 22px; height: 22px; fill: none; stroke: var(--turquesa-forte); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.campo-ok path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .42s var(--suave); }
.campo.ok .campo-ok path { stroke-dashoffset: 0; }

.campo-msg { display: block; font-size: 13.5px; line-height: 1.25; color: var(--erro); max-height: 0; opacity: 0; overflow: hidden; transition: max-height .28s var(--suave), opacity .25s, margin .28s var(--suave); }
.campo.erro .campo-msg, .campo-msg-aceite.ativo { max-height: 60px; opacity: 1; margin-top: 5px; }
.campo.erro input, .campo.erro select { border-color: var(--erro); box-shadow: 0 0 0 4px rgb(194 38 29 / 10%); }
.campo.erro label { color: var(--erro); }
.campo.treme input, .campo.treme select { animation: treme .42s var(--suave); }
@keyframes treme { 20% { transform: translateX(-6px); } 45% { transform: translateX(5px); } 70% { transform: translateX(-3px); } }

.campo-sugestao { display: block; margin-top: 5px; padding: 0; border: 0; background: none; color: var(--turquesa-forte); font-size: 14px; font-weight: 700; text-align: left; text-decoration: underline; text-underline-offset: 2px; }

.campos-dupla { display: grid; grid-template-columns: minmax(0, 1fr) 144px; gap: 10px; align-items: start; }
.campos-dupla .campo label { max-width: 130%; }

/* Conselho é preenchido pela profissão; em "Outro" vira campo livre */
.campo-conselho input[readonly] { background: var(--cinza-1); color: var(--turquesa-forte); font-weight: 700; letter-spacing: .02em; cursor: default; }
.campo-conselho.troca input { animation: carimbo .5s var(--mola); }
@keyframes carimbo { 0% { transform: scale(.97); } 55% { transform: scale(1.012); } }

.campo-abre { display: grid; grid-template-rows: 0fr; margin-top: -12px; visibility: hidden; opacity: 0; transition: grid-template-rows .45s var(--suave), opacity .3s, margin .45s var(--suave), visibility 0s .45s; }
.campo-abre.aberto { grid-template-rows: 1fr; margin-top: 0; visibility: visible; opacity: 1; transition: grid-template-rows .45s var(--suave), opacity .3s .08s, margin .45s var(--suave), visibility 0s; }
.campo-abre-dentro { overflow: hidden; min-height: 0; padding: 4px; margin: -4px; }

/* Aceite LGPD */
.aceite { position: relative; display: flex; gap: 10px; cursor: pointer; font-size: 13.5px; line-height: 1.32; color: var(--tinta-suave); }
.aceite input { position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0; cursor: pointer; }
.aceite i { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border: 1.5px solid var(--cinza-3); border-radius: 7px; background: #fff; transition: background .22s, border-color .22s, scale .3s var(--mola); }
.aceite svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.aceite svg path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .3s var(--suave) .05s; }
.aceite input:checked + i { background: var(--turquesa-forte); border-color: var(--turquesa-forte); scale: 1.08; }
.aceite input:checked + i path { stroke-dashoffset: 0; }
.aceite input:focus-visible + i { outline: 3px solid var(--turquesa-forte); outline-offset: 2px; }
.aceite.erro i { border-color: var(--erro); }
.campo-msg-aceite { margin-top: -10px; }

.form-voltar { justify-self: center; padding: 4px 8px; border: 0; background: none; color: var(--tinta-suave); font-size: 14px; }
.form-voltar:hover { color: var(--turquesa-forte); }
.form-erro { padding: 10px 12px; border-radius: 10px; background: #fdeeec; color: var(--erro); font-size: 14.5px; line-height: 1.3; }

/* Resultado */
.resultado { padding: clamp(34px, 6vh, 56px) clamp(20px, 3vw, 34px); text-align: center; outline: 0; }
.resultado h2 { font-size: clamp(27px, 4vh, 34px); line-height: 1.06; color: var(--turquesa-forte); }
.resultado p { margin-top: 12px; font-size: 18px; line-height: 1.32; color: var(--tinta); }
.resultado .resultado-nota { font-size: 16px; color: var(--tinta-suave); }
.resultado .resultado-contato { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--cinza-2); font-size: 14.5px; color: var(--tinta-suave); }
.resultado-linha { display: block; margin-top: 3px; }
.resultado-icone { width: 88px; height: 88px; margin: 0 auto 18px; fill: none; stroke: var(--turquesa-forte); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.resultado-icone circle, .resultado-icone path { stroke-dasharray: 1; }
.js .resultado:not([hidden]) .resultado-icone circle { animation: traco .85s var(--suave) both; transform: rotate(-90deg); transform-origin: center; }
.js .resultado:not([hidden]) .resultado-icone path { animation: traco .5s var(--suave) .55s both; }
.js .resultado:not([hidden]) > *:not(.resultado-icone) { animation: subir .8s var(--suave) .35s both; }
.resultado-encerrada h2 { color: var(--tinta); }
body[data-fase="encerrada"] .cta-hero, body[data-fase="encerrada"] .final .cta, body[data-fase="encerrada"] .barra-topo .cta, body[data-fase="encerrada"] .cta-fixo, body[data-fase="encerrada"] .rodape-inscrever { display: none; }

.confete { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 90; pointer-events: none; }

/* ---------- Faixa ---------- */
.faixa { position: relative; z-index: 2; overflow: hidden; margin-top: -8px; padding: 13px 0; background: linear-gradient(90deg, var(--turquesa-forte), var(--turquesa) 50%, var(--turquesa-forte)); color: #fff; transform: skewY(-1.1deg) scale(1.02); box-shadow: 0 10px 30px rgb(0 135 124 / 22%); }
.faixa-trilho { display: flex; width: max-content; align-items: center; gap: 22px; font-family: var(--fonte-titulo); font-weight: 700; font-size: clamp(19px, 2.5vw, 28px); line-height: 1.1; text-transform: uppercase; white-space: nowrap; will-change: transform; }
.faixa b { font-weight: 400; font-size: .68em; opacity: .85; }

/* ---------- Títulos de seção ---------- */
.sobretitulo { font-weight: 700; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--turquesa-forte); }
.sobretitulo-laranja { color: #c9430f; }
.h-secao { margin-top: 6px; font-size: clamp(38px, 6vw, 68px); line-height: 1.05; color: var(--tinta); }
.produto .h-secao { font-size: clamp(34px, 4.2vw, 56px); }
.h-secao em { color: var(--turquesa); }
.h-secao em.laranja { color: var(--laranja); }

/* Revelação na rolagem */
.js [data-rv] { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity .9s var(--suave), transform 1s var(--suave); transition-delay: var(--atraso, 0s); }
.js [data-rv="esq"] { transform: translate3d(-34px, 0, 0); }
.js [data-rv="zoom"] { transform: scale(.9); }
.js [data-rv].visto { opacity: 1; transform: none; }

/* ---------- Contagem ---------- */
.contagem { position: relative; isolation: isolate; overflow: hidden; padding: clamp(60px, 9vw, 112px) var(--margem) clamp(52px, 7vw, 92px); text-align: center; background: var(--cinza-1); }
.contagem::before, .contagem::after { content: ""; position: absolute; z-index: -1; top: 50%; height: 110%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; transform: translate3d(-50%, -50%, 0); animation: contagem-mancha 17s ease-in-out infinite alternate; }
.contagem::before { left: 20%; background: radial-gradient(circle, rgb(0 205 185 / 26%), rgb(0 205 185 / 0%) 68%); }
.contagem::after { left: 80%; background: radial-gradient(circle, rgb(120 226 214 / 34%), rgb(120 226 214 / 0%) 68%); animation-name: contagem-mancha-2; animation-duration: 23s; }
.contagem-titulo { font-family: var(--fonte); font-weight: 300; font-size: clamp(26px, 3.4vw, 40px); line-height: 1.15; color: #0a4d47; }
.relogio { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, 1.8vw, 20px); max-width: 860px; margin: clamp(22px, 3vw, 36px) auto 0; }
.relogio-bloco { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; aspect-ratio: 1 / 1.14; border: 1px solid rgb(255 255 255 / 90%); border-radius: clamp(16px, 2.6vw, 28px); background: rgb(255 255 255 / 82%); box-shadow: 0 22px 46px -24px rgb(0 112 102 / 42%), inset 0 1px 0 #fff; }
/* Brilho de vidro por cima do líquido */
.relogio-bloco::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(150deg, rgb(255 255 255 / 44%), rgb(255 255 255 / 0%) 42%); pointer-events: none; }
/* O líquido desce sozinho: cada segundo emenda no próximo (--nivel vem de relogio.js) */
.liquido { position: absolute; inset: 0; background: linear-gradient(180deg, #bff1eb, #7fe0d5); transform: translate3d(0, calc((1 - var(--nivel, 0)) * 100%), 0); transition: transform 1s linear; will-change: transform; }
.onda { position: absolute; left: 0; bottom: calc(100% - 1px); width: 200%; height: clamp(9px, 1.5vw, 15px); background: url("../../img/onda.svg") repeat-x 0 0 / 50% 100%; animation: onda-anda 5.5s linear infinite; }
.onda-fundo { height: clamp(12px, 2vw, 20px); opacity: .55; animation-duration: 8.5s; animation-direction: reverse; }
.relogio-num, .relogio-rotulo { position: relative; z-index: 2; }
.relogio-num { display: flex; font-weight: 200; font-size: clamp(44px, 14vw, 100px); line-height: 1; color: #0a4d47; }
.dig { position: relative; display: block; width: .57em; height: 1em; }
.dig b { position: absolute; inset: 0; font-weight: inherit; text-align: center; }
/* Um número se dissolve no outro */
.dig .sai { animation: dig-sai .75s var(--suave) forwards; }
.dig .entra { animation: dig-entra .75s var(--suave) backwards; }
.relogio-rotulo { margin-top: clamp(4px, .8vw, 10px); font-weight: 500; font-size: clamp(10px, 1.25vw, 13px); letter-spacing: .16em; text-transform: uppercase; color: #0a5a53; }
.contagem-nota { margin-top: clamp(18px, 2.4vw, 28px); font-size: clamp(15px, 1.7vw, 18px); color: var(--tinta-suave); text-wrap: balance; }
.contagem-parada::before, .contagem-parada::after, .contagem-parada .onda { animation-play-state: paused; }
body[data-fase="ao-vivo"] .relogio, body[data-fase="encerrada"] .relogio, body[data-fase="encerrada"] .contagem-nota { display: none; }
body[data-fase="ao-vivo"] .contagem-titulo { color: var(--vermelho); }
@keyframes contagem-mancha { to { transform: translate3d(-40%, -44%, 0) scale(1.12); } }
@keyframes contagem-mancha-2 { to { transform: translate3d(-60%, -56%, 0) scale(1.12); } }
@keyframes onda-anda { to { transform: translate3d(-50%, 0, 0); } }
@keyframes dig-sai { to { opacity: 0; filter: blur(10px); transform: translate3d(0, -.28em, 0) scale(1.06); } }
@keyframes dig-entra { from { opacity: 0; filter: blur(10px); transform: translate3d(0, .28em, 0) scale(.94); } }

/* ---------- Palestrante ---------- */
.palestrante { display: grid; gap: clamp(30px, 5vw, 76px); justify-items: center; align-items: center; max-width: 1120px; margin: 0 auto; padding: clamp(44px, 7vw, 90px) var(--margem); }
.palestrante-foto { position: relative; }
.retrato-grande { width: clamp(248px, 34vw, 420px); }
.retrato-grande .retrato-anel circle { stroke-width: .9; stroke-dasharray: 58 42; }
.etiqueta-flutua { position: absolute; right: 2%; bottom: 10%; padding: .5em 1em; border-radius: 999px; background: var(--preto); color: #fff; font-weight: 700; font-size: clamp(14px, 1.5vw, 17px); }
.js .etiqueta-flutua { animation: flutua 5s ease-in-out infinite; }
.palestrante-texto { width: 100%; min-width: 0; }
.palestrante-papel { margin-top: 8px; font-size: clamp(18px, 2vw, 23px); color: var(--tinta-suave); }
.credenciais { display: grid; gap: 2px; margin-top: 22px; }
.credenciais li { position: relative; padding: 12px 0 12px 26px; border-top: 1px solid var(--cinza-3); font-size: clamp(17px, 1.6vw, 19px); line-height: 1.28; }
.credenciais li::before { content: ""; position: absolute; left: 2px; top: 1.05em; width: 10px; height: 10px; border-radius: 50%; background: var(--turquesa); }

/* ---------- Produto ---------- */
.produto {
  position: relative; display: grid; gap: 14px; padding: clamp(50px, 7vw, 90px) var(--margem);
  background:
    radial-gradient(70% 55% at 18% 34%, var(--laranja-fundo), transparent 72%),
    radial-gradient(50% 40% at 85% 85%, rgb(241 90 36 / 9%), transparent 70%),
    #fff;
  overflow: clip;
}
.produto-palco { position: relative; }
.produto-sticky { position: relative; display: flex; align-items: center; justify-content: center; height: min(62vh, 430px); }
.produto-r { position: absolute; top: 0; left: 50%; translate: -50% 0; height: 100%; width: auto; stroke: var(--laranja); stroke-width: 44; opacity: .15; stroke-linejoin: round; }
.produto-r path { stroke-dasharray: 1; stroke-dashoffset: var(--r, 0); }
.js .produto-r path { --r: 1; }
.produto-caixa { position: relative; flex: none; height: 94%; aspect-ratio: 359 / 1136; transform: perspective(1500px) rotateY(calc(var(--giro-caixa, 0) * 1deg)) rotateZ(calc(var(--inclina, 0) * 1deg)) translate3d(0, calc(var(--sobe, 0) * 1px), 0); will-change: transform; }
.produto-caixa img { width: 100%; height: 100%; filter: drop-shadow(0 28px 34px rgb(120 45 10 / 30%)); }
.produto-textos { display: grid; gap: clamp(46px, 8vw, 110px); min-width: 0; }
.produto-bloco { min-width: 0; max-width: 620px; }
.produto-lead { margin-top: 16px; font-size: clamp(19px, 2vw, 23px); line-height: 1.35; }
.produto-lead strong { color: #d04810; font-weight: 700; }
.fichas { display: grid; gap: 10px; margin-top: 24px; }
.fichas li { display: grid; grid-template-columns: minmax(104px, auto) 1fr; gap: 14px; align-items: center; padding: 14px 18px; border: 1px solid #f6c6b0; border-radius: 16px; background: rgb(255 255 255 / 72%); }
.fichas strong { font-family: var(--fonte-titulo); font-weight: 700; font-size: clamp(24px, 2.6vw, 30px); line-height: 1; color: var(--laranja); white-space: nowrap; }
.fichas span { font-size: 16px; line-height: 1.22; }
.h-menor { font-size: clamp(23px, 2.6vw, 31px); line-height: 1.18; }
.h-menor strong { font-weight: inherit; color: #d04810; }

.rede { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 24px; justify-items: center; }
.rede-item { width: 100%; padding: 12px; background: #fff; border: 1px solid #f6c6b0; border-radius: 16px; }
.rede-item svg { width: min(100%, 300px); margin: 0 auto; stroke-linecap: round; }
.rede-item figcaption { margin-top: 6px; font-size: 13.5px; line-height: 1.22; text-align: center; color: var(--tinta-suave); }
.rede-fio { stroke: #8c8c8c; stroke-width: 4; stroke-dasharray: 1; }
.rede-sinal { font-weight: 700; font-size: 40px; line-height: 1; color: var(--laranja); }
.rede-dvs { fill: #8c8c8c; font-family: var(--fonte); font-weight: 400; font-size: 30px; letter-spacing: .1em; }
.rede-chuva { stroke: var(--laranja); stroke-width: 3; }
.rede-liga { stroke: var(--laranja); stroke-width: 3.4; }
.rede-liga path { transform-box: fill-box; transform-origin: center; }
.js .rede-fio { stroke-dashoffset: 1; transition: stroke-dashoffset 1.5s var(--suave); }
.js .rede.visto .rede-fio { stroke-dashoffset: 0; }
.js .rede.visto .rede-chuva path { animation: chuva 2.2s ease-in-out infinite; }
.js .rede-liga path { opacity: 0; transform: scale(.2); transition: opacity .4s, transform .6s var(--mola); transition-delay: calc(1s + var(--n) * .16s); }
.js .rede.visto .rede-liga path { opacity: 1; transform: none; }
.js .rede.visto .rede-liga { animation: liga 3s ease-in-out 2.4s infinite; }
@keyframes chuva { 0%, 100% { transform: translateY(-5px); opacity: .4; } 50% { transform: translateY(6px); opacity: 1; } }
@keyframes liga { 50% { opacity: .55; } }

.escalas { display: grid; gap: 8px; margin-top: 18px; }
.escala { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 16px; border: 1px solid #f6c6b0; border-radius: 12px; background: #fff; font-size: 15px; letter-spacing: .02em; color: #c9430f; }
.escala-pontos { display: flex; gap: 9px; }
.escala-pontos i { width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--laranja); background: transparent; transition: background .35s, scale .5s var(--mola); transition-delay: calc(var(--n, 0) * .14s + .4s); }
.escala-pontos i.cheio { background: var(--laranja); scale: 1.08; }
.notas { margin-top: 14px; font-size: 12.5px; line-height: 1.3; color: var(--tinta-suave); }

/* ---------- Como funciona ---------- */
.passos { padding: clamp(50px, 7vw, 96px) var(--margem); text-align: center; background: var(--cinza-1); }
.passos-lista { position: relative; display: grid; gap: 26px; max-width: 1080px; margin: clamp(26px, 4vw, 48px) auto 0; text-align: left; }
.passo-linha { position: absolute; left: 25px; top: 18px; bottom: 60px; width: 3px; border-radius: 3px; background: var(--cinza-3); overflow: hidden; }
.passo-linha i { display: block; width: 100%; height: 100%; background: linear-gradient(var(--turquesa-vivo), var(--turquesa-forte)); transform: scaleY(var(--linha, 0)); transform-origin: top; }
.passo { position: relative; padding-left: 70px; }
.passo-num { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 53px; height: 53px; border-radius: 50%; background: #fff; border: 3px solid var(--turquesa); color: var(--turquesa-forte); font-family: var(--fonte-titulo); font-weight: 700; font-size: 24px; box-shadow: 0 8px 20px rgb(0 135 124 / 15%); }
.passo h3 { padding-top: 2px; font-size: clamp(22px, 2.3vw, 27px); line-height: 1.1; color: var(--tinta); }
.passo p { margin-top: 5px; font-size: 16.5px; line-height: 1.34; color: var(--tinta-suave); }

/* ---------- Chamada final ---------- */
.final { padding: 0 var(--margem) clamp(40px, 6vw, 80px); background: var(--cinza-1); }
.final-caixa {
  position: relative; display: flex; flex-direction: column; align-items: center; max-width: 1180px; margin: 0 auto; padding: clamp(38px, 6vw, 76px) clamp(20px, 5vw, 60px); overflow: hidden;
  border-radius: 30px; text-align: center; color: #fff;
  background: linear-gradient(120deg, #007a70, #00a496 45%, #00877c) 0 0 / 220% 220%;
}
.js .final-caixa { animation: gradiente 12s ease-in-out infinite alternate; }
.js .final-caixa[data-rv] { animation: gradiente 12s ease-in-out infinite alternate; }
@keyframes gradiente { to { background-position: 100% 100%; } }
.selo-live-branco { font-size: 15px; }
.final h2 { margin-top: 14px; font-size: clamp(36px, 6vw, 72px); line-height: 1.05; text-transform: uppercase; }
.final h2 em { display: block; }
.final p { max-width: 640px; margin-top: 12px; font-size: clamp(17px, 1.9vw, 21px); line-height: 1.3; }
.final .cta { margin-top: 22px; }

/* ---------- Barra de cima e botão fixo ---------- */
.barra-topo { position: fixed; top: 0; left: 0; right: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 9px var(--margem); background: rgb(255 255 255 / 86%); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 6px 24px rgb(30 30 30 / 9%); transform: translate3d(0, -110%, 0); transition: transform .55s var(--suave); }
.barra-topo.ativa { transform: none; }
.barra-logo { width: 120px; }
.barra-info { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; white-space: nowrap; }
.barra-topo .selo-live { font-size: 12px; }
/* Celular: a barra vira o selo LIVE fixo, sem botão (o de baixo já chama para a inscrição) */
@media (max-width: 1019px) {
  .barra-topo { padding: calc(8px + env(safe-area-inset-top)) var(--margem) 8px; }
  .barra-topo .cta { display: none; }
  .barra-logo { width: 98px; }
  .barra-info { gap: 8px; font-size: 13.5px; }
}
@media (max-width: 369px) { .barra-fim { display: none; } }
.cta-fixo { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, rgb(247 247 247 / 92%) 32%); transform: translate3d(0, 120%, 0); transition: transform .5s var(--suave); }
.cta-fixo.ativa { transform: none; }

/* ---------- Aviso de cookies (o resto fica em base.css) ---------- */
.js .cookies:not(.oculto):not(.na-hora) { animation: subir .8s var(--suave) 1.6s both; }
body.fixo-ativo .cookies { bottom: 84px; }

/* ---------- Telas maiores ---------- */
@media (min-width: 620px) {
  .rede { grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 8px; }
  .rede-item { height: 100%; }
  .rede-sinal { font-size: 34px; }
  .escalas { grid-template-columns: 1fr 1fr; }
  .fichas { grid-template-columns: repeat(3, 1fr); }
  .fichas li { grid-template-columns: 1fr; gap: 6px; align-items: start; }
}

@media (min-width: 860px) {
  .passos-lista { grid-template-columns: repeat(3, 1fr); gap: 34px; }
  .passo-linha { left: 8%; right: 25%; top: 25px; bottom: auto; width: auto; height: 3px; }
  .passo-linha i { transform: scaleX(var(--linha, 0)); transform-origin: left; }
  .passo { padding: 72px 0 0; text-align: center; }
  .passo-num { left: 50%; margin-left: -27px; }
  .palestrante { grid-template-columns: auto 1fr; justify-items: start; }
  .produto { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(20px, 4vw, 60px); padding-top: clamp(70px, 8vw, 110px); padding-bottom: clamp(70px, 8vw, 110px); }
  .produto-sticky { position: sticky; top: 13vh; height: 74vh; }
  .produto-textos { padding-block: 5vh; }
}

@media (min-width: 1020px) {
  .cta-fixo { display: none; }
  body.fixo-ativo .cookies { bottom: 16px; }
  .hero { display: flex; align-items: center; min-height: 100vh; min-height: 100svh; }
  .hero-grade { width: 100%; grid-template-columns: minmax(0, 1fr) minmax(380px, 440px); gap: clamp(26px, 4vw, 70px); }
  .form-cartao { justify-self: end; }
  .cta-hero { display: none; }
}

/* Telas baixas (notebook 768px ou menos): aperta para o formulário e a data caberem juntos */
@media (min-width: 1020px) and (max-height: 800px) {
  .titulo-fino, .titulo-italico { font-size: 38px; }
  .titulo-forte { font-size: 52px; }
  .hero .retrato { width: 190px; }
  .caixa-pos { width: 88px; }
  .nome-pilula { font-size: 20px; }
  .nome-sub { margin-top: 5px; font-size: 14.5px; }
  .data-caixa strong { font-size: 24px; padding-block: 4px; }
  .data-caixa > span { font-size: 15px; padding-block: 4px; }
  .condicoes { font-size: 14px; }
  .form { padding-block: 18px 14px; }
  .form-topo h2 { font-size: 25px; }
  .form-topo p { font-size: 14px; }
  .form-passo { gap: 9px; }
  .campo input, .campo select { height: 52px; padding-top: 20px; }
  .campo label { top: 15px; }
  .campo-ok { top: 15px; }
  .aceite { font-size: 12.5px; }
}

/* ---------- Quem pediu menos movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .js [data-rv] { opacity: 1; transform: none; }
  .js .rede-fio, .corpo path { stroke-dashoffset: 0; }
  .js .rede-liga path { opacity: 1; transform: none; }
  .js .titulo-forte .mascara > span { color: var(--turquesa); background: none; }
  .js .produto-r path { --r: 0; }
}