/* --- INÍCIO DO BLOCO CSS: Estilos do Diálogo --- */

    /* O container principal do diálogo */
    .advertorial-dialogue {
      max-width: 700px;
      /* Limita a largura para legibilidade */
      margin: 30px auto;
      /* Espaçamento para centralizar */
      padding: 20px;
      border-radius: 8px;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Helvetica, Arial, sans-serif;
      line-height: 1.6;
      color: #333;
    }

    /* Avatar (Foto/Ícone) */
    .speaker-avatar {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      color: #fff;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      /* Impede que o avatar encolha */
      font-size: 1.2rem;
    }

    .speaker-avatar.interviewer {
      background-color: #555;
      /* Cinza para o entrevistador */
    }

    .speaker-avatar.doctor {
      background-color: #005a87;
      /* Azul "médico" */
    }

    /* Conteúdo da fala */
    .speaker-content {
      flex-grow: 1;
    }

    /* Nome do falante */
    .speaker-name {
      font-weight: 700;
      font-size: 0.95rem;
      margin: 0 0 5px 0;
    }

    .speaker-name.interviewer-name {
      color: #444;
    }

    .speaker-name.doctor-name {
      color: #005a87;
    }

    /* O destaque de conversão */
    .highlight-text {
      font-weight: 600;
      color: #c0392b;
      /* Vermelho escuro para atenção */
      padding: 2px 4px;
      border-radius: 4px;
    }

    /* --- Estilos do CTA Flutuante --- */
    #sticky-cta-bar {
      position: fixed;
      bottom: -150px;
      /* Começa escondido */
      left: 0;
      width: 100%;
      background-color: #fff;
      padding: 15px 20px;
      box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.1);
      z-index: 1000;
      transition: bottom 0.4s ease-in-out;
      text-align: center;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Helvetica, Arial, sans-serif;
      display: flex;
      flex-wrap: wrap;
      /* Permite quebra de linha em telas pequenas */
      justify-content: center;
      align-items: center;
      gap: 10px 15px;
    }

    #sticky-cta-bar.visible {
      bottom: 0;
      /* Mostra o CTA */
    }

    #sticky-cta-bar strong {
      color: #005a87;
      font-size: 1.1rem;
      flex-basis: 100%;
      /* Ocupa a linha toda em mobile */
      text-align: center;
    }

    .sticky-cta-button {
      display: inline-block;
      color: #1052ce;
      text-decoration: underline;
      font-weight: 700;
      font-size: 1.1rem;
      padding: 12px 30px;
      border-radius: 8px;
      flex-grow: 1;
      /* Ocupa espaço disponível */
      max-width: 400px;
      /* Limite */
    }

    /* --- FIM DO BLOCO CSS --- */
  
    /* --- INÍCIO DO BLOCO CSS: Estilo de Diálogo (Advertorial) --- */

    /* O container principal do diálogo */
    .advertorial-dialogue {
      max-width: 700px;
      margin: 30px auto;
      /* Espaçamento para centralizar */
      padding: 0 10px;
      /* Espaço nas laterais em mobile */
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Helvetica, Arial, sans-serif;
    }

    /* Cada "turno" da conversa (a caixa colorida) */
    .dialogue-turn {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      /* Alinha o avatar ao topo do texto */
      gap: 15px;
      /* Espaço entre o avatar e o conteúdo */
      margin-bottom: 20px;
      padding: 16px;
      border-radius: 12px;
      line-height: 1.6;
    }

    /* Avatar (a bolha com a letra) */
    .speaker-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-weight: bold;
      font-size: 1.1rem;
      flex-shrink: 0;
      /* Impede que o avatar encolha */
    }

    /* Conteúdo (nome + texto) */
    .speaker-content {
      flex-grow: 1;
      /* Ocupa o espaço restante */
    }

    /* Nome do falante */
    .speaker-name {
      font-weight: 700;
      font-size: 1rem;
      margin: 0 0 4px 0;
    }

    /* Parágrafos de texto */
    .speaker-content p {
      margin: 0 0 10px 0;
      color: #111;
      /* Cor de texto escura para legibilidade */
    }

    .speaker-content p:last-child {
      margin-bottom: 0;
    }

    /* --- Cores baseadas no Falante (Usando :has()) --- */

    /* Estilo Entrevistador (Azul) */
    .dialogue-turn:has(.speaker-avatar.interviewer) {
      background-color: #eef6ff;
      /* Fundo azul claro */
    }

    .speaker-avatar.interviewer {
      background-color: #007bff;
      /* Avatar azul sólido */
    }

    .speaker-name.interviewer-name {
      color: #0056b3;
      /* Nome azul escuro */
    }

    /* Estilo Doutor (Verde) */
    .dialogue-turn:has(.speaker-avatar.doctor) {
      background-color: #e9f7eb;
      /* Fundo verde claro */
    }

    .speaker-avatar.doctor {
      background-color: #28a745;
      /* Avatar verde sólido */
    }

    .speaker-name.doctor-name {
      color: #155724;
      /* Nome verde escuro */
    }

    /* --- FIM DO BLOCO CSS --- */
 
    /* O container que você já tinha. 
    A classe é opcional, mas `display: flex` é importante aqui.
  */
    .marquee-container {
      display: flex;
      align-items: center;
      /* Centraliza verticalmente caso o texto seja menor */
    }

    /* Este é o "trem" que move os vagões (o texto).
    Ele contém os dois blocos de texto lado a lado.
  */
    .marquee-content-wrapper {
      display: flex;
      /* Coloca os <span> lado a lado */
      flex-shrink: 0;
      /* Impede que o flexbox encolha o conteúdo */
      white-space: nowrap;
      /* Garante que o texto NUNCA quebre a linha */

      /* A MÁGICA ACONTECE AQUI */
      animation: marquee-scroll 45s linear infinite;
    }

    /* Opcional: Adiciona um pequeno espaçamento à direita 
    de cada bloco de texto para garantir a separação.
  */
    .marquee-text {
      padding-right: 2rem;
      /* 32px de espaço - ajuste se precisar */
    }

    /* A definição da animação.
    Ela move o wrapper da posição 0% para -50%.
    Por que -50%? Porque o wrapper tem 200% da largura (dois blocos de texto).
    Ao mover -50%, o segundo bloco de texto termina exatamente 
    onde o primeiro começou, criando o loop perfeito.
  */
    @keyframes marquee-scroll {
      0% {
        transform: translateX(0%);
      }

      100% {
        transform: translateX(-50%);
      }
    }

    /* BÔNUS DE PERFORMANCE: 
    Pausa a animação se o usuário preferir movimento reduzido.
    Isso é ótimo para acessibilidade e performance.
  */
    @media (prefers-reduced-motion: reduce) {
      .marquee-content-wrapper {
        animation: none;
      }
    }
 
    /* RESET */
    /* RESET REMOVED - Using Tailwind Preflight */


    /* TEXTO GLOBAL */
    body {
      background: #ffffff;
      color: #000000;
    }

    /* LINKS FORA DO HEADER */
    a {
      color: #000000;
      text-decoration: none;
    }

    /* HERO */
    .hero {
      position: relative;

      /* 🔴 SEM height / min-height */
      background-color: #b30000;
      background-image: url("images/60minuteswatch.webp");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }

    /* OVERLAY */
    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(170, 0, 0, 0.85);
    }

    /* NAVBAR */
    .top-bar {
      position: relative;
      z-index: 2;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 20px;
      max-width: 1200px;
      margin: 0 auto;
    }

    /* MENU */
    .menu-left a {
      margin-right: 14px;
      font-size: 13px;
      opacity: 0.9;
    }

    /* LOGO */
    .logo img {
      height: 22px;
      width: auto;
      max-width: 140px;
      object-fit: contain;
    }

    /* HERO CONTENT */
    .hero-content {
      position: relative;
      z-index: 2;

      /* 🔑 CONTROLE REAL DO ESPAÇO */
      /* 🔑 CONTROLE REAL DO ESPAÇO */
      padding: 28px 20px 18px;
      max-width: 1200px;
      margin: 0 auto;
    }

    /* TÍTULO */
    .hero-title {
      margin-bottom: 8px;
    }

    .hero-title img {
      height: 52px;
      width: auto;
      max-width: 100%;
    }

    /* SUBTÍTULO */
    .hero-subtitle {
      font-size: 16px;
      margin-bottom: 10px;
      opacity: 0.9;
    }

    /* LINKS */
    .hero-links a {
      font-size: 13px;
      margin-right: 16px;
      opacity: 0.85;
    }

    /* DESKTOP */
    @media (min-width: 769px) {
      .top-bar {
        padding: 18px 40px;
      }

      .hero-content {
        padding: 40px 40px 28px;
      }

      .hero-title img {
        height: 72px;
      }
    }
  
    .cbs-header-wrapper {
      position: sticky;
      top: 0;
      z-index: 50;
      background: #ffffff;
      border-bottom: 1px solid #e0e0e0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    }

    .cbs-container {
      max-width: 1280px;
      margin: 0 auto;
      width: 100%;
    }

    .cbs-top-bar {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 13px 16px;
      gap: 12px;
    }

    .cbs-top-links {
      display: none;
    }

    @media(min-width: 1024px) {
      .cbs-top-links {
        display: flex;
        align-items: center;
        gap: 20px;
        font-size: 13px;
        font-weight: 700;
        color: #444;
        text-transform: uppercase;
        flex: 1;
        justify-content: flex-start;
        padding-left: 10%;
        margin-right: 40px;
      }
    }

    .cbs-main-nav {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding: 8px 16px 12px 16px;
      gap: 20px;
      border-top: 1px solid #e0e0e0;
    }

    @media(min-width: 1024px) {
      .cbs-main-nav {
        padding-left: 10%;
      }
    }

    .cbs-brand {
      font-size: 18px;
      font-weight: 800;
      color: #000;
      letter-spacing: -0.5px;
    }

    .cbs-nav-items {
      display: flex;
      align-items: center;
      gap: 16px;
      font-size: 14px;
      font-weight: 600;
      color: #333;
      flex-wrap: wrap;
    }

    .cbs-nav-items span.cbs-pipe {
      color: #ccc;
      font-size: 1.25rem;
      line-height: 1;
    }

    .cbs-nav-items a {
      text-decoration: none;
      color: #333;
    }

    .cbs-nav-items a:hover {
      color: #CC0000;
    }

    .cbs-search-container {
      flex: 1;
      display: flex;
      justify-content: flex-end;
    }

    .cbs-search-icon {
      font-size: 18px;
      color: #333;
      cursor: pointer;
    }

    @keyframes pulse-red {
      0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(204, 0, 0, 0.7);
      }

      70% {
        transform: scale(1);
        box-shadow: 0 0 0 6px rgba(204, 0, 0, 0);
      }

      100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(204, 0, 0, 0);
      }
    }

    .live-dot {
      color: #CC0000;
      font-size: 8px;
      margin-right: 4px;
      vertical-align: middle;
      border-radius: 50%;
      display: inline-block;
      animation: pulse-red 2s infinite;
    }

    .live-text {
      display: flex;
      align-items: center;
    }

    .cbs-logo-container {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }

    .cbs-ml-1 {
      margin-left: 4px;
    }

    .cbs-hide-mobile {
      display: none;
    }

    @media(min-width: 768px) {
      .cbs-hide-mobile {
        display: block;
      }
    }