/***************/
/*** Main Classes */
/***************/
:root {
	--color-red: #d5202d;
	--color-gold: #9c7c58;
	--color-purple-1: #191826;
	--color-purple-2: #212030;
	--color-white: #f1f1f0;
	--color-black: #0e0d12;
}

/* Text Colors */
.color-red {
	color: var(--color-red);
}
.color-gold {
	color: var(--color-gold);
}
.color-purple-1 {
	color: var(--color-purple-1);
}
.color-purple-2 {
	color: var(--color-purple-2);
}
.color-white {
	color: var(--color-white);
}
.color-black {
	color: var(--color-black);
}

/* Background Colors */
.bg-red {
	background-color: var(--color-red);
}
.bg-gold {
	background-color: var(--color-gold);
}
.bg-purple-1 {
	background-color: var(--color-purple-1);
}
.bg-purple-2 {
	background-color: var(--color-purple-2);
}
.bg-white {
	background-color: var(--color-white);
}
.bg-black {
	background-color: var(--color-black);
}

* {
	box-sizing: border-box;
}

@font-face {
	font-family: "Neutra2Cond Titling";
	src: url("Neutra2Cond-Titling.otf") format("opentype");
}

@font-face {
	font-family: "Neutra2Display Light";
	src: url("Neutra2Display-Light.otf") format("opentype");
	font-weight: 300;
}

@font-face {
	font-family: "Neutra2Display Medium";
	src: url("Neutra2Display-Medium.otf") format("opentype");
	font-weight: 500;
}

@font-face {
	font-family: "Neutra2Display Titling";
	src: url("Neutra2Display-Titling.otf") format("opentype");
}

@font-face {
	font-family: "Neutraface 2 Display Bold";
	src: url("Neutraface 2 Display Bold.ttf") format("truetype");
	font-weight: bold;
}

@font-face {
	font-family: "Neutraface 2 Display Medium";
	src: url("Neutraface 2 Display Medium.ttf") format("truetype");
	font-weight: 500;
}

@font-face {
	font-family: "NeutrafaceText Light";
	src: url("NeutrafaceText-Light.otf") format("opentype");
	font-weight: 300;
}

.font-neutra2cond-titling {
	font-family: "Neutra2Cond Titling", sans-serif;
}

.font-neutra2display-light {
	font-family: "Neutra2Display Light", sans-serif;
}

.font-neutra2display-medium {
	font-family: "Neutra2Display Medium", sans-serif;
}

.font-neutra2display-titling {
	font-family: "Neutra2Display Titling", sans-serif;
}

.font-neutraface2-display-bold {
	font-family: "Neutraface 2 Display Bold", sans-serif;
}

.font-neutraface2-display-medium {
	font-family: "Neutraface 2 Display Medium", sans-serif;
}

.font-neutraface-text-light {
	font-family: "NeutrafaceText Light", sans-serif;
}

.golden-text {
	color: var(--color-gold-1);
}
body {
	font-family: "Jost";
}
html,
body {
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: "Neutra2Display Medium", sans-serif;
	background-color: var(--color-black-);
}
html {
	font-size: 16px;
}
/* medium devices */
@media (max-width: 768px) {
	html {
		font-size: 14px;
	}
}
/* small devices */
@media (max-width: 576px) {
	html {
		font-size: 12px;
	}
}
/***************/
/*** Fonts */
/***************/
h1,
h2,
h3,
h4,
h5,
p,
small,
h1 i,
h2 i,
h3 i,
h4 i,
h5 i,
p i,
small i,
a,
span,
.display {
	color: var(--color-white);
	font-style: normal;
	font-weight: 500;
	text-transform: uppercase;
}

.modal p {
	color: var(--color-black);
	font-family: "Neutra2Display Medium", sans-serif;
	font-size: 1rem;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
	letter-spacing: 0.64px;
	text-transform: uppercase;
}
.modal h2 {
	color: #1e1e1e;
	font-family: "Neutra2Cond Titling", sans-serif;
	font-size: 2.5rem;
	font-style: normal;
	font-weight: 900;
	line-height: normal;
	letter-spacing: 1.6px;
}

