@font-face {
    font-family: 'NombreDeLaFuente';
    src:
         url('fonts/Unna-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
/* Estilos generales */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Unna-Regular;
}

#bar, .icon-menu3 {
    display: none;
}

.contenedorglobal {
    width: 100%;
    height: 100%;
    max-width: 2000px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
/* Header */
header {
    background: white; /* Cambia al color primario que quieras usar */
    width: 100%;
    height: 10%;
    align-items: center;
    border:solid #a68d8d;
}
header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    width: 100%;
    
}
header .logo img {
    width: 100%;
    margin-top: 10px;
    
}
header nav ul {
    list-style: none;
    display: flex;
    align-items: center;
   
}
header nav ul li {
    align-items: center;
    padding: 10px;
    margin-right: 10px;
    border-radius: 5px;
    border-style:hidden;
    background-color: white;
    font-size: 1.1em!important;
}

.nav-bar ul li a {
    text-decoration: none;
    color: #546960;
    font-weight: bold;
    padding: 10px 20px;
    transition: background-color 0.3s ease;
    font-size: 1.1em!important;
    font-family: Unna-Regular;
}
header nav ul li :last-child {
    margin-right: 0; /* Elimina el margen derecho del último elemento */
}

.navegador{
    width: 49%;
   
}
.logo {
   width: 51%;
}


/* Footer */
footer {
    background-color: white;
    color: #a68d8d;
    font-weight: bold;
    text-align: center;
    width: 100%;
    height: 40px;
    border: solid #a68d8d;
    display: flex; /* Agregado */
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
}

 .div1 {
    width: 100%;
    height: 80vh; /* Usa vh para asegurar que el div tenga altura */
    max-height: 500px;
    position: relative;
    overflow: hidden; /* Oculta cualquier desbordamiento */
}

.video1 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: auto;
    max-height: 100%;
    transform: translate(-50%, -50%);
    object-fit: cover;
}
.div2 {
    width: 100%;
    height: 120vh; /* Usa vh para asegurar que el div tenga altura */
    max-height: 600px;
    position: relative;
    overflow: hidden; /* Oculta cualquier desbordamiento */
}

.video2 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: auto;
    max-height: 100%;
    transform: translate(-50%, -50%);
    object-fit: cover;
}

.divprincipios {
    width: 100%;
    height: 80vh; /* Usa vh para asegurar que el div tenga altura */
    max-height: 500px;
    position: relative;
    overflow: hidden; /* Oculta cualquier desbordamiento */
}

.videoprincipios {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: auto;
    max-height: 100%;
    transform: translate(-50%, -50%);
    object-fit: cover;
}
.div4 {
    width: 100%;
    height: 80vh; /* Usa vh para asegurar que el div tenga altura */
    max-height: 500px;
    position: relative;
    overflow: hidden; /* Oculta cualquier desbordamiento */
}

.video4 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: auto;
    max-height: 100%;
    transform: translate(-50%, -50%);
    object-fit: cover;
}
.div5 {
    width: 100%;
    height: 90vh; /* Usa vh para asegurar que el div tenga altura */
    max-height: 550px;
    position: relative;
    overflow: hidden; /* Oculta cualquier desbordamiento */
    display: flex;
    flex-wrap: wrap; /* Permite que los divs se ajusten a varias filas */
}

.video5 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: auto;
    max-height: 100%;
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: -1; /* Colocar el video detrás de los divs */
}

