/* Fonts */
/*
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300&display=swap');
@import url('https://fonts.googleapis.com/css?family=Reenie+Beanie&display=swap');
NUEVA FONT CADENA CONEXIÓN EN LOS html
*/

/* Basic */

body {
	background-color: #000; /* #e8eac2 amarillo claro mío*/ /* #ebeae9; gris muy claro */ /* cc9b58 naranja de logo MOA */ /* 999693 gris bueno para texto */
	color: #ffffff; /* texto 999693 gris bueno para texto */
}

html {
	font-family: 'Boldonse', serif;
}

.btn {
	border-radius: 0;
}

a:link,
a:hover,
a:visited {
	text-decoration: none;
	color: #e8eac2;
}

a:link .white,
a:hover .white,
a:visited .white {
	text-decoration: none;
	color: #fff;
}

.bold {
	font-weight: bold;
}

h1 {
	font-size: 2.2rem; /* 2.5 */ 
	margin-left: 10px;
	font-weight: 400;
}

h2 {
	line-height: 110%;
	font-size: 1.7rem; /* 2.2 */ 
	text-transform: uppercase; /* uppercase */
	font-weight: 400; /* 700 */ /* Boldonse solo tiene 400 */
	margin-left: 10px;
}

p {
	font-size: 1.3rem; /* 1.5 */ 
	margin-left: 10px;
}

.min-100 {
	min-height: 100%;
}

em {
  font-family: 'Boldonse', serif;
  font-style: italic; /* ¡Ojo! Esto podría distorsionar la fuente */
}
/*
.cursive {
	font-family: 'Reenie Beanie', cursive;
	font-weight: bold;
	font-size: 1.5rem;
}

.descripcion {
	font-family: 'Reenie Beanie', cursive;
	/* font-weight: bold; */
	font-size: 1rem;
}
*/
/* iconos rrss mios*/
.rrss-icon {
  width: 20%; /* O el tamaño que prefieras */
  height: auto;
}

/* Spacing */

.no-gutter {
	margin-right: 0;
	margin-left: 0;
	padding-right: 0;
	padding-left: 0;
}


/* Navbar */

.navigation {
	padding-top: 1rem;
}

.navigation.container-fluid {
	position: absolute;
}

.navbar {
	width: 100%;
	z-index: 99;
	top: 15px;
	padding: 0;
}

.navbar-brand {
	padding-left: 0px;
}

.navbar-brand:link,
.navbar-brand:hover,
.navbar-brand:visited {
	text-decoration: none;
	color: white;
}

.container a {
	/* display: inline-block; */ /* esto es una línea negra creciente con animación que aparece en la base de la foto que tiene un enlace. Su problema es que deja un pequeño espacio que estropea la unión con la ssgte foto */ /* MÁS en línea 150 : .container a:active:after {
	width: 50%; ha de ponerse a 0 */
	position: relative;
	text-align: center;
	color: #e8eac2; /* 000 */
	text-decoration: none;
	font-size: 20px;
	overflow: hidden;
	top: 5px;
}

.container a:after {
	content: '';
	position: absolute;
	background: #000;
	height: 2px;
	width: 0%;
	transform: translateX(-50%);
	left: 50%;
	bottom: 0;
	transition: .35s ease;
}

.container a:hover:after,
.container a:focus:after,
.container a:active:after {
	width: 0%; /* 100% */ /* explicación línea 125 .container a */
}

.button_container {
	position: absolute;
	top: 15px;
	right: 0px;
	height: 27px;
	width: 27px;
	cursor: pointer;
	z-index: 100;
	transition: opacity .25s ease;
}

.button_container.active {
	position: fixed;
	top: 46px;
	right: 8.8rem;
}

@media (max-width: 767px) {
	h1 {
		font-size: 2.5rem;
	}
	.button_container.active {
		right: 15px;
	}
}

.button_container.active .top {
	transform: translateY(9px) translateX(0) rotate(45deg);
	background: #FFF;
}

.button_container.active .middle {
	opacity: 0;
	background: #FFF;
}

.button_container.active .bottom {
	transform: translateY(-7px) translateX(0) rotate(-45deg);
	background: #FFF;
}

.button_container span {
	background: #fff;
	border: none;
	height: 2px;
	width: 27px;
	position: absolute;
	transition: all .35s ease;
	cursor: pointer;
}

.button_container .black {
	background: #000;
}

.button_container span:nth-of-type(2) {
	top: 8.3px;
}

.button_container span:nth-of-type(3) {
	top: 16px;
}

.overlay {
	position: fixed;
	background: #000;
	z-index: 98;
	top: 0;
	left: 0;
	width: 100%;
	height: 0%;
	opacity: 0;
	visibility: hidden;
	transition: opacity .35s, visibility .35s, height .35s;
	overflow: hidden;
}

.overlay.open {
	opacity: 1;
	visibility: visible;
	height: 100%;
}

