/* =====================================================================
   Academia Treinar — CSS do topo da home, copiado VERBATIM do layout
   original (`Layout/Hero.dc.html`, bloco <style>).
   Mantido em arquivo separado e sem reescrita para o resultado ficar
   idêntico ao modelo. Não renomeie classes nem keyframes daqui.
   ===================================================================== */

@keyframes tnrSpin { from { transform: translateZ(-2400px) rotate(0deg); } to { transform: translateZ(-2400px) rotate(360deg); } }
@keyframes tnrDriftA { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(120px,-80px) scale(1.18); } 100% { transform: translate(0,0) scale(1); } }
@keyframes tnrDriftB { 0% { transform: translate(0,0) scale(1.1); } 50% { transform: translate(-140px,90px) scale(0.9); } 100% { transform: translate(0,0) scale(1.1); } }
@keyframes tnrFlicker { 0%,100% { opacity:0.85; } 50% { opacity:1; } }
@keyframes tnrSpinFlat { from { transform: translate(-50%,-50%) rotate(0deg); } to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes tnrWheel { 0% { transform: translate(-50%,0); opacity:0; } 22% { opacity:1; } 60% { transform: translate(-50%,12px); opacity:0; } 100% { opacity:0; } }
@keyframes tnrChev { 0%,100% { opacity:0.55; transform: translateY(0); } 50% { opacity:1; transform: translateY(6px); } }
@keyframes tnrBob { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(7px); } }
@keyframes tnrBnrReveal { from { opacity:0; transform:translateY(48px); } to { opacity:1; transform:translateY(0); } }