footer * {
	text-transform: uppercase;
}
.display,
.display i {
	font-size: 106px;
	font-style: normal;
	font-weight: 900;
	line-height: 80%; /* 84.8px */
	letter-spacing: 0.265rem;
}
h1,
h1 i {
	font-size: 4rem;
	font-style: normal;
	font-weight: 900;
	line-height: 80%; /* 51.2px */
	letter-spacing: 0.16rem;
}
h2,
h2 i {
	font-size: 2.5rem;
	font-style: normal;
	font-weight: 900;
	line-height: normal;
	letter-spacing: 0.1rem;
}
h3,
h3 i {
	font-size: 1.625rem;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
	letter-spacing: 0.065rem;
	text-transform: uppercase;
}
h4,
h4 i {
	font-size: 1.25rem;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
	letter-spacing: 0.05rem;
	text-transform: uppercase;
}
h5,
h5 i {
	font-size: 1.25rem;
	line-height: 1.25rem;
}
p,
p i {
	font-size: 1rem;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
	letter-spacing: 0.04rem;
	text-transform: uppercase;
}
.p-small,
p-small i {
	font-size: 0.875rem;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
	letter-spacing: 0.035rem;
	text-transform: uppercase;
}

.p-header {
	color: var(--color-gold);
	text-align: center;
	font-family: "Neutraface 2 Display Bold", sans-serif;
	font-size: 1rem;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	text-transform: uppercase;
	padding: 0;
	margin: 0;
}

.p-form-title {
	color: var(--color-white);
	font-family: "Neutra2Display Medium", sans-serif;
	font-size: 1.25rem;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
	letter-spacing: 0.8px;
	text-transform: uppercase;
}

.under-form-title {
	color: var(--color-red);
	font-family: "Neutra2Cond Titling", sans-serif;
	font-size: 2.5rem;
	font-style: normal;
	font-weight: 900;
	line-height: normal;
	letter-spacing: 1.6px;
}
.under-form-p {
	color: var(--color-white);
	font-family: "Neutra2Display Medium", sans-serif;
	font-size: 1.625rem;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
	letter-spacing: 1.04px;
	text-transform: uppercase;
}

.lang-link {
	color: white;
	text-align: center;
	font-family: "Neutraface 2 Display Bold", sans-serif;
	font-size: 1rem;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	text-transform: uppercase;
	text-decoration: none;
	transition: color 0.3s ease;
}

.lang-link:hover {
	color: var(--color-red);
}

.lang-link.active {
	color: var(--color-gold);
}

.footer-url {
	color: var(--color-gold);
	text-align: center;
	font-family: "Neutraface 2 Display Bold", sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	text-decoration: none;
	text-transform: uppercase;
	transition: color 0.3s ease;
}

.footer-url:hover {
	color: var(--color-red);
}

.footer-terms {
	color: #454545;
	text-align: center;
	font-family: "Neutraface 2 Display Bold", sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	text-decoration: none;
	line-height: normal;
	text-transform: uppercase;
}

.footer-terms:hover {
	color: var(--color-red);
}

.hero-title-1 {
	text-align: center;
	font-size: 6.625rem;
	font-style: normal;
	font-weight: 900;
	line-height: 80%; /* 84.8px */
	letter-spacing: 4.24px;
}
.hero-title-2 {
	font-size: 4rem;
	font-style: normal;
	font-weight: 900;
	line-height: 80%;
	letter-spacing: 2.56px;
}
.hero-title-3 {
	text-align: center;
	font-size: 1.625rem;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
	letter-spacing: 1.04px;
	text-transform: uppercase;
}
.hero-title-3 .title-3-bold {
	font-size: 1.625rem;
	font-style: normal;
	font-weight: 900;
	line-height: normal;
	letter-spacing: 1.04px;
	text-transform: uppercase;
}
.hero-title-3 a {
	font-size: 1.625rem;
	font-style: normal;
	font-weight: 900;
	line-height: normal;
	letter-spacing: 1.04px;
	text-decoration-line: underline;
	text-decoration-style: solid;
	text-decoration-skip-ink: none;
	text-decoration-thickness: auto;
	text-underline-offset: auto;
	text-underline-position: from-font;
	text-transform: uppercase;
}
.age-title-1 {
	text-align: center;
	font-size: 4.6375rem; /* 70% of 6.625rem */
	font-style: normal;
	font-weight: 900;
	line-height: 80%;
	letter-spacing: 4.24px;
}

