/* Tavrov · A FORJA (motion da marca, CEO 31/10: "ficou ótimo, pode implementar nos 2 sites").
   Nasceu no Motion Lab (artefato). Liga sozinho em qualquer página que carregue /forja.js; BR e EUA usam o mesmo arquivo. */
@import url("https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&display=swap");
/* enquanto a abertura não começa, a página fica coberta (sem piscar); some sozinha em 5 s se o JS falhar */
html.f-pend::after { content: ""; position: fixed; inset: 0; z-index: 10000; background: #1C110D; animation: fSolta .3s ease 5s forwards; }
@keyframes fSolta { to { opacity: 0; visibility: hidden; } }
/* touro de ouro 3D: fixo atrás da página; imponente no topo, vira marca d'água ao rolar */
  #mTouro { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 1.2s; }
  .m-touro3d #mTouro { opacity: 1; }
  /* o cartão vira vidro fumê escuro: o ouro aparece por trás, sem embaçar */
  .m-touro3d .hero-card { background: rgba(23,13,14,.74) !important; }
  #mTouro canvas { width: 100%; height: 100%; display: block; }


  /* conceito: a lição do ferreiro. o touro é marcado a ferro, o metal esfria em ouro, a peneira se balança na mão */
  :root { --m-gold: #E9C558; --m-gold-2: #F7E7A8; --m-gold-deep: #B4842B; --m-red: #C21F26; --m-ink: #140B0C;
          --m-brasa: #FF8A2A; --m-brasa-2: #FFD27A; --m-couro: #1C110D; --m-ease: cubic-bezier(.16,1,.3,1); }

  html.lenis, html.lenis body { height: auto; }
  .lenis.lenis-smooth { scroll-behavior: auto !important; }

  /* ---------- textura rústica: grão de couro/papel por cima de tudo ---------- */
  #mTextura { position: fixed; inset: 0; z-index: 9990; pointer-events: none; opacity: 0; transition: opacity .8s; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .9 0 0 0 0 .75 0 0 0 0 .55 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
  .m-textura #mTextura { opacity: .16; }
  .m-textura body { background-image: radial-gradient(120% 80% at 50% 0%, transparent 55%, rgba(0,0,0,.35) 100%); background-attachment: fixed; }

  /* ---------- abertura: marca a ferro ---------- */
  #mIntro { position: fixed; inset: 0; z-index: 10000; pointer-events: none; }
  #mIntro .half { position: absolute; left: 0; right: 0; height: 50.5%; background: var(--m-couro);
    background-image: radial-gradient(70% 90% at 50% 100%, #2A1912, transparent 70%); }
  #mIntro .top { top: 0; background-image: radial-gradient(70% 90% at 50% 100%, #2A1912, transparent 70%); }
  #mIntro .bot { bottom: 0; background-image: radial-gradient(70% 90% at 50% 0%, #2A1912, transparent 70%); }
  #mIntro .cut { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: linear-gradient(90deg, transparent, var(--m-brasa-2), var(--m-brasa), transparent); transform: scaleX(0); }
  #mIntro canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
  #mIntro .logo { position: absolute; inset: 0; display: grid; place-items: center; }
  #mIntro .logo > div { display: grid; justify-items: center; gap: 22px; }
  #mIntro svg { width: min(170px, 42vw); height: auto; overflow: visible; }
  #mIntro .word { font: 700 14px/1 "Hanken Grotesk", system-ui, sans-serif; letter-spacing: .7em; padding-left: .7em; color: var(--m-gold); }
  #mIntro .word span { display: inline-block; opacity: 0; }
  #mIntro .sub { font: italic 400 15px/1 "Cardo", Georgia, serif; color: #B49FA0; opacity: 0; letter-spacing: .04em; }
  html:not(.m-intro) #mIntro { display: none; }

  /* ---------- título ---------- */
  .hero h1 .ml { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
  .hero h1 .mli { display: inline-block; will-change: transform; }
  .m-hero .hero h1 em { color: var(--m-gold); animation: mBrasa 2.8s ease-in-out infinite alternate; }
  @keyframes mBrasa { from { text-shadow: 0 0 0 rgba(255,138,42,0); } to { text-shadow: 0 0 18px rgba(255,138,42,.32), 0 0 2px rgba(255,210,122,.4); } }

  /* ---------- fundo do hero: fagulhas ou grãos ---------- */
  .hero { position: relative; isolation: isolate; }
  .m-fundo { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

  /* ---------- costura de couro entre as seções ---------- */
  .m-costura { display: none; height: 18px; max-width: var(--maxw, 1180px); margin: 0 auto; padding-inline: max(16px, env(safe-area-inset-left, 0px)); }
  .m-costura-on .m-costura { display: block; }
  .m-costura svg { display: block; width: 100%; height: 18px; }

  /* ---------- faixa (letreiro) ---------- */
  #mFaixa { position: relative; overflow: hidden; background: #1A0F0C; padding-block: 22px; }
  #mFaixa::before, #mFaixa::after { content: ""; position: absolute; left: 0; right: 0; height: 2px;
    background: repeating-linear-gradient(90deg, rgba(233,197,88,.55) 0 12px, transparent 12px 20px); }
  #mFaixa::before { top: 7px; } #mFaixa::after { bottom: 7px; }
  html:not(.m-faixa) #mFaixa { display: none; }
  #mFaixa .trilho { display: flex; width: max-content; will-change: transform; }
  #mFaixa .grupo { display: flex; align-items: center; gap: 34px; padding-right: 34px; white-space: nowrap;
    font: italic 400 clamp(22px, 3.2vw, 34px)/1 "Cardo", Georgia, serif; color: #F3E8E7; }
  #mFaixa .grupo b { font-style: normal; font-weight: 700; color: var(--m-gold); }
  #mFaixa .grupo s { text-decoration-color: var(--m-red); text-decoration-thickness: 2px; color: #8f7a7c; }
  #mFaixa .ferro { width: 22px; height: 22px; flex: none; color: var(--m-gold-deep); }

  /* ---------- linha do processo ---------- */
  .m-processo .mini3 { position: relative; padding-left: 30px; flex-direction: column; gap: 22px; }
  .m-processo .mini3::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: rgba(233,197,88,.15); }
  .m-processo .mini3 .m-fio { position: absolute; left: 7px; top: 8px; width: 2px; height: calc(100% - 16px); background: linear-gradient(var(--m-brasa-2), var(--m-brasa), var(--m-red));
    transform-origin: 50% 0; transform: scaleY(0); box-shadow: 0 0 10px rgba(255,138,42,.5); }
  .m-processo .mini3 > div { position: relative; opacity: .35; transition: opacity .5s; }
  .m-processo .mini3 > div::before { content: ""; position: absolute; left: -29px; top: 9px; width: 14px; height: 14px; border-radius: 50%;
    background: var(--m-ink); border: 2px solid rgba(233,197,88,.35); transition: background .4s, border-color .4s, box-shadow .6s; }
  .m-processo .mini3 > div.m-aceso { opacity: 1; }
  .m-processo .mini3 > div.m-aceso::before { background: var(--m-gold); border-color: var(--m-gold); box-shadow: 0 0 0 5px rgba(255,138,42,.16), 0 0 16px rgba(255,138,42,.6); }

  /* ---------- peneira na mão ---------- */
  .m-peneira .sieve { cursor: grab; touch-action: pan-y; will-change: transform; user-select: none; }
  .m-peneira .sieve:active { cursor: grabbing; }
  .m-dica { display: none; color: var(--m-gold); font-weight: 600; }
  .m-peneira .m-dica { display: block; flex-basis: 100%; text-align: center; }

  /* ---------- cards e categorias: ferro quente ao passar ---------- */
  .m-tilt .card, .m-tilt .cattile { will-change: transform; }
  .m-tilt .cattile:hover { border-color: var(--m-brasa) !important; box-shadow: 0 0 0 1px rgba(255,138,42,.35), 0 10px 30px -12px rgba(255,138,42,.45) !important; }
  .m-tilt .cattile:hover .ic { color: var(--m-brasa); filter: drop-shadow(0 0 6px rgba(255,138,42,.6)); transition: color .3s, filter .3s; }

  /* ---------- botões: ouro enche (sem pular) ---------- */
  .m-botoes .btn, .m-botoes .nf-form button { position: relative; isolation: isolate; overflow: hidden; transition: color .35s !important; }
  .m-botoes .btn::before, .m-botoes .nf-form button::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--m-gold-deep), var(--m-gold));
    transform: scaleX(0); transform-origin: 100% 50%; transition: transform .5s var(--m-ease); }
  .m-botoes .btn:hover::before, .m-botoes .nf-form button:hover::before { transform: scaleX(1); transform-origin: 0 50%; }
  .m-botoes .btn:hover, .m-botoes .nf-form button:hover { color: var(--m-ink) !important; }

  /* ---------- faíscas do clique ---------- */
  #mFaiscas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 9995; pointer-events: none; }

  /* ---------- perguntas ---------- */
  .m-faq .faq details > p { overflow: hidden; }

  /* ---------- cabeçalho e barra ---------- */
  #mProg { position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 9999; transform-origin: 0 50%; transform: scaleX(0);
    background: linear-gradient(90deg, var(--m-red), var(--m-brasa), var(--m-brasa-2)); box-shadow: 0 0 10px rgba(255,138,42,.6); pointer-events: none; }
  html:not(.m-barra) #mProg { display: none; }
  .m-cabecalho .headrow { transition: height .5s var(--m-ease); }
  .m-cabecalho .brand .wordmark, .m-cabecalho .brand .mark { transition: transform .5s var(--m-ease); transform-origin: 0 50%; }
  @media (min-width: 981px) { .m-cabecalho.m-rolou .headrow { height: 62px; } }
  .m-cabecalho.m-rolou .brand .wordmark, .m-cabecalho.m-rolou .brand .mark { transform: scale(.84); }
  .m-cabecalho header { transition: transform .5s var(--m-ease), box-shadow .4s; }
  .m-cabecalho.m-rolou header { box-shadow: 0 12px 30px -20px rgba(0,0,0,.9); }
  .m-cabecalho.m-desce header { transform: translateY(-100%); }

  /* ---------- sem cara de IA (fixo): sem etiqueta em cada seção, nada centralizado, sem 3 selos iguais,
     cantos menos arredondados, sem bolinha verde de "online", chips e selos com cara de etiqueta de papel ---------- */
  .block .eyebrow, .hero .eyebrow { display: none !important; }
  .sec-head[style] { align-items: flex-start !important; text-align: left !important; }
  .sec-head[style] p { text-align: left !important; }
  .hero-trust { display: none !important; }
  :root, :root[data-theme="dark"] { --radius: 6px; }
  .cattile, .faq details, .news, .hero-card, .needfinder, .bot-panel, .drawer, .laudo { border-radius: 6px !important; }
  .bot-fab .dot { display: none !important; }
  .topbar .wrap { justify-content: flex-start !important; }
  .m-contras { display: block; margin-top: 30px; max-width: 560px; border-left: 2px solid var(--m-gold-deep); padding: 4px 0 4px 18px; }
  .m-contras .rot { font-size: 12.5px; color: #B49FA0; letter-spacing: .02em; }
  .m-contras q { display: block; margin: 8px 0 6px; font: italic 400 clamp(20px, 2.4vw, 25px)/1.3 "Cardo", Georgia, serif; color: #F3E8E7; quotes: "“" "”"; min-height: 2.6em; }
  .m-contras .de { font-size: 13px; color: #B49FA0; }
  .m-contras .de b { color: var(--m-gold); font-weight: 600; }

  /* ---------- peneira ao vivo: grãos = produtos reais; etiquetas de papel kraft para os reprovados ---------- */
  #mViva { padding-block: 56px 40px; }
  html:not(.m-viva) #mViva { display: none; }
  #mViva .wrap { display: grid; gap: 18px; }
  #mViva h2 { margin: 0; }
  #mViva .intro-txt { margin: 0; color: var(--muted, #B49FA0); max-width: 62ch; }
  #mViva .palco { position: relative; height: clamp(300px, 42vw, 440px); border-radius: 6px; overflow: hidden;
    background: radial-gradient(80% 70% at 50% 45%, #2A1513, #150B0B 75%); border: 1px solid rgba(233,197,88,.14); }
  #mViva canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  #mViva .placar { position: absolute; left: 16px; top: 14px; font: 400 13px/1.4 "Courier Prime", ui-monospace, monospace; color: #CDB98F; }
  #mViva .placar b { color: var(--m-gold); font-weight: 700; }
  #mViva .etqs { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 22px 18px; align-items: start; min-height: 40px; }
  .m-etq { position: relative; padding: 22px 16px 14px 16px; color: #2B1A10; border-radius: 3px 3px 10px 3px;
    background: #CFAE79 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .22 0 0 0 0 .1 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    box-shadow: 0 10px 24px -14px rgba(0,0,0,.9), inset 0 0 22px rgba(90,55,20,.35); font: 400 13px/1.45 "Courier Prime", ui-monospace, monospace; transform-origin: 50% -14px; }
  .m-etq::before { content: ""; position: absolute; top: 8px; left: 50%; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%;
    background: #150B0B; box-shadow: 0 0 0 3px #B8925C; }
  .m-etq::after { content: ""; position: absolute; top: -16px; left: 50%; width: 1.5px; height: 26px; background: #8B6A3E; transform: rotate(8deg); transform-origin: 50% 100%; }
  .m-etq small { display: block; font-weight: 700; letter-spacing: .12em; font-size: 10.5px; color: #8E1519; text-transform: uppercase; }
  .m-etq b { display: block; margin: 4px 0 6px; font-size: 14px; line-height: 1.3; }
  .m-etq p { margin: 0; font-size: 12.5px; }
  .m-etq time { display: block; margin-top: 8px; font-size: 11px; opacity: .75; }

  /* ---------- placa de madeira marcada a ferro ---------- */
  #mPlaca { position: relative; overflow: hidden; height: 240px; display: grid; place-items: center;
    background:
      linear-gradient(180deg, rgba(0,0,0,.45), transparent 22%, transparent 78%, rgba(0,0,0,.5)),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 240' preserveAspectRatio='none'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .09' numOctaves='4' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .19 0 0 0 0 .1 0 0 0 1.2 -.15'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E"),
      #4A2C19; background-size: 100% 100%, 100% 100%, auto; background-repeat: no-repeat; border-block: 1px solid #1E110A; }
  html:not(.m-placa) #mPlaca { display: none; }
  #mPlaca .junta { position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: rgba(15,8,4,.55); box-shadow: 0 1px 0 rgba(255,210,150,.08); }
  #mPlaca .marca { position: relative; z-index: 1; display: grid; justify-items: center; gap: 30px; transform: translateY(-14px); text-align: center; }
  #mPlaca .halo { position: absolute; left: 50%; top: 40px; width: 170px; height: 150px; margin: -75px 0 0 -85px; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(20,8,3,.75), rgba(40,18,8,.35) 60%, transparent); filter: blur(6px); opacity: 0; }
  #mPlaca svg { width: 92px; height: auto; position: relative; overflow: visible; }
  #mPlaca .bull { fill: #1C0D06; }
  #mPlaca .txt { position: relative; font: italic 700 clamp(24px, 3.4vw, 34px)/1 "Cardo", Georgia, serif; letter-spacing: .02em; white-space: nowrap; }
  #mPlaca .txt span { display: inline-block; white-space: pre; color: rgba(22,10,4,.9); text-shadow: 0 1px 0 rgba(255,214,160,.14); opacity: 0; }
  #mPlaca canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }