/*!
 * tema-tiff.css — camada de tema da Máquina de Edição Viral no site da Tiffany Chagas (v1)
 *
 * Como funciona (mesmo padrão das landings do Oczety e do Ex-Taticamente):
 *   /assets/css/tiff.css   → sistema da Tiff (fontes, tokens, cabeçalho, menu, cursor "+", .tv, rodapé, quadrado)
 *   /assets/mev/style.css  → folha da Máquina da Viralização (o MESMO HTML/JS das outras landings)
 *   /assets/mev/tema-tiff.css (este arquivo) → devolve o visual da Tiff por cima da folha da Máquina:
 *       preto #0a0a0a quadriculado / branco #fafaf8 / tinta #111 / rosa só nos detalhes,
 *       Bodoni Moda nos títulos (itálico rosa no <em>), DM Sans no texto, tudo reto, sem brilhos.
 *
 * Nada aqui muda estrutura nem JS: só cores, fontes, cantos, sombras e acabamentos.
 * Tudo fica escopado em .mev-tiff (classe do <body> desta página) para não vazar para o resto do site.
 *
 * Seções:
 *   1. Tokens (resolve as variáveis de :root que as duas folhas definem com valores diferentes)
 *   2. Base (html/body/p/títulos/foco: conflitos de reset)
 *   3. Casca da Tiff (rodapé, cursor da Máquina desligado)
 *   4. Layout e fundos das seções + folios de revista
 *   5. Tipografia da landing
 *   6. Botões (linguagem dos botões da Tiff)
 *   7. Tudo reto (border-radius 0) + o que é redondo por natureza
 *   8. Cores: sem verde/vermelho/amarelo, sem brilhos e gradientes coloridos
 *   9. Efeito TV: o que fica por cima do vídeo sobe acima das scanlines
 *  10. Seções, uma a uma (hero → CTA final)
 *  11. CTA fixo do celular + quadrado da Tiff
 *  12. Movimento reduzido
 */

/* ============================================================
   1. TOKENS
   style.css redefine em :root --black, --white, --pink, --serif, --sans, --line, --gutter, --ease e --ease-out
   (e carrega depois do tiff.css). O cabeçalho, o menu, o rodapé, o quadrado e o cursor da Tiff dependem dos
   valores da Tiff, então eles voltam aqui. As variáveis só da Máquina (--text, --muted, --surface…) ganham
   tons da paleta da Tiff.
   ============================================================ */
