/* ============================================================
   CISNET SRL — Light default · Dark toggle · EN/ES · Dribbble animations
   Emil Kowalski principles applied throughout
   ============================================================ */

/* ---- LIGHT MODE TOKENS (default) ---- */
:root {
  --blue:       #1B5BB4;
  --blue-mid:   #2E7AE6;
  --blue-light: #5B9CF6;
  --red:        #E84C2B;
  --red-light:  #FF6B4A;
  --purple:     #6C4DE8;

  --bg:         #FFFFFF;
  --bg2:        #F4F7FF;
  --bg3:        #EBF0FF;
  --surface:    rgba(27,91,180,0.05);
  --surface2:   rgba(27,91,180,0.09);
  --border:     rgba(27,91,180,0.1);
  --shadow:     rgba(27,91,180,0.12);
  --text:       #0F1628;
  --muted:      #5A6680;
  --card-bg:    #FFFFFF;
  --white:      #ffffff;
  --nav-bg:     rgba(255,255,255,0.85);
  --r:          14px;

  /* Emil Kowalski — custom easing curves */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-ui:     cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- DARK MODE TOKENS ---- */
body.dark {
  --bg:         #06080F;
  --bg2:        #0C1120;
  --bg3:        #111827;
  --surface:    rgba(255,255,255,0.04);
  --surface2:   rgba(255,255,255,0.08);
  --border:     rgba(255,255,255,0.07);
  --shadow:     rgba(0,0,0,0.4);
  --text:       #E4ECF7;
  --muted:      #6B7A99;
  --card-bg:    #0C1120;
  --nav-bg:     rgba(6,8,15,0.88);
}

/* ---- RESET ---- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  transition:background 350ms var(--ease-ui), color 350ms var(--ease-ui);
}
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--blue); border-radius:4px; }

/* ============================================================
   BACKGROUND — dot grid + blobs
   ============================================================ */
.bg-wrap { position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }

/* Dot grid (Dribbble style) */
.bg-wrap::before {
  content:'';
  position:absolute;
  inset:0;
  background-image: radial-gradient(circle, var(--border) 1px, transparent 1px);
  background-size: 36px 36px;
  opacity:.6;
  transition:opacity 350ms;
}

.blob {
  position:absolute;
  border-radius:50%;
  filter:blur(90px);
  will-change:transform;
  animation:blobDrift 26s ease-in-out infinite alternate;
}
body:not(.dark) .blob { opacity:.12; }
body.dark      .blob { opacity:.14; }

.blob-1 { width:600px; height:600px; background:var(--blue); top:-150px; left:-150px; animation-duration:22s; }
.blob-2 { width:440px; height:440px; background:var(--purple); top:40%; right:-120px; animation-duration:18s; animation-delay:-7s; }
.blob-3 { width:360px; height:360px; background:var(--red); bottom:-50px; left:20%; animation-duration:28s; animation-delay:-14s; opacity:.08; }

@keyframes blobDrift {
  0%   { transform:translate(0,0) scale(1); }
  50%  { transform:translate(30px,22px) scale(1.06); }
  100% { transform:translate(-18px,40px) scale(.96); }
}

/* ============================================================
   NAVIGATION
   ============================================================ */
nav {
  position:fixed; top:0; left:0; right:0; z-index:900;
  height:68px; padding:0 6%;
  display:flex; align-items:center; justify-content:space-between;
  transition:background 280ms var(--ease-ui), border-color 280ms var(--ease-ui), box-shadow 280ms var(--ease-ui);
  border-bottom:1px solid transparent;
}
nav.solid {
  background:var(--nav-bg);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-color:var(--border);
  box-shadow:0 2px 20px var(--shadow);
}

/* ---- LOGO SISTEMA — imagen real ---- */
.nav-brand {
  display:flex; flex-direction:column; align-items:flex-start;
  gap:1px; flex-shrink:0;
}
.nav-tagline {
  font-size:.52rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--blue);
  opacity:.85;
  line-height:1;
  padding-left:1px;
  transition:opacity 350ms;
}
body.dark .nav-tagline { color:var(--blue-light); }

.logo-link {
  display:inline-flex;
  align-items:center;
  text-decoration:none;
  flex-shrink:0;
}
.logo-img {
  display:block;
  width:auto;
  object-fit:contain;
  transition:opacity 200ms;
}

/* Nav — logo-nav.png RGBA (fondo transparente) */
.logo-img.logo-light { height:40px; }
.logo-img.logo-dark  { height:40px; display:none; }

body.dark .logo-img.logo-light { display:none; }
body.dark .logo-img.logo-dark  {
  display:block;
  filter:brightness(0) invert(1);   /* colorido → blanco puro */
}

/* Footer — logo completo con icono */
.logo-link--footer .logo-img.logo-light { height:72px; filter:none; }
.logo-link--footer .logo-img.logo-dark  { height:72px; }
body.dark .logo-link--footer .logo-img.logo-dark { filter:none; }

/* Nav links */
.nav-links { display:flex; list-style:none; gap:2.5rem; }
.nav-links a {
  color:var(--muted);
  text-decoration:none;
  font-size:.875rem;
  font-weight:500;
  transition:color 200ms var(--ease-ui);
  position:relative;
  padding-bottom:2px;
}
.nav-links a::after {
  content:'';
  position:absolute;
  bottom:-2px; left:0; right:0;
  height:2px;
  background:linear-gradient(90deg,var(--blue),var(--blue-light));
  border-radius:1px;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 220ms var(--ease-out);
}
@media (hover:hover) and (pointer:fine) {
  .nav-links a:hover { color:var(--text); }
  .nav-links a:hover::after { transform:scaleX(1); }
}
.nav-links a.active { color:var(--text); }
.nav-links a.active::after { transform:scaleX(1); }

/* Nav right controls */
.nav-controls { display:flex; align-items:center; gap:.6rem; }

/* ---- Nav icon-buttons — shared base (same 36×36 box) ---- */
.lang-btn,
.theme-btn {
  height:36px;
  border-radius:9px;
  background:var(--surface);
  border:1px solid var(--border);
  color:var(--muted);
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:background 180ms var(--ease-ui), color 180ms, transform 150ms var(--ease-out), border-color 180ms;
}
@media (hover:hover) and (pointer:fine) {
  .lang-btn:hover,
  .theme-btn:hover { background:var(--surface2); color:var(--text); transform:translateY(-1px); border-color:rgba(27,91,180,.25); }
}
.lang-btn:active,
.theme-btn:active { transform:scale(.96); transition-duration:80ms; }

/* Language toggle — same 36×36 square as theme-btn */
.lang-btn {
  width:36px;
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.04em;
}

/* Theme toggle — square icon */
.theme-btn { width:36px; }
.theme-btn .icon-sun, .theme-btn .icon-moon { width:16px; height:16px; display:block; }
body:not(.dark) .icon-moon { display:none; }
body.dark       .icon-sun  { display:none; }
body.dark       .icon-moon { display:block; }

/* ── CTA nav button — estilo link con pill sutil ── */
.nav-btn {
  display:inline-flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
  color:var(--blue);
  padding:.42rem 1rem;
  border-radius:20px;
  border:1.5px solid rgba(27,91,180,.35);
  font-size:.875rem; font-weight:600;
  text-decoration:none;
  background:transparent;
  transition:border-color 200ms var(--ease-ui), background 200ms var(--ease-ui),
             color 200ms, transform 160ms var(--ease-out), box-shadow 200ms;
}
body.dark .nav-btn {
  color:var(--blue-light);
  border-color:rgba(91,156,246,.35);
}

/* Capas de texto del nav-btn */
.nav-btn__default {
  display:inline-flex; align-items:center; gap:.4rem;
  transition:opacity 180ms var(--ease-out), transform 180ms var(--ease-out), filter 180ms;
}
.nav-btn__hover {
  position:absolute; inset:0;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-size:.78rem; font-weight:700; letter-spacing:.01em;
  opacity:0; transform:translateY(8px);
  transition:opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
  white-space:nowrap;
}

/* ── Envelope + WA animation ── */
.env-wrap {
  display:inline-flex; align-items:center; gap:.3rem;
}
.env-icon { display:block; flex-shrink:0; }
.env-plane {
  position:absolute; left:1px; top:50%;
  transform:translateY(-50%) scale(0) rotate(10deg);
  opacity:0; color:currentColor; pointer-events:none;
}
.wa-hover-icon {
  display:block; flex-shrink:0;
  transform:scale(0) translateX(-4px);
  opacity:0;
  transition:transform 220ms var(--ease-out) 200ms, opacity 220ms var(--ease-out) 200ms;
}

