/* ═══════════════════════════════════════════════════════════
   Magnatas on Ice — landing page do evento
   Caminhos relativos a esta pasta (css/), para funcionar na raiz do site e aberto direto no navegador
   ═══════════════════════════════════════════════════════════ */

/* ── Fontes (Barlow, SIL OFL — ver fonts/OFL.txt) ──────────
   Subconjunto latin do Google Fonts, só os pesos usados.
   font-display: swap evita texto invisível enquanto carregam. */
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/barlow-condensed-700.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/barlow-condensed-800.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 800; font-display: swap; src: url('../fonts/barlow-condensed-800-italic.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 900; font-display: swap; src: url('../fonts/barlow-condensed-900.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/barlow-400.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/barlow-600.woff2') format('woff2'); }

:root {
  --azul: #1E5BFF;
  --azul-claro: #3D8BFF;
  --azul-vivo: #2F9BFF;      /* subtítulos e destaques azuis da arte */
  --gelo: #BFE6FF;
  --gelo-claro: #E8F6FF;
  --fundo: #02040E;
  --painel: rgba(3, 10, 32, 0.78);     /* faixas das seções sobre o fundo oficial */
  --painel-forte: rgba(4, 13, 40, 0.92);
  --branco: #FFFFFF;
  --texto: rgba(255, 255, 255, 0.82);
  --texto-suave: rgba(255, 255, 255, 0.58);
  --borda: rgba(79, 160, 255, 0.22);
  --borda-forte: rgba(79, 160, 255, 0.5);
  --brilho: 0 0 18px rgba(47, 123, 255, 0.55), 0 0 44px rgba(47, 123, 255, 0.22);
  --fonte-titulo: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --fonte-texto: 'Barlow', system-ui, sans-serif;
  --topbar-h: 64px;
  --barra-h: 0px;
  --fundo-arte: #1F6FA8;       /* base amostrada da região central escura do fundo oficial */
  --fundo-largura: 100vw;
  --pincel: url('../img/pincelada.svg');
  --arte: url('../img/fundo-paraiso-tropical-gelo-agua.webp');  /* mesmo arquivo do fundo global */
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* scroll-padding-bottom: elementos focados pelo teclado não ficam sob a barra fixa do celular */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topbar-h) + 12px);
  scroll-padding-bottom: calc(var(--barra-h) + 12px);
}

body {
  background: var(--fundo-arte);
  color: var(--texto);
  font-family: var(--fonte-texto);
  font-size: 1rem;
  line-height: 1.6;
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

/* ── Fundo oficial da campanha ──────────────────────────────
   Uma única camada fixa atrás de toda a página. A arte (vertical, 1024x1536; original em img/fundo-paraiso-tropical-gelo-agua.png) ocupa a largura
   da tela e é percorrida de cima a baixo conforme a rolagem.
   js/main.js atualiza --fundo-progresso (0 a 1); sem JS, mostra o topo da arte. */
body::before {
  content: ''; position: fixed; z-index: -1; pointer-events: none;
  top: 0; left: 50%; width: var(--fundo-largura); aspect-ratio: 1024 / 1536;
  background: var(--arte) center top / 100% auto no-repeat;
  transform: translate3d(-50%, calc(var(--fundo-progresso, 0) * min(0px, 100vh - 100%)), 0);
  will-change: transform;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
[hidden] { display: none !important; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.container { width: min(1160px, 100% - 48px); margin-inline: auto; }

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--azul); color: var(--branco); padding: 10px 16px;
  font-weight: 600; text-decoration: none; transition: top .2s;
}
.skip-link:focus { top: 12px; }

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

/* ── Tipografia de apoio ────────────────────────────────── */
/* Letra "manuscrita" das frases soltas da arte: Barlow Condensed itálica, inclinada */
.manuscrito {
  font-family: var(--fonte-titulo); font-style: italic; font-weight: 800;
  text-transform: uppercase; line-height: 1.02; letter-spacing: .5px;
  color: var(--branco); transform: rotate(-7deg);
  text-shadow: 0 2px 14px rgba(0, 0, 0, .55);
}
.manuscrito strong, .manuscrito u { color: var(--azul-vivo); font-weight: 800; text-decoration-thickness: 3px; text-underline-offset: 6px; }

/* Faixa de pincel azul atrás de frases de destaque */
.pincel { display: inline-block; background: var(--pincel) center / 100% 100% no-repeat; padding: .55em 1.5em .6em; filter: drop-shadow(0 6px 18px rgba(0, 20, 80, .55)); }
.pincel > span {
  display: block; font-family: var(--fonte-titulo); font-style: italic; font-weight: 800;
  text-transform: uppercase; line-height: 1.05; color: var(--branco); letter-spacing: .5px;
}
.pincel u { text-decoration-thickness: 2px; text-underline-offset: 4px; }

.secao-tag {
  font-family: var(--fonte-titulo); font-weight: 700; font-size: .95rem;
  letter-spacing: 6px; text-transform: uppercase; color: var(--azul-vivo); margin-bottom: 10px;
}
.secao-titulo {
  font-family: var(--fonte-titulo); font-weight: 900; text-transform: uppercase;
  font-size: clamp(2.3rem, 4.4vw, 3.6rem); line-height: .95; color: var(--branco);
  margin-bottom: 22px;
}
.secao-titulo-sm { font-size: clamp(1.9rem, 3vw, 2.6rem); margin-bottom: 4px; }
.secao-sub {
  font-family: var(--fonte-titulo); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem); letter-spacing: 1px; color: var(--azul-vivo);
  margin-bottom: 28px;
}
.secao-sub-sm { font-family: var(--fonte-texto); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 1rem; margin-bottom: 24px; }
.destaque { color: var(--azul-vivo); text-shadow: 0 0 24px rgba(47, 123, 255, .5); }
.coroa-solta { color: var(--gelo); filter: drop-shadow(0 0 10px rgba(47, 155, 255, .7)); }

