/* ============================================================
   🔠 TIPOGRAFIA GLOBAL (MARKETING: HIND LIGHT & BOLD)
============================================================ */

/* 1. Define a fonte base para TUDO na Landing Page */
body.landing-hibrida {
  font-family: 'Hind', sans-serif !important;
  font-weight: 300; /* Light (Padrão para textos corridos) */
  color: #333;
  -webkit-font-smoothing: antialiased; /* Deixa a fonte mais nítida */
}

/* 2. Títulos e Destaques em BOLD (700) */
body.landing-hibrida h1,
body.landing-hibrida h2,
body.landing-hibrida h3,
body.landing-hibrida h4,
body.landing-hibrida h5,
body.landing-hibrida h6,
body.landing-hibrida strong,
body.landing-hibrida b,
body.landing-hibrida .btn,      /* Botões */
body.landing-hibrida .nav-link, /* Links de navegação */
body.landing-hibrida label {    /* Formulários */
  font-weight: 700 !important;
}

/* 3. Garante que parágrafos e spans usem o Light (300) */
body.landing-hibrida p,
body.landing-hibrida span,
body.landing-hibrida li,
body.landing-hibrida a {
  font-weight: 300;
}

/* --- AJUSTES FNOS PARA ELEMENTOS ESPECÍFICOS --- */

/* Hero: Títulos dos botões */
.hero-buttons-top .btn {
    font-weight: 700 !important;
}

/* Intro: O texto descritivo deve ser leve */
.scc10-intro .intro-desc {
    font-weight: 300 !important;
}

/* Cards: Títulos fortes */
.card-carousel-item .card-title {
    font-weight: 700 !important;
}

/* Notícias: Título forte, Data leve */
.news-title { font-weight: 700 !important; }
.news-date  { font-weight: 300 !important; }

/* Instagram & SCCast: Metadados leves */
.insta-caption { font-weight: 300 !important; }
.sccast-time   { font-weight: 300 !important; }

/* ============================================================
   🌐 LIMITADOR GLOBAL — TODAS AS SEÇÕES (máx: 1440px)
============================================================ */

