body,
 html {
     height: 100%;
     margin: 0;
     @import url('https://fonts.googleapis.com/css2?family=Carattere&family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Dancing+Script:wght@700&family=Satisfy&family=Signika:wght@300..700&display=swap');
     /* font-family: 'Arial', sans-serif; */
     color: white;
     text-align: center;
 }

 .bg-video {
     position: fixed;
     top: 0;
     left: 0;
     min-width: 100%;
     min-height: 100%;
     z-index: -1;
     object-fit: cover;
 }

 .overlay {
     position: relative;
     height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     /* background: rgba(0, 0, 0, 0.8); */
     padding: 20px;
 }

 .frase-motivacional {
     font-size: 1.9em;
     /* Tamaño de fuente para la frase principal (ajustable) */
     font-style: italic;
     /* Estilo cursiva para la frase */
     color: #333;
     /* Color de texto */
     border-left: 10px solid #007bff;
     /* Borde decorativo a la izquierda */
     padding: 15px;
     padding-top: 20px;
     margin: 10px 0;
     background-color: #f9f9f9;
     border-radius: 10px;
     opacity: 0.8;

 }

 .frase-motivacional p {
     margin: 0 0 10px 0;
     /* Elimina el margen inferior del párrafo para acercarlo al autor */
 }

 .frase-motivacional header {
     text-align: left;
     min-height: 80px;
     line-height: 18px;
 }

 .frase-motivacional header span {
     font-size: 0.6em;
     /* Hace la letra del autor más pequeña que la del elemento padre (la frase) */
     color: #201f1f;
     /* Un color más tenue para el autor */
 }

 header span .nombre {
     font-weight: bolder;
 }

 .frase-motivacional footer {
     text-align: right;
     /* Alinea el autor a la derecha */
     margin-top: 10px;
 }

 .frase-motivacional cite {
     font-size: 0.6em;
     /* Hace la letra del autor más pequeña que la del elemento padre (la frase) */
     font-style: normal;
     /* Elimina la cursiva solo para el nombre del autor */
     color: #5d5f61;
     /* Un color más tenue para el autor */
     letter-spacing: 1px;
 }




 /* Estilos base */
.frase-motivacional {
  max-width: 90%;
  margin: 20px auto;
  padding: 20px;
  border-left: 5px solid #ffffff;
  /* background: rgba(0,0,0,0.05); */
  border-radius: 8px;
  text-align: center;
  font-family: 'Arial', sans-serif;
}

.frase-motivacional header {
  margin-bottom: 15px;
}

.frase-motivacional header .saludo,
.frase-motivacional header .nombre,
.frase-motivacional header .saludo-complemento {
  display: inline-block;  
  color: #4b4b4b;
}

.frase-motivacional header .nombre{
    font-weight: bold;
}

.frase-motivacional .frase {
  font-size: 1.5rem;
  font-style: italic;
  margin: 15px 0;
  color: #333;
}

.frase-motivacional footer {
  margin-top: 15px;
  font-size: 0.9rem;
  color: #555;
}

.frase-motivacional footer cite {
  font-style: normal;
  font-weight: bold;
  margin-right: 10px;
}

/* Pantallas pequeñas (teléfonos en vertical) */
@media screen and (max-width: 575px) {
  .frase-motivacional header span {
    font-size: 0.8rem;
  }
  .frase-motivacional .frase {
    font-size: 1.2rem;
  }
  .frase-motivacional footer {
    font-size: 0.8rem;
  }
}

/* Teléfonos grandes y tablets pequeñas */
@media screen and (min-width: 576px) and (max-width: 767px) {
  .frase-motivacional header span {
    font-size: 0.8rem;
  }
  .frase-motivacional .frase {
    font-size: 1.4rem;
  }
  .frase-motivacional footer {
    font-size: 0.8rem;
  }
}

/* Tablets en vertical y horizontal */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .frase-motivacional header span {
    font-size: 1rem;
  }
  .frase-motivacional .frase {
    font-size: 1.6rem;
  }
  .frase-motivacional footer {
    font-size: 1rem;
  }
}

/* Laptops pequeñas y pantallas medianas */
@media screen and (min-width: 992px) and (max-width: 1199px) {
  .frase-motivacional header span {
    font-size: 1rem;
  }
  .frase-motivacional .frase {
    font-size: 1.7rem;
  }
  .frase-motivacional footer {
    font-size: 1rem;
  }
}

/* Laptops grandes y monitores medianos */
@media screen and (min-width: 1200px) and (max-width: 1399px) {
  .frase-motivacional header span {
    font-size: 1.2rem;
  }
  .frase-motivacional .frase {
    font-size: 1.8rem;
  }
  .frase-motivacional footer {
    font-size: 1.2rem;
  }
}

/* Monitores extra grandes */
@media screen and (min-width: 1400px) {
  .frase-motivacional header span {
    font-size: 1.3rem;
  }
  .frase-motivacional .frase {
    font-size: 2rem;
  }
  .frase-motivacional footer {
    font-size: 1.3rem;
  }
}