/* ==========================================================================
   FRONT-PAGE.CSS
   ========================================================================== */

/* ---------------------------------------------------------------- HERO -- */
.hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: flex-end;
    padding-block: var(--space-6) var(--space-5);
    overflow: hidden;
}
.hero__media { position: absolute; inset: 0; }
.hero__media img,
.hero__media video { width: 100%; height: 100%; object-fit: cover; }

.hero__scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(12,12,14,0.55) 0%, rgba(12,12,14,0.15) 35%, rgba(12,12,14,0.95) 100%),
        linear-gradient(90deg, rgba(12,12,14,0.8) 0%, rgba(12,12,14,0.1) 60%);
}

.hero__content { position: relative; }
.hero__content .eyebrow { margin-block-end: var(--space-3); }
.hero__content .title-hero { margin-block-end: var(--space-3); max-width: 18ch; }
.hero__content .lead { margin-block-end: var(--space-4); }

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Rail de dados — traço vertical com nós, no canto direito */
.hero__rail {
    position: absolute;
    inset-block: auto var(--space-5);
    inset-inline-end: var(--gutter);
    display: flex;
    gap: var(--space-3);
    padding-inline-start: var(--space-2);
}
.hero__rail .trace { flex: 0 0 auto; }
.hero__rail ul { display: flex; flex-direction: column; gap: var(--space-2); }
.hero__rail strong {
    display: block;
    font-family: var(--font-data);
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.hero__rail span {
    font-size: var(--fs-micro);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--text-dim);
}
@media (max-width: 1100px) { .hero__rail { display: none; } }


/* ----------------------------------------------------------- MANIFESTO -- */
.manifesto .title-1 { margin-block: var(--space-2) var(--space-3); }
.manifesto .lead { margin-block-end: var(--space-3); }


/* -------------------------------------------------------------- TORRES -- */
.torres > .container { margin-block-end: var(--space-4); }
.torres .title-1 { margin-block-start: var(--space-2); }

.torre { padding-block: var(--space-4); border-block-start: 1px solid var(--line); }
.torre:first-of-type { border-block-start: 0; }

.torre__inner {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    align-items: center;
    gap: var(--space-5);
}
.torre:nth-of-type(even) .torre__inner > .torre__info { order: 2; }

.torre__info > * + * { margin-block-start: var(--space-2); }
.torre__tagline {
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    color: var(--accent);
    font-style: italic;
}
.torre__endereco { color: var(--text-muted); font-size: var(--fs-small); }
.torre__info .datasheet { margin-block: var(--space-3); }

.torre__media {
    position: relative;
    border-radius: var(--radius-card);
    overflow: hidden;
    aspect-ratio: 4 / 3;
}
.torre__media img { width: 100%; height: 100%; object-fit: cover; }
/* Filete do acento na base da imagem — assina a torre sem tingir o render */
.torre__media::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    height: 2px;
    background: var(--accent);
}

@media (max-width: 900px) {
    .torre__inner { grid-template-columns: 1fr; gap: var(--space-3); }
    .torre:nth-of-type(even) .torre__inner > .torre__info { order: 0; }
}


/* ------------------------------------------------------------- ITAPEMA -- */
.itapema__inner {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--space-5);
    align-items: end;
}
.itapema .title-1 { margin-block: var(--space-2) var(--space-3); }
@media (max-width: 900px) { .itapema__inner { grid-template-columns: 1fr; } }


/* ---------------------------------------------------------------- BLOG -- */
.blog-home .title-1 { margin-block: var(--space-2) var(--space-4); }
.blog-home__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-3);
}
.blog-home .card__body .lead { margin-block-start: 0.75rem; font-size: var(--fs-small); }


/* ------------------------------------------------------------- CONTATO -- */
.contato .title-1 { margin-block: var(--space-2) var(--space-2); }
.contato .lead { margin-block-end: var(--space-4); }

.form-lead__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
@media (max-width: 620px) { .form-lead__row { grid-template-columns: 1fr; } }

.datasheet__nota {
    margin-block-start: 0.6rem;
    font-size: var(--fs-micro);
    line-height: 1.5;
    color: var(--text-dim);
    max-width: 34ch;
}

/* O trilho do hero é um momento de assinatura — usa o gradiente, não o cinza */
.hero__rail .trace--v { background: var(--gradient-ztw); width: 2px; }
.hero__rail .trace--v::before,
.hero__rail .trace--v::after { color: var(--ztw-mauve); background: var(--void); }

/* Seção da cidade com imagem de fundo opcional */
.itapema--com-img { position: relative; }
.itapema__media { position: absolute; inset: 0; overflow: hidden; }
.itapema__media img { width: 100%; height: 100%; object-fit: cover; }
.itapema--com-img .itapema__inner { position: relative; }