:root{
  /* layout */
  --border-radius-var: 15px;

  /* timings */
  --t-smooth: 0.5s ease;

  /* blur */
  --blur-strong: 12px;
  --blur-soft: 6px;

  /* rgb tokens */
  --rgb-ink: 59, 39, 26;         /* #3b271a */
  --rgb-white: 255, 255, 255;
  --rgb-black: 0, 0, 0;
  --rgb-glass: 220, 220, 220;

  /* brand colors */
  --c-ink: #3b271a;
  --c-white: #ffffff;
  --c-brand-red: #f62e33;
  --c-brand-orange: #fb761f;
  --c-brand-yellow: #ffc81b;

  /* common alphas */
  --a-white-30: rgba(var(--rgb-white), 0.3);
  --a-white-50: rgba(var(--rgb-white), 0.5);
  --a-white-100: rgba(var(--rgb-white), 1);
  --a-black-20: rgba(var(--rgb-black), 0.2);
  --a-black-50: rgba(var(--rgb-black), 0.5);
  --a-ink-30: rgba(var(--rgb-ink), 0.3);
  --a-ink-50: rgba(var(--rgb-ink), 0.5);

  /* shadows */
  --shadow-soft: 0 0 30px var(--a-black-20);
  --shadow-strong: 0 0 30px var(--a-black-50);

  /* glass gradients */
  --g-glass: radial-gradient(circle at 33% 0%, rgba(var(--rgb-glass), 0.5), transparent, rgba(var(--rgb-glass), 0.2));
  --g-glass-simple: radial-gradient(circle at 33% 0%, rgba(var(--rgb-glass), 0.5), transparent);

  /* hover glows */
  --g-glow-orange: radial-gradient(circle at 33% 0%, rgba(251, 118, 31, 0.5), transparent);
  --g-glow-red-30: radial-gradient(circle at 33% 0%, rgba(246, 46, 51, 0.3), transparent);

  /* brand linears */
  --g-brand-linear: linear-gradient(to right, var(--c-brand-red), var(--c-brand-orange));
  --g-stroke-linear: linear-gradient(to right, var(--c-brand-yellow), var(--c-brand-orange));

  /* speakers locals */
  --orad-gap: 1.5rem;
  --orad-overlay-pad: 1rem;
  --glass-collapsed: 140px;
  --glass-expanded: 1000px;
  --m-card-w: 280px;
}

/* =============================
   SPEAKERS (PC + MOBILE)
   - Template "Tests 2" / Speakers grid + mobile carousel card
   ============================= */

/* Glass local (reutilizável) */
.orad-glass{
  background: var(--g-glass);
  backdrop-filter: blur(var(--blur-strong));
  -webkit-backdrop-filter: blur(var(--blur-strong));
  border-radius: var(--border-radius-var);
  border: 1px solid var(--a-white-30);
  box-shadow: var(--shadow-soft);
  transition: var(--t-smooth);
}

/* =========================
   PC grid (4 por fila)
   ========================= */
.speakers-row{
  display:flex;
  gap: var(--orad-gap);
  margin-bottom: var(--orad-gap);
  width: 100%;
  overflow: visible;
  transition: var(--t-smooth);
}

/* filas com 1–2 cards -> centradas e sem esticar */
.speakers-row.is-short{
  justify-content: center;
}

.expandable-col-orad{
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius-var);
  border: 1px solid var(--a-white-100);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(var(--blur-strong));

  background-size: cover;
  background-position: center;

  min-height: 350px;
  max-height: 350px;

  flex: 1 1 0;
  min-width: 0;

  transition: var(--t-smooth);
  will-change: flex;
}

/* ✅ 1–2 cards: largura base = 1/4, nunca ocupam a linha toda */
.speakers-row.is-short > .expandable-col-orad{
  flex: 0 0 calc((100% - (var(--orad-gap) * 3)) / 4);
}

/* placeholders não devem interagir */
.speaker-placeholder-orad{
  flex: 1 1 0;
  min-width: 0;
  opacity: 0;
  pointer-events: none;
}

