/* Transformación Digital › 05 Automatización Inteligente — demonstration card «Robótica integrada en operación»
   (docs/lib/demo-card.cjs), which opens the shared video modal. Two layouts:
   - .demo-card--compact (current): small horizontal card under the Flow RCS diagram, in the left column of the
     composition (.cap-composition.has-demo). See the end of this file.
   - .demo-card (wide, previous; kept to compare): between Flow RCS and the IoT block at the width of the panel; desktop
     16:9 thumbnail on the left and text on the right, phones thumbnail on top.
   Dark glass surface with a hairline border and the site's blue → magenta accent, kept discreet. */
.demo-card{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(24px,3.4vw,44px);align-items:center;margin-top:48px;padding:14px clamp(14px,2.4vw,30px) 14px 14px;
  border:1px solid rgba(255,255,255,.1);border-radius:18px;text-decoration:none;color:inherit;isolation:isolate;overflow:hidden;
  background:linear-gradient(120deg,rgba(0,149,229,.09),rgba(135,60,236,.04) 55%,rgba(205,2,152,.06)),rgba(6,13,34,.62);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 24px 60px -30px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.05);
  transition:border-color .25s,box-shadow .25s}
/* Thin gradient line along the top edge (corporate accent). */
.demo-card::before{content:"";position:absolute;left:24px;right:24px;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(0,176,209,.65),rgba(205,2,152,.55),transparent);opacity:.7;z-index:-1}
.demo-card:hover{border-color:rgba(127,214,240,.28);box-shadow:0 28px 70px -30px rgba(0,0,0,.75),0 0 0 1px rgba(0,149,229,.08),inset 0 1px 0 rgba(255,255,255,.06)}
.demo-card:focus-visible{outline:2px solid #00b0d1;outline-offset:4px}
.demo-card-media{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:12px;background:#050b1c;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.demo-card-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.demo-card-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,1,14,.35));pointer-events:none}
.demo-card:hover .demo-card-media img{transform:scale(1.03)}
.demo-card-play{position:absolute;left:50%;top:50%;z-index:1;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;transform:translate(-50%,-50%);
  border:1px solid rgba(255,255,255,.32);background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.06)),rgba(0,1,14,.42);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 10px 30px rgba(0,0,0,.35);transition:transform .25s,background .25s,border-color .25s}
