/* ====================================================================
   GIO VAZ — Mídia Kit · styles
   Base de design: Figma @1920. Conteúdo central capado em --max-content.
   Seções proporcionais escalam via container-type + cqw/%.
   ==================================================================== */

/* ---------- Fontes ---------- */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/poppins-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/poppins-semibolditalic.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/poppins-medium.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/poppins-bold.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("assets/fonts/poppins-extrabold.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("assets/fonts/poppins-black.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url("assets/fonts/poppins-blackitalic.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url("assets/fonts/poppins-extrabolditalic.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("assets/fonts/poppins-light.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/poppins-mediumitalic.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: italic;
  font-weight: 200;
  font-display: swap;
  src: url("assets/fonts/poppins-extralightitalic.woff2") format("woff2");
}

/* ---------- Tokens ---------- */
:root {
  --orange: #e98638;
  --ink: #1e1e1e;
  --white: #fefffe;
  --brown: #2c1a0e;
  --paper: #f4f1f1;

  --max-content: 1440px;   /* largura de conteúdo (full-bleed vai até 1920) */
  --bleed: 1920px;
}

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

html, body { margin: 0; padding: 0; }
/* Cor da "sobra" ao puxar a página além do topo ou do rodapé (o efeito
   elástico do iOS). O canvas aceita UMA pintura só, então vai um degradê que
   cobre o documento inteiro: em cima fica o laranja da capa, embaixo o azul do
   rodapé — cada ponta continua a seção vizinha. O miolo nunca aparece (as
   seções cobrem tudo). */
html {
  background: linear-gradient(to bottom,
    #ea893d 0%, #ea893d 25%,
    #204ee3 75%, #204ee3 100%);
}

body {
  background: transparent;         /* deixa o degradê do html valer até a borda */
  color: var(--brown);
  font-family: "Poppins", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }

/* ====================================================================
   PADRÃO "REVEAL" — animações de entrada por scroll (mesmo sistema da
   Bárbara). Marque o elemento com data-anim="..."; o observer do
   scripts.js adiciona .in quando ele entra na tela (1x). Só
   transform/opacity (GPU). data-anim-delay (ms) faz o stagger — em
   listas, o JS calcula sozinho via data-anim-stagger no container.
   Tokens: --anim-dur, --anim-dist (sobrescrevíveis por elemento).

   ⚠️ .in zera o transform → em elemento que JÁ tem transform base no
   CSS (ex.: translateX(-50%) de centralização), use data-anim="fade"
   ou "fade-scene", que não tocam em transform.
   ==================================================================== */
[data-anim] {
  --anim-dur: 0.52s;
  --anim-dist: 34px;
  opacity: 0;
  transition: opacity var(--anim-dur) ease,
              transform var(--anim-dur) cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--anim-delay, 0ms);
  will-change: opacity, transform;
}
[data-anim="fade-up"]     { transform: translateY(var(--anim-dist)); }
[data-anim="fade-down"]   { transform: translateY(calc(-1 * var(--anim-dist))); }
[data-anim="fade-left"]   { transform: translateX(var(--anim-dist)); }            /* entra vindo da direita */
[data-anim="fade-right"]  { transform: translateX(calc(-1 * var(--anim-dist))); } /* entra vindo da esquerda */
[data-anim="zoom-in"]     { transform: scale(0.92); }
[data-anim="zoom-out"]    { transform: scale(1.06); }
[data-anim="rise-rotate"] { transform: translateY(var(--anim-dist)) rotate(-6deg); }
[data-anim="pop"]         { transform: scale(0.6); --anim-dur: 0.6s; }
[data-anim="grow-up"]     { transform: scaleY(0); transform-origin: bottom; --anim-dur: 0.9s; }
/* variantes que NÃO declaram transform algum — o transform base do
   elemento (ex.: translateX(-50%)) permanece intacto */

[data-anim].in { opacity: 1; will-change: auto; }
/* só as variantes de movimento zeram o transform ao entrar */
[data-anim]:not([data-anim="fade"]):not([data-anim="fade-scene"]).in { transform: none; }
/* cenas grandes (fundos/colagens) entram mais devagar e sem deslocamento */
[data-anim="fade-scene"] { --anim-dur: 0.9s; }

/* ---- Seção 10: a Gio sobe de dentro da cena (a máscara do frame corta pelas
   ondas), e logo atrás a colagem de memes aparece. Rápido — é só a graça. ---- */
/* a Gio sobe de dentro da cena (a máscara do frame corta pelas ondas) */
[data-anim="s10-gio"] {
  transform: translateY(24%);
  --anim-dur: 0.5s;
  opacity: 1;                      /* sem fade: ela SURGE de dentro do recorte */
}
/* os blocos de meme entram atrás dela, um sobrepondo a entrada do outro */
[data-anim="s10-meme"] {
  transform: translateY(9%) scale(0.94);
  --anim-dur: 0.36s;
}
[data-anim="s10-icones"] { --anim-dur: 0.34s; }

@media (prefers-reduced-motion: reduce) {
  [data-anim] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---- SPIN contínuo: gira devagar, pra sempre, depois que o elemento entra
   na tela (.in). Envolve o elemento num wrapper quando ele também tem reveal,
   pra não brigar com o transform da animação de entrada. ---- */
@keyframes spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
/* o elemento .spin-slow gira quando o ancestral com [data-anim] é revelado.
   (o wrapper cuida da entrada; o filho gira → sem briga pelo transform) */
[data-anim].in .spin-slow,
.spin-slow.in > img,
img.spin-slow.in { animation: spin-slow var(--spin-dur, 14s) linear infinite; }
[data-anim].in .spin-slow--rev,
.spin-slow--rev.in > img,
img.spin-slow--rev.in { animation-direction: reverse; }
@media (prefers-reduced-motion: reduce) {
  [data-anim].in .spin-slow,
  .spin-slow.in > img, img.spin-slow.in { animation: none; }
}

/* camadas de parallax (motor genérico no scripts.js) */
[data-speed] { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  [data-speed] { transform: none !important; }
}

/* ====================================================================
   01 · CAPA  (seção proporcional, full-bleed @1920×1130)
   ==================================================================== */
.capa {
  position: relative;
  z-index: 2;                  /* capa por cima da Section-02 (a onda sobrepõe o papel) */
}

.capa__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 1130;
  container-type: inline-size;
}

/* Fundo laranja (padrão FRIENDS OF FRIENDS) — full-bleed, 1920×1030.
   Recortado pela onda: laranja acima da onda, transparente abaixo
   (deixa o papel da Section-02 aparecer sob a curva). */
.capa__fundo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 91.1504%;            /* 1030 / 1130 */
  object-fit: cover;
  z-index: 1;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20width%3D%221920%22%20height%3D%221030%22%20viewBox%3D%220%200%201920%201030%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M0%200%20H1920%20V738.976%20L1905.77%20738.976C1873.04%20750.483%201837.2%20759.811%201750%20779.523C1696.58%20791.598%201685.66%20794.806%201661%20805.672C1625.86%20821.156%201592.16%20843.348%201562.37%20870.62C1553.14%20879.065%201523.7%20908.705%201505.43%20927.952C1480.03%20954.692%201458.96%20974.051%201442.41%20985.851C1416%201004.68%201387.38%201017.16%201356.5%201023.31C1337.1%201027.18%201328.91%201027.99%201302%201028.67C1250.33%201029.98%201210.52%201023.78%201146.5%201004.45C1134.4%201000.79%201115.73%20995.144%201105%20991.893C1048.98%20974.913%201012.53%20969.231%20966.5%20970.301C918.808%20971.41%20876.945%20978.699%20784.5%201001.99C697.615%201023.89%20675.478%201027.84%20635%201028.71C616.334%201029.1%20607.285%201028.85%20597%201027.66C544.437%201021.54%20496.113%20999.691%20446.5%20959.615C431.736%20947.69%20420.265%20937.021%20393%20909.857C375.923%20892.843%20365.622%20883.423%20359%20878.766C328.437%20857.272%20294.332%20843.403%20245.5%20832.613C220.091%20826.998%20191.561%20822.697%20135%20815.954C76.757%20809.011%2043.749%20803.394%2014.707%20795.484C7.671%20793.568%201.483%20792%200.957%20792L0%20792%20Z%22%20fill%3D%22%23fff%22%2F%3E%0A%3C%2Fsvg%3E") 0 0 / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20width%3D%221920%22%20height%3D%221030%22%20viewBox%3D%220%200%201920%201030%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M0%200%20H1920%20V738.976%20L1905.77%20738.976C1873.04%20750.483%201837.2%20759.811%201750%20779.523C1696.58%20791.598%201685.66%20794.806%201661%20805.672C1625.86%20821.156%201592.16%20843.348%201562.37%20870.62C1553.14%20879.065%201523.7%20908.705%201505.43%20927.952C1480.03%20954.692%201458.96%20974.051%201442.41%20985.851C1416%201004.68%201387.38%201017.16%201356.5%201023.31C1337.1%201027.18%201328.91%201027.99%201302%201028.67C1250.33%201029.98%201210.52%201023.78%201146.5%201004.45C1134.4%201000.79%201115.73%20995.144%201105%20991.893C1048.98%20974.913%201012.53%20969.231%20966.5%20970.301C918.808%20971.41%20876.945%20978.699%20784.5%201001.99C697.615%201023.89%20675.478%201027.84%20635%201028.71C616.334%201029.1%20607.285%201028.85%20597%201027.66C544.437%201021.54%20496.113%20999.691%20446.5%20959.615C431.736%20947.69%20420.265%20937.021%20393%20909.857C375.923%20892.843%20365.622%20883.423%20359%20878.766C328.437%20857.272%20294.332%20843.403%20245.5%20832.613C220.091%20826.998%20191.561%20822.697%20135%20815.954C76.757%20809.011%2043.749%20803.394%2014.707%20795.484C7.671%20793.568%201.483%20792%200.957%20792L0%20792%20Z%22%20fill%3D%22%23fff%22%2F%3E%0A%3C%2Fsvg%3E") 0 0 / 100% 100% no-repeat;
}

/* Foto da Gio (recorte) — editável */
.capa__foto {
  position: absolute;
  top: 14.4248%;
  left: 50.6771%;
  width: 31.7708cqw;
  height: auto;
  z-index: 2;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20width%3D%22610%22%20height%3D%22967%22%20viewBox%3D%220%200%20610%20967%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M0%200%20H610%20V690.035%20C602.94%20695.628%20596.06%20701.496%20589.37%20707.62%20C580.14%20716.065%20550.7%20745.705%20532.43%20764.952%20C507.03%20791.692%20485.96%20811.051%20469.41%20822.851%20C443%20841.68%20414.38%20854.16%20383.5%20860.31%20C364.1%20864.18%20355.91%20864.99%20329%20865.67%20C277.33%20866.98%20237.52%20860.78%20173.5%20841.45%20C161.4%20837.79%20142.73%20832.144%20132%20828.893%20C78.64%20812.719%2043.04%20806.796%200%20807.194%20Z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E") 0 0 / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20width%3D%22610%22%20height%3D%22967%22%20viewBox%3D%220%200%20610%20967%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M0%200%20H610%20V690.035%20C602.94%20695.628%20596.06%20701.496%20589.37%20707.62%20C580.14%20716.065%20550.7%20745.705%20532.43%20764.952%20C507.03%20791.692%20485.96%20811.051%20469.41%20822.851%20C443%20841.68%20414.38%20854.16%20383.5%20860.31%20C364.1%20864.18%20355.91%20864.99%20329%20865.67%20C277.33%20866.98%20237.52%20860.78%20173.5%20841.45%20C161.4%20837.79%20142.73%20832.144%20132%20828.893%20C78.64%20812.719%2043.04%20806.796%200%20807.194%20Z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E") 0 0 / 100% 100% no-repeat;
}

