/*
    Complementos do Locto sobre o CSS compilado do template Vireo.

    O template é Tailwind purgado: só existem as classes que as 186 páginas
    dele usam. Tudo que o Locto precisa além disso mora aqui, escrito contra
    os tokens --ax-* para acompanhar tema claro/escuro e cor de destaque.
*/

/* ── Validação unobtrusive (jQuery Validate) ─────────────────────────────
   O jQuery Validate marca inputs com .input-validation-error e mensagens
   com .field-validation-error; o Vireo espera .is-invalid e
   .ax-field__message--error. Espelha as declarações. */
.input-validation-error,
.ax-input.input-validation-error,
.ax-select.input-validation-error,
.ax-textarea.input-validation-error {
    border-color: var(--ax-danger-500);
}

.input-validation-error:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ax-danger-500) 26%, transparent);
}

.field-validation-error {
    display: block;
    min-height: var(--ax-leading-xs);
    font-size: var(--ax-text-xs);
    color: var(--ax-danger-500);
}

.field-validation-valid { display: none; }

.validation-summary-errors {
    padding: var(--ax-space-3) var(--ax-space-4);
    border: 1px solid color-mix(in srgb, var(--ax-danger-500) 35%, transparent);
    border-radius: var(--ax-radius-md);
    background: color-mix(in srgb, var(--ax-danger-500) 10%, transparent);
    font-size: var(--ax-text-sm);
    color: var(--ax-danger-500);
}

.validation-summary-errors ul {
    margin: 0;
    padding-inline-start: 1.1em;
}

.validation-summary-valid { display: none; }

/* ── Cards/alertas soltos direto no conteúdo ─────────────────────────────
   O template dá padding-inline aos filhos diretos do .ax-main contando que
   sejam wrappers (page-head, grid, tabela). Quando o filho direto é um
   .ax-card ou .ax-alert — que têm borda e fundo próprios — esse padding vai
   para DENTRO do box e a borda encosta na sidebar e na lateral direita.
   Converte o gutter em margem para o box ficar destacado; o respiro interno
   do card continua vindo do .ax-card__body. */
.ax-main > .ax-card {
    padding-inline: 0;
    margin-inline: var(--ax-page-pad);
}

.ax-main > .ax-alert {
    margin-inline: var(--ax-page-pad);
}

/* ── Avatar de iniciais ──────────────────────────────────────────────────
   O template usa <img class="ax-avatar">; o Locto não tem fotos de perfil,
   então um <span> com as iniciais assume o mesmo lugar. */
span.ax-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ax-accent-wash, color-mix(in srgb, var(--ax-accent) 15%, transparent));
    color: var(--ax-accent);
    font-size: var(--ax-text-sm);
    font-weight: var(--ax-weight-semibold);
    letter-spacing: .02em;
    user-select: none;
}

span.ax-avatar--sm { width: 32px; height: 32px; font-size: var(--ax-text-xs); }
span.ax-avatar--lg { width: 40px; height: 40px; }

/* ── Visibilidade por largura ────────────────────────────────────────────
   Listas que viram cartões no celular: a tabela some abaixo de 768px e os
   cartões somem acima. Mesmo corte da navegação antiga. */
@media (min-width: 768px) {
    .locto-so-celular { display: none !important; }
}

@media (max-width: 767.98px) {
    .locto-so-desktop { display: none !important; }
}

/* ── Janelas da prévia de disponibilidade ────────────────────────────────
   Verde = livre, âmbar = reservada, cinza riscado = bloqueada. */
.locto-janela {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--ax-space-2);
    padding: var(--ax-space-1) var(--ax-space-2);
    margin-block-end: var(--ax-space-1);
    border-radius: var(--ax-radius-sm);
    font-size: var(--ax-text-xs);
}

.locto-janela--livre { background: color-mix(in srgb, var(--ax-success-500) 12%, transparent); }
.locto-janela--reservada { background: color-mix(in srgb, var(--ax-warning-500) 14%, transparent); }

