/* ==========================================================================
   Mattera — home (cartaz)
   Tela única, sem rolagem: body é uma coluna flex (cabeçalho + palco) que
   fecha em 100dvh — não é aritmética de altura cravada, então sobrevive a
   janelas baixas (1280×600, 1280×500, 960×600 inclusos).
   Depende de tokens.css e base.css (fontes, reset, cor, foco). Não carrega
   layout.css/paginas.css: a home não é a grade de coluna+rodapé das outras
   páginas, é um cartaz.

   Regras duras herdadas da rodada de fusão (não mexer sem remedir):
   · cabeçalho BRANCO puro (#fff, não o cru do manual) — decisão explícita do
     dono. Altura não é cravada: cresce com o conteúdo, então uma janela baixa
     nunca o corta, só encolhe o palco.
   · o menu (Coleção/Sobre/Contato) só existe sobre a foto no desktop
     (≥768px), no canto superior-direito, com a foto centralizada
     (object-position: 50% 50%) — o único enquadramento medido ≥4,5:1 em
     todos os slides aprovados, em toda janela testada (ver relatório).
   · PT|EN + pausa NÃO ficam sobre pixel de foto em janela nenhuma: moram numa
     barra sólida no rodapé (.barra-controles, sempre visível, espelha o
     cabeçalho). Testado: nenhum ancoramento único de foto mantém hb-58/hb-68
     seguros nesse canto em toda proporção de janela ao mesmo tempo — falha
     já em 1920×1080, não só em janelas extremas — então a barra substitui a
     aposta na foto ali.
   · no mobile a foto é sangria total (cover) com os retratos nativos do
     catálogo — sem letterbox, sem "zoom" de recorte pré-cortado. A navegação
     mora dentro do cabeçalho sólido (2ª linha), terreno firme.
   · troca de slide é SÓ opacity (2200ms ease-in-out) — nunca translate/scale/
     clip-path/filter: é a diferença entre esfumação (pedida) e cortina
     (reprovada). As duas fotos ficam sobrepostas e visíveis o tempo todo.
   · nada de cursor:pointer no palco, clique-para-avançar ou pausa-por-
     aproximação-do-menu — são comportamentos que ninguém pediu; o botão de
     pausa já cobre a exigência de parar o movimento (WCAG 2.2.2).
   ========================================================================== */

html, body { height: 100%; }

body.pagina-cartaz {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--foto-ciclorama);
  min-height: 0; /* sobrescreve o min-height:100vh de base.css */
}

/* --- Cabeçalho -------------------------------------------------------------
   Branco puro, decisão do dono (não o cru do manual). Padding vertical dá
   folga ≥0,5× a altura da marca em toda volta (manual p.06): a marca vai de
   26,4px a 33,6px de altura (clamp 118–150px de largura, razão 4,47:1); um
   piso de 18px de padding cobre a folga mínima com margem. */