.overlay.open li {
	animation: fadeInRight .5s ease forwards;
	animation-delay: .35s;
}

.overlay.open li:nth-of-type(2) {
	animation-delay: .4s;
}

.overlay.open li:nth-of-type(3) {
	animation-delay: .45s;
}

.overlay.open li:nth-of-type(4) {
	animation-delay: .50s;
}

.overlay nav {
	position: relative;
	height: 70%;
	top: 50%;
	transform: translateY(-50%);
	font-size: 50px;
	font-family: 'Boldonse', cursive;
	font-weight: 400;
	text-align: center;
}

.overlay ul {
	list-style: none;
	padding: 0;
	margin: 0 auto;
	display: inline-block;
	position: relative;
	height: 100%;
}

.overlay ul li {
	display: block;
	height: 25%;
	height: calc(100% / 4);
	min-height: 50px;
	position: relative;
	opacity: 0;
}

.overlay ul li a {
	display: block;
	position: relative;
	color: #FFF;
	text-decoration: none;
	overflow: hidden;
	transition: all .2s ease-in-out;
}

.overlay ul li a:hover:after,
.overlay ul li a:focus:after,
.overlay ul li a:active:after {
	width: 100%;
}

.overlay ul li a:hover {
	transform: scale(1.5);
}

@keyframes fadeInRight {
	0% {
		opacity: 0;
		left: 20%;
	}
	100% {
		opacity: 1;
		left: 0;
	}
}


/* Headers */

