/* ==========================================================================
   Caso Tutichip (/casos/tutichip/), 30/9/26. Sobre el motor común (ma-caso.css).
   La forma: el círculo del logotipo abre la portada, know how + know being se juntan,
   cada familia enseña su forma (escena con color), el manual se apila, el catálogo
   corre solo y la marca sale a la calle. Naranja #FF9E18, granate #9C182F, crema #F4EADC.
   Sin JavaScript: todo quieto y legible. Con movimiento reducido: sin transiciones.
   ========================================================================== */

.cx-tutichip{--tt-e:cubic-bezier(.2,.7,.2,1);--tt-io:cubic-bezier(.65,0,.35,1);--tt-na:#FF9E18;--tt-cr:#F4EADC;--tt-gr:#9C182F}
.tt-cap{margin-top:clamp(14px,1.6vw,22px)}
.tt-cap em{font-style:normal;color:var(--cx-fg)}

/* ---------- Portada: el círculo se abre ---------- */
.tt-hero{height:230svh}
.tt-hero-st{position:sticky;top:0;height:100svh;overflow:hidden;--cx:71%;--cy:60%;--r0:min(27svh,19vw);--sx:9vw;--sy:2svh}
.tt-hero-f{position:absolute;inset:0;margin:0;z-index:1;overflow:hidden;
  clip-path:circle(calc(var(--r0) + var(--a,0) * (150vmax - var(--r0))) at calc(var(--cx) + var(--a,0) * (50% - var(--cx))) calc(var(--cy) + var(--a,0) * (50% - var(--cy))))}
.tt-hero-f img{display:block;width:100%;height:100%;object-fit:cover;object-position:55% 50%;
  transform:translate3d(calc((1 - var(--a,0)) * var(--sx)),calc((1 - var(--a,0)) * var(--sy)),0) scale(calc(1.22 - var(--a,0) * .22))}
.tt-hero-f::after{content:"";position:absolute;inset:0;background:#1B0A0D;opacity:calc(var(--b,0) * .4);pointer-events:none}
.tt-hero-o{position:absolute;z-index:2;left:var(--cx);top:var(--cy);width:calc(var(--r0) * 2);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);
  box-shadow:inset 0 0 0 clamp(6px,.7vw,11px) var(--tt-na);opacity:calc(1 - var(--a,0) * 5);pointer-events:none}
.tt-ring{position:absolute;z-index:2;left:var(--cx);top:var(--cy);width:calc(var(--r0) * 2.52);aspect-ratio:1;pointer-events:none;
  transform:translate(-50%,-50%) scale(calc(1 + var(--a,0) * 1.2));opacity:calc(1 - var(--a,0) * 3.2)}
.tt-ring-g{width:100%;height:100%}
html.cx-js:not(.cx-rm) .tt-ring-g{animation:tt-gira 46s linear infinite}
@keyframes tt-gira{to{transform:rotate(360deg)}}
.tt-ring svg{display:block;width:100%;height:100%;overflow:visible}
.tt-ring text{font-family:var(--f-label);font-size:8.4px;letter-spacing:.18em;fill:var(--cx-fg)}
.tt-hero-x{position:absolute;left:0;right:0;top:calc(24px + 55px + clamp(18px,4svh,54px));z-index:3;
  opacity:calc(1 - var(--a,0) * 1.8);transform:translate3d(0,calc(var(--a,0) * -7svh),0)}
.tt-hero-k{margin:0 0 clamp(10px,1.6svh,18px);font-family:var(--f-label);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--cx-fg3)}
.tt-hero-t{margin:0;overflow:hidden;padding-bottom:.04em;font-family:'nh-ultralight',var(--f-text);font-weight:200;font-size:clamp(90px,14vw,250px);line-height:.84;letter-spacing:-.045em;color:var(--cx-fg);white-space:nowrap}
.tt-hero-t span{display:inline-block}
.tt-hero-s{margin:clamp(16px,2.6svh,30px) 0 0;max-width:16em;font-family:var(--f-light);font-weight:300;font-size:clamp(18px,1.6vw,25px);line-height:1.38;color:var(--cx-fg)}
html.cx-js:not(.cx-rm) .tt-hero-t span{animation:cx-sube 1.25s var(--tt-e) .25s both}
html.cx-js:not(.cx-rm) .tt-hero-o,html.cx-js:not(.cx-rm) .tt-ring{animation:cx-aparece 1s ease .9s backwards}
html.cx-js:not(.cx-rm) .tt-hero-k,html.cx-js:not(.cx-rm) .tt-hero-s{animation:cx-aparece 1s ease .8s both}
html.cx-js:not(.cx-rm) .tt-hero-f{animation:tt-abre 1.5s var(--tt-e) .1s backwards}
@keyframes tt-abre{from{clip-path:circle(0 at var(--cx) var(--cy))}}
.tt-hero-q{position:absolute;z-index:3;left:0;right:0;top:50%;margin:0;padding:0 var(--edge);text-align:center;font-family:'nh-ultralight',var(--f-text);font-weight:200;font-size:clamp(44px,7vw,124px);line-height:1;letter-spacing:-.035em;color:var(--tt-cr);
  opacity:var(--b,0);transform:translate3d(0,calc(-50% + (1 - var(--b,0)) * 34px),0);text-shadow:0 2px 40px rgba(0,0,0,.3);pointer-events:none}
