/* Control Cam · sitio web
   Layout: recorrido 3D fijo (sticky) con tipografía gigante en esquinas como en la referencia; después, secciones de venta sobre Base con ritmo de 120px,
   contenedor de 1200px y navegación flotante inferior. Solo paleta Azul Vigía. */
/* Fuentes del manual de marca (Montserrat + Inter), servidas desde el sitio: no dependen de Google */
@font-face { font-family: 'Montserrat'; src: url(../assets/fonts/Montserrat-Light.woff2) format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url(../assets/fonts/Montserrat-Regular.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url(../assets/fonts/Montserrat-Medium.woff2) format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url(../assets/fonts/Montserrat-SemiBold.woff2) format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url(../assets/fonts/Montserrat-Bold.woff2) format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url(../assets/fonts/Inter-Regular.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url(../assets/fonts/Inter-Medium.woff2) format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url(../assets/fonts/Inter-SemiBold.woff2) format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url(../assets/fonts/Inter-Bold.woff2) format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
:root {
  --firma: #15557c; --senal: #2a819a; --base: #0b1d28; --tinte: #e9f0f2; --neutro: #5e7380; --alerta: #f2a33a; --blanco: #fff;
  --senal-claro: #8abac7;
  --bg: #0b1d28; --bg-2: #0d2635; --surface: #0f2b3c; --surface-2: #12324a;
  --ink: #e9f0f2; --ink-2: rgba(233, 240, 242, .74); --ink-3: rgba(233, 240, 242, .56);
  --line: rgba(233, 240, 242, .12); --line-2: rgba(233, 240, 242, .24);
  --acc: #8abac7; --hi: #fff; --fill: rgba(11, 29, 40, .5); --soft: rgba(42, 129, 154, .18);
  --btn-bg: #e9f0f2; --btn-ink: #0b1d28; --btn-hover: #fff; --ghost-hover: rgba(233, 240, 242, .06);
  --display: Montserrat, "Helvetica Neue", Arial, sans-serif; --text: Inter, system-ui, "Segoe UI", Arial, sans-serif;
  --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 24px;
  --ease: cubic-bezier(.2, .7, .2, 1); --ease-out: cubic-bezier(.16, 1, .3, 1);
  --gut: clamp(16px, 4vw, 48px);
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--text); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--senal-claro); outline-offset: 3px; }
::selection { background: rgba(42, 129, 154, .45); color: #fff; }
.skip { position: fixed; left: 16px; top: -80px; z-index: 300; padding: 10px 16px; border-radius: var(--r-sm); background: var(--tinte); color: var(--base); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
.osd { font-family: var(--display); font-weight: 600; font-size: 11px; line-height: 1.3; letter-spacing: .22em; text-transform: uppercase; }
.rec-dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--alerta); vertical-align: 1px; animation: blink 1.2s steps(2, start) infinite; }
.rec-dot--lg { width: 14px; height: 14px; margin: 0; }
@keyframes blink { to { visibility: hidden; } }
.sel { user-select: all; }

/* ------------------------------------------------------------ botones */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: var(--r-md); border: 1px solid transparent;
  font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: .01em; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease), color .2s; }
.btn:active { transform: translateY(1px); }
.btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn--light { background: var(--btn-bg); color: var(--btn-ink); }
.btn--light:hover { background: var(--btn-hover); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--ink); background: var(--ghost-hover); }
.btn--lg { min-height: 56px; padding: 0 28px; font-size: 16px; }

