@import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans:wght@400;700&display=swap" rel="stylesheet')
 
 body { font-family: 'Montserrat'; font-size: 18px; }
        .contenido-predicacion { max-width: 900px; margin: 40px auto; padding: 20px; }
        .centrarLogo { text-align: center; margin-bottom: 20px; }
        /* Ajuste para que el logo no se vea gigante */
        .logo img { max-width: 150px; display: inline-block;text-transform: none !important; }
        
        /* Contenedor del fondo */
.ocean { 
  height: 100%; /* Cubre el alto de la pantalla */
  width: 100%;
  position: fixed; /* Se queda quieto mientras haces scroll */
  bottom: 0;
  left: 0;
  background: #f0f4f8; /* Color de fondo del cielo/web */
  z-index: -1; /* Se va detrás de todo el contenido */
  overflow: hidden;
}

/* Definición de la ola */
.wave {
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/85486/wave.svg') repeat-x; 
  position: absolute;
  bottom: -5px;
  width: 6400px;
  height: 198px;
  animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;
  transform: translate3d(0, 0, 0);
  opacity: 0.6;
}

.wave:nth-of-type(2) {
  bottom: 0;
  animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) -.125s infinite, swell 7s ease -1.25s infinite;
  opacity: 1;
}

.wave:nth-of-type(3) {
  bottom: 10px;
  opacity: 0.3;
  animation: wave 10s infinite linear;
}

/* Animación de movimiento horizontal */
@keyframes wave {
  0% { margin-left: 0; }
  100% { margin-left: -1600px; }
}

/* Animación de balanceo vertical */
@keyframes swell {
  0%, 100% { transform: translate3d(0, -25px, 0); }
  50% { transform: translate3d(0, 5px, 0); }
}

/* Ajuste para móviles: Olas más bajas para no tapar texto */
@media (max-width: 768px) {
  .wave {
    height: 100px;
    background-size: 800px 100px;
  }
}

#wrapper, main {
    background: transparent !important;
}

/* Opcional: Dale un fondo blanco semi-transparente al contenido para que sea legible */
.contenido-predicacion {
    background: #9d9d9d85 !important; 
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    padding-bottom: 10% !important;
    font-family: 'Alegreya Sans' important;
}

h1, h1 {
    text-transform: none !important;
} 

.logo{
  float: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top:-32px !important;
    
}