/* Editorial sections after the opening story. Hairline grid, mono labels, one cobalt accent. */
.sec{position:relative;padding:clamp(80px,9vw,140px) var(--gutter);border-top:1px solid var(--line)}
.sec:before,.contact:before{content:"+";position:absolute;top:-.72em;left:calc(var(--gutter) - .32em);font:22px/1 ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--cobalt);background:var(--paper);padding:0 2px}
.contact{position:relative}
.sec h2{font-size:clamp(36px,3.6vw,56px);margin-top:20px}
.sec-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(40px,6vw,110px);align-items:start}
.sec-copy{position:sticky;top:56px}
.sec-hint{margin-top:28px;font:13px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.col-label{font:12px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 12px}

/* Application window shared by the section views. */
.app{--a-rule:#dfe2dd;--a-muted:#5f6e74;--a-tint:#eaf0ff;background:#fcfcfa;color:#1f2d33;border:1px solid #d3d8d3;border-radius:6px;overflow:hidden;font-size:14px;line-height:1.45;font-variant-numeric:tabular-nums;box-shadow:0 40px 80px -48px #1f2d3366;container-type:inline-size}
.app .mono,.app-label{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.03em}
.app-bar{display:flex;align-items:center;gap:18px;height:44px;padding:0 18px;border-bottom:1px solid var(--a-rule);font-size:13px;color:var(--a-muted)}
.app-mark{display:flex;align-items:center;gap:8px;color:#1f2d33;font-weight:600}
.app-mark i{width:12px;height:12px;border:1.5px solid var(--cobalt);border-radius:2px;position:relative}.app-mark i:after{content:"";position:absolute;inset:2px 2px 2px 5px;background:var(--cobalt)}
.app-crumb b{color:#1f2d33;font-weight:500}.app-sp{flex:1}
.app-chip{border:1px solid var(--a-rule);padding:3px 9px;border-radius:3px;font-size:12px}
.app-label{font-size:12px;color:var(--a-muted);margin:0}
.app h3{font-size:20px;font-weight:550;letter-spacing:-.02em;margin:6px 0 0;line-height:1.25}
.tag{font-size:12px;border-radius:3px;padding:2px 7px;white-space:nowrap}
.tag-missing{color:#a8431d;border:1px dashed #d98a6b}
.tag-diff{color:#8a5a00;border:1px solid #e0c27a;background:#fff8e6}
.tag-done{color:var(--cobalt);border:1px solid #9db4ff;background:var(--a-tint)}

/* 04 Control: queue and detail. */
.queue{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
.queue-list{border-right:1px solid var(--a-rule);display:flex;flex-direction:column}
.queue-count{display:flex;gap:18px;margin:0;padding:14px 18px;border-bottom:1px solid var(--a-rule);font-size:13px;color:var(--a-muted)}.queue-count b{color:#1f2d33;font-weight:600}
.q-item{all:unset;box-sizing:border-box;display:grid;gap:6px;padding:16px 18px;border-bottom:1px solid var(--a-rule);cursor:pointer;position:relative}
.q-item:hover{background:#f5f6f2}
.q-item[aria-pressed=true]{background:var(--a-tint)}.q-item[aria-pressed=true]:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--cobalt)}
.q-item:focus-visible{outline:2px solid var(--cobalt);outline-offset:-2px}
.q-top,.q-meta{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;color:var(--a-muted)}
.q-item strong{font-weight:550;font-size:15px;line-height:1.35}
.q-item.is-done strong{color:var(--a-muted);font-weight:500}
.queue-detail{padding:22px 24px;background:#f8f8f5}
.queue-detail dl{display:grid;grid-template-columns:118px 1fr;gap:14px 16px;margin:22px 0 0;font-size:14px}
.queue-detail dt{color:var(--a-muted)}.queue-detail dd{margin:0}
.evidence{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px;padding-top:18px;border-top:1px solid var(--a-rule)}
.evidence span{font-size:13px;border:1px solid var(--a-rule);background:white;border-radius:3px;padding:6px 10px 6px 28px;position:relative}
.evidence span:before{content:"";position:absolute;left:10px;top:8px;width:10px;height:13px;border:1.3px solid #8c989c;border-radius:1px}
.evidence .missing{border-style:dashed;border-color:#d98a6b;color:#a8431d;background:transparent}.evidence .missing:before{border-style:dashed;border-color:#d98a6b}
@container (max-width:640px){.queue{grid-template-columns:1fr}.queue-list{border-right:0}.queue-detail dl{grid-template-columns:1fr;gap:4px}.queue-detail dd{margin-bottom:10px}}

/* 05 Access: one record, three roles. */
.roles{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:16px}
.roles .mono{font-size:12px;color:var(--muted);margin-right:10px;letter-spacing:.06em}
.roles button{font:inherit;font-size:14px;background:none;border:1px solid var(--line);color:var(--ink);padding:8px 14px;border-radius:3px;cursor:pointer}
.roles button:hover{border-color:var(--ink)}
.roles button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:white}
.roles button:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px}
.app-user{display:flex;align-items:center;gap:8px}.app-user i{font-style:normal;width:24px;height:24px;border-radius:50%;background:#1f2d33;color:white;font-size:10px;display:grid;place-items:center}
.record{padding:22px 24px 24px}
.record-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding-bottom:18px;border-bottom:1px solid var(--a-rule)}
.record-time{margin:0;font-size:13px;color:var(--a-muted)}
.record-cols{display:grid;grid-template-columns:1.25fr 1fr;gap:28px;margin-top:20px}
.fields,.actions{list-style:none;margin:0;padding:0}
.fields li{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--a-rule)}
.fields li span{color:var(--a-muted)}.fields li b{font-weight:550;text-align:right;transition:opacity .2s}
.actions li{padding:11px 0 11px 30px;border-bottom:1px solid var(--a-rule);position:relative;transition:color .2s}
.actions li:before{content:"";position:absolute;left:0;top:13px;width:16px;height:16px;border-radius:3px;border:1.5px solid var(--cobalt);background:var(--cobalt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='1.8'/%3E%3C/svg%3E") center/14px no-repeat}
/* Locked states, driven by data-view on the window. */
[data-view=ruta] [data-ruta=no],[data-view=sup] [data-sup=no],[data-view=adm] [data-adm=no]{color:#9aa5a8}
[data-view=ruta] .fields [data-ruta=no] b,[data-view=sup] .fields [data-sup=no] b,[data-view=adm] .fields [data-adm=no] b{font-size:0}
[data-view=ruta] .fields [data-ruta=no] b:after,[data-view=sup] .fields [data-sup=no] b:after,[data-view=adm] .fields [data-adm=no] b:after{content:"Sin acceso";font-size:13px;font-weight:400;color:#9aa5a8;padding:1px 8px;background:repeating-linear-gradient(135deg,#eef0ec 0 4px,#f8f8f5 4px 8px);border-radius:2px}
[data-view=ruta] .actions [data-ruta=no]:before,[data-view=sup] .actions [data-sup=no]:before,[data-view=adm] .actions [data-adm=no]:before{background:transparent;border-color:#c3cacb}
.record-note{margin:20px 0 0;padding:12px 14px;background:var(--a-tint);border-left:3px solid var(--cobalt);font-size:14px}
@container (max-width:600px){.record-cols{grid-template-columns:1fr;gap:20px}.app-user b{display:none}}

/* 06 Connected work: the operation's route. */
.sec-head{max-width:1180px}
.sec-head .intro{max-width:560px}
.sec-head-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,110px);align-items:end;max-width:none}
.route{margin:56px 0 0}
.route-art{position:relative;aspect-ratio:1672/941;overflow:hidden;border:1px solid var(--line)}
.route-art>img,.route-art>svg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.route-line{fill:none;stroke:var(--cobalt);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.route-room{stroke:#f4f3ee}
.route-stop circle{fill:var(--cobalt);stroke:#f4f3ee;stroke-width:3}
.route-stop text{fill:white;font:600 16px Inter,Arial,sans-serif;text-anchor:middle}
.js-route .route-line{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--route,1))}
.js-route .route-stop{opacity:0;transition:opacity .25s}.js-route .route-stop.on{opacity:1}
.route-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--line)}
.route-steps li{padding:28px 32px 30px 0;border-left:1px solid var(--line);padding-left:28px}
.route-steps li:first-child{border-left:0;padding-left:0}
.route-steps .mono{font-size:13px;color:var(--cobalt);letter-spacing:.04em}
.route-steps h3{font-size:24px;font-weight:500;letter-spacing:-.03em;margin:10px 0 10px}
.route-steps p{margin:0;font-size:16px;color:var(--ink)}
.route-steps .receives{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line);font-size:15px;color:var(--muted)}.route-steps .receives b{color:var(--ink);font-weight:550}

/* 07 Method: numbered rows, not cards. */
.method{list-style:none;margin:64px 0 0;padding:0;border-top:1px solid var(--ink)}
.method li{display:grid;grid-template-columns:80px minmax(0,1.1fr) minmax(0,2fr) minmax(0,1.2fr);gap:24px;align-items:baseline;padding:30px 0;border-bottom:1px solid var(--line)}
.method .mono{font-size:13px;color:var(--cobalt)}
.method h3{margin:0;font-size:clamp(26px,2.4vw,36px);font-weight:450;letter-spacing:-.04em}
.method p{margin:0;font-size:16px;max-width:520px}
.method .method-out{font:13px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);text-align:right}

/* Contact and footer. */
.contact h2{max-width:1000px}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,110px);margin-top:56px;padding-top:28px;border-top:1px solid var(--line)}
.contact-lead{font-size:20px;line-height:1.45;max-width:480px;margin:0}
.contact-mail{display:inline-flex;gap:16px;margin-top:30px;font-size:clamp(20px,2vw,28px);color:var(--cobalt);border-bottom:1px solid var(--cobalt);padding-bottom:10px;letter-spacing:-.02em}
.contact-mail:hover{color:#123cc7}
.bring{margin:0;padding:0;list-style:none;counter-reset:b}
.bring li{counter-increment:b;display:grid;grid-template-columns:40px 1fr;padding:12px 0;border-bottom:1px solid var(--line);font-size:16px}
.bring li:before{content:"0" counter(b);font:13px/1.9 ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--cobalt)}
.site-footer{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px 40px;padding:44px var(--gutter) 36px;border-top:1px solid var(--line);font-size:14px}
.site-footer .wordmark{font-size:22px}.foot-brand p{margin:8px 0 0;color:var(--muted)}
.site-footer nav{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:flex-start}.site-footer nav a:hover{color:var(--cobalt)}
.foot-note{grid-column:1/-1;margin:0;padding-top:20px;border-top:1px solid var(--line);color:var(--muted);font-size:13px}

@media(max-width:900px){
  .sec-grid,.sec-head-split,.contact-grid{grid-template-columns:1fr}
  .sec-copy{position:static}
  .route-steps{grid-template-columns:1fr}
  .route-steps li{border-left:0;padding:24px 0;border-top:1px solid var(--line)}
  .route-steps li:first-child{border-top:0}
  .method li{grid-template-columns:48px 1fr;gap:8px 16px}
  .method li p{grid-column:2}
  .method .method-out{text-align:left}
  .site-footer{grid-template-columns:1fr}
  .stage-bottom .chapter-nav{display:none}
}
@media(max-width:600px){
  .sec h2{font-size:34px}
  .app-bar{gap:12px;padding:0 14px}.app-crumb{display:none}
  .queue-detail,.record{padding:18px 16px}
  .q-item{padding:14px 16px}
  .route{margin-top:36px}
  .route-art{margin:0 calc(var(--gutter)*-1);border-inline:0}
  .route-room{stroke:#f4f3ee}
.route-stop circle{r:26px}.route-stop text{font-size:28px}
  .contact-lead{font-size:18px}
}

/* Projected platform screen inside the route figure, with the operator kept in front. */
.route-space{position:absolute;left:0;top:0;width:1672px;height:941px;transform-origin:0 0;pointer-events:none;clip-path:path(evenodd,'M0 0H1672V941H0Z M1303 560C1304 533 1329 509 1362 503C1394 494 1423 505 1446 526L1460 548 1472 555 1481 584 1465 607 1442 627 1432 649 1491 672 1538 720 1580 789 1585 941H1267L1247 881 1199 860 1171 839 1169 803 1182 765 1196 719 1237 689 1278 679 1303 658 1314 637 1304 615 1294 595Z')}
.route-screen{position:absolute;left:0;top:0;transform-origin:0 0}
.route-stop text{font-size:22px}
@media(max-width:600px){.route-art{aspect-ratio:4/3}}
@media(max-width:600px){.header nav a[href="#como-trabajamos"]{display:none}}

/* 06 inside the stage: OP-024's route over the scene. */
.route-track{fill:none;stroke:var(--cobalt);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--route,0))}
.route-track-room{stroke:#f4f3ee;stroke-width:2.5}
.enhanced[data-state="6"] .route-annotations{opacity:1}
.route-annotations .annotation{opacity:0;transition:opacity .25s}
.route-annotations .annotation.on{opacity:1}
.annotations .in-room .leader{stroke:#f4f3ee}
.annotations .in-room .anchor{stroke:#f4f3ee;fill:#164bff}
.annotations .in-room text{fill:#f4f3ee;stroke:#164bff}
.annotations .r-review .micro-label,.annotations .r-admin .micro-label,.annotations .r-field .micro-label{font-family:Inter,Arial,sans-serif;font-size:19px;letter-spacing:0}

/* Stage states 04-06 share the review composition. */
.enhanced[data-state="4"] .drawing,.enhanced[data-state="5"] .drawing,.enhanced[data-state="6"] .drawing{opacity:0!important}
.enhanced[data-state="4"] .focus-drawing,.enhanced[data-state="5"] .focus-drawing,.enhanced[data-state="6"] .focus-drawing{opacity:1}
.enhanced[data-state="4"] .header nav a,.enhanced[data-state="5"] .header nav a,.enhanced[data-state="6"] .header nav a{color:white}
.enhanced[data-state="4"] .disclosure,.enhanced[data-state="5"] .disclosure{color:var(--muted)}
.role-steps{display:none}
.enhanced .role-steps{display:grid;list-style:none;margin:28px 0 0;padding:0;border-top:1px solid var(--line);max-width:calc(33vw - var(--gutter) - 24px)}
.enhanced .role-steps li{display:flex;gap:14px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--line);color:var(--muted);cursor:pointer;transition:color .2s}
.enhanced .role-steps .mono{font-size:12px}
.enhanced[data-role=ruta] .role-steps [data-role=ruta],.enhanced[data-role=sup] .role-steps [data-role=sup],.enhanced[data-role=adm] .role-steps [data-role=adm]{color:var(--ink);font-weight:550;box-shadow:inset 3px 0 var(--cobalt);padding-left:12px}
.enhanced .chapter-nav{gap:20px}.enhanced .chapter-nav a{min-width:0}
.sec-figure .app{margin:0}
.sec-figure{padding-inline:var(--gutter)}
.sec-figure .route-art{margin-inline:calc(var(--gutter)*-1)}
.sec-figure .route-steps{margin-top:0}

/* Step nav on its own paper plate so it reads over photo, paper and cobalt alike. */
.enhanced .stage-bottom .chapter-nav{background:#f4f3eef0;padding:0 16px;border-radius:3px;gap:18px;color:var(--ink);text-shadow:none;box-shadow:0 1px 0 #00000010}
.enhanced .stage-bottom .chapter-nav a{border-top:2px solid transparent;color:var(--muted);padding:10px 0 9px}
.enhanced .stage-bottom .chapter-nav span{color:var(--muted);text-shadow:none}
.enhanced .stage-bottom .chapter-nav a[aria-current=step]{border-top-color:var(--cobalt);color:var(--ink)}
.enhanced .stage-bottom .chapter-nav a[aria-current=step] span{color:var(--cobalt)}
.enhanced .stage-bottom .chapter-nav a:hover{color:var(--ink)}
@media(max-width:600px){
  .roles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .roles .mono{grid-column:1/-1;margin:0 0 2px}
  .roles button{padding:9px 6px;font-size:13px;line-height:1.25}
}
.route-space{clip-path:none}
.q-past{margin:0;padding:12px 18px;border-bottom:1px solid var(--a-rule);display:grid;gap:3px;font-size:13px;color:var(--a-muted)}
.q-past span:last-child{color:#7c898d}
.app-embed .q-past{font-size:13.5px}
.enhanced .zoom-wash{background:linear-gradient(90deg,var(--paper) 0,var(--paper) calc(var(--wash-end,34vw) - 2px),#f4f3ee00 var(--wash-end,34vw))}
.route-arrow{fill:none;stroke:#f4f3ee;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.enhanced[data-state="3"] .header nav a,.enhanced[data-state="4"] .header nav a,.enhanced[data-state="5"] .header nav a,.enhanced[data-state="6"] .header nav a{text-shadow:0 0 6px #164bff,0 0 2px #164bff}
.contact:before{content:none}
.enhanced[data-state="0"] .disclosure{text-shadow:0 1px 3px #0b1f3a,0 0 10px #0b1f3a99}
.ground{display:none}
.enhanced .ground{display:block;position:absolute;inset:0;width:100%;height:100%;opacity:var(--drawing,0);mix-blend-mode:multiply;pointer-events:none}

/* Cómo trabajamos: the example operation as a schematic map that builds with each stage. */
.method-wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(40px,6vw,110px);margin-top:64px;align-items:start}
.method-wrap .method{margin:0}
.method-wrap .method li{grid-template-columns:64px 1fr;gap:16px;padding:40px 0;min-height:34vh;align-content:start;transition:opacity .3s}
.method-wrap .method li>div{display:grid;gap:12px}
.method-wrap .method .method-out{text-align:left}
.js-method .method li{opacity:.38}.js-method .method li.on{opacity:1}
.opmap{position:sticky;top:12vh;margin:0;border:1px solid var(--line);background:#f7f6f2;padding:24px 24px 16px}
.opmap svg{display:block;width:100%;height:auto;overflow:visible}
.opmap figcaption{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-top:8px}
.om-routes path,.om-new{fill:none;stroke:#8f9a9d;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.om-links path{fill:none;stroke:#b4bbb9;stroke-width:1.5;stroke-dasharray:3 5}
.om-nodes circle,.om-nodes rect{fill:#f7f6f2;stroke:var(--ink);stroke-width:2.5}
.om-l{font:500 15px Inter,Arial,sans-serif;fill:var(--ink);text-anchor:middle}
.om-s{font:12px ui-monospace,SFMono-Regular,Consolas,monospace;fill:var(--muted);letter-spacing:.06em;text-anchor:middle}
.om-n{font:13px ui-monospace,SFMono-Regular,Consolas,monospace;fill:var(--cobalt)}
.om-start{text-anchor:start}.om-end{text-anchor:end}.om-c{text-anchor:middle}
.om-ring{fill:none;stroke:var(--cobalt);stroke-width:2;stroke-dasharray:4 4}
.om-new{stroke:var(--cobalt);stroke-width:3;stroke-dasharray:7 7}
.om-newnode{fill:#f7f6f2;stroke:var(--cobalt);stroke-width:2.5}
.om-r04,.om-p2,.om-p3,.om-p4,.om-new{transition:opacity .35s,stroke .35s}
.opmap .om-p2,.opmap .om-p3,.opmap .om-p4,.opmap .om-new{opacity:0}
.opmap[data-step="2"] .om-p2,.opmap[data-step="3"] .om-p2,.opmap[data-step="4"] .om-p2{opacity:1}
.opmap[data-step="3"] .om-p3,.opmap[data-step="4"] .om-p3{opacity:1}
.opmap[data-step="3"] .om-r04,.opmap[data-step="4"] .om-r04{stroke:var(--cobalt)}
.opmap[data-step="4"] .om-p4,.opmap[data-step="4"] .om-new{opacity:1}
@media(max-width:900px){.method-wrap{grid-template-columns:1fr}.opmap{position:static;order:-1}.method-wrap .method li{min-height:0;padding:28px 0}}
@media(max-width:900px){.method-wrap .method li{grid-template-columns:40px 1fr;gap:12px}.method-wrap .method li p{grid-column:auto}}
@media(max-width:600px){
  .opmap{margin-inline:calc(var(--gutter)*-1);border-inline:0;padding:16px 12px 12px}
  .om-l{font-size:22px}.om-n{font-size:18px}.om-s{font-size:17px}
  .om-nodes circle{r:11px}
  .opmap figcaption{padding-inline:var(--gutter)}
}