/* tema-brevvi.css · ajustes da pele da Brevvi sobre tema-80s.css e tema-hero.css */
.faixa-neb { position: absolute; inset: 0 0 auto 0; height: 34rem; z-index: -1; pointer-events: none; overflow: hidden; }
.faixa-neb #nebulosa { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0;
  -webkit-mask-image: linear-gradient(180deg, #000 20%, transparent); mask-image: linear-gradient(180deg, #000 20%, transparent); }
.demo-aquario, .demo-ticket { border: 0; background-image: none; display: block; padding: 0; min-height: 0; }
.demo-aquario { text-align: center; overflow: hidden; }
.demo-aquario .aquario-vivo { display: inline-block; font-size: clamp(5px, 1.15vw, 9.5px); line-height: 1.08; color: var(--texto); }
.demo-aquario .aq-1 { color: var(--texto-suave); } .demo-aquario .aq-2 { color: var(--texto-suave); } .demo-aquario .aq-3 { color: var(--texto); }
.demo-aquario .aq-vidro { color: var(--borda); opacity: .55; } .demo-aquario .aq-watcher { color: var(--texto); } .demo-aquario .aq-tocado { color: var(--texto-suave); opacity: .5; }
.demo-aquario .aq-fil { color: var(--ouro); } .demo-aquario .aq-sai { color: var(--roxo); }
.demo-ticket { display: flex; justify-content: center; padding: .6rem 0 1.4rem; }
.ticket-exemplo { margin: 0; }
.ticket-exemplo, .ticket-exemplo:nth-child(odd), .ticket-exemplo:nth-child(even) { --giro: -1deg; margin-top: 0; }
.marca { text-decoration: none; }
/* hero: texto à esquerda, pontos que viram grade à direita */
.hero-brevvi { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: var(--sp-3); align-items: center; }
.hero-brevvi h1 { font-size: clamp(1.9rem, 4.2vw, 3.2rem); line-height: 1.05; letter-spacing: -.025em; text-wrap: balance; }
.hero-ordem { margin: 0; justify-self: center; width: min(100%, 24rem); }
.hero-ordem canvas { display: block; width: 100%; aspect-ratio: 5 / 4; image-rendering: pixelated; border: 2px solid var(--borda); background: var(--fundo-janela); box-shadow: 4px 4px 0 var(--borda); }
.hero-ordem figcaption { margin-top: .5rem; font-family: "Silkscreen", var(--mono, monospace); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave); }
@media (max-width: 760px) { .hero-brevvi { grid-template-columns: minmax(0, 1fr); } .hero-ordem { order: -1; width: min(100%, 18rem); } }
.hero-brevvi h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); margin-bottom: .4rem; }
.sub-hero { font-size: 1.3rem; max-width: 34ch; line-height: 1.4; margin: 0 0 var(--sp-3); }
/* blocos alternados: animação no lado oposto ao do hero */
.bloco-alt { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--sp-3); align-items: center; }
.bloco-alt h2 { font-size: clamp(2.2rem, 5vw, 3.8rem); line-height: 1.04; letter-spacing: -.025em; margin: 0 0 .4rem; text-wrap: balance; }
.bloco-alt .sub-hero { margin-bottom: var(--sp-2); }
.bloco-alt .rotulo-cta { font-family: var(--pixel); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave); margin: 0 0 .5rem; }
.bloco-alt .botoes { flex-wrap: wrap; }
@media (max-width: 760px) { .bloco-alt { grid-template-columns: minmax(0, 1fr); } }
/* marca no cabeçalho: caixa cheia, para ler sobre a nebulosa */
.marca { display: inline-flex; align-items: center; gap: .65rem; padding: .3rem .95rem .3rem .3rem; background: var(--fundo-janela); color: var(--texto);
  border: 2px solid var(--borda); box-shadow: 3px 3px 0 var(--cor, var(--roxo)); font-family: "IBM Plex Mono", ui-monospace, monospace; font-weight: 700; font-size: 1.2rem; letter-spacing: .1em; line-height: 1; text-transform: uppercase; }
