/* Landing de "IA no Mercado Financeiro"

   Registro escuro e quente, em camadas: fundo profundo, produto grande no hero,
   cartoes arredondados sobre o escuro, luz difusa ao fundo.

   A paleta e a do livro, direcao "Oficina". O escuro #1C1714 com ambar #F2A03D
   nao e escolha de moda: e o tratamento que o miolo da aos 183 blocos de
   prompt, entao a pagina e o livro sao feitos do mesmo material. */

:root{
  --papel:#F8F2E7; --papel-alto:#FFFDF8; --tinta:#221C18;
  --laranja:#D14E14; --terminal:#F2A03D;

  /* camadas do escuro, para o cartao se descolar do fundo */
  /* claro e o padrao. O escuro so nas faixas que cortam a pagina, que e o
     mesmo papel que a faixa de terminal cumpre nas 656 paginas do miolo. */
  --fundo:#F8F2E7;        /* fundo padrao */
  --fundo-alto:#FFFDF8;   /* secao alternada */
  --cartao:#FFFDF8;
  --fio:#DCD1BE;
  --texto:#221C18;
  --texto-fraco:#726659;   /* 5,0:1 sobre o creme; o #7A6E64 dava 4,4 */

  /* camadas do escuro, so para as faixas */
  --n0:#14100E; --n1:#1C1714; --n2:#241E19; --n3:#2E2721; --borda:#3A322B;
  --claro:#E4DACB; --claro-fraco:#9C8F80;

  --max:1160px; --estreito:780px;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0; background:var(--fundo); color:var(--texto);
  font-family:"Source Sans 3","Segoe UI",system-ui,sans-serif;
  font-size:18px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.wrap{max-width:var(--max);margin:0 auto;padding:0 28px;position:relative;z-index:2}
.wrap-estreito{max-width:var(--estreito)}

h1,h2,h3{font-family:"Archivo",sans-serif;letter-spacing:-.024em;margin:0;
  color:var(--texto)}
h1{font-weight:800;font-size:clamp(36px,5.2vw,64px);line-height:1.04}
h2{font-weight:800;font-size:clamp(28px,4vw,46px);line-height:1.08;margin:0 0 22px}
h3{font-weight:700;font-size:20px;line-height:1.28;margin:0 0 10px}
.h2-centro{text-align:center;margin-bottom:40px}

p{margin:0 0 18px}
b{font-weight:700;color:var(--texto)}

.olho{font-family:"IBM Plex Mono",monospace;font-size:12.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:#B0450F;margin:0 0 16px}
.olho-claro{color:var(--terminal)}
.mono{font-family:"IBM Plex Mono",monospace;font-size:12.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--texto-fraco)}

.lead{font-size:clamp(18px,2vw,21px);line-height:1.58;max-width:62ch;color:var(--texto)}
.lead-fecho{margin-top:26px}
.lead-claro{color:var(--texto)}

/* ---------- topo ---------- */

.faixa{background:var(--n0);padding:13px 28px;position:relative;z-index:3;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;border-bottom:1px solid var(--borda)}
.etq{display:inline-block;background:var(--laranja);color:#FFF6EF;
  font-family:"Archivo",sans-serif;font-size:11.5px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;padding:5px 11px;border-radius:4px}

/* ---------- hero ----------
   Fundo claro com luz quente ao fundo. A headline e longa de proposito: ela
   carrega a pergunta inteira, e a segunda metade vem em laranja para o olho
   pousar nela. */

.hero{position:relative;overflow:hidden;padding-bottom:82px;
  background:
    radial-gradient(1000px 700px at 84% 8%, rgba(210,78,20,.13), transparent 62%),
    radial-gradient(760px 560px at 4% 96%, rgba(242,160,61,.14), transparent 60%),
    var(--fundo)}
.hero .wrap{padding-top:96px;max-width:1000px}
.hero h1{font-size:clamp(31px,4.5vw,56px);line-height:1.1;letter-spacing:-.028em;
  margin:0 0 30px;max-width:20ch}
.hero h1 em{font-style:normal;color:var(--laranja)}
.hero .lead{font-size:clamp(18px,2.1vw,22px);max-width:56ch}

.impacto{margin:30px 0 0;padding-left:20px;border-left:4px solid var(--laranja);
  font-family:"Archivo",sans-serif;font-weight:700;font-size:clamp(18px,2.1vw,22px);
  line-height:1.4;color:var(--texto)}
.impacto b{color:var(--laranja)}

/* a capa, dentro da faixa escura da secao "a solucao" */
.produto-linha{display:grid;grid-template-columns:300px 1fr;gap:48px;
  align-items:center}
.produto{position:relative}
.produto img{display:block;width:100%;height:auto;border-radius:6px;
  box-shadow:0 40px 82px rgba(0,0,0,.55), 0 8px 22px rgba(0,0,0,.35);
  transform:rotate(-2.2deg)}
.produto-brilho{position:absolute;inset:-14% -20%;z-index:-1;border-radius:50%;
  background:radial-gradient(circle, rgba(242,160,61,.20), transparent 66%);
  filter:blur(12px)}

/* ---------- chamada ---------- */

.cta-bloco{margin-top:34px}
.cta{display:inline-block;background:var(--laranja);color:#FFF6EF;
  font-family:"Archivo",sans-serif;font-weight:800;font-size:19px;
  letter-spacing:-.01em;text-decoration:none;padding:19px 34px;border-radius:10px;
  box-shadow:0 6px 0 #93370E, 0 18px 34px rgba(0,0,0,.34);
  transition:transform .14s,box-shadow .14s}
.cta:hover{transform:translateY(3px);
  box-shadow:0 3px 0 #93370E, 0 12px 24px rgba(0,0,0,.34)}
.cta:focus-visible{outline:3px solid var(--terminal);outline-offset:4px}
.cta-sub{font-size:15px;color:var(--texto-fraco);margin:14px 0 0;max-width:46ch}
.cta-bloco-grande{margin:32px 0 46px}
.cta-grande{font-size:22px;padding:23px 44px}
@media (prefers-reduced-motion:reduce){
  .cta{transition:none} .cta:hover{transform:none}
}

/* ---------- seções ---------- */

.sec{padding:88px 0;position:relative}
.sec-alto{background:var(--fundo-alto);
  border-top:1px solid var(--fio);border-bottom:1px solid var(--fio)}

/* as faixas escuras: mesmo tratamento das 183 faixas de prompt do miolo */
.sec-escura{background:var(--n1);color:var(--claro)}
.sec-escura h2,.sec-escura h3,.sec-escura b{color:var(--papel)}
.sec-escura .lead,.sec-escura p{color:var(--claro)}

.sec-compra{border-top:1px solid var(--fio);
  background:
    radial-gradient(760px 520px at 50% 0%, rgba(210,78,20,.14), transparent 66%),
    var(--fundo-alto)}

/* ---------- grades e cartões ---------- */

.grade-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:40px 0 0}
.grade-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin:40px 0 0}
.grade-2-topo{margin-top:0}

