/* ==========================================================================
   JGAMAZO® — sistema visual web
   Basado en el manual 03C/03D:
   · Colores aprobados: #000000 · #FFFFFF · #C2C2C2 · #4F69F1
   · Instrument Sans (jerarquía editorial) + IBM Plex Mono (sistema técnico)
   · Un protagonista por composición; el azul marca ritmo y decisiones puntuales.
   Movimiento: curva firma expo.out / cubic-bezier(.16,1,.3,1)
   ========================================================================== */

@font-face{font-family:"Instrument Sans";src:url("/assets/fonts/instrument-sans-var.ttf") format("truetype");font-weight:400 700;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/assets/fonts/ibm-plex-mono-400.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/assets/fonts/ibm-plex-mono-500.ttf") format("truetype");font-weight:500;font-display:swap}

:root{
  --black:#000;
  --white:#fff;
  --grey:#C2C2C2;
  --blue:#4F69F1;
  --paper:#F3F3F3;          /* neutro de fondo: tinte claro del gris corporativo */
  --ink-soft:#5A5A5A;       /* texto secundario sobre blanco (AA) */
  --line:rgba(0,0,0,.14);
  --line-strong:#000;
  --line-dark:rgba(255,255,255,.18);

  --font-display:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;

  --gutter:clamp(20px,4.6vw,66px);
  --header-h:72px;
  --radius:0px;             /* la marca es angular: sin esquinas redondeadas salvo píldoras */
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);

  --fs-mono:clamp(.68rem,.62rem + .2vw,.78rem);
  --fs-body:clamp(1rem,.95rem + .2vw,1.125rem);
  --fs-lead:clamp(1.15rem,1rem + .55vw,1.5rem);
  --fs-h3:clamp(1.6rem,1.2rem + 1.4vw,2.6rem);
  --fs-h2:clamp(2.6rem,1.4rem + 5vw,7rem);
  --fs-mega:clamp(3.2rem,1rem + 9.6vw,13.5rem);
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--white);scroll-padding-top:calc(var(--header-h) + 12px)}
body{background:var(--white);color:var(--black);font-family:var(--font-display);font-size:var(--fs-body);line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;text-rendering:optimizeLegibility}
img,svg,video,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
ul,ol{list-style:none}
::selection{background:var(--blue);color:var(--white)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

[hidden]{display:none!important}
.nt{text-transform:none!important}     /* nombres de marca con minúsculas (iMALDITTA) */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;left:12px;top:12px;z-index:1000;padding:12px 18px;background:var(--black);color:var(--white);font-family:var(--font-mono);font-size:var(--fs-mono);text-transform:uppercase;transform:translateY(-200%)}
.skip-link:focus{transform:none}

/* ---------- tipografía y piezas del sistema ---------- */
.mono,.label{font-family:var(--font-mono);font-size:var(--fs-mono);font-weight:500;letter-spacing:.04em;text-transform:uppercase;line-height:1.4}
.label--soft{color:var(--ink-soft)}
.display{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:-.035em;line-height:.9}
.h2{font-size:var(--fs-h2)}
.h3{font-size:var(--fs-h3);font-weight:700;letter-spacing:-.03em;line-height:1}
.lead{font-size:var(--fs-lead);line-height:1.35;letter-spacing:-.01em}
.muted{color:var(--ink-soft)}
.blue-bar{display:block;width:120px;height:10px;background:var(--blue)}
.blue-sq{display:inline-block;width:10px;height:10px;background:var(--blue);flex:none}
.rule{height:1px;background:var(--line-strong);border:0}
.text-balance{text-wrap:balance}

.wrap{padding-inline:var(--gutter)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,1.6vw,24px)}

/* fila de metadatos tipo etiqueta técnica: TEXTO ——— TEXTO */
.meta-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-block:14px;border-top:1px solid var(--line-strong)}
.meta-row--soft{border-color:var(--line)}

