@import url('./base/variables.css');
@import url('./base/reset.css');
@import url('./base/typography.css');
/* ==========================================================================
   START HEADER & NAVIGATION
   FMN® — Navegação principal
   ========================================================================== */

/* ==========================================================================
   HEADER FIXO
   ========================================================================== */

.main-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);

  background: var(--topbar);
  backdrop-filter: blur(4px);

  border-bottom: 1px solid var(--border);

  z-index: 1000;

  display: flex;
  align-items: center;

  color: var(--text-topbar);
}

/* ==========================================================================
   CONTAINER DO HEADER
   ========================================================================== */

.site-header {
  width: 100%;
  max-width: var(--container-max);

  margin: 0 auto;
  padding: 0 var(--gutter);

  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ==========================================================================
   LOGO
   ========================================================================== */

.brand {
  display: flex;
  align-items: center;

  text-decoration: none;
  flex-shrink: 0;
}

.brand img {
  display: block;

  width: auto;
  height: 35px;
  max-width: 180px;
}

/* ==========================================================================
   BOTÃO MENU MOBILE
   ========================================================================== */

.nav-toggle {
  position: absolute;
  top: 50%;
  right: 1rem;

  width: 44px;
  height: 44px;

  transform: translateY(-50%);

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  background: transparent;
  border: 0;

  cursor: pointer;

  z-index: 1001;
}

.nav-toggle-icon {
  position: relative;

  width: 22px;
  height: 2px;

  background: var(--text);

  transition: background 0.25s ease;
}

.nav-toggle-icon::before,
.nav-toggle-icon::after {
  content: '';

  position: absolute;
  left: 0;

  width: 22px;
  height: 2px;

  background: var(--text);

  transition:
    transform 0.25s ease,
    top 0.25s ease;
}

.nav-toggle-icon::before {
  top: -6px;
}

.nav-toggle-icon::after {
  top: 6px;
}

/* ==========================================================================
   MENU MOBILE ABERTO
   ========================================================================== */

.nav-toggle[aria-expanded='true'] .nav-toggle-icon {
  background: transparent;
}

.nav-toggle[aria-expanded='true'] .nav-toggle-icon::before {
  top: 0;
  transform: rotate(45deg);
}

.nav-toggle[aria-expanded='true'] .nav-toggle-icon::after {
  top: 0;
  transform: rotate(-45deg);
}

/* ==========================================================================
   NAVEGAÇÃO
   ========================================================================== */

nav {
  position: relative;
}

/* ==========================================================================
   LISTA PRINCIPAL
   ========================================================================== */

header .nav-list {
  display: flex;
  align-items: center;

  gap: 30px;

  list-style: none;

  margin: 0;
  padding: 0;
}

header .nav-list > li {
  position: relative;
}

/* ==========================================================================
   WRAPPER DO ITEM COM SUBMENU
   ========================================================================== */

.nav-item-wrapper {
  height: 72px;

  display: flex;
  align-items: center;

  position: relative;
}

/* ==========================================================================
   LINKS PRINCIPAIS
   ========================================================================== */

header .nav-list > li > a,
header .nav-item-wrapper > a {
  position: relative;

  display: flex;
  align-items: center;

  height: 72px;

  padding: 0;

  text-decoration: none;

  font-size: 0.95rem;
  font-weight: 600;

  white-space: nowrap;

  transition: color 0.25s ease;
}

/* ==========================================================================
   ITENS SEM SUBMENU
   ========================================================================== */

header .nav-list > li:not(.has-submenu) > a {
  display: flex;
  align-items: center;

  height: 72px;
}

/* ==========================================================================
   RESERVA DE ESPAÇO PARA BOLD
   ========================================================================== */

.nav-list a::before {
  display: block;

  height: 0;

  overflow: hidden;
  visibility: hidden;

  font-weight: 700;
}

/* ==========================================================================
   HOVER
   ========================================================================== */

.nav-list > li > a:hover,
.nav-item-wrapper > a:hover {
  color: var(--color-primary);
}

/* ==========================================================================
   SETA DO SUBMENU
   ========================================================================== */

.submenu-toggle {
  width: 22px;
  height: 72px;

  display: flex;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;

  padding: 0;
  margin: 0;

  border: 0;
  background: transparent;

  cursor: pointer;

  color: currentColor;
}

/* ==========================================================================
   DESENHO DA SETA
   ========================================================================== */

.submenu-arrow {
  width: 8px;
  height: 8px;

  border-right: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;

  transform: rotate(45deg);
  flex-shrink: 0;

  transition:
    transform 0.25s ease,
    color 0.25s ease;

  margin-top: -4px;
}

/* ==========================================================================
   SETA QUANDO SUBMENU ESTÁ ABERTO
   ========================================================================== */

.has-submenu.open > .nav-item-wrapper .submenu-arrow {
  transform: rotate(225deg);

  margin-top: 4px;
}

/* ==========================================================================
   SUBMENU — BASE
   ========================================================================== */

.submenu {
  list-style: none;

  margin: 0;
  padding: 0;

  display: none;

  flex-direction: column;

  gap: 0;
}

header .submenu li {
  width: 100%;
}

header .submenu a {
  display: block;

  padding: 12px 22px;

  color: #222;

  text-decoration: none;

  transition:
    background-color 0.18s ease,
    color 0.18s ease;
}

header .submenu a:hover {
  background-color: var(--color-primary);
  color: #fff;
}

/* ==========================================================================
   SUBMENU ABERTO
   ========================================================================== */

.has-submenu.open > .submenu {
  display: flex;
}

/* ==========================================================================
   DESKTOP
   ========================================================================== */

@media (min-width: 880px) {
  /* -----------------------------------------
     Esconde botão hamburger
     ----------------------------------------- */

  .nav-toggle {
    display: none;
  }

  /* -----------------------------------------
     Navegação
     ----------------------------------------- */

  header .nav-list {
    flex-direction: row;

    align-items: center;

    gap: 30px;
  }

  /* -----------------------------------------
     Item principal
     ----------------------------------------- */

  .nav-item-wrapper {
    height: 72px;
  }

  /* -----------------------------------------
     Submenu desktop
     ----------------------------------------- */

  header .submenu {
    position: absolute;

    top: 72px;
    left: 0;

    min-width: 200px;

    background: var(--surface);

    border-radius: 0;

    padding: 0;

    box-shadow: var(--shadow);

    display: none;
  }

  /* -----------------------------------------
     Abre com mouse
     ----------------------------------------- */

  header .has-submenu:hover > .submenu {
    display: flex;
  }

  /* -----------------------------------------
     Mantém aberto quando clicado
     ----------------------------------------- */

  header .has-submenu.open > .submenu {
    display: flex;
  }

  /* -----------------------------------------
     Seta desktop
     ----------------------------------------- */

  .submenu-toggle {
    height: 72px;
  }
}

/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 879px) {
  /* -----------------------------------------
     Botão hamburger
     ----------------------------------------- */

  header .nav-toggle {
    display: flex;
  }

  /* -----------------------------------------
     Menu fullscreen
     ----------------------------------------- */

  header .nav-list {
    position: fixed;

    top: var(--header-height);
    left: 0;
    right: 0;

    width: 100vw;

    height: calc(100vh - var(--header-height));

    display: block;

    padding: 15px 0;

    background: var(--surface);

    overflow-y: auto;

    transform: translateX(100%);

    transition: transform 0.35s ease;

    z-index: 1000;

    box-shadow: -4px 0 15px rgba(0, 0, 0, 0.1);
  }

  /* -----------------------------------------
     Menu aberto
     ----------------------------------------- */

  header .nav-list.show {
    transform: translateX(0);
  }

  /* -----------------------------------------
     Item principal
     ----------------------------------------- */

  header .nav-list > li {
    width: 100%;
  }

  /* -----------------------------------------
     Wrapper
     ----------------------------------------- */

  .nav-item-wrapper {
    width: 100%;
    height: auto;

    display: flex;
    align-items: stretch;
  }

  /* -----------------------------------------
     Links principais
     ----------------------------------------- */

  header .nav-list > li > a,
  header .nav-item-wrapper > a {
    height: auto;

    min-height: 54px;

    padding: 16px 25px;

    display: flex;
    align-items: center;

    flex: 1;

    border-bottom: 1px solid var(--border);
  }

  /* -----------------------------------------
     Itens sem submenu
     ----------------------------------------- */

  header .nav-list > li:not(.has-submenu) > a {
    height: auto;

    min-height: 54px;

    padding: 16px 25px;
  }

  /* -----------------------------------------
     Botão da seta
     ----------------------------------------- */

  .submenu-toggle {
    width: 54px;
    height: auto;

    border-bottom: 1px solid var(--border);

    flex-shrink: 0;
  }

  /* -----------------------------------------
     Seta mobile
     ----------------------------------------- */

  .submenu-arrow {
    width: 9px;
    height: 9px;

    border-width: 3px;
  }

  /* -----------------------------------------
     Submenu mobile
     ----------------------------------------- */

  header .submenu {
    position: static;

    width: 100%;

    display: none;

    box-shadow: none;

    border-radius: 0;

    padding: 0;

    min-width: 100%;

    background: var(--surface);
  }

  /* -----------------------------------------
     Submenu aberto
     ----------------------------------------- */

  header .has-submenu.open > .submenu {
    display: block;
  }

  /* -----------------------------------------
     Links do submenu
     ----------------------------------------- */

  header .submenu a {
    padding: 14px 45px;

    font-size: 0.93rem;

    border-bottom: 1px solid var(--border);
  }

  /* -----------------------------------------
     Remove linha animada no mobile
     ----------------------------------------- */

  header .nav-item-wrapper > a::after,
  header .nav-list > li:not(.has-submenu) > a::after {
    display: none;
  }
}

