/* ==========================================================================
   Everton Silva — site oficial
   Receita visual num lugar só: cartaz de roda de samba / lambe-lambe.
   Noite de roda (fundo), papel de cartaz, vermelho do pandeiro, ouro do troféu.
   Tipo de madeira (Alfa Slab One) + condensada de cartaz (Big Shoulders) +
   corpo de leitura fácil para fã adulto (Atkinson Hyperlegible, 19 px).
   ========================================================================== */

:root {
  /* cor */
  --noite: #15110d;
  --noite-2: #201913;
  --noite-3: #2c231b;
  --papel: #f3e7d0;
  --papel-2: #e8d6b3;
  --tinta: #1b1510;
  --tinta-2: #4a3d30;
  --vermelho: #c7321f;
  --vermelho-escuro: #a32616;
  --ouro: #f0b43c;
  --ouro-claro: #ffd27a;
  --verde: #2f6b4f;
  --fumaca: #c9b99d;
  --linha: rgba(243, 231, 208, .16);

  /* tipo */
  --f-madeira: "Alfa Slab One", "Rockwell Extra Bold", Georgia, serif;
  --f-cartaz: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --f-texto: "Atkinson Hyperlegible", "Segoe UI", Roboto, sans-serif;
  --t-corpo: 1.1875rem;          /* 19 px: fã adulto no celular */
  --t-pequeno: 1rem;
  --t-meio: 1.375rem;
  --t-titulo: clamp(2.2rem, 7vw, 3.6rem);
  --t-gigante: clamp(4.1rem, 21vw, 10.5rem);

  /* espaço e forma */
  --e1: .5rem; --e2: 1rem; --e3: 1.5rem; --e4: 2.25rem; --e5: 3.5rem; --e6: 5.5rem;
  --raio: 6px;
  --toque: 3.5rem;               /* 56 px: alvo de toque */
  --largura: 72rem;
  --leitura: 38rem;

  /* movimento */
  --entra: cubic-bezier(.16, 1, .3, 1);
  --rapido: 160ms ease;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--noite);
  color: var(--papel);
  font: 400 var(--t-corpo)/1.6 var(--f-texto);
  /* grão de papel por cima de tudo, bem leve */
  background-image:
    radial-gradient(circle at 20% 0%, rgba(199, 50, 31, .14), transparent 42rem),
    radial-gradient(circle at 100% 30%, rgba(240, 180, 60, .07), transparent 30rem);
  background-attachment: fixed;
}
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 900; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

img, video { max-width: 100%; display: block; }
a { color: var(--ouro); text-underline-offset: .18em; }
a:hover { color: var(--ouro-claro); }
:focus-visible { outline: 3px solid var(--ouro); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--ouro); color: var(--tinta); }

.pular { position: absolute; left: -999px; top: 0; z-index: 1000; background: var(--ouro); color: var(--tinta); padding: var(--e2); font-weight: 700; }
.pular:focus { left: var(--e2); top: var(--e2); }

.caixa { width: min(100% - 2.5rem, var(--largura)); margin-inline: auto; }
.leitura { max-width: var(--leitura); }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- tipografia ---------------------------------------------------------- */
h1, h2, h3 { margin: 0 0 var(--e2); line-height: 1.02; font-weight: 400; }
h2 { font-family: var(--f-madeira); font-size: var(--t-titulo); letter-spacing: -.01em; }
h3 { font-family: var(--f-cartaz); font-weight: 800; font-size: 1.75rem; text-transform: uppercase; letter-spacing: .02em; }
p { margin: 0 0 var(--e2); }
.rotulo {
  font-family: var(--f-cartaz); font-weight: 800; text-transform: uppercase; letter-spacing: .14em;
  font-size: 1rem; color: var(--ouro); display: inline-flex; align-items: center; gap: .6em; margin-bottom: var(--e2);
}
.rotulo::before { content: ""; width: 1.6em; height: 3px; background: currentColor; }
.desbotado { color: var(--fumaca); }
/* letra de cartaz com a cor "fora de registro", como impressão de gráfica antiga */
.impresso { color: var(--ouro); text-shadow: .045em .045em 0 var(--vermelho); }

