body {
   font-family: 'Segoe UI', sans-serif;
   background-color: #041b47;
   color: #ffffff;
   padding-top: 20px;
   /* ajusta según la altura de tu navbar */
 }

 header {
   background-color: #000000;
   padding: 50px 20px 30px;
   text-align: center;
   border-bottom: 2px solid #eee;
 }


 .row {
   margin-top: 30px;
 }

 .card {
   background: rgba(255, 255, 255, 0.08);
   border: 1px solid rgba(255, 255, 255, 0.15);
   border-radius: 1rem;
   transition: transform 0.2s ease, box-shadow 0.2s ease;
 }

 .card:hover {
   transform: translateY(-4px);
   box-shadow: 0 6px 20px rgba(255, 255, 255, 0.15);
 }

 video {
   border-radius: .7rem;
   object-fit: cover;
   width: 100%;
   height: 420px;
 }

 p {
   color: #e2e8f0;
   font-size: 0.95rem;
   line-height: 1.5;
 }

 strong {
   color: #ffffff;
 }

 .btn-primary {
   background: linear-gradient(90deg, #9333ea, #3b82f6);
   border: none;
   font-weight: 600;
   letter-spacing: 0.5px;
   transition: opacity 0.2s ease;
 }

 .btn-primary:hover {
   opacity: 0.85;
 }

 h4 {
   color: #fff;
   font-weight: 600;
   text-align: center;
   margin-top: 10px;
 }

 header h1 {
   font-size: 3rem;
   color: #fff6f6;
   margin-bottom: 15px;
 }

 header p {
   font-size: 1.2rem;
   color: #555;
   max-width: 700px;
   margin: 0 auto;
 }

 .catalogo-header {
   text-align: center;
   margin: 50px 0 30px;
 }

 .video-card {
   background-color: #fff;
   border-radius: 16px;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
   overflow: hidden;
   transition: transform 0.3s;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;

 }

 .video-card:hover {
   transform: translateY(-5px);
 }

 .video-wrapper {
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: #ddd;
   padding: 15px;
 }

 video {
   max-height: 400px;
   max-width: 100%;
   border-radius: 12px;
 }

 .video-content {
   padding: 20px;
 }

 .video-title {
   font-size: 1.3rem;
   font-weight: bold;
   margin-bottom: 8px;
 }

 .video-price {
   font-size: 1rem;
   color: #2c7be5;
   font-weight: 600;
   margin-bottom: 8px;
 }

 .video-description {
   font-size: 0.95rem;
   color: #555;
 }

 html {
   scroll-behavior: smooth;
 }

 /* Estilo del botón flotante */
 .whatsapp-float {
   position: fixed;
   width: 60px;
   height: 60px;
   bottom: 20px;
   right: 20px;
   z-index: 1000;
   background-color: #25D366;
   border-radius: 50%;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
   display: flex;
   justify-content: center;
   align-items: center;
   transition: transform 0.3s ease;
 }

 .whatsapp-float:hover {
   transform: scale(1.1);
 }

 /* Ícono dentro del botón */
 .whatsapp-icon {
   width: 28px;
   height: 28px;
   filter: brightness(0) invert(1);
   /* ícono blanco */
 }

 .boton-wasap {
   display: inline-block;
   width: 100%;
   background: linear-gradient(135deg, #25D366, #128C7E);
   color: #fff;
   font-weight: 600;
   font-size: 1.1rem;
   text-align: center;
   padding: 4px 20px;
   border: none;
   border-radius: 12px;
   text-decoration: none;
   transition: all 0.3s ease;
   box-shadow: 0 4px 10px rgba(37, 211, 102, 0.3);
 }

 .boton-wasap:hover {
   background: linear-gradient(135deg, #20ba5a, #0e6f60);
   transform: translateY(-2px);
   box-shadow: 0 6px 14px rgba(37, 211, 102, 0.45);
 }