/* ============================================================
   BI Solutions — Base compartida
   Reset, tokens de diseño, navegación y componentes comunes.
   Todas las páginas del sitio cargan este archivo primero;
   los estilos de cada página lo complementan y pueden
   sobrescribir los tokens (p. ej. deudas.css usa tema rojo).
   ============================================================ */

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

:root {
  --cream:     #f5f1eb;
  --cream2:    #eee8df;
  --white:     #ffffff;
  --green:     #38b464;
  --green-dk:  #2a8f4e;
  --green-lt:  #eaf7ef;
  --green-rgb: 56, 180, 100;
  --blue:      #2d6ef5;
  --blue-lt:   #eaf0ff;
  --ink:       #1a1a18;
  --ink2:      #3c3c38;
  --muted:     #78746e;
  --border:    #dcd6cc;
  --radius:    14px;
  --wa:        #25d366;
  --wa-dk:     #20ba58;
  --wa-rgb:    37, 211, 102;
}

html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; background: var(--cream); color: var(--ink); overflow-x: hidden; }

/* NAV */
nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; display: flex; align-items: center; justify-content: space-between; padding: 0 5%; height: 66px; background: rgba(245,241,235,0.93); backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); }
.nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nav-logo img { height: 36px; width: auto; }
.nav-logo-name { font-family: 'Lora', serif; font-weight: 700; font-size: 1.12rem; color: var(--ink); display: block; line-height: 1.2; }
.nav-logo-tag { font-size: 0.58rem; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; }
.nav-back { display: flex; align-items: center; gap: 7px; color: var(--muted); text-decoration: none; font-size: 0.85rem; font-weight: 500; transition: color 0.2s; }
.nav-back:hover { color: var(--green); }
.nav-links { display: flex; gap: 30px; list-style: none; }
.nav-links a { color: var(--muted); text-decoration: none; font-size: 0.875rem; font-weight: 500; transition: color 0.2s; cursor: pointer; }
.nav-links a:hover { color: var(--ink); }
.nav-cta { background: var(--green) !important; color: #fff !important; padding: 8px 20px !important; border-radius: 50px !important; font-weight: 600 !important; font-size: 0.83rem !important; transition: background 0.2s !important; }
.nav-cta:hover { background: var(--green-dk) !important; color: #fff !important; }

/* BOTÓN FLOTANTE DE WHATSAPP */
.wa-float { position: fixed; bottom: 28px; right: 28px; z-index: 300; width: 56px; height: 56px; background: var(--wa); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.55rem; box-shadow: 0 4px 24px rgba(var(--wa-rgb),0.4); text-decoration: none; transition: transform 0.2s, box-shadow 0.2s; }
.wa-float:hover { transform: scale(1.08); box-shadow: 0 8px 32px rgba(var(--wa-rgb),0.55); }

/* ANIMACIÓN DE APARICIÓN AL HACER SCROLL */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.65s ease, transform 0.65s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }