/* ==========================================================================
   LVY Laser — LP B2B de jogo americano
   Tokens em custom properties. Paleta amostrada das fotos reais do produto
   e da tinta da logo. Contrastes verificados em direcao-de-arte.md
   ========================================================================== */

:root {
  /* --- cor --- */
  --tinta:        #231E1B;   /* tinta da logo, puxada pro quente do couro */
  --tinta-2:      #5A504A;   /* texto secundario sobre claro */
  --acao:         #9E4E22;   /* couro caramelo da peca Moldura */
  --acao-esc:     #803D18;   /* hover / ativo */
  --acao-clara:   #D9975C;   /* SO sobre fundo escuro */
  --apoio:        #1E2438;   /* couro azul petroleo da peca Retangular */
  --apoio-2:      #C6C0B8;   /* texto secundario sobre escuro */
  --linho:        #F0E9E0;   /* guardanapo de linho das fotos */
  --papel:        #FBF8F4;
  --branco:       #FFFFFF;
  --positivo:     #2F6B4F;   /* so no lado "ganho" da conta de custo (AA em branco) */

  /* --- tipografia --- */
  --f-display: Georgia, "Times New Roman", "Noto Serif", serif;
  --f-corpo: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;

  --t-xs:   .78rem;
  --t-sm:   .9rem;
  --t-base: clamp(1rem, .96rem + .2vw, 1.12rem);
  --t-lg:   clamp(1.15rem, 1.05rem + .5vw, 1.4rem);
  --t-xl:   clamp(1.4rem, 1.2rem + 1vw, 2rem);
  --t-2xl:  clamp(1.9rem, 1.5rem + 2vw, 3rem);
  --t-3xl:  clamp(2.4rem, 1.7rem + 3.4vw, 4.4rem);
  --t-4xl:  clamp(3rem, 1.9rem + 5vw, 6rem);

  /* --- espaco: uma progressao so --- */
  --e-1: 4px;  --e-2: 8px;  --e-3: 12px; --e-4: 16px; --e-5: 24px;
  --e-6: 32px; --e-7: 48px; --e-8: 64px; --e-9: 96px; --e-10: 128px;
  --secao: clamp(56px, 4rem + 4vw, 128px);

  /* --- forma --- */
  --r-sm: 4px; --r-md: 10px; --r-lg: 18px; --r-full: 999px;
  --borda: 1px solid rgba(35, 30, 27, .12);
  --borda-esc: 1px solid rgba(255, 255, 255, .14);
  --sombra-1: 0 1px 2px rgba(35, 30, 27, .06), 0 4px 14px rgba(35, 30, 27, .06);
  --sombra-2: 0 10px 40px rgba(35, 30, 27, .16);

  /* --- medidas --- */
  --largura: 1180px;
  --texto-largura: 62ch;
  --topbar-h: 62px;
}

/* --------------------------------------------------------------- base --- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--f-corpo);
  font-size: var(--t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.015em;
  margin: 0 0 var(--e-4);
  text-wrap: balance;
}
h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-xl); }
p  { margin: 0 0 var(--e-4); max-inline-size: var(--texto-largura); }
img { max-inline-size: 100%; block-size: auto; display: block; }
ul { margin: 0; padding: 0; list-style: none; }
strong { font-weight: 700; }

a { color: var(--acao); text-underline-offset: .18em; }
a:hover { color: var(--acao-esc); }

:focus-visible {
  outline: 3px solid var(--acao);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
/* fundos escuros que NAO usam a classe .escuro tambem precisam do anel
   claro: com --acao o anel da 2,61 no hero e 2,80 no rodape e reprova    */
.escuro :focus-visible,
.hero :focus-visible,
.rodape :focus-visible,
.prova :focus-visible { outline-color: var(--acao-clara); }

