/* ==========================================================================
   Multimídia – v3.1 (CORRIGE HOVER DA SETA ESQUERDA) + Patch Responsivo Pro
   ========================================================================= */

/* ---------- Tokens e variáveis globais ---------- */
:root{
  /* Cores base */
  --bg:#0f1012; --text:#e9edf3; --muted:#aeb3c0;
  --card:#1b1c20; --bd:rgba(255,255,255,.06); --ring:rgba(140,170,255,.18);
  --shadow:0 16px 60px rgba(0,0,0,.45);

  /* Layout da seção */
  --section-top: clamp(64px, 7.5vw, 40px);
  --section-bottom: clamp(80px, 8.5vw, 40px);

  /* Card + proporções */
  --ratio: 16/9;
  --cardW: clamp(280px, 28vw, 460px);
  --gap: clamp(24px, 3.2vw, 48px);

  /* Escalas */
  --scaleSide:.94; --scaleCenter:1.10; --scaleHover:1.13;

  /* Alturas calculadas */
  --cardH: calc(var(--cardW) / (var(--ratio)));
  --viewportH: calc(var(--cardH) * var(--scaleCenter) + 24px);

  /* Setas / trilho */
  --navOutside: clamp(36px, 6vw, 120px);
  --arrowSize: clamp(52px, 4.4vw, 68px);

  /* Largura do trilho (atualizada no patch responsivo via --cols) */
  --trackW: calc(3 * var(--cardW) + 2 * var(--gap));

  /* ===== Imagens (ajuste caminhos conforme seu projeto) ===== */
  --bg-img: url("../../images/backgrounds/multimidia-background.jpg");
  --arrow-img:   url("../../images/navegation/arrow-mult.png");
  --arrow-img-h: url("../../images/navegation/arrow-mult-hover.png");

  /* (valores originais mantidos; CTA será sobrescrita mais abaixo) */
  --ctaW: clamp(480px, 46vw, 860px);
  --ctaH: clamp(82px, 8vw, 110px);
  --cta-img:   url("../../images/navegation/cta-play.png");
  --cta-img-h: url("../../images/navegation/cta-play-hover.png");
  --cta-img-a: url("../../images/navegation/cta-play-active.png");
}

/* ---------- Seção ---------- */
.multimedia-section{
  position:relative;
  overflow-x: clip;
  background:
    linear-gradient(180deg, rgba(8,10,14,.78), rgba(8,10,14,.86)),
    var(--bg-img) center / cover no-repeat;
  padding: var(--section-top) 0 var(--section-bottom);
}
.multimedia-section .container{ max-width:1200px; margin:0 auto; padding:0 24px; }

/* ---------- Header ---------- */
.section-header{ text-align:center; margin-bottom:26px; }
.multimedia-section .section-title{
  font-family:"Marcellus", ui-serif, Georgia, "Times New Roman", serif;
  margin:0; color:var(--text); font-weight:900; letter-spacing:.3px;
  font-size: clamp(28px,4vw,48px); line-height:1.05;
}
.section-subtitle{ color:var(--muted); margin:.6rem auto 0; max-width:760px; }

/* ---------- Abas (Tabs) com Efeito Vampiresco ---------- */
.multimedia-tabs ul{
  list-style:none; padding:0; margin:18px auto 0;
  display:flex; gap:12px; justify-content:center;
}
.multimedia-tabs .tab-button{
  --pillBgTop:#151419; --pillBgBot:#0f0f13;
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid rgba(255,255,255,.04);
  background: transparent;
  color:var(--muted);
  border-radius:14px; padding:11px 16px; cursor:pointer;
  font:600 14px/1 "Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  transition:transform .15s ease, box-shadow .25s ease, color .2s ease, border-color .25s ease;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 8px 24px rgba(0,0,0,.45);
  position:relative; overflow:hidden; isolation:isolate;
}
.multimedia-tabs .tab-button i { margin-right: 2px; }

.multimedia-tabs .tab-button::after{
  content:""; position:absolute; inset:-1px; border-radius:inherit; z-index:-1;
  opacity:.45; transition: opacity .25s ease, filter .25s ease;
  filter: blur(10px);
  background:
    linear-gradient(180deg,var(--pillBgTop),var(--pillBgBot));
}

