:root {
  
  --sombra-1: 0 1px 3px rgba(16, 26, 30, .06), 0 1px 2px rgba(16, 26, 30, .05);
  --sombra-2: 0 4px 10px rgba(16, 26, 30, .08), 0 2px 4px rgba(16, 26, 30, .05);
  --sombra-3: 0 12px 24px rgba(16, 26, 30, .11), 0 4px 8px rgba(16, 26, 30, .06);
  --sombra-4: 0 24px 48px rgba(16, 26, 30, .16), 0 8px 16px rgba(16, 26, 30, .08);
  
  --brilho-acento: 0 8px 32px rgba(20, 81, 92, .35);
  --halo-acento: 0 0 40px rgba(20, 81, 92, .30);
}

.luz-topo { position: relative; }
.luz-topo::after {
  content: ""; position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(80%, 800px); height: min(52vh, 400px);
  background: radial-gradient(ellipse at center top,
    rgba(255, 255, 255, .12) 0%, transparent 70%);
  pointer-events: none; z-index: 0;
}

.luz-mancha { position: relative; }
.luz-mancha::after {
  content: ""; position: absolute; top: 8%; left: 50%;
  transform: translateX(-50%);
  width: min(70%, 600px); height: min(50%, 400px);
  background: rgba(32, 106, 120, .32);
  filter: blur(120px);
  pointer-events: none; z-index: 0;
}

.luz-topo > .env, .luz-mancha > .env { position: relative; z-index: 1; }

.tex-guilhoche { position: relative; }
.tex-guilhoche::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("midia/tec-trama-petroleo.svg?v=0efc94c5") repeat center;
  background-size: 420px auto; opacity: .5; z-index: 0;
}

.tex-ruido { position: relative; }
.tex-ruido::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: .07; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23r)'/%3E%3C/svg%3E");
}
.tex-guilhoche > .env, .tex-ruido > .env { position: relative; z-index: 1; }

.rev--esq { transform: translateX(-26px); }
.rev--dir { transform: translateX(26px); }
.rev--zoom { transform: scale(.95); }
.rev--esq.visto, .rev--dir.visto, .rev--zoom.visto { transform: none; }

.rev-fila > .rev:nth-child(1) { transition-delay: .05s; }
.rev-fila > .rev:nth-child(2) { transition-delay: .14s; }
.rev-fila > .rev:nth-child(3) { transition-delay: .23s; }
.rev-fila > .rev:nth-child(4) { transition-delay: .32s; }
.rev-fila > .rev:nth-child(5) { transition-delay: .41s; }
.rev-fila > .rev:nth-child(6) { transition-delay: .50s; }
.rev-fila > .rev:nth-child(7) { transition-delay: .59s; }
.rev-fila > .rev:nth-child(8) { transition-delay: .68s; }

@keyframes vidaFlutua { 0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); } }
.flutua { animation: vidaFlutua 3.2s ease-in-out infinite; }

@keyframes vidaRespira { 0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); } }
.respira { animation: vidaRespira 2.2s ease-in-out infinite; }

@keyframes vidaGiraPausa { 0% { transform: rotate(0); }
  25% { transform: rotate(360deg); } 100% { transform: rotate(360deg); } }
.gira-pausa { animation: vidaGiraPausa 4s cubic-bezier(.4, 0, .2, 1) infinite; }

@keyframes vidaSeta { 0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); } }
.seta-salta { animation: vidaSeta 1.6s ease-in-out infinite; }

@keyframes vidaBrilho { 0% { left: -80%; } 100% { left: 180%; } }
.btn--brilho { position: relative; overflow: hidden; }
.btn--brilho::after {
  content: ""; position: absolute; top: 0; left: -80%; width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent,
    rgba(255, 255, 255, .28), transparent);
  animation: vidaBrilho 2.6s ease-in-out infinite;
}

@keyframes vidaPulsoLuz {
  0%, 100% { box-shadow: 0 0 16px rgba(20, 81, 92, .25); }
  50% { box-shadow: 0 0 36px rgba(20, 81, 92, .45); } }
.pulsa-luz { animation: vidaPulsoLuz 2.4s ease-in-out infinite; }

.cartao {
  position: relative; background: #FFFFFF;
  border: 1px solid var(--linha); border-radius: 3px;
  padding: var(--e5); box-shadow: var(--sombra-2);
  transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease;
}
.cartao:hover { transform: translateY(-4px); box-shadow: var(--sombra-3); }

.cartao::before {
  content: ""; position: absolute; inset: 0; border-radius: 3px;
  background: linear-gradient(135deg, rgba(20, 81, 92, .05) 0%, transparent 50%);
  opacity: 0; transition: opacity .4s ease; pointer-events: none;
}
.cartao:hover::before { opacity: 1; }

.cartao::after {
  content: ""; position: absolute; left: var(--e5); right: var(--e5); bottom: 0;
  height: 2px; background: var(--acento);
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}
.cartao:hover::after { transform: scaleX(1); }

