/*
 * Central Zoom 2026: tipografia, cores e formatos do mockup da Fase 2
 * (WWW_CENTRAL_ZOOM_2026_VF.psd). Carregado depois do style.css e sobrepõe-se a ele.
 */

/* --- Fontes ------------------------------------------------------------- */
/* Kommon Grotesk: não há Regular no pacote do designer; onde o PSD usa Regular usamos Medium. */
@font-face { font-family: 'Kommon Grotesk'; src: url('../assets/fonts/kommon-grotesk/kommon-grotesk-medium.woff2') format('woff2'); font-weight: 400 500; font-display: swap; }
@font-face { font-family: 'Kommon Grotesk'; src: url('../assets/fonts/kommon-grotesk/kommon-grotesk-semibold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Kommon Grotesk'; src: url('../assets/fonts/kommon-grotesk/kommon-grotesk-bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Kommon Grotesk'; src: url('../assets/fonts/kommon-grotesk/kommon-grotesk-extrabold.woff2') format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Kommon Grotesk'; src: url('../assets/fonts/kommon-grotesk/kommon-grotesk-ultrabold.woff2') format('woff2'); font-weight: 850; font-display: swap; }
@font-face { font-family: 'Kommon Grotesk'; src: url('../assets/fonts/kommon-grotesk/kommon-grotesk-black.woff2') format('woff2'); font-weight: 900; font-display: swap; }

/* Kommon Grotesk Compressed ("Com" no PSD) */
@font-face { font-family: 'Kommon Grotesk Com'; src: url('../assets/fonts/kommon-grotesk/kommon-grotesk-com-thin.woff2') format('woff2'); font-weight: 250; font-display: swap; }
@font-face { font-family: 'Kommon Grotesk Com'; src: url('../assets/fonts/kommon-grotesk/kommon-grotesk-com-extralight.woff2') format('woff2'); font-weight: 290; font-display: swap; }
@font-face { font-family: 'Kommon Grotesk Com'; src: url('../assets/fonts/kommon-grotesk/kommon-grotesk-com-light.woff2') format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Kommon Grotesk Com'; src: url('../assets/fonts/kommon-grotesk/kommon-grotesk-com-normal.woff2') format('woff2'); font-weight: 350; font-display: swap; }
@font-face { font-family: 'Kommon Grotesk Com'; src: url('../assets/fonts/kommon-grotesk/kommon-grotesk-com-regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Kommon Grotesk Com'; src: url('../assets/fonts/kommon-grotesk/kommon-grotesk-com-medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Kommon Grotesk Com'; src: url('../assets/fonts/kommon-grotesk/kommon-grotesk-com-semibold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Kommon Grotesk Com'; src: url('../assets/fonts/kommon-grotesk/kommon-grotesk-com-bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Kommon Grotesk Com'; src: url('../assets/fonts/kommon-grotesk/kommon-grotesk-com-extrabold.woff2') format('woff2'); font-weight: 800; font-display: swap; }

:root {
  --cz-green: #01D897;
  --cz-green-prize: #27DBA6;
  --cz-green-bar: #00A37A;
  --cz-navy: #021228;
  --cz-ink: #000A19;
  --cz-font: 'Kommon Grotesk', 'Titillium Web', sans-serif;
  --cz-font-com: 'Kommon Grotesk Com', 'Kommon Grotesk', 'Titillium Web', sans-serif;
}

/* --- Base partilhada pelas secções -------------------------------------- */
.big-title {
  font-family: var(--cz-font);
  font-weight: 800;
  font-size: 60px;
  line-height: 1.1;
  letter-spacing: 0.01em;
  margin-bottom: 2rem;
}

.txt-body {
  font-family: var(--cz-font);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: 0.01em;
}

.cz-accent {
  color: var(--cz-green);
  font-weight: 900;
}

.btn-centralzoom,
.btn-centralzoom-outline {
  font-family: var(--cz-font);
  font-size: 19.7px;
  letter-spacing: 0.032em;
  padding: 10px 30px;
  border-width: 2px;
  min-height: 47px;
}

.btn-centralzoom {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background-color: var(--cz-green);
  border-color: var(--cz-green);
  color: var(--cz-ink);
  font-weight: 850;
}

.btn-centralzoom:hover {
  background-color: transparent;
  border-color: var(--cz-green);
  color: var(--cz-green);
}

.btn-centralzoom-outline {
  border-color: #ffffff;
  color: #ffffff;
  font-weight: 500;
}

.btn-centralzoom-outline:hover {
  background-color: var(--cz-green);
  border-color: var(--cz-green);
  color: var(--cz-ink);
}

/* O Bootstrap 3 da welcome põe um clearfix (::before/::after) em .row; nos .row que são flex
   esses pseudo-elementos contam como itens e desalinham o space-between/gap. */
.cz-steps::before, .cz-steps::after,
.cz-steps-legend::before, .cz-steps-legend::after,
.cz-steps-note::before, .cz-steps-note::after,
.cz-brands-logos::before, .cz-brands-logos::after {
  content: none !important;
  display: none !important;
}

/* Cada secção é um .row (flex) com um .container sem largura: sem isto o container cresce até
   à largura do conteúdo e, em telemóvel, os blocos e as barras saem do ecrã. */
#welcome > .container,
#scheduled > .container,
#steps > .container,
#videos > .container,
#brands > .container {
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
}

/* --- Bem-vindo (#welcome) ----------------------------------------------- */
#welcome .big-title {
  font-family: var(--cz-font-com);
  font-weight: 700;
  font-size: 64px;
}

#welcome .cz-draw-title {
  font-family: var(--cz-font-com);
  font-weight: 290;
  font-size: 64px;
  line-height: 1;
  color: #ffffff;
}

#welcome .cz-draw-live {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--cz-font);
  font-weight: 900;
  font-size: 24px;
  letter-spacing: 0.01em;
  color: #ffffff;
}

#welcome .cz-draw-box {
  height: 340px;
  border: 6px solid #10394a;
  background: #0f9c92 url('../assets/images/2026/sorteio.webp') center / cover no-repeat;
  position: relative;
  display: flex;
  flex-direction: column;
}

#welcome #winners-block-bg {
  background-color: transparent !important;
}

#welcome #countdown {
  background-color: rgba(2, 18, 40, 0.35) !important;
}

#welcome #countdown span,
#welcome .cz-winner-place {
  color: var(--cz-green) !important;
  font-family: var(--cz-font-com);
}

