/* ============================================================
   SMARTIOTARG — home (soluciones.html) y ficha técnica, estética "Industry"
   de la carpeta de presentación: acero, Barlow Condensed, duotonos.
   Se carga DESPUÉS de site.css y solo pisa lo necesario.
   ============================================================ */

:root {
    --steel-900: #0f1a2a;
    --steel-800: #1e2a3a;
    --steel-700: #2b3b52;
    --steel-500: #6f88a6;
    --steel-300: #aebdd0;
    /* texto apagado con contraste AA: #4f6680 sobre #f2f2f2 = 5,3:1 · #9fb3cc sobre #1e2a3a = 6,8:1 */
    --muted-on-light: #4f6680;
    --muted-on-dark: #9fb3cc;
    --steel-100: #e6edf5;
    --paper:     #f2f2f2;
    --wa:        #25d366;
    --cond: 'Barlow Condensed', 'Inter', sans-serif;
}

body.home { background: var(--paper); font-family: 'Barlow', 'Inter', sans-serif; color: var(--steel-900); }
.home h1, .home h2, .home h3, .home .big { font-family: var(--cond); font-weight: 700; letter-spacing: -.5px; line-height: 1.02; }
.kicker { font-family: var(--cond); font-size: .82rem; letter-spacing: 4px; text-transform: uppercase; color: #4f6680; }
.dark .kicker { color: var(--steel-300); }

/* ---------- nav transparente sobre el hero ---------- */
.home .nav { background: transparent; border-bottom: 1px solid transparent; box-shadow: none;
             transition: background .35s, border-color .35s, backdrop-filter .35s; }
.home .nav .wordmark, .home .nav-links a, .home .nav-toggle { color: #fff; }
.home .nav .brand img { filter: brightness(0) invert(1); }
.home .nav.solid { background: rgba(15,26,42,.86); backdrop-filter: blur(10px); border-color: rgba(255,255,255,.08); }
.home .nav-cta { background: var(--wa) !important; color: #0b2e17 !important; font-weight: 700; }
@media (max-width: 1200px) { .home .nav-links.open { background: var(--steel-900); } }

/* ---------- HERO ---------- */
.gw-hero { position: relative; min-height: 100vh; min-height: 100svh; color: #fff; overflow: hidden;
           display: flex; align-items: flex-end; background: var(--steel-900); }
.gw-hero .bg { position: absolute; inset: -6% 0 0 0; background: var(--steel-900) url('img/gw-hero.jpg') 100% 30% / auto 108% no-repeat;
               will-change: transform; transform-origin: 60% 50%; }
.gw-hero::after { content: ''; position: absolute; inset: 0;
                  background: linear-gradient(90deg, #0f1a2a 0%, #0f1a2a 30%, rgba(15,26,42,.72) 46%, rgba(15,26,42,.05) 78%),
                              linear-gradient(0deg, rgba(15,26,42,.95) 0%, rgba(15,26,42,0) 38%); }
.gw-hero .inner { position: relative; z-index: 2; width: 100%; padding-bottom: 28px; }
.gw-hero h1 { font-size: clamp(4.2rem, 13vw, 10.5rem); font-weight: 800; letter-spacing: -2px; margin: 14px 0 6px; }
.gw-hero .claim { font-family: var(--cond); font-size: clamp(1.7rem, 4vw, 3rem); font-weight: 500; line-height: 1.08; max-width: 26ch; }
.gw-hero .claim b { color: var(--steel-300); font-weight: 600; }
.gw-hero .sin { margin-top: 18px; font-family: var(--cond); letter-spacing: 3px; font-size: .95rem; color: var(--steel-300); }
.gw-hero .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.btn-wa { background: var(--wa); color: #0b2e17; font-weight: 700; }
.btn-wa svg { width: 20px; height: 20px; fill: currentColor; display: inline-block; vertical-align: -4px; margin-right: 8px; }
.gw-stats { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 56px;
            border-top: 1px solid rgba(255,255,255,.14); }
.gw-stats > div { padding: 20px 0 6px; }
.gw-stats .n { font-family: var(--cond); font-size: clamp(2rem, 4.6vw, 3.1rem); font-weight: 700; line-height: 1; }
.gw-stats .l { font-family: var(--cond); letter-spacing: 3px; font-size: .75rem; color: var(--steel-300); margin-top: 6px; text-transform: uppercase; }
.scroll-hint { position: absolute; z-index: 3; left: 50%; bottom: 14px; width: 22px; height: 36px; margin-left: -11px;
               border: 2px solid rgba(255,255,255,.45); border-radius: 12px; }
.scroll-hint::after { content: ''; position: absolute; left: 50%; top: 7px; width: 4px; height: 7px; margin-left: -2px;
                      background: #fff; border-radius: 2px; animation: hint 1.8s infinite; }
@keyframes hint { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(12px); } }

/* ---------- secciones ---------- */
.sec { padding: 120px 0; position: relative; }
.sec h2 { font-size: clamp(2.4rem, 5.6vw, 4.4rem); max-width: 17ch; margin-top: 14px; }
.sec .sub { font-size: 1.15rem; color: #4b5563; max-width: 54ch; margin-top: 18px; }
.dark { background: var(--steel-900); color: #fff; }
.dark .sub, .steel .sub { color: var(--steel-300); }
.dark .kicker, .steel .kicker { color: var(--steel-300); }
.steel { background: var(--steel-800); color: #fff; }

/* problema: frase gigante + tres golpes */
.probs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 64px; background: #d6dbe2; border: 1px solid #d6dbe2; }
.probs > div { background: var(--paper); padding: 34px 28px 38px; }
.probs .k { font-family: var(--cond); letter-spacing: 3px; font-size: .78rem; color: #4f6680; }   /* contraste sobre fondo claro */
.probs p { font-family: var(--cond); font-size: 1.55rem; line-height: 1.15; margin-top: 12px; font-weight: 600; }
.band-img { height: 46vh; min-height: 280px; background: url('img/gw-planta.jpg') center 38% / cover; }

/* ---------- historia de una alarma: celular fijo + pasos ---------- */
.story { display: grid; grid-template-columns: minmax(300px, 400px) 1fr; gap: 72px; align-items: start; margin-top: 60px; }
.phone-col { position: sticky; top: 96px; }
.phone { height: min(720px, calc(100vh - 150px)); max-width: 100%; aspect-ratio: 9 / 18.5; margin: 0 auto; border-radius: 42px; padding: 12px;
         background: #0a0f18; box-shadow: 0 40px 80px -30px rgba(0,0,0,.7), inset 0 0 0 2px #2b3b52; }
.screen { position: relative; height: 100%; border-radius: 32px; overflow: hidden; display: flex; flex-direction: column;
          background: #0b141a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='2' cy='2' r='1' fill='%23ffffff' fill-opacity='.04'/%3E%3C/svg%3E"); }
.wa-top { display: flex; align-items: center; gap: 10px; padding: 34px 14px 10px; background: #1f2c34; color: #e9edef; }
.wa-top .av { width: 34px; height: 34px; border-radius: 50%; background: var(--steel-100) url('icon-smartiotarg.svg') center / 70% no-repeat; }
.wa-top b { display: block; font-size: .92rem; font-family: 'Inter', sans-serif; }
.wa-top small { font-size: .72rem; color: #8696a0; font-family: 'Inter', sans-serif; }
.chat { flex: 1; padding: 12px 10px; display: flex; flex-direction: column; justify-content: flex-end; gap: 7px; overflow: hidden;
        font-family: 'Inter', sans-serif; font-size: .78rem; line-height: 1.38; }
.day { align-self: center; background: #182229; color: #8696a0; font-size: .68rem; padding: 3px 9px; border-radius: 7px; }
.msg { max-width: 86%; padding: 7px 9px 16px; border-radius: 9px; position: relative; color: #e9edef; white-space: pre-line; }
.msg.in  { background: #202c33; align-self: flex-start; border-top-left-radius: 2px; }
.msg.out { background: #005c4b; align-self: flex-end; border-top-right-radius: 2px; }
.msg .t { position: absolute; right: 8px; bottom: 3px; font-size: .62rem; color: #8696a0; }
.msg.out .t { color: #9fd4c6; }
.msg .t i { font-style: normal; color: #53bdeb; margin-left: 3px; }
.chat > * { transition: opacity .5s, transform .5s; }
.js .chat > .off, .js .story .off { opacity: 0; transform: translateY(14px) scale(.98); }
.js .chat > .gone, .js .story .gone { display: none; }
.story [data-paso] { transition: opacity .5s, transform .5s; }
.steps { display: flex; flex-direction: column; }
.step { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; opacity: .7; transition: opacity .4s; }   /* .28 dejaba el texto inactivo con contraste 1,9 */
.step.on { opacity: 1; }
.step .k { font-family: var(--cond); letter-spacing: 4px; color: var(--steel-300); font-size: .85rem; }
.step h3 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); margin-top: 8px; }
.step p { color: var(--steel-300); font-size: 1.12rem; max-width: 40ch; margin-top: 12px; }
.step .dato { margin-top: 18px; font-family: var(--cond); font-size: 1.05rem; letter-spacing: 1px; color: #fff; }
.step .dato b { font-size: 2.2rem; display: block; line-height: 1; color: var(--wa); }
.story-note { margin-top: 18px; text-align: center; font-size: .78rem; color: var(--steel-500); }

/* ---------- datos reales ---------- */
.charts { display: grid; grid-template-columns: 1.35fr 1fr; gap: 22px; margin-top: 60px; }
.card { background: var(--steel-800); border: 1px solid rgba(255,255,255,.07); border-radius: 18px; padding: 28px 28px 24px; }
.card h3 { font-size: 1.6rem; }
.card .meta { font-family: var(--cond); letter-spacing: 3px; font-size: .74rem; color: var(--muted-on-dark); text-transform: uppercase; }
.card .hl { font-family: var(--cond); font-size: 3.4rem; font-weight: 700; line-height: 1; margin-top: 14px; }
.card .hl small { font-size: 1.1rem; color: var(--steel-300); font-weight: 500; margin-left: 6px; }
.card.wide { grid-column: 1 / -1; }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 220px; margin-top: 22px; }
.bars .b { flex: 1; position: relative; height: 100%; display: flex; align-items: flex-end; }
.bars .b span { width: 100%; background: linear-gradient(180deg, #8fb3dd, #3d6fa8); border-radius: 5px 5px 2px 2px;
                height: 0; transition: height 1.1s cubic-bezier(.2,.8,.2,1); }
.bars .b em { position: absolute; bottom: -22px; left: 0; right: 0; text-align: center; font-style: normal; font-size: .68rem; color: var(--steel-500); }
.bars .b:hover span { background: linear-gradient(180deg, #cfe0f4, #5d8fca); }
.bars .b .tip { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--h) + 6px); font-size: .72rem;
                color: #fff; font-family: var(--cond); opacity: 0; transition: opacity .2s; white-space: nowrap; }
.bars .b:hover .tip { opacity: 1; }
.grid24 { display: grid; grid-auto-flow: column; grid-template-rows: repeat(24, 6px); grid-template-columns: repeat(26, 1fr); gap: 2px 3px; margin-top: 22px; }
.grid24 i { border-radius: 1px; background: #2b3b52; transition: background .25s; }
.grid24 i.ok { background: #3d6fa8; }
.grid24 i.ok.lit { background: #7fb0e6; }
.grid-axis { display: flex; justify-content: space-between; font-size: .68rem; color: var(--muted-on-dark); margin-top: 8px; }
.tl { position: relative; margin-top: 26px; padding-left: 26px; }
.tl::before { content: ''; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: #2b3b52; }
.tl .ev { position: relative; padding: 0 0 20px; }
.js .tl .ev { opacity: 0; transform: translateX(-10px); transition: opacity .5s, transform .5s; }
.tl .ev.in { opacity: 1; transform: none; }
.tl .ev::before { content: ''; position: absolute; left: -24px; top: 5px; width: 12px; height: 12px; border-radius: 50%;
                  background: var(--steel-800); border: 2px solid var(--steel-300); }
.tl .ev.alert::before { border-color: #f59e0b; background: #f59e0b; box-shadow: 0 0 0 6px rgba(245,158,11,.15); }
.tl .ev.ok::before { border-color: var(--wa); background: var(--wa); box-shadow: 0 0 0 6px rgba(37,211,102,.15); }
.tl .h { font-family: var(--cond); font-size: 1.05rem; color: var(--steel-300); letter-spacing: 1px; }
.tl .d { font-size: 1rem; }
.data-note { margin-top: 22px; font-size: .82rem; color: #9fb3cc; max-width: 80ch; }

/* ---------- mapa ---------- */
.map-wrap { position: relative; margin-top: 50px; border-top: 1px solid #d6dbe2; border-bottom: 1px solid #d6dbe2; overflow: hidden; }
.map-wrap { max-width: 1400px; margin-left: auto; margin-right: auto; }
.map-wrap img { width: 100%; height: auto; }
.pin { position: absolute; width: 0; height: 0; }
.pin::before, .pin::after { content: ''; position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%;
                            border: 2px solid var(--steel-800); animation: ping 2.6s infinite; opacity: 0; }
.pin::after { animation-delay: 1.3s; }
@keyframes ping { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(3.6); opacity: 0; } }
.nums { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid #c9d0da; margin-top: 56px; }
.nums > div { padding: 26px 24px; border-right: 1px solid #c9d0da; }
.nums > div:last-child { border-right: 0; }
.nums .n { font-family: var(--cond); font-size: clamp(2.4rem, 4.4vw, 3.6rem); font-weight: 700; line-height: 1; }
.nums .l { font-family: var(--cond); letter-spacing: 3px; font-size: .74rem; color: var(--muted-on-light); text-transform: uppercase; margin-top: 8px; }

/* ---------- producto ---------- */
.prod { display: grid; grid-template-columns: 1.15fr 1fr; gap: 64px; align-items: center; }
.prod-img { position: relative; }
.prod-img img { border-radius: 4px; width: 100%; height: auto; }
.prod-img .real { position: absolute; width: 42%; right: -18px; bottom: -36px; border: 6px solid var(--paper);
                  box-shadow: 0 30px 50px -20px rgba(15,26,42,.45); border-radius: 4px; }
.prod-img .real-tag { position: absolute; right: -18px; bottom: -64px; font-family: var(--cond); letter-spacing: 2px;
                      font-size: .72rem; color: var(--steel-500); text-transform: uppercase; }
.four { display: grid; grid-template-columns: 1fr 1fr; margin-top: 34px; border-top: 1px solid #c9d0da; }
.four > div { padding: 18px 0; border-bottom: 1px solid #c9d0da; }
.four .k { font-family: var(--cond); letter-spacing: 3px; font-size: .72rem; color: var(--muted-on-light); }
.four .v { font-family: var(--cond); font-size: 1.6rem; font-weight: 700; margin-top: 4px; }
.link-ficha { display: inline-flex; align-items: center; gap: 10px; margin-top: 30px; font-family: var(--cond); font-size: 1.25rem;
              letter-spacing: 1px; text-decoration: none; color: var(--steel-900); border-bottom: 2px solid var(--steel-900); padding-bottom: 2px; }
.link-ficha:hover { gap: 16px; }
.link-ficha { transition: gap .2s; }

/* ---------- inversión / empezar / contacto ---------- */
.inv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,.1); margin-top: 50px; }
.inv > div { background: var(--steel-800); padding: 32px 28px; }
.inv .n { font-family: var(--cond); font-size: 3.2rem; font-weight: 700; line-height: 1; }
.inv .l { color: var(--steel-300); margin-top: 8px; }
.inv-note { font-size: .82rem; color: #9fb3cc; margin-top: 16px; }
.pasos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 50px; counter-reset: p; }
.pasos > div { border-top: 3px solid var(--steel-900); padding-top: 18px; }
.pasos h4, .pasos h3 { font-family: var(--cond); font-size: 1.6rem; line-height: 1.05; }
.pasos h4::before, .pasos h3::before { counter-increment: p; content: '0' counter(p); display: block; font-size: .8rem; letter-spacing: 3px; color: var(--steel-500); margin-bottom: 6px; }
.pasos p { color: #4b5563; margin-top: 8px; }
.cierre { padding: 140px 0 110px; }
.cierre h2 { font-size: clamp(3rem, 7vw, 5.6rem); max-width: 14ch; }
.home .lead-form { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); margin-top: 44px; }
.home .lead-form label { color: var(--steel-300); }
.home .lead-form input, .home .lead-form select { background: var(--steel-800); color: #fff; border-color: rgba(255,255,255,.14); }
.home .lf-alt, .home .lf-alt a { color: var(--steel-300); }
.cierre-datos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 64px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.12); }
.cierre-datos .k { font-family: var(--cond); letter-spacing: 3px; font-size: .74rem; color: var(--muted-on-dark); }   /* va sobre el cierre oscuro */
.cierre-datos p, .cierre-datos a { color: #fff; text-decoration: none; margin-top: 6px; font-size: 1.05rem; }

/* ---------- aparición al hacer scroll ---------- */
.js .rv { opacity: 0; transform: translateY(34px); transition: opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1); }
.rv.in { opacity: 1; transform: none; }
.rv.d1 { transition-delay: .12s; } .rv.d2 { transition-delay: .24s; } .rv.d3 { transition-delay: .36s; }
.split-word { display: inline-block; overflow: hidden; vertical-align: top; }
.split-word > span { display: inline-block; transform: translateY(105%); transition: transform .9s cubic-bezier(.2,.8,.2,1); }
.in .split-word > span, .split-word.in > span { transform: none; }

@media (prefers-reduced-motion: reduce) {
    .rv, .split-word > span, .tl .ev, .chat > * { opacity: 1 !important; transform: none !important; transition: none !important; }
    .pin::before, .pin::after, .scroll-hint::after { animation: none; }
}

/* ---------- ficha técnica ---------- */
.ficha-hero { background: var(--steel-900); color: #fff; padding: 150px 0 70px; }
.ficha-hero h1 { font-size: clamp(3rem, 7vw, 5.4rem); }
.ficha-hero p { color: var(--steel-300); margin-top: 14px; max-width: 60ch; font-size: 1.1rem; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 34px; }
.tabs button { font-family: var(--cond); font-size: 1.05rem; letter-spacing: 1px; padding: 10px 18px; border-radius: 999px; cursor: pointer;
               border: 1px solid rgba(255,255,255,.25); background: transparent; color: #fff; }
.tabs button[aria-selected="true"] { background: #fff; color: var(--steel-900); border-color: #fff; }
.spec { display: none; padding: 60px 0 90px; }
.spec.on { display: block; }
.spec h2 { font-family: var(--cond); font-size: 2.2rem; }
.spec table { width: 100%; border-collapse: collapse; margin-top: 22px; }
.spec th, .spec td { text-align: left; padding: 14px 0; border-bottom: 1px solid #d6dbe2; vertical-align: top; font-size: 1.02rem; }
.spec th { width: 34%; color: #4b5563; font-weight: 400; padding-right: 20px; }
.spec .tag-dev { display: inline-block; font-family: var(--cond); letter-spacing: 2px; font-size: .72rem; padding: 2px 8px;
                 border: 1px solid var(--steel-500); color: var(--steel-500); border-radius: 4px; margin-left: 8px; vertical-align: 2px; }

@media (max-width: 980px), (max-aspect-ratio: 5/4) {
    .gw-hero .bg { background-size: cover; background-position: 68% 40%; }
}
@media (max-width: 980px) {
    .story { grid-template-columns: 1fr; gap: 20px; }
    /* Celu (owner 2026-10-01): el teléfono fijo ocupaba casi toda la pantalla y los pasos le
       pasaban POR ENCIMA al scrollear. Acá el teléfono va quieto con la conversación completa
       y los pasos debajo, como texto normal y todos legibles. */
    .phone-col { position: static; }
    .phone { height: min(560px, 72vh); }
    .step { min-height: 0; opacity: 1; padding: 26px 0 0; }
    .step h3 { font-size: clamp(1.9rem, 8vw, 2.4rem); }
    .charts, .prod { grid-template-columns: 1fr; }
    .probs, .inv { grid-template-columns: 1fr; }
    .pasos, .nums, .gw-stats { grid-template-columns: 1fr 1fr; }
    .nums > div:nth-child(2) { border-right: 0; }
    .nums > div:nth-child(-n+2) { border-bottom: 1px solid #c9d0da; }
    .cierre-datos { grid-template-columns: 1fr; }
    .prod-img .real { right: 8px; }
    .prod-img .real-tag { right: 8px; }
}
@media (max-width: 640px) {
    .sec { padding: 84px 0; }
    .gw-hero .bg { background-position: 70% 40%; }
    .gw-hero::after { background: linear-gradient(0deg, rgba(15,26,42,.96) 0%, rgba(15,26,42,.7) 55%, rgba(15,26,42,.35) 100%); }
    .bars { gap: 3px; height: 170px; }
    .bars .b em { font-size: .56rem; }
    .spec th { width: 42%; }
}

/* ---------- trazabilidad: todo registrado ---------- */
.registro { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; margin-top: 22px;
            padding: 36px 32px; border-radius: 18px; background: linear-gradient(120deg, #2b3b52, #1e2a3a); border: 1px solid rgba(255,255,255,.08); }
.registro h3 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin-top: 10px; }
.registro ul { list-style: none; }
.registro li { padding: 12px 0 12px 30px; border-bottom: 1px solid rgba(255,255,255,.08); position: relative; color: var(--steel-100); }
.registro li:last-child { border-bottom: 0; }
.registro li::before { content: '✓'; position: absolute; left: 0; color: var(--wa); font-weight: 700; }
@media (max-width: 980px) { .registro { grid-template-columns: 1fr; gap: 16px; padding: 28px 22px; } }

/* ---------- bomba: indicadores + perfil horario + tendencia ---------- */
.charts { grid-template-columns: 1fr 1.35fr; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 6px; }
.kpis .hl { font-size: 3rem; }
.kl { color: var(--steel-300); font-size: .92rem; margin-top: 4px; }
.kl em { font-style: normal; font-family: var(--cond); font-size: .95rem; margin-left: 6px; padding: 1px 7px; border-radius: 999px; white-space: nowrap; background: rgba(255,255,255,.07); }
.kl em.up { color: #9fd4c6; } .kl em.down { color: #9fd4c6; }
.pump { display: grid; grid-template-columns: 1.3fr 1fr; gap: 34px; margin-top: 30px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.08); }
.pump h4, .pump h3 { font-family: var(--cond); font-size: 1.35rem; font-weight: 600; }
.pump .pcap { color: var(--muted-on-dark); font-size: .85rem; margin-top: 2px; }
.pump .obs { color: var(--steel-100); font-size: .95rem; margin-top: 12px; }
.svgbox { margin-top: 14px; }
.svgbox svg { width: 100%; height: auto; overflow: visible; }
.svgbox text { fill: #6f88a6; font: 11px 'Barlow', sans-serif; }
.js .svgbox .draw { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); transition: stroke-dashoffset 1.8s ease .3s; }
.in .svgbox .draw, .svgbox.in .draw { stroke-dashoffset: 0; }
.js .svgbox .grow { transform: scaleY(0); transform-box: fill-box; transform-origin: bottom; transition: transform .9s cubic-bezier(.2,.8,.2,1); }
.svgbox.in .grow { transform: scaleY(1); }
@media (max-width: 980px) { .charts { grid-template-columns: 1fr; } .card { padding: 22px 18px; } .kpis { grid-template-columns: 1fr 1fr; } .pump { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .js .svgbox .draw { stroke-dashoffset: 0; transition: none; } .js .svgbox .grow { transform: none; transition: none; } }

/* ============ CAPACITACIONES ============ */
.cap-hero .bg { background: #0b1422 url('img/plc-hero.jpg') 88% 60% / auto 100% no-repeat; }
.cap-hero h1 { font-size: clamp(3.6rem, 10vw, 8.6rem); line-height: .92; }
/* terminal PLC + IA */
.term { background: #070d17; border-radius: 16px; border: 1px solid #2b3b52; box-shadow: 0 40px 80px -30px rgba(0,0,0,.7);
        overflow: hidden; max-height: calc(100vh - 150px); display: flex; flex-direction: column; }
.term-top { display: flex; align-items: center; gap: 7px; padding: 12px 14px; background: #111b2b; border-bottom: 1px solid #1e2a3a; }
.term-top i { width: 11px; height: 11px; border-radius: 50%; background: #2b3b52; }
.term-top i:first-child { background: #f87171; } .term-top i:nth-child(2) { background: #fbbf24; } .term-top i:nth-child(3) { background: #34d399; }
.term-top span { margin-left: 10px; font: 500 .72rem 'JetBrains Mono', monospace; color: #6f88a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.term-body { padding: 16px 18px 20px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; flex: 1;
             font: 400 .8rem/1.55 'JetBrains Mono', monospace; font-variant-ligatures: none; color: #cfe0f4; white-space: pre; }
.term-body .c { color: #6f88a6; }
.hl-bad { background: rgba(248,113,113,.14); color: #fca5a5; }
.hl-ok { background: rgba(52,211,153,.12); color: #86efac; }
.term .ia { white-space: normal; font-family: 'Barlow', sans-serif; font-size: .95rem; line-height: 1.4; color: #e6edf5;
            background: #13223a; border: 1px solid #2b4a75; border-radius: 10px; padding: 10px 12px 10px 44px; position: relative; }
.term .ia .tag-ia { position: absolute; left: 10px; top: 10px; width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center;
                    font: 700 .7rem 'JetBrains Mono', monospace; background: #3d6fa8; color: #fff; }
.term .ia.warn { background: #2a1f10; border-color: #6b4b16; } .term .ia.warn .tag-ia { background: #f59e0b; color: #1b1406; }
.term .ia.ok { background: #0f2a20; border-color: #1f6b4b; } .term .ia.ok .tag-ia { background: var(--wa); color: #0b2e17; }
/* grilla de programas */
.progs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: #d6dbe2; border: 1px solid #d6dbe2; margin-top: 50px; }
.prog { background: var(--paper); padding: 28px 24px 30px; text-decoration: none; color: var(--steel-900); position: relative; transition: background .25s, color .25s; }
.prog .k { font-family: var(--cond); letter-spacing: 3px; font-size: .72rem; color: var(--muted-on-light); }
.prog:first-child .k, .prog:hover .k { color: var(--muted-on-dark); }
.prog h3 { font-size: 1.7rem; margin-top: 10px; }
.prog p { color: #4b5563; margin-top: 8px; font-size: .98rem; }
.prog::after { content: '→'; position: absolute; right: 22px; bottom: 20px; font-size: 1.3rem; opacity: 0; transform: translateX(-8px); transition: .25s; }
.prog:hover { background: var(--steel-900); color: #fff; }
.prog:hover p { color: var(--steel-300); }
.prog:hover::after { opacity: 1; transform: none; }
.prog:first-child { background: var(--steel-800); color: #fff; } .prog:first-child p { color: var(--steel-300); }
.progs + .link-ficha { margin-top: 34px; }
/* módulos 16 h */
.mods { list-style: none; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 50px; counter-reset: m; }
.mods li { position: relative; padding: 22px 16px 20px; border-radius: 14px; background: #2b3b52; }
.js .mods li { opacity: 0; transform: translateY(24px);
           transition: opacity .6s, transform .6s cubic-bezier(.2,.8,.2,1); }
.mods li.in { opacity: 1; transform: none; }
.mods li::before { counter-increment: m; content: '0' counter(m); font-family: var(--cond); letter-spacing: 3px; font-size: .75rem; color: var(--steel-300); }
.mods b { display: block; font-family: var(--cond); font-size: 2.2rem; line-height: 1; margin-top: 10px; }
.mods span { display: block; font-family: var(--cond); font-size: 1.3rem; font-weight: 600; margin-top: 6px; }
.mods em { display: block; font-style: normal; color: var(--steel-300); font-size: .9rem; margin-top: 6px; }
.mods li:not(:last-child)::after { content: ''; position: absolute; right: -10px; top: 50%; width: 10px; height: 2px; background: var(--steel-500); }
.caso-foot { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; margin-top: 44px; }
.caso-foot img { width: 100%; height: auto; border-radius: 14px; }
.caso-foot ul { list-style: none; }
.caso-foot li { padding: 14px 0 14px 30px; border-bottom: 1px solid rgba(255,255,255,.08); position: relative; color: var(--steel-100); }
.caso-foot li::before { content: '✓'; position: absolute; left: 0; color: var(--wa); font-weight: 700; }
@media (max-width: 980px) {
    .progs { grid-template-columns: 1fr 1fr; }
    .mods { grid-template-columns: 1fr 1fr; } .mods li::after { display: none; }
    .caso-foot { grid-template-columns: 1fr; }
    .term { max-height: 62vh; } .term-body { font-size: .68rem; }
}
@media (max-width: 640px) { .progs { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .js .mods li { opacity: 1; transform: none; } }
.spec { scroll-margin-top: 90px; }

/* Imágenes en WebP (2026-10-01): el hero pesaba 217 KB en jpg; en celu ahora baja la de 1200 px (52 KB).
   El `background:` de cada regla de arriba deja el jpg como respaldo para navegadores sin image-set. */
.gw-hero .bg { background-image: image-set(url('img/gw-hero.webp') type('image/webp'), url('img/gw-hero.jpg') type('image/jpeg')); }
.band-img { background-image: image-set(url('img/gw-planta.webp') type('image/webp'), url('img/gw-planta.jpg') type('image/jpeg')); }
.cap-hero .bg { background-image: image-set(url('img/plc-hero.webp') type('image/webp'), url('img/plc-hero.jpg') type('image/jpeg')); }
@media (max-width: 980px) {
    .gw-hero .bg { background-image: image-set(url('img/gw-hero-1200.webp') type('image/webp'), url('img/gw-hero.jpg') type('image/jpeg')); }
    .band-img { background-image: image-set(url('img/gw-planta-1200.webp') type('image/webp'), url('img/gw-planta.jpg') type('image/jpeg')); }
    .cap-hero .bg { background-image: image-set(url('img/plc-hero-1200.webp') type('image/webp'), url('img/plc-hero.jpg') type('image/jpeg')); }
}

.map-wrap picture, .prod-img picture, .caso-foot picture { display: block; }   /* <picture> inline dejaba espacio de línea */

.ficha-hero .kicker { color: var(--steel-300); }   /* kicker sobre el hero oscuro de la ficha */

.gw-hero .kicker { color: var(--steel-300); }   /* sobre la foto oscuro del hero (Lighthouse no lo mide: fondo con imagen) */