.card{background:var(--cartao);border:1px solid var(--fio);border-radius:16px;
  padding:28px}
.card h3{color:var(--texto)}
.card p{font-size:16.5px;line-height:1.56;margin:0;color:var(--texto)}
.card-sim{border-color:var(--verde);border-width:2px}
.card-sim h3{color:var(--verde)}
.card-nao h3{color:var(--texto-fraco)}
.card-raso{background:transparent;border-style:dashed}
.card-raso h3,.card-raso .lista li{color:var(--texto-fraco)}
.card-fundo{border-color:var(--laranja);border-width:2px}
.card-fundo h3{color:var(--laranja)}

/* cartao dentro de faixa escura */
.card-escuro{background:var(--n2);border:1px solid var(--borda);
  border-radius:16px;padding:28px}
.card-escuro h3{color:var(--papel)}
.card-escuro p{font-size:16.5px;line-height:1.56;margin:0;color:var(--claro)}
.num{font-family:"Archivo",sans-serif;font-weight:800;font-size:22px;
  color:var(--terminal);margin:0 0 10px !important;letter-spacing:-.02em}

.lista{margin:0;padding-left:20px}
.lista li{font-size:16.5px;line-height:1.52;margin-bottom:11px;color:var(--texto)}
.sec-escura .lista li{color:var(--claro)}

/* ---------- vitrine de diagramas ---------- */

.vitrine{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:40px 0 0}
.vit{background:var(--papel);border-radius:14px;overflow:hidden;
  border:1px solid var(--borda);box-shadow:0 22px 44px rgba(0,0,0,.34);
  transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s ease}
