/* =========================================================
   DE REPENTE ORLANDO — Cursos (estilos complementares)
   Reaproveita as variáveis e o design system de css/style.css
   ========================================================= */

/* ---------- PAGE HERO (topo das páginas internas) ---------- */
.page-hero{
  position:relative;
  min-height: 62vh;
  display:flex; align-items:flex-end;
  padding: calc(var(--header-h) + 70px) 0 90px;
  overflow:hidden;
  background: var(--navy);
}
.page-hero__bg{ position:absolute; inset:0; }
.page-hero__bg img{
  width:100%; height:100%; object-fit:cover;
  opacity:.55;
}
.page-hero__gradient{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(10,37,64,.75) 0%, rgba(10,37,64,.55) 40%, var(--navy) 100%);
}
.page-hero__content{ position:relative; z-index:1; color:var(--white); max-width: 720px; }
.page-hero .eyebrow{ color: var(--pink-light); }
.page-hero .eyebrow::before{ background: var(--pink-light); }
.page-hero__title{
  font-family: var(--f-display);
  font-weight:700;
  font-size: clamp(32px, 4.6vw, 52px);
  line-height:1.12;
  margin: 14px 0 18px;
  letter-spacing:-.01em;
}
.page-hero__subtitle{
  font-size: 17px;
  line-height:1.7;
  color: rgba(255,255,255,.82);
  max-width: 620px;
  margin: 0 0 30px;
}
.page-hero__breadcrumb{
  display:flex; align-items:center; gap:8px;
  font-size:13px; color: rgba(255,255,255,.6);
  margin-bottom: 18px;
}
.page-hero__breadcrumb a{ color: rgba(255,255,255,.85); transition: color .3s var(--ease); }
.page-hero__breadcrumb a:hover{ color: var(--pink-light); }
.page-hero__breadcrumb svg{ width:12px; height:12px; opacity:.6; }

/* ---------- COURSE CARDS ---------- */
.courses{ padding: 110px 0 120px; }
.courses__grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
.course-card{
  position:relative;
  display:flex; flex-direction:column;
  border-radius: var(--radius-lg);
  overflow:hidden;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 20px 45px -30px rgba(10,37,64,.25);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.course-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 34px 60px -24px rgba(10,37,64,.3);
}
.course-card__media{ position:relative; aspect-ratio: 16/10; overflow:hidden; }
.course-card__media img{
  width:100%; height:100%; object-fit:cover;
  transition: transform .7s var(--ease);
}
.course-card:hover .course-card__media img{ transform: scale(1.06); }
.course-card__badge{
  position:absolute; left:16px; top:16px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12px; font-weight:700; letter-spacing:.02em;
  background: var(--pink);
  color: var(--white);
}
.course-card__badge--outline{
  background: rgba(255,255,255,.92);
  color: var(--blue);
}
.course-card__body{ padding: 28px 28px 32px; display:flex; flex-direction:column; flex:1; }
.course-card__body h3{
  font-family: var(--f-display);
  font-size: 22px;
  margin: 0 0 12px;
  color: var(--navy);
}
.course-card__body p{
  color: var(--ink-soft);
  font-size: 15px;
  line-height:1.7;
  margin: 0 0 22px;
  flex:1;
}
.course-card__meta{
  display:flex; align-items:center; gap:18px;
  font-size: 13px; color: var(--ink-soft);
  margin-bottom: 20px;
}
.course-card__meta span{ display:flex; align-items:center; gap:6px; }
.course-card__meta svg{ width:15px; height:15px; color: var(--blue); }

/* ---------- BENEFITS ---------- */
.benefits{ padding: 100px 0; background: var(--sky-50); }
.benefits__grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.benefit{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 30px 26px;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.benefit:hover{ transform: translateY(-6px); box-shadow: 0 24px 45px -26px rgba(10,37,64,.28); }
.benefit__icon{
  width: 48px; height:48px;
  border-radius: 14px;
  background: var(--sky-100);
  color: var(--blue);
  display:flex; align-items:center; justify-content:center;
  margin-bottom: 18px;
}
.benefit__icon svg{ width:24px; height:24px; }
.benefit h3{ font-size:17px; margin: 0 0 8px; color: var(--navy); }
.benefit p{ color: var(--ink-soft); font-size:14px; line-height:1.6; margin:0; }

/* ---------- LESSON / VIDEO PAGE ---------- */
.lesson{ padding: 90px 0 40px; }
.lesson__head{ max-width: 760px; margin: 0 auto 44px; text-align:center; }
.lesson__head .eyebrow{ justify-content:center; }
.lesson__head .eyebrow::before{ display:none; }
.lesson__title{
  font-family: var(--f-display);
  font-weight:700;
  font-size: clamp(28px, 4vw, 42px);
  line-height:1.18;
  color: var(--navy);
  margin: 10px 0 18px;
}
.lesson__subtitle{
  font-size: 17px;
  line-height:1.75;
  color: var(--ink-soft);
  margin: 0;
}

.titulo{
  color: aliceblue;
}

.video-wrap{
  position:relative;
  max-width: 900px;
  margin: 0 auto;
  border-radius: var(--radius-lg);
  overflow:hidden;
  box-shadow: 0 40px 70px -30px rgba(10,37,64,.4);
  border: 1px solid var(--line);
  background: var(--navy);
}
.video-wrap__ratio{ position:relative; width:100%; padding-top: 56.25%; }
.video-wrap__ratio iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}

.lesson__cta{
  max-width: 900px;
  margin: 34px auto 0;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  text-align:center;
}
.lesson__cta p{ color: var(--ink-soft); font-size:14.5px; margin:0; }

/* ---------- CTA BANNER ---------- */
.cta-banner{
  position:relative;
  padding: 90px 0;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
  overflow:hidden;
  color: var(--white);
}
.cta-banner__flight{ position:absolute; inset:0; z-index:0; opacity:.5; }
.cta-banner__inner{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:space-between;
  gap: 40px; flex-wrap:wrap;
}
.cta-banner h2{
  font-family: var(--f-display);
  font-size: clamp(24px, 3.2vw, 34px);
  margin: 0 0 10px;
  max-width: 520px;
}
.cta-banner p{ color: rgba(255,255,255,.78); margin:0; max-width: 460px; font-size:15px; line-height:1.6; }
.cta-banner__actions{ display:flex; gap:14px; flex-wrap:wrap; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px){
  .courses__grid{ grid-template-columns: 1fr; }
  .benefits__grid{ grid-template-columns: repeat(2, 1fr); }
  .cta-banner__inner{ flex-direction:column; text-align:center; }
  .cta-banner p{ margin: 0 auto; }
}
@media (max-width: 620px){
  .page-hero{ min-height: 52vh; padding: calc(var(--header-h) + 46px) 0 60px; }
  .benefits__grid{ grid-template-columns: 1fr; }
  .lesson{ padding: 60px 0 20px; }
}