/* =======================================================================
   LAPTOP.CSS
   Este arquivo corrige o style.css para viewports médias (ex: 1366px a 1600px),
   impedindo que os elementos "estourem" a tela.
   ======================================================================= */

/* * Breakpoint principal para laptops (LARGURA).
 * Corrige estouros de layout em telas mais estreitas que o 1080p.
 */
@media (min-width: 769px) and (max-width: 1600px) {
  /* =========================================================
     AJUSTES GLOBAIS
     ========================================================= */

  :root {
    /* * Reduz o espaçamento lateral da página (gutter).
     * O original (8vw, max 160px) é muito grande para 1366px.
     */
    --page-gutter: clamp(24px, 5vw, 80px);
  }

  /* =========================================================
     TOPBAR
     ========================================================= */

  .topbar-inner {
    /* Dá um pouco mais de espaço para o menu */
    width: min(100%, 94vw);
  }

  .nav .menu {
    /* Reduz o espaço entre os links do menu */
    gap: clamp(16px, 1.8vw, 24px);
  }

  /* =========================================================
     SECTION 1: CONSULTORIA FINANCEIRA
     ========================================================= */

  /* Reduz a coluna da esquerda para dar mais espaço ao conteúdo da direita */
  #sec-1 .cf-wrap,
  #sec-1 .cf-grid {
    grid-template-columns: clamp(300px, 30vw, 400px) 1fr;
    column-gap: clamp(24px, 4vw, 48px); /* Reduz o gap entre colunas */
  }

  /* Reduz o padding interno do painel esquerdo */
  #sec-1 .cf-panel {
    padding-right: clamp(40px, 6vw, 80px);
  }

  /* Reduz o padding que "empurra" o conteúdo da direita */
  #sec-1 .cf-right {
    padding-left: 32px;
  }

  /* =========================================================
     SECTION 2: TERCEIRO SETOR
     ========================================================= */

  /* ZERA os "nudges" (empurrões) que causam overflow */
  #sec-2 {
    --ts-left-nudge: 0px;
    --ts-panel-nudge: 0px;
  }

  #sec-2 .ts-left {
    transform: none; /* Remove o translateX(120px) */
    padding-right: 32px; /* Adiciona respiro para não sobrepor o título */
  }

  #sec-2 .ts-panel .ts-title {
    transform: none; /* Remove o translateX(-60px) */
  }

  /* FIX: Impede o texto de "estourar" para a coluna da direita */
  #sec-2 .ts-lead {
    max-width: 100%; /* O original era 880px, o que era muito largo */
  }

  /* Ajusta o padding que foi compensado pelo nudge */
  #sec-2 .ts-panel {
    padding-left: clamp(40px, 6vw, 80px);
  }

  /* Ajusta o grid (espelho da Sec-1) */
  #sec-2 .ts-grid {
    grid-template-columns: 1fr clamp(300px, 30vw, 400px);
    column-gap: clamp(24px, 4vw, 48px); /* Reduz o gap */
  }

  /* =========================================================
     SECTION 3: CURSOS E PALESTRAS (O MAIOR CULPADO)
     ========================================================= */

  /* * ZERA todos os 'transform: translateX()' que empurram
   * o conteúdo para fora da tela.
   * O !important garante que ele sobreponha as regras do style.css
   */
  #sec-3 .cp-row--a .cp-col--text,
  #sec-3 .cp-row--b .cp-col--text,
  #sec-3 .cp-row--a .cp-col--video,
  #sec-3 .cp-row--b2 .cp-col--text2,
  #sec-3 .cp-row--a2 .cp-col--video2 {
    transform: none !important;
  }

  /* Zera margens que também empurram o conteúdo */
  #sec-3 .cp-col--text,
  #sec-3 .cp-col--text2 {
    margin-left: 0;
  }

  /* * Reduz a largura mínima da coluna de texto para 
   * caber confortavelmente em 1366px.
   */
  #sec-3 .cp-row,
  #sec-3 .cp-row--a {
    grid-template-columns: 1fr minmax(360px, 460px);
    column-gap: clamp(24px, 4vw, 48px);
  }

  #sec-3 .cp-row--b,
  #sec-3 .cp-row--b2 {
    grid-template-columns: 1fr minmax(360px, 460px);
    column-gap: clamp(24px, 4vw, 48px);
  }

  /* * Garante que o vídeo ocupe 100% da sua coluna 
   * e não o valor de '60vw' do style.css.
   */
  #sec-3 .cp-video,
  #sec-3 .cp-video2 {
    width: 100%;
    max-width: 100%;
  }

  /* Adiciona um respiro interno que foi perdido ao remover os nudges */
  #sec-3 .cp-row,
  #sec-3 .cp-row2 {
    padding-inline: clamp(16px, 2vw, 24px);
  }

  #sec-3 .cp-list--cols-2 {
    column-gap: clamp(24px, 3vw, 32px); /* Gap menor para telas de laptop */
  }
}
/* Fim do breakpoint de LARGURA */


