/**
 * Design Tokens — Dental Group JS
 * Philosophy: Dark Luxury Medical
 * Stack: WordPress + Elementor (Oracare Dark kit)
 *
 * Cómo usar en WordPress/Elementor:
 * → Elementor > Site Settings > Custom CSS (aplica globalmente)
 * → O WordPress Customizer > CSS adicional
 *
 * Todos los componentes de Elementor deben referenciar estas variables
 * en lugar de valores hardcodeados. En Elementor Pro, usar en campos
 * de CSS personalizado de cada widget: var(--color-bg-primary), etc.
 */

/* ============================================================
   PALETA RAW (valores base — no usar directamente en componentes)
   ============================================================ */
:root {
  /* Raw gold scale */
  --raw-gold-deep:      #A8893A;   /* Dorado oscuro — hover de botones secundarios */
  --raw-gold-base:      #C9A84C;   /* Dorado principal — logo */
  --raw-gold-bright:    #F0C060;   /* Dorado brillante — hover, highlights */
  --raw-gold-cream:     #E8D5A3;   /* Dorado crema — cuerpo de texto */
  --raw-gold-pale:      #F5EDD5;   /* Dorado pálido — texto de alto contraste */

  /* Raw navy scale */
  --raw-navy-black:     #080F18;   /* Negro navy — fondos más profundos */
  --raw-navy-darkest:   #0A0F1A;   /* Fondo principal */
  --raw-navy-deep:      #0D1A2A;   /* Deep navy — secciones especiales */
  --raw-navy-variant:   #111E30;   /* Fondo secciones alternas */
  --raw-navy-medium:    #1B2A3F;   /* Navy intermedio */
  --raw-navy-card:      #354A6E;   /* Navy para cards y elementos de apoyo */
  --raw-navy-light:     #4A6491;   /* Navy claro — bordes visibles */

  /* Raw alpha utilities */
  --raw-gold-alpha-05:  rgba(201, 168, 76, 0.05);
  --raw-gold-alpha-12:  rgba(201, 168, 76, 0.12);
  --raw-gold-alpha-25:  rgba(201, 168, 76, 0.25);
  --raw-gold-alpha-40:  rgba(201, 168, 76, 0.40);
  --raw-gold-alpha-66:  rgba(201, 168, 76, 0.66);
  --raw-white-alpha-30: rgba(255, 255, 255, 0.30);
  --raw-white-alpha-60: rgba(255, 255, 255, 0.60);
  --raw-white-alpha-90: rgba(255, 255, 255, 0.90);
  --raw-black-alpha-40: rgba(0, 0, 0, 0.40);
  --raw-black-alpha-70: rgba(0, 0, 0, 0.70);

  /* Raw status */
  --raw-success:        #2ECC71;
  --raw-warning:        #F39C12;
  --raw-error:          #E74C3C;
  --raw-whatsapp:       #25D366;
}

/* ============================================================
   TOKENS SEMÁNTICOS — COLORES
   (estos son los que se usan en componentes)
   ============================================================ */