.marca .marca-logo { width: 2.2rem; height: 2.2rem; flex: none; }
.marca:hover, .marca:focus-visible { box-shadow: 1px 1px 0 var(--cor, var(--roxo)); transform: translate(2px, 2px); }
.bloco-alt.inv { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
@media (max-width: 760px) { .bloco-alt.inv .hero-ordem { order: -1; } }
/* carrossel de livros */
.carrossel { width: min(100%, 27rem); justify-self: center; margin: 0; }
.carrossel .rolo-livros { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border: 2px solid var(--borda); background: var(--fundo-janela); box-shadow: 4px 4px 0 var(--borda); }
.carrossel .rolo-livros::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 100%; scroll-snap-align: start; display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1.1rem; align-items: center; padding: 1.1rem; min-height: 14.5rem; box-sizing: border-box; }
.capa { aspect-ratio: 2 / 3; display: flex; flex-direction: column; justify-content: space-between; padding: .55rem .4rem; text-align: center;
  background: var(--barra); color: var(--barra-texto); border: 2px solid var(--borda); box-shadow: 3px 3px 0 var(--ouro); font-family: var(--pixel); }
.capa b { font-size: .52rem; letter-spacing: .05em; line-height: 1.35; font-weight: 400; text-transform: uppercase; }
.capa .zero { font-size: 2.6rem; line-height: 1; color: var(--ouro); }
.capa i { font-style: normal; font-size: .5rem; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.slide .ficha { display: grid; gap: .45rem; justify-items: start; }
.tag-livro { font-family: var(--pixel); font-size: .68rem; letter-spacing: .08em; padding: .15rem .45rem; border: 2px solid var(--borda); background: var(--ouro); color: var(--fundo-janela); }
.slide h3 { margin: 0; font-size: 1.15rem; line-height: 1.15; }
.slide .formato { margin: 0; font-size: .92rem; color: var(--texto-suave); }
.botao[aria-disabled="true"] { opacity: .55; cursor: not-allowed; box-shadow: none; }
.carrossel-controles { display: flex; align-items: center; gap: .6rem; margin-top: .75rem; font-family: var(--pixel); font-size: .72rem; letter-spacing: .06em; color: var(--texto-suave); }
.carrossel-controles button { font: inherit; padding: .3rem .7rem; border: 2px solid var(--borda); background: var(--fundo-janela); color: var(--texto); cursor: pointer; box-shadow: 2px 2px 0 var(--borda); }
.carrossel-controles button:disabled { opacity: .4; cursor: default; box-shadow: none; }
.carrossel-controles .aviso { margin-left: auto; text-transform: uppercase; }
@media (max-width: 420px) { .slide { grid-template-columns: 5.2rem minmax(0, 1fr); gap: .8rem; padding: .8rem; } .capa .zero { font-size: 1.8rem; } }
/* formulário de contato */
.form-contato { display: grid; gap: .9rem; }
.form-contato .duas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.form-contato label { display: grid; gap: .3rem; font-family: var(--pixel); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave); }
.form-contato input[type="text"], .form-contato input[type="email"], .form-contato select, .form-contato textarea {
  font: 1rem/1.4 var(--sans, "IBM Plex Sans", sans-serif); text-transform: none; letter-spacing: 0; color: var(--texto); background: var(--fundo); border: 2px solid var(--borda); padding: .6rem .7rem; width: 100%; box-sizing: border-box; border-radius: 0; }
