/* ============================================================
   Páginas de serviço · componentes reaproveitáveis (namespace slsv)

   Nasceu com /desenvolvimento-de-aplicativos, que é a página modelo.
   A réplica para outro serviço troca texto e imagem e usa estes mesmos
   componentes. Nada aqui depende do nome do serviço.

   Registro das raízes: docs/css-namespaces.md. Direção visual:
   docs/design-direction.md. O style.css do site é compartilhado e não é
   editado por página; o que ele já resolve é reaproveitado (tg-container,
   tg-section-head, tg-button, tg-swlink, tg-swdor, tg-downsell, tg-faq,
   tg-swfinal, tg-swprova-stats, tg-swquote, tg-band-light).

   Tokens herdados de css/style.css: --dark --light --bg --soft --accent
   --accent-deep --font-display --font-body --frame --t-md.
   Contraste medido na cor composta: ver docs/design-direction.md.
   ============================================================ */

/* ------------------------------------------------------------
   slsv-page · escopo da página
   ------------------------------------------------------------ */
.slsv-page {
    --slsv-label-dark: #4eb6ea;   /* rótulo pequeno em #111417: 8,52:1 */
    --slsv-label-light: var(--accent-deep); /* em #f4f4f4: 6,72:1 */
}

/* o CTA do formulário é <button>: cursor e fonte que o <a> ganhava de graça */
.slsv-page button.tg-button {
    cursor: pointer;
    font-family: var(--font-display);
    -webkit-appearance: none;
    appearance: none;
}

/* rótulos pequenos em azul: #1283c4 reprova em #111417 (4,46) e em #f4f4f4 (3,77) */
.slsv-page .slsv-band--deep .tg-section-label,
.slsv-page .tg-swdor .tg-section-label,
.slsv-page .tg-swdor-num,
.slsv-page .tg-swdor-fix-label,
.slsv-page .tg-swfinal-label,
.slsv-page .tg-swfinal-prompt i {
    color: var(--slsv-label-dark);
}

.slsv-page .tg-band-light .tg-section-label {
    color: var(--slsv-label-light);
}

/* legendas pequenas que o style.css pinta com --muted (3,59:1 no claro) ou
   branco a .40/.45 no escuro: sobem para o piso de 4,5 medido na página */
.slsv-page .tg-band-light .tg-swprova-stats small,
.slsv-page .tg-band-light .tg-swquote cite span {
    color: #5e5e5e;
}

.slsv-page .tg-swfinal-prompt,
.slsv-page .tg-swfinal-price span {
    color: rgba(255, 255, 255, .6);
}

/* o trecho do "pensamento" da dor, a .45 sobre #111417, fica abaixo de 4,5 */
.slsv-page .tg-swdor-quote {
    color: rgba(255, 255, 255, .6);
}

.slsv-page .tg-swdor-sub {
    color: rgba(255, 255, 255, .66);
}

