/* Magna Computación — edición premium V3 */
:root{--header-h:91px}
html{scroll-padding-top:calc(var(--header-h) + 18px)}
.site-header{position:sticky;top:0;left:auto;z-index:150;height:var(--header-h);background:rgba(7,11,22,.86);border-bottom:1px solid rgba(126,164,255,.16);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 10px 34px rgba(0,0,0,.19);transition:background .25s,box-shadow .25s}
.site-header.is-scrolled{background:rgba(7,12,26,.96);box-shadow:0 13px 36px rgba(0,0,0,.34)}
.header-inner{gap:24px}
.brand{width:264px;min-width:0;display:flex;align-items:center}
.brand-lockup{display:flex;flex-direction:column;align-items:center;gap:2px;width:100%}
.brand img{width:100%;height:61px;object-fit:contain;filter:drop-shadow(0 1px 9px rgba(43,56,255,.17))}
.brand-tagline{font-size:10px;line-height:1.15;color:#d0d9ff;font-weight:800;letter-spacing:.23em;text-align:center;text-shadow:0 0 10px rgba(50,99,255,.38)}
.main-nav{gap:21px}
.nav-cta{padding:12px 15px}
.hero-grid{padding-top:35px;min-height:710px}
.hero{min-height:740px}
.hero-proof{position:absolute;right:-13px;bottom:3px;z-index:8;display:flex;align-items:center;gap:14px;max-width:304px;padding:10px 13px;border-radius:16px;background:rgba(17,29,55,.95);box-shadow:0 20px 55px rgba(0,0,0,.43);border:1px solid rgba(114,151,242,.38);backdrop-filter:blur(16px)}
.hero-proof-thumb{width:58px;height:67px;overflow:hidden;border-radius:8px;flex:none;background:#102335}
.hero-proof-thumb img{width:100%;height:100%;object-fit:cover;object-position:top}
.hero-proof-copy span{display:block;font-size:9px;letter-spacing:.14em;color:#79a7ff;margin-bottom:6px;font-weight:800}
.hero-proof-copy strong{display:block;font-size:12px;line-height:1.35;color:#fff}
/* Real portfolio snapshots */
.project-art{overflow:hidden;background:#101a2d}
.project-shot-stage{width:100%;height:100%;position:relative;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 85% 10%,rgba(71,99,211,.36),transparent 54%),linear-gradient(140deg,#1e2a43,#0c1727)}
.shot-glow{position:absolute;inset:-20%;background:radial-gradient(circle at 50% 38%,rgba(92,136,248,.15),transparent 49%);pointer-events:none}
.shot-frame{position:relative;overflow:hidden;border:1px solid rgba(221,231,255,.21);box-shadow:0 19px 55px rgba(0,0,0,.5);transition:transform .42s cubic-bezier(.2,.8,.2,1),box-shadow .42s}
.is-desktop .shot-frame{width:94%;height:84%;border-radius:12px;background:#111b26}
.is-desktop .project-shot{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.is-phone .shot-frame{height:118%;max-height:380px;aspect-ratio:.58;border-radius:20px;background:#080f1d;transform:rotate(-4deg) translateY(13%);border:4px solid #273853}
.is-phone .project-shot{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.project-card:hover .is-desktop .shot-frame{transform:translateY(-9px) scale(1.025)}
.project-card:hover .is-phone .shot-frame{transform:rotate(-1deg) translateY(9%) scale(1.03)}
.art-badge{z-index:4;bottom:17px;left:18px;background:rgba(8,16,33,.81);backdrop-filter:blur(9px)}
.about-with-photo{grid-template-columns:.9fr .95fr .82fr;align-items:start;gap:30px}
.about-photo{position:relative;margin:-35px 0 0;border-radius:22px;overflow:hidden;max-height:460px;border:1px solid #3a4d73;box-shadow:0 30px 60px rgba(0,0,0,.3);background:#06080d}
.about-photo img{width:100%;height:460px;object-fit:cover;object-position:center top;display:block}
.about-photo figcaption{position:absolute;inset:auto 0 0;padding:40px 20px 19px;background:linear-gradient(transparent,rgba(0,0,0,.85))}
.about-photo figcaption span{font-size:9px;font-weight:800;letter-spacing:.21em;color:#a8beef;display:block}
.about-photo figcaption strong{font-size:14px;display:block;margin-top:5px}
.footer-brand-image{display:flex;align-items:center;flex-direction:column;max-width:235px}
.footer-brand-image img{display:block;width:100%;height:auto;max-height:66px;object-fit:contain}
.footer-brand-tagline{font-size:9px;letter-spacing:.22em;color:#b9caff;font-weight:800;text-align:center}
/* Genuine branded reseller graphic together with original Magna-created product artwork */
.avg-collage{width:min(100%,520px);height:420px;position:relative;display:block}
.avg-collage-card{position:absolute;width:72%;max-width:340px;border-radius:20px;overflow:hidden;border:1px solid #4c648f;box-shadow:0 30px 70px rgba(0,0,0,.45);background:#111a2c}
.avg-collage-card img{display:block;width:100%;height:auto}
.avg-collage-card.card-a{left:0;top:12px;transform:rotate(-7deg)}
.avg-collage-card.card-b{right:0;top:92px;transform:rotate(8deg)}
.avg-reseller-mark{position:absolute;left:50%;bottom:0;transform:translateX(-50%);z-index:2;width:210px;height:100px;border-radius:12px;background:#fff;display:grid;place-items:center;padding:10px;box-shadow:0 22px 44px rgba(0,0,0,.4)}
.avg-reseller-mark img{max-width:100%;max-height:100%;object-fit:contain}
.avg-hero-art{background:radial-gradient(circle at 60% 50%,#345ca64e,transparent 75%),#0d172a}
.avg-hero-art:before,.avg-hero-art:after{display:none}
.avg-product-hero-image{width:100%;height:100%;min-height:330px;object-fit:contain;display:block}
.avg-art-caption{z-index:2;background:#0a172cc4;padding:10px 15px;border-radius:25px;color:#d1dffe}
.avg-card{padding:0;overflow:hidden;min-height:initial}
.avg-card-media{aspect-ratio:720/350;overflow:hidden;background:#111827;border-bottom:1px solid rgba(108,137,208,.22)}
.avg-card-media img{width:100%;height:100%;display:block;object-fit:cover;object-position:top;transition:transform .38s}
.avg-card:hover .avg-card-media img{transform:scale(1.04)}
.avg-card-head{padding:19px 22px 0;margin-bottom:14px}
.avg-card h3{padding:0 22px;margin-bottom:11px}
.avg-card p{padding:0 22px;margin-bottom:16px;flex:1}
.avg-card-cta{margin:0 22px 20px}
.avg-catalog{padding-top:78px}
.avg-head{padding-top:70px;padding-bottom:63px}
.avg-home-graphic{max-width:520px}
/* Larger product artwork viewport in catalog, more room for typography */
.avg-card-media img{object-position:center}
@media(max-width:1200px){.brand{width:230px}.main-nav{gap:14px}.nav-link{font-size:12px}}
@media(max-width:1040px){.brand{width:205px}.nav-cta span{margin-left:5px}}
@media(max-width:880px){.site-header{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(7,12,26,.98)}:root{--header-h:83px}.brand{width:215px}.brand img{height:55px}.brand-tagline{font-size:9px}.main-nav{inset:var(--header-h) 0 0;z-index:3}.hero-grid{padding-top:54px;min-height:unset}.hero-proof{right:5%;bottom:-6px}.hero{min-height:unset}.about-with-photo{grid-template-columns:1fr 1fr}.about-with-photo>div:first-child{grid-column:1/-1}.about-photo{margin:0;max-height:380px}.about-photo img{height:380px}.avg-head{padding-top:52px}.nav-mega{max-height:none}}
@media(max-width:600px){:root{--header-h:77px}.brand{width:188px}.brand img{height:47px}.brand-tagline{font-size:8px;letter-spacing:.16em}.hero-grid{padding-top:55px}.hero-proof{right:12%;bottom:2px;transform:scale(.84);transform-origin:bottom right}.about-with-photo{grid-template-columns:1fr}.about-with-photo>div:first-child{grid-column:auto}.about-photo{width:min(100%,360px);max-height:400px;margin:12px auto 0}.about-photo img{height:400px}.avg-collage{height:330px}.avg-collage-card{width:76%}.avg-collage-card.card-b{top:80px}.avg-reseller-mark{width:182px;height:83px}.avg-hero-art{min-height:230px}.avg-product-hero-image{min-height:230px}.avg-card-media{aspect-ratio:720/330}.is-phone .shot-frame{height:126%}}
@media(prefers-reduced-motion:reduce){.hero-proof,.shot-frame,.avg-card-media img{transition:none}}

/* V4: restauración exacta del archivo original del logo. Sin lema agregado en HTML. */
.brand-lockup{display:block;width:100%}
.brand img{width:100%;height:auto;max-height:calc(var(--header-h) - 8px);object-fit:contain;object-position:left center}
.footer-brand-image{display:block;max-width:235px}
.footer-brand-image img{width:100%;height:auto;max-height:none;object-fit:contain}
/* La historia institucional crece en párrafos: respetar legibilidad y ritmo. */
.about-text p{line-height:1.75}
.about-text p strong{color:#f0f4ff}
@media(max-width:600px){.brand img{height:auto;max-height:calc(var(--header-h) - 7px)}}