/* ==========================================================================
   BLOQUEIO DO SCROLL
   ========================================================================== */

html.menu-open,
body.menu-open {
  overflow: hidden;
  height: 100%;
}

/* ==========================================================================
   RESPONSIVIDADE DO LOGO
   ========================================================================== */

@media (max-width: 768px) {
  .brand img {
    height: 30px;
    max-width: 180px;
  }
}

/* ==========================================================================
   HEADER NAVIGATION END Navegação principal//////////////
   ========================================================================== */
/* ==========================================================================
   NOTICIA.CSS
   FMN® — Federação Moçambicana de Natação
   Página individual de notícia
   ========================================================================== */

/* ==========================================================================
   CONTAINER EDITORIAL
   ========================================================================== */
/* ==========================================================================
   NOTICIA.CSS
   FMN® — Federação Moçambicana de Natação

   PÁGINA INDIVIDUAL DE NOTÍCIA

   RESPONSABILIDADES:
   - Estrutura editorial da notícia
   - Cabeçalho da notícia
   - Título
   - Metadata
   - Imagem principal
   - Legenda
   - Conteúdo editorial
   - Destaques
   - Imagem secundária
   - Responsividade

   DEPENDÊNCIAS:
   - variables.css
   - reset.css
   - typography.css

   PRINCÍPIO VISUAL:
   - Editorial
   - Minimalista
   - Muito espaço em branco
   - Tipografia Inter
   - Alto contraste
   - Sem aparência de card
   - Leitura confortável
   ========================================================================== */

/* ==========================================================================
   1. CONTAINER PRINCIPAL
   ========================================================================== */

/*
 * A página de notícia não deve ocupar a largura total do website.
 *
 * A largura máxima é deliberadamente menor que --container (1200px),
 * criando uma coluna editorial confortável para leitura.
 */
/* ==========================================================================
   NEWS.CSS
   FMN® — Federação Moçambicana de Natação

   REFERÊNCIA VISUAL:
   Editorial / institucional — inspirado na composição NASA

   RESPONSABILIDADES:
   - Estrutura da notícia
   - Sidebar editorial
   - Cabeçalho
   - Metadata
   - Imagem principal
   - Legenda
   - Conteúdo editorial
   - Responsividade
   ========================================================================== */

/* ==========================================================================
   1. CONTAINER PRINCIPAL
   ========================================================================== */

/* ==========================================================================
   NEWS.CSS
   FMN® — Federação Moçambicana de Natação

   REFERÊNCIA:
   - Estrutura editorial inspirada na página de notícias da NASA
   - Desktop: sidebar + conteúdo principal
   - Mobile: conteúdo empilhado
   - Utiliza os tokens globais de variables.css
   - Utiliza a tipografia global de typography.css

   RESPONSABILIDADES:
   - Layout da notícia
   - Sidebar editorial
   - Metadata
   - Título
   - Imagem principal
   - Legenda
   - Redes sociais
   - Conteúdo editorial
   - Elementos internos da notícia
   - Responsividade

   NÃO RESPONSABILIDADES:
   - Reset global
   - Tipografia global
   - Design tokens
   - Header global
   - Footer global
   - Navegação global
   ========================================================================== */

/* ==========================================================================
   1. BLOCO PRINCIPAL DA NOTÍCIA
   ========================================================================== */

.news-block {
  width: 100%;
  max-width: var(--container-max);

  margin: 0 auto;

  padding: var(--space-10) var(--gutter) var(--space-20);

  color: var(--color-text);
}

/* ==========================================================================
   2. ESTRUTURA PRINCIPAL
   ========================================================================== */

.news-layout {
  display: grid;

  grid-template-columns:
    270px
    minmax(0, 700px);

  column-gap: clamp(80px, 11vw, 180px);

  align-items: start;

  /*
   * Mantemos a composição editorial concentrada
   * no centro da página.
   */
  justify-content: center;
}

/* ==========================================================================
   3. SIDEBAR EDITORIAL
   ========================================================================== */

.news-sidebar {
  width: 100%;

  /*
   * A sidebar começa mais abaixo no desktop,
   * alinhando-se aproximadamente com a região
   * da imagem da referência.
   */
  margin-top: 270px;

  color: var(--color-heading);

  font-size: var(--fs-small);
  font-weight: var(--fw-bold);

  line-height: var(--lh-body);
}

/* ==========================================================================
   4. AUTOR
   ========================================================================== */

.news-sidebar-author {
  padding: 0 0 var(--space-6);

  color: var(--color-heading);

  font-weight: var(--fw-bold);
}

/* ==========================================================================
   5. ITENS DA SIDEBAR
   ========================================================================== */

.news-sidebar-item {
  min-height: 48px;

  display: flex;
  align-items: center;

  padding: var(--space-4) 0;

  border-top: 1px solid var(--color-border-strong);
}

/*
 * Último item recebe linha inferior.
 */

.news-sidebar-item:last-of-type {
  border-bottom: 1px solid var(--color-border-strong);
}

/* ==========================================================================
   6. DATA
   ========================================================================== */

.news-sidebar time {
  color: var(--color-heading);

  font-size: var(--fs-small);
  font-weight: var(--fw-bold);

  line-height: var(--lh-body);

  text-transform: uppercase;
}

/* ==========================================================================
   7. LINKS DA SIDEBAR
   ========================================================================== */

.news-sidebar a {
  color: var(--color-heading);

  font-weight: var(--fw-bold);

  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;

  transition:
    color var(--transition-fast),
    text-decoration-thickness var(--transition-fast);
}

.news-sidebar a:hover {
  color: var(--color-primary);

  text-decoration-thickness: 2px;
}

.news-sidebar a:focus-visible {
  outline: 2px solid var(--color-primary);

  outline-offset: 3px;
}

/* ==========================================================================
   8. REDES SOCIAIS
   ========================================================================== */

.news-socials {
  display: flex;
  align-items: center;

  gap: var(--space-3);

  padding-top: var(--space-4);
}

/* ==========================================================================
   8.1 BOTÕES SOCIAIS
   ========================================================================== */

.news-socials a {
  width: 32px;
  height: 32px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  color: #ffffff;

  background: var(--color-heading);

  font-size: var(--fs-small);
  font-weight: var(--fw-bold);

  line-height: 1;

  text-decoration: none;

  transition:
    transform var(--transition-fast),
    opacity var(--transition-fast);
}

.news-socials a:hover {
  transform: translateY(-2px);

  opacity: 0.85;
}

.news-socials a:focus-visible {
  outline: 2px solid var(--color-primary);

  outline-offset: 3px;
}

/* ==========================================================================
   8.2 CORES INDIVIDUAIS DAS REDES
   ========================================================================== */

/*
 * X
 */

.news-socials a:nth-child(1) {
  background: #000000;
}

/*
 * Facebook
 */

.news-socials a:nth-child(2) {
  background: #4267b2;
}

/*
 * LinkedIn
 */

.news-socials a:nth-child(3) {
  background: #0a66c2;
}

/*
 * RSS
 */

.news-socials a:nth-child(4) {
  background: #f26522;
}

/* ==========================================================================
   9. ÁREA PRINCIPAL
   ========================================================================== */

.news-main {
  min-width: 0;

  width: 100%;
  max-width: 712px;
}

/* ==========================================================================
   10. CABEÇALHO DA NOTÍCIA
   ========================================================================== */

.news-header {
  width: 100%;

  margin: 0 0 var(--space-16);
}

/* ==========================================================================
   11. TEMPO DE LEITURA
   ========================================================================== */

.news-meta {
  display: flex;
  align-items: center;

  margin-bottom: var(--space-6);

  color: var(--color-heading);

  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);

  line-height: var(--lh-body);

  letter-spacing: 0.28em;

  text-transform: uppercase;
}

/* ==========================================================================
   12. TÍTULO PRINCIPAL
   ========================================================================== */