.locto-janela--bloqueada {
    background: color-mix(in srgb, var(--ax-text-subtle) 12%, transparent);
    text-decoration: line-through;
}

/* ── Trilho de horas (páginas públicas da clínica) ───────────────────────
   Componente próprio do Locto, sem equivalente no template. Porta o
   desenho do site.css antigo para os tokens --ax-*: uma linha por dia,
   horas correndo na horizontal; ocupado aparece hachurado, não some. */
.locto-trilho { display: flex; flex-direction: column; gap: var(--ax-space-5); }
.locto-trilho--compacto { gap: var(--ax-space-3); }

.locto-trilho-dia { display: flex; flex-direction: column; gap: var(--ax-space-3); min-width: 0; }

.locto-trilho-rotulo {
    display: flex;
    align-items: baseline;
    gap: var(--ax-space-2);
    font-size: var(--ax-text-xs);
}

.locto-trilho-quando { font-weight: var(--ax-weight-semibold); color: var(--ax-text-strong); text-transform: capitalize; }
.locto-trilho-dia--hoje .locto-trilho-quando { color: var(--ax-accent); }
.locto-trilho-data { color: var(--ax-text-subtle); font-variant-numeric: tabular-nums; }
.locto-trilho-livres { margin-left: auto; color: var(--ax-text-subtle); font-variant-numeric: tabular-nums; }

/* A pista sangra até a borda no celular: avisa, sem seta, que há mais ao lado. */
.locto-trilho-pista {
    display: flex;
    gap: var(--ax-space-2);
    min-width: 0;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: var(--ax-border-strong) transparent;
    margin-inline: calc(var(--ax-space-4) * -1);
    padding-inline: var(--ax-space-4);
    padding-bottom: var(--ax-space-2);
    -webkit-overflow-scrolling: touch;
}

@media (min-width: 768px) {
    .locto-trilho-pista {
        margin-inline: 0;
        padding-inline: 0;
        flex-wrap: wrap;
        overflow-x: visible;
    }
}

.locto-hora {
    scroll-snap-align: start;
    flex: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    min-width: 104px;
    min-height: 44px;
    padding: var(--ax-space-2) var(--ax-space-3);
    border: 1px solid var(--ax-border);
    border-radius: var(--ax-radius-sm);
    background: var(--ax-surface);
    text-align: left;
    text-decoration: none;
    transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}

.locto-hora-faixa {
    font-size: var(--ax-text-sm);
    font-weight: var(--ax-weight-semibold);
    color: var(--ax-text-strong);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.locto-hora-nota { font-size: var(--ax-text-xs); color: var(--ax-text-muted); white-space: nowrap; }

.locto-hora--livre { border-left: 3px solid var(--ax-accent); cursor: pointer; }

.locto-hora--livre:hover {
    border-color: var(--ax-accent);
    background: var(--ax-accent-wash);
    transform: translateY(-1px);
}

.locto-hora--ocupada {
    background-color: color-mix(in srgb, var(--ax-text-strong) 3%, transparent);
    background-image: repeating-linear-gradient(
        -45deg,
        transparent 0 5px,
        color-mix(in srgb, var(--ax-text-strong) 6%, transparent) 5px 10px
    );
    cursor: default;
}

.locto-hora--ocupada .locto-hora-faixa {
    color: var(--ax-text-subtle);
    font-weight: var(--ax-weight-medium);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

.locto-hora--ocupada .locto-hora-nota { color: var(--ax-text-subtle); }

.locto-trilho--compacto .locto-hora {
    min-width: 0;
    min-height: 34px;
    padding: var(--ax-space-1) var(--ax-space-2);
}

.locto-trilho--compacto .locto-hora-faixa { font-size: var(--ax-text-xs); }

.locto-card-horas .locto-hora { min-width: 86px; }

.locto-vazio-trilho {
    padding: var(--ax-space-5);
    border: 1px dashed var(--ax-border-strong);
    border-radius: var(--ax-radius-md);
    text-align: center;
    color: var(--ax-text-muted);
    font-size: var(--ax-text-sm);
}

.locto-legenda-trilho {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ax-space-4);
    margin-top: var(--ax-space-4);
    font-size: var(--ax-text-xs);
    color: var(--ax-text-subtle);
}

.locto-legenda-item { display: inline-flex; align-items: center; gap: 6px; }

.locto-legenda-marca {
    width: 13px;
    height: 13px;
    border-radius: 3px;
    border: 1px solid var(--ax-border);
    flex: none;
}

.locto-legenda-marca--livre { background: var(--ax-surface); border-left: 3px solid var(--ax-accent); }

.locto-legenda-marca--ocupada {
    background-image: repeating-linear-gradient(
        -45deg,
        transparent 0 3px,
        color-mix(in srgb, var(--ax-text-strong) 16%, transparent) 3px 6px
    );
}

/* ── Cabeçalho público da clínica ────────────────────────────────────────
   Aqui a clínica é a marca; o Locto é o rodapé. */
.locto-clinica { margin-block-end: var(--ax-space-6); }

.locto-clinica-topo {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ax-space-3);
}

