/* =========================================================================
   Konexa Digital SAS — estilos complementarios a Tailwind
   Solo contiene lo que Tailwind no resuelve: variables, patrones de fondo,
   animaciones de entrada y ajustes de accesibilidad.
   ========================================================================= */

:root {
  --brand-900: #2b2470;
  --brand-500: #5b52e8;
  --infinity-400: #38bdf8;
  --accent-500: #ff6b2c;
  /* Navy original del logotipo — se conserva aparte de la paleta índigo */
  --logo-navy: #0a1633;
}

/* ---------- Base ---------- */
html {
  scroll-behavior: smooth;
  /* Compensa la altura del navbar fijo al saltar por anclas */
  scroll-padding-top: 5.5rem;
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Respeta a quien prefiere menos movimiento */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------- Foco visible y accesible ---------- */
:focus-visible {
  outline: 3px solid var(--infinity-400);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Navbar adaptativo ----------
   Arranca transparente sobre el hero oscuro y se vuelve sólido al bajar.
   La clase .scrolled la alterna main.js. */
[data-navbar] {
  background-color: transparent;
}

[data-navbar].scrolled {
  background-color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(26, 21, 72, 0.06), 0 12px 32px -20px rgba(26, 21, 72, 0.4);
}

/* Estado sobre fondo oscuro: contenido en blanco */
[data-navbar]:not(.scrolled) [data-logo] {
  color: #ffffff;
}

[data-navbar]:not(.scrolled) [data-nav-links] a {
  color: #cbd5e1;
}

[data-navbar]:not(.scrolled) [data-nav-links] a:hover {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.1);
}

[data-navbar]:not(.scrolled) #btn-menu {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}

[data-navbar]:not(.scrolled) #btn-menu:hover {
  background-color: rgba(255, 255, 255, 0.16);
}

/* ---------- Patrones decorativos ---------- */
.bg-grid {
  background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
}

.bg-mesh {
  background:
    radial-gradient(60% 55% at 12% 8%, rgba(91, 82, 232, 0.55) 0%, transparent 60%),
    radial-gradient(50% 50% at 92% 22%, rgba(56, 189, 248, 0.35) 0%, transparent 62%),
    radial-gradient(45% 45% at 70% 95%, rgba(255, 107, 44, 0.22) 0%, transparent 65%);
}

/* Degradado de texto para titulares */
.text-gradient {
  background: linear-gradient(96deg, #ffffff 18%, var(--infinity-400) 62%, #c7cdfe 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Animación de aparición al hacer scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- Tarjetas del portafolio ---------- */
.solution-card {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease,
    border-color 0.35s ease;
}

.solution-card:hover {
  transform: translateY(-6px);
}

/* ---------- Formulario ---------- */

/* Flecha del desplegable (evita depender de valores arbitrarios largos) */
.select-control {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.25rem;
}

/* Casillas y radios con el color de marca sin plugins adicionales */
input[type='checkbox'],
input[type='radio'] {
  accent-color: var(--brand-500);
}

/* Estado de error activado por JS mediante el atributo data-invalid */
.field[data-invalid='true'] .field-control:not([type='checkbox']) {
  border-color: #dc2626;
  background-color: #fef2f2;
}

.field[data-invalid='true'] input[type='checkbox'].field-control {
  outline: 2px solid #dc2626;
  outline-offset: 2px;
}

.field[data-invalid='true'] .field-error {
  display: block;
}

.field-error {
  display: none;
}

/* Radios tipo tarjeta: el input real queda oculto pero accesible */
.radio-card input:checked + span {
  border-color: var(--brand-500);
  background-color: #eef2ff;
  box-shadow: inset 0 0 0 1px var(--brand-500);
}

.radio-card input:focus-visible + span {
  outline: 3px solid var(--infinity-400);
  outline-offset: 2px;
}

/* ---------- Modales institucionales ---------- */

/* Ancho del modal: 46rem en escritorio, 92% del viewport en móvil */
.modal-shell {
  width: min(46rem, 92vw);
}

dialog::backdrop {
  background: rgba(16, 12, 44, 0.62);
  backdrop-filter: blur(4px);
}

dialog[open] {
  animation: modal-in 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes modal-in {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Contenido legal: ritmo tipográfico legible sin plugin de tipografía */
.legal h3 {
  font-weight: 600;
  color: var(--brand-900);
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.legal p,
.legal li {
  color: #475569;
  line-height: 1.7;
  margin-bottom: 0.75rem;
}

.legal ul {
  list-style: disc;
  padding-left: 1.25rem;
}

/* ---------- Scrollbar discreta ---------- */
@supports selector(::-webkit-scrollbar) {
  ::-webkit-scrollbar {
    width: 10px;
  }
  ::-webkit-scrollbar-track {
    background: #f1f5f9;
  }
  ::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
    border: 2px solid #f1f5f9;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
  }
}

/* ---------- Impresión ---------- */
@media print {
  .no-print {
    display: none !important;
  }
}