/* ===== MÉIHUĀ ZHĪDÀO GLOBAL STYLES ===== */
/* Paleta marcial inspirada en rojo (fuerza), dorado (linaje) y turquesa (fluidez) */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:wght@700&display=swap');

:root {
	/* Colores base marciales */
	--primary: #c11818;
	/* rojo banderín */
	--primary-light: #e02a2a;
	--primary-dark: #8f1010;
	--secondary: #1c1a19;
	/* humo/negro dojo */
	--accent: #e2a419;
	/* dorado linaje */
	--accent-light: #f3c859;
	--accent-dark: #b07c0f;
	/* Overlay hero con toques turquesa de circulos meihua */
	--hero-overlay: linear-gradient(135deg,
			rgba(193, 24, 24, 0.9) 0%,
			rgba(226, 164, 25, 0.82) 45%,
			rgba(108, 229, 232, 0.28) 100%);
	--success: #3fa34d;
	--warning: #e9772e;
	--info: #58b6c9;
	--dark: #131111;
	--darker: #0b0a0a;
	--light: #f5f3f0;
	--lighter: #faf8f6;
	--white: #ffffff;
	--text: #23201f;
	--text-light: #5c5755;
	--border: #e6ded5;
	--shadow-color: rgba(193, 24, 24, 0.16);

	/* Spacing Scale */
	--spacing-xs: 8px;
	--spacing-sm: 12px;
	--spacing-md: 20px;
	--spacing-lg: 40px;
	--spacing-xl: 60px;
	--spacing-2xl: 80px;

	/* Shadows */
	--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
	--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
	--shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.15);
	--shadow-xl: 0 20px 48px rgba(0, 0, 0, 0.18);
	--shadow-hover: 0 16px 40px rgba(97, 151, 2, 0.2);

	/* Hero sizing */
	--hero-min-height: 460px;
	--hero-padding-top: var(--spacing-xl);
	--hero-padding-bottom: var(--spacing-xl);

	/* Transitions */
	--transition-fast: 0.25s cubic-bezier(0.4, 0.0, 0.2, 1);
	--transition-normal: 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
	--transition-slow: 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);

	/* Border Radius */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--radius-xl: 16px;

	/* Font Sizes */
	--fs-xs: 12px;
	--fs-sm: 14px;
	--fs-md: 16px;
	--fs-lg: 18px;
	--fs-xl: 20px;
	--fs-2xl: 24px;
	--fs-3xl: 32px;
	--fs-4xl: 42px;
	--fs-5xl: 56px;
}

/* ===== SHARED HERO TYPOGRAPHY (non-home) ===== */
.page-header h1,
.services-header h1,
.contact-header h1,
.cart-hero h1,
.auth-hero h1,
.shop-hero h1 {
	font-size: 60px;
	line-height: 1.15;
	font-weight: 800;
	letter-spacing: -1px;
	margin-bottom: var(--spacing-lg);
}

.page-header p:not(.badge),
.services-header p,
.contact-header p,
.cart-hero p,
.auth-hero p,
.shop-hero p {
	font-size: 18px;
	line-height: 1.8;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.88);
}

/* Shared hero badge */
.hero-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 18px;
	margin: 0 auto var(--spacing-md);
	color: var(--white);
	font-size: 16px;
	font-weight: 700;
	background: rgba(255, 255, 255, 0.22);
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 999px;
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.28);
	backdrop-filter: blur(4px);
	letter-spacing: 0.6px;
}

@media (max-width: 900px) {
	.hero-badge {
		font-size: 15px;
	}
}

@media (max-width: 768px) {
	.hero-badge {
		font-size: 14px;
	}
}

@media (max-width: 560px) {
	.hero-badge {
		font-size: 13px;
	}
}

@media (orientation: portrait) and (max-width: 900px) {
	.hero-badge {
		font-size: 12px;
	}
}

/* Unificar tipografía de los rectángulos redondeados (hero pills) y CTAs del hero en todas las páginas usando el estilo base del home */
.hero-section .hero-badge,
.page-header .hero-badge,
.services-header .hero-badge,
.contact-header .hero-badge,
.cart-hero .hero-badge,
.auth-hero .hero-badge,
.shop-hero .hero-badge,
.page-header .badge,
.services-header .badge,
.contact-header .badge,
.cart-hero .badge,
.auth-hero .badge,
.shop-hero .badge {
	font-family: inherit !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	letter-spacing: 0.6px !important;
}

.hero-section .cta-inline .button,
.page-header .cta-inline .button,
.services-header .cta-inline .button,
.contact-header .cta-inline .button,
.cart-hero .cta-inline .button,
.auth-hero .cta-inline .button,
.shop-hero .cta-inline .button,
.hero-buttons .button {
	font-family: inherit !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	letter-spacing: 0.6px !important;
	padding: 16px 40px !important;
}

/* Subrayado superior en la descripción bajo el título del hero (todas las páginas) */
.hero-section>.container>p:not(.hero-badge),
.page-header>.container>p:not(.hero-badge),
.services-header>.container>p:not(.hero-badge),
.contact-header>.container>p:not(.hero-badge),
.cart-hero>.container>p:not(.hero-badge),
.auth-hero>.container>p:not(.hero-badge),
.shop-hero>.container>p:not(.hero-badge) {
	display: inline-block;
	border-top: 2px solid rgba(255, 255, 255, 0.65);
	padding-top: 10px;
}

.h1-hanzi {
	display: inline-block;
	margin-left: 10px;
}

@media (max-width: 600px) {
	.h1-hanzi {
		display: block;
		margin-left: 0;
		margin-top: 5px;
	}
}