.locto-clinica-nome {
    margin: 0;
    font-family: var(--ax-font-display);
    font-size: var(--ax-text-3xl, 1.75rem);
    font-weight: var(--ax-weight-semibold);
    letter-spacing: -.02em;
    color: var(--ax-text-strong);
}

.locto-clinica-local {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: var(--ax-space-1);
    font-size: var(--ax-text-sm);
    color: var(--ax-text-muted);
}

.locto-clinica-desc {
    margin: var(--ax-space-3) 0 0;
    max-width: 62ch;
    font-size: var(--ax-text-sm);
    color: var(--ax-text-muted);
    line-height: 1.6;
}

.locto-clinica-tel {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: var(--ax-space-2) var(--ax-space-3);
    border: 1px solid var(--ax-border);
    border-radius: var(--ax-radius-pill);
    font-size: var(--ax-text-sm);
    color: var(--ax-text);
    text-decoration: none;
}

.locto-clinica-tel:hover { border-color: var(--ax-accent); color: var(--ax-accent); }

.locto-placar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ax-space-3);
    margin-top: var(--ax-space-4);
    font-size: var(--ax-text-sm);
    color: var(--ax-text-muted);
}

.locto-placar b { color: var(--ax-text-strong); font-weight: var(--ax-weight-semibold); }

.locto-placar-sep {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--ax-border-strong);
}

/* ── Página pública da sala ──────────────────────────────────────────────*/
.locto-galeria {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--ax-space-2);
}

.locto-galeria img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: var(--ax-radius-md);
    display: block;
}

.locto-sala-grade { display: grid; gap: var(--ax-space-6); grid-template-columns: 1fr; }
.locto-sala-grade > * { min-width: 0; }

.locto-reservar-lado { display: none; }

