/* ============================================================
   DaKa Innova – Sitio Público · Hoja maestra de estilos
   Diseño único: Glassmorphism · Bento Grid · Geo animado · Marquee · Neumorfismo
   Paleta: Rosa #db007d · Azul #008ee7 · Amarillo #ffc50f
   ============================================================ */

/* --- Tokens de diseño --- */
@import 'bases/variables.css';

/* --- Componentes --- */
@import 'components/buttons.css';
@import 'components/navbar.css';
@import 'components/hero.css';
@import 'components/marquee.css';
@import 'components/section.css';
@import 'components/bento.css';
@import 'components/stats.css';
@import 'components/valores.css';
@import 'components/team.css';
@import 'components/contact.css';
@import 'components/footer.css';
@import 'components/footer-vintage.css';
@import 'components/animations.css';
@import 'components/hub.css';
@import 'components/portfolio.css';
@import 'components/mariposa.css';
@import 'components/promos.css';
@import 'components/testimonios.css';
@import 'components/faq.css';

/* ==================================================
   RESET + BASE
   ================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text-dark);
  background: var(--dark);
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a   { color: inherit; text-decoration: none; }
ul  { list-style: none; }

/* ==================================================
   PERSONALIZACIÓN DE UI DEL NAVEGADOR
   ================================================== */

/* --- Cursor personalizado --- */
html, body {
  cursor: url('../imgs/ui/cursor/24_cursor_arrow_neon_dakainnova.png') 2 2, auto;
}

a, button, [role="button"], label, label[for], select,
input[type="submit"], input[type="button"], input[type="reset"],
.hub-card, .btn, .btn-outline, .portfolio__item, .bento-card {
  cursor: url('../imgs/ui/cursor/24_cursor_hand_neon_dakainnova.png') 5 2, pointer;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea {
  cursor: url('../imgs/ui/cursor/24_cursor_arrow_neon_dakainnova.png') 2 2, text;
}

[disabled], [aria-disabled="true"], .disabled {
  cursor: url('../imgs/ui/cursor/24_cursor_disabled_neon_dakainnova.png') 12 12, not-allowed;
}

[aria-busy="true"], .loading {
  cursor: url('../imgs/ui/cursor/24_cursor_load_neon_dakainnova.png') 12 12, wait;
}

/* --- Selección de texto --- */
::selection      { background: var(--rosa); color: #fff; }
::-moz-selection { background: var(--rosa); color: #fff; }

/* --- Barra de scroll (Webkit: Chrome, Edge, Safari) --- */
::-webkit-scrollbar               { width: 6px; height: 6px; }
::-webkit-scrollbar-track         { background: var(--dark-2); }
::-webkit-scrollbar-thumb         {
  background: var(--grad-rosa-azul);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover   { background: var(--rosa-light); }

/* --- Barra de scroll (Firefox) --- */
/* * { scrollbar-width: thin; scrollbar-color: var(--rosa) var(--dark-2); } */

/* --- Placeholder en inputs --- */
::placeholder      { color: var(--text-muted); opacity: 1; }
::-moz-placeholder { color: var(--text-muted); opacity: 1; }

/* --- Anillo de foco accesible --- */
:focus-visible {
  outline: 2px solid var(--rosa);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- Checkboxes y radios nativos --- */
input[type="checkbox"],
input[type="radio"] { accent-color: var(--rosa); }

/* --- Color de autorrelleno (contraseñas guardadas) --- */
input:-webkit-autofill,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--dark-3) inset;
  -webkit-text-fill-color: var(--text-inv);
  caret-color: var(--rosa);
  transition: background-color 9999s ease;
}

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

.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* Texto con gradiente rosa → azul */
.grad-text {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Texto con gradiente de marca (tri-color) */
.grad-text--brand {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ==================================================
   VARIABLES ROOT RESPONSIVAS
   ================================================== */

@media (max-width: 768px) {
  :root { --pad: 1.25rem; --nav-h: 62px; }
}