#welcome .btn-centralzoom {
  width: auto !important;
  min-width: 259px;
}

#welcome .btn-centralzoom .fa-chevron-right {
  font-size: 24px;
}

/* --- Programa (#scheduled) ---------------------------------------------- */
/* 4 cartões a 317px não cabem no container de 1140px: as colunas encolhem por igual */
#scheduled .cz-program {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 317px));
  gap: 25px;
  /* alinhado com o título, que está num .row (margem -15px) */
  margin-left: -15px;
}

/* Abaixo do container de 1140px, 2x2 em vez de 3+1 */
@media (max-width: 1199px) {
  #scheduled .cz-program {
    grid-template-columns: repeat(2, minmax(0, 317px));
  }
}

#scheduled .cz-program-card {
  padding: 36px 15px 40px;
  background-color: rgba(8, 26, 20, 0.72);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#scheduled .cz-program-hour {
  font-family: var(--cz-font-com);
  font-weight: 300;
  font-size: 56px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--cz-green);
}

#scheduled .cz-program-hour b {
  font-weight: 700;
}

#scheduled .cz-program-hour .cz-dash {
  font-weight: 290;
}

#scheduled .cz-program-title {
  margin-top: 22px;
  font-family: var(--cz-font-com);
  font-weight: 700;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #ffffff;
}

#scheduled .cz-program-desc {
  margin-top: 22px;
  font-family: var(--cz-font-com);
  font-weight: 400;
  font-size: 25px;
  line-height: 1.1;
  color: var(--cz-green);
}

#scheduled .cz-program-more {
  margin-top: auto;
  width: 210px;
  max-width: 100%;
  padding: 11px 10px 9px;
  border: 1px solid #ffffff;
  font-family: var(--cz-font-com);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  color: #ffffff;
  cursor: default;
  user-select: none;
}

/* --- Escalões (#steps) -------------------------------------------------- */
#steps .big-title .cz-title-light {
  font-weight: 500;
  font-size: 0.75em;
}

