/* ════════════════════════════════════════════════════════════
   ClasesdeSki "Calcula Tu Experiencia" (#pricing) — v1.1
   v1.1 = CONSERVATIVE.  v1.0 broke active-state visibility of the
   form option buttons (Ski/Snowboard/Grupal/Privada/Half/Full Day)
   and washed out the "Detalles adicionales" dark sub-section labels.
   Now we keep ONLY the safe, non-invasive bits:
     - The critical contrast fix for the two bottom paragraphs
       (text-white/25 and text-white/50 on light bg).
     - Section heading: accent gradient bar (no font-size override).
     - Section bg: warm orange + sky decorative glows.
     - Sticky pricing card: refined shadow + hover.
     - Big price: text-gradient.
     - WhatsApp CTA: green gradient + glow.
   We DELETE the broad overrides on form buttons / labels / steppers
   that interfered with the Next.js component's own active state
   styling.
   ════════════════════════════════════════════════════════════ */

/* ─── 1) CRITICAL CONTRAST FIX (text-white/XX on light bg = invisible) ─── */
/* "Sujeto a disponibilidad. Ropa de nieve y guantes..." */
#pricing p.text-white\/25,
#pricing p[class*="text-white/25"] {
	color: rgba(71, 85, 105, 0.85) !important;     /* slate-600 */
	font-size: 12px !important;
	line-height: 1.55 !important;
}

/* "El ticket de pista (lift ticket)..." */
#pricing .bg-slate-50 span.text-white\/50,
#pricing .bg-slate-50 [class*="text-white/50"] {
	color: rgba(51, 65, 85, 0.92) !important;      /* slate-700 */
}

/* The info-callout container */
#pricing .bg-slate-50 {
	background: rgba(241, 245, 249, 0.85) !important;
	border-color: rgba(186, 230, 253, 0.65) !important;
}
#pricing .bg-slate-50 svg.text-blue-400 {
	color: #0284c7 !important;
}

/* ─── 2) SECTION BACKGROUND — subtle decorative glows only ─── */
#pricing {
	position: relative;
	overflow: hidden;
}
#pricing::before {
	content: '';
	position: absolute;
	top: -120px;
	right: -120px;
	width: 540px;
	height: 540px;
	background: radial-gradient(circle, rgba(249, 115, 22, 0.08) 0%, transparent 65%);
	pointer-events: none;
	z-index: 0;
}
#pricing::after {
	content: '';
	position: absolute;
	bottom: -100px;
	left: -100px;
	width: 460px;
	height: 460px;
	background: radial-gradient(circle, rgba(14, 165, 233, 0.10) 0%, transparent 60%);
	pointer-events: none;
	z-index: 0;
}
#pricing > div { position: relative; z-index: 1; }

/* ─── 3) SECTION HEADING — accent bar only, no size override ─── */
/* The center wrapper above the grid hosts the H2 + paragraph */
#pricing > div > div:first-child {
	position: relative;
	padding-bottom: 22px;
}
#pricing > div > div:first-child::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 56px;
	height: 3px;
	border-radius: 3px;
	background: linear-gradient(90deg, #f97316, #fb923c);
	box-shadow: 0 0 14px rgba(249, 115, 22, 0.45);
}

/* ─── 4) RIGHT-SIDE STICKY PRICING CARD — refined shadow + hover lift ─── */
#pricing div.sticky.top-24 {
	box-shadow:
		0 18px 40px rgba(15, 23, 42, 0.10),
		0 6px 16px rgba(15, 23, 42, 0.06) !important;
	transition: box-shadow 0.3s ease;
}
#pricing div.sticky.top-24:hover {
	box-shadow:
		0 24px 56px rgba(15, 23, 42, 0.14),
		0 8px 20px rgba(15, 23, 42, 0.08) !important;
}

/* ─── 5) BIG PRICE inside the sticky card — text-gradient ─── */
/* Only target the "$156.000" big total, not other prices */
#pricing div.sticky [class*="text-3xl"][class*="text-orange"],
#pricing div.sticky [class*="text-4xl"][class*="text-orange"] {
	background: linear-gradient(135deg, #ea580c, #fb923c);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow(0 2px 6px rgba(249, 115, 22, 0.25));
}

/* ─── 6) "Reservar por WhatsApp" CTA inside the pricing card ─── */
#pricing a[href*="wa.me"][class*="bg-green-600"] {
	background: linear-gradient(135deg, #16a34a, #22c55e) !important;
	box-shadow: 0 8px 20px rgba(34, 197, 94, 0.30) !important;
	transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
#pricing a[href*="wa.me"][class*="bg-green-600"]:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 28px rgba(34, 197, 94, 0.40) !important;
}

/* ─── 7) Accessibility ─── */
@media (prefers-reduced-motion: reduce) {
	#pricing div.sticky.top-24,
	#pricing a[href*="wa.me"][class*="bg-green-600"] {
		transition: none !important;
	}
}