/* Transformación Digital › 04 Desarrollo de Software (docs/lib/software-capability.cjs). Editorial order:
   introduction → services (two items with a line icon) → Desarrollos y aplicaciones → one block per development
   (image + text, then its video cards). Type scale, colours and hairlines are the capability's own
   (digital-capabilities.css). Video modal: td-video-modal.css. */

/* 1 · Introduction: headline on the left, description on the right, aligned on the baseline of the headline. */
.sw-intro{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:56px;align-items:end}
.sw-intro .cap-information h3{margin-bottom:0}
.sw-intro-text .cap-description{margin:0}
.sw-intro-text .cap-descriptor{margin:18px 0 0}

/* 2 · Services: two columns, a cyan line icon in a discreet glass tile, a hairline between them. */
.sw-services{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin-top:32px;padding-top:24px;border-top:1px solid #ffffff16}
.sw-service{display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:center;padding-right:32px}
.sw-service+.sw-service{padding:0 0 0 34px;border-left:1px solid #ffffff14}
.sw-service-icon{display:grid;place-items:center;width:60px;height:60px;border:1px solid rgba(255,255,255,.1);border-radius:14px;color:#00b0d1;
  background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.012)),rgba(6,16,38,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.sw-service-icon svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sw-service h4{margin:0 0 5px;font-size:1.02rem;font-weight:500;line-height:1.4;letter-spacing:0;color:#f3f5fc}
.sw-service p{margin:0;font-size:.86rem;line-height:1.7;color:#a9bdd0}

/* 3 · Developments: only the eyebrow heads the block; the development follows right under it. */
.sw-devs{margin-top:28px;padding-top:26px;border-top:1px solid #ffffff16}
.sw-devs-head .cap-eyebrow{margin:0}
.sw-devs-head h4{margin:10px 0 0;font-size:clamp(1.35rem,1.8vw,1.75rem);font-weight:400;line-height:1.3;letter-spacing:-.025em;color:#f3f5fc;text-wrap:balance}
.sw-devs-list{display:grid;gap:56px;margin-top:14px}
.sw-dev-panel:focus-visible{outline:1px solid #00b0d1;outline-offset:8px;border-radius:4px}

/* A development: image on the left (both rows), text and then its video cards on the right. */
.sw-dev{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);grid-template-areas:"media text" "media demos";column-gap:48px;row-gap:22px}
.sw-dev-media{grid-area:media;align-self:center;margin:0;min-width:0}
.sw-dev-text{grid-area:text;align-self:end;min-width:0;padding-left:28px;border-left:1px solid #29506a70}
.sw-demos{grid-area:demos;align-self:start;min-width:0}
/* Rhythm: every second development (02, 04 …) mirrors it, image on the right. */
.sw-dev--reverse{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);grid-template-areas:"text media" "demos media"}
.sw-dev .product-stage{padding:6px 0 12px}
.sw-dev-caption{margin:2px 0 0;font-size:.68rem;line-height:1.6;letter-spacing:.02em;text-align:center;color:#7f95ae}
.sw-dev-index{margin:0 0 12px;font-size:.72rem;letter-spacing:.15em;color:#65caff}
.sw-dev-name{margin:0;font-size:1.85rem;font-weight:500;line-height:1.1;letter-spacing:.03em;color:#00b0d1}
.sw-dev-full{margin:10px 0 0;font-size:.9rem;line-height:1.6;color:#d1dfed}
.sw-dev-desc{max-width:440px;margin:16px 0 0;font-size:.86rem;line-height:1.85;color:#a8bed2}

/* Video cards ("SGIS en aplicación"): real thumbnail, centred play, short title; each opens the video modal. */
.sw-demos-title{margin:0 0 12px;font-size:.95rem;font-weight:500;line-height:1.4;color:#f3f5fc}
.sw-demos-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.sw-demo{display:grid;align-content:start;gap:7px;height:100%;padding:7px 7px 10px;border:1px solid rgba(255,255,255,.1);border-radius:12px;color:inherit;text-decoration:none;cursor:pointer;
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.012)),rgba(6,16,38,.35);transition:border-color .25s ease,background .25s ease,transform .25s ease}
.sw-demo-thumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:8px;background:#0b1430}
.sw-demo-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.sw-demo-thumb::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,1,14,.05),rgba(0,1,14,.32));pointer-events:none}
.sw-demo-play{position:absolute;left:50%;top:50%;z-index:1;display:grid;place-items:center;width:38px;height:38px;margin:-19px 0 0 -19px;border:1px solid rgba(255,255,255,.34);border-radius:50%;
  background:rgba(0,1,14,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;transition:transform .25s ease,background .25s ease,border-color .25s ease}
.sw-demo-play svg{width:15px;height:15px;margin-left:2px;fill:currentColor}
.sw-demo-cat{padding:0 3px;font-size:.56rem;font-weight:500;letter-spacing:.1em;line-height:1.3;color:#8db8cf}
.sw-demo-name{padding:0 3px;font-size:.8rem;font-weight:500;line-height:1.35;color:#e8f0f8}
.sw-demo:focus-visible{outline:2px solid #00b0d1;outline-offset:3px}
@media (hover:hover) and (pointer:fine){
  .sw-demo:hover{transform:translateY(-2px);border-color:rgba(0,176,209,.42);background:linear-gradient(160deg,rgba(255,255,255,.075),rgba(255,255,255,.02)),rgba(6,16,38,.4)}
  .sw-demo:hover .sw-demo-play{transform:scale(1.08);border-color:transparent;background:linear-gradient(135deg,#0095e5,#873cec)}
}

/* Development selector (only with two or more published developments): the capability tabs' language, one level
   down — inline, smaller, no full-width cells. Without JS it is a row of anchor links to each development. */
.sw-dev-tabs{display:flex;gap:30px;margin-top:22px;border-bottom:1px solid #34405865;overflow-x:auto;scrollbar-width:none}
.sw-dev-tabs::-webkit-scrollbar{display:none}
.sw-dev-tab{position:relative;display:inline-flex;align-items:baseline;gap:9px;flex:0 0 auto;padding:10px 0 13px;color:#8f9fb6;font-size:.86rem;font-weight:500;letter-spacing:.02em;text-decoration:none;white-space:nowrap;transition:color .2s}
.sw-dev-tab-num{font-size:.64rem;font-weight:400;letter-spacing:.09em;color:#00b0d1}
.sw-dev-tab::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,#0095e5,#cd0298);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.sw-dev-tab:hover{color:#d7e7f6}
.sw-dev-tab[aria-selected=true]{color:#fff}
.sw-dev-tab[aria-selected=true]::after{transform:scaleX(1)}
.sw-dev-tab:focus-visible{outline:2px solid #00b0d1;outline-offset:2px;border-radius:3px}
.sw-dev-tabs+.sw-devs-list{margin-top:30px}

/* Short laptop screens (e.g. 1366×768): slightly narrower image, a little less vertical air. */
@media (min-width:1001px) and (max-height:820px){
  .sw-devs{margin-top:24px;padding-top:22px}
  .sw-dev{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);column-gap:40px}
  .sw-dev--reverse{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}
}
/* Narrow desktop / tablet landscape: the text column is too narrow for three cards — they take the full width below. */
@media (min-width:1001px) and (max-width:1199px){
  .sw-dev{grid-template-areas:"media text" "demos demos";row-gap:26px}
  .sw-dev--reverse{grid-template-areas:"text media" "demos demos"}
  .sw-dev-text{align-self:center}
}
/* Tablet: one column — image, text, cards (three in a row). */
@media (max-width:1000px){
  .sw-intro{grid-template-columns:minmax(0,1fr);gap:18px}
  .sw-dev,.sw-dev--reverse{grid-template-columns:minmax(0,1fr);grid-template-areas:"media" "text" "demos";row-gap:20px}
  .sw-dev-text{align-self:auto;padding:18px 0 0;border-left:0;border-top:1px solid #29506a70}
  .sw-dev-desc{max-width:620px}
  .sw-devs-list{gap:44px}
}
/* Mobile: services stacked; the cards become a horizontal row that scrolls on its own (snap), never the page. */
@media (max-width:600px){
  .sw-services{grid-template-columns:minmax(0,1fr);margin-top:26px;padding-top:20px}
  .sw-service{padding:0;gap:18px}
  .sw-service+.sw-service{margin-top:18px;padding:18px 0 0;border-left:0;border-top:1px solid #ffffff14}
  .sw-service-icon{width:52px;height:52px;border-radius:12px}
  .sw-service-icon svg{width:24px;height:24px}
  .sw-devs{margin-top:24px;padding-top:22px}
  .sw-devs-head h4{font-size:1.3rem}
  .sw-dev-name{font-size:1.6rem}
  .sw-dev-full{font-size:.85rem}
  .sw-dev-desc{font-size:.84rem}
  .sw-demos-list{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:72%;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#275575 transparent;padding-bottom:8px}
  .sw-demos-list>li{scroll-snap-align:start}
  .sw-demo-name{font-size:.84rem}
}
@media (prefers-reduced-motion:reduce){
  .sw-dev-tab,.sw-dev-tab::after,.sw-demo,.sw-demo-play{transition:none}
}