/* ════════════════════════════════════════════════════════════
   ClasesdeSki Footer — 100% PRO Polish v2.0 "WOW"
   Pure CSS, no DOM mutation. Companion to /cdski-nav.css.
   v2: dramatic visual upgrade (mountains, aurora, snowfall).
   ════════════════════════════════════════════════════════════ */

/* ─── Background: gradient + glows + mountain silhouette baked in ─── */
footer.bg-slate-900 {
	background-color: #060c1a !important;
	background-image:
		radial-gradient(ellipse 700px 320px at 12% 0%, rgba(249, 115, 22, 0.22) 0%, transparent 60%),
		radial-gradient(ellipse 500px 280px at 88% 100%, rgba(14, 165, 233, 0.14) 0%, transparent 60%),
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 240' preserveAspectRatio='none'><path fill='rgba(255,255,255,0.05)' d='M0,240 L0,160 L120,100 L220,140 L360,60 L480,120 L600,80 L720,140 L860,50 L980,120 L1100,90 L1240,140 L1360,70 L1440,120 L1440,240 Z'/><path fill='rgba(255,255,255,0.18)' d='M350,70 L360,60 L370,70 L367,75 L353,75 Z M850,60 L860,50 L870,60 L867,65 L853,65 Z M1350,80 L1360,70 L1370,80 L1367,85 L1353,85 Z'/><path fill='rgba(8,12,28,0.85)' d='M0,240 L0,190 L100,150 L200,180 L320,120 L440,170 L560,130 L680,170 L820,110 L940,170 L1060,140 L1180,180 L1300,130 L1440,170 L1440,240 Z'/></svg>"),
		linear-gradient(180deg, #0f172a 0%, #060c1a 100%)
		!important;
	background-position: top left, bottom right, bottom center, top;
	background-size: auto, auto, 100% 240px, 100% 100%;
	background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
	border-top: none !important;
	position: relative !important;
	overflow: hidden !important;
}

/* ─── Aurora line animated across the top ─── */
footer.bg-slate-900::before {
	content: '';
	position: absolute;
	top: 0;
	left: -50%;
	width: 200%;
	height: 3px;
	background: linear-gradient(90deg,
		transparent 0%,
		rgba(249, 115, 22, 0.95) 20%,
		rgba(244, 114, 182, 0.95) 40%,
		rgba(14, 165, 233, 0.95) 60%,
		rgba(249, 115, 22, 0.95) 80%,
		transparent 100%);
	animation: cdski-aurora 10s ease-in-out infinite;
	z-index: 2;
	pointer-events: none;
	filter: blur(0.5px);
}
@keyframes cdski-aurora {
	0%, 100% { transform: translateX(0); }
	50%      { transform: translateX(-25%); }
}

/* ─── Falling-snow particle effect ─── */
footer.bg-slate-900::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(1.5px 1.5px at 10% 20%, rgba(255,255,255,0.8) 50%, transparent 100%),
		radial-gradient(1.5px 1.5px at 30% 50%, rgba(255,255,255,0.7) 50%, transparent 100%),
		radial-gradient(1.5px 1.5px at 50% 30%, rgba(255,255,255,0.8) 50%, transparent 100%),
		radial-gradient(1px 1px at 70% 70%,    rgba(255,255,255,0.6) 50%, transparent 100%),
		radial-gradient(1.5px 1.5px at 85% 40%, rgba(255,255,255,0.7) 50%, transparent 100%),
		radial-gradient(1px 1px at 25% 80%,    rgba(255,255,255,0.5) 50%, transparent 100%),
		radial-gradient(1.5px 1.5px at 60% 15%, rgba(255,255,255,0.8) 50%, transparent 100%),
		radial-gradient(1px 1px at 90% 90%,    rgba(255,255,255,0.5) 50%, transparent 100%);
	background-size: 220px 220px;
	animation: cdski-snowfall 30s linear infinite;
	opacity: 0.35;
	pointer-events: none;
	z-index: 1;
}
@keyframes cdski-snowfall {
	0%   { background-position: 0 0; }
	100% { background-position: 60px 220px; }
}

/* Content sits above all the decorative layers */
footer.bg-slate-900 > div {
	position: relative !important;
	z-index: 5 !important;
}

/* ─── Hide decorative country flags row ─── */
footer .flex.items-center.gap-2.mt-3.text-xl { display: none !important; }

/* ─── Hide the duplicate language pills (translator handles this) ─── */
footer a[href="/es/"][class*="rounded-lg"][class*="border"],
footer a[href="/en/"][class*="rounded-lg"][class*="border"],
footer a[href="/pt/"][class*="rounded-lg"][class*="border"] { display: none !important; }
footer .mt-6:has(> .flex > a[href="/es/"][class*="rounded-lg"]) { display: none !important; }

/* ─── Improve text contrast (WCAG AA) ─── */
footer .text-white\/40 { color: rgba(255, 255, 255, 0.65) !important; }
footer .text-white\/30 { color: rgba(255, 255, 255, 0.55) !important; }

