@charset "UTF-8";
/*
  Con este reset vamos a resolver:
    👉 Unificar el uso de Custom Properties
    👉 Problemas de box-model más generales
    👉 Problemas con imagenes, vídeos e iconos svg
    👉 Problemas con tipografías y etiquetas input en formularios
    👉 Unificar la tipografía de todas las etiquetas de una web
    https://www.youtube.com/watch?v=Foieq2jTajE
*/
/* Aquí definimos las Custom properties */
:root {
  --black: #000000;
  --white:#ffffff;
  /* Paleta de colores  */
  --GrayBlue10a: rgba(13, 17, 26,0.9);
  --GrayBlue10: #0d111a; --GrayBlue15: #131926; --GrayBlue20: #1A2222; --GrayBlue25: #202B40;
  --GrayBlue30: #26334D; --GrayBlue35: #2D3C59; --GrayBlue40: #334466; --GrayBlue45: #3F5073; --GrayBlue50: #4D5E80;
  --GrayBlue55: #62708C; --GrayBlue60: #6B7A99; --GrayBlue65: #7C8AA6; --GrayBlue70: #7D8FB3; --GrayBlue75: #99A6BF;
  --GrayBlue80: #ADB8CC; --GrayBlue85: #C3CAD9; --GrayBlue90: #DADEE6; --GrayBlue91: #DCE0E8; --GrayBlue92: #DFE3EB;
  --GrayBlue93: #E1E5ED; --GrayBlue94: #E4E7F0; --GrayBlue95: #EDEFF2; --GrayBlue96: #F2F3F5; --GrayBlue97: #F5F6F7;
  --GrayBlue98: #F7F8FA; --GrayBlue99: #FAFBFC;   

  --DarkBlue2: #0039FF;  --DarkBlue1: #194DFF;  --Blue: #3361FF;  --LightBlue1: #4D74FF;  --LightBlue2: #6688FF;
  --DarkGreen2: #00B211;  --DarkGreen1: #13BF24;  --Green: #29CC39;  --LightGreen1: #45E655;  --LightGreen2: #66FF75;
  --DarkPink2: #CC0056;  --DarkPink1: #D91668;  --Pink: #E62E7B;  --LightPink1: #F24990;  --LightPink2: #FF66A6;
  --DarkPurple2: #6A00FF;  --DarkPurple1: #7919FF;  --Purple: #8833FF;  --LightPurple1: #974DFF;  --LightPurple2: #A666FF;
  --DarkOrange2: #CC4314;  --DarkOrange1: #E64B17;  --Orange: #FF6633;  --LightOrange1: #FF794D;  --LightOrange2: #FF8D66;
  --DarkTealBlue2: #008CCC;  --DarkTealBlue1: #17A5E6;  --TealBlue: #33BFFF;  --LightTealBlue1: #4DC7FF;  --LightTealBlue2: #66CFFF;
  --DarkRed2: #B20000;  --DarkRed1: #CC1414;  --Red: #E62E2E;  --LightRed1: #F24949;  --LightRed2: #FF6666;
  --DarkYellow2: #D9A200;  --DarkYellow1: #E6B117;  --Yellow: #FFCB33;  --LightYellow1: #FFD559;  --LightYellow2: #FFD559;
  --DarkBronze2: #994700;  --DarkBronze1: #B35C12;  --Bronze: #CC7429;  --LightBronze1: #D98741;  --LightBronze2: #E69B5C;
  --DarkTiffany2: #00B397;  --DarkTiffany1: #14CCB0;  --Tiffany: #2EE6CA;  --LightTiffany1: #49F2D8;  --LightTiffany2: #66FFE8;

  /* Tipografía */
  --tipo-principal: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 
  
  --tipo-secundaria: Verdana;
}

/* Las adaptamos al modo oscuro */
@media (prefers-color-scheme: dark) {
  :root {
    --black: #000;
    --white: #fff;
  }
}
/* Opcional */
/* Configuramos si un usuario ha activado el modo alto contraste. (WD) */
/* Opcional */
/* Desactivamos los animations en el caso de que el usuario haya configurado el modo sin animation */
/* @media (prefers-reduced-motion: reduce) {
  * {
    -webkit-animation: none !important;
            animation: none !important;
    -webkit-transition: none !important;
    transition: none !important;
  }
} */
/* Reseteamos los margin y paddings de todas las etiquetas */
*{
  margin: 0;
  padding: 0;
  border: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  vertical-align: baseline;
}