:root {
  /* Fondos */
  --color-bg-primary:         var(--raw-navy-darkest);   /* #0A0F1A — fondo base de todo el sitio */
  --color-bg-secondary:       var(--raw-navy-variant);   /* #111E30 — fondo secciones alternas */
  --color-bg-tertiary:        var(--raw-navy-deep);       /* #0D1A2A — fondos de inputs, wells */
  --color-bg-card:            var(--raw-navy-card);       /* #354A6E — cards de apoyo */
  --color-bg-card-subtle:     var(--raw-gold-alpha-05);   /* Tinte dorado sutil en cards */
  --color-bg-overlay:         var(--raw-black-alpha-70);  /* Backdrop de modales y drawers */
  --color-bg-inverse:         var(--raw-gold-cream);      /* Fondo invertido (uso puntual) */

  /* Texto */
  --color-text-primary:       var(--raw-gold-base);       /* #C9A84C — títulos principales */
  --color-text-body:          var(--raw-gold-cream);      /* #E8D5A3 — cuerpo de texto */
  --color-text-secondary:     var(--raw-white-alpha-60);  /* Texto subdued, metadatos */
  --color-text-tertiary:      var(--raw-white-alpha-30);  /* Placeholder, disabled */
  --color-text-inverse:       var(--raw-navy-darkest);    /* Texto sobre fondos dorados */
  --color-text-display:       var(--raw-gold-pale);       /* #F5EDD5 — hero headlines */

  /* Links */
  --color-text-link:          var(--raw-gold-base);       /* #C9A84C */
  --color-text-link-hover:    var(--raw-gold-bright);     /* #F0C060 */
  --color-text-link-visited:  var(--raw-gold-deep);

  /* Bordes */
  --color-border-primary:     var(--raw-gold-alpha-25);   /* Borde principal de secciones */
  --color-border-secondary:   var(--raw-gold-alpha-12);   /* Borde sutil de cards */
  --color-border-card:        var(--raw-gold-alpha-12);   /* Borde de cards en variant bg */
  --color-border-focus:       var(--raw-gold-bright);     /* Ring de foco accesible */
  --color-border-divider:     var(--raw-navy-medium);     /* Separadores horizontales */

  /* Acciones / CTA */
  --color-accent-primary:     var(--raw-gold-base);       /* #C9A84C — botón primario */
  --color-accent-primary-hover:  var(--raw-gold-bright);  /* #F0C060 */
  --color-accent-primary-active: var(--raw-gold-deep);    /* #A8893A */
  --color-accent-primary-text:   var(--raw-navy-darkest); /* Texto sobre botón dorado */
  --color-accent-secondary:   var(--raw-navy-card);       /* #354A6E — botón secundario */
  --color-accent-secondary-hover: var(--raw-navy-medium); /* Hover del secundario */

  /* Status */
  --color-status-success:     var(--raw-success);
  --color-status-warning:     var(--raw-warning);
  --color-status-error:       var(--raw-error);
  --color-status-whatsapp:    var(--raw-whatsapp);        /* #25D366 — FAB y CTAs WhatsApp */

  /* Sombras */
  --color-shadow-gold:        rgba(201, 168, 76, 0.20);
  --color-shadow-dark:        rgba(0, 0, 0, 0.50);
}

/* ============================================================
   TIPOGRAFÍA
   ============================================================ */
:root {
  /* Familias (alineadas con el kit Oracare) */
  --font-family-display:  'Urbanist', 'Inter', sans-serif;       /* Headings, display, nav */
  --font-family-body:     'Roboto', 'Helvetica Neue', sans-serif; /* Cuerpo de texto */
  --font-family-accent:   'Roboto Slab', 'Georgia', serif;        /* Citas, destacados */
  --font-family-mono:     'JetBrains Mono', 'Courier New', monospace; /* Código (raro uso) */

  /* Escala de tamaños (base 16px = 1rem) */
  --font-size-xs:    0.75rem;    /*  12px — labels, legal, captions */
  --font-size-sm:    0.875rem;   /*  14px — metadata, tags */
  --font-size-base:  1rem;       /*  16px — cuerpo estándar */
  --font-size-md:    1.125rem;   /*  18px — cuerpo cómodo, párrafos de servicios */
  --font-size-lg:    1.25rem;    /*  20px — intro text, lead paragraphs */
  --font-size-xl:    1.5rem;     /*  24px — h5, subtítulos de sección */
  --font-size-2xl:   2rem;       /*  32px — h4, títulos de cards */
  --font-size-3xl:   2.5rem;     /*  40px — h3, títulos de página */
  --font-size-4xl:   3.125rem;   /*  50px — h2, headlines de sección */
  --font-size-5xl:   3.75rem;    /*  60px — h1, hero headline desktop */
  --font-size-display: 5rem;     /*  80px — display hero, impacto máximo */

  /* Pesos */
  --font-weight-light:     300;
  --font-weight-normal:    400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;
  --font-weight-extrabold: 800;

  /* Interlineado */
  --line-height-tight:    1.15;  /* Headings grandes, display */
  --line-height-snug:     1.3;   /* Headings medianos */
  --line-height-normal:   1.5;   /* Cuerpo de texto estándar */
  --line-height-relaxed:  1.7;   /* Párrafos largos, legibilidad máxima */

  /* Espaciado entre letras */
  --letter-spacing-tight:   -0.02em; /* Display type, headings grandes */
  --letter-spacing-normal:   0em;
  --letter-spacing-wide:     0.05em; /* All-caps labels, tags */
  --letter-spacing-wider:    0.1em;  /* Subtítulos en mayúsculas */
  --letter-spacing-widest:   0.15em; /* OVERLINES, EYEBROWS */
}