/* ── Botões ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 30px; border-radius: 999px;
  font-family: var(--fonte-titulo); font-size: 1rem; font-weight: 800;
  letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none; text-align: center;
  border: 1.5px solid transparent; cursor: pointer;
  transition: background .25s, color .25s, box-shadow .25s, transform .25s, border-color .25s;
}
.btn-primario { background: linear-gradient(180deg, #3F8CFF, #1D55F5); color: var(--branco); box-shadow: var(--brilho); }
.btn-primario:hover { background: linear-gradient(180deg, #5A9DFF, #2A63FF); transform: translateY(-2px); }
.btn-contorno { background: rgba(10, 30, 80, .45); color: var(--branco); border-color: var(--azul-claro); box-shadow: 0 0 14px rgba(47, 123, 255, .25); }
.btn-contorno:hover { background: rgba(30, 91, 255, .25); border-color: var(--gelo); }
.btn-sm { min-height: 44px; padding: 8px 22px; font-size: .9rem; }
.btn svg { flex-shrink: 0; }

/* Ingressos sem link confirmado: texto informativo, não um botão */
.ingressos-status {
  display: flex; align-items: center; gap: 10px; margin-top: 18px;
  font-family: var(--fonte-titulo); font-weight: 700; font-size: .95rem;
  letter-spacing: 2.5px; text-transform: uppercase; color: var(--texto);
}
.selo {
  font-family: var(--fonte-texto); font-size: .75rem; font-weight: 600; line-height: 1.4;
  letter-spacing: 1.5px; padding: 3px 9px; border-radius: 2px;
  background: rgba(232, 246, 255, .14); color: var(--gelo-claro); border: 1px solid rgba(191, 230, 255, .28);
}

/* ── Menu ───────────────────────────────────────────────── */
.topbar {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--topbar-h);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 0 clamp(16px, 4vw, 56px);
  background: rgba(2, 6, 20, .86); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--borda);
  transition: background .3s;
}
.topbar.rolou { background: rgba(2, 5, 16, .95); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.brand img { width: 40px; height: 40px; }
.brand-text {
  font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.15rem;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--branco);
}
.brand-text em { font-style: normal; color: var(--azul-vivo); }

.nav { display: flex; align-items: center; gap: clamp(18px, 2.6vw, 40px); }
.nav a {
  font-family: var(--fonte-titulo); font-size: .88rem; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none;
  color: var(--texto); position: relative; padding: 6px 0; transition: color .2s;
}
.nav a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px;
  background: var(--azul-vivo); box-shadow: 0 0 8px var(--azul-vivo); transition: right .25s;
}
.nav a:hover, .nav a:focus-visible { color: var(--branco); }
.nav a:hover::after { right: 0; }
.nav .nav-extra { display: none; }  /* "Dúvidas" só no menu do celular, como na arte */

.topbar-acoes { display: flex; align-items: center; gap: 12px; }
.topbar-cta { padding-inline: 20px; font-size: .82rem; }

.menu-toggle {
  display: none; width: 48px; height: 48px; background: none; border: 0; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.menu-toggle span { width: 24px; height: 2px; background: var(--branco); transition: transform .3s, opacity .3s; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ── Hero ───────────────────────────────────────────────── */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  padding: calc(var(--topbar-h) + 18px) clamp(20px, 4vw, 64px) 44px;
  overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; justify-content: center;
}
.hero-fundo {
  position: absolute; inset: 0; z-index: -3;
  background:
    /* elipse larga que esmaece até a borda. Sem max()/min() no tamanho: o Chrome invalida o
       radial-gradient e, com ele, a declaração background inteira */
    radial-gradient(ellipse 75% 50% at 50% 38%, rgba(47, 123, 255, .26), rgba(47, 123, 255, .08) 55%, transparent),
    /* fundo diurno e claro: véu azul-marinho, mais forte nas laterais e na base (onde ficam os textos) */
    linear-gradient(90deg, rgba(1, 8, 30, .62), rgba(1, 8, 30, .18) 32%, rgba(1, 8, 30, .18) 68%, rgba(1, 8, 30, .62)),
    linear-gradient(180deg, rgba(1, 8, 30, .25) 0%, rgba(1, 8, 30, .45) 60%, rgba(1, 8, 30, .85) 100%);
}
/* Neve: camada fixa do tamanho da tela, sobre o conteúdo de todas as seções e abaixo do menu (50)
   e da barra do celular (40). Não recebe cliques nem toques; opacidade discreta para não atrapalhar a leitura. */
.neve { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 30; pointer-events: none; opacity: .8; }
/* água congelada na base do hero: recorte do gelo da base da arte oficial */
.hero-gelo {
  position: absolute; left: 0; right: 0; bottom: 0; height: 34%; z-index: -1; pointer-events: none;
  background: var(--arte) center 100% / 100% auto no-repeat;
  opacity: .45;  /* a arte atual é clara na base: opacidade menor mantém a leitura dos dados do hero */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 55%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 55%);
}

/* --m: largura do mascote. Limitada pela largura e pela altura da tela (proporção 1178:1335),
   para o título e o botão aparecerem na primeira tela sem cortar a cabeça. */