/* Evitamos problemas con las imagenes */
img, picture, video, iframe, figure {
  max-width: 100%;
  width: 100%;
  display: block;
  /* opcional */
  /*-o-object-fit: cover;
     object-fit: cover;/*
  /* opcional */
  /*-o-object-position: center center;
     object-position: center center;*/
}

/* Reseteamos los enlaces para funcionar como cajas... */
a {
  display: block;
  text-decoration: none;
  color: inherit;
  font-size: inherit;
}

/* ... excepto los que se encuentran en párrafos */
p a {
  display: inline;
}

/* Quitamos los puntos de los <li> */
li {
  list-style-type: none;
}

/* Configuramos anclas suaves */
html {
  scroll-behavior: smooth;
}

/* Desactivamos estilos por defecto de las principales etiquetas de texto */
h1, h2, h3, h4, h5, h6, p, span, a, strong, blockquote, i, b, u, em {
  font-size: 1em;
  font-weight: inherit;
  font-style: inherit;
  text-decoration: none;
  color: inherit;
}

/* Evitamos problemas con los pseudoelementos de quotes */
blockquote:before, blockquote:after, q:before, q:after {
  content: "";
  content: none;
}

/* Configuramos el texto que seleccionamos */
::-moz-selection {
  background-color: var(--black);
  color: var(--white);
}
::selection {
  background-color: var(--black);
  color: var(--white);
}

