/* Sobre: só layout. Cores vêm dos tokens de base.css. Escuro contínuo, sem fundo próprio. */
main { position: relative; z-index: 1; }
section { position: relative; border-top: 1px solid rgba(255,255,255,.12); }
.s-hero { border-top: 0; }
@media (min-width: 1100px) { main .wrap { padding-right: calc(var(--gutter) + 210px); } .gal-pin { clip-path: inset(0 210px 0 0); } }
em { font-style: normal; color: var(--blue-dark); }
.eyebrow { font-size: .76rem; letter-spacing: .18em; text-transform: uppercase; color: var(--blue-dark); margin: 0 0 20px; }
h2 { font-size: clamp(2.2rem, 6vw, 5rem); }
figure { margin: 0; }
.nw { white-space: nowrap; }
.brand { min-height: 44px; } /* alvo de toque >= 44 px; marca vem de core.js */
.clipme, .tilt, .p-main { border-radius: 20px; overflow: hidden; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 30px 80px -30px rgba(10,92,255,.4); background: var(--night-2); }
.clipme img, .p-main img, .tilt img { width: 100%; height: 100%; object-fit: cover; }

/* 1 Abertura */
.s-hero { min-height: 100svh; padding: 120px 0 100px; }
.s-title { font-size: clamp(2.6rem, 6.4vw, 6.6rem); font-weight: 700; line-height: .98; }
.ln { display: inline-block; overflow: hidden; padding-bottom: .12em; vertical-align: top; }
.ln-in { display: inline-block; will-change: transform; }
.s-sub { margin: 16px 0 36px; font-size: clamp(1.05rem, 1.6vw, 1.4rem); color: rgba(255,255,255,.8); }
.open-main { aspect-ratio: 3/2; width: 100%; }
.open-main img { object-position: 50% 30%; }
.laugh { aspect-ratio: 1500/991; width: 100%; margin-top: clamp(60px, 8vw, 120px); }
.laugh img { object-position: 50% 50%; } /* foto inteira (IMG_2092), sem recorte */
.s-scroll { position: absolute; left: var(--gutter); bottom: 12px; min-height: 44px; padding-block: 16px; display: flex; align-items: center; gap: 12px; font: 500 .75rem/1 var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: var(--gray); }
.s-scroll i { width: 48px; height: 1px; background: var(--blue-dark); transform-origin: left; animation: pulse 2s var(--ease) infinite; }
@keyframes pulse { 50% { transform: scaleX(.3); } }
@media (max-width: 820px) {
  .s-title { font-size: 14vw; }
  .open-main { aspect-ratio: 5/4; }
  .s-scroll { display: none; }
}

