/* Contacto: ilustrações autorais (SVG transparente), layout por secção. */
.ct .page-hero__art img { width: min(100%, 22rem); max-height: 22rem; }

.ct .two-column-copy,
.ct .split-content { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.ct .plain-list { display: grid; gap: var(--space-6); }
.ct .plain-list p { color: var(--ink-muted); }
.ct .confirmation-list { display: grid; gap: var(--space-4); }
.ct .confirmation-list dt { font-weight: 700; }
.ct .confirmation-list dd { color: var(--ink-muted); }
.ct .night-list { display: grid; gap: var(--space-3); padding-left: 1.25rem; color: var(--on-night-muted); }
.ct .night-list li::marker { color: var(--primary); }
/* C3 (FX.md): aurora + grelha sob o cursor atrás do conteúdo; fundo da secção intacto; grelha só ponteiro fino. */
.sk-ambient-host { --mx: 50%; --my: 40%; position: relative; isolation: isolate; }
.sk-ambient.fx-aurora { position: absolute; inset: 0; z-index: -1; background: none; opacity: .7; pointer-events: none; }
.sk-ambient.fx-cursor-grid { --mx: inherit; --my: inherit; }
.sk-ambient.fx-cursor-grid::after { opacity: 0; }
.fx-lit:hover > .sk-ambient.fx-cursor-grid::after { opacity: .8; }
@media not all and (hover: hover) and (pointer: fine) { .sk-ambient.fx-cursor-grid::after { display: none; } }

/* 4 rotas: mini-ilustração por cartão */
.ct .contact-routes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); }
.contact-route__art { display: block; width: 100%; max-width: 100%; height: auto; margin: 0 0 var(--space-4); }

/* mapa de Paiporta */
.ct-map { display: block; grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 100%; max-width: 34rem; height: auto; margin: 0; }
.ct .two-column-copy > :not(.ct-map) { grid-column: 1; }

/* canais */
.ct-channels-art { display: block; grid-column: 1; grid-row: 1 / span 2; align-self: center; width: 100%; max-width: 34rem; height: auto; margin: 0; }
.ct .split-content > :not(.ct-channels-art) { grid-column: 2; }

/* checklist (night): arte ao lado da lista */
.ct-night-art { display: block; width: 100%; max-width: 34rem; height: auto; margin: 0 auto; }
.ct .page-section--night__content { align-items: center; }
.ct-night-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.ct-night-grid > :not(.ct-night-art) { grid-column: 1; }
.ct-night-art { grid-column: 2; grid-row: 1 / span 2; }

@media (max-width: 768px) {
    .ct .two-column-copy,
    .ct .split-content,
    .ct-night-grid { grid-template-columns: 1fr; }
    .ct .contact-routes { grid-template-columns: 1fr; }
    .contact-route__art { max-width: 20rem; margin-inline: auto; }
    .ct-night-grid > :not(.ct-night-art), .ct-night-art { grid-column: 1; grid-row: auto; }
    .ct .two-column-copy > :not(.ct-map),
    .ct .split-content > :not(.ct-channels-art) { grid-column: 1; }
    .ct-map, .ct-channels-art { order: -1; max-width: 20rem; margin-inline: auto; }
    .ct-map { grid-column: 1; grid-row: auto; }
    .ct-channels-art { grid-column: 1; grid-row: auto; }
    .ct-night-art { max-width: 20rem; order: -1; }
}
/* Seção escura: textos juntos no topo da coluna; só a arte centraliza (sem vão de ~150px). */
.ct-night-grid { grid-template-rows: auto 1fr; align-items: start; }
.ct-night-grid > .ct-night-art { align-self: center; }

/* Hero de contacto: FULL-BLEED (padrão docs/design/PADRAO-HERO-3D.md). O SVG é o poster (primeira pintura) e o canvas Three.js
   (js/contacto-hero.js) entra por cima com crossfade, ocupando o hero inteiro. Só gradientes LINEARES: nada de círculo nem caixa. */
.ct .ct-hero {
    position: relative; isolation: isolate; overflow: hidden; display: grid; align-items: center;
    min-height: min(52rem, calc(100svh - var(--nav-height)));
    background: var(--night);
}
.ct .ct-hero__art { position: absolute; inset: 0; z-index: -2; margin: 0; }
.ct .ct-hero__art img {
    position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; object-position: center; transform: none;
    transition: opacity .55s cubic-bezier(.22, 1, .36, 1);
}
.ct-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;
}
.ct .ct-hero.is-ct-ready .ct-hero-canvas { opacity: 1; }
.ct .ct-hero.is-ct-ready .ct-hero__art img { opacity: 0; }
.ct .ct-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%);
}
.ct .ct-hero .page-hero__grid { grid-template-columns: minmax(0, 1fr); }
.ct .ct-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 */
    .ct .ct-hero { align-items: end; padding-top: 7rem; min-height: min(52rem, calc(100svh - var(--nav-height))); }
    .ct .ct-hero__art { z-index: 0; }
    .ct-hero-canvas { z-index: 1; }
    .ct .ct-hero::after { z-index: 2; }
    .ct .ct-hero .page-hero__grid { position: relative; z-index: 3; }
    .ct-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;
    }
    .ct .ct-hero::after { background: linear-gradient(180deg, rgb(16 13 9 / .12) 0%, rgb(16 13 9 / .22) 70%, var(--night) 100%); }
    .ct .ct-hero__art img { object-position: center; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .ct-hero-canvas { display: none; }
    .ct .ct-hero.is-ct-ready .ct-hero__art img { opacity: 1; }
}