/* TID — hoja de estilos compartida */
  :root{
    --bg:#F3F1EA; --bg2:#E9E6DC; --paper:#FCFBF8; --line:#DEDBD2; --line-soft:rgba(23,28,25,.08);
    --ink:#161B18; --ink2:#4C514B; --muted:#787C75; --faint:#A4A89F;
    --primary:#16715C; --primary-deep:#0C463A; --primary-soft:#DCEDE6;
    --accent:#DC8534; --accent-soft:#F8E7D2; --accent-deep:#9A5716;
    --screen:#0D1417; --screen2:#172125; --screen-line:#27343A; --screen-txt:#93A4A8; --screen-faint:#5C6E73;
    --g-green:#37D9A6; --g-amber:#FFC062; --g-red:#FF6F61; --g-blue:#54BEEC;
    --disp:"Space Grotesk","Segoe UI",system-ui,sans-serif;
    --sans:"Inter","Helvetica Neue",Arial,system-ui,sans-serif;
    --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
    --eo:cubic-bezier(.19,1,.22,1); --eio:cubic-bezier(.83,0,.17,1); --maxw:1240px; --navh:70px;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{font-family:var(--sans);background:var(--bg);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;font-size:17px;overflow-x:hidden}
  a{color:inherit;text-decoration:none}
  ::selection{background:var(--primary);color:#fff}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 34px}
  .mono{font-family:var(--mono)}
  .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--primary)}

  /* ===== MENÚ FIJO VISIBLE ===== */
  nav{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--navh);background:rgba(243,241,234,.84);backdrop-filter:blur(16px) saturate(1.5);border-bottom:1px solid var(--line)}
  .navrow{display:flex;align-items:center;gap:16px;height:var(--navh);max-width:var(--maxw);margin:0 auto;padding:0 34px}
  .brand{display:flex;align-items:center;gap:11px;font-family:var(--disp);font-weight:700;letter-spacing:.01em;font-size:20px;color:var(--ink);flex-shrink:0;cursor:pointer}
  .brand img{height:34px;width:auto}
  .navlinks{display:flex;gap:2px;align-items:center;margin-left:18px;flex:1;overflow-x:auto;scrollbar-width:none}
  .navlinks::-webkit-scrollbar{display:none}
  .navlinks a{font-family:var(--disp);font-size:15px;font-weight:500;color:var(--ink2);padding:9px 15px;border-radius:9px;white-space:nowrap;cursor:pointer;transition:color .2s var(--eo),background .2s var(--eo)}
  .navlinks a.current{color:#fff;background:var(--primary)}
  @media (hover:hover){.navlinks a:not(.current):hover{color:var(--ink);background:rgba(23,28,25,.05)}}
  .btn{font-family:var(--disp);font-weight:600;font-size:15px;border-radius:10px;border:1.5px solid transparent;cursor:pointer;transition:transform .14s var(--eo),background .18s,border-color .18s,color .18s;display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
  .btn:active{transform:scale(.97)}
  .btn.solid{background:var(--primary);color:#fff;padding:12px 22px} .btn.solid:hover{background:var(--primary-deep)}
  .btn.ghost{background:transparent;border-color:var(--line);color:var(--ink);padding:12px 22px} .btn.ghost:hover{border-color:var(--ink)}
  .btn.lg{padding:15px 28px;font-size:16px}
  .btn .ar{transition:transform .2s var(--eo)} .btn:hover .ar{transform:translateX(4px)}
  .navrow .btn.solid{flex-shrink:0;padding:11px 20px}
  @media (max-width:860px){.navrow .btn.solid{display:none}}

  main{padding-top:var(--navh)}
  .view{display:none}
  .view.active{display:block;animation:viewIn .55s var(--eo)}
  @keyframes viewIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

  /* ===== HERO (INICIO) ===== */
  .hero{position:relative;padding:60px 0 76px;overflow:hidden}
  .hero::before{content:"";position:absolute;top:-10%;right:-12%;width:62%;height:130%;background:radial-gradient(circle at 60% 40%,rgba(22,113,92,.10),transparent 62%);pointer-events:none}
  .hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:54px;align-items:center;position:relative}
  .hero h1{font-family:var(--disp);font-weight:700;font-size:clamp(40px,5.6vw,68px);line-height:1.02;letter-spacing:-.03em;color:var(--ink);margin:22px 0 0;max-width:13ch}
  .hero h1 .hl{color:var(--primary)}
  .hero .sub{font-size:clamp(17px,1.9vw,20px);color:var(--ink2);max-width:50ch;margin-top:24px;line-height:1.55}
  .hero .cta{display:flex;gap:13px;flex-wrap:wrap;margin-top:34px}
  .chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:34px}
  .chips a{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--ink2);background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:8px 14px;cursor:pointer;transition:border-color .2s,color .2s,transform .14s var(--eo)}
  .chips a:hover{border-color:var(--primary);color:var(--primary);transform:translateY(-2px)}

  .herostage{position:relative;min-height:440px}
  .photoslot{position:absolute;inset:0 0 36px 40px;border-radius:20px;overflow:hidden;background:linear-gradient(150deg,#1b262b,#0e1619);border:1px solid #243036}
  .photoslot::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:30px 30px}
  .ps-in{position:absolute;top:26px;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--screen-faint);text-align:center;padding:0 24px}
  .ps-in .pico{width:42px;height:42px;border:1.5px solid var(--screen-line);border-radius:11px;display:flex;align-items:center;justify-content:center}
  .ps-in .pl{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--screen-txt)}
  .ps-in .psub{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--screen-faint)}
  .ps-corner{position:absolute;width:18px;height:18px;border:2px solid rgba(255,255,255,.18)}
  .ps-corner.tl{top:14px;left:14px;border-right:none;border-bottom:none}.ps-corner.tr{top:14px;right:14px;border-left:none;border-bottom:none}
  .ps-corner.bl{bottom:14px;left:14px;border-right:none;border-top:none}.ps-corner.br{bottom:14px;right:14px;border-left:none;border-top:none}

  .floatcard{position:absolute;right:-6px;bottom:0;width:60%;min-width:280px;background:var(--screen);border:1px solid var(--screen-line);border-radius:16px;padding:18px;box-shadow:0 24px 60px -20px rgba(12,40,34,.5)}
  .fc-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
  .fc-title{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--screen-txt)}
  .fc-live{font-family:var(--mono);font-size:9.5px;color:var(--g-green);display:inline-flex;align-items:center;gap:6px}
  .fc-live i{width:6px;height:6px;border-radius:50%;background:var(--g-green);box-shadow:0 0 8px var(--g-green)}
  .view.active .fc-live i{animation:blink 1.5s steps(1) infinite}
  @keyframes blink{0%,60%{opacity:1}61%,100%{opacity:.25}}
  .fc-kpis{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:13px}
  .fc-kpi{border:1px solid var(--screen-line);border-radius:9px;padding:9px 11px;background:var(--screen2)}
  .fc-kpi .l{font-family:var(--mono);font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--screen-faint);margin-bottom:5px}
  .fc-kpi .v{font-family:var(--mono);font-size:18px;font-weight:700;color:var(--screen-txt)}
  .fc-kpi.g .v{color:var(--g-green)} .fc-kpi.a .v{color:var(--g-amber)}
  .fc-kpi .v .u{font-size:9px;color:var(--screen-faint);margin-left:2px}
  .floatcard svg{width:100%;display:block}

  /* ===== MARQUEE ===== */
  .marquee{background:var(--primary);color:#fff;overflow:hidden;border-top:1px solid var(--primary-deep);border-bottom:1px solid var(--primary-deep)}
  .mq-track{display:flex;white-space:nowrap;will-change:transform;animation:mq 26s linear infinite}
  .mq-track span{font-family:var(--disp);font-weight:500;font-size:15px;letter-spacing:.02em;padding:16px 26px;opacity:.92}
  .mq-track span::before{content:"·";margin-right:26px;opacity:.5}
  @keyframes mq{to{transform:translateX(-50%)}}

  /* ===== SECCIÓN / FILAS ===== */
  .sec{padding:56px 0}
  .sechead{max-width:700px;margin-bottom:50px}
  .sechead h2{font-family:var(--disp);font-weight:700;font-size:clamp(30px,4.4vw,50px);line-height:1.04;letter-spacing:-.025em;color:var(--ink);margin-top:16px}
  .sechead p{color:var(--ink2);margin-top:16px;font-size:18.5px;max-width:54ch}

  .srow{display:grid;grid-template-columns:1fr 1.05fr;gap:60px;align-items:center}
  .srow.rev .scopy{order:2}
  .srow .num{font-family:var(--mono);font-size:13px;color:var(--accent);letter-spacing:.1em}
  .srow.green .num{color:var(--primary)}
  .srow h3{font-family:var(--disp);font-weight:700;font-size:clamp(26px,3.4vw,40px);line-height:1.05;letter-spacing:-.02em;color:var(--ink);margin:14px 0 16px}
  .srow p{color:var(--ink2);font-size:17px;line-height:1.6;max-width:46ch;margin-bottom:22px}
  .srow .more{font-family:var(--disp);font-weight:600;font-size:15px;color:var(--ink);display:inline-flex;align-items:center;gap:9px;cursor:pointer}
  .srow .more .ar{color:var(--accent);transition:transform .2s var(--eo)} .srow.green .more .ar{color:var(--primary)}
  .srow .more:hover .ar{transform:translateX(5px)}
  .feat{margin-top:4px;display:flex;gap:8px;flex-wrap:wrap}
  .feat span{font-family:var(--mono);font-size:11px;color:var(--ink2);background:var(--bg2);border-radius:7px;padding:6px 11px}

  /* PANEL OSCURO TIPO INSTRUMENTO */
  .screen{background:#FCFBF8;border:1px solid #DEDBD2;border-radius:18px;padding:22px;box-shadow:0 24px 60px -30px rgba(20,25,27,.28);position:relative;overflow:hidden}
  .screen::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 80% 0%,rgba(22,113,92,.05),transparent 60%);pointer-events:none}
  .scr-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;position:relative}
  .scr-title{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#787C75}
  .scr-live{font-family:var(--mono);font-size:10px;letter-spacing:.06em;display:inline-flex;align-items:center;gap:7px;color:#A4A89F}
  .scr-live i{width:7px;height:7px;border-radius:50%;background:#16715C}
  .view.active .scr-live i.bl{animation:blink 1.5s steps(1) infinite}
  .scr-live.rec{color:#C0453F} .scr-live.rec i{background:#E24B4A}
  .scr-live.amber i{background:#DC8534}
  .screen svg{width:100%;display:block;position:relative}
  .scr-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px;position:relative}
  .scr-kpi{border:1px solid #DEDBD2;border-radius:10px;padding:13px;background:#fff}
  .scr-kpi .l{font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:#787C75;margin-bottom:7px}
  .scr-kpi .v{font-family:var(--mono);font-size:22px;font-weight:700;color:#161B18}
  .scr-kpi .v .u{font-size:11px;color:#A4A89F;margin-left:3px}
  .scr-kpi.g .v{color:#16715C} .scr-kpi.a .v{color:#DC8534} .scr-kpi.b .v{color:#3E8BC4}

  /* animaciones (corren cuando la vista está activa) */
  .view.active .draw{stroke-dasharray:1600;stroke-dashoffset:1600;animation:draw 1.9s var(--eo) forwards}
  .view.active .draw.d2{animation-delay:.25s}
  @keyframes draw{to{stroke-dashoffset:0}}
  .view.active .livedot{animation:dm 4s ease-in-out infinite}
  @keyframes dm{0%{offset-distance:0%;opacity:0}8%{opacity:1}92%{opacity:1}100%{offset-distance:100%;opacity:0}}
  .view.active .scan{animation:scan 3s var(--eio) infinite}
  @keyframes scan{0%{transform:translateY(0)}50%{transform:translateY(150px)}100%{transform:translateY(0)}}
  .view.active .hot{transform-origin:center;animation:hot 1.6s ease-in-out infinite}
  @keyframes hot{0%,100%{opacity:.7;transform:scale(.94)}50%{opacity:1;transform:scale(1.07)}}
  .view.active .reticle{transform-origin:center;animation:pulse 1.6s ease-in-out infinite}
  @keyframes pulse{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.1)}}
  /* falla */
  .view.active .loadbar{transform-origin:left center;animation:loadfill 5.2s var(--eio) infinite}
  @keyframes loadfill{0%{transform:scaleX(.12);fill:#37D9A6}40%{transform:scaleX(.66);fill:#37D9A6}50%{transform:scaleX(.95);fill:#FF6F61}78%{transform:scaleX(.95);fill:#FF6F61}88%{transform:scaleX(.12);fill:#37D9A6}100%{transform:scaleX(.12);fill:#37D9A6}}
  .view.active .faultflash{animation:faultflash 5.2s steps(1) infinite}
  @keyframes faultflash{0%,49%{opacity:0}50%,82%{opacity:1}83%,100%{opacity:0}}
  .view.active .okflash{animation:okflash 5.2s steps(1) infinite}
  @keyframes okflash{0%,49%{opacity:1}50%,82%{opacity:0}83%,100%{opacity:1}}
  .view.active .trip{transform-origin:30px 56px;animation:trip 5.2s var(--eo) infinite}
  @keyframes trip{0%,49%{transform:rotate(0)}54%,82%{transform:rotate(-32deg)}88%,100%{transform:rotate(0)}}
  .view.active .alertpulse{transform-origin:center;animation:pulse 1s ease-in-out infinite}
  /* flujo de planta */
  .view.active .flow{stroke-dasharray:6 8;animation:flow 1.05s linear infinite}
  @keyframes flow{to{stroke-dashoffset:-28}}
  .view.active .spark{animation:spark 2.6s linear infinite}
  .view.active .spark.s2{animation-delay:.85s} .view.active .spark.s3{animation-delay:1.7s}
  @keyframes spark{0%{offset-distance:0%;opacity:0}6%{opacity:1}94%{opacity:1}100%{offset-distance:100%;opacity:0}}
  .view.active .run{transform-origin:center;animation:run 1.4s ease-in-out infinite}
  .view.active .run.r2{animation-delay:.4s} .view.active .run.r3{animation-delay:.8s}
  @keyframes run{0%,100%{opacity:.35}50%{opacity:1}}

  /* TARJETAS DE SERVICIO (grid inicio) */
  .svcgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
  .svccard{display:block;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:28px;cursor:pointer;transition:transform .22s var(--eo),box-shadow .22s var(--eo),border-color .2s}
  .svccard .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
  .svccard .sn{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--accent)}
  .svccard.green .sn{color:var(--primary)}
  .svccard .badge{width:30px;height:30px;border-radius:9px;background:var(--accent-soft);display:flex;align-items:center;justify-content:center}
  .svccard.green .badge{background:var(--primary-soft)}
  .svccard h3{font-family:var(--disp);font-weight:600;font-size:23px;color:var(--ink);letter-spacing:-.015em;margin-bottom:9px}
  .svccard p{font-size:15px;color:var(--ink2);line-height:1.55;margin-bottom:16px}
  .svccard .go{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--ink);display:inline-flex;align-items:center;gap:7px}
  .svccard .go .ar{color:var(--accent);transition:transform .22s var(--eo)} .svccard.green .go .ar{color:var(--primary)}
  .svccard:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(20,25,27,.08);border-color:var(--primary)}
  .svccard:hover .go .ar{transform:translateX(4px)}

  /* PROCESO */
  .process{padding:90px 0;border-top:1px solid var(--line);background:var(--bg2)}
  .steps{display:grid;grid-template-columns:repeat(4,1fr);margin-top:46px;gap:0;border-top:2px solid var(--primary)}
  .step{padding:26px 24px 0;border-right:1px solid var(--line)} .step:last-child{border-right:none}
  .step .sn{font-family:var(--mono);font-size:13px;color:var(--primary);margin-bottom:14px;font-weight:700}
  .step h4{font-family:var(--disp);font-weight:600;font-size:21px;color:var(--ink);margin-bottom:9px}
  .step p{font-size:14px;color:var(--ink2);line-height:1.5}

  /* PÁGINA DE SERVICIO */
  .svc-hero{padding:66px 0 14px}
  .ptag{display:inline-flex;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:7px 14px;border-radius:999px;background:var(--primary-soft);color:var(--primary-deep);margin-bottom:18px}
  .ptag.amber{background:var(--accent-soft);color:var(--accent-deep)}
  .svc-hero h1{font-family:var(--disp);font-weight:700;font-size:clamp(34px,5vw,58px);line-height:1.03;letter-spacing:-.028em;color:var(--ink);max-width:18ch}
  .svc-hero .sub{font-size:clamp(17px,1.9vw,20px);color:var(--ink2);max-width:56ch;margin-top:20px;line-height:1.55}
  .svc-body{padding:38px 0 30px}

  /* INCLUYE */
  .includes{margin-top:44px}
  .includes .ih{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:20px}
  .iglist{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
  .iglist li{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:18px;font-size:15px;color:var(--ink);line-height:1.4}
  .iglist li .lk{font-family:var(--mono);font-size:10px;color:var(--accent);display:block;margin-bottom:7px;letter-spacing:.06em}
  .iglist li.hl{border-color:var(--primary);background:var(--primary-soft)}
  .iglist li.hl .lk{color:var(--primary-deep)}

  /* BENTO */
  .bento{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:60px}
  .bento .cell{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:24px;transition:transform .2s var(--eo),box-shadow .2s var(--eo)}
  .bento .cell.wide{grid-column:span 2}
  .bento .ck{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--primary);margin-bottom:12px;display:block}
  .bento .cell.a .ck{color:var(--accent)}
  .bento h4{font-family:var(--disp);font-weight:600;font-size:20px;color:var(--ink);margin-bottom:7px}
  .bento p{font-size:13.5px;color:var(--ink2);line-height:1.5}
  .bento .cell:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(20,25,27,.06)}

  /* CTA BAND */
  .ctaband{background:var(--screen);color:#fff;border-radius:24px;margin:30px 0 70px;padding:60px 56px;position:relative;overflow:hidden}
  .ctaband::before{content:"";position:absolute;top:-40%;right:-10%;width:50%;height:180%;background:radial-gradient(circle,rgba(55,217,166,.14),transparent 60%);pointer-events:none}
  .ctaband .inner{position:relative;display:flex;align-items:center;justify-content:space-between;gap:34px;flex-wrap:wrap}
  .ctaband h2{font-family:var(--disp);font-weight:700;font-size:clamp(26px,3.6vw,38px);letter-spacing:-.02em;line-height:1.08;max-width:20ch;color:#fff}
  .ctaband .btn.solid{background:var(--g-green);color:#0C463A} .ctaband .btn.solid:hover{background:#5ee9bf}

  /* CONTACTO */
  .contact{padding:74px 0 30px}
  .contact h1{font-family:var(--disp);font-weight:700;font-size:clamp(36px,5.2vw,62px);letter-spacing:-.03em;line-height:1.02;color:var(--ink);max-width:14ch}
  .contact h1 .hl{color:var(--primary)}
  .contact .sub{color:var(--ink2);font-size:19px;margin-top:20px;max-width:48ch}
  .contact .cta{display:flex;gap:13px;flex-wrap:wrap;margin-top:32px}
  .ccard{margin-top:54px;border:1px solid var(--line);border-radius:18px;background:var(--paper);display:grid;grid-template-columns:repeat(3,1fr);overflow:hidden}
  .ccard .c{padding:26px 28px;border-right:1px solid var(--line)} .ccard .c:last-child{border-right:none}
  .ccard .cl{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
  .ccard .cv{font-family:var(--disp);font-size:18px;font-weight:600;color:var(--ink)}
  .ccard .cv.mono{font-family:var(--mono);font-weight:500;font-size:16px}

  footer{border-top:1px solid var(--line);padding:44px 0}
  .footrow{display:flex;justify-content:space-between;align-items:flex-start;gap:28px;flex-wrap:wrap}
  .footrow .fl{display:flex;gap:20px;flex-wrap:wrap}
  .footrow .fl a{font-family:var(--disp);font-size:14px;font-weight:500;color:var(--ink2);cursor:pointer}
  .footrow .fl a:hover{color:var(--primary)}
  .footrow .meta{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

  .r{opacity:0;transform:translateY(16px);transition:opacity .7s var(--eo),transform .7s var(--eo);transition-delay:var(--d,0s)}
  .r.in{opacity:1;transform:none}

  @media (max-width:900px){
    .hero-grid,.srow,.srow.rev{grid-template-columns:1fr;gap:38px}
    .srow .scopy,.srow.rev .scopy{order:0}
    .herostage{min-height:380px}
    .scr-kpis{grid-template-columns:1fr 1fr} .svcgrid{grid-template-columns:1fr}
    .iglist{grid-template-columns:1fr 1fr} .bento{grid-template-columns:1fr 1fr}.bento .cell.wide{grid-column:span 2}
    .steps{grid-template-columns:1fr 1fr}.step{border-bottom:1px solid var(--line);padding-bottom:22px}.step:nth-child(2){border-right:none}
    .ccard{grid-template-columns:1fr}.ccard .c{border-right:none;border-bottom:1px solid var(--line)}
    .ctaband{padding:44px 28px}.ctaband .inner{flex-direction:column;align-items:flex-start}
  }
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto} .r{transition:opacity .3s;transform:none;opacity:1}
    .mq-track{animation:none} .view.active *{animation:none!important} .view.active .draw{stroke-dashoffset:0} #plPart{transform:translateX(192px)}
    .view.active .loadbar{transform:scaleX(.66);fill:#37D9A6} .view.active .faultflash{opacity:0}
  }

  /* ===== Línea de producción (página Automatización) ===== */
  .view.active #plPart{animation:plPart 3.6s linear infinite}
  .view.active .pl-belt{animation:plBelt .85s linear infinite}
  .view.active .pl-roll{animation:plRoll .9s linear infinite;transform-box:fill-box;transform-origin:center}
  .view.active .pl-beam{animation:plBeam 3.6s linear infinite}
  .view.active .pl-sense{animation:plSense 3.6s linear infinite;transform-box:fill-box;transform-origin:center}
  .view.active .pl-in{animation:plIn 3.6s linear infinite}
  .view.active .pl-out{animation:plOut 3.6s linear infinite}
  .view.active .pl-piston{animation:plPiston 3.6s linear infinite}
  .view.active .pl-mark{animation:plMark 3.6s linear infinite}
  .view.active .pl-hmiflash{animation:plHmi 3.6s linear infinite}
  .view.active .pl-blink{animation:blink 1.5s steps(1) infinite}
  .view.active .pl-sigA{animation:plSigA 3.6s linear infinite}
  .view.active .pl-sigB{animation:plSigB 3.6s linear infinite}
  .view.active .pl-sigH{animation:plSigH 3.6s linear infinite}
  @keyframes plPart{0%{transform:translateX(-12px)}100%{transform:translateX(448px)}}
  @keyframes plBelt{to{stroke-dashoffset:-40}}
  @keyframes plRoll{to{transform:rotate(360deg)}}
  @keyframes plBeam{0%,43%{opacity:0}44.5%{opacity:.9}48%{opacity:.45}50%,100%{opacity:0}}
  @keyframes plSense{0%,42%{opacity:0;transform:scale(.3)}45%{opacity:1;transform:scale(1)}53%{opacity:0;transform:scale(1.7)}100%{opacity:0;transform:scale(1.7)}}
  @keyframes plIn{0%,44%{opacity:.15}47%{opacity:1}66%{opacity:1}70%,100%{opacity:.15}}
  @keyframes plOut{0%,61%{opacity:.15}64%{opacity:1}80%{opacity:1}84%,100%{opacity:.15}}
  @keyframes plPiston{0%,62%{transform:translateY(0)}70%{transform:translateY(13px)}79%{transform:translateY(13px)}86%,100%{transform:translateY(0)}}
  @keyframes plMark{0%,73%{opacity:0}79%{opacity:1}100%{opacity:1}}
  @keyframes plHmi{0%{opacity:0}3%{opacity:.45}11%{opacity:.1}17%,100%{opacity:0}}
  @keyframes plSigA{0%,43%{offset-distance:0%;opacity:0}45%{opacity:1}51%{offset-distance:100%;opacity:1}54%{opacity:0}100%{offset-distance:100%;opacity:0}}
  @keyframes plSigB{0%,61%{offset-distance:0%;opacity:0}63%{opacity:1}70%{offset-distance:100%;opacity:1}73%{opacity:0}100%{offset-distance:100%;opacity:0}}
  @keyframes plSigH{0%{offset-distance:0%;opacity:0}2%{opacity:1}10%{offset-distance:100%;opacity:1}13%{opacity:0}100%{offset-distance:100%;opacity:0}}

  /* ===== Ámbitos (Diagnóstico) ===== */
  .scopes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  .scope{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:24px}
  .scope .sk{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--accent);margin-bottom:10px;display:block;text-transform:uppercase}
  .scope.green .sk{color:var(--primary)}
  .scope h4{font-family:var(--disp);font-weight:600;font-size:20px;color:var(--ink);margin-bottom:12px;letter-spacing:-.01em}
  .scope ul{list-style:none;display:flex;flex-direction:column;gap:8px}
  .scope li{font-size:14px;color:var(--ink2);line-height:1.45;padding-left:16px;position:relative}
  .scope li::before{content:"\203A";position:absolute;left:0;color:var(--accent);font-weight:700}
  .scope.green li::before{color:var(--primary)}

  /* ===== Galería de evidencia ===== */
  .galh{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:20px}
  .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
  .gallery figure{margin:0;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--screen);position:relative;aspect-ratio:4/3}
  .gallery img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s var(--eo)}
  .gallery figure:hover img{transform:scale(1.06)}
  .gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 13px 11px;font-family:var(--mono);font-size:11px;color:#fff;background:linear-gradient(transparent,rgba(13,20,23,.9));letter-spacing:.01em}

  @media (max-width:900px){
    .scopes{grid-template-columns:1fr}
    .gallery{grid-template-columns:1fr 1fr}
  }

  /* ===== Dashboard de seguimiento de proyecto (hero de inicio) ===== */
  .pdash{background:#FCFBF8;border:1px solid #DEDBD2;border-radius:18px;padding:18px 18px 20px;box-shadow:0 24px 60px -30px rgba(20,25,27,.28);width:100%}
  .pd-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}
  .pd-eye{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:#16715C;margin-bottom:4px}
  .pd-title{font-family:var(--disp);font-weight:600;font-size:16px;color:#161B18;letter-spacing:-.01em}
  .pd-badge{position:relative;flex-shrink:0;min-width:92px;height:24px}
  .pd-badge span{position:absolute;right:0;top:0;font-family:var(--mono);font-size:10px;font-weight:500;padding:5px 10px;border-radius:999px;white-space:nowrap;display:inline-flex;align-items:center;gap:5px}
  .b-prog{background:#F8E7D2;color:#9A5716}.b-prog::before{content:"";width:6px;height:6px;border-radius:50%;background:#DC8534}
  .b-done{background:#DCEDE6;color:#0C463A;opacity:0}.b-done::before{content:"";width:6px;height:6px;border-radius:50%;background:#16715C}
  .pd-prog{display:flex;align-items:center;gap:11px;margin-bottom:14px}
  .pd-track{flex:1;height:8px;border-radius:99px;background:#E9E6DC;overflow:hidden}
  .pd-fill{height:100%;width:100%;border-radius:99px;background:linear-gradient(90deg,#16715C,#37D9A6)}
  .pd-pct{position:relative;width:40px;height:17px;flex-shrink:0}
  .pd-pct span{position:absolute;right:0;top:0;font-family:var(--mono);font-size:13px;font-weight:700;color:#16715C;opacity:0}.pd-pct .p100{opacity:1}
  .pd-plant{background:#F3F1EA;border:1px solid #E4E1D7;border-radius:12px;padding:10px 10px 4px;margin-bottom:9px}
  .pd-plant-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:2px}
  .pd-plant-head span:first-child{font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:#787C75}
  .pd-live{font-family:var(--mono);font-size:9px;color:#16715C;display:inline-flex;align-items:center;gap:5px}
  .pd-live i{width:6px;height:6px;border-radius:50%;background:#37D9A6;display:inline-block}
  .pd-plant svg{width:100%;display:block}
  .pd-kpis{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:12px}
  .pd-kpi{border:1px solid #E4E1D7;border-radius:11px;padding:9px 12px;background:#fff}
  .pd-kpi.kin{border-color:#CFE0EC;background:#F4F9FC}
  .pd-kpi.kout{border-color:#F0D8BE;background:#FDF6EE}
  .k-l{font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;display:flex;align-items:center;gap:6px;margin-bottom:5px}
  .kin .k-l{color:#2E6C97}.kout .k-l{color:#B4651F}
  .k-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
  .kin .k-dot{background:#3E8BC4}.kout .k-dot{background:#DC8534}
  .k-row{display:flex;align-items:baseline;gap:8px}
  .k-v{font-family:var(--mono);font-size:22px;font-weight:700;line-height:1;letter-spacing:-.01em}
  .kin .k-v{color:#2E6C97}.kout .k-v{color:#B4651F}
  .k-u{font-size:11px;font-weight:500;margin-left:1px;opacity:.7}
  .k-sep{color:#C9C6BC;font-size:15px}
  .pd-list{display:flex;flex-direction:column;gap:1px}
  .pd-item{position:relative;display:flex;align-items:center;gap:11px;padding:7px 9px;border-radius:8px}
  .pd-hl{position:absolute;inset:0;border-radius:8px;background:#FBF4EA;opacity:0;z-index:0}
  .pd-cb{position:relative;z-index:1;width:19px;height:19px;border-radius:50%;border:1.6px solid #16715C;background:#16715C;flex-shrink:0;display:flex;align-items:center;justify-content:center}
  .pd-cb svg{width:10px;height:10px}
  .pd-task{position:relative;z-index:1;font-size:14px;color:#161B18;font-weight:500}
  .pd-meta{position:relative;z-index:1;margin-left:auto;font-family:var(--mono);font-size:9.5px;color:#A4A89F}
  @media (prefers-reduced-motion: no-preference){
    .pd-fill{animation:pdBar 9s ease-in-out infinite}
    .b-prog{animation:pdProg 9s steps(1) infinite}.b-done{animation:pdDone 9s steps(1) infinite}
    .pd-pct .p0{animation:pA 9s steps(1) infinite}.pd-pct .p25{animation:pB 9s steps(1) infinite}.pd-pct .p50{animation:pC 9s steps(1) infinite}.pd-pct .p75{animation:pD 9s steps(1) infinite}.pd-pct .p100{animation:pE 9s steps(1) infinite}
    .pd-belt{animation:pdBelt .9s linear infinite}.pd-live i{animation:pdBlink 1.5s steps(1) infinite}
    .heat{animation:heat 1.3s ease-in-out infinite}.heat.h2{animation-delay:.25s}.heat.h3{animation-delay:.5s}
    .sens{animation:pdBlink 1.1s steps(1) infinite}.sens.s2{animation-delay:.4s}
    .prod{animation:prodMove 4.5s linear infinite}.prod.p2{animation-delay:-2.25s}
    .prodbox{animation:prodColor 4.5s linear infinite}.prodbox.p2{animation-delay:-2.25s}
    .vapor{animation:prodVapor 4.5s linear infinite}.vapor.p2{animation-delay:-2.25s}
    .cb1{animation:box1 9s steps(1) infinite}.ck1{animation:ck1 9s steps(1) infinite}.hl1{animation:hl1 9s ease infinite}
    .cb2{animation:box2 9s steps(1) infinite}.ck2{animation:ck2 9s steps(1) infinite}.hl2{animation:hl2 9s ease infinite}
    .cb3{animation:box3 9s steps(1) infinite}.ck3{animation:ck3 9s steps(1) infinite}.hl3{animation:hl3 9s ease infinite}
    .cb4{animation:box4 9s steps(1) infinite}.ck4{animation:ck4 9s steps(1) infinite}.hl4{animation:hl4 9s ease infinite}
  }
  @keyframes pdBar{0%,2%{width:4%}20%{width:24%}24%{width:25%}44%{width:49%}48%{width:50%}68%{width:74%}72%{width:75%}89%{width:100%}98%{width:100%}100%{width:4%}}
  @keyframes pdProg{0%,88%{opacity:1}90%,98%{opacity:0}100%{opacity:1}}
  @keyframes pdDone{0%,88%{opacity:0}90%,98%{opacity:1}100%{opacity:0}}
  @keyframes pA{0%,19%{opacity:1}20%,100%{opacity:0}}@keyframes pB{0%,23%{opacity:0}24%,43%{opacity:1}44%,100%{opacity:0}}@keyframes pC{0%,47%{opacity:0}48%,67%{opacity:1}68%,100%{opacity:0}}@keyframes pD{0%,71%{opacity:0}72%,88%{opacity:1}89%,100%{opacity:0}}@keyframes pE{0%,88%{opacity:0}89%,98%{opacity:1}99%,100%{opacity:0}}
  @keyframes pdBelt{to{stroke-dashoffset:-24}}
  @keyframes pdBlink{0%,60%{opacity:1}61%,100%{opacity:.25}}
  @keyframes heat{0%,100%{opacity:.45}50%{opacity:1}}
  @keyframes prodMove{0%{transform:translateX(0)}100%{transform:translateX(452px)}}
  @keyframes prodColor{0%,26%{fill:#7FB8D8}32%{fill:#8FB49C}48%{fill:#C79E67}70%,100%{fill:#DC8534}}
  @keyframes prodVapor{0%,30%{opacity:0}42%,64%{opacity:.85}72%,100%{opacity:0}}
  @keyframes box1{0%,3%{border-color:#C7C4BA;background:#fff}6%,20%{border-color:#DC8534;background:#F8E7D2}22%,98%{border-color:#16715C;background:#16715C}100%{border-color:#C7C4BA;background:#fff}}
  @keyframes ck1{0%,20%{opacity:0}23%,98%{opacity:1}100%{opacity:0}}@keyframes hl1{0%,3%{opacity:0}7%,19%{opacity:1}23%,100%{opacity:0}}
  @keyframes box2{0%,26%{border-color:#C7C4BA;background:#fff}29%,44%{border-color:#DC8534;background:#F8E7D2}46%,98%{border-color:#16715C;background:#16715C}100%{border-color:#C7C4BA;background:#fff}}
  @keyframes ck2{0%,44%{opacity:0}47%,98%{opacity:1}100%{opacity:0}}@keyframes hl2{0%,26%{opacity:0}30%,43%{opacity:1}47%,100%{opacity:0}}
  @keyframes box3{0%,50%{border-color:#C7C4BA;background:#fff}53%,68%{border-color:#DC8534;background:#F8E7D2}70%,98%{border-color:#16715C;background:#16715C}100%{border-color:#C7C4BA;background:#fff}}
  @keyframes ck3{0%,68%{opacity:0}71%,98%{opacity:1}100%{opacity:0}}@keyframes hl3{0%,50%{opacity:0}54%,67%{opacity:1}71%,100%{opacity:0}}
  @keyframes box4{0%,74%{border-color:#C7C4BA;background:#fff}77%,89%{border-color:#DC8534;background:#F8E7D2}91%,98%{border-color:#16715C;background:#16715C}100%{border-color:#C7C4BA;background:#fff}}
  @keyframes ck4{0%,89%{opacity:0}92%,98%{opacity:1}100%{opacity:0}}@keyframes hl4{0%,74%{opacity:0}78%,88%{opacity:1}92%,100%{opacity:0}}

  /* ===== Animación de diagnóstico de fallas (inicio) ===== */
  .ck-status{position:relative;height:40px;margin-top:14px;border-radius:10px;background:#F3F1EA;border:1px solid #E4E1D7;overflow:hidden}
  .ck-status div{position:absolute;inset:0;display:flex;align-items:center;gap:9px;padding:0 14px;font-family:var(--sans);font-size:12.5px;font-weight:500;opacity:0}
  .ck-status .cs1{opacity:1}
  .ck-status .dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
  .cs1{color:#0C463A}.cs1 .dot{background:#16715C}
  .cs2{color:#B0322B}.cs2 .dot{background:#E24B4A}
  .cs3{color:#B0322B}.cs3 .dot{background:#E24B4A}
  .cs4{color:#9A5716}.cs4 .dot{background:#DC8534}
  .cs5{color:#B0322B}.cs5 .dot{background:#E24B4A}
  .cs6{color:#0C463A}.cs6 .dot{background:#16715C}
  @media (prefers-reduced-motion: no-preference){
    .view.active .ckflow{animation:ckFlowMove 1s linear infinite, ckFlowOn 14s steps(1) infinite}
    .view.active .ckbelt{animation:ckBeltMove 14s linear infinite}
    .view.active .ckbrkon{animation:ckBrkOn 14s steps(1) infinite}.view.active .ckbrkoff{animation:ckBrkOff 14s steps(1) infinite}
    .view.active .ckspark{animation:ckSpark 14s ease-out infinite}
    .view.active .ckc3{animation:ckC3 14s steps(1) infinite}
    .view.active .ckprod{animation:ckProd 14s ease-in-out infinite}
    .view.active .ckled-ab{animation:ckLedAB 14s steps(1) infinite}.view.active .ckled3{animation:ckLed3 14s steps(1) infinite}
    .view.active .ckm-ab .mbody{animation:ckMbodyAB 14s steps(1) infinite}.view.active .ckm3 .mbody{animation:ckMbody3 14s steps(1) infinite}
    .view.active .ckdisp-norm{animation:ckDnorm 14s steps(1) infinite}.view.active .ckdisp-fault{animation:ckDfault 14s steps(1) infinite}
    .view.active .ckscan1{animation:ckScan1 14s steps(1) infinite}.view.active .ckscan2{animation:ckScan2 14s steps(1) infinite}.view.active .ckscan3{animation:ckScan3 14s steps(1) infinite}
    .view.active .ckmk3{animation:ckMk3 14s steps(1) infinite}.view.active .ckfault{animation:ckFaultLbl 14s steps(1) infinite}
    .view.active .cs1{animation:cka 14s steps(1) infinite}.view.active .cs2{animation:ckb 14s steps(1) infinite}.view.active .cs3{animation:ckc 14s steps(1) infinite}.view.active .cs4{animation:ckd 14s steps(1) infinite}.view.active .cs5{animation:cke 14s steps(1) infinite}.view.active .cs6{animation:ckf 14s steps(1) infinite}
  }
  @keyframes ckFlowMove{to{stroke-dashoffset:-12}}
  @keyframes ckFlowOn{0%,17%{opacity:1}18%,75%{opacity:0}76%,100%{opacity:1}}
  @keyframes ckBeltMove{0%{stroke-dashoffset:0}17%{stroke-dashoffset:-40}18%,75%{stroke-dashoffset:-40}100%{stroke-dashoffset:-90}}
  @keyframes ckBrkOn{0%,17%{opacity:1}18%,75%{opacity:0}76%,100%{opacity:1}}
  @keyframes ckBrkOff{0%,17%{opacity:0}18%,75%{opacity:1}76%,100%{opacity:0}}
  @keyframes ckSpark{0%,17%{opacity:0;transform:scale(.4)}19%{opacity:1;transform:scale(1.15)}22%{opacity:1;transform:scale(.9)}25%{opacity:1;transform:scale(1.05)}29%,100%{opacity:0;transform:scale(.5)}}
  @keyframes ckC3{0%,17%{stroke:#16715C}18%,74%{stroke:#E24B4A}76%,100%{stroke:#16715C}}
  @keyframes ckProd{0%{transform:translateX(0);opacity:0}4%{opacity:1}17%{transform:translateX(58px)}75%{transform:translateX(58px);opacity:1}95%{transform:translateX(116px);opacity:1}100%{transform:translateX(116px);opacity:0}}
  @keyframes ckLedAB{0%,17%{fill:#16715C}18%,75%{fill:#B4B2A9}76%,100%{fill:#16715C}}
  @keyframes ckLed3{0%,17%{fill:#16715C}18%,74%{fill:#E24B4A}76%,100%{fill:#16715C}}
  @keyframes ckMbodyAB{0%,17%{fill:#EAF3EF;stroke:#16715C}18%,75%{fill:#EEEBE3;stroke:#C7C4BA}76%,100%{fill:#EAF3EF;stroke:#16715C}}
  @keyframes ckMbody3{0%,17%{fill:#EAF3EF;stroke:#16715C}18%,74%{fill:#F7DAD6;stroke:#E24B4A}76%,100%{fill:#EAF3EF;stroke:#16715C}}
  @keyframes ckDnorm{0%,17%{opacity:1}18%,75%{opacity:.25}76%,100%{opacity:1}}
  @keyframes ckDfault{0%,19%{opacity:0}21%,74%{opacity:1}76%,100%{opacity:0}}
  @keyframes ckScan1{0%,37%{opacity:0}39%,45%{opacity:1}47%,100%{opacity:0}}
  @keyframes ckScan2{0%,46%{opacity:0}48%,53%{opacity:1}55%,100%{opacity:0}}
  @keyframes ckScan3{0%,54%{opacity:0}56%,62%{opacity:1}64%,100%{opacity:0}}
  @keyframes ckMk3{0%,61%{opacity:0}63%,74%{opacity:1}76%,100%{opacity:0}}
  @keyframes ckFaultLbl{0%,61%{opacity:0}63%,74%{opacity:1}76%,100%{opacity:0}}
  @keyframes cka{0%,16%{opacity:1}18%,100%{opacity:0}}
  @keyframes ckb{0%,17%{opacity:0}19%,26%{opacity:1}28%,100%{opacity:0}}
  @keyframes ckc{0%,28%{opacity:0}30%,36%{opacity:1}38%,100%{opacity:0}}
  @keyframes ckd{0%,37%{opacity:0}39%,60%{opacity:1}62%,100%{opacity:0}}
  @keyframes cke{0%,61%{opacity:0}63%,74%{opacity:1}76%,100%{opacity:0}}
  @keyframes ckf{0%,75%{opacity:0}77%,100%{opacity:1}}

  /* ===== Carrusel de fotos por sección ===== */
  .carsec{padding-top:6px}
  .carhead{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:18px}
  .carhead h3{font-family:var(--disp);font-size:22px;color:var(--ink);letter-spacing:-.01em}
  .carhint{font-family:var(--mono);font-size:11px;color:var(--muted);white-space:nowrap}
  .carousel{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;-webkit-overflow-scrolling:touch}
  .carousel::-webkit-scrollbar{height:8px}
  .carousel::-webkit-scrollbar-track{background:transparent}
  .carousel::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
  .cslide{flex:0 0 auto;height:min(440px,64vh);scroll-snap-align:start;border-radius:14px;overflow:hidden;background:var(--bg2);border:1px solid var(--line);position:relative;margin:0}
  .cslide img{height:100%;width:auto;object-fit:cover;display:block}
  .cslide figcaption{position:absolute;left:0;right:0;bottom:0;padding:20px 14px 11px;font-family:var(--mono);font-size:10.5px;color:#fff;background:linear-gradient(transparent,rgba(12,40,34,.72))}
  .cslide.chart{flex:0 0 min(600px,86vw);height:min(440px,64vh)}
  .cslide.chart img{width:100%;height:100%;object-fit:contain;background:#fff}
  .cslide.ph{width:330px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;border:1.5px dashed var(--faint);background:var(--paper)}
  .cslide.ph svg{color:var(--faint)}
  .cslide.ph span{font-family:var(--mono);font-size:11.5px;color:var(--muted);text-align:center;padding:0 18px;letter-spacing:.03em}

  /* ===== Bloque de servicio urgente (WhatsApp) ===== */
  .urgent{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:32px 36px;margin-bottom:28px}
  .urgent .ueye{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-deep);margin-bottom:8px}
  .urgent h2{font-family:var(--disp);font-size:26px;color:var(--ink);letter-spacing:-.015em;margin-bottom:6px}
  .urgent p{color:var(--ink2);max-width:46ch}
  .btn.wa{background:#1FA855;color:#fff;border-color:#1FA855;display:inline-flex;align-items:center;gap:9px}
  .btn.wa:hover{background:#178F47;border-color:#178F47}
  @media (max-width:700px){ .urgent{padding:26px 22px} .urgent h2{font-size:22px} }

  /* ===== Animación de ingeniería eléctrica (unifilar + cuadro de carga) ===== */
  .el-status{position:relative;height:38px;margin-top:14px;border-radius:10px;background:#F3F1EA;border:1px solid #E4E1D7;overflow:hidden}
  .el-status div{position:absolute;inset:0;display:flex;align-items:center;gap:9px;padding:0 14px;font-family:var(--sans);font-size:12.5px;font-weight:500;opacity:0;color:#2C3A34}
  .el-status .es1{opacity:1}
  .el-status .dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;background:#16715C}
  .el-status .es4{color:#0C463A}
  .elchk,.elseal{transform-box:fill-box;transform-origin:center}
  @media (prefers-reduced-motion: no-preference){
    .view.active .elu1{animation:elu1 8s ease-out infinite}.view.active .elu2{animation:elu2 8s ease-out infinite}.view.active .elu3{animation:elu3 8s ease-out infinite}.view.active .elu4{animation:elu4 8s ease-out infinite}
    .view.active .elc1{animation:elc1 8s ease-out infinite}.view.active .elc2{animation:elc2 8s ease-out infinite}.view.active .elc3{animation:elc3 8s ease-out infinite}
    .view.active .elr1{animation:elr1 8s ease-out infinite}.view.active .elr2{animation:elr2 8s ease-out infinite}.view.active .elr3{animation:elr3 8s ease-out infinite}.view.active .elrt{animation:elrt 8s ease-out infinite}
    .view.active .elseal{animation:elseal 8s ease-out infinite}
    .view.active .el-status .es1{animation:esa 8s steps(1) infinite}.view.active .el-status .es2{animation:esb 8s steps(1) infinite}.view.active .el-status .es3{animation:esc 8s steps(1) infinite}.view.active .el-status .es4{animation:esd 8s steps(1) infinite}
  }
  @keyframes elu1{0%,2%{opacity:0}8%{opacity:1}93%{opacity:1}99%,100%{opacity:0}}
  @keyframes elu2{0%,9%{opacity:0}15%{opacity:1}93%{opacity:1}99%,100%{opacity:0}}
  @keyframes elu3{0%,16%{opacity:0}22%{opacity:1}93%{opacity:1}99%,100%{opacity:0}}
  @keyframes elu4{0%,23%{opacity:0}31%{opacity:1}93%{opacity:1}99%,100%{opacity:0}}
  @keyframes elc1{0%,38%{opacity:0;transform:scale(.3)}43%{opacity:1;transform:scale(1)}93%{opacity:1;transform:scale(1)}99%,100%{opacity:0}}
  @keyframes elc2{0%,43%{opacity:0;transform:scale(.3)}48%{opacity:1;transform:scale(1)}93%{opacity:1;transform:scale(1)}99%,100%{opacity:0}}
  @keyframes elc3{0%,48%{opacity:0;transform:scale(.3)}53%{opacity:1;transform:scale(1)}93%{opacity:1;transform:scale(1)}99%,100%{opacity:0}}
  @keyframes elr1{0%,52%{opacity:0}57%{opacity:1}93%{opacity:1}99%,100%{opacity:0}}
  @keyframes elr2{0%,57%{opacity:0}62%{opacity:1}93%{opacity:1}99%,100%{opacity:0}}
  @keyframes elr3{0%,62%{opacity:0}67%{opacity:1}93%{opacity:1}99%,100%{opacity:0}}
  @keyframes elrt{0%,68%{opacity:0}73%{opacity:1}93%{opacity:1}99%,100%{opacity:0}}
  @keyframes elseal{0%,76%{opacity:0;transform:scale(.5)}82%{opacity:1;transform:scale(1)}86%{transform:scale(.97)}88%{transform:scale(1)}93%{opacity:1}99%,100%{opacity:0}}
  @keyframes esa{0%,31%{opacity:1}33%,100%{opacity:0}}
  @keyframes esb{0%,33%{opacity:0}35%,51%{opacity:1}53%,100%{opacity:0}}
  @keyframes esc{0%,53%{opacity:0}55%,71%{opacity:1}73%,100%{opacity:0}}
  @keyframes esd{0%,73%{opacity:0}75%,100%{opacity:1}}

  /* ===== Animación de diagnóstico (checklist · caso residencial) ===== */
  .dg-list{display:flex;flex-direction:column;gap:2px;margin-top:16px}
  .dg-item{position:relative;display:flex;align-items:center;gap:11px;padding:7px 10px;border-radius:8px;overflow:hidden}
  .dg-hl{position:absolute;inset:0;background:#EAF3EF;opacity:0;z-index:0}
  .dg-cb{position:relative;z-index:1;width:20px;height:20px;border-radius:50%;border:1.7px solid #C7C4BA;background:#fff;flex-shrink:0;display:flex;align-items:center;justify-content:center}
  .dg-cb svg{width:11px;height:11px}
  .dg-tk{opacity:0}
  .dg-task{position:relative;z-index:1;font-size:14px;color:#161B18;font-weight:500}
  .dg-n{position:relative;z-index:1;margin-left:auto;font-family:var(--mono);font-size:10px;color:#A4A89F}
  @media (prefers-reduced-motion: no-preference){
    .view.active .dgcable2{animation:dgCable2 10s steps(1) infinite}
    .view.active .dgfault{animation:dgFault 10s steps(1) infinite}
    .view.active .dgcontact{animation:dgContact 10s steps(1) infinite}
    .view.active .dgled{animation:dgLed 10s steps(1) infinite}
    .view.active .dgmeter{animation:dgMeter 10s ease-in-out infinite}
    .view.active .dgv220{animation:dgV220 10s steps(1) infinite}.view.active .dgv0{animation:dgV0 10s steps(1) infinite}
    .view.active .dgcause{animation:dgCause 10s steps(1) infinite}
    .view.active .dgb1{animation:dgBox1 10s steps(1) infinite}.view.active .dgt1{animation:dgTk1 10s steps(1) infinite}.view.active .dgh1{animation:dgHl1 10s ease infinite}
    .view.active .dgb2{animation:dgBox2 10s steps(1) infinite}.view.active .dgt2{animation:dgTk2 10s steps(1) infinite}.view.active .dgh2{animation:dgHl2 10s ease infinite}
    .view.active .dgb3{animation:dgBox3 10s steps(1) infinite}.view.active .dgt3{animation:dgTk3 10s steps(1) infinite}.view.active .dgh3{animation:dgHl3 10s ease infinite}
    .view.active .dgb4{animation:dgBox4 10s steps(1) infinite}.view.active .dgt4{animation:dgTk4 10s steps(1) infinite}.view.active .dgh4{animation:dgHl4 10s ease infinite}
    .view.active .dgb5{animation:dgBox5 10s steps(1) infinite}.view.active .dgt5{animation:dgTk5 10s steps(1) infinite}.view.active .dgh5{animation:dgHl5 10s ease infinite}
  }
  @keyframes dgCable2{0%,80%{stroke:#C7C4BA}82%,100%{stroke:#16715C}}
  @keyframes dgFault{0%,80%{fill:#F7DAD6;stroke:#E24B4A}82%,100%{fill:#EAF3EF;stroke:#16715C}}
  @keyframes dgContact{0%,82%{fill:#EDEBE4;stroke:#B4B2A9}84%,100%{fill:#EAF3EF;stroke:#16715C}}
  @keyframes dgLed{0%,82%{fill:#C7C4BA}84%,100%{fill:#16715C}}
  @keyframes dgMeter{0%,17%{opacity:0;transform:translateX(0)}21%{opacity:1;transform:translateX(0)}39%{opacity:1;transform:translateX(0)}56%{transform:translateX(116px)}77%{opacity:1;transform:translateX(116px)}82%{opacity:0;transform:translateX(116px)}100%{opacity:0}}
  @keyframes dgV220{0%,20%{opacity:0}22%,39%{opacity:1}41%,100%{opacity:0}}
  @keyframes dgV0{0%,56%{opacity:0}58%,78%{opacity:1}80%,100%{opacity:0}}
  @keyframes dgCause{0%,59%{opacity:0}62%,79%{opacity:1}81%,100%{opacity:0}}
  @keyframes dgBox1{0%,14%{border-color:#C7C4BA;background:#fff}16%,100%{border-color:#16715C;background:#16715C}}
  @keyframes dgTk1{0%,15%{opacity:0}17%,100%{opacity:1}}
  @keyframes dgHl1{0%,2%{opacity:0}5%,14%{opacity:1}17%,100%{opacity:0}}
  @keyframes dgBox2{0%,34%{border-color:#C7C4BA;background:#fff}36%,100%{border-color:#16715C;background:#16715C}}
  @keyframes dgTk2{0%,35%{opacity:0}37%,100%{opacity:1}}
  @keyframes dgHl2{0%,18%{opacity:0}21%,34%{opacity:1}37%,100%{opacity:0}}
  @keyframes dgBox3{0%,54%{border-color:#C7C4BA;background:#fff}56%,100%{border-color:#16715C;background:#16715C}}
  @keyframes dgTk3{0%,55%{opacity:0}57%,100%{opacity:1}}
  @keyframes dgHl3{0%,38%{opacity:0}41%,54%{opacity:1}57%,100%{opacity:0}}
  @keyframes dgBox4{0%,72%{border-color:#C7C4BA;background:#fff}74%,100%{border-color:#16715C;background:#16715C}}
  @keyframes dgTk4{0%,73%{opacity:0}75%,100%{opacity:1}}
  @keyframes dgHl4{0%,58%{opacity:0}61%,72%{opacity:1}75%,100%{opacity:0}}
  @keyframes dgBox5{0%,92%{border-color:#C7C4BA;background:#fff}94%,100%{border-color:#16715C;background:#16715C}}
  @keyframes dgTk5{0%,93%{opacity:0}95%,100%{opacity:1}}
  @keyframes dgHl5{0%,76%{opacity:0}79%,92%{opacity:1}95%,100%{opacity:0}}

/* ============================================================
   ENERGÍA · animación 1 — demanda / factor de potencia
   ============================================================ */
.en-alert{display:flex;align-items:center;gap:10px;margin-top:12px;padding:10px 13px;border-radius:10px;background:#FDF4F2;border:1px solid #F0CDC8;opacity:0}
.en-alert svg{width:20px;height:20px;flex:0 0 auto;position:static}
.en-alert span{font-size:12px;color:#8A2820;line-height:1.35}
.en-alert b{color:#B0322B}
.en-kpis{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.en-kpi{border:1px solid #E4E1D7;border-radius:10px;padding:9px 12px;background:#fff;display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.en-kpi.warn{border-color:#F0CDC8;background:#FDF4F2}
.en-l{font-family:var(--mono);font-size:9px;color:#787C75}
.en-v{font-family:var(--mono);font-size:16px;font-weight:700;color:#161B18;white-space:nowrap}
.en-u{font-size:9.5px;font-weight:500;opacity:.7}

/* ============================================================
   ENERGÍA · animación 2 — eficiencia / horarios CFE / solar
   ============================================================ */
.ef-legend{display:flex;gap:14px;margin-top:6px;flex-wrap:wrap}
.ef-lg{display:flex;align-items:center;gap:5px;font-family:var(--mono);font-size:8.5px;color:#787C75}
.ef-lg i{width:9px;height:9px;border-radius:2px;display:inline-block}
.ef-status{position:relative;height:38px;margin-top:12px;border-radius:10px;background:#F3F1EA;border:1px solid #E4E1D7;overflow:hidden}
.ef-status div{position:absolute;inset:0;display:flex;align-items:center;gap:9px;padding:0 14px;font-size:12px;font-weight:500;opacity:0}
.ef-status .dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.fs1{color:#B0322B}.fs1 .dot{background:#E24B4A}
.fs2{color:#9A5716}.fs2 .dot{background:#DC8534}
.fs3{color:#0C463A}.fs3 .dot{background:#16715C}

@media (prefers-reduced-motion: no-preference){
  .view.active .en-curve{stroke-dasharray:640;stroke-dashoffset:640;animation:enDraw 10s ease-in-out infinite}
  .view.active .en-area{animation:enArea 10s ease-in-out infinite}
  .view.active .en-exceed{animation:enExceed 10s ease-out infinite}
  .view.active .en-peak{animation:enPeak 10s ease-out infinite}
  .view.active .en-peaklbl{animation:enPeakLbl 10s ease-out infinite}
  .view.active .en-alert{animation:enAlert 10s ease-out infinite}
  .view.active .ef-cons{stroke-dasharray:560;stroke-dashoffset:560;animation:efDraw 11s ease-in-out infinite}
  .view.active .ef-punta{animation:efPunta 11s steps(1) infinite}
  .view.active .ef-solar{animation:efSolar 11s ease-out infinite}
  .view.active .ef-solarline{animation:efSolar 11s ease-out infinite}
  .view.active .ef-save{animation:efSave 11s ease-out infinite}
  .view.active .fs1{animation:fsa 11s steps(1) infinite}
  .view.active .fs2{animation:fsb 11s steps(1) infinite}
  .view.active .fs3{animation:fsc 11s steps(1) infinite}
}
@keyframes enDraw{0%{stroke-dashoffset:640}42%,100%{stroke-dashoffset:0}}
@keyframes enArea{0%,40%{opacity:0}54%,100%{opacity:1}}
@keyframes enExceed{0%,43%{opacity:0}52%,86%{opacity:1}90%{opacity:.4}94%,100%{opacity:1}}
@keyframes enPeak{0%,42%{opacity:0;r:0}49%{opacity:1;r:6}54%{r:4.5}100%{opacity:1;r:4.5}}
@keyframes enPeakLbl{0%,46%{opacity:0}54%,100%{opacity:1}}
@keyframes enAlert{0%,58%{opacity:0}66%,100%{opacity:1}}
@keyframes efDraw{0%{stroke-dashoffset:560}30%,100%{stroke-dashoffset:0}}
@keyframes efPunta{0%,14%{opacity:0}18%,100%{opacity:1}}
@keyframes efSolar{0%,36%{opacity:0}55%,100%{opacity:1}}
@keyframes efSave{0%,66%{opacity:0}76%,100%{opacity:1}}
@keyframes fsa{0%,31%{opacity:1}33%,100%{opacity:0}}
@keyframes fsb{0%,33%{opacity:0}35%,64%{opacity:1}66%,100%{opacity:0}}
@keyframes fsc{0%,65%{opacity:0}67%,100%{opacity:1}}

/* Estado final visible cuando el usuario prefiere menos movimiento */
@media (prefers-reduced-motion:reduce){
  .en-alert,.en-area,.en-exceed,.en-peak,.en-peaklbl{opacity:1}
  .ef-punta,.ef-solar,.ef-solarline,.ef-save{opacity:1}
  .ef-status .fs3{opacity:1}
}

/* ============================================================
   ELÉCTRICOS · Mantenimiento preventivo
   ============================================================ */
.maint-head{max-width:720px;margin-bottom:34px}
.maint-head .num{font-family:var(--mono);font-size:13px;color:var(--accent);letter-spacing:.1em}
.maint-head h3{font-family:var(--disp);font-weight:700;font-size:clamp(24px,3.2vw,36px);line-height:1.06;letter-spacing:-.02em;color:var(--ink);margin:12px 0 14px}
.maint-head p{color:var(--ink2);font-size:17px;line-height:1.6;max-width:62ch}
.mlist{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.mlist li{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:18px}
.mlist li .lk{font-family:var(--mono);font-size:10px;color:var(--accent);display:block;margin-bottom:9px;letter-spacing:.06em}
.mlist li strong{display:block;font-size:15px;font-weight:650;color:var(--ink);line-height:1.32;margin-bottom:7px}
.mlist li .mp{display:block;font-size:13px;color:var(--ink2);line-height:1.48}
@media (max-width:900px){.mlist{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.mlist{grid-template-columns:1fr}}

/* ============================================================
   HERO · Panel de operación (3 módulos)
   ============================================================ */
.op{background:#FCFBF8;border:1px solid #DEDBD2;border-radius:20px;padding:18px 18px 8px;box-shadow:0 30px 70px -34px rgba(20,25,27,.34)}
.op-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:14px;border-bottom:1px solid #EDEAE1;margin-bottom:4px}
.op-brand{font-family:var(--disp);font-weight:700;font-size:14px;color:var(--ink);letter-spacing:-.01em}
.op-brand span{color:var(--muted);font-weight:500;font-size:11px;font-family:var(--mono);letter-spacing:.04em;margin-left:8px}
.op-live{font-family:var(--mono);font-size:9.5px;color:var(--primary);display:inline-flex;align-items:center;gap:6px}
.op-live i{width:7px;height:7px;border-radius:50%;background:var(--primary);display:inline-block}
.op-mod{padding:15px 2px 14px;border-bottom:1px solid #EDEAE1}
.op-mod:last-child{border-bottom:none}
.op-mtop{display:flex;align-items:center;gap:10px;margin-bottom:11px}
.op-ic{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.op-ic svg{width:17px;height:17px;position:static}
.op-nm{font-family:var(--disp);font-weight:700;font-size:13.5px;letter-spacing:.01em;color:var(--ink)}
.op-st{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;padding:4px 9px;border-radius:20px}
.op-st i{width:6px;height:6px;border-radius:50%;display:inline-block}
.op-viz{width:100%;display:block}
.op-foot{margin-top:9px;font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.op-foot b{color:var(--ink2);font-weight:700}

@media (prefers-reduced-motion: no-preference){
  .view.active .op-live i{animation:opBlink 1.5s steps(1) infinite}
  .view.active .op-st i{animation:opPulse 1.9s ease-in-out infinite}
  .view.active .op-led{animation:opPulse 1.7s ease-in-out infinite}
  .view.active .op-led.d2{animation-delay:.4s}
  .view.active .op-led.d3{animation-delay:.8s}
  .view.active .op-eflow{animation:opFlow .9s linear infinite}
  .view.active .op-eflow.d2{animation-delay:.3s}
  .view.active .op-eflow.d3{animation-delay:.6s}
  .view.active .op-abelt{animation:opBelt .8s linear infinite}
  .view.active .op-apart{animation:opPart 3.4s linear infinite}
  .view.active .op-eline{stroke-dasharray:340;stroke-dashoffset:340;animation:opDraw 4.5s ease-in-out infinite}
  .view.active .op-epk{animation:opPk 4.5s ease-out infinite}
}
@keyframes opBlink{0%,60%{opacity:1}61%,100%{opacity:.25}}
@keyframes opPulse{0%,55%{opacity:1}56%,100%{opacity:.32}}
@keyframes opFlow{to{stroke-dashoffset:-14}}
@keyframes opBelt{to{stroke-dashoffset:-20}}
@keyframes opPart{0%{transform:translateX(0)}88%,100%{transform:translateX(320px)}}
@keyframes opDraw{0%{stroke-dashoffset:340}55%,100%{stroke-dashoffset:0}}
@keyframes opPk{0%,50%{opacity:0}60%,100%{opacity:1}}

/* ENERGÍA · franja de horarios a ancho completo (protagonismo) */
.ef-introrow{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;margin-bottom:30px}
.ef-introrow .num{font-family:var(--mono);font-size:13px;color:var(--accent);letter-spacing:.1em}
.ef-introrow h3{font-family:var(--disp);font-weight:700;font-size:clamp(26px,3.4vw,40px);line-height:1.05;letter-spacing:-.02em;color:var(--ink);margin:14px 0 0}
.ef-introrow p{color:var(--ink2);font-size:17px;line-height:1.6;margin:0 0 14px;max-width:52ch}
.ef-big{padding:26px 28px}
.ef-big .ef-legend{margin-top:12px}
.ef-big .ef-status{height:46px}
.ef-big .ef-status div{font-size:14px}
@media (max-width:900px){.ef-introrow{grid-template-columns:1fr;gap:16px}}

/* ============================================================
   MANTENIMIENTO · demo de termografía
   ============================================================ */
.maint-demo{display:grid;grid-template-columns:1.08fr .92fr;gap:44px;align-items:center;margin-bottom:40px}
.maint-demo-txt h4{font-family:var(--disp);font-weight:700;font-size:22px;color:var(--ink);margin:0 0 12px;letter-spacing:-.01em}
.maint-demo-txt p{color:var(--ink2);font-size:16px;line-height:1.6}
.tg-status{position:relative;height:40px;margin-top:12px;border-radius:10px;background:#F3F1EA;border:1px solid #E4E1D7;overflow:hidden}
.tg-status div{position:absolute;inset:0;display:flex;align-items:center;gap:9px;padding:0 14px;font-size:12px;font-weight:500;opacity:0}
.tg-status .dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.tt1{color:#2E6C97}.tt1 .dot{background:#3E8BC4}
.tt2{color:#B0322B}.tt2 .dot{background:#E24B4A}
.tt3{color:#0C463A}.tt3 .dot{background:#16715C}

@media (prefers-reduced-motion: no-preference){
  .view.active .tg-scan{animation:tgScan 8s ease-in-out infinite}
  .view.active .tg-heat{animation:tgHeat 8s ease-out infinite}
  .view.active .tg-hot{animation:tgHot 8s ease-in-out infinite}
  .view.active .tg-badge{animation:tgBadge 8s ease-out infinite}
  .view.active .tt1{animation:tta 8s steps(1) infinite}
  .view.active .tt2{animation:ttb 8s steps(1) infinite}
  .view.active .tt3{animation:ttc 8s steps(1) infinite}
}
@keyframes tgScan{0%{transform:translateX(0);opacity:0}6%{opacity:1}44%{transform:translateX(300px);opacity:1}50%,100%{transform:translateX(300px);opacity:0}}
@keyframes tgHeat{0%,8%{opacity:0}30%,100%{opacity:1}}
@keyframes tgHot{0%,30%{opacity:0}38%{opacity:1}60%{opacity:.55}72%{opacity:1}100%{opacity:1}}
@keyframes tgBadge{0%,52%{opacity:0}60%,100%{opacity:1}}
@keyframes tta{0%,30%{opacity:1}32%,100%{opacity:0}}
@keyframes ttb{0%,32%{opacity:0}34%,64%{opacity:1}66%,100%{opacity:0}}
@keyframes ttc{0%,65%{opacity:0}67%,100%{opacity:1}}

@media (prefers-reduced-motion:reduce){
  .tg-heat,.tg-hot,.tg-badge{opacity:1}
  .tg-scan{opacity:0}
  .tg-status .tt3{opacity:1}
}
@media (max-width:900px){.maint-demo{grid-template-columns:1fr;gap:26px}}