/* =========================================================
   FIX: AJUSTE PARA TELAS BAIXAS (ex: 1366x768)
   Encolhe o conteúdo para caber na altura. (VERSÃO 2 - MAIS FINA)
   ========================================================= */

/* Ativa em qualquer tela com 800px de altura ou MENOS */
@media (max-height: 800px) {

  /* 1. Define fontes AINDA MENORES, apenas para sec-1 e sec-2 */
  #sec-1, #sec-2 {
    /* Baseado nas suas variáveis originais */
    --f-h1:   clamp(30px, 4.2vw, 48px); /* Era 36-64px */
    --f-h2:   1.0rem;                  /* Era 1.18rem */
    --f-h3:   0.88rem;                 /* Era 1.00rem */
    --f-lead: 0.82rem;                 /* Era 0.92rem */
    --f-body: 0.78rem;                 /* Era 0.88rem */
    --f-btn:  0.8rem;                  /* Era 0.92rem */
  }

  /* 2. Reduz o preenchimento do painel (para encolher a altura) */
  #sec-1 .cf-panel,
  #sec-2 .ts-panel {
    padding-block: 16px; /* Era clamp(28px, 5.5vw, 56px) */
  }

  /* 3. Reduz os espaçamentos da coluna da direita */
  #sec-1 .cf-right,
  #sec-2 .ts-left {
    row-gap: clamp(12px, 1.5vh, 16px); /* Era clamp(28px, 3.6vw, 40px) */
  }

  /* 4. Reduz margens do lead text e "puxa" o card para cima */
  #sec-1 .cf-lead,
  #sec-2 .ts-lead {
    margin-top: 0;     /* Remove o -20px do original */
    line-height: 1.4;  /* Reduz altura da linha */
    margin-bottom: -12px; /* NOVO: Puxa o bloco de baixo para cima */
  }

  /* 5. Reduz espaçamento e margens dos cards */
  #sec-1 .cf-card,
  #sec-2 .ts-block {
    row-gap: 6px;      /* Era 10px */
    margin-top: 0;     /* Remove o -40px do original */
    padding-block: 0;
  }
  #sec-1 .cf-card-title,
  #sec-2 .ts-block-title {
    margin-top: 16px;  /* Era 40px */
  }
  #sec-1 .cf-subtitle,
  #sec-2 .ts-subtitle {
    margin-block: 2px; /* Era 4px 0 8px 0 */
    padding-top: 0;    /* Era 20px */
    padding-left: 16px;/* Era 20px */
  }

  /* 6. Reduz espaçamento da lista */
  #sec-1 .cf-card-body,
  #sec-2 .ts-list {
    row-gap: 4px;        /* Era 10px */
    padding-left: 16px;  /* Era 40px */
  }
  #sec-1 .cf-card-body li,
  #sec-2 .ts-list li {
    margin-bottom: 0.2rem; /* Era .48rem */
  }
  #sec-1 .cf-card-body {
    margin-bottom: 10px; /* Era ~24px */
  }

  /* 7. Reduz o botão */
  #sec-1 .cf-card .btn,
  #sec-2 .ts-block .btn {
    margin-top: 6px;     /* Era clamp(12px, 1.6vw, 18px) */
    padding: 8px 14px;   /* Era 12px 22px */
  }
}
/* Fim do breakpoint de ALTURA */