/* ============================================================
   ESPACIADO (base 8px)
   Filosofía: espacioso — Dark Luxury necesita respiro visual
   ============================================================ */
:root {
  --space-0:    0;
  --space-1:    0.25rem;   /*   4px */
  --space-2:    0.5rem;    /*   8px */
  --space-3:    0.75rem;   /*  12px */
  --space-4:    1rem;      /*  16px */
  --space-5:    1.5rem;    /*  24px */
  --space-6:    2rem;      /*  32px */
  --space-7:    3rem;      /*  48px */
  --space-8:    4rem;      /*  64px */
  --space-9:    6rem;      /*  96px */
  --space-10:   8rem;      /* 128px */
  --space-11:   12rem;     /* 192px */
  --space-12:   16rem;     /* 256px */

  /* Aliases semánticos */
  --space-section-y:        var(--space-9);   /* Padding vertical de secciones: 96px */
  --space-section-y-sm:     var(--space-8);   /* Secciones compactas: 64px */
  --space-container-x:      var(--space-6);   /* Padding horizontal del contenedor: 32px */
  --space-container-x-sm:   var(--space-5);   /* Mobile: 24px */
  --space-card-padding:      var(--space-6);   /* Padding interno de cards: 32px */
  --space-card-gap:          var(--space-5);   /* Gap entre cards: 24px */
  --space-stack-sm:          var(--space-3);   /* Stack de elementos pequeños: 12px */
  --space-stack-md:          var(--space-5);   /* Stack de elementos medianos: 24px */
  --space-stack-lg:          var(--space-7);   /* Stack de elementos grandes: 48px */
}

/* ============================================================
   LAYOUT
   ============================================================ */
:root {
  /* Anchos máximos */
  --max-width-text:      65ch;     /* Ancho óptimo de lectura (~650px) */
  --max-width-content:   860px;    /* Contenido central */
  --max-width-wide:      1140px;   /* Grids y secciones amplias */
  --max-width-page:      1280px;   /* Ancho máximo del contenedor de página */
  --max-width-full:      1440px;   /* Ancho máximo absoluto (hero backgrounds) */

  /* Border radius */
  --radius-none:    0;
  --radius-sm:      4px;    /* Tags, badges pequeños */
  --radius-md:      8px;    /* Inputs, botones compactos */
  --radius-lg:      12px;   /* Cards de servicios */
  --radius-xl:      16px;   /* Cards de equipo, modales */
  --radius-2xl:     24px;   /* Cards hero, secciones con bordes redondeados */
  --radius-full:    9999px; /* Pills, FAB de WhatsApp, avatares */

  /* Z-index scale */
  --z-below:      -1;
  --z-base:        0;
  --z-above:       1;
  --z-dropdown:    100;
  --z-sticky:      200;
  --z-overlay:     300;
  --z-modal:       400;
  --z-toast:       500;
  --z-fab:         600;    /* WhatsApp FAB — siempre encima de todo */
}