.hero-palco {
  --m: clamp(325px, min(46vw, (100svh - 620px) * 1.7), 640px);
  position: relative; width: min(1320px, 100%); margin-inline: auto;
  display: grid; align-items: center; column-gap: clamp(16px, 2.5vw, 40px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 680px) minmax(0, 1fr);
  grid-template-areas:
    "slogan mascote roupa"
    "dados  centro  roupa";
}

/* Mascote oficial: estático (sem animação, parallax, fixed ou sticky); sai de cena com o hero. */
.hero-mascote { grid-area: mascote; justify-self: center; align-self: end; width: var(--m); position: relative; pointer-events: none; }
.hero-mascote::before {
  content: ''; position: absolute; inset: 6% 2% 18%; border-radius: 50%; z-index: -1;
  background: radial-gradient(closest-side, rgba(47, 123, 255, .38), rgba(47, 123, 255, .1) 60%, transparent);
}
.hero-mascote img, .final-mascote img {
  width: 100%; height: auto;
  filter: drop-shadow(0 0 26px rgba(47, 123, 255, .4));
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 98%);
  mask-image: linear-gradient(180deg, #000 72%, transparent 98%);
}

.hero-tag {
  grid-area: mascote; justify-self: center; align-self: start; z-index: 2;
  /* ancorada à esquerda do mascote, na altura do ombro, sem cobrir a cabeça */
  margin-top: calc(var(--m) * .2); transform: translateX(calc(var(--m) * -.6)) rotate(-8deg);
  font-size: clamp(.9rem, 1.3vw, 1.2rem);
}

.hero-centro { grid-area: centro; position: relative; z-index: 1; text-align: center; margin-top: calc(var(--m) * -.5); }

/* Logotipo oficial em gelo (PNG transparente, com margem própria de brilho).
   Largura igual ao "sizes" do index.html; margem negativa compensa o respiro transparente da arte. */
.hero-titulo { width: min(100%, 46vw, 680px, 100svh - 300px); margin: -2% auto -3%; }
.hero-titulo img { width: 100%; height: auto; filter: drop-shadow(0 10px 24px rgba(0, 8, 40, .6)); }

.hero-texto { max-width: 520px; margin: 18px auto 0; color: var(--branco); font-size: clamp(.98rem, 1.15vw, 1.08rem); text-shadow: 0 2px 10px rgba(0, 0, 0, .7); }
.hero-acoes { display: flex; justify-content: center; margin-top: 22px; }
.hero-nota { margin-top: 12px; font-size: .88rem; color: var(--texto-suave); }
.hero-nota a { color: var(--gelo); font-weight: 600; text-underline-offset: 3px; }

.hero-slogan { grid-area: slogan; justify-self: start; font-size: clamp(1.5rem, 2.4vw, 2.3rem); }
.hero-slogan strong { display: inline-block; font-size: 1.12em; border-bottom: 4px solid var(--azul-vivo); box-shadow: 0 6px 12px -6px var(--azul-vivo); line-height: .95; }

