/* ===== VARIABLES GLOBALES GUESTHUB ===== */
:root {
	/* Tipografía */
	--gh-font-family: 'Open Sans', sans-serif;

	/* Color dinámico principal */
	--gh-color-rgb-dynamic: 26, 179, 148;
	--gh-color-dynamic-1: #1ab394;
	--gh-color-dynamic-2: #daf3ee;
	--gh-color-green: #1ab394;

	/* Filtros SVG */
	--gh-filter-svg-dynamic: invert(59%) sepia(12%) saturate(3507%) hue-rotate(121deg) brightness(92%)
		contrast(80%);
	--gh-filter-svg-base: invert(100%) sepia(6%) saturate(755%) hue-rotate(169deg) brightness(117%)
		contrast(100%);

	/* Colores base */
	--gh-color-white: #ffffff;
	--gh-color-black: #2c2c2c;
	--gh-color-black-2: #363636;
	--gh-color-black-3: #212121;
	--gh-color-letter: #2f4050;
	--gh-color-dark-blue: #2f4050;

	/* Escala de grises */
	--gh-color-light-grey-1: #f4f4f4;
	--gh-color-light-grey-2: #e3e3e3;
	--gh-color-light-grey-3: #c3c3c3;
	--gh-color-grey: #999999;
	--gh-color-dark-grey: #686c6d;

	/* Colores funcionales */
	--gh-color-blue: #0084c4;
	--gh-color-light-blue: #d6ebf6;
	--gh-color-orange: #f99b0f;
	--gh-color-light-orange: #fefdd9;
	--gh-color-red: #ff4855;
	--gh-color-light-red: #ffe2e4;
	--gh-color-violet: #9c27b0;
	--gh-color-light-violet: #efdcf2;
	--gh-color-yellow: #fed02c;

	/* Utilidades */
	--gh-color-velo: rgba(33, 33, 33, 0.7);
	--gh-skeleton-loading-50: rgba(0, 0, 0, 0.08);
}

/* ===== RESET Y BASE RESPONSIVE ===== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	font-size: 16px;
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: transparent;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	padding: 0;
	font-family: var(--gh-font-family);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--gh-color-letter);
	background-color: var(--gh-color-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* ===== FONT INHERITANCE ===== */
/* Ensure all text elements use Open Sans */
*,
*::before,
*::after {
	font-family: inherit;
}

/* Explicit font family for all text elements */
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
div,
a,
button,
input,
textarea,
select,
option,
label,
legend,
fieldset,
table,
th,
td,
ul,
ol,
li,
dl,
dt,
dd,
blockquote,
cite,
q,
code,
pre,
kbd,
samp,
small,
sub,
sup,
strong,
b,
em,
i,
mark,
del,
ins,
abbr,
dfn,
time,
address,
article,
aside,
figure,
figcaption,
header,
footer,
main,
nav,
section,
details,
summary {
	font-family: var(--gh-font-family);
}

/* Bootstrap component overrides */
.btn,
.form-control,
.form-select,
.dropdown-menu,
.dropdown-item,
.nav-link,
.navbar-brand,
.card,
.card-title,
.card-text,
.modal,
.modal-title,
.modal-body,
.alert,
.badge,
.breadcrumb,
.pagination,
.tooltip,
.popover {
	font-family: var(--gh-font-family);
}

/* ===== RESPONSIVE BREAKPOINTS ===== */
@media (max-width: 35.99875rem) {
	html {
		font-size: 14px;
	}
}

@media (min-width: 36rem) and (max-width: 47.99875rem) {
	html {
		font-size: 15px;
	}
}

@media (min-width: 48rem) {
	html {
		font-size: 16px;
	}
}

/* ===== SKELETON LOADING ===== */
.skeleton {
	width: 100%;
	height: 100%;
	border-radius: 1rem;

	content: '';
	animation-name: scaffold-skeleton-horizontal-shimmer;
	animation-duration: calc(916ms * 2);
	animation-delay: 84ms;
	animation-iteration-count: infinite;
	animation-timing-function: cubic-bezier(0.34, 0, 0.21, 1);
	background-attachment: fixed;

	background-color: var(--gh-skeleton-loading-50);
	background-repeat: no-repeat;

	background-image: linear-gradient(
		120deg,
		transparent 40%,
		var(--gh-skeleton-loading-50) 50%,
		transparent 60%
	);
	background-size: 100vw 100vh;
}

@keyframes scaffold-skeleton-horizontal-shimmer {
	0% {
		background-position: -66vw 0;
	}

	to {
		background-position: 66vw 0;
	}
}

/* ===== LAZY LOADING SKELETON ===== */
.lazy-skeleton-container {
	position: relative;
	display: inline-block;
	overflow: hidden;
}

.lazy-skeleton-container .skeleton {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}

