/* Deán Funes 488 · styles */
body{margin:0;background:#F4F1EA}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
a{color:#1C1C1A}a:hover{color:#5B5952}
button,input{font-family:inherit}
.b-nav{display:flex}
.b-hide{display:inline-flex}
.b-gal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width: 900px){.b-gal{grid-template-columns:repeat(2,minmax(0,1fr))}}
.b-tri{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px}
@media (max-width: 720px){.b-tri{grid-template-columns:1fr}.b-tri-side{display:none}}
@media (max-width: 1020px){.b-nav{display:none}.b-hide{display:none}}
.b-pulse{animation:bpulse 2.4s ease-out infinite}
@keyframes bpulse{0%{transform:scale(.6);opacity:1}100%{transform:scale(1.7);opacity:0}}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}.b-pulse{animation:none}}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- site additions ---------- */
:root { --accent: #9A7642; }
[hidden] { display: none !important; }
img { max-width: 100%; }

/* 3D bathroom */
.b3d-frame { flex: 1.25 1 520px; min-width: 0; position: relative; aspect-ratio: 694 / 700; max-height: 720px; overflow: hidden; background: #111312; }
.b3d { position: absolute; inset: 0; }
.b3d-area { position: absolute; inset: 0; }
.b3d-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.b3d.is-live .b3d-poster, .b3d.is-live .b3d-start { display: none; }
.b3d-stage { position: absolute; inset: 0; }
.b3d-stage canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; touch-action: none; cursor: grab; }
.b3d-stage canvas:active { cursor: grabbing; }
.b3d-stage .labels { position: absolute !important; inset: 0; pointer-events: none; }
.b3d-stage .labels .tag { display: none; }
.b3d-chip { position: absolute; left: 16px; top: 16px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; background: #1C1C1A; color: #D2B47E; font-size: 10.5px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; pointer-events: none; }
.b3d-dot { width: 7px; height: 7px; border-radius: 99px; background: #D2B47E; }
.b3d-hint { position: absolute; right: 16px; top: 16px; z-index: 3; padding: 6px 10px; background: rgba(21,24,23,0.72); color: rgba(244,241,234,0.85); font-size: 11.5px; letter-spacing: 0.04em; pointer-events: none; }
.b3d-start { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 24px; border: 0; background: rgba(244,241,234,0.94); color: #1C1C1A; font-family: 'Jost', system-ui, sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; box-shadow: 0 10px 30px rgba(0,0,0,0.35); white-space: nowrap; }
.b3d-start:hover { background: #FFFFFF; }
.b3d.is-loading .b3d-start { cursor: progress; }
.b3d-msg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 4; width: min(360px, 86%); margin: 0; padding: 14px 16px; background: #1C1C1A; color: #F4F1EA; font-size: 14px; line-height: 1.5; text-align: center; }
.b3d-views { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 3; display: flex; flex-wrap: wrap; gap: 6px; }
.b3d-view { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; font-family: 'Jost', system-ui, sans-serif; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; background: rgba(21,24,23,0.72); color: rgba(244,241,234,0.86); border: 1px solid rgba(244,241,234,0.22); cursor: pointer; }
.b3d-view:hover { border-color: rgba(244,241,234,0.6); }
.b3d-view[aria-pressed="true"] { background: #F4F1EA; color: #1C1C1A; border-color: #F4F1EA; }
@media (max-width: 720px) {
  /* mobile: view buttons sit in a bar below the model instead of covering it */
  .b3d-frame { aspect-ratio: auto; max-height: none; }
  .b3d { position: relative; inset: auto; display: flex; flex-direction: column; }
  .b3d-area { position: relative; inset: auto; aspect-ratio: 1 / 1; }
  .b3d-views { position: static; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 12px 12px 14px; background: #151817; }
  .b3d-view { justify-content: center; min-height: 38px; padding: 0 6px; font-size: 10.5px; letter-spacing: 0.1em; }
  .b3d-chip { left: 12px; top: 12px; padding: 6px 10px; font-size: 9.5px; letter-spacing: 0.16em; }
  .b3d-hint { display: none; }
  .b3d-start { padding: 0 18px; letter-spacing: 0.14em; }
}

/* neighbourhood map (Leaflet + OpenStreetMap) */
#mapa.leaflet-container { background: #E2DCD0; font-family: 'Jost', system-ui, sans-serif; }
#mapa .leaflet-tile-pane { filter: grayscale(1) sepia(0.18) contrast(0.92) brightness(1.04); }
#mapa .leaflet-control-attribution { font-size: 10px; }
.mk span { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 999px; background: #1C1C1A; color: #F4F1EA; font-family: 'Instrument Serif', serif; font-size: 17px; line-height: 1; border: 2px solid #F4F1EA; box-shadow: 0 2px 6px rgba(0,0,0,0.3); transition: transform 0.15s ease; cursor: pointer; }
.mk.is-on span { background: var(--accent); transform: scale(1.2); box-shadow: 0 0 0 4px rgba(28,28,26,0.85); }
.mk-home { display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.mk-home-label { background: #1C1C1A; color: #F4F1EA; font-size: 10.5px; font-weight: 500; letter-spacing: 0.2em; padding: 6px 10px; white-space: nowrap; margin-bottom: 8px; }
.mk-home-dot { width: 16px; height: 16px; background: var(--accent); border: 2px solid #1C1C1A; transform: rotate(45deg); }
.mapa-error { position: absolute; left: 16px; right: 16px; top: 50%; transform: translateY(-50%); margin: 0; padding: 16px; background: #F4F1EA; color: #1C1C1A; text-align: center; }
@media (prefers-reduced-motion: reduce) { .mk span { transition: none; } }

/* header on small screens */
section[id] { scroll-margin-top: 84px; }
@media (max-width: 640px) {
  .b-head { grid-template-columns: minmax(0, 1fr) auto !important; gap: 12px !important; padding: 10px 16px !important; }
  .b-brand { grid-column: 1 !important; align-items: flex-start !important; }
  .b-brand span:first-child { font-size: 24px !important; }
  .b-brand span:last-child { font-size: 9.5px !important; letter-spacing: 0.26em !important; }
  .b-cta-wrap { grid-column: 2 !important; }
  .b-cta { min-height: 40px !important; padding: 0 14px !important; font-size: 11px !important; letter-spacing: 0.12em !important; }
}

/* responsive images */
picture { display: contents; }

/* before/after: on phones the proposal is shown large and the "before" photo as a stamp; tap swaps */
.b-cmp-swap { display: none; }
@media (max-width: 720px) {
  .b-cmp { position: relative; grid-template-columns: minmax(0, 1fr) !important; }
  .b-cmp-after { order: -1; }
  .b-cmp-before, .b-cmp.is-swap .b-cmp-after { position: absolute; z-index: 4; top: 12px; right: 12px; width: 36%; }
  .b-cmp-before figcaption, .b-cmp.is-swap .b-cmp-after figcaption { display: none !important; }
  .b-cmp-before > div, .b-cmp.is-swap .b-cmp-after > div { border: 3px solid #F4F1EA; box-shadow: 0 8px 22px rgba(0,0,0,0.35); }
  .b-cmp-before > div > span, .b-cmp.is-swap .b-cmp-after > div > a { display: none; }
  .b-cmp-before .b-cmp-swap, .b-cmp.is-swap .b-cmp-after .b-cmp-swap { display: flex; }
  .b-cmp.is-swap .b-cmp-before { position: static; width: auto; order: -1; }
  .b-cmp.is-swap .b-cmp-before figcaption { display: flex !important; }
  .b-cmp.is-swap .b-cmp-before > div { border: 0; box-shadow: none; }
  .b-cmp.is-swap .b-cmp-before > div > span { display: inline; }
  .b-cmp.is-swap .b-cmp-before .b-cmp-swap { display: none; }
  .b-cmp.is-swap .b-cmp-after { order: 0; }
}
.b-cmp-swap { position: absolute; inset: 0; z-index: 3; align-items: flex-end; justify-content: flex-start; border: 0; padding: 0; background: transparent; cursor: pointer; }
.b-cmp-tag { margin: 6px; padding: 4px 7px; background: #1C1C1A; color: #F4F1EA; font-family: 'Jost', system-ui, sans-serif; font-size: 9.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; }
.b-cmp figcaption > span:last-child { white-space: nowrap; }