.hero-dados { grid-area: dados; align-self: end; justify-self: start; list-style: none; display: grid; gap: 18px; }
.hero-dados li { display: flex; align-items: center; gap: 14px; }
.hero-dados { text-shadow: 0 2px 10px rgba(0, 4, 20, .85); }
.hero-dados-icone { flex-shrink: 0; width: 52px; height: 52px; color: #5CB4FF; filter: drop-shadow(0 0 8px rgba(47, 155, 255, .7)) drop-shadow(0 2px 6px rgba(0, 4, 20, .8)); }
.hero-dados strong { display: block; font-family: var(--fonte-titulo); font-weight: 800; text-transform: uppercase; color: var(--branco); font-size: 1.3rem; line-height: 1.02; }
.hero-data { font-size: 1.7rem !important; }
.hero-dia { display: block; margin-top: 4px; font-family: var(--fonte-titulo); font-weight: 700; text-transform: uppercase; font-size: .88rem; letter-spacing: 1px; color: var(--texto); }
.hero-dia em { font-style: normal; color: #5CB4FF; }

.hero-roupa { grid-area: roupa; align-self: end; justify-self: end; font-size: clamp(1.25rem, 1.8vw, 1.75rem); text-align: center; margin-bottom: 18px; }
.hero-roupa svg { display: block; margin: 10px auto 0; color: var(--gelo); filter: drop-shadow(0 0 10px rgba(47, 155, 255, .7)); }

/* ── Seções (faixas sobre o fundo oficial) ──────────────── */
.secao { position: relative; padding: clamp(56px, 7vw, 92px) 0; background: var(--painel); border-top: 1px solid var(--borda); }
.secao::before {
  /* fio de luz no topo de cada faixa */
  content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(79, 160, 255, .7), transparent);
}

/* O primeiro capítulo */
.capitulo-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.capitulo-texto > p:not(.secao-tag) { max-width: 520px; margin-top: 14px; color: var(--texto); }
.capitulo-texto strong { color: var(--branco); }
.capitulo-texto > p.capitulo-destaque { color: var(--azul-vivo); font-weight: 600; }
.capitulo-texto > p.capitulo-assinatura { margin-top: 48px; color: var(--branco); font-size: clamp(1.35rem, 2.2vw, 1.85rem); transform: rotate(-5deg); transform-origin: left; }

/* Galeria: 3 fotos reais do local em polaroids inclinadas. A piscina vista de frente é a foto
   principal (maior e por cima); as outras duas descem em diagonal à direita e o selo ocupa o canto
   inferior esquerdo. As fotos são quadradas (283x283): aspect-ratio 1 mostra cada uma inteira. */
.capitulo-fotos { position: relative; aspect-ratio: 1 / 1.04; max-width: 560px; justify-self: center; width: 100%; }
.polaroid {
  position: absolute; width: 40%; margin: 0; background: #F4F8FF; padding: 2.2% 2.2% 6%;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .55), 0 0 0 1px rgba(79, 160, 255, .35), 0 0 26px rgba(47, 123, 255, .35);
}
.polaroid img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.polaroid-principal { width: 62%; left: 0; top: 3%; transform: rotate(-3deg); z-index: 3; }
.polaroid-apoio-1 { right: 1%; top: 9%; transform: rotate(4deg); z-index: 1; }
.polaroid-apoio-2 { right: 6%; bottom: 2%; transform: rotate(-3deg); z-index: 2; }
.capitulo-selo { position: absolute; left: 7%; bottom: 9%; z-index: 4; font-size: clamp(1.1rem, 1.6vw, 1.45rem); text-align: center; transform: rotate(-4deg); }
.capitulo-selo svg { display: block; margin: 6px auto 0; color: var(--gelo); }

/* A experiência */
.cards-experiencia { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); }
.card-exp {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 0 18px 26px; border: 1px solid var(--borda-forte); border-radius: 10px; overflow: hidden;
  background: linear-gradient(180deg, rgba(6, 22, 66, .9), rgba(3, 10, 32, .95));
  box-shadow: 0 0 22px rgba(30, 91, 255, .18), inset 0 0 0 1px rgba(191, 230, 255, .04);
}
/* Mídia do card: imagem da experiência (img/experiencia/), com fade azul-escuro na base para o ícone */
.card-midia {
  position: relative; display: grid; place-items: center; width: calc(100% + 36px); aspect-ratio: 1.3; margin: 0 -18px; overflow: hidden;
}
.card-midia::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(3, 10, 32, .9)); }
.card-midia img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card-icone {
  position: relative; z-index: 1; margin-top: -36px; width: 72px; height: 72px; border-radius: 50%;
  display: grid; place-items: center; color: var(--azul-vivo);
  background: #061A4D; border: 1.5px solid var(--borda-forte); box-shadow: 0 0 18px rgba(47, 155, 255, .45);
}
.card-icone svg { width: 36px; height: 36px; color: #5CB4FF; filter: drop-shadow(0 0 8px rgba(47, 155, 255, .8)); }
.card-exp h3 { margin-top: 12px; font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.45rem; letter-spacing: 1px; text-transform: uppercase; color: var(--branco); }
.card-exp p { margin-top: 6px; font-size: .95rem; line-height: 1.45; max-width: 220px; }

/* Lista com ícones (informações e mercado) */
.lista-icones { list-style: none; display: grid; gap: 18px; margin-bottom: 28px; }
.lista-icones li { display: flex; align-items: center; gap: 16px; }
.lista-icones svg { flex-shrink: 0; width: 44px; height: 44px; color: var(--azul-vivo); filter: drop-shadow(0 0 8px rgba(47, 155, 255, .55)); }
/* item sem ícone: o texto fica alinhado ao dos demais (44px do ícone + 16px de gap) */
.lista-icones li.sem-icone { padding-left: 60px; }
.lista-icones strong { display: block; font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.15rem; letter-spacing: 1px; text-transform: uppercase; color: var(--azul-vivo); line-height: 1.1; }
.lista-icones span { color: var(--branco); line-height: 1.4; }

/* Informações do evento */
.informacoes { overflow: hidden; }
.informacoes::after {
  /* palmeiras e gelo da lateral direita da arte oficial, por trás da composição */
  content: ''; position: absolute; inset: 0 0 0 42%; z-index: 0; pointer-events: none;
  background: var(--arte) 100% 12% / 230% auto no-repeat; opacity: .7;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%);
  mask-image: linear-gradient(90deg, transparent, #000 40%);
}
.info-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 40px; align-items: center; }
.pincel-sub { margin: 10px 0 30px -10px; font-size: clamp(1.1rem, 1.7vw, 1.4rem); transform: rotate(-3deg); }
.info-arte { position: relative; display: grid; place-items: center; min-height: 340px; }
.pincel-citacao { font-size: clamp(1.15rem, 1.9vw, 1.6rem); transform: rotate(-9deg); text-align: center; }
.info-arte .coroa-solta { position: absolute; left: 58%; bottom: 14%; }

/* O mercado dos stakeholders */
.mercado-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr) minmax(0, .7fr); gap: clamp(24px, 3vw, 44px); align-items: center; }
.mercado-coluna .lista-icones { margin-bottom: 0; }
.mercado-centro { text-align: center; display: grid; justify-items: center; gap: 10px; }
.mercado-centro .coroa-solta { margin: -6px 0 0 40%; }
.mercado-aviso { max-width: 300px; color: var(--branco); font-weight: 600; }
.mercado-letrinha { font-size: .78rem; color: var(--texto-suave); }
.mercado-painel {
  position: relative; display: grid; gap: 14px; justify-items: center; text-align: center; text-decoration: none;
  padding: 26px 20px; border: 1px solid var(--borda-forte); border-radius: 10px; overflow: hidden;
  background: linear-gradient(160deg, rgba(10, 40, 120, .55), rgba(3, 10, 32, .9));
  box-shadow: 0 0 26px rgba(30, 91, 255, .25); transition: border-color .25s, box-shadow .25s;
}
.mercado-painel:hover { border-color: var(--gelo); box-shadow: 0 0 34px rgba(47, 155, 255, .4); }
.mercado-grafico { width: 100%; height: auto; }
.grafico-grade { stroke: rgba(191, 230, 255, .12); stroke-width: 1; fill: none; }
.grafico-area { fill: rgba(47, 155, 255, .16); }
.grafico-linha { stroke: var(--azul-vivo); stroke-width: 3; fill: none; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(47, 155, 255, .8)); }
.mercado-painel .manuscrito { font-size: 1.35rem; transform: rotate(-5deg); }
.mercado-painel-link { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--gelo); font-weight: 600; }