:root {
  /* valores da Tiff (iguais ao tiff.css) */
  --black: #0a0a0a;
  --white: #fafaf8;
  --pink: #c6218c;
  --serif: "Bodoni Moda", "Bodoni 72", "Didot", "Times New Roman", serif;
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --line: rgba(255, 255, 255, .06);
  --gutter: clamp(16px, 4vw, 56px);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* variáveis da Máquina, na paleta da Tiff */
  --pink-hi: #e0399f;               /* = --pink-soft da Tiff (rosa sobre preto) */
  --pink-deep: #8e145f;
  --text: #fafaf8;
  --muted: rgba(250, 250, 248, .72);
  --faint: rgba(250, 250, 248, .5);
  --surface: #0e0e0e;
  --surface-2: #151515;
  --r-sm: 0px;
  --r-md: 0px;
  --r-lg: 0px;
  --wrap: 1440px;                   /* mesma largura do .container da Tiff */

  /* desta camada */
  --tf-hair: rgba(250, 250, 248, .14);       /* fio fino sobre preto */
  --tf-hair-strong: rgba(250, 250, 248, .6);
  --tf-label: rgba(250, 250, 248, .56);      /* cor dos folios/labels sobre preto */
  --tf-stage: #0d0d0d;                       /* palco das cenas animadas */
  --tf-cta-h: 0px;                           /* altura do CTA fixo (seção 11) */
}
/* "ok" da Máquina era verde-menta: na Tiff, concluído = branco */
.mev-tiff { --ok: #fafaf8; }
/* dentro da landing os fios da Máquina continuam visíveis (o --line da Tiff é .06, fraco demais para as telas) */
.mev-tiff main { --line: var(--tf-hair); }

/* ============================================================
   2. BASE — conflitos de reset entre style.css e tiff.css
   ============================================================ */
html { scroll-padding-top: var(--header-h); }
:root { padding-top: 0; padding-bottom: 0; }          /* a Máquina somava a safe-area no :root; a Tiff trata no cabeçalho */
body.mev-tiff {
  background: transparent;                            /* o quadriculado fixo da Tiff (body::before) precisa aparecer */
  color: var(--white);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
}
.mev-tiff h1, .mev-tiff h2, .mev-tiff h3, .mev-tiff h4 { font-weight: 400; }
.mev-tiff strong { font-weight: 500; }
.mev-tiff :focus-visible { outline: 1px solid var(--pink-soft); outline-offset: 4px; border-radius: 0; }
.mev-tiff ::selection { background: var(--pink); color: #fff; }

/* ============================================================
   3. CASCA DA TIFF
   ============================================================ */
/* o "p { margin: 0 0 1em }" da Máquina empurrava o rodapé da Tiff (a assinatura .sig tem margem própria) */
.mev-tiff .site-footer p:not(.sig),
.mev-tiff .menu p { margin: 0; }
/* o rodapé branco vem logo depois do CTA final branco: um fio separa os dois */
.mev-tiff .site-footer { border-top: 1px solid var(--line-ink); }
/* cursor próprio da Máquina ("<" rosa): nunca aparece aqui, só o "+" da Tiff */
.mev-tiff .cur, .mev-tiff .cur-v, .mev-tiff .cur-dash { display: none !important; }

/* ============================================================
   4. LAYOUT, FUNDOS E FOLIOS
   ============================================================ */
.mev-tiff .wrap { max-width: var(--wrap); padding-inline: var(--gutter); }
.mev-tiff .narrow > * { max-width: 980px; }

/* seção preta = transparente (o quadriculado global aparece); seção clara = branco da Tiff com tinta */
.mev-tiff .lp-sec { padding-block: clamp(80px, 9vw, 144px); }
.mev-tiff .lp-sec.bg-grid,
.mev-tiff .after-pin,
.mev-tiff .final { background: transparent; color: var(--white); }
.mev-tiff .lp-sec.is-light { background: var(--white); color: var(--ink); }
.mev-tiff .lp-sec.is-light strong { color: var(--ink); }
.mev-tiff .lp-sec.is-light .lede,
.mev-tiff .lp-sec.is-light .muted { color: var(--on-light-text); }

/* folio de revista no topo de cada seção (decoração, aria-hidden) — igual ao .lp-folio das landings da Tiff */
.tf-folio {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding-bottom: 14px; margin: 0 0 clamp(44px, 6vw, 96px);
  border-bottom: 1px solid var(--tf-hair);
  color: var(--tf-label);
  text-align: left;
}
.is-light .tf-folio, .bg-white .tf-folio { border-color: var(--line-ink); color: var(--grey-dark); }
.is-light .tf-folio .pink, .bg-white .tf-folio .pink { color: var(--pink); }
@media (max-width: 520px) {
  .tf-folio { font-size: 9.5px; letter-spacing: .22em; }
  .tf-folio > span:first-child { display: none; }
}

/* ============================================================
   5. TIPOGRAFIA
   ============================================================ */
/* títulos das seções: Bodoni reto, palavra de destaque em itálico rosa */
.mev-tiff .h2-row { display: block; margin-bottom: clamp(24px, 3vw, 40px); }
.mev-tiff .h2-row .slash { display: none; }                /* o traço rosa é da marca da Máquina */
.mev-tiff .h2 {
  font-family: var(--serif); font-style: normal; font-weight: 400;
  font-size: clamp(36px, 4.8vw, 76px); line-height: 1.02; letter-spacing: -.014em;
  max-width: 18ch; text-wrap: balance;
}
.mev-tiff .h2 em, .mev-tiff .lp-title em, .mev-tiff .end-cta h2 em { font-style: italic; color: var(--pink-soft); }
.mev-tiff .is-light .h2 em, .mev-tiff .end-cta h2 em { color: var(--pink); }

/* texto de apoio = .lead da Tiff */
.mev-tiff .lede {
  max-width: 58ch;
  font-size: clamp(17px, 1.35vw, 20px); line-height: 1.6; font-weight: 350;
  color: var(--on-dark-text);
}
.mev-tiff .lede strong { font-weight: 500; }

/* ============================================================
   6. BOTÕES — linguagem da Tiff: retos, caixa alta espaçada, fio de 1px.
      Sobre preto: branco (hover rosa). Sobre branco: preto (hover rosa).
      Compra principal (preço e CTA fixo): rosa cheio, para continuar o elemento principal.
   ============================================================ */
.mev-tiff .btn {
  --bg: var(--white); --fg: var(--ink); --bd: var(--white);
  gap: 14px; min-height: 56px; padding: 0 32px;
  border: 1px solid var(--bd); border-radius: 0;
  background: var(--bg); color: var(--fg);
  font-family: var(--sans); font-size: 12px; font-weight: 500; line-height: 1.2;
  letter-spacing: .22em; text-transform: uppercase; text-align: center;
  box-shadow: none;
  transition: background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.mev-tiff .btn::before { display: none; }                  /* sem a faixa que desliza */
.mev-tiff .btn .btn-ico { width: 16px; height: 16px; stroke-width: 1.4; stroke-linecap: square; stroke-linejoin: miter; }
.mev-tiff .btn:hover, .mev-tiff .btn:focus-visible { --bg: var(--pink); --fg: #fff; --bd: var(--pink); color: #fff; transform: none; box-shadow: none; }
.mev-tiff .btn:active { transform: none; }
.mev-tiff .btn-black { --bg: var(--ink); --fg: var(--white); --bd: var(--ink); }
.mev-tiff .btn-black:hover, .mev-tiff .btn-black:focus-visible { --bg: var(--pink); --fg: #fff; --bd: var(--pink); box-shadow: none; }
/* compra principal: rosa cheio → branco no hover */
.mev-tiff .tf-buy-btn, .mev-tiff .sticky-cta .btn { --bg: var(--pink); --fg: #fff; --bd: var(--pink); }
.mev-tiff .tf-buy-btn:hover, .mev-tiff .tf-buy-btn:focus-visible,
.mev-tiff .sticky-cta .btn:hover, .mev-tiff .sticky-cta .btn:focus-visible { --bg: var(--white); --fg: var(--ink); --bd: var(--white); color: var(--ink); }
@media (hover: hover) {
  .mev-tiff .btn:hover .btn-ico { transform: translateX(4px); }
}

/* ============================================================
   7. TUDO RETO
   Cartões, pílulas, janelas, molduras, caixas de preço, FAQ, telas dos mockups: canto reto.
   Logo abaixo voltam a ser redondos só os que são círculos por natureza.
   ============================================================ */
.mev-tiff main *, .mev-tiff main *::before, .mev-tiff main *::after,
.mev-tiff .sticky-cta, .mev-tiff .sticky-cta * { border-radius: 0 !important; }

.mev-tiff .mev-win-bar i, .mev-tiff .nle-dots i,              /* bolinhas da janela */
.mev-tiff .sc-toggle b, .mev-tiff .sc-toggle b::after,        /* chavinhas */
.mev-tiff .nle-props .pr b::after,                            /* botão do controle deslizante */
.mev-tiff .k-dust i,                                          /* poeira de ruído */
.mev-tiff .sc-rec-btn, .mev-tiff .sc-rec-dot::before,         /* botão e luz de gravar */
.mev-tiff .sc-ig-av,                                          /* avatar */
.mev-tiff .mev-claude-badge img, .mev-tiff .nle-ai img,       /* símbolo do Claude girando */
.mev-tiff .nle-scis,
.mev-tiff .mev-swatches .sw i,                                /* bolinhas de cor */
.mev-tiff .mev-studio-apply .dot,
.mev-tiff .guarantee .seal7 { border-radius: 50% !important; }   /* selo */
.mev-tiff .mev-tiles .f7 b { border-radius: 50% !important; }               /* "carregando" girando */
.mev-tiff .mev-tiles .ft u { border-radius: 45% 45% 0 0 !important; }       /* silhuetas (ombros) */
.mev-tiff .mev-tiles .ft u::before { border-radius: 50% !important; }       /* silhuetas (cabeça) */

/* ============================================================
   8. CORES — paleta da Tiff (preto, branco, rosa). Sem verde/vermelho/amarelo,
      sem brilhos rosa e sem gradientes coloridos.
   ============================================================ */
/* sem brilho de fundo */
.mev-tiff .lp-hero::before { display: none; }
.mev-tiff .final { background: transparent; }

/* janelas e celulares dos mockups: moldura preta reta com fio (como a "bordinha preta" das landings da Tiff) */
.mev-tiff .mev-window { background: #0f0f0f; box-shadow: 0 0 0 1px var(--tf-hair); }
.mev-tiff .mev-win-bar { background: #161616; }
.mev-tiff .mev-win-bar i, .mev-tiff .mev-win-bar i:nth-child(2), .mev-tiff .mev-win-bar i:nth-child(3),
.mev-tiff .nle-dots i, .mev-tiff .nle-dots i:nth-child(2), .mev-tiff .nle-dots i:nth-child(3) { background: rgba(250, 250, 248, .2); }
.mev-tiff .mev-phone { box-shadow: 0 0 0 6px var(--black), 0 0 0 7px var(--tf-hair); }
.mev-tiff .mev-phone.result { box-shadow: 0 0 0 6px var(--black), 0 0 0 7px var(--pink-soft); }
.mev-tiff .id-phone { box-shadow: 0 0 0 6px var(--ink); }

/* trechos "ruins" (erros, cortes) = hachura cinza; trechos bons = rosa liso */
.mev-tiff .sc-track .ok, .mev-tiff .tr .clips i { background: var(--pink); }
.mev-tiff .sc-track .bad, .mev-tiff .tr .clips i.bad { background: repeating-linear-gradient(-45deg, rgba(250, 250, 248, .55) 0 5px, rgba(250, 250, 248, .14) 5px 10px); }
.mev-tiff .sc-track .bad em { color: var(--faint); }
.mev-tiff .tr-mus .mus { background: repeating-linear-gradient(90deg, rgba(10, 10, 10, .45) 0 2px, transparent 2px 5px), rgba(250, 250, 248, .78); }
.mev-tiff .tr-ins .lane b { box-shadow: inset 0 0 0 1px var(--white); }
.mev-tiff .sc-file-ico { background: var(--pink); }
.mev-tiff .nle-grid .m-mus { background: #151515; color: var(--white); }
.mev-tiff .i-grid .anim, .mev-tiff .sc-chart { background: #121212; }
.mev-tiff .mu-eq i { background: var(--white); }
.mev-tiff .sc-mtrack.song .sc-wave i { background: rgba(250, 250, 248, .6); }
.mev-tiff .sc-music .mu-card:nth-of-type(1) .cv { background: var(--pink); }
.mev-tiff .sc-music .mu-card:nth-of-type(2) .cv { background: #2a2a2a; box-shadow: inset 0 0 0 1px var(--tf-hair); }
.mev-tiff .sc-music .mu-card:nth-of-type(3) .cv { background: var(--white); }

/* textos e selos "concluído": branco com tinta (o verde escuro do texto vira tinta) */
.mev-tiff .pv-done, .mev-tiff .u-toast, .mev-tiff .mu-card em,
.mev-tiff .sc-msg.plan li.is-on::before, .mev-tiff .o-list li.is-on::before,
.mev-tiff .r-no li.r-yes::before { color: var(--ink); }
.mev-tiff .p-ok { background: rgba(250, 250, 248, .1); }
.mev-tiff .r-no li.r-yes, .mev-tiff .o-list li.is-on, .mev-tiff .u-row.is-done { background: rgba(250, 250, 248, .08); }
.mev-tiff .sc-pub, .mev-tiff .q-msg,
.mev-tiff .sc-plan.is-zero .p-zero { background: rgba(250, 250, 248, .07); box-shadow: inset 0 0 0 1px rgba(250, 250, 248, .4); }
.mev-tiff .q-sent.is-done { background: #191919; box-shadow: inset 0 0 0 1px rgba(250, 250, 248, .32); }
.mev-tiff .q-sent.is-done .q-mini b { background: var(--white); }
.mev-tiff .q-sent.is-done small { color: var(--white); }
.mev-tiff .nle-chips li.is-done { box-shadow: inset 0 0 0 1px rgba(250, 250, 248, .4); }
.mev-tiff .sc-clean.is-done .k-meters b { color: var(--pink-soft); }

/* "erro"/"sai" (antes vermelho) = rosa, como a caneta de uma editora */
.mev-tiff .p-zero { background: rgba(250, 250, 248, .04); box-shadow: inset 0 0 0 1px var(--tf-hair); }
.mev-tiff .p-zero b { color: var(--pink-soft); }
.mev-tiff .sc-plan.is-zero .p-zero b { color: var(--white); }
.mev-tiff .p-chip::before, .mev-tiff .r-no li::after { background: var(--pink-soft); }
.mev-tiff .p-chip::after, .mev-tiff .r-no li::before { background: var(--pink); }
.mev-tiff .x-words .bad { background: rgba(198, 33, 140, .22); color: #f2a7d6; }
.mev-tiff .x-words .bad.is-mark { background: var(--pink); color: #fff; }
.mev-tiff .sc-rec-dot::before { background: var(--pink-soft); }
.mev-tiff .sc-rec-btn::after { background: var(--pink); }
.mev-tiff .r-focus i { border-color: var(--white); }
.mev-tiff .r-meter i.is-on:nth-child(n+6) { background: var(--pink-soft); }
.mev-tiff .r-meter i.is-on:nth-child(8) { background: var(--pink); }
.mev-tiff .o-heart { color: var(--pink-soft); }
.mev-tiff .sc-ig-act svg:first-child { fill: var(--pink-soft); stroke: var(--pink-soft); }
.mev-tiff .nle-scis { color: var(--pink); }
.mev-tiff .sc-toggle.is-on b { background: var(--pink); box-shadow: none; }
@keyframes rRing { 0% { box-shadow: inset 0 0 0 3px #fff, 0 0 0 0 rgba(198, 33, 140, .55); } 100% { box-shadow: inset 0 0 0 3px #fff, 0 0 0 14px rgba(198, 33, 140, 0); } }

/* sem brilhos (sombras rosa / luzes) */
.mev-tiff .sc-plan-card { box-shadow: inset 0 0 0 1px var(--tf-hair); }
.mev-tiff .r-places .pl.is-on,
.mev-tiff .nle-chips li.is-now,
.mev-tiff .mev-pick .pk.is-on,
.mev-tiff .q-send.is-sent,
.mev-tiff .mev-tiles i.is-on { box-shadow: none; }
.mev-tiff .sc-sweep, .mev-tiff .sc-blade, .mev-tiff .nle-head { box-shadow: none; }
.mev-tiff .i-grid .r.is-pick { box-shadow: 0 0 0 2px var(--pink-soft); }
.mev-tiff .mev-tiles i.is-on { background: var(--pink); transform: none; }
.mev-tiff .u-file, .mev-tiff .i-ghost, .mev-tiff .o-cover { box-shadow: 0 0 0 1px var(--white); }
.mev-tiff .sc-ig { box-shadow: 0 0 0 1px var(--tf-hair); }
.mev-tiff .nle-modal { background: rgba(14, 14, 14, .97); box-shadow: 0 0 0 1px var(--tf-hair); }

/* cursor das demonstrações: era o "<" da Máquina; vira o "+" da Tiff */
.mev-tiff .sc-cursor { width: 22px; height: 22px; }
.mev-tiff .sc-cursor svg { display: none; }
.mev-tiff .sc-cursor::before, .mev-tiff .sc-cursor::after {
  content: ""; position: absolute; left: 50%; top: 50%; right: auto; background: #fff; transform: none;
  box-shadow: 0 0 0 .5px rgba(10, 10, 10, .5);
}
.mev-tiff .sc-cursor::before { width: 22px; height: 1.5px; margin: -.75px 0 0 -11px; }
.mev-tiff .sc-cursor::after { width: 1.5px; height: 22px; margin: -11px 0 0 -.75px; }

/* ============================================================
   9. EFEITO TV — as scanlines do .tv ficam em z-index 2;
      etiquetas, contadores e controles por cima do vídeo sobem para 3+.
   ============================================================ */
.mev-tiff .tv > .ba-tag, .mev-tiff .tv > .mev-mute-tag, .mev-tiff .tv > .mev-claude-badge,
.mev-tiff .tv > .sc-rec-dot, .mev-tiff .tv > .r-take, .mev-tiff .tv > .r-focus, .mev-tiff .tv > .r-meter,
.mev-tiff .tv > .sc-rec-btn, .mev-tiff .tv > .id-top, .mev-tiff .tv > .id-cap, .mev-tiff .tv > .o-views,
.mev-tiff .tv > .o-heart, .mev-tiff .tv > em, .mev-tiff .tv > .pv-div, .mev-tiff .tv > .pv-cap,
.mev-tiff .tv > .sc-divider, .mev-tiff .tv > .i-count, .mev-tiff .tv > .sc-top,
.mev-tiff .tv > .sc-bottom { z-index: 3; }
.mev-tiff .tv > .ba-sound, .mev-tiff .tv > .mev-unmute { z-index: 4; }
.mev-tiff .tv > .pv-final { z-index: 4; }
.mev-tiff .tv > .pv-done { z-index: 5; }
.mev-tiff .mev-phone.split.tv > .sc-top, .mev-tiff .mev-phone.split.tv > .sc-bottom { z-index: 1; } /* as metades ficam embaixo das scanlines */
.mev-tiff .mev-phone.split.tv > .sc-divider, .mev-tiff .mev-phone.split.tv > .i-count { z-index: 3; }
.mev-tiff .id-phone.tv > .id-top { z-index: 1; }                                            /* faz parte da "imagem" */
.mev-tiff .id-phone.tv > .id-cap { z-index: 3; }

/* ============================================================
   10. SEÇÕES
   ============================================================ */

/* ---------- 10.1 Topo: promessa + antes e depois ---------- */
.mev-tiff .lp-hero {
  padding-top: calc(var(--header-h) + clamp(40px, 5vw, 72px));
  padding-bottom: clamp(80px, 9vw, 144px);
  background: transparent;
}
.mev-tiff .mev-hero .mev-hero-text { max-width: 1120px; }
.mev-tiff .eyebrow-pill {                                  /* = .eyebrow da Tiff */
  gap: 12px; margin: 0 0 clamp(20px, 2.4vw, 32px); padding: 0;
  background: none; color: var(--pink-soft);
  font-family: var(--sans); font-size: 11px; font-weight: 500; line-height: 1.3;
  letter-spacing: .26em; text-transform: uppercase;
}
.mev-tiff .eyebrow-pill::before { width: 6px; height: 6px; background: var(--pink-soft); }
.mev-tiff .lp-title, .mev-tiff .mev-hero .sale-title {
  font-family: var(--serif); font-style: normal; font-weight: 400;
  font-size: clamp(42px, 6.4vw, 104px); line-height: .98; letter-spacing: -.02em;
  margin-bottom: clamp(22px, 2.4vw, 34px);
}
.mev-tiff .mev-hero .sale-title em { color: var(--pink-soft); white-space: nowrap; }
.mev-tiff .lp-sub {
  max-width: 56ch;
  font-size: clamp(17px, 1.35vw, 20px); line-height: 1.6; font-weight: 350;
  color: var(--on-dark-text);
  margin-bottom: clamp(28px, 3vw, 40px);
}
.mev-tiff .hero-cta { gap: 16px; }
.mev-tiff .hero-cta small {
  font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  color: var(--tf-label);
}

/* seletor dos 5 exemplos */
.mev-tiff .mev-ba { margin-top: clamp(56px, 7vw, 104px); }
.mev-tiff .mev-pick { gap: 0; border-top: 1px solid var(--tf-hair-strong); }
.mev-tiff .mev-pick-h {
  margin: 0; padding: 14px 0 12px;
  font-size: 10.5px; font-weight: 500; letter-spacing: .26em; color: var(--tf-label);
}
.mev-tiff .mev-pick .pk {
  gap: 12px; padding: 10px 10px 10px 0;
  background: transparent; box-shadow: none;
  border-bottom: 1px solid var(--tf-hair);
  transition: background-color .35s var(--ease), color .35s var(--ease), padding .45s var(--ease-out);
}
.mev-tiff .mev-pick .pk img { width: 34px; height: 50px; }
.mev-tiff .mev-pick .pk b { font-weight: 500; font-size: 13px; }
.mev-tiff .mev-pick .pk small { font-weight: 400; font-size: 11px; color: var(--faint); }
@media (hover: hover) { .mev-tiff .mev-pick .pk:hover { background: rgba(250, 250, 248, .05); transform: none; padding-left: 8px; } }
.mev-tiff .mev-pick .pk.is-on { background: var(--white); color: var(--ink); transform: none; padding-left: 10px; }
.mev-tiff .mev-pick .pk.is-on small { color: var(--grey-dark); }
.mev-tiff .mev-pick .pk:focus-visible { outline: 1px solid var(--pink-soft); outline-offset: 2px; }

/* molduras do antes/depois */
.mev-tiff .mev-ba-raw .mev-ba-frame { box-shadow: 0 0 0 1px var(--tf-hair); }
.mev-tiff .mev-ba-edit .mev-ba-frame, .mev-tiff .ba-player { box-shadow: 0 0 0 1px var(--pink-soft); }
.mev-tiff .mev-ba figcaption {
  margin-top: 14px;
  font-size: 10.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; line-height: 1.5;
  color: var(--tf-label);
}
/* etiquetas sobre o vídeo = folio da Tiff em caixinha preta */
.mev-tiff .ba-tag, .mev-tiff .mev-mute-tag, .mev-tiff .mev-claude-badge {
  padding: 7px 10px 6px;
  background: rgba(10, 10, 10, .72); box-shadow: none;
  font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; line-height: 1.2;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.mev-tiff .mev-claude-badge { padding: 4px 10px 4px 4px; gap: 8px; letter-spacing: .14em; }
.mev-tiff .mev-claude-badge img { width: 22px; height: 22px; padding: 2px; }
.mev-tiff .ba-sound {
  height: 40px; padding: 0 14px;
  background: var(--white); color: var(--ink); box-shadow: none;
  font: 500 10.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase;
}
.mev-tiff .ba-sound svg { width: 16px; height: 16px; stroke-width: 1.6; }
@media (hover: hover) { .mev-tiff .ba-sound:hover { background: var(--pink); color: #fff; transform: none; } }
.mev-tiff .mev-ba-arrow { color: var(--pink-soft); }
.mev-tiff .mev-click {
  padding: 8px 12px 7px; gap: 8px;
  background: var(--pink); box-shadow: none;
  font-size: 10.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
}
.mev-tiff .mev-arrow-svg path { stroke-width: 1.4; stroke-linecap: square; stroke-linejoin: miter; }
@media (max-width: 860px) {
  .mev-tiff .mev-pick { border-top: 0; gap: 8px; }
  .mev-tiff .mev-pick .pk { padding: 8px; border: 1px solid var(--tf-hair); }
}
@media (max-width: 600px) {
  .mev-tiff .ba-tag, .mev-tiff .mev-mute-tag { font-size: 9px; letter-spacing: .14em; padding: 5px 7px 4px; }
  .mev-tiff .mev-claude-badge { font-size: 9px; letter-spacing: .1em; }
  .mev-tiff .ba-sound { height: 36px; padding: 0 10px; font-size: 9.5px; letter-spacing: .12em; }
  .mev-tiff .mev-ba figcaption { font-size: 9.5px; letter-spacing: .14em; }
}

/* ---------- 10.2 A IA edita tudo sozinha (editor) ---------- */
.mev-tiff .nle-chips { gap: 6px; }
.mev-tiff .nle-chips li {
  padding: 8px 12px 7px;
  font-size: 10.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  background: transparent;
}
.mev-tiff .nle-chips li.is-done { color: var(--white); }
.mev-tiff .nle-chips li.is-now { background: var(--pink); transform: none; }
.mev-tiff .nle { background: #0e0e0e; box-shadow: 0 0 0 1px var(--tf-hair); color: #ececea; }
.mev-tiff .nle-top { background: #151515; }
.mev-tiff .nle-ai { background: rgba(198, 33, 140, .14); font-weight: 500; }
.mev-tiff .nle-exp { font-weight: 500; letter-spacing: .14em; text-transform: uppercase; font-size: 10.5px; }
.mev-tiff .nle-media, .mev-tiff .nle-props { background: #131313; }
.mev-tiff .nle-tl { background: #0b0b0b; }

/* ---------- 10.3 Como funciona (9 passos) ---------- */
.mev-tiff .mev-steps { margin-top: clamp(48px, 6vw, 96px); }
.mev-tiff .mev-step-n {                                     /* numeral vazado, como os números das landings da Tiff */
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(64px, 7vw, 120px); line-height: .82; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1px rgba(250, 250, 248, .55);
  margin-bottom: clamp(18px, 2vw, 28px);
  transition: color .6s var(--ease), -webkit-text-stroke-color .6s var(--ease);
}
.mev-tiff .mev-step.is-on .mev-step-n { color: var(--pink-soft); -webkit-text-stroke-color: var(--pink-soft); }
.mev-tiff .mev-step h3 {
  font-family: var(--serif); font-style: normal; font-weight: 400;
  font-size: clamp(28px, 2.7vw, 44px); line-height: 1.06; letter-spacing: -.01em;
  margin-bottom: 16px;
}
.mev-tiff .mev-step p { color: var(--on-dark-text); font-size: 16px; line-height: 1.7; max-width: 46ch; }
.mev-tiff .mev-scene {                                      /* palco reto, sem luz rosa */
  background: var(--tf-stage);
  box-shadow: inset 0 0 0 1px var(--tf-hair);
}
/* dentro dos mockups: rótulos sem negrito pesado */
.mev-tiff .mev-scene b, .mev-tiff .nle b { font-weight: 600; }
.mev-tiff .p-chip { background: #161616; }
.mev-tiff .c-sugs span.is-on { background: rgba(198, 33, 140, .22); }

/* ---------- 10.4 Formatos (carrossel) ---------- */
.mev-tiff .mev-fc-media { box-shadow: 0 0 0 1px var(--tf-hair); }
.mev-tiff .mev-fc.is-active .mev-fc-media { box-shadow: 0 0 0 1px var(--pink-soft); }
.mev-tiff .mev-fc-n {
  min-width: 0; height: auto; padding: 0; margin-bottom: 6px;
  background: none; color: var(--pink-soft);
  font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 34px; line-height: 1;
}
.mev-tiff .mev-fc-info h3 { font-family: var(--serif); font-style: normal; font-weight: 400; font-size: 24px; line-height: 1.12; }
.mev-tiff .mev-fc-info p { color: var(--on-dark-text); }
.mev-tiff .car-arrow {
  width: 48px; height: 48px;
  background: transparent; box-shadow: inset 0 0 0 1px var(--tf-hair-strong);
  color: var(--white);
}
.mev-tiff .car-arrow svg { width: 16px; height: 16px; stroke-width: 1.4; stroke-linecap: square; stroke-linejoin: miter; }
@media (hover: hover) { .mev-tiff .car-arrow:not(:disabled):hover { background: var(--white); color: var(--ink); } }
.mev-tiff .mev-flow-dots { gap: 4px; }
.mev-tiff .mev-flow-dots button { position: relative; width: 18px; height: 16px; background: transparent; }
.mev-tiff .mev-flow-dots button::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(250, 250, 248, .32);
  transition: background-color .3s var(--ease), height .3s var(--ease);
}
.mev-tiff .mev-flow-dots button[aria-current="true"] { width: 36px; background: transparent; }
.mev-tiff .mev-flow-dots button[aria-current="true"]::before { height: 2px; margin-top: -.5px; background: var(--pink-soft); }

/* ---------- 10.5 Identidade (seção clara) ---------- */
.mev-tiff .mev-studio-panel { background: transparent; border: 1px solid var(--line-ink); color: var(--ink); }
.mev-tiff .mev-studio-k { font-size: 11px; font-weight: 500; letter-spacing: .26em; color: var(--pink); }
.mev-tiff .mev-studio-req { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.22; }
.mev-tiff .mev-swatches .sw {
  background: #fff; box-shadow: inset 0 0 0 1px var(--line-ink);
  font: 500 13px var(--sans); color: var(--ink);
  transition: box-shadow .3s var(--ease);
}
.mev-tiff .mev-swatches .sw[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--ink); transform: none; }
.mev-tiff .mev-swatches .sw[aria-pressed="true"]::after { content: ""; flex: none; width: 6px; height: 6px; margin-left: auto; background: var(--pink); }
@media (hover: hover) { .mev-tiff .mev-swatches .sw:hover { transform: none; box-shadow: inset 0 0 0 1px var(--ink); } }
.mev-tiff .mev-studio-specs p { border-bottom-color: var(--line-ink); }
.mev-tiff .mev-studio-specs span { color: var(--grey-dark); font-weight: 400; }
.mev-tiff .mev-studio-specs b { font-weight: 500; }
.mev-tiff .mev-studio-apply { font-weight: 500; color: var(--on-light-text); }
.mev-tiff .mev-studio.is-applied .mev-studio-apply .dot { background: var(--ink); }
/* as 3 identidades prontas usam as letras da Máquina (Playfair/Dosis do Google Fonts);
   como --serif/--sans agora são da Tiff, as letras delas ficam escritas aqui */
.mev-tiff .mev-studio[data-theme="0"] { --id-tf: "Playfair Display", Georgia, serif; --id-cf: "Dosis", "Avenir Next", sans-serif; --id-cf2: "Playfair Display", Georgia, serif; }
.mev-tiff .mev-studio[data-theme="1"] { --id-tf: "Dosis", "Avenir Next", sans-serif; --id-cf: "Dosis", "Avenir Next", sans-serif; --id-cf2: "Dosis", "Avenir Next", sans-serif; }
.mev-tiff .mev-studio[data-theme="2"] { --id-tf: "Playfair Display", Georgia, serif; --id-cf: "Playfair Display", Georgia, serif; --id-cf2: "Playfair Display", Georgia, serif; }
/* 4ª identidade = a da Tiffany (o mev.js mostra "#0A0A0A · #C6218C / Bodoni Moda") */
.mev-tiff .mev-studio[data-theme="3"] {
  --id-bg: #0a0a0a; --id-fg: #fafaf8; --id-acc: #e0399f; --id-hl: transparent;
  --id-tf: "Bodoni Moda", "Didot", serif; --id-ts: normal; --id-tw: 400; --id-tt: none; --id-es: italic;
  --id-cpad: 6px 12px 5px; --id-cbg: #fafaf8; --id-cfg: #111; --id-cf: "DM Sans", sans-serif; --id-cw: 500; --id-ct: uppercase;
  --id-blend: normal; --id-csh: none; --id-cacc: #c6218c; --id-cf2: "Bodoni Moda", "Didot", serif; --id-cs2: italic;
}
.mev-tiff .mev-studio[data-theme="3"] .id-title { font-size: 27px; letter-spacing: -.01em; }
.mev-tiff .mev-studio[data-theme="3"] .id-cap { font-size: 18px; letter-spacing: .12em; }
.mev-tiff .mev-studio[data-theme="3"] .id-cap .w2 { text-transform: none; letter-spacing: 0; font-size: 1.25em; }

/* ---------- 10.6 +100 vídeos ---------- */
.mev-tiff .mev-big-n { gap: 20px; margin-top: clamp(28px, 3vw, 44px); }
.mev-tiff .mev-big-n b {
  font-family: var(--serif); font-style: normal; font-weight: 400;
  font-size: clamp(96px, 12vw, 190px); line-height: .8; letter-spacing: -.045em;
  color: var(--white);
}
.mev-tiff .mev-big-n span { font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; line-height: 1.6; color: var(--tf-label); }
.mev-tiff .mev-tiles i { background: rgba(250, 250, 248, .06); box-shadow: inset 0 0 0 1px rgba(250, 250, 248, .06); }
/* os 100 quadradinhos acesos imitam os formatos: na Tiff, telinhas pretas com figuras brancas e detalhes rosa
   (antes era tudo rosa com brilho — rosa demais para a proporção 50/40/10 da Tiff) */
.mev-tiff .mev-tiles i.is-on { background: #1c1c1c; box-shadow: inset 0 0 0 1px rgba(250, 250, 248, .14); }
.mev-tiff .mev-tiles .ft u, .mev-tiff .mev-tiles .ft u::before { background: rgba(250, 250, 248, .86); }
.mev-tiff .mev-tiles .ft.is-on::after { background: var(--pink-soft); height: 1px; }
.mev-tiff .mev-tiles .f2 b, .mev-tiff .mev-tiles .f6 b { background: #0a0a0a; }
.mev-tiff .mev-tiles .f2 u::after { background: var(--pink-soft); }
.mev-tiff .mev-tiles .f5 b { background: linear-gradient(#fafaf8, #fafaf8) 22% 88% / 14% 30% no-repeat, linear-gradient(#fafaf8, #fafaf8) 50% 88% / 14% 55% no-repeat, linear-gradient(#e0399f, #e0399f) 78% 88% / 14% 80% no-repeat, #0a0a0a; }
.mev-tiff .mev-tiles .f6 b::before { background: var(--pink); }
.mev-tiff .mev-tiles .f8 b { background: repeating-linear-gradient(120deg, #2c2c2c 0 6px, #1a1a1a 6px 12px); background-size: 200% 200%; }
.mev-tiff .mev-tiles .f8 u { box-shadow: 0 0 0 1px var(--pink-soft); }
.mev-tiff .mev-tiles .f9 b { background: linear-gradient(#e0399f 0 23%, transparent 23% 25%, #fafaf8 25% 48%, transparent 48% 50%, #9a9a98 50% 73%, transparent 73% 75%, #5c5c5a 75%); }
.mev-tiff .mev-tiles .f9 u { background: #111; box-shadow: 0 0 0 1px #fafaf8; }
@keyframes ftSwap { 0% { background: #0a0a0a; } 33% { background: #c6218c; } 66% { background: #3a3a3a; } }
@keyframes ftFlash { 0% { background: #fafaf8; } 25% { background: #0a0a0a; } 50% { background: #e0399f; } 75% { background: #2c2c2c; } }

/* ---------- 10.7 Vídeo de 3 minutos ---------- */
.mev-tiff .mev-video { box-shadow: 0 0 0 1px var(--tf-hair); }
.mev-tiff .mev-unmute {
  padding: 18px 26px; box-shadow: none;
  font: 500 12px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase;
}
.mev-tiff .mev-unmute svg { width: 18px; height: 18px; stroke-width: 1.6; }

/* ---------- 10.8 Editor x Máquina (seção clara) ---------- */
.mev-tiff .vs-box { padding: clamp(24px, 3vw, 40px); }
.mev-tiff .vs-box h3 { font-family: var(--serif); font-style: normal; font-weight: 400; font-size: clamp(26px, 2.4vw, 36px); margin-bottom: 22px; }
.mev-tiff .vs-box li { font-size: 16px; }
.mev-tiff .vs-box li span:last-child { font-weight: 500; }
.mev-tiff .vs-old { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-ink); }
.mev-tiff .vs-new { background: var(--ink); color: var(--white); }
.mev-tiff .vs-new li { border-bottom-color: rgba(250, 250, 248, .14); }
.mev-tiff .mev-vs .vs-n b { font-family: var(--serif); font-style: normal; font-weight: 400; }
.mev-tiff .mev-vs .vs-old .vs-n b,
.mev-tiff .mev-vs .vs-old .vs-strike b,
.mev-tiff .mev-vs .vs-old li:last-child span:last-child { color: var(--ink); }
.mev-tiff .mev-vs .vs-strike::after { height: 2px; background: var(--pink); }
.mev-tiff .mev-vs .vs-n small { font-weight: 500; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.mev-tiff .mev-vs .vs-new .vs-hero .vs-n b { color: var(--pink-soft); text-shadow: none; }
.mev-tiff .mev-vs-note { color: var(--grey-dark) !important; font-size: 14px; margin-top: 18px; }
@keyframes vsGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(198, 33, 140, 0); } 50% { box-shadow: 0 0 0 1px rgba(198, 33, 140, .9); } }

/* ---------- 10.9 Garantia ---------- */
.mev-tiff .guarantee { gap: clamp(20px, 3vw, 36px); padding: clamp(24px, 3vw, 40px); background: transparent; box-shadow: inset 0 0 0 1px rgba(250, 250, 248, .18); }
.mev-tiff .guarantee .seal7 { background: var(--white); color: var(--ink); font-family: var(--serif); font-style: italic; font-weight: 400; }
.mev-tiff .guarantee .seal7 small { font-weight: 500; letter-spacing: .16em; text-transform: uppercase; font-size: 9px; }
.mev-tiff .guarantee h3 { font-family: var(--serif); font-style: normal; font-weight: 400; font-size: clamp(24px, 2.4vw, 34px); margin-bottom: 8px; }
.mev-tiff .guarantee p { color: var(--on-dark-text); }
.mev-tiff .mev-gar::after { display: none; }               /* sem o brilho que atravessa a caixa */
@keyframes garGlow { 0%, 100% { box-shadow: inset 0 0 0 1px rgba(250, 250, 248, .18); } 50% { box-shadow: inset 0 0 0 1px rgba(224, 57, 159, .7); } }

/* ---------- 10.10 Para quem é (seção clara) ---------- */
.mev-tiff .fit-box { padding: clamp(24px, 3vw, 40px); }
.mev-tiff .fit-box h3 { font-family: var(--serif); font-style: normal; font-weight: 400; font-size: clamp(26px, 2.4vw, 36px); margin-bottom: 20px; }
.mev-tiff .fit-box ul { gap: 0; }
.mev-tiff .fit-box li { padding: 12px 0 11px 30px; border-bottom: 1px solid var(--line-ink); font-size: 16px; }
.mev-tiff .fit-box li:last-child { border-bottom: 0; }
.mev-tiff .fit-box li::before { top: 15px; width: 18px; height: 18px; background-size: 11px; }
.mev-tiff .fit-yes { background: var(--ink); color: var(--white); }
.mev-tiff .fit-yes li { border-bottom-color: rgba(250, 250, 248, .14); }
.mev-tiff .fit-yes li::before { background-color: var(--pink); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='square'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.mev-tiff .fit-no { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-ink); }
.mev-tiff .fit-no li::before { background-color: rgba(17, 17, 17, .08); }

/* ---------- 10.11 Preço #comprar ---------- */
.mev-tiff .final { padding-block: clamp(88px, 10vw, 160px); }
.mev-tiff .final .tf-folio { margin-bottom: clamp(48px, 6vw, 96px); }
.mev-tiff .price-title {
  font-family: var(--serif); font-style: normal; font-weight: 400;
  font-size: clamp(38px, 5.2vw, 84px) !important; line-height: 1.02; letter-spacing: -.016em;
  max-width: 17ch !important; margin: 0 auto clamp(40px, 5vw, 72px) !important;
}
.mev-tiff .final .offer { max-width: 760px; padding: clamp(24px, 3vw, 40px); background: transparent; box-shadow: inset 0 0 0 1px rgba(250, 250, 248, .2); }
.mev-tiff .final .offer .offer-h { margin-bottom: 14px; font-size: 11px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--pink-soft); }
.mev-tiff .offer-list { gap: 0; }
.mev-tiff .offer-list li { padding: 10px 0 9px; border-bottom: 1px solid var(--tf-hair); font-size: 15.5px; font-weight: 400; line-height: 1.45; }
.mev-tiff .offer-list svg { width: 16px; height: 16px; margin-top: 3px; stroke-width: 1.6; stroke-linecap: square; stroke-linejoin: miter; color: var(--pink-soft); }
/* caixa do preço: branca da Tiff com o número em Bodoni tinta (era rosa com brilho) */
.mev-tiff .price-box { background: var(--white); color: var(--ink); box-shadow: none; }
.mev-tiff .final .offer .price-from { color: var(--grey-dark); font-size: 13px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.mev-tiff .price-from s { text-decoration-color: var(--pink); text-decoration-thickness: 1px; }
.mev-tiff .final .offer .price-now, .mev-tiff .final .offer .mev-price-now {
  font-family: var(--serif); font-style: normal; font-weight: 400; letter-spacing: -.04em;
  color: var(--ink); text-shadow: none;
}
.mev-tiff .price-now small { font-family: var(--sans); font-weight: 500; font-size: max(14px, .2em); letter-spacing: .08em; }
.mev-tiff .final .offer .mev-price-tag { margin: 0 0 14px; padding: 7px 12px 6px; background: var(--ink); color: var(--white); font-size: 10.5px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; }
.mev-tiff .final .offer .price-note { color: var(--on-light-text); font-weight: 400; }
.mev-tiff .final .offer .offer-why { color: var(--on-dark-text); font-size: 15.5px; }
.mev-tiff .tf-buy { width: 100%; max-width: 760px; margin: clamp(24px, 3vw, 36px) auto 0; }
.mev-tiff .tf-buy-btn { min-height: 72px; font-size: 13px; letter-spacing: .24em; }
.mev-tiff .tf-buy .secure-note { margin-top: 16px; gap: 10px; font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--tf-label); }
.mev-tiff .tf-buy .secure-note svg { width: 14px; height: 14px; flex: none; stroke-width: 1.6; }

/* ---------- 10.12 Quem está por trás: foto da Tiff ---------- */
.mev-tiff .who { gap: 40px clamp(40px, 6vw, 112px); }
@media (min-width: 860px) { .mev-tiff .who { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); } }
.mev-tiff .who-mark.tf-who {
  display: block; width: 100%; max-width: 420px; aspect-ratio: 3 / 4;
  background: #161616; padding: 0;
}
.mev-tiff .who-mark.tf-who picture, .mev-tiff .who-mark.tf-who img { display: block; width: 100%; height: 100%; }
.mev-tiff .who-mark.tf-who img { object-fit: cover; object-position: 50% 24%; }
.mev-tiff .who p { font-size: clamp(18px, 1.6vw, 24px); line-height: 1.6; font-weight: 350; color: var(--on-dark-text); max-width: 44ch; }

/* ---------- 10.13 Dúvidas (FAQ) — como o FAQ das landings da Tiff ---------- */
.mev-tiff .faq-toggle { gap: 20px; }
.mev-tiff .faq-btn {
  height: 48px; padding: 0 16px 0 20px; gap: 14px;
  box-shadow: inset 0 0 0 1px var(--tf-hair-strong);
  font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--white);
}
.mev-tiff .faq-ico, .mev-tiff .faq summary::after {        /* "+" feito de dois fios (vira "−" aberto) */
  width: 16px; height: 16px;
  background: linear-gradient(currentColor, currentColor) center / 16px 1px no-repeat,
              linear-gradient(currentColor, currentColor) center / 1px 16px no-repeat;
  transition: background-size .45s var(--ease-out), transform .45s var(--ease-out), color .3s var(--ease);
}
.mev-tiff .faq-wrap[open] .faq-ico { transform: none; background-color: transparent; background-size: 16px 1px, 1px 0; }
@media (hover: hover) {
  .mev-tiff .faq-toggle:hover .faq-btn { color: var(--ink); background: var(--white); box-shadow: inset 0 0 0 1px var(--white); }
  .mev-tiff .faq-toggle:hover .faq-ico { background-color: transparent; }
}
.mev-tiff .faq { gap: 0; border-top: 1px solid var(--tf-hair-strong); }
.mev-tiff .faq details { background: transparent; box-shadow: none; border-bottom: 1px solid var(--tf-hair); }
.mev-tiff .faq details[open] { background: transparent; }
.mev-tiff .faq summary {
  padding: clamp(18px, 2vw, 26px) 0;
  font-family: var(--serif); font-weight: 400; font-size: clamp(21px, 2vw, 30px); line-height: 1.15; letter-spacing: -.006em;
  transition: color .3s var(--ease);
}
.mev-tiff .faq summary:hover { color: var(--pink-soft); }
.mev-tiff .faq summary::after { flex: none; margin-right: 6px; background-color: transparent; }
.mev-tiff .faq details[open] summary::after { transform: none; background-color: transparent; background-size: 16px 1px, 1px 0; }
@media (hover: hover) { .mev-tiff .faq summary:hover::after { background-color: transparent; } }
.mev-tiff .faq .faq-a { padding: 0 44px clamp(22px, 2.4vw, 30px) 0; max-width: 64ch; color: var(--on-dark-text); font-size: 16.5px; line-height: 1.65; }

/* ---------- 10.14 CTA final (branco) ---------- */
.mev-tiff .end-cta { background: var(--white); color: var(--ink); }
.mev-tiff .end-cta h2 {
  font-family: var(--serif); font-style: normal; font-weight: 400;
  font-size: clamp(36px, 5vw, 80px); line-height: 1.02; letter-spacing: -.016em;
  margin-bottom: clamp(18px, 2vw, 28px);
}
.mev-tiff .end-cta p { color: var(--on-light-text); font-size: clamp(16px, 1.3vw, 19px); margin-bottom: clamp(28px, 3vw, 40px); }
.mev-tiff .end-cta .btn { min-width: min(100%, 380px); }
/* véu claro atrás do texto (deixa ler por cima das barrinhas rosas do pv.js), no branco da Tiff */
.mev-tiff .end-cta .wrap::before { background: radial-gradient(closest-side, rgba(250, 250, 248, .97) 0%, rgba(250, 250, 248, .93) 55%, rgba(250, 250, 248, .6) 78%, rgba(250, 250, 248, 0) 100%); }
/* marca da Tiff (monograma TC) no lugar do logo */
.mev-tiff .tf-end-logo { width: clamp(52px, 5vw, 68px); margin-bottom: clamp(24px, 3vw, 36px); }
@keyframes mevLogo { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.tf-end-folio { position: absolute; z-index: 1; top: calc(var(--header-h) + clamp(24px, 3vw, 44px)); color: var(--grey-dark); }
.tf-end-folio .pink { color: var(--pink); }
.tf-end-folio--l { left: var(--gutter); }
.tf-end-folio--r { right: var(--gutter); }
@media (max-width: 700px) { .tf-end-folio--l { display: none; } .tf-end-folio--r { right: auto; left: var(--gutter); } }

/* ============================================================
   11. CTA FIXO DO CELULAR + QUADRADO DA TIFF
   O botão fixo ocupa a barra de baixo e deixa à direita o espaço do quadrado da Tiff:
   os dois ficam lado a lado, um nunca cobre o outro.
   ============================================================ */
@media (max-width: 959px) {
  .mev-tiff .sticky-cta {
    padding: 10px calc(var(--talk-size) + var(--talk-gap) * 2) calc(var(--talk-gap) + env(safe-area-inset-bottom, 0px)) var(--talk-gap);
    background: rgba(10, 10, 10, .9);
    border-top: 1px solid rgba(250, 250, 248, .12);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  }
  .mev-tiff .sticky-cta .btn { min-height: var(--talk-size); padding: 0 16px; font-size: 11px; letter-spacing: .18em; }
  /* com a barra na tela, o balão do quadrado abre acima dela */
  .mev-tiff:has(.sticky-cta.is-on:not(.is-hide)) .talk__msg { margin-bottom: 10px; }
}
@media (min-width: 701px) and (max-width: 959px) {
  .mev-tiff .sticky-cta .btn { min-height: 64px; }
  .mev-tiff .sticky-cta { padding-top: calc(var(--talk-size) - 64px + 10px); background: linear-gradient(transparent 0 calc(var(--talk-size) - 64px), rgba(10, 10, 10, .9) 0); border-top: 0; }
}

/* ============================================================
   12. MOVIMENTO REDUZIDO
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .mev-tiff .mev-step-n, .mev-tiff .mev-pick .pk, .mev-tiff .btn { transition: none; }
  .mev-tiff .tf-end-logo { animation: none; }
}