.news-title {
  width: 100%;
  max-width: 700px;

  margin: 0;

  color: #1b1b1b;

  /*
   * typography.css já controla:
   * - font-family
   * - font-weight
   *
   * Aqui controlamos apenas a composição editorial.
   */

  font-size: clamp(2.75rem, 4vw, 3.5rem);

  line-height: 1.05;

  letter-spacing: -0.035em;
}

/* ==========================================================================
   13. FIGURA PRINCIPAL
   ========================================================================== */

.news-featured-image {
  width: 100%;

  margin: 0;
}

/* ==========================================================================
   14. IMAGEM PRINCIPAL
   ========================================================================== */

.news-featured-image img {
  width: 100%;
  height: auto;

  display: block;
}

/* ==========================================================================
   15. LEGENDA
   ========================================================================== */

.news-caption,
.news-featured-image figcaption {
  margin: var(--space-4) 0 0;

  color: #58585b;

  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);

  line-height: var(--lh-body);
}

/* ==========================================================================
   16. CONTEÚDO EDITORIAL
   ========================================================================== */

.news-content {
  width: 100%;
  max-width: 700px;

  margin-top: var(--space-12);

  color: var(--color-text);
}

/* ==========================================================================
   17. PARÁGRAFOS
   ========================================================================== */

.news-content p {
  margin: 0 0 var(--space-6);

  color: #1b1b1b;

  font-size: var(--fs-lg);
  font-weight: var(--fw-regular);

  line-height: var(--lh-relaxed);

  letter-spacing: -0.005em;
}

/* ==========================================================================
   18. PRIMEIRO PARÁGRAFO
   ========================================================================== */

.news-content > p:first-child {
  margin-top: 0;
}

/* ==========================================================================
   19. TÍTULOS INTERNOS
   ========================================================================== */

.news-content h2 {
  margin: var(--space-12) 0 var(--space-5);

  color: var(--color-heading);

  font-size: var(--fs-h2);

  line-height: var(--lh-heading);

  letter-spacing: -0.025em;
}

.news-content h3 {
  margin: var(--space-10) 0 var(--space-4);

  color: var(--color-heading);

  font-size: var(--fs-h3);

  line-height: var(--lh-heading);

  letter-spacing: -0.015em;
}

.news-content h4 {
  margin: var(--space-8) 0 var(--space-3);

  color: var(--color-heading);

  font-size: var(--fs-h4);

  line-height: var(--lh-heading);
}

/* ==========================================================================
   20. LINKS NO ARTIGO
   ========================================================================== */

.news-content a {
  color: var(--color-primary);

  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;

  transition:
    color var(--transition-fast),
    text-decoration-thickness var(--transition-fast);
}

.news-content a:hover {
  color: var(--color-primary-dark);

  text-decoration-thickness: 2px;
}

.news-content a:focus-visible {
  outline: 2px solid var(--color-primary);

  outline-offset: 3px;
}

/* ==========================================================================
   21. DESTAQUE EDITORIAL
   ========================================================================== */

.news-highlight-block {
  margin: var(--space-10) 0;

  padding: var(--space-4) var(--space-5);

  border-left: 3px solid var(--color-primary);

  color: var(--color-heading);

  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);

  line-height: var(--lh-relaxed);
}

/* ==========================================================================
   22. PARÁGRAFO DENTRO DO DESTAQUE
   ========================================================================== */

.news-highlight-block p {
  margin: 0;
}

/* ==========================================================================
   23. CITAÇÕES
   ========================================================================== */

.news-content blockquote {
  margin: var(--space-10) 0;

  padding-left: var(--space-5);

  border-left: 3px solid var(--color-border-strong);

  color: var(--color-heading);

  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);

  line-height: var(--lh-relaxed);
}

/* ==========================================================================
   24. LISTAS
   ========================================================================== */

.news-content ul,
.news-content ol {
  margin: var(--space-6) 0;

  padding-left: var(--space-6);

  color: var(--color-text);

  font-size: var(--fs-lg);

  line-height: var(--lh-relaxed);
}

.news-content ul {
  list-style: disc;
}

.news-content ol {
  list-style: decimal;
}

.news-content li {
  margin-bottom: var(--space-3);
}

/* ==========================================================================
   25. TEXTO EM NEGRITO
   ========================================================================== */

.news-content strong,
.news-content b {
  color: var(--color-heading);

  font-weight: var(--fw-bold);
}

/* ==========================================================================
   26. IMAGENS INTERNAS
   ========================================================================== */

.news-content img {
  width: 100%;
  height: auto;

  display: block;

  margin: var(--space-8) 0;
}

/* ==========================================================================
   CRÉDITO DA FOTOGRAFIA
   ========================================================================== */

.news-credit {
  display: block;

  margin-top: 2px;

  color: var(--color-heading);

  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);

  line-height: var(--lh-body);
}

/* ==========================================================================
   27. TABELAS
   ========================================================================== */

.news-content table {
  width: 100%;

  margin: var(--space-8) 0;

  overflow: hidden;

  font-size: var(--fs-small);
}

.news-content th,
.news-content td {
  padding: var(--space-3) var(--space-4);

  border: 1px solid var(--color-border);

  text-align: left;
}

.news-content th {
  color: var(--color-heading);

  background: var(--color-surface-muted);

  font-weight: var(--fw-bold);
}

/* ==========================================================================
   28. SEPARADOR
   ========================================================================== */

.news-divider {
  width: 100%;

  margin: var(--space-12) 0;

  border: 0;

  border-top: 1px solid var(--color-border);
}

/* ==========================================================================
   29. TABLET — ATÉ 1000PX
   ========================================================================== */

@media (max-width: 1000px) {
  .news-block {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }

  .news-layout {
    grid-template-columns:
      210px
      minmax(0, 700px);

    column-gap: var(--space-10);
  }

  .news-sidebar {
    margin-top: 230px;
  }

  .news-title {
    font-size: clamp(2.5rem, 5vw, 3.25rem);
  }
}

/* ==========================================================================
   30. MOBILE — ATÉ 768PX
   ========================================================================== */

@media (max-width: 768px) {
  /* ------------------------------------------------------------------------
     CONTAINER
     ------------------------------------------------------------------------ */

  .news-block {
    width: 100%;

    max-width: none;

    margin: 0;

    padding: var(--space-10) 24px var(--space-16);
  }

  /* ------------------------------------------------------------------------
     LAYOUT
     ------------------------------------------------------------------------ */

  .news-layout {
    display: grid;

    grid-template-columns: 1fr;

    grid-template-areas:
      'header'
      'sidebar'
      'image'
      'content';

    column-gap: 0;
    row-gap: 0;

    justify-content: initial;
  }

  /* ------------------------------------------------------------------------
     MAIN
     ------------------------------------------------------------------------ */

  .news-main {
    display: contents;

    width: 100%;
    max-width: none;
  }

  /* ------------------------------------------------------------------------
     HEADER
     ------------------------------------------------------------------------ */

  .news-header {
    grid-area: header;

    width: 100%;

    margin: 0 0 var(--space-16);
  }

  /* ------------------------------------------------------------------------
     METADATA
     ------------------------------------------------------------------------ */

  .news-meta {
    display: flex;
    align-items: center;

    margin-bottom: var(--space-6);

    font-size: var(--fs-xs);

    letter-spacing: 0.28em;
  }

  /* ------------------------------------------------------------------------
     TÍTULO
     ------------------------------------------------------------------------ */

  .news-title {
    width: 100%;
    max-width: none;

    margin: 0;

    font-size: clamp(2.15rem, 8vw, 2.65rem);

    line-height: 1.08;

    letter-spacing: -0.035em;
  }

  /* ------------------------------------------------------------------------
     SIDEBAR
     ------------------------------------------------------------------------ */

  .news-sidebar {
    grid-area: sidebar;

    width: 100%;

    margin: 0 0 var(--space-4);

    font-size: var(--fs-small);
  }

  /* ------------------------------------------------------------------------
     AUTOR
     ------------------------------------------------------------------------ */

  .news-sidebar-author {
    padding: 0 0 var(--space-6);

    color: var(--color-heading);

    text-align: center;

    font-size: var(--fs-small);
    font-weight: var(--fw-bold);
  }

  /* ------------------------------------------------------------------------
     ITENS DA SIDEBAR
     ------------------------------------------------------------------------ */

  .news-sidebar-item {
    min-height: 48px;

    display: flex;
    align-items: center;

    padding: var(--space-3) 0;

    border-top: 1px solid var(--color-border-strong);
  }

  .news-sidebar-item:last-of-type {
    border-bottom: 1px solid var(--color-border-strong);
  }

  /* ------------------------------------------------------------------------
     DATA
     ------------------------------------------------------------------------ */

  .news-sidebar time {
    font-size: var(--fs-small);

    font-weight: var(--fw-bold);

    text-transform: uppercase;
  }

  /* ------------------------------------------------------------------------
     REDES SOCIAIS
     ------------------------------------------------------------------------ */

  .news-socials {
    display: flex;
    align-items: center;

    gap: var(--space-3);

    padding-top: var(--space-4);
  }

  .news-socials a {
    width: 32px;
    height: 32px;

    flex: 0 0 32px;
  }

  /* ------------------------------------------------------------------------
     IMAGEM
     ------------------------------------------------------------------------ */

  .news-featured-image {
    grid-area: image;

    width: 100%;

    margin: 0;
  }

  .news-featured-image img {
    width: 100%;
    height: auto;

    display: block;
  }

  /* ------------------------------------------------------------------------
     LEGENDA
     ------------------------------------------------------------------------ */

  .news-caption,
  .news-featured-image figcaption {
    margin: var(--space-4) 0 0;

    color: var(--color-text-muted);

    font-size: var(--fs-xs);

    line-height: var(--lh-body);
  }

  /* ------------------------------------------------------------------------
     CONTEÚDO
     ------------------------------------------------------------------------ */

  .news-content {
    grid-area: content;

    width: 100%;
    max-width: none;

    margin-top: var(--space-10);
  }

  /* ------------------------------------------------------------------------
     PARÁGRAFOS
     ------------------------------------------------------------------------ */

  .news-content p {
    margin: 0 0 var(--space-6);

    font-size: var(--fs-body);

    line-height: var(--lh-relaxed);
  }

  /* ------------------------------------------------------------------------
     TÍTULOS INTERNOS
     ------------------------------------------------------------------------ */

  .news-content h2 {
    margin: var(--space-10) 0 var(--space-4);

    font-size: var(--fs-h2);
  }

  .news-content h3 {
    margin: var(--space-8) 0 var(--space-3);

    font-size: var(--fs-h3);
  }

  /* ------------------------------------------------------------------------
     DESTAQUE
     ------------------------------------------------------------------------ */

  .news-highlight-block {
    margin: var(--space-8) 0;

    padding: var(--space-4);

    border-left: 3px solid var(--color-primary);

    font-size: var(--fs-body);

    line-height: var(--lh-relaxed);
  }

  /* ------------------------------------------------------------------------
     CITAÇÕES
     ------------------------------------------------------------------------ */

  .news-content blockquote {
    margin: var(--space-8) 0;

    padding-left: var(--space-4);

    font-size: var(--fs-body);

    line-height: var(--lh-relaxed);
  }

  /* ------------------------------------------------------------------------
     LISTAS
     ------------------------------------------------------------------------ */

  .news-content ul,
  .news-content ol {
    padding-left: var(--space-5);

    font-size: var(--fs-body);

    line-height: var(--lh-relaxed);
  }

  /* ------------------------------------------------------------------------
     IMAGENS INTERNAS
     ------------------------------------------------------------------------ */

  .news-content img {
    margin: var(--space-6) 0;
  }

  /* ------------------------------------------------------------------------
     TABELAS
     ------------------------------------------------------------------------ */

  .news-content table {
    display: block;

    max-width: 100%;

    overflow-x: auto;

    white-space: nowrap;
  }
}

/* ==========================================================================
   31. MOBILE PEQUENO — ATÉ 400PX
   ========================================================================== */

@media (max-width: 400px) {
  .news-block {
    padding-right: var(--space-3);
    padding-left: var(--space-3);
  }

  .news-meta {
    font-size: var(--fs-xs);

    letter-spacing: 0.18em;
  }

  .news-title {
    font-size: 2rem;

    line-height: 1.08;

    letter-spacing: -0.025em;
  }

  .news-sidebar-author {
    font-size: var(--fs-small);
  }

  .news-content p {
    font-size: var(--fs-body);

    line-height: var(--lh-relaxed);
  }
}

/* ==========================================================================
   32. REDUCED MOTION
   ========================================================================== */

/*
 * O reset.css já trata prefers-reduced-motion globalmente.
 *
 * Não duplicamos a regra aqui.
 */

/* ==========================================================================
   FIM DO NEWS.CSS
   ========================================================================== */
/* ==========================================================================
   FIM DO NEWS.CSS
   ========================================================================== */
/* ==========================================================================
   21. REDUCED MOTION
   ========================================================================== */

/*
 * O reset.css já trata prefers-reduced-motion globalmente.
 *
 * Esta seção não cria animações adicionais para a página da notícia.
 */

/* ==========================================================================
   FIM DO NOTICIA.CSS
   ========================================================================== */

/* ==========================================================================
   FIM DO NOTICIA.CSS QUE CONTROLA CADA PAGINA
   ========================================================================== */

/* =========================================================
   LAYOUT HELPERS
   ========================================================= */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  margin-bottom: 50px;
  margin-top: 50px;
  padding: 0 var(--gutter);
}

/* Conteúdo acessível apenas para leitores de ecrã */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* =========================================================
   HEADER / NAVIGATION
   ========================================================= */

/* =========================================================
   HEADER FIXO (ALTURA CONTROLADA)
   ========================================================= */

body {
  background-color: var(--color-background);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding-top: var(--header-height);
}

/* =========================================================
   HERO / CONTEÚDO PRINCIPAL
   ========================================================= */
.hero {
  padding: 4rem 0;
  display: grid;
  gap: 2rem;
  align-items: center;
}

.hero-inner {
  display: grid;
  gap: 1rem;
}

.eyebrow {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.9rem;
}

.hero h1 {
  margin: 0;
  font-size: clamp(1.7rem, 4vw, 2.65rem);
  line-height: 1.05;
}

.hero p {
  margin: 0;
  color: var(--muted);
  max-width: 700px;
}

.cta-row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}

/* Botões */
.btn {
  display: inline-block;
  padding: 0.7rem 1rem;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
}

.btn-primary {
  background: var(--accent);
  color: var(--text);
}

.btn-ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
}

/* Grid */
.grid-3 {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  margin-top: 1rem;
}

@media (min-width: 700px) {
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .hero {
    grid-template-columns: 2fr 1fr;
    padding: 4rem 2rem;
  }
}

/* Cards */
.card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 1rem;
  box-shadow: var(--shadow);
}

/* =========================================================
   FORMULÁRIOS
   ========================================================= */
form.card input,
form.card textarea {
  width: 100%;
  padding: 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
}

/* =========================================================
   FOOTER (ESTRUTURA MODULAR)
   ========================================================= */

/* Footer base */
.rio-footer {
  background: var(--surface);
  color: var(--footer-contrast);

  font-size: 0.95rem;
}

/* Topo */
.rio-footer-top {
  padding: 3rem 0 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

/* Container interno */
.rio-ct {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  align-items: flex-start;
}

/* Branding */
.rio-brand {
  display: flex;
  gap: 1rem;
  align-items: center;
  min-width: 220px;
}

.rio-brand img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 6px;
  background: transparent;
}

.rio-brand p {
  margin: 0;
  color: var(--footer-contrast);
  font-weight: 700;
}

/* Links */
.rio-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: 1.25rem;
  flex: 1;
}

@media (max-width: 840px) {
  .rio-links {
    grid-template-columns: repeat(2, 1fr);
  }
  .rio-brand {
    min-width: unset;
    width: 100%;
  }
  .rio-ct {
    flex-direction: column;
  }
}

.rio-links h4 {
  margin: 0 0 0.5rem;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 700;
}

.rio-links a {
  display: block;
  color: #c9cccf;
  text-decoration: none;
  margin: 0.28rem 0;
  font-size: 0.9rem;
}

.rio-links a:hover {
  color: var(--footer-contrast);
}

/* Parte inferior */
.rio-footer-bottom {
  background: var(--surface);
  padding: 1rem 0;
  font-size: 0.85rem;
}

