/* QKStudio — Nosotros (/nosotros). Solo se carga en esa página; todas las clases llevan el prefijo .ns- */

.ns-main{ padding-top:0; overflow-x:clip; }

/* ---------- Hero + cifras ---------- */
.ns-hero{ padding:clamp(130px,17vh,190px) 0 clamp(56px,8vw,110px); }
.ns-h1{ font-size:clamp(2.6rem,7.4vw,6.6rem); line-height:1.02; letter-spacing:-.03em; margin-top:18px; max-width:12.5em; }
.ns-hand{ font-family:"Lacquer",system-ui; font-weight:400; font-size:.9em; letter-spacing:.01em; text-transform:lowercase; display:inline-block; line-height:1.2; padding-right:.1em; clip-path:inset(0 100% 0 0); transition:clip-path 1.3s cubic-bezier(.65,0,.35,1) .35s; }
.ns-hand.is-written{ clip-path:inset(0 0 0 0); }
.ns-lead{ color:var(--gray-light); font-size:clamp(1rem,1.35vw,1.2rem); line-height:1.65; max-width:40em; margin-top:28px; }
.ns-stats{ list-style:none; margin:clamp(56px,8vw,110px) 0 0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0 clamp(18px,3vw,48px); border-top:1px solid var(--light-15); }
.ns-stat{ padding:clamp(22px,2.6vw,36px) 0 0; }
.ns-stat__n{ display:block; font-family:var(--font-display); font-weight:600; font-size:clamp(2.6rem,5.6vw,5rem); line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.ns-stat__l{ display:block; margin-top:12px; color:var(--gray-light); font-size:.92rem; line-height:1.4; max-width:15em; }

/* ---------- Frase que se llena de color con el scroll ---------- */
.ns-statement{ padding:clamp(70px,12vw,170px) 0; }
.ns-statement__big{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.9rem,4.9vw,4.4rem); line-height:1.1; letter-spacing:-.022em; max-width:19em; margin:0; }
html.js .ns-w{ opacity:.16; transition:opacity .45s ease; }
html.js .ns-w.is-on{ opacity:1; }
.ns-statement__small{ color:var(--gray-light); font-size:clamp(1rem,1.3vw,1.15rem); line-height:1.7; max-width:34em; margin:clamp(30px,4vw,56px) 0 0 auto; }

/* ---------- Historia: año fijo + capítulos ---------- */
.ns-story{ padding:clamp(40px,6vw,90px) 0 clamp(70px,9vw,140px); }
.ns-story__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(40px,7vw,120px); }
.ns-story__sticky{ position:sticky; top:clamp(96px,14vh,140px); display:flex; flex-direction:column; gap:18px; }
.ns-story__sticky h2{ font-size:clamp(1.8rem,3.4vw,2.9rem); letter-spacing:-.02em; max-width:12em; }
.ns-story__year{ margin-top:clamp(18px,4vw,60px); font-family:var(--font-display); font-weight:700; font-size:clamp(5.5rem,14vw,13rem); line-height:.88; letter-spacing:-.05em; font-variant-numeric:tabular-nums; }
.ns-story__year span{ display:inline-block; transition:opacity .3s ease, transform .45s var(--ease); }
.ns-story__year.is-out span{ opacity:0; transform:translateY(.18em); }
.ns-story__list{ list-style:none; margin:0; padding:0; }
.ns-step{ position:relative; min-height:64vh; display:flex; flex-direction:column; justify-content:center; padding:36px 0 36px clamp(26px,3.4vw,52px); border-left:1px solid var(--light-15); }
.ns-step::before{ content:""; position:absolute; left:-6px; top:50%; width:11px; height:11px; margin-top:-5px; border-radius:50%; background:var(--gray-dark); border:1px solid var(--light-30); transition:background-color .4s ease, border-color .4s ease, transform .5s var(--ease); }
.ns-step.is-active::before{ background:var(--white); border-color:var(--white); transform:scale(1.5); }
.ns-step__year{ display:none; font-family:var(--font-display); font-weight:600; font-size:1.1rem; letter-spacing:.1em; color:var(--gray-light); margin-bottom:10px; }
.ns-step h3{ font-size:clamp(1.5rem,2.6vw,2.4rem); line-height:1.1; letter-spacing:-.015em; margin-bottom:16px; }
.ns-step p{ color:var(--gray-light); font-size:clamp(1rem,1.2vw,1.1rem); line-height:1.7; max-width:30em; margin:0; }
html.js .ns-step{ opacity:.26; transition:opacity .6s var(--ease); }
html.js .ns-step.is-active{ opacity:1; }

