/* ==========================================================================
   ESPECIALISTA — o veterinário que assina a marca (redesenho 2026-09-21)

   Duas colunas sem sobreposição: texto à esquerda, retrato num painel areia à
   direita. É o eco curto da seção "Dr. Douglas" da
   página do produto — mesmo eyebrow, mesmo nome como título. Saíram o título
   genérico, a frase de apoio, o CRMV (sem número real) e o cartão sobreposto.
   ========================================================================== */

/* Vizinhas brancas dos dois lados: sem folga de onda. O pé da oferta já traz
   --secao-y; o topo soma outro --secao-y (total 2x). Embaixo, --secao-y-bloco
   + a curta do WhatsApp dá o mesmo 2x. Mesma escala da garantia. */
.especialista {
    padding: var(--secao-y) var(--gutter) var(--secao-y-bloco);
    background: var(--branco);
}

.especialista__inner {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(32px, 5vw, 88px);
    max-width: 1080px;
    margin: 0 auto;
}

/* ---------- retrato ---------- */
/* Recorte com fundo transparente: o painel dá a caixa. A figura apoia na base
   para o retrato "sentar" nela — por isso place-items: end. */
.especialista__retrato {
    display: grid;
    place-items: end center;
    width: clamp(240px, 30vw, 400px);
    aspect-ratio: 4 / 5;
    border-radius: clamp(20px, 2vw, 30px);
    background: linear-gradient(180deg, var(--areia-veu), var(--areia));
    overflow: hidden;
}

.especialista__retrato img {
    display: block;
    width: 92%;
    height: auto;
}

/* ---------- texto ---------- */
.especialista__texto {
    text-align: left;
    max-width: 30em;
}

/* Eyebrow igual ao da PDP: caixa alta espaçada em terracota. */
.especialista__eyebrow {
    font-size: clamp(11px, 0.85vw, 13px);
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--terra);
}

.especialista__titulo {
    margin-top: clamp(10px, 1vw, 14px);
    font-family: 'Baloo 2', sans-serif;
    font-weight: 600;
    font-size: clamp(30px, 3.4vw, 48px);
    line-height: 1.08;
    letter-spacing: 0.005em;
    color: var(--ink);
}

.especialista__destaque {
    font-weight: 800;
    color: var(--sage);
}

.especialista__papel {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: clamp(8px, 0.8vw, 12px);
    font-size: clamp(14px, 1.1vw, 16px);
    font-weight: 700;
    color: rgba(46, 50, 39, 0.66);
}

.especialista__papel svg {
    width: clamp(16px, 1.2vw, 18px);
    height: clamp(16px, 1.2vw, 18px);
    flex: none;
    color: var(--sage);
}

/* A citação é o corpo da seção: entra com um filete terracota à esquerda,
   como o título da garantia, e sem aspas tipográficas — o filete já diz que
   é fala. */
.especialista__fala {
    margin: clamp(22px, 2.4vw, 34px) 0 0;
    padding-left: clamp(16px, 1.6vw, 24px);
    border-left: 4px solid var(--terra-claro);
}

.especialista__fala p {
    font-size: clamp(18px, 1.6vw, 24px);
    font-weight: 600;
    /* itálico + aspas: é fala, não texto de seção */
    font-style: italic;
    line-height: 1.4;
    color: var(--ink);
    text-wrap: pretty;
}