/* Os lotes */
.lotes-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .8fr); gap: clamp(16px, 2.2vw, 28px); align-items: stretch; }
.card-lote {
  display: flex; gap: 18px; padding: 26px 24px; border: 1px solid var(--borda-forte); border-radius: 10px;
  background: linear-gradient(160deg, rgba(8, 28, 84, .75), rgba(3, 10, 32, .92));
  box-shadow: 0 0 20px rgba(30, 91, 255, .15);
}
.card-lote > div { display: flex; flex-direction: column; align-items: flex-start; }
.card-lote .btn { margin-top: auto; }
.card-lote-icone { flex-shrink: 0; color: var(--azul-vivo); filter: drop-shadow(0 0 8px rgba(47, 155, 255, .55)); }
.card-lote-ordem { font-family: var(--fonte-titulo); font-weight: 800; text-transform: uppercase; color: var(--branco); font-size: 1.05rem; letter-spacing: 1px; line-height: 1; }
.card-lote h3 { font-family: var(--fonte-titulo); font-weight: 800; text-transform: uppercase; color: var(--branco); font-size: clamp(1.4rem, 2vw, 1.75rem); line-height: 1.05; letter-spacing: .5px; }
.card-lote p:not(.card-lote-ordem) { margin: 10px 0 18px; font-size: .95rem; line-height: 1.45; }
.lotes-oportunidade {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px 14px; padding: 24px 22px;
  border: 1px solid var(--borda-forte); border-radius: 10px; color: var(--azul-vivo);
  background: linear-gradient(150deg, rgba(47, 123, 255, .22), rgba(3, 10, 32, .7));
  box-shadow: 0 0 30px rgba(47, 123, 255, .3), inset 0 0 30px rgba(191, 230, 255, .06);
  transform: perspective(900px) rotateY(-10deg) rotate(1.5deg);
}
.lotes-oportunidade svg { filter: drop-shadow(0 0 10px rgba(47, 155, 255, .7)); }
.lotes-oportunidade-titulo { font-family: var(--fonte-titulo); font-weight: 800; text-transform: uppercase; font-size: 1.3rem; line-height: 1.05; color: var(--azul-vivo); }
.lotes-oportunidade .manuscrito { grid-column: 1 / -1; justify-self: center; font-size: clamp(1.3rem, 1.9vw, 1.6rem); text-align: center; margin-top: 6px; }

/* A contagem começou */
.contagem { overflow: hidden; background: linear-gradient(180deg, rgba(4, 18, 60, .88), rgba(3, 10, 32, .9)); }
.contagem-gelo {
  /* blocos de gelo nas laterais: recorte da base da arte oficial */
  position: absolute; inset: 0; pointer-events: none;
  background: var(--arte) 50% 100% / 100% auto no-repeat;
  -webkit-mask-image: linear-gradient(90deg, #000 0 10%, transparent 26% 74%, #000 90%);
  mask-image: linear-gradient(90deg, #000 0 10%, transparent 26% 74%, #000 90%);
  opacity: .7;  /* a arte é clara nas laterais: mantém o gelo sem apagar o subtítulo */
}
.contagem::after {
  /* véu escuro atrás do título, subtítulo e caixas (a arte de fundo é clara nas laterais) */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 62% 75% at 32% 50%, rgba(2, 8, 28, .7), rgba(2, 8, 28, .25) 70%, transparent);
}
.contagem-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 32px; align-items: center; }
.contagem-caixas { display: grid; grid-template-columns: repeat(4, minmax(0, 150px)); gap: clamp(10px, 1.6vw, 20px); }
.contagem-caixa {
  display: grid; justify-items: center; padding: 20px 6px 16px; border-radius: 10px;
  border: 1px solid var(--borda-forte); background: rgba(2, 8, 26, .85);
  box-shadow: 0 0 18px rgba(30, 91, 255, .25), inset 0 0 18px rgba(47, 123, 255, .08);
}
.contagem-num { font-family: var(--fonte-titulo); font-weight: 800; font-size: clamp(2.6rem, 4.8vw, 4.1rem); line-height: 1; color: var(--branco); font-variant-numeric: tabular-nums; }
.contagem-rotulo { margin-top: 6px; font-family: var(--fonte-titulo); font-weight: 700; font-size: .85rem; letter-spacing: 2px; text-transform: uppercase; color: var(--texto); }
.contagem-encerrada .contagem-caixa { opacity: .6; }
.contagem-assinatura { display: grid; justify-items: center; text-align: center; gap: 4px; }
.contagem-data { font-size: clamp(1.1rem, 1.6vw, 1.4rem); transform: rotate(-6deg); margin-bottom: 18px; }

/* Logotipo oficial MAGNATAS ON ICE no lugar das assinaturas escritas (contagem, chamada final, barra do celular) */
.logo-assinatura { display: block; margin: 0; line-height: 0; }
.logo-assinatura img { display: block; width: 100%; height: auto; object-fit: contain; filter: drop-shadow(0 8px 20px rgba(0, 8, 40, .6)); }
.contagem-logo { width: clamp(240px, 26vw, 340px); }