@media (min-width: 992px) {
    .locto-sala-grade { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
    .locto-reservar-lado { display: block; position: sticky; top: calc(var(--ax-space-4) + 64px); }
}

/* Barra fixa no celular: o bloco lateral cairia no fim de uma página longa,
   onde ninguém chega. */
.locto-acao-fixa {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: var(--ax-space-3);
    padding: var(--ax-space-3) var(--ax-space-4);
    padding-bottom: calc(var(--ax-space-3) + env(safe-area-inset-bottom));
    background: var(--ax-surface-solid, var(--ax-surface));
    border-top: 1px solid var(--ax-border);
}

.locto-acao-fixa .ax-btn { flex: 1; }

.locto-acao-info { display: flex; flex-direction: column; line-height: 1.2; }
.locto-acao-info b { font-size: var(--ax-text-base, 1rem); color: var(--ax-text-strong); }
.locto-acao-info span { font-size: var(--ax-text-xs); color: var(--ax-text-subtle); }

@media (min-width: 992px) {
    .locto-acao-fixa { display: none; }
}

/* Reserva o espaço da barra fixa no fim da página. */
.locto-acao-espaco { block-size: 76px; }

@media (min-width: 992px) {
    .locto-acao-espaco { display: none; }
}

/* ── Vitrine (Home para visitante) ───────────────────────────────────────*/
.locto-heroi { display: grid; gap: var(--ax-space-8); align-items: center; grid-template-columns: 1fr; }

@media (min-width: 992px) {
    .locto-heroi { grid-template-columns: minmax(0, 1fr) 420px; }
}

.locto-display {
    margin: 0;
    font-family: var(--ax-font-display);
    font-size: clamp(1.9rem, 4.5vw, 2.8rem);
    font-weight: var(--ax-weight-semibold);
    letter-spacing: -.025em;
    line-height: 1.12;
    color: var(--ax-text-strong);
}

.locto-amostra {
    border: 1px solid var(--ax-border);
    border-radius: var(--ax-radius-lg);
    background: var(--ax-surface);
    overflow: hidden;
    box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .25);
}

.locto-amostra-barra {
    display: flex;
    align-items: center;
    gap: var(--ax-space-2);
    padding: var(--ax-space-2) var(--ax-space-3);
    border-bottom: 1px solid var(--ax-border);
    background: var(--ax-surface-subtle, transparent);
}

.locto-amostra-ponto {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--ax-accent);
    flex: none;
}

.locto-amostra-url { font-size: var(--ax-text-xs); color: var(--ax-text-subtle); font-family: var(--ax-font-mono, monospace); }
.locto-amostra-url b { color: var(--ax-text-strong); font-weight: var(--ax-weight-semibold); }

.locto-amostra-corpo { padding: var(--ax-space-4); }

.locto-amostra-titulo {
    font-size: var(--ax-text-sm);
    font-weight: var(--ax-weight-semibold);
    color: var(--ax-text-strong);
    margin-block-end: var(--ax-space-3);
}

/* ── FullCalendar sob o preflight do Tailwind ────────────────────────────
   O reset zera borda/fundo de <button>; devolve o essencial dentro do
   escopo do calendário e alinha as cores ao tema. */
.locto-calendario .fc {
    --fc-border-color: var(--ax-border);
    --fc-button-bg-color: var(--ax-accent);
    --fc-button-border-color: var(--ax-accent);
    --fc-button-hover-bg-color: color-mix(in srgb, var(--ax-accent) 85%, black);
    --fc-button-hover-border-color: color-mix(in srgb, var(--ax-accent) 85%, black);
    --fc-button-active-bg-color: color-mix(in srgb, var(--ax-accent) 75%, black);
    --fc-button-active-border-color: color-mix(in srgb, var(--ax-accent) 75%, black);
    --fc-today-bg-color: color-mix(in srgb, var(--ax-accent) 8%, transparent);
    --fc-page-bg-color: transparent;
    font-size: var(--ax-text-sm);
}

