/* MAGI IT | Digital Studio: interfaz editorial, revelados en capas y laboratorio interactivo */
.web-body { background:#030918; color:#f4f8ff; }
.web-body .site-shell {overflow:clip;}
.web-main {background:#030a20; overflow:clip;}
.web-main h1,.web-main h2,.web-main h3 {text-wrap:balance;}
.web-kicker,.web-overline {font-size:11px;letter-spacing:.23em;font-weight:850;color:#7ad5ff;}
.web-overline {display:flex;align-items:center;gap:11px;}
.web-overline-square {width:26px;height:4px;background:linear-gradient(90deg,#00c5ff,#ac56ff);border-radius:8px;box-shadow:0 0 14px #257bff;}
.web-hero {position:relative;min-height:min(820px,90vh);padding:clamp(125px,10vw,170px) 0 115px;isolation:isolate;background:radial-gradient(ellipse at 70% 49%,rgba(36,62,177,.31),transparent 48%),linear-gradient(125deg,#030818,#07102d 55%,#171042);}
.web-hero-lights {position:absolute;z-index:-1;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(41,119,231,.045) 1px,transparent 1px),linear-gradient(rgba(41,119,231,.045) 1px,transparent 1px);background-size:68px 68px;mask-image:linear-gradient(180deg,transparent,black 30%,transparent 95%);}
.web-hero-layout {display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.12fr);align-items:center;gap:clamp(24px,5vw,90px);}
.web-hero-copy {position:relative;z-index:2;}
.web-hero-copy h1 {font-size:clamp(46px,5.3vw,87px);letter-spacing:-.063em;line-height:1.035;margin:22px 0 27px;}
.web-lede {font-size:clamp(16px,1.2vw,19px);color:#b9cce7;line-height:1.72;max-width:56ch;margin:0;}
.web-hero-actions {display:flex;gap:14px;flex-wrap:wrap;margin:33px 0 30px;}
.web-hero-actions .button {white-space:normal;text-align:center;}
.web-hero-metrics {display:flex;flex-wrap:wrap;gap:12px 22px;color:#9dbce5;font-size:11px;letter-spacing:.075em;font-weight:750;}
.web-hero-metrics span::before {content:'✦';font-size:10px;color:#45c3ff;margin-right:9px;}
.web-showcase {position:relative;border-radius:25px;isolation:isolate;aspect-ratio:1.13;min-width:0;overflow:hidden;border:1px solid rgba(76,146,255,.43);background:#051235;transform:perspective(1200px) translateY(24px) rotateY(-5deg);opacity:0;box-shadow:0 20px 110px rgba(6,64,194,.37),0 0 80px rgba(91,45,193,.22);transition:opacity 1s,transform 1.5s cubic-bezier(.2,.72,.2,1);}
.web-showcase.is-ready {opacity:1;transform:perspective(1200px) translateY(0) rotateY(0deg);}
.web-showcase > img {display:block;width:100%;height:100%;object-fit:cover;object-position:59% center;animation:webShowcasePan 18s ease-in-out infinite alternate;}
.web-showcase::after {content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,rgba(0,0,0,.05),transparent 42%,rgba(7,1,39,.43));}
.web-showcase-window {position:absolute;z-index:2;top:16px;left:18px;right:18px;height:30px;display:flex;align-items:center;gap:6px;padding:0 12px;border:1px solid rgba(165,201,255,.28);background:rgba(6,13,45,.65);backdrop-filter:blur(12px);border-radius:10px;}
.web-showcase-window span {width:7px;height:7px;border-radius:50%;background:#60c8ff;}.web-showcase-window span:nth-child(2){background:#8c69fb}.web-showcase-window span:nth-child(3){background:#c785fc}
.web-showcase-window em {margin-left:auto;color:#cce5ff;font-size:9px;font-style:normal;letter-spacing:.12em;}
.web-showcase-label {position:absolute;z-index:3;display:grid;gap:5px;padding:15px 18px;border:1px solid #83c3ff7a;border-radius:14px;background:#081944dd;color:#fff;backdrop-filter:blur(15px);font-weight:850;font-size:12px;letter-spacing:.08em;box-shadow:0 0 35px rgba(4,122,255,.27);animation:webLabelFloat 6s ease-in-out infinite alternate;}
.web-showcase-label span {font-size:9px;color:#71d4ff;letter-spacing:.13em;}
.web-label-one {left:24px;bottom:35px}.web-label-two {right:25px;top:80px;animation-delay:-3s;}
.web-hero-bottom {position:absolute;left:50%;bottom:32px;transform:translateX(-50%);font-size:10px;font-weight:700;letter-spacing:.21em;color:#8fb7eb;white-space:nowrap;}.web-hero-bottom span {color:#50bcff;font-size:17px;margin-left:12px;}
@keyframes webShowcasePan {to {transform:scale(1.09) translateX(-1.4%);}}
@keyframes webLabelFloat {to {transform:translateY(-12px);}}
.web-services {position:relative;padding:clamp(80px,9vw,135px) 0;background:radial-gradient(ellipse at 10% 80%,rgba(15,69,170,.19),transparent 46%),#030a21;}
.web-centered-heading {text-align:center;max-width:1050px;margin:0 auto clamp(42px,5vw,70px);}
.web-centered-heading h2 {font-size:clamp(43px,5vw,76px);line-height:1.08;letter-spacing:-.055em;margin:16px 0 20px;}
.web-centered-heading p {font-size:clamp(15px,1.2vw,19px);line-height:1.65;max-width:770px;margin:auto;color:#b3c7e5;}
.web-service-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(13px,1.7vw,24px);}
.web-service {min-width:0;display:flex;flex-direction:column;border:1px solid rgba(109,152,249,.29);border-radius:24px;overflow:hidden;background:linear-gradient(152deg,rgba(16,43,94,.9),rgba(8,17,45,.97) 70%,rgba(30,13,67,.82));box-shadow:0 25px 55px rgba(0,3,24,.26);transition:transform .55s cubic-bezier(.2,.7,.2,1),box-shadow .55s,border-color .55s;}
.web-service:hover {transform:translateY(-10px);border-color:rgba(104,214,255,.65);box-shadow:0 36px 70px rgba(0,50,147,.26),0 0 38px rgba(68,105,246,.16);}
.web-service-image {position:relative;overflow:hidden;aspect-ratio:1.12;background:#0c194b;}
.web-service-image img {display:block;width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.3,1),filter .7s;}
.web-service:hover .web-service-image img {transform:scale(1.11);filter:saturate(1.18);}
.web-service-image::after {content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 55%,rgba(4,11,32,.6));}
.web-service-body {display:flex;flex-direction:column;align-items:flex-start;flex:1;gap:13px;padding:22px clamp(16px,1.5vw,25px) 27px;}
.web-service-num {font-size:10px;color:#81d9ff;letter-spacing:.14em;font-weight:850;}
.web-service h3 {font-size:clamp(21px,1.65vw,27px);line-height:1.19;letter-spacing:-.025em;margin:4px 0 0;}
.web-service p {font-size:14px;line-height:1.65;color:#bfd0e9;margin:0;}
.web-service a {margin-top:auto;padding-top:16px;color:#90d9ff;font-size:12px;font-weight:800;letter-spacing:.025em;display:flex;gap:14px;align-items:center;}
.web-service a span {font-size:20px;transition:transform .25s;}.web-service a:hover span {transform:translate(3px,-3px);}
.web-lab {padding:100px 0 120px;background:radial-gradient(ellipse at 80% 40%,rgba(86,47,154,.16),transparent 49%),#050c26;}
.web-lab-shell {display:grid;grid-template-columns:minmax(275px,.37fr) minmax(0,.63fr);gap:0;border:1px solid rgba(107,158,255,.35);border-radius:28px;overflow:hidden;background:linear-gradient(150deg,#08183c,#0b1031);box-shadow:0 36px 90px rgba(1,3,17,.4);}
.web-lab-nav {display:grid;grid-template-columns:1fr;align-content:center;gap:7px;padding:clamp(22px,3vw,48px);border-right:1px solid rgba(111,145,243,.2);}
.web-lab-tab {width:100%;padding:15px 18px;border:1px solid transparent;border-radius:13px;color:#c0cde9;background:transparent;display:flex;text-align:left;align-items:center;gap:17px;font-family:inherit;font-size:clamp(13px,.95vw,16px);font-weight:750;cursor:pointer;transition:background .27s,transform .27s,border-color .27s,color .27s;}
.web-lab-tab span {color:#69c4ff;font-size:10px;letter-spacing:.16em;}
.web-lab-tab:hover {background:rgba(53,97,201,.14);transform:translateX(5px);}
.web-lab-tab[aria-selected="true"] {border-color:rgba(119,163,255,.5);background:linear-gradient(95deg,rgba(0,121,248,.26),rgba(145,70,241,.2));color:#fff;box-shadow:inset 3px 0 0 #32c8ff;}
.web-lab-tab:focus-visible {outline:2px solid #76c7ff;outline-offset:2px;}
.web-lab-preview {min-width:0;display:flex;flex-direction:column;padding:clamp(17px,2vw,29px);}
.web-preview-header {min-height:44px;display:flex;align-items:center;gap:10px;border:1px solid rgba(105,163,255,.27);border-radius:12px 12px 0 0;background:rgba(4,12,42,.9);padding:0 16px;font-size:10px;color:#90b7e9;letter-spacing:.07em;}
.web-preview-leds {display:flex;gap:5px}.web-preview-leds i {width:7px;height:7px;border-radius:100%;background:#3fc5ff}.web-preview-leds i:nth-child(2){background:#8c68fe}.web-preview-leds i:nth-child(3){background:#ad67e9}
.web-preview-address {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.web-preview-status {margin-left:auto;font-size:9px;white-space:nowrap;color:#74dbff;font-weight:850;}
.web-preview-stage {position:relative;isolation:isolate;overflow:hidden;flex:1;min-height:475px;background:linear-gradient(135deg,#102764,#080b29);border:1px solid rgba(105,163,255,.27);border-top:0;border-radius:0 0 15px 15px;}
.web-preview-stage > img {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .26s ease,transform .7s cubic-bezier(.2,.7,.2,1),clip-path .7s ease;}
.web-preview-stage.is-changing > img {opacity:.4;transform:scale(1.13);clip-path:inset(0 0 100% 0);}
.web-preview-scan {position:absolute;top:0;left:-10%;height:4px;width:120%;background:linear-gradient(90deg,transparent,rgba(75,225,255,.8),rgba(221,149,255,.8),transparent);transform:translate3d(0,-120px,0) rotate(-6deg);z-index:2;pointer-events:none;box-shadow:0 0 36px 11px rgba(60,144,255,.2);animation:webScanPass 7s ease-in-out infinite;}
@keyframes webScanPass {0% {opacity:0;transform:translate3d(0,-120px,0) rotate(-6deg);}10%,75%{opacity:1;}100%{opacity:0;transform:translate3d(0,650px,0) rotate(-6deg);}}
.web-preview-caption {position:absolute;left:0;right:0;bottom:0;z-index:3;padding:90px clamp(22px,3vw,43px) 28px;background:linear-gradient(180deg,transparent,rgba(2,7,25,.95) 63%);}
.web-preview-caption > span {font-size:10px;letter-spacing:.18em;color:#65d9ff;font-weight:850;}
.web-preview-caption h3 {font-size:clamp(28px,2.4vw,42px);letter-spacing:-.04em;line-height:1.13;margin:10px 0 9px;}
.web-preview-caption p {color:#c8d9f1;font-size:clamp(13px,1vw,16px);line-height:1.57;max-width:56ch;margin:0;}
.web-preview-actions {display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0 4px;color:#7fb8e7;font-size:10px;letter-spacing:.12em;font-weight:780;}
.web-preview-actions a {color:#9ad9ff;font-size:13px;letter-spacing:0;}
.web-process {padding:clamp(90px,11vw,145px) 0;background:radial-gradient(ellipse at 15% 90%,rgba(28,84,195,.18),transparent 53%),#030919;}
.web-process-grid {display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(30px,6vw,115px);align-items:center;}
.web-process h2 {font-size:clamp(44px,4.9vw,76px);line-height:1.08;letter-spacing:-.055em;margin:20px 0 28px;}
.web-process-grid > div > p {color:#b7c9e6;font-size:17px;line-height:1.75;max-width:570px;margin:0 0 30px;}
.web-process-list {margin:0;padding:0;list-style:none;position:relative;}
.web-process-list::before {content:'';position:absolute;left:30px;top:24px;bottom:45px;width:1px;background:linear-gradient(#03b9ff,#8f59ff,transparent);opacity:.6;}
.web-process-list li {display:flex;gap:27px;align-items:center;padding:25px 0;border-bottom:1px solid rgba(99,154,249,.15);}
.web-process-list li>span {position:relative;z-index:1;flex:0 0 62px;width:62px;height:62px;display:grid;place-items:center;background:linear-gradient(150deg,#0d2667,#23135d);border:1px solid rgba(135,164,255,.53);border-radius:16px;color:#7bdaff;font-weight:850;font-size:17px;box-shadow:0 0 25px rgba(32,88,255,.18);}
.web-process-list strong {font-size:21px;color:#f5f8ff}.web-process-list p {color:#a4bde0;margin:6px 0 0;font-size:14px;line-height:1.6;}
.web-final {padding:clamp(95px,11vw,145px) 0;background:radial-gradient(ellipse at 50% 110%,rgba(66,43,170,.34),transparent 65%),#050b21;border-top:1px solid rgba(96,131,243,.16);}
.web-final-inner {display:flex;flex-direction:column;text-align:center;align-items:center;}
.web-final h2 {max-width:1300px;font-size:clamp(47px,5.5vw,86px);line-height:1.08;letter-spacing:-.057em;margin:25px 0 20px;}
.web-final p {font-size:17px;line-height:1.7;color:#bfd0ee;max-width:780px;margin:0 0 32px;}
/* Entrada por barrido diagonal; distinta del núcleo, órbitas y giro de tarjetas en otras vistas. */
[data-web-reveal] {opacity:0;transform:translateY(40px) skewY(1.2deg);filter:blur(7px);transition:opacity .75s ease,transform 1s cubic-bezier(.2,.65,.16,1),filter .85s ease;transition-delay:calc(var(--reveal-order,0) * 110ms);}
[data-web-reveal].web-visible {opacity:1;transform:translateY(0) skewY(0);filter:none;}
:root[data-theme="light"] .web-main {background:#f7faff;color:#08152e;}
:root[data-theme="light"] .web-hero {background:linear-gradient(140deg,#eaf2ff,#f4ecff 80%);}
:root[data-theme="light"] .web-hero-copy h1,:root[data-theme="light"] .web-centered-heading h2,:root[data-theme="light"] .web-process h2,:root[data-theme="light"] .web-final h2 {color:#08142e;}
:root[data-theme="light"] .web-lede,:root[data-theme="light"] .web-centered-heading p,:root[data-theme="light"] .web-process-grid>div>p,:root[data-theme="light"] .web-final p {color:#4f6689;}
:root[data-theme="light"] .web-hero-metrics {color:#42639a;}
:root[data-theme="light"] .web-services {background:#f6faff;}
:root[data-theme="light"] .web-service {background:#fff;border-color:#d6e2f8;box-shadow:0 22px 50px rgba(11,46,105,.09);}
:root[data-theme="light"] .web-service h3,:root[data-theme="light"] .web-process-list strong {color:#0a1733;}
:root[data-theme="light"] .web-service p,:root[data-theme="light"] .web-process-list p {color:#4c6589;}
:root[data-theme="light"] .web-lab {background:#eaf2ff;}
:root[data-theme="light"] .web-lab-shell {background:linear-gradient(130deg,#edf4ff,#e5e8fc);border-color:#bfcfeb;}
:root[data-theme="light"] .web-lab-nav {border-color:#d0dfff;}
:root[data-theme="light"] .web-lab-tab {color:#34496d;}
:root[data-theme="light"] .web-lab-tab[aria-selected="true"] {color:#091b42;background:linear-gradient(95deg,#a9dfff,#d9c7ff);}
:root[data-theme="light"] .web-process {background:#f8faff;}
:root[data-theme="light"] .web-final {background:linear-gradient(135deg,#e4efff,#f4eaff);}
@media(max-width:1200px) {.web-service-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;} .web-hero-layout {grid-template-columns:1fr 1fr;gap:24px;} .web-hero-copy h1 {font-size:clamp(47px,5vw,65px);} }
@media(max-width:850px) {.web-hero {padding-top:115px;}.web-hero-layout {grid-template-columns:1fr;gap:38px;} .web-showcase {max-width:780px;aspect-ratio:16/10;width:100%;} .web-lab-shell {grid-template-columns:1fr;} .web-lab-nav {grid-template-columns:repeat(2,minmax(0,1fr));border-right:0;border-bottom:1px solid rgba(111,145,243,.2);padding:18px;} .web-process-grid {grid-template-columns:1fr;} .web-process-list {max-width:750px;} }
@media(max-width:570px) {.web-hero {padding:112px 0 95px;} .web-hero-copy h1 {font-size:clamp(43px,10.8vw,61px);} .web-showcase {aspect-ratio:5/4;} .web-showcase-label {padding:9px 12px;font-size:10px;} .web-showcase-label span {font-size:8px;} .web-label-one {bottom:14px;left:12px;} .web-label-two {right:12px;top:58px;} .web-hero-metrics {gap:9px;} .web-service-grid {grid-template-columns:1fr;} .web-service-image {aspect-ratio:16/11;} .web-lab {padding:75px 0;} .web-lab-nav {grid-template-columns:1fr 1fr;gap:5px;padding:12px;} .web-lab-tab {min-width:0;font-size:11px;padding:12px 8px;gap:7px;} .web-lab-tab span {font-size:9px;} .web-lab-preview {padding:12px;} .web-preview-stage {min-height:415px;} .web-preview-actions {flex-wrap:wrap;} .web-process-list li {gap:17px;} .web-centered-heading h2 {font-size:clamp(38px,10vw,55px);} .web-final h2 {font-size:clamp(39px,10.5vw,60px);} }
@media(prefers-reduced-motion:reduce) {.web-showcase,.web-showcase.is-ready,[data-web-reveal],[data-web-reveal].web-visible {opacity:1;transform:none;filter:none;transition:none;} .web-showcase>img,.web-showcase-label,.web-preview-scan {animation:none;} .web-service,.web-service-image img {transition:none;} }