:root{
      --bg:#07070a;
      --txt:#f2f2f4;
      --muted:#b9b9c2;
      --red:#ff2b2b;
      --shadow: 0 18px 60px rgba(0,0,0,.55);
      --max:1180px;
      --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;

      --pan-time: 20s;   /* X segundos até “scrollar 50%” e trocar */
      --fade-time: 1.2s; /* duração do fade quando troca */
    }

    *{ box-sizing:border-box; }
    html,body{ height:100%; }
    body{
      margin:0;
      font-family:var(--sans);
      color:var(--txt);
      overflow-x:hidden;
      background: #121212;
    }

    .bgDivisor {
        background: radial-gradient(1200px 600px at 80% -10%, rgba(255, 43, 43, .18), transparent 60%), radial-gradient(900px 500px at 10% 0%, rgba(255, 255, 255, .05), transparent 55%), linear-gradient(180deg, #050508, var(--bg));
    }

    a{ color:inherit; text-decoration:none; }
    .wrap{ max-width:var(--max); margin:0 auto; padding:0 20px; }

    /* ==========================
       TOPBAR
    ========================== */
    .topbar{
      position:fixed;
      top:0; left:0; right:0;
      z-index:50;
      background: rgba(7,7,10,.35);
      backdrop-filter: blur(10px);
      border-bottom:1px solid rgba(255,255,255,.06);
    }
    .topbar .row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:14px 0;
      gap:16px;
    }
    .brand img{
      height:54px;
      width:auto;
      display:block;
      filter: drop-shadow(0 10px 30px rgba(0,0,0,.4));
    }
    .nav{
      display:flex;
      gap:18px;
      align-items:center;
      color:rgba(255,255,255,.75);
      font-weight:700;
      font-size:14px;
    }
    .nav a{ padding:10px 10px; border-radius:12px; }
    .nav a:hover{ background:rgba(255,255,255,.06); color:#fff; }

    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      padding:12px 14px;
      border-radius:14px;
      font-weight:900;
      letter-spacing:.2px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.06);
      color:var(--txt);
      cursor:pointer;
      transition: transform .15s ease, background .15s ease, border-color .15s ease;
      user-select:none;
      font-size:14px;
      white-space:nowrap;
    }
    .btn:hover{
      transform: translateY(-1px);
      background:rgba(255,255,255,.10);
      border-color:rgba(255,255,255,.20);
    }
    .btn.primary{
      background: linear-gradient(180deg, rgba(255,43,43,.98), rgba(214,31,31,.98));
      border-color: rgba(255,43,43,.35);
      box-shadow: 0 16px 50px rgba(255,43,43,.20);
    }

    /* ==========================
       HERO BANNER + CAROUSEL
       (altura metade + overlay leve)
    ========================== */
    .hero{
      position:relative;
      min-height:46vh;
      display:flex;
      align-items:flex-end;
      padding: 95px 0 40px;
      overflow:hidden;
    }
    .carousel{ position:absolute; inset:0; z-index:1; overflow:hidden; }
    .slide{
      position:absolute;
      inset:-40px;
      background-size:cover;
      background-position: top center;
      opacity:0;
      filter: saturate(1.1) contrast(1.05);
      will-change: background-position, opacity;
    }

    /* slide que está “tocando” */
    .slide.active{
      opacity:1;
      animation: panToMid var(--pan-time) linear forwards;
    }

    /* slide que está saindo (fade-out rápido, sem reset/pulo) */
    .slide.leaving{
      opacity:1;
      animation: fadeOut var(--fade-time) ease forwards;
    }

    @keyframes panToMid{
      0%   { background-position: top center; opacity: 0; }
      12%  { background-position: top center; opacity: 1; } /* fade-in */
      100% { background-position: center center; opacity: 1; } /* 50% do “scroll” */
    }

    @keyframes fadeOut{
      to { opacity:0; }
    }

    .hero-overlay{
      position:absolute;
      inset:0;
      z-index:3;
      background:
        linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.45) 90%),
        radial-gradient(circle at 50% 30%, rgba(0,0,0,.05), rgba(0,0,0,.55) 78%);
      pointer-events:none;
    }
    .hero-content{ position:relative; z-index:4; width:100%; }
    .hero-grid{
      display:grid;
      grid-template-columns: 1.25fr .75fr;
      gap:26px;
      align-items:end;
    }
    .hero h1{
      margin:0;
      font-size: clamp(28px, 3.6vw, 48px);
      line-height:1.02;
      letter-spacing:-1px;
      text-shadow: 0 20px 70px rgba(0,0,0,.70);
    }
    .hero h1 .accent{ color: var(--red); }
    .hero p{
      margin:14px 0 18px;
      color: rgba(255,255,255,.82);
      font-size: 16px;
      line-height:1.65;
      max-width: 62ch;
    }
    .hero-actions{ display:flex; flex-wrap:wrap; gap:12px; }

    .hero-card{
      background: rgba(10,10,14,.45);
      border:1px solid rgba(255,255,255,.12);
      border-radius: 18px;
      padding:16px;
      box-shadow: var(--shadow);
      backdrop-filter: blur(10px);
    }
    .hero-card .t{ font-weight:900; font-size:15px; margin-bottom:8px; }
    .hero-card .bullets{ margin-top:12px; display:grid; gap:10px; }
    .bullet{ display:flex; gap:10px; color: rgba(255,255,255,.78); font-size:13px; }
    .bullet i{
      width:10px; height:10px; margin-top:4px;
      border-radius:3px;
      background: rgba(255,43,43,.95);
      box-shadow: 0 0 0 3px rgba(255,43,43,.12);
      flex:0 0 auto;
    }

    /* ==========================
       SECTION
    ========================== */
    .section{ padding: 35px 0 30px; }
    .section h2{
      margin:0 0 10px;
      font-size: clamp(26px, 2.4vw, 36px);
      letter-spacing:-.6px;
    }
    .section p.sub{
      margin:0 0 20px;
      color: var(--muted);
      line-height:1.6;
      max-width: 90ch;
    }

    /* ==========================
   COURSES — tiras tortas de verdade (paralelogramo)
========================== */

