/* =========================================================================
   SECTION — Consultoria e assessoria

   Bento: cinco blocos com papéis diferentes, e não uma repetição de cards
   iguais. As áreas são nomeadas em todos os breakpoints — inclusive no mobile,
   onde a grade é de coluna única — para que a posição de cada bloco seja
   sempre explícita e nunca dependa de colocação automática.

   Mobile-first: coluna única na ordem de leitura → duas colunas no tablet →
   as três colunas da referência no desktop.
   ====================================================================== */

.consulting {
    position: relative;
    isolation: isolate;
    padding-block: var(--space-section);
    /* Superfície branca: alterna com a faixa cinza da seção de cursos logo
       acima, sem precisar de borda dura entre as duas. */
    background-color: var(--color-bg);
}

/* -------------------------------------------------------------------------
   Bento
   ---------------------------------------------------------------------- */
.consulting__bento {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "monthly"
        "spot"
        "scope"
        "case"
        "support";
    gap: var(--space-4);
    margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.consulting-card--monthly { grid-area: monthly; }
.consulting-card--spot    { grid-area: spot; }
.consulting-card--scope   { grid-area: scope; }
.consulting-card--case    { grid-area: case; }
.consulting-card--support { grid-area: support; }

/* -------------------------------------------------------------------------
   Card — base comum aos cinco blocos
   Mesma linguagem do `format-card` da página de cursos: superfície branca,
   raio grande, sombra curta e "lift" de 4px no hover.
   ---------------------------------------------------------------------- */
.consulting-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xs);
    transition:
        transform var(--dur-base) var(--ease-spring),
        border-color var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out);
}

@media (hover: hover) {
    .consulting-card:hover {
        transform: translateY(-4px);
        border-color: var(--brand-200);
        box-shadow: var(--shadow-md);
    }
}

.consulting-card__tag {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--brand-600);
}

.consulting-card__icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: none;
    color: var(--brand-600);
    background-color: var(--brand-50);
    border-radius: var(--radius-md);
}

.consulting-card__title {
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-tight);
    color: var(--color-text);
}

.consulting-card__text {
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
    color: var(--color-text-soft);
}

/* Ícone à esquerda, título e apoio à direita — usado nos blocos de conteúdo. */
.consulting-card__head {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}

.consulting-card__head > div {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
}

/* Lista vertical de pontos (card recorrente). */
.consulting-card__list {
    display: grid;
    gap: var(--space-2);
}

.consulting-card__list li,
.consulting-card__grid li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
    color: var(--color-text-soft);
}

.consulting-card__list .icon,
.consulting-card__grid .icon {
    /* Alinha o ícone com a primeira linha do texto, e não com o topo da caixa. */
    margin-top: 0.2em;
    color: var(--brand-500);
}

/* Checklist de entregáveis — uma coluna no celular, duas a partir de 600px.
   Ancorado na base do card: no desktop ele divide a linha com o card de
   assinatura recorrente, e as duas listas terminam na mesma altura. */
.consulting-card__grid {
    display: grid;
    gap: var(--space-2) var(--space-4);
    margin-top: auto;
    padding-top: var(--space-1);
}

/* O CTA e os canais são empurrados para a base: os cards da mesma linha
   terminam alinhados mesmo com quantidades diferentes de texto. */
.consulting-card__cta {
    margin-top: auto;
    padding-top: var(--space-1);
}

/* Link de texto com seta — ação secundária, sem peso de botão. */
.consulting-card__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: auto;
    padding-top: var(--space-2);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--brand-600);
    transition: gap var(--dur-base) var(--ease-out);
}

.consulting-card__link:hover {
    gap: var(--space-3);
}

.consulting-card__note {
    padding-top: var(--space-3);
    font-size: var(--fs-xs);
    line-height: var(--lh-snug);
    color: var(--color-text-muted);
    border-top: 1px solid var(--color-border);
}

/* -------------------------------------------------------------------------
   Superfície da marca — o formato recorrente ancora a grade
   Vermelho sólido (#CE1507), sem degradê: a profundidade vem da sombra
   colorida, como no resto do site.
   ---------------------------------------------------------------------- */
.consulting-card--brand {
    color: #fff;
    background-color: var(--brand-500);
    border-color: var(--brand-500);
    box-shadow: var(--shadow-brand);
}

/* -------------------------------------------------------------------------
   Superfície grafite — o formato sob demanda
   Segundo ponto de contraste da composição sem introduzir uma segunda cor:
   o vermelho continua sendo o único acento cromático da página.
   ---------------------------------------------------------------------- */
.consulting-card--dark {
    color: #fff;
    background-color: var(--ink-900);
    border-color: var(--ink-900);
    box-shadow: var(--shadow-lg);
}

/* Inversões comuns às duas superfícies escuras. */
.consulting-card--brand .consulting-card__tag,
.consulting-card--dark .consulting-card__tag {
    color: rgba(255, 255, 255, 0.72);
}

.consulting-card--brand .consulting-card__icon,
.consulting-card--dark .consulting-card__icon {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.18);
}

.consulting-card--brand .consulting-card__title,
.consulting-card--dark .consulting-card__title {
    color: #fff;
}

