/* Section 1 - section#inicio.abertura (verbatim from references/source/index.html lines 113-138, 373-376).
   Requires build/styles/tokens.css + base.css (vars, .rot, .btn, em.s). */

/* abertura */
.abertura { position: relative; height: 100svh; min-height: 620px; color: var(--marfim); background: var(--tinta); }
.abertura .midia { position: absolute; inset: 0; overflow: hidden; display: grid; grid-template-columns: repeat(3, 1fr); }
.abertura video { width: 100%; height: 100%; object-fit: cover; }
.abertura .painel { position: relative; overflow: hidden; background: #000 center/cover no-repeat; }
.abertura .painel + .painel { border-left: 1px solid rgba(0, 0, 0, .35); }
.abertura .veu { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 8, 8, .55) 0%, rgba(10, 8, 8, .18) 34%, rgba(10, 8, 8, .32) 62%, rgba(10, 8, 8, .86) 100%); }
.abertura .meio { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; padding: 96px 20px 22vh; }

/* headline: each line slides up from a clipped mask, staggered by --i */
.titulo { margin: 18px 0 0; font-weight: 300; font-size: clamp(46px, 7.4vw, 116px); line-height: .98; letter-spacing: -.045em; text-shadow: 0 2px 40px rgba(0, 0, 0, .25); }
.titulo .p { display: block; overflow: hidden; padding-bottom: .1em; }
.titulo .p > span { display: inline-block; transform: translateY(105%); animation: sobe 1.1s var(--ease) forwards; animation-delay: calc(.2s + var(--i) * .08s); }
@keyframes sobe { to { transform: translateY(0); } }
.titulo .s { font-size: 1.08em; letter-spacing: -.02em; }

.abertura .acoes { margin-top: 30px; display: grid; justify-items: center; gap: 14px; }
.abertura .acoes small { font-size: 13.5px; opacity: .85; }

/* fan of 5 cards peeking past the bottom edge; --s (scrollY) set by JS lifts the row at .2px per px scrolled */
.espia { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; justify-content: center; align-items: flex-end; gap: clamp(12px, 1.4vw, 22px); transform: translateY(calc(50% - var(--s, 0) * .2px)); pointer-events: none; }
.espia a { pointer-events: auto; position: relative; display: block; width: clamp(150px, 15vw, 236px); aspect-ratio: 4 / 5; border-radius: var(--borda); overflow: hidden; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6); transform: translateY(var(--y, 0px)); transition: transform .6s var(--ease); text-decoration: none; }
.espia a:hover { transform: translateY(calc(var(--y, 0px) - 14px)); }
.espia img { width: 100%; height: 100%; object-fit: cover; }
.espia span { position: absolute; left: 12px; bottom: 12px; padding: 5px 10px; background: rgba(252, 249, 247, .92); color: var(--tinta); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; }

@media (max-width: 860px) {
  .abertura .midia { grid-template-columns: 1fr; }
  .abertura .painel:not(.p2) { display: none; }
  .espia { display: none; }
  .abertura .meio { padding-bottom: 10vh; }
}

@keyframes surge { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .titulo .p > span { transform: none; animation-name: surge; animation-fill-mode: both; }
}