/* =========================================================
   VIDEO FIRST · SEGURMEDI
   ========================================================= */

/* RESET SUAVE */
.video-first * {
  box-sizing: border-box;
}

/* CONTENEDOR PRINCIPAL */
.video-first {
  background: #f5f7fa;
  padding: 40px 0 60px;
}

/* =============================
   HEADER DEL VÍDEO
   ============================= */
.video-header h1 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  color: #003057;
  margin-bottom: 12px;
}

.video-header p {
  max-width: 760px;
  margin: 0 auto;
  font-size: 1.05rem;
  color: #555;
}

/* =============================
   VÍDEO PROTAGONISTA
   ============================= */
.video-wrapper {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  background: #000;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 45px rgba(0,0,0,.25);
}

.video-wrapper video {
  width: 100%;
  height: auto;
  display: block;
}

/* =============================
   CTA PRINCIPAL
   ============================= */
.video-first .btn-success {
  background-color: #25d366;
  border: none;
  font-size: 1.1rem;
  font-weight: 600;
  padding: 14px 28px;
  border-radius: 40px;
  box-shadow: 0 12px 28px rgba(37,211,102,.35);
}

.video-first .btn-success:hover {
  background-color: #1ebe5d;
  transform: translateY(-1px);
}

/* CTA SECUNDARIA (PRODUCTO) */
.video-first .btn-outline-primary {
  border-radius: 40px;
  padding: 10px 22px;
  font-weight: 500;
}

/* =============================
   CONTENIDO ADICIONAL
   ============================= */
.video-content {
  max-width: 820px;
  margin: 0 auto;
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
}

/* =============================
   RELACIONADOS
   ============================= */
.video-related {
  max-width: 820px;
  margin: 0 auto;
}

.video-related h3 {
  font-size: 1.2rem;
  font-weight: 600;
  color: #003057;
}

.video-related ul {
  padding-left: 18px;
}

.video-related li {
  margin-bottom: 6px;
}

.video-related a {
  color: #005b87;
  text-decoration: none;
}

.video-related a:hover {
  text-decoration: underline;
}

/* =============================
   RESPONSIVE
   ============================= */
@media (max-width: 768px) {

  .video-first {
    padding: 25px 0 40px;
  }

  .video-header h1 {
    font-size: 1.5rem;
  }

  .video-wrapper {
    border-radius: 10px;
  }

  .video-first .btn-success {
    width: 100%;
    font-size: 1.05rem;
  }

}
/* ===============================
   VIDEO FIRST – CONTENEDOR
================================ */

.video-wrapper {
  width: 100%;
  max-width: 960px;        /* opcional, para no hacerlo gigante */
  margin: 0 auto;
  aspect-ratio: 16 / 9;    /* 🔑 MISMA PROPORCIÓN QUE EL VÍDEO */
  background: #000;        /* evita parpadeos */
  border-radius: 12px;
  overflow: hidden;
}

/* El vídeo ocupa TODO el contenedor */
.video-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover;       /* 🔑 clave para que poster y vídeo coincidan */
  display: block;
}