/* ---------- ADN: paneles que se abren ---------- */
.ns-vals{ display:flex; gap:14px; height:clamp(380px,40vw,500px); }
.ns-val{
  flex:1 1 0; min-width:0; position:relative; display:flex; flex-direction:column; padding:clamp(20px,2.2vw,32px); border-radius:24px; overflow:hidden; cursor:pointer;
  background:var(--light-08); border:1px solid var(--light-15); outline:none;
  transition:flex-grow .75s var(--ease), background-color .45s ease, color .45s ease, border-color .45s ease, opacity .8s var(--ease), transform .8s var(--ease);
}
.ns-val.is-open{ flex-grow:2.3; background:var(--white); color:var(--gray-dark); border-color:var(--white); }
.ns-val:focus-visible{ outline:2px solid var(--white); outline-offset:3px; }
.ns-val__n{ font-family:var(--font-display); font-size:.9rem; letter-spacing:.14em; color:var(--gray-light); margin-bottom:auto; transition:color .45s ease; }
.ns-val.is-open .ns-val__n{ color:rgba(38,30,37,.55); }
.ns-val h3{ font-size:clamp(1.05rem,1.6vw,1.5rem); line-height:1.12; letter-spacing:-.01em; margin:0; overflow-wrap:anywhere; }
.ns-val p{ margin:0; font-size:.98rem; line-height:1.6; max-height:0; opacity:0; transition:max-height .6s var(--ease), opacity .4s ease, margin .5s var(--ease); }
.ns-val.is-open p{ max-height:10em; opacity:1; margin-top:14px; color:rgba(38,30,37,.78); }

/* ---------- Proceso (agile + IA) ---------- */
.ns-process__head{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(30px,6vw,100px); align-items:end; }
.ns-process__head .section-head{ margin-bottom:0; }
.ns-process__lead{ color:var(--gray-light); font-size:clamp(1rem,1.25vw,1.12rem); line-height:1.7; margin:0; max-width:36em; }
.ns-steps{ --p:0; list-style:none; margin:clamp(48px,7vw,96px) 0 0; padding:0; position:relative; }
.ns-steps::before,.ns-steps::after{ content:""; position:absolute; left:0; top:0; bottom:0; width:1px; }
.ns-steps::before{ background:var(--light-15); }
.ns-steps::after{ background:var(--white); transform-origin:top; transform:scaleY(var(--p)); }
.ns-pstep{ position:relative; display:grid; grid-template-columns:clamp(70px,9vw,130px) minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(14px,3vw,44px); align-items:start; padding:clamp(26px,3.4vw,46px) 0 clamp(26px,3.4vw,46px) clamp(26px,4vw,64px); border-bottom:1px solid var(--light-08); }
.ns-pstep::before{ content:""; position:absolute; left:-5px; top:clamp(38px,4.6vw,62px); width:11px; height:11px; border-radius:50%; background:var(--gray-dark); border:1px solid var(--light-30); z-index:1; transition:background-color .4s ease, border-color .4s ease; }
.ns-pstep.is-on::before{ background:var(--white); border-color:var(--white); }
.ns-pstep__n{ font-family:var(--font-display); font-weight:600; font-size:clamp(2rem,4.4vw,3.8rem); line-height:1; letter-spacing:-.03em; color:var(--gray-light); font-variant-numeric:tabular-nums; transition:color .5s ease; }
.ns-pstep.is-on .ns-pstep__n{ color:var(--white); }
.ns-pstep h3{ font-size:clamp(1.4rem,2.3vw,2rem); letter-spacing:-.012em; margin-bottom:10px; }
.ns-pstep__body p{ color:var(--gray-light); line-height:1.65; margin:0; max-width:28em; }
.ns-pstep__ai{ margin:0; padding:16px 18px; border:1px solid var(--light-15); border-radius:16px; background:var(--light-08); color:var(--gray-light); font-size:.93rem; line-height:1.55; }
.ns-pstep__ai b{ display:inline-block; margin-right:.6em; padding:.28em .75em; border-radius:99px; background:var(--white); color:var(--gray-dark); font-size:.66rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; vertical-align:.1em; }
html.js .ns-pstep{ opacity:.32; transition:opacity .6s var(--ease); }
html.js .ns-pstep.is-on{ opacity:1; }
.ns-perks{ list-style:none; display:flex; flex-wrap:wrap; gap:10px; margin:clamp(40px,5vw,68px) 0 0; padding:0; }
.ns-perks li{ border:1px solid var(--light-30); border-radius:99px; padding:.75em 1.3em; font-size:.92rem; }
.ns-process__note{ color:var(--gray-light); font-size:.92rem; line-height:1.6; max-width:44em; margin:22px 0 0; }