/* Adicionei 'main footer' aqui para ele obedecer ao limite também */
body.landing-hibrida main section,
body.landing-hibrida main footer {
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   🌐 0. GLOBAL — BASE RESET & ESTRUTURA
============================================================ */

/* Conteúdo limitado — usado pela maioria das seções */
.container-limitado {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 0px;
  padding-right: 0px;
}

@media (max-width: 768px) {
  .container-limitado {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* Prevenir bordas brancas no mobile */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}





/* ============================================================
    HERO SCC10 (PADRÃO FULL HD 1920x1080)
============================================================ */

.hero-scc10 {
  position: relative;
  width: 100%;
  margin: 0 auto;
  
  /* 1. Tamanho Full HD */
  max-width: 1920px !important; /* Sobrescreve o limite global de 1440px */
  
  /* 2. Proporção Fixa 16:9 (Desktop/Tablet) */
  aspect-ratio: 16 / 9;
  min-height: auto; /* Reseta alturas antigas */
  
  /* 3. Comportamento da Imagem */
  background-size: cover;   /* Cobre tudo (corta excessos se necessário) */
  background-position: center;
  background-repeat: no-repeat;
  
  color: #fff;
  overflow: hidden;
}

.hero-scc10 .overlay {
  position: absolute;
  inset: 0;
  opacity: 0.45;
  pointer-events: none;
}

.hero-top {
  z-index: 2;
  display: flex;
  justify-content: space-between;
  padding: 30px 20px; /* Mais espaço para respirar */
}

/* Logo Hero - Ajuste de Tamanho Sugerido */
.hero-logo-left {
  flex: 0 0 auto !important;
  width: auto !important;
  display: flex;
  align-items: center;
}

.hero-logo-top {
  height: auto;
  max-height: 70px; /* Aumentado de 40px para 70px para melhor visibilidade */
  width: auto;
  max-width: 100%;
  transition: opacity 0.3s ease;
}

.hero-logo-top:hover {
  opacity: 0.85;
}

/* Botões */
.hero-buttons-top .btn {
  border-radius: 50px;
  font-weight: 600;
  padding: 0.3rem 1.8rem; /* Botões um pouco mais robustos */
  text-transform: capitalize;
  transition: all 0.25s ease-in-out;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.hero-buttons-top .btn:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
}

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

  .hero-scc10 {
    /* No mobile, 16:9 ficaria muito baixo (ex: 360px x 202px).
       Então desligamos o aspect-ratio e forçamos uma altura mínima 
       para caber logo e botões confortavelmente.
    */
    aspect-ratio: auto; 
    min-height: 500px; /* Altura segura para mobile */
    overflow: visible;
  }

  /* Hero TOP: Logo e Botões */
  .hero-top {
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 20px 16px !important;
  }

  .hero-logo-left {
    justify-content: center;
  }
  
  /* Logo um pouco menor no mobile */
  .hero-logo-top {
    max-height: 55px; 
  }

  /* Botões em Linha Única (Correção que fizemos antes) */
  .hero-buttons-top {
    width: 100%;
    display: flex;
    flex-wrap: nowrap !important; 
    gap: 8px;
    justify-content: center;
    padding-top: 5px;
  }

  .hero-buttons-top .btn {
    flex: 1 1 auto; 
    white-space: nowrap; 
    font-size: 0.75rem; 
    padding: 5px 4px;   
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0; 
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ============================================================
    SEÇÃO INTRO (AJUSTADA 80% LARGURA)
============================================================ */

.scc10-intro {
  padding: 0; 
  text-align: center;
  position: relative;
  z-index: 2;
  margin-top: -1px; /* Garante que cole na seção de cima se necessário */
}

.scc10-intro .intro-inner {
  max-width: 90%; 
  margin: 0 auto;
}

/* Wrapper do fundo da section intro */
.scc10-intro .intro-bg {
  /* AUMENTADO DE 60% PARA 80% */
  max-width: 80%;         
  margin: 0 auto;        
  padding: 60px 40px;  
  
  /* Borda arredondada apenas embaixo */
  border-radius: 0 0 50px 50px; 
  
  /* Sombra suave */
  box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}

.scc10-intro h2 {
  font-size: 2.5rem; /* Título maior e mais impactante */
  margin-bottom: 25px;
  line-height: 1.1;
  color: inherit; /* Herda a cor definida no PHP (branco ou roxo) */
}

.scc10-intro .intro-desc {
  font-size: 1.25rem; /* Texto levemente maior (já está Light pelo global) */
  margin-bottom: 35px;
  line-height: 1.6;
  opacity: 0.95;
  max-width: 900px; /* Limite de leitura confortável */
  margin-left: auto;
  margin-right: auto;
}

/* Botão da Intro */
.intro-btn {
  display: inline-block;
  padding: 0.8rem 2.5rem;
  border-radius: 50px;
  font-size: 1.1rem;
  /* Font-weight Bold já vem do global */
  transition: 0.3s;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  text-decoration: none !important;
}

.intro-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
  filter: brightness(1.1);
}

/* Mobile */
@media (max-width: 768px) {
  .scc10-intro .intro-bg {
    max-width: 95%; 
    padding: 40px 20px;
    border-radius: 0 0 30px 30px;
  }
  
  .scc10-intro h2 {
    font-size: 1.8rem;
  }
  
  .scc10-intro .intro-desc {
    font-size: 1rem;
  }
}



/* ============================================================
   🔵 2. SEÇÃO PATROCINADORES (ISOLADA E AJUSTADA)
============================================================ */

.scc10-patrocinadores {
  width: 100% !important;
  margin: 0 auto !important;
  padding: 10px 0;
  position: relative;
  overflow: visible !important;
  z-index: 5;
  /* A cor de fundo vem do PHP (style inline) */
}

.patrocinadores-container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 20px;
}

.patrocinadores-title {
  text-align: center;
  font-size: 1.5rem; /* Tamanho do título */
  font-weight: 700;  /* Bold */
  margin-bottom: 0px;
  color: #000;       /* Cor padrão se o fundo for claro, ajustar se necessário */
}



/* -------------------------------------------
   LAYOUT 2: CARROSSEL (Arrastável)
------------------------------------------- */

/* Wrapper: A caixa que esconde o que sobra */
.scc10-carousel-wrapper {
  position: relative;
  width: 100%;
  height: auto;
  overflow-x: hidden; /* Desktop: esconde barra de rolagem */
  padding: 10px 0;
  
  /* Centraliza o carrossel se houver poucas logos */
  display: flex;
  justify-content: center;
}

/* A Trilha: Onde estão os itens */
.scc10-carousel {
  display: flex;
  gap: 40px; /* Espaço entre as logos */
  padding: 10px 20px;
  
  flex-wrap: nowrap; /* Impede quebra de linha */
  cursor: grab;      /* Mãozinha */
  user-select: none; /* Impede seleção de texto ao arrastar */
}

.scc10-carousel.dragging {
  cursor: grabbing; /* Mãozinha fechada */
}

/* O Item (Box da Logo) */
.scc10-carousel-item {
  flex: 0 0 auto; /* Tamanho fixo, não estica nem encolhe */
  width: 200px;   /* Largura generosa */
  height: 100px;
  
  display: flex;
  align-items: center;
  justify-content: center;
}

.scc10-carousel-item a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.scc10-carousel-item img {
  max-width: 100%;
  max-height: 80px; /* Altura máxima da logo */
  width: auto;
  object-fit: contain;
  pointer-events: none; /* Importante para o arraste funcionar bem */
}

.scc10-carousel-item:hover img {
    transform: scale(1.1);
}

/* --- MOBILE --- */
@media (max-width: 768px) {
  
  .scc10-patrocinadores {
      padding: 10px 0;
  }

  .scc10-carousel-wrapper {
    overflow-x: auto; /* Permite scroll com o dedo nativo */
    justify-content: flex-start; /* Alinha à esquerda para permitir scroll */
    padding-bottom: 15px;
  }
  
  .scc10-carousel {
    padding: 0 20px;
    gap: 25px;
  }
  
  .scc10-carousel-item {
    width: 140px; /* Um pouco menor no celular */
    height: 80px;
  }
  
  .scc10-carousel-item img {
    max-height: 60px;
  }
}

/* ============================================================
   🔶 4. SEÇÃO CARDS (ALINHAMENTO PERFEITO ALTURA)
============================================================ */

.scc10-cards { 
    position: relative;
    padding: 60px 0;
}

.cards-title {
    font-size: 2rem; 
    font-weight: 700;
    margin-bottom: 30px;
    padding-left: 20px;
}

.cards-carousel-wrapper {
  position: relative;
  overflow-x: hidden; 
  padding: 20px 0;
  scrollbar-width: none;
}

/* TRILHA (Flexbox) */
.cards-carousel {
  display: flex;
  gap: 30px;
  padding: 0 20px;
  flex-wrap: nowrap;
  cursor: grab;
  
  /* IMPORTANTE: Isso garante que todos os filhos tenham a mesma altura da maior carta */
  align-items: stretch; 
}

.cards-carousel.active {
  cursor: grabbing;
}

/* ITEM INDIVIDUAL */
.card-carousel-item {
  flex: 0 0 280px; 
  /* Altura 100% garante que ele pegue a altura definida pelo 'stretch' do pai */
  height: auto; 
  
  display: flex;
  flex-direction: column; /* Empilha Box + Data */
  transition: transform 0.3s ease;
}

.card-carousel-item:hover {
  transform: translateY(-5px);
}

/* CAIXA COLORIDA (BOX) */
.card-box {
  border-radius: 16px;
  overflow: hidden;
  
  /* AQUI ESTÁ A MÁGICA: */
  display: flex;
  flex-direction: column;
  
  /* Faz a caixa crescer para ocupar todo o espaço do item (nivela com o maior vizinho) */
  flex: 1; 
  
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  min-height: 420px; /* Altura mínima de segurança */
  position: relative;
}

/* Imagem */
.card-box .card-img img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

/* Título */
.card-box .card-title {
  font-size: 1.25rem; 
  font-weight: 400;
  line-height: 1.3;
  padding: 25px 20px 10px;
  text-align: center;
  
  /* Limite de linhas visual (segurança extra) */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  
  /* Empurra o botão para baixo se o texto for curto */
  flex-grow: 1; 
  margin-bottom: 10px;
}

/* Botão */
.card-box .card-btn {
  margin: 0 auto 30px auto; 
  padding: 10px 35px;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 700;
  
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  
  text-decoration: none;
  transition: 0.2s;
  border: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1); 
}

