/* Como funciona: layout das figuras e listas (arte SVG transparente, sem caixa). */
.cf .cf-fig { margin: 0; }
.cf .cf-fig img { display: block; width: 100%; height: auto; max-width: 34rem; margin-inline: auto; }
/* Hero "jornada em 3 estações": FULL-BLEED (padrão docs/design/PADRAO-HERO-3D.md). O SVG é o poster (primeira pintura) e o canvas
   Three.js entra por cima com crossfade, ocupando o hero inteiro. Sem círculos nem caixas: só gradientes LINEARES. */
.cf .cf-hero {
    position: relative; isolation: isolate; overflow: hidden; display: grid; align-items: center;
    min-height: min(52rem, calc(100svh - var(--nav-height)));
    background: var(--night);
}
.cf .cf-hero__art { position: absolute; inset: 0; z-index: -2; margin: 0; }
.cf .cf-hero__art img {
    position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; transform: none;
    transition: opacity .55s cubic-bezier(.22, 1, .36, 1);
}
.cf-hero-canvas {
    position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; opacity: 0;
    transition: opacity .55s cubic-bezier(.22, 1, .36, 1);
    -webkit-mask-image: linear-gradient(90deg, rgb(0 0 0 / .1) 0%, rgb(0 0 0 / .2) 22%, rgb(0 0 0 / .62) 42%, #000 60%), linear-gradient(180deg, #000 0, #000 calc(100% - 150px), transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, rgb(0 0 0 / .1) 0%, rgb(0 0 0 / .2) 22%, rgb(0 0 0 / .62) 42%, #000 60%), linear-gradient(180deg, #000 0, #000 calc(100% - 150px), transparent 100%);
    mask-composite: intersect;
}
.cf .cf-hero.is-cf-ready .cf-hero-canvas { opacity: 1; }
.cf .cf-hero.is-cf-ready .cf-hero__art img { opacity: 0; }
.cf .cf-hero::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(180deg, transparent calc(100% - 140px), var(--night)), linear-gradient(90deg, rgb(16 13 9 / .9) 0%, rgb(16 13 9 / .66) 26%, rgb(16 13 9 / .2) 46%, transparent 62%);
}
.cf .cf-hero .page-hero__grid { grid-template-columns: minmax(0, 1fr); }
.cf .cf-hero .page-hero__copy { max-width: min(36rem, 100%); }
@media (max-width: 768px) {
    /* hero alto como no desktop: a cena ocupa o corpo do hero e o texto assenta na base escura */
    .cf .cf-hero { align-items: end; padding-top: 7rem; min-height: min(52rem, calc(100svh - var(--nav-height))); }
    .cf .cf-hero__art { z-index: 0; }
    .cf-hero-canvas { z-index: 1; }
    .cf .cf-hero::after { z-index: 2; }
    .cf .cf-hero .page-hero__grid { position: relative; z-index: 3; }
    .cf-hero-canvas {
        -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 80%, transparent 100%);
        -webkit-mask-composite: source-over; mask-composite: add;
    }
    .cf .cf-hero::after { background: linear-gradient(180deg, rgb(16 13 9 / .12) 0%, rgb(16 13 9 / .22) 70%, var(--night) 100%); }
    .cf .cf-hero__art img { object-position: center; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .cf-hero-canvas { display: none; }
    .cf .cf-hero.is-cf-ready .cf-hero__art img { opacity: 1; }
}
/* Duas colunas: texto + figura ao lado, alinhados ao topo. --left inverte o lado. */
.cf .cf-split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(2rem, 6vw, 5rem); row-gap: var(--space-6); align-items: start; align-content: start; }
.cf .cf-split > .cf-fig, .cf .cf-split > .cf-aside { grid-column: 2; grid-row: 1 / span 6; align-self: start; }
.cf .cf-split > :not(.cf-fig):not(.cf-aside) { grid-column: 1; }
.cf .cf-split > .cf-fig { align-self: center; }
.cf .cf-split--left { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.cf .cf-split.cf-split--left > .cf-fig, .cf .cf-split.cf-split--left > .cf-aside { grid-column: 1; }
.cf .cf-split.cf-split--left > :not(.cf-fig):not(.cf-aside) { grid-column: 2; }
.cf .cf-aside { display: grid; gap: var(--space-8); position: sticky; top: 6rem; }
.cf .page-flow { list-style: none; display: grid; gap: var(--space-6); }
.cf .page-flow article { padding-bottom: var(--space-6); border-bottom: 1px solid var(--line-stone); }
.cf .page-flow li:last-child article { border-bottom: 0; }
.cf .flow-number { display: flex; align-items: center; gap: .625rem; color: var(--primary-ink-warm); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .08em; }
/* C2 (FX.md): ícone por passo; js/fx-steps.js desenha (stroke-dashoffset) e conta ao entrar. Sem JS/reduzido: pronto. */
.cf .flow-icon { flex: none; width: 1.75rem; height: 1.75rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.cf .flow-icon > * { stroke-dasharray: 1 2; stroke-dashoffset: 0; }
.cf .fx-steps-on .flow-icon > * { transition: stroke-dashoffset .7s var(--ease) calc(min(var(--fx-i, 0), 4) * 80ms); }
.cf .fx-steps-on .flow-icon > :nth-child(2) { transition-delay: calc(min(var(--fx-i, 0), 4) * 80ms + 180ms); }
.cf .fx-steps-on li:not(.is-drawn) .flow-icon > * { stroke-dashoffset: 1.02; }
@media (prefers-reduced-motion: reduce) { .cf .flow-icon > * { stroke-dashoffset: 0 !important; transition: none !important; } }
.cf .page-flow h3 { margin: var(--space-2) 0; font-size: 1.25rem; }
.cf .plain-list { display: grid; gap: var(--space-4); margin-top: var(--space-6); }
.cf .check-list, .cf .night-list { display: grid; gap: var(--space-3); padding-left: 1.25rem; margin-top: var(--space-6); }
.cf .confirmation-list { display: grid; gap: var(--space-4); margin-top: var(--space-6); }
.cf .confirmation-list dt { font-weight: 700; }
.cf .confirmation-list dd { color: var(--ink-muted); }
.cf .night-list { color: var(--on-night-muted); }
@media (max-width: 768px) {
    .cf .page-hero__grid, .cf .cf-split, .cf .cf-split--left { grid-template-columns: 1fr; }
    .cf .cf-split > .cf-fig, .cf .cf-split > .cf-aside, .cf .cf-split > :not(.cf-fig):not(.cf-aside),
    .cf .cf-split.cf-split--left > .cf-fig, .cf .cf-split.cf-split--left > .cf-aside,
    .cf .cf-split.cf-split--left > :not(.cf-fig):not(.cf-aside) { grid-column: 1; grid-row: auto; }
    .cf .cf-split > .cf-fig, .cf .cf-split > .cf-aside { order: -1; }
    /* El proceso: título e lista descem, as duas artes ficam juntas no topo da seção. */
    .cf .cf-proceso { display: flex; flex-direction: column; gap: var(--space-6); }
    .cf .cf-proceso > .cf-split { display: contents; }
    .cf .cf-proceso .cf-aside { order: -1; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
    .cf .cf-proceso .cf-aside .cf-fig img { max-width: 100%; }
    .cf .cf-split > .cf-fig { justify-self: center; width: 100%; max-width: 20rem; }
    .cf .cf-fig--hero { order: -1; justify-self: center; }
    .cf .cf-fig--hero img { max-width: 22rem; }
    .cf .cf-fig img { max-width: 20rem; }
    .cf .cf-aside { position: static; }
}