/* =============================================================================
   ALCORA — Layout: container, grid, seções, ritmo
   ============================================================================= */

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.container--narrow { max-width: var(--container-narrow); }

.section {
    padding-block: var(--section-y);
    position: relative;
}

.section--tight { padding-block: clamp(3.5rem, 2rem + 6vw, 7rem); }

/* Faixas escuras (navy) */
.section--navy {
    background: var(--navy-800);
    color: var(--on-navy);
}
.section--deep { background: var(--navy-900); color: var(--on-navy); }

/* Títulos/eyebrow/lede claros em qualquer faixa escura */
.section--navy h1, .section--navy h2, .section--navy h3, .section--navy h4,
.section--deep h1, .section--deep h2, .section--deep h3, .section--deep h4 { color: var(--on-navy); }
.section--navy .lede, .section--deep .lede { color: var(--on-navy-muted); }
.section--navy .eyebrow, .section--deep .eyebrow { color: var(--accent-soft); }
.section--navy .eyebrow::before, .section--deep .eyebrow::before { background: var(--accent-soft); }

/* Faixa de papel alternado */
.section--paper2 { background: var(--paper-2); }

/* Grid editorial de 12 colunas */
.grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--sp-4);
}

/* Cabeçalho de seção padrão */
.section-head {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    max-width: 60ch;
}
.section-head--center {
    align-items: center;
    text-align: center;
    margin-inline: auto;
}
.section-head h2 { margin-top: 0.4rem; }

/* Divisor hairline */
.rule {
    border: 0;
    height: 1px;
    background: var(--line);
}
.section--navy .rule, .section--deep .rule { background: var(--line-dark); }

/* Helpers de span em colunas */
.col-6  { grid-column: span 6; }
.col-5  { grid-column: span 5; }
.col-7  { grid-column: span 7; }
.col-4  { grid-column: span 4; }
.col-8  { grid-column: span 8; }
.col-12 { grid-column: 1 / -1; }

@media (max-width: 900px) {
    .grid { gap: var(--sp-3); }
    .col-6, .col-5, .col-7, .col-4, .col-8 { grid-column: 1 / -1; }
}

/* Textura sutil de grão sobre navy (dá profundidade sem poluir) */
.grain::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.4;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
}