/* ---------- botones ---------- */
.btn{--bg:var(--black);--fg:var(--white);--fill:var(--blue);position:relative;display:inline-flex;align-items:center;gap:14px;padding:17px 26px;border-radius:999px;background:var(--bg);color:var(--fg);font-family:var(--font-mono);font-size:var(--fs-mono);font-weight:500;letter-spacing:.06em;text-transform:uppercase;overflow:hidden;isolation:isolate;will-change:transform;transition:color .5s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--fill);transform:scaleX(0);transform-origin:right;transition:transform .6s var(--ease)}
.btn:hover::before,.btn:focus-visible::before{transform:scaleX(1);transform-origin:left}
.btn__arrow{display:inline-block;width:1.1em;transition:transform .6s var(--ease)}
.btn:hover .btn__arrow{transform:translateX(4px)}
.btn--ghost{--bg:transparent;--fg:var(--black);--fill:var(--black);box-shadow:inset 0 0 0 1px var(--black)}
.btn--ghost:hover{color:var(--white)}
.btn--light{--bg:var(--white);--fg:var(--black);--fill:var(--blue)}
.btn--light:hover{color:var(--white)}
.btn--ghost-light{--bg:transparent;--fg:var(--white);--fill:var(--white);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.btn--ghost-light:hover{color:var(--black)}
.link-arrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:var(--fs-mono);font-weight:500;letter-spacing:.06em;text-transform:uppercase;padding-bottom:4px;background:linear-gradient(var(--blue),var(--blue)) 0 100%/0 2px no-repeat;transition:background-size .6s var(--ease)}
.link-arrow:hover{background-size:100% 2px}

/* ---------- cabecera ---------- */
.site-header{position:fixed;inset:0 0 auto;z-index:90;height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:24px;padding-inline:var(--gutter);color:var(--black);transition:transform .7s var(--ease),color .4s var(--ease),background-color .4s var(--ease)}
.site-header::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.82);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);opacity:0;transition:opacity .4s var(--ease)}
.site-header.is-scrolled::before{opacity:1}
.site-header.is-hidden{transform:translateY(-100%)}
.site-header.is-dark{color:var(--white)}
.site-header.is-dark::before{background:rgba(0,0,0,.6)}
.brand{display:flex;align-items:center;gap:12px;height:100%}
.brand svg{height:18px;width:auto}
.brand__iso{height:26px!important}
.nav{display:flex;gap:clamp(16px,2.2vw,34px)}
.nav a{position:relative;font-family:var(--font-mono);font-size:var(--fs-mono);font-weight:500;letter-spacing:.06em;text-transform:uppercase;padding-block:6px}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--blue);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.header-cta{padding:12px 20px}
.site-header.is-dark .header-cta{--bg:var(--white);--fg:var(--black)}
.site-header.is-dark .header-cta:hover{color:var(--white)}
.menu-btn{display:none;align-items:center;gap:10px;font-family:var(--font-mono);font-size:var(--fs-mono);font-weight:500;letter-spacing:.06em;text-transform:uppercase;padding:10px 0}
.menu-btn__lines{position:relative;width:22px;height:10px}
.menu-btn__lines::before,.menu-btn__lines::after{content:"";position:absolute;left:0;right:0;height:2px;background:currentColor;transition:transform .5s var(--ease),top .5s var(--ease)}
.menu-btn__lines::before{top:0}.menu-btn__lines::after{top:8px}
.menu-open .menu-btn__lines::before{top:4px;transform:rotate(45deg)}
.menu-open .menu-btn__lines::after{top:4px;transform:rotate(-45deg)}

.mobile-menu{position:fixed;inset:0;z-index:85;background:var(--black);color:var(--white);display:flex;flex-direction:column;justify-content:flex-end;padding:calc(var(--header-h) + 24px) var(--gutter) calc(32px + env(safe-area-inset-bottom));clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .8s var(--ease-in-out),visibility 0s .8s}
.menu-open .mobile-menu{clip-path:inset(0);visibility:visible;transition:clip-path .8s var(--ease-in-out),visibility 0s}
.menu-open .site-header{color:var(--white)}
.menu-open .site-header::before{opacity:0}
.mobile-menu nav{display:flex;flex-direction:column;border-top:1px solid var(--line-dark)}
.mobile-menu nav a{display:flex;justify-content:space-between;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line-dark);font-weight:700;text-transform:uppercase;letter-spacing:-.03em;font-size:clamp(2rem,9vw,3.4rem);line-height:1}
.mobile-menu nav a span{font-family:var(--font-mono);font-size:var(--fs-mono);font-weight:500;letter-spacing:.04em;color:var(--grey)}
.mobile-menu__foot{display:flex;justify-content:space-between;margin-top:28px;color:var(--grey)}