.courses-grid{
  position:relative;
  display:flex;
  gap:0;
  width:100%;
  min-height:520px;
  margin-top:26px;
  transform: translateX(-70px);
  left: 70px;
}

/* ajuste fino do efeito */
:root{
  --slant: 55px;      /* inclinação (aumenta/diminui) */
  --overlap: 56px;    /* quanto uma entra na outra (cola) */
}

.course-col{
  position:relative;
  flex:1;
  min-width:150px;
  height:520px;           /* garante altura fixa igual na screenshot */
  overflow:hidden;
  border-radius:0;
  box-shadow: 0 18px 60px rgba(0,0,0,.40);
  cursor:pointer;

  /* cola as tiras (overlap) */
  margin-left: calc(var(--overlap) * -1);
}

.course-col:first-child{ margin-left:0; }

/* AQUI é o formato certo: paralelogramo inclinado */
.course-col{
  clip-path: polygon(
    var(--slant) 0,
    100% 0,
    calc(100% - var(--slant)) 100%,
    0 100%
  );
}

/* pra evitar bordas/fendas (render “hairline”) */
.course-col{
  background: #000;
  outline: 1px solid rgba(255,255,255,.06); /* simula a divisão sutil */
  outline-offset: -1px;
}

.course-col:hover{
  transform: translateY(-6px);
  filter: brightness(1.05);
  transition: transform .22s ease, filter .22s ease;
}

.course-bg{
  position:absolute;
  inset:-10px;              /* “sangria” pro recorte não comer imagem */
  background-size:cover;
  background-position:center;
  transform: scale(1.06);
  filter: saturate(1.10) contrast(1.05);
}

/* overlay leve */
.course-col::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.60));
  pointer-events:none;
}

/* título vertical na borda esquerda */
.course-title{
  position: absolute;
    left: 21px;
    top: -4px;
    bottom: 0;
    z-index: 4;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 27px;
    color: rgba(255, 255, 255, .94);
    text-shadow: 0 18px 60px rgba(0, 0, 0, .65);
    width: fit-content;
    padding: 18px 14px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    transform: rotate(6deg);
    height: 102%;
}

/* degradê preto -> transparente atrás do texto */
.course-title::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background: linear-gradient(90deg, rgba(0,0,0,.78), rgba(0,0,0,0));
}

