/* ═══════════════════════════════════════════════
   Golden General Works — sistema visual
   Minimalista · negro piedra · marfil · oro
   Breakpoints: 1024px (tablet) · 680px (celular)
   ═══════════════════════════════════════════════ */
:root {
  --ink: #0b0a09;
  --ink-2: #111010;
  --ink-3: #1a1816;
  --ivory: #f2eee7;
  --paper: #f1ede6;
  --text: #d9d3c9;
  --mute: #9a9286;
  --mute-ink: #5c554b;
  --line: rgba(242, 238, 231, 0.1);
  --line-2: rgba(242, 238, 231, 0.18);
  --line-ink: rgba(11, 10, 9, 0.12);
  --gold: #c6a052;
  --gold-hi: #e3c98c;
  --gold-lo: #8a6a2c;
  --serif: "Cormorant Garamond", Georgia, serif;
  --display: "Cinzel", "Cormorant Garamond", serif;
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-io: cubic-bezier(0.76, 0, 0.24, 1);
  --pad: clamp(20px, 4.4vw, 64px);
  --max: 1360px;
  --nav-h: 72px;
  --sec: clamp(88px, 11vw, 168px);
  --gap: clamp(24px, 4vw, 72px);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }
body {
  margin: 0; background: var(--ink); color: var(--ivory);
  font: 400 16px/1.7 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img, video, canvas, svg { display: block; max-width: 100%; }
picture { display: block; background: var(--ph, var(--ink-3)); overflow: hidden; }
picture img { width: 100%; height: 100%; object-fit: cover; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; }
p { margin: 0 0 1em; }
::selection { background: var(--gold); color: var(--ink); }
:focus-visible { outline: 1px solid var(--gold-hi); outline-offset: 4px; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.section { padding: var(--sec) 0; position: relative; }
.center { text-align: center; }
.muted { color: var(--mute); }
.small { font-size: 0.86rem; }
.mt { margin-top: 2.4em; }
.span2 { grid-column: 1 / -1; }
.sr-only, .hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--gold); color: var(--ink); padding: 10px 16px; }
.skip:focus { top: 12px; }

/* ── tipografía ── */
.eyebrow { display: block; font: 500 0.7rem/1.4 var(--sans); letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.2em; }
.h1 { font: 500 clamp(2.5rem, 5.2vw, 4.4rem)/1.04 var(--serif); letter-spacing: -0.012em; margin-bottom: 0.45em; }
.h2 { font: 500 clamp(2.1rem, 4vw, 3.5rem)/1.06 var(--serif); letter-spacing: -0.01em; margin-bottom: 0.5em; text-wrap: balance; }
.h1 em, .h2 em { font-style: italic; color: var(--gold-hi); }
.lead { font-size: clamp(1rem, 1.15vw, 1.13rem); color: var(--text); max-width: 54ch; }
.link-gold { color: var(--gold-hi); background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size 0.4s var(--ease); }
.link-gold:hover { background-size: 0 1px; background-position: 100% 100%; }
.sec-head { max-width: 720px; margin-bottom: clamp(44px, 6vw, 80px); }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head.center .lead { margin-inline: auto; }
.split-head { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); align-items: end; }
.split-head .lead { margin: 0 0 0.6em; justify-self: end; }
.split-head .h2 { margin: 0; }
@media (max-width: 1024px) { .split-head { grid-template-columns: minmax(0, 1fr); gap: 18px; } .split-head .lead { justify-self: start; } }

/* ── botones ── */
.btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2em; }
.btns.center { justify-content: center; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px;
  border: 1px solid transparent; border-radius: 2px; background: none;
  font: 600 0.74rem var(--sans); letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.btn-gold { background: var(--gold); color: #16110a; }
.btn-gold:hover { background: var(--gold-hi); }
.btn-ghost { border-color: var(--line-2); color: var(--ivory); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-hi); }
.btn-sm { min-height: 40px; padding: 0 18px; font-size: 0.68rem; }
.btn-lg { min-height: 58px; padding: 0 36px; }
.btn:disabled { opacity: 0.55; cursor: wait; }
.linklike { background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; color: var(--mute); font-size: 0.85rem; }
@media (max-width: 480px) { .btns .btn { flex: 1 1 100%; } }

/* ── navegación ── */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 var(--pad);
  transition: background-color 0.5s, transform 0.6s var(--ease), border-color 0.5s; border-bottom: 1px solid transparent;
}
.nav.is-solid { background: rgba(11, 10, 9, 0.86); backdrop-filter: blur(14px); border-color: var(--line); }
.nav.is-hidden { transform: translateY(-100%); }
.lockup { display: grid; line-height: 1; }
.lockup-g { font: 600 1.32rem/1 var(--display); letter-spacing: 0.18em; color: var(--gold); }
.lockup-s { font: 500 0.52rem/1 var(--sans); letter-spacing: 0.5em; color: var(--ivory); margin-top: 6px; }
.nav-links { display: flex; gap: clamp(20px, 2.4vw, 36px); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; }
.nav-links a { position: relative; padding: 8px 0; color: var(--text); transition: color 0.3s; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform 0.45s var(--ease); }
.nav-links a:hover { color: var(--ivory); }
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-cta { display: flex; align-items: center; gap: 20px; }
.nav-phone { font-size: 0.82rem; letter-spacing: 0.06em; color: var(--text); }
.nav-burger { display: none; width: 44px; height: 44px; border: 0; background: none; position: relative; }
.nav-burger span { position: absolute; left: 10px; right: 10px; height: 1.5px; background: var(--ivory); transition: transform 0.4s var(--ease); }
.nav-burger span:first-child { top: 18px; } .nav-burger span:last-child { top: 25px; }
.nav-burger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.mnav { position: fixed; inset: 0; z-index: 45; background: var(--ink); display: grid; align-content: center; padding: var(--nav-h) var(--pad) 40px; animation: fade 0.4s var(--ease); }
.mnav nav { display: grid; gap: 6px; }
.mnav nav a { font: 500 clamp(2rem, 9vw, 2.6rem)/1.25 var(--serif); }
.mnav-foot { display: grid; gap: 10px; margin-top: 40px; color: var(--gold-hi); font-size: 0.95rem; }
@keyframes fade { from { opacity: 0; } }
@media (max-width: 1100px) { .nav-links, .nav-phone { display: none; } .nav-burger { display: block; } }
@media (max-width: 560px) { .nav-cta .btn { display: none; } }