.multimedia-tabs .tab-button[data-tab="youtube"]::after {
  background:
    linear-gradient(180deg,var(--pillBgTop),var(--pillBgBot)),
    radial-gradient(140% 120% at 10% 0%, rgba(228,85,85,.30) 0%, transparent 60%),
    radial-gradient(160% 130% at 100% 100%, rgba(122,18,27,.25) 0%, transparent 70%);
}
.multimedia-tabs .tab-button[data-tab="twitch"]::after {
  background:
    linear-gradient(180deg,var(--pillBgTop),var(--pillBgBot)),
    radial-gradient(140% 120% at 10% 0%, rgba(155,120,255,.30) 0%, transparent 60%),
    radial-gradient(160% 130% at 100% 100%, rgba(81,33,176,.25) 0%, transparent 70%);
}

.multimedia-tabs .tab-button:hover{
  color:var(--text); transform:translateY(-1px);
}
.multimedia-tabs .tab-button.active { color: var(--text); }
.multimedia-tabs .tab-button.active::after,
.multimedia-tabs .tab-button:hover::after { opacity: 1; }

.multimedia-tabs .tab-button[data-tab="youtube"]:hover,
.multimedia-tabs .tab-button[data-tab="youtube"].active {
  box-shadow: inset 0 0 0 1px rgba(228,85,85,.5), 0 12px 36px rgba(122,18,27,.35);
  border-color: rgba(228,85,85,.2);
}
.multimedia-tabs .tab-button[data-tab="twitch"]:hover,
.multimedia-tabs .tab-button[data-tab="twitch"].active {
  box-shadow: inset 0 0 0 1px rgba(155,120,255,.5), 0 12px 36px rgba(81,33,176,.32);
  border-color: rgba(155,120,255,.2);
}

.multimedia-tabs .tab-button:focus-visible,
.c3-nav button:focus-visible{ outline:2px solid #98a2ff; outline-offset:2px; }

/* ---------- Painéis ---------- */
.multimedia-content-wrapper{
  position:relative;
  margin: 36px auto 0;
  min-height: calc(var(--viewportH) + 20px);
}
.content-panel{
  position:absolute; inset:0; opacity:0; transform: translateY(8px) scale(.995);
  visibility:hidden; pointer-events:none;
  transition: opacity .28s ease, transform .34s cubic-bezier(.22,.8,.2,1), visibility 0s .28s;
}
.content-panel.active{ opacity:1; transform:none; visibility:visible; pointer-events:auto; transition-delay:0s; }

/* ---------- Carrossel ---------- */
.c3{
  position:relative;
  width: var(--trackW, calc(3 * var(--cardW) + 2 * var(--gap)));
  margin-inline:auto;
  height: var(--viewportH);
  --dx: 0px; --drag: 0px;
}
.c3-layer{ position:relative; width:100%; height:100%; cursor: grab; overscroll-behavior: contain; touch-action: pan-y; }
.c3-layer.grabbing{ cursor: grabbing; user-select:none; }

.c3-item{
  position:absolute; top:50%; left:50%;
  width:var(--cardW); height:var(--cardH);
  transform-origin:center; border-radius:16px; overflow:hidden;
  background:var(--card); border:1px solid var(--bd); box-shadow:var(--shadow);
  display:flex; flex-direction:column; justify-content:flex-end;
  opacity:0; pointer-events:none;
  transition: transform .42s cubic-bezier(.22,.8,.2,1), opacity .25s ease, box-shadow .25s ease;
  will-change: transform;
}
.c3-item.on{ opacity:1; pointer-events:auto; }
.c3-item .thumb{ position:absolute; inset:0; background-size:cover; background-position:center; }
.c3-item::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(to top, rgba(0,0,0,.86), rgba(0,0,0,0) 56%); }
.c3-info{ position:relative; z-index:2; padding:16px; }
.c3-title{ margin:0 0 4px; color:var(--text); font-weight:800; font-size:17px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.c3-channel{ margin:0; color:var(--muted); font-size:14px; }

/* Posições base */
.c3-item.center{ transform: translate(-50%, -50%) translateX(var(--drag)) scale(var(--scaleCenter)); z-index:3; box-shadow: 0 22px 90px rgba(0,0,0,.60), 0 0 0 1px var(--ring); }
.c3-item.left{   transform: translate(-50%, -50%) translateX(calc(-1 * var(--dx) + var(--drag))) scale(var(--scaleSide)); z-index:2; }
.c3-item.right{  transform: translate(-50%, -50%) translateX(calc(var(--dx) + var(--drag))) scale(var(--scaleSide)); z-index:2; }

/* Hover */
.c3-item.center:hover{ transform: translate(-50%, -50%) translateX(var(--drag)) scale(var(--scaleHover)); }
.c3-item.left:hover{   transform: translate(-50%, -50%) translateX(calc(-1 * var(--dx) + var(--drag))) scale(calc(var(--scaleSide) + .02)); }
.c3-item.right:hover{  transform: translate(-50%, -50%) translateX(calc(var(--dx) + var(--drag))) scale(calc(var(--scaleSide) + .02)); }

/* ---------- SETAS (fora do trilho, halo no formato da seta) ---------- */
.c3-nav{ position:absolute; inset:0; pointer-events:none; }
.c3-prev{ left:  calc(50% - (var(--trackW, 0px) / 2) - var(--navOutside)); }
.c3-next{ right: calc(50% - (var(--trackW, 0px) / 2) - var(--navOutside)); }

.c3-nav button{
  position:absolute; top:50%; transform:translateY(-50%);
  width:var(--arrowSize); height:var(--arrowSize);
  border:0; background:none; padding:0; z-index:4;
  display:block; pointer-events:auto; opacity:.98;
  transition: transform .15s ease, opacity .2s ease, filter .2s ease;
  font-size:0; color:transparent;
}
/* Ícone (imagem) */
.c3-nav button::before{
  content:""; position:relative; z-index:2;
  display:block; width:100%; height:100%;
  background: var(--arrow-img) center / contain no-repeat;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.55));
}
.c3-prev::before{ transform: scaleX(-1); }
.c3-next::before{ transform: none; }
.c3-prev:hover::before{ background-image: var(--arrow-img-h); transform: scaleX(-1); }
.c3-next:hover::before{ background-image: var(--arrow-img-h); }