.bnr { opacity:0; transform:translateY(54px) scale(0.955); filter:blur(8px); box-shadow:0 20px 48px rgba(0,0,0,0.45), 0 0 28px rgba(180,143,59,0.55); transition:opacity 1s cubic-bezier(.22,1,.36,1), transform 1s cubic-bezier(.22,1,.36,1), filter 1s cubic-bezier(.22,1,.36,1); will-change:opacity, transform, filter; }
.bnr.bnr-in { opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
.hero-divider { opacity:0; transition:opacity .4s ease; }
.hero-divider.lit { animation: tnrLineIgnite 1.6s cubic-bezier(.33,1,.68,1) forwards; }
@keyframes tnrLineIgnite {
  0%   { opacity:0; filter:brightness(0.5); }
  45%  { opacity:1; filter:brightness(2.3); }
  100% { opacity:1; filter:brightness(1); }
}
.bnr:hover { transform:translateY(-10px) !important; box-shadow:0 34px 70px rgba(0,0,0,0.55), 0 0 110px rgba(180,143,59,0.7) !important; }
.bnr:hover img { transform: scale(1.045); }
.bnr::after { content:""; position:absolute; inset:0; border-radius:18px; box-shadow:inset 0 0 0 2px rgba(180,143,59,0.65); transition:box-shadow .5s ease; pointer-events:none; }
.bnr:hover::after { box-shadow:inset 0 0 0 2px rgba(180,143,59,0.9); }

@keyframes tnrGlowPulse { 0%,100% { opacity:0.55; transform:translate(-50%,-50%) scale(1); } 50% { opacity:0.9; transform:translate(-50%,-50%) scale(1.09); } }
@keyframes tnrSweep { 0% { transform:translateX(-55%) rotate(9deg); opacity:0; } 45% { opacity:0.5; } 100% { transform:translateX(55%) rotate(9deg); opacity:0; } }
@keyframes tnrRise { 0% { transform:translateY(20px) scale(0.8); opacity:0; } 12% { opacity:1; } 86% { opacity:0.9; } 100% { transform:translateY(-260px) scale(1.25); opacity:0; } }
@keyframes tnrWave { 0%,100% { opacity:0.4; transform:translateX(-50%) scaleX(1); } 50% { opacity:0.75; transform:translateX(-50%) scaleX(1.18); } }
@keyframes tnrAuroraA { 0%{transform:translateX(-10%) skewX(-14deg) scaleY(1);opacity:.30} 50%{transform:translateX(10%) skewX(-7deg) scaleY(1.18);opacity:.60} 100%{transform:translateX(-10%) skewX(-14deg) scaleY(1);opacity:.30} }
@keyframes tnrAuroraB { 0%{transform:translateX(8%) skewX(12deg) scaleY(1.12);opacity:.26} 50%{transform:translateX(-8%) skewX(6deg) scaleY(.94);opacity:.52} 100%{transform:translateX(8%) skewX(12deg) scaleY(1.12);opacity:.26} }
@keyframes tnrAuroraC { 0%{transform:translateX(0%) skewX(-4deg) scaleY(1);opacity:.22} 50%{transform:translateX(-12%) skewX(4deg) scaleY(1.2);opacity:.46} 100%{transform:translateX(0%) skewX(-4deg) scaleY(1);opacity:.22} }
@keyframes tnrShock { 0%{transform:translate(-50%,-50%) scale(.12);opacity:0} 10%{opacity:.5} 100%{transform:translate(-50%,-50%) scale(2.4);opacity:0} }
@keyframes tnrGradShift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes tnrConic { from{transform:translate(-50%,-50%) rotate(0)} to{transform:translate(-50%,-50%) rotate(360deg)} }

/* Os fios de luz que correm ao longo das fitas douradas. Doze caminhos
   do SVG referenciam estes dois keyframes pelo atributo style. */
@keyframes tnrFlow { to { stroke-dashoffset: -2000; } }
@keyframes tnrFlowSlow { to { stroke-dashoffset: -1400; } }

@keyframes tnrStreak { 0%,100% { opacity:0; transform:scaleY(0.7); } 50% { opacity:0.85; transform:scaleY(1); } }
@keyframes tnrLineBreathe { 0%,100% { opacity:0.55; } 50% { opacity:1; } }

/* Fly-through: estilo das palavras, aplicado pelo JS no original.
   Aqui fica no CSS para a página não depender de script para o layout. */
.fw {
  position: absolute; left: 50%; top: 50%; white-space: nowrap;
  font-weight: 200; letter-spacing: 0.04em; text-transform: uppercase;
  line-height: 1; color: #f4f4ef; opacity: 0;
  text-shadow: 0 0 26px rgba(255,255,255,0.14), 0 2px 30px rgba(0,0,0,0.55);
  will-change: transform, opacity, filter; backface-visibility: hidden;
}
.fw[data-gold] {
  color: #B48F3B;
  text-shadow: 0 0 34px rgba(180,143,59,0.45), 0 2px 30px rgba(0,0,0,0.5);
}

/* ---------------------------------------------------------------------
   Galeria da página Sobre — copiado de `Layout/Sobre.dc.html`.
   É um mosaico por colunas (column-count), não uma grade.
   --------------------------------------------------------------------- */

.galitem { position:relative; display:block; width:100%; margin-bottom:16px; border-radius:12px; overflow:hidden; cursor:pointer; break-inside:avoid; border:1px solid rgba(244,244,239,0.06); background:#151517; padding:0; }
.galitem img { width:100%; height:auto; display:block; transition:transform .6s cubic-bezier(.22,1,.36,1), filter .4s ease; filter:saturate(0.96) brightness(0.94); }
.galitem:hover img { transform:scale(1.05); filter:saturate(1.05) brightness(1.02); }
.galitem::after { content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 2px rgba(180,143,59,0); transition:box-shadow .4s ease; pointer-events:none; }
.galitem:hover::after { box-shadow:inset 0 0 0 2px rgba(180,143,59,0.6); }

@media (max-width:1280px) { .sb-gal { column-count:5 !important; } }
@media (max-width:1100px) { .sb-gal { column-count:4 !important; } }
@media (max-width:900px)  { .sb-gal { column-count:3 !important; } }
@media (max-width:480px)  { .sb-gal { column-count:2 !important; } }

/* ===================== MOBILE ===================== */
@media (max-width: 760px) {
  /* Header */
  .site-header { padding:11px 18px !important; gap:12px !important; }
  .site-header nav { display:none !important; }
  .site-header img { height:36px !important; }
  .site-header > a { padding:9px 16px !important; font-size:12px !important; }

  /* Hero slogan: empilhado e centralizado no topo */
  .hero-slogan-wrap { padding:0 !important; justify-content:center !important; align-items:flex-start !important; }
  .hero-slogan { flex-direction:column !important; align-items:center !important; justify-content:flex-start !important; padding:70px 22px 0 !important; gap:8px !important; max-width:100% !important; text-align:center !important; }
  .hero-slogan-txt { font-size:25px !important; text-align:center !important; white-space:normal !important; }
  .hero-building { background-size:contain !important; }

  /* Banners: coluna única, sem sobreposição */
  .banners-outer { height:auto !important; }
  .banners-sec { position:static !important; transform:none !important; padding:48px 0 !important; }
  .banners-grid { grid-template-columns:1fr !important; gap:18px !important; padding:0 22px !important; max-width:520px !important; }

  /* Slides */
  .sld-cap { left:7% !important; right:7% !important; bottom:16% !important; max-width:none !important; }
  .sld-cap h2 { font-size:32px !important; }
  .sld-cap p { font-size:15px !important; }
  .slide-arrow { width:42px !important; height:42px !important; }

  /* Fly-through: frase final */
  .final-headline { font-size:34px !important; }

  /* Footer: empilhado */
  .footer-grid { grid-template-columns:1fr !important; gap:36px !important; padding:52px 24px 32px !important; }
  .footer-bottom { padding:20px 24px !important; }
}