/* link dentro de texto corrido: o site herda color: inherit em <a> */
.slsv-page .slsv-link {
    color: var(--slsv-label-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.slsv-page .tg-band-light .slsv-link {
    color: var(--slsv-label-light);
}

.slsv-page :focus-visible {
    outline: 2px solid var(--slsv-label-dark);
    outline-offset: 3px;
}

/* ------------------------------------------------------------
   slsv-band · faixa de seção com tokens próprios
   Escura por padrão; --deep é a segunda escura (#111417); --light
   entra junto com .tg-band-light, que traz fundo e trama do site.
   ------------------------------------------------------------ */
.slsv-band {
    --slsv-ink: #ffffff;
    --slsv-body: rgba(255, 255, 255, .66);
    --slsv-faint: rgba(255, 255, 255, .55);
    --slsv-line: rgba(255, 255, 255, .12);
    --slsv-panel: rgba(255, 255, 255, .03);
    --slsv-label: var(--slsv-label-dark, #4eb6ea);

    position: relative;
    padding: clamp(64px, 9vw, 110px) 0;
    /* só a cor: o shorthand apagaria a trama que o .tg-band-light desenha */
    background-color: var(--dark);
    color: var(--slsv-body);
}

.slsv-band--deep {
    background-color: #111417;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.slsv-band--light {
    background-color: var(--bg);
    --slsv-ink: var(--dark);
    --slsv-body: var(--soft);
    --slsv-faint: #5e5e5e;          /* 5,90:1 em #f4f4f4 (o --muted dá 3,59) */
    --slsv-line: rgba(13, 13, 13, .12);
    --slsv-panel: var(--light);
    --slsv-label: var(--slsv-label-light, #0a5a8a);
}

.slsv-band h2,
.slsv-band h3 {
    color: var(--slsv-ink);
}

.slsv-band .tg-section-sub {
    color: var(--slsv-body);
}

/* corte diagonal da primeira banda clara, o mesmo recorte do .tg-band-cut */
.slsv-band--cut {
    --slsv-cut: clamp(22px, 3.5vw, 48px);
    padding-top: calc(clamp(64px, 9vw, 110px) + var(--slsv-cut));
    padding-bottom: calc(clamp(64px, 9vw, 110px) + var(--slsv-cut));
    clip-path: polygon(0 var(--slsv-cut), 54% var(--slsv-cut), 60% 0, 100% 0,
            100% calc(100% - var(--slsv-cut)), 60% calc(100% - var(--slsv-cut)), 54% 100%, 0 100%);
    border-top: none;
    border-bottom: none;
}

/* ------------------------------------------------------------
   slsv-hero · capa montada pela capa-hero + copy na metade da coluna
   Mobile: a capa é faixa de topo que se dissolve no fundo, copy embaixo.
   Desktop: capa atrás, véu opaco até 50% e zero em 57% (saída do
   `capa_hero.py montar`); o sujeito começa em 57% e fica intacto.
   ------------------------------------------------------------ */
.slsv-hero {
    --slsv-hero-band: min(100vw, 520px);
    position: relative;
    overflow: hidden;
    background: var(--dark);
}

.slsv-hero__cover {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--slsv-hero-band);
    z-index: 0;
}

.slsv-hero__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* nunca porcentagem na horizontal: o master já traz o sujeito na grade */
    object-position: center 40%;
}

/* no celular o véu é só vertical e fica abaixo do celular da capa */
.slsv-hero__veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            rgba(13, 13, 13, .35) 0%,
            rgba(13, 13, 13, 0) 18%,
            rgba(13, 13, 13, 0) 72%,
            var(--dark) 100%);
}

.slsv-hero__copy {
    position: relative;
    z-index: 1;
    padding-top: calc(var(--slsv-hero-band) - 24px);
    padding-bottom: clamp(56px, 9vw, 96px);
}

.slsv-hero__text h1 {
    font-size: clamp(36px, 5.2vw, 60px);
    line-height: 1.06;
    letter-spacing: -.02em;
    color: var(--light);
    margin: 14px 0 18px;
    text-wrap: balance;
}

.slsv-hero__text h1 .tg-thin {
    color: rgba(255, 255, 255, .78);
}

.slsv-hero__label {
    color: var(--slsv-label-dark, #4eb6ea);
}

.slsv-hero__lead {
    font-size: 16px;
    line-height: 1.75;
    color: rgba(255, 255, 255, .7);
    text-wrap: pretty;
}

.slsv-hero__lead strong {
    color: rgba(255, 255, 255, .94);
    font-weight: 600;
}

.slsv-hero__facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 18px;
    margin: 26px 0 28px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .14);
}

.slsv-hero__facts li {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.slsv-hero__facts span {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .6);
}

.slsv-hero__facts strong {
    font-family: var(--font-display);
    font-size: clamp(15px, 1.6vw, 19px);
    font-weight: 600;
    line-height: 1.25;
    color: var(--light);
    font-variant-numeric: tabular-nums;
}

.slsv-hero__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 26px;
}

.slsv-hero__meta {
    margin-top: 20px;
    font-size: 13px;
    letter-spacing: .02em;
    color: rgba(255, 255, 255, .6);
}

@media (max-width: 480px) {
    .slsv-hero__facts {
        grid-template-columns: 1fr;
    }

    .slsv-hero__facts li {
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
    }

    .slsv-hero__cta .tg-button {
        width: 100%;
        justify-content: space-between;
    }
}