/* --- botões ---------------------------------------------------------------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: var(--toque); padding: .8rem 1.5rem; border-radius: var(--raio);
  font: 800 1.25rem/1.1 var(--f-cartaz); text-transform: uppercase; letter-spacing: .06em;
  text-decoration: none; border: 3px solid transparent; cursor: pointer;
  transition: transform var(--rapido), background-color var(--rapido), color var(--rapido), box-shadow var(--rapido);
  box-shadow: 4px 4px 0 var(--tinta);
}
.botao:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--tinta); }
.botao svg { width: 1.3em; height: 1.3em; flex: none; }
.botao-vermelho { background: var(--vermelho); color: #fff; }
.botao-vermelho:hover { background: var(--vermelho-escuro); color: #fff; }
.botao-ouro { background: var(--ouro); color: var(--tinta); }
.botao-ouro:hover { background: var(--ouro-claro); color: var(--tinta); }
.botao-linha { background: transparent; color: var(--papel); border-color: var(--papel); box-shadow: none; }
.botao-linha:hover { background: var(--papel); color: var(--tinta); }
.botao-zap { background: #1f8f4e; color: #fff; }
.botao-zap:hover { background: #18773f; color: #fff; }
.botao[disabled], .botao[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.botoes { display: flex; flex-wrap: wrap; gap: var(--e2); }
.botoes .botao { flex: 1 1 15rem; }
@media (min-width: 48rem) { .botoes .botao { flex: 0 1 auto; } }

/* --- topo ------------------------------------------------------------------ */
.topo {
  position: sticky; top: 0; z-index: 200; background: rgba(21, 17, 13, .94);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--linha);
}
.topo .caixa { display: flex; align-items: center; justify-content: space-between; gap: var(--e2); min-height: 4.25rem; }
.marca { font: 400 1.5rem/1 var(--f-madeira); color: var(--papel); text-decoration: none; white-space: nowrap; }
.marca span { color: var(--ouro); }
.menu-lista { display: none; list-style: none; margin: 0; padding: 0; gap: var(--e3); align-items: center; }
.menu-lista a { color: var(--papel); text-decoration: none; font: 700 1.2rem/1 var(--f-cartaz); text-transform: uppercase; letter-spacing: .06em; padding: .6rem 0; border-bottom: 3px solid transparent; }
.menu-lista a:hover, .menu-lista a[aria-current="page"] { border-bottom-color: var(--ouro); color: var(--papel); }
.topo .botao { min-height: 2.75rem; padding: .5rem 1rem; font-size: 1.05rem; box-shadow: none; }
.abre-menu {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 3rem; padding: 0 .9rem; border-radius: var(--raio);
  background: transparent; color: var(--papel); border: 2px solid var(--linha); font: 800 1.1rem var(--f-cartaz); text-transform: uppercase; letter-spacing: .08em; cursor: pointer;
}
.abre-menu svg { width: 1.4rem; height: 1.4rem; }
.menu-celular {
  position: fixed; inset: 4.25rem 0 0; background: var(--noite); z-index: 199; padding: var(--e3) 1.25rem var(--e5);
  overflow-y: auto; transform: translateY(-1rem); opacity: 0; visibility: hidden;
  transition: opacity 200ms ease, transform 300ms var(--entra), visibility 0s linear 300ms;
}
.menu-celular.aberto { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
.menu-celular ul { list-style: none; margin: 0 0 var(--e4); padding: 0; }
.menu-celular li a { display: block; padding: .9rem 0; font: 400 2.1rem/1.1 var(--f-madeira); color: var(--papel); text-decoration: none; border-bottom: 1px solid var(--linha); }
.menu-celular li a[aria-current="page"] { color: var(--ouro); }
.so-desktop { display: none; }
@media (min-width: 64rem) {
  .menu-lista { display: flex; }
  .abre-menu, .menu-celular { display: none; }
  .so-desktop { display: inline-flex; }
}

/* --- início (hero) ------------------------------------------------------- */
.hero { position: relative; padding: var(--e4) 0 var(--e5); overflow: hidden; }
.hero-grade { display: grid; gap: var(--e4); align-items: center; }
.hero-nome { font: 400 var(--t-gigante)/.86 var(--f-madeira); margin: 0 0 var(--e3); letter-spacing: -.02em; }
.hero-nome span { display: block; }
.hero-nome .sobrenome { padding-left: .45em; }
.hero-linha { font: 700 clamp(1.35rem, 4.6vw, 1.9rem)/1.25 var(--f-cartaz); text-transform: uppercase; letter-spacing: .04em; margin-bottom: var(--e3); max-width: 26ch; }
.hero-linha strong { color: var(--ouro); font-weight: 900; }
.hero-foto { position: relative; justify-self: center; width: min(100%, 26rem); }
.colada {
  position: relative; background: var(--papel); padding: .7rem .7rem 2.6rem; transform: rotate(-2.2deg);
  box-shadow: 0 1.4rem 2.6rem rgba(0, 0, 0, .55);
}
.colada img { width: 100%; aspect-ratio: 250 / 285; object-fit: cover; filter: contrast(1.04); }
.colada figcaption { position: absolute; left: 0; right: 0; bottom: .55rem; text-align: center; color: var(--tinta); font: 700 1.05rem var(--f-cartaz); text-transform: uppercase; letter-spacing: .1em; }
.colada::before, .colada::after { /* fita crepe */
  content: ""; position: absolute; width: 6.5rem; height: 1.9rem; background: rgba(232, 214, 179, .82); top: -.8rem; box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.colada::before { left: -1.2rem; transform: rotate(-24deg); }
.colada::after { right: -1.2rem; transform: rotate(20deg); }
.selo { position: absolute; width: 9.5rem; height: 9.5rem; right: -1rem; top: -2.5rem; z-index: 2; transform: rotate(10deg); filter: drop-shadow(0 .5rem .8rem rgba(0,0,0,.45)); }
@media (min-width: 30rem) { .selo { width: 11rem; height: 11rem; right: -2.5rem; } }
@media (min-width: 64rem) {
  .hero { padding: var(--e5) 0 var(--e6); }
  .hero-grade { grid-template-columns: 1.25fr .9fr; }
  .hero-foto { justify-self: end; }
}
@media (prefers-reduced-motion: no-preference) {
  .entra { animation: entra 600ms var(--entra) both; }
  .entra-2 { animation-delay: 70ms; }
  .entra-3 { animation-delay: 140ms; }
  .entra-4 { animation-delay: 210ms; }
  @keyframes entra { from { opacity: 0; transform: translateY(1.4rem); } }
  .selo svg .gira { animation: gira 38s linear infinite; transform-origin: 50% 50%; }
  @keyframes gira { to { transform: rotate(360deg); } }
}

/* --- faixa de repertório (setlist correndo) -------------------------------- */
.faixa {
  background: var(--ouro); color: var(--tinta); border-block: 3px solid var(--tinta); overflow: hidden; transform: rotate(-1.2deg); margin: 0 -1rem;
}
.faixa-trilho { display: flex; width: max-content; gap: 2.2rem; padding: .85rem 0; font: 900 1.45rem/1 var(--f-cartaz); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.faixa-trilho span::after { content: "✶"; margin-left: 2.2rem; color: var(--vermelho); }
@media (prefers-reduced-motion: no-preference) {
  .faixa-trilho { animation: corre 55s linear infinite; }
  @keyframes corre { to { transform: translateX(-50%); } }
}

/* --- seções ---------------------------------------------------------------- */
.secao { padding: var(--e5) 0; }
.secao-papel { background: var(--papel); color: var(--tinta); position: relative; }
.secao-papel a:not(.botao) { color: var(--vermelho-escuro); }
.secao-papel .rotulo { color: var(--vermelho); }
.secao-papel .desbotado { color: var(--tinta-2); }
.secao-papel .botao-linha { color: var(--tinta); border-color: var(--tinta); }
.secao-papel .botao-linha:hover { background: var(--tinta); color: var(--papel); }
/* borda rasgada do cartaz */
.rasgo-cima::before, .rasgo-baixo::after {
  content: ""; position: absolute; left: 0; right: 0; height: 18px; background: var(--papel);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 18' preserveAspectRatio='none'%3E%3Cpath d='M0 18V9l6-5 7 6 8-7 6 5 9-6 7 7 8-6 6 4 9-7 7 6 8-5 6 6 9-7 7 5 8-6 9 8V18z'/%3E%3C/svg%3E") 0 0/240px 18px repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 18' preserveAspectRatio='none'%3E%3Cpath d='M0 18V9l6-5 7 6 8-7 6 5 9-6 7 7 8-6 6 4 9-7 7 6 8-5 6 6 9-7 7 5 8-6 9 8V18z'/%3E%3C/svg%3E") 0 0/240px 18px repeat-x;
}
.rasgo-cima::before { top: -17px; }
.rasgo-baixo::after { bottom: -17px; transform: scaleY(-1); }

.duas { display: grid; gap: var(--e4); align-items: center; }
@media (min-width: 56rem) { .duas { grid-template-columns: 1fr 1fr; gap: var(--e5); } .duas.invertida > :first-child { order: 2; } }

/* vídeo com pôster: só baixa quando a pessoa toca */
.video {
  position: relative; background: #000; border: 3px solid var(--papel); box-shadow: 8px 8px 0 var(--vermelho);
  aspect-ratio: 640 / 284; overflow: hidden;
}
.video video, .video img { width: 100%; height: 100%; object-fit: cover; }
.video-tocar {
  position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(transparent 40%, rgba(0,0,0,.55));
  border: 0; cursor: pointer; color: #fff; padding: 0;
}
.video-tocar span {
  display: inline-flex; align-items: center; gap: .55em; background: var(--vermelho); padding: .85rem 1.3rem; border-radius: 999px;
  font: 800 1.2rem var(--f-cartaz); text-transform: uppercase; letter-spacing: .06em; box-shadow: 0 .4rem 1.4rem rgba(0,0,0,.5);
  transition: transform var(--rapido);
}
.video-tocar:hover span { transform: scale(1.05); }
.video-tocar svg { width: 1.5em; height: 1.5em; }
.legenda { font-size: var(--t-pequeno); color: var(--fumaca); margin-top: .9rem; }

/* linha do tempo */
.tempo { list-style: none; margin: 0; padding: 0; position: relative; }
.tempo::before { content: ""; position: absolute; left: .55rem; top: .5rem; bottom: .5rem; width: 3px; background: repeating-linear-gradient(var(--ouro) 0 10px, transparent 10px 18px); }
.tempo li { position: relative; padding: 0 0 var(--e4) 2.6rem; }
.tempo li::before { content: ""; position: absolute; left: 0; top: .35rem; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--vermelho); border: 3px solid var(--ouro); }
.tempo-ano { display: block; font: 400 clamp(2.2rem, 9vw, 3.4rem)/1 var(--f-madeira); color: var(--ouro); margin-bottom: .4rem; }
.tempo-ano.pequeno { font-size: 1.9rem; }
.tempo h3 { margin-bottom: .5rem; }
.fonte { display: block; font-size: .95rem; color: var(--fumaca); margin-top: .35rem; }
.fonte a { color: var(--fumaca); }
.confirmar { display: inline-block; font: 700 .9rem var(--f-texto); color: var(--tinta); background: var(--ouro); padding: .1rem .5rem; border-radius: 3px; vertical-align: middle; }
.secao-papel .confirmar { background: var(--tinta); color: var(--ouro); }

/* cartões de repertório */
.repertorio { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.repertorio li { background: var(--noite-2); border-left: 6px solid var(--vermelho); padding: 1rem 1.1rem; border-radius: 0 var(--raio) var(--raio) 0; }
.repertorio b { display: block; font: 800 1.45rem/1.1 var(--f-cartaz); text-transform: uppercase; letter-spacing: .02em; }
.repertorio small { color: var(--fumaca); font-size: 1rem; }

/* passos (comprar) */
.passos { list-style: none; counter-reset: p; margin: 0 0 var(--e4); padding: 0; display: grid; gap: var(--e3); }
@media (min-width: 56rem) { .passos { grid-template-columns: repeat(3, 1fr); } }
.passos li { counter-increment: p; position: relative; padding: 1.4rem 1.2rem 1.3rem 4.6rem; background: rgba(27, 21, 16, .06); border: 2px solid var(--tinta); border-radius: var(--raio); }
.passos li::before { content: counter(p); position: absolute; left: 1.1rem; top: 1rem; font: 400 2.6rem/1 var(--f-madeira); color: var(--vermelho); }
.passos b { display: block; font: 800 1.45rem/1.15 var(--f-cartaz); text-transform: uppercase; margin-bottom: .35rem; }
.secao:not(.secao-papel) .passos li { background: var(--noite-2); border-color: var(--linha); }

.preco { font: 400 clamp(4.5rem, 20vw, 7.5rem)/.9 var(--f-madeira); margin: 0 0 var(--e2); }
.preco small { font: 800 1.6rem var(--f-cartaz); vertical-align: top; margin-right: .2em; }

.chave {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; background: var(--tinta); color: var(--papel);
  padding: 1rem 1.2rem; border-radius: var(--raio); margin: var(--e2) 0 var(--e3);
}
.chave code { font: 700 clamp(1.5rem, 6vw, 2rem)/1 var(--f-cartaz); letter-spacing: .06em; color: var(--ouro); }
.chave .botao { min-height: 3rem; padding: .5rem 1rem; font-size: 1.05rem; box-shadow: none; }
.aviso-copiado { font-weight: 700; color: var(--ouro); min-height: 1.6em; margin: 0; }

.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: var(--e2); margin: var(--e3) 0; }
.numeros div { border-top: 4px solid var(--vermelho); padding-top: .6rem; }
.numeros b { display: block; font: 400 2.5rem/1 var(--f-madeira); }
.numeros span { font-size: 1rem; }

/* perguntas */
.perguntas details { border-bottom: 1px solid var(--linha); }
.secao-papel .perguntas details { border-color: rgba(27, 21, 16, .2); }
.perguntas summary { cursor: pointer; padding: 1.1rem 2.5rem 1.1rem 0; font: 800 1.35rem/1.2 var(--f-cartaz); text-transform: uppercase; letter-spacing: .02em; list-style: none; position: relative; min-height: var(--toque); }
.perguntas summary::-webkit-details-marker { display: none; }
.perguntas summary::after { content: "+"; position: absolute; right: .2rem; top: .7rem; font: 400 2rem/1 var(--f-madeira); color: var(--vermelho); }
.perguntas details[open] summary::after { content: "–"; }
.perguntas details p { padding-bottom: 1rem; }

/* formulário de contratação (monta a mensagem do WhatsApp; nada é enviado sozinho) */
.formulario { display: grid; gap: var(--e2); background: var(--noite-2); padding: var(--e3); border: 2px solid var(--linha); border-radius: var(--raio); }
.formulario label { display: grid; gap: .4rem; font-weight: 700; }
.formulario input, .formulario select, .formulario textarea {
  font: 400 1.15rem var(--f-texto); color: var(--tinta); background: var(--papel); border: 2px solid var(--papel-2); border-radius: var(--raio);
  padding: .8rem .9rem; min-height: var(--toque); width: 100%;
}
.formulario textarea { min-height: 7rem; resize: vertical; }
.formulario input:focus-visible, .formulario select:focus-visible, .formulario textarea:focus-visible { outline: 3px solid var(--ouro); border-color: var(--ouro); }
.formulario .dica { font-size: .98rem; color: var(--fumaca); font-weight: 400; }
@media (min-width: 40rem) { .formulario .lado { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e2); } }

.tipos { list-style: none; padding: 0; margin: 0 0 var(--e3); display: flex; flex-wrap: wrap; gap: .6rem; }
.tipos li { border: 2px solid currentColor; border-radius: 999px; padding: .4rem 1rem; font: 800 1.15rem var(--f-cartaz); text-transform: uppercase; letter-spacing: .04em; }

.foto-larga { border: 3px solid var(--papel); box-shadow: 8px 8px 0 var(--ouro); }
.foto-larga img { width: 100%; aspect-ratio: 640 / 285; object-fit: cover; }

/* chamada fixa no celular */
.chamada-fixa {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 190; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem;
  padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom)); background: rgba(21, 17, 13, .96); border-top: 1px solid var(--linha);
}
.chamada-fixa .botao { min-height: 3.25rem; padding: .5rem .6rem; font-size: 1.1rem; box-shadow: none; }
body.com-chamada { padding-bottom: 5rem; }
@media (min-width: 64rem) { .chamada-fixa { display: none; } body.com-chamada { padding-bottom: 0; } }

/* rodapé */
.rodape { border-top: 1px solid var(--linha); padding: var(--e5) 0 var(--e4); }
.rodape-grade { display: grid; gap: var(--e4); }
@media (min-width: 56rem) { .rodape-grade { grid-template-columns: 1.4fr 1fr 1fr; } }
.rodape h2 { font-size: 2.2rem; }
.rodape ul { list-style: none; margin: 0; padding: 0; }
.rodape li { margin-bottom: .6rem; }
.rodape li a { display: inline-flex; align-items: center; gap: .55rem; min-height: 2.75rem; color: var(--papel); text-decoration: none; font-weight: 700; }
.rodape li a:hover { color: var(--ouro); }
.rodape svg { width: 1.4rem; height: 1.4rem; flex: none; }
.rodape .miudo { font-size: .95rem; color: var(--fumaca); margin-top: var(--e4); }

/* revelar ao rolar */
@media (prefers-reduced-motion: no-preference) {
  .revela { opacity: 0; transform: translateY(1.5rem); transition: opacity 450ms ease, transform 600ms var(--entra); }
  .revela.visto { opacity: 1; transform: none; }
}

.cabeca-pagina { padding: var(--e5) 0 var(--e4); }
.cabeca-pagina h1 { font: 400 clamp(3rem, 13vw, 6.5rem)/.92 var(--f-madeira); margin-bottom: var(--e3); }
.cabeca-pagina p { font-size: var(--t-meio); max-width: 34ch; }

/* --- kit de imprensa (tela e impressão em 1 página A4) --------------------- */
.kit-topo { display: grid; gap: var(--e3); align-items: center; margin-bottom: var(--e3); }
.kit-linha { font: 800 1.35rem/1.25 var(--f-cartaz); text-transform: uppercase; letter-spacing: .03em; }
.kit-foto { width: 100%; max-width: 15rem; height: auto; aspect-ratio: 1; object-fit: cover; border: 3px solid var(--tinta); box-shadow: 6px 6px 0 var(--vermelho); }
.kit-colunas { display: grid; gap: var(--e3); margin-bottom: var(--e3); }
.kit-fatos { list-style: none; margin: 0 0 var(--e3); padding: 0; }
.kit-fatos li { display: grid; grid-template-columns: 6.5rem 1fr; gap: .2rem .8rem; align-items: baseline; padding: .45rem 0; border-bottom: 1px solid rgba(27, 21, 16, .18); }
.kit-fatos b { font: 800 1.05rem var(--f-cartaz); text-transform: uppercase; letter-spacing: .05em; color: var(--vermelho); }
.kit-baixar { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; padding: 0; list-style: none; }
.kit-baixar a { font-weight: 700; display: inline-flex; min-height: 2.75rem; align-items: center; }
@media (min-width: 48rem) {
  .kit-topo { grid-template-columns: 1fr auto; }
  .kit-colunas { grid-template-columns: 1.3fr 1fr; gap: var(--e5); }
}
@media print {
  @page { size: A4; margin: 12mm; }
  body { background: #fff !important; padding: 0 !important; font-size: 10.5pt; }
  body::after, .topo, .menu-celular, .rodape, .chamada-fixa, .nao-imprime, .pular { display: none !important; }
  .secao-papel { background: #fff; padding: 0; }
  .rasgo-cima::before, .rasgo-baixo::after { display: none; }
  .kit h2 { font-size: 30pt; margin-bottom: 4pt; }
  .kit-topo { grid-template-columns: 1fr 42mm; margin-bottom: 8pt; }
  .kit-foto { max-width: 42mm; box-shadow: none; }
  .kit-colunas { grid-template-columns: 1.3fr 1fr; gap: 10mm; }
  .kit p { margin-bottom: 6pt; line-height: 1.45; }
  .kit h3 { font-size: 13pt; margin: 4pt 0; }
  .caixa { width: 100%; }
  html, body { height: auto !important; }
  main > :not(.kit) { display: none !important; }
  .kit { border-top: 6mm solid var(--vermelho); padding-top: 6mm !important; break-inside: avoid; }
  .kit-fatos li { grid-template-columns: 24mm 1fr; padding: 3pt 0; }
  .kit-fatos b { font-size: 10pt; }
}