/* ============================================================
   /oferta-software · CSS exclusivo da página de oferta

   Namespace raiz único: `slof` (registrado em docs/css-namespaces.md).
   Toda regra daqui começa em `.slof-*`, nenhuma começa em classe genérica
   solta, e nenhum modificador anda sozinho no class="" (sempre `slof-x--y`).
   O style.css do site é compartilhado e não é tocado por esta página.

   Tokens herdados de css/style.css: --light --dark --soft --muted --accent
   --accent-deep --font-display --font-body --frame --t-md
   ============================================================ */

.slof-page {
    --slof-ink: #ffffff;
    --slof-ink-soft: rgba(255, 255, 255, .64);
    --slof-ink-faint: rgba(255, 255, 255, .42);
    --slof-line: rgba(255, 255, 255, .12);
    --slof-surface: #111417;
    --slof-surface-deep: #0b0e10;
    --slof-pad: clamp(64px, 9vw, 110px);

    background-color: var(--slof-surface-deep);
    color: var(--slof-ink-soft);
}

.slof-page h2,
.slof-page h3 {
    color: var(--slof-ink);
}

.slof-page .tg-section-sub {
    color: var(--slof-ink-soft);
}

/* O CTA desta página é <button>, e não <a> como no resto do site. `.tg-button`
   nunca precisou declarar cursor porque o link já vem com a mãozinha do browser,
   então o botão perderia o cursor e o alinhamento nativo sem estas três linhas. */
.slof-page .tg-button {
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

/* ------------------------------------------------------------
   01 · hero
   A capa é um master de 1920px montado pela skill capa-hero: o sujeito
   já está assado em x=1280, que é o eixo direito da coluna de 1280px.
   Por isso `object-position: center top` e nada de porcentagem, qualquer
   valor horizontal diferente de center desalinha a imagem da grade.
   ------------------------------------------------------------ */
.slof-hero {
    position: relative;
    overflow: hidden;
    padding: calc(var(--frame) + 40px) 0 clamp(56px, 8vw, 96px);
    background-color: #05070a;
}

.slof-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.slof-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.slof-hero__veil {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, #05070a 0%, rgba(5, 7, 10, .92) 38%, rgba(5, 7, 10, .35) 68%, rgba(5, 7, 10, .55) 100%),
        linear-gradient(180deg, rgba(5, 7, 10, .85) 0%, transparent 30%, rgba(5, 7, 10, .9) 100%);
}

.slof-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 1280px;
}

.slof-hero__inner h1 {
    /* menor que o h1 padrao do site de proposito: nesta pagina o botao precisa
       caber na primeira dobra a 1080px, a pessoa chegou pra pedir orcamento */
    font-size: clamp(34px, 4.2vw, 58px);
    color: var(--slof-ink);
    margin: 12px 0 18px;
    max-width: 50%;
}

.slof-hero__inner h1 .tg-thin {
    color: rgba(255, 255, 255, .72);
}

.slof-hero__sub {
    max-width: 50%;
    font-size: 16px;
    line-height: 1.75;
    color: var(--slof-ink-soft);
}

.slof-hero__sub strong {
    color: var(--slof-ink);
    font-weight: 600;
}

.slof-hero__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 34px;
    margin: 24px 0 26px;
    padding-top: 20px;
    border-top: 1px solid var(--slof-line);
    max-width: 50%;
}

.slof-hero__facts li {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.slof-hero__facts span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--slof-ink-faint);
}

.slof-hero__facts strong {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    color: var(--slof-ink);
}

.slof-hero__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px 28px;
}

.slof-hero__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 500;
    color: var(--slof-ink-soft);
    transition: color var(--t-md);
}

.slof-hero__link svg {
    width: 18px;
    height: 18px;
}

.slof-hero__link:hover {
    color: var(--slof-ink);
}

.slof-hero__meta {
    margin-top: 26px;
    font-size: 13px;
    color: var(--slof-ink-faint);
}

/* ------------------------------------------------------------
   02 · tabela de faixas (o bloco citável)
   ------------------------------------------------------------ */
.slof-price {
    position: relative;
    padding: var(--slof-pad) 0;
    background: var(--slof-surface);
    border-top: 1px solid var(--slof-line);
}

.slof-price__scroll {
    overflow-x: auto;
    border: 1px solid var(--slof-line);
    border-radius: 18px;
    background: rgba(255, 255, 255, .02);
}

.slof-price__table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    font-size: 15px;
    text-align: left;
}

