/* =========================================================
   Samurai Treinamento e Proteção — Landing Page V2
   PALETA BASEADA NA LOGO
   - Preto/charcoal (traço da logo)
   - Laranja queimado (sol/faixa)
   - Areia/creme (escudo/fundo)
   ========================================================= */

/* ======= Tokens (cores/tipografia/raios) ======= */
:root{
  /* TONS PRINCIPAIS (logo) */
  --ink:#0e0f10;                 /* preto do traço */
  --bg-900:#121314;              /* fundo escuro principal */
  --bg-800:#161719;              /* variação p/ gradientes */
  --card:#161718;                /* bloco/cards */
  --card-2:#141516;

  /* Areias/cremes quentes do escudo */
  --sand-50:#f3e4cd;             /* creme claro (textos suaves/badges) */
  --sand-100:#ead8bf;            /* creme base */
  --sand-300:#cdbb9f;            /* areia média (muted) */

  /* Laranja queimado do sol/faixas */
  --accent:#e06a2e;              /* principal */
  --accent-700:#c55823;          /* hover/intenso */
  --accent-soft:rgba(224,106,46,.14); /* fundos suaves */

  /* Outros */
  --text-100:#f5efe6;            /* texto principal (areia quase branca) */
  --text-300:#d9ccb8;            /* texto secundário */
  --muted:#b8a892;               /* descrições */
  --line:rgba(243,228,205,.12);  /* linhas sutis */

  --wa:#25D366;                  /* WhatsApp verde oficial */
  --wa-700:#1ebe5d;

  --shadow: 0 12px 40px rgba(0,0,0,.38);
  --radius: 18px;
}
/* ===== Layout-aware background (alinhado ao container) ===== */
:root{
  /* mesmas medidas do .container */
  --wrap-max: 1180px;
  --wrap: min(var(--wrap-max), 92vw);
  /* quanto sobra de cada lado → margem lateral do container */
  --container-x: calc((100vw - var(--wrap)) / 2);

  /* pontos de foco dos gradientes (ajuste fino se quiser) */
  --hero-focus-x: calc(var(--container-x) + 300px);             /* atrás do título (coluna esquerda) */
  --hero-media-x: calc(100vw - var(--container-x) - 380px);     /* atrás do vídeo (coluna direita) */
}
:root{
  /* faixas alternadas a partir de #treinamentos */
  --band-dark: var(--bg-900);   /* mais escuro */
  --band-light: var(--bg-800);  /* um pouco mais claro */
}
:root{
  /* proporção padrão da foto do instrutor (Largura/Altura) */
  --portrait-ratio: 3/2; /* 1.5 */
}


*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  color:var(--text-100);
   background: radial-gradient(1200px 800px at var(--hero-focus-x) 80px, var(--bg-800), var(--bg-900) 40%, var(--ink) 100%);
  line-height:1.6;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
.container{width:min(1180px, 92%); margin-inline:auto}

/* ======= Header ======= */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(18,19,20,.6); 
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:12px 0}
.brand{display:flex; gap:10px; align-items:center}
.brand img{border-radius:12px; box-shadow:var(--shadow)}
.brand span{font-weight:800; letter-spacing:.4px}
/* ===== BRAND sofisticada ===== */
.brand-card{
  display:flex; align-items:center; gap:14px;
  padding:8px 12px;
  border-radius:16px;
  position:relative;
}

