/* Zpinat — ingeniería digital. Estilos exclusivos de la página principal. */
:root {
    --ink:#17263b;
    --copy:#526279;
    --copy-muted:#5f6f85;
    --label:#5b7293;
    --blue:#315f99;
    --blue-light:#8db9fa;
    --night-copy:#b0bed1;
    --night-muted:#9aafcc;
    --surface:#f7f9fc;
    --primary:var(--ink);
    --primary-soft:#203957;
    --secondary:var(--blue);
    --accent:#5b78bd;
    --cyan:#3e73b4;
    --muted:var(--copy);
    --line:rgba(23,38,59,.12);
    --radius:16px;
}
body { background:var(--surface); }
.container { width:min(1280px,calc(100% - 80px)); }
.tech-ambient { display:none; }
.navbar { background:rgba(255,255,255,.96); border-bottom:1px solid #1421390d; }
.navbar.scrolled { background:rgba(255,255,255,.98); box-shadow:0 8px 25px #14213905; }
.nav-inner { height:88px; }
.nav-links { font:500 .79rem Inter,sans-serif; letter-spacing:0; gap:28px; }
.nav-links > .btn-primary { color:#fff; background:var(--blue); border-radius:5px; box-shadow:none; animation:none; padding:11px 20px; }
.brand img { animation:none; }
.hero { position:relative; isolation:isolate; overflow:hidden; padding:100px 0 0; color:#f2f6ff; background:#071327; }
.hero::before { content:""; position:absolute; z-index:-1; inset:0; pointer-events:none; background:radial-gradient(ellipse at 80% 38%,#163c783b,transparent 55%),linear-gradient(115deg,#0d1c31,#071327 60%); }
.hero::after { content:""; position:absolute; top:0; right:12%; width:1px; height:100%; background:linear-gradient(transparent,#7dacf80d,transparent); z-index:-1; }
.hero .hero-grid { display:grid; grid-template-columns:1.05fr 1fr; gap:38px; align-items:center; }
.hero .hero-grid > * { min-width:0; }
.hero .hero-copy { position:relative; z-index:2; opacity:1; animation:premium-enter .85s both; }
.hero .eyebrow { display:flex; align-items:center; gap:12px; margin-bottom:35px; padding:0; border:0; border-radius:0; background:none; color:#9eafc9; font:500 .62rem Inter,sans-serif; letter-spacing:.2em; }
.hero .eyebrow span { width:6px; height:6px; background:#6ba5ff; box-shadow:0 0 15px #6ba5ff80; }
.hero h1 { color:#f2f6ff; font-family:'Space Grotesk',Inter,sans-serif; font-size:clamp(3.2rem,5.9vw,6.1rem); font-weight:500; line-height:1.025; letter-spacing:-.065em; margin-bottom:30px; }
.hero h1 em { font-style:normal; color:#8ebaff; background:linear-gradient(100deg,#96c7ff,#6c93f1); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.hero .hero-copy > p { color:var(--night-copy); font-size:1.02rem; line-height:1.85; max-width:470px; margin-bottom:32px; }
.hero .hero-actions { display:flex; flex-wrap:wrap; gap:22px; align-items:center; margin-bottom:32px; }
.hero .btn { font-size:.77rem; font-weight:500; border-radius:4px; padding:16px 19px; animation:none; box-shadow:none; transition:background .2s,transform .2s; }
.hero .btn-primary { color:#10213b; background:#f0f5ff; border:1px solid #f0f5ff; }
.hero .btn-primary span { margin-left:15px; font-size:1.1rem; }
.hero .btn-primary:hover { background:#c7ddff; transform:translateY(-2px); }
.hero .btn-secondary { color:#b5c5df; background:transparent; border:0; padding:10px 0; }
.hero .btn-secondary span { margin-left:8px; }
.hero-signature { display:flex; align-items:center; gap:12px; color:var(--night-muted); font:500 .56rem Inter,sans-serif; letter-spacing:.15em; }
.signature-line { width:29px; height:1px; background:#4b6691; }
.system-scene { position:relative; align-self:stretch; min-height:510px; display:flex; flex-direction:column; justify-content:space-between; animation:premium-enter 1.2s .1s both; }
.scene-topline,.scene-bottomline { display:flex; justify-content:space-between; gap:12px; color:var(--night-muted); font:500 .51rem Inter,sans-serif; letter-spacing:.14em; }
.scene-topline { padding:12px 0; border-top:1px solid #789cd328; }
.scene-bottomline { padding:16px 0; border-bottom:1px solid #789cd328; font-size:.48rem; }
.system-art { position:relative; margin:-4px -25px; transform:perspective(1000px) rotateX(var(--tilt-y,0deg)) rotateY(var(--tilt-x,0deg)); transition:transform .5s ease-out; }
.system-svg { display:block; width:100%; height:auto; overflow:visible; }
.scene-crown { animation:system-assemble 1.8s cubic-bezier(.2,.8,.2,1) both; }
.scene-middle { animation:system-assemble 1.4s cubic-bezier(.2,.8,.2,1) both; }
.system-label { position:absolute; display:flex; align-items:center; gap:7px; padding:7px 10px; border:1px solid #729bd32e; background:#0a1930d9; border-radius:3px; color:#a6c0e5; font:500 .58rem Inter,sans-serif; }
.system-label i { width:4px; height:4px; border-radius:50%; background:#79b8ff; }
.system-label--data { left:3%; top:44%; }
.system-label--ai { right:5%; top:32%; }
.system-label--process { right:16%; bottom:4%; }
.hero-foundations { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin-top:70px; padding:25px 0 30px; border-top:1px solid #789cd32b; }
.hero-foundations > div { display:flex; gap:18px; }
.foundation-index { color:var(--night-muted); font:.62rem 'JetBrains Mono',monospace; padding-top:3px; }
.hero-foundations strong { font-size:.82rem; font-weight:500; color:#d2dff1; }
.hero .hero-foundations p { color:var(--night-muted); font-size:.72rem; line-height:1.5; margin:6px 0 0; }
.trust-band { padding:38px 0; background:#fff; border-bottom:1px solid #1421390e; }
.trust-inner { display:flex; gap:35px; align-items:center; justify-content:space-between; }
.trust-inner > p { margin:0; flex-shrink:0; font-size:.73rem; color:var(--copy-muted); line-height:1.7; }
.trust-inner > p strong { color:var(--ink); font-weight:500; }
.trust-logos { display:flex; align-items:center; justify-content:space-evenly; gap:35px; flex:1; }
.trust-logos img { object-fit:contain; width:90px; height:48px; filter:grayscale(1); opacity:.65; transition:filter .25s,opacity .25s; }
.trust-logos img:hover { filter:none; opacity:1; }
.trust-inner > a { font-size:.72rem; color:var(--blue); white-space:nowrap; }
.trust-inner > a span { margin-left:10px; }
.hero a:focus-visible,.trust-band a:focus-visible { outline:2px solid #70aaff; outline-offset:6px; }
/* El catálogo y las pruebas de experiencia continúan la misma dirección visual. */
#soluciones { padding-top:90px; background:var(--surface); }
.solutions-top h2,.section-head h2,.cta-box h2 { letter-spacing:-.05em; font-weight:500; }
.solutions-top h2 { max-width:850px; font-size:clamp(2rem,3.5vw,3.15rem); line-height:1.12; }
.solution-category { letter-spacing:.1em; }
#soluciones .solution-card { border-radius:12px; box-shadow:0 8px 30px #14213904; border-color:#14213913; }
#soluciones .solution-card:hover { box-shadow:0 20px 45px #1421390d; }
.card,.step,.client { border-radius:10px; box-shadow:none; }
.card:hover,.step:hover,.client:hover { transform:translateY(-3px); box-shadow:0 16px 35px #14213908; }
.dark-panel,.cta-box { background:#102440; border-radius:10px; }
.dark-panel::after,.cta-box::after { animation:none; display:none; }
.hero.magic-paused .system-art { transform:none; }
@keyframes premium-enter { from { opacity:0; translate:0 16px; } to { opacity:1; translate:0 0; } }
@keyframes system-assemble { from { opacity:0; translate:0 -35px; } to { opacity:1; translate:0 0; } }
@media(min-width:1500px) { .hero { padding-top:115px; } }
@media(max-width:1100px) { .container { width:calc(100% - 48px); } .hero { padding-top:65px; } .hero .hero-grid { gap:24px; } .system-scene { min-height:450px; justify-content:center; } .hero h1 { font-size:clamp(3.1rem,6vw,5rem); } .hero .hero-actions { gap:14px; } .trust-logos { gap:20px; } .trust-logos img { width:72px; } }
@media(max-width:900px) { .hero .hero-grid { grid-template-columns:1fr; gap:35px; } .hero h1 { font-size:clamp(3.6rem,9vw,5.7rem); } .hero .hero-copy > p { max-width:600px; } .system-scene { width:100%; max-width:600px; margin:0 auto; min-height:0; } .system-art { margin:-18px 0; } .hero-foundations { margin-top:40px; gap:16px; } .hero-foundations > div { gap:10px; } .trust-inner { flex-wrap:wrap; gap:25px; } .trust-logos { order:3; flex-basis:100%; justify-content:space-between; } .trust-logos img { width:100px; } }
@media(max-width:620px) { .container { width:calc(100% - 36px); } .nav-inner { height:76px; } .hero { padding-top:46px; } .hero .eyebrow { font-size:.54rem; margin-bottom:26px; } .hero h1 { font-size:clamp(3.15rem,11.8vw,4.5rem); } .hero .hero-copy > p { font-size:.94rem; } .hero .hero-actions { align-items:flex-start; flex-direction:column; gap:10px; } .hero .btn-primary { width:100%; justify-content:space-between; } .hero-signature { font-size:.48rem; } .system-art { margin:0 -10px; } .scene-topline,.scene-bottomline { font-size:.45rem; letter-spacing:.08em; } .system-label { font-size:.49rem; padding:5px 7px; } .hero-foundations { grid-template-columns:1fr; gap:18px; padding:25px 0; } .hero-foundations > div { gap:20px; } .hero-foundations strong { font-size:.8rem; } .hero .hero-foundations p { font-size:.72rem; margin-top:3px; } .trust-logos { gap:15px; flex-wrap:wrap; } .trust-logos img { width:calc(50% - 15px); height:46px; } #soluciones { padding-top:65px; } }
@media(prefers-reduced-motion:reduce) { .hero *, .hero *::before,.hero *::after { animation:none !important; opacity:1 !important; transition:none !important; } .system-art { transform:none; } html { scroll-behavior:auto; } }
@media print { .hero { background:#fff; color:var(--ink); } .hero h1,.hero h1 em { color:var(--ink); -webkit-text-fill-color:var(--ink); } .system-scene { display:none; } .hero .hero-grid { grid-template-columns:1fr; } }

/* Franja continua de clientes. Sin animación, conserva desplazamiento manual. */
.trust-marquee { position:relative; flex:1; min-width:0; padding-right:42px; }
.trust-marquee .trust-logos { display:block; overflow-x:auto; scrollbar-width:none; mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); }
.trust-marquee .trust-logos::-webkit-scrollbar { display:none; }
.trust-track { display:flex; width:max-content; }
.trust-logo-group { display:flex; align-items:center; gap:0; flex-shrink:0; }
.trust-logo-item { display:flex; align-items:center; justify-content:center; flex:0 0 164px; width:164px; height:72px; padding:10px 30px; }
.trust-marquee .trust-logos img { width:104px; height:50px; object-fit:contain; flex:none; filter:grayscale(1); opacity:.6; transition:filter .4s,opacity .4s; }
.trust-marquee .trust-logo-item:hover img { filter:grayscale(0); opacity:1; }
.trust-marquee.is-ready .trust-logos { overflow:hidden; }
.trust-marquee.is-ready .trust-track { animation:trust-scroll 60s linear infinite; }
.trust-marquee:hover .trust-track,.trust-marquee:focus-within .trust-track,.trust-marquee.is-paused .trust-track { animation-play-state:paused; }
.trust-pause { position:absolute; right:0; top:50%; translate:0 -50%; display:grid; place-items:center; width:32px; height:32px; padding:8px; border:1px solid #14213915; border-radius:50%; background:#fff; color:var(--label); cursor:pointer; }
.trust-pause[hidden] { display:none; }
.trust-pause svg { width:13px; height:13px; }
.trust-pause:hover { background:#edf2f9; color:var(--blue); }
.trust-pause:focus-visible,.trust-marquee .trust-logos:focus-visible { outline:2px solid var(--blue); outline-offset:3px; }
@keyframes trust-scroll { to { transform:translateX(-50%); } }
@media(max-width:900px) { .trust-marquee { order:3; flex-basis:100%; } }
@media(prefers-reduced-motion:reduce) { .trust-marquee.is-ready .trust-track { animation:none; } .trust-marquee.is-ready .trust-logos { overflow-x:auto; } .trust-logo-group[aria-hidden="true"],.trust-pause { display:none; } }

/* Cierre de ancho completo, unido visualmente con el footer. */
.closing-contact { padding:90px 0 78px; margin:0; background:#09172c; color:#edf3ff; position:relative; }
.closing-grid { display:grid; grid-template-columns:1.25fr 1fr; gap:90px; align-items:end; }
.closing-eyebrow { display:block; font:500 .6rem Inter,sans-serif; letter-spacing:.18em; color:var(--night-muted); margin-bottom:28px; }
.closing-contact h2 { font:500 clamp(2.5rem,4.1vw,4rem)/1.08 'Space Grotesk',Inter,sans-serif; letter-spacing:-.055em; margin:0; }
.closing-contact h2 em { color:var(--blue-light); font-style:normal; }
.closing-details { padding-bottom:5px; }
.closing-details p { color:var(--night-copy); font-size:.95rem; line-height:1.85; max-width:410px; margin:0 0 30px; }
.closing-email { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:0 0 17px; border-bottom:1px solid #779ac64a; font-size:clamp(1rem,1.7vw,1.45rem); letter-spacing:-.025em; color:#ecf3ff; }
.closing-email span { color:var(--blue-light); }
.closing-whatsapp { display:inline-flex; gap:30px; align-items:center; margin-top:22px; font-size:.77rem; color:#94b5e3; }
.closing-contact a:hover { color:#fff; }
.site-footer { width:100%; margin:0; padding:0; border-top:0; background:#09172c; color:var(--night-copy); }
.footer-main { display:grid; grid-template-columns:1.3fr .8fr 1.2fr 1fr; gap:40px; border-top:1px solid #789cd32b; padding-top:48px; padding-bottom:58px; }
.footer-wordmark { display:inline-block; color:#f3f7ff; font:600 2.8rem/1 'Space Grotesk',Inter,sans-serif; letter-spacing:-.08em; }
.footer-wordmark span { color:var(--blue-light); }
.footer-brand p { font-size:.8rem; line-height:1.7; color:var(--night-muted); margin-top:20px; }
.site-footer h3 { font:500 .55rem Inter,sans-serif; letter-spacing:.14em; color:var(--night-muted); margin:0 0 22px; }
.footer-nav,.footer-connect { display:flex; flex-direction:column; align-items:flex-start; }
.footer-nav a,.footer-connect a,.footer-expertise p { font:400 .78rem/1.65 Inter,sans-serif; margin:0 0 10px; color:var(--night-copy); }
.footer-connect a span { color:var(--night-muted); margin-left:8px; }
.site-footer a { transition:color .2s; }
.site-footer a:hover { color:#fff; }
.site-footer a:focus-visible,.closing-contact a:focus-visible { outline:2px solid var(--blue-light); outline-offset:6px; }
.footer-bottom { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:15px; border-top:1px solid #789cd31f; padding-top:22px; padding-bottom:25px; font:.65rem/1.7 Inter,sans-serif; color:var(--night-muted); }
.footer-bottom a { color:#94aaca; }
.footer-bottom a span { margin-left:16px; }
@media(max-width:900px) { .closing-grid { gap:40px; grid-template-columns:1.15fr 1fr; } .closing-contact h2 { font-size:2.65rem; } .footer-main { grid-template-columns:1fr 1fr; gap:35px; } }
@media(max-width:620px) { .closing-contact { padding:60px 0 46px; } .closing-grid { grid-template-columns:1fr; gap:32px; } .closing-contact h2 { font-size:clamp(2.25rem,9vw,3rem); } .closing-eyebrow { margin-bottom:22px; } .closing-details p { font-size:.88rem; } .closing-email { font-size:1.1rem; } .footer-main { grid-template-columns:1fr 1fr; gap:32px 20px; padding-top:35px; padding-bottom:30px; } .footer-brand,.footer-connect { grid-column:1 / -1; } .footer-brand { display:flex; align-items:center; justify-content:space-between; gap:20px; } .footer-brand p { margin:0; font-size:.7rem; } .footer-wordmark { font-size:2.5rem; } .footer-bottom { font-size:.58rem; } .site-footer h3 { font-size:.51rem; } .footer-nav a,.footer-connect a,.footer-expertise p { font-size:.73rem; } }

/* Íconos sociales discretos, con el mismo trazo y color que los enlaces. */
.contact-icon { width:20px; height:20px; flex:0 0 20px; }
.closing-whatsapp { gap:10px; min-height:44px; margin-top:12px; }
.closing-whatsapp > span { margin-left:12px; }
.footer-connect .footer-instagram { display:inline-flex; align-items:center; gap:10px; min-height:44px; }
.footer-connect .footer-instagram > span { margin-left:4px; }
.closing-whatsapp .contact-icon,.footer-instagram .contact-icon { color:#a8c9f8; transition:color .2s; }
.closing-whatsapp:hover .contact-icon,.footer-instagram:hover .contact-icon { color:#fff; }

/* Casos reales: galería editorial, sin marcos ni sombras pesadas. */
#casos-exito { background:#fff; border-top:1px solid #1421390c; border-bottom:1px solid #1421390c; }
#casos-exito::before { display:none; }
#casos-exito .section-head { max-width:780px; margin-bottom:40px; }
#casos-exito .section-head h2 { font-size:clamp(2rem,3.3vw,3rem); line-height:1.15; }
#casos-exito .section-head p { color:var(--copy); font-size:.94rem; line-height:1.8; }
#casos-exito .success-carousel-wrap { background:transparent; border:0; border-radius:0; padding:0; box-shadow:none; }
#casos-exito .success-carousel-wrap::before,#casos-exito .success-carousel-wrap::after { display:none; }
#casos-exito .success-carousel { gap:0; padding:0 0 28px; }
#casos-exito .success-card { flex:0 0 25%; min-width:0; min-height:215px; align-content:center; padding:26px; gap:25px; border:0; border-right:1px solid #14213912; border-radius:0; background:transparent; box-shadow:none; animation:none; opacity:1; }
#casos-exito .success-card:hover { transform:none; box-shadow:none; background:var(--surface); }
#casos-exito .success-logo { width:140px; height:76px; border:0; border-radius:0; background:none; box-shadow:none; }
#casos-exito .success-logo img { width:118px; height:68px; filter:grayscale(1); opacity:.7; transition:filter .4s,opacity .4s; }
#casos-exito .success-card:hover img { filter:none; opacity:1; }
#casos-exito .success-card strong { max-width:205px; font:400 .78rem/1.6 Inter,sans-serif; letter-spacing:0; color:var(--copy); }
#casos-exito .success-controls { justify-content:flex-end; gap:14px; padding-top:20px; margin-top:0; border-top:1px solid #14213912; }
#casos-exito .success-btn { width:40px; height:40px; border:1px solid #14213920; background:#fff; font:400 22px/1 Inter,sans-serif; }
#casos-exito .success-btn:hover { box-shadow:none; transform:none; background:#142d4f; color:#fff; border-color:#142d4f; }
#casos-exito .success-btn:focus-visible { outline:2px solid var(--blue); outline-offset:4px; }
#casos-exito .success-dots { margin-right:auto; order:-1; gap:6px; }
#casos-exito .success-dot { width:4px; height:4px; background:#c8d2df; }
#casos-exito .success-dot.is-active { width:24px; background:var(--blue); }
@media(max-width:900px) { #casos-exito .success-card { flex-basis:33.333%; padding:22px 16px; } }
@media(max-width:620px) { .trust-band { padding:28px 0; } .trust-inner { gap:20px; } .trust-logo-item { flex-basis:134px; width:134px; height:65px; padding:10px 22px; } .trust-marquee .trust-logos img { width:90px; height:45px; } #casos-exito .success-card { flex-basis:68%; min-width:0; } #casos-exito .success-dots { gap:5px; } }

.nav-links > .btn-primary:hover { color:#fff; background:#244d80; box-shadow:none; }