/* ===========================================================
   Destravando a Criação — Boreal Art Film / Fernando Celani
   Direção: Brand-First cinematográfico.
   Base P&B extraída do logo real (wordmark branco puro sobre preto).
   Acento único: verde-aurora (Boreal = aurora boreal).
   =========================================================== */

:root{
  --bg:#08090A;
  --bg-2:#0E1012;
  --surface:#14171A;
  --line:rgba(245,245,243,.10);
  --line-2:rgba(245,245,243,.20);

  --ink:#F5F5F3;
  --muted:#9A9D9F;
  --faint:#63676A;

  --aurora:#4EC06A;
  --aurora-br:#61D27C;
  --teal:#38C8C4;

  --ff-disp:'Bebas Neue',Impact,sans-serif;
  --ff-body:'Manrope',system-ui,-apple-system,sans-serif;
  --ff-mono:'JetBrains Mono',ui-monospace,monospace;

  --wrap:1140px;
  --r:14px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--ff-body);font-size:17px;line-height:1.62;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
h1,h2,h3{margin:0;line-height:.92;letter-spacing:.005em;text-wrap:balance}
p{margin:0 0 1.1em}
ul,ol{margin:0;padding:0;list-style:none}

::selection{background:rgba(78,192,106,.30);color:#fff}
:focus-visible{outline:2px solid var(--aurora);outline-offset:3px;border-radius:4px}

.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--aurora);color:#04150A;padding:12px 18px;font-weight:700}
.skip:focus{left:12px;top:12px}

.wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto}

/* grão de filme */
.grain{
  position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.32;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* timecode */
.tc{
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--aurora);margin:0 0 26px;
}

.eyebrow{
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--faint);margin:0 0 22px;
}
.eyebrow::before{
  content:"";display:inline-block;width:26px;height:1px;background:var(--aurora);
  vertical-align:middle;margin-right:12px;
}

/* ---------- NAV ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  transition:background .3s ease,border-color .3s ease,backdrop-filter .3s ease;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{background:rgba(8,9,10,.86);backdrop-filter:blur(16px);border-bottom-color:var(--line)}
.nav-in{
  width:min(100% - 40px,var(--wrap));margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 0;
}
.nav-brand img{width:168px;height:auto}

/* ---------- BOTÕES ---------- */
.btn{
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;text-decoration:none;text-align:center;
  background:var(--aurora);color:#04150A;
  font-weight:800;letter-spacing:.01em;border-radius:999px;
  padding:16px 30px;line-height:1.2;
  box-shadow:0 10px 30px -14px rgba(78,192,106,.85);
  transition:transform .2s ease,background .2s ease,box-shadow .2s ease;
}
.btn:hover{background:var(--aurora-br);transform:translateY(-2px);box-shadow:0 16px 40px -14px rgba(78,192,106,.95)}
.btn:active{transform:translateY(0)}
.btn small{font-weight:600;font-size:12.5px;opacity:.72;letter-spacing:.02em}
.btn-sm{padding:11px 20px;font-size:14px;border-radius:999px}
.btn-lg{font-size:18px;padding:20px 38px}
.btn-xl{font-size:19px;padding:22px 44px;width:100%;max-width:440px}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;padding:140px 0 90px;isolation:isolate}
.hero-media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 42%;filter:grayscale(.28) contrast(1.08)}
.hero-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(8,9,10,.86) 0%,rgba(8,9,10,.44) 32%,rgba(8,9,10,.80) 72%,var(--bg) 100%),
    radial-gradient(ellipse 60% 50% at 78% 8%,rgba(78,192,106,.16),transparent 70%);
}
.hero-in{width:min(100% - 40px,var(--wrap));margin-inline:auto;position:relative}