/* Título GIO VAZ */
.capa__titulo {
  position: absolute;
  top: 24.0265%;
  left: 19.0104%;
  margin: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  font-weight: 800;
  font-style: normal;
  font-size: 10.4167cqw;       /* 200px @1920 */
  line-height: 1;
  color: var(--white);
  -webkit-text-stroke: 0.10417cqw #000;   /* 2px @1920 */
  text-stroke: 0.10417cqw #000;
  paint-order: stroke fill;
  text-shadow: 0.21cqw 0.26cqw 0.34cqw rgba(0, 0, 0, 0.25);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

/* Tagline "Aqui tem uma / pessoa real" */
.capa__tag {
  position: absolute;
  top: 64.4248%;
  left: 26.3542%;
  margin: 0;
  z-index: 4;
  font-weight: 900;
  font-style: italic;
  font-size: 1.71875cqw;       /* 33px @1920 */
  line-height: 2.65625cqw;     /* 51px @1920 */
  color: var(--white);
  -webkit-text-stroke: 0.10417cqw #000;   /* 2px @1920 */
  text-stroke: 0.10417cqw #000;
  paint-order: stroke fill;
  text-shadow: 0.26cqw 0.21cqw 0.34cqw rgba(0, 0, 0, 0.25);
}

/* Emoji (à esquerda da tagline) */
.capa__emoji {
  position: absolute;
  top: 62.180%;
  left: 20.9375%;
  width: 5.3854cqw;            /* 103.4px @1920 */
  height: auto;
  z-index: 4;
}

/* Cursor (após "pessoa real") */
.capa__cursor {
  position: absolute;
  top: 69.376%;
  left: 38.3333%;
  width: 2.8234cqw;            /* 54.2px @1920 */
  height: auto;
  z-index: 4;
}

/* ====================================================================
   02 · QUEM SOU EU  (seção proporcional, full-bleed @1920×1400)
   ==================================================================== */
.quem {
  position: relative;
  z-index: 1;
  margin-top: -20.8333%;        /* sobe 400px @1920: a capa cobre o topo da 02 */
  background: var(--paper);
}

.quem__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 1400;
  container-type: inline-size;
  overflow: hidden;
}

.quem__fundo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* ---- Coluna de texto ---- */
.quem__texto-col { display: contents; }       /* desktop: passthrough (filhos absolutos) */

.quem__titulo {
  position: absolute;
  top: 26.7857%;
  left: 19.1146%;
  margin: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  font-weight: 900;
  font-size: 4.32292cqw;        /* 83px @1920 */
  line-height: 0.93253;         /* 77.4 / 83 */
  letter-spacing: -0.01em;
  color: var(--brown);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.quem__texto {
  position: absolute;
  top: 39.3214%;
  left: 19.1667%;
  width: 27.2396cqw;            /* 523px @1920 */
  margin: 0;
  z-index: 5;
  color: var(--brown);
  font-weight: 500;
  font-size: 1.35417cqw;        /* 26px @1920 */
  line-height: 1.27308;         /* 33.1 / 26 */
}
.quem__texto p { margin: 0 0 1.72396cqw; }   /* 1 linha em branco entre parágrafos */
.quem__texto p:last-child { margin-bottom: 0; }
.quem__texto strong { font-weight: 700; }

/* ---- Collage (sub-frame proporcional 704×711) ---- */
.quem__collage {
  position: absolute;
  top: 29.5%;                   /* 413/1400 */
  left: 50.8333%;               /* 976/1920 */
  width: 36.6667cqw;            /* 704/1920 */
  aspect-ratio: 704 / 711;
  container-type: inline-size;
  z-index: 4;
}
.quem__collage > img,
.quem__collage > span { position: absolute; height: auto; display: block; }
/* spans simples (1 img dentro): a img preenche o wrapper */
.quem__collage > span.spin-slow > img { position: static; width: 100%; height: auto; display: block; }

/* flor = 2 camadas num wrapper que gira junto (união: x0–704, y6–711) */
.quem__florzao { left: 0; top: 0.8439%; width: 100cqw; aspect-ratio: 704 / 705; z-index: 1; }
.quem__florzao-spin { position: absolute; inset: 0; display: block; }
.quem__collage .quem__florzao-spin > img { position: absolute; height: auto; }
.quem__flor--2 { left: 0.5682%; top: 0.3972%; width: 98.8636%; }  /* pêssego (atrás) */
.quem__flor--1 { left: 0;       top: 0;       width: 100%; }      /* rosa (frente) */
.quem__cracha  { left: 4.1193%; top: 0;       width: 52.8409cqw; z-index: 3; }
.quem__foto    { left: 20.3125%; top: 30.3797%; width: 75.7102cqw; z-index: 4; }
.quem__clap    { left: 68.8920%; top: 11.1111%; width: 22.5852cqw; z-index: 4; }

/* Sparkles (mesmo asset reaproveitado) */
.quem__star { z-index: 6; pointer-events: none; }
.quem__star--1 { left: 83.5227%; top: 56.1181%; width: 7.3864cqw; }
.quem__star--2 { left: 68.4659%; top: 5.3446%;  width: 8.6648cqw; }
.quem__star--3 { left: 6.8182%;  top: 36.5682%; width: 7.3864cqw; transform: rotate(18deg); }
.quem__star--4 { left: 36.7898%; top: 0.1406%;  width: 7.8125cqw; transform: rotate(-12deg); }
.quem__star--5 { left: 15.7670%; top: 81.9972%; width: 8.2386cqw; transform: rotate(8deg); }

/* ====================================================================
   03 · MEUS NICHOS  (proporcional 1920×1045; coral texturizado com ondas)
   Cards em flex-wrap centrado → nº de nichos dinâmico (CMS adiciona/remove).
   ==================================================================== */
.s3 {
  position: relative; z-index: 2;
  margin-top: -7.396%;              /* 142px: ondas do topo sobre o papel da 02 */
}
/* conteúdo em FLUXO (não absoluto) → a seção cresce se a cliente
   adicionar nichos; altura mínima = proporção do Figma (1920×1045) */
.s3__frame {
  position: relative; width: 100%;
  min-height: 54.427cqw;             /* 1045/1920 */
  container-type: inline-size;
  padding: 8.021cqw 0 9.115cqw;      /* 154 / 175px: respiro das ondas */
  display: flex; flex-direction: column;
}

/* fundo elástico: ondas fixas + textura que estica no meio */
.s3__bg { position: absolute; inset: 0; z-index: 0; display: flex; flex-direction: column; pointer-events: none; }
.s3__bg-top,
.s3__bg-bot { flex: 0 0 auto; width: 100%; aspect-ratio: 1920 / 200; background: center / 100% 100% no-repeat; }
.s3__bg-top { background-image: url("assets/images/s3-fundo-top.webp"); }
.s3__bg-bot { background-image: url("assets/images/s3-fundo-bot.webp"); }
.s3__bg-mid { flex: 1 1 auto; min-height: 0; width: 100%;
  background: url("assets/images/s3-fundo-mid.webp") center top / 100% auto repeat-y; }

.s3__titulo {
  position: relative; z-index: 1;
  margin: 0 0 2.552cqw;              /* 49px até os cards */
  text-align: center;
  font-weight: 900; font-size: 4.792cqw;   /* Poppins Black 92px */
  line-height: 1; color: #fefffe;
  /* mesmo tratamento do título da 09 ("TOP 3 Cases de Sucesso") */
  -webkit-text-stroke: 0.15cqw #1e1e1e; paint-order: stroke fill;
  text-shadow: 0 0.208cqw 0 #000;          /* 0 4px 0 */
  text-box-trim: trim-both; text-box-edge: cap alphabetic;
}

.s3__cards {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
  gap: 1.615cqw;                     /* 31px */
  padding: 0 3cqw;
}
.s3card {
  width: 19.433cqw;                  /* 373px */
  background: #f59024; border-radius: 2.604cqw;   /* 50px */
  display: flex; flex-direction: column; align-items: center;
  padding: 0.99cqw 1.015cqw 1.823cqw;             /* 19 / 19.5 / 35px */
}
/* a mesma caixa serve pra foto e pra vídeo — o nicho pode ser um ou outro */
.s3card__thumb {
  width: 100%; aspect-ratio: 334 / 346;
  border-radius: 1.823cqw;           /* 35px */
  object-fit: cover; display: block;
  background: #d8d0cd;               /* enquanto o vídeo não carrega */
}
video.s3card__thumb { cursor: pointer; }   /* clique liga/desliga o som */
/* nome/descrição em 1 linha com reticências: cliente não quebra o layout */
.s3card__nome {
  margin: 1.4cqw 0 0; max-width: 100%;
  font-weight: 700; font-size: 2.083cqw;   /* Bold 40px */
  line-height: 1.2; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.s3card__desc {
  margin: 0.4cqw 0 0; max-width: 100%;
  font-weight: 400; font-size: 1.094cqw;   /* Regular 21px */
  line-height: 1.2; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.s3card__btn {
  margin-top: 0.85cqw;
  width: 10.938cqw; height: 2.448cqw;      /* 210×47 */
  display: flex; align-items: center; justify-content: center;
  background: #c1c606; border: 0.156cqw solid #fdffc1; border-radius: 999px;
  font-weight: 700; font-size: 1.25cqw;    /* Bold 24px */
  color: #fdffc1; text-transform: uppercase; text-decoration: none;
  white-space: nowrap;
}

/* ====================================================================
   04 · VIBE  (seção proporcional, full-bleed @1920×1234)
   ==================================================================== */
.vibe {
  background: #f3b7b0;
  margin-top: -6.615%;               /* 127px: ondas de baixo da 03 sobre o xadrez */
}

.vibe__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 1234;
  container-type: inline-size;
  overflow: hidden;
}

.vibe__fundo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.vibe__foto {
  position: absolute;
  top: 13.2091%;
  left: 21.7188%;
  width: 56.6146cqw;          /* 1087px @1920 */
  height: auto;
  z-index: 2;
}

.vibe__flor { position: absolute; height: auto; z-index: 3; pointer-events: none; display: block; }
.vibe__flor > img { width: 100%; height: auto; display: block; }
.vibe__flor--a { top: 34.6029%; left: 58.8542%; width: 5.8854cqw; }
.vibe__flor--b { top: 42.2204%; left: 26.3542%; width: 4.8958cqw; }
.vibe__flor--c { top: 64.9109%; left: 63.4375%; width: 4.2708cqw; }
.vibe__flor--d { top: 71.2318%; left: 59.8958%; width: 2.3438cqw; }
.vibe__flor--e { top: 46.5153%; left: 22.7083%; width: 2.3958cqw; }

/* ====================================================================
   05 · QUEM SÃO MEUS FRIENDS  (proporcional, full-bleed @1920×1400)
   ==================================================================== */
.fr { background: var(--paper); }

.fr__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 1400;
  container-type: inline-size;
  overflow: hidden;
}
.fr__fundo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }

/* --- Título --- */
.fr__titulo {
  position: absolute;
  top: 8.8214%; left: 19.1146%;
  margin: 0; z-index: 3;
  font-weight: 800;
  font-size: 3.69792cqw;              /* 71px */
  color: var(--white);
  -webkit-text-stroke: 0.09cqw #1e1e1e;
  paint-order: stroke fill;
  text-shadow: 0 0.21cqw 0.21cqw rgba(0,0,0,0.5);
  text-box-trim: trim-both; text-box-edge: cap alphabetic;
}
.fr__friends { position: absolute; top: 14.6429%; left: 19.1146%; width: 32.0833cqw; height: auto; z-index: 4; }
.fr__interrog {
  position: absolute; top: 8.2%; left: 51.4%;
  z-index: 4; font-weight: 800; font-size: 9.3cqw; line-height: 1;
  color: var(--white);
  -webkit-text-stroke: 0.12cqw #1e1e1e; paint-order: stroke fill;
  text-shadow: 0 0.21cqw 0.21cqw rgba(0,0,0,0.5);
}

/* --- Nota --- */
.fr-nota {
  position: absolute;
  top: 29.1429%; left: 15.3646%;
  width: 41.7708cqw; aspect-ratio: 802 / 373;
  container-type: inline-size; z-index: 2;
}
.fr-nota img { position: absolute; height: auto; }
.fr-nota__papel { left: 9.476%; top: 1.877%; width: 79.925cqw; filter: drop-shadow(0 0.5cqw 0.5cqw rgba(0,0,0,0.35)); }
.fr-nota__fita  { left: 37.28%; top: 0;      width: 20.574cqw; z-index: 3; }
.fr-nota__texto {
  position: absolute; left: 50%; top: 26.5%;
  transform: translateX(-50%) rotate(-5deg);
  width: 62.5cqw; margin: 0; z-index: 2;
  text-align: center; color: var(--brown);
  font-weight: 400; font-size: 3.1172cqw; line-height: 1.532;
}
.fr-nota__emoji, .fr-nota__star { z-index: 4; }
.fr-nota__emoji--1 { left: 7.357%; top: 31.64%; width: 10.848cqw; }
.fr-nota__emoji--2 { left: 77.68%; top: 74.8%;  width: 10.1cqw; }
.fr-nota__star--1  { left: 92.52%; top: 69.7%;  width: 7.48cqw; }
.fr-nota__star--2  { left: 0;      top: 50.94%; width: 8.853cqw; }

/* --- Foto --- */
.fr-foto {
  position: absolute;
  top: 9.7143%; left: 61.3542%;
  width: 26.1458cqw; aspect-ratio: 502 / 679;
  container-type: inline-size; z-index: 2;
}
.fr-foto__frame {
  position: absolute; left: 0.5%; top: 0.38%;
  width: 93.63cqw; aspect-ratio: 470 / 619;
  border: 0.5cqw solid #9e67c7; border-radius: 5.5cqw;
  overflow: hidden; background: var(--paper);
}
/* foto no tamanho natural, encaixada como no Figma (nó 6:189 @30,33 dentro de 470×619):
   folga no topo → cabeça inteira; corta só um pouco embaixo (overflow do frame). */
.fr-foto__img {
  position: absolute;
  left: 6.383%;      /* 30/470 */
  top: 5.331%;       /* 33/619 */
  width: 87.234%;    /* 410/470 */
  height: auto;
}
.fr-foto__coracao { position: absolute; left: 74.1%; top: 14.14%; width: 25.9cqw; height: auto; z-index: 3; }
.fr-foto__flor    { position: absolute; left: 9.163%; top: 83.95%; width: 22.31cqw; height: auto; z-index: 3; }

/* --- Gráfico de idade --- */
.fr-idade {
  position: absolute;
  top: 67.5%; left: 19.0625%;
  width: 18.7cqw; z-index: 2;
  display: flex; align-items: flex-end; justify-content: space-between;
}
.fr-idade__col { display: flex; flex-direction: column; align-items: center; }
.fr-idade__pct {
  font-weight: 800; font-size: 1.77cqw; color: var(--brown);
  margin-bottom: 0.3cqw; line-height: 1;
}
.fr-idade__bar {
  width: 1.92cqw; background: #204ee3;
}
.fr-idade__lbl {
  margin-top: 0.5cqw; text-align: center; color: var(--brown);
  font-weight: 400; font-size: 1.09cqw; line-height: 1.05;
}
.fr-idade__lbl b { font-weight: 800; font-size: 1.04cqw; }

/* --- Gênero --- */
.fr-genero {
  position: absolute;
  top: 69.4286%; left: 40.6771%;
  width: 19.3229cqw; aspect-ratio: 371 / 284;
  container-type: inline-size; z-index: 2;
  color: var(--brown);
}
/* bonecos = medidores dinâmicos (silhueta = máscara; fill sobe até --fill) */
.fr-genero__fig { position: absolute; }
.fr-genero__fig--fem {
  left: 0; top: 0; width: 25.34cqw; aspect-ratio: 96 / 192;
  --empty: #dd9dfc; --fillcolor: #ae67cc;
  --sil: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAADACAYAAAD7hGbWAAAGC0lEQVR42u1d0VUjRxCs7ud/yxGYiwARgUQEFhEgRwAZnIiA5wiQIzgykIjASwTIESBH0P64PfssS2Klndnu3al6j597D07bVdWz05rpFvQEZjYBMAUwrn9G9Q8AbAFs6p8KwFpEXkAkCfyjmb3b6XgzsydG8PzAP1k6kIgTAn93puKbOOKWET4e/C+WH4+RnlkCBb8CcNnRf1eJyBUJ+Df4GwA/d/zfhiBBI6Qdh+ADwLj4xdnMPps/7opNQWZmAXSwFZGfiktBZrYKYsSR52dR57JCFEzrz1SMA+4DLkk3xawBQXJ/iLVAHYIftRww8vhsHiloFvjN+KoEAq4CEzAZ/BoQNP+7rQPacfDHwTfno6GnoB9BxCrGkYBu8RdDzkX4eEBEZOgpaBs4/lUJa0AVmIBNCQSsAxOwLmENmEQloev87+KA+shgRfX77gOeAxKwLOo7YTN799j6H1p8ReRTaTvhRSD1L4Ayj6WsAhxLeSr6ZJxzKnJLPZGKcVOn3fHWO/ghCBCRV3R/SmIb7FhMiPXg0sw2HeT8NzO7ZMSPnJTOGPwVI9z80G5KIt69D+H2+YLepmXgPzOS7YmY1Zf2Ng1z/KOZTfmNWD5Cpjv3hIGvN14qypUgwC/lT3v/x9fWAx7fTW/qjSAvZDuivAvcQaqgu/hSyrmgDXyupSLi3eGuD+c+Bg4+6rvDi8E6IPqpOI8j6tpl+5meLFGjLl0gVL+vC5Tq93WBUP2+LlCq39cFQvX7ukCpfl8XCNXv6wKl+hu54LF3DhiI+rPfHVCq3/eZhOr3dYFS/b7PJlS/rwuU6vd9Rinh9mNkFyiv+fi6QKh+Xxco1e/rAqH6fV2gVL+vC4Tqb41pm4lNSvX7ZgAdUAPuXjb+Vqrf1wXaov8z1Z/ABTLAA7ZeWIvIdXYH1Opn8BO5QKh+Xxco1e/rAqH6fV2gVL+vC4Tq93WBUv2+LhCq39cFSvX7ukCofl8XKNXv6wKh+n1doFS/rwuE6vd1gVL9vi4Qqt/XBUr1+7pAqH5fF2hH6l/DYUIR2k1TWnfhgt0U9JDpgR5Q2Hmfpn9Xu1C/iKzRv3OfL124QKl+XxdoZvUv+6j+Ll0gOd98vj++bWZvAC76sgh/m66R8QDyRkQ+aU71w3laNRJM1s7oggszu1MA80z2/XVngR/1rD/EbQdrwUyRp23wrvrn6B/mHbhgLDkuVu9e3enr5e2dNSzLWqBIP0JquWd3jb72t87sgq0i8WTT73N/jXv0F7PM+4JKE7O63JfnMJAKZgYXLFVEHlKloV31D6R3xHUmF2xE5HdNmCaWDT58H3GXaXe82De76+xxUfsu8dlwMNnzfG2GTyz+V4yrU9EcwJ+JilZzDAc3e/7t/szvGa5FZPHhccSGM7veD71mBhlPkmwS34Fn/OWE2Wanv47XRPxx6oS6+veGhtsjz3toyNzqo8DLicPT0KS8XA/NnAJlnfM0s/G3mlfTMjy7Jg6wa+JgR0LlmMiao3HrPYaLGdtW9rw9DdtWpi9NxHFAIafqkraz18R9Q0s40jhq0x8oZwqaoxzcROyc+96zL95DpCFN+O4/KsgBo1T7HWX68X1m4bt/zxu3FjeN+r/PvoiQgu5RLiauBNTl1zF478vNAXcgrj17R/NCX8s9gbL04FuaUL77++4JhKUH3zSkLD34liaU6cc3DQlLD76lCWXpwbc0oSw9+JYmlKUH39KEsvTgW5pg93TnPYGy9OBbmvjhxOv7S7Q71jfqyWXwLYDnFr9/AeDF7XT0AQclbdaR+TL4P806ckOZMXxBAkgACSBIAAkgSAAJIEgACSBIAAkgSAAJIEgACSBIAAkgSAAJIEgACSBIAAkgSAAJIEgACSBIAAkgSAAJIEgACSBIAAkgSAAJIEhAUmyHSECVOUBbEoAPx/jlJDMlwa9DJOAZeecWPwf9rIjUUWqVYKTg27FuLgn+/goDb+vVdsjn9FhHl1zkDomAyxZKvW04gPSsialmdomCGtw9nZIWTg3OgSmw4dKOBJnPOD7ytvPadDLpgQmwExxuk1OJyG+eAfgbRvg7iLrL9OcAAAAASUVORK5CYII=");
  --out: url("assets/images/fr-fem-outline.png");
  --fill: 72%;
}
.fr-genero__fig--masc {
  left: 74.66%; top: 33.1%; width: 25.34cqw; aspect-ratio: 95 / 191;
  --empty: #56daf3; --fillcolor: #006880;
  --sil: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAF8AAAC/CAYAAACYCAB3AAAEsklEQVR42u2d0XXbRhBF30wFdAVUKjBdQZgKrA6kDuwODFVgugLFFcSpQHQFoSsQXIGUCsYfhk8US6RFEsQssPedw6O/pXRxtdgFdndMI0hEvJS0lLTofs66jyTdS2q7z0bS2sw+ixwN/V1E/BP75zYiriF4OPS76CfvIfp88JvoP7cR8Tt0t0O/6NH2bWkg/Rj8mxguXICfjB86RVwAKwB+JH31pZl9rBZ+RLSS5klff29mLzL/fs8cTiaCl6RZRNxUaX5id/NzllkzYk8CX9Lss6nK/OS+/jEEM6vC/G6mOVdh84xaup3zAqcb57XAXxQIf1FFn1/QKCe933eRH1IsgZ+XOfArCvD/y1fgV5SM0c6tpDNGOznmbwqUcFNLn78Gfu6DtdImWudm9nctN9yS7G8zwGfCbwqC/7HGN1k3+r7uMtv632qcZDU1v8VSAQ+z3kderlm3k9P9pHY3xcBPeKdbBPhinu2Y2dlAE51iwBf1YM3MXklanXJuURL4khfOtj3eWO+yVieMfXdKeyT0d5A8/j/hr2dunLiLiJuxmG4juxALfX8XMNf/dyP+K2ljZht0JYQQwg1398plDbwl6Au7zHNzXRv0lz3PYEe7NTRj3c7dgzF6SRl8a6jVvB0oe2uoD/mYoGDw6raGNpM0v3DrU+x3rM+z37A+z37H+jz7Devz7Hes32r/9ajNH6n1g22YcKzPO6DDsD7Pfsf6PPsN6/Psd6zPs9+wPs9+x/o8+w3r8+x3rM+z37BeaUdBOtYrbROdYX2e/T6BY3lHa79hfZ79jvV59hvW59nvWJ9nv2F9nv2O9Xn2G9bn2e9Yn2e/YX2e/Y71efbbFI5fH6v9PtIiM5Ow37A+z37H+jz7Devz7Hesz7PfsD7Pfsf6PPsN6/Psd6x/lPuh7N/V7Vz2+Eu0KrNowVPp83jJ5a4TVXwg6xuNZ0ng1VD2+xDWZ9caL9V+x/o8+x3r8+x3rM+z37E+z37H+jz7Hevz7Hesz7PfsT7F/gtJcqxPsX/1w/wF1g9u/+wU8BtNdxtor/ZHxNKxPs1+uforkdRo6qd+92i/ma1d0if1UwZp6tb3af9Gkrynq3mlWs6874fX6uE4/+2R1q9VV46x/8OjXiIi3hxynv0+BShjBNnj7znkGPrVk892zOxDd5bkn3tcxUtVmq6e49c9yo7/YWZvn70qeccVvImI5b6lV6dkfh+c7JmHWiy6WVkr6fMhfXwhZbdPdqZOV5Vu8WA08+VXnKyymufpB5kWWZK1xvhIV4IB/4BVa6WnnSr8sxHAn00V/gz43HBFAXoCfODvOQl6KiMZTWE+8AnwgQ98AnzgE+ADnwAf+AT4wCfABz4BPvAJ8IFPgA98AnzgE+ADH/gE+MAnwAc+AT7wCfCBT4APfAJ84BPgA58AH/gE+MAnwAc+8AnwgU+AD3wCfOAT4AOfAB/4BPjAJ8AHPqmrYM098JVWDKalYM32fDpxG+se2l8PCd+G/LKIaCXNj2jilZltTtX+kNXhMm64r4/om692ge9yIQoq77T/9QG1ZFd7tH9xQDHQpqph1i9KmR5c+nWo9kfX52+BtNzS/67H0P4x8L8B/j9AthvMwMAAAAAASUVORK5CYII=");
  --out: url("assets/images/fr-masc-outline.png");
  --fill: 28%;
}
.fr-genero__gauge {
  position: absolute; inset: 0;
  background: var(--empty);
  -webkit-mask: var(--sil) center / contain no-repeat;
  mask: var(--sil) center / contain no-repeat;
}
.fr-genero__gauge::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: var(--fill); background: var(--fillcolor);
  transition: height 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}
