:root {
  --pa-black: #0b0b0c;
  --pa-white: #ffffff;
  --pa-gray-50: #f7f7f8;
  --pa-gray-100: #efeff1;
  --pa-gray-200: #dedee2;
  --pa-gray-500: #707078;
  --pa-gray-800: #242428;
  --pa-accent: #cbe300;
  --pa-cyan: #49c9e7;
  --pa-radius: 1.5rem;
  --pa-shadow: 0 24px 70px rgba(0, 0, 0, .08);
  --header-height: 78px;
}

[data-bs-theme="dark"] {
  --pa-gray-50: #121214;
  --pa-gray-100: #1a1a1d;
  --pa-gray-200: #2b2b2f;
  --pa-gray-500: #a7a7af;
  --pa-gray-800: #e7e7ea;
  --pa-shadow: 0 24px 70px rgba(0, 0, 0, .26);
}

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 20px); }
body {
  font-family: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
  letter-spacing: -.01em;
}

::selection { background: var(--pa-accent); color: var(--pa-black); }

.skip-link {
  position: fixed; top: -50px; left: 1rem; z-index: 9999;
  background: var(--bs-body-color); color: var(--bs-body-bg);
  padding: .65rem 1rem; border-radius: .5rem; transition: top .2s ease;
}
.skip-link:focus { top: .75rem; }

.fw-black { font-weight: 900; }
.tracking { letter-spacing: .12em; }
.section-space { padding: 7rem 0; }
.section-space-sm { padding: 4.5rem 0; }
.section-muted { background: var(--pa-gray-50); }
.border-top-subtle { border-top: 1px solid var(--pa-gray-200); }

.site-header {
  transition: background-color .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
}
.site-header.scrolled {
  background: color-mix(in srgb, var(--bs-body-bg) 88%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 8px 32px rgba(0,0,0,.06);
  border-bottom: 1px solid color-mix(in srgb, var(--bs-border-color) 70%, transparent);
}
.navbar-brand img { width: 218px; height: auto; display: block; }
.nav-link { font-weight: 500; margin-inline: .15rem; position: relative; }
.nav-link::after {
  content: ""; position: absolute; left: .5rem; right: .5rem; bottom: .25rem;
  height: 2px; transform: scaleX(0); background: currentColor; transition: transform .2s ease;
}
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }
.btn-theme {
  width: 42px; height: 42px; border-radius: 50%; display: inline-grid; place-items: center;
  border: 1px solid var(--bs-border-color); color: var(--bs-body-color); background: var(--bs-body-bg);
}
.btn-theme:hover { transform: translateY(-1px); border-color: var(--bs-body-color); }

.hero-section { min-height: 100vh; padding-top: var(--header-height); isolation: isolate; }
.hero-copy { max-width: 760px; color: var(--bs-secondary-color); }
.text-gradient {
  background: linear-gradient(90deg, var(--bs-body-color), color-mix(in srgb, var(--bs-body-color) 55%, var(--pa-cyan)));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.eyebrow { display: inline-flex; align-items: center; gap: .75rem; font-weight: 700; font-size: .9rem; letter-spacing: .08em; text-transform: uppercase; }
.eyebrow span { width: 34px; height: 2px; background: var(--bs-body-color); display: inline-block; }

.hero-orb { position: absolute; border-radius: 50%; filter: blur(4px); z-index: -1; pointer-events: none; opacity: .48; }
.hero-orb-one { width: 420px; height: 420px; right: -140px; top: 11%; background: radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--pa-accent) 78%, white), transparent 66%); }
.hero-orb-two { width: 320px; height: 320px; left: -130px; bottom: 3%; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--pa-cyan) 42%, transparent), transparent 68%); }

