/* ════════════════════════════════════════════════════════════════════════
   Verkimpe Interieurwerken — sistema visual v0.2

   EL MUNDO: kalk & licht. El minimalismo belga de interiores —materiales
   naturales, cal, lino, calma— más la precisión del pintor: líneas rectas,
   hairlines, nada redondeado de más. La paleta es la suya (oliva y taupe),
   afinada; no la inventamos.

   Reglas del piso de oficio que manda aquí (Impeccable):
   · sin rótulos encima de los títulos; el título carga su propio peso
   · sin rejillas de tarjetas iguales como estructura de página
   · sin bordes de color a la izquierda en recuadros
   · iconos dibujados en SVG con un solo trazo, nunca glifos unicode
   · un solo momento de autor (el taller); lo demás, callado
   · las superficies del navegador también llevan el diseño
   ════════════════════════════════════════════════════════════════════════ */

:root {
  --kalk: #F3EFE7;
  --kalk-2: #EAE4D8;
  --linnen: #DED5C5;
  /* los tres puntos del logo, medidos en el PNG que mandó Juan (2026-10-04) */
  --olijf: #616644;
  --olijf-d: #4C5034;
  --olijf-l: #9A9E78;
  --zand: #B59170;
  --munt: #A3D0B5;
  --taupe: #8C7663;
  --taupe-l: #BBAA97;
  --klei: #6B5A4B;
  --inkt: #1F1E1B;
  --grijs: #5F5A52;
  --nacht: #12110F;
  --nacht-2: #1B1A17;
  --op-nacht: rgba(243, 239, 231, 0.74);
  --lijn: rgba(31, 30, 27, 0.14);
  --lijn-nacht: rgba(243, 239, 231, 0.16);

  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --zacht: cubic-bezier(0.16, 1, 0.3, 1);

  --kop-h: 72px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--kop-h); }
body {
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--inkt);
  background-color: var(--kalk);
  background-image: var(--kalktextuur, none);
  background-size: 384px 384px;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
  text-rendering: optimizeLegibility;
}

/* superficies del navegador: lo que no dibujamos también lleva el diseño */
::selection { background: var(--olijf); color: var(--kalk); }
:root { caret-color: var(--olijf); accent-color: var(--olijf); scrollbar-color: var(--taupe-l) var(--kalk-2); }
:focus-visible { outline: 2px solid var(--olijf); outline-offset: 3px; border-radius: 2px; }
.nacht :focus-visible, .taller :focus-visible, .prijs :focus-visible { outline-color: var(--taupe-l); }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
img { display: block; max-width: 100%; }
svg { display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.06; letter-spacing: -0.018em; text-wrap: balance; }
h1 { font-size: clamp(2.7rem, 6.4vw, 5.6rem); font-weight: 300; letter-spacing: -0.028em; }
h2 { font-size: clamp(2.1rem, 4.4vw, 3.6rem); font-weight: 300; letter-spacing: -0.022em; }
h3 { font-size: 1.4rem; line-height: 1.2; }
em { font-style: italic; }
p { max-width: 64ch; text-wrap: pretty; }

.wrap { width: min(1200px, 100% - 48px); margin-inline: auto; }
.label {
  font-family: var(--sans); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
}
.stil { color: var(--grijs); }

/* El botón: el oliva de su logo en degradado, con brillo arriba y sombra
   (Juan y Maxim, 8-oct: el verde plano se veía pálido y barato). */
.knop {
  display: inline-flex; align-items: center; gap: 0.6em;
  background: linear-gradient(135deg, #454A2E 0%, #5F6442 46%, #7E865C 100%); background-size: 160% 100%; background-position: 0% 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -1px 0 rgba(0, 0, 0, 0.18), 0 12px 26px -16px rgba(36, 40, 22, 0.75);
  color: #FBF9F2;
  font-weight: 500; font-size: 0.96rem; letter-spacing: 0.01em;
  padding: 0.95em 1.4em; border-radius: 2px; text-decoration: none;
  transition: background-position 0.5s var(--zacht), box-shadow 0.3s var(--zacht), transform 0.3s var(--zacht);
}
.knop:hover { background-position: 100% 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), inset 0 -1px 0 rgba(0, 0, 0, 0.18), 0 16px 32px -16px rgba(36, 40, 22, 0.8); transform: translateY(-1px); }
.knop:active { transform: translateY(0); transition-duration: 0.1s; }
.knop svg { width: 16px; height: 16px; transition: transform 0.3s var(--zacht); }
.knop:hover svg { transform: translateX(3px); }
.knop.licht { background: transparent; color: var(--kalk); box-shadow: inset 0 0 0 1px var(--lijn-nacht); }
.knop.licht:hover { background: rgba(243, 239, 231, 0.08); box-shadow: inset 0 0 0 1px rgba(243, 239, 231, 0.35); }
.knop[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }

/* ── cabecera ────────────────────────────────────────────────────────── */
.kop {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--kop-h);
  display: flex; align-items: center;
  color: var(--kalk);
  transition: background-color 0.35s var(--zacht), color 0.35s var(--zacht), box-shadow 0.35s var(--zacht);
}
.kop.licht { background: rgba(243, 239, 231, 0.96); color: var(--inkt); box-shadow: 0 1px 0 var(--lijn); }
.kop .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: min(1320px, 100% - 48px); }
/* su logo de verdad: la versión clara sobre lo oscuro, la oscura cuando la cabecera se vuelve cal */
.merk { display: block; text-decoration: none; line-height: 0; }
.merk img { height: 46px; width: auto; }
.merk .merk-donker { display: none; }
.kop.licht .merk .merk-licht { display: none; }
.kop.licht .merk .merk-donker { display: block; }
@media (max-width: 860px) { .kop .merk img { height: 38px; } }
.menu { display: flex; align-items: center; gap: 30px; font-size: 0.9rem; }
.menu a:not(.knop) { text-decoration: none; opacity: 0.78; transition: opacity 0.2s; }
.menu a:not(.knop):hover { opacity: 1; text-decoration: underline; }
.menu .knop { padding: 0.7em 1.1em; font-size: 0.88rem; }
@media (max-width: 860px) { .menu a:not(.knop) { display: none; } }
/* Llamar: en el celular el menú se esconde, y quien llega de un anuncio de
   un pintor muchas veces solo quiere eso. Va en la cabecera, siempre a mano. */
.menu a.bel { display: none; }
@media (max-width: 860px) {
  .menu { gap: 10px; }
  .menu a.bel {
    display: grid; place-items: center; width: 42px; height: 42px; border-radius: 2px; opacity: 1;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 34%, transparent);
    transition: box-shadow 0.2s, background-color 0.2s;
  }
  .menu a.bel:hover { text-decoration: none; background: color-mix(in srgb, currentColor 8%, transparent); }
  .menu a.bel svg { width: 19px; height: 19px; }
}

/* ══ LA PARED QUE SE PINTA — el único momento de autor (v0.3, 8-oct) ══
   Una pared de yeso de obra nueva que se pinta: sola al cargar, con el
   ratón o el dedo, y con el scroll en los pasos de su trabajo. Clara, no
   oscura: la v0.2 era la noche de la linterna; esto es una casa nueva. */
.verf { position: relative; background: var(--kalk-2); color: var(--inkt); }
.js-scroll .verf { height: 520vh; }   /* v0.3.6: más recorrido, la pintura se da más despacio */
.verf__scene { position: relative; height: 100svh; min-height: 560px; overflow: hidden; }
.js-scroll .verf__scene { position: sticky; top: 0; }
.verf canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; cursor: none; }
@media (hover: none) { .verf canvas { cursor: auto; } }
/* velo de cal abajo (el texto se lee sobre cualquier color de pared) y uno corto arriba, bajo la cabecera */
.verf__scene::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 58%; z-index: 2; pointer-events: none;
  background: linear-gradient(to top, rgba(243, 239, 231, 0.97) 0%, rgba(243, 239, 231, 0.88) 36%, rgba(243, 239, 231, 0) 100%);
}
.verf__scene::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 22%; z-index: 2; pointer-events: none;
  background: linear-gradient(to bottom, rgba(243, 239, 231, 0.75), rgba(243, 239, 231, 0));
}

/* el rodillo: el mango en su oliva, la felpa del color elegido */
.roller { position: absolute; left: 0; top: 0; z-index: 4; width: 120px; pointer-events: none; opacity: 0; transition: opacity 0.35s var(--zacht); will-change: transform; }
.roller.aan { opacity: 1; }
.roller svg { display: block; width: 100%; height: auto; overflow: visible; transform: translate(-50%, -12%); filter: drop-shadow(0 16px 18px rgba(31, 30, 27, 0.3)); }
.roller__rol { fill: var(--nap, #9FAA8C); }
.roller__nap { fill: none; stroke: rgba(31, 30, 27, 0.22); stroke-width: 1.5; }
.roller__beugel { fill: none; stroke: #3B3C34; stroke-width: 6; stroke-linejoin: round; stroke-linecap: round; }
.roller__steel { fill: var(--olijf-d); }

/* la muestra A4, pegada a la pared con cinta: el paso 1 */
.staal {
  position: absolute; z-index: 3; right: 11%; top: 20%; width: clamp(130px, 15vw, 210px); aspect-ratio: 210 / 297;
  opacity: 0; transform: translateY(14px) rotate(-2.5deg); transition: opacity 0.5s var(--zacht), transform 0.7s var(--zacht); pointer-events: none;
}
.staal.zichtbaar { opacity: 1; transform: rotate(-2.5deg); }
/* las otras muestras, abiertas detrás como en la mano: se abren al aparecer */
.staal__vel, .staal__voor { position: absolute; inset: 0; box-shadow: 0 18px 36px -20px rgba(31, 30, 27, 0.5), 0 0 0 1px rgba(31, 30, 27, 0.06); }
.staal__vel { background: var(--c); transform-origin: 50% 115%; transform: none; transition: transform 0.9s cubic-bezier(0.22, 1.2, 0.36, 1); }
.staal.zichtbaar .staal__vel { transform: translateX(var(--x)) rotate(var(--r)); }
.staal.zichtbaar .staal__vel:nth-child(1) { transition-delay: 0.05s; }
.staal.zichtbaar .staal__vel:nth-child(2) { transition-delay: 0.1s; }
.staal.zichtbaar .staal__vel:nth-child(3) { transition-delay: 0.15s; }
.staal.zichtbaar .staal__vel:nth-child(4) { transition-delay: 0.2s; }
.staal__vel::after, .staal__voor::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: #FBF9F4; }
.staal__vel b { position: absolute; z-index: 1; left: 9px; bottom: 6%; font-family: var(--serif); font-weight: 400; font-size: 0.82rem; color: var(--grijs); }
/* la elegida: delante, un poco más alta, como la que uno saca del montón */
.staal__voor { background: var(--k, #9FAA8C); transform: translateY(0); transition: transform 0.7s var(--zacht) 0.35s, background-color 0.4s; }
.staal.zichtbaar .staal__voor { transform: translateY(-7%); }
.staal__tape { position: absolute; z-index: 1; top: -11px; left: 50%; width: 70px; height: 22px; margin-left: -35px; background: rgba(238, 230, 206, 0.86); transform: rotate(3deg); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.staal__naam, .staal__label { position: absolute; left: 12px; z-index: 1; }
.staal__naam { bottom: 8%; font-family: var(--serif); font-size: 1.05rem; color: var(--inkt); }
.staal__label { bottom: 2.5%; font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--grijs); }

/* el héroe */
.held {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  padding: 0 clamp(20px, 4vw, 56px) clamp(28px, 6vh, 64px); pointer-events: none;
}
.held__binnen { max-width: 760px; }
.held h1 { color: var(--inkt); }
.held h1 em { color: var(--olijf); }
.held p { margin-top: 16px; font-size: clamp(1.02rem, 1.4vw, 1.18rem); color: var(--grijs); max-width: 52ch; }
.kleuren { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 22px; pointer-events: auto; }
.kleuren__label { width: 100%; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--grijs); }
.kleuren button {
  display: inline-flex; align-items: center; gap: 9px; padding: 0.45em 0.95em 0.45em 0.45em; border-radius: 999px;
  background: rgba(255, 255, 255, 0.62); box-shadow: inset 0 0 0 1px var(--lijn); font-size: 0.9rem; color: var(--inkt);
  transition: box-shadow 0.2s, background-color 0.2s, transform 0.2s var(--zacht);
}
.kleuren button i { width: 24px; height: 24px; border-radius: 50%; background: var(--k); box-shadow: inset 0 0 0 1px rgba(31, 30, 27, 0.14); }
.kleuren button:hover { background: #fff; }
.kleuren button[aria-checked="true"] { background: #fff; box-shadow: inset 0 0 0 1.5px var(--olijf-d), 0 8px 20px -12px rgba(31, 30, 27, 0.5); }
.held__acties { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; pointer-events: auto; }
.scrollhint { display: inline-flex; align-items: center; gap: 12px; font-size: 0.92rem; color: var(--grijs); text-decoration: none; }
.scrollhint i { position: relative; width: 1px; height: 34px; background: var(--lijn); overflow: hidden; }
.scrollhint i::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--inkt); animation: druppel 2.2s var(--zacht) infinite; }
@keyframes druppel { to { top: 100%; } }
.verfhint { position: absolute; right: clamp(20px, 4vw, 56px); bottom: clamp(30px, 6vh, 66px); z-index: 5; display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-style: italic; font-size: 1rem; color: var(--grijs); pointer-events: none; transition: opacity 0.6s var(--zacht); }
.verfhint svg { width: 22px; height: 22px; }

/* los pasos */
.stap {
  position: absolute; z-index: 5; right: clamp(20px, 4vw, 56px); bottom: clamp(30px, 8vh, 80px);
  width: min(440px, calc(100% - 40px)); min-height: 11.5rem;
  opacity: 0; transform: translateY(14px); transition: opacity 0.55s var(--zacht), transform 0.7s var(--zacht); pointer-events: none;
}
.stap.actief { opacity: 1; transform: none; }
.stap h2 { font-size: clamp(1.9rem, 3.2vw, 2.7rem); color: var(--inkt); }
.stap h2 em { color: var(--olijf); }
.stap p { margin-top: 14px; color: var(--grijs); font-size: 1.04rem; }
.stap .knop { margin-top: 24px; pointer-events: auto; }

/* la hoja de trabajo, en papel */
.werkbon {
  position: absolute; z-index: 5; left: clamp(20px, 4vw, 56px); bottom: clamp(30px, 8vh, 80px);
  width: 270px; padding: 20px 22px 18px; background: rgba(251, 249, 244, 0.9); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 0 0 1px var(--lijn), 0 24px 48px -28px rgba(31, 30, 27, 0.45);
  opacity: 0; transform: translateY(14px); transition: opacity 0.55s var(--zacht), transform 0.7s var(--zacht);
}
/* informativa: nunca tapa los clics (invisible, se comía los de los colores) */
.werkbon { pointer-events: none; }
.werkbon.zichtbaar { opacity: 1; transform: none; }
.werkbon__kop { display: flex; justify-content: space-between; align-items: baseline; color: var(--grijs); padding-bottom: 12px; border-bottom: 1px solid var(--lijn); }
.werkbon ol { list-style: none; margin-top: 12px; display: grid; gap: 10px; }
.werkbon li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: center; font-size: 0.9rem; color: rgba(31, 30, 27, 0.5); transition: color 0.4s; }
.werkbon li.bezig { color: var(--inkt); }
.werkbon li.bezig .vinkje rect { stroke: var(--inkt); stroke-width: 1.4; }
.werkbon li.klaar { color: var(--grijs); }
.vinkje { width: 18px; height: 18px; }
.vinkje rect { fill: none; stroke: rgba(31, 30, 27, 0.32); stroke-width: 1; }
.vinkje path { fill: none; stroke: var(--olijf); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset 0.5s var(--zacht); }
.werkbon li.klaar .vinkje path { stroke-dashoffset: 0; }
.werkbon__voet { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--lijn); color: var(--grijs); }

.overslaan { position: absolute; z-index: 6; right: clamp(20px, 4vw, 56px); top: calc(var(--kop-h) + 18px); font-size: 0.82rem; color: var(--grijs); text-decoration: none; opacity: 0; transition: opacity 0.4s; }
.overslaan:hover { color: var(--inkt); text-decoration: underline; }
.overslaan { pointer-events: none; }
.overslaan.zichtbaar { opacity: 1; pointer-events: auto; }

@media (max-width: 860px) {
  .js-scroll .verf { height: 480vh; }
  .werkbon { left: 16px; right: 16px; width: auto; top: calc(var(--kop-h) + 8px); bottom: auto; padding: 10px 12px 9px; }
  .werkbon ol { grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 9px; }
  .werkbon li { grid-template-columns: 1fr; font-size: 0; gap: 0; }
  .werkbon li .vinkje { margin: 0 auto; }
  .werkbon li::after { content: attr(data-kort); display: block; margin-top: 5px; font-size: 0.6875rem; line-height: 1.2; text-align: center; white-space: nowrap; }
  .werkbon__voet, .werkbon__kop span:last-child { display: none; }
  .werkbon__kop { padding-bottom: 7px; }
  .stap { left: 18px; right: 18px; width: auto; bottom: 26px; min-height: 12rem; }
  .verfhint { left: auto; right: 16px; bottom: auto; top: calc(var(--kop-h) + 14px); font-size: 0.9rem; gap: 8px; max-width: 70%; text-align: right; }
  .staal { right: 9%; top: calc(var(--kop-h) + 110px); width: 34vw; }
  .overslaan { top: calc(var(--kop-h) + 16px); right: 28px; }
  .kleuren button { font-size: 0.86rem; }
}
@media (max-width: 860px) and (max-height: 720px) {
  .held { padding-bottom: 18px; }
  .held h1 { font-size: 2.2rem; }
  .held p { font-size: 0.96rem; margin-top: 10px; }
  .kleuren { margin-top: 14px; }
  .kleuren__label { display: none; }
  .held__acties { margin-top: 16px; }
  .scrollhint { display: none; }
}

/* sin JS: la pared es una sección normal y los pasos se leen en lista */
html:not(.js-scroll) .stap { position: relative; opacity: 1; transform: none; right: auto; bottom: auto; margin: 0 auto; padding: 40px 24px; }
html:not(.js-scroll) .werkbon, html:not(.js-scroll) .roller, html:not(.js-scroll) .staal { display: none; }

/* ══ DE LA SIMULACIÓN A LO REAL ═══════════════════════════════════════ */
section { position: relative; }
.blok { padding-block: clamp(88px, 13vw, 168px); }

.echt { background: var(--kalk); }
.echt__kop { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; }
.echt__kop p { color: var(--grijs); font-size: 1.12rem; }
.vergelijk {
  position: relative; margin-top: clamp(40px, 6vw, 72px);
  aspect-ratio: 16 / 10; overflow: hidden; background: var(--kalk-2);
  user-select: none; touch-action: pan-y;
}
.vergelijk img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vergelijk canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.vergelijk .voor { clip-path: inset(0 calc(100% - var(--x, 50%)) 0 0); }
.vergelijk.rollen .voor, .vergelijk.rollen .naad { visibility: hidden; }
.vergelijk.wacht .greep, .vergelijk.wacht .naad, .vergelijk.rollen .greep { opacity: 0; }
.vergelijk .greep, .vergelijk .naad { transition: opacity 0.4s var(--zacht), transform 0.25s var(--zacht); }
.vergelijk .naad { position: absolute; top: 0; bottom: 0; left: var(--x, 50%); width: 1px; background: #fff; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.18); pointer-events: none; }
.vergelijk .greep {
  position: absolute; top: 50%; left: var(--x, 50%); width: 52px; height: 52px; margin: -26px 0 0 -26px;
  border-radius: 50%; background: var(--kalk); color: var(--olijf);
  box-shadow: 0 10px 30px -10px rgba(18, 17, 15, 0.55); display: grid; place-items: center; pointer-events: none;
  transition: transform 0.25s var(--zacht);
}
.vergelijk .greep svg { width: 22px; height: 22px; }
.vergelijk:hover .greep { transform: scale(1.06); }
.vergelijk input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; }
.vergelijk input:focus-visible + .greep { outline: 2px solid var(--olijf); outline-offset: 4px; }
.vergelijk .tag { position: absolute; bottom: 18px; color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5); pointer-events: none; }
.vergelijk .tag.v { left: 20px; } .vergelijk .tag.n { right: 20px; }
@media (max-width: 860px) { .echt__kop { grid-template-columns: 1fr; gap: 16px; } .vergelijk { aspect-ratio: 4 / 5; } }

/* ── galería ─────────────────────────────────────────────────────────── */
.werven { background: var(--kalk); padding-top: 0; }
.werven__kop { display: flex; justify-content: space-between; align-items: end; gap: 32px; flex-wrap: wrap; }
.werven__kop p { color: var(--grijs); }
.filters { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 28px; }
.filters button { font-size: 0.86rem; padding: 0.5em 0.95em; border-radius: 2px; box-shadow: inset 0 0 0 1px var(--lijn); color: var(--grijs); transition: all 0.2s; }
.filters button[aria-pressed="true"] { background: var(--inkt); color: var(--kalk); box-shadow: none; }
.galerij { margin-top: 40px; display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(14px, 2vw, 26px); }
.foto { grid-column: span 6; position: relative; }
.foto.g7 { grid-column: span 7; } .foto.g5 { grid-column: span 5; } .foto.g4 { grid-column: span 4; } .foto.g8 { grid-column: span 8; }
.foto button { display: block; width: 100%; text-align: left; cursor: zoom-in; }
.foto__lijst { position: relative; overflow: hidden; background: var(--kalk-2); aspect-ratio: var(--ar, 4 / 3); }
.foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--zacht), filter 0.6s var(--zacht); }
/* la linterna sobre las fotos: el mismo gesto de la portada, en pequeño */
.foto__lijst::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(260px 200px at var(--mx, 50%) var(--my, 50%), rgba(255, 246, 228, 0.32), rgba(255, 246, 228, 0) 70%);
  mix-blend-mode: soft-light; transition: opacity 0.4s var(--zacht);
}
.foto button:hover .foto__lijst::after { opacity: 1; }
.foto button:hover img { transform: scale(1.025); }
/* título arriba, rubro debajo: lado a lado, el rubro en mayúsculas
   espaciadas se comía el ancho y el título salía en una columna de dos palabras */