/* ═════════ HERO · The Slab Reveal ═════════ */
.hero { position: relative; height: 165vh; }
.hero-stick { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; }
.hero-gl, .hero-vignette { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-gl { background: radial-gradient(110% 90% at 70% 40%, #1b1712, #0b0a09); }
.hero-vignette { pointer-events: none; background: radial-gradient(90% 85% at 60% 50%, transparent 35%, rgba(6, 5, 4, 0.8)), linear-gradient(90deg, rgba(8, 7, 6, 0.86) 0%, rgba(8, 7, 6, 0.45) 42%, transparent 64%); }
.hero-layout { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; pointer-events: none; }
.hero-copy { max-width: min(600px, 48%); pointer-events: auto; opacity: var(--copy-o, 1); transform: translate3d(var(--copy-x, 0px), var(--copy-y, 0px), 0); will-change: transform, opacity; }
.hero-h1 { font: 500 clamp(3rem, 6.2vw, 6.2rem)/0.98 var(--serif); letter-spacing: -0.02em; margin-bottom: 0.4em; }
.hero-h1 .line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.hero-h1 .line > * { display: block; }
.hero-h1 em { font-style: italic; color: var(--gold-hi); }
.h1-kicker { display: block; font: 500 0.72rem/1.7 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); margin-bottom: 2em; max-width: 42ch; }
.hero-sub { color: var(--text); font-size: clamp(1rem, 1.15vw, 1.1rem); max-width: 44ch; margin: 0; }

.hero-arch { --aw: min(29vw, 52svh); --ah: calc(var(--aw) * 1.42); position: absolute; z-index: 2; left: 73%; top: 52%; width: var(--aw); margin: 0; transform: translate(-50%, -50%) scale(var(--as, 1)); }
.arch-tilt { position: relative; transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; transition: transform 0.25s linear; }
.arch-window { position: relative; width: var(--aw); height: var(--ah); overflow: hidden; border-radius: calc(var(--aw) / 2) calc(var(--aw) / 2) 3px 3px; background: #15130f; box-shadow: 0 50px 120px -30px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(227, 201, 140, calc(0.3 + var(--trace, 0) * 0.3)), 0 0 60px -10px rgba(198, 160, 82, 0.25); perspective: 900px; clip-path: inset(calc((1 - var(--enter, 0)) * 100%) 0 0 0 round calc(var(--aw) / 2) calc(var(--aw) / 2) 3px 3px); transition: clip-path 1.4s var(--ease) 0.5s; }
.is-ready .arch-window { --enter: 1; }
.hero-slides, .slide { position: absolute; inset: 0; }
.slide { opacity: 0; transition: opacity 1.2s var(--ease); }
.slide picture { height: 100%; transform: scale(calc(1.16 - var(--open, 0) * 0.14)); }
.slide.is-on { opacity: 1; }
.slide:first-child img { object-position: 30% center; }
.is-cycling .slide.is-on picture { animation: slidezoom 7s linear forwards; }
@keyframes slidezoom { from { transform: scale(1.04); } to { transform: scale(1); } }
@keyframes slideprog { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.bookmatch { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; pointer-events: none; transform-style: preserve-3d; }
.bm { position: relative; overflow: hidden; will-change: transform; }
.bm::before { content: ""; position: absolute; inset: 0; background: var(--slab, #17130e) right center / cover; box-shadow: inset 0 0 70px rgba(0, 0, 0, 0.35); }
/* reflejo de la lámpara sobre la losa pulida (se apaga al abrirse) */
.bookmatch::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(240px circle at var(--glx, 60%) var(--gly, 30%), rgba(255, 238, 200, calc(var(--gl, 0.6) * 0.2)), transparent 70%); mix-blend-mode: screen; opacity: calc(1 - var(--open, 0)); }
.bm-r::before { transform: scaleX(-1); } /* espejo: las dos mitades forman un bookmatch */
.bm-l { transform-origin: left center; transform: translateX(calc(var(--open, 0) * -100%)) rotateY(calc(var(--open, 0) * 32deg)); }
.bm-r { transform-origin: right center; transform: translateX(calc(var(--open, 0) * 100%)) rotateY(calc(var(--open, 0) * -32deg)); }
.arch-sheen { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 38%, rgba(255, 248, 230, 0.22) 50%, transparent 62%); transform: translateX(var(--sheen, -130%)); }
.arch-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.arch-line path { fill: none; stroke: #f2dfae; stroke-width: 1.4; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(255, 236, 190, 0.95)) drop-shadow(0 0 14px rgba(198, 160, 82, 0.8)); }
.arch-sparks { position: absolute; left: -50%; top: -30%; width: 200%; height: 160%; pointer-events: none; }
.hero-cap { display: flex; align-items: center; gap: 16px; margin-top: 16px; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); opacity: var(--cap-o, 0); transform: translateY(calc((1 - var(--cap-o, 0)) * 10px)); }
.hero-cap span:first-child { color: var(--ivory); white-space: nowrap; }
.hero-cap span:nth-child(2) { white-space: nowrap; }
.hero-prog { flex: 1; min-width: 30px; height: 1px; background: var(--line-2); overflow: hidden; }
.hero-prog i { display: block; height: 100%; background: var(--gold); transform-origin: left; transform: scaleX(0); }
.hero-cue { position: absolute; z-index: 3; left: 50%; bottom: 22px; transform: translateX(-50%); margin: 0; display: grid; justify-items: center; gap: 10px; font-size: 0.62rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--mute); }
.hero-cue i { width: 1px; height: 38px; background: linear-gradient(var(--gold), transparent); animation: cue 2.2s var(--ease) infinite; transform-origin: top; }
.is-ready .hero-cue.hero-in { opacity: calc(1 - var(--cue-p, 0)); }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* coreografía de entrada */
.hero-in { opacity: 0; transform: translateY(14px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); transition-delay: calc(var(--d) * 90ms + 150ms); }
.hero-up { transform: translateY(105%); transition: transform 1.1s var(--ease); transition-delay: calc(var(--d) * 90ms + 150ms); }
.is-ready .hero-in { opacity: 1; transform: none; }
.is-ready .hero-up { transform: none; }

@media (max-width: 1024px) {
  .hero { height: 160vh; }
  .hero-vignette { background: radial-gradient(100% 70% at 50% 70%, transparent 30%, rgba(6, 5, 4, 0.75)), linear-gradient(180deg, rgba(8, 7, 6, 0.9) 0%, rgba(8, 7, 6, 0.4) 46%, transparent 70%); }
  .hero-layout { align-items: flex-start; padding-top: calc(var(--nav-h) + 18px); }
  .hero-copy { max-width: 620px; }
  .hero-arch { --aw: min(52vw, calc((100svh - 400px) / 1.42), 380px); left: 50%; top: auto; bottom: 7svh; transform: translate(-50%, var(--ay, 0px)) scale(var(--as, 1)); transform-origin: 50% 100%; }
}
@media (max-width: 680px) {
  .hero-h1 { font-size: clamp(2.5rem, 12vw, 3.4rem); margin-bottom: 0.3em; }
  .h1-kicker { font-size: 0.6rem; margin-bottom: 1.1em; }
  .hero-sub, .hero-alt { display: none; }
  .hero-copy .btns { margin-top: 1.1em; }
  .hero-copy .btns .btn { flex: 0 0 auto; }
  .hero-arch { --aw: min(70vw, calc((100svh - 440px) / 1.42)); bottom: 84px; }
  .hero-cap { gap: 10px; font-size: 0.6rem; }
  .hero-cap span:nth-child(2) { display: none; }
  .hero-cue { display: none; }
}

/* ═════════ STORY ═════════ */
.story { position: relative; height: 250vh; }
.story-stick { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; grid-template-rows: auto 1fr; grid-template-columns: minmax(0, 1fr); padding-top: calc(var(--nav-h) + 4vh); }
.story-head { display: flex; justify-content: space-between; align-items: end; gap: 40px; }
.story-head .h2 { margin: 0; }
.story-progress { flex: 0 0 160px; height: 1px; background: var(--line-2); margin-bottom: 1.2em; }
.story-progress i { display: block; height: 100%; background: var(--gold); transform-origin: left; transform: scaleX(var(--sp, 0)); }
.story-track { list-style: none; margin: 0; padding: 5vh var(--pad) 6vh; display: flex; gap: clamp(40px, 5vw, 96px); align-items: center; width: max-content; transform: translate3d(var(--sx, 0px), 0, 0); will-change: transform; }
.frame { display: grid; grid-template-columns: auto 230px; gap: 32px; align-items: end; }
.frame-media { width: clamp(260px, 26vw, 400px); aspect-ratio: 3 / 4; max-height: 62vh; overflow: hidden; clip-path: inset(calc((1 - var(--fr, 0)) * 100%) 0 0 0); }
.frame-media video { width: 100%; height: 100%; object-fit: cover; }
.frame-media picture { height: 100%; transform: scale(calc(1.14 - var(--fp, 0) * 0.14)); }
.frame-copy { opacity: var(--fr, 0); transform: translateY(calc((1 - var(--fr, 0)) * 20px)); padding-bottom: 6px; }
.frame-n { font: 500 0.7rem var(--sans); letter-spacing: 0.2em; color: var(--gold); }
.frame-copy h3 { font: 500 clamp(1.6rem, 2vw, 2.1rem)/1.1 var(--serif); margin: 0.4em 0 0.5em; }
.frame-copy p { color: var(--text); font-size: 0.95rem; margin: 0; }
/* tablet y celular: lista vertical, sin fijar */
.story.is-static { height: auto; padding: calc(var(--sec) * 0.75) 0 0; }
.story.is-static .story-stick { position: relative; height: auto; padding-top: 0; overflow: visible; }
.story.is-static .story-progress { display: none; }
.story.is-static .story-track { width: 100%; transform: none; flex-direction: column; align-items: stretch; gap: 56px; padding: 8px var(--pad) 0; max-width: var(--max); margin: 0 auto; }
.story.is-static .frame { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); align-items: center; }
.story.is-static .frame:nth-child(even) .frame-media { order: 2; }
.story.is-static .frame-media { width: 100%; max-height: none; }
@media (max-width: 680px) {
  .story.is-static .frame { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .story.is-static .frame:nth-child(even) .frame-media { order: 0; }
  .story.is-static .frame-media { aspect-ratio: 4 / 5; }
}

/* ── brillo de luz sobre fotos ── */
[data-sheen] { position: relative; }
[data-sheen]::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 244, 222, 0.16), transparent 60%); opacity: 0; transition: opacity 0.5s; }
[data-sheen]:hover::after { opacity: 1; }

