:root {
  --bg-black: #09090B;
  --bg-white: #FFFFFF;
  --text-primary: #0F172A;
  --text-secondary: #334155;
  --accent-lavender: #8E44AD;
  --accent-lavender-light: #C9A6E8;
  --accent-lavender-hover: #C084FC;
  --accent-lavender-alpha: rgba(142, 68, 173, 0.12);
  --border-hairline: #E2E8F0;
  --border-hairline-hover: #CBD5E1;
  --font-serif: 'Figtree', sans-serif;
  --font-sans: 'Figtree', sans-serif;
  --font-mono: 'Figtree', sans-serif;
}

html {
  scroll-behavior: smooth;
  background: linear-gradient(180deg, #FFFFFF 0%, #FAF8FF 50%, #F5F0FB 100%) !important;
  background-attachment: fixed;
  margin: 0;
  padding: 0;
}

body {
  background: linear-gradient(180deg, #FFFFFF 0%, #FAF8FF 50%, #F5F0FB 100%) !important;
  background-attachment: fixed;
  color: #334155;
  font-family: var(--font-sans);
  overflow-x: hidden;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 100vh;
}

/* Clear section backgrounds: allow lavender gradient to shine through gracefully */
section:not(#home):not(.dark-section) {
  background-color: transparent;
}

/* Global typography color rules for light background (Medium Gray Typography) */
h1, h2, h3, h4, h5, h6,
.font-serif.text-\[\#0F172A\],
h2.text-\[\#0F172A\],
h3.text-\[\#0F172A\],
.text-\[\#0F172A\],
.font-serif.text-\[\#08080A\],
h2.text-\[\#08080A\],
h3.text-\[\#08080A\],
.text-\[\#08080A\] {
  color: #334155 !important;
}

body, p, span, li, label, dt, dd, small, td, th {
  color: #475569;
}

/* Secondary & descriptive text in clear sections */
.text-secondary,
.text-gray-500,
.text-gray-600,
.text-gray-700,
.text-slate-600,
.text-slate-700,
.text-\[\#334155\],
.text-\[\#1E293B\],
.text-\[\#08080A\]\/80,
.text-\[\#08080A\]\/85,
.text-\[\#08080A\]\/90 {
  color: #475569 !important;
}

/* Maintain header dark theme */
header,
header.bg-\[\#08080B\] {
  background-color: #09090B !important;
}

header nav a,
header span,
header a.flex,
#mobile-menu,
#mobile-menu a {
  color: #FFFFFF;
}

/* Navigation link hover/active state in lavender */
header nav a:hover,
header nav a:active,
header nav a:focus,
#mobile-menu a:hover,
#mobile-menu a:active,
#mobile-menu a:focus {
  color: #C084FC !important;
}

/* Ensure white text inside dark hero & dark elements */
#home,
#home.bg-\[\#08080B\] {
  background-color: #09090B !important;
}

#home .text-white,
#home h1 {
  color: #FFFFFF !important;
}

#home p,
#home .text-gray-300 {
  color: #E2E8F0 !important;
}

#home .text-\[\#C9A6E8\],
#home .text-\[\#8E44AD\] {
  color: #C9A6E8 !important;
}

/* Modern Service Cards & Feature Containers */
.service-card,
.feature-card,
.hairline-card {
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid #E2E8F0 !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05) !important;
  transition: all 0.3s ease !important;
}

.service-card:hover,
.feature-card:hover,
.hairline-card:hover {
  border-color: #CBD5E1 !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05) !important;
  transform: translateY(-2px);
}

/* Primary CTA Buttons (Agenda, Contacta) Styling */
button.bg-\[\#C9A6E8\],
a.bg-\[\#C9A6E8\],
.btn-primary {
  background-color: #C9A6E8 !important;
  color: #09090B !important;
  transition: all 0.25s ease !important;
}

button.bg-\[\#C9A6E8\] *,
a.bg-\[\#C9A6E8\] *,
.btn-primary * {
  color: #09090B !important;
  stroke: #09090B;
}

/* Hover state: background dark (#09090B) & text and icons crisp WHITE (#FFFFFF) */
button.bg-\[\#C9A6E8\]:hover,
button.bg-\[\#C9A6E8\]:hover *,
a.bg-\[\#C9A6E8\]:hover,
a.bg-\[\#C9A6E8\]:hover *,
.btn-primary:hover,
.btn-primary:hover * {
  background-color: #09090B !important;
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
}

/* Standalone Intermediate CTA Card (Sección de Diagnóstico) */
.cta-diagnostic-card {
  background: linear-gradient(135deg, #F3E8FF 0%, #E9D5FF 100%) !important;
  border: 1px solid #D8B4FE !important;
  border-radius: 20px !important;
  padding: 40px 32px !important;
  box-shadow: 0 10px 25px -5px rgba(168, 85, 247, 0.12), 0 8px 10px -6px rgba(168, 85, 247, 0.08) !important;
  transition: all 0.3s ease !important;
}

.cta-diagnostic-card:hover {
  border-color: #C084FC !important;
  box-shadow: 0 15px 30px -5px rgba(168, 85, 247, 0.20), 0 10px 12px -5px rgba(168, 85, 247, 0.12) !important;
}

/* Button for Diagnostic Card */
.btn-purple-cta,
button.btn-purple-cta {
  background: #7E22CE !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  border-radius: 12px !important;
  padding: 14px 28px !important;
  transition: all 0.2s ease !important;
}

.btn-purple-cta *,
button.btn-purple-cta * {
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
}

.btn-purple-cta:hover,
button.btn-purple-cta:hover,
.btn-purple-cta:hover * {
  background: #6B21A8 !important;
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(126, 34, 206, 0.3) !important;
  transform: translateY(-1px);
}

/* White CTA Buttons */
button.bg-white,
a.bg-white {
  background-color: #FFFFFF !important;
  color: #581C87 !important;
  font-weight: 700 !important;
  transition: all 0.25s ease !important;
}

button.bg-white *,
a.bg-white * {
  color: #581C87 !important;
  stroke: #581C87;
  font-weight: 700 !important;
}

button.bg-white:hover,
a.bg-white:hover {
  background-color: #09090B !important;
  color: #FFFFFF !important;
}

button.bg-white:hover *,
a.bg-white:hover * {
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
}

/* 90% Rich Lavender Section Background */
.bg-rich-lavender {
  background: linear-gradient(135deg, #D8B4FE 0%, #C9A6E8 50%, #E9D5FF 100%) !important;
}

/* Footer styles: 100% Solid Dark (#09090B) */
footer {
  background-color: #09090B !important;
  background: #09090B !important;
  color: #94A3B8 !important;
  margin: 0 !important;
  margin-bottom: 0 !important;
  width: 100% !important;
  position: relative;
  z-index: 20;
}

footer p,
footer span,
footer li,
footer div,
footer small,
footer td,
footer th,
footer .text-xs,
footer .text-sm,
footer .font-mono,
footer .text-white\/60,
footer .text-white\/80 {
  color: #94A3B8 !important;
}

footer .text-white,
footer h3,
footer h4 {
  color: #F8FAFC !important;
}

footer a {
  color: #94A3B8 !important;
  transition: color 0.3s ease !important;
}

footer a:hover,
footer a:focus {
  color: #C084FC !important;
}

/* Selection */
::selection {
  background: var(--accent-lavender-alpha);
  color: #0F172A;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: #FAF8FF;
}
::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #C084FC;
}

/* Focus styles for accessibility */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid #C084FC;
  outline-offset: 2px;
}

/* Accordion Transition */
.faq-icon {
  transition: transform 0.3s ease;
}

.faq-active .faq-icon {
  transform: rotate(45deg);
}

/* Smooth Scroll reveal class */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-on-scroll.revealed {
  opacity: 1;
  transform: translateY(0);
}