.locto-calendario .fc .fc-button {
    padding: .35em .65em;
    border: 1px solid var(--fc-button-border-color);
    border-radius: var(--ax-radius-md);
    background: var(--fc-button-bg-color);
    color: var(--ax-on-accent, #fff);
    font-size: var(--ax-text-sm);
}

.locto-calendario .fc .fc-button:disabled { opacity: .55; }

/* ── Shell sem barra lateral (visitante anônimo no _Layout) ──────────────
   A casca do painel reserva --ax-sidebar-w (264px) para a sidebar: a .ax-shell
   via margin-inline-start e o .ax-header (posicionado) via inset-inline-start.
   Sem login a sidebar não existe no DOM, então esse recuo vira vão vazio tanto
   no conteúdo quanto na barra superior. Zerar a própria variável no escopo
   colapsa os dois de uma vez — o cabeçalho é descendente da .ax-shell e herda
   o valor. (margin explícita mantida como reforço.) */
.ax-shell.ax-shell--sem-barra { --ax-sidebar-w: 0px; margin-inline-start: 0; }

/* ── Vitrine pública: casca própria (sem barra lateral do painel) ────────
   A página /c/{slug} é uma vitrine, não uma tela do painel. Barra discreta
   do Locto no topo, conteúdo centrado, rodapé — tudo com os tokens do tema. */
.locto-publico-body {
    display: flex;
    flex-direction: column;
    min-block-size: 100vh;
}

.locto-publico-topbar {
    position: sticky;
    inset-block-start: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: var(--ax-space-3);
    padding: var(--ax-space-3) var(--ax-space-5);
    border-block-end: 1px solid var(--ax-border);
    background: color-mix(in srgb, var(--ax-surface) 88%, transparent);
    backdrop-filter: blur(8px);
}

.locto-publico-topbar__spacer { flex: 1 1 auto; }

.locto-publico-marca {
    display: inline-flex;
    align-items: center;
    gap: var(--ax-space-2);
    text-decoration: none;
    color: var(--ax-text-strong);
}

.locto-publico-marca .ax-sidebar__wordmark {
    font-family: var(--ax-font-display);
    font-weight: var(--ax-weight-semibold);
    letter-spacing: .02em;
}

/* Marca da clínica na barra (modelos marca/centralizada/minimalista). */
.locto-publico-marca--clinica { gap: var(--ax-space-2); }

.locto-publico-marca__logo {
    inline-size: 30px;
    block-size: 30px;
    border-radius: var(--ax-radius-sm);
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--ax-border);
    padding: 2px;
    flex: none;
}

.locto-publico-marca__nome {
    font-family: var(--ax-font-display);
    font-weight: var(--ax-weight-semibold);
    font-size: var(--ax-text-base, 1rem);
    letter-spacing: -.01em;
    color: var(--ax-text-strong);
}

/* Modelo "centralizada": a marca ao centro, ações à direita. */
.locto-publico-topbar--centralizada { position: sticky; }
@media (min-width: 640px) {
    .locto-publico-topbar--centralizada .locto-publico-marca {
        position: absolute;
        inset-inline-start: 50%;
        transform: translateX(-50%);
    }
}

/* Modelo "minimalista": barra fina, transparente, sem logo. */
.locto-publico-topbar--minimalista {
    background: transparent;
    border-block-end: 0;
    backdrop-filter: none;
    padding-block: var(--ax-space-2);
}

.locto-publico-topbar--minimalista .locto-publico-marca__nome {
    font-size: var(--ax-text-sm);
    font-weight: var(--ax-weight-medium);
}

.locto-publico {
    flex: 1 1 auto;
    inline-size: 100%;
    max-inline-size: 1120px;
    margin-inline: auto;
    padding: var(--ax-space-6) var(--ax-space-5) var(--ax-space-8);
    /* Dono único do ritmo vertical: cada bloco de topo (hero, Sobre, Salas,
       seções de baixo) herda este espaçamento, sem margens próprias. */
    display: flex;
    flex-direction: column;
    gap: var(--ax-space-6);
}

/* Bloco "Salas disponíveis": o rótulo cola na grade; o bloco inteiro entra
   no ritmo do container da vitrine. */
.locto-salas__titulo { margin-block-end: var(--ax-space-3); }

.locto-salas__grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--ax-space-4);
}

.locto-publico-footer {
    inline-size: 100%;
    max-inline-size: 1120px;
    margin-inline: auto;
    padding-inline: var(--ax-space-5);
}

/* ── Hero da clínica ─────────────────────────────────────────────────────*/
.locto-hero {
    border: 1px solid var(--ax-border);
    border-radius: var(--ax-radius-lg);
    background: var(--ax-surface);
    overflow: hidden;
}

/* Variante sem capa: uma lavagem suave do acento no topo do corpo. */
.locto-hero--liso .locto-hero__corpo {
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--ax-accent) 10%, transparent),
            transparent 120px);
}

