/* ============================================================
   Tipografía de marca (global)
   Se carga desde components/head.php en todas las páginas.
   Usa html:root para ganar especificidad sobre :root de styles.css,
   que se carga después.
   ============================================================ */
/* Las fuentes se cargan con <link> en components/head.php (un @import aquí retrasaba la primera pintura). */

html:root {
  --font-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Schibsted Grotesk', 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

html body { font-family: var(--font-body); }

/* Titulares en grotesca editorial: moderna, con carácter propio */
html h1,
html h2 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
}

html h3,
html h4,
html h5,
html h6 { font-family: var(--font-body); }

/* Rótulos de sección: sin mayúsculas espaciadas en monoespaciada */
html .section-label {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  opacity: 1;
}

/* Rótulo del carrusel de clientes */
html .clients-strip-label {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

/* ============================================================
   Color de acento accesible (2026-10)
   #3B9EFF (azul de marca) no llega a 4.5:1 sobre blanco ni bajo
   texto blanco. En superficies claras el acento pasa a #1667C7
   (4.6:1 o más sobre blanco, #eff3f8 y #e1ecf9; 5.5:1 bajo texto
   blanco). El azul de marca se mantiene en superficies oscuras,
   donde llega a 6.6:1.
   ============================================================ */
html:root {
  --accent-brand: #3B9EFF;
  --accent-brand-rgb: 59, 158, 255;
  --accent-strong: #1667C7;
  --accent-strong-rgb: 22, 103, 199;
  --accent: var(--accent-strong);
  --accent-rgb: var(--accent-strong-rgb);
  --red: #D61F4F;
  /* Verde: #00A87E no llega a 4.5:1 como texto sobre claro; #047857 sí (5.5:1) */
  --green-brand: #00A87E;
  --green: #047857;
  --green-rgb: 4, 120, 87;
}

/* Superficies oscuras: vuelve el azul de marca para texto y detalles */
html .section-dark,
html section[style*="--gray-900"],
html .hero.hero--with-bg,
html .ld-hero,
html .ld-dark,
html .footer {
  --accent: var(--accent-brand);
  --accent-rgb: var(--accent-brand-rgb);
  --green: var(--green-brand);
  --green-rgb: 0, 168, 126;
  /* Texto secundario legible sobre azul noche (7:1 en vez de 2.4:1) */
  --muted: var(--muted-on-dark, #94a3b8);
}

/* El botón primario siempre usa el azul fuerte: texto blanco a 5.5:1.
   Sombra con desplazamiento y difusa, sin halo de color. */
html .btn-primary {
  background: var(--accent-strong);
  color: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.14), 0 6px 16px -6px rgba(15, 23, 42, 0.32);
}
html .btn-primary:hover {
  background: #1259AE;
  color: #fff;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.16), 0 10px 24px -8px rgba(15, 23, 42, 0.36);
}

/* ---------- Foco visible en todo el sitio ---------- */
html :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
html .btn:focus-visible { outline-offset: 3px; }
html :focus:not(:focus-visible) { outline: none; }

/* ---------- Superficies del navegador ---------- */
html ::selection { background: rgba(var(--accent-strong-rgb), 0.18); color: inherit; }
html input,
html textarea { caret-color: var(--accent-strong); }
html a { text-underline-offset: 0.18em; }

/* Placeholders con contraste suficiente (4.5:1 sobre #eff3f8) */
html ::placeholder { color: #5f6b7a; opacity: 1; }

/* "Incluye" en las fichas de servicio: h3 (antes h4 que saltaba un nivel), en tipo de texto, sin mayúsculas */
html .service-includes h3,
html .service-includes h4 {
  margin-bottom: 16px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--accent);
}

/* ---------- Revelado al hacer scroll ----------
   El contenido parte visible: solo se desplaza unos píxeles al entrar.
   Antes partía en opacidad 0 y el H1 o los pasos quedaban en blanco
   mientras cargaba la página (o para siempre sin JavaScript). */
html .reveal {
  opacity: 1;
  transform: translateY(14px);
  transition: transform .7s cubic-bezier(.16, 1, .3, 1);
}
html .reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html .reveal { transform: none; transition: none; }
}