.rio-bottom-inner {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.rio-legal a {
  color: var(--footer-muted);
  text-decoration: none;
  margin-left: 1rem;
}

.rio-legal a:hover {
  color: var(--footer-contrast);
}

/* ESTE CSS MANTEM O FOOTER EM BAIXO SEM ESPACOS INICIO******/
html,
body {
  height: 100%;
  margin: 0;
  overflow-x: hidden;
}

/* ESTE É O MAIS IMPORTANTE */
main {
  flex: 1 0 auto;
}
/* ESTE CSS MANTEM O FOOTER EM BAIXO SEM ESPACOS  FIM*********/

/* =========================================================
   2 FOOTER (ESTRUTURA MODULAR) 2 start
   ========================================================= */

/* =========================================================
   2 FOOTER (ESTRUTURA MODULAR) 2 end
   ========================================================= */

/* =========================================================
   UTILITÁRIOS
   ========================================================= */
.muted {
  color: var(--muted);
}

a {
  color: inherit;
}

/* =========================================================
   HEADER BANNER / PLAYER
   ========================================================= */
.header-banner {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.header-banner::after {
  content: '';
  position: absolute;
  inset: 0;
}

.player-content {
  position: relative;
  z-index: 5;
  height: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 20px;
  display: flex;
  align-items: flex-start;
}

.team-title {
  font-size: var(--fs-3xl);
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #fff;
}

@media (max-width: 1024px) {
  .team-title {
    font-size: 34px;
  }
}

@media (max-width: 768px) {
  .player-content {
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 24px;
  }
  .team-title {
    font-size: 28px;
    text-align: center;
  }
}

.team-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.team-sponsor {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
}

@media (max-width: 768px) {
  .team-sponsor {
    display: none;
  }
}

.player-header-container {
  position: relative;
  width: 100%;
  height: 360px;
  max-height: 50vh;
  overflow: hidden;
}

.club-header-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.club-header-background img,
.club-header-background source {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* =========================================================
   TEXT UTILITIES
   ========================================================= */
.muted-small {
  font-size: 0.9rem;
  margin-top: 0.2rem;
}

/* MOBILE */
@media (max-width: 768px) {
  .brand img {
    height: 30px;
    max-width: 180px;
  }
}

/* =========================================================
   RESET / BASE
   ========================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* =========================================================
   DESKTOP (>= 880px)
   ========================================================= */
@media (min-width: 880px) {
  .nav-toggle {
    display: none;
  }

  .nav-list {
    flex-direction: row;
    gap: 1.5rem;
    align-items: center;
  }

  /* Submenu desktop */
  .submenu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: #fff;
    border-radius: 0;
    padding: 0;
    box-shadow: var(--shadow);
    display: none;
  }

  .has-submenu:hover .submenu {
    display: flex;
  }
}

/* =========================================================
   MOBILE FULLSCREEN (< 880px)
   ========================================================= */
@media (max-width: 879px) {
  /* Painel fullscreen */
  .nav-list {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    width: 100vw;
    height: calc(100vh - var(--header-height));
    background: var(--surface);
    padding: 2rem 1.5rem;
    gap: 1rem;
    overflow-y: auto;

    transform: translateX(100%);
    transition: transform 0.35s ease;
    z-index: 1000;
    box-shadow: -4px 0 15px rgba(0, 0, 0, 0.1);
  }

  .nav-list.show {
    transform: translateX(0);
  }

  /* 🔴 CORREÇÃO 1 — submenu abrir no mobile */
}

/* =========================================================
   🔴 CORREÇÃO 2 — BLOQUEIO TOTAL DE SCROLL
   ========================================================= */

footer {
  background: var(--footer-bg);
  color: var(--footer-text);
}

footer .muted {
  color: var(--footer-muted);
}

.footer-logo {
  text-align: center;
  padding: 24px 20px 24px;
  font-weight: 800;
  font-size: 38px;
  letter-spacing: -1px;
}

.footer-container {
  max-width: 1280px;
  margin: auto;
  padding: 3.2rem 3rem 4.8rem;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4rem;
}

.footer-column ul {
  list-style: none;
}

.footer-column ul li {
  margin-bottom: 12px;
}

.footer-column ul li a {
  text-decoration: none;
  color: var(--muted);
  font-size: 16px;
  transition: 0.25s ease;
}

.footer-column ul li a:hover {
  color: var(--text);
}

.footer-bottom {
  max-width: 1200px;
  margin: auto;
  padding: 15px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.app-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.social-icons svg {
  width: 20px;
  height: 20px;
  fill: var(--muted);
  cursor: pointer;
  transition: 0.25s ease;
}

@media (max-width: 1100px) {
  .footer-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .footer-container {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ===========================
NOVOOOOOOOOOOOO   FOOOOOOOOOTER INICIO
=========================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ===========================
   FULL BLEED RED LINE
=========================== */

.full-red-line {
  width: 100vw;
  height: 1px;
  background: var(--line);
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* ===========================
   FOOTER
=========================== */

.footer-column h4 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 18px;
  color: var(--text);
}

/* ===========================
   APP + SOCIAL ROW
=========================== */

.app-buttons {
  display: flex;
  gap: 15px;
}

.app-buttons img {
  height: 40px;
  cursor: pointer;
}

.social-icons svg:hover {
  fill: var(--accent);
}

/* ===========================
   COPYRIGHT
=========================== */

.copyright {
  max-width: 1280px;
  margin: auto;
  padding: 16px 40px 16px;
  font-size: 13.2px;
  color: #8c8c8c;
}

/* ===========================
   RESPONSIVE
=========================== */

@media (max-width: 860px) {
  .footer-container {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 2rem;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

.footer-logo img {
  width: auto;
  height: 2.2rem; /* ajuste conforme necessário */
  display: block;
  margin: 0 auto;
}

.footer-bottom-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.footer-copy {
  font-size: 13px;
  color: var(--muted);
}

.footer-controls {
  display: flex;
  gap: 60px;
}

.footer-select {
  display: flex;
  flex-direction: column;
}

.select-label {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 6px;
}

/* CUSTOM SELECT */

.custom-select {
  position: relative;
  width: 200px;
}

.select-selected {
  display: flex;
  justify-content: space-between;
  align-items: center;

  border-bottom: 1px solid #8a949c;
  padding: 6px 0;
  cursor: pointer;
  font-size: 15px;
}

/* ARROW */

.arrow {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid rgb(100, 100, 100);
  transition: transform 0.2s ease;
}

.custom-select.open .arrow {
  transform: rotate(180deg);
}

/* OPTIONS POPUP */

.select-options {
  position: absolute;
  bottom: 40px;
  left: 0;
  width: 230px;
  max-height: 240px;
  overflow-y: auto;
  background: #d9d9d9;
  color: #2b2b2b;
  display: none;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  z-index: 20;
}

.custom-select.open .select-options {
  display: block;
}

/* OPTIONS */

.option {
  padding: 14px 18px;
  cursor: pointer;
  font-size: 15px;
}

.option:hover {
  background: #cfcfcf;
}

/* RESPONSIVE */

@media (max-width: 768px) {
  .footer-bottom-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .footer-controls {
    gap: 30px;
  }
}

@media (max-width: 768px) {
  .footer-bottom-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 25px;
  }

  .footer-controls {
    flex-direction: column;
    width: 100%;
    gap: 25px;
  }

  .footer-select {
    width: 100%;
  }

  .custom-select {
    width: 100%;
  }

  .select-selected {
    width: 100%;
  }

  .select-options {
    width: 100%;
    left: 0;
  }
}

.footer-bottom-bar {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 20px 0;
}

/* SOCIAL ICONS */
.social-icons {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 25px;
}

/* DESKTOP */
.social-icons img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  transition: transform 0.2s ease;
}

.social-icons img:hover {
  transform: scale(1.1);
}

/* TABLET */
@media (max-width: 1024px) {
  .social-icons img {
    width: 22px;
    height: 22px;
  }
}

/* MOBILE */
@media (max-width: 768px) {
  .social-icons img {
    width: 22px;
    height: 22px;
  }
}

/* MOBILE PEQUENO */
@media (max-width: 480px) {
  .social-icons img {
    width: 22px;
    height: 22px;
  }
}

@media (max-width: 768px) {
  .footer-bottom {
    flex-direction: column; /* empilha conteúdo */
    align-items: center; /* centraliza horizontalmente */
    gap: 20px; /* espaçamento entre filas */
  }

  .footer-socials__container {
    justify-content: center; /* centraliza os ícones */
    margin-top: 10px; /* opcional: espaçamento acima */
  }
}

@media (max-width: 1295px) {
  .footer-bottom {
    flex-direction: column; /* empilha conteúdo */
    align-items: center; /* centraliza horizontalmente */
    gap: 20px; /* espaçamento entre filas */
  }

  .footer-socials__container {
    justify-content: center; /* centraliza os ícones */
    margin-top: 10px; /* opcional: espaçamento acima */
  }
}

@media (max-width: 768px) {
  footer {
    display: flex;
    flex-direction: column;
  }

  /* sociais sobem */
  .social-icons {
    order: 2;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin: 20px 0;
  }

  /* colunas descem */
  .footer-container {
    order: 3;
  }

  /* garante que a barra final continua no fim */
  .footer-bottom-bar {
    order: 4;
  }
}

/* ==========================================================================
   ULTIMAS NOTICIAS INDEX INICIO (REVISADO E INTEGRADO)
   ========================================================================== */

/* ==========================================================================
   RESET E CONFIGURAÇÕES BASE
   ========================================================================== */

.news-section {
  padding: 12px;
  max-width: 1200px;
  margin: 0 auto;
}

/* 🚀 Otimizado: Título limpo com tracking negativo */
.news-header h2 {
  color: var(--color-dark);
  font-family: 'Inter', sans-serif;
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-top: 0;
  margin-bottom: 20px;
}

/* ==========================================================================
   MOBILE FIRST (Padrão para Telas Pequenas/Telemóveis abaixo de 576px)
   ========================================================================== */
.news-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

/* 🚀 CORREÇÃO 1: Evita que a tag picture esmague ou empurre o conteúdo do overlay */
.news-card picture {
  display: block;
  width: 100%;
}

.card-large,
.card-right {
  grid-column: span 1;
  grid-row: span 1;
  min-height: 340px;
  position: relative;
}

/* 🚀 CORREÇÃO 2: Força as imagens de fundo a respeitarem as bordas absolutas nos cards maiores */
.card-large .card-media,
.card-right .card-media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding-top: 0;
}

.card-media picture img,
.card-media img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-large picture img,
.card-large img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-content {
  padding: 16px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
}

/* 🚀 Otimizado: Títulos equilibrados e nítidos nos cards brancos */
.card-content p {
  font-family: 'Inter', sans-serif;
  color: var(--color-dark);
  font-size: var(--fs-body); /* Perfeito para o texto não ficar gigante */
  font-weight: 700; /* Ativa o Bold nativo limpo */
  line-height: 1.35;
  letter-spacing: -0.015em;
  margin: 0;
}

/* 🚀 CORREÇÃO 3: Z-Index adicionado para forçar o texto a aparecer NA FRENTE da imagem */
.card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.4) 60%,
    rgba(0, 0, 0, 0) 100%
  );
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 2; /* Traz a camada do texto para cima da foto */
}

/* 🚀 Otimizado: Letras nítidas por cima da imagem */
.card-overlay h3 {
  font-family: 'Inter', sans-serif;
  color: #ffffff;
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.3;
}

.card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-top: auto;
}