/* ═════════ BEFORE / AFTER (par superpuesto) ═════════ */
.split { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--gap); align-items: center; }
.bap { position: relative; aspect-ratio: 1 / 1.05; }
.bap figure { position: absolute; margin: 0; overflow: hidden; transition: transform 1.3s var(--ease), opacity 1.1s var(--ease), clip-path 1.3s var(--ease); }
.bap picture { height: 100%; }
.bap-before { left: 0; top: 0; width: 52%; height: 78%; filter: saturate(0.85); opacity: 0; transform: translate3d(-24px, 0, 0); }
.bap-after { right: 0; bottom: 0; width: 58%; height: 84%; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.9); clip-path: inset(0 0 100% 0); transform: translate3d(0, calc(var(--bp, 0) * -30px), 0); }
.bap.is-in .bap-before { opacity: 1; transform: none; }
.bap.is-in .bap-after { clip-path: inset(0 0 0 0); transition-delay: 0.35s; }
.bap figcaption { position: absolute; left: 14px; bottom: 12px; right: 14px; font-size: 0.78rem; color: var(--ivory); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.8); }
.bap figcaption span { display: block; font: 600 0.62rem var(--sans); letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-hi); margin-bottom: 2px; }
@media (max-width: 1024px) { .split { grid-template-columns: minmax(0, 1fr); } .bap { aspect-ratio: 1 / 1.1; } }

/* ═════════ PORTFOLIO ═════════ */
.mosaic { display: grid; grid-template-columns: 1.25fr 1fr 1fr; grid-auto-rows: clamp(220px, 26vw, 400px); gap: clamp(8px, 1.2vw, 16px); }
.tile { margin: 0; position: relative; overflow: hidden; }
.tile picture { height: 100%; transition: transform 1.4s var(--ease); }
.tile:hover picture { transform: scale(1.04); }
.tile-tall { grid-row: span 2; }
.tile-wide { grid-column: span 2; }
.tile figcaption { position: absolute; left: 18px; bottom: 14px; font: 500 0.66rem var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ivory); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7); opacity: 0; transform: translateY(6px); transition: 0.5s var(--ease); }
.tile:hover figcaption, .tile:focus-within figcaption { opacity: 1; transform: none; }
.tile-btn { position: absolute; inset: 0; z-index: 2; background: none; border: 0; cursor: zoom-in; }
@media (max-width: 1024px) {
  .mosaic { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-rows: 44vw; }
  .tile-tall { grid-row: span 2; }
  .tile figcaption { opacity: 1; transform: none; }
}
@media (max-width: 680px) { .mosaic { grid-auto-rows: 52vw; } .tile-tall { grid-column: span 2; grid-row: span 2; } }

