/* Global Styles */

:root {
	/* Colors */
	--white: hsl(0, 0%, 100%);
	--bg-dark: hsl(0, 0%, 10%);
	--bg-dark-navbar: hsl(0, 0%, 17%);
	--bg-dark-progress: hsl(0, 0%, 25%);
	--color-1st-dark: hsl(305, 100%, 50%);
	/* --bg-hover-navbar: hsla(312, 100%, 50%, 0.6); */
	--btn-hover-dark: hsl(312, 100%, 50%);
	--color-footer-dark: hsl(0, 0%, 70%);

	--black: hsl(0, 0%, 0%);
	--bg-light: hsl(0, 0%, 95%);
	--bg-light-navbar: hsl(0, 0%, 90%);
	--bg-light-progress: hsl(0, 0%, 85%);
	--btn-hover-light: hsl(315, 100%, 50%);
	--color-footer-light: hsl(0, 0%, 30%);

	/* Extras */
	--hr-dark: hsla(0, 0%, 100%, 0.4);
	--hr-light: hsla(0, 0%, 0%, 0.6);
	--cookies-border-dark: hsla(0, 0%, 100%, 0.2);
	--cookies-border-light: hsla(0, 0%, 0%, 0.4);
	--popup-border: hsla(0, 0%, 100%, 0.2);
	--switch-dark: hsl(225, 25%, 30%);
	--switch-light: hsl(40, 100%, 50%);
	--red: hsl(0, 100%, 50%);

	/* Scrollbar */
	--scroll-bg-dark: hsl(270, 12%, 30%);
	--scroll-thumb-dark: hsl(270, 12%, 20%);
	--scroll-hover-dark: hsl(270, 15%, 18%);
	--scroll-bg-light: hsl(250, 12%, 90%);
	--scroll-thumb-light: hsl(250, 12%, 80%);
	--scroll-hover-light: hsl(250, 15%, 77%);

	/* Fonts */
	/* Size Small */
	--fs-h1: 2.5rem;
	--fs-h2: 1.8rem;
	--fs-h3: 1.5rem;
	--fs-h4: 1.125rem;
	--fs-small: 1rem;
	--fs-cookie-table: 1.2rem;

	/* Size Medium */
	--fsm-h1: 2.8rem;
	--fsm-h2: 2rem;
	--fsm-btn: 1.3rem;
	--fsm-p: 1.2rem;
	--fsm-h4: 1.2rem;
	--fsm-small: 1.1rem;
	--fsm-cookie-table: 1.4rem;

	/* Size Large */
	--fsl-h1: 3.5rem;
	--fsl-h2: 2.8rem;
	--fsl-btn: 1.5rem;
	--fsl-h3: 1.7rem;
	--fsl-p: 1.4rem;
	--fsl-h4: 1.4rem;
	--fsl-small: 1.2rem;
	--fsl-cookie-table: 1.5rem;

	/* Letter Spacing */
	--ls-1px: 0.0625rem;
	--ls-2px: 0.125rem;
	--ls-3px: 0.1875rem;

	/* Family */
	--montserrat: "Montserrat", sans-serif;
	--roboto: "Roboto", sans-serif;
}

html {
	/* user-select: none; */
	scroll-behavior: smooth;
}

body {
	font-size: 1.125rem; /* 18px */
	font-family: var(--roboto);
	font-weight: 300;
	letter-spacing: var(--ls-1px);
	color: var(--white);
	background-color: var(--bg-dark);
	cursor: default;
	transition: background 0.5s ease, font-weight 0.5s ease;
}

body.light {
	font-weight: 400;
	color: var(--black);
	background-color: var(--white);
}

img {
	display: block;
	max-width: 100%;
}

svg {
	margin-top: 0.3em;
	height: fit-content;
	fill: var(--white);
}

body.light svg {
	fill: var(--black);
}

/* Bubbles */
.bubble {
	filter: drop-shadow(0 0 0.5rem var(--color-1st-dark));
}

.bubble--sections {
	display: none;
	position: absolute;
	z-index: -1;
}

body.light .bubble--sections {
	opacity: 0.9;
}

/* Links */

a {
	text-decoration: none;
	color: var(--white);
}

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

.link--color:hover {
	/* Depending if it's a link or a svg */
	color: var(--color-1st-dark);
	fill: var(--color-1st-dark);
}

/* Buttons */