/* Halo seguindo o contorno do PNG */
.c3-nav button::after{
  content:""; position:absolute; inset:0; z-index:1;
  background: var(--arrow-img) center / contain no-repeat;
  transform: scale(1.22);
  filter: blur(8px) drop-shadow(0 0 10px rgba(160,180,255,.30));
  opacity:.9; animation: arrow-breathe 2.8s ease-in-out infinite;
}
.c3-prev::after{ transform: scaleX(-1) scale(1.22); }
.c3-next::after{ transform: scale(1.22); }

/* --- CORREÇÃO AQUI --- */
/* Regra de hover do halo foi separada para a seta esquerda e direita */

/* Hover para o halo da SETA DIREITA */
.c3-next:hover::after{
  background-image: var(--arrow-img-h);
  filter: blur(5px) drop-shadow(0 0 14px rgba(160,180,255,.45));
  opacity:1;
  animation:none;
}
/* Hover para o halo da SETA ESQUERDA (mantendo o espelhamento) */
.c3-prev:hover::after{
  background-image: var(--arrow-img-h);
  filter: blur(5px) drop-shadow(0 0 14px rgba(160,180,255,.45));
  opacity:1;
  animation:none;
  transform: scaleX(-1) scale(1.22); /* Reaplicando o transform aqui */
}

@keyframes arrow-breathe{ 0%,100%{ transform: scale(1.20); opacity:.65; } 50%{ transform: scale(1.26); opacity:.95; } }
.c3-nav button:hover{ transform:translateY(-50%) scale(1.08); opacity:1; }
.c3-nav button:active{ transform:translateY(-50%) scale(.98); }
.c3-nav button[disabled]{ opacity:.45; pointer-events:none; }

/* ---------- CTA (título com Marcellus + botão imagem) ---------- */
.final-cta{ text-align:center; margin-top: clamp(70px, 8vw, 110px); }
.final-cta .section-title{
  font-family:"Marcellus", ui-serif, Georgia, "Times New Roman", serif;
  font-size: clamp(20px, 2.5vw, 32px);
}

/* >>> CORRIGIDO: área clicável justa + tamanho fixo 290x110 */
.final-cta{
  --ctaW: 290px;    /* largura EXATA da área clicável */
  --ctaH: 110px;    /* altura EXATA da área clicável */
}