/* ---------- loader ---------- */
.loader{position:fixed;inset:0;z-index:200;background:var(--white);display:grid;place-items:center;pointer-events:none}
.loader__iso{width:min(34vw,220px);color:var(--black);clip-path:inset(0 100% 0 0)}
.loader__foot{position:absolute;inset:auto var(--gutter) 28px;display:flex;justify-content:space-between}
.loader__count{font-variant-numeric:tabular-nums}
.loader__bar{position:absolute;left:0;bottom:0;height:4px;width:100%;background:var(--blue);transform-origin:0 50%;transform:scaleX(0)}
html:not(.has-loader) .loader{display:none}

/* ---------- cursor ---------- */
.cursor{position:fixed;left:0;top:0;z-index:300;pointer-events:none;opacity:0;transition:opacity .3s}
.cursor__dot{width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--black);box-shadow:0 0 0 1.5px var(--white);transition:transform .5s var(--ease),background-color .3s}
.cursor__label{position:absolute;left:0;top:0;width:88px;height:88px;margin:-44px 0 0 -44px;border-radius:50%;background:var(--blue);color:var(--white);display:grid;place-items:center;font-family:var(--font-mono);font-size:.7rem;font-weight:500;letter-spacing:.08em;transform:scale(0);transition:transform .55s var(--ease)}
.cursor.is-view .cursor__label{transform:scale(1)}
.cursor.is-view .cursor__dot{transform:scale(0)}
.cursor.is-link .cursor__dot{transform:scale(2.6);background:var(--blue)}
.cursor.is-on{opacity:1}
.cursor.is-dark-zone .cursor__dot{background:var(--white);box-shadow:0 0 0 1.5px var(--black)}
@media (hover:hover) and (pointer:fine){ .has-cursor, .has-cursor a, .has-cursor button{cursor:none} .has-cursor input,.has-cursor textarea,.has-cursor select{cursor:auto} }

/* ==========================================================================
   PORTADA
   ========================================================================== */

/* ---------- 01 hero ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:640px;overflow:hidden;background:var(--white)}
.hero__stroke{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.hero__stroke path{fill:none;stroke-linecap:round}
.hero__stroke .s-blue{stroke:var(--blue);stroke-width:46}
.hero__stroke .s-line{stroke:var(--black);stroke-width:2}
.hero__line{position:absolute;z-index:2;font-size:clamp(3rem,.6rem + 7.2vw,11.5rem);font-stretch:88%;white-space:nowrap;will-change:transform}
.hero__line--1{left:var(--gutter);top:calc(var(--header-h) + 9vh)}
.hero__line--2{right:var(--gutter);top:calc(var(--header-h) + 9vh + .9em);z-index:2;color:transparent;-webkit-text-stroke:1.5px var(--black)}
.hero__figure{position:absolute;z-index:3;left:50%;bottom:3svh;height:min(80svh,980px);aspect-ratio:814/1448;transform:translateX(-50%);perspective:1200px}
.hero__figure-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;will-change:transform}
.hero__figure img{width:100%;height:100%;object-fit:contain;object-position:50% 100%;user-select:none;-webkit-user-drag:none;filter:drop-shadow(0 30px 40px rgba(0,0,0,.18))}
.hero__shadow{position:absolute;left:50%;bottom:-1.2%;width:78%;height:5%;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(0,0,0,.34),transparent);filter:blur(4px);z-index:-1}
.hero__meta{position:absolute;z-index:5;top:calc(var(--header-h) + 12px);inset-inline:var(--gutter);display:flex;justify-content:space-between;gap:16px;padding-top:12px;border-top:1px solid var(--black)}
.hero__meta span{display:flex;align-items:center;gap:10px}
.hero__foot{position:absolute;z-index:5;left:var(--gutter);right:var(--gutter);bottom:clamp(20px,4vh,40px);display:flex;justify-content:space-between;align-items:flex-end;gap:24px;pointer-events:none}
.hero__intro{max-width:34ch;pointer-events:auto}
.hero__intro p{font-size:clamp(.98rem,.9rem + .3vw,1.15rem);line-height:1.45}
.hero__ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.hero__aside{display:flex;flex-direction:column;align-items:flex-end;gap:10px;text-align:right;pointer-events:auto}
.scroll-cue{display:inline-flex;align-items:center;gap:10px}
.scroll-cue i{position:relative;width:1px;height:46px;background:var(--line);overflow:hidden}
.scroll-cue i::after{content:"";position:absolute;inset:0;background:var(--black);animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* ---------- 02 marquee ---------- */
.marquee{position:relative;z-index:2;background:var(--black);color:var(--white);overflow:hidden;padding-block:18px;white-space:nowrap}
.marquee__track{display:inline-flex;will-change:transform}
.marquee__group{display:inline-flex;align-items:center;gap:28px;padding-right:28px;font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(1.4rem,1rem + 1.6vw,2.6rem);line-height:1}
.marquee__group i{display:inline-block;width:.55em;height:.55em;background:var(--blue);transform:skewX(-20deg)}

