/* ============================================================
   Seção "Tudo que o seu RH precisa, no NutriCard Multi"
   Vitrine do Figma (node 853:12434): onda Degrade Nutri de fundo,
   mão segurando notebook com o painel, 4 callouts flutuantes.
   Tipografia dos callouts escalada do desenho (16/12 → 18/14px).
   ============================================================ */

/* a mão encosta na borda de baixo da seção — sem respiro base aqui.
   O clip da onda é da SEÇÃO (não do palco): o topo do arco aparece
   inteiro, sem corte reto nas laterais. */
.pg-section.tr-secao {
    padding-bottom: 0;
    position: relative;
    overflow: hidden;
}

/* título no corpo do desenho (48px) p/ a 1ª linha caber inteira */
.tr-secao .pg-h2 {
    font-size: clamp(2.2rem, 4vw, 3rem);
}

.tr-palco {
    position: relative;
}

/* filha direta da seção; maior que qualquer viewport p/ as pontas nunca entrarem */
.tr-onda {
    position: absolute;
    left: 50%;
    bottom: 185px;
    transform: translateX(-50%);
    width: max(2600px, 180vw);
    height: 893px;
    pointer-events: none;
}

.tr-quadro {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding-inline: 24px;
    height: 610px;
}

.tr-notebook {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 955px;
    height: auto;
    display: block;
    pointer-events: none;
}

/* imagem nova é mais larga e encosta na zona dos callouts — eles ficam por cima */
.tr-callout {
    z-index: 1;
}

/* ---- callouts flutuantes ---- */
.tr-callout {
    position: absolute;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 270px;
}

.tr-callout img {
    width: 22px;
    height: 22px;
    flex: none;
    margin-top: 2px;
}

.tr-callout__title {
    font-family: var(--font-title);
    font-weight: 700;
    font-size: 1.125rem;
    letter-spacing: -0.01em;
    color: var(--blue-800);
    margin-bottom: 6px;
}

.tr-callout__desc {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--ink-800, #16284a);
}

.tr-callout--tl { left: 4%; top: 28px; }
.tr-callout--tr { right: 2%; top: 8px; }
.tr-callout--bl { left: 2%; top: 395px; max-width: 250px; }
.tr-callout--br { right: 0; top: 418px; }

/* ---- telas médias: palco encolhe junto ---- */
@media (max-width: 1100px) {
    .tr-quadro { height: 540px; }
    .tr-notebook { width: 760px; }
    .tr-onda { bottom: 160px; }
    .tr-callout { max-width: 210px; }
    .tr-callout--bl { top: 350px; }
    .tr-callout--br { top: 370px; }
}

/* ---- celular: callouts viram grade embaixo do notebook ---- */
@media (max-width: 760px) {
    /* no celular os callouts fecham a seção — respiro volta */
    .pg-section.tr-secao {
        padding-bottom: clamp(56px, 7vh, 92px);
    }

    .tr-quadro {
        height: auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 22px 18px;
        padding-bottom: 8px;
    }

    .tr-notebook {
        position: static;
        transform: none;
        grid-column: 1 / -1;
        width: min(440px, 88vw);
        margin: 0 auto;
    }

    .tr-onda {
        bottom: 38%;
        width: 1500px;
        height: 526px;
    }

    .tr-callout {
        position: static;
        max-width: none;
    }
}