.hashtag {
  font-family: 'Inter', sans-serif;
  color: var(--color-text);
  font-size: var(--fs-small);
  font-weight: 500;
}

.card-overlay .hashtag {
  color: #cbd5e1;
  font-weight: 500;
}

.sport-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: 16px;
  color: var(--color-primary);
}

.news-footer {
  display: flex;
  justify-content: flex-start;
  margin-top: 24px;
}

.btn-view-all {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  color: #ffffff;
  padding: 12px 32px;
  border-radius: 6px;
  font-size: var(--fs-small);
  font-weight: 500;
  text-decoration: none;
  background-color: var(--color-primary);
  transition: background-color var(--transition-fast) ease;
}

.btn-view-all:hover {
  background-color: #004494;
}

a.btn-galeria-custom {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  color: #ffffff;
  padding: 12px 32px;
  border-radius: 6px;
  font-size: var(--fs-small);
  font-weight: 500;
  text-decoration: none;
  background-color: var(--color-primary);
  transition: background-color var(--transition-fast) ease;
}

a.btn-galeria-custom:hover {
  background-color: #004494;
}

/* ==========================================================================
   MEDIA QUERY: TABLETS E TELAS MÉDIAS (De 576px até 992px)
   ========================================================================== */
@media (min-width: 576px) and (max-width: 992px) {
  .news-section {
    padding: 24px;
  }

  .news-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .card-large,
  .card-right {
    grid-column: span 2;
    min-height: 480px;
  }
}

/* ==========================================================================
   MEDIA QUERY: DESKTOP (Telas Grandes acima de 992px)
   ========================================================================== */
@media (min-width: 993px) {
  .news-section {
    padding: 12px;
  }

  .news-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }

  .card-large {
    grid-column: span 2;
    grid-row: span 1;
    min-height: 280px;
  }

  .card-right {
    grid-column: 3 / span 2;
  }

  /* 🚀 Otimizado: No computador o título do card grande ganha mais peso visual */
  .card-overlay h3 {
    font-size: var(--fs-h2);
  }
}

/* ==========================================================================
   ULTIMAS NOTICIAS INDEX FIM
   ========================================================================== */

.editors-section {
  background-color: #ffffff;
  width: 100%;
  overflow: hidden;
}

.section-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 12px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.section-header h2 {
  color: #0c1c4e;
  font-size: 24px;
  font-weight: 700;
  margin: 0;
}

.nav-arrows {
  display: flex;
  gap: 12px;
}

.arrow-btn {
  background: transparent;
  border: 1.5px solid #1434cb;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.arrow-btn svg {
  width: 20px;
  height: 20px;
  fill: #1434cb;
}

/* Container de rolagem */
.slider-wrapper {
  width: 100%;
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
}

.slider-wrapper::-webkit-scrollbar {
  display: none; /* Chrome e Safari */
}

.carousel-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  width: 100%;
}

.editor-card {
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
}

.card-media {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.card-media img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-duration {
  position: absolute;
  top: 12px;
  right: 12px;
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #ffffff;
  padding: 4px 10px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  z-index: 2;
}

.play-icon {
  width: 12px;
  height: 12px;
  fill: #ffffff;
}

.card-info {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-grow: 1;
}

.card-date {
  font-size: 13px;
  color: #718096;
}

.card-title {
  color: #0c1c4e;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
}

.footer-action {
  margin-top: 28px;
}

.btn-see-all {
  display: inline-block;
  border: 1px solid #1434cb;
  color: #1434cb;
  padding: 10px 32px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
}

/* Configuração Mobile do Slider Proporcional */
@media (max-width: 768px) {
  .section-container {
    padding: 24px 0 24px 20px; /* Mantém padding interno apenas na esquerda */
  }

  .section-header {
    padding-right: 20px;
  }

  .footer-action {
    padding-right: 20px;
  }

  .btn-see-all {
    display: block;
    width: 100%;
  }

  .carousel-grid {
    display: flex;
    gap: 16px;
    width: max-content;
    padding-right: 20px; /* Espaço para o último card não colar */
  }

  .editor-card {
    /* Define a largura exata para deixar 80% do card principal visível e uma porção do próximo */
    width: calc(80vw - 16px);
    max-width: 330px;
    flex-shrink: 0;
    scroll-snap-align: center; /* Centraliza levemente para melhor usabilidade no toque */
  }
}

.photos-section {
  background-color: #f3f5f8; /* Fundo claro idêntico à imagem de referência */
  width: 100%;
  overflow: hidden;
}

.photos-section .section-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 12px;
}

.photos-section .section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.photos-section .section-header h2 {
  color: #0c1c4e;
  font-size: 24px;
  font-weight: 700;
  margin: 0;
}

.photos-section .nav-arrows {
  display: flex;
  gap: 8px;
}

.photos-section .arrow-btn {
  background: #ffffff;
  border: 1px solid #d2d7df;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: border-color 0.2s;
}

.photos-section .arrow-btn:hover {
  border-color: #0035c3;
}

.photos-section .arrow-btn svg {
  width: 18px;
  height: 18px;
  fill: #0035c3;
}

.photos-section .slider-wrapper {
  width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
}

.photos-section .slider-wrapper::-webkit-scrollbar {
  display: none;
}

.photos-section .carousel-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  width: 100%;
}

.photo-card {
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
}

.photos-section .card-media {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* Proporção de tela 16:9 */
}

.photos-section .card-media img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #ffffff;
  padding: 4px 10px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 500;
}

.camera-icon {
  width: 12px;
  height: 12px;
  fill: #ffffff;
}

.photos-section .card-info {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-grow: 1;
}

.photos-section .card-date {
  font-size: 13px;
  color: #718096;
  font-weight: 500;
}

.photos-section .card-title {
  color: #0c1c4e;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
}

.photos-section .footer-action {
  margin-top: 28px;
}

.photos-section .btn-see-all {
  display: inline-block;
  border: 1px solid #0035c3;
  color: #0035c3;
  padding: 10px 24px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s;
}

.photos-section .btn-see-all:hover {
  background-color: rgba(0, 53, 195, 0.05);
}

/* Regra estrita mobile (430x932) mostrando o próximo card cortado */
@media (max-width: 768px) {
  .photos-section .section-container {
    padding: 24px 0 24px 20px;
  }

  .photos-section .section-header {
    padding-right: 20px;
  }

  .photos-section .footer-action {
    padding-right: 20px;
  }

  .photos-section .btn-see-all {
    display: block;
    width: 100%;
    text-align: center;
  }

  .photos-section .carousel-grid {
    display: flex;
    gap: 16px;
    width: max-content;
    padding-right: 20px;
  }

  .photo-card {
    width: calc(80vw - 16px);
    max-width: 350px;
    flex-shrink: 0;
    scroll-snap-align: center;
  }
}

.partners-section {
  padding: 12px;
  max-width: 1200px;
  margin: 0 auto;
}

.partners-container {
  max-width: 1200px;
  margin: 0 auto;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);
  padding: 24px 32px;
}

.partners-title {
  color: #4a5568;
  font-size: 11px;
  letter-spacing: 0.8px;
  margin: 0 0 24px 0;
  text-transform: uppercase;
}

.partners-title strong {
  color: #1a202c;
  font-weight: 700;
}

.partners-grid {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.partner-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 100px;
}

