/* OSM — Nuestro Sistema / v0.8
   Autonomous stylesheet; built on shared site.css + page-titles.css. */
:root{--system-forest:#2f4f4f;--system-deep:#102b29;--system-ink:#162b2a;--system-mint:#a9d0c1;--system-soft:#eef5f2;--system-line:rgba(47,79,79,.19)}
.system-page{background:#fff;color:var(--system-ink);overflow:hidden}
.system-page *{box-sizing:border-box}
.system-layout{width:min(1210px,calc(100% - 64px));margin:0 auto}
.system-title{padding-bottom:20px}
.system-overview{position:relative;padding:22px 0 74px;overflow:hidden}
.system-overview::before{content:"";position:absolute;left:-10%;right:-10%;top:25%;height:320px;background:radial-gradient(ellipse at 50% 50%,rgba(47,79,79,.045),transparent 73%);pointer-events:none}
.system-overview__intro{position:relative;display:grid;grid-template-columns:1fr 1.15fr;column-gap:8%;align-items:start;margin:0 0 45px}
.system-overview__intro>.system-eyebrow{grid-column:1 / -1;margin-bottom:19px}
.system-overview__intro h2{margin:0;max-width:600px;font-size:clamp(36px,4.2vw,58px);font-weight:900;line-height:1.03;letter-spacing:-.052em;color:#172d2b}
.system-overview__intro h2 span{color:var(--system-forest)}
.system-overview__intro p{grid-column:2;font-size:clamp(15px,1.14vw,17px);line-height:1.76;color:#526460;margin:0 0 12px;max-width:640px}
.system-overview__intro h2 + p{grid-row:2}
.system-overview__intro p:last-child{margin-bottom:0}
.system-eyebrow{display:flex;align-items:center;gap:12px;font-size:10px;font-weight:900;letter-spacing:.24em;color:var(--system-forest);text-transform:uppercase}
.system-eyebrow__mark{width:8px;height:8px;border:2px solid currentColor;transform:rotate(45deg);flex:none;animation:systemMark 4s ease-in-out infinite}
@keyframes systemMark{0%,100%{transform:rotate(45deg) scale(.75);opacity:.45}50%{transform:rotate(225deg) scale(1.18);opacity:1}}
/* Five-step live architectural blueprint */
.system-flow-wrap{position:relative;isolation:isolate;background:var(--system-deep);overflow:hidden;color:#fff;padding:0 0 12px;box-shadow:0 34px 80px rgba(16,43,41,.13)}
.system-flow-wrap::before{position:absolute;content:"";inset:0;z-index:-2;background-image:linear-gradient(rgba(255,255,255,.048) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.048) 1px,transparent 1px);background-size:58px 58px;animation:systemGrid 28s linear infinite;mask-image:linear-gradient(to right,transparent,#000 20%,#000 80%,transparent)}
.system-flow-wrap::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 54% 10%,rgba(132,200,175,.13),transparent 58%),linear-gradient(110deg,rgba(29,71,64,.4),transparent 55%);pointer-events:none}
@keyframes systemGrid{to{background-position:58px 58px}}
.system-flow__header{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:19px 30px;border-bottom:1px solid rgba(255,255,255,.14);font-size:10px;font-weight:800;letter-spacing:.21em;color:#c5dad2}
.system-flow__header span:first-child{display:flex;align-items:center;gap:11px}
.system-flow__header i{width:6px;height:6px;transform:rotate(45deg);background:#a4d4c4;display:inline-block}
.system-flow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));list-style:none;position:relative;margin:0;padding:34px 17px 39px}
.system-flow__track{position:absolute;top:136px;left:10%;right:10%;height:2px;background:rgba(210,242,224,.2);z-index:0;overflow:hidden}
.system-flow__progress{position:absolute;inset:0;background:linear-gradient(90deg,transparent,#c8f7e5,#7bb9a5);transform-origin:left;animation:systemBuildTrack 12s linear infinite}
@keyframes systemBuildTrack{0%{transform:translateX(-110%)}80%,100%{transform:translateX(120%)}}
.system-phase{min-width:0;position:relative;z-index:2;padding:0 15px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px}
.system-phase__top{width:100%;display:flex;justify-content:space-between;align-items:center;padding:0 5px;color:#90ada4;font-size:10px;letter-spacing:.12em;font-weight:800}
.system-phase__status{height:4px;width:4px;border-radius:50%;background:#587d71;transition:background .45s,box-shadow .45s}
.system-phase__icon{height:108px;width:108px;flex:none;position:relative;border:1px solid rgba(209,239,229,.31);background:linear-gradient(140deg,#254944,#183b36);display:flex;justify-content:center;align-items:center;color:#c6e0d5;clip-path:polygon(0 0,89% 0,100% 11%,100% 100%,11% 100%,0 89%);transition:transform .6s ease,background .6s,color .6s,box-shadow .6s}
.system-phase__icon::before{content:"";position:absolute;inset:8px;border:1px solid rgba(255,255,255,.07);pointer-events:none}
.system-phase__icon svg{width:48px;height:48px;transition:transform .5s ease}
.system-phase__label{min-height:60px;display:flex;flex-direction:column;gap:7px}
.system-phase__label strong{font-size:clamp(12px,1.16vw,15px);line-height:1.2;font-weight:900;letter-spacing:.075em}
.system-phase__label span{font-size:10px;letter-spacing:.12em;color:#aac4ba;font-weight:700}
.system-phase.is-active .system-phase__icon{transform:translateY(-7px);background:#cce7d9;color:#143e32;box-shadow:0 0 32px rgba(179,244,207,.23)}
.system-phase.is-active .system-phase__icon svg{transform:scale(1.08)}
.system-phase.is-active .system-phase__status{background:#b8f1d5;box-shadow:0 0 0 6px rgba(184,241,213,.12)}
.system-phase.is-active .system-phase__top{color:#d1f1e3}
.system-flow__foot{display:flex;justify-content:space-between;align-items:center;padding:15px 30px 9px;border-top:1px solid rgba(255,255,255,.12);color:#b8d2c8;font-size:9px;letter-spacing:.19em;font-weight:800}
.system-flow__foot>span:first-child{display:flex;align-items:center;gap:9px}
.system-flow__pulse{width:5px;height:5px;border-radius:50%;background:#98dfbe;box-shadow:0 0 0 0 rgba(152,223,190,.3);animation:systemStatus 2s ease-out infinite}
@keyframes systemStatus{50%{box-shadow:0 0 0 6px rgba(152,223,190,0)}}
/* Components grid */
.system-components{padding:24px 0 88px;background:linear-gradient(to bottom,#fff,#f8faf9)}
.system-components__heading{display:flex;align-items:end;justify-content:space-between;gap:34px;padding-bottom:24px;margin-bottom:30px;border-bottom:1px solid var(--system-line)}
.system-components__heading .system-eyebrow{margin-bottom:18px}
.system-components__heading h2{font-size:clamp(35px,4.1vw,56px);line-height:1.06;letter-spacing:-.051em;font-weight:900;margin:0}
.system-components__heading h2 span{color:var(--system-forest)}
.system-components__aside{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:12px;font-size:10px;letter-spacing:.16em;font-weight:700;color:#7b908a;text-align:right}
.system-components__aside strong{font-size:19px;color:var(--system-forest);letter-spacing:.06em}
.system-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.system-card{position:relative;min-width:0;display:flex;flex-direction:column;background:#fff;border:1px solid rgba(47,79,79,.14);overflow:hidden;box-shadow:0 8px 32px rgba(23,48,44,.035);cursor:default;transition:border-color .45s ease,box-shadow .45s ease}
.system-card::before{content:"";position:absolute;left:-1px;top:-1px;z-index:4;width:60px;height:3px;background:var(--system-forest);transform-origin:left;transform:scaleX(.35);transition:transform .5s}
.system-card::after{content:"";position:absolute;right:-1px;bottom:-1px;z-index:4;width:3px;height:64px;background:var(--system-forest);transform-origin:bottom;transform:scaleY(.3);transition:transform .5s}
.system-card:hover{border-color:rgba(47,79,79,.44);box-shadow:0 22px 46px rgba(23,48,44,.11)}
.system-card:hover::before{transform:scaleX(1)}.system-card:hover::after{transform:scaleY(1)}
.system-card__media{height:clamp(180px,20vw,246px);width:100%;position:relative;overflow:hidden;background:#dae7e2}
.system-card__media img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;filter:saturate(.78) contrast(1.04);transition:transform 1.2s cubic-bezier(.16,1,.3,1),filter .8s ease}
.system-card:hover .system-card__media img{transform:scale(1.055);filter:saturate(.93) contrast(1.05)}
.system-card__media-grid{position:absolute;inset:0;pointer-events:none;background:linear-gradient(125deg,rgba(19,63,53,.14),transparent 42%),linear-gradient(to bottom,transparent 72%,rgba(10,39,32,.14));mix-blend-mode:multiply}
.system-card__media-corner{position:absolute;bottom:13px;left:13px;width:23px;height:23px;border-left:2px solid white;border-bottom:2px solid white;opacity:.8;transition:width .5s,height .5s}
.system-card:hover .system-card__media-corner{width:38px;height:38px}
.system-card__body{padding:26px 31px 34px;min-height:185px;display:flex;flex-direction:column}
.system-card__meta{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-bottom:18px;color:var(--system-forest);font-size:10px;font-weight:850;letter-spacing:.2em;text-transform:uppercase}
.system-card__index{font-size:11px;color:#92a8a1;font-family:monospace;letter-spacing:.08em;flex:none}
.system-card__body h3{font-size:clamp(20px,2.13vw,29px);line-height:1.17;letter-spacing:-.027em;color:#193b36;font-weight:800;margin:0 0 12px;max-width:560px}
.system-card__body p,.system-card__body li{font-size:clamp(14px,1.12vw,16px);line-height:1.62;color:#536560}
.system-card__body p{margin:0}
.system-card__body ul{list-style:none;margin:0;padding:0}
.system-card__body li{padding-left:18px;position:relative;margin:0 0 7px}
.system-card__body li::before{content:"";position:absolute;left:0;top:.65em;width:6px;height:6px;background:#6e9a89;transform:rotate(45deg)}
/* Closing brand statement */
.system-end{position:relative;overflow:hidden;background:#294941;color:#fff;padding:55px 0 61px}
.system-end::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.2;background-image:repeating-linear-gradient(90deg,transparent 0 92px,rgba(255,255,255,.13) 92px 93px);mask-image:linear-gradient(90deg,transparent,#000)}
.system-end__inner{position:relative;text-align:center}
.system-end__kicker{font-size:10px;font-weight:850;letter-spacing:.25em;color:#c5dcd2}.system-end__kicker span{color:#79ae97}
.system-end__inner p{font-size:clamp(30px,4.5vw,56px);line-height:1.14;letter-spacing:-.05em;font-weight:900;margin:22px 0 0}
.system-end__inner p span{color:#bbdbc8}
.system-end__trace{display:flex;align-items:center;gap:9px;width:min(520px,62%);margin:31px auto 0}
.system-end__trace span{flex:1;height:1px;background:linear-gradient(90deg,transparent,#c1e6d3);position:relative;overflow:hidden}
.system-end__trace span:last-child{transform:rotate(180deg)}
.system-end__trace span::before{content:"";inset:0;position:absolute;background:#fff;transform:translateX(-105%);animation:systemFinalRail 4s ease-in-out infinite}
.system-end__trace i{width:11px;height:11px;border:1px solid #e2f5e9;transform:rotate(45deg);animation:systemFinalDiamond 4s ease-in-out infinite}
@keyframes systemFinalRail{0%{transform:translateX(-105%)}70%,100%{transform:translateX(105%)}}
@keyframes systemFinalDiamond{0%,100%{transform:rotate(45deg) scale(.75);opacity:.5}50%{transform:rotate(225deg) scale(1.2);opacity:1}}
/* In-view transitions: progressive enhancement only, no hidden content without JS */
.system-js-enabled .system-reveal:not(.is-visible){opacity:0;filter:blur(3px);transform:translateY(34px)}
.system-js-enabled .system-card.system-reveal:not(.is-visible){transform:translate3d(-65px,18px,0)}
.system-js-enabled .system-card:nth-child(even).system-reveal:not(.is-visible){transform:translate3d(65px,18px,0)}
.system-reveal{transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1),filter .9s ease,border-color .45s,box-shadow .45s}
.system-reveal.is-visible{opacity:1;filter:none;transform:none}
.system-card.system-reveal.is-visible{opacity:1;filter:none;transform:none}
@media(max-width:1050px){.system-flow{padding-left:5px;padding-right:5px}.system-phase{padding:0 6px}.system-phase__icon{width:92px;height:92px}.system-flow__track{top:128px}.system-overview__intro{column-gap:5%}}
@media(max-width:760px){
 .system-layout{width:calc(100% - 30px)}.system-title{padding-bottom:8px}
 .system-overview{padding:14px 0 44px}.system-overview__intro{display:block;margin-bottom:28px}
 .system-overview__intro .system-eyebrow{margin-bottom:13px}.system-overview__intro h2{font-size:clamp(32px,8vw,47px);margin-bottom:16px}
 .system-overview__intro p{font-size:15px;line-height:1.7;margin-bottom:11px}
 .system-flow__header{padding:15px 17px;font-size:8px;letter-spacing:.11em}
 .system-flow{display:flex;flex-direction:column;padding:23px 24px 27px;gap:13px}
 .system-flow__track{left:53px;right:auto;top:42px;bottom:47px;height:auto;width:2px;background:rgba(210,242,224,.22)}
 .system-flow__progress{background:linear-gradient(180deg,transparent,#bfe8d1);animation:none}
 .system-phase{display:grid;grid-template-columns:63px 1fr;grid-template-rows:auto 1fr;align-items:center;text-align:left;column-gap:19px;row-gap:0;padding:0}
 .system-phase__top{grid-column:2;grid-row:1;justify-content:flex-start;gap:15px;padding:0}
 .system-phase__icon{grid-row:1 / 3;grid-column:1;width:63px;height:63px}
 .system-phase__icon svg{width:32px;height:32px}
 .system-phase__label{grid-row:2;grid-column:2;gap:4px;min-height:0;margin-top:6px}
 .system-phase__label strong{font-size:14px}.system-phase__label span{font-size:10px}
 .system-phase.is-active .system-phase__icon{transform:none}
 .system-flow__foot{padding:14px 17px 5px;font-size:8px;letter-spacing:.08em}
 .system-components{padding:16px 0 48px}
 .system-components__heading{align-items:start;margin-bottom:20px}.system-components__heading h2{font-size:clamp(30px,7vw,43px)}
 .system-components__aside{display:none}
 .system-cards{grid-template-columns:1fr;gap:17px}
 .system-card__media{height:clamp(180px,48vw,290px)}.system-card__body{padding:21px 23px 26px;min-height:0}
 .system-card__meta{margin-bottom:12px}.system-card__body h3{font-size:clamp(21px,5vw,28px)}
 .system-end{padding:46px 0}.system-end__kicker{font-size:8px}.system-end__trace{width:80%}
 .system-js-enabled .system-card.system-reveal:not(.is-visible),.system-js-enabled .system-card:nth-child(even).system-reveal:not(.is-visible){transform:translateY(32px)}
}
@media(max-width:430px){.system-flow__foot>span:last-child{font-size:7px}.system-eyebrow{font-size:9px;letter-spacing:.13em}.system-flow__header span:last-child{display:none}.system-components__heading h2{font-size:31px}}
@media(prefers-reduced-motion:reduce){.system-page *, .system-page *::before,.system-page *::after{animation:none!important;scroll-behavior:auto!important}.system-reveal,.system-js-enabled .system-reveal:not(.is-visible),.system-js-enabled .system-card.system-reveal:not(.is-visible){transition:none!important;filter:none!important;opacity:1!important;transform:none!important}}
/* Deliberate space between the two page-title words at all breakpoints. */
.system-title .osm-page-heading__title{gap:clamp(14px,2.1vw,27px)}