button {
	width: fit-content;
	font-size: 1.125rem;
	text-transform: uppercase;
	letter-spacing: var(--ls-1px);
	background-color: transparent;
	border: none;
	border-radius: 0.2rem;
	outline: none;
	cursor: pointer;
}

.btn__effect {
	position: relative;
	padding: 0.5em 0.8em;
	align-self: center;
	color: var(--color-1st-dark);
	border: var(--ls-1px) solid var(--color-1st-dark);
	transition: color 0.4s ease-in;
}

.btn__effect__link {
	color: var(--color-1st-dark);
	transition: color 0.4s ease-in;
}

.btn__effect:hover, /* !No funciona */
.btn__effect__link:hover {
	color: var(--white);
}

.btn__effect::before {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	width: 100%;
	height: 0;
	background-color: var(--btn-hover-dark);
	z-index: -2;
	transition: height 0.4s ease-in;
}

.btn__effect:hover::before {
	height: 100%;
}

body.light .btn__effect {
	background-color: var(--btn-hover-dark);
}

body.light .btn__effect:hover {
	background-color: var(--btn-hover-light);
}

/* ?Cambiar por un modifier para ahorrar líneas */
body.light .btn__effect__link,
body.light .form__btn,
body.light .cookie__btn {
	color: var(--white);
}

/* Placeholders */

::placeholder {
	color: var(--hr-dark);
}

body.light ::placeholder {
	color: var(--hr-light);
}

/* Containers */

header,
section,
footer {
	width: 90%;
	max-width: 1500px;
	margin: 0 auto;
}

.container {
	width: 100%;
	position: relative; /* To locate the bubbles */
	word-wrap: break-word; /* To handle long hyperlinks */
}

.container--header {
	position: fixed;
	top: 0;
	z-index: 100;

	padding: 0.5em 0;
	background-color: var(--bg-dark-navbar);
}

body.light .container--header {
	background-color: var(--bg-light-navbar);
}

.container--nav {
	width: 100%;
	height: 100%;
}

.container--footer {
	padding: 0.5em 0;
	background-color: var(--bg-dark-navbar);
}

body.light .container--footer {
	background-color: var(--bg-light-navbar);
}

/* Dark/Light Button */

.switch__btn {
	position: relative;
	display: flex;
	padding: 0.45em 0.5em;
	gap: 0.7em;
	border-radius: 2rem;
	background-color: var(--switch-dark);
}

.switch__btn::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: unset;
	width: 50%;
	height: 100%;
	background-color: var(--white);
	border-radius: 50%;
	/* ?Add transition to switch__btn::after */
	/* !No funciona la transición para left/right */
	/* transition: all ease-in-out 1s; */
}

.switch__btn.activated {
	background-color: var(--switch-light);
}

.switch__btn.activated::after {
	left: unset;
	right: 0;
}

.switch__sun,
.switch__moon {
	width: 24px;
}

/* Footer */

.footer {
	font-size: var(--fs-small);
	color: var(--color-footer-dark);
}

.footer__link {
	color: var(--color-footer-dark);
}

body.light .footer {
	color: var(--color-footer-light);
}

body.light .footer__link {
	color: var(--color-footer-light);
}

body.light .link--color:hover {
	color: var(--color-1st-dark);
}

/* PopUp Cookies */
.cookies__text {
	margin: 1em 0 0;
}

/* Scroll Bar */

::-webkit-scrollbar {
	width: 0.7rem;
	background-color: var(--scroll-bg-dark);
	border-radius: 0.5rem;
}

::-webkit-scrollbar-thumb {
	background-color: var(--scroll-thumb-dark);
	border-radius: 0.5rem;
}

::-webkit-scrollbar-thumb:hover {
	background-color: var(--scroll-hover-dark);
}

body.light::-webkit-scrollbar {
	width: 0.7rem;
	background-color: var(--scroll-bg-light);
	border-radius: 0.5rem;
}

body.light::-webkit-scrollbar-thumb {
	background-color: var(--scroll-thumb-light);
	border-radius: 0.5rem;
}

body.light::-webkit-scrollbar-thumb:hover {
	background-color: var(--scroll-hover-light);
}

/* PHP */
.msg--error {
	font-size: var(--fs-small);
	color: var(--red);
}

/* reCaptcha */
.grecaptcha-badge {
	z-index: 99;
}