.cabecalho {
  flex: 0 0 auto;
  background: #fff;
  border-bottom: 1px solid var(--foto-sombra);
  padding: clamp(18px, 2.6svh, 26px) clamp(20px, 3vw, 34px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.cabecalho__marca { margin: 0; line-height: 0; }
.cabecalho__marca a { display: block; outline: none; }
.cabecalho__marca img { width: clamp(118px, 10.5vw, 150px); height: auto; display: block; }

.cabecalho__tagline {
  margin: 0;
  font-size: var(--fs-nav);
  letter-spacing: var(--tracking-nav);
  color: var(--marca-oliva);
}
@media (max-width: 767px) { .cabecalho__tagline { display: none; } }

/* Navegação: no desktop mora sobre a foto (.menu-foto, mais abaixo). No
   mobile ela sobe para dentro do cabeçalho sólido — terreno firme sem
   precisar medir contraste sobre foto, e sem virar uma terceira barra. */
.cabecalho__nav { display: none; }
@media (max-width: 767px) {
  .cabecalho__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
    margin-top: 10px;
  }
  .cabecalho__nav a {
    color: var(--marca-marrom);
    text-decoration: none;
    font-size: var(--fs-nav);
    letter-spacing: var(--tracking-nav);
    min-height: 44px;
    min-width: 44px; /* "Sobre" sozinho tem só 37px de texto — sem isto, o alvo de toque fica abaixo do mínimo WCAG 2.5.8 */
    display: inline-flex;
    align-items: center;
  }
}

/* --- Palco ------------------------------------------------------------- */
.palco-envolve {
  flex: 1 1 auto;
  position: relative;
  min-height: 0; /* sem isto o flex item não encolhe abaixo do conteúdo em janela baixa */
  overflow: hidden;
  background: var(--foto-ciclorama);
}

.palco { position: absolute; inset: 0; z-index: 0; }

/* Empilhados na mesma posição, só opacity anima. O slide entrante sobe de
   z-index (via JS) e vai de 0→1; o de baixo fica parado em opacity:1 — como
   ele fica coberto, o resultado é um cross-dissolve real (as duas fotos
   coexistem, sobrepostas por transparência) com metade do custo de animação.
   Nunca envolver transform/scale/clip-path aqui: isso é cortina, não esfumação. */
.slide { position: absolute; inset: 0; opacity: 0; }
.slide.fica { opacity: 1; }
.slide.entra { opacity: 1; transition: opacity 2200ms ease-in-out; }

/* base.css força picture{display:block;height:auto} (para não distorcer
   imagens de conteúdo comum) — sem isto aqui, o <picture> vira um bloco de
   altura automática (baseada no intrínseco da imagem) e o height:100% do
   <img> abaixo não tem contra quê resolver, caindo para auto: a imagem
   renderiza no tamanho intrínseco, maior que o palco, cortada em silêncio
   pelo overflow:hidden do ancestral. Dar ao <picture> a mesma caixa do
   .slide resolve a cadeia de porcentagem. */
.slide picture { position: absolute; inset: 0; display: block; }

.slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Centralizado: testado Y de 0 a 100% em 11 janelas (320×small a
     2560×1440, incluindo 1280×600/1280×500/1024×576) nas 3 fotos — 50% é o
     único valor que mantém "Coleção/Sobre/Contato" (canto superior-direito,
     único texto que ainda cai sobre pixel de foto) acima de 4,5:1 em TODAS
     ao mesmo tempo; ancorar embaixo (100%, a escolha óbvia) falha a 1,0:1
     em 1280×600 e 1280×500 nas 3 fotos. PT|EN e a pausa não dependem mais
     do enquadramento: moram na barra sólida do rodapé (.barra-controles). */
  object-position: 50% 50%;
}
@media (max-width: 767px) {
  /* Sangria total com os retratos nativos do catálogo (2:3), não o pré-corte
     quase quadrado que existia antes (0,93 — cortava as esferas nas bordas).
     Nenhum texto cai sobre a foto no mobile (nav no cabeçalho, controles na
     barra do rodapé), então não há contraste de foto para medir aqui — só
     framing. Em celular na vertical a caixa é mais estreita que a foto:
     cover não corta verticalmente (mostra a foto inteira, sem "zoom"). Em
     celular deitado ou janela baixa (<768px de largura) a caixa fica mais
     larga que a foto e cover PRECISA cortar verticalmente — 75% mantém a
     peça (que ocupa ~55–87% da altura da foto) no quadro em vez do fundo
     vazio do topo (medido em 767×500: 35% mostrava só parede). */
  .slide img { object-position: 50% 75%; }
}

/* --- Menu sobre a foto (desktop) -------------------------------------------
   Espelha o logo do cabeçalho: mesmo canto superior, lado oposto. Só existe
   onde a faixa top-right foi medida segura. */
.menu-foto {
  display: none;
  position: absolute; top: 0; right: 0; z-index: 2;
  padding: clamp(20px, 4svh, 34px) clamp(20px, 3vw, 34px) 0;
}
@media (min-width: 768px) { .menu-foto { display: block; } }
.menu-foto ul { display: flex; gap: clamp(16px, 2vw, 32px); margin: 0; padding: 0; justify-content: flex-end; }