.lazy-skeleton-container img {
	position: relative;
	z-index: 1;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.lazy-skeleton-container img.loaded {
	opacity: 1;
	z-index: 2;
}

/* Ocultar skeleton cuando imagen está cargada */
.lazy-skeleton-container img.loaded + .skeleton {
	opacity: 0;
	transition: opacity 0.3s ease;
}

/* Ocultar imágenes lazy que no tienen src para evitar imagen rota */
img.lazy-img:not([src]),
img.lazy-img[src=''] {
	opacity: 0 !important;
	visibility: hidden !important;
}

/* Header specific navigation styles */
.navbar .navbar-nav {
	gap: 2rem;
	/* 32px equivalent */
}

.navbar .navbar-nav .nav-link {
	color: var(--gh-color-white) !important;
	padding: 0.5rem 0;
}

.navbar .dropdown-menu {
	background-color: var(--gh-color-dark-blue) !important;
	border-radius: 0.625rem;
	/* 10px */
	border: 0.0625rem solid var(--gh-color-white);
	/* 1px */
}

.navbar .dropdown-menu .dropdown-item {
	color: var(--gh-color-white) !important;
	border-bottom: 0.0625rem solid var(--gh-color-white) !important;
	/* 1px */
	padding: 0.75rem 1rem;
}

.navbar .dropdown-menu .dropdown-item:last-child {
	border-bottom: none !important;
}

.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus,
.navbar .dropdown-menu .dropdown-item.active {
	background-color: var(--gh-color-dynamic-1) !important;
	color: var(--gh-color-dynamic-1) !important;
}

/* Bootstrap overrides */
.btn-primary {
	background-color: var(--gh-color-dynamic-1) !important;
	border-color: var(--gh-color-dynamic-1) !important;
	color: var(--gh-color-white) !important;
	font-weight: 700 !important;
}

.btn-primary:hover,
.btn-primary:focus {
	background-color: var(--gh-color-dynamic-1) !important;
	border-color: var(--gh-color-dynamic-1) !important;
	color: var(--gh-color-white) !important;
}

.btn-secondary {
	background-color: var(--gh-color-grey) !important;
	border-color: var(--gh-color-grey) !important;
	color: var(--gh-color-white) !important;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
	background-color: var(--gh-color-dark-grey) !important;
	border-color: var(--gh-color-dark-grey) !important;
	color: var(--gh-color-white) !important;
}

/* Text color overrides */
.text-white {
	color: var(--gh-color-white) !important;
}

.text-dark-blue {
	color: var(--gh-color-dark-blue) !important;
}

.text-primary,
a.text-primary,
a.text-primary:hover,
a.text-primary:focus {
	color: var(--gh-color-dynamic-1) !important;
}

.text-primary-blue {
	color: var(--gh-color-dark-blue) !important;
	/* font-size: 3rem; */
	font-weight: 700;
}

h1 {
	font-size: 4rem !important;
	font-weight: 700 !important;
}

h2 {
	font-size: 3rem !important;
	font-weight: 700 !important;
}

h3.text-primary-blue {
	font-size: 1.5rem !important;
	font-weight: 700;
}
h2.text-primary-blue {
	font-size: 3rem !important;
	font-weight: 700;
}

strong {
	font-weight: 700;
}

/* Header variants */
.navbar {
	transition: all 0.3s ease;
}

/* Transparent header (default for hero pages) */
body.page-primary .navbar {
	background-color: transparent !important;
}

/* Mobile menu background for transparent header */
body.page-primary .navbar:not(.scrolled) .navbar-collapse.show {
	background-color: var(--gh-color-dark-blue) !important;
	border-radius: 0.5rem;
	margin-top: 1rem;
	padding: 1rem;
}

body.page-primary .navbar.scrolled {
	background-color: var(--gh-color-white) !important;
	box-shadow: 0 0.125rem 0.625rem rgba(0, 0, 0, 0.1);
}

/* White header (default for other pages and when scrolled) */
body.page-secondary .navbar,
.navbar.scrolled {
	background-color: var(--gh-color-white) !important;
	box-shadow: 0 0.125rem 0.625rem rgba(0, 0, 0, 0.1);
}

/* Text colors for transparent header */
body.page-primary .navbar:not(.scrolled) .nav-link {
	color: var(--gh-color-white) !important;
	font-weight: 700;
}

/* Text colors for white header */
body.page-secondary .navbar .nav-link {
	color: var(--gh-color-dark-blue) !important;
	font-weight: 700;
}

/* Text colors when scrolled - higher specificity */
body.page-primary .navbar.scrolled .nav-link,
.navbar.scrolled .nav-link {
	color: var(--gh-color-dark-blue) !important;
	font-weight: 700;
}

/* Button colors when scrolled */
body.page-primary .navbar.scrolled .btn-link {
	color: var(--gh-color-dark-blue) !important;
	font-weight: 700;
}

/* Logo handling with CSS */
.navbar-brand-logo {
	width: 10rem;
	/* 160px */
	height: 3.125rem;
	/* 50px */
	background-image: url('/images/logo/GH-dark-bg.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

/* White logo for transparent header */
body.page-primary .navbar:not(.scrolled) .navbar-brand-logo {
	background-image: url('/images/logo/GH-dark-bg.svg');
}

/* Dark logo for white header */
body.page-secondary .navbar-brand-logo,
.navbar.scrolled .navbar-brand-logo {
	background-image: url('/images/logo/GH-light-bg.svg');
}

/* Dropdown menu colors for white header */
body.page-secondary .dropdown-menu,
.navbar.scrolled .dropdown-menu {
	background-color: var(--gh-color-white) !important;
	border: 0.0625rem solid var(--gh-color-light-grey-2);
}

body.page-secondary .dropdown-menu .dropdown-item,
.navbar.scrolled .dropdown-menu .dropdown-item {
	color: var(--gh-color-dark-blue) !important;
	border-bottom: 0.0625rem solid var(--gh-color-light-grey-2) !important;
}

/* Main content padding for fixed header */
main {
	padding-top: 0;
}

/* Remove padding for pages with hero */
body.page-primary main {
	padding-top: 0;
}

/* Ensure secondary pages have proper padding */
body.page-secondary main {
	padding-top: 5rem;
	/* 80px */
}

/* ===== DROPDOWN PRODUCTS COLORS ===== */
/* Colors for transparent header */
body.page-primary .navbar:not(.scrolled) .dropdown-menu-products {
	background-color: var(--gh-color-dark-blue) !important;
	border-color: var(--gh-color-white) !important;
}

body.page-primary .navbar:not(.scrolled) .product-title {
	color: var(--gh-color-white);
}

body.page-primary .navbar:not(.scrolled) .product-description {
	color: var(--gh-color-white);
}

body.page-primary .navbar:not(.scrolled) .product-item:hover {
	background: rgba(26, 179, 148, 0.2);
}

/* Colors for white header */
body.page-secondary .navbar .dropdown-menu-products,
.navbar.scrolled .dropdown-menu-products {
	background-color: var(--gh-color-white) !important;
	border-color: var(--gh-color-light-grey-2) !important;
}

body.page-secondary .navbar .product-title,
.navbar.scrolled .product-title {
	color: var(--gh-color-dark-blue);
}

body.page-secondary .navbar .product-description,
.navbar.scrolled .product-description {
	color: var(--gh-color-dark-blue);
}

body.page-secondary .navbar .product-item:hover,
.navbar.scrolled .product-item:hover {
	background-color: var(--gh-color-light-grey-1);
}

.title-small {
	font-weight: 700;
	color: var(--gh-color-dynamic-1) !important;
}

/* ===== MENU HOVER AND ACTIVE STATES ===== */
.navbar .nav-link:hover,
.navbar .nav-link.active,
.navbar .dropdown.show > .nav-link,
.navbar .dropdown.show .dropdown-toggle {
	color: var(--gh-color-dynamic-1) !important;
}

/* Ensure hover works for both transparent and white header */
body.page-primary .navbar:not(.scrolled) .nav-link:hover,
body.page-primary .navbar:not(.scrolled) .nav-link.active,
body.page-primary .navbar:not(.scrolled) .dropdown.show > .nav-link,
body.page-primary .navbar:not(.scrolled) .dropdown.show .dropdown-toggle,
body.page-secondary .navbar .nav-link:hover,
body.page-secondary .navbar .nav-link.active,
body.page-secondary .navbar .dropdown.show > .nav-link,
body.page-secondary .navbar .dropdown.show .dropdown-toggle,
.navbar.scrolled .nav-link:hover,
.navbar.scrolled .nav-link.active,
.navbar.scrolled .dropdown.show > .nav-link,
.navbar.scrolled .dropdown.show .dropdown-toggle {
	color: var(--gh-color-dynamic-1) !important;
}

/* ===== HAMBURGER ICON STYLES ===== */
/* Default hamburger icon - white for transparent header */
.navbar-toggler-icon {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='m4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Dark hamburger for white header */
body.page-secondary .navbar .navbar-toggler-icon,
.navbar.scrolled .navbar-toggler-icon {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2847, 64, 80, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='m4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Green hamburger when menu is active/expanded */
.navbar-toggler[aria-expanded='true'] .navbar-toggler-icon {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2826, 179, 148, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='m4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Override Bootstrap's default hamburger styles */
.navbar-toggler {
	border: none !important;
	padding: 0.25rem 0.5rem !important;
}

.navbar-toggler:focus {
	box-shadow: none !important;
}