.proceso{--pc-t:#0d0e13;--pc-p:#f4f0ec;--pc-a:#dfd1b9}

/* ---------- cabecera: sin banda; al bajar, un velo desenfocado que se desvanece (como en las páginas nuevas) ---------- */
.cab::before{content:"";position:absolute;left:0;right:0;top:0;height:150%;z-index:-1;pointer-events:none;opacity:0;transition:opacity .5s;background:rgba(13,14,19,.45);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);-webkit-mask-image:linear-gradient(180deg,#000 40%,transparent);mask-image:linear-gradient(180deg,#000 40%,transparent)}
.cab.osc::before{background:rgba(244,240,236,.7)}
.cab.fondo::before{opacity:1}
#cur:not(.on){display:none!important}

/* ======================= SEGUNDO PASE (04/11/2026): que concuerde con quien-soy-a, web-a y herramientas-a ======================= */
/* 1 · fondos: fuera el blanco puro (papel cálido) y los oscuros con tinta cálida, sin azul ni violeta */
:root{--blanco:#f4f0ec;--tinta-c:#16130f;--ar:#dfd1b9;--br:#54351f;--crema2:#f6f1e8;--ti-hilo:linear-gradient(90deg,#f0dfae,#d9a441 30%,#a8491f 55%,#7c43c9 80%,#2f5fd0)}
.ntit h2{text-shadow:0 0 40px rgba(244,240,236,.95),0 0 12px rgba(244,240,236,.8)}
.ntit p{background:rgba(244,240,236,.9)}
.marcha{background:var(--tinta-c)}
.servicios li::after{background:rgba(84,53,31,.38)}            /* raya de 1 px en bronce */
.servicios .n,.pieza .cap .gr,.pieza .cap .et,.config .tx .et{color:#6b5a4c}

/* 3 · letra: los tamaños, el interlineado y las cursivas de las interiores */
.it{letter-spacing:-.03em;padding-right:.04em}
.gigante,.pal,.ntit h2,.proceso h2,.config .tx h3,.peld .w,.servicios .s{letter-spacing:-.052em}
.collage .txt,.pcapa.dos p,.lema,.p6b,.panel .entra{line-height:1.3;letter-spacing:-.012em}
/* etiquetas: píldora fina, como las de web-a */
main .mas{display:block!important;width:fit-content;font-size:13px!important;font-weight:500!important;letter-spacing:.02em;line-height:1.2;padding:.32em .95em;border:1px solid currentColor;border-radius:99px;margin-bottom:1.3em}
main .mfijo .eti.mas{margin:0 auto}
main .ntit .mas{margin-left:auto;margin-right:auto}
main .collage .txt .mas{margin-bottom:1.5em}
.servicios .n{font-weight:500;font-size:13px}
/* 4 · «Qué hago»: cada fila, con su pase de luz y su subrayado de titanio al pasar */
.servicios li{clip-path:inset(0)}
.servicios li::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(105deg,transparent 38%,rgba(240,223,174,.55) 50%,transparent 62%);transform:translateX(-100%)}
.servicios li:hover::before{transform:translateX(100%);transition:transform 1.15s var(--curva)}
.servicios li>*{position:relative;z-index:1}
.servicios .va{border-bottom:0;background:var(--ti-hilo) 0 100%/0 1px no-repeat;padding-bottom:3px;transition:background-size .7s var(--curva)}
.servicios li:hover .va,.servicios .va:focus-visible{background-size:100% 1px}
/* 5 · imágenes: esquina de 24 px y sombra suave, como las tarjetas de las interiores */
.pieza .marco{border-radius:24px;box-shadow:0 30px 60px -36px rgba(13,14,19,.65);clip-path:inset(calc(100% + 80px) -80px -80px -80px)}
.pieza.vis .marco{clip-path:inset(-80px -80px -80px -80px)}
.config .img{border-radius:24px;box-shadow:0 30px 60px -36px rgba(13,14,19,.65)}
.caja{border-radius:24px}

/* ======================= TERCER PASE (05/11/2026): cuatro servicios con el mismo peso ======================= */
/* Trabajos: las dos webs capturadas de su portada publicada, enteras (1536 × 695), a lo ancho */
.pieza .wd{aspect-ratio:1536/695}
.p2{grid-column:12/24;grid-row:2;margin-top:-5vw}
.p3{grid-column:3/12;grid-row:2;margin-top:7vw}
.fport .tarj{aspect-ratio:var(--ar,16/10)}
/* Lo que hago: cuatro peldaños */
.peld:nth-child(2){padding-left:8%} .peld:nth-child(3){padding-left:16%} .peld:nth-child(4){padding-left:24%}
.peld p{max-width:19ch}
.escalera{gap:clamp(14px,1.7vw,24px)}
.peld .w{font-size:clamp(40px,6.2vw,100px)}
.servicios .d{grid-column:15/25}
/* Cómo trabajo: cuatro pasos fijos; cada uno, lo que pasa en los cuatro servicios */
.proceso{background:var(--tinta-c);padding:0;overflow:visible}
.ppista{height:440vh;position:relative}
.pfijo{position:sticky;top:0;height:100vh;height:100svh;min-height:560px;overflow:hidden;padding:clamp(88px,13vh,116px) var(--g) clamp(54px,8vh,72px);display:flex;flex-direction:column;isolation:isolate}
.pfijo::before{content:"";position:absolute;inset:-20% -10%;z-index:-1;pointer-events:none;background:radial-gradient(34% 30% at 16% 22%,rgba(217,164,65,.14),transparent 70%),radial-gradient(30% 34% at 88% 78%,rgba(168,73,31,.16),transparent 70%);filter:blur(30px)}
.pr-luz{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:-2;opacity:.5;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,#000 82%,transparent);mask-image:linear-gradient(180deg,#000 82%,transparent)}
.proceso .mas{border-color:rgba(223,209,185,.55);color:var(--ar)}
.pcab{position:relative;z-index:2;max-width:46ch}
.pcab h2{margin-top:0;font-weight:300;font-size:clamp(22px,2.1vw,34px);line-height:1.12;letter-spacing:-.035em;color:var(--papel);max-width:24ch}
.pcab h2 .it{font-size:1.1em}
.pst-lista{list-style:none;position:relative;flex:1;min-height:0}
.pst{position:absolute;inset:0;display:grid;grid-template-columns:repeat(24,1fr);align-items:center;color:var(--papel)}
.pr-js .pst{opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s .5s}
.pr-js .pst.on{opacity:1;visibility:visible;transition:opacity .6s ease .1s,visibility 0s}
.pst-l{grid-column:1/14}
.pst-n{display:block;font-size:13px;font-weight:500;letter-spacing:.02em;color:var(--ar);font-variant-numeric:tabular-nums}
.pst-w{margin-top:.35em;font-weight:300;font-size:clamp(50px,7.2vw,118px);line-height:.94;letter-spacing:-.055em;max-width:9em}
.pst-w .it{color:#fff;padding-right:.06em}
.pst-f{margin-top:.8em;font-size:clamp(19px,1.67vw,26px);line-height:1.25;letter-spacing:-.012em;color:var(--ar);max-width:20ch}
.pst-r{grid-column:15/25;list-style:none;display:grid}
.pst-r li{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);gap:0 clamp(14px,1.6vw,26px);align-items:baseline;padding:clamp(13px,1.9vh,20px) 0;border-top:1px solid rgba(223,209,185,.22);position:relative}
.pst-r li:last-child{border-bottom:1px solid rgba(223,209,185,.22)}
.pst-r a{font-size:clamp(15px,1.25vw,20px);font-weight:500;letter-spacing:-.015em;width:fit-content;background:var(--ti-hilo) 0 100%/0 1px no-repeat;padding-bottom:3px;transition:background-size .7s var(--curva)}
.pst-r a:hover,.pst-r a:focus-visible{background-size:100% 1px}
.pst-r span{font-size:clamp(15px,1.2vw,19px);line-height:1.3;letter-spacing:-.01em;color:rgba(244,240,236,.82)}
.pr-js .pst .pst-n,.pr-js .pst .pst-w,.pr-js .pst .pst-f,.pr-js .pst .pst-r li{transform:translate3d(0,26px,0);transition:transform .9s var(--curva)}
.pr-js .pst.on .pst-n,.pr-js .pst.on .pst-w,.pr-js .pst.on .pst-f,.pr-js .pst.on .pst-r li{transform:none}
.pr-js .pst.on .pst-w{transition-delay:.08s} .pr-js .pst.on .pst-f{transition-delay:.18s}
.pr-js .pst.on .pst-r li:nth-child(1){transition-delay:.12s} .pr-js .pst.on .pst-r li:nth-child(2){transition-delay:.2s}
.pr-js .pst.on .pst-r li:nth-child(3){transition-delay:.28s} .pr-js .pst.on .pst-r li:nth-child(4){transition-delay:.36s}
.prail{position:relative;z-index:2;padding-top:14px}
.prail::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(223,209,185,.25)}
.prail i{position:absolute;left:0;right:0;top:0;height:2px;margin-top:-.5px;background:var(--ti-hilo);transform-origin:left;transform:scaleX(0)}
.prail ol{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);font-size:13.5px;font-weight:400;color:rgba(244,240,236,.45)}
.prail li{transition:color .4s}
.prail li.on{color:var(--papel)}
.prail li span{margin-right:.7em;font-weight:500;font-variant-numeric:tabular-nums}
/* sin JS o con movimiento reducido: los cuatro pasos, uno debajo de otro */
.proceso:not(.pr-js) .ppista{height:auto}
.proceso:not(.pr-js) .pfijo{position:relative;height:auto;overflow:visible;gap:40px}
.proceso:not(.pr-js) .pst-lista{display:grid;gap:clamp(60px,10vh,110px);flex:none}
.proceso:not(.pr-js) .pst{position:relative;inset:auto}
.proceso:not(.pr-js) .prail{display:none}
/* la parte de abajo: elegir por dónde, con los cuatro al mismo tamaño */
.pfin{position:relative;z-index:1;padding:clamp(70px,12vh,130px) var(--g) clamp(80px,13vh,140px);background:var(--tinta-c);color:var(--papel);border-top:1px solid rgba(223,209,185,.18)}
.pfin-t{margin-top:.3em;font-weight:300;font-size:clamp(46px,7vw,118px);line-height:.95;letter-spacing:-.055em}
.pfin-t .it{color:#fff}
.pcuatro{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.2vw,18px);margin-top:clamp(34px,5vw,70px)}
.pcuatro li{display:flex}
.pcuatro a{flex:1;position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:clamp(40px,7vh,90px);min-height:clamp(190px,26vh,260px);padding:clamp(18px,1.7vw,28px);border-radius:24px;border:1px solid rgba(223,209,185,.3);background:rgba(244,240,236,.04);overflow:hidden;transition:background .5s,color .5s,border-color .5s}
.pcuatro a::after{content:"";position:absolute;inset:-20% -60%;background:linear-gradient(105deg,transparent 42%,rgba(240,223,174,.22) 50%,transparent 58%);transform:translateX(-70%);pointer-events:none}
.pcuatro a:hover::after{transform:translateX(70%);transition:transform 1.15s var(--curva)}
.pcuatro a:hover,.pcuatro a:focus-visible{background:var(--papel);color:var(--tinta);border-color:var(--papel)}
.pq-n{font-size:13px;font-weight:500;letter-spacing:.02em;width:fit-content;padding:.28em .85em;border:1px solid currentColor;border-radius:99px;opacity:.85}
.pcuatro b{font-weight:300;font-size:clamp(24px,2.5vw,40px);line-height:1;letter-spacing:-.05em;max-width:9em}
.pq-p{font-size:clamp(14px,1.1vw,17px);font-weight:400;line-height:1.3;opacity:.8}
.pcuatro i{position:absolute;right:clamp(18px,1.7vw,28px);top:clamp(16px,1.6vw,26px);font-style:normal;font-size:22px;transition:transform .4s var(--curva)}
.pcuatro a:hover i{transform:translateX(5px)}
.pr-acc{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:clamp(34px,5vw,64px)}
.proceso .pr-acc a.empieza2.pc-bot{margin-top:0;min-height:68px;padding:0 1.7em;font-size:clamp(18px,1.4vw,22px);display:inline-flex;gap:.7em;background:var(--pc-p);color:var(--pc-t);font-weight:400;letter-spacing:-.02em}
.proceso a.empieza2.pc-bot:hover{background:var(--pc-a)}
.proceso .pc-wa{min-height:68px}
.midiendo .pfijo{position:relative!important;top:auto!important}

/* con el pie común fuera de los telones, el vídeo fijo (margen negativo) no debe asomar por debajo de su capítulo */
.marcha,.portada,.hago{overflow:clip}

/* ---------- final: la Tierra sola, y después el pie común de todas las páginas ---------- */
.crec{height:380vh}
.cierre .gr{top:0;bottom:0;transform:none}
.cierre .cvelo{display:none}
.pc .pc-bot.empieza2{margin-top:0}

@media (max-width:760px){
  .p2{grid-column:3/13;grid-row:auto;margin-top:0} .p3{grid-column:1/11;grid-row:auto;margin-top:0}
  .pieza .wd{aspect-ratio:390/844}
  .fport .tarj{aspect-ratio:var(--arm,390/600)}
  .peld:nth-child(2){padding-left:4%} .peld:nth-child(3){padding-left:8%} .peld:nth-child(4){padding-left:12%}
  .peld .w{font-size:clamp(34px,10.2vw,60px)}
  .servicios .d{grid-column:4/25}
  .ppista{height:480vh}
  .pfijo{padding-top:84px;padding-bottom:46px;min-height:0}
  .pcab h2{font-size:18px;max-width:24ch;margin-top:.4em}
  .pst{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:14px;padding-top:10px}
  .pst-w{font-size:clamp(40px,12.6vw,60px);margin-top:.15em}
  .pst-f{font-size:16px;margin-top:.4em}
  .pst-r{width:100%}
  .pst-r li{grid-template-columns:1fr;gap:2px;padding:8px 0}
  .pst-r a{font-size:13px}
  .pst-r span{font-size:13.5px;line-height:1.25}
  .prail ol{font-size:11px} .prail li span{display:block;margin:0 0 2px}
  .pcuatro{grid-template-columns:1fr 1fr}
  .pcuatro a{min-height:170px;gap:22px}
  .pcuatro b{font-size:24px}
  .pr-acc{flex-direction:column;align-items:flex-start}
  .pr-acc .pc-bot,.pr-acc .pc-wa{min-width:min(78vw,300px);justify-content:center}
}
@media (max-width:760px) and (max-height:720px){
  .pcab h2{display:none}
  .pfijo{padding-top:78px}
  .pst-w{font-size:clamp(36px,11vw,46px)}
  .pst-r li{padding:6px 0}
}
@media (prefers-reduced-motion:reduce){
  .crec{height:100svh}
}

/* ======================= CUARTO PASE (05/11/2026 noche): arreglos del QA de ojos frescos ======================= */
/* sin numeración decorativa en ninguna etiqueta (Guillermo: «sin filas numeradas») */
main .mas::before,#ficha .mas::before,.rot::before{content:none!important;display:none!important}
#ficha .fdatos li .k{display:none}
.fdatos{grid-template-columns:repeat(2,1fr)}
/* el botón Cerrar de la ficha no pisa el WhatsApp de la captura */
.fport .tarj{top:max(156px,22vh)}
/* panel «Lo que hago»: esquinas como el vídeo y letra proporcionada a los títulos */
.panel{border-radius:24px}
.peld p{font-size:clamp(14px,1.2vw,19px);max-width:24ch;line-height:1.4}
/* vídeo de los cuatro servicios: en móvil se ve entero */
.caja video,.caja img{object-fit:cover}
@media (max-width:760px){.caja video,.caja img{object-fit:contain;background:#16130f}}
/* qué hago: la nube se abre sin pisar el título */
.ntit h2{white-space:nowrap}
.lista{padding-top:clamp(40px,8vh,90px)}
/* los tres servicios con pieza propia, del mismo tamaño y alternando lado */
.sv{display:grid;grid-template-columns:repeat(24,1fr);row-gap:clamp(22px,2.6vw,40px);margin-top:clamp(90px,13vw,190px)}
.sv:first-child{margin-top:0}
.sv .tx{grid-column:2/24;grid-row:1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:clamp(24px,4vw,64px);align-items:end}
.sv h3{grid-column:1;grid-row:1/5;align-self:end;font-weight:300;font-size:clamp(40px,6.4vw,104px);line-height:.92;letter-spacing:-.055em}
.sv .tx p{grid-column:2;margin-top:0;font-size:var(--cuerpo);line-height:1.3;letter-spacing:-.012em;font-weight:400;color:#2a2622;max-width:30ch}
.sv .pr{grid-column:2;display:block;margin-top:1.2em;font-size:13px;font-weight:500;letter-spacing:.02em;color:#6b5a4c}
.sv .tx .subraya{grid-column:2;justify-self:start}
.sv .img{grid-column:2/24;grid-row:2;display:block;position:relative;overflow:hidden;border-radius:24px;box-shadow:0 30px 60px -36px rgba(13,14,19,.65);aspect-ratio:2/1;background:#e7dfd2}
.sv .img > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 12%;will-change:transform}
.sv .subraya{margin-top:.8em;background:var(--ti-hilo) 0 100%/0 1px no-repeat;border-bottom:0;padding-bottom:3px;transition:background-size .7s var(--curva)}
.sv .subraya:hover,.sv .subraya:focus-visible{background-size:100% 1px}
.sv .img.dos{background:#e9e1d4}
.sv .img.dos img{position:absolute;inset:auto;height:auto;border-radius:14px;box-shadow:0 20px 44px -22px rgba(13,14,19,.55);object-fit:contain}
.sv .img.dos .g{left:3%;top:8%;width:62%}
.sv .img.dos .m{right:3%;top:6%;width:30%}
.sv .ej{position:absolute;right:4%;top:6%;z-index:2;font-size:12px;font-weight:500;letter-spacing:.04em;padding:.3em .9em;border:1px solid #54351f;border-radius:99px;color:#54351f;background:rgba(244,240,236,.85)}
/* cómo trabajo: lo que pasa en cada servicio, en cuatro piezas (no en una lista con filetes) */
.pst-r{grid-template-columns:1fr 1fr;gap:clamp(10px,1.2vw,16px)}
.pst-r li,.pst-r li:last-child{display:block;border:1px solid rgba(223,209,185,.24);border-radius:18px;padding:clamp(14px,1.5vw,22px);background:rgba(244,240,236,.045)}
.pst-r a{display:block;min-height:24px;margin-bottom:.55em}
.pfin{padding:clamp(50px,9vh,90px) var(--g) clamp(60px,10vh,110px)}
.pr-acc{margin-top:0}
/* zonas pulsables: cabecera y pie */
.cab nav>a:not(.empieza){padding:12px 0;margin:-12px 0}  /* solo los del menú: a los del desplegable «Qué hago» los montaba unos sobre otros (09/11/2026) */
.pc-pie nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px}

@media (max-width:760px){
  .sv{row-gap:22px;margin-top:70px}
  .sv .tx{grid-column:1/25;display:block}
  .sv h3{font-size:clamp(40px,12vw,64px)}
  .sv .tx p{margin-top:.9em;font-size:18px}
  .sv .img{grid-column:1/25;aspect-ratio:4/3}
  .sv .img > img{object-position:12% 50%}
  .sv .img.dos .g{width:88%;left:6%;top:6%}.sv .img.dos .m{width:58%;right:6%;top:auto;bottom:6%}
  .pst-r{grid-template-columns:1fr}
  .pst-r li,.pst-r li:last-child{padding:9px 14px}
  .pst-r a{margin-bottom:.15em}
  /* nube en móvil: una cuadrícula de capturas grandes, no miniaturas sueltas */
  .nube{height:auto}
  .nfijo{position:relative;height:auto;overflow:visible;display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:clamp(100px,16vh,130px) var(--g) 24px}
  .nfijo figure{position:relative!important;left:auto!important;top:auto!important;width:auto!important;transform:none!important;opacity:1!important}
  .nfijo figure img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:18px;box-shadow:0 20px 40px -26px rgba(13,14,19,.6)}
  .nfijo figure:last-of-type{grid-column:1/-1}
  .nfijo figure:last-of-type img{aspect-ratio:16/9}
  .ntit{position:relative!important;inset:auto;grid-column:1/-1;order:-1;transform:none!important;padding:0 0 20px}
  .lista{padding-top:30px}
}

/* QA vuelta 2 (05/11 noche): la ficha enseña dos datos, no cuatro */
.meta{grid-template-columns:repeat(2,minmax(0,1fr))}
.sv .img.dos .g{width:70%}
.sv .img.dos .m{width:32%}

/* ======================= QUINTO PASE (05/11/2026 mañana): lo que Guillermo vio roto en su móvil ======================= */
/* Configuradores: Urdaibai arriba a la izquierda y la cocina abajo a la derecha, montadas como el panel de Herramientas */
#sv-3d .img.dos .m{top:auto;bottom:8%;width:40%}
@media (max-width:760px){
  /* Trabajos: eran cinco pantallas de scroll (cada web a alto de móvil). Ahora una ancha y cuatro en dos columnas, sin vaivén */
  .collage{grid-template-columns:1fr 1fr;column-gap:12px;row-gap:26px;margin-top:28px}
  .collage .txt,.p6b{grid-column:1/-1!important}
  .collage .pieza{grid-column:auto!important;margin-top:0!important;transform:none!important}
  .collage .p1{grid-column:1/-1!important}
  .collage .pieza .marco{aspect-ratio:4/5!important;border-radius:16px}
  .collage .p1 .marco{aspect-ratio:16/10!important}
  .collage .pieza .marco img{object-position:top center}
  .pieza .cap{font-size:13px;margin-top:8px}
  .pieza .cap .gr{display:block}
  #sv-3d .img.dos .m{width:58%;bottom:6%}
  /* Qué hago: cuatro piezas, dos por fila, sin la ancha del final */
  .nfijo figure:last-of-type{grid-column:auto}
  .nfijo figure:last-of-type img{aspect-ratio:4/3}
  .nfijo figure img{object-position:left center}
}

/* 09/11/2026: Trabajos sin choques (MendiVan pisaba a Alhóndiga y tocaba a BiGGeR). Cada pieza con aire alrededor. */
@media (min-width:761px){
  .p1{grid-column:2/13;grid-row:1}
  .p2{grid-column:15/24;grid-row:2;margin-top:-3vw}
  .p3{grid-column:2/12;grid-row:2;margin-top:8vw}
  .p4{grid-column:3/8;grid-row:3;margin-top:6vw}
  .p5{grid-column:11/23;grid-row:3;margin-top:12vw}
}

/* 09/11/2026: la Tierra es el final. El pie (¿Empezamos?, botones, firma y enlaces) se pone encima de Bizkaia, sin bajar a otro fondo
   y sin la línea entre los dos (Guillermo: «que esa misma sea el final de la página, con mi firma, sin bajar»). */
footer.pc#cierre{margin-top:-100vh;margin-top:-100svh;background:transparent;z-index:7}  /* por encima del cierre (z-index 6) */
footer.pc#cierre .pc-luz{display:none}
footer.pc#cierre::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 60% 55% at 50% 45%,rgba(0,0,0,.55),rgba(0,0,0,0) 70%),linear-gradient(0deg,rgba(0,0,0,.75) 0%,rgba(0,0,0,0) 30%)}

/* 09/11/2026: el bloque 3D con una sola imagen, el render de Urdaibai entero */
#sv-3d .img > img{object-position:50% 50%}