.slof-price__table caption {
    caption-side: bottom;
    padding: 18px 22px 20px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--slof-ink-faint);
    text-align: left;
    border-top: 1px solid var(--slof-line);
}

.slof-price__table th,
.slof-price__table td {
    padding: 16px 22px;
    vertical-align: top;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.slof-price__table thead th {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--slof-ink-faint);
    white-space: nowrap;
}

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

.slof-price__table td {
    color: var(--slof-ink-soft);
    line-height: 1.6;
}

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

.slof-price__value {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--accent);
    white-space: nowrap;
}

.slof-price__note {
    max-width: 760px;
    margin-top: 26px;
    font-size: 15px;
    line-height: 1.75;
    color: var(--slof-ink-soft);
}

/* ------------------------------------------------------------
   03 · escopo, dentro e fora
   ------------------------------------------------------------ */
.slof-scope {
    padding: var(--slof-pad) 0;
    background: var(--slof-surface-deep);
}

.slof-scope__grid {
    display: grid;
    gap: 20px;
}

.slof-scope__col {
    padding: 30px 28px 34px;
    border: 1px solid var(--slof-line);
    border-radius: 18px;
    background: rgba(255, 255, 255, .02);
}

.slof-scope__col h3 {
    font-size: 20px;
    margin-bottom: 18px;
}

.slof-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);
}

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

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

.slof-scope__col li::before {
    position: absolute;
    left: 0;
    top: 10px;
    font-family: var(--font-display);
    font-weight: 700;
}

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

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

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

/* ------------------------------------------------------------
   04 · implementação separada
   ------------------------------------------------------------ */
.slof-impl {
    padding: var(--slof-pad) 0;
    background: var(--slof-surface);
    border-top: 1px solid var(--slof-line);
    border-bottom: 1px solid var(--slof-line);
}

.slof-impl__panel {
    max-width: 860px;
    padding: clamp(28px, 4vw, 46px);
    border: 1px solid rgba(18, 131, 196, .3);
    border-radius: 22px;
    background: linear-gradient(160deg, rgba(18, 131, 196, .12), rgba(255, 255, 255, .02));
}

.slof-impl__panel h2 {
    font-size: clamp(26px, 3.6vw, 38px);
    margin: 12px 0 20px;
}

.slof-impl__panel p {
    font-size: 16px;
    line-height: 1.75;
    color: var(--slof-ink-soft);
}

.slof-impl__panel p + p {
    margin-top: 16px;
}

.slof-impl__list {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--slof-line);
}

.slof-impl__list li {
    padding: 9px 0;
    font-size: 15px;
    line-height: 1.6;
}

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

/* ------------------------------------------------------------
   05 · fases
   ------------------------------------------------------------ */
.slof-phase {
    padding: var(--slof-pad) 0;
    background: var(--slof-surface-deep);
}

.slof-phase__list {
    display: grid;
    gap: 18px;
    counter-reset: none;
    list-style: none;
}

.slof-phase__item {
    padding: 28px 26px 30px;
    border: 1px solid var(--slof-line);
    border-radius: 18px;
    background: rgba(255, 255, 255, .02);
}

.slof-phase__num {
    font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
    font-size: 13px;
    color: var(--accent);
    margin-bottom: 12px;
}

.slof-phase__item h3 {
    font-size: 20px;
    margin-bottom: 10px;
}

.slof-phase__item p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--slof-ink-soft);
}

/* ------------------------------------------------------------
   06 · stack e engenharia
   ------------------------------------------------------------ */
.slof-stack {
    padding: var(--slof-pad) 0;
    background: var(--slof-surface);
    border-top: 1px solid var(--slof-line);
}

.slof-stack__grid {
    display: grid;
    gap: 18px;
}

.slof-stack__card {
    padding: 28px 26px 30px;
    border: 1px solid var(--slof-line);
    border-radius: 18px;
    background: rgba(255, 255, 255, .02);
    transition: border-color var(--t-md), transform var(--t-md);
}

.slof-stack__card:hover {
    border-color: rgba(18, 131, 196, .4);
    transform: translateY(-3px);
}

.slof-stack__card h3 {
    font-size: 19px;
    margin-bottom: 10px;
}

.slof-stack__card p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--slof-ink-soft);
}

/* ------------------------------------------------------------
   07 · fit
   ------------------------------------------------------------ */
.slof-fit {
    padding: var(--slof-pad) 0;
    background: var(--slof-surface-deep);
}

.slof-fit__grid {
    display: grid;
    gap: 20px;
}

.slof-fit__col {
    padding: 30px 28px 34px;
    border: 1px solid var(--slof-line);
    border-radius: 18px;
    background: rgba(255, 255, 255, .02);
}