/* Overlay base */
.speaker-overlay-orad{
  position: absolute;
  inset: 0;
  padding: var(--orad-overlay-pad);

  /* gradiente "normal" */
  background: linear-gradient(0deg, var(--c-ink), transparent 50%);

  display:flex;
  align-items:flex-end;
  overflow:hidden;
  transition: var(--t-smooth);
}

/* gradiente "hover" em layer por cima (animável via opacity) */
.speaker-overlay-orad::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  /* gradiente "mais longo" no hover */
  background: linear-gradient(0deg, var(--c-ink), transparent);

  opacity: 0;
  transition: opacity var(--t-smooth);
}

/* garante que o conteúdo fica acima do ::after */
.speaker-overlay-orad > *{
  position: relative;
  z-index: 1;
}

/* Hover: ativa o fade do gradiente */
.expandable-col-orad:hover .speaker-overlay-orad::after{
  opacity: 1;
}

.speaker-glass-orad{
  width:100%;
  color:#fff;
  padding: 1rem 1.5rem;
  overflow:hidden;
  max-height: var(--glass-collapsed);
  transition: var(--t-smooth);
  will-change: max-height;
}

.speaker-fixedline-orad,
.speaker-descwrap-orad{
  box-sizing:border-box;
  width:auto;          /* JS define px */
  max-width:none;
  min-width:0;
  overflow:hidden;
  transition: var(--t-smooth);
}

.speaker-name-orad{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:1.05;
  margin:0;
  transition: var(--t-smooth);
}

.speaker-role-orad{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  white-space:normal;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-top:0.25rem;
  opacity:0.9;
  line-height:1.15;
  overflow-wrap:anywhere;
  word-break:break-word;
  transition: var(--t-smooth);
}

/* descrição: só no hover (mantém animação) */
.speaker-descwrap-orad{
  max-height:0;
  opacity:0;
  overflow:hidden;
  transition: var(--t-smooth);
}
.speaker-descwrap-orad p{ margin:0; }

.speaker-desc-orad{
  display:block;
  margin-top:0.6rem;
  opacity:0;
  transform:translateY(10px);
  max-height:0;
  overflow:hidden;
  overflow-wrap:anywhere;
  word-break:break-word;
  transition: var(--t-smooth);
}

/* =========================
   PC hover: nunca passa de 2 colunas
   ========================= */
@media (min-width: 992px){
  /* por defeito mantém base */
  .speakers-row:hover .expandable-col-orad{ flex: 1 1 0; }
  /* ativo máx ~ 2 colunas (50%) */
  .speakers-row:hover .expandable-col-orad:hover{ flex: 3 1 0; z-index:2; }

  /* fila curta (1–2): base 1/4; hover máx 2/4 */
  .speakers-row.is-short:hover .expandable-col-orad{
    flex: 0 0 calc((100% - (var(--orad-gap) * 3)) / 4);
  }
  .speakers-row.is-short:hover .expandable-col-orad:hover{
    flex: 0 0 calc(((100% - (var(--orad-gap) * 3)) / 4) * 2 + var(--orad-gap));
    z-index: 2;
  }

  .speakers-row:hover .expandable-col-orad:hover .speaker-glass-orad{
    max-height: var(--glass-expanded);
  }

  .speakers-row:hover .expandable-col-orad:hover .speaker-descwrap-orad{
    max-height: 260px;
    opacity: 1;
  }

  .speakers-row:hover .expandable-col-orad:hover .speaker-desc-orad{
    opacity: 1;
    transform: translateY(0);
    max-height: 200px;
  }
}

/* =========================
   MOBILE (carousel) – cards com imagem + body por baixo
   - textos herdam a cor do body global (não definir color aqui)
   ========================= */
@media (max-width: 991.98px){
  .speakers-row{ display:none; }

  .m-card-orad{
    flex: 0 0 auto;
    width: var(--m-card-w);
    margin: 0 15px;
    overflow: hidden;
    border-radius: var(--border-radius-var);
    border: 1px solid var(--a-white-30);
    box-shadow: var(--shadow-soft);
    transition: var(--t-smooth);
  }

  .m-img-orad{
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--border-radius-var);
    width: 100%;
    height: auto;
    display:block;
  }

  .m-body-orad{
    padding: 1rem 1.25rem;
    transition: var(--t-smooth);
  }

  .m-name-orad{
    margin: 0;
    font-family: 'UniviaProBold', sans-serif;
    line-height: 1.1;
  }

  .m-role-orad{
    display:block;
    margin-top: 0.25rem;
    opacity: 0.85;
    line-height: 1.2;
  }

  .m-desc-orad{
    margin-top: 0.5rem;
  }
  .m-desc-orad p{ margin:0; }
}