/* Forzar tipografía y padding de botones hero aunque las hojas por-página redefinan tamaños */
.page-header .button,
.services-header .button,
.contact-header .button,
.cart-hero .button,
.auth-hero .button,
.shop-hero .button,
.hero-section .button,
.hero-buttons .button {
	font-family: inherit !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	letter-spacing: 0.6px !important;
	padding: 16px 40px !important;
}

/* ===== RESET & BASE ===== */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
	font-size: var(--fs-md);
	line-height: 1.6;
	color: var(--text);
	background-color: var(--white);
	overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: 'Playfair Display', 'Manrope', serif;
	color: var(--primary-dark);
	letter-spacing: -0.5px;
}

h1,
h2,
h3,
h4,
h5,
h6,
[id^="estilos"],
[id^="titulo-"] {
	scroll-margin-top: 140px !important;
}

#ancla-inscripcion {
	scroll-margin-top: 250px !important;
}

/* Ajuste de anclas para móviles */
@media (max-width: 992px) {

	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	[id^="estilos"],
	#ancla-inscripcion,
	[id^="formulario-externo"],
	[id^="titulo-"] {
		scroll-margin-top: 175px !important;
	}
}

/* ===== HEADER & NAVIGATION ===== */

header {
	background-color: var(--white);
	padding: 16px 0;
	box-shadow: var(--shadow-md);
	position: sticky;
	top: 0;
	z-index: 1000;
	backdrop-filter: blur(10px);
	background-color: rgba(255, 255, 255, 0.96);
	border-bottom: 1px solid var(--border);
	transition: all var(--transition-normal);
}

header.scrolled {
	padding: 12px 0;
	box-shadow: var(--shadow-lg);
}

header .container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 var(--spacing-lg);
	position: relative;
}

.logo {
	flex-shrink: 0;
}

.logo {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	font-weight: 700;
	font-size: 18px;
	background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	transition: transform var(--transition-fast);
	letter-spacing: -0.5px;
}

.logo:hover {
	transform: scale(1.05);
}

.logo img {
	height: 56px;
	width: auto;
	display: block;
}

.main-navigation {
	display: flex;
	gap: 32px;
	list-style: none;
	align-items: center;
}

.main-navigation li {
	position: relative;
}

.main-navigation .has-submenu>a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.main-navigation .has-submenu>a::after {
	content: '▾';
	font-size: 10px;
	color: inherit;
	transition: transform var(--transition-fast);
}

.main-navigation .has-submenu:hover>a::after,
.main-navigation .has-submenu:focus-within>a::after {
	transform: rotate(180deg);
}

.main-navigation a {
	color: var(--text);
	text-decoration: none;
	font-size: var(--fs-sm);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	position: relative;
	transition: color var(--transition-fast);
	padding: 8px 0;
}

.main-navigation .icon-nav a {
	font-size: 0;
	padding: 6px 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--primary-dark);
}

/* Mobile toggle */
.nav-toggle {
	display: none;
	width: 44px;
	height: 44px;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--white);
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 6px;
	cursor: pointer;
	box-shadow: var(--shadow-sm);
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.nav-toggle span {
	width: 18px;
	height: 2px;
	background: var(--primary-dark);
	display: block;
	border-radius: 2px;
}

.nav-toggle:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}

.nav-toggle:hover {
	border-color: var(--primary);
	box-shadow: var(--shadow-md);
	transform: translateY(-1px);
}

/* ===== RESPONSIVE GLOBAL ADJUSTMENTS ===== */
@media (max-width: 1200px) {
	.container {
		padding: 0 var(--spacing-md);
	}

	header .container {
		gap: var(--spacing-md);
	}

	.main-navigation {
		gap: 20px;
		flex-wrap: wrap;
		justify-content: center;
	}

	.main-navigation a {
		font-size: 13px;
	}

	.page-header h1,
	.services-header h1,
	.contact-header h1,
	.cart-hero h1,
	.auth-hero h1,
	.shop-hero h1 {
		font-size: 48px;
	}
}

@media (max-width: 992px) {
	header {
		padding: 12px 0;
	}

	header .container {
		flex-direction: row;
		align-items: center;
	}

	.logo img {
		height: 48px;
	}

	.nav-toggle {
		display: inline-flex;
		margin-left: auto;
	}

	nav {
		width: auto;
	}

	.main-navigation {
		position: absolute;
		top: calc(100% + 6px);
		left: 0;
		right: 0;
		background: rgba(255, 255, 255, 0.98);
		border-bottom: 1px solid var(--border);
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
		padding: 14px var(--spacing-lg) 18px;
		box-shadow: var(--shadow-md);
		display: none;
		z-index: 999;
	}

	body.nav-open .main-navigation {
		display: flex;
	}

	.main-navigation a {
		font-size: 12px;
		letter-spacing: 0.5px;
	}

	.main-navigation li {
		width: 100%;
	}

	.main-navigation .has-submenu>a::after {
		display: inline-block;
		margin-left: 6px;
		font-size: 10px;
		transform: rotate(0deg);
	}

	.submenu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: none;
		padding: 0;
		margin-top: 4px;
	}

	.submenu a {
		padding: 10px 0;
	}

	.page-header h1,
	.services-header h1,
	.contact-header h1,
	.cart-hero h1,
	.auth-hero h1,
	.shop-hero h1 {
		font-size: 42px;
	}

	.page-header p,
	.services-header p,
	.contact-header p,
	.cart-hero p,
	.auth-hero p,
	.shop-hero p {
		font-size: 16px;
	}

	section {
		padding: var(--spacing-lg) 0;
	}
}

@media (max-width: 992px) and (orientation: landscape) {
	.main-navigation {
		align-items: flex-end;
		text-align: right;
	}

	.main-navigation li {
		width: 100%;
		display: flex;
		justify-content: flex-end;
	}

	.main-navigation a,
	.submenu a {
		text-align: right;
		width: auto;
	}

	.main-navigation .icon-nav {
		justify-content: flex-end;
		width: auto;
	}

	.has-submenu>a {
		justify-content: flex-end;
		gap: 6px;
	}
}