.demo-card-play svg{width:24px;height:24px;margin-left:3px;fill:#fff}
.demo-card:hover .demo-card-play{transform:translate(-50%,-50%) scale(1.07);border-color:transparent;background:linear-gradient(135deg,#0095e5,#873cec)}
.demo-card-body{display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:6px 0}
.demo-card-badge{display:inline-flex;align-items:center;gap:8px;padding:5px 11px;border:1px solid rgba(127,214,240,.28);border-radius:999px;background:rgba(0,149,229,.08);color:#9fe3f5;font-size:.6rem;font-weight:500;letter-spacing:.14em;line-height:1.4}
.demo-card-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:linear-gradient(135deg,#00b0d1,#cd0298)}
.demo-card-cat{margin-top:18px;color:#65caff;font-size:.68rem;letter-spacing:.14em;line-height:1.6}
.demo-card-title{margin-top:8px;color:#f3f5fc;font-size:clamp(1.35rem,1.9vw,1.75rem);font-weight:400;line-height:1.28;letter-spacing:-.02em;text-wrap:balance}
.demo-card-desc{margin-top:12px;max-width:48ch;color:#b8c5d9;font-size:.92rem;line-height:1.8}
.demo-card-cta{display:inline-flex;align-items:center;gap:12px;margin-top:22px;color:#fff;font-size:.88rem;font-weight:500;line-height:1.3}
.demo-card-cta-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#0095e5,#873cec);box-shadow:0 6px 18px rgba(0,149,229,.25);transition:transform .25s}
.demo-card-cta-icon svg{width:14px;height:14px;margin-left:2px;fill:#fff}
.demo-card:hover .demo-card-cta-icon{transform:scale(1.08)}
/* Tablet: same two columns, tighter. */
@media (max-width:1000px){
  .demo-card{margin-top:40px;gap:22px}
  .demo-card-cat{margin-top:14px}
  .demo-card-desc{font-size:.88rem;line-height:1.7}
  .demo-card-cta{margin-top:16px}
}
/* Phones: thumbnail on top, text below. */
@media (max-width:640px){
  .demo-card{grid-template-columns:minmax(0,1fr);gap:16px;margin-top:32px;padding:10px 10px 18px;border-radius:14px}
  .demo-card-media{border-radius:10px}
  .demo-card-play{width:56px;height:56px}
  .demo-card-body{padding:0 8px}
  .demo-card-title{font-size:1.3rem}
}
@media (prefers-reduced-motion:reduce){.demo-card,.demo-card-media img,.demo-card-play,.demo-card-cta-icon{transition:none}.demo-card:hover .demo-card-media img{transform:none}}

/* ---------- Compact card under the Flow RCS diagram (.cap-composition.has-demo) ----------
   Left column: the diagram at the top (no longer centred against the text) and the card right under it; the text
   column on the right stays as it was, centred against both. The diagram keeps its elements and sizes: only its empty
   band above and below the content is reduced (min-height 370 → 300 px); its wires are redrawn by digital-capabilities.js. */
.cap-composition.has-demo{grid-template-areas:"visual info" "demo info";grid-template-rows:auto auto;row-gap:22px;align-items:start}
.cap-composition.has-demo>.cap-orchestration{grid-area:visual}
.cap-composition.has-demo>.demo-card{grid-area:demo}
.cap-composition.has-demo>.cap-information{grid-area:info;align-self:center}
.cap-composition.has-demo .rcs-diagram{min-height:300px}
.demo-card.demo-card--compact{grid-template-columns:minmax(0,34%) minmax(0,1fr);gap:20px;margin:0;padding:10px 20px 10px 10px;border-radius:14px;border-color:rgba(255,255,255,.085);
  background:linear-gradient(120deg,rgba(0,149,229,.05),rgba(6,13,34,0) 60%,rgba(205,2,152,.035)),rgba(6,13,34,.55);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.demo-card.demo-card--compact::before{left:18px;right:18px;opacity:.4}
.demo-card.demo-card--compact:hover{border-color:rgba(127,214,240,.24);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.demo-card.demo-card--compact .demo-card-media{border-radius:9px}
.demo-card.demo-card--compact .demo-card-play{width:40px;height:40px;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.demo-card.demo-card--compact .demo-card-play svg{width:16px;height:16px;margin-left:2px}
.demo-card.demo-card--compact .demo-card-body{padding:2px 0}
.demo-card.demo-card--compact .demo-card-badge{padding:3px 9px;gap:6px;font-size:.55rem;letter-spacing:.13em}
.demo-card.demo-card--compact .demo-card-badge::before{width:5px;height:5px}
.demo-card.demo-card--compact .demo-card-title{margin-top:9px;font-size:1.05rem;line-height:1.35;letter-spacing:-.01em}
.demo-card.demo-card--compact .demo-card-cta{margin-top:10px;gap:9px;font-size:.8rem;color:#dfe9f5}
.demo-card.demo-card--compact .demo-card-cta-icon{width:26px;height:26px;box-shadow:none}
.demo-card.demo-card--compact .demo-card-cta-icon svg{width:11px;height:11px}
.demo-card.demo-card--compact:hover .demo-card-cta{color:#fff}
/* Tablet and phone: one column — diagram, Flow RCS text, then the card (it closes the Flow RCS block before IoT). */
@media (max-width:1000px){
  .cap-composition.has-demo{grid-template-areas:"visual" "info" "demo";grid-template-columns:minmax(0,1fr);row-gap:35px}
  .cap-composition.has-demo>.cap-information{align-self:auto}
  .cap-composition.has-demo>.demo-card{width:100%;max-width:720px;justify-self:center}
  .cap-composition.has-demo .rcs-diagram{min-height:370px}
}
@media (max-width:600px){
  .cap-composition.has-demo{row-gap:28px}
  .cap-composition.has-demo .rcs-diagram{min-height:0}
  .demo-card.demo-card--compact{grid-template-columns:minmax(0,38%) minmax(0,1fr);gap:14px;padding:9px 14px 9px 9px}
  .demo-card.demo-card--compact .demo-card-title{margin-top:7px;font-size:.98rem}
  .demo-card.demo-card--compact .demo-card-cta{margin-top:8px}
}