/* corpo do card embaixo */
.course-body {
    position: absolute;
    left: 0px;
    right: 36px;
    bottom: 14px;
    z-index: 4;
    padding: 0px 20px 0px 29px;
    border-radius: 0;
    background: rgba(0, 0, 0, .42);
    border: 1px solid rgba(255, 255, 255, .14);
    backdrop-filter: blur(8px);
    clip-path: polygon(11px 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
    min-height: 91px;
    font-size: 14px;
}
.course-body::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,.10),
    rgba(255,255,255,0) 55%
  );
  pointer-events:none;
}
/* mobile: empilha normal */
@media (max-width: 980px){
  .courses-grid{
    transform:none;
    flex-direction:column;
    min-height:auto;
  }
  .course-col{
    height:340px;
    margin-left:0;
    clip-path:none;
    outline:none;
    border-bottom:1px solid rgba(255,255,255,.10);
  }
  .course-title{
    writing-mode: horizontal-tb;
    width:100%;
  }
  .course-title::before{
    background: linear-gradient(180deg, rgba(0,0,0,.75), rgba(0,0,0,0));
  }
}

.course-col.is-bw .course-bg{
  filter: grayscale(1) contrast(1.05) brightness(0.95);
}

.video-wrap{
  position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0px;
    aspect-ratio: 16 / 9;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 18px 60px rgba(0, 0, 0, .55);
    background: rgba(0, 0, 0, .35);
}

.video-wrap iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.how-grid{
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.how-step{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding: 14px 14px;
  border-radius: 16px;
  background: rgba(10,10,14,.45);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 60px rgba(0,0,0,.25);
}

.how-n{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  background: rgba(255,43,43,.18);
  border: 1px solid rgba(255,43,43,.35);
  color: #fff;
  flex: 0 0 auto;
}

.how-t{
  font-weight: 900;
  margin-bottom: 4px;
}

.how-d{
  color: rgba(255,255,255,.78);
  line-height: 1.55;
  font-size: 14px;
}

@media (max-width: 980px){
  .how-grid{ grid-template-columns: 1fr; }
}


/* ==========================
   RESPONSIVO — HERO
   - some com a hero-card no celular
   - melhora espaçamento do hero
========================== */
@media (max-width: 980px){
  .hero{
    min-height: auto;
    padding: 86px 0 26px;
    align-items: flex-end;
  }

  .hero-grid{
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* remove o quadro do lado no mobile */
  .hero-card{
    display: none !important;
  }

  .hero h1{
    font-size: clamp(26px, 7vw, 38px);
  }

  .hero p{
    font-size: 15px;
  }
}


/* ==========================
   RESPONSIVO — CURSOS (SIMPLIFICAR)
   - remove o “torto”, overlap, clip-path
   - vira lista/card normal
========================== */
@media (max-width: 980px){
  .courses-grid{
    transform: none !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    min-height: auto !important;
    margin-top: 18px !important;
  }

  .course-col{
    height: auto !important;
    margin-left: 0 !important;
    clip-path: none !important;
    outline: none !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    transform: none !important;
    box-shadow: 0 18px 60px rgba(0,0,0,.35) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    background: rgba(10,10,14,.45) !important;
  }

  /* garante que o link ocupe o card todo quando tiver <a> */
  .course-col > a{
    display: block;
    color: inherit;
    text-decoration: none;
  }

  /* imagem no topo do card */
  .course-bg{
    position: relative !important;
    inset: auto !important;
    height: 180px !important;
    transform: none !important;
    filter: saturate(1.10) contrast(1.05) !important;
    background-position: center !important;
  }

  /* tira o título vertical e deixa horizontal */
  .course-title{
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    bottom: auto !important;
    writing-mode: horizontal-tb !important;
    transform: none !important;
    height: auto !important;
    padding: 14px 16px 8px !important;
    font-size: 18px !important;
    letter-spacing: .2px !important;
    text-transform: none !important;
  }

  .course-title::before{
    content: none !important; /* remove o degradê lateral do modo vertical */
  }

  /* texto do curso embaixo, simples */
  .course-body{
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin: 0 16px 16px !important;
    padding: 12px 14px !important;
    min-height: auto !important;
    clip-path: none !important;
    border-radius: 14px !important;
    background: rgba(0,0,0,.35) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    backdrop-filter: blur(8px);
  }

  /* overlay de gradiente do “torto” fica mais leve (opcional) */
  .course-col::after{
    background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.45)) !important;
  }
  
}
@media (max-width: 980px){

  /* 1) O principal bug: remove o deslocamento lateral do desktop */
  .courses-grid{
    left: 0 !important;              /* <- isso corrige o “cortado” */
    transform: none !important;
    width: 100% !important;
    margin-top: 18px !important;
    min-height: auto !important;

    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* 2) Card normal */
  .course-col{
    margin-left: 0 !important;
    clip-path: none !important;
    outline: none !important;
    height: auto !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    transform: none !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    background: rgba(10,10,14,.45) !important;
  }

  /* 3) Quando tiver <a> envolvendo o card, garante layout ok */
  .course-col > a{
    display: block !important;
  }

  /* 4) Força a imagem do curso no topo e “mata” o inline transform/position */
  .course-bg{
    position: relative !important;
    inset: auto !important;
    height: 180px !important;

    transform: none !important;              /* ganha do inline */
    background-position: center !important;  /* ganha do inline */
    background-size: cover !important;
  }

  /* 5) Título horizontal */
  .course-title{
    position: relative !important;
    writing-mode: horizontal-tb !important;
    transform: none !important;
    height: auto !important;
    padding: 14px 16px 8px !important;
    font-size: 18px !important;
    text-transform: none !important;
  }
  .course-title::before{ content: none !important; }

  /* 6) Texto embaixo */
  .course-body{
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    margin: 0 16px 16px !important;
    padding: 12px 14px !important;
    min-height: auto !important;

    clip-path: none !important;
    border-radius: 14px !important;
  }
}