@media (max-width: 768px) {
	.container {
		padding: 0 var(--spacing-sm);
	}

	.main-navigation {
		gap: 8px;
		padding: 12px var(--spacing-md) 14px;
	}

	.main-navigation a {
		font-size: 11px;
	}

	.page-header h1,
	.services-header h1,
	.contact-header h1,
	.cart-hero h1,
	.auth-hero h1,
	.shop-hero h1 {
		font-size: 34px;
	}

	.page-header p,
	.services-header p,
	.contact-header p,
	.cart-hero p,
	.auth-hero p,
	.shop-hero p {
		font-size: 15px;
		line-height: 1.6;
	}

	section {
		padding: var(--spacing-md) 0;
	}

	footer .container {
		grid-template-columns: 1fr;
		text-align: center;
	}

	footer .container>div:nth-child(1),
	footer .container>div:nth-child(3) {
		align-items: center;
		text-align: center;
	}

	footer .social-links {
		justify-content: center !important;
	}
}

@media (max-width: 560px) {
	.main-navigation {
		gap: 8px;
	}

	.main-navigation a {
		font-size: 10.5px;
		padding: 4px 0;
	}

	.logo img {
		height: 42px;
	}

	.page-header h1,
	.services-header h1,
	.contact-header h1,
	.cart-hero h1,
	.auth-hero h1,
	.shop-hero h1 {
		font-size: 28px;
	}

	.page-header p,
	.services-header p,
	.contact-header p,
	.cart-hero p,
	.auth-hero p,
	.shop-hero p {
		font-size: 14px;
	}
}

@media (orientation: portrait) and (max-width: 900px) {
	:root {
		--hero-min-height: 360px;
		--hero-padding-top: var(--spacing-lg);
		--hero-padding-bottom: var(--spacing-lg);
	}

	body {
		font-size: 15px;
	}

	h1 {
		font-size: 32px;
	}

	h2 {
		font-size: 26px;
	}

	h3 {
		font-size: 20px;
	}

	p,
	.lead {
		font-size: 14px;
		line-height: 1.6;
	}

	.button,
	button,
	input[type="button"],
	input[type="submit"],
	a.button {
		padding: 12px 24px;
		font-size: 12px;
	}

	/* Héroes: alinear todas las páginas con el hero de home */
	.hero-section h1,
	.page-header h1,
	.services-header h1,
	.contact-header h1,
	.cart-hero h1,
	.auth-hero h1,
	.shop-hero h1 {
		font-size: 26px !important;
		line-height: 1.2;
	}

	.hero-section .subtitle,
	.page-header p,
	.services-header p,
	.contact-header p,
	.cart-hero p,
	.auth-hero p,
	.shop-hero p {
		font-size: 14px !important;
		line-height: 1.6;
	}

	/* Forzar alturas y padding de héroes (excepto home) a la altura de About en portrait */
	.page-header,
	.services-header,
	.contact-header,
	.cart-hero,
	.auth-hero,
	.shop-hero {
		min-height: var(--hero-min-height) !important;
		padding: var(--hero-padding-top) 0 var(--hero-padding-bottom) !important;
	}

	/* Bloques de fondo acento (todas las páginas en portrait) */
	.cta-section h2,
	.service-cta h2,
	.contact-cta h3 {
		font-size: 22px !important;
		line-height: 1.25;
	}

	.cta-section p,
	.service-cta p,
	.contact-cta p {
		font-size: 13px !important;
		line-height: 1.6;
	}

	.cta-section .button,
	.service-cta .button,
	.contact-cta .button {
		font-size: 12px !important;
		padding: 10px 18px !important;
	}
}

@media (orientation: portrait) and (max-width: 1200px) {
	footer .container {
		grid-template-columns: 1fr;
		text-align: center;
		row-gap: var(--spacing-md);
		align-items: center;
		justify-items: center;
	}

	footer .container>div {
		align-items: center;
		text-align: center;
	}

	footer .container>div:nth-child(1),
	footer .container>div:nth-child(2),
	footer .container>div:nth-child(3) {
		text-align: center;
		align-items: center;
	}

	footer .social-links {
		justify-content: center !important;
	}

	footer .footer-bottom {
		text-align: center;
	}
}

/* Nav icon set: minimalist stroke icons that inherit link color */
.nav-icon {
	width: 22px;
	height: 22px;
	display: inline-block;
	background-repeat: no-repeat;
	background-size: contain;
	opacity: 0.92;
	transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.icon-nav a:hover .nav-icon,
.icon-nav a:focus-visible .nav-icon {
	opacity: 1;
	transform: translateY(-1px);
}

.nav-icon-shop {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234c7600' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 9h10l-1 10H8L7 9Z'/%3E%3Cpath d='M9 9V7a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E");
}

.nav-icon-cart {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234c7600' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 6h2l1 11h9l1-9H7'/%3E%3Ccircle cx='10' cy='19' r='1.25'/%3E%3Ccircle cx='17' cy='19' r='1.25'/%3E%3C/svg%3E");
}

.nav-icon-key {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c11818' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='3.2'/%3E%3Cpath d='M13.2 10H21'/%3E%3Cpath d='M17 10v3'/%3E%3Cpath d='M15 10v2'/%3E%3C/svg%3E");
}

.main-navigation a .nav-icon {
	width: 16px;
	height: 16px;
	margin-left: 8px;
	transform: translateY(2px);
}

.main-navigation a.icon-only .nav-icon {
	margin-left: 0;
	transform: none;
	width: 18px;
	height: 18px;
}

.main-navigation a::before {
	content: '';
	position: absolute;
	bottom: -4px;
	left: 0;
	width: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--accent), var(--primary-light));
	transition: width var(--transition-normal);
}