.brand-home{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand-home:hover .brand-name{ color:var(--sand-50); }

/* Moldura do logo com aro em gradiente da cor da marca */
.brand-mark{
  position:relative; width:62px; height:62px; border-radius:14px; overflow:hidden;
}
.brand-mark img{
  width:100%; height:100%; object-fit:cover; border-radius:12px;
}
/* aro externo em gradiente laranja queimado */
.brand-mark::after{
  content:""; position:absolute; inset:-1px; border-radius:16px; padding:1px;
  background: conic-gradient(from 220deg, rgba(224,106,46,.9), rgba(224,106,46,.25), rgba(224,106,46,.9));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

/* Título em duas linhas */
.brand-title{ display:flex; flex-direction:column; line-height:1; }
.brand-name{
  font-weight:900; letter-spacing:.4px; font-size:1.08rem; color:var(--text-100);
}
.brand-sub{
  margin-top:3px; font-size:.86rem; letter-spacing:.3px; color:var(--text-300);
}

/* Divisor vertical fino */
.brand-divider{
  width:1px; height:36px; background:var(--line);
  margin:0 6px;
}

/* Ícones */
.brand-social{ display:flex; align-items:center; gap:10px; }
.brand-social a{
  width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center;
  color:#e6e6e6;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.brand-social a:hover{ transform: translateY(-1px); }
.brand-social svg{ width:18px; height:18px; }

/* cores de marca */
.brand-social a.is-insta{ color:#C13584; }
.brand-social a.is-mail{ color:#EA4335; }
.brand-social a.is-wa{ color:#25D366; }

/* hovers coloridos */
.brand-social a.is-insta:hover{ background: rgba(193,53,132,.15); border-color: rgba(193,53,132,.35); }
.brand-social a.is-mail:hover{ background: rgba(234,67,53,.15);  border-color: rgba(234,67,53,.35); }
.brand-social a.is-wa:hover{   background: rgba(37,211,102,.15); border-color: rgba(37,211,102,.35); }

/* Responsivo: economiza espaço em telas menores */
@media (max-width:820px){
  .brand-mark{ width:56px; height:56px; }
  .brand-name{ font-size:1rem; }
}
@media (max-width:660px){
  .brand-sub{ display:none; }     /* some a linha de baixo do título */
  .brand-divider{ display:none; } /* e o divisor para caber tudo */
}


.nav{display:flex; gap:22px; align-items:center}
.nav a{color:var(--text-300); font-weight:500}
.nav a:hover,.nav a.active{color:var(--text-100)}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--accent); color:#140a05; border:none;
  padding:12px 18px; border-radius:999px; box-shadow:var(--shadow);
  font-weight:800; letter-spacing:.3px; transition: transform .15s ease, background .2s ease;
}
.btn:hover{transform:translateY(-1px); background:var(--accent-700)}
.btn-ghost{background:transparent; border:1px solid var(--line); color:var(--text-100)}
.btn-sm{padding:8px 14px; font-size:.95rem}
.btn-lg{padding:14px 22px; font-size:1.05rem}

.nav-toggle{display:none; width:40px; height:40px; background:transparent; border:none; position:relative}
.nav-toggle span{position:absolute; left:10px; right:10px; height:2px; background:#fff; transition:.3s}
.nav-toggle span:nth-child(1){top:12px}
.nav-toggle span:nth-child(2){top:19px}
.nav-toggle span:nth-child(3){top:26px}
.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-open .nav-toggle span:nth-child(2){opacity:0}
.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:900px){
  .nav-toggle{display:block}
  .nav{
    position:fixed; inset:60px 0 auto 0; background:rgba(18,19,20,.94);
    padding:16px; display:grid; gap:12px; transform:translateY(-120%); transition:.3s;
    border-bottom:1px solid var(--line);
  }
  .nav-open #nav{transform:translateY(0)}
}

/* ======= Hero (split) ======= */
.hero{padding:54px 0 36px}
/* ===== Camadas de fundo alinhadas às colunas do hero ===== */
.hero{ position:relative; }
.hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    /* luz quente sutil atrás do texto (usa a cor da logo) */
    radial-gradient(700px 420px at var(--hero-focus-x) 150px, rgba(224,106,46,.10), transparent 60%),
    /* vinheta suave atrás da mídia à direita */
    radial-gradient(900px 520px at var(--hero-media-x) 200px, rgba(255,255,255,.06), transparent 65%);
}
.hero-grid{ position:relative; z-index:1; } /* conteúdo por cima do ::before */

.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:28px; align-items:center}
@media (max-width:980px){ .hero-grid{grid-template-columns:1fr; gap:20px} }

.hero-copy h1{margin:0 0 8px; font-size:clamp(1.8rem, 3.5vw, 3rem); line-height:1.2}
.lead{color:var(--text-300); margin:0 0 16px}
.badges{display:flex; flex-wrap:wrap; gap:10px; padding:0; margin:0 0 22px; list-style:none}
.badges li{
  background:linear-gradient(180deg, var(--accent-soft), rgba(224,106,46,.06));
  border:1px solid var(--line); border-radius:999px; padding:6px 12px; color:var(--sand-50)
}
.actions{display:flex; gap:12px; flex-wrap:wrap}

/* Moldura do vídeo com brilho laranja sutil (sem crop) */
.frame-video{
  position:relative; border-radius:24px; overflow:hidden;
  background: radial-gradient(500px 300px at 30% 10%, var(--accent-soft), rgba(255,255,255,.02));
  box-shadow: var(--shadow);
  aspect-ratio: 16 / 9;               /* quadro elegante em qualquer tela */
  display:grid; place-items:center;
}
/* === VIDEO FILL MODE: vídeo ocupa 100% da box (cover), sem descer === */
.frame-video.fill{
  position:relative;
  overflow:hidden;        /* esconde só o que exceder do cover */
}

.frame-video.fill > .hero-video{
  position:absolute !important; /* ignora qualquer regra anterior */
  inset:0 !important;           /* cola em todas as bordas da box */
  width:100% !important;
  height:100% !important;
  transform:none !important;    /* remove translate(-50%,-50%) */
  object-fit:cover !important;  /* preenche a box */
  object-position:center !important; /* centraliza o corte */
  display:block;
}

.hero-video{
  position:absolute; top:55%; left:50%; transform:translate(-50%,-50%);
  display:block; filter:contrast(1.05) saturate(1.05);
  /* classes alternadas via JS para não cortar/distorcer */
}
.hero-video.fit-width{ width:100%; height:auto; }
.hero-video.fit-height{  width:auto; }

/* ======= Sections ======= */
.section{padding:74px 0}
.section.alt{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00))}
.section-head{text-align:center; margin-bottom:28px}
.section-head h2{margin:0 0 8px; font-size:clamp(1.4rem, 2.6vw, 2.2rem)}
.section-head p{color:var(--muted)}