.card-box .card-btn i {
    font-size: 0.8em; 
}

.card-box .card-btn:hover {
  filter: brightness(1.1);
  transform: scale(1.05);
}

/* DATA (Fora do Box) */
.card-carousel-item .card-date {
  display: block;
  text-align: center;
  font-size: 1rem;
  color: #999; 
  margin-top: 15px;
  font-weight: 400;
  
  /* Garante que a data não encolha */
  flex-shrink: 0; 
}

/* Setas */
.cards-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px; 
  color: #333;
  cursor: pointer;
  transition: 0.2s;
  z-index: 20;
}

.cards-arrow:hover {
  background: #EB8510; 
  color: #fff;
}

.cards-arrow.prev-arrow { left: -25px; }
.cards-arrow.next-arrow { right: -25px; }

/* Mobile */
@media (max-width: 768px) {
  .cards-arrow { display: none !important; }

  .cards-carousel-wrapper {
    overflow-x: auto;
    padding-bottom: 20px;
  }
  
  .card-carousel-item {
    flex: 0 0 260px;
    /* Removemos altura fixa para deixar o flex agir */
  }
  
  .card-box {
      min-height: 400px;
  }
}

/* ============================================================
    SEÇÃO: LISTA DE NOTÍCIAS (CONTAINER PERFEITO)
============================================================ */

