/* 14/11 (tarde) · o que fica é o universo e a explosão final; a arte da hero,
   a TV e o teatro das portas saíram. estas seções são só tipografia sobre a
   poeira, pra ela aparecer. */
.hero-plain { position: relative; min-height: 100svh; padding: clamp(130px, 20vh, 220px) max(24px, 5vw) clamp(60px, 10vh, 110px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); align-content: center; color: var(--paper); }
.hp-title { grid-column: 1 / span 10; margin: 0; font: 400 clamp(42px, 6.5vw, 122px)/.95 var(--disp); letter-spacing: -.035em; text-wrap: balance; text-shadow: 0 4px 40px rgba(4,6,18,.7); }
.hp-title em { font-style: italic; color: var(--laser); }
.hp-side { grid-column: 1 / span 5; margin-top: clamp(28px, 5vh, 56px); display: grid; gap: clamp(20px, 3.2vh, 32px); justify-items: start; }
.hp-desc { margin: 0; font-size: clamp(16px, 1.25vw, 20px); line-height: 1.55; color: rgba(240,240,240,.78); max-width: 34em; }
.hp-hint { position: absolute; left: max(24px, 5vw); bottom: clamp(20px, 4vh, 40px); margin: 0; opacity: .5; letter-spacing: .1em; }
@media (max-width: 900px) { .hp-title, .hp-side { grid-column: 1 / -1; } .hp-title { font-size: clamp(38px, 10.6vw, 68px); } }

.statement { min-height: 120svh; padding: 18vh max(24px, 5vw); display: grid; align-content: center; justify-items: center; text-align: center; }
.statement .h2 { font-size: clamp(54px, 9vw, 168px); line-height: .92; letter-spacing: -.04em; margin: 0; }
.statement .lead { max-width: 34em; margin: clamp(26px, 5vh, 50px) auto 0; }

.svc-sec { position: relative; padding: clamp(90px, 14vh, 170px) max(24px, 5vw); color: var(--paper); }
.svc-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); align-items: end; margin-bottom: clamp(36px, 7vh, 80px); text-align: left; }
.svc-head .h2 { grid-column: 1 / span 7; margin: 0; text-align: left; font-size: clamp(40px, 5.4vw, 96px); line-height: .96; }
.svc-head .lead { grid-column: 9 / -1; margin: 0; text-align: left; font-size: clamp(16px, 1.25vw, 20px); opacity: .78; }
.svc { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,.16); text-align: left; }
.svc li { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); align-items: start; padding: clamp(26px, 4.4vh, 46px) 0; border-bottom: 1px solid rgba(255,255,255,.16); }
.svc li::before { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 0; background: var(--laser); box-shadow: 0 0 12px rgba(214,255,0,.7); transition: width .7s cubic-bezier(.2,.8,.2,1); }
.svc li:hover::before { width: 100%; }
.svc-n { grid-column: 1; opacity: .55; padding-top: .9em; }
.svc h3 { grid-column: 2 / span 5; margin: 0; font: 400 clamp(32px, 3.9vw, 66px)/1 var(--disp); letter-spacing: -.025em; }
.svc-what { grid-column: 2 / span 5; margin: 14px 0 0; opacity: .72; max-width: 26em; }
.svc dl { grid-column: 8 / -1; grid-row: 1 / span 2; margin: 0; display: grid; grid-template-columns: 9.5em 1fr; row-gap: 14px; align-self: center; font-size: 16px; }
.svc dt { opacity: .6; padding-top: .25em; } .svc dt.svc-tech { color: var(--laser); opacity: 1; }
.svc dd { margin: 0; }
@media (max-width: 900px) {
  .svc-head .h2, .svc-head .lead { grid-column: 1 / -1; } .svc-head .lead { margin-top: 18px; }
  .svc-n { grid-column: 1 / -1; padding: 0 0 12px; } .svc h3, .svc-what, .svc dl { grid-column: 1 / -1; grid-row: auto; }
  .svc dl { margin-top: 22px; grid-template-columns: 8.2em 1fr; font-size: 15px; }
}
html.has-universe:not(.no-universe) .svc-sec, html.has-universe:not(.no-universe) .statement, html.has-universe:not(.no-universe) .hero-plain { background: transparent; }
/* as classes .hero e .story do site antigo eram cenas presas de 320 e 420vh;
   aqui são seções comuns */
