/* ==========================================================================
   TRATAMENTOS — DESKTOP, OPÇÃO 1: "Painel único"

   O bloco da direita vira um painel branco fechado, do mesmo tamanho exato do
   bloco da esquerda (mesma largura e mesma altura). Dentro dele: um título
   curto, a lista dos 12 tratamentos com divisórias finas e a chamada fixa no
   rodapé do painel. É a leitura mais próxima do site atual, só que alinhada.

   Só afeta telas a partir de 901px. No mobile nada muda.
   ========================================================================== */

@media (min-width: 901px) {

  /* ---- Duas colunas exatamente iguais ---- */
  .sec-tratamentos .linhas {
    gap: 50px;
    align-items: stretch;
  }

  .col-tratam-txt,
  .col-tratam-acc {
    flex: 1 1 0;
    max-width: none;
    padding: 0;
  }

  /* a coluna da direita não define a altura da linha: quem manda é a esquerda */
  .col-tratam-acc { position: relative; }

  /* ---- Bloco da esquerda ---- */
  .img-tratam {
    width: 100%;
    height: 433px;
    object-fit: cover;
    border-radius: 14px;
    margin-bottom: 26px;
  }

  .col-tratam-txt p { margin-bottom: 16px; }
  .col-tratam-txt p:last-child { margin-bottom: 0; }

  /* ---- Bloco da direita: painel de mesma altura ---- */
  .col-tratam-acc > .acordeao {
    position: absolute;
    inset: 0;
    bottom: 79px;                 /* espaço da chamada + respiro */
    display: flex;
    flex-direction: column;
    background: var(--branco);
    border: 1px solid #e2ebf7;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(16, 52, 96, .10);
  }

  /* título do painel */
  .col-tratam-acc > .acordeao::before {
    content: 'Escolha um tratamento';
    display: block;
    flex: none;
    padding: 20px 24px 16px;
    font-family: var(--f-corpo);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--azul);
    border-bottom: 1px solid #eef3fa;
  }

  .acordeao-item {
    margin: 0;
    border-bottom: 1px solid #f0f4fa;
  }
  .acordeao-item:last-child { border-bottom: 0; }

  .acordeao-botao {
    background: var(--branco);
    border: 0;
    padding: 14px 24px;
    font-size: 17px;
    line-height: 24px;
    color: #10243c;
    transition: background-color .18s, color .18s;
  }

  .acordeao-botao:hover { background: #f6faff; }

  .acordeao-botao[aria-expanded='true'] {
    background: #f2f8ff;
    color: var(--azul);
  }

  .acordeao-icone {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #eaf2fd;
    color: var(--azul);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    line-height: 1;
  }

  .acordeao-botao[aria-expanded='true'] .acordeao-icone {
    background: var(--azul);
    color: var(--branco);
  }

  .acordeao-painel {
    background: #f2f8ff;
    padding: 0 24px 20px;
  }

  .acordeao-painel p {
    font-size: 16px;
    line-height: 25px;
    color: #33475e;
  }

  /* a lista rola dentro do painel se um item aberto passar da altura */
  .col-tratam-acc > .acordeao {
    overflow-y: auto;
    scrollbar-width: thin;
  }

  /* ---- Chamada no rodapé do bloco ---- */
  .btn-solido-wrap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
  }

  .btn-solido {
    border-radius: 12px;
    padding: 19px 0;
    font-size: 17px;
    box-shadow: 0 6px 18px rgba(59, 142, 237, .28);
  }
}