.scc10-lista-noticias {
  position: relative;
  min-height: 950px; 
  padding: 0; 
  overflow: hidden; 
  
  /* Centraliza verticalmente */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ✨ FUNDO PARCIAL (A Caixa Cinza) */
.scc10-bg-partial {
  position: absolute;
  left: 0;
  right: 0;
  
  /* 🔒 TRAVA DE SEGURANÇA: 
     Define exatamente onde começa e termina o cinza.
     Isso cria as faixas brancas de 100px em cima e embaixo. */
  top: 100px;    
  bottom: 100px; 
  
  z-index: 1;
}

/* 📦 CONTAINER DE CONTEÚDO (O Ajuste que você pediu) */
.scc10-lista-noticias .container-limitado {
  position: relative;
  z-index: 3; /* Fica acima do fundo cinza */
  
  /* 🔒 PADDING DE SEGURANÇA:
     Se o fundo começa em 100px, colocamos 140px aqui.
     Isso empurra o conteúdo 40px para DENTRO da área cinza,
     garantindo que ele nunca vaze para o branco. */
  padding-top: 140px;
  padding-bottom: 140px;
}

/* Título */
.scc10-lista-noticias .news-section-title {
  color: #63007F;
  font-weight: 800;
  font-size: 2.5rem;
  margin-bottom: 60px;
  position: relative;
  letter-spacing: -1px;
}

/* Lista */
.news-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 45px;
  position: relative;
}

/* Thumb */
.news-thumb {
  flex: 0 0 220px;
  width: 220px;
  height: 140px;
  border-radius: 16px;
  overflow: hidden;
  margin-right: 30px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.15);
  background: #eee;
}