/* ---------- 03 manifiesto ---------- */
.manifesto{padding-block:clamp(110px,18vh,220px)}
.manifesto__label{grid-column:1 / span 3;display:flex;flex-direction:column;gap:18px}
.manifesto__label svg{width:64px}
.manifesto__text{grid-column:4 / span 9;font-size:clamp(1.75rem,1rem + 2.9vw,4.1rem);font-weight:600;line-height:1.06;letter-spacing:-.035em;text-wrap:pretty}
.manifesto__text .w{color:var(--grey)}
.manifesto__sign{grid-column:4 / span 9;display:flex;gap:28px;flex-wrap:wrap;margin-top:44px}

/* ---------- cabeceras de sección ---------- */
.sec-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,1.6vw,24px);align-items:end;margin-bottom:clamp(40px,7vh,80px)}
.sec-head__top{grid-column:1 / -1;margin-bottom:clamp(28px,5vh,56px)}
.sec-head__title{grid-column:1 / span 8}
.sec-head__aside{grid-column:9 / span 4;display:flex;flex-direction:column;gap:18px;padding-bottom:.6em}
.sec-head__aside p{max-width:38ch}

/* ---------- 04 originals ---------- */
.originals{background:var(--paper);padding-block:clamp(90px,14vh,170px)}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,24px)}
.card{position:relative;display:flex;flex-direction:column;background:var(--white)}
.card__label{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line)}
.card__status{display:inline-flex;align-items:center;gap:8px}
.card__status[data-k="soon"] .blue-sq{background:var(--grey)}
.card__media{position:relative;aspect-ratio:4/5;overflow:hidden;background:#ececec}
.card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),clip-path 1s var(--ease)}
.card__media .is-hover{clip-path:inset(100% 0 0 0)}
.card:hover .card__media .is-cover{transform:scale(1.06)}
.card:hover .card__media .is-hover{clip-path:inset(0)}
.card__body{display:flex;flex-direction:column;gap:10px;padding:18px 16px 20px}
.card__title{display:flex;justify-content:space-between;align-items:center;gap:12px}
.card__title .display{font-size:clamp(2rem,1.2rem + 2vw,3.2rem)}
.card__go{width:46px;height:46px;flex:none;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--black);transition:background-color .5s var(--ease),color .5s var(--ease),transform .6s var(--ease)}
.card:hover .card__go{background:var(--black);color:var(--white);transform:rotate(-45deg)}
.card__summary{color:var(--ink-soft);max-width:40ch}
.card__link{position:absolute;inset:0;z-index:2}

