/**
 * estilos-config.css - Hoja de Estilos Dinámica e Independiente
 * Generado para: Lic. Tanya Vélez Z.
 * Especialidad: Terapeuta Ocupacional
 * Estilo Visual: Vibrante & Dinámico (vibrante)
 * Paleta Croma: morado (#7c3aed)
 * Estilo CTA: flotante
 * Fecha de Generación: 21/8/2026
 *
 * Puedes modificar esta hoja de estilos directamente en tu servidor para personalizar
 * fuentes, colores, esquinas, sombras, espaciados y animaciones sin tocar el HTML.
 */

/* ==========================================================================
   1. IMPORTACIÓN DE FUENTES GOOGLE FONTS DINÁMICAS
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..800;1,9..40,400..700&family=Plus+Jakarta+Sans:wght@700;800;900&display=swap');

/* ==========================================================================
   2. VARIABLES CSS GLOBALES (:root)
   ========================================================================== */
:root {
  /* --- TIPOGRAFÍAS DE LA LANDING --- */
  --landing-font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --landing-font-body: 'DM Sans', system-ui, sans-serif;

  /* --- PALETA CROMÁTICA OFICIAL (MORADO) --- */
  --color-primary-50: #faf5ff;
  --color-primary-100: #f3e8ff;
  --color-primary-200: #e9d5ff;
  --color-primary-300: undefined;
  --color-primary-400: undefined;
  --color-primary-500: #8b5cf6;
  --color-primary-600: #7c3aed;
  --color-primary-700: #6d28d9;
  --color-primary-800: #5b21b6;
  --color-primary-900: #4c1d95;
  --color-primary-950: undefined;

  /* Accesos Directos de Color */
  --color-primary-base: #7c3aed;
  --color-primary-dark: #6d28d9;
  --color-primary-light: #8b5cf6;
  --color-slate-heading: #0f172a;
  --color-slate-body: #334155;

  /* --- GEOMETRÍA, BORDES Y RADIOS (24px (Curvo Amigable)) --- */
  --landing-radius: 24px;
  --landing-radius-sm: 14px;
  --landing-radius-lg: 32px;
  --landing-radius-xl: 40px;
  --landing-radius-btn: 9999px;
  --landing-badge-radius: 9999px;
  --landing-border-width: 1.5px;

  /* --- ESPACIADOS, SOMBRAS Y TARJETAS --- */
  --landing-section-py: 3.75rem;
  --landing-card-p: 1.5rem;
  --landing-gap: 1.25rem;
  --landing-shadow: 0 12px 36px -6px rgba(15, 23, 42, 0.09);
  --landing-card-bg: #ffffff;
  --landing-letter-spacing: 0.005em;
}

/* ==========================================================================
   3. ESTILOS DE BASE Y TIPOGRAFÍA
   ========================================================================== */
body {
  font-family: var(--landing-font-body);
  color: var(--color-slate-body);
  background-color: #f8fafc;
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6, .font-display {
  font-family: var(--landing-font-display);
  letter-spacing: var(--landing-letter-spacing);
}

/* ==========================================================================
   4. COMPONENTES Y TARJETAS PERSONALIZADAS
   ========================================================================== */
.landing-card {
  background-color: var(--landing-card-bg);
  border-radius: var(--landing-radius-lg);
  padding: var(--landing-card-p);
  box-shadow: var(--landing-shadow);
  border: var(--landing-border-width) solid #e2e8f0;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.landing-card:hover {
  border-color: var(--color-primary-200);
  box-shadow: 0 12px 30px -5px #7c3aed1f;
  transform: translateY(-2px);
}

/* Badges e Insignias E-E-A-T */
.landing-badge {
  background-color: var(--color-primary-50);
  color: var(--color-primary-800);
  border: 1px solid var(--color-primary-200);
  border-radius: var(--landing-badge-radius);
  font-size: 0.75rem;
  font-weight: 800;
  padding: 0.25rem 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* ==========================================================================
   5. BOTONES DE ACCIÓN PRINCIPAL Y SECUNDARIA
   ========================================================================== */
.landing-btn-primary {
  background-color: var(--color-primary-base);
  color: #ffffff !important;
  border-radius: var(--landing-radius-btn);
  font-family: var(--landing-font-body);
  font-weight: 800;
  padding: 0.85rem 1.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 14px #7c3aed40;
  border: none;
  cursor: pointer;
  text-decoration: none;
}

.landing-btn-primary:hover {
  background-color: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px #7c3aed59;
}

.landing-btn-primary:active {
  transform: translateY(0);
}

.landing-btn-secondary {
  background-color: var(--color-primary-50);
  color: var(--color-primary-800) !important;
  border: 1px solid var(--color-primary-200);
  border-radius: var(--landing-radius-btn);
  font-family: var(--landing-font-body);
  font-weight: 700;
  padding: 0.85rem 1.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.2s ease;
  cursor: pointer;
  text-decoration: none;
}

.landing-btn-secondary:hover {
  background-color: var(--color-primary-100);
  border-color: var(--color-primary-300);
  color: var(--color-primary-900) !important;
}

/* ==========================================================================
   6. ANIMACIONES & ESTILOS DE LLAMADOS A LA ACCIÓN (CTA)
   ========================================================================== */

/* CTA Flotante Elegante */
.cta-floating-widget {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 45;
  box-shadow: 0 10px 30px #7c3aed4d;
  border-radius: var(--landing-radius-btn);
}


/* ==========================================================================
   7. FONDOS DE SECCIÓN Y ACENTOS CROMÁTICOS
   ========================================================================== */
.hero-gradient-bg {
  background: linear-gradient(135deg, #faf5ff 0%, #ffffff 55%, #f3e8ff33 100%);
}

.accent-color-text {
  color: var(--color-primary-base);
}

.accent-color-bg {
  background-color: var(--color-primary-base);
}

/* Scrollbar Personalizado */
::-webkit-scrollbar {
  width: 9px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
  background: var(--color-primary-300);
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary-500);
}