/* -------------------------------------------------------
   LION HYBRID TRAINING — SOBRE
   Estilos completos (1 card por linha, branding escuro+dourado)
-------------------------------------------------------- */

/* Fonte do corpo */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

/* ===== Variáveis de tema ===== */
:root{
  --gold: #d4a54f;
  --gold-light: #e8c374;
  --black: #2a2a2a;
  --text: #e4e8ef;
  --muted: #bdbdbd;
  /* Reutiliza a mesma imagem de fundo do hero da landing */
  --hero-img: url('../img/tua-imagem.png');
}

/* ===== Base ===== */
*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:'Poppins',sans-serif;
  color:var(--text);
  background: linear-gradient(90deg, var(--black) 0%, #3a2c1a 55%, #4a3a20 100%);
  background-attachment: fixed;
  line-height:1.7;
  padding:24px 0 34px; /* reduced height */
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* ===== Content wrapper ===== */
.content-card{
  margin: 40px auto;
  padding: 0 24px 40px;
}

/* ===== HERO ===== */
.hero{
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  padding: clamp(18px, 3.6vw, 40px) 0 28px;
  text-align:center;
  background:
    linear-gradient(180deg, rgba(15,15,15,.70), rgba(10,10,10,.85)),
    var(--hero-img);
  background-size: cover;
  background-position: center;
  background-attachment: scroll;
  border-bottom: 1px solid rgba(212,165,79,.18);
  box-shadow: 0 10px 30px rgba(0,0,0,.6), 0 0 100px rgba(212,165,79,.1);
}
/* Scroll indicator (igual conceito da landing) */
.scroll-indicator{
  position:absolute; left:50%; bottom:24px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:4px;
  text-decoration:none; font-size:12px; font-weight:500; letter-spacing:.5px;
  font-family:'Poppins',sans-serif; color:var(--gold-light);
  opacity:.88; transition: opacity .35s ease, transform .35s ease;
}
.scroll-indicator .chevron{ color:var(--gold); animation: bounceDown 2.4s cubic-bezier(.25,.6,.3,1) infinite; }
.scroll-indicator:hover{ opacity:1; transform:translateX(-50%) translateY(-4px); }
.scroll-indicator.hide{ opacity:0; transform:translateX(-50%) translateY(6px); pointer-events:none; }
@keyframes bounceDown{0%{transform:translateY(0);opacity:.9}50%{transform:translateY(9px);opacity:1}100%{transform:translateY(0);opacity:.9}}
.hero-title{
  margin: 0 0 10px;
  font-weight:700;
  font-size: clamp(20px, 3.6vw, 34px);
  color: var(--gold);
  line-height:1.1;
  text-shadow: 0 2px 14px rgba(212,165,79,.35), 0 0 8px rgba(212,165,79,.2);
}
.hero-sub{
  margin:0 auto 20px;
  max-width: 900px;
  color: var(--text);
  font-size: clamp(14px, 1.7vw, 18px);
  opacity:.95;
}
.cta-group{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ===== Botão primário ===== */
.btn{
  display:inline-block;
  text-decoration:none;
  text-align:center;
  padding:12px 22px;
  border-radius:999px;
  font-weight:700;
  color:#0f1115;
  background:linear-gradient(180deg, var(--gold) 0%, var(--gold-light) 100%);
  box-shadow:0 8px 20px rgba(212,165,79,.14), 0 0 18px rgba(212,165,79,.06);
  transition: transform .12s ease, box-shadow .18s ease, filter .18s ease;
}
.btn:hover{
  transform: translateY(-3px);
  box-shadow:0 20px 44px rgba(0,0,0,.55), 0 0 28px rgba(212,165,79,.18);
  filter: brightness(1.03);
}

/* ===== ABOUT (um card por linha) ===== */
.about-grid{
  /* IMPORTANT: 1 por linha */
  display:flex;
  flex-direction:column;
  gap:22px;
  padding: 28px 0 40px;
  max-width: 860px;
  margin: 0 auto;
}
.about-card{
  display:block;
  background: linear-gradient(180deg, rgba(35,37,41,.98), rgba(30,31,33,.98));
  border-radius:16px;
  padding:24px;
  border:1px solid rgba(212,165,79,.10);
  box-shadow:
    inset 0 -6px 18px rgba(0,0,0,.14),
    0 8px 24px rgba(0,0,0,.6),
    0 0 14px rgba(212,165,79,.04);
  transform: translateY(18px);
  opacity:0;
  transition: transform .35s cubic-bezier(.2,.9,.3,1),
              box-shadow .35s ease, border-color .25s ease, opacity .35s ease;
  will-change: transform, opacity;
}
.about-card.in-view,
.about-card:hover{
  transform: translateY(0);
  opacity:1;
  border-color: rgba(212,165,79,.22);
  box-shadow:
    inset 0 -6px 18px rgba(0,0,0,.18),
    0 18px 40px rgba(0,0,0,.65),
    0 0 28px rgba(212,165,79,.14);
}

/* Títulos dos cards */
.about-body h3{
  margin:0 0 10px;
  font-size: 1.05rem;
  color: var(--gold);
  font-weight:700;
  letter-spacing:.02em;
  text-shadow: 0 2px 10px rgba(212,165,79,.3), 0 0 6px rgba(212,165,79,.15);
}
.about-body p{
  margin:0 0 10px;
  color:var(--text);
  line-height:1.6;
}

/* ===== CTA final / assinatura ===== */
.cta-center{ text-align:center; margin-top: 26px; }
.cta-center .btn{ min-width:220px; }
.signature{
  text-align:center;
  margin-top: 34px;
  color: var(--gold);
  opacity:.85;
  font-weight:600;
  font-size:.9rem;
  letter-spacing:.05em;
}

/* ===== FOOTER (herda estética do principal) ===== */
footer{
  position: relative;
  background:
    linear-gradient(180deg, rgba(15,15,15,.72), rgba(10,10,10,.88)),
    url('../img/tua-imagem.png'); /* fallback reuse hero concept if exists */
  background-size: cover;
  background-position: center;
  padding:24px 0 34px; /* reduced height */
  text-align:center;
  color:#ffffff;
  box-shadow: 0 0 70px rgba(0,0,0,.35) inset, 0 -10px 30px rgba(212,165,79,.15), 0 0 100px rgba(212,165,79,.08);
  overflow:hidden;
}

/* -------- Consent Banner (dark, translúcido) -------- */
.consent-banner{
  position: fixed; left: 0; right: 0; bottom: 0;
  background: rgba(20,20,20,.86);
  backdrop-filter: blur(6px) saturate(1.05);
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 16px 22px; z-index: 5000;
  box-shadow: 0 -6px 24px rgba(0,0,0,.45), 0 0 0 1px rgba(212,165,79,.10) inset;
}
.consent-content{ display:flex; gap:18px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; max-width: 860px; margin: 0 auto; }
.consent-title{ font-family:'Oswald',sans-serif; font-weight:600; font-size:18px; color:var(--gold); margin-bottom:6px; }
.consent-text{ color:#cfd3db; font-size:14px; max-width: 720px; }
.consent-actions{ display:flex; gap:10px; justify-content:flex-end; }
.consent-banner .btn{ box-shadow:none; }
.consent-banner .btn.gold{ animation:none; box-shadow:none; }

.consent-modal[hidden]{ display:none; }
.consent-modal{ position:fixed; inset:0; z-index:6000; display:flex; align-items:center; justify-content:center; background: rgba(0,0,0,.65); backdrop-filter: blur(2px); }
.consent-modal-panel{
  width:min(680px, 92vw);
  background: linear-gradient(180deg, rgba(34,34,34,.94), rgba(24,24,24,.92));
  color: var(--text);
  border-radius:12px; padding: 18px 18px 14px;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 14px 34px rgba(0,0,0,.45), 0 0 0 1px rgba(212,165,79,.10) inset;
}
.consent-modal-title{ font-family:'Oswald',sans-serif; font-size:20px; margin:4px 0 8px; color: var(--gold); }
.consent-modal-desc{ font-size:14px; color:#cfd3db; }
.consent-list{ list-style:none; padding:0; margin:12px 0 14px; }
.consent-item{ display:flex; gap:10px; align-items:flex-start; }
.consent-item input{ margin-top:4px; }
.consent-item span{ display:flex; flex-direction:column; }
.consent-item small{ color:#9aa0a6; font-size:12px; }
.consent-modal-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:8px; }
.consent-privacy{ display:inline-block; margin-top:10px; font-size:13px; color:var(--gold); text-decoration:underline; }
footer a, footer strong, footer b{ color:#ffffff; }
footer a{ opacity:.92; transition: opacity .2s ease, text-decoration-color .2s ease; }
footer a:hover{ opacity:1; text-decoration: underline; text-underline-offset:3px; }
footer a:focus-visible{ outline:2px solid var(--gold-light); outline-offset:2px; border-radius:4px; }
footer .legal{ display:flex; flex-wrap:wrap; gap:10px; row-gap:6px; justify-content:center; margin-top:8px; }
footer .legal span{ opacity:.6; }
footer .socials{
  display:flex; flex-wrap:wrap; gap:14px; justify-content:center; align-items:center;
  margin:18px 0 0;
}
footer .socials a{
  width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:9999px; background: rgba(0,0,0,0.38);
  border:1px solid rgba(255,255,255,.12);
  color:#ffffff; opacity:1; transition: background .2s ease, transform .2s ease, opacity .2s ease;
}
footer .socials a:hover{ background: rgba(0,0,0,0.55); transform: translateY(-2px); }
footer .socials a:focus-visible{ outline:2px solid var(--gold-light); outline-offset:2px; }
footer .socials img{ width:20px; height:20px; display:block; filter: brightness(0) invert(1); }
footer .socials a:hover img{ filter: brightness(0) invert(1) drop-shadow(0 0 2px rgba(255,255,255,.25)); }

/* ===== Responsivo ===== */
@media (max-width: 720px){
  .content-card{ padding: 0 16px 30px; }
  .hero{ padding:14px 0 22px; }
  .hero-title{ font-size: clamp(18px, 6vw, 26px); }
  .hero-sub{ font-size: 14px; }
  .about-card{ padding:16px; }
  .scroll-indicator{ bottom:16px; font-size:11px; }
}
/* ===== LOGO no topo ===== */
.brand{
  display:flex;
  justify-content:center;
  margin: 18px 0 8px;
}
.brand img{
  width: clamp(120px, 14vw, 180px);
  filter: drop-shadow(0 0 26px rgba(212,165,79,0.35)) drop-shadow(0 0 12px rgba(212,165,79,0.2));
}

/* ===== BLOCO GIF ===== */
.gif-block{
  max-width: 900px;
  margin: 26px auto 10px;
  padding: 0 4px;
  text-align:center;
}
.gif-frame{
  position: relative;
  margin: 0 auto;
  width: min(100%, 820px);
  aspect-ratio: 16/9;                  /* mantém proporção cinematográfica */
  border-radius: 16px;
  overflow: hidden;
  background: radial-gradient(120% 120% at 30% 20%, rgba(212,165,79,0.10), rgba(0,0,0,0.8));
  border: 1.5px solid rgba(212,165,79,0.35);
  box-shadow:
    0 12px 34px rgba(0,0,0,0.55),
    0 0 26px rgba(212,165,79,0.12);
}
.gif-frame img{
  width: 100%;
  height: 100%;
  object-fit: cover;                    /* corta ao enquadramento elegante */
  display: block;
  filter: contrast(1.05) saturate(0.9) brightness(0.96); /* look mais cinematográfico */
  transform: scale(1.02);
}
.gif-caption{
  margin-top: 10px;
  color: var(--gold);
  font-weight: 600;
  letter-spacing: .04em;
  opacity: .85;
  font-size: .92rem;
}

/* Responsivo */
@media (max-width: 720px){
  .gif-frame{ border-radius: 12px; }
  .gif-caption{ font-size: .84rem; }
}