/* ---------- Tarjetas flotantes del hero (páginas legado) ----------
   Chips de cristal con emoji y estados inventados ("Monitoreo Activo",
   "Reporte Generado") que no muestran nada real del servicio. */
html .floating-card { display: none; }

/* ---------- Bordes laterales de color (barra lateral de 3-4px) ----------
   Se reemplazan por un borde completo de 1px y un fondo teñido. */
html .service-result,
html .article-lead,
html .article-callout,
html .aurafy-branch {
  border: 1px solid rgba(var(--accent-rgb), 0.22);
  border-radius: var(--radius-sm, 6px);
}
html .service-result { border-color: rgba(var(--green-rgb), 0.28); }
html [style*="border-left: 4px"],
html [style*="border-left:4px"],
html [style*="border-left: 3px"],
html [style*="border-left:3px"] {
  border-left-width: 1px !important;
}

/* Punto "en vivo" de las píldoras: sin pulso infinito */
html .badge .dot { animation: none; }

/* Velo del hero en pantallas estrechas: el degradado horizontal de editorial.css
   (92% a la izquierda, 35% a la derecha) está pensado para texto en la mitad izquierda.
   En móvil el título ocupa todo el ancho y su parte derecha caía sobre la zona clara de
   la foto. Aquí el velo es vertical y nunca baja de 80% de opacidad. */
@media (max-width: 860px) {
  html .ld-hero::before {
    background: linear-gradient(180deg, rgba(10, 18, 36, 0.92) 0%, rgba(10, 18, 36, 0.88) 55%, rgba(10, 18, 36, 0.8) 100%);
  }
}

/* Textos funcionales por debajo de 12px */
html .ld-hero-credit { font-size: 0.75rem; color: #9aa3b2; }
html .related-card .tag { font-size: 0.75rem; }

/* Títulos del panel lateral de contacto (h3; antes h4, que saltaba un nivel) */
html .trust-block h3 {
  margin-bottom: 8px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text);
}

/* ---------- Página plana: sin cuadrícula de fondo en el body ---------- */
html body::after { background-image: none; }

/* ---------- Logos de clientes: grilla estática, sin marquesina ---------- */
html .clients-strip-marquee { overflow: visible; -webkit-mask-image: none; mask-image: none; }
html .clients-strip-track {
  animation: none;
  width: auto;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px 48px;
}
@media (max-width: 768px) {
  html .clients-strip-track { gap: 16px 28px; }
  html .clients-strip-item { height: 32px; }
  html .clients-strip-item img { max-width: 110px; }
}

/* Áreas táctiles: todo botón mide al menos 44px de alto */
html .btn { min-height: 44px; }

/* Botón flotante de WhatsApp sin pulso: DESIGN.md rechaza los puntos pulsantes */
html .whatsapp-float { animation: none; }

/* Logos de clientes: alto óptico parejo (26 a 36 px) y más presencia.
   Los muy anchos (clase is-wide, razón de aspecto >= 4,5) pueden ocupar más ancho. */
html .clients-strip-item img { height: auto; max-height: 36px; opacity: 0.75; }
html .clients-strip-item img.is-wide { max-width: 190px; }
@media (max-width: 768px) {
  html .clients-strip-item img { max-height: 30px; }
  html .clients-strip-item img.is-wide { max-width: 140px; }
}

/* Áreas táctiles en móvil: enlaces sueltos de al menos 44px (40px en listas del pie) */
@media (max-width: 768px) {
  html .nav-logo { display: inline-flex; align-items: center; min-height: 44px; }
  html a.ld-more { display: inline-flex; align-items: center; min-height: 44px; }
  html .ld-crumbs a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 4px; }
  html .contact-info a { min-height: 44px; }
  html .footer-col ul { gap: 0; }
  html .footer-col ul li a { display: flex; align-items: center; min-height: 40px; }
  html .social-links a { width: 44px; height: 44px; }
}