/* Diseño web — demos: dispositivos 3D (GLB) con webs ficticias pegadas a su pantalla.
   Cada demo es una web distinta con identidad propia y se recompone de verdad por modo (data-mode del .stage):
   mobile 390 px (con scroll interno), tablet 820 px y PC 1280 px (sin scroll interno). El alto sale de la proporción real
   de la malla de pantalla del GLB (móvil 9:20, tablet 0,732, portátil 16:10). El JS escala/proyecta ese «lienzo de diseño». */

@keyframes dishIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pulse { 0% { transform: scale(0.6); opacity: 1; } 100% { transform: scale(2.4); opacity: 0; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes spin { to { rotate: 360deg; } }
@keyframes rot { to { transform: rotate(360deg); } }
@keyframes blink { 50% { opacity: 0.35; } }
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes riseIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes menuIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ═════ Sección de demo (texto compacto + dispositivo protagonista) ═════ */
.demo__in { gap: 24px; }
.demo__text { display: grid; gap: 18px; align-content: start; min-width: 0; }
.demo__tag { display: inline-flex; align-items: center; gap: 8px; width: fit-content; max-width: 100%; padding: 7px 12px; border: 1px solid var(--line-d); color: var(--c-paper); }
.demo__tag::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--c-kw-dark); animation: blink 2.4s ease-in-out infinite; }
.demo__p { margin: 0; max-width: 48ch; font-size: 1.0625rem; line-height: 1.5; color: rgb(245 242 233 / 90%); }
.demo__actions { display: grid; gap: 16px; justify-items: start; }
.devsel { display: none; border: 1px solid var(--c-paper); }
.devsel button { min-height: 44px; padding: 0 18px; border: 0; background: transparent; color: var(--c-paper); font: 700 12px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: background-color 200ms, color 200ms; }
.devsel button + button { border-left: 1px solid var(--line-d); }
.devsel button[aria-pressed='true'] { background: var(--c-paper); color: var(--c-ink); }
.devsel button:disabled { opacity: 0.4; cursor: default; }