/* ═════════ SERVICES ═════════ */
.svc-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.svc a { display: grid; grid-template-columns: 64px minmax(0, 1.1fr) minmax(0, 1fr) 32px; align-items: center; gap: 24px; padding: clamp(22px, 2.4vw, 32px) 0; border-bottom: 1px solid var(--line); transition: color 0.35s; }
.svc-n { font: 500 0.7rem var(--sans); letter-spacing: 0.2em; color: var(--mute); }
.svc-name { font: 500 clamp(1.6rem, 2.8vw, 2.6rem)/1.05 var(--serif); transition: transform 0.6s var(--ease); }
.svc-short { color: var(--mute); font-size: 0.95rem; }
.svc-arrow { justify-self: end; color: var(--gold); transform: translateX(-8px); opacity: 0; transition: 0.5s var(--ease); }
.svc a:hover .svc-name { transform: translateX(10px); color: var(--gold-hi); }
.svc a:hover .svc-arrow { transform: none; opacity: 1; }
.svc-preview { position: fixed; left: 0; top: 0; width: 240px; height: 300px; pointer-events: none; z-index: 30; transform: translate3d(var(--px, -999px), var(--py, -999px), 0); opacity: 0; transition: opacity 0.35s; overflow: hidden; }
.svc-preview.is-on { opacity: 1; }
.svc-preview picture { position: absolute; inset: 0; opacity: 0; transition: opacity 0.35s; }
.svc-preview picture.is-on { opacity: 1; }
@media (max-width: 1024px) { .svc-preview { display: none; } .svc-arrow { opacity: 1; transform: none; } }
@media (max-width: 680px) {
  .svc a { grid-template-columns: 36px minmax(0, 1fr) 20px; gap: 6px 14px; }
  .svc-short { grid-column: 2; grid-row: 2; font-size: 0.88rem; }
  .svc-arrow { grid-column: 3; grid-row: 1; }
}

/* ═════════ LIVING ═════════ */
.living { background: var(--ink-2); }
.live-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--gap); counter-reset: live; }
.live-list li { padding: 32px 0 36px; border-top: 1px solid var(--line); counter-increment: live; }
.live-list li::before { content: "0" counter(live); display: block; font: 500 0.7rem var(--sans); letter-spacing: 0.2em; color: var(--gold); margin-bottom: 18px; }
.live-list h3 { font: 500 1.6rem/1.15 var(--serif); margin-bottom: 0.5em; }
.live-list p { color: var(--text); margin: 0; font-size: 0.95rem; }
@media (max-width: 1024px) { .live-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .live-list { grid-template-columns: minmax(0, 1fr); } }