.logo-wrapper {
  height: auto;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.logo-wrapper img {
  max-height: 100%;
  max-width: 120px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.85;
  transition:
    filter 0.2s,
    opacity 0.2s;
}

/* Mantém o logo colorido do funny-frisch como na imagem original */
.partner-item:nth-child(4) .logo-wrapper img {
  filter: none;
  opacity: 1;
}

.partner-item:hover .logo-wrapper img {
  filter: none;
  opacity: 1;
}

.partner-name {
  font-size: 12px;
  font-weight: 500;
  color: #718096;
  text-align: center;
}

@media (max-width: 768px) {
  .partners-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
  .logo-wrapper {
    height: auto;
  }
}

@media (max-width: 480px) {
  .partners-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =========================================================
   SPORT ICON - NEWS CARDS
   Tamanho e alinhamento uniforme
========================================================= */

.news-grid .sport-icon-wrapper {
  width: 44px !important;
  height: 44px !important;
  flex: 0 0 44px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  overflow: hidden;
}

/* Corrige conflito com imagens dos cards grandes */
.news-grid .sport-icon-wrapper img {
  position: static !important;

  width: 100% !important;
  height: 100% !important;

  max-width: 44px !important;
  max-height: 44px !important;

  object-fit: contain !important;

  display: block !important;
}

/* =========================================================
   META DO CARD
========================================================= */

.news-grid .card-meta {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;

  width: 100% !important;
}

/* =========================================================
   CARDS GRANDES COM OVERLAY
========================================================= */

.news-grid .card-overlay {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.news-grid .card-overlay .card-meta {
  margin-top: 0;
}

/* Proteção extra:
   a imagem principal do card grande continua normal,
   mas o ícone não é afetado */
.news-grid .card-large > img {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
}

/* =========================================================
   ÍCONE SOBRE IMAGEM ESCURA
========================================================= */
.card-overlay .sport-icon-wrapper {
  position: relative;
  z-index: 5;
  color: var(--color-secondary);
}

/* ==========================
   Sponsors Footer start
========================== */
.footer-sponsors {
  padding-top: 1.3rem;
  padding-bottom: 20px;
  border-bottom: 1px solid #ececec;
}

.footer-sponsors .container {
  max-width: 1280px;
  margin: auto;
}

.footer-sponsors-title {
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  line-height: 16px;
  color: #9fa0a4;
  margin-bottom: 18px;
  letter-spacing: 1px;
}

.footer-sponsors-list {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-sponsors-list a {
  display: flex; /* Mantido flex para perfeito alinhamento */
  align-items: center;
  justify-content: center;
  transition: 0.3s;
  text-decoration: none;
}

.footer-sponsors-list a:hover {
  transform: translateY(-3px);
}

.footer-sponsors-list img {
  /* CORREÇÃO AQUI: Força uma largura para o SVG não colapsar */
  width: 65px;
  height: auto;
  position: relative;

  /* Mantém um limite de altura para logos verticais não estourarem */
  max-height: 45px;

  display: block;
  object-fit: contain;
  opacity: 0.85;
  transition: 0.3s;
}

.footer-sponsors-list a:hover img {
  filter: none;
  opacity: 1;
}

@media (max-width: 768px) {
  .footer-sponsors-list {
    gap: 6px;
  }

  .footer-sponsors-list img {
    width: 65px; /* Reduz o tamanho em telas mobile */
    height: auto;
    position: relative;
  }
}

/* ==========================
   Sponsors Footer end
========================== */

/* ==========================================================================
   galeria de fotos css start multmedia fmn RESET E ESTRUTURA BASE (Alinhada com a seção superior)
   ========================================================================= */
.ultimas-fotos-section * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.ultimas-fotos-section {
  width: 100%;
  padding: 60px 0;
  overflow: hidden;
  background-color: transparent;
}

.fotos-container {
  display: flex;
  flex-direction: row;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 12px;
  gap: 20px;
  justify-content: space-between;
  width: 100%;
}

/* ==========================================================================
   COLUNA DE INTRODUÇÃO (Lado a lado - Largura de partida fixa)
   ========================================================================= */
.fotos-intro-col {
  flex: 0 0 279px;
  width: 284px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.fotos-tagline {
  font-size: 11px;
  text-transform: uppercase;
  color: #999999;
  letter-spacing: 1px;
  margin-bottom: 10px;
}

.fotos-main-title {
  font-size: 32px;
  color: #222222;
  font-weight: 700;
  margin-bottom: 25px;
  position: relative;
  padding-bottom: 15px;
}

.fotos-main-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 2px;
  background-color: #0078d4;
}

.fotos-intro-text {
  font-size: 14px;
  line-height: 1.6;
  color: #666666;
  margin-bottom: 30px;
}

/* ==========================================================================
   ÁREA DO SLIDER E CARDS (Estilo Vertical Compacto Fiel à Referência)
   ========================================================================= */
.fotos-slider-wrapper {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-width: 100%;
}

.fotos-slider {
  display: flex;
  gap: 15px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none; /* Oculta a barra de rolagem no Firefox */
  padding-bottom: 5px; /* Reduzido de 20px para 5px já que não há bolinhas */
  cursor: grab;
  user-select: none;
  width: 100%;
}

.fotos-slider:active {
  cursor: grabbing;
}

.fotos-slider::-webkit-scrollbar {
  display: none; /* Oculta a barra no Chrome, Safari e Edge */
}

/* Card Principal: Removemos o movimento de subida (translateY) */
.foto-card {
  flex: 0 0 170px;
  width: 170px;
  min-width: 170px;
  height: 260px;
  scroll-snap-align: start;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background-color: #111111;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  /* Mantém apenas a transição da sombra projetada */
  transition: box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.foto-card:hover {
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
}

.foto-image-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* Imagem: Adicionamos a regra de transição para o efeito de zoom suave */
.foto-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* O cubic-bezier deixa o início do zoom rápido e o final bem suave */
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Quando o usuário apontar o mouse no CARD, a IMAGEM faz o Zoom-In */
.foto-card:hover .foto-image {
  transform: scale(1.08); /* Aumenta a imagem em 8% de forma controlada */
}

.foto-category {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: #3e6ae1;
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 3;
}

.foto-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 40px 12px 12px 12px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background-color: transparent !important;
  z-index: 2;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.95) 0%,
    rgba(0, 0, 0, 0.5) 60%,
    rgba(0, 0, 0, 0) 100%
  );
}

.foto-excerpt {
  font-size: 16px;
  line-height: 1.3;
  color: #ffffff;
  font-weight: 700;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ==========================================================================
   SISTEMA VISUAL DO LIGHTBOX MODAL (UEFA / F1 VIP STYLE)
   ========================================================================= */
.fmn-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.95);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.fmn-lightbox[aria-hidden='false'] {
  opacity: 1;
  pointer-events: auto;
}

.lightbox-content {
  position: relative;
  max-width: 90%;
  max-height: 85%;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: scale(0.95);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.fmn-lightbox[aria-hidden='false'] .lightbox-content {
  transform: scale(1);
}

.lightbox-content img {
  max-width: 100%;
  max-height: 75vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.lightbox-caption {
  color: #ffffff;
  margin-top: 15px;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.5px;
}

.lightbox-close {
  position: absolute;
  top: 25px;
  right: 30px;
  background: none;
  border: none;
  color: #ffffff;
  font-size: 45px;
  font-weight: 300;
  cursor: pointer;
  line-height: 1;
  opacity: 0.7;
  transition:
    opacity 0.2s,
    transform 0.2s;
  z-index: 100000;
}

.lightbox-close:hover {
  opacity: 1;
  transform: scale(1.1);
}

/* ==========================================================================
   RESPONSIVIDADE E QUEBRAS DE TELA (Breakpoints)
   ========================================================================= */
@media (max-width: 992px) {
  .fotos-container {
    flex-direction: column;
    gap: 30px;
    padding: 0 16px;
  }

  .fotos-intro-col {
    flex: none;
    width: 100%;
    align-items: flex-start;
    text-align: left;
  }

  .fotos-main-title::after {
    left: 0;
    transform: none;
  }

  .fotos-slider-wrapper {
    flex: none;
    width: 100%;
  }

  .lightbox-close {
    top: 15px;
    right: 20px;
    font-size: 35px;
  }
}

/* ==========================================================================
   INDICADOR DE CARREGAMENTO DO LIGHTBOX (SPINNER)
   ========================================================================== */
.lightbox-spinner {
  display: none; /* Controlado dinamicamente pelo JavaScript */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border: 4px solid rgba(255, 255, 255, 0.1);
  border-left-color: #0078d4; /* Azul oficial da Federação */
  border-radius: 50%;
  z-index: 1001;
  animation: fmnSpin 0.8s linear infinite;
}

@keyframes fmnSpin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* ==========================================================================
   galeria de fotos css fim multmedia fmn RESET E ESTRUTURA BASE (Alinhada com a seção superior) fim
   ========================================================================= */

/* --- INICIO Cabeçalho Cinzento Fiel --- */
.fmn-team-header-bg {
  background-color: #f7f7f7;
  width: 100%;
  padding: 50px 0;
  border-bottom: 1px solid #eeeeee;
}

.fmn-team-header-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 12px;
}

.fmn-team-main-title {
  font-size: 32px;
  font-weight: 600;
  color: #1a202c;
  margin: 0;
  letter-spacing: -0.5px;
}

/* --- Caminho de Navegação (Breadcrumb) --- */
.fmn-team-breadcrumb-container {
  width: 100%;
  border-bottom: 1px solid #eeeeee;
}

.fmn-team-breadcrumb {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px;
  font-size: 13px;
}

.fmn-crumb-root {
  color: #333333;
  font-weight: 500;
}

.fmn-crumb-separator {
  color: #aaaaaa;
  margin: 0 8px;
}

.fmn-crumb-current {
  color: #888888;
}

/* --- Área de Listagem da Equipa --- */
.fmn-team-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 20px 60px 20px;
  color: #444444;
}

.fmn-team-card {
  display: flex;
  gap: 40px;
  padding: 55px 0;
  border-bottom: 1px solid #dddddd; /* Linha separadora suave idêntica à imagem */
  align-items: flex-start;
}

/* Mantém a linha divisória suave em todos, exceto no último bloco inferior */
.fmn-team-card:last-child {
  border-bottom: none;
}

.fmn-team-photo-container {
  flex: 0 0 240px;
  width: 240px;
}

.fmn-team-photo {
  width: 100%;
  height: auto;
  display: block;
}

.fmn-team-info {
  flex: 1;
  padding-top: 5px;
}

.fmn-team-name {
  font-size: 22px;
  font-weight: 600;
  color: #f4b41a;
  margin: 0 0 5px 0;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.fmn-team-role {
  font-size: 14px;
  color: #999999;
  display: block;
  margin-bottom: 20px;
  font-weight: 400;
}

.fmn-team-bio {
  font-size: 15px;
  line-height: 1.6;
  color: #555555;
  margin: 0;
  text-align: left;
}

/* Bloco de Assinatura */
.fmn-team-signature-block {
  margin-top: 25px;
  display: inline-block;
}

.fmn-team-signature-img {
  height: 45px;
  width: auto;
  display: block;
  margin-bottom: 8px;
  mix-blend-mode: multiply;
}

.fmn-team-signature-caption {
  font-size: 11px;
  color: #666666;
  letter-spacing: 0.5px;
  text-align: left;
}

.fmn-team-signature-caption strong {
  color: #000000;
}

/* --- Responsividade Completa e Ajuste à Esquerda no Mobile --- */
@media (max-width: 768px) {
  .fmn-team-header-bg {
    padding: 35px 0;
  }

  .fmn-team-main-title {
    font-size: 26px;
  }

  .fmn-team-card {
    flex-direction: column;
    gap: 25px;
    padding: 40px 0;
  }

  .fmn-team-photo-container {
    flex: none;
    width: 100%;
    max-width: 380px;
  }

  .fmn-team-info {
    text-align: left;
    width: 100%;
  }

  .fmn-team-bio {
    text-align: left;
  }

  .fmn-team-signature-block {
    display: block;
    text-align: left;
  }
}

/* --- FIM Cabeçalho Cinzento Fiel --- */

/* INICIO PROXIMOS EVENTOS INDEX */
.single-promo {
  width: 100%;
  margin: 40px auto;
  padding: 0 12px;
  box-sizing: border-box;
  max-width: 1200px;
}

.single-promo__container {
  display: flex;
  flex-direction: row;
  background-color: #ffffff;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
}

/* Lado da Imagem em Desktop */
.single-promo__image-side {
  flex: 1.3; /* Dá um pouco mais de espaço horizontal para a imagem não sofrer cortes */
  width: 55%;
  display: flex;
}

.single-promo__image-link {
  display: block;
  width: 100%;
}

.single-promo__responsive-picture {
  display: block;
  width: 100%;
  height: 100%;
}

.single-promo__img {
  width: 100%;
  height: 100%;
  /* MUDANÇA: 'cover' ajustado para preenchimento bem centrado, minimizando perdas */
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* Lado do Conteúdo de Texto */
.single-promo__content-side {
  flex: 1;
  width: 45%;
  padding: 40px; /* Reduzido ligeiramente para dar mais espaço para as letras respirarem */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  box-sizing: border-box;
}

.single-promo__title {
  font-family: 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #111111;
  line-height: 1.2;
  margin-bottom: 15px;
  text-transform: uppercase;
  letter-spacing: -0.5px;
}

.single-promo__text {
  font-size: 14px;
  color: #555555;
  line-height: 1.6;
  margin-bottom: 25px;
}

.single-promo__text strong {
  color: #111111;
  font-weight: 700;
}

.single-promo__btn {
  display: inline-block;
  border: 1px solid #f4f4f4; /* CORRIGIDO: Substitua pelo valor da cor que deseja (ex: a mesma do fundo) */
  color: #171a20;
  padding: 11px 41px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  background-color: #f4f4f4;
  transition: all 0.33s ease; /* SIMPLIFICADO: Faz o mesmo efeito com apenas uma linha */
}

.single-promo__btn:hover {
  text-transform: none;
  background-color: #f4f4f4;
  /* CORRIGIDO: Adicionado as vírgulas para o padrão rgb tradicional */
  border-color: #f4f4f4; /* OPCIONAL: Muda a borda no hover para acompanhar o fundo */
}

/* ==========================================================================
   ADAPTAÇÃO RESPONSIVA ANTECIPADA (EVITA O APERTO EM TABLETS E LAPTOPS)
   ========================================================================== */
/* MUDANÇA: Mudámos de 850px para 992px. Agora, ecrãs como o teu de 863px já vão
   ver o layout em modo lista, exibindo a imagem inteira sem cortes na lateral */
@media (max-width: 992px) {
  .single-promo__container {
    flex-direction: column;
  }

  .single-promo__image-side {
    width: 100%;
    flex: none;
    display: block;
  }

  .single-promo__image-link,
  .single-promo__responsive-picture {
    width: 100%;
    height: auto;
  }

  .org-overview-image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .single-promo__content-side {
    width: 100%;
    padding: 30px 20px;
  }

  .single-promo__title {
    font-size: 19px;
  }
}

/* FIM PROXIMOS EVENTOS INDEX */

/* ICICIO ELEMENTOS OPEN AND CLOSE SHOW TEXT  */
.st-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px;
}

/* Título com a linha amarela inferior esquerda */
.st-main-title {
  font-size: 22px;
  font-weight: 600;
  color: #222222;
  margin: 0 0 25px 0;
  position: relative;
  padding-bottom: 8px;
}

.st-main-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 45px;
  height: 3px;
  background-color: #fcae33; /* Amarelo idêntico ao da imagem */
}

/* Texto de introdução */
.st-intro-text {
  font-size: 14px;
  line-height: 1.7;
  color: #444444;
  margin-bottom: 35px;
}

/* Estrutura dos Acordeões */
.st-accordion-group {
  display: flex;
  flex-direction: column;
}

.st-accordion-item {
  margin-bottom: 1px; /* Linha fina divisória entre as abas */
}

.st-accordion-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: none;
  padding: 18px 24px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-align: left;
  cursor: pointer;
  outline: none;
}

/* Cores dos cabeçalhos */
.st-bg-amber {
  background-color: #0078d4;
  color: #ffffff;
}

.st-bg-dark {
  background-color: #252525;
  color: #ffffff;
}

.st-icon {
  font-size: 16px;
  font-weight: 400;
}

/* Conteúdo interno da aba */
.st-accordion-content {
  background-color: #f9f9f9;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.st-accordion-content p {
  padding: 25px 24px;
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: #777777;
}

/* Nova regra atualizada */
.st-accordion-item.st-active .st-accordion-content {
  max-height: 500px; /* Valor maior para garantir que textos longos apareçam inteiros */
  transition: max-height 0.4s ease-in;
}
/* FIM ELEMENTOS OPEN AND CLOSE SHOW TEXT  */

/* INICIO ULTIMAS NOTICIAS INDEX styles  da primeira seccao de noticias_ o cursor virar a mãozinha no card */
.news-card {
  background-color: #ffffff;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  display: block;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  position: relative;
  cursor: pointer;
}

/* Opcional: Efeito visual suave ao passar o mouse */
.news-card:hover {
  opacity: 0.95;
  transform: translateY(-2px);
  transition: all 0.2s ease-in-out;
}
/* FIM ULTIMAS NOTICIAS INDEX styles  da primeira seccao de noticias Faz o cursor virar a mãozinha no card */