/* ---------- 05 del 3D a la vitrina (oscuro, fijado) ---------- */
.making{position:relative;background:var(--black);color:var(--white)}
.making__pin{height:100vh;height:100svh;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,1.6vw,24px);align-items:center;padding-inline:var(--gutter);padding-top:var(--header-h)}
.making__copy{grid-column:1 / span 5;display:flex;flex-direction:column;gap:clamp(18px,3vh,32px)}
.making__copy .h2{font-size:clamp(2.4rem,1.2rem + 4vw,5.6rem)}
.steps{display:flex;flex-direction:column;border-top:1px solid var(--line-dark)}
.step{display:grid;grid-template-columns:52px 1fr;gap:4px 12px;padding:16px 0;border-bottom:1px solid var(--line-dark);opacity:.32;transition:opacity .5s var(--ease)}
.step.is-active{opacity:1}
.step__n{grid-row:span 2;font-family:var(--font-mono);font-size:var(--fs-mono);color:var(--grey);padding-top:4px}
.step.is-active .step__n{color:var(--blue)}
.step h3{font-size:clamp(1.1rem,1rem + .5vw,1.45rem);font-weight:600;letter-spacing:-.01em}
.step p{color:#b9b9b9;font-size:.95rem;max-width:42ch}
.making__stage{grid-column:7 / span 6;position:relative;height:min(78svh,820px);display:grid;place-items:center}
.making__frame{position:relative;height:100%;aspect-ratio:760/873;max-width:100%}
.making__frame canvas,.making__final{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.making__final{object-fit:cover;opacity:0}
.making__corner{position:absolute;width:18px;height:18px;border-color:var(--white);border-style:solid;opacity:.6}
.making__corner.tl{left:0;top:0;border-width:1px 0 0 1px}.making__corner.tr{right:0;top:0;border-width:1px 1px 0 0}
.making__corner.bl{left:0;bottom:0;border-width:0 0 1px 1px}.making__corner.br{right:0;bottom:0;border-width:0 1px 1px 0}
.making__hud{position:absolute;inset:auto 0 -34px;display:flex;justify-content:space-between;color:var(--grey)}
.making__progress{height:2px;background:var(--line-dark);margin-top:6px}
.making__progress span{display:block;height:100%;background:var(--blue);transform-origin:0 50%;transform:scaleX(0)}

/* ---------- 06 studio / piezas únicas ---------- */
.studio{padding-block:clamp(100px,16vh,190px)}
.project{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,1.6vw,24px);align-items:end;margin-top:clamp(56px,10vh,120px)}
.project__media{grid-column:1 / span 7;position:relative;overflow:hidden;aspect-ratio:1/1;background:#e6e6e6}
.project__media img{width:100%;height:118%;object-fit:cover;margin-top:-9%}
.project__info{grid-column:9 / span 4;display:flex;flex-direction:column;gap:18px;padding-bottom:4px}
.project__info .display{font-size:clamp(2.4rem,1.4rem + 3vw,4.8rem)}
.project__thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.project__thumbs img{aspect-ratio:1/1;object-fit:cover;width:100%;background:#e6e6e6}
.project--rev .project__media{grid-column:6 / span 7;grid-row:1;aspect-ratio:4/5}
.project--rev .project__info{grid-column:1 / span 4;grid-row:1}
.project__link{position:absolute;inset:0;z-index:2}

/* ---------- cortes gráficos (03D / 02) ---------- */
.cuts{position:relative;height:clamp(120px,22vh,240px);overflow:hidden;background:var(--white)}
.cuts__track{position:absolute;inset:0 -20%;display:flex;will-change:transform}
.cuts__track span{flex:none;width:clamp(56px,7vw,110px);height:100%;transform:skewX(-28deg);margin-right:clamp(30px,4vw,64px);background:var(--black)}
.cuts__track span:nth-child(3n+2){background:var(--grey)}
.cuts__track span.is-blue{background:var(--blue)}
.cuts::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--white);opacity:.9}

/* ---------- 07 servicios ---------- */
.services{padding-block:clamp(100px,16vh,190px);background:var(--white)}
.svc-list{border-top:1px solid var(--black)}
.svc{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,1.6vw,24px);align-items:center;padding-block:clamp(22px,3.6vh,38px);border-bottom:1px solid var(--black);isolation:isolate}
.svc::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--black);transform:scaleY(0);transform-origin:bottom;transition:transform .7s var(--ease)}
.svc__n{grid-column:1 / span 1}
.svc__title{grid-column:2 / span 6;font-size:clamp(1.8rem,1rem + 3vw,4.4rem);transition:transform .7s var(--ease)}
.svc__desc{grid-column:8 / span 4;color:var(--ink-soft);transition:color .5s var(--ease)}
.svc__go{grid-column:12;justify-self:end;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1px currentColor;transition:transform .7s var(--ease),background-color .5s,color .5s}
.svc__link{position:absolute;inset:0;z-index:2}
@media (hover:hover){
  .svc:hover::before{transform:scaleY(1);transform-origin:top}
  .svc:hover{color:var(--white)}
  .svc:hover .svc__desc{color:#cfcfcf}
  .svc:hover .svc__title{transform:translateX(14px)}
  .svc:hover .svc__go{background:var(--blue);color:var(--white);box-shadow:none;transform:rotate(-45deg)}
}
.svc-preview{position:fixed;left:0;top:0;z-index:60;width:clamp(220px,20vw,320px);aspect-ratio:4/5;pointer-events:none;overflow:hidden;opacity:0;transform:scale(.8);transition:opacity .4s var(--ease),transform .6s var(--ease);background:#e9e9e9}
.svc-preview.is-on{opacity:1;transform:scale(1)}
.svc-preview img,.svc-preview .svc-preview__art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s}
.svc-preview .is-current{opacity:1}
.svc-preview__art{background:var(--black)}

/* ---------- 08 proceso (cómo encargar) ---------- */
.process{padding-block:clamp(100px,16vh,190px);background:var(--paper)}
.process__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,24px)}
.pstep{background:var(--white);padding:22px 20px 28px;display:flex;flex-direction:column;gap:14px;min-height:300px}
.pstep__n{font-family:var(--font-display);font-weight:700;font-size:clamp(3rem,2rem + 3vw,5.4rem);letter-spacing:-.05em;line-height:.9}
.pstep:nth-child(2) .pstep__n{color:var(--blue)}
.pstep h3{font-size:1.25rem;font-weight:600;letter-spacing:-.01em;margin-top:auto}
.pstep p{color:var(--ink-soft);font-size:.98rem}