#steps .cz-steps {
  margin-top: 3rem;
  width: 100%;
  flex-direction: column;
}

#steps .cz-step {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 36px;
}

#steps .cz-step-bar {
  flex-shrink: 1;
  min-width: 0;
}

#steps .cz-step-value {
  flex-shrink: 0;
}

#steps .cz-step-bar {
  height: 38px;
  padding: 0 20px;
  border-radius: 19px;
  background-color: var(--cz-green-bar);
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: var(--cz-font);
  font-weight: 500;
  font-size: 26px;
  color: #ffffff;
  white-space: nowrap;
}

#steps .cz-step-value {
  margin-left: 18px;
  font-family: var(--cz-font);
  font-weight: 900;
  font-size: 26px;
  color: #ffffff;
  white-space: nowrap;
}

#steps .cz-step-value sup {
  font-weight: 500;
  font-size: 0.7em;
  margin-right: 2px;
}

#steps .cz-steps-legend {
  border-top: 1px solid #ffffff;
  margin-top: 0;
  padding-top: 32px;
  display: flex;
  justify-content: space-between;
  font-family: var(--cz-font);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: 0.01em;
  color: #ffffff;
}

#steps .cz-steps-note {
  margin-top: 20px;
  font-family: var(--cz-font);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.01em;
  color: #ffffff;
}

/* --- Prémios grande sorteio (#videos) ----------------------------------- */
.home-section8 .prize-content {
  width: 286px;
  height: 286px;
}

#videos .cz-prize-place {
  margin: 10px 0 0;
  font-family: var(--cz-font-com);
  font-weight: 290;
  font-size: 36px;
  line-height: 1;
  letter-spacing: 0.026em;
  color: var(--cz-green-prize);
}

#videos .cz-prize-place b {
  font-weight: 800;
}

#videos .cz-prize-name {
  margin: 6px 0 0;
  font-family: var(--cz-font-com);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.15;
  color: #ffffff;
}

#videos .cz-prize-variant {
  display: block;
  font-weight: 350;
  font-size: 21px;
}

/* --- Marcas (#brands) --------------------------------------------------- */
#brands .txt-body {
  max-width: 740px;
}

#brands .txt-body .cz-accent {
  font-weight: 800;
  font-size: 20px;
}

#brands .cz-brands-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px 70px;
}

#brands .cz-brands-logos img {
  height: 45px;
  width: auto;
}

/* --- Jogos: base comum (Roda da sorte #centraltv e Caça ferramentas #game) --- */
#centraltv > .container,
#game > .container {
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
}

.cz-game-subtitle {
  margin: 0 0 30px;
  font-family: var(--cz-font);
  font-weight: 500;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--cz-green-prize);
}

.cz-game-subtitle-white {
  color: #ffffff;
}

/* Moldura preta das imagens/vídeos dos jogos */
.cz-game-frame {
  display: block;
  position: relative;
  border: 7px solid #000000;
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.55);
  background-color: #000000;
}

.cz-game-cover img:first-child {
  display: block;
  width: 100%;
  height: auto;
}

.cz-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 66px;
  height: 66px;
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease;
  pointer-events: none;
}

a.cz-game-frame:hover .cz-play {
  transform: translate(-50%, -50%) scale(1.08);
}

/* --- Roda da sorte (#centraltv) ----------------------------------------- */
#centraltv .home-sectionvideo.cz-game-frame {
  background: #021228 !important;
}

#centraltv .cz-wheel-prizes-col {
  margin-top: 3rem;
}

#centraltv .cz-wheel-prize {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 53px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}

#centraltv .cz-wheel-prize:last-child {
  border-bottom: 0;
}

#centraltv .cz-wheel-prize p {
  margin: 0;
  font-family: var(--cz-font-com);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.1;
  color: #ffffff;
}

#centraltv .cz-wheel-prize p small {
  font-size: 0.8em;
}

#centraltv .cz-wheel-prize img {
  height: 38px;
  width: 48px;
  object-fit: contain;
}

/* --- Caça ferramentas (#game) ------------------------------------------- */
/* O style.css só tem attachment fixed/no-repeat: sem cover, o fundo acaba antes da secção */
#game {
  background-size: cover;
}

#game .cz-hunt {
  display: grid;
  grid-template-columns: minmax(0, 422fr) minmax(0, 256fr) minmax(0, 251fr);
  gap: 37px;
  align-items: start;
}