@media (max-width: 980px){
  .course-col.is-bw .course-bg{
    filter: grayscale(1) contrast(1.05) brightness(0.95) !important;
  }
}

/* ==========================
   APRESENTAÇÃO — 2 colunas
========================== */
.apresentacao-grid{
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 18px;
  align-items: start;
  margin-top: 14px;
}

/* Reaproveita o estilo do hero-card, mas sem depender da HERO */
.learn-card{
  background: rgba(10,10,14,.45);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 16px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

.learn-card .t{ font-weight:900; font-size:15px; margin-bottom:8px; }
.learn-card .bullets{ margin-top:12px; display:grid; gap:10px; }

/* Mobile-first: empilha e deixa o card abaixo do vídeo */
@media (max-width: 980px){
  .apresentacao-grid{
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* ==========================
   APRESENTAÇÃO — layout final
========================== */
.apresentacao-grid{
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 18px;
  align-items: start;
  margin-top: 14px;
  position: relative;
}

/* Linha divisória vertical entre colunas */
.apresentacao-grid::after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(1.35fr); /* fallback ignorado pelo CSS, por isso usamos outra abordagem abaixo */
  width: 1px;
  background: rgba(255,255,255,.10);
  pointer-events: none;
  display: none; /* ativado no desktop abaixo */
}

/* Solução real da linha (grid-friendly): coloca na coluna 2 */
.learn-card{
  background: rgba(10,10,14,.45);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 16px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  position: relative;
}

/* Linha divisória "colada" no lado esquerdo do card */
.learn-card::before{
  content: "";
  position: absolute;
  left: -9px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: rgba(255,255,255,.10);
}

.learn-card .t{ font-weight:900; font-size:15px; margin-bottom:10px; }

.learn-text{
  color: rgba(255,255,255,.82);
  line-height: 1.5;
  margin: 0 0 10px;
  font-size: 14px;
}

.learn-actions{
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Lista abaixo */
.learn-list{
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.learn-list-title{
  font-weight: 900;
  margin-bottom: 12px;
  font-size: 15px;
}

.learn-items{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
}

/* Mobile-first */
@media (max-width: 980px){
  .apresentacao-grid{
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* some a linha no mobile */
  .learn-card::before{
    display: none;
  }

  .learn-items{
    grid-template-columns: 1fr;
  }
}