.news-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.news-thumb:hover img {
  transform: scale(1.1);
}

/* Textos */
.news-title {
  font-size: 1.5rem;
  line-height: 1.2;
  margin-bottom: 12px;
  font-weight: 700;
  color: #333;
}

.news-title a {
  color: inherit;
  text-decoration: none;
}

.news-title a:hover {
  color: #EB8510;
}

.news-date {
  font-size: 1rem;
  color: #777;
  font-weight: 600;
}

/* =======================================================
   🌴 IMAGEM GIGANTE (MANTIDA)
======================================================= */
.decor-image-wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 60%;
  z-index: 2; /* Fica entre o fundo (1) e o texto (3) */
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.decor-img-element {
  height: 100%;
  width: auto;
  object-fit: cover;
  object-position: left bottom;
}

/* =======================================================
   📱 MOBILE (Versão Limpa: Só Cards)
======================================================= */
@media (max-width: 992px) {
  
  /* 1. Reset da Seção */
  .scc10-lista-noticias {
     min-height: auto; /* Remove altura forçada */
     padding: 0;       /* Remove padding extra */
  }
  
  /* 2. Fundo Cinza: Ocupa 100% da área no mobile */
  /* Removemos as faixas brancas para aproveitar a tela pequena */
  .scc10-bg-partial {
      top: 0; 
      bottom: 0;
      left: 0;
      right: 0;
  }
  
  /* 3. Padding interno do conteúdo */
  .scc10-lista-noticias .container-limitado {
      padding-top: 50px;
      padding-bottom: 50px;
  }

  /* 4. TCHAU IMAGEM 👋 */
  /* Isso remove a palmeira e qualquer decoração do fluxo da página */
  .decor-image-wrapper {
    display: none;
  }

  /* 5. Ajuste dos Cards para Mobile */
  .news-thumb {
    /* Reduzimos um pouco a imagem para não ocupar toda a tela do celular */
    flex: 0 0 120px;
    width: 120px;
    height: 90px;
    margin-right: 15px;
  }
  
  /* Título da Notícia um pouco menor */
  .news-title {
    font-size: 1rem;
    line-height: 1.3;
  }
  
  /* Título da Seção */
  .scc10-lista-noticias .news-section-title {
    font-size: 1.8rem;
    margin-bottom: 30px;
  }
  
  /* Ajuste no espaçamento entre itens */
  .news-item {
    margin-bottom: 25px;
  }
}


