/* Banda de abertura, missão, pilares, produto e histórias. */

.qs-banda {
    position: relative;
    isolation: isolate;
    display: grid;
    align-items: center;
    justify-items: start;
    min-height: clamp(300px, 32vw, 460px);
    padding-block: clamp(44px, 5.4vw, 84px);
    padding-inline: max(var(--gutter), calc((100% - 1180px) / 2));
    overflow: hidden;
}

.qs-banda__foto {
    position: absolute;
    z-index: -2;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 40%;
}

.qs-banda::after {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(34, 38, 28, 0.82) 0%,
        rgba(34, 38, 28, 0.76) 30%,
        rgba(34, 38, 28, 0.40) 50%,
        rgba(34, 38, 28, 0.06) 70%,
        rgba(34, 38, 28, 0.00) 80%);
}

.qs-banda__trilha {
    position: absolute;
    top: clamp(16px, 1.8vw, 26px);
    left: max(var(--gutter), calc((100% - 1180px) / 2));
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: clamp(12.5px, 0.95vw, 14px);
    color: rgba(245, 241, 236, 0.72);
}

.qs-banda__trilha a { text-decoration: underline; text-underline-offset: 3px; }
.qs-banda__trilha a:hover { color: var(--branco); }
.qs-banda__inner { max-width: min(560px, 48%); }

.qs-banda__titulo {
    font-family: 'Baloo 2', sans-serif;
    font-weight: 600;
    font-size: clamp(30px, 3.6vw, 52px);
    line-height: 1.1;
    letter-spacing: 0.005em;
    color: var(--offwhite);
}

.qs-banda__apoio {
    margin-top: clamp(10px, 1.1vw, 16px);
    font-size: clamp(15px, 1.15vw, 17.5px);
    line-height: 1.5;
    color: rgba(245, 241, 236, 0.86);
}

/* ---------- quem somos ---------- */
/* Sem padding vertical na seção: a foto precisa alcançar as duas bordas.
   O respiro de cima e de baixo vive na coluna de texto. */
.qs-missao {
    padding-block: 0;
    padding-left: max(var(--gutter), calc((100% - 1180px) / 2));
    background: var(--offwhite);
}

.qs-missao__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr);
    align-items: stretch;
    gap: clamp(28px, 4vw, 70px);
}

.qs-missao__texto { padding-block: var(--secao-y); align-self: center; }

.qs-missao__titulo {
    padding-bottom: 0.5em;
    font-family: 'Baloo 2', sans-serif;
    font-weight: 600;
    font-size: clamp(26px, 2.9vw, 42px);
    line-height: 1.12;
    letter-spacing: 0.005em;
    color: var(--pinho);
}

.qs-missao__texto p {
    margin-top: clamp(12px, 1.3vw, 18px);
    font-size: clamp(14.5px, 1.08vw, 16.5px);
    line-height: 1.7;
    color: rgba(46, 50, 39, 0.8);
}

.qs-missao__texto b { font-weight: 800; color: var(--ink); }

.qs-missao__fecho {
    font-weight: 800;
    color: var(--pinho) !important;
}

.qs-missao__figura { position: relative; }

/* absoluta para preencher a altura da seção sem influir nela: quem manda na
   altura é o texto, e a foto se estica para acompanhar. */
.qs-missao__figura img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 35%;
}

/* ---------- pilares ---------- */
.qs-pilares {
    padding: var(--secao-y) var(--gutter);
    background: var(--branco);
}

.qs-pilares__inner { max-width: 1180px; margin: 0 auto; text-align: center; }

.qs-pilares__titulo {
    padding-bottom: 0.5em;
    font-family: 'Baloo 2', sans-serif;
    font-weight: 600;
    font-size: clamp(26px, 2.9vw, 42px);
    line-height: 1.12;
    letter-spacing: 0.005em;
    color: var(--pinho);
}

.qs-pilares__apoio {
    max-width: 60ch;
    margin: 0 auto;
    font-size: clamp(15px, 1.12vw, 17px);
    line-height: 1.6;
    color: rgba(46, 50, 39, 0.75);
}

