:root{
  --brand:#ec6726; --bg:#F9FAFC; --text:#292d36; --muted:#bdbec1;
  --card:#ffffff; --card-stroke:#e5e7eb; --shadow:0 8px 24px rgba(2,6,23,.06);
  --radius:14px; --footer-bg:#292d36; --footer-text:#F9FAFC; --footer-muted:#bdbec1;
}

body{margin:0;font-family: 'Filson Pro', sans-serif;color:var(--text)}
img{max-width:100%}
main{margin:0 16px 0 16px;}
.container{width:min(1120px,92%);margin:0 auto}
.center{text-align:center}
.btn{display:inline-block;background:var(--brand);color:#fff;padding:10px 14px;border-radius:8px;text-decoration:none}
.btn-outline-light{background:transparent;color:#fff;border:1px solid #fff}
.txt {font-size: 17px}

/* Topbar */
.topbar{background:#fff}
.topbar .container{display:flex;align-items:center;justify-content:space-between;padding:25px 0}
.nav a{color:var(--brand);text-decoration:none;margin-left:20px;opacity:.95}
.nav a:hover{opacity:1;font-weight: bold;}
.nav .active{font-weight:700}
.hamburger{display:none;background:transparent;border:0;color:var(--brand);font-size:22px;cursor:pointer}
.margem{padding:100px 0 80px}
.logo img{height:10px;width:auto}

/* Hero */
.hero-light{background:#fafafa;padding:28px 0}
.hero-icon{width:100%;height:160px;object-fit:contain}
.hero-light h1{margin:8px 0;font-size:clamp(26px,4vw,40px)}
.hero-light span{color:var(--brand)}
.sub{color:var(--text)}

/* Sections */
.section{margin:32px 0}
.section-title{font-size:40px;margin:0 0 16px;color:var(--brand)}
.cards-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}

/* Cards */
.card{background:var(--card);border:1px solid var(--card-stroke);border-radius:var(--radius);box-shadow:var(--shadow);padding:10px}
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
.btn-card{ display:inline-block; background:var(--brand); color:#fff; padding:12px 18px; border-radius:10px 0px 10px 10px; text-decoration:none; font-weight:600;}
.btn-card-outline{background:#fff;color:var(--brand);border:1px solid var(--brand)}
.badge{display:inline-block;background:#ffe7da;color:#8a2e00;font-weight:700;padding:6px 10px;border-radius:999px}

/* Botões das turmas sempre alinhados */
.card.training{display:flex;flex-direction:column;gap:12px}
.card.training .alinhabotao{margin-top:auto}

/* Group cards */
.group-icon{width:120px;height:120px;border-radius:10px; vertical-align: top;}
.group-grid{display:grid;grid-template-columns:14ch auto;gap:40px;align-items:center;}
.group-pd{padding:10px 10px 10px 10px}

/* Gerente */
.gerente-grid{display:grid;grid-template-columns:300px 1fr;gap:18px;align-items:center}
.gerente-grid img{border-radius:10px}

/*Bate-papo com o CEO ===== */
.ceo-cta { padding: 10px 0 0; }

.ceo-card{
  background:#2a2f36;               /* tom escuro do print */
  color:#f3f4f6;
  border-radius:20px;
  padding:48px 56px;
  display:grid;
  grid-template-columns:1.3fr 1fr;
  align-items:center;
  gap:32px;
  box-shadow:0 20px 50px rgba(0,0,0,.14);
}
.ceo-card:hover { background:#7b0ceb; color:#f3f4f6;}

.ceo-title{
  margin:0 0 12px;
  line-height:1.05;
  font-weight:800;
  font-size:clamp(36px,6vw,72px);    /* título grande como no print */
  letter-spacing:.2px;
}

.ceo-sub{
  margin:10px 0 22px;
  color:#cbd5e1;
  max-width:60ch;
}

.ceo-actions{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin: 40px 0 0 0}
.ceo-actions .btn{ background:var(--brand); color:#fff; padding:12px 18px; border-radius:10px 0px 10px 10px; font-weight:600;}

.ceo-meta{ display:flex; align-items:center; gap:18px; color:#fff; }
.ceo-meta .meta{ display:inline-flex; align-items:center; gap:8px; font-weight:700; }
.ceo-meta .icon{ width:22px; height:22px; color:var(--brand); flex:0 0 auto; }

/* bloco da imagem com “quarto de curva” atrás */
.ceo-right{ display:flex; justify-content:center; }
.ceo-figure{
  position:relative;
  width:min(430px, 90%);
  aspect-ratio:1/1;                   /* base quadrada */
  display:flex; align-items:flex-end; justify-content:center;
}
.ceo-figure::before{
  content:"";
  position:absolute; inset:6% 8% 22% 8%;
  background:#aeb3b8;                 /* shape cinza do print */
  border-radius:36px 36px 26px 0;      /* canto arredondado superior-esquerdo */
}
.ceo-figure img{
  position:relative;
  width:100%; height:100%; object-fit:contain;
  border-radius:16px;                  /* leve arredondado na foto */
}

/* Responsivo */
@media (max-width:980px){
  .ceo-card{ grid-template-columns:1fr; padding:36px 28px; }
  .ceo-right{ order:-1; }              /* imagem acima em telas pequenas */
  .ceo-title{ font-size:clamp(32px,8vw,56px); }
  .ceo-sub{ max-width:unset; margin: 40px 0 0 0}
}

/* Por que fazer parte */
.why-grid{display:grid;grid-template-columns:auto 41ch;gap:18px;align-items:center}

/* Vídeo */
.video-frame{position:static;border:1px solid var(--card-stroke);border-radius:12px;overflow:hidden}

/* Faixa escura */
.personalized{background:var(--footer-bg);color:#e5e7eb;padding:38px 0;margin-top:24px; border-radius:24px}
.personalized a:hover {background-color:#7b0ceb;}
.personalized-card{display:grid;grid-template-columns:1.2fr 1fr;gap:18px;border:1px solid #334155;border-radius:16px;padding:18px;background:#111a2c}
.pc-img{width:100%;height:180px;object-fit:cover;border-radius:12px;border:1px solid #334155}

/* ===== Cards de vídeo no estilo do print ===== */
.video-grid .reel-card{
  display:flex; flex-direction:column; gap:16px;
  padding:20px; border-radius:16px; /* já herda sombra/borda do .card */
}

/* linha do topo: vídeo pequeno (9:16) + título/elementos */
.reel-row{
  display:grid;
  grid-template-columns:auto 1fr; /* vídeo + texto (ou invertido) */
  align-items:center;
  gap:28px;
}

/* Moldura do “reels” */
.reel-frame{
  width:clamp(160px, 20vw, 220px);         /* tamanho menor do player */
  aspect-ratio:9/16;
  border-radius:22px;
  box-shadow:0 12px 36px rgba(15,17,20,.35);
  position:relative;
  padding:8px;                             /* cria a borda da moldura */
  display:flex; align-items:center; justify-content:center;
}

/* “barra” inferior do aparelho */
.reel-frame::after{
  content:"";
  position:absolute; left:50%; bottom:8px; transform:translateX(-50%);
  width:56%; height:8px; border-radius:8px;
  background:#2a2f36; opacity:.9; pointer-events:none;
}

/* Vídeo em 9:16 ocupando a moldura */
.reel-video{
  width:100%; height:100%; object-fit:cover;
  border-radius:16px; display:block; background:#000;
}

/* Títulos e badge */
.reel-title{
  margin:20px 0 0 0; color:var(--brand);
  font-weight:800; letter-spacing:.3px;
  font-size:clamp(20px, 3.4vw, 26px);
  line-height:1.05; text-transform:uppercase;
}
.reel-badge{ width:160px; height:auto; margin:10px 10px 5px 10px}

/* espaçamento do texto e botão dentro do card */
.reel-card .txt{ margin:10px 10px 10px 10px; font-size:16px}
.reel-card .btn{ background:var(--brand); color:#fff; padding:12px 18px; border-radius:10px 0px 10px 10px; font-weight:600;}

/* Responsivo: empilha conteúdo e centraliza o vídeo */
@media (max-width:860px){
  .reel-row{ grid-template-columns:1fr; gap:16px; }
  .reel-frame{ justify-self:center; }
  .reel-title{ text-align:center; }
}

/* ====== Footer ====== */
.footer{ background:var(--footer-bg); color:var(--footer-text); margin-top:50px; padding:100px 0 }
.footer-grid{
  display:grid; grid-template-columns: 1.2fr repeat(4, 1fr); gap:24px;
}
.footer a{ color:var(--footer-text); text-decoration:none; opacity:.9 }
.footer a:hover{ opacity:1; text-decoration:bold }
.footer .copyright{ color:var(--footer-muted); margin-top:30px }
.footer h5{ margin:0 0 8px }

/* Responsivo */
@media (max-width:1120px){
  .footer-grid{grid-template-columns:repeat(3,1fr)}
}

/* Responsive */
@media(max-width:664px){
  .cards-2{grid-template-columns:1fr}
  .why-grid,.gerente-grid{grid-template-columns:1fr}
  .hamburger{display:inline-block}
  .nav{display:none}
  .nav.open{display:block;position:absolute;top:56px;right:4%;background:var(--bg);padding:10px 14px;border-radius:10px}
  .nav.open a{display:block;margin:10px 0}
  .footer-grid{grid-template-columns:1fr}
}
@media(max-width:540px){
  .footer-grid{grid-template-columns:1fr; padding;0 16px 0 16px}
}