/* Página de produto (template single-post 225 do original). */

@layer pages {
  /* ---------- Sobre o produto ---------- */
  .produto-sobre {
    display: flex;
    align-items: center;
    gap: 80px;
    margin-block: 100px 120px;
  }

  .produto-sobre__texto {
    display: flex;
    flex: 1 1 50%;
    flex-direction: column;
    gap: 8px;
  }

  .produto-sobre__texto .texto-rico {
    margin-top: 12px;
  }

  .produto-sobre__imagem {
    flex: 0 0 calc(50% - 40px);
    width: calc(50% - 40px);
    border-radius: var(--raio-lg);
  }

  /* ---------- Coberturas + CTA lateral ---------- */
  .produto-detalhes {
    display: flex;
    align-items: flex-start;
  }

  .produto-coberturas {
    display: flex;
    flex: 0 1 60%;
    flex-direction: column;
    gap: 8px;
  }

  .lista-coberturas {
    display: flex;
    flex-direction: column;
  }

  .cobertura {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-top: 40px;
  }

  .cobertura__icone {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
  }

  /* Medido no original a 1440px: 42px do título da seção ao primeiro item, 48px entre itens,
     e o ícone 8px acima da primeira linha do título (no mobile o espaçamento já confere). */
  @media (min-width: 1025px) {
    .cobertura {
      margin-top: 48px;
    }

    .cobertura:first-child {
      margin-top: 42px;
    }

    .cobertura__icone {
      margin-top: -8px;
    }
  }

  .cobertura__titulo {
    margin-bottom: 8px;
    font-size: var(--h4);
    line-height: var(--h4-lh);
  }

  .produto-publico {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 60px; /* medido no original a 1440px */
    padding: 40px;
    border-radius: var(--raio-lg);
    background: var(--cor-primaria);
  }

  .produto-publico__rotulo {
    font-size: 20px;
    font-weight: var(--peso-negrito);
    color: var(--cor-secundaria);
  }

  .produto-publico__texto {
    font-family: var(--fonte-titulo);
    font-size: var(--h5);
    font-weight: var(--peso-negrito);
    line-height: var(--h5-lh);
    color: var(--cor-branco);
  }

  .produto-regulatorio {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 60px; /* medido no original a 1440px */
    padding: 40px;
    border-radius: var(--raio-lg);
    background: var(--cor-fundo-claro);
  }

  .produto-regulatorio h3 {
    font-size: var(--h4);
    line-height: var(--h4-lh);
  }

  /* Parágrafos do editor de texto do original: 14px abaixo de cada um (30px entre blocos). */
  .produto-regulatorio p {
    margin-bottom: 14px;
  }

  .produto-regulatorio__links {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }

  .produto-regulatorio__links a {
    color: var(--cor-secundaria);
    font-weight: var(--peso-negrito);
    text-decoration: none;
  }

  .produto-regulatorio__links a:hover,
  .produto-regulatorio__links a:focus-visible {
    color: var(--cor-primaria);
    text-decoration: underline;
  }

  .produto-cta {
    display: flex;
    /* Como no original: 60% + 50% encolhem juntos (coberturas ~700px, caixa ~460px a 1440px). */
    flex: 0 1 50%;
    justify-content: flex-end;
    padding-left: 120px;
  }

  .produto-cta__caixa {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    padding: 40px;
    border-radius: var(--raio-lg);
    background: var(--cor-fundo-claro);
  }

  /* Título no tamanho h3 do kit (34/40), como no original. */
  .produto-cta__caixa h3 {
    font-size: var(--h3);
    line-height: var(--h3-lh);
  }

  /* Original: 30px entre o texto e os botões e 20px entre eles. */
  .produto-cta__botoes {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 14px;
  }

  .produto-cta__btn {
    border-color: var(--cor-secundaria);
  }

  .produto-cta__btn:hover,
  .produto-cta__btn:focus-visible {
    border-color: var(--cor-primaria);
  }

  .produto-cta__btn--contorno {
    background: transparent;
    border-color: var(--cor-primaria);
    color: var(--cor-primaria);
  }

  .produto-cta__btn--contorno:hover,
  .produto-cta__btn--contorno:focus-visible {
    background: var(--cor-primaria);
    color: var(--cor-branco);
  }

  /* ---------- Relacionados ---------- */
  .produto-relacionados {
    display: flex;
    flex-direction: column;
    gap: 64px;
    margin-block: 121px 120px;
  }

  .produto-relacionados .secao__cabecalho {
    margin-bottom: 0;
  }

  /* ---------- Breakpoints ---------- */
  @media (max-width: 1024px) {
    .produto-sobre {
      flex-direction: column;
      align-items: flex-start;
      gap: 80px; /* mesmo espaço do desktop, medido no original a 390px */
    }

    .produto-sobre__imagem {
      flex-basis: auto;
      width: 60%;
    }

    .produto-detalhes {
      flex-direction: column;
    }

    .produto-cta {
      justify-content: flex-start;
      width: 100%;
      margin-top: 68px;
      padding-left: 0;
    }
  }

  @media (max-width: 767px) {
    .produto-sobre__imagem {
      width: 100%;
    }

    .produto-publico,
    .produto-regulatorio,
    .produto-cta__caixa {
      padding: 24px;
    }

    .produto-regulatorio__links {
      flex-direction: column;
      gap: 23px; /* medido no original a 390px */
    }

    .produto-relacionados {
      margin-block: 80px 100px;
    }
  }
}