/* The training page, /training/ and /es/capacitacion/: one large stage per demo, with a plain "what's happening" panel beside it.
   The build scripts keep the iPhone and header sheets last in the head, so this sheet loads before them.
   The one rule the iPhone sheet would win on a tie carries #main. */
#main{
  --bg:#faf9f7;--card:#fff;--ink:#101b2c;--navy2:#07172b;--body:#4a5668;--muted:#6a6f77;
  --blue:#1463c9;--blue-dark:#0f4fa6;--wash:rgba(20,99,201,.07);
  --line:#e2e1de;--line2:#efefef;--good:#15803d;--bad:#b91c1c;
  color:var(--body);line-height:1.55;
}
#main [hidden]{display:none!important}
:where(#main) button{font:inherit;color:inherit;cursor:pointer}
:where(#main) :is(button,a,input):focus-visible{outline:3px solid var(--blue);outline-offset:2px}
:where(#main) :is(h1,h2,h3){color:var(--ink);font-weight:700;margin:0;letter-spacing:-.025em;text-wrap:balance}

.kick{font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.d1{font-size:clamp(36px,5.6vw,66px);line-height:1.04}
.d2{font-size:clamp(28px,3.6vw,42px);line-height:1.1}
.lede{font-size:clamp(17px,2vw,20px);color:var(--body);max-width:60ch}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.3em;padding:0 24px;border-radius:999px;background:var(--blue);color:#fff;border:0;font-weight:500;text-decoration:none}
#main .btn{min-height:48px}
.btn.alt{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn:disabled{opacity:.4;cursor:default}
.btn:not(.alt):not(:disabled):hover{background:var(--blue-dark);color:#fff}
.sec{padding-block:clamp(48px,7vw,80px)}
.small{font-size:13px;color:var(--muted)}

/* the hero says what we do before anyone plays. Navy with the blue glow, like Agents and AI Partner. */
.thero{background:radial-gradient(760px 560px at 80% 38%,rgba(20,99,201,.42),transparent 72%),var(--navy2);color:#c9d2de}
.thero-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:center;padding-block:clamp(30px,4.6vw,60px) clamp(34px,4.6vw,64px)}
.thero .kick{color:#a8b0ba}
#main .thero h1{margin-top:14px;color:#fff;font-size:clamp(38px,4vw,54px);line-height:1.05;letter-spacing:-.03em}
.thero h1 em{display:block;font-style:normal;white-space:nowrap;color:#9cc2ff}
.thero .lede{margin-top:16px;font-size:clamp(17px,1.6vw,19px);line-height:1.5;color:#c9d2de;max-width:52ch}
.thero .acts{margin-top:22px}
.thero .btn.alt{background:transparent;color:#fff;border-color:rgba(255,255,255,.34)}
.thero .btn.alt:hover{background:rgba(255,255,255,.08);color:#fff}
.thero .small{margin:14px 0 0;color:#a8b0ba}
/* What an owner or a parent gets, beside the headline. */
#main .thero-get .kick{margin:0 0 12px;color:#9cc2ff;font-size:12px;letter-spacing:.16em}
.thero-get ul{list-style:none;display:grid;gap:10px;margin:0;padding:0}
.thero-get li{display:flex;gap:14px;align-items:flex-start;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);border-radius:16px;padding:16px 18px}
.thero-ic{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:50%;background:rgba(156,194,255,.16);color:#9cc2ff}
.thero-ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.thero-get strong{display:block;color:#fff;font-size:18px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.thero-get div span{display:block;margin-top:3px;color:#a8b0ba;font-size:14.5px;line-height:1.42}
#try{scroll-margin-top:16px}
.tryh .lede{margin-top:8px}
@media(max-width:880px){
  .thero-grid{grid-template-columns:1fr}
  #main .thero h1{font-size:clamp(27px,8.5vw,44px)}
  .thero-get strong{font-size:17px}
}
@media(max-width:319px){.thero h1 em{white-space:normal}.thero-get li{padding:12px}}


/* demo frame */
.demo{background:var(--card);border:1px solid var(--line2);border-radius:16px;box-shadow:var(--shadow-feather);overflow:hidden}
.dg{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,1fr)}
.dstage{padding:14px;min-width:0}
.panel{border-left:1px solid var(--line2);padding:20px;display:flex;flex-direction:column;gap:14px;min-width:0}
/* A keyboard's focus waits here while a demo plays. There's nothing to press yet, so there's no ring. */
#main [data-side]:focus{outline:0}
.panel-h{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.panel h3{font-size:24px;line-height:1.15}
/* The extra room below keeps the mask from cutting the tails of g, j and y. */
.mask{overflow:hidden;padding-bottom:4px;margin-bottom:-4px}
.mask>*{display:block;animation:maskin .55s var(--ease) both}
@keyframes maskin{from{transform:translateY(120%)}to{transform:none}}
.cap{font-size:17px;line-height:1.5;color:var(--ink)}
.why{background:var(--wash);border-radius:12px;padding:12px 14px;font-size:15px;color:var(--ink)}
.why b{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);margin-bottom:2px}
.why.true{background:#fff6e4}
.why.true b{color:#8a5c0f}
.checks{display:grid;gap:6px;list-style:none;margin:0;padding:0;font-size:14px}
.checks li{display:flex;gap:8px;align-items:center;color:var(--muted)}
.checks i{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);flex:none;display:grid;place-items:center;font-style:normal;font-size:11px;color:#fff;transition:background .3s,border-color .3s}
.checks li.done{color:var(--ink)}
.checks li.done i{background:var(--good);border-color:var(--good)}
.acts{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
/* Stacked on a tall screen. A phone held sideways is too short for that, so it keeps the picture beside the words, as on a desktop. */
@media(max-width:880px) and (min-height:501px),(max-width:659px){
  .dg{display:flex;flex-direction:column}
  .dstage{display:contents}
  .dstage>.host{order:1;margin:12px 12px 0;width:calc(100% - 24px)}
  .dstage>.range-row,.dstage>.ctrl{order:1;margin-inline:12px}
  .panel{order:2;border-left:0;border-top:0}
  .dstage>.tray-h{order:1;margin:0 12px 6px}.dstage>.list{order:1;margin:0 12px}
}
@media(max-width:880px){.checks{display:none}}

/* while a tab loads, and when it can't. With JavaScript off, a noscript style in each page's head hides the box. */
.stagebox{position:relative}
#stage2:empty{min-height:clamp(320px,38vw,454px);background:#0b1626;border-radius:16px}
.waiting{position:absolute;inset:0;z-index:1;display:grid;place-content:center;justify-items:center;gap:12px;margin:0;color:#fff;font-size:15px;font-weight:500;pointer-events:none}
.waiting::before{content:"";width:36px;height:36px;border-radius:50%;border:3px solid rgba(255,255,255,.25);border-top-color:#fff;animation:turn 1s linear infinite}
/* Empty, it stays on the page with nothing to paint, so a screen reader hears the word when it arrives. */
.waiting:empty::before{content:none}
@keyframes turn{to{transform:rotate(360deg)}}
.host.notice{aspect-ratio:auto;min-height:clamp(180px,38vw,426px);display:grid;place-content:center;justify-items:center;gap:14px;padding:24px;text-align:center}
.host.notice .cap{color:#fff}
.no3d .dg{display:block}
.no3d .panel,.no3d .dstage>:not(.host){display:none}

/* answer buttons, and the mill's parts */
.tray-h{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.list{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:6px}
.dstage>.list{grid-template-columns:repeat(4,1fr)}
/* Two columns on a narrow screen. A short screen from 600 wide up keeps four, so the picture stays on screen with the last part. */
@media(max-width:599px),(max-width:640px) and (min-height:501px){.dstage>.list{grid-template-columns:1fr 1fr}}
@media(max-width:319px){.dstage>.list{grid-template-columns:1fr}}
.chip{display:flex;align-items:center;gap:6px;min-height:44px;width:100%;text-align:left;padding:6px 14px;border-radius:999px;border:1px solid var(--line);background:#fff;font-family:inherit;font-size:14px;line-height:1.2;letter-spacing:0;white-space:normal;color:var(--ink);transition:border-color .16s,background .16s}
.chip.used{opacity:.3;pointer-events:none}
.chip.no{animation:shake .32s}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.chip.right{border-color:var(--good);background:#eef8f1;font-weight:700}
.chip:disabled{cursor:default}
.chip.no:disabled,.chip.no{border-color:var(--bad);background:#fdf0f0}
.ans{display:grid;gap:8px}
.ans .chip{min-height:48px}
.chain{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center;font-size:13px}
.chain li{padding:3px 8px;border-radius:8px;background:var(--bg);border:1px dashed var(--line);color:var(--muted);font-weight:500}
.chain li.done{background:#eef8f1;border:1px solid var(--good);color:var(--ink)}
.chain li+li::before{content:"→";margin-right:6px;color:var(--muted)}

/* A short screen, like a phone held sideways. The picture stays in view while the words go past it, and it leaves room for what sits under it, so a slider or a part is never off the bottom.
   Clip keeps the card's corners without making the card its own scroller. Under 660 wide is too narrow to sit side by side, so it stays stacked with its picture capped. Today's smallest iPhone sideways is 667. */
@media(max-height:500px) and (min-width:660px){
  .demo{overflow:clip}
  .dstage{--under:28px;position:sticky;top:0;align-self:start}
  .dstage:has(.ctrl){--under:94px}
  .dstage:has(.range-row){--under:132px}
  .dstage:has(.list){--under:164px}
  .dstage>.host:not(.notice){width:min(100%,calc((100svh - var(--under))*16/9));margin-inline:auto}
  .dstage>.list .chip{padding:6px 8px;font-size:13px}
}
@media(max-height:500px) and (max-width:659px){
  .dstage>.host:not(.notice){width:min(calc(100% - 24px),calc((100svh - 120px)*16/9));margin-inline:auto}
}

/* sliders and numbers */
.range-row{margin-top:10px;display:grid;gap:2px}
/* 44 to touch and 32 in the page, so a slider is easy to grab and nothing around it moves. It sits above its neighbors so they can't take the taps at its edges. */
#main input[type=range]{position:relative;z-index:1;width:100%;accent-color:var(--blue);height:44px;margin:-6px 0}
/* Inside a label a slider sits on a line of text, and that line would grow by the same 6. */
#main .ctrl input[type=range]{vertical-align:-6px}
.nums{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.nums.four{grid-template-columns:1fr 1fr}
.nums div{background:var(--bg);border-radius:12px;padding:10px 12px;font-size:12px;color:var(--muted);line-height:1.25}
.nums b{display:block;font-size:24px;line-height:1.1;color:var(--ink);margin-bottom:2px;font-variant-numeric:tabular-nums}
.eq{background:var(--navy2);color:#fff;border-radius:12px;padding:12px 14px;font-weight:500;font-size:17px;line-height:1.35}
.eq small{display:block;color:#a9b8cc;font-size:14px;font-weight:400;margin-top:4px}
.ctrl{margin-top:12px;display:grid;gap:4px;font-size:14px;color:var(--ink);font-weight:500}
.ctrl:empty{display:none}
.lesson-map{display:flex;gap:4px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.lesson-map li{height:6px;flex:1;min-width:18px;border-radius:3px;background:var(--line)}
.lesson-map li.done{background:var(--blue)}

/* the 3D picture, with a soft film look */
.host{position:relative;width:100%;aspect-ratio:16/9;background:#0b1626;border-radius:16px;overflow:hidden}
.host::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,rgba(0,0,0,0) 58%,rgba(8,10,16,.34) 100%)}
.scene.webgl{display:block;width:100%;height:100%;background:#0b1626;filter:contrast(1.06) saturate(1.1)}

/* the pictures rendered in Blender */
.bubble{position:absolute;left:3%;right:3%;top:4%;z-index:2;background:#fff;color:#101b2c;border-radius:12px;padding:10px 14px;font-size:clamp(13px,1.7vw,18px);font-weight:500;line-height:1.3;box-shadow:0 8px 24px rgba(0,0,0,.28)}
.bubble.pop{animation:pop .32s var(--ease) both}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.meter{position:absolute;left:3%;bottom:4%;right:40%;z-index:2;background:rgba(7,23,43,.82);color:#fff;border-radius:12px;padding:7px 10px;font-size:12px;font-weight:500;display:grid;gap:4px}
.meter-bar{height:8px;border-radius:4px;background:rgba(255,255,255,.2);overflow:hidden}
.meter-bar i{display:block;height:100%;width:35%;border-radius:4px}
.host.photo{background:#191816}
.host.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .75s ease}
.host.photo img.on{opacity:1;animation:drift 16s ease-in-out infinite alternate}
@keyframes drift{from{transform:scale(1.01)}to{transform:scale(1.05) translate(-.6%,-.5%)}}
.deskcard{position:absolute;right:3%;bottom:4%;z-index:2;background:rgba(245,247,251,.94);color:#101b2c;border-radius:12px;padding:8px 11px;font-size:clamp(10px,1.25vw,13px);display:grid;gap:1px;min-width:27%;box-shadow:0 8px 22px rgba(0,0,0,.28)}
.deskcard b{font-size:.84em;letter-spacing:.06em;text-transform:uppercase;color:var(--blue)}
.deskcard span{display:flex;justify-content:space-between;gap:10px}
.deskcard i{font-style:normal;font-weight:700}
.deskcard i.red{color:#b91c1c}
/* The small labels. A short screen past 800 wide doesn't need them: its picture is wider than any upright phone's. */
@media(max-width:560px),(max-width:800px) and (max-height:500px){.bubble{font-size:12px;padding:6px 9px}.meter{right:48%;padding:4px 7px;font-size:10px}.deskcard{min-width:40%;padding:5px 8px;font-size:9.5px}}
/* Under 360 wide there's no room for both at that size, so the meter gives way and the card keeps its words whole. */
@media(max-width:359px){.meter{right:56%}}
/* Her words sit on top of the picture, and on a narrow one the longest would reach her eyes, so that picture gets taller. A wide view keeps the sign on the wall. */
@media(max-width:389px),(max-height:500px) and (max-width:679px){.host.photo:not(.site){aspect-ratio:3/2}.host.photo:not(.site) img[data-img^=wide]{object-position:20% 50%}}
@media(max-width:374px),(max-height:500px) and (max-width:659px){.host.photo:not(.site){aspect-ratio:4/3}}
/* Narrower than any phone, which Safari's text zoom can reach: the picture keeps its shape and her words, the card and the meter go under it. Margins space them, because a gap would also count each of the seven empty picture boxes. */
@media(max-width:319px){
  .host.photo:not(.site){aspect-ratio:auto;display:flex;flex-direction:column;padding-bottom:6px}
  .host.photo:not(.site)::before{content:"";padding-top:56.25%}
  .host.photo:not(.site) img{bottom:auto;height:auto;aspect-ratio:16/9}
  .host.photo:not(.site) :is(.bubble,.deskcard,.meter){position:static;margin:6px 6px 0;box-shadow:none}
  .deskcard i{flex:none}
}

/* the job site: one wide picture, fixes layered in soft patches, close-ups crossfaded over it */
.host.site .sitewide{position:absolute;inset:0;opacity:0;transition:opacity .75s ease;pointer-events:none;cursor:crosshair}
.host.site .sitewide.on{opacity:1;pointer-events:auto}
.host.site .sitewide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1;animation:none;transform:none}
.host.site .sitewide img.fix{opacity:0;transition:opacity .9s ease}
.host.site .sitewide img.fix.on{opacity:1}
.host.site img.shot{pointer-events:none}
.ping{position:absolute;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:3px solid #ff5a3c;box-shadow:0 0 22px rgba(255,90,60,.8);pointer-events:none;z-index:2}
.ping.go{animation:ping 1.1s ease-in-out 2}
@keyframes ping{0%{opacity:0;scale:.6}45%{opacity:1;scale:1}100%{opacity:0;scale:1.15}}

/* tabs */
.tabgroups{display:grid;grid-template-columns:1fr 2fr;gap:14px;margin:28px 0 14px}
.tg .kick{margin-bottom:6px}
.tabs{display:grid;gap:6px}
.tabs.two{grid-template-columns:repeat(2,1fr)}
.tabs.four{grid-template-columns:repeat(4,1fr)}
.tabs button{background:#fff;border:1px solid var(--line);border-radius:999px;min-height:54px;padding:6px 14px;font-weight:500;font-size:15px;line-height:1.2;color:var(--ink)}
.tabs button[aria-selected=true]{background:var(--blue);border-color:var(--blue);color:#fff}
.bizline{background:var(--navy2);color:#c9d3e0;border-radius:16px;padding:18px 22px;margin-top:14px;display:grid;grid-template-columns:auto 1fr;gap:6px 18px;align-items:baseline}
.bizline .kick{color:#8fa0b6}
.bizline p{color:#fff;font-size:clamp(17px,2vw,20px);font-weight:500}
@media(max-width:860px){.tabgroups{grid-template-columns:1fr}}
@media(max-width:700px){.bizline{grid-template-columns:1fr}}
@media(max-width:560px){.tabs.four{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.tabs button{font-size:13px;padding:6px 12px}}

/* lower sections */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
.card{background:#fff;border:1px solid var(--line2);border-radius:16px;padding:22px;box-shadow:var(--shadow-feather)}
.card h3{font-size:20px;margin-bottom:6px}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.pills span{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 14px;color:var(--ink);font-weight:500;font-size:15px}
.cta{background:var(--navy2);color:#c9d3e0;border-radius:24px;padding:clamp(28px,5vw,56px);text-align:center}
:where(#main) .cta h2{color:#fff;margin-bottom:10px}
.cta .btn{margin:18px 0 8px}
.cta .small{color:#8fa0b6}
@media(max-width:820px){.cards{grid-template-columns:1fr}}

/* parent request form: 12px fields, 48px pill button, 16px card */
.pcard{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,56px);background:var(--card);border:1px solid var(--line2);border-radius:16px;box-shadow:var(--shadow-feather);padding:clamp(22px,4vw,48px)}
.phead .lede{margin-top:12px}
.pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:18px 20px;margin-bottom:16px}
.pfield{display:grid;gap:6px;align-content:start;min-width:0;margin:0;padding:0;border:0}
.pfield.pfull{grid-column:1/-1}
fieldset.pfield{display:block}
.pfield>label,.pfield>legend{font-size:14px;font-weight:500;color:var(--ink);padding:0}
fieldset.pfield>legend{margin-bottom:6px}
.opt-note{color:var(--muted);font-weight:400}
.pfield :is(input:not([type=checkbox]),select,textarea){width:100%;min-width:0;min-height:48px;padding:10px 14px;border:1px solid #8a8984;border-radius:12px;background-color:#fff;color:var(--ink);font:inherit}
.pfield :is(input[type=text],input[type=email],input[type=tel],select,textarea){-webkit-appearance:none;appearance:none}
.pfield textarea{min-height:96px;resize:vertical}
.pfield select{padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%234a5668' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
.pfield :is(input,select,textarea):focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-color:var(--blue)}
.picks{display:flex;flex-wrap:wrap;gap:8px}
.pick{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:12px;background:#fff;font-size:15px;font-weight:500;color:var(--ink);cursor:pointer}
.pick input{width:20px;height:20px;margin:0;accent-color:var(--blue)}
.pick:has(input:checked){border-color:var(--blue);background:var(--wash)}
.pick:has(input:focus-visible){outline:3px solid var(--blue);outline-offset:2px}
#pform .btn{margin-top:18px;padding:0 32px}
/* While it sends the button says so, and the fade the other buttons get would make those words too faint to read. */
#pform .btn:disabled{opacity:.9}
.pfail{margin:14px 0 0;padding:14px 18px;border-radius:12px;background:#fdf0f0;border:1px solid var(--bad);color:var(--ink);font-weight:500;line-height:1.4;scroll-margin-bottom:16px}
/* A parent's way out when the form fails. 44 to touch, and it takes no more room in the line. */
.pfail a,.pfail a:hover{position:relative;color:inherit;font-weight:700;text-decoration:underline}
.pfail a::after{content:"";position:absolute;inset:-12px -4px}
@media(min-width:320px){.pfail a{white-space:nowrap}}
.pdone{display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:12px;background:#eef8f1;border:1px solid var(--good);color:var(--ink);font-size:clamp(18px,2.2vw,22px);font-weight:700;line-height:1.3}
.pdone::before{content:"\2713";flex:none;width:36px;height:36px;border-radius:50%;background:var(--good);color:#fff;display:grid;place-items:center;font-size:18px}
@media(max-width:900px){.pcard{grid-template-columns:1fr}}
@media(max-width:560px){#pform .btn{width:100%}}
/* Words stay whole at the narrowest Safari text zoom reaches. */
@media(max-width:259px){
  .tabs.two,.tabs.four{grid-template-columns:1fr}
  .chip{padding-inline:10px}
  .pick{padding-inline:8px;gap:6px}
  #main .btn,#pform .btn{padding-inline:10px}
}

/* less motion: pictures hold still, words and crossfades arrive at once */
@media(prefers-reduced-motion:reduce){
  #main *,#main *::before,#main *::after{animation:none!important;transition:none!important}
}