/* ----- ESTILOS BASE ----- */
:root {
    --scroll-bar: 13px; }
  
  *, *::before, *::after {
    box-sizing: border-box; }
  
  h1, h2, h3, h4, h5, h6 {
    margin: 0; }
  
  img {
    border-style: none;
  }
  
  :root {
    /*  Variables del proyecto  */
  
    /*  Anchura máxima del contenido en desktop */
    --max-width : 1200px;
  
    /*  Colores  */
    --primary-color     : #7A97FF; /*El color del fondo de home*/
    --primary-color-alt : #035DBF;
    --title-color       : #121F26;
    --text-color        : #47494c;
    --body-bg-color     : #FAFDFF;
    --white-color       : #ffffff;
    --shadow-color      : rgba(236, 236, 236, 0.66);
    --color             : var(--primary-color);
    --color-alt         : var(--primary-color-alt);
  
    /*  Fuentes  */
    --body-font  : 'Open Sans', sans-serif;
    --title-font : 'Proxima Nova Rg', sans-serif;
  
    /*  Tamaños  */
    --header-height     : 3rem;
    --section-spacing   : 4rem;
    --block-spacing     : 2rem;
    --body-line-height  : 1.6;
    --title-line-height : 1.3;
  
    /* Tamaños de fuentes */
    --h1-font-size      : 1.7rem;
    --h2-font-size      : 1.5rem;
    --h3-font-size      : 1.25rem;
    --h4-font-size      : 1rem;
    --big-font-size     : 1rem;
    --normal-font-size  : 0.875rem;
    --small-font-size   : 0.75rem;
    --smaller-font-size : 0.6875rem;
  
    /* Capas */
    --z-back       : -10;
    --z-normal     : 1;
    --z-front      : 10;
    --z-tooltip    : 20;
    --z-overlay    : 30;
    --z-modal      : 40;
    --z-fixed      : 50;
    --z-off-canvas : 100;
  
    /* Otros */
    --border-radius : 0.5rem;
    --box-shadow    : 0 2px 2px rgba(36, 47, 66, 0.1);
  }
  
  @media screen and (min-width: 1024px) {
  
    /*  Variables de tamaño en desktop  */
    :root {
      --header-height         : 4rem;
      --section-spacing       : 8rem;
      --block-spacing         : 4rem;
      --h1-font-size          : 3rem;
      --h2-font-size          : 2rem;
      --h3-font-size          : 1.5rem;
      --h4-font-size          : 1.25rem;
      --big-font-size         : 1.25rem;
      --normal-font-size      : 1rem;
      --small-font-size       : 0.875rem;
      --smaller-font-size     : 0.75rem;
    }
  
  }
  /*FIN*/
.navbar
{
    font-size: 1.4em;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    color:#71a3ce;
}
.navbar a
{
    color: #4c7293;
}
.navbar-brand
{
    font-weight: 700;
    font-size: 1.4em !important;
}
.navbar-toggler-icon
{
    background: url("images/menu.svg");
}


.navbar-nav ul
{
    list-style: none;
    display: flex;
    padding: 0;
    margin: 0;
}
.navbar-nav ul li
{
    transition: 500ms all;
    margin: 0 3px;
}
.nav-link
{
    padding: 0;
}
.navbar-nav ul li:hover
{
    
    transform: scale(1.1);
}

@media screen and (max-width:767px)
{
    .navbar-nav ul
    {
        flex-direction: column;
    }
}

/*----------------MAIN SECTION*/
.mi-boton {
  height: 42px;
  width: 148px;
  background-color: #444;
  /* Color de fondo */
  border: none;
  /* Sin borde */
  color: white;
  /* Espaciado interno (arriba/abajo, izquierda/derecha) */
  text-align: center;
  /* Alineación del texto */
  text-decoration: none;
  /* Sin decoración de texto */
  display: inline-block;
  /* Mostrar como elemento en línea */
  font-size: 20px;
  /* Tamaño de fuente */
  margin: 4px 2px;
  /* Margen externo (arriba/abajo, izquierda/derecha) */
  cursor: pointer;
  /* Cambiar el cursor al pasar por encima */
  border-radius: 100px;
  /* Bordes redondeados */
}

