/* Home page (design B). Tokens come from /ds/tokens.css. Sections lock their own theme via data-theme so the bands
   alternate dark / light; the top bar and footer live in chrome.css. */
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/instrument-serif-italic-latin.woff2') format('woff2'); }
:root { --serif: 'Instrument Serif', Georgia, serif; }
html:not([lang="es"]) [data-lang="es"], html[lang="es"] [data-lang="en"] { display: none !important; }
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--ot-bg);color:var(--ot-text-primary);font:400 1rem/1.6 var(--ot-font-body);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(1.25rem,4vw,3rem)}
.kick{font:500 .75rem var(--ot-font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ot-brand-coral)}
h1,h2,h3{font-family:var(--ot-font-display);font-weight:500;letter-spacing:-.02em;line-height:1.1;text-wrap:balance}
h2{font-size:clamp(1.75rem,3.4vw,2.6rem)}
.lead{color:var(--ot-text-secondary);max-width:62ch}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 1.4rem;border-radius:.5rem;font:600 .9rem var(--ot-font-display);border:1.5px solid var(--ot-border);transition:.2s}
.btn.pri{background:var(--ot-brand-coral);border-color:var(--ot-brand-coral);color:var(--ot-bg)}
[data-theme=light] .btn.pri{color:#fff}
.btn:hover{transform:translateY(-1px)}
section{padding:clamp(4rem,3rem + 4vw,7rem) 0}
.band-alt{background:var(--ot-bg-elevated)}
.mono{font-family:var(--ot-font-mono)}
.chip{display:inline-block;font:500 .7rem var(--ot-font-mono);letter-spacing:.06em;text-transform:uppercase;padding:.25rem .6rem;border-radius:.3rem;border:1px solid var(--ot-border);color:var(--ot-text-secondary)}
.card{background:var(--ot-surface);border:1px solid var(--ot-border);border-radius:1rem;padding:1.5rem}
@media(max-width:820px){.foot .cols{grid-template-columns:1fr 1fr}}
.rv{opacity:0;translate:0 14px;transition:opacity .7s ease,translate .7s cubic-bezier(.2,.7,.2,1)}.rv.on{opacity:1;translate:0 0}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;translate:none}}
/* work cards (category-aware) */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.5rem 0 2rem}
.filters button{cursor:pointer;background:transparent;color:var(--ot-text-secondary);border:1px solid var(--ot-border);border-radius:99px;padding:.45rem 1rem;font:500 .85rem var(--ot-font-body)}
.filters button[aria-pressed=true]{background:var(--ot-text-primary);color:var(--ot-bg);border-color:var(--ot-text-primary)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.25rem}
.wc{display:flex;flex-direction:column;border:1px solid var(--ot-border);border-radius:1rem;overflow:hidden;background:var(--ot-surface);transition:.25s}
.wc:hover{transform:translateY(-3px);border-color:var(--ot-brand-coral)}
.wc .v{height:130px;display:grid;place-items:center;background:var(--v);color:var(--ot-text-primary);position:relative}
.wc .v svg{width:48px;height:48px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.wc .v .chip{position:absolute;top:.8rem;left:.8rem;background:var(--ot-bg);color:var(--ot-text-primary);border-color:var(--ot-border)}
.wc .b{padding:1.2rem 1.3rem 1.4rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.wc h3{font-size:1.08rem}.wc p{font-size:.9rem;color:var(--ot-text-secondary)}
.wc .m{margin-top:auto;font:600 .78rem var(--ot-font-mono);color:var(--ot-brand-coral);letter-spacing:.04em;text-transform:uppercase}
.wc[hidden]{display:none}
[data-theme=dark]{--c1:oklch(24% .07 330);--c2:oklch(22% .06 280);--c3:oklch(22% .06 30);--c4:oklch(23% .05 200)}
[data-theme=light]{--c1:oklch(86% .05 25);--c2:oklch(86% .04 300);--c3:oklch(88% .05 60);--c4:oklch(86% .04 200)}

em.s{font:italic 400 1.08em var(--serif);letter-spacing:0;color:var(--ot-brand-coral)}
.kick:before{content:"/ ";opacity:.7}
[data-theme]{color:var(--ot-text-primary)}
section{background:var(--ot-bg)}
.hero{padding:clamp(4rem,8vw,7rem) 0 clamp(3rem,6vw,5rem);background:radial-gradient(60% 50% at 80% 0,color-mix(in oklch,var(--ot-brand-coral) 22%,transparent),transparent),var(--ot-bg)}
.hero h1{font-size:clamp(2rem,8.2vw,4.3rem);letter-spacing:-.035em;max-width:16ch}
.hero .g2{display:grid;grid-template-columns:1.35fr 1fr;gap:3rem;align-items:center}@media(max-width:900px){.hero .g2{grid-template-columns:1fr}}
.dm{border:1.5px solid var(--ot-border);border-radius:1.1rem;background:var(--ot-surface);padding:1.3rem;display:grid;gap:.6rem}.dm div{display:flex;justify-content:space-between;font-size:.88rem;padding:.55rem 0;border-top:1px solid var(--ot-border-subtle)}.dm div:nth-child(2){border:0}.dm .o{color:var(--ot-success);font:600 .72rem var(--ot-font-mono)}.dm .w{color:var(--ot-warning);font:600 .72rem var(--ot-font-mono)}
.rot{position:relative;display:inline-block;white-space:nowrap;height:1.25em;max-width:100%;overflow:visible;vertical-align:top}
.rot-word{display:inline-block;font:italic 400 1.08em var(--serif);color:var(--ot-brand-coral);white-space:nowrap}
.rot-word.is-in{animation:rin .7s cubic-bezier(.2,.7,.2,1) .12s both}.rot-word.is-out{position:absolute;left:0;top:0;animation:rout .5s cubic-bezier(.4,0,.6,1) forwards}
@keyframes rin{0%{opacity:0;transform:translateY(.45em);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}@keyframes rout{to{opacity:0;transform:translateY(-.45em);filter:blur(3px)}}
.hero .lead{margin:1.6rem 0 2rem;font-size:1.12rem}
.hero .cta{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center}
.trust{margin-top:2.2rem;font:500 .75rem var(--ot-font-mono);letter-spacing:.06em;color:var(--ot-text-tertiary)}.trust b{color:var(--ot-text-secondary);font-weight:600}
/* flow */
.flowbox{margin-top:3.5rem}
.flow{display:grid;grid-template-columns:150px 1fr;gap:3.2rem;align-items:center}
@media(max-width:900px){.flow{grid-template-columns:1fr}.fl-wire{display:none}}
.fl-tools{list-style:none;padding:0;display:grid;gap:.55rem}
.fl-tools li{position:relative;border:1px solid var(--ot-border);border-radius:.5rem;padding:.55rem .8rem;font:500 .78rem var(--ot-font-mono);background:var(--ot-surface)}
.fl-wire{position:absolute;left:100%;top:50%;width:3.2rem;height:2px;background:linear-gradient(90deg,var(--ot-border) 50%,transparent 0) 0/8px 2px}
.fl-ev{position:absolute;left:0;top:-8px;opacity:0;padding:.05rem .4rem;border-radius:99px;background:var(--ot-brand-coral);color:#1a1210;font:600 .6rem var(--ot-font-mono)}
.fl-in{color:var(--ot-text-primary);border:1.5px solid var(--ot-border);border-radius:1.2rem;padding:1.2rem;background:var(--ot-bg-elevated);display:grid;grid-template-columns:1fr 1.1fr .7fr 1.3fr;gap:1.2rem;align-items:center;position:relative}
@media(max-width:900px){.fl-in{grid-template-columns:1fr 1fr}}@media(max-width:560px){.fl-in{grid-template-columns:1fr;padding-top:1.6rem}}
.fl-brand{position:absolute;top:-.7rem;left:1.2rem;background:var(--ot-bg);border:1px solid var(--ot-border);border-radius:99px;padding:.1rem .7rem;font:600 .65rem var(--ot-font-mono);letter-spacing:.08em}
.fl-stage .lb{font:500 .62rem var(--ot-font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ot-text-tertiary);margin-bottom:.5rem}
.fl-core{border:2px solid var(--ot-brand-coral);border-radius:.8rem;padding:.9rem;text-align:center;font:600 .85rem var(--ot-font-display)}.fl-core small{display:block;font:500 .65rem var(--ot-font-mono);color:var(--ot-text-secondary);margin-top:.2rem}
.fl-agents{list-style:none;padding:0;display:grid;gap:.4rem}.fl-agents li{border:1px solid var(--ot-border);border-radius:.45rem;padding:.4rem .6rem;font-size:.78rem;background:var(--ot-surface)}
.fl-ok{display:inline-block;margin-top:.6rem;padding:.2rem .6rem;border-radius:99px;font:600 .62rem var(--ot-font-mono);border:1px solid var(--ot-border);background:#ffffff14}
.fl-stack{position:relative;height:150px;min-width:0;clip-path:inset(-14px -2px 0 -2px)}.fl-in>*{min-width:0}.fl-res{position:absolute;left:0;right:0;top:0;height:46px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;border:1px solid var(--ot-border);border-radius:.55rem;padding:.45rem .75rem;font-size:.76rem;background:var(--ot-surface);transition:transform .55s cubic-bezier(.2,.7,.2,1),opacity .55s;transform:translateY(calc(var(--i)*52px));opacity:calc(1 - var(--i)*.22)}
.fl-res b{display:block;font:600 .58rem var(--ot-font-mono);letter-spacing:.06em;color:var(--ot-brand-coral)}
.fl-res.new{animation:rnew .5s ease both}@keyframes rnew{from{opacity:0;translate:0 -10px}}
.flow.run .fl-tools li{animation:glow .5s calc(var(--k)*.04s) both}
.flow.run .fl-ev{animation:ev .9s cubic-bezier(.4,0,.2,1) both;animation-delay:calc(var(--k)*.08s)}
.flow.run .fl-core{animation:glow .7s 1.5s both}.flow.run .fl-ok{animation:okay .7s 2.7s both}
@keyframes ev{0%{left:0;opacity:0}15%,80%{opacity:1}to{left:100%;opacity:0}}
@keyframes glow{0%,to{box-shadow:0 0 #0000}45%{box-shadow:0 0 0 4px color-mix(in oklch,var(--ot-brand-coral) 35%,transparent);border-color:var(--ot-brand-coral)}}
@keyframes okay{0%{background:#ffffff14}50%{background:var(--ot-brand-coral);color:#1a1210}to{background:#fafafa;color:#1a1917}}
/* bone band */
.bn{background:var(--ot-bg);color:var(--ot-text-primary)}
.how{display:grid;grid-template-columns:1fr 1fr;gap:3rem;margin-top:2.5rem}@media(max-width:800px){.how{grid-template-columns:1fr}}
.how .n{font:500 .8rem var(--ot-font-mono);color:var(--ot-brand-coral)}.how h3{font-size:1.3rem;margin:.4rem 0 .6rem}.how p{color:var(--ot-text-secondary)}
/* bento */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:1.1rem;margin-top:2.5rem}
.bento>div{border:1px solid var(--ot-border);border-radius:1.1rem;padding:1.5rem;background:var(--ot-surface);position:relative;overflow:hidden}
.b1{grid-column:span 3}.b2{grid-column:span 3}.b3{grid-column:span 2}.b4{grid-column:span 2}.b5{grid-column:span 2}
@media(max-width:900px){.bento>div{grid-column:span 6!important}}
.bento .big{font:500 3.4rem var(--ot-font-display);letter-spacing:-.03em;color:var(--ot-brand-coral);line-height:1}
.bento h3{font-size:1.15rem;margin:.6rem 0 .4rem}.bento p{font-size:.9rem;color:var(--ot-text-secondary)}
.pk{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2.5rem}@media(max-width:900px){.pk{grid-template-columns:1fr}}
.pk .card{display:flex;flex-direction:column;gap:.8rem}.pk .hl{border-color:var(--ot-brand-coral);box-shadow:0 0 0 1px var(--ot-brand-coral)}
.pk ul{padding:0;list-style:none;font-size:.88rem;color:var(--ot-text-secondary)}.pk li{padding:.45rem 0;border-top:1px solid var(--ot-border-subtle)}
.pk h3{font-size:1.25rem}.pk .pr{font:500 .78rem var(--ot-font-mono);color:var(--ot-text-tertiary)}
.princ{display:grid;grid-template-columns:1fr 1.4fr;gap:3rem}@media(max-width:800px){.princ{grid-template-columns:1fr}}
.princ li{list-style:none;border-top:1px solid var(--ot-border);padding:1.1rem 0}.princ b{font:600 1.05rem var(--ot-font-display)}.princ p{color:var(--ot-text-secondary);font-size:.92rem}.princ ul{padding:0}
details{border-top:1px solid var(--ot-border);padding:1.1rem 0}details:last-of-type{border-bottom:1px solid var(--ot-border)}summary{cursor:pointer;font:500 1.02rem var(--ot-font-display);list-style:none;display:flex;justify-content:space-between}summary:after{content:"+";color:var(--ot-brand-coral)}details[open] summary:after{content:"–"}details p{margin-top:.7rem;color:var(--ot-text-secondary);max-width:70ch}
.cta-end{text-align:center;background:radial-gradient(50% 80% at 50% 100%,color-mix(in oklch,var(--ot-brand-coral) 25%,transparent),transparent),var(--ot-bg)}.cta-end h2{font-size:clamp(2rem,4.6vw,3.4rem);max-width:18ch;margin:0 auto 1rem}.cta-end .lead{margin:0 auto 2rem}
.sv{display:grid;grid-template-columns:.9fr 1.3fr;gap:1.4rem;margin-top:2.5rem}@media(max-width:860px){.sv{grid-template-columns:1fr}}
.sv-tabs{display:grid;gap:.6rem;align-content:start}.sv-tabs button{text-align:left;cursor:pointer;color:var(--ot-text-primary);background:var(--ot-surface);border:1px solid var(--ot-border);border-radius:.9rem;padding:1rem 1.1rem;font:inherit;display:grid;gap:.15rem;transition:.2s}
.sv-tabs button b{font:600 1rem var(--ot-font-display)}.sv-tabs button small{color:var(--ot-text-secondary);font-size:.82rem}.sv-tabs button .nn{font:500 .7rem var(--ot-font-mono);color:var(--ot-brand-coral)}
.sv-tabs button[aria-selected=true]{border-color:var(--ot-brand-coral);box-shadow:0 0 0 1px var(--ot-brand-coral)}
.sv-panel{border:1px solid var(--ot-border);border-radius:1.1rem;padding:1.8rem;background:var(--ot-surface);min-height:100%}
.sv-panel h3{font-size:1.5rem;margin:.4rem 0 .8rem}.sv-panel p{color:var(--ot-text-secondary)}.sv-panel ul{padding:0;list-style:none;margin:1.2rem 0}.sv-panel li{padding:.6rem 0 .6rem 1.4rem;border-top:1px solid var(--ot-border-subtle);position:relative}.sv-panel li:before{content:"→";position:absolute;left:0;color:var(--ot-brand-coral)}
.sv-panel.sw{animation:swin .45s cubic-bezier(.2,.7,.2,1)}@keyframes swin{from{opacity:0;transform:translateY(10px);filter:blur(2px)}}
.caps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:2.2rem}@media(max-width:900px){.caps{grid-template-columns:1fr 1fr}}@media(max-width:560px){.caps{grid-template-columns:1fr}}
.caps .card h3{font:600 .8rem var(--ot-font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ot-brand-coral);margin-bottom:.8rem}.caps .chip{margin:.2rem .15rem .2rem 0}
.steps6{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem 1.6rem;margin-top:2.4rem;padding:0}@media(max-width:900px){.steps6{grid-template-columns:1fr 1fr}}@media(max-width:560px){.steps6{grid-template-columns:1fr}}
.steps6 li{list-style:none;border-top:2px solid var(--ot-brand-coral);padding-top:1rem}.steps6 h3{font-size:1.1rem;margin:.4rem 0 .5rem}.steps6 p{font-size:.9rem;color:var(--ot-text-secondary)}
.lab{display:grid;grid-template-columns:1.1fr 1fr;gap:2.5rem;align-items:center;padding:2.2rem;border:1.5px solid var(--ot-border);border-radius:1.25rem;background:var(--ot-surface)}@media(max-width:860px){.lab{grid-template-columns:1fr;padding:1.4rem}}
.lab ul{padding:0;list-style:none;margin:1.2rem 0 1.6rem}.lab li{padding:.55rem 0 .55rem 1.5rem;position:relative;border-top:1px solid var(--ot-border-subtle);font-size:.92rem}.lab li:before{content:"✓";position:absolute;left:0;color:var(--ot-success);font-weight:700}
.gate{display:flex;justify-content:space-between;gap:1rem;border:1px solid var(--ot-border);border-radius:.7rem;padding:.7rem 1rem;font-size:.88rem;background:var(--ot-bg-elevated)}.gates{display:grid;gap:.6rem;margin-top:1rem}.gate .ok{color:var(--ot-success);font:600 .72rem var(--ot-font-mono)}.gate .w{color:var(--ot-warning);font:600 .72rem var(--ot-font-mono)}
@media(max-width:820px){
}

section, header { scroll-margin-top: 64px; }
/* case cards */
.wc .v .ic { display: grid; place-items: center; }
.wc .v .ic svg { width: 48px; height: 48px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.wc .v svg { stroke: currentColor; }
.wc.feat .v { height: 190px; }
.wc.feat .v .ic svg { width: 64px; height: 64px; }
.wc.feat h3 { font-size: 1.25rem; }
.wc .tech { font: 500 .72rem var(--ot-font-mono); color: var(--ot-text-tertiary); }
.wc .go { font: 600 .85rem var(--ot-font-display); color: var(--ot-brand-coral); }
.wc.plain { cursor: default; } .wc.plain:hover { transform: none; border-color: var(--ot-border); }
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 2.2rem; }
@media (max-width: 980px) { .feat-grid { grid-template-columns: 1fr; } }
.all-head { margin-top: 4rem; }
.hero .g2 > * { min-width: 0; }
.skip{position:absolute;left:-999px;top:0;background:var(--ot-brand-coral);color:#1a1210;padding:.6rem 1rem;z-index:100;border-radius:0 0 .5rem 0}.skip:focus{left:0}
.sv-panels{min-width:0}.sv-panel[hidden]{display:none}
.hero .wrap.g2 > div:first-child{min-width:0}
.rot-word{display:inline-block;font:italic 400 1.08em var(--serif);color:var(--ot-brand-coral);white-space:nowrap}
.wc p{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.wc.feat p{-webkit-line-clamp:5}
.dm div{gap:.8rem}.dm div span:first-child{min-width:0}.dm div span.o,.dm div span.w{white-space:nowrap}

.anchor{display:block;height:0;position:relative;top:-64px;visibility:hidden}
.num{font:600 .8rem var(--ot-font-mono);color:var(--ot-brand-coral)}

/* contact strip: breathing room between the buttons and the LinkedIn line */
.cta-end .btn{margin:0 .35rem .75rem}
.cta-end .note{margin-top:2.25rem;padding-top:1.5rem;border-top:1px solid var(--ot-border);display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.35rem .6rem;font-size:.92rem;line-height:1.5;color:var(--ot-text-secondary)}
.cta-end .note a{font-weight:600;white-space:nowrap}

/* smooth motion */
:root{interpolate-size:allow-keywords;--ease:cubic-bezier(.22,.8,.26,1)}
details{transition:background-color .3s var(--ease)}
summary{transition:color .25s var(--ease);padding-right:.2rem}
summary:hover{color:var(--ot-brand-coral)}
summary::-webkit-details-marker{display:none}
summary:after,details[open] summary:after{content:"+";display:inline-block;transition:transform .35s var(--ease)}
details[open] summary:after{transform:rotate(135deg)}
details::details-content{block-size:0;overflow:hidden;opacity:0;transition:block-size .4s var(--ease),opacity .35s var(--ease),content-visibility .4s allow-discrete}
details[open]::details-content{block-size:auto;opacity:1}
.wc,.feat-grid>*,.sv-tab,.btn,.caps>*,.steps6>*{transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s var(--ease),background-color .3s var(--ease),color .25s var(--ease),opacity .3s var(--ease)}
.wc:hover{transform:translateY(-4px)}
@media (prefers-reduced-motion:reduce){details::details-content{transition:none}}