/* Base: variables, reset, grid, utilities */

:root {
  --gray-50: #fafafa;
  --gray-100: #f5f5f5;
  --gray-200: #e5e5e5;
  --gray-300: #d4d4d4;
  --gray-400: #a3a3a3;
  --gray-500: #737373;
  --gray-600: #525252;
  --gray-700: #404040;
  --gray-800: #262626;
  --gray-900: #171717;
  --accent-blue: #3b82f6;
  --accent-blue-hover: #2563eb;
  --bg: #ffffff;
  --fg: var(--gray-900);
  --muted: var(--gray-600);
  --radius-lg: 20px;
  --radius-md: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,0.06);
  --maxw: 1200px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
}

/* Force consistent light theme regardless of OS preference */
@media (prefers-color-scheme: dark) {
  :root { --bg: #ffffff; --fg: var(--gray-900); --shadow: 0 8px 24px rgba(0,0,0,0.08); }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, Roboto, ui-sans-serif, system-ui, -apple-system, Segoe UI, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--fg);
  background: var(--bg);
  line-height: 1.5;
  overflow-x: hidden; /* prevent horizontal scroll on mobile */
}
img { max-width: 100%; height: auto; display: block; }
svg { display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1,h2,h3 { margin: 0 0 var(--space-4); line-height: 1.2; }
p { margin: 0 0 var(--space-4); color: var(--muted); }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--space-6); }

.grid { display: grid; gap: var(--space-8); overflow-x: hidden; }
.grid--2cols { grid-template-columns: 1.1fr 0.9fr; }
.grid--3cols { grid-template-columns: repeat(3, 1fr); }
.grid--4cols { grid-template-columns: repeat(4, 1fr); }
.grid--center { align-items: center; }

@media (max-width: 1024px) {
  .grid--4cols { grid-template-columns: repeat(2, 1fr); }
  .grid--3cols { grid-template-columns: repeat(2, 1fr); }
  .grid--2cols { grid-template-columns: 1fr; }
  .logo-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
  .grid--3cols, .grid--4cols { grid-template-columns: 1fr; }
  .logo-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Force Integraciones to 1 column on small screens */
@media (max-width: 640px) {
  .logo-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .logo { padding: var(--space-4); }
}

.section { padding: var(--space-16) 0; }
.section--muted { background: var(--gray-50); }
.section--cta { background: linear-gradient(180deg, var(--gray-50), transparent); }
.section__title { font-family: Montserrat, Inter, Roboto, sans-serif; font-weight: 700; font-size: 28px; }

.cards .card { background: var(--bg); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: var(--space-8); }

.skip-link { position: absolute; left: -999px; top: -999px; }
.skip-link:focus { left: var(--space-6); top: var(--space-6); background: var(--accent-blue); color: #fff; padding: var(--space-2) var(--space-4); border-radius: 6px; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.hero { position: relative; padding-top: calc(var(--space-16) + 64px); }
.hero__title { font-family: Montserrat, Inter, Roboto, sans-serif; font-weight: 800; font-size: 42px; letter-spacing: -0.02em; }
.hero__subtitle { font-size: 18px; }
.hero__actions { display: flex; gap: var(--space-4); margin-top: var(--space-6); }
.hero__visual { display: grid; place-items: center; }
.globe__frame { width: 100%; max-width: 560px; aspect-ratio: 1 / 1; padding: 0; background: transparent; border-radius: 50%; box-shadow: var(--shadow); }
canvas#scene { width: 100%; height: auto; aspect-ratio: 1 / 1; display: block; }

.logo-wall { display: flex; gap: var(--space-8); flex-wrap: wrap; align-items: center; filter: grayscale(1); opacity: 0.8; }
.logo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); filter: grayscale(1); }
.logo { display: grid; place-items: center; background: var(--bg); border-radius: 12px; border: 1px solid var(--gray-200); padding: var(--space-6); min-height: 72px; min-width: 0; }

.bullets { display: grid; gap: var(--space-2); margin-bottom: var(--space-6); }
.metric h3 { font-size: 24px; }

.pricing__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-8); }
.pricing .price { font-size: 28px; font-weight: 700; }
.features { color: var(--muted); display: grid; gap: 6px; }

.form { display: grid; gap: var(--space-4); background: var(--bg); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: var(--space-8); }
.form__row { display: grid; gap: 6px; }
.form input, .form textarea { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--gray-300); background: transparent; color: inherit; font: inherit; }
.form input:focus, .form textarea:focus { outline: 2px solid var(--accent-blue); outline-offset: 2px; }

.footer { padding: var(--space-8) 0; border-top: 1px solid var(--gray-200); }
.footer__grid { display: grid; gap: var(--space-6); grid-template-columns: 1.2fr 1fr 1fr; align-items: start; }
.footer__links { display: grid; gap: 8px; }
.brand--footer img { filter: grayscale(1); opacity: 0.9; }

@media (max-width: 900px) {
  .footer { padding: var(--space-6) 0; }
  .footer__grid { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 600ms ease, transform 600ms ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* Header */
.header { position: fixed; top: 0; left: 0; right: 0; z-index: 200; backdrop-filter: saturate(180%) blur(8px); background: rgba(255,255,255,0.9); border-bottom: 1px solid var(--gray-100); }
.header__inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-6); height: 64px; }
.nav__list { display: flex; gap: var(--space-6); align-items: center; }
.nav__toggle { display: none; }

@media (max-width: 900px) {
  .nav__toggle { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--gray-300); background: transparent; color: inherit; }
  .nav__list { display: none; position: absolute; right: var(--space-6); top: 64px; z-index: 300; background: var(--bg); border: 1px solid var(--gray-200); padding: var(--space-6); border-radius: 12px; box-shadow: var(--shadow); }
  .nav__list.is-open { display: grid; gap: var(--space-4); }
  .header__cta { display: none; }
}

/* Helper for pages with little content: push footer down */
.main-fill { min-height: calc(100vh - 64px - 140px); }
.main-center { display: grid; align-items: center; }