.form-contato textarea { min-height: 7rem; resize: vertical; }
.form-contato input:focus-visible, .form-contato select:focus-visible, .form-contato textarea:focus-visible { outline: 3px solid var(--cor, var(--roxo)); outline-offset: 2px; }
.form-contato .consent { display: flex; gap: .6rem; align-items: flex-start; font-family: var(--sans, "IBM Plex Sans", sans-serif); font-size: .9rem; text-transform: none; letter-spacing: 0; color: var(--texto); }
.form-contato .consent input { margin-top: .25rem; width: 1.1rem; height: 1.1rem; flex: none; accent-color: var(--cor, var(--roxo)); }
.nota-form { margin: .2rem 0 0; font-size: .9rem; color: var(--texto-suave); }
@media (max-width: 760px) { .form-contato .duas { grid-template-columns: minmax(0, 1fr); } }
.bloco-alt > * { min-width: 0; }
.carrossel .rolo-livros { width: 100%; box-sizing: border-box; }
.slide > * { min-width: 0; }
/* rodapé: barra de estado, no padrão das barras das janelas */
.rodape { margin-top: var(--sp-4, 2.5rem); background: var(--barra); color: var(--barra-texto); border-top: 2px solid var(--borda); position: relative; }
.rodape::before { content: ""; display: block; height: .5rem; background: linear-gradient(90deg, var(--ciano) 0 25%, var(--roxo) 25% 50%, var(--verde) 50% 75%, var(--ouro) 75% 100%); }
.rodape-grade { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 1.8rem; max-width: 80rem; margin-inline: auto; padding: 2rem var(--sp-2, 1rem) 1.4rem; }
.rodape-nome { margin: 0 0 .15rem; font-family: "IBM Plex Mono", ui-monospace, monospace; font-weight: 700; font-size: 1.3rem; letter-spacing: .1em; text-transform: uppercase; }
.rodape-termo { margin: 0 0 .6rem; font-size: 1.1rem; font-weight: 700; }
.rodape-texto { margin: 0; font-size: .92rem; line-height: 1.5; opacity: .8; max-width: 32ch; }
.rodape h2 { margin: 0 0 .6rem; font-size: 1.05rem; line-height: 1.2; font-weight: 700; }
.rodape h2 a { text-decoration: none; font-size: inherit; }
.rodape ul + h2 { margin-top: 1.3rem; }
.rodape-solo { margin-top: .9rem; }
.rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.rodape a { color: var(--barra-texto); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; font-size: .95rem; }
.rodape a:hover, .rodape a:focus-visible { text-decoration-thickness: 3px; }
.rodape-base { border-top: 1px solid color-mix(in srgb, var(--barra-texto) 28%, transparent); }
.rodape-base p { max-width: 80rem; margin: 0 auto; padding: .9rem var(--sp-2, 1rem); font-family: var(--pixel); font-size: .68rem; letter-spacing: .05em; line-height: 1.7; text-transform: uppercase; opacity: .75; }
@media (max-width: 900px) { .rodape-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rodape-grade > :first-child { grid-column: 1 / -1; } }
@media (max-width: 480px) { .rodape-grade { grid-template-columns: minmax(0, 1fr); } }
.rodape-base { max-width: 80rem; margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 2rem; padding: 1rem var(--sp-2, 1rem); }
.rodape-base p { margin: 0; padding: 0; flex: 1 1 24rem; max-width: none; }
.rodape-lab { display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; }
.rodape-lab img { width: 2.4rem; height: 2.4rem; flex: none; outline: 2px solid var(--barra-texto); }
.rodape-lab span { display: grid; gap: .15rem; }
.rodape-lab b { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 1.05rem; letter-spacing: .04em; text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px; }
.rodape-lab small { font-family: var(--pixel); font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; opacity: .75; }
.rodape-lab:hover b, .rodape-lab:focus-visible b { text-decoration-thickness: 3px; }
/* player de diagrama de sequência */
.seq { display: grid; gap: .9rem; }
.seq-tela { border: 2px solid var(--borda); background: var(--fundo); box-shadow: 4px 4px 0 var(--borda); padding: .4rem; }
.seq-svg { display: block; width: 100%; height: auto; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 13px; }
.seq-svg text { fill: var(--texto); }
.seq-vida { stroke: var(--borda); stroke-width: 1; stroke-dasharray: 3 5; opacity: .4; }
.seq-ator rect { fill: var(--fundo-janela); stroke: var(--borda); stroke-width: 2; }
.seq-ator text { font-weight: 700; font-size: 14px; }
.seq-ator.ativo rect { fill: var(--barra); }
.seq-ator.ativo text { fill: var(--barra-texto); }
.seq-msg { color: var(--texto-suave); transition: opacity .35s; }
.seq-msg.seq-envia { color: var(--roxo); } .seq-msg.seq-recebe { color: var(--verde); }
.seq-msg line { stroke: currentColor; stroke-width: 2.5; stroke-dasharray: 100; stroke-dashoffset: 0; }
.seq-msg path { fill: currentColor; }
.seq-msg.futuro { opacity: .1; } .seq-msg.visto { opacity: .5; } .seq-msg.ativo { opacity: 1; }
.seq-msg.ativo text { font-weight: 700; }
.seq-msg.futuro line { stroke-dashoffset: 100; }
.seq-msg.ativo line { animation: seq-traco .7s ease-out both; }
@keyframes seq-traco { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .seq-msg.ativo line { animation: none; } .seq-msg { transition: none; } }
.seq-legenda { display: grid; gap: .3rem; padding: .8rem 1rem; border: 2px solid var(--borda); background: var(--fundo-janela); min-height: 8rem; align-content: start; }
.seq-rota { font-family: var(--pixel); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave); }
.seq-papel { justify-self: start; font-family: var(--pixel); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; padding: .1rem .45rem; border: 2px solid var(--borda); }
.seq-papel[data-papel="envia"] { background: var(--roxo); color: #fff; } .seq-papel[data-papel="recebe"] { background: var(--verde); color: #fff; }
.seq-titulo { font-size: 1.15rem; } .seq-texto { margin: 0; font-size: 1rem; }
.seq-controles { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.seq-controles .botao { padding: .35rem .8rem; min-width: 2.6rem; }
.seq-controles .botao:disabled { opacity: .4; cursor: default; box-shadow: none; }
.seq-contador { font-family: var(--pixel); font-size: .72rem; letter-spacing: .06em; color: var(--texto-suave); }
.seq-barra { flex: 1 1 6rem; height: .5rem; border: 2px solid var(--borda); background: var(--fundo); } .seq-barra i { display: block; height: 100%; width: 0; background: var(--cor, var(--roxo)); transition: width .3s; }
.seq-transcricao { font-size: .95rem; } .seq-transcricao summary { cursor: pointer; font-family: var(--pixel); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
.seq-transcricao ol { margin: .7rem 0 0; padding-left: 1.3rem; display: grid; gap: .5rem; }
@media (max-width: 640px) { .seq-tela { display: none; } }
dialog.seq-dialogo { width: min(60rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: 0; border: 0; background: transparent; overflow: auto; color: var(--texto); }
dialog.seq-dialogo::backdrop { background: color-mix(in srgb, var(--fundo) 70%, transparent); backdrop-filter: blur(2px); }
.seq-fechar { font: inherit; font-family: var(--pixel); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; background: transparent; color: inherit; border: 0; cursor: pointer; padding: 0; margin-left: auto; }
dialog.seq-dialogo .janela-barra { display: flex; align-items: center; gap: 1rem; }
.seq-contratar-bt { margin-left: auto; }
.seq-contratar { padding: 1rem; border: 2px solid var(--borda); background: var(--fundo-janela); box-shadow: 4px 4px 0 var(--roxo); }
.seq-contratar[hidden], .seq-contratar-ok[hidden] { display: none; }
.seq-contratar-titulo { margin: 0; }
.seq-contratar-ok { margin: 0; padding: .8rem 1rem; border: 2px solid var(--verde); font-weight: 700; }
@media (max-width: 760px) { .bloco-alt.inv { grid-template-columns: minmax(0, 1fr); } }
.seq-extra { justify-self: start; font-family: var(--pixel); font-size: .65rem; letter-spacing: .06em; text-transform: uppercase; padding: .1rem .45rem; border: 2px dashed var(--ouro); color: var(--texto); }
.seq-extra[hidden] { display: none; }
/* páginas que já estão no ar (Mapa, Sobre): conteúdo fiel, com o tema da landing */
.vivo { font-size: 1.02rem; }
.vivo h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); line-height: 1.04; letter-spacing: -.025em; margin: .2rem 0 .8rem; }
.vivo h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 .8rem; }
.vivo h3 { font-size: 1.2rem; margin: 0 0 .3rem; }
.vivo h4, .vivo .rotulo-eixo { font-family: var(--pixel); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; margin: 1.4rem 0 .6rem; color: var(--texto-suave); }
.vivo h5 { font-size: 1.05rem; margin: 0 0 .3rem; }
.vivo p { max-width: 70ch; }
.vivo .posicao, .vivo .marco, .vivo .algarismo, .vivo .algarismo-eixo { font-family: var(--pixel); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave); }
.vivo .nota { color: var(--texto-suave); font-size: .95rem; }
.vivo ol.eixos { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.vivo ol.eixos > li { border: 2px solid var(--borda); padding: 1rem; background: var(--fundo); }
.vivo .era > header { margin-bottom: .6rem; }
.vivo .grupo-eixo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.vivo .grupo-eixo > h4 { grid-column: 1 / -1; }
.vivo .verbete { border: 2px solid var(--borda); padding: 1rem; background: var(--fundo); }
.vivo .verbete p { font-size: .96rem; margin: 0; }
.vivo ul.links, .vivo ul.lista { list-style: none; margin: .6rem 0; padding: 0; display: grid; gap: .6rem; }
.vivo ul.links > li, .vivo ul.lista > li { display: grid; gap: .15rem; }
.vivo ul.links > li > span, .vivo ul.lista > li > span { color: var(--texto-suave); font-size: .95rem; }
.vivo ol.obra, .vivo ol.trajetoria { list-style: none; margin: .8rem 0; padding: 0; display: grid; gap: 1rem; }
.vivo ol.obra > li, .vivo ol.trajetoria > li { border-left: 4px solid var(--cor, var(--roxo)); padding: .2rem 0 .2rem 1rem; }
.vivo .cta-pe .botao { margin-top: .4rem; }
@media (max-width: 760px) { .vivo ol.eixos, .vivo .grupo-eixo { grid-template-columns: minmax(0, 1fr); } }
/* rodapé: faixa de domínios, redes e legal (do site atual) */
.rodape-redes { max-width: 80rem; margin-inline: auto; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.4rem; padding: 1.2rem var(--sp-2, 1rem); border-top: 1px solid color-mix(in srgb, var(--barra-texto) 28%, transparent); }
.rodape-redes ul.redes { display: flex; flex-wrap: wrap; gap: .3rem .9rem; }
.rodape-redes ul.dominios li { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .92rem; }
.rodape-redes .rodape-lab { margin-bottom: .6rem; }
.rodape-base { flex-direction: column; align-items: flex-start; }
.rodape-base .rodape-legal { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; align-items: center; }
.rodape-base .rodape-legal a { color: var(--barra-texto); font-family: inherit; font-size: inherit; }
@media (max-width: 900px) { .rodape-redes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .rodape-redes { grid-template-columns: minmax(0, 1fr); } }
.rodape-base p { flex: 0 0 auto; }
.vivo img { max-width: min(100%, 260px); height: auto; border: 2px solid var(--borda); box-shadow: 4px 4px 0 var(--borda); }
/* logo pixel sobre o rodapé escuro: cores neon e nó central claro */
.rodape .marca-pixel { --verde: #34D399; --roxo: #A855F7; --ciano: #67E8F9; --ouro: #FBBF24; --texto: #ffffff; flex: none; }
/* logo no hover do container da marca: o fundo vira roxo e o ícone troca para tons claros (ou escuros, no modo escuro) para não sumir */
[data-site="brevvi"] .marca:hover .marca-pixel, [data-site="brevvi"] .marca:focus-visible .marca-pixel {
  --verde: #bbf7d0; --ciano: #a5f3fc; --ouro: #fde68a; --roxo: #e9d5ff; --texto: #ffffff; }
:root[data-site="brevvi"][data-theme="escuro"] .marca:hover .marca-pixel, :root[data-site="brevvi"][data-theme="escuro"] .marca:focus-visible .marca-pixel {
  --verde: #064e3b; --ciano: #164e63; --ouro: #78350f; --roxo: #4c1d95; --texto: #07060c; }