/**
 * estilos-config.css - Hoja de Estilos Dinámica e Independiente
 * Generado para: Lic. Tanya Vélez Z.
 * Especialidad: Terapeuta Ocupacional
 * Estilo Visual: Académico & Científico (academico)
 * Paleta Croma Primaria: azul (#1e6fd9)
 * Paleta Croma Secundaria: #ff2969
 * Paleta Croma Acento: #c0cd04
 * Estilo CTA: flotante
 * Fecha de Generación: 27/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=Inter:wght@300;400;500;600;700;800&display=swap');

/* ==========================================================================
   2. VARIABLES CSS GLOBALES (:root)
   ========================================================================== */
:root {
  /* --- TIPOGRAFÍAS DE LA LANDING --- */
  --font-heading: 'Lora', Georgia, serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --landing-font-display: var(--font-heading);
  --landing-font-body: var(--font-body);

  /* --- PALETA CROMÁTICA PRIMARIA (AZUL) --- */
  --color-primary-50: #f2f6fd;
  --color-primary-100: #dfebfa;
  --color-primary-200: #c0d7f4;
  --color-primary-300: #9abeee;
  --color-primary-400: #6da1e6;
  --color-primary-500: #4085df;
  --color-primary-600: #1e6fd9;
  --color-primary-700: #195bb2;
  --color-primary-800: #144b94;
  --color-primary-900: #103c75;
  --color-primary-950: #0c2c57;

  --clinical-50: #f2f6fd;
  --clinical-100: #dfebfa;
  --clinical-200: #c0d7f4;
  --clinical-500: #4085df;
  --clinical-600: #1e6fd9;
  --clinical-700: #195bb2;
  --clinical-800: #144b94;
  --clinical-900: #103c75;

  /* Accesos Directos de Color Primario */
  --color-primary-base: #1e6fd9;
  --color-primary-dark: #195bb2;
  --color-primary-light: #4085df;

  /* --- PALETA CROMÁTICA SECUNDARIA --- */
  --color-secondary-50: #fff2f6;
  --color-secondary-100: #ffe1ea;
  --color-secondary-200: #ffc3d5;
  --color-secondary-300: #ff9fbc;
  --color-secondary-400: #ff749e;
  --color-secondary-500: #ff4980;
  --color-secondary-600: #ff2969;
  --color-secondary-700: #d12256;
  --color-secondary-800: #ad1c47;
  --color-secondary-900: #8a1639;

  --secondary-50: #fff2f6;
  --secondary-100: #ffe1ea;
  --secondary-200: #ffc3d5;
  --secondary-500: #ff4980;
  --secondary-600: #ff2969;
  --secondary-700: #d12256;
  --secondary-800: #ad1c47;
  --secondary-900: #8a1639;

  --color-secondary-base: #ff2969;
  --color-secondary-dark: #d12256;
  --color-secondary-light: #ff4980;

  /* --- PALETA CROMÁTICA DE ACENTOS --- */
  --color-accent-50: #fbfcf0;
  --color-accent-100: #f6f8dc;
  --color-accent-200: #edf1b9;
  --color-accent-300: #e3e98e;
  --color-accent-400: #d6df5c;
  --color-accent-500: #c9d52a;
  --color-accent-600: #c0cd04;
  --color-accent-700: #9da803;
  --color-accent-800: #838b03;
  --color-accent-900: #686f02;

  --accent-50: #fbfcf0;
  --accent-100: #f6f8dc;
  --accent-200: #edf1b9;
  --accent-500: #c9d52a;
  --accent-600: #c0cd04;
  --accent-700: #9da803;
  --accent-800: #838b03;
  --accent-900: #686f02;

  --color-accent-base: #c0cd04;
  --color-accent-dark: #9da803;
  --color-accent-light: #c9d52a;

  --color-slate-heading: #0f172a;
  --color-slate-body: #334155;

  /* --- GEOMETRÍA, BORDES Y RADIOS (4px (Rectangular Riguroso)) --- */
  --landing-radius: 4px;
  --landing-radius-sm: 2px;
  --landing-radius-lg: 6px;
  --landing-radius-xl: 10px;
  --landing-radius-btn: 4px;
  --landing-badge-radius: 2px;
  --landing-border-width: 1px;

  /* --- ESPACIADOS, SOMBRAS Y TARJETAS --- */
  --landing-section-py: 5rem;
  --landing-card-p: 1.5rem;
  --landing-gap: 1.5rem;
  --landing-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
  --landing-card-bg: #ffffff;
  --landing-letter-spacing: -0.01em;
}

/* ==========================================================================
   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 #1e6fd91f;
  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 #1e6fd940;
  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 #1e6fd959;
}

.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)
   ========================================================================== */
@keyframes heartbeat {
  0%, 100% {
    transform: scale(1);
  }
  14% {
    transform: scale(1.04);
  }
  28% {
    transform: scale(1);
  }
  42% {
    transform: scale(1.06);
  }
  70% {
    transform: scale(1);
  }
}

.animate-heartbeat {
  animation: heartbeat 1.8s ease-in-out infinite;
}


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


/* ==========================================================================
   7. FONDOS DE SECCIÓN Y ACENTOS CROMÁTICOS
   ========================================================================== */
.hero-gradient-bg {
  background: linear-gradient(135deg, #f2f6fd 0%, #ffffff 55%, #dfebfa33 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);
}