.vit:hover{transform:translateY(-7px);box-shadow:0 30px 56px rgba(0,0,0,.44)}
.vit img{display:block;width:100%;height:176px;object-fit:cover;object-position:top left}
.vit p{margin:0;padding:15px 18px 18px;font-size:14.5px;line-height:1.42;
  color:var(--tinta);background:var(--papel)}
.vit b{color:var(--tinta)}

/* ---------- tabela da prova ---------- */

.tabela-prova{margin:36px 0 0;background:var(--cartao);border:2px solid var(--texto);
  border-radius:16px;overflow:hidden}
.tabela-prova table{width:100%;border-collapse:collapse;font-size:16px}
.tabela-prova th{background:var(--texto);color:var(--fundo);
  font-family:"Archivo",sans-serif;font-size:11.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;text-align:left;padding:14px 18px}
.tabela-prova td{border-top:1px solid var(--fio);padding:14px 18px;
  vertical-align:top;color:var(--texto)}
.tabela-prova .ok{color:var(--texto-fraco)}
.tabela-prova .vira td{background:var(--laranja-claro);border-top:2px solid var(--laranja)}
/* texto pequeno em laranja precisa de um tom mais fundo: o laranja da marca
   da 3,9:1 sobre o creme, e o minimo e 4,5. O laranja grande dos titulos e
   dos botoes continua o mesmo. */