/* ============================================================
   SOMBRAS
   (en dark luxury: sutiles, con tinte dorado donde corresponde)
   ============================================================ */
:root {
  --shadow-sm:      0 1px 3px var(--color-shadow-dark);
  --shadow-md:      0 4px 12px var(--color-shadow-dark);
  --shadow-lg:      0 8px 24px var(--color-shadow-dark);
  --shadow-xl:      0 16px 48px var(--color-shadow-dark);

  --shadow-gold-sm: 0 2px 8px var(--color-shadow-gold);
  --shadow-gold-md: 0 4px 20px var(--color-shadow-gold);
  --shadow-gold-lg: 0 8px 40px var(--color-shadow-gold); /* Cards en hover */

  --shadow-focus:   0 0 0 3px var(--color-border-focus); /* Accesibilidad: ring de foco */

  --shadow-card:    0 4px 24px rgba(0, 0, 0, 0.40), 0 1px 4px rgba(0, 0, 0, 0.30);
  --shadow-card-hover: 0 8px 32px rgba(0, 0, 0, 0.50), 0 0 0 1px var(--raw-gold-alpha-25);
}

/* ============================================================
   MOTION
   ============================================================ */
:root {
  --duration-instant:  50ms;
  --duration-fast:     150ms;   /* Hover states, micro-feedback */
  --duration-normal:   250ms;   /* Transiciones estándar */
  --duration-slow:     400ms;   /* Entradas de componentes */
  --duration-slower:   600ms;   /* Animaciones de sección */
  --duration-page:     800ms;   /* Transiciones de página */

  --easing-default:  cubic-bezier(0.4, 0, 0.2, 1);   /* Material standard */
  --easing-in:       cubic-bezier(0.4, 0, 1, 1);      /* Salidas */
  --easing-out:      cubic-bezier(0, 0, 0.2, 1);      /* Entradas */
  --easing-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1); /* FAB, tooltips */
  --easing-luxury:   cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Sensación premium suave */
}

/* ============================================================
   BREAKPOINTS
   (documentados como custom properties — usar en JS si se necesita)
   ============================================================ */
:root {
  --breakpoint-xs:   375px;   /* Mobile pequeño (iPhone SE) */
  --breakpoint-sm:   480px;   /* Mobile grande */
  --breakpoint-md:   768px;   /* Tablet */
  --breakpoint-lg:   1024px;  /* Desktop pequeño */
  --breakpoint-xl:   1280px;  /* Desktop estándar */
  --breakpoint-2xl:  1536px;  /* Desktop ancho */
}

/* ============================================================
   TOKENS DE COMPONENTES
   (valores específicos de componentes — evita hardcoding en widgets)
   ============================================================ */
:root {
  /* Header */
  --header-height:          80px;
  --header-height-mobile:   64px;
  --header-bg:              rgba(10, 15, 26, 0.95);  /* Navy con blur backdrop */
  --header-border-bottom:   var(--color-border-primary);

  /* Botón primario (CTA dorado) */
  --btn-primary-bg:         var(--color-accent-primary);
  --btn-primary-bg-hover:   var(--color-accent-primary-hover);
  --btn-primary-bg-active:  var(--color-accent-primary-active);
  --btn-primary-text:       var(--color-accent-primary-text);
  --btn-primary-radius:     var(--radius-md);
  --btn-primary-padding:    var(--space-3) var(--space-6);
  --btn-primary-font-size:  var(--font-size-base);
  --btn-primary-font-weight: var(--font-weight-semibold);
  --btn-primary-shadow:     var(--shadow-gold-sm);
  --btn-primary-shadow-hover: var(--shadow-gold-md);

  /* Botón secundario (outline dorado) */
  --btn-secondary-bg:       transparent;
  --btn-secondary-bg-hover: var(--raw-gold-alpha-12);
  --btn-secondary-border:   var(--raw-gold-alpha-40);
  --btn-secondary-border-hover: var(--color-accent-primary);
  --btn-secondary-text:     var(--color-accent-primary);

  /* Botón WhatsApp */
  --btn-whatsapp-bg:        var(--color-status-whatsapp);
  --btn-whatsapp-bg-hover:  #22BB5B;
  --btn-whatsapp-text:      #FFFFFF;
  --btn-whatsapp-shadow:    0 4px 20px rgba(37, 211, 102, 0.30);

  /* Cards de servicios */
  --card-service-bg:        var(--raw-gold-alpha-05);
  --card-service-border:    var(--color-border-card);
  --card-service-border-hover: var(--raw-gold-alpha-40);
  --card-service-radius:    var(--radius-lg);
  --card-service-padding:   var(--space-6);
  --card-service-shadow:    var(--shadow-card);
  --card-service-shadow-hover: var(--shadow-card-hover);

  /* Cards de equipo */
  --card-team-bg:           var(--raw-navy-card);
  --card-team-border:       var(--color-border-secondary);
  --card-team-border-hover: var(--color-accent-primary);
  --card-team-radius:       var(--radius-xl);

  /* Sección alterna (Variant Bg) */
  --section-variant-bg:     var(--color-bg-secondary);
  --section-variant-border-top: var(--color-border-primary);

  /* WhatsApp FAB */
  --fab-size:               56px;
  --fab-size-mobile:        52px;
  --fab-bg:                 var(--color-status-whatsapp);
  --fab-shadow:             var(--btn-whatsapp-shadow);
  --fab-radius:             var(--radius-full);
  --fab-z-index:            var(--z-fab);
  --fab-bottom:             var(--space-6);
  --fab-right:              var(--space-6);

  /* Inputs */
  --input-bg:               var(--color-bg-tertiary);
  --input-border:           var(--color-border-secondary);
  --input-border-focus:     var(--color-border-focus);
  --input-text:             var(--color-text-body);
  --input-placeholder:      var(--color-text-tertiary);
  --input-radius:           var(--radius-md);
  --input-padding:          var(--space-3) var(--space-4);

  /* Divider con tinte dorado (borde superior secciones alternas) */
  --divider-gold:           1px solid var(--raw-gold-alpha-25);
}

/* ============================================================
   MODO OSCURO PERMANENTE (el sitio siempre es dark)
   Todas las reglas base en :root ya son el tema oscuro.

   El siguiente bloque define overrides mínimos para si algún día
   se quiere agregar una sección o componente con fondo claro.
   ============================================================ */
[data-theme="light-section"] {
  --color-bg-primary:       #F8F5EE;  /* Beige cálido — contrasta con el navy */
  --color-bg-secondary:     #FFFFFF;
  --color-text-primary:     var(--raw-navy-darkest);
  --color-text-body:        var(--raw-navy-deep);
  --color-text-secondary:   var(--raw-navy-medium);
  --color-border-primary:   var(--raw-gold-alpha-40);
  --color-accent-primary:   var(--raw-gold-base);
  --card-service-bg:        #FFFFFF;
  --card-service-border:    var(--raw-gold-alpha-25);
}

/* ============================================================
   UTILIDADES GLOBALES
   ============================================================ */

/* Smooth scroll para anchor links */
html {
  scroll-behavior: smooth;
}

/* Box sizing universal */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Selección de texto en dorado */
::selection {
  background-color: var(--raw-gold-alpha-40);
  color: var(--raw-gold-pale);
}

/* Focus visible accesible — reemplaza outline por defecto */
:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 3px;
}

/* Scrollbar estilizada (Webkit) */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--raw-navy-black);
}
::-webkit-scrollbar-thumb {
  background: var(--raw-gold-alpha-40);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--raw-gold-base);
}

/* ============================================================
   ANIMACIONES BASE
   ============================================================ */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes goldPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 168, 76, 0.4); }
  50%       { box-shadow: 0 0 0 8px rgba(201, 168, 76, 0); }
}

