@font-face{font-family:"Bakbak One";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/bakbak-one-400.woff2) format("woff2")}
@font-face{font-family:"Outfit";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/outfit-400.woff2) format("woff2")}
@font-face{font-family:"Outfit";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/outfit-500.woff2) format("woff2")}
@font-face{font-family:"Outfit";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/outfit-600.woff2) format("woff2")}
  :root {
    color-scheme: dark;
    --preto: #000;
    --branco: #fff;
    --cinza: #8C8C8C;
    --fio: #2B2B2B;
    --display: "Bakbak One", "Arial Black", Impact, sans-serif;
    --texto: "Outfit", "Helvetica Neue", Arial, sans-serif;
    --margem: clamp(20px, 5.5vw, 84px);
    --ease: cubic-bezier(.65, 0, .25, 1);
    /* tokens de superfície: escuro por padrão */
    --bg: var(--preto);
    --fg: var(--branco);
    --corpo: #B8B8B8;
    --linha: var(--fio);
  }
  .claro { --bg: var(--branco); --fg: var(--preto); --corpo: #444; --linha: #D9D9D9; color-scheme: light; }
  * { box-sizing: border-box; }
  html { background: var(--preto); }
  body {
    margin: 0; background: var(--preto); color: var(--branco);
    font: 400 18px/1.5 var(--texto);
    -webkit-font-smoothing: antialiased;
  }
  a { color: inherit; }
  a:focus-visible, button:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
  .r { font-size: .42em; vertical-align: 1.3em; margin-left: .06em; letter-spacing: 0; font-family: var(--texto); font-weight: 600; }
  .view { background: var(--bg); color: var(--fg); }
  .view[hidden] { display: none !important; }
  .rotulo { font: 600 13px/1 var(--texto); letter-spacing: .25em; text-transform: uppercase; color: var(--cinza); }
  .vaz { color: transparent; -webkit-text-stroke: 2px var(--fg); }

  /* cabeçalho */
  .topo {
    position: absolute; inset: 0 0 auto 0; z-index: 10;
    display: flex; justify-content: space-between; align-items: center;
    padding: calc(env(safe-area-inset-top, 0px) + 28px) var(--margem) 0;
    color: #fff; mix-blend-mode: difference; pointer-events: none;
  }
  .topo a { pointer-events: auto; }
  .marca { display: block; width: clamp(104px, 10vw, 150px); line-height: 0; }
  .marca svg { width: 100%; height: auto; }
  .topo nav { display: flex; gap: clamp(18px, 2.4vw, 36px); font: 500 15px/1 var(--texto); }
  .topo nav a { text-decoration: none; padding-block: 10px; }
  .topo nav a:hover, .topo nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }

  /* portas */
  .portas { display: flex; height: 94svh; min-height: 600px; --largura-texto: calc(44vw - 2 * var(--margem)); }
  .porta {
    flex: 1 1 0; position: relative; overflow: hidden;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 0 var(--margem) clamp(40px, 8svh, 88px);
    text-decoration: none; transition: flex-grow .7s var(--ease);
  }
  .porta.fala { background: var(--preto); color: var(--branco); }
  .porta.paga { background: var(--branco); color: var(--preto); }
  .porta .miolo { width: var(--largura-texto); display: grid; gap: 20px; }
  .porta h2 { margin: 0; font: 400 clamp(46px, 5.4vw, 100px)/1.02 var(--display); text-wrap: balance; }
  .fala h2 { color: transparent; -webkit-text-stroke: 2px var(--branco); transition: color .5s var(--ease); }
  .porta p { margin: 0; font-size: clamp(17px, 1.35vw, 21px); max-width: 30ch; }
  .fala p { color: #B8B8B8; }
  .paga p { color: #444; }
  .entrar { font: 500 16px/1 var(--texto); margin-top: 8px; display: inline-flex; gap: 10px; align-items: center; }
  .entrar i { font-style: normal; transition: transform .4s var(--ease); }
  @media (hover: hover) and (min-width: 821px) {
    .portas:hover .porta { flex-grow: .78; }
    .portas .porta:hover, .portas .porta:focus-visible { flex-grow: 1.22; }
    .fala:hover h2, .fala:focus-visible h2 { color: var(--branco); }
    .porta:hover .entrar i { transform: translateX(6px); }
    .porta:hover .entrar span { text-decoration: underline; text-underline-offset: 6px; }
  }
  .porta:focus-visible { outline: none; }
  .porta:focus-visible .entrar span { text-decoration: underline; text-underline-offset: 6px; }

  /* blocos comuns */
  .faixa { padding: clamp(96px, 14vw, 200px) var(--margem) 0; }
  .faixa > * + * { margin-top: clamp(80px, 11vw, 150px); }
  .abre { padding: clamp(150px, 22svh, 240px) var(--margem) 0; display: grid; gap: 28px; }
  .abre h1 { margin: 0; font: 400 clamp(48px, 7.6vw, 128px)/1 var(--display); max-width: 14ch; text-wrap: balance; }
  .abre p { margin: 0; color: var(--corpo); font-size: clamp(19px, 1.7vw, 26px); max-width: 32ch; }
  .frase { margin: 0; max-width: 15ch; font: 400 clamp(40px, 6.4vw, 104px)/1.02 var(--display); text-wrap: balance; }
  .diag { margin: 0; display: grid; gap: .1em; font: 400 clamp(36px, 5.6vw, 92px)/1.04 var(--display); max-width: 18ch; }
  .numero { display: grid; gap: 14px; border-top: 1px solid var(--linha); padding-top: clamp(40px, 5vw, 64px); }
  .numero strong { font: 400 clamp(84px, 16vw, 260px)/.88 var(--display); letter-spacing: -.02em; font-weight: 400; }
  .numero em { display: block; font-style: normal; font-size: .3em; line-height: 1; margin-bottom: .12em; color: var(--corpo); }
  .numero span { color: var(--corpo); font-size: clamp(18px, 1.6vw, 24px); max-width: 44ch; }

  .frentes { border-top: 1px solid var(--linha); }
  .frente {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 16px 48px; align-items: baseline;
    padding-block: clamp(28px, 3.4vw, 48px); border-bottom: 1px solid var(--linha);
  }
  .frente h3 { margin: 0; font: 400 clamp(40px, 5.6vw, 92px)/1 var(--display); transition: color .35s var(--ease); }
  .frente p { margin: 0; color: var(--corpo); font-size: clamp(18px, 1.6vw, 24px); max-width: 34ch; }
  @media (hover: hover) { .frente:hover h3 { color: transparent; -webkit-text-stroke: 2px var(--fg); } }

  /* prova: elenco */
  .elenco > .rotulo { margin: 0 0 20px; }
  .pessoa {
    display: grid; grid-template-columns: clamp(120px, 15vw, 230px) minmax(0, 6fr) minmax(0, 5fr);
    gap: 20px clamp(24px, 3.4vw, 56px); align-items: start;
    padding-block: clamp(24px, 2.8vw, 40px); border-top: 1px solid var(--linha);
  }
  .pessoa:last-child { border-bottom: 1px solid var(--linha); }
  .foto { aspect-ratio: 4 / 5; max-width: 100%; overflow: hidden; background: #111; }
  .foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .quem { display: grid; gap: 10px; align-content: start; }
  .quem h3 { margin: 0; font: 400 clamp(28px, 2.8vw, 44px)/1.02 var(--display); }
  .seg { margin: 6px 0 0; color: var(--corpo); font-size: clamp(16px, 1.25vw, 18px); max-width: 34ch; }
  .seg strong { display: block; color: var(--fg); font: 400 clamp(40px, 4.4vw, 72px)/.95 var(--display); margin-bottom: 4px; letter-spacing: -.01em; }
  .dest { margin: 0; font-size: clamp(16px, 1.25vw, 18px); color: var(--fg); max-width: 36ch; }
  .fatos { list-style: none; margin: 0; padding: 0; display: grid; align-content: start; color: var(--corpo); font-size: clamp(16px, 1.2vw, 18px); line-height: 1.4; }
  .fatos li { padding-block: 10px; border-bottom: 1px solid var(--linha); }
  .fatos li:first-child { padding-top: 4px; }
  .fatos li:last-child { border-bottom: 0; }
  .ig {
    margin-top: 6px; width: fit-content; display: inline-flex; gap: 10px; text-decoration: none;
    font: 500 15px/1.3 var(--texto); color: var(--corpo);
  }
  .ig span { color: var(--fg); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
  .ig:hover span { text-decoration-thickness: 2px; }

  .stat { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px clamp(24px, 4vw, 64px); align-items: end; border-top: 1px solid var(--linha); padding-top: clamp(40px, 5vw, 64px); }
  .stat strong { display: block; font: 400 clamp(64px, 10vw, 168px)/.9 var(--display); letter-spacing: -.015em; }
  .stat strong + strong { margin-top: .12em; font-size: clamp(30px, 3.6vw, 60px); line-height: 1.05; }
  .stat p { margin: 0; color: var(--corpo); font-size: clamp(18px, 1.5vw, 22px); max-width: 32ch; }

  /* chamada */
  .chama { display: grid; gap: 32px; border-top: 1px solid var(--linha); padding-top: clamp(48px, 6vw, 80px); }
  .chama h2 { margin: 0; font: 400 clamp(44px, 7vw, 116px)/1 var(--display); max-width: 14ch; text-wrap: balance; }
  .botoes { display: flex; flex-wrap: wrap; gap: 12px; }
  .bt {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 56px; padding: 0 28px; border: 2px solid var(--fg); border-radius: 2px;
    font: 500 17px/1 var(--texto); text-decoration: none; cursor: pointer;
    background: transparent; color: var(--fg); transition: background .25s, color .25s;
  }
  .bt.cheio { background: var(--fg); color: var(--bg); }
  .bt:hover { background: var(--fg); color: var(--bg); }
  .bt.cheio:hover { background: transparent; color: var(--fg); }
  .outra {
    display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap;
    padding-block: 40px clamp(56px, 7vw, 96px); border-top: 1px solid var(--linha); text-decoration: none;
  }
  .outra span { font: 400 clamp(30px, 3.8vw, 60px)/1.05 var(--display); }
  .outra i { font: 500 16px/1 var(--texto); font-style: normal; color: var(--cinza); }
  .outra:hover span { color: transparent; -webkit-text-stroke: 2px var(--fg); }

  /* manifesto */
  .card {
    min-height: 88svh; padding: clamp(96px, 12svh, 140px) var(--margem);
    display: grid; align-content: center; gap: clamp(20px, 2.4vw, 32px);
    border-top: 1px solid var(--fio);
  }
  .card:first-child { border-top: 0; }
  .card h2 { margin: 0; font: 400 clamp(40px, 6.2vw, 104px)/1.02 var(--display); max-width: 17ch; text-wrap: balance; }
  .card p { margin: 0; color: var(--corpo); font-size: clamp(19px, 1.8vw, 27px); max-width: 36ch; }
  .card .eco { color: var(--cinza); }
  .card.gigante h2 { font-size: clamp(64px, 12vw, 200px); line-height: .92; }
  .card.bloco { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: end; column-gap: clamp(24px, 5vw, 80px); min-height: 70svh; }
  .card.bloco h2 { font-size: clamp(38px, 5vw, 84px); }
  .card.quem { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: center; column-gap: clamp(24px, 5vw, 80px); }
  .card.quem .foto { aspect-ratio: 3 / 4; }
  .card.quem .foto img { object-position: 50% 35%; }
  .card .assina { width: clamp(150px, 16vw, 240px); line-height: 0; margin-top: 16px; }
  .card .assina svg { width: 100%; height: auto; }

  /* contato */
  .contato-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(48px, 7vw, 120px); padding: clamp(56px, 8vw, 110px) var(--margem) clamp(80px, 10vw, 140px); }
  .contato-grid h2 { margin: 0 0 20px; }
  .tel { display: block; font: 400 clamp(34px, 4vw, 60px)/1 var(--display); margin: 18px 0 28px; user-select: all; }
  .email { margin-top: 36px; color: var(--corpo); }
  .email b { color: var(--fg); font-weight: 500; user-select: all; }
  form { display: grid; gap: 30px; }
  .campo { display: grid; gap: 10px; }
  .campo label, fieldset legend { font: 600 13px/1 var(--texto); letter-spacing: .25em; text-transform: uppercase; color: var(--cinza); }
  .campo input, .campo textarea {
    width: 100%; background: transparent; color: var(--fg); border: 0; border-bottom: 1px solid #555;
    padding: 10px 0 12px; font: 400 20px/1.4 var(--texto); border-radius: 0;
  }
  .campo textarea { min-height: 120px; resize: vertical; }
  .campo input:focus, .campo textarea:focus { outline: none; border-bottom-color: var(--fg); }
  fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 14px; }
  .opcoes { display: flex; gap: 10px; flex-wrap: wrap; }
  .opcoes label { cursor: pointer; }
  .opcoes input { position: absolute; opacity: 0; pointer-events: none; }
  .opcoes span { display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; border: 1px solid #555; border-radius: 2px; font-size: 17px; transition: all .2s; }
  .opcoes input:checked + span { background: var(--fg); color: var(--bg); border-color: var(--fg); }
  .opcoes input:focus-visible + span { outline: 2px solid var(--fg); outline-offset: 3px; }
  .aviso { margin: 0; color: var(--corpo); font-size: 16px; min-height: 1.5em; }

  footer {
    border-top: 1px solid var(--fio); background: var(--preto); color: var(--branco);
    padding: 36px var(--margem) calc(env(safe-area-inset-bottom, 0px) + 40px);
    display: flex; justify-content: space-between; align-items: end; gap: 32px; flex-wrap: wrap;
  }
  footer .marca { width: 132px; }
  footer .lema { color: var(--cinza); font-size: 15px; margin: 14px 0 0; }
  footer ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 12px 32px; flex-wrap: wrap; font-size: 15px; }
  footer ul a { text-decoration: none; color: #B8B8B8; }
  footer ul a:hover { color: var(--branco); text-decoration: underline; text-underline-offset: 5px; }

  @media (max-width: 820px) {
    .portas { flex-direction: column; height: auto; min-height: 0; }
    .porta { min-height: 50svh; padding-top: 96px; }
    .porta .miolo { width: auto; }
    .porta h2 { font-size: clamp(40px, 11vw, 64px); }
    .fala h2, .vaz { -webkit-text-stroke-width: 1.5px; }
    .fala:active h2 { color: var(--branco); }
    .frente, .stat, .card.bloco, .card.quem, .contato-grid { grid-template-columns: minmax(0, 1fr); }
    .card.quem .foto { max-width: 360px; }
    .pessoa { grid-template-columns: 112px minmax(0, 1fr); }
    .pessoa .fatos { grid-column: 1 / -1; }
    .card { min-height: 60svh; }
  }
  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }

  .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .erro404 { min-height: 70svh; }