/* ---------- Calidad ---------- */
.ns-quality__grid{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(30px,6vw,100px); align-items:center; }
.ns-quality h2{ font-size:clamp(1.8rem,3.6vw,3rem); letter-spacing:-.02em; margin:18px 0 20px; max-width:14em; }
.ns-quality p{ color:var(--gray-light); font-size:1.05rem; line-height:1.7; max-width:36em; margin:0 0 30px; }
.ns-seals{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.ns-seal{ display:flex; align-items:center; justify-content:center; padding:clamp(22px,3vw,40px); min-height:190px; border-radius:24px; background:var(--light-08); border:1px solid var(--light-15); transition:background-color .4s ease, transform .6s var(--ease), border-color .4s ease; }
.ns-seal:hover{ background:var(--light-15); border-color:var(--light-30); transform:translateY(-4px); }
.ns-seal img{ max-width:100%; max-height:110px; width:auto; height:auto; object-fit:contain; }

/* ---------- Premios: palmarés ---------- */
.ns-awlist{ list-style:none; margin:0; padding:0; border-top:1px solid var(--light-15); transition:opacity .35s ease; }
.ns-aw{
  display:grid; grid-template-columns:clamp(70px,9vw,130px) 68px minmax(0,1.3fr) minmax(0,1fr); align-items:center; gap:clamp(14px,2.4vw,36px);
  padding:clamp(18px,2.2vw,30px) 6px; border-bottom:1px solid var(--light-15);
}
.ns-aw__year{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.3rem,2.4vw,2.2rem); letter-spacing:-.02em; color:var(--gray-light); font-variant-numeric:tabular-nums; transition:color .4s ease; }
.ns-aw__badge{ display:flex; align-items:center; justify-content:center; width:68px; height:68px; padding:9px; border-radius:18px; background:var(--white); transition:transform .6s var(--ease); }
.ns-aw__badge img{ width:100%; height:100%; object-fit:contain; display:block; }
.ns-aw__title{ font-size:clamp(1.05rem,1.6vw,1.45rem); line-height:1.25; letter-spacing:-.01em; margin:0; }
.ns-aw__meta{ color:var(--gray-light); font-size:.93rem; line-height:1.5; margin:0; }
@media (hover:hover) and (pointer:fine){
  .ns-aw{ transition:opacity .4s ease, padding .5s var(--ease), background-color .4s ease, opacity .8s var(--ease), transform .8s var(--ease); }
  .ns-awlist:has(.ns-aw:hover) .ns-aw:not(:hover){ opacity:.32; }
  .ns-aw:hover{ padding-left:22px; padding-right:22px; background:var(--light-08); }
  .ns-aw:hover .ns-aw__year{ color:var(--white); }
  .ns-aw:hover .ns-aw__badge{ transform:rotate(-7deg) scale(1.14); }
}