.age-title-2 {
	font-size: 2.8rem; /* 70% of 4rem */
	font-style: normal;
	font-weight: 900;
	line-height: 80%;
	letter-spacing: 2.56px;
}

.age-title-3 {
	text-align: center;
	font-size: 1.1375rem; /* 70% of 1.625rem */
	font-style: normal;
	font-weight: 600;
	line-height: normal;
	letter-spacing: 1.04px;
	text-transform: uppercase;
}

.age-title-3 .title-3-bold {
	font-size: 1.1375rem; /* 70% of 1.625rem */
	font-style: normal;
	font-weight: 900;
	line-height: normal;
	letter-spacing: 1.04px;
	text-transform: uppercase;
}

.age-title-3 a {
	font-size: 1.1375rem; /* 70% of 1.625rem */
	font-style: normal;
	font-weight: 900;
	line-height: normal;
	letter-spacing: 1.04px;
	text-decoration-line: underline;
	text-decoration-style: solid;
	text-decoration-skip-ink: none;
	text-decoration-thickness: auto;
	text-underline-offset: auto;
	text-underline-position: from-font;
	text-transform: uppercase;
}

a {
	font-size: 1rem;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
	letter-spacing: 0.04rem;
	text-decoration-line: underline;
	text-decoration-style: solid;
	text-decoration-skip-ink: none;
	text-decoration-thickness: auto;
	text-underline-offset: auto;
	text-underline-position: from-font;
	text-transform: uppercase;
	color: var(--color-white);
	cursor: pointer;
	-webkit-transition: color 0.3s linear;
	-moz-transition: color 0.3s linear;
	-o-transition: color 0.3s linear;
	-ms-transition: color 0.3s linear;
	transition: color 0.3s linear;
}

a:hover,
form a:hover {
	color: var(--color-red);
}

.modal a {
	color: var(--color-black);
}

.instagram-icon {
	color: var(--color-gold);
	text-decoration: none;
	transition: color 0.3s ease;
}
.instagram-icon:hover {
	color: var(--color-red);
}

.text-uppercase {
	text-transform: uppercase !important;
}
.font-100,
.font-100 * {
	font-weight: 100 !important;
}
.font-200,
.font-200 * {
	font-weight: 200 !important;
}
.font-300,
.font-300 * {
	font-weight: 300 !important;
}
.font-400,
.font-400 * {
	font-weight: 400 !important;
}
.font-500,
.font-500 * {
	font-weight: 500 !important;
}
.font-600,
.font-600 * {
	font-weight: 600 !important;
}
.font-700,
.font-700 * {
	font-weight: 700 !important;
}
.font-800,
.font-800 * {
	font-weight: 800 !important;
}
.font-900,
.font-900 * {
	font-weight: 900 !important;
}

/***************/
/*** Main clases */
/***************/
main {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 2;
	position: relative;
	transition: top 0.5s;
}

/* Form */

.custom-form .form-control,
.custom-form select,
.custom-form input[type="date"] {
	background-color: transparent;
	border: 1px solid var(--color-red);
	border-radius: 0;
	color: var(--color-red);
	padding: 1rem;
	font-size: 0.9rem;
	font-weight: 300;
	text-transform: uppercase;
	text-align: center;
	box-shadow: none;
}

.form-floating-wrapper select.wpcf7-form-control.wpcf7-select.wpcf7-validates-as-required.form-control {
	background-color: transparent;
	border: 1px solid var(--color-red);
	border-radius: 0;
	color: var(--color-red);
	padding: 1rem 1rem 0 1rem;
	height: 5rem;
	font-size: 0.9rem;
	font-weight: 300;
	text-transform: uppercase;
	text-align: center;
	box-shadow: none;
}

.custom-form .form-control:focus,
.custom-form select:focus,
.custom-form input[type="date"]:focus {
	border-color: var(--color-red);
	outline: none;
	box-shadow: none;
}

.custom-form .form-control::placeholder {
	color: var(--color-red);
	opacity: 1;
	text-align: center;
}

.custom-form select option {
	color: #000;
}

.custom-form .form-check {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin-top: 1rem;
	margin-bottom: 1rem;
}

