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

	video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;   /* 100% del ancho de la ventana */
  height: 140%;  /* 100% del alto de la ventana */
  object-fit: cover; /* Se pone el tamaño sin q se deforme */
  z-index: -1;    /* Lo pone de fondo atras */
}
#vid {/*Para poner el video de fondo*/
  position: absolute;   
  top: 0;               /*Donde empieza mi video dese arriba y a la izquierda*/
  left: 0;              
  width: 100%;         
  height: auto;         
  object-fit: cover;    /*Cubre todo sim q se deforme*/
  z-index: -1;        /*Para q se valla atras de mi menu*/
}

    

header {
    background-color: rgba(0, 0, 0, 0.6); /* Negro con transparencia */
    padding: 10px 0;
    color: white;
    text-align: center;
    font-size: 36px;
    font-weight: bold;
    position: fixed;   /* Fijo arriba */
    top: 0;            /* Pegado al borde superior */
    left: 0;
    width: 100%;
    z-index: 1000;     /* Encima del nav */
}

/* Menú fijo debajo del header */
nav {
    background-color: rgba(0, 0, 0, 0.6); /* Negro con transparencia */
    display: flex;
    justify-content: center;
    gap: 15px;
    padding: 10px 0;
    flex-wrap: wrap;
    position: fixed;   /* También fijo */
    top: 60px;         /* Se coloca justo debajo del header (ajusta según la altura del header) */
    left: 0;
    width: 100%;
    z-index: 999;
}
  .navInicio{/* Menú fijo arriba con fondo negro semitransparente */
    background-color: rgba(0, 0, 0, 0.6); /* Negro con transparencia */
    display: flex;
    justify-content: center;
    gap: 15px;
    padding: 10px 0;
    flex-wrap: wrap;
    position: fixed;
    top: 0;          /* Pegado al borde superior */
    left: 0;
    width: 100%;
    z-index: 999;
}

/*Letras del menuu*/
    .navInicio a {
	    font-family:"MV Boli";
        color: white;
        text-decoration: none;
        font-size: 18px;
        font-weight: bold;
        padding: 8px 12px;
        border-radius: 10px;
        transition: background-color 0.3s ease;
    }

    .navInicio a:hover {
        background-color:#BCCCAC;
        color: #333;
    }

/*La rayita donde lleva eso de la generación*/
footer {
    background-color: rgba(0, 0, 0, 0.6); /* Negro semitransparente */
    color: white;
    text-align: center;
    padding: 15px 10px;
    font-size: 14px;
    position: fixed;   /* Se fija abajo */
    bottom: 0;         /* Pegado al borde inferior */
    left: 0;
    width: 100%;
    z-index: 1000;
	font-family:"MV Boli";
}
footer p {
        margin: 0;
    }

/*Hace q las letras tengan un margen*/
.main-container {
        position: relative; 
        display: flex;
        justify-content: center; /* Centra contenido horizontalmente */
        align-items: center; /* Centra contenido verticalmente */
        margin: 30px auto;
        width: 80%;
        max-width: 1200px; /* Ancho maximo para estetica */
        height: 600px; /* Altura fija para área de contenido */
        background-color: white;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        border-radius: 15px;
        overflow: hidden; /* Asegura que los elementos no se desborden */
    }
/* Ajusta el body para que el contenido no quede tapado */
body {
    margin: 0;
    padding-top: 60px;   /* espacio para el menú */
    padding-bottom: 60px; /* espacio para el footer */
}