/* ---------- Dónde estamos ---------- */
.ns-locs{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; }
.ns-loc{ display:flex; flex-direction:column; gap:6px; padding:clamp(22px,2.4vw,32px); border-radius:22px; background:var(--light-08); border:1px solid var(--light-15); }
.ns-loc__code{ font-family:var(--font-display); font-weight:600; font-size:clamp(2.2rem,3.8vw,3.2rem); letter-spacing:-.03em; line-height:1; color:var(--gray-light); margin-bottom:10px; }
.ns-loc h3{ font-size:1.25rem; margin:0; }
.ns-loc__city{ color:var(--gray-light); margin:0; font-size:.95rem; }
.ns-loc__time{ margin:8px 0 0; font-size:.95rem; font-variant-numeric:tabular-nums; display:flex; align-items:center; gap:.6em; }
.ns-loc__time .qk-hg{ color:var(--white); }
.ns-loc__tel{ margin-top:12px; font-size:.95rem; color:var(--white); text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--light-30); width:fit-content; }
.ns-loc__tel:hover{ text-decoration-color:var(--white); }
@keyframes ns-pulse{ 0%,100%{ opacity:.35; transform:scale(.8); } 50%{ opacity:1; transform:scale(1.15); } }

.ns-cta__btns{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .ns-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:6px; }
  .ns-statement__small{ margin-left:0; }
  .ns-story__grid{ grid-template-columns:1fr; gap:34px; }
  .ns-story__sticky{ position:static; }
  .ns-story__year{ display:none; }
  .ns-step{ min-height:0; padding-top:30px; padding-bottom:30px; }
  .ns-step::before{ top:42px; margin-top:0; }
  .ns-step__year{ display:block; }
  html.js .ns-step{ opacity:1; }
  .ns-vals{ flex-direction:column; height:auto; }
  .ns-val{ flex:none; padding:26px 22px; }
  .ns-val__n{ margin-bottom:34px; }
  .ns-val,.ns-val.is-open{ background:var(--light-08); color:var(--white); border-color:var(--light-15); }
  .ns-val p,.ns-val.is-open p{ max-height:none; opacity:1; margin-top:12px; color:var(--gray-light); }
  .ns-val.is-open .ns-val__n{ color:var(--gray-light); }
  .ns-process__head{ grid-template-columns:1fr; align-items:start; }
  .ns-pstep{ grid-template-columns:64px minmax(0,1fr); }
  .ns-pstep__ai{ grid-column:2; }
  .ns-quality__grid{ grid-template-columns:1fr; }
  .ns-aw{ grid-template-columns:64px minmax(0,1fr); grid-template-areas:"badge year" "badge title" "badge meta"; row-gap:4px; column-gap:16px; align-items:start; }
  .ns-aw__badge{ grid-area:badge; width:60px; height:60px; }
  .ns-aw__year{ grid-area:year; font-size:1.05rem; }
  .ns-aw__title{ grid-area:title; }
  .ns-aw__meta{ grid-area:meta; }
}
@media (max-width:560px){
  .ns-seals{ grid-template-columns:1fr; }
  .ns-seal{ min-height:150px; }
  .ns-perks li{ font-size:.86rem; padding:.65em 1.05em; }
}

/* ---------- Sin JavaScript o con menos movimiento ---------- */
html:not(.js) .ns-hand{ clip-path:none; }
@media (prefers-reduced-motion:reduce){
  .ns-hand{ clip-path:none; transition:none; }
  .ns-w,.ns-step,.ns-pstep,.ns-val,.ns-val p,.ns-story__year span,.ns-seal,.ns-aw,.ns-aw__badge{ transition:none !important; }
  .ns-loc__time::before{ animation:none; }
  html.js .ns-w{ opacity:1; }
  html.js .ns-step,html.js .ns-pstep{ opacity:1; }
}