@keyframes envSend {
  0%   { transform:rotate(0deg) scale(1) translateX(0); }
  20%  { transform:rotate(-14deg) scale(1.1) translateX(-1px); }
  55%  { transform:rotate(-20deg) scale(0.88) translateX(4px); }
  80%  { transform:rotate(3deg) scale(1.03) translateX(-1px); }
  100% { transform:rotate(0deg) scale(1) translateX(0); }
}
@keyframes planeFly {
  0%   { transform:translateY(-50%) scale(0) rotate(20deg); opacity:0; }
  18%  { transform:translateY(-52%) scale(1) rotate(0deg); opacity:1; }
  80%  { transform:translateY(calc(-50% - 9px)) scale(.7) translateX(12px) rotate(-15deg); opacity:.8; }
  100% { transform:translateY(calc(-50% - 13px)) scale(.2) translateX(18px) rotate(-30deg); opacity:0; }
}
@keyframes waPop {
  0%   { transform:scale(0) translateX(-4px); opacity:0; }
  60%  { transform:scale(1.15) translateX(1px); opacity:1; }
  100% { transform:scale(1) translateX(0); opacity:1; }
}

@media (hover:hover) and (pointer:fine) {
  .nav-btn:hover {
    border-color:var(--blue);
    background:rgba(27,91,180,.07);
    box-shadow:0 4px 16px rgba(27,91,180,.18);
  }
  body.dark .nav-btn:hover { background:rgba(91,156,246,.1); }
  .nav-btn:hover .nav-btn__default {
    opacity:0; transform:translateY(-8px); filter:blur(2px);
  }
  .nav-btn:hover .nav-btn__hover   { opacity:1; transform:translateY(0); }
  .nav-btn:hover .env-icon         { animation:envSend 400ms var(--ease-out) 60ms both; }
  .nav-btn:hover .env-plane        { animation:planeFly 480ms var(--ease-out) 80ms both; }
  .nav-btn:hover .wa-hover-icon    { animation:waPop 280ms var(--ease-out) 200ms both; }
}
.nav-btn:active { transform:scale(.97); transition-duration:80ms; }

.hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; }
.hamburger span { display:block; width:22px; height:2px; background:var(--text); border-radius:2px; transition:transform 250ms var(--ease-out), opacity 200ms; }

/* ============================================================
   SHARED
   ============================================================ */
section { position:relative; z-index:1; padding:110px 6%; }

.tag {
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--blue); margin-bottom:.9rem;
}
.tag::before { content:''; width:16px; height:2px; background:var(--blue); border-radius:2px; }

.section-title {
  font-size:clamp(1.9rem,3.5vw,2.75rem);
  font-weight:800; line-height:1.12; letter-spacing:-.025em; margin-bottom:1rem;
}
.section-sub { font-size:.95rem; color:var(--muted); line-height:1.75; }

.divider {
  height:1px;
  background:linear-gradient(90deg,transparent,var(--border),transparent);
  margin:0 6%; position:relative; z-index:1;
}

/* ============================================================
   PARTNERS / PLATAFORMAS
   ============================================================ */
.partners { padding-top:48px; padding-bottom:48px; text-align:center; }
.partners-label {
  font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); margin-bottom:2rem;
}
.partners-row {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:1rem 2.75rem; max-width:920px; margin:0 auto;
}
.brand {
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.55rem .9rem; border-radius:12px;
  filter:grayscale(.35); opacity:.72;
  transition:filter 260ms var(--ease-out), opacity 260ms var(--ease-out), transform 260ms var(--ease-out), background 260ms var(--ease-out);
}
.brand-mark { flex-shrink:0; }
.brand-mark--zoho { width:auto; height:27px; }
.brand-mark--azure { width:28px; height:28px; }
.brand-name .ong-badge {
  display:inline-block; margin-left:4px; vertical-align:middle;
  font-size:.6rem; font-weight:800; letter-spacing:.03em;
  color:#fff; background:linear-gradient(135deg,#1B9E48,#27C463);
  padding:1px 7px; border-radius:100px;
}
.brand-name {
  font-size:1.05rem; font-weight:800; letter-spacing:-.01em; color:var(--text); white-space:nowrap;
}
@media (hover:hover) and (pointer:fine) {
  .brand:hover {
    filter:grayscale(0); opacity:1;
    transform:translateY(-3px);
    background:var(--surface);
  }
}
@media (max-width:560px) {
  .partners-row { gap:.75rem 1.75rem; }
  .brand-name { font-size:.92rem; }
}

/* Gradient text */
.grad {
  background:linear-gradient(135deg,var(--blue-light),var(--blue-mid),var(--purple));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.red { color:var(--red-light); }

/* ============================================================
   DRIBBBLE ANIMATIONS
   ============================================================ */

/* 1. Word reveal — clip-path + skewY (SyntetiX-style dramatic entrance) */
@keyframes wordReveal {
  from {
    clip-path: inset(0 0 110% 0);
    opacity: 0;
    transform: translateY(18px) skewY(1.5deg);
  }
  to {
    clip-path: inset(0 0 0% 0);
    opacity: 1;
    transform: translateY(0) skewY(0deg);
  }
}
.word-reveal span {
  display:inline-block;
  clip-path:inset(0 0 110% 0);
  opacity:0;
  animation:wordReveal 560ms var(--ease-out) both;
}
.word-reveal span:nth-child(1)  { animation-delay:.04s; }
.word-reveal span:nth-child(2)  { animation-delay:.10s; }
.word-reveal span:nth-child(3)  { animation-delay:.16s; }
.word-reveal span:nth-child(4)  { animation-delay:.21s; }
.word-reveal span:nth-child(5)  { animation-delay:.26s; }
.word-reveal span:nth-child(6)  { animation-delay:.31s; }
.word-reveal span:nth-child(7)  { animation-delay:.36s; }
.word-reveal span:nth-child(8)  { animation-delay:.41s; }
.word-reveal span:nth-child(9)  { animation-delay:.46s; }
.word-reveal span:nth-child(10) { animation-delay:.51s; }

/* 2. Animated gradient border on cards (Dribbble style) */
@keyframes borderSpin {
  from { --angle:0deg; }
  to   { --angle:360deg; }
}
@property --angle {
  syntax:'<angle>';
  initial-value:0deg;
  inherits:false;
}

/* 3. Shimmer effect on numbers */
@keyframes shimmer {
  0%   { background-position:200% center; }
  100% { background-position:-200% center; }
}

/* 4. Glow pulse on pill */
@keyframes glowPulse {
  0%,100% { box-shadow:0 0 0 0 rgba(91,156,246,.3); }
  50%      { box-shadow:0 0 0 6px rgba(91,156,246,.0); }
}

/* 5. Float (GPU-only, transform) */
@keyframes floatMain { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(-14px)} }
@keyframes floatA    { 0%,100%{transform:rotate(-6deg) translateY(0)} 50%{transform:rotate(-6deg) translateY(-10px)} }
@keyframes floatB    { 0%,100%{transform:rotate(5deg) translateY(0)} 50%{transform:rotate(5deg) translateY(-12px)} }
@keyframes blink     { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.35;transform:scale(.75)} }

/* ============================================================
   HERO  — SyntetiX-inspired
   ============================================================ */
#inicio {
  min-height:100vh;
  display:grid;
  grid-template-columns:1fr 1fr;
  position:relative; overflow:hidden;
  align-items:center;
  gap:4rem;
  padding-top:120px;
  padding-bottom:80px;
  /* SyntetiX: dramatic dual-glow behind hero text */
  background:
    radial-gradient(ellipse 68% 55% at 28% 42%, rgba(27,91,180,.09) 0%, transparent 65%),
    radial-gradient(ellipse 45% 40% at 72% 68%, rgba(108,77,232,.07) 0%, transparent 60%),
    radial-gradient(ellipse 30% 30% at 15% 80%, rgba(232,76,43,.05) 0%, transparent 60%);
}
/* SyntetiX-style horizontal line accent above hero text */
#inicio > .hero-text::before {
  content:'';
  display:block;
  width:56px; height:2px;
  background:linear-gradient(90deg, var(--blue), var(--purple));
  border-radius:2px;
  margin-bottom:1.5rem;
  animation:wordReveal 600ms var(--ease-out) .05s both;
}

