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

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');

body {margin:0; background:url(../img/bkgd.jpg) fixed no-repeat; background-size:cover; }
h1{color:rgba(0,0,0,1.00); font-family: "Manrope", sans-serif; font-size:2.8em; font-weight:800; margin-bottom:10px; text-align: left; line-height:90%; margin:25px 0px;}
h2{color:rgba(233,177,61,1.00); font-family: "Manrope", sans-serif; font-size:1.4em; font-weight:500; line-height:100%; margin:25px 0px; text-align:left; border-left:rgba(233,177,61,1.00) solid 2px; padding-left:10px;}
h2.quote{color:#FFF; font-family: "Manrope", sans-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: "Manrope", sans-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(0,0,0,1.00); font-family: "Manrope", sans-serif; font-size:1.0em; font-weight:400; line-height:150%;}

b{font-weight: 800;}

a:link, a:active, a:visited{color:rgba(255,255,255,1.00); font-family: "Manrope", sans-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: "Manrope", sans-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(0,0,0,1.00); font-family: "Manrope", sans-serif; font-size:1.0em; font-weight:300; line-height:150%;}

legend{color:rgb(255,255,255); font-family: "Manrope", sans-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: "Manrope", sans-serif; font-size:1.2em; font-weight:300; line-height:110%; text-align:left; padding:10px; border-radius: 15px;;}

button{background:linear-gradient(0deg, rgba(233,177,61,0.65), rgba(233,177,61,1.00)); border:none; border-radius:10px; color:#FFF; font-family: "Manrope", sans-serif; font-size:1.2em; font-weight:400; line-height:100%; text-align:center; padding:10px 25px; margin:10px auto; width:100%; max-width:320px;}
button:hover{background:rgba(45,52,62,1.00); color:rgba(233,177,61,1.00);}

input.botonyellow{background:rgba(0,160,255,1.00); border:outset; border-radius:3px; color:#FFF; font-family: "Manrope", sans-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 */

/* CLASSES */

/* MENÚ RESPONSIVO */
ul.topnav li {float:left; font-family: "Manrope", sans-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(0,0,0,1.00); border:none; }
ul li.menu a:hover{color:rgba(255,255,255,1.00); background:rgba(0,0,0,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(233,177,61); 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(0,0,0,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:60%; margin:25px 20%; border-radius:25px; position:fixed; top:0; z-index:10; transition:0.8s; }
header.large{height:50px; background:linear-gradient(0deg, rgba(233,177,61,0.65), rgba(233,177,61,1.00)); transition:1.8s; backdrop-filter: saturate(180%) blur(20px); box-shadow:rgba(0,0,0,0.5) 3px 3px 3px; }
header.large img{height:95px; transition:1.8s;}
header.large #logo_box{display:block; float:left; margin:-5px;}
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:2px 50px 2px 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: "Manrope", sans-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:-15px -50px;}
#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; }
#footer{width:95%; padding:15px 2.5%; background:rgba(10,10,10,0.65); text-align:left; position:relative; bottom:0; backdrop-filter: saturate(180%) blur(20px); box-shadow:rgba(0,0,0,1.00) 0px 0px 5px;}
#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 img{height: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: "Manrope", sans-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; }
    }