h1{font-family:var(--ff-disp);font-weight:400;text-transform:uppercase}
.h1-kicker{
  display:block;font-family:var(--ff-body);font-weight:700;text-transform:none;
  font-size:clamp(15px,1.6vw,19px);letter-spacing:.06em;color:var(--aurora);
  margin-bottom:16px;line-height:1.3;
}
.h1-main{display:block;font-size:clamp(44px,8.4vw,116px);letter-spacing:.012em}
.h1-main em{font-style:normal;color:var(--aurora);display:inline-block}

.hero-sub{
  max-width:56ch;margin:26px 0 0;font-size:clamp(16px,1.9vw,20px);
  color:var(--muted);font-weight:300;line-height:1.66;
}
.hero-cta{margin:38px 0 0}
.hero-meta{display:flex;flex-wrap:wrap;gap:12px 34px;margin:38px 0 0;font-size:14px;color:var(--muted)}
.hero-meta li{display:flex;align-items:baseline;gap:9px}
.hero-meta strong{font-family:var(--ff-disp);font-size:26px;color:var(--ink);line-height:1}

.scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);width:1px;height:52px;background:var(--line-2);overflow:hidden}
.scroll-hint span{position:absolute;inset:0;background:var(--aurora);animation:sh 2.4s ease-in-out infinite}
@keyframes sh{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* ---------- MARCAS (faixa clara — quebra editorial) ---------- */
.brands{
  background:var(--ink);padding:44px 0 46px;position:relative;
  box-shadow:inset 0 1px 0 rgba(0,0,0,.08),inset 0 -1px 0 rgba(0,0,0,.08);
}
.brands-label{
  text-align:center;font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.3em;
  text-transform:uppercase;color:#6B6F72;margin:0 0 30px;
}
.brands-list{
  /* escala base — cada logo recebe um fator para equalizar a ÁREA ÓPTICA,
     senão wordmark largo (Netshoes) fica gigante ao lado de escudo quadrado (PSG). */
  --esc:clamp(23px,2.8vw,38px);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:20px clamp(18px,2.6vw,36px);
  width:min(100% - 40px,var(--wrap));margin-inline:auto;
}
.brands-list li{display:flex;align-items:center}
.brands-list img{
  width:auto;height:calc(var(--esc) * var(--f,1));
  /* padrão P&B: os arquivos guardam a cor oficial; o cinza é só apresentação.
     Como a base é colorida, o grayscale gera tons reais em vez de preto chapado. */
  filter:grayscale(1);opacity:.58;
  transition:filter .35s ease,opacity .35s ease,transform .35s ease;
}
.brands-list li:hover img{filter:grayscale(0);opacity:1;transform:scale(1.07)}

/* fatores por proporção — quanto mais largo o logo, menor a altura */
.brands-list img[alt="Paris Saint-Germain"]{--f:1}
.brands-list img[alt="Roland Garros"]{--f:1}
.brands-list img[alt="Puma"]{--f:.91}
.brands-list img[alt="Adidas"]{--f:.88}
.brands-list img[alt="Under Armour"]{--f:.83}
.brands-list img[alt="Red Bull"]{--f:.83}
.brands-list img[alt="Nike"]{--f:.81}
.brands-list img[alt="Asics"]{--f:.67}
.brands-list img[alt="Ambev"]{--f:.63}
.brands-list img[alt="Manchester City"]{--f:.58}
.brands-list img[alt="Netshoes"]{--f:.51}

/* ---------- SEÇÕES ---------- */
.sec{padding:clamp(58px,9vw,132px) 0;position:relative}
.sec h2{
  font-family:var(--ff-disp);font-weight:400;text-transform:uppercase;
  font-size:clamp(34px,5.6vw,72px);letter-spacing:.012em;margin-bottom:26px;
}
.sec h2 em{font-style:normal;color:var(--aurora)}
.sec h2.big{font-size:clamp(40px,7.4vw,96px)}
.lead{max-width:60ch;text-wrap:pretty;font-size:clamp(16px,1.8vw,19px);color:var(--muted);font-weight:300}

/* DOR */
.dor{background:var(--bg-2)}
.dor-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:46px}
.dor-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:30px 26px;transition:border-color .25s ease,transform .25s ease;
}
.dor-card:hover{border-color:rgba(78,192,106,.42);transform:translateY(-3px)}
.dor-n{
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.2em;color:var(--aurora);
  display:block;margin-bottom:16px;
}
.dor-card p{margin:0;font-size:15.5px;color:var(--muted);line-height:1.6}
.dor-card strong{color:var(--ink);font-weight:700}
.dor-close{
  margin:48px auto 0;max-width:66ch;text-align:center;
  font-size:clamp(17px,2.1vw,22px);font-weight:300;line-height:1.6;color:var(--ink);
}
.dor-close em{font-style:normal;color:var(--aurora);font-weight:700}