.pill {
  display:inline-flex; align-items:center; gap:.55rem;
  /* SyntetiX: gradient border via background-clip trick */
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    linear-gradient(135deg, var(--blue), var(--purple), var(--blue-light)) border-box;
  border:1px solid transparent;
  color:var(--blue);
  padding:.4rem 1.25rem;
  border-radius:100px;
  font-size:.71rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  margin-bottom:1.75rem;
  animation:glowPulse 3s ease-in-out infinite;
  box-shadow:0 0 20px rgba(27,91,180,.1);
}
body.dark .pill {
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    linear-gradient(135deg, var(--blue), var(--purple), var(--blue-light)) border-box;
}
.pill-dot { width:7px; height:7px; border-radius:50%; background:var(--blue); animation:blink 2.4s ease-in-out infinite; flex-shrink:0; }

.hero-title {
  font-size:clamp(2.6rem,5vw,4.5rem);
  font-weight:900; line-height:1.04; letter-spacing:-.035em; margin-bottom:1.6rem;
  /* Overflow hidden per line for clip-path animation */
}
.hero-sub {
  font-size:1rem; color:var(--muted); line-height:1.8; max-width:480px; margin-bottom:2.5rem;
  border-left:2px solid var(--border); padding-left:1rem;
}

.btn-row { display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:3rem; }

.btn-main {
  display:inline-flex; align-items:center; gap:.45rem;
  background:linear-gradient(135deg,var(--blue),var(--blue-mid));
  color:#fff; padding:.875rem 2rem; border-radius:10px;
  font-weight:700; font-size:.95rem; text-decoration:none; border:none; cursor:pointer;
  box-shadow:0 4px 20px rgba(27,91,180,.3);
  transition:transform 160ms var(--ease-out), box-shadow 200ms var(--ease-ui);
  will-change:transform;
}
@media (hover:hover) and (pointer:fine) {
  .btn-main:hover { transform:translateY(-2px); box-shadow:0 10px 28px rgba(27,91,180,.45); }
}
.btn-main:active { transform:scale(.97); transition-duration:80ms; }

.btn-ghost {
  display:inline-flex; align-items:center; gap:.45rem;
  background:var(--surface); border:1px solid var(--border);
  color:var(--text); padding:.875rem 1.75rem; border-radius:10px;
  font-weight:600; font-size:.95rem; text-decoration:none;
  transition:background 200ms var(--ease-ui), transform 160ms var(--ease-out);
}
@media (hover:hover) and (pointer:fine) {
  .btn-ghost:hover { background:var(--surface2); transform:translateY(-2px); }
}
.btn-ghost:active { transform:scale(.97); transition-duration:80ms; }

.hero-stats { display:flex; gap:2.5rem; flex-wrap:wrap; }
.hs-num {
  font-size:1.65rem; font-weight:900; line-height:1; display:block;
  background:linear-gradient(135deg,var(--blue) 0%,var(--blue-light) 50%,var(--blue) 100%);
  background-size:200% auto;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  animation:shimmer 4s linear infinite;
}
.hs-lbl { font-size:.72rem; color:var(--muted); margin-top:.25rem; }

/* ============================================================
   HERO VISUAL
   ============================================================ */