.main-navigation a:hover,
.main-navigation a.active {
	color: var(--primary);
}

.main-navigation a:hover::before,
.main-navigation a.active::before {
	width: 100%;
}

.submenu {
	position: absolute;
	top: calc(100% + 12px);
	left: 0;
	background: var(--white);
	box-shadow: var(--shadow-lg);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: 12px 0;
	min-width: 240px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: all var(--transition-fast);
	z-index: 1001;
}

.submenu li {
	list-style: none;
}

.submenu a {
	display: block;
	padding: 10px 18px;
	color: var(--text);
	text-transform: none;
	letter-spacing: 0;
	font-weight: 600;
}

.submenu a:hover,
.submenu a.active {
	color: var(--primary);
	background: linear-gradient(90deg, rgba(97, 151, 2, 0.08), rgba(122, 191, 43, 0.1));
}

/* Mobile submenu toggle */
@media (max-width: 992px) {
	.has-submenu>a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 6px;
	}

	.has-submenu>a::after {
		content: '▾';
		font-size: 11px;
		transition: transform var(--transition-fast);
	}

	.submenu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: none;
		padding: 6px 0;
		margin-top: 4px;
		display: none;
	}

	.has-submenu.open>a::after {
		transform: rotate(180deg);
	}

	.has-submenu.open .submenu {
		display: block;
	}
}

.has-submenu:hover .submenu,
.has-submenu:focus-within .submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* ===== MAIN CONTENT ===== */

main {
	min-height: calc(100vh - 200px);
}

.container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 var(--spacing-lg);
	width: 100%;
}

section {
	padding: var(--spacing-xl) 0;
	position: relative;
}

section.light-bg {
	background-color: var(--lighter);
}

section.dark-bg {
	background: linear-gradient(135deg, var(--darker) 0%, var(--primary-dark) 50%, var(--primary) 100%);
	color: var(--white);
}

section.dark-bg h1,
section.dark-bg h2,
section.dark-bg h3,
section.dark-bg h4,
section.dark-bg h5,
section.dark-bg h6 {
	color: var(--white);
}

section.dark-bg p,
section.dark-bg span {
	color: rgba(255, 255, 255, 0.88);
}

/* ===== TYPOGRAPHY ===== */

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 700;
	line-height: 1.25;
	margin-bottom: var(--spacing-md);
	color: var(--primary-dark);
	letter-spacing: -0.5px;
}

h1 {
	font-size: var(--fs-5xl);
	margin-bottom: var(--spacing-lg);
	line-height: 1.2;
}

h2 {
	font-size: var(--fs-4xl);
	margin-bottom: var(--spacing-lg);
}

h3 {
	font-size: var(--fs-3xl);
	margin-bottom: var(--spacing-md);
}

h4 {
	font-size: var(--fs-2xl);
	margin-bottom: var(--spacing-md);
}

h5 {
	font-size: var(--fs-xl);
	margin-bottom: var(--spacing-sm);
}

h6 {
	font-size: var(--fs-lg);
	margin-bottom: var(--spacing-sm);
	text-transform: uppercase;
	letter-spacing: 1.2px;
}

p {
	margin-bottom: var(--spacing-md);
	color: var(--text-light);
	line-height: 1.8;
	font-size: var(--fs-md);
}

.lead {
	font-size: var(--fs-lg);
	font-weight: 500;
	color: var(--text-light);
	line-height: 1.9;
	margin-bottom: var(--spacing-lg);
}

.subtitle {
	font-size: var(--fs-xl);
	color: var(--primary-light);
	font-weight: 500;
	margin-bottom: var(--spacing-md);
	letter-spacing: 0.5px;
}

.text-accent {
	color: var(--accent);
	font-weight: 600;
}

.text-primary {
	color: var(--primary);
	font-weight: 600;
}

.text-muted {
	color: var(--text-light);
	font-size: var(--fs-sm);
}

/* ===== BUTTONS ===== */

.button,
button,
input[type="button"],
input[type="submit"],
a.button {
	display: inline-block;
	padding: 14px 32px;
	font-size: var(--fs-sm);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	border: 2px solid transparent;
	border-radius: var(--radius-md);
	cursor: pointer;
	text-decoration: none;
	transition: all var(--transition-normal);
	position: relative;
	overflow: hidden;
	text-align: center;
	white-space: nowrap;
}

.button::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, var(--primary), var(--primary-light));
	transition: left var(--transition-normal);
	z-index: -1;
}

/* Primary Button */
.button-primary,
.button.primary {
	background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
	color: var(--white);
	border-color: var(--primary);
}

.button-primary:hover,
.button.primary:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-hover);
}

.button-primary:active,
.button.primary:active {
	transform: translateY(-1px);
}

/* Accent Button */
.button-accent,
.button.accent {
	background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
	color: var(--white);
	border-color: var(--accent);
}

.button-accent:hover,
.button.accent:hover {
	transform: translateY(-3px);
	box-shadow: none;
}

/* Secondary Button */
.button-secondary,
.button.secondary {
	background-color: transparent;
	color: var(--primary);
	border-color: var(--primary);
}

.button-secondary:hover,
.button.secondary:hover {
	background: var(--primary);
	color: var(--white);
	transform: translateY(-2px);
	box-shadow: var(--shadow-lg);
}

/* Outline Button */
.button-outline {
	background-color: transparent;
	color: var(--text);
	border: 2px solid var(--border);
}

.button-outline:hover {
	border-color: var(--primary);
	color: var(--primary);
	transform: translateY(-2px);
}

/* Small Button */
.button-sm {
	padding: 10px 20px;
	font-size: var(--fs-xs);
}

/* Large Button */
.button-lg {
	padding: 18px 40px;
	font-size: var(--fs-lg);
}

