/*
 * Página de abertura do /comece (escolha da unidade + Pure Pass x aula experimental).
 *
 * Esta página usa o template principal do site (_Layout: cabeçalho com todos os menus e
 * rodapé), então NÃO pode carregar o lp-unidade.css: aquele arquivo tem seletores globais
 * (*, a, img, h1, h2, section, html, body) que quebrariam o cabeçalho e o rodapé. Aqui vai
 * só o que a abertura usa, tudo escopado em .lp-comece (a classe do <main>). As outras telas
 * do fluxo (decidir, agendar, purepass) continuam no _LayoutLanding com o lp-unidade.css:
 * mudou o visual compartilhado lá, espelhe aqui.
 *
 * Os seletores de elemento usam :where() para ficar com a mesma especificidade que tinham
 * no lp-unidade.css (a classe .lp-btn-principal tem que vencer o `a`, o .lp-slide tem que
 * vencer o `img`). O reset do principal.min.css (* com font-weight 300, body com
 * line-height 1) é desfeito na raiz da página.
 */

:root {
    --lp-fundo: #FAF9F9;
    --lp-fundo-2: #F2F0F0;
    --lp-branco: #FFFFFF;
    --lp-vermelho: #C12030;
    --lp-vermelho-escuro: #9E1A27;
    --lp-vermelho-claro: #FBECEE;
    --lp-grafite: #231F20;
    --lp-grafite-2: #332D2E;
    --lp-texto: #3A3536;
    --lp-texto-suave: #6B6465;
    --lp-linha: #E2DEDE;
    --lp-ambar: #DB9828;
    --lp-largura: 1200px;
    --lp-suave: cubic-bezier(.22, .61, .36, 1);
    --lp-raio: 20px 20px 0 20px;
    --lp-raio-md: 12px 12px 0 12px;
    --lp-raio-sm: 10px 10px 0 10px;
}

.lp-comece {
    font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--lp-texto);
    background: var(--lp-fundo);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* Desfaz o `* { font-weight: 300 }` do principal.min.css sem ganhar especificidade. */
:where(.lp-comece) * { font-weight: 400; }
.lp-comece [hidden] { display: none !important; }
:where(.lp-comece) img { max-width: 100%; height: auto; display: block; }
:where(.lp-comece) a { color: var(--lp-vermelho); }
.lp-comece :focus-visible { outline: 2px solid var(--lp-vermelho); outline-offset: 3px; }

.lp-comece .lp-container { max-width: var(--lp-largura); margin: 0 auto; padding: 0 20px; }

/* ===== Tipografia ===== */
.lp-comece .lp-rotulinho {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.lp-comece h1 {
    margin: 0;
    font-size: 31px;
    line-height: 1.04;
    font-weight: 700;
    letter-spacing: -.025em;
    color: #fff;
    text-wrap: balance;
}

.lp-comece .lp-marca {
    display: block;
    margin-bottom: 12px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .66);
}

/* Realce do título no grafite: o âmbar da paleta (o vermelho some no fundo escuro). */
.lp-comece h1 em { font-style: normal; font-weight: 700; color: var(--lp-ambar); }

.lp-comece h2 {
    margin: 0;
    font-size: 25px;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -.022em;
    color: var(--lp-grafite);
    text-wrap: balance;
}

.lp-comece h2 em { font-style: normal; color: var(--lp-vermelho); }

/* ===== Botões ===== */
.lp-comece .lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 14px 24px;
    border: 0;
    border-radius: var(--lp-raio-md);
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .18s, box-shadow .18s, color .18s;
}

