/* Estilo general */
@font-face {
  font-family: 'Rolie Twily';
  src: url(Rolie%20Twily.otf) format('truetype');
}
@font-face {
  font-family: 'Bestime';
  src: url(Bestime.otf) format('truetype');
}
@font-face {
  font-family: 'Mominacute-Regular';
  src: url(Mominacute-Regular.ttf) format('truetype');
}
@font-face {
  font-family: 'Sweety 20Milkys';
  src: 
  url(Sweety%20Milkys.otf) format('truetype');
}


* {
  margin: 0;
  padding: 0;
}
.H{
	font-family: Bestime ;
	color: #FFF;
	}
h1 {
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  font-size: 54px;
  background-color: #6FC644;
  color: #fff;
  padding-top: 10px;
}

.cont-fond {
  background-color: rgba(0, 0, 0, .6);
  width: 100%;
}

/* Menú de navegación */
nav {
  max-width: 100%;
  margin: auto;
  background-color: #ffffff;
  font-size: 20px;
  
}

.menu-horizontal {
  list-style: none;
  display: flex;
  justify-content: space-around;
   font-family: 'Bestime'; 
}

.menu-horizontal > li > a {
  display: block;
  padding: 15px 76px;
  color: #d32f2f;
  text-decoration: none;
  font-family:  font-family: 'Bestime'; 
}

.menu-horizontal > li a:hover {
  background-color: #A3E769;
  color: #fff;
  font-family: 'Bestime'; 
}

.menu-vertical {
  position: absolute;
  display: none;
  list-style: none;
  width: 260px;
  background-color: #F0F0F0;
    font-family: 'Bestime'; 
}

.menu-horizontal li:hover .menu-vertical {
  display: block;
    font-family: 'Bestime'; 
}

.menu-vertical li a {
  display: block;
  color: #d32f2f;
  padding: 15px 15px 15px 20px;
  text-decoration: none;
    font-family: 'Bestime'; 
}

.menu-vertical li a:hover {
  background-color: #A3E769;
  color: #fff;
}

/* Contenedor del video */
.contenedor-video {
  text-align: center;
  padding: 20px;
  background-color: #6FC644;
}

.contenedor-video h1 {
  margin-bottom: 20px;
  color: #333;
}

.video-fondo {
  width: 80%;
  max-width: 800px;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}




/* Sección con las olas */
section {
  position: relative;
  width: 100%;
  height: 150px;
  background: transparent;
  overflow: hidden;
}

section .air {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background: url(https://1.bp.blogspot.com/-xQUc-TovqDk/XdxogmMqIRI/AAAAAAAACvI/AizpnE509UMGBcTiLJ58BC6iViPYGYQfQCLcBGAsYHQ/s1600/wave.png);
  background-repeat: repeat-x;
  background-size: 100% 100px; /* AJUSTE PARA TODA LA PANTALLA */
}

.air1 {
  animation: wave 30s linear infinite;
  z-index: 1000;
  opacity: 1;
  animation-delay: 0s;
  bottom: 0;
}

.air2 {
  animation: wave2 15s linear infinite;
  z-index: 999;
  opacity: 0.5;
  animation-delay: -5s;
  bottom: 10px;
}

.air3 {
  animation: wave 30s linear infinite;
  z-index: 998;
  opacity: 0.2;
  animation-delay: -2s;
  bottom: 15px;
}

.air4 {
  animation: wave2 5s linear infinite;
  z-index: 997;
  opacity: 0.7;
  animation-delay: -5s;
  bottom: 20px;
}

@keyframes wave {
  0% {
    background-position-x: 0px;
  }
  100% {
    background-position-x: 1000px;
  }
}

@keyframes wave2 {
  0% {
    background-position-x: 0px;
  }
  100% {
    background-position-x: -1000px;
  }
}


.n{
	text-align:center;
	font-family:"Soopafresh";
	font-size:45px;
	color:#FFF;
}

.ib{
	background-color:#A3E769;
	border-radius:50px;
	width:450px;
	float:left;
}
.f{
	background-color:#830604;
}
.info {
    background-color: #A3E769;
    border-radius: 50px;
    float: right;
    font-family: "Arial Black";
    font-size: 18px;
    width: 680px;
    height: 550px;
    text-align: justify;
    color: #FFF;
    padding: 30px; /* Agrega espacio interno */
    box-sizing: border-box; /* Para que el padding no afecte el tamaño total */
}
.img{
	width:250px;
	height:250px;
}
.dis{
	width:350px;
	height:300px;
}
.ld{
	font-family:"Arial";
	font-size:16px;
	color:#FFF;
}
.disc{
	text-align:center;
	font-family:"Soopafresh";
	font-size:45px;
	color:#FFF;
}



.contenedor-video {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
  padding: 40px;
  background-color: #6FC644; /* o el color que estás usando */
  border-radius: 0px;
  text-align: center;
}

.ib, .info {
  background-color: #9BE66F; /* un tono que combina */
  padding: 30px;
  border-radius: 30px;
  max-width: 500px;
  box-sizing: border-box;
}

.info p {
  text-align: justify;
  color: white;
  font-weight: bold;
  line-height: 1.6;
}


.VALE{
	background-color:#A3E769;
	border-radius:50px;
	width:90%;
	float:left;
}


.C {
    background-color: #A3E769;
    border-radius: 50px;
    float: right;
    font-family: "Arial Black";
    font-size: 18px;
    width: 40%;
    height: 450px;
    text-align: justify;
    color: #FFF;
    padding: 30px; /* Agrega espacio interno */
    box-sizing: border-box; /* Para que el padding no afecte el tamaño total */
}