.hero-panel {
  border: 1px solid var(--pa-gray-200); border-radius: calc(var(--pa-radius) + .5rem);
  background: color-mix(in srgb, var(--bs-body-bg) 80%, transparent);
  box-shadow: var(--pa-shadow); position: relative; overflow: hidden;
}
.hero-panel::before { content:""; position:absolute; width:180px; height:180px; border-radius:50%; background:var(--pa-accent); filter:blur(80px); opacity:.18; right:-50px; top:-70px; }
.status-pill { font-size: .78rem; border: 1px solid var(--pa-gray-200); border-radius: 999px; padding: .4rem .65rem; display:flex; align-items:center; gap:.45rem; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pa-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pa-accent) 20%, transparent); }
.solution-stack { display:grid; gap:.85rem; position:relative; }
.solution-item { display:flex; align-items:center; gap:1rem; padding:1rem; border-radius:1rem; background: color-mix(in srgb, var(--pa-gray-50) 82%, transparent); border:1px solid var(--pa-gray-200); transition: transform .2s ease, border-color .2s ease; }
.solution-item:hover { transform: translateX(5px); border-color: var(--bs-body-color); }
.solution-item strong, .solution-item small { display:block; }
.solution-item small { color: var(--bs-secondary-color); margin-top:.15rem; }
.solution-icon { width:46px; height:46px; border-radius:14px; display:grid; place-items:center; font-size:1.25rem; background:var(--bs-body-color); color:var(--bs-body-bg); }

.hero-metrics .metric { border-left: 1px solid var(--pa-gray-200); padding-left: 1rem; min-height: 64px; }
.hero-metrics .col-4:first-child .metric { border-left: 0; padding-left: 0; }
.metric strong { display:block; font-size:1.65rem; line-height:1; }
.metric span { display:block; color:var(--bs-secondary-color); font-size:.82rem; margin-top:.45rem; }

.section-tag { display:inline-block; font-size:.8rem; text-transform:uppercase; letter-spacing:.14em; font-weight:800; border:1px solid var(--pa-gray-200); border-radius:999px; padding:.5rem .8rem; }
.about-card, .contact-card { border:1px solid var(--pa-gray-200); border-radius:var(--pa-radius); background:var(--bs-body-bg); box-shadow:var(--pa-shadow); }
.about-card strong { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--pa-accent) 80%, transparent); text-decoration-thickness: 4px; text-underline-offset: 4px; }