.qs-pilares__lista {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(18px, 2.2vw, 34px);
    margin-top: clamp(30px, 3.4vw, 50px);
    text-align: left;
}

.qs-pilar {
    padding: clamp(24px, 2.6vw, 36px);
    border-radius: clamp(14px, 1.4vw, 20px);
    background: var(--offwhite);
}

.qs-pilar__num {
    font-family: 'Baloo 2', sans-serif;
    font-weight: 600;
    font-size: clamp(26px, 2.6vw, 38px);
    line-height: 1;
    color: var(--terra-claro);
}

.qs-pilar__nome {
    margin-top: clamp(10px, 1.1vw, 15px);
    font-size: clamp(16.5px, 1.3vw, 19px);
    font-weight: 800;
    line-height: 1.3;
    color: var(--pinho);
}

.qs-pilar__texto {
    margin-top: clamp(7px, 0.8vw, 11px);
    font-size: clamp(14px, 1.05vw, 15.5px);
    line-height: 1.6;
    color: rgba(46, 50, 39, 0.78);
}

/* ---------- veterinário ----------
   Faixa cheia com o retrato sangrando na borda esquerda, como na referência:
   sem título de seção, a citação é o conteúdo. */
.qs-vet {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(24px, 4vw, 70px);
    min-height: clamp(320px, 34vw, 470px);
    padding-block: 0;
    padding-right: max(var(--gutter), calc((100% - 1180px) / 2));
    background: var(--offwhite);
}

/* O retrato é mais alto que a faixa e fica ancorado na base: sobra por cima,
   sobre a seção branca anterior, e é a borda de baixo que o corta. */
.qs-vet__retrato {
    position: relative;
    align-self: stretch;
}

.qs-vet__retrato img {
    position: absolute;
    right: clamp(0px, 2vw, 40px);
    bottom: 0;
    width: auto;
    max-width: none;
    height: calc(100% + clamp(30px, 4.4vw, 82px));
}

.qs-vet__texto { max-width: 52ch; padding-block: var(--secao-y); }

.qs-vet__aspas {
    display: block;
    font-family: 'Baloo 2', sans-serif;
    font-weight: 800;
    font-size: clamp(46px, 4.6vw, 72px);
    line-height: 0.6;
    color: var(--terra-claro);
}

.qs-vet__fala {
    margin-top: clamp(12px, 1.4vw, 20px);
    font-size: clamp(18px, 1.7vw, 25px);
    font-weight: 800;
    line-height: 1.4;
    color: var(--ink);
    text-wrap: balance;
}

.qs-vet__nome {
    margin-top: clamp(16px, 1.8vw, 26px);
    font-size: clamp(14px, 1.08vw, 16px);
    font-weight: 800;
    color: var(--pinho);
}

.qs-vet__papel {
    margin-top: 4px;
    font-size: clamp(12.5px, 0.98vw, 14px);
    line-height: 1.5;
    color: rgba(46, 50, 39, 0.6);
}

/* ---------- selos de confiança ----------
   Especificação do manual: círculo com texto curvo, ícone de linha no centro,
   traço fino. O texto curvo é <textPath>, não imagem — escala sem perder nitidez. */
.qs-selos {
    padding: var(--secao-y) var(--gutter);
    background: var(--branco);
    text-align: center;
}

.qs-selos__inner { max-width: 1180px; margin: 0 auto; }

.qs-selos__titulo {
    padding-bottom: 0.5em;
    font-family: 'Baloo 2', sans-serif;
    font-weight: 600;
    font-size: clamp(26px, 2.9vw, 42px);
    line-height: 1.12;
    letter-spacing: 0.005em;
    color: var(--pinho);
}

.qs-selos__apoio {
    max-width: 62ch;
    margin: 0 auto;
    font-size: clamp(15px, 1.12vw, 17px);
    line-height: 1.65;
    color: rgba(46, 50, 39, 0.75);
}