/* ------------------------------------------------------------ barra superior */
.top { position: fixed; z-index: 60; left: 0; right: 0; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: calc(14px + env(safe-area-inset-top, 0px)) var(--gut) 14px; pointer-events: none; transition: background-color .3s, backdrop-filter .3s; }
.top > * { pointer-events: auto; }
.top.is-solid { background: rgba(11, 29, 40, .78); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); border-bottom: 1px solid var(--line); }
.top__logo img { height: 34px; width: auto; }
.top__osd { display: flex; align-items: center; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.top__sep { width: 1px; height: 12px; margin: 0 12px; background: var(--line-2); }
.top__wa { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(11, 29, 40, .5);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); text-decoration: none; font-family: var(--display); font-weight: 600; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.top__wa:hover { border-color: var(--tinte); }
.top__wa svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------ recorrido */
.tour { position: relative; height: 1850vh; }
.stage { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; background: #0b1d28; }
#world { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.stage__fallback { position: absolute; inset: 0; background: url(../assets/img/manual-family.webp) center / cover; opacity: 0; transition: opacity .6s; }
.no-webgl .stage__fallback { opacity: .35; }
.scrim { position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(180deg, rgba(11, 29, 40, .55) 0%, rgba(11, 29, 40, 0) 22%, rgba(11, 29, 40, 0) 64%, rgba(11, 29, 40, .7) 100%),
  radial-gradient(120% 90% at 50% 50%, rgba(11, 29, 40, 0) 55%, rgba(11, 29, 40, .55) 100%); }
.frame-corners i { position: absolute; width: 26px; height: 26px; border: 1.5px solid rgba(233, 240, 242, .4); pointer-events: none; }
.frame-corners i:nth-child(1) { left: var(--gut); top: 84px; border-width: 1.5px 0 0 1.5px; }
.frame-corners i:nth-child(2) { right: var(--gut); top: 84px; border-width: 1.5px 1.5px 0 0; }
.frame-corners i:nth-child(3) { left: var(--gut); bottom: 96px; border-width: 0 0 1.5px 1.5px; }
.frame-corners i:nth-child(4) { right: var(--gut); bottom: 96px; border-width: 0 1.5px 1.5px 0; }

.hud { position: absolute; z-index: 5; left: var(--gut); right: var(--gut); top: calc(84px + 18px); display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 0 18px; pointer-events: none; }
.hud > * { pointer-events: auto; }
.hud__chapter { display: flex; align-items: center; gap: 12px; color: var(--ink-2); }
.hud__num { color: var(--ink); font-variant-numeric: tabular-nums; }
.hud__bar { width: 90px; height: 2px; background: var(--line-2); border-radius: 2px; overflow: hidden; }
.hud__bar i { display: block; height: 100%; width: 0; background: var(--senal-claro); }
.hud__seg, .seg-switch { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(11, 29, 40, .55); border: 1px solid var(--line-2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.seg { min-height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); cursor: pointer; font-family: var(--display); font-weight: 600; font-size: 13px; transition: background-color .2s, color .2s; }
.seg:hover { color: var(--ink); }
.seg.is-on { background: var(--btn-bg); color: var(--btn-ink); }

/* capítulos: tipografía gigante dividida en esquinas */
.ch { position: absolute; inset: 0; z-index: 4; pointer-events: none; visibility: hidden; }
.ch.is-live { visibility: visible; }
.ch a, .ch button, .ch .phone { pointer-events: auto; }
.split { margin: 0; font: inherit; }
.w { position: absolute; display: block; overflow: hidden; padding: .04em .02em .12em; font-family: var(--display); font-weight: 600; font-size: clamp(46px, 8.4vw, 148px); line-height: .95; letter-spacing: -.035em; color: #fff;
  text-shadow: 0 2px 40px rgba(11, 29, 40, .35); }
.w b { display: block; font-weight: 600; }
.js:not(.reduced) .w b, .js:not(.reduced) .final__line b { visibility: hidden; }
.js.ready .w b, .js.ready .final__line b { visibility: visible; }
.w.tl { left: calc(var(--gut) + 18px); top: calc(84px + 64px); }
.w.mr { right: calc(var(--gut) + 18px); top: 30%; text-align: right; }
.w.bl { left: calc(var(--gut) + 18px); bottom: calc(96px + 22px); }
.note, .spec { position: absolute; right: calc(var(--gut) + 18px); bottom: calc(96px + 24px); width: min(380px, calc(100vw - 2 * var(--gut) - 36px)); opacity: 0; transform: translateY(20px); }
.note p { margin: 0; color: var(--ink); font-size: 16px; line-height: 1.6; text-shadow: 0 1px 18px rgba(11, 29, 40, .8); }
.note__eyebrow { margin-bottom: 10px !important; color: var(--senal-claro) !important; font-size: 11px !important; }
.note__cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 22px; }
.scroll-hint { color: var(--ink-2); display: inline-flex; align-items: center; gap: 10px; }
.scroll-hint::after { content: ''; width: 1px; height: 26px; background: linear-gradient(var(--ink-2), transparent); animation: hint 1.8s var(--ease) infinite; }
@keyframes hint { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
.spec { padding: 22px 22px 20px; border-radius: var(--r-lg); background: rgba(11, 29, 40, .72); border: 1px solid var(--line-2); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); }
.spec__eyebrow { margin: 0 0 12px; color: var(--ink-2); }
.spec h3 { margin: 0; font-family: var(--display); font-weight: 600; font-size: 21px; line-height: 1.2; letter-spacing: -.01em; }
.spec__model { margin: 4px 0 0; color: var(--ink-3); font-size: 13.5px; }
.spec__list { list-style: none; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.spec__list li { display: flex; flex-direction: column; gap: 2px; }
.spec__list b { font-family: var(--display); font-weight: 300; font-size: 26px; line-height: 1.1; letter-spacing: -.02em; color: #fff; }
.spec__list span { font-size: 12.5px; color: var(--ink-3); }
.spec__foot { margin: 16px 0 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.final { position: absolute; left: 0; right: 0; top: 34%; margin: 0; text-align: center; font-family: var(--display); font-weight: 600; font-size: clamp(44px, 8vw, 140px); line-height: .98; letter-spacing: -.035em; color: #fff; }
.final__line { display: block; overflow: hidden; padding-bottom: .06em; }
.final__line b { display: block; font-weight: 600; }
.final__cta { position: absolute; left: 0; right: 0; bottom: calc(96px + 40px); display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 0 16px; opacity: 0; transform: translateY(16px); }

/* phone con feeds en vivo */
.phone { position: absolute; right: calc(var(--gut) + 18px); bottom: calc(96px + 18px); width: 300px; padding: 12px; border-radius: 34px; background: #050c11;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55), inset 0 0 0 1.5px rgba(233, 240, 242, .16); opacity: 0; transform: translateY(30px) rotate(-2deg); }
.phone__notch { width: 70px; height: 18px; margin: 0 auto 10px; border-radius: 10px; background: #000; }
.phone__head { display: flex; align-items: center; gap: 8px; padding: 0 6px 10px; font-family: var(--display); font-weight: 600; font-size: 14px; }
.phone__live { margin-left: auto; font-size: 9.5px; color: var(--ink-2); display: inline-flex; align-items: center; }
.phone__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.phone__grid figure { position: relative; margin: 0; border-radius: 8px; overflow: hidden; background: #0b1d28; aspect-ratio: 16 / 9; }
.phone__grid canvas { width: 100%; height: 100%; display: block; }
.phone__grid figcaption { position: absolute; left: 5px; top: 5px; padding: 2px 5px; border-radius: 3px; background: rgba(11, 29, 40, .7); font-size: 7.5px; letter-spacing: .14em; }
.phone__foot { margin: 10px 6px 4px; font-size: 12.5px; line-height: 1.45; color: var(--ink-3); }

/* puntos sobre la escena */
.pins { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.pin { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 10px; opacity: 0; will-change: transform, opacity; }
.pin[data-offscreen="1"] { visibility: hidden; }
.pin i { position: relative; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--tinte); box-shadow: 0 0 0 4px rgba(42, 129, 154, .45); }
.pin i::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid var(--senal-claro); animation: pulse 2s var(--ease) infinite; }
@keyframes pulse { from { transform: scale(1); opacity: 1; } to { transform: scale(2.6); opacity: 0; } }
.pin b { padding: 6px 10px; border-radius: 6px; background: rgba(11, 29, 40, .78); border: 1px solid var(--line-2); font-family: var(--display); font-weight: 600; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.pin--ring b { padding: 3px 7px; background: rgba(42, 129, 154, .3); border-color: rgba(138, 186, 199, .5); font-size: 11px; letter-spacing: .08em; transform: translate(-50%, -50%); }

/* transición de bloques (como el barrido de la referencia) */
.blockcover { position: absolute; inset: 0; z-index: 8; display: grid; grid-template-columns: repeat(10, 1fr); grid-template-rows: repeat(4, 1fr); pointer-events: none; }
.blockcover i { background: var(--bg); transform: scaleY(0); transform-origin: bottom; margin: -1px; }
.blockcover--on { z-index: 2; }
.blockcover--on i { transform: scaleY(1); }

/* ------------------------------------------------------------ prueba / números */
.proof { position: relative; min-height: 100vh; min-height: 100dvh; overflow: hidden; isolation: isolate; background: var(--base); }
.proof__bg { position: absolute; inset: 0; width: 100%; height: 120%; object-fit: cover; z-index: -2; will-change: transform; }
.proof__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11, 29, 40, .55), rgba(11, 29, 40, .15) 40%, rgba(11, 29, 40, .8)); }
.proof__eyebrow { position: absolute; left: var(--gut); top: 110px; max-width: 280px; color: var(--ink); }
.proof__tagline { position: absolute; right: var(--gut); top: 106px; margin: 0; font-family: var(--display); font-weight: 600; font-size: 14px; letter-spacing: .02em; color: var(--ink-2); }
.proof__mark { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; border: 1.5px solid rgba(233, 240, 242, .5); }
.proof__num { position: absolute; bottom: 110px; display: flex; flex-direction: column; gap: 8px; }
.proof__num--l { left: var(--gut); }
.proof__num--r { right: var(--gut); text-align: right; align-items: flex-end; }
.proof__num b { font-family: var(--display); font-weight: 300; font-size: clamp(90px, 16vw, 250px); line-height: .82; letter-spacing: -.05em; color: var(--hi); font-variant-numeric: tabular-nums; }
.proof__num > span { font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-2); }

/* ------------------------------------------------------------ secciones */
.sec { position: relative; padding: clamp(80px, 12vw, 150px) 0; background: var(--bg); }
.sec--deep { background: var(--bg-2); }
.wrap { width: min(1200px, 100% - 2 * var(--gut)); margin: 0 auto; }
.wrap--narrow { width: min(820px, 100% - 2 * var(--gut)); }
.wrap--split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.sec__head { max-width: 760px; margin-bottom: clamp(40px, 6vw, 72px); }
.sec__head--center { margin-left: auto; margin-right: auto; text-align: center; }
.wrap--split .sec__head { margin-bottom: 0; }
.eyebrow { margin: 0 0 16px; color: var(--acc); display: flex; align-items: center; }
.sec__head--center .eyebrow { justify-content: center; }
.h2 { margin: 0; font-family: var(--display); font-weight: 600; font-size: clamp(34px, 5vw, 64px); line-height: 1.04; letter-spacing: -.03em; text-wrap: balance; }
.h3 { margin: 0 0 8px; font-family: var(--display); font-weight: 600; font-size: clamp(24px, 3vw, 34px); letter-spacing: -.02em; }
.lead { margin: 20px 0 0; font-size: clamp(17px, 1.6vw, 19px); line-height: 1.6; color: var(--ink-2); max-width: 62ch; text-wrap: pretty; }
.sec__head--center .lead { margin-left: auto; margin-right: auto; }
.lead--sm { font-size: 16.5px; margin-top: 6px; }
.fine { margin: 28px 0 0; color: var(--ink-3); font-size: 14px; }
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.is-in { opacity: 1; transform: none; }
.no-js .reveal, .reduced .reveal { opacity: 1; transform: none; }

/* dolores */
.pains { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.pain { grid-column: span 2; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; padding: 28px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.pain:nth-child(4), .pain:nth-child(5) { grid-column: span 3; }
.pain__q { margin: 0; font-family: var(--display); font-weight: 500; font-size: clamp(19px, 1.8vw, 22px); line-height: 1.35; letter-spacing: -.01em; color: var(--hi); }
.pain__a { margin: 0; padding-top: 18px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 15.5px; line-height: 1.6; }
.pain__a .osd { display: block; margin-bottom: 8px; color: var(--acc); }

/* antes / después */
.checks { list-style: none; margin: 26px 0 30px; padding: 0; display: grid; gap: 12px; }
.checks li { position: relative; padding-left: 30px; color: var(--ink); }
.checks li::before { content: ''; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: rgba(42, 129, 154, .25) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238abac7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat; }
.compare { position: relative; aspect-ratio: 3 / 4; max-height: 720px; border-radius: var(--r-xl); overflow: hidden; background: #000; user-select: none; touch-action: pan-y; --p: 50%; }
.compare > img, .compare__before img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compare__before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--p)) 0 0); }
.compare__tag { position: absolute; top: 18px; padding: 6px 10px; border-radius: 4px; background: rgba(11, 29, 40, .75); }
.compare__tag--l { left: 18px; } .compare__tag--r { right: 18px; }
.compare__handle { position: absolute; top: 0; bottom: 0; left: var(--p); width: 2px; margin-left: -1px; background: var(--tinte); pointer-events: none; }
.compare__handle i { position: absolute; top: 50%; left: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: var(--tinte);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b1d28' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18-6-6 6-6M15 6l6 6-6 6'/%3E%3C/svg%3E"); background-size: 24px; background-position: center; background-repeat: no-repeat; }
.compare__range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 48px; }
.strip figure { margin: 0; position: relative; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 4 / 5; }
.strip img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.strip figure:hover img { transform: scale(1.04); }
.strip figcaption { position: absolute; left: 10px; bottom: 10px; padding: 5px 8px; border-radius: 4px; background: rgba(11, 29, 40, .78); font-size: 10px; }

/* visor de cámaras */
.viewer { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.viewer__stage { position: relative; height: 540px; background: radial-gradient(80% 70% at 50% 45%, #163b52 0%, #0b1d28 75%); }
.viewer__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: pan-y; }
.viewer__stage canvas:active { cursor: grabbing; }
.viewer__osd { position: absolute; left: 20px; right: 20px; bottom: 18px; display: flex; justify-content: space-between; color: var(--ink-2); pointer-events: none; }
.viewer__panel { padding: 28px; display: flex; flex-direction: column; gap: 22px; border-left: 1px solid var(--line); }
.tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; padding: 5px; border-radius: var(--r-md); background: var(--fill); border: 1px solid var(--line); }
.tab { min-height: 42px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); cursor: pointer; font-family: var(--text); font-weight: 600; font-size: 14px; transition: background-color .2s, color .2s; }
.tab:hover { color: var(--ink); }
.tab.is-on { background: var(--btn-bg); color: var(--btn-ink); }
.camcard h3 { margin: 0; font-family: var(--display); font-weight: 600; font-size: 28px; letter-spacing: -.02em; line-height: 1.1; }
.camcard__model { margin: 6px 0 0; color: var(--ink-3); font-size: 14px; }
.camcard p.camcard__desc { margin: 16px 0 0; color: var(--ink-2); font-size: 15.5px; }
.camcard ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.camcard li { padding: 10px 12px; border-radius: var(--r-sm); background: var(--fill); border: 1px solid var(--line); font-size: 13.5px; color: var(--ink); }
.camcard .range { margin-top: 20px; }
.camcard .range__bar { position: relative; height: 8px; border-radius: 4px; background: rgba(233, 240, 242, .1); overflow: hidden; }
.camcard .range__bar i { position: absolute; inset: 0; width: var(--w); background: linear-gradient(90deg, var(--senal), var(--acc)); border-radius: 4px; transform-origin: left; animation: grow .9s var(--ease-out) both; }
@keyframes grow { from { transform: scaleX(0); } }
.camcard .range__top { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 13.5px; color: var(--ink-2); }
.camcard .range__top b { color: var(--hi); font-family: var(--display); font-weight: 600; }
.camcard__ideal { margin-top: 18px; font-size: 14px; color: var(--ink-2); }
.camcard__ideal b { color: var(--ink); font-weight: 600; }
.tech { margin-top: clamp(56px, 8vw, 96px); }
.tech__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.techcard { padding: 26px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); }
.techcard--hi { border-color: rgba(138, 186, 199, .5); background: linear-gradient(180deg, rgba(42, 129, 154, .18), rgba(42, 129, 154, .04)); }
.techcard .osd { margin: 0; color: var(--acc); }
.techcard h4 { margin: 10px 0 8px; font-family: var(--display); font-weight: 600; font-size: 24px; }
.techcard p { margin: 0; color: var(--ink-2); font-size: 15px; }
.techcard dl { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 84px 1fr; gap: 8px 12px; font-size: 14px; }
.techcard dt { color: var(--ink-3); } .techcard dd { margin: 0; }

/* soluciones */
.solgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; }
.sol { padding: 34px 30px; background: var(--bg-2); transition: background-color .3s var(--ease); }
.sol:hover { background: var(--surface); }
.sol__ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--r-md); background: var(--soft); color: var(--acc); }
.sol__ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sol h3 { margin: 22px 0 8px; font-family: var(--display); font-weight: 600; font-size: 20px; }
.sol p { margin: 0; color: var(--ink-2); font-size: 15px; }

