/* Show de Prêmios 2026 — Magazine Médica

   Duas paletas convivendo, de propósito:

   1. A da LOJA (magazinemedica.com.br) — carmim #CF244A, laranja de oferta, texto #222 sobre
      branco. É ela que manda no cabeçalho, no rodapé e nas seções de conteúdo: quem chega
      precisa reconhecer a Magazine Médica antes de reconhecer a promoção.

   2. A do PALCO — o banner que a cliente mandou como identidade da campanha (preto, cortina
      vermelha e logotipo creme/dourado). Vale para os blocos da campanha em si: capa, chamada
      final e topo da consulta. As cores saíram do próprio arquivo, amostradas nele.

   Sem CDN e sem webfont externa: a CSP da página só aceita a própria origem. */

:root {
  --carmim:        #cf244a;
  --carmim-escuro: #a81c3c;
  --carmim-claro:  #fdeef2;
  --laranja:       #e99002;
  --tinta:         #222222;
  --tinta-media:   #555555;
  --tinta-fraca:   #6f6f6f;
  --linha:         #e7e7ea;
  --fundo:         #ffffff;
  --fundo-claro:   #fafafb;
  --raio:          14px;
  --raio-pilula:   999px;
  --sombra:        0 2px 14px rgba(34, 34, 34, .07);
  --fonte: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Veludo — amostradas em design/referencia/background1.png e background2.png, a arte
     que a cliente mandou em 31/08/2026. Substituiu o palco preto com cortina vermelha: o
     mockup dela abandona o preto e assenta a campanha inteira sobre o veludo vinho. */
  --veludo:        #651a2f;   /* media da textura da capa */
  --veludo-faixa:  #5c172a;   /* media da textura da faixa final */
  --veludo-fundo:  #3f0a18;   /* vale da textura, para vinheta e sombra */
  --veludo-alto:   #872f47;   /* crista da textura, onde a luz bate */

  /* Mantidos: o preto ainda serve de sombra e de cor de tema do navegador. */
  --palco-preto:   #050506;
  --palco-vinho:   #4e0106;
  --palco-rubro:   #7d0f0a;
  --palco-brasa:   #a1321c;
  --dourado:       #fdd2b0;   /* preenchimento médio do logotipo */
  --dourado-alto:  #fffbf5;   /* estouro de luz do logotipo */
  --dourado-medio: #e8a87c;
  --creme:         #fff6ec;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 16px;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 700; }
h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 700; }
h3 { font-size: 1.1rem; font-weight: 700; }
p  { margin: 0 0 1em; }
a  { color: var(--carmim); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }

:focus-visible { outline: 3px solid var(--laranja); outline-offset: 2px; }

.pular {
  position: absolute; left: -9999px;
  background: var(--carmim); color: #fff; padding: .8rem 1.2rem; border-radius: 0 0 var(--raio) 0;
}
.pular:focus { left: 0; top: 0; z-index: 50; }

.limite { width: min(1120px, 92%); margin: 0 auto; }
.limite-estreito { width: min(760px, 92%); }
.miudo { font-size: .85rem; color: var(--tinta-fraca); }

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

/* A faixa é a primeira coisa da página: em preto e vinho, a campanha se anuncia antes mesmo
   do banner aparecer. O cabeçalho logo abaixo continua branco, com a marca da loja — é ela que
   dá a confiança de que o site é da Magazine Médica. */
.faixa-loja {
  /* Mesmo veludo da capa, em versao escurecida: no mockup a barra do topo nao e preta, e a
     textura amarra ela com a faixa do pe da pagina. */
  background-color: var(--veludo-fundo);
  background-image:
    linear-gradient(rgba(30, 4, 12, .55), rgba(30, 4, 12, .55)),
    url("img/textura-faixa.jpg");
  background-image:
    linear-gradient(rgba(30, 4, 12, .55), rgba(30, 4, 12, .55)),
    image-set(url("img/textura-faixa.webp") type("image/webp"),
              url("img/textura-faixa.jpg")  type("image/jpeg"));
  background-size: cover; background-position: center;
  color: var(--dourado);
  font-size: .85rem;
}
.faixa-loja .limite {
  display: flex; gap: 1rem; justify-content: space-between; align-items: center;
  padding: .5rem 0; flex-wrap: wrap;
}
.faixa-loja a { color: var(--dourado-alto); font-weight: 600; }

