/* Hidden Porto · testemunhos que vao passando
 *
 * Um de cada vez, com as citacoes empilhadas na MESMA celula de grelha: assim a
 * seccao toma a altura da citacao mais alta e nao salta de tamanho a cada
 * troca, que era o defeito obvio de uma solucao com display:none.
 */

.hp-testemunhos {
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
}

.hp-testemunhos__palco {
    display: grid;
    align-items: center;
}

.hp-testemunho {
    grid-area: 1 / 1;          /* todas na mesma celula */
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.45s ease;
}

.hp-testemunho.is-on {
    opacity: 1;
    visibility: visible;
}

.hp-testemunho__estrelas {
    font-size: 15px;
    letter-spacing: 4px;
    color: var(--hp-gold, #C9A063);
    margin-bottom: 18px;
}

.hp-testemunho__texto {
    font-family: var(--hp-font-display, Georgia, serif);
    font-size: 26px;
    font-style: italic;
    line-height: 1.45;
    color: var(--hp-ink, #1A1A1A);
    opacity: 0.92;
    margin: 0 0 20px;
    quotes: none;
}

.hp-testemunho__autor {
    font-family: var(--hp-font-body, "Inter", sans-serif);
    font-size: 11px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--hp-navy-deep, #1F3144);
}

.hp-testemunho__bandeira {
    font-size: 14px;
    letter-spacing: 0;
    margin-left: 6px;
    vertical-align: -1px;
}

/* --- navegacao --- */

.hp-testemunhos__navegacao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 30px;
}

.hp-testemunhos__seta {
    font: inherit;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(31, 49, 68, 0.28);
    background: transparent;
    color: var(--hp-navy-deep, #1F3144);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.hp-testemunhos__seta:hover {
    background: rgba(31, 49, 68, 0.07);
    border-color: rgba(31, 49, 68, 0.45);
}

.hp-testemunhos__pontos { display: flex; gap: 9px; }

.hp-testemunhos__ponto {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(31, 49, 68, 0.24);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.hp-testemunhos__ponto:hover { background: rgba(31, 49, 68, 0.45); }

.hp-testemunhos__ponto.is-on {
    background: var(--hp-gold, #C9A063);
    transform: scale(1.25);
}

.hp-testemunhos__seta:focus-visible,
.hp-testemunhos__ponto:focus-visible {
    outline: 2px solid var(--hp-gold, #C9A063);
    outline-offset: 3px;
}

@media (max-width: 720px) {
    .hp-testemunho__texto { font-size: 20px; line-height: 1.5; }
    .hp-testemunho__estrelas { margin-bottom: 14px; }
    .hp-testemunhos__navegacao { margin-top: 24px; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .hp-testemunho { transition: none; }
    .hp-testemunhos__ponto { transition: none; }
}