/* Disabled State */
.button:disabled,
.button[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
}

.button:disabled:hover,
.button[disabled]:hover {
	box-shadow: none;
}

/* ===== FOOTER ===== */

footer {
	background: linear-gradient(135deg, var(--darker) 0%, var(--primary-dark) 50%, var(--primary) 100%);
	color: var(--white);
	padding: var(--spacing-2xl) 0 var(--spacing-lg);
	margin-top: var(--spacing-2xl);
	position: relative;
	overflow: hidden;
}

footer::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 200px;
	background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120"><defs><pattern id="dots" patternUnits="userSpaceOnUse" width="40" height="40"><circle cx="20" cy="20" r="2" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="1200" height="120" fill="url(%23dots)"/></svg>');
	opacity: 0.5;
	pointer-events: none;
}

footer .container {
	max-width: 1400px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.1fr 1fr 1fr;
	gap: var(--spacing-xl);
	margin-bottom: var(--spacing-xl);
	position: relative;
	z-index: 1;
	padding: 0 var(--spacing-lg);
}

footer .container>div {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs);
}

footer .container>div:nth-child(1) {
	text-align: left;
	align-items: flex-start;
	gap: 4px;
}

footer .container>div:nth-child(1) p,
footer .container>div:nth-child(1) a {
	margin-bottom: 4px;
}

footer .container>div:nth-child(2) {
	text-align: center;
	align-items: center;
	gap: 4px;
}

footer .container>div:nth-child(2) p,
footer .container>div:nth-child(2) a {
	margin-bottom: 4px;
}

footer .container>div:nth-child(3) {
	text-align: right;
	align-items: flex-end;
	gap: 4px;
}

footer .container>div:nth-child(3) p,
footer .container>div:nth-child(3) a {
	margin-bottom: 4px;
}

footer h4 {
	margin-bottom: var(--spacing-md);
	color: var(--accent);
	font-size: var(--fs-sm);
	text-transform: uppercase;
	letter-spacing: 1.5px;
	font-weight: 700;
}

footer p {
	color: var(--white);
	opacity: 0.92;
	font-size: var(--fs-sm);
	line-height: 1.8;
	margin-bottom: var(--spacing-xs);
}

footer a {
	color: var(--white);
	text-decoration: none;
	opacity: 0.9;
	transition: all var(--transition-fast);
	display: inline-block;
	font-size: var(--fs-sm);
}

footer a:hover {
	opacity: 1;
	transform: translateX(4px);
	color: var(--white);
}

footer .footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	padding-top: var(--spacing-lg);
	text-align: center;
	font-size: var(--fs-xs);
	opacity: 0.75;
	position: relative;
	z-index: 1;
	max-width: 1400px;
	margin: 0 auto;
	padding-left: var(--spacing-lg);
	padding-right: var(--spacing-lg);
}

footer .social-links {
	display: flex;
	gap: var(--spacing-md);
	margin-top: var(--spacing-sm);
	flex-wrap: wrap;
}

footer .container>div:nth-child(1) .social-links {
	justify-content: flex-start;
}

footer .container>div:nth-child(2) .social-links {
	justify-content: center;
}

footer .container>div:nth-child(3) .social-links {
	justify-content: flex-end;
}

footer .social-links a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: transparent;
	border-radius: 50%;
	transition: all var(--transition-fast);
	border: 1px solid var(--accent);
	color: transparent;
	position: relative;
	overflow: hidden;
}

footer .social-links a:hover {
	background: var(--accent);
	border-color: var(--accent);
	transform: translateY(-4px) scale(1.1);
}