/* ======= Cards (treinamentos/serviços) ======= */
.grid-cards{
  display:grid; gap:18px;
  grid-template-columns: repeat(4, minmax(0,1fr));
}
@media (max-width:1120px){ .grid-cards{grid-template-columns: repeat(2,1fr)} }
@media (max-width:620px){ .grid-cards{grid-template-columns: 1fr} }

.card{
  background:linear-gradient(180deg, var(--card), var(--card-2));
  border:1px solid var(--line); border-radius:16px; padding:18px;
  box-shadow:var(--shadow); transition:.2s transform, .2s border-color, .2s box-shadow;
  display:grid; grid-template-rows:auto 1fr auto; gap:10px
}
.card:hover{transform:translateY(-4px); border-color:rgba(224,106,46,.25); box-shadow:0 16px 46px rgba(0,0,0,.45)}
.card-icn{width:50px; height:50px; border-radius:14px; display:grid; place-items:center; background:var(--accent-soft)}
.card-icn svg{width:24px; height:24px; fill:var(--accent)}
.card h3{margin:6px 0 6px; font-size:1.12rem}
.card p{color:var(--text-300); margin:0 0 10px}
.card-cta{color:var(--accent); font-weight:700}

/* ======= Metodologia ======= */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:24px 0 0; padding:0; list-style:none}
@media (max-width:900px){ .steps{grid-template-columns:1fr} }
.steps li{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:18px}
.steps li span{
  display:inline-grid; place-items:center; width:32px; height:32px; border-radius:999px;
  background:var(--accent); color:#140a05; font-weight:900; margin-bottom:8px
}
.steps p{color:var(--text-300)}

/* ======= Instrutor ======= */
.instructor{display:grid; grid-template-columns: .95fr 1.05fr; gap:24px; align-items:center}
@media (max-width:980px){ .instructor{grid-template-columns:1fr} }

/* ===== Instrutor — imagem inteira, sem zoom ===== */
.portrait{
  margin:0;
  border-radius:20px;
  overflow:hidden;
  border:1px solid var(--line);
  background:#0e131a;          /* cor de fundo para as “barras” que sobrarem */
  aspect-ratio: var(--portrait-ratio); /* controla a altura da box */
  display:grid; place-items:center;
  box-shadow:var(--shadow);
}

/* imagem preenche a box, mas sem recortar (contain) */
.portrait img{
  height:125%;
  object-fit: contain;          /* <- chave: mostra a imagem inteira */
  object-position: center;      /* centraliza as sobras */
  display:block;
  margin-top: -30%;
}

.bio h3{margin:.2rem 0 1rem}
.ticks{list-style:none; padding:0; margin:12px 0 18px}
.ticks li{position:relative; padding-left:22px; color:var(--text-300)}
.ticks li::before{
  content:""; position:absolute; left:0; top:.6em; width:8px; height:8px; border-radius:50%;
  background:var(--accent)
}

