@charset "UTF-8";

/* ==========================================================================
   Landing page (Views/Home/Index.cshtml)

   Migrado de wwwroot/sass/home.sass. É carregado por @section Styles na
   própria view, e não pelo _Layout: a landing é uma tela só e não precisa
   pesar nas páginas internas do sistema.

   Cores e fontes vêm de tokens.css e do :root de _global.sass. Os tokens
   --landing-* abaixo existem só para os valores que se repetiam em todas as
   seções (espaçamento, tamanho de título, cinza dos subtítulos).

   Os nomes de classe com acento (.sessao-apresentação-*) são preservados de
   propósito: wwwroot/js/home/index.js faz querySelectorAll neles. O @charset
   acima é o que garante que casem.
   ========================================================================== */

.landing-page-section {
    --landing-espaco-lateral: 2.55rem;
    --landing-largura-maxima: 1480px;
    --landing-espaco-entre-secoes: 6rem;
    --landing-offset-ancora: 82px;
    --landing-cor-texto-suave: hsl(215 20% 50%);
    --landing-titulo-secao: 2.25rem;
    --landing-titulo-secao-altura: 2.5rem;
    --landing-subtitulo-secao: 1.125rem;
    --landing-subtitulo-secao-altura: 1.75rem;

    /* ----- base comum a todas as seções ----- */
    .sessao-beneficios,
    .sessao-video,
    .sessao-funcionamento,
    .sessao-antes-depois,
    .sessao-teste-gratis,
    .sessao-faq,
    .sessao-segunda-apresentacao {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        padding-inline: var(--landing-espaco-lateral);
        margin-top: var(--landing-espaco-entre-secoes);
        scroll-margin-top: var(--landing-offset-ancora);
    }

    .sessao-beneficios,
    .sessao-video {
        margin-top: 5rem;
    }

    /* ----- títulos e subtítulos de seção ----- */
    .sessao-beneficios-title,
    .sessao-video-title,
    .sessao-funcionamento-title,
    .sessao-antes-depois-title,
    .sessao-teste-gratis-title,
    .sessao-faq-title,
    .sessao-segunda-apresentacao-title {
        color: black;
        font-family: var(--font-primary);
        font-weight: bolder;
        font-size: var(--landing-titulo-secao);
        line-height: var(--landing-titulo-secao-altura);
        margin-bottom: 20px;
        text-align: center;
    }

    .sessao-beneficios-subtitle,
    .sessao-video-subtitle,
    .sessao-funcionamento-subtitle,
    .sessao-antes-depois-subtitle,
    .sessao-faq-subtitle,
    .sessao-segunda-apresentacao-subtitle {
        color: var(--landing-cor-texto-suave);
        font-size: var(--landing-subtitulo-secao);
        text-align: center;
    }

    /* line-height só nas três que já o declaravam. As demais herdam o 1.6
       de html,body — acrescentar aqui mudaria o layout delas. */
    .sessao-beneficios-subtitle,
    .sessao-video-subtitle,
    .sessao-funcionamento-subtitle {
        line-height: var(--landing-subtitulo-secao-altura);
    }

    /* a segunda apresentação é a única alinhada à esquerda */
    .sessao-segunda-apresentacao-title,
    .sessao-segunda-apresentacao-subtitle {
        text-align: left;
    }

    /* ==================== apresentação (hero) ==================== */
    .sessao-apresentação {
        width: 100%;
        padding-inline: var(--landing-espaco-lateral);
        scroll-margin-top: var(--landing-offset-ancora);
    }

    /* As duas apresentações são texto + imagem lado a lado. O align-items
       centraliza o texto em relação à imagem: sem ele a coluna de texto fica
       colada no topo enquanto a imagem se centraliza, e a diferença cresce
       junto com a largura da tela. O max-width impede que a imagem exploda
       em monitores muito largos. */
    .sessao-apresentação > .row,
    .sessao-segunda-apresentacao > .row {
        align-items: center;
        max-width: var(--landing-largura-maxima);
        margin-inline: auto;
    }

    .sessao-apresentação-col-image {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .sessao-apresentação-image {
        width: 100%;
        border-radius: 10px;
    }

    .sessao-apresentação-title {
        color: black;
        font-family: var(--font-primary);
        font-weight: bolder;
        font-size: 3.75rem;
        margin-bottom: 20px;
    }

    .sessao-apresentação-subtitle {
        color: var(--landing-cor-texto-suave);
        font-size: 1.125rem;
        line-height: 1.75rem;
    }

    .sessao-apresentação-buttons {
        width: max-content;
    }

    /* ==================== benefícios ==================== */
    .sessao-beneficios-cards {
        display: flex;
    }

    .sessao-beneficios-card {
        width: 25%;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 1rem;
        border-radius: 5px;

        &:hover {
            transition: 0.4s;
            box-shadow: 0 4px 20px -2px rgb(0 0 0 / 20%);
        }
    }

    .sessao-beneficios-card-icon {
        padding: 1.8rem;
        background-color: hsl(218deg 70% 35% / 10%);
        border-radius: 10px;
    }

    .sessao-beneficios-card-title {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }

    .sessao-beneficios-card-subtitle {
        color: var(--landing-cor-texto-suave);
        text-align: center;
        font-size: 1.125rem;
        line-height: 1.75rem;
    }

    /* ==================== como funciona (timeline) ==================== */
    .sessao-funcionamento-timeline {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        position: relative;
        width: 100%;
        max-width: 1400px;
        margin: 50px 0 30px;

        &::before {
            content: "";
            position: absolute;
            top: 30px;
            left: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(90deg, #ccc, var(--cor-roxa));
            z-index: 1;
        }
    }

    .sessao-funcionamento-step {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        z-index: 2;
    }

    .sessao-funcionamento-etapa {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .sessao-funcionamento-etapa-icon {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 4rem;
        height: 4rem;
        color: #fff;
        border-radius: 50%;
    }

    .sessao-funcionamento-etapa-title {
        text-align: center;
        font-size: 1.25rem;
        line-height: 1.75rem;
    }

    .sessao-funcionamento-etapa-description {
        color: var(--landing-cor-texto-suave);
        font-size: 1.125rem;
        line-height: 1.75rem;
        text-align: center;
    }

    /* ==================== vídeo ==================== */
    .sessao-video-video-div {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .sessao-video-video {
        width: 60%;
        height: 60vh;
    }

    /* ==================== antes x depois ==================== */
    .table-antes-depois {
        --bs-table-bg: transparent;
        --landing-cor-borda-tabela: rgb(220 227 233);

        width: 55%;

        th {
            font-size: 1.125rem;
            line-height: 1.75rem;
            font-weight: 600;
        }

        td {
            font-weight: 600;
        }

        .table-group-divider {
            border-top: calc(var(--bs-border-width) * 2) solid var(--landing-cor-borda-tabela);
        }
    }

    .text-gray {
        color: var(--landing-cor-texto-suave) !important;
    }

    .text-green {
        color: hsl(145 65% 45%) !important;
    }

    /* ==================== teste grátis ==================== */
    .sessao-teste-gratis {
        background: linear-gradient(131deg, var(--cor-roxa) 45%, var(--cor-laranja) 97%);
    }

    .sessao-teste-gratis-title,
    .sessao-teste-gratis-subtitle,
    .sessao-teste-gratis-text-info {
        color: #fff;
    }

    .sessao-teste-gratis-subtitle {
        font-size: var(--landing-subtitulo-secao);
        text-align: center;
    }

    .sessao-teste-gratis-buttons {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .sessao-teste-gratis-info {
        display: flex;
        justify-content: space-between;
        color: #fff;
        gap: 2rem;
    }

    .sessao-teste-gratis-garantia {
        background-color: #ffffff1a;
        display: grid;
        text-align: center;
        padding: 1.5rem 2rem;
        border-radius: 10px;

        .sessao-teste-gratis-garantia-title {
            color: #fff;
            font-size: 1.2rem;
            line-height: 1.75rem;
            font-weight: 600;
        }

        .sessao-teste-gratis-garantia-subtitle {
            color: #fff;
            font-size: 0.875rem;
            line-height: 1.25rem;
            font-weight: 600;
            opacity: 0.9;
        }
    }

    /* ==================== FAQ ====================
       A abertura/fechamento é o collapse do Bootstrap: ele anima a altura em
       .collapsing e troca a classe .show ao terminar. O que este bloco
       acrescenta é o resto do movimento — o conteúdo entrando, o chevron
       girando e a sombra do card — tudo com a mesma curva e duração para o
       painel abrir como um gesto só.

       Está aninhado em .sessao-faq-accordion de propósito: .collapsing e
       .accordion-body são classes do Bootstrap, e sem o escopo estas regras
       pegariam qualquer outro collapse da página. */
    .sessao-faq-accordion {
        --faq-duracao: 0.35s;
        --faq-curva: cubic-bezier(0.4, 0, 0.2, 1);

        width: 75%;

        /* Sobrepõe o `height .35s ease` do Bootstrap só aqui, para a altura
           usar a mesma curva do resto da animação. */
        .collapsing {
            transition: height var(--faq-duracao) var(--faq-curva);
        }

        /* O texto sobe e aparece enquanto o painel cresce. O atraso curto
           evita que ele fique visível espremido nos primeiros pixels.

           É `animation`, e não `transition`, por um motivo específico: o
           painel fechado é display:none, e o Bootstrap remove .collapse e
           adiciona .collapsing na mesma task. Uma transição precisa de um
           estado anterior vindo de um frame que existiu — saindo de
           display:none esse frame não existe, e o conteúdo simplesmente
           nasce no estado final. Animação não tem essa exigência: ela roda
           assim que o elemento passa a ser renderizado.

           Os dois seletores compartilham a mesma animação de propósito —
           quando o Bootstrap troca .collapsing por .show no meio da
           abertura, o elemento continua casando e a animação não reinicia.
           No fechamento, o fill `both` segura o estado final e o conteúdo
           permanece visível enquanto a altura encolhe. */
        .accordion-collapse.show .accordion-body,
        .accordion-collapse.collapsing .accordion-body {
            animation: faqConteudoEntra var(--faq-duracao) var(--faq-curva) 0.08s both;
        }

        .sessao-faq-accordion-button {
            font-size: 1.125rem;
            line-height: 1.75rem;
            font-weight: 600;

            /* ::after é o chevron do Bootstrap. A transição é declarada aqui,
               e não via --bs-accordion-btn-icon-transition, porque o _Layout
               carrega o Bootstrap 5.1 local junto do 5.3.3 do CDN e essa
               variável só existe no 5.3. */
            &::after {
                transition: transform var(--faq-duracao) var(--faq-curva);
            }

            &:not(.collapsed) {
                background-color: white;
                color: var(--cor-roxa);

                /* O chevron aberto do Bootstrap é azul (#0c63e4) nas duas
                   versões. Trocado pelo roxo da marca. A cor vai literal
                   porque data URI não enxerga custom property — ao mudar
                   --cor-roxa, mude o %234e1f85 aqui também. */
                &::after {
                    transform: rotate(-180deg);
                    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%234e1f85'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
                }
            }

            &:focus {
                box-shadow: none;
            }
        }

        .accordion-faq {
            border-radius: 5px;
            padding: 5px;
            box-shadow: 0 2px 10px -1px rgb(0 0 0 / 20%);
            /* Na base, não dentro do :hover — assim a sombra também suaviza
               na saída do mouse, em vez de sumir de uma vez. */
            transition: box-shadow var(--faq-duracao) var(--faq-curva);

            &:not(:first-of-type) {
                border: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color);
            }

            &:hover {
                box-shadow: 0 4px 20px -2px rgb(0 0 0 / 20%);
            }
        }
    }
}

/* ==========================================================================
   Botões da landing
   ========================================================================== */

.button-agendar {
    background-color: var(--cor-laranja);
    color: white;
    border: none;
    font-size: 1.2rem;
    font-weight: 600;
    padding: 1rem 1.5rem;
    /* O .btn do Bootstrap já traz 0.15s, curto demais para se perceber a
       troca de laranja para roxo. O irmão .button-agendar-teste sempre teve
       transição própria; este não tinha. */
    transition: background-color 0.3s ease, color 0.3s ease;

    &:hover {
        background-color: var(--cor-roxa);
        color: white;
    }
}

.button-agendar-teste {
    background: linear-gradient(to right, var(--cor-laranja) 50%, var(--cor-roxa) 50%);
    background-size: 200% 100%;
    background-position: left bottom;
    color: white;
    border: none;
    font-size: 1.2rem;
    font-weight: 600;
    padding: 1rem 1.5rem;
    transition: background-position 0.5s linear, color 0.3s ease;

    &:hover {
        background-position: right bottom;
        color: white;
    }
}

.button-demo {
    position: relative;
    display: inline-block;
    padding: 1rem 1.5rem;
    font-size: 1.2rem;
    font-weight: 600;
    color: #fff;
    border: none;
    cursor: pointer;
    background: linear-gradient(131deg, var(--cor-roxa) 22%, var(--cor-laranja) 93%);
    overflow: hidden;
    z-index: 1;

    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 100%;
        background: var(--cor-roxa);
        z-index: -1;
        transition: width 0.5s linear;
    }

    &:hover::before {
        width: 100%;
    }
}

/* Variante sem deslocamento, usada sob prefers-reduced-motion */
@keyframes faqConteudoSurge {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Entrada do conteúdo de um item do FAQ, junto com a altura do collapse */
@keyframes faqConteudoEntra {
    from {
        opacity: 0;
        transform: translateY(-0.5rem);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* Animação letra a letra do título do hero, aplicada por
   wwwroot/js/home/index.js aos <span> de .sessao-apresentação-title */
@keyframes fadeLetter {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* O rodapé da landing (.footer-section-landing-page) NÃO está aqui: ele é
   compartilhado com Views/Shared/Partials/_FooterPublico.cshtml, que a tela
   /novidades renderiza, então vive no bundle global (site.sass). */

/* Quem pede menos movimento no sistema operacional recebe o painel abrindo
   direto. O Bootstrap já zera o `height` do .collapsing sozinho; o que falta
   é desligar a entrada do conteúdo e o giro do chevron. */
/* Sob esta preferência o painel continua abrindo animado — de propósito, e
   contrariando o padrão do Bootstrap, que zera a transição de altura.

   O critério é o que a animação comunica, não a sua existência. A altura é a
   própria affordance do accordion: sem ela o conteúdo aparece de estalo e não
   fica claro o que abriu. O giro do chevron é feedback de estado. Nenhum dos
   dois desloca conteúdo pela tela — é o deslocamento que incomoda quem ativa
   a preferência, e é só ele que sai aqui, trocando a animação do texto pela
   variante sem translate.

   As regras base deste arquivo já vencem as do Bootstrap por especificidade,
   então basta não repetir `transition: none` para a altura e o chevron
   voltarem a animar. Repetir os dois seletores abaixo é necessário: só
   .accordion-body teria especificidade menor que a regra da animação. */
@media (prefers-reduced-motion: reduce) {
    .landing-page-section .sessao-faq-accordion {
        .accordion-collapse.show .accordion-body,
        .accordion-collapse.collapsing .accordion-body {
            animation-name: faqConteudoSurge;
        }
    }
}

/* ==========================================================================
   Responsivo

   Os breakpoints são os mesmos do home.sass. Cada bloco agrupa o que muda
   naquela largura, na ordem do maior para o menor.
   ========================================================================== */

@media screen and (max-width: 1200px) {
    .landing-page-section {
        .sessao-apresentação-title {
            font-size: 3rem;
        }

        .col-title-apresentacao {
            width: 100%;
        }

        .sessao-apresentação-col-image {
            margin-top: 3rem;
            width: 100%;
        }

        .table-antes-depois {
            width: 100%;
        }
    }
}

@media screen and (max-width: 1020px) {
    .landing-page-section {
        .sessao-apresentação-title {
            font-size: 2.25rem;
        }

        .sessao-beneficios-title,
        .sessao-video-title,
        .sessao-funcionamento-title,
        .sessao-antes-depois-title,
        .sessao-teste-gratis-title,
        .sessao-faq-title,
        .sessao-segunda-apresentacao-title {
            font-size: 1.875rem;
        }
    }
}

@media screen and (max-width: 834px) {
    .landing-page-section {
        .sessao-beneficios-cards {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .sessao-beneficios-card {
            width: auto;
        }
    }
}

@media screen and (min-width: 768px) {
    .landing-page-section .sessao-funcionamento-step {
        width: 30%;
    }
}

@media screen and (max-width: 768px) {
    .landing-page-section {
        .sessao-apresentação-title {
            font-size: 2rem;
        }

        .sessao-apresentação-buttons {
            width: 100%;
            display: grid;
            gap: 1rem;
        }

        .sessao-apresentação-subtitle,
        .sessao-beneficios-subtitle,
        .sessao-beneficios-card-subtitle,
        .sessao-video-subtitle,
        .sessao-funcionamento-subtitle {
            font-size: 1rem;
        }

        .sessao-video-video {
            width: 100%;
        }

        /* No mobile a timeline vira vertical: a linha do gradiente passa a
           correr na lateral e cada etapa fica lado a lado com o ícone. */
        .sessao-funcionamento-timeline {
            display: grid;
            align-items: center;
            gap: 50px;

            &::before {
                left: 38.5px;
                top: 0;
                width: 3px;
                height: 100%;
                background: linear-gradient(180deg, #ccc, var(--cor-roxa));
            }
        }

        .sessao-funcionamento-step {
            flex-direction: row;
        }

        .sessao-funcionamento-etapa {
            align-items: baseline;
        }

        .sessao-funcionamento-etapa-icon {
            flex-shrink: 0;
            width: 48px;
            height: 48px;
        }

        .sessao-funcionamento-etapa-title {
            text-align: left;
            padding-left: 1rem;
            white-space: normal;
            overflow-wrap: break-word;
        }

        .sessao-funcionamento-etapa-description {
            text-align: left;
            padding-left: 1rem;
        }

        .sessao-teste-gratis-buttons {
            flex-direction: column;
            gap: 1.5rem;
        }

        .sessao-teste-gratis-info {
            flex-direction: column;
            align-items: center;
            gap: 1.5rem;
        }

        .sessao-teste-gratis-garantia {
            .sessao-teste-gratis-garantia-title {
                font-size: 1.125rem;
            }

            .sessao-teste-gratis-garantia-subtitle {
                font-size: 0.825rem;
            }
        }

        .sessao-faq-accordion {
            width: 100%;
        }
    }

    .button-agendar {
        margin-right: 0 !important;
        font-size: 1.25rem;
    }

    .button-demo-div {
        width: 100%;
    }

    .button-demo {
        font-size: 1rem;
        width: 100%;
    }
}

@media screen and (max-width: 540px) {
    .landing-page-section {
        .sessao-apresentação,
        .sessao-beneficios,
        .sessao-video,
        .sessao-funcionamento,
        .sessao-antes-depois,
        .sessao-teste-gratis,
        .sessao-faq,
        .sessao-segunda-apresentacao {
            padding-inline: 0.5rem;
        }

        .sessao-beneficios-cards {
            grid-template-columns: auto !important;
        }

        .sessao-funcionamento-timeline::before {
            left: 22.5px;
        }

        .sessao-funcionamento-step {
            padding-left: 0 !important;
            padding-right: 0 !important;
        }

        .sessao-teste-gratis-garantia {
            .sessao-teste-gratis-garantia-title {
                font-size: 1rem;
            }

            .sessao-teste-gratis-garantia-subtitle {
                font-size: 0.775rem;
            }
        }

        /* aninhado em .sessao-faq-accordion para igualar a especificidade da
           regra base — sem isso este font-size perde para ela */
        .sessao-faq-accordion .sessao-faq-accordion-button {
            font-size: 1.12rem;
        }
    }

    .button-agendar {
        margin-right: 0 !important;
        font-size: 1rem;
    }

    .button-demo {
        padding: 1rem 0.5rem;
    }
}

/* A tabela de Antes x Depois exige 343px de largura de conteúdo — abaixo
   disso ela estoura a viewport (medido: 343 > 318 num aparelho de 320px).
   As três colunas também já vêm espremidas em 109/121/113px desde 414px,
   então aqui cada linha vira um cartão vertical.

   O rótulo de cada valor sai do data-coluna definido na view, e não de um
   :nth-child: com o atributo, mexer na ordem das colunas não silencia os
   rótulos, e o cabeçalho continua sendo a única fonte do texto. */
@media screen and (max-width: 360px) {
    .landing-page-section .table-antes-depois {
        display: block;
        width: 100%;

        /* o cabeçalho reaparece célula a célula, via ::before */
        thead {
            display: none;
        }

        tbody,
        tr,
        td {
            display: block;
        }

        /* vira a borda do cartão; o divisor do topo não faz mais sentido */
        .table-group-divider {
            border-top: 0;
        }

        tr {
            border: var(--bs-border-width) solid var(--landing-cor-borda-tabela);
            border-radius: 5px;
            padding: 0.75rem;

            & + tr {
                margin-top: 0.75rem;
            }
        }

        td {
            /* o Bootstrap dá borda inferior e padding a toda célula */
            border-bottom: 0;
            padding: 0;
        }

        /* a coluna "Aspecto" é o título do cartão */
        td.text-bold {
            font-size: 1.0625rem;
            padding-bottom: 0.5rem;
        }

        td[data-coluna] {
            padding-top: 0.5rem;

            &::before {
                content: attr(data-coluna);
                display: block;
                font-size: 0.75rem;
                font-weight: 600;
                text-transform: uppercase;
                letter-spacing: 0.04em;
                color: var(--landing-cor-texto-suave);
            }
        }
    }
}