/* Botão "Veja Mais" da Lista de Notícias */
.btn-veja-mais {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  
  /* A cor de fundo e texto vêm do PHP (style inline), então não definimos background aqui */
  
  padding: 12px 35px;
  border-radius: 50px;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
  
  /* Sombra suave */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.btn-veja-mais:hover {
  /* Truque: Em vez de mudar a cor fixa, escurecemos a cor escolhida pelo usuário em 10% */
  filter: brightness(0.9); 
  
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

.btn-veja-mais i {
  font-size: 0.85em; 
  transition: transform 0.2s;
}

.btn-veja-mais:hover i {
  transform: translateX(4px); 
}


/* ============================================================
   📸 SEÇÃO INSTAGRAM (Estilo Final)
============================================================ */

.scc10-instagram {
    padding: 60px 0;
}

.insta-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #333;
}

/* CARD */
.insta-card {
    text-decoration: none;
    display: block;
    color: inherit;
    transition: transform 0.3s ease;
}

.insta-card:hover {
    transform: translateY(-5px);
}

/* IMAGEM (Quadrada e Limpa) */
.insta-img-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1; 
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 8px;
    background-color: #f5f5f5; /* Fundo cinza se faltar img */
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.insta-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.insta-card:hover .insta-img-wrapper img {
    transform: scale(1.05);
}

/* TEXTOS */
.insta-caption {
    font-size: 0.85rem;
    color: #444;
    margin-bottom: 3px;
    line-height: 1.3;
    font-weight: 500;
}

.insta-date {
    font-size: 0.75rem;
    color: #999;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* --- REGRA MOBILE: MOSTRAR APENAS 4 CARDS --- */
@media (max-width: 991px) {
    /* Seleciona qualquer item a partir do 5º (nth-child(n+5)) 
       e esconde. Assim, mostra apenas os 4 primeiros.
    */
    .insta-col:nth-child(n+5) {
        display: none;
    }
}

/* ============================================================
   🎙️ SEÇÃO: SCCAST (VÍDEOS) - ATUALIZADO
============================================================ */

.scc10-sccast {
  padding: 60px 0;
}

/* Cabeçalho */
.sccast-header {
  display: flex;
  align-items: center; 
  gap: 20px; 
  margin-bottom: 30px;
}

.sccast-title {
  font-weight: 800;
  color: #63007F; 
  font-size: 1.8rem;
  margin: 0;
  white-space: nowrap; 
}

.sccast-line {
  flex-grow: 1; 
  height: 2px;
  background-color: #ccc; 
  opacity: 0.6;
}

/* Card */
.sccast-card {
  display: block;
  text-decoration: none;
  /* Removemos o group: pointer, pois não existe em CSS padrão. O 'a' já tem cursor pointer */
}

/* Thumbnail 16:9 */
.sccast-thumb-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  margin-bottom: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.sccast-thumb-wrapper img {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease, opacity 0.3s ease;
  opacity: 0.9;
}

.sccast-card:hover .sccast-thumb-wrapper img {
  transform: scale(1.05);
  opacity: 1;
}

/* Play Icon */
.play-overlay {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 45px; height: 45px;
  background: rgba(0,0,0,0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  border: 2px solid rgba(255,255,255,0.8);
  transition: 0.3s;
  backdrop-filter: blur(2px);
}

.sccast-card:hover .play-overlay {
  background: #EB8510; 
  border-color: #EB8510;
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow: 0 0 15px rgba(235, 133, 16, 0.4);
}

/* Conteúdo (Título + Data) */
.sccast-content {
    padding: 0 2px;
}

.sccast-video-title {
    font-size: 1rem;
    font-weight: 700;
    color: #333;
    line-height: 1.3;
    margin-bottom: 5px;
    
    /* Limita a 2 linhas para alinhar altura */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 2.6em; /* Reserva espaço para 2 linhas */
}

.sccast-card:hover .sccast-video-title {
    color: #63007F; /* Muda cor no hover */
}

.sccast-time {
  font-size: 0.8rem;
  color: #888;
  font-weight: 500;
  display: block;
}

/* Mobile Ajuste Fino */
@media (max-width: 768px) {
    .sccast-video-title {
        font-size: 0.9rem; /* Fonte menor no celular */
        min-height: auto;
    }
    
    .play-overlay {
        width: 35px; height: 35px; /* Play menor no celular */
        font-size: 12px;
    }
}


/* ============================================================
   🦶 SEÇÃO: RODAPÉ (PADRONIZADO)
============================================================ */

.scc10-lp-footer {
  padding: 50px 0; /* Espaçamento interno */
  width: 100%;
  color: #fff;
  /* A cor de fundo vem do PHP (inline style) */
}

/* O conteúdo interno fica centralizado */
.footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.footer-logo-wrapper {
  max-width: 180px;
  width: 100%;
  margin: 0 auto;
}

.footer-logo {
  width: auto;
  max-height: 70px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  transition: opacity 0.3s ease;
}

.footer-logo:hover {
  opacity: 0.9;
}

.footer-copy {
  font-size: 0.85rem;
  opacity: 0.8;
  font-weight: 400;
  max-width: 600px;
  line-height: 1.5;
  margin-top: 20px;
}

/* Mobile */
@media (max-width: 768px) {
  .scc10-lp-footer {
    padding: 30px 0;
  }
  
  .footer-logo-wrapper {
    max-width: 140px;
  }
}