/* Dúvidas frequentes */
.faq-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px clamp(16px, 2.4vw, 32px); align-items: start; }
.faq-item { border: 1px solid var(--borda); border-radius: 6px; background: rgba(4, 14, 44, .8); transition: border-color .2s; }
.faq-item[open] { border-color: var(--borda-forte); box-shadow: 0 0 16px rgba(30, 91, 255, .18); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 52px; padding: 12px 18px; cursor: pointer; list-style: none;
  font-weight: 600; color: var(--branco); font-size: .98rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  /* indicador + / − */
  content: ''; flex-shrink: 0; width: 14px; height: 14px;
  background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
              linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
  transition: transform .25s, background-size .25s;
}
.faq-item[open] summary::after { transform: rotate(180deg); background-size: 100% 2px, 2px 0; }
.faq-item summary:hover { color: var(--gelo); }
.faq-item p { padding: 0 18px 16px; font-size: .95rem; }
.faq-item p a { color: var(--gelo); font-weight: 600; text-underline-offset: 3px; }
.contato-duvidas {
  margin-top: 28px; padding: 16px 20px; border: 1px solid var(--borda); border-radius: 8px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  background: rgba(4, 14, 44, .6);
}

/* Chamada final */
.final {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr) minmax(0, .9fr); align-items: center;
  gap: 24px; padding: 40px clamp(20px, 5vw, 72px) 0; min-height: 360px;
  border-top: 1px solid var(--borda-forte);
  background: linear-gradient(180deg, rgba(10, 40, 130, .55), rgba(3, 10, 32, .65));
}
.final::before {
  /* respingos e gelo: recorte da base da arte oficial */
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--arte) 50% 100% / 100% auto no-repeat; opacity: .55;  /* contraste da assinatura, redes e textos */
}
.final::after {
  /* sombra sobre o gelo claro da arte, atrás da marca e das redes (lado direito) */
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, transparent 52%, rgba(2, 8, 28, .78) 72%, rgba(2, 8, 28, .78));
}
.final-mascote { align-self: end; justify-self: start; width: min(340px, 100%); }
.final-centro { text-align: center; padding-bottom: 40px; }
.final-logo-ice { width: clamp(300px, 34vw, 460px); margin-inline: auto; }
.final-frase { margin-top: 20px; font-size: clamp(1.15rem, 1.8vw, 1.6rem); transform: rotate(-6deg); }
.final-marca { display: grid; justify-items: center; gap: 16px; padding-bottom: 40px; text-align: center; }
.final-logo, .rodape-marca {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--fonte-titulo); font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; color: var(--branco); font-size: 1.2rem;
}
.final-logo em, .rodape-marca em { font-style: normal; color: var(--azul-vivo); }
.redes { list-style: none; display: flex; gap: 12px; }
.redes a {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  border: 1.5px solid var(--borda-forte); color: var(--branco); background: rgba(4, 14, 44, .7);
  box-shadow: 0 0 12px rgba(47, 123, 255, .3); transition: border-color .2s, color .2s;
}
.redes a:hover { border-color: var(--gelo); color: var(--gelo); }
.final-juntos { color: var(--azul-vivo); font-size: 1.2rem; transform: rotate(-6deg); }

/* Rodapé */
.rodape { padding: 22px 0; background: rgba(1, 4, 14, .94); border-top: 1px solid var(--borda); }
.rodape-grid { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; }
.rodape-marca { font-size: 1rem; }
.rodape-marca img { width: 36px; height: 36px; }
.rodape-frase { color: var(--texto); font-size: .92rem; }
.rodape-copy { margin-left: auto; font-size: .82rem; color: var(--texto-suave); }
.rodape-copy a { color: var(--texto); text-underline-offset: 3px; display: inline-block; padding: 12px 0; margin: -12px 0; }

/* Barra fixa — só no celular; js/main.js adiciona .visivel no trecho certo da página */
.barra-acao { display: none; }

/* ── Responsivo ─────────────────────────────────────────── */
/* ═══ Pinceladas reais (img/pinceladas/): só decoração, em pseudo-elementos
   (fora da árvore de acessibilidade e sem receber cliques) ═══ */
/* A. horizontal: fundo da faixa "O primeiro evento oficial" do hero (substitui o SVG só nela) */
.hero-tag { background: none; }
.hero-tag::before {
  content: ""; position: absolute; inset: -24% -30% -28% -9%; z-index: -1; pointer-events: none;
  background: url("../img/pinceladas/pincelada-horizontal.webp") 0 50% / 100% 100% no-repeat;
}
.hero-tag > span { position: relative; text-shadow: 0 2px 6px rgba(0, 12, 60, .55); }
/* "Anota aí, stakeholder!": pincelada azul com respingos (img/pinceladas/pincelada-respingos.*).
   A arte é ajustada à faixa de uma linha; o miolo denso da tinta (a ponta com respingos fica à
   direita) é alinhado ao texto, e +6° deixa o eixo da tinta paralelo à frase (-3°). */
/* margem esquerda positiva: a tinta não passa da borda da seção em nenhuma largura */
.pincel-sub { position: relative; background: none; margin: 30px 0 36px 8px; }
.pincel-sub::before {
  content: ""; position: absolute; inset: -56% -19% -52% -9%; z-index: -1; pointer-events: none;
  transform: rotate(6deg);
  background: url("../img/pinceladas/pincelada-respingos.webp") center / 100% 100% no-repeat;
}
.pincel-sub > span { position: relative; text-shadow: 0 2px 6px rgba(0, 12, 60, .55); }
/* A. horizontal também na frase de "Informações do evento": a tinta acompanha o bloco de texto
   (os respingos saem à direita, fora da área do texto) */