/* ═════ Escenario ═════ */
.stage { position: relative; min-width: 0; overflow-x: clip; height: clamp(540px, 76svh, 820px); }
.stage__gl { position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: calc(100% - 26px); display: block; opacity: 0; transition: opacity 250ms; touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; }
.stage__gl.is-on { opacity: 1; }
.stage__gl:active { cursor: grabbing; }
.bezel { position: absolute; z-index: 2; left: 0; top: 0; pointer-events: none; transform-origin: 0 0; }
.device { position: absolute; left: 0; top: 0; width: calc(var(--sw, 1280) * 1px); height: calc(var(--sh, 798) * 1px); transform-origin: 0 0; overflow: hidden; pointer-events: auto; opacity: 0; transition: opacity 240ms; backface-visibility: hidden; background: var(--bg, #fff); color: var(--ink, #111); }
.stage.is-ready .device { opacity: 1; }
.stage.is-swap .device { opacity: 0; }
.stage__hint { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; margin: 0; text-align: center; color: rgb(245 242 233 / 78%); font-size: 11px; pointer-events: none; }

/* Sin JS: la demo se ve entera, en flujo normal */
.stage:not(.is-js) { height: auto; }
.stage:not(.is-js) .bezel { position: relative; }
.stage:not(.is-js) .device { position: relative; width: 100%; height: 640px; opacity: 1; overflow: auto; }

/* ═════ Marcos de dispositivo (CSS): móvil vertical, tablet y portátil con base ═════
   Genéricos (sin marca ni muesca de fabricante): bisel #24242e, canto con brillo sutil, sombra suave con un toque del azul de la web
   y un reflejo muy ligero sobre la pantalla. La demo (HTML real) va dentro, a su tamaño de diseño; JS solo la encaja y la inclina. */
.stage.is-js .bezel {
  --pad: 14px; --pad-b: 14px; --r: 44px; --r-in: 30px;
  padding: var(--pad) var(--pad) var(--pad-b); border-radius: var(--r); background: #24242e;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 18%), inset 0 0 0 3px #1a1a22, 0 0 0 1px rgb(255 255 255 / 10%),
    0 46px 70px -38px rgb(0 0 0 / 75%), 0 18px 34px -20px rgb(0 0 0 / 55%), 0 40px 90px -50px rgb(46 106 177 / 55%);
}
.stage.is-js .device { position: relative; left: auto; top: auto; border-radius: var(--r-in); box-shadow: 0 0 0 1px rgb(0 0 0 / 70%); }
.stage.is-js .bezel::before { content: ''; position: absolute; z-index: 3; inset: var(--pad) var(--pad) var(--pad-b); border-radius: var(--r-in); pointer-events: none;
  background: linear-gradient(118deg, rgb(255 255 255 / 8%) 0%, rgb(255 255 255 / 0%) 34%, rgb(255 255 255 / 0%) 64%, rgb(255 255 255 / 3.5%) 100%); }
.stage.is-js[data-mode='mobile'] .bezel { --pad: 15px; --pad-b: 15px; --r: 48px; --r-in: 34px;
  background: linear-gradient(#101015, #101015) 50% 6px / 46px 4px no-repeat, #24242e; }
.stage.is-js[data-mode='mobile'] .bezel::after { content: ''; position: absolute; right: -3px; top: 168px; width: 3px; height: 74px; border-radius: 0 2px 2px 0; background: #30303c; box-shadow: 0 -110px 0 #30303c; }
.stage.is-js[data-mode='tablet'] .bezel { --pad: 24px; --pad-b: 24px; --r: 36px; --r-in: 14px;
  background: radial-gradient(circle at 50% 12px, #101015 0 2.5px, transparent 3.5px), #24242e; }
.stage.is-js[data-mode='pc'] .bezel { --pad: 18px; --pad-b: 20px; --r: 20px 20px 6px 6px; --r-in: 6px;
  background: radial-gradient(circle at 50% 9px, #101015 0 2.5px, transparent 3.5px), #24242e; }
.stage.is-js[data-mode='pc'] .bezel::before { border-radius: 6px; }
/* Base del portátil: asoma 34 px por cada lado y 26 px por debajo del cuerpo (FRAME_OUT en demos.js) */
.stage.is-js[data-mode='pc'] .bezel::after { content: ''; position: absolute; z-index: 0; left: -34px; right: -34px; top: 100%; height: 26px; margin-top: -1px;
  border-radius: 0 0 30px 30px / 0 0 18px 18px;
  background: linear-gradient(#41414f 0, #2e2e3a 22%, #24242e 62%, #17171d 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 20%), inset 0 -1px 0 rgb(0 0 0 / 60%), 0 30px 36px -22px rgb(0 0 0 / 70%); }
/* Móvil real (< 700 px): la demo móvil ocupa el ancho disponible, sin marco y sin escalar */
.stage[data-fluid] { height: auto; }
.stage[data-fluid][data-mode] .bezel { position: relative; padding: 0; background: none; box-shadow: none; border-radius: 0; transform: none !important; }
.stage[data-fluid][data-mode] .bezel::before, .stage[data-fluid][data-mode] .bezel::after { display: none; }
.stage[data-fluid] .device { position: relative; width: 100%; height: min(82svh, 780px); opacity: 1; border-radius: 20px; box-shadow: 0 0 0 1px var(--line-d); }
.stage[data-fluid] .stage__hint { position: static; padding-top: 10px; }

/* ═════ Webs ficticias · base común ═════
   Lienzos lógicos pequeños y tipografía grande para que, ya escalados a la pantalla del modelo, los textos sigan legibles:
   PC 900×561 · tablet 640×874 · móvil 330×733. Escala típica en escritorio 0,65–0,8 → cuerpo 20–21 px ≈ 14–15 px en pantalla. */
.stage[data-mode='pc'] { --t0: 20px; --t1: 17px; --btn: 56px; --tap: 54px; --gx: 34px; --hh: 70px; --h1: 40px; --h2: 24px; }
.stage[data-mode='tablet'] { --t0: 21px; --t1: 18px; --btn: 60px; --tap: 60px; --gx: 28px; --hh: 76px; --h1: 38px; --h2: 25px; }
.stage[data-mode='mobile'] { --t0: 18px; --t1: 16px; --btn: 52px; --tap: 52px; --gx: 16px; --hh: 68px; --h1: 30px; --h2: 22px; }
.site { --ac: #333; --ac-ink: #fff; --ring-c: var(--ac); font: 400 var(--t0, 17px)/1.4 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif; display: flex; flex-direction: column; overflow: hidden; position: relative; }
.site *, .site *::before, .site *::after { box-sizing: border-box; }
:where(.site) :where(p, dl, dd, ul, ol, fieldset) { margin: 0; padding: 0; }
.site ul, .site ol { list-style: none; }
.site [hidden] { display: none !important; }
:where(.site) :where(button, input, textarea) { font: inherit; color: inherit; }
.site button { cursor: pointer; }
.site :focus-visible { outline: 3px solid var(--ring-c); outline-offset: 2px; }
.site b { font-weight: 700; }
:where(.site) fieldset { border: 0; min-width: 0; }
.stage[data-mode='mobile'] .site { overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scroll-behavior: smooth; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }

.s-head { position: relative; z-index: 12; display: flex; align-items: center; gap: 18px; flex: none; min-height: var(--hh); padding: 10px var(--gx); }
.s-brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; min-width: 0; }
.s-brand svg { width: 44px; height: 44px; flex: none; }
.s-brand b { display: block; font-size: 22px; line-height: 1.05; letter-spacing: -0.01em; font-weight: 800; }
.s-brand small { display: block; margin-top: 2px; font-size: var(--t1); line-height: 1.1; opacity: 0.8; font-weight: 600; }
.s-nav { display: none; }
.s-nav button { white-space: nowrap; border: 0; background: none; padding: 8px 6px; min-height: var(--tap); font-size: var(--t1); font-weight: 700; opacity: 0.88; transition: opacity 150ms, color 150ms; }
@media (hover: hover) { .s-nav button:hover { opacity: 1; color: var(--ac); } }
.site .s-cta { display: none; }
.burger { display: none; position: relative; width: var(--tap); height: var(--tap); margin-left: auto; border: 1.5px solid currentColor; border-radius: 12px; background: transparent; flex: none; }
.burger i { position: absolute; left: 15px; right: 15px; height: 2px; border-radius: 2px; background: currentColor; transition: transform 240ms var(--ease), opacity 160ms; }
.burger i:nth-child(1) { top: calc(50% - 8px); } .burger i:nth-child(2) { top: calc(50% - 1px); } .burger i:nth-child(3) { top: calc(50% + 6px); }
.site.is-menu .burger i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site.is-menu .burger i:nth-child(2) { opacity: 0; }
.site.is-menu .burger i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.s-foot { flex: none; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 20px; padding: 8px var(--gx); font-size: var(--t1); line-height: 1.25; }
.s-eyebrow { font-size: var(--t1); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.s-h1 { font-size: var(--h1); line-height: 1.04; font-weight: 800; letter-spacing: -0.02em; text-wrap: balance; }
.s-h2 { font-size: var(--h2); line-height: 1.15; font-weight: 800; letter-spacing: -0.01em; }
.s-lead { font-size: var(--t0); line-height: 1.4; max-width: 34ch; }
.s-cta-row { display: flex; flex-wrap: wrap; gap: 10px; }
.s-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--btn); padding: 0 26px; border: 2px solid var(--ac); border-radius: 14px; background: var(--ac); color: var(--ac-ink); font-weight: 800; font-size: var(--t0); letter-spacing: 0.01em; line-height: 1; box-shadow: 0 12px 18px -12px color-mix(in srgb, var(--ac) 80%, #000); transition: transform 180ms var(--ease), box-shadow 180ms, background-color 180ms, color 180ms; }
@media (hover: hover) { .s-btn:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 16px 20px -12px color-mix(in srgb, var(--ac) 85%, #000); filter: brightness(1.06); } }
.s-btn:not(:disabled):active { transform: scale(0.97); }
.s-btn:disabled { background: transparent; border: 2px dashed rgb(0 0 0 / 35%); color: rgb(0 0 0 / 60%); box-shadow: none; cursor: default; }
.s-btn--ghost { background: transparent; color: var(--ac); box-shadow: none; }
@media (hover: hover) { .s-btn--ghost:not(:disabled):hover { background: color-mix(in srgb, var(--ac) 10%, transparent); box-shadow: none; filter: none; } }
.s-btn--sm { min-height: var(--tap); padding: 0 18px; font-size: var(--t1); border-radius: 12px; }
.cta__t { transition: opacity 150ms; }
.cta__spin { position: absolute; inset: 0; margin: auto; width: 24px; height: 24px; border: 3px solid rgb(255 255 255 / 35%); border-top-color: #fff; border-radius: 50%; opacity: 0; animation: rot 800ms linear infinite paused; }
.is-loading { pointer-events: none; }
.is-loading .cta__t { opacity: 0; }
.is-loading .cta__spin { opacity: 1; animation-play-state: running; }
.site input[type='text'], .site input[type='tel'], .site textarea { width: 100%; min-height: var(--btn); padding: 10px 14px; border: 2px solid rgb(0 0 0 / 22%); border-radius: 12px; background: #fff; color: #111; transition: border-color 160ms, box-shadow 160ms; }
.site textarea { resize: none; line-height: 1.3; }
.site input[type='text']:focus, .site input[type='tel']:focus, .site textarea:focus { border-color: var(--ac); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ac) 22%, transparent); outline: none; }
.site label { display: grid; gap: 6px; font-weight: 700; font-size: var(--t1); }
.site input[type='checkbox'] { width: 26px; height: 26px; accent-color: var(--ac); flex: none; margin: 0; }
.s-check { display: flex !important; align-items: center; gap: 12px; font-weight: 500 !important; font-size: var(--t1) !important; line-height: 1.25; }
.s-err { font-size: var(--t1); color: #b3261e; font-weight: 700; }
.is-invalid { border-color: #b3261e !important; }
.s-form { display: grid; gap: 12px; }
.s-send { width: 100%; }
.s-sheet { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; padding: 18px; background: rgb(18 14 10 / 62%); animation: fadeIn 220ms var(--ease) both; }
.s-sheet__box { position: relative; width: min(100%, 520px); max-height: 100%; overflow: auto; padding: 22px; border-radius: 18px; background: var(--paper, #fff); color: var(--ink, #111); box-shadow: 0 30px 50px -20px rgb(0 0 0 / 60%); animation: riseIn 320ms var(--ease) both; display: grid; gap: 14px; }
.s-x { position: absolute; top: 8px; right: 8px; width: var(--tap); height: var(--tap); border: 0; border-radius: 12px; background: transparent; font-size: 30px; line-height: 1; }
@media (hover: hover) { .s-x:hover { background: rgb(0 0 0 / 7%); } }
.s-sent { display: grid; justify-items: center; gap: 12px; text-align: center; color: var(--ac); }
.s-sent p { color: var(--ink, #111); }
.s-sent .c, .c-done .c { stroke-dasharray: 145; stroke-dashoffset: 145; animation: draw 600ms var(--ease) 100ms forwards; }
.s-sent .t, .c-done .t { stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw 400ms var(--ease) 550ms forwards; }

/* Menú hamburguesa (solo modo móvil) */
.stage[data-mode='mobile'] .s-head { position: sticky; top: 0; }
.stage[data-mode='mobile'] .burger { display: block; }
.stage[data-mode='mobile'] .s-nav { position: absolute; top: 100%; left: 0; right: 0; display: none; flex-direction: column; gap: 0; padding: 6px var(--gx) 12px; background: inherit; border-bottom: 1px solid rgb(0 0 0 / 14%); box-shadow: 0 18px 24px -16px rgb(0 0 0 / 35%); }
.stage[data-mode='mobile'] .site.is-menu .s-nav { display: flex; animation: menuIn 220ms var(--ease) both; }
.stage[data-mode='mobile'] .s-nav button { text-align: left; min-height: var(--tap); font-size: 17px; border-bottom: 1px solid rgb(128 128 128 / 22%); }
.stage[data-mode='tablet'] .s-nav, .stage[data-mode='pc'] .s-nav { display: flex; gap: 6px; margin-left: auto; }
.stage[data-mode='pc'] .s-cta { display: inline-flex; }

/* ═════ Demo 1 · Casa Olivar (web de presentación, restaurante) ═════ */
.r { --ink: #2b1d14; --bg: #f6efe2; --paper: #fbf7ee; --ac: #a8461f; --olive: #4d5c31; --line: rgb(43 29 20 / 16%); background: var(--bg); color: var(--ink); }
.r .s-head { background: var(--paper); border-bottom: 1px solid var(--line); }
.r .s-brand b { font-family: Georgia, 'Iowan Old Style', 'Palatino Linotype', serif; }
.r .s-brand small { color: var(--olive); }
.r .s-eyebrow { color: var(--olive); }
.r .s-h1, .r .s-h2 { font-family: Georgia, 'Iowan Old Style', 'Palatino Linotype', serif; letter-spacing: -0.02em; }
.r .s-h1 { font-weight: 700; }
.r .s-lead { color: rgb(43 29 20 / 86%); }
.r-main { flex: 1; min-height: 0; display: grid; gap: 18px; padding: 20px var(--gx) 18px; align-content: start; }
.r-left { display: grid; gap: 12px; align-content: center; min-width: 0; }
.r-intro { display: grid; gap: 12px; justify-items: start; }
.r-info { display: grid; gap: 4px; padding-top: 10px; border-top: 1px solid var(--line); }
.r-info > div { display: flex; gap: 12px; font-size: var(--t1); line-height: 1.3; }
.r-info dt { flex: none; width: 5.2em; font-weight: 800; color: var(--olive); }
.r-info dd { color: rgb(43 29 20 / 90%); }
.r-right { display: grid; gap: 12px; align-content: start; min-width: 0; }
.r-art { width: 100%; height: 150px; border-radius: 18px; box-shadow: 0 22px 30px -22px rgb(43 29 20 / 65%); }
.r-carta { padding: 12px 14px 8px; border-radius: 18px; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 18px 26px -22px rgb(43 29 20 / 60%); }
.r-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgb(43 29 20 / 9%); }
.r-tabs button { flex: 1; min-height: var(--tap); padding: 0 8px; border: 0; border-radius: 999px; background: transparent; font-weight: 800; font-size: var(--t1); color: rgb(43 29 20 / 78%); transition: background-color 200ms, color 200ms, box-shadow 200ms; }
@media (hover: hover) { .r-tabs button:hover { color: var(--ink); } }
.r-tabs button[aria-selected='true'] { background: #fff; color: var(--ac); box-shadow: 0 4px 10px -6px rgb(43 29 20 / 60%); }
.r-panels li { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 9px 6px; border-bottom: 1px dashed rgb(43 29 20 / 28%); border-radius: 8px; animation: dishIn 420ms var(--ease) both; transition: background-color 180ms, padding 180ms; }
.r-panels li:last-child { border-bottom: 0; }
.r-panels li:nth-child(2) { animation-delay: 70ms; } .r-panels li:nth-child(3) { animation-delay: 140ms; }
@media (hover: hover) { .r-panels li:hover { background: rgb(168 70 31 / 7%); } }
.r-panels b { display: block; font: 700 var(--t0)/1.15 Georgia, serif; }
.r-panels small { display: block; margin-top: 1px; font-size: var(--t1); line-height: 1.2; color: rgb(43 29 20 / 76%); }
.r-panels i { font: 700 var(--t0) Georgia, serif; font-style: normal; color: var(--ac); white-space: nowrap; font-variant-numeric: tabular-nums; }
.r .s-foot { background: var(--ink); color: rgb(246 239 226 / 90%); }
.stage[data-mode='pc'] .r-main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 28px; padding-block: 12px 10px; align-content: stretch; }
.stage[data-mode='pc'] .r-art { height: 108px; }
.stage[data-mode='pc'] .r-panels li { padding-block: 7px; }
.stage[data-mode='tablet'] .r-main { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); grid-template-areas: 'intro art' 'carta carta' 'info info'; gap: 14px 22px; align-content: start; padding-top: 18px; }
.stage[data-mode='tablet'] .r-left, .stage[data-mode='tablet'] .r-right { display: contents; }
.stage[data-mode='tablet'] .r-intro { grid-area: intro; align-self: center; }
.stage[data-mode='tablet'] .r-art { grid-area: art; height: 100%; min-height: 200px; }
.stage[data-mode='tablet'] .r-carta { grid-area: carta; }
.stage[data-mode='tablet'] .r-info { grid-area: info; grid-template-columns: 1fr 1fr; gap: 4px 22px; }
.stage[data-mode='tablet'] .r-info > div:first-child { grid-column: 1 / -1; }
.stage[data-mode='tablet'] .r-panels li { padding-block: 7px; }
.stage[data-mode='mobile'] .r-left, .stage[data-mode='mobile'] .r-right { display: contents; }
.stage[data-mode='mobile'] .r-intro { order: 1; } .stage[data-mode='mobile'] .r-art { order: 2; } .stage[data-mode='mobile'] .r-carta { order: 3; } .stage[data-mode='mobile'] .r-info { order: 4; }
.stage[data-mode='mobile'] .r-art { height: 180px; }

/* ═════ Demo 2 · Fisio Mirador (reserva de citas, clínica) ═════ */
.c { --ink: #12312e; --bg: #f1f7f6; --ac: #1f6f68; --deep: #14504b; --coral: #d8643f; --line: rgb(18 49 46 / 16%); --paper: #fff; background: var(--bg); color: var(--ink); font-family: 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif; }
.c .s-head { background: #fff; border-bottom: 1px solid var(--line); }
.c .s-brand b, .c .s-eyebrow, .c .s-h1, .c .s-h2 { color: var(--deep); }
.c .s-eyebrow { color: var(--ac); }
.c .s-lead { color: rgb(18 49 46 / 88%); }
.c-main { flex: 1; min-height: 0; display: grid; gap: 18px; padding: 20px var(--gx) 18px; align-content: start; }
.c-hero { display: grid; gap: 12px; align-content: center; justify-items: start; min-width: 0; }
.c-points { display: grid; gap: 6px; font-size: var(--t0); font-weight: 700; }
.c-points li { display: flex; align-items: center; gap: 10px; }
.c-points li::before { content: ''; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--ac) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 6.8' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.c-art { width: 100%; max-width: 240px; height: auto; margin-top: 4px; }
.c-wave { stroke-dasharray: 6 9; animation: waveMove 5s linear infinite; }
@keyframes waveMove { to { stroke-dashoffset: -150; } }
.c-book { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: 0 28px 40px -30px rgb(18 49 46 / 70%); min-width: 0; }
.c-steps { display: flex; gap: 8px; }
.c-steps li { flex: 1; display: flex; align-items: center; gap: 8px; padding-top: 10px; position: relative; font-size: var(--t1); font-weight: 800; color: rgb(18 49 46 / 62%); transition: color 250ms; }
.c-steps li::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 5px; border-radius: 5px; background: rgb(18 49 46 / 14%); transition: background-color 300ms; }
.c-steps li span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 2px solid currentColor; font-size: var(--t1); flex: none; }
.c-steps li.is-done, .c-steps li.is-now { color: var(--deep); }
.c-steps li.is-done::before { background: var(--ac); }
.c-steps li.is-now::before { background: var(--coral); }
.c-steps li.is-done span { background: var(--ac); border-color: var(--ac); color: #fff; }
.c-pane { display: grid; gap: 12px; align-content: start; flex: 1; animation: riseIn 320ms var(--ease) both; }
.c-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.c-opts label { position: relative; display: block; font-weight: 400; }
.c-opts input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.c-opts span { display: grid; grid-template-columns: 30px 1fr; column-gap: 10px; align-items: center; min-height: 76px; padding: 8px 12px; border: 2px solid rgb(18 49 46 / 20%); border-radius: 14px; background: #fff; transition: border-color 180ms, background-color 180ms, transform 180ms var(--ease), box-shadow 180ms; }
.c-opts svg { grid-row: 1 / 3; width: 30px; height: 30px; color: var(--ac); }
.c-opts b { font-size: var(--t1); line-height: 1.15; }
.c-opts small { font-size: var(--t1); color: rgb(18 49 46 / 76%); line-height: 1.1; }
@media (hover: hover) { .c-opts label:hover span { border-color: var(--ac); transform: translateY(-1px); } }
.c-opts input:checked + span { border-color: var(--ac); background: color-mix(in srgb, var(--ac) 10%, #fff); box-shadow: 0 0 0 2px var(--ac) inset; }
.c-opts input:focus-visible + span { outline: 3px solid var(--ring-c); outline-offset: 2px; }
.c-days { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.c-days button { display: grid; place-items: center; min-height: calc(var(--tap) + 8px); padding: 6px 2px; border: 2px solid rgb(18 49 46 / 20%); border-radius: 14px; background: #fff; transition: border-color 180ms, background-color 180ms, color 180ms, transform 180ms var(--ease); }
.c-days small { font-size: var(--t1); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: rgb(18 49 46 / 76%); line-height: 1; }
.c-days b { font-size: 24px; line-height: 1.1; }
@media (hover: hover) { .c-days button:hover { border-color: var(--ac); transform: translateY(-1px); } }
.c-days button[aria-pressed='true'] { background: var(--ac); border-color: var(--ac); color: #fff; }
.c-days button[aria-pressed='true'] small { color: rgb(255 255 255 / 90%); }
.c-empty { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 2px dashed rgb(18 49 46 / 30%); border-radius: 14px; font-size: var(--t1); color: rgb(18 49 46 / 85%); }
.c-empty svg { flex: none; width: 28px; height: 28px; color: var(--ac); }
.c-slots, .c-skel { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.c-slots button { min-height: var(--tap); padding: 0; border: 2px solid rgb(18 49 46 / 20%); border-radius: 12px; background: #fff; font-weight: 800; font-size: var(--t0); font-variant-numeric: tabular-nums; animation: dishIn 300ms var(--ease) both; transition: border-color 160ms, background-color 160ms, color 160ms; }
@media (hover: hover) { .c-slots button:hover:not(:disabled) { border-color: var(--ac); } }
.c-slots button[aria-pressed='true'] { background: var(--ac); color: #fff; border-color: var(--ac); }
.c-slots button:disabled { cursor: default; color: rgb(18 49 46 / 45%); text-decoration: line-through; background: rgb(18 49 46 / 6%); }
.c-skel i { height: var(--tap); border-radius: 12px; background: linear-gradient(90deg, rgb(18 49 46 / 7%) 25%, rgb(18 49 46 / 16%) 50%, rgb(18 49 46 / 7%) 75%) 0 0 / 200% 100%; animation: shimmer 1s linear infinite; }
.c-who { gap: 10px; }
.c-sum { padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--ac) 10%, #fff); font-size: var(--t1); font-weight: 700; line-height: 1.3; color: var(--deep); }
.c-nav { display: flex; justify-content: flex-end; gap: 10px; margin-top: auto; }
.c-nav .s-btn { flex: 1; max-width: 240px; }
.c-nav .s-btn--ghost { flex: 0 0 auto; }
.c-done { position: absolute; inset: 0; z-index: 6; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 18px; text-align: center; background: #fff; border-radius: inherit; color: var(--ac); animation: fadeIn 350ms var(--ease) both; }
.c-done__h { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; color: var(--deep); animation: riseIn 500ms var(--ease) 450ms both; }
.c-sumdl { display: grid; width: min(100%, 420px); text-align: left; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; color: var(--ink); animation: riseIn 500ms var(--ease) 600ms both; }
.c-sumdl > div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 14px; border-bottom: 1px solid var(--line); font-size: var(--t1); }
.c-sumdl > div:last-child { border-bottom: 0; }
.c-sumdl dt { font-weight: 800; color: rgb(18 49 46 / 75%); }
.c-sumdl dd { font-weight: 700; text-align: right; }
.c-done .s-btn { animation: riseIn 500ms var(--ease) 780ms both; }
.c .s-foot { background: var(--deep); color: rgb(241 247 246 / 92%); }
.stage[data-mode='pc'] .c-main { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr); gap: 0 26px; padding-block: 12px 10px; align-content: stretch; }
.stage[data-mode='pc'] .c-art { display: none; }
.stage[data-mode='pc'] .c-book { padding: 14px 16px; gap: 8px; }
.stage[data-mode='pc'] .c-who { grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.stage[data-mode='pc'] .c-who > .s-h2, .stage[data-mode='pc'] .c-who > .s-check, .stage[data-mode='pc'] .c-who > .c-sum { grid-column: 1 / -1; }
.stage[data-mode='pc'] .c-opts span { min-height: 68px; }
.stage[data-mode='pc'] .c-days button { min-height: 58px; }
.stage[data-mode='tablet'] .c-main { grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: start; padding-top: 16px; }
.stage[data-mode='tablet'] .c-hero { grid-template-columns: 1.2fr 0.8fr; column-gap: 20px; align-items: center; }
.stage[data-mode='tablet'] .c-hero > * { grid-column: 1; }
.stage[data-mode='tablet'] .c-points { display: none; }
.stage[data-mode='tablet'] .c-art { grid-column: 2; grid-row: 1 / 5; margin: 0; max-width: 220px; justify-self: end; }
.stage[data-mode='tablet'] .c-book { flex: none; min-height: 430px; }
.stage[data-mode='mobile'] .c-art { max-width: 200px; margin-inline: auto; }
.stage[data-mode='mobile'] .c-book { min-height: 440px; }
.stage[data-mode='mobile'] .c-opts { grid-template-columns: 1fr; }
.stage[data-mode='mobile'] .c-days { grid-template-columns: repeat(3, 1fr); }
.stage[data-mode='mobile'] .c-slots, .stage[data-mode='mobile'] .c-skel { grid-template-columns: repeat(3, 1fr); }
.stage[data-mode='mobile'] .c-steps li { font-size: 0; gap: 0; }
.stage[data-mode='mobile'] .c-steps li span { font-size: 16px; width: 32px; height: 32px; }
.stage[data-mode='mobile'] .c-steps li.is-now { font-size: 16px; gap: 8px; flex: 2; }

/* ═════ Demo 3 · Reformas Alcor (constructora: presupuestador y obra) ═════
   Paleta: carbón #24211f · hueso #f1e9dc · cobre #b3571f · ocre #e0a53b · musgo #5d7a58 · pizarra #44627d. */
.o { --char: #24211f; --bone: #f1e9dc; --ac: #b3571f; --ochre: #e0a53b; --moss: #5d7a58; --slate: #44627d; --ink: #24211f; --bg: #f1e9dc; --line: rgb(36 33 31 / 18%); background: var(--bone); color: var(--char); font-family: 'Segoe UI', system-ui, sans-serif; }
.o .s-head { background: var(--char); color: var(--bone); }
.o .s-brand b { font-family: 'Bahnschrift', 'Arial Narrow', Arial, sans-serif; text-transform: uppercase; letter-spacing: 0.03em; font-stretch: condensed; }
.o .s-brand small { color: var(--ochre); }
.o .s-nav button { color: var(--bone); }
@media (hover: hover) { .o .s-nav button:hover { color: var(--ochre); } }
.o .s-btn { --ac-ink: #fff; }
.o .s-head .s-btn { border-color: var(--ochre); background: var(--ochre); color: var(--char); }
.o-main { flex: 1; min-height: 0; display: grid; align-content: start; }
.o-hero { position: relative; display: grid; gap: 10px; align-content: start; justify-items: start; padding: 22px var(--gx) 0; background: var(--char); color: var(--bone); overflow: hidden; }
.o-hero .s-eyebrow { color: var(--ochre); }
.o-hero .s-h1 { font-family: 'Bahnschrift', 'Arial Narrow', Arial, sans-serif; text-transform: uppercase; font-weight: 800; letter-spacing: -0.01em; max-width: 14ch; }
.o-hero .s-lead { color: rgb(241 233 220 / 88%); max-width: 30ch; }
.o-art { width: 100%; height: auto; margin-top: 8px; align-self: end; }
.o-tool { padding: 18px var(--gx) 18px; display: grid; gap: 14px; align-content: start; background: var(--bone); }
.o-tabs { display: flex; gap: 6px; padding: 5px; border-radius: 16px; background: rgb(36 33 31 / 9%); }
.o-tabs button { flex: 1; min-height: var(--tap); border: 0; border-radius: 12px; background: transparent; font-weight: 800; font-size: var(--t0); color: rgb(36 33 31 / 72%); transition: background-color 200ms, color 200ms, box-shadow 200ms; }
@media (hover: hover) { .o-tabs button:hover { color: var(--char); } }
.o-tabs button[aria-selected='true'] { background: var(--char); color: var(--bone); box-shadow: 0 8px 14px -8px rgb(36 33 31 / 70%); }
.o-quote { display: grid; gap: 14px; animation: riseIn 320ms var(--ease) both; }
.o-chips legend { padding: 0; margin-bottom: 6px; font-size: var(--t1); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(36 33 31 / 78%); }
.o-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.o-chips legend { width: 100%; }
.o-chips label { position: relative; display: block; font-weight: 400; }
.o-chips input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.o-chips span { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 20px; border: 2px solid rgb(36 33 31 / 26%); border-radius: 14px; background: #fff; font-weight: 800; font-size: var(--t0); transition: background-color 180ms, color 180ms, border-color 180ms, transform 180ms var(--ease); }
@media (hover: hover) { .o-chips label:hover span { border-color: var(--ac); transform: translateY(-1px); } }
.o-chips input:checked + span { background: var(--char); border-color: var(--char); color: var(--bone); }
.o-chips input:focus-visible + span { outline: 3px solid var(--ac); outline-offset: 2px; }
.o-range { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; font-weight: 800; font-size: var(--t0); }
.o-range span { font-size: var(--t1); letter-spacing: 0.08em; text-transform: uppercase; color: rgb(36 33 31 / 78%); }
.o-range output { font: 800 26px/1 'Bahnschrift', 'Arial Narrow', Arial, sans-serif; font-variant-numeric: tabular-nums; color: var(--ac); }
.o-range input { grid-column: 1 / -1; width: 100%; height: 44px; margin: 0; appearance: none; background: transparent; cursor: pointer; --fill: 10%; }
.o-range input::-webkit-slider-runnable-track { height: 10px; border-radius: 10px; background: linear-gradient(90deg, var(--ac) var(--fill), rgb(36 33 31 / 18%) var(--fill)); }
.o-range input::-moz-range-track { height: 10px; border-radius: 10px; background: linear-gradient(90deg, var(--ac) var(--fill), rgb(36 33 31 / 18%) var(--fill)); }
.o-range input::-webkit-slider-thumb { appearance: none; width: 34px; height: 34px; margin-top: -12px; border-radius: 50%; border: 4px solid var(--char); background: var(--ochre); box-shadow: 0 6px 12px rgb(36 33 31 / 40%); transition: transform 160ms var(--ease); }
.o-range input::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; border: 4px solid var(--char); background: var(--ochre); }
@media (hover: hover) { .o-range input:hover::-webkit-slider-thumb { transform: scale(1.12); } }
.o-range input:focus-visible { outline: 3px solid var(--ac); outline-offset: 4px; border-radius: 8px; }
.o-total { display: grid; gap: 2px; padding: 14px 18px; border-radius: 18px; background: var(--char); color: var(--bone); box-shadow: 0 22px 30px -22px rgb(36 33 31 / 80%); position: relative; overflow: hidden; }
.o-total::after { content: ''; position: absolute; right: -20px; top: -20px; width: 90px; height: 90px; border-radius: 50%; background: var(--ac); opacity: 0.85; }
.o-total small { font-size: var(--t1); color: rgb(241 233 220 / 82%); position: relative; z-index: 1; }
.o-total b { font: 800 44px/1.05 'Bahnschrift', 'Arial Narrow', Arial, sans-serif; letter-spacing: -0.01em; color: var(--ochre); font-variant-numeric: tabular-nums; position: relative; z-index: 1; }
.o-track { display: grid; gap: 12px; animation: riseIn 320ms var(--ease) both; }
.o-track__h { font: 800 26px/1.1 'Bahnschrift', 'Arial Narrow', Arial, sans-serif; text-transform: uppercase; }
.o-track ol { display: grid; gap: 2px; counter-reset: ph; }
.o-track li { display: flex; align-items: center; gap: 12px; min-height: 42px; font-size: var(--t0); font-weight: 600; color: rgb(36 33 31 / 62%); counter-increment: ph; transition: color 300ms, transform 300ms var(--ease); }
.o-track li::before { content: counter(ph); display: grid; place-items: center; flex: none; width: 34px; height: 34px; border: 2px solid rgb(36 33 31 / 32%); border-radius: 50%; font: 800 var(--t1)/1 'Bahnschrift', Arial, sans-serif; transition: background-color 300ms, color 300ms, border-color 300ms, transform 300ms var(--ease); }
.o-track li.is-done { color: var(--char); }
.o-track li.is-done::before { content: '✓'; background: var(--moss); border-color: var(--moss); color: #fff; }
.o-track li.is-now { color: var(--char); font-weight: 800; transform: translateX(4px); }
.o-track li.is-now::before { background: var(--ac); border-color: var(--ac); color: #fff; transform: scale(1.12); box-shadow: 0 0 0 5px rgb(179 87 31 / 20%); }
.o-bar { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.o-bar i { height: 12px; border-radius: 6px; background: rgb(36 33 31 / 16%); transition: background-color 400ms var(--ease), transform 400ms var(--ease); }
.o-bar i.is-done { background: var(--moss); }
.o-bar i.is-now { background: var(--ac); transform: scaleY(1.25); }
.o-next { --ac: #b3571f; }
.o .s-foot { background: var(--char); color: rgb(241 233 220 / 90%); }
.stage[data-mode='pc'] .o-main { grid-template-columns: 1fr 1fr; align-content: stretch; }
.stage[data-mode='pc'] .o-hero { padding-top: 24px; gap: 12px; }
.stage[data-mode='pc'] .o-hero .s-h1 { font-size: 34px; }
.stage[data-mode='pc'] .o-art { max-height: 150px; }
.stage[data-mode='pc'] .o-chips legend, .stage[data-mode='tablet'] .o-chips legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.stage[data-mode='pc'] .o-art { margin-top: auto; }
.stage[data-mode='pc'] .o-tool { padding: 14px 26px 12px 24px; gap: 10px; }
.stage[data-mode='pc'] .o-quote { gap: 10px; }
.stage[data-mode='pc'] .o-total { padding: 10px 16px; }
.stage[data-mode='pc'] .o-total b { font-size: 40px; }
.stage[data-mode='tablet'] .o-main { grid-template-columns: 1fr; align-content: start; }
.stage[data-mode='tablet'] .o-hero { grid-template-columns: 1.1fr 0.9fr; column-gap: 12px; padding-top: 22px; }
.stage[data-mode='tablet'] .o-hero > * { grid-column: 1; }
.stage[data-mode='tablet'] .o-hero .s-h1 { font-size: 38px; }
.stage[data-mode='tablet'] .o-art { grid-column: 2; grid-row: 1 / 5; margin: 0; align-self: end; }
.stage[data-mode='mobile'] .o-hero .s-h1 { font-size: 28px; }
.stage[data-mode='mobile'] .o-chips span { padding: 0 14px; }

/* ═════ Ver en grande (modal accesible) ═════ */
.demo__big { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px; border: 1.5px solid var(--c-paper); background: transparent; color: var(--c-paper); font: 800 13px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: background-color 200ms, color 200ms; }
@media (hover: hover) { .demo__big:hover { background: var(--c-paper); color: var(--c-ink); } }
.demo__big span { font-size: 18px; }
html.is-big, html.is-big body { overflow: hidden; }
.big { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 56px 16px 16px; background: rgb(12 13 18 / 90%); overscroll-behavior: contain; animation: fadeIn 220ms var(--ease) both; }
.big__bar { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px 8px 16px; color: var(--c-paper); }
.big__bar p { margin: 0; font: 700 12px/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.85; }
.big__x { min-height: 44px; padding: 0 16px; border: 1.5px solid var(--c-paper); background: transparent; color: var(--c-paper); font: 800 13px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
@media (hover: hover) { .big__x:hover { background: var(--c-paper); color: var(--c-ink); } }
.big__x:focus-visible { outline: 3px solid var(--c-kw-dark); outline-offset: 3px; }
.big .stage { position: relative; height: auto; max-height: none; align-self: center; min-height: 0; }
.big .stage .device { position: absolute; opacity: 1; border-radius: 6px; box-shadow: 0 30px 60px -20px rgb(0 0 0 / 70%); }
.big .stage[data-fluid] { width: 100%; height: 100%; }
.big .stage[data-fluid] .device { position: relative; width: 100%; height: 100%; border-radius: 12px; box-shadow: none; }
@media (max-width: 699px) { .big { padding: 56px 0 0; } }

/* Escritorio (sección fija a pantalla completa): el escenario ocupa el alto útil y el texto se centra respecto a él */
@media (min-width: 1100px) and (min-height: 800px) and (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .demo__in { max-width: var(--max); grid-template-columns: minmax(0, 29fr) minmax(0, 71fr); grid-template-rows: minmax(0, 1fr); column-gap: clamp(24px, 2.6vw, 44px); flex: 1; min-height: 0; align-items: center; }
  .demo__text { align-self: center; gap: clamp(10px, 2vh, 18px); }
  .demo__text h2 { font-size: min(var(--h), 2.9vw); overflow-wrap: anywhere; }
  .stage { height: 100%; max-height: min(940px, 100%); align-self: center; min-height: 0; }
  .devsel { display: inline-flex; }
}
/* Sin «deck» (portátil de 720 px de alto, escala 125 %, tablet): la sección de demo cabe en una pantalla (100svh) */
@media (min-width: 1000px) {
  html:not(.deck-on) .demo { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-block: calc(var(--nav-height) + 12px) 22px; }
  html:not(.deck-on) .demo__in { grid-template-columns: minmax(0, 33fr) minmax(0, 67fr); align-items: center; column-gap: clamp(24px, 2.6vw, 44px); }
  html:not(.deck-on) .demo__text h2 { font-size: min(var(--h), 3.3vw); }
  html:not(.deck-on) .stage { height: clamp(440px, calc(100svh - var(--nav-height) - 64px), 820px); }
}
@media (min-width: 700px) and (max-width: 999px) {
  html:not(.deck-on) .demo { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-block: calc(var(--nav-height) + 14px) 28px; }
  html:not(.deck-on) .demo__in { display: flex; flex-direction: column; gap: 12px; flex: 1; }
  html:not(.deck-on) .demo__text { gap: 10px; }
  html:not(.deck-on) .demo__text h2 { font-size: clamp(1.7rem, 4.6vw, 2.3rem); }
  html:not(.deck-on) .demo__p { font-size: 1rem; max-width: none; }
  html:not(.deck-on) .demo__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
  html:not(.deck-on) .stage { flex: 1; height: auto; min-height: 520px; }
}
@media (min-width: 700px) { .devsel { display: inline-flex; } }
@media (max-width: 699px) {
  .devsel button[data-mode='tablet'], .devsel button[data-mode='pc'] { display: none; }
  .devsel { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .site *, .site *::before, .site *::after { animation: none !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .r-sent .c, .r-sent .t, .c-done .c, .c-done .t { stroke-dashoffset: 0; }
}
.trio .stage__gl { height: 100%; pointer-events: auto; }

/* ═════ Ajustes de acabado ═════ */
.site .s-btn { color: var(--ac-ink); }
.site .s-btn--ghost { color: var(--ac); }
.site .s-btn:disabled { color: rgb(0 0 0 / 60%); }
.o .s-btn { --ac: #b3571f; }
.o .s-head .s-btn { color: var(--char); }
.c-pane { display: flex; flex-direction: column; }
.c-opts { flex: 1; grid-auto-rows: 1fr; }
.stage[data-mode='pc'] .c-who { display: grid; }
.stage[data-mode='pc'] .r-art { height: 136px; }
.stage[data-mode='pc'] .o-chips span { padding: 0 14px; }
.stage[data-mode='pc'] .o-chips { flex-wrap: nowrap; }
.stage[data-mode='tablet'] .o-chips span { padding: 0 18px; }

.stage[data-mode='tablet'] .r-intro .s-btn--ghost { display: none; }
.stage[data-mode='tablet'] .r .s-h1 { font-size: 34px; }
.stage[data-mode='tablet'] .c .s-nav button:nth-child(2) { display: none; }
.s-brand small { white-space: nowrap; }
.s-brand { flex: none; }
.stage[data-mode='mobile'] .r-main, .stage[data-mode='mobile'] .c-main, .stage[data-mode='mobile'] .o-main { flex: none; }
.big { background: rgb(12 13 18 / 97%); }

/* Móvil: los controles de las demos (webs ficticias a tamaño real) llegan a 44 px sin romper la maqueta */
@media (max-width: 1099px) {
  .stage[data-fluid] .device :is(button, .s-btn, a.s-btn, select, input:not([type='range']):not([type='checkbox']):not([type='radio'])) { min-height: 44px; }
  .stage[data-fluid] .device :is(.r-tabs button, .o-tabs button, [role='tab']) { min-height: 44px; padding-block: 8px; }
}

/* Pantalla de carga de las demos: elegante y sin saltos (solo opacity). Se ve mientras el modelo y la demo no están listos
   o durante un cambio de dispositivo; si algo tarda de más, el vigilante pasa al marco estático. */
.stage.is-js::before {
  content: 'Cargando demo'; position: absolute; inset: 0; z-index: 0; display: grid; place-items: center; align-content: center;
  font: 700 11px/1 var(--mono); letter-spacing: 0.22em; text-transform: uppercase; color: rgb(245 242 233 / 72%);
  opacity: 0; transition: opacity 200ms; pointer-events: none;
}
.stage.is-js:not(.is-ready)::before, .stage.is-swap::before { opacity: 1; animation: stage-load 1.4s ease-in-out infinite; }
@keyframes stage-load { 50% { opacity: 0.45; } }

/* Controles de las demos y del 3D: mismas transiciones (160 ms), mismo gesto de pulsación y mismo foco que el resto de la web.
   El hover solo existe con puntero que lo soporta; en táctil, la pulsación (:active) es el único feedback y no queda pegado. */
.devsel button, .demo__big, .big__x { transition: background-color 160ms var(--ease), color 160ms var(--ease), transform 160ms var(--ease); touch-action: manipulation; }
@media (hover: hover) { .devsel button:not(:disabled):not([aria-pressed='true']):hover { background: rgb(245 242 233 / 16%); } }
.devsel button:not(:disabled):active, .demo__big:active, .big__x:active { transform: translateY(1px); }
.devsel button:focus-visible, .demo__big:focus-visible { outline: 3px solid var(--c-paper); outline-offset: -3px; }
.devsel button:disabled { cursor: not-allowed; }
.stage__gl:focus-visible { outline: 3px solid var(--c-paper); outline-offset: -3px; }

/* ═════ Táctil: acordeón de demos (móvil), capa «Interactuar» y altura controlada (tablet) ═════
   Nada de esto se aplica con ratón y pantalla ancha. Sin JavaScript (demo-noscript.css) las demos se ven abiertas. */
.demo__acc, .stage__shield, .stage__exit { display: none; }
@media (max-width: 767px) {
  html:not(.deck-on) .demo { min-height: 0; display: block; padding-block: var(--sec-y); }
  html:not(.deck-on) .demo__in { display: grid; gap: 16px; }
  .demo__acc { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 56px; padding: 0 16px; border: 1.5px solid currentColor; background: transparent; color: var(--c-paper); font: 800 13px/1.2 var(--mono); letter-spacing: 0.08em; text-align: left; text-transform: uppercase; cursor: pointer; touch-action: manipulation; transition: background-color 160ms var(--ease), color 160ms var(--ease); }
  .demo__acc:active { background: var(--c-paper); color: var(--c-ink); }
  .demo__acc:focus-visible { outline: 3px solid var(--c-paper); outline-offset: 3px; }
  .demo__acc-i { position: relative; flex: none; width: 20px; height: 20px; }
  .demo__acc-i::before, .demo__acc-i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; background: currentColor; transform: translate(-50%, -50%); transition: transform 200ms var(--ease); }
  .demo__acc-i::after { transform: translate(-50%, -50%) rotate(90deg); }
  .demo__acc[aria-expanded='true'] .demo__acc-i::after { transform: translate(-50%, -50%) rotate(0deg); }
  .demo .stage { display: none; }
  .demo.is-open .stage { display: block; }
  .demo:not(.is-open) .demo__big { display: none; }
}
@media (min-width: 768px) and (max-width: 1023px), (min-width: 1024px) and (max-width: 1180px) and (hover: none) and (pointer: coarse) {
  html:not(.deck-on) .demo { min-height: 0; display: block; padding-block: var(--sec-y); }
  html:not(.deck-on) .demo__in { display: grid; align-content: start; gap: 20px; }
  html:not(.deck-on) .stage { flex: none; height: min(640px, 72svh); min-height: 420px; }
}
@media (max-width: 1023px), (hover: none) and (pointer: coarse) {
  .stage__shield { position: absolute; inset: 0; z-index: 6; display: flex; align-items: flex-end; justify-content: center; padding: 16px; background: linear-gradient(to top, rgb(12 13 12 / 45%), transparent 45%); }
  .stage.is-active .stage__shield { display: none; }
  .stage__go, .stage__exit { min-height: 48px; padding: 0 20px; border: 1.5px solid var(--c-paper); background: var(--c-dark); color: var(--c-paper); font: 800 13px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; touch-action: manipulation; }
  .stage__go:focus-visible, .stage__exit:focus-visible { outline: 3px solid var(--c-paper); outline-offset: 3px; }
  .stage.is-active .stage__exit { position: absolute; z-index: 7; top: 6px; left: 50%; display: inline-flex; align-items: center; min-height: 44px; transform: translateX(-50%); }
  /* El desplazamiento interno de la demo no retiene el gesto: al llegar al final, la página sigue */
  .stage[data-mode] .site { overscroll-behavior: auto; }
}