.hero-visual { position:relative; height:520px; }
/* ── Titular rotativo (centrado vertical para textos cortos) ── */
.hero-rotator { display:grid; position:relative; align-items:center; }
.hr-line {
  grid-area:1 / 1;
  opacity:0;
  transition:opacity 300ms var(--ease-out);
}
.hr-line.active { opacity:1; }
/* Título animado: revelado palabra por palabra (estilo "animated titles") */
.hr-word { display:inline-block; }
.hr-line.active .hr-word { animation:hrWordIn 620ms var(--ease-out) both; }
@keyframes hrWordIn {
  0%   { opacity:0; transform:translateY(0.6em) scale(.96); filter:blur(5px); }
  60%  { filter:blur(0); }
  100% { opacity:1; transform:none; filter:blur(0); }
}
.hr-key {
  background-clip:text; -webkit-background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  cursor:pointer; white-space:nowrap;
  background-size:200% auto; transition:filter 200ms var(--ease-ui);
}
.hr-zoho  { background-image:linear-gradient(120deg,var(--blue),var(--blue-light),var(--blue-mid)); }
.hr-m365  { background-image:linear-gradient(120deg,#E8590C,#FF7A45,#FF9A6B); }
.hr-azure { background-image:linear-gradient(120deg,#0F6CBD,#39A0E0,#5FB6E8); }
@media (hover:hover) and (pointer:fine) {
  .hr-key:hover { filter:brightness(1.12) drop-shadow(0 2px 10px rgba(46,122,230,.25)); }
}

/* ── Carrusel del hero-visual (las pantallas se intercambian) ── */
.screen {
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:16px; overflow:hidden;
  box-shadow:0 24px 64px var(--shadow), 0 0 0 1px var(--border);
}
body:not(.dark) .screen { box-shadow:0 18px 50px rgba(27,91,180,.13), 0 0 0 1px var(--border); }

/* Carrusel: el Lottie y las pantallas se intercambian (una sola a la vez) */
.hero-visual .screen,
.hero-visual .hero-lottie {
  position:absolute; top:50%; left:50%;
  opacity:0; pointer-events:none;
  transition:opacity 620ms var(--ease-out), transform 480ms var(--ease-out);
  animation:none; will-change:transform, opacity;
}
.hero-visual .screen.is-shown:not(.focused) { animation:screenFloat 5.5s ease-in-out infinite; }
@keyframes screenFloat {
  0%,100% { transform:translate(-50%,-50%) scale(var(--s)) rotate(-0.8deg); }
  30%     { transform:translate(-50%,-53%) scale(var(--s)) rotate(0.7deg); }
  65%     { transform:translate(-50%,-47.5%) scale(var(--s)) rotate(-0.4deg); }
}
.screen-main  { width:340px; --s:1.26; }
.screen-side1 { width:196px; --s:2.05; }
.screen-side2 { width:196px; --s:2.05; }
.hero-visual .screen { z-index:2; cursor:pointer; transform:translate(-50%,-50%) scale(calc(var(--s,1) * .95)); }
.hero-visual .screen.is-shown { opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(var(--s,1)); }

.hero-visual .hero-lottie { top:40%; width:142%; height:142%; }
.hero-lottie { z-index:2; transform:translate(-50%,-50%) scale(.96); }
.hero-lottie.is-shown { opacity:1; transform:translate(-50%,-50%) scale(1); }

@media (hover:hover) and (pointer:fine) {
  .hero-visual .screen.is-shown:hover { box-shadow:0 32px 84px rgba(27,91,180,.32), 0 0 0 1.5px var(--blue-light); }
}

/* Pantalla enfocada (clic): un poco más grande y se pausa el carrusel */
.hero-visual .screen.is-shown.focused {
  transform:translate(-50%,-50%) scale(calc(var(--s,1) * 1.12));
  z-index:6; overflow:visible;   /* permite arrastrar widgets sin recortarlos */
  box-shadow:0 42px 100px rgba(27,91,180,.42), 0 0 0 2px var(--blue-mid);
}

/* Solo los elementos MOVIBLES (resaltados, interacción sutil) */
.focused .movable {
  cursor:grab; border-radius:7px;
  transition:box-shadow 200ms var(--ease-out);
  animation:movableFloat 3.2s ease-in-out infinite, movablePulse 2.2s ease-in-out infinite;
}
.focused .movable.dragging { cursor:grabbing; box-shadow:0 10px 26px rgba(27,91,180,.55); z-index:30; animation:none; }
.movable.flipping { animation:none !important; }   /* durante el reacomodo, la posición la controla el FLIP */
@keyframes movableFloat {
  0%,100% { transform:translateY(0); }
  50%     { transform:translateY(-5px); }
}
@keyframes movablePulse {
  0%,100% { box-shadow:0 0 0 1.5px rgba(91,156,246,.5), 0 3px 10px rgba(27,91,180,.16); }
  50%     { box-shadow:0 0 0 2.5px rgba(46,122,230,.7), 0 5px 16px rgba(27,91,180,.3); }
}

/* Pista */
.drag-hint {
  position:absolute; z-index:10; left:50%; top:12px; transform:translateX(-50%) translateY(-8px);
  font-size:.62rem; font-weight:700; color:#fff;
  background:linear-gradient(135deg,var(--blue),var(--blue-mid)); padding:4px 12px; border-radius:100px;
  white-space:nowrap; pointer-events:none; opacity:0;
  box-shadow:0 6px 18px rgba(27,91,180,.35);
  transition:opacity 260ms var(--ease-out), transform 260ms var(--ease-out);
}
.hero-visual.has-focused .drag-hint { opacity:1; transform:translateX(-50%) translateY(0); }

.hero-glow { position:absolute; width:380px; height:380px; border-radius:50%; background:radial-gradient(circle,rgba(27,91,180,.12) 0%,transparent 70%); top:50%; left:50%; transform:translate(-50%,-50%); pointer-events:none; }

.sb { height:28px; display:flex; align-items:center; padding:0 10px; gap:5px; background:var(--bg3); border-bottom:1px solid var(--border); }
.sb-dot { width:7px; height:7px; border-radius:50%; }
.sb-dot.r{background:#FF5F57}.sb-dot.y{background:#FEBC2E}.sb-dot.g{background:#28C840}
.sb-title { flex:1; text-align:center; font-size:.6rem; color:var(--muted); }
.sb-brand { flex:1; display:flex; align-items:center; gap:4px; padding-left:4px; font-size:.58rem; font-weight:800; color:var(--text); letter-spacing:-.01em; }
.sb-brand img { display:block; }
.ol-time { font-size:.45rem; color:var(--muted); flex-shrink:0; }
.ol-dot { display:inline-block; width:5px; height:5px; border-radius:50%; background:#0078D4; vertical-align:middle; margin-right:2px; }

.sc-body { padding:12px; }
.sc-h { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.sc-h h4 { font-size:.75rem; font-weight:700; }
.sc-badge { font-size:.55rem; font-weight:700; color:var(--blue); background:rgba(27,91,180,.1); border:1px solid rgba(27,91,180,.2); padding:2px 7px; border-radius:100px; }
.sc-kpi { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-bottom:10px; }
.kpi { background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:7px; text-align:center; }
.kpi-v { font-size:.85rem; font-weight:800; color:var(--blue-mid); }
.kpi-v.rv-r { color:var(--red); }
.kpi-l { font-size:.5rem; color:var(--muted); }
.sc-chart { background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:10px; margin-bottom:8px; }
.sc-cl { font-size:.55rem; color:var(--muted); margin-bottom:6px; }
.sc-bars { display:flex; align-items:flex-end; gap:4px; height:40px; }
.sc-bar { flex:1; border-radius:3px 3px 0 0; transition:height 800ms var(--ease-out); }
.sc-bar.b { background:linear-gradient(to top,var(--blue),var(--blue-light)); }
.sc-bar.r { background:linear-gradient(to top,var(--red),var(--red-light)); }
.sc-list { display:flex; flex-direction:column; gap:5px; }
.sc-item { display:flex; align-items:center; gap:6px; background:var(--surface); border:1px solid var(--border); border-radius:7px; padding:6px 8px; }
.sc-av { width:20px; height:20px; border-radius:50%; font-size:.5rem; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.sc-name { font-size:.6rem; font-weight:600; flex:1; }
.sc-tag { font-size:.5rem; font-weight:700; padding:1px 6px; border-radius:100px; }
.hot{background:rgba(232,76,43,.12);color:var(--red)}.warm{background:rgba(254,188,46,.15);color:#B8860B}.cold{background:rgba(27,91,180,.12);color:var(--blue-mid)}
body.dark .hot{color:var(--red-light)}.body.dark .warm{color:#FEBC2E}.body.dark .cold{color:var(--blue-light)}

.ss-body,.sa-body { padding:10px; }
.ss-h,.sa-h { font-size:.65rem; font-weight:700; margin-bottom:8px; }
.ss-card { display:flex; flex-direction:column; gap:4px; }
.ss-row { display:flex; align-items:center; gap:6px; background:var(--surface); border:1px solid var(--border); border-radius:7px; padding:5px 7px; }
.ss-av { width:18px; height:18px; border-radius:50%; font-size:.45rem; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ss-info { flex:1; }
.ss-n { font-size:.55rem; font-weight:600; }
.ss-c { font-size:.45rem; color:var(--muted); }
.ss-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
/* ── Outlook (Office 365) ── */
.ol-bar { display:flex; align-items:center; gap:5px; padding:5px 9px; background:linear-gradient(90deg,#0F6CBD,#1B7FD4); }
.ol-bar span { font-size:.58rem; font-weight:800; color:#fff; flex:1; }
.ol-search { flex:0 0 auto !important; width:34px; height:9px; border-radius:5px; background:rgba(255,255,255,.25); }
.ol-folders { display:flex; gap:10px; padding:5px 10px 0; }
.ol-f { font-size:.5rem; font-weight:700; color:var(--muted); padding-bottom:4px; border-bottom:2px solid transparent; }
.ol-f.on { color:#0F6CBD; border-bottom-color:#0F6CBD; }
body.dark .ol-f.on { color:#4FA8E8; border-bottom-color:#4FA8E8; }

/* ── Zoho CRM module tabs ── */
.zc-tabs { display:flex; gap:12px; padding:7px 12px 0; border-bottom:1px solid var(--border); }
.zc-tab { font-size:.52rem; font-weight:700; color:var(--muted); padding-bottom:6px; border-bottom:2px solid transparent; }
.zc-tab.on { color:#E42527; border-bottom-color:#E42527; }

/* ── Azure Portal ── */
.az-sb { background:linear-gradient(90deg,#0A1F33,#103A5C); }
.az-brand { color:#fff !important; }
.az-body { padding:10px; }
.az-h { font-size:.6rem; font-weight:700; margin-bottom:8px; color:var(--text); }
.az-list { display:flex; flex-direction:column; gap:5px; margin-bottom:8px; }
.az-row { display:flex; align-items:center; gap:7px; background:var(--surface); border:1px solid var(--border); border-radius:7px; padding:5px 7px; }
.az-ico { width:20px; height:20px; border-radius:5px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ai-web  { background:linear-gradient(135deg,#0F87DA,#0A5FA8); }
.ai-sql  { background:linear-gradient(135deg,#39A0E0,#0F6CBD); }
.ai-stor { background:linear-gradient(135deg,#5FB6E8,#2E8FD0); }
.az-info { flex:1; min-width:0; }
.az-n { font-size:.55rem; font-weight:700; }
.az-s { font-size:.45rem; color:var(--muted); }
.az-badge { font-size:.45rem; font-weight:700; padding:1px 6px; border-radius:100px; flex-shrink:0; }
.az-badge.ok { background:rgba(40,200,64,.14); color:#1E9E48; }
body.dark .az-badge.ok { color:#3BD46A; }
.az-metric { background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:8px; }
.az-ml { display:flex; justify-content:space-between; align-items:center; font-size:.5rem; color:var(--muted); margin-bottom:5px; }
.az-mv { font-weight:800; color:#0F87DA; }
.az-spark { width:100%; height:26px; display:block; }

.sa-line { background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:8px; margin-bottom:6px; }
.sa-ll { font-size:.5rem; color:var(--muted); margin-bottom:6px; }
.sa-wave { height:36px; width:100%; }
.sa-stats { display:grid; grid-template-columns:1fr 1fr; gap:4px; }
.sa-s { background:var(--surface); border:1px solid var(--border); border-radius:7px; padding:6px; }
.sa-sv { font-size:.75rem; font-weight:800; color:var(--blue-mid); }
.sa-sl { font-size:.45rem; color:var(--muted); }

/* ============================================================
   NOSOTROS
   ============================================================ */
#nosotros { background:var(--bg2); }
.nos-grid { display:grid; grid-template-columns:1fr 1fr; gap:6rem; align-items:center; }

.pillars { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:2rem; }
.pillar {
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:var(--r); padding:1.25rem;
  position:relative; overflow:hidden;
  box-shadow:0 2px 12px var(--shadow);
  transition:border-color 200ms var(--ease-ui), transform 200ms var(--ease-out), box-shadow 200ms var(--ease-ui);
}
/* Shine sweep — pseudo-element que cruza la card al hover */
.pillar::before {
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 30%, rgba(27,91,180,.06) 50%, transparent 70%);
  transform:translateX(-100%);
  transition:transform 500ms var(--ease-out);
  pointer-events:none; z-index:0;
}
@media (hover:hover) and (pointer:fine) {
  .pillar:hover {
    border-color:rgba(27,91,180,.4);
    transform:translateY(-6px) scale(1.015);
    box-shadow:0 14px 36px rgba(27,91,180,.13), 0 0 0 1px rgba(27,91,180,.1);
  }
  .pillar:hover::before { transform:translateX(100%); }
  .pillar:hover .pillar-icon { transform:scale(1.35) translateY(-3px) rotate(-6deg); }
}
.pillar > * { position:relative; z-index:1; }
.pillar-icon {
  margin-bottom:.75rem;
  display:inline-flex;
  color:var(--blue);
  transition:transform 280ms var(--ease-out);
  transform-origin: center bottom;
}
.pillar-icon svg { width:27px; height:27px; }
.pillar h4 { font-size:.88rem; font-weight:700; margin-bottom:.3rem; }
.pillar p { font-size:.78rem; color:var(--muted); line-height:1.55; }

.nos-nums { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
.num-card {
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:20px; padding:2rem 1.5rem; text-align:center;
  position:relative; overflow:hidden;
  box-shadow:0 2px 12px var(--shadow);
  transition:transform 200ms var(--ease-out), box-shadow 200ms var(--ease-ui);
}
@media (hover:hover) and (pointer:fine) {
  .num-card:hover {
    transform:translateY(-8px) scale(1.03);
    box-shadow:0 20px 44px rgba(27,91,180,.16), 0 0 0 1px rgba(27,91,180,.12);
    border-color:rgba(27,91,180,.25);
  }
  .num-card:hover .num-val {
    filter:brightness(1.15);
  }
}
.num-card::after { content:''; position:absolute; bottom:0; left:0; right:0; height:3px; }
.num-card.c1::after { background:linear-gradient(90deg,var(--blue),var(--blue-light)); }
.num-card.c2::after { background:linear-gradient(90deg,var(--red),var(--red-light)); }
.num-card.c3::after { background:linear-gradient(90deg,var(--purple),var(--blue-light)); }
.num-card.c4::after { background:linear-gradient(90deg,#28C840,#5CE67A); }
.num-val {
  font-size:2.8rem; font-weight:900; line-height:1; margin-bottom:.5rem; display:block;
  background-size:200% auto;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  animation:shimmer 4s linear infinite;
}
.num-card.c1 .num-val { background-image:linear-gradient(135deg,var(--blue-light),var(--blue-mid),var(--blue-light)); }
.num-card.c2 .num-val { background-image:linear-gradient(135deg,var(--red-light),var(--red),var(--red-light)); }
.num-card.c3 .num-val { background-image:linear-gradient(135deg,var(--blue-light),var(--purple),var(--blue-light)); }
.num-card.c4 .num-val { background-image:linear-gradient(135deg,#5CE67A,#28C840,#5CE67A); }
.num-lbl { font-size:.78rem; color:var(--muted); }

/* ============================================================
   SERVICIOS — Dribbble animated gradient border
   ============================================================ */
#servicios { background:var(--bg); }
.svc-header { text-align:center; max-width:560px; margin:0 auto 3.5rem; }
.svc-header .tag { justify-content:center; }
.svc-header .tag::before { display:none; }
.svc-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.5rem; }

.svc-card {
  background:var(--card-bg);
  border-radius:20px;
  padding:1.75rem;
  position:relative;
  overflow:hidden;
  /* Dribbble: glowing border via pseudo + conic-gradient */
  box-shadow:0 2px 16px var(--shadow);
  transition:transform 240ms var(--ease-out), box-shadow 240ms var(--ease-out);
}

/* Animated gradient border (Dribbble style) */
.svc-card::before {
  content:'';
  position:absolute;
  inset:-1px;
  border-radius:21px;
  padding:1px;
  background:conic-gradient(from var(--angle,0deg), transparent 60%, var(--card-accent,var(--blue)) 80%, transparent 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0;
  transition:opacity 300ms var(--ease-ui);
  animation:borderSpin 4s linear infinite;
}
@media (hover:hover) and (pointer:fine) {
  .svc-card:hover { transform:translateY(-5px); box-shadow:0 16px 40px var(--shadow); }
  .svc-card:hover::before { opacity:1; }
}

/* Top accent line */
.svc-card::after {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
}
.svc-card.g-blue { --card-accent:var(--blue-light); }
.svc-card.g-blue::after { background:linear-gradient(90deg,var(--blue),var(--blue-light)); }
.svc-card.g-pur  { --card-accent:var(--purple); }
.svc-card.g-pur::after  { background:linear-gradient(90deg,var(--purple),var(--blue-light)); }
.svc-card.g-red  { --card-accent:var(--red-light); }
.svc-card.g-red::after  { background:linear-gradient(90deg,var(--red),var(--red-light)); }
.svc-card.g-grn  { --card-accent:#28C840; }
.svc-card.g-grn::after  { background:linear-gradient(90deg,#28C840,#5CE67A); }

.svc-icon { width:52px; height:52px; border-radius:13px; display:flex; align-items:center; justify-content:center; margin-bottom:1.25rem; }
.svc-icon svg { width:25px; height:25px; }
.svc-icon.i-blue { background:rgba(27,91,180,.1); border:1px solid rgba(27,91,180,.2); color:var(--blue); }
.svc-icon.i-red  { background:rgba(232,76,43,.08); border:1px solid rgba(232,76,43,.18); color:var(--red); }
.svc-icon.i-pur  { background:rgba(108,77,232,.08); border:1px solid rgba(108,77,232,.18); color:var(--purple); }
.svc-icon.i-grn  { background:rgba(40,200,64,.07); border:1px solid rgba(40,200,64,.15); color:#1E9E48; }
body.dark .svc-icon.i-grn { color:#3BD46A; }

.svc-card h3 { font-size:1rem; font-weight:800; margin-bottom:.55rem; letter-spacing:-.01em; }
.svc-card p  { font-size:.84rem; color:var(--muted); line-height:1.65; margin-bottom:1.4rem; }
.svc-tags { display:flex; flex-wrap:wrap; gap:.35rem; }
.stag { font-size:.66rem; font-weight:600; padding:.2rem .7rem; border-radius:100px; background:var(--surface); border:1px solid var(--border); color:var(--muted); }

/* ============================================================
   PROCESO
   ============================================================ */
#proceso { background:var(--bg2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.proceso-inner { max-width:880px; margin:0 auto; text-align:center; }
.steps-row { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:3.5rem; position:relative; }
.steps-row::before { content:''; position:absolute; top:27px; left:14%; right:14%; height:1px; background:linear-gradient(90deg,var(--blue),var(--purple),var(--red)); opacity:.25; }
.step-box { text-align:center; padding:.5rem 1rem; }
.step-num {
  width:54px; height:54px; border-radius:50%;
  background:var(--card-bg); border:2px solid var(--blue-mid);
  color:var(--blue-mid); font-size:.95rem; font-weight:900;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 1rem; position:relative; z-index:1;
  box-shadow:0 0 0 4px rgba(27,91,180,.1);
  transition:box-shadow 200ms var(--ease-ui), transform 200ms var(--ease-out);
}
@media (hover:hover) and (pointer:fine) {
  .step-box:hover .step-num { box-shadow:0 0 0 6px rgba(27,91,180,.18); transform:scale(1.06); }
}
.step-box h4 { font-size:.88rem; font-weight:700; margin-bottom:.35rem; }
.step-box p  { font-size:.78rem; color:var(--muted); line-height:1.55; }

/* ============================================================
   CONTACTO
   ============================================================ */
#contacto { background:var(--bg); }
.contact-wrap { display:grid; grid-template-columns:1fr 1.2fr; gap:5rem; align-items:start; }
.c-items { display:flex; flex-direction:column; gap:1.25rem; margin-top:2rem; }
.c-item { display:flex; gap:1rem; align-items:center; }
.c-ico { width:42px; height:42px; border-radius:11px; background:rgba(27,91,180,.08); border:1px solid rgba(27,91,180,.15); display:flex; align-items:center; justify-content:center; color:var(--blue); flex-shrink:0; }
.c-ico svg { width:19px; height:19px; }
.c-txt h5 { font-size:.86rem; font-weight:700; margin-bottom:.15rem; }
.c-txt p,.c-txt a { font-size:.82rem; color:var(--muted); text-decoration:none; transition:color 180ms; }
@media (hover:hover) and (pointer:fine) { .c-txt a:hover { color:var(--blue); } }

.c-form {
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:20px; padding:2.25rem;
  box-shadow:0 4px 24px var(--shadow);
}
.c-form h3 { font-size:1.15rem; font-weight:800; margin-bottom:.35rem; }
.c-form .sub { font-size:.8rem; color:var(--muted); margin-bottom:1.6rem; }
.frow { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.fg { display:flex; flex-direction:column; gap:.4rem; margin-bottom:.9rem; }
.fg label { font-size:.75rem; font-weight:600; color:var(--muted); }
.fg input,.fg select,.fg textarea {
  background:var(--bg2); border:1px solid var(--border);
  color:var(--text); border-radius:9px; padding:.7rem .95rem;
  font-size:.875rem; font-family:inherit; outline:none;
  transition:border-color 200ms var(--ease-ui), box-shadow 200ms var(--ease-ui);
  -webkit-appearance:none;
}
.fg input:focus,.fg select:focus,.fg textarea:focus {
  border-color:var(--blue-mid);
  box-shadow:0 0 0 3px rgba(46,122,230,.12);
}
.fg select option { background:var(--bg2); }
.fg textarea { resize:vertical; min-height:96px; }

.btn-form {
  width:100%; display:flex; align-items:center; justify-content:center; gap:.45rem;
  background:linear-gradient(135deg,var(--blue),var(--blue-mid));
  color:#fff; padding:.9rem; border-radius:9px;
  font-weight:700; font-size:.95rem; border:none; cursor:pointer;
  box-shadow:0 4px 18px rgba(27,91,180,.3);
  transition:transform 160ms var(--ease-out), box-shadow 200ms var(--ease-ui);
}
@media (hover:hover) and (pointer:fine) {
  .btn-form:hover { transform:translateY(-2px); box-shadow:0 10px 28px rgba(27,91,180,.45); }
}
.btn-form:active { transform:scale(.97); transition-duration:80ms; }
.btn-form:disabled { opacity:.6; cursor:not-allowed; transform:none; }

/* reCAPTCHA wrapper */
.recaptcha-wrap { display:flex; flex-direction:column; gap:.4rem; }
.recaptcha-note { font-size:.72rem; color:var(--muted); }
/* Campo de error inline */
.fg .field-err {
  font-size:.72rem; color:#dc2626;
  margin-top:.25rem; display:none;
}
.fg.has-error input, .fg.has-error select, .fg.has-error textarea {
  border-color:#dc2626;
  box-shadow:0 0 0 3px rgba(220,38,38,.1);
}
.fg.has-error .field-err { display:block; }

.form-ok { display:none; text-align:center; padding:2.5rem 0; }
.form-ok .ok-emoji { margin-bottom:.9rem; display:inline-flex; color:#1FB155; }
.form-ok .ok-emoji svg { width:54px; height:54px; }
.f-heart { display:inline-block; vertical-align:-1px; color:var(--red); }
.form-ok h3 { font-size:1.15rem; font-weight:800; margin-bottom:.5rem; }
.form-ok p { font-size:.85rem; color:var(--muted); }

/* ============================================================
   FOOTER
   ============================================================ */
footer { background:var(--bg2); border-top:1px solid var(--border); padding:56px 6% 28px; position:relative; z-index:1; }
.footer-top { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem; margin-bottom:2.5rem; }

/* footer f-brand spacing */
.f-brand { align-items:flex-start; text-align:left; }
.f-brand .logo-link--footer { display:flex; justify-content:flex-start; }
.logo-tagline {
  display:block; margin-top:.35rem;
  font-size:.58rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--blue);
  opacity:.85;
}
body.dark .logo-tagline { color:var(--blue-light); }
.f-brand p { font-size:.8rem; color:var(--muted); line-height:1.7; max-width:200px; margin-top:.5rem; margin-bottom:.75rem; }

.social-links { display:flex; gap:.5rem; margin-top:.25rem; }
.soc-btn {
  width:36px; height:36px; border-radius:9px;
  background:var(--surface); border:1px solid var(--border);
  color:var(--muted); display:flex; align-items:center; justify-content:center;
  text-decoration:none;
  transition:color 180ms var(--ease-ui), background 180ms, transform 160ms var(--ease-out), border-color 180ms;
}
@media (hover:hover) and (pointer:fine) {
  .soc-btn:hover { color:var(--text); background:var(--surface2); border-color:var(--blue); transform:translateY(-2px); }
}
.soc-btn:active { transform:scale(.95); }

.f-col h5 { font-size:.8rem; font-weight:700; margin-bottom:.9rem; }
.f-col ul { list-style:none; display:flex; flex-direction:column; gap:.55rem; }
.f-col ul li a { font-size:.78rem; color:var(--muted); text-decoration:none; transition:color 180ms; }
@media (hover:hover) and (pointer:fine) { .f-col ul li a:hover { color:var(--blue); } }
.footer-bot { border-top:1px solid var(--border); padding-top:1.4rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.75rem; font-size:.75rem; color:var(--muted); }
.footer-bot a { color:var(--blue); text-decoration:none; }

/* ============================================================
   WHATSAPP
   ============================================================ */
.wa {
  position:fixed; bottom:28px; right:28px;
  width:60px; height:60px;
  background:linear-gradient(145deg,#2edb6e,#25D366 55%,#1aaa4f);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 28px rgba(37,211,102,.55); z-index:800; text-decoration:none;
  animation:waBounceFloat 4s cubic-bezier(0.45,0.05,0.55,0.95) infinite;
  transition:transform 180ms var(--ease-out), box-shadow 200ms;
}

/* ── Tooltip —  pill verde con flecha ── */
.wa::before {
  content:'¡Chatea ahora!';
  position:absolute; right:calc(100% + 14px); top:50%;
  transform:translateY(-50%) translateX(10px) scale(.92);
  background:linear-gradient(135deg,#25D366,#128C7E);
  color:#fff;
  font-size:.78rem; font-weight:800; letter-spacing:.02em;
  white-space:nowrap;
  padding:.42rem 1rem .42rem .85rem;
  border-radius:20px;
  box-shadow:0 6px 22px rgba(37,211,102,.45);
  /* flecha apuntando al botón */
  clip-path:polygon(0 0,calc(100% - 9px) 0,100% 50%,calc(100% - 9px) 100%,0 100%);
  opacity:0;
  transition:opacity 220ms var(--ease-out), transform 220ms var(--ease-out);
  pointer-events:none;
}

/* ── Doble anillo pulsante ── */
.wa::after {
  content:'';
  position:absolute; inset:-7px;
  border-radius:50%;
  background:transparent;
  border:2.5px solid #25D366;
  animation:waPulse 2.2s ease-out infinite;
}
.wa-ring2 {
  position:absolute; inset:-7px; border-radius:50%;
  border:2px solid #25D366;
  animation:waPulse 2.2s ease-out 1.1s infinite;
  pointer-events:none;
}

@media (hover:hover) and (pointer:fine) {
  .wa:hover {
    transform:scale(1.12) translateY(-3px);
    box-shadow:0 14px 40px rgba(37,211,102,.7);
    animation-play-state:paused;
  }
  .wa:hover::before {
    opacity:1;
    transform:translateY(-50%) translateX(0) scale(1);
  }
}
.wa:active { transform:scale(.93); transition-duration:80ms; animation-play-state:paused; }
.wa svg { width:30px; height:30px; fill:#fff; filter:drop-shadow(0 1px 3px rgba(0,0,0,.2)); }

/* ── Animaciones ── */
@keyframes waBounceFloat {
  0%,100% { transform:translateY(0) rotate(-3deg); }
  25%      { transform:translateY(-7px) rotate(2deg); }
  50%      { transform:translateY(-11px) rotate(-1deg); }
  75%      { transform:translateY(-5px) rotate(3deg); }
}
@keyframes waPulse {
  0%   { transform:scale(1); opacity:.65; }
  65%  { transform:scale(1.6); opacity:0; }
  100% { transform:scale(1.6); opacity:0; }
}

/* Icono WA en sección contacto */
.c-ico--wa { color:#25D366; }
.wa-chat-link {
  display:inline-flex; align-items:center;
  color:#25D366; font-size:.83rem; font-weight:600; text-decoration:none;
  transition:opacity 160ms var(--ease-ui);
}
@media (hover:hover) and (pointer:fine) {
  .wa-chat-link:hover { opacity:.75; }
}

/* ============================================================
   SCROLL REVEAL — Emil: scale(0.97), ease-out, ~380ms
   ============================================================ */
.rv,.rvl,.rvr { opacity:0; will-change:transform,opacity; }
.rv  { transform:translateY(16px) scale(.97); transition:opacity 380ms var(--ease-out), transform 380ms var(--ease-out); }
.rvl { transform:translateX(-24px) scale(.97); transition:opacity 380ms var(--ease-out), transform 380ms var(--ease-out); }
.rvr { transform:translateX(24px) scale(.97);  transition:opacity 380ms var(--ease-out), transform 380ms var(--ease-out); }
.rv.on,.rvl.on,.rvr.on { opacity:1; transform:none; }
.d1{transition-delay:55ms}.d2{transition-delay:115ms}.d3{transition-delay:175ms}.d4{transition-delay:235ms}

/* prefers-reduced-motion */
@media (prefers-reduced-motion:reduce) {
  .rv,.rvl,.rvr { opacity:1; transform:none; transition:opacity 300ms; }
  .blob,.screen-main,.screen-side1,.screen-side2,.wa { animation:none; }
  .hs-num,.num-val { animation:none; }
  .svc-card::before { animation:none; }
  .word-reveal span { animation:none; opacity:1; clip-path:none; transform:none; }
  .pill-dot { animation:none; }
  .focused .movable { animation:none; }
  .hr-key, .hr-line.active .hr-key { animation:none; }
  .hr-line.active .hr-word { animation:none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1100px) {
  #inicio { grid-template-columns:1fr; text-align:center; padding-top:110px; }
  .hero-visual { display:none; }
  .hero-sub { margin-inline:auto; }
  .btn-row,.hero-stats { justify-content:center; }
  .nos-grid { grid-template-columns:1fr; gap:3rem; }
  .contact-wrap { grid-template-columns:1fr; gap:3rem; }
  .footer-top { grid-template-columns:1fr 1fr; gap:2rem; }
  .lang-btn span { display:none; }
}
@media (max-width:768px) {
  .nav-links { display:none; position:absolute; top:68px; left:0; right:0; flex-direction:column; background:var(--nav-bg); backdrop-filter:blur(20px); padding:1.5rem 6%; gap:.8rem; border-bottom:1px solid var(--border); }
  .nav-links.open { display:flex; }
  .hamburger { display:flex; }
  .nav-btn { display:none; }
  .steps-row { grid-template-columns:1fr 1fr; }
  .steps-row::before { display:none; }
  .frow { grid-template-columns:1fr; }
  .footer-top { grid-template-columns:1fr; }
  section { padding-inline:5%; }
}
@media (max-width:480px) {
  .btn-row { flex-direction:column; }
  .btn-main,.btn-ghost { justify-content:center; }
  .pillars { grid-template-columns:1fr; }
  .nos-nums { grid-template-columns:1fr 1fr; }
}

/* ============================================================
   HERO CANVAS — partículas tipo Spline
   ============================================================ */
.hero-canvas {
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none; z-index:0;
  display:block;
}
/* Asegurar que el texto y visual estén sobre el canvas */
#inicio > .hero-text { position:relative; z-index:2; }
#inicio > .hero-visual { position:relative; z-index:2; }

/* ============================================================
   HERO GEO — orbe 3D CSS + acentos flotantes
   ============================================================ */
.hero-geo {
  position:absolute; inset:0;
  pointer-events:none; z-index:1;
}

/* ---- Orbe 3D ---- */
.geo-orb {
  position:absolute;
  top:12%; right:4%;
  width:180px; height:180px;
  transform-style:preserve-3d;
  animation:geoOrbFloat 7s ease-in-out infinite;
}

/* Núcleo — esfera con degradado que simula iluminación 3D */
.geo-orb__core {
  position:absolute; inset:30px;
  border-radius:50%;
  background:radial-gradient(circle at 36% 32%,
    rgba(91,156,246,.9) 0%,
    rgba(27,91,180,.85) 45%,
    rgba(8,30,90,.9) 100%);
  box-shadow:
    0 0 50px rgba(27,91,180,.45),
    0 0 100px rgba(27,91,180,.18),
    inset -10px -10px 28px rgba(0,0,0,.4),
    inset 6px 6px 14px rgba(255,255,255,.12);
  animation:geoCorePulse 4s ease-in-out infinite;
}

/* Punto especular (brillo) */
.geo-orb__glint {
  position:absolute; width:28px; height:28px;
  top:36px; left:44px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.9), transparent 70%);
  filter:blur(5px);
  z-index:3;
}

/* Anillos orbitales con perspectiva 3D */
.geo-orb__ring {
  position:absolute; inset:0;
  border-radius:50%;
  border:1.5px solid;
}
.r1 {
  border-color:rgba(27,91,180,.35);
  animation:ringOrbit1 14s linear infinite;
}
.r2 {
  border-color:rgba(108,77,232,.28);
  animation:ringOrbit2 20s linear infinite reverse;
  inset:-8px;
}
.r3 {
  border-color:rgba(232,76,43,.22);
  animation:ringOrbit3 26s linear infinite;
  inset:-18px;
}

@keyframes ringOrbit1 {
  from { transform:rotateX(72deg) rotateZ(0deg); }
  to   { transform:rotateX(72deg) rotateZ(360deg); }
}
@keyframes ringOrbit2 {
  from { transform:rotateX(58deg) rotateZ(60deg); }
  to   { transform:rotateX(58deg) rotateZ(420deg); }
}
@keyframes ringOrbit3 {
  from { transform:rotateX(80deg) rotateZ(30deg); }
  to   { transform:rotateX(80deg) rotateZ(390deg); }
}
@keyframes geoOrbFloat {
  0%,100% { transform:translateY(0) scale(1); }
  50%      { transform:translateY(-18px) scale(1.03); }
}
@keyframes geoCorePulse {
  0%,100% { box-shadow:0 0 50px rgba(27,91,180,.45),0 0 100px rgba(27,91,180,.18),inset -10px -10px 28px rgba(0,0,0,.4),inset 6px 6px 14px rgba(255,255,255,.12); }
  50%     { box-shadow:0 0 70px rgba(27,91,180,.6),0 0 140px rgba(27,91,180,.25),inset -10px -10px 28px rgba(0,0,0,.4),inset 6px 6px 14px rgba(255,255,255,.12); }
}

/* ---- Diamante flotante ---- */
.geo-diamond {
  position:absolute;
  bottom:18%; left:52%;
  width:52px; height:52px;
  border:1.5px solid rgba(108,77,232,.35);
  transform:rotate(45deg);
  animation:geoDiaSpin 18s linear infinite;
  border-radius:4px;
}
.geo-diamond::before {
  content:''; position:absolute;
  inset:8px;
  border:1px solid rgba(232,76,43,.25);
  border-radius:2px;
}
@keyframes geoDiaSpin {
  from { transform:rotate(45deg); }
  to   { transform:rotate(405deg); }
}

/* ---- Puntos de datos flotantes ---- */
.geo-dot {
  position:absolute; border-radius:50%;
  animation:geoDotFloat ease-in-out infinite alternate;
}
.gd1 { width:8px; height:8px; top:22%; left:48%; background:rgba(27,91,180,.5);  box-shadow:0 0 12px rgba(27,91,180,.5);  animation-duration:4.2s; }
.gd2 { width:6px; height:6px; top:65%; right:10%; background:rgba(232,76,43,.5); box-shadow:0 0 10px rgba(232,76,43,.5);  animation-duration:5.8s; animation-delay:-.9s; }
.gd3 { width:5px; height:5px; top:40%; left:44%; background:rgba(108,77,232,.5);box-shadow:0 0 10px rgba(108,77,232,.5); animation-duration:6.5s; animation-delay:-2s; }
.gd4 { width:7px; height:7px; bottom:25%; left:55%; background:rgba(27,91,180,.4);box-shadow:0 0 10px rgba(27,91,180,.4);animation-duration:3.8s; animation-delay:-1.3s; }
@keyframes geoDotFloat {
  from { transform:translateY(0); }
  to   { transform:translateY(-14px); }
}

/* Dark mode — intensificar brillo del orbe */
body.dark .geo-orb__core {
  box-shadow:
    0 0 60px rgba(91,156,246,.55),
    0 0 120px rgba(27,91,180,.25),
    inset -10px -10px 28px rgba(0,0,0,.5),
    inset 6px 6px 14px rgba(255,255,255,.1);
}
body.dark .r1 { border-color:rgba(91,156,246,.4); }
body.dark .r2 { border-color:rgba(167,139,250,.35); }
body.dark .r3 { border-color:rgba(255,107,74,.28); }
body.dark .geo-diamond { border-color:rgba(167,139,250,.4); }

/* prefers-reduced-motion */
@media (prefers-reduced-motion:reduce) {
  .geo-orb,.geo-orb__ring,.geo-orb__core,.geo-diamond,.geo-dot { animation:none; }
  .hero-canvas { display:none; }
  .wa::after { animation:none; }
}

/* ============================================================
   COOKIE BANNER
   ============================================================ */
.cookie-bar {
  position:fixed; bottom:0; left:0; right:0; z-index:9999;
  background:var(--card-bg);
  border-top:1px solid var(--border);
  box-shadow:0 -4px 32px rgba(27,91,180,.1);
  padding:1rem 6%;
  transform:translateY(100%);
  transition:transform 400ms cubic-bezier(0.23,1,0.32,1);
}
.cookie-bar:not([hidden]) { transform:translateY(0); }
.cookie-bar[hidden]       { display:block !important; }  /* mantener en DOM para animación */

.cookie-bar__inner {
  max-width:1200px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; flex-wrap:wrap;
}
.cookie-bar__text {
  display:flex; align-items:flex-start; gap:.6rem;
  flex:1; min-width:260px;
  font-size:.8rem; color:var(--muted); line-height:1.55;
}
.cookie-bar__text svg { flex-shrink:0; margin-top:1px; color:var(--blue); }
.cookie-bar__text p { margin:0; }
.cookie-policy-link {
  background:none; border:none; padding:0; cursor:pointer;
  color:var(--blue); font-size:.8rem; font-weight:600;
  text-decoration:underline; text-underline-offset:2px;
}
.cookie-bar__actions {
  display:flex; gap:.6rem; flex-shrink:0;
}
.cookie-btn {
  height:36px; padding:0 1.1rem; border-radius:8px;
  font-size:.78rem; font-weight:700; cursor:pointer;
  border:1.5px solid var(--blue);
  transition:transform 150ms cubic-bezier(0.23,1,0.32,1),
             background 160ms, box-shadow 160ms;
  white-space:nowrap;
}
.cookie-btn--outline { background:transparent; color:var(--blue); }
.cookie-btn--solid   { background:var(--blue); color:#fff; }
@media (hover:hover) and (pointer:fine) {
  .cookie-btn--outline:hover { background:rgba(27,91,180,.08); transform:translateY(-1px); }
  .cookie-btn--solid:hover   { background:var(--blue-mid); transform:translateY(-1px);
                                box-shadow:0 6px 18px rgba(27,91,180,.35); }
}
.cookie-btn:active { transform:scale(.96); transition-duration:80ms; }

body.dark .cookie-bar { box-shadow:0 -4px 32px rgba(0,0,0,.3); }

/* ── Cookie Policy Modal ── */
.cookie-modal-overlay {
  position:fixed; inset:0; z-index:10000;
  background:rgba(15,22,40,.55); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  padding:1.5rem;
  opacity:0; transition:opacity 280ms;
}
.cookie-modal-overlay:not([hidden]) { opacity:1; }
.cookie-modal-overlay[hidden]        { display:flex !important; pointer-events:none; }

.cookie-modal {
  background:var(--card-bg); border-radius:16px;
  border:1px solid var(--border);
  box-shadow:0 24px 64px rgba(27,91,180,.18);
  padding:2rem 2rem 1.5rem;
  max-width:680px; width:100%;
  max-height:85vh; overflow-y:auto;
  position:relative;
  transform:scale(.95) translateY(8px);
  transition:transform 280ms cubic-bezier(0.23,1,0.32,1);
}
.cookie-modal-overlay:not([hidden]) .cookie-modal { transform:scale(1) translateY(0); }

.cookie-modal__close {
  position:absolute; top:1rem; right:1rem;
  width:32px; height:32px; border-radius:8px;
  background:var(--surface); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--muted);
  transition:background 160ms, color 160ms, transform 150ms;
}
@media (hover:hover) and (pointer:fine) {
  .cookie-modal__close:hover { background:var(--surface2); color:var(--text); transform:scale(1.08); }
}
.cookie-modal h2 { font-size:1.2rem; font-weight:800; margin-bottom:.75rem; padding-right:2.5rem; }
.cookie-modal h3 { font-size:.9rem; font-weight:700; margin:1.25rem 0 .4rem; color:var(--text); }
.cookie-modal p  { font-size:.82rem; color:var(--muted); line-height:1.65; }
.cookie-modal a  { color:var(--blue); }

/* Cookie table */
.cookie-table-wrap { overflow-x:auto; margin:.75rem 0; border-radius:8px; border:1px solid var(--border); }
.cookie-table { width:100%; border-collapse:collapse; font-size:.75rem; }
.cookie-table th {
  background:var(--surface); padding:.55rem .75rem;
  text-align:left; font-weight:700; color:var(--text);
  border-bottom:1px solid var(--border); white-space:nowrap;
}
.cookie-table td {
  padding:.5rem .75rem; color:var(--muted);
  border-bottom:1px solid var(--border);
  vertical-align:top;
}
.cookie-table tr:last-child td { border-bottom:none; }
.cookie-table tr:nth-child(even) td { background:var(--surface); }

.cookie-modal__actions {
  display:flex; gap:.75rem; justify-content:flex-end;
  margin-top:1.5rem; padding-top:1rem;
  border-top:1px solid var(--border);
}

/* ============================================================
   MEJORAS VISUALES — bento · timeline · pulido tipográfico
   ============================================================ */

/* Títulos sin viudas (evita palabras sueltas al final) */
.section-title, .hero-title, .hr-line { text-wrap:balance; }
.section-sub, .hero-sub { text-wrap:pretty; }

/* ── Servicios → Bento grid asimétrico (desktop) ── */
@media (min-width:768px) {
  .svc-grid {
    grid-template-columns:1fr 1fr;
    grid-auto-rows:minmax(188px,1fr);
    align-items:stretch;
  }
  .svc-card { display:flex; flex-direction:column; }
  .svc-card .svc-tags { margin-top:auto; }
  .svc-card.g-blue { grid-row:span 2; }              /* CRM destacado, columna izquierda */
  .svc-card.g-blue .svc-icon { width:62px; height:62px; border-radius:16px; }
  .svc-card.g-blue .svc-icon svg { width:30px; height:30px; }
  .svc-card.g-blue h3 { font-size:1.3rem; }
  .svc-card.g-blue p  { font-size:.92rem; max-width:40ch; }
  .svc-card.g-grn { grid-column:1 / -1; }            /* Capacitación ancha, fila inferior */
}

/* ── Proceso → línea de tiempo conectada ── */
.steps-row::before { top:28px; height:2px; opacity:.4; }
#proceso .step-num {
  position:relative; z-index:1;
  background:linear-gradient(135deg,var(--blue),var(--blue-mid));
  border:3px solid var(--bg);
  color:#fff;
  box-shadow:0 10px 24px rgba(27,91,180,.32);
  transition:transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}
#proceso .step-box:hover .step-num {
  transform:scale(1.08) translateY(-2px);
  box-shadow:0 0 0 7px rgba(27,91,180,.14), 0 14px 30px rgba(27,91,180,.38);
}

/* ── Elevación uniforme de cards (hover lift consistente) ── */
@media (hover:hover) and (pointer:fine) {
  .num-card { transition:transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out); }
  .num-card:hover { transform:translateY(-4px); box-shadow:0 16px 38px rgba(27,91,180,.16); }
}

/* ── Eyebrow consistente: pill con punto ── */
.tag {
  background:var(--surface); border:1px solid var(--border);
  padding:.34rem .9rem .34rem .72rem; border-radius:100px;
  letter-spacing:.1em; color:var(--blue);
}
.tag::before { width:6px; height:6px; border-radius:50%; background:currentColor; }
.svc-header .tag::before { display:block; }

/* ── Dark mode: superficies y bordes con más separación ── */
body.dark { --border:rgba(255,255,255,0.10); --surface:rgba(255,255,255,0.055); --surface2:rgba(255,255,255,0.09); }

/* ── Acento secundario: chips de cada servicio con su color (más vida + coral) ── */
.svc-card .stag {
  background:color-mix(in srgb, var(--card-accent) 13%, transparent);
  border-color:color-mix(in srgb, var(--card-accent) 30%, transparent);
  color:color-mix(in srgb, var(--card-accent) 70%, var(--text));
}

/* ── Acento coral en la zona de conversión (formulario) ── */
.c-form { position:relative; overflow:hidden; }
.c-form::before {
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, var(--red), var(--red-light), var(--blue));
}

/* ── CTA secundario con identidad cálida al hover (azul primario / coral secundario) ── */
@media (hover:hover) and (pointer:fine) {
  .btn-ghost:hover { border-color:color-mix(in srgb, var(--red) 40%, var(--border)); }
  .btn-ghost:hover svg { color:var(--red); }
}

/* ── Titular del inicio más animado: término clave con brillo en movimiento + pop ── */
.hr-key { display:inline-block; animation:hrShine 5s linear infinite; }
.hr-line.active .hr-key { animation:hrShine 5s linear infinite, hrPop 560ms var(--ease-out); }
@keyframes hrShine { to { background-position:200% center; } }
@keyframes hrPop {
  0%   { transform:translateY(3px) scale(.94); opacity:.35; }
  60%  { transform:translateY(0) scale(1.03); }
  100% { transform:none; opacity:1; }
}
/* punto del pill late con más energía */
.pill-dot { box-shadow:0 0 0 0 rgba(91,156,246,.55); animation:pillPulse 2.2s var(--ease-out) infinite; }
@keyframes pillPulse {
  0%   { box-shadow:0 0 0 0 rgba(91,156,246,.5); }
  70%  { box-shadow:0 0 0 7px rgba(91,156,246,0); }
  100% { box-shadow:0 0 0 0 rgba(91,156,246,0); }
}