.consulting-card--brand .consulting-card__text,
.consulting-card--dark .consulting-card__text {
    color: rgba(255, 255, 255, 0.86);
}

.consulting-card--brand .consulting-card__list li {
    color: rgba(255, 255, 255, 0.92);
}

.consulting-card--brand .consulting-card__list .icon {
    color: #fff;
}

.consulting-card--dark .consulting-card__link {
    color: #fff;
}

/* O anel de foco vermelho desaparece sobre as duas superfícies escuras. */
.consulting-card--brand :focus-visible,
.consulting-card--dark :focus-visible {
    outline-color: #fff;
}

@media (hover: hover) {
    .consulting-card--brand:hover {
        border-color: var(--brand-500);
        box-shadow: var(--shadow-brand-hover);
    }

    .consulting-card--dark:hover {
        border-color: var(--ink-900);
        box-shadow: var(--shadow-lg);
    }
}

/* -------------------------------------------------------------------------
   Painel "como funciona" — número de destaque e contato direto
   É o bloco de conversão da seção: os canais são links reais, não ilustração.
   ---------------------------------------------------------------------- */
.consulting-stats {
    display: grid;
    gap: var(--space-4);
    margin-top: var(--space-1);
}

/* Hairline entre os números, no lugar de mais um espaço vazio. */
.consulting-stats li + li {
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.consulting-stat {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.consulting-stat__value {
    font-family: var(--font-numeric);
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
    line-height: 1;
    letter-spacing: var(--ls-tighter);
    color: var(--brand-500);
    font-variant-numeric: tabular-nums;
}

.consulting-stat__unit {
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-tight);
    color: var(--brand-500);
}

.consulting-stat__label {
    max-width: 34ch;
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
    color: var(--color-text-soft);
}

.consulting-card__channels {
    margin-top: auto;
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.consulting-card__channels-title {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--ink-400);
}

.consulting-channels {
    display: grid;
    gap: var(--space-1);
    margin-top: var(--space-3);
}

.consulting-channel {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2);
    border-radius: var(--radius-md);
    transition:
        background-color var(--dur-base) var(--ease-out),
        transform var(--dur-fast) var(--ease-out);
}

.consulting-channel:hover {
    background-color: var(--ink-050);
}

.consulting-channel:active {
    transform: scale(0.99);
}

.consulting-channel__icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: none;
    color: var(--brand-600);
    background-color: var(--brand-50);
    border-radius: var(--radius-sm);
}

.consulting-channel__text {
    display: grid;
    min-width: 0;
    line-height: var(--lh-snug);
}

.consulting-channel__text strong {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--color-text);
}

.consulting-channel__text small {
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    /* Um endereço de e-mail cortado por reticências não serve para nada: em
       coluna estreita ele quebra em duas linhas em vez de desaparecer. */
    overflow-wrap: anywhere;
}

.consulting-channel__arrow {
    margin-left: auto;
    color: var(--ink-300);
    transition: transform var(--dur-base) var(--ease-spring);
}

.consulting-channel:hover .consulting-channel__arrow {
    transform: translateX(3px);
}

/* -------------------------------------------------------------------------
   Rodapé da seção
   ---------------------------------------------------------------------- */
.consulting__footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.consulting__note {
    max-width: 60ch;
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
    color: var(--color-text-muted);
    text-align: center;
}

/* =========================================================================
   Breakpoints
   ====================================================================== */

/* O checklist de entregáveis ganha a segunda coluna assim que cabe. */
@media (min-width: 600px) {
    .consulting-card__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Tablet — duas colunas: os dois formatos lado a lado, entregáveis em faixa
   inteira e a linha final com o caso e o painel de contato. */
@media (min-width: 768px) {
    .consulting__bento {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "monthly spot"
            "scope   scope"
            "case    support";
        gap: var(--space-5);
    }
}

/* Desktop — a composição da referência: coluna de formatos à esquerda, os dois
   blocos de conteúdo no centro e o painel de contato ocupando a altura inteira
   da direita. Doze colunas dão a proporção 4 / 5 / 3. */
@media (min-width: 1024px) {
    .consulting__bento {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        grid-template-areas:
            "monthly monthly monthly monthly scope scope scope scope scope support support support"
            "spot    spot    spot    spot    case  case  case  case  case  support support support";
    }

    .consulting-card {
        padding: var(--space-6);
    }

    /* Toda a grade entra na mesma dobra: o escalonamento das entradas só faz
       sentido aqui. Abaixo do desktop cada bloco aparece sozinho durante a
       rolagem, e qualquer atraso viraria espera. */
    .consulting-card--spot    { --delay: 60ms; }
    .consulting-card--scope   { --delay: 120ms; }
    .consulting-card--case    { --delay: 180ms; }
    .consulting-card--support { --delay: 240ms; }
}

@media (min-width: 1440px) {
    .consulting-stat__value {
        font-size: var(--fs-3xl);
    }
}

/* Alvo de toque mínimo nos canais de contato. */
@media (pointer: coarse) {
    .consulting-channel {
        min-height: 44px;
    }
}