/* MAGI IT / QUIÉNES SOMOS — Experiencia cinemática de arquitectura y diagnóstico */

/* Tipografía proporcionada a la portada de Inicio. */
.about-intro h1 {
  font-size:clamp(50px,4.05vw,71px);
  line-height:1.025;
  letter-spacing:-.058em;
  max-width:14.3ch;
  text-wrap:balance;
}
.about-intro-layout {grid-template-columns:minmax(0,1fr) minmax(420px,.98fr);gap:clamp(22px,3vw,58px);}
.about-intro {padding-block:145px 122px;min-height:735px;}
.about-overline {margin-top:20px;}
.about-identity-line {margin-top:32px;}

/* Matriz viva: cuatro líneas de servicio conectadas al motor central. */
.about-matrix {
  width:100%;min-height:530px;height:530px;border-radius:30px;
  background:
    radial-gradient(ellipse at 50% 46%,rgba(56,109,246,.24),transparent 48%),
    radial-gradient(ellipse at 85% 22%,rgba(148,64,255,.13),transparent 50%),
    linear-gradient(145deg,rgba(3,17,48,.94),rgba(5,10,33,.89));
  border:1px solid rgba(86,144,255,.2);
  box-shadow:inset 0 0 70px rgba(26,105,255,.13),0 24px 88px rgba(0,6,26,.38);
  overflow:hidden;isolation:isolate;
}
.matrix-grid {
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(86,161,255,.075) 1px,transparent 1px),linear-gradient(rgba(86,161,255,.075) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse at 50% 50%,black 28%,transparent 82%);
}
.matrix-aura {position:absolute;left:50%;top:48%;width:54%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(50,127,255,.25),rgba(132,58,255,.11) 47%,transparent 71%);filter:blur(10px);animation:matrixAura 5s ease-in-out infinite alternate;}
.matrix-lines {position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;filter:drop-shadow(0 0 7px rgba(47,175,255,.6));}
.matrix-lines path {fill:none;stroke:rgba(75,164,255,.63);stroke-width:2;stroke-dasharray:10 12;animation:matrixStream 3.1s linear infinite;}
.matrix-lines path:nth-child(2n) {stroke:#ad76ff;stroke-dasharray:5 14;animation-duration:3.7s;}
.matrix-lines path:nth-child(3) {animation-direction:reverse;}
@keyframes matrixStream {to{stroke-dashoffset:-132;}}
@keyframes matrixAura {to{transform:translate(-50%,-50%) scale(1.14);opacity:.7;}}
.matrix-node {
  position:absolute;z-index:3;width:39%;min-height:93px;display:flex;flex-direction:column;justify-content:center;gap:8px;
  padding:13px 17px;border-radius:14px;
  background:linear-gradient(145deg,rgba(10,37,92,.95),rgba(13,18,60,.96));
  border:1px solid rgba(86,183,255,.46);
  box-shadow:inset 0 0 0 1px rgba(141,192,255,.08),0 0 20px rgba(35,139,255,.21),0 8px 28px rgba(0,4,22,.4);
  animation:matrixHover 5s ease-in-out infinite alternate;
}
.matrix-node--software {left:4.5%;top:7%;animation-delay:-1s;}
.matrix-node--web {right:4.5%;top:7%;animation-delay:-2s;}
.matrix-node--systems {left:4.5%;bottom:10%;animation-delay:-2.9s;}
.matrix-node--security {right:4.5%;bottom:10%;animation-delay:-.2s;}
.matrix-node-index {font-size:9px;letter-spacing:.15em;color:#83baff;font-weight:780;}
.matrix-node strong {font-size:clamp(10px,.92vw,13px);font-weight:850;letter-spacing:.035em;color:white;}
.matrix-node-bars {display:flex;align-items:flex-end;gap:4px;height:14px;opacity:.8;}
.matrix-node-bars i {width:7px;height:35%;background:linear-gradient(#79edff,#3f88ff);border-radius:3px;box-shadow:0 0 9px #318cff88;animation:matrixBars 1.8s ease-in-out infinite alternate;}
.matrix-node-bars i:nth-child(2) {height:85%;animation-delay:-.4s;}.matrix-node-bars i:nth-child(3) {height:55%;animation-delay:-.75s;}.matrix-node-bars i:nth-child(4) {height:100%;animation-delay:-1.1s;}.matrix-node-bars i:nth-child(5) {height:45%;animation-delay:-1.35s;}
@keyframes matrixBars {to{height:25%;opacity:.55;}}
@keyframes matrixHover {to{transform:translateY(-7px);box-shadow:inset 0 0 0 1px rgba(141,192,255,.08),0 0 27px rgba(54,149,255,.26),0 12px 34px rgba(0,4,22,.45);}}
.matrix-core {
  position:absolute;left:50%;top:49%;width:46%;max-width:252px;aspect-ratio:1.2;transform:translate(-50%,-50%);
  display:grid;place-items:center;z-index:5;border:1.5px solid rgba(104,206,255,.8);border-radius:28px;
  background:linear-gradient(135deg,rgba(13,75,182,.82),rgba(39,37,135,.92) 47%,rgba(107,40,159,.76));
  box-shadow:inset 0 0 35px rgba(93,173,255,.2),0 0 18px rgba(53,146,255,.55),0 0 64px rgba(84,86,255,.34),0 0 95px rgba(130,54,255,.21);
  animation:matrixCoreFloat 5.4s ease-in-out infinite;
}
.matrix-core-rim {position:absolute;inset:12px;border:1px solid rgba(193,234,255,.42);border-radius:19px;}
.matrix-core-rim::after {content:"";position:absolute;inset:-16px;border-radius:24px;border:1px solid rgba(78,196,255,.28);animation:matrixCorePulse 3.2s ease-out infinite;}
.matrix-core-wave {position:absolute;inset:-6px;border-radius:30px;background:conic-gradient(from 45deg,transparent 0deg 245deg,#6ceeff 300deg,#ac65ff 323deg,transparent 360deg);opacity:.65;filter:blur(12px);animation:matrixCoreSpin 5s linear infinite;z-index:-1;}
.matrix-core-facets {position:absolute;inset:0;background:linear-gradient(130deg,rgba(132,215,255,.12),transparent 28%,transparent 72%,rgba(192,90,255,.16));border-radius:inherit;}
.matrix-core img {position:relative;z-index:2;width:82%;height:auto;object-fit:contain;filter:drop-shadow(0 0 16px rgba(64,171,255,.5));}
.matrix-caption {position:absolute;bottom:16px;left:50%;transform:translateX(-50%);color:#8fb7f5;white-space:nowrap;letter-spacing:.105em;font-size:9px;font-weight:750;}
.matrix-caption i {display:inline-block;width:5px;height:5px;margin:0 6px 1px;border-radius:50%;background:#4ce4ff;box-shadow:0 0 9px #32c5ff;}
@keyframes matrixCoreFloat {50%{transform:translate(-50%,-53%);}}
@keyframes matrixCoreSpin {to{transform:rotate(360deg);}}
@keyframes matrixCorePulse {0%{transform:scale(.96);opacity:.75;}100%{transform:scale(1.16);opacity:0;}}

/* Motor de diagnóstico: enlaces energéticos, visor central y telemetría. */
.about-console-scene {min-height:480px;padding:13px;background:radial-gradient(ellipse at 50% 46%,rgba(33,85,198,.3),transparent 75%);}
.about-console-body {min-height:480px;grid-template-columns:minmax(0,52%) minmax(0,48%);}
.about-console-readouts {padding:32px clamp(23px,3vw,50px) 38px 18px;}
.about-readout h3 {font-size:clamp(27px,2.55vw,38px);}
.diag-system {
  --diag-primary:#36dafe;--diag-secondary:#a66cfa;
  position:relative;width:100%;max-width:540px;height:460px;isolation:isolate;overflow:hidden;border-radius:21px;
  background:radial-gradient(ellipse at 50% 49%,rgba(39,95,212,.22),transparent 65%),linear-gradient(160deg,#06183b,#07102c 65%,#100c32);
  border:1px solid rgba(93,171,255,.25);
  box-shadow:inset 0 0 43px rgba(35,128,255,.11),0 0 30px rgba(18,61,175,.19);
}
.diag-system[data-stage="2"] {--diag-primary:#a172ff;--diag-secondary:#35c8ff;}
.diag-system[data-stage="3"] {--diag-primary:#43e7bf;--diag-secondary:#4a9cff;}
.diag-grid {position:absolute;inset:0;background:linear-gradient(rgba(79,151,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(79,151,255,.07) 1px,transparent 1px);background-size:31px 31px;mask-image:radial-gradient(ellipse,black,transparent 80%);}
.diag-system::before {content:"";position:absolute;inset:-100% 0 0;pointer-events:none;background:linear-gradient(transparent 48%,rgba(48,201,255,.12) 49.9%,rgba(76,158,255,.24) 50%,transparent 50.4%);animation:diagScan 6s linear infinite;z-index:5;}
@keyframes diagScan {to{transform:translateY(50%);}}
.diag-topline {position:absolute;top:16px;left:18px;right:18px;display:flex;align-items:center;justify-content:space-between;gap:7px;color:#a9d2ff;font-size:9px;font-weight:800;letter-spacing:.12em;white-space:nowrap;}
.diag-topline>span {display:flex;align-items:center;gap:7px;}
.diag-status,.diag-top-signal {width:6px;height:6px;border-radius:50%;background:var(--diag-primary);box-shadow:0 0 9px var(--diag-primary);animation:diagDot 2s ease-in-out infinite alternate;}
@keyframes diagDot {to{opacity:.35;}}
.diag-connections {position:absolute;inset:50% auto auto 50%;width:100%;height:83%;transform:translate(-50%,-50%);overflow:visible;pointer-events:none;filter:drop-shadow(0 0 6px var(--diag-primary));}
.diag-connection {stroke:var(--diag-primary);stroke-width:2;stroke-dasharray:8 13;fill:none;animation:diagTravel 1.7s linear infinite;}
.diag-connection:nth-child(2n) {stroke:var(--diag-secondary);animation-duration:2.4s;}
.diag-track {fill:none;stroke:var(--diag-primary);stroke-width:1.4;opacity:.24;stroke-dasharray:6 13;transform-origin:250px 190px;animation:diagRotate 25s linear infinite;}
.diag-track--outer {stroke:var(--diag-secondary);opacity:.19;animation-direction:reverse;}
@keyframes diagTravel {to{stroke-dashoffset:-105;}}
@keyframes diagRotate {to{transform:rotate(360deg);}}
.diag-node {position:absolute;z-index:3;width:35%;min-height:79px;padding:13px 13px 12px;border-radius:13px;background:linear-gradient(150deg,rgba(12,41,96,.98),rgba(19,20,70,.97));border:1px solid rgba(113,167,255,.46);box-shadow:0 8px 25px rgba(0,2,16,.27),0 0 14px rgba(26,135,255,.12);display:grid;gap:7px;}
.diag-node--a {left:5%;top:14%;}.diag-node--b {right:5%;top:14%;}.diag-node--c {left:5%;bottom:16%;}.diag-node--d {right:5%;bottom:16%;}
.diag-node span {font-size:9px;color:#89b9f5;letter-spacing:.11em;white-space:nowrap;font-weight:800;}
.diag-node strong {font-size:clamp(10px,1vw,14px);color:#f5f9ff;line-height:1.15;}
.diag-node i {display:block;width:68%;height:2px;background:linear-gradient(90deg,var(--diag-primary),var(--diag-secondary),transparent);box-shadow:0 0 10px var(--diag-primary);animation:diagData 2.3s ease-in-out infinite alternate;}
.diag-node:nth-of-type(2) i,.diag-node:nth-of-type(4) i {animation-delay:-1.1s;}
@keyframes diagData {to{width:24%;opacity:.4;}}
.diag-core {position:absolute;left:50%;top:49%;width:46%;aspect-ratio:1.2;max-width:216px;transform:translate(-50%,-50%);z-index:4;display:grid;place-items:center;border:1px solid var(--diag-primary);border-radius:24px;background:linear-gradient(145deg,rgba(14,77,162,.96),rgba(45,30,118,.95));box-shadow:inset 0 0 29px rgba(122,192,255,.16),0 0 17px var(--diag-primary),0 0 52px rgba(61,108,255,.37);animation:diagCoreFloat 4.7s ease-in-out infinite;}
.diag-core-depth {position:absolute;inset:13px;border:1px solid rgba(179,226,255,.43);border-radius:17px;}
.diag-core-inner {position:relative;z-index:1;display:grid;justify-items:center;gap:10px;text-align:center;}
.diag-core-kicker {font-size:8px;letter-spacing:.16em;font-weight:800;color:#b9dfff;}
.diag-core-inner strong {font-size:clamp(15px,1.45vw,22px);color:#fff;letter-spacing:.07em;text-shadow:0 0 22px var(--diag-primary);}
.diag-core-wave {display:flex;align-items:end;gap:4px;height:18px;}
.diag-core-wave i {width:5px;height:9px;background:var(--diag-primary);border-radius:5px;box-shadow:0 0 9px var(--diag-primary);animation:diagWave 1.2s ease-in-out infinite alternate;}
.diag-core-wave i:nth-child(2),.diag-core-wave i:nth-child(6) {height:16px;animation-delay:-.3s;}.diag-core-wave i:nth-child(3),.diag-core-wave i:nth-child(5) {height:7px;animation-delay:-.6s;}.diag-core-wave i:nth-child(4) {height:19px;animation-delay:-.1s;}
.diag-core-edge {position:absolute;inset:-6px;border-radius:29px;border:1px solid var(--diag-secondary);opacity:.53;animation:diagEdgePulse 3s ease-out infinite;}
@keyframes diagWave {to{height:4px;opacity:.5;}}
@keyframes diagEdgePulse {to{transform:scale(1.1);opacity:0;}}
@keyframes diagCoreFloat {50%{transform:translate(-50%,-52%);}}
.diag-caption {position:absolute;bottom:13px;left:19px;right:19px;display:flex;justify-content:space-between;align-items:center;color:#a6d8ff;font-size:10px;letter-spacing:.13em;font-weight:800;}
.diag-signal-bars {display:flex;align-items:end;gap:4px;height:16px;}
.diag-signal-bars i {width:4px;height:7px;background:var(--diag-primary);box-shadow:0 0 9px var(--diag-primary);animation:diagWave 1.8s ease-in-out infinite alternate;}.diag-signal-bars i:nth-child(2) {height:12px;animation-delay:-.3s;}.diag-signal-bars i:nth-child(3){height:16px;animation-delay:-.5s;}.diag-signal-bars i:nth-child(4){height:10px;animation-delay:-.7s;}
.diag-system.is-switching .diag-node,.diag-system.is-switching .diag-core {animation:diagSwitch .5s ease-out both;}
@keyframes diagSwitch {0%{opacity:.3;filter:blur(5px);transform:translateY(8px)}100%{opacity:1;filter:blur(0);}}
/* En la animación de conmutación el núcleo conserva su centrado. */
.diag-system.is-switching .diag-core {animation:diagCoreSwitch .5s ease-out;}
@keyframes diagCoreSwitch {0%{opacity:.4;filter:blur(5px);transform:translate(-50%,-48%) scale(.94)}100%{opacity:1;filter:blur(0);transform:translate(-50%,-50%) scale(1)}}

@media (max-width:1100px) {
  .about-intro-layout {grid-template-columns:1fr;}
  .about-intro h1 {max-width:15ch;}
  .about-matrix {max-width:680px;margin-inline:auto;}
  .about-console-body {grid-template-columns:1fr;}
  .about-console-scene {padding:16px;}
  .about-console-readouts {padding:22px 35px 42px;}
}
@media (max-width:800px) {
  .about-intro h1 {font-size:clamp(46px,7vw,68px);}
  .about-matrix {height:480px;min-height:480px;}
  .about-console-scene {min-height:470px;}
}
@media (max-width:570px) {
  .about-intro h1 {font-size:clamp(40px,9.5vw,55px);}
  .about-matrix {min-height:340px;height:340px;border-radius:22px;}
  .matrix-node {width:43%;min-height:58px;padding:8px 10px;gap:4px;border-radius:10px;}
  .matrix-node-index {font-size:7px;}.matrix-node strong {font-size:9px;}
  .matrix-node-bars {height:9px;}.matrix-node-bars i {width:5px;}
  .matrix-node--software,.matrix-node--web {top:8%;}.matrix-node--systems,.matrix-node--security {bottom:11%;}
  .matrix-node--software,.matrix-node--systems {left:2.5%;}.matrix-node--web,.matrix-node--security {right:2.5%;}
  .matrix-core {width:49%;border-radius:20px;}.matrix-core-rim {inset:9px;border-radius:14px;}
  .matrix-lines {transform:scale(.91);}
  .matrix-caption {bottom:9px;font-size:7px;letter-spacing:.04em;}
  .about-console-scene {min-height:350px;padding:8px;}
  .diag-system {height:336px;border-radius:15px;}
  .diag-topline {font-size:7px;left:10px;right:10px;top:11px;letter-spacing:.05em;}
  .diag-node {min-height:57px;width:40%;padding:8px 9px;gap:5px;border-radius:10px;}
  .diag-node--a,.diag-node--b {top:13%;}.diag-node--c,.diag-node--d {bottom:15%;}
  .diag-node--a,.diag-node--c {left:3%;}.diag-node--b,.diag-node--d {right:3%;}
  .diag-node span {font-size:7px;letter-spacing:.04em;}.diag-node strong {font-size:10px;}.diag-node i {height:1px;}
  .diag-core {width:45%;border-radius:17px;}.diag-core-depth {inset:7px;border-radius:11px;}.diag-core-inner {gap:6px;}.diag-core-kicker {font-size:6px;letter-spacing:.08em;}.diag-core-inner strong {font-size:13px;}.diag-core-wave {height:12px;}.diag-core-wave i {width:3px;}
  .diag-caption {bottom:10px;left:11px;right:11px;font-size:8px;letter-spacing:.07em;}
  .about-console-readouts {padding:18px 21px 33px;}
}
@media (prefers-reduced-motion:reduce) {
  .matrix-aura,.matrix-lines path,.matrix-node,.matrix-node-bars i,.matrix-core,.matrix-core-rim::after,.matrix-core-wave,
  .diag-system::before,.diag-connection,.diag-track,.diag-node i,.diag-core,.diag-core-wave i,.diag-core-edge,.diag-signal-bars i {animation:none!important;}
  .diag-system.is-switching .diag-node,.diag-system.is-switching .diag-core {animation:none!important;}
}