/* =====================================================
   BASE + RESTO DO SITE
   ===================================================== */

html {
  scroll-behavior: smooth;
}

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
    font-family: 'UniviaPro', sans-serif;
    margin: 0;
    overflow-x: hidden;
    color: var(--c-ink);
}

#background-video-div {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -10;
}

#background-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.titles-bold {
    font-family: 'UniviaProBold', sans-serif;
    text-transform: uppercase;
}

.titles-bold-2 {
    font-family: 'UniviaProBold', sans-serif;
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    color: inherit;
    text-decoration: none;
}

.zoom{
    transition: var(--t-smooth);
}

.zoom:hover {
    transform: scale(1.05);
}


/* =====================
   NAVBAR & LINKS
===================== */

#navbar {
  transition: top 0.5s;
}

.navbar-blur {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(var(--blur-strong));
  -webkit-backdrop-filter: blur(var(--blur-strong));
  background: var(--g-glass);
  border-radius: 0 0 1rem 1rem; /* arredonda só a parte inferior se quiser */
  z-index: -1;

  /* Feather nas bordas inferiores */
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 66%, rgba(0,0,0,0) 100%);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: bottom;
  -webkit-mask-size: cover;

  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 66%, rgba(0,0,0,0) 100%);
  mask-repeat: no-repeat;
  mask-position: bottom;
  mask-size: cover;
}

.nav-item {
  position: relative;
  /* overflow: hidden; <-- REMOVIDO para não cortar palavras */
  border-radius: var(--border-radius-var);
  padding: 0;
  transform-origin: center;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(var(--blur-strong));
  -webkit-backdrop-filter: blur(var(--blur-strong));
  border: 1px solid var(--c-white);
}

/* Gradiente normal do item */
.nav-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--g-glass);
  z-index: -1;
  transition: opacity 0.5s ease;
  border-radius: inherit; /* herda border-radius do .nav-item */
}

/* Gradiente hover do item */
.nav-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--g-glow-orange);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.5s ease;
  border-radius: inherit; /* herda border-radius do .nav-item */
}

/* Hover no item */
.nav-item:hover {
  transform: scale(1.05);
}

.nav-item:hover::after {
  opacity: 1;
}

.offcanvas-backdrop {
  background-color: unset;
}

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

.nav-link {
  color: var(--c-ink);
  font-family: 'UniviaProBold', sans-serif;
  text-transform: uppercase;
  margin: 0;
  padding: 0.5rem 1.5rem !important; /* padding lateral e vertical funcional */

  display: -webkit-box;          /* necessário para line-clamp */
  -webkit-box-orient: vertical;  /* orientação vertical */
  -webkit-line-clamp: 2;         /* máximo 2 linhas */
  overflow: hidden;              /* esconde o excesso vertical */

  word-break: normal;            /* não quebra palavras no meio */
  white-space: normal;           /* quebra apenas em espaços */
  word-wrap: break-word;         /* garante que palavras muito longas quebrem se necessário */

  width: auto;                   /* largura baseada no conteúdo + padding */
  max-width: 20rem;              /* ajusta conforme necessário para a navbar */

  position: relative;
  border-radius: inherit;        /* garante cantos arredondados para gradientes */
  transition: transform 0.3s ease;
  text-align: center;            /* centraliza o texto */
}

/* Gradientes do link */
.nav-link::before,
.nav-link::after {
  border-radius: inherit;        /* mantém os cantos arredondados */
}


/* Gradientes específicos do link, se quiser aplicar igual ao hover */
.nav-link::before,
.nav-link::after {
  border-radius: inherit; /* garante cantos arredondados */
}