@media (min-width: 992px) {
    .slsv-hero__cover {
        bottom: 0;
        height: auto;
    }

    /* o recorte come sempre por baixo: é o que preserva o alinhamento do master */
    .slsv-hero__cover img {
        object-position: center top;
    }

    /* os dois números vêm do `montar`: opaco até 50% (fim da copy), zero em 57%
       (borda do sujeito). O de 180deg só existe nos últimos 4%, a emenda com a
       seção seguinte: com 10% ele escurecia a base do cubo (alfa 6,9% no `veu`). */
    .slsv-hero__veil {
        background:
            linear-gradient(90deg,
                rgba(13, 13, 13, .92) 0%,
                rgba(13, 13, 13, .92) 50%,
                rgba(13, 13, 13, 0) 57%),
            linear-gradient(180deg,
                rgba(13, 13, 13, 0) 96%,
                var(--dark) 100%);
    }

    .slsv-hero__copy {
        display: flex;
        align-items: center;
        min-height: clamp(600px, 78vh, 780px);
        padding-top: calc(var(--frame) + 40px);
        padding-bottom: 72px;
    }

    .slsv-hero__text {
        max-width: 50%;
    }
}

/* ------------------------------------------------------------
   slsv-formats · grade com linhas (sem card), 3 colunas
   ------------------------------------------------------------ */
.slsv-formats {
    display: grid;
    grid-template-columns: 1fr;
    border-top: 1px solid var(--slsv-line);
}

.slsv-formats__item {
    padding: 28px 0 30px;
    border-bottom: 1px solid var(--slsv-line);
}

.slsv-formats__ix {
    display: block;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .2em;
    color: var(--slsv-label);
    margin-bottom: 12px;
}

.slsv-formats__item h3 {
    font-size: clamp(20px, 2.2vw, 24px);
    margin-bottom: 10px;
}

.slsv-formats__item p {
    font-size: 15px;
    line-height: 1.75;
    color: var(--slsv-body);
}

.slsv-formats__fee {
    margin-top: 14px;
    padding-left: 12px;
    border-left: 2px solid var(--slsv-label);
    font-size: 14px;
    line-height: 1.65;
}

.slsv-formats__legal {
    max-width: 760px;
    margin-top: 14px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--slsv-faint);
}

.slsv-formats__note {
    max-width: 760px;
    margin-top: 26px;
    font-size: 15px;
    line-height: 1.75;
    color: var(--slsv-body);
}

.slsv-formats__note strong {
    color: var(--slsv-ink);
}

@media (min-width: 900px) {
    .slsv-formats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        border-bottom: 1px solid var(--slsv-line);
    }

    .slsv-formats__item {
        padding: 34px 32px 38px;
        border-bottom: none;
        border-left: 1px solid var(--slsv-line);
    }

    .slsv-formats__item:first-child {
        padding-left: 0;
        border-left: none;
    }
}

/* ------------------------------------------------------------
   slsv-scope · dentro e fora (painel duplo)
   ------------------------------------------------------------ */
.slsv-scope {
    display: grid;
    gap: 18px;
}

.slsv-scope__col {
    padding: 30px 28px 32px;
    border: 1px solid var(--slsv-line);
    border-radius: 18px;
    background: var(--slsv-panel);
}

.slsv-scope__col h3 {
    font-size: 20px;
    margin-bottom: 16px;
}

.slsv-scope__col li {
    position: relative;
    padding: 10px 0 10px 30px;
    font-size: 15px;
    line-height: 1.65;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.slsv-scope__col li:last-child {
    border-bottom: none;
}

.slsv-scope__col li strong {
    color: var(--slsv-ink);
    font-weight: 600;
}

.slsv-scope__col li::before {
    position: absolute;
    left: 2px;
    top: 9px;
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 700;
}

.slsv-scope__col--in {
    border-color: rgba(18, 131, 196, .38);
    background: rgba(18, 131, 196, .07);
}

.slsv-scope__col--in li::before {
    content: "+";
    color: var(--slsv-label);
}

.slsv-scope__col--out li::before {
    content: "\2212";
    color: var(--slsv-faint);
}

@media (min-width: 768px) {
    .slsv-scope {
        grid-template-columns: 1fr 1fr;
    }
}

/* ------------------------------------------------------------
   slsv-table · tabela de faixas com fonte por linha
   Rolagem horizontal no celular com role/tabindex para teclado.
   ------------------------------------------------------------ */
.slsv-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--slsv-line);
    border-radius: 18px;
    background: var(--slsv-panel);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .02), 0 18px 44px -30px rgba(13, 13, 13, .35);
}