.tabela-prova .virou{color:#B0450F;font-weight:700}
.tabela-prova .nota{font-size:14px;color:var(--texto-fraco);margin:0;
  padding:13px 18px;border-top:1px solid var(--fio);background:var(--fundo)}

/* ---------- destaque de preço ---------- */

.destaque{margin:42px 0 0;background:var(--n1);border-radius:16px;padding:32px;
  display:flex;align-items:center;gap:32px;flex-wrap:wrap}
.destaque-num{font-family:"Archivo",sans-serif;font-weight:800;font-size:54px;
  letter-spacing:-.03em;margin:0;color:var(--terminal);line-height:1}
.destaque-txt{margin:0;font-size:17px;max-width:42ch;color:var(--claro)}

/* ---------- ficha de números ---------- */

.ficha{list-style:none;margin:0 0 46px;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px 30px}
.ficha li{display:flex;align-items:baseline;gap:12px;
  border-bottom:1.5px solid var(--fio);padding-bottom:13px}
.ficha b{font-family:"Archivo",sans-serif;font-weight:800;font-size:38px;
  letter-spacing:-.03em;line-height:1;min-width:78px;text-align:right;color:var(--texto)}
.ficha span{font-size:15.5px;color:var(--texto-fraco);line-height:1.34}

/* ---------- lista dos blocos ---------- */

.blocos{list-style:none;margin:36px 0 0;padding:0;columns:2;column-gap:44px}
.blocos li{break-inside:avoid;display:flex;gap:14px;align-items:baseline;
  padding:11px 0;border-bottom:1px solid var(--fio);font-size:16.5px;
  color:var(--texto);transition:background .25s ease}
.blocos span{font-family:"IBM Plex Mono",monospace;font-size:13px;
  color:var(--laranja);font-weight:500;border-radius:4px;padding:1px 7px;
  margin-left:-7px;transition:background .25s ease,color .25s ease}
.blocos li:hover{background:var(--fundo)}
.blocos li:hover span{background:var(--laranja);color:#FFF6EF}

/* ---------- perguntas ---------- */

.faq{margin:48px 0 0;border-top:1.5px solid var(--fio);padding-top:34px}
.faq h3{font-size:15px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--texto-fraco);margin-bottom:18px}
details{border-bottom:1.5px solid var(--fio);padding:17px 0}
summary{font-family:"Archivo",sans-serif;font-weight:700;font-size:17.5px;
  cursor:pointer;list-style:none;display:flex;gap:12px;align-items:baseline;
  color:var(--texto)}
summary::-webkit-details-marker{display:none}
summary::before{content:"+";color:var(--laranja);font-weight:800;font-size:20px;line-height:1}
details[open] summary::before{content:"\2212"}
summary:focus-visible{outline:3px solid var(--terminal);outline-offset:3px}
details p{margin:12px 0 0 24px;font-size:16.5px;color:#40372F;max-width:62ch}

/* ---------- rodapé ---------- */

.rodape{background:var(--n0);color:var(--claro-fraco);padding:58px 0 66px;
  font-size:14.5px;line-height:1.6}
.rod-titulo{font-family:"Archivo",sans-serif;font-weight:800;font-size:19px;
  color:var(--papel);margin:0 0 6px;letter-spacing:-.02em}
.rod-perfil{font-family:"IBM Plex Mono",monospace;color:var(--terminal);
  margin:0 0 26px;font-size:14px}
.rod-aviso{max-width:74ch;margin:0 0 16px}
.rod-sep{margin:0 10px;opacity:.5}
.rod-contato{margin:26px 0 0;padding-top:18px;border-top:1px solid var(--borda);
  color:var(--claro)}
/* sem esta regra os dois links do rodape ficam no azul padrao do navegador,
   que sobre o #14100E da 2:1 e some para quem le em tela clara */
.rod-contato a{color:var(--terminal);text-decoration:none}
.rod-contato a:hover{text-decoration:underline}

/* ---------- telas menores ---------- */

@media (max-width:980px){
  .produto-linha{grid-template-columns:1fr;gap:28px;justify-items:center;
    text-align:center}
  .produto{max-width:260px}
  .grade-3,.grade-2,.vitrine{grid-template-columns:1fr}
  .ficha{grid-template-columns:repeat(2,1fr)}
  .blocos{columns:1}
}

@media (max-width:560px){
  body{font-size:17px}
  .sec{padding:60px 0}
  .hero .wrap{padding-top:34px;padding-bottom:80px}
  .wrap{padding:0 20px}
  .ficha{grid-template-columns:1fr}
  .ficha b{min-width:62px;font-size:32px}
  .destaque{gap:16px;padding:24px}
  .destaque-num{font-size:42px}
  .cta,.cta-grande{display:block;text-align:center;font-size:18px;padding:18px 20px}
  .tabela-prova table{font-size:14.5px}
  .tabela-prova th,.tabela-prova td{padding:11px 13px}
  .selo{right:-4px;top:-14px;padding:11px 15px}
  .selo b{font-size:18px}
}

/* ================= interações ================= */

.progresso{position:fixed;top:0;left:0;right:0;height:3px;background:var(--laranja);
  transform-origin:0 50%;transform:scaleX(0);z-index:60}

.js .hero .wrap>*{animation:subir .9s cubic-bezier(.16,1,.3,1) both}
.js .hero .wrap>*:nth-child(2){animation-delay:.10s}
.js .hero .wrap>*:nth-child(3){animation-delay:.20s}
@keyframes subir{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}}

.js .rev{opacity:0;transform:translateY(26px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--d,0ms)}
.js .rev.in{opacity:1;transform:none}

.js .tabela-prova tbody tr{opacity:0;transform:translateX(-16px);
  transition:opacity .5s ease,transform .5s ease}
.js .tabela-prova.in tbody tr{opacity:1;transform:none}
.js .tabela-prova.in tbody tr:nth-child(1){transition-delay:.12s}
.js .tabela-prova.in tbody tr:nth-child(2){transition-delay:.24s}
.js .tabela-prova.in tbody tr:nth-child(3){transition-delay:.36s}
.js .tabela-prova.in tbody tr:nth-child(4){transition-delay:.52s}

.esteira{background:var(--n0);overflow:hidden;padding:17px 0;
  border-bottom:1px solid var(--borda)}
.esteira-faixa{display:flex;width:max-content;animation:rolar 34s linear infinite}
.esteira-grupo{display:flex;align-items:center;white-space:nowrap;padding-right:56px}
.esteira-grupo span{font-family:"Archivo",sans-serif;font-weight:800;font-size:14.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--terminal)}
.esteira-grupo i{font-style:normal;color:var(--laranja);padding:0 26px;font-size:15px}
@keyframes rolar{to{transform:translateX(-50%)}}

.card,.card-escuro{transition:transform .35s cubic-bezier(.16,1,.3,1),
  border-color .35s ease,box-shadow .35s ease}
