/* ============================================================
   FFC — CSS dos componentes reutilizáveis (template-parts)
   Origem: Header.jsx / Footer.jsx do Claude Design, achatados.
   Inclui o botão da marca (.ffc-btn), recriado a partir das
   regras do design system (preenchimento azul, raio 8px,
   Space Grotesk medium), já que o componente React Button
   original vivia no bundle JS do design.
   ============================================================ */

/* ---------- Skip-link (acessibilidade) ---------- */
.ffc-skip{
  position:absolute;left:8px;top:-60px;z-index:1000;
  background:var(--ffc-blue);color:#fff;font-family:var(--font-display);font-weight:600;
  font-size:0.9rem;padding:.7rem 1.1rem;border-radius:var(--radius-sm);
  text-decoration:none;transition:top .2s var(--ease-out);
}
.ffc-skip:focus{top:8px;outline:2px solid #fff;outline-offset:2px;}

/* ---------- Botão da marca ---------- */
.ffc-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  font-family:var(--font-display);font-weight:500;line-height:1;
  text-decoration:none;cursor:pointer;border:1px solid transparent;
  border-radius:var(--radius-sm);
  transition:background var(--dur-base) var(--ease-out),
             transform var(--dur-fast) var(--ease-out),
             opacity var(--dur-base) var(--ease-out);
}
.ffc-btn--primary{
  color:#fff;background-color:#0529F6;
  background-image:linear-gradient(100deg,#0529F6 0%,#4f6bff 22%,#7d4dff 42%,#0420c9 60%,#4f6bff 80%,#0529F6 100%);
  background-size:220% 100%;
  box-shadow:0 8px 26px -8px rgba(5,41,246,.6);
  animation:ffcBtnSheen 4s linear infinite;
  transition:box-shadow .25s var(--ease-out),transform .15s var(--ease-out);
}
.ffc-btn--primary:hover{animation-duration:1.5s;box-shadow:0 12px 34px -8px rgba(5,41,246,.85),0 0 0 1px rgba(125,77,255,.4);transform:translateY(-1px);}
.ffc-btn--primary:active{transform:translateY(0) scale(.98);}
@keyframes ffcBtnSheen{from{background-position:0% 50%;}to{background-position:220% 50%;}}
@media (prefers-reduced-motion:reduce){.ffc-btn--primary{animation:none;}}
/* dark: para usar sobre o painel azul (fundo preto, texto branco) */
.ffc-btn--dark{background:var(--ffc-black);color:#fff;}
.ffc-btn--dark:hover{background:#1a1a1a;}
.ffc-btn--dark:active{transform:scale(.97);}
/* secondary: contorno sobre fundo escuro */
.ffc-btn--secondary{background:transparent;color:#fff;border-color:var(--ffc-hairline-on-dark);}
.ffc-btn--secondary:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.4);}
.ffc-btn--secondary:active{transform:scale(.97);}
/* O reset do hello-elementor força a:hover{color:#336} — re-afirma o texto
   branco dos botões FFC em todos os estados interativos (eles são <a>). */
.ffc-btn--primary,.ffc-btn--primary:hover,.ffc-btn--primary:focus,.ffc-btn--primary:active,
.ffc-btn--secondary,.ffc-btn--secondary:hover,.ffc-btn--secondary:focus,.ffc-btn--secondary:active,
.ffc-btn--dark,.ffc-btn--dark:hover,.ffc-btn--dark:focus,.ffc-btn--dark:active{color:#fff;}
.ffc-btn--sm{font-size:.875rem;padding:.5rem .9rem;}
.ffc-btn--md{font-size:.9375rem;padding:.7rem 1.15rem;}
.ffc-btn--lg{font-size:1rem;padding:.95rem 1.5rem;}
.ffc-btn--block{display:flex;width:100%;}
.ffc-btn:focus-visible{outline:none;box-shadow:var(--ring-accent);}

/* ---------- StatCallout (número grande + rótulo) ---------- */
.ffc-stat__value{font-family:var(--font-display);font-weight:700;font-size:clamp(2.25rem,4.5vw,3.25rem);line-height:1;letter-spacing:-0.02em;color:var(--ffc-blue);}
.ffc-stat--on-dark .ffc-stat__value{color:var(--ffc-blue-on-dark);}
.ffc-stat__label{font-family:var(--font-body);font-size:.9375rem;line-height:1.3;color:var(--text-secondary);margin-top:.4rem;max-width:16ch;}

/* ---------- NumberMarker (dígito branco em quadrado azul) ---------- */
.ffc-num{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;background:var(--ffc-blue);color:#fff;border-radius:var(--radius-md);}
.ffc-num--lg{width:58px;height:58px;font-size:1.5rem;}
.ffc-num--md{width:46px;height:46px;font-size:1.2rem;}

/* ---------- Mural de logos de marcas (grayscale uniforme) ---------- */
.logo-cell{display:inline-flex;align-items:center;justify-content:center;height:56px;flex:none;}
.logo-cell img{max-height:30px;width:auto;max-width:210px;object-fit:contain;filter:grayscale(1);opacity:.6;transition:opacity .2s var(--ease-out),filter .2s var(--ease-out);}
.logo-cell:hover img{opacity:1;filter:grayscale(0);}

/* ---------- Header ---------- */
.ffc-hd{container-type:inline-size;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:13px clamp(24px,6vw,80px);border-bottom:1px solid var(--ffc-hairline-on-dark);color:#fff;}
.ffc-hd--sticky{position:sticky;top:0;z-index:60;}
.ffc-hd--glass{background:rgba(0,0,0,.66);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
.ffc-hd--solid{background:var(--ffc-black);}
.ffc-hd--light{background:#fff;color:var(--text-primary);border-bottom-color:var(--ffc-hairline-on-light);}
.ffc-hd a{text-decoration:none;}
.ffc-hd a:not(.ffc-btn){color:inherit;}
.ffc-hd__brand{display:flex;align-items:center;}
.ffc-hd__brand img{display:block;height:26px;width:auto;object-fit:contain;}
.ffc-hd__nav{display:flex;align-items:center;gap:clamp(16px,2.4vw,30px);font-family:var(--font-display);font-weight:500;font-size:.9375rem;}
.ffc-hd__nav a{opacity:.85;transition:color .2s var(--ease-out),opacity .2s var(--ease-out);}
.ffc-hd__nav a:hover{opacity:1;color:var(--ffc-blue-on-dark);}
.ffc-hd__nav a.is-active{opacity:1;color:var(--ffc-blue-on-dark);font-weight:600;}
.ffc-hd--light .ffc-hd__nav a:hover,.ffc-hd--light .ffc-hd__nav a.is-active{color:var(--ffc-blue);}
/* Dropdown do nav (desktop) */
.ffc-hd__item{position:relative;display:flex;align-items:center;}
.ffc-hd__disclosure{display:inline-flex;align-items:center;gap:.3rem;font:inherit;color:inherit;background:transparent;border:0;padding:0;margin:0;cursor:pointer;opacity:.85;transition:color .2s var(--ease-out),opacity .2s var(--ease-out);}
.ffc-hd__disclosure:hover,.ffc-hd__item:focus-within .ffc-hd__disclosure,.ffc-hd__disclosure.is-active{opacity:1;color:var(--ffc-blue-on-dark);}
.ffc-hd--light .ffc-hd__disclosure:hover,.ffc-hd--light .ffc-hd__item:focus-within .ffc-hd__disclosure,.ffc-hd--light .ffc-hd__disclosure.is-active{color:var(--ffc-blue);}
.ffc-hd__chev{flex:none;transition:transform .2s var(--ease-out);}
.ffc-hd__item:hover .ffc-hd__chev,.ffc-hd__item:focus-within .ffc-hd__chev,.ffc-hd__item.is-open .ffc-hd__chev{transform:rotate(180deg);}
.ffc-hd__dropdown::before{content:"";position:absolute;top:-8px;left:0;right:0;height:8px;}
.ffc-hd__dropdown{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px);min-width:220px;display:flex;flex-direction:column;padding:.5rem;border-radius:var(--radius-sm);background:var(--ffc-black);border:1px solid var(--ffc-hairline-on-dark);box-shadow:0 18px 40px rgba(0,0,0,.35);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s var(--ease-out),transform .18s var(--ease-out);z-index:210;}
.ffc-hd--light .ffc-hd__dropdown{background:#fff;border-color:var(--ffc-hairline-on-light);}
.ffc-hd__item:hover .ffc-hd__dropdown,.ffc-hd__item:focus-within .ffc-hd__dropdown,.ffc-hd__item.is-open .ffc-hd__dropdown{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(6px);}
.ffc-hd__dropdown a{display:block;padding:.55rem .7rem;border-radius:calc(var(--radius-sm) - 4px);opacity:.9;white-space:nowrap;}
.ffc-hd__dropdown a:hover,.ffc-hd__dropdown a.is-active{opacity:1;color:var(--ffc-blue-on-dark);background:rgba(255,255,255,.06);}
.ffc-hd--light .ffc-hd__dropdown a:hover,.ffc-hd--light .ffc-hd__dropdown a.is-active{color:var(--ffc-blue);background:rgba(0,0,0,.04);}
.ffc-hd__right{display:flex;align-items:center;gap:.75rem;}
.ffc-hd__burger{display:none;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid var(--ffc-hairline-on-dark);background:transparent;border-radius:var(--radius-sm);cursor:pointer;color:#fff;}
.ffc-hd--light .ffc-hd__burger{border-color:var(--ffc-hairline-on-light);color:var(--text-primary);}
.ffc-hd__burger span{display:block;width:18px;height:2px;background:currentColor;box-shadow:0 -6px 0 currentColor,0 6px 0 currentColor;}
@media (max-width:720px){.ffc-hd__nav{display:none;}.ffc-hd__burger{display:inline-flex;}.ffc-hd__cta-extra{display:none;}}
/* Alvos de toque ≥44px no header (auditoria 2026-07-23; WCAG 2.5.5 / Material).
   Só no breakpoint mobile (touch) e escopado ao header — no desktop o CTA de
   32px mantém o header nos 59px originais. */
@media (max-width:720px){
	.ffc-hd .ffc-btn--sm{min-height:44px;display:inline-flex;align-items:center;}
	.ffc-hd__burger{width:44px;height:44px;}
}

/* ---------- Header — menu mobile (overlay) ---------- */
.ffc-hd__overlay{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.97);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.75rem;color:#fff;padding:24px;}
.ffc-hd__overlay[hidden]{display:none;}
.ffc-hd__close{position:absolute;top:18px;right:clamp(24px,6vw,80px);width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:1px solid var(--ffc-hairline-on-dark);background:transparent;border-radius:var(--radius-sm);color:#fff;font-size:1.6rem;line-height:1;cursor:pointer;}
.ffc-hd__overlay-nav{display:flex;flex-direction:column;align-items:center;gap:1.5rem;font-family:var(--font-display);font-weight:600;font-size:1.75rem;}
.ffc-hd__overlay-nav a{color:#fff;text-decoration:none;transition:color .2s var(--ease-out);}
.ffc-hd__overlay-nav a.is-active{color:var(--ffc-blue-on-dark);}
.ffc-hd__overlay-nav a:hover{color:var(--ffc-blue-on-dark);}
/* Grupo hierárquico no mobile (o que no desktop é dropdown) */
.ffc-hd__overlay-group{display:flex;flex-direction:column;align-items:center;gap:.85rem;}
.ffc-hd__overlay-heading{font-family:var(--font-display);font-weight:600;font-size:1.75rem;color:#fff;opacity:.55;}
.ffc-hd__overlay-sub{font-size:1.15rem;font-weight:500;opacity:.9;}
@media (prefers-reduced-motion:no-preference){.ffc-hd__overlay{animation:ffcMenuIn .22s var(--ease-out) both;}}
@keyframes ffcMenuIn{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}

/* ---------- Footer ---------- */
.ffc-ft{background:var(--ffc-black);color:#fff;font-family:var(--font-body);padding:clamp(36px,5vw,56px) clamp(24px,6vw,80px) clamp(28px,4vw,40px);container-type:inline-size;}
.ffc-ft a{text-decoration:none;color:inherit;}
.ffc-ft__inner{max-width:1180px;margin:0 auto;width:100%;}
.ffc-ft__top{display:flex;flex-wrap:wrap;gap:clamp(32px,5vw,72px);padding-bottom:clamp(32px,4vw,48px);border-bottom:1px solid var(--ffc-hairline-on-dark);}
.ffc-ft__brand{flex:1 1 220px;min-width:200px;}
.ffc-ft__brand img{display:block;height:28px;width:auto;object-fit:contain;margin-bottom:1.1rem;}
.ffc-ft__tagline{font-size:.9rem;line-height:1.5;color:var(--ffc-gray-300);max-width:24ch;margin:0 0 1.25rem;}
.ffc-ft__social{display:flex;align-items:center;flex-wrap:wrap;gap:clamp(12px,1.6vw,20px);font-family:var(--font-display);font-weight:500;font-size:.9375rem;}
.ffc-ft__social a{color:#c9c9c9;transition:color .2s var(--ease-out);}
.ffc-ft__social a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px;}
.ffc-ft__col{display:flex;flex-direction:column;gap:.85rem;min-width:150px;}
.ffc-ft__eyebrow{font-family:var(--font-display);font-weight:600;font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ffc-gray-300);margin-bottom:.3rem;opacity:.7;}
.ffc-ft__col a{display:inline-flex;align-items:center;min-height:24px;width:fit-content;font-family:var(--font-display);font-weight:500;color:#c9c9c9;font-size:.9375rem;transition:color .2s var(--ease-out),transform .2s var(--ease-out);}
.ffc-ft__col a:hover{color:#fff;transform:translateX(3px);text-decoration:underline;text-underline-offset:3px;}
@media (prefers-reduced-motion:reduce){.ffc-ft__col a:hover{transform:none;}}
.ffc-ft__link-soon{display:inline-flex;align-items:center;min-height:24px;width:fit-content;font-family:var(--font-display);font-weight:500;color:#8f8f8f;font-size:.9375rem;cursor:default;}
.ffc-ft__soon{display:inline-block;margin-left:.35rem;font-size:.6875rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ffc-gray-300);border:1px solid var(--ffc-hairline-on-dark);border-radius:999px;padding:1px 7px;vertical-align:middle;}
.ffc-ft__base{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;margin-top:clamp(20px,2.6vw,28px);}
.ffc-ft__meta{font-family:var(--font-display);font-weight:600;font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ffc-gray-300);}
/* Reabre o painel de consentimento (mu-plugin ffc-lgpd-consent.php). É <button> por ser
   ação, não navegação. min-height fixo em 44px: a primeira versão usava padding + margin
   negativa para não inflar a linha legal e ficava em 42px — abaixo do alvo de toque. */
.ffc-ft__cookies{display:inline-flex;align-items:center;min-height:44px;background:none;border:0;cursor:pointer;text-decoration:underline;padding:0;}
.ffc-ft__cookies:hover{color:var(--ffc-white);}

/* ---------- Base compartilhada das páginas do tema (.ffc-root) ----------
   Cada page template envolve o conteúdo num wrapper com a classe .ffc-root
   (além da classe própria .ffc-home/.ffc-cases/…). Regras que antes eram
   copiadas em cada <style> por template vivem aqui, uma vez. */
/* O margin:8px padrão do UA no <body> vinha sendo zerado por acidente pelo CSS
   do editor de blocos (global-styles/theme.json), que estas páginas não usam e
   não carregam. O reset é do tema: escopado em .ffc-page (todo template do
   ffc-theme põe essa classe no body) para não tocar as páginas Elementor. */
/* A família no `body` é um PISO, não escolha de design: o tema nunca a declarou
   aqui, então toda página cujo wrapper esquecesse a regra caía no serif padrão
   do browser — aconteceu com duas páginas antes de alguém perceber. Cada wrapper
   continua livre para declarar a sua por cima. */
body.ffc-page { margin: 0; font-family: var(--font-body); }
.ffc-root, .ffc-root * { box-sizing: border-box; }
/* Links herdam a cor do contexto; botões carregam a própria (.ffc-btn--*),
   senão .ffc-root a (0,1,1) venceria o color:#fff do botão (0,1,0) e o
   texto ficaria escuro em seções claras. Mesmo padrão do .ffc-hd. */
.ffc-root a:not(.ffc-btn) { text-decoration: none; color: inherit; }
.ffc-root a.ffc-btn { text-decoration: none; }
.ffc-root p { margin: 0; }
.ffc-root mark { background: var(--ffc-blue); color: #fff; font-weight: 700; padding: .02em .18em; border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.ffc-root a:focus-visible, .ffc-root button:focus-visible { outline: none; box-shadow: var(--ring-accent); border-radius: 4px; }

/* hover-lift de cards */
.ffc-root .card-lift { transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-out); }
@media (prefers-reduced-motion: no-preference) { .ffc-root .card-lift:hover { transform: translateY(-5px); box-shadow: 0 18px 40px -22px rgba(0,0,0,.65); } }

/* scroll reveal (scroll-driven, GPU-only, nunca esconde onde não há suporte) */
@keyframes ffcReveal { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { .ffc-root .reveal { animation: ffcReveal linear both; animation-timeline: view(); animation-range: entry 2% cover 26%; } } }

/* ---------- Marquee de logos (template-parts/logo-marquee.php) ---------- */
/* Scroll horizontal nativo → swipe/arraste com inércia (sobretudo mobile). O
   auto-avanço contínuo é dirigido por JS (ffc-front.js, via scrollLeft) e cede
   ao gesto do usuário. touch-action:pan-x preserva o scroll vertical da página;
   a barra de rolagem fica oculta. Sem JS: estático, mas ainda arrastável. */
.logo-marquee-wrap { position: relative; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; touch-action: pan-x; cursor: grab; user-select: none; -webkit-user-select: none; scrollbar-width: none; -ms-overflow-style: none; -webkit-mask-image: linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%); mask-image: linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%); }
.logo-marquee-wrap.is-grabbing { cursor: grabbing; }
.logo-marquee img { -webkit-user-drag: none; }
.logo-marquee-wrap::-webkit-scrollbar { display: none; }
.logo-marquee { display: flex; align-items: center; width: max-content; gap: clamp(36px,5vw,64px); will-change: scroll-position; }
@media (prefers-reduced-motion: reduce) { .logo-marquee-wrap { overflow-x: hidden; touch-action: auto; } .logo-marquee { flex-wrap: wrap; justify-content: center; row-gap: clamp(20px,3vw,32px); } }

/* ---------- Callout Plano 3S nos posts (template-parts/isca-callout.php) ---------- */
/* Injetado no meio do the_content pelos hooks do functions.php. Oferta de
   produto de entrada (página de venda /plano3s/) — visual de "card de oferta",
   distinto do pillar-callout (que é navegação de cluster).
   Seletores compostos (.plano3s-callout .__x) porque o card vive dentro do
   .art-body do single.php, cujos .art-body p / .art-body a (0,1,1) vencem
   classes BEM soltas (0,1,0) — texto cinza e link azul sobre fundo escuro. */
.plano3s-callout { margin: 36px 0; padding: clamp(20px,3vw,28px); background: var(--ffc-near-black); border-radius: var(--radius-md, 12px); color: var(--ffc-white); }
.plano3s-callout .plano3s-callout__label { font-family: var(--font-display); font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ffc-indigo-soft); margin: 0 0 8px; }
.plano3s-callout .plano3s-callout__text { font-family: var(--font-body); font-size: clamp(15px,1.7vw,17px); line-height: 1.6; color: var(--ffc-gray-300); margin: 0 0 14px; }
.plano3s-callout .plano3s-callout__link { display: inline-block; font-family: var(--font-display); font-weight: 600; font-size: clamp(14px,1.6vw,16px); color: var(--ffc-white); text-decoration: none; border-bottom: 2px solid var(--ffc-blue); padding-bottom: 2px; }
.plano3s-callout .plano3s-callout__link:hover, .plano3s-callout .plano3s-callout__link:focus-visible { color: var(--ffc-indigo-soft); }
.plano3s-callout .plano3s-callout__link:focus-visible { outline: 2px solid var(--ffc-indigo-soft); outline-offset: 3px; }

/* ---------- Callout de material gratuito (template-parts/material-callout.php)
   Injetado após o 1º parágrafo do post. Card CLARO de propósito: o callout do
   Plano 3S acima é escuro, e o contraste evita que o leitor leia as duas
   chamadas como a mesma peça e ignore ambas. */
.material-callout { margin: 28px 0; padding: clamp(18px,2.6vw,24px); background: var(--ffc-white, #fff); border: 1px solid var(--ffc-hairline-on-light); border-left: 4px solid var(--ffc-blue); border-radius: var(--radius-md, 12px); }
.material-callout .material-callout__label { font-family: var(--font-display); font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ffc-blue); margin: 0 0 6px; }
.material-callout .material-callout__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(16px,1.9vw,19px); line-height: 1.25; color: var(--text-primary); margin: 0 0 8px; }
.material-callout .material-callout__text { font-family: var(--font-body); font-size: clamp(14px,1.6vw,16px); line-height: 1.6; color: var(--text-secondary); margin: 0 0 14px; }
.material-callout .material-callout__link { display: inline-block; font-family: var(--font-display); font-weight: 600; font-size: clamp(14px,1.6vw,16px); color: var(--ffc-blue); text-decoration: none; border-bottom: 2px solid var(--ffc-blue); padding-bottom: 2px; }
.material-callout .material-callout__link:hover, .material-callout .material-callout__link:focus-visible { color: var(--text-primary); border-bottom-color: var(--text-primary); }
.material-callout .material-callout__link:focus-visible { outline: 2px solid var(--ffc-blue); outline-offset: 3px; }
.material-callout .material-callout__meta { font-family: var(--font-display); font-weight: 600; font-size: 11.5px; letter-spacing: .05em; color: var(--text-secondary); opacity: .7; margin: 10px 0 0; }

/* ---------- Arquivo de categoria (category.php) ---------- */
.ffc-cat { background: #fff; color: var(--text-primary); }
.cat-wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.cat-hero { padding: clamp(110px,14vw,150px) 0 clamp(28px,4vw,44px); border-bottom: 1px solid var(--ffc-hairline-on-light); }
.cat-breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; font-family: var(--font-display); font-size: 13px; color: var(--text-secondary); margin-bottom: 18px; }
.cat-breadcrumb a { color: var(--text-secondary); text-decoration: none; }
.cat-breadcrumb a:hover { color: var(--ffc-blue); }
.cat-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px,5vw,52px); line-height: 1.06; letter-spacing: -.03em; color: var(--ffc-black); margin: 0 0 18px; text-wrap: balance; }
.cat-desc { max-width: 72ch; }
.cat-desc p { font-family: var(--font-body); font-size: clamp(15px,1.6vw,17.5px); line-height: 1.7; color: var(--text-secondary); margin: 0 0 .9em; }
.cat-desc strong { color: var(--text-primary); }
/* Links no meio do texto (corpo do artigo + descrição do hub): azul + sublinhado
   sempre; externos ganham ícone ↗ em SVG (via mask, herda a cor do link — o
   inline-block do ::after não recebe o underline, só o texto). Externo =
   href absoluto que não é o próprio site (conteúdo interno usa path relativo).
   Seletor com .ffc-root + :not(.ffc-btn) chega a (0,3,1) e vence o reset
   .ffc-root a:not(.ffc-btn) (0,2,1) — mesmo padrão do .ffc-prog__cta abaixo.
   (A regra .art-body a do single.php era letra morta por perder pro reset;
   a fonte única do estilo de link de conteúdo é esta aqui.)
   Os CTAs dos callouts (.material-callout__link / .plano3s-callout__link) ficam
   de fora: já têm underline próprio (border-bottom) + seta &rarr; no markup. */
.ffc-root .art-body a:not(.ffc-btn):not(.material-callout__link):not(.plano3s-callout__link),
.ffc-root .cat-desc a:not(.ffc-btn):not(.material-callout__link):not(.plano3s-callout__link) {
	color: var(--ffc-blue);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.ffc-root .art-body a:not(.ffc-btn):not(.material-callout__link):not(.plano3s-callout__link):hover,
.ffc-root .cat-desc a:not(.ffc-btn):not(.material-callout__link):not(.plano3s-callout__link):hover { color: #0420c4; }
.art-body a[href^="http"]:not([href*="fantasticafabricacriativa.com.br"]):not([href*=".ddev.site"]):not(.material-callout__link):not(.plano3s-callout__link)::after,
.cat-desc a[href^="http"]:not([href*="fantasticafabricacriativa.com.br"]):not([href*=".ddev.site"]):not(.material-callout__link):not(.plano3s-callout__link)::after {
	content: "";
	display: inline-block;
	width: .68em;
	height: .68em;
	margin-left: .28em;
	vertical-align: -.05em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cat-pillar-cta { display: inline-block; font-family: var(--font-display); font-weight: 600; font-size: clamp(14px,1.6vw,16px); color: var(--ffc-blue); text-decoration: none; border-bottom: 2px solid var(--ffc-blue); padding-bottom: 2px; margin: 6px 0 8px; }
.cat-pillar-cta:hover, .cat-pillar-cta:focus-visible { color: var(--ffc-black); border-color: var(--ffc-black); }
.cat-list { padding: clamp(36px,5vw,64px) 0; }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: clamp(18px,2.4vw,28px); }
.cat-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--ffc-hairline-on-light); border-radius: var(--radius-md); overflow: hidden; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
.cat-card:hover, .cat-card:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.cat-card:focus-visible { outline: 2px solid var(--ffc-blue); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .cat-card, .cat-card:hover, .cat-card:focus-visible { transform: none; transition: none; } }
.cat-card__img { width: 100%; height: 200px; object-fit: cover; display: block; }
.cat-card__img--ph { display: flex; align-items: center; justify-content: center; background: var(--ffc-near-black); color: rgba(255,255,255,.55); font-family: var(--font-display); font-size: 13px; }
.cat-card__body { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 20px; flex: 1; }
.cat-card__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(16px,1.8vw,18.5px); line-height: 1.3; color: var(--ffc-black); }
.cat-card__more { margin-top: auto; font-family: var(--font-display); font-weight: 600; font-size: 13.5px; color: var(--ffc-blue); }
.cat-pagination { margin-top: clamp(28px,4vw,44px); font-family: var(--font-display); }
.cat-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.cat-pagination .page-numbers { display: inline-block; padding: 9px 15px; border: 1px solid var(--ffc-hairline-on-light); border-radius: var(--radius-sm); color: var(--text-primary); text-decoration: none; font-size: 14px; }
.cat-pagination .page-numbers.current { background: var(--ffc-blue); border-color: var(--ffc-blue); color: #fff; }
.cat-pagination a.page-numbers:hover { border-color: var(--ffc-blue); color: var(--ffc-blue); }
.cat-empty { font-family: var(--font-body); color: var(--text-secondary); }
.cat-cta { background: var(--ffc-near-black); color: #fff; text-align: center; padding: clamp(44px,6vw,72px) 0; }
.cat-cta h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px,3.2vw,34px); margin: 0 0 10px; color: #fff; }
.cat-cta p { font-family: var(--font-body); font-size: clamp(14.5px,1.6vw,17px); color: var(--ffc-gray-300); margin: 0 0 24px; }
.cat-cta__btn { display: inline-block; background: var(--ffc-blue); color: #fff; font-family: var(--font-display); font-weight: 600; font-size: clamp(14.5px,1.7vw,16px); padding: 16px 30px; border-radius: var(--radius-pill); text-decoration: none; }
.cat-cta__btn:hover { filter: brightness(1.1); }
.cat-cta__btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ---------- FAQ — acordeão nativo <details> (single.php + category.php) ----------
   Fonte única compartilhada: usada no fim do artigo (single) e no arquivo de
   categoria (cluster). Emite par visível + schema FAQPage via ffc_faq_jsonld(). */
.faq-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px,2.8vw,32px); line-height: 1.14; letter-spacing: -.025em; color: var(--ffc-black); margin: 0 0 1em; text-wrap: balance; }
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-item { border: 1px solid var(--ffc-hairline-on-light); border-radius: var(--radius-sm); background: #fff; overflow: hidden; }
.faq-item[open] { border-color: var(--ffc-blue); }
.faq-q { cursor: pointer; list-style: none; padding: 18px 22px; font-family: var(--font-display); font-weight: 600; font-size: clamp(15px,1.7vw,18px); line-height: 1.35; color: var(--text-primary); display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after { content: '+'; font-weight: 400; font-size: 24px; line-height: 1; color: var(--ffc-blue); flex: none; }
.faq-item[open] .faq-q::after { content: '−'; }
.faq-a { padding: 0 22px 20px; }
.faq-a p { font-family: var(--font-body); font-size: clamp(15px,1.5vw,17px); line-height: 1.7; color: var(--text-secondary); margin: 0 0 .6em; }
.faq-a p:last-child { margin-bottom: 0; }
.faq-a a { color: var(--ffc-blue); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Player do artigo (ffc_article_video_embed, em inc/video.php) ----------
   Antes os artigos só *linkavam* o vídeo do YouTube; agora ele é embedado de fato
   (pré-requisito do schema VideoObject). Mesmo facade dos cards — só a thumb carrega
   no load, o iframe entra no clique. 16/9 porque aqui o player é o conteúdo, não
   um card. */
.ffc-article-video { position: relative; margin: 28px 0; border-radius: var(--radius-md); overflow: hidden; background: #000; aspect-ratio: 16/9; }
.ffc-article-video img { width: 100%; height: 100%; object-fit: cover; opacity: .82; display: block; }
.ffc-article-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ffc-article-video .vid-btn { position: absolute; inset: 0; width: 100%; height: 100%; display: grid; place-items: center; background: transparent; border: 0; cursor: pointer; transition: filter .2s var(--ease-out); }
.ffc-article-video .vid-btn:hover { filter: brightness(1.06); }
.ffc-article-video .vid-play { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--ffc-blue); box-shadow: 0 6px 20px rgba(5,41,246,.45); transition: transform .2s var(--ease-out); }
.ffc-article-video .vid-btn:hover .vid-play { transform: scale(1.1); }
.ffc-article-video__cap { font-family: var(--font-body); font-size: 13.5px; line-height: 1.5; color: var(--text-secondary); margin: 8px 0 0; }

/* ---------- Card de depoimento em vídeo (template-parts/video-card.php) ----------
   Thumb 16/10 com facade do YouTube (.vid-btn é o gatilho lido pelo ffc-front.js)
   + bloco tag/nome/resultado. Usado em Vender na internet e Treinamentos. */
.ffc-vcard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--ffc-hairline-on-light); border-radius: var(--radius-md); overflow: hidden; transition: border-color .22s var(--ease-out); }
.ffc-vcard:hover { border-color: var(--ffc-gray-900); }
.ffc-vcard__media { position: relative; margin: 14px 14px 0; border-radius: var(--radius-md); overflow: hidden; background: #000; aspect-ratio: 16/10; }
.ffc-vcard__media img { width: 100%; height: 100%; object-fit: cover; opacity: .82; display: block; }
.ffc-vcard__media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ffc-vcard__media .vid-btn { position: absolute; inset: 0; width: 100%; height: 100%; display: grid; place-items: center; background: transparent; border: 0; cursor: pointer; transition: filter .2s var(--ease-out); }
.ffc-vcard__media .vid-btn:hover { filter: brightness(1.06); }
.ffc-vcard__media .vid-play { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--ffc-blue); box-shadow: 0 6px 20px rgba(5,41,246,.45); transition: transform .2s var(--ease-out); }
.ffc-vcard__media .vid-btn:hover .vid-play { transform: scale(1.1); }
.vid-play__tri { display: block; width: 0; height: 0; border-style: solid; border-width: 10px 0 10px 16px; border-color: transparent transparent transparent #fff; margin-left: 4px; }
.ffc-vcard__body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.ffc-vcard__tag { font-family: var(--font-display); font-weight: 600; font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ffc-blue); }
.ffc-vcard__name { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; line-height: 1.15; letter-spacing: -.01em; color: var(--ffc-black); }
.ffc-vcard__result { font-family: var(--font-body); font-size: .95rem; line-height: 1.5; color: var(--ffc-gray-600); }

/* ---------- Componentes compartilhados extraídos dos page-templates ---------- */
/* Núcleo comum; cada template mantém só os deltas (tamanho/margem/cor) na sua
   classe namespaced. Repetiu 2×, vira componente (regra da casa). */
.ffc-eyebrow { font-family: var(--font-display); font-weight: 600; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ffc-blue); margin: 0 0 1rem; }
/* Bullet de asterisco (AsteriskBullet do design system, achatado) */
.ffc-abullet { display: flex; gap: .6rem; align-items: baseline; font-family: var(--font-display); font-weight: 600; font-size: .95rem; line-height: 1.4; }
.ffc-abullet::before { content: "✳"; color: var(--ffc-blue-on-dark); flex: none; }
.ffc-acc details { border-bottom: 1px solid var(--ffc-hairline-on-light); }
.ffc-acc summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; font-family: var(--font-display); font-weight: 600; line-height: 1.35; color: #000; }
.ffc-acc summary::-webkit-details-marker { display: none; }
.ffc-acc summary:hover { color: var(--ffc-blue); }
.ffc-acc summary:focus-visible { outline: 2px solid var(--ffc-blue); outline-offset: 3px; border-radius: 4px; }

/* Card de case corporativo (antes/depois) — para seções em fundo escuro.
   Migrado da página in company (descontinuada); usado em /cases/. */
.ffc-casecard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.ffc-casecard { display: flex; flex-direction: column; gap: 12px; background: var(--surface-card); border: 1px solid var(--ffc-hairline-on-dark); border-radius: var(--radius-md); padding: clamp(22px, 2.5cqw, 30px); }
.ffc-casecard__empresa { font-family: var(--font-display); font-weight: 700; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ffc-gray-300); }
.ffc-casecard__tema { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; line-height: 1.25; letter-spacing: -.01em; color: #fff; }
.ffc-casecard-ad { display: flex; gap: 10px; align-items: baseline; }
.ffc-casecard-ad__k { flex: none; width: 48px; font-family: var(--font-display); font-weight: 600; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
.ffc-casecard-ad__k--antes { color: var(--ffc-gray-300); } /* gray-300 (não gray-500) sobre o card #222: contraste AA */
.ffc-casecard-ad__k--depois { color: var(--ffc-blue-on-dark); }
.ffc-casecard-ad__antes { font-family: var(--font-body); font-size: .94rem; line-height: 1.5; color: var(--ffc-gray-300); }
.ffc-casecard-ad__depois { font-family: var(--font-body); font-size: .94rem; line-height: 1.5; color: #fff; }

/* ============ PROGRAMAS — catálogo de treinamentos nomeados ============
   Componente compartilhado (template-parts/programas.php). Usado na página in
   company (CTA → #orcamento local) e no catálogo de gravados (CTA → in company).
   Auto-contido: traz o wrapper de seção próprio p/ não depender de CSS de página.
   Usa cqw → exige ancestral com container-type (as páginas dão em .ffc-tic/.ffc-gv). */
.ffc-prog-sec { padding: clamp(72px,9cqw,120px) clamp(24px,6cqw,80px); border-top: 1px solid var(--ffc-hairline-on-light); }
.ffc-prog-inner { max-width: 1180px; margin: 0 auto; }
.ffc-prog__h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem,4cqw,3.2rem); line-height: 1.06; letter-spacing: -.02em; margin: 0 0 1rem; color: var(--ffc-black); max-width: 24ch; }
.ffc-prog__sub { font-family: var(--font-body); font-size: clamp(1.05rem,1.4cqw,1.25rem); line-height: 1.6; color: var(--ffc-gray-600); margin: 0; padding-bottom: 3rem; max-width: 60ch; }
.ffc-prog { display: grid; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); gap: 24px; align-items: start; }
.ffc-prog__card { display: flex; flex-direction: column; gap: 12px; background: #fff; border: 1px solid var(--ffc-hairline-on-light); border-radius: var(--radius-md); padding: clamp(24px,3cqw,32px); }
.ffc-prog__tag { font-family: var(--font-display); font-weight: 600; font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ffc-blue); }
.ffc-prog__nome { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; line-height: 1.15; letter-spacing: -.015em; color: var(--ffc-black); }
.ffc-prog__desc { margin: 0; font-size: .98rem; line-height: 1.55; color: var(--ffc-gray-600); }
.ffc-prog__more { border-top: 1px solid var(--ffc-hairline-on-light); padding-top: 12px; }
.ffc-prog__more > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ffc-blue); }
.ffc-prog__more > summary::-webkit-details-marker { display: none; }
.ffc-prog__more > summary::after { content: "+"; font-size: 1.2rem; line-height: 1; }
.ffc-prog__more[open] > summary::after { content: "–"; }
.ffc-prog__list { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .6rem; }
.ffc-prog__list li { font-size: .9rem; line-height: 1.45; color: var(--ffc-gray-600); }
/* CTA do card = link de texto (não botão): mais leve na grade de catálogo e sem o
   bug do botão branco. O seletor com .ffc-prog__card + :not(.ffc-btn) chega a (0,3,0)
   e vence o reset .ffc-root a:not(.ffc-btn){text-decoration:none;color:inherit} (0,2,1). */
.ffc-prog__cta { margin-top: auto; }
.ffc-prog__card .ffc-prog__cta:not(.ffc-btn) { font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--ffc-blue); text-decoration: underline; text-underline-offset: 3px; }
.ffc-prog__card .ffc-prog__cta:not(.ffc-btn):hover { color: #0420c4; }
/* seletor com .ffc-prog-sec p/ vencer o reset .ffc-root p{margin:0} (0,1,1) por
   especificidade (0,2,0) — senão a margem do topo do note é anulada. */
.ffc-prog-sec .ffc-prog__note { font-size: 1.02rem; color: var(--ffc-gray-600); margin-top: 2.5rem; }
.ffc-prog__notelink { font-family: var(--font-display); font-weight: 600; color: var(--ffc-blue); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Marquee de logos com animação CSS (template-parts/logo-marquee-anim.php) ---------- */
/* Variante do `logo-marquee` (que usa scroll por JS): aqui o avanço é uma
   @keyframes contínua que pausa no hover, e os logos entram coloridos sobre
   fundo claro via mix-blend-mode. Vive aqui, e não numa folha de página, porque
   é usado por /treinamentos-in-company-v4/ E /treinamentos-gravados/ — regra do
   tema: repetiu 2×, vira componente compartilhado. */
/* Marquee do design (template-parts/logo-marquee-anim.php): animação CSS
   contínua, sem JS. A faixa tem duas cópias idênticas da lista e roda até
   -50%, então o loop fecha sem salto. `min-height` reserva a linha antes das
   imagens carregarem (anti-CLS) — os <img> não levam width/height porque a
   altura é definida por logo no CSS e a largura é `auto`. */
.ffc-mq { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); }
.ffc-mq__track { display: flex; align-items: center; width: max-content; min-height: 80px; animation: ffc-logoscroll 52s linear infinite; }
.ffc-mq__set { display: flex; align-items: center; gap: clamp(40px, 5cqw, 72px); padding-right: clamp(40px, 5cqw, 72px); }
.ffc-mq:hover .ffc-mq__track { animation-play-state: paused; }
/* multiply apaga o branco do arquivo contra o #f4f4f5 da seção; grayscale +
   opacity deixam o mural neutro e o hover devolve a cor da marca. */
.ffc-mq__track img { height: var(--ffc-logo-h, 38px); width: auto; object-fit: contain; mix-blend-mode: multiply; filter: grayscale(1); opacity: .7; transition: filter .25s var(--ease-out), opacity .25s var(--ease-out); }
.ffc-mq__track img:hover { filter: none; opacity: 1; }
@keyframes ffc-logoscroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
	.ffc-mq__track { animation: none; flex-wrap: wrap; width: 100%; justify-content: center; }
	.ffc-mq__set:last-child { display: none; }
	.ffc-mq { -webkit-mask-image: none; mask-image: none; }
}
@media (max-width: 620px) {
	.ffc-mq__set { gap: 32px; padding-right: 32px; }
	.ffc-mq__track { animation-duration: 34s; min-height: 60px; }
	/* Teto de 32px no mobile (o design achata todos); `min` preserva os que já
	são menores, como a FIEMG (30px). A inline-style define só a variável,
	então esta regra vence sem precisar de !important. */
	.ffc-mq__track img { height: min(var(--ffc-logo-h, 38px), 32px); }
}

/* ===========================================================================
   LINGUAGEM EDITORIAL  (prefixo `ffc-ed-`)
   ---------------------------------------------------------------------------
   Primitivas das páginas em estilo editorial/cartaz: display em Anton, palavra
   gigante vazada ao fundo, tarja rolante, fita, nota manuscrita, trama de
   meio-tom sobre foto.

   Nasceram duplicadas em `ffc-afb.css` (prefixo `afb-`) e `ffc-ferramentas-v2.css`
   (`fv2-`). Na 3ª página nesta linguagem (Vetor da Decisão) foram extraídas para
   cá, como manda a regra do tema — a partir daqui é este o lugar canônico.

   ⚠️ AFB e Ferramentas v2 ainda usam as cópias antigas. Migrar as duas para cá é
   trabalho pendente e deve ser feito num passo próprio, não junto de um porte:
   são duas páginas no ar, uma delas vendendo.

   Só funcionam dentro de um wrapper que declare `container-type: inline-size`
   (as medidas usam `cqw`). Cada página faz isso no seu próprio `.ffc-<pagina>`.
   =========================================================================== */

/* ---------- estrutura ---------- */
.ffc-ed-sec { position: relative; overflow: hidden; scroll-margin-top: 16px; }
.ffc-ed-pad { padding: clamp(56px, 6.8cqw, 108px) clamp(22px, 6cqw, 80px); }
.ffc-ed-maxw { max-width: 1180px; margin: 0 auto; width: 100%; position: relative; z-index: 4; }
.ffc-ed-narrow { max-width: 880px; width: 100%; }
.ffc-ed-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(26px, 4.5cqw, 58px); align-items: center; }
.ffc-ed-ctarow { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.ffc-ed-headrow { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }

/* ---------- tipografia ---------- */
/* A Anton tem UM peso só (400). O `.ffc-root mark` global pede 700, e para uma
   fonte sem o corte bold o browser sintetiza um negrito falso: engorda o traço
   por algoritmo, os contraforma fecham e a palavra sai borrada ao lado do resto
   do título. Dentro de um título de display o mark herda o peso real. */
.ffc-ed-disp mark {
	font-weight: inherit;
	/* `inline` pinta o fundo na CAIXA DE CONTEÚDO da fonte, que na Anton é bem
	   mais alta que as maiúsculas: dava 1,56× o tamanho da fonte e, com o
	   line-height apertado de título, o retângulo cobria as linhas de cima e de
	   baixo. Com `inline-block` a caixa passa a ser a do próprio elemento, e o
	   padding-top zero cola no topo das maiúsculas — 1,09×, sem invadir nada.
	   Anton é caixa alta aqui, então não há descendente para acomodar embaixo. */
	display: inline-block;
	padding: 0 .16em .05em;
	border-radius: 0;
}
.ffc-ed-disp { font-family: "Anton", "Space Grotesk", var(--font-display); font-weight: 400; text-transform: uppercase; line-height: 1.04; letter-spacing: .005em; }
.ffc-ed-d1 { font-size: clamp(1.95rem, 3.7cqw, 3.05rem); }
.ffc-ed-d2 { font-size: clamp(1.7rem, 3.2cqw, 2.5rem); }
.ffc-ed-d3 { font-size: clamp(1.15rem, 1.85cqw, 1.5rem); }
.ffc-ed-kick { font-weight: 700; font-size: .71rem; letter-spacing: .28em; text-transform: uppercase; color: var(--ffc-blue); line-height: 1.5; }
/* Os modificadores `--ondark` repetem o prefixo do seletor base de propósito:
   com um seletor só (0,1,0) eles perdem para `.ffc-<pagina> .ffc-ed-lede`
   (0,2,0) e o texto herda o cinza de fundo claro — 3.1:1 sobre preto, reprovado
   no AA. Já aconteceu uma vez. */
.ffc-root .ffc-ed-kick--ondark { color: rgba(255, 255, 255, .62); }
.ffc-root .ffc-ed-lede { font-size: clamp(1rem, 1.5cqw, 1.16rem); line-height: 1.6; color: var(--ffc-gray-600); }
.ffc-root .ffc-ed-lede--ondark { color: #c9c9c9; }
.ffc-root .ffc-ed-body { font-size: 1rem; line-height: 1.62; color: var(--ffc-gray-600); }
.ffc-root .ffc-ed-body--ondark { color: #c1c1c1; }

/* ---------- ornamentos ---------- */
.ffc-ed-tape { display: inline-block; align-self: flex-start; width: fit-content; background: var(--ffc-blue); color: #fff; font-weight: 700; font-size: clamp(.98rem, 1.7cqw, 1.3rem); padding: 9px 16px; transform: rotate(-1.5deg); }
.ffc-ed-tape--sm { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; padding: 7px 12px; }
.ffc-ed-tape--w { background: #fff; color: var(--ffc-blue); transform: rotate(1.5deg); }

.ffc-ed-note { display: inline-block; font-family: "Caveat", cursive; font-size: clamp(1.1rem, 1.7cqw, 1.45rem); line-height: 1; padding: 8px 15px 11px; border: 1.5px dashed currentColor; transform: rotate(-2deg); }
.ffc-ed-note--dark { background: rgba(0, 0, 0, .72); color: rgba(255, 255, 255, .95); }
.ffc-ed-note--light { background: #fff; color: #000; }

/* Palavra gigante vazada no rodapé da seção. Sempre `aria-hidden` no markup: é
   textura, não conteúdo. */
.ffc-ed-ghost { position: absolute; left: 50%; transform: translateX(-50%); bottom: -.3em; z-index: 1; font-family: "Anton", "Space Grotesk", var(--font-display); text-transform: uppercase; white-space: nowrap; line-height: 1; letter-spacing: -.02em; font-size: clamp(4rem, 16cqw, 13rem); color: transparent; -webkit-text-stroke: 2px rgba(0, 0, 0, .17); pointer-events: none; user-select: none; }
.ffc-ed-ghost--dark { -webkit-text-stroke: 2px rgba(255, 255, 255, .26); }

.ffc-ed-swoosh { position: absolute; z-index: 1; font-family: "Mrs Saint Delafield", cursive; line-height: .8; white-space: nowrap; pointer-events: none; user-select: none; }

/* Trama de linhas sobre a foto — o "meio-tom de jornal" do design. */
.ffc-ed-hlf { position: relative; overflow: hidden; }
.ffc-ed-hlf::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background-image: repeating-linear-gradient(0deg, rgba(0, 0, 0, .5) 0, rgba(0, 0, 0, .5) 1px, transparent 1px, transparent 3px); opacity: .3; mix-blend-mode: multiply; }
.ffc-ed-hlf--dark::after { background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, .26) 0, rgba(255, 255, 255, .26) 1px, transparent 1px, transparent 3px); mix-blend-mode: screen; opacity: .5; }
/* `--clean` = sem trama. Para print de tela e comparativo antes/depois, onde a
   textura atrapalharia a leitura do que está sendo mostrado. */
.ffc-ed-hlf--clean::after { display: none; }
.ffc-ed-hlf img { display: block; width: 100%; height: 100%; object-fit: cover; }

.ffc-ed-frame { background: #fff; padding: 10px; outline: 1.5px solid #000; box-shadow: 0 3px 0 rgba(0, 0, 0, .2); }
.ffc-ed-frame--dark { background: #0d0d0d; outline: 1.5px solid rgba(255, 255, 255, .5); box-shadow: none; }

/* ---------- tarja rolante ---------- */
.ffc-ed-ticker { position: relative; z-index: 4; overflow: hidden; background: var(--ffc-blue); color: #fff; }
.ffc-ed-ticker__track { display: flex; width: max-content; animation: ffc-ed-tick 30s linear infinite; }
.ffc-ed-ticker__set { display: flex; align-items: center; gap: clamp(24px, 3cqw, 42px); padding: 15px clamp(24px, 3cqw, 42px) 15px 0; font-weight: 700; font-size: .8rem; letter-spacing: .22em; text-transform: uppercase; white-space: nowrap; }
.ffc-ed-ticker__set span { display: flex; align-items: center; gap: clamp(24px, 3cqw, 42px); }
@keyframes ffc-ed-tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- selos de garantia ---------- */
.ffc-ed-assure { display: flex; flex-wrap: wrap; gap: 9px; }
.ffc-ed-assure span { font-size: .78rem; letter-spacing: .04em; padding: 10px 13px; border: 1.5px solid rgba(255, 255, 255, .34); color: #fff; background: #000; }

@media (prefers-reduced-motion: reduce) {
	.ffc-ed-ticker__track { animation: none; }
}