.info-arte .pincel-citacao { position: relative; background: none; padding: .55em 1.1em .6em; font-size: clamp(1.05rem, 1.7vw, 1.45rem); }
/* top: sobe só o texto dentro da tinta (o ::before da pincelada fica no <p> e não se move) */
.info-arte .pincel-citacao > span { line-height: 1.14; top: -10px; }
.info-arte .pincel-citacao::before {
  /* tinta dimensionada pela altura do bloco de 5 linhas, levemente compactada no sentido do traço
     (2,3:1 em vez de 3,1:1, como na versão anterior) para envolver o texto sem se alongar pela seção.
     O miolo mais largo da pincelada (a ponta afinada e os respingos ficam à direita) é alinhado
     ao centro do texto; +3° deixa o eixo da tinta paralelo às linhas. Só a tinta é escalada, não as letras. */
  content: ""; position: absolute; left: 50%; top: 50%; z-index: -1; pointer-events: none;
  height: 152%; aspect-ratio: 2.3;
  transform: translate(-35%, -50%) rotate(3deg);
  background: url("../img/pinceladas/pincelada-horizontal.webp") center / 100% 100% no-repeat;
}
.info-arte .pincel-citacao > span { position: relative; text-shadow: 0 2px 6px rgba(0, 12, 60, .55); }
/* B. diagonal: chamada do "Mercado dos stakeholders". A tinta é girada (+24°) para ficar paralela
   ao texto e comprimida no sentido do traço para acompanhar a largura da frase; o conjunto
   inteiro mantém a inclinação de -9° da chamada. */
