/*------------------Estilo y diseño de Introduccion------------------*/

  .Intro{
        width: 1200px;          /* Establecemos el ancho del elemento */
        max-width: 100vw;       /* definimos el ancho máximo que un elemento puede tener (vw = %) */
        height: 600px;
        margin: auto;           /* Hace que un elemento "no inline" con un ancho definido tenga márgenes automático*/
        position: relative;     /* Cambia la posición del elemento en donde normalmente estaría en el flujo de la página */
        overflow: hidden;       /* Ocultando elementos que se desbordan fuera del límite del elemento principal */
        display: flex;
        color: white;
        margin-top: 30px;
        }

  .Intro .Listo{              
                width: 600px;
               }
      
  .Intro .Listo h1{
                   text-align: center;
                   font-size: 55px;
                   margin-top: 50px;
                   margin-left: 20px;
                  }

  .Intro .Listo p{
                  font-size: 26px;
                  margin-top: 40px;
                  margin-left: 40px;
                 }

  .Intro .v-line{
                border-left: thick solid white;
                border-width: 0.5px;
                height:75%;
                left: 55%;
                margin-top: 30px;
                position: absolute;
                }

  .Intro hr{
            display: none;
           }
                
  .Intro .Datos{           
                width: 600px;
                margin-top: 55px;
               }

  .Intro .Datos h2{
                   font-size: 25px;
                   margin-top: 30px;
                   margin-left: 130px;
                  }

  .Intro .Datos p{
                  font-size: 20px;
                  margin-top: 20px;
                  margin-left: 170px;
                 }

  .Intro .Datos .num{
                     display: block;
                     color: white;
                     text-decoration: none;
                     width: 150px; 
                     font-size: 20px;
                     margin-top: 20px;
                     margin-left: 170px;
                    }

  .Intro .Datos .red-soc{
                         font-size: 20px;          /* Especificamos el tamaño del texto */
                         margin-top: 20px;         /* Definimos un margen superior para el elemento */  
                         margin-left: 160px;
                        }

  .Intro .Datos .red-soc a{
                           color: white;           /* Definimos el color del elemento */
                           padding: 10px;
                           text-decoration: none;    /* Eliminamos la decoracion del texto */
                          }

/* "hover" se usa para que alguna alteracion a la pagina web */
  .Intro .Datos .red-soc a:hover{
                                 color: red;      /* Definimos el color del elemento */
                                }

  .Intro .Datos .num:hover{
                           color: red;      /* Definimos el color del elemento */
                          }


/*------------------MAPA------------------*/

  .Mapa{
        width: 1000px;          /* Establecemos el ancho del elemento */
        max-width: 100vw;       /* definimos el ancho máximo que un elemento puede tener (vw = %) */
        height: 530px;          /* Establecemos largo de la imagen */
        margin: auto;
        position: relative;     /* Cambia la posición del elemento en donde normalmente estaría en el flujo de la página */
        overflow: hidden;       /* Ocultando elementos que se desbordan fuera del límite del elemento principal */
        margin-bottom: 120px;
        border-radius: 30px;
      }