.lp-comece .lp-btn-principal { background: var(--lp-vermelho); color: #fff; }
.lp-comece .lp-btn-principal:hover { background: var(--lp-vermelho-escuro); }
.lp-comece .lp-btn-contorno { background: transparent; box-shadow: inset 0 0 0 1px var(--lp-linha); color: var(--lp-grafite); }
.lp-comece .lp-btn-contorno:hover { box-shadow: inset 0 0 0 1px var(--lp-grafite); }
.lp-comece .lp-btn-sm { min-height: 38px; padding: 9px 16px; font-size: 12.5px; }

/* ===== Primeira tela: os dois jeitos de começar + a busca, com a foto ao lado ===== */
.lp-comece .lp-hero { position: relative; background: var(--lp-grafite); }

/* Celular e tablet: a foto é uma faixa no topo que derrete no grafite. */
.lp-comece .lp-hero-foto { position: relative; aspect-ratio: 2 / 1; max-height: 420px; overflow: hidden; }
.lp-comece .lp-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 34%; }
.lp-comece .lp-hero-foto::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 40%;
    background: linear-gradient(0deg, var(--lp-grafite), rgba(35, 31, 32, 0));
}

/* padding-top no longhand: `padding` por atalho aqui zeraria o padding lateral do .lp-container. */
.lp-comece .lp-hero-grade { position: relative; z-index: 2; display: grid; gap: 22px; padding-top: 6px; padding-bottom: 30px; }

.lp-comece .lp-identidade { display: grid; justify-items: start; gap: 16px; }

.lp-comece .lp-local { max-width: 46ch; margin: 0; font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, .8); }

/* Os dois caminhos com o preço, em tickets (o vocabulário dos tickets do tema cartas do Web.2027, na paleta do site):
   canhoto à esquerda, picote tracejado com os dois furos e sombra dura. Pure Pass (recomendado) em vermelho, aula
   experimental em branco. O clique leva à busca da unidade. */