/* Iconos de redes con máscaras en colores corporativos */
.social-links a::after {
	content: '';
	display: block;
	width: 22px;
	height: 22px;
	background: var(--accent);
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

.social-links a[title="LinkedIn"]::after {
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4.98 3.5C4.98 4.88 3.88 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1 4.98 2.12 4.98 3.5zM.5 8h4V24h-4V8zm7.5 0h3.8v2.2h.05c.53-1 1.82-2.2 3.75-2.2 4 0 4.75 2.6 4.75 6V24h-4v-7.5c0-1.8-.03-4.1-2.5-4.1-2.5 0-2.9 1.95-2.9 4v7.6h-4V8z'/></svg>");
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4.98 3.5C4.98 4.88 3.88 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1 4.98 2.12 4.98 3.5zM.5 8h4V24h-4V8zm7.5 0h3.8v2.2h.05c.53-1 1.82-2.2 3.75-2.2 4 0 4.75 2.6 4.75 6V24h-4v-7.5c0-1.8-.03-4.1-2.5-4.1-2.5 0-2.9 1.95-2.9 4v7.6h-4V8z'/></svg>");
}

.social-links a[title="Instagram"]::after {
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 2h10a5 5 0 015 5v10a5 5 0 01-5 5H7a5 5 0 01-5-5V7a5 5 0 015-5zm0 2a3 3 0 00-3 3v10a3 3 0 003 3h10a3 3 0 003-3V7a3 3 0 00-3-3H7zm5 3.5A5.5 5.5 0 1112 18.5 5.5 5.5 0 0112 7.5zm0 2a3.5 3.5 0 100 7 3.5 3.5 0 000-7zm6.25-4a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0z'/></svg>");
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 2h10a5 5 0 015 5v10a5 5 0 01-5 5H7a5 5 0 01-5-5V7a5 5 0 015-5zm0 2a3 3 0 00-3 3v10a3 3 0 003 3h10a3 3 0 003-3V7a3 3 0 00-3-3H7zm5 3.5A5.5 5.5 0 1112 18.5 5.5 5.5 0 0112 7.5zm0 2a3.5 3.5 0 100 7 3.5 3.5 0 000-7zm6.25-4a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0z'/></svg>");
}

.social-links a[title="Facebook"]::after {
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13.5 10.2V7.6c0-.7.5-1.3 1.2-1.3h1.7V3h-2.8c-2.4 0-4.3 2-4.3 4.5v2.7H7v3h2.3V21h4.2v-7.8H16l.4-3h-2.9z'/></svg>");
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13.5 10.2V7.6c0-.7.5-1.3 1.2-1.3h1.7V3h-2.8c-2.4 0-4.3 2-4.3 4.5v2.7H7v3h2.3V21h4.2v-7.8H16l.4-3h-2.9z'/></svg>");
}

.social-links a[title="Threads"]::after {
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c4.8 0 8.8-3.3 9.8-7.7l-2.4-.6c-.7 3-3.5 5.2-7.4 5.2-4.1 0-7.5-3.4-7.5-7.5S7.9 4 12 4c3.4 0 6.2 2.3 7 5.4-.6.2-1.3.4-2 .5-.7-1.5-2.2-2.5-4-2.5-2.5 0-4.5 2-4.5 4.5s2 4.5 4.5 4.5c1.3 0 2.4-.5 3.2-1.4-.2-.6-.3-1.1-.4-1.7-.4.6-1.1 1-1.9 1-1.2 0-2.2-1-2.2-2.2s1-2.3 2.2-2.3c1 0 1.9.7 2.1 1.7l2.6-.5c-.1-.5-.3-.9-.4-1.3C16.6 7 14.4 6 12 6c-3.3 0-6 2.7-6 6s2.7 6 6 6c3 0 5.5-2.2 5.9-5.1l2.5.3C19.9 17.8 16.3 21 12 21 6.5 21 2 16.5 2 11S6.5 1 12 1c5 0 9.3 3.6 10.1 8.5l-2.5.4C19.1 5 15.9 2 12 2z'/></svg>");
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c4.8 0 8.8-3.3 9.8-7.7l-2.4-.6c-.7 3-3.5 5.2-7.4 5.2-4.1 0-7.5-3.4-7.5-7.5S7.9 4 12 4c3.4 0 6.2 2.3 7 5.4-.6.2-1.3.4-2 .5-.7-1.5-2.2-2.5-4-2.5-2.5 0-4.5 2-4.5 4.5s2 4.5 4.5 4.5c1.3 0 2.4-.5 3.2-1.4-.2-.6-.3-1.1-.4-1.7-.4.6-1.1 1-1.9 1-1.2 0-2.2-1-2.2-2.2s1-2.3 2.2-2.3c1 0 1.9.7 2.1 1.7l2.6-.5c-.1-.5-.3-.9-.4-1.3C16.6 7 14.4 6 12 6c-3.3 0-6 2.7-6 6s2.7 6 6 6c3 0 5.5-2.2 5.9-5.1l2.5.3C19.9 17.8 16.3 21 12 21 6.5 21 2 16.5 2 11S6.5 1 12 1c5 0 9.3 3.6 10.1 8.5l-2.5.4C19.1 5 15.9 2 12 2z'/></svg>");
}

.social-links a[title="WhatsApp"]::after {
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20.5 3.5A11.8 11.8 0 0012 0C5.4 0 .1 5.3.1 11.9c0 2.1.6 4.1 1.7 5.9L0 24l6.4-1.7a11.9 11.9 0 0017.6-10.4c0-3.2-1.2-6.2-3.5-8.4zM12 21.4c-1.9 0-3.8-.5-5.4-1.6l-.4-.2-3.8 1 .9-3.7-.3-.4A9.4 9.4 0 012.6 12C2.6 6.9 6.9 2.6 12 2.6c2.5 0 4.8 1 6.6 2.7a9.3 9.3 0 012.8 6.6c0 5.1-4.3 9.5-9.4 9.5zm5.2-7.1c-.3-.1-1.9-.9-2.2-1-.3-.1-.5-.1-.7.2l-.9 1c-.1.1-.3.2-.6.1-.3-.1-1.2-.5-2.3-1.4-.8-.7-1.4-1.5-1.6-1.8-.2-.3 0-.4.1-.5l.5-.6.3-.5c.1-.1.1-.3 0-.5l-1-2.3c-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.4s1.1 2.8 1.2 3c.1.2 2.2 3.4 5.3 4.8.7.3 1.3.5 1.7.6.7.2 1.4.2 1.9.1.6-.1 1.9-.8 2.2-1.6.3-.8.3-1.4.2-1.6-.1-.2-.3-.2-.6-.3z'/></svg>");
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20.5 3.5A11.8 11.8 0 0012 0C5.4 0 .1 5.3.1 11.9c0 2.1.6 4.1 1.7 5.9L0 24l6.4-1.7a11.9 11.9 0 0017.6-10.4c0-3.2-1.2-6.2-3.5-8.4zM12 21.4c-1.9 0-3.8-.5-5.4-1.6l-.4-.2-3.8 1 .9-3.7-.3-.4A9.4 9.4 0 012.6 12C2.6 6.9 6.9 2.6 12 2.6c2.5 0 4.8 1 6.6 2.7a9.3 9.3 0 012.8 6.6c0 5.1-4.3 9.5-9.4 9.5zm5.2-7.1c-.3-.1-1.9-.9-2.2-1-.3-.1-.5-.1-.7.2l-.9 1c-.1.1-.3.2-.6.1-.3-.1-1.2-.5-2.3-1.4-.8-.7-1.4-1.5-1.6-1.8-.2-.3 0-.4.1-.5l.5-.6.3-.5c.1-.1.1-.3 0-.5l-1-2.3c-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.4s1.1 2.8 1.2 3c.1.2 2.2 3.4 5.3 4.8.7.3 1.3.5 1.7.6.7.2 1.4.2 1.9.1.6-.1 1.9-.8 2.2-1.6.3-.8.3-1.4.2-1.6-.1-.2-.3-.2-.6-.3z'/></svg>");
}

.social-links a:hover::after {
	background: var(--white);
}

/* Iconografía elegante para la columna de contacto del footer */
footer .container>div:nth-child(3) p {
	position: relative;
	padding-left: 40px;
	line-height: 1.6;
}

footer .container>div:nth-child(3) p::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
	mask-size: 60%;
	mask-repeat: no-repeat;
	mask-position: center;
	-webkit-mask-size: 60%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	box-shadow: 0 6px 16px rgba(255, 189, 89, 0.3);
}