@keyframes fabBounce {
  0%   { transform: scale(0) rotate(-45deg); opacity: 0; }
  60%  { transform: scale(1.1) rotate(5deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* Reduce motion para accesibilidad */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html {
    scroll-behavior: auto;
  }
}

/* ============================================================
   CLASES DE UTILIDAD (compatibles con Elementor Custom Classes)
   ============================================================ */

.dg-section-dark {
  background-color: var(--color-bg-primary);
  padding: var(--space-section-y) var(--space-container-x);
}

.dg-section-variant {
  background-color: var(--color-bg-secondary);
  border-top: var(--divider-gold);
  padding: var(--space-section-y) var(--space-container-x);
}

.dg-container {
  max-width: var(--max-width-page);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-container-x);
  padding-right: var(--space-container-x);
}

.dg-text-gold      { color: var(--color-text-primary); }
.dg-text-cream     { color: var(--color-text-body); }
.dg-text-dim       { color: var(--color-text-secondary); }
.dg-text-display   { color: var(--color-text-display); }

.dg-heading {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-primary);
}

.dg-card {
  background: var(--card-service-bg);
  border: 1px solid var(--card-service-border);
  border-radius: var(--card-service-radius);
  padding: var(--card-service-padding);
  box-shadow: var(--card-service-shadow);
  transition: border-color var(--duration-normal) var(--easing-luxury),
              box-shadow   var(--duration-normal) var(--easing-luxury);
}

.dg-card:hover {
  border-color: var(--card-service-border-hover);
  box-shadow: var(--card-service-shadow-hover);
}

.dg-btn-primary {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border-radius: var(--btn-primary-radius);
  padding: var(--btn-primary-padding);
  font-family: var(--font-family-display);
  font-size: var(--btn-primary-font-size);
  font-weight: var(--btn-primary-font-weight);
  box-shadow: var(--btn-primary-shadow);
  transition: background-color var(--duration-fast) var(--easing-default),
              box-shadow       var(--duration-fast) var(--easing-default),
              transform        var(--duration-fast) var(--easing-default);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  border: none;
}

.dg-btn-primary:hover {
  background-color: var(--btn-primary-bg-hover);
  box-shadow: var(--btn-primary-shadow-hover);
  transform: translateY(-1px);
}

.dg-btn-primary:active {
  background-color: var(--btn-primary-bg-active);
  transform: translateY(0);
}

.dg-btn-whatsapp {
  background-color: var(--btn-whatsapp-bg);
  color: var(--btn-whatsapp-text);
  box-shadow: var(--btn-whatsapp-shadow);
  border-radius: var(--btn-primary-radius);
  padding: var(--btn-primary-padding);
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-semibold);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--easing-default),
              transform        var(--duration-fast) var(--easing-bounce);
}

.dg-btn-whatsapp:hover {
  background-color: var(--btn-whatsapp-bg-hover);
  transform: translateY(-2px);
}

/* WhatsApp FAB (botón flotante) */
.dg-fab-whatsapp {
  position: fixed;
  bottom: var(--fab-bottom);
  right: var(--fab-right);
  z-index: var(--fab-z-index);
  width: var(--fab-size);
  height: var(--fab-size);
  border-radius: var(--fab-radius);
  background-color: var(--fab-bg);
  box-shadow: var(--fab-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fabBounce var(--duration-slower) var(--easing-bounce) 1s both;
  transition: transform var(--duration-fast) var(--easing-bounce),
              box-shadow var(--duration-fast) var(--easing-default);
  text-decoration: none;
}

.dg-fab-whatsapp:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 28px rgba(37, 211, 102, 0.45);
}

.dg-fab-whatsapp:active {
  animation: goldPulse 0.4s ease;
}

@media (max-width: 768px) {
  .dg-fab-whatsapp {
    width: var(--fab-size-mobile);
    height: var(--fab-size-mobile);
    bottom: var(--space-5);
    right: var(--space-5);
  }
}