.lp-comece .cm-dois { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; width: 100%; max-width: 560px; margin: 4px 0 0; padding: 0; list-style: none; }
.lp-comece .cm-tk { --tk-c: 52px; --tk-fundo: var(--lp-vermelho); --tk-texto: #fff; position: relative; display: grid; grid-template-columns: var(--tk-c) minmax(0, 1fr); height: 100%; box-sizing: border-box; border-radius: 14px; background: var(--tk-fundo); color: var(--tk-texto); text-decoration: none; box-shadow: 5px 6px 0 rgba(0, 0, 0, .45); transition: transform .18s var(--lp-suave), box-shadow .18s; }
.lp-comece .cm-tk:hover { transform: translate(-2px, -2px); box-shadow: 7px 8px 0 rgba(0, 0, 0, .45); }
.lp-comece .cm-tk-exp { --tk-fundo: var(--lp-branco); --tk-texto: var(--lp-grafite); }
/* os furos do picote, na cor do painel */
.lp-comece .cm-tk::before,
.lp-comece .cm-tk::after { content: ""; position: absolute; left: calc(var(--tk-c) - 9px); width: 18px; height: 18px; border-radius: 50%; background: var(--lp-grafite); }
.lp-comece .cm-tk::before { top: -9px; }
.lp-comece .cm-tk::after { bottom: -9px; }
.lp-comece .cm-tk-canhoto { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; align-content: center; gap: 5px; padding: 0 12px; border-radius: 14px 0 0 14px; background: rgba(0, 0, 0, .2); color: #fff; }
.lp-comece .cm-tk-pp .cm-tk-canhoto i { display: block; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.lp-comece .cm-tk-exp .cm-tk-canhoto { background: var(--lp-fundo-2); color: var(--lp-vermelho); }
.lp-comece .cm-tk-corpo { display: grid; align-content: start; gap: 3px; min-width: 0; padding: 14px 14px 15px 15px; border-left: 2px dashed rgba(255, 255, 255, .5); }
.lp-comece .cm-tk-exp .cm-tk-corpo { border-left-color: var(--lp-linha); }
.lp-comece .cm-dois-t { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .88; }
.lp-comece .cm-tk-exp .cm-dois-t { color: var(--lp-vermelho); opacity: 1; }
.lp-comece .cm-dois-preco { line-height: 1.2; }
.lp-comece .cm-dois-preco small { font-size: 12.5px; font-weight: 500; }
.lp-comece .cm-dois-preco strong { font-size: 22px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
.lp-comece .cm-dois-nota { font-size: 12px; line-height: 1.35; opacity: .8; }

/* ===== Cartão da busca ===== */
.lp-comece .lp-agenda {
    min-width: 0;
    scroll-margin-top: 16px;
    padding: 20px 18px 22px;
    border-radius: var(--lp-raio);
    background: var(--lp-branco);
    box-shadow: 0 26px 50px -24px rgba(0, 0, 0, .5);
}

.lp-comece .lp-agenda-titulo { margin: 0 0 3px; font-size: 18px; font-weight: 700; letter-spacing: -.015em; color: var(--lp-grafite); }
.lp-comece .lp-agenda-sub { margin: 0 0 18px; font-size: 13px; color: var(--lp-texto-suave); }

@media (prefers-reduced-motion: reduce) {
    .lp-comece .lp-btn { transition: none; }
}

/* ===== Tablet ===== */
@media (min-width: 700px) {
    .lp-comece .lp-container { padding: 0 32px; }
    .lp-comece h1 { font-size: 44px; }
    .lp-comece .lp-marca { font-size: 12px; }
    .lp-comece h2 { font-size: 31px; }
    .lp-comece .lp-hero-grade { padding-top: 12px; padding-bottom: 44px; gap: 30px; }
    .lp-comece .cm-dois-preco strong { font-size: 25px; }
    .lp-comece .lp-agenda { padding: 28px 26px 30px; }
    .lp-comece .lp-agenda-titulo { font-size: 20px; }
}

/* ===== Desktop: texto e busca à esquerda, foto em coluna própria à direita, ação na primeira tela ===== */
@media (min-width: 1000px) {
    .lp-comece h1 { font-size: 58px; }
    .lp-comece .lp-hero-foto { position: absolute; top: 0; right: 0; bottom: 0; width: 44%; max-height: none; aspect-ratio: auto; }
    .lp-comece .lp-slide { object-position: 50% 40%; }
    .lp-comece .lp-hero-foto::after { inset: 0 auto 0 0; width: 26%; height: auto; background: linear-gradient(90deg, var(--lp-grafite), rgba(35, 31, 32, 0)); }
    .lp-comece .lp-hero-grade {
        grid-template-columns: minmax(0, 600px);
        align-items: start;
        padding-top: 56px;
        padding-bottom: 60px;
    }
    /* Com a foto ocupando ~44% da tela, a coluna do texto não pode passar por baixo dela. */
    .lp-comece .lp-hero-grade > * { max-width: calc(56vw - 96px); }
}

/* Celular: o hero é alto e estreito (o cartão vem embaixo do texto), e a foto cobrindo tudo
   virava uma fatia escura atrás do cartão. Aqui ela volta a ser uma faixa no topo, inteira e
   clara, que derrete no grafite atrás do texto. E o topo é compacto: a ação (busca, escolha)
   tem que entrar na primeira tela. */
@media (max-width: 699px) {
    .lp-comece .lp-hero-foto { aspect-ratio: 12 / 5; }
    .lp-comece .lp-hero-grade { gap: 18px; padding-top: 0; padding-bottom: 24px; }
    .lp-comece .lp-identidade { gap: 11px; }
    .lp-comece .lp-marca { margin-bottom: 8px; }
    .lp-comece .lp-local { font-size: 14px; line-height: 1.5; }
    .lp-comece .cm-dois { gap: 12px; }
    .lp-comece .cm-tk { --tk-c: 28px; }
    .lp-comece .cm-tk-canhoto { gap: 3px; padding: 0 5px; }
    .lp-comece .cm-tk-pp .cm-tk-canhoto i { width: 6px; height: 6px; }
    .lp-comece .cm-tk-exp .cm-tk-canhoto svg { width: 16px; height: 16px; }
    .lp-comece .cm-tk-corpo { padding: 12px 8px 13px 10px; }
    .lp-comece .cm-dois-preco strong { font-size: 17px; }
}