/* MECANISMO */
.pilares{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin:52px 0 0}
.pilares li{border-top:1px solid var(--line-2);padding-top:24px}
.pil-n{font-family:var(--ff-mono);font-size:11px;letter-spacing:.2em;color:var(--aurora)}
.pilares h3{
  font-family:var(--ff-disp);font-weight:400;text-transform:uppercase;
  font-size:clamp(28px,3.6vw,40px);margin:14px 0 10px;
}
.pilares p{margin:0;color:var(--muted);font-size:15.5px}
.mec-close{margin-top:52px;font-size:clamp(17px,2vw,21px);color:var(--ink);font-weight:300}

/* AUTORIDADE */
.autor{background:var(--bg-2)}
.autor-in{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.autor-foto{margin:0;position:relative}
.autor-foto img{
  width:100%;border-radius:var(--r);border:1px solid var(--line);
  filter:grayscale(.18) contrast(1.05);
}
.autor-foto figcaption{
  font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);margin-top:14px;
}
.autor-txt p{color:var(--muted);font-weight:300;font-size:16.5px}
.autor-txt strong{color:var(--ink);font-weight:700}
.autor-nums{display:flex;flex-wrap:wrap;gap:28px 46px;margin-top:38px;padding-top:30px;border-top:1px solid var(--line)}
.autor-nums li{display:flex;flex-direction:column;gap:4px}
.autor-nums b{font-family:var(--ff-disp);font-size:clamp(38px,5vw,58px);line-height:.9;color:var(--aurora);font-weight:400}
.autor-nums span{font-size:12.5px;color:var(--faint);letter-spacing:.03em}

/* MÓDULOS */
.mod-list{margin-top:50px;border-top:1px solid var(--line)}
.mod{
  display:grid;grid-template-columns:96px 1fr;gap:clamp(16px,3vw,38px);
  padding:30px 0;border-bottom:1px solid var(--line);align-items:start;
  transition:background .25s ease,padding-left .25s ease;
}
.mod:hover{background:rgba(78,192,106,.045);padding-left:14px}
.mod-n{font-family:var(--ff-mono);font-size:13px;letter-spacing:.16em;color:var(--aurora);padding-top:6px}
.mod h3{
  font-family:var(--ff-disp);font-weight:400;text-transform:uppercase;
  font-size:clamp(24px,3.2vw,36px);margin:0 0 8px;
}
.mod p{margin:0;color:var(--muted);font-size:15.5px;max-width:62ch}
.mod.is-bonus{background:rgba(78,192,106,.07)}
.mod.is-bonus h3{color:var(--aurora)}

/* TRANSFORMAÇÃO */
.transf{isolation:isolate;text-align:center;padding-block:clamp(74px,12vw,180px)}
.transf-media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.transf-media img{width:100%;height:100%;object-fit:cover;filter:grayscale(.6) contrast(1.1) brightness(.5)}
.transf-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,var(--bg) 0%,rgba(8,9,10,.66) 40%,rgba(8,9,10,.72) 60%,var(--bg) 100%);
}
.transf-in .lead{margin-inline:auto}

