/* VIDEO CARTA — CSS ISOLADO
   Não depende das regras de grid/flex das demais páginas. */

.video-page,
.video-page * { box-sizing:border-box; }

.video-page {
  display:block;
  width:100%;
  max-width:none;
  margin:0;
  padding:0;
  overflow:hidden;
  background:#fbf5e9;
}

.video-page section {
  width:100%;
  max-width:none;
  margin:0;
}

/* HERO */
.video-page .video-hero {
  position:relative;
  min-height:520px;
  color:#fff;
  overflow:hidden;
}
.video-page .video-hero > img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.video-page .video-hero__overlay {
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(15,7,5,.84) 0%,rgba(15,7,5,.48) 45%,rgba(15,7,5,.08) 78%);
}
.video-page .video-hero__content {
  position:relative;
  z-index:2;
  width:min(1280px,calc(100% - 56px));
  margin:0 auto;
  padding:80px 0 60px;
}
.video-page .video-hero h1 {
  margin:10px 0 16px;
  font-size:clamp(3.2rem,5vw,5.8rem);
}
.video-page .video-hero p { max-width:550px; font-size:17px; }

/* BLOCO 50/50 — REGRA ÚNICA */
.video-page .video-intro,
.video-page .video-preview {
  display:flex !important;
  flex-flow:row nowrap !important;
  align-items:stretch !important;
  width:100% !important;
  min-height:430px;
}

.video-page .video-intro__media,
.video-page .video-intro__copy,
.video-page .video-preview__media,
.video-page .video-preview__copy {
  position:relative;
  flex:0 0 50% !important;
  width:50% !important;
  min-width:0 !important;
  max-width:50% !important;
  margin:0 !important;
}

.video-page .video-intro__media,
.video-page .video-preview__media {
  overflow:hidden;
}

.video-page .video-intro__media img,
.video-page .video-preview__media img {
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  object-fit:cover !important;
  display:block !important;
  margin:0 !important;
}

.video-page .video-intro__copy,
.video-page .video-preview__copy {
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-items:flex-start !important;
  padding:52px clamp(38px,5vw,90px) !important;
}

.video-page .video-intro { background:#fff8ec; color:#111b1e; }
.video-page .video-preview { background:#031b2b; color:#fff; }

.video-page .video-intro h2,
.video-page .video-preview h2 {
  margin:9px 0 15px;
  font-size:clamp(2.5rem,3.1vw,3.9rem);
}
.video-page .video-intro p,
.video-page .video-preview p {
  max-width:520px;
  font-size:13px;
}

.video-page .video-play {
  position:absolute;
  z-index:3;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:64px;
  height:64px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#c71924;
  color:#fff;
  border:3px solid rgba(255,255,255,.78);
}

/* BENEFÍCIOS */
.video-page .video-benefits {
  display:flex;
  flex-direction:column;
  gap:9px;
  margin-top:15px;
  font-size:12px;
  font-weight:700;
}

/* BANNERS */
.video-page .video-magic,
.video-page .video-universe {
  position:relative;
  min-height:270px;
  overflow:hidden;
  color:#fff;
}
.video-page .video-magic > img,
.video-page .video-universe > img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.video-page .video-magic__overlay,
.video-page .video-universe__overlay {
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(3,27,43,.90),rgba(3,27,43,.40),rgba(3,27,43,.12));
}
.video-page .video-magic__content,
.video-page .video-universe__content {
  position:relative;
  z-index:2;
  width:min(1280px,calc(100% - 56px));
  margin:0 auto;
  padding:47px 0;
}
.video-page .video-magic h2,
.video-page .video-universe h2 {
  margin:8px 0 11px;
  font-size:40px;
}

/* PASSOS / PÚBLICOS */
.video-page .video-steps,
.video-page .video-audiences,
.video-page .video-coming {
  padding:48px 0 54px;
  background:#fbf5e9;
}
.video-page .video-steps > .wrap,
.video-page .video-audiences > .wrap,
.video-page .video-coming > .wrap {
  width:min(1280px,calc(100% - 56px));
  margin:0 auto;
}
.video-page .video-heading { text-align:center; margin-bottom:30px; }
.video-page .video-heading h2 { margin:8px 0; font-size:38px; }

.video-page .video-step-grid,
.video-page .video-audience-grid {
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:24px;
}
.video-page .video-step-grid article,
.video-page .video-audience-grid article {
  text-align:center;
  min-width:0;
}
.video-page .video-step-grid article > span {
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  margin:0 auto 12px;
  border-radius:50%;
  background:#b9791d;
  color:#fff;
}
.video-page .video-audience-grid article > span {
  display:grid;
  place-items:center;
  width:92px;
  height:92px;
  margin:0 auto 13px;
  border-radius:50%;
  background:#d4a247;
  color:#fff;
  font:700 36px Georgia,serif;
}

/* EM BREVE + FAQ */
.video-page .video-coming__grid {
  display:grid !important;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr) !important;
  gap:60px;
  align-items:start;
}
.video-page .video-lead { display:grid; gap:8px; margin-top:20px; }
.video-page .video-lead input { width:100%; padding:13px; border:1px solid #decfb7; background:#fff; }
.video-page .video-faq { border-top:1px solid #d8c8ad; }
.video-page .video-faq details { border-bottom:1px solid #d8c8ad; }
.video-page .video-faq summary { cursor:pointer; padding:13px 30px 13px 0; font-size:12px; font-weight:700; }

/* MOBILE */
@media (max-width:900px) {
  .video-page .video-intro,
  .video-page .video-preview {
    flex-direction:column !important;
  }
  .video-page .video-intro__media,
  .video-page .video-intro__copy,
  .video-page .video-preview__media,
  .video-page .video-preview__copy {
    flex:0 0 auto !important;
    width:100% !important;
    max-width:100% !important;
  }
  .video-page .video-intro__media,
  .video-page .video-preview__media { min-height:330px; }
  .video-page .video-intro__copy,
  .video-page .video-preview__copy { padding:42px 28px !important; }

  .video-page .video-step-grid,
  .video-page .video-audience-grid {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .video-page .video-coming__grid { grid-template-columns:1fr !important; }
}

@media (max-width:560px) {
  .video-page .video-hero { min-height:540px; }
  .video-page .video-hero__content,
  .video-page .video-magic__content,
  .video-page .video-universe__content,
  .video-page .video-steps > .wrap,
  .video-page .video-audiences > .wrap,
  .video-page .video-coming > .wrap {
    width:calc(100% - 30px);
  }
  .video-page .video-step-grid,
  .video-page .video-audience-grid {
    grid-template-columns:1fr !important;
  }
}