/* Íconos específicos por orden en la columna (email, teléfono, horario, ubicación) */
footer .container>div:nth-child(3) p:nth-of-type(1)::before {
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 5h18a2 2 0 012 2v10a2 2 0 01-2 2H3a2 2 0 01-2-2V7a2 2 0 012-2zm0 2v.4l9 5.1 9-5.1V7H3zm0 2.6V17h18v-7.4l-8.4 4.8a2 2 0 01-2 0L3 9.6z'/></svg>");
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 5h18a2 2 0 012 2v10a2 2 0 01-2 2H3a2 2 0 01-2-2V7a2 2 0 012-2zm0 2v.4l9 5.1 9-5.1V7H3zm0 2.6V17h18v-7.4l-8.4 4.8a2 2 0 01-2 0L3 9.6z'/></svg>");
}

footer .container>div:nth-child(3) p:nth-of-type(2)::before {
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6.6 2.1l2.4-.5a1.5 1.5 0 011.7.9l1.1 2.8a1.5 1.5 0 01-.4 1.6l-1.5 1.5a12.5 12.5 0 005.7 5.7l1.5-1.5a1.5 1.5 0 011.6-.4l2.8 1.1a1.5 1.5 0 01.9 1.7l-.5 2.4A1.5 1.5 0 0120.5 20C11.4 20 4 12.6 4 3.5A1.5 1.5 0 016.6 2z'/></svg>");
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6.6 2.1l2.4-.5a1.5 1.5 0 011.7.9l1.1 2.8a1.5 1.5 0 01-.4 1.6l-1.5 1.5a12.5 12.5 0 005.7 5.7l1.5-1.5a1.5 1.5 0 011.6-.4l2.8 1.1a1.5 1.5 0 01.9 1.7l-.5 2.4A1.5 1.5 0 0120.5 20C11.4 20 4 12.6 4 3.5A1.5 1.5 0 016.6 2z'/></svg>");
}

footer .container>div:nth-child(3) p:nth-of-type(3)::before {
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 1a11 11 0 100 22 11 11 0 000-22zm0 2a9 9 0 110 18 9 9 0 010-18zm-.5 3h2v5.3l3.4 2.1-1 1.7-4.4-2.8V6z'/></svg>");
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 1a11 11 0 100 22 11 11 0 000-22zm0 2a9 9 0 110 18 9 9 0 010-18zm-.5 3h2v5.3l3.4 2.1-1 1.7-4.4-2.8V6z'/></svg>");
}

footer .container>div:nth-child(3) p:nth-of-type(4)::before {
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a7 7 0 00-7 7c0 5.2 5.4 11.1 6.5 12.2a1 1 0 001.4 0C13.6 20.1 19 14.2 19 9a7 7 0 00-7-7zm0 2a5 5 0 015 5c0 3.5-3.4 8-5 9.9-1.6-1.9-5-6.4-5-9.9a5 5 0 015-5zm0 2.5A2.5 2.5 0 119.5 9 2.5 2.5 0 0112 6.5z'/></svg>");
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a7 7 0 00-7 7c0 5.2 5.4 11.1 6.5 12.2a1 1 0 001.4 0C13.6 20.1 19 14.2 19 9a7 7 0 00-7-7zm0 2a5 5 0 015 5c0 3.5-3.4 8-5 9.9-1.6-1.9-5-6.4-5-9.9a5 5 0 015-5zm0 2.5A2.5 2.5 0 119.5 9 2.5 2.5 0 0112 6.5z'/></svg>");
}