.multimedia-section .btn-big{
  display:inline-block; width:var(--ctaW); height:var(--ctaH);
  border:0; padding:0; margin-top:18px;
  filter: drop-shadow(0 18px 38px rgba(0,0,0,.45));
  transition: transform .18s ease, filter .2s ease;

  background-image: var(--cta-img);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;   /* << antes era 'contain' */

  color:transparent; font-size:0; line-height:0; text-indent:-9999px; white-space:nowrap;
}
.multimedia-section .btn-big:hover{
  background-image: var(--cta-img-h);
  transform: translateY(-1px);
  filter: drop-shadow(0 24px 52px rgba(0,0,0,.55));
}
.multimedia-section .btn-big:active{
  background-image: var(--cta-img-a);
  transform: translateY(0) scale(.98);
}

/* --- NOVO: Estilos para a mensagem de fallback da Twitch (v2) --- */
.c3-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  text-align: center;
  padding: 40px 24px;
  min-height: var(--viewportH, 300px);
  font-family: "Inter", system-ui, sans-serif;
}
.fallback-icon { font-size: 48px; color: #7289da; filter: drop-shadow(0 4px 12px rgba(114,137,218,.3)); }
.fallback-text {
  color: var(--muted, #aeb3c0);
  font-size: 16px; line-height: 1.6; max-width: 450px; margin: 0;
}
.fallback-text br { display: block; content: ""; margin-top: 4px; }
.fallback-button {
  --pillBgTop:#151419; --pillBgBot:#0f0f13;
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px;
  border-radius: 14px; text-decoration: none; color: var(--text) !important;
  border: 1px solid rgba(255,255,255,.04) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 8px 24px rgba(0,0,0,.45) !important;
  font: 600 15px/1 "Inter", system-ui, sans-serif;
  transition: transform .15s ease, box-shadow .25s ease;
  position: relative; isolation: isolate; background: transparent;
}
.fallback-button::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; z-index: -1;
  opacity: .55; transition: opacity .25s ease, filter .25s ease; filter: blur(10px);
  background:
    linear-gradient(180deg, var(--pillBgTop), var(--pillBgBot)),
    radial-gradient(140% 120% at 10% 0%, rgba(155,120,255,.30) 0%, transparent 60%),
    radial-gradient(160% 130% at 100% 100%, rgba(81,33,176,.25) 0%, transparent 70%);
}
.fallback-button:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(155,120,255,.5), 0 12px 36px rgba(81,33,176,.32) !important; }
.fallback-button:hover::after { opacity: 1; }

/* ---------- Responsivo base ---------- */
@media (max-width: 980px){
  :root{ --scaleCenter:1.08; --scaleHover:1.11; --navOutside: clamp(28px, 7vw, 80px); }
  .multimedia-content-wrapper{ margin-top:32px; }
}
@media (max-width: 680px){
  :root{
    --cardW: clamp(240px, 86vw, 360px); --gap: 20px;
    --scaleCenter:1.06; --scaleHover:1.09;
    --navOutside: clamp(20px, 9vw, 64px);
    --arrowSize: clamp(46px, 7vw, 56px);

    /* (mantidos para outras CTAs; a nossa é travada abaixo) */
    --ctaW: clamp(280px, 86vw, 360px);
    --ctaH: clamp(60px, 6.4vw, 80px);
  }
  .multimedia-content-wrapper{ margin-top:28px; }
}

/* ---------- Motion-safe ---------- */
@media (prefers-reduced-motion: reduce){
  .c3-item, .content-panel { transition:none !important; }
  .c3-nav button::after { animation:none !important; }
}

/* ============================================================
   Patch responsivo Pro (1-up → 3-up) — v3.1.r
   ============================================================ */

/* Track dinâmico por contagem de colunas */
:root{
  --cols: 3; /* desktop padrão */
  --trackW: calc(var(--cols) * var(--cardW) + (var(--cols) - 1) * var(--gap));
}

/* Tipografia dos cards responsiva */
.c3-title{   font-size: clamp(14px, 2.4vw, 17px); }
.c3-channel{ font-size: clamp(12px, 2.0vw, 14px); }