.qs-selos__lista {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(20px, 2.4vw, 38px);
    margin-top: clamp(30px, 3.6vw, 54px);
}

.selo { display: grid; justify-items: center; }
.selo--sage { color: var(--sage-dark); }
.selo--terra { color: var(--terra); }

.selo__marca {
    width: clamp(112px, 11vw, 152px);
    height: auto;
}

/* 6.6px no viewBox de 120 dá ~8px renderizados no tamanho de uso */
.selo__texto {
    font-family: 'Nunito', sans-serif;
    font-size: 6.6px;
    font-weight: 800;
    letter-spacing: 1.15px;
}

.selo__apoio {
    margin-top: clamp(11px, 1.2vw, 16px);
    max-width: 24ch;
    font-size: clamp(13px, 0.98vw, 14.5px);
    line-height: 1.5;
    color: rgba(46, 50, 39, 0.7);
}

/* ---------- produto ---------- */
.qs-produto {
    padding: var(--secao-y) var(--gutter);
    background: var(--offwhite);
}

.qs-produto__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(28px, 4vw, 70px);
    max-width: 1180px;
    margin: 0 auto;
}

.qs-produto__figura img {
    width: 100%;
    height: auto;
    border-radius: clamp(16px, 1.8vw, 26px);
    display: block;
}

.qs-produto__eyebrow {
    font-size: clamp(11.5px, 0.88vw, 13px);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sage-dark);
}

.qs-produto__titulo {
    margin-top: clamp(6px, 0.7vw, 10px);
    font-family: 'Baloo 2', sans-serif;
    font-weight: 600;
    font-size: clamp(30px, 3.2vw, 46px);
    line-height: 1.1;
    letter-spacing: 0.005em;
    color: var(--pinho);
}

.qs-produto__apoio {
    margin-top: clamp(12px, 1.3vw, 18px);
    font-size: clamp(15px, 1.12vw, 17px);
    line-height: 1.6;
    color: rgba(46, 50, 39, 0.8);
}

/* O rótulo aqui é maior que o dos cartões da home, e a largura fixa do
   .btn-card o quebrava em duas linhas. Aqui o botão acompanha o texto. */
.qs-produto__cta {
    width: auto;
    margin-top: clamp(20px, 2.2vw, 30px);
    padding-right: clamp(9px, 0.8vw, 12px);
    justify-self: start;
}

.qs-produto__cta .btn-card__label { flex: none; white-space: nowrap; }

/* ---------- histórias ---------- */
.qs-historias {
    padding: var(--secao-y) var(--gutter);
    background: var(--branco);
    text-align: center;
}

.qs-historias__inner { max-width: 820px; margin: 0 auto; }

.qs-historias__titulo {
    padding-bottom: 0.5em;
    font-family: 'Baloo 2', sans-serif;
    font-weight: 600;
    font-size: clamp(26px, 2.9vw, 42px);
    line-height: 1.12;
    letter-spacing: 0.005em;
    color: var(--pinho);
}

.qs-historias__apoio {
    max-width: 56ch;
    margin: 0 auto;
    font-size: clamp(15px, 1.12vw, 17px);
    line-height: 1.6;
    color: rgba(46, 50, 39, 0.75);
}

.qs-historias__cena {
    max-width: 520px;
    margin: clamp(26px, 3vw, 42px) auto 0;
}

.qs-historias__video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: clamp(14px, 1.4vw, 20px);
    background: var(--areia);
}

.qs-historias__legenda { margin-top: clamp(14px, 1.5vw, 20px); }

.qs-historias__fala {
    display: block;
    font-size: clamp(15px, 1.15vw, 17.5px);
    line-height: 1.55;
    color: var(--ink);
}

.qs-historias__assina {
    display: block;
    margin-top: clamp(7px, 0.8vw, 11px);
    font-size: clamp(13px, 1vw, 14.5px);
    font-weight: 800;
    color: var(--sage-dark);
}

/* A onda do rodapé acompanha a cor da seção acima dela. */
.pagina-quem-somos .rodape .onda { color: var(--branco); }