.limite {
  inline-size: min(100% - var(--e-5) * 2, var(--largura));
  margin-inline: auto;
}
.secao { padding-block: var(--secao); }
/* a topbar e sticky: sem isso a ancora aterrissa embaixo dela */
section[id], main[id] { scroll-margin-block-start: calc(var(--topbar-h) + var(--e-3)); }
.escuro { background: var(--apoio); color: var(--papel); }
.escuro h1, .escuro h2, .escuro h3 { color: var(--papel); }
/* :not(.btn) e obrigatorio: sem ele `.escuro a` (0,1,1) vence `.btn--acao`
   (0,1,0) e o CTA fica com texto caramelo sobre fundo caramelo            */
.escuro a:not(.btn) { color: var(--acao-clara); }
.claro-linho { background: var(--linho); }

.olho {
  font-family: var(--f-corpo);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--acao);
  margin: 0 0 var(--e-3);
}
/* o hero e escuro mas nao usa a classe .escuro: sem isto o olho cai para
   --acao sobre --apoio, que e 2,61 e reprova (combinacao proibida)        */
.escuro .olho, .hero .olho { color: var(--acao-clara); }

.apoio-txt { color: var(--tinta-2); }
.escuro .apoio-txt { color: var(--apoio-2); }

.pular {
  position: absolute; inset-inline-start: -9999px;
  background: var(--tinta); color: var(--papel);
  padding: var(--e-3) var(--e-4); z-index: 200; border-radius: 0 0 var(--r-md) 0;
}
.pular:focus { inset-inline-start: 0; }

/* ------------------------------------------------------------- botoes --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--e-2);
  min-block-size: 48px;
  padding: var(--e-3) var(--e-5);
  font-family: var(--f-corpo);
  font-size: var(--t-base); font-weight: 700;
  text-decoration: none;
  border: 2px solid transparent; border-radius: var(--r-full);
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease,
              border-color .18s ease, transform .12s ease;
}
.btn--acao { background: var(--acao); color: var(--branco); }
.btn--acao:hover { background: var(--acao-esc); color: var(--branco); }
.btn--linha {
  background: transparent; color: var(--tinta); border-color: rgba(35, 30, 27, .28);
}
.btn--linha:hover { border-color: var(--tinta); color: var(--tinta); background: rgba(35,30,27,.04); }
/* contexto escuro: hero e secoes .escuro usam a versao clara do botao de linha */
.escuro .btn--linha, .hero .btn--linha { color: var(--papel); border-color: rgba(255,255,255,.42); }
.escuro .btn--linha:hover, .hero .btn--linha:hover {
  border-color: var(--papel); color: var(--papel); background: rgba(255,255,255,.09);
}
.btn:active { transform: scale(.97); }
.btn svg { inline-size: 20px; block-size: 20px; flex: none; }

/* ------------------------------------------------------- progresso ----- */
.progresso {
  position: fixed; inset-block-start: 0; inset-inline: 0;
  block-size: 3px; z-index: 120;
  background: var(--acao);
  transform-origin: 0 50%;
  transform: scaleX(0);
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .progresso {
      animation: barra linear both;
      animation-timeline: scroll(root block);
    }
  }
}
@keyframes barra { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* --------------------------------------------------------- topbar ------ */
.topbar {
  position: sticky; inset-block-start: 0; z-index: 100;
  background: rgba(251, 248, 244, .92);
  backdrop-filter: blur(10px);
  border-block-end: var(--borda);
}
.topbar__in {
  min-block-size: var(--topbar-h);
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-4);
}
/* min-block-size garante alvo de toque de 44px mesmo com a logo de 30px */
.topbar__logo { display: flex; align-items: center; min-block-size: 44px; padding-inline-end: var(--e-3); }
.topbar__logo img { block-size: 30px; inline-size: auto; }
.topbar__btn { padding-inline: var(--e-4); font-size: var(--t-sm); min-block-size: 44px; }

/* ----------------------------------------------------------- hero ------ */
.hero { position: relative; overflow: hidden; background: var(--apoio); color: var(--papel); }
.hero__midia { position: absolute; inset: 0; z-index: 0; }
.hero__midia img {
  inline-size: 100%; block-size: 100%; object-fit: cover;
  /* mantem o bordado do cliente (canto inferior direito da foto) dentro do
     enquadramento: e a unica prova visual de peca real na pagina           */
  object-position: 58% 72%;
  transform-origin: 58% 72%;
}
.hero__veu {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to bottom, rgba(18,20,30,.86) 0%, rgba(18,20,30,.60) 45%, rgba(18,20,30,.90) 100%),
    linear-gradient(105deg, rgba(18,20,30,.80) 0%, rgba(18,20,30,.20) 70%);
}
.hero__in {
  position: relative; z-index: 2;
  padding-block: clamp(72px, 12vh, 132px) clamp(56px, 9vh, 104px);
  display: grid; gap: var(--e-5);
}
.hero h1 { font-size: var(--t-3xl); max-inline-size: 17ch; color: var(--papel); }
.hero__sub { font-size: var(--t-lg); max-inline-size: 52ch; color: #E8E3DC; margin: 0; }
.hero__provinha {
  display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4);
  font-size: var(--t-sm); color: var(--apoio-2);
  margin: 0; padding: 0;
}
.hero__provinha li { display: flex; align-items: center; gap: var(--e-2); }
.hero__provinha li::before {
  content: ""; inline-size: 6px; block-size: 6px; border-radius: 50%;
  background: var(--acao-clara); flex: none;
}
.hero__acoes { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; }
.hero__nota { font-size: var(--t-sm); color: var(--apoio-2); margin: 0; max-inline-size: 40ch; }

/* --------------------------------------------------- faixa de prova ---- */
.prova { background: var(--tinta); color: var(--papel); }
.prova__grade {
  display: grid; gap: var(--e-5);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-block: var(--e-7);
}
.prova__item { border-inline-start: 2px solid rgba(217,151,92,.5); padding-inline-start: var(--e-4); }
.prova__n {
  font-family: var(--f-display); font-size: var(--t-2xl); font-weight: 700;
  line-height: 1; color: var(--acao-clara); display: block;
}
.prova__l { font-size: var(--t-sm); color: #D6D0C8; margin: var(--e-2) 0 0; max-inline-size: 24ch; }

/* -------------------------------------------------------- generico ----- */
.cabeca { max-inline-size: 46ch; margin-block-end: var(--e-7); }
.cabeca p:last-child { margin-block-end: 0; }

.cartoes { display: grid; gap: var(--e-5); grid-template-columns: minmax(0, 1fr); }
.cartao {
  background: var(--branco); border: var(--borda); border-radius: var(--r-lg);
  padding: var(--e-5); box-shadow: var(--sombra-1);
}
.cartao h3 { font-size: var(--t-lg); margin-block-end: var(--e-2); }
.cartao p:last-child { margin-block-end: 0; }

.marcadores li {
  position: relative; padding-inline-start: var(--e-6); margin-block-end: var(--e-3);
}
.marcadores li::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .55em;
  inline-size: 14px; block-size: 2px; background: var(--acao);
}
.escuro .marcadores li::before { background: var(--acao-clara); }

/* --------------------------------------------------------- processo ---- */
.processo { background: #171C2C; }  /* meio tom entre --apoio e --tinta */
.processo__grade { display: grid; gap: var(--e-7); grid-template-columns: minmax(0, 1fr); }
.processo__fixo { align-self: start; }
.processo__passos { display: grid; gap: var(--e-5); counter-reset: passo; }

.passo {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e-4);
  align-items: start;
  padding-block-end: var(--e-5);
  border-block-end: var(--borda-esc);
}
.passo:last-child { border-block-end: 0; padding-block-end: 0; }
.passo__n {
  font-family: var(--f-display); font-weight: 700; line-height: .85;
  font-size: clamp(2.6rem, 2rem + 3vw, 4.6rem);
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(217,151,92,.92);
  min-inline-size: 1.6ch;
}
.passo h3 { font-size: var(--t-lg); margin-block-end: var(--e-2); }
.passo p { margin-block-end: 0; color: var(--apoio-2); }
.passo--chave .passo__n { color: var(--acao-clara); -webkit-text-stroke: 0; }

/* foto de prova: a unica peca real com marca de cliente aplicada.
   Fica aqui, sem veu por cima, porque e neste bloco que a pagina promete
   que o dono vai ver a marca dele na peca                                */
/* Fica dentro do passo 03, e nao no painel sticky: com a foto la, o painel
   passava de 900px de altura e o `position: sticky` deixava de fixar.
   Aqui tambem e o lugar editorialmente certo, colada na frase que promete
   a aprovacao antes do pagamento.                                        */
.prova-foto { margin: var(--e-5) 0 0; }
.prova-foto img {
  inline-size: 100%; block-size: auto;
  border-radius: var(--r-md);
  box-shadow: var(--sombra-2);
}
.prova-foto figcaption {
  margin-block-start: var(--e-3);
  font-size: var(--t-sm);
  color: var(--apoio-2);
  max-inline-size: 44ch;
}

/* grifo que se preenche */
.grifo {
  background-image: linear-gradient(rgba(217,151,92,.32), rgba(217,151,92,.32));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% .32em;
  padding-inline: .08em;
  padding-block-end: .04em;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .grifo {
      animation: grifa linear both;
      animation-timeline: view();
      animation-range: entry 30% cover 45%;
    }
  }
}
@keyframes grifa { from { background-size: 0% .32em; } to { background-size: 100% .32em; } }

