/* ===========================================================
   JA Software SAS / Analuu — estilos base del sitio
   Complementa las utilidades de Tailwind (CDN) cargadas inline
   en cada página. No requiere build tool.
   =========================================================== */

html { scroll-behavior: smooth; }

body { -webkit-font-smoothing: antialiased; }

/* Balance de texto en encabezados (fallback si el navegador no soporta text-wrap:balance) */
.text-balance { text-wrap: balance; }

/* ---------- Navbar ---------- */
.glass-nav {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
}

#mobile-menu {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.25s ease;
}
#mobile-menu.open {
  max-height: 480px;
  opacity: 1;
}

/* ---------- Botón / gradiente de marca ---------- */
.gradient-brand {
  background: linear-gradient(135deg, #111F78 0%, #1A7CCC 100%);
}

/* ---------- Placeholder de capturas de pantalla ---------- */
.screenshot-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
  padding: 2rem 1.5rem;
  min-height: 220px;
  background: linear-gradient(135deg, #EEF6FE 0%, #F1F3FB 100%);
  border: 1.5px dashed #C2C9EB;
  border-radius: 16px;
}

/* ---------- Eyebrow / etiquetas de sección ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "Analuu Mono", "JetBrains Mono", monospace;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1A7CCC;
}
.shear-mark {
  display: inline-block;
  width: 16px;
  height: 2px;
  background: #2291EA;
  transform: skewX(-20deg);
}
.shear-mark.navy { background: #111F78; }

/* ---------- Filas editoriales (listas con divisores sutiles) ---------- */
.editorial-row {
  border-bottom: 1px solid #EAEAEA;
}
.editorial-row:last-child { border-bottom: none; }

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- FAQ (details/summary nativo) ---------- */
.faq summary {
  list-style: none;
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq-chevron {
  transition: transform 0.25s ease;
  flex-shrink: 0;
}
details[open] > summary .faq-chevron {
  transform: rotate(180deg);
}

/* ---------- Fact strip ---------- */
.fact-strip {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.fact-strip > div {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #111F78;
  padding-left: 1.25rem;
  position: relative;
}
.fact-strip > div::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4em;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: #2291EA;
}

/* ---------- Divisor decorativo (secciones oscuras) ---------- */
.shear-divider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #2291EA 0%, #7FBEF3 100%);
}

/* ---------- Sticky CTA móvil ---------- */
#sticky-cta {
  transform: translateY(100%);
  transition: transform 0.3s ease;
}
#sticky-cta.visible {
  transform: translateY(0);
}

/* ---------- Formulario de contacto ---------- */
#form-status.ok {
  color: #0A6845;
  background: #E9F6F0;
  border-radius: 8px;
  padding: 0.75rem 1rem;
}
#form-status.err {
  color: #C62828;
  background: #FDEDED;
  border-radius: 8px;
  padding: 0.75rem 1rem;
}
#form-status.hidden { display: none; }

input:focus, select:focus, textarea:focus {
  outline: none;
}

/* ---------- Tipografía ----------
   "Aktiv Grotesk" y "Analuu Mono" son fuentes de marca con licencia
   comercial y no están incluidas aquí. Se usa Inter / JetBrains Mono
   como sustituto visual gratuito vía Google Fonts (ver <link> en el
   <head> de cada página). Si la empresa cuenta con los archivos
   licenciados de Aktiv Grotesk, agréguelos con @font-face arriba de
   esta regla y el navegador los preferirá automáticamente. */