/* ===== Base ===== */
:root{
  --navy:#0b1d3a; --ink:#e9efff; --paper:#0d1a34;
  --cyan:#20e3d6; --blue:#38bdf8; --violet:#8b5cf6; --pink:#f472b6;
  --muted:203 213 225;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;overflow-x:hidden}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{
  font-family:"Inter Tight", Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:#0a1530;color:#fff;font-weight:400;
}
img{display:block;max-width:100%;height:auto}
[hidden]{display:none !important;}
.container{max-width:1200px;margin-inline:auto;padding:0 24px}
.pill{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:.85rem 1.2rem;font-weight:600;text-decoration:none;transition:.25s all;white-space:nowrap}
.pill-main{background:linear-gradient(90deg,var(--cyan),var(--blue));color:#041427;box-shadow:0 10px 30px rgba(32,227,214,.35)}
.pill-main:hover{transform:translateY(-2px);box-shadow:0 16px 44px rgba(32,227,214,.45)}
.pill-white{background:#fff;color:#07152f;font-weight:700;border:1px solid rgba(255,255,255,.2)}
.pill-white:hover{filter:brightness(1.04)}
.pill-ghost{background:#0f2b58;color:#e8efff;border:1px solid #1b3c7b}
.pill-ghost:hover{filter:brightness(1.06)}

/* ===== Nav ===== */
.site-nav{position:sticky;top:0;z-index:50;background:#081532;border-bottom:1px solid rgba(255,255,255,.06)}
.nav{display:flex;align-items:center;justify-content:space-between;min-height:72px}
.logo-img{height:38px;width:auto;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
.nav-links{display:flex;align-items:center;gap:14px}
.nav-toggle{display:none;background:none;border:0}
.nav-toggle span{display:block;width:24px;height:2px;background:#e9efff;margin:5px 0;border-radius:2px}

/* ===== Hero ===== */
.hero{position:relative;min-height:84vh;display:flex;align-items:center;background:#0a1530;isolation:isolate}
.hero-inner{position:relative;z-index:2;text-align:center;max-width:980px}
.headline{font-family:"Space Grotesk","Inter Tight",sans-serif;font-weight:600;letter-spacing:-.02em;text-wrap:balance;font-size:clamp(2.2rem,5.2vw,4.6rem);line-height:1.02;margin:0 0 14px}
.highlight{background:linear-gradient(90deg,var(--cyan),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{color:rgba(var(--muted)/.96);margin:0 auto 18px;max-width:740px;font-size:clamp(1rem,1.2vw,1.15rem)}
.cta-row{display:flex;justify-content:center;gap:12px}

/* KPIs */
.kpi-ribbon{position:relative;margin-top:36px;padding:26px 20px;border-radius:28px;isolation:isolate}
.kpi-ribbon::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));box-shadow:0 10px 30px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.10);z-index:0}
.kpi-ribbon::after{content:"";position:absolute;top:0;bottom:0;width:28%;left:-8%;border-radius:inherit;background:linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);transform:skewX(-18deg) translateX(-60%);animation:kpiSweep 6s linear infinite;z-index:0;pointer-events:none}
@keyframes kpiSweep{to{transform:skewX(-18deg) translateX(140%)}}
.kpi-list{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.kpi-item{text-align:center;padding:6px 10px;position:relative}
.kpi-item + .kpi-item::before{content:"";position:absolute;left:0;top:18%;bottom:18%;width:1px;background:linear-gradient(to bottom, transparent, rgba(255,255,255,.18), transparent)}
.kpi-num{display:block;font-family:"Space Grotesk","Inter Tight",sans-serif;font-weight:700;letter-spacing:-.02em;font-size:clamp(1.8rem,3.2vw,2.4rem);background:linear-gradient(90deg,var(--cyan),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 8px 22px rgba(56,189,248,.22))}
.kpi-label{display:block;margin-top:4px;color:rgba(var(--muted)/.92);font-size:.95rem;line-height:1.35}

/* Aurora + video */
.aurora{position:absolute;inset:0;overflow:hidden}
.bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.16;pointer-events:none}

/* ===== Brands ===== */
.trust.brands{padding:64px 0}
.trust-title{margin:0 0 16px;text-align:center;font:600 2rem "Space Grotesk","Inter Tight",sans-serif}
.trust-title span{background:linear-gradient(90deg,var(--cyan),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent}
.trust-sub{margin:6px 0 22px;text-align:center;color:rgba(var(--muted)/.9);font-weight:500}
.brandwall{list-style:none;margin:0;padding:0;display:grid;align-items:center;justify-items:center;grid-template-columns:repeat(6,1fr);gap:28px}
.brand-item{position:relative;opacity:.98;animation:brandFloat 6.5s ease-in-out infinite}
.brand-item:nth-child(2){animation-delay:.3s}.brand-item:nth-child(3){animation-delay:.6s}.brand-item:nth-child(4){animation-delay:.9s}.brand-item:nth-child(5){animation-delay:1.2s}.brand-item:nth-child(6){animation-delay:1.5s}
@keyframes brandFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.brand-logo{height:72px;max-width:220px;object-fit:contain;transition:transform .28s, filter .28s}
.brand-item:hover .brand-logo{transform:translateY(-4px) scale(1.04);filter:drop-shadow(0 6px 18px rgba(56,189,248,.18))}

/* ===== Why ===== */
.why{position:relative;padding:72px 0;background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01))}
.why-head{text-align:center;margin-bottom:26px}
.eyebrow{display:inline-block;padding:.25rem .6rem;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#d7e5ff;font-weight:700;letter-spacing:.3px;margin-bottom:10px}
.why-title{margin:0 0 8px;font:600 2rem "Space Grotesk","Inter Tight",sans-serif}
.why-title span{background:linear-gradient(90deg,var(--cyan),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent}
.why-sub{max-width:820px;margin:0 auto;color:rgba(var(--muted)/.92)}
.why-grid{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.why-card{position:relative;border-radius:18px;padding:18px 16px 20px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));color:#e9efff;box-shadow:0 12px 30px rgba(0,0,0,.25);transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .35s, box-shadow .35s}
.why-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:conic-gradient(from var(--grad,0deg), var(--cyan), var(--blue), var(--violet), var(--cyan));-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.8;pointer-events:none;animation:spinGrad 9s linear infinite}
@keyframes spinGrad{to{--grad:360deg}}
.why-card:hover{transform:perspective(800px) translateY(-4px)}
.why-icon{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;margin-bottom:10px;color:#0b1d3a;background:linear-gradient(180deg,var(--cyan),var(--blue));box-shadow:0 10px 24px rgba(56,189,248,.25)}
.why-card h3{margin:.2rem 0 .25rem;font:700 1.2rem "Space Grotesk","Inter Tight",sans-serif}
.why-card p{margin:0;color:rgba(var(--muted)/.9)}

/* ===== Soluciones ===== */
.solutions{padding:72px 0;background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01))}
.solutions-title{margin:0 0 18px;text-align:center;font:600 2rem "Space Grotesk","Inter Tight",sans-serif}
.sol-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:1024px){.sol-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.sol-grid{grid-template-columns:1fr}}
.sol-card{border-radius:18px;overflow:hidden;background:transparent;border:1px solid rgba(255,255,255,.08);box-shadow:0 14px 36px rgba(0,0,0,.28);transition:transform .28s, box-shadow .28s}
.sol-card:hover{transform:translateY(-4px);box-shadow:0 20px 48px rgba(0,0,0,.34)}
.sol-media{position:relative;aspect-ratio:16/10;background:#0b1f45}
.sol-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sol-body{background:#0a1f44;padding:18px}
.sol-body h3{margin:0 0 6px;font:700 1.25rem "Space Grotesk","Inter Tight",sans-serif}
.sol-body p{margin:0 0 10px;color:rgba(var(--muted)/.92)}
.sol-tags{display:flex;flex-wrap:wrap;gap:8px}
.sol-tags span{background:#0f2b58;border:1px solid #1b3c7b;color:#e8efff;border-radius:999px;padding:.2rem .55rem;font-weight:700;font-size:.9rem}

/* ===== Tech Stack — Marquee (ÍCONOS GRANDES) ===== */
.techstack{padding:64px 0;background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01))}
.ts-head{text-align:center;margin-bottom:18px}
.ts-title{margin:0 0 8px;font:600 2rem "Space Grotesk","Inter Tight",sans-serif}
.ts-title span{background:linear-gradient(90deg,var(--cyan),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent}
.ts-sub{max-width:820px;margin:0 auto;color:rgba(var(--muted)/.92);text-align:center}

.ts-marquee{
  position:relative;
  overflow:hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
}

.ts-strip{
  /* TAMAÑO y ESPACIADO CONTROLADOS AQUÍ */
  --gap:  clamp(34px, 5.8vw, 64px);
  --size: clamp(64px, 9vw, 100px);
  display:flex;
  align-items:center;
  gap:var(--gap);
  will-change: transform;
  padding:14px 0;
  animation: ts-scroll var(--ts-dur, 30s) linear infinite;
}

/* Overwrites por breakpoint para asegurar “grande” */
@media (min-width:1400px){ .ts-strip{ --size:108px; --gap:68px; } }
@media (max-width:900px){  .ts-strip{ --size:58px;  --gap:30px; } }
@media (max-width:520px){  .ts-strip{ --size:52px;  --gap:26px; } }

/* Loop perfecto sin saltos: 3 copias -> animar 1/3 */
@keyframes ts-scroll{ to{ transform: translate3d(-33.3333%,0,0); } }

.ts-icon{
  inline-size:var(--size);
  block-size:var(--size);
  display:grid; place-items:center;
  opacity:.96;
  transition:transform .25s ease, filter .25s ease, opacity .25s ease;
}
.ts-icon:hover{
  transform:translateY(-3px) scale(1.08);
  filter:drop-shadow(0 6px 18px rgba(56,189,248,.24));
  opacity:1;
}
.ts-icon iconify-icon{ display:block; width:100%; height:100%; }

/* Pausa con hover */
.ts-marquee:hover .ts-strip{ animation-play-state: paused; }

@media (prefers-reduced-motion: reduce){
  .ts-strip{ animation:none; transform:none }
}

/* ===== Contacto & Footer ===== */
.contact{background:#071736;padding:72px 0}
.contact h2{text-align:center;margin:0 0 18px;font:600 2rem "Space Grotesk","Inter Tight",sans-serif}
.contact-form{max-width:680px;margin:0 auto;background:#0a1f44;border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:18px;box-shadow:0 12px 40px rgba(0,0,0,.35)}
.contact-form label{display:flex;flex-direction:column;font-weight:700;margin:.5rem 0}
.contact-form input,.contact-form textarea{font:inherit;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:#06142e;color:#e8efff;padding:12px 14px}
.contact-form button{margin-top:6px}
.site-footer{background:#051028;color:#a8b8e8;padding:20px 0;border-top:1px solid rgba(255,255,255,.06)}
.footer-grid{display:flex;align-items:center;justify-content:space-between;gap:12px}
.fbrand .logo-img{height:24px}
.copy{opacity:.9}

/* ===== Entradas/Responsive ===== */
.animate-up{opacity:0;transform:translateY(22px);transition:all .8s cubic-bezier(.2,.8,.2,1)}
.animate-up.delay-1{transition-delay:.08s}.animate-up.delay-2{transition-delay:.16s}.animate-up.delay-3{transition-delay:.24s}.animate-up.delay-4{transition-delay:.32s}
body.loaded .animate-up{opacity:1;transform:none}

@media (max-width:980px){ .kpi-list{grid-template-columns:1fr 1fr} }
@media (max-width:720px){
  .nav-links{display:none}
  .nav-toggle{display:block}
  .headline{font-size:clamp(2rem,8vw,3rem)}
  .sub{font-size:1rem}
  .bg-video{display:none}
}
@media (prefers-reduced-motion:reduce){
  .animate-up{transition:none;opacity:1;transform:none}
  .bg-video{display:none}
  .brand-item{animation:none}
}
/* ===== Portafolio (3 proyectos) ===== */
.portfolio{padding:72px 0;background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01))}
.pf-head{text-align:center;margin-bottom:24px}
.pf-title{margin:0 0 8px;font:600 2rem "Space Grotesk","Inter Tight",sans-serif}
.pf-title span{background:linear-gradient(90deg,var(--cyan),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent}
.pf-sub{max-width:820px;margin:0 auto;color:rgba(var(--muted)/.92)}

.pf-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
@media (max-width:1024px){ .pf-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){  .pf-grid{grid-template-columns:1fr} }

.proj-card{
  position:relative;border-radius:20px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 14px 36px rgba(0,0,0,.28);
  transition:transform .28s, box-shadow .28s;
}
.proj-card:hover{ transform:translateY(-6px); box-shadow:0 22px 56px rgba(0,0,0,.38); }

.proj-media{position:relative;display:block;aspect-ratio:16/10;overflow:hidden}
.proj-media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.02);transition:transform .5s ease, filter .5s ease;
}
.proj-card:hover .proj-media img{ transform:scale(1.06); filter:saturate(1.05) brightness(1.02); }

/* Glow sutil arriba y gradiente inferior para legibilidad */
.proj-media::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 50% at 50% -10%, rgba(56,189,248,.22), transparent 45%),
    linear-gradient(180deg, transparent 55%, rgba(0,0,0,.38) 100%);
}

/* Badge de categoría */
.proj-badge{
  position:absolute;left:12px;top:12px;z-index:2;
  padding:.28rem .6rem;border-radius:999px;font-weight:800;letter-spacing:.2px;
  background:linear-gradient(90deg,var(--cyan),var(--blue));color:#041427;
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 8px 18px rgba(56,189,248,.28);
  font-size:.82rem;
}

.proj-body{padding:16px 16px 18px;background:#0a1f44}
.proj-title{margin:.1rem 0 .25rem;font:700 1.2rem "Space Grotesk","Inter Tight",sans-serif}
.proj-desc{margin:0 0 10px;color:rgba(var(--muted)/.92)}

.proj-tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px;padding:0;list-style:none}
.proj-tags li{
  background:#0f2b58;border:1px solid #1b3c7b;color:#e8efff;
  border-radius:999px;padding:.22rem .55rem;font-weight:700;font-size:.88rem
}

.proj-cta{display:flex;justify-content:flex-start}
.proj-cta .pill-ghost{padding:.6rem .9rem;border:1px solid rgba(255,255,255,.16)}
.proj-cta .pill-ghost:hover{filter:brightness(1.06)}
/* Tarjeta: título sobre la imagen, sin botón */
.proj-card{ position:relative; overflow:hidden }
.proj-media{ position:relative; display:block; aspect-ratio:16/10; overflow:hidden }
.proj-media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:scale(1.02); transition:transform .5s ease, filter .5s ease;
}
.proj-card:hover .proj-media img{ transform:scale(1.06); filter:saturate(1.06) brightness(1.02); }

/* Glow sutil + gradiente ya existente se mantiene */
.proj-media::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 50% at 50% -10%, rgba(56,189,248,.22), transparent 45%),
    linear-gradient(180deg, transparent 40%, rgba(0,0,0,.45) 100%);
}