#game .cz-hunt::before,
#game .cz-hunt::after {
  content: none !important;
  display: none !important;
}

#game .cz-hunt-cover {
  border-width: 8px;
}

#game .cz-hunt-cover img:first-child {
  display: block;
  width: 100%;
  height: auto;
}

#game .cz-hunt-col .cz-game-subtitle {
  margin-bottom: 40px;
}

#game .cz-hunt-panel {
  background-color: rgba(0, 0, 0, 0.78);
}

#game .cz-hunt-prizes {
  padding: 22px 24px 20px;
}

#game .cz-hunt-prize + .cz-hunt-prize {
  margin-top: 22px;
}

#game .cz-hunt-prize p {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 10px;
  font-family: var(--cz-font);
  font-weight: 600;
  font-size: 15.5px;
  line-height: 1.2;
  color: #ffffff;
}

#game .cz-hunt-prize p img {
  height: 24px;
  width: 24px;
  flex-shrink: 0;
}

#game .cz-hunt-prize > img {
  display: block;
  width: 100%;
  height: auto;
}

#game .cz-hunt-ranking {
  padding: 8px 16px;
}

#game .cz-hunt-rank {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  font-family: var(--cz-font);
  font-weight: 500;
  font-size: 13px;
  color: #ffffff;
}

#game .cz-hunt-rank:last-child {
  border-bottom: 0;
}

#game .cz-hunt-rank-pos {
  font-weight: 700;
  color: var(--cz-green-prize);
}

#game .cz-hunt-rank-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#game .cz-hunt-rank-score {
  color: var(--cz-green-prize);
  white-space: nowrap;
}

#game .cz-hunt-rank-empty {
  margin: 12px 0;
  font-family: var(--cz-font);
  font-weight: 500;
  font-size: 14px;
  color: #ffffff;
}

@media (max-width: 991px) {
  #game .cz-hunt {
    grid-template-columns: minmax(0, 1fr);
  }

  #game .cz-hunt-cover {
    max-width: 422px;
  }
}

/* --- Menu de topo (página /welcome) ------------------------------------- */
#top-menu .nav-link {
  font-family: var(--cz-font);
  font-weight: 500;
  font-size: 12.1px;
  letter-spacing: 0.01em;
  padding: 0.1rem 0.6rem;
}

#top-menu li.active .nav-link {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--cz-green);
  text-decoration-thickness: 2px;
  text-underline-offset: 10px;
}

.cz-btn {
  border: 2px solid var(--cz-green);
  color: var(--cz-green);
  font-family: var(--cz-font);
  font-weight: 700;
  font-size: 12.9px;
  letter-spacing: 0.01em;
  box-shadow: 0 0 8px rgba(1, 216, 151, 0.35);
}

.cz-btn:hover {
  background-color: var(--cz-green);
  color: var(--cz-ink);
}

/* Logo do menu sem a caixa preta de 2025 */
.header .logo {
  background-color: transparent !important;
}

/* --- Rodapé ------------------------------------------------------------- */
footer.footer .footer-top {
  background-color: transparent !important;
}

footer.footer {
  background-color: #ffffff !important;
  color: var(--cz-navy) !important;
  padding: 50px 0 !important;
  border-top: 1px solid var(--cz-ink);
}

footer.footer .logo-cz {
  max-height: 52px !important;
}

footer.footer .cz-footer-link {
  color: var(--cz-green) !important;
  font-family: var(--cz-font);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.01em;
  text-decoration: none;
}

footer.footer .social-icons img {
  filter: brightness(0) !important;
  opacity: 0.85;
}

/* --- Telemóvel ---------------------------------------------------------- */
@media (max-width: 767px) {
  .big-title,
  #welcome .big-title,
  #welcome .cz-draw-title {
    font-size: 42px;
  }

  #scheduled .cz-program {
    grid-template-columns: 1fr;
  }

  #steps .cz-step-bar,
  #steps .cz-step-value {
    font-size: 18px;
  }

  #steps .cz-step-bar {
    min-width: 0;
  }

  #steps .cz-steps-legend {
    font-size: 18px;
  }

  #steps .cz-steps-note {
    font-size: 15px;
  }
}