.slsv-table table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: 15px;
    line-height: 1.6;
    text-align: left;
}

.slsv-table caption {
    caption-side: bottom;
    padding: 16px 22px 20px;
    text-align: left;
    font-size: 13px;
    line-height: 1.65;
    color: var(--slsv-faint);
    border-top: 1px solid var(--slsv-line);
}

.slsv-table th,
.slsv-table td {
    padding: 16px 22px;
    vertical-align: top;
    border-bottom: 1px solid var(--slsv-line);
}

.slsv-table thead th {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--slsv-label);
    white-space: nowrap;
}

.slsv-table tbody th {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    color: var(--slsv-ink);
}

.slsv-table tbody td {
    color: var(--slsv-body);
}

.slsv-table tbody tr:last-child th,
.slsv-table tbody tr:last-child td {
    border-bottom: none;
}

.slsv-table__value {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--slsv-ink);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.slsv-table tbody tr.is-featured {
    background: rgba(18, 131, 196, .07);
}

.slsv-table tbody tr.is-featured .slsv-table__value {
    color: var(--slsv-label);
}

.slsv-table__hint {
    margin: 0 0 10px;
    font-size: 13px;
    color: var(--slsv-faint);
}

.slsv-table__note {
    max-width: 780px;
    margin-top: 22px;
    font-size: 15px;
    line-height: 1.75;
    color: var(--slsv-body);
}

@media (min-width: 700px) {
    .slsv-table__hint {
        display: none;
    }
}

/* ------------------------------------------------------------
   slsv-steps · trilha de fases numeradas
   Vertical no celular, 4 colunas ligadas por linha no desktop.
   ------------------------------------------------------------ */
.slsv-steps {
    display: grid;
    gap: 14px;
    list-style: none;
    counter-reset: slsv-step;
}

.slsv-steps__item {
    position: relative;
    padding: 26px 24px 28px;
    border: 1px solid var(--slsv-line);
    border-radius: 18px;
    background: var(--slsv-panel);
}

.slsv-steps__num {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(56px, 7vw, 76px);
    font-weight: 700;
    line-height: .85;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(78, 182, 234, .7);
    margin-bottom: 14px;
}

.slsv-steps__tag {
    display: inline-block;
    margin-bottom: 10px;
    padding: 5px 12px;
    border-radius: 40px;
    background: rgba(18, 131, 196, .16);
    font-family: var(--font-display);
    font-size: 12.5px;
    font-weight: 600;
    color: #7cc4ea;
}

.slsv-steps__item h3 {
    font-size: 20px;
    margin-bottom: 8px;
}

.slsv-steps__item p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--slsv-body);
}