/* ===== ANIMATIONS & TRANSITIONS ===== */

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeInDown {
	from {
		opacity: 0;
		transform: translateY(-30px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeInLeft {
	from {
		opacity: 0;
		transform: translateX(-40px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes fadeInRight {
	from {
		opacity: 0;
		transform: translateX(40px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes scaleIn {
	from {
		opacity: 0;
		transform: scale(0.95);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes pulse {

	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.65;
	}
}

@keyframes float {

	0%,
	100% {
		transform: translateY(0px);
	}

	50% {
		transform: translateY(-8px);
	}
}

@keyframes shimmer {
	0% {
		background-position: -1000px 0;
	}

	100% {
		background-position: 1000px 0;
	}
}

.animate-in {
	animation: fadeInUp 0.6s ease-out forwards;
}

.animate-fade {
	animation: fadeIn 0.4s ease-out;
}

.animate-scale {
	animation: scaleIn 0.5s ease-out;
}

.floating {
	animation: float 3s ease-in-out infinite;
}

/* ===== UTILITY CLASSES ===== */

.text-center {
	text-align: center;
}

.text-left {
	text-align: left;
}

.text-right {
	text-align: right;
}

.mt-1 {
	margin-top: var(--spacing-xs);
}

.mt-2 {
	margin-top: var(--spacing-sm);
}

.mt-3 {
	margin-top: var(--spacing-md);
}

.mt-4 {
	margin-top: var(--spacing-lg);
}

.mt-5 {
	margin-top: var(--spacing-xl);
}

.mt-6 {
	margin-top: var(--spacing-2xl);
}

.mb-1 {
	margin-bottom: var(--spacing-xs);
}

.mb-2 {
	margin-bottom: var(--spacing-sm);
}

.mb-3 {
	margin-bottom: var(--spacing-md);
}

.mb-4 {
	margin-bottom: var(--spacing-lg);
}

.mb-5 {
	margin-bottom: var(--spacing-xl);
}

.mb-6 {
	margin-bottom: var(--spacing-2xl);
}

.py-1 {
	padding: var(--spacing-xs) 0;
}

.py-2 {
	padding: var(--spacing-sm) 0;
}

.py-3 {
	padding: var(--spacing-md) 0;
}

.py-4 {
	padding: var(--spacing-lg) 0;
}

.py-5 {
	padding: var(--spacing-xl) 0;
}

.py-6 {
	padding: var(--spacing-2xl) 0;
}

.relative {
	position: relative;
}

.absolute {
	position: absolute;
}

.flex {
	display: flex;
}

.flex-center {
	display: flex;
	align-items: center;
	justify-content: center;
}

.grid {
	display: grid;
}

.gap-1 {
	gap: var(--spacing-xs);
}

.gap-2 {
	gap: var(--spacing-sm);
}

.gap-3 {
	gap: var(--spacing-md);
}

.gap-4 {
	gap: var(--spacing-lg);
}

.gap-5 {
	gap: var(--spacing-xl);
}

/* ===== RESPONSIVE DESIGN ===== */

@media (max-width: 1200px) {
	:root {
		--spacing-xl: 50px;
		--spacing-lg: 30px;
	}

	h1 {
		font-size: var(--fs-4xl);
	}

	h2 {
		font-size: var(--fs-3xl);
	}

	.container {
		padding: 0 var(--spacing-lg);
	}
}

@media (max-width: 768px) {
	:root {
		--spacing-xl: 40px;
		--spacing-lg: 24px;
		--spacing-md: 16px;
	}

	h1 {
		font-size: 32px;
	}

	h2 {
		font-size: 28px;
	}

	h3 {
		font-size: 24px;
	}

	header .container {
		gap: var(--spacing-md);
		padding: 0 var(--spacing-md);
	}

	.main-navigation {
		flex-direction: column;
		gap: 12px;
		width: 100%;
		text-align: center;
	}

	.main-navigation a {
		font-size: 12px;
		letter-spacing: 0.4px;
		padding: var(--spacing-sm) 0;
		display: block;
	}

	footer .container {
		grid-template-columns: 1fr;
		gap: var(--spacing-lg);
	}

	footer .container>div {
		align-items: center;
		text-align: center;
	}

	footer .social-links,
	footer .container>div .social-links {
		justify-content: center;
	}

	section {
		padding: var(--spacing-lg) 0;
	}

	.button {
		padding: 12px 24px;
		font-size: var(--fs-xs);
		width: 100%;
	}

	.container {
		padding: 0 var(--spacing-md);
	}
}

@media (max-width: 480px) {
	:root {
		--spacing-xl: 30px;
		--spacing-lg: 20px;
	}

	header .container {
		padding: var(--spacing-md);
	}

	.main-navigation {
		gap: 8px;
	}

	.main-navigation a {
		font-size: 11px;
		letter-spacing: 0.2px;
	}

	h1 {
		font-size: 24px;
		margin-bottom: var(--spacing-md);
	}

	h2 {
		font-size: 20px;
	}

	h3 {
		font-size: 18px;
	}

	.subtitle {
		font-size: var(--fs-lg);
	}

	section {
		padding: var(--spacing-lg) 0;
	}

	footer .social-links {
		justify-content: center;
	}
}

@media (orientation: portrait) and (max-width: 1200px) {
	footer .container {
		grid-template-columns: 1fr;
		justify-items: center;
		row-gap: var(--spacing-lg);
		text-align: center;
	}

	footer .container>div {
		align-items: center;
		text-align: center;
	}

	footer .container>div:nth-child(1),
	footer .container>div:nth-child(2),
	footer .container>div:nth-child(3) {
		align-items: center;
		text-align: center;
	}

	footer .social-links {
		justify-content: center;
	}

	footer .container>div:nth-child(1) .social-links,
	footer .container>div:nth-child(2) .social-links,
	footer .container>div:nth-child(3) .social-links {
		justify-content: center;
	}

	footer .footer-bottom {
		text-align: center;
	}
}

/* --- Footer responsive fix for landscape mobile/tablet --- */
@media (orientation: landscape) and (max-width: 992px) {
	footer {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
		text-align: center !important;
	}

	footer>* {
		width: 100% !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

/* --- Footer responsive fix for landscape mobile/tablet --- */
@media (orientation: landscape) and (max-width: 992px) {
	footer .container {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
		text-align: center !important;
		gap: var(--spacing-lg) !important;
	}

	footer .container>div {
		align-items: center !important;
		text-align: center !important;
		width: 100% !important;
	}

	footer .social-links {
		justify-content: center !important;
	}
}

/* ===== FLOATING WHATSAPP BUTTON ===== */
.whatsapp-float {
	position: fixed;
	bottom: 30px;
	right: 30px;
	width: 60px;
	height: 60px;
	background-color: var(--accent);
	color: #fff;
	border-radius: 50%;
	text-align: center;
	font-size: 30px;
	box-shadow: 2px 2px 3px #999;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	text-decoration: none;
}

.whatsapp-float:hover {
	background-color: var(--accent-dark);
	transform: scale(1.1);
	box-shadow: 2px 2px 6px #666;
}

.whatsapp-icon {
	width: 35px;
	height: 35px;
	fill: white;
}

@media (max-width: 768px) {
	.whatsapp-float {
		width: 50px;
		height: 50px;
		bottom: 20px;
		right: 20px;
	}

	.whatsapp-icon {
		width: 28px;
		height: 28px;
	}
}