/* =========================================================================
   Viva Maracanã — protótipo "Ponto de fuga"
   Camada 1: primitivos, tokens e base.

   Régua desta rodada: cada seção resolve inteira em 1366 x 768. O cabeçalho
   não é permanente, então a altura útil é a tela cheia.
   ========================================================================= */

:root {
  /* ---------- 1.1 As três cores aprovadas e seus vizinhos --------------- */
  --amarelo:        #ffb800;
  --verde:          #005500;
  --azul:           #134078;

  --azul-fundo:     #0a2247;
  --azul-abismo:    #05132a;
  --breu:           #01060e;
  --azul-claro:     #2d6bb8;
  --verde-fundo:    #04360a;
  --amarelo-quente: #ffd56f;
  --creme:          #f3efe4;
  --tinta:          #06101f;
  --tom-tour:       #061c3d;   /* o azul do bloco do Tour Oficial */

  --v-100: rgba(255,255,255,.96);
  --v-80:  rgba(255,255,255,.78);
  --v-60:  rgba(255,255,255,.58);
  --v-40:  rgba(255,255,255,.34);
  --v-20:  rgba(255,255,255,.16);
  --v-10:  rgba(255,255,255,.08);

  /* ---------- 1.2 Papéis ------------------------------------------------ */
  --superficie:  var(--azul-fundo);
  --texto:       var(--v-100);
  --texto-calmo: var(--v-80);
  --texto-tenue: var(--v-60);
  --fio:         var(--v-20);
  --acento:      var(--amarelo);

  /* ---------- 1.3 Tipografia -------------------------------------------- */
  --face-display: 'Big Shoulders Display', 'Archivo', Impact, sans-serif;
  --face-corpo:   'Montserrat', system-ui, sans-serif;

  /* Escala refeita para caber em 768 de altura: o topo caiu quase um terço
     em relação à rodada anterior. */
  --t-nano:  clamp(.62rem, .56rem + .2vw, .7rem);
  --t-micro: clamp(.7rem, .64rem + .24vw, .78rem);
  --t-corpo: clamp(.9rem, .85rem + .24vw, 1rem);
  --t-lead:  clamp(1rem, .92rem + .4vw, 1.18rem);
  --t-d3:    clamp(1.5rem, 1.1rem + 1.7vw, 2.3rem);
  --t-d2:    clamp(1.9rem, 1.25rem + 2.7vw, 3.4rem);
  --t-d1:    clamp(2.4rem, 1.5rem + 3.9vw, 5rem);

  /* ---------- 1.4 Ritmo ------------------------------------------------- */
  --e1: .5rem;  --e2: 1rem;  --e3: 1.5rem; --e4: 2.5rem;
  --e5: 4rem;   --e6: 6rem;
  --calha: clamp(1.25rem, .7rem + 2.2vw, 3.5rem);
  --leito: 1290px;

  /* ---------- 1.5 Movimento --------------------------------------------- */
  --mola: cubic-bezier(.22,1,.36,1);
  --seco: cubic-bezier(.65,0,.35,1);
}

/* Bases de seção: trocam o papel, nunca o primitivo. */
[data-base="breu"]   { --superficie: var(--breu); }
[data-base="noite"]  { --superficie: var(--azul-abismo); }
[data-base="azul"]   { --superficie: var(--azul-fundo); }
[data-base="verde"]  { --superficie: var(--verde-fundo); }
[data-base="amarelo"]{
  --superficie: var(--amarelo); --texto: var(--tinta);
  --texto-calmo: rgba(6,16,31,.82); --texto-tenue: rgba(6,16,31,.72);
  --fio: rgba(6,16,31,.3); --acento: var(--azul);
}
[data-base="creme"]  {
  --superficie: var(--creme); --texto: var(--tinta);
  --texto-calmo: rgba(6,16,31,.78); --texto-tenue: rgba(6,16,31,.6);
  --fio: rgba(6,16,31,.16); --acento: var(--azul);
}

/* ---------- 1.6 Reset ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--breu); color: var(--texto);
  font-family: var(--face-corpo); font-size: var(--t-corpo); line-height: 1.55;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--amarelo); color: var(--tinta); }

:focus-visible { outline: 3px solid var(--amarelo); outline-offset: 3px; border-radius: 2px; }
[data-base="amarelo"] :focus-visible, [data-base="creme"] :focus-visible { outline-color: var(--azul); }

.pular-para-conteudo {
  position: fixed; top: var(--e2); left: var(--e2); z-index: 999;
  padding: .75rem 1.25rem; background: var(--amarelo); color: var(--tinta);
  font-weight: 700; transform: translateY(-200%);
}
.pular-para-conteudo:focus { transform: none; }
.so-leitor-de-tela {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ---------- 1.7 Vozes ---------------------------------------------------- */
.display {
  font-family: var(--face-display); font-weight: 800; line-height: .94;
  letter-spacing: -.005em; text-transform: uppercase; text-wrap: balance;
}
.display--1 { font-size: var(--t-d1); }
.display--2 { font-size: var(--t-d2); }
.display--3 { font-size: var(--t-d3); }

/* A voz do banner oficial: caixa alta leve, entreletra muito aberta. */
.rotulo {
  font-family: var(--face-display); font-weight: 400; font-size: var(--t-micro);
  letter-spacing: .4em; text-transform: uppercase; color: var(--texto-tenue);
}
.rotulo--acento { color: var(--acento); }
.lead { font-size: var(--t-lead); line-height: 1.5; color: var(--texto-calmo); text-wrap: pretty; }
.corpo { color: var(--texto-calmo); text-wrap: pretty; }
.nano { font-size: var(--t-nano); letter-spacing: .1em; text-transform: uppercase; color: var(--texto-tenue); }

.leito {
  width: 100%; max-width: calc(var(--leito) + var(--calha) * 2);
  margin-inline: auto; padding-inline: var(--calha);
}
.leito--estreito { --leito: 960px; }

/* ---------- 1.8 Grão ----------------------------------------------------- */
/* O grão está na identidade do cliente, mas não entra na fotografia: assado
   na imagem ele come nitidez e tira o acabamento do lugar premium. Ele vive
   nos campos de cor, atrás do conteúdo e atrás das fotos. */
.textura {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url(../img/grao.png); background-size: 300px;
  opacity: .5; mix-blend-mode: overlay;
}

/* ---------- 1.9 Apoio de seção ------------------------------------------- */
/* Uma voz só para o texto de apoio, em vez de reaproveitar o corpo do hero.
   Ele é apoio: não disputa peso nem tamanho com o título. */
.apoio {
  font-size: var(--t-corpo); line-height: 1.55; color: var(--texto-calmo);
  max-width: 54ch; text-wrap: pretty;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}