.mercado-centro .pincel-citacao { position: relative; background: none; padding: .7em 1.2em .8em; }
.mercado-centro .pincel-citacao::before {
  /* o corpo mais largo da tinta fica à esquerda da arte: o centro da imagem vai para a direita
     para o miolo da pincelada coincidir com o centro do texto */
  content: ""; position: absolute; left: 58%; top: 50%; z-index: -1; pointer-events: none;
  width: 250%; aspect-ratio: 1224 / 670;
  transform: translate(-50%, -50%) scaleX(.52) rotate(20deg);
  background: url("../img/pinceladas/pincelada-diagonal.webp") center / contain no-repeat;
}
.mercado-centro .pincel-citacao > span { position: relative; text-shadow: 0 2px 6px rgba(0, 12, 60, .55); }
.mercado-centro { gap: 0; }
.mercado-centro .coroa-solta { margin: 18px 0 14px 40%; }
.mercado-aviso { margin-bottom: 8px; }
/* C. explosão: fundo discreto atrás da assinatura, da data e do botão de ingresso da contagem */
.contagem-assinatura { position: relative; isolation: isolate; }
.contagem-assinatura::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: 52%; width: min(470px, 125%); aspect-ratio: 720 / 494;
  transform: translate(-50%, -50%);
  background: url("../img/pinceladas/explosao-tinta.webp") center / contain no-repeat;
  opacity: .5;
  -webkit-mask-image: radial-gradient(closest-side, #000 65%, transparent);
  mask-image: radial-gradient(closest-side, #000 65%, transparent);
}

@media (max-width: 1100px) {
  /* laterais do hero descem para baixo do título */
  .hero-palco {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "mascote mascote" "centro centro" "dados roupa";
    row-gap: 28px;
  }
  .hero-slogan { display: none; }
  .hero-dados { align-self: center; }
  .hero-roupa { align-self: center; margin: 0; }
  .mercado-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mercado-painel { grid-column: 1 / -1; grid-template-columns: minmax(0, 220px) auto; align-items: center; justify-content: center; text-align: left; }
  .mercado-painel .mercado-painel-link { grid-column: 2; }
  .lotes-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lotes-oportunidade { grid-column: 1 / -1; transform: none; justify-self: center; width: min(520px, 100%); }
  .contagem-grid { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .contagem::after { background: radial-gradient(ellipse 70% 60% at 50% 45%, rgba(2, 8, 28, .72), rgba(2, 8, 28, .3) 70%, transparent); }
  .contagem-caixas { justify-content: center; }
}

@media (max-width: 900px) {
  :root { --topbar-h: 60px; --barra-h: 76px; }
  .topbar-cta { display: none; }
  .menu-toggle { display: flex; }
  .nav {
    position: fixed; top: var(--topbar-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px 24px 24px;
    background: rgba(2, 4, 14, .97); backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--borda);
    transform: translateY(-110%); visibility: hidden;
    transition: transform .3s ease, visibility .3s;
    max-height: calc(100vh - var(--topbar-h)); overflow-y: auto;
  }
  .nav.aberto { transform: none; visibility: visible; }
  .nav a { padding: 14px 0; min-height: 48px; font-size: 1rem; border-bottom: 1px solid var(--borda); }
  .nav a::after { display: none; }
  .nav .nav-extra { display: block; }

  .hero { padding-bottom: 36px; justify-content: flex-start; }
  /* mascote ~27% maior que antes (440px→560px, 200px→254px, 1.4→1.78), sem passar de 98vw para não cortar a arte */
  .hero-palco { --m: min(98vw, 560px, max(254px, (100svh - 470px) * 1.78)); row-gap: 26px; }
  .hero-centro { margin-top: calc(var(--m) * -.3); }
  /* com o mascote maior, a faixa não pode sair pela borda esquerda da tela (≈116px = metade da faixa + margem) */
  .hero-tag { transform: translateX(max(var(--m) * -.6, 116px - 50vw)) rotate(-8deg); }
  .hero-titulo { width: min(100%, 520px); }

  .capitulo-grid { grid-template-columns: 1fr; }
  .capitulo-fotos { max-width: 480px; }
  .cards-experiencia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .info-grid { grid-template-columns: 1fr; gap: 12px; }
  .informacoes::after { inset: 45% 0 0 0; -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%); mask-image: linear-gradient(180deg, transparent, #000 40%); }
  .info-arte { min-height: 260px; }
  .mercado-grid { grid-template-columns: 1fr; }
  /* coluna única: respiro entre as regras do pregão e os respingos da pincelada da chamada */
  .mercado-centro .pincel-citacao { margin-top: 28px; }
  .faq-lista { grid-template-columns: 1fr; }
  .final { grid-template-columns: 1fr; justify-items: center; padding-top: 48px; text-align: center; }
  .final::after { display: none; }  /* coluna única: a marca não fica sobre o gelo lateral */
  .final-centro, .final-marca { padding-bottom: 0; }
  .final-marca { padding-bottom: 32px; }
  .final-mascote { order: 3; justify-self: center; width: min(260px, 70vw); }
  .rodape-grid { flex-direction: column; text-align: center; }
  .rodape-copy { margin-left: 0; }
  .rodape { padding-bottom: calc(22px + var(--barra-h)); }

  .barra-acao {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    min-height: var(--barra-h); padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    background: rgba(2, 4, 14, .92); backdrop-filter: blur(14px);
    border-top: 1px solid var(--borda);
    /* oculta = fora da tela, fora da ordem de tabulação e da árvore de acessibilidade */
    visibility: hidden; transform: translateY(100%);
    transition: transform .3s ease, visibility 0s linear .3s;
  }
  .barra-acao.visivel { visibility: visible; transform: none; transition: transform .3s ease, visibility 0s; }
  .barra-logo { width: 104px; }
  .barra-logo img { filter: none; }
}

@media (max-width: 560px) {
  .container { width: calc(100% - 40px); }
  .brand-text { font-size: 1rem; letter-spacing: 1px; }
  .brand img { width: 34px; height: 34px; }
  /* minmax(0, 1fr): o mascote pode ocupar as margens laterais sem alargar a coluna do texto */
  .hero-palco { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tag" "mascote" "centro" "dados" "roupa"; }
  /* no celular estreito a faixa ganha linha própria, acima do mascote, para não cobrir a arte */
  .hero-tag { grid-area: tag; justify-self: center; margin: 0 0 calc(var(--m) * -.12); transform: rotate(-4deg); font-size: .85rem; }
  .hero-dados { justify-self: center; }
  .hero-roupa { justify-self: center; display: none; }
  .hero-acoes .btn { width: 100%; }
  /* galeria no celular: grade simples, com a principal em cima e as duas complementares lado a
     lado embaixo, sem sobreposição; o selo fica acima das fotos, sem cobrir nenhuma */
  .capitulo-fotos { aspect-ratio: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 7%; margin-top: 96px; padding: 0 2%; }
  .polaroid { position: relative; width: auto; inset: auto; padding: 7px 7px 22px; }
  .polaroid-principal { grid-column: 1 / -1; width: 84%; justify-self: center; transform: rotate(-2deg); }
  .polaroid-apoio-1 { transform: rotate(-3deg); }
  .polaroid-apoio-2 { transform: rotate(3deg); }
  .capitulo-selo { top: -92px; right: 4%; left: auto; bottom: auto; }
  .cards-experiencia { gap: 12px; }
  .card-exp { padding: 0 12px 20px; }
  .card-midia { width: calc(100% + 24px); margin: 0 -12px; }
  .card-exp h3 { font-size: 1.25rem; }
  .card-exp p { font-size: .88rem; }
  .lotes-grid { grid-template-columns: 1fr; }
  .card-lote { padding: 22px 18px; }
  .card-lote .btn { width: 100%; }
  .contagem-caixas { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: 100%; }
  .contagem-num { font-size: 2.3rem; }
  .contagem-rotulo { font-size: .75rem; letter-spacing: 1px; }
  .contato-duvidas .btn { width: 100%; }
  .barra-logo { width: 92px; }
  /* frase de Informações no celular: fonte um pouco menor para a tinta caber na largura da tela
     sem passar das bordas */
  .info-arte .pincel-citacao { font-size: .95rem; }
  .info-arte .pincel-citacao > span { top: -7px; }
  .info-arte .pincel-citacao::before { height: 140%; transform: translate(-36%, -50%) rotate(3deg); }
  .pincel-sub::before { inset: -58% -12% -50% -5%; }
  /* explosão um pouco menor no celular */
  .contagem-assinatura::before { width: 115%; opacity: .45; }
}

@media (max-width: 380px) {
  .cards-experiencia { grid-template-columns: 1fr; }
}

/* Telas baixas na horizontal (celular deitado): mascote à esquerda, título e botão à direita.
   Se mudar a largura do mascote aqui, ajuste também o "sizes" da imagem no index.html. */
@media (orientation: landscape) and (max-height: 500px) {
  .hero { justify-content: center; padding-bottom: 20px; }
  .hero-palco {
    --m: calc((100svh - var(--topbar-h) - 36px) * 1178 / 1335);
    grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "mascote centro" "dados dados";
    row-gap: 22px;
  }
  .hero-slogan, .hero-roupa, .hero-tag { display: none; }
  .hero-centro { margin-top: 0; }
  .hero-titulo { width: min(100%, 36vw, 75svh); }
  .hero-texto { margin-top: 10px; font-size: .95rem; }
  .hero-acoes { margin-top: 14px; }
  .hero-acoes .btn { width: auto; }
  .hero-dados { grid-auto-flow: column; justify-self: center; gap: 32px; }
}

/* ── Movimento reduzido ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .neve { display: none; }
  /* sem deslocamento do fundo durante a rolagem */
  body::before { transform: translate3d(-50%, 0, 0); will-change: auto; }
}