/* --------------------------------------------------------- formatos ---- */
.formatos__grade {
  display: grid; gap: var(--e-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.formato {
  background: var(--branco); border: var(--borda); border-radius: var(--r-md);
  overflow: hidden;
}
.formato img { inline-size: 100%; aspect-ratio: 1; object-fit: cover; }
.formato figcaption {
  padding: var(--e-3) var(--e-4) var(--e-4);
  font-size: var(--t-sm); font-weight: 700;
}
.formato figcaption span { display: block; font-weight: 400; color: var(--tinta-2); font-size: var(--t-xs); }
.formato--nota {
  display: grid; place-content: center; text-align: center;
  padding: var(--e-5); background: var(--linho); border-style: dashed;
}
.formato--nota p { margin: 0; font-size: var(--t-sm); }

/* ------------------------------------------------------------ conta ---- */
.conta { display: grid; gap: var(--e-5); grid-template-columns: minmax(0, 1fr); }
.conta__col { border-radius: var(--r-lg); padding: var(--e-5); border: var(--borda); }
.conta__col--hoje { background: var(--linho); }
.conta__col--nova { background: var(--branco); box-shadow: var(--sombra-1); }
.conta__col h3 { font-size: var(--t-lg); }
.conta__col ul li {
  padding-block: var(--e-3);
  border-block-end: 1px dashed rgba(35,30,27,.16);
  display: flex; gap: var(--e-3); align-items: baseline;
}
.conta__col ul li:last-child { border-block-end: 0; }
.conta__sinal { font-weight: 700; flex: none; font-size: var(--t-sm); }
.conta__col--hoje .conta__sinal { color: var(--acao-esc); }
.conta__col--nova .conta__sinal { color: var(--positivo); }
.conta__nota {
  margin-block-start: var(--e-5); padding: var(--e-4);
  background: rgba(158,78,34,.07); border-inline-start: 3px solid var(--acao);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: var(--t-sm);
}
.conta__nota p { margin: 0; }
/* o painel tem 7% de caramelo por cima do linho: --acao daria 4,45 e reprova */
.conta__nota a { color: var(--acao-esc); }

/* --------------------------------------------------------- virada ------ */
.virada { text-align: center; }
.virada p {
  font-family: var(--f-display); font-size: var(--t-2xl); line-height: 1.15;
  max-inline-size: 20ch; margin-inline: auto; margin-block-end: 0;
  letter-spacing: -.015em;
}

/* ------------------------------------------------------------- faq ----- */
.faq { display: grid; gap: var(--e-3); max-inline-size: 74ch; }
.faq details {
  background: var(--branco); border: var(--borda); border-radius: var(--r-md);
  padding: var(--e-4) var(--e-5);
}
.faq summary {
  cursor: pointer; font-weight: 700; list-style: none;
  display: flex; justify-content: space-between; gap: var(--e-4); align-items: center;
  /* alvo de toque: o padding do <details> nao conta como area clicavel do
     summary, entao a altura precisa vir dele mesmo                       */
  min-block-size: 44px;
  padding-block: var(--e-2);
  margin-block: calc(var(--e-2) * -1);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-family: var(--f-display); font-size: 1.5em; line-height: 1;
  color: var(--acao); flex: none;
}
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin-block: var(--e-3) 0; color: var(--tinta-2); }

/* ---------------------------------------------------------- pedido ----- */
/* minmax(0,1fr) e nao 1fr: o minimo automatico de um item de grid e o
   min-content, e o <select> herda a largura da opcao mais longa. Com 1fr a
   trilha inchava e estourava 26px para fora da tela em 320px.             */
.pedido__grade { display: grid; gap: var(--e-7); grid-template-columns: minmax(0, 1fr); }
.form { display: grid; gap: var(--e-4); }
.campo { display: grid; gap: var(--e-2); }
.campo label { font-size: var(--t-sm); font-weight: 700; }
.campo select, .campo input {
  font: inherit; font-size: var(--t-base);
  min-block-size: 48px;
  inline-size: 100%; min-inline-size: 0;   /* nao deixa a opcao mais longa ditar a largura */
  padding: var(--e-3) var(--e-4);
  color: var(--tinta); background: var(--branco);
  border: 1px solid rgba(35,30,27,.25); border-radius: var(--r-md);
}
.campo select:hover, .campo input:hover { border-color: rgba(35,30,27,.45); }
.form__nota { font-size: var(--t-sm); color: var(--tinta-2); margin: 0; }
/* o formulario vive em secao escura: --tinta-2 ali da 1,96 e reprova */
.escuro .form__nota { color: var(--apoio-2); }
.form .btn { inline-size: 100%; }

/* ---------------------------------------------------------- rodape ----- */
.rodape { background: var(--tinta); color: #D6D0C8; }
.rodape__grade {
  display: grid; gap: var(--e-6); grid-template-columns: minmax(0, 1fr);
  padding-block: var(--e-8) var(--e-6);
}
.rodape h3 { font-family: var(--f-corpo); font-size: var(--t-xs); letter-spacing: .16em;
  text-transform: uppercase; color: var(--acao-clara); margin-block-end: var(--e-3); }
.rodape a { color: #E8E3DC; }
.rodape a:hover { color: var(--branco); }
/* links de contato ficam um por linha (separados por <br>): inline-block
   permite dar altura de toque sem quebrar o fluxo do texto              */
.rodape address a, .rodape__grade > div:last-child a {
  display: inline-block; padding-block: var(--e-3); min-block-size: 44px;
}
.rodape img { block-size: 26px; inline-size: auto; filter: invert(1) brightness(1.6); }
.rodape img + p { margin-block-start: var(--e-4); }
.rodape address { font-style: normal; }
.rodape__fim {
  border-block-start: 1px solid rgba(255,255,255,.12);
  padding-block: var(--e-5);
  font-size: var(--t-xs); color: #9F9890;
}
/* a barra fixa so existe abaixo de 900px, e cobria a ultima linha do
   rodape. A folga precisa ser real, nao uma custom property que nunca
   chegou a ser declarada em lugar nenhum.                              */
@media (max-width: 899px) {
  .rodape__fim { padding-block-end: calc(var(--e-8) + env(safe-area-inset-bottom, 0px)); }
}
.rodape__fim p { max-inline-size: none; margin: 0; }

/* -------------------------------------------------------- cta fixo ----- */
.cta-fixo {
  position: fixed; inset-block-end: 0; inset-inline: 0; z-index: 110;
  padding: var(--e-3) var(--e-4) calc(var(--e-3) + env(safe-area-inset-bottom, 0px));
  background: rgba(251,248,244,.94);
  backdrop-filter: blur(10px);
  border-block-start: var(--borda);
  transform: translateY(110%);
  /* so `transform` tiraria da vista mas deixaria o link focavel pelo
     teclado, mandando o foco para fora da tela. `visibility` tira da
     ordem de foco; a transicao dela e discreta para nao cortar o slide */
  visibility: hidden;
  transition: transform .28s ease, visibility 0s linear .28s;
}
.cta-fixo[data-visivel="sim"] {
  transform: translateY(0);
  visibility: visible;
  transition: transform .28s ease, visibility 0s linear 0s;
}
.cta-fixo .btn { inline-size: 100%; min-block-size: 50px; }
@media (min-width: 900px) { .cta-fixo { display: none; } }

/* --------------------------------------------------------- revelacao --- */
/* Sem suporte a scroll-driven animation ou com reduced-motion, o conteudo
   ja nasce visivel. Nada depende de JS para aparecer.                     */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .revela {
      animation: revela linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 32%;
    }
    .hero__midia img {
      animation: zoom-lento linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    .formato img {
      animation: sobe-tile linear both;
      animation-timeline: view();
      animation-range: entry 12% cover 42%;
    }
  }
}
@keyframes revela {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
@keyframes zoom-lento {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}
@keyframes sobe-tile {
  from { opacity: .45; transform: scale(.96); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------ performance ---- */
/* content-visibility so nas secoes DEPOIS da ultima ancora interna
   (#processo). Se aplicado antes, o navegador estima a altura errado, o
   documento cresce enquanto o visitante rola e o link "Como funciona"
   aterrissa no lugar errado. Os tamanhos abaixo sao as alturas reais
   medidas em 390px nesta execucao, para que a estimativa erre pouco na
   primeira passagem; o `auto` faz o navegador memorizar a altura real
   depois que a secao renderiza uma vez.                                  */
/* ATENCAO: contain-intrinsic-size dimensiona a CAIXA DE CONTEUDO, nao a
   caixa de borda. Os valores abaixo sao content-box medidos em 375px com
   content-visibility desligado; o padding de secao (158px no mobile) NAO
   entra aqui, senao cada secao e estimada 158px mais alta do que e e o
   documento encolhe enquanto o visitante rola.                          */
.abaixo-da-dobra { content-visibility: auto; contain-intrinsic-size: auto 1000px; }
#formatos { contain-intrinsic-size: auto 1586px; }
#conta    { contain-intrinsic-size: auto 1227px; }
#duvidas  { contain-intrinsic-size: auto 1450px; }
#faq      { contain-intrinsic-size: auto 882px; }
#pedido   { contain-intrinsic-size: auto 990px; }
.virada   { contain-intrinsic-size: auto 109px; }
.rodape   { contain-intrinsic-size: auto 784px; }

/* ------------------------------------------------------- breakpoints --- */
/* celular pequeno (320 a 400px): aperta o hero para o CTA continuar dentro
   da primeira dobra mesmo em tela de 760px de altura                      */
@media (max-width: 400px) {
  .hero__in {
    padding-block: clamp(40px, 7vh, 96px) clamp(32px, 5vh, 72px);
    gap: var(--e-4);
  }
  .hero h1 { font-size: clamp(2rem, 1.5rem + 3vw, 2.6rem); }
  .hero__sub { font-size: var(--t-base); }
  .hero__nota { font-size: var(--t-xs); }
}

@media (min-width: 640px) {
  .prova__grade { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .formatos__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .conta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rodape__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form .btn { inline-size: auto; }
}
@media (min-width: 900px) {
  .hero__in { padding-block: clamp(96px, 16vh, 180px) clamp(80px, 12vh, 140px); }
  .processo__grade { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: var(--e-8); }
  .processo__fixo { position: sticky; inset-block-start: calc(var(--topbar-h) + var(--e-6)); }
  .cartoes--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pedido__grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .rodape__grade { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); }
  .formatos__grade { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ------------------------------------------------------ reduced motion - */
/* Toda animacao ja vive dentro de (prefers-reduced-motion: no-preference),
   entao aqui basta neutralizar transicao e travar o estado final. Sem
   reset universal e sem !important.                                       */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .progresso { display: none; }
  .grifo { background-size: 100% .32em; }
  .cta-fixo { transition: none; }
  .btn { transition: none; }
  .btn:active { transform: none; }
}

/* ------------------------------------------------------------ print ---- */
/* Nao precisa ficar bonita, mas precisa sair legivel e inteira.
   Regras depois das originais, mesma especificidade: vencem sem !important */
@media print {
  .topbar { display: none; }
  .cta-fixo { display: none; }
  .progresso { display: none; }

  /* a foto do hero fica atras do texto: no papel, sem o veu, o titulo some.
     Fora ela, o texto imprime preto sobre branco                            */
  .hero__midia { display: none; }
  .hero__veu { display: none; }

  .hero { background: #fff; color: #000; }
  .escuro { background: #fff; color: #000; }
  .processo { background: #fff; color: #000; }
  .prova { background: #fff; color: #000; }
  .claro-linho { background: #fff; }
  .rodape { background: #fff; color: #000; }
  .hero h1 { color: #000; }
  .escuro h1, .escuro h2, .escuro h3 { color: #000; }
  .apoio-txt, .escuro .apoio-txt, .hero__sub, .hero__nota,
  .passo p, .prova__l, .form__nota, .escuro .form__nota { color: #333; }
  .olho, .escuro .olho, .hero .olho { color: #555; }
  .rodape a, .escuro a:not(.btn) { color: #000; }
  /* a logo do rodape e invertida para o fundo escuro: no papel branco
     ela sumiria                                                          */
  .rodape img { filter: none; }
  .passo__n { color: #666; -webkit-text-stroke: 0; }
  .prova__n { color: #000; }
  .grifo { background-size: 100% .32em; }

  /* botao vira texto simples: no papel nao ha o que clicar.
     .escuro .btn--linha e (0,2,0) e venceria .btn (0,1,0), deixando o texto
     branco sobre branco: precisa da mesma especificidade para virar preto  */
  .btn { border-color: #666; background: none; color: #000; padding-inline: var(--e-3); }
  .btn--acao { background: none; color: #000; }
  .escuro .btn--linha, .hero .btn--linha,
  .escuro .btn--acao, .hero .btn--acao { color: #000; border-color: #666; background: none; }
  .btn svg { display: none; }

  /* No papel nao existe scrollport, entao as timelines de view()/scroll()
     nunca avancam e o `animation-fill-mode: both` congela os elementos no
     primeiro keyframe, que e opacity:0. Sem isto, toda secao com .revela
     sai em branco na impressao. Forcar o estado final resolve.            */
  .revela, .formato img, .hero__midia img {
    animation: none;
    opacity: 1;
    transform: none;
  }

  /* content-visibility + tamanho intrinseco estimado deixavam metade das
     paginas em branco na impressao                                        */
  .abaixo-da-dobra { content-visibility: visible; contain-intrinsic-size: auto; }
  #formatos, #conta, #duvidas, #faq, #pedido, .virada, .rodape {
    contain-intrinsic-size: auto;
  }

  /* nao quebrar cartao, passo ou pergunta no meio da folha */
  .cartao, .passo, .formato, .conta__col, .faq details { break-inside: avoid; }
  section { break-inside: auto; }

  /* as mensagens pre-preenchidas do wa.me sao enormes e codificadas:
     imprimir a URL crua so polui. O telefone ja aparece por extenso
     no rodape                                                             */
  a[href^="http"]::after { content: none; }
  .faq details { display: block; }
  .faq details > p { display: block; }
}