.tt-hero-cred{position:absolute;left:0;right:0;bottom:clamp(16px,3svh,30px);z-index:3;opacity:calc(1 - var(--a,0) * 2.2)}
.tt-hero-cred .cx-cred{max-width:44%;grid-template-columns:1fr 1fr}
html:not(.cx-js) .tt-hero{height:100svh}

/* ---------- 01 · Punto de partida ---------- */
.tt-in{padding:clamp(120px,18svh,210px) 0 clamp(110px,15svh,180px)}

/* ---------- 02 · La plataforma: know how + know being ---------- */
.tt-pl{height:210svh}
.tt-pl-st{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden}
.tt-pl-w{padding-top:79px}
.tt-pl-l{display:flex;justify-content:center;align-items:center;gap:.26em;margin:clamp(40px,7svh,90px) 0;font-family:'nh-ultralight',var(--f-text);font-weight:200;font-size:clamp(44px,8.2vw,150px);line-height:1;letter-spacing:-.035em;white-space:nowrap;color:var(--cx-fg);
  --mx:22vw;--my:0px}
.tt-pl-a,.tt-pl-b{display:inline-block;opacity:calc(.18 + var(--k,1) * .82)}
.tt-pl-a{transform:translate3d(calc((1 - var(--k,1)) * var(--mx) * -1),calc((1 - var(--k,1)) * var(--my) * -1),0)}
.tt-pl-b{transform:translate3d(calc((1 - var(--k,1)) * var(--mx)),calc((1 - var(--k,1)) * var(--my)),0)}
.tt-pl-m{position:relative;flex:0 0 auto;display:inline-block;width:.8em;height:.8em;border-radius:50%;background:var(--cx-fg);
  transform:scale(calc(.35 + var(--k,1) * .65)) rotate(calc((1 - var(--k,1)) * 180deg))}
.tt-pl-m i::before,.tt-pl-m i::after{content:"";position:absolute;left:50%;top:50%;width:44%;height:3px;margin:-1.5px 0 0 -22%;background:var(--cx-bg);border-radius:2px}
.tt-pl-m i::after{transform:rotate(90deg)}
.tt-pl-s{max-width:30em;margin:0 auto;text-align:center;font-family:var(--f-light);font-weight:300;font-size:clamp(19px,1.62vw,25px);line-height:1.46;color:var(--cx-fg);
  opacity:var(--s,1);transform:translate3d(0,calc((1 - var(--s,1)) * 24px),0)}
html:not(.cx-js) .tt-pl{height:auto;padding:120px 0}
html:not(.cx-js) .tt-pl-st{position:static;height:auto}
.tt-pl2{padding:clamp(10px,3vw,40px) 0 clamp(110px,15svh,180px)}
.tt-pl2-t{margin:0 0 clamp(50px,7vw,100px)}
.tt-pl2-g{row-gap:0;align-items:end}
.tt-pl2-c{align-self:end}
.tt-o-boc{object-position:66% 50%}

