/* Transformación Digital — Ecosistema de integración (OT → plataforma → IT, IA transversal).
   Scoped to .td-arch. Connectors: dist/td-integration.js. Reveal trigger: dist/td-page.js ([data-reveal] → .is-revealed). */
.td-arch{--arch-gap:clamp(56px,7.5vw,112px);--arch-ease:cubic-bezier(.2,.7,.2,1);position:relative;padding:clamp(72px,8vw,116px) 0 clamp(90px,9vw,130px)}
.td-arch::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 45% 40% at 50% 62%,#0d2a5a33,transparent 70%)}

/* Heading */
.td-arch-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(28px,5vw,80px);align-items:end}
.td-arch-head h2{margin:0;font-size:clamp(2.1rem,3.4vw,3.2rem);font-weight:400;line-height:1.15;letter-spacing:-.04em;color:#f5f7ff}
.td-arch-line{display:block}
.td-arch-intro{margin:0;max-width:480px;color:#a9b6cc;font-size:1rem;line-height:1.85}

/* Diagram grid: AI layer on top, OT | platform | IT below. No enclosing card. */
.td-arch-diagram{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr) minmax(0,1fr);grid-template-areas:"ai ai ai" "ot core it";column-gap:var(--arch-gap);row-gap:clamp(44px,4vw,56px);align-items:center;margin-top:clamp(44px,4vw,58px)}
.td-arch-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.td-arch-diagram>:not(.td-arch-wires){position:relative;z-index:1}

/* AI: thin transversal layer */
.td-arch-ai{grid-area:ai;justify-self:center;width:min(100%,60%);display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 28px 15px;border-radius:16px;text-align:center;background:linear-gradient(90deg,#0095e50f,#873cec17 50%,#cd02980f);box-shadow:inset 0 0 0 1px #ffffff12}
.td-arch-ai::after{content:'';position:absolute;left:28px;right:28px;bottom:-1px;height:1px;background:linear-gradient(90deg,#0095e5,#873cec,#cd0298);opacity:.55}
.td-arch-ai-label{margin:0;font-size:.8rem;font-weight:600;letter-spacing:.18em;background:linear-gradient(100deg,#4bc3ff,#a06cf0 55%,#e04cc0);-webkit-background-clip:text;background-clip:text;color:transparent}
.td-arch-ai-list{display:flex;flex-wrap:wrap;justify-content:center;margin:0;padding:0;list-style:none;color:#b9c5d9;font-size:.88rem;line-height:1.6}
.td-arch-ai-list li+li::before{content:'·';margin:0 12px;color:#6c7a96}

/* OT / IT columns */
/* OT and IT read as two domains: barely-raised surfaces, thin low-opacity borders. */
.td-arch-col{align-self:center;padding:16px 14px 12px;border-radius:16px;background:#ffffff04;box-shadow:inset 0 0 0 1px #ffffff12}
.td-arch-ot{grid-area:ot}
.td-arch-it{grid-area:it}
.td-arch-col-label{display:grid;gap:0;margin:0 0 10px;padding-left:10px}
.td-arch-col-label strong{color:#fff;font-size:1.35rem;font-weight:600;letter-spacing:.04em;line-height:1.2}
.td-arch-col-label span{color:#7f8daa;font-size:.76rem;letter-spacing:.04em}
.td-arch-list{display:grid;gap:2px;margin:0;padding:0;list-style:none}
.td-arch-node{--off:0px;display:flex;align-items:center;gap:12px;padding:5px 10px;border-radius:10px;color:#dbe4f3;font-size:.9rem;line-height:1.3;transform:translateX(var(--off));transition:background .3s,color .3s,opacity .3s;outline:none}
.td-arch-ot .td-arch-node:nth-child(2),.td-arch-ot .td-arch-node:nth-child(6){--off:4px}
.td-arch-ot .td-arch-node:nth-child(3),.td-arch-ot .td-arch-node:nth-child(5){--off:7px}
.td-arch-ot .td-arch-node:nth-child(4){--off:8px}
.td-arch-it .td-arch-node:nth-child(2),.td-arch-it .td-arch-node:nth-child(6){--off:-4px}
.td-arch-it .td-arch-node:nth-child(3),.td-arch-it .td-arch-node:nth-child(5){--off:-7px}
.td-arch-it .td-arch-node:nth-child(4){--off:-8px}
.td-arch-icon{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:9px;background:#0a1328;box-shadow:inset 0 0 0 1px #ffffff12;color:#5ec8ff}
.td-arch-it .td-arch-icon{color:#62d6ee}
.td-arch-icon svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.td-arch-dot{flex:none;width:7px;height:7px;margin-left:auto;border-radius:50%;background:#050816;box-shadow:0 0 0 1.4px #0095e5}
.td-arch-it .td-arch-dot{order:-1;margin:0 2px 0 0;box-shadow:0 0 0 1.4px #00b0d1}
.td-arch-node:focus-visible{box-shadow:0 0 0 2px #00b0d1aa}

/* Platform: the protagonist */
.td-arch-core{grid-area:core;padding:22px 22px 14px;border-radius:20px;text-align:center;background:linear-gradient(180deg,#0d1938,#070d24);border:1px solid #2f86d24d;box-shadow:0 12px 0 -6px #0a1230,0 12px 0 -5px #2f86d226,0 24px 0 -12px #080e26,0 24px 0 -11px #2f86d214,0 0 0 6px #0095e507,0 30px 90px #0095e51f;transition:border-color .3s,box-shadow .3s}
.td-arch-core.is-warm{border-color:#4bc3ff80}
.td-arch-core-logo{display:block;width:auto;height:50px;margin:0 auto}
.td-arch-core-label{margin:10px 0 14px;color:#5ec8ff;font-size:.8rem;font-weight:600;letter-spacing:.16em;line-height:1.5}
.td-arch-core-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;padding:0;list-style:none}
.td-arch-core-list li{padding:8px 4px;border-top:1px solid #ffffff10;color:#e8eefb;font-size:.9rem}

/* Connectors */
.td-arch-wire{fill:none;stroke-width:1.2;opacity:.5;transition:opacity .35s,stroke-width .35s,stroke .35s}
.td-arch-wire--ot{stroke:#0095e5}
.td-arch-wire--it{stroke:#00b0d1}
.td-arch-wire--ai{stroke:#7f6cf0;opacity:.6}
.td-arch-port{fill:#050816;stroke:#00b0d1;stroke-width:1.3;opacity:.9;transition:opacity .35s}
.td-arch-port--ai{stroke:#8f7cf2}
.td-arch-port{transition:opacity .35s,fill .35s}
.td-arch-port.is-lit{fill:#8f7cf2;opacity:1;filter:drop-shadow(0 0 4px #873cec99)}
.td-arch-wire--ai.is-lit{opacity:1;stroke:#a493ff;stroke-width:1.6}
.td-arch-diagram.is-focusing .td-arch-wire--ai.is-lit,.td-arch-diagram.is-focusing .td-arch-port.is-lit{opacity:1}
.td-arch-pulse{filter:drop-shadow(0 0 4px currentColor)}
.td-arch-pulse--ot,.td-arch-pulse--it{fill:#7fe3ff;color:#00b0d1}
.td-arch-pulse--ai{fill:#c79bff;color:#873cec}

/* Focus mode (hover or keyboard on a node) */
.td-arch-diagram.is-focusing .td-arch-wire{opacity:.1}
.td-arch-diagram.is-focusing .td-arch-port{opacity:.25}
.td-arch-diagram.is-focusing .td-arch-wire.is-warm{opacity:.45}
.td-arch-diagram.is-focusing .td-arch-wire.is-hot{opacity:1;stroke-width:1.8;stroke:#4bd2ff}
.td-arch-diagram.is-focusing .td-arch-port.is-hot{opacity:1}
.td-arch-diagram.is-focusing .td-arch-node{opacity:.42}
.td-arch-diagram.is-focusing .td-arch-node.is-hot{opacity:1;background:#00b0d10f;color:#fff}
.td-arch-node.is-hot .td-arch-dot{background:#00b0d1;box-shadow:0 0 0 1.4px #00b0d1,0 0 10px #00b0d1aa}
.td-arch-diagram.is-focusing .td-arch-pulses{opacity:.35}

/* Without JS: arrows explain the direction OT → platform → IT */
.td-arch-diagram:not(.is-wired) .td-arch-core::before,.td-arch-diagram:not(.is-wired) .td-arch-core::after{content:'→';position:absolute;top:50%;color:#00b0d1;font-size:1.2rem;transform:translate(-50%,-50%)}
.td-arch-diagram:not(.is-wired) .td-arch-core::before{left:calc(var(--arch-gap) / -2)}
.td-arch-diagram:not(.is-wired) .td-arch-core::after{left:calc(100% + var(--arch-gap) / 2)}

/* Sequence below the diagram (reuses .td-eco-flow) */
.td-arch-seq{margin-top:clamp(64px,7vw,96px)}

/* Entrance: platform → connectors → nodes → AI layer → sequence (≈1.4 s, once) */
.td-reveal-ready .td-arch-head,.td-reveal-ready .td-arch-seq{opacity:0;transform:translateY(16px);transition:opacity .8s var(--arch-ease),transform .8s var(--arch-ease)}
.td-reveal-ready .td-arch-head.is-revealed,.td-reveal-ready .td-arch-seq.is-revealed{opacity:1;transform:none}
.td-reveal-ready .td-arch-diagram .td-arch-core{opacity:0;transform:translateY(10px);transition:opacity .5s var(--arch-ease),transform .5s var(--arch-ease),border-color .3s}
.td-reveal-ready .td-arch-diagram .td-arch-wire{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .7s var(--arch-ease) .2s,opacity .35s,stroke-width .35s,stroke .35s}
.td-reveal-ready .td-arch-diagram .td-arch-node,.td-reveal-ready .td-arch-diagram .td-arch-col-label{opacity:0;transition:opacity .45s var(--arch-ease) .5s,background .3s,color .3s}
.td-reveal-ready .td-arch-diagram .td-arch-ai{opacity:0;transform:translateY(-8px);transition:opacity .5s var(--arch-ease) .85s,transform .5s var(--arch-ease) .85s}
.td-reveal-ready .td-arch-diagram .td-arch-pulses,.td-reveal-ready .td-arch-diagram .td-arch-ports{opacity:0;transition:opacity .6s ease 1.2s}
.td-reveal-ready .td-arch-diagram.is-revealed .td-arch-core,.td-reveal-ready .td-arch-diagram.is-revealed .td-arch-ai{opacity:1;transform:none}
.td-reveal-ready .td-arch-diagram.is-revealed .td-arch-wire{stroke-dashoffset:0}
.td-reveal-ready .td-arch-diagram.is-revealed .td-arch-node,.td-reveal-ready .td-arch-diagram.is-revealed .td-arch-col-label{opacity:1}
.td-reveal-ready .td-arch-diagram.is-revealed .td-arch-pulses,.td-reveal-ready .td-arch-diagram.is-revealed .td-arch-ports{opacity:1}
.td-reveal-ready .td-arch-diagram.is-revealed.is-focusing .td-arch-node{opacity:.42}
.td-reveal-ready .td-arch-diagram.is-revealed.is-focusing .td-arch-node.is-hot{opacity:1}
.td-reveal-ready .td-arch-diagram.is-revealed.is-focusing .td-arch-pulses{opacity:.35}
.td-reveal-ready .td-arch-seq li::before{transition-delay:calc(var(--i) * .14s + .35s)}

/* Tablet */
@media (max-width:1100px){
 .td-arch{--arch-gap:clamp(48px,6vw,72px)}
 .td-arch-core-list{grid-template-columns:repeat(2,minmax(0,1fr))}
 .td-arch-node{font-size:.84rem;gap:10px}
}
@media (max-width:1000px){
 .td-arch-head{grid-template-columns:minmax(0,1fr);align-items:start}
}

/* Mobile: vertical story AI → OT → platform → IT, simplified links */
@media (max-width:700px){
 .td-arch-head h2{font-size:clamp(1.85rem,7.4vw,2.4rem)}
 .td-arch-diagram{grid-template-columns:minmax(0,1fr);grid-template-areas:"ai" "ot" "core" "it";row-gap:52px;margin-top:64px}
 .td-arch-ai{width:100%;padding:16px 18px}
 .td-arch-ai-list{justify-content:center}
 .td-arch-col{display:grid;justify-items:center;padding:20px 12px 16px}
 .td-arch-col-label{justify-items:center;padding:0;margin-bottom:14px;text-align:center}
 .td-arch-list{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
 .td-arch-node{--off:0px!important;padding:6px 10px 6px 6px;gap:8px;border-radius:9px;background:#ffffff05;box-shadow:inset 0 0 0 1px #ffffff0d;font-size:.82rem}
 .td-arch-icon{width:26px;height:26px;border-radius:7px}
 .td-arch-icon svg{width:15px;height:15px}
 .td-arch-dot{display:none}
 .td-arch-core{padding:24px 18px 16px}
 .td-arch-core-logo{height:50px}
 .td-arch-core-list{grid-template-columns:repeat(3,minmax(0,1fr))}
 .td-arch-core-list li{font-size:.82rem}
 .td-arch-diagram:not(.is-wired) .td-arch-core::before{content:'↓';left:50%;top:-26px}
 .td-arch-diagram:not(.is-wired) .td-arch-core::after{content:'↓';left:50%;top:calc(100% + 26px)}
 .td-arch-seq{margin-top:56px}
}
@media (max-width:360px){
 .td-arch-core-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (prefers-reduced-motion:reduce){
 .td-arch-pulses{display:none}
 .td-arch *{transition:none!important}
}