.navbar-toggler {
  color: var(--c-ink);
  background: var(--g-glass);
  backdrop-filter: blur(var(--blur-strong));
  -webkit-backdrop-filter: blur(var(--blur-strong));
  border: 1px solid var(--a-white-30);
  border-radius: var(--border-radius-var);
  box-shadow: var(--shadow-soft);

  /* 🔑 altura e largura iguais */
  padding: 0;               /* remove padding interno que quebra o ratio */
  width: 3.5rem;            /* largura fixa */
  height: 3.5rem;           /* altura igual à largura → ratio 1:1 */
  display: flex;
  align-items: center;
  justify-content: center;

  transition: var(--t-smooth);
}

.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler:focus-visible {
  outline: none !important;
  box-shadow: 0 0 30px rgba(0,0,0,.2) !important;
}

/* ===== FIM */


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

.footer-main {
  position: relative;
  width: 100%;
  padding-top: 3rem;
  z-index: 12;
}

.footer-back {
  background-image: url(../img/squares/pattern-canas_2x1.png);
  background-size: cover;
  background-position: center;
  border-radius: var(--border-radius-var) var(--border-radius-var) 0 0;
  color: var(--c-white)
}

/* ===== FIM */


.h-full{
    height: 100vh;
}

.center-mid-y {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.center-mid-x {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.center-mid-xy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.gradient-line {
    height: 6px;
    border-radius: 3px;
    background: var(--g-brand-linear);
    width: 33%;
}

.div-over {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.object-fit-cover {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.logo-main{
    max-width: 100%;
    max-height: 25vh;
}

.paralax-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 8;
    will-change: transform;
}

.parallax-overlay img {
    position: absolute;
    top: 50%;
    left: 0;
    width: 50%;
    border-radius: var(--border-radius-var);
}

#pm_2x1, #pc_2x1, #pp_2x1{
    width: 50%;
}

#pm_1x1, #pc_1x1, #pp_1x1, #pm_1x2, #pc_1x2, #pp_1x2{
    width: 25%;
}

/* ============================= */
/* BOTÃO ANIMADO: ESCALA + FUNDO */
/* ============================= */

/* ESCALA (zoom in/out) */
.blink-animation {
  animation: blink-scale 2s ease infinite;
  transform-origin: center;
}

@keyframes blink-scale {
  0% { transform: scale(1); }
  33% { transform: scale(1.1); }
  50% { transform: scale(1); }
  66% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* FUNDO PISCANTE */
.blink-bg {
  position: relative;
}

.blink-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--g-glow-orange);
  opacity: 0;
  z-index: -1;
  animation: blink-bg 2s ease infinite;
  transition: var(--t-smooth); /* suaviza mudanças */
}

@keyframes blink-bg {
  0% { opacity: 0; }
  33% { opacity: 1; }
  50% { opacity: 0; }
  66% { opacity: 1; }
  100% { opacity: 0; }
}

/* ============================= */
/* BOTÃO PRINCIPAL */
/* ============================= */
.button-link {
  position: relative;
  min-height: 50px;
  width: fit-content;
  border-radius: var(--border-radius-var);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(var(--blur-strong));
  border: 1px solid var(--c-white);
  overflow: hidden;
  transition: var(--t-smooth); /* suaviza escala */
}

/* Gradiente base */
.button-link::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--g-glass-simple);
  transition: var(--t-smooth);
  z-index: -1;
}

/* Gradiente hover */
.button-link::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--g-glow-red-30);
  opacity: 0;
  z-index: -1;
  transition: var(--t-smooth);
}

/* HOVER: reset da animação de escala e fundo final */
.button-link:hover {
  animation: none;           /* remove animação de escala */
  transform: scale(1);       /* reseta a escala ao início */
}

.button-link:hover::after {
  animation: none; /* remove animação do fundo */
  opacity: 1;      /* mostra fundo final */
  background: var(--g-glow-orange);
}

/* Conteúdo interno */
.button-link h5 {
  font-family: 'UniviaProBold', sans-serif;
}

/* ===== FIM */


#menu-index .nav-item {
  margin: 0;
  font-size: 1.25rem;
  width: 100%;
  padding: 1.5rem;
}

#menu-index .nav-item::before {
  background: var(--g-glass);
}

/* ===== FIM */

/* Quando o mouse passa pelo botão/container, expande */
.d-inline-block:hover .expandable-wrapper {
  max-height: 1000px; /* altura suficiente para todo o conteúdo */
}