.flexcontainer {
    max-width: 2000px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

/* div 3 cel */
.content-wrapper {
    display: flex;
    position: absolute;
    z-index: 2; /* Para que el contenido esté encima del video */
    width: 95%;
    height: 10%;
    align-self: flex-end;
    flex-direction: row;
    justify-content: center;
    margin-left: 1em;
   
}
.content-left {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: left;
    
}
.content-right {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: left;
   
}

.content-left p, .content-right p {
    font-size: 2vh !important;
}
.instagram{
    font-size: 2.5vh!important;
}
.tel{
    font-size: 2.5vh!important ;
}

/* div 4 cel */
.puntosde {
    position: absolute;
    display: flex;
    justify-content:space-between;
    width: 100%;
    height: 35%; /* Establece la altura de 400px */
    z-index: 3; /* Coloca el contenido sobre el video */
    align-self: flex-end;
    margin-left: 1vh;
}

.izquierda, .centro {
    width: 50%;
    text-align:left;
    height: 100%; /* Asegura que los divs internos ocupen el 100% de la altura de puntosde */
}

.izquierda p, .centro p {
    font-size: 2.5vh; 
}
.nombre1{
    font-weight: bold;
    color: #546960;
}
.nombre1 a i {
    font-size: 2vh; /* Cambia este valor según sea necesario */
    margin-right: 5px; /* Espacio a la derecha del ícono */
}
/* div 5 */
.column {
    margin: 0px; /* Margen de 10px entre cada columna */
    display: flex;
    flex-direction: column; /* Alinear el texto en columnas */
    justify-content: center; /* Centrar contenido verticalmente */

}

.column p {
    margin-left: 30px; /* Margen a la izquierda de los párrafos */
    font-size: 1em;
}

.upper {
    height: 70%; /* 70% de altura para la parte superior */
    flex: 1 1 calc(33.33% - 20px); /* Ocupa un tercio del ancho, ajustando por margen */
}

.lower {
    height: 30%; /* 30% de altura para la parte inferior */
    flex: 1 1 calc(33.33% - 20px); /* Ocupa un tercio del ancho, ajustando por margen */
}
.nombre{
    font-weight: bold;
    color: #546960;
}

.nombre a i {
    font-size: 2vh; /* Cambia este valor según sea necesario */
    margin-right: 5px; /* Espacio a la derecha del ícono */
}
.nombre i, .lower p i {
    font-size: 2vh; /* Cambia este valor según sea necesario */
    margin-right : 5px; /* Espacio a la derecha del ícono */
}

a {
    color: #8a8480; /* Color por defecto */
    text-decoration: none; /* Quitar subrayado */
}

a:visited {
    color: #8a8480; /* Color para enlaces visitados */
}

a:hover {
    color: #b0a7a2; /* Color más claro al pasar el mouse */
}

a:active {
    color: #8a8480; /* Color para enlaces activos */
}

.div1cel, .div2cel, .div3cel, .div4cel{
    display:none
}
.video1cel, .video2cel, .video3cel, .video4cel{
    display:none
}
@media (max-width: 1400px){

.flexcontainer {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}
    /* Header */
header {
    background: white; /* Cambia al color primario que quieras usar */
    width: 100%;
    height: 10%;
    align-items: center;
    border:solid #a68d8d;
}
header .container {
    display: flex;
    justify-content:center;
    align-items: center;
    height: 100%;
    width: 100%;
    
}
header .logo{
   display: none;
    
}
header nav ul {
    list-style: none;
    display: flex;
    align-items: center;
    width: auto;
   
   
}
header nav ul li {
    align-items: center!important;
    padding: 10px!important;
    margin-right: 5px!important;
    border-radius: 5px!important;
    background-color: white!important;
    font-size: 2em!important;
    width: auto!important;
    
}

.nav-bar ul li a {
    text-decoration: none!important;
    color: #546960!important;
    font-weight: bold!important;
    padding: 10px 20px!important;
    transition: background-color 0.3s ease!important;
    font-size: 2em !important;
    font-family: Unna-Regular!important;

}
header nav ul li :last-child {
    margin-right: 0; /* Elimina el margen derecho del último elemento */
}

.navegador{
    width: 100%;
   
}
/* Footer */
footer {
    background-color: white;
    color:#a68d8d;
    font-weight: bold;
    text-align: center;
    width: 100%;
    height: 40px;
    border: solid #a68d8d;
    display: flex; /* Agregado */
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
    font-size: 2em !important;
}


 .div1,.div2,.div4,.divprincipios, .div5{
    display: none;

}
.video1,.video2, .video4, .videoprincipios, .video5{
    display: none;
}
.div1cel, .div2cel, .div3cel, .div4cel{
    display:flex;
    overflow: hidden; /* Oculta cualquier desbordamiento */
}
.video1cel, .video2cel{
    top: 50%;
    left: 50%;
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: cover;
    z-index: 1;
    display: flex;
}
.video3cel,.video4cel{
    position: relative;
    top: 50%;
    left: 50%;
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: cover;
    z-index: 1;
    transform: translate(-50%);
    display: flex;
}
/* div 3 cel */
.content-wrapper {
    display: flex;
    position: absolute;
    z-index: 2; /* Para que el contenido esté encima del video */
    width: 95%;
    height: 20%;
    align-self: flex-end;
    flex-direction: row;
    justify-content: center;
    margin-left: 1em;
   
}
.content-left {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: left;
    margin-left: 1vh;
    
}
.content-right {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: left;
   
}

.content-left p, .content-right p {
    font-size: 3vh !important;
}
.instagram{
    font-size: 3vh!important;
}
.tel{
    font-size: 3vh!important ;
}

/* div 4 cel */
.puntosde {
    position: absolute;
    display: flex;
    justify-content:space-between;
    width: 90%;
    height: 45%; /* Establece la altura de 400px */
    z-index: 3; /* Coloca el contenido sobre el video */
    align-self: flex-end;
    margin-left: 1vh;
}

.izquierda, .centro {
    width: 50%;
    text-align:left;
    height: 100%; /* Asegura que los divs internos ocupen el 100% de la altura de puntosde */
}

.izquierda p, .centro p {
    font-size: 2.5vh; 
}
.nombre1{
    font-weight: bold;
    color: #546960;
}
.nombre1 a i {
    font-size: 2vh; /* Cambia este valor según sea necesario */
    margin-right: 5px; /* Espacio a la derecha del ícono */
}
    
}
@media (max-width: 768px){

/* Header */
header {
    background: white; /* Cambia al color primario que quieras usar */
    width: 100%;
    height: 10%;
    align-items: center;
    border:solid #a68d8d;
}
header .container {
    display: flex;
    justify-content:center;
    align-items: center;
    height: 100%;
    width: 100%;
    
}
header .logo{
   display: none;
    
}
header nav ul {
    list-style: none;
    display: flex;
    align-items: center;
    width: auto;
   
   
}
header nav ul li {
    align-items: center!important;
    padding: 10px!important;
    margin-right: 5px!important;
    border-radius: 5px!important;
    background-color: white!important;
    font-size: 1em!important;
    width: auto!important;
    
}

.nav-bar ul li a {
    text-decoration: none!important;
    color: #546960!important;
    font-weight: bold!important;
    padding: 10px 20px!important;
    transition: background-color 0.3s ease!important;
    font-size: 1em !important;
    font-family: Unna-Regular!important;

}
header nav ul li :last-child {
    margin-right: 0; /* Elimina el margen derecho del último elemento */
}

.navegador{
    width: 100%;
   
}
/* Footer */
footer {
    background-color: white;
    color:#a68d8d;
    font-weight: bold;
    text-align: center;
    width: 100%;
    height: 40px;
    border: solid #a68d8d;
    display: flex; /* Agregado */
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
    font-size: 1em !important;
}
/* div 3 cel */
.content-wrapper {
    display: flex;
    position: absolute;
    z-index: 2; /* Para que el contenido esté encima del video */
    width: 95%;
    height: 10%;
    align-self: flex-end;
    flex-direction: row;
    justify-content: center;
    margin-left: 1em;
   
}
.content-left {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: left;
    
}
.content-right {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: left;
   
}

.content-left p, .content-right p {
    font-size: 2vh !important;
}
.instagram{
    font-size: 2.5vh!important;
}
.tel{
    font-size: 2.5vh!important ;
}

/* div 4 cel */
.puntosde {
    position: absolute;
    display: flex;
    justify-content:space-between;
    width: 90%;
    height: 30%; /* Establece la altura de 400px */
    z-index: 3; /* Coloca el contenido sobre el video */
    align-self: flex-end;
    
}

.izquierda, .centro {
    width: 50%;
    text-align:left;
    height: 100%; /* Asegura que los divs internos ocupen el 100% de la altura de puntosde */

}

.izquierda p, .centro p {
    font-size: 1.7vh; 
    margin-left: 0.5em;
}
.nombre1{
    font-weight: bold;
    color: #546960;
}
.nombre1 a i {
    font-size: 2vh; /* Cambia este valor según sea necesario */
    margin-right: 5px; /* Espacio a la derecha del ícono */
}
}