/* --- Cinética: dois sinais separados -----------------------------------
   A APROXIMAÇÃO (--tp, contínua, vem do JS) só desloca — é o "chegar perto"
   pedido pelo dono, e não diz nada sobre qual item está sob o cursor. O ALVO
   (--h, binário, hover ou foco) é quem ganha o traço. Com um sinal só, o
   raio de proximidade acendia os três links ao mesmo tempo e o menu virava
   um cartaz sublinhado — por isso os dois ficam separados. */
.cinetico {
  --t: var(--tp, 0);
  --h: 0;
  position: relative;
  display: inline-block;
  color: var(--marca-marrom);
  text-decoration: none;
  font-size: var(--fs-nav);
  letter-spacing: var(--tracking-nav);
  padding: 6px 2px;
  /* Só transform e opacity animam: compositor puro, nada de layout. */
  transform: translate3d(calc(var(--t) * -4px), 0, 0);
  transition: transform 280ms ease-in-out;
  outline: none;
}
.cinetico::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 1px; height: 1px;
  background: currentColor;
  transform: scaleX(var(--h));
  transform-origin: right center;
  transition: transform 280ms ease-in-out;
}
.cinetico:hover, .cinetico:focus-visible { --h: 1; }
.cinetico:focus-visible { --t: 1; }

/* --- PT|EN: canto inferior-direito da TELA, fixo (pedido do dono) -------
   Sobre a barra sólida do rodapé (ver .barra-controles) — nunca sobre pixel
   de foto: medido que nenhum ancoramento de foto mantém este canto seguro em
   toda proporção de janela ao mesmo tempo (ver comentário em .slide img). */
.idiomas {
  position: fixed; right: clamp(14px, 2.6vw, 28px); bottom: 6px; z-index: 3;
  display: flex; align-items: center; gap: .5em; margin: 0;
}
.idiomas span { opacity: .5; color: var(--marca-marrom); user-select: none; }
.idiomas .cinetico {
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  text-transform: uppercase;
}
.idiomas .cinetico::after { left: 12px; right: 12px; bottom: 12px; } /* o traço segue o glifo, não a área de toque de 44px */

/* --- Pausa: centro inferior da TELA, só o símbolo -------------------------
   WCAG 2.2.2: slideshow automático de mais de 5s precisa de um jeito de
   parar que não dependa de mouse. Único mecanismo de pausa — nada de
   pausar por proximidade do menu, ninguém pediu isso. */
.pausa {
  position: fixed; left: 50%; bottom: 6px; z-index: 3;
  transform: translateX(-50%);
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  color: var(--marca-marrom);
  opacity: .85;
  transition: opacity 200ms ease-in-out;
}
.pausa:hover, .pausa:focus-visible { opacity: 1; }
.pausa svg { width: 15px; height: 15px; display: block; }
.pausa .ic-play { display: none; }
.pausa[aria-pressed="true"] .ic-pausa { display: none; }
.pausa[aria-pressed="true"] .ic-play { display: block; }

/* --- Barra sólida do rodapé ---------------------------------------------
   Espelha o cabeçalho: mesma cor, mesma lógica de moldura de galeria — a
   foto flutua entre duas faixas sólidas finas, nunca encosta nos quatro
   cantos. Medido (ver relatório) que nenhum ancoramento de foto mantém
   PT|EN e a pausa seguros ao mesmo tempo em toda proporção de janela —
   inclusive em 1920×1080, não só em janelas extremas — então o rodapé vira
   terreno firme sempre, como o topo já é. */
.barra-controles {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1;
  height: 56px;
  background: #fff;
  border-top: 1px solid var(--foto-sombra);
}

.oculto {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .slide, .slide.entra { transition: none; }
  .cinetico, .cinetico::after { transition: none; }
  .cinetico { transform: none; }
  .pausa { display: none; } /* sem slideshow automático, não há o que pausar */
}