/* Telas MUITO pequenas: 1 card central, setas off (gesto de swipe) */
@media (max-width: 420px){
  :root{
    --cols: 1;
    --cardW: clamp(240px, 92vw, 360px);
    --gap: 14px;
    --scaleCenter: 1.02;
    --scaleHover: 1.05;
    --navOutside: 22px;
    --arrowSize: 38px;

    /* (mantidos para outras CTAs) */
    --ctaW: clamp(240px, 88vw, 340px);
    --ctaH: clamp(52px, 12vw, 72px);
  }

  .section-header{ margin-bottom: 18px; }
  .multimedia-section .section-title{ font-size: clamp(22px, 7vw, 28px); }
  .section-subtitle{ font-size: .95rem; opacity: .9; }

  .c3{ height: calc(var(--cardH) * var(--scaleCenter) + 12px); }

  /* mostra apenas o centro */
  .c3-item.left,
  .c3-item.right{
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translate(-50%, -50%) scale(.965) translateX(0) !important;
  }

  /* setas ocultas no super-baixo */
  .c3-nav button{ display:none; }

  /* tabs compactas */
  .multimedia-tabs ul{ gap: 8px; }
  .multimedia-tabs .tab-button{
    padding: 8px 12px; border-radius: 12px;
    font: 600 13px/1 "Inter", system-ui, sans-serif;
  }
}

/* Telefones grandes / tablets pequenos: 1 card, setas menores visíveis */
@media (min-width: 421px) and (max-width: 680px){
  :root{
    --cols: 1;
    --navOutside: clamp(16px, 6vw, 40px);
    --arrowSize: clamp(40px, 7vw, 52px);
  }
  .c3-item.left,
  .c3-item.right{
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translate(-50%, -50%) scale(.965) translateX(0) !important;
  }
}

/* ≥ 681px: volta para 3 cards */
@media (min-width: 681px){
  :root{ --cols: 3; }
  .c3-title{   font-size: clamp(15px, 1.3vw, 18px); }
  .c3-channel{ font-size: clamp(12px, 1.1vw, 14px); }
}

/* Ultra-wide: respira sem exagero */
@media (min-width: 1400px){
  :root{
    --cardW: clamp(320px, 24vw, 460px);
    --gap: clamp(26px, 2vw, 48px);
  }
}

@media (max-width: 680px){
  /* 1) viewport em grid: [card] [nav] */
  .c3{
    display: grid;
    grid-template-rows: minmax(var(--viewportH), auto) auto;
    height: auto;
    width: var(--trackW);
    position: relative;
  }

  /* 2) o “andar” do card */
  .c3-layer{
    position: relative;
    min-height: var(--viewportH);
    height: auto !important;
  }

  /* 3) barra de navegação logo abaixo do card, centralizada */
  .c3-nav{
    position: static !important;      /* tira do overlay */
    inset: auto !important;
    transform: none !important;
    margin-top: clamp(10px, 3vw, 18px);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(16px, 7vw, 24px);       /* um pouquinho mais longe */
    height: auto;
    pointer-events: none;              /* só os botões clicam */
    z-index: 5;
  }

  /* 4) RESET FORTE no botão: nada de absolute/top/translate do desktop */
  .c3-nav button{
    position: relative !important;
    top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
    transform: none !important;
    width: clamp(34px, 7vw, 44px);
    height: clamp(34px, 7vw, 44px);
    display: inline-flex !important;   /* cancela qualquer display:none legado */
    opacity: 1 !important;
    pointer-events: auto;
  }

  /* 5) halo fica preso ao botão e menor no mobile */
  .c3-nav button::after{
    transform: scale(1.06) !important;   /* menorzinho pra não “vazar” */
    animation: none !important;
    filter: blur(4px) drop-shadow(0 0 8px rgba(160,180,255,.35)) !important;
    opacity: .9 !important;
  }
  .c3-next:hover::after,
  .c3-prev:hover::after{
    transform: scale(1.08) !important;
    filter: blur(4px) drop-shadow(0 0 10px rgba(160,180,255,.45)) !important;
  }

  /* 6) orientação dos PNGs */
  .c3-nav button::before,
  .c3-nav button::after{ transform-origin: center; }
  .c3-prev::before{ transform: scaleX(-1); }
  .c3-prev::after{  transform: scaleX(-1) scale(1.06) !important; }
}

/* muito compacto (≤ 420px): garante visibilidade dos botões */
@media (max-width: 420px){
  .c3-nav button{ display: inline-flex !important; }
}

/* =========================================================
   OVERRIDES FINAIS para manter a CTA em 290x110 em QUALQUER breakpoint
   ========================================================= */
@media (max-width: 680px){
  .final-cta{ --ctaW: 290px; --ctaH: 110px; }
}
@media (max-width: 420px){
  .final-cta{ --ctaW: 290px; --ctaH: 110px; }
}