.hero.hero-plain { height: auto !important; min-height: 100svh; }
.story.statement { height: auto !important; min-height: 110svh; }
/* o número não sobe mais por cima da seção anterior (era a coreografia da TV) */
.cosmos .case.one { margin-top: 0 !important; padding: clamp(90px, 16vh, 190px) max(24px, 5vw); perspective: none; }

/* ══ 14/11 (13h30) · decisões dele ══ */
/* 1 · o formulário sai do teatro: sem cortina, holofote nem tablado */
.contact-stage { background: transparent !important; }
.contact-stage::before, .contact-stage::after, .contact-stage .stage-light, .contact-stage .stage-floor { display: none !important; }
html.has-universe:not(.no-universe) .contact-stage { background: transparent !important; }

/* 2 · grotesca branca, sem verde nos títulos. o verde fica só no botão. */
.cosmos h1, .cosmos h2, .cosmos h3, .cosmos .h2, .hp-title, .statement .h2, .svc h3, .svc-head .h2, .meet-head h2, .meet .lines p, .case.one .h2, .one-n,
.cast .h2, .stage-heading h2, .stage-name, .foot-claim, .bang-title {
  font-family: var(--ui) !important; font-weight: 500 !important; font-style: normal !important; letter-spacing: -.045em !important; }
.cosmos h1 em, .cosmos h2 em, .cosmos h3 em, .cosmos .h2 em, .hp-title em, .meet-head h2 em, .stage-heading h2 em, .foot-claim em, .bang-title em {
  font-family: inherit !important; font-style: normal !important; font-weight: inherit !important; color: rgba(240,240,240,.5) !important; }
.hp-title { font-size: clamp(38px, 5.3vw, 100px); line-height: .98; }
.statement .h2 { font-size: clamp(48px, 7.6vw, 142px); line-height: .94; }
.svc-head .h2, .meet-head h2 { font-size: clamp(36px, 4.7vw, 84px); line-height: .98; }
.svc h3 { font-size: clamp(28px, 3.2vw, 54px); letter-spacing: -.04em !important; }
.meet .lines p { font-size: clamp(21px, 2.3vw, 38px); line-height: 1.12; letter-spacing: -.035em !important; }
.case.one .h2 { font-size: clamp(26px, 3vw, 52px); line-height: 1.06; }
.one-n { font-weight: 400 !important; letter-spacing: -.07em !important; }
.one-n sup, .svc dt.svc-tech { color: rgba(240,240,240,.55) !important; }
.svc li::before { background: var(--paper); box-shadow: none; }
.stage-heading h2 { font-size: clamp(44px, 6.4vw, 116px); line-height: .96; }
@media (max-width: 900px) { .hp-title { font-size: clamp(34px, 9.4vw, 60px); } }

/* a arte da abertura: as mãos de mármore entram por cima da poeira em modo
   "clarear" (o fundo escuro da imagem some e a poeira de verdade passa por
   trás) e somem nas bordas. o texto fica em cima, à esquerda. */
.hero-plain { align-content: start; padding-top: clamp(118px, 16vh, 170px); overflow: hidden; }
.hp-art { position: absolute; inset: auto 0 0 0; height: 74%; z-index: -1; pointer-events: none; mix-blend-mode: lighten;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%); }
.hp-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
.hp-title { grid-column: 1 / span 9; font-size: clamp(34px, 4.1vw, 78px); }
.hp-side { grid-column: 1 / span 4; margin-top: clamp(18px, 3vh, 34px); gap: 16px; }
.hp-desc { font-size: clamp(14px, 1.05vw, 17px); }
.hp-hint { left: auto; right: max(24px, 5vw); }
@media (max-width: 900px) {
  .hp-title, .hp-side { grid-column: 1 / -1; }
  .hp-art { height: 46%; } .hp-art img { object-position: 58% 50%; }
}
@media (min-width: 901px) {
  .hp-art { height: 50%; }
  .hp-side { grid-column: 1 / span 9; grid-template-columns: minmax(0, 30em) auto; align-items: center; column-gap: clamp(24px, 3vw, 56px); }
}

/* ══ as cenas de mármore (14/11): entram em "clarear" sobre a poeira e somem nas bordas ══ */
.art { display: block; pointer-events: none; mix-blend-mode: lighten; }
.art img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Vitruviano: abaixo da frase, grande */
.story.statement { min-height: 0; padding-bottom: 0; align-content: start; padding-top: 22vh; }
.art-vit { width: min(1500px, 100vw); aspect-ratio: 16 / 9; margin: clamp(10px, 3vh, 40px) auto 0;
  -webkit-mask-image: radial-gradient(ellipse 62% 66% at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 62% 66% at 50% 50%, #000 62%, transparent 100%); }
/* Pensador: fica à esquerda, o número e a frase vão para a direita */
.cosmos .case.one { position: relative; min-height: 100svh; align-content: center; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); overflow: hidden; }
.art-pen { position: absolute; inset: 0; z-index: -1;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%); }
.art-pen img { object-position: 18% 50%; }
.case.one .one-n { grid-column: 2; grid-row: auto; font-size: clamp(110px, 15vw, 280px); }
.case.one .h2, .case.one .one-src { grid-column: 2; }
.case.one .h2 { margin-top: clamp(14px, 2.4vh, 28px); max-width: 15em; }
@media (max-width: 760px) {
  .cosmos .case.one { grid-template-columns: 1fr; align-content: end; padding-top: 62vw; }
  .art-pen { inset: 0 0 auto 0; height: 78vw; } .art-pen img { object-position: 24% 50%; }
  .case.one .one-n, .case.one .h2, .case.one .one-src { grid-column: 1; }
}
/* Platão e o robô: entre o título e as três linhas */
.art-ag { width: min(1300px, 100vw); aspect-ratio: 16 / 9; margin: clamp(0px, 1vh, 16px) auto clamp(-70px, -5vh, -20px);
  -webkit-mask-image: radial-gradient(ellipse 60% 62% at 50% 48%, #000 60%, transparent 100%); mask-image: radial-gradient(ellipse 60% 62% at 50% 48%, #000 60%, transparent 100%); }
.meet { overflow: hidden; }
/* acabamento: o fundo das imagens é um pouco mais claro que o da página;
   escurece os pretos e fecha as máscaras para a caixa não aparecer */
.art img, .hp-art img { filter: contrast(1.14) brightness(.93); }
.art-vit { -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 58%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 58%, transparent 100%); }
.art-ag { -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 48%, #000 56%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 48%, #000 56%, transparent 100%); }
.art-pen { -webkit-mask-image: radial-gradient(ellipse 60% 56% at 34% 50%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse 60% 56% at 34% 50%, #000 55%, transparent 100%); }
@media (max-width: 760px) {
  .art-pen { top: 70px; -webkit-mask-image: radial-gradient(ellipse 70% 52% at 40% 50%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse 70% 52% at 40% 50%, #000 55%, transparent 100%); }
  .cosmos .case.one { padding-top: calc(70px + 70vw); }
}

/* celular (conferência de 14/11): título que estourava, itálico sumindo no papel, Vitruviano pequeno */
.story.statement { grid-template-columns: minmax(0, 1fr); }
.story.statement > * { min-width: 0; max-width: 100%; }
.script-wrap h3 em, .cta-done em { color: rgba(40, 34, 22, .55) !important; }
@media (max-width: 760px) {
  .statement .h2 { font-size: clamp(34px, 10.4vw, 48px); }
  .statement .lead { font-size: 15px; }
  .art-vit { width: 150vw; max-width: none; margin-left: -25vw; }
  .art-ag { width: 130vw; max-width: none; margin-left: -15vw; }
}
.story.statement { overflow-x: clip; }
@media (max-width: 760px) {
  .story.statement > .art-vit { width: 150vw; max-width: none; margin-left: 0; margin-right: 0; justify-self: center; }
  .meet > .art-ag { width: 130vw; max-width: none; margin-left: 50%; transform: translateX(-50%); }
}