/* Nivelamos problemas de tipografías y colocación de formularios */
form, textarea, select, button, label { /*poner input*/
  font-family: inherit;
  font-size: inherit;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  background-color: transparent;
  color: inherit;
  display: block;
  /* opcional */
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

/* Reseteamos las tablas */
table, tr, td {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Evitamos problemas con los SVG */
svg {
  width: 100%;
  display: block;
  fill: currentColor;
}

/* (Probándolo, no usar en producción) En el caso de añadir una  */
/* p svg{
  display: inline;
  width: initial;
} */
/* Configuramos la tipografía para toda la web */
/body {
  min-height: 100vh;
  font-size: 100%;
  font-family: var(--tipo-principal);
  
  color: var(--black);
  /* opcional */
  line-height: 1.4em;
  /* opcional */
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  /* opcional */
  /* font-smooth: always;*/
  /* opcional */
  /*-webkit-font-smoothing: antialiased;*/
  /* opcional */
  /*-moz-osx-font-smoothing: grayscale;*/
}


/* ------------------------- CSS -------------------------------------------------------------*/


.header{
  width: 100%;
  min-height: 4em; /*minima altura del header cuando está en la posición principal*/
  height: 5em;
  background-color: transparent;
  border-bottom: thin solid var(--white);
  
  color: var(--white);
  font-size: 1.2em;

  padding: 1em 2em;

  display: flex;
  /* flex-flow: row wrap; */
  justify-content: space-between; /*separa el logo de los elementos del header, espaciandolos a los extremos*/
  margin: 0 auto;
  align-items:center;
  top: 0;
  z-index: 1;
  position: fixed; /* Posiciona el header fijo*/

  transition: position 1s, background-color 1s, min-height 1s, font-size 1s;
  
}



.sticky{ /* Clase que se aplica con js funcion header pequeño y cambio de fondo, al hacer scroll.*/
  background-color: var(--GrayBlue10a); 
  min-height: 3.5em; /*disminuye el header cuando se desplazan por la pagina*/
  font-size: 1.1em; /*disminuye la letra tambien*/
}

.header__h1{}

.header__a{
  display: flex;
  align-items: center;
  justify-content: center;
}

.header__nav{
  position: relative;
  
}

.header__ul{
  display: flex;
  /* flex-flow: row nowrap; /*alinea los elementos del header uno al lado del otro*/
  /* justify-content: flex-end;  *//* posiciona los elementos a la derecha, al final*/ */
  /*align-items: center;*/ 
  height: 100%;
}

.header__li{
  margin: 0 0.6em;
  position: relative; /*posiciona los elementos relativos a él. nesting*/
  height: 100%;
  --clip: polygon(0 0, 100% 0, 100% 0, 0 0); /* posición inicial del submenú desplegable */
  --rotacion: rotate(-90deg); /* posicion inicial del arrow. Hacia la derecha*/
}
.header__li:hover{
  --clip: polygon(0 0, 100% 0, 100% 100%, 0% 100%); /*posición final del submenú desplegable*/
  --rotacion: rotate(0); /* posicion final del arrow. Hacia abajo*/
}
.header__li--list{
  /* justify-content: left; */ /*alinear el texto a la izquierda */
  height: 100%;
}
.img--arrow{
  transform: var(--rotacion);
  transition: transform 0.5s; /* tiempo de transición del arrow*/
}
.header__nesting{ /*subemnu desplegable*/
  background-color: var(--GrayBlue10a); /*fondo del submenu desplegable*/
  position: absolute; /*se posiciona a su padre (li) absolutamente*/
  /* right: 0; */ /*posicionado a la derecha*/
  bottom: 0; /*posicionado abajo*/
  width: max-content; /*su ancho es ajustado al contenido*/
  transform: translateY(100%); /*se despliega hacia abajo*/
  padding: 0 0.5em; /*separa los link del submenú, de sus bordes*/
  border-radius: 1em; /*redondea el submenu*/
 flex-direction: column; /*para que el submenu se posicione uno debajo del otro en lista desplegable*/
 clip-path: var(--clip); /*efecto desplegable*/
 transition: clip-path 0.5s; /* tiempo de transición del submenu desplegable*/
}

.header__li--clippy{
  --clippy: polygon(50% 0, 50% 0, 50% 100%, 50% 100%); /* efecto underline en 0%*/
}
.header__li--clippy::after{ /* estado de los links antes del hover, para iniciar la animación*/
  content: "";
  display: block;
  background: var(--white);
  width: 100%;
  height: 3px;
  margin-top: 3px;
  clip-path: var(--clippy);
  transition: clip-path 0.3s ease-in-out; 
}
.header__li--clippy:hover{
  --clippy: polygon(0 0, 100% 0, 100% 100%, 0 100%); /* efecto underline al 100%*/
}
.header__img{
  width: 30%;
}
.logo--a{
  background-color: var(--white);
  border-radius: 50%;
  width: 3em;
  height: 3em;
  align-content: center;
  justify-content: center;
  transition: transform 0.5s;
}
.logo--img{
  padding-bottom: 8%;
  width: 2em;
}

.logo--a:hover{
  transform: scale(1.1) /*transforma el logo a una escala 1.1 mas grande al pasar el mouse*/
}


/* ----------- MENU HAMBURGUER DENTRO DEL NAV -----------*/



.menu--img{
  display: block;
  width: 2em;
}

.header__label{ /*se oculta la imagen menu y solo se muestra en dispositivos moviles menores a 800px*/
  display: none;
  cursor: pointer;
}

.menu--toggle{ /*se oculta y se usa solo para mostrar y esconder el menu en dispositivos moviles. Para no usar js*/
  display: none; 
}





/* ---------------------- SECCION MAIN ------------------------------------------ */

.main{
  text-align: center;
}

/* ---------------------- SECCION INICIO ------------------------------------------ */

.seccion{
  width: 100%;
  min-height: 90vh;
  padding: 2em;
  font-family: var(--tipo-principal);
  color: var(--black);

  background-color: var(--GrayBlue98);

  display:flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
}
.seccion__inicio{
  color: var(--white);
  background-image: url("../img/foto-top-fibra.jpg");
  background-size: cover;
  background-position: center;
}



.seccion__h1{
  font-size: 4em;
  font-weight: 800;
}
.seccion__h2{
  font-size: 3em;
  font-weight: 700;
}
.seccion__h6{
  font-size: 1.5em;
  font-style: italic;
  line-height: 1.7em;
}


.seccion__img{
  width: 20%;
}


.seccion__btn{ /*boton general y transparente*/
  width: 122px;
  height: 30px;
  background-color: transparent;
  border-radius: 2em;
  border: none;
  cursor: pointer;
  transition: background-color 0.5s, box-shadow 0.5s;
  
  align-items: center;
  justify-content: center;
  display: flex;
  box-shadow: 0em 0em 0.5em var(--black);
}

.seccion__btn--principal{ /*boton principal de whatsapp en el cover*/
  height: 50px; /*mas alto que el boton general*/
  background-color: var(--DarkBlue2); /*con color, el general es transparente*/
}

.seccion__btn:hover{ /*efecto al posicionar sobre boton general*/
  box-shadow: 0.1em 0.1em 1em black;
  background-color: hsla(0, 0%, 0%, 0.477);
}
.seccion__btn--principal:hover{
  background-color: var(--DarkOrange2);
}
.btn--flotante{
  position: fixed; /*flecha flotante fija*/
  bottom: 3em; /*se posiciona abajo y la derecha*/
	right: 0rem;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem 0 0 0.5rem;

  font-size: 2rem;
  font-weight: 800;
  color: var(--white);
  z-index: 1;
  transition: width 0.5s, opacity 0.5s;
}
.seccion__inicio:hover + .btn--flotante{ /*el boton flotante desaparece al pasar el puntero en seccion inicio*/
opacity: 0;
width: 0; /*efecto para que se recoja a la derecha, ya que la posicion es 0 right*/
}
.btn--login{
  width: 130px; /*botón login mas ancho que el general*/
  border: 0.05em solid var(--GrayBlue50);
}
.btn--login:hover{
  background-color: var(--GrayBlue50);
}
/* ---------------------- SECCION PLANES ------------------------------------------ */

.seccion__planes{
  width: 95%;
  margin: 1em 0;;
  padding: 2em 2em 1em;
  border-radius: 1em;
  background-color: var(--white);
  
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1em;
}
.seccion__plan{
  width: 100%;
  min-height: 35vh;
  border-radius: 1em;
  color: var(--white);
  box-shadow: 0 0 0.5em var(--black);

  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  position: relative;

  transition: box-shadow 0.5s;
  
}

.seccion__plan:hover{
  box-shadow: 0 0 1em var(--black); /*efecto de sombra sobre las "card" de los planes (seccion__plan)*/
}

.seccion__h4{
  font-size: 2em;
  font-weight: 600;
  text-shadow: 0 0 0.2em var(--black);
}

.seccion__valormegas{
  display: flex;
  align-items: baseline;
}
.seccion__p{
  background-color: var(--Red);
  font-weight:500;
  box-shadow: inset 0 0 0.5em var(--black);
  padding: 0 1em 0 0.1em;
}
.seccion__plan--1{
  background-color: var(--Green);
  background-image: url("../img/plan1-estudiante.png");
  background-size: 50%;
  background-repeat: no-repeat;
}

.seccion__plan--2{
  background-color: var(--Purple);
  background-image: url("../img/plan2-home.png");
  background-size: 50%;
  background-repeat: no-repeat;
}

.seccion__plan--3{
  background-color: var(--Orange);
  background-image: url("../img/plan3-entretenimiento.png");
  background-size: 50%;
  background-repeat: no-repeat;
}

.seccion__plan--4{
  background-color: var(--TealBlue);
  background-image: url("../img/plan4-negocios.png");
  background-size: 50%;
  background-repeat: no-repeat;
}

.seccion__caracteristicas{
  margin: 0;
  padding: 0 2em;
  border-radius: 1em;
  background-color: var(--GrayBlue94);
  font-size: 0.8em;
  box-shadow: inset 0 0 0.5em var(--black);
  overflow: hidden;

  height: 0; /*mantienen ocultas las caracteristicas*/
  visibility: hidden;
  opacity: 0;

  transition: margin 1s, padding 1s, height 1s, visibility 1s, opacity 2s;
}



.seccion__extendido:hover >.seccion__caracteristicas{
  /*al pasar el puntero sobre toda la sección de un plan, se muestran las características*/
  margin: 1em 0;
  padding: 1em 2em;

  height: auto; /*hace que la altura crezca al tamaño de las caracteristicas, efecto desplegable*/
  visibility: visible;
  opacity: 1;
}


.seccion__general{
  width: 95%;
  height: auto;
  padding: 2em;
  visibility: visible;
  opacity: 1;
  display: flex;

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1em;

}
.seccion__caracteristicasgpon--p{
  font-weight: bold;
}

.seccion__li{
  list-style-type:disc;
  text-align: start;
}

.seccion__li--a{
  text-decoration:underline;
}


.division{
  margin: 2rem 0;
  width: 100%;
  border-bottom: 0.1rem solid #070f32;
}



/* ---------------------- SECCION ABOUT ------------------------------------------ */

.seccion--about{
  color: var(--white);
  background-image: url("../img/about.png");
  background-size: cover;
  background-position: center;
  align-items: start;
  position: relative;
  overflow: hidden;
}

.seccion__p--about{
  background-color: var(--GrayBlue15);
  padding: 1em;
  width: 50%;
}
.letreroabout{
  color: rgba(255, 255, 255, 0.034);
  font-size: 8em;
  font-weight: 800;
  position: absolute;
}
.letreroabout--img{
  width: 40%;
  margin-left: 50%;
  opacity: 80%;
  
  filter: invert(50%)
}


/* ---------------------- SECCION LINEAMIENTOS ------------------------------------------ */

.seccion__lineamientos{
  
  color: var(--white);
  text-align: left;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
  gap: 1em;
  overflow: hidden;
}
.seccion__lineamientos--izq{
  height: 100%;
}
.seccion__vision{
  background-image: url(/img/vision.png);
  background-size: cover;
  background-position: center;
  margin-bottom: 1em;
  padding: 1em 2.5em;
  border-radius: 1em;
}
.seccion__valores{
  background-image: url(/img/valores.png);
  background-size: cover;
  background-position: center;
  color: var(--black);
  padding: 1em 2.5em;
}
.seccion__mision{
  height: 100%;
  background-image: url("/img/mision.png");
  background-size: cover;
  background-position: center;
  padding: 1em 2.5em;
  border-radius: 1em;
}

.seccion__lineamientos--p{
  width: 50%;
  padding: 1em;
  
}


/* ---------------------- SECCION MINTIC ------------------------------------------ */

.seccion__mintic{
  background-color: var(--GrayBlue10);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, max-content));
  gap: 1em;
  padding: 2em 0;
  justify-content: center;
}
.seccion__mintic--img{
  
  width: auto;
  height: 5em;
  max-height: 5em;
}