/* Conteúdo interno */
.expandable-content {
  padding: 1rem;
}

/* ===== FIM */

.stroke-gradient {
  position: relative;
  border-radius: 16px; /* opcional */
}

.stroke-gradient::before {
  content: "";
  position: absolute;
  inset: 0; /* top, right, bottom, left = 0 */
  padding: 3px; /* espessura do stroke */
  border-radius: var(--border-radius-var);

  background: linear-gradient(
    to right,
    var(--c-brand-yellow),   /* laranja em baixo */
    var(--c-brand-orange)    /* transparente em cima */
  );

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;

  pointer-events: none;
}


/* ============================= */
/* CARDS CRONOGRAMAS DIARIOS */
/* ============================= */

.program-wrapper {
  overflow: visible;          /* esconde scroll */
}

.program-wrapper small {
  opacity: 0.66;
}

.program-wrapper p small {
  display: inline-block;
  min-width: 45px; /* ajusta conforme necessário */
  text-align: left; /* alinha os dois-pontos à direita */
  margin-right: 0.25rem; /* espaço entre a hora e a descrição */
}

.program-wrapper p {
  line-height: 1.5; /* deixa mais legível */
}

/* ============================= */
/* TABELA PROGRAMA – FINAL */
/* ============================= */
.table-program-pre {
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--a-white-30);
  border-radius: var(--border-radius-var);
  overflow: hidden;
}

.table-program {
  table-layout: fixed;
  width: 100%;
  backdrop-filter: blur(var(--blur-strong));
  -webkit-backdrop-filter: blur(var(--blur-strong));
  margin: 0;
}

/* Células gerais */
.table-program th,
.table-program td {
  width: 25%;
  text-align: center;
  vertical-align: middle;
  border: 1px solid var(--c-white);
  background: var(--g-glass);
  padding: 0.75rem 1.5rem;
  height: 70px;
}

/* Cabeçalho (datas) */
.table-program thead th {
  background: var(--c-ink);
  color: var(--c-white);
}


/* ============================= */
/* Carousel de audiencia
/* ============================= */
/* Wrapper */
.audience-carousel-wrapper {
  position: relative;
  width: 100%;
}

/* Linha de cards */
.audience-carousel {
  display: flex;
  gap: 0;
  transition: var(--t-smooth);
}

/* Card */
.audience-card {
  min-width: 320px;
  max-width: 320px;
  margin: 0 15px;
  padding: 1.5rem;
  border-radius: var(--border-radius-var);
  background: var(--g-glass);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(var(--blur-strong));
  -webkit-backdrop-filter: blur(var(--blur-strong));
  border: 1px solid var(--c-white);
  transition: var(--t-smooth);
}

.audience-card h4 {
  font-weight: bold;
  margin-bottom: 1.5rem;
  font-family: 'UniviaProBold', sans-serif;
  min-height: 58px;
  width: 80%;
}

.audience-card p {
  margin: 0.25rem 0;
}

/* Hover */
.audience-card:hover {
  transform: translateY(-6px) scale(1.05);
}

.audience-card-main {
  width: 100%;
  color: var(--c-white);
  padding: 1.5rem 2.5rem;
  border-radius: var(--border-radius-var);
  background: url(../img/squares/pattern-mexilhao2_2x1.png);
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(var(--blur-strong));
  -webkit-backdrop-filter: blur(var(--blur-strong));
  border: 1px solid var(--c-white);
  transition: var(--t-smooth); 
  overflow: hidden;          /* necessário para scroll */
  white-space: nowrap;       /* coloca os <p> lado a lado */
}

.audience-card-main p {
  display: inline-block;     /* lado a lado */
  margin: 0 2rem;            /* espaçamento entre os textos */
  font-weight: bold;
  font-family: 'UniviaProBold', sans-serif;
  font-size: 1.2rem;
  white-space: nowrap;
}


/* ============================= */
/* Carousel de Patrocínios – Glass + Coverflow */
/* ============================= */

/* Wrapper do carousel */
.sponsor-gallery-wrapper {
  overflow-x: visible;
  overflow-y: visible;
  width: 100%;
  position: relative;
}