/* medidor "enche" ao entrar na tela: começa vazio e sobe até --fill */
.fr-genero:not(.in) .fr-genero__gauge::after { height: 0; }
@media (prefers-reduced-motion: reduce) {
  .fr-genero__gauge::after { transition: none; }
  .fr-genero:not(.in) .fr-genero__gauge::after { height: var(--fill); }
}
.fr-genero__outline {
  position: absolute; inset: 0;
  background: var(--out) center / contain no-repeat;
}

.fr-genero__pct { position: absolute; font-weight: 800; font-size: 16cqw; line-height: 1; }
.fr-genero__pct--fem  { left: 26.32%; top: 3.7%; }
.fr-genero__pct--masc { left: 34.14%; top: 84%; }
.fr-genero__lbl { position: absolute; font-weight: 500; font-size: 5.1cqw; }
.fr-genero__lbl--fem  { left: 40.15%; top: 31.16%; }
/* masc espelha o fem: rótulo colado na linha, % com folga abaixo dela */
.fr-genero__lbl--masc { left: 35.03%; top: 65%; }

/* linhas conectoras (% ↔ nome) */
.fr-genero__line { position: absolute; height: 1cqw; border-radius: 999px; }
.fr-genero__line--fem  { left: 17.71%; top: 26.27%; width: 50.08cqw; background: #ae67cc; }
/* linha do masc na parte de baixo do boneco */
.fr-genero__line--masc { left: 32.65%; top: 75%; width: 50.03cqw; background: #4ba0c4; }

/* --- Top 3 cidades --- */
.fr-top {
  position: absolute;
  top: 69.0714%; left: 63.8021%;
  width: 17.1354cqw; aspect-ratio: 329 / 301;
  container-type: inline-size; z-index: 2;
  color: var(--brown);
  display: flex; flex-direction: column; align-items: center;
}
.fr-top__titulo { position: relative; width: 100%; height: 28.24cqw; margin-bottom: 1cqw; text-align: center; }
.fr-top__coracoes { position: absolute; left: 50%; top: 1cqw; transform: translateX(-50%); width: 88.45cqw; height: auto; }
.fr-top__t1 {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  font-weight: 800; font-size: 17.02cqw; line-height: 1; white-space: nowrap;
}
.fr-top__t2 {
  position: absolute; left: 50%; top: 15.8cqw; transform: translateX(-50%);
  font-weight: 600; font-style: italic; font-size: 11.85cqw; line-height: 1;
  letter-spacing: 0.05em; white-space: nowrap;
}
.fr-top__pill {
  display: flex; align-items: center; justify-content: center; gap: 4cqw;
  width: max-content; margin-bottom: 4.7cqw;
  padding: 1.2cqw 5cqw; border-radius: 999px;
  background: #de9efc; border: 0.07cqw solid #000;   /* ~1px @1920 */
}
.fr-top__pos { font-weight: 800; font-size: 12cqw; line-height: 1; }
.fr-top__cidade { font-weight: 800; font-size: 6.6cqw; text-transform: uppercase; line-height: 1; }

/* ====================================================================
   06 · PAREDE DE COMENTÁRIOS  (canvas proporcional 1920×920, 3 camadas + parallax)
   ==================================================================== */
.s6 { position: relative; background: #c840e9; }
.s6__frame {
  position: relative; width: 100%;
  aspect-ratio: 1920 / 920;
  container-type: inline-size;
  overflow: hidden;               /* cards que sangram nas bordas são cortados (proposital) */
}
.s6__bg   { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; }
.s6__cards{ position: absolute; inset: 0; z-index: 2; will-change: transform; }  /* SEM container-type: cqw resolve na .s6__frame */
.s6__gio  { position: absolute; z-index: 3; height: auto; pointer-events: none; }

/* card de comentário (Instagram / LinkedIn) — valores exatos do Figma:
   fundo branco, raio 25px (1.302cqw), sem sombra; Arial 17/14/13; IG 104px alto, LI 129px */
.s6c {
  position: absolute; z-index: 2;
  display: flex; gap: 0.313cqw; align-items: flex-start;   /* avatar→texto: 6px */
  padding: 0.781cqw 0.7cqw 0.7cqw 0.521cqw;                /* 15 / 10px */
  min-height: 5.417cqw;                                    /* 104px */
  background: #fff; border-radius: 1.302cqw;               /* 25px */
  font-family: Arial, Helvetica, sans-serif;
}
.s6c--li { min-height: 6.719cqw; }                         /* 129px */

/* avatar IG: anel gradiente story (72px ext / foto 60px) */
.s6c__avatar { flex: 0 0 auto; display: block; border-radius: 50%; }
.s6c__avatar--ig {
  width: 3.75cqw; height: 3.75cqw;
  padding: 0.156cqw;                                       /* espessura do anel 3px */
  background: linear-gradient(215deg, #7b2fbf 8%, #d62f80 35%, #f2703c 65%, #f8ca4c 92%);
  }
.s6c__avatar--ig .s6c__av {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
  border: 0.156cqw solid #fff;                             /* gap branco 3px */
  display: block;
}
/* avatar LinkedIn: círculo lavanda #CFC5D6 com o recorte por cima */
.s6c__avatar--li {
  width: 3.333cqw; height: 3.333cqw;                       /* 64px */
  background: #cfc5d6; position: relative;
}
.s6c__avatar--li .s6c__av {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: auto; height: 112%;                                /* recorte sai um pouco do círculo */
  max-width: none; display: block;
}

.s6c__body { min-width: 0; display: flex; flex-direction: column; gap: 0.26cqw; padding-top: 0.15cqw; }
.s6c__head { margin: 0; line-height: 1.2; white-space: nowrap; }
.s6c__user { font-weight: 700; font-size: 0.729cqw; color: #2d190d; }   /* 14px */
.s6c__time { font-weight: 700; font-size: 0.677cqw; color: #848484; margin-left: 0.2cqw; } /* 13px */
.s6c__badge{ font-size: 0.677cqw; color: #848484; }
.s6c__text { margin: 0; font-size: 0.885cqw; line-height: 1.18; color: #2d190d; overflow-wrap: anywhere; } /* 17px */
.s6c--up .s6c__text { text-transform: uppercase; }
.s6c__act  { margin: 0.29cqw 0 0; font-weight: 700; font-size: 0.677cqw; color: #848484; white-space: nowrap; } /* 13px */
.s6c__act span { margin-left: 1.3cqw; }

/* variante LinkedIn */
.s6c__conx { font-weight: 700; font-size: 0.625cqw; color: #848484; }   /* 12px */
.s6c--li .s6c__user { font-size: 0.625cqw; }
.s6c__role { margin: 0; font-size: 0.781cqw; line-height: 1.15; color: #848484; white-space: normal; overflow-wrap: anywhere; } /* 15px */
.s6c--li .s6c__act { font-size: 0.729cqw; }                             /* 14px */
.s6c__amei { color: #cc5a36; }
.s6c__like { display: inline-block; width: auto; height: 1.2cqw; margin: -0.3cqw 0 -0.35cqw 0.35cqw; vertical-align: middle; }
.s6c__act .s6c__sep { margin-left: 1.1cqw; }

/* ====================================================================
   07 · REDES  (canvas proporcional 1920×2903; blocos TikTok/Insta/LinkedIn)
   ==================================================================== */
.s7 { position: relative; background: var(--paper); }
.s7__frame {
  position: relative; width: 100%;
  aspect-ratio: 1920 / 2903;
  container-type: inline-size;
  overflow: hidden;
}
/* Os 3 LUGARES da seção são fixos (topo / meio / base) e cada um tem o seu
   estilo. Os blocos de rede ocupam esses lugares na ordem do DOM — então,
   se a Gio reordenar, quem cair no meio recebe o visual do meio.
   O ESPAÇAMENTO INTERNO é o mesmo nos três (só o recuo do topo muda, porque
   cada fundo tem uma onda de altura diferente) — assim trocar a ordem não
   mexe nas margens. */
.s7blk {
  position: absolute; left: 0; width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  justify-content: space-between;                /* a margem manda; a sobra vai pro miolo */
  gap: 2.344cqw;                                 /* 45px: mínimo entre celular e métricas */
}
/* o conteúdo fica CENTRADO na área útil de cada lugar → a folga de cima e a
   de baixo ficam iguais. O padding só desconta o que não é área útil:
   as ondas da faixa laranja e o pedaço que a seção seguinte cobre. */
.s7blk:nth-of-type(1) { top: 0;       height: 34.654%; padding: 2.986cqw 0 8.125cqw; }
.s7blk:nth-of-type(2) { top: 31.278%; height: 34.757%; padding: 6.042cqw 0; }
.s7blk:nth-of-type(3) { top: 63.21%;  height: 36.79%;  padding: 7.292cqw 0 6.597cqw; } /* 69px da seção 08 */

/* linha 1: cards + celular. O CELULAR fica no fluxo porque é o elemento
   mais alto — é ele que define os limites do bloco (no desenho, a folga de
   cima e de baixo é medida a partir dele, não dos cards). Os cards ficam
   centrados em relação a ele. */
.s7blk__cards {
  display: flex; align-items: center; justify-content: center;
  gap: 3.906cqw;                                 /* 75px entre card e celular */
  width: 100%;
}
/* linha 2: as métricas, divididas igualmente */
.s7blk__metricas {
  display: flex; justify-content: center; align-items: stretch;
  gap: 1.667cqw;                                 /* 32px */
  width: 62.031cqw;                              /* 1191px: a largura do bloco */
}
/* fundos de papel texturizado + faixa laranja ondulada (bloco do Insta) */
.s7__paper { position: absolute; left: 0; width: 100%; object-fit: cover; z-index: 0; pointer-events: none; }
.s7__band  { position: absolute; left: 0; top: 31.278%; width: 100%; height: auto; z-index: 0; pointer-events: none; }

.s7card, .s7pill, .s7phone { position: relative; z-index: 1; }
.s7card--apoio { width: 19.792cqw; }             /* 380px */
.s7card--dest  { width: 19.74cqw; }              /* 379px */
.s7phone {
  width: 14.74cqw; height: auto; flex: 0 0 auto;
  filter: drop-shadow(0 1cqw 1.4cqw rgba(0,0,0,0.22));
}
.s7pill { flex: 1 1 0; max-width: 19.48cqw; }    /* 3 métricas = 374px; 5 = menores */

/* cards — exato do Figma: fill #E8E1DF, stroke 3px, raio 40px (2.083cqw) */
.s7card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 1.2cqw 1.7cqw;
  border-radius: 2.083cqw; border: 0.156cqw solid;
  background: #e8e1df; color: var(--brown);
}
/* min-height (não height): o texto de cada rede tem tamanho diferente e o
   card do meio usa fonte maior — com altura fixa, a rede que fosse pro meio
   transbordava. Assim o card cresce só o quanto precisar. */
.s7card--apoio { min-height: 18.33cqw; justify-content: flex-start; }
.s7card--dest  { min-height: 18.33cqw; justify-content: center; gap: 0.9cqw; }
.s7card__logo  { width: auto; height: 2.448cqw; margin-bottom: 1.1cqw; }          /* 47px */
.s7card__name  { margin: 0 0 1.4cqw; font-weight: 900; font-size: 3.385cqw; line-height: 1; }  /* Poppins Black 65px */
.s7card__desc  { margin: 0; font-weight: 500; font-size: 0.99cqw; line-height: 1.2; max-width: 14.5cqw; } /* Medium 19px/22.8 */
.s7card__big   { font-weight: 900; font-size: 6.042cqw; line-height: 1; }          /* Black 116px */
.s7card__stmt  { margin: 0; font-weight: 500; font-size: 1.5625cqw; line-height: 1.293; max-width: 12.1cqw; } /* Medium 30px/38.8 */

.s7pill {
  height: 9.01cqw;                                     /* 173px */
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3cqw;
  border-radius: 2.083cqw; border: 0.156cqw solid;
  background: #e8e1df; color: var(--brown);
  text-align: center;
}
.s7pill__ic  { width: auto; height: 2.031cqw; }                                    /* 39px */
.s7pill__num { font-weight: 900; font-size: 1.927cqw; line-height: 1; }            /* Black 37px */
.s7pill__lbl { font-style: italic; font-weight: 200; font-size: 0.573cqw; line-height: 0.9375cqw; color: var(--brown); } /* ExtraLight It 11px/18 */
.s7pill__lbl b { font-style: italic; font-weight: 800; font-size: 0.755cqw; color: var(--brown); }  /* ExtraBold It ~14-15px */

/* cores por LUGAR: topo e base laranja; o do MEIO (sobre a faixa) em azul */
.s7blk .s7card, .s7blk .s7pill { border-color: #ed9441; }
.s7blk:nth-of-type(2) .s7card,
.s7blk:nth-of-type(2) .s7pill { border-color: #204ee3; }
/* o do meio tem o título e a descrição um pouco menores */
.s7blk:nth-of-type(2) .s7card__name { font-size: 3.333cqw; }
.s7blk:nth-of-type(2) .s7card__desc { font-size: 1.094cqw; }

/* ====================================================================
   08 · MARCAS PARCEIRAS  (proporcional 1920×934; roxo #A06CC7 com ondas)
   ==================================================================== */
.s8 {
  position: relative; z-index: 1;
  margin-top: -3.594%;             /* 69px @1920: ondas do topo sobrepõem o papel da 07 */
}
.s8__frame {
  position: relative; width: 100%;
  aspect-ratio: 1920 / 934;
  container-type: inline-size;
}
.s8__fundo { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; object-fit: cover; object-position: center; }

/* título na pill (stroke branco 3px, raio total) */
.s8__titulo {
  position: relative; z-index: 1;
  width: 34.063cqw; height: 3.281cqw;
  margin: 7.448cqw auto 0;                         /* 143px @1920: mesmo topo do desenho */
  display: flex; align-items: center; justify-content: center;
  border: 0.156cqw solid #fff; border-radius: 999px;
  font-weight: 700; font-size: 2.448cqw;           /* Poppins Bold 47px */
  letter-spacing: 0.1031em;                        /* 4.8471px @47 */
  color: #fefffe; white-space: nowrap;
}

/* mural de logos (sub-frame 1180×504) */
/* Parede de logos: título e parede ficam EM FLUXO (não absolutos) pra
   seção crescer se a Gio adicionar mais marcas do que cabe no desenho —
   o fundo de ondas cobre o que sobrar (object-fit: cover). Com as 34 do
   desenho, as medidas abaixo reproduzem o layout original ao pixel:
   143 + 63 (título) + 59 + 504 (parede) + 165 = 934. */
.s8__marcas {
  position: relative; z-index: 1;
  width: 61.458cqw; min-height: 26.25cqw;          /* 1180 × 504 @1920 */
  margin: 3.073cqw auto 8.594cqw;
  container-type: inline-size;
  display: flex; flex-direction: column; justify-content: space-between;
  row-gap: 1cqw;                                   /* só vale com mais de 6 fileiras */
}
/* Cada fileira tem a altura do maior logo do desenho (61px @1180) e espalha
   os logos por igual — as fileiras são montadas pelo JS com larguras parecidas. */
.s8__row {
  display: flex; align-items: center; justify-content: space-evenly;
  height: 5.4cqw;
}
/* A largura de cada logo vem do desenho (inline, em cqw da parede); a altura
   é a da fileira, com object-fit: um logo fora de proporção encolhe pra caber
   em vez de empurrar os vizinhos. */
.s8__logo {
  display: block; flex: 0 0 auto;
  height: 100%;
  object-fit: contain; object-position: center;
}

/* ====================================================================
   09 · TOP 3 CASES DE SUCESSO  (proporcional 1920×2600, papel amassado)
   ==================================================================== */
.s9 {
  position: relative; z-index: 0;
  margin-top: -3.021%;              /* 58px @1920: ondas de baixo da 08 sobrepõem o papel */
}
.s9__frame {
  position: relative; width: 100%;
  aspect-ratio: 1920 / 2600;
  container-type: inline-size;
  overflow: hidden;
}
.s9__fundo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }

/* título Poppins Black 92px, branco, contorno + sombra dura 4px */
.s9__titulo-wrap { position: absolute; left: 0; top: 4.577%; width: 100%; z-index: 2; }
.s9__titulo {
  margin: 0; position: relative; z-index: 1;
  text-align: center; text-transform: uppercase;
  font-weight: 900; font-size: 4.792cqw;             /* 92px */
  color: #fefffe;
  -webkit-text-stroke: 0.15cqw #1e1e1e; paint-order: stroke fill;
  text-shadow: 0 0.208cqw 0 #000;                     /* 0 4px 0 black */
  line-height: 1;
  padding-top: 1.042cqw;                              /* cap em y139 */
}
.s9__estrelinhas {
  position: absolute; left: 21.875%; top: -0.15cqw;
  width: 59.375cqw; aspect-ratio: 1140 / 122;   /* viewBox do SVG (sem isso ele estica) */
  height: auto; z-index: 0;
}
.s9__star { display: none; }        /* só no mobile (ver @media) */

/* linhas de círculos (tile SVG 62px: fill #E66CE0, stroke #214FE3) */
.s9__circles {
  position: absolute; left: 0; width: 100%; height: 3.229cqw; z-index: 1;
  background: url("assets/images/s9-circle.svg") left center / 3.229cqw 3.229cqw repeat-x;
}

/* frase manuscrita no rodapé */
.s9__frase { position: absolute; left: 26.406%; top: 87.154%; width: 47.24cqw; height: auto; z-index: 1; }
.s9__frase--mob { display: none; }        /* versão mobile do CTA (mais legível) */

/* --- bloco de case (sub-frame 1183×480) --- */
.s9case {
  position: absolute; left: 19.219%;
  width: 61.615cqw; aspect-ratio: 1183 / 480;
  container-type: inline-size; z-index: 1;
  color: #201e1c;
}
.s9case__celu { position: absolute; left: 0; top: 0; width: 19.865cqw; height: auto; }

/* Vídeo no lugar do print: o PNG do mockup traz a moldura desenhada, então
   quando entra vídeo a moldura é refeita em CSS — medidas tiradas do próprio
   PNG (235×480): borda 3px = 1.28%, notch 45×19px no topo. */
.s9case__celu--video {
  aspect-ratio: 235 / 480;
  padding: 0.254cqw; background: #111;    /* 1.28% da largura DO CELULAR */
  border-radius: 7.5% / 3.7%;
  position: absolute; overflow: hidden;
}
.s9case__video {
  width: 100%; height: 100%; display: block;
  object-fit: cover; border-radius: 6.4% / 3.1%;
  background: #111; cursor: pointer;        /* clique liga/desliga o som */
}
.s9case__celu--video::after {               /* o notch do aparelho */
  content: ""; position: absolute; z-index: 2;
  left: 50%; translate: -50% 0; top: 4%;
  width: 19.1%; height: 4%;
  border-radius: 99px; background: #111;
}

.s9case__col {
  position: absolute; left: 25.11%; top: 4.79%;
  width: 19.1cqw;
  display: flex; flex-direction: column; align-items: flex-start;
}
.s9case__nome {
  margin: 0; font-weight: 800; font-size: 4.142cqw;   /* ExtraBold 49px */
  line-height: 1; text-transform: uppercase;
  text-box-trim: trim-both; text-box-edge: cap alphabetic;
}
.s9case__line { display: block; height: 0.338cqw; background: #e065e1; margin-top: 1.5cqw; }
.s9case__head { margin: 1.45cqw 0 0; font-weight: 700; font-size: 1.944cqw; line-height: 1.2; color: #000; }
.s9case__arrow { width: 3.297cqw; aspect-ratio: 39 / 42; height: auto; margin-top: 1.18cqw; }
.s9case__sub  { margin: 2cqw 0 0; font-weight: 400; font-size: 1.944cqw; line-height: 1.2; color: #000; }

.s9case__cta {
  position: absolute; left: 25.359%; top: 86.04%;
  width: 19.865cqw; height: 3.55cqw;
  display: flex; align-items: center; justify-content: center;
  background: #e66ce0; border-radius: 999px;
  font-weight: 700; font-size: 1.944cqw; text-transform: uppercase;
  color: #fefffe; text-decoration: none;
}

/* cards de métrica (275×203): fill #E8E1DF, stroke 3px #E065E1, raio 40px */
.s9met {
  position: absolute;
  width: 23.246cqw; height: 17.159cqw;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.1cqw;
  background: #e8e1df; border: 0.254cqw solid #e065e1; border-radius: 3.381cqw;
  text-align: center;
}
.s9met__num { font-weight: 800; font-size: 6.932cqw; line-height: 1; }   /* ExtraBold 82px */
.s9met__lbl { font-weight: 500; font-size: 2.029cqw; line-height: 1; }   /* Medium 24px */

/* ====================================================================
   10 · PAREDE DE MEMES  (proporcional 1920×900; magenta scalopado)
   ==================================================================== */
.s10 {
  position: relative; z-index: 2;
  margin-top: -2.031%;             /* 39px: ondas do topo sobre o papel da 09 */
}
/* a colagem ocupa exatamente a caixa da arte original (1920×874), então cada
   bloco usa as coordenadas que ele tem lá dentro */
.s10__colagem {
  position: absolute; left: 0; top: 1.111%; width: 100%;
  aspect-ratio: 1920 / 874;
  z-index: 1;
}
.s10__meme { position: absolute; height: auto; max-width: none; }
.s10__frame {
  position: relative; width: 100%;
  aspect-ratio: 1920 / 900;
  container-type: inline-size;
  overflow: hidden;
}
/* A CENA é recortada pela mesma arte do fundo: assim a Gio, ao subir, é
   cortada pelas ONDAS e não pelo retângulo do container. */
.s10__frame {
  -webkit-mask-image: url("assets/images/s10-fundo.png");
          mask-image: url("assets/images/s10-fundo.png");
  -webkit-mask-size: 100% auto;  mask-size: 100% auto;
  -webkit-mask-position: 0 31.3%; mask-position: 0 31.3%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
/* wrapper de entrada: não posiciona nada, só anima.
   ⚠️ o transform da entrada cria contexto de empilhamento — então a camada
   tem de estar AQUI, senão o z-index da imagem lá dentro não vale contra a
   colagem e a Gio passa por baixo dos memes enquanto anima. */
.s10__cam { position: absolute; inset: 0; display: block; pointer-events: none; }
.s10__cam[data-anim="s10-gio"]    { z-index: 2; }
.s10__cam[data-anim="s10-icones"] { z-index: 3; }
.s10__fundo  { position: absolute; left: 0; top: 0.556%; width: 100%; height: auto; z-index: 0; pointer-events: none; }
.s10__memes  { position: absolute; left: 0; top: 1.111%; width: 100%; height: auto; z-index: 1; will-change: transform; }
.s10__gio    { position: absolute; left: 0; top: 1.111%; width: 100%; height: auto; z-index: 2; pointer-events: none; }
.s10__icones { position: absolute; left: 11.979%; top: 6.333%; width: 76.25cqw; height: auto; z-index: 3; pointer-events: none; }

/* ====================================================================
   11 · POR QUE ME ESCOLHER?  (proporcional 1920×1100, papel amassado)
   ==================================================================== */
.s11 {
  position: relative; z-index: 0;
  margin-top: -2.188%;             /* 42px: ondas de baixo da 10 sobre o papel */
}
.s11__frame {
  position: relative; width: 100%;
  aspect-ratio: 1920 / 1100;
  container-type: inline-size;
  overflow: hidden;
}
.s11__fundo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }

.s11__titulo {
  position: absolute; left: 19.271%; top: 10.227%;
  margin: 0; z-index: 1;
  font-weight: 800; font-size: 4.271cqw;      /* ExtraBold 82px */
  line-height: 1.029;                          /* 84.4/82 */
  color: var(--brown);
}

.s11__list {
  position: absolute; left: 19.115%; top: 27.083%;
  margin: 0; padding: 0; list-style: none; z-index: 1;
  display: flex; flex-direction: column; gap: 1.589cqw;   /* linha em branco 30.5px */
}
.s11__item { display: flex; align-items: center; gap: 0.781cqw; }
.s11__arrow { flex: 0 0 auto; width: 3.854cqw; height: auto; }
.s11__item p {
  margin: 0; width: 15.469cqw;                 /* 297px */
  font-weight: 500; font-size: 1.198cqw;       /* Medium 23px */
  line-height: 1.326;                          /* 30.5/23 */
  color: var(--brown);
}

/* colagem em camadas — sub-frame 729×867 (posições exatas do Figma) */
.s11__collage {
  position: absolute; left: 50.417%; top: 11.545%;
  width: 37.969cqw; aspect-ratio: 729 / 867;
  container-type: inline-size; z-index: 1;
}
.s11__collage > img,
.s11__collage > span { position: absolute; height: auto; display: block; }
.s11__collage > span.spin-slow > img { position: static; width: 100%; height: auto; }
/* coordenadas diretas do Figma (assets em escala 1:1)
   starburst = wrapper com as 2 camadas (união x0–729, y38–780) girando junto */
.s11__starburst { left: 0; top: 4.383%; width: 100cqw; aspect-ratio: 729 / 742; z-index: 1; }
.s11__starburst-spin { position: absolute; inset: 0; display: block; }
.s11__collage .s11__starburst-spin > img { position: absolute; height: auto; }
.s11__star--back  { left: 0;      top: 0;      width: 100%; }
.s11__star--front { left: 1.235%; top: 1.078%; width: 96.433%; }
.s11__foto        { left: 18.656%;  top: 0;       width: 49.931cqw; z-index: 3; }
.s11__flor, .s11__emoji { z-index: 4; }
.s11__flor--1 { left: 65.295%; top: 15.571%; width: 8.642cqw; }
.s11__flor--2 { left: 26.612%; top: 69.319%; width: 10.014cqw; }
.s11__flor--3 { left: 64.198%; top: 69.089%; width: 5.898cqw; }
.s11__flor--4 { left: 17.558%; top: 28.489%; width: 5.898cqw; }
.s11__flor--5 { left: 61.179%; top: 49.020%; width: 10.837cqw; }
.s11__flor--6 { left: 26.063%; top: 34.833%; width: 10.288cqw; }
.s11__emoji--1 { left: 81.756%; top: 46.251%; width: 9.465cqw; }
.s11__emoji--2 { left: 18.107%; top: 14.648%; width: 8.642cqw; }

/* ====================================================================
   12 · FORMATOS DE CONTEÚDO  (proporcional 1920×500; lilás #A271C7)
   ==================================================================== */
/* o container das cqw é a SEÇÃO, não o frame: o frame tem padding lateral,
   e aí as medidas do Figma (que são sobre os 1920) encolhiam junto. */
.s12 { position: relative; z-index: 0; background: #a271c7; container-type: inline-size; }
/* conteúdo em FLUXO: a lista de formatos é editável, então a faixa
   cresce se a Gio adicionar itens (o fundo é cor sólida, não estica nada) */
.s12__frame {
  position: relative; width: 100%;
  min-height: 26.042cqw;                 /* 500/1920 — a altura do desenho */
  padding: 2.969cqw 4cqw 10.313cqw;      /* topo 57px (Figma); embaixo 198px, onde a onda da 13 sobe */
  display: flex; flex-direction: column; align-items: center; gap: 2.396cqw;   /* 46px */
}
.s12__titulo-row {
  display: flex; align-items: center; justify-content: center;
  gap: 1.615cqw;
}
.s12__seta { width: 3.854cqw; aspect-ratio: 74 / 69; height: auto; }
.s12__seta--esq { transform: scaleX(-1); }
.s12__titulo {
  margin: 0; font-weight: 800; font-size: 2.656cqw;   /* ExtraBold 51px */
  line-height: 1.35; color: #fff;
}
/* Medidas do Figma (frame "itens" 1191×132 dentro da seção de 1920) —
   convertidas pela largura da SEÇÃO, que é o container das cqw aqui. */
.s12__itens {
  width: 100%; max-width: 62.031cqw;                  /* 1191px */
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 1.979cqw 2.604cqw;                             /* 38px / 50px */
}
.s12pill {
  height: 2.448cqw;                                   /* 47px */
  padding: 0 1.12cqw;                                 /* 21,5px */
  display: flex; align-items: center; justify-content: center;
  border: 0.104cqw solid #fff; border-radius: 999px;  /* stroke 2px */
  font-weight: 500; font-size: 1.5625cqw;             /* Medium 30px */
  color: #fff; white-space: nowrap;
}

/* ====================================================================
   13 · CONTATOS / ENCERRAMENTO  (proporcional 1920×831; azul #204EE3)
   ==================================================================== */
.s13 {
  position: relative; z-index: 1;
  margin-top: -7.656%;              /* 147px: onda azul sobre a lilás da 12 */
}
.s13__frame {
  position: relative; width: 100%;
  aspect-ratio: 1920 / 831;
  container-type: inline-size;
  overflow: hidden;
}
.s13__fundo { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

.s13__titulo {
  position: absolute; left: 19.167%; top: 19.013%;
  margin: 0; z-index: 1;
  font-weight: 800; font-size: 2.969cqw;              /* ExtraBold 57px */
  line-height: 1.291;                                 /* 73.6/57 */
  color: #e8e1df;
}
.s13__heart { display: inline-block; width: 3.49cqw; height: auto; margin-left: 0.5cqw; vertical-align: baseline; }

.s13__contatos {
  position: absolute; left: 19.115%; top: 48.858%;
  z-index: 1;
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.885cqw;  /* 17px */
}
.s13pill {
  height: 2.969cqw;                                   /* 57px */
  display: flex; align-items: center; gap: 0.938cqw;
  padding-left: 0.573cqw;
  border: 0.104cqw solid #45b2f2; border-radius: 999px;
  color: #e8e1df; text-decoration: none;
  font-weight: 300; font-size: 1.302cqw;              /* Light 25px */
  white-space: nowrap;
}
.s13pill__ic { width: 2.031cqw; height: 2.031cqw; }

.s13__meme { position: absolute; left: 55.26%; top: 16.606%; width: 25.729cqw; height: auto; z-index: 1; }

.s13__valeu {
  position: absolute; left: 57.083%; top: 76.174%;
  width: 21.458cqw; aspect-ratio: 412 / 115;
  container-type: inline-size; z-index: 1;
}
.s13__valeu-outline { position: absolute; inset: 0; width: 100%; height: 100%; }
.s13__valeu-texto {
  position: absolute; left: 9.95%; top: 33%;
  width: 79%; margin: 0;
  transform: rotate(-6deg);
  font-style: italic; font-weight: 500; font-size: 5.34cqw;  /* Medium It 22px @412 */
  color: #e8e1df; text-align: center;
}

/* ====================================================================
   RESPONSIVO
   ==================================================================== */

/* Tablet 641–1023px: as seções são proporcionais → escalam sozinhas via cqw/%. */

/* ====================================================================
   Mobile ≤640px — reflow vertical (sem frame mobile no Figma; adaptado)
   ==================================================================== */
@media (max-width: 640px) {

  /* ---------- CAPA (retrato) ---------- */
  .capa__frame { aspect-ratio: 39 / 66; overflow: hidden; }

  .capa__fundo {
    top: 0;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    -webkit-mask: none;
    mask: none;
  }

  /* divisor de onda (papel) no rodapé da capa */
  .capa__frame::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 14%;
    background: url("data:image/svg+xml,%3Csvg%20width%3D%221920%22%20height%3D%22220%22%20viewBox%3D%220%200%201920%20220%22%20preserveAspectRatio%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M0%2078%20C300%2018%20560%20128%20900%2086%20C1200%2050%201520%20140%201920%2064%20L1920%20220%20L0%20220%20Z%22%20fill%3D%22%23f4f1f1%22%2F%3E%3C%2Fsvg%3E") bottom center / 100% 100% no-repeat;
    z-index: 5;
    pointer-events: none;
  }

  .capa__titulo {
    top: 5%;
    left: 50%;
    translate: -50% 0;        /* propriedade independente: libera transform p/ a animação */
    align-items: center;
    text-align: center;
    font-size: 17cqw;           /* ~66px @390 */
    line-height: 0.98;
    -webkit-text-stroke-width: 0.5cqw;
    text-stroke-width: 0.5cqw;
  }

  .capa__emoji { top: 26.5%; left: 22%; width: 11cqw; }
  .capa__tag {
    top: 27%;
    left: 50%;
    translate: -50% 0;        /* libera transform p/ a animação */
    text-align: center;
    font-size: 4.4cqw;         /* ~17px @390 */
    line-height: 1.35;
  }
  .capa__cursor { top: 33%; left: 70%; width: 6.5cqw; }

  .capa__foto {
    top: auto;
    bottom: 0;
    left: 50%;
    translate: -50% 0;        /* libera transform p/ a animação */
    width: 70cqw;              /* menor: a tagline não encosta no rosto */
    /* sem máscara da onda no mobile: o fundo aqui é laranja cheio (não papel),
       então quem corta a base é o divisor de onda (::after). */
    -webkit-mask: none;
    mask: none;
  }

  /* ---------- QUEM SOU EU (empilhado) ---------- */
  .quem {
    margin-top: 0;               /* sem overlap no mobile (a onda vira divisor) */
  }
  .quem__frame {
    aspect-ratio: auto;
    container-type: normal;       /* aspect auto + inline-size quebra o cqw aqui */
    display: block;
    padding: 56px 0 48px;
  }
  .quem__fundo { height: 100%; }

  .quem__texto-col {
    display: block;
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
    padding: 0;
  }
  .quem__titulo {
    position: static;
    font-size: 52px;
    line-height: 0.95;
    margin-bottom: 18px;
  }
  .quem__texto {
    position: static;
    width: 100%;
    font-size: 16px;
    line-height: 1.32;
    overflow-wrap: break-word;
  }
  .quem__texto p { margin: 0 0 17px; }

  .quem__collage {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    max-width: 320px;
    margin: 34px auto 0;
  }
  .quem__frame { padding-bottom: 130px; }   /* respiro pra onda da 03 não cobrir a collage */

  /* ---------- MEUS NICHOS → cards empilhados ---------- */
  .s3 { margin-top: -112px; }       /* ondas cobrem o papel (sem faixa escura) */
  .s3__frame {
    min-height: 0; container-type: normal;
    display: block; padding: 84px 24px 104px;   /* respiro pras ondas */
  }
  .s3__bg-top, .s3__bg-bot { aspect-ratio: 390 / 46; }   /* ondas menores no mobile */
  .s3__titulo {
    font-size: 30px; margin-bottom: 28px;
    -webkit-text-stroke-width: 1px;        /* proporcional: a 09 usa 1.5px em 46px */
    text-shadow: 0 2px 0 #000;
  }
  .s3__cards {
    flex-direction: column; align-items: center; gap: 24px; padding: 0;
  }
  .s3card { width: 100%; max-width: 320px; border-radius: 28px; padding: 12px 12px 22px; }
  .s3card__thumb { border-radius: 20px; }
  .s3card__nome { margin-top: 14px; font-size: 24px; }
  .s3card__desc { margin-top: 4px; font-size: 14px; }
  .s3card__btn { margin-top: 12px; width: 150px; height: 38px; border-width: 2px; font-size: 15px; }

  /* ---------- VIBE (retrato, foto em destaque) ---------- */
  .vibe { margin-top: -44px; }      /* ondas da 03 sobre o xadrez */
  .vibe__frame { aspect-ratio: 39 / 50; }
  .vibe__fundo { object-position: center; }
  .vibe__foto {
    top: 50%; left: 50%;
    translate: -50% -50%;         /* independente: o reveal usa transform sem descentralizar */
    width: 92cqw;                 /* 1087×1001 → ~quadrada */
  }
  /* florzinhas espalhadas ao redor da foto (decorativas) */
  .vibe__flor--a { top: 15%; left: 79%; width: 12cqw; }
  .vibe__flor--b { top: 24%; left: 7%;  width: 11cqw; }
  .vibe__flor--c { top: 78%; left: 80%; width: 10cqw; }
  .vibe__flor--d { top: 88%; left: 62%; width: 6cqw; }
  .vibe__flor--e { top: 70%; left: 9%;  width: 6cqw; }

  /* ---------- FRIENDS (empilhado) ---------- */
  .fr__frame {
    aspect-ratio: auto;
    container-type: normal;       /* aspect auto + inline-size quebra o cqw */
    display: block;
    text-align: center;           /* centraliza os blocos inline (título/friends/?) */
    padding: 44px 18px 56px;
  }
  .fr__fundo { height: 100%; }

  /* título: "Quem são meus" / FRIENDS ? — relative+z1 (static fica atrás do fundo absoluto) */
  .fr__titulo {
    position: relative; z-index: 1; inset: auto;
    margin: 0 0 6px;
    font-size: 38px;
    line-height: 1;
    -webkit-text-stroke-width: 1px;
    text-shadow: 0 2px 2px rgba(0,0,0,0.5);
  }
  .fr__friends {
    position: relative; z-index: 1; inset: auto;
    display: inline-block;
    width: 62%; max-width: 232px;
    vertical-align: middle;
  }
  .fr__interrog {
    position: relative; z-index: 1; inset: auto;
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
    font-size: 56px; line-height: 1;
    -webkit-text-stroke-width: 1.4px;
    text-shadow: 0 2px 2px rgba(0,0,0,0.5);
  }

  /* nota (relative: continua sendo o containing block dos filhos absolutos) */
  .fr-nota {
    position: relative; inset: auto;
    width: 100%; max-width: 372px;
    margin: 26px auto 0;
  }

  /* foto emoldurada */
  .fr-foto {
    position: relative; inset: auto;
    width: 232px; max-width: 66%;
    margin: 30px auto 0;
  }

  /* gráfico de idade — px (não tem container próprio); colunas mais juntas e texto maior */
  .fr-idade {
    position: relative; inset: auto;
    width: auto; max-width: 100%;
    margin: 40px auto 0;
    container-type: normal;
    justify-content: center; gap: 22px;
  }
  .fr-idade__pct { font-size: 20px; margin-bottom: 7px; }
  .fr-idade__bar { width: 34px; border-radius: 0; }
  .fr-idade__lbl   { margin-top: 9px; font-size: 15px; line-height: 1.15; }
  .fr-idade__lbl b { font-size: 15px; }

  /* gênero (bonecos-medidores) — mantém container próprio */
  .fr-genero {
    position: relative; inset: auto;
    width: 250px; max-width: 74%;
    margin: 44px auto 0;
  }

  /* top 3 cidades — mantém container próprio; respiro maior (bloco separado do gênero) */
  .fr-top {
    position: relative; inset: auto;
    width: 264px; max-width: 78%;
    margin: 86px auto 0;
  }

  /* ---------- PAREDE DE COMENTÁRIOS → marquee de 3 fileiras (solução Bárbara) ---------- */
  .s6__frame { aspect-ratio: 390 / 720; height: auto; container-type: normal; }
  .s6__bg { object-position: center; transform: none !important; }
  /* Gio = banner central colado no rodapé, na frente das fileiras */
  .s6__gio {
    left: 50%; bottom: 0; top: auto; width: auto; height: 64%;
    translate: -50% 0; z-index: 3;
  }
  /* fileiras só no topo (não disputam espaço com a Gio) */
  .s6__marquee {
    position: absolute; top: 18px; left: 0; right: 0; z-index: 2;
    display: flex; flex-direction: column; gap: 10px;
  }
  .s6__mrow { overflow: hidden; }
  .s6__mtrack {
    display: inline-flex; align-items: stretch; width: max-content;
    animation: s6marquee 38s linear infinite; animation-play-state: paused;
  }
  .s6.is-visible .s6__mtrack { animation-play-state: running; }
  .s6__mrow[data-dir="right"] .s6__mtrack { animation-direction: reverse; }
  .s6__mgroup { display: inline-flex; align-items: stretch; gap: 10px; padding-right: 10px; }
  /* 1ª fileira alinha pelo bottom, 3ª pelo top (o vão vazio vai p/ fora) */
  .s6__mrow:first-child  .s6__mtrack, .s6__mrow:first-child  .s6__mgroup { align-items: flex-end; }
  .s6__mrow:nth-child(3) .s6__mtrack, .s6__mrow:nth-child(3) .s6__mgroup { align-items: flex-start; }

  .s6__marquee .s6c {
    position: static; width: auto; max-width: 270px; min-height: 0;
    padding: 8px 11px; border-radius: 14px; gap: 6px;
  }
  .s6__marquee .s6c__avatar--ig { width: 34px; height: 34px; padding: 1.5px; }
  .s6__marquee .s6c__avatar--ig .s6c__av { border-width: 1.5px; }
  .s6__marquee .s6c__avatar--li { width: 34px; height: 34px; }
  .s6__marquee .s6c__body { gap: 2px; padding-top: 1px; }
  .s6c__head { white-space: normal; }        /* header pode quebrar (não estoura o card) */
  .s6c__user { font-size: 12px; white-space: nowrap; }
  .s6c__time, .s6c__badge { font-size: 11px; }
  .s6c__conx { font-size: 11px; }
  .s6c--li .s6c__user { font-size: 12px; }
  .s6c__text { font-size: 12.5px; line-height: 1.25; }
  .s6c__role { font-size: 11px; }
  .s6c__act { font-size: 10.5px; margin-top: 2px; }
  .s6c--li .s6c__act { font-size: 11px; }
  .s6c__like { height: 14px; margin: -4px 0 -4px 5px; }
  .s6c__act span, .s6c__act .s6c__sep { margin-left: 10px; }

  /* ---------- REDES → blocos empilhados ---------- */
  .s7__frame { aspect-ratio: auto; container-type: normal; display: block; overflow: visible; }
  .s7__band, .s7__paper { display: none; }
  .s7blk {
    position: static; height: auto;
    display: flex; flex-direction: column; align-items: center;
    gap: 16px; padding: 46px 20px;
  }
  /* no mobile tudo empilha: as duas linhas do desktop se desfazem */
  .s7blk__cards { display: contents; }
  .s7blk__metricas {
    display: flex; flex-direction: column; align-items: center;
    width: 100%; gap: 12px;
  }
  .s7phone { position: static; translate: none; }
  /* os recuos posicionais do desktop descontam ondas que no mobile não
     existem — aqui o empilhamento manda, com a mesma especificidade. */
  .s7blk:nth-of-type(1),
  .s7blk:nth-of-type(2),
  .s7blk:nth-of-type(3) { padding: 46px 20px; }
  .s7blk:last-child { padding-bottom: 130px; }   /* a onda da 08 sobe por cima daqui */
  .s7blk:nth-of-type(2) { background: #e8933b; }   /* o do meio vira bloco laranja */

  .s7card, .s7pill, .s7phone { position: static; inset: auto; }
  .s7card--apoio, .s7card--dest { min-height: 0; width: 100%; }
  .s7card {
    width: 100% !important; max-width: 340px; height: auto !important;
    padding: 24px 22px; border-width: 2.5px; border-radius: 26px;
  }
  .s7card__logo { height: 34px; margin-bottom: 12px; }
  .s7card__name { font-size: 34px; margin-bottom: 10px; }
  .s7card__desc { font-size: 14.5px; max-width: none; }
  .s7card__big  { font-size: 62px; white-space: nowrap; }
  .s7card__stmt { font-size: 19px; max-width: none; }
  .s7card--dest { gap: 8px; }
  .s7blk:nth-of-type(2) .s7card__name { font-size: 34px; }
  .s7blk:nth-of-type(2) .s7card__desc { font-size: 14.5px; }
  .s7phone { width: 208px !important; max-width: 62%; filter: drop-shadow(0 10px 16px rgba(0,0,0,0.22)); }

  /* ---------- MARCAS PARCEIRAS → grade fluida ---------- */
  .s8 { margin-top: -42px; }        /* ondas cobrem o papel da 07 (vãos mostram papel) */
  .s8__frame {
    aspect-ratio: auto; container-type: normal;
    display: block; padding: 74px 20px 88px;
  }
  .s8__fundo { object-fit: cover; object-position: center; }
  .s8__titulo {
    position: relative; z-index: 1; inset: auto;  /* acima do fundo; sem offset do desktop */
    width: max-content; max-width: 100%; height: auto;
    margin: 0 auto 30px; padding: 9px 24px;
    border-width: 2px;
    font-size: 15px; letter-spacing: 2.6px;
  }
  .s8__marcas {
    position: relative; z-index: 1; inset: auto;
    width: auto; min-height: 0; margin: 0; container-type: normal;
    display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 22px 26px;
  }
  .s8__row { display: contents; }   /* as fileiras do desktop somem: os logos fluem juntos */
  .s8__logo { position: static; width: auto !important; height: var(--mh, 16px); }

  /* ---------- TOP 3 CASES → blocos empilhados ---------- */
  .s9 { margin-top: -60px; }        /* ondas da 08 cobrem o papel (sem vão preto) */
  .s9__frame {
    aspect-ratio: auto; container-type: normal;
    display: block; padding: 104px 18px 56px;
  }
  .s9__titulo-wrap { position: relative; inset: auto; width: auto; }
  .s9__titulo {
    /* quebra em 2 linhas equilibradas ("TOP 3 CASES" / "DE SUCESSO") → fonte bem maior */
    font-size: 46px; line-height: 1.02; padding-top: 0;
    text-wrap: balance;
    -webkit-text-stroke-width: 1.5px;
    text-shadow: 0 3px 0 #000;
  }
  /* mobile: estrelas individuais ao redor do título (a faixa esticaria e distorceria) */
  .s9__estrelinhas { display: none; }
  .s9__star {
    display: block; position: absolute; z-index: 0;
    width: 23px; aspect-ratio: 46 / 54; height: auto;   /* proporção real do asset */
    pointer-events: none;
  }
  .s9__star--1 { left: -2px;  top: 2px;   width: 26px; }
  .s9__star--2 { right: 0;    top: -6px;  width: 20px; }
  .s9__star--3 { left: 30%;   top: -12px; width: 17px; }
  .s9__star--4 { right: 4px;  bottom: 2px; width: 26px; }
  .s9__star--5 { left: 6px;   bottom: -6px; width: 19px; }

  .s9case {
    position: relative; inset: auto;
    width: 100%; max-width: 344px; aspect-ratio: auto; container-type: normal;
    margin: 34px auto 0;
    display: flex; flex-wrap: wrap; gap: 12px;
  }
  /* conteúdo dos cases centralizado no mobile */
  .s9case__col { position: static; order: 1; width: 100%; align-items: center; text-align: center; }
  .s9case__nome { font-size: 30px; }
  .s9case__line { height: 3px; margin-top: 10px; width: 96px !important; }
  .s9case__head { margin-top: 12px; font-size: 16.5px; }
  .s9case__arrow { width: 26px; margin-top: 9px; }
  .s9case__sub  { margin-top: 12px; font-size: 15px; }
  .s9case__celu { position: static; order: 2; width: 208px; margin: 6px auto 0; }
  .s9case__celu--video { padding: 2.7px; }        /* a mesma proporção, sem container */
  .s9case__cta {
    position: static; inset: auto; order: 3;
    width: 100%; max-width: 250px; height: auto; margin: 0 auto;
    padding: 10px 26px; font-size: 15px;
  }
  .s9met {
    position: static; order: 4;
    width: calc(50% - 6px); height: auto;
    padding: 20px 8px; gap: 7px;
    border-width: 2px; border-radius: 22px;
  }
  .s9met__num { font-size: 32px; }
  .s9met__lbl { font-size: 13px; }

  /* círculos viram divisores no fluxo (no DOM já estão entre os cases);
     relative+z1 senão ficam atrás do fundo absoluto; largura total da tela */
  .s9__circles {
    position: relative; z-index: 1; inset: auto;
    height: 26px; margin: 36px 0 0;
    width: 100vw; left: 50%; transform: translateX(-50%);
    background-size: 26px 26px;
  }
  .s9__frase--desk { display: none; }     /* troca pela arte mobile (mais legível) */
  .s9__frase--mob {
    position: relative; z-index: 1; inset: auto;
    display: block; width: 88%; max-width: 340px; margin: 34px auto 0;
  }

  /* ---------- MEMES: crop central da cena inteira ----------
     Todas as camadas mantêm a MESMA escala e alinhamento do desktop
     (zoom 260% centrado); as ondas de cima/baixo continuam nas bordas
     e só as laterais são cortadas. */
  .s10 { margin-top: -26px; }
  .s10__frame {
    aspect-ratio: 1 / 1.1971;          /* a arte com zoom cabe inteira: as ondas aparecem */
    -webkit-mask-size: 260% auto; mask-size: 260% auto;      /* o mesmo zoom da arte */
    -webkit-mask-position: 50% 50%; mask-position: 50% 50%;
  }
  .s10__colagem,
  .s10__fundo, .s10__memes, .s10__gio {
    width: 260%; max-width: none;      /* solta o cap do reset img{max-width:100%} */
    height: auto;
    left: 50%; top: 50%;
    translate: -50% -50%;              /* propriedade independente: o transform
                                          é do parallax/reveal e pode ser zerado */
  }
  /* ícones: mesmo zoom (frame deles é 76.25% da cena, centro ~ (50.1%, 46.8%)) */
  .s10__icones {
    width: 198.25%; max-width: none;
    height: auto;
    left: 50.1%; top: 48.4%;
    translate: -50% -50%;
  }

  /* ---------- POR QUE ME ESCOLHER? (empilhado) ---------- */
  .s11 { margin-top: -26px; }
  .s11__frame {
    aspect-ratio: auto; container-type: normal;
    display: block; padding: 60px 24px 56px;
  }
  .s11__titulo { position: relative; inset: auto; font-size: 34px; margin-bottom: 26px; }
  .s11__list { position: relative; inset: auto; gap: 18px; }
  .s11__arrow { width: 30px; }
  .s11__item { gap: 12px; }
  .s11__item p { width: auto; max-width: 300px; font-size: 15.5px; line-height: 1.35; }
  /* a colagem (estrela + foto + flores) empilha abaixo da lista */
  .s11__collage {
    position: relative; inset: auto;
    width: 92%; max-width: 330px; margin: 30px auto 0;
  }

  /* ---------- FORMATOS DE CONTEÚDO → pills em grade fluida ---------- */
  .s12__frame {
    aspect-ratio: auto; container-type: normal;
    display: block; padding: 44px 20px 130px;   /* respiro pra onda da 13 não cobrir as pills */
  }
  .s12__titulo-row { position: relative; inset: auto; width: auto; gap: 12px; margin-bottom: 24px; }
  .s12__seta { width: 26px; }
  .s12__titulo { font-size: 21px; }
  .s12__itens {
    position: relative; inset: auto; width: auto; aspect-ratio: auto; container-type: normal;
    max-width: none;                    /* o limite de 1191px é só do desenho desktop */
    display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  }
  .s12pill {
    position: static; width: auto !important; height: auto;
    padding: 8px 18px; border-width: 1.5px;
    font-size: 14px;
  }

  /* ---------- CONTATOS / ENCERRAMENTO → empilhado ---------- */
  .s13 { margin-top: -100px; }      /* vãos da onda mostram a lilás (como no desktop) */
  .s13__frame {
    aspect-ratio: auto; container-type: normal;
    display: block; padding: 150px 22px 56px;   /* respiro sob a onda azul */
  }
  .s13__fundo { object-fit: cover; object-position: center top; }
  .s13__titulo { position: relative; inset: auto; z-index: 1; font-size: 29px; }
  .s13__heart { width: 32px; margin-left: 6px; }
  .s13__contatos {
    position: relative; inset: auto; z-index: 1;
    margin-top: 26px; gap: 12px;
  }
  .s13pill {
    width: auto !important; max-width: 100%; height: auto;
    padding: 9px 18px 9px 8px; border-width: 1.5px; gap: 10px;
    font-size: 14px;
  }
  .s13pill span { overflow: hidden; text-overflow: ellipsis; }
  .s13pill__ic { width: 26px; height: 26px; flex: 0 0 auto; }
  .s13__meme {
    position: relative; inset: auto; z-index: 1;
    display: block; width: 84%; max-width: 330px; margin: 34px auto 0;
  }
  .s13__valeu {
    position: relative; inset: auto;
    width: 250px; max-width: 74%; margin: 26px auto 0;
  }

  /* pills viram linhas horizontais compactas (conteúdo e texto centralizados) */
  .s7pill {
    flex-direction: row; align-items: center; justify-content: center;
    width: 100% !important; max-width: 330px; height: auto !important;
    gap: 14px; padding: 13px 18px; border-width: 2.5px; border-radius: 20px;
    text-align: center;
  }
  .s7pill__ic  { height: 28px; flex: 0 0 auto; }
  .s7pill__num { font-size: 21px; flex: 0 0 auto; }
  .s7pill__lbl { font-size: 10.5px; line-height: 1.25; }
  .s7pill__lbl b { font-size: 13px; }
}

@keyframes s6marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }