/* Pulso · página completa sobre la base 3D v2. Tema sobre los tokens del motor (paleta exploratoria v0). */
:root {
  --sc-canvas: #0A0A0B; --sc-surface: #141414; --sc-ink: #EEE8DE; --sc-ink-soft: #B9B2A6;
  --sc-accent: #F0B46A; --sc-accent-ink: #1A120A;
  --sc-font-display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sc-font-text: "Geist", ui-sans-serif, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --line: rgba(238,232,222,.14); --line-2: rgba(238,232,222,.28); --field: #8A7F72;
  --panel: rgba(14,14,15,.9);
  --gut: max(20px, env(safe-area-inset-left, 0px)); --gut-r: max(20px, env(safe-area-inset-right, 0px));
  --col: min(560px, 42vw);
  color-scheme: dark;
}
html { scroll-behavior: auto; background: var(--sc-canvas); }
body { margin: 0; background: var(--sc-canvas); color: var(--sc-ink); font: 400 16px/1.6 var(--sc-font-text); overflow-x: hidden; }
:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; border-radius: 6px; }
[data-sc-copy] { opacity: 1; pointer-events: auto; }   /* el motor los apaga para worldflight; aquí son contenido en flujo */
a { color: inherit; }
h1, h2, h3 { font-family: var(--sc-font-display); font-weight: 400; margin: 0; text-wrap: balance; letter-spacing: -0.012em; }
p { margin: 0; }