/* Galeria */
.sponsor-gallery {
  display: flex;
  gap: 0px;
  transition: transform 0.5s ease;
  will-change: transform; /* performance suave */
}

/* Card */
.sponsor-card {
  min-width: 280px;
  max-width: 280px;
  height: 440px;
  margin: 0 15px;
  border-radius: var(--border-radius-var);
  opacity: 0.35;
  transform: scale(0.9) translateY(20px);
  transition: var(--t-smooth);
  flex-shrink: 0; /* evita encolher */
  backdrop-filter: blur(var(--blur-strong));
  -webkit-backdrop-filter: blur(var(--blur-strong));
  border: 1px solid var(--c-white);
  box-shadow: var(--shadow-soft);
  background: radial-gradient(circle at 33% 0%, rgba(2=20, 220, 220, 0.5), transparent, rgba(220, 220, 220, 0.2));
  transition: var(--t-smooth);

  /* === Forçar texto nítido === */
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Hover nos cards */
.sponsor-card:hover {
  transform: scale(1.05) translateY(0); /* aumenta suavemente */
  box-shadow: var(--shadow-strong);
  z-index: 4; /* garante que fique por cima */
}

/* Para cards ativos, mantém o destaque + hover */
.sponsor-card.is-active:hover {
  transform: scale(1.05) translateY(0);
  z-index: 3;
}

/* Card ativo */
.sponsor-card.is-active {
  opacity: 1;
  transform: scale(1) translateY(0);
  z-index: 2;
}

/* Topo do card */
.sponsor-top {
  padding: 1.5rem;
  border-radius: var(--border-radius-var);
  height: 130px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow-soft);
  background: radial-gradient(circle at 33% 0%, transparent, var(--a-white-50));
  transition: var(--t-smooth);
}

.sponsor-top:hover {
  box-shadow: var(--shadow-strong);
  background: radial-gradient(circle at 33% 0%, transparent, var(--a-white-100));
}

.gold-card {
  background: radial-gradient(circle at 33% 0%, rgba(255, 164, 27, 0.8), transparent, rgba(255, 164, 27, 0.5))!important;
}

.silver-card {
  background: radial-gradient(circle at 33% 0%, rgba(120, 120, 120, 0.8), transparent, rgba(120, 120, 120, 0.5))!important;
}

.bronze-card {
  background: radial-gradient(circle at 33% 0%, rgba(243,	119,	37, 0.8), transparent, rgba(243,	119,	37, 0.5))!important;
}

/* Base do card */
.sponsor-bottom {
  padding: 1.5rem;
  height: 260px;
}

/* Tipografia dos títulos */
.sponsor-card h1,
.sponsor-card h2,
.sponsor-card h3,
.sponsor-card h4,
.sponsor-card h5,
.sponsor-card h6,
.sponsor-card small {
  font-weight: bold;
  margin: 0;
}

/* Parágrafos */
.sponsor-card p {
  margin: 0.25rem 0;
}

/* Título do card */
.sponsor-title {
  font-family: 'UniviaProBold', sans-serif;
  text-transform: uppercase;
  font-weight: bold;
}

/* Glass effect extra (opcional) */
.glass {
  background: var(--g-glass);
  backdrop-filter: blur(var(--blur-strong));
  -webkit-backdrop-filter: blur(var(--blur-strong));
  border-radius: var(--border-radius-var);
  border: 1px solid var(--a-white-30);
  box-shadow: var(--shadow-soft);
}

/* Efeito coverflow leve: cards adjacentes menores e mais opacos */
.sponsor-card:not(.is-active) {
  opacity: 0.5;
  transform: scale(0.85);
  z-index: 1;
}


/* ============================= */
/* Botões de navegação */
/* ============================= */

.sponsor-carousel {
  position: relative; /* faz os botões se posicionarem sobre o carousel */
}

.carousel-btn {
  position: absolute;
  top: 50%; /* centraliza verticalmente */
  transform: translateY(-50%);
  z-index: 5;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  background: var(--a-ink-30);
  backdrop-filter: blur(var(--blur-soft));
  -webkit-backdrop-filter: blur(var(--blur-soft));
  transition: var(--t-smooth);
  color: var(--c-white);
  border: none;
}

.carousel-btn.prev {
  left: 0;
}

