/* Section 4 - section#espaco.secao (verbatim from references/source/index.html lines 84-86, 155, 157, 226-245, 366-378).
   Requires build/styles/tokens.css + base.css (vars, .cont, em.s).
   SHARED rules (.secao, .h2, .link, .rv, .rv-img) are copied verbatim; dedupe at assembly (declarations are identical to source). */

/* shared: section rhythm + headline */
.secao { padding: clamp(84px, 11vw, 150px) 0; }
.h2 { margin: 0; font-weight: 300; font-size: clamp(36px, 5vw, 68px); line-height: 1.02; letter-spacing: -.04em; }

/* shared: underline link (::after grows scaleX .25 -> 1 on hover, .45s ease) */
.link { position: relative; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.link::after { content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor; transform: scaleX(.25); transform-origin: left; transition: transform .45s var(--ease); }
.link:hover::after { transform: scaleX(1); }

/* espaço */
.dupla { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(28px, 6vw, 96px); align-items: end; margin-bottom: clamp(40px, 6vw, 80px); }
.dupla p { margin: 0; font-size: 17px; color: var(--suave); }
.dupla .cred { margin-top: 14px; font-size: 13px; }
@media (max-width: 800px) { .dupla { grid-template-columns: 1fr; } }
.filme { margin: 0 auto; width: min(1100px, calc(100% - 40px)); aspect-ratio: 1080 / 608; border-radius: 6px; overflow: hidden; background: #111; }
.filme video { width: 100%; height: 100%; object-fit: cover; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .filme { animation: abre linear both; animation-timeline: view(); animation-range: entry 0% cover 42%; }
    @keyframes abre { from { transform: scale(.8); border-radius: 30px; filter: brightness(.6); } to { transform: scale(1); border-radius: 6px; filter: none; } }
  }
}
/* 4-col grid, no `dense`: at >760px the source leaves row1/col4 and row3/col4 empty (faithful to source) */
.mosaico { margin-top: clamp(16px, 2vw, 24px); display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(150px, 17vw, 250px); gap: clamp(10px, 1.4vw, 18px); }
.mosaico figure { margin: 0; position: relative; border-radius: 6px; overflow: hidden; background: var(--blush-2); }
.mosaico img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.mosaico figure:hover img { transform: scale(1.05); }
.mosaico figcaption { position: absolute; left: 12px; bottom: 12px; padding: 4px 10px; background: rgba(252, 249, 247, .92); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; }
.mosaico .alto { grid-row: span 2; }
.mosaico .largo { grid-column: span 2; }
@media (max-width: 760px) { .mosaico { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 44vw; } }

/* shared: reveal on scroll (JS adds .visto) */
.rv { opacity: 0; transform: translateY(34px); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
.rv.visto { opacity: 1; transform: none; }
.rv-img { clip-path: inset(12% 0 0 0); transition: clip-path 1.3s var(--ease); }
.rv-img.visto { clip-path: inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce) {
  .rv { transform: none; }
  .rv-img { clip-path: none; }
}