/* CONCASA — v2 · minimal, visual, móvil primero.
   Layout: pantallas de imagen a sangre separadas por bloques breves de texto; cápsula de navegación flotante; un solo CTA fijo. */
:root {
  --blue: #0351F1; --blue-2: #1F43A4; --ink: #1D1D1D; --ink-2: #4A4F58; --muted: #6A7280;
  --paper: #F4F4F6; --paper-2: #E8E8ED; --line: #D9DCE3; --white: #fff; --cream: #F5EDD8; --sky: #BCE4FE;
  --wa: #1fb457; --ok: #1D8348; --warn: #D99A07;
  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif; --font-body: 'Manrope', 'Segoe UI', Roboto, Arial, sans-serif;
  --gx: clamp(18px, 4.5vw, 72px); --gl: max(var(--gx), env(safe-area-inset-left, 0px)); --gr: max(var(--gx), env(safe-area-inset-right, 0px));
  --max: 1680px; --ease: cubic-bezier(.2, .8, .2, 1); --ease-out: cubic-bezier(.23, 1, .32, 1); --nav-h: 64px;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }
a, button, summary, label, [role="button"] { touch-action: manipulation; }
html.lock { overflow: hidden; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.55; overflow-x: hidden; overflow-x: clip; -webkit-font-smoothing: antialiased; }
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; line-height: 1; letter-spacing: -.035em; margin: 0; text-wrap: balance; font-variation-settings: 'wdth' 104; }
h1 { font-size: clamp(48px, 10vw, 150px); }
h2 { font-size: clamp(34px, 5.2vw, 76px); }
h3 { font-size: clamp(22px, 2.4vw, 34px); letter-spacing: -.02em; }
p { margin: 0; }
.eyebrow { font-family: var(--font-display); font-weight: 500; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-variation-settings: 'wdth' 92; }
.lead { font-size: clamp(17px, 1.5vw, 22px); line-height: 1.5; max-width: 32em; color: var(--ink-2); }
.muted { color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--blue); color: #fff; padding: 12px 16px; z-index: 300; } .skip:focus { left: 16px; top: 16px; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-left: var(--gl); padding-right: var(--gr); }
.sec { padding-block: clamp(72px, 10vw, 160px); }
.sec.tight { padding-block: clamp(48px, 6vw, 96px); }
.dark { background: var(--ink); color: #fff; } .dark .eyebrow { color: #9aa3b2; } .dark .lead { color: #c9ced8; } .dark .muted { color: #9aa3b2; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

[id] { scroll-margin-top: 8px; }
.sec-head { display: grid; justify-items: start; }
/* ---------- revelado (spec 1) ---------- */
.r { opacity: 0; filter: blur(4px); transform: translateY(12px); transition: opacity .5s var(--ease-out), filter .5s var(--ease-out), transform .6s var(--ease-out); }
.r.in { opacity: 1; filter: blur(0); transform: none; }
.r[data-d="1"] { transition-delay: .06s; } .r[data-d="2"] { transition-delay: .12s; } .r[data-d="3"] { transition-delay: .18s; } .r[data-d="4"] { transition-delay: .24s; }
html.no-js .r { opacity: 1; filter: none; transform: none; transition: none; }
html.rm .r { filter: none; transform: none; transition: opacity .4s ease; }

/* ---------- botones ---------- */
.btn { display: inline-flex; align-items: center; gap: 12px; min-height: 50px; padding: 12px 22px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 700; font-size: 14px; transition: transform .25s var(--ease), background .25s, color .25s, box-shadow .25s; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .btn:hover { transform: translateY(-1px); background: #000; } } .btn:active { transform: scale(.98); }
.btn.blue { background: var(--blue); } @media (hover: hover) and (pointer: fine) { .btn.blue:hover { background: var(--blue-2); } }
.btn.white { background: #fff; color: var(--ink); } @media (hover: hover) and (pointer: fine) { .btn.white:hover { background: var(--paper-2); } }
.btn.ghost { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; } @media (hover: hover) and (pointer: fine) { .btn.ghost:hover { background: rgba(0,0,0,.06); } }
@media (hover: hover) and (pointer: fine) { .dark .btn.ghost:hover, .hero .btn.ghost:hover { background: rgba(255,255,255,.12); } }
.btn.wa { background: var(--wa); color: #fff; } @media (hover: hover) and (pointer: fine) { .btn.wa:hover { background: #179a49; } }
.btn .arr { display: inline-block; transition: transform .35s var(--ease); } @media (hover: hover) and (pointer: fine) { .btn:hover .arr { transform: translateX(4px); } }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
.link { font-weight: 700; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; position: relative; }
.link::after { content: ''; position: absolute; left: 0; right: 0; bottom: 8px; height: 1.5px; background: currentColor; transform: scaleX(1); transform-origin: left; transition: transform .35s var(--ease); }
@media (hover: hover) and (pointer: fine) { .link:hover::after { transform: scaleX(0); transform-origin: right; } }

/* ---------- loader (spec 9 / P1) ---------- */
.loader { position: fixed; inset: 0; z-index: 200; background: var(--ink); color: #fff; display: grid; place-items: center; transition: transform .6s var(--ease-out), opacity .4s; }
.loader .n { font-family: var(--font-display); font-size: clamp(64px, 14vw, 180px); font-weight: 500; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.loader .bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: rgba(255,255,255,.18); } .loader .bar i { display: block; height: 100%; width: 0; background: #fff; transition: width .2s linear; }
.loader .skip-intro { position: absolute; right: max(18px, env(safe-area-inset-right, 0px)); top: max(18px, env(safe-area-inset-top, 0px)); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; opacity: .7; min-height: 44px; display: inline-flex; align-items: center; }
.loader.out { transform: translateY(-100%); pointer-events: none; }
.loader.gone, html.no-js .loader, html.rm .loader { display: none; }
.curtain { position: fixed; inset: 0; z-index: 190; background: var(--ink); transform: translateY(100%); pointer-events: none; transition: transform .26s var(--ease-out); }
.curtain.on { transform: translateY(0); }
.progress { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; height: 2px; width: 100%; background: var(--blue); transform: scaleX(0); transform-origin: left; z-index: 160; pointer-events: none; }

/* ---------- navegación: cápsula flotante (spec 8 / P17) ---------- */
.nav { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 12px); left: 0; right: 0; z-index: 150; display: flex; justify-content: space-between; align-items: center; padding-left: var(--gl); padding-right: var(--gr); pointer-events: none; transition: transform .5s var(--ease), opacity .5s; opacity: 0; transform: translateY(-14px); }
.nav.show { opacity: 1; transform: none; } .nav.hide { transform: translateY(-120%); opacity: 0; }
.nav > * { pointer-events: auto; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: .16em; text-transform: uppercase; color: #fff; font-variation-settings: 'wdth' 118; transition: color .3s; }
.nav.on-light .brand { color: var(--ink); } /* antes: mix-blend-mode difference, que no funcionaba dentro de la nav fija (logo blanco sobre fondo claro) */
.brand .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--blue); mix-blend-mode: normal; }
.capsule { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(29,29,29,.55); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 10px 30px rgba(0,0,0,.18); }
.capsule a, .capsule button { min-height: 42px; padding: 8px 16px; border-radius: 999px; font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; gap: 8px; transition: background .25s; }
@media (hover: hover) and (pointer: fine) { .capsule a:hover, .capsule button:hover { background: rgba(255,255,255,.12); } }
.capsule .cta { background: var(--blue); } @media (hover: hover) and (pointer: fine) { .capsule .cta:hover { background: var(--blue-2); } }
.capsule .links { display: none; }
.capsule .menu-btn .bars { width: 18px; height: 12px; position: relative; display: inline-block; }
.capsule .menu-btn .bars::before, .capsule .menu-btn .bars::after { content: ''; position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; transition: transform .3s var(--ease); }
.capsule .menu-btn .bars::before { top: 1px; } .capsule .menu-btn .bars::after { top: 9px; }
@media (min-width: 1000px) { .capsule .links { display: inline-flex; gap: 2px; } .capsule .links a[aria-current="page"] { background: rgba(255,255,255,.14); } }

/* sub-nav de proyecto: píldora inferior con sección activa */
.subnav { position: fixed; left: 50%; bottom: max(14px, env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 0); z-index: 150; display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(29,29,29,.62); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 10px 30px rgba(0,0,0,.22); max-width: calc(100vw - 110px); overflow-x: auto; scrollbar-width: none; transition: transform .5s var(--ease), opacity .5s; opacity: 0; transform: translate(-50%, 20px); }
.subnav::-webkit-scrollbar { display: none; }
.subnav.show { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 799px) { .subnav { left: max(12px, env(safe-area-inset-left, 0px)); transform: translate(0, 20px); max-width: calc(100vw - 96px); } .subnav.show { transform: none; } }
.subnav a { flex: 0 0 auto; min-height: 40px; padding: 8px 14px; border-radius: 999px; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; transition: background .25s, color .25s; color: #c9ced8; }
.subnav a.is-active { background: #fff; color: var(--ink); }

/* menú de pantalla completa con imagen (P2) */
.menu { position: fixed; inset: 0; z-index: 180; background: var(--ink); color: #fff; visibility: hidden; opacity: 0; transition: opacity .3s, visibility 0s .3s; display: grid; grid-template-rows: auto 1fr auto; padding-top: env(safe-area-inset-top, 0px); padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)); }
.menu.open { visibility: visible; opacity: 1; transition: opacity .3s; }
.menu .top { height: 68px; display: flex; align-items: center; justify-content: space-between; padding-left: var(--gl); padding-right: var(--gr); }
.menu .top .brand { mix-blend-mode: normal; }
.menu .close { min-height: 44px; padding: 8px 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); font-weight: 700; font-size: 13px; }
.menu .body { padding-left: var(--gl); padding-right: var(--gr); display: grid; align-content: center; gap: 28px; overflow: auto; }
.menu .main { display: grid; gap: 2px; }
.menu .main a { font-family: var(--font-display); font-weight: 500; font-size: clamp(34px, 6.5vw, 76px); line-height: 1.02; letter-spacing: -.035em; padding: 6px 0; display: flex; align-items: baseline; gap: 16px; transform: translateY(18px); opacity: 0; transition: transform .6s var(--ease), opacity .5s; min-height: 48px; }
.menu.open .main a { transform: none; opacity: 1; }
.menu .main a small { font-family: var(--font-body); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: #9aa3b2; }
.menu .projects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.menu .projects a { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px; display: grid; align-content: end; padding: 12px; font-weight: 700; font-size: 14px; min-height: 48px; }
.menu .projects a img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
@media (hover: hover) and (pointer: fine) { .menu .projects a:hover img { transform: scale(1.05); } }
.menu .projects a span { position: relative; text-shadow: 0 1px 12px rgba(0,0,0,.6); }
.menu .projects a::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.6), transparent 60%); }
.menu .projects a span { z-index: 1; }
.menu .foot { padding-left: var(--gl); padding-right: var(--gr); display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; align-items: center; font-size: 13px; color: #9aa3b2; }
.menu .preview { display: none; }
@media (min-width: 1000px) {
  .menu .body { grid-template-columns: 1fr 1fr; align-items: center; gap: 24px 64px; }
  .menu .main a { font-size: clamp(30px, 3.4vw, 54px); padding: 4px 0; }
  .menu .projects { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-column: 1 / -1; }
  .menu .projects a { aspect-ratio: 16 / 9; }
  .menu .preview { display: block; position: relative; aspect-ratio: 3 / 2; max-height: 46vh; width: 100%; border-radius: 8px; overflow: hidden; background: #000; justify-self: end; }
  .menu .preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s, transform 1.2s var(--ease); transform: scale(1.06); }
  .menu .preview img.on { opacity: 1; transform: scale(1); }
}

/* ---------- hero ---------- */
.hero { position: relative; height: 100svh; min-height: 560px; display: grid; align-items: end; color: #fff; overflow: hidden; isolation: isolate; }
.hero.short { height: 78svh; min-height: 480px; }
.hero .media { position: absolute; inset: -6%; z-index: -2; will-change: transform; }
.hero .media img, .hero .media video { width: 100%; height: 100%; object-fit: cover; }
.hero .media img.kb { animation: kb 18s ease-in-out infinite alternate; }
@keyframes kb { from { transform: scale(1); } to { transform: scale(1.08); } }
.hero .shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.18) 48%, rgba(0,0,0,.22) 100%); }
.hero .content { position: relative; display: grid; gap: 14px; padding-bottom: clamp(28px, 6vw, 72px); padding-top: 120px; }
.hero .eyebrow { color: #d8dde6; }
.hero h1 { text-shadow: 0 2px 40px rgba(0,0,0,.3); }
.hero .lead { color: rgba(255,255,255,.88); }
.hero .foot { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; margin-top: 8px; }
.hero .cue { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; opacity: .85; }
.hero .cue i { width: 1px; height: 40px; background: rgba(255,255,255,.5); position: relative; overflow: hidden; display: block; }
.hero .cue i::after { content: ''; position: absolute; left: 0; top: -100%; width: 100%; height: 100%; background: #fff; animation: cue 1.8s var(--ease) infinite; }
@keyframes cue { 60%, 100% { top: 100%; } }
.hero .plogo { height: clamp(64px, 11vw, 120px); width: auto; opacity: .95; filter: drop-shadow(0 2px 14px rgba(0,0,0,.4)); }
.hero .vid-m { display: block; } .hero .img-d { display: none; }
@media (min-width: 800px) { .hero .vid-m { display: none; } .hero .img-d { display: block; } }
.hero .media .only { display: block; }
.hero-home .content { align-content: end; }
.has-subnav .hero .content { padding-bottom: clamp(84px, 12vw, 110px); }
.hero-home h1 { max-width: 9.5em; }

/* ---------- paisaje (spec 2) ---------- */
.paisaje { position: relative; height: 100vh; height: 100svh; min-height: 480px; overflow: hidden; color: #fff; isolation: isolate; }
.paisaje .media { position: absolute; left: 0; right: 0; top: -32%; height: 164%; z-index: -1; will-change: transform; }
.paisaje .media img { width: 100%; height: 100%; object-fit: cover; }
.paisaje .shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.6), transparent 55%); }
.paisaje .text { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 var(--gr) clamp(28px, 6vw, 72px) var(--gl); }
.paisaje .text h2 { font-size: clamp(32px, 5vw, 80px); max-width: 12em; }
@media (max-width: 799px) { .paisaje { height: 82svh; } }

/* ---------- proyectos: paneles (home) ---------- */
.panels { display: grid; gap: 4px; background: var(--ink); }
.panel { position: relative; height: 72svh; min-height: 440px; overflow: hidden; color: #fff; display: grid; align-content: end; padding: 24px var(--gr) 24px var(--gl); isolation: isolate; }
.panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; transition: transform 1.4s var(--ease); }
.panel::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(0,0,0,.66), transparent 55%); }
.panel .name { font-family: var(--font-display); font-weight: 500; font-size: clamp(40px, 7vw, 96px); letter-spacing: -.035em; line-height: .95; }
.panel .datum { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: #d8dde6; margin-top: 10px; font-weight: 600; }
.panel .go { position: absolute; top: 20px; right: var(--gr); width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.14); backdrop-filter: blur(8px); display: grid; place-items: center; transition: background .3s, transform .4s var(--ease); font-size: 18px; }
@media (hover: hover) and (pointer: fine) { .panel:hover img { transform: scale(1.05); } } @media (hover: hover) and (pointer: fine) { .panel:hover .go { background: #fff; color: var(--ink); transform: rotate(-45deg); } }
.panel .cover { position: absolute; inset: 0; z-index: 2; }
@media (min-width: 900px) {
  .panels { grid-template-columns: repeat(4, minmax(0, 1fr)); height: 100svh; min-height: 640px; }
  @media (hover: hover) and (pointer: fine) { .panels.four:hover .panel { } } .panel { height: auto; min-height: 0; transition: flex .8s var(--ease); }
  .panels { display: flex; } .panel { flex: 1 1 0; } @media (hover: hover) and (pointer: fine) { .panels:hover .panel { flex: .8; } } @media (hover: hover) and (pointer: fine) { .panels .panel:hover { flex: 2; } }
  .panel .name { font-size: clamp(30px, 2.9vw, 58px); }
  .panel .datum { opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .5s var(--ease); } @media (hover: hover) and (pointer: fine) { .panel:hover .datum { opacity: 1; transform: none; } }
}

/* ---------- modelos (isométrico protagonista) ---------- */
.models { display: grid; gap: 28px; }
.models-sum { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; color: var(--muted); } .models-sum b { color: var(--ink); font-weight: 700; }
.tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--paper-2); max-width: 100%; overflow-x: auto; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tabs button { white-space: nowrap; }
.tabs button { min-height: 44px; padding: 8px 18px; border-radius: 999px; font-weight: 700; font-size: 14px; color: var(--ink-2); transition: background .3s, color .3s, transform .3s var(--ease); }
.tabs button.on { background: var(--ink); color: #fff; }
.tabs button:active { transform: scale(.97); }
.stage { position: relative; display: grid; gap: 12px; justify-items: center; }
.stage-media { position: relative; width: 100%; aspect-ratio: var(--ar, 1); max-height: min(40svh, 420px); min-height: 240px; background: radial-gradient(60% 50% at 50% 55%, #fff 0%, var(--paper) 70%); border-radius: 10px; overflow: hidden; cursor: zoom-in; }
@media (min-width: 1000px) { .stage-media { max-height: min(52svh, 520px); } }
.stage .zoom { position: absolute; right: 12px; bottom: 12px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--ink); display: grid; place-items: center; box-shadow: 0 4px 16px rgba(0,0,0,.14); }
.stage img { position: absolute; inset: 2.5%; width: 95%; height: 95%; object-fit: contain; opacity: 0; transform: scale(.92) translateY(14px); transition: opacity .6s var(--ease), transform .9s var(--ease); }
.stage img.on { opacity: 1; transform: none; }
.stage .lvl { position: static; display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(29,29,29,.85); backdrop-filter: blur(8px); }
.stage .lvl button { min-height: 40px; padding: 6px 14px; border-radius: 999px; color: #c9ced8; font-size: 12px; font-weight: 700; }
.stage .lvl button.on { background: #fff; color: var(--ink); }
.stage .tag { position: absolute; z-index: 2; left: 12px; top: 12px; padding: 5px 9px; border-radius: 999px; background: rgba(255,255,255,.85); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.mdata { display: grid; gap: 22px; align-content: start; }
.mdata .mname { font-size: clamp(34px, 4.6vw, 64px); }
.mdata .mname .w { display: inline-block; overflow: hidden; vertical-align: top; } .mdata .mname .w span { display: inline-block; transition: transform .6s var(--ease); }
.mdata .nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; border-top: 1px solid var(--line); padding-top: 18px; }
@media (max-width: 520px) { .mdata .nums { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; } }
.mdata .nums div { display: grid; gap: 4px; min-width: 0; }
.mdata .nums b { font-family: var(--font-display); font-weight: 500; font-size: clamp(24px, 3vw, 40px); letter-spacing: -.03em; line-height: 1; overflow: hidden; height: 1.05em; display: block; }
.mdata .nums b span { display: block; transition: transform .55s var(--ease), opacity .4s; }
.mdata .nums b.flip span { transform: translateY(-110%); opacity: 0; }
.mdata .nums small { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.mdata ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; color: var(--ink-2); font-size: 15px; }
.mdata ul li { padding-left: 18px; position: relative; transition: opacity .4s, transform .5s var(--ease); } .mdata ul li::before { content: ''; position: absolute; left: 0; top: .62em; width: 8px; height: 1.5px; background: var(--blue); }
.mdata.swap ul li { opacity: 0; transform: translateX(10px); }
.mdata .price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.mdata .price b { font-family: var(--font-display); font-weight: 500; font-size: clamp(26px, 3vw, 40px); letter-spacing: -.03em; }
.mdata .price small { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.mphoto { aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; position: relative; }
.mphoto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s, transform 1.2s var(--ease); transform: scale(1.05); }
.mphoto img.on { opacity: 1; transform: none; }
.demo { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8a6100; background: #fbefcd; padding: 5px 9px; border-radius: 3px; justify-self: start; }
@media (min-width: 1000px) { .models { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; gap: clamp(28px, 4vw, 64px); } .models .stage { position: sticky; top: 24px; } }

/* ---------- galería sticky con foco central (spec 3) ---------- */
.gal-wrap { position: relative; }
.gal-sticky { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; overflow: hidden; }
.gal-head, .gal-dots { max-width: 100vw; }
.gal-head { padding: 0 var(--gr) 22px var(--gl); display: flex; justify-content: space-between; align-items: end; gap: 16px; }
.gal-count { white-space: nowrap; flex: 0 0 auto; font-family: var(--font-display); font-variant-numeric: tabular-nums; font-size: 14px; letter-spacing: .1em; color: var(--muted); }
.gal-track { display: flex; gap: 18px; padding-left: var(--gl); will-change: transform; }
.gal-item { flex: 0 0 min(58vw, 980px); position: relative; }
.gal-item .ph { display: block; width: 100%; aspect-ratio: 16 / 10; max-height: 70svh; border-radius: 8px; overflow: hidden; transform: scale(.965); opacity: .45; transition: transform .7s var(--ease), opacity .6s var(--ease); cursor: zoom-in; }
.gal-item .ph img { width: 100%; height: 100%; object-fit: cover; }
.gal-item .cap { margin-top: 12px; font-family: var(--font-display); font-size: clamp(18px, 2vw, 28px); font-weight: 500; letter-spacing: -.02em; filter: blur(6px); opacity: .5; transition: filter .55s var(--ease), opacity .55s; }
.gal-item.on .ph { transform: scale(1); opacity: 1; } .gal-item.on .cap { filter: blur(0); opacity: 1; }
@media (max-width: 799px) {
  .gal-wrap { height: auto !important; } .gal-sticky { position: static; height: auto; overflow: visible; }
  .gal-track { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-right: var(--gr); -webkit-overflow-scrolling: touch; }
  .gal-track::-webkit-scrollbar { display: none; }
  .gal-item { flex: 0 0 92vw; scroll-snap-align: center; }
  .gal-item .ph { transform: none; opacity: 1; aspect-ratio: 4 / 5; max-height: none; } .gal-item .cap { filter: none; opacity: 1; font-size: 17px; }
}

/* ---------- materiales sticky con clip-path (spec 4) ---------- */
.mats { position: relative; }
.mats-sticky { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding: 0 var(--gr) 0 var(--gl); }
.mats-list { display: grid; gap: 0; }
.mats-list button { text-align: left; padding: 16px 0; border-top: 1px solid rgba(255,255,255,.14); display: grid; gap: 4px; color: #9aa3b2; transition: color .4s; min-height: 48px; }
.mats-list button:last-child { border-bottom: 1px solid rgba(255,255,255,.14); }
.mats-list button b { font-family: var(--font-display); font-weight: 500; font-size: clamp(20px, 2.2vw, 30px); letter-spacing: -.02em; }
.mats-list button span { font-size: 14px; }
.mats-list button.on { color: #fff; }
.mats-stack { position: relative; aspect-ratio: 4 / 3; height: min(80svh, 56vw); max-height: 80svh; max-width: 100%; justify-self: end; border-radius: 8px; overflow: hidden; background: #000; }
.mats-stack .expand { position: absolute; right: 14px; bottom: 14px; z-index: 50; min-height: 40px; padding: 8px 14px; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; font-size: 12px; font-weight: 700; backdrop-filter: blur(8px); }
.mats-stack img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: inset(100% 0 0 0); transform: scale(1.14); transition: clip-path .9s var(--ease), transform 1.1s var(--ease); }
.mats-stack img.on { clip-path: inset(0 0 0 0); transform: scale(1); }
.mats-stack img.was { clip-path: inset(0 0 0 0); transform: scale(1); }
@media (max-width: 899px) {
  .mats { height: auto !important; } .mats-sticky { position: static; height: auto; grid-template-columns: 1fr; padding-block: 56px 24px; }
  .mats-stack { display: none; }
  .mats-list button { grid-template-columns: 1fr; }
  .mats-list button .mimg { display: block; aspect-ratio: 4 / 5; border-radius: 6px; overflow: hidden; margin-top: 10px; }
  .mats-list button .mimg img { width: 100%; height: 100%; object-fit: cover; }
  .mats-list button { color: #fff; }
}
@media (min-width: 900px) { .mats-list button .mimg { display: none; } }

/* ---------- bloques editoriales ---------- */
.split { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 96px); } .split.rev > :first-child { order: 2; } }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; border-top: 1px solid var(--line); }
.fact { padding: 16px 0; border-bottom: 1px solid var(--line); display: grid; gap: 4px; }
.fact small { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.fact b { font-family: var(--font-display); font-weight: 500; font-size: clamp(20px, 2vw, 28px); letter-spacing: -.02em; }
@media (min-width: 700px) { .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stats { display: grid; gap: 24px; }
.stat b { font-family: var(--font-display); font-weight: 500; font-size: clamp(44px, 6.5vw, 100px); letter-spacing: -.04em; line-height: 1; display: block; }
.stat span { display: block; margin-top: 6px; color: var(--muted); max-width: 18em; font-size: 15px; }
@media (min-width: 760px) { .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.frame { position: relative; overflow: hidden; border-radius: 8px; background: var(--paper-2); }
.frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.frame.r43 { aspect-ratio: 4 / 3; } .frame.r34 { aspect-ratio: 3 / 4; } .frame.r169 { aspect-ratio: 16 / 9; } .frame.r1 { aspect-ratio: 1; }
.frame .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 16px; font-size: 13px; color: #fff; background: linear-gradient(to top, rgba(0,0,0,.6), transparent); }
.mask img { clip-path: inset(0 0 100% 0); transform: scale(1.12); transition: clip-path 1.1s var(--ease), transform 1.4s var(--ease); }
.mask.in img { clip-path: inset(0 0 0 0); transform: scale(1); }
html.rm .mask img { clip-path: none; transform: none; }
.grid2 { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid2 .frame:nth-child(3n+1) { grid-column: span 2; aspect-ratio: 16 / 9; }
@media (min-width: 900px) { .grid2 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid2 .frame:nth-child(3n+1) { grid-column: span 1; aspect-ratio: 4 / 3; } .grid2 .frame:nth-child(4n+1) { grid-column: span 2; aspect-ratio: 16 / 9; } }

/* siguiente proyecto (P14) */
.next { position: relative; height: 70svh; min-height: 420px; overflow: hidden; color: #fff; display: grid; align-content: center; justify-items: start; padding: 0 var(--gr) 0 var(--gl); isolation: isolate; }
.next img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; transition: transform 1.6s var(--ease); }
.next::after { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(0,0,0,.42); transition: background .6s; }
@media (hover: hover) and (pointer: fine) { .next:hover img { transform: scale(1.05); } } @media (hover: hover) and (pointer: fine) { .next:hover::after { background: rgba(0,0,0,.3); } }
.next .eyebrow { color: #d8dde6; }
.next .name { font-family: var(--font-display); font-weight: 500; font-size: clamp(48px, 10vw, 150px); letter-spacing: -.04em; line-height: .95; margin-top: 10px; }
.next .cover { position: absolute; inset: 0; }

/* pasos (es más fácil) */
.steps { position: relative; }
.steps-sticky { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 72px); align-items: center; padding: 0 var(--gr) 0 var(--gl); }
.steps-list { display: grid; gap: 0; position: relative; }
.steps-list .line { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--line); }
.steps-list .line i { position: absolute; left: 0; top: 0; width: 100%; height: 0; background: var(--blue); transition: height .5s var(--ease); display: block; }
.steps-list button { text-align: left; padding: 14px 0 14px 28px; display: grid; gap: 4px; color: var(--muted); transition: color .4s; min-height: 48px; }
.steps-list button .n { font-family: var(--font-display); font-size: 12px; letter-spacing: .16em; }
.steps-list button b { font-family: var(--font-display); font-weight: 500; font-size: clamp(20px, 2.4vw, 34px); letter-spacing: -.02em; }
.steps-list button.on { color: var(--ink); }
.steps-stage { position: relative; display: grid; gap: 18px; }
.steps-stage .frame { aspect-ratio: 4 / 3; max-height: 60svh; }
.steps-stage .frame img { position: absolute; inset: 0; opacity: 0; clip-path: inset(100% 0 0 0); transform: scale(1.12); transition: clip-path .9s var(--ease), transform 1.1s var(--ease), opacity .2s; }
.steps-stage .frame img.on { opacity: 1; clip-path: inset(0); transform: scale(1); } .steps-stage .frame img.was { opacity: 1; clip-path: inset(0); transform: scale(1); }
.steps-stage .frame .cap { z-index: 20; }
.steps-stage .txt { position: relative; min-height: 5.5em; }
.steps-stage .txt p { position: absolute; inset: 0; opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .5s var(--ease); color: var(--ink-2); font-size: clamp(16px, 1.3vw, 19px); max-width: 36em; }
.steps-stage .txt p.on { opacity: 1; transform: none; }
.steps-m { display: grid; gap: 28px; }
.step-m { display: grid; gap: 12px; }
.step-m .n { font-family: var(--font-display); font-size: 12px; letter-spacing: .16em; color: var(--blue); }
.step-m .frame { aspect-ratio: 16 / 10; }
@media (min-width: 900px) { .steps-m { display: none; } }
@media (max-width: 899px) { .steps { display: none; } }

/* ---------- mapa propio ---------- */
.map-grid { display: grid; gap: 20px; }
.map { background: #fff; border-radius: 8px; padding: 10px; overflow: hidden; }
.map svg { width: 100%; height: auto; display: block; }
.map .ring { fill: none; stroke: var(--line); stroke-dasharray: 4 6; }
.map .ring-label { font-family: var(--font-display); font-size: 1em; letter-spacing: .1em; fill: var(--muted); font-weight: 600; text-transform: uppercase; }
.map .road { fill: none; stroke: #e6ebf3; stroke-width: 10; stroke-linecap: round; } .map .road.main { stroke: #d6deea; stroke-width: 16; }
.map .pin { transition: opacity .3s; } .map .pin.is-dim { opacity: .15; }
.map .pin circle { fill: var(--ink); stroke: #fff; stroke-width: 2; }
.map .pin.supermercado circle { fill: #e07b39; } .map .pin.clinica circle { fill: #d64545; } .map .pin.colegios circle { fill: #7c4dff; } .map .pin.autopista circle { fill: #4a5568; } .map .pin.parque circle { fill: #178f55; } .map .pin.playa circle { fill: #0ea5c6; }
.map .pin text { font-family: var(--font-body); font-size: 1em; font-weight: 700; fill: var(--ink); paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }
.map .pin .min { font-size: .9em; fill: var(--muted); font-weight: 600; }
.map .home .pulse { fill: var(--blue); opacity: .18; transform-box: fill-box; transform-origin: center; animation: pulse 2.6s ease-out infinite; }
.map .home .core { fill: var(--blue); stroke: #fff; stroke-width: 3; }
.map .home text { font-family: var(--font-display); font-weight: 700; font-size: 1.2em; letter-spacing: .08em; text-transform: uppercase; fill: var(--ink); paint-order: stroke; stroke: #fff; stroke-width: 4px; }
@keyframes pulse { 0% { transform: scale(.4); opacity: .4; } 100% { transform: scale(1.8); opacity: 0; } }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; font-weight: 600; color: var(--ink-2); transition: background .25s, color .25s; }
.chip.is-on { background: var(--ink); color: #fff; }
.svc-list { display: grid; gap: 6px; }
.svc { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; background: #fff; border-radius: 6px; font-size: 14px; transition: opacity .3s; }
.svc.is-dim { opacity: .35; } .svc i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.svc.supermercado i { background: #e07b39; } .svc.clinica i { background: #d64545; } .svc.colegios i { background: #7c4dff; } .svc.autopista i { background: #4a5568; } .svc.parque i { background: #178f55; } .svc.playa i { background: #0ea5c6; }
.svc b { font-family: var(--font-display); font-weight: 600; } .svc small { color: var(--muted); display: block; font-size: 12px; }
@media (min-width: 1000px) { .map-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; } }

/* ---------- FAQ ---------- */
.faq { display: grid; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 18px 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(17px, 1.6vw, 22px); min-height: 48px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .plus { width: 28px; height: 28px; border-radius: 50%; flex: 0 0 28px; box-shadow: inset 0 0 0 1.5px var(--line); display: grid; place-items: center; font-size: 18px; transition: transform .35s var(--ease), background .3s; }
.faq details[open] summary .plus { transform: rotate(45deg); background: var(--ink); color: #fff; box-shadow: none; }
.faq .a { padding: 0 0 20px; color: var(--ink-2); max-width: 46em; }
.dark .faq, .dark .faq details { border-color: rgba(255,255,255,.14); } .dark .faq .a { color: #c9ced8; } .dark .faq summary .plus { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.3); } .dark .faq details[open] summary .plus { background: #fff; color: var(--ink); }

/* ---------- contacto ---------- */
.contact { background: var(--ink); color: #fff; }
.contact-grid { display: grid; gap: 32px; }
.contact .big { font-size: clamp(34px, 5vw, 72px); }
.ways { display: grid; gap: 0; margin-top: 10px; }
.way { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid rgba(255,255,255,.14); font-size: 15px; }
.way small { display: block; font-size: 11px; color: #9aa3b2; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; }
.way .val { font-family: var(--font-display); font-weight: 500; font-size: 18px; user-select: all; }
.copy { font-size: 12px; font-weight: 700; padding: 8px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); min-height: 40px; display: inline-flex; align-items: center; }
.form { display: grid; gap: 14px; background: rgba(255,255,255,.05); padding: clamp(20px, 3vw, 32px); border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.form .f2 { display: grid; gap: 14px; } @media (min-width: 640px) { .form .f2 { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 6px; } .field label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: #9aa3b2; }
.field input, .field select, .field textarea { width: 100%; min-height: 48px; padding: 10px 14px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 8px; color: #fff; }
.field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
.field select option { color: var(--ink); background: #fff; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: #9ec0ff; outline: none; }
.field input::placeholder, .field textarea::placeholder { color: #8a97ab; }
.form .actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .form .hint { font-size: 12px; color: #9aa3b2; }
.form .done { display: grid; gap: 10px; padding: 16px; background: rgba(31,180,87,.12); border: 1px solid rgba(31,180,87,.4); border-radius: 8px; font-size: 14px; } .form .done a { font-weight: 700; text-decoration: underline; }
.form .err { font-size: 13px; color: #ffb4b4; }
@media (min-width: 1000px) { .contact-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; } }
.fab { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(14px, env(safe-area-inset-bottom, 0px)); z-index: 155; display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; background: var(--wa); color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.25); transition: transform .35s var(--ease); }
@media (hover: hover) and (pointer: fine) { .fab:hover { transform: translateY(-2px) scale(1.04); } } .fab svg { width: 26px; height: 26px; fill: #fff; }
.fab[hidden] { display: none; }
.footer { background: #0e0f12; color: #9aa3b2; padding-block: 48px 28px; font-size: 14px; }
.footer .cols { display: grid; gap: 24px; } @media (min-width: 760px) { .footer .cols { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer .brand { color: #fff; mix-blend-mode: normal; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .footer ul a, .footer ul li { display: inline-block; padding-block: 10px; }
@media (hover: hover) and (pointer: fine) { .footer a:hover { color: #fff; } }
.footer .bottom { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; margin-top: 36px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); font-size: 13px; }
.motion-toggle { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; } .motion-toggle input { accent-color: var(--blue); }

/* blog / varios */
.posts { display: grid; gap: 18px; } @media (min-width: 760px) { .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1100px) { .posts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.post { display: grid; gap: 12px; position: relative; }
.post .frame { aspect-ratio: 16 / 10; } .post .frame img { transition: transform 1.2s var(--ease); } @media (hover: hover) and (pointer: fine) { .post:hover .frame img { transform: scale(1.05); } }
.post h3 { font-size: 22px; } .post p { color: var(--ink-2); font-size: 15px; }
.post .meta { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--muted); display: flex; gap: 10px; }
.post .cover { position: absolute; inset: 0; }
.prose { max-width: 42em; display: grid; gap: 18px; font-size: 17px; line-height: 1.7; } .prose h2 { font-size: clamp(26px, 3vw, 36px); margin-top: 12px; } .prose ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.quotes { display: grid; gap: 16px; } @media (min-width: 760px) { .quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.quote { display: grid; gap: 14px; padding: 24px; border-radius: 8px; background: #fff; } .quote p { color: var(--ink-2); font-size: 15px; } .quote .who { font-size: 13px; } .quote .who small { display: block; color: var(--muted); }
.feature-list { display: grid; border-top: 1px solid var(--line); }
.feature { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.feature .n { font-family: var(--font-display); font-size: 26px; color: var(--blue); letter-spacing: -.03em; line-height: 1; }
.feature h3 { margin-bottom: 6px; } .feature p { color: var(--ink-2); }
.chat { background: #fff; color: var(--ink); border-radius: 14px; padding: 18px; display: grid; gap: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.25); max-width: 420px; }
.chat .top { display: flex; align-items: center; gap: 10px; font-size: 14px; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.chat .top i { width: 36px; height: 36px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; font-style: normal; font-weight: 700; font-family: var(--font-display); }
.chat .top small { display: block; color: var(--muted); font-size: 12px; }
.chat .msg { padding: 10px 14px; border-radius: 14px; font-size: 14px; max-width: 86%; } .chat .msg.me { background: var(--blue); color: #fff; margin-left: auto; border-bottom-right-radius: 4px; } .chat .msg.her { background: var(--paper-2); border-bottom-left-radius: 4px; }
.lightbox { position: fixed; inset: 0; z-index: 185; background: rgba(0,0,0,.94); display: grid; place-items: center; padding: 20px; visibility: hidden; opacity: 0; transition: opacity .3s, visibility 0s .3s; }
.lightbox.open { visibility: visible; opacity: 1; transition: opacity .3s; }
.lightbox.paper { background: rgba(243,239,232,.98); } .lightbox.paper figcaption { color: var(--muted); } .lightbox.paper .close { background: var(--ink); color: #fff; } .lightbox.paper img { max-height: 90svh; }
.lightbox img { max-width: 100%; max-height: 86svh; object-fit: contain; border-radius: 6px; }
.lightbox .close { position: absolute; top: max(16px, env(safe-area-inset-top, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); width: 48px; height: 48px; border-radius: 50%; background: #fff; color: var(--ink); display: grid; place-items: center; font-size: 22px; }
.phase-note { position: fixed; right: max(12px, env(safe-area-inset-right, 0px)); top: calc(env(safe-area-inset-top, 0px) + 74px); z-index: 140; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--muted); background: rgba(244,244,246,.7); padding: 4px 7px; border-radius: 3px; pointer-events: none; opacity: .8; font-size: 9px; }

img.lazy { opacity: 0; transition: opacity .6s; } img.lazy.ok { opacity: 1; }

/* ---------- reducir movimiento (spec 10) ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-property: opacity, background-color, color, border-color, box-shadow, visibility !important; }
}
html.rm *, html.rm *::before, html.rm *::after { animation: none !important; transition-property: opacity, background-color, color, border-color, box-shadow, visibility !important; }
html.rm .mask, html.rm .gal-item .ph, html.rm .gal-item .cap, html.rm .stage img, html.rm .mats-stack img { transition: none !important; filter: none !important; }
html.rm .gal-sticky { position: static; height: auto; } html.rm .gal-wrap { height: auto !important; } html.rm .gal-track { overflow-x: auto; }
html.rm .gal-item .ph { transform: none; opacity: 1; } html.rm .gal-item .cap { opacity: 1; }


/* ---------- ronda 3 ---------- */
/* hero: secuencia de clips */
.hero .seq { position: absolute; inset: 0; }
.hero .seq video, .hero .seq img.seq-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.4s ease; }
.hero .seq video.on, .hero .seq img.seq-img.on { opacity: 1; }
.hero .seq img.seq-img { transform: scale(1.08); }
.hero .seq img.seq-img.on { animation: kb2 8s ease-out forwards; }
@keyframes kb2 { from { transform: scale(1.08) translate3d(1%, 1%, 0); } to { transform: scale(1.16) translate3d(-1%, -0.5%, 0); } }
.hero .seq img.seq-img:nth-child(even).on { animation-name: kb3; }
@keyframes kb3 { from { transform: scale(1.16) translate3d(-1%, 0, 0); } to { transform: scale(1.08) translate3d(1%, 1%, 0); } }
html.rm .hero .seq img.seq-img.on { animation: none; transform: none; }
.hero .media video.img-d { display: none; } @media (min-width: 800px) { .hero .media video.img-d { display: block; } }

/* la salsa secreta */
.pitch-grid { display: grid; gap: 32px; }
.pitch-list { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.pitch-list li { display: grid; grid-template-columns: 44px 1fr; gap: 4px 14px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.pitch-list li .n { grid-row: span 2; font-family: var(--font-display); font-size: 22px; color: var(--blue); letter-spacing: -.03em; line-height: 1; }
.pitch-list li b { font-family: var(--font-display); font-weight: 500; font-size: clamp(19px, 2vw, 26px); letter-spacing: -.02em; }
.pitch-list li span:last-child { color: var(--ink-2); font-size: 15px; }
.dark .pitch-list, .dark .pitch-list li { border-color: rgba(255,255,255,.14); } .dark .pitch-list li span:last-child { color: #c9ced8; } .dark .pitch-list li .n { color: var(--sky); }
@media (min-width: 900px) { .pitch-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 96px); align-items: center; } }

/* ilustraciones del journey */
.frame.ilu { background: #f3eddc; }
.frame.ilu img { object-fit: cover; }
.journey-m { position: absolute; left: calc(var(--gl) + 5px); top: 0; bottom: 0; width: 24px; pointer-events: none; }
.journey-m svg { width: 24px; height: 100%; }
.journey-m .track { stroke: var(--line); stroke-width: 2; fill: none; vector-effect: non-scaling-stroke; }
.journey-m .fill { stroke: var(--blue); stroke-width: 2; fill: none; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; }
.steps-m { position: relative; } .step-m { padding-left: 28px; position: relative; }
.step-m::before { content: ''; position: absolute; left: 0; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 2px var(--line); transition: box-shadow .4s, background .4s; }
.step-m.in::before { background: var(--blue); box-shadow: inset 0 0 0 2px var(--blue); }

/* dimensión (Concasa) */
.dims { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; border-top: 1px solid var(--line); padding-top: 22px; }
.dim b { font-family: var(--font-display); font-weight: 500; font-size: clamp(40px, 5vw, 72px); letter-spacing: -.04em; line-height: 1; display: block; }
.dim span { display: block; margin-top: 6px; color: var(--muted); font-size: 14px; max-width: 16em; }
@media (min-width: 760px) { .dims { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* inversión: gráfico + simulador */
.invest .chart-wrap { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: clamp(16px, 2.5vw, 28px); }
.invest .chart-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; }
.invest .year-pick b { font-family: var(--font-display); font-size: clamp(28px, 3.5vw, 44px); letter-spacing: -.03em; line-height: 1; display: block; margin-top: 4px; }
.invest .chart { margin-top: 18px; touch-action: pan-y; cursor: crosshair; }
.invest .chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.invest .chart .grid line { stroke: rgba(255,255,255,.1); stroke-width: 1; }
.invest .chart .axis text { fill: #9aa3b2; font-size: 11px; font-family: var(--font-body); }
.invest .chart .l1 { fill: none; stroke: var(--blue); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.invest .chart .l2 { fill: none; stroke: #e0a24a; stroke-width: 2; stroke-dasharray: 6 5; stroke-linejoin: round; stroke-linecap: round; }
.invest .chart .a1 { fill: url(#gBlue); opacity: .9; }
.invest .chart .cursor { stroke: rgba(255,255,255,.5); stroke-width: 1; stroke-dasharray: 3 4; }
.invest .chart .dot { stroke: var(--ink); stroke-width: 2; } .invest .chart .dot.d1 { fill: var(--blue); } .invest .chart .dot.d2 { fill: #e0a24a; }
.invest .chart .lbl { font-family: var(--font-display); font-size: 12px; font-weight: 600; fill: #fff; paint-order: stroke; stroke: var(--ink); stroke-width: 4px; stroke-linejoin: round; }
.invest .chart .proj { fill: rgba(255,255,255,.04); }
.invest .chart .proj-lbl { fill: #9aa3b2; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; font-family: var(--font-display); }
.invest .legend { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 14px; font-size: 13px; color: #c9ced8; }
.invest .legend i { display: inline-block; width: 18px; height: 3px; border-radius: 2px; margin-right: 8px; vertical-align: middle; } .invest .legend i.s1 { background: var(--blue); } .invest .legend i.s2 { background: repeating-linear-gradient(90deg, #e0a24a 0 5px, transparent 5px 9px); }
.invest .legend b { color: #fff; margin-left: 6px; }
.invest .sim { margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12); }
.invest .sim-grid { display: grid; gap: 12px; margin-top: 16px; } @media (min-width: 700px) { .invest .sim-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.invest .sim-out { display: grid; gap: 12px; margin-top: 18px; } @media (min-width: 700px) { .invest .sim-out { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.invest .sim-out div { background: rgba(255,255,255,.05); border-radius: 8px; padding: 14px 16px; }
.invest .sim-out small { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #9aa3b2; font-weight: 700; }
.invest .sim-out b { font-family: var(--font-display); font-weight: 500; font-size: clamp(24px, 2.6vw, 36px); letter-spacing: -.03em; display: block; margin-top: 6px; }

/* lightbox */
.lightbox figure { margin: 0; display: grid; gap: 10px; justify-items: center; max-width: min(1400px, 100%); }
.lightbox figcaption { color: #c9ced8; font-size: 14px; }
.lightbox img { transform: scale(.96); transition: transform .4s var(--ease); } .lightbox.open img { transform: none; }
[data-lb] { cursor: zoom-in; }

/* mapa: estilo dibujo */
.map .block { fill: #eef2f7; stroke: #dde4ee; stroke-width: 1; }
.map .green { fill: #dfeee0; stroke: none; }
.map .water { fill: #d9ecf7; stroke: none; }
.map .road { stroke: #fff; stroke-width: 9; } .map .road.main { stroke: #f6e7bd; stroke-width: 14; }
.map .road-edge { fill: none; stroke: #cfd6e2; stroke-width: 11; stroke-linecap: round; } .map .road-edge.main { stroke: #e2cf8f; stroke-width: 16; }
.map .ring { stroke: #b8c2d2; }

/* panel: ubicación destacada */
.panel .datum .loc { font-family: var(--font-display); letter-spacing: .16em; font-size: 12px; color: #fff; font-weight: 700; }
/* galería: controles evidentes */
.gal-nav { display: inline-flex; align-items: center; gap: 10px; }
.gal-btn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--line); font-size: 18px; transition: background .25s, color .25s, transform .3s var(--ease); background: #fff; }
@media (hover: hover) and (pointer: fine) { .gal-btn:hover { background: var(--ink); color: #fff; } } .gal-btn:active { transform: scale(.95); }
.gal-dots { display: flex; gap: 6px; padding: 14px var(--gr) 0 var(--gl); }
.gal-dots i { display: block; width: 18px; height: 3px; border-radius: 2px; background: var(--line); transition: background .3s, width .3s var(--ease); }
.gal-dots i.on { background: var(--ink); width: 34px; }
.gal-hint { font-weight: 700; color: var(--ink); margin-right: 8px; }
@media (min-width: 800px) { .gal-hint { display: none; } }

/* formulario: consentimientos y estados */
.form .check { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; font-size: 13px; color: #c9ced8; cursor: pointer; }
.form .check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--blue); }
.form .btn.busy { opacity: .6; pointer-events: none; }
.form .link-btn { font: inherit; font-weight: 700; text-decoration: underline; color: #fff; margin-left: 6px; min-height: 40px; }
.form .done { grid-template-columns: 1fr; } .form .done span { color: #c9ced8; }

/* contenedores que alojan la nota */
.gal-item .ph, .mats-list button .mimg, .menu .projects a { position: relative; }
/* Nota legal en renders / isométricos / IA (no fotos): pequeña y discreta */
.ilus { position: absolute; right: 10px; bottom: 8px; z-index: 3; pointer-events: none; font-size: 9px; line-height: 1; letter-spacing: .02em; font-weight: 500; color: rgba(255,255,255,.78); text-shadow: 0 1px 2px rgba(0,0,0,.55); white-space: nowrap; }
.stage-media .ilus, .ilu .ilus, .steps-stage .ilus { color: rgba(29,29,29,.55); text-shadow: none; }
.stage-media .ilus { right: auto; left: 12px; bottom: 10px; }
/* en pilas de imágenes, solo la nota de la imagen visible */
.stage-media img:not(.on) + .ilus, .mphoto img:not(.on) + .ilus, .mats-stack img:not(.on) + .ilus, .seq > :not(.on) + .ilus, .steps-stage img:not(.on) + .ilus, .menu .preview .ilus { display: none; }
@media (min-width: 900px) { .ilus { font-size: 10px; } }
/* en heros y paisajes a pantalla completa: por encima del botón de WhatsApp y la píldora de secciones */
.hero .media .ilus { top: calc(5.4% + 112px); bottom: auto; right: calc(5.4% + 14px); } /* la media del hero sobresale 6 % por lado (parallax) */
.paisaje .media .ilus { top: calc(19.5% + 18px); bottom: auto; right: 14px; } /* la media del paisaje sobresale 32 % arriba (contra-scroll) */

/* ---------- ajustes 19-oct (notas de Alfonso) ---------- */
/* hero: dato clave del producto, más visible que el párrafo */
.hero .hero-key { margin-top: 14px; font-family: var(--font-display); font-weight: 600; font-size: clamp(18px, 2.1vw, 28px); letter-spacing: -.01em; line-height: 1.2; color: #fff; display: inline-flex; align-items: center; gap: 10px; }
.hero .hero-key::before { content: ''; width: 28px; height: 2px; background: currentColor; opacity: .7; flex: 0 0 auto; }
/* precio real: nota discreta en lugar de "precio de ejemplo" */
.mdata .price .price-note { font-size: 12px; color: var(--muted); flex-basis: 100%; }
/* botones contorneados sobre fondo claro: texto oscuro (antes heredaban blanco) */
.feature .btn.ghost { color: var(--ink); } @media (hover: hover) and (pointer: fine) { .feature .btn.ghost:hover { background: rgba(0,0,0,.06); } }
.dark .feature .btn.ghost, .contact .feature .btn.ghost { color: #fff; }
/* otros proyectos */
.others { background: var(--ink); color: #fff; }
.others .eyebrow { color: #9aa3b2; }
.others-grid { display: grid; gap: 14px; margin-top: 28px; }
.other { position: relative; display: block; overflow: hidden; border-radius: 8px; aspect-ratio: 4 / 3; isolation: isolate; color: #fff; }
.other img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; transition: transform 1.2s var(--ease); }
.other::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,0) 62%); }
@media (hover: hover) and (pointer: fine) { .other:hover img { transform: scale(1.05); } }
.other-txt { position: absolute; left: 18px; right: 56px; bottom: 16px; display: grid; gap: 4px; }
.other .loc { font-family: var(--font-display); letter-spacing: .16em; font-size: 11px; font-weight: 700; }
.other .name { font-family: var(--font-display); font-weight: 500; font-size: clamp(26px, 3vw, 40px); letter-spacing: -.03em; line-height: 1; }
.other .datum { font-size: 13px; color: #d8dde6; font-weight: 600; }
.other .go { position: absolute; right: 16px; bottom: 16px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.16); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: transform .35s var(--ease); }
@media (hover: hover) and (pointer: fine) { .other:hover .go { transform: translateX(4px); } }
@media (min-width: 800px) { .others-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .other { aspect-ratio: 3 / 4; } }
@media (min-width: 1200px) { .other { aspect-ratio: 4 / 5; } }
/* galería en escritorio: las fotos llenan el alto disponible (sin franjas vacías arriba y abajo) */
@media (min-width: 800px) {
  .gal-wrap.sec { padding-top: 0; padding-bottom: 0; }
  .gal-sticky { align-content: start; padding: max(64px, 8svh) 0 24px; box-sizing: border-box; }
  .gal-item { flex: 0 0 min(64vw, calc((100svh - 330px) * 1.6)); }
  .gal-item .ph { aspect-ratio: auto; height: calc(100svh - 330px); max-height: none; }
}
/* ---------- mapa con posiciones reales · estilo de mapa actual, móvil primero (rediseño 19-oct) ---------- */
.map.ilustrado { background: #f2f0ea; padding: 0; position: relative; border-radius: 16px; box-shadow: inset 0 0 0 1px rgba(29,29,29,.06); }
.map.ilustrado svg { font-family: var(--font-body); }
.map.ilustrado .m-sea { fill: #a9d6ea; } .map.ilustrado .m-land { fill: #f2f0ea; }
.map.ilustrado .m-sea-n { font-family: var(--font-display); font-weight: 600; letter-spacing: .32em; fill: #5d97b3; text-transform: uppercase; }
.map.ilustrado .m-road-c { fill: none; stroke: #ddd7cb; stroke-linecap: round; stroke-linejoin: round; } .map.ilustrado .m-road-c.main { stroke: #e9b44c; }
.map.ilustrado .m-road { fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; } .map.ilustrado .m-road.main { stroke: #fbd67a; }
.map.ilustrado .m-road-n { font-weight: 600; letter-spacing: .02em; fill: #8b8579; paint-order: stroke; stroke: #f2f0ea; stroke-width: 4px; stroke-linejoin: round; }
.map.ilustrado .m-shield rect { fill: #fff; stroke: #c99a2e; stroke-width: 1.5; } .map.ilustrado .m-shield text { font-family: var(--font-display); font-weight: 700; fill: #6b4f12; text-anchor: middle; dominant-baseline: central; }
.map.ilustrado .m-scale path { stroke: #4a4f58; stroke-linecap: round; } .map.ilustrado .m-scale text { font-weight: 700; fill: #4a4f58; letter-spacing: .06em; }
.map.ilustrado .m-north circle { fill: #fff; } .map.ilustrado .m-north path { fill: #1d1d1d; }
.map.ilustrado .pin { cursor: pointer; transition: opacity .25s ease; } .map.ilustrado .pin.is-dim { opacity: .18; pointer-events: none; }
.map.ilustrado .pin .pt { transition: transform .22s var(--ease-out); } .map.ilustrado .pin.is-sel .pt { transform: scale(1.28); }
.map.ilustrado .pin .dot { stroke: #fff; stroke-width: 2.5; }
.map.ilustrado .pin .num { stroke: none; font-family: var(--font-display); font-weight: 700; fill: #fff; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.map.ilustrado .pin .arrow { fill: #4a4f58; }
.map.ilustrado .pin .lbl { font-weight: 600; fill: var(--ink); paint-order: stroke; stroke: #f2f0ea; stroke-width: 5px; stroke-linejoin: round; transition: opacity .2s ease; }
.map.ilustrado .pin .lbl-min { font-weight: 500; fill: #5f6672; paint-order: stroke; stroke: #f2f0ea; stroke-width: 5px; stroke-linejoin: round; transition: opacity .2s ease; }
.map.ilustrado.has-sel .pin.is-sel .lbl, .map.ilustrado.has-sel .pin.is-sel .lbl-min { opacity: 0; }
.map.ilustrado .callout { opacity: 0; transform: scale(.94); transition: opacity .18s var(--ease-out), transform .22s var(--ease-out); pointer-events: none; }
.map.ilustrado .callout.on { opacity: 1; transform: none; }
.map.ilustrado .callout rect, .map.ilustrado .callout path { fill: #fff; }
.map.ilustrado .callout .c1 { font-weight: 700; fill: var(--ink); text-anchor: middle; } .map.ilustrado .callout .c2 { font-weight: 600; fill: var(--blue); text-anchor: middle; font-variant-numeric: tabular-nums; }
.map.ilustrado .pin.supermercado .dot { fill: #e07b39; } .map.ilustrado .pin.clinica .dot { fill: #d64545; } .map.ilustrado .pin.colegios .dot { fill: #7c4dff; } .map.ilustrado .pin.autopista .dot { fill: #4a5568; } .map.ilustrado .pin.parque .dot { fill: #178f55; } .map.ilustrado .pin.playa .dot { fill: #0e8fb0; } .map.ilustrado .pin.centro .dot { fill: #8a5a2b; } .map.ilustrado .pin.aeropuerto .dot { fill: #2f6fb3; }
.map.ilustrado .home .halo { fill: var(--blue); opacity: .16; transform-box: fill-box; transform-origin: center; }
.map.ilustrado.live .home .halo { animation: halo 2.4s var(--ease-out) 3; }
@keyframes halo { 0% { transform: scale(1); opacity: .16; } 60% { transform: scale(1.9); opacity: 0; } 61% { transform: scale(.7); opacity: 0; } 100% { transform: scale(1); opacity: .16; } }
.map.ilustrado .home .core { fill: var(--blue); stroke: #fff; stroke-width: 3; }
.map.ilustrado .home .tag rect, .map.ilustrado .home .tag path { fill: var(--blue); }
.map.ilustrado .home .tag-t { fill: #fff; font-family: var(--font-display); font-weight: 700; letter-spacing: .14em; text-anchor: middle; dominant-baseline: central; stroke: none; }
.map.ilustrado .m-credit { position: absolute; right: 10px; bottom: 8px; font-size: 11px; color: #6b6255; background: rgba(242,240,234,.85); padding: 2px 6px; border-radius: 4px; }
/* lista de lugares */
.svc-list.geo { gap: 6px; align-content: start; }
.svc-list.geo .svc { width: 100%; text-align: left; grid-template-columns: auto 1fr auto; padding: 11px 14px; border-radius: 12px; box-shadow: inset 0 0 0 1px transparent; transition: box-shadow .2s ease, background-color .2s ease, transform .14s var(--ease-out); }
.svc-list.geo .svc .t { min-width: 0; font-weight: 600; } .svc-list.geo .svc small { font-weight: 500; }
.svc-list.geo .svc b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.svc-list.geo .svc.is-sel { box-shadow: inset 0 0 0 1.5px var(--blue); }
.svc-list.geo .svc:active { transform: scale(.98); }
.svc .n { font-family: var(--font-display); font-weight: 700; font-size: 11px; color: #fff; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; }
.svc.centro i { background: #8a5a2b; } .svc.aeropuerto i { background: #2f6fb3; }
.svc.supermercado .n { background: #e07b39; } .svc.clinica .n { background: #d64545; } .svc.colegios .n { background: #7c4dff; } .svc.autopista .n { background: #4a5568; } .svc.parque .n { background: #178f55; } .svc.playa .n { background: #0e8fb0; } .svc.centro .n { background: #8a5a2b; } .svc.aeropuerto .n { background: #2f6fb3; }
/* chips: una fila deslizable en móvil */
#mapa .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gl)) calc(-1 * var(--gr)); padding-inline: var(--gl) var(--gr); scroll-padding-inline: var(--gl); overscroll-behavior-x: contain; } #mapa .chips::-webkit-scrollbar { display: none; }
#mapa .chip { flex: 0 0 auto; min-height: 44px; }
@media (min-width: 1000px) {
  #mapa .chips { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }
  /* escritorio: el mapa cabe completo en la pantalla y la lista lo acompaña */
  .map-grid:has(.map.ilustrado) { grid-template-columns: auto minmax(320px, 1fr); }
  .map.ilustrado { width: min(calc((100svh - 180px) * var(--map-ar, 1)), calc((min(100vw, var(--max)) - 2 * var(--gx)) * .62)); position: sticky; top: 96px; }
  .svc-list.geo { gap: 4px; }
  .svc-list.geo .svc { padding: 8px 14px; }
  @media (hover: hover) and (pointer: fine) { .svc-list.geo .svc:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--line); } .svc-list.geo .svc.is-sel { box-shadow: inset 0 0 0 1.5px var(--blue); } }
}
/* móvil y tableta: carrusel de tarjetas bajo el mapa, sincronizado con los pines */
@media (max-width: 999px) {
  .map-grid:has(.map.ilustrado) { gap: 12px; }
  .svc-list.geo { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; margin-inline: calc(-1 * var(--gl)) calc(-1 * var(--gr)); padding: 2px var(--gr) 6px var(--gl); scroll-padding-inline: var(--gl); }
  .svc-list.geo::-webkit-scrollbar { display: none; }
  .svc-list.geo .svc { flex: 0 0 min(76vw, 300px); scroll-snap-align: start; min-height: 64px; box-shadow: 0 1px 2px rgba(0,0,0,.05), inset 0 0 0 1px var(--line); }
  .svc-list.geo .svc.is-sel { box-shadow: 0 6px 18px rgba(3,81,241,.14), inset 0 0 0 1.5px var(--blue); }
}
@media (max-width: 599px) { .hero .hero-key { font-size: 18px; } .hero .hero-key::before { display: none; } }

/* ---------- revisión de diseño 19-oct (Claude Code, skill revision-ui-concasa / Emil Kowalski) ---------- */
/* respuesta al presionar en controles pequeños (en táctil no hay hover) */
.chip, .capsule a, .capsule button, .subnav a, .copy, .stage .lvl button, .menu .close, .tabs button { transition-property: background-color, color, box-shadow, transform; transition-duration: .25s, .25s, .25s, .14s; transition-timing-function: ease, ease, ease, var(--ease-out); }
.chip:active, .capsule a:active, .capsule button:active, .subnav a:active, .copy:active, .stage .lvl button:active, .menu .close:active, .tabs button:active { transform: scale(.97); }
.btn:active, .gal-btn:active, .fab:active { transform: scale(.97); transition-duration: .14s; }
.other:active .go, .panel:active .go { transform: scale(.92); }
/* táctil en pantalla ancha (iPad): el dato del panel no depende del hover */
@media (min-width: 900px) and (hover: none) { .panel .datum { opacity: 1; transform: none; } }
/* controles: sin selección de texto ni menú al mantener el dedo (el contenido sigue siendo seleccionable) */
button, .chip, .tabs button, .subnav a, .capsule a, .btn { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* 19-oct (comentario de Alfonso): el texto del paso quedaba chico frente a la imagen en escritorio */
.steps-stage .frame { max-height: 50svh; }
.steps-stage .txt { min-height: 6.6em; }
.steps-stage .txt p { font-family: var(--font-display); font-weight: 500; font-size: clamp(19px, 1.7vw, 27px); line-height: 1.35; letter-spacing: -.01em; color: var(--ink); max-width: 30em; }
/* la nota de render quedaba debajo de las imágenes apiladas (su z-index crece al cambiar de imagen) */
.mats-stack .ilus { z-index: 60; } .steps-stage .frame .ilus { z-index: 21; }

/* ---- Entrada HOME definitiva (E-040, candidato 19-oct-2026): formulario accesible en móvil ---- */
.field input, .field select, .field textarea { font-size: 16px; } /* 16 px: iOS no hace zoom al enfocar */
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #ffb4b4; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible, .form .check input:focus-visible, .form .link-btn:focus-visible { outline: 2px solid #9ec0ff; outline-offset: 2px; }
.form .field-err { display: block; font-size: 13px; line-height: 1.4; color: #ffb4b4; overflow-wrap: anywhere; } .form .field-err[hidden] { display: none; }
.form .check { min-height: 44px; padding: 4px 0; touch-action: manipulation; } /* toda la fila es objetivo táctil (≥ 44 px) */
.form .check input { width: 24px; height: 24px; margin: 0; }
.form .check { grid-template-columns: 24px 1fr; }
.form .check span { overflow-wrap: anywhere; }
.form .wa-consent { display: grid; gap: 4px; padding: 12px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.form .wa-consent[hidden] { display: none; }
.form .wa-consent .hint { margin: 0 0 0 34px; font-size: 13px; color: #b4bccb; }
.form .hint { font-size: 13px; color: #b4bccb; }
.form .err { font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; } .form .err[hidden] { display: none; }
.form .done:focus { outline: none; } .form .done:focus-visible { outline: 2px solid #9ec0ff; outline-offset: 2px; }
.form .link-btn { min-height: 44px; touch-action: manipulation; }
.form .btn:active, .form .link-btn:active { transform: scale(.97); }
/* V3.1 · contraste de la acción WhatsApp DEL FORMULARIO (antes blanco sobre --wa = 2,72:1). Texto --ink sobre --wa = 6,20:1; con :hover (#179a49, el de siempre) 4,62:1.
   Foco con el mismo anillo claro que los demás controles del formulario (el azul global daba 2,77:1 sobre el fondo oscuro). Alcance: solo .form .btn.wa; el .btn.wa / .fab del resto del sitio no se tocan. */
.form .btn.wa { color: var(--ink); }
.form .btn.wa:focus-visible { outline: 2px solid #9ec0ff; outline-offset: 2px; }
.form .actions .btn { min-height: 48px; }
@media (max-width: 380px) { .form .actions .btn { flex: 1 1 100%; justify-content: center; } }

.field input::placeholder, .field textarea::placeholder { color: #aab4c6; } /* ≥ 4,5:1 sobre el campo (antes #8a97ab ≈ 3,9:1) */
/* Reflujo a 200 % de zoom (≈ 160–195 px): la columna del contacto no puede ensancharse por el contenido mínimo de las filas ni de los botones */
.contact-grid { grid-template-columns: minmax(0, 1fr); } @media (min-width: 1000px) { .contact-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.way { flex-wrap: wrap; } .way .val { overflow-wrap: anywhere; min-width: 0; }
.form .btn { white-space: normal; max-width: 100%; }
.form { min-width: 0; grid-template-columns: minmax(0, 1fr); } .form .f2 { grid-template-columns: minmax(0, 1fr); } @media (min-width: 640px) { .form .f2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.field { min-width: 0; } .field input, .field select, .field textarea { min-width: 0; max-width: 100%; box-sizing: border-box; }
@media (max-width: 240px) { .form { padding: 14px; } .field input, .field select, .field textarea { padding: 10px; } }
.form .check { grid-template-columns: 24px minmax(0, 1fr); } .form .check span, .form .hint, .form .done span, .form .done b { overflow-wrap: anywhere; min-width: 0; }
@media (max-width: 240px) { .form .wa-consent .hint { margin-left: 0; } }
/* la nota del paisaje se cortaba al borde: la imagen crece hasta ~6,5 % con el contra-scroll */
.paisaje .media .ilus { right: calc(4% + 14px); top: calc(19.5% + 24px); }
/* galería: que se note que hay más fotos (comentario 20-oct) */
.gal-ctrl { display: block; } .gal-ctrl .gal-btn { display: none; } .gal-swipe { display: none; }
@media (max-width: 799px) {
  .gal-item { flex: 0 0 82vw; } /* la siguiente foto asoma por el borde */
  .gal-head .gal-nav { display: none; }
  .gal-ctrl .gal-btn { display: grid; } .gal-ctrl { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px var(--gr) 0 var(--gl); }
  .gal-ctrl .gal-dots { padding: 0; flex: 1; justify-content: center; }
  .gal-dots i { height: 4px; width: 14px; background: #c3c8d2; } .gal-dots i.on { width: 30px; background: var(--ink); }
  .gal-swipe { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 10px 0 0; font-size: 13px; font-weight: 700; color: var(--ink-2); }
  .gal-swipe span { display: inline-block; animation: swipe-hint 1.6s var(--ease-out) 3; }
  .gal-track.nudge { animation: gal-nudge 1.2s var(--ease-out); }
}
@keyframes gal-nudge { 0%, 100% { transform: none; } 35% { transform: translateX(-48px); } 70% { transform: translateX(6px); } }
@keyframes swipe-hint { 0%, 100% { transform: none; } 50% { transform: translateX(6px); } }
/* contacto: número de WhatsApp clickeable e icono en "Abrir chat" (comentario 20-oct) */
.way .val-link { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-decoration-color: rgba(255,255,255,.35); text-underline-offset: 4px; user-select: text; }
@media (hover: hover) and (pointer: fine) { .way .val-link:hover { text-decoration-color: currentColor; } }
.copy.wa-chat { gap: 8px; background: var(--wa); box-shadow: none; color: #fff; }
.copy.wa-chat .wa-ic { width: 16px; height: 16px; fill: #fff; flex: 0 0 auto; }
.copy.wa-chat:active { transform: scale(.97); }
/* aceptación al enviar: texto chico al pie del formulario */
.form .consent-note { font-size: 12px; line-height: 1.5; color: #9aa3b2; margin: 0; }
/* términos y privacidad */
.legal .prose h2 { font-size: clamp(22px, 2.4vw, 30px); margin-top: 18px; }
.legal mark.pend { background: #fbefcd; color: #8a6100; padding: 1px 6px; border-radius: 3px; font-weight: 600; }
.form .consent-note a, .footer .bottom a { text-decoration: underline; text-underline-offset: 3px; }
/* "Es más fácil" en escritorio: sin franja en blanco arriba y la ilustración llena su columna (comentario 20-oct) */
@media (min-width: 900px) {
  .steps.sec, #pasos.sec { padding-top: 0; padding-bottom: 0; }
  .steps-sticky { align-items: center; }
  .steps-stage .frame { aspect-ratio: 16 / 10; width: 100%; max-height: 62svh; }
}
/* logo oficial de CONCASA (isotipo + palabra) en lugar del texto con punto (comentario 20-oct).
   Se aplica como máscara: toma el color del enlace (blanco sobre fotos, tinta sobre fondos claros). */
.brand .brand-logo { display: block; height: 26px; aspect-ratio: 800 / 167; background: currentColor; -webkit-mask: url("../assets/logo/concasa-blanco.png") center / contain no-repeat; mask: url("../assets/logo/concasa-blanco.png") center / contain no-repeat; }
.nav .brand { filter: drop-shadow(0 1px 6px rgba(0,0,0,.25)); } .nav.on-light .brand { filter: none; }
.footer .brand .brand-logo { height: 30px; }
@media (max-width: 599px) { .brand .brand-logo { height: 22px; } }
/* sobre fondos claros, el logo en el azul oficial de la marca (#003476, del logo horizontal) */
.nav.on-light .brand { color: #003476; }
/* historia (página Concasa y nota del blog) */
.hist { list-style: none; margin: clamp(32px, 5vw, 64px) 0 0; padding: 0; display: grid; gap: clamp(36px, 6vw, 88px); }
.hist-item { display: grid; gap: 18px; align-items: center; }
.hist-txt { display: grid; gap: 10px; max-width: 34em; }
.hist-year { font-family: var(--font-display); font-weight: 500; font-size: clamp(44px, 6vw, 88px); line-height: 1; letter-spacing: -.04em; color: var(--blue); }
.hist-txt p { color: var(--ink-2); font-size: clamp(16px, 1.3vw, 18px); }
@media (min-width: 900px) { .hist-item { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); } .hist-item:nth-child(even) .hist-txt { order: 2; } }
.hist-fig { margin: 8px 0; display: grid; gap: 8px; } .hist-fig img { width: 100%; height: auto; border-radius: 8px; display: block; }
.hist-fig figcaption { font-size: 13px; color: var(--muted); }
/* paisajes: menos sobredimensión para el contra-scroll (antes 164 % de alto) → fotos más nítidas (comentario 20-oct) */
.paisaje .media { top: -12%; height: 124%; }
.paisaje .media .ilus { top: calc(9.7% + 24px); right: calc(2% + 14px); }
/* formulario de postulación (sección oscura de Concasa) */
.job-form { max-width: 560px; }
.job-form .consent-note a { color: #fff; }