.carousel-btn.next {
  right: 0;
}

.carousel-btn:hover {
  background: var(--a-ink-50);
  transform: translateY(-50%) scale(1.1);
}

.cta-sponsor {
  height: 50px;
  width: 100%;
  border-radius: var(--border-radius-var);
  box-shadow: var(--shadow-soft);
  background: radial-gradient(circle at 66% 100%, transparent, var(--a-white-50));
  backdrop-filter: blur(var(--blur-soft));
  -webkit-backdrop-filter: blur(var(--blur-soft));
  text-transform: uppercase;
  font-family: 'UniviaProBold', sans-serif;
  transition: var(--t-smooth);
}

.cta-sponsor:hover {
  background: radial-gradient(circle at 66% 100%, transparent, var(--a-white-100));
  box-shadow: var(--shadow-strong);
  transform: scale(1.05);
}


/* ================================
   BOTÃO MUTE com estilo "seta carousel"
   ================================ */

/* Botão fixo (mute) usando o estilo do carousel */
.carousel-btn.bgm-toggle{
  position: fixed !important;
  top: auto !important;
  left: auto !important;

  right: 1.75rem;
  bottom: 3rem;

  transform: none !important;
  z-index: 99999;

  background: linear-gradient(to right, rgb(246 46 51 / 50%), rgb(251 118 31 / 50%));
  color: var(--c-white);
  transition: 0.5s ease
}

/* Hover igual ao carousel, mas sem mexer no translateY */
.carousel-btn.bgm-toggle:hover{
  transform: scale(1.1) !important;
	background: var(--g-brand-linear);
  color: var(--c-white);
}


/* ============================= */
/* COL EXPANSIVEIS IMPACTOS */
/* ============================= */
.expandable-row {
  display: flex;
  gap: 1.5rem;
  position: relative;
  overflow: visible;
}

/* Colunas */
.expandable-col {
  flex: 1 1 0;
  position: relative;
  overflow: hidden;
  transition: flex 0.5s ease;
  border-radius: var(--border-radius-var);
  border: 1px solid var(--a-white-30);
  min-height: 230px;
  max-height: 230px;
  box-shadow: var(--shadow-soft);
}

/* Overlay de blur independente */
.expandable-col::before {
  content: '';
  position: absolute;
  inset: 0;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  border-radius: var(--border-radius-var);
  transition: backdrop-filter 0.5s ease, -webkit-backdrop-filter 0.5s ease;
  pointer-events: none;
}

/* Imagem dentro da coluna */
.expandable-col img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--t-smooth);
}

/* Back dentro da coluna */
.back-expandable {
  width: 100%;
  height: 100%;
  transition: var(--t-smooth);
  background: var(--g-glass);
  backdrop-filter: blur(var(--blur-strong));
  -webkit-backdrop-filter: blur(var(--blur-strong));
  border-radius: var(--border-radius-var);
}

.back-expandable-content {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1;
  transition: var(--t-smooth);
}

.expandable-col:hover .back-expandable-content {
  width: 50%;
}

.expandable-col:hover .expanded-text-2 {
  width: 50%;
}

.text-impacto {
  min-width: 100%!important;
  max-width: 100%!important;

  transition: var(--t-smooth);
}

/* Conteúdo extra */
.expandable-col .extra-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 1.5rem;
  opacity: 0;
  transition: var(--t-smooth);
}

/* Hover na coluna ativa */
.expandable-col:hover {
  flex: 3 1 0;
}

/* Hover na coluna: blur e conteúdo visível */
.expandable-col:hover::before {
  backdrop-filter: blur(var(--blur-strong));
  -webkit-backdrop-filter: blur(var(--blur-strong));
}

.expandable-col:hover .extra-content {
  opacity: 1;
}

/* Outras colunas desaparecem apenas se uma estiver ativa */
.expandable-row.has-hover .expandable-col:not(:hover) {
  flex: 0 1 0;
  opacity: 0;
  pointer-events: none;
  margin: 0;
}

/* Glass styling dentro do conteúdo */
.glass-expanded {
  background: var(--g-glass);
  border-radius: var(--border-radius-var);
  border: 1px solid var(--a-white-30);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(var(--blur-strong));
  -webkit-backdrop-filter: blur(var(--blur-strong));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 1.5rem;
}

