/* ============================================================================
   v7 · camada por cima do site.css
   Referências: Ecommerce Puro, Rocket e Pinterest (REFERENCIAS-v7.md).
   Só tokens var(--fm-*). Nenhum HEX escrito à mão.
   ========================================================================== */

:root { --glow: color-mix(in srgb, var(--fm-vibrant) 30%, transparent); }

.v7 .section { padding-block: clamp(56px, 7vw, 104px); }

/* ---- Estrela de 4 pontas -------------------------------------------------- */
.star {
  display: inline-block; width: 1em; height: 1em; flex: none;
  background: var(--fm-orange);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}

/* ---- Hero ------------------------------------------------------------------ */
.hero--v7 { isolation: isolate; }
.hero--v7 .rings { display: none; }
.hero--v7::before {
  content: ""; position: absolute; z-index: -1; inset: -20% auto auto -10%;
  width: min(900px, 120vw); aspect-ratio: 1;
  background: radial-gradient(closest-side, var(--glow), transparent);
  pointer-events: none;
}
.hero__mark {
  position: absolute; z-index: -1; left: -.02em; bottom: -.16em;
  font-family: var(--fm-display); font-weight: 900; line-height: .8;
  font-size: clamp(120px, 26vw, 360px); letter-spacing: var(--fm-track-tight);
  color: transparent; -webkit-text-stroke: 1px var(--fm-line-dark);
  pointer-events: none; user-select: none; white-space: nowrap;
}
.hero__cta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--fm-s6); }
.hero__cta .hero__micro { flex-basis: 100%; margin-top: 0; }

/* Selo girando */
.seal { position: relative; width: 112px; height: 112px; flex: none; }
.seal svg { width: 100%; height: 100%; animation: seal-spin 26s linear infinite; }
.seal__bg { fill: var(--fm-vibrant); }
.seal text { font-family: var(--fm-display); font-weight: 900; font-size: 11.4px; letter-spacing: .12em; fill: var(--fm-dark); text-transform: uppercase; }
.seal .star { position: absolute; inset: 50% auto auto 50%; width: 30px; height: 30px; transform: translate(-50%,-50%); background: var(--fm-dark); }
@keyframes seal-spin { to { transform: rotate(360deg); } }

/* Etiqueta torta sobre a foto */
.tag {
  position: absolute; z-index: 3; left: -10px; bottom: 28px;
  display: inline-flex; align-items: center; gap: var(--fm-s2);
  padding: 10px 16px; background: var(--fm-cream); color: var(--fm-dark);
  font-family: var(--fm-display); font-weight: 900; font-size: var(--fm-t-sm);
  text-transform: uppercase; letter-spacing: .06em; line-height: 1.2;
  border-left: 4px solid var(--fm-orange);
  transform: rotate(-4deg);
  box-shadow: 6px 6px 0 var(--fm-vibrant);
}
@media (min-width: 900px) { .tag { left: -24px; } }

/* ---- Faixa de prova (marquee) --------------------------------------------- */
.strip { background: var(--fm-vibrant); color: var(--fm-dark); overflow: hidden; border-block: 1px solid var(--fm-dark); }
.strip__row { display: flex; width: max-content; animation: strip 38s linear infinite; }
.strip__set { display: flex; align-items: center; flex: none; }
.strip__set span { display: inline-flex; align-items: center; gap: var(--fm-s5); padding: 14px var(--fm-s5) 14px 0; margin-right: var(--fm-s5); font-family: var(--fm-display); font-weight: 900; font-size: var(--fm-t-sm); text-transform: uppercase; letter-spacing: .1em; white-space: nowrap; }
.strip__set span::after { content: ""; width: 14px; height: 14px; background: var(--fm-dark); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
@keyframes strip { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .strip__row { animation: none; width: auto; flex-wrap: wrap; } .strip__set[aria-hidden] { display: none; } }

/* ---- Superfícies extras --------------------------------------------------- */
.v7 .s-dark .filter { background: color-mix(in srgb, var(--fm-cream) 6%, transparent); border-color: var(--fm-line-dark); }
.v7 .s-dark .filter__head { color: var(--fm-cream); }
.v7 .s-dark .marklist--no > li { color: var(--fm-mute-dark); }
.v7 .s-dark .marklist--no > li::before { color: var(--fm-vibrant); }
.v7 .s-dark .closer { background: color-mix(in srgb, var(--fm-cream) 8%, transparent); color: var(--fm-cream); }
.v7 .s-dark.s-deep { background: var(--fm-dark-deep); }

/* ---- Problema em abas ------------------------------------------------------ */
.ptabs, .otabs { display: flex; gap: var(--fm-s2); overflow-x: auto; scroll-snap-type: x proximity; margin-inline: calc(-1 * var(--fm-s5)); padding: 4px var(--fm-s5) 12px; scrollbar-width: none; }
.ptabs::-webkit-scrollbar, .otabs::-webkit-scrollbar { display: none; }
.ptab {
  flex: none; scroll-snap-align: start; min-height: 46px; padding: 0 var(--fm-s5);
  border: 1.5px solid var(--fm-line); border-radius: var(--fm-r-pill);
  font-family: var(--fm-display); font-weight: 700; font-size: var(--fm-t-sm);
  color: var(--fm-fg); cursor: pointer; white-space: nowrap;
  transition: background var(--fm-ease-fast), color var(--fm-ease-fast), border-color var(--fm-ease-fast);
}
.ptab:hover { border-color: var(--fm-vibrant); }
.ptab[aria-selected="true"] { background: var(--fm-orange); border-color: var(--fm-orange); color: var(--fm-dark); }
@media (min-width: 900px) { .ptabs { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; } }

.pstage { margin-top: var(--fm-s5); }
.js .pstage { display: grid; }
.js .ppanel { grid-area: 1 / 1; visibility: hidden; opacity: 0; transition: opacity var(--fm-ease); }
.js .ppanel.is-on { visibility: visible; opacity: 1; }
.ppanel { display: grid; gap: clamp(20px, 3vw, 40px); padding: clamp(24px, 3vw, 40px); border-radius: var(--fm-r-sm); background: var(--fm-white); color: var(--fm-dark); box-shadow: 10px 10px 0 var(--fm-vibrant); }
.ppanel + .ppanel { margin-top: var(--fm-s8); }
.js .ppanel + .ppanel { margin-top: 0; }
@media (min-width: 860px) { .ppanel { grid-template-columns: 1.1fr 1fr; align-items: center; } }
.pq { font-family: var(--fm-display); font-weight: 900; font-size: clamp(1.375rem, 3.2vw, 2rem); line-height: var(--fm-lead-snug); color: var(--fm-mid); letter-spacing: var(--fm-track-tight); }
.prow { display: grid; grid-template-columns: 86px 1fr; gap: var(--fm-s4); align-items: start; }
.prow + .prow { margin-top: var(--fm-s5); padding-top: var(--fm-s5); border-top: 1px solid var(--fm-line-light); }
.prow__k { font-family: var(--fm-display); font-weight: 900; font-size: var(--fm-t-xs); letter-spacing: var(--fm-track-label); text-transform: uppercase; padding: 5px 8px; text-align: center; background: var(--fm-mist); color: var(--fm-mid); }
.prow--v .prow__k { background: var(--fm-dark); color: var(--fm-cream); }
.prow p { color: var(--fm-dark); line-height: var(--fm-lead-normal); }
.pstep { display: inline-flex; align-items: center; gap: var(--fm-s2); margin-top: var(--fm-s4); font-family: var(--fm-display); font-weight: 700; font-size: var(--fm-t-sm); color: var(--fm-mid); }
.pstep .star { width: 14px; height: 14px; }
.pbridge { margin-top: clamp(32px, 3vw, 48px); display: grid; gap: var(--fm-s5); align-items: center; }
@media (min-width: 860px) { .pbridge { grid-template-columns: 1fr auto; } }

/* ---- Método: cinco colunas no desktop, linha do tempo vertical no celular --- */
.msteps { display: flex; flex-direction: column; gap: var(--fm-s5); position: relative; }
.msteps::before { content: ""; position: absolute; left: 22px; top: 22px; bottom: 22px; width: 3px; background: var(--fm-line); }
.mstep { display: grid; grid-template-columns: 46px 1fr; gap: var(--fm-s4); align-items: start; }
.mstep__dot { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: var(--fm-r-pill); background: var(--fm-orange); color: var(--fm-dark); font-family: var(--fm-display); font-weight: 900; font-size: var(--fm-t-sm); }
.mstep__body { padding: var(--fm-s5) var(--fm-s5) var(--fm-s6); background: var(--fm-white); color: var(--fm-dark); border: 1px solid var(--fm-line-light); border-radius: var(--fm-r-sm); box-shadow: 6px 6px 0 var(--fm-vibrant); }
.mstep__n { display: none; }
.mstep h3 { margin: 0 0 var(--fm-s2); font-family: var(--fm-display); font-weight: 900; font-size: var(--fm-t-lg); line-height: var(--fm-lead-snug); color: var(--fm-mid); letter-spacing: var(--fm-track-tight); }
.mstep p { font-size: 15px; line-height: 1.6; color: var(--fm-mute-light); }
@media (min-width: 1000px) {
  .msteps { flex-direction: row; gap: var(--fm-s4); }
  .msteps::before { display: none; }
  .mstep { flex: 1 1 0; min-width: 0; display: block; }
  .mstep__dot { display: none; }
  .mstep__body { height: 100%; padding: var(--fm-s6); }
  .mstep__n { display: flex; align-items: center; gap: var(--fm-s2); margin-bottom: var(--fm-s4); font-family: var(--fm-display); font-weight: 900; font-size: var(--fm-t-xs); letter-spacing: var(--fm-track-label); color: var(--fm-mid); }
  .mstep__n .star { width: 16px; height: 16px; }
}

/* ---- Depoimentos em cards verticais --------------------------------------- */
.dtrack { display: flex; gap: var(--fm-s6); overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--fm-s5)); padding: 8px calc(var(--fm-s5) + 12px) 28px var(--fm-s5); scrollbar-width: none; scroll-padding-left: var(--fm-s5); }
.dtrack::-webkit-scrollbar { display: none; }
.dcard { flex: 0 0 min(76vw, 288px); scroll-snap-align: start; display: flex; flex-direction: column; background: var(--fm-white); color: var(--fm-dark); border-radius: var(--fm-r-sm); box-shadow: 10px 10px 0 var(--fm-vibrant); }
.dcard__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--fm-dark); }
.dcard__media img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.dcard__open { position: absolute; inset: 0; z-index: 1; width: 100%; cursor: pointer; background: transparent; }
.dcard__media::after { content: ""; position: absolute; inset: auto 0 0 0; height: 45%; background: linear-gradient(to top, color-mix(in srgb, var(--fm-dark-deep) 80%, transparent), transparent); pointer-events: none; }
.dcard--print .dcard__media::after { display: none; }
.dcard__chip { position: absolute; z-index: 2; left: var(--fm-s4); top: var(--fm-s4); padding: 6px 12px; background: var(--fm-cream); color: var(--fm-dark); font-family: var(--fm-display); font-weight: 900; font-size: var(--fm-t-xs); letter-spacing: .08em; text-transform: uppercase; border-left: 3px solid var(--fm-orange); }
.dcard__play { position: absolute; z-index: 2; left: var(--fm-s4); bottom: var(--fm-s4); width: 58px; height: 58px; border-radius: var(--fm-r-pill); background: var(--fm-cream); display: flex; align-items: center; justify-content: center; pointer-events: none; transition: transform var(--fm-ease), background var(--fm-ease); }
.dcard__play::before { content: ""; border-style: solid; border-width: 10px 0 10px 16px; border-color: transparent transparent transparent var(--fm-dark); margin-left: 4px; }
.dcard:hover .dcard__play { transform: scale(1.08); background: var(--fm-orange); }
.dcard__zoom { position: absolute; z-index: 2; right: var(--fm-s4); bottom: var(--fm-s4); padding: 6px 10px; background: var(--fm-dark); color: var(--fm-cream); font-family: var(--fm-display); font-weight: 700; font-size: var(--fm-t-xs); pointer-events: none; }
.dcard__body { display: flex; flex-direction: column; gap: var(--fm-s3); padding: var(--fm-s5) var(--fm-s5) var(--fm-s6); min-height: 154px; }
.dcard__q { font-family: var(--fm-display); font-weight: 900; font-size: var(--fm-t-md); line-height: var(--fm-lead-snug); color: var(--fm-mid); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.dcard__k { margin-top: auto; font-size: var(--fm-t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--fm-mute-light); }
@media (min-width: 900px) { .dtrack { margin-inline: 0; padding-inline: 0 24px; } .dcard { flex-basis: 288px; } }
.dnav { display: flex; align-items: center; justify-content: space-between; gap: var(--fm-s5); margin-top: var(--fm-s5); }
.dnav__hint { font-size: var(--fm-t-sm); color: var(--fm-fg-mute); }
.dnav__btns { display: flex; gap: var(--fm-s3); }
.darrow { width: 48px; height: 48px; border: 1.5px solid var(--fm-fg); border-radius: var(--fm-r-pill); font-size: 26px; line-height: 1; color: var(--fm-fg); cursor: pointer; transition: background var(--fm-ease-fast), color var(--fm-ease-fast); }
.darrow:hover { background: var(--fm-orange); border-color: var(--fm-orange); color: var(--fm-dark); }

/* Lightbox */
.lb { padding: 0; border: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: min(94vw, 960px); overflow: visible; }
.lb::backdrop { background: color-mix(in srgb, var(--fm-dark-deep) 88%, transparent); }
.lb__box { position: relative; background: var(--fm-dark-deep); padding: var(--fm-s3); border-radius: var(--fm-r-sm); }
.lb__box iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.lb__box img { display: block; width: 100%; max-height: 82vh; object-fit: contain; margin-inline: auto; }
.lb__x { position: absolute; z-index: 2; right: 0; top: -56px; width: 48px; height: 48px; border-radius: var(--fm-r-pill); background: var(--fm-cream); color: var(--fm-dark); font-size: 26px; line-height: 1; cursor: pointer; }

/* ---- Quem e planos --------------------------------------------------------- */
.v7 .photo { overflow: visible; }

/* ---- Onboarding: stepper --------------------------------------------------- */
.ostepper { margin-top: clamp(28px, 3vw, 44px); }
.orail { position: relative; display: flex; justify-content: space-between; gap: var(--fm-s2); padding-block: var(--fm-s2); }
.orail::before { content: ""; position: absolute; left: 23px; right: 23px; top: 50%; height: 4px; transform: translateY(-50%); background: var(--fm-line); }
.orail::after { content: ""; position: absolute; left: 23px; top: 50%; height: 4px; width: calc((100% - 46px) * var(--p, 0)); transform: translateY(-50%); background: var(--fm-orange); transition: width var(--fm-ease); }
.onode { position: relative; z-index: 1; width: 46px; height: 46px; flex: none; padding: 0; white-space: nowrap; letter-spacing: -.03em; border-radius: var(--fm-r-pill); border: 2px solid var(--fm-line); background: var(--fm-white); color: var(--fm-mid); font-family: var(--fm-display); font-weight: 900; font-size: var(--fm-t-sm); cursor: pointer; transition: background var(--fm-ease-fast), color var(--fm-ease-fast), border-color var(--fm-ease-fast), transform var(--fm-ease-fast); }
.s-dark .onode { background: var(--fm-dark); color: var(--fm-cream); border-color: var(--fm-line-dark); }
.onode.is-past { background: var(--fm-mid); border-color: var(--fm-mid); color: var(--fm-cream); }
.onode[aria-selected="true"] { background: var(--fm-orange); border-color: var(--fm-orange); color: var(--fm-dark); transform: scale(1.14); }
.onode--hit::after { content: ""; position: absolute; right: -7px; top: -9px; width: 20px; height: 20px; background: var(--fm-orange); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.onode--hit[aria-selected="true"]::after { background: var(--fm-dark); }
.ocap { margin-top: var(--fm-s3); font-size: var(--fm-t-xs); letter-spacing: var(--fm-track-label); text-transform: uppercase; color: var(--fm-fg-mute); }
.ostage { margin-top: var(--fm-s6); }
.js .ostage { display: grid; }
.js .opanel { grid-area: 1 / 1; visibility: hidden; opacity: 0; transition: opacity var(--fm-ease); }
.js .opanel.is-on { visibility: visible; opacity: 1; }
.opanel { padding: clamp(24px, 3vw, 36px); background: var(--fm-white); color: var(--fm-dark); border-radius: var(--fm-r-sm); box-shadow: 10px 10px 0 var(--fm-vibrant); }
.opanel + .opanel { margin-top: var(--fm-s6); }
.js .opanel + .opanel { margin-top: 0; }
.opanel__d { font-family: var(--fm-display); font-weight: 900; font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1; color: var(--fm-mid); letter-spacing: var(--fm-track-tight); }
.opanel__t { margin-top: var(--fm-s4); max-width: 62ch; font-size: var(--fm-t-md); line-height: var(--fm-lead-relaxed); color: var(--fm-dark); }
.opanel--hit .opanel__d::after { content: "Campanha no ar"; margin-left: var(--fm-s3); padding: 4px 10px; font-size: var(--fm-t-xs); letter-spacing: .08em; text-transform: uppercase; vertical-align: middle; background: var(--fm-orange); color: var(--fm-dark); }

/* ---- Temas: superfícies claras --------------------------------------------- */
.v7 .s-light .shout, .v7 .s-panel .shout { color: var(--fm-mid); }
.v7 .s-light .ptab, .v7 .s-panel .ptab { color: var(--fm-mid); border-color: var(--fm-line-light); }
.v7 .s-light .ptab[aria-selected="true"], .v7 .s-panel .ptab[aria-selected="true"] { color: var(--fm-dark); border-color: var(--fm-orange); }
.v7 .s-light .darrow, .v7 .s-panel .darrow { color: var(--fm-mid); border-color: var(--fm-mid); }
.v7 .s-light .ppanel, .v7 .s-panel .ppanel, .v7 .s-light .opanel, .v7 .s-panel .opanel, .v7 .s-light .dcard, .v7 .s-panel .dcard { border: 1px solid var(--fm-line-light); }
.v7 .s-panel .onode, .v7 .s-light .onode { background: var(--fm-white); }
.v7 .s-panel .onode.is-past, .v7 .s-light .onode.is-past { background: var(--fm-mid); }
.v7 .s-panel .onode[aria-selected="true"], .v7 .s-light .onode[aria-selected="true"] { background: var(--fm-orange); }

/* ---- Ajustes de celular nos blocos 03 e 05 ---------------------------------- */
.ptabs { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding: 0 0 var(--fm-s2); gap: 10px; }
.ptab { min-height: 44px; padding: 0 var(--fm-s4); }
@media (max-width: 859px) {
  .ppanel { box-shadow: 6px 6px 0 var(--fm-vibrant); padding: var(--fm-s6) var(--fm-s5); }
  .prow { grid-template-columns: 1fr; gap: var(--fm-s2); }
  .prow__k { justify-self: start; }
  .pbridge { margin-top: var(--fm-s8); }
}
.pbridge .btn { justify-self: start; }
@media (max-width: 859px) { .pbridge .btn { width: 100%; justify-self: stretch; } }
.dnav { justify-content: flex-end; }

/* ---- Ícones ----------------------------------------------------------------- */
.ic { width: 26px; height: 26px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.v7 .pfoot { display: grid; grid-template-columns: auto 1fr; gap: var(--fm-s5); align-items: center; }
.pfoot__ico { display: flex; gap: var(--fm-s3); color: var(--fm-mid); }
.pfoot__ico span { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: var(--fm-r-pill); background: var(--fm-white); border: 1.5px solid var(--fm-mid); }
.s-panel .pfoot__ico span { background: var(--fm-mist); }
.pfoot__ico .ic { width: 24px; height: 24px; }
@media (max-width: 560px) { .v7 .pfoot { grid-template-columns: 1fr; } }
.qa summary { justify-content: flex-start; }
.qa summary::after { margin-left: auto; }
.qi { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; border-radius: var(--fm-r-pill); background: var(--fm-mist); color: var(--fm-mid); }
.qi .ic { width: 22px; height: 22px; }
.ico-line { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--fm-vibrant); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke var(--fm-ease-fast); }
.footer a:hover .ico-line { stroke: var(--fm-orange); }

/* Vídeo vertical (Shorts) no lightbox */
.lb--v { width: min(94vw, 460px); }
.lb--v .lb__box iframe { aspect-ratio: 9 / 16; height: min(78vh, 720px); width: auto; max-width: 100%; margin-inline: auto; }

/* ---- Rodada final ------------------------------------------------------------ */
.v7 .section .lead { font-style: italic; }
.eyebrow--orange { color: var(--fm-orange); }
.v7 .s-light .eyebrow--orange, .v7 .s-panel .eyebrow--orange { color: var(--fm-mid); }
.v7 .filter--no { opacity: .6; }
.mi { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-right: var(--fm-s3); border-radius: var(--fm-r-pill); background: var(--fm-mist); color: var(--fm-mid); vertical-align: middle; flex: none; }
.mi .ic { width: 20px; height: 20px; }
.mstep h3 { display: flex; align-items: center; }
.opanel__d { font-size: clamp(1.25rem, 2.6vw, 1.75rem); }
.ic--heart { display: inline-block; vertical-align: -.2em; width: 1.1em; height: 1.1em; margin-left: .2em; fill: var(--fm-vibrant); stroke: var(--fm-vibrant); }
.lead b, .qa__a b { font-weight: 600; font-style: normal; }

/* ---- Transição fluida entre blocos: cada bloco sobe sobre o anterior com um arco suave --- */
.v7 { --arco: clamp(28px, 7vw, 88px); }
.v7 .section { padding-bottom: calc(clamp(56px, 7vw, 104px) + var(--arco)); }
.v7 .section + .section, .v7 .section + .footer {
  position: relative;
  margin-top: calc(-1 * var(--arco));
  border-radius: 50% 50% 0 0 / var(--arco);
}
.v7 .section + .section { padding-top: calc(clamp(56px, 7vw, 104px) + var(--arco) * .35); }
.v7 .section + .footer { padding-top: calc(var(--arco) * .6); }
.v7 .footer { position: relative; margin-top: calc(-1 * var(--arco)); border-radius: 50% 50% 0 0 / var(--arco); padding-top: calc(var(--arco) * .6); }