/* 2 História + pessoa */
.s-story { padding: clamp(80px, 12vw, 180px) 0; }
.story-head { display: grid; gap: clamp(32px, 4vw, 56px); grid-template-columns: 1fr; }
.story-title h2 { max-width: none; }
.story-title .l1, .story-title .l2 { display: block; }
@media (min-width: 1024px) { .story-text.story-text p:first-child { font: inherit; letter-spacing: 0; } .story-text { grid-template-columns: 1fr 1fr; column-gap: clamp(40px, 5vw, 80px); align-items: start; } .story-title h2 { font-size: clamp(2.6rem, 4.4vw, 4.2rem); } }
.story-text { display: grid; gap: 1.4em; font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.65; }
.s-story h2 { font-size: clamp(2.1rem, 4.2vw, 3.6rem); line-height: 1.05; }
.s-story h2 em { font-style: normal; color: var(--blue-dark); }
.story-sign { margin: 0; padding-top: clamp(24px, 3vw, 40px); border-top: 1px solid rgba(255,255,255,.14); font: 600 clamp(1.6rem, 2.9vw, 2.5rem)/1.15 var(--f-title); letter-spacing: -.02em; color: #fff; }
.story-text p:first-child { font: 500 clamp(1.3rem, 2.2vw, 1.9rem)/1.4 var(--f-title); letter-spacing: -.02em; }
.person { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 20px; row-gap: 20px; margin-top: clamp(80px, 12vw, 160px); align-items: start; }
.p-main { grid-column: 1 / 6; grid-row: 1 / 3; aspect-ratio: 4/5; }
.p-txt { grid-column: 7 / 13; grid-row: 1; align-self: center; font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.65; }
.p-name { font-size: clamp(3rem, 8vw, 7rem); margin-bottom: 20px; }
.p-pair { grid-column: 7 / 13; grid-row: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-self: end; }
.p-pair .tilt { aspect-ratio: 3/4; }
.p-pair.single { grid-template-columns: 1fr 1fr; }
.p-pair.single .tilt-wrap { grid-column: 1; }
.person.rev .p-main { grid-column: 8 / 13; }
.person.rev .p-txt, .person.rev .p-pair { grid-column: 1 / 7; }
.tilt { transition: transform .35s cubic-bezier(.22,1,.36,1); transform: perspective(900px); }
.tilt:hover { transform: perspective(900px) rotateY(-3deg) rotateX(2deg); }
@media (max-width: 820px) {
  .p-main, .person.rev .p-main { grid-column: 1 / 13; grid-row: auto; }
  .p-txt, .person.rev .p-txt, .p-pair, .person.rev .p-pair { grid-column: 1 / 13; grid-row: auto; }
  .person.rev .p-main { order: 1; } .person.rev .p-txt { order: 2; } .person.rev .p-pair { order: 3; }
}

/* 3 Galeria (clipes e slides publicados) */
.s-gallery { padding: 0; }
.s-gallery > .wrap { padding-bottom: clamp(60px, 10vw, 140px); }
.gal-pin { padding: 96px 0 56px; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: 36px; overflow: hidden; border-top: 1px solid rgba(255,255,255,.12); }
.gal-head h2 { max-width: 14ch; }
.gal-track { list-style: none; margin: 0; padding: 0 var(--gutter); display: flex; gap: clamp(16px, 2vw, 32px); width: max-content; }
.card { position: relative; width: clamp(200px, 20vw, 300px); aspect-ratio: 3/4; max-height: 62svh; flex: none; border-radius: 18px; overflow: hidden; background: var(--night-2); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 30px 70px -30px rgba(10,92,255,.45); }
.card img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 60%, rgba(7,9,15,.85)); pointer-events: none; }
.card p { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 1; font: 600 .9rem/1.2 var(--f-title); }
.card .n { position: absolute; top: 14px; left: 14px; z-index: 1; font: 500 .72rem/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .15em; padding: 7px 12px; border-radius: 999px; background: rgba(7,9,15,.6); border: 1px solid var(--line); }
.no-motion .gal-pin { min-height: 0; padding-bottom: 80px; }
.no-motion .gal-track { width: auto; flex-wrap: wrap; }

/* 4 Frentes */
.s-do { padding: clamp(80px, 12vw, 170px) 0; }
.do-list { list-style: none; margin: 56px 0 0; padding: 0; border-top: 1px solid rgba(255,255,255,.12); }
.do { display: grid; grid-template-columns: 70px 1fr; column-gap: 20px; padding: 32px 0; border-bottom: 1px solid rgba(255,255,255,.12); cursor: default; transition: padding .5s var(--ease); }
.do .num { grid-row: 1 / 3; font: 500 .85rem/2.6 ui-monospace, Menlo, Consolas, monospace; color: var(--blue-dark); letter-spacing: .12em; }
.do h3 { font-size: clamp(1.8rem, 4.6vw, 3.8rem); transition: color .3s; }
.do p { max-width: 56ch; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .6s var(--ease), opacity .4s, margin .5s var(--ease); }
.do:hover, .do:focus-visible, .do:focus-within { padding-left: 14px; }
.do:hover h3, .do:focus-visible h3 { color: var(--blue-dark); }
.do:hover p, .do:focus-visible p { max-height: 14em; opacity: 1; margin-top: 14px; }
@media (hover: none) { .do p { max-height: none; opacity: 1; margin-top: 12px; } }
.no-motion .do p { max-height: none; opacity: 1; margin-top: 12px; }
@media (max-width: 560px) { .do { grid-template-columns: 1fr; } .do .num { grid-row: auto; line-height: 1; margin-bottom: 10px; } }

/* 5 CTA */
.s-cta { padding: clamp(100px, 14vw, 200px) 0; text-align: center; }
.s-cta h2 { font-size: clamp(2.8rem, 10vw, 9rem); font-weight: 700; }
.s-cta p { margin: 24px auto 40px; max-width: 44ch; color: rgba(255,255,255,.8); }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }