@charset "UTF-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

body {margin:0; background:linear-gradient(85deg, rgba(80,140,250,1.00) 0%, rgba(0,80,125,1.00) 65%); }
h1{color:rgba(255,255,255,1.00); font-family:"Montserrat", serif; font-size:3.8em; font-weight:800; margin-bottom:10px; text-align: left; line-height:90%;}
h1.slogan{font-family: 'Montserrat', serif; color:rgba(80,140,250,1.00); font-weight:800; font-size:4.5em; text-align:center;line-height: 90%;}
h2{color:rgba(255,255,255,1.00); font-family: "Montserrat", serif; font-size:1.8em; font-weight:200; line-height:100%; margin:10px 0px; text-align:left;}
h2.quote{color:#FFF; font-family: "Montserrat", serif; font-size:3.8em; font-weight:800; line-height:100%; text-align: left; text-shadow:none;}
h3{color:rgba(255,255,255,1.00); font-family: "Montserrat", serif; font-size:1.3em; font-weight:bolder; line-height:135%; margin:35px 0px 10px; text-transform:uppercase; background:rgb(45,52,62); padding:5px 25px 5px 10px; width:fit-content; border-left:rgb(80,140,250) solid 15px;}

p{color:rgba(255,255,255,1.00); font-family: "Montserrat", serif; font-size:1.2em; font-weight:300; line-height:150%;}
p.medium{color:#444; font-family: "Montserrat", serif; font-size:1.4em; font-weight:600; line-height:150%;}
/*p{color:#FFF; font-family: "Montserrat", serif; font-size:1.1em; font-weight:300; line-height:135%; text-shadow:#000 1px 1px 1px;}*/
p.quote{color:#FFF; font-family:'Montserrat', serif; font-size:1.5em; font-weight:600; line-height:135%; text-shadow:none; text-align: justify;}
p.home{color:#FFF; font-family: "Montserrat", serif; font-size:1.0em; font-weight:300; line-height:135%; text-shadow:none; text-align: justify;}
p.curso{color:#444; font-family: "Montserrat", serif; font-size:1.2em; font-weight:300; line-height:135%; }
p.footermenutitle{color:rgb(0,160,255); font-family: "Montserrat", serif; font-size:1.0em; text-shadow:none; font-weight:600; text-transform:uppercase;}

b{font-weight: 800;}

a:link, a:active, a:visited{color:rgba(255,255,255,1.00); font-family: "Montserrat", serif; font-weight:300; text-decoration:none; border-bottom:dotted 1px; background:none; border-radius: 0px;}
a:hover{background:rgba(80,140,250,1.00);}

a.footer:link, a.footer:active, a.footer:visited{color:#FFF; font-family: "Montserrat", serif; font-weight:300; text-shadow:none; text-decoration:none; border:none; font-size:0.9em;}
a.footer:hover{background:rgba(80,140,250,1.00);}

ul, li{color:rgba(255,255,255,1.00); font-family: "Montserrat", serif; font-size:1.0em; font-weight:300; line-height:150%;}
ul.hosting, li.hosting{color:#FFF;}
ol, li{color:rgba(255,255,255); font-family: "Montserrat", serif; font-size:1.0em; font-weight:300; line-height:135%; margin:5px;}

legend{color:rgb(255,255,255); font-family: "Montserrat", serif; font-size:1.6em; font-weight:800; line-height:135%; }

input, textarea{background:linear-gradient(65deg, rgba(80,140,250,1.00), rgba(125,0,150,1.00)); border: none; color:rgba(255,255,255,1.00); font-family: "Montserrat", serif; font-size:1.2em; font-weight:300; line-height:110%; text-align:left; padding:10px; border-radius: 15px;;}

input.boton{background:rgba(255,155,0,1.00); border:none; border-radius:10px; color:#FFF; font-family: "Montserrat", serif; font-size:1.5em; font-weight:400; line-height:100%; text-align:center; padding:10px 25px; margin:10px auto; width:100%; max-width:320px;}
input.boton:hover{background:rgba(45,52,62,1.00); color: rgba(101,183,229,1.00);}

input.botonyellow{background:rgba(0,160,255,1.00); border:outset; border-radius:3px; color:#FFF; font-family: "Montserrat", serif; font-size:1.0em; font-weight:400; line-height:135%; text-align:left; padding:5px 10px; margin:10px 5px; width:auto; text-transform:uppercase;}

/* TABLAS */
table{overflow-x:auto; width:100%; max-width:980px;}
table thead th{font-family:'Montserrat', serif; font-size:1.20em; font-weight:500; color:#FFF; background:rgba(0,160,255,1.00); border:none; padding:5px 15px; text-align:center; border-radius:5px;}
table tr td{font-family:'Montserrat', serif; font-size:1.00em; font-weight:300; color:rgba(255,255,255,1.00); border:none; vertical-align:top; padding:10px; text-align:center; border-radius:5px; }
table tfoot td{font-family:'Montserrat', serif; background:rgba(0,0,0,1.00); border:none; color:#FFF; font-weight:300; font-size:1em; padding:5px; }
tr:nth-child(even) {background:rgba(34,34,34,0.10);}
tr:nth-child(odd) {background:rgba(0,34,34,0.05);}

/* ID */
#whatsapp{display:none;}

/* CLASSES */
.producto{background:rgba(255,155,0,1.00); color:#FFF; font-family: "Montserrat", serif; font-size:1.0em; font-weight:800; line-height:100%; text-align:center; float:left; transition:0.8s; width:100%; max-width:175px; margin:10px; padding:10px; box-shadow: rgba(0,0,0,0.30) 2px 2px 5px; border-radius: 10px;}
.producto:hover{background:rgba(45,52,62,1.00); color: rgba(101,183,229,1.00); transition:0.8s; box-shadow: rgba(0,0,0,0.50) 2px 2px 8px;}

.planes-mkt-politico {width:90%; max-width:220px; float:left; margin:10px 2%; background:rgba(255,255,255,0.2px); border:rgba(80,140,250,1.8) solid 3px; border-radius:24px; background:rgba(45,52,62,0.50); padding:10px 3%; font-size:0.8em; min-height:600px;}

.video_thumb{background:url(academy/cursos/img/video_thumb.png); background-size:300px; float:left; font-family:'Montserrat', serif; font-size:0.95em; font-weight:300; margin:5px; border:rgb(255,255,255) solid 3px; width:165px; height:110px; padding:40px 20px 20px 115px; text-align: center;}
.video_thumb:hover{background:url(academy/cursos/img/video_thumb_hover.png); background-size:300px;}
.cursobox{background:rgba(0,0,0,0.65); border:#FFF solid 2px; border-radius:10px; color:#FFF; font-family: "Montserrat", serif; text-align:left; text-shadow:#000 2px 2px 2px; padding:5px 2%; width:95%; max-width:480px; margin:10px 10px 10px 0px; float:left;}
.img_box{background:#a79a0c url(img/box_bkgd.jpg) 50% 50%; background-size:cover; /*width:94%; max-width:270px;*/ width:200px; height:200px; margin:10px 3%; border:#FFF solid 2px; border-radius:50%; float:right; text-align:center;}
.img_inside{heigth:100%; max-width:300px; max-height:250px;}

.services-img-left{background-size:cover; float:left; border-radius:25px; width:50%;}
.services-txt-left{background:linear-gradient(135deg, rgba(255,0,150,1.00), rgba(255,155,0,1.00)); color:rgba(255,255,255,1.00); font-family:"Montserrat", serif; font-size:1.4em; font-weight:500; line-height:120%; text-align:center; border-radius:25px; float:right; width:50%; padding:5%;}

.services-img-right{background-size:cover; float:right; border-radius:25px; width:50%;}
.services-txt-right{background:linear-gradient(135deg, rgba(255,0,150,1.00), rgba(255,155,0,1.00)); color:rgba(255,255,255,1.00); font-family:"Montserrat", serif; font-size:1.4em; font-weight:500; line-height:120%; text-align:center; border-radius:25px; float:left; width:50%; padding:5%;}

/* MENÚ RESPONSIVO */
ul.topnav li {float:left; font-family: "Montserrat", serif; font-weight:800;}
ul.topnav li.icon {display: none;}
ul.topnav li a {display:inline-block; color:#FFF; text-align: center; padding:12px 16px; text-decoration:none; transition:0.8s; font-size: 1em; border:none; border-radius:0px;}
ul.topnav li a:hover {color:rgba(80,140,250,1.00); background:rgba(45,52,62,1.00); }

/* MENÚ DESPLEGABLE */
ul.menu{ padding:25px 20px 0px; list-style: none; }
ul li.menu{display:inline-block; margin:0px; position:relative; font-family: 'Montserrat', sans-serif; font-weight:300; font-size:1.0em; text-align:left; }
ul li.menu a{display:block; text-decoration:none; margin:0px; padding:12px 25px; transition: all 0.5s ease-in 0s; color:rgba(255,255,255,1.00); border:none; }
ul li.menu a:hover{color:rgba(255,255,255,1.00); background:rgba(80,140,250,1.00);}

ul li.menu ul.dropdown{width:max-content; /*Set width of the dropdown*/ margin:0px; padding:0px; display:none; position:absolute; z-index:999; left:0; text-align:left; color:rgba(255,255,255,1.00); background:rgb(80,140,250); transition:0.8s; }
ul li.menu:hover ul.dropdown{display: block; /* Display the dropdown */ border:rgba(100,100,100,0.35);}
ul li.menu ul.dropdown li{display: block; color:rgba(255,255,255,1.00); font-size: 1.0em; padding:0px; margin:0px; transition:0.8s; }
ul li.menu ul.dropdown li a {padding:10px 20px; text-align:left; background:none;} 
ul li.menu ul.dropdown li a:hover{display: block; color:rgba(255,255,255,1.00); background:rgba(45,52,62,1.00); }

ul.list li.list{font-family: 'Montserrat', sans-serif; }
ol.list li.list{font-family: 'Montserrat', sans-serif; list-style:inside; list-style-type:square; display:inherit;}

/* HEADER CHANGING */
header{width:100%; position:fixed; z-index:10; transition:0.8s; }
header.large{height:90px; background:linear-gradient(0deg, rgba(45,52,62,0.00), rgba(45,52,62,1.00)); transition:1.8s; }
header.large img{height:70px; transition:1.8s;}
header.large h2.logo{color:#FFF; font-family: "Montserrat", serif; font-size:1.4em; font-weight:lighter; margin:28px 8px 0px; transition:1.8s; }  
header.large #logo_box{display:block; float:left; margin:10px 50px 0px 20px;}
header.large ul.topnav{list-style-type:none; padding:5px; margin-top:15px; overflow:hidden; z-index:1000; float:right; }
header.large ul.menu{ padding:25px 20px 0px; list-style: none; transition:1.8s; }

header.small{height:60px; background:linear-gradient(78deg, rgba(101,183,229,1.00) 0%, rgba(80,140,250,1.00) 25%, rgba(0,80,125,1.00) 100%); transition:1.8s; box-shadow: rgba(0,0,0,0.78) 0px 0px 10px; }
header.small img{height:50px; margin-top:-18px; transition:1.8s;}
header.small h2.logo{color:#FFF; font-family: "Montserrat", serif; font-size:1.2em; font-weight:lighter; margin:0px; transition:1.8s;}
header.small #logo_box{display:block; float:left; margin:5px 10px 0px 0px;}
header.small ul.topnav{list-style-type:none; padding:5px; margin-top:2px; overflow:hidden; z-index:1000; float: right;}
header.small ul.menu{ padding:10px 0px; list-style: none; transition:1.8s; }

#responsive{ display:none; }
#scrolldown-menu{ display:block; width: 100%; margin-top:-16px; }

#logo_img{float:left; margin:0px 15px;}
#logo_txt{float:left;}
#box_video{left:0%; margin-left:0px; width:100%; position:fixed; top:0; height:100%; overflow:hidden; z-index:-100; background:rgba(19,47,63,0.25);}
#box_text{top:0; z-index:-99; padding:15%; width:70%; height:70%;}
#scrolldown{background:url('img/click.png') 50% 50% no-repeat; background-size:40px; height:40px; width:40px; padding:15px; margin:5px; border-radius:50%; border:#FFF solid 3px; margin-top:50px; opacity:0.5; filter: alpha(opacity=50); display:block; }
#scrolldown:hover{background:rgba(255,155,0,1.00) url('img/click.png') 50% 50% no-repeat; background-size:40px; height:50px; width:50px; padding:20px; margin:5px; border-radius:50%; border:#FFF solid 5px; margin-top:40px; opacity:0.8; filter: alpha(opacity=80); display:block; transition:0.8s;}

#contenido{width:90%; max-width: 980px; min-height:800px; padding:100px 5%; margin:auto; }
#menu-servicios{width:90%; max-width: 1032px; padding:15px 5%; margin:30px 0px; background:rgba(0,0,0,0.0); border-radius:5px;}

#nosotros{width:70%; min-height:800px; padding:70px 15%; /*background:url(img/contacto.jpg) 50% 50% fixed; background-size:cover;*/ text-align:justify; }
#nosotros-txt{background:linear-gradient(135deg, rgba(80,140,250,1.00), rgba(125,0,150,1.00)); padding: 20px 50px; width: 90%; max-width: 720px; margin: 50px auto;}

#servicios{width:70%; min-height:800px; padding:70px 15%; background:url(img/servicios.jpg) 50% 50% fixed; background-size:cover; text-align:center;}
#servicios-txt{background:linear-gradient(135deg, rgba(255,0,150,1.00), rgba(255,155,0,1.00)); padding: 20px 50px; width: 90%; max-width: 720px; margin: 50px auto;}

#proyectos{width:70%; min-height:800px; padding:70px 15%; background:url(img/proyectos.jpg) 50% 50% fixed; background-size:cover; text-align:center;}
#proyectos-txt{background:linear-gradient(135deg, rgba(125,0,150,1.00), rgba(255,0,150,1.00)); padding: 20px 50px; width: 90%; max-width: 720px; margin: 50px auto;}

#contacto{width:70%; min-height:800px; padding:70px 15%; /*background:url(img/contacto.jpg) 50% 50% fixed; background-size:cover;*/ text-align:center;}
#contacto-txt{background:linear-gradient(-45deg, rgba(80,140,250,1.00), rgba(125,0,150,1.00));  padding: 20px 50px; width: 90%; max-width: 720px; margin: 50px auto;}

#academy{width:70%; min-height:450px; padding:100px 15%; background:rgb(255,255,255); text-align:justify;}
/*#academy{width:70%; min-height:450px; padding:70px 15%; background:url(https://byt.mx/img/academy.jpg) 50% 50% fixed; background-size:cover; text-align:justify;}*/
#blog{width:85%; min-height:450px; padding:70px 7.5%; background:#FFF; text-align:justify;}
#footer{width:95%; padding:35px 2.5% 50px; background:rgba(45,52,62,1.00); text-align:left;}
#mapa{display:block;}
#whatsapp{display:none;}
#intro_web{display:block; margin-top: 10px;}
#intro_movil{display:none;}
#instructor{margin:20px 0px 25px 25px; border-radius:50%; border:rgba(255,255,255,1.00) solid 2px; width:100%; max-width:180px;}


@media screen and (max-width:1090px) {
  ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li{display: none;}
  ul.topnav li.icon {float:right; display: inline-block;}
  
  header.large{height:70px;}
  header.large img{height:50px; width:50px; transition:0.8s;}
  header.large h2.logo{font-size:0.8em; margin:18px 0px 0px 0px;}
  header.large #logo_box{display:block; float:left; margin:15px 20px 0px 10px;}
  
  header.small{height:60px;}
  header.small img{height:40px; width:40px; margin-top:-10px; transition:0.8s;}
  header.small h2.logo{font-size:0.7em; margin:4px 0px 0px 0px; transition:0.8s;}
  header.small #logo_box{display:block; float:left; margin:25px 20px 0px 10px;}
      
  #box_text{width:90%; height:100%; padding:135px 5% 10px; background:url(img/bkgd_movil.jpg) 50% 0%; text-align:center;}
	/*
  #nosotros{width:90%; height:100%; padding:60px 5% 10px; background:#444; text-align:center;}
  #servicios{width:90%; height:100%; padding:60px 5% 10px; background:#444; text-align:center;}
  #proyectos{width:90%; min-height:300px; padding:60px 5% 10px; background:#FFF; text-align:center;}
  #contacto{width:90%; height:100%; padding:60px 5% 10px; background:#444; text-align:left;}
  #academy{width:90%; padding:60px 5% 10px; background:rgb(255,255,255); text-align:justify;}
  #blog{width:90%; padding:65px 5% 10px; background:#FFF; text-align:justify;}
  #footer{width:90%; padding:10px 5%; background:rgb(0,0,0); text-align:left;}*/
  #mapa{display:none}
  
  .img_box{float:none;}

}

@media screen and (max-width:760px) {
	h1.slogan{font-family:'Montserrat', serif; color:#FFF; font-weight:800; font-size:3.2em; text-align:center; line-height:90%;}
	h2.quote{font-size:2.3em; font-weight:800;}
	p.quote{font-size:1.2em; text-align: left;}
	
	#responsive{ display:block; }
	#scrolldown-menu{ display:none; }
	
	#box_video{display:none;}
	#whatsapp{display:block; padding:15px 4px 12px 42px; color:rgb(255,255,255); background:url(images/whatsapp.png) 50% 50%; height:28px; width:80px; font-family: "Montserrat", serif; font-weight:300;}
	#whatsapp:hover{opacity:0.8; transition:0.8;}
	#intro_web{display:none;}
	#intro_movil{display:block;}
	
	#menu-servicios{width:98%; max-width:760px; padding:10px 1%; margin:10px 0px;}
	
	#nosotros{width:90%; padding:10px 5%; height: auto;  background:linear-gradient(65deg, rgba(125,0,150,1.00), rgba(45,52,62,1.00)); text-align:center;}
	#nosotros-txt{padding:15px 5%; width: 90%; max-width: 720px; margin:20px auto;}
	
	#servicios{width:90%; padding:10px 5%; height: auto; background:linear-gradient(65deg, rgba(125,0,150,1.00), rgba(45,52,62,1.00)); text-align:center;}
	#servicios-txt{padding:15px 5%; width: 90%; max-width: 720px; margin:20px auto;}
	
	#proyectos{width:90%; padding:10px 5%; background:linear-gradient(65deg, rgba(125,0,150,1.00), rgba(45,52,62,1.00)); text-align:center;}
	#proyectos-txt{padding:15px 5%; width: 90%; max-width: 720px; margin:20px auto;}
	
	#contacto{width:90%; padding:10px 5%; background:linear-gradient(65deg, rgba(125,0,150,1.00), rgba(45,52,62,1.00)); text-align:center;}
	#contacto-txt{padding:15px 5%; width: 90%; max-width: 720px; margin:20px auto;}
	
	#academy{width:90%; padding:10px 5%; background:linear-gradient(65deg, rgba(125,0,150,1.00), rgba(45,52,62,1.00)); text-align:center;}
	
	#blog{width:90%; padding:10px 5%; background:linear-gradient(65deg, rgba(125,0,150,1.00), rgba(45,52,62,1.00)); text-align:center;}
	
	.producto{font-size:0.8em; font-weight:600; max-width:125px; margin:5px; padding:5px;}
	
	.services-txt-left{font-size:1.0em;}
	.services-txt-right{font-size:1.0em;}
	
	header.large ul.topnav{list-style-type:none; padding:0px; margin-top:0px; overflow:hidden; z-index:1000; width: 165px;}
	header.small ul.topnav{list-style-type:none; padding:0px; margin-top:0px; overflow:hidden; z-index:1000; width: 165px;}
 
	h1{font-size:2.1em;}
	h2{font-size:1.5em;}
	h3{font-size:1.2em; }
	
	ul.topnav.responsive{position:relative;}
	ul.topnav.responsive li.icon{position: unset; right:0; top:0;}
	ul.topnav.responsive li{float:none; display:inline; margin:0px;}
	ul.topnav.responsive li a{display: block; text-align:left; background:rgba(80,140,250,1.00); color:rgba(255,255,255,1.00); }
	ul.topnav.responsive li a:hover{background:rgba(45,52,62,1.00); color: rgba(80,140,250,1.00); }

}

@media screen and (max-width:480px) {
	#whatsapp{display:block; position:absolute; right:10px; bottom:10px; }
	#whatsapp:hover{opacity:0.8; transition:0.8;}
	#intro_web{display:none;}
	#intro_movil{display:block;}
	#instructor{margin:5px 15%; border-radius:50%; border:rgba(255,255,255,1.00) solid 2px; width:70%; max-width:480px;}
	
	.producto{ width:45%; max-width:375px; margin:10px 2.5%; padding:10px 0px; box-shadow: rgba(0,0,0,0.30) 2px 2px 5px; border-radius: 10px;}
}


/* Carrusel */
    :root {
      --btn-size: 44px;
      --btn-bg: rgba(0, 0, 0, 0.5);
      --btn-bg-hover: rgba(255,155,0, 1.0);
      --dot: rgba(255, 255, 255, 0.28);
      --dot-active: rgba(255, 255, 255, 0.85);
      --radius: 16px;
    }

    /** { box-sizing: border-box; }*/

    /* --- Contenedor principal --- */
    .carousel { width: 100%; margin: 0 auto; position: relative; }

    /* --- Ventana/viewport con scroll-snap (táctil por defecto) --- */
    .carousel__viewport {
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
      border-radius: var(--radius);
      background: none;
    }

    /* Pista de diapositivas */
    .carousel__track { display: flex; }

    /* Cada diapositiva ocupa todo el ancho visible */
    .carousel__slide {
      flex: 0 0 100%;
      scroll-snap-align: center;
      position: relative;
      aspect-ratio: 16 / 9; /* Mantiene relación en responsive */
      background: none;
    }

    .carousel__slide img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
      border-radius: var(--radius);
      user-select: none;
      -webkit-user-drag: none;
    }

    /* Botones Prev/Next */
    .carousel__btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: var(--btn-size);
      height: var(--btn-size);
      border-radius: 999px;
      border: 0;
      display: grid;
      place-items: center;
      /*background: var(--btn-bg);*/
      color: #fff;
      cursor: pointer;
      outline: none;
      transition: background 0.2s ease;
    }
    .carousel__btn:hover { background: var(--btn-bg-hover); }
    .carousel__btn:focus-visible { box-shadow: 0 0 0 3px #fff, 0 0 0 6px rgba(0,0,0,.45); }

    .carousel__btn--prev { left: 8px; }
    .carousel__btn--next { right: 8px; }

    .carousel__btn svg { width: 22px; height: 22px; }

    /* Indicadores (puntos) */
    .carousel__dots {
      display: flex;
      gap: 8px;
      justify-content: center;
      align-items: center;
      margin-top: 10px;
    }

    .carousel__dot {
      inline-size: 10px;
      block-size: 10px;
      border-radius: 999px;
      border: 0;
      background: var(--dot);
      cursor: pointer;
      padding: 0;
    }

    .carousel__dot[aria-selected="true"] { background: var(--dot-active); }
    .carousel__dot:focus-visible { outline: 3px solid #000; outline-offset: 2px; }

    /* Oculta los botones en pantallas muy pequeñas si estorban (opcional) */
    @media (max-width: 420px) {
      .carousel__btn { display: none; }
    }

    /* Respeta accesibilidad de usuarios con reducción de movimiento */
    @media (prefers-reduced-motion: reduce) {
      .carousel__viewport { scroll-behavior: auto; }
    }