/* Pagina de download do Hinario Sivayi Suku: base, barra e topo.
   Paleta da app (lib/core/theme/app_colors.dart, opcao 1): branco,
   marinho #1E3A5F, vermelho IESA #E31B23. Titulos em Merriweather, a
   letra de leitura da app. O motivo do topo junta a pauta de um hino e o
   disco vermelho do emblema da IESA. */

@font-face {
  font-family: 'Merriweather';
  src: url('fonte/merriweather-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --fundo: #ffffff;
  --superficie: #f8fafc;
  --cartao: #ffffff;
  --titulo: #1e3a5f;
  --marinho: #1e3a5f;
  --marinho-escuro: #0d326e;
  --marinho-iesa: #0d326e;
  --vermelho: #e31b23;
  --vermelho-texto: #e31b23;
  --texto: #1f2937;
  --texto-2: #475569;
  --texto-3: #64748b;
  --linha: #e2e8f0;
  --linha-forte: #cbd5e1;
  --pauta: rgba(30, 58, 95, 0.16);
  --barra: rgba(255, 255, 255, 0.92);
  --tinta: 13%;
  --moldura: #0b1220;
  --sombra-telemovel: 0 1px 2px rgba(15, 23, 42, 0.08), 0 26px 50px -26px rgba(13, 50, 110, 0.55);
  --serifa: 'Merriweather', Georgia, 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color-scheme: light dark;
}

/* Modo escuro: as cores do modo escuro da app (opcao 1: fundo #0a0a14,
   superficie #1a1a2e, azul #2563EB, o mesmo vermelho). Segue o telemovel. */
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #0a0a14;
    --superficie: #11111d;
    --cartao: #1a1a2e;
    --titulo: #f9fafb;
    --marinho: #2563eb;
    --marinho-escuro: #1d4ed8;
    --vermelho-texto: #ff5a61;
    --texto: #f1f5f9;
    --texto-2: #cbd5e1;
    --texto-3: #94a3b8;
    --linha: rgba(255, 255, 255, 0.1);
    --linha-forte: rgba(255, 255, 255, 0.24);
    --pauta: rgba(255, 255, 255, 0.14);
    --barra: rgba(10, 10, 20, 0.88);
    --tinta: 26%;
    --sombra-telemovel: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 26px 50px -24px rgba(0, 0, 0, 0.85);
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--fundo);
  color: var(--texto);
  font: 400 16px/1.6 var(--sans);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--vermelho); outline-offset: 3px; border-radius: 6px; }
::selection { background: rgba(227, 27, 35, 0.15); }
[hidden] { display: none !important; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg:not(.sprite) {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.conteudo {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left));
}
h1, h2 { font-family: var(--serifa); font-weight: 700; color: var(--titulo); letter-spacing: -0.01em; }
h1 { font-size: clamp(2.4rem, 10vw, 4.1rem); line-height: 1.06; }
h1 span { display: block; }
h2 { font-size: clamp(1.75rem, 6.4vw, 2.6rem); line-height: 1.15; }
h3 { font-size: 1.05rem; line-height: 1.3; color: var(--titulo); }

/* Barra */
.barra {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--barra);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linha);
}
.barra-dentro { display: flex; align-items: center; justify-content: space-between; min-height: 58px; gap: 12px; }
.marca {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--titulo);
  font: 700 0.9rem/1.2 var(--serifa);
  text-decoration: none;
  white-space: nowrap;
}
.marca img { border-radius: 50%; }
.idiomas { display: flex; gap: 2px; }
.idiomas button {
  min-width: 34px;
  min-height: 40px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--texto-3);
  font: 700 12px/1 var(--sans);
  letter-spacing: 0.04em;
  cursor: pointer;
}
.idiomas button[aria-pressed='true'] { color: var(--titulo); border-bottom-color: var(--vermelho); }

/* Topo */
.hero { padding: 40px 0 28px; overflow: hidden; }
.hero-grelha { display: grid; gap: 30px; }
.lema { margin-top: 14px; font-size: clamp(1.2rem, 4.6vw, 1.5rem); font-weight: 600; line-height: 1.35; }
.resumo { max-width: 33rem; margin-top: 12px; color: var(--texto-2); }
.gratis { margin-top: 16px; color: var(--texto-3); font-size: 0.9rem; }

/* Selos das lojas. Num telemovel aparece so o da sua loja, maior, e a
   outra fica num link por baixo; no computador, os dois selos com a
   mesma altura, como pedem a Apple e a Google. */
.lojas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.loja { display: block; border-radius: 10px; transition: transform 0.15s ease; }
.loja:hover { transform: translateY(-2px); }
.loja img { width: auto; height: 50px; }
[data-plataforma='ios'] .loja img,
[data-plataforma='android'] .loja img { height: 58px; }
[data-plataforma='ios'] .loja[data-loja='android'],
[data-plataforma='android'] .loja[data-loja='ios'] { display: none; }
.outras-lojas { margin-top: 10px; font-size: 0.92rem; }
.outra-loja { display: none; color: var(--texto-2); text-underline-offset: 3px; }
[data-plataforma='ios'] .outra-loja[data-loja='android'],
[data-plataforma='android'] .outra-loja[data-loja='ios'] { display: inline; }

.qr {
  display: none;
  align-items: center;
  gap: 16px;
  width: fit-content;
  max-width: 100%;
  margin-top: 22px;
  padding: 12px 18px 12px 12px;
  border: 1px solid var(--linha);
  border-radius: 16px;
  background: var(--superficie);
}
[data-plataforma='computador'] .qr { display: flex; }
.qr img { width: 104px; height: 104px; border-radius: 8px; background: #ffffff; }
.qr p { max-width: 15rem; color: var(--texto-2); font-size: 0.93rem; }

/* Palco: a pauta de cinco linhas, o disco vermelho como uma nota e dois
   telemoveis com capturas reais por cima. */
.palco { position: relative; width: min(100%, 440px); aspect-ratio: 1 / 1.16; margin: 0 auto; }
.pauta {
  position: absolute;
  top: 47%;
  right: -100vw;
  left: -100vw;
  height: 58px;
  background: repeating-linear-gradient(to bottom, var(--pauta) 0 2px, transparent 2px 14px);
}
.nota {
  position: absolute;
  top: 4%;
  left: 0;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--vermelho);
}
.telemovel {
  display: block;
  width: 100%;
  border: 6px solid var(--moldura);
  border-radius: 30px;
  background: var(--moldura);
  box-shadow: var(--sombra-telemovel);
}
.palco .telemovel { position: absolute; }
.telemovel-tras { top: 11%; left: 7%; width: 39%; transform: rotate(-6deg); }
.telemovel-frente { top: 13%; right: 7%; width: 45%; transform: rotate(4deg); }

/* Telemoveis estreitos (360 px): o nome e as quatro linguas cabem na
   mesma linha sem se tocarem. */
@media (max-width: 380px) {
  .marca { gap: 8px; font-size: 0.8rem; }
  .idiomas button { min-width: 29px; }
}

@media (min-width: 900px) {
  .hero { padding: 64px 0 56px; }
  .hero-grelha { grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: 48px; }
  .lojas { margin-top: 30px; }
  /* A pauta nasce no palco: por cima do texto atrapalhava a leitura. */
  .pauta { left: -10%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .loja { transition: none; }
}