.foto figcaption { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.foto figcaption b { font-family: var(--serif); font-weight: 400; font-size: 1.12rem; line-height: 1.3; }
.foto figcaption .label { color: var(--grijs); }
.foto[hidden] { display: none; }
.werven__voet { margin-top: 36px; display: flex; gap: 24px; align-items: center; flex-wrap: wrap; color: var(--grijs); font-size: 0.95rem; }
.pijllink { display: inline-flex; align-items: center; gap: 8px; color: var(--inkt); text-decoration: none; font-weight: 500; }
.pijllink svg { width: 16px; height: 16px; transition: transform 0.3s var(--zacht); }
.pijllink:hover svg { transform: translate(2px, -2px); }
.pijllink:hover { text-decoration: underline; }
@media (max-width: 860px) { .foto, .foto.g7, .foto.g5, .foto.g4, .foto.g8 { grid-column: span 12; } }

/* lightbox */
.lichtbak { position: fixed; inset: 0; z-index: 100; background: rgba(18, 17, 15, 0.96); display: grid; grid-template-rows: auto 1fr auto; opacity: 0; visibility: hidden; transition: opacity 0.3s var(--zacht), visibility 0s 0.3s; }
.lichtbak.open { opacity: 1; visibility: visible; transition: opacity 0.3s var(--zacht); }
.lichtbak__kop { display: flex; justify-content: space-between; align-items: center; padding: 18px 24px; color: var(--op-nacht); }
.lichtbak__beeld { position: relative; display: grid; place-items: center; padding: 0 84px; min-height: 0; }
.lichtbak__beeld img { max-width: 100%; max-height: calc(100svh - 190px); object-fit: contain; transition: opacity 0.25s; }
.lichtbak__voet { padding: 18px 24px 26px; text-align: center; color: var(--kalk); }
.lichtbak__voet b { font-family: var(--serif); font-weight: 400; font-size: 1.15rem; }
.lichtbak__voet .label { display: block; color: rgba(243, 239, 231, 0.5); margin-top: 6px; }
.rond { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: var(--kalk); box-shadow: inset 0 0 0 1px var(--lijn-nacht); transition: background-color 0.2s, box-shadow 0.2s; }
.rond:hover { background: rgba(243, 239, 231, 0.08); box-shadow: inset 0 0 0 1px rgba(243, 239, 231, 0.4); }
.rond svg { width: 20px; height: 20px; }
.lichtbak .vorige, .lichtbak .volgende { position: absolute; top: 50%; margin-top: -24px; }
.lichtbak .vorige { left: 20px; } .lichtbak .volgende { right: 20px; }
@media (max-width: 760px) { .lichtbak__beeld { padding: 0 12px; } .lichtbak .vorige, .lichtbak .volgende { top: auto; bottom: -64px; } }

/* ── clase 1 ─────────────────────────────────────────────────────────── */
.klasse { background: var(--kalk-2); }
.klasse__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 110px); align-items: center; }
.klasse p { color: var(--grijs); margin-top: 20px; font-size: 1.08rem; }
.wisselaar { display: inline-flex; margin-top: 30px; padding: 3px; box-shadow: inset 0 0 0 1px var(--lijn); border-radius: 2px; }
.wisselaar button { padding: 0.55em 1.05em; font-size: 0.9rem; border-radius: 2px; color: var(--grijs); transition: all 0.25s var(--zacht); }
.wisselaar button[aria-pressed="true"] { background: var(--inkt); color: var(--kalk); }
.wisselaar__uitleg { min-height: 3.4em; margin-top: 16px !important; font-family: var(--serif); font-style: italic; font-size: 1.05rem !important; }
.doek { position: relative; aspect-ratio: 1; background: #EFE9DE; box-shadow: 0 30px 60px -36px rgba(18, 17, 15, 0.45); overflow: hidden; }
.doek canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: none; }
.doek .spons { position: absolute; width: 96px; margin: -34px 0 0 -48px; pointer-events: none; opacity: 0; transition: opacity 0.2s; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.28)); transform: rotate(-8deg); }
.doek .spons svg { display: block; width: 100%; height: auto; }
.doek:hover .spons, .doek.veegt .spons { opacity: 1; }
.doek .uitleg { position: absolute; left: 18px; bottom: 14px; font-family: var(--serif); font-style: italic; color: var(--grijs); pointer-events: none; }
@media (max-width: 860px) { .klasse__grid { grid-template-columns: 1fr; } .doek canvas { cursor: auto; } .doek .spons { width: 80px; margin: -28px 0 0 -40px; } }