.expandable-col p{
  min-width: max-content;
}

.expanded-text {
  overflow: hidden;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: var(--t-smooth);
}

.expandable-content p{
  padding: 0.75rem 1.5rem;
  margin: 0;
  transition: 0.s ease; 
}

.expandable-content p:hover{
  transform: scale(1.05);
}

.expandable-wrapper {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.8s ease-in-out; /* animação mais suave */
}

/* ===== FIM */


/* ============================= */
/* COL MOBILE IMPACTOS */
/* ============================= */
.m-expandable-row {
  position: relative;
  display: grid;
  gap: 1.5rem;
  overflow: visible;
  display: flex;
}

.m-track {
  display: flex;
  will-change: transform;
}

/* Colunas */
.m-col {
  flex: 0 0 auto;
  width: 280px;
  padding: 1.5rem;
  margin: 0 15px;
  position: relative;
  overflow: hidden;
  transition: var(--t-smooth);
  border-radius: var(--border-radius-var);
  border: 1px solid var(--a-white-30);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(var(--blur-strong));
  -webkit-backdrop-filter: blur(var(--blur-strong));
  background-position: center;
  background-size: cover;
}

.back-expandable-content {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1;
  transition: var(--t-smooth);
}

.m-col .back-expandable-content {
  width: 50%;
}

.m-col .expanded-text-2 {
  width: 50%;
}

/* Conteúdo extra */
.m-col .extra-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 1.5rem;
  opacity: 0;
  transition: var(--t-smooth);
}

.expandable-col:hover .extra-content {
  opacity: 1;
}

/* Outras colunas desaparecem apenas se uma estiver ativa */
.expandable-row.has-hover .expandable-col:not(:hover) {
  flex: 0 1 0;
  opacity: 0;
  pointer-events: none;
  margin: 0;
}

.m-col p{
  max-width: 100%;
}

/* ===== FIM */


.social-links a {
  font-size: 1.5rem;
  transition: var(--t-smooth);
}

.social-links a:hover {
  transform: scale(1.15);
  opacity: 0.5;
}


.contactos {
  width: fit-content;
}

.gradient-line-contactos {
    height: 4px;
    border-radius: 2px;
    background: var(--g-brand-linear);
    width: 20%;
}

.section-div {
    min-height: 85vh;
    padding-top: 15vh;
}


@media (max-width: 768px) {
    .logo-main{
        max-width: 33vh!important;
    }

    .container {
      --bs-gutter-x: 3.5rem;
    }

    .section-div {
    min-height: 85vh;
    padding-top: 20vh;
}
}

@media (max-width: 992px) {
  .parallax-overlay,
  .parallax-overlay img {
    display: none !important;
  }

  .audience-card {
  min-width: 280px;
  max-width: 280px;
  }
}


/* Apenas para dispositivos lg e maiores */
@media (min-width: 992px) {
  .program-wrapper .col .glass {
    display: flex;
    flex-direction: column; /* mantém header + manhã + tarde empilhados */
    gap: 1rem; /* espaçamento entre manhã e tarde */
  }

  /* Seleciona as divs internas de manhã e tarde (mt-4) e força altura igual */
  .program-wrapper .col .glass .mt-4 {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%; /* temporário para preencher o pai flex */
  }

  /* Igualar alturas entre manhã/tarde das colunas do mesmo índice */
  .program-wrapper.row-cols-lg-2 {
    display: flex;
    flex-wrap: wrap;
  }

  .program-wrapper.row-cols-lg-2 > .col {
    display: flex;
    flex-direction: column;
  }

  /* Seleciona todas as divs de mt-4 por posição e força a mesma altura entre colunas */
  .program-wrapper.row-cols-lg-2 > .col:nth-child(1) .mt-4,
  .program-wrapper.row-cols-lg-2 > .col:nth-child(2) .mt-4 {
    /* a altura vai ser ajustada via JS abaixo */
  }
}

/* Alternância HOME vs páginas internas */
#home-header { display: none; }
#site-header { display: block; }

/* HOME: esconde menu normal, mostra header especial */
body.is-home #site-header { display: none !important; }
body.is-home #home-header { display: block !important; }