.card:hover{transform:translateY(-6px);box-shadow:0 16px 34px rgba(34,28,24,.10)}
.card-escuro:hover{transform:translateY(-6px);border-color:#544639}

details[open] p{animation:abrirfaq .35s ease both}
@keyframes abrirfaq{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

.flutuante{position:fixed;right:22px;bottom:22px;z-index:50;
  display:flex;align-items:center;gap:16px;background:var(--n3);color:var(--papel);
  text-decoration:none;border:1px solid var(--borda);border-radius:999px;
  padding:10px 10px 10px 22px;box-shadow:0 18px 40px rgba(0,0,0,.5);
  opacity:0;transform:translateY(16px);pointer-events:none;
  transition:opacity .4s ease,transform .4s cubic-bezier(.16,1,.3,1)}
.flutuante.vis{opacity:1;transform:none;pointer-events:auto}
.flutuante:focus-visible{outline:3px solid var(--terminal);outline-offset:3px}
/* o seletor de tipo b{color:var(--texto)} ganha da cor herdada do pai, entao
   sem esta linha o rotulo sai escuro sobre fundo escuro e some */
.flutuante b{font-family:"Archivo",sans-serif;font-weight:700;font-size:14.5px;
  color:var(--papel)}
/* laranja mais fundo so aqui: sobre o botao flutuante o texto e pequeno, e
   o #D14E14 da 4,1:1 de contraste, abaixo do minimo. Este da 5,3:1. */
.flutuante .pill{background:#B0450F;color:#FFF6EF;border-radius:999px;
  padding:10px 19px;font-family:"Archivo",sans-serif;font-weight:800;font-size:14.5px;
  white-space:nowrap;transition:transform .25s cubic-bezier(.16,1,.3,1)}
.flutuante:hover .pill{transform:scale(1.06)}
@media (max-width:560px){
  .flutuante{left:16px;right:16px;justify-content:space-between;bottom:16px}
  /* No celular a barra ocupa a largura toda, 65px de altura e 16px de folga.
     Sem esta sobra, ela cobre a ultima linha do rodape, que e justamente onde
     estao o e-mail de suporte e a politica de privacidade. */
  .rodape{padding-bottom:118px}
}

@media (prefers-reduced-motion:reduce){
  .js .hero .wrap>*,details[open] p{animation:none}
  .js .rev,.js .tabela-prova tbody tr{opacity:1;transform:none;transition:none}
  .esteira-faixa{animation:none}
  .card:hover,.card-escuro:hover,.vit:hover,.flutuante:hover .pill{transform:none}
  .flutuante{transition:none}
}

/* ---------- listas e blocos da estrutura de venda ---------- */

.frase{margin:38px 0 0;padding:26px 30px;background:var(--laranja-claro);
  border-left:5px solid var(--laranja);border-radius:0 10px 10px 0;
  font-family:"Archivo",sans-serif;font-weight:700;
  font-size:clamp(19px,2.2vw,24px);line-height:1.36;color:var(--texto);
  max-width:60ch}
.frase b{color:var(--laranja)}
.frase-clara{background:rgba(242,160,61,.10);border-left-color:var(--terminal)}
.sec-escura .frase{color:var(--papel)}
.sec-escura .frase b{color:var(--terminal)}

.depende{list-style:none;margin:32px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:11px 26px}
.depende li{padding:13px 17px;background:var(--cartao);border:1px solid var(--fio);
  border-radius:9px;font-size:16.5px}

.nao-e{list-style:none;margin:26px 0 0;padding:0}
.nao-e li{position:relative;padding-left:26px;margin-bottom:11px;font-size:16.5px;
  color:var(--claro)}
.nao-e li::before{content:"";position:absolute;left:0;top:.62em;
  width:11px;height:2px;background:var(--terminal)}
.nao-e li:last-child::before{width:11px;height:11px;top:.34em;border-radius:50%;
  background:var(--laranja)}

.esperar{list-style:none;margin:30px 0 32px;padding:0}
.esperar li{position:relative;padding-left:28px;margin-bottom:12px;
  font-size:clamp(17px,1.9vw,19px);color:var(--claro-fraco)}
.esperar li::before{content:"";position:absolute;left:0;top:.66em;width:14px;
  height:1.5px;background:var(--claro-fraco)}

.entrega{list-style:none;margin:30px 0 0;padding:0}
.entrega li{position:relative;padding-left:30px;margin-bottom:12px;font-size:17px}
.entrega li::before{content:"";position:absolute;left:2px;top:.34em;
  width:8px;height:14px;border-right:2.5px solid var(--laranja);
  border-bottom:2.5px solid var(--laranja);transform:rotate(42deg)}
.destaque-oferta{margin-top:38px}

.produto-texto .lead{color:var(--claro)}

@media (max-width:980px){
  .depende{grid-template-columns:1fr}
  .produto-linha{grid-template-columns:1fr;gap:32px;justify-items:center;
    text-align:center}
  .produto{max-width:250px}
  .nao-e li,.esperar li,.entrega li{text-align:left}
}

/* ================= estrutura de duas colunas =================
   O titulo de cada secao fica FIXO na coluna esquerda enquanto o conteudo rola
   na direita. Muda a leitura da pagina: em vez de blocos empilhados, o leitor
   tem sempre visivel onde esta, e o conteudo passa por baixo do titulo.

   A numeracao se justifica porque a pagina E uma sequencia: a dor leva ao
   problema, que leva a solucao, que leva a decisao. */

.wrap.dupla{display:grid;grid-template-columns:300px 1fr;gap:64px;
  align-items:start}

.coluna-fixa{position:sticky;top:72px}
.secao-num{font-family:"Archivo",sans-serif;font-weight:800;font-size:76px;
  line-height:.8;letter-spacing:-.04em;color:var(--laranja);opacity:.22;
  margin:0 0 14px}
.coluna-fixa h2{font-size:clamp(26px,2.6vw,34px);line-height:1.1;margin:0;
  padding-top:14px;border-top:3px solid var(--laranja)}
.sec-escura .coluna-fixa h2{border-top-color:var(--terminal)}

.coluna-corpo>*:first-child{margin-top:0}

/* nas faixas escuras o numero precisa de mais presenca para nao sumir */
.sec-escura .secao-num{color:var(--terminal);opacity:.3}

/* a capa quebra a coluna e invade a margem, em vez de ficar enfileirada */
.sec-escura .produto-linha{grid-template-columns:340px 1fr;gap:56px}
.sec-escura .produto{margin-left:-70px}

/* a vitrine fica dentro da coluna: sangrar cortava o terceiro cartao, e
   cartao cortado le como defeito, nao como escolha de composicao */
.coluna-corpo .vitrine{grid-template-columns:repeat(3,1fr);gap:16px}
.coluna-corpo .vit img{height:150px}

@media (max-width:1080px){
  .wrap.dupla{grid-template-columns:1fr;gap:26px}
  .coluna-fixa{position:static;top:auto}
  .secao-num{font-size:54px;margin-bottom:8px}
  .coluna-corpo .vitrine{margin-right:0}
  .sec-escura .produto{margin-left:0}
  .sec-escura .produto-linha{grid-template-columns:1fr}
}

/* ================= foto de fundo do hero =================
   Metade direita, opaca, dissolvendo no fundo solido. A dissolucao e feita com
   mask em duas direcoes: horizontal para a imagem sumir antes de chegar no
   texto, e vertical para nao encostar na faixa de cima nem cortar reto embaixo.

   Uma camada de cor por cima puxa a foto para a paleta do material, senao ela
   entra com a temperatura dela e briga com o creme.

   Para trocar a imagem, mexa so no url() daqui. */

.hero-foto{
  position:absolute; inset:0 0 0 auto; width:58%;
  background-image:url("img/hero-foto.jpg");
  /* o hero e alto e a foto e larga: com cover o rosto e os monitores
     saem do quadro. contain mostra a cena inteira, e as mascaras
     cuidam das bordas que sobram. */
  background-size:contain; background-repeat:no-repeat;
  background-position:right center;
  opacity:.46;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,.5) 26%, #000 62%),
    linear-gradient(to bottom, #000 0%, #000 78%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,.5) 26%, #000 62%),
    linear-gradient(to bottom, #000 0%, #000 78%, transparent 100%);
  mask-composite:intersect;
  z-index:0; pointer-events:none;
}

/* puxa a foto para a paleta: o creme por cima e o laranja quente no canto */
.hero-foto::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(100deg, var(--fundo) 2%, rgba(248,242,231,.62) 30%, rgba(248,242,231,.06) 66%),
    radial-gradient(72% 62% at 86% 20%, rgba(210,78,20,.13), transparent 70%);
}

/* o texto do hero passa a ter no maximo 60% da largura, para nunca cair em
   cima da imagem em tela larga */
.hero .wrap{position:relative;z-index:2}
.hero h1,.hero .lead,.hero .impacto{max-width:min(60%,20ch)}
.hero .lead,.hero .impacto{max-width:min(58%,52ch)}

@media (max-width:1080px){
  /* em tela estreita a foto vira textura de canto, para nao competir com o texto */
  .hero-foto{width:82%;opacity:.20}
  .hero h1,.hero .lead,.hero .impacto{max-width:none}
}
@media (max-width:560px){
  .hero-foto{opacity:.13}
}