.custom-form .form-check-input {
	border-color: var(--color-red);
	background-color: transparent;
	border-radius: 0;
	accent-color: var(--color-red);
	margin-top: 0.2rem;
}

.custom-form .form-check-input:focus {
	border-color: var(--color-red);
	box-shadow: none;
}

.custom-form .form-check-input:checked {
	background-color: var(--color-red);
	border-color: var(--color-red);
}

.custom-form .form-check-label {
	color: #fff;
	font-size: 0.85rem;
	text-transform: uppercase;
}

.custom-form .btn-send {
	background-color: var(--color-red);
	color: #fff;
	padding: 0.75rem 2rem;
	border: none;
	border-radius: 0;
	font-weight: 600;
	text-transform: uppercase;
	font-size: 0.9rem;
	transition: background-color 0.3s ease;
}

.custom-form .btn-send:hover {
	background-color: #911624;
	color: #fff;
}

/* Floating label for date */
.form-floating-wrapper {
	position: relative;
	margin-bottom: 1rem;
}

.form-floating-wrapper input[type="date"] {
	width: 100%;
	height: 5rem;
	text-align: center;
	background-color: transparent;
	border: 1px solid var(--color-red);
	border-radius: 0;
	color: var(--color-red);
	padding: 1rem 1rem 0rem 1rem;
	font-size: 0.9rem;
	font-weight: 300;
	z-index: 1;
	position: relative;
}

.form-floating-wrapper label {
	position: absolute;
	left: 50%;
	top: 2.5rem;
	transform: translate(-50%, -50%);
	font-size: 0.9rem;
	color: var(--color-red);
	pointer-events: none;
	transition: 0.2s ease all;
	background-color: transparent;
	text-transform: uppercase;
	z-index: 2;
}

.form-floating-wrapper input[type="date"]:focus + label,
.form-floating-wrapper input[type="date"]:valid + label {
	top: 0.2rem;
	font-size: 0.7rem;
	padding: 0 0.25rem;
	background-color: #0d0b14;
}

/* Change color of calendar icon (only works on WebKit browsers) */
input[type="date"]::-webkit-calendar-picker-indicator {
	filter: invert(24%) sepia(83%) saturate(2689%) hue-rotate(338deg) brightness(95%) contrast(91%);
	cursor: pointer;
}

.wpcf7-not-valid-tip {
	color: #dc3232;
	font-size: 0.8rem;
	font-weight: normal;
	display: block;
	text-align: center;
}

.wpcf7-spinner {
	visibility: hidden;
	display: block;
	background-color: var(--color-red);
	opacity: 0.75;
	width: 24px;
	height: 24px;
	border: none;
	border-radius: 100%;
	padding: 0;
	margin: 0 24px;
	position: relative;
	margin: 1rem auto;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
	border-color: var(--color-red);
	color: var(--color-white);
	margin: 0;
	padding: 0.5rem;
	border: 1px solid var(--color-red);
	text-align: center;
	font-size: 0.8rem;
}

/* Hero */
.hero-section {
	background-position: bottom center;
	background-repeat: no-repeat;
	background-size: contain;
	position: relative;
	height: 100vh;
}

/* BOTELLA: col 1-3 */
.hero-bottle {
	position: absolute;
	top: 0;
	left: 10%;
	width: 22%;
	z-index: 2;
}

/* FLECHAS: detrás de botella */
.hero-arrows {
	position: absolute;
	top: 12%;
	left: 13.5%;
	width: 15%;
	z-index: 1;
}

/* CREDENCIAL: col 10-11 */
.hero-pass {
	position: absolute;
	top: 0;
	right: 10%;
	width: 30%;
	z-index: 2;
}

/* GRAMÓFONO: col 11-12 */
.hero-grammy {
	position: absolute;
	top: 10%;
	right: 15%;
	width: 7%;
	z-index: 2;
}

/* CONTENIDO CENTRAL (col 4-9 centrado) */
.hero-tour-logo {
	width: 30rem;
}

.hero-footer-logo {
	max-width: 8rem;
}

/* header */
@media (max-width: 768px) {
	header .lang-instagram-row {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 0.5rem;
	}

	header .header-text-center {
		width: 100%;
		text-align: center;
	}
}