/* escalera de valor */
.ladder { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: end; }
.rung { position: relative; display: flex; flex-direction: column; padding: 26px 24px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); min-height: calc(260px + var(--h) * 40px); }
.rung::before { content: ''; position: absolute; left: 24px; right: 24px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--senal); opacity: calc(.25 * var(--h)); }
.rung--top { background: linear-gradient(180deg, rgba(42, 129, 154, .22), var(--surface)); border-color: rgba(138, 186, 199, .45); }
.rung__n { margin: 0; color: var(--ink-3); }
.rung h3 { margin: 10px 0 4px; font-family: var(--display); font-weight: 600; font-size: 26px; letter-spacing: -.02em; }
.rung__what { margin: 0 0 12px !important; color: var(--acc) !important; font-weight: 600; font-size: 14.5px !important; }
.rung p { margin: 0; color: var(--ink-2); font-size: 15px; }
.rung__price { margin-top: auto !important; padding-top: 20px; font-family: var(--display); font-weight: 300; font-size: 30px !important; color: var(--hi) !important; letter-spacing: -.02em; }
.rung__price small { display: block; font-family: var(--text); font-weight: 500; font-size: 12.5px; letter-spacing: 0; color: var(--ink-3); }

/* proceso */
.process { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(24px, 6vw, 80px); }
.process__sticky { position: sticky; top: 120px; align-self: start; display: flex; gap: 28px; align-items: flex-start; }
.process__big { font-family: var(--display); font-weight: 300; font-size: clamp(110px, 16vw, 220px); line-height: .8; letter-spacing: -.06em; color: var(--hi); font-variant-numeric: tabular-nums; }
.process__line { width: 2px; height: 220px; background: var(--line-2); border-radius: 2px; overflow: hidden; margin-top: 10px; }
.process__line i { display: block; width: 100%; height: 0; background: var(--acc); }
.process__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.step { padding: 30px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--bg); opacity: .55; transition: opacity .5s var(--ease), border-color .5s, background-color .5s; }
.step.is-on { opacity: 1; border-color: rgba(138, 186, 199, .45); background: var(--surface); }
.step__n { margin: 0; color: var(--acc); }
.step h3 { margin: 10px 0 10px; font-family: var(--display); font-weight: 600; font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -.02em; }
.step p { margin: 0; color: var(--ink-2); }
.step ul { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.step li { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 13px; color: var(--ink); }
.seg-switch { margin-top: 28px; }

/* diferencia */
.vs { border-radius: var(--r-xl); border: 1px solid var(--line); overflow: hidden; }
.vs__row { display: grid; grid-template-columns: 1fr 1fr; }
.vs__row span { padding: 20px 26px; border-top: 1px solid var(--line); font-size: 16.5px; }
.vs__row span:first-child { color: var(--ink-3); }
.vs__row span:first-child s { text-decoration: none; background: linear-gradient(currentColor, currentColor) no-repeat 0 58% / 100% 1px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.vs__row span:last-child { position: relative; padding-left: 58px; background: var(--soft-2, rgba(42, 129, 154, .08)); color: var(--hi); font-weight: 500; border-left: 1px solid var(--line); }
.vs__row span:last-child::before { content: ''; position: absolute; left: 24px; top: 50%; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%; background: var(--senal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.vs__row--head span { border-top: 0; font-family: var(--display); font-weight: 600; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; text-decoration: none !important; padding-top: 18px; padding-bottom: 18px; }
.vs__row--head span:last-child::before { display: none; }
.vs__row--head span:last-child { padding-left: 26px; color: var(--acc); }

/* galería */
.gallery { columns: 3 280px; column-gap: 14px; }
.shot { position: relative; display: block; width: 100%; margin: 0 0 14px; padding: 0; border: 0; border-radius: var(--r-lg); overflow: hidden; background: #000; cursor: zoom-in; break-inside: avoid; }
.shot img { width: 100%; height: auto; transition: transform .8s var(--ease); }
.shot:hover img { transform: scale(1.04); }
.shot span { position: absolute; left: 12px; bottom: 12px; padding: 6px 9px; border-radius: 4px; background: rgba(11, 29, 40, .8); font-size: 10px; }
.shot::after { content: ''; position: absolute; inset: 12px; border: 1px solid rgba(233, 240, 242, 0); border-radius: 10px; transition: border-color .4s; pointer-events: none; }
.shot:hover::after { border-color: rgba(233, 240, 242, .35); }

/* diagnóstico */
.wizard { padding: clamp(22px, 4vw, 40px); border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); }
.wizard__top { display: flex; align-items: center; gap: 16px; color: var(--ink-2); }
.wizard__bar { flex: 1; height: 3px; border-radius: 3px; background: var(--line-2); overflow: hidden; }
.wizard__bar i { display: block; height: 100%; width: 20%; background: var(--acc); transition: width .4s var(--ease); }
.wizard__body { margin-top: 28px; min-height: 260px; }
.wizard__q { margin: 0 0 20px; font-family: var(--display); font-weight: 600; font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -.02em; line-height: 1.2; }
.opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.opt { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 12px 16px; border-radius: var(--r-md); border: 1px solid var(--line-2); background: var(--fill); color: var(--ink); cursor: pointer; text-align: left; font-size: 15.5px; font-weight: 500;
  transition: border-color .2s, background-color .2s, transform .2s var(--ease); }
.opt:hover { border-color: var(--acc); background: var(--soft); }
.opt:active { transform: scale(.985); }
.opt.is-on { border-color: var(--hi); background: var(--soft); }
.opt svg { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--acc); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.opt small { display: block; color: var(--ink-3); font-size: 13px; font-weight: 400; }
.wizard__nav { display: flex; justify-content: space-between; margin-top: 24px; }
.wizard__nav [data-wz-back][hidden] { display: inline-flex; visibility: hidden; }
.summary { padding: 20px; border-radius: var(--r-md); background: var(--fill); border: 1px solid var(--line); font-size: 15.5px; line-height: 1.6; color: var(--ink); }
.summary__label { margin: 0 0 10px; color: var(--ink-3); }
.wz-done { display: flex; flex-direction: column; gap: 16px; }

/* nosotros (sección clara, como el testimonio de la referencia) */
.about { padding: clamp(80px, 12vw, 150px) 0; background: var(--tinte); color: var(--base); }
.about__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.about__mark { position: sticky; top: 120px; padding: 40px 32px; border-radius: var(--r-xl); background: var(--base); display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.about__mark img { width: 100%; max-width: 260px; height: auto; }
.about__mark p { margin: 0; color: var(--ink-2); }
.about .eyebrow { color: var(--firma); }
.about blockquote { margin: 0; }
.about blockquote p { margin: 0 0 18px; font-size: 17.5px; line-height: 1.7; color: rgba(11, 29, 40, .82); max-width: 62ch; }
.about__big { font-family: var(--display); font-weight: 500; font-size: clamp(24px, 3vw, 38px) !important; line-height: 1.25 !important; letter-spacing: -.02em; color: var(--base) !important; text-wrap: balance; margin-bottom: 28px !important; }
.about__close b { color: var(--firma); font-weight: 600; }
.about figcaption { margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(11, 29, 40, .15); display: flex; flex-direction: column; gap: 2px; }
.about figcaption b { font-family: var(--display); font-weight: 600; font-size: 17px; }
.about figcaption span { color: var(--neutro); font-size: 14.5px; }

/* cobertura */
.towns { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.towns li { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 14px; }
.towns li.is-main { background: var(--btn-bg); color: var(--btn-ink); border-color: var(--btn-bg); font-weight: 600; }
.map { position: relative; border-radius: var(--r-xl); border: 1px solid var(--line); background: var(--surface); padding: 12px; }
.map svg { width: 100%; height: auto; display: block; }
.map__grid path { stroke: var(--line); stroke-width: 1; fill: none; }
.map__road { fill: none; stroke: rgba(138, 186, 199, .45); stroke-width: 2.5; stroke-dasharray: 600; stroke-dashoffset: 600; }
.map__road--b { stroke-width: 1.8; stroke-dasharray: 200; stroke-dashoffset: 200; }
.map.is-in .map__road { animation: draw 2.2s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.mp circle { fill: var(--ink); }
.mp--main circle, .mp--city circle { fill: var(--acc); }
.mp__pulse { fill: none !important; stroke: var(--acc); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: mpulse 2.4s var(--ease) infinite; }
@keyframes mpulse { from { transform: scale(1); opacity: .9; } to { transform: scale(3.4); opacity: 0; } }
.mp text { fill: var(--ink); font-family: var(--display); font-weight: 600; font-size: 14px; }
.map__note { position: absolute; right: 20px; bottom: 16px; margin: 0; color: var(--ink-3); font-size: 9.5px; }

/* faq */
.faq { display: grid; gap: 10px; }
.faq details { border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); }
.faq summary { position: relative; list-style: none; cursor: pointer; padding: 20px 56px 20px 22px; font-family: var(--display); font-weight: 600; font-size: 17px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; position: absolute; right: 22px; top: 50%; width: 14px; height: 14px; margin-top: -7px; background:
  linear-gradient(var(--acc), var(--acc)) center / 14px 2px no-repeat, linear-gradient(var(--acc), var(--acc)) center / 2px 14px no-repeat; transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0; padding: 0 22px 22px; color: var(--ink-2); }

/* cta */
.cta { position: relative; padding: clamp(100px, 14vw, 180px) 0; text-align: center; background: radial-gradient(70% 90% at 50% 100%, rgba(42, 129, 154, .35), transparent 70%), var(--bg); overflow: hidden; }
.cta .eyebrow { justify-content: center; }
.cta__title { margin: 0 auto; max-width: 14ch; font-family: var(--display); font-weight: 600; font-size: clamp(40px, 6.4vw, 92px); line-height: 1; letter-spacing: -.035em; text-wrap: balance; }
.cta .lead { margin-left: auto; margin-right: auto; }
.cta__btns { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 36px; }

/* footer */
.foot { padding: 64px 0 calc(120px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: var(--bg); }
.foot__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
.foot__brand img { height: 40px; width: auto; }
.foot__brand p { margin: 14px 0 0; color: var(--ink-2); }
.foot .osd { margin: 0 0 12px; color: var(--ink-3); }
.foot p { margin: 0 0 6px; font-size: 15px; }
.foot a { text-decoration: none; } .foot a:hover { text-decoration: underline; text-underline-offset: 3px; }
.foot__bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 13px; }

/* dock flotante */
.dock { position: fixed; z-index: 70; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 6px;
  border-radius: 999px; background: rgba(8, 22, 31, .82); border: 1px solid var(--line-2); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
.dock__mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(233, 240, 242, .08); }
.dock__menu { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; cursor: pointer; font-family: var(--display); font-weight: 600; font-size: 14px; }
.dock__menu:hover { background: rgba(233, 240, 242, .08); }
.dock__bars { position: relative; width: 16px; height: 10px; }
.dock__bars::before, .dock__bars::after { content: ''; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform .3s var(--ease), top .3s; }
.dock__bars::before { top: 1px; } .dock__bars::after { top: 7px; }
[aria-expanded="true"] .dock__bars::before { top: 4px; transform: rotate(45deg); } [aria-expanded="true"] .dock__bars::after { top: 4px; transform: rotate(-45deg); }
.dock__cta { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 999px; background: var(--tinte); color: var(--base); text-decoration: none; font-family: var(--display); font-weight: 600; font-size: 14px; }
.dock__cta:hover { background: #fff; }

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 60px var(--gut); background: rgba(5, 12, 17, .94); }
.lightbox img { max-height: 86vh; width: auto; border-radius: var(--r-lg); }
.lightbox__close { position: absolute; right: 18px; top: 18px; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(11, 29, 40, .7); cursor: pointer; }
.lightbox__close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* loader */
.loader { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; background: var(--base); transition: opacity .7s var(--ease), visibility .7s; }
.loader.is-done { opacity: 0; visibility: hidden; }
.loader span { color: var(--ink-2); display: inline-flex; align-items: center; font-variant-numeric: tabular-nums; }
.no-js .loader { display: none; }

/* ------------------------------------------------------------ sin JS / movimiento reducido */
.no-js .tour, .reduced .tour { height: auto; }
.no-js .stage, .reduced .stage { position: relative; height: auto; min-height: 100vh; padding: 120px 0 80px; background: url(../assets/img/manual-family.webp) center / cover; }
.no-js .ch, .reduced .ch { position: relative; visibility: visible; inset: auto; padding: 40px var(--gut); }
.no-js .w, .reduced .w { position: relative; inset: auto !important; font-size: clamp(36px, 7vw, 80px); }
.no-js .w b, .no-js .final__line b, .reduced .w b, .reduced .final__line b { transform: none; }
.no-js .note, .no-js .spec, .no-js .final__cta, .no-js .phone, .reduced .note, .reduced .spec, .reduced .final__cta, .reduced .phone { position: relative; inset: auto; opacity: 1; transform: none; margin-top: 20px; }
.no-js .final, .reduced .final { position: relative; top: auto; }
.no-js .pins, .no-js .hud, .no-js #world, .reduced .pins, .reduced .hud, .reduced #world, .blockcover--on:only-child { display: none; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1023px) {
  .wrap--split, .process, .about__grid { grid-template-columns: minmax(0, 1fr); }
  .viewer { grid-template-columns: minmax(0, 1fr); }
  .viewer__panel { border-left: 0; border-top: 1px solid var(--line); }
  .viewer__stage { height: 380px; }
  .pains { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pain, .pain:nth-child(4), .pain:nth-child(5) { grid-column: span 1; }
  .pain:nth-child(5) { grid-column: span 2; }
  .ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rung { min-height: 0; }
  .tech__grid, .solgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .process__sticky { display: none; }
  .about__mark { position: relative; top: 0; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .top__osd { display: none; }
  .top__logo img { height: 28px; }
  .top__wa span { display: none; }
  .top__wa { width: 42px; padding: 0; justify-content: center; }
  .hud { top: 74px; padding: 0; }
  .hud__bar { width: 48px; }
  .frame-corners i:nth-child(1), .frame-corners i:nth-child(2) { top: 68px; }
  .w { font-size: clamp(42px, 13.5vw, 72px); }
  .w.tl { top: 146px; left: var(--gut); }
  .w.mr { right: var(--gut); top: 27%; }
  .w.bl { left: var(--gut); bottom: auto; top: 36%; }
  .note, .spec { left: var(--gut); right: var(--gut); width: auto; bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
  .spec { padding: 16px; }
  .spec h3 { font-size: 18px; }
  .spec__list { margin-top: 12px; padding-top: 12px; gap: 10px; }
  .spec__list b { font-size: 21px; }
  .spec__foot { display: none; }
  .phone { left: 50%; right: auto; width: 260px; margin-left: -130px; bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }
  .phone__foot { display: none; }
  .final { top: 30%; }
  .pin b { font-size: 9.5px; padding: 4px 7px; }
  .pains, .ladder, .tech__grid, .solgrid, .opts { grid-template-columns: minmax(0, 1fr); }
  .pain:nth-child(5) { grid-column: span 1; }
  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vs__row span { padding: 16px; font-size: 15px; }
  .vs__row span:last-child { padding-left: 46px; }
  .vs__row span:last-child::before { left: 16px; }
  .proof__num b { font-size: clamp(80px, 26vw, 130px); }
  .proof__num--l { bottom: 290px; }
  .proof__num--r { bottom: 120px; }
  .vs__row--head span { letter-spacing: .1em; }
  .vs__row--head span:last-child { padding-left: 16px; }
  .proof__tagline { display: none; }
  .foot__grid { grid-template-columns: minmax(0, 1fr); }
  .dock__menu span:last-child { display: none; }
  .dock__menu { padding: 0 14px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}

/* ============================================================ temas por sección
   El sistema de diseño es claro por defecto (bg blanco, bandas Tinte, acción Firma). El recorrido 3D, el visor,
   el proceso y los trabajos se quedan sobre Base; el resto alterna Blanco, Tinte y una banda Firma.
   Cada tono sale de la paleta Azul Vigía (o de mezclarla con blanco o Base). */
.t-light, .t-tint {
  --bg: #fff; --bg-2: #fff; --surface: #f3f7f8; --surface-2: #e9f0f2;
  --ink: #0b1d28; --ink-2: #3f5664; --ink-3: #4f6573; --hi: #0b1d28; --acc: #15557c;
  --line: rgba(11, 29, 40, .12); --line-2: rgba(94, 115, 128, .55);
  --fill: rgba(21, 85, 124, .05); --soft: rgba(21, 85, 124, .08); --soft-2: rgba(21, 85, 124, .06);
  --btn-bg: #15557c; --btn-ink: #fff; --btn-hover: #124767; --ghost-hover: rgba(21, 85, 124, .06);
  color-scheme: light; color: var(--ink); background: var(--bg);
}
.t-tint { --bg: #e9f0f2; --bg-2: #e9f0f2; --surface: #fff; --surface-2: #fff; --fill: #fff; }
.t-firma {
  --bg: #15557c; --bg-2: #15557c; --surface: #1d5d84; --surface-2: #246589;
  --ink: #fff; --ink-2: rgba(255, 255, 255, .86); --ink-3: rgba(255, 255, 255, .76); --hi: #fff; --acc: #e9f0f2;
  --line: rgba(255, 255, 255, .18); --line-2: rgba(255, 255, 255, .34);
  --fill: rgba(11, 29, 40, .2); --soft: rgba(233, 240, 242, .12);
  --btn-bg: #fff; --btn-ink: #0b1d28; --btn-hover: #e9f0f2; --ghost-hover: rgba(255, 255, 255, .1);
  color: var(--ink); background: var(--bg);
}
.t-light .pain, .t-light .sol, .t-light .rung, .t-tint .rung, .t-light .faq details { box-shadow: 0 1px 2px rgba(11, 29, 40, .05); }
.t-tint .pain, .t-tint .techcard, .t-tint .vs { background: #fff; }
.t-light .solgrid { background: var(--line); }
.t-light .sol { background: #fff; }
.t-light .sol:hover { background: var(--surface); }
.t-light .rung--top, .t-tint .rung--top { background: linear-gradient(180deg, rgba(21, 85, 124, .10), #fff 70%); border-color: rgba(21, 85, 124, .4); }
.t-light .rung::before, .t-tint .rung::before { background: var(--firma); }
.t-light .vs, .t-tint .vs { background: #fff; }
.t-light .vs__row span:last-child::before, .t-tint .vs__row span:last-child::before { background-color: var(--firma); }
.t-light .checks li::before, .t-tint .checks li::before { background: var(--firma) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat; }
.t-tint .compare { box-shadow: 0 30px 60px -24px rgba(11, 29, 40, .35); }
.t-firma .wizard { background: #fff; color: #0b1d28; border-color: transparent; box-shadow: 0 40px 80px -30px rgba(11, 29, 40, .55);
  --ink: #0b1d28; --ink-2: #3f5664; --ink-3: #4f6573; --hi: #0b1d28; --acc: #15557c; --line: rgba(11, 29, 40, .12); --line-2: rgba(94, 115, 128, .55);
  --fill: #fff; --soft: rgba(21, 85, 124, .07); --btn-bg: #15557c; --btn-ink: #fff; --btn-hover: #124767; --ghost-hover: rgba(21, 85, 124, .06); }
.t-firma .wizard .summary { background: #e9f0f2; border-color: transparent; }
.t-firma .sec__head .lead { color: rgba(255, 255, 255, .88); }

/* banda de rótulos en movimiento (OSD de cámara) */
.ticker { position: relative; overflow: hidden; padding: 18px 0; background: var(--firma); color: #fff; border-block: 1px solid rgba(255, 255, 255, .12); }
.ticker__track { display: flex; width: max-content; gap: 0; animation: tick 46s linear infinite; }
.ticker__track span { display: inline-flex; align-items: center; gap: 22px; padding-right: 22px; font-family: var(--display); font-weight: 600; font-size: 13px; letter-spacing: .22em; text-transform: uppercase; white-space: nowrap; }
.ticker__track span::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: rgba(233, 240, 242, .55); }
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes tick { to { transform: translateX(-50%); } }

/* ============================================================ movimiento */
/* títulos que suben palabra por palabra */
.split .wl { display: inline-block; overflow: hidden; vertical-align: top; padding: .08em 0 .14em; margin: -.08em 0 -.14em; }
.split .wi { display: inline-block; transform: translateY(110%); transition: transform 1s var(--ease-out); transition-delay: calc(var(--i) * 45ms + .1s); }
.is-in .split .wi, .no-js .split .wi, .reduced .split .wi { transform: none; }
/* eyebrow con línea que se dibuja */
.eyebrow::before { content: ''; flex: none; width: 0; height: 1.5px; margin-right: 0; background: currentColor; transition: width .7s var(--ease-out) .05s, margin .7s var(--ease-out) .05s; }
.is-in .eyebrow::before, .no-js .eyebrow::before, .reduced .eyebrow::before { width: 28px; margin-right: 12px; }
.cta .eyebrow::before { display: none; }

/* tarjetas con luz que sigue al puntero e inclinación leve */
.fx-card { position: relative; isolation: isolate; overflow: hidden; }
.fx-card::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .4s var(--ease);
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), var(--glow, rgba(42, 129, 154, .22)), transparent 60%); }
.fx-card:hover::after { opacity: 1; }
.t-light .fx-card, .t-tint .fx-card { --glow: rgba(42, 129, 154, .14); }
.fx-card.is-tilt { transition: transform .18s var(--ease), border-color .3s, box-shadow .3s !important; }
.fx-card.is-tilt:hover { box-shadow: 0 24px 48px -20px rgba(11, 29, 40, .35); }

/* imágenes que se descubren como una persiana */
.strip figure, .shot { clip-path: inset(100% 0 0 0); transition: clip-path 1.2s var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); }
.strip figure img, .shot img { scale: 1.08; transition: scale 1.6s var(--ease-out), transform .8s var(--ease), filter .5s; transition-delay: calc(var(--i, 0) * 90ms), 0s, 0s; }
.strip.is-in figure, .shot.is-in, .no-js .strip figure, .no-js .shot, .reduced .strip figure, .reduced .shot { clip-path: inset(0); }
.strip.is-in figure img, .shot.is-in img, .no-js .strip figure img, .no-js .shot img, .reduced .strip figure img, .reduced .shot img { scale: 1; }
.shot.reveal { opacity: 1; transform: none; }

/* iconos de soluciones que se dibujan */
.sol__ic svg * { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease) .35s; }
.sol.is-in .sol__ic svg *, .no-js .sol__ic svg *, .reduced .sol__ic svg * { stroke-dashoffset: 0; }
.sol__ic { transition: transform .4s var(--ease), background-color .3s; }
.sol:hover .sol__ic { transform: translateY(-3px) rotate(-4deg); }

/* escalera: la barra superior crece por nivel */
.rung::before { transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease-out) calc(var(--h) * 120ms + .2s); }
.rung.is-in::before, .no-js .rung::before, .reduced .rung::before { transform: none; }

/* comparación: se tacha lo común y entra lo nuestro */
.vs__row span:first-child s { background-size: 0% 1px; transition: background-size .8s var(--ease) calc(var(--r, 0) * 110ms + .3s); }
.vs__row span:last-child { opacity: 0; translate: -14px 0; transition: opacity .7s var(--ease-out), translate .7s var(--ease-out); transition-delay: calc(var(--r, 0) * 110ms + .55s); }
.vs__row span:last-child::before { scale: 0; transition: scale .5s cubic-bezier(.3, 1.5, .5, 1) calc(var(--r, 0) * 110ms + .8s); }
.vs.is-in .vs__row span:first-child s, .no-js .vs__row span:first-child s, .reduced .vs__row span:first-child s { background-size: 100% 1px; }
.vs.is-in .vs__row span:last-child, .no-js .vs__row span:last-child, .reduced .vs__row span:last-child { opacity: 1; translate: 0 0; }
.vs.is-in .vs__row span:last-child::before, .no-js .vs__row span:last-child::before, .reduced .vs__row span:last-child::before { scale: 1; }
.vs__row--head span:last-child { opacity: 1 !important; translate: none !important; }
.vs__row:not(.vs__row--head) { transition: background-color .25s; }
.vs__row:not(.vs__row--head):hover { background: var(--soft-2, rgba(42, 129, 154, .06)); }

/* chips de cobertura y pasos */
.towns li { opacity: 0; translate: 0 10px; transition: opacity .5s var(--ease-out), translate .5s var(--ease-out), background-color .2s, border-color .2s; transition-delay: calc(var(--i, 0) * 60ms + .3s); }
.is-in .towns li, .no-js .towns li, .reduced .towns li { opacity: 1; translate: 0 0; }
.towns li:hover { border-color: var(--acc); }

/* faq con apertura suave */
.faq details { transition: border-color .25s, background-color .25s; }
.faq details:hover { border-color: var(--line-2); }
.faq details[open] { border-color: var(--acc); }
.faq details > p { overflow: hidden; }

/* botones magnéticos y brillo al pasar */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn--light::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%); translate: -120% 0; transition: translate .7s var(--ease); }
.btn--light:hover::before { translate: 120% 0; }
.t-light .btn--light::before, .t-tint .btn--light::before, .t-firma .wizard .btn--light::before { background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .22) 50%, transparent 70%); }
.mag { transition: transform .35s var(--ease), background-color .2s, border-color .2s, color .2s; will-change: transform; }

/* barra de progreso de lectura en la barra superior */
.top__prog { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--senal); transform: scaleX(0); transform-origin: left; opacity: 0; transition: opacity .3s; pointer-events: none; }
.top.is-solid .top__prog { opacity: 1; }

/* dock que se esconde al bajar y vuelve al subir (no tapa el texto) */
.dock { transition: transform .45s var(--ease), opacity .3s; }
.dock.is-hidden { transform: translate(-50%, calc(100% + 40px)); opacity: 0; pointer-events: none; }
.foot { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }

/* ============================================================ cursor de visor
   Solo con mouse. Estados del sistema: normal (visor), acción (se fija al botón como enfoque de cámara),
   arrastrar (visor 3D y antes/después), ver (galería), texto (cursor nativo), deshabilitado (nativo). */
.has-cur, .has-cur * { cursor: none !important; }
.has-cur input:not([type=range]):not([type=radio]):not([type=checkbox]), .has-cur textarea, .has-cur select { cursor: text !important; }
.has-cur [disabled], .has-cur [aria-disabled="true"] { cursor: not-allowed !important; }
.cur { --c: #e9f0f2; position: fixed; inset: 0; z-index: 1000; pointer-events: none; opacity: 0; transition: opacity .25s; }
.cur.is-on { opacity: 1; }
.cur.is-dark { --c: #15557c; }
.cur.is-text, .cur.is-off { opacity: 0; }
.cur__dot { position: absolute; left: 0; top: 0; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--c); transition: opacity .2s, background-color .2s; will-change: transform; }
.cur__ring { position: absolute; left: 0; top: 0; will-change: transform, width, height; }
.cur__ring b { position: absolute; width: 9px; height: 9px; border: 0 solid var(--c); transition: border-color .2s, width .25s var(--ease), height .25s var(--ease); }
.cur__ring b:nth-child(1) { left: 0; top: 0; border-width: 1.5px 0 0 1.5px; }
.cur__ring b:nth-child(2) { right: 0; top: 0; border-width: 1.5px 1.5px 0 0; }
.cur__ring b:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 1.5px 1.5px; }
.cur__ring b:nth-child(4) { right: 0; bottom: 0; border-width: 0 1.5px 1.5px 0; }
.cur.is-link .cur__dot { opacity: 0; }
.cur.is-link .cur__ring b { width: 11px; height: 11px; }
.cur__label { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 4px; background: rgba(11, 29, 40, .78); color: #e9f0f2;
  font: 600 10.5px/1 var(--display); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; font-variant-numeric: tabular-nums; opacity: 0; transition: opacity .2s; will-change: transform; }
.cur.has-label .cur__label { opacity: 1; }
.cur.is-scan .cur__label { background: none; padding: 0; color: var(--c); opacity: .8; }
.cur.is-down .cur__ring b { width: 6px; height: 6px; }
@media (hover: none), (pointer: coarse) { .cur { display: none; } }

@media (max-width: 720px) {
  .ticker { padding: 14px 0; }
  .ticker__track span { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; }
}

/* barra superior sobre secciones claras */
.top__logo .lg-light { display: none; }
.top { transition: background-color .35s, border-color .35s, color .35s; }
.top.is-solid.is-light { background: rgba(255, 255, 255, .86); border-bottom-color: rgba(11, 29, 40, .1); color: #0b1d28; }
.top.is-light .lg-dark { display: none; } .top.is-light .lg-light { display: block; }
.top.is-light .top__osd { color: #3f5664; }
.top.is-light .top__sep { background: rgba(11, 29, 40, .2); }
.top.is-light .top__wa { background: rgba(255, 255, 255, .7); border-color: rgba(94, 115, 128, .55); color: #0b1d28; }
.top.is-light .top__wa:hover { border-color: #15557c; }
/* soluciones: divisores sin huecos grises mientras entran */
.solgrid { gap: 0; background: none; }
.sol { box-shadow: inset -1px -1px 0 var(--line); }
.t-light .solgrid { background: #fff; }

@media (max-width: 720px) {
  .vs__row--head { display: none; }
  .vs__row { grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--line); }
  .vs__row:first-of-type, .vs__row--head + .vs__row { border-top: 0; }
  .vs__row span { border-top: 0 !important; }
  .vs__row span:first-child { padding: 16px 18px 0; font-size: 14px; }
  .vs__row span:last-child { border-left: 0; background: none; padding: 6px 18px 16px 50px; font-size: 16px; }
  .vs__row span:last-child::before { left: 18px; top: 8px; margin-top: 0; }
}

/* rótulos sobre foto: siempre claros, sin importar el tema de la sección */
.strip figcaption, .shot span, .compare__tag { color: #e9f0f2; background: rgba(11, 29, 40, .82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.strip figcaption { font-size: 10.5px; padding: 6px 9px; }

/* recorrido: elegir casa o negocio y saltar */
.hud__end { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.hud__skip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 4px; border: 0; background: none; color: var(--ink-2); cursor: pointer; transition: color .2s; }
.hud__skip:hover { color: #fff; }
.hud__skip svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.note__ask { margin: 18px 0 0; color: var(--ink-2); }
.note__ask + .note__cta { margin-top: 10px; }
.ch[data-ch="0"] .scroll-hint { display: flex; margin-top: 16px; }
.note__cta { gap: 10px; }
.note__cta .btn { min-height: 46px; }
@media (max-width: 720px) {
  .hud__skip { font-size: 10px; min-height: 28px; }
  .ch[data-ch="0"] .note__ask { margin-top: 12px; }
}
.hud__chapter { min-width: 0; }
.hud__end { flex: none; }
@media (max-width: 720px) {
  .hud__chapter [data-hud-name] { max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hud__chapter { gap: 8px; }
}

/* ============================================================ escalera con precios (anclaje: primero lo más completo) */
.rung__price small { margin-bottom: 2px; }
.rung__cur { font-family: var(--text); font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--ink-3); }
.sec__head .lead b { color: var(--hi); font-weight: 600; white-space: nowrap; }
.addons { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 28px; padding: 18px 20px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.addons .osd { margin: 0; color: var(--acc); }
.addons ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.addons li { padding: 7px 12px; border-radius: 999px; background: var(--fill); border: 1px solid var(--line); font-size: 14px; }

/* ============================================================ revisión gratis */
.wrap--top { align-items: start; }
.wrap--top .sec__head { position: sticky; top: 110px; }
.check__score { margin: 26px 0 16px; font-size: 17px; color: var(--ink-2); min-height: 1.6em; }
.check__score b { color: var(--hi); font-family: var(--display); font-weight: 600; }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: ck; }
.checklist label { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; align-items: start; padding: 18px 20px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); cursor: pointer; transition: border-color .2s, background-color .2s; }
.checklist label:hover { border-color: var(--line-2); }
.checklist input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.checklist label::before { content: ''; width: 24px; height: 24px; margin-top: 1px; border-radius: 7px; border: 1.5px solid var(--line-2); background: var(--bg) center / 14px no-repeat; transition: background-color .2s, border-color .2s; }
.checklist label:has(input:checked) { border-color: var(--acc); background: var(--soft-2, var(--soft)); }
.checklist label:has(input:checked)::before { background-color: var(--firma); border-color: var(--firma); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.checklist label:has(input:focus-visible) { outline: 2px solid var(--acc); outline-offset: 2px; }
.checklist b { display: block; font-family: var(--display); font-weight: 600; font-size: 16.5px; color: var(--hi); }
.checklist small { display: block; margin-top: 4px; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }

/* ============================================================ opiniones */
.reviews__wrap { display: grid; grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.review-ask { display: flex; flex-direction: column; gap: 14px; justify-content: center; padding: 32px; border-radius: var(--r-xl); background: var(--firma); color: #fff; }
.review-ask .osd { margin: 0; color: #e9f0f2; }
.review-ask h3 { margin: 0; font-family: var(--display); font-weight: 600; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; }
.review-ask p:not(.osd) { margin: 0; color: rgba(255, 255, 255, .86); font-size: 15.5px; }
.review-ask .btn { align-self: flex-start; background: #fff; color: #0b1d28; margin-top: 6px; }
.case { position: relative; margin: 0; border-radius: var(--r-xl); overflow: hidden; background: #0b1d28; min-height: 360px; }
.case img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale 1s var(--ease-out); }
.case:hover img { scale: 1.05; }
.case figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 4px; padding: 60px 18px 18px; background: linear-gradient(180deg, transparent, rgba(11, 29, 40, .92)); color: #e9f0f2; font-size: 14px; line-height: 1.45; }
.case figcaption .osd { color: #8abac7; font-size: 10px; }
.case figcaption b { font-family: var(--display); font-weight: 600; font-size: 16px; color: #fff; }
.reviews__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.review { margin: 0; display: flex; flex-direction: column; gap: 14px; padding: 26px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.review img { border-radius: var(--r-md); aspect-ratio: 4 / 3; object-fit: cover; }
.review__stars { display: flex; gap: 3px; color: var(--alerta); }
.review__stars svg { width: 16px; height: 16px; fill: currentColor; }
.review blockquote { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--hi); }
.review figcaption { display: flex; flex-direction: column; margin-top: auto; font-size: 14px; color: var(--ink-3); }
.review figcaption b { font-family: var(--display); font-weight: 600; color: var(--hi); }

/* ============================================================ diagnóstico: complementos */
.extras { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.extras legend { margin-bottom: 10px; color: var(--ink-3); padding: 0; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 14px; transition: background-color .2s, border-color .2s, color .2s; }
.chip input:checked + span { background: var(--btn-bg); color: var(--btn-ink); border-color: var(--btn-bg); }
.chip input:focus-visible + span { outline: 2px solid var(--acc); outline-offset: 2px; }
.wz-note { margin: 0; color: var(--ink-3); font-size: 14px; }

@media (max-width: 1023px) {
  .reviews__wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .review-ask { grid-column: 1 / -1; }
  .reviews__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .wrap--top .sec__head { position: static; }
}
@media (max-width: 720px) {
  .reviews__wrap, .reviews__grid { grid-template-columns: minmax(0, 1fr); }
  .case { min-height: 300px; }
}

/* planes: etiqueta en la misma línea del nivel, nunca encima del texto */
.rung__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 26px; }
.rung__top .rung__n { margin: 0; }
.rung__tag { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 999px; background: var(--btn-bg); color: var(--btn-ink); font: 600 12px/1 var(--text); letter-spacing: 0; white-space: nowrap; }
.rung__tag--soft { background: var(--soft); color: var(--acc); box-shadow: inset 0 0 0 1px var(--line-2); }
.rung__price--quote small { display: block; }
.rung__price { font-variant-numeric: tabular-nums; }
/* galería: ver más */
.gallery:not(.is-all) .shot--more { display: none; }
.gallery__more { display: flex; justify-content: center; margin-top: 28px; }
/* pin de cámara en el recorrido */
.pin--cam b { background: var(--tinte); color: var(--base); }

/* el selector Casa/Negocio del recorrido aparece después de la portada: en la portada la elección es "¿Qué quieres proteger?" */
.hud__seg { transition: opacity .35s var(--ease), transform .35s var(--ease); }
.hud__seg.is-off { opacity: 0; transform: translateY(-8px); pointer-events: none; }

/* velo para saltar entre casa y negocio sin ver la animación acelerada */
.jumpveil { position: absolute; inset: 0; z-index: 7; background: var(--base); opacity: 0; pointer-events: none; transition: opacity .38s var(--ease); }
.jumpveil.is-on { opacity: 1; }

/* señales de confianza junto a cada llamada a la acción */
.trust { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13.5px; color: var(--ink-2); }
.trust li { display: inline-flex; align-items: center; gap: 7px; }
.trust li::before { content: ''; width: 14px; height: 14px; border-radius: 50%; background: var(--senal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 9px no-repeat; }
.trust--center { justify-content: center; margin-top: 22px; }
/* empujón de conversión al final de secciones clave */
.nudge { display: flex; align-items: center; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap; margin-top: 32px; padding: 20px 24px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.nudge p { margin: 0; flex: 1 1 320px; font-family: var(--display); font-weight: 500; font-size: 17px; line-height: 1.4; color: var(--hi); text-wrap: pretty; }
.t-firma .nudge { background: rgba(11, 29, 40, .2); }
@media (max-width: 720px) { .nudge { padding: 18px; } .nudge .btn { width: 100%; } }

/* ============================================================ menú */
.menu { position: fixed; inset: 0; z-index: 65; overflow-y: auto; overscroll-behavior: contain; background: rgba(8, 22, 31, .97); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.menu__in { width: min(1140px, 100% - 2 * var(--gut)); margin: 0 auto; min-height: 100%; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 88px); align-items: center; padding: calc(96px + env(safe-area-inset-top, 0px)) 0 calc(120px + env(safe-area-inset-bottom, 0px)); }
.menu__label { margin: 0 0 14px; color: var(--senal-claro); }
.menu__nav a { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: baseline; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); opacity: 0; transform: translateY(12px); transition: color .2s; }
.menu__nav a .osd { color: var(--senal-claro); font-size: 11px; }
.menu__t { font-family: var(--display); font-weight: 600; font-size: clamp(22px, 2.6vw, 32px); letter-spacing: -.02em; line-height: 1.15; }
.menu__t small { display: block; margin-top: 3px; font-family: var(--text); font-weight: 400; font-size: 14px; letter-spacing: 0; color: var(--ink-3); }
.menu__nav a:hover .menu__t, .menu__nav a:focus-visible .menu__t { color: var(--senal-claro); }
.menu__side { display: flex; flex-direction: column; gap: 16px; padding: 28px; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line-2); opacity: 0; transform: translateY(12px); }
.menu__pitch { margin: 0; font-size: 16.5px; color: var(--ink-2); }
.menu__cta { width: 100%; white-space: normal; text-align: center; }
.menu__wa { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--r-md); border: 1px solid var(--line-2); text-decoration: none; transition: border-color .2s; }
.menu__wa:hover { border-color: var(--tinte); }
.menu__wa svg { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--senal-claro); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.menu__wa span { font-family: var(--display); font-weight: 600; font-size: 20px; font-variant-numeric: tabular-nums; }
.menu__wa small { display: block; font-family: var(--text); font-weight: 500; font-size: 12px; color: var(--ink-3); }
.menu__meta { margin: 0; font-size: 13.5px; color: var(--ink-3); }
.menu__meta a { color: var(--ink-2); }
.menu.is-open .menu__nav a, .menu.is-open .menu__side { opacity: 1; transform: none; transition: opacity .45s var(--ease), transform .45s var(--ease), color .2s; }
.menu.is-open .menu__nav a:nth-of-type(2) { transition-delay: .03s; } .menu.is-open .menu__nav a:nth-of-type(3) { transition-delay: .06s; } .menu.is-open .menu__nav a:nth-of-type(4) { transition-delay: .09s; }
.menu.is-open .menu__nav a:nth-of-type(5) { transition-delay: .12s; } .menu.is-open .menu__nav a:nth-of-type(6) { transition-delay: .15s; } .menu.is-open .menu__nav a:nth-of-type(7) { transition-delay: .18s; }
.menu.is-open .menu__side { transition-delay: .12s; }
@media (max-width: 860px) {
  .menu__in { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 28px; padding-top: calc(84px + env(safe-area-inset-top, 0px)); }
  .menu__nav a { padding: 10px 0; }
  .menu__t { font-size: 21px; }
  .menu__side { padding: 20px; }
}

/* ============================================================ recorrido: la ficha nunca tapa las palabras
   Se respeta la composición original (palabras en las esquinas). En capítulos con ficha o celular,
   la palabra del lado derecho sube al renglón superior y la ficha se compacta según la altura de la pantalla. */
@media (min-width: 721px) {
  .ch:has(.spec, .phone) .w { font-size: clamp(44px, 7.2vw, 128px); }
  .ch:has(.spec, .phone) .w.mr { top: calc(84px + 104px); }
  .spec.br { width: clamp(320px, 34vw, 380px); }
}
@media (min-width: 721px) and (max-height: 860px) {
  .ch:has(.spec, .phone) .w { font-size: clamp(40px, min(6.4vw, 12.5vh), 112px); }
  .ch:has(.spec, .phone) .w.mr { top: calc(84px + 92px); }
  .spec { padding: 18px 20px 16px; }
  .spec__list { margin-top: 12px; padding-top: 12px; gap: 10px 14px; }
  .spec__list b { font-size: 22px; }
  .spec__foot { margin-top: 10px; font-size: 13px; line-height: 1.5; }
  .phone { width: 260px; }
}
@media (min-width: 721px) and (max-height: 720px) {
  .spec__foot { display: none; }
  .phone__foot { display: none; }
}
@media (min-width: 721px) and (max-width: 1100px) {
  .ch:has(.spec, .phone) .w { font-size: clamp(40px, 6.4vw, 92px); }
}
@media (min-width: 861px) and (max-height: 820px) {
  .menu__in { padding-top: 84px; padding-bottom: 104px; }
  .menu__nav a { padding: 8px 0; }
  .menu__t { font-size: clamp(20px, 2.2vw, 26px); }
}