.topo { border-bottom: 1px solid var(--linha); background: #fff; position: sticky; top: 0; z-index: 20; }
.cabecalho {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding: .9rem 0; flex-wrap: wrap;
}

.marca { display: inline-flex; align-items: center; gap: .7rem; color: var(--carmim); }
.marca:hover { text-decoration: none; }
.marca-simbolo { display: inline-flex; }
.marca-logo { height: 44px; width: auto; display: block; }
/* A linha da campanha fica pendurada na logo por uma borda, e não solta ao lado: sem ela as
   duas marcas competem, e o nome da loja é que manda no cabeçalho. */
.marca-texto {
  display: flex; flex-direction: column; line-height: 1.15;
  padding-left: .7rem; border-left: 1px solid var(--linha);
}
.marca-texto strong { color: var(--carmim); font-size: 1.15rem; letter-spacing: -.01em; }
.marca-texto small { color: var(--tinta-media); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }

.menu { display: flex; align-items: center; gap: 1.3rem; flex-wrap: wrap; }
.menu a { color: var(--tinta); font-size: .95rem; }
.menu a[aria-current] { color: var(--carmim); font-weight: 600; }
/* O botão do menu é carmim cheio: sem estas duas regras, a cor de link do menu (e a de
   página atual, que também é carmim) apagaria o texto contra o próprio fundo. */
.menu a.botao,
.menu a.botao[aria-current],
.cabecalho-acao,
.cabecalho-acao[aria-current] { color: #fff; }

/* Par de textos alternativos (faixa da loja). O padrão é a tela larga; o media query inverte. */
.so-tela-estreita { display: none; }

/* ---------- botão do menu (só aparece no celular) ---------- */

.menu-botao {
  display: none; background: none; border: 0; padding: .4rem; cursor: pointer;
  color: var(--carmim); line-height: 0;
}
.menu-barras { display: inline-flex; flex-direction: column; gap: 5px; width: 30px; }
.menu-barras i { display: block; height: 4px; border-radius: 2px; background: currentColor; }
/* A barra do meio mais curta dá o movimento do ícone sem precisar de animação. */
.menu-barras i:nth-child(2) { width: 78%; align-self: flex-end; }

/* ---------- botões ---------- */

.botao {
  display: inline-block;
  background: var(--carmim); color: #fff;
  padding: .85rem 1.6rem; border: 2px solid var(--carmim);
  border-radius: var(--raio-pilula); font-weight: 700; font-size: 1rem;
  cursor: pointer; transition: background .15s, color .15s;
}
.botao:hover, .botao:focus { background: var(--carmim-escuro); border-color: var(--carmim-escuro); color: #fff; text-decoration: none; }
.botao-pequeno { padding: .5rem 1.1rem; font-size: .9rem; }
/* "Sair" não disputa atenção com o resto da tela: é saída, não ação principal. */
.botao-neutro {
  background: #fff; color: var(--tinta-media); border: 1px solid var(--linha);
}
.botao-neutro:hover { background: var(--fundo-claro); color: var(--tinta); }
.botao-vazado { background: transparent; color: var(--carmim); }
.botao-vazado:hover { background: var(--carmim-claro); color: var(--carmim-escuro); }
.botao-claro { background: #fff; color: var(--carmim); border-color: #fff; }
.botao-claro:hover { background: var(--carmim-claro); color: var(--carmim-escuro); border-color: var(--carmim-claro); }

/* ---------- capa (veludo) ---------- */

/* A capa é uma faixa única de veludo, do jeito que veio no mockup de 31/08/2026: textura
   sangrando de ponta a ponta, o letreiro e o texto na coluna da esquerda, e a médica
   recortada encostada na borda DIREITA do `.limite`, tocando o topo e o pé da faixa.

   A proporção nativa da textura é 2.58:1. `38.7vw` reproduz essa altura numa tela larga
   (numa janela de 1900px dá os mesmos 736px do mockup); o piso de 560px existe porque
   abaixo disso o texto da coluna não caberia e vazaria por baixo da faixa. */
.capa {
  position: relative;
  overflow: hidden;
  background-color: var(--veludo);
  background-image: url("img/textura-capa.jpg");
  background-image: image-set(url("img/textura-capa.webp") type("image/webp"),
                              url("img/textura-capa.jpg")  type("image/jpeg"));
  background-size: cover;
  background-position: center;
  color: var(--creme);
}

/* Vinheta: escurece as quinas para o texto branco não competir com as cristas claras da
   textura (#872f47 no ponto mais alto). Fica no ::before para não brigar com o
   background-image da própria seção. */
.capa::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 100% at 22% 50%,
              rgba(63, 10, 24, .62), rgba(63, 10, 24, 0) 58%);
}

.capa-corpo {
  position: relative;
  padding: clamp(1.6rem, 2.45vw, 3rem) 0;
  /* Teto de 730px: e a altura da faixa no mockup. Sem ele, numa tela de 2400px a faixa
     esticava junto com a janela e a medica passava a sobrar por cima do texto de novo. */
  min-height: clamp(520px, 38.8vw, 730px);
  display: flex; align-items: center;
}
.capa-corpo > .limite { width: min(1120px, 92%); }

/* Uma coluna só: a direita é o espaço vago que a médica ocupa, e ela está fora da grade
   (posicionada na faixa) porque precisa sangrar além do padding vertical. */
.capa-grade { display: block; }
/* 600px e o teto: a medica comeca em 52,7% da janela, o que numa janela de 1880 deixa
   exatamente 601px de coluna. Com 560 a primeira linha da manchete media 559px e o
   navegador preferia quebrar em tres linhas em vez de duas. */
.capa-texto { max-width: min(600px, 50%); position: relative; z-index: 1; }

/* No mockup o letreiro ocupa cerca de dois terços da coluna de texto. `height: auto` com
   width/height no HTML reserva o espaço antes de carregar e evita o pulo da manchete. */
.capa-letreiro {
  display: block; width: min(380px, 68%); height: auto;
  margin: 0 0 clamp(.9rem, 1.3vw, 1.5rem) -1.5%;
}

.capa h1 { color: var(--creme); }
.capa .chamada { color: rgba(253, 210, 176, .82); font-size: 1rem; line-height: 1.5;
                 max-width: 34rem; margin: 0 0 1.1rem; }
.capa .miudo { color: rgba(253, 210, 176, .58); margin: 0; }

/* A etiqueta desceu para o pé da coluna (no palco antigo ela abria a capa). Sobre o veludo
   o contorno creme rende mais do que o fundo translúcido de antes. */
.etiqueta {
  display: inline-block; background: rgba(253, 210, 176, .08);
  border: 1px solid rgba(253, 210, 176, .45);
  color: var(--dourado); font-size: .8rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; padding: .35rem 1rem; border-radius: var(--raio-pilula);
  margin: 0;
}

/* Botões: o carmim da loja afunda dentro do vinho, então a ação principal continua sendo o
   pêssego do letreiro — e o texto dentro dela, o vinho profundo da textura. */
.capa .botao {
  background: linear-gradient(180deg, var(--dourado-alto), var(--dourado-medio));
  border-color: var(--dourado); color: var(--veludo-fundo);
}
/* 49px de altura, como no mockup: o padding padrao (.85rem) da 57px e empurra a etiqueta
   para fora da faixa. */
.capa-acoes .botao { padding: .62rem 1.5rem; }
.capa .botao:hover, .capa .botao:focus {
  background: var(--dourado-alto); border-color: var(--dourado-alto); color: var(--veludo-fundo);
}
.capa .botao-vazado {
  background: rgba(253, 210, 176, .07); color: var(--dourado); border-color: rgba(253, 210, 176, .5);
}
.capa .botao-vazado:hover, .capa .botao-vazado:focus {
  background: rgba(253, 210, 176, .16); color: var(--creme); border-color: var(--dourado);
}

/* Sem <br> na manchete: quebra forçada larga uma palavra órfã em telas médias.
   `balance` distribui as linhas sozinho, e o `nowrap` impede o valor de partir no meio. */
.capa h1 {
  /* 1.86vw reproduz os 35px que a manchete tem no mockup numa janela de 1880px. Nos 44px
     de antes ela quebrava em TRES linhas dentro da coluna e estourava a altura da faixa. */
  font-size: clamp(1.6rem, 1.79vw, 2.1rem);
  line-height: 1.2;
  text-wrap: balance;
  margin: 0 0 .5rem;
}
.capa h1 strong { color: var(--dourado); white-space: nowrap; }
.chamada { font-size: 1.12rem; color: var(--tinta-media); max-width: 46ch; }
.capa-acoes { display: flex; gap: .8rem; flex-wrap: wrap; margin: 0 0 .85rem; }

/* Cartão deitado: o marco (título + data) à esquerda, a legenda à direita, separados por um
   filete. Em pé, como era no palco preto, ele empurrava a etiqueta para fora da faixa. */
.capa-cartao {
  display: flex; align-items: center; gap: 1.2rem;
  background: rgba(63, 10, 24, .42);
  border: 1px solid rgba(255, 246, 236, .18);
  border-radius: var(--raio);
  box-shadow: 0 18px 50px rgba(40, 6, 15, .45);
  padding: .85rem 1.2rem;
  margin: 1rem 0 1.25rem;
  /* No mockup o cartao mede ~422px e nao acompanha a coluna: encolhido, a legenda quebra em
     tres linhas e ele fica da altura do marco ao lado. Esticado ele virava uma barra. */
  width: fit-content; max-width: min(430px, 100%);
  backdrop-filter: blur(2px);
}
.cartao-marco { flex: 0 0 auto; padding-right: 1.2rem; border-right: 1px solid rgba(255, 246, 236, .18); }
.cartao-titulo { font-size: .72rem; text-transform: uppercase; letter-spacing: .09em; color: rgba(253, 210, 176, .7); margin: 0 0 .1rem; }
.cartao-numero { font-size: 1.75rem; font-weight: 700; color: var(--dourado); margin: 0; line-height: 1.1; }
.cartao-legenda { font-size: .82rem; color: rgba(255, 246, 236, .78); margin: 0; }

/* A médica: altura da faixa inteira, borda direita alinhada com a borda direita do `.limite`.
   `.limite` é `min(1120px, 92%)` centrado, então a distância dela até a borda da janela é
   `max(4%, 50% - 560px)` — a mesma conta, escrita em CSS. */
/* A JANELA da medica. Ocupa a metade direita do `.limite` menos 20px de respiro, encosta na
   borda direita dele e vai do topo ao pe da faixa. `overflow: hidden` e o que permite a foto
   ser mais larga que o espaco disponivel sem nunca invadir o texto.

   `.limite` e `min(1120px, 92vw)` centrado: metade dele e `min(560px, 46vw)`, e a distancia
   da borda dele ate a borda da janela e `max(4%, 50% - 560px)`. Sao as mesmas contas, escritas
   em CSS. */
.capa-figura {
  position: absolute; top: 0; bottom: 0;
  right: max(4%, calc(50% - 560px));
  width: calc(min(560px, 46vw) - 8px);
  overflow: hidden;
  pointer-events: none;
}

/* Altura CHEIA da faixa, sempre. E o que esconde os cortes retos do arquivo (a cabeca em cima,
   o jaleco embaixo) atras das bordas da faixa — igual ao mockup. Encolher a foto para caber
   deixava esses cortes a mostra, com veludo em volta.

   Encostada a direita da janela: quando ela e mais larga que a janela, o que sai de vista e a
   lateral ESQUERDA (manga e estetoscopio), que ninguem sente falta. */
.capa-medica {
  position: absolute; right: 0; top: 0;
  height: 100%; width: auto; max-width: none;
}

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

.secao { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.secao-clara { background: var(--fundo-claro); border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }

.passos { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.passos li { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); padding: 1.6rem; box-shadow: var(--sombra); }
.passo-numero {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
  background: var(--carmim); color: #fff; font-weight: 700; margin-bottom: .9rem;
}
.passos p { margin: 0; color: var(--tinta-media); }

.aviso {
  margin-top: 2rem; padding: 1.2rem 1.4rem;
  background: #fff8ec; border-left: 4px solid var(--laranja); border-radius: 0 var(--raio) var(--raio) 0;
  color: var(--tinta-media);
}
.aviso strong { color: var(--tinta); }

.premios { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; }
.premio { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); padding: 1.5rem; }
.premio-valor { color: var(--carmim); font-weight: 700; font-size: 1.3rem; }

.vazio {
  background: #fff; border: 1px dashed var(--linha); border-radius: var(--raio);
  padding: 2rem; text-align: center; color: var(--tinta-media);
}
.vazio-titulo { font-size: 1.2rem; font-weight: 700; color: var(--tinta); }

.pendente {
  display: inline-block; background: var(--carmim-claro); color: var(--carmim-escuro);
  border: 1px dashed var(--carmim); border-radius: var(--raio-pilula);
  padding: .1rem .7rem; font-size: .85rem; font-weight: 600;
}

.ganhadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; }
.ganhador { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); padding: 1.5rem; box-shadow: var(--sombra); }
.ganhador-numero { font-size: 1.8rem; font-weight: 700; color: var(--carmim); margin: 0 0 .3rem; letter-spacing: .02em; }
.ganhador h3 { margin-bottom: .2rem; }
.ganhador p { margin: 0; color: var(--tinta-media); }

/* ---------- faq ---------- */

.faq { margin-top: 1.5rem; }
.faq details {
  background: #fff; border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 1rem 1.3rem; margin-bottom: .8rem;
}
.faq summary { font-weight: 700; cursor: pointer; list-style: none; padding-right: 1.5rem; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 0; top: 0;
  color: var(--carmim); font-size: 1.3rem; line-height: 1;
}
.faq details[open] summary::after { content: "\2013"; }
.faq details p { margin: .8rem 0 0; color: var(--tinta-media); }
.faq-fim { margin-top: 1.5rem; color: var(--tinta-media); }

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

/* Fecha a página no mesmo palco em que ela abriu. A cortina aqui é feita em CSS (e não com o
   banner de novo): repetir a arte no fim faz a página parecer que recomeçou. */
.chamada-final {
  /* A faixa do pe usa a textura BAIXA (background2.png, 7.25:1) e nao a da capa: e o mesmo
     veludo fotografado numa tira, entao o gra da tecido nao aparece esticado. */
  background-color: var(--veludo-faixa);
  background-image:
    radial-gradient(80% 140% at 50% 50%, rgba(63, 10, 24, 0), rgba(63, 10, 24, .55)),
    url("img/textura-faixa.jpg");
  background-image:
    radial-gradient(80% 140% at 50% 50%, rgba(63, 10, 24, 0), rgba(63, 10, 24, .55)),
    image-set(url("img/textura-faixa.webp") type("image/webp"),
              url("img/textura-faixa.jpg")  type("image/jpeg"));
  background-size: cover; background-position: center;
  color: var(--creme); padding: clamp(2.5rem, 5vw, 3.5rem) 0; text-align: center;
}
.chamada-final h2 { color: var(--dourado); }
.chamada-final p { color: rgba(255, 246, 236, .82); }
.chamada-final .botao-claro {
  background: linear-gradient(180deg, var(--dourado-alto), var(--dourado-medio));
  border-color: var(--dourado); color: var(--veludo-fundo);
}
.chamada-final .botao-claro:hover, .chamada-final .botao-claro:focus {
  background: var(--dourado-alto); border-color: var(--dourado-alto); color: var(--veludo-fundo);
}

/* ---------- consulta ---------- */

/* Mesmo palco da capa, em versão baixa: a consulta é a segunda página pública, e sair do preto
   aqui faria parecer outro site. O corpo do formulário continua claro logo abaixo. */
.consulta-topo {
  background-color: var(--veludo);
  background-image:
    radial-gradient(90% 150% at 50% 0%, rgba(63, 10, 24, .10), rgba(63, 10, 24, .60)),
    url("img/textura-faixa.jpg");
  background-image:
    radial-gradient(90% 150% at 50% 0%, rgba(63, 10, 24, .10), rgba(63, 10, 24, .60)),
    image-set(url("img/textura-faixa.webp") type("image/webp"),
              url("img/textura-faixa.jpg")  type("image/jpeg"));
  background-size: cover; background-position: center;
  color: var(--creme);
  padding: clamp(2rem, 5vw, 3rem) 0 2rem;
}
.consulta-topo h1 { color: var(--creme); }
.consulta-topo p { color: rgba(255, 246, 236, .84); }
.consulta-topo .miudo { color: rgba(255, 246, 236, .62); }
.consulta-topo a { color: var(--dourado); }
.consulta-corpo { padding: 2.5rem 0 4rem; }

.cartao { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra); padding: 1.8rem; }
/* Caixa de entrada estreita e centralizada, na mesma medida do login do Depyl (460px). Um
   formulário de dois campos ocupando a largura inteira da página fica com cara de erro. */
.cartao.entrar { max-width: 460px; margin: 0 auto; }

.formulario { display: grid; gap: .8rem; justify-items: start; }
/* `justify-items: start` deixa o botão do tamanho do texto dele — que é o certo. Só que sem
   isto cada campo também ficava do tamanho do próprio rótulo, e dois campos vizinhos saíam com
   larguras diferentes. O bloco do campo estica; o botão continua encolhido. */
.formulario > div { width: 100%; }
.formulario label { font-weight: 600; }
.formulario input {
  width: 100%; padding: .8rem 1rem; font-size: 1rem; font-family: inherit;
  border: 1px solid var(--linha); border-radius: var(--raio);
}
.formulario input:focus { border-color: var(--carmim); }

.tarja-demo {
  background: #fff3f5; border: 1px solid var(--carmim); color: var(--carmim-escuro);
  border-radius: var(--raio); padding: .9rem 1.2rem; margin-bottom: 1.5rem;
}
.erro {
  background: #fff3f5; border-left: 4px solid var(--carmim); color: var(--carmim-escuro);
  padding: .9rem 1.2rem; border-radius: 0 var(--raio) var(--raio) 0; margin-bottom: 1.5rem;
}

/* Nome de um lado, "Sair" do outro — e no celular o botão desce em vez de espremer o nome. */
.identificacao {
  margin-bottom: 1.5rem; display: flex; align-items: center; justify-content: space-between;
  gap: .8rem; flex-wrap: wrap;
}
.identificacao > div { min-width: 0; }
.identificacao-acoes { display: flex; gap: .5rem; flex-wrap: wrap; }
.identificacao-nome { font-size: 1.3rem; font-weight: 700; margin: 0; }

.bloco { margin-bottom: 2.5rem; }
.numeros { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.numero {
  display: flex; align-items: baseline; gap: 1.2rem; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--linha); border-left: 5px solid var(--carmim);
  border-radius: var(--raio); padding: 1rem 1.3rem;
}
.numero-valor { font-size: 1.7rem; font-weight: 700; color: var(--carmim); letter-spacing: .04em; }
.numero-origem { color: var(--tinta-fraca); font-size: .9rem; }
.numeros-invalidos .numero { border-left-color: var(--linha); background: var(--fundo-claro); }
.numeros-invalidos .numero-valor { color: var(--tinta-fraca); text-decoration: line-through; }

.lista { color: var(--tinta-media); padding-left: 1.2rem; }

.tabela { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tabela th, .tabela td { text-align: left; padding: .7rem .6rem; border-bottom: 1px solid var(--linha); vertical-align: top; }
.tabela th { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-fraca); }
/* Data e valor não podem quebrar no meio: "R$" numa linha e "1.150,00" na outra parece erro. */
.tabela td:nth-child(2), .tabela td:nth-child(3) { white-space: nowrap; }

.rodape-consulta { border-top: 1px solid var(--linha); padding-top: 1rem; }

.regulamento {
  white-space: pre-wrap; font-size: .95rem; line-height: 1.7; color: var(--tinta-media);
  background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); padding: 1.8rem;
}

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

/* Sem padding embaixo: o último filho do rodapé é a faixa escura da assinatura, e qualquer
   sobra aqui vira uma tira clara depois dela, no fim da página. O respiro de cima da faixa
   é dela mesma (margin-top), então nada encosta. */
.rodape { background: var(--fundo-claro); border-top: 1px solid var(--linha); padding: 3rem 0 0; font-size: .92rem; }
.rodape-grade { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 2rem; }
.rodape strong { display: block; margin-bottom: .6rem; }
.rodape p { color: var(--tinta-media); margin-bottom: .6rem; }
.rodape ul { list-style: none; margin: 0; padding: 0; }
.rodape li { margin-bottom: .4rem; color: var(--tinta-media); }
.certificado { font-size: .85rem; }
.rodape-fim { border-top: 1px solid var(--linha); margin-top: 2rem; padding-top: 1rem; color: var(--tinta-fraca); font-size: .82rem; }

/* ---------- visor do regulamento em PDF ---------- */

.pdf-acoes { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.visor-pdf {
  width: 100%; height: 78vh; min-height: 420px;
  border: 1px solid var(--linha); border-radius: var(--raio); background: var(--fundo-claro);
}

@media (max-width: 560px) {
  /* No celular o visor embutido vira uma janelinha inútil: melhor um bloco baixo, com o
     botão de abrir o PDF logo acima em evidência. */
  .visor-pdf { height: 45vh; min-height: 260px; }
}

/* ---------- documento jurídico (aviso de privacidade) ---------- */

.documento h2 {
  font-size: 1.15rem; margin-top: 2.2rem; padding-top: 1.2rem;
  border-top: 1px solid var(--linha);
}
.documento h2:first-of-type { border-top: 0; }
.documento p, .documento li { color: var(--tinta-media); }
.documento ul { padding-left: 1.2rem; margin: 0 0 1em; }
.documento li { margin-bottom: .5em; }
.documento strong { color: var(--tinta); }

/* Sumário: numeração própria para casar com os títulos das seções. */
.sumario {
  background: var(--fundo-claro); border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 1.2rem 1.4rem; margin: 1.5rem 0 .5rem;
}
.sumario ol { margin: 0; padding-left: 1.3rem; columns: 2; column-gap: 2rem; }
.sumario li { margin-bottom: .35em; color: var(--tinta-media); font-size: .95rem; }

@media (max-width: 560px) {
  .sumario ol { columns: 1; }
}

/* ---------- assinatura (Ozaca + Fiedler) ---------- */

/* Os logotipos das duas casas são brancos e só existem nessa versão. Como o rodapé desta
   campanha é claro, a assinatura ganha a sua própria faixa escura no fim da página. */
.faixa-assinatura { background: var(--tinta); margin-top: 1.5rem; padding: 1.4rem 0; }
.assinatura { display: flex; align-items: center; justify-content: center; gap: 14px 46px; flex-wrap: wrap; }
.assina { display: flex; align-items: center; gap: 11px; }
.assina span {
  font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: #fff; opacity: .7; white-space: nowrap;
}
.assina a { display: inline-flex; align-items: center; }
.assinatura .assina img { height: 22px; width: auto; display: block; opacity: .9; }
/* O "F" da Fiedler ocupa a altura inteira da arte e o nome ao lado é bem menor: na mesma
   altura da Ozaca o nome não leria. É proporção da marca. */
.assinatura .assina img.fiedler { height: 30px; }

/* ---------- campo de senha com olho ---------- */

/* O botão fica DENTRO da moldura do campo, então o input precisa de espaço à direita para o
   texto não passar por baixo do ícone. 2.6rem = largura do botão + respiro. */
.campo-senha { position: relative; display: block; }
.campo-senha input { padding-right: 2.6rem; }
.campo-senha .olho {
  position: absolute; top: 0; right: 0; height: 100%; width: 2.5rem;
  display: grid; place-items: center;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--tinta-fraca);
}
.campo-senha .olho:hover { color: var(--tinta-media); }
.campo-senha .olho svg { width: 20px; height: 20px; display: block; }
/* Um SVG só, com o traço do "escondido" ligado por classe — troca de ícone sem recarregar
   nada e sem script inline (a CSP do painel não aceita). */
.campo-senha .olho .risco { display: none; }
.campo-senha .olho[aria-pressed="true"] .risco { display: block; }

/* ---------- responsivo ---------- */

/* Entre ~860px e 1150px a coluna de texto encolhe mas a faixa fica MAIS alta (o texto quebra
   em mais linhas), e a medica — cuja largura sai da altura — cresce justamente quando falta
   espaco. Aqui ela e encostada na borda da JANELA em vez da borda do `.limite`: sao os ~4%
   de margem externa a mais, o que adia (e em boa parte evita) o encolhimento. */