/*Letras del menuu*/
    nav a {
	    font-family:"MV Boli";
        color: white;
        text-decoration: none;
        font-size: 18px;
        font-weight: bold;
        padding: 8px 12px;
        border-radius: 10px;
        transition: background-color 0.3s ease;
    }

    nav a:hover {
        background-color:#BCCCAC;
        color: #333;
    }

    .main-container {
        position: relative; 
        display: flex;
        justify-content: center; /* Centra contenido horizontalmente */
        align-items: center; /* Centra contenido verticalmente */
        margin: 30px auto;
        width: 80%;
        max-width: 1200px; /* Ancho maximo para estetica */
        height: 600px; /* Altura fija para área de contenido */
        background-color: white;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        border-radius: 15px;
        overflow: hidden; /* Asegura que los elementos no se desborden */
    }

    .background-image {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover; /* Cubre todo el contenedor, puede recortar partes */
        border-radius: 15px; /* Coincide con el borde del contenedor */
        opacity: 0.7; /* Hacerla ligeramente transparente */
        z-index: 1; /* Ponerla detrás del contenido principal */
    }

    }

    footer p {
        margin: 0;
    }

    /* Ajustes responsivos */
    @media (max-width: 768px) {
        .main-container {
            height: 400px; /* Ajusta la altura en pantallas más pequeñas */
        }
        .video-container {
            max-width: 85%; /* Más grande en pantallas pequeñas */
        }
    }

    @media (max-width: 480px) {
        .main-container {
            height: 300px; /* Ajusta más la altura para pantallas pequeñas */
        }
        .video-container {
            max-width: 90%;
        }
    }
	
	/*HISTORIA*//*HISTORIA*//*HISTORIA*//*HISTORIA*//*HISTORIA*//*HISTORIA*//*HISTORIA*//*HISTORIA*//*HISTORIA*//*HISTORIA*/
.historia {
  position: relative;   /*Para q se ponga ariba de mi video mi primer parrafo*/
  z-index: 1;           
  color: black;         
  max-width: 800px;     /*Ancho del texto*/
  margin: 120px auto 40px auto; /*Espacio para q se separe de mi nenu*/
  font-family:"MV Boli";
  line-height: 1.6;     /*El espacio entre mi texo*/
  padding: 20px;       /*Espacio a los lados de mi texto*/
  background: none;     
}


.hist-left, .hist-right {
  display: flex;       /*Pone mi imagen y texto juntos osea alado*/
  align-items: center;  
  margin: 40px auto;    /*Espacio entre mis bloques*/
  max-width: 1000px;    /*Ancho del bloque*/
  gap: 30px;            /*Espacio entre imagen y texto*/
}

/*Imagen a la izquierday mi texto a la derecha*/
.hist-left {
  flex-direction: row;
}

/*Imagen a la derechat mi texto a la izquierda*/
.hist-right {
  flex-direction: row-reverse;
}


.hist-img {/*Diseño de mis iamgenes*/
  width: 300px;         
  border-radius: 10px;  /*Esquinas redondeadas*/
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);/*Sombrita*/
}



/*TRADICIONES*//*TRADICIONES*//*TRADICIONES*//*TRADICIONES*//*TRADICIONES*//*TRADICIONES*//*TRADICIONES*//*TRADICIONES*/
.Trad {
  position: relative;   /*Para q se ponga ariba de mi video mi primer parrafo*/
  z-index: 1;           
  color: black;         
  max-width: 1000px;     /*Ancho del texto*/
  margin: 120px auto 40px auto; /*Espacio para q se separe de mi nenu*/
  font-family:"MV Boli";
  line-height: 1.6;     /*El espacio entre mi texo*/
  padding: 20px;       /*Espacio a los lados de mi texto*/
  background: none;     
}
.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}