/* ---------- 03 · Las formas: cada familia, su forma y su color ---------- */
.tt-fi,.tt-ii{padding:clamp(120px,18svh,210px) 0 clamp(20px,4vw,60px)}
.tt-fm{height:calc(var(--n,4) * 85svh + 100svh)}
.tt-fm-st{position:sticky;top:0;height:100svh;overflow:hidden}
.tt-fm-g{position:relative;height:100%}
.tt-fm .tt-fm-f{position:absolute;inset:0;margin:0;border-radius:0;overflow:visible;opacity:0;transform:none;pointer-events:none;
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(28px,4vw,72px);align-items:center;padding-top:79px;transition:opacity .55s ease}
.tt-fm .tt-fm-f.on{opacity:1;pointer-events:auto;z-index:1}
.tt-fm-x>*{transform:translate3d(0,34px,0);opacity:0;transition:transform .9s var(--tt-e),opacity .6s ease}
.tt-fm-f.on .tt-fm-x>*{transform:none;opacity:1}
.tt-fm-f.on .tt-fm-n{transition-delay:.08s}
.tt-fm-f.on .tt-fm-d{transition-delay:.16s}
.tt-fm-f.out .tt-fm-x>*{transform:translate3d(0,-26px,0)}
.tt-fm-k{margin:0;font-family:var(--f-label);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--cx-fg3)}
.tt-fm-n{margin:.14em 0 .32em;font-family:'nh-ultralight',var(--f-text);font-weight:200;font-size:clamp(56px,7.2vw,128px);line-height:.94;letter-spacing:-.04em;color:var(--cx-fg)}
.tt-fm-d{margin:0;max-width:22em;font-family:var(--f-light);font-weight:300;font-size:clamp(18px,1.5vw,23px);line-height:1.42;color:var(--cx-fg2)}
.tt-fm-c{justify-self:end;margin:0;width:min(100%,calc((100svh - 160px) * 1.1076));aspect-ratio:1400/1264;border-radius:18px;overflow:hidden;background:#F1E7D8;
  box-shadow:0 34px 80px rgba(40,10,15,.18),0 2px 6px rgba(40,10,15,.08);transform:translate3d(0,9%,0) rotate(4deg) scale(.93);transition:transform 1.1s var(--tt-e)}
.tt-fm-c img{display:block;width:100%;height:100%;object-fit:cover}
.tt-fm-f.on .tt-fm-c{transform:none}
.tt-fm-f.out .tt-fm-c{transform:translate3d(0,-7%,0) rotate(-3deg) scale(.95)}
html:not(.cx-js) .tt-fm{height:auto;padding:40px 0}
html:not(.cx-js) .tt-fm-st{position:static;height:auto}
html:not(.cx-js) .tt-fm .tt-fm-f{position:relative;opacity:1;aspect-ratio:auto;padding:40px 0}
html:not(.cx-js) .tt-fm-x>*,html:not(.cx-js) .tt-fm-c{transform:none;opacity:1}
.tt-fv{padding:clamp(40px,6vw,90px) 0 clamp(110px,15svh,180px)}
.tt-fv-g{align-items:end}
.tt-fv-g>.tt-cap{align-self:end;margin:0;padding-bottom:6px}

/* ---------- 04 · Identidad: el manual se apila ---------- */
.tt-id{height:calc(var(--n,6) * 72svh + 100svh)}
.tt-id-st{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden}
.tt-id-g{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);column-gap:clamp(28px,4vw,72px);align-items:center;padding-top:79px}
.tt-id-l{list-style:none;margin:0;padding:0;border-top:1px solid var(--cx-line)}
.tt-id-l li{display:flex;gap:14px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--cx-line);font-family:var(--f-light);font-weight:300;font-size:clamp(15px,1.15vw,18px);line-height:1.3;color:var(--cx-fg3);transition:color .4s ease}
.tt-id-l li span{font-family:var(--f-label);font-size:10.5px;letter-spacing:.16em;font-variant-numeric:tabular-nums}
.tt-id-l li.on{color:var(--cx-fg)}
.tt-id-v{position:relative;justify-self:end;width:min(100%,calc((100svh - 190px) * 1.4134));aspect-ratio:1754/1241}
.tt-id .tt-id-f{position:absolute;inset:0;margin:0;z-index:var(--i);border-radius:10px;overflow:hidden;opacity:1;background:#fff;
  box-shadow:0 30px 70px rgba(30,6,10,.2),0 2px 6px rgba(30,6,10,.08);transform:translate3d(0,112svh,0) rotate(5deg);transition:transform 1s var(--tt-io),filter .6s ease}