/* Estilos adicionales para cuando se pasa el cursor por encima del botón */
.mi-boton:hover {
  background-color: #45a049;
}

.main-section
{
    height: 800px;
    background-color: #EFCB72;
    background-position: center;
    background-size:cover;
    display: flex;
    align-items: center;
    padding-left: 100px;
    max-height: 700px;
}
.main-section-text
{
    margin-top: -150px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    
}
.main-section-text h1
{
    font-size: 3.5em;
    font-weight: 700;
    color:  white;
}
.main-section-button{
    margin: 0;
    display: flex;
    justify-content: center;
}
.main-section-button button
{
    justify-content: center;
    margin-top: 20px;
    width: 30%;
    border: 0;
    background: #4c7293;
    border: 2px solid #4c7293;
    color: white;
    border-radius: 5px;
    padding: 10px 30px;
    font-size: 1.3em;
    transition: 500ms all;
}
.main-section-button button a{
    color: white;
    text-decoration: none;
}
.main-section-button button:hover
{
    background: none;
    border: 2px solid white;
}

@media screen and (max-width:768px)
{
    .main-section
    {
        padding: 20px;
        justify-content: center;
        height: 700px;
    }
    .main-section-text
    {
        text-align: center;
    }
    .main-section-text h1
    {
        font-size: 3em;
    }
    .main-section-button button
    {
        text-align: center;
    }
}


/*----------------SERVICES*/

.iconos {
  margin-left: 15rem;
  margin-top: 5rem;
}
.imagen {
  margin-top: 5rem;
  margin-right: 5rem;
}

.services h1
{
    text-align: center;
    font-size: 3.5em;
}
.services .row
{
    margin: 0 auto;
}

.services-card
{
    display:flex;
    flex-direction: column;
    align-items: center;
}
.services-card-icon
{
    width: 110px;
    height: 110px;
    border: 2px solid #4c7293;
    padding:20px;
    border-radius: 50%;
}
.services-card-icon img
{
    width: 100%;
    height: 100%;
}

.services-card h2
{
    margin: 20px 0;
    color: #4c7293;
}
.services-card p
{
    width: 80%;
    font-size: 1.4em;
    text-align: center;
}

@media screen and (max-width:768px)
{
    .services-card
    {
        margin: 30px 0;
    }
}
/*-------------------------FOOTER*/

.footer
{
    background: #71a3ce;
    color: white;
    padding:20px 0;
}
.footer .row
{
    margin: 0 auto;
    display: flex;
    justify-content: center;
    width: 80%;
}

.list-footer ul
{
    margin: 0;
    padding: 0;
    list-style:none;
}
.list-footer ul li a
{
    text-decoration: none;
    color: white;
    font-weight: 600;
}
.social-media ul
{
    padding: 0;
}
.social-media ul li
{
    display: flex;
    align-items: center;
    margin: 10px 0;
}
.social-media ul li img
{
    width: 20px;
    height: 20px;
    margin-right: 10px;
}
.social-media ul li a
{
    text-decoration: none;
    color: white;
    font-weight: 600;
}
.footer-logo
{
    display: flex;
    align-items: center;
}

@media screen and (max-width:768px)
{
    .list-footer
    {
        display: none;
    }
    .about-footer
    {
        display: none;
    }

}
@media screen and (max-width:1024px)
{
    .list-footer
    {
        display: none;
    }
    .about-footer
    {
        display: none;
    }
}

/* HE AQUI PARA LOS PLANES DEL ESCALADOR*/ 

