/* video landing*/

body{margin:0;padding:0;background-image: url("images/bg-body.jpg");  font-family: "Playfair Display", sans-serif; background-position: top top; background-repeat: no-repeat;background-size: cover;}
header{width:100%;padding:0;margin:0 auto;}
h1{margin:0; padding:10px;text-align:center;font-size:30px!important; font-weight:500;}
p{margin:0; padding:10px;text-align:center;font-size:18px!important;margin:0 auto;}
.nav-in{width:100%; padding:10px;margin:0px auto 20px;height:auto;text-align:center;background:#024431;}
.nav-in img{width:80px;position:relative;margin:0 auto;}

.bg-web{width:100%;overflow:hidden;padding-bottom:20px;padding-top:10px;z-index:888888;position:relative;margin:0 auto;}
.bg-web .web-content{width:60%;margin:0 auto;margin-top:0px;}

.content-gracias{width:750px;margin:0 auto;text-align: center;}
footer{position:relative;bottom:0;width:auto;background-color:#000000;text-align:center;color:#ffffff;font-size:16px;margin-top:200px;box-shadow: 2px 0px 6px 4px rgba(0, 0, 0, 0.01);
}
/*
footer.form{position:auto;bottom:0;width:100%;height:100px;background-color:#ffffff;text-align:center;color:#000000;font-size:16px;margin-top:0px;box-shadow: 2px 0px 6px 4px rgba(0, 0, 0, 0.01);
}
*/
.logo-escuelapaz{text-align:center;}
.logo-escuelapaz img{width:250px;margin:0px auto 60px auto;padding:20px;text-align:center;}
.powered{position:relative;float:right;width:140px;margin-top:-10px;padding:0px 20px 10px;}
.powered img{float:right;width:140px;}

.div-logos{width:auto;margin:0 auto;text-align:left;padding:25px 10px;text-align:center;}
.div-logos p{margin:0; padding:10px;text-align:left;font-size:18px!important;margin:0 auto;}
.div-logos .footer-contact img{width:500px;margin-left:10px;}

/* Estilo base del footer */

/* Centrado horizontal de la lista */
ul.list-media {
  display: block; 
  justify-content: center;
  align-items: left;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0 auto;
}


ul.list-media li {
  margin: 10px 15px; 
}


ul.list-media img {
  width: 45px;
  height: auto;
}
.video-wrapper {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin-top:80px;
}

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



.video-container {
  position: relative;
  width: 100%;
  max-width: 800px;
  aspect-ratio: 16/9;
  margin: 10px auto;
  background: black;
  overflow: hidden;
  padding: 0px;
  box-sizing: border-box;
}

.video-container video {
  width: 100%;
  height: 100%;
  display: block;
  border: 2px solid #000;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
}

  /* Contenedor del vídeo */
    .video-container {
      position: relative;
      max-width: 800px;
      margin: 50px auto;
    }

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

    /* Play Overlay */
.play-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 10;
  visibility: visible; /* Se asegura que sea visible inicialmente */
}

.play-overlay.hidden {
  display: none; /* Desactiva completamente cuando no está en uso */
}


    .play-icon {
      width: 80px;
      height: 80px;
      background-color: rgba(255, 255, 255, 0.8);
      border-radius: 50%;
      position: relative;
    }

    .play-icon::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-35%, -50%);
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-bottom: 15px solid transparent;
      border-left: 25px solid #333;
    }

/* CTA Overlay base */
.cta-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: none;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 15;
}

/* Estilo específico para móviles */
.cta-overlay.mobile-overlay {
  position: fixed; /* Fijo para cubrir toda la pantalla */
  top: 0;
  left: 0;
  width: 100vw; /* Cubrir todo el ancho de la ventana */
  height: 100vh; /* Cubrir todo el alto de la ventana */
  z-index: 999999; /* Mayor prioridad */
  background-color: rgba(0, 0, 0, 0.8); /* Un poco más opaco para mobile */
}

/* Ajustes en botones para mobile */
.cta-overlay.mobile-overlay .cta-button {
  font-size: 16px;
  padding: 12px 18px;
}

.cta-overlay.mobile-overlay .close-cta {
  top: 15px;
  right: 15px;
  font-size: 18px;
}


    .cta-button {
      background-color: #4C725C;
      color: white;
      border: none;
      padding: 20px 30px;
      font-size: 24px;
      border-radius: 10px;
      cursor: pointer;
    }

    .close-cta {
      position: absolute;
      top: 20px;
      right: 20px;
      font-size: 24px;
      color: white;
      background: none;
      border: none;
      cursor: pointer;
    }
@media (max-width: 768px){
  body{margin:0;padding:0;background-image: url("images/bg2.jpg");background-position: top; background-repeat: no-repeat;background-size: cover;}
  .bg-web{padding-bottom:10px;}
    .text-titulo{left:-6px!important;}
    .imagen-logo{right:15px!important;}
    .juntaPie{display:none;}
    footer{position:relative;bottom:0;margin-top:150px!important;padding:20px 10px;height:auto;width:100%;}
  .footer-left{display:none;}
  .footer-center,
  .footer-legal{float:none;width:100%;margin:0;text-align:center;padding:10px;}
  .powered{float:none!important;padding:10px;margin:0 auto!important;}
  .logo-escuelapaz{margin-bottom:70px;}
  .logo-escuelapaz img{width:140px!important;margin:0px;}
  header{width:100%;}
    .video-container {
    margin: 20px auto;
    padding: 0px;
    width:96%;
  }
p{font-size:30px;}
  .cta-button {
    font-size: 18px;
    padding: 15px 20px;
}

.web-content{width:100%;margin:0 auto;}
.content-gracias{width:90%;}

ul.list-media img {
  width: 30px;
  height: auto;
  }

  .close-cta {
    top: 10px;
    right: 10px;
    font-size: 20px;
  }
  .nav-in{width:100%; text-align:center;padding:10px;}
  .nav-in img{width:80px;position:relative;float:none;right:auto;margin:0 auto;text-align:center;}
 /* footer.form{position:fixed!important;bottom:0!important;}*/
}

@media (min-width: 1600px) {
  .video-container {
    max-width: 1200
}
}
@media (max-width: 902px){
	body{margin:0;padding:0;background-image: url("images/bg2.jpg");background-position: top; background-repeat: no-repeat;background-size: cover;}
	p{font-size:24px;}
 .div-logos p.footer-contact img{width:100%!important;}
 .div-logos, .div-logos p{text-align:center!important;}
.bg-web .web-content{width:90%;margin:0 auto;margin-top:0px;}
footer{margin-top:150px;}
}