.tt-id .tt-id-f img{display:block;width:100%;height:100%;object-fit:cover}
.tt-id .tt-id-f.on{transform:none}
.tt-id .tt-id-f.out{transform:translate3d(0,calc(min(var(--d,1),3) * -14px),0) scale(calc(1 - min(var(--d,1),3) * .035));filter:brightness(calc(1 - var(--d,1) * .07))}
html:not(.cx-js) .tt-id{height:auto;padding:40px 0}
html:not(.cx-js) .tt-id-st{position:static;height:auto}
html:not(.cx-js) .tt-id-v{display:grid;gap:14px;aspect-ratio:auto}
html:not(.cx-js) .tt-id .tt-id-f{position:relative;transform:none;aspect-ratio:1754/1241}
.tt-iv{padding:clamp(110px,15svh,180px) 0}
.tt-iv-g>.c-6{grid-column:span 6}
.tt-iv-g>.tt-cap{margin-top:clamp(14px,1.6vw,22px)}

/* ---------- 05 · Catálogo: la tira corre sola ---------- */
.tt-ca{padding:clamp(120px,18svh,210px) 0 clamp(110px,15svh,180px)}
.tt-band{margin-top:clamp(56px,7vw,100px)}
.tt-band .tt-band-f{width:auto;height:clamp(280px,56svh,620px);aspect-ratio:var(--ar);border-radius:3px;background:var(--tt-cr);box-shadow:0 22px 50px rgba(156,24,47,.15),0 2px 5px rgba(156,24,47,.08)}
.tt-band .tt-band-f img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none;user-select:none}
.tt-band-h{margin:clamp(22px,2.6vw,34px) 0 0;font-family:var(--f-label);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--cx-fg3)}

/* ---------- 01 · La fábrica ---------- */
.tt-in-g{margin-top:clamp(64px,9svh,110px);align-items:stretch}
.tt-in-ch{aspect-ratio:auto}

/* ---------- 06 · La marca, fuera ---------- */
.tt-fu{padding:clamp(120px,18svh,210px) 0 clamp(110px,15svh,180px)}
.tt-o-nave{object-position:50% 40%}
.tt-fu-g{row-gap:clamp(12px,1.6vw,22px)}
.tt-o-mov{object-position:50% 50%}
.tt-o-bol{object-position:30% 50%}

/* ---------- 07 · Después ---------- */
.tt-de{padding:clamp(120px,18svh,210px) 0 clamp(90px,12svh,150px)}
.tt-reg{max-width:18em;margin-bottom:0}

/* ---------- Cierre ---------- */
.tt-fin{padding-top:clamp(120px,18svh,210px)}
.tt-fin-t{margin:0;max-width:15em;font-family:'nh-ultralight',var(--f-text);font-weight:200;font-size:clamp(34px,4.6vw,76px);line-height:1.1;letter-spacing:-.025em;color:var(--cx-fg);text-wrap:balance}
.tt-fin-f{margin-bottom:0}