.container-offers{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.row{
    width: 90%;
    display: flex;
    justify-content: space-evenly;
}
.card-body{
   background-color: #424753;
   padding: 15px;
   text-align: start;
}
.title-price{
    color: white;
    font-size: 2.3rem;
    font-weight: bold;
    margin-top: 25px;
    margin-bottom: 25px;
}
.title-price-simple{
    color: #8A94A7;
    font-size: 1.2rem;
}
.title-price-simple-l{
    color: #8A94A7;
    font-size: 2rem;
}
.letter-offers{
    color: white;
    font-size: 0.8rem;
}
hr{
    background-color: white;
}
.card-text{
    color: white;
    font-size: 1rem;
    margin: 0;
}

.card-text svg{
    color: #02CBB1;
    width: 21px;
    height: 21px;
    margin-right: 10px;
}

.card-text-red{
    color: white;
    font-size: 1rem;
}
.card-text-red svg{
    color: red;
    width: 19px;
    height: 19px;
    margin-right: 10px;
}
.button-price{
    background-color: #168CFA;
    width: 100%;
    border: none;
    color: white;
    padding: 15px 27px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: bold;
}
/*about us*/
.contact-section h1{
    margin-bottom: 50px;
    margin-top: 50px;
  }
  
  .content-wrapper h1{
    color: #000000;
  }
  
  .about-us .content-wrapper {
    display     : grid;
  width: 80%;
  }
  
  .about-item {
    display    : grid;
    gap        : 1.5rem;
    text-align : center;
    margin-bottom: 50px;
  }
  
  .about-item > div:first-of-type {
    order : 2;
  }
  
  @media screen and (min-width: 1024px) {
  
    .about-item:nth-child(odd) > div:nth-of-type(2) {
      order : 2;
    }
  
  }
  
  @media screen and (min-width: 1024px) {
  
    .about-item {
      grid-template-columns : 1fr 1fr;
      gap                   : 2rem;
      text-align            : left;
    }
  
  }
  
  .about-item h2 {
    margin-bottom : 0.5rem;
  }
  
  .about-item p {
    margin-bottom : 0;
    text-align: center;
  }
  
  
  .about-item-information-home p{
    text-align: left;
  }
  
  @media screen and (min-width: 1024px) {
  
    .about-item h2 {
      text-align : left;
    }
  
  }
  .container-yt{
    margin-left: 400px;
  }
  .circle {
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    height: 150px;
    width: 150px;
    margin: auto;
  }
  
  
  .section-container {
    margin-bottom : var(--section-spacing);
    display: flex ;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  
  .section-container h1,
  .section-container h2,
  .videos h1 {
    text-align : center;
  }
  .about-us{
    background-color: var(--white-color);
  }
  
  .about-us h1{
    margin-top: 50px;
    margin-bottom: 50px;
  }
  .about-us-image{
    border-radius: 50% 50%;
    border-style: none;
    max-width: 400px;
    width: 15rem;
    height: 15rem;
    margin: auto;
    object-fit:cover;
  }
  .content-text-about-us h3{
    font-style: normal;
    font-weight: bold;
    font-size: 20px;
    line-height: 33px;
  
    color: #212121;
  
    margin-left: 10px;
    margin-right: 10px;
    padding: 0;
  
  }
  
  .content-text-about-us h3 p{
    font-style: normal;
    font-weight: normal;
    font-size: 17px;
    line-height: 28px;
  
  
    color: #646464;
  
    margin: 0;
    padding: 0;
  
  }
  .content-text-about-us{
    width: 100%;
    height: 100%;
    margin-right:5px;
    margin-left: 5px;
  
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .content-text-about-us h1{
    color: #000000;
  }
  
  .content-text-about-us h2{
    color: #444444;
  }
  .image-container {
    width          : 100%;
  
    background-color: #FFFFFF;
    filter: drop-shadow(5px 14px 13px rgba(0, 0, 0, 0.25));
    border-radius: 70px 0px;
  }
  
  .image-container img{
    object-fit:cover;
  }
  .about-us{
    background-color: var(--white-color);
  }
  
  .about-us h1{
    margin-top: 50px;
    margin-bottom: 50px;
  }

  
  .about-section {
    position   : relative;
    padding   :0;
    color      : var(--white-color);
    text-align : center;
  }
  
  .about-section .content-wrapper {
    position : relative;
    z-index  : var(--z-front);
  }
  
  .about-section .title {
    color : var(--white-color);
  }
  
  .about-section p {
    opacity : 0.85;
  }
  
  .about-section p:first-of-type {
    margin-bottom : 0.75rem;
  }
  
  .about-section p:nth-of-type(2) {
    margin-bottom: 2rem;
  }
  
  .about-section .button {
    margin-bottom : 0.5rem;
  }
  
  .about-section .btn-subtitle {
    font-size : var(--smaller-font-size);
    opacity   : 0.7;
  }
  
  .about-section .background {
    position   : absolute;
    left       : 0;
    top        : 0;
    width      : 100%;
    height     : 100%;
    object-fit : cover;
    z-index    : var(--z-normal);
    opacity    : 0.1;
  }
  
  .subtitle-tuned{
    margin: 30px 0px 0px 0px;
    padding: 0;
    font-size: var(--small-font-size);
    opacity       : 0.7;
  }
  
  .content-text-about-us h3{
    font-style: normal;
    font-weight: bold;
    font-size: 20px;
    line-height: 33px;
  
    color: #212121;
  
    margin-left: 10px;
    margin-right: 10px;
    padding: 0;
  
  }
  
  .content-text-about-us h3 p{
    font-style: normal;
    font-weight: normal;
    font-size: 17px;
    line-height: 28px;
  
  
    color: #646464;
  
    margin: 0;
    padding: 0;
  
  }
  
  .about-us-image{
    border-radius: 50% 50%;
    border-style: none;
    max-width: 400px;
    width: 15rem;
    height: 15rem;
    margin: auto;
    object-fit:cover;
  }
  .circle {
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    height: 150px;
    width: 150px;
    margin: auto;
  }
  
  .rectangle-rounded {
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 20%;
    height: 250px;
    width: 250px;
    margin: auto;
  }
  
  .content-text-about-us{
    width: 100%;
    height: 100%;
    margin-right:5px;
    margin-left: 5px;
  
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  .content-text-about-us h1{
    color: #000000;
  }
  
  .content-text-about-us h2{
    color: #444444;
  }
  .subtitle{
      color: black;
  }
  
.img-playstore{
  height: 56px;
  width: 189px;
}

footer {
  width: 100%;
  position: relative;
  bottom: 0;
  left: 0;
  padding: 2rem 8%;
  background-color: #EFCB72;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

footer h2 {
  margin-bottom: 2rem;
}

.social-icons-conatainer,
.footer-menu-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.social-icons-conatainer h2 {
  margin-right: 20rem;
}

.footer-menu-container {
  list-style: none;
  color: #f2f2f2;
  font-size: 18px;
}

.footer-menu-container a {
  text-decoration: none;
  color: #000;
}

.menu-item {
  margin: 1rem 1.5rem;
  cursor: pointer;
  opacity: 0.6;
}

.menu-item::hover {
  opacity: 1;
}

.copyright {
  color: #f2f2f2;
  opacity: 0.3;
  text-align: center;
}
.icons {
  padding: 1rem;

}

.contenedor-3 {
  display: grid;
  width: 100%;
  height: 60vh;
  text-align: center;
  align-items: center;
  background: #FFF1D7;
  -webkit-box-shadow: 0px 7px 5px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 7px 5px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 7px 5px 0px rgba(0, 0, 0, 0.75);
}

.textoslider {
  margin-top: 5rem;
  margin-left: 20rem;
  margin-right:  20rem;
}

/*fin seccion3*/
.contenedor-4 {
  display: grid;
  width: 100%;
  height: 60vh;
  text-align: center;
  align-items: center;
  background: #FFF1D7;
}

.textoD {
  margin-top: 0rem;
}

.textoD h2 {
  font-size: 50px;
  margin-bottom: 2rem;
}

.textoD p {
  font-size: 20px;
}