/* ---------------------- FOOTER ------------------------------------------ */

.footer{
  color: var(--black);
  text-align: center;
}
.footer__datos{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.1em;
  padding: 2em 0;
  align-items: top;
}
.footer__columnas{
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  gap: 1em;
}

.footer__a{
  align-items: center;
  justify-content: center;
  display: flex;
}
.footer--btn{
  width:9em;
  height: 3em;
  border-radius: 0.5em;
  border: 0.05em solid var(--GrayBlue55);
}

.footer__copyright{
  display: inline-block;
}
.footer--btn:hover{
  background-color: var(--GrayBlue30);
  color: var(--white);
}
.footer--address{
  height: 1em;
}
.footer--address:hover{
  border-bottom: 0.05em solid var(--GrayBlue55);
}



/* ------------------------------ DISPOSITIVOS MOVILES -------------------------- */

@media screen and (max-width: 800px) {
   /*.header{
    width: 100%;
    align-items: baseline; /*para que el menú se posicione hacia abajo*/
     /*position: static;
    background-color: var(--GrayBlue10);
  } */

  
  .header__li{ /*para que el submenú no esté oculto*/
    --clip: 0;
    /*overflow:hidden;*/height: auto;
  }
  

  .header__li--active{
    --rotacion: rotate(0);
    --bg: rgb(255, 0, 0);
  }
  .header__li--show{
    background-color: var(--bg);
    margin-bottom: 35%;
  }

  

  .header__ul{
    position: fixed;
    max-width: 25em;
    width: 100%;
    top: 5em;
    bottom: 0;
    right: 0;
    background-color: var(--GrayBlue10a);
    overflow-y: auto;
    grid-auto-rows: max-content;
    display: none;
    flex-direction: column;  
  }

  .header__nesting{
    width: 100%;
  }
  
  .img--arrow{
    margin-left: auto;
    margin-right: 1.5em;
    width: 10%;
  }
  
  
  .header__li--list{
    background-color: var(--GrayBlue15);
    
  }

  .header__label{
    display: block;
  }
  
  .menu--toggle:checked + .header__label + .header__ul{ /*cuando esta palomiado, hace visible y despliega el menu*/
    height: 40%;                   /*hace que se despliegue el menu hacia abajo hasta 16em*/
    display: flex;
    }

}

@media screen and (max-width: 600px) {
  .mostrar__moviles{ /* mostrar los elementos ocultos cuando estemos en dispositivos moviles */
    margin: 1em 0;
  padding: 1em 2em;

  height: auto;
  visibility: visible;
  opacity: 1;
  }
}