/* ---------- escenario ---------- */
.stage { position: fixed; inset: 0; z-index: 0; height: 100svh; }
.stage canvas { display: block; width: 100%; height: 100%; }
.poster { position: absolute; inset: 0; display: none;
  background: radial-gradient(40% 25% at 66% 70%, rgba(240,180,106,.08), transparent 70%), radial-gradient(90% 60% at 62% 80%, #2b2b2c 0%, #151516 55%, #0a0a0b 100%); }
.vign { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(120% 95% at 58% 50%, transparent 55%, rgba(4,4,5,.6) 100%); }
.scrim { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(10,10,11,.8) 0%, rgba(10,10,11,.55) 32%, rgba(10,10,11,0) 54%); }

/* ---------- cabecera ---------- */
.bar { position: fixed; z-index: 30; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 28px;
  padding: max(14px, env(safe-area-inset-top, 0px)) var(--gut-r) 14px var(--gut);
  background: linear-gradient(180deg, rgba(10,10,11,.9) 0%, rgba(10,10,11,.7) 60%, rgba(10,10,11,0) 100%); }
.wm { font: 400 30px/1 var(--sc-font-display); color: var(--sc-ink); text-decoration: none; white-space: nowrap; letter-spacing: -0.01em; display: inline-flex; align-items: center; min-height: 44px; }
.wm i { font-style: normal; color: var(--sc-accent); }
.wm.sm { font-size: 22px; }
.nav { margin-left: auto; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 22px; }
.nav a { display: inline-flex; align-items: center; min-height: 40px; box-sizing: border-box; font: 500 14px/1 var(--sc-font-text); color: var(--sc-ink-soft); text-decoration: none; padding: 0 2px; border-bottom: 1px solid transparent; transition: color .15s, border-color .15s; }
.nav a:hover, .nav a[aria-current="true"] { color: var(--sc-ink); border-bottom-color: var(--sc-accent); }
.talk { display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; font: 500 14px/1 var(--sc-font-text); color: var(--sc-ink); text-decoration: none; padding: 10px 16px; border: 1px solid var(--line-2); border-radius: 999px; transition: border-color .15s, background-color .15s; }
.talk:hover { border-color: var(--sc-ink); }
.menu-btn { display: none; }
.skip { position: fixed; z-index: 50; left: var(--gut); top: -60px; background: var(--sc-ink); color: var(--sc-canvas); padding: 10px 14px; border-radius: 8px; font: 600 14px var(--sc-font-text); text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------- secciones ---------- */
main { position: relative; z-index: 2; }
.sec { position: relative; padding: 0 var(--gut-r) 0 var(--gut); }
.eyebrow { font: 500 12px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #D8CCB4; margin-bottom: 18px; }
.sig { font: 500 12px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #D8CCB4; margin-bottom: 18px; }
.body { font-size: clamp(16px, 1.15vw, 18px); line-height: 1.62; color: #D3CCC1; max-width: 46ch; margin-top: 18px; }
h2 { font-size: clamp(36px, 3.6vw, 56px); line-height: 1.02; }
.h3 { font-size: clamp(26px, 2.2vw, 34px); line-height: 1.08; }

/* contacto discreto */
.link-cta { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 500 15px/1 var(--sc-font-text); color: var(--sc-ink); text-decoration: none; border-bottom: 1px solid var(--sc-accent); padding: 0 2px; }
.link-cta::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sc-accent); }
.link-cta:hover { color: #fff; }
.link-cta.small { font-size: 14px; min-height: 40px; }
.link-sub { display: inline-flex; align-items: center; min-height: 44px; font: 500 15px/1 var(--sc-font-text); color: var(--sc-ink-soft); text-decoration: none; }
.link-sub:hover { color: var(--sc-ink); }

/* 1 · origen */
.sec--origen { min-height: 230svh; }
.hero { position: relative; max-width: var(--col); padding-top: clamp(130px, 25vh, 250px); }
.hero h1 { font-size: clamp(42px, 4.5vw, 70px); line-height: 1.0; }
.lead { font-size: clamp(16px, 1.2vw, 18px); line-height: 1.6; color: #D3CCC1; margin-top: 20px; max-width: 40ch; }
.hero-links { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 26px; }

/* 2 · qué hacemos */
.sec--que { min-height: 330svh; padding-top: 18svh; }
.col { max-width: var(--col); }
.pillars { list-style: none; margin: 46svh 0 0; padding: 0; max-width: var(--col); display: grid; grid-template-columns: 1fr 1fr; gap: 28px 32px; }
.pillars li { border-top: 1px solid var(--line-2); padding-top: 14px; }
.pillars h3 { font-size: 24px; line-height: 1.1; }
.pillars p { font-size: 15px; color: #C9C2B6; margin-top: 8px; line-height: 1.55; }
.process { margin-top: 46svh; }
.steps { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 18px; counter-reset: s; }
.steps li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; counter-increment: s; }
.steps .n::before { content: counter(s); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-2); font: 500 13px var(--mono); color: #D8CCB4; }
.steps h4 { font: 600 16px/1.3 var(--sc-font-text); margin: 4px 0 4px; }
.steps p { font-size: 15px; color: #C9C2B6; line-height: 1.55; }

/* 3 · ejemplos */
.sec--ejemplos { padding-top: 24svh; }
.ej-head { max-width: var(--col); }
.legend { margin-top: 22px; font: 400 clamp(20px, 1.7vw, 26px)/1.25 var(--sc-font-display); color: var(--sc-ink); max-width: 30ch; }
.legend span { display: block; }
.legend span:nth-child(3) { color: #F2C995; }
.legend-sub { margin-top: 10px; font-size: 14px; color: #B9B2A6; max-width: 46ch; }
.demo { position: relative; height: 330svh; margin-top: 8svh; }
.demo-sticky { position: sticky; top: 64px; height: calc(100svh - 64px); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 10px; padding-bottom: 10px; max-width: 1320px; }
.ej-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.ej-tabs button { font: 500 14px/1.2 var(--sc-font-text); color: var(--sc-ink-soft); background: rgba(14,14,15,.82); border: 1px solid var(--line); border-radius: 999px; padding: 0 16px; min-height: 40px; cursor: pointer; transition: color .15s, border-color .15s, background-color .15s; }
.ej-tabs button:hover { color: var(--sc-ink); border-color: var(--line-2); }
.ej-tabs button[aria-selected="true"] { color: var(--sc-ink); border-color: rgba(240,180,106,.8); background: rgba(28,25,22,.95); }
.frame { position: relative; border-radius: 14px; overflow: hidden; display: grid; grid-template-rows: 30px minmax(0, 1fr); background: #111; box-shadow: 0 30px 60px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.07); min-height: 0; }
.frame-bar { display: flex; align-items: center; gap: 6px; padding: 0 12px; background: #e7e2da; color: #5f5951; }
.frame-bar i { width: 9px; height: 9px; border-radius: 50%; background: #c9c2b7; }
.frame-bar span { margin-left: 10px; font: 500 11px var(--mono); }
.frame-bar .cd { margin-left: auto; font: 500 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; background: #1d1d1b; color: #EEE8DE; padding: 5px 8px; border-radius: 4px; white-space: nowrap; }
.demo-view { position: relative; min-height: 0; overflow: hidden; background: var(--dbg, #222); }
.demo-view canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.demo-hint { font-size: 12.5px; color: #A9A196; }
.ej-note { font-size: 13px; color: #A9A196; margin: 4px 0 0; max-width: 70ch; }

/* panel de cada demo: interfaz de ejemplo sobre su escena */
.dp { position: absolute; inset: 0; color: var(--dink); --dink: #2b2320; --dsoft: #6b5d55; --dacc: #2b2320; --dacc-ink: #fff; --dline: rgba(0,0,0,.14); --dpanel: rgba(255,255,255,.0); }
.dp[hidden] { display: none; }
.dp-fallback { display: none; position: absolute; inset: 0 0 0 42%; align-items: center; justify-content: center; padding: 5%; }
.dp-fallback svg { width: min(100%, 360px); height: auto; max-height: 80%; }
.dp-ui { position: absolute; inset: 0; pointer-events: none; }
.dp-ui > * { pointer-events: auto; }
.dp-nav { position: absolute; z-index: 2; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 20px; padding: 16px 24px; }
.dp-brand { font-size: 24px; line-height: 1; margin-right: auto; }
.dp-links { display: flex; gap: 18px; font: 500 13px var(--sc-font-text); color: var(--dsoft); }
.dp-copy { position: absolute; left: 0; top: 0; bottom: 0; width: min(440px, 40%); padding: 66px 24px 18px; display: flex; flex-direction: column; gap: 10px; overflow: auto; scrollbar-width: none;
  background: linear-gradient(90deg, var(--dfade) 0%, var(--dfade) 62%, transparent 100%); }
.dp-k { font: 600 11px/1.3 var(--sc-font-text); letter-spacing: .12em; text-transform: uppercase; color: var(--dsoft); }
.dp-h { font-size: clamp(26px, 2.5vw, 40px); line-height: 1.02; letter-spacing: -0.01em; }
.dp-p { font: 400 14.5px/1.5 var(--sc-font-text); color: var(--dsoft); max-width: 36ch; }
.dp-stages { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; }
.dp-stages button { width: 100%; text-align: left; display: grid; grid-template-columns: 22px 1fr; column-gap: 8px; align-items: baseline; background: none; border: 0; color: inherit; padding: 6px 4px; border-radius: 8px; cursor: pointer; font: inherit; min-height: 40px; }
.dp-stages button::before { content: counter(st); counter-increment: st; font: 600 11px var(--mono); color: var(--dsoft); border: 1px solid var(--dline); border-radius: 50%; width: 20px; height: 20px; display: grid; place-items: center; grid-row: span 2; align-self: start; }
.dp-stages { counter-reset: st; }
.dp-stages b { font: 600 13.5px/1.25 var(--sc-font-text); }
.dp-stages span { font: 400 12.5px/1.35 var(--sc-font-text); color: var(--dsoft); grid-column: 2; }
.dp-stages li.cur button { background: var(--dhl); }
.dp-stages li.cur button::before { background: var(--dacc); color: var(--dacc-ink); border-color: var(--dacc); }
.dp-stages button:hover { background: var(--dhl); }
.dp-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dp-opt-l { font: 600 11px var(--sc-font-text); letter-spacing: .08em; text-transform: uppercase; color: var(--dsoft); margin-right: 4px; min-width: 56px; }
.dp-opts button { font: 500 13px/1 var(--sc-font-text); color: var(--dink); background: transparent; border: 1px solid var(--dline); border-radius: 999px; padding: 0 12px; min-height: 40px; cursor: pointer; }
.dp-opts button[aria-pressed="true"] { background: var(--dacc); color: var(--dacc-ink); border-color: var(--dacc); }
.dp-note { font: 400 12.5px/1.4 var(--sc-font-text); color: var(--dsoft); }
.dp-cta-row { margin-top: 2px; }
.dp-cta { font: 600 14px/1 var(--sc-font-text); color: var(--dacc-ink); background: var(--dacc); border: 0; border-radius: var(--dr, 999px); padding: 0 18px; min-height: 42px; cursor: pointer; }
.dp-cta-row:has(.dp-more) { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.dp-more { font: 600 13.5px/1.2 var(--sc-font-text); color: var(--dink); text-decoration: underline; text-decoration-color: var(--dacc); text-decoration-thickness: 2px; text-underline-offset: 4px; display: inline-flex; align-items: center; gap: .35em; min-height: 42px; }
.dp-more:hover { color: var(--dacc); }
.dp-status { font: 400 12.5px/1.4 var(--sc-font-text); color: var(--dink); min-height: 1em; }
.dp :focus-visible { outline: 2px solid var(--dfocus, #F0B46A); outline-offset: 2px; }
.dp-specs { border-collapse: collapse; font: 400 12px/1.3 var(--sc-font-text); width: 100%; }
.dp-specs th, .dp-specs td { text-align: left; padding: 5px 6px; border-top: 1px solid var(--dline); vertical-align: top; }
.dp-specs thead th { border-top: 0; font-weight: 600; }
.dp-specs [data-col] { opacity: .62; }
.dp-specs[data-sel="0"] [data-col="0"], .dp-specs[data-sel="1"] [data-col="1"] { opacity: 1; font-weight: 600; color: var(--dink); }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* identidades de cada concepto */
.dp--floreria { --dbg: #f1e5dc; --dfade: rgba(241,229,220,.94); --dink: #3a2a2a; --dsoft: #775f58; --dacc: #3a2a2a; --dacc-ink: #f8efe9; --dhl: rgba(58,42,42,.07); --dline: rgba(58,42,42,.2); --dfocus: #8a3b46; }
.dp--floreria .dp-brand, .dp--floreria .dp-h { font-family: "Fraunces", Georgia, serif; font-style: italic; font-weight: 500; }
.dp--gimnasio { --dbg: #171716; --dfade: rgba(23,23,22,.9); --dink: #ecebe7; --dsoft: #aeaba4; --dacc: #e85d2a; --dacc-ink: #121212; --dhl: rgba(255,255,255,.07); --dline: rgba(255,255,255,.2); --dr: 4px; --dfocus: #ff9b6a; }
.dp--gimnasio .dp-brand, .dp--gimnasio .dp-h { font-family: "Archivo", sans-serif; font-weight: 900; font-stretch: 125%; text-transform: uppercase; letter-spacing: -0.01em; }
.dp--gimnasio .dp-h { font-size: clamp(24px, 2.3vw, 36px); line-height: .95; }
.dp--cafeteria { --dbg: #2a211b; --dfade: rgba(42,33,27,.9); --dink: #f3ebe0; --dsoft: #c9b6a3; --dacc: #e8d3b4; --dacc-ink: #2a1c13; --dhl: rgba(255,240,220,.08); --dline: rgba(255,240,220,.22); --dr: 6px; --dfocus: #f5c589; }
.dp--cafeteria .dp-brand, .dp--cafeteria .dp-h { font-family: "Young Serif", Georgia, serif; }
.dp--ropa { --dbg: #efe9e0; --dfade: rgba(239,233,224,.93); --dink: #141414; --dsoft: #5d5852; --dacc: #141414; --dacc-ink: #fbfaf7; --dhl: rgba(0,0,0,.05); --dline: rgba(0,0,0,.2); --dr: 0px; --dfocus: #141414; }
.dp--ropa .dp-brand { font-family: "Bodoni Moda", Georgia, serif; letter-spacing: .3em; font-size: 22px; }
.dp--ropa .dp-h { font-family: "Bodoni Moda", Georgia, serif; font-weight: 400; }
.dp--muebles { --dbg: #e7e1d6; --dfade: rgba(231,225,214,.93); --dink: #2f3326; --dsoft: #5f6552; --dacc: #2f3326; --dacc-ink: #eeeae1; --dhl: rgba(47,51,38,.07); --dline: rgba(47,51,38,.22); --dr: 6px; --dfocus: #2f3326; }
.dp--muebles .dp-brand, .dp--muebles .dp-h { font-family: "Newsreader", Georgia, serif; font-weight: 500; }
.dp--electronica { --dbg: #0d1014; --dfade: rgba(13,16,20,.9); --dink: #e8eef5; --dsoft: #9fb0c2; --dacc: #5f9ad0; --dacc-ink: #08111a; --dhl: rgba(143,208,255,.08); --dline: rgba(143,208,255,.22); --dr: 8px; --dfocus: #8fd0ff; }
.dp--electronica .dp-brand, .dp--electronica .dp-h { font-family: "Space Grotesk", sans-serif; font-weight: 600; letter-spacing: -0.02em; }
.dp--electronica .dp-p { display: none; }
.demo-view:has(.dp--floreria:not([hidden])) { --dbg: #f1e5dc; }
.demo-view:has(.dp--gimnasio:not([hidden])) { --dbg: #171716; }
.demo-view:has(.dp--cafeteria:not([hidden])) { --dbg: #2a211b; }
.demo-view:has(.dp--ropa:not([hidden])) { --dbg: #efe9e0; }
.demo-view:has(.dp--muebles:not([hidden])) { --dbg: #e7e1d6; }
.demo-view:has(.dp--electronica:not([hidden])) { --dbg: #0d1014; }

/* 4 · paquetes */
.sec--paquetes { padding-top: 22svh; padding-bottom: 10svh; }
.pq-col { width: min(660px, 50vw); display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.pq-col > *, .pq-cols > * { min-width: 0; }
.demo-sticky > * { min-width: 0; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 24px 26px; }
.pq-head { margin-bottom: 8px; }
.pq-head .body { max-width: 52ch; }
.pq-base h3, .pq-cmp h3, .pq-more h3 { font: 600 15px/1.3 var(--sc-font-text); letter-spacing: .01em; }
.pq-base h3 span { font-weight: 400; color: #B3AB9F; margin-left: 6px; }
.pq-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pq-pkg { display: grid; gap: 8px; align-content: start; }
.pq-pkg h3 { font: 400 30px/1.02 var(--sc-font-display); }
.pq-pkg--pro { border-color: rgba(240,180,106,.35); }
.pq-for { font-size: 14px; color: #CFC7BB; line-height: 1.45; }
.pq-price { font: 400 15px/1 var(--sc-font-text); color: #CFC7BB; margin-top: 4px; }
.pq-price b { font: 400 40px/1 var(--sc-font-display); color: var(--sc-ink); letter-spacing: -0.01em; margin-right: 4px; }
.pq-time { font-size: 13.5px; line-height: 1.45; color: #CFC7BB; }
.pq-time b { color: #F2C995; font-weight: 600; }
.pq-list { list-style: none; margin: 8px 0 6px; padding: 0; display: grid; gap: 8px; }
.pq-base .pq-list { grid-template-columns: 1fr 1fr; column-gap: 18px; }
.pq-list li { position: relative; padding-left: 20px; font-size: 14px; line-height: 1.42; color: #D9D2C7; transition: color .25s ease; }
.pq-list li::before { content: ""; position: absolute; left: 0; top: .42em; width: 8px; height: 8px; border-radius: 50%; border: 1px solid #A39B8F; transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease; }
.pq-list li.on { color: #F4EFE7; }
.pq-list li.on::before { background: #D8CCB4; border-color: #D8CCB4; }
.pq-list li.cur::before { background: var(--sc-accent); border-color: var(--sc-accent); box-shadow: 0 0 0 4px rgba(240,180,106,.2); }
.pq-fine { font-size: 12.5px; color: #A9A196; line-height: 1.5; }
.tbl { overflow-x: auto; margin-top: 12px; }
.pq-cmp table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 13.5px; line-height: 1.4; }
.pq-cmp th, .pq-cmp td { text-align: left; vertical-align: top; padding: 9px 10px; border-top: 1px solid var(--line); }
.pq-cmp thead th { border-top: 0; font: 400 20px var(--sc-font-display); }
.pq-cmp tbody th { font-weight: 500; color: #B9B2A6; width: 26%; }
.pq-cmp tbody tr:last-child td { font: 400 20px var(--sc-font-display); color: var(--sc-ink); }
.pq-more p { font-size: 14px; color: #CFC7BB; margin-top: 6px; }
.tags { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tags li { font-size: 13px; border: 1px solid var(--line-2); border-radius: 999px; padding: 7px 12px; color: #E3DCD1; }
.trust { border-color: rgba(216,204,180,.32); }
.trust h3 { font: 400 clamp(28px, 2.4vw, 36px)/1.05 var(--sc-font-display); }
.trust-steps { list-style: none; margin: 16px 0 12px; padding: 0; display: grid; gap: 12px; counter-reset: tr; }
.trust-steps li { display: grid; grid-template-columns: 30px 1fr; column-gap: 12px; counter-increment: tr; }
.trust-steps li::before { content: counter(tr); grid-row: span 2; width: 28px; height: 28px; border-radius: 50%; border: 1px solid #D8CCB4; display: grid; place-items: center; font: 500 13px var(--mono); color: #D8CCB4; }
.trust-steps b { font-weight: 600; font-size: 15px; }
.trust-steps span { font-size: 14px; color: #CFC7BB; }
.trust .fine { margin-top: 4px; }

/* guía: ¿qué estás viendo? */
.wys { position: relative; }
.nav-wys { display: none; }
.wys > button { display: inline-flex; text-transform: none; letter-spacing: 0; align-items: center; gap: 8px; min-height: 40px; font: 500 13px var(--sc-font-text); color: var(--sc-ink); background: rgba(14,14,15,.86); border: 1px solid var(--line-2); border-radius: 999px; padding: 0 14px; cursor: pointer; }
.wys > button:hover { border-color: var(--sc-ink); }
.wys-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sc-accent); box-shadow: 0 0 0 3px rgba(240,180,106,.18); }
.wys-panel { position: absolute; right: 0; bottom: 50px; text-transform: none; letter-spacing: 0; width: min(360px, calc(100vw - 32px)); background: #141414; border: 1px solid var(--line-2); border-radius: 14px; padding: 16px; display: grid; gap: 10px; box-shadow: 0 20px 40px -20px rgba(0,0,0,.8); }
.wys-panel[hidden] { display: none; }
.wys-panel p { font-size: 14px; line-height: 1.5; color: #E3DCD1; }
.wys-legend { font: 400 17px/1.3 var(--sc-font-display) !important; color: #F2C995 !important; }

/* 5 · contacto */
.sec--contacto { padding-top: 18svh; padding-bottom: 8svh; outline: none; }
.ct { width: min(640px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 30px; }
.msg { margin-top: 22px; display: grid; gap: 14px; }
.row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.field { display: grid; gap: 6px; font: 500 14px/1.3 var(--sc-font-text); min-width: 0; }
.field em { font-style: normal; color: #A9A196; font-weight: 400; }
.field select, .field textarea { font: 400 16px/1.45 var(--sc-font-text); color: var(--sc-ink); background: #1b1b1c; border: 1px solid var(--field); border-radius: 8px; padding: 10px 12px; width: 100%; min-height: 44px; }
.field textarea { min-height: 110px; resize: vertical; }
.edited { font-size: 14px; color: #D3CCC1; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.edited[hidden] { display: none; }
.actions { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.wa-btn { font: 600 15px/1 var(--sc-font-text); color: var(--sc-accent-ink); background: var(--sc-accent); border: 0; border-radius: 999px; padding: 13px 20px; min-height: 44px; cursor: pointer; transition: background-color .15s, transform .1s; }
.wa-btn:hover { background: #F5C589; }
.wa-btn:active { transform: translateY(1px); }
.text-btn { font: 500 14px/1 var(--sc-font-text); color: var(--sc-ink); background: none; border: 0; border-bottom: 1px solid var(--line-2); padding: 12px 2px 6px; cursor: pointer; min-height: 40px; }
.text-btn:hover { border-bottom-color: var(--sc-ink); }
.wa-status { min-height: 1.4em; font-size: 14px; color: #E9C796; }
.fine { font-size: 13px; color: #A9A196; line-height: 1.5; }

/* pie y estado */
.foot { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: baseline; padding: 22px var(--gut-r) calc(64px + env(safe-area-inset-bottom, 0px)) var(--gut); border-top: 1px solid var(--line); background: #0A0A0B; font-size: 13px; color: #B3AB9F; }
.status { position: fixed; z-index: 20; right: var(--gut-r); bottom: max(12px, env(safe-area-inset-bottom, 0px)); display: flex; gap: 12px; align-items: center; font: 500 10.5px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #9D958A; }
.status button { font: inherit; color: #C9C2B6; background: rgba(14,14,15,.8); border: 1px solid var(--line); border-radius: 999px; padding: 7px 11px; cursor: pointer; text-transform: uppercase; letter-spacing: .06em; min-height: 40px; }
.status button:hover { color: var(--sc-ink); border-color: var(--line-2); }

/* ---------- móvil ---------- */
@media (max-width: 860px) {
  :root { --col: 100%; }
  .bar { gap: 12px; background: rgba(10,10,11,.94); border-bottom: 1px solid var(--line); padding-bottom: 12px; }
  .wm { font-size: 26px; }
  .talk { margin-left: auto; padding: 0 14px; font-size: 13px; }
  .menu-btn { display: inline-flex; align-items: center; min-height: 44px; font: 500 13px var(--sc-font-text); color: var(--sc-ink); background: none; border: 1px solid var(--line-2); border-radius: 999px; padding: 0 14px; cursor: pointer; }
  .nav { position: fixed; top: 64px; left: 12px; right: 12px; margin: 0; background: #141414; border: 1px solid var(--line-2); border-radius: 14px; padding: 8px; display: none; }
  .nav.open { display: block; }
  .nav ul { flex-direction: column; gap: 0; }
  .nav a { display: block; padding: 14px 12px; font-size: 16px; border: 0; border-radius: 8px; }
  .nav a:hover, .nav a[aria-current="true"] { background: #1f1f20; border: 0; }
  .scrim { background: linear-gradient(180deg, rgba(10,10,11,.86) 0%, rgba(10,10,11,.6) 40%, rgba(10,10,11,.15) 70%, rgba(10,10,11,.45) 100%); }
  .hero { padding-top: 120px; }
  .hero h1 { font-size: clamp(34px, 9.4vw, 44px); line-height: 1.02; }
  .sec--que { min-height: 0; padding-top: 20svh; padding-bottom: 10svh; }
  .pillars { grid-template-columns: 1fr; margin-top: 40svh; gap: 18px; background: rgba(10,10,11,.72); padding: 16px; border-radius: 12px; }
  .process { margin-top: 30svh; background: rgba(10,10,11,.72); padding: 16px; border-radius: 12px; }
  .sec--ejemplos { padding-top: 16svh; }
  .ej-head { background: rgba(10,10,11,.72); padding: 16px; border-radius: 12px; }
  .demo-sticky { top: 69px; height: calc(100svh - 69px); gap: 8px; }
  .ej-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .ej-tabs button { flex: none; }
  .demo-hint { display: none; }
  .frame { grid-template-rows: 26px minmax(0, 1fr); }
  .frame-bar span { display: none; }
  .demo-view canvas { height: 40%; bottom: auto; }
  .dp-fallback { inset: 0 0 60% 0; }
  .dp-nav { padding: 8px 14px; background: linear-gradient(180deg, var(--dfade), transparent); }
  .demo-view:has(.dp--electronica:not([hidden])) canvas { height: 30%; }
  .dp--electronica .dp-copy { top: 30%; }
  .dp--electronica .dp-note { display: none; }
  .dp--electronica .dp-specs th, .dp--electronica .dp-specs td { padding: 4px 5px; }
  .dp-links { display: none; }
  .dp-brand { font-size: 20px; }
  .dp-copy { top: 40%; width: 100%; padding: 12px 14px 12px; gap: 8px; background: var(--dfade); }
  .dp-k, .dp-p { display: none; }
  .dp-h { font-size: 24px; }
  .dp-stages { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .dp-stages button { grid-template-columns: 1fr; padding: 6px 4px; text-align: center; justify-items: center; min-height: 44px; }
  .dp-stages button::before { grid-row: auto; }
  .dp-stages b { font-size: 11.5px; }
  .dp-stages li:not(.cur) span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .dp-stages li.cur span { display: none; }
  .dp-stagecap { display: block; }
  .dp-specs { font-size: 11px; }
  .dp-opt-l { min-width: 0; width: 100%; }
  .sec--paquetes { padding-top: 16svh; }
  .pq-col { width: 100%; }
  .panel { padding: 20px 18px; }
  .pq-base .pq-list, .pq-cols { grid-template-columns: 1fr; }
  .row3 { grid-template-columns: 1fr; }
  .ct { padding: 22px 18px; }
  .status { left: auto; right: var(--gut-r); }
  .status > span, .status > #play, .wys > button { display: none; }
  .wys-panel { position: fixed; left: 12px; right: 12px; bottom: 12px; width: auto; }
  .nav-wys { display: block; }
  .nav-wys button { display: block; width: 100%; text-align: left; padding: 14px 12px; font: 500 16px var(--sc-font-text); color: #F2C995; background: none; border: 0; border-radius: 8px; min-height: 44px; cursor: pointer; }
}
.dp-stagecap { display: none; font: 400 13px/1.4 var(--sc-font-text); color: var(--dsoft); }

/* ---------- movimiento reducido o sin WebGL: composición fija con todo el contenido ---------- */
.rm .pq-list li::before, .nogl .pq-list li::before { background: #D8CCB4; border-color: #D8CCB4; }
.rm .pq-list li, .nogl .pq-list li { color: #F4EFE7; }
.rm .demo, .nogl .demo { height: auto; }
.rm .demo-sticky, .nogl .demo-sticky { position: static; height: auto; }
.rm .demo-view, .nogl .demo-view { height: min(720px, 82svh); }
.rm .demo-hint, .nogl .demo-hint { display: none; }
.rm #play, .nogl #play { display: none; }
.nogl .poster { display: block; }
.nogl canvas { display: none; }
.nogl .dp-fallback, .nogl-demos .dp-fallback { display: flex; }
@media (max-width: 860px) { .rm .demo-view, .nogl .demo-view { height: 760px; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- QA viewport intermedio: comparativa legible sin scroll horizontal ---------- */
/* Si el panel es más angosto que la tabla, cada fila se vuelve una tarjeta: aspecto arriba, Origen y Pro debajo. */
.pq-cmp { container-type: inline-size; }
@container (max-width: 560px) {
  .pq-cmp .tbl { overflow-x: visible; }
  .pq-cmp table, .pq-cmp tbody, .pq-cmp tr, .pq-cmp th, .pq-cmp td { display: block; }
  .pq-cmp table { min-width: 0; width: 100%; }
  .pq-cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .pq-cmp tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
  .pq-cmp tbody tr:first-child { border-top: 0; padding-top: 4px; }
  .pq-cmp tbody th { grid-column: 1 / -1; width: auto; padding: 0 0 8px; border-top: 0; font: 500 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #D8CCB4; }
  .pq-cmp td { padding: 0; border-top: 0; min-width: 0; overflow-wrap: anywhere; }
  .pq-cmp td::before { display: block; margin-bottom: 3px; font: 400 15px/1.2 var(--sc-font-display); color: #B9B2A6; }
  .pq-cmp td:nth-of-type(1)::before { content: "Pulso Origen"; }
  .pq-cmp td:nth-of-type(2)::before { content: "Pulso Pro"; }
}
@container (max-width: 340px) {
  .pq-cmp tbody tr { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
}

/* Respaldo explícito por ancho de ventana (por si el navegador no aplica @container): comparativa en tarjetas hasta 1200 px. */
@media (max-width: 1200px) {
  .pq-cmp .tbl { overflow-x: visible; }
  .pq-cmp table, .pq-cmp tbody, .pq-cmp tr, .pq-cmp th, .pq-cmp td { display: block; }
  .pq-cmp table { min-width: 0; width: 100%; }
  .pq-cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .pq-cmp tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
  .pq-cmp tbody tr:first-child { border-top: 0; padding-top: 4px; }
  .pq-cmp tbody th { grid-column: 1 / -1; width: auto; padding: 0 0 8px; border-top: 0; font: 500 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #D8CCB4; }
  .pq-cmp td { padding: 0; border-top: 0; min-width: 0; overflow-wrap: anywhere; }
  .pq-cmp td::before { display: block; margin-bottom: 3px; font: 400 15px/1.2 var(--sc-font-display); color: #B9B2A6; }
  .pq-cmp td:nth-of-type(1)::before { content: "Pulso Origen"; }
  .pq-cmp td:nth-of-type(2)::before { content: "Pulso Pro"; }
}
@media (max-width: 480px) {
  .pq-cmp tbody tr { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
}

/* ---------- QA viewport intermedio: la cabecera fija no tapa títulos al aterrizar en un ancla ---------- */
html { scroll-padding-top: 92px; }
main [id], #paquetes h2, #paquetes h3, #confianza { scroll-margin-top: 92px; }
@media (max-width: 860px) {
  html { scroll-padding-top: 84px; }
  main [id], #paquetes h2, #paquetes h3, #confianza { scroll-margin-top: 84px; }
}

/* ---------- Arco narrativo: entrada, hero estable y cierre del circuito (pulse-arc.js) ---------- */

/* Entrada: velo oscuro, un pulso nace en el centro, traza la línea y revela logo y titular (≈2.1 s). */
.intro-veil { display: none; }
html.intro .intro-veil { display: block; position: fixed; inset: 0; z-index: 40; pointer-events: none; background: #0A0A0B; animation: pa-veil 2.1s cubic-bezier(.4,0,.2,1) both; }
.intro-veil svg { position: absolute; left: 0; top: 50%; width: 100%; height: 160px; margin-top: -80px; overflow: visible; }
.intro-veil path { fill: none; stroke: var(--sc-accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.intro-veil .glow { stroke-width: 7; opacity: .22; filter: blur(4px); }
html.intro .intro-veil path { animation: pa-draw .9s cubic-bezier(.65,0,.35,1) .28s both; }
.intro-dot { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--sc-accent); }
html.intro .intro-dot { animation: pa-dot 1.3s cubic-bezier(.3,0,.2,1) both; }
@keyframes pa-veil { 0%, 50% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pa-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes pa-dot { 0% { transform: scale(0); opacity: 0; } 18% { transform: scale(1.6); opacity: 1; } 32% { transform: scale(1); } 80% { opacity: 1; } 100% { transform: scale(.4); opacity: 0; } }
@keyframes pa-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes pa-fade { from { opacity: 0; } to { opacity: 1; } }
html.intro .bar .wm { animation: pa-fade .6s ease 1s both; }
html.intro .bar .nav, html.intro .bar .talk, html.intro .bar .menu-btn { animation: pa-fade .5s ease 1.7s both; }
html.intro .hero .sig { animation: pa-in .6s cubic-bezier(.2,.8,.2,1) 1.1s both; }
html.intro .hero h1 { animation: pa-in .7s cubic-bezier(.2,.8,.2,1) 1.25s both; }
html.intro .hero .lead { animation: pa-in .6s cubic-bezier(.2,.8,.2,1) 1.5s both; }
html.intro .hero .hero-links { animation: pa-in .5s cubic-bezier(.2,.8,.2,1) 1.65s both; }
html.intro .hero .scroll-cue { animation: pa-fade .5s ease 1.9s both; }
html.intro .hero-halo { animation: pa-fade 1.1s ease 1s both; }

/* Hero estable: sin interfaz flotante. La forma luminosa queda como línea de fondo, lejos del texto. */
.hero-halo { position: absolute; z-index: -1; right: 0; top: 64svh; width: 54vw; height: 90px; overflow: visible; pointer-events: none; opacity: .5; }
.hero-halo path { fill: none; stroke: var(--sc-accent); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.hero-halo .base { opacity: .45; }
.hero-halo .run { stroke-width: 2; stroke-dasharray: .06 .94; animation: pa-run 7s linear 2.4s infinite; opacity: .9; }
@keyframes pa-run { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.scroll-cue { display: inline-flex; align-items: center; gap: 12px; margin-top: 44px; min-height: 40px; font: 500 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: #A9A196; text-decoration: none; }
.scroll-cue:hover { color: var(--sc-ink); }
.scroll-cue .sc-line { position: relative; width: 1px; height: 34px; background: var(--line-2); overflow: hidden; }
.scroll-cue .sc-line::after { content: ""; position: absolute; left: -1px; top: -8px; width: 3px; height: 8px; border-radius: 2px; background: var(--sc-accent); animation: pa-cue 2.2s cubic-bezier(.6,0,.4,1) infinite; }
@keyframes pa-cue { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(42px); opacity: 0; } }
.status { transition: opacity .4s ease, visibility .4s; }
html.intro .status, html.at-hero .status, html.at-close .status { opacity: 0; visibility: hidden; pointer-events: none; }

/* Cierre: el escenario de placas se retira, el contacto deja de ser tarjeta y el pulso cierra el circuito. */
.stage { transition: opacity 1s ease; }
html.at-close .stage { opacity: .16; }
.ct { background: linear-gradient(90deg, rgba(10,10,11,.84) 0%, rgba(10,10,11,.72) 72%, rgba(10,10,11,0) 100%); border: 0; border-radius: 0; padding: 30px 56px 34px 0; }
.close-arc { position: fixed; inset: 0; z-index: 35; pointer-events: none; opacity: 0; }
.close-arc svg { position: absolute; inset: 0; overflow: visible; }
.close-arc path { fill: none; stroke: var(--sc-accent); stroke-width: 1.6; stroke-linecap: round; }
.close-arc.run { animation: pa-arc 2.6s ease both; }
.close-arc.run .ca-a { animation: pa-dash .9s cubic-bezier(.65,0,.35,1) both; }
.close-arc.run .ca-b { animation: pa-dash .6s cubic-bezier(.65,0,.35,1) .9s both; }
.ca-spark { position: absolute; left: 0; top: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--sc-accent); opacity: 0; }
.close-arc.run .ca-spark { animation: pa-spark .7s ease-out 1.42s both; }
@keyframes pa-arc { 0% { opacity: 0; } 6%, 62% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pa-dash { to { stroke-dashoffset: 0; } }
@keyframes pa-spark { 0% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 4; } }
.wa-btn { transition: background-color .15s, transform .1s, box-shadow .5s ease; }
.wa-btn.wa-hit { box-shadow: 0 0 0 6px rgba(240,180,106,.22), 0 10px 28px -10px rgba(240,180,106,.6); }
.bar .wm i { display: inline-block; transition: transform .4s ease; }
html.closed .bar .wm i { animation: pa-beat 2.6s ease-in-out infinite; }
html.closed .bar .wm { color: #F4EFE7; }
@keyframes pa-beat { 0%, 70%, 100% { transform: scale(1); } 78% { transform: scale(1.5); } 86% { transform: scale(1); } 92% { transform: scale(1.25); } }

@media (max-width: 860px) {
  .hero-halo { top: auto; bottom: 22svh; width: 100vw; opacity: .35; }
  .scroll-cue { margin-top: 30px; }
  .ct { padding: 22px 0 26px; background: linear-gradient(180deg, rgba(10,10,11,.86), rgba(10,10,11,.78)); }
}
@media (prefers-reduced-motion: reduce) {
  .intro-veil, .close-arc { display: none !important; }
  .hero-halo .run, .scroll-cue .sc-line::after, html.closed .bar .wm i { animation: none !important; }
  .scroll-cue .sc-line::after { top: 13px; opacity: 1; }
}

/* ---------- Ejemplos: recursos reales y composiciones de material (sustituyen la escena procedural y las ilustraciones) ---------- */
#demoGl, .dp-fallback, .nogl .dp-fallback, .nogl-demos .dp-fallback { display: none !important; }
.dp-media { position: absolute; inset: 0; overflow: hidden; background: var(--dbg); }
.dp-media img, .dp-media video, .dp-media svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  transform: translate3d(var(--px, 0), var(--py, 0), 0) scale(var(--pz, 1.04)); transform-origin: var(--po, 60% 50%); transition: transform 1.4s cubic-bezier(.22,.7,.2,1); }
.dp-media video { opacity: 0; transition: opacity .6s ease, transform 1.4s cubic-bezier(.22,.7,.2,1); }
.dp-media.playing video { opacity: 1; }
/* grano fotográfico muy sutil y caída de luz hacia el texto */
.dp-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, var(--dfade) 0%, var(--dfade) 28%, transparent 58%); }
/* cámara por etapa (las etapas siguen al scroll; reversible) */
.dp:has(.dp-stages li:nth-child(2).cur) .dp-media { --pz: 1.12; --px: -2%; }
.dp:has(.dp-stages li:nth-child(3).cur) .dp-media { --pz: 1.2; --px: -3.5%; --py: -1.5%; }
.dp:has(.dp-stages li:nth-child(4).cur) .dp-media { --pz: 1.06; --px: 0; --py: 0; }
.dp--floreria .dp-media { --po: 62% 48%; }
.dp--gimnasio .dp-media { --po: 58% 58%; }
.dp--gimnasio:has(.dp-stages li:nth-child(2).cur) .dp-media { --pz: 1.18; --py: -4%; }
.dp--gimnasio:has(.dp-stages li:nth-child(3).cur) .dp-media { --pz: 1.1; --py: 0; }
.dp--cafeteria .dp-media { --po: 45% 60%; }
/* ropa: la cámara recorre los estantes */
.dp--ropa .dp-media { --pz: 1.16; --px: 4%; }
.dp--ropa:has(.dp-stages li:nth-child(2).cur) .dp-media { --pz: 1.16; --px: -2%; }
.dp--ropa:has(.dp-stages li:nth-child(3).cur) .dp-media { --pz: 1.16; --px: -7%; }
.dp--ropa:has(.dp-stages li:nth-child(4).cur) .dp-media { --pz: 1.04; --px: 0; }
/* mueblería: veta → ensamble → tapiz → comodidad. La madera y el tapiz siguen a las opciones. */
.dp--muebles { --mwood: #b48a5c; --mcloth: #d9d0c1; --mwall: #d8d1c4; }
.dp--muebles:has([data-opt="madera"][data-i="1"][aria-pressed="true"]) { --mwood: #6e4a33; }
.dp--muebles:has([data-opt="madera"][data-i="2"][aria-pressed="true"]) { --mwood: #cfb48c; }
.dp--muebles:has([data-opt="tapiz"][data-i="1"][aria-pressed="true"]) { --mcloth: #8e8576; }
.dp--muebles:has([data-opt="tapiz"][data-i="2"][aria-pressed="true"]) { --mcloth: #7a4f35; }
.dp--muebles .dp-media svg { --pz: 1.12; --po: 62% 40%; }
.dp--muebles .m-plank, .dp--muebles .m-cloth, .dp--muebles .m-warm, .dp--muebles .m-pins { transition: transform 1.2s cubic-bezier(.22,.7,.2,1), opacity .9s ease; }
.dp--muebles .m-plank { transform: translateY(-46px); }
.dp--muebles .m-pins { display: none; }
.dp--muebles .m-cloth { transform: translateX(340px); }
.dp--muebles .m-warm { opacity: 0; }
.dp--muebles:has(.dp-stages li:nth-child(n+2).cur) .m-plank { transform: none; }
.dp--muebles:has(.dp-stages li:nth-child(n+2).cur) .m-pins { opacity: 0; }
.dp--muebles:has(.dp-stages li:nth-child(n+3).cur) .m-cloth { transform: none; }
.dp--muebles:has(.dp-stages li:nth-child(4).cur) .m-warm { opacity: 1; }
.dp--muebles:has(.dp-stages li:nth-child(2).cur) .dp-media svg { --pz: 1.06; }
.dp--muebles:has(.dp-stages li:nth-child(n+3).cur) .dp-media svg { --pz: 1.02; --px: 0; --py: 0; }
/* electrónica: carcasa de aluminio → vista abierta → señal por la pista → perfil */
.dp--electronica { --elight: #cfe3f5; }
.dp--electronica:has([data-opt="perfil"][data-i="1"][aria-pressed="true"]) { --elight: #f2c995; }
.dp--electronica .dp-media svg { --pz: 1.08; --po: 66% 50%; }
.dp--electronica .e-plate { transform-box: fill-box; transform-origin: center; }
.dp--electronica .e-plate, .dp--electronica .e-signal { transition: transform 1.3s cubic-bezier(.22,.7,.2,1), opacity .9s ease, stroke-dashoffset 1.4s ease; }
.dp--electronica .e-signal { stroke-dasharray: .18 .82; stroke-dashoffset: 1; opacity: 0; }
.dp--electronica:has(.dp-stages li:nth-child(n+2).cur) .e-plate { transform: translate(260px, -40px) rotate(8deg); opacity: .9; }
.dp--electronica:has(.dp-stages li:nth-child(n+3).cur) .e-signal { opacity: 1; stroke-dashoffset: 0; }
.dp--electronica:has(.dp-stages li:nth-child(n+2).cur) .dp-media svg { --pz: 1.14; --px: -2%; }
@media (max-width: 860px) {
  .dp-media { inset: 0 0 auto 0; height: 40%; }
  .dp-media::after { background: linear-gradient(180deg, transparent 55%, var(--dfade) 100%); }
  .demo-view:has(.dp--electronica:not([hidden])) .dp-media { height: 30%; }
}
@media (prefers-reduced-motion: reduce) {
  .dp-media img, .dp-media svg, .dp-media video, .dp-media g, .dp-media rect, .dp-media path { transition: none !important; }
  .dp-media video { display: none; }
}

/* ---------- Cierre v2: el pulso es la resolución. La línea queda trazada en la página. ---------- */
main > section:not(#contacto) { transition: opacity .8s ease, filter .8s ease; }
html.at-close main > section:not(#contacto) { opacity: .22; filter: blur(3px); }
html.at-close .ct { background: rgba(10,10,11,.38); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.close-line { position: absolute; left: 0; top: 0; width: 100%; z-index: 3; pointer-events: none; }
.close-line svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.close-line path { fill: none; stroke: var(--sc-accent); stroke-linecap: round; stroke-linejoin: round; }
.close-line .cl-glow { stroke-width: 8; opacity: .18; filter: blur(5px); }
.close-line .cl-core { stroke-width: 1.8; }
.close-line.draw path { animation: pa-dash 1.8s cubic-bezier(.65,0,.35,1) both; }
.close-line .cl-end { fill: var(--sc-accent); opacity: 0; transform-box: fill-box; transform-origin: center; }
.close-line.draw .cl-end { animation: pa-end .9s ease-out 1.75s both; }
.close-line.static .cl-end { opacity: 1; }
@keyframes pa-end { 0% { opacity: 0; transform: scale(.2); } 40% { opacity: 1; transform: scale(2.4); } 100% { opacity: 1; transform: scale(1); } }
html.closed .foot .wm i { display: inline-block; color: var(--sc-accent); animation: pa-beat 2.6s ease-in-out infinite; }
html.closed .wa-btn { box-shadow: 0 0 0 1px rgba(240,180,106,.5), 0 12px 30px -14px rgba(240,180,106,.7); }
@media (prefers-reduced-motion: reduce) {
  main > section:not(#contacto) { transition: none; }
  html.closed .foot .wm i { animation: none; }
}

/* ---------- Ejemplos v2: bodegones de estudio para mueblería y electrónica (sin recurso real disponible) ---------- */
.dp-media--studio::after { background: linear-gradient(90deg, var(--dfade) 0%, var(--dfade) 30%, transparent 56%); }
.dp-media--studio g { transition: transform 1.2s cubic-bezier(.22,.7,.2,1), opacity .9s ease; transform-box: fill-box; transform-origin: center; }
/* Mueblería: Madera (detalle de veta) → Unión (espiga) → Tapiz → Habitar */
.dp--muebles .dp-media svg { --pz: 1.75; --po: 55% 63%; --px: 0; --py: 0; }
.dp--muebles .c-back, .dp--muebles .c-seat { opacity: 0; transform: translateY(-34px); }
.dp--muebles .c-throw, .dp--muebles .c-lamp { opacity: 0; }
.dp--muebles .c-pin { opacity: 0; transition: opacity .6s ease; }
.dp--muebles:has(.dp-stages li:nth-child(2).cur) .dp-media svg { --pz: 1.18; --po: 58% 58%; }
.dp--muebles:has(.dp-stages li:nth-child(2).cur) .c-arm-l { transform: translate(-10px, -28px); }
.dp--muebles:has(.dp-stages li:nth-child(2).cur) .c-arm-r { transform: translate(10px, -28px); }
.dp--muebles:has(.dp-stages li:nth-child(2).cur) .c-pin { opacity: 1; }
.dp--muebles:has(.dp-stages li:nth-child(n+3).cur) .c-back, .dp--muebles:has(.dp-stages li:nth-child(n+3).cur) .c-seat { opacity: 1; transform: none; }
.dp--muebles:has(.dp-stages li:nth-child(3).cur) .dp-media svg { --pz: 1.06; --po: 60% 55%; }
.dp--muebles:has(.dp-stages li:nth-child(4).cur) .dp-media svg { --pz: 1.0; }
.dp--muebles:has(.dp-stages li:nth-child(4).cur) .c-throw, .dp--muebles:has(.dp-stages li:nth-child(4).cur) .c-lamp { opacity: 1; }
/* Electrónica: Diseño → Interior (la tapa se abre) → Conexión (LED) → Comparar (luz del perfil) */
.dp--electronica .dp-media svg { --pz: 1.0; --po: 62% 55%; --px: 0; --py: 0; }
.dp--electronica:has(.dp-stages li:nth-child(2).cur) .dp-media svg { --pz: 1.22; --po: 54% 62%; }
.dp--electronica:has(.dp-stages li:nth-child(2).cur) .h-cup-l .h-plate { transform: translate(-96px, -34px) rotate(-14deg); }
.dp--electronica:has(.dp-stages li:nth-child(3).cur) .dp-media svg { --pz: 1.12; --po: 80% 70%; }
.dp--electronica .h-led { opacity: .25; }
.dp--electronica:has(.dp-stages li:nth-child(n+3).cur) .h-led { opacity: 1; animation: pa-led 1.8s ease-in-out infinite; }
@keyframes pa-led { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
  .dp-media--studio g, .dp--muebles .c-pin { transition: none !important; }
  .dp--electronica .h-led { animation: none !important; }
}

/* ---------- Ejemplos KIE: video ligado a las etapas (pulse-arc.js). El movimiento lo aporta el clip, no la cámara CSS. ---------- */
.dp-media--scrub picture { display: contents; }
.dp-media.dp-media--scrub { --pz: 1 !important; --px: 0 !important; --py: 0 !important; }
.dp-media--scrub img, .dp-media--scrub video { object-position: 60% 50%; }
@media (prefers-reduced-motion: reduce) { .dp-media--scrub video { display: none !important; } }

/* ---------- Iteración ágil: hilo de luz, carrusel de ejemplos y color por giro (pulse-arc.js + site.js) ---------- */
/* Tokens de tema. --th-* tiñen el riel, los metadatos y los botones; --wash-* el fondo de Ejemplos; --rb-* el hilo de luz. */
@property --wash-a { syntax: '<color>'; inherits: true; initial-value: #3a2714; }
@property --wash-b { syntax: '<color>'; inherits: true; initial-value: #0a0a0b; }
:root {
  --th-acc: #F0B46A; --th-meta: #CDBFA9; --th-line: rgba(240,180,106,.42);
  --wash-a: #3a2714; --wash-b: #0a0a0b;
  --rb-core: #fff1dc; --rb-glow: #f0b46a; --rb-tint: #e8c79a;
  transition: --wash-a .42s ease, --wash-b .42s ease;
}
html[data-section="que"] { --rb-glow: #f2bd78; --rb-tint: #efe2cc; }
html[data-section="paquetes"] { --rb-core: #fff6e8; --rb-glow: #e7b679; --rb-tint: #f4ead9; }
html[data-section="contacto"] { --rb-glow: #f0b46a; --rb-tint: #ffd29a; }
html[data-scene-theme="floreria"]    { --th-acc: #E2A7AE; --th-meta: #E9D5CF; --th-line: rgba(226,167,174,.45); --wash-a: #3c2328; --wash-b: #11201a; }
html[data-scene-theme="gimnasio"]    { --th-acc: #D69A35; --th-meta: #D9D6CE; --th-line: rgba(214,154,53,.45);  --wash-a: #2b2723; --wash-b: #131415; }
html[data-scene-theme="cafeteria"]   { --th-acc: #C8865A; --th-meta: #E7D3BC; --th-line: rgba(200,134,90,.48);  --wash-a: #3b2519; --wash-b: #1a120d; }
html[data-scene-theme="ropa"]        { --th-acc: #BC9A5E; --th-meta: #DED3BF; --th-line: rgba(188,154,94,.45);  --wash-a: #302c1d; --wash-b: #191a11; }
html[data-scene-theme="muebles"]     { --th-acc: #C98262; --th-meta: #E5D6C3; --th-line: rgba(201,130,98,.45);  --wash-a: #3b2718; --wash-b: #1c140e; }
html[data-scene-theme="electronica"] { --th-acc: #6C9CDB; --th-meta: #C9D5E2; --th-line: rgba(108,156,219,.45); --wash-a: #152331; --wash-b: #0a0f14; }
html[data-section="ejemplos"][data-scene-theme="floreria"]    { --rb-core: #fff3f2; --rb-glow: #e6a1aa; --rb-tint: #9ec4ae; }
html[data-section="ejemplos"][data-scene-theme="gimnasio"]    { --rb-core: #fbf8f1; --rb-glow: #d99a33; --rb-tint: #9aa0a4; }
html[data-section="ejemplos"][data-scene-theme="cafeteria"]   { --rb-core: #fff4e6; --rb-glow: #c98154; --rb-tint: #eadbc6; }
html[data-section="ejemplos"][data-scene-theme="ropa"]        { --rb-core: #fbf5e8; --rb-glow: #c3a064; --rb-tint: #959b6b; }
html[data-section="ejemplos"][data-scene-theme="muebles"]     { --rb-core: #fff2dc; --rb-glow: #f0c27c; --rb-tint: #c98262; }
html[data-section="ejemplos"][data-scene-theme="electronica"] { --rb-core: #eef6ff; --rb-glow: #5d92d8; --rb-tint: #74c3d4; }

/* Hilo de luz y luz de escena: fijos, sobre el fondo 3D y detrás del contenido (main tiene z-index 2). */
.light-thread, .nogl .light-thread { position: fixed; inset: 0; z-index: 1; width: 100%; height: 100%; display: block !important; pointer-events: none; }
.scene-wash { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .42s ease;
  background: radial-gradient(80% 70% at 70% 45%, color-mix(in srgb, var(--wash-a) 90%, transparent), transparent 72%), linear-gradient(180deg, transparent 30%, color-mix(in srgb, var(--wash-b) 80%, transparent)); }
html[data-section="ejemplos"] .scene-wash { opacity: 1; }
.hero-halo, .intro-veil { display: none !important; }

/* Ritmo: menos recorrido para la escena fija y transiciones cortas con salida suave. */
.demo { height: 220svh; }
.dp-media img, .dp-media video, .dp-media svg { transition: transform .38s cubic-bezier(.2,.75,.25,1); }
.dp-media video { transition: opacity .28s ease, transform .38s cubic-bezier(.2,.75,.25,1); }
.dp-stages button { transition: background-color .18s ease; }
.dp-stages button::before { transition: background-color .18s ease, color .18s ease, border-color .18s ease; }

/* Riel del carrusel: giro actual, progreso y respaldo con botones. */
.ej-rail { display: flex; align-items: center; gap: 14px; min-height: 44px; min-width: 0; }
.ej-count { display: flex; align-items: baseline; gap: 8px; margin: 0; font: 500 11.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--th-meta); white-space: nowrap; transition: color .35s ease; }
.ej-count b { font: 600 13px/1 var(--mono); color: var(--th-acc); transition: color .35s ease; }
.ej-name { font: 500 15px/1 var(--sc-font-text); letter-spacing: 0; text-transform: none; color: var(--sc-ink); }
.ej-progress { position: relative; flex: 1 1 auto; min-width: 48px; height: 2px; border-radius: 2px; background: rgba(238,232,222,.14); overflow: hidden; }
.ej-progress i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(100% / 6); border-radius: 2px; background: var(--th-acc); transform: translateX(calc(var(--ej-p, 0) * 500%)); transition: background-color .35s ease; }
.ej-swipe { margin: 0; font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #A9A196; white-space: nowrap; }
.ej-nav { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid var(--th-line); background: rgba(14,14,15,.62); color: var(--sc-ink); cursor: pointer; transition: border-color .35s ease, background-color .18s ease, opacity .18s ease; }
.ej-nav svg { width: 16px; height: 16px; }
.ej-nav:hover:not(:disabled) { background: color-mix(in srgb, var(--th-acc) 24%, rgba(14,14,15,.62)); }
.ej-nav:disabled { opacity: .32; cursor: default; }

/* Metadatos de la demostración: siguen el tema del giro. */
.frame { background: transparent; box-shadow: none; border-radius: 0; overflow: visible; grid-template-rows: 30px minmax(0, 1fr); }
.frame-bar { background: transparent; color: var(--th-meta); padding: 0 2px; transition: color .35s ease; }
.frame-bar i { background: var(--th-line); transition: background-color .35s ease; }
.frame-bar .cd { background: color-mix(in srgb, var(--th-acc) 18%, #141414); color: var(--sc-ink); border: 1px solid var(--th-line); transition: background-color .35s ease, border-color .35s ease; }

/* Carrusel: scroll lateral nativo con snap; las tarjetas vecinas asoman a los lados. */
.demo-view { --cw: min(1080px, 84%); --cg: 18px; display: flex; gap: var(--cg); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; background: transparent; touch-action: pan-x pan-y; outline-offset: 4px; border-radius: 14px; }
.demo-view::-webkit-scrollbar { display: none; }
.demo-view::before, .demo-view::after { content: ""; flex: 0 0 calc((100% - var(--cw)) / 2 - var(--cg)); }
.demo-view .dp { position: relative; inset: auto; flex: 0 0 var(--cw); height: 100%; border-radius: 14px; overflow: hidden; scroll-snap-align: center; scroll-snap-stop: always; background: var(--dbg);
  box-shadow: 0 0 0 1px rgba(255,255,255,.07); transition: opacity .34s cubic-bezier(.2,.7,.2,1), transform .34s cubic-bezier(.2,.7,.2,1), box-shadow .34s ease, filter .34s ease; }
.demo-view .dp:not(.is-active) { opacity: .52; transform: scale(.965); filter: saturate(.75); cursor: pointer; }
.demo-view .dp:not(.is-active) .dp-ui { opacity: .5; }
.demo-view .dp.is-active { box-shadow: 0 0 0 1px var(--th-line), 0 26px 70px -36px var(--th-acc); }
.demo-view .dp-ui { transition: opacity .3s ease; }
.demo-view.dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.demo-view.dragging .dp { cursor: grabbing; }
.demo-view img, .demo-view video { -webkit-user-drag: none; user-select: none; }

/* Paletas por giro dentro de cada escena (combinan con su video o foto). */
.dp--floreria    { --dbg: #f4e8e3; --dfade: rgba(244,232,227,.94); --dink: #3b2a2c; --dsoft: #7a6062; --dacc: #4e6b5c; --dacc-ink: #f7f1ea; --dhl: rgba(78,107,92,.1);  --dline: rgba(59,42,44,.2);  --dfocus: #4e6b5c; }
.dp--gimnasio    { --dbg: #1a1b1c; --dfade: rgba(26,27,28,.9);    --dink: #eceae4; --dsoft: #a9a7a1; --dacc: #d4952c; --dacc-ink: #151413; --dhl: rgba(236,234,228,.07); --dline: rgba(236,234,228,.2); --dfocus: #f0b65a; }
.dp--cafeteria   { --dbg: #2b1e17; --dfade: rgba(43,30,23,.9);    --dink: #f3e8d8; --dsoft: #cbb29a; --dacc: #c27c4c; --dacc-ink: #1d120c; --dhl: rgba(243,232,216,.08); --dline: rgba(243,232,216,.22); --dfocus: #e0a070; }
.dp--ropa        { --dbg: #ebe3d5; --dfade: rgba(235,227,213,.93); --dink: #24231e; --dsoft: #5f5a4c; --dacc: #555b3a; --dacc-ink: #f6f1e6; --dhl: rgba(85,91,58,.09);  --dline: rgba(36,35,30,.2);  --dfocus: #8a6a2e; }
.dp--muebles     { --dbg: #ece5d9; --dfade: rgba(236,229,217,.93); --dink: #33291f; --dsoft: #6b5a49; --dacc: #a65a3c; --dacc-ink: #fbf6ee; --dhl: rgba(166,90,60,.09); --dline: rgba(51,41,31,.2);  --dfocus: #a65a3c; }
.dp--electronica { --dbg: #0e1216; --dfade: rgba(14,18,22,.9);    --dink: #e5ebf1; --dsoft: #9aabbb; --dacc: #4f86c9; --dacc-ink: #07101a; --dhl: rgba(111,194,212,.08); --dline: rgba(143,190,220,.22); --dfocus: #7fc6d8; }

@media (max-width: 860px) {
  .demo-view { --cw: 88%; --cg: 10px; }
  .ej-rail { gap: 10px; }
  .ej-name { font-size: 14px; }
  .ej-count .ej-of { display: none; }
}
@media (max-width: 640px) { .ej-swipe { display: none; } }
@media (prefers-reduced-motion: reduce) {
  :root { transition: none; }
  .demo-view .dp:not(.is-active) { transform: none; }
}
/* La escena fija empieza debajo de la barra (72 px en escritorio) para que el riel del carrusel no quede tapado. */
@media (min-width: 861px) { .demo-sticky { top: 78px; height: calc(100svh - 78px); } }
@media (max-width: 860px) { .demo-sticky { top: 74px; height: calc(100svh - 74px); } }

/* =====================================================================================================
   ESCENARIO ÚNICO (GUION-ESCENARIO.md). Hero, problema, cómo trabajamos y ejemplos viven en una escena fija:
   el scroll avanza T (0 a 1) y site.js escribe en cada .beat su visibilidad --v (0 a 1) y su sentido --d
   (1 entrando desde abajo, -1 saliendo hacia arriba). La materia 3D del fondo usa la misma T.
   ===================================================================================================== */
.cine { position: relative; height: 880svh; }   /* 100svh de pantalla + 70svh de inicio, 140svh para que la materia forme el dispositivo, 550svh para los cinco ejemplos (110 cada uno) y 20svh de salida */
.cine-mark { position: absolute; left: 0; width: 1px; height: 1px; top: calc(var(--at) * (100% - 100svh)); pointer-events: none; }
/* las marcas de capítulo apuntan a una T exacta: anulan el margen de la cabecera fija (scroll-padding-top del documento) */
main .cine .cine-mark { scroll-margin-top: -92px; }
@media (max-width: 860px) { main .cine .cine-mark { scroll-margin-top: -84px; } }
.cine-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.ch { position: absolute; inset: 0; pointer-events: none; }
.beat { --v: 0; --d: 1; position: absolute; opacity: var(--v); visibility: visible;
  transform: translate3d(0, calc((1 - var(--v)) * 28px * var(--d)), 0); filter: blur(calc((1 - var(--v)) * 6px)); }
.beat.is-on { pointer-events: auto; }
/* invisibles pero enfocables: con Tab, site.js lleva el escenario al capítulo del control enfocado */
.ch-hero .hero { left: var(--gut); top: clamp(120px, 23vh, 230px); max-width: var(--col); padding: 0; }
.ch-hero .hero h1 { font-size: clamp(40px, 4.4vw, 68px); }
.ch-line { left: var(--gut); bottom: 20vh; font: 400 clamp(30px, 2.8vw, 44px)/1.06 var(--sc-font-display); max-width: 16ch; }
.ch-hero .scroll-cue { left: var(--gut); bottom: 56px; margin: 0; }
.ch-prob .beat, .ch-como .como, .ch-ej .ej-side { left: var(--gut); top: 50%; translate: 0 -50%; max-width: var(--col); }
.ch-prob h2 { font-size: clamp(34px, 3.4vw, 52px); }

/* Cómo trabajamos: pasos y pilares se encienden cuando su parte aparece en la materia */
.cine .como .h3 { font-size: clamp(26px, 2.3vw, 36px); line-height: 1.08; }
.cine .steps { margin-top: 26px; gap: 14px; }
.cine .steps li { opacity: .34; transition: opacity .35s ease; }
.cine .steps li.is-on { opacity: 1; }
.cine .steps li.is-on .n::before { border-color: var(--sc-accent); color: var(--sc-accent-ink); background: var(--sc-accent); }
.cine .steps h3 { font: 600 16px/1.3 var(--sc-font-text); margin: 4px 0 4px; letter-spacing: 0; }
.cine .pillars { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 22px; max-width: none; }
.cine .pillars li { border-top: 1px solid var(--line); padding-top: 10px; opacity: .3; transition: opacity .35s ease, border-color .35s ease; }
.cine .pillars li.is-on { opacity: 1; border-top-color: var(--sc-accent); }
.cine .pillars b { display: block; font: 400 21px/1.1 var(--sc-font-display); }
.cine .pillars span { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.45; color: #C9C2B6; }

/* Ejemplos: costado con poca información */
.ch-ej .ej-side { width: min(380px, 31vw); }
.ej-side h2 { font-size: clamp(32px, 3vw, 46px); }
.ej-sub { margin-top: 12px; font-size: 14.5px; line-height: 1.5; color: #C9C2B6; }
.ej-side .ej-rail { margin-top: 22px; }
.ej-stages { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 2px; counter-reset: es; }
.ej-stages button { width: 100%; display: grid; grid-template-columns: 26px 1fr; column-gap: 10px; align-items: center; text-align: left; min-height: 40px; padding: 4px 8px 4px 4px; border: 0; border-radius: 10px; background: none; color: var(--sc-ink-soft); font: 500 14px/1.25 var(--sc-font-text); cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.ej-stages button::before { content: counter(es); counter-increment: es; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--th-line); font: 600 11px var(--mono); color: var(--th-meta); transition: background-color .2s ease, color .2s ease; }
.ej-stages button:hover { background: rgba(238,232,222,.05); color: var(--sc-ink); }
.ej-stages li.cur button { color: var(--sc-ink); background: rgba(238,232,222,.06); }
.ej-stages li.cur button::before { background: var(--th-acc); border-color: var(--th-acc); color: #141210; }
.ej-stages small { grid-column: 2; display: none; font: 400 12.5px/1.4 var(--sc-font-text); color: #B9B2A6; }
.ej-stages li.cur small { display: block; }
.ej-opts { margin-top: 14px; display: grid; gap: 10px; }
.ej-optg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ej-opts .lbl { font: 500 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--th-meta); margin-right: 4px; flex-basis: 100%; margin-bottom: 2px; }
.ej-opts button { min-height: 40px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--th-line); background: rgba(14,14,15,.6); color: var(--sc-ink-soft); font: 500 13px/1 var(--sc-font-text); cursor: pointer; }
.ej-opts button[aria-pressed="true"] { background: var(--th-acc); border-color: var(--th-acc); color: #141210; }
.ej-status { margin-top: 10px; min-height: 1em; font-size: 12.5px; line-height: 1.4; color: var(--th-meta); }
.ej-side .ej-note { margin-top: 10px; font-size: 12px; color: #9F978B; }

/* el celular sólo se desvanece (sin desplazarse): su pantalla debe coincidir con la del modelo 3D en todo momento */
.cine-phone.beat { transform: none; filter: none; }
/* El celular: la materia lo formó; el DOM enciende su pantalla exactamente sobre la del modelo 3D (site.js ajusta la cámara a esta caja) */
.cine-phone { --ph: min(calc(100svh - 150px), 780px); left: 64%; top: calc(50% + 28px); height: var(--ph); aspect-ratio: 70 / 150; translate: -50% -50%;
  border-radius: calc(var(--ph) * .062); overflow: hidden; background: #0c0c0d; container-type: size;
  box-shadow: 0 0 0 calc(var(--ph) * .012) #0d0d0e, 0 0 0 calc(var(--ph) * .012 + 1px) rgba(240,180,106,.28), 0 50px 90px -40px rgba(0,0,0,.95); }
.phone-bar { position: absolute; z-index: 3; top: 0; left: 0; right: 0; height: 28px; display: flex; align-items: center; gap: 8px; padding: 4px 11cqw 0; pointer-events: none;
  font: 500 9.5px/1 var(--mono); letter-spacing: .04em; color: var(--dink, #333); background: linear-gradient(180deg, var(--dfade, rgba(240,235,228,.9)), transparent); }
.phone-bar span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.phone-bar .cd { flex: none; margin-left: auto; padding: 4px 6px; border-radius: 4px; background: rgba(20,20,20,.82); color: #EEE8DE; letter-spacing: .1em; text-transform: uppercase; font-size: 8.5px; }
.cine-phone .demo-view { --cw: 100%; --cg: 0px; position: absolute; inset: 0; height: auto; min-height: 0; border-radius: inherit; }
.cine-phone .demo-view .dp { border-radius: 0; box-shadow: none; }
.cine-phone .demo-view .dp:not(.is-active) { opacity: 1; transform: none; filter: none; }
.cine-phone .demo-view .dp:not(.is-active) .dp-ui { opacity: 1; }
.cine-phone:has(.dp--floreria.is-active) .phone-bar    { --dink: #3b2a2c; --dfade: rgba(244,232,227,.92); }
.cine-phone:has(.dp--gimnasio.is-active) .phone-bar    { --dink: #eceae4; --dfade: rgba(26,27,28,.9); }
.cine-phone:has(.dp--cafeteria.is-active) .phone-bar   { --dink: #f3e8d8; --dfade: rgba(43,30,23,.9); }
.cine-phone:has(.dp--ropa.is-active) .phone-bar        { --dink: #24231e; --dfade: rgba(235,227,213,.92); }
.cine-phone:has(.dp--muebles.is-active) .phone-bar     { --dink: #33291f; --dfade: rgba(236,229,217,.92); }
.cine-phone:has(.dp--electronica.is-active) .phone-bar { --dink: #e5ebf1; --dfade: rgba(14,18,22,.9); }
/* cada demo, en formato de celular: imagen a sangre, marca arriba, mensaje y botón abajo */
.cine-phone .dp-media::after { background: linear-gradient(180deg, transparent 0%, transparent 34%, var(--dfade) 66%, var(--dfade) 100%); }
.cine-phone .dp-media--scrub img, .cine-phone .dp-media--scrub video { object-position: var(--phone-po, 58% 50%); }
.cine-phone .dp--floreria { --phone-po: 62% 50%; }
.cine-phone .dp--gimnasio { --phone-po: 50% 50%; }
.cine-phone .dp--cafeteria { --phone-po: 45% 50%; }
.cine-phone .dp--ropa { --phone-po: 52% 50%; }
.cine-phone .dp--electronica { --phone-po: 60% 50%; }
.cine-phone .dp-fallback { inset: 0 0 40% 0; }
.cine-phone .dp-nav { top: 26px; padding: 10px 6cqw; }
.cine-phone .dp-brand { font-size: max(15px, 6.4cqw); }
.cine-phone .dp--ropa .dp-brand { font-size: max(13px, 5.2cqw); }
.cine-phone .dp-links { display: none; }
.cine-phone .dp-copy { left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: 64%; padding: 0 6cqw 6cqw; gap: 2.2cqw; overflow: hidden; background: none; }
.cine-phone .dp-k { font-size: max(9.5px, 3cqw); }
.cine-phone .dp-h { font-size: max(21px, 8.4cqw); line-height: 1.02; }
.cine-phone .dp--gimnasio .dp-h { font-size: max(19px, 7.6cqw); }
.cine-phone .dp-p { font-size: max(12px, 3.9cqw); max-width: none; }
.cine-phone .dp-stages, .cine-phone .dp-stagecap, .cine-phone .dp-opts, .cine-phone .dp-note, .cine-phone .dp-specs, .cine-phone .dp-status { display: none !important; }
.cine-phone .dp-cta-row { margin-top: 1.5cqw; }
.cine-phone .dp-cta { width: 100%; min-height: max(40px, 12cqw); font-size: max(13px, 4.2cqw); }
.cine-phone .dp-cta-row:has(.dp-more) { row-gap: 0; justify-content: center; }
.cine-phone .dp-more { font-size: max(12.5px, 3.9cqw); min-height: max(36px, 10cqw); }

/* el formato de celular manda sobre las reglas móviles anteriores de la tarjeta (media en franja, copy con fondo) */
.cine-phone .demo-view { --cw: 100%; --cg: 0px; }
.cine-phone .dp-media, .cine-phone .demo-view:has(.dp--electronica:not([hidden])) .dp-media { inset: 0; height: auto; }
.cine-phone .dp-copy, .cine-phone .dp--electronica .dp-copy { top: auto; background: none; }
.cine-phone .dp-k, .cine-phone .dp-p { display: block; }
.cine-phone .dp--electronica .dp-p { display: none; }
.cine-phone .dp-nav { background: none; }

/* Encuadre de los clips horizontales (16:9) en la pantalla vertical del celular. A pantalla completa sólo se veía entre
   1/4 y 1/2 del ancho; el video mide 200 % del ancho (se ve ~50 % del cuadro: punto medio entre la pantalla completa y la franja de v22), centrada en el sujeto de
   cada giro (--sc: centro horizontal del sujeto, 0 a 1), y el resto de la pantalla lo llena el mismo cuadro desenfocado. */
.cine-phone .dp--floreria { --sc: .56; --amb: .95; }
.cine-phone .dp--gimnasio { --sc: .63; --amb: .55; }
.cine-phone .dp--cafeteria { --sc: .64; --amb: .6; }
.cine-phone .dp--ropa { --sc: .6; --amb: .95; }
.cine-phone .dp--electronica { --sc: .58; --amb: .6; }
.cine-phone .demo-view .dp:not(.dp--mariscos):not(.dp--tienda) .dp-media--scrub video {
  inset: auto; top: 9%; left: clamp(-100%, calc(50% - var(--sc, .55) * 200%), 0%); width: 200%; max-width: none; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transform: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 86%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 86%, transparent 100%); }
.cine-phone .demo-view .dp:not(.dp--mariscos):not(.dp--tienda) .dp-media--scrub.playing img { filter: blur(22px) brightness(var(--amb, .6)) saturate(1.05); transform: scale(1.2); }

/* Mariscos (clip vertical 9:16, KIE): piedra oscura con acento salmón. El platillo queda arriba del texto. */
.dp--mariscos { --dbg: #121314; --dfade: rgba(18,19,20,.92); --dink: #f2ece4; --dsoft: #bdb4a8; --dacc: #e2683c; --dacc-ink: #170c07; --dhl: rgba(242,236,228,.07); --dline: rgba(242,236,228,.2); --dr: 999px; --dfocus: #f0a27c; }
.dp--mariscos .dp-brand, .dp--mariscos .dp-h { font-family: "Newsreader", Georgia, serif; font-weight: 500; letter-spacing: -0.01em; }
.dp--mariscos .dp-brand { letter-spacing: .06em; }
.cine-phone .demo-view .dp--mariscos .dp-media { inset: 0 0 20% 0 !important; height: auto !important; }
.cine-phone .demo-view .dp--mariscos .dp-media::after { background: linear-gradient(180deg, rgba(18,19,20,.35) 0%, transparent 14%, transparent 64%, var(--dbg) 100%) !important; }
.cine-phone .dp--mariscos .dp-media--scrub img, .cine-phone .dp--mariscos .dp-media--scrub video { object-position: 50% 62%; }
.cine-phone:has(.dp--mariscos.is-active) .phone-bar { --dink: #f2ece4; --dfade: rgba(18,19,20,.9); }
html[data-scene-theme="mariscos"] { --th-acc: #E2794E; --th-meta: #E9D9CC; --th-line: rgba(226,121,78,.45); --wash-a: #3a1d14; --wash-b: #111214; }
html[data-section="ejemplos"][data-scene-theme="mariscos"] { --rb-core: #fff1e8; --rb-glow: #ec7d52; --rb-tint: #d9433a; }

/* después del escenario: la materia queda atrás, en penumbra, para leer paquetes y contacto */
.stage { transition: opacity .6s ease; }
html.past-cine .stage { opacity: .22; }
html.past-cine .scene-wash { opacity: 0; }

/* móvil vertical: texto arriba, materia abajo; en Ejemplos el celular arriba y la información debajo */
@media (max-width: 860px) and (orientation: portrait) {
  .ch-hero .hero { top: 104px; right: var(--gut-r); }
  .ch-hero .hero h1 { font-size: clamp(32px, 9.4vw, 46px); }
  .ch-hero .scroll-cue { bottom: 36px; }
  .ch-line { bottom: auto; top: 104px; right: var(--gut-r); max-width: none; font-size: clamp(28px, 8vw, 38px); }
  .ch-prob .beat, .ch-como .como { top: 96px; translate: none; right: var(--gut-r); max-width: none; }
  .ch-prob h2 { font-size: clamp(28px, 8vw, 38px); }
  .ch-prob .body { font-size: 15px; margin-top: 12px; }
  .cine .como .h3 { font-size: clamp(22px, 6.2vw, 28px); }
  .cine .steps { margin-top: 16px; gap: 8px; }
  .cine .steps p { display: none; }
  .cine .steps li.is-on p { display: block; font-size: 13.5px; }
  .cine .pillars { margin-top: 16px; gap: 8px 14px; }
  .cine .pillars span { display: none; }
  .cine .pillars b { font-size: 17px; }
  .cine-phone { --ph: min(calc(100svh - 104px - 268px), calc((100vw - 64px) / .4667)); left: 50%; top: 96px; translate: -50% 0; }
  .ch-ej .ej-side { top: auto; bottom: 10px; translate: none; left: var(--gut); right: var(--gut-r); width: auto; max-width: none; }
  .ej-side .eyebrow { margin-bottom: 4px; font-size: 10.5px; }
  .ej-side .ej-sub, .ej-side .ej-note { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ej-side h2.ej-title { font-size: clamp(18px, 5vw, 22px); line-height: 1.12; margin: 0 0 6px; min-height: 2.24em; }
  .ej-side .ej-rail { margin-top: 0; min-height: 40px; }
  .ej-stages { display: flex; gap: 4px; margin-top: 6px; }
  .ej-stages li { flex: 0 0 auto; }
  .ej-stages li.cur { flex: 1 1 auto; min-width: 0; }
  .ej-stages button { grid-template-columns: 24px auto; min-height: 40px; padding: 2px 10px 2px 2px; font-size: 13px; }
  .ej-stages li:not(.cur) button { grid-template-columns: 24px; padding: 2px 8px; }
  .ej-stages li:not(.cur) button b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ej-stages li.cur small { display: none; }
  .ej-opts { margin-top: 6px; display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; }
  .ej-opts::-webkit-scrollbar { display: none; }
  .ej-optg { flex: none; flex-wrap: nowrap; }
  .ej-opts .lbl { flex-basis: auto; margin: 0 4px 0 0; }
  .ej-opts button { flex: none; }
  .ej-status { margin-top: 4px; font-size: 11.5px; }
  .ej-status:empty { display: none; }
}

/* movimiento reducido: sin escena fija; los capítulos se leen uno tras otro con la materia quieta detrás */
.rm .cine { height: auto; }
.rm .cine-mark { position: relative; top: auto; display: block; }
.rm .cine-stage { position: relative; height: auto; overflow: visible; }
.rm .ch { position: relative; inset: auto; padding: 16svh var(--gut-r) 10svh var(--gut); }
.rm .ch-hero { padding-top: 22svh; }
.rm .ch .beat { --v: 1; position: relative; left: auto; right: auto; top: auto; bottom: auto; translate: none; transform: none; filter: none; pointer-events: auto; visibility: visible; }
.rm .ch-line, .rm .ch-hero .scroll-cue { display: block; margin-top: 36px; }
.rm .cine .steps li, .rm .cine .pillars li { opacity: 1; }
.rm .ch .beat + .beat { margin-top: 64px; }
.rm .ej-side { min-width: 0; }
.rm .ch-ej { display: grid; grid-template-columns: minmax(0, 380px) auto; gap: 48px; align-items: start; }
.rm .cine-phone { --ph: min(78svh, 720px); left: auto; top: auto; }
@media (max-width: 860px) { .rm .ch-ej { grid-template-columns: minmax(0, 1fr); } .rm .cine-phone { --ph: min(76svh, 640px); margin: 0 auto; } }

/* =====================================================================================================
   PAQUETES (v24): vender la diferencia. Origen sobrio; Pro cinematográfico (es lo que el visitante está viendo).
   ===================================================================================================== */
.sec--paquetes .pq-col { width: min(1120px, 100%); gap: 22px; }
.sec--paquetes .pq-head h2 { font-size: clamp(36px, 4vw, 60px); max-width: 16ch; }
.sec--paquetes .pq-head .body { max-width: 50ch; }
.pq-base { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pq-base-l { font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #D8CCB4; }
.pq-base .pq-list { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; }
.pq-base .pq-list li { font-size: 13.5px; }
.sec--paquetes .pq-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr); gap: 20px; align-items: stretch; }
.pq-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 32px 30px 28px; border-radius: 22px; overflow: hidden; }
.pq-card h3 { font: 400 clamp(32px, 2.8vw, 42px)/1 var(--sc-font-display); }
.pq-card .pq-for { font: 400 clamp(19px, 1.5vw, 22px)/1.25 var(--sc-font-display); color: #E6DED2; max-width: 22ch; }
.pq-card .pq-price { margin-top: 8px; color: #B9B2A6; }
.pq-card .pq-price b { font: 400 clamp(46px, 4.4vw, 64px)/1 var(--sc-font-display); letter-spacing: -0.02em; }
.pq-card .pq-time { font-size: 13.5px; }
.pq-card .pq-list { margin: 10px 0 18px; gap: 10px; flex: 1 1 auto; align-content: start; }
.pq-card .pq-list li { font-size: 14.5px; }
.pq-tag, .pq-plus { font: 500 11px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #B9B2A6; }
.pq-plus { margin-top: 6px; color: #F2C995; }
.pq-cta { display: flex; align-items: center; justify-content: center; min-height: 50px; border-radius: 999px; font: 600 15px/1 var(--sc-font-text); text-decoration: none; color: var(--sc-ink); border: 1px solid var(--line-2); transition: border-color .2s ease, background-color .2s ease, box-shadow .3s ease, transform .1s ease; }
.pq-cta:hover { border-color: var(--sc-ink); }
.pq-cta:active { transform: translateY(1px); }
.pq-card--es { background: #121213; border: 1px solid var(--line-2); }
/* Pro: luz dorada, borde de película y el mismo resplandor del hilo */
.pq-card--pro { background: radial-gradient(110% 70% at 85% 0%, rgba(240,180,106,.26), transparent 62%), radial-gradient(80% 60% at 0% 100%, rgba(226,121,78,.12), transparent 70%), linear-gradient(165deg, #241910 0%, #110f0d 55%, #0c0c0d 100%);
  border: 1px solid rgba(240,180,106,.6); box-shadow: 0 0 0 1px rgba(240,180,106,.12), 0 30px 60px -36px rgba(240,180,106,.5); }
.pq-card--pro::before, .pq-card--pro::after { content: ""; position: absolute; left: 0; right: 0; height: 9px; opacity: .45; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(240,180,106,.55) 0 9px, transparent 9px 21px); }
.pq-card--pro::before { top: 6px; }
.pq-card--pro::after { bottom: 6px; }
.pq-badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; padding: 7px 12px; border-radius: 999px; background: rgba(240,180,106,.14); border: 1px solid rgba(240,180,106,.45);
  font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #F6D3A4; }
.pq-badge span { display: inline-block; color: var(--sc-accent); animation: pq-rec 1.6s ease-in-out infinite; will-change: opacity; }   /* capa propia: el parpadeo no repinta la tarjeta */
@keyframes pq-rec { 50% { opacity: .25; } }
.pq-card--pro h3 { font-size: clamp(38px, 3.4vw, 50px); }
.pq-card--pro .pq-price b { background: linear-gradient(180deg, #FFF3E2 0%, #F0B46A 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pq-card--pro .pq-list li { color: #E9E1D5; }
.pq-card--pro .pq-list li b { color: #F6D3A4; font-weight: 600; }
.pq-card--pro .pq-list li::before { border-color: rgba(240,180,106,.8); }
.pq-cta--pro { color: var(--sc-accent-ink); background: var(--sc-accent); border-color: var(--sc-accent); box-shadow: 0 14px 34px -14px rgba(240,180,106,.8); }
.pq-cta--pro:hover { background: #F5C589; border-color: #F5C589; box-shadow: 0 18px 40px -14px rgba(240,180,106,.95); }
/* comparación: puntos de intensidad y la columna Pro iluminada */
.pq-cmp h3 { font: 400 clamp(26px, 2.2vw, 32px)/1.1 var(--sc-font-display); letter-spacing: 0; }
.pq-cmp thead th.pro { color: #F6D3A4; }
.pq-cmp td.pro { background: rgba(240,180,106,.06); color: #F1E9DD; }
.pq-cmp tbody tr:last-child td { font: 400 22px var(--sc-font-display); }
.pq-cmp tbody tr:last-child td.pro { color: #F6D3A4; }
.mt { display: flex; gap: 4px; margin-bottom: 7px; }
.mt i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgba(238,232,222,.35); }
.mt i.on { background: #CFC7BB; border-color: #CFC7BB; }
td.pro .mt i { border-color: rgba(240,180,106,.45); }
td.pro .mt i.on { background: var(--sc-accent); border-color: var(--sc-accent); box-shadow: 0 0 8px rgba(240,180,106,.6); }
@media (max-width: 860px) {
  .sec--paquetes .pq-cols { grid-template-columns: 1fr; }
  .pq-card { padding: 26px 20px 22px; }
  .pq-card--pro { order: -1; }   /* en celular, el que más se diferencia va primero */
}
@media (prefers-reduced-motion: reduce) { .pq-badge span { animation: none; } }

/* =====================================================================================================
   CONTACTO (v24): fichas para elegir y el mensaje armándose en una conversación tipo WhatsApp.
   ===================================================================================================== */
html .sec--contacto .ct { width: min(1120px, 100%); padding: 40px; border-radius: 26px; border: 1px solid var(--line);
  background: radial-gradient(90% 70% at 100% 0%, rgba(240,180,106,.1), transparent 60%), rgba(12,12,13,.9); -webkit-backdrop-filter: none; backdrop-filter: none; }
.sec--contacto .ct h2 { font-size: clamp(36px, 4vw, 58px); }
.sec--contacto .msg { margin-top: 30px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 36px; align-items: start; }
.ct-pick { display: grid; gap: 24px; }
.chips { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips legend { display: flex; align-items: center; gap: 10px; padding: 0; margin-bottom: 12px; font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #D8CCB4; }
.chips legend em { font-style: normal; letter-spacing: .04em; text-transform: none; color: #8F877C; font-family: var(--sc-font-text); }
.chips legend .n { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(240,180,106,.6); color: #F2C995; font-size: 11px; letter-spacing: 0; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(238,232,222,.03);
  font: 500 14px/1 var(--sc-font-text); color: #D9D2C7; transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .12s ease; }
.chip:hover span { border-color: rgba(238,232,222,.6); color: var(--sc-ink); }
.chip input:checked + span { background: var(--sc-accent); border-color: var(--sc-accent); color: var(--sc-accent-ink); box-shadow: 0 8px 22px -12px rgba(240,180,106,.9); }
.chip input:focus-visible + span { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
.chip input:active + span { transform: scale(.97); }
.ct-chat { display: grid; gap: 14px; padding: 18px; border-radius: 24px; border: 1px solid var(--line);
  background: radial-gradient(rgba(238,232,222,.05) 1px, transparent 1px) 0 0 / 14px 14px, linear-gradient(180deg, #151413, #0f0f10); }
.chat-head { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.chat-av { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #1d1a16; border: 1px solid rgba(240,180,106,.5); font: 400 22px/1 var(--sc-font-display); color: var(--sc-ink); }
.chat-av i { font-style: normal; color: var(--sc-accent); }
.chat-head b { display: block; font: 600 15px/1.2 var(--sc-font-text); }
.chat-head small { display: block; font-size: 12.5px; color: #A9A196; }
.bubble { position: relative; display: block; margin-left: 8%; padding: 14px 16px 12px; border-radius: 18px 18px 4px 18px; background: linear-gradient(180deg, #3a2b1b, #2c2216); border: 1px solid rgba(240,180,106,.28); }
.bubble::after { content: "Vista previa · edítalo"; display: block; margin-top: 6px; text-align: right; font: 500 10.5px/1 var(--mono); letter-spacing: .06em; color: rgba(246,211,164,.6); }
.bubble:focus-within { border-color: var(--sc-accent); box-shadow: 0 0 0 3px rgba(240,180,106,.18); }
.bubble textarea { display: block; width: 100%; min-height: 128px; border: 0; padding: 0; background: transparent; color: #F6EFE4; font: 400 16px/1.5 var(--sc-font-text); resize: vertical; outline: none; }
.sec--contacto .actions { justify-content: space-between; }
.sec--contacto .wa-btn { flex: 1 1 auto; min-height: 52px; font-size: 16px; }
@media (max-width: 860px) {
  html .sec--contacto .ct { padding: 26px 18px; border-radius: 20px; }
  .sec--contacto .msg { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .bubble { margin-left: 0; }
}

/* título de Ejemplos: cambia con cada giro (site.js, setTitle) */
.ej-side h2.ej-title { min-height: 3.12em; will-change: opacity, transform; }

/* tarjetas de paquetes en su propia capa: el pulso que marca cada beneficio no repinta la sección completa */
.pq-card, .pq-cmp { contain: layout paint; }
.pq-card--pro { contain: layout; }

/* aviso de privacidad: versión simplificada en contacto y enlace en el pie */
.privacy-short { margin-top: 8px; }
.privacy-short b { color: #D9D2C7; font-weight: 600; }
.privacy-short a, .foot-link { color: #D9D2C7; text-decoration-color: var(--sc-accent); text-underline-offset: 3px; }
.foot-link { display: inline-flex; align-items: center; min-height: 40px; }
.pendiente { color: #1A120A; background: var(--sc-accent); border-radius: 4px; padding: 0 5px; font-weight: 600; }   /* dato por llenar antes de publicar */

/* redes en el pie */
.foot-social { display: inline-flex; flex-wrap: wrap; gap: 4px 18px; }
.foot-social[hidden] { display: none; }


/* =====================================================================================================
   TIENDAS EN LÍNEA + LAPTOP (27 oct 2026, PROPUESTA-TIENDAS.md). Los ejemplos se ven como sitio web en una laptop
   (versión de escritorio) y en el celular, más chico y a la derecha. Las tres tiendas usan clips verticales en el celular.
   ===================================================================================================== */
/* identidades de las tiendas conceptuales */
.dp--moda, .lp--moda       { --dbg: #ece3d6; --dfade: rgba(236,227,214,.94); --dink: #1f1d1a; --dsoft: #5f584e; --dacc: #1f1d1a; --dacc-ink: #f7f2ea; --dhl: rgba(31,29,26,.07); --dline: rgba(31,29,26,.2); --dr: 0px; --dfocus: #8a6a2e; }
.dp--comida, .lp--comida   { --dbg: #f3e6d8; --dfade: rgba(243,230,216,.95); --dink: #3a1d12; --dsoft: #7a5444; --dacc: #c4552e; --dacc-ink: #fff6ee; --dhl: rgba(196,85,46,.1); --dline: rgba(58,29,18,.2); --dr: 999px; --dfocus: #c4552e; }
.dp--belleza, .lp--belleza { --dbg: #e4ebe3; --dfade: rgba(228,235,227,.95); --dink: #1f2b24; --dsoft: #56665b; --dacc: #3f5f4b; --dacc-ink: #f3f7f2; --dhl: rgba(63,95,75,.09); --dline: rgba(31,43,36,.2); --dr: 999px; --dfocus: #3f5f4b; }
.dp--moda .dp-brand, .lp--moda .lp-brand { font-family: "Bodoni Moda", Georgia, serif; letter-spacing: .3em; font-weight: 400; }
.dp--moda .dp-h, .lp--moda .lp-h { font-family: "Bodoni Moda", Georgia, serif; font-weight: 400; }
.dp--comida .dp-brand, .dp--comida .dp-h, .lp--comida .lp-brand, .lp--comida .lp-h { font-family: "Young Serif", Georgia, serif; font-weight: 400; }
.dp--belleza .dp-brand, .dp--belleza .dp-h, .lp--belleza .lp-brand, .lp--belleza .lp-h { font-family: "Newsreader", Georgia, serif; font-weight: 500; letter-spacing: -0.01em; }
.lp--floreria { --dbg: #f4e8e3; --dink: #3b2a2c; --dsoft: #7a6062; --dacc: #4e6b5c; --dacc-ink: #f7f1ea; --dline: rgba(59,42,44,.18); --dr: 999px; }
.lp--floreria .lp-brand, .lp--floreria .lp-h { font-family: "Fraunces", Georgia, serif; font-style: italic; font-weight: 500; }
.lp--gimnasio { --dbg: #1a1b1c; --dink: #eceae4; --dsoft: #a9a7a1; --dacc: #d4952c; --dacc-ink: #151413; --dline: rgba(236,234,228,.18); --dr: 4px; }
.lp--gimnasio .lp-brand, .lp--gimnasio .lp-h { font-family: "Archivo", sans-serif; font-weight: 900; font-stretch: 125%; text-transform: uppercase; letter-spacing: -0.01em; }
.demo-view:has(.dp--moda:not([hidden])) { --dbg: #ece3d6; }
.cine-phone:has(.dp--moda.is-active) .phone-bar    { --dink: #1f1d1a; --dfade: rgba(236,227,214,.92); }
.cine-phone:has(.dp--comida.is-active) .phone-bar  { --dink: #3a1d12; --dfade: rgba(243,230,216,.92); }
.cine-phone:has(.dp--belleza.is-active) .phone-bar { --dink: #1f2b24; --dfade: rgba(228,235,227,.92); }
html[data-scene-theme="moda"]    { --th-acc: #C9A877; --th-meta: #E3D8C6; --th-line: rgba(201,168,119,.45); --wash-a: #33291d; --wash-b: #15130f; }
html[data-scene-theme="comida"]  { --th-acc: #D9774A; --th-meta: #EBD3C2; --th-line: rgba(217,119,74,.45);  --wash-a: #3a2016; --wash-b: #170e0a; }
html[data-scene-theme="belleza"] { --th-acc: #8FB79A; --th-meta: #D3E0D5; --th-line: rgba(143,183,154,.45); --wash-a: #1d2b22; --wash-b: #0d1310; }
html[data-section="ejemplos"][data-scene-theme="moda"]    { --rb-core: #fbf5ea; --rb-glow: #c9a877; --rb-tint: #a7957a; }
html[data-section="ejemplos"][data-scene-theme="comida"]  { --rb-core: #fff2e8; --rb-glow: #d9774a; --rb-tint: #8fae5e; }
html[data-section="ejemplos"][data-scene-theme="belleza"] { --rb-core: #f3fbf5; --rb-glow: #8fb79a; --rb-tint: #d1a35c; }

/* tiendas en el celular: clip vertical a sangre, texto abajo sobre un degradado del color de la marca */
.cine-phone .demo-view .dp--tienda .dp-media { inset: 0 !important; height: auto !important; }
.cine-phone .demo-view .dp--tienda .dp-media img, .cine-phone .demo-view .dp--tienda .dp-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.cine-phone .demo-view .dp--tienda .dp-media::after { background: linear-gradient(180deg, transparent 0%, transparent 44%, var(--dfade) 70%, var(--dbg) 100%) !important; }
.cine-phone .dp--comida .dp-media img, .cine-phone .dp--comida .dp-media video { object-position: 50% 62% !important; }
.dp-cart { margin-left: auto; font: 600 10px/1 var(--sc-font-text); letter-spacing: .08em; text-transform: uppercase; color: var(--dink); border: 1px solid var(--dline); border-radius: 999px; padding: 5px 9px; }
.dp-buy { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0; color: var(--dsoft); font-size: 12px; }
.dp-price { font: 600 18px/1.1 var(--sc-font-text); color: var(--dink); }
.cine-phone .dp-buy { font-size: max(10.5px, 3.2cqw); }
.cine-phone .dp-price { font-size: max(15px, 5cqw); }
.cine-phone .dp--tienda .dp-h { font-size: max(19px, 7.4cqw); }
.cine-phone .dp--tienda .dp-p { display: none; }

/* -------- laptop (genérica, sin logotipo). El contenido es decorativo: lo accesible vive en el celular. */
.ch-ej { --lw: min(49vw, calc((100svh - 230px) * 1.55), 880px); }
.cine-lap.beat { transform: none; filter: none; }
.cine-lap { left: 56%; top: calc(50% + 6px); width: var(--lw); translate: -50% -50%; pointer-events: none; }
.lap-screen { position: relative; aspect-ratio: 16 / 10; border-radius: calc(var(--lw) * .022) calc(var(--lw) * .022) 0 0; padding: calc(var(--lw) * .016); background: linear-gradient(180deg, #1c1c1e, #0f0f10);
  box-shadow: 0 0 0 1px rgba(240,180,106,.22), inset 0 0 0 1px rgba(255,255,255,.04), 0 40px 90px -40px rgba(0,0,0,.95); }
.lap-base { position: relative; height: calc(var(--lw) * .028); margin: 0 calc(var(--lw) * -.06); border-radius: 0 0 calc(var(--lw) * .03) calc(var(--lw) * .03) / 0 0 100% 100%;
  background: linear-gradient(180deg, #3a3835 0%, #24231f 40%, #121211 100%); box-shadow: 0 1px 0 rgba(240,180,106,.25) inset, 0 30px 40px -24px rgba(0,0,0,.9); }
.lap-base::before { content: ""; position: absolute; left: 50%; top: 0; width: 14%; height: 34%; translate: -50% 0; border-radius: 0 0 8px 8px; background: #0e0e0d; }
.lap-bar { position: absolute; z-index: 3; left: calc(var(--lw) * .016); right: calc(var(--lw) * .016); top: calc(var(--lw) * .016); height: calc(var(--lw) * .03); display: flex; align-items: center; gap: 5px; padding: 0 1.2%;
  background: rgba(20,20,20,.92); border-radius: 4px 4px 0 0; font: 500 max(8px, calc(var(--lw) * .0125))/1 var(--mono); color: #CFC7BA; letter-spacing: .04em; }
.lap-bar i { width: 7px; height: 7px; border-radius: 50%; background: #4a4743; flex: none; }
.lap-url { margin: 0 auto; padding: 3px 10px; border-radius: 4px; background: rgba(255,255,255,.06); }
.lap-bar .cd { flex: none; padding: 3px 6px; border-radius: 3px; background: rgba(240,180,106,.18); color: #F0D3A8; letter-spacing: .1em; text-transform: uppercase; font-size: max(7px, calc(var(--lw) * .011)); }
.lap-view { position: absolute; inset: calc(var(--lw) * .046) calc(var(--lw) * .016) calc(var(--lw) * .016); overflow: hidden; background: #111; container-type: size; }
.lp { position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr auto; background: var(--dbg); color: var(--dink); opacity: 0; transition: opacity .45s ease; }
.lp.is-active { opacity: 1; }
.lp-nav { display: flex; align-items: center; gap: 4cqw; padding: 2.2cqh 4cqw; border-bottom: 1px solid var(--dline); }
.lp-brand { font-size: 2.6cqw; line-height: 1; }
.lp-links { display: flex; gap: 2.6cqw; font: 500 1.3cqw/1 var(--sc-font-text); color: var(--dsoft); }
.lp-cart { margin-left: auto; font: 600 1.15cqw/1 var(--sc-font-text); letter-spacing: .06em; text-transform: uppercase; border: 1px solid var(--dline); border-radius: 999px; padding: .7cqw 1.4cqw; }
.lp-hero { display: grid; grid-template-columns: 38% 1fr; min-height: 0; }
.lp-copy { display: flex; flex-direction: column; justify-content: center; gap: 1.3cqw; padding: 0 3cqw 0 4cqw; }
.lp-k { margin: 0; font: 600 1.05cqw/1.3 var(--sc-font-text); letter-spacing: .12em; text-transform: uppercase; color: var(--dsoft); }
.lp-h { margin: 0; font-size: 3.4cqw; line-height: 1.04; }
.lp-p { margin: 0; font: 400 1.35cqw/1.45 var(--sc-font-text); color: var(--dsoft); }
.lp-price { margin: .6cqw 0 0; font: 600 2.1cqw/1 var(--sc-font-text); }
.lp-btns { display: flex; flex-wrap: wrap; gap: 1cqw; margin: .4cqw 0 0; }
.lp-btn, .lp-btn2 { display: inline-flex; align-items: center; min-height: 3.4cqw; padding: 0 1.8cqw; border-radius: var(--dr, 999px); font: 600 1.25cqw/1 var(--sc-font-text); }
.lp-btn { background: var(--dacc); color: var(--dacc-ink); }
.lp-btn2 { border: 1px solid var(--dline); color: var(--dink); }
.lp-pay { margin: 0; font-size: 1.05cqw; color: var(--dsoft); }
.lp-media { position: relative; overflow: hidden; }
.lp-media img, .lp-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lp-media video { opacity: 0; transition: opacity .25s ease; }
.lp-media.playing video { opacity: 1; }
.lp-grid { list-style: none; margin: 0; padding: 1.8cqh 4cqw 2.2cqh; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; border-top: 1px solid var(--dline); }
.lp-grid li { display: grid; grid-template-columns: 7.5cqw 1fr; grid-template-rows: auto auto; column-gap: 1.2cqw; align-items: center; }
.lp-grid img { grid-row: 1 / 3; width: 7.5cqw; height: 5.4cqw; object-fit: cover; border-radius: 4px; }
.lp-grid b { font: 600 1.25cqw/1.2 var(--sc-font-text); }
.lp-grid span { font: 400 1.15cqw/1.3 var(--sc-font-text); color: var(--dsoft); }
.lp-grid .lp-info { grid-template-columns: 1fr; border-left: 2px solid var(--dacc); padding-left: 1.2cqw; }

/* celular: más chico, a la derecha, delante de la laptop */
.ch-ej .cine-phone { --ph: calc(var(--lw) * .6); left: calc(56% + var(--lw) * .53); top: calc(50% + var(--lw) * .1); }
@media (min-width: 861px), (orientation: landscape) { .ch-ej .ej-side { width: min(340px, 27vw); } }

/* móvil vertical: laptop arriba a todo lo ancho y el celular delante, abajo a la derecha */
@media (max-width: 860px) and (orientation: portrait) {
  .ch-ej { --lw: calc(100vw - var(--gut) - var(--gut-r)); --mh: min(calc(100svh - 104px - 268px), 520px); }
  .cine-lap { left: var(--gut); top: 92px; translate: none; width: calc(var(--lw) * .9); }
  .ch-ej .cine-phone { --ph: min(calc(var(--mh) * .78), 300px); left: auto; right: var(--gut-r); top: calc(92px + var(--mh) - var(--ph)); translate: 0 0; }
}
/* movimiento reducido: laptop y celular uno junto al otro, sin escena fija */
.rm .cine-lap { position: relative; left: auto; top: auto; translate: none; width: min(100%, 760px); }
.rm .ch-ej .cine-phone { left: auto; top: auto; translate: none; }
.rm .lp:not(.is-active) { display: none; }
.rm .ch-ej { grid-template-columns: minmax(0, 340px) minmax(0, 1fr) auto; }
@media (max-width: 860px) { .rm .ch-ej { grid-template-columns: minmax(0, 1fr); } .rm .ch-ej .cine-phone { --ph: min(70svh, 560px); margin: 0 auto; } }
/* celular chico (móvil vertical): en las tiendas se quitan la categoría y la nota de pago para que el botón siempre quepa */
@container (max-height: 460px) {
  .dp--tienda .dp-k, .dp--tienda .dp-buy span, .dp--tienda .dp-cart { display: none; }
  .dp--tienda .dp-h { font-size: max(17px, 6.6cqw) !important; }
}