/* ── servicios: una lista editorial, no tarjetas ─────────────────────── */
.diensten__lijst { margin-top: clamp(36px, 5vw, 60px); border-bottom: 1px solid var(--lijn); }
.dienst { border-top: 1px solid var(--lijn); }
.dienst__kop { width: 100%; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 36px; gap: 24px; align-items: center; padding: 28px 0; text-align: left; }
.dienst__kop h3 { font-size: clamp(1.7rem, 3vw, 2.5rem); font-weight: 300; transition: transform 0.4s var(--zacht); }
.dienst__kop span { color: var(--grijs); }
.dienst__kop svg { width: 22px; height: 22px; color: var(--olijf); transition: transform 0.4s var(--zacht); justify-self: end; }
.dienst__kop:hover h3 { transform: translateX(6px); }
.dienst.open .dienst__kop svg { transform: rotate(45deg); }
.dienst__inhoud { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s var(--zacht); }
.dienst.open .dienst__inhoud { grid-template-rows: 1fr; }
.dienst__inhoud > div { overflow: hidden; }
.dienst__inhoud ul { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 40px; padding: 0 0 34px; margin-left: calc((100% - 36px) * 0.524); }
.dienst__inhoud li { padding-top: 12px; border-top: 1px solid var(--lijn); font-size: 0.98rem; }
.dienst__inhoud p { padding: 0 0 34px; margin-left: calc((100% - 36px) * 0.524); color: var(--grijs); }
.todo { color: #9C4A2E; font-style: italic; }
@media (max-width: 860px) {
  .dienst__kop { grid-template-columns: 1fr 28px; }
  .dienst__kop span { display: none; }
  .dienst__inhoud ul, .dienst__inhoud p { margin-left: 0; grid-template-columns: 1fr; }
}

/* ── stalen deuren: su propia sección, aparte de la pintura ───────────── */
.deuren { background: var(--kalk); }
.deuren__kop { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: end; }
.deuren__kop p { color: var(--grijs); font-size: 1.08rem; }
.deuren__kop .knop { margin-top: 22px; }
.deuren__fotos { margin-top: clamp(36px, 5vw, 60px); display: grid; grid-template-columns: 4fr 4fr 5fr 6fr; gap: clamp(12px, 1.8vw, 22px); align-items: start; }
.deuren__fotos figure { position: relative; }
.deuren__fotos img { width: 100%; height: auto; background: var(--kalk-2); }
.deuren__fotos figcaption { margin-top: 10px; font-family: var(--serif); font-size: 1.05rem; }
.deuren__voet { margin-top: 26px; }
@media (max-width: 860px) {
  .deuren__kop { grid-template-columns: 1fr; gap: 14px; }
  .deuren__fotos { grid-template-columns: 1fr 1fr; }
  .deuren__fotos figure:last-child { grid-column: span 2; }
  .deuren__fotos .clip { grid-column: span 2; justify-self: center; width: min(100%, 320px); }
}

/* ── kleuradvies: sus tres diferencias, como lista editorial ─────────── */
.kleur { background: radial-gradient(120% 140% at 0% 0%, #6F7550 0%, #4C5034 48%, #2E311F 100%); color: var(--kalk); }
.kleur h2 em { color: var(--munt); }
.kleur__grid { display: grid; grid-template-columns: 1.4fr minmax(260px, 340px); gap: clamp(40px, 7vw, 110px); align-items: center; }
.kleur__tekst .beloftes { margin-top: clamp(28px, 4vw, 44px); }
.kleur p { color: rgba(243, 239, 231, 0.8); margin-top: 20px; font-size: 1.08rem; }
.beloftes { list-style: none; border-bottom: 1px solid rgba(243, 239, 231, 0.18); counter-reset: belofte; }
.beloftes li { counter-increment: belofte; display: grid; grid-template-columns: 2.4rem 1fr; gap: 4px 12px; padding: 20px 0; border-top: 1px solid rgba(243, 239, 231, 0.18); }
.beloftes li::before { content: counter(belofte, decimal-leading-zero); grid-row: span 2; font-family: var(--serif); font-size: 1.05rem; color: var(--munt); padding-top: 4px; }
.beloftes b { font-family: var(--serif); font-weight: 400; font-size: clamp(1.35rem, 2.2vw, 1.75rem); line-height: 1.2; }
.beloftes span { color: rgba(243, 239, 231, 0.7); }
@media (max-width: 860px) { .kleur__grid { grid-template-columns: 1fr; } }

/* ── lista de precios: vuelve la noche ───────────────────────────────── */
.prijs { background: var(--nacht); color: var(--kalk); }
.prijs__grid { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(40px, 7vw, 110px); }
.prijs h2 em { color: #E9DDC6; }
.prijs p { color: var(--op-nacht); margin-top: 18px; font-size: 1.08rem; }
.stapper { background: var(--nacht-2); box-shadow: 0 0 0 1px var(--lijn-nacht); padding: clamp(24px, 3.4vw, 40px); }
.voortgang { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 28px; }
.voortgang span { display: block; color: rgba(243, 239, 231, 0.42); transition: color 0.3s; }
.voortgang span.nu, .voortgang span.gedaan { color: var(--kalk); }
.voortgang svg { width: 100%; height: 8px; margin-top: 10px; overflow: visible; }
.voortgang path { fill: none; stroke-width: 6; stroke-linecap: round; }
.voortgang .spoor { stroke: rgba(243, 239, 231, 0.1); }
.voortgang .verf { stroke: var(--taupe-l); stroke-dasharray: 220; stroke-dashoffset: 220; transition: stroke-dashoffset 0.8s var(--zacht); }
.voortgang .gedaan .verf, .voortgang .nu .verf { stroke-dashoffset: 0; }
.voortgang .nu .verf { stroke-dashoffset: 110; }
fieldset { border: 0; min-width: 0; }
.vraag[hidden] { display: none; }
.vraag legend { font-family: var(--serif); font-size: 1.55rem; line-height: 1.2; margin-bottom: 20px; }
.keuzes { display: flex; flex-wrap: wrap; gap: 8px; }
.keuze { position: relative; }
.keuze input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.keuze span { display: inline-flex; align-items: center; gap: 10px; padding: 0.7em 1em; border-radius: 2px; box-shadow: inset 0 0 0 1px var(--lijn-nacht); font-size: 0.95rem; transition: all 0.2s var(--zacht); }
.keuze span svg { width: 18px; height: 18px; opacity: 0.75; }
.keuze input:checked + span { background: rgba(187, 170, 151, 0.16); box-shadow: inset 0 0 0 1px var(--taupe-l); color: #fff; }
.keuze input:focus-visible + span { outline: 2px solid var(--taupe-l); outline-offset: 2px; }
.keuze:hover span { box-shadow: inset 0 0 0 1px rgba(243, 239, 231, 0.35); }
.subvraag { margin-top: 26px; font-size: 0.95rem; color: var(--op-nacht); margin-bottom: 10px; }
.velden { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.veld { display: grid; gap: 7px; font-size: 0.82rem; color: var(--op-nacht); }
.veld input { font: inherit; font-size: 1rem; color: var(--kalk); background: transparent; border: 0; border-bottom: 1px solid var(--lijn-nacht); padding: 10px 0; border-radius: 0; transition: border-color 0.2s; }
.veld input:focus { outline: none; border-color: var(--taupe-l); }
.veld input:user-invalid { border-color: #D97C5B; }
.fout { color: #E69A7C; font-size: 0.86rem; min-height: 1.4em; margin-top: 12px; }
.knoppen { display: flex; justify-content: space-between; align-items: center; margin-top: 26px; gap: 16px; }
.terug { color: var(--op-nacht); font-size: 0.92rem; }
.terug:hover { color: var(--kalk); text-decoration: underline; }
.terug[hidden] { visibility: hidden; display: inline; }
.klein { font-size: 0.8rem; color: rgba(243, 239, 231, 0.45); margin-top: 18px; }
.bevestiging { display: none; text-align: left; }
.bevestiging.zichtbaar { display: block; }
.bevestiging svg { width: 72px; height: 54px; margin-bottom: 22px; }
.bevestiging svg path, .bevestiging svg rect { fill: none; stroke: var(--taupe-l); stroke-width: 1.4; stroke-linejoin: round; stroke-dasharray: 260; stroke-dashoffset: 260; animation: teken 1.4s var(--zacht) forwards; }
@keyframes teken { to { stroke-dashoffset: 0; } }
.bevestiging h3 { font-size: 1.9rem; font-weight: 300; }
@media (max-width: 860px) { .prijs__grid { grid-template-columns: 1fr; } .velden { grid-template-columns: 1fr; } }

/* ── nosotros y showroom ─────────────────────────────────────────────── */
.ons__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(40px, 7vw, 110px); }
.ons p { color: var(--grijs); margin-top: 20px; font-size: 1.08rem; }
.citaten { display: grid; gap: 34px; }
blockquote { padding-top: 26px; border-top: 1px solid var(--lijn); }
blockquote p { font-family: var(--serif); font-size: 1.45rem; line-height: 1.32; color: var(--inkt) !important; margin-top: 12px !important; font-style: italic; font-weight: 300; }
blockquote cite { display: block; font-style: normal; margin-top: 14px; color: var(--grijs); }
.sterren { display: flex; gap: 3px; color: var(--taupe); }
.sterren svg { width: 13px; height: 13px; }
.showroom { margin-top: clamp(56px, 8vw, 96px); display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(40px, 7vw, 110px); padding-top: 36px; border-top: 1px solid var(--lijn); }
.showroom h3 { font-size: 1.9rem; font-weight: 300; }
.showroom dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 28px; font-size: 1rem; }
.showroom dt { color: var(--grijs); }
.showroom__acties { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 24px; }
.knop.lijn { background: transparent; color: var(--inkt); box-shadow: inset 0 0 0 1px var(--lijn); }
.knop.lijn:hover { background: var(--kalk-2); box-shadow: inset 0 0 0 1px rgba(31, 30, 27, 0.35); }
@media (max-width: 860px) { .ons__grid, .showroom { grid-template-columns: 1fr; } }

.voet { background: var(--nacht); color: rgba(243, 239, 231, 0.6); padding: 56px 0 44px; font-size: 0.92rem; }
.voet .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
.voet .merk img { height: 58px; }
.voet a { text-decoration: none; }
.voet a:hover { color: var(--kalk); text-decoration: underline; }
.voet p { margin-top: 16px; }
.nw { white-space: nowrap; }   /* "Sint-Truiden" no se parte en el guion */
.voet__onder { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--lijn-nacht); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 0.82rem; color: rgba(243, 239, 231, 0.42); }
@media (max-width: 760px) { .voet .wrap { grid-template-columns: 1fr; } }

/* ── el aviso de cookies: las dos opciones con el mismo peso, en su idioma ── */
.toestemming {
  position: fixed; left: 16px; bottom: 16px; z-index: 150; width: min(440px, calc(100% - 32px));
  background: var(--kalk); color: var(--inkt); padding: 20px 22px 18px;
  box-shadow: 0 0 0 1px var(--lijn), 0 24px 60px -24px rgba(18, 17, 15, 0.55);
  opacity: 0; transform: translateY(12px); transition: opacity 0.4s var(--zacht), transform 0.5s var(--zacht);
}
.toestemming.zichtbaar { opacity: 1; transform: none; }
.toestemming.weg { opacity: 0; transform: translateY(12px); }
.toestemming p { font-size: 0.9rem; line-height: 1.55; color: var(--grijs); max-width: none; }
.toestemming a { color: var(--inkt); }
.toestemming__knoppen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.toestemming__knoppen .knop { justify-content: center; padding: 0.8em 1em; }
@media (max-width: 860px) { .toestemming { left: 10px; right: 10px; bottom: 10px; width: auto; } }

.proto { position: fixed; left: 12px; bottom: 12px; z-index: 200; background: #8E3B22; color: #fff; padding: 6px 10px; border-radius: 2px; }
@media (max-width: 860px) { .proto { left: auto; right: 8px; bottom: 8px; padding: 4px 7px; font-size: 0.5625rem; letter-spacing: 0.14em; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
  .scrollhint i::after { animation: none; top: 30%; }
  .foto img, .knop, .dienst__kop h3 { transition: none; }
}

/* ── video vertical: póster quieto, suena solo cuando lo tocan ───────── */
.clip { margin: 0; }
.clip__doek { position: relative; aspect-ratio: 9 / 16; background: #1C1D14; overflow: hidden; border-radius: 2px; box-shadow: 0 24px 48px -28px rgba(18, 17, 15, 0.7); }
.clip video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.clip__speel { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; border: 0; padding: 0; cursor: pointer; font: inherit; color: var(--kalk); background: linear-gradient(to top, rgba(18, 17, 15, 0.55), rgba(18, 17, 15, 0) 55%); }
.clip__rond { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg, var(--olijf-l), var(--olijf) 55%, var(--olijf-d)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 14px 30px -12px rgba(18, 17, 15, 0.8); transition: transform 0.3s var(--zacht); }
.clip__rond svg { width: 28px; height: 28px; margin-left: 4px; }
.clip__speel:hover .clip__rond { transform: scale(1.06); }
.clip__duur { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center; font-size: 0.86rem; letter-spacing: 0.02em; color: rgba(243, 239, 231, 0.92); }
.clip.speelt .clip__speel { display: none; }
.clip figcaption { margin-top: 10px; font-family: var(--serif); font-size: 1.05rem; }
.clip--nacht figcaption { color: rgba(243, 239, 231, 0.75); }
@media (max-width: 860px) { .kleur .clip { justify-self: center; width: min(100%, 320px); } }

/* ── la píldora del scroll: la acción que se espera en la portada ──────
   v0.3.1 (Juan, 8-oct): en el celular lo primero es bajar, no pedir la
   opmeting (para eso está "Offerte" en la cabecera, siempre a mano). La
   píldora se queda abajo mientras la pared se pinta y cuenta cuánto va. */
.scrollhint { display: none; }
.scrollpil {
  position: absolute; z-index: 6; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center;
  min-width: 260px; padding: 10px 20px 10px 12px; border-radius: 999px; text-decoration: none; color: var(--kalk);
  background: linear-gradient(135deg, #6F7550, var(--olijf) 50%, var(--olijf-d));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 18px 34px -16px rgba(36, 40, 22, 0.75);
  transition: opacity 0.45s var(--zacht), transform 0.45s var(--zacht), min-width 0.45s var(--zacht);
}
.scrollpil.uit { opacity: 0; pointer-events: none; transform: translate(-50%, 16px); }
.scrollpil__duim { grid-row: span 2; position: relative; width: 26px; height: 40px; border-radius: 13px; box-shadow: inset 0 0 0 1.5px rgba(243, 239, 231, 0.8); }
.scrollpil__duim i { position: absolute; left: 50%; top: 8px; width: 4px; height: 9px; margin-left: -2px; border-radius: 2px; background: var(--kalk); animation: pilduim 1.6s var(--zacht) infinite; }
@keyframes pilduim { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } }
.scrollpil__tekst { display: grid; line-height: 1.2; }
.scrollpil__tekst b { font-family: var(--serif); font-weight: 400; font-size: 1.06rem; }
.scrollpil__tekst span { font-size: 0.8rem; color: rgba(243, 239, 231, 0.78); }
.scrollpil__meter { grid-column: 2; margin-top: 7px; height: 3px; border-radius: 2px; background: rgba(243, 239, 231, 0.22); overflow: hidden; }
.scrollpil__meter i { display: block; height: 100%; width: 100%; background: var(--munt); transform-origin: left; transform: scaleX(0); transition: transform 0.25s linear; }
.scrollpil.bezig { min-width: 230px; }
.scrollpil.wacht { animation: pilwenk 2.4s var(--zacht) infinite; }
@keyframes pilwenk { 0%, 70%, 100% { transform: translateX(-50%); } 80% { transform: translate(-50%, -6px); } 90% { transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .scrollpil__duim i, .scrollpil.wacht { animation: none; } }
@media (max-width: 860px) {
  .held { padding-bottom: 92px; }
  .held__acties { margin-top: 18px; }
  .knop--held { background: transparent; color: var(--inkt); box-shadow: inset 0 0 0 1px rgba(31, 30, 27, 0.28); padding: 0.75em 1.1em; font-size: 0.95rem; }
  .stap { bottom: 92px; min-height: 0; }
  .stap .knop { margin-top: 18px; }
}
@media (min-width: 861px) { .scrollpil { bottom: 28px; } }

/* ══ LA SALA DE VUELTA (v0.3.3, Juan 8-oct) ════════════════════════════
   Fotos generadas con IA y recortadas (gpt-image-2.5): suelo de roble en
   espiga como el de sus obras, dos cuadros, el sofá bouclé con el olivo
   pegado y la mesita de travertino con la lámpara. Entran con el scroll.
   LA LUZ: antes de la lámpara todo está un poco apagado y frío; cuando
   llega la mesita, la lámpara se enciende: la pared se calienta alrededor
   de la pantalla (screen), el resto de la sala cae en penumbra (multiply)
   y las sombras se corren hacia la izquierda, lejos de la luz. Funciona
   con cualquiera de los tres colores, porque se mezcla con la pared real.
   Sin z-index en .kamer ni en .kamer__groep: si no, los modos de mezcla
   no llegarían a la pared pintada del lienzo. */
.kamer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }   /* la luz de la lámpara es enorme a propósito: que no ensanche la página */
.kamer > img, .kamer > i, .kamer__groep > * { position: absolute; z-index: 3; display: block; opacity: 0; }
.kamer__kader, .kamer__pendel { height: auto; }
.kamer__pendel { aspect-ratio: 929 / 1340; }
.kamer__kader--a { aspect-ratio: 710 / 1248; }
.kamer__kader--b { aspect-ratio: 1350 / 1061; }
.kamer > img, .kamer__groep > img { transition: opacity 0.7s var(--zacht), transform 0.9s var(--zacht), filter 1.4s var(--zacht); }
.kamer__groep { position: absolute; aspect-ratio: 1437 / 656; }
.kamer__bank, .kamer__tafel { inset: 0; width: 100%; height: 100%; }

/* apagado: un poco frío y sin la luz de la lámpara */
.kamer__vloer, .kamer__kader, .kamer__bank { filter: brightness(0.88) saturate(0.8); }
.kamer__vloer { left: 0; right: 0; bottom: 0; width: 100%; height: 18%; object-fit: cover; object-position: 72% top; transform: translateY(24%); }
.kamer__kader { filter: brightness(0.88) saturate(0.8) drop-shadow(0 12px 14px rgba(25, 18, 10, 0.3)); transform: translateY(-34px) rotate(-4deg); transform-origin: 50% -8%; transition: opacity 0.5s var(--zacht), transform 1.1s cubic-bezier(0.34, 1.56, 0.64, 1), filter 1.4s var(--zacht); }
.kamer__kader--b { transform: translateY(-34px) rotate(5deg); transition-delay: 0.15s; }
.kamer__bank { filter: brightness(0.88) saturate(0.8) drop-shadow(0 10px 16px rgba(25, 18, 10, 0.3)); transform: translateY(5%) scale(0.98); transform-origin: 50% 100%; }
.kamer__tafel { filter: drop-shadow(-14px 8px 14px rgba(25, 18, 10, 0.32)); transform: translateX(9%); }

/* la luz de la lámpara: centrada en la pantalla (92 % / 38 % de la foto) */
.kamer__gloed, .kamer__avond { left: 92%; top: 38%; transform: translate(-50%, -50%); border-radius: 50%; transition: opacity 1.6s var(--zacht) 0.45s; }
.kamer__gloed { width: 110vmax; height: 110vmax; mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgba(255, 206, 140, 0.62) 0%, rgba(255, 196, 128, 0.34) 7%, rgba(255, 186, 116, 0.14) 20%, rgba(255, 180, 110, 0.04) 36%, rgba(255, 180, 110, 0) 52%); }
.kamer__avond { width: 260vmax; height: 260vmax; mix-blend-mode: multiply;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 5%, rgba(210, 196, 180, 0.6) 13%, rgba(150, 136, 122, 0.9) 26%, rgba(130, 118, 106, 1) 40%); }

.k1 .kamer__vloer { opacity: 1; transform: none; }
.k2 .kamer__kader { opacity: 1; transform: none; }
.k3 .kamer__bank { opacity: 1; transform: none; }
.k4 .kamer__tafel { opacity: 1; transform: none; }
/* encendida */
.k4 .kamer__gloed { opacity: 1; }
.k4 .kamer__avond { opacity: 0.55; }
.k4 .kamer__vloer { filter: none; }
.k4 .kamer__kader { filter: drop-shadow(-12px 12px 14px rgba(25, 18, 10, 0.34)); }
.k4 .kamer__bank { filter: drop-shadow(-28px 10px 22px rgba(25, 18, 10, 0.36)); }
/* el velo de cal de abajo se va con los muebles: la sala se ve entera */
.verf__scene::after { transition: opacity 0.8s var(--zacht); }
.verf__scene.k1::after { opacity: 0; }

/* horizontal: el grupo a la izquierda del centro, los cuadros sobre el sofá */
.kamer > img.kamer__pendel { transition: opacity 0.7s var(--zacht), transform 1.2s cubic-bezier(0.34, 1.4, 0.64, 1), filter 1.4s var(--zacht); }

/* v0.3.6 (Juan): los muebles SOBRE el piso, no contra el zócalo. Más piso al
   frente, los pies a media profundidad del piso, sombras de contacto debajo y
   una sombra suave donde la pared se encuentra con el zócalo.
   Encuadre de 35-50 mm (v0.3.5) intacto. */
.kamer__vloer { height: 17%; }
.kamer__plint { left: 0; right: 0; bottom: 17%; height: 9vh; background: linear-gradient(to top, rgba(40, 30, 20, 0.16), rgba(40, 30, 20, 0)); mix-blend-mode: multiply; transition: opacity 0.8s var(--zacht); }
.kamer__groep { left: 3%; bottom: 5.5%; width: 78%; }

/* los cuadros, en % del grupo: el sofá ocupa del 16 al 85 % y su respaldo llega al 46 % de arriba */
.kamer__kader--a { left: 29%; bottom: 62%; width: 13%; }
.kamer__kader--b { left: 45.5%; bottom: 62%; width: 26%; }

/* sombras de contacto en el piso: el sofá y el olivo (k3), la mesita (k4) */
.kamer__contact { inset: 0; mix-blend-mode: multiply; transition: opacity 0.9s var(--zacht) 0.2s; }
.kamer__contact--bank { background:
  radial-gradient(34% 4% at 50.5% 97%, rgba(40, 28, 16, 0.5), rgba(40, 28, 16, 0) 70%),
  radial-gradient(8% 3% at 10% 98%, rgba(40, 28, 16, 0.5), rgba(40, 28, 16, 0) 70%); }
.kamer__contact--tafel { background: radial-gradient(6% 2.4% at 92% 98.5%, rgba(40, 28, 16, 0.55), rgba(40, 28, 16, 0) 70%); }
.k1 .kamer__plint { opacity: 1; }
.k3 .kamer__contact--bank, .k4 .kamer__contact--tafel { opacity: 1; }

/* la lámpara de techo: cuelga delante de la pared, sobre el sofá; baja con el cable */
.kamer__pendel { left: 33%; bottom: 69%; width: 15%; transform: translateY(-40%); filter: brightness(0.88) saturate(0.8); }
.k2 .kamer__pendel { opacity: 1; transform: none; }
.k4 .kamer__pendel { filter: none; }

/* el cierre, en una tarjeta: se lee sobre cualquier color de pared */
.stap--klaar { background: rgba(251, 249, 244, 0.93); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); padding: 24px 26px 26px; box-shadow: 0 0 0 1px var(--lijn), 0 24px 48px -28px rgba(31, 30, 27, 0.45); min-height: 0; }
@media (min-width: 861px) { .stap--klaar { top: calc(var(--kop-h) + 7vh); bottom: auto; } .stap--klaar h2 { font-size: clamp(1.7rem, 2.5vw, 2.3rem); } }

@media (max-width: 860px) {
  /* en el celular el olivo queda medio fuera del cuadro, como en una foto de 50 mm */
  .kamer__vloer { height: 19%; object-position: 88% top; }
  .kamer__plint { bottom: 19%; height: 6vh; }
  .kamer__groep { left: -16%; width: 118%; bottom: 6.5%; }
  .kamer__kader--a { left: 22%; bottom: 62%; width: 20%; }
  .kamer__kader--b { left: 45%; bottom: 62%; width: 37%; }
  .kamer__pendel { left: 30%; bottom: 40%; width: 34%; }   /* cuelga delante de los cuadros; el cable sigue detrás de la tarjeta */
  .stap--klaar { top: calc(var(--kop-h) + 116px); bottom: auto; padding: 16px 18px 18px; }
  .stap--klaar h2 { font-size: 1.6rem; }
  .stap--klaar p { margin-top: 8px; }
  .stap--klaar .knop { margin-top: 14px; }
  .staal { right: 12%; }
}
/* celulares bajos (iPhone SE): la werkbon se va al cerrar y la tarjeta sube */
@media (max-width: 860px) and (max-height: 740px) {
  .verf__scene.klaar .werkbon { opacity: 0; }
  .stap--klaar { top: calc(var(--kop-h) + 8px); }
}
@media (prefers-reduced-motion: reduce) { .kamer > img, .kamer__groep > *, .staal__vel, .staal__voor { transition-duration: 0.01s !important; transition-delay: 0s !important; } }

/* ── filas que se deslizan (v0.3.6): por tipo de trabajo ─────────────── */
.rails { margin-top: clamp(28px, 4vw, 44px); display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(36px, 5vw, 64px); }
.rail { min-width: 0; }   /* si no, la fila se estira al ancho de todas sus fotos y ensancha la página */
.rail__kop { display: flex; align-items: baseline; gap: 10px 18px; flex-wrap: wrap; margin-bottom: 18px; }
.rail__kop h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.45rem, 2.2vw, 1.9rem); }
.rail__uitleg { color: var(--grijs); font-size: 0.98rem; }
.rail__pijlen { margin-left: auto; display: flex; gap: 8px; }
.rail__pijlen .rond { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--lijn); color: var(--inkt); transition: background 0.2s, opacity 0.2s; }
.rail__pijlen .rond:hover:not(:disabled) { background: #fff; }
.rail__pijlen .rond:disabled { opacity: 0.3; cursor: default; }
.rail__pijlen svg { width: 18px; height: 18px; }
.rail.past .rail__pijlen { display: none; }
.rail__spoor { display: flex; gap: clamp(14px, 1.8vw, 22px); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 0; padding-bottom: 8px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.rail__spoor .foto { flex: 0 0 auto; scroll-snap-align: start; }
.rail__spoor .foto__lijst { height: clamp(300px, 44vh, 460px); width: auto; }
.rail__spoor .foto img { height: 100%; width: 100%; object-fit: cover; }
.rail__spoor .foto figcaption { max-width: 34ch; }
@media (max-width: 860px) {
  .rail__spoor { margin-right: calc(-1 * clamp(20px, 4vw, 56px)); padding-right: clamp(20px, 4vw, 56px); }
  .rail__spoor .foto__lijst { height: min(62vh, 108vw); max-width: 82vw; }
  .rail__pijlen { display: none; }
}

/* el video de las puertas en su bloque: acero oscuro, como el de kleuradvies en oliva */
.deuren__video { margin-top: clamp(36px, 5vw, 60px); display: grid; grid-template-columns: 1.3fr minmax(240px, 320px); gap: clamp(32px, 6vw, 90px); align-items: center;
  padding: clamp(28px, 4vw, 56px); background: radial-gradient(120% 140% at 0% 0%, #3A3D3F 0%, #26292B 50%, #17191A 100%); color: var(--kalk); }
.deuren__videotekst .label { color: rgba(243, 239, 231, 0.6); }
.deuren__videotekst h3 { margin-top: 10px; font-family: var(--serif); font-weight: 400; font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.12; }
.deuren__videotekst h3 em { color: var(--munt); }
.deuren__videotekst p { margin-top: 16px; color: rgba(243, 239, 231, 0.78); max-width: 46ch; }
.deuren .rails { margin-top: clamp(28px, 4vw, 44px); }
@media (max-width: 860px) { .deuren__video { grid-template-columns: 1fr; } .deuren__video .clip { justify-self: center; width: min(100%, 300px); } }
.werven, .deuren { overflow-x: clip; }   /* la fila llega al borde en el celular sin ensanchar la página */

/* ── antes y después (v0.3.6, Juan): sin recorte y alineado ────────────
   Las dos fotos se tomaron desde lugares distintos. Se alinearon en la
   esquina del cuarto (línea del techo y del piso): el "antes" va escalado
   ×1,158 y corrido, y las dos se recortan a lo que comparten (676×1045).
   El marco tiene esa misma proporción: no hay object-fit que corte nada. */
.vergelijk { aspect-ratio: 676 / 1045; }
.vergelijk img { object-fit: fill; }
@media (min-width: 861px) {
  .echt .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(40px, 6vw, 96px); align-items: center; }
  .echt__kop { grid-template-columns: 1fr; gap: 20px; }
  .vergelijk { margin-top: 0; height: min(80vh, 780px); width: auto; }
}
@media (max-width: 860px) { .vergelijk { aspect-ratio: 676 / 1045; } }

/* ══ v0.3.7: la sala con profundidad y feng shui ══════════════════════
   Fondo → frente: cortina, piso, alfombra, cuadros y lámpara colgante,
   sofá con olivo y mesita, y adelante la mesa de centro cortada por el
   borde (lo que hace que se lea como foto y no como catálogo).
   Orden de entrada: k1 piso + alfombra + cortina, k2 cuadros + colgante,
   k3 sofá + mesa de centro, k4 mesita y la lámpara que lo enciende todo. */
.kamer__gordijn, .kamer__tapijt, .kamer__salontafel { filter: brightness(0.88) saturate(0.8); }
.kamer__gordijn { left: -1%; top: 0; width: 13%; height: 79%; object-fit: fill; transform: translateX(-30%); }
.kamer__tapijt { left: 1%; bottom: -3%; width: 84%; height: 21%; object-fit: fill; transform: translateY(12%); }
.kamer__salontafel { left: 35%; bottom: -7%; width: 24%; height: auto; aspect-ratio: 1176 / 900; transform: translateY(18%); transition-delay: 0.15s; }
.k1 .kamer__gordijn, .k1 .kamer__tapijt { opacity: 1; transform: none; }
.k3 .kamer__salontafel { opacity: 1; transform: none; }
.k4 .kamer__gordijn, .k4 .kamer__tapijt { filter: none; }
.k4 .kamer__salontafel { filter: drop-shadow(-18px 6px 16px rgba(25, 18, 10, 0.3)); }
/* más piso al frente: el sofá sube un poco y deja ver la alfombra */
.kamer__vloer { height: 22%; }
.kamer__plint { bottom: 22%; }
.kamer__groep { bottom: 11%; }
/* la colgante sobre la mesa de centro, sin tocar los cuadros */
.kamer__pendel { left: 40.5%; bottom: 75.5%; width: 13%; }

@media (max-width: 860px) {
  .kamer__vloer { height: 24%; }
  .kamer__plint { bottom: 24%; }
  .kamer__groep { bottom: 11%; }
  /* cuadros un poco más chicos: no chocan con la tarjeta en el iPad vertical */
  .kamer__kader--a { left: 24%; bottom: 60%; width: 16%; }
  .kamer__kader--b { left: 44%; bottom: 60%; width: 30%; }
  .kamer__gordijn { width: 20%; height: 77%; }
  .kamer__tapijt { left: -18%; width: 136%; height: 15%; bottom: -2%; }
  .kamer__salontafel { left: 26%; width: 46%; bottom: -7%; }
  /* la colgante no cabe entre la tarjeta y los cuadros en pantallas verticales */
  .kamer > img.kamer__pendel { display: none; }
}

/* v0.3.7: honestidad. La sala es un sfeerbeeld (IA + cuadros de dominio público), no una obra
   suya; justo después el sitio dice "geen render en geen stockfoto" de la slaapkamer. */
.kamer > .kamer__label { position: absolute; opacity: 0; right: clamp(14px, 3vw, 40px); bottom: 14px; z-index: 4; color: rgba(243, 239, 231, 0.9); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45); font-size: 0.62rem; transition: opacity 0.8s var(--zacht) 0.8s; }
.k3 .kamer__label { opacity: 1; }

/* la colgante del celular: cuelga de la tarjeta "Klaar" (el cable sale de su borde de abajo) */
.stap__pendel { display: none; }
@media (max-width: 860px) {
  .stap--klaar { transition: top 0.6s var(--zacht), opacity 0.55s var(--zacht), transform 0.7s var(--zacht); }
  /* cuando llega la sala, la werkbon se va y la tarjeta sube: deja aire para la colgante */
  .verf__scene.k2 .werkbon { opacity: 0; }
  .verf__scene.k2 .stap--klaar { top: calc(var(--kop-h) + 12px); }
  .stap__pendel { display: block; position: absolute; top: 100%; left: 50%; width: min(34%, 150px); height: auto; aspect-ratio: 929 / 1340; margin-left: max(-17%, -75px);
    pointer-events: none; opacity: 0; transform: translateY(-14%); transform-origin: 50% 0; filter: brightness(0.88) saturate(0.8);
    transition: opacity 0.7s var(--zacht), transform 1.2s cubic-bezier(0.34, 1.4, 0.64, 1), filter 1.4s var(--zacht); }
  .verf__scene.k2 .stap__pendel { opacity: 1; transform: none; }
  .verf__scene.k4 .stap__pendel { filter: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   v0.4 · 2026-10-12 — VARIAS PÁGINAS, PARA GENTE DE MÁS DE 50
   Maxim (12-oct): su público son propietarios mayores que se pierden.
   · letra base de 18 px, campos y botones de 56 px, contraste alto
   · la cabecera siempre clara y fija; en pantallas chicas, un botón que
     dice "Menu" (no solo tres rayas)
   · en el celular, abajo, tres botones con nombre: Bellen · WhatsApp · Offerte
   · nada se desliza de lado ni secuestra el scroll
   Mismo sistema visual de la v0.3.7: Newsreader + DM Sans, el oliva del
   logo, cal, cero esquinas redondeadas.
   ════════════════════════════════════════════════════════════════════════ */
:root { --kop-h: 76px; --balk-h: 0px; }
body { font-size: 1.125rem; line-height: 1.65; }
main { padding-top: var(--kop-h); }
p { max-width: 62ch; }
.blok { padding-block: clamp(64px, 9vw, 128px); }
.blok--kort { padding-top: clamp(24px, 3vw, 40px); }
.stil { color: var(--grijs); }
.klein { font-size: 0.92rem; color: var(--grijs); margin-top: 14px; }

.naar-inhoud { position: absolute; left: 12px; top: -80px; z-index: 300; background: var(--inkt); color: var(--kalk); padding: 12px 18px; text-decoration: none; }
.naar-inhoud:focus { top: 12px; }

/* botones más grandes y fáciles de tocar */
.knop--groot { font-size: 1.06rem; padding: 1em 1.5em; min-height: 56px; justify-content: center; }
.knop svg { flex: none; }
.knop.lijn { box-shadow: inset 0 0 0 1.5px rgba(31, 30, 27, 0.55); }
.knop.lijn:hover { box-shadow: inset 0 0 0 1.5px var(--inkt); }

/* ── la cabecera ─────────────────────────────────────────────────────── */
.kop, .kop.licht { background: rgba(243, 239, 231, 0.97); color: var(--inkt); box-shadow: 0 1px 0 var(--lijn); }
.kop .wrap { gap: 20px; }
.kop .merk img { height: 44px; }
.menu { gap: clamp(14px, 1.6vw, 26px); font-size: 1rem; }
.menu a:not(.knop) { opacity: 1; color: var(--inkt); padding: 8px 0; border-bottom: 2px solid transparent; }
.menu a:not(.knop):hover { text-decoration: none; border-bottom-color: var(--taupe-l); }
.menu a[aria-current="page"] { border-bottom-color: var(--olijf); font-weight: 500; }
.kop__acties { display: flex; align-items: center; gap: 14px; }
.kop__bel { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; text-decoration: none; color: var(--inkt); white-space: nowrap; }
.kop__bel svg { width: 20px; height: 20px; color: var(--olijf); }
.kop__bel:hover span { text-decoration: underline; }
.kop__offerte { padding: 0.8em 1.15em; font-size: 0.98rem; white-space: nowrap; }
.menuknop { display: none; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px; font-weight: 500; font-size: 1.02rem; color: var(--inkt); box-shadow: inset 0 0 0 1.5px var(--inkt); border-radius: 2px; }
.menuknop__streep { display: grid; gap: 4px; width: 18px; }
.menuknop__streep i { display: block; height: 2px; background: currentColor; transition: transform 0.3s var(--zacht), opacity 0.2s; }
.menuknop[aria-expanded="true"] .menuknop__streep i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menuknop[aria-expanded="true"] .menuknop__streep i:nth-child(2) { opacity: 0; }
.menuknop[aria-expanded="true"] .menuknop__streep i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 1240px) {
  .menu { display: none; }
  .menuknop { display: inline-flex; }
}
@media (max-width: 1000px) { .kop__bel span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
@media (max-width: 860px) {
  :root { --kop-h: 68px; }
  .kop .merk img { height: 36px; }
  .kop__offerte, .kop__bel { display: none; }
  .kop .wrap { width: calc(100% - 28px); }
}

/* el menú abierto: la lista entera, grande */
.paneel { position: fixed; z-index: 49; top: var(--kop-h); left: 0; right: 0; bottom: 0; overflow-y: auto; background: var(--kalk); padding: 8px clamp(18px, 5vw, 48px) 120px; }
.paneel nav { display: grid; }
.paneel nav a { display: flex; align-items: center; min-height: 64px; font-family: var(--serif); font-size: 1.6rem; color: var(--inkt); text-decoration: none; border-bottom: 1px solid var(--lijn); }
.paneel nav a[aria-current="page"] { color: var(--olijf); }
.paneel nav a[aria-current="page"]::after { content: "· je bent hier"; margin-left: 12px; font-family: var(--sans); font-size: 0.9rem; color: var(--grijs); }
.paneel__onder { display: grid; gap: 12px; margin-top: 28px; }
.paneel__onder .knop { justify-content: center; min-height: 58px; font-size: 1.08rem; }
.paneel__onder p { color: var(--grijs); }
html.menu-open { overflow: hidden; }

/* ── la barra de abajo en el celular ─────────────────────────────────── */
.actiebalk { display: none; }
@media (max-width: 860px) {
  :root { --balk-h: 68px; }
  body { padding-bottom: calc(var(--balk-h) + env(safe-area-inset-bottom)); }
  .actiebalk { display: grid; grid-template-columns: 1fr 1fr 1.25fr; position: fixed; z-index: 60; left: 0; right: 0; bottom: 0;
    height: calc(var(--balk-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: var(--kalk); box-shadow: 0 -1px 0 var(--lijn), 0 -12px 30px -18px rgba(18, 17, 15, 0.35); }
  .actiebalk a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 0.95rem; font-weight: 500; color: var(--inkt); text-decoration: none; border-right: 1px solid var(--lijn); }
  .actiebalk a svg { width: 24px; height: 24px; color: var(--olijf); }
  .actiebalk a.actiebalk__hoofd { background: linear-gradient(135deg, #454A2E 0%, #5F6442 60%, #7E865C 100%); color: #FBF9F2; border-right: 0; }
  .actiebalk a.actiebalk__hoofd svg { color: #FBF9F2; }
  .proto { bottom: calc(var(--balk-h) + 8px + env(safe-area-inset-bottom)); }
  .toestemming { bottom: calc(var(--balk-h) + 10px + env(safe-area-inset-bottom)); }
}

/* ── la portada «thuiskomen» ─────────────────────────────────────────── */
.verf--auto { height: auto; }
.verf--auto .verf__scene { position: relative; height: calc(100svh - var(--kop-h)); min-height: 660px; max-height: 1000px; }
.verf--auto canvas { cursor: auto; }
.verf--auto .verf__scene::before { display: none; }
.verf--auto .held { position: absolute; top: clamp(20px, 4vh, 48px); left: clamp(16px, 4vw, 56px); right: auto; bottom: auto; width: min(580px, calc(100% - 32px)); padding: 0; pointer-events: auto; opacity: 1; visibility: visible; }
.held__kaart { background: rgba(251, 249, 244, 0.94); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); padding: clamp(22px, 2.6vw, 34px); box-shadow: 0 0 0 1px var(--lijn), 0 24px 48px -28px rgba(31, 30, 27, 0.45); }
.verf--auto .held h1 { font-size: clamp(2.1rem, 3.4vw, 3.2rem); font-weight: 300; line-height: 1.08; }
.verf--auto .held p { margin-top: 14px; font-size: 1.12rem; color: var(--grijs); }
.verf--auto .held__acties { margin-top: 22px; gap: 12px; }
.verf--auto .held__acties .knop { flex: 1 1 auto; white-space: nowrap; }
.held__ruimte { display: none; }
/* en escritorio la sala se corre a la derecha: la tarjeta no tapa los cuadros */
@media (min-width: 861px) {
  .verf--auto .held { width: min(540px, calc(100% - 32px)); }
  .verf--auto .kamer__groep { left: 27%; width: 72%; }
  .verf--auto .kamer__pendel { left: 52%; width: 13%; }
}
/* las muestras A4, pegadas a la pared: una toca y el rodillo vuelve a pintar */
.waaier { margin-top: 14px; padding: 16px 18px 14px; background: rgba(251, 249, 244, 0.94); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 0 0 1px var(--lijn), 0 24px 48px -28px rgba(31, 30, 27, 0.45); }
.waaier__label { display: block; font-size: 1rem; font-weight: 500; margin-bottom: 10px; }
.waaier__stalen { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
.waaier__stalen button { display: grid; justify-items: center; gap: 6px; padding: 4px 0; font-size: 0.82rem; color: var(--inkt); line-height: 1.2; }
.waaier__stalen i { position: relative; width: 100%; max-width: 48px; aspect-ratio: 210 / 297; background: var(--k); box-shadow: 0 0 0 1px rgba(31, 30, 27, 0.12), 0 6px 12px -8px rgba(31, 30, 27, 0.5); transition: transform 0.3s var(--zacht), box-shadow 0.3s; }
.waaier__stalen i::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 20%; background: #FBF9F4; }
.waaier__stalen button:hover i { transform: translateY(-3px); }
.waaier__stalen button[aria-checked="true"] i { transform: translateY(-4px); box-shadow: 0 0 0 2px var(--inkt), 0 10px 18px -8px rgba(31, 30, 27, 0.6); }
.waaier__stalen button[aria-checked="true"] span { font-weight: 600; }
@media (max-width: 860px) {
  .verf--auto .verf__scene { height: auto; min-height: 0; max-height: none; }
  .verf--auto .held { position: relative; top: auto; left: auto; width: auto; padding: 14px 14px 0; }
  .held__ruimte { display: block; height: clamp(260px, 72vw, 340px); }
  .verf--auto .kamer { bottom: var(--waaier-h, 0px); }
  .verf--auto .waaier { position: static; margin: 0 -14px; padding: 18px 16px 20px; background: var(--kalk); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 -1px 0 var(--lijn); }
  .held__kaart { padding: 20px 18px 22px; }
  .verf--auto .held h1 { font-size: 2rem; }
  .verf--auto .held p { font-size: 1.06rem; }
  .verf--auto .held__acties .knop { flex-basis: 100%; }
  .waaier__stalen { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 8px; }
  .waaier__stalen i { max-width: 44px; }
  .waaier__stalen button { font-size: 0.9rem; }
}
@media (min-width: 600px) and (max-width: 860px) { .waaier__stalen { grid-template-columns: repeat(8, minmax(0, 1fr)); } .held__ruimte { height: clamp(340px, 52vw, 440px); } }

/* ── lo que da tranquilidad ──────────────────────────────────────────── */
.zekerheden { background: var(--inkt); color: var(--kalk); }
.zekerheden ul { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.zekerheden li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; padding: 24px 22px; border-left: 1px solid rgba(243, 239, 231, 0.14); font-size: 1.02rem; line-height: 1.45; }
.zekerheden li:first-child { border-left: 0; padding-left: 0; }
.zekerheden svg { width: 24px; height: 24px; color: var(--munt); margin-top: 1px; }
.zekerheden b { font-weight: 600; }
@media (max-width: 1000px) { .zekerheden ul { grid-template-columns: 1fr 1fr; } .zekerheden li:nth-child(3) { border-left: 0; padding-left: 0; } .zekerheden li { border-top: 1px solid rgba(243, 239, 231, 0.14); } }
@media (max-width: 560px) { .zekerheden ul { grid-template-columns: 1fr; } .zekerheden li { border-left: 0; padding: 16px 0; } .zekerheden li:first-child { border-top: 0; } }

/* ── las tres puertas del sitio ──────────────────────────────────────── */
.wegwijzer { background: var(--kalk); }
.wegwijzer__kaarten { margin-top: clamp(28px, 4vw, 48px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.wkaart { display: grid; grid-template-rows: auto 1fr; background: #FBF9F4; color: var(--inkt); text-decoration: none; box-shadow: 0 0 0 1px var(--lijn); transition: box-shadow 0.3s var(--zacht), transform 0.3s var(--zacht); }
.wkaart:hover { box-shadow: 0 0 0 1px rgba(31, 30, 27, 0.3), 0 24px 40px -26px rgba(31, 30, 27, 0.5); transform: translateY(-2px); }
.wkaart img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.wkaart__tekst { display: grid; gap: 8px; align-content: start; padding: 22px 22px 24px; }
.wkaart__tekst b { font-family: var(--serif); font-weight: 400; font-size: 1.7rem; line-height: 1.15; }
.wkaart__tekst > span:not(.wkaart__meer) { color: var(--grijs); }
.wkaart__meer { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-weight: 600; color: var(--olijf-d); }
.wkaart__meer svg { width: 18px; height: 18px; transition: transform 0.3s var(--zacht); }
.wkaart:hover .wkaart__meer svg { transform: translateX(4px); }
@media (max-width: 860px) { .wegwijzer__kaarten { grid-template-columns: 1fr; } .wkaart { grid-template-columns: 40% 1fr; grid-template-rows: auto; } .wkaart img { height: 100%; aspect-ratio: auto; min-height: 150px; } .wkaart__tekst { padding: 16px; } .wkaart__tekst b { font-size: 1.4rem; } }

/* ── antes y después, al lado del texto ──────────────────────────────── */
.echt .wrap.echt__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: clamp(32px, 6vw, 96px); align-items: center; }
.echt__grid .echt__kop { display: block; }
.echt__grid .echt__kop p { margin-top: 18px; }
.echt__grid .vergelijk { margin-top: 0; aspect-ratio: 676 / 1045; height: auto; width: 100%; }
@media (max-width: 860px) { .echt .wrap.echt__grid { grid-template-columns: 1fr; } .echt__grid .vergelijk { width: min(100%, 440px); justify-self: center; } }

.kleur .knop.licht { margin-top: 28px; }

/* ── la pintura después de cinco años ────────────────────────────────── */
.kwaliteit { background: var(--kalk-2); }
.kwaliteit__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: clamp(32px, 6vw, 96px); align-items: center; }
.kwaliteit p { margin-top: 18px; font-size: 1.1rem; }
.klassen { margin-top: 28px; width: 100%; max-width: 440px; border-collapse: collapse; font-size: 1.05rem; }
.klassen caption { text-align: left; font-weight: 600; margin-bottom: 8px; }
.klassen th, .klassen td { text-align: left; padding: 12px 14px 12px 0; border-top: 1px solid var(--lijn); }
.klassen thead th { color: var(--grijs); font-weight: 500; border-top: 0; }
.klassen tbody tr:first-child th, .klassen tbody tr:first-child td { color: var(--olijf-d); font-weight: 600; }
.jaren { margin: 0; }
.vergelijk.vergelijk--jaren { margin-top: 0; aspect-ratio: 900 / 1125; height: auto; width: 100%; }
.vergelijk--jaren .tag { bottom: 16px; }
.jaren figcaption { margin-top: 12px; font-size: 0.92rem; color: var(--grijs); }
@media (max-width: 860px) { .kwaliteit__grid { grid-template-columns: 1fr; } .vergelijk--jaren { width: min(100%, 460px); } }

/* ── el catálogo de obras ────────────────────────────────────────────── */
.werven { padding-top: clamp(64px, 9vw, 128px); }
.catalogus { margin-top: clamp(24px, 3vw, 36px); }
.catalogus .filters { margin: 0 0 28px; gap: 10px; }
.catalogus .filters button { min-height: 50px; padding: 0 20px; font-size: 1.02rem; color: var(--inkt); box-shadow: inset 0 0 0 1.5px rgba(31, 30, 27, 0.3); }
.catalogus .filters button span { color: var(--grijs); margin-left: 4px; }
.catalogus .filters button[aria-pressed="true"] span { color: rgba(243, 239, 231, 0.7); }
.catalogus__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.catalogus .foto { margin: 0; grid-column: auto; }
.catalogus .foto[hidden] { display: none; }
.catalogus .foto button { display: block; width: 100%; padding: 0; }
.catalogus .foto__lijst { aspect-ratio: 4 / 3; overflow: hidden; background: var(--kalk-2); }
.catalogus .foto__lijst img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--zacht); }
.catalogus .foto button:hover img { transform: scale(1.03); }
.catalogus figcaption { margin-top: 10px; display: grid; gap: 2px; }
.catalogus figcaption b { font-weight: 500; font-size: 1.05rem; }
.catalogus figcaption span { color: var(--grijs); font-size: 0.95rem; }
.werven__voet { margin-top: 36px; }
@media (max-width: 1000px) { .catalogus__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .catalogus__grid { grid-template-columns: 1fr; } }
.lichtbak .sluit { width: auto; padding: 0 16px; gap: 8px; border-radius: 2px; display: inline-flex; align-items: center; font-weight: 500; }
.lichtbak .sluit svg { width: 20px; height: 20px; }

/* ── reseñas ─────────────────────────────────────────────────────────── */
.ons p { margin-top: 18px; color: var(--grijs); }
.citaten blockquote p { font-family: var(--serif); font-size: 1.4rem; line-height: 1.35; color: var(--inkt); margin-top: 10px; }
.citaten cite { display: block; margin-top: 10px; font-style: normal; color: var(--grijs); font-size: 0.98rem; }
.sterren svg { width: 18px; height: 18px; }

/* ── cómo trabajamos ─────────────────────────────────────────────────── */
.werkwijze { background: var(--kalk); }
.stappen { list-style: none; counter-reset: stap; margin-top: clamp(28px, 4vw, 48px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); }
.stappen li { counter-increment: stap; display: grid; gap: 8px; align-content: start; padding-top: 18px; border-top: 2px solid var(--inkt); }
.stappen li::before { content: counter(stap); font-family: var(--serif); font-size: 2.6rem; line-height: 1; color: var(--olijf); }
.stappen b { font-family: var(--serif); font-weight: 400; font-size: 1.45rem; line-height: 1.2; }
.stappen span { color: var(--grijs); }
.stappen--smal { grid-template-columns: 1fr; }
@media (max-width: 1000px) { .stappen { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .stappen { grid-template-columns: 1fr; } }

/* ── preguntas ───────────────────────────────────────────────────────── */
.vragen { background: var(--kalk-2); }
.vragen__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
.vragen__lijst { border-bottom: 1px solid var(--lijn); }
.vragen details { border-top: 1px solid var(--lijn); }
.vragen summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 68px; padding: 14px 0; font-size: 1.2rem; font-weight: 500; }
.vragen summary::-webkit-details-marker { display: none; }
.vragen summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 36px; height: 36px; font-size: 1.5rem; font-weight: 300; color: var(--olijf); box-shadow: inset 0 0 0 1.5px var(--olijf); transition: transform 0.3s var(--zacht); }
.vragen details[open] summary::after { transform: rotate(45deg); }
.vragen details p { padding: 0 0 22px; color: var(--grijs); font-size: 1.08rem; }
@media (max-width: 860px) { .vragen__grid { grid-template-columns: 1fr; } }

/* ── formularios en claro ────────────────────────────────────────────── */
.kortform, .wizard { display: grid; gap: 18px; }
.kortform .veld, .wizard .veld { display: grid; gap: 8px; font-size: 1.05rem; font-weight: 500; color: var(--inkt); }
.kortform .veld input, .wizard .veld input, .wizard .veld textarea { font: inherit; font-weight: 400; font-size: 1.12rem; color: var(--inkt); background: #fff; border: 1.5px solid rgba(31, 30, 27, 0.4); border-radius: 2px; min-height: 56px; padding: 12px 14px; }
.wizard .veld textarea { min-height: 96px; resize: vertical; }
.kortform .veld input:focus, .wizard .veld input:focus, .wizard .veld textarea:focus { outline: 3px solid var(--olijf); outline-offset: 1px; border-color: var(--olijf); }
.kortform .fout, .wizard .fout { color: #9E2F18; font-weight: 600; font-size: 1.02rem; min-height: 1.2em; margin: 0; }
.moment { border: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.moment legend { font-weight: 500; font-size: 1.05rem; margin-bottom: 8px; }
.moment label, .kanaal label { position: relative; }
.moment input, .kanaal input, .tegel input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.moment span, .kanaal label span { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 14px; background: #fff; box-shadow: inset 0 0 0 1.5px rgba(31, 30, 27, 0.25); cursor: pointer; transition: box-shadow 0.2s, background 0.2s; }
.moment input:checked + span, .kanaal input:checked + span { box-shadow: inset 0 0 0 2.5px var(--olijf); background: #F1F2E8; font-weight: 600; }
.moment input:focus-visible + span, .kanaal input:focus-visible + span, .tegel input:focus-visible + span { outline: 3px solid var(--olijf); outline-offset: 2px; }
.terugbel { background: var(--kalk); }
.terugbel__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: clamp(32px, 6vw, 96px); align-items: start; }
.terugbel p { margin-top: 16px; font-size: 1.1rem; }
.terugbel .kortform { background: #FBF9F4; padding: clamp(22px, 3vw, 34px); box-shadow: 0 0 0 1px var(--lijn), 0 24px 48px -32px rgba(31, 30, 27, 0.4); }
@media (max-width: 860px) { .terugbel__grid { grid-template-columns: 1fr; } }

/* ── las puertas al final del home ───────────────────────────────────── */
.deuren__videotekst h2 { margin-top: 10px; font-size: clamp(1.9rem, 3.4vw, 2.8rem); color: var(--kalk); }
.deuren__videotekst h2 em { color: var(--munt); }
.deuren__videotekst .knop { margin-top: 26px; }
.deuren__video { margin-top: 0; }

/* ── el cierre de cada página ────────────────────────────────────────── */
.afsluiter { background: radial-gradient(120% 140% at 0% 0%, #6F7550 0%, #4C5034 48%, #2E311F 100%); color: var(--kalk); }
.afsluiter h2 em { color: var(--munt); }
.afsluiter p { color: rgba(243, 239, 231, 0.82); margin-top: 16px; font-size: 1.1rem; }
.afsluiter__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 420px); gap: clamp(28px, 6vw, 96px); align-items: center; }
.afsluiter__acties { display: grid; gap: 12px; }
.afsluiter .knop { background: #FBF9F2; color: var(--olijf-d); }
.afsluiter .knop.lijn { background: transparent; color: var(--kalk); box-shadow: inset 0 0 0 1.5px rgba(243, 239, 231, 0.6); }
.afsluiter .klein { color: rgba(243, 239, 231, 0.7); margin-top: 0; }
@media (max-width: 860px) { .afsluiter__grid { grid-template-columns: 1fr; } }

/* ── la cabecera de cada página ──────────────────────────────────────── */
.paginakop { background: var(--kalk); padding: clamp(28px, 4vw, 56px) 0 clamp(40px, 6vw, 80px); }
.paginakop__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.paginakop--smal .wrap { max-width: 900px; margin-left: max(24px, (100% - 1200px) / 2); }
.kruimels { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.98rem; color: var(--grijs); margin-bottom: 18px; }
.kruimels a { color: var(--inkt); }
.kruimels [aria-current] { font-weight: 500; color: var(--inkt); }
.paginakop h1 { font-size: clamp(2.4rem, 4.8vw, 4.2rem); }
.paginakop h1 em { color: var(--olijf); }
.paginakop .intro { margin-top: 18px; font-size: clamp(1.15rem, 1.6vw, 1.3rem); color: var(--grijs); }
.paginakop__acties { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; }
.paginakop__foto { margin: 0; }
.paginakop__foto img { width: 100%; height: auto; max-height: 620px; object-fit: cover; box-shadow: 0 30px 60px -36px rgba(31, 30, 27, 0.6); }
.paginakop__foto figcaption { margin-top: 10px; color: var(--grijs); font-size: 0.95rem; }
.paginakop .clip { width: min(100%, 340px); justify-self: center; }
.paginakop .clip figcaption { color: var(--grijs); }
.paginakop--staal { background: radial-gradient(120% 140% at 0% 0%, #3A3D3F 0%, #26292B 50%, #17191A 100%); color: var(--kalk); }
.paginakop--staal h1 em { color: var(--munt); }
.paginakop--staal .intro, .paginakop--staal .kruimels, .paginakop--staal .paginakop__foto figcaption { color: rgba(243, 239, 231, 0.78); }
.paginakop--staal .kruimels a, .paginakop--staal .kruimels [aria-current] { color: var(--kalk); }
@media (max-width: 860px) { .paginakop__grid { grid-template-columns: 1fr; } .paginakop__acties .knop { flex: 1 1 100%; } }

/* listas con ✓ */
.lijstblok { background: var(--kalk-2); }
.lijstblok__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
.vinkjes { list-style: none; display: grid; gap: 14px; margin-top: 20px; }
.vinkjes li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; }
.vinkjes svg { width: 24px; height: 24px; color: var(--olijf); margin-top: 2px; }
.vinkjes--groot { margin-top: 0; gap: 0; border-bottom: 1px solid var(--lijn); }
.vinkjes--groot li { padding: 18px 0; border-top: 1px solid var(--lijn); font-size: 1.15rem; }
.vinkjes--groot b { font-weight: 600; }
@media (max-width: 860px) { .lijstblok__grid { grid-template-columns: 1fr; } }

/* un caso de obra */
.geval { background: var(--kalk); }
.geval__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr); gap: clamp(28px, 6vw, 96px); align-items: center; }
.geval .label { color: var(--grijs); }
.geval h2 { margin-top: 10px; }
.geval p { margin-top: 16px; font-size: 1.1rem; }
.geval__plan { background: #FBF9F4; padding: clamp(22px, 3vw, 34px); box-shadow: 0 0 0 1px var(--lijn); }
.geval__plan h3 { font-size: 1.6rem; }
.geval__plan .knop { margin-top: 20px; }
@media (max-width: 860px) { .geval__grid { grid-template-columns: 1fr; } }

.showroomblok { background: var(--kalk-2); }
.showroomblok .showroom { margin-top: 0; padding-top: 0; border-top: 0; }
.showroomblok p { margin-top: 16px; }
.showroom dl { font-size: 1.08rem; }

/* ── /kleuradvies: la misma muestra con otra luz ─────────────────────── */
.lichtproef { background: var(--kalk); }
.lichtproef__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.lichtproef p { margin-top: 16px; }
.lichtproef__keuze { margin-top: 24px; display: grid; gap: 16px; }
.waaier--los { margin-top: 0; }
.waaier--los .waaier__stalen { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.momenten { display: flex; flex-wrap: wrap; gap: 8px; }
.momenten button { min-height: 50px; padding: 0 18px; font-size: 1.02rem; box-shadow: inset 0 0 0 1.5px rgba(31, 30, 27, 0.3); }
.momenten button[aria-checked="true"] { background: var(--inkt); color: var(--kalk); box-shadow: none; }
.lichtproef__muur { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--k); transition: background-color 0.6s var(--zacht); box-shadow: 0 30px 60px -36px rgba(31, 30, 27, 0.6); }
.lichtproef__muur::before, .lichtproef__muur::after { content: ""; position: absolute; inset: 0; transition: opacity 0.8s var(--zacht); }
/* el zócalo y el piso, para que se lea como una pared de verdad */
.lichtproef__muur::before { background: linear-gradient(to top, #8C6E52 0 9%, #F3EFE7 9% 12%, rgba(0,0,0,0.1) 12% 12.6%, transparent 12.6%); }
.lichtproef__raam { position: absolute; inset: 0; transition: opacity 0.8s var(--zacht), background 0.8s var(--zacht); }
.lichtproef__muur[data-licht="ochtend"] .lichtproef__raam { background: linear-gradient(115deg, rgba(225, 236, 255, 0.4) 0%, rgba(225, 236, 255, 0.12) 40%, rgba(40, 50, 70, 0.18) 100%); }
.lichtproef__muur[data-licht="middag"] .lichtproef__raam { background: linear-gradient(170deg, rgba(255, 252, 240, 0.32) 0%, rgba(255, 252, 240, 0.08) 60%, rgba(0, 0, 0, 0.06) 100%); }
.lichtproef__muur[data-licht="avond"] .lichtproef__raam { background: radial-gradient(60% 70% at 82% 70%, rgba(255, 196, 120, 0.42) 0%, rgba(255, 170, 90, 0.16) 40%, rgba(30, 20, 10, 0.45) 100%); mix-blend-mode: multiply; }
.lichtproef__muur[data-licht="avond"]::after { background: radial-gradient(30% 36% at 82% 70%, rgba(255, 214, 160, 0.5), rgba(255, 214, 160, 0) 70%); mix-blend-mode: screen; }
.lichtproef__staal { position: absolute; left: 18%; top: 18%; width: 22%; aspect-ratio: 210 / 297; background: var(--k); filter: brightness(1.04); box-shadow: 0 0 0 1px rgba(31, 30, 27, 0.1), 0 14px 22px -14px rgba(31, 30, 27, 0.6); transform: rotate(-2deg); }
.lichtproef__staal::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 20%; background: #FBF9F4; }
.lichtproef__label { position: absolute; right: 12px; bottom: 12px; color: rgba(243, 239, 231, 0.9); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45); }
@media (max-width: 860px) { .lichtproef__grid { grid-template-columns: 1fr; } .waaier--los .waaier__stalen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ── /offerte ────────────────────────────────────────────────────────── */
.offerte { background: var(--kalk); }
.offerte__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.8fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.wizard { background: #FBF9F4; padding: clamp(20px, 3vw, 40px); box-shadow: 0 0 0 1px var(--lijn), 0 24px 48px -32px rgba(31, 30, 27, 0.4); scroll-margin-top: calc(var(--kop-h) + 16px); }
.wizard__kop { display: grid; gap: 10px; font-weight: 600; color: var(--grijs); }
.wizard__balk { display: block; height: 8px; background: var(--kalk-2); overflow: hidden; }
.wizard__balk i { display: block; height: 100%; background: var(--olijf); transform-origin: 0 50%; transform: scaleX(0.16); transition: transform 0.5s var(--zacht); }
.wizard .vraag { border: 0; min-width: 0; }
.wizard legend { font-family: var(--serif); font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1.15; margin-bottom: 20px; outline: none; }
.tegels { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tegels--lijst { grid-template-columns: 1fr; }
.tegel { position: relative; }
.tegel[hidden] { display: none; }
.tegel > span { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 14px; min-height: 64px; height: 100%; padding: 14px 18px; background: #fff; box-shadow: inset 0 0 0 1.5px rgba(31, 30, 27, 0.25); cursor: pointer; transition: box-shadow 0.2s, background 0.2s; }
.tegels:not(.tegels--lijst) .tegel > span { min-height: 108px; }
.tegel svg { grid-row: span 2; width: 34px; height: 34px; color: var(--olijf); }
.tegel b { font-size: 1.15rem; font-weight: 600; }
.tegel small { font-size: 0.98rem; color: var(--grijs); }
.tegels--lijst .tegel > span { grid-template-columns: 1fr; }
.tegel > span:hover { box-shadow: inset 0 0 0 1.5px var(--inkt); }
.tegel input:checked + span { box-shadow: inset 0 0 0 3px var(--olijf); background: #F1F2E8; }
.wizard .velden { grid-template-columns: 1fr 1fr; gap: 16px; }
.kanaal { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 18px; }
.kanaal__label { width: 100%; font-weight: 500; font-size: 1.05rem; }
.kanaal label span svg { width: 22px; height: 22px; color: var(--olijf); }
.wizard .knoppen { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.wizard .knoppen .knop { min-height: 56px; }
.wizard .knoppen .terug svg { width: 18px; height: 18px; }
.wizard .knoppen [type="submit"] { margin-left: auto; }
.offerte__zij { padding-top: 8px; }
.offerte__zij h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.offerte__zij p { margin: 12px 0 18px; }
.offerte__zij .vinkjes { margin-top: 28px; }
@media (max-width: 860px) {
  .offerte__grid { grid-template-columns: 1fr; }
  .tegels, .wizard .velden { grid-template-columns: 1fr; }
  .tegels:not(.tegels--lijst) .tegel > span { min-height: 76px; }
  .wizard .knoppen [type="submit"] { flex: 1 1 100%; order: -1; }
  .wizard .knoppen .terug { flex: 1 1 100%; justify-content: center; }
}

/* ── /bedankt ────────────────────────────────────────────────────────── */
.bedankt { background: var(--kalk); padding-top: clamp(40px, 6vw, 88px); }
.bedankt__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
.bedankt__brief { width: 72px; height: 54px; margin-bottom: 18px; }
.bedankt__brief rect, .bedankt__brief path { fill: none; stroke: var(--olijf); stroke-width: 2; }
.bedankt h1 { font-size: clamp(2.6rem, 5vw, 4.2rem); }
.bedankt .intro { margin-top: 18px; font-size: 1.25rem; }
.bedankt__volgende h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.bedankt__acties { display: grid; gap: 12px; margin-top: 28px; }
.proto-noot { color: #8E3B22; }
@media (max-width: 860px) { .bedankt__grid { grid-template-columns: 1fr; } }

/* ── /contact ────────────────────────────────────────────────────────── */
.contact { background: var(--kalk); }
.contact__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: clamp(28px, 5vw, 80px); align-items: start; }
.contact__kanalen { list-style: none; display: grid; gap: 12px; }
.kanaalkaart { display: grid; grid-template-columns: 40px 1fr; gap: 16px; align-items: center; min-height: 84px; padding: 16px 20px; background: #FBF9F4; color: var(--inkt); text-decoration: none; box-shadow: 0 0 0 1px var(--lijn); transition: box-shadow 0.2s; }
.kanaalkaart:hover { box-shadow: 0 0 0 1.5px var(--inkt); }
.kanaalkaart svg { width: 34px; height: 34px; color: var(--olijf); }
.kanaalkaart span { display: grid; color: var(--grijs); }
.kanaalkaart b { color: var(--inkt); font-size: 1.2rem; font-weight: 600; }
.contact .kortform { background: #FBF9F4; padding: clamp(22px, 3vw, 34px); box-shadow: 0 0 0 1px var(--lijn), 0 24px 48px -32px rgba(31, 30, 27, 0.4); }
.contact .kortform h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
@media (max-width: 860px) { .contact__grid { grid-template-columns: 1fr; } }

/* ── el pie ──────────────────────────────────────────────────────────── */
.voet { font-size: 1rem; color: rgba(243, 239, 231, 0.72); padding-top: 64px; }
.voet .wrap.voet__grid { display: grid; grid-template-columns: 1.3fr 0.8fr 1fr 1fr; gap: 32px; }
.voet__kop { font-family: var(--sans); font-size: 0.95rem; font-weight: 600; color: var(--kalk); letter-spacing: 0.02em; margin-bottom: 12px; }
.voet nav { display: grid; gap: 8px; align-content: start; }
.voet nav a { color: rgba(243, 239, 231, 0.8); }
.voet p { max-width: 36ch; }
.voet .voet__onder { display: flex; }
@media (max-width: 1000px) { .voet .wrap.voet__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .voet .wrap.voet__grid { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) { .wizard__balk i, .wkaart, .catalogus .foto__lijst img { transition: none; } }

/* ══ v0.4 · LA FAMILIA EN EL SOFÁ Y LA LUZ DE LA MAÑANA (Maxim, 12-oct) ══
   "Use something more similar to the photo they have now" (mamá e hija en una
   sala soleada): de noche con lámpara a mañana con sol. El sol entra por la
   cortina de la izquierda; las sombras caen a la derecha. La pared sigue siendo
   el lienzo que se pinta, así que la luz se mezcla con cualquier color. */
.verf--auto .kamer__groep { aspect-ratio: 1515 / 823; }
.verf--auto .kamer__gezin { inset: 0; width: 100%; height: 100%; }
.verf--auto .kamer__vloer, .verf--auto .kamer__kader, .verf--auto .kamer__pendel, .verf--auto .kamer__gordijn, .verf--auto .kamer__tapijt, .verf--auto .kamer__salontafel { filter: none; }
.verf--auto .kamer__bank { filter: drop-shadow(18px 10px 18px rgba(60, 44, 26, 0.28)); }
.verf--auto.verf .k4 .kamer__bank, .verf--auto .k4 .kamer__bank { filter: drop-shadow(18px 10px 18px rgba(60, 44, 26, 0.28)); }
.verf--auto .kamer__kader, .verf--auto .k4 .kamer__kader { filter: drop-shadow(10px 12px 12px rgba(60, 44, 26, 0.26)); }
.verf--auto .kamer__avond, .verf--auto .kamer__gloed, .verf--auto .kamer__contact--tafel { display: none; }
/* los cuadros, sobre el respaldo del sofá nuevo (respaldo al 42 % de arriba, sofá centrado en el 46 %) */
@media (min-width: 861px) {
  .verf--auto .kamer__kader--a { left: 25%; bottom: 66%; width: 12%; }
  .verf--auto .kamer__kader--b { left: 40.5%; bottom: 66%; width: 24%; }
}
@media (max-width: 860px) {
  .verf--auto .kamer__kader--a { left: 19%; bottom: 66%; width: 18%; }
  .verf--auto .kamer__kader--b { left: 40%; bottom: 66%; width: 33%; }
}
.verf--auto .kamer__contact--bank { background:
  radial-gradient(33% 4% at 48% 96%, rgba(60, 44, 26, 0.42), rgba(60, 44, 26, 0) 70%),
  radial-gradient(7% 3% at 5% 97%, rgba(60, 44, 26, 0.42), rgba(60, 44, 26, 0) 70%),
  radial-gradient(5% 2.4% at 87% 97%, rgba(60, 44, 26, 0.45), rgba(60, 44, 26, 0) 70%); }
/* el sol: luz cálida desde la izquierda sobre la pared, y un parche en el piso */
.kamer__zon, .kamer__zonvlek { transition: opacity 1.4s var(--zacht); }
.kamer__zon { left: 0; top: 0; width: 100%; height: 100%; mix-blend-mode: screen;
  background:
    radial-gradient(60% 75% at 6% 30%, rgba(255, 238, 205, 0.55), rgba(255, 232, 192, 0.22) 45%, rgba(255, 232, 192, 0) 75%),
    linear-gradient(104deg, rgba(255, 240, 214, 0.22) 0%, rgba(255, 240, 214, 0.08) 38%, rgba(255, 240, 214, 0) 62%); }
.kamer__zonvlek { left: 4%; bottom: 0; width: 52%; height: 15%; mix-blend-mode: screen; transform: skewX(-38deg); transform-origin: 0 100%;
  background: linear-gradient(90deg, rgba(255, 226, 170, 0) 0%, rgba(255, 226, 170, 0.32) 25%, rgba(255, 226, 170, 0.22) 70%, rgba(255, 226, 170, 0) 100%); filter: blur(10px); }
.verf__scene.k1 .kamer__zon, .verf__scene.k1 .kamer__zonvlek { opacity: 1; }
/* el perro, en la alfombra, a la derecha, mirando hacia la familia */
.kamer__hond { right: 7%; bottom: 0.5%; width: 17%; height: auto; aspect-ratio: 893 / 760; transform: translateY(10%); transition: opacity 0.6s var(--zacht) 0.15s, transform 0.9s cubic-bezier(0.34, 1.4, 0.64, 1) 0.15s; filter: drop-shadow(14px 8px 12px rgba(60, 44, 26, 0.3)); }
.verf__scene.k4 .kamer__hond { opacity: 1; transform: none; }
@media (max-width: 860px) { .kamer__hond { right: 3%; width: 30%; } }
@media (prefers-reduced-motion: reduce) { .kamer__hond, .kamer__zon, .kamer__zonvlek { transition-duration: 0.01s !important; transition-delay: 0s !important; } }
/* la colgante sale de la portada de día: sobre la familia y los cuadros solo sumaba ruido */
.verf--auto .kamer > img.kamer__pendel { display: none; }
@media (min-width: 861px) { .kamer__hond { width: 15.5%; right: 8%; } }

/* v0.4.2 (Juan, 14-oct): en el celular la tarjeta del héroe tapaba demasiado la foto.
   Más chica: título y texto más cortos de alto, y los dos botones lado a lado y más bajos. */
@media (max-width: 860px) {
  .verf--auto .held { padding: 10px 10px 0; }
  .held__kaart { padding: 14px 16px 14px; background: rgba(251, 249, 244, 0.9); }
  .verf--auto .held h1 { font-size: 1.55rem; line-height: 1.1; }
  .verf--auto .held p { margin-top: 8px; font-size: 0.98rem; line-height: 1.45; }
  .verf--auto .held__acties { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .verf--auto .held__acties .knop { min-height: 44px; padding: 0.6em 0.7em; font-size: 0.92rem; white-space: normal; text-align: center; line-height: 1.2; }
  .verf--auto .held__acties .knop svg { width: 14px; height: 14px; }
  .held__ruimte { height: clamp(300px, 84vw, 380px); }
}
@media (max-width: 380px) { .verf--auto .held p { display: none; } }

.alleen-mobiel { display: none; }
@media (max-width: 860px) { .verf--auto .kort-weg { display: none; } .verf--auto .alleen-mobiel { display: inline; } .verf--auto .held__acties .knop { white-space: nowrap; } }

/* ══ v0.5 · LA PORTADA FOTOGRÁFICA (14-oct) ═══════════════════════════════
   Sin la pared que se pinta: una foto por color, cambia con un fundido.
   Escritorio: la foto a todo el ancho, la tarjeta y las muestras a la izquierda,
   sobre la pared vacía. Celular: la tarjeta arriba, la foto debajo y las muestras
   al final, sobre cal. */
.held-foto { position: relative; background: var(--kalk-2); }
.held-foto__scene { position: relative; height: calc(100svh - var(--kop-h)); min-height: 640px; max-height: 980px; overflow: hidden; }
.held-foto__beeld { position: absolute; inset: 0; background: var(--kalk-2); }
.held-foto__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 55%; opacity: 0; transition: opacity 0.7s var(--zacht); }
.held-foto__img.is-aan { opacity: 1; }
.held-foto__label { position: absolute; right: clamp(14px, 3vw, 40px); bottom: 14px; z-index: 2; color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); font-size: 0.62rem; }
.held-foto__kaart { position: absolute; z-index: 3; top: clamp(20px, 4vh, 48px); left: clamp(16px, 4vw, 56px); width: min(520px, calc(100% - 32px));
  background: rgba(251, 249, 244, 0.93); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); padding: clamp(22px, 2.6vw, 34px);
  box-shadow: 0 0 0 1px var(--lijn), 0 24px 48px -28px rgba(31, 30, 27, 0.45); }
.held-foto__kaart h1 { font-size: clamp(2.1rem, 3.3vw, 3.1rem); font-weight: 300; line-height: 1.08; }
.held-foto__kaart h1 em { color: var(--olijf); }
.held-foto__kaart p { margin-top: 14px; font-size: 1.12rem; color: var(--grijs); }
.held-foto__kaart .held__acties { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 12px; }
.held-foto__kaart .held__acties .knop { flex: 1 1 auto; white-space: nowrap; }
.held-foto__ruimte { display: none; }
.held-foto__waaier { position: absolute; z-index: 3; left: clamp(16px, 4vw, 56px); bottom: clamp(20px, 4vh, 44px); width: min(520px, calc(100% - 32px)); margin: 0; }
.held-foto__waaier .waaier__stalen { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.held-foto__waaier .waaier__stalen i { max-width: 52px; }
.held-foto .alleen-mobiel { display: none; }
@media (max-width: 860px) {
  .held-foto__scene { height: auto; min-height: 0; max-height: none; padding: 10px 10px 0; }
  .held-foto__img { object-position: 68% 60%; }
  .held-foto__kaart { position: relative; top: auto; left: auto; width: auto; padding: 14px 16px; background: rgba(251, 249, 244, 0.9); }
  .held-foto__kaart h1 { font-size: 1.55rem; line-height: 1.1; }
  .held-foto__kaart p { margin-top: 8px; font-size: 0.98rem; line-height: 1.45; }
  .held-foto__kaart .held__acties { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .held-foto__kaart .held__acties .knop { min-height: 44px; padding: 0.6em 0.7em; font-size: 0.92rem; }
  .held-foto__kaart .held__acties .knop svg { width: 14px; height: 14px; }
  .held-foto .kort-weg { display: none; }
  .held-foto .alleen-mobiel { display: inline; }
  .held-foto__ruimte { display: block; height: clamp(260px, 72vw, 420px); }
  .held-foto__waaier { position: static; width: auto; padding: 16px 16px 18px; background: var(--kalk); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 -1px 0 var(--lijn); }
  .held-foto__waaier .waaier__stalen { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
  .held-foto__waaier .waaier__stalen i { max-width: 40px; }
  .held-foto__waaier .waaier__stalen button { font-size: 0.85rem; }
}
@media (max-width: 380px) { .held-foto__kaart p { display: none; } }
@media (prefers-reduced-motion: reduce) { .held-foto__img { transition: none; } }
/* v0.5: en el celular la tarjeta ya no va encima de la foto (tapaba las caras):
   tarjeta compacta arriba, la foto entera debajo, y las muestras al final. */
@media (max-width: 860px) {
  .held-foto__scene { display: flex; flex-direction: column; padding: 0; background: var(--kalk); }
  .held-foto__kaart { order: 1; margin: 0; background: var(--kalk); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 14px 16px 16px; }
  .held-foto__beeld { order: 2; position: relative; inset: auto; aspect-ratio: 4 / 3.3; }
  .held-foto__img { object-position: 66% 42%; }
  .held-foto__ruimte { display: none; }
}
@media (min-width: 600px) and (max-width: 860px) { .held-foto__beeld { aspect-ratio: 16 / 10; } }

/* ══ v1.0 · la portada fija (14-oct): mamá e hija eligen el color con las muestras A4 ══
   La pared vacía queda arriba a la izquierda: ahí va la tarjeta, angosta,
   para no tapar al perro ni a la familia. */
@media (min-width: 861px) {
  .held-foto__kaart { width: min(470px, calc(100% - 32px)); }
  .held-foto__kaart h1 { font-size: clamp(2rem, 3vw, 2.8rem); }
  .held-foto__img { object-position: 50% 45%; }
}
@media (max-width: 860px) {
  .held-foto__beeld { aspect-ratio: 4 / 3.2; }
  .held-foto__img { object-position: 64% 50%; }
}

/* v1.0: el color, dentro del formulario (muestras A4) */
.vraag__uitleg { margin: -8px 0 18px; color: var(--grijs); font-size: 1.02rem; }
.tegels--stalen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tegel--staal > span { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 10px; padding: 16px 10px 14px; min-height: 0 !important; }
.tegel--staal i { display: block; position: relative; width: 56px; aspect-ratio: 210 / 297; background: var(--k); box-shadow: 0 0 0 1px rgba(31, 30, 27, 0.12), 0 8px 14px -10px rgba(31, 30, 27, 0.6); }
.tegel--staal i::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 20%; background: #FBF9F4; }
.tegel--advies { grid-column: 1 / -1; }
.tegel--advies > span { grid-template-columns: 1fr; min-height: 64px !important; }
@media (max-width: 860px) { .tegels.tegels--stalen { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tegel--staal i { width: 46px; } }

/* v1.0: privacidad y condiciones — texto largo, cómodo de leer */
.juridisch { background: var(--kalk); }
.juridisch__tekst { max-width: 760px; margin-left: max(24px, (100% - 1200px) / 2); }
.juridisch__tekst h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); margin-top: 40px; }
.juridisch__tekst p, .juridisch__tekst li { font-size: 1.08rem; }
.juridisch__tekst p { margin-top: 12px; }
.juridisch__tekst ul { margin: 12px 0 0 1.2em; display: grid; gap: 8px; }
.juridisch__tekst ul ul { margin-top: 8px; }
.tekstknop { padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 0.22em; cursor: pointer; }
.voet__juridisch { display: inline-flex; flex-wrap: wrap; gap: 6px 18px; }
.voet__juridisch a, .voet__juridisch .tekstknop { color: rgba(243, 239, 231, 0.75); }
.voet__juridisch .tekstknop { text-decoration: none; }
.voet__juridisch .tekstknop:hover { color: var(--kalk); text-decoration: underline; }
/* v1.0: en el celular "Volgende" siempre va primero y a todo el ancho (también cuando todavía no es el envío) */
@media (max-width: 860px) { .wizard .knoppen #wzVerder { flex: 1 1 100%; order: -1; margin-left: 0; } }
@media (min-width: 861px) { .wizard .knoppen #wzVerder { margin-left: auto; } }

/* ══ v1.1 · /kleuradvies: LA SALA QUE SE PINTA, CON LA LUZ DEL DÍA (Juan, 14-oct) ══
   Es la portada v0.4 (mismas clases: .verf--auto) dentro de una subpágina, con un
   botón más: el momento del día. Escritorio: la tarjeta y las muestras a la
   izquierda, sobre la pared; la sala a la derecha. Celular: la tarjeta arriba, la
   sala en medio, las muestras y los momentos abajo, sobre cal. */
.verf--kleur { border-top: 1px solid var(--lijn); }
.verf--kleur .verf__scene { height: min(calc(100svh - var(--kop-h)), 900px); min-height: 700px; }
.verf--kleur .held h2 { font-size: clamp(1.9rem, 2.8vw, 2.6rem); font-weight: 300; line-height: 1.1; }
.verf--kleur .held h2 em { color: var(--olijf); }
.verf--kleur .held p { margin-top: 12px; font-size: 1.06rem; color: var(--grijs); max-width: none; }
.verf--kleur .momenten { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--lijn); display: flex; flex-wrap: wrap; gap: 8px; }
.verf--kleur .momenten .waaier__label { width: 100%; margin-bottom: 2px; }
.verf--kleur .momenten button { min-height: 46px; padding: 0 16px; font-size: 1rem; }

/* la luz del momento (solo con la sala puesta: k1 trae el sol, k4 todo lo demás) */
.verf--kleur .kamer__zon, .verf--kleur .kamer__zonvlek, .kamer__dag, .kamer__nacht, .kamer__lampgloed { transition: opacity 1.2s var(--zacht); }
.verf--kleur .verf__scene[data-licht="middag"] .kamer__zon, .verf--kleur .verf__scene[data-licht="middag"] .kamer__zonvlek,
.verf--kleur .verf__scene[data-licht="avond"] .kamer__zon, .verf--kleur .verf__scene[data-licht="avond"] .kamer__zonvlek { opacity: 0; }
/* mediodía: luz pareja y neutra desde arriba, sin sol que entre de lado */
.kamer__dag { inset: 0; mix-blend-mode: screen; background: linear-gradient(180deg, rgba(250, 250, 246, 0.26) 0%, rgba(250, 250, 246, 0.1) 55%, rgba(250, 250, 246, 0.03) 100%); }
.verf--kleur .verf__scene.k1[data-licht="middag"] .kamer__dag { opacity: 1; }
/* noche: la lámpara de la foto (a la derecha del sofá, 93 % / 34 % de la imagen) es la única luz.
   La segunda .kamer__groep está en el mismo sitio que la del sofá, así que el centro cae en la pantalla. */
.kamer__groep--licht { pointer-events: none; }
.kamer__nacht, .kamer__lampgloed { left: 93%; top: 36%; transform: translate(-50%, -50%); border-radius: 50%; }
.kamer__nacht { width: 300vmax; height: 300vmax; mix-blend-mode: multiply;
  background: radial-gradient(closest-side, rgb(255, 250, 240) 0%, rgb(238, 224, 204) 3%, rgb(196, 178, 156) 10%, rgb(142, 126, 110) 22%, rgb(108, 96, 86) 40%); }
.kamer__lampgloed { width: 120vmax; height: 120vmax; mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgba(255, 212, 152, 0.72) 0%, rgba(255, 198, 130, 0.38) 7%, rgba(255, 188, 118, 0.15) 20%, rgba(255, 180, 110, 0.04) 36%, rgba(255, 180, 110, 0) 54%); }
.verf--kleur .verf__scene.k4[data-licht="avond"] .kamer__nacht { opacity: 0.85; }
.verf--kleur .verf__scene.k4[data-licht="avond"] .kamer__lampgloed { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .kamer__dag, .kamer__nacht, .kamer__lampgloed { transition-duration: 0.01s !important; } }

@media (max-width: 860px) {
  .verf--kleur .verf__scene { height: auto; min-height: 0; }
  .verf--kleur .held h2 { font-size: 1.55rem; }
  .verf--kleur .held p { margin-top: 8px; font-size: 0.98rem; line-height: 1.45; }
  .verf--kleur .momenten button { flex: 1 1 0; padding: 0 10px; }
}
@media (max-width: 380px) { .verf--kleur .held p { display: block; } }
/* iPad vertical: más alto para la sala y el sofá un poco más chico, para que la tarjeta no tape las caras */
@media (min-width: 600px) and (max-width: 860px) {
  .verf--kleur .held__ruimte { height: clamp(440px, 64vw, 560px); }
  .verf--kleur .kamer__groep { left: 1%; width: 98%; }
  .verf--kleur .kamer__hond { width: 21%; right: 4%; }
  .verf--kleur .kamer__salontafel { left: 33%; width: 33%; }
}

/* ══ v1.2 · LAS FOTOS DE OBRA DE MAXIM (14-oct) ═════════════════════════
   /buitenschilderwerk: la misma fachada antes y después, lado a lado y en el
   mismo recorte (son dos ángulos distintos: un deslizador no alinearía).
   /kleuradvies: la fila de colores reales necesita su aire arriba. */
.voorna { background: var(--kalk-2); }
.voorna__paar { margin-top: clamp(24px, 3vw, 40px); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 2vw, 28px); }
.voorna__paar figure { position: relative; margin: 0; overflow: hidden; aspect-ratio: 1; background: var(--kalk); box-shadow: 0 24px 48px -32px rgba(31, 30, 27, 0.55); }
.voorna__paar img { width: 100%; height: 100%; object-fit: cover; }
.voorna__paar .label { position: absolute; left: 12px; top: 12px; padding: 6px 10px; background: rgba(251, 249, 244, 0.92); color: var(--inkt); }
@media (max-width: 600px) { .voorna__paar { grid-template-columns: 1fr; } .voorna__paar figure { aspect-ratio: 4 / 3; } }
.werven.werven--los { padding-top: clamp(56px, 8vw, 110px); }

/* ══ v1.3 · EL ENVÍO AL CRM (18-oct) ══════════════════════════════════════
   .pot: el campo trampa para robots (una persona no lo ve ni lo alcanza con Tab).
   .nood: si el CRM no contestó, se dice y se ofrecen las dos salidas que siempre funcionan. */
.pot { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.nood { margin-top: 14px; padding: 16px 18px; background: #FBF3E6; box-shadow: inset 0 0 0 1.5px #C9A55C; color: var(--inkt); }
.nood p { margin: 0; font-size: 1.02rem; line-height: 1.5; }
.nood__knoppen { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 10px; }
.nood__knoppen .knop { flex: 1 1 200px; justify-content: center; }
button[disabled] { opacity: 0.7; cursor: progress; }

/* ══ v1.4 (19-oct): el copy del cliente ══════════════════════════════════
   Línea chica bajo los botones de la portada, intro de los servicios, el bloque
   voor/na con su botón, la foto fija de "Verf en afwerking", la nota de Google,
   los seis pasos de /binnenschilderwerk y el bloque "Goede verf herken je…". */
.held-foto__kaart .held-foto__klein { margin-top: 12px; font-size: 0.95rem; color: var(--grijs); }
.wegwijzer__intro { max-width: 62ch; margin-top: 14px; font-size: 1.12rem; color: var(--grijs); }
.echt__kop .echt__vraag { margin-top: 18px; }
.echt__kop .knop { margin-top: 18px; }
.echt__kop p.stil { margin-top: 14px; font-size: 0.98rem; }
.kwaliteit__foto { margin: 0; }
.kwaliteit__foto img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; box-shadow: 0 24px 48px -30px rgba(31, 30, 27, 0.5); }
.kwaliteit p.stil { margin-top: 16px; font-size: 0.98rem; }
.op-touch { display: none; }
@media (hover: none) { .op-muis { display: none; } .op-touch { display: inline; } }
.google-score { display: inline-flex; align-items: center; gap: 14px; margin-top: 26px; padding: 14px 18px; background: rgba(251, 249, 244, 0.7); box-shadow: inset 0 0 0 1px var(--lijn); color: var(--inkt); text-decoration: none; transition: box-shadow 0.3s var(--zacht); }
.google-score:hover, .google-score:focus-visible { box-shadow: inset 0 0 0 1.5px var(--olijf); }
.google-score__cijfer { font-family: var(--serif); font-size: 2.6rem; line-height: 1; }
.google-score__rest { display: grid; gap: 4px; }
.google-score__rest > span:last-child { color: var(--grijs); font-size: 0.95rem; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--lijn); }
.werkwijze__intro { max-width: 62ch; margin-top: 14px; font-size: 1.12rem; color: var(--grijs); }
.stappen--zes { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: clamp(28px, 3.4vw, 44px); }
@media (max-width: 1000px) { .stappen--zes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .stappen--zes { grid-template-columns: 1fr; } }
.held__kaart .held__boven { display: block; margin-bottom: 10px; color: var(--olijf); }
.verf__bijschrift { margin: 0 auto; max-width: none; padding-block: 12px 4px; font-size: 0.86rem; color: var(--grijs); text-align: right; }
@media (max-width: 860px) { .verf__bijschrift { text-align: left; } }
.verfkennis__kop { max-width: 780px; }
.verfkennis__kop p { margin-top: 14px; font-size: 1.12rem; color: var(--grijs); }
.verfkennis__vakken { margin-top: clamp(28px, 4vw, 48px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); }
.verfkennis__vakken > div { padding-top: 18px; border-top: 2px solid var(--inkt); }
.verfkennis__vakken h3 { font-size: 1.45rem; }
.verfkennis__vakken p { margin-top: 10px; color: var(--grijs); }
.verfkennis__slot { margin-top: clamp(28px, 4vw, 44px); font-family: var(--serif); font-size: 1.35rem; line-height: 1.35; max-width: 46ch; }
@media (max-width: 860px) { .verfkennis__vakken { grid-template-columns: 1fr; } .held-foto__kaart .held-foto__klein { margin-top: 8px; font-size: 0.86rem; } }

/* ══ v1.5 (19-oct): la sala sin personas, después de la revisión del cliente ══════
   (1) Las sombras de contacto siguen los muebles de interieur.webp: debajo del sofá,
       de la maceta y del pie de la lámpara. La de 87 %/97 % era del pie de la lámpara
       de gezin.webp y quedaba como una mancha suelta en el piso.
   (2) En el celular la sala cabe entera (sin cortar el olivo ni la lámpara) y los
       cuadros quedan entre el olivo y la lámpara, debajo de la tarjeta. */
.verf--auto .kamer__contact--bank { background:
  radial-gradient(30% 3.4% at 45% 91.5%, rgba(60, 44, 26, 0.42), rgba(60, 44, 26, 0) 70%),
  radial-gradient(6% 2.4% at 5.5% 91%, rgba(60, 44, 26, 0.4), rgba(60, 44, 26, 0) 70%),
  radial-gradient(4% 1.6% at 93% 90.5%, rgba(60, 44, 26, 0.4), rgba(60, 44, 26, 0) 70%); }
@media (max-width: 599px) {
  .verf--kleur .kamer__groep { left: 0; width: 100%; bottom: 8%; }
  .verf--kleur .kamer__kader--a { left: 25%; bottom: 60%; width: 14%; }
  .verf--kleur .kamer__kader--b { left: 42%; bottom: 60%; width: 27%; }
  .verf--kleur .kamer__salontafel { left: 34%; width: 34%; bottom: -4%; }
  .verf--kleur .kamer__tapijt { left: -6%; width: 112%; height: 13%; bottom: -1%; }
}
/* v1.5: voor/na de pie (dos fotos verticales) en la columna derecha del bloque "echt" del home */
.voorna__paar--staand { margin-top: 0; align-self: center; }
.voorna__paar--staand figure { aspect-ratio: 3 / 4; }
@media (max-width: 600px) { .voorna__paar--staand { grid-template-columns: 1fr 1fr; gap: 10px; } .voorna__paar--staand figure { aspect-ratio: 3 / 4; } }
.echt .wrap.echt__grid:has(.voorna__paar) { grid-template-columns: minmax(0, 1fr) minmax(0, 580px); }
@media (max-width: 860px) { .echt .wrap.echt__grid:has(.voorna__paar) { grid-template-columns: 1fr; } }

/* ══ v1.6 (19-oct): LA PORTADA PARTIDA ═══════════════════════════════════
   La foto nueva es cuadrada (1024 px): a todo lo ancho quedaría blanda, así que
   va a la derecha, del tamaño en que se ve nítida. En el celular, debajo del texto. */
.held-split { background: var(--kalk); }
.held-split__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; padding-block: clamp(28px, 5vh, 64px); min-height: min(calc(100svh - var(--kop-h)), 860px); }
.held-split__tekst h1 { font-size: clamp(2.3rem, 3.6vw, 3.5rem); font-weight: 300; line-height: 1.06; }
.held-split__tekst h1 em { color: var(--olijf); }
.held-split__tekst > p { margin-top: 18px; font-size: 1.15rem; color: var(--grijs); max-width: 54ch; }
.held-split .held__acties { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; }
.held-split .held__acties .knop { white-space: nowrap; }
.held-split__tekst .held-split__klein { margin-top: 14px; font-size: 0.95rem; }
.held-split__foto { margin: 0; justify-self: end; width: 100%; max-width: 640px; }
.held-split__foto img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; box-shadow: 0 30px 60px -36px rgba(31, 30, 27, 0.55); }
.held-split .alleen-mobiel { display: none; }
@media (max-width: 860px) {
  .held-split__grid { grid-template-columns: 1fr; min-height: 0; gap: 18px; padding-block: 16px 0; }
  .held-split__tekst h1 { font-size: 1.7rem; line-height: 1.1; }
  .held-split__tekst > p { margin-top: 10px; font-size: 1rem; line-height: 1.45; }
  .held-split .held__acties { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .held-split .held__acties .knop { min-height: 46px; padding: 0.6em 0.7em; font-size: 0.95rem; justify-content: center; }
  .held-split .kort-weg { display: none; }
  .held-split .alleen-mobiel { display: inline; }
  .held-split__tekst .held-split__klein { margin-top: 10px; font-size: 0.88rem; }
  .held-split__foto { justify-self: stretch; max-width: none; margin-inline: -24px; width: auto; }
  .held-split__foto img { box-shadow: none; }
}