.service-card, .wide-service-card, .saas-card { border:1px solid var(--pa-gray-200); border-radius:var(--pa-radius); background:var(--bs-body-bg); transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.service-card:hover, .wide-service-card:hover, .saas-card:hover { transform:translateY(-6px); box-shadow:var(--pa-shadow); border-color: color-mix(in srgb, var(--bs-body-color) 45%, var(--pa-gray-200)); }
.service-icon { width:54px; height:54px; border-radius:16px; background:var(--pa-gray-100); display:grid; place-items:center; font-size:1.4rem; border:1px solid var(--pa-gray-200); }
.service-card p, .wide-service-card p, .saas-card p { line-height:1.75; }
.saas-number { font-size:.85rem; font-weight:800; border:1px solid var(--pa-gray-200); border-radius:999px; padding:.4rem .65rem; }
.saas-symbol { font-size:2rem; color:var(--bs-body-color); }
.tag-list { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.5rem; }
.tag-list span { font-size:.78rem; font-weight:600; padding:.42rem .65rem; border-radius:999px; background:var(--pa-gray-100); border:1px solid var(--pa-gray-200); }

.cta-card { border-radius:calc(var(--pa-radius) + .35rem); background:var(--pa-black); color:white; position:relative; overflow:hidden; }
.cta-card::after { content:""; position:absolute; width:320px; height:320px; border-radius:50%; right:-120px; bottom:-190px; background:radial-gradient(circle, var(--pa-accent), transparent 68%); opacity:.45; }
.cta-card > .row { position:relative; z-index:1; }
.cta-kicker { font-size:.8rem; text-transform:uppercase; letter-spacing:.14em; font-weight:800; color:var(--pa-accent); }

.form-control, .form-select { border-radius:.9rem; border-color:var(--pa-gray-200); background-color:var(--bs-body-bg); }
.form-control:focus, .form-select:focus { border-color:var(--bs-body-color); box-shadow:0 0 0 .2rem color-mix(in srgb, var(--bs-body-color) 10%, transparent); }
textarea.form-control { min-height:145px; resize:vertical; }
.contact-points { display:grid; gap:.8rem; }
.contact-point { display:flex; align-items:center; gap:.75rem; font-weight:500; }
.contact-point i { font-size:1.25rem; }

.site-footer { background:var(--pa-gray-50); }
.footer-logo { width:190px; height:auto; }
.back-to-top { position:fixed; right:1.25rem; bottom:1.25rem; z-index:1050; width:46px; height:46px; border-radius:50%; border:1px solid var(--pa-gray-200); background:var(--bs-body-bg); color:var(--bs-body-color); display:grid; place-items:center; box-shadow:0 12px 32px rgba(0,0,0,.12); opacity:0; visibility:hidden; transform:translateY(12px); transition:.2s ease; }
.back-to-top.show { opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover { background:var(--bs-body-color); color:var(--bs-body-bg); }

.reveal { opacity:0; transform:translateY(24px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); transition-delay:var(--delay, 0ms); }
.reveal[data-reveal="left"] { transform:translateX(28px); }
.reveal[data-reveal="right"] { transform:translateX(-28px); }
.reveal.is-visible { opacity:1; transform:translate(0,0); }

@media (max-width: 991.98px) {
  :root { --header-height: 70px; }
  .navbar { background:color-mix(in srgb, var(--bs-body-bg) 94%, transparent); backdrop-filter:blur(18px); }
  .navbar-brand img { width:185px; }
  .navbar-collapse { border-top:1px solid var(--pa-gray-200); margin-top:.75rem; }
  .section-space { padding:5.5rem 0; }
  .hero-section { min-height:auto; }
  .hero-section .min-vh-100 { min-height:auto !important; }
}

@media (max-width: 575.98px) {
  .navbar-brand img { width:160px; }
  .display-2 { font-size:clamp(2.65rem, 13vw, 4rem); }
  .section-space { padding:4.5rem 0; }
  .section-space-sm { padding:3.2rem 0; }
  .hero-metrics .metric { padding-left:.65rem; }
  .metric strong { font-size:1.35rem; }
  .metric span { font-size:.72rem; }
  .wide-service-card { flex-direction:column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .reveal { opacity:1; transform:none !important; }
}

/* Contacto y WhatsApp */
.contact-details { display:grid; gap:.8rem; }
.contact-detail { display:flex; align-items:flex-start; gap:.9rem; padding:1rem; border:1px solid var(--pa-gray-200); border-radius:1rem; color:var(--bs-body-color); text-decoration:none; background:var(--bs-body-bg); transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.contact-detail:hover { transform:translateY(-2px); border-color:color-mix(in srgb, var(--bs-body-color) 45%, var(--pa-gray-200)); box-shadow:0 10px 28px rgba(0,0,0,.07); }
.contact-detail-icon { flex:0 0 auto; width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:var(--pa-gray-100); border:1px solid var(--pa-gray-200); font-size:1.1rem; }
.contact-detail span:last-child { min-width:0; }
.contact-detail small, .contact-detail strong, .contact-detail em { display:block; }
.contact-detail small { color:var(--bs-secondary-color); font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; font-weight:700; margin-bottom:.12rem; }
.contact-detail strong { font-size:.98rem; line-height:1.35; }
.contact-detail em { color:var(--bs-secondary-color); font-size:.86rem; font-style:normal; margin-top:.15rem; }
.footer-contact-link { color:inherit; text-underline-offset:3px; }

.whatsapp-float { position:fixed; left:1.25rem; bottom:1.25rem; z-index:1050; min-height:46px; padding:.7rem 1rem; border-radius:999px; display:inline-flex; align-items:center; gap:.55rem; background:#171717; color:#fff; text-decoration:none; font-weight:700; box-shadow:0 12px 32px rgba(0,0,0,.18); border:1px solid rgba(255,255,255,.14); transition:transform .2s ease, box-shadow .2s ease; }
.whatsapp-float i { font-size:1.25rem; }
.whatsapp-float:hover { color:#fff; transform:translateY(-3px); box-shadow:0 16px 38px rgba(0,0,0,.24); }
[data-bs-theme="dark"] .whatsapp-float { background:#fff; color:#111; border-color:rgba(0,0,0,.12); }
[data-bs-theme="dark"] .whatsapp-float:hover { color:#111; }

@media (max-width: 575.98px) {
  .whatsapp-float { width:48px; height:48px; min-height:48px; padding:0; justify-content:center; border-radius:50%; }
  .whatsapp-float span { display:none; }
}