/* ==========================================================================
   PAGINAS.CSS — páginas internas (contato e afins)
   ========================================================================== */

/* --------------------------------------------------------------- CONTATO -- */
.pagina-contato__topo { max-width: 58ch; margin-block-end: var(--space-5); }
.pagina-contato__topo .title-1 { margin-block: var(--space-2) var(--space-2); }
.pagina-contato__topo .lead p { margin: 0; }

.pagina-contato__grid {
    display: grid;
    gap: var(--space-5);
}
@media (min-width: 900px) {
    .pagina-contato__grid { grid-template-columns: 1.2fr 1fr; gap: var(--space-6); }
}

.pagina-contato__form .trace,
.pagina-contato__canais .trace { margin-block-end: var(--space-3); }
.pagina-contato__form .title-3,
.pagina-contato__canais .title-3 { margin-block-end: 0.5rem; }
.pagina-contato__nota {
    font-size: var(--fs-small);
    color: var(--text-muted);
    margin-block-end: var(--space-3);
}

/* --- Canais diretos: lidos como ficha, não como lista de ícones --- */
.canais { border-block-start: 1px solid var(--line); margin-block: var(--space-3); }
.canal {
    display: grid;
    grid-template-columns: 8rem 1fr;
    gap: var(--space-2);
    align-items: baseline;
    padding-block: var(--space-2);
    border-block-end: 1px solid var(--line);
}
.canal__rotulo {
    font-size: var(--fs-micro);
    font-weight: 600;
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--text-dim);
}
.canal__valor {
    font-family: var(--font-data);
    font-size: 1.0625rem;
    color: var(--text);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease);
}
a.canal__valor:hover { color: var(--ztw-pink); }
.canal__valor--texto { font-size: var(--fs-small); line-height: 1.55; color: #C9C9D2; }

@media (max-width: 520px) {
    .canal { grid-template-columns: 1fr; gap: 0.25rem; }
}

/* --- Mapa --- */
.pagina-contato__mapa {
    margin-block-start: var(--space-5);
}
.pagina-contato__mapa iframe {
    width: 100%;
    aspect-ratio: 21 / 9;
    min-height: 280px;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    /* O embed do Google vem claro; isto o traz para o modo escuro do site */
    filter: grayscale(1) invert(0.92) hue-rotate(180deg);
}

/* --- Atalhos para os empreendimentos --- */
.pagina-contato__atalhos { padding-block-start: 0; }
.atalhos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-2);
    margin-block-start: var(--space-3);
}

.atalho__link {
    display: block;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    overflow: hidden;
    text-decoration: none;
    transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.atalho__link:hover { border-color: var(--accent); transform: translateY(-4px); }

.atalho__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.atalho__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.atalho__link:hover .atalho__media img { transform: scale(1.04); }
.atalho__media .placeholder { aspect-ratio: 4 / 3; border: 0; border-radius: 0; }

.atalho__corpo { display: block; padding: var(--space-3); }
.atalho__no {
    display: block;
    width: var(--node-size);
    height: var(--node-size);
    border-radius: 50%;
    border: var(--node-ring) solid var(--accent);
    margin-block-end: var(--space-2);
}
.atalho__nome {
    display: block;
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: 500;
    line-height: 1.2;
    color: var(--text);
    text-wrap: balance;
}
.atalho__local {
    display: block;
    margin-block-start: 0.4rem;
    font-size: var(--fs-small);
    line-height: 1.5;
    color: var(--text-muted);
}