/* ---------- 09 estudio ---------- */
.about{position:relative;padding-block:clamp(110px,18vh,220px);overflow:hidden}
.about__stroke{position:absolute;right:-8vw;top:clamp(40px,8vh,90px);width:min(52vw,760px);pointer-events:none;z-index:0}
.about__stroke path{fill:none;stroke-linecap:round}
.about .grid{position:relative;z-index:1}
.about__title{grid-column:1 / span 9;font-size:clamp(2.6rem,1.2rem + 5vw,7.4rem)}
.about__text{grid-column:1 / span 6;margin-top:clamp(36px,6vh,64px);display:flex;flex-direction:column;gap:18px}
.about__facts{grid-column:8 / span 5;margin-top:clamp(36px,6vh,64px);align-self:end;position:relative;z-index:2;background:var(--white);padding:0 0 4px}

/* ---------- 10 encargos / contacto ---------- */
.contact{position:relative;background:var(--black);color:var(--white);padding-block:clamp(100px,16vh,190px)}
.contact .sec-head__aside p{color:#cfcfcf}
.contact__title{font-size:clamp(2.8rem,1.4rem + 5.6vw,8rem)}
.contact__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,1.6vw,24px)}
.contact__side{grid-column:1 / span 4;display:flex;flex-direction:column;gap:22px}
.contact__side a.big{font-size:clamp(1.3rem,1rem + 1.2vw,2rem);font-weight:600;letter-spacing:-.02em;border-bottom:1px solid var(--line-dark);padding-bottom:10px;transition:color .4s}
.contact__side a.big:hover{color:var(--blue)}
.form{grid-column:6 / span 7;display:grid;grid-template-columns:1fr 1fr;gap:28px 24px}
.field{position:relative;display:flex;flex-direction:column;gap:8px}
.field--full{grid-column:1 / -1}
.field label,.field legend{font-family:var(--font-mono);font-size:var(--fs-mono);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:#bdbdbd}
.field input,.field select,.field textarea{width:100%;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.35);padding:10px 0 12px;font-size:1.1rem;color:var(--white);border-radius:0;transition:border-color .4s}
.field textarea{min-height:120px;resize:vertical;line-height:1.45}
.field select{appearance:none;-webkit-appearance:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E") right 4px center no-repeat;padding-right:24px}
.field select option{color:var(--black)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue)}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.35)}
.field__line{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.field:focus-within .field__line{transform:scaleX(1)}
.field.is-invalid input,.field.is-invalid select,.field.is-invalid textarea{border-color:#ff8a8a}
.field__err{font-size:.85rem;color:#ff9d9d;min-height:1.2em}
.chip{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;padding:8px 12px;border:1px solid var(--blue);color:var(--white)}
.chip button{font-family:var(--font-mono);font-size:.8rem;opacity:.8}
.check{grid-column:1 / -1;display:flex;gap:12px;align-items:flex-start;font-size:.92rem;color:#cfcfcf}
.check input{appearance:none;-webkit-appearance:none;flex:none;width:20px;height:20px;border:1px solid rgba(255,255,255,.6);margin-top:2px;display:grid;place-items:center}
.check input:checked{background:var(--blue);border-color:var(--blue)}
.check input:checked::after{content:"";width:10px;height:6px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:translateY(-1px) rotate(-45deg)}
.check a{text-decoration:underline;text-underline-offset:3px}
.form__actions{grid-column:1 / -1;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.form__status{font-size:.95rem;color:#cfcfcf}
.form__status.is-ok{color:#9fb0ff}
.form__status.is-err{color:#ff9d9d}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* ---------- pie ---------- */
.site-footer{background:var(--white);padding:clamp(70px,12vh,140px) var(--gutter) calc(28px + env(safe-area-inset-bottom))}
.footer__cols{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,1.6vw,24px);row-gap:36px}
.footer__claim{grid-column:1 / span 5}
.footer__claim .display{font-size:clamp(1.8rem,1rem + 2.2vw,3.2rem)}
.footer__col{grid-column:span 2;display:flex;flex-direction:column;gap:10px}
.footer__col:first-of-type{grid-column:7 / span 2}
.footer__col a{width:fit-content;background:linear-gradient(var(--blue),var(--blue)) 0 100%/0 2px no-repeat;transition:background-size .5s var(--ease)}
.footer__col a:hover{background-size:100% 2px}
.footer__logo{margin-top:clamp(60px,10vh,120px);color:var(--black)}
.footer__logo svg{width:100%;height:auto}
.footer__bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:22px;padding-top:14px;border-top:1px solid var(--black)}

/* ==========================================================================
   FICHA DE PIEZA
   ========================================================================== */
.piece{padding-top:calc(var(--header-h) + 18px)}
.piece__crumbs{display:flex;gap:10px;align-items:center;padding-bottom:14px;border-bottom:1px solid var(--black)}
.piece__crumbs a{color:var(--ink-soft)}
.piece__crumbs a:hover{color:var(--black)}
.piece__layout{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,1.6vw,24px);padding-top:24px;align-items:start}
.piece__gallery{grid-column:1 / span 7;display:flex;flex-direction:column;gap:clamp(10px,1.2vw,18px)}
.piece__gallery figure{position:relative;overflow:hidden;background:#ececec}
.piece__gallery img{width:100%;height:auto}
.piece__gallery figcaption{position:absolute;left:12px;bottom:10px;padding:5px 8px;background:var(--white)}
.piece__info{grid-column:9 / span 4;container-type:inline-size;position:sticky;top:calc(var(--header-h) + 24px);display:flex;flex-direction:column;gap:22px;padding-bottom:40px}
.piece__name{font-size:clamp(2.8rem,2rem + 3vw,6rem);font-size:clamp(2.8rem,17cqi,7.5rem);font-stretch:88%;overflow-wrap:anywhere}
.piece__tagline{font-size:var(--fs-lead);letter-spacing:-.01em;line-height:1.3}
.status{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;padding:9px 14px;border:1px solid var(--black)}
.status[data-k="soon"] .blue-sq{background:var(--grey)}
.specs{border-top:1px solid var(--black)}
.specs div{display:grid;grid-template-columns:42% 1fr;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.specs dt{color:var(--ink-soft)}
.piece__desc{display:flex;flex-direction:column;gap:14px;color:#222}
.piece__ctas{display:flex;flex-direction:column;gap:10px}
.piece__ctas .btn{justify-content:space-between}
.turntable{position:relative;background:var(--black);color:var(--white);aspect-ratio:760/873;touch-action:pan-y;cursor:grab;user-select:none}
.turntable:active{cursor:grabbing}
.turntable canvas{width:100%;height:100%}
.turntable__hint{position:absolute;left:12px;right:12px;bottom:10px;display:flex;justify-content:space-between;color:var(--grey);pointer-events:none}
.turntable__bar{position:absolute;left:0;right:0;top:0;height:2px;background:var(--line-dark)}
.turntable__bar span{display:block;height:100%;background:var(--blue);transform-origin:0 50%}
.more{padding-block:clamp(90px,14vh,160px);background:var(--paper);margin-top:clamp(60px,10vh,120px)}

/* ---------- páginas de texto (legales) ---------- */
.prose-page{padding:calc(var(--header-h) + clamp(40px,8vh,90px)) var(--gutter) clamp(80px,12vh,140px)}
.prose-page .display{font-size:clamp(2.6rem,1.4rem + 4.4vw,6.4rem);margin-bottom:28px}
.prose{max-width:72ch;display:flex;flex-direction:column;gap:16px;margin-top:40px}
.prose h2{font-size:1.4rem;font-weight:700;letter-spacing:-.01em;margin-top:22px}
.prose a{text-decoration:underline;text-underline-offset:3px}
.prose ul{list-style:disc;padding-left:1.2em;display:flex;flex-direction:column;gap:6px}
.todo{background:#e9edff;padding:0 4px}

/* ---------- 404 ---------- */
.notfound{min-height:100svh;display:grid;place-items:center;text-align:center;padding:var(--header-h) var(--gutter) 40px}
.notfound .display{font-size:clamp(6rem,3rem + 18vw,22rem);letter-spacing:-.06em}

/* ---------- estados de animación (solo con JS y movimiento permitido) ---------- */
.js.motion [data-reveal]{opacity:0;transform:translateY(36px)}
.js.motion [data-clip]{clip-path:inset(100% 0 0 0)}
.js.motion .hero__line,.js.motion .hero__meta,.js.motion .hero__foot,.js.motion .hero__figure img{visibility:hidden}
.hero__stroke path,.about__stroke path{stroke-dasharray:1}
.js.motion .hero__stroke path,.js.motion .about__stroke path{stroke-dashoffset:1}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1100px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .process__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sec-head__title{grid-column:1 / -1}
  .sec-head__aside{grid-column:1 / span 8;margin-top:24px}
  .project__info{grid-column:8 / span 5}
  .project--rev .project__info{grid-column:1 / span 5}
  .footer__claim{grid-column:1 / -1}
  .footer__col,.footer__col:first-of-type{grid-column:span 4}
}
@media (max-width:860px){
  :root{--header-h:64px}
  .nav,.header-cta{display:none}
  .menu-btn{display:inline-flex}
  .grid>*{grid-column:1 / -1!important}
  .hero{min-height:600px}
  .hero__line{font-size:clamp(2.6rem,13.5vw,6rem)}
  .hero__line--1{top:calc(var(--header-h) + 64px);white-space:normal;line-height:.88;max-width:8ch}
  .hero__line--2{top:calc(var(--header-h) + 64px + 1.76em + 8px);right:auto;left:var(--gutter);white-space:normal;line-height:.88;max-width:8ch}
  .hero__figure{height:min(46svh,440px);bottom:calc(228px + env(safe-area-inset-bottom));left:auto;right:-5vw;transform:none}
  .hero__meta span:last-child{display:none}
  .hero__foot{flex-direction:column;align-items:flex-start}
  .hero__aside{display:none}
  .hero__intro{max-width:none}
  .hero__intro p{font-size:.98rem}
  .manifesto__sign{margin-top:28px}
  .cards{grid-template-columns:1fr}
  .making__pin{display:flex;flex-direction:column;justify-content:center;gap:22px;padding-top:calc(var(--header-h) + 8px);padding-bottom:20px}
  .making__copy{gap:14px}
  .making__copy>p{display:none}
  .making__stage{width:100%;height:42svh}
  .step{padding:10px 0;display:none}
  .step.is-active{display:grid}
  .project,.project--rev{display:flex;flex-direction:column;gap:22px;align-items:stretch}
  .project__media,.project--rev .project__media{aspect-ratio:4/5}
  .svc__n{grid-column:1 / span 2}
  .svc__title{grid-column:1 / span 10;grid-row:2;margin-top:6px}
  .svc__desc{grid-column:1 / span 10;grid-row:3;margin-top:8px}
  .svc__go{grid-column:11 / span 2;grid-row:2;width:44px;height:44px}
  .process__grid{grid-template-columns:1fr}
  .pstep{min-height:auto}
  .about__stroke{opacity:.35;width:120vw;right:-40vw}
  .form{grid-column:1 / -1;grid-template-columns:1fr;margin-top:48px}
  .contact__side{grid-column:1 / -1}
  .footer__col,.footer__col:first-of-type{grid-column:span 6}
  .piece__gallery,.piece__info{grid-column:1 / -1}
  .piece__info{position:static;padding-top:28px}
  .piece__layout{display:flex;flex-direction:column-reverse}
}
@media (max-width:520px){
  .hero__ctas .btn--ghost{display:none}
  .footer__col,.footer__col:first-of-type{grid-column:1 / -1}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .manifesto__text .w{color:inherit}
  .step{opacity:1}
}

/* ---------- transiciones entre páginas (navegadores compatibles) ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .45s var(--ease-in-out) both}
::view-transition-new(root){animation:vt-in .7s var(--ease) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-24px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(32px)}}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}