.locto-hero__capa {
    position: relative;
    block-size: clamp(150px, 26vw, 240px);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
}

/* Scrim para o nome ficar legível sobre qualquer foto. */
.locto-hero__capa::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, .62), rgba(0, 0, 0, .12) 55%, transparent);
}

.locto-hero__capa-id {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    gap: var(--ax-space-3);
    padding: var(--ax-space-5);
}

.locto-hero__corpo {
    padding: var(--ax-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--ax-space-3);
}

.locto-hero__id {
    display: flex;
    align-items: center;
    gap: var(--ax-space-3);
    flex-wrap: wrap;
}

.locto-hero__id .locto-hero__tel { margin-inline-start: auto; }

.locto-hero__logo {
    inline-size: 60px;
    block-size: 60px;
    border-radius: var(--ax-radius-md);
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--ax-border);
    padding: 4px;
    flex: none;
}

.locto-hero__capa-id .locto-hero__logo {
    inline-size: 64px;
    block-size: 64px;
    box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .5);
}

.locto-hero__nome {
    margin: 0;
    font-family: var(--ax-font-display);
    font-size: var(--ax-text-3xl, 1.75rem);
    font-weight: var(--ax-weight-semibold);
    letter-spacing: -.02em;
    color: var(--ax-text-strong);
    line-height: 1.1;
}

.locto-hero__nome--sobre { color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, .45); }

.locto-hero__local {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-block-start: var(--ax-space-1);
    font-size: var(--ax-text-sm);
    color: var(--ax-text-muted);
}

.locto-hero__local--sobre { color: rgba(255, 255, 255, .88); }

.locto-hero__desc {
    margin: 0;
    max-inline-size: 70ch;
    font-size: var(--ax-text-sm);
    color: var(--ax-text-muted);
    line-height: 1.6;
}

.locto-hero__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ax-space-2);
}

.locto-hero__chip {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: var(--ax-space-2) var(--ax-space-3);
    border: 1px solid var(--ax-border);
    border-radius: var(--ax-radius-pill);
    background: var(--ax-surface-subtle, transparent);
    font-size: var(--ax-text-sm);
    color: var(--ax-text-muted);
}

.locto-hero__chip b { color: var(--ax-text-strong); font-weight: var(--ax-weight-semibold); }

.locto-hero__chip--destaque {
    border-color: color-mix(in srgb, var(--ax-accent) 45%, var(--ax-border));
    background: color-mix(in srgb, var(--ax-accent) 10%, transparent);
    color: var(--ax-text);
}

.locto-hero__chip-nota { font-size: var(--ax-text-xs); color: var(--ax-text-subtle); }

/* ── Seções de conteúdo da vitrine ───────────────────────────────────────
   O espaçamento entre seções vem do gap do .locto-publico (blocos de topo)
   ou do gap de .locto-secoes-abaixo (grade) — a seção não carrega margem. */
.locto-secao__texto {
    margin: 0;
    max-inline-size: 70ch;
    white-space: pre-line;
    font-size: var(--ax-text-sm);
    color: var(--ax-text);
    line-height: 1.6;
}

.locto-secoes-abaixo {
    display: grid;
    gap: var(--ax-space-4);
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .locto-secoes-abaixo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Diferenciais costuma ser o bloco mais longo: ocupa a linha inteira. */
    .locto-secoes-abaixo > [aria-label="Diferenciais"] { grid-column: 1 / -1; }
}

.locto-diferenciais {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--ax-space-2);
    grid-template-columns: 1fr;
}

@media (min-width: 560px) {
    .locto-diferenciais { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.locto-diferenciais__item {
    display: flex;
    align-items: flex-start;
    gap: var(--ax-space-2);
    font-size: var(--ax-text-sm);
    color: var(--ax-text);
}

.locto-diferenciais__check {
    flex: none;
    margin-block-start: 1px;
    color: var(--ax-accent);
}