.card {
  background-color: rgba(0,0,0,0.05);
  border-radius: 15px;
  padding: 15px;
  width: 300px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.card img {
  width: 100%;
  height: 200px; /* Altura fija para uniformidad */
  object-fit: cover; /* Recorta la imagen manteniendo proporción */
  border-radius: 15px;
}

.card h3 {
  font-family: 'Bodoni MT Black';
  font-size: 18px;
  margin-top: 10px;
  font-weight: bold;
}
/*LUGARES TURISTICOS*//*LUGARES TURISTICOS*//*LUGARES TURISTICOS*//*LUGARES TURISTICOS*//*LUGARES TURISTICOS*/
.galler {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}

.card {
  background-color: rgba(0,0,0,0.05);
  border-radius: 15px;
  padding: 15px;
  width: 300px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.card img {
  width: 100%;
  height: 200px; /* Altura fija para uniformidad */
  object-fit: cover; /* Recorta la imagen manteniendo proporción */
  border-radius: 15px;
}

.card h3 {
  font-family: 'Bodoni MT Black';
  font-size: 18px;
  margin-top: 10px;
  font-weight: bold;
}
.galler .card p:first-of-type {
    font-family: "Georgia", serif;   /* Fuente elegante para títulos */
    font-size: 18px;
    font-weight: bold;               /* Negrita */
    color:#D4F4E4;
    margin-top: 8px;
}

.galler .card p.description {
    font-family:"MV Boli"; /* Fuente diferente para descripciones */
    font-size: 14px;
    color:#FFF;
    text-align: justify;
    margin-top: 5px;
}



/*OFICIOS*//*OFICIOS*//*OFICIOS*//*OFICIOS*//*OFICIOS*//*OFICIOS*//*OFICIOS*//*OFICIOS*//*OFICIOS*//*OFICIOS*//*OFICIOS*/
.oficio {
  position: relative;   /*Para q se ponga ariba de mi video mi primer parrafo*/
  z-index: 1;           
  color: black;         
  max-width: 1000px;     /*Ancho del texto*/
  margin: 120px auto 40px auto; /*Espacio para q se separe de mi nenu*/
  font-family:"MV Boli";
  line-height: 1.6;     /*El espacio entre mi texo*/
  padding: 20px;       /*Espacio a los lados de mi texto*/
  background: none;     
}



/*INFRAESTRUCTURA*//*OFICIOS*//*INFRAESTRUCTURA*//*OFICIOS*//*INFRAESTRUCTURA*//*OFICIOS*//*INFRAESTRUCTURA*//*OFICIOS*/
/* Contenedor general de las tarjetas */
.galleryy {
  display: flex;
  flex-wrap: wrap;          /* Permite que las cajas salten a la siguiente línea si no caben */
  justify-content: center;  /* Centra las cajas horizontalmente */
  gap: 20px;                /* Espacio entre cajas */
  margin-top: 30px;
}

/* Cada tarjeta individual */
.card {
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 15px;
  width: 250px;
  padding: 15px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  transition: transform 0.3s;
}

.card:hover {
  transform: scale(1.05);
}

/* Imagen dentro de la tarjeta */
.card img {
  width: 100%;
  border-radius: 10px;
}

/* Título */
.card h3 {
  color: #8CCCF4;
  font-family: "Georgia", serif;
  margin-top: 10px;
}

/* Texto dentro de la tarjeta */
.card p {
  font-family:"MV Boli";; /* Letra diferente */
  font-size: 14px;
  color: #FFF;
  text-align: justify;
  margin-top: 8px;
}



/*UBICACION*/

.ubi{
    position: relative;
    z-index: 1;
    margin-top: 150px;
    text-align: center;
    font-family:"MV Boli";
}

.mini-mapa{
    width: 500px;
    height: 300px;
    margin: auto;
    border-radius: 25px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0,0,0,0.6);
    transition: transform 0.3s ease;
}

.mini-mapa:hover{
    transform: scale(1.03);
}

.mini-mapa iframe{
    width: 100%;
    height: 100%;
    border: none;
}

/*CREDITOS*/

.creditos{
    position: relative;
    z-index: 1;
    margin-top: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family:"MV Boli";
}

.creditos-box{
    width: 400px;
    padding: 10px;
    background-color: rgba(0,0,0,0.45);
    border-radius: 30px;
    text-align: center;
    color: white;
    box-shadow: 0 8px 25px rgba(0,0,0,0.6);
}

.creditos-box h2{
    margin-top: 25px;
    font-size: 28px;
    color: #F5DEB3;
}

.creditos-box p{
    font-size: 22px;
    line-height: 1.8;
}


/*CREDITOS*/

.creditos{
    position: relative;
    z-index: 1;
    margin-top: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family:"MV Boli";
}

.creditos-box{
    width: 400px;
    padding: 10px;
    background-color: rgba(0,0,0,0.45);
    border-radius: 30px;
    text-align: center;
    color: white;
    box-shadow: 0 8px 25px rgba(0,0,0,0.6);
}

.creditos-box h2{
    margin-top: 25px;
    font-size: 28px;
    color: #F5DEB3;
}

.creditos-box p{
    font-size: 22px;
    line-height: 1.8;
}


    
.contador{
    width: 200px;
    margin: 20px auto;
    text-align: center;
    background: #e3f2fd;
    padding: 10px;
    border-radius: 10px;
    font-weight: bold;
}





</style>
</head>

<body>