/* ═════════ DESIGN STUDIO ═════════ */
.studio-ask { max-width: 940px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding: 8px 8px 12px; border: 1px solid var(--line-2); background: rgba(242, 238, 231, 0.025); transition: border-color 0.3s; }
.studio-ask:focus-within { border-color: var(--gold); }
.studio-ask textarea { resize: none; min-height: 56px; padding: 15px 14px; border: 0; background: none; color: var(--ivory); font: 400 1.02rem/1.5 var(--sans); outline: none; }
.studio-ask textarea::placeholder { color: #7a7368; }
.studio-ask .btn { align-self: start; margin-top: 4px; }
.studio-chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; padding: 0 6px; }
.studio-chips button { border: 1px solid var(--line); background: none; padding: 6px 13px; font-size: 0.78rem; color: var(--text); transition: 0.3s; }
.studio-chips button:hover { border-color: var(--gold); color: var(--gold-hi); }
.cf-turnstile-slot:empty { display: none; }
.cf-turnstile-slot { grid-column: 1 / -1; padding: 0 6px; }
.studio-stage { margin-top: 32px; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; animation: rise 0.8s var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }
.studio-view { position: relative; height: clamp(440px, 64vh, 680px); overflow: hidden; background: #1d1b19; }
.studio-view:fullscreen { height: 100vh; }
.studio-canvas { position: absolute; inset: 0; transition: opacity 0.35s; }
.studio-canvas.is-fading { opacity: 0; }
.studio-canvas canvas { width: 100% !important; height: 100% !important; touch-action: none; cursor: grab; }
.studio-canvas canvas:active { cursor: grabbing; }
.studio-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.dim { position: absolute; transform: translate(-50%, -50%); padding: 3px 8px; font: 600 0.66rem var(--sans); letter-spacing: 0.06em; color: #fff; background: #1b1a18; white-space: nowrap; transition: opacity 0.3s; }
[data-mode="render"] .dim { background: #e3c98c; color: #16110a; }
.dim.is-repair, [data-mode="render"] .dim.is-repair { background: #c8462b; color: #fff; }
.dim.is-repair::before { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 18px; background: #c8462b; }
.studio-drafting { position: absolute; inset: 0; display: grid; place-content: center; gap: 16px; text-align: center; background: #1d1b19; color: #e3dccf; font: italic 500 1.5rem var(--serif); transition: opacity 0.6s; z-index: 3; }
.studio-drafting.is-off { opacity: 0; pointer-events: none; }
.studio-drafting i { width: 160px; height: 1px; background: rgba(0, 0, 0, 0.12); position: relative; overflow: hidden; margin: 0 auto; }
.studio-drafting i::after { content: ""; position: absolute; inset: 0; background: var(--gold-lo); animation: draft 1.1s var(--ease) infinite; }
@keyframes draft { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.studio-bar { position: absolute; left: 14px; right: 14px; display: flex; justify-content: space-between; align-items: center; gap: 10px; z-index: 2; pointer-events: none; }
.studio-bar > * { pointer-events: auto; }
.studio-bar-top { top: 14px; }
.studio-bar-bottom { bottom: 14px; }
.seg { display: flex; padding: 3px; background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(10px); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08); }
.seg button { border: 0; background: none; padding: 7px 14px; font: 600 0.66rem var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: #5a554e; display: grid; place-items: center; }
.seg button svg { width: 16px; height: 16px; }
.seg button[aria-pressed="true"] { background: #1b1a18; color: #fff; }
.seg button:hover:not([aria-pressed="true"]) { color: #1b1a18; }
.swatches { display: flex; gap: 6px; overflow-x: auto; padding: 3px; max-width: 100%; background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(10px); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08); scrollbar-width: none; }
.swatches::-webkit-scrollbar { display: none; }
.swatches button { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; border: 1px solid transparent; background: none; padding: 4px 10px 4px 4px; font-size: 0.72rem; color: #4a463f; white-space: nowrap; }
.swatches button i { width: 24px; height: 24px; background-size: cover; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); }
.swatches button[aria-checked="true"] { border-color: #1b1a18; color: #1b1a18; }
.swatches button.is-extra:not(.is-current) { display: none; }
.swatches.show-all button.is-extra { display: flex; }
.sw-more { border: 0; background: none; padding: 4px 10px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; color: #1b1a18; white-space: nowrap; }
.brief-share { margin-top: 14px; align-self: flex-start; color: var(--gold-hi); }
.hero-alt { align-self: center; font-size: 0.82rem; letter-spacing: 0.04em; }
.brief { padding: 28px; background: var(--ink-2); border: 1px solid var(--line); display: flex; flex-direction: column; }
.brief h3 { font: 500 1.8rem/1.1 var(--serif); margin-bottom: 0.5em; }
.brief > p { color: var(--text); font-size: 0.94rem; }
.brief h4 { font: 500 0.68rem var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin: 1.4em 0 0.8em; }
.brief-dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 16px; margin: 1em 0 0; padding-top: 1.2em; border-top: 1px solid var(--line); }
.brief-dl dt { font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); }
.brief-dl dd { margin: 3px 0 0; font: 500 1.08rem/1.25 var(--serif); }
.brief .btns { margin-top: auto; padding-top: 1.6em; }
.brief .btns .btn { flex: 1; }
.brief-note { font-size: 0.72rem; color: var(--mute); margin: 14px 0 0; }
.plan-form { max-width: 940px; margin: 24px auto 0; padding: 28px; border: 1px solid var(--line); background: var(--ink-2); }
.plan-form h3 { font: 500 1.5rem var(--serif); margin-bottom: 1em; }
@media (max-width: 1024px) {
  .studio-stage { grid-template-columns: minmax(0, 1fr); }
  .studio-view { height: clamp(380px, 70vw, 560px); }
}
@media (max-width: 680px) {
  .studio-ask { grid-template-columns: minmax(0, 1fr); }
  .studio-ask .btn { width: 100%; margin: 0; }
  .studio-view { height: 112vw; max-height: 560px; }
  .seg button { padding: 7px 10px; }
  .brief { padding: 22px; }
}

/* ── ticks ── */
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.ticks li { padding-left: 22px; position: relative; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 10px; height: 1px; background: var(--gold); }
.ticks.small { font-size: 0.9rem; color: var(--text); }

/* ═════════ SECCIONES CLARAS ═════════ */
.light { background: var(--paper); color: var(--ink); }
.light .lead, .light p { color: #463f36; }
.light .h2 em { color: var(--gold-lo); }
.light .eyebrow { color: var(--gold-lo); }

/* ── materiales ── */
.mat-tabs { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-bottom: 36px; border-bottom: 1px solid var(--line-ink); }
.mat-tabs button { position: relative; border: 0; background: none; color: var(--mute-ink); padding: 12px 0; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; }
.mat-tabs button::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--ink); transform: scaleX(0); transition: transform 0.4s var(--ease); }
.mat-tabs button[aria-selected="true"] { color: var(--ink); }
.mat-tabs button[aria-selected="true"]::after { transform: scaleX(1); }
.mat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px clamp(16px, 2vw, 28px); }
.mat { display: flex; flex-direction: column; }
.mat-swatch { position: relative; aspect-ratio: 1; overflow: hidden; margin-bottom: 18px; }
.swatch { width: 100%; height: 100%; transition: transform 1.4s var(--ease); }
.mat:hover .swatch { transform: scale(1.05); }
.mat-sheen { position: absolute; inset: 0; background: radial-gradient(240px circle at var(--mx, 30%) var(--my, 20%), rgba(255, 255, 255, 0.4), transparent 60%); mix-blend-mode: soft-light; pointer-events: none; }
.mat-body { display: flex; flex-direction: column; flex: 1; }
.mat-body .eyebrow { margin-bottom: 0.6em; }
.mat-body h3 { font: 500 1.5rem/1.1 var(--serif); margin-bottom: 0.4em; }
.mat-body > p:not(.eyebrow) { font-size: 0.9rem; flex: 1; }
.bars { list-style: none; padding: 0; margin: 4px 0 16px; display: grid; gap: 7px; font-size: 0.72rem; color: var(--mute-ink); }
.bars li { display: grid; grid-template-columns: 1fr 84px; align-items: center; gap: 10px; }
.bars i { height: 2px; background: var(--line-ink); position: relative; }
.bars i::after { content: ""; position: absolute; inset: 0; background: var(--gold-lo); transform-origin: left; transform: scaleX(0); transition: transform 1.2s var(--ease) 0.2s; }
.is-in .bars i::after { transform: scaleX(var(--v)); }
.mat-try { margin-top: auto; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; color: var(--ink); }
.mat-try:hover { color: var(--gold-lo); }
@media (max-width: 1024px) { .mat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .mat-grid { gap: 28px 14px; } .mat-body h3 { font-size: 1.2rem; } .mat-body > p:not(.eyebrow) { font-size: 0.8rem; } .mat-try { font-size: 0.72rem; } }

/* ═════════ PROCESS ═════════ */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; position: relative; }
.steps::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line-2); }
.steps::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--gold); transform-origin: left; transform: scaleX(0); transition: transform 2s var(--ease); }
.steps.is-in::after { transform: scaleX(1); }
.steps li { padding-top: 28px; }
.steps li span { display: block; font: 500 0.7rem var(--sans); letter-spacing: 0.2em; color: var(--gold); margin-bottom: 14px; }
.steps h3 { font: 500 1.4rem/1.15 var(--serif); margin-bottom: 0.4em; }
.steps p { color: var(--text); font-size: 0.92rem; margin: 0; }
@media (max-width: 1024px) {
  .steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .steps::before, .steps::after { display: none; }
  .steps li { display: grid; grid-template-columns: 56px 1fr; padding: 22px 0; border-top: 1px solid var(--line); }
  .steps li span { grid-row: span 2; margin: 6px 0 0; }
}

/* ═════════ PARTNERS ═════════ */
.partner-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-top: 1px solid var(--line); }
.partner { padding: clamp(32px, 4vw, 56px) clamp(0px, 3vw, 48px) clamp(32px, 4vw, 56px) 0; display: grid; gap: 10px; align-content: start; }
.partner + .partner { border-left: 1px solid var(--line); padding-left: clamp(24px, 3vw, 48px); }
.partner img { height: 54px; width: auto; max-width: 240px; object-fit: contain; object-position: left; margin-bottom: 16px; opacity: 0.92; transition: opacity 0.3s; }
.partner a:hover img { opacity: 1; }
.partner p:not(.eyebrow) { color: var(--text); margin: 0 0 6px; }
.partner .link-gold { justify-self: start; font-size: 0.85rem; }
.plogo-invert { filter: invert(1) brightness(0.95); }
@media (max-width: 680px) {
  .partner-grid { grid-template-columns: minmax(0, 1fr); }
  .partner + .partner { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; }
}

