/* =========================================================
   Flowork — LP Desktop
   Fiel ao artboard Paper "LP - Desktop" (1920 × 6411)
   Arquivo Paper: Clientes - Dudes / Flowork - Manucit
   ========================================================= */

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

html, body { margin: 0; padding: 0; background: #FFFFFF; }

body {
  font-family: Inter, system-ui, sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

.stage {
  position: relative;
  width: 1920px;
  height: 6411px;
  background: #FFFFFF;
  overflow: hidden;
}

/* ---------- linhas guia pontilhadas ---------- */
.lines { position: absolute; overflow: visible; }
.lines path {
  fill: none;
  stroke: rgb(191 0 0 / 8%);
  stroke-dasharray: 15 15;
  vector-effect: non-scaling-stroke;
}

/* ---------- botão verde ---------- */
.btn-green {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10.05px;
  padding: 20px 40px;
  background: #82FD49;
  /* box-shadow no lugar de drop-shadow: o botao e' um retangulo solido,
     entao nao precisa da passagem de mascara alpha (bem mais barato) */
  box-shadow:
    0 83px 16.5px #00000005,
    0 47px 14px  #0000000F,
    0 21px 10.5px #0000001C,
    0 5px 5.5px  #0000001F;
}
.btn-green--r9 { border-radius: 9px; }
.btn-green--r4 { border-radius: 4px; }
.btn-green__txt {
  flex-shrink: 0;
  width: max-content;
  color: #000000;
  font-size: 21px;
  font-weight: 600;
  line-height: 26px;
}
.btn-green__txt--sm { font-size: 20.09px; }

/* ---------- sombra do logo ---------- */
.logo-shadow {
  filter: drop-shadow(#00000038 6px 7px 4.5px) drop-shadow(#00000033 1px 1px 2px);
}

/* =========================================================
   SECTION - 1
   ========================================================= */
.s1 { position: absolute; left: 317px; top: 2px; width: 1286px; height: 6409px; }
.s1 > .lines { left: 0; top: 0; }

.s1__stack {
  position: absolute;
  left: 3px;
  top: 254px;
  width: 522px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px;
}
.s1__logo {
  flex-shrink: 0;
  width: 305px;
  height: 132px;
  background-image: url("assets/logo-flowork.webp");
  background-position: 50%;
  background-size: cover;
  filter: drop-shadow(#00000038 6px 7px 4.5px) drop-shadow(#00000033 1px 1px 2px);
}
.s1__copy {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  min-width: 0;
}
.s1__text {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  min-width: 0;
}
.s1__title {
  align-self: stretch;
  width: 522px;
  color: #595959;
  font-size: 44px;
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 110%;
}
.s1__sub {
  align-self: stretch;
  width: 522px;
  color: #676767;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 140%;
}
.s1__stack .btn-green { width: 522px; }

/* =========================================================
   SECTION - 2
   ========================================================= */
.s2 { position: absolute; left: 0; top: 909px; width: 3440px; height: 1026px; }
.s2__wave { position: absolute; left: calc(0px - var(--bleed)); top: 0; width: calc(1924px + 2 * var(--bleed)); height: 1026px; }
.s2__wave svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }

.s2__copy {
  position: absolute;
  left: 320px;
  top: 323px;
  width: 411px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 36px;
}
.s2__texts {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  min-width: 0;
}
.s2__title {
  align-self: stretch;
  width: 411px;
  color: #FFFFFF;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 120%;
}
.s2__sub {
  align-self: stretch;
  width: 411px;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 140%;
}
.s2__pill {
  flex-shrink: 0;
  width: 386px;
  height: 54px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  border-radius: 28px;
  outline: 2px dashed #B8003C;
  outline-offset: -2px;
}
.s2__pill-row {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 0;
}
.s2__pill-txt {
  flex-shrink: 0;
  width: 292px;
  color: #7E0029;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 120%;
  white-space: pre-wrap;
}
.s2__pill-emoji {
  flex-shrink: 0;
  width: 25px;
  height: fit-content;
  color: #FFFFFF;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 120%;
}

.s2__squiggle { position: absolute; left: 871.984px; top: 82.5px; width: 186px; height: 37px; }
.s2__chevron  { position: absolute; left: 937.5px;   top: 59px;   width: 46px;  height: 46px; }

.s2__cards {
  position: absolute;
  left: 862px;
  top: 194px;
  display: flex;
  align-items: center;
  gap: 20px;
  border-radius: 25px;
}
.pcard {
  position: relative;
  flex-shrink: 0;
  width: 413px;
  height: 513px;
  border-radius: 25px;
  overflow: hidden;
}
.pcard__bg {
  position: absolute;
  left: 0; top: 0;
  width: 413px; height: 513px;
  background: #D9D9D9;
  border-radius: 10px;
  outline: 2px solid #B8003C;
}
.pcard__img { position: absolute; background-position: 50%; background-size: cover; }
.pcard__img--1 { left: -75px; top: -35px; width: 562px; height: 562px; background-image: url("assets/pote-1.webp"); }
.pcard__img--2 { left: -70px; top: -33px; width: 554px; height: 554px; background-image: url("assets/pote-2.webp"); }
.pcard__img--3 { left: -76px; top: -36px; width: 567px; height: 567px; background-image: url("assets/pote-3.webp"); }

.s2__badge {
  position: absolute;
  left: 998px;
  top: 176.3px;
  width: 142px;
  height: 34.39px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11.09px;
  padding: 11.09px;
  background: #82FD49;
  border-radius: 26.625px;
  box-shadow: #000000 0 0 0 1.10938px;
}
.s2__badge-txt {
  flex-shrink: 0;
  width: max-content;
  color: #000000;
  font-size: 13.31px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 140%;
  text-align: center;
}

/* ---- info do produto (estrelas / nome / preço) ---- */
.pinfo {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.pinfo__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.pinfo__rate { display: flex; align-items: center; gap: 7.88px; }
.pinfo__stars { display: flex; align-items: center; gap: 2.25px; }
.pinfo__stars i {
  display: block;
  flex-shrink: 0;
  /* o SVG ganhou 2px de folga em volta para o contorno nao ser cortado;
     a margem negativa devolve a caixa ao tamanho original no layout */
  width: 23.13px;
  height: 22.01px;
  margin: -2px;
  background: url("assets/star.svg") no-repeat center / contain;
}
.pinfo__count {
  width: max-content;
  color: #000000;
  font-size: 13.51px;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 18px;
}
.pinfo__name {
  align-self: stretch;
  color: #FFFFFF;
  font-size: 28.5px;
  font-weight: 700;
  letter-spacing: -0.06em;
  line-height: 36px;
  text-align: center;
}
.pinfo__price {
  width: max-content;
  color: #000000;
  font-family: Jura, system-ui, sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 22px;
}

/* =========================================================
   Group 4 — HERO
   ========================================================= */
.hero {
  position: absolute;
  left: 856.047px;
  top: 1.422px;
  width: 876.19px;
  height: 941.96px;
  rotate: 2.2deg;
  transform-origin: 0% 0%;
}
.hero__card {
  position: absolute;
  left: 142.02px;
  top: 140.5px;
  width: 608.51px;
  height: 701.54px;
  background: #FFFDF1;
  box-shadow:
    0 479px 95.5px #00000003,
    0 269px 81px   #0000000A,
    0 120px 60px   #00000012,
    0 30px 33px    #00000014;
}
.hero__photo {
  position: absolute;
  left: 0; top: 0;
  width: 876.19px;
  height: 941.96px;
  background-image: url("assets/hero-manu.webp");
  background-position: 100%;
  background-repeat: no-repeat;
  background-size: 123.23% 100.04%;
}

/* =========================================================
   SECTION - 3
   ========================================================= */
.s3 { position: absolute; left: 323px; top: 1949px; width: 1307px; height: 907px; }

.s3__panel {
  position: absolute;
  left: calc(50% + 15.5px);
  top: 185px;
  translate: -50%;
  width: 1126px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.s3__mask { position: relative; flex-shrink: 0; width: 543px; height: 703px; }
.s3__mask-rect {
  position: absolute;
  left: 0; top: 0;
  width: 522px; height: 703px;
  border-radius: 20px;
  border: 1px solid #00000000;
}

.nutri {
  flex-shrink: 0;
  width: 522px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.nutri__inner {
  width: 522px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 43px;
}
.nutri__head { display: flex; align-items: center; gap: 15px; }
.nutri__head-txt,
.nutri__head-emoji {
  flex-shrink: 0;
  width: max-content;
  color: #000000;
  font-family: system-ui, sans-serif;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 110%;
}
.nutri__head-emoji { rotate: 180deg; transform-origin: 50% 50%; }

.nutri__rows {
  position: relative;
  align-self: stretch;
  width: 522px;
  height: 545px;
  /* grade completa (linhas, divisória, entalhes e pontas) num só SVG:
     antes as linhas eram <hr> num flex com gap, o que dava passo irregular
     de ~61.4px e desalinhava dos entalhes, que ficavam num SVG à parte */
  background: url("assets/nutri-grid.svg") no-repeat 0 0 / 522px 545px;
}
.nutri__linha {
  position: absolute;
  left: 0;
  width: 522px;
  height: 60px;
  display: flex;
  align-items: center;
}
.nutri__par {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nutri__c,
.nutri__v,
.nutri__label {
  color: #000000;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 140%;
}
.nutri__c { width: max-content; text-align: center; }
.nutri__v { flex-shrink: 0; width: max-content; text-align: center; }
.nutri__label { flex-shrink: 0; }

.s3__photo { position: absolute; left: 91.5px; top: 176.94px; width: 586.38px; height: 730.43px; }
.s3__photo-mask { position: absolute; left: 0.5px; top: 8.062px; width: 549px; height: 703px; overflow: hidden; }
.s3__photo-img {
  position: absolute;
  left: -7px;
  top: -8.984px;
  width: 543px;
  height: 712px;
  border-radius: 20px;
  background-image: url("assets/manu-nutri.webp");
  background-size: 104.052%;
  background-position: 0% 100%;
  background-repeat: no-repeat;
}

.s3__rule   { position: absolute; left: 979px;    top: 306px;    width: 1px;   height: 540px; }

.s3__jar-d {
  position: absolute; left: 1180px; top: 669px; width: 127px; height: 177px;
  background: url("assets/jar-d.webp") 50% / cover;
}
.s3__jar-e {
  position: absolute; left: 0; top: 170px; width: 183px; height: 246px;
  background: url("assets/jar-e.webp") 50% / cover;
}

/* ---- bloco de título centralizado (seções 3 e 4) ---- */
.headblock {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.headblock--c { left: calc(50% + 0.5px); top: 0; translate: -50%; width: 886px; }
.headblock__title {
  align-self: stretch;
  color: #595959;
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 110%;
  text-align: center;
}
.headblock__sub {
  color: #9C9C9C;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 140%;
  text-align: center;
}

/* =========================================================
   SECTION - 4
   ========================================================= */
.s4 { position: absolute; left: 319px; top: 3132px; width: 1281px; height: 577.21px; }
.s4__gal { position: absolute; left: 0; top: 152px; width: 1281px; height: 425.21px; }
.s4__row { position: absolute; left: 56.98px; top: 0; display: flex; align-items: center; gap: 18.63px; }
.s4__cell {
  position: relative;
  flex-shrink: 0;
  width: 376.85px;
  height: 425.21px;
  overflow: hidden;
}
.s4__img { position: absolute; background-position: 50%; background-size: cover; }
.s4__img--1 { left: -4.98px;  top: -106.4px; width: 389px; height: 695px; background-image: url("assets/gallery-1.webp"); }
.s4__img--2 { left: -86.46px; top: -20.4px;  width: 534px; height: 534px; background-image: url("assets/gallery-2.webp"); }
.s4__img--3 { left: -31.93px; top: -60px;    width: 427px; height: 546px; background-image: url("assets/gallery-3.webp"); }

.s4__arrow { position: absolute; width: 26.3px; height: 26.3px; overflow: visible; }
.s4__arrow--l { left: 26.3px;   top: 212.6px;   rotate: 180deg; transform-origin: 0% 0%; }
.s4__arrow--r { left: 1254.7px; top: 186.304px; }

/* =========================================================
   SECTION - 5
   ========================================================= */
.s5 { position: absolute; left: -35px; top: 3685px; width: 2049px; height: 654px; }
.s5__wave { position: absolute; left: calc(0px - var(--bleed)); top: 84px; width: calc(2049px + 2 * var(--bleed)); height: 570px; }
.s5__wave-b { position: absolute; left: 35px; top: 114px; width: calc(1924px + 2 * var(--bleed)); height: 456px; overflow: visible; }
.s5__wave-t { position: absolute; left: 35px; top: 0;     width: calc(1924px + 2 * var(--bleed)); height: 456px; overflow: visible; }
.s5__band   { position: absolute; left: 0; top: 390px; width: 100%; height: 101px; background: #7FDAE2; }

.s5__jar { position: absolute; left: 734px; top: 0; width: 522px; height: 606px; }
.s5__jar-wrap { position: absolute; left: 17px; top: 0; width: 451px; height: 586px; }
.s5__jar-glow {
  position: absolute;
  /* era filter: blur(112.05px) sobre um circulo de 210px — trocado por
     gradiente: mesmo visual, sem o custo de blur em GPU movel */
  left: -29px; top: 119px;
  width: 546px; height: 546px;
  background: radial-gradient(circle closest-side,
              rgba(20,20,20,.92) 0%, rgba(20,20,20,.78) 26%,
              rgba(20,20,20,.34) 60%, rgba(20,20,20,0) 100%);
  border-radius: 50%;
}
.s5__jar-img {
  position: absolute;
  left: 0; top: 0;
  width: 451px; height: 586px;
  background-image: url("assets/jar-hand.webp");
  background-position: 50% 8.97%;
  background-repeat: no-repeat;
  background-size: 100.22% 126.62%;
}
.s5__cta {
  position: absolute;
  left: 50%;
  top: 542px;
  translate: -50%;
  width: 522px;
}

.feat {
  position: absolute;
  width: 364px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 56px;
}
.feat__item {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  min-width: 0;
}
.feat__ico {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  background: url("assets/check-circle.svg") no-repeat center / contain;
}
.feat__body {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  min-width: 0;
}
.feat__t {
  align-self: stretch;
  color: #FFFFFF;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.06em;
  line-height: 24px;
  text-align: center;
}
.feat__d {
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 20px;
  text-align: center;
}

/* =========================================================
   FAIXA
   ========================================================= */
.faixa { position: absolute; left: 320px; top: 2957px; width: 1280px; height: 75px; }
.faixa__bg {
  position: absolute;
  left: 0; top: 0;
  width: 1280px; height: 75px;
  background: #FF3476;
  border-radius: 8px;
  outline: 2px solid #B8003C;
}
.faixa__row {
  position: absolute;
  left: calc(50% + 0.5px);
  top: 15px;
  translate: -50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.faixa__logo {
  flex-shrink: 0;
  width: 108px;
  height: 46px;
  background-image: url("assets/logo-flowork.webp");
  background-position: 50%;
  background-size: cover;
  filter: drop-shadow(#00000038 6px 7px 4.5px) drop-shadow(#00000033 1px 1px 2px);
}
.faixa__eq {
  flex-shrink: 0;
  width: max-content;
  color: #FFFFFF;
  font-family: system-ui, sans-serif;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 110%;
  text-align: center;
}
.faixa__txt {
  flex-shrink: 0;
  width: max-content;
  color: #FFFFFF;
  font-family: system-ui, sans-serif;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 110%;
}

/* =========================================================
   SECTION - 6
   ========================================================= */
.s6 { position: absolute; left: 428px; top: 4441.41px; width: 1064px; height: 158.12px; }
.s6__t1 {
  position: absolute;
  left: 0; top: 0;
  width: 1064px;
  color: #3A3A3A;
  font-size: 76.86px;
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 120%;
  text-align: center;
}
.s6__t2 {
  position: absolute;
  left: 367.78px; top: 100.12px;
  width: 590.43px;
  color: #FF3476;
  font-size: 48.11px;
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 120%;
  text-align: center;
}
.s6__pill {
  position: absolute;
  left: 100.99px; top: 104.5px;
  width: 253.66px; height: 53.58px;
  border-radius: 9999px;
  background: url("assets/pill-mask.webp") 50% / cover;
}

/* =========================================================
   SECTION - 7
   ========================================================= */
.s7 { position: absolute; left: 377px; top: 4749px; width: 1177px; height: 742px; }

.s7__left {
  position: absolute;
  left: calc(50% + 274px);
  top: 0;
  translate: -50%;
  display: flex;
  align-items: center;
  gap: 53px;
}
.s7__card { position: relative; flex-shrink: 0; width: 629.14px; height: 742px; }
.s7__group {
  position: absolute;
  left: calc(50% - 0.29px);
  top: 0;
  translate: -50%;
  width: 603.09px;
  height: 730.42px;
}
.s7__rect {
  position: absolute;
  left: 603.09px; top: 730.42px;
  width: 603.09px; height: 667.92px;
  border-radius: 11.5757px;
  rotate: 180deg;
  transform-origin: 0% 0%;
  background: #FF3476;
}
.s7__mask { position: absolute; left: 0; top: 62.51px; width: 603.09px; height: 652.87px; }
.s7__mask-rect {
  position: absolute;
  left: 603.09px; top: 652.87px;
  width: 603.09px; height: 652.87px;
  border-radius: 11.5757px;
  rotate: 180deg;
  transform-origin: 0% 0%;
  background: #FF3476;
}
.s7__cta {
  position: absolute;
  left: calc(50% + 0.72px);
  top: 351.49px;
  translate: -50%;
  width: 522px;
}

.s7__price {
  position: absolute;
  left: 37.27px;
  top: 167px;
  width: 529px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 21px;
}
.s7__price-a,
.s7__price-b,
.s7__price-c {
  align-self: stretch;
  flex-shrink: 0;
  width: 529px;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  color: #FFFFFF;
  line-height: 25.9524px;
  text-align: center;
}
.s7__price-a,
.s7__price-c { height: 38.2px; font-size: 27.78px; font-weight: 500; letter-spacing: -0.03em; }
.s7__price-b { height: 89.13px; font-size: 96px;    font-weight: 700; letter-spacing: -0.08em; }

.s7__warn {
  position: absolute;
  left: 50%;
  top: 619.3px;
  translate: -50%;
  width: 450.29px;
  height: 62.51px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  color: #FFFFFF;
  font-family: system-ui, sans-serif;
  font-size: 20.84px;
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 140%;
  text-align: center;
  white-space: pre-wrap;
}
.s7__pay { position: absolute; left: 99.2667px; top: 512px; width: 405px; height: 63px; }
.s7__logo {
  position: absolute;
  left: 148.17px; top: 0;
  width: 304.44px; height: 131.96px;
  background-image: url("assets/logo-flowork.webp");
  background-position: 50%;
  background-size: cover;
  filter: drop-shadow(#00000038 3.9px 4.5px 2.9px) drop-shadow(#00000033 .7px .7px 1.3px);
}
.s7__tick { position: absolute; width: 30.05px; height: 28.31px; overflow: visible; }
.s7__tick--tr { left: 631.14px; top: 76.08px; rotate: 180deg; transform-origin: 0% 0%; }
.s7__tick--bl { left: -2px; top: 715.69px; }

.s7__right {
  position: absolute;
  left: 0;
  top: 81px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 64px;
}
.s7__head { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.s7__head-t {
  width: 483px;
  color: #FF3476;
  font-size: 60px;
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 110%;
}
.s7__head-d {
  width: 437px;
  color: #9C9C9C;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 140%;
}
.s7__list {
  width: 414px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 27px;
}
.s7__li {
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.s7__check {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  background: url("assets/check-pink.svg") no-repeat center / contain;
}
.s7__li-txt {
  flex-shrink: 0;
  color: #9C9C9C;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 140%;
}
.s7__li-txt--c { display: flex; flex-wrap: wrap; justify-content: center; text-align: center; }

/* =========================================================
   RODAPÉ
   ========================================================= */
.ft { position: absolute; left: 0; top: 5641px; width: 1924px; height: 770px; }
.ft__bg {
  position: absolute;
  left: calc(0px - var(--bleed)); top: 0;
  width: calc(1924px + 2 * var(--bleed)); height: 770px;
  background: #F4EFE5;
  border-radius: 50px 50px 0 0;
  outline: 2px solid #393939;
}
.ft__top {
  position: absolute;
  left: 428px;
  top: 100px;
  width: 1064px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
}
.ft__head {
  width: 752px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.ft__title {
  align-self: stretch;
  width: 752px;
  color: #3A3A3A;
  font-size: 64px;
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 120%;
  text-align: center;
}
.ft__sub {
  width: 758px;
  color: #9C9C9C;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 140%;
  text-align: center;
}
.ft__input {
  align-self: stretch;
  flex-shrink: 0;
  height: 66px;
  min-width: 0;
  background: #D9D9D9;
  border-radius: 8px;
}
.ft__nav { display: flex; align-items: center; justify-content: center; gap: 21px; }
.ft__nav-i {
  flex-shrink: 0;
  width: 110px;
  color: #595959;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 140%;
  text-align: center;
}

.ft__placeholder {
  position: absolute;
  left: 457px;
  top: 297px;
  width: 758px;
  color: #9C9C9C;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 140%;
}
.ft__send {
  position: absolute;
  left: 1362px;
  top: 284px;
  width: 122px;
  height: 50.83px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11.3px;
  padding: 11.3px;
  background: #FF3476;
  border-radius: 4px;
  box-shadow: #B8003C 0 0 0 1.93648px;
}
.ft__send-txt {
  flex-shrink: 0;
  width: max-content;
  color: #FFFFFF;
  font-size: 16.64px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 140%;
}
.ft__social { position: absolute; left: 762px; top: 506px; width: 395.13px; height: 30.31px; overflow: visible; }

.ft__legal {
  position: absolute;
  left: 581px;
  top: 614px;
  width: 758px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 17px;
}
.ft__legal-c {
  align-self: stretch;
  width: 758px;
  color: #6F6F6F;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 140%;
  text-align: center;
}
.ft__legal-row { display: flex; align-items: center; gap: 20px; }
.ft__legal-i {
  flex-shrink: 0;
  color: #6F6F6F;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 140%;
  text-align: center;
}

/* =========================================================
   RESPONSIVO — os dois artboards escalam proporcionalmente
   Desktop 1920×6411 (>=768px) · Mobile 402×7049 (<768px)
   ========================================================= */
html { scroll-behavior: smooth; }

.viewport {
  --s: 1;
  --bleed: 0px;
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #FFFFFF;
}
/* A origem do artboard é empurrada `--bleed` para a direita, de modo que o
   conteúdo fique centralizado; quem recorta é o .viewport, não o palco, para
   que os fundos "full-bleed" alcancem as bordas em vez de virar faixa branca. */
.stage {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--aw);
  overflow: visible;
  transform: translateX(calc(var(--bleed) * var(--s))) scale(var(--s));
  transform-origin: 0 0;
}
.stage--desktop { --aw: 1920px; }
.stage--mobile { --aw: 402px; height: 7049px; display: none; }
html.is-mobile .stage--desktop { display: none; }
html.is-mobile .stage--mobile  { display: block; }

/* ---------- estados interativos ---------- */
a { color: inherit; text-decoration: none; }

.btn-green,
.m-btn {
  cursor: pointer;
  transition: filter .18s ease, transform .18s ease;
}
.btn-green:hover,
.m-btn:hover { transform: translateY(-2px); }
.btn-green:active,
.m-btn:active { transform: translateY(0); }

.ft__nav-i, .ft__legal-i,
.mft__nav-i, .mft__legal-i { cursor: pointer; transition: color .15s ease; }
.ft__nav-i:hover, .ft__legal-i:hover,
.mft__nav-i:hover, .mft__legal-i:hover { color: #FF3476; }

:focus-visible { outline: 3px solid #FF3476; outline-offset: 3px; border-radius: 4px; }

/* ---------- formulário (desktop) ---------- */
.ft__form {
  position: relative;
  align-self: stretch;
  flex-shrink: 0;
  height: 66px;
  min-width: 0;
}
.ft__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 66px;
  padding: 0 158px 0 29px;
  background: #D9D9D9;
  border: 0;
  border-radius: 8px;
  font-family: inherit;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #3A3A3A;
}
.ft__input::placeholder { color: #9C9C9C; }
.ft__send {
  position: absolute;
  /* anula o left da regra do artboard, senão o botão fica preso à esquerda */
  left: auto;
  right: 8px;
  top: 50%;
  translate: 0 -50%;
  width: 122px;
  height: 50.83px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11.3px;
  padding: 11.3px;
  background: #FF3476;
  border: 0;
  border-radius: 4px;
  box-shadow: #B8003C 0 0 0 1.93648px;
  cursor: pointer;
  transition: background .15s ease;
}
.ft__send:hover { background: #E82A67; }
.ft__msg {
  position: absolute;
  left: 29px;
  top: 74px;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #3A3A3A;
}
.ft__msg[data-state="erro"] { color: #B8003C; }
.ft__msg[data-state="ok"]   { color: #2C8A3D; }

/* ---------- redes sociais clicáveis (desktop) ---------- */
.ft__social-links {
  position: absolute;
  left: 762px;
  top: 506px;
  width: 395.13px;
  height: 30.31px;
}
.ft__social-links a {
  position: absolute;
  top: 0;
  width: 30.31px;
  height: 30.31px;
  border-radius: 6px;
}
.ft__social-links a:nth-child(1) { left: 0; }
.ft__social-links a:nth-child(2) { left: 92.31px; width: 25.9px; }
.ft__social-links a:nth-child(3) { left: 180.2px; }
.ft__social-links a:nth-child(4) { left: 272.51px; }
.ft__social-links a:nth-child(5) { left: 364.82px; }

/* =========================================================
   MOBILE — artboard "LP - Mobile" (402 × 7049)
   ========================================================= */

/* ---- SECTION 1 ---- */
.m1 { position: absolute; left: -135.01px; top: 22px; width: 571.05px; height: 737.12px; }
.m1__photo {
  position: absolute;
  left: 18.55px; top: 21px;
  width: 552.91px; height: 482.34px;
  rotate: 2.2deg;
  transform-origin: 0% 0%;
}
.m1__card {
  position: absolute;
  left: 176.96px; top: 71.94px;
  width: 311.6px; height: 359.23px;
  background: #FFFDF1;
  box-shadow:
    0 479px 95.5px #00000003,
    0 269px 81px   #0000000A,
    0 120px 60px   #00000012,
    0 30px 33px    #00000014;
}
.m1__img {
  position: absolute;
  left: 0; top: 0;
  width: 552.91px; height: 482.34px;
  background: url("assets/hero-manu.webp") 50% / cover;
}
.m1__stack {
  position: absolute;
  left: 155.01px; top: 514px;
  width: 362px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 27.74px;
}
.m1__text {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16.64px;
}
.m1__title {
  align-self: stretch;
  width: 362px;
  color: #595959;
  font-size: 30.51px;
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 110%;
  text-align: center;
}
.m1__sub {
  align-self: stretch;
  width: 362px;
  color: #676767;
  font-size: 11.1px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 140%;
  text-align: center;
}
.m1__logo {
  position: absolute;
  left: 283.01px; top: 0;
  width: 106px; height: 46px;
  background: url("assets/logo-flowork.webp") 50% / cover;
  filter: drop-shadow(#00000038 4.2px 4.8px 3.1px) drop-shadow(#00000033 .7px .7px 1.4px);
}

/* ---- botão verde mobile ---- */
.m-btn {
  width: 362px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6.97px;
  padding: 13.87px 27.74px;
  background: #82FD49;
  border-radius: 8px;
  /* box-shadow no lugar de drop-shadow: o botao e' um retangulo solido,
     entao nao precisa da passagem de mascara alpha (bem mais barato) */
  box-shadow:
    0 83px 16.5px #00000005,
    0 47px 14px  #0000000F,
    0 21px 10.5px #0000001C,
    0 5px 5.5px  #0000001F;
}
.m-btn__txt {
  flex-shrink: 0;
  width: max-content;
  color: #000000;
  font-size: 14px;
  font-weight: 600;
  line-height: 100%;
}
.m-btn__txt--xs  { font-size: 9.66px; }
.m-btn__txt--xxs { font-size: 6.75px; }

/* ---- ondas rosa ---- */
.m-wave { position: absolute; left: -226px; width: 864px; height: 936px; overflow: visible; }
.m-wave--a { top: 747px; box-shadow: #00000033 0 2px 3px; }
.m-wave--b { top: 893px; }

.m-chevron  { position: absolute; left: 50%; translate: -50%; top: 801px; width: 46px; height: 46px; }
.m-squiggle { position: absolute; left: calc(50% + 2.125px); translate: -50%; top: 827px; }

/* ---- Frame 8 ---- */
.m2 {
  position: absolute;
  left: 20px; top: 889px;
  width: 362px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
}
.m2__texts {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 21.14px;
}
.m2__title {
  align-self: stretch;
  width: 362px;
  color: #FFFFFF;
  font-size: 28.18px;
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 120%;
  text-align: center;
}
.m2__sub {
  align-self: stretch;
  width: 362px;
  color: #FFFFFF;
  font-size: 14.09px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 140%;
  text-align: center;
}
.m2__pill {
  flex-shrink: 0;
  width: 339.98px;
  height: 47.56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8.81px;
  padding: 8.81px;
  border-radius: 24.6618px;
  outline: 1.76156px dashed #B8003C;
  outline-offset: -1.76156px;
}
.m2__pill-row {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10.57px;
}
.m2__pill-txt {
  flex-shrink: 0;
  width: 257.19px;
  color: #7E0029;
  font-size: 15.85px;
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 120%;
  white-space: pre-wrap;
}
.m2__pill-emoji {
  flex-shrink: 0;
  width: 22.02px;
  height: fit-content;
  color: #FFFFFF;
  font-size: 15.85px;
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 120%;
}

/* ---- badge + cards ---- */
.m-badge {
  position: absolute;
  z-index: 1;
  /* coordenadas relativas a .m-cards: acompanha o primeiro card no carrossel */
  left: 73.18px; top: -18px;
  width: 142px; height: 34.39px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11.09px;
  padding: 11.09px;
  background: #82FD49;
  border-radius: 26.625px;
  box-shadow: #000000 0 0 0 1.10938px;
}
.m-badge__txt {
  flex-shrink: 0;
  width: max-content;
  color: #000000;
  font-size: 13.31px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 140%;
  text-align: center;
}

/* left 56.82 e nao os 45 do Paper: centraliza o card no artboard de 402px,
   pedido do cliente para o carrossel se comportar como um carrossel normal */
.m-cards { position: absolute; left: 56.82px; top: 1199.74px; width: 1800px; height: 467.65px; }
.m-cards__row { display: flex; align-items: center; gap: 13.96px; }
.mcard {
  position: relative;
  flex-shrink: 0;
  width: 288.36px;
  height: 358.18px;
  border-radius: 16px;
  /* no Paper cada card e' um "Mask group", entao recorta. Sem isto a imagem
     do card 3 (395.89px numa caixa de 288.36px) vazava 53px para os lados. */
  overflow: hidden;
}
.mcard__clip { position: absolute; left: 0; top: 0; width: 288.36px; height: 358.18px; border-radius: 16px; overflow: hidden; }
.mcard__img { position: absolute; background-position: 50%; background-size: cover; }
.mcard__img--0 { left: -34.91px; top: -11.17px; width: 370.75px; height: 370.75px; background-image: url("assets/pote-0.webp"); }
.mcard__img--1 { left: -52.37px; top: -24.44px; width: 392.4px;  height: 392.4px;  background-image: url("assets/pote-1.webp"); }
.mcard__img--2 { left: -48.88px; top: -23.04px; width: 386.81px; height: 386.81px; background-image: url("assets/pote-2.webp"); }
.mcard__img--3 { left: -53.06px; top: -25.14px; width: 395.89px; height: 395.89px; background-image: url("assets/pote-3.webp"); border-radius: 16px; }

.m-pinfo {
  position: absolute;
  top: 389px;
  width: 269px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9.99px;
}
.m-pinfo--1 { left: 9.68px; }
.m-pinfo--2 { left: 312px; }
.m-pinfo--3 { left: 614.32px; }
.m-pinfo__top { width: 269px; display: flex; flex-direction: column; align-items: center; gap: 6.66px; }
.m-pinfo__rate { display: flex; align-items: center; gap: 6.56px; }
.pinfo__stars--m { gap: 1.87px; }
.pinfo__stars--m i { width: 19.23px; height: 18.29px; margin: -1.66px; }
.m-pinfo__count {
  flex-shrink: 0;
  width: max-content;
  color: #000000;
  font-size: 11.25px;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 14px;
}
.m-pinfo__name {
  align-self: stretch;
  width: 269px;
  color: #FFFFFF;
  font-size: 23.73px;
  font-weight: 700;
  letter-spacing: -0.06em;
  line-height: 30px;
  text-align: center;
}
.m-pinfo__price {
  width: max-content;
  color: #000000;
  font-family: Jura, system-ui, sans-serif;
  font-size: 14.99px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 18px;
}

/* ---- blocos de título mobile ---- */
.m-head {
  position: absolute;
  left: calc(50% + 0.16px);
  translate: -50%;
  width: 354.32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14.84px;
}
.m-head__t {
  color: #595959;
  font-size: 25.97px;
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 110%;
  text-align: center;
}
.m-head__d {
  color: #9C9C9C;
  font-size: 12.99px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 140%;
  text-align: center;
}

/* ---- potes flutuantes + foto ---- */
.m-jar-e { position: absolute; left: -76px; top: 1918px; width: 172px; height: 231px; background: url("assets/jar-e.webp") 50% / cover; }
.m-jar-d { position: absolute; left: 310px; top: 2878px; width: 107px; height: 149px; background: url("assets/jar-d.webp") 50% / cover; }

.m-photo { position: absolute; left: 7px; top: 1996px; width: 410px; height: 510.73px; }
.m-photo__wrap { position: absolute; left: 10.14px; top: 5.63px; width: 364.99px; height: 491.54px; }
.m-photo__img {
  position: absolute;
  left: -16.125px; top: -12.625px;
  width: 394px; height: 505px;
  border-radius: 20px;
  background-image: url("assets/manu-nutri.webp");
  background-position: calc(8.5px + 50%) 100%;
  background-repeat: no-repeat;
  background-size: 100.254%;
}

/* ---- tabela nutricional mobile ---- */
.m-nutri {
  position: absolute;
  left: 22.44px; top: 2563.24px;
  width: 356.27px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 13.65px;
}
.m-nutri__inner { width: 356.27px; display: flex; flex-direction: column; align-items: flex-start; gap: 29.35px; }
.m-nutri__head { display: flex; align-items: center; gap: 10.24px; }
.m-nutri__head-txt,
.m-nutri__head-emoji {
  flex-shrink: 0;
  width: max-content;
  color: #000000;
  font-family: system-ui, sans-serif;
  font-size: 21.84px;
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 110%;
}
.m-nutri__head-emoji { rotate: 180deg; transform-origin: 50% 50%; }
.m-nutri__rows {
  position: relative;
  align-self: stretch;
  width: 356.27px;
  height: 371.97px;
  background: url("assets/nutri-grid.svg") no-repeat 0 0 / 356.27px 371.97px;
}
.m-nutri__linha {
  position: absolute;
  left: 0;
  width: 356.27px;
  height: 40.95px;
  display: flex;
  align-items: center;
}
.m-nutri__par {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.m-nutri__c,
.m-nutri__v,
.m-nutri__label {
  color: #000000;
  font-size: 10.92px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 140%;
}
.m-nutri__c { width: max-content; text-align: center; }
.m-nutri__v { flex-shrink: 0; width: max-content; text-align: center; }
.m-nutri__label { flex-shrink: 0; }


/* ---- FAIXA mobile ---- */
.m-faixa { position: absolute; left: calc(50% + 1.5px); translate: -50%; top: 3062px; width: 365px; height: 56.13px; }
.m-faixa__bg {
  position: absolute;
  left: 0; top: 0;
  width: 365px; height: 56.13px;
  background: #FF3476;
  border-radius: 5.9875px;
  outline: 1.49687px solid #B8003C;
}
.m-faixa__row {
  position: absolute;
  left: calc(50% + 0.14px);
  translate: -50%;
  top: 11.23px;
  height: 34.43px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11.97px;
}
.m-faixa__logo {
  flex-shrink: 0;
  width: 80.83px;
  height: 34.43px;
  background: url("assets/logo-flowork.webp") 50% / cover;
  filter: drop-shadow(#00000038 4.5px 5.2px 3.4px) drop-shadow(#00000033 .8px .8px 1.5px);
}
.m-faixa__eq,
.m-faixa__txt {
  flex-shrink: 0;
  width: max-content;
  color: #FFFFFF;
  font-family: system-ui, sans-serif;
  letter-spacing: -0.05em;
  line-height: 110%;
}
.m-faixa__eq  { font-size: 17.96px; font-weight: 600; text-align: center; }
.m-faixa__txt { font-size: 14.97px; font-weight: 500; }

/* ---- galeria mobile ---- */
.m-gal-off { position: absolute; left: -383.02px; top: 3348px; width: 376.85px; height: 425.21px; }
.m-gal { position: absolute; left: 54.15px; top: 3348px; width: 290.85px; height: 328.17px; overflow: hidden; }
.m-gal__img {
  position: absolute;
  left: -24.64px; top: -46.31px;
  width: 329.55px; height: 421.4px;
  background: url("assets/gallery-3.webp") 50% / cover;
}
.m-gal-arrow { position: absolute; left: 360px; top: 3509px; width: 20px; height: 19px; overflow: hidden; }

/* ---- SECTION 5 mobile ---- */
.m5 { position: absolute; left: -784px; top: 3683px; width: 2049px; height: 1430px; }
.m5__wave { position: absolute; left: 0; top: 0; width: 2049px; height: 1430px; }
.m5__wave-b { position: absolute; left: 35px; top: 494px; width: calc(1924px + 2 * var(--bleed)); height: 936px; overflow: visible; }
.m5__wave-t { position: absolute; left: 35px; top: 0;     width: calc(1924px + 2 * var(--bleed)); height: 456px; overflow: visible; }
.m5__band   { position: absolute; left: 0; top: 406px; width: 2049px; height: 101px; background: #7FDAE2; }

.m-feat {
  position: absolute;
  width: 364px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 56px;
}
.m-feat__item { align-self: stretch; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.m-feat__ico {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  background: url("assets/check-white.svg") no-repeat center / contain;
}
.m-feat__body { align-self: stretch; display: flex; flex-direction: column; align-items: center; gap: 11px; }
.m-feat__t {
  align-self: stretch;
  width: 364px;
  color: #006C76;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.06em;
  line-height: 24px;
  text-align: center;
}
.m-feat__d {
  color: #006C76;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 20px;
  text-align: center;
}
.m5__jar { position: absolute; left: 791px; top: 868px; width: 371px; height: 482px; }
.m5__jar-glow {
  position: absolute;
  /* idem ao desktop: gradiente no lugar do blur de 112px */
  left: -69px; top: 37px;
  width: 546px; height: 546px;
  background: radial-gradient(circle closest-side,
              rgba(20,20,20,.92) 0%, rgba(20,20,20,.78) 26%,
              rgba(20,20,20,.34) 60%, rgba(20,20,20,0) 100%);
  border-radius: 50%;
}
.m5__jar-img {
  position: absolute;
  left: 0; top: 0;
  width: 371px; height: 482px;
  background-image: url("assets/jar-hand.webp");
  background-position: 50% 8.97%;
  background-repeat: no-repeat;
  background-size: 100.22% 126.62%;
}
.m5__cta { position: absolute; left: 804px; top: 1319px; width: 362px; border-radius: 2.77395px; }

/* ---- SECTION 6 mobile ---- */
.m6 { position: absolute; left: 20px; top: 5141px; width: 362px; height: 142px; }
.m6__t1 {
  position: absolute;
  left: 0; top: 0;
  width: 362px;
  color: #3A3A3A;
  font-size: 50.17px;
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 100%;
  text-align: right;
}
.m6__t2 {
  position: absolute;
  left: 0; top: 108px;
  width: 362px;
  color: #FF3476;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 120%;
  text-align: center;
}
.m6__pill {
  position: absolute;
  left: 16px; top: 64px;
  width: 108px; height: 33px;
  border-radius: 9999px;
  background: url("assets/pill-mask.webp") 50% / cover;
}

/* ---- SECTION 7 mobile ---- */
.m7 { position: absolute; left: 19.5px; top: 5370px; width: 364.59px; height: 430px; }
.m7__wrap { position: absolute; left: 50%; translate: -50%; top: 0; display: flex; align-items: center; gap: 30.71px; }
.m7__card { position: relative; flex-shrink: 0; width: 364.59px; height: 430px; }
.m7__group { position: absolute; left: calc(50% - 0.17px); translate: -50%; top: 0; width: 349.5px; height: 423.29px; }
.m7__rect {
  position: absolute;
  left: 349.5px; top: 423.29px;
  width: 349.5px; height: 387.07px;
  border-radius: 6.70827px;
  rotate: 180deg;
  transform-origin: 0% 0%;
  background: #FF3476;
}
.m7__mask { position: absolute; left: 0; top: 36.22px; width: 349.5px; height: 378.35px; }
.m7__mask-rect {
  position: absolute;
  left: 349.5px; top: 378.35px;
  width: 349.5px; height: 378.35px;
  border-radius: 6.70827px;
  rotate: 180deg;
  transform-origin: 0% 0%;
  background: #FF3476;
}
.m7__cta {
  position: absolute;
  left: calc(50% + 0.42px);
  translate: -50%;
  top: 203.69px;
  width: 302.51px;
  padding: 11.59px 23.18px;
  border-radius: 2.31806px;
}
.m7__price {
  position: absolute;
  left: 21.6px; top: 96.78px;
  width: 306.56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12.17px;
}
.m7__price-a,
.m7__price-b,
.m7__price-c {
  align-self: stretch;
  flex-shrink: 0;
  width: 306.56px;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  color: #FFFFFF;
  line-height: 15.0398px;
  text-align: center;
}
.m7__price-a,
.m7__price-c { height: 22.14px; font-size: 16.1px;  font-weight: 500; letter-spacing: -0.03em; }
.m7__price-b { height: 51.65px; font-size: 55.63px; font-weight: 700; letter-spacing: -0.08em; }
.m7__warn {
  position: absolute;
  left: 50%; translate: -50%;
  top: 358.89px;
  width: 260.95px; height: 36.22px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  color: #FFFFFF;
  font-family: system-ui, sans-serif;
  font-size: 12.07px;
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 140%;
  text-align: center;
  white-space: pre-wrap;
}
.m7__pay { position: absolute; left: 57.5267px; top: 296.711px; width: 234.7px; height: 36.51px; }
.m7__logo {
  position: absolute;
  left: 85.87px; top: 0;
  width: 176.43px; height: 76.47px;
  background: url("assets/logo-flowork.webp") 50% / cover;
  filter: drop-shadow(#00000038 2.3px 2.6px 1.7px) drop-shadow(#00000033 .4px .4px .8px);
}
.m7__tick { position: absolute; width: 17.41px; height: 16.41px; }
.m7__tick--tr { left: 365.75px; top: 44.09px; rotate: 180deg; transform-origin: 0% 0%; }
.m7__tick--bl { left: -1.16px; top: 414.75px; }

/* ---- bônus mobile ---- */
.m-bonus {
  position: absolute;
  left: 24px; top: 5845px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 47.44px;
}
.m-bonus__head { display: flex; flex-direction: column; align-items: flex-start; gap: 14.82px; }
.m-bonus__t {
  width: 358px;
  color: #FF3476;
  font-size: 44.47px;
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 110%;
}
.m-bonus__d {
  width: 323.9px;
  color: #9C9C9C;
  font-size: 11.86px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 140%;
}
.m-bonus__list { width: 306.86px; display: flex; flex-direction: column; align-items: flex-start; gap: 20.01px; }
.m-bonus__li { align-self: stretch; display: flex; align-items: center; gap: 11.86px; }
.m-bonus__check {
  flex-shrink: 0;
  width: 16.31px;
  height: 16.31px;
  background: url("assets/check-pink.svg") no-repeat center / contain;
}
.m-bonus__txt {
  flex-shrink: 0;
  color: #9C9C9C;
  font-size: 14.82px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 140%;
}
.m-bonus__txt--c { display: flex; flex-wrap: wrap; justify-content: center; text-align: center; }

/* ---- rodapé mobile ---- */
.mft__bg {
  position: absolute;
  left: calc(0px - var(--bleed)); top: 6401px;
  /* 402 e não os 401 do Paper: fecha a fresta de 1px na borda do artboard */
  width: calc(402px + 2 * var(--bleed)); height: 648px;
  background: #F4EFE5;
  border-radius: 30px 30px 0 0;
  outline: 2px solid #393939;
}
.mft { position: absolute; left: calc(50% - 2px); translate: -50%; top: 6441px; width: 758px; height: 561.77px; }
.mft__top {
  position: absolute;
  left: 182px; top: 0;
  width: 394px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
}
.mft__head { width: 376px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.mft__title {
  align-self: stretch;
  width: 376px;
  color: #3A3A3A;
  font-size: 56px;
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 120%;
  text-align: center;
}
.mft__sub {
  width: 376px;
  color: #9C9C9C;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 140%;
  text-align: center;
}
.mft__form { position: relative; flex-shrink: 0; width: 366px; height: 66px; }
.mft__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 66px;
  padding: 0 138px 0 22px;
  background: #D9D9D9;
  border: 0;
  border-radius: 8px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #3A3A3A;
}
.mft__input::placeholder { color: #9C9C9C; }
.mft__send {
  position: absolute;
  right: 8px;
  top: 50%;
  translate: 0 -50%;
  width: 122px;
  height: 50.83px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11.3px;
  padding: 11.3px;
  background: #FF3476;
  border: 0;
  border-radius: 4px;
  box-shadow: #B8003C 0 0 0 1.93648px;
  cursor: pointer;
  transition: background .15s ease;
}
.mft__send:hover { background: #E82A67; }
.mft__send-txt {
  flex-shrink: 0;
  width: max-content;
  color: #FFFFFF;
  font-size: 16.64px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 140%;
}
.mft__msg {
  position: absolute;
  left: 22px;
  top: 74px;
  margin: 0;
  width: 344px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #3A3A3A;
}
.mft__msg[data-state="erro"] { color: #B8003C; }
.mft__msg[data-state="ok"]   { color: #2C8A3D; }

.mft__nav { display: flex; align-items: center; justify-content: center; gap: 21px; }
.mft__nav-i {
  flex-shrink: 0;
  width: 77px;
  color: #595959;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 140%;
  text-align: center;
}

.mft__social { position: absolute; left: 209.602px; top: 368px; width: 342.8px; height: 27.77px; }
.mft__social > svg { position: absolute; left: 0; top: 0; overflow: visible; }
.mft__social-links { position: absolute; left: 0; top: 0; width: 342.8px; height: 27.77px; }
.mft__social-links a { position: absolute; top: 0; width: 27.77px; height: 27.77px; border-radius: 6px; }
.mft__social-links a:nth-child(1) { left: 0; }
.mft__social-links a:nth-child(2) { left: 79.77px; width: 23.72px; }
.mft__social-links a:nth-child(3) { left: 155.49px; }
.mft__social-links a:nth-child(4) { left: 235.26px; }
.mft__social-links a:nth-child(5) { left: 315.03px; }

.mft__legal {
  position: absolute;
  left: 0; top: 441.77px;
  width: 758px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 37px;
}
.mft__legal-c {
  width: 346px;
  color: #6F6F6F;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 140%;
  text-align: center;
  white-space: pre-wrap;
}
.mft__legal-row {
  width: 350px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  column-gap: 20px;
  row-gap: 9px;
}
.mft__legal-i {
  flex-shrink: 0;
  color: #6F6F6F;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 140%;
  text-align: center;
}

/* =========================================================
   Frascos flutuantes — sobe e desce suave
   ========================================================= */
@keyframes flutua {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}
.s3__jar-d, .s3__jar-e,
.m-jar-d,   .m-jar-e {
  animation: flutua 6s ease-in-out infinite;
}
.s3__jar-e, .m-jar-e { animation-duration: 7.5s; animation-delay: -2.5s; }

@media (prefers-reduced-motion: reduce) {
  .s3__jar-d, .s3__jar-e, .m-jar-d, .m-jar-e { animation: none; }
}

/* =========================================================
   Carrosséis
   O "set" mantém as coordenadas originais do artboard; o JS
   clona o set antes e depois para o loop ser contínuo.
   ========================================================= */
.carousel,
.carousel__track,
.carousel__set { position: absolute; inset: 0; pointer-events: none; }
.carousel__set > * { pointer-events: auto; }
.carousel__track { transition: transform .45s cubic-bezier(.22, .61, .36, 1); }
.carousel__track.is-dragging { transition: none; will-change: transform; }
.carousel__set > * { cursor: grab; }
.carousel__track.is-dragging .carousel__set > * { cursor: grabbing; }

/* setas viram botões sem perder o posicionamento do artboard */
.s4__arrow,
.m-gal-arrow {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: transform .15s ease, opacity .15s ease;
}
.s4__arrow > svg,
.m-gal-arrow > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.s4__arrow--r:hover { transform: scale(1.15); }
.s4__arrow--l:hover { transform: rotate(180deg) scale(1.15); }
.m-gal-arrow:hover  { transform: scale(1.15); }

/* ---- carrossel do Flow no mobile ---- */
.m-gal { overflow: hidden; }
.m-gal .carousel__set {
  inset: auto;
  display: flex;
  align-items: flex-start;
  width: max-content;
}
.m-gal__slide {
  position: relative;
  flex-shrink: 0;
  width: 290.85px;
  height: 328.17px;
  overflow: hidden;
}
.m-gal__slide .m-gal__img { position: absolute; background-position: 50%; background-size: cover; }
/* mesmos recortes do desktop, reduzidos por 290.85/376.85 = 0.7718 */
.m-gal__img--1 { left: -3.84px;  top: -82.12px; width: 300.2px; height: 536.4px; background-image: url("assets/gallery-1.webp"); }
.m-gal__img--2 { left: -66.73px; top: -15.75px; width: 412.1px; height: 412.1px; background-image: url("assets/gallery-2.webp"); }
.m-gal__img--3 { left: -24.64px; top: -46.31px; width: 329.6px; height: 421.4px; background-image: url("assets/gallery-3.webp"); }

/* Janela de cada carrossel: sem isto os clones apareceriam em áreas que o
   design deixa vazias (ex.: sobre o texto da seção 2). clip-path recorta
   sem alterar o layout, então as coordenadas do artboard seguem intactas. */
[data-carousel="gomas-desk"] { clip-path: inset(0 0 0 862px); }
[data-carousel="flow-desk"]  { clip-path: inset(0 55.1px 0 56.98px); }
/* recorte apenas horizontal: negativo em cima/embaixo para nao cortar
   o badge (fica 18px acima da caixa) nem o fim das legendas */
[data-carousel="gomas-mob"]  { clip-path: inset(-40px 0px -20px 0px); }

/* =========================================================
   Hero da seção 1 — flutua junto com os frascos
   Os frascos da seção 1 estão embutidos no PNG do hero, então
   quem flutua é a composição inteira, de forma bem discreta.
   ========================================================= */
@keyframes flutua-hero {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -9px; }
}
.hero, .m1__photo {
  animation: flutua-hero 7s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .hero, .m1__photo { animation: none; }
}