/* ============================================================================
   vencedores.css — Página "Vencedores 2026" (Prêmio ClienteSA Happy)
   Usa exclusivamente os tokens de css/tokens.css.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body); color: var(--text); background: var(--sand);
  -webkit-font-smoothing: antialiased; line-height: var(--lh-normal);
}
img, svg, iframe { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
::selection { background: var(--navy); color: #fff; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 6px; }

.container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); }

/* ---------- Header ----------
   Header unificado: os estilos (.site-header, .btn, .btn--primary, .btn--gold)
   vêm de css/landing.css — a MESMA fonte usada pela home. Aqui só o offset
   para o header fixo não sobrepor o conteúdo. */
.page { padding-top: var(--header-h); }

/* ---------- Cabeçalho do miolo ---------- */
.vhead { text-align: center; padding-block: var(--space-3xl) var(--space-xl); }
.eyebrow {
  font-family: var(--font-display); color: var(--gold-deep); font-size: var(--fs-sm);
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.15em; display: inline-block; margin-bottom: var(--space-md);
}
.vhead h1 { font-family: var(--font-display); color: var(--text-strong); font-weight: 500; font-size: var(--fs-h1); letter-spacing: -0.02em; line-height: var(--lh-snug); }
.vhead p { max-width: 50rem; margin: var(--space-lg) auto 0; color: var(--text-muted); font-weight: 300; font-size: var(--fs-lg); line-height: var(--lh-relaxed); }

/* ---------- Abas ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: center; padding-bottom: var(--space-2xl); }
.tab {
  display: inline-flex; align-items: center; gap: var(--space-sm);
  font-family: var(--font-display); font-weight: 600; font-size: 1.1rem;
  padding: 0.95rem 1.8rem; border-radius: var(--radius-md); border: none;
  background: #EEEBE2; color: #E0A63C; transition: background-color var(--t-fast) ease, color var(--t-fast) ease, transform var(--t-fast) ease;
}
.tab svg { width: 22px; height: 22px; }
.tab:hover { transform: translateY(-2px); }
.tab[aria-selected="true"] { background: var(--gold); color: var(--navy); }

.tabpanel { padding-bottom: var(--space-3xl); }
.tabpanel[hidden] { display: none; }
.panel-lead { text-align: center; color: var(--text-muted); font-weight: 300; font-size: var(--fs-lg); max-width: 44rem; margin: 0 auto var(--space-2xl); }

/* ---------- Vencedores ---------- */
.winners { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); }
.winner {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md);
  overflow: hidden; box-shadow: var(--shadow-card);
  transition: transform var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.winner:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.winner img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.winner__name { font-family: var(--font-display); color: var(--text-strong); font-weight: 600; font-size: var(--fs-h4); text-align: center; padding: var(--space-md); }

/* ---------- Depoimentos (vídeos) ---------- */
.videos { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); }
.video {
  position: relative; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 1px solid var(--border);
  border-radius: var(--radius-md); overflow: hidden; background: var(--navy); box-shadow: var(--shadow-card);
  display: block;
}
.video img { width: 100%; height: 100%; object-fit: cover; opacity: 0.92; transition: opacity var(--t-fast) ease, transform var(--t-fast) ease; }
.video:hover img { opacity: 1; transform: scale(1.03); }
.video__play {
  position: absolute; inset: 0; margin: auto; width: 66px; height: 66px; border-radius: var(--radius-full);
  background: var(--gold); color: var(--navy); display: grid; place-items: center; pointer-events: none;
  box-shadow: var(--glow-gold-strong);
}
.video__play svg { width: 28px; height: 28px; margin-left: 3px; }
.video iframe { width: 100%; height: 100%; border: 0; }
.video.is-playing { background: #000; }

/* ---------- Fotos do prêmio ---------- */
.gallery { display: grid; grid-template-columns: 1fr; gap: var(--space-md); }
.gallery figure { margin: 0; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-sm); background: var(--white); }
/* object-position no topo mantém os rostos visíveis nas fotos em retrato */
.gallery img { width: 100%; height: 100%; object-fit: cover; object-position: center top; aspect-ratio: 3 / 2; transition: transform var(--t-fast) ease; }
.gallery figure:hover img { transform: scale(1.04); }
.gallery__actions { text-align: center; margin-top: var(--space-2xl); }

/* ---------- Lightbox (depoimentos) ---------- */
.lightbox { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: var(--space-lg); }
.lightbox[hidden] { display: none; }
.lightbox__backdrop { position: absolute; inset: 0; background: rgba(1,6,66,0.82); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.lightbox__dialog { position: relative; width: min(960px, 100%); z-index: 1; }
.lightbox__frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-lg); }
.lightbox__frame iframe { width: 100%; height: 100%; border: 0; }
.lightbox__close {
  position: absolute; top: -14px; right: -14px; width: 44px; height: 44px; border: none; border-radius: var(--radius-full);
  background: var(--gold); color: var(--navy); display: grid; place-items: center; box-shadow: var(--shadow-lg);
}
.lightbox__close svg { width: 22px; height: 22px; }
body.no-scroll { overflow: hidden; }

/* Rodapé: usa .site-footer de css/landing.css — o MESMO da home. */
.site-footer { margin-top: auto; }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Breakpoints ---------- */
@media (min-width: 601px) {
  :root { --container-pad: 2rem; }
  .winners { grid-template-columns: repeat(2, 1fr); }
  .videos { grid-template-columns: repeat(2, 1fr); }
  .gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1025px) {
  :root { --container-pad: 2.5rem; }
  .winners { grid-template-columns: repeat(3, 1fr); }
  .videos { grid-template-columns: repeat(3, 1fr); }
  .gallery { grid-template-columns: repeat(3, 1fr); }
  .vhead h1 { font-size: var(--fs-display); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}