/* ─── Section headings: BIGGER orange accent bar + glow ─── */
footer h4 {
	position: relative;
	padding-bottom: 18px !important;
	margin-bottom: 22px !important;
	letter-spacing: 0.4px;
	font-size: 1.05rem !important;
	font-weight: 700 !important;
	color: #ffffff !important;
	text-shadow: 0 2px 12px rgba(249, 115, 22, 0.15);
}
footer h4::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 40px;
	height: 3px;
	background: linear-gradient(90deg, #f97316, #fb923c);
	border-radius: 3px;
	box-shadow: 0 0 14px rgba(249, 115, 22, 0.55), 0 0 4px rgba(249, 115, 22, 0.8);
	transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
footer h4:hover::after { width: 64px; }

/* ─── Link hover: underline + color shift ─── */
footer ul li a {
	position: relative;
	display: inline-block;
	padding-bottom: 3px;
	transition: color 0.2s ease, transform 0.2s ease;
}
footer ul li a::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 2px;
	background: linear-gradient(90deg, #f97316, #fb923c);
	border-radius: 1px;
	box-shadow: 0 0 8px rgba(249, 115, 22, 0.5);
	transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	pointer-events: none;
}
footer ul li a:hover::after,
footer ul li a:focus-visible::after { width: 100%; }
footer ul li a:hover {
	color: #fb923c !important;
	transform: translateX(2px);
}

/* ─── Contact list icons via SVG mask ─── */
footer ul li a[href^="tel:"],
footer ul li a[href^="mailto:"] {
	display: inline-flex !important;
	align-items: center;
	gap: 10px;
}
footer ul li a[href^="tel:"]::before,
footer ul li a[href^="mailto:"]::before {
	content: '';
	display: inline-block;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	opacity: 0.85;
}
footer ul li a[href^="tel:"]::before {
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z'/></svg>");
	        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z'/></svg>");
}
footer ul li a[href^="mailto:"]::before {
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/><polyline points='22,6 12,13 2,6'/></svg>");
	        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/><polyline points='22,6 12,13 2,6'/></svg>");
}
footer ul li:not(:has(a)) {
	display: inline-flex !important;
	align-items: center;
	gap: 10px;
}
footer ul li:not(:has(a))::before {
	content: '';
	display: inline-block;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	background-color: currentColor;
	opacity: 0.85;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/><circle cx='12' cy='10' r='3'/></svg>");
	        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/><circle cx='12' cy='10' r='3'/></svg>");
}

/* ─── Social icons: bigger + brand-color hover with glow ─── */
footer a[aria-label="Facebook"],
footer a[aria-label="Instagram"] {
	width: 44px !important;
	height: 44px !important;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
	will-change: transform;
}
footer a[aria-label="Facebook"] svg,
footer a[aria-label="Instagram"] svg {
	width: 22px !important;
	height: 22px !important;
}
footer a[aria-label="Facebook"]:hover {
	transform: translateY(-4px) scale(1.08);
	background: #1877f2 !important;
	border-color: rgba(24, 119, 242, 0.50) !important;
	color: #ffffff !important;
	box-shadow: 0 14px 30px rgba(24, 119, 242, 0.45),
	            0 4px 12px rgba(24, 119, 242, 0.25);
}
footer a[aria-label="Instagram"]:hover {
	transform: translateY(-4px) scale(1.08);
	background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
	border-color: rgba(220, 39, 67, 0.50) !important;
	color: #ffffff !important;
	box-shadow: 0 14px 30px rgba(220, 39, 67, 0.45),
	            0 4px 12px rgba(220, 39, 67, 0.25);
}

/* ─── Brand logo: bigger + persistent orange drop-shadow glow ─── */
footer img[alt="Clases de Ski"] {
	width: 64px !important;
	height: 64px !important;
	filter: drop-shadow(0 8px 24px rgba(249, 115, 22, 0.40));
	transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
	            filter 0.35s ease;
}
footer img[alt="Clases de Ski"]:hover {
	transform: rotate(-8deg) scale(1.10);
	filter: drop-shadow(0 14px 36px rgba(249, 115, 22, 0.65));
}

/* ─── Bigger logo wordmark with subtle text glow ─── */
footer .lg\:col-span-1 span[style*="Montserrat"] {
	font-size: 1.5rem !important;
	letter-spacing: -0.5px;
}
footer .lg\:col-span-1 span[style*="Montserrat"] .text-orange-400 {
	text-shadow: 0 0 18px rgba(251, 146, 60, 0.55);
}

/* ─── Description copy: better line height + subtle treatment ─── */
footer .lg\:col-span-1 p.text-white\/40 {
	line-height: 1.75;
	max-width: 320px;
	margin-top: 14px;
}

/* ─── Bottom bar: cleaner separator ─── */
footer .border-t.border-white\/5 {
	border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
	padding-top: 2rem !important;
	margin-top: 4.5rem !important;
}
footer .border-t.border-white\/5 span {
	font-size: 0.8125rem;
	letter-spacing: 0.3px;
}

/* ─── Spacing: BIG breathing room ─── */
footer .py-16 {
	padding-top: 6rem !important;
	padding-bottom: 4rem !important;
}
footer .grid.gap-10 {
	gap: 3.5rem !important;
}

/* ─── Mobile: scale everything down ─── */
@media (max-width: 768px) {
	footer .py-16 {
		padding-top: 4rem !important;
		padding-bottom: 3rem !important;
	}
	footer .grid.gap-10 { gap: 2.5rem !important; }
	footer h4 { font-size: 0.95rem !important; }
	footer h4::after { width: 32px; height: 2px; }
	footer img[alt="Clases de Ski"] { width: 56px !important; height: 56px !important; }
	footer .lg\:col-span-1 span[style*="Montserrat"] { font-size: 1.25rem !important; }
	footer .border-t.border-white\/5 { margin-top: 3rem !important; }
	footer .border-t.border-white\/5 .flex.gap-6 { gap: 1.25rem !important; }
}

/* ─── A11y + reduced motion ─── */
footer a:focus-visible {
	outline: 2px solid rgba(249, 115, 22, 0.60);
	outline-offset: 4px;
	border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
	footer.bg-slate-900::before,
	footer.bg-slate-900::after {
		animation: none !important;
	}
	footer *,
	footer *::before,
	footer *::after {
		transition: none !important;
	}
}