.slof-fit__col h3 {
    font-size: 20px;
    margin-bottom: 16px;
}

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

.slof-fit__col li:last-child {
    border-bottom: none;
}

.slof-fit__col li::before {
    position: absolute;
    left: 0;
    top: 11px;
    font-family: var(--font-display);
    font-weight: 700;
}

.slof-fit__col--yes {
    border-color: rgba(18, 131, 196, .34);
}

.slof-fit__col--yes li::before {
    content: "\2713";
    color: var(--accent);
}

.slof-fit__col--no li::before {
    content: "\00d7";
    color: var(--slof-ink-faint);
}

/* ------------------------------------------------------------
   08 · faq
   ------------------------------------------------------------ */
.slof-faq {
    padding: var(--slof-pad) 0;
    background: var(--slof-surface);
    border-top: 1px solid var(--slof-line);
}

.slof-faq__list {
    max-width: 860px;
    border-top: 1px solid var(--slof-line);
}

.slof-faq__item {
    border-bottom: 1px solid var(--slof-line);
}

.slof-faq__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 0;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    color: var(--slof-ink);
    transition: color var(--t-md);
}

.slof-faq__item summary::-webkit-details-marker {
    display: none;
}

.slof-faq__item summary::after {
    content: "+";
    flex: 0 0 auto;
    font-size: 22px;
    font-weight: 400;
    color: var(--accent);
}

.slof-faq__item[open] summary::after {
    content: "\2212";
}

.slof-faq__item summary:hover {
    color: var(--accent);
}

.slof-faq__item p {
    padding: 0 0 24px;
    max-width: 720px;
    font-size: 15px;
    line-height: 1.75;
    color: var(--slof-ink-soft);
}

/* ------------------------------------------------------------
   09 · cta final
   ------------------------------------------------------------ */
.slof-final {
    padding: var(--slof-pad) 0;
    background: var(--slof-surface-deep);
}

.slof-final__panel {
    padding: clamp(32px, 5vw, 60px);
    border: 1px solid var(--slof-line);
    border-radius: 24px;
    background: linear-gradient(160deg, rgba(18, 131, 196, .14), rgba(255, 255, 255, .02));
}

.slof-final__prompt {
    font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
    font-size: 13px;
    color: var(--slof-ink-faint);
    margin-bottom: 14px;
}

.slof-final__prompt i {
    font-style: normal;
    color: var(--accent);
}

.slof-final__sub {
    max-width: 620px;
    margin-top: 18px;
    font-size: 16px;
    line-height: 1.75;
    color: var(--slof-ink-soft);
}

.slof-final__cta {
    margin-top: 30px;
}

.slof-final__meta {
    margin-top: 20px;
    font-size: 13px;
    color: var(--slof-ink-faint);
}

/* ------------------------------------------------------------
   breakpoints
   ------------------------------------------------------------ */
@media (max-width: 767px) {
    /* mobile: a capa vira faixa de topo que se dissolve no fundo da seção,
       em vez de foto atrás do texto inteiro (aí a copy vira sombra ilegível). */
    .slof-hero {
        /* uma medida só para a altura da faixa e para o vão da copy: se as duas
           saírem de sincronia, o texto sobe por cima da foto */
        --slof-band: min(62vw, 340px);
        padding-top: calc(var(--frame) + 8px);
    }

    .slof-hero__bg {
        inset: 0 0 auto 0;
        height: var(--slof-band);
        max-height: 340px;
    }

    /* `top` também aqui: o master de mobile já entra com a cabeça do sujeito
       encostada no alto, então cortar por baixo preserva o que se reconhece */
    .slof-hero__bg img {
        object-position: center top;
    }

    .slof-hero__veil {
        background: linear-gradient(180deg, rgba(5, 7, 10, .5) 0%, rgba(5, 7, 10, .2) 45%, #05070a 100%);
    }

    .slof-hero__inner {
        padding-top: calc(var(--slof-band) - 40px);
    }

    .slof-hero__inner h1,
    .slof-hero__sub,
    .slof-hero__facts {
        max-width: none;
    }

    .slof-hero__cta .tg-button {
        width: 100%;
    }
}

@media (min-width: 768px) {
    .slof-scope__grid,
    .slof-fit__grid {
        grid-template-columns: 1fr 1fr;
    }

    .slof-stack__grid,
    .slof-phase__list {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1100px) {
    .slof-phase__list {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .slof-stack__card {
        transition: none;
    }

    .slof-stack__card:hover {
        transform: none;
    }
}