/* ======= Depoimentos ======= */
.quotes{display:grid; grid-template-columns: repeat(3,1fr); gap:16px}
@media (max-width:980px){ .quotes{grid-template-columns:1fr} }
.quotes blockquote{
  margin:0; padding:18px; background:var(--card); border:1px solid var(--line); border-radius:16px; color:var(--text-300)
}
.quotes cite{display:block; margin-top:8px; color:var(--muted); font-style:normal}

/* ======= Galeria ======= */
.gallery{display:grid; gap:10px; grid-template-columns: repeat(4,1fr)}
@media (max-width:1100px){ .gallery{grid-template-columns: repeat(3,1fr)} }
@media (max-width:740px){ .gallery{grid-template-columns: repeat(2,1fr)} }
@media (max-width:480px){ .gallery{grid-template-columns: 1fr} }
.gallery figure{
  margin:0; border-radius:14px; overflow:hidden; border:1px solid var(--line);
  background:rgba(255,255,255,.02); cursor:pointer; box-shadow:var(--shadow)
}
.gallery img{width:100%; height:100%; object-fit:cover; object-position:center; display:block; aspect-ratio: 4/3}

/* Lightbox */
.lightbox{
  position:fixed; inset:0; background:rgba(0,0,0,.86); display:grid; place-items:center;
  z-index:80; padding:20px;
}
.lightbox[hidden]{display:none}
.lightbox img{max-width:min(1200px, 92vw); max-height:86vh; border-radius:16px; border:1px solid rgba(255,255,255,.15)}
.lightbox-close{
  position:absolute; top:18px; right:18px; width:44px; height:44px; border-radius:50%;
  font-size:28px; line-height:44px; text-align:center; border:none; color:#fff; background:rgba(255,255,255,.18); cursor:pointer
}

/* ======= CTA ======= */
.cta .cta-box{
  text-align:center; background:linear-gradient(135deg, var(--accent-soft), rgba(224,106,46,.06));
  border:1px solid var(--line); border-radius:20px; padding:28px; box-shadow:var(--shadow)
}

/* ======= Footer ======= */
/* ===== Footer sofisticado ===== */
.site-footer{
  position: relative;
  background: linear-gradient(180deg, var(--bg-900), #0f1113);
  padding-top: 8px; /* espaço para a régua superior */
  border-top: none;
}
/* régua superior com gradiente da marca */
.site-footer::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity:.9;
}

/* grid de colunas */
.foot-grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap:28px;
  padding:36px 0 22px;
}
@media (max-width: 900px){
  .foot-grid{ grid-template-columns:1fr; gap:18px; }
}

