/* Estilos custom compartidos del mockup Denty Cloud
   Alineado con tokens reales del frontend:
   --primary-rgb: 14, 154, 239  (#0E9AEF)
   --secondary-rgb: 35, 183, 229 (#23B7E5)
   --body-bg-rgb: 240, 241, 247  (#F0F1F7)
*/

html { scroll-behavior: smooth; }

body {
  font-feature-settings: 'cv02','cv03','cv04','cv11';
  /* Fondo tinted más marcado — sky sobre slate para dar presencia de marca */
  background:
    radial-gradient(1400px 700px at 100% -10%, rgba(14,154,239,.14), transparent 55%),
    radial-gradient(1000px 600px at -5% 20%, rgba(35,183,229,.10), transparent 55%),
    linear-gradient(180deg, #E8EDF4 0%, #EEF2F7 100%);
  color: #334155;
  background-attachment: fixed;
}
::selection { background: #0E9AEF; color: #fff; }

/* Divisor de sección — línea sutil sky */
.section-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(14,154,239,.35), transparent); }

/* Fondo puntos decorativo */
.bg-dots { background-image: radial-gradient(rgba(14,154,239,.20) 1px, transparent 1px); background-size: 22px 22px; }

/* Grain sutil sobre gradients */
.noise::before {
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.35; mix-blend-mode:overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/></svg>");
}

/* Nav glass */
.nav-glass { backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); }

/* === Cards con más contraste === */
.dc-card {
  background: #fff;
  border: 1px solid #DDE3EC;
  border-radius: 1rem; /* rounded-2xl */
  box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 8px 20px -12px rgba(14,154,239,.20);
  transition: all .18s ease;
}
.dc-card:hover { border-color: #B8DDF5; box-shadow: 0 4px 8px rgba(15,23,42,.06), 0 20px 40px -18px rgba(14,154,239,.35); transform: translateY(-2px); }

/* === Hero card sky (patrón app: header sky con texto blanco) === */
.dc-hero-header {
  background: linear-gradient(135deg, #0E9AEF 0%, #0B7FC7 100%);
  color: #fff;
  padding: 1.25rem 1.5rem;
  border-radius: 1rem 1rem 0 0;
}

/* Respeta reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation: none !important; transition: none !important; }
}