/* ============================================================
   JobIn — Aurora · «Quiénes somos» (28/10/2026). Página larga dentro de la app; colores de jobin-tokens.css.
============================================================ */
#quienes{position:relative}
#quienes .qs{position:relative;margin:-34px -5.5% 0;padding:0;color:var(--ink);font-family:var(--font);overflow:clip}
#quienes .qs-light{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 40% 30% at 70% 0%,rgba(var(--p1-rgb),.16),transparent 70%)}
:root[data-theme="dark"] #quienes .qs-light{background:radial-gradient(ellipse 40% 30% at 70% 0%,rgba(var(--p1-rgb),.28),transparent 70%)}
#quienes .qs section{position:relative;padding:72px 56px;max-width:1240px;margin:0 auto}
#quienes .qs-eyebrow{font:500 12px/1 var(--font-mono);letter-spacing:.12em;color:var(--muted);text-transform:uppercase}
#quienes .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
#quienes .reveal.in{opacity:1;transform:none}
#quienes .reveal[data-d="1"]{transition-delay:.08s}#quienes .reveal[data-d="2"]{transition-delay:.16s}#quienes .reveal[data-d="3"]{transition-delay:.24s}
#quienes .qs-btn{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 22px;border-radius:999px;border:0;background:var(--blue);color:var(--btn-ink);font:600 15px var(--font);letter-spacing:-.01em;box-shadow:var(--btn-shadow);cursor:pointer;transition:transform .15s ease,filter .2s ease}
@media (hover:hover) and (pointer:fine){#quienes .qs-btn:hover{filter:brightness(1.06)}}#quienes .qs-btn:active{transform:scale(.98)}
#quienes .num{font:500 1em/1 var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:-.04em;color:var(--ink)}
/* Manifiesto */
#quienes .qs-hero{min-height:640px;display:flex;flex-direction:column;justify-content:center;padding-top:96px}
#quienes .qs-h1{margin:18px 0 22px;font:800 clamp(40px,5.3vw,76px)/.98 var(--font);letter-spacing:-.045em;max-width:17ch}
#quienes .qs-h1 .w{display:inline-block;opacity:0;transform:translateY(.5em);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--i,0)*60ms)}
#quienes .qs-h1.in .w{opacity:1;transform:none}
#quienes .qs-h1 .soft{color:var(--titular-2);padding-bottom:.1em;margin-bottom:-.1em}
#quienes .qs-lead{margin:0;color:var(--muted);font-size:20px;line-height:1.5;max-width:58ch}
#quienes .qs-scroll{position:absolute;left:56px;bottom:28px;display:flex;align-items:center;gap:10px;font:500 10px var(--font-mono);letter-spacing:.16em;color:var(--muted)}
#quienes .qs-scroll i{width:1px;height:36px;background:linear-gradient(var(--ink),transparent);animation:qs-caer 1.6s ease-in-out infinite}
@keyframes qs-caer{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
/* Marquesina */
#quienes .qs-marquee{padding:36px 0 44px;max-width:none;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
#quienes .qs-marquee .qs-eyebrow{display:block;padding:0 56px 18px}
#quienes .mq{overflow:hidden;white-space:nowrap;mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
#quienes .mq div{display:inline-block;font:700 40px/1.3 var(--font);letter-spacing:-.03em;color:var(--ink);animation:qs-slide 46s linear infinite;padding-right:16px}
#quienes .mq.rev div{animation-direction:reverse;color:var(--muted);font-size:30px}
@keyframes qs-slide{to{transform:translateX(-50%)}}
/* Problema */
#quienes .qs-h2{margin:14px 0 0;font:800 clamp(30px,3.3vw,46px)/1.04 var(--font);letter-spacing:-.035em;max-width:24ch}
#quienes .qs-h2 em{font-style:normal;color:var(--titular-2)}
#quienes .qs-split{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:40px;align-items:start}
#quienes .tag{display:inline-block;font:600 11px var(--font-mono);letter-spacing:.14em;color:var(--muted);padding:7px 11px;border:1px solid var(--line);border-radius:999px;margin-bottom:18px}
#quienes .tag.on{background:var(--p2);color:#04050a;border-color:transparent}
#quienes .antes{position:relative;z-index:1}#quienes .ahora{position:relative;z-index:2}
#quienes .tabs{position:relative;height:320px}
#quienes .tab{position:absolute;left:calc(50% - 120px);top:calc(50% - 36px);width:240px;padding:12px 14px;border-radius:12px;background:var(--white);border:1px solid var(--line);box-shadow:0 20px 50px rgba(11,16,32,.12);transition:transform 1s var(--ease);display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center}
:root[data-theme="dark"] #quienes .tab{box-shadow:0 20px 50px rgba(0,0,0,.35)}
#quienes .tab .dot{width:10px;height:10px;border-radius:50%;background:var(--line);grid-row:span 2}
#quienes .tab b{font:600 14px var(--font);color:var(--ink)}
#quienes .tab small{font:500 11px var(--font-mono);color:var(--muted)}
#quienes .in .tabs .tab{transform:rotate(var(--r)) translate(var(--x),var(--y))}
#quienes .antes p,#quienes .ahora p{margin:18px 0 0;color:var(--muted);font-size:16px;max-width:40ch}
#quienes .qs-card{padding:22px;border:1px solid var(--line);border-radius:20px;background:var(--white);display:flex;flex-direction:column;gap:12px}
#quienes .qs-card .co{display:flex;align-items:center;gap:10px;font:500 13px var(--font);color:var(--muted)}
#quienes .qs-card .co i{width:28px;height:28px;border-radius:8px;background:var(--soft);border:1px solid var(--line);display:grid;place-items:center;font:700 12px var(--font);font-style:normal;color:var(--ink)}
#quienes .qs-card h3{margin:0;font:600 19px/1.25 var(--font);letter-spacing:-.015em;color:var(--ink)}
#quienes .qs-card .meta{color:var(--muted);font-size:13px}
#quienes .qs-card .dl{font:500 12px var(--font-mono);letter-spacing:.04em;color:var(--muted)}
#quienes .qs-card .dl b{color:var(--ink);font-weight:600}
/* Cifras */
#quienes .qs-cifras{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;max-width:none;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:64px 56px}
#quienes .qs-cifras b{display:block;font-size:clamp(48px,6vw,84px);line-height:1;color:transparent;background:linear-gradient(180deg,var(--num-from),var(--num-to));-webkit-background-clip:text;background-clip:text;margin-bottom:10px}
#quienes .qs-cifras span{color:var(--muted);font-size:15px}
/* Escena de sectores */
#quienes .qs-sectores{padding:0;max-width:none;height:calc(8*min(70vh,640px) + min(100vh,860px))}
#quienes .stage{--mx:0;--my:0;--sub:0;position:sticky;top:0;height:min(100vh,860px);display:grid;grid-template-columns:64px 1fr;grid-template-rows:auto 1fr auto;padding:28px 40px 24px;box-sizing:border-box;outline:none;overflow:clip;background:var(--paper)}
#quienes .st-top{grid-column:1/3;display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
#quienes .st-top .qs-eyebrow b{color:var(--ink);font-weight:500}
#quienes .st-nav{display:flex;align-items:center;gap:10px;font:500 12px var(--font-mono);letter-spacing:.12em;color:var(--muted)}
#quienes .st-nav .cnt{font:600 22px var(--font-mono);letter-spacing:-.04em;color:var(--ink)}
#quienes .st-nav button{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink);font-size:16px;cursor:pointer;transition:background .2s,transform .15s}
@media (hover:hover) and (pointer:fine){#quienes .st-nav button:hover{background:var(--soft)}}#quienes .st-nav button:active{transform:scale(.94)}
#quienes .idx{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;justify-content:center;gap:10px;position:relative;z-index:3}
#quienes .idx li{display:flex;align-items:center;gap:10px;cursor:pointer;color:var(--muted);font:600 13px var(--font);height:30px}
#quienes .idx li i{font:500 11px var(--font-mono);letter-spacing:.1em;font-style:normal;width:26px;height:26px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;transition:border-color .3s,color .3s,background .3s;flex:none}
#quienes .idx li span{white-space:nowrap;opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .3s;background:var(--paper);padding:4px 10px;border-radius:999px;border:1px solid var(--line)}
#quienes .idx li.on span{opacity:1;transform:none}@media (hover:hover) and (pointer:fine){#quienes .idx li:hover span{opacity:1;transform:none}}
#quienes .idx li.on{color:var(--ink)}
#quienes .idx li.on i{border-color:var(--blue);color:var(--blue);background:var(--blue-soft)}
#quienes .slides{position:relative;min-width:0;margin-left:24px}
#quienes .slide{position:absolute;inset:0;display:grid;grid-template-columns:1.1fr 1fr;grid-template-rows:1fr auto;gap:20px 36px;padding:36px;opacity:0;transform:translateY(60px);pointer-events:none;transition:opacity .75s var(--ease),transform .75s var(--ease);border-radius:24px;overflow:clip;border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.25))}
:root[data-theme="dark"] #quienes .slide{background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01))}
#quienes .slide.on{opacity:1;transform:none;pointer-events:auto}
#quienes .slide.past{transform:translateY(-60px)}
#quienes .slide .txt{position:relative;z-index:2;grid-column:1;grid-row:1;min-width:0}
#quienes .slide .big{display:block;font:500 clamp(72px,9vw,132px)/.9 var(--font-mono);letter-spacing:-.06em;color:transparent;background:linear-gradient(180deg,var(--num-from),var(--num-to));-webkit-background-clip:text;background-clip:text;transform:translate(calc(var(--mx)*6px),calc(var(--my)*4px))}
#quienes .slide .big+.qs-eyebrow{display:block;margin-top:8px}
#quienes .slide h3{margin:12px 0 8px;font:800 clamp(28px,3vw,44px)/1 var(--font);letter-spacing:-.03em;text-transform:uppercase;color:var(--ink)}
#quienes .slide .desc{margin:0;color:var(--muted);font-size:15px;line-height:1.5;max-width:44ch}
#quienes .slide .areas{position:relative;z-index:2;grid-column:1;grid-row:2;min-width:0}
#quienes .slide .areas .qs-eyebrow{display:block;margin-bottom:10px}
#quienes .slide .emp{position:relative;z-index:2;grid-column:2;grid-row:2;align-self:end;display:flex;flex-direction:column;gap:12px;min-width:0}
#quienes .slide .emp .qs-eyebrow{display:block}
#quienes .mini{display:grid;gap:10px}
#quienes .mini div{display:grid;grid-template-columns:minmax(0,1fr) 150px 44px;align-items:center;gap:12px}
#quienes .mini div.vacio{display:block;color:var(--muted);font-size:14px}
#quienes .mini b{font:600 13px var(--font);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#quienes .mini i{display:block;height:6px;border-radius:999px;background:var(--soft);overflow:hidden}
#quienes .mini i::before{content:"";display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--blue),var(--p2));transition:width 1.1s var(--ease) .2s}
#quienes .slide.on .mini i::before{width:var(--w)}
#quienes .mini span{font:500 12px var(--font-mono);color:var(--muted);text-align:right}
#quienes .cos{display:flex;flex-wrap:wrap;gap:8px}
#quienes .cos b{font:700 13.5px var(--font);letter-spacing:-.01em;padding:8px 12px;border-radius:10px;background:rgba(255,255,255,.7);color:var(--ink);border:1px solid var(--line);opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s,border-color .2s;transition-delay:calc(var(--i)*45ms + .25s),calc(var(--i)*45ms + .25s),0s;cursor:default;backdrop-filter:blur(8px)}
:root[data-theme="dark"] #quienes .cos b{background:rgba(4,5,10,.55)}
#quienes .slide.on .cos b{opacity:1;transform:none}
@media (hover:hover) and (pointer:fine){#quienes .cos b:hover{border-color:var(--blue)}}
#quienes .hubs{display:flex;align-items:center;gap:16px;padding:12px 0 0;border-top:1px solid var(--line);color:var(--ink);font-size:13.5px}
#quienes .hubs .qs-eyebrow{flex:none}
#quienes .motif-rayas{position:absolute;left:36px;top:0;width:220px;height:6px;background:repeating-linear-gradient(135deg,var(--p2) 0 14px,transparent 14px 28px);z-index:2;pointer-events:none}
#quienes .visual{--vis:var(--blue);--vis-rgb:var(--p1-rgb);position:absolute;right:-40px;top:46%;width:640px;height:640px;display:grid;place-items:center;z-index:0;pointer-events:none;transform:translate3d(calc(var(--mx)*-14px),calc(-50% + var(--my)*-10px + var(--sub)*-16px),0)}
:root[data-theme="dark"] #quienes .visual{--vis:var(--p2);--vis-rgb:var(--p2-rgb)}
#quienes .visual::before{content:"";position:absolute;inset:30px;border-radius:50%;background:radial-gradient(circle,rgba(var(--vis-rgb),.38),rgba(var(--vis-rgb),.1) 42%,transparent 66%);animation:qs-respirar 6s ease-in-out infinite alternate}
#quienes .visual::after{content:"";position:absolute;inset:100px;border-radius:50%;border:1px dashed rgba(var(--vis-rgb),.65);animation:qs-girar 44s linear infinite}
#quienes .visual i{position:absolute;inset:160px;border-radius:50%;border:1px solid rgba(var(--vis-rgb),.3);background:radial-gradient(circle,rgba(var(--vis-rgb),.08),transparent 70%);animation:qs-girar 70s linear infinite reverse}
#quienes .visual i::before,#quienes .visual i::after{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:var(--vis);box-shadow:0 0 12px var(--vis)}
#quienes .visual i::before{left:50%;top:-4px;margin-left:-4px}#quienes .visual i::after{left:-4px;top:50%;margin-top:-4px}
#quienes .visual svg{position:relative;width:250px;height:250px;stroke:var(--vis);fill:none;stroke-width:.9;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 16px rgba(var(--vis-rgb),.8)) drop-shadow(0 0 44px rgba(var(--vis-rgb),.35))}
#quienes .visual svg *{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.8s var(--ease) .3s}
#quienes .slide.on .visual svg *{stroke-dashoffset:0}
@keyframes qs-respirar{to{transform:scale(1.14)}}
@keyframes qs-girar{to{transform:rotate(360deg)}}
#quienes .prog{grid-column:1/3;height:2px;background:var(--line);margin-top:18px;overflow:hidden}
#quienes .prog i{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--p2));transform:scaleX(0);transform-origin:left;transition:transform .15s linear}
#quienes .qs-nota{margin:0;padding:18px 56px 0;font:500 11px var(--font-mono);letter-spacing:.06em;color:var(--muted)}
/* Cómo trabajamos, equipo, cierre */
#quienes .pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:28px}
#quienes .paso b{display:block;font:800 96px/1 var(--font);letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.5px var(--muted)}
#quienes .paso h4{margin:10px 0 6px;font:700 24px var(--font);letter-spacing:-.02em;color:var(--ink)}
#quienes .paso p{margin:0;color:var(--muted);font-size:15px;line-height:1.5}
#quienes .qs-equipo{text-align:center;margin:0 auto;padding-top:96px;padding-bottom:96px}
#quienes .qs-equipo .qs-h2{margin-left:auto;margin-right:auto;max-width:20ch}
#quienes .qs-equipo .qs-lead{margin:18px auto 28px}
/* La reunión con el equipo solo existe con sesión: en la portada no se ofrece. */
.landing #quienes .qs-equipo .qs-btn{display:none}
/* Enlace a la guía del CV (seo.mjs → homeSectionLinks): solo en la portada, no dentro de la plataforma. */
#quienes .qs-guias{display:none}
.landing #quienes .qs-guias{display:flex}
#quienes .qs-fin{max-width:none;text-align:center;padding:140px 56px 160px;overflow:hidden}
#quienes .light-fin{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 40% 50% at 50% 100%,rgba(var(--p1-rgb),.18),transparent 70%)}
:root[data-theme="dark"] #quienes .light-fin{background:radial-gradient(ellipse 40% 50% at 50% 100%,rgba(var(--p1-rgb),.35),transparent 70%)}
#quienes .qs-fin h2{position:relative;margin:0 0 30px;font:800 clamp(56px,7.6vw,110px)/.95 var(--font);letter-spacing:-.055em;color:var(--ink)}
#quienes .qs-fin h2 em{font-style:normal;color:var(--titular-2)}
#quienes .qs-fin .reveal{position:relative}
/* Móvil */
@media (max-width:900px),(pointer:coarse) and (max-height:900px){
  #quienes .qs{margin:-22px -14px 0}
  #quienes .qs section{padding:48px 20px}
  #quienes .qs-hero{min-height:0;padding-top:48px}
  #quienes .qs-scroll{display:none}
  #quienes .qs-marquee .qs-eyebrow{padding:0 20px 14px}
  #quienes .mq div{font-size:26px}#quienes .mq.rev div{font-size:20px}
  #quienes .qs-split{grid-template-columns:1fr}
  #quienes .tabs{height:260px}
  #quienes .qs-cifras{grid-template-columns:1fr 1fr;padding:40px 20px}
  #quienes .qs section.qs-sectores{height:auto;padding:28px 0 0}
  #quienes .stage{position:relative;height:auto;grid-template-columns:1fr;grid-template-rows:auto auto auto;padding:20px 12px}
  #quienes .st-top{grid-column:1}#quienes .st-nav{display:none}
  #quienes .idx{flex-direction:row;flex-wrap:wrap;gap:8px}
  #quienes .idx li span{display:none}
  /* Móvil: los ocho sectores en un carrusel horizontal (una tarjeta por pantalla; el índice 01-08 salta a cada una) */
  #quienes .slides{margin:0 -12px;padding:0 12px;display:flex;align-items:flex-start;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding:0 12px;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  #quienes .slides::-webkit-scrollbar{display:none}
  #quienes .slide{position:relative;flex:0 0 calc(100% - 28px);scroll-snap-align:start;opacity:1;transform:none;pointer-events:auto;grid-template-columns:1fr;grid-template-rows:auto auto auto;padding:22px;gap:18px}
  #quienes .idx li.on span{display:inline;opacity:1;transform:none}
  /* Etiquetas de las áreas completas: nombre en su fila, barra y cifra debajo */
  #quienes .mini div{grid-template-columns:minmax(0,1fr) 44px;gap:4px 12px}
  #quienes .mini b{grid-column:1/-1;white-space:normal;overflow:visible}
  #quienes .mini i{grid-column:1}#quienes .mini span{grid-column:2}
  #quienes .slide .emp{grid-column:1;grid-row:3}#quienes .slide .areas{grid-column:1;grid-row:2}
  #quienes .slide .mini i::before,#quienes .slide .cos b,#quienes .slide .visual svg *{transition:none}
  #quienes .mini i::before{width:var(--w)}#quienes .cos b{opacity:1;transform:none}#quienes .visual svg *{stroke-dashoffset:0}
  #quienes .visual{width:360px;height:360px;right:-120px;top:0;transform:none;opacity:.6}
  #quienes .prog{display:none}
  #quienes .qs-nota{padding:14px 20px 0}
  #quienes .pasos{grid-template-columns:1fr}
  #quienes .qs-fin{padding:80px 20px 100px}
}
@media (prefers-reduced-motion:reduce){
  #quienes .reveal,#quienes .qs-h1 .w{opacity:1;transform:none;transition:none}
  #quienes .mq div,#quienes .qs-scroll i,#quienes .visual::before,#quienes .visual::after,#quienes .visual i{animation:none}
  #quienes .slide,#quienes .tab{transition:none}
}