/* -----------------------------------------------------
   FONT
----------------------------------------------------- */

@font-face {
  font-family: 'Garabosse-Mignonne';
  src: url('Garabosse/Garabosse-Mignonne.woff2') format('woff2'),
       url('Garabosse/Garabosse-Mignonne.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* -----------------------------------------------------
 BOX-SIZING GLOBAL
----------------------------------------------------- */
/* Incluir box-sizing para todos os elementos para evitar overflow */
*, *::before, *::after {
  box-sizing: border-box;
}

/* -----------------------------------------------------
 BASE
----------------------------------------------------- */
:root {
  --Gap-L: 32px;
  --Gutter: 16px;
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
  /* Sem overflow-y definido */
}

body {
  padding-top: 80px; /* altura da navbar fixa */
  font-family: 'Garabosse-Mignonne', serif;
  background: #FFFFFC; /* cor do fundo body (bege) */
  /* color: #070D23; cor base do texto (main blue) */
  line-height: 1.5;
}

/* Container para a Navbar */
.navbar-container {
  max-width: 1408px;  /* Largura máxima do site */
  margin-left: auto;  /* Centraliza horizontalmente */
  margin-right: auto; /* Centraliza horizontalmente */
  padding-left: 16px; /* Adiciona algum padding nas laterais */
  padding-right: 16px; /* Adiciona algum padding nas laterais */
  display: flex;
  justify-content: space-between; /* Para espaçar logo e menu */
  align-items: center; /* Alinha o conteúdo verticalmente */
  width: 100%;  /* Garante que o contêiner ocupe toda a largura disponível */
}

.navbar {
  position: fixed;  /* Mantém o menu fixo no topo */
  top: 0;
  left: 0;
  width: 100%;  /* Garante que a navbar ocupe toda a largura da tela */
  z-index: 1000;  /* Garante que fique acima de outros conteúdos */
  padding: 20px 40px;
  display: flex;
  justify-content: space-between;  /* Coloca logo e links em cada extremidade */
  align-items: center;
  border-bottom: 2px solid #F6D2CC;  /* Linha inferior */
  background: #FFFFFC;  /* Cor de fundo */
}

/* Logo dentro da navbar */
.logo-site {
  max-height: 53px;  /* Tamanho máximo do logo */
  width: auto;
  height: auto;
}

/* -----------------------------------------------------
 NAVBAR — Fixed
----------------------------------------------------- */
.navbar {
  position: fixed;    /* fixa no topo */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;      /* acima de tudo */
  padding: 20px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #F6D2CC; /* cor da linha (rosa) */
  background: #FFFFFC; /* cor do fundo nav (bege) */
}

.navbar ul {
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.navbar a {
  text-decoration: none;
  color: #070D23; /* cor do texto da navbar */
  text-decoration: none;
  position: relative;
}

.navbar a::after {
  content: '';
  display: block;
  height: 2px;
  background: transparent;
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
}

.navbar a:hover::after {
  background: grey;    /* sublinhado cinzento ao hover */
}

.navbar a:active::after {
  color: #070D23;      /* letra vermelha quando ativo */
  background: #D11E00; /* vermelho ao clicar */
}

.navbar a.active,
.navbar a:focus {
  color: #D11E00;      /* letra vermelha quando ativo */
}

.navbar a.active::after {
  background: #D11E00; /* sublinhado vermelho quando ativo */
}

.logo-site {
  max-height: 53px;  /* ajusta conforme o que precisares */
  width: auto;
  height: auto;
}

/* -----------------------------------------------------
 HERO — Full width
----------------------------------------------------- */
.hero {
  width: 100%;
  padding: 150px 40px;
  background-image: url('images/hero_background.jpg'); /* imagem de fundo */
  background-size: cover;
  background-position: center;
  text-align: center;
  overflow-x: hidden; /* evita overflow por imagens ou padding */
}

.hero h1 {
  margin: 0;
  font-size: 3.6rem;
}

.hero h2 {
  margin-top: 10px;
  font-size: 1.35rem;
  font-weight: 300;
}

.hero {
  width: 100%;
  padding: 150px 0;
  background-image: url('images/hero_background.jpg');
  background-size: cover;
  background-position: center;
}

.hero-inner {
  max-width: 1408px;
  margin: 0 auto;
  /*padding: 0 40px;*/
  text-align: center;
}

/* -----------------------------------------------------
 TWO COLUMN SECTIONS — Full width, 50/50
----------------------------------------------------- */
.two-col-section {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr; /* exatamente 50% / 50% */
  column-gap: var(--Gutter);
  row-gap: var(--Gap-L);
  padding: 110px 40px;
  column-gap: 40px;
  row-gap: 32px;
  border-bottom: 2px solid #F6D2CC; /* cor da linha (rosa) */
  align-items: start;
}

.col-title {
  font-size: 46px;
  line-height: 1.2;
  margin: 0;                          /* encostado à esquerda */
  padding-top: 6px;  
}

.col-content {
  font-size: 1rem;
}

.col-content h5 {
  margin-top: 24px;
  margin-bottom: 6px;
  /*font-size: 1.25rem;*/
}

.col-content a {
  color: #222;
  text-decoration: none;
}

.extra-text {
  display: none; /* esconde inicialmente */
}

.read-more {
  cursor: pointer;
  color: #070D23;         /* preto default */
  text-decoration: none;
  position: relative;
}

.read-more::after {
  content: '';
  display: block;
  height: 2px;
  background: transparent;
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
}

.read-more:hover::after {
  background: #D11E00;       /* sublinhado vermelho ao hover */
}

.read-more:active::after{
  color: #D11E00;         /* texto vermelho quando expandido */
  background: #D11E00;       /* sublinhado vermelho ao hover */
}


.read-more.expanded {
  color: #D11E00;
}

.read-more.expanded::after {
  background: #D11E00; /* sublinhado vermelho quando expandido */
}

/* -----------------------------------------------------
   AXIS CARD
----------------------------------------------------- */
.toggle-more {
  background: #FFFFFC;
  color: #070D23;
  border: none;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  margin-top: 10px;
}

.toggle-more:hover {
  background: #FFFFFC;
}

.circle1 {
  left: 100px;     /* para a direita da pág */
  z-index: 0;   /* abaixo da navbar e do texto (jc) */
  max-height: 850px; /* para manter o tamanho */
  left: 0;        /* encosta à esquerda */
  margin-top: 250px;  /* afastar do topo da secção (jc) */
  position: absolute;
}

/* -----------------------------------------------------
   FOOTER
----------------------------------------------------- */
.footer {
  border-bottom: 2px solid #F6D2CC;
  background: #FFFFFC;
}

.footer-main-logo {
  width: 160px;
  height: auto;
  margin-bottom: 32px;
}

/* Coluna direita */
.footer-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Para assegurar alinhamento vertical consistente */
.align-col {
  width: 520px; /* ajusta conforme o mockup / grid desejada */
}

/* Títulos do footer */
.footer-right h3 {
  margin-top: 32px;
}

/* Logos dos organizadores */
.footer-organizers {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  align-items: center;
}

.footer-organizers img {
  height: 70px;
  transition: transform 0.3s;
}

.footer-organizers img:hover {
  transform: scale(1.1);
}

/* FOOTER FIX — reduzir espaçamento interno */
.footer * {
  line-height: 1.4 !important; /* normaliza tudo */
}

/* Reduzir margens exageradas apenas no footer */
.footer h3,
.footer h4,
.footer h5,
.footer p,
.footer .small-text {
  margin: 8px 0 !important;
}

/* Ajustar containers internos */
.footer-right {
  gap: 8px; /* era 16px */
}

.footer-logo {
  max-height: 53px; /* ajusta conforme o que precisares */
  width: auto;
  height: auto;
}

.logo-wrapper {
  display: flex;
  gap: 0; /* espaço entre as imagens */
}

.footer-circle {
  z-index: 1000; /* para garantir que fique acima de outros conteúdos */
  max-height: 450px; /* para manter o tamanho */
  width: auto;
  height: auto;
}

/* Esconde as imagens no mobile */
@media (max-width: 700px) {
  .hide-mobile {
    display: none !important;
  }
}



@media (max-width: 700px) {
  .footer-right h3 {
    font-size: 24px; /* igual ao h3 do site no mobile */
    line-height: 36px;
  }

  .footer-right h4 {
    font-size: 20px; /* igual ao h4 do site no mobile */
    line-height: 32px;
  }

  .footer-right h5 {
    font-size: 16px; /* ou 1rem */
    line-height: 24px;
  }
}

@media (max-width: 700px) {
  .align-col {
    width: 100%;      /* ocupa 100% da largura disponível */
    max-width: 100%;  /* não ultrapassa a tela */
  }

  .footer-right {
    flex: 1 1 100%;   /* ocupa toda a largura */
  }

  .footer-left {
    flex: 1 1 100%;   /* ocupa toda a largura */
  }

  .footer {
    flex-direction: column; /* empilha as colunas no mobile */
    padding: 24px 16px;    /* evita corte nas bordas */
  }
}


/* -----------------------------------------------------
 HEADINGS — H1 a H5
----------------------------------------------------- */
h1 {
  color: var(--Main-Blue, #070D23);
  font-family: 'Garabosse-Mignonne', serif;
  font-size: var(--Type-Headers-H1, 100px);
  font-style: normal;
  font-weight: 400;
  line-height: 128px;
  margin: 0 0 24px 0;
}

h2 {
  color: var(--Main-Blue, #070D23);
  font-family: 'Garabosse-Mignonne', serif;
  font-size: var(--Type-Headers-H2, 60px);
  font-style: normal;
  font-weight: 400;
  line-height: 80px;
  margin: 0 0 20px 0;
}

#about h2 span.cor-secundaria {
  color: #6A6E7B;
}

h3 {
  color: var(--Main-Blue, #070D23);
  font-family: 'Garabosse-Mignonne', serif;
  font-size: var(--Type-Headers-H3, 40px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--Type-Text-Leading-H3, 54px);
  margin: 24px 0 12px 0;
}

h3 .cor-secundaria {
  color: #6A6E7B;
}

h4 {
  color: var(--50-blue, #6A6E7B);
  font-family: 'Garabosse-Mignonne', serif;
  font-size: var(--Type-Headers-H4, 20px);
  font-style: normal;
  font-weight: 300;
  line-height: 32px; /* 160% */
  margin: 16px 0 8px 0;
}

/* para o instagram */
h4 a {
  color: inherit;          /* usa a mesma cor do h4 */
  text-decoration: none;   /* remove sublinhado */
}

h4 a:hover {
  text-decoration: underline; /* opcional */
}

h4 .cor-secundaria {
  color: #E37866;
  text-decoration: underline;
  text-decoration-color: #E37866;
}

.cor-terciaria {
  color: #070D23; 
}

.cor-main-red {
  color: #c43c20; /* cor vermelha igual à da imagem */
}


h5 {
  /*color: var(--50-blue, #D11E00);*/
  color: #6a6e7b;
  font-family: 'Garabosse-Mignonne', serif;
  /*font-size: var(--Type-Headers-H5, 10px);*/
  font-size: 10px;
  font-style: normal;
  font-weight: 400;
  /*line-height: var(--Type-Text-Leading-H5, 54px);*/
  margin: 16px 0 8px 0;
}


/* para o garabosse */
h5 a {
  color: inherit;          /* usa a mesma cor do h5 */
}

.small-text {
  color: #6e7b6a;
  font-family: 'Garabosse-Mignonne', serif;
  font-size: 15px;
  line-height: 24px;
  margin: 16px 0 8px 0;
}

.cor-secundaria a {
  color: inherit;          /* herda a cor definida no span */
  text-decoration: underline;  /* ou o estilo que preferires */
}
.cor-terciaria a {
  color: inherit;          /* herda a cor definida no span */
}



.cor-cinza-50 {
  color: rgba(204, 204, 204, 0.5);
}



h4 .cor-secundaria.sem-sublinhado {
  text-decoration: none;
}

/* MOBILE */
@media (max-width: 712px) {
  h1 {
      font-size: 64px;
      line-height: 128px;
  }

  h2 {
      font-size: 36px;
      line-height: 80px;
  }

  h3 {
      font-size: 24px;
      line-height: 36px;
  }

  h4 {
      font-size: 20px;
      line-height: 32px;
  }

  h5 {
      font-size: 10px;
      line-height: 16px;
  }

  h6 {
    font-size: 20px;
    line-height: 32px;
}
}

/* -----------------------------------------------------
 CORES (Classes)
----------------------------------------------------- */

.cor-main-red {
  color:#D11E00;
}

/* -----------------------------------------------------
 IMAGENS
----------------------------------------------------- */
img {
  max-width: 100%;
  height: auto;
  display: block;
}


/* ===============================
   Botons
   =============================== */
   .botao-abstract {
    display: inline-flex;
    width: 332px;
    padding: 6px 16px;
    justify-content: center;
    align-items: center;
    gap: 8px;

    border-radius: 8px;
    border: 2px solid #D11E00;

    background-color: #D11E00;
    font-family: 'Garabosse-Mignonne', serif;
    font-size: 20px;
    font-weight: normal;
    text-decoration: none;
    cursor: pointer;
    line-height: 1.2;
    text-align: center;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Estados de link */
a.botao-abstract:link,
a.botao-abstract:visited {
    color: #ffffff;             /* texto branco inicial */
}

a.botao-abstract:hover,
a.botao-abstract:focus,
a.botao-abstract:active {
    background-color: #f5ede7;  /* fundo bege no hover/focus */
    color: #D11E00;             /* texto vermelho */
    border-color: #D11E00;
}

/* Estado ativo específico para clique */
a.botao-abstract:active {
    background-color: #ebccc6;  /* vermelho claro ao clicar */
}



   

/* ===============================
   Registration Tables
   =============================== */

   .registration-table-container {
    width: 100%;
    overflow-x: auto; /* scroll horizontal em telas pequenas */
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  
  .registration-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
  }
  
  .registration-table thead th {
    border-bottom: 2px solid #F6D2CC; /* linha do cabeçalho */
    padding: 0.75rem 0rem;
  }
  
  .registration-table tbody td {
    border-bottom: 2px solid #F6D2CC; /* linhas horizontais cinza da imagem */
    padding: 0.75rem 0rem;
  }
  
  /* Conteúdo em h4 sem negrito */
  .registration-table h4 {
    color: #070D23;
    margin: 0;
    font-weight: normal;
    /*font-size: 1rem;  ajusta conforme necessário */
  }
  
  /* Remove linha do último elemento */
  .registration-table tbody tr:last-child td {
    border-bottom: none;
  }
  
  /* Responsivo */
  @media screen and (max-width: 600px) {
    .registration-table th,
    .registration-table td {
      padding: 0.5rem;
      font-size: 0.9rem;
    }
  }

  /* Author and Audiende Register em vermelho */

  .registration-table th.table-title {
    color: #D11E00;     
    font-size: 1.25em;   
    text-align: left;    
}




  /* frase 4 de maio ao centro */
  .note {
    text-align: center;
    font-family: "Georgia", serif; /* mantém a mesma fonte que o resto */
    font-size: 20px;               /* ajusta conforme desejado */
    margin: 16px 0;                /* espaçamento acima e abaixo */
}


/* --------------------------
 RESPONSIVE
----------------------------*/
@media (max-width: 700px) {
  .registration-table thead th,
  .registration-table tbody td {
      font-size: 14px;
      padding: 8px;
  }

  h4 {
      font-size: 18px;
      line-height: 28px;
  }

  .registration-table-container {
      margin-bottom: 32px;
  }
}


/* -----------------------------------------------------
 RESPONSIVE
----------------------------------------------------- */
@media (max-width: 700px) {

  body {
      padding-top: 70px; /* ajusta para navbar menor */
  }

  .navbar {
      padding: 15px 20px;
  }

  .two-col-section {
      grid-template-columns: 1fr; /* só uma coluna no mobile */
      padding: 70px 20px;
  }

  .col-title {
      font-size: 1.4rem;
  }
}

.committee-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.committee-col h4 {
  margin: 8px 0;
  line-height: 1.2;   /* spacing correto e compacto */
}

/* -------------------------------
   HAMBURGER BUTTON + SLIDE MENU
---------------------------------*/
/* BOTÃO HAMBÚRGUER - hidden on desktop */
.menu-toggle {
  width: 30px;
  height: 22px;
  display: none;  /* só aparece no mobile */
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  z-index: 1001; /* acima do menu */
}

.menu-toggle span {
  display: block;
  height: 3px;
  background: #070D23;  /* cor normal do hambúrguer */
  border-radius: 2px;
  transition: 0.3s;
}

/* MENU MOBILE - hidden por padrão */
.navbar nav ul {
  display: flex;
  flex-direction: row;
  list-style: none;
  margin: 0;
  padding: 16px;
  transition: none;
}

@media (max-width: 712px) {

  /* mostra o hambúrguer */
  .menu-toggle {
      display: flex;
  }

  /* MENU LATERAL DIREITO */
  .navbar nav ul {
      position: fixed;
      top: 0;
      right: -200px;          /* escondido fora da tela */
      height: 100vh;
      width: max-content;           /* largura do menu */
      background: #FFFFFC;
      flex-direction: column;
      gap: 16px;
      padding: 80px 20px 20px 20px; /* espaço para navbar */
      border-left: 2px solid #F6D2CC;
      transition: right 0.3s ease;
      z-index: 1000;
      align-items: flex-end;
     text-align: right;
    }

  /* quando ativo → desliza para dentro */
  .navbar nav ul.active {
      right: 0;
  }

    /* hamburguer à direita */
  .navbar .menu-toggle {
    margin-left: auto; /* empurra para a direita */
}

  /* animação do X com linhas vermelhas */
  .menu-toggle.active span:nth-child(1) {
      transform: translateY(9px) rotate(45deg);
      background: #D11E00;
  }

  .menu-toggle.active span:nth-child(2) {
      opacity: 0;
  }

  .menu-toggle.active span:nth-child(3) {
      transform: translateY(-9px) rotate(-45deg);
      background: #D11E00;
  }
}

/* -------------------------------
   FADE ANIMATION
---------------------------------*/
.hidden {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.visible {
  opacity: 1;
  transform: translateY(0px);
}


/* -------------------------------
   LARGURA MÁXIMA DA PÁGINA 
---------------------------------*/
.two-col-section,
.footer {
  max-width: 1408px; /* ou 1408px, conforme o que desejares */
  margin-left: auto;
  margin-right: auto;
  padding-left:16px;
  padding-right: 16px;
}
.two-col-section,
.footer {
  max-width: 1408px;
  margin-left: auto;
  margin-right: auto;
  padding-left:16px;
  padding-right: 16px;
}

/* HERO FULL WIDTH */
.hero {
  width: 100vw;
  max-width: 100vw !important;
  margin: 0;
  padding: 150px 40px;
  background-size: cover;
  background-position: center;
}

body, html {
  width: 100%;
}


.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  z-index: 900; /* abaixo do menu mas acima do conteúdo */
}

.menu-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* -------------------------------
   ESCONDER AS IMAGENS NO MOBILE 
---------------------------------*/
@media (max-width: 700px) {
  .hide-mobile {
    display: none !important;
  }
}