/* OFERTA */
.oferta{background:var(--bg-2)}
.card-oferta{
  background:linear-gradient(170deg,var(--surface),#0B0D0F);
  border:1px solid var(--line-2);border-radius:20px;
  padding:clamp(34px,5vw,62px);text-align:center;
  max-width:720px;margin-inline:auto;position:relative;overflow:hidden;
}
.card-oferta::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--aurora),transparent);
}
.card-oferta h2{margin-bottom:10px}
.of-desc{color:var(--muted);font-size:15.5px;margin-bottom:34px}
.preco{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:34px}
.preco-de{font-family:var(--ff-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.preco-val{font-family:var(--ff-disp);font-size:clamp(76px,13vw,132px);line-height:.84;color:var(--ink)}
.preco-val i{font-style:normal;font-size:.36em;vertical-align:super;color:var(--aurora);margin-right:6px}
.preco-parc{font-size:14.5px;color:var(--muted)}
.preco-parc strong{color:var(--ink)}
.card-oferta .btn-xl{margin-inline:auto}
.of-inc{margin-top:34px;display:grid;gap:11px;text-align:left;max-width:420px;margin-inline:auto}
.of-inc li{position:relative;padding-left:28px;font-size:15px;color:var(--muted)}
.of-inc li::before{
  content:"";position:absolute;left:4px;top:8px;width:9px;height:9px;border-radius:50%;
  background:var(--aurora);box-shadow:0 0 0 4px rgba(78,192,106,.16);
}

.garantia{
  display:flex;align-items:center;gap:clamp(20px,3vw,34px);
  max-width:720px;margin:32px auto 0;padding:28px 30px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
}
.gar-selo{
  flex:0 0 auto;width:92px;height:92px;border-radius:50%;
  border:2px dashed rgba(78,192,106,.55);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
}
.gar-selo b{font-family:var(--ff-disp);font-size:40px;line-height:.8;color:var(--aurora);font-weight:400}
.gar-selo span{font-family:var(--ff-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--aurora)}
.garantia h3{font-family:var(--ff-disp);font-weight:400;text-transform:uppercase;font-size:clamp(22px,3vw,30px);margin-bottom:8px}
.garantia p{margin:0;color:var(--muted);font-size:15px}

/* FAQ */
.faq-list{margin-top:44px;max-width:820px}
.faq-list details{border-bottom:1px solid var(--line);padding:4px 0}
.faq-list summary{
  cursor:pointer;list-style:none;padding:22px 40px 22px 0;position:relative;
  font-weight:700;font-size:clamp(16px,2vw,19px);
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{
  content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font-family:var(--ff-disp);font-size:30px;color:var(--aurora);line-height:1;transition:transform .25s ease;
}
.faq-list details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq-list details p{margin:0 0 22px;color:var(--muted);max-width:66ch;font-size:15.5px}

/* CTA FINAL */
.final{isolation:isolate;text-align:center;padding-block:clamp(70px,11vw,168px)}
.final-media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.final-media img{width:100%;height:100%;object-fit:cover;filter:grayscale(.75) brightness(.42)}
.final-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,var(--bg) 0%,rgba(8,9,10,.7) 45%,var(--bg) 100%),
             radial-gradient(ellipse 50% 60% at 50% 50%,rgba(78,192,106,.13),transparent 70%);
}
.final h2{margin-bottom:40px}
.final .btn-xl{margin-inline:auto}

/* RODAPÉ */
.rodape{border-top:1px solid var(--line);padding:52px 0 40px;background:var(--bg-2)}
.rod-in{display:grid;grid-template-columns:auto 1fr auto;gap:32px;align-items:start}
.rod-logo{width:150px;opacity:.72}
.rod-txt p{margin:0 0 7px;font-size:13.5px;color:var(--muted)}
.rod-legal{color:var(--faint);font-size:12.5px;max-width:62ch}
.rod-meta{text-align:right;display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.rod-meta a{color:var(--aurora);text-decoration:none;font-weight:700;font-size:14px}
.rod-meta a:hover{text-decoration:underline}
.rod-credit{margin:0;font-size:12px;color:var(--faint)}

/* STICKY CTA (mobile) */
.sticky-cta{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:60;
  display:none;align-items:center;justify-content:center;gap:10px;
  background:var(--aurora);color:#04150A;text-decoration:none;
  font-weight:800;font-size:16px;padding:16px 22px;border-radius:999px;
  box-shadow:0 12px 34px -10px rgba(0,0,0,.8);
  transform:translateY(130%);transition:transform .32s cubic-bezier(.22,1,.36,1);
}
.sticky-cta.is-on{transform:translateY(0)}
.sticky-cta span{font-size:20px;line-height:1}

/* ---------- REVEAL ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1)}
.reveal.is-in{opacity:1;transform:none}

/* ---------- RESPONSIVO ---------- */
@media (max-width:900px){
  .autor-in{grid-template-columns:1fr;gap:34px}
  .autor-foto{max-width:420px}
  .rod-in{grid-template-columns:1fr;gap:22px}
  .rod-meta{text-align:left;align-items:flex-start}
}
@media (max-width:680px){
  body{font-size:16px}
  .wrap,.nav-in,.hero-in,.brands-list{width:min(100% - 32px,var(--wrap))}

  /* Ritmo: as dobras de passagem respiram menos; as de decisão, mais. */
  .dor,.mec,.mods,.faq{padding-block:56px}
  .autor{padding-block:52px 56px}
  .oferta{padding-block:70px}          /* âncora de conversão */

  .hero{min-height:auto;padding:112px 0 64px}
  .hero-sub{font-size:16.5px;margin-top:20px}
  .hero-cta{margin-top:30px}
  .hero-meta{gap:9px 20px;margin-top:28px;font-size:13.5px}
  .hero-meta strong{font-size:22px}
  .nav .btn-sm{display:none}
  .nav-brand{display:flex;align-items:center;min-height:44px}   /* touch target */
  .nav-brand img{width:132px}

  .sec h2{margin-bottom:20px}
  .lead{font-size:16px}

  /* Dor: lista densa, não pilha de cards */
  .dor-grid{gap:0;margin-top:30px;border-top:1px solid var(--line)}
  .dor-card{
    background:none;border:0;border-bottom:1px solid var(--line);
    border-radius:0;padding:18px 0;display:grid;
    grid-template-columns:30px 1fr;gap:0 12px;align-items:start;
  }
  .dor-card:hover{transform:none;border-color:var(--line)}
  .dor-n{margin:0;padding-top:3px;font-size:10.5px}
  .dor-card p{font-size:16px;line-height:1.55}
  .dor-close{margin-top:32px;font-size:17px;text-align:left}

  .pilares{gap:0;margin-top:34px}
  .pilares li{border-top:0;border-bottom:1px solid var(--line);padding:18px 0}
  .pilares li:first-child{border-top:1px solid var(--line)}
  .pilares h3{margin:8px 0 6px}
  .pilares p{font-size:15.5px}
  .mec-close{margin-top:34px;font-size:17px}

  /* a foto é 4:5; em 390px ela sozinha comia quase uma tela inteira */
  .autor-foto{max-width:74%;margin-inline:auto}
  .autor-foto figcaption{text-align:center;font-size:9.5px;margin-top:10px}
  .autor-txt p{font-size:16px}


  .mod{grid-template-columns:1fr;gap:6px;padding:20px 0}
  .mod-n{padding-top:0}
  .mod:hover{padding-left:0;background:none}
  .mod.is-bonus{background:rgba(78,192,106,.07);padding-inline:16px;border-radius:var(--r)}
  .mod p{font-size:15.5px}

  .card-oferta{padding:34px 22px}
  .of-inc li{font-size:15.5px}
  .garantia{flex-direction:column;text-align:center;gap:18px;padding:26px 22px}

  .faq-list summary{padding:20px 36px 20px 0;font-size:17px}
  .faq-list details p{font-size:15.5px;margin-bottom:20px}

  .final h2{margin-bottom:30px}
  /* os <br> foram escritos para desktop; em 390px criam linhas que encostam nas bordas */
  .dor h2 br,.mec h2 br,.transf h2 br,.final h2 br,.autor-txt h2 br{display:none}

  .rodape{padding:42px 0 96px}
  .rod-meta a{min-height:44px;display:inline-flex;align-items:center}  /* touch target */

  .sticky-cta{display:flex}
  .btn-xl{font-size:17px;padding:19px 26px}
}
}

/* ---------- ACESSIBILIDADE ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
  .scroll-hint{display:none}
  .sticky-cta{transition:none}
}
@media (prefers-contrast:more){
  :root{--muted:#CFD2D4;--faint:#A4A8AB;--line:rgba(245,245,243,.28)}
}

/* ---------- CREDENCIAIS (faixa informacional, dobra de autoridade) ---------- */
.creds{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:14px;margin-top:clamp(40px,5vw,60px);
}
.cred{
  position:relative;overflow:hidden;border-radius:var(--r);
  border:1px solid var(--line);background:var(--surface);
  padding:28px 26px 26px;isolation:isolate;
  transition:border-color .3s ease,transform .3s ease;
}
.cred-larga{grid-column:1 / -1}

/* imagem do portfólio como TEXTURA, não como protagonista */
.cred::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background-image:var(--bgimg);background-size:cover;background-position:center 35%;
  opacity:.26;filter:grayscale(.3);
  transition:opacity .4s ease,transform .6s cubic-bezier(.22,1,.36,1);
}
.cred::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(160deg,rgba(20,23,26,.86),rgba(8,9,10,.94));
}
.cred:hover{border-color:rgba(78,192,106,.42);transform:translateY(-3px)}
.cred:hover::before{opacity:.32;transform:scale(1.05)}