/* bloco da marca */
.foot-brand{ display:flex; gap:14px; align-items:center; }
.foot-mark{
  position:relative; width:52px; height:52px; border-radius:14px; overflow:hidden;
  display:inline-grid; place-items:center;
}
.foot-mark img{ width:100%; height:100%; object-fit:cover; border-radius:12px; }
/* aro sutil em gradiente na marca */
.foot-mark::after{
  content:""; position:absolute; inset:-1px; border-radius:16px; padding:1px;
  background: conic-gradient(from 220deg, rgba(224,106,46,.9), rgba(224,106,46,.25), rgba(224,106,46,.9));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.foot-brand strong{ display:block; color:var(--text-100) }
.foot-brand small{ display:block; color:var(--muted) }
.foot-slogan{ margin:.35rem 0 0; color:var(--text-300); font-size:.95rem }

/* colunas */
.foot-col h4{
  margin:0 0 8px; font-size:1rem; color:var(--sand-50); letter-spacing:.2px;
}
.foot-col ul{ list-style:none; padding:0; margin:0 }
.foot-col li{ margin:8px 0 }
.foot-col a{
  color:var(--text-300);
  text-decoration: none;
  border-bottom:1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
  text-underline-offset: 3px;
}
.foot-col a:hover{
  color:var(--sand-50);
  border-color: rgba(224,106,46,.35);
}

/* espaço reservado para o botão flutuante em telas pequenas */
:root{
  --fab-safe: 72px; /* ~56px do FAB + respiro */
}

/* ===== Footer — faixa inferior responsiva ===== */
.foot-bottom{
  border-top:1px solid var(--line);
  color:var(--muted);

  /* centraliza o conteúdo e limita à mesma largura do .container */
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 12px clamp(12px, var(--container-x), 24px) 24px;

  /* layout desktop: esquerda | centro | direita */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
}

/* © — sempre no centro */
.foot-bottom small:first-child{
  grid-column: 2;
  justify-self: center;
  text-align: center;
}

/* crédito — à direita, com leve afastamento */
.foot-bottom .credit{
  grid-column: 3;
  justify-self: end;
  font-size: .55rem;
  letter-spacing: .2px;
  opacity: .85;
  padding-right: clamp(6px, 1.5vw, 14px);
}

/* MOBILE: empilha e dá espaço para o botão flutuante do WhatsApp */
@media (max-width: 820px){
  .foot-bottom{
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;

    /* evita sobrepor o FAB */
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: calc(24px + var(--fab-safe));
  }

  .foot-bottom small:first-child{ grid-column: 1; }
  .foot-bottom .credit{
    grid-column: 1;
    margin-top: 6px;
    padding-right: 0;
  }
}

/* ======= FAB WhatsApp ======= */
/* ===== FAB WhatsApp — orbe premium ===== */
.fab-wa{
  position: fixed; right: 18px; bottom: 18px;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  /* orbe em degradê + brilho sutil */
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.25), transparent 40%),
    linear-gradient(180deg, #2fe17e, var(--wa) 45%, var(--wa-700));
  border: 1px solid rgba(255,255,255,.22);
  box-shadow:
    0 14px 36px rgba(37,211,102,.35),
    0 2px 8px rgba(0,0,0,.35);
  color:#fff; z-index:70; isolation:isolate;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.fab-wa:hover{ transform: translateY(-2px); box-shadow: 0 18px 44px rgba(37,211,102,.42), 0 4px 12px rgba(0,0,0,.38); }
.fab-wa:active{ transform: translateY(0); }

/* anel externo suave */
.fab-wa .fab-ring{
  position:absolute; inset:-4px; border-radius:50%;
  box-shadow: 0 0 0 3px rgba(37,211,102,.22) inset, 0 0 32px rgba(37,211,102,.25);
  pointer-events:none;
}

/* ícone branco visível */
.fab-wa svg{ width: 28px; height: 28px; fill:#fff; filter: drop-shadow(0 1px 0 rgba(0,0,0,.20)); }

/* Tooltip elegante (desktop) */
.fab-wa .fab-tooltip{
  position:absolute; right: 70px; bottom: 50%; transform: translateY(50%) translateX(6px);
  background: rgba(18,19,20,.92); color:#fff; border:1px solid var(--line);
  padding: 6px 10px; border-radius: 10px; font-size: .86rem; white-space: nowrap;
  box-shadow: var(--shadow); opacity:0; pointer-events:none; transition: .18s ease;
}
.fab-wa:hover .fab-tooltip{ opacity:1; transform: translateY(50%) translateX(0); }

/* Responsivo: reduz orbe no mobile e oculta tooltip */
@media (max-width: 640px){
  .fab-wa{ width: 40px; height: 40px; }
  .fab-wa svg{ width: 26px; height: 26px; }
  .fab-wa .fab-tooltip{ display:none; }
}

/* ======= Back to Top ======= */
#backToTop{
  position:fixed; right:18px; bottom:86px; width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.14); border:1px solid var(--line); color:#fff;
  display:grid; place-items:center; cursor:pointer; box-shadow:var(--shadow);
  opacity:0; pointer-events:none; transition:.2s
}
#backToTop.visible{opacity:1; pointer-events:auto}
#backToTop svg{width:20px; height:20px; fill:#fff}

/* ======= Acessibilidade: reduzir movimento ======= */
@media (prefers-reduced-motion: reduce){
  .btn{transition:none}
}


/* ===== Bandas a partir de Treinamentos ===== */
.section{
  position: relative;
  padding: 74px 0;                 /* mantém seu espaçamento */
  background: var(--band-dark);    /* faixa escura */
  z-index: 0;
}

/* Alternada: um pouco mais clara */
.section.alt{
  background: var(--band-light);
}

/* Garante que o conteúdo fique “certinho” acima de qualquer pseudo-fundo */
.section > .container{
  position: relative;
  z-index: 1;
}

/* Linhas divisórias sutis entre faixas (opcional, fica bem profissional) */
.section + .section{
  box-shadow: inset 0 1px 0 var(--line);
}

/* Anula o antigo pseudo-fundo da .section.alt (que ficava limitado ao container) */
.section.alt::before{ content: none !important; }