/* ═══════════════════════════════════════════════ BLOCO: TESTEMUNHOS — CARROSSEL HORIZONTAL Paleta: preto, branco, cinza Fonte: DM Serif Display + DM Sans @import no : https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=DM+Sans:wght@300;400;500&display=swap ═══════════════════════════════════════════════ */ #testemunhos { --t-preto: #0c0c0b; --t-branco: #f4f3ef; --t-cinza-1: #eceae5; --t-cinza-2: #d0cec8; --t-cinza-3: #9e9c97; --t-cinza-4: #4a4946; --t-fonte-titulo: 'DM Serif Display', Georgia, serif; --t-fonte-corpo: 'DM Sans', sans-serif; --t-ease: cubic-bezier(.4, 0, .2, 1); --t-card-gap: 24px; --t-duracao-transicao: 2520ms; } /* ── seção ── */ .teste-secao { background: var(--t-branco); padding: 96px 0 104px; overflow: hidden; position: relative; } /* ── caixa central ── */ .teste-caixa { max-width: 1200px; margin: 0 auto; padding: 0 48px; } /* ── cabeçalho ── */ .teste-cabecalho { margin-bottom: 56px; display: flex; flex-direction: column; gap: 20px; } .teste-rotulo { font-family: var(--t-fonte-corpo); font-size: 1rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--t-cinza-3); } .teste-cabecalho-linha { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .teste-titulo { font-family: var(--t-fonte-titulo); font-size: clamp(28px, 3.5vw, 44px); font-weight: 400; color: var(--t-preto); line-height: 1.1; } /* ── controles ── */ .teste-controles { display: flex; align-items: center; gap: 16px; flex-shrink: 0; } .teste-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--t-cinza-4); background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s, border-color .2s; flex-shrink: 0; } .teste-btn:hover { background: var(--t-branco); border-color: var(--t-branco); } .teste-btn:hover svg { stroke: var(--t-preto); } .teste-btn svg { width: 18px; height: 18px; stroke: var(--t-cinza-3); transition: stroke .2s; } /* paginação pontos */ .teste-paginacao { display: flex; gap: 6px; align-items: center; } .teste-ponto { width: 6px; height: 6px; border-radius: 50%; background: var(--t-cinza-4); border: none; padding: 0; cursor: pointer; transition: background .25s, transform .25s; } .teste-ponto.ativo { background: var(--t-branco); transform: scale(1.3); } /* ── trilho externo (overflow hidden) ── */ .teste-trilho-externo { overflow: hidden; position: relative; } /* gradientes laterais */ .teste-trilho-externo::before, .teste-trilho-externo::after { content: ''; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; pointer-events: none; } .teste-trilho-externo::before { left: 0; background: linear-gradient(90deg, var(--t-preto), transparent); } .teste-trilho-externo::after { right: 0; background: linear-gradient(270deg, var(--t-preto), transparent); } /* ── trilho (flex dos cards) ── */ .teste-trilho { display: flex; gap: var(--t-card-gap); transition: transform var(--t-duracao-transicao) var(--t-ease); will-change: transform; align-items: stretch; } /* ── card ── */ .teste-card { flex: 0 0 calc((100% - var(--t-card-gap) * 2) / 3); min-width: 0; background-image: radial-gradient(#373735,#171414); border: 5px solid #222220; border-radius: 20px; padding: 36px 32px 32px; display: flex; flex-direction: column; gap: 18px; margin: 0; position: relative; transition: border-color .3s, transform .3s; } .teste-card:hover { border-color: var(--t-cinza-4); transform: translateY(-4px); } /* card ativo (central) */ .teste-card.destaque { border-color: #383835; } /* ── aspas ── */ .teste-aspas { font-family: var(--t-fonte-titulo); font-size: 56px; color: #5a5757; line-height: .8; user-select: none; } /* ── texto ── */ .teste-texto { font-family: var(--t-fonte-corpo); font-size: 1rem; font-weight: 300; color: var(--t-cinza-3); line-height: 1.7; flex: 1; quotes: none; } /* ── estrelas ── */ .teste-estrelas { display: flex; gap: 3px; } .teste-estrelas span { width: 14px; height: 20px; position: relative; } .teste-estrelas span::before { content: '★'; font-size: 20px; color: #fff000; position: absolute; } /* ── autor ── */ .teste-autor { display: flex; align-items: center; gap: 14px; border-top: 1px solid #222220; padding-top: 20px; margin-top: 4px; } .teste-avatar { width: 40px; height: 40px; border-radius: 50%; background: #222220; border: 1px solid #2e2e2b; display: flex; align-items: center; justify-content: center; font-family: var(--t-fonte-corpo); font-size: 1rem; font-weight: 500; color: var(--t-cinza-3); letter-spacing: .04em; flex-shrink: 0; } .teste-nome { display: block; font-family: var(--t-fonte-corpo); font-size: 1.1rem; font-weight: 500; color: var(--t-branco); margin-bottom: 3px; } .teste-cargo { display: block; font-family: var(--t-fonte-corpo); font-size: 1rem; font-weight: 300; color: var(--t-cinza-2); } /* ── barra de progresso ── */ .teste-barra-progresso { margin-top: 36px; height: 1px; background: #222220; overflow: hidden; position: relative; } .teste-barra-preenchimento { height: 100%; background: var(--t-cinza-3); width: 0%; transition: width linear; } /* ── responsivo ── */ @media (max-width: 900px) { .teste-card { flex: 0 0 calc((100% - var(--t-card-gap)) / 2); } } @media (max-width: 580px) { .teste-caixa { padding: 0 20px; } .teste-card { flex: 0 0 100%; } .teste-trilho-externo::before, .teste-trilho-externo::after { display: none; } }