@media (min-width: 768px) {
    .slsv-steps {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1100px) {
    .slsv-steps {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 18px;
    }
}

/* ------------------------------------------------------------
   slsv-phones · carrossel de celulares com telas reais
   Sem JS: trilho com rolagem horizontal e snap, todas as telas iguais.
   Com js/servico.js (.is-ready): a tela do meio fica 1.1x maior que as
   laterais, setas, teclado e arrastar com o mouse.
   ------------------------------------------------------------ */
.slsv-phones {
    --slsv-phone-w: clamp(220px, 60vw, 300px);
    position: relative;
    margin-top: 12px;
}

.slsv-phones__track {
    display: flex;
    align-items: flex-start;
    gap: clamp(12px, 3vw, 44px);
    /* sangra até a borda da tela: o container do site limita a 1280px */
    margin: 0 calc(50% - 50vw);
    padding: 40px calc(50vw - var(--slsv-phone-w) / 2) 24px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    list-style: none;
}

.slsv-phones__track:focus-visible {
    outline: 2px solid var(--slsv-label);
    outline-offset: 4px;
    border-radius: 24px;
}

.slsv-phones__item {
    flex: 0 0 var(--slsv-phone-w);
    scroll-snap-align: center;
    margin: 0;
}

.slsv-phones__device {
    position: relative;
    padding: 9px;
    border-radius: 44px;
    background: linear-gradient(150deg, #3a4048 0%, #0d1013 32%, #0b0d10 70%, #2b3138 100%);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .16),
        inset 0 0 0 1px rgba(255, 255, 255, .08),
        0 44px 70px -44px rgba(13, 13, 13, .75);
}

/* botões laterais do aparelho */
.slsv-phones__device::before,
.slsv-phones__device::after {
    content: '';
    position: absolute;
    width: 3px;
    border-radius: 2px;
    background: #2a2f36;
}

.slsv-phones__device::before {
    left: -3px;
    top: 22%;
    height: 12%;
}

.slsv-phones__device::after {
    right: -3px;
    top: 28%;
    height: 18%;
}

.slsv-phones__device img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 36px;
    background: #0b0d10;
    user-select: none;
    -webkit-user-drag: none;
}

.slsv-phones__caption {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 20px;
    text-align: center;
    font-size: 14px;
    line-height: 1.55;
    color: var(--slsv-body);
}

.slsv-phones__caption strong {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    color: var(--slsv-ink);
}

.slsv-phones__caption a {
    margin-top: 4px;
    align-self: center;
    font-family: var(--font-display);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--slsv-label);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.slsv-phones__nav {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 6px;
}

.slsv-phones__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid var(--slsv-line);
    border-radius: 50%;
    background: var(--slsv-panel);
    color: var(--slsv-ink);
    cursor: pointer;
    transition: background-color .2s, color .2s, border-color .2s;
}

.slsv-phones__arrow svg {
    width: 20px;
    height: 20px;
}

.slsv-phones__arrow:hover:not(:disabled) {
    background: var(--dark);
    border-color: var(--dark);
    color: var(--light);
}

.slsv-phones__arrow:disabled {
    opacity: .4;
    cursor: default;
}

.slsv-phones__status {
    min-width: 11em;
    margin: 0;
    font-size: 13px;
    text-align: center;
    color: var(--slsv-faint);
    font-variant-numeric: tabular-nums;
}

.slsv-phones__note {
    margin-top: 18px;
    text-align: center;
    font-size: 13px;
    color: var(--slsv-faint);
}

/* com JS: a tela do meio em destaque */
.slsv-phones.is-ready .slsv-phones__track {
    scrollbar-width: none;
    cursor: grab;
}

.slsv-phones.is-ready .slsv-phones__track::-webkit-scrollbar {
    display: none;
}

.slsv-phones.is-ready .slsv-phones__nav {
    display: flex;
}

.slsv-phones.is-ready .slsv-phones__device {
    transform: scale(.909);
    transform-origin: 50% 100%;
    transition: transform .5s cubic-bezier(.2, .7, .3, 1), box-shadow .5s;
}

.slsv-phones.is-ready .slsv-phones__device img {
    filter: brightness(.7) saturate(.85);
    transition: filter .5s;
}

.slsv-phones.is-ready .slsv-phones__item.is-active .slsv-phones__device {
    transform: scale(1);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .2),
        inset 0 0 0 1px rgba(255, 255, 255, .1),
        0 50px 90px -40px rgba(13, 13, 13, .8),
        0 20px 80px -30px rgba(18, 131, 196, .55);
}

.slsv-phones.is-ready .slsv-phones__item.is-active .slsv-phones__device img {
    filter: none;
}

.slsv-phones.is-dragging .slsv-phones__track {
    scroll-snap-type: none;
    cursor: grabbing;
}

@media (min-width: 1024px) {
    .slsv-phones {
        --slsv-phone-w: 300px;
    }
}

/* ------------------------------------------------------------
   slsv-platforms · plataformas atendidas (nome em texto + ícone neutro)
   As marcas de iOS e Android não entram como logo: ver
   docs/pagina-aplicativos-copy.md, diretrizes da Apple e do Google.
   ------------------------------------------------------------ */