.cred-n{
  display:block;font-family:var(--ff-disp);font-weight:400;
  font-size:clamp(40px,5vw,62px);line-height:.86;color:var(--aurora);
  margin-bottom:14px;letter-spacing:.01em;
}
.cred-tag{
  display:block;font-family:var(--ff-mono);font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--aurora);margin-bottom:14px;
}
.cred h3{
  font-family:var(--ff-disp);font-weight:400;text-transform:uppercase;
  font-size:clamp(20px,2.3vw,27px);line-height:1.02;letter-spacing:.012em;
  margin-bottom:10px;
}
.cred-larga h3{font-size:clamp(19px,2.2vw,29px);max-width:30ch}
.cred p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.55}
.cred-larga p{max-width:62ch}

@media (max-width:900px){
  .creds{grid-template-columns:repeat(2,1fr)}
  .cred-larga{grid-column:1 / -1}
}

/* Mobile: card empilhado vira linha de leitura. Precisa vir DEPOIS da
   definição base, senão a cascata devolve o card. */
@media (max-width:680px){
  .creds{grid-template-columns:1fr;gap:0;margin-top:32px;border-top:1px solid var(--line)}
  .cred{
    grid-column:auto;border:0;border-bottom:1px solid var(--line);
    border-radius:0;background:none;padding:15px 0;display:block;
  }
  .cred:hover{transform:none;border-color:var(--line)}
  .cred::before,.cred::after{display:none}   /* sem textura na versão densa */
  .cred-n{
    display:inline-block;margin:0 10px 0 0;font-size:27px;line-height:1;
    vertical-align:-2px;
  }
  .cred h3{display:inline;font-size:16px;letter-spacing:.02em}
  .cred p{margin-top:7px;font-size:14.5px;line-height:1.5}
  .cred-tag{margin-bottom:6px}
  .cred-larga h3{display:block;font-size:17px;line-height:1.18;max-width:none}
}