/* ---------- Franja de fotos (carrusel continuo; template-parts/photo-strip.php + assets/js/strip.js) ---------- */
.qk-strip{ position:relative; padding:calc(clamp(20px,3vw,46px) + 20px) 0 clamp(44px,6vw,90px); overflow:hidden; --qk-sh:clamp(230px,30vw,440px); --qk-gap:clamp(12px,1.6vw,24px); }
.qk-strip__viewport{ overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -webkit-overflow-scrolling:touch; outline:none; }
.qk-strip__viewport::-webkit-scrollbar{ display:none; }
.qk-strip__track{ list-style:none; margin:0; padding:0 var(--qk-gap); display:flex; align-items:stretch; gap:var(--qk-gap); width:max-content; min-height:calc(var(--qk-sh) * 1.3); will-change:transform; }
.qk-strip__col{ flex:none; display:flex; flex-direction:column; gap:var(--qk-gap); margin:0; padding:0; }
.qk-strip__col:not(.qk-strip__col--d) .qk-strip__item{ align-self:flex-start; }
.qk-strip__item{ position:relative; border-radius:clamp(14px,1.6vw,22px); overflow:hidden; background:rgba(141,140,255,.12); aspect-ratio:var(--ar, 1.2); }
/* una foto por columna: alturas y posiciones distintas, dejan huecos arriba/abajo */
.qk-strip__col--p0,.qk-strip__col--p1,.qk-strip__col--p2,.qk-strip__col--p3,.qk-strip__col--p4{ justify-content:center; }
.qk-strip__col--p0 .qk-strip__item{ height:calc(var(--qk-sh) * .9); }
.qk-strip__col--p1{ justify-content:flex-start; } .qk-strip__col--p1 .qk-strip__item{ height:calc(var(--qk-sh) * .66); }
.qk-strip__col--p2 .qk-strip__item{ height:var(--qk-sh); }
.qk-strip__col--p3{ justify-content:flex-end; } .qk-strip__col--p3 .qk-strip__item{ height:calc(var(--qk-sh) * .74); }
.qk-strip__col--p4 .qk-strip__item{ height:calc(var(--qk-sh) * .82); transform:translateY(calc(var(--qk-sh) * .08)); }
/* dos fotos apiladas: columna angosta, la segunda más corta y corrida (alterna izquierda/derecha) */
.qk-strip__col--d{ width:calc(var(--qk-sh) * .56); justify-content:center; }
.qk-strip__col--d .qk-strip__item{ width:100%; }
.qk-strip__col--d .qk-strip__item:nth-child(2){ width:84%; }
.qk-strip__col--e0 .qk-strip__item:nth-child(2){ align-self:flex-end; }
.qk-strip__col--e1{ justify-content:flex-start; } .qk-strip__col--e1 .qk-strip__item:nth-child(1){ width:84%; align-self:flex-end; } .qk-strip__col--e1 .qk-strip__item:nth-child(2){ width:100%; }
.qk-strip__item video{ display:block; width:100%; height:100%; object-fit:cover; pointer-events:none; background:rgba(141,140,255,.12); }
.qk-strip__item img{ display:block; width:100%; height:100%; object-fit:cover; user-select:none; -webkit-user-drag:none; pointer-events:none; transition:transform .8s var(--ease); }
.qk-strip__item:hover img{ transform:scale(1.045); }
.qk-strip__pause{ position:absolute; z-index:2; right:clamp(16px,3vw,48px); top:clamp(4px,1.2vw,18px); display:inline-flex; align-items:center; gap:.55em; padding:.5em .95em .5em .8em; border-radius:999px; border:1px solid var(--light-08); background:rgba(38,30,37,.72); color:var(--white); font:500 .8rem/1 var(--font-body); cursor:pointer; backdrop-filter:blur(6px); transition:background-color .25s ease, color .25s ease, border-color .25s ease; }
.qk-strip__pause:hover,.qk-strip__pause:focus-visible{ background:var(--ax,var(--gray-light)); color:var(--gray-dark); border-color:transparent; }
.qk-strip__ico{ width:.7em; height:.8em; border-left:.22em solid currentColor; border-right:.22em solid currentColor; box-sizing:border-box; }
.qk-strip__pause[aria-pressed="true"] .qk-strip__ico{ width:0; height:0; border-left:.7em solid currentColor; border-right:0; border-top:.4em solid transparent; border-bottom:.4em solid transparent; }
.qk-strip.is-live .qk-strip__viewport{ overflow:hidden; cursor:grab; touch-action:pan-y; user-select:none; -webkit-user-select:none; }
.qk-strip.is-dragging .qk-strip__viewport{ cursor:grabbing; }
.qk-strip.is-dragging .qk-strip__item img{ transition:none; }
@media (prefers-reduced-motion:reduce){ .qk-strip__item img{ transition:none; } }