.cartao__ico {
  width: 48px; height: 48px; border-radius: 3px;
  display: grid; place-items: center;
  background: rgba(20, 81, 92, .10); color: var(--acento);
  transition: transform .3s ease, background-color .3s ease;
}
.cartao:hover .cartao__ico { transform: scale(1.08);
  background: rgba(20, 81, 92, .16); }
.cartao__ico .ico { width: 26px; height: 26px; }

.sanfona { display: grid; gap: var(--e3); }
.sanfona__i {
  background: #FFFFFF; border: 1px solid var(--linha); border-radius: 3px;
  box-shadow: var(--sombra-1);
  transition: box-shadow .3s ease, transform .3s ease;
}
.sanfona__i:hover { box-shadow: var(--sombra-2); transform: scale(1.004); }
.sanfona__i--aberta { box-shadow: var(--sombra-3); }
.sanfona__cab {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: var(--e4); width: 100%; padding: var(--e4) var(--e5);
  background: none; border: 0; font: inherit; text-align: left;
  cursor: pointer; min-height: 64px;
}
.sanfona__cab:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }
.sanfona__num {
  font-family: 'Newsreader', Georgia, serif; font-size: 26px; font-weight: 600;
  color: var(--acento); font-variant-numeric: tabular-nums; line-height: 1;
}
.sanfona__t { font-size: 19px; font-weight: 600; color: var(--ink); }
.sanfona__t .selo { margin-left: var(--e2); vertical-align: 2px; }
.sanfona__d { font-size: var(--peq); color: var(--ink-2); margin-top: 2px; }

.sanfona__mais {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid var(--linha-2); color: var(--ink-2);
  display: grid; place-items: center;
  transition: transform .3s cubic-bezier(.2, .7, .2, 1),
    background-color .3s ease, color .3s ease, border-color .3s ease;
}
.sanfona__mais .ico { width: 18px; height: 18px; }
.sanfona__i--aberta .sanfona__mais {
  transform: rotate(135deg); background: var(--acento);
  border-color: var(--acento); color: #FFFFFF;
}

.sanfona__corpo {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .35s cubic-bezier(.2, .7, .2, 1);
}
.sanfona__i--aberta .sanfona__corpo { grid-template-rows: 1fr; }
.sanfona__corpo > div { overflow: hidden; }
.sanfona__miolo { padding: 0 var(--e5) var(--e5);
  border-top: 1px solid var(--linha); margin: 0 var(--e5); padding-inline: 0;
  padding-top: var(--e4); color: var(--ink-2); }
.sanfona__miolo ul { list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--e3); }
.sanfona__miolo li { display: grid; grid-template-columns: 22px 1fr;
  gap: var(--e3); align-items: start; }
.sanfona__miolo li .ico { width: 18px; height: 18px; color: var(--acento);
  margin-top: 2px; }

.selo {
  display: inline-flex; align-items: center; gap: var(--e2);
  padding: 3px var(--e3); border-radius: 999px;
  font-size: 13px; font-weight: 600; letter-spacing: .02em;
}
.selo .ico { width: 14px; height: 14px; }
.selo--ok { background: rgba(20, 81, 92, .10); color: var(--acento);
  border: 1px solid rgba(20, 81, 92, .22); }
.selo--atencao { background: rgba(140, 47, 30, .08); color: #8C2F1E;
  border: 1px solid rgba(140, 47, 30, .22); }
.selo--claro { background: rgba(255, 255, 255, .10); color: var(--sobre-escuro);
  border: 1px solid rgba(235, 242, 243, .25); }
.selo--pulsa { animation: vidaRespira 2s ease-in-out infinite; }

.marca-texto { position: relative; white-space: nowrap; }
.marca-texto::before {
  content: ""; position: absolute; left: -.12em; right: -.12em; bottom: .02em;
  height: .42em; background: rgba(20, 81, 92, .18);
  transform: rotate(-1deg); z-index: -1;
}
.faixa--escura .marca-texto::before,
.eq .marca-texto::before { background: rgba(255, 255, 255, .16); }

.conta { font-variant-numeric: tabular-nums; }

.confete-caixa { position: fixed; inset: 0; pointer-events: none; z-index: 90;
  overflow: hidden; }
@keyframes vidaConfete {
  0% { transform: translateY(-12px) rotate(0); opacity: 1; }
  100% { transform: translateY(104vh) rotate(680deg); opacity: 0; } }
.confete-p { position: absolute; top: -12px; width: 8px; height: 12px;
  animation: vidaConfete var(--dur, 3s) ease-out forwards; }

@media (prefers-reduced-motion: reduce) {
  .flutua, .respira, .gira-pausa, .seta-salta, .selo--pulsa, .pulsa-luz,
  .btn--brilho::after { animation: none; }
  .rev--esq, .rev--dir, .rev--zoom { transform: none; }
  .rev-fila > .rev { transition-delay: 0s; }
  .sanfona__corpo { transition: none; }
  .cartao, .cartao::after, .sanfona__i { transition: none; }
}