.masthead {
	height: 100vh;
	min-height: 500px;
	background-image: url("../images/photo-1.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	top: 0;
	position: relative;
	width: 100%;
	line-height: 100%;
	color: #fff;
	font-size: 1.5rem;
}

.masthead-2 {
	height: 100vh;
	min-height: 500px;
	background-image: url("../images/photo-9.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	top: 0;
	position: relative;
	width: 100%;
	line-height: 100%;
	color: #fff;
	font-size: 1.5rem;
}

.masthead-3 {
	height: 100vh;
	min-height: 500px;
	background-image: url("../images/photo-7.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	top: 0;
	position: relative;
	width: 100%;
	line-height: 100%;
	color: #fff;
	font-size: 1.5rem;
	text-align: center;
}

.masthead-4 {
	min-height: 500px;
	top: 0;
	position: relative;
	width: 100%;
	line-height: 100%;
}

.split-image-left {
	background-image: url("../images/photo-4.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	height: 100vh;
}

.split-image-right {
	background-image: url("../images/photo-3.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	height: 100vh;
}


/* Portfolio */

.portfolio-text {
	padding-top: 12rem;
	font-size: 1.5rem;
	line-height: 125%;
}

.bg-black {
	background-color: #000!important;
}

.card {
	border: 0;
	border-radius: 0;
}

.card-img,
.card-img-top {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

.card-body {
	padding: 0;
}

.card-columns .card {
	margin-bottom: 1.25rem;
}

@media (max-width: 991px) {
	.card-columns {
		column-count: 1;
	}
}

@media (min-width: 992px) {
	.card-columns {
		column-count: 2;
	}
}

@media (min-width: 1200px) {
	.card-columns {
		column-count: 2;
	}
}

.card-hover img {
	transition: filter .5s ease-in-out;
	-webkit-filter: grayscale(0%);
	/* Ch 23+, Saf 6.0+, BB 10.0+ */
	filter: grayscale(0%);
	/* FF 35+ */
}

.card-hover:hover img {
	-webkit-filter: grayscale(100%);
	/* Ch 23+, Saf 6.0+, BB 10.0+ */
	filter: grayscale(100%);
	/* FF 35+ */
}

.reveal p {
	line-height: 125%;
	font-size: 1.5rem;
	text-align: center;
}

.card-hover .reveal {
	visibility: hidden;
	opacity: 0;
	height: 0;
	padding: 0;
	position: absolute;
	top: 0;
	width: 100%;
	background-color: black;
	color: white;
}

.card-hover:hover .reveal {
	height: auto;
	visibility: visible;
	opacity: 0.5;
	transition: opacity 1s ease;
	position: absolute;
	top: 0;
	background-color: black;
	color: white;
}

@media (max-width: 767px) {
	.card-hover .reveal,
	.card-hover:hover .reveal {
		visibility: visible;
		opacity: 1;
		position: relative;
		width: 100%;
		background-color: #ebeae9; /* #ebeae9 amarillo claro mío */
		color: black;
	}
	.reveal p {
		line-height: 125%;
		font-size: 1.2rem;
		text-align: left;
		padding-top: 1rem;
	}
}


/* Story */

.story {
	font-size: 1.2em;
}


/* Products */

.products {
	font-size: 1.2em;
	line-height: 125%;
	padding-top: 5rem; /* 5rem */
}
/* padding-top: 1rem en CSS define el espacio entre el borde superior de un elemento y su contenido. 1rem es una unidad de medida que representa el tamaño de la fuente del elemento padre.
En otras palabras, esta propiedad crea un margen de 1 rem (el tamaño de la fuente del elemento padre) en la parte superior del elemento.  */
.products-2 {
	padding-top: 2rem; /* 10rem */
	padding-bottom: 1rem; /* 6rem */
	font-size: 1.5em;
	line-height: 125%;
}


/* Additional */

.additional img {
	margin-right: 0;
	margin-left: 0;
	padding-right: 0;
	padding-left: 0;
}

.additional .col-xl-4 {
	padding-right: 0px;
	padding-left: 0px;
	max-width: 100%;
	margin-right: 0;
	margin-left: 0;
}

.additional .col-xl-4a {
	padding-right: 0px;
	padding-left: 0px;
	max-width: 100%;
	margin-right: 0;
	margin-left: 0;
}

.container.additional {
	min-width: 100%;
}


/* Expositions */

.expositions {
	font-size: 1.2em;
	padding-top: 5rem;
	padding-bottom: 5rem;
}


/* Spots */

.spot {
	height: 100vh;
	min-height: 500px;
	background-image: url("../images/photo-12.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	top: 0;
	position: relative;
	width: 100%;
	font-size: 2em;
	color: #fff;
}

.spot-2 {
	height: 100vh;
	min-height: 500px;
	background-image: url("../images/photo-2.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	top: 0;
	position: relative;
	width: 100%;
	font-size: 2em;
	color: #fff;
}

.spot-3 {
	height: 100vh;
	min-height: 500px;
	background-image: url("../images/photo-8.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	top: 0;
	position: relative;
	width: 100%;
	font-size: 2em;
	color: #fff;
}

.spot-4 {
	height: 100vh;
	min-height: 500px;
	background-image: url("../images/photo-1.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	top: 0;
	position: relative;
	width: 100%;
	font-size: 2em;
	color: #fff;
}


/* Stories */

.stories {
	font-size: 1.2em;
	text-align: center;
	padding-top: 10rem;
	padding-bottom: 10rem;
}

.stories-2-title {
	font-size: 1.5rem;
	font-family: 'Boldonse', cursive;
}

.stories-2 {
	font-size: 1.5em;
	background-color: #000;
	color: #fff;
	padding-top: 15rem; /* 15rem */
	padding-bottom: 10rem;
}


/* Events */

.events {
	font-size: 1.2em;
	background-color: #000;
	color: #fff;
}

.events h2 {
	font-size: 1.2em;
	text-transform: uppercase;
}


/* Contact */

.contact {
	font-size: 1.5em;
	background-color: #000;
	color: #fff;
	padding-top: 15rem;
	padding-bottom: 10rem;
}


/* Contact Form */

.contact-form {
	font-size: 1.2em;
	background-color: #000;
	color: #fff;
	padding-bottom: 11rem;
}

.contact-form .btn-primary {
	color: #000;
	background-color: #fff;
	border-color: #fff;
}

.contact-form .form-control {
	color: #fff;
	background-color: transparent;
	border: 2px solid;
	border-radius: 0;
}

.form-control::-webkit-input-placeholder {
	color: #fff;
	opacity: 0.6;
}

.form-control {
	padding: 1.5rem .75rem;
}

.contact-form .btn {
	padding: 0.8rem 4rem;
}


/* Footer */

.footer {
	background-color: #e8eac2; /* #e8eac2 amarillo claro mío*/ /* #ebeae9; gris muy claro */ /* cc9b58 naranja de logo MOA */ /* 999693 gris bueno para texto */
	font-size: 1.2em; /* 1.2 */
	color: #000;
	padding-top: 1rem; /* 7rem */
	padding-bottom: 1rem; /* 7rem */
}

@media (max-width: 767px) {
	.footer {
		font-size: 1.2em; /* 1.4 */
		line-height: 180%;
	}
}

.footer a:link,
.footer a:hover,
.footer a:visited {
	text-decoration: none;
	color: #000;
}

/* Aplicar Boldonse a todo el sitio con alta especificidad */
html body,
html body p,
html body div,
html body span,
html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6,
html body a,
html body button,
html body input,
html body select,
html body textarea {
    font-family: 'Boldonse', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* IAM 20250420 SOL */
/* Aplicar Boldonse a todo el sitio con alta especificidad */
html body,
html body p,
html body div,
html body span,
html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6,
html body a,
html body button,
html body input,
html body select,
html body textarea {
    font-family: 'Boldonse', serif !important;
}

/* Reglas específicas para dispositivos móviles */
@media only screen and (max-width: 767px) {
    body,
    p,
    div,
    span,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    a,
    button,
    input,
    select,
    textarea {
        font-family: 'Boldonse', serif !important;
    }
}