/* ---------- Tableta y móvil ---------- */
@media (max-width:900px){
  .tt-in-ch{aspect-ratio:4/5}
  .tt-fm .tt-fm-f,.tt-id-g{grid-template-columns:minmax(0,1fr);row-gap:clamp(18px,3svh,30px);align-content:center;padding-top:71px}
  .tt-fm-c,.tt-id-v{justify-self:center}
  .tt-fm-n{font-size:clamp(44px,11vw,76px)}
  .tt-fm-d{font-size:16px}
  .tt-fm-c{width:min(100%,calc((100svh - 400px) * 1.1076))}
  .tt-id-l{display:grid;border:0}
  .tt-id-l li{grid-area:1/1;border:0;padding:0;opacity:0;transition:opacity .4s ease;color:var(--cx-fg)}
  .tt-id-l li.on{opacity:1}
  .tt-id-v{width:min(100%,calc((100svh - 260px) * 1.4134));margin-top:30px}
  html:not(.cx-js) .tt-id-l li{grid-area:auto;opacity:1}
}
@media (max-width:760px){
  .tt-hero-st{--cx:50%;--cy:58%;--r0:min(20svh,34vw);--sx:4vw;--sy:0px}
  .tt-hero-x{top:calc(16px + 55px + clamp(14px,3svh,30px))}
  .tt-hero-t{font-size:clamp(64px,19.5vw,110px)}
  .tt-hero-s{font-size:17px;max-width:20em;margin-top:12px}
  .tt-hero-cred .cx-cred{max-width:none}
  .tt-ring text{font-size:9.6px}
  .tt-pl-l{flex-direction:column;gap:.12em;font-size:clamp(44px,15vw,84px);--mx:30vw;--my:0px}
  .tt-pl-s{font-size:18px}
  .tt-band .tt-band-f{height:clamp(240px,46svh,420px)}
  .tt-iv-g>.c-6{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){
  .tt-hero-t span,.tt-hero-k,.tt-hero-s,.tt-hero-f,.tt-ring-g{animation:none}
  .tt-fm .tt-fm-f,.tt-fm-x>*,.tt-fm-c,.tt-id .tt-id-f,.tt-id-l li{transition:none}
}
/* 06 · La nave, a sangre (30/9/26, tarde) */
.tt-nave2 picture{display:block;width:100%;height:100%}
.tt-nave2 img{object-position:56% 50%}
@media (max-width:760px){.tt-nave2 img{object-position:50% 46%}}

/* ---------- 30/9/26 (noche): cifras de la empresa y 02 «El estudio» ---------- */
.tt-num .cx-n{font-size:clamp(50px,5.6vw,92px)}
.tt-es{padding:clamp(120px,18svh,210px) 0 clamp(110px,15svh,180px)}
.tt-es-l{list-style:none;margin:clamp(70px,9vw,130px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:clamp(16px,2vw,28px);border-top:1px solid var(--cx-line)}
.tt-es-l li{padding-top:22px}
.tt-es-n{display:block;font-family:var(--f-label);font-size:11px;letter-spacing:.16em;color:var(--cx-fg3)}
.tt-es-l h3{margin:16px 0 12px;font-family:'nh-ultralight',var(--f-text);font-weight:200;font-size:clamp(28px,2.5vw,40px);line-height:1.05;letter-spacing:-.02em;color:var(--cx-fg)}
.tt-es-l p{margin:0;max-width:30ch;font-family:var(--f-light);font-weight:300;font-size:clamp(15px,1.1vw,17px);line-height:1.55;color:var(--cx-fg2)}
.tt-es-k{margin-top:clamp(100px,13vw,180px)}
.tt-es-h{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--cx-line)}
.tt-es-h li{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,28px);padding:clamp(28px,3.4vw,48px) 0;border-top:1px solid var(--cx-line)}
.tt-es-q{grid-column:1/span 7;margin:0;font-family:'nh-ultralight',var(--f-text);font-weight:200;font-size:clamp(32px,3.7vw,60px);line-height:1.05;letter-spacing:-.025em;color:var(--cx-fg);text-wrap:balance}
.tt-es-h .cx-p{grid-column:9/span 4;align-self:end}
@media (max-width:900px){
  .tt-es-l{grid-template-columns:1fr 1fr;row-gap:40px}
  .tt-es-q,.tt-es-h .cx-p{grid-column:1/-1}
  .tt-es-h .cx-p{margin-top:16px}
}
@media (max-width:560px){
  .tt-num .cx-n{font-size:clamp(46px,12.5vw,60px)}
  .tt-es-l{grid-template-columns:1fr;row-gap:34px}
}