.slsv-platforms {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin: 22px 0 0;
    list-style: none;
}

.slsv-platforms li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px 7px 10px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 40px;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    color: var(--light);
    background: rgba(255, 255, 255, .04);
}

.slsv-platforms svg {
    width: 18px;
    height: 18px;
    color: var(--slsv-label-dark, #4eb6ea);
}

.slsv-band--light .slsv-platforms li {
    border-color: rgba(13, 13, 13, .16);
    color: var(--dark);
    background: var(--light);
}

.slsv-band--light .slsv-platforms svg {
    color: var(--slsv-label-light, #0a5a8a);
}

/* ------------------------------------------------------------
   slsv-proof · quem assina + números + depoimentos
   Números e depoimentos reaproveitam .tg-swprova-stats e .tg-swquote,
   que já têm variante para .tg-band-light no style.css.
   ------------------------------------------------------------ */
.slsv-proof {
    display: grid;
    gap: 30px;
    align-items: center;
    margin-top: clamp(48px, 7vw, 80px);
    padding-top: clamp(40px, 6vw, 64px);
    border-top: 1px solid var(--slsv-line);
}

.slsv-proof__founder {
    position: relative;
    max-width: 360px;
    margin: 0;
    justify-self: center;
}

.slsv-proof__founder img {
    width: 100%;
    height: auto;
    border-radius: 20px;
    outline: 1px solid rgba(0, 0, 0, .1);
    outline-offset: -1px;
}

.slsv-proof__founder figcaption {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(13, 13, 13, .82);
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .78);
}

.slsv-proof__founder figcaption strong {
    display: block;
    font-family: var(--font-display);
    font-size: 14px;
    color: var(--light);
}

.slsv-proof__body h3 {
    font-size: clamp(22px, 2.8vw, 30px);
    margin-bottom: 10px;
}

.slsv-proof__body > p {
    max-width: 560px;
    font-size: 15.5px;
    line-height: 1.75;
    color: var(--slsv-body);
}

@media (min-width: 900px) {
    .slsv-proof {
        grid-template-columns: .7fr 1.3fr;
        gap: 56px;
    }
}

/* ------------------------------------------------------------
   slsv-checklist · o que é preciso ter + para quem não é
   ------------------------------------------------------------ */
.slsv-checklist {
    display: grid;
    gap: 12px;
}

.slsv-checklist__item {
    position: relative;
    padding: 20px 22px 22px 56px;
    border-top: 1px solid var(--slsv-line);
}

.slsv-checklist__item::before {
    content: '';
    position: absolute;
    top: 27px;
    left: 20px;
    width: 14px;
    height: 8px;
    border-left: 2px solid var(--slsv-label);
    border-bottom: 2px solid var(--slsv-label);
    transform: rotate(-45deg);
}

.slsv-checklist__item h3 {
    font-size: 18px;
    line-height: 1.3;
    margin-bottom: 6px;
}

.slsv-checklist__item p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--slsv-body);
}

.slsv-checklist__no {
    margin-top: 30px;
    padding: 24px 26px;
    border: 1px solid var(--slsv-line);
    border-radius: 18px;
    background: var(--slsv-panel);
}

.slsv-checklist__no h3 {
    font-size: 17px;
    margin-bottom: 12px;
}

.slsv-checklist__no li {
    position: relative;
    padding: 6px 0 6px 24px;
    font-size: 15px;
    line-height: 1.6;
}

.slsv-checklist__no li::before {
    content: "\00d7";
    position: absolute;
    left: 2px;
    top: 5px;
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--slsv-faint);
}

@media (min-width: 768px) {
    .slsv-checklist {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 40px;
    }
}

@media (min-width: 1100px) {
    .slsv-checklist {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ------------------------------------------------------------
   movimento
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    /* o main.js anima .tg-up com GSAP sem consultar esta preferência e deixa
       opacity 0 inline; aqui a página devolve o conteúdo parado e visível */
    .slsv-page .tg-up,
    .tg-footer .tg-up {
        opacity: 1 !important;
        transform: none !important;
    }

    .slsv-phones.is-ready .slsv-phones__device,
    .slsv-phones.is-ready .slsv-phones__device img {
        transition: none;
    }
}