/* Css Document */
/* Generales */
body {
font-size: 20px;
font-family: "Noto", serif;
color: #24262f;
margin: 0;
padding: 0;
line-height: 30px;
font-style: normal; 
}

h2 {
font-size: 33px;
color: #b29a60;
font-weight: 600; 
font-family: 'Faustina', serif; font-style: italic; 
}

h3 {
font-size: 15px;
color: #000;
font-family: 'Encode Sans', sans-serif;
text-transform: uppercase;
margin-bottom: 0;
}

h4 {
font-size: 50px;
color: #332a14;
font-family: 'Faustina', serif; font-style: italic;
font-weight: 600;
}

p  {
font-family: 'Encode Sans', sans-serif; 
font-size: 14px; 
color: #21201f;
}

.container-2 ul  {
font-family: 'Faustina', serif; font-style: italic;
font-size: 16px; 
color: #21201f;
}


a  {
font-family: 'Encode Sans', sans-serif; font-size: 14px; color: #000; font-weight: 600;
}

.container-2 {
max-width: 960px;    
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}

.h2-big {
	font-size: 4rem;
	color: #412714;
}

.nav {
	border-bottom: 2px solid #b29a60;
}

	.nav-link {
	font-family: "Fira Sans", sans-serif;
	font-size: 18px;
	padding: .2rem 2rem;
	color: #b29a60;
	font-weight: 400;
	}

	.nav-link:hover {
	color: #53421a;
	}

	.EN {
		text-indent: -9000px;
		display: block;
		z-index: 9999;
		background: url(../images/en.png) 0 0 no-repeat;
		width: 33px;
		height: 33px;
	}
	.ES {
		text-indent: -9000px;
		display: block;
		z-index: 9999;
		background: url(../images/es.png) 0 0 no-repeat;
		width: 33px;
		height: 33px;
	}

	.nav-interna .nav-link{
		padding: 2rem 2rem;
	}

	.nav-interna .EN{
		background: url(../images/en.png) 0 30px no-repeat;
		}
	
	.nav-interna .ES {
		background: url(../images/es.png) 0 30px no-repeat;
		}

video {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    min-width: 100%; 
    min-height: 100%;
}

.intro-banner  {
	position: absolute;
	}

	.intro-banner p, .intro-banner a {
		position: absolute;
		color: white;
		z-index: 40;
		width: 30rem;
		text-shadow: 1px 2px 5px #000;
		font-size: 1.2rem;
	}

	.intro-banner .logo {
		top: 180px;
		left: 40px;
	}

	.intro-banner p {
		top: 340px;
		left: 70px;
	}

	.intro-banner .btn-video {
		top: 450px;
		text-transform: uppercase;
		left: 70px;
		}

	.intro-banner i {
		font-size: 2rem;
	}

	.intro-banner .btn-video:hover {
		text-decoration: none;
		color: #ecc54f;
		}

#intro-video{
	width: 1110px;
}

.galeria {
margin-top: 200px !important;
}

	.galeria h4 {
	font-size: 8rem;
	color: #332a14;
	font-family: 'Faustina', serif; font-style: italic;
	font-weight: 600;
}

.cafe {
	background-color: #332a14;
	}

	.cafe p{
	margin: 0;
	color: #f5efe0;
	}

.beige  {
	background-color: #fff7f0;
}

.modal-lg {
    max-width: 900px;
}

.modal-backdrop {
  background-color: transparent;
}

.modal-backdrop-transparent {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: transparent;
  opacity: 0;
  width: 100%;
  height: 100%;
  z-index: -1000;
}
.modal-backdrop-orange {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #f8edd7;
  opacity: 0.9;
  width: 100%;
  height: 100%;
  z-index: 1040;
}

.modal-transition {
  transition: all 0.4s ease;
}

.ubicacion h2{
	font-size: 8rem;
    color: #332a14;
    font-family: 'Faustina', serif;
    font-style: italic;
    font-weight: 600;
}

.paralax {
    position: relative;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.bg-paralax-1 {
    background-image: url(../images/chiva.jpg);
    min-height: 370px;
}

table {
	font-family: 'Encode Sans', sans-serif;
    font-size: 1.1rem;
}

.btn-red{
	background-color: #720F11;
	padding: 3px 10px;
	color: #fff;
	border-radius: 20px;
}
	.btn-red:hover{
		text-decoration: none;
		background-color: #DBA906;
		color: #412714;
	}

@media only screen and (max-width: 768px) {
	#intro-video {
		width: 100%;
	}
	.intro-banner p, .intro-banner a {
		position: absolute;
		color: white;
		z-index: 40;
		width: 11rem;
		text-shadow: 1px 2px 5px #000;
		font-size: 0.6rem;
    	line-height: 0.9rem;
	}

	.intro-banner .logo {
		top: 10px;
		left: 20px;
	}

	.intro-banner p {
		top: 80px;
		left: 20px;
	}

	.intro-banner .btn-video {
		top: 143px;
		text-transform: uppercase;
		left: 20px;
		}

	.intro-banner i {
		font-size: 1rem;
	}
	.compra {
		padding-bottom: 20px;
		border-bottom: 1px solid #333;
	}
	
	.conocenos {
		padding-top: 20px;
	}
	.galeria {
		margin-top: 20px !important;
	}
	.ubicacion h2{
		font-size: 5rem;
	}
	.homenaje {
		margin-bottom: 0 !important;
		padding-bottom: 10px !important;
	}
	.homenaje h2 {
		padding-top: 10px !important;
	}
}

/* Style PQRS */


/* Style Intro Video */
.intro-video {
  position: relative; /* Mantener relativo para posicionar elementos dentro */
}

.svg-container {
  position: absolute; /* Posicionar encima del video */
  top: 10px; /* Margen superior */
  right: 10px; /* Margen derecho */
  background-color: white; /* Fondo blanco detrás del SVG */
  padding: 5px; /* Espaciado interno */
  border-radius: 4px; /* Esquinas redondeadas opcionales */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Sombra para contraste */
}

.svg-container svg {
  display: block;
  width: 50px; /* Ancho del SVG */
  height: auto; /* Alto del SVG */
}

@media (max-width: 480px) { /* Pantallas móviles pequeñas */
  .svg-container img {
    width: 25px; /* Aún más pequeño para pantallas pequeñas */
  }
}