/* tema-hero.css · hero, faixa de tickets e bloco "Em ação". Camada sobre wire.css e tema-80s.css. */
html { scroll-behavior: smooth; }
.palco-largo { max-width: 80rem; margin-inline: auto; padding-inline: var(--sp-2); }

/* ── Hero com a nebulosa ── */
.hero { position: relative; isolation: isolate; overflow: hidden; border-bottom: 2px solid var(--borda); }
#nebulosa { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; image-rendering: pixelated; display: block;
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent); mask-image: linear-gradient(180deg, #000 72%, transparent); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, color-mix(in srgb, var(--fundo) 88%, transparent) 0, color-mix(in srgb, var(--fundo) 40%, transparent) 48%, transparent 75%); }
.hero-topo { padding-block: var(--sp-2); }
.hero-centro { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--sp-3); align-items: center; min-height: min(78vh, 40rem); padding-block: var(--sp-4); }
@media (max-width: 760px) { .hero-centro { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-block: var(--sp-3) var(--sp-4); } .hero-loops { display: none; } }
.sobretitulo { font-family: var(--mono); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cor, var(--ciano)); margin: 0 0 var(--sp-2); }
.hero h1 { font-size: clamp(2.4rem, 6.4vw, 5rem); line-height: 1.02; letter-spacing: -.03em; max-width: 14ch; margin: 0 0 var(--sp-2); text-wrap: balance; }
.hero .sub { font-size: 1.2rem; max-width: 46ch; color: var(--texto); margin: 0 0 var(--sp-3); }
.hero .botoes { gap: var(--sp-2); }
.botao-link { font-family: var(--mono); text-transform: uppercase; letter-spacing: .06em; font-size: .9rem; padding: .7em .2em; color: var(--texto); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .35em; border: 0; box-shadow: none; }
.hero-loops { justify-self: center; width: min(100%, 26rem); aspect-ratio: 1; position: relative; }
.hero-loops svg { width: 100%; height: 100%; overflow: visible; }
.anel-v, .anel-h { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .anel-v { animation: gira-v 16s linear infinite; }
  .anel-h { animation: gira-h 16s linear infinite; }
  .nucleo { animation: pulsa 3s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
}
@keyframes gira-v { 0%,100% { transform: scaleX(1); } 50% { transform: scaleX(.06); } }
@keyframes gira-h { 0%,100% { transform: scaleY(.06); } 50% { transform: scaleY(1); } }
@keyframes pulsa { from { transform: scale(.85); } to { transform: scale(1.25); } }

/* ── Faixa de tickets ── */
.faixa-bloco { padding-block: var(--sp-4) var(--sp-3); }
.faixa-titulo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-1) var(--sp-3); align-items: baseline; margin: 0 0 var(--sp-3); }
.faixa-titulo h2 { margin: 0; }
.faixa-titulo p { margin: 0; color: var(--texto-suave); font-size: .95rem; }
.faixa { overflow: hidden; padding: 1rem 0 2.2rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.trilho { display: flex; gap: 1.6rem; width: max-content; }
@media (prefers-reduced-motion: no-preference) { .trilho { animation: corre 80s linear infinite; } .faixa:hover .trilho, .faixa:focus-within .trilho { animation-play-state: paused; } }
@media (prefers-reduced-motion: reduce) { .faixa { overflow-x: auto; } .trilho [aria-hidden="true"] { display: none; } }
@keyframes corre { to { transform: translateX(calc(-50% - .8rem)); } }
.ticket { --papel: #f3f0e6; position: relative; width: 14.5rem; flex: none; background: var(--papel); color: #1a1a1a; font-family: var(--mono); font-size: .76rem; line-height: 1.45; box-shadow: 0 10px 0 -2px rgba(0,0,0,.18); transform: rotate(var(--giro, 0deg)); }
.ticket::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.5rem; height: .5rem;
  background: linear-gradient(135deg, var(--papel) 25%, transparent 25%) -.5rem 0, linear-gradient(225deg, var(--papel) 25%, transparent 25%) -.5rem 0; background-size: 1rem 1rem; }
.ticket:nth-child(odd) { --giro: -1.2deg; } .ticket:nth-child(even) { --giro: .9deg; margin-top: .6rem; }
.t-barra { height: .4rem; background: linear-gradient(90deg, #22d3ee, #a855f7); }
.t-corpo { padding: .9rem .9rem 1rem; display: grid; gap: .55rem; }
.t-cab { display: flex; justify-content: space-between; gap: .5rem; align-items: flex-start; }
.t-nome { font-weight: 500; letter-spacing: .08em; text-transform: uppercase; font-size: .8rem; }
.t-serie { color: #5b5b55; font-size: .68rem; letter-spacing: .06em; }
.hanko { flex: none; width: 1.7rem; height: 1.7rem; display: grid; place-items: center; background: #d6322b; color: #fff; font-family: "Zen Kaku Gothic New", var(--sans); font-weight: 700; font-size: .95rem; transform: rotate(-7deg); }
.t-icone { display: grid; place-items: center; height: 4.6rem; border: 2px dashed #b8b4a6; color: #1a1a1a; }
.t-icone svg { width: 3.4rem; height: 3.4rem; shape-rendering: crispEdges; fill: currentColor; }
.ticket[data-cor="ciano"] .t-icone { color: #0e7490; } .ticket[data-cor="roxo"] .t-icone { color: #6d28d9; }
.ticket[data-cor="verde"] .t-icone { color: #15803d; } .ticket[data-cor="ouro"] .t-icone { color: #b45309; }
.t-linha { display: grid; grid-template-columns: 4.6rem 1fr; gap: .4rem; border-top: 1px dashed #b8b4a6; padding-top: .35rem; }
.t-linha b { font-weight: 500; color: #5b5b55; text-transform: uppercase; font-size: .66rem; letter-spacing: .06em; padding-top: .1rem; }
.t-fim { display: flex; justify-content: space-between; align-items: center; gap: .6rem; border-top: 1px dashed #b8b4a6; padding-top: .55rem; }
.t-barras { flex: 1; height: 1.6rem; background: repeating-linear-gradient(90deg, #1a1a1a 0 2px, transparent 2px 4px, #1a1a1a 4px 5px, transparent 5px 8px, #1a1a1a 8px 11px, transparent 11px 13px); }
.t-qr { width: 2.2rem; height: 2.2rem; flex: none; border: 3px solid #1a1a1a; background: conic-gradient(#1a1a1a 25%, transparent 0 50%, #1a1a1a 0 75%, transparent 0) 0 0 / .55rem .55rem; }

/* ── Em ação: desenhos de linha com interferência ── */
.acao { padding-block: var(--sp-3) var(--sp-4); }
.acao-grade { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.caso { --cor: var(--ciano); display: grid; gap: var(--sp-1); align-content: start; }
.caso[data-cor="roxo"] { --cor: var(--roxo); } .caso[data-cor="verde"] { --cor: var(--verde); } .caso[data-cor="ouro"] { --cor: var(--ouro); }
.glifo { position: relative; aspect-ratio: 1; border: 2px solid var(--borda); background: var(--fundo-janela); color: var(--cor); overflow: hidden; }
.glifo svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.glifo .eco { mix-blend-mode: screen; opacity: .85; transform: rotate(8deg) scale(1.04); }
:root[data-theme="claro"] .glifo .eco, :root[data-site="brevvi"]:not([data-theme="escuro"]) .glifo .eco { mix-blend-mode: multiply; }
@media (prefers-reduced-motion: no-preference) { .glifo .eco { animation: eco 48s linear infinite; } }
@keyframes eco { to { transform: rotate(368deg) scale(1.04); } }
.glifo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(var(--ponto) 1px, transparent 1.3px); background-size: 5px 5px; opacity: .6; }
.caso h3 { font-family: var(--mono); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--cor); margin: var(--sp-1) 0 0; max-width: none; }
.caso p { margin: 0; }
.caso .res { color: var(--texto-suave); font-size: .95rem; }

/* ── Fecho ── */
.fecho .janela-corpo { display: grid; gap: var(--sp-2); }
.fecho h2 { max-width: 20ch; }
.contato-linha { font-family: var(--mono); font-size: 1.05rem; border: 2px dashed var(--borda); padding: .8rem 1rem; width: fit-content; max-width: 100%; overflow-wrap: anywhere; }

/* celular: o texto fica sobre a nebulosa, então a cobertura escurece mais para manter o contraste */
@media (max-width: 760px) {
  .hero::before { background: linear-gradient(180deg, color-mix(in srgb, var(--fundo) 72%, transparent), color-mix(in srgb, var(--fundo) 88%, transparent)); }
}
.hanko { font-size: 1.1rem; }

/* ── Aquário matemático vivo dentro do ticket (animação em texto do brevvi.com) ── */
.t-icone.t-vivo { height: auto; padding: .4rem 0; border-style: solid; overflow: hidden; }
.ticket.largo { width: 19.5rem; }
.aquario-vivo { margin: 0; font: 400 6.1px/1.08 var(--mono); letter-spacing: .02em; white-space: pre; color: #1a1a1a; text-align: left; }
.aq-1 { color: #6f6b5e; } .aq-2 { color: #46463f; } .aq-3 { color: #111; }
.aq-vidro { color: #8e8a7c; } .aq-watcher { color: #33332e; } .aq-tocado { color: #a8a496; }
.aq-fil { color: #b45309; } .aq-sai { color: #6d28d9; }