/* ═════════ ABOUT ═════════ */
.about-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); align-items: center; }
.todo-note { display: inline-block; margin-top: 0.6em; padding: 3px 9px; border: 1px dashed var(--gold-lo); font-size: 0.8rem; color: var(--gold-lo); }
.team { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(16px, 2vw, 32px); }
.member-ph { aspect-ratio: 4 / 5; overflow: hidden; margin-bottom: 18px; background: #e4ded4; }
.member-ph img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.2); transition: filter 0.6s, transform 1.2s var(--ease); }
.member:hover .member-ph img { filter: none; transform: scale(1.03); }
.member-mono { display: grid; place-items: center; width: 100%; height: 100%; background: var(--ink); color: var(--gold-hi); font: 600 2.4rem var(--display); letter-spacing: 0.1em; }
.member h3 { font: 500 1.6rem/1.1 var(--serif); }
.member .eyebrow { font-size: 0.6rem; margin: 0.5em 0 1em; }
.member-act { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.82rem; font-weight: 600; }
.member-act a { color: var(--ink); border-bottom: 1px solid var(--gold-lo); }
@media (max-width: 1024px) { .about-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .team { grid-template-columns: minmax(0, 1fr); } }

/* ═════════ FAQ ═════════ */
.faq-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--gap); align-items: start; }
.faq-grid .sec-head { position: sticky; top: calc(var(--nav-h) + 32px); }
.faq { border-top: 1px solid var(--line); }
.faq-i { border-bottom: 1px solid var(--line); }
.faq-i summary { list-style: none; cursor: pointer; padding: 22px 40px 22px 0; font: 500 1.3rem/1.3 var(--serif); position: relative; transition: color 0.3s; }
.faq-i summary:hover { color: var(--gold-hi); }
.faq-i summary::-webkit-details-marker { display: none; }
.faq-i summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 11px; height: 11px; border: solid var(--gold); border-width: 0 1px 1px 0; transform: translateY(-70%) rotate(45deg); transition: transform 0.4s var(--ease); }
.faq-i[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq-i p { color: var(--text); padding-bottom: 22px; margin: 0; max-width: 64ch; }
@media (max-width: 1024px) { .faq-grid { grid-template-columns: minmax(0, 1fr); } .faq-grid .sec-head { position: static; } }

/* ═════════ CONTACT & FORMS ═════════ */
.contact { background: var(--ink-2); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--gap); }
.directs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-top: 1px solid var(--line); margin: 32px 0; }
.direct { padding: 18px 0; transition: color 0.3s; }
.direct + .direct { padding-left: 20px; border-left: 1px solid var(--line); }
.direct .eyebrow { margin-bottom: 4px; color: var(--mute); }
.direct strong { font: 500 1.35rem var(--serif); }
.direct:hover strong { color: var(--gold-hi); }
.map { aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--line); margin-bottom: 12px; }
.map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(1) invert(0.92) contrast(0.9); }
.map-facade { width: 100%; height: 100%; border: 0; background: var(--ink); display: grid; place-content: center; gap: 6px; text-align: center; padding: 20px; transition: background 0.3s; }
.map-facade:hover { background: var(--ink-3); }
.map-facade strong { font: 500 1.25rem var(--serif); }
.map-cta { font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-hi); }
.areas { margin-top: 24px; font-size: 0.86rem; color: var(--mute); line-height: 2.1; }
.areas a { margin-right: 14px; }
.areas a:hover { color: var(--gold-hi); }
.lead-form { padding: clamp(24px, 3.4vw, 48px); border: 1px solid var(--line); background: var(--ink); align-self: start; }
.fgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 16px; margin-bottom: 18px; }
.fgrid label, .fgrid legend { display: grid; gap: 7px; font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); }
.fgrid input, .fgrid select, .fgrid textarea {
  width: 100%; padding: 12px 0; border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0; background: none;
  color: var(--ivory); font: 400 1rem var(--sans); letter-spacing: 0; text-transform: none; transition: border-color 0.3s; -webkit-appearance: none; appearance: none;
}
.fgrid select { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6' fill='none' stroke='%23c6a052'/%3E%3C/svg%3E") right 4px center no-repeat; padding-right: 22px; }
.fgrid select option { background: var(--ink-2); color: var(--ivory); }
.fgrid textarea { resize: vertical; }
.fgrid input:focus, .fgrid select:focus, .fgrid textarea:focus { border-color: var(--gold); outline: none; }
.fgrid :user-invalid { border-color: #d0694f; }
.pref { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.pref legend { margin-bottom: 10px; width: 100%; }
.pref label { display: flex; align-items: center; gap: 7px; font-size: 0.92rem; letter-spacing: 0; text-transform: none; color: var(--ivory); }
.pref input { width: auto; accent-color: var(--gold); }
/* formulario por pasos */
.fsteps { list-style: none; margin: 0 0 28px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); }
.fsteps li { padding-top: 10px; border-top: 1px solid var(--line-2); transition: color 0.3s, border-color 0.3s; }
.fsteps li span { margin-right: 8px; color: inherit; }
.fsteps li.is-on { color: var(--ivory); border-color: var(--gold); }
.fsteps li.is-done { color: var(--gold); border-color: var(--gold-lo); }
.fstep { display: none; border: 0; margin: 0; padding: 0; min-width: 0; }
.fstep.is-on { display: block; animation: rise 0.5s var(--ease); }
.fstep-h { font: 500 1.6rem/1.15 var(--serif); margin-bottom: 20px; padding: 0; }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tile { position: relative; cursor: pointer; }
.tile input { position: absolute; opacity: 0; pointer-events: none; }
.tile span { display: flex; align-items: center; min-height: 64px; padding: 14px 16px; border: 1px solid var(--line-2); font-size: 0.9rem; line-height: 1.3; transition: border-color 0.25s, background-color 0.25s, color 0.25s; }
.tile:hover span { border-color: var(--gold-lo); }
.tile input:checked + span { border-color: var(--gold); background: rgba(198, 160, 82, 0.1); color: var(--gold-hi); }
.tile input:focus-visible + span { outline: 1px solid var(--gold-hi); outline-offset: 2px; }
.fnav { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 8px; }
@media (max-width: 680px) { .tiles { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .tile span { min-height: 56px; font-size: 0.84rem; } .fnav .btn { flex: 1; } }
.consent-line { display: flex; gap: 10px; align-items: flex-start; font-size: 0.82rem; color: var(--mute); margin-bottom: 22px; }
.consent-line input { accent-color: var(--gold); margin-top: 4px; }
.form-msg { margin: 14px 0 0; font-size: 0.9rem; min-height: 1.4em; }
.form-msg.ok { color: #a7d7ac; } .form-msg.err { color: #f0a08b; }
.form-msg a { text-decoration: underline; }
@media (max-width: 1024px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .fgrid { grid-template-columns: minmax(0, 1fr); } .directs { grid-template-columns: minmax(0, 1fr); } .direct + .direct { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); } }

/* ═════════ FOOTER ═════════ */
.foot { border-top: 1px solid var(--line); padding: 80px 0 32px; font-size: 0.88rem; }
.foot-top { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1.1fr; gap: 40px; }
.foot-brand img { width: 132px; margin-bottom: 16px; }
.serif-i { font: italic 500 1.2rem var(--serif); color: var(--mute); }
.foot-h { font: 500 0.66rem var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; color: var(--text); }
.foot ul.cols2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.foot a:hover { color: var(--gold-hi); }
.foot address { font-style: normal; line-height: 1.9; color: var(--text); }
.foot-mini { color: var(--mute); margin-top: 10px; font-size: 0.8rem; }
.foot-partners { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 40px; margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line); color: var(--mute); font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; }
.foot-partners img { height: 26px; width: auto; opacity: 0.7; transition: opacity 0.3s; }
.foot-partners a:hover img { opacity: 1; }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 28px; color: var(--mute); font-size: 0.78rem; }
.foot-bottom .linklike { font-size: inherit; }
@media (max-width: 1024px) { .foot-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 560px) { .foot-top { grid-template-columns: minmax(0, 1fr); } }

/* ═════════ FLOTANTES ═════════ */
.wa-float { position: fixed; right: 18px; bottom: 18px; z-index: 40; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: #1f9f55; color: #fff; box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.7); transition: transform 0.35s var(--ease); }
.wa-float svg { width: 28px; height: 28px; }
.wa-float:hover { transform: scale(1.07); }
.consent { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 60; width: min(560px, calc(100% - 36px)); padding: 16px 18px; border: 1px solid var(--line-2); background: rgba(17, 16, 16, 0.97); backdrop-filter: blur(10px); font-size: 0.84rem; display: flex; align-items: center; gap: 16px; animation: rise 0.6s var(--ease); }
.consent p { margin: 0; color: var(--text); flex: 1; }
.consent a { color: var(--gold-hi); text-decoration: underline; }
.consent div { display: flex; gap: 8px; }
@media (max-width: 560px) { .consent { flex-direction: column; align-items: stretch; bottom: 84px; } .consent div .btn { flex: 1; } }

/* oferta flotante (como en The Soft Club) */
.offer-pill { position: fixed; left: 18px; bottom: 18px; z-index: 41; animation: pillIn 0.8s var(--ease); }
@keyframes pillIn { from { opacity: 0; transform: translateY(24px) scale(0.92); } }
.offer-open {
  display: grid; place-items: center; width: 112px; height: 60px; border: 0; border-radius: 999px;
  background: linear-gradient(135deg, #e3c98c, #c6a052 45%, #8a6a2c); color: #16110a;
  font: 700 0.56rem/1.1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; gap: 1px; align-content: center;
  box-shadow: 0 14px 30px -12px rgba(198, 160, 82, 0.7); transition: transform 0.35s var(--ease);
}
.offer-open strong { font: 600 1.35rem/1 var(--serif); letter-spacing: 0; text-transform: none; }
.offer-open:hover { transform: scale(1.06); }
@keyframes pillPulse { 50% { box-shadow: 0 14px 30px -12px rgba(198, 160, 82, 0.7), 0 0 0 8px rgba(198, 160, 82, 0.14); } }
@media (max-width: 680px) { .offer-pill { left: 14px; bottom: 14px; } .offer-open { width: 100px; height: 54px; } }
.offer-x { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--ink); color: var(--ivory); font-size: 0.9rem; line-height: 1; display: grid; place-items: center; }
.offer-modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: rgba(5, 4, 3, 0.72); backdrop-filter: blur(6px); animation: fade 0.35s ease; }
.offer-box { position: relative; width: min(520px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; background: var(--ink-2); border: 1px solid var(--line-2); padding: 40px clamp(20px, 4vw, 36px) 28px; text-align: center; animation: rise 0.6s var(--ease); }
.offer-close { position: absolute; top: 10px; right: 12px; width: 40px; height: 40px; border: 0; background: none; font-size: 1.7rem; font-weight: 300; line-height: 1; color: var(--mute); }
.offer-close:hover { color: var(--ivory); }
.offer-title { font: 500 clamp(1.7rem, 4.6vw, 2.2rem)/1.1 var(--serif); margin-bottom: 0.3em; }
.offer-title em { font-style: italic; color: var(--gold-hi); }
.offer-lead { color: var(--text); font-size: 0.92rem; margin-bottom: 20px; }
.polish { position: relative; aspect-ratio: 16 / 10; overflow: hidden; text-align: center; }
.polish-prize, .polish-stone, .polish-dust { position: absolute; inset: 0; width: 100%; height: 100%; }
.polish-text { position: absolute; inset: 0; display: grid; place-content: center; gap: 2px; padding: 16px; }
.polish-text .eyebrow { margin-bottom: 0.4em; }
.polish-text strong { font: 600 clamp(3.2rem, 12vw, 5rem)/0.95 var(--serif); color: var(--gold-hi); text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6); }
.polish-text span:last-child { font: italic 500 1.1rem var(--serif); color: var(--ivory); }
.polish-dust { touch-action: none; cursor: none; transition: opacity 0.9s var(--ease); }
.polish-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.polish.is-done .polish-dust, .polish.is-done .polish-pad, .polish.is-done .polish-fx { opacity: 0; pointer-events: none; }
.polish.is-done .polish-text strong { animation: pop 0.8s var(--ease); }
@keyframes pop { 0% { transform: scale(0.8); opacity: 0; } }
/* brillo final: "pasada de agua" sobre la piedra recién pulida */
.polish-shine { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255, 250, 235, 0.55) 50%, transparent 65%); transform: translateX(-120%); }
.polish.is-done .polish-shine { animation: shine 1.3s var(--ease) 0.25s; }
@keyframes shine { to { transform: translateX(120%); } }
/* pista después de la demostración: invita a seguir puliendo */
.polish.show-hint::after { content: "Drag to keep polishing"; position: absolute; left: 50%; top: 14px; transform: translateX(-50%); padding: 6px 12px; background: rgba(11, 10, 9, 0.75); color: #f2dfae; font: 600 0.62rem var(--sans); letter-spacing: 0.16em; text-transform: uppercase; pointer-events: none; animation: hint 1.6s ease-in-out infinite; }
@keyframes hint { 50% { opacity: 0.55; } }
.polish.is-done.show-hint::after { display: none; }
/* pad de pulido diamantado (cursor) */
.polish-pad { position: absolute; left: 0; top: 0; width: var(--pad-d, 64px); height: var(--pad-d, 64px); margin: calc(var(--pad-d, 64px) / -2) 0 0 calc(var(--pad-d, 64px) / -2); pointer-events: none; transform: translate3d(var(--px, -200px), var(--py, -200px), 0); opacity: var(--pad-o, 0); transition: opacity 0.25s; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.45)); }
.polish-pad i { display: block; width: 100%; height: 100%; border-radius: 50%; transform: rotate(var(--spin, 0deg));
  background:
    radial-gradient(circle, #2b2b2b 0 16%, #8d8d8d 17% 20%, transparent 21%),
    repeating-conic-gradient(from 0deg, #3a3a3a 0 14deg, #c9a24b 14deg 18deg, #2f2f2f 18deg 30deg),
    #333;
  box-shadow: inset 0 0 0 3px #1e1e1e, inset 0 0 0 5px rgba(201, 162, 75, 0.6), inset 0 0 14px rgba(0, 0, 0, 0.6); }
/* medidor: cinta métrica amarilla que se estira */
.polish-meter { position: absolute; left: 12px; right: 12px; bottom: 10px; margin: 0; display: flex; align-items: center; gap: 0; pointer-events: none; }
.tape-case { flex: 0 0 26px; height: 26px; border-radius: 6px; background: linear-gradient(145deg, #2a2a2a, #111); box-shadow: inset 0 0 0 2px #c9a24b; position: relative; z-index: 1; }
.tape-case::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; border: 2px solid #c9a24b; }
.tape { position: relative; flex: 1; height: 12px; margin-left: -2px; overflow: hidden; }
.tape i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--pp, 0) * 100%); background:
    repeating-linear-gradient(90deg, #1a1a1a 0 1px, transparent 1px 8px) 0 0 / 100% 45% no-repeat,
    repeating-linear-gradient(90deg, #1a1a1a 0 1px, transparent 1px 40px) 0 0 / 100% 75% no-repeat,
    #f2c230; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.3); transition: width 0.25s linear; }
.tape i::after { content: ""; position: absolute; right: 0; top: -3px; width: 4px; height: 18px; background: #c9cfd3; border-radius: 1px; }
.polish-meter b { margin-left: 10px; font: 700 0.62rem var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8); white-space: nowrap; }
.polish.is-done .polish-meter { opacity: 0; transition: opacity 0.4s; }
.offer-skip { margin-top: 12px; }
.offer-form, .offer-done { margin-top: 20px; text-align: left; animation: rise 0.6s var(--ease); }
.offer-form .btn { width: 100%; }
.offer-claim-h { font: italic 500 1.2rem var(--serif); text-align: center; }
.offer-done { text-align: center; }
.offer-code { font: 600 clamp(1.6rem, 6vw, 2.1rem)/1 var(--display); letter-spacing: 0.1em; color: var(--gold-hi); margin: 0.2em 0 0.2em; }
.offer-done .btns { margin: 1em 0; }
.offer-fine { font-size: 0.72rem; color: var(--mute); margin: 18px 0 0; }

.lightbox { position: fixed; inset: 0; z-index: 70; background: rgba(5, 4, 3, 0.95); display: grid; place-items: center; padding: 48px 16px; animation: fade 0.3s ease; }
.lightbox img { max-height: 86vh; width: auto; animation: rise 0.5s var(--ease); }
.lb-close { position: absolute; top: 14px; right: 16px; width: 44px; height: 44px; border: 0; background: none; font-size: 1.8rem; font-weight: 300; }

/* ═════════ SUBPÁGINAS ═════════ */
.sub-hero { padding: calc(var(--nav-h) + clamp(48px, 8vw, 104px)) 0 clamp(48px, 6vw, 88px); }
.sub-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--gap); align-items: center; }
.sub-media { aspect-ratio: 4 / 5; max-height: 76vh; overflow: hidden; }
.sub-media picture { height: 100%; animation: kenburns 20s ease-in-out infinite alternate; }
@keyframes kenburns { to { transform: scale(1.08); } }
.crumbs { font-size: 0.74rem; color: var(--mute); margin-bottom: 32px; letter-spacing: 0.04em; }
.crumbs a:hover { color: var(--gold-hi); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips span { padding: 7px 14px; border: 1px solid var(--line); font-size: 0.88rem; }
.area-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.area-links a { color: var(--text); }
.area-links a:hover { color: var(--gold-hi); }
.related { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 0 var(--gap); border-top: 1px solid var(--line); }
.related a { padding: 22px 0; border-bottom: 1px solid var(--line); display: grid; gap: 4px; }
.related a:hover strong { color: var(--gold-hi); }
.related strong { font: 500 1.35rem var(--serif); transition: color 0.3s; }
.related span { color: var(--mute); font-size: 0.88rem; }
.cta-band { padding: var(--sec) 0; text-align: center; background: linear-gradient(rgba(11, 10, 9, 0.72), rgba(11, 10, 9, 0.9)), url(/img/waterfall-island-1086.webp) center / cover; }
.cta-band .h2 { max-width: 18ch; margin-inline: auto; }
.legal { padding-top: calc(var(--nav-h) + 64px); }
.legal h2 { font: 500 1.5rem var(--serif); margin: 1.6em 0 0.4em; }
.legal p { color: var(--text); max-width: 68ch; }
@media (max-width: 1024px) { .sub-grid { grid-template-columns: minmax(0, 1fr); } .sub-media { aspect-ratio: 4 / 3; } }

/* ── revelado al hacer scroll: corto y preciso ── */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }
.no-js [data-reveal], .no-js .hero-in { opacity: 1; transform: none; }
.no-js .hero-up { transform: none; }
.no-js .bookmatch { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .hero { height: auto; } .hero-stick { position: relative; min-height: 100svh; }
  .hero-stick { --open: 1; --cap-o: 1; --enter: 1; }
}