@media (max-width: 1150px) {
  /* A janela avanca ate a borda da tela e engorda os ~4% da margem externa do `.limite`:
     e o espaco que faz a medica aparecer inteira por mais tempo antes de comecar a ser
     recortada pela esquerda. */
  .capa-figura {
    right: 0;
    width: calc(min(560px, 46vw) + 4vw - 8px);

    /* Esfumado na borda esquerda da janela. Sem ele o recorte termina numa linha reta no meio
       da manga do jaleco — branco sobre vinho, e o corte fica evidente. Com 64px de dissolucao
       o braco se dilui no veludo e a borda deixa de existir. Nao entra na regra base porque
       acima de ~1000px nao ha recorte nenhum para disfarcar. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 64px);
            mask-image: linear-gradient(90deg, transparent 0, #000 64px);
  }
}

/* ---- capa empilhada, a partir de 950px ----

   O corte de 950 nao e arbitrario: e onde a medica, na altura cheia da faixa, para de caber
   ao lado do texto. Acima disso ela aparece INTEIRA (o recorte da esquerda fica em 0 a 5px, e
   o esfumado da conta do resto). Abaixo, faltariam 80px de braco, e nenhum ajuste de coluna
   resolve — a faixa fica mais alta quando o texto quebra mais, e a largura dela sai da altura,
   entao apertar a coluna so piora. Empilhar e a saida honesta: o texto ocupa a largura toda e
   ela desce para o pe da faixa, sem recorte nenhum.

   A folga de baixo sai da LARGURA dela: a proporcao do recorte e 0,711 (3931x5531), entao a
   altura e largura/0,711. Sem essa conta o cartao e a etiqueta caem por cima da foto. */
/* ---- capa empilhada, a partir de 950px ----

   O corte de 950 nao e arbitrario: e onde a medica, na altura cheia da faixa, para de caber
   ao lado do texto. Acima disso ela aparece INTEIRA (o recorte da esquerda fica em 0 a 5px, e
   o esfumado da conta do resto). Abaixo, faltariam 80px de braco, e nenhum ajuste de coluna
   resolve — a faixa fica mais alta quando o texto quebra mais, e a largura dela sai da altura,
   entao apertar a coluna so piora.

   A capa vira dois andares: o texto ocupa a largura toda em cima, e embaixo o RODAPE (cartao +
   etiqueta) fica a esquerda da medica. A primeira versao empilhava tudo e deixava a foto
   sozinha num canto — num tablet de 768px sobravam 453px de veludo vazio ao lado dela.

   `min-height` do rodape = altura visivel da foto, com o conteudo alinhado ao pe: e o que faz
   os dois terminarem juntos e o fluxo reservar a altura certa, sem padding a mais na secao. */
@media (max-width: 950px) {
  .capa {
    --larg-medica: clamp(190px, 40vw, 320px);
    --alt-medica: calc(var(--larg-medica) / 0.711);
    --alt-visivel: calc(var(--alt-medica) * .64);
  }
  .capa-texto { max-width: none; }
  .capa-corpo { min-height: 0; padding-bottom: 0; }

  .capa-rodape {
    display: flex; flex-direction: column; justify-content: flex-end;
    min-height: var(--alt-visivel);
    max-width: calc(100% - var(--larg-medica) - 1.2rem);
    padding-bottom: clamp(1rem, 3vw, 1.8rem);
  }
  .capa-cartao { margin-top: 0; }

  /* Aqui a foto nao encosta em borda nenhuma da faixa por cima, entao o corte reto do arquivo
     ficaria a mostra — e o corte passa logo abaixo dos olhos dela. Solucao: a janela mostra so
     os ultimos 64% (do jaleco para baixo: gola, relogio, bolsa e estetoscopio) e os 70px de
     cima sao dissolvidos. Tecido branco se diluindo no veludo passa por enquadramento; meio
     rosto cortado no meio do veludo, nao. */
  .capa-figura {
    top: auto; bottom: 0; right: 0;
    width: var(--larg-medica);
    height: var(--alt-visivel);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 70px);
            mask-image: linear-gradient(180deg, transparent 0, #000 70px);
  }
  .capa-medica { top: auto; bottom: 0; height: var(--alt-medica); }
}

/* ---- celular: o rodape nao cabe ao lado dela ----
   O corte e 680 e nao 560: em 600px sobravam 250px para o cartao, a legenda quebrava em SETE
   linhas e ele virava um bloco alto e torto. Daqui para baixo o cartao e a etiqueta voltam
   para cima da foto, em largura cheia, e ela engorda para 68vw — o vazio ao lado dela cai de
   158px para 65px e ela deixa de parecer uma figurinha no canto. */
@media (max-width: 680px) {
  .capa { --larg-medica: clamp(200px, 68vw, 300px); }
  .capa-rodape {
    display: block;
    min-height: 0;
    max-width: none;
    padding-bottom: calc(var(--alt-visivel) + 1rem);
  }
}

@media (max-width: 860px) {
  /* No celular o cabeçalho ocupa duas linhas; grudado no topo ele comeria um terço da
     tela em cada rolagem. Melhor deixar rolar junto com a página. */
  /* `overflow-x: hidden` por causa da margem negativa do menu (o sangramento que faz os itens
     encostarem na borda ao rolar): sem isto ele empurrava a página inteira para os lados. */
  .topo { position: static; overflow-x: hidden; }

  /* ---- faixa da loja em UMA linha ----
     A frase longa quebrava em três linhas e a faixa sozinha ocupava 97px do topo. */
  .so-tela-larga    { display: none; }
  .so-tela-estreita { display: inline; }
  .faixa-loja { font-size: .8rem; }
  .faixa-loja .limite { flex-wrap: nowrap; gap: .6rem; padding: .45rem 0; }
  .faixa-loja .limite span,
  .faixa-loja .limite a { white-space: nowrap; }

  /* ---- menu atrás do botão ----
     Cinco itens quebravam em três linhas do cabeçalho. Fechado, o topo inteiro cabe numa
     linha; aberto, cada item ganha uma linha própria com área de toque de verdade. */
  .cabecalho { flex-wrap: wrap; row-gap: 0; column-gap: .8rem; }
  .marca { order: 1; }
  .menu-botao { display: block; order: 2; margin-left: auto; }
  /* "Meus números" sai do cabeçalho no celular: a própria capa já traz esse botão. */
  .cabecalho-acao { display: none; }

  /* Fechado é `display: none` mesmo, sem animação de altura: os truques que animam altura
     (grid 0fr, max-height) precisam de um único filho embrulhando a lista, e um menu de
     quatro itens não merece um elemento a mais no HTML só por causa de 0,18s de transição. */
  .menu {
    order: 3; flex: 1 0 100%; display: none;
    flex-direction: column; align-items: stretch; gap: 0;
    padding-bottom: .4rem;
  }
  .topo.menu-aberto .menu { display: flex; }
  .menu a {
    padding: .85rem .2rem; border-top: 1px solid var(--linha); font-size: 1rem;
  }

  /* ---- prêmios em faixa horizontal ----
     Nove cartões empilhados viravam uma coluna longa. Em faixa, o visitante vê um por vez e o
     corte do seguinte avisa que há mais. O deslize é CSS puro; o avanço automático e as
     bolinhas vêm de assets/carrossel.js, e sem ele a faixa continua arrastável com o dedo. */
  .premios {
    display: flex; grid-template-columns: none; gap: .8rem;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    padding-bottom: .4rem;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .premios::-webkit-scrollbar { display: none; }
  .premio {
    flex: 0 0 84%;              /* 84% deixa o próximo cartão espiando na borda */
    scroll-snap-align: center;
  }

  .carrossel-pontos { display: flex; justify-content: center; gap: .45rem; margin-top: .9rem; }
  .carrossel-ponto {
    width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
    background: var(--linha); cursor: pointer;
    /* o alvo de toque é maior que a bolinha, sem ocupar mais espaço na tela */
    box-shadow: 0 0 0 8px transparent; margin: 8px;
  }
  .carrossel-ponto[aria-selected="true"] { background: var(--carmim); }
  /* Sem a sangria de 1,5%: numa tela de 375px ela joga o rabo do "p" de premios para fora. */
  .capa-letreiro { width: min(330px, 68%); margin-left: 0; }
  .capa-cartao { max-width: 34rem; }
  .passos { grid-template-columns: 1fr; }
  .rodape-grade { grid-template-columns: 1fr; }
  .marca-logo { height: 32px; }
  /* A linha "Show de Prêmios 2026" sai do cabeçalho no celular: sem ela a logo e o botão
     "Meus números" cabem na MESMA linha, e o nome da campanha aparece logo abaixo, no título
     da página — repetido no cabeçalho ele custaria uma linha inteira de altura. */
  .marca-texto { display: none; }
  .faixa-loja .limite { justify-content: center; text-align: center; }
}

@media (max-width: 560px) {
  .assinatura { gap: 16px 26px; }

  /* O cartao deitado nao cabe em 375px: o filete vertical vira horizontal e a legenda
     desce para a linha de baixo. Gap e padding menores que o padrao — em coluna ele custava
     145px de altura numa faixa que ja passava da tela. */
  .capa-cartao {
    flex-direction: column; align-items: flex-start; gap: .55rem;
    padding: .75rem 1rem; margin: 1rem 0 1.1rem;
  }
  .cartao-marco {
    padding: 0 0 .55rem; border-right: 0;
    border-bottom: 1px solid rgba(255, 246, 236, .18); width: 100%;
  }

  /* Botoes lado a lado. Empilhados em largura cheia eles custavam 112px e davam a mesma
     importancia visual as duas acoes — mas "Ir as compras" e a secundaria. */
  .capa-acoes { flex-wrap: nowrap; gap: .5rem; }
  .capa-acoes .botao { padding: .62rem .9rem; font-size: .92rem; white-space: nowrap; }

  /* O letreiro e a manchete cedem um pouco: sao os dois maiores blocos antes do conteudo. */
  .capa-letreiro { width: min(300px, 62%); }
  .capa h1 { font-size: 1.7rem; }
}

@media (max-width: 480px) {
  .numero { gap: .4rem; }
  .numero-valor { font-size: 1.5rem; }
  .tabela { font-size: .85rem; }
}