/* Overlay del título */
.proj-body.overlay{
  position:absolute; left:14px; right:14px; bottom:14px; z-index:2;
  padding:10px 12px;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(5,16,40,.65), rgba(5,16,40,.35));
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(6px) saturate(120%);
}
.proj-title{ margin:0; font:800 1.05rem "Space Grotesk","Inter Tight",sans-serif; color:#e9f1ff }

/* Oculta cualquier CTA previo (por si quedara en cache) */
.proj-cta{ display:none !important }

/* ===== Portfolio · v2 (glass + mockup navegador) ===== */
.portfolio.v2{padding:72px 0}
.pf-grid.v2{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media (max-width:1024px){.pf-grid.v2{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.pf-grid.v2{grid-template-columns:1fr}}

.proj-card.v2{position:relative}
.proj-link{display:block;text-decoration:none;color:inherit}

/* Marco tipo navegador */
.proj-card.v2 .frame{
  position:relative; border-radius:24px; overflow:hidden; isolation:isolate;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:
    0 18px 40px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(255,255,255,.04);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s;
  backdrop-filter: blur(3px);
}
.proj-card.v2:hover .frame{
  transform: translateY(-6px);
  box-shadow: 0 28px 64px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.06);
  border-color: rgba(56,189,248,.22);
}

/* Barra superior mockup */
.frame-top{
  position:absolute;left:0;right:0;top:0;height:38px;display:flex;align-items:center;gap:8px;
  padding:0 12px 0 14px; z-index:3;
  background:linear-gradient(180deg, rgba(4,14,36,.55), rgba(4,14,36,.2));
  border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(6px) saturate(120%);
}
.frame-top span{
  width:10px;height:10px;border-radius:999px;display:inline-block;
  background:radial-gradient(circle at 30% 30%, #fff8, #fff0 60%), var(--dot,#e57373);
  box-shadow:0 0 0 1px rgba(255,255,255,.22) inset;
}
.frame-top span:nth-child(1){--dot:#f87171}
.frame-top span:nth-child(2){--dot:#fbbf24}
.frame-top span:nth-child(3){--dot:#34d399}
.frame-top em{
  margin-left:auto; font-style:normal; font-weight:700; font-size:.82rem; letter-spacing:.2px;
  color:#cfe7ff; opacity:.9;
}

/* Imagen */
.proj-card.v2 img{
  display:block; width:100%; height:260px; object-fit:cover; border-top-left-radius:24px; border-top-right-radius:24px;
  margin-top:38px; /* bajo la barra */
  filter:saturate(.98); transform:scale(1.02) translateZ(0);
  transition: transform .6s ease, filter .6s ease;
}
.proj-card.v2:hover img{ transform:scale(1.06); filter:saturate(1.06) }

/* Chip categoría */
.chip{
  position:absolute; left:16px; top:10px; z-index:4;
  padding:.34rem .7rem; border-radius:999px; font-weight:800; letter-spacing:.2px; font-size:.82rem;
  background:linear-gradient(90deg,var(--cyan),var(--blue)); color:#06132c;
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 10px 20px rgba(56,189,248,.30);
}

/* Título superpuesto (glass) */
.caption{
  position:absolute; left:16px; right:16px; bottom:14px; z-index:4;
  display:flex; align-items:center; min-height:46px; padding:8px 12px;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(6,18,44,.62), rgba(6,18,44,.34));
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(8px) saturate(130%);
}
.caption h3{margin:0; font:800 1.06rem "Space Grotesk","Inter Tight",sans-serif; color:#e9f2ff}

/* Halo luminoso sutil debajo */
.glow{
  content:""; position:absolute; inset:auto 18% -18px 18%; height:44px; z-index:0;
  background:radial-gradient(80% 80% at 50% 0%, rgba(56,189,248,.28), transparent 70%);
  filter:blur(14px);
  pointer-events:none;
}

/* Parallax leve con el mismo script de tilt que ya tienes */
.proj-card.v2[data-tilt]{transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}

/* ===== Portfolio v4 · Browser cards ===== */
.portfolio.v4{padding:72px 0}
.pf-grid.v4{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media (max-width:1024px){.pf-grid.v4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.pf-grid.v4{grid-template-columns:1fr}}

.browser-card{position:relative}
.bc-link{display:block;text-decoration:none;color:inherit}

.bc-chip{
  position:relative; z-index:2; margin:0 0 10px 4px;
  display:inline-flex; align-items:center; gap:6px;
  padding:.36rem .7rem; border-radius:999px;
  font:800 .8rem/1 "Inter Tight",system-ui;
  background:linear-gradient(90deg,var(--cyan),var(--blue)); color:#061229;
  border:1px solid rgba(255,255,255,.24);
  box-shadow:0 10px 20px rgba(56,189,248,.28);
}

/* ===== Adaptación del componente “browser” ===== */
.bc-browser{
  --bg-color:#162642;
  width:100%; height:290px; border-radius:12px;
  display:flex; flex-direction:column; overflow:hidden; position:relative;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 16px 36px rgba(0,0,0,.38);
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s;
}
.browser-card:hover .bc-browser{
  transform:translateY(-6px);
  box-shadow:0 26px 60px rgba(0,0,0,.48);
  border-color:rgba(56,189,248,.22);
}

/* tabs-head */
.bc-tabs-head{
  background:#1b2b4b; height:40px; display:flex; justify-content:space-between; align-items:end; padding-left:16px;
}
.bc-tabs-head .bc-tab-open{
  width:140px; height:32px; border-radius:7px 7px 0 0; background:#2a3d66;
  display:flex; gap:6px; align-items:start; justify-content:space-between; padding:4px 8px; position:relative;
}
.bc-tab-open span{color:#e7f2ff;font-size:11px;letter-spacing:.2px}
.bc-close-tab{color:#fff;font-size:10px;padding:1px 4px;border-radius:50%}
.bc-close-tab:hover{background:#3a5086}

.bc-rounded-l,.bc-rounded-r{
  position:absolute;background:#2a3d66;width:18px;height:24px;top:0;overflow:hidden
}
.bc-rounded-l{right:0;transform:translateX(100%)}
.bc-rounded-r{left:0; transform:translateX(-100%)}
.bc-mask-round{width:100%;height:100%;background:#1b2b4b;border-radius:0 0 0 7px}
.bc-rounded-r .bc-mask-round{border-radius:0 0 7px 0}

.bc-window-opt{display:flex}
.bc-window-opt button{
  height:28px;width:30px;border:0;background:transparent;color:#e9f2ff;margin-bottom:10px;border-radius:6px;
}
.bc-window-opt button:hover{background:#2a3d66}
.bc-window-opt .bc-window-close:hover{background:#ef4444}

/* head-browser */
.bc-head-browser{
  position:absolute; top:30px; left:0; right:0; height:40px;
  background:#2a3d66; padding:7px; display:flex; gap:6px; border-radius:12px 12px 0 0;
}
.bc-head-browser input{
  background:#1e2f54; border:2px solid transparent; height:100%; border-radius:20px; outline:none;
  color:#e9f2ff; padding:0 14px; flex:1; transition:.2s;
}
.bc-head-browser input:hover{background:#2b4278}
.bc-head-browser input:focus{border-color:#9ad2ff;background:#1e2f54}
.bc-head-browser input::placeholder{color:#dbeaff}

.bc-head-browser button{
  width:27px;height:25px;border:0;background:transparent;color:#e9f2ff;border-radius:50%;transition:.2s
}
.bc-head-browser button:disabled{opacity:.45}
.bc-head-browser button:hover{background:#355189}
.bc-head-browser button:disabled:hover{background:transparent}
.bc-head-browser .bc-star{
  position:absolute; right:42px; top:50%; transform:translateY(-50%);
  font-size:15px; opacity:.75; height:18px; width:19px; display:grid; place-items:center; padding-bottom:3px;
}

/* Viewport como screenshot */
.bc-viewport{
  position:absolute; inset:70px 0px 0px; border-radius:10px;
  background:#0a1836 center/cover no-repeat;
  background-image:var(--bg);
  transform:scale(1.01); transition:transform .55s ease, filter .55s ease;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.browser-card:hover .bc-viewport{ transform:scale(1.05); filter:saturate(1.06) }

/* Título */
.bc-title{
  margin:.6rem 6px 0; font:800 1.02rem/1.2 "Space Grotesk","Inter Tight",sans-serif;
  color:#e9f2ff; letter-spacing:.2px;
}

/* ===== FAQ ===== */
.faq{padding:72px 0;background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01))}
.faq-head{text-align:center;margin-bottom:22px}
.faq-title{margin:0 0 8px;font:600 2rem "Space Grotesk","Inter Tight",sans-serif}
.faq-title span{
  background:linear-gradient(90deg,var(--cyan),var(--blue));
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.faq-sub{color:rgba(var(--muted)/.92);margin:0 auto;max-width:780px}

.faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media (max-width:860px){.faq-grid{grid-template-columns:1fr}}

.faq-item{
  border-radius:16px;overflow:hidden;background:#0a1f44;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 12px 30px rgba(0,0,0,.28)
}
.faq-item[open]{background:#0b234f;border-color:rgba(56,189,248,.22)}

.faq-q{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:16px 18px
}
.faq-q::-webkit-details-marker{display:none}
.faq-q span:first-child{font-weight:800;letter-spacing:.2px;color:#e9f2ff}
.faq-icon{
  flex:0 0 auto;width:32px;height:32px;border-radius:999px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);
  position:relative;transition:.25s
}
.faq-icon::before,.faq-icon::after{
  content:"";position:absolute;background:#e8f0ff;border-radius:2px;transition:.25s
}
.faq-icon::before{width:14px;height:2px}
.faq-icon::after{width:2px;height:14px}
.faq-item[open] .faq-icon{background:linear-gradient(90deg,var(--cyan),var(--blue));border-color:transparent}
.faq-item[open] .faq-icon::after{transform:scaleY(0)} /* de + a – */

.faq-a{padding:0 18px 16px;color:rgba(var(--muted)/.95);animation:faqSlide .28s ease}
.faq-a p{margin:.2rem 0}
.faq-a ol{margin:.2rem 0 .4rem 1.1rem}

@keyframes faqSlide{
  from{opacity:.4;transform:translateY(-4px)}
  to{opacity:1;transform:none}
}

/* ===== Contacto Pro v2 (glass + neon) ===== */
.contact-pro.v2{
  padding:72px 0 82px;
  position:relative;
}
.contact-pro.v2 .c-head{text-align:center;max-width:860px;margin:0 auto 22px}
.contact-pro.v2 .c-title{
  margin:0 0 8px; letter-spacing:.2px;
  font:700 clamp(1.8rem,3vw,2.4rem) "Space Grotesk","Inter Tight",sans-serif;
}
.contact-pro.v2 .c-sub{color:rgba(var(--muted)/.92)}

.c-card{
  position:relative; border-radius:22px; padding:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 18px 50px rgba(0,0,0,.35);
  max-width:980px; margin:0 auto;
}
.c-card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1.2px;
  background:conic-gradient(from var(--g,0deg), var(--cyan), var(--blue), var(--violet), var(--cyan));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:.8; pointer-events:none;
  animation:spinGrad 12s linear infinite;
}

.c-form{display:grid;gap:16px}
.c-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:820px){ .c-row{grid-template-columns:1fr} }

.c-field{display:flex;flex-direction:column;gap:8px}
.c-label{
  font-weight:900; color:#dfe8ff; letter-spacing:.4px; text-transform:uppercase; font-size:.86rem;
}
.c-label b{color:#9edcff}

.c-field input,
.c-field textarea,
.c-select,
.c-dial,
.c-phone-num{
  font:700 1rem "Inter Tight",system-ui;
  background:#081a3a; color:#eaf1ff;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px; padding:14px 14px;
  outline:none; transition:border-color .2s, box-shadow .2s, background .2s, transform .05s;
  box-shadow:0 10px 26px rgba(0,0,0,.32);
}
.c-field input:focus,
.c-field textarea:focus,
.c-select:focus,
.c-dial:focus,
.c-phone-num:focus{
  border-color:rgba(56,189,248,.55);
  box-shadow:0 16px 40px rgba(56,189,248,.18);
  background:#0a2147; transform:translateY(-1px);
}
.c-field textarea{resize:vertical;min-height:140px}

.c-error{
  opacity:0; transform:translateY(-4px);
  color:#ffb4b4; font-weight:800; font-size:.9rem; transition:.2s;
}
.c-field.is-invalid .c-error{opacity:1; transform:none}
.c-field.is-invalid input,
.c-field.is-invalid textarea,
.c-field.is-invalid .c-select{border-color:#ff7373; box-shadow:0 10px 28px rgba(255,115,115,.18)}

.c-phone .c-phone-row{display:grid;grid-template-columns:1.4fr .6fr 2fr;gap:10px}
@media (max-width:560px){ .c-phone .c-phone-row{grid-template-columns:1fr 1fr} .c-phone-num{grid-column:1/-1} }
.c-dial{max-width:120px;text-align:center}
.c-empty{display:none} /* relleno del grid */

.c-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:4px}
.c-legal{margin:0;color:rgba(var(--muted)/.8);font-size:.95rem}

/* Botón neon */
.btn-neon{
  --r: 999px;
  position:relative; border:0; cursor:pointer; border-radius:var(--r);
  padding:12px 22px; background:#071b36; color:#dff7ff; font-weight:900;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), 0 12px 28px rgba(0,0,0,.35);
  transition:transform .12s ease, filter .2s ease;
}
.btn-neon::before{
  content:""; position:absolute; inset:-2px; border-radius:var(--r);
  background:radial-gradient(140% 120% at 10% 10%, rgba(32,227,214,.45), transparent 55%),
             radial-gradient(140% 120% at 80% 90%, rgba(56,189,248,.35), transparent 55%);
  filter:blur(8px); opacity:.85; z-index:-1; transition:.2s ease;
}
.btn-neon:hover{ transform:translateY(-1px); filter:saturate(120%) }
.btn-neon:active{ transform:translateY(0) }

/* Toast */
.c-toast{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%) translateY(20px);
  background:linear-gradient(90deg,var(--cyan),var(--blue));
  color:#07152f; font-weight:900; padding:10px 14px; border-radius:12px;
  box-shadow:0 14px 36px rgba(0,0,0,.35);
  opacity:0; pointer-events:none; transition:transform .25s, opacity .25s;
}
.c-toast.show{opacity:1; transform:translateX(-50%)}
@keyframes spinGrad{to{--g:360deg}}

/* ===== Fix responsive: Why cards (mobile) ===== */
@media (max-width: 560px) {
  .container { padding: 0 16px; }

  .why { padding: 48px 0; }
  .why-head { margin-bottom: 18px; }
  .why-title { font-size: 1.6rem; }
  .why-sub { font-size: .98rem; line-height: 1.45; }

  .why-grid{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .why-card{
    border-radius: 16px;
    padding: 14px 14px 16px;
    box-shadow: 0 10px 24px rgba(0,0,0,.25);
    transform: none !important;               /* quita tilt en pantallas pequeñas */
  }
  .why-card::before{ opacity: .6; }           /* baja brillo del borde animado */

  .why-icon{
    width: 40px; height: 40px; border-radius: 10px;
    margin-bottom: 8px;
  }

  .why-card h3{
    font: 800 1rem "Space Grotesk","Inter Tight",sans-serif;
    margin: .15rem 0 .2rem;
  }

  .why-card p{
    font-size: .95rem;
    line-height: 1.35;
    color: rgba(var(--muted)/.94);
    word-break: break-word;
    overflow-wrap: anywhere;
  }
}

/* Evita “bailes” del tilt en táctiles pequeñas */
@media (hover: none) and (pointer: coarse) {
  .why-card{ transform: none !important; }
}

/* Un poco de respiro en tablets chicas */
@media (min-width: 561px) and (max-width: 820px){
  .why-grid{ grid-template-columns: 1fr 1fr; gap: 14px; }
  .why-card h3{ font-size: 1.05rem; }
  .why-card p{ font-size: .97rem; }
}

/* ===== Fix responsive: brands (logos) ===== */
@media (max-width: 720px){
  .trust.brands{ padding: 48px 0; overflow-x: hidden; }

  .brandwall{
    grid-template-columns: repeat(3, minmax(0,1fr)); /* 3 col en móvil */
    column-gap: 16px;
    row-gap: 14px;
    justify-items: center;        /* centra cada logo */
  }

  .brand-item{
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: none;              /* evita “flotado” que puede cortar */
  }

  .brand-logo{
    height: clamp(38px, 8vw, 56px); /* altura adaptable */
    max-width: 100%;
    width: auto;
    object-fit: contain;          /* nunca se recorta */
    transform: none;              /* sin escalados que se salgan */
  }
}

/* Muy chico: 2 columnas */
@media (max-width: 380px){
  .brandwall{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .brand-logo{ height: clamp(34px, 9vw, 48px); }
}

/* Fix barrido KPIs: recorte y recorrido completo */
.kpi-ribbon{
  overflow: hidden;                 /* asegura que no se “asome” fuera */
}

.kpi-ribbon::after{
  width: 60%;                       /* franja un poco más ancha para un glow bonito */
  left: -30%;                       /* comienza bien fuera a la izquierda */
  transform: skewX(-18deg) translateX(-120%);
  animation: kpiSweep 6s linear infinite;
}

@keyframes kpiSweep{
  to { transform: skewX(-18deg) translateX(220%); } /* sale totalmente por la derecha */
}

/* (opcional) si quieres un efecto más suave/tenue */
.kpi-ribbon::after{
  opacity: .85;                     /* ajusta a tu gusto */
  filter: blur(0.5px);
}

/* ===== Footer Pro ===== */
.site-footer.pro{
  background:#0b1326;
  color:#cfe0ff;
  padding:38px 0 44px;
  border-top:1px solid rgba(255,255,255,.06);
}
.f-grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 24px;
  align-items:start;
}
@media (max-width:900px){
  .f-grid{grid-template-columns:1fr; gap:20px}
}

.f-logo{height:34px; width:auto; object-fit:contain; margin-bottom:10px; filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
.f-about{margin:0; color:#aecdff; line-height:1.55}

.f-list{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.f-list li{
  display:flex; align-items:center; gap:10px;
  color:#dbe8ff;
}
.f-list a{color:#dbe8ff; text-decoration:none}
.f-list a:hover{ text-decoration:underline; }

.f-privacy{
  display:inline-block;
  color:#dbe8ff;
  text-decoration:none;
  font-weight:700;
  margin-bottom:6px;
}
.f-privacy:hover{ text-decoration:underline; }

.f-rights{opacity:.9; margin-bottom:10px}
.f-social{display:flex; gap:10px}
.f-social a{
  display:grid; place-items:center;
  width:36px; height:36px; border-radius:999px;
  background:#0e1a36; color:#dbe8ff;
  border:1px solid rgba(255,255,255,.1);
  transition:.2s;
}
.f-social a:hover{
  background:linear-gradient(90deg,var(--cyan),var(--blue));
  color:#06152b; border-color:transparent;
  box-shadow:0 10px 20px rgba(56,189,248,.28);
}

/* ===== Botón flotante WhatsApp ===== */
.wa-float{
  position:fixed; right:18px; bottom:18px; z-index:60;
  width:54px; height:54px; border-radius:999px;
  display:grid; place-items:center;
  background:#25D366; color:#06152b; text-decoration:none;
  box-shadow:0 14px 26px rgba(0,0,0,.35);
  border:1px solid #1bb852;
  transition:transform .15s ease, filter .2s ease;
}
.wa-float:hover{ transform:translateY(-2px); filter:saturate(115%) }
.wa-float::before{
  content:""; position:absolute; inset:-3px; border-radius:999px;
  background:radial-gradient(120% 120% at 20% 20%, rgba(255,255,255,.22), transparent 55%);
  filter:blur(10px); z-index:-1; opacity:.9;
}
@media (max-width:560px){
  .wa-float{ right:14px; bottom:14px; width:50px; height:50px }
}