/* HARITZ — cocinas a medida. Paleta calculada antes del CSS (ver
   /root/muestrario/10-haritz-cocinas.md). Reglas que NO se saltan:
   - --roble es RELLENO. Como texto sobre claro va --roble-txt; sobre nogal, --roble-cl.
   - Nada de blanco sobre --roble (4.14). Encima del roble va --tinta (5.27).
   - Deshabilitado con colores propios, nunca con opacidad.
   - Nada de texto en movimiento: norma de la casa. */
@font-face{font-family:'Bespoke Serif';src:url('/fonts/bespoke-serif-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Bespoke Serif';src:url('/fonts/bespoke-serif-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'General Sans';src:url('/fonts/general-sans-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'General Sans';src:url('/fonts/general-sans-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'General Sans';src:url('/fonts/general-sans-600.woff2') format('woff2');font-weight:600;font-display:swap}

:root{
  --hueso:#F3EEE6; --arena:#E4DACB; --nogal:#241C16;
  --tinta:#1C1815; --gris:#5A5049; --gris-cl:#C2B8AB;
  --roble:#B5824F; --roble-txt:#8A4A17; --roble-cl:#BE8B57;
  --musgo:#3E4A32; --apag-bg:#D8CEC0; --apag-tx:#5F564C;
  --serif:'Bespoke Serif',Georgia,serif; --sans:'General Sans',system-ui,sans-serif;
  --ancho:1240px; --borde:#D5C9B8;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--hueso);color:var(--tinta);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
img[width]{height:auto}           /* el height del HTML gana al aspect-ratio: lección de QE */
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.05;margin:0;overflow-wrap:break-word;hyphens:auto}
.env{max-width:var(--ancho);margin:0 auto;padding:0 28px}
.ojo{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);font-weight:500}

/* ── barra ───────────────────────────────────────────────────────────── */
.barra{position:fixed;inset:0 0 auto;z-index:60;padding:22px 0;transition:background .3s,padding .3s}
.barra.pegada{background:var(--hueso);padding:12px 0;border-bottom:1px solid var(--borde)}
.barra .env{display:flex;align-items:center;gap:32px}
.marca{font-family:var(--serif);font-size:24px;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;color:#fff}
.barra.pegada .marca{color:var(--tinta)}
.menu{margin-left:auto;display:flex;gap:28px;list-style:none;padding:0;margin-block:0}
.menu a{text-decoration:none;font-size:15px;font-weight:500;color:#fff;padding:4px 0;border-bottom:1px solid transparent}
.barra.pegada .menu a{color:var(--tinta)}
.menu a:hover{border-bottom-color:currentColor}
.hamb{display:none;margin-left:auto;background:none;border:1px solid currentColor;color:#fff;border-radius:2px;padding:8px 12px;font:inherit;font-size:14px;cursor:pointer}
.barra.pegada .hamb{color:var(--tinta)}

/* ── hero ────────────────────────────────────────────────────────────── */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden;background:var(--nogal)}
.hero video,.hero .escena{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
img.escena{display:block}
.escena{background:var(--nogal);display:grid;place-items:center;color:var(--gris-cl);font-size:14px;letter-spacing:.1em;text-transform:uppercase}
.hero .texto{position:absolute;left:0;right:0;bottom:14vh;z-index:3}
.hero h1{font-size:clamp(64px,9vw,112px);letter-spacing:.04em;color:#fff;font-weight:400}
.hero .frase{max-width:560px;margin:22px 0 0;font-size:20px;color:#fff}
.hero .velo{position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(20,15,11,.72) 0%,rgba(20,15,11,.25) 45%,rgba(20,15,11,.35) 100%)}
.sello{position:absolute;right:5vw;bottom:12vh;z-index:3;width:180px;height:180px;border-radius:50%;border:1px solid rgba(255,255,255,.6);display:grid;place-content:center;text-align:center;color:#fff;font-family:var(--serif);font-size:15px;letter-spacing:.12em;text-transform:uppercase;line-height:1.7}
.sello b{display:block;font-size:30px;letter-spacing:.02em}

/* puntos calientes del hero */
.punto{position:absolute;z-index:4;transform:translate(-50%,-50%);background:none;border:0;padding:0;cursor:pointer;font:inherit}
.punto .dot{display:block;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.5);animation:lat 2.6s ease-out infinite}
@keyframes lat{0%{box-shadow:0 0 0 0 rgba(255,255,255,.55)}70%{box-shadow:0 0 0 20px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
@media (prefers-reduced-motion:reduce){.punto .dot{animation:none}}
.punto .globo{position:absolute;left:32px;top:50%;transform:translateY(-50%);white-space:nowrap;background:var(--hueso);color:var(--tinta);padding:9px 16px;font-size:14px;font-weight:500;opacity:0;pointer-events:none;transition:opacity .2s}
.punto:hover .globo,.punto:focus-visible .globo{opacity:1}
.punto:focus-visible .dot{outline:3px solid #fff;outline-offset:4px}
.pista{position:absolute;left:0;right:0;bottom:4vh;z-index:3;text-align:center;color:#fff;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.pista span{background:rgba(20,15,11,.78);padding:8px 18px;border-radius:99px}

/* ── bloques ─────────────────────────────────────────────────────────── */
section{padding:110px 0}
.manifiesto{background:var(--hueso)}
.manifiesto p{font-family:var(--serif);font-size:clamp(28px,3.6vw,44px);line-height:1.25;max-width:900px;margin:22px 0 0}
.manifiesto .firma{font-family:var(--sans);font-size:16px;color:var(--gris);margin-top:28px}

.zonas{background:var(--arena)}
.rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2px;margin-top:44px;background:var(--borde)}
.zona{background:var(--arena);padding:34px 30px 30px;text-decoration:none;display:flex;flex-direction:column;gap:12px;min-height:320px;transition:background .25s}
.zona:hover{background:var(--hueso)}
.zona .num{font-size:13px;color:var(--roble-txt);font-weight:600;letter-spacing:.1em}
.zona h3{font-size:30px}
.zona p{margin:0;color:var(--gris);font-size:16px}
.zona .ver{margin-top:auto;font-size:14px;font-weight:600;color:var(--roble-txt);letter-spacing:.04em}

.proceso{background:var(--nogal);color:var(--hueso)}
.proceso h2,.oscuro h2{color:var(--hueso)}
.proceso .ojo,.oscuro .ojo{color:var(--gris-cl)}
.pasos{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:34px;margin-top:48px}
.paso{border-top:1px solid #46382C;padding-top:20px}
.paso .n{font-family:var(--serif);font-size:40px;color:var(--roble-cl);line-height:1}
.paso h3{font-size:22px;margin:10px 0 8px;color:var(--hueso)}
.paso p{margin:0;color:var(--gris-cl);font-size:15px}
.paso .plazo{display:inline-block;margin-top:14px;font-size:13px;font-weight:600;color:var(--tinta);background:var(--roble);padding:4px 12px}

.hueco{background:var(--apag-bg);border:1px dashed var(--borde);display:grid;place-content:center;text-align:center;color:var(--apag-tx);font-size:13px;letter-spacing:.08em;text-transform:uppercase;aspect-ratio:4/3}
.hueco.alto{aspect-ratio:3/4}
.hueco.ancho{aspect-ratio:16/9}

h2{font-size:clamp(34px,4.4vw,54px);margin-top:14px}
.intro{max-width:620px;color:var(--gris);margin:18px 0 0;font-size:18px}

.btn{display:inline-block;background:var(--roble);color:var(--tinta);text-decoration:none;font-weight:600;font-size:16px;padding:15px 30px;border:0;cursor:pointer;font-family:inherit}
.btn:hover{background:var(--roble-cl)}
.btn[disabled]{background:var(--apag-bg);color:var(--apag-tx);cursor:not-allowed}
.btn.linea{background:none;color:var(--roble-txt);border:1px solid var(--roble-txt)}

.pie{background:var(--nogal);color:var(--gris-cl);padding:70px 0 40px;font-size:15px}
.pie a{color:var(--hueso)}
.pie .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:34px}
.pie h4{font-family:var(--sans);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--hueso);margin:0 0 12px}
.aviso{margin-top:48px;padding-top:22px;border-top:1px solid #46382C;color:var(--gris-cl);font-size:14px;max-width:760px}

@media (max-width:860px){
  .menu{display:none;position:absolute;top:100%;left:0;right:0;background:var(--hueso);flex-direction:column;gap:0;padding:8px 28px 20px;border-bottom:1px solid var(--borde)}
  .menu.abierto{display:flex}
  .menu a{color:var(--tinta);padding:12px 0;border-bottom:1px solid var(--borde)}
  .hamb{display:block}
  section{padding:74px 0}
  .sello{width:126px;height:126px;font-size:12px;right:6vw;bottom:16vh}
  .sello b{font-size:22px}
  .hero .texto{bottom:20vh}
}

/* ── landing de pieza ────────────────────────────────────────────────── */
.lpag{padding-top:132px}
.lcab{max-width:820px;margin-bottom:44px}
.lcab h1{font-size:clamp(38px,6vw,76px);margin:12px 0 0}
.lpuntos{list-style:none;padding:0;margin:56px 0 0;display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--borde)}
.lpuntos li{padding:30px 30px 30px 0;border-bottom:1px solid var(--borde)}
.lpuntos li:nth-child(odd){padding-right:40px;border-right:1px solid var(--borde)}
.lpuntos li:nth-child(even){padding-left:40px}
.lpuntos h3,.fab .lpuntos h3{font-size:23px;margin-bottom:10px;max-width:none}
.lpuntos p{margin:0;color:var(--gris);font-size:16px}
.lficha{display:grid;grid-template-columns:max-content 1fr;gap:0;margin:56px 0 0;border-top:1px solid var(--borde)}
.lficha dt{padding:16px 32px 16px 0;border-bottom:1px solid var(--borde);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--gris);font-weight:500}
.lficha dd{padding:16px 0;border-bottom:1px solid var(--borde);margin:0;font-weight:500}
.lotras{margin:64px 0 0;padding-top:26px;border-top:1px solid var(--borde)}
.lotras-g{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.lotra{display:inline-block;padding:11px 18px;border:1px solid var(--borde);text-decoration:none;font-size:15px;font-weight:500;background:var(--hueso)}
.lotra:hover{background:var(--arena)}
.lotra.aqui{background:var(--roble);color:var(--tinta);border-color:var(--roble);font-weight:600}
.lcta{background:var(--arena);margin-top:80px}

/* ── calculadora ─────────────────────────────────────────────────────── */
.calc{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-top:44px;align-items:start}
.campo{display:block;margin-bottom:22px}
.campo span{display:block;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--gris);font-weight:500;margin-bottom:8px}
.campo select,.campo input{width:100%;padding:14px 15px;font:inherit;font-size:16px;background:var(--hueso);color:var(--tinta);border:1px solid var(--borde);border-radius:0}
.campo select:focus,.campo input:focus{outline:2px solid var(--roble-txt);outline-offset:1px}
.calc-caja{background:var(--nogal);color:var(--hueso);padding:38px}
.calc-cifra,.fab p.calc-cifra{font-family:var(--serif);font-size:clamp(34px,4.4vw,52px);line-height:1.05;margin:0;color:var(--hueso);font-weight:500;letter-spacing:-.015em}
.calc-det{margin:14px 0 0;color:var(--gris-cl);font-size:16px}
.calc-nota{margin:22px 0 0;padding-top:18px;border-top:1px solid #46382C;color:var(--gris-cl);font-size:14px}
.calc-vacio{margin:0;color:var(--gris-cl);font-size:17px}
@media (max-width:860px){ .lpuntos{grid-template-columns:1fr} .lpuntos li,.lpuntos li:nth-child(odd),.lpuntos li:nth-child(even){padding:22px 0;border-right:0} .calc{grid-template-columns:1fr;gap:30px} .lficha{grid-template-columns:1fr} .lficha dt{padding-bottom:0;border-bottom:0} .lpag{padding-top:104px} }

/* ══ Versión "fábrica": réplica de la estructura de keukenkastenfabriek.nl ══
   Medido: fondo claro, titulares grotesk 85/78/65 px peso 500 con tracking
   -0.015em, texto 15/24, botones píldora sin relleno con flecha. */
:root{--serif:'General Sans',system-ui,sans-serif}
h1,h2,h3{font-weight:500;letter-spacing:-.015em;line-height:1}
.fab h2{font-size:clamp(40px,5.6vw,78px)} .fab h3{font-size:clamp(34px,4.7vw,65px)}
.fab section{padding:120px 0}
.fab p{font-size:15px;line-height:24px}
.fab .intro{font-size:15px}
.pill{display:inline-flex;align-items:center;gap:14px;text-decoration:none;font-size:13px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--tinta);padding:12px 0}
.pill i{width:44px;height:44px;border-radius:50%;border:1px solid var(--tinta);display:grid;place-items:center;font-style:normal;transition:background .2s,color .2s}
.pill:hover i{background:var(--tinta);color:var(--hueso)}
.oscuro .pill,.oscuro .pill i{color:var(--hueso);border-color:var(--hueso)}
.oscuro .pill:hover i{background:var(--hueso);color:var(--tinta)}

/* hero fábrica */
.hero-fab{position:relative;padding:120px 0 0;min-height:100svh;overflow:hidden;background:var(--hueso)}
.hero-fab h1{font-size:clamp(44px,min(6.1vw,10.5svh),85px)}
.hero-fab .texto{text-align:center;max-width:760px;margin:0 auto;position:relative;z-index:2}
.hero-fab h1{font-size:clamp(44px,6.1vw,85px);color:var(--tinta);opacity:0;transform:translateY(24px);transition:opacity .9s ease .6s,transform .9s ease .6s}
.hero-fab .pill{margin-top:26px;opacity:0;transition:opacity .9s ease 1.1s}
.hero-fab.lista h1,.hero-fab.lista .pill{opacity:1;transform:none}
.hero-fab .escena-fab{position:relative;width:min(100vw,1680px);margin:0 auto;left:50%;transform:translateX(-50%);height:max(300px,calc(100svh - 360px))}
.hero-fab canvas{display:block;width:100%;height:100%}
.barra.fab{padding:18px 0}
.barra.fab .marca,.barra.fab .menu a,.barra.fab .hamb{color:var(--tinta)}
.barra.fab.pegada{background:var(--hueso)}

/* bloque destacado (populair) */
.dos{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center}
.dos .acciones{display:flex;flex-direction:column;gap:6px;margin-top:26px}
.precio{font-size:15px;color:var(--gris);margin-top:16px}

/* rejilla de composiciones */
.comps{display:grid;grid-template-columns:repeat(2,1fr);gap:60px 40px;margin-top:64px}
.comp{text-decoration:none;display:block}
.comp .foto{position:relative;aspect-ratio:4/3;background:var(--arena);overflow:hidden}
.comp .foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .35s}
.comp .foto img.hover{opacity:0}
.comp:hover .foto img.hover{opacity:1}
.comp .linea{display:flex;justify-content:space-between;align-items:baseline;margin-top:18px;border-bottom:1px solid var(--borde);padding-bottom:12px}
.comp .linea b{font-size:22px;font-weight:500;letter-spacing:-.01em}
.comp .linea span{font-size:15px;color:var(--gris)}

/* secuencia pegada (cajones) */
.pegado{height:260vh;position:relative}
.pegado .fijo{position:sticky;top:0;height:100svh;display:grid;grid-template-columns:1fr 1.2fr;align-items:center;gap:40px}
.pegado canvas{display:block;width:100%;height:min(80svh,42vw)}
.pegado .txt{max-width:440px}

/* banda oscura con foto */
.cta-osc{background:var(--nogal);color:var(--hueso);min-height:80vh;display:grid;align-items:end;position:relative;overflow:hidden}
.cta-osc .fondo{position:absolute;inset:0;object-fit:cover;width:100%;height:100%;opacity:.55}
.cta-osc .env{position:relative;padding-bottom:90px}
.cta-osc h3{color:var(--hueso);max-width:900px}
.cta-osc .dir{color:var(--gris-cl);margin-top:18px;font-size:15px}

/* contenido con vídeo */
.contenido{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.contenido .media{aspect-ratio:9/10;background:var(--arena);overflow:hidden}
.contenido .media img,.contenido .media video{width:100%;height:100%;object-fit:cover;display:block}
.contenido.inv .media{order:2}

/* inspiración */
.insp{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px}
.insp a{text-decoration:none;display:block}
.insp .foto{aspect-ratio:3/4;background:var(--arena);overflow:hidden;position:relative}
.insp .foto img{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0;transition:opacity .35s}
.insp .foto img.hover{opacity:0}
.insp a:hover .foto img.hover{opacity:1}
.insp b{display:block;margin-top:16px;font-size:20px;font-weight:500}
.insp span{color:var(--gris);font-size:15px}

.pie.fab{background:var(--tinta)}
@media (max-width:860px){
  .dos,.comps,.contenido,.insp{grid-template-columns:1fr;gap:34px}
  .contenido.inv .media{order:0}
  .pegado{height:200vh} .pegado .fijo{grid-template-columns:1fr;align-content:start;padding-top:84px;gap:18px}
  .pegado canvas{order:-1;height:40svh}
  .pegado .txt h3{font-size:30px}
  .pasos-cajon li{padding:9px 0;font-size:14px;line-height:20px}
  .hero-fab{padding-top:110px} .hero-fab .escena-fab{width:150vw;margin-top:0}
  .fab section{padding:80px 0}
}

/* ══ Movimiento: una curva, tres duraciones ══════════════════════════════
   Medido en la referencia: cubic-bezier(.625,.05,0,1); .6s geometría, .3s
   opacidad, .8s loader; párrafos suben 16 px, columnas entran desde -64 px. */
:root{--curva:cubic-bezier(.625,.05,0,1)}
html{scroll-behavior:auto}          /* el suave lo lleva Lenis, no el navegador */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}

.cargador{position:fixed;inset:0;z-index:200;background:var(--hueso);display:grid;place-items:center;transition:opacity .8s var(--curva),visibility 0s linear .8s}
.cargador span{font-size:15px;letter-spacing:.32em;text-transform:uppercase;font-weight:500;color:var(--tinta);opacity:0;animation:respira 1.6s var(--curva) .1s forwards}
@keyframes respira{0%{opacity:0;letter-spacing:.5em}100%{opacity:.85;letter-spacing:.32em}}
html.cargada .cargador{opacity:0;visibility:hidden}
html.saliendo body{opacity:0;transition:opacity .35s var(--curva)}
body{transition:opacity .35s var(--curva)}

/* revelados */
[data-rev]{opacity:0;will-change:opacity,transform}
[data-rev="up"]{transform:translate3d(0,16px,0)}
[data-rev="left"]{transform:translate3d(-64px,0,0)}
[data-rev="right"]{transform:translate3d(64px,0,0)}
/* el recorte va en el HIJO: si va en el propio elemento, IntersectionObserver lo
   considera invisible (Chromium aplica clip-path al calcular la intersección) y
   nunca se revela. Probado: ratio 0,000 con recorte, 0,948 sin él. */
[data-rev="clip"]{opacity:1}
[data-rev="clip"]>*{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s var(--curva)}
[data-rev].visto{opacity:1;transform:none;transition:opacity .6s var(--curva),transform .9s var(--curva);transition-delay:calc(var(--i,0)*90ms)}
[data-rev="clip"].visto>*{clip-path:inset(0)}
@media (prefers-reduced-motion:reduce){[data-rev]{opacity:1;transform:none;transition:none} [data-rev="clip"]>*{clip-path:none;transition:none}}

/* hero: la escena entra desde -64 px mientras la cámara se aleja; titular a 1,3 s; botón a 2,2 s */
.hero-fab .escena-fab{opacity:0;transform:translate3d(-64px,0,0) translateX(-50%)}
.hero-fab.lista .escena-fab{opacity:1;transform:translateX(-50%);transition:opacity .6s var(--curva),transform .9s var(--curva)}
.hero-fab h1{transition:opacity .6s var(--curva) 1.1s,transform .9s var(--curva) 1.1s}
.hero-fab .pill{transition:opacity .6s var(--curva) 1.9s,gap .6s var(--curva)}
.hero-fab .texto{text-wrap:balance}

/* botones píldora: crece el hueco y se llena el círculo */
.pill{transition:gap .6s var(--curva);gap:14px}
.pill:hover{gap:22px}
.pill i{transition:background .6s var(--curva),color .6s var(--curva),transform .6s var(--curva)}
.pill:hover i{transform:rotate(-8deg)}

/* menú: subrayado que se desliza */
.menu a{position:relative;border:0}
.menu a::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .6s var(--curva)}
.menu a:hover::after{transform:scaleX(1);transform-origin:left}
.barra{transition:background .6s var(--curva),padding .6s var(--curva),transform .6s var(--curva)}
.barra.oculta{transform:translateY(-100%)}

/* tarjetas: la foto respira y cruza al hover */
.comp .foto img,.insp .foto img{transition:opacity .6s var(--curva),transform 1.4s var(--curva)}
.comp:hover .foto img,.insp a:hover .foto img{transform:scale(1.04)}
.comp .linea{transition:border-color .6s var(--curva)}
.comp:hover .linea{border-color:var(--tinta)}
.comp .linea span{transition:transform .6s var(--curva)}
.comp:hover .linea span{transform:translateX(-6px)}

/* medios: entran con recorte desde abajo */
.contenido .media,.comp .foto,.insp .foto,.dos img{overflow:hidden}

/* bloque de cajones: pasos y progreso */
.pegado .txt h3{margin-bottom:22px}
.pasos-cajon{list-style:none;padding:0;margin:0 0 26px}
.pasos-cajon li{padding:14px 0;border-top:1px solid var(--borde);color:var(--gris);transition:color .4s var(--curva),padding-left .6s var(--curva);display:grid;grid-template-columns:34px 1fr;gap:6px;font-size:15px;line-height:24px}
.pasos-cajon li b{font-weight:500;color:var(--gris);transition:color .4s var(--curva)}   /* atenuado por color (6.79), nunca por opacidad */
.pasos-cajon li.activo{color:var(--tinta);padding-left:6px}
.pasos-cajon li.activo b{color:var(--tinta)}
.progreso{height:1px;background:var(--borde);position:relative;margin-top:8px;max-width:440px}
.progreso i{position:absolute;inset:0;background:var(--tinta);transform:scaleX(0);transform-origin:left}

/* bandas oscuras con parallax */
.cta-osc .fondo{will-change:transform;transform:scale(1.12)}
.cta-osc::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(28,24,21,.92) 0%,rgba(28,24,21,.72) 45%,rgba(28,24,21,.2) 100%)}
.cta-osc .ojo,.cta-osc .dir{color:var(--hueso)}
.cta-osc .env{z-index:1}

/* ritmo: secciones más holgadas, titulares equilibrados */
.fab section{padding:130px 0}
.fab h2,.fab h3{text-wrap:balance;max-width:14ch}
.fab #mas h2{max-width:none}
.fab .dos h2{max-width:12ch;font-size:clamp(34px,4.7vw,65px)}
.fab .precio{max-width:44ch}
.fab .contenido p{max-width:40ch;margin-top:18px}
.fab .insp b{transition:transform .6s var(--curva)}
.fab .insp a:hover b{transform:translateX(6px)}
@media (max-width:860px){.fab section{padding:90px 0} .fab h2,.fab h3{max-width:none}}
.lfoto{aspect-ratio:16/9;overflow:hidden;background:var(--arena)}
.lfoto img{width:100%;height:100%;object-fit:cover;display:block}
.lcab p.intro{max-width:56ch;font-size:17px}
.dos-foto{overflow:hidden}.dos-foto img{display:block;width:100%;height:auto}
/* proyectos */
.proyectos{display:grid;grid-template-columns:repeat(2,1fr);gap:64px 40px;margin-top:56px}
.proy .foto{aspect-ratio:4/3;overflow:hidden;background:var(--arena)}
.proy .foto img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.4s var(--curva)}
.proy:hover .foto img{transform:scale(1.04)}
.pcab{display:flex;justify-content:space-between;align-items:baseline;margin-top:20px;border-bottom:1px solid var(--borde);padding-bottom:12px}
.pcab h3,.fab .pcab h3{font-size:24px;max-width:none}
.pcab .anio{font-size:14px;color:var(--gris)}
.pficha{display:grid;grid-template-columns:max-content 1fr;gap:6px 24px;margin:14px 0 0;font-size:15px}
.pficha dt{color:var(--gris)} .pficha dd{margin:0}
/* showroom */
.sr{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:64px}
.sr h3,.fab .sr h3{font-size:24px;margin-bottom:12px;max-width:none}
.sr p{margin:0 0 10px} .sr-nota{color:var(--gris)}
.cita{margin-top:18px}
.cita .campo{margin-bottom:14px}
.cita-ok{margin-top:14px;color:var(--musgo);font-weight:500}
.mapa{margin-top:64px;aspect-ratio:21/9;background:var(--arena);overflow:hidden;filter:grayscale(.35) sepia(.12)}
.mapa iframe{width:100%;height:100%;border:0;display:block}
@media (max-width:860px){.proyectos,.sr{grid-template-columns:1fr;gap:40px}.mapa{aspect-ratio:4/3}}
/* ── secciones nuevas: detalles, colores, cifras, opiniones, faq ─────────── */
.detalles{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px}
.detalle .foto{aspect-ratio:3/4;overflow:hidden;background:var(--arena)}
.detalle .foto img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.4s var(--curva)}
.detalle:hover .foto img{transform:scale(1.04)}
.detalle b{display:block;margin-top:16px;font-size:20px;font-weight:500}
.detalle p{margin:6px 0 0;color:var(--gris)}
.colores{display:grid;grid-template-columns:repeat(8,1fr);gap:14px;margin-top:48px}
.color .muestra{display:block;aspect-ratio:1;border-radius:2px;box-shadow:inset 0 0 0 1px rgba(28,24,21,.08);transition:transform .6s var(--curva)}
.color:hover .muestra{transform:translateY(-6px)}
.color .nombre{display:block;margin-top:10px;font-size:14px;color:var(--gris)}
.cifras{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;border-top:1px solid var(--borde);padding-top:40px}
.cifra b{display:block;font-family:var(--serif);font-weight:500;font-size:clamp(44px,5.6vw,78px);letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.cifra span{display:block;margin-top:10px;color:var(--gris);font-size:15px}
.opiniones{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:56px}
.opinion{margin:0;padding-top:24px;border-top:1px solid var(--borde)}
.opinion p{font-size:19px;line-height:1.45;margin:0 0 18px;text-wrap:pretty}
.opinion footer{display:flex;gap:10px;font-size:14px}.opinion footer b{font-weight:500}.opinion footer span{color:var(--gris)}
.faqs{margin-top:44px;border-top:1px solid var(--borde);max-width:820px}
.faq{border-bottom:1px solid var(--borde)}
.faq summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;font-size:19px;font-weight:500;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:0;top:18px;font-size:26px;font-weight:300;transition:transform .6s var(--curva)}
.faq[open] summary::after{transform:rotate(45deg)}
.faq-r{padding:0 0 22px;max-width:60ch}.faq-r p{margin:0;color:var(--gris)}
@media (max-width:860px){.detalles,.opiniones{grid-template-columns:1fr}.colores{grid-template-columns:repeat(4,1fr)}.cifras{grid-template-columns:1fr 1fr;gap:28px}}

/* ══ Viaje hero → más pedida (referencia: imágenes 1-3 de Arkaitz) ═════════ */
.viaje{height:230vh;position:relative;--p:0}
.viaje .fijo{position:sticky;top:0;height:100svh;overflow:hidden}
.viaje .hero-txt{position:absolute;left:0;right:0;top:170px;text-align:center;z-index:3;opacity:calc(1 - var(--p)*2.2);pointer-events:none}
.viaje .hero-txt h1{font-size:clamp(46px,7vw,100px);max-width:none;margin:0 auto;letter-spacing:-.025em;line-height:.98}
.viaje .hero-txt .acciones-hero{pointer-events:auto}
.viaje .pedida-txt{position:absolute;left:0;right:0;top:50%;transform:translateY(calc(-50% + (1 - var(--p))*40px));z-index:3;opacity:calc((var(--p) - .55)*2.8);pointer-events:none;max-width:var(--ancho);margin:0 auto}
.viaje .pedida-txt>*{max-width:560px}
.viaje .pedida-txt h2{font-size:clamp(38px,4.7vw,66px);max-width:12ch}
.viaje .pedida-txt .precio{font-size:17px;line-height:1.55;color:var(--tinta);margin-top:20px;max-width:50ch}
.viaje .pedida-txt .acciones-hero{pointer-events:auto}
.acciones-hero{display:flex;gap:8px;align-items:center;justify-content:center;margin:28px 0 0}
.pedida-txt .acciones-hero{justify-content:flex-start}
.escena-viaje{position:absolute;z-index:1;left:50%;
  /* de: 100 vw de ancho, pegada abajo (recortada por el pliegue)   a: 54 vw a la derecha, centrada */
  width:calc(100vw - var(--p)*46vw);
  top:calc(54svh - var(--p)*31svh);
  transform:translate(calc(-50% + var(--p)*22vw),0);
  aspect-ratio:16/9;transition:none}
.escena-viaje canvas{display:block;width:100%;height:100%}
.viaje .enlace-abajo{position:absolute;right:max(28px,calc((100vw - var(--ancho))/2 + 28px));bottom:38px;z-index:3;font-size:15px;text-decoration:none;color:var(--tinta);border-bottom:1px solid var(--tinta);padding-bottom:4px;opacity:calc((var(--p) - .6)*3)}
.viaje .enlace-abajo i{font-style:normal;margin-left:8px}
/* tarjeta pequeña de muestras, abajo a la izquierda del hero */
.nota-cta{position:absolute;left:max(28px,calc((100vw - var(--ancho))/2 + 28px));bottom:40px;z-index:3;text-decoration:none;color:var(--tinta);width:230px;opacity:calc(1 - var(--p)*3);transform:scale(.9);transform-origin:left bottom}
.nota-foto{display:block;position:relative;aspect-ratio:1;border-radius:14px;overflow:hidden;background:var(--nogal)}
.nota-foto img{width:100%;height:100%;object-fit:cover;display:block;opacity:.85}
.nota-foto b{position:absolute;left:16px;right:16px;bottom:14px;color:#fff;font-size:22px;line-height:1.05;font-weight:500;letter-spacing:-.01em}
.nota-pill{display:inline-flex;align-items:center;gap:10px;margin-top:10px;background:#fff;border-radius:99px;padding:10px 6px 10px 18px;font-size:14px;font-weight:500;box-shadow:0 1px 0 rgba(28,24,21,.06)}
.nota-pill i{width:34px;height:34px;border-radius:50%;background:var(--tinta);color:#fff;display:grid;place-items:center;font-style:normal}
/* botones de la referencia: píldora rellena + círculo aparte */
.btn-pill{display:inline-block;background:var(--tinta);color:var(--hueso);text-decoration:none;font-size:16px;font-weight:500;padding:16px 26px;border-radius:99px;transition:background .6s var(--curva),padding .6s var(--curva)}
.btn-pill:hover{padding:16px 32px}
.circ{display:inline-grid;place-items:center;width:54px;height:54px;border-radius:50%;background:#fff;color:var(--tinta);text-decoration:none;font-size:20px;box-shadow:0 1px 0 rgba(28,24,21,.08);transition:transform .6s var(--curva),background .6s var(--curva)}
.circ:hover{transform:rotate(-12deg)}
.btn-pill.claro{background:transparent;color:var(--hueso);border:1px solid rgba(243,238,230,.7)}
.circ.claro{background:#fff;color:var(--tinta)}
/* barra flotante en píldora */
.barra.flotante{padding:14px 0}
.barra.flotante.pegada,.barra.flotante{background:transparent;border:0}
.barra.flotante .env{background:#fff;border-radius:99px;padding:10px 12px 10px 12px;box-shadow:0 1px 0 rgba(28,24,21,.06);gap:26px;max-width:calc(var(--ancho) + 120px)}
.marca{display:inline-flex;align-items:center;gap:12px;letter-spacing:.14em;font-size:18px}
.logo{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;border:2px solid var(--tinta);font-family:var(--sans);font-weight:600;font-size:18px;letter-spacing:0}
.logo.mini{width:34px;height:34px;font-size:14px;border-color:var(--gris-cl);color:var(--hueso);margin-right:12px;vertical-align:middle}
.barra.flotante .menu{margin-left:0}
.barra.flotante .menu a{font-size:15px}
.cita-circ{margin-left:auto;width:46px;height:46px;background:var(--arena);box-shadow:none;font-size:18px}
.barra.flotante .hamb{margin-left:auto}
/* banda oscura con vídeo desenfocado */
.cta-video{min-height:92svh;align-items:start;padding:0}
.cta-video video.fondo{filter:blur(6px) brightness(.55);transform:scale(1.08);opacity:1}
.cta-video::after{background:linear-gradient(to right,rgba(28,24,21,.55),rgba(28,24,21,.15))}
.cta-video .cta-cuerpo{padding:130px 28px 60px;width:100%}
.cta-video h3{font-size:clamp(40px,5.4vw,78px);max-width:11ch;color:#fff}
.cta-video .cta-p{max-width:38ch;margin-top:64px;font-size:19px;line-height:1.45;color:#fff}
.cta-video .dir{margin-top:44px;color:var(--gris-cl);display:flex;align-items:center;font-size:15px;line-height:1.4}
.cta-video .cta-pie{position:absolute;right:max(28px,calc((100vw - var(--ancho))/2 + 28px));bottom:36px;z-index:2;display:flex;gap:8px;align-items:center}
.cta-video .btn-pill.claro{background:rgba(255,255,255,.08);backdrop-filter:blur(6px)}
@media (max-width:860px){
  .viaje{height:210vh}
  .viaje .hero-txt{top:100px}
  .viaje .hero-txt h1{font-size:clamp(38px,11vw,54px)}
  .escena-viaje{width:calc(150vw - var(--p)*50vw);top:calc(54svh - var(--p)*10svh);transform:translate(-50%,0)}
  .viaje .pedida-txt{top:auto;bottom:90px;transform:none;padding:0 28px}
  .viaje .pedida-txt h2{font-size:34px}
  .nota-cta{display:none}
  .viaje .enlace-abajo{display:none}
  .barra.flotante .env{border-radius:26px}
  .cita-circ{display:none}
  .cta-video .cta-pie{position:static;padding:0 28px 40px}
  .cta-video .cta-cuerpo{padding-top:100px}
}
/* cajón que entra por el borde izquierdo (referencia, imagen 5) */
.cajon-borde{position:relative;min-height:86svh;display:grid;grid-template-columns:1fr 1fr;align-items:center;overflow:hidden;padding:0}
.cajon-medio{position:relative;height:70svh;overflow:visible}
.cajon-medio video{position:absolute;left:-6vw;top:50%;transform:translateY(-50%);height:100%;width:auto;max-width:none;mix-blend-mode:multiply;mask-image:linear-gradient(to right,#000 78%,transparent 100%);-webkit-mask-image:linear-gradient(to right,#000 78%,transparent 100%)}
.cajon-txt{padding:0 28px 0 40px;max-width:600px}
.cajon-txt h3{max-width:11ch}
.cajon-txt p{margin-top:22px;max-width:44ch;font-size:17px;line-height:1.5}
.dir-claro{display:flex;align-items:center;color:var(--gris);font-size:15px;line-height:1.4;margin-top:38px!important}
.logo.mini.oscuro{border-color:var(--gris);color:var(--gris)}
.nevera .media{background:transparent;aspect-ratio:auto;overflow:visible}
.nevera-medio video{mix-blend-mode:multiply;width:100%;height:auto;aspect-ratio:812/1080;object-fit:cover;mask-image:radial-gradient(ellipse 70% 62% at 50% 50%,#000 60%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 70% 62% at 50% 50%,#000 60%,transparent 100%)}
@media (max-width:860px){.cajon-borde{grid-template-columns:1fr;min-height:0;padding:60px 0}.cajon-medio{height:40svh}.cajon-medio video{left:-10vw}.cajon-txt{padding:24px 28px 0}}
/* entrada del hero (viaje): escena desde -64 px, titular a 1,1 s, botones a 1,9 s — como la referencia */
.viaje .escena-viaje{opacity:0;margin-left:-64px}
.viaje.lista .escena-viaje{opacity:1;margin-left:0;transition:opacity .6s var(--curva),margin-left .9s var(--curva)}
.viaje .hero-txt h1,.viaje .hero-txt .acciones-hero{opacity:0;transform:translateY(24px)}
.viaje.lista .hero-txt h1{opacity:1;transform:none;transition:opacity .6s var(--curva) 1.1s,transform .9s var(--curva) 1.1s}
.viaje.lista .hero-txt .acciones-hero{opacity:1;transform:none;transition:opacity .6s var(--curva) 1.9s,transform .9s var(--curva) 1.9s}
.nota-cta{opacity:0}
.viaje.lista .nota-cta{opacity:calc(1 - var(--p)*3);transition:opacity .6s var(--curva) 2.3s}
.cta-video .btn-pill.claro{background:rgba(28,24,21,.6)}
@media (max-width:860px){
  .escena-viaje{width:calc(150vw - var(--p)*50vw);top:calc(52svh - var(--p)*36svh);transform:translate(-50%,0)}
  .viaje .pedida-txt{bottom:40px}
  .viaje .pedida-txt .precio{font-size:15px;max-width:none}
}
.opinion .foto{aspect-ratio:4/3;overflow:hidden;margin-bottom:22px;background:var(--arena)}
.opinion .foto img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.4s var(--curva)}
.opinion:hover .foto img{transform:scale(1.04)}
.opinion{border-top:0;padding-top:0}
/* ── WOW: cocina entera con etiquetas ───────────────────────────────────── */
.wow{height:320vh}
.fijo-wow{position:sticky;top:0;height:100svh;display:grid;grid-template-rows:auto 1fr auto;align-items:center;padding-top:100px}
.wow-cab{text-align:center}.wow-cab h3{margin:8px auto 0;max-width:16ch}
.escena-wow{position:relative;width:min(100vw,1680px);margin:0 auto;aspect-ratio:16/9;max-height:calc(100svh - 300px)}
.escena-wow canvas{display:block;width:100%;height:100%}
.eti{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);opacity:0;transition:opacity .4s var(--curva);pointer-events:none}
.eti i{display:block;width:14px;height:14px;border-radius:50%;background:var(--tinta);box-shadow:0 0 0 4px var(--hueso);margin:0 auto}
.eti span{position:absolute;left:24px;top:-10px;white-space:nowrap;background:var(--tinta);color:var(--hueso);padding:10px 14px;font-size:14px;line-height:1.35;border-radius:2px;transform:translateX(-8px);transition:transform .6s var(--curva)}
.eti span b{display:block;font-weight:600;font-size:15px}
.eti.activa{opacity:1}.eti.activa span{transform:none}
.eti.izq span{left:auto;right:24px}
.wow-pie{display:flex;align-items:center;gap:32px;padding-bottom:26px}
.wow-pie .progreso{flex:1;margin:0;max-width:none}
@media (max-width:860px){.wow{height:260vh}.fijo-wow{padding-top:90px}.escena-wow{width:150vw;margin-left:-25vw;max-height:none}.eti span{font-size:12px;padding:8px 10px;white-space:normal;width:150px}.wow-pie{flex-direction:column;align-items:stretch;gap:14px}}
.video-ancho{padding:0 0 110px}
.video-marco{width:min(100vw,1680px);margin:0 auto;aspect-ratio:16/9;overflow:hidden;background:var(--arena)}
.video-marco video{width:100%;height:100%;object-fit:cover;display:block}
.video-pie{display:flex;justify-content:space-between;gap:40px;margin-top:22px;align-items:baseline}
.video-txt{max-width:52ch;color:var(--gris);margin:0}
@media (max-width:860px){.video-pie{flex-direction:column;gap:8px}.video-ancho{padding-bottom:70px}}
.fijo-wow{overflow:hidden;grid-template-columns:minmax(0,1fr)}
/* NUNCA overflow:hidden en el padre de un sticky: lo convierte en contenedor de
   scroll y el sticky deja de pegarse (fallo real, 6-sep). clip recorta sin eso. */
.wow,.viaje{overflow:clip}
.fab .viaje,.fab .wow{padding:0}   /* el padding de sección acortaba el recorrido del sticky 130 px */
/* ── móvil: el viaje, rehecho con medidas de iPhone (390×664 útiles) ─────── */
@media (max-width:860px){
  .viaje{height:175vh}
  .viaje .hero-txt{top:96px}
  .viaje .hero-txt h1{font-size:clamp(34px,10.2vw,48px);line-height:1.02}
  .viaje .hero-txt .acciones-hero{margin-top:18px}
  .viaje .hero-txt .btn-pill{font-size:14px;padding:13px 18px}
  .viaje .hero-txt .circ{width:46px;height:46px}
  /* escena: SIEMPRE 100 vw, la cocina entera; sube de 47 svh a 11 svh */
  .escena-viaje{width:100vw;top:calc(47svh - var(--p)*36svh);transform:translate(-50%,0)}
  /* la más pedida: colgada justo debajo de la escena, no del fondo */
  .viaje .pedida-txt{top:calc(11svh + 56.25vw + 12px);bottom:auto;transform:none;padding:0 24px}
  .viaje .pedida-txt h2{font-size:28px;max-width:none}
  .viaje .pedida-txt .precio{font-size:14px;line-height:1.45;margin-top:10px}
  .viaje .pedida-txt .acciones-hero{margin-top:16px}
  .viaje .pedida-txt .btn-pill{font-size:14px;padding:12px 18px}
  .viaje .pedida-txt .circ{width:44px;height:44px;font-size:16px}
}
@media (max-width:860px){
  .escena-wow{width:100vw;margin-left:0;aspect-ratio:16/9;max-height:none}
  .eti span{left:50%;top:16px;transform:translate(-50%,-6px);white-space:normal;width:170px;text-align:center}
  .eti.izq span{left:50%;right:auto}
  .eti.activa span{transform:translate(-50%,0)}
  .fijo-wow{padding-top:84px;grid-template-rows:auto auto 1fr auto;align-content:start;gap:8px}
  .wow-cab h3{font-size:26px}
}
/* ajustes tras ver las capturas (7-sep) */
.viaje .hero-txt h1{max-width:18ch}   /* "Cocinas de taller," / "a precio de taller" */
@media (max-width:860px){
  /* la cocina termina de subir al 70 % del viaje; el texto entra a partir del 72 %: nunca se pisan */
  .escena-viaje{top:calc(50svh - min(calc(var(--p)*1.43),1)*39svh)}
  .viaje .pedida-txt{opacity:calc((var(--p) - .72)*3.6);top:calc(11svh + 56.25vw + 12px)}
  .viaje .hero-txt{opacity:calc(1 - var(--p)*2.6)}
  .viaje .hero-txt h1{max-width:none}
}