/* Mismas familias y pesos variables; alojadas localmente bajo SIL OFL. */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:400 800;font-stretch:100%;font-display:swap;src:url('/assets/bricolage-latin-65.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:400 800;font-stretch:100%;font-display:swap;src:url('/assets/bricolage-ext-65.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/dmsans-latin-65.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/dmsans-ext-65.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* site-v15.css */
12..96,500;12..96,600;12..96,700;12..96,800&family=DM+Sans:wght@400;500;600;700&display=swap");

:root {
  color-scheme: light;
  --ink: #28242b;
  --ink-soft: #47414a;
  --paper: #f1e8dc;
  --paper-light: #fbf4e9;
  --paper-warm: #e7dbcb;
  --violet: #795aa0;
  --violet-light: #c7b0df;
  --violet-wash: #ded1e9;
  --clay: #bd765b;
  --line: rgba(40, 36, 43, .18);
  --display: "Bricolage Grotesque", "Arial Narrow", "Segoe UI", sans-serif;
  --body: "DM Sans", "Segoe UI", Arial, sans-serif;

  /* ── Design Tokens Semánticos (Web Negocios Colombia) ── */
  --wn-color-ink: var(--ink);
  --wn-color-ink-soft: var(--ink-soft);
  --wn-color-paper: var(--paper);
  --wn-color-paper-light: var(--paper-light);
  --wn-color-paper-warm: var(--paper-warm);
  --wn-color-brand-violet: var(--violet);
  --wn-color-brand-clay: var(--clay);
  --wn-color-emerald: #0f766e;
  --wn-color-emerald-hover: #0d9488;
  --wn-color-gold: #b45309;
  --wn-line-subtle: var(--line);
  --wn-line-strong: rgba(40, 36, 43, 0.32);
  --wn-radius-xs: 4px;
  --wn-radius-sm: 8px;
  --wn-radius-md: 14px;
  --wn-radius-lg: 22px;
  --wn-radius-pill: 9999px;
  --wn-shadow-subtle: 0 2px 8px rgba(40, 36, 43, 0.05);
  --wn-shadow-card: 0 10px 28px rgba(40, 36, 43, 0.08);
  --wn-shadow-elevated: 0 18px 42px rgba(40, 36, 43, 0.14);
  --wn-ease-snappy: cubic-bezier(0.16, 1, 0.3, 1);
  --wn-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --wn-trans-fast: 180ms var(--wn-ease-snappy);
  --wn-trans-normal: 320ms var(--wn-ease-smooth);
  font-family: var(--body);
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  overflow-x: clip;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; overflow-x: clip; background: var(--paper); }
button, input, textarea, select { font: inherit; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
::selection { color: var(--paper-light); background: var(--violet); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 30; inset: 10px auto auto 10px; padding: 12px 15px; transform: translateY(-150%); background: var(--violet); color: white; }
.skip-link:focus { transform: translateY(0); }
.site-header { position: sticky; z-index: 20; top: 0; display: flex; min-height: 76px; align-items: center; justify-content: space-between; gap: 24px; padding: 0 clamp(22px, 5vw, 76px); border-bottom: 1px solid rgba(40,36,43,.09); background: rgba(241,232,220,.93); backdrop-filter: blur(12px); }
.brand { display: grid; justify-items: start; gap: 4px; text-decoration: none; }
.brand__symbol { display: grid; width: 37px; height: 37px; place-items: center; border: 1.5px solid var(--violet); border-radius: 50%; color: var(--violet); font: 700 12px/1 var(--display); letter-spacing: -.08em; }
.brand__symbol span { color: var(--clay); }
.brand__name { font: 800 12px/1 var(--display); letter-spacing: .12em; }
.brand__country { color: #746b73; font-size: 7px; font-weight: 700; letter-spacing: .28em; }
.site-nav { display: flex; align-items: center; gap: clamp(20px, 3vw, 48px); }
.site-nav a { color: var(--ink-soft); font-size: 12px; font-weight: 600; text-decoration: none; transition: color .2s ease; }
.site-nav a:hover, .site-nav a:focus-visible { color: var(--violet); }
.site-nav .site-nav__contact { display: inline-flex; min-height: 38px; align-items: center; padding: 0 14px; border: 1px solid rgba(121, 90, 160, .32); border-radius: 999px; color: var(--violet); }
.site-nav .site-nav__contact:hover, .site-nav .site-nav__contact:focus-visible { background: var(--violet); color: white; }
.site-nav__contact span { padding-left: 4px; }
.site-language { display: flex; align-items: center; gap: 2px; padding-left: 10px; border-left: 1px solid rgba(40,36,43,.16); }
.site-language a { min-width: 30px; padding: 6px; border-radius: 999px; text-align: center; }
.site-language a[aria-current="page"] { color: var(--violet); background: rgba(121,90,160,.12); }
.menu-toggle { display: none; }
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--paper); }
.hero::before { position: absolute; z-index: -1; top: 7%; right: -12vw; width: min(54vw, 760px); aspect-ratio: 1; border: 1px solid rgba(121,90,160,.22); border-radius: 48% 52% 46% 54% / 55% 45% 55% 45%; content: ""; transform: rotate(-17deg); }
.hero::after { position: absolute; z-index: -1; right: 1%; bottom: 5%; width: min(27vw, 355px); height: min(27vw, 355px); border-radius: 53% 47% 64% 36% / 40% 50% 50% 60%; background: var(--violet-wash); content: ""; opacity: .58; transform: rotate(24deg); }
.hero__inner { display: grid; width: min(100% - 2*clamp(22px, 5vw, 76px), 1420px); min-height: min(770px, calc(100svh - 76px)); grid-template-columns: minmax(0, 1fr) minmax(390px, .9fr); align-items: center; gap: clamp(25px, 6vw, 100px); margin: 0 auto; padding: clamp(72px, 9vw, 130px) 0 clamp(102px, 12vw, 166px); }
.hero__copy { position: relative; z-index: 2; max-width: 710px; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 24px; color: #6f6870; font: 700 10px/1.4 var(--body); letter-spacing: .15em; text-transform: uppercase; }
.eyebrow__dot { display: inline-block; width: 8px; height: 8px; border: 1px solid var(--violet); border-radius: 50%; background: var(--violet-light); }
.hero h1 { max-width: 760px; margin: 0; color: var(--ink); font: 700 clamp(60px, 6.5vw, 88px)/.91 var(--display); letter-spacing: -.055em; }
.hero h1 span { color: var(--violet); }
.hero h1 em { font-style: normal; font-weight: 500; letter-spacing: -.055em; }
.hero__lead { max-width: 520px; margin: 30px 0 0; color: var(--ink-soft); font-size: clamp(16px, 1.5vw, 19px); line-height: 1.65; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 25px; margin-top: 33px; }
.button { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; gap: 12px; padding: 0 21px; border: 1px solid transparent; border-radius: 999px; font-size: 13px; font-weight: 700; text-decoration: none; transition: background .22s ease, color .22s ease, transform .22s ease, box-shadow .22s ease; }
.button:hover { transform: translateY(-2px); }
.button--primary { background: var(--violet); color: white; box-shadow: 0 10px 25px rgba(89, 58, 124, .18); }
.button--primary:hover { background: #634381; box-shadow: 0 14px 30px rgba(89, 58, 124, .25); }
.button__icon { display: grid; width: 26px; height: 26px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .16); font-size: 16px; line-height: 1; }
.button--quiet { padding-inline: 17px; border-color: rgba(40, 36, 43, .15); background: rgba(251, 244, 233, .7); color: var(--ink); }
.button--quiet:hover { border-color: var(--violet); background: var(--paper-light); color: var(--violet); }
.button:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--violet); outline-offset: 4px; }
.hero__note { margin: 23px 0 0; color: #777078; font-size: 11px; letter-spacing: .015em; }
.hero__desk { position: relative; min-height: 525px; isolation: isolate; }
.hero__desk::before { position: absolute; z-index: 0; inset: 4% 0 3%; border-radius: 50%; background: radial-gradient(ellipse at 53% 47%, rgba(222, 209, 233, .77), rgba(222, 209, 233, .34) 45%, transparent 72%); content: ""; }
.hero__constellation { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hero__constellation circle { fill: var(--violet); opacity: .42; }
.constellation-trail { fill: none; stroke: rgba(121, 90, 160, .52); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1800; stroke-dashoffset: 1800; }
.constellation-trail--inner { stroke: rgba(121, 90, 160, .34); stroke-width: 1.3; stroke-dasharray: 1300; stroke-dashoffset: 1300; }
.hero.is-visible .constellation-trail { animation: map-draw 2.3s .2s cubic-bezier(.25,.6,.25,1) forwards; }
.hero.is-visible .constellation-trail--inner { animation-delay: .55s; }
.hero__core { position: absolute; z-index: 2; top: 48%; left: 53%; display: grid; width: clamp(188px, 18vw, 238px); aspect-ratio: 1; align-content: center; justify-items: center; gap: 10px; padding: 26px; border: 1px solid rgba(121, 90, 160, .26); border-radius: 50%; background: radial-gradient(circle at 31% 23%, rgba(255, 251, 245, .98), rgba(251, 244, 233, .94) 64%, rgba(222, 209, 233, .84)); box-shadow: 0 18px 50px rgba(72, 52, 89, .13), inset 0 0 0 8px rgba(255, 255, 255, .35); text-align: center; transform: translate(-50%, -50%); }
.hero__core-eyebrow { color: var(--violet); font-size: 8px; font-weight: 800; letter-spacing: .13em; }
.hero__core-title { color: var(--ink); font: 700 clamp(28px, 3vw, 38px)/.95 var(--display); letter-spacing: -.055em; }
.hero__core-step { min-width: 66px; padding-top: 7px; border-top: 1px solid rgba(121, 90, 160, .3); color: #685b70; font-size: 10px; font-weight: 700; letter-spacing: .09em; }
.hero-star { position: absolute; z-index: 5; display: grid; min-width: 82px; min-height: 54px; align-content: center; justify-items: center; gap: 3px; color: var(--ink); text-decoration: none; transform: translate(-50%, -50%); }
.hero-star__glyph { display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid rgba(121, 90, 160, .35); border-radius: 50%; background: rgba(251, 244, 233, .96); box-shadow: 0 0 0 5px rgba(121, 90, 160, .07), 0 5px 13px rgba(74, 50, 95, .1); color: var(--violet); font-size: 20px; line-height: 1; transition: transform .28s ease, box-shadow .28s ease; }
.hero.is-visible .hero-star__glyph { animation: star-breathe 4.8s ease-in-out infinite; }
.hero-star:nth-of-type(3n) .hero-star__glyph { animation-delay: -1.6s; }
.hero-star:nth-of-type(3n + 1) .hero-star__glyph { animation-delay: -3.2s; }
.hero-star:hover .hero-star__glyph, .hero-star:focus-visible .hero-star__glyph { animation: none; box-shadow: 0 0 0 8px rgba(121, 90, 160, .13), 0 7px 18px rgba(74, 50, 95, .15); transform: rotate(14deg) scale(1.17); }
.hero-star:focus-visible { outline: 2px solid var(--violet); outline-offset: 5px; border-radius: 18px; }
.hero-star__text { padding: 4px 8px; border-radius: 999px; background: rgba(251, 244, 233, .88); color: #54465f; font-size: 9px; font-weight: 700; letter-spacing: .045em; white-space: nowrap; }
.hero-star--comercio { top: 20.4%; left: 13.7%; }
.hero-star--finanzas { top: 10.2%; left: 45.2%; }
.hero-star--documentos { top: 25%; left: 79%; }
.hero-star--web { top: 58.9%; left: 87.1%; }
.hero-star--contenido { top: 84.3%; left: 70.6%; }
.hero-star--operaciones { top: 87%; left: 46%; }
.hero-person { position: absolute; z-index: 4; bottom: 2%; left: 2%; width: clamp(176px, 18vw, 238px); padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; }
.hero-person__art { width: 100%; height: auto; filter: drop-shadow(0 13px 14px rgba(40, 36, 43, .12)); }
.hero.is-visible .hero-person__art { animation: guide-float 5.4s ease-in-out infinite; }
.hero-person:hover .hero-person__art, .hero-person:focus-visible .hero-person__art, .hero-person.is-active .hero-person__art { animation: guide-hello .7s ease-in-out 1; }
.hero-person__help { position: absolute; right: -17px; bottom: -10px; display: block; padding: 5px 9px; border: 1px solid rgba(121, 90, 160, .18); border-radius: 999px; background: var(--paper-light); color: #54465f; font-size: 8px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
.hero-person__help span { color: var(--violet); }
.hero-person:focus-visible { outline: 2px solid var(--violet); outline-offset: 5px; border-radius: 45%; }
.hero__caption { position: absolute; z-index: 3; right: 2%; bottom: 0; margin: 0; color: #655c69; font-size: 10px; letter-spacing: .04em; }
.hero__caption span { margin-right: 10px; color: var(--violet); font-weight: 800; }
.star-intro { position: fixed; z-index: 50; inset: 0; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 48%, #443557 0, #28242b 53%, #17161f 100%); color: #fbf4e9; animation: intro-open .9s 4.7s ease-in forwards; }
.star-intro__sky { position: absolute; inset: 0; background-image: radial-gradient(circle at 13% 19%, #e2c7ff 1px, transparent 2px), radial-gradient(circle at 68% 22%, #fff4dc 1px, transparent 2px), radial-gradient(circle at 78% 73%, #dec7f3 1px, transparent 2px), radial-gradient(circle at 27% 68%, #fff4dc 1px, transparent 2px); background-size: 230px 190px, 310px 260px, 350px 240px, 190px 310px; animation: intro-sky 5s ease-in forwards; }
.star-intro__orbit { position: absolute; top: 50%; left: 50%; width: min(74vw, 610px); aspect-ratio: 1; border: 1px solid rgba(222, 209, 233, .2); border-radius: 50%; box-shadow: 0 0 0 40px rgba(222, 209, 233, .025), 0 0 0 120px rgba(222, 209, 233, .02); transform: translate(-50%, -50%) rotateX(65deg); animation: intro-orbit 3.2s ease-in forwards; }
.star-intro__meteor { position: absolute; top: 50%; left: 50%; z-index: 2; width: 26px; height: 26px; color: #ffe7bc; opacity: 0; filter: drop-shadow(0 0 12px #d4acfa); animation: meteor-fall 2.05s var(--delay) cubic-bezier(.15,.65,.32,1) forwards; }
.star-intro__meteor::before { position: absolute; top: -12px; left: -7px; content: '✦'; font-size: 41px; line-height: 1; }
.star-intro__meteor::after { position: absolute; right: 4px; bottom: 26px; width: 2px; height: clamp(48px, 10vh, 90px); border-radius: 50%; background: linear-gradient(to top, rgba(255,235,197,.88), transparent); box-shadow: 0 0 11px rgba(219,180,255,.7); content: ''; }
.star-intro__impact { position: absolute; z-index: 2; top: 50%; left: 50%; width: min(46vw, 260px); aspect-ratio: 1; border: 1px solid #fff6df; border-radius: 50%; background: radial-gradient(circle, #fff8e8 0, #e6cafa 27%, rgba(197,147,231,.52) 56%, transparent 76%); box-shadow: 0 0 55px #d9b3ff, 0 0 140px rgba(221,186,255,.6); opacity: 0; transform: translate(-50%,-50%) scale(.1); animation: intro-impact 1.1s 2.05s ease-out forwards; }
.star-intro__result { position: absolute; z-index: 2; top: 50%; left: 50%; width: min(620px, 92vw, 72vh); aspect-ratio: 620 / 540; opacity: 0; transform: translate(-50%, -50%) scale(.35) rotate(-12deg); animation: intro-result 1.3s 2.7s cubic-bezier(.18,.75,.25,1) forwards, intro-result-out .35s 4.38s ease-in forwards; }
.star-intro__links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: #d6b9f0; stroke-width: 1.8; filter: drop-shadow(0 0 7px rgba(222,209,233,.8)); }
.star-intro__node { position: absolute; z-index: 2; top: var(--ny); left: var(--nx); display: grid; width: clamp(24px, 4vw, 34px); aspect-ratio: 1; place-items: center; border: 1px solid #e9d5fa; border-radius: 50%; background: #fff8e9; box-shadow: 0 0 0 6px rgba(209,179,239,.13), 0 0 22px #e3c6f9; color: #8766a8; font-size: clamp(18px, 3vw, 25px); transform: translate(-50%,-50%); }
.star-intro__core { position: absolute; z-index: 2; top: 48%; left: 53%; display: grid; width: 37%; aspect-ratio: 1; align-content: center; justify-items: center; gap: clamp(4px, 1vw, 9px); border: 1px solid #eee0ff; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #fffaf1 0, #f2e8e8 62%, #d7c1e8 100%); box-shadow: 0 0 80px rgba(214,185,240,.55); color: #28242b; transform: translate(-50%,-50%); }
.star-intro__core small { color: #795aa0; font-size: clamp(5px, .75vw, 8px); font-weight: 800; letter-spacing: .12em; }
.star-intro__core strong { font: 700 clamp(17px, 3vw, 38px)/1 var(--display); letter-spacing: -.05em; }
.star-intro__core span { color: #795aa0; font-size: clamp(7px, .8vw, 10px); font-weight: 800; }
.star-intro__guide { position: absolute; z-index: 3; bottom: 0; left: 0; width: 30%; height: auto; filter: drop-shadow(0 11px 16px rgba(0,0,0,.32)); opacity: 0; animation: intro-guide .8s 3.25s ease-out forwards; }
.star-intro__shard { position: absolute; top: 48%; left: 50%; width: 12vw; max-width: 100px; height: 2px; border-radius: 50%; background: linear-gradient(90deg, transparent, #fce7c7, transparent); opacity: 0; }
.star-intro__shard--one { --dx: -43vw; --dy: -24vh; --angle: -33deg; }
.star-intro__shard--two { --dx: 39vw; --dy: -19vh; --angle: 31deg; }
.star-intro__shard--three { --dx: -36vw; --dy: 27vh; --angle: 35deg; }
.star-intro__shard--four { --dx: 40vw; --dy: 28vh; --angle: -29deg; }
.star-intro__shard { animation: intro-shard 1.1s 2.1s ease-out forwards; }
.star-intro__copy { position: relative; z-index: 3; display: grid; justify-items: center; gap: 8px; margin-top: -65vh; text-align: center; pointer-events: none; animation: intro-copy 3.1s ease-out forwards; }
.star-intro__copy span { color: #d6b9f0; font-size: 10px; font-weight: 800; letter-spacing: .22em; }
.star-intro__copy strong { font: 700 clamp(40px, 7vw, 88px)/.92 var(--display); letter-spacing: -.065em; }
.star-intro__copy p { max-width: 36ch; margin: 0; color: #e8d8e8; font-size: clamp(12px, 1.4vw, 16px); }
.star-intro__controls { position: absolute; z-index: 3; right: clamp(18px, 4vw, 60px); bottom: clamp(18px, 4vw, 45px); left: clamp(18px, 4vw, 60px); display: flex; justify-content: space-between; gap: 12px; }
.star-intro__controls button { min-height: 44px; padding: 0 15px; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; background: rgba(24,21,29,.4); color: white; font-size: 12px; font-weight: 700; cursor: pointer; }
.star-intro__controls button:hover { background: rgba(255,255,255,.16); }
.intro-playing { overflow: hidden; }
@keyframes intro-sky { 45% { background-position: 0 0, 0 0, 0 0, 0 0; } 100% { background-position: -150px 90px, 120px -100px, -70px 180px, 160px 110px; } }
@keyframes intro-orbit { 70% { opacity: 1; transform: translate(-50%,-50%) rotateX(65deg) rotate(75deg) scale(1.3); } 100% { opacity: 0; transform: translate(-50%,-50%) rotateX(65deg) rotate(135deg) scale(2.6); } }
@keyframes meteor-fall { 0% { opacity: 0; transform: translate(var(--sx),var(--sy)) scale(.5); } 13%, 78% { opacity: 1; } 95% { opacity: 1; transform: translate(0,0) scale(1.2); } 100% { opacity: 0; transform: translate(0,0) scale(.2); } }
@keyframes intro-impact { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.1); } 32% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-50%) scale(5); } }
@keyframes intro-result { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.35) rotate(-12deg); } 30% { opacity: 1; } 100% { opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(0); } }
@keyframes intro-result-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes intro-guide { from { opacity: 0; transform: translateY(25px) scale(.9); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes intro-shard { 0% { opacity: 0; transform: translate(0,0) rotate(var(--angle)) scaleX(.2); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--angle)) scaleX(2.2); } }
@keyframes intro-copy { 0%, 8% { opacity: 0; transform: translateY(18px); } 18%, 75% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-30px); } }
@keyframes intro-open { 0% { opacity: 1; clip-path: circle(150% at 50% 50%); } 100% { opacity: 0; clip-path: circle(0 at 50% 50%); } }
.site-header { border-bottom-color: rgba(226, 202, 245, .16); background: rgba(28, 24, 37, .95); }
.site-header .brand__name, .site-header .site-nav a { color: #f7f0e8; }
.site-header .brand__country { color: #c5aedb; }
.site-header .site-nav__contact { border-color: rgba(226, 202, 245, .5); }
.site-header .site-nav__contact:hover { color: #28242b; background: #f7f0e8; }
.hero { background: radial-gradient(circle at 66% 40%, #463258 0, #292332 49%, #191820 100%); color: #fbf4e9; }
.hero::before { border-color: rgba(222, 209, 233, .23); }
.hero::after { background: #9271aa; opacity: .23; filter: blur(28px); }
.hero__starscape { position: absolute; z-index: 0; inset: 0; pointer-events: none; background-image: radial-gradient(circle at 13% 19%, #e2c7ff 1px, transparent 2px), radial-gradient(circle at 68% 22%, #fff4dc 1px, transparent 2px), radial-gradient(circle at 78% 73%, #dec7f3 1px, transparent 2px), radial-gradient(circle at 27% 68%, #fff4dc 1px, transparent 2px); background-size: 230px 190px, 310px 260px, 350px 240px, 190px 310px; opacity: .75; }
.hero__gemini { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: .95; pointer-events: none; transform: translateX(28%) scale(1.08); mask-image: linear-gradient(90deg, transparent 0%, #000 22%); }
.hero__inner { position: relative; z-index: 2; }
.hero .eyebrow, .hero__lead, .hero__note, .hero__caption, .hero__continue { color: #e0d4df; }
.hero h1, .hero h1 em { color: #fbf4e9; }
.hero h1 span { color: #c4a6e4; }
.hero__desk::before { inset: -7% -12%; background: linear-gradient(rgba(25, 20, 39, .1), rgba(25, 20, 39, .1)), url('/assets/hero-gemini-sky-v2.webp') center / cover no-repeat; mask-image: radial-gradient(ellipse 55% 51% at 50% 48%, #000 42%, transparent 100%); }
.hero--sequence .hero__desk::before { opacity: 0; }
.hero .constellation-trail { stroke: rgba(222, 196, 246, .7); }
.hero .constellation-trail--inner { stroke: rgba(222, 196, 246, .42); }
.hero__constellation circle { fill: #fbe7c7; }
.hero-star__glyph { background: #fff7e9; box-shadow: 0 0 0 6px rgba(211, 176, 244, .12), 0 0 20px rgba(231, 201, 255, .35); }
.hero-star__text { background: rgba(37, 30, 46, .86); color: #f5e9fc; }
.hero__caption span { color: #dbc0f8; }
.hero__continue span { background: #dbc0f8; }
.hero .hero__core { overflow: hidden; border: 1px solid rgba(255, 255, 255, .7); background: radial-gradient(circle at 29% 22%, rgba(255, 255, 255, .99) 0, rgba(253, 249, 243, .96) 31%, rgba(223, 208, 226, .94) 73%, rgba(151, 126, 176, .9) 100%); box-shadow: 0 0 0 1px rgba(221, 186, 255, .23), 0 0 58px rgba(197, 163, 238, .34), 18px 27px 64px rgba(7, 7, 20, .42), inset -18px -22px 34px rgba(105, 75, 137, .2), inset 12px 15px 24px rgba(255, 255, 255, .85); }
.hero .hero__core::before { position: absolute; inset: 6% 9% 48% 13%; border-radius: 50%; background: linear-gradient(160deg, rgba(255,255,255,.78), rgba(255,255,255,0)); content: ""; filter: blur(5px); pointer-events: none; }
.hero .hero__core > * { position: relative; }
.hero .hero-star__glyph { width: 34px; height: 34px; border: 0; background: radial-gradient(circle, rgba(255, 248, 220, .9) 0, rgba(230, 197, 255, .46) 32%, rgba(199, 154, 241, .08) 62%, transparent 72%); box-shadow: 0 0 18px rgba(242, 217, 255, .55), 0 0 32px rgba(222, 184, 255, .25); color: #fff9db; font-size: 23px; text-shadow: 0 0 5px #fff, 0 0 15px #d8b8ff; }
.hero .hero-star__text { border: 1px solid rgba(247, 231, 255, .18); background: rgba(30, 24, 44, .72); box-shadow: 0 4px 14px rgba(11, 7, 19, .22); backdrop-filter: blur(8px); }
.hero .constellation-trail { stroke: rgba(225, 208, 246, .53); stroke-width: 1.15; filter: drop-shadow(0 0 4px rgba(218, 178, 255, .42)); }
.hero .constellation-trail--inner { stroke: rgba(225, 208, 246, .23); stroke-width: .85; }
.hero__impact { position: absolute; z-index: 2; top: 48%; left: 53%; width: 36%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #fff9df 0, #dec1fa 22%, rgba(182, 125, 231, .45) 54%, transparent 73%); box-shadow: 0 0 65px rgba(226, 195, 255, .6); opacity: 0; transform: translate(-50%,-50%) scale(.1); pointer-events: none; }
.hero--sequence .hero__gemini { animation: hero-video-in .67s ease-out both; }
.hero--sequence .hero__copy { opacity: 0; animation: hero-copy-in .57s 3.33s ease-out both; }
.hero--sequence .hero__core { opacity: 0; animation: hero-core-born .57s 2.75s ease-out both; }
.hero--sequence .hero-person { opacity: 0; animation: hero-guide-born .57s 3.15s ease-out both; }
.hero--sequence .hero__caption { opacity: 0; animation: hero-copy-in .33s 3.73s ease-out both; }
.hero--sequence .hero-star { opacity: 0; animation: hero-star-form .8s calc(2.9s + var(--fall-delay, 0s)) cubic-bezier(.15,.7,.25,1) both; }
.hero--sequence .hero__constellation { opacity: 0; animation: hero-constellation-reveal .53s 3.2s ease-out both; }
.hero--sequence .constellation-trail { animation-duration: 1.53s; animation-delay: 3.21s; }
.hero--sequence .constellation-trail--inner { animation-duration: 1.53s; animation-delay: 3.37s; }
.hero--sequence .hero__continue { opacity: 0; animation: hero-copy-in .33s 3.73s ease-out both; }
@keyframes hero-video-in { from { opacity: 0; } to { opacity: .95; } }
@keyframes hero-constellation-reveal { from { opacity: 0; } to { opacity: 1; } }
@keyframes hero-star-form { 0% { opacity: 0; transform: translate(calc(-50% + var(--impact-x)), calc(-50% + var(--impact-y))) scale(.25); } 35% { opacity: 1; } 100% { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
@keyframes hero-star-fall { 0% { opacity: 0; transform: translate(calc(-50% + var(--impact-x) + var(--flight-x)), calc(-50% + var(--impact-y) - 75vh)) scale(.45); } 12%, 67% { opacity: 1; } 69% { transform: translate(calc(-50% + var(--impact-x)), calc(-50% + var(--impact-y))) scale(1.3); } 73% { opacity: 0; } 85% { opacity: 1; } 100% { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
@keyframes hero-impact-burst { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.1); } 35% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-50%) scale(4); } }
@keyframes hero-core-born { from { opacity: 0; transform: translate(-50%,-50%) scale(.35); } to { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
@keyframes hero-guide-born { from { opacity: 0; transform: translateY(30px) scale(.9); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes hero-copy-in { from { opacity: 0; filter: blur(9px); } to { opacity: 1; filter: blur(0); } }
.hero__continue { position: absolute; z-index: 4; bottom: 43px; left: clamp(22px, 5vw, 76px); display: flex; align-items: center; gap: 11px; color: #706870; font-size: 9px; font-weight: 700; letter-spacing: .14em; text-decoration: none; }
.hero__continue span { width: 20px; height: 1px; background: var(--violet); }
.hero__edge { position: absolute; z-index: 2; right: 0; bottom: -1px; left: 0; width: 100%; height: clamp(45px, 7vw, 100px); pointer-events: none; }
.hero__edge path { fill: var(--paper); }
.section-shell { width: min(100% - 2*clamp(22px, 5vw, 76px), 1300px); margin-inline: auto; }
.capabilities { position: relative; z-index: 3; overflow: hidden; background: var(--paper); padding: clamp(58px, 7vw, 105px) 0 clamp(85px, 10vw, 145px); }
.capabilities::before { position: absolute; top: 0; right: 2%; width: 300px; height: 300px; border: 1px solid rgba(121,90,160,.15); border-radius: 50%; content: ""; transform: translateY(-58%); }
.chapter-head { display: flex; align-items: end; justify-content: space-between; gap: 26px; margin-bottom: clamp(36px, 5vw, 72px); }
.chapter-head h2, .samples__intro h2, .approach__heading h2, .questions__head h2, .contact h2 { margin: 0; color: var(--ink); font: 700 clamp(42px, 6.4vw, 86px)/.93 var(--display); letter-spacing: -.065em; }
.chapter-head h2 em, .samples__intro h2 em, .approach__heading h2 em, .questions__head h2 em, .contact h2 em { color: var(--violet); font-style: normal; font-weight: 500; }
.chapter-head__aside { display: flex; align-items: center; gap: 15px; padding-bottom: 5px; }
.chapter-head__count { color: var(--violet); font: 700 54px/.8 var(--display); letter-spacing: -.09em; }
.chapter-head__aside p { margin: 0; color: #746b73; font-size: 11px; line-height: 1.45; }
.capability-index { position: relative; display: flex; justify-content: space-between; max-width: 840px; margin: 0 auto clamp(44px, 6vw, 86px); }
.capability-index__line { position: absolute; top: 14px; right: 14px; left: 14px; height: 1px; background: rgba(121,90,160,.25); }
.capability-index a { position: relative; z-index: 1; display: grid; width: 44px; min-height: 44px; justify-items: center; align-content: start; gap: 8px; color: #706771; text-decoration: none; }
.capability-index a span { display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid var(--paper); border-radius: 50%; background: var(--paper); font-size: 9px; transition: color .25s, background .25s, transform .25s; }
.capability-index a i { width: 3px; height: 3px; border-radius: 50%; background: var(--violet-light); }
.capability-index a[aria-current="location"] span, .capability-index a:hover span { color: white; background: var(--violet); transform: scale(1.1); }
.areas { border-top: 1px solid var(--line); }
.area { position: relative; display: grid; grid-template-columns: 84px minmax(0, 1.05fr) minmax(250px, .82fr); align-items: center; gap: clamp(20px, 4vw, 64px); padding: clamp(36px, 5vw, 70px) 0; border-bottom: 1px solid var(--line); scroll-margin-top: 100px; }
.area__index { position: relative; align-self: stretch; }
.area__index span { display: block; color: rgba(121,90,160,.52); font: 700 clamp(46px, 6.3vw, 80px)/.82 var(--display); letter-spacing: -.1em; }
.area__index i { display: block; width: 24px; height: 2px; margin-top: 22px; background: var(--clay); }
.area__overline { margin: 0 0 12px; color: var(--violet); font-size: 9px; font-weight: 700; letter-spacing: .15em; }
.area h3 { max-width: 670px; margin: 0; font: 700 clamp(28px, 3.3vw, 45px)/.99 var(--display); letter-spacing: -.045em; }
.area__intro { max-width: 55ch; margin: 14px 0 17px; color: var(--ink-soft); font-size: 14px; line-height: 1.65; }
.area__tasks { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0; padding: 0; list-style: none; }
.area__tasks li { position: relative; padding-left: 12px; color: #706771; font-size: 10px; line-height: 1.5; }
.area__tasks li::before { position: absolute; top: .55em; left: 0; width: 4px; height: 4px; border-radius: 50%; background: var(--violet-light); content: ""; }
.area__details { margin-top: 23px; }
.area__details summary { display: flex; width: fit-content; min-height: 44px; align-items: center; gap: 22px; color: var(--violet); cursor: pointer; font-size: 11px; font-weight: 700; list-style: none; }
.area__details summary::-webkit-details-marker, .question summary::-webkit-details-marker { display: none; }
.area__details summary span, .question summary span { display: inline-grid; width: 23px; height: 23px; place-items: center; border: 1px solid rgba(121,90,160,.5); border-radius: 50%; font-size: 17px; font-weight: 400; transition: transform .22s; }
.area__details[open] summary span, .question[open] summary span { transform: rotate(45deg); }
.area__detail-content { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px 24px; max-width: 720px; padding: 21px 0 0; animation: detail-in .28s ease both; }
.area__detail-content p { margin: 0; color: #625b63; font-size: 11px; line-height: 1.55; }
.area__detail-content .detail-label { margin-bottom: 5px; color: var(--ink); font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.area__visual { position: relative; min-height: 230px; display: grid; place-items: center; }
.area:nth-child(odd) .area__visual { transform: rotate(1deg); }
.area:nth-child(even) .area__visual { transform: rotate(-1.2deg); }
.sample { position: relative; width: min(100%, 360px); min-height: 190px; overflow: hidden; padding: 22px 23px; background: var(--paper-light); box-shadow: 4px 13px 24px rgba(40,36,43,.1); clip-path: polygon(1% 2%, 99% 0, 100% 98%, 0 100%); }
.sample__stamp { position: absolute; top: 19px; right: 19px; padding: 5px 8px; border: 1px solid var(--violet); color: var(--violet); font-size: 7px; font-weight: 700; letter-spacing: .1em; transform: rotate(4deg); }
.sample__eyebrow { margin: 0 0 18px; color: #777078; font-size: 8px; font-weight: 700; letter-spacing: .14em; }
.sample__folio { position: absolute; right: 20px; bottom: 15px; color: #8d858c; font-size: 8px; letter-spacing: .08em; }
.sample-shop { min-height: 250px; padding: 25px 24px; }
.sample-shop__shape { width: 48px; height: 48px; margin: 0 0 13px 3px; border-radius: 61% 39% 55% 45% / 46% 56% 44% 54%; background: var(--violet-wash); transform: rotate(-19deg); }
.sample-shop__name { margin: 0 0 13px; font: 700 23px/1 var(--display); letter-spacing: -.04em; }
.sample-shop__line { display: flex; gap: 12px; color: #766f75; font-size: 8px; }
.sample-shop__line span+span { padding-left: 12px; border-left: 1px solid var(--line); }
.sample-ledger { padding-top: 26px; }
.ledger-row { display: grid; grid-template-columns: 1.2fr 1fr 40px; gap: 10px; padding: 9px 4px; border-top: 1px solid rgba(40,36,43,.12); color: #5d565f; font-size: 9px; }
.ledger-row--head { color: var(--violet); font-size: 8px; font-weight: 700; letter-spacing: .07em; }
.ledger-row span:last-child { text-align: center; }
.file-line { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid rgba(40,36,43,.12); }
.file-line__mark { display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid rgba(121,90,160,.45); color: var(--violet); font-size: 8px; }
.file-line b, .file-line small { display: block; }
.file-line b { font-size: 10px; }
.file-line small { margin-top: 3px; color: #7b737b; font-size: 8px; }
.sample-flow ol { display: flex; justify-content: space-between; gap: 4px; margin: 23px 0 0; padding: 0; list-style: none; }
.sample-flow li { position: relative; display: grid; justify-items: start; gap: 10px; color: #57515a; font-size: 8px; }
.sample-flow li:not(:last-child)::after { position: absolute; top: 8px; left: 27px; width: clamp(14px, 2vw, 36px); height: 1px; background: var(--violet-light); content: ""; }
.sample-flow li i { display: grid; width: 17px; height: 17px; place-items: center; border: 1px solid var(--violet); border-radius: 50%; color: var(--violet); font-size: 6px; font-style: normal; }
.sample-page { min-height: 250px; padding-top: 27px; background: #e8dfd4; }
.page-sample__title { margin: 7px 0 15px; font: 700 29px/.92 var(--display); letter-spacing: -.06em; }
.page-sample__rule { width: 62%; height: 1px; margin-bottom: 10px; background: var(--clay); }
.page-sample__copy { max-width: 25ch; margin: 0; color: #69616a; font-size: 8px; line-height: 1.4; }
.page-sample__button { display: inline-block; margin-top: 15px; padding: 7px 10px; background: var(--violet); color: white; font-size: 7px; }
.story-beat { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: baseline; padding: 9px 0; border-top: 1px solid rgba(40,36,43,.13); }
.story-beat span { color: var(--violet); font-size: 8px; font-weight: 700; }
.story-beat b { font: 600 13px var(--display); }
.story-beat small { color: #817983; font-size: 8px; }
.capabilities__note { margin: 32px 0 0; color: var(--ink); font-size: 11px; font-weight: 600; }
.capabilities__note span { margin-right: 7px; color: var(--violet); }
.capabilities__limit { max-width: 90ch; margin: 10px 0 0; color: #777078; font-size: 10px; line-height: 1.55; }
.samples { position: relative; isolation: isolate; overflow: hidden; padding: clamp(105px, 13vw, 180px) 0 clamp(88px, 10vw, 140px); background: var(--ink); color: var(--paper-light); }
.samples::before { position: absolute; z-index: 0; top: -68px; left: -8%; width: 116%; height: 145px; border-radius: 0 0 50% 50% / 0 0 75% 75%; background: var(--paper); content: ""; }
.samples::after { position: absolute; z-index: 0; right: -160px; bottom: -100px; width: 500px; height: 500px; border: 1px solid rgba(199,176,223,.18); border-radius: 50%; content: ""; }
.samples__shell { position: relative; z-index: 1; }
.samples__intro { display: grid; grid-template-columns: 1fr minmax(220px, .6fr); align-items: end; gap: 18px 60px; margin-bottom: clamp(50px, 8vw, 110px); }
.samples__intro .eyebrow { grid-column: 1 / -1; color: #c8bcc9; }
.samples__intro h2 { color: var(--paper-light); }
.samples__intro h2 em { color: var(--violet-light); }
.samples__intro>p:last-child { max-width: 44ch; margin: 0 0 6px; color: #d0c8d1; font-size: 13px; line-height: 1.7; }
.samples__wall { position: relative; display: grid; gap: clamp(56px, 9vw, 125px); }
.samples__thread { position: absolute; z-index: -1; top: -20px; right: 10%; bottom: -30px; left: 38%; border-left: 1px solid rgba(199,176,223,.42); border-radius: 45%; transform: rotate(8deg); }
.sample-feature { position: relative; width: min(100%, 1040px); padding: 0 0 24px; }
.sample-feature--large { margin-left: 2%; }
.sample-feature--small { width: min(87%, 900px); margin-left: auto; }
.sample-feature__meta { display: flex; justify-content: space-between; gap: 15px; padding-bottom: 9px; border-bottom: 1px solid rgba(241,232,220,.27); color: #cfc5d2; font-size: 8px; font-weight: 700; letter-spacing: .12em; }
.sample-feature__body { display: grid; grid-template-columns: .82fr 1fr; align-items: center; gap: clamp(18px, 4vw, 55px); padding-top: 20px; }
.sample-feature--small .sample-feature__body { grid-template-columns: 1fr .92fr; }
.sample-feature--small .sample-feature__copy { order: 2; }
.sample-feature--small .sample { order: 1; }
.sample-feature__kicker { margin: 0 0 14px; color: #cabed0; font-size: 10px; font-weight: 600; letter-spacing: .08em; }
.sample-feature__copy h3 { margin: 0; color: var(--paper-light); font: 700 clamp(38px, 5vw, 63px)/.9 var(--display); letter-spacing: -.06em; }
.sample-feature__copy h3 em { color: var(--violet-light); font-style: normal; }
.sample-feature__copy>p:last-child { max-width: 40ch; margin: 18px 0 0; color: #cbc3cc; font-size: 12px; line-height: 1.65; }
.sample--wall, .sample-shop--wall, .sample-ledger--wall { justify-self: center; transform: rotate(2deg); }
.sample-shop--wall { width: min(100%, 420px); min-height: 300px; }
.sample-ledger--wall { width: min(100%, 410px); min-height: 220px; background: var(--paper); transform: rotate(-2deg); }
.samples__pdf { display: inline-flex; min-height: 44px; align-items: center; margin-top: 56px; border-bottom: 1px solid rgba(241,232,220,.48); color: var(--paper-light); font-size: 11px; text-decoration: none; }
.samples__pdf span { margin-left: 12px; color: var(--violet-light); }
.approach { position: relative; overflow: hidden; padding: clamp(150px, 15vw, 190px) 0 clamp(90px, 10vw, 140px); background: var(--paper-warm); }
.approach::before { position: absolute; z-index: 0; top: -68px; left: -8%; width: 116%; height: 140px; border-radius: 0 0 48% 52% / 0 0 68% 72%; background: var(--ink); content: ""; }
.approach::after { position: absolute; z-index: 0; top: 12%; right: -130px; width: 420px; height: 420px; border: 1px solid rgba(121,90,160,.18); border-radius: 50%; content: ""; }
.approach>.section-shell { position: relative; z-index: 1; }
.approach__heading { display: grid; grid-template-columns: 1fr minmax(210px, .5fr); align-items: end; gap: 20px 50px; margin-bottom: clamp(44px, 6vw, 82px); }
.approach__heading .eyebrow { grid-column: 1 / -1; }
.approach__heading>p:last-child { max-width: 43ch; margin: 0 0 5px; color: #645c64; font-size: 12px; line-height: 1.65; }
.process-list { position: relative; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 25px; margin: 0; padding: 0; list-style: none; }
.process-list::before { position: absolute; top: 18px; right: 3%; left: 2%; height: 1px; background: rgba(121,90,160,.42); content: ""; }
.process-step { position: relative; display: grid; align-content: start; gap: 28px; padding: 0 10px 22px 0; }
.process-step__number { position: relative; z-index: 1; display: grid; width: 37px; height: 37px; place-items: center; border: 1px solid var(--violet); border-radius: 50%; background: var(--paper-warm); color: var(--violet); font-size: 9px; font-weight: 700; }
.process-step h3 { margin: 0 0 8px; font: 700 23px/1 var(--display); letter-spacing: -.03em; }
.process-step p { max-width: 28ch; margin: 0; color: #69616a; font-size: 11px; line-height: 1.65; }
/* Plan detallado: acompaña al proceso existente sin sustituirlo. */
.project-roadmap {
  display: grid;
  grid-template-columns: minmax(215px, .68fr) minmax(0, 1.32fr);
  align-items: start;
  gap: clamp(24px, 5vw, 58px);
  margin-top: clamp(55px, 7vw, 94px);
  padding: clamp(20px, 3vw, 34px);
  border: 1px solid rgba(40, 36, 43, .16);
  border-radius: 26px;
  background: rgba(251, 244, 233, .66);
}
.project-roadmap__intro .eyebrow { margin: 0 0 18px; font-size: 9px; letter-spacing: .12em; }
.project-roadmap__intro h3 {
  margin: 0;
  color: var(--ink);
  font: 700 clamp(30px, 3.6vw, 44px)/.97 var(--display);
  letter-spacing: -.055em;
}
.project-roadmap__intro h3 em { color: var(--violet); font-style: normal; font-weight: 500; }
.project-roadmap__intro>p:last-child { max-width: 36ch; margin: 15px 0 0; color: #655d66; font-size: 11px; line-height: 1.7; }
.project-roadmap__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.project-roadmap__step {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
  gap: 11px;
  min-width: 0;
  padding: 14px 13px;
  border: 1px solid rgba(40, 36, 43, .12);
  border-radius: 15px;
  background: rgba(255, 255, 255, .46);
}
.project-roadmap__number { display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid rgba(121, 90, 160, .55); border-radius: 50%; color: var(--violet); font-size: 8px; font-weight: 700; }
.project-roadmap__step h4 { margin: 2px 0 5px; color: var(--ink); font: 700 14px/1.15 var(--display); letter-spacing: -.02em; }
.project-roadmap__step p { margin: 0; color: #655d66; font-size: 10px; line-height: 1.6; }
.project-roadmap__note { grid-column: 1 / -1; margin: 0; padding-top: 15px; border-top: 1px solid rgba(40, 36, 43, .13); color: #655d66; font-size: 10px; line-height: 1.6; }
@media (max-width: 920px) {
  .project-roadmap { grid-template-columns: 1fr; gap: 22px; }
  .project-roadmap__intro h3 { font-size: clamp(30px, 5vw, 40px); }
}
@media (max-width: 700px) {
  .project-roadmap { gap: 20px; margin-top: 48px; padding: 19px 15px; border-radius: 20px; }
  .project-roadmap__list { grid-template-columns: 1fr; gap: 8px; }
  .project-roadmap__step { padding: 13px 12px; }
  .project-roadmap__step p { font-size: 10px; }
  .project-roadmap__note { font-size: 9px; }
}
.specialties { display: grid; grid-template-columns: minmax(220px,.85fr) minmax(0,1.15fr); gap: clamp(32px, 7vw, 95px); margin-top: clamp(85px, 10vw, 140px); padding-top: 38px; border-top: 1px solid rgba(40,36,43,.18); }
.specialties__copy h3 { margin: 0; font: 700 clamp(32px, 4vw, 51px)/.94 var(--display); letter-spacing: -.055em; }
.specialties__copy h3 em { color: var(--violet); font-style: normal; font-weight: 500; }
.specialties__copy>p:last-child { max-width: 42ch; margin: 17px 0 0; color: #655d66; font-size: 11px; line-height: 1.65; }
.specialty-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 25px; margin: 0; padding: 0; list-style: none; }
.specialty-list li { display: grid; grid-template-columns: 27px 1fr; gap: 10px; padding: 14px 0; border-bottom: 1px solid rgba(40,36,43,.15); }
.specialty__number { color: var(--violet); font-size: 8px; font-weight: 700; }
.specialty-list h3 { margin: 0 0 4px; font: 700 14px/1.1 var(--display); }
.specialty-list p { margin: 0; color: #706771; font-size: 9px; line-height: 1.45; }
.questions { position: relative; padding: clamp(85px, 10vw, 140px) 0; background: var(--paper); }
.questions__shell { display: grid; grid-template-columns: minmax(240px,.8fr) minmax(0,1.2fr); gap: clamp(36px, 8vw, 110px); }
.questions__head h2 { font-size: clamp(40px, 5.7vw, 68px); }
.questions__head>p:last-child { max-width: 32ch; margin: 20px 0 0; color: #706771; font-size: 12px; line-height: 1.65; }
.question-list { border-top: 1px solid var(--line); }
.question { border-bottom: 1px solid var(--line); }
.question summary { display: flex; min-height: 66px; align-items: center; justify-content: space-between; gap: 20px; color: var(--ink); cursor: pointer; font: 600 14px/1.3 var(--display); list-style: none; }
.question summary span { flex: 0 0 auto; }
.question>p { max-width: 65ch; margin: 0; padding: 0 40px 22px 0; color: #655d66; font-size: 11px; line-height: 1.7; animation: detail-in .25s ease both; }
.contact { position: relative; isolation: isolate; overflow: hidden; padding: clamp(140px, 15vw, 185px) 0 clamp(90px, 11vw, 150px); background: var(--ink); color: var(--paper-light); }
.contact::before { position: absolute; z-index: 0; top: 0; left: -8%; width: 116%; height: 126px; border-radius: 0 0 50% 50% / 0 0 70% 70%; background: var(--paper); content: ""; }
.contact::after { position: absolute; z-index: 0; top: 4%; right: -4%; width: min(50vw, 650px); aspect-ratio: 1; border: 1px solid rgba(199,176,223,.19); border-radius: 48% 52% 38% 62% / 54% 44% 56% 46%; content: ""; transform: rotate(-24deg); }
.contact__shell { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,.9fr) minmax(320px,.8fr); gap: clamp(40px, 8vw, 120px); }
.contact .eyebrow { color: #c8bcc9; }
.contact h2 { color: var(--paper-light); font-size: clamp(49px, 7vw, 88px); }
.contact h2 em { color: var(--violet-light); }
.contact__copy>p:not(.eyebrow) { max-width: 48ch; margin: 20px 0 0; color: #d0c8d1; font-size: 13px; line-height: 1.65; }
.contact__copy .contact__disclaimer { margin-top: 23px; color: #aaa0ac; font-size: 10px; }
.contact__back { display: inline-flex; min-height: 44px; align-items: center; gap: 10px; margin-top: 25px; color: var(--violet-light); font-size: 10px; text-decoration: none; }
.inquiry-form { display: grid; align-content: start; gap: 11px; }
.inquiry-form>label, .prepared-summary>label { margin-top: 7px; color: #e5dce6; font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.inquiry-form select, .inquiry-form textarea, .prepared-summary textarea { width: 100%; padding: 14px; border: 1px solid rgba(241,232,220,.27); border-radius: 1px; background: rgba(241,232,220,.06); color: var(--paper-light); font-size: 12px; }
.inquiry-form select { min-height: 48px; }
.inquiry-form select option { color: var(--ink); }
.inquiry-form textarea { min-height: 128px; resize: vertical; }
.inquiry-form textarea::placeholder { color: #aaa0ac; }
.inquiry-form .button { width: fit-content; margin-top: 7px; }
.form-status { min-height: 18px; margin: 2px 0 0; color: var(--violet-light); font-size: 10px; }
.prepared-summary { display: grid; gap: 9px; margin-top: 8px; padding-top: 17px; border-top: 1px solid rgba(241,232,220,.2); }
.prepared-summary[hidden] { display: none; }
.prepared-summary textarea { color: var(--paper-light); }
.copy-button { width: fit-content; min-height: 38px; padding: 0; border: 0; background: transparent; color: var(--violet-light); cursor: pointer; font-size: 10px; font-weight: 700; }
.site-footer { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 15px 35px; padding: 30px clamp(22px, 5vw, 76px); background: #211d23; color: var(--paper-light); }
.site-footer .brand__name { color: var(--paper-light); }
.site-footer>p { margin: 0; color: #c6bec8; font-size: 10px; }
.site-footer .brand__country { color: #b3a8b5; }
.site-footer>a:not(.brand) { color: var(--violet-light); font-size: 10px; text-decoration: none; }
.site-footer small { grid-column: 1 / -1; color: #a79ea9; font-size: 9px; }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .72s cubic-bezier(.2,.65,.3,1), transform .85s cubic-bezier(.2,.65,.3,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.area:nth-child(even).is-visible .area__visual { animation: paper-turn .7s .12s cubic-bezier(.2,.65,.3,1) both; }
.area:nth-child(odd).is-visible .area__visual { animation: paper-turn-reverse .7s .12s cubic-bezier(.2,.65,.3,1) both; }
@keyframes map-draw { to { stroke-dashoffset: 0; } }
@keyframes star-breathe { 0%, 100% { opacity: .83; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes guide-float { 0%, 100% { transform: translateY(0) rotate(-.5deg); } 50% { transform: translateY(-7px) rotate(.5deg); } }
@keyframes guide-hello { 0%, 100% { transform: rotate(0); } 42% { transform: rotate(-5deg) translateY(-7px); } 72% { transform: rotate(2deg); } }
@keyframes detail-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes paper-turn { from { rotate: 0deg; } to { rotate: -1.2deg; } }
@keyframes paper-turn-reverse { from { rotate: 0deg; } to { rotate: 1deg; } }

@media (max-width: 920px) {
  .hero__inner { grid-template-columns: minmax(0,1fr) minmax(300px,.8fr); gap: 15px; }
  .hero h1 { font-size: clamp(58px, 6.8vw, 76px); }
  .area { grid-template-columns: 54px minmax(0,1fr) minmax(210px,.72fr); gap: 20px; }
  .area__visual { min-height: 205px; }
  .sample { padding-inline: 18px; }
  .sample-shop__name { font-size: 20px; }
}

@media (max-width: 700px) {
  .site-header { min-height: 65px; padding-inline: 20px; }
  .brand__name { font-size: 11px; }
  .menu-toggle { display: grid; width: 44px; height: 44px; align-content: center; justify-items: center; gap: 5px; border: 1px solid rgba(235,214,252,.4); border-radius: 50%; background: transparent; cursor: pointer; }
  .menu-toggle span:not(.visually-hidden) { width: 15px; height: 1px; background: #f7f0e8; }
  .site-nav { position: absolute; top: calc(100% - 1px); right: 0; left: 0; display: none; align-items: stretch; gap: 0; padding: 8px 20px 18px; border-bottom: 1px solid rgba(235,214,252,.3); background: #292332; }
  .site-nav.is-open { display: grid; }
  .site-nav a { display: flex; min-height: 48px; align-items: center; border-bottom: 1px solid rgba(40,36,43,.11); font-size: 13px; }
  .site-language { grid-column: 1 / -1; justify-content: flex-start; gap: 8px; padding: 8px 0 0; border-left: 0; }
  .site-language a { min-width: 42px; min-height: 38px; justify-content: center; border: 1px solid rgba(235,214,252,.3); }
  .hero__inner { width: min(100% - 40px, 560px); min-height: 0; grid-template-columns: 1fr; gap: 10px; padding: 48px 0 78px; }
  .hero::before { top: 42%; right: -48%; width: 90vw; }
  .hero::after { right: -9%; bottom: 4%; width: 48vw; height: 48vw; }
  .eyebrow { margin-bottom: 19px; font-size: 9px; }
  .hero h1 { max-width: 500px; font-size: clamp(34px, 10vw, 56px); }
  .hero__lead { max-width: 46ch; margin-top: 18px; font-size: 14px; }
  .hero__actions { flex-wrap: nowrap; align-items: center; gap: 8px; margin-top: 20px; }
  .hero__actions .button--primary { flex: 1; width: auto; min-width: 0; min-height: 48px; gap: 7px; padding-inline: 11px; font-size: 11px; white-space: nowrap; }
  .hero__actions .button--quiet { min-height: 48px; gap: 6px; padding-inline: 10px; font-size: 10px; white-space: nowrap; }
  .hero__note { margin-top: 14px; }
  .hero__desk { min-height: 385px; margin-top: 0; }
  .hero__gemini { object-position: center; transform: translateX(12%) scale(1.08); mask-image: linear-gradient(90deg, transparent 0%, #000 18%); }
  .hero__desk::before { inset: 3% -2% 2%; }
  .hero__core { top: 47%; left: 52%; width: 168px; gap: 7px; padding: 18px; }
  .hero__core-eyebrow { font-size: 7px; }
  .hero__core-title { font-size: 27px; }
  .hero-star { min-width: 70px; min-height: 48px; }
  .hero-star__glyph { width: 26px; height: 26px; font-size: 17px; }
  .hero-star__text { padding: 3px 6px; font-size: 8px; }
  .hero-person { bottom: 16%; left: 0; width: 139px; }
  .hero-person__help { right: -22px; bottom: -13px; font-size: 7px; }
  .hero__caption { right: 0; bottom: 0; font-size: 8px; }
  .hero__continue { bottom: 30px; left: 20px; }
  .hero__edge { height: 57px; }
  .section-shell { width: min(100% - 40px, 560px); }
  .capabilities { padding: 62px 0 82px; }
  .chapter-head { align-items: flex-end; gap: 16px; margin-bottom: 35px; }
  .chapter-head h2, .samples__intro h2, .approach__heading h2, .questions__head h2 { font-size: clamp(39px, 10vw, 58px); }
  .chapter-head__aside { display: block; min-width: 64px; }
  .chapter-head__count { display: block; margin-bottom: 6px; font-size: 42px; }
  .chapter-head__aside p { font-size: 9px; }
  .capability-index { margin-bottom: 32px; }
  .area { grid-template-columns: 43px minmax(0,1fr); gap: 12px; padding: 30px 0 32px; }
  .area__index span { font-size: 43px; }
  .area__index i { width: 15px; margin-top: 13px; }
  .area__overline { margin-bottom: 9px; font-size: 8px; }
  .area h3 { font-size: clamp(26px, 7vw, 36px); }
  .area__intro { margin: 11px 0 14px; font-size: 12px; }
  .area__tasks { gap: 6px 12px; }
  .area__tasks li { font-size: 9px; }
  .area__visual { grid-column: 2; min-height: 0; justify-items: start; margin-top: 10px; }
  .sample { width: min(100%, 360px); min-height: 175px; padding: 19px; }
  .sample-shop { min-height: 225px; }
  .sample__stamp { top: 16px; right: 14px; }
  .area__details { margin-top: 14px; }
  .area__details summary { min-height: 44px; font-size: 10px; }
  .area__detail-content { grid-template-columns: 1fr; gap: 13px; padding-top: 15px; }
  .area__detail-content p { font-size: 10px; }
  .capabilities__note { font-size: 10px; line-height: 1.55; }
  .capabilities__limit { font-size: 9px; }
  .samples { padding: 94px 0 78px; }
  .samples::before { top: -35px; height: 78px; }
  .approach::before { top: -35px; height: 78px; }
  .contact::before { height: 76px; }
  .samples__intro { grid-template-columns: 1fr; gap: 14px; margin-bottom: 42px; }
  .samples__intro .eyebrow { grid-column: auto; }
  .samples__intro>p:last-child { font-size: 11px; }
  .samples__wall { gap: 48px; }
  .samples__thread { display: none; }
  .sample-feature--large, .sample-feature--small { width: 100%; margin-left: 0; }
  .sample-feature__body, .sample-feature--small .sample-feature__body { grid-template-columns: 1fr; gap: 20px; }
  .sample-feature--small .sample-feature__copy, .sample-feature--small .sample { order: initial; }
  .sample-feature__copy h3 { font-size: 45px; }
  .sample-feature__copy>p:last-child { font-size: 10px; }
  .sample-shop--wall, .sample-ledger--wall { justify-self: start; width: min(94%, 410px); }
  .samples__pdf { margin-top: 40px; font-size: 10px; }
  .approach { padding: 112px 0 82px; }
  .approach__heading { grid-template-columns: 1fr; gap: 13px; margin-bottom: 38px; }
  .approach__heading .eyebrow { grid-column: auto; }
  .approach__heading>p:last-child { font-size: 11px; }
  .process-list { grid-template-columns: 1fr; gap: 0; }
  .process-list::before { top: 14px; bottom: 34px; left: 18px; width: 1px; height: auto; }
  .process-step { grid-template-columns: 37px 1fr; gap: 15px; padding: 0 0 26px; }
  .process-step h3 { margin: 2px 0 7px; font-size: 21px; }
  .process-step p { max-width: 42ch; font-size: 10px; }
  .specialties { grid-template-columns: 1fr; gap: 24px; margin-top: 55px; padding-top: 25px; }
  .specialties__copy h3 { font-size: 37px; }
  .specialties__copy>p:last-child { font-size: 10px; }
  .specialty-list { column-gap: 17px; }
  .specialty-list li { grid-template-columns: 20px 1fr; gap: 7px; padding: 12px 0; }
  .specialty-list h3 { font-size: 12px; }
  .specialty-list p { font-size: 8px; }
  .questions { padding: 75px 0; }
  .questions__shell { grid-template-columns: 1fr; gap: 30px; }
  .questions__head>p:last-child { margin-top: 12px; font-size: 11px; }
  .question summary { min-height: 60px; font-size: 12px; }
  .question>p { padding-bottom: 17px; font-size: 10px; }
  .contact { padding: 106px 0 76px; }
  .contact__shell { grid-template-columns: 1fr; gap: 30px; }
  .contact h2 { font-size: clamp(45px, 12vw, 68px); }
  .contact__copy>p:not(.eyebrow) { font-size: 11px; }
  .inquiry-form { gap: 9px; }
  .inquiry-form select, .inquiry-form textarea, .prepared-summary textarea { font-size: 16px; }
  .inquiry-form .button { width: 100%; }
  .site-footer { grid-template-columns: 1fr auto; gap: 13px; padding: 26px 20px; }
  .site-footer>p { grid-column: 1 / -1; grid-row: 2; }
  .site-footer>a:not(.brand) { grid-column: 2; grid-row: 1; font-size: 9px; }
  .site-footer small { font-size: 8px; }
}

@media (max-width: 370px) {
  .hero h1 { font-size: 52px; }
  .hero__actions { align-items: stretch; flex-direction: column; }
  .button--quiet { width: fit-content; }
  .specialty-list { grid-template-columns: 1fr; }
  .chapter-head__count { font-size: 34px; }
  .chapter-head__aside p { max-width: 57px; }
}

@media (max-width: 700px) {
  .star-intro__copy { width: calc(100% - 35px); margin-top: -65vh; }
  .star-intro__copy strong { font-size: clamp(37px, 10vw, 60px); }
  .star-intro__core small { font-size: 5px; }
  .star-intro__core strong { font-size: clamp(18px, 6vw, 26px); }
  .star-intro__controls { align-items: flex-end; }
  .star-intro__controls button { max-width: 48%; padding-inline: 11px; font-size: 10px; }
}

.scroll-world {
  position: relative;
  isolation: isolate;
  padding: clamp(76px, 10vw, 142px) 0 clamp(82px, 10vw, 138px);
  border-top: 1px solid rgba(40, 36, 43, .08);
  border-bottom: 1px solid rgba(40, 36, 43, .08);
  background: radial-gradient(ellipse at 82% 18%, rgba(199, 176, 223, .3), transparent 32rem), radial-gradient(ellipse at 5% 83%, rgba(189, 118, 91, .09), transparent 26rem), var(--paper-warm);
}

.scroll-world::before, .scroll-world::after { position: absolute; z-index: 0; pointer-events: none; content: ""; }
.scroll-world::before { inset: 0; opacity: .22; background-image: radial-gradient(rgba(40, 36, 43, .19) .65px, transparent .75px); background-size: 18px 18px; mask-image: linear-gradient(110deg, #000 0%, rgba(0, 0, 0, .65) 42%, transparent 88%); }
.scroll-world::after { top: 8%; right: 3%; width: min(36vw, 450px); aspect-ratio: 1; border: 1px solid rgba(121, 90, 160, .18); border-radius: 49% 51% 44% 56% / 56% 43% 57% 44%; box-shadow: 0 0 0 17px rgba(121, 90, 160, .035), 0 0 0 35px rgba(121, 90, 160, .055), inset 0 0 0 17px rgba(121, 90, 160, .025); animation: orbit-drift 34s ease-in-out infinite alternate; }
.scroll-world__shell { position: relative; z-index: 1; }
.scroll-world__head { max-width: 880px; margin: 0 0 clamp(34px, 5vw, 68px); }
.scroll-world__head h2 { max-width: 800px; margin: 0; color: var(--ink); font: 700 clamp(43px, 6.2vw, 78px)/.94 var(--display); letter-spacing: -.065em; }
.scroll-world__head h2 em { color: var(--violet); font-style: normal; font-weight: 500; }
.scroll-world__head > p:last-child { max-width: 60ch; margin: 20px 0 0; color: var(--ink-soft); font-size: 15px; line-height: 1.7; }
.scroll-world__sound { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 15px; margin-top: 22px; }
.scroll-world__sound-toggle { display: inline-flex; min-height: 43px; align-items: center; gap: 11px; padding: 0 14px; border: 1px solid rgba(40, 36, 43, .24); background: rgba(251, 244, 233, .72); color: var(--ink); cursor: pointer; font-size: 11px; font-weight: 700; transition: background .22s ease, border-color .22s ease, color .22s ease, transform .22s ease; }
.scroll-world__sound-toggle:hover { border-color: var(--violet); color: var(--violet); transform: translateY(-1px); }
.scroll-world__sound-toggle:focus-visible { outline: 2px solid var(--violet); outline-offset: 4px; }
.scroll-world__sound-toggle[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--paper-light); }
.scroll-world__sound-toggle:disabled { cursor: not-allowed; opacity: .65; }
.scroll-world__sound-icon { display: flex; width: 18px; height: 17px; align-items: center; justify-content: center; gap: 2px; }
.scroll-world__sound-icon i { display: block; width: 2px; height: 5px; border-radius: 2px; background: currentColor; opacity: .78; }
.scroll-world__sound-icon i:nth-child(2) { height: 10px; }
.scroll-world__sound-icon i:nth-child(3) { height: 7px; }
.scroll-world__sound-icon i:nth-child(4) { height: 4px; }
.scroll-world__sound-toggle[aria-pressed="true"] .scroll-world__sound-icon i { animation: sound-wave .9s ease-in-out infinite alternate; }
.scroll-world__sound-toggle[aria-pressed="true"] .scroll-world__sound-icon i:nth-child(2) { animation-delay: -.4s; }
.scroll-world__sound-toggle[aria-pressed="true"] .scroll-world__sound-icon i:nth-child(3) { animation-delay: -.65s; }
.scroll-world__sound-toggle[aria-pressed="true"] .scroll-world__sound-icon i:nth-child(4) { animation-delay: -.2s; }
.scroll-world__sound-copy { color: #665f67; font-size: 10px; line-height: 1.5; }

.scroll-world__layout { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(290px, .88fr); align-items: start; gap: clamp(28px, 5vw, 74px); }
.scroll-world__stage { position: sticky; z-index: 2; top: clamp(92px, 13vh, 126px); align-self: start; aspect-ratio: 16 / 9; margin: 0; overflow: hidden; border: 1px solid rgba(40, 36, 43, .12); background: #eee7de url("/assets/scroll-world-workbench-v1.webp") center / cover no-repeat; box-shadow: 0 30px 78px rgba(40, 36, 43, .16), 0 0 0 7px rgba(251, 244, 233, .35); }
.scroll-world__stage::before { position: absolute; z-index: 2; inset: 0; background: linear-gradient(108deg, transparent 33%, rgba(255, 250, 241, .22) 49%, transparent 65%); content: ""; pointer-events: none; transform: translate3d(-145%, 0, 0); animation: stage-light 13s ease-in-out infinite; }
.scroll-world__image { position: absolute; z-index: 0; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transform-origin: center; will-change: transform; }

.scroll-world__label { position: absolute; z-index: 2; bottom: clamp(12px, 2vw, 24px); left: clamp(12px, 2vw, 24px); display: grid; min-width: min(52%, 260px); gap: 9px; padding: 13px 15px 14px; border: 1px solid rgba(40, 36, 43, .12); background: rgba(251, 244, 233, .96); box-shadow: 0 8px 24px rgba(40, 36, 43, .12); }
.scroll-world__progress { display: block; width: 46px; height: 2px; overflow: hidden; background: rgba(121, 90, 160, .2); }
.scroll-world__progress i { display: block; width: var(--progress, 16.67%); height: 100%; background: var(--violet); transition: width .3s ease; }
.scroll-world__label p { display: grid; gap: 4px; margin: 0; }
.scroll-world__count { color: var(--violet); font-size: 9px; font-weight: 800; letter-spacing: .13em; }
.scroll-world__current { color: var(--ink); font: 700 16px/1.1 var(--display); letter-spacing: -.025em; }
.scroll-world__caption { position: absolute; z-index: 2; right: 10px; bottom: 10px; max-width: min(68%, 410px); padding: 7px 9px; background: rgba(40, 36, 43, .9); color: #fff8ee; font-size: 10px; line-height: 1.45; }

.scroll-world__chapters { min-width: 0; }
.scroll-world__chapter { display: grid; min-height: clamp(300px, 54svh, 500px); grid-template-columns: 36px minmax(0, 1fr); align-content: center; gap: 16px; padding: clamp(25px, 4vw, 46px) 0; border-top: 1px solid rgba(40, 36, 43, .2); scroll-margin-top: 120px; }
.scroll-world__chapter:last-child { border-bottom: 1px solid rgba(40, 36, 43, .2); }
.scroll-world__number { padding-top: 6px; color: #777078; font-size: 10px; font-weight: 700; letter-spacing: .08em; transition: color .25s ease, transform .25s ease; }
.scroll-world__chapter.is-current .scroll-world__number { color: var(--violet); transform: translateY(-2px); }
.scroll-world__chapter h3 { max-width: 13ch; margin: 0; color: var(--ink); font: 650 clamp(26px, 3.1vw, 40px)/1.04 var(--display); letter-spacing: -.045em; }
.scroll-world__chapter p { max-width: 42ch; margin: 15px 0 18px; color: var(--ink-soft); font-size: 14px; line-height: 1.68; }
.scroll-world__chapter a { display: inline-flex; min-height: 42px; align-items: center; gap: 8px; color: var(--violet); font-size: 11px; font-weight: 700; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.scroll-world__chapter a:focus-visible { outline: 2px solid var(--violet); outline-offset: 4px; }

@keyframes orbit-drift { from { transform: rotate(-12deg) translateY(-4px); } to { transform: rotate(8deg) translateY(8px); } }
@keyframes stage-light { 0%, 68% { transform: translate3d(-145%, 0, 0); } 84%, 100% { transform: translate3d(145%, 0, 0); } }
@keyframes sound-wave { from { transform: scaleY(.48); } to { transform: scaleY(1.18); } }

@media (max-width: 860px) {
  .site-nav { gap: clamp(12px, 2vw, 22px); }
  .site-nav a { font-size: 11px; }
  .scroll-world__layout { grid-template-columns: minmax(0, 1fr) minmax(265px, .9fr); gap: 24px; }
  .scroll-world__chapter { min-height: clamp(280px, 48svh, 430px); grid-template-columns: 28px minmax(0, 1fr); gap: 12px; }
  .scroll-world__chapter h3 { font-size: clamp(24px, 3.1vw, 31px); }
  .scroll-world__chapter p { font-size: 12px; }
}

@media (max-width: 650px) {
  .site-nav { gap: 16px; }
  .scroll-world::after { top: 4%; right: 1%; width: min(44vw, 190px); opacity: .56; }
  .scroll-world { padding: 76px 0 86px; }
  .scroll-world__head { margin-bottom: 28px; }
  .scroll-world__head h2 { font-size: clamp(42px, 12vw, 64px); }
  .scroll-world__head > p:last-child { margin-top: 15px; font-size: 13px; }
  .scroll-world__sound { align-items: flex-start; gap: 8px 12px; margin-top: 17px; }
  .scroll-world__sound-copy { max-width: 27ch; align-self: center; font-size: 9px; }
  .scroll-world__layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .scroll-world__stage { top: 72px; aspect-ratio: 16 / 8.6; box-shadow: 0 14px 34px rgba(40, 36, 43, .13); }
  .scroll-world__label { bottom: 8px; left: 8px; min-width: 0; max-width: 58%; gap: 5px; padding: 8px 10px; }
  .scroll-world__progress { width: 36px; }
  .scroll-world__label p { gap: 3px; }
  .scroll-world__count { font-size: 8px; }
  .scroll-world__current { font-size: 13px; }
  .scroll-world__caption { top: 6px; right: 6px; bottom: auto; max-width: 82%; padding: 6px 8px; font-size: 9px; }
  .scroll-world__chapter { min-height: clamp(270px, 48svh, 390px); grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 28px 0; scroll-margin-top: 230px; }
  .scroll-world__chapter h3 { max-width: 17ch; font-size: clamp(27px, 8vw, 36px); }
  .scroll-world__chapter p { margin: 12px 0; font-size: 13px; }
  .scroll-world__chapter a { min-height: 44px; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .star-intro { display: none !important; }
  .hero__gemini { display: none !important; }
  .hero--force-motion .hero__gemini { display: block !important; }
  .hero--force-motion.hero--sequence .hero__gemini { animation-duration: .67s !important; }
  .hero--force-motion.hero--sequence .hero__copy { animation-duration: .57s !important; }
  .hero--force-motion.hero--sequence .hero__core { animation-duration: .57s !important; }
  .hero--force-motion.hero--sequence .hero-person { animation-duration: .57s !important; }
  .hero--force-motion.hero--sequence .hero__caption { animation-duration: .33s !important; }
  .hero--force-motion.hero--sequence .hero-star { animation-duration: .8s !important; }
  .hero--force-motion.hero--sequence .hero__constellation { animation-duration: .53s !important; }
  .hero--force-motion.hero--sequence .hero__continue { animation-duration: .33s !important; }
  .hero--force-motion.hero--sequence .constellation-trail { animation-duration: 1.53s !important; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .scroll-world__image { will-change: auto; }
  .scroll-world::after { animation: none; }
  .scroll-world__stage::before { display: none; }
}

/* WIREFRAME MODE (Borrador/Siluetas) */
.wireframe-text {
  color: transparent !important;
  background-color: var(--ink-soft) !important;
  border-radius: 4px;
  display: inline;
  user-select: none;
  opacity: 0.2;
}
.wireframe-text::selection {
  background: transparent;
}
.wireframe-block {
  color: transparent !important;
  background-color: var(--ink-soft) !important;
  border-radius: 4px;
  display: block;
  user-select: none;
  opacity: 0.15;
}
.wireframe-img {
  filter: grayscale(100%) blur(10px) opacity(0.3) !important;
}
/* EFECTOS MAGNÉTICOS & MICROINTERACCIONES */
.button {
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s ease, background 0.3s ease !important;
}
.button:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 24px rgba(40, 36, 43, 0.15);
}
.area__visual .sample {
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease;
}
.area:hover .area__visual .sample {
  transform: translateY(-4px) rotate(1deg) scale(1.02);
  box-shadow: 0 12px 32px rgba(40, 36, 43, 0.12);
}
/* CELULAR Y RESPONSIVO */
@media (max-width: 768px) {
  .areas {
    display: grid;
    gap: 2rem;
  }
  .area {
    flex-direction: column;
    padding: 1rem;
  }
}



/* WIREFRAME MODE (Borrador/Siluetas) */
.wireframe-text {
  color: transparent !important;
  background-color: var(--ink-soft) !important;
  border-radius: 4px;
  display: inline;
  user-select: none;
  opacity: 0.2;
}
.wireframe-block {
  color: transparent !important;
  background-color: var(--ink-soft) !important;
  border-radius: 4px;
  display: block;
  user-select: none;
  opacity: 0.15;
}
.wireframe-img {
  filter: grayscale(100%) blur(10px) opacity(0.3) !important;
}
/* EFECTOS MAGNETICOS Y MICROINTERACCIONES */
.button {
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s ease, background 0.3s ease !important;
}
.button:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 24px rgba(40, 36, 43, 0.15);
}
.area__visual .sample {
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.5s ease !important;
}
.area:hover .area__visual .sample {
  transform: translateY(-8px) rotateX(4deg) rotateY(-4deg) scale(1.03) !important;
  box-shadow: 0 16px 40px rgba(40, 36, 43, 0.15) !important;
}

/* GSAP SCROLL WORLD FIXES */
.scroll-world__chapters {
  position: relative;
  height: 500px;
  overflow: hidden;
}
.scroll-world__chapter {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0; /* GSAP will control this */
}

/* DEEP WORK v2 -- 3D, Animaciones, Seguridad UI */

/* 3D Stage perspective en scroll-world */
.scroll-world__stage {
  transform-style: preserve-3d;
  transition: box-shadow 0.4s ease;
  cursor: crosshair;
}
.scroll-world__stage:hover {
  box-shadow: 0 40px 90px rgba(40, 36, 43, .22), 0 0 0 7px rgba(251, 244, 233, .35) !important;
}

/* 3D Chapters */
.scroll-world__chapter {
  position: absolute;
  top: 0; left: 0; right: 0;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
.scroll-world__chapter.is-current .scroll-world__number {
  color: var(--violet);
  text-shadow: 0 0 14px rgba(121, 90, 160, .45);
  transform: translateY(-2px) scale(1.1);
}

/* Fichas de area -- 3D physics */
.area__visual .sample {
  transform-style: preserve-3d;
  will-change: transform;
  cursor: crosshair;
}

/* Specialty list -- 3D depth */
.specialty-list li {
  transform-style: preserve-3d;
  will-change: transform;
  border-radius: 8px;
  padding: 12px 16px;
}

/* Process list -- slide-in via GSAP */
.process-step {
  will-change: opacity, transform;
}

/* Numero activo con glow */
.scroll-world__number {
  transition: color .3s ease, transform .4s cubic-bezier(.25,1,.5,1), text-shadow .4s ease;
}

/* Botones -- micro-interaccion magnetica refinada */
.button--primary {
  transition: transform 0.35s cubic-bezier(.25,1,.5,1), box-shadow 0.35s ease, background 0.3s ease !important;
}
.button--primary:hover {
  transform: translateY(-3px) scale(1.025);
  box-shadow: 0 10px 28px rgba(121, 90, 160, .28);
}
.button--primary:active {
  transform: translateY(0) scale(0.98);
  transition-duration: 0.1s;
}

/* Formulario -- accesibilidad visual de focus */
#need, #interest {
  border: 1.5px solid var(--line);
  border-radius: 6px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
#need:focus, #interest:focus {
  outline: none;
  border-color: var(--violet);
  box-shadow: 0 0 0 3px rgba(121, 90, 160, .18);
}

/* Wireframe mode refinado */
.wireframe-block {
  color: transparent !important;
  background: linear-gradient(90deg, rgba(71,65,74,.18) 0%, rgba(71,65,74,.12) 100%) !important;
  border-radius: 5px;
  display: block;
  user-select: none;
  pointer-events: none;
  min-height: 1em;
  min-width: 3ch;
}

/* Hero stars -- 3D depth */
.hero-star {
  transition: transform 0.4s cubic-bezier(.25,1,.5,1), opacity 0.3s ease;
  transform-style: preserve-3d;
}
.hero-star:hover {
  transform: translateZ(18px) scale(1.15);
}

/* Hero H1 -- GSAP reveal */
.hero h1 {
  will-change: opacity, transform;
}

/* FIX: Chapters absolute - contenedor necesita altura para que GSAP pinte */
.scroll-world__chapters {
  position: relative !important;
  min-height: clamp(320px, 58svh, 540px) !important;
  /* overflow: visible para que las chapters no se corten */
  overflow: visible !important;
}

/* Chapters 3D posicionados absolutamente -- visible para GSAP */
.scroll-world__chapter {
  position: absolute !important;
  top: 0; left: 0; right: 0;
  height: auto;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: opacity, transform;
}

/* Layout en movil: no pinear para no romper UX */
@media (max-width: 600px) {
  .scroll-world__chapter {
    position: relative !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   DEEP WORK v4 — Luxury Brand Cluster & Interactive Conversation
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. STAR INTRO BRAND BADGE (Animación de arriba) ── */
.star-intro__brand-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px 12px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 6px 16px;
  margin-bottom: 8px;
  border: 1px solid rgba(214, 185, 240, 0.35);
  border-radius: 999px;
  background: rgba(33, 29, 35, 0.72);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35), 0 0 16px rgba(199, 176, 223, 0.18);
  font-family: var(--display);
  letter-spacing: .12em;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: #f1e8dc;
}
.star-intro__sparkle {
  color: var(--violet-light);
  font-size: 11px;
  animation: sparkle-spin 6s linear infinite;
}
.star-intro__brand-name {
  color: #fff;
  letter-spacing: .14em;
}
.star-intro__sep {
  color: rgba(214, 185, 240, 0.4);
}
.star-intro__tag {
  color: #c7b0df;
  font-weight: 600;
}
.star-intro__dot-live {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.badge-pulse {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 10px #34d399;
  animation: pulse-ring 2s ease-out infinite;
}
.star-intro__geo {
  color: rgba(241, 232, 220, 0.65);
  font-size: 9px;
  font-weight: 500;
}

@keyframes sparkle-spin {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.15); }
  100% { transform: rotate(360deg) scale(1); }
}

@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.7); }
  70% { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

/* ── 2. BRAND CLUSTER (Header y Navegación) ── */
.brand-cluster {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.brand__symbol {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1.5px solid var(--violet);
  border-radius: 50%;
  color: var(--violet);
  font: 800 12px/1 var(--display);
  letter-spacing: -.02em;
  background: radial-gradient(circle, rgba(121, 90, 160, 0.12) 0%, transparent 70%);
  transition: transform 0.35s cubic-bezier(.25,1,.5,1), border-color 0.3s ease;
}
.brand:hover .brand__symbol {
  transform: rotate(-12deg) scale(1.08);
  border-color: var(--clay);
}
.brand__wordmark {
  display: grid;
  gap: 1px;
}
.brand__name {
  font: 800 13px/1.1 var(--display);
  letter-spacing: .12em;
  color: var(--ink);
}
.brand__country {
  font: 600 9px/1 var(--body);
  letter-spacing: .18em;
  color: var(--violet);
}

.header__meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(40, 36, 43, 0.05);
  border: 1px solid rgba(40, 36, 43, 0.08);
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--ink-soft);
}
.header__pulse {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  margin-right: 4px;
}
.header__badge-pill {
  padding: 2px 7px;
  background: rgba(121, 90, 160, 0.12);
  color: var(--violet);
  border-radius: 6px;
  font-weight: 700;
  font-size: 9px;
  text-transform: uppercase;
}
.header__location {
  color: #777078;
  font-size: 9px;
}

@media (max-width: 900px) {
  .header__meta { display: none; }
}

/* ── 3. FOOTER BRAND CLUSTER (Abajo del todo) ── */
.footer__brand-cluster {
  display: grid;
  gap: 8px;
}
.footer__brand-cluster .brand__name {
  color: var(--paper-light);
}
.footer__brand-cluster .brand__symbol {
  border-color: var(--violet-light);
  color: var(--violet-light);
}
.footer__badges {
  display: flex;
  align-items: center;
  gap: 8px;
}
.footer__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--violet-light);
  font-weight: 600;
}
.footer__badge--dim {
  color: #9c949e;
}
.footer__actions-col {
  display: grid;
  justify-items: end;
  gap: 6px;
}
.footer-pdf-btn {
  font-size: 11px;
}

/* ── 4. SECCIÓN CONTACTO / CONVERSACIÓN (FORMULARIO INTERACTIVO) ── */
.contact__orbit {
  position: absolute;
  top: 10%;
  right: 5%;
  width: 220px;
  height: 220px;
  pointer-events: none;
  opacity: 0.55;
  animation: orbit-float 24s linear infinite;
}
@keyframes orbit-float {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.inquiry-form {
  position: relative;
  background: rgba(251, 244, 233, 0.75);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(40, 36, 43, 0.12);
  border-radius: 16px;
  padding: clamp(24px, 4vw, 36px);
  box-shadow: 0 16px 48px rgba(40, 36, 43, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  display: grid;
  gap: 20px;
}

.form-block {
  display: grid;
  gap: 10px;
}
.form-label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font: 700 13px/1.3 var(--display);
  color: var(--ink);
  letter-spacing: -.01em;
}
.form-label__sub {
  font: 400 11px/1.4 var(--body);
  color: var(--ink-soft);
}
.form-label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.char-counter {
  font-size: 10px;
  font-weight: 700;
  color: #777078;
  letter-spacing: .08em;
}

/* Quick chips */
.quick-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
}
.quick-chip {
  appearance: none;
  border: 1px solid rgba(40, 36, 43, 0.14);
  background: rgba(255, 255, 255, 0.65);
  padding: 5px 12px;
  border-radius: 999px;
  font: 600 10px/1.2 var(--body);
  color: var(--ink-soft);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(.25,1,.5,1);
}
.quick-chip:hover {
  background: rgba(121, 90, 160, 0.1);
  border-color: var(--violet);
  color: var(--violet);
  transform: translateY(-1px);
}
.quick-chip.is-active {
  background: var(--violet);
  border-color: var(--violet);
  color: #fff;
  box-shadow: 0 4px 12px rgba(121, 90, 160, 0.32);
}

.form-select, .form-textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid rgba(40, 36, 43, 0.16);
  border-radius: 8px;
  background: #fff;
  font: 500 13px/1.5 var(--body);
  color: var(--ink);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-textarea {
  resize: vertical;
  min-height: 110px;
}
.form-select:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--violet);
  box-shadow: 0 0 0 3px rgba(121, 90, 160, 0.2);
}
.form-textarea.is-invalid {
  border-color: var(--clay) !important;
  animation: form-shake 0.4s ease-in-out;
}
@keyframes form-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  50% { transform: translateX(6px); }
  75% { transform: translateX(-3px); }
}

.form-security-note {
  font-size: 10px;
  color: #777078;
  line-height: 1.4;
}
.sec-badge {
  color: var(--violet);
  font-weight: 700;
}

/* Botón generar */
.button--generate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 24px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.01em;
}
.btn-sparkle {
  color: #ffd875;
  animation: sparkle-spin 4s linear infinite;
}
.btn-arrow {
  transition: transform 0.25s ease;
}
.button--generate:hover .btn-arrow {
  transform: translateY(2px);
}

/* Estados del formulario */
.form-status {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  min-height: 18px;
}
.form-status--error {
  color: #c53030;
}
.form-status--success {
  color: #0d9488;
}

/* ── 5. TARJETA DE RESUMEN ELEVADA (Summary Card) ── */
.summary-card {
  display: grid;
  gap: 14px;
  padding: 20px;
  border-radius: 12px;
  background: linear-gradient(135deg, #242027 0%, #1a161c 100%);
  border: 1px solid rgba(199, 176, 223, 0.25);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.22);
  color: var(--paper-light);
  animation: card-reveal 0.45s cubic-bezier(.25,1,.5,1);
}
@keyframes card-reveal {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.summary-card__head {
  display: grid;
  gap: 4px;
}
.summary-card__title-group {
  display: flex;
  align-items: center;
  gap: 10px;
}
.summary-card__badge {
  padding: 3px 8px;
  background: #10b981;
  color: #fff;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
}
.summary-card__head strong {
  font: 700 13px/1.2 var(--display);
  color: #fff;
}
.summary-card__hint {
  color: #b0a7b3;
  font-size: 11px;
}
.summary-card__output {
  width: 100%;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 12px;
  color: #fbf4e9;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  line-height: 1.5;
  resize: vertical;
}
.summary-card__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.button--copy {
  flex: 1;
  min-width: 170px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--violet);
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.25s ease;
}
.button--copy:hover {
  background: #8b68b5;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(121, 90, 160, 0.4);
}
.button--copy.is-copied {
  background: #10b981 !important;
}

.button--wa {
  flex: 1;
  min-width: 170px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #25d366;
  color: #0b3d1b;
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 12px;
  text-decoration: none;
  transition: all 0.25s ease;
}
.button--wa:hover {
  background: #34e077;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(37, 211, 102, 0.35);
}

/* ═══════════════════════════════════════════════════════════════
   DEEP WORK v5 — Top Progress Bar & Interactive Spotlight Glow
   ═══════════════════════════════════════════════════════════════ */

/* Barra de progreso superior ultra-fina */
.top-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 1000;
  pointer-events: none;
  background: transparent;
}
.top-progress__bar {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--violet) 0%, var(--clay) 50%, #ffd875 100%);
  box-shadow: 0 0 10px rgba(121, 90, 160, 0.65);
  transition: width 0.08s linear;
}

/* Efecto Spotlight interactivo */
.area, .sample, .inquiry-form {
  position: relative;
  background-image: radial-gradient(
    circle 380px at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(199, 176, 223, 0.12),
    transparent 70%
  );
}

/* Constelación del Hero — resplandor celestial */
.constellation-trail {
  stroke: var(--violet);
  stroke-dasharray: 6 3;
  animation: constellation-shimmer 20s linear infinite;
}
.constellation-trail--inner {
  stroke: rgba(189, 118, 91, 0.6);
  stroke-dasharray: 4 4;
  animation: constellation-shimmer 15s linear infinite reverse;
}
@keyframes constellation-shimmer {
  to { stroke-dashoffset: 120; }
}

/* Hero Person Guide — pulso y feedback táctil */
.hero-person {
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(.25,1,.5,1);
}
.hero-person:hover {
  transform: translateY(-4px) scale(1.02);
}
.hero-person.is-active {
  animation: person-pop 0.4s cubic-bezier(.25,1,.5,1);
}
@keyframes person-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.06) rotate(-2deg); }
  100% { transform: scale(1); }
}

/* Hero stars: halo luminoso al pasar el cursor */
.hero-star:hover .hero-star__glyph {
  transform: scale(1.3) rotate(35deg);
  color: #ffd875;
  text-shadow: 0 0 12px #ffd875;
}

/* ═══════════════════════════════════════════════════════════════
   DEEP WORK v6 — SMARTPHONE OS SIMULATOR (Lockscreen, Apps, Wallpapers, Keyboard)
   ═══════════════════════════════════════════════════════════════ */

.phone-showcase {
  margin: clamp(40px, 6vw, 70px) 0;
  display: grid;
  gap: 32px;
  justify-items: center;
}
.phone-showcase__header {
  text-align: center;
  max-width: 650px;
  display: grid;
  gap: 12px;
  justify-items: center;
}
.phone-showcase__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  border-radius: 999px;
  background: rgba(121, 90, 160, 0.12);
  border: 1px solid rgba(121, 90, 160, 0.25);
  color: var(--violet);
  font: 700 10px/1 var(--display);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.phone-showcase__header h3 {
  margin: 0;
  font: 700 clamp(28px, 4.5vw, 46px)/1.05 var(--display);
  letter-spacing: -.03em;
  color: var(--ink);
}
.phone-showcase__header p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.6;
}

/* ── Chasis del Smartphone ── */
.phone-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
}
.phone-power-btn {
  position: absolute;
  right: -8px;
  top: 130px;
  width: 5px;
  height: 52px;
  background: #332d38;
  border: none;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  transition: transform 0.1s ease;
  z-index: 10;
}
.phone-power-btn:hover {
  background: var(--violet);
}
.phone-power-btn:active {
  transform: translateX(-2px);
}

.phone-device {
  position: relative;
  width: min(100vw - 32px, 350px);
  height: 690px;
  border-radius: 46px;
  background: #141118;
  border: 10px solid #231f29;
  outline: 2px solid rgba(255, 255, 255, 0.12);
  box-shadow: 
    0 30px 80px rgba(20, 17, 24, 0.45),
    0 0 45px rgba(121, 90, 160, 0.22),
    inset 0 0 0 2px rgba(0, 0, 0, 0.8);
  overflow: hidden;
  user-select: none;
  transition: background 0.6s ease;
}

/* ── Fondos de Pantalla Dinámicos (Wallpapers) ── */
.phone-device[data-wallpaper="cosmic"] {
  background: 
    radial-gradient(circle at 80% 20%, rgba(199, 176, 223, 0.35) 0%, transparent 45%),
    radial-gradient(circle at 20% 80%, rgba(121, 90, 160, 0.45) 0%, transparent 50%),
    linear-gradient(160deg, #181224 0%, #2b1f3d 50%, #150f21 100%);
}
.phone-device[data-wallpaper="emerald"] {
  background: 
    radial-gradient(circle at 80% 20%, rgba(52, 211, 153, 0.28) 0%, transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(16, 185, 129, 0.38) 0%, transparent 55%),
    linear-gradient(160deg, #092318 0%, #133928 50%, #06160f 100%);
}
.phone-device[data-wallpaper="sunset"] {
  background: 
    radial-gradient(circle at 75% 25%, rgba(251, 146, 60, 0.4) 0%, transparent 50%),
    radial-gradient(circle at 25% 75%, rgba(189, 118, 91, 0.45) 0%, transparent 55%),
    linear-gradient(160deg, #381912 0%, #52261a 50%, #240e0a 100%);
}
.phone-device[data-wallpaper="obsidian"] {
  background: 
    radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.08) 0%, transparent 60%),
    linear-gradient(180deg, #111013 0%, #0a090b 100%);
}

/* Dynamic Island */
.phone-notch {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 26px;
  background: #000;
  border-radius: 20px;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
}
.phone-notch__camera {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #14142b;
  border: 1px solid #282846;
}
.phone-notch__speaker {
  width: 40px;
  height: 4px;
  border-radius: 4px;
  background: #1a1a24;
}

/* Status Bar */
.phone-status-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 44px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 22px 6px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  z-index: 90;
  pointer-events: none;
}
.status-icons {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
}

/* ══════════════════════════════════════
   PANTALLA DE BLOQUEO (LOCKSCREEN)
   ══════════════════════════════════════ */
.phone-lockscreen {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 58px 18px 20px;
  color: #fff;
  background: inherit;
  transition: transform 0.55s cubic-bezier(0.2, 0.9, 0.3, 1), opacity 0.4s ease;
}
.phone-lockscreen.is-unlocked {
  transform: translateY(-102%);
  opacity: 0;
  pointer-events: none;
}

.lock-header {
  text-align: center;
  display: grid;
  gap: 2px;
}
.lock-icon {
  font-size: 16px;
  margin-bottom: 4px;
  opacity: 0.85;
}
.lock-date {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: .02em;
}
.lock-clock {
  margin: 0;
  font: 700 56px/1 var(--display);
  letter-spacing: -.04em;
  color: #fff;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}

/* Notificaciones Lockscreen */
.lock-notifications {
  display: grid;
  gap: 8px;
  margin-top: auto;
  margin-bottom: 24px;
}
.lock-notif {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
.notif-icon {
  font-size: 18px;
}
.notif-content {
  flex: 1;
  display: grid;
  gap: 2px;
}
.notif-head {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
}
.notif-head strong { color: #fff; }
.notif-head span { color: rgba(255, 255, 255, 0.6); font-size: 9px; }
.notif-content p {
  margin: 0;
  font-size: 10px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.85);
}

/* Botones inferiores lockscreen */
.lock-footer {
  display: grid;
  gap: 14px;
}
.lock-quick-buttons {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
}
.quick-circle-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 15px;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.unlock-bar {
  appearance: none;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 11px 16px;
  border-radius: 999px;
  color: #fff;
  font: 600 11px/1 var(--body);
  text-align: center;
  cursor: pointer;
  transition: all 0.25s ease;
}
.unlock-bar:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}
.unlock-shimmer {
  display: inline-block;
  animation: shimmer-text 2.2s infinite;
}
@keyframes shimmer-text {
  0% { opacity: 0.7; }
  50% { opacity: 1; text-shadow: 0 0 8px #fff; }
  100% { opacity: 0.7; }
}

/* ══════════════════════════════════════
   PANTALLA PRINCIPAL (HOMESCREEN)
   ══════════════════════════════════════ */
.phone-homescreen {
  position: absolute;
  inset: 0;
  padding: 50px 14px 26px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
.phone-homescreen::-webkit-scrollbar { display: none; }

/* Widgets */
.phone-widgets {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}
.widget {
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  padding: 10px 12px;
  color: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
}
.widget--weather {
  display: grid;
  gap: 4px;
}
.widget-weather__main {
  display: flex;
  align-items: center;
  gap: 10px;
}
.weather-icon { font-size: 24px; }
.weather-temp { font: 700 20px/1 var(--display); color: #fff; }
.weather-city { display: block; font-size: 10px; opacity: 0.8; }
.weather-desc { margin: 0; font-size: 10px; opacity: 0.85; }

/* Selector Fondos */
.widget-wp__head {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  margin-bottom: 6px;
  opacity: 0.9;
}
.wp-swatches {
  display: flex;
  gap: 8px;
}
.wp-swatch {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.2s, border-color 0.2s;
}
.wp-swatch:hover { transform: scale(1.15); }
.wp-swatch.is-active {
  border-color: #fff;
  box-shadow: 0 0 10px #fff;
  transform: scale(1.12);
}
.wp-swatch--cosmic   { background: linear-gradient(135deg, #795aa0, #28242b); }
.wp-swatch--emerald  { background: linear-gradient(135deg, #10b981, #064e3b); }
.wp-swatch--sunset   { background: linear-gradient(135deg, #f97316, #7c2d12); }
.wp-swatch--obsidian { background: linear-gradient(135deg, #374151, #111827); }

/* Widget Tareas */
.widget-tasks__head {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 700;
  margin-bottom: 6px;
}
.widget-tasks__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}
.task-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  cursor: pointer;
}
.task-chk {
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(0, 0, 0, 0.2);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.task-chk:checked {
  background: #10b981;
  border-color: #10b981;
}
.task-chk:checked::after {
  content: "✓";
  color: #fff;
  font-size: 10px;
  font-weight: 800;
}
.task-chk:checked + span {
  text-decoration: line-through;
  opacity: 0.6;
}

/* Buscador de Apps */
.phone-search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  margin-bottom: 14px;
  cursor: pointer;
}
.search-icon { font-size: 12px; }
.search-input {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 11px;
  width: 100%;
  outline: none;
  cursor: pointer;
}
.search-input::placeholder { color: rgba(255, 255, 255, 0.65); }

/* Cuadrícula de Apps (Apps Grid) */
.apps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px 8px;
  margin-bottom: 16px;
}
.app-icon {
  background: transparent;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  position: relative;
  padding: 0;
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.app-icon:hover { transform: translateY(-3px) scale(1.05); }
.app-icon:active { transform: scale(0.92); }

.app-icon__box {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 24px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.app-icon--shop      { background: linear-gradient(135deg, #f59e0b, #d97706); }
.app-icon--finance   { background: linear-gradient(135deg, #10b981, #059669); }
.app-icon--docs      { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.app-icon--web       { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.app-icon--marketing { background: linear-gradient(135deg, #ec4899, #be185d); }
.app-icon--ops       { background: linear-gradient(135deg, #64748b, #334155); }
.app-icon--notes     { background: linear-gradient(135deg, #eab308, #ca8a04); }
.app-icon--chat      { background: linear-gradient(135deg, #06b6d4, #0891b2); }

.app-icon__label {
  font-size: 10px;
  font-weight: 500;
  color: #fff;
  letter-spacing: -.01em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
}
.app-badge {
  position: absolute;
  top: -3px;
  right: 6px;
  padding: 1px 5px;
  background: #ef4444;
  color: #fff;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 800;
}

/* Dock Inferior */
.phone-dock {
  margin-top: auto;
  display: flex;
  justify-content: space-around;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 24px;
}
.dock-app {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: transform 0.2s;
}
.dock-app:hover { transform: scale(1.12); }
.dock-app .app-icon__box { width: 44px; height: 44px; font-size: 22px; }

/* ══════════════════════════════════════
   VENTANA DE APLICACIÓN (APP MODAL)
   ══════════════════════════════════════ */
.phone-app-window {
  position: absolute;
  inset: 0;
  z-index: 60;
  background: #18151c;
  color: #f1e8dc;
  display: flex;
  flex-direction: column;
  padding-top: 44px;
  animation: app-open 0.35s cubic-bezier(0.2, 0.9, 0.3, 1);
}
@keyframes app-open {
  from { transform: scale(0.92); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.app-window__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(30, 26, 35, 0.85);
  backdrop-filter: blur(10px);
}
.app-back-btn, .app-close-btn {
  background: transparent;
  border: none;
  color: var(--violet-light);
  font: 700 13px/1 var(--body);
  cursor: pointer;
  padding: 4px;
}
.app-window__title {
  font: 700 13px/1 var(--display);
  color: #fff;
}
.app-window__body {
  flex: 1;
  padding: 14px;
  overflow-y: auto;
  font-size: 12px;
}

/* Contenidos Mock de Apps */
.mock-product-card {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.mock-product-img { font-size: 32px; text-align: center; margin-bottom: 6px; }
.mock-product-card h4 { margin: 0 0 6px; color: #fff; font-size: 14px; }
.mock-product-card p { margin: 0 0 10px; font-size: 11px; opacity: 0.85; }
.mock-price-row { display: flex; justify-content: space-between; align-items: center; }
.mock-price { color: #ffd875; font-weight: 700; font-size: 13px; }
.mock-buy-btn {
  background: #25d366;
  color: #0b3d1b;
  border: none;
  padding: 6px 10px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 10px;
  cursor: pointer;
}
.mock-badge-pill {
  margin-top: 10px;
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  font-size: 10px;
  text-align: center;
}

.mock-metric-grid { display: flex; gap: 8px; margin-bottom: 8px; }
.mock-metric {
  flex: 1;
  background: rgba(255, 255, 255, 0.08);
  padding: 8px;
  border-radius: 8px;
  display: grid;
  gap: 2px;
}
.mock-metric span { font-size: 9px; opacity: 0.7; }
.mock-metric strong { font-size: 16px; color: #34d399; }
.mock-table-preview {
  margin-top: 10px;
  display: grid;
  gap: 4px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  padding: 6px;
}
.mock-row { display: flex; justify-content: space-between; font-size: 10px; padding: 4px 6px; }
.mock-row.head { font-weight: 700; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.mock-row .ok { color: #34d399; }
.mock-row .pend { color: #f59e0b; }

.mock-folder-list { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 6px; font-size: 11px; }

.mock-browser-frame {
  background: #000;
  border-radius: 8px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.mock-url-bar {
  background: rgba(255, 255, 255, 0.15);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 9px;
  margin-bottom: 8px;
  text-align: center;
}
.mock-site-hero h5 { margin: 0 0 4px; font-size: 13px; color: #fff; }
.mock-site-hero p { margin: 0; font-size: 10px; opacity: 0.8; }

.mock-post-card {
  background: rgba(236, 72, 153, 0.12);
  border: 1px solid rgba(236, 72, 153, 0.3);
  border-radius: 10px;
  padding: 10px;
}
.post-tag { color: #f472b6; font-size: 9px; font-weight: 700; text-transform: uppercase; }

.mock-flow-steps { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: 11px; }

.mock-notes-input {
  width: 100%;
  height: 120px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 8px;
  color: #fff;
  font-size: 12px;
  resize: none;
}

.mock-chat-bubble {
  max-width: 80%;
  padding: 8px 12px;
  border-radius: 12px;
  margin-bottom: 8px;
  font-size: 11px;
}
.mock-chat-bubble--in { background: rgba(255, 255, 255, 0.15); align-self: flex-start; }
.mock-chat-bubble--out { background: var(--violet); color: #fff; margin-left: auto; }

/* ══════════════════════════════════════
   TECLADO VIRTUAL TÁCTIL (KEYBOARD)
   ══════════════════════════════════════ */
.phone-keyboard {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(25, 21, 30, 0.95);
  backdrop-filter: blur(25px);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding: 6px 4px 18px;
  z-index: 80;
  animation: kb-slide 0.28s cubic-bezier(0.2, 0.9, 0.3, 1);
}
@keyframes kb-slide {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.keyboard-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 8px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 6px;
}
.keyboard-preview {
  font-size: 11px;
  color: #fff;
  opacity: 0.9;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.keyboard-close {
  background: transparent;
  border: none;
  color: var(--violet-light);
  font: 700 11px/1 var(--body);
  cursor: pointer;
}

.keyboard-keys {
  display: grid;
  gap: 6px;
}
.keyboard-row {
  display: flex;
  justify-content: center;
  gap: 4px;
}
.key {
  appearance: none;
  flex: 1;
  max-width: 32px;
  height: 38px;
  background: rgba(255, 255, 255, 0.18);
  border: none;
  border-radius: 6px;
  color: #fff;
  font: 600 13px/1 var(--body);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
  transition: transform 0.08s, background 0.08s;
}
.key:active {
  transform: scale(0.92);
  background: rgba(255, 255, 255, 0.35);
}
.key--special, .key--del, .key--num {
  background: rgba(255, 255, 255, 0.1);
  font-size: 12px;
}
.key--del { max-width: 38px; }
.key--space {
  max-width: 140px;
  font-size: 11px;
}
.key--enter {
  max-width: 50px;
  background: var(--violet);
  font-size: 11px;
}

/* Home Indicator Bar */
.phone-home-bar {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 5px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 10px;
  z-index: 95;
  cursor: pointer;
  transition: background 0.2s;
}
.phone-home-bar:hover {
  background: #fff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
}


/* ── Control de Ambiente Sonoro Generativo (Web Audio API) ── */
.soundscape-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--wn-color-ink-soft);
  background: rgba(251, 244, 233, 0.7);
  border: 1px solid var(--wn-line-subtle);
  border-radius: var(--wn-radius-pill);
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all var(--wn-trans-fast);
  user-select: none;
}
.soundscape-toggle:hover {
  background: var(--wn-color-paper-light);
  color: var(--wn-color-ink);
  border-color: rgba(40, 36, 43, 0.28);
  transform: translateY(-1px);
}
.soundscape-toggle[aria-pressed="true"] {
  background: rgba(15, 118, 110, 0.12);
  color: var(--wn-color-emerald);
  border-color: rgba(15, 118, 110, 0.35);
}
.soundscape-bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  width: 13px;
  height: 12px;
}
.soundscape-bars span {
  width: 2.5px;
  height: 3px;
  background-color: currentColor;
  border-radius: 1px;
  transition: height 0.2s ease;
}
.soundscape-toggle[aria-pressed="true"] .soundscape-bars span:nth-child(1) {
  animation: wnAudioWave 0.8s ease-in-out infinite alternate;
}
.soundscape-toggle[aria-pressed="true"] .soundscape-bars span:nth-child(2) {
  animation: wnAudioWave 1.1s ease-in-out 0.2s infinite alternate;
}
.soundscape-toggle[aria-pressed="true"] .soundscape-bars span:nth-child(3) {
  animation: wnAudioWave 0.9s ease-in-out 0.4s infinite alternate;
}
@keyframes wnAudioWave {
  0% { height: 3px; }
  100% { height: 12px; }
}

/* copy-visibility.css */
/* Copy on the dark demo section must remain readable without motion. */
.samples .phone-showcase__header h3 {
  color: #fbf4e9;
  max-width: 18ch;
  text-wrap: balance;
}

.samples .phone-showcase__header h3 span {
  display: block;
}

.samples .phone-showcase__header > p {
  color: #d0c8d1;
  max-width: 62ch;
}

.samples .phone-showcase__badge {
  color: #d3b4ef;
}

.samples .sample-shop__name {
  color: #28242b;
}

@media (prefers-reduced-motion: no-preference) {
  .phone-showcase.is-visible .phone-showcase__header h3 span {
    animation: demo-copy-rise 650ms cubic-bezier(.2,.75,.25,1) both;
  }

  .phone-showcase.is-visible .phone-showcase__header h3 span + span {
    animation-delay: 130ms;
  }

  .phone-showcase.is-visible .phone-showcase__header > p {
    animation: demo-copy-rise 650ms cubic-bezier(.2,.75,.25,1) 230ms both;
  }

  @keyframes demo-copy-rise {
    from { transform: translateY(.3em); filter: blur(3px); }
    to { transform: translateY(0); filter: blur(0); }
  }
}

/* device-stage.css */
/* Dispositivo protagonista: capa entre los fondos y el contenido real. */
/* El display:flex del simulador no debe anular su atributo nativo hidden. */
#phone-showcase [hidden] { display:none!important; }
.device-stage-active main section > .section-shell,
.device-stage-active .hero__inner,
.device-stage-active .site-footer { position: relative; z-index: 5; }
.ds-stage { position: fixed; inset: 0; z-index: 4; pointer-events: none; perspective: 1600px; opacity: 0; visibility: hidden; transition: opacity .45s; }
.ds-stage.ds-visible { opacity: 1; visibility: visible; }
.ds-laptop-motion,.ds-phone-motion { position: absolute; left: 0; top: 0; transform-origin: 50% 50%; backface-visibility: hidden; }
.ds-laptop-motion { width: 560px; height: 385px; aspect-ratio: 560 / 385; }
.ds-laptop-motion::before { content:"";position:absolute;left:13%;right:13%;bottom:1%;height:18px;border-radius:50%;background:rgba(15,12,25,.3);filter:blur(12px);transform:translateY(12px) scaleX(.86); }
.ds-laptop-motion::after { content:"";position:absolute;inset:2% -4% 10%;z-index:-1;border:1px solid rgba(206,175,230,.13);border-radius:48%;transform:rotate(-4deg) rotateY(4deg);box-shadow:0 0 30px rgba(167,124,202,.08); }
.ds-laptop-tilt,.ds-laptop-idle { width: 100%; height: 100%; transform-style: preserve-3d; }
.ds-laptop-idle { animation: ds-float 6s ease-in-out infinite; }
.ds-stage.is-contact .ds-laptop-idle { animation: none; }
@keyframes ds-float { 50% { transform: translateY(-6px); } }
.ds-laptop { width: 100%; height: 100%; filter: drop-shadow(0 24px 26px rgba(15,12,25,.3)); }
.ds-laptop { position: relative; }
.ds-lid { position: absolute; inset: 0 0 9%; width: 100%; height: auto; padding: 9px; border: 2px solid #a7a0ae; border-radius: 17px 17px 8px 8px; background: linear-gradient(125deg,#484353,#17151c 75%); box-shadow: inset 0 1px 1px #ddd5e2,0 0 0 1px rgba(255,255,255,.18); }
.ds-lid::after { position:absolute;top:3px;left:50%;width:3px;height:3px;border-radius:50%;background:#716c78;box-shadow:0 0 0 1px rgba(8,7,12,.75);content:"";transform:translateX(-50%); }
.ds-screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 9px 9px 3px 3px; background: #201d2a; color: #faf4ec; }
.ds-browser-chrome { height: 27px; display: flex; align-items: center; gap: 5px; padding: 0 10px; background: #302c3b; font: 9px/1 system-ui,sans-serif; letter-spacing: .08em; color: #cbc4d2; text-transform: uppercase; }
.ds-browser-chrome i { width: 6px; height: 6px; border-radius: 50%; background: #b9adc3; }
.ds-browser-chrome i:first-child { background: #d48983; }
.ds-browser-chrome i:nth-child(2) { background: #d8c284; }
.ds-browser-chrome i:nth-child(3) { background: #8abfa6; margin-right: 8px; }
.ds-laptop-base { position:absolute;right:-2%;bottom:0;left:-2%;height:9%;margin:0;background:linear-gradient(180deg,#d9d1dc 0,#9b95a1 15%,#615d69 47%,#302e36 88%,#201f25 100%);border-radius:2px 2px 50% 50%/2px 2px 15px 15px;box-shadow:0 8px 18px rgba(0,0,0,.24); }
.ds-laptop-base::before { position:absolute;top:14%;right:9%;left:9%;height:1px;border-radius:0 0 8px 8px;background:linear-gradient(90deg,transparent,#68636e 12%,#77717d 50%,#68636e 88%,transparent);content:""; }
.ds-laptop-base::after { position:absolute;top:27%;left:42%;width:16%;height:48%;border:1px solid rgba(33,31,38,.42);border-radius:0 0 8px 8px;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(15,14,18,.12));box-shadow:inset 0 1px rgba(255,255,255,.15);content:""; }
.ds-screen-shine { position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(115deg,transparent 24%,rgba(255,255,255,.045) 43%,transparent 60%); }
.ds-boot-flash { position:absolute;inset:27px 0 0;z-index:3;background:#f9ecff;opacity:0;pointer-events:none; }
.ds-panel { position:absolute;inset:27px 0 0;padding:27px 32px;opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s; }
.ds-panel.is-current { opacity:1;visibility:visible; }
.ds-screen-kicker { display:block;color:#c5abd9;font:700 10px/1.4 system-ui,sans-serif;letter-spacing:.17em;margin-bottom:25px; }
.ds-panel--listen { padding-right:180px;background:radial-gradient(circle at 80% 70%,#6f527b 0,transparent 50%),#211c2d; }
.ds-panel--listen strong { display:block;font:700 35px/1.05 system-ui,sans-serif;letter-spacing:-.05em; }
.ds-panel--listen small { display:block;max-width:230px;margin-top:22px;color:#ded3e6;font:13px/1.4 system-ui,sans-serif; }
.ds-panel--code { background:#171820; }
.ds-code { display:grid;gap:13px;font:16px/1.2 ui-monospace,Consolas,monospace;color:#bfe6d5; }
.ds-code b { color:#d5b8f0; }
.ds-code span { border-left:2px solid #665579;padding-left:12px; }
.ds-panel--ui,.ds-panel--responsive { padding:0;background:#efe8df;color:#29252d; }
.ds-mini-web { height:100%;background:linear-gradient(125deg,#f5ede4,#e6d9e6);color:#27232d;font-family:system-ui,sans-serif; }
.ds-mini-web nav { height:40px;padding:12px 22px;border-bottom:1px solid #d2c6cf;font-size:10px;font-weight:800;letter-spacing:.15em; }
.ds-mini-web nav span { float:right;font-size:8px;letter-spacing:.05em;font-weight:500; }
.ds-mini-web > div { padding:30px 30px 18px; }
.ds-mini-web small { display:block;color:#795aa0;font-size:9px;font-weight:800;letter-spacing:.15em;margin-bottom:14px; }
.ds-mini-web strong { display:block;font-size:32px;line-height:1.02;letter-spacing:-.05em;max-width:370px; }
.ds-mini-button { display:inline-block;margin-top:18px;padding:8px 14px;border-radius:100px;background:#795aa0;color:white;font-size:10px;font-weight:700; }
.ds-mini-web aside { display:flex;gap:8px;margin:0 30px; }
.ds-mini-web aside i { width:85px;height:28px;border-radius:5px;background:#d8c7d8; }
.ds-stats { display:flex;gap:12px; }
.ds-stats div { flex:1;min-height:110px;padding:16px 12px;border:1px solid #584c61;border-radius:10px;color:#f8f0e8;font:12px/1.4 system-ui,sans-serif;background:#373041; }
.ds-stats b { display:block;font-size:26px;color:#d7bae9;margin-bottom:14px; }
.ds-panel--finance,.ds-panel--files,.ds-panel--workflow,.ds-panel--content { background:linear-gradient(130deg,#272331,#17151d); }
.ds-finance,.ds-files { display:grid;gap:9px; }
.ds-finance > div { display:grid;grid-template-columns:1fr 1fr 24px;align-items:center;gap:8px;padding:13px 15px;border:1px solid rgba(211,187,228,.18);border-radius:9px;background:rgba(255,255,255,.055);color:#f6f0f7;font:12px/1.2 system-ui,sans-serif; }
.ds-finance b { color:#d9c2e8;font-size:11px;font-weight:650; }
.ds-finance i { color:#c9e4d5;font-style:normal;text-align:center; }
.ds-files > div { display:flex;align-items:center;gap:12px;padding:10px 13px;border:1px solid rgba(211,187,228,.18);border-radius:9px;background:rgba(255,255,255,.055);color:#f6f0f7;font:12px/1.2 system-ui,sans-serif; }
.ds-files > div > b { display:grid;width:29px;height:34px;place-items:center;border:1px solid #ae91c4;border-radius:5px;color:#d9c2e8;font:700 11px/1 system-ui,sans-serif; }
.ds-files > div > span { flex:1; }
.ds-files small { display:block;margin-top:4px;color:#b7aebd;font-size:9px; }
.ds-files i { color:#c9e4d5;font-style:normal; }
.ds-workflow { display:flex;align-items:center;justify-content:space-between;gap:5px;margin:34px 4px 0; }
.ds-workflow > div { display:grid;justify-items:center;gap:10px;color:#f6f0f7;font:10px/1 system-ui,sans-serif; }
.ds-workflow > div i { display:grid;width:34px;height:34px;place-items:center;border:1px solid #b99bcd;border-radius:50%;background:#302b3a;color:#e1c9f0;font:700 10px/1 system-ui,sans-serif; }
.ds-workflow > span { flex:1;height:1px;background:linear-gradient(90deg,#9878ac,#dac0e9); }
.ds-concept-note { display:block;margin:30px 0 0;color:#c8bdcf;font:11px/1.4 system-ui,sans-serif; }
.ds-content-cards { display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:32px; }
.ds-content-cards article { min-height:120px;padding:14px 12px;border:1px solid rgba(211,187,228,.2);border-radius:10px;background:linear-gradient(145deg,#383140,#26212f);color:#f8f1fa; }
.ds-content-cards i { display:block;margin-bottom:18px;color:#d3b6e7;font:700 10px/1 system-ui,sans-serif;font-style:normal; }
.ds-content-cards b,.ds-content-cards span { display:block;font:650 11px/1.2 system-ui,sans-serif; }
.ds-content-cards span { margin-top:6px;color:#bfb4c6;font-size:9px;font-weight:450; }
.ds-phone-motion { width:210px;height:420px;opacity:0; }
.ds-phone { width:100%;height:100%;padding:10px;border:3px solid #77717d;border-radius:30px;background:#17151d;box-shadow:0 16px 30px rgba(0,0,0,.38); }
.ds-phone-island { position:absolute;top:13px;left:50%;transform:translateX(-50%);width:55px;height:10px;border-radius:10px;background:#17151d;z-index:2; }
.ds-phone-screen { height:100%;border-radius:22px;overflow:hidden;background:#f0e6dc; }
.ds-phone-web { height:150%;padding:30px 13px 12px;background:linear-gradient(#faf2e9,#e4d6e7);color:#29252e;font-family:system-ui,sans-serif; }
.ds-phone-web small { display:block;padding-bottom:22px;font-size:9px;font-weight:800;letter-spacing:.14em; }
.ds-phone-web small span { float:right; }
.ds-phone-web p { font-size:7px;font-weight:800;letter-spacing:.15em;color:#795aa0; }
.ds-phone-web strong { display:block;font-size:25px;line-height:1;letter-spacing:-.05em;margin:12px 0 20px; }
.ds-phone-card { display:flex;align-items:center;gap:8px;margin:8px 0;padding:7px;border-radius:8px;background:#fff8f0;box-shadow:0 4px 10px #55425b18;font-size:8px; }
.ds-phone-card i { width:25px;height:25px;border-radius:5px;background:#d8c4df;flex:none; }
.ds-phone-web b { display:block;margin-top:15px;padding:8px;border-radius:12px;background:#795aa0;color:white;text-align:center;font-size:8px; }
.ds-impact-ring { position:absolute;left:0;top:0;width:220px;height:220px;border:2px solid #dec1f2;border-radius:50%;box-shadow:0 0 25px #d4afe9;opacity:0; }
.ds-guide-motion { position:absolute;left:0;top:0;width:230px;height:306px;padding:0;border:0;background:none;pointer-events:auto;cursor:pointer;z-index:1; }
.ds-guide-motion img { display:block;width:100%;height:100%;object-fit:contain; }
.device-stage-active:not(.ds-flow-contact) .hero--sequence-done .hero-person { opacity:0!important;pointer-events:none!important; }
.ds-flow-contact .ds-guide-motion { display:none; }
.ds-chips { position:absolute;right:5vw;bottom:9vh;display:flex;gap:7px;opacity:0;transform:translateY(10px);transition:opacity .3s,transform .3s; }
.ds-show-chips .ds-chips { opacity:1;transform:translateY(0); }
.ds-chips span { padding:6px 10px;border:1px solid #bea4cf;border-radius:20px;background:#2d2835;color:#f5ebfa;font:700 10px/1 system-ui,sans-serif; }
.ds-debug { display:none;position:absolute;top:85px;right:20px;padding:5px 8px;background:#19151d;color:white;font:12px monospace; }
.ds-debug-mode .ds-debug { display:block; }
.ds-debug-mode .ds-laptop-motion,.ds-debug-mode .ds-phone-motion { outline:2px dashed #ef4e7b; }
.ds-debug-mode #inicio,.ds-debug-mode #recorrido,.ds-debug-mode #capacidades,.ds-debug-mode #muestras,.ds-debug-mode #metodo,.ds-debug-mode #contacto { outline:1px solid #ef4e7b; }
.device-stage-active .site-footer { z-index:8; }
.ds-full-motion .hero-person { opacity:0!important;pointer-events:none!important; }
.device-stage-active .area__visual.ds-device-replaced { opacity:0!important;visibility:hidden!important; }
.ds-motion-optin { flex-basis:100%;width:fit-content;margin-top:-12px;color:#dbc2ed;font-size:12px;font-weight:650;text-decoration:underline;text-decoration-color:rgba(219,194,237,.48);text-underline-offset:4px; }
.ds-motion-requested .ds-motion-optin { display:none; }
.ds-responsive-beat { position:relative;min-height:min(108vh,840px);margin:84px 0 94px;padding:62px clamp(24px,6vw,88px);border-block:1px solid rgba(211,187,228,.3); }
.ds-responsive-beat__copy { position:sticky;top:88px;z-index:6;max-width:750px;margin:auto;text-align:center;color:#f7ecfb; }
.ds-responsive-beat__copy span { display:block;margin-bottom:15px;color:#d9b9ec;font:700 11px/1.4 system-ui,sans-serif;letter-spacing:.18em; }
.ds-responsive-beat__copy h3 { margin:0;font:700 clamp(28px,3.6vw,48px)/1.04 system-ui,sans-serif;letter-spacing:-.055em; }
.ds-responsive-beat__copy p { margin:13px 0 0;color:#ded0e4;font:15px/1.5 system-ui,sans-serif; }

/* El contenido final vive dentro de la única pantalla; el formulario es real. */
.ds-contact-slot { position:absolute;inset:27px 0 0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s; }
.ds-stage.is-contact .ds-contact-slot { opacity:1;visibility:visible; }
.ds-contact-active .ds-stage .ds-contact-slot { pointer-events:auto; }
.ds-contact-pre #contacto .contact__shell { opacity:0;pointer-events:none; }
.ds-flow-contact #contacto .contact__copy { display:none; }
.ds-contact-screen { height:100%;overflow:auto;overscroll-behavior:contain;padding:10px 15px 16px;background:#f3e9dd;color:#28242b;font-family:system-ui,sans-serif;scrollbar-width:thin; }
.ds-contact-header span { color:#795aa0;font-size:8px;font-weight:800;letter-spacing:.13em; }
.ds-contact-header h2 { margin:3px 0 2px;font-size:22px;line-height:1.05;letter-spacing:-.05em;color:#28242b; }
.ds-contact-header p { margin:0 0 7px;font-size:10px;color:#665c68; }
.ds-contact-form { display:grid;grid-template-columns:1fr 1fr;gap:6px 9px; }
.ds-types,.ds-field--wide,.ds-submit-row,.ds-form-status { grid-column:1/-1; }
.ds-types { border:0;margin:0;padding:0; }
.ds-types legend,.ds-field { font-size:9px;font-weight:700;color:#37313b; }
.ds-type-options { display:flex;flex-wrap:wrap;gap:4px;margin-top:3px; }
.ds-type-options button { padding:4px 7px;border:1px solid #c6b6cd;border-radius:20px;background:#fffaf4;color:#493e50;font:600 8px/1.2 system-ui,sans-serif;cursor:pointer; }
.ds-type-options button[aria-pressed="true"] { background:#795aa0;color:white;border-color:#795aa0; }
.ds-field { display:flex;flex-direction:column;gap:3px; }
.ds-field input,.ds-field select,.ds-field textarea { width:100%;min-height:24px;padding:4px 6px;border:1px solid #bcaec0;border-radius:5px;background:#fffaf5;color:#28242b;font:10px/1.3 system-ui,sans-serif;resize:vertical; }
.ds-field textarea { min-height:36px; }
.ds-submit-row { display:flex;align-items:center;gap:10px; }
.ds-submit-row button { flex:none;padding:7px 12px;border:0;border-radius:20px;background:#795aa0;color:white;font:700 9px/1.2 system-ui,sans-serif;cursor:pointer; }
.ds-submit-row small { max-width:280px;font:8px/1.3 system-ui,sans-serif;color:#665c68; }
.ds-form-status { min-height:1em;margin:0;color:#345f50;font:9px/1.2 system-ui,sans-serif; }
.ds-contact-screen :is(button,input,select,textarea):focus-visible { outline:2px solid #552c87;outline-offset:2px; }
@media (min-width:1024px) and (prefers-reduced-motion:no-preference) {
  /* clip conserva el recorte visual sin convertir la sección en contenedor de scroll; así funciona sticky. */
  .device-stage-active .samples { overflow:clip; }
  .ds-contact-slot .ds-contact-header > * { opacity:0;transform:translateY(-34px);transition:opacity .42s,transform .42s; }
  .ds-contact-active .ds-contact-slot .ds-contact-header > * { opacity:1;transform:translateY(0); }
  .ds-contact-active .ds-contact-slot .ds-contact-header h2 { transition-delay:.08s; }
  .ds-contact-active .ds-contact-slot .ds-contact-header p { transition-delay:.16s; }
}
.about-role { display:inline-block;transition:opacity .28s,transform .28s; }
.about-role.is-changing { opacity:0;transform:translateY(-.2em); }

@media (max-width:1023px) {
  .ds-responsive-beat { display:none; }
  .ds-stage.ds-simplified .ds-laptop-motion,.ds-stage.ds-simplified .ds-chips { display:none; }
  .ds-stage.ds-simplified .ds-phone-motion { pointer-events:none; }
  .ds-flow-contact #contacto .inquiry-form { display:none; }
  #contacto .contact__shell > .ds-contact-screen { width:min(100%,680px);height:auto;max-height:none;margin:30px auto 0;padding:22px;border-radius:18px;box-shadow:0 20px 50px #100b1836;pointer-events:auto; }
  #contacto .contact__shell > .ds-contact-screen .ds-contact-header h2 { font-size:clamp(24px,5vw,39px); }
  #contacto .contact__shell > .ds-contact-screen .ds-contact-header p { font-size:15px; }
  #contacto .contact__shell > .ds-contact-screen .ds-types legend,
  #contacto .contact__shell > .ds-contact-screen .ds-field { font-size:13px; }
  #contacto .contact__shell > .ds-contact-screen .ds-type-options button { font-size:12px;padding:8px 10px; }
  #contacto .contact__shell > .ds-contact-screen .ds-field input,
  #contacto .contact__shell > .ds-contact-screen .ds-field select,
  #contacto .contact__shell > .ds-contact-screen .ds-field textarea { font-size:16px;min-height:42px;padding:9px; }
  #contacto .contact__shell > .ds-contact-screen .ds-submit-row button { font-size:14px;padding:12px 18px; }
  #contacto .contact__shell > .ds-contact-screen .ds-submit-row small,
  #contacto .contact__shell > .ds-contact-screen .ds-form-status { font-size:12px; }
}
@media (max-width:600px) {
  .ds-stage.ds-simplified .ds-phone-motion { display:none; }
  .ds-contact-form { grid-template-columns:1fr; }
  .ds-field { grid-column:1/-1; }
  .ds-submit-row { align-items:flex-start;flex-direction:column; }
}
@media (min-width:1024px) and (prefers-reduced-motion:reduce) {
  .ds-stage.ds-simplified .ds-laptop-motion { display:block; }
  .ds-flow-contact #contacto .inquiry-form { display:none; }
  #contacto .contact__shell > .ds-contact-screen { width:min(100%,680px);height:auto;max-height:none;margin:30px auto 0;padding:22px;border-radius:18px;pointer-events:auto; }
  #contacto .contact__shell > .ds-contact-screen .ds-contact-header h2 { font-size:32px; }
  #contacto .contact__shell > .ds-contact-screen .ds-field { font-size:13px; }
  #contacto .contact__shell > .ds-contact-screen .ds-field input,
  #contacto .contact__shell > .ds-contact-screen .ds-field select,
  #contacto .contact__shell > .ds-contact-screen .ds-field textarea { font-size:16px;min-height:42px; }
}
@media (prefers-reduced-motion:reduce) {
  .ds-responsive-beat { display:none; }
  .ds-laptop-idle,.ds-panel,.about-role { animation:none!important;transition:none!important; }
  .ds-motion-requested .ds-responsive-beat { display:block; }
}
@media (min-width:1024px) {
  .ds-motion-requested .samples { overflow:clip; }
}

/* studio-polish.css */
/* Pulido del estudio: contenido antes que escenografía. */
html:has(.hero--sequence:not(.hero--sequence-done)) .ds-stage { visibility:hidden !important;opacity:0 !important; }
.ds-placement { width:100%;height:100%;transform-origin:center; }
/* El contenido conserva prioridad incluso durante una transición. */
.device-stage-active .scroll-world__chapters,
.device-stage-active .area__main { position:relative;z-index:6; }
.ds-submit-row button,.ds-type-options button { border-radius:10px;background:#302639;color:#fff9f0;border:1px solid #302639; }
.ds-type-options button[aria-pressed="false"] { background:transparent;color:#37313b;border-color:#9c8fa5; }
.ds-submit-row button:focus-visible,.ds-type-options button:focus-visible { outline:3px solid #795aa0;outline-offset:3px; }
/* No rasterizar la pantalla completa con un filtro de sombra. */
.ds-laptop { filter:none; }
.ds-lid { box-shadow:inset 0 1px 1px #ddd5e2,0 18px 32px rgba(15,12,25,.22); }
.ds-laptop-tilt,.ds-laptop-idle { transform-style:flat; }
.ds-laptop-motion::after { display:none; }
.ds-screen { -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
.ds-screen-shine { opacity:.2 !important; }
.ds-browser-chrome { font-size:11px;letter-spacing:.02em; }
.ds-screen-kicker { font-size:13px;letter-spacing:.08em;margin-bottom:18px; }
.ds-finance > div,.ds-files > div { font-size:15px; }
.ds-finance b,.ds-files small { font-size:12px; }
.ds-mini-web nav { font-size:12px;letter-spacing:.06em; }
.ds-mini-web small { font-size:12px;letter-spacing:.08em; }
.ds-mini-web strong { font-size:36px; }
.ds-mini-button { font-size:13px;border-radius:7px; }
/* Botones de un estudio de desarrollo, no de un generador de IA. */
.button,.button--primary,.button--quiet,.button--wa,.button--copy { border-radius:10px;box-shadow:none;min-height:48px;letter-spacing:0; }
.button--primary { background:#302639;color:#fff9f0;border-color:#302639; }
.button--primary:hover { background:#493654;box-shadow:none;transform:translateY(-1px); }
.button--quiet { background:transparent;border-color:currentColor; }
.button__icon { background:transparent;border-radius:0; }
.btn-sparkle { display:none;animation:none; }
.button:hover .btn-arrow { transform:translateX(3px); }
.button:focus-visible { outline:3px solid #a47fb7;outline-offset:4px; }
@media(prefers-reduced-motion:reduce) { .button,.btn-arrow { transition:none; } }
/* La preferencia reducida no debe reactivar la pausa de escritorio en móvil,
   donde los dispositivos fijos se deshabilitan y crearían un bloque vacío. */
@media(max-width:1023px) { .ds-motion-requested .ds-responsive-beat { display:none !important; } }
/* El scrub puede detenerse entre dos fundidos: solo una explicación se lee. */
@media(min-width:1024px) and (prefers-reduced-motion:no-preference) {
  .scroll-world__chapter:not(.is-current) { opacity:0!important;visibility:hidden!important;pointer-events:none; }
  .scroll-world__chapter.is-current { opacity:1!important;visibility:visible!important; }
}
.ds-motion-requested .scroll-world__chapter:not(.is-current) { opacity:0!important;visibility:hidden!important;pointer-events:none; }
.ds-motion-requested .scroll-world__chapter.is-current { opacity:1!important;visibility:visible!important; }

/* studio-details.css */
/* Tinta técnica + latón: detalles finos, subordinados al contenido. */
/* No modificar position: el recuadro ya es sticky y los visuales relative. */
.studio-detail-host { --studio-light-x:28%;--studio-light-y:18%; }
.studio-circuit { position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:inherit;z-index:1; }
.studio-circuit svg { width:100%;height:100%;display:block;fill:none; }
.studio-circuit__engraving { stroke:#fff8ee;stroke-width:1;opacity:.55;vector-effect:non-scaling-stroke; }
.studio-circuit__track { stroke:#756656;stroke-width:.8;opacity:.27;vector-effect:non-scaling-stroke; }
.studio-circuit__signal { stroke-width:1.15;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;vector-effect:non-scaling-stroke; }
.studio-circuit__ticks { stroke:#8b7465;stroke-width:1;opacity:.35;vector-effect:non-scaling-stroke; }
.studio-circuit__node { fill:#ba935f;stroke:#f3e8d8;stroke-width:2;opacity:.7; }
.studio-circuit__coordinate { position:absolute;right:28px;top:28px;font:9px/1.3 ui-monospace,Consolas,monospace;letter-spacing:.16em;color:#625644;padding:5px 7px;border-radius:3px;opacity:.62; }
.studio-circuit__reflection { position:absolute;inset:0;border-radius:inherit;background:radial-gradient(ellipse at var(--studio-light-x) var(--studio-light-y),#fff8ec38,transparent 48%);opacity:0;transition:opacity .5s; }
.studio-detail-host:hover .studio-circuit__reflection { opacity:.65; }
.studio-detail-arrived .studio-circuit__signal { stroke-dashoffset:0; }
@media(prefers-reduced-motion:no-preference) {
  .studio-detail-arrived .studio-circuit__signal { animation:studio-trace 2.4s cubic-bezier(.22,.7,.3,1) both; }
  .studio-detail-arrived .studio-circuit__node { animation:studio-node 2.2s .8s ease-in-out 2 both; }
  .studio-detail-arrived:not(.studio-detail-in-view) .studio-circuit__signal,
  .studio-detail-arrived:not(.studio-detail-in-view) .studio-circuit__node { animation-play-state:paused; }
}
@keyframes studio-trace { from {stroke-dashoffset:100;opacity:0} to {stroke-dashoffset:0;opacity:1} }
@keyframes studio-node { 50% {opacity:1} }
.studio-orbit { position:absolute;right:5%;bottom:3%;width:clamp(72px,9vw,130px);pointer-events:none;opacity:.38;transform:rotate(-8deg); }
.studio-orbit svg { width:100%;fill:none;stroke:#b38b53;stroke-width:.8; }
.studio-orbit__spark { fill:#d6b276;stroke:#fff2d9;stroke-width:2; }
.hero--sequence:not(.hero--sequence-done) .studio-orbit { visibility:hidden; }
@media(prefers-reduced-motion:no-preference) {
  .hero--sequence-done .studio-orbit { animation:studio-orbit-settle 2.2s cubic-bezier(.2,.7,.3,1) both; }
}
@keyframes studio-orbit-settle { from {opacity:0;transform:translateY(10px) rotate(-18deg)} to {opacity:.38;transform:translateY(0) rotate(-8deg)} }
/* Impresión fina en los márgenes, no una malla detrás de los párrafos. */
#capacidades { background-image:linear-gradient(90deg,transparent 23px,#8b746518 24px,transparent 25px),linear-gradient(90deg,transparent calc(100% - 25px),#8b746518 calc(100% - 24px),transparent calc(100% - 23px)); }
.project-roadmap { border-top:1px solid #a5876040; }
@media(max-width:767px) {
  .studio-circuit__coordinate { right:18px;top:18px;font-size:9px; }
  .studio-orbit { width:72px;opacity:.35; }
}
@media(prefers-reduced-motion:reduce) { .studio-circuit__signal {stroke-dashoffset:0;} .studio-circuit__reflection {display:none;} }

/* studio-cinema.css */
/* Taller digital editorial. El fondo y la interfaz comparten un plano. */
.studio-cinema{position:relative;z-index:9;background:#101a25;color:#f7f1e8;--cinema-accent:#b8d5cd}
.studio-cinema *{box-sizing:border-box}.cinema-stage{position:relative;overflow:hidden;isolation:isolate}
.cinema-heading{position:absolute;z-index:3;top:112px;left:6%;right:6%;display:flex;justify-content:space-between;gap:20px;font:600 10px/1.4 system-ui;letter-spacing:.15em;color:#b9c6ca}
.cinema-scene{position:relative;isolation:isolate;min-height:800px;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:center;gap:7%;padding:176px 7% 115px;--cinema-accent:#b8d5cd;--cinema-tint:#213b3c}
.cinema-scene[data-scene='1']{--cinema-accent:#e2b68a;--cinema-tint:#3a302b}.cinema-scene[data-scene='2']{--cinema-accent:#b4ccdf;--cinema-tint:#263646}.cinema-scene[data-scene='3']{--cinema-accent:#d2c6a1;--cinema-tint:#35372f}
.cinema-world{position:absolute;inset:-15px 0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 80% 52%,var(--cinema-tint),#101a25 72%);overflow:hidden}
.cinema-blueprint{position:absolute;inset:0 0 0 45%;background-image:linear-gradient(#c3d6d80b 1px,transparent 1px),linear-gradient(90deg,#c3d6d80b 1px,transparent 1px);background-size:56px 56px;mask-image:linear-gradient(90deg,transparent,#000 30%)}
.cinema-traces{position:absolute;width:75%;height:100%;left:30%;top:0;color:var(--cinema-accent);opacity:.3}.cinema-world-index{position:absolute;right:-.04em;bottom:-.15em;font:600 clamp(220px,35vw,570px)/1 system-ui;letter-spacing:-.09em;color:var(--cinema-accent);opacity:.025}
.cinema-copy{max-width:530px;position:relative;z-index:2}.cinema-kicker{display:flex;align-items:center;gap:12px;color:var(--cinema-accent);font:600 10px/1.5 system-ui;letter-spacing:.13em}.cinema-kicker::before{content:'';width:25px;height:1px;background:currentColor}
.cinema-copy h2{font-size:clamp(37px,4.1vw,65px);line-height:1.06;letter-spacing:-.045em;margin:24px 0;max-width:15ch;text-wrap:balance}.cinema-copy>p{font:400 16px/1.7 system-ui;max-width:42ch;color:#c9d2d5}
.cinema-copy details{margin:27px 0 24px;border-top:1px solid #b7c7cb33;border-bottom:1px solid #b7c7cb33;max-width:440px}.cinema-copy summary{display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;min-height:48px;padding:14px 0;list-style:none;font:600 13px/1.5 system-ui}.cinema-copy summary::-webkit-details-marker{display:none}.cinema-copy summary>span{width:24px;height:24px;display:grid;place-items:center;border:1px solid #b7c7cb40;border-radius:50%;font-weight:400;transition:transform .2s}.cinema-copy details[open] summary>span{transform:rotate(45deg)}.cinema-copy details p{font:400 13px/1.6 system-ui;color:#c9d2d5;padding-bottom:9px;margin:0}
.cinema-copy .cinema-cta{display:inline-flex;align-items:center;gap:19px;min-height:48px;padding:8px 9px 8px 18px;background:#ede8dd;color:#172630;border:1px solid #ede8dd;border-radius:30px;font:600 13px/1.3 system-ui;text-decoration:none;transition:background .2s}.cinema-cta>svg{width:32px;height:32px;padding:8px;background:#18313a;color:#fff;border-radius:50%;transition:transform .25s}.cinema-cta:hover{background:#fff8ed}.cinema-cta:hover>svg{transform:rotate(-35deg)}
.studio-cinema :is(a,button,summary):focus-visible{outline:3px solid var(--cinema-accent);outline-offset:5px}
.cinema-product{position:relative;width:100%;max-width:570px;margin:0;perspective:1800px;z-index:1}.cinema-product-label{display:flex;align-items:center;gap:10px;padding:0 5px 17px;color:var(--cinema-accent);font:600 9px/1.5 system-ui;letter-spacing:.1em}.cinema-product-label svg{width:19px;height:19px}.cinema-product-label b{margin-left:auto;font:500 10px ui-monospace}
.cinema-window{overflow:hidden;border-radius:13px;background:#f4f0e8;color:#253a40;border:1px solid #ece8df;box-shadow:0 28px 65px #040e1840,0 2px 0 #b7b4ab;transform:rotateY(-3deg) rotateZ(.7deg);color-scheme:only light}.cinema-product--1 .cinema-window{transform:rotateY(3deg) rotateZ(-.7deg)}.cinema-product--2 .cinema-window{transform:rotateY(-2deg) rotateZ(.4deg)}.cinema-product--3 .cinema-window{transform:rotateY(2deg)}
.cinema-window-bar{display:flex;align-items:center;gap:14px;padding:12px 17px;background:#eae6de;border-bottom:1px solid #d5d5ca;color:#738078;font:10px/1.2 system-ui}.cinema-window-dots{letter-spacing:3px;color:#89958c}.cinema-window-secure{margin-left:auto}
.cinema-demo{padding:20px 23px 22px;min-height:360px}.cinema-demo svg{flex-shrink:0}.demo-site-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:18px;border-bottom:1px solid #233b3617;font:9px/1.4 system-ui;color:#657570}.demo-site-nav>b{display:flex;align-items:center;gap:8px;font:600 12px/1.2 system-ui;color:#253a40}.demo-site-nav>b>svg{width:17px;height:17px}.demo-monogram{display:grid;place-items:center;width:24px;height:24px;border:1px solid #82958d;border-radius:50%;font:600 8px system-ui}
.demo-eyebrow{display:block;font:600 8px/1.4 system-ui;letter-spacing:.12em;color:#657570}.cinema-demo h3{font:600 clamp(22px,2.1vw,32px)/1.13 system-ui;letter-spacing:-.04em;margin:12px 0;color:#253a40}.cinema-demo p{font:400 11px/1.55 system-ui;color:#66756f}
.demo-web-hero{position:relative;margin-top:22px;padding:0 32% 22px 0}.demo-web-hero p{max-width:27ch}.demo-link-look{display:flex;align-items:center;gap:9px;font:600 10px system-ui;color:#345d53;margin-top:16px}.demo-link-look>svg{width:15px;height:15px}.demo-architecture{position:absolute;right:3px;top:5px;width:27%;height:140px;color:#88a194}
.demo-service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.demo-service-grid>div{padding:12px 10px;border:1px solid #cfd8cf;background:#edf0e8;border-radius:7px}.demo-service-grid svg{width:20px;height:20px;color:#54786b}.demo-service-grid strong{display:block;margin:10px 0 7px;font:600 11px system-ui}.demo-service-grid span{font:9px system-ui;color:#66756f}.demo-contact-strip{display:flex;align-items:center;gap:8px;margin-top:13px;padding-top:10px;font:9px/1.5 system-ui;color:#66756f}.demo-contact-strip svg{width:14px;height:14px}
.demo-store-grid{display:grid;grid-template-columns:1fr 1fr;gap:19px;align-items:center;margin-top:20px}.demo-product-art{border-radius:9px;background:#e9e2d5;text-align:center;padding:8px 4px 13px}.demo-bag{display:block;width:100%;max-height:200px}.demo-product-art>span{font:6px/1.5 system-ui;letter-spacing:.13em;color:#8b735a}.demo-product-art.is-olive .bag-fabric{fill:#89947a}.demo-product-art.is-olive .bag-panel{fill:#728266}
.demo-product-info h3{font-size:clamp(19px,1.8vw,27px)}.demo-product-info p{font-size:10px}.demo-option-title{font:600 9px system-ui;display:block;margin:16px 0 7px}.demo-options{display:flex;gap:5px;flex-wrap:wrap}.demo-options button{font:500 10px system-ui;min-height:44px;padding:7px 12px;border:1px solid #bbc9bf;border-radius:7px;background:transparent;color:#35564b;cursor:pointer}.demo-options button[aria-pressed='true']{background:#35564b;color:#fff}.demo-finish-label{min-height:2.4em}
.demo-action{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:10px 12px;background:#29483e;color:#f8f7ee;border:0;border-radius:7px;font:600 10px/1.3 system-ui;cursor:pointer}.demo-action svg{width:15px;height:15px}.demo-action:hover{background:#16372d}.demo-order-status{min-height:32px;margin-top:18px;border-top:1px solid #d7dacd;padding-top:12px;font:9px/1.5 system-ui;color:#68756b}
.demo-board-head{display:flex;align-items:center;gap:12px;justify-content:space-between;margin:22px 0 18px}.demo-board-head h3{font-size:clamp(20px,1.9vw,28px);margin-bottom:0}.demo-avatars{display:flex;padding-left:6px}.demo-avatars i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#d4dfd8;border:2px solid #f4f0e8;margin-left:-6px;font:600 7px system-ui}
.demo-kanban{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.demo-column{height:180px;min-height:0;overflow-y:auto;scrollbar-width:thin;padding:9px 7px;background:#e7ece8;border:1px solid #d8e0d7;border-radius:7px}.demo-column>strong{display:flex;align-items:center;gap:5px;font:600 9px system-ui;margin-bottom:13px}.demo-column>strong>i{width:4px;height:4px;border-radius:50%;background:#739487}.demo-column:nth-child(2)>strong>i{background:#b38656}.demo-column:nth-child(3)>strong>i{background:#718aa7}
.demo-task{padding:12px 8px;background:#fbfaf5;border:1px solid #d5ded4;border-radius:5px;box-shadow:0 3px 5px #213d3210;margin-bottom:7px}.demo-task>span{font:6px/1.5 system-ui;letter-spacing:.07em;color:#738477}.demo-task>b{display:block;font:600 10px/1.5 system-ui;margin:10px 0}.demo-task>small{font:8px system-ui;color:#6a7b71}.demo-task-travel{border-left:2px solid #547c6d}.demo-board-control{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:19px}.demo-flow-status{font:9px/1.4 system-ui;color:#68756b}
.demo-delivery-title{margin:24px 0 20px}.demo-delivery-title h3{margin-bottom:0}.demo-delivery-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));list-style:none;padding:0;margin:0 0 22px;gap:8px}.demo-delivery-steps li{display:flex;flex-direction:column;gap:12px;padding:14px 10px;border:1px solid #d7dbcf;background:#eaede4;border-radius:7px}.demo-delivery-steps span{font:8px ui-monospace;color:#82917d}.demo-delivery-steps b{font:600 10px system-ui}.demo-delivery-steps svg{width:19px;height:19px;color:#4a6f5c}.demo-handover{display:flex;align-items:center;gap:14px;padding:16px;background:#253e36;color:#f4efe1;border-radius:7px}.demo-handover>svg{width:26px;height:26px;color:#b5cebb}.demo-handover strong{font:600 11px system-ui}.demo-handover p{font:9px/1.5 system-ui;color:#c8d5cb;margin:6px 0 0}
.cinema-product figcaption{display:flex;align-items:center;justify-content:center;gap:9px;margin:22px 0 0;font:10px/1.5 system-ui;color:#b8c8c8}.cinema-caption-dot{width:5px;height:5px;border-radius:50%;background:var(--cinema-accent);box-shadow:0 0 0 4px #bbd9d510}
.cinema-footer{position:absolute;z-index:3;bottom:24px;left:6%;right:6%;display:flex;justify-content:space-between;align-items:center;gap:20px;font:9px/1.5 system-ui;color:#a8b9bd}.cinema-dots{display:flex;gap:7px}.cinema-dots button{position:relative;display:grid;place-items:center;width:44px;min-height:44px;padding:7px;border:0;background:transparent;color:#a8b9bd;font:10px ui-monospace;cursor:pointer}.cinema-dots button>span{position:absolute;bottom:3px;left:7px;right:7px;height:2px;background:#7f969833}.cinema-dots button[aria-current]{color:#f5f0e7}.cinema-dots button[aria-current]>span{background:#b8d5cd}.cinema-motion-toggle{min-height:44px;border:1px solid #a8b9bd40;border-radius:24px;padding:8px 14px;font:10px system-ui;background:transparent;color:#b6c6c9;cursor:pointer}
.cinema-immersive{height:430vh}.cinema-immersive .cinema-stage{position:sticky;top:0;height:100svh;min-height:680px}.cinema-immersive .cinema-scene{position:absolute;inset:0;min-height:0;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(18px);transition:opacity .4s,transform .55s cubic-bezier(.2,.7,.3,1),visibility .4s}.cinema-immersive .cinema-scene.is-active{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
.cinema-has-motion.cinema-visible .cinema-scene.is-active.cinema-in-view .cinema-node{animation:cinema-node-breathe 5s ease-in-out infinite}.cinema-node:nth-of-type(2){animation-delay:1.5s!important}.cinema-node:nth-of-type(3){animation-delay:3s!important}@keyframes cinema-node-breathe{0%,100%{opacity:.35}45%{opacity:1}}
.cinema-paused .cinema-node,.cinema-tab-hidden .cinema-node{animation-play-state:paused!important}.cinema-paused .cinema-world{transform:none!important}.cinema-paused .cinema-scene{transition:none!important}
/* La cabecera del sitio se hace más alta en tablet: no repetir marca debajo de ella. */
@media(min-width:1024px) and (max-height:800px){.cinema-heading{display:none}}
@media(min-width:1024px) and (max-height:800px){.cinema-scene{padding:148px 7% 86px;gap:6%}.cinema-copy h2{font-size:clamp(36px,3.7vw,52px);margin:16px 0}.cinema-copy>p{font-size:14px;line-height:1.6}.cinema-copy details{margin:19px 0}.cinema-copy details p{font-size:12px;line-height:1.45}.cinema-product-label{padding-bottom:12px}.cinema-demo{min-height:0;padding:16px 20px 18px}.demo-site-nav{padding-bottom:14px}.demo-web-hero{margin-top:16px;padding-bottom:17px}.cinema-demo h3{font-size:27px}.demo-service-grid>div{padding:9px}.demo-product-art .demo-bag{max-height:175px}.demo-column{min-height:154px}.cinema-product figcaption{margin-top:17px}}
@media(max-width:1023px),(max-height:679px){.cinema-heading{position:relative;top:auto;left:auto;right:auto;padding:35px 7% 0}.cinema-heading span:last-child{display:none}.cinema-stage{padding-bottom:90px}.cinema-scene{min-height:0;grid-template-columns:minmax(0,1fr);padding:65px 7% 58px;gap:34px;border-bottom:1px solid #b7c7cb26}.cinema-copy{max-width:580px}.cinema-copy h2{max-width:18ch;font-size:clamp(35px,6.5vw,59px)}.cinema-copy>p{font-size:15px}.cinema-product{max-width:560px;margin:auto}.cinema-window{transform:none!important}.cinema-demo{min-height:0}.cinema-world{background:radial-gradient(ellipse at 50% 85%,var(--cinema-tint),#101a25 76%)}.cinema-blueprint{inset:32% 0 0;mask-image:linear-gradient(transparent,#000 60%)}.cinema-traces{left:-10%;width:120%;top:30%;height:70%;opacity:.24}.cinema-footer{bottom:20px;flex-wrap:wrap;gap:10px}.cinema-footer>span{flex-basis:100%}.cinema-motion-toggle{margin-left:auto}.cinema-world-index{font-size:360px}}
@media(max-width:480px){.cinema-heading{padding-top:30px;font-size:9px}.cinema-scene{padding:48px 6% 42px;gap:28px}.cinema-copy h2{font-size:clamp(32px,8.6vw,41px);max-width:16ch}.cinema-copy>p{font-size:14px;line-height:1.65}.cinema-copy details{margin:22px 0}.cinema-copy .cinema-cta{font-size:12px}.cinema-product-label{font-size:8px}.cinema-window-bar{font-size:8px;padding:10px 12px}.cinema-demo{padding:16px 13px}.demo-site-nav>span{font-size:7px}.demo-web-hero{padding-right:29%}.cinema-demo h3{font-size:23px}.demo-architecture{width:26%;height:130px}.demo-service-grid{gap:5px}.demo-service-grid>div{padding:9px 7px}.demo-service-grid strong{font-size:10px}.demo-service-grid span{font-size:8px}.demo-store-grid{gap:12px}.demo-product-info h3{font-size:20px}.demo-options button{padding:7px 9px;font-size:9px}.demo-bag{min-height:150px}.demo-product-info p{font-size:9px}.demo-board-head h3{font-size:22px}.demo-avatars{display:none}.demo-kanban{gap:5px}.demo-column{padding:8px 5px}.demo-task{padding:8px 5px}.demo-task>b{font-size:9px;overflow-wrap:anywhere}.demo-task>small{font-size:7px}.demo-column>strong{font-size:8px}.demo-board-control{align-items:flex-start}.demo-delivery-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.demo-delivery-steps li{flex-direction:row;align-items:center;gap:8px}.demo-delivery-steps svg{margin-left:auto;width:15px;height:15px}.demo-handover{padding:12px}.demo-handover strong{font-size:10px}.demo-handover p{font-size:8px}.cinema-product figcaption{font-size:9px}}
@media(prefers-reduced-motion:reduce){.cinema-world,.cinema-window,.cinema-scene{transform:none!important}.studio-cinema *{animation:none!important;transition:none!important}.cinema-motion-toggle{display:none}}
.cinema-window :is(a,button):focus-visible{outline-color:#29483e}
.demo-column:focus-visible{outline:3px solid #29483e;outline-offset:-3px}
@media(max-width:480px){.demo-options button{min-width:44px;font-size:11px}.demo-action{font-size:11px}.demo-options{gap:8px}.cinema-product figcaption{font-size:10px}}

/* Revisión 41: una web original que se puede recorrer, no una captura o un video plano. */
.cinema-demo--0{padding:0;min-height:0}.cinema-product--0 .cinema-window{transform:none}
.web-playground{--web-ink:#203b33;--web-mid:#486354;--web-soft:#e0e8dc;--web-paper:#f7f3eb;background:var(--web-paper);color:var(--web-ink)}
.web-playground[data-tone='ink']{--web-ink:#27394c;--web-mid:#52667a;--web-soft:#e1e6ec}
.web-playground[data-tone='clay']{--web-ink:#654532;--web-mid:#78553d;--web-soft:#eee0d4}
.web-site-top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:58px;padding:7px 20px;border-bottom:1px solid #52675822}
.web-site-brand{display:flex;align-items:center;gap:8px;white-space:nowrap;font:600 11px system-ui}.web-brand-mark{width:26px;height:26px;display:grid;place-items:center;border:1px solid currentColor;border-radius:9px;font:600 8px system-ui}
.web-site-nav{display:flex;gap:2px}.web-site-nav button{position:relative;border:0;background:transparent;color:var(--web-ink);padding:10px 8px;min-height:44px;min-width:44px;font:500 10px system-ui;cursor:pointer}
.web-site-nav button::after{content:'';position:absolute;left:8px;right:8px;bottom:6px;height:2px;background:currentColor;transform:scaleX(0);transition:transform .2s}.web-site-nav button[aria-pressed='true']::after{transform:scaleX(1)}
.web-canvas{position:relative;height:284px;overflow:hidden}.web-panel{position:absolute;inset:0;padding:23px 22px}.web-panel[hidden]{display:none!important}
.web-panel--home{display:grid;grid-template-columns:1.1fr .9fr;gap:8px;align-items:center;padding-bottom:43px}.web-eyebrow{display:block;font:600 8px/1.4 system-ui;letter-spacing:.12em;color:var(--web-mid)}
.cinema-demo .web-page-title{font:600 clamp(25px,2.2vw,33px)/1.05 system-ui;letter-spacing:-.055em;margin:13px 0;color:var(--web-ink);text-wrap:balance}
.web-panel p{font:400 12px/1.6 system-ui;color:var(--web-mid);margin:12px 0}.web-text-link{display:flex;gap:8px;align-items:center;margin-top:19px;font:500 9px/1.45 system-ui}.web-text-link svg{width:15px;height:15px}
.web-artwork{position:relative;height:211px;perspective:900px}.web-art-route{position:absolute;inset:0;width:100%;height:100%;color:var(--web-mid);opacity:.35}
.web-art-card{position:absolute;display:flex;align-items:center;gap:10px;width:158px;min-height:53px;padding:10px;background:var(--web-paper);border:1px solid var(--web-soft);border-radius:9px;box-shadow:0 9px 19px #172a2912}
.web-art-card--0{left:2%;top:8px;transform:rotate(-4deg)}.web-art-card--1{right:0;top:75px;transform:rotate(3deg)}.web-art-card--2{left:5%;top:142px;transform:rotate(-2deg)}
.web-art-icon{display:grid;place-items:center;width:29px;height:29px;border-radius:8px;background:var(--web-soft);color:var(--web-ink)}.web-art-icon svg{width:16px;height:16px}.web-art-card>span:nth-child(2){flex:1}.web-art-card b{display:block;font:600 10px system-ui}.web-art-card i{display:block;width:47px;height:2px;margin-top:5px;background:var(--web-soft)}.web-art-card i:last-child{width:31px}.web-art-card small{align-self:flex-start;font:7px ui-monospace;color:var(--web-mid)}
.web-art-stamp{position:absolute;right:0;bottom:0;display:flex;align-items:center;gap:5px;padding:6px 9px;background:var(--web-ink);color:var(--web-paper);border-radius:6px;transform:rotate(3deg)}.web-art-stamp>span{font:600 12px system-ui}.web-art-stamp>small{font:5px system-ui;letter-spacing:.06em}
.web-home-caption{position:absolute;left:22px;right:22px;bottom:14px;display:flex;align-items:center;gap:9px;border-top:1px solid #52675822;padding-top:10px;font:9px system-ui;color:var(--web-mid)}.web-home-caption>span{font:8px ui-monospace;color:var(--web-ink)}
.web-panel--services .web-page-title{font-size:27px;margin:10px 0 15px}.web-service-list{display:grid;gap:7px}.web-service-list>div{display:flex;align-items:center;gap:11px;padding:9px 11px;background:var(--web-soft);border:1px solid #52675810;border-radius:8px}.web-service-icon{width:27px;height:27px;display:grid;place-items:center}.web-service-icon svg{width:21px;height:21px}.web-service-list strong{font:600 12px system-ui}.web-service-list p{font:10px/1.35 system-ui;margin:3px 0 0}.web-service-number{margin-left:auto;font:8px ui-monospace;color:var(--web-mid)}
.web-panel--contact{display:grid;grid-template-columns:1fr 1fr;gap:17px;align-items:center}.web-panel--contact .web-page-title{font-size:29px}.web-contact-copy p{font-size:11px}.web-contact-card{padding:16px;background:var(--web-soft);border-radius:10px;border:1px solid #52675815}.web-contact-card label{display:block;font:600 11px system-ui;margin-bottom:8px}.web-contact-card textarea{display:block;resize:none;width:100%;min-height:82px;padding:10px;border:1px solid #52675830;border-radius:6px;background:var(--web-paper);font:12px/1.5 system-ui;color:var(--web-ink)}.web-contact-card>a{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;padding:10px 12px;margin-top:10px;border-radius:7px;background:var(--web-ink);color:var(--web-paper);font:600 10px/1.4 system-ui;text-decoration:none}.web-contact-card>a svg{width:16px;height:16px}
.web-playground-controls{display:flex;align-items:center;gap:9px;min-height:57px;padding:6px 15px;background:#52675806;border-top:1px solid #52675822}.web-tone-group{display:flex;gap:1px}.web-tone-group button{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:transparent;cursor:pointer}.web-tone-group button>span{width:15px;height:15px;border-radius:50%;background:#5b7c6d;border:2px solid var(--web-paper);box-shadow:0 0 0 1px #52675830}.web-tone-group button[data-web-tone='ink']>span{background:#52697e}.web-tone-group button[data-web-tone='clay']>span{background:#a5795b}.web-tone-group button[aria-pressed='true']>span{box-shadow:0 0 0 1px var(--web-ink),0 0 0 4px var(--web-soft)}
.web-view-status{font:9px/1.2 ui-monospace;color:var(--web-mid);margin-right:auto}.web-play-button{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;min-width:110px;padding:9px 10px;border:1px solid #52675830;border-radius:24px;background:var(--web-paper);color:var(--web-ink);font:600 10px/1.25 system-ui;cursor:pointer}.web-play-button>svg{width:16px;height:16px}.web-play-button:hover{background:var(--web-soft)}.web-pause-icon{display:none}.web-playground[data-playing='true']:not([data-paused='true']) .web-play-icon{display:none}.web-playground[data-playing='true']:not([data-paused='true']) .web-pause-icon{display:block}
.web-progress-track{height:2px;background:var(--web-soft);overflow:hidden}.web-progress-track>span{display:block;width:100%;height:100%;background:var(--web-mid);transform:scaleX(0);transform-origin:left}
.web-playground :is(button,a,textarea):focus-visible{outline:2px solid var(--web-ink);outline-offset:3px}
.cinema-has-motion .web-panel--home:not([hidden]) .web-art-route path{stroke-dasharray:500;animation:web-route-draw 1.4s ease-out both}.cinema-has-motion .web-echo .cinema-traces{animation:web-background-echo .65s ease-out}.cinema-paused .web-playground *{animation-play-state:paused!important}
.web-playground[data-paused='true'] *{animation-play-state:paused!important}
.web-view-status{min-width:0;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.web-tone-group,.web-play-button{flex-shrink:0}
/* Tres filas completas en laptop corta y sin saltos de altura entre vistas. */
@media(min-width:1024px) and (max-height:800px){.web-playground .web-panel--services .web-page-title{font-size:22px;margin:7px 0 8px}.web-playground .web-service-list>div{padding:6px 9px}.web-playground .web-service-list p{font-size:10px}}
@media(max-width:480px){.web-playground .web-service-list{margin-top:16px;gap:10px}.web-playground .web-service-list>div{padding:11px 9px}}
.web-panel--services{padding-top:18px;padding-bottom:18px}
.web-playground .web-service-list p{margin:3px 0 0;line-height:1.35}
.web-playground .web-service-list>div{padding:5px 11px}
.web-playground .web-service-list>div>div{line-height:1}
.web-playground .web-service-list strong{display:block;line-height:1.35}
@media(min-width:1024px) and (max-height:800px){.web-playground .web-service-list>div{padding:4px 9px}}
@media(max-width:480px){.web-playground .web-service-list>div{padding:11px 9px}}
@media(max-width:480px){.web-playground .web-tone-group button{width:44px}.web-view-status{max-width:58px}}
@keyframes web-route-draw{from{stroke-dashoffset:500}to{stroke-dashoffset:0}}@keyframes web-background-echo{0%,100%{opacity:.3}40%{opacity:.6}}
@media(min-width:1024px) and (max-height:800px){.web-site-top{min-height:48px;padding:2px 16px}.web-canvas{height:250px}.web-panel{padding:17px 17px}.web-panel--home{padding-bottom:38px}.cinema-demo .web-page-title{font-size:27px}.web-panel p{font-size:11px}.web-artwork{height:190px}.web-art-card{width:145px;min-height:47px;padding:8px;gap:7px}.web-art-card--1{top:62px}.web-art-card--2{top:117px}.web-home-caption{left:17px;right:17px;bottom:10px}.web-text-link{margin-top:13px;font-size:8px}.web-playground-controls{min-height:48px;padding:2px 12px}.web-service-list>div{padding:7px 9px}.web-panel--services .web-page-title{font-size:24px;margin:9px 0 12px}.web-panel--contact .web-page-title{font-size:25px}.web-contact-card{padding:12px}.web-contact-card textarea{min-height:72px;font-size:12px}}
@media(max-width:480px){.web-site-top{padding:8px 12px;gap:4px;min-height:55px}.web-site-brand{font-size:10px;gap:5px}.web-brand-mark{width:22px;height:22px}.web-site-nav{gap:0}.web-site-nav button{font-size:10px;padding:10px 6px}.web-canvas{height:370px}.web-panel{padding:20px 18px}.web-panel--home{grid-template-columns:1fr;grid-template-rows:auto 125px;gap:0;align-items:start;padding-bottom:38px}.cinema-demo .web-page-title{font-size:29px;margin:10px 0}.web-panel p{font-size:12px;line-height:1.5;margin:10px 0}.web-eyebrow{font-size:8px}.web-text-link{margin-top:10px}.web-artwork{height:116px;width:100%;margin-top:8px}.web-art-route{opacity:.2;transform:rotate(90deg)}.web-art-card{width:126px;min-height:45px;padding:8px;gap:6px}.web-art-icon{width:24px;height:24px}.web-art-card b{font-size:9px}.web-art-card--0{left:0;top:0}.web-art-card--1{right:1%;top:26px}.web-art-card--2{left:12%;top:61px}.web-art-stamp{right:1%;bottom:0}.web-home-caption{left:18px;right:18px;bottom:12px;font-size:8px}.web-service-list{gap:11px;margin-top:23px}.web-service-list>div{padding:13px 11px}.web-service-list strong{font-size:13px}.web-service-list p{font-size:11px}.web-panel--services .web-page-title{font-size:29px}.web-panel--contact{grid-template-columns:1fr;gap:10px;align-content:start}.web-panel--contact .web-page-title{font-size:28px}.web-contact-copy p{font-size:11px}.web-contact-card{padding:12px}.web-contact-card textarea{font-size:16px;min-height:76px}.web-contact-card>a{font-size:11px}.web-playground-controls{padding:5px 8px;gap:2px}.web-view-status{font-size:8px}.web-play-button{min-width:103px;font-size:9px;padding:8px}.web-tone-group button{width:39px;min-height:44px}.web-tone-group button:first-child{margin-left:2px}.web-playground :is(button,a,textarea):focus-visible{outline-offset:1px}}
/* Revisión 42: una sola página continua, fotografía en vez de objetos vectoriales. */
.web-viewport{--web-page-height:300px;height:var(--web-page-height);position:relative;overflow:hidden;overflow:clip;isolation:isolate}
.web-track{position:relative;width:100%;transform:translateY(0)}
.web-track>.web-panel{position:relative;inset:auto;width:100%;height:var(--web-page-height);min-height:var(--web-page-height);box-sizing:border-box;overflow:hidden;border-bottom:1px solid var(--web-line);opacity:1;visibility:visible}
.web-home-photograph{margin:0;align-self:stretch;position:relative;overflow:hidden;border-radius:2px;background:#ddd4c9}
.web-home-photograph img{width:100%;height:100%;object-fit:cover;display:block}
.web-home-photograph figcaption{position:absolute;bottom:0;left:0;right:0;padding:7px 6px;color:#f9f5ea;background:#12242da8;font:600 6px/1.4 system-ui;letter-spacing:.12em}
.web-auto-mark{display:flex;align-items:center;margin-left:auto}.web-auto-mark svg{width:15px;height:15px;transform:rotate(90deg)}
.web-playground .web-view-status{max-width:none;margin-left:auto;font-size:10px}.web-playground-controls{justify-content:space-between}
.demo-product-art{padding:0;overflow:hidden;position:relative;aspect-ratio:3/4;border-radius:4px;background:#e5ddcf}
.demo-bag-photo{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s cubic-bezier(.22,1,.36,1);transform-origin:50% 77%}
.demo-product-art>span{position:absolute;bottom:0;left:0;right:0;padding:8px;background:#12242da8;color:#fff9ed;font-size:7px}
.demo-product-art.is-detail .demo-bag-photo{transform:scale(1.6)}
@media(min-width:1024px) and (max-height:800px){.web-viewport{--web-page-height:250px}.demo-product-art{max-height:235px}}
@media(max-width:480px){.web-viewport{--web-page-height:370px}.web-panel--home{grid-template-rows:auto 115px;gap:8px}.web-home-photograph{height:115px;align-self:auto}.web-home-photograph img{object-position:50% 57%}.web-home-photograph figcaption{width:auto;left:auto;font-size:6px}.web-playground .web-view-status{font-size:9px}.demo-product-art>span{font-size:6px}}
@media(prefers-reduced-motion:reduce){.demo-bag-photo{transition:none}}

/* contact-editorial.css */
/* Revisión 42 · Cierre editorial. Fotografía real y formulario documental. */
#contacto.contact-editorial { background:#eae3d8;color:#16232c;padding:110px 0 100px;overflow:clip; }
#contacto.contact-editorial .contact__orbit { display:none; }
#contacto.contact-editorial .contact__shell { display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1fr);gap:7%;align-items:start;opacity:1;pointer-events:auto;max-width:1260px; }
#contacto.contact-editorial .contact__copy,#contacto.contact-editorial .inquiry-form {display:none!important;}
.contact-editorial-gallery {min-width:0;padding-top:8px;}
.editorial-heading {display:flex;justify-content:space-between;border-top:1px solid #899089;padding-top:13px;font:600 10px/1.4 var(--body,system-ui);letter-spacing:.13em;}
.editorial-photo-stage {position:relative;isolation:isolate;margin:30px 0 35px;padding-right:20%;padding-bottom:9%;}
.editorial-photo {margin:0;position:relative;}
.editorial-photo-clip {overflow:hidden;background:#d4cabe;border:1px solid #beb4a5;}
.editorial-photo img {display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.22,1,.36,1);}
.editorial-photo--main .editorial-photo-clip {aspect-ratio:3/4;}
.editorial-photo--detail {position:absolute;right:0;bottom:0;width:45%;transform:rotate(4deg);padding:9px 9px 0;background:#f7f3eb;box-shadow:0 16px 30px #222a311a;}
.editorial-photo--detail .editorial-photo-clip {aspect-ratio:3/4;border:0;}
.editorial-photo figcaption {padding:11px 0;font:600 9px/1.4 system-ui;letter-spacing:.16em;}
.editorial-photo--detail figcaption {font-size:8px;}
.editorial-folio {position:absolute;right:0;top:24px;writing-mode:vertical-rl;font:500 13px/1 system-ui;letter-spacing:.25em;}
.editorial-caption h3 {font:600 clamp(26px,2.4vw,34px)/1.15 var(--display,system-ui);letter-spacing:-.035em;margin:0 0 13px;}
.editorial-caption p {font:400 14px/1.7 var(--body,system-ui);max-width:37ch;margin:0 0 17px;color:#46545a;}
.editorial-detail-toggle {min-height:44px;background:none;color:#24393d;border:0;border-bottom:1px solid #727d75;padding:8px 0;font:600 12px/1.4 system-ui;cursor:pointer;}
.editorial-detail-toggle span {display:inline-block;margin-left:20px;transition:transform .3s;}
.editorial-detail-toggle:hover span {transform:translate(3px,-3px);}
.editorial-photo-credit {font:400 10px/1.6 system-ui;color:#53615e;max-width:42ch;margin-top:23px;}
.editorial-photo-credit a {color:inherit;text-underline-offset:3px;}
.contact-editorial-gallery.is-detail .editorial-photo--main img {transform:scale(1.32);transform-origin:50% 78%;}
.contact-editorial-gallery.is-detail .editorial-photo--detail img {transform:scale(1.2);}
#contacto.contact-editorial .ds-contact-screen {width:100%;height:auto;overflow:visible;max-height:none;background:transparent;padding:0;margin:0;box-shadow:none;border-radius:0;color:#172a31;pointer-events:auto;}
#contacto.contact-editorial .ds-contact-header {border-top:1px solid #899089;padding-top:13px;margin-bottom:29px;}
#contacto.contact-editorial .ds-contact-header span {font:600 10px/1.4 system-ui;letter-spacing:.13em;color:#4f645c;}
#contacto.contact-editorial .ds-contact-header h2 {font:600 clamp(36px,3.6vw,53px)/1.06 var(--display,system-ui);color:#172a31;letter-spacing:-.055em;margin:26px 0 14px;}
#contacto.contact-editorial .ds-contact-header p {font:400 16px/1.6 var(--body,system-ui);color:#475a5c;margin:0;}
#contacto.contact-editorial .ds-contact-form {grid-template-columns:repeat(2,minmax(0,1fr));gap:21px 16px;}
#contacto.contact-editorial .ds-types {grid-column:1/-1;margin:0;padding:0;border:0;}
#contacto.contact-editorial .ds-types legend {font:600 13px/1.5 system-ui;margin-bottom:12px;color:#243b42;}
#contacto.contact-editorial .ds-type-options {display:flex;flex-wrap:wrap;gap:8px;}
#contacto.contact-editorial .ds-type-options button {min-height:44px;padding:10px 13px;background:transparent;border:1px solid #a2aaa1;border-radius:5px;color:#334645;font:500 12px/1.3 system-ui;cursor:pointer;transition:background .3s,color .3s,border-color .3s;}
#contacto.contact-editorial .ds-type-options button[aria-pressed=true] {background:#263e3a;color:#fffaf0;border-color:#263e3a;}
#contacto.contact-editorial .ds-field {display:grid;gap:8px;color:#263e3a;font:600 12px/1.4 system-ui;min-width:0;}
#contacto.contact-editorial .ds-field--wide {grid-column:1/-1;}
#contacto.contact-editorial .ds-field :is(input,select,textarea) {width:100%;min-width:0;min-height:47px;border:1px solid #a2aaa1;border-radius:5px;background:#f7f4ed;color:#172a31;font:400 16px/1.5 system-ui;padding:11px 12px;box-sizing:border-box;}
#contacto.contact-editorial .ds-field textarea {min-height:110px;resize:vertical;}
#contacto.contact-editorial .ds-submit-row {grid-column:1/-1;display:flex;flex-direction:column;align-items:stretch;gap:12px;}
#contacto.contact-editorial .ds-submit-row button {padding:16px 22px;min-height:53px;display:flex;justify-content:space-between;align-items:center;background:#263e3a;color:#fffaf0;border:1px solid #263e3a;border-radius:5px;font:600 14px/1.4 system-ui;cursor:pointer;transition:background .3s;}
#contacto.contact-editorial .ds-submit-row button:hover {background:#142b29;}
#contacto.contact-editorial .ds-submit-row small,#contacto.contact-editorial .ds-form-status {font:400 12px/1.6 system-ui;color:#4e615e;}
#contacto.contact-editorial :is(button,input,select,textarea,a):focus-visible {outline:2px solid #214c4b;outline-offset:4px;}
@media(max-width:1023px){#contacto.contact-editorial .contact__shell{gap:5%;grid-template-columns:minmax(0,.7fr) minmax(0,1fr);}#contacto.contact-editorial .ds-contact-header h2{font-size:39px}.editorial-photo-stage{margin-top:28px}.editorial-heading{font-size:8px}}
@media(max-width:767px){#contacto.contact-editorial{padding:62px 0 70px}#contacto.contact-editorial .contact__shell{grid-template-columns:1fr;gap:38px}.contact-editorial-gallery{order:2}.contact-editorial-form{order:1}.editorial-photo-stage{max-width:440px;margin:24px auto 30px}.editorial-caption h3{font-size:29px}#contacto.contact-editorial .ds-contact-header h2{font-size:clamp(36px,10vw,46px)}#contacto.contact-editorial .ds-contact-form{grid-template-columns:1fr}#contacto.contact-editorial .ds-field--wide{grid-column:auto}.editorial-heading{font-size:10px}}
@media(prefers-reduced-motion:reduce){.editorial-photo img,.editorial-detail-toggle span{transition:none}}

/* brand-buttons.css */
/* Revisión 43 · piezas de estudio: silueta editorial, no botones de imagen. */
:root{--wn-button-ink:#243e3a;--wn-button-paper:#f5efe5;--wn-button-radius:15px 5px 15px 5px}
.button,.cinema-copy .cinema-cta,.demo-action,.site-nav .site-nav__contact,
#contacto.contact-editorial .ds-submit-row button{border-radius:var(--wn-button-radius);min-height:48px;box-shadow:none;transition:background .2s,color .2s,border-color .2s,transform .2s}
.button--primary{background:var(--wn-button-ink);border-color:var(--wn-button-ink);color:var(--wn-button-paper)}
.button--primary:hover{background:#36524c;border-color:#36524c;box-shadow:none;transform:translateY(-1px)}
.button .button__icon,.cinema-copy .cinema-cta>svg{border-radius:7px 2px 7px 2px;transition:transform .2s;flex-shrink:0}
.cinema-copy .cinema-cta>svg{background:#243e3a}
.button:hover .button__icon{transform:translateY(2px)}
.cinema-copy .cinema-cta:hover>svg{transform:translateX(2px)}
.button:active,.cinema-copy .cinema-cta:active,.demo-action:active,
#contacto.contact-editorial .ds-submit-row button:active{transform:translateY(1px)}
#contacto.contact-editorial .ds-type-options button,.demo-options button,.web-contact-card>a{border-radius:10px 4px 10px 4px}
.ds-type-options button[aria-pressed="true"]{box-shadow:inset 0 -2px 0 #dfc18d55}
.cinema-motion-toggle{border-radius:12px 4px 12px 4px}
.cinema-force-motion .cinema-motion-toggle{display:inline-flex;align-items:center}
.editorial-detail-toggle{border-radius:0 0 8px 0;border-bottom:1px solid #6c8278}
.button:focus-visible,.cinema-copy .cinema-cta:focus-visible,.demo-action:focus-visible,
#contacto.contact-editorial :is(button,input,select,textarea):focus-visible{outline:3px solid #8c623c;outline-offset:4px}
/* Solo la entrada de estrellas acelera; los loops ambientales conservan su ritmo. */
@media(prefers-reduced-motion:no-preference){
 .hero--sequence .hero__gemini{animation-duration:.335s}
 .hero--sequence .hero__copy{animation-duration:.285s;animation-delay:1.665s}
 .hero--sequence .hero__core{animation-duration:.285s;animation-delay:1.375s}
 .hero--sequence .hero-person{animation-duration:.285s;animation-delay:1.575s}
 .hero--sequence .hero__caption,.hero--sequence .hero__continue{animation-duration:.165s;animation-delay:1.865s}
 .hero--sequence .hero-star{animation-duration:.4s;animation-delay:calc(1.45s + var(--fall-delay,0s))}
 .hero--sequence .hero__constellation{animation-duration:.265s;animation-delay:1.6s}
 .hero--sequence .constellation-trail{animation-duration:.765s;animation-delay:1.605s}
 .hero--sequence .constellation-trail--inner{animation-delay:1.685s}
}
/* ?motion=full es una elección explícita ya existente, también en modo reducido. */
.hero--force-motion.hero--sequence .hero__gemini{animation-duration:.335s!important}
.hero--force-motion.hero--sequence .hero__copy{animation-duration:.285s!important;animation-delay:1.665s!important}
.hero--force-motion.hero--sequence .hero__core{animation-duration:.285s!important;animation-delay:1.375s!important}
.hero--force-motion.hero--sequence .hero-person{animation-duration:.285s!important;animation-delay:1.575s!important}
.hero--force-motion.hero--sequence .hero__caption,.hero--force-motion.hero--sequence .hero__continue{animation-duration:.165s!important;animation-delay:1.865s!important}
.hero--force-motion.hero--sequence .hero-star{animation-duration:.4s!important;animation-delay:calc(1.45s + var(--fall-delay,0s))!important}
.hero--force-motion.hero--sequence .hero__constellation{animation-duration:.265s!important;animation-delay:1.6s!important}
.hero--force-motion.hero--sequence .constellation-trail{animation-duration:.765s!important;animation-delay:1.605s!important}
.hero--force-motion.hero--sequence .constellation-trail--inner{animation-delay:1.685s!important}
@media(max-width:767px){.button,.cinema-copy .cinema-cta{border-radius:12px 4px 12px 4px}.site-nav .site-nav__contact{margin-top:8px}}
@media(prefers-reduced-motion:reduce){.button,.button__icon,.cinema-copy .cinema-cta,.demo-action,.site-nav__contact,#contacto.contact-editorial .ds-submit-row button{transition:none!important}.button:hover,.button:active,.demo-action:active,.cinema-copy .cinema-cta:active{transform:none}}

/* studio-components.css */
/* Sistema editorial WN: bordes precisos, piezas funcionales, sin hardware. */
:root{--wn-button-radius:12px 12px 12px 3px;--wn-rule:#a5876040}
.button,.cinema-copy .cinema-cta,.demo-action,.site-nav .site-nav__contact,#contacto.contact-editorial .ds-submit-row button{border-radius:var(--wn-button-radius);padding-inline:22px;gap:18px;border-width:1px;transition:transform .3s ease,background .3s ease,color .3s ease}
.button__icon{border-left:1px solid currentColor;padding-left:12px}
.button--secondary{border-color:#b5a894;background:#f4eee4;color:#243e3a}
.cinema-copy .cinema-cta{border:1px solid #ac9574;background:#f4eee4;color:#263b37}
.demo-action{background:#243e3a;color:#faf4e9;border-color:#496159}
.service-card .studio-circuit,.sample-feature .studio-circuit{display:none}
.sample-feature{padding:24px;border:1px solid #baa27d55;border-radius:28px 28px 8px 28px;background:linear-gradient(135deg,#ffffff08,transparent 60%);margin-block:28px;box-sizing:border-box}
.sample-feature__meta{padding-bottom:16px;letter-spacing:.1em}
.sample-feature .sample{border:1px solid #baa27d70;border-radius:20px 20px 6px 20px;transform:none;box-shadow:0 14px 36px #0002;overflow:hidden}
.sample-feature .sample-shop__shape{width:100%;height:clamp(180px,22vw,280px);margin:12px 0 16px;background:none;transform:none;border-radius:12px;overflow:hidden}
.wn-product-photo{width:100%;height:100%;display:block;object-fit:cover;object-position:50% 48%;transition:transform .6s ease}
.sample-feature:hover .wn-product-photo{transform:scale(1.025)}
.wn-photo-note{font-size:10px;color:#c7bfaf;line-height:1.6;margin:12px 0 0}
.sample-feature .sample-shop__line{display:flex;flex-wrap:wrap;gap:8px;border-top:1px solid #baa27d50;padding-top:14px}
.sample-feature .sample-shop__line span{border:1px solid #baa27d50;border-radius:6px;padding:7px 10px}
.sample-feature .ledger-row{padding:14px 10px;border-bottom:1px solid #baa27d35;font-size:12px}
.sample-feature .ledger-row:not(.ledger-row--head)>span:last-child{color:#9ac9ad;font-weight:700}
.project-roadmap{border:1px solid #a5876055;border-radius:28px 28px 8px 28px;background:#f5efe5;padding:clamp(20px,3vw,38px);box-shadow:0 12px 40px #30251908}
.project-roadmap__list{gap:14px;align-items:stretch}
.project-roadmap__step{position:relative;grid-template-columns:42px minmax(0,1fr);gap:14px;padding:22px 18px;border:1px solid #c8bcaa;border-radius:16px 16px 4px 16px;background:#fffcf6;box-shadow:0 4px 0 #ded3c14d;transition:transform .3s ease}
.project-roadmap__step:hover{transform:translateY(-3px)}
.project-roadmap__number{width:40px;height:40px;border:1px solid #587168;border-radius:10px 10px 3px 10px;background:#e8eee8;color:#243e3a;font-size:12px;font-family:ui-monospace,monospace}
.project-roadmap__step h4{font-size:17px;line-height:1.25;margin:0 0 9px}
.project-roadmap__step p{font-size:13px;line-height:1.7;color:#59574f}
.project-roadmap__intro>p:last-child,.project-roadmap__note{font-size:13px;line-height:1.75}
.wn-step-mark{display:block;width:28px;height:28px;margin-top:15px;color:#587168}
.wn-step-mark svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.area__visual .studio-circuit,.scroll-world__stage .studio-circuit{inset:16px;border:1px solid #a5876040;border-radius:14px;overflow:hidden}
.area__visual .studio-circuit svg,.scroll-world__stage .studio-circuit svg{display:none}
.studio-circuit__coordinate{top:10px;right:12px;background:#f5efe5;color:#4b554e;opacity:1}
.samples__thread{inset:0 auto 0 0;width:1px;border:0;border-radius:0;background:#baa27d40;transform:none}
@media(max-width:767px){.sample-feature{padding:20px;margin-inline:0;width:100%;border-radius:22px 22px 6px 22px}.project-roadmap__step{padding:18px 14px}.project-roadmap__intro h3{line-height:1.08}.sample-feature .sample-shop__shape{height:230px}}
@media(prefers-reduced-motion:reduce){.project-roadmap__step,.wn-product-photo{transition:none}.project-roadmap__step:hover,.sample-feature:hover .wn-product-photo{transform:none}}

/* stellar-experience.css */
/* Un entorno compartido, siempre detrás del contenido real. */
.wn-environment-host{position:relative;isolation:isolate}
.wn-environment{position:absolute;inset:0;overflow:hidden;z-index:-1;pointer-events:none;border-radius:inherit}
.wn-environment__landscape{position:absolute;inset:-8%;background:url('/assets/stellar-atelier-46.jpg') 72% center/cover no-repeat;opacity:.9;transform:translate3d(0,0,0)}
.wn-environment::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#101a25cf 0%,#101a2580 43%,#101a2515 100%),linear-gradient(0deg,#101a25 0%,transparent 15%,transparent 88%,#101a25 100%)}
.wn-environment__trail{position:absolute;right:10%;top:0;width:1px;height:100%;background:linear-gradient(transparent,#e5c79288,transparent);transform:rotate(12deg);opacity:.6}
.wn-environment__star{position:absolute;right:18%;top:8%;width:30px;height:30px;color:#f2d8a5;z-index:1;opacity:.8;transform:translate3d(0,0,0)}
.wn-environment__star svg{width:100%;height:100%;fill:currentColor;filter:drop-shadow(0 0 10px #dfc69380)}
.wn-environment__halo{position:absolute;right:4%;top:33%;width:min(55vw,650px);aspect-ratio:1;border:1px solid #edd7b22b;border-radius:50%;background:radial-gradient(circle,#d0bb8e0a,transparent 68%);opacity:.7}
.cinema-world-index,.cinema-blueprint,.cinema-traces{display:none}
.cinema-world{background:#101a25}
.cinema-world.wn-environment-host{position:absolute;isolation:auto}
.cinema-world .wn-environment{z-index:0}
.cinema-product,.cinema-copy{position:relative;z-index:2}
.cinema-window{transform:none!important;border-radius:24px 24px 8px 24px;border-color:#c2b799;box-shadow:0 24px 64px #0005}
.cinema-window-bar{background:#e5e8df;padding:14px 20px}
.web-site-top{padding-block:14px;border-bottom:1px solid #87998c45}
.web-brand-mark{border-radius:9px 9px 3px 9px;background:#29483e;color:#fff}
.web-site-nav button{min-height:36px;border-radius:7px;transition:background .3s,color .3s}
.web-site-nav button[aria-pressed=true]{background:#29483e;color:#fff}
.web-panel--home{background:linear-gradient(120deg,#f5f1e6,#e7ecdf)}
.web-home-photograph{border-radius:42% 42% 12px 12px;overflow:hidden;border:1px solid #acbba7}
.web-service-list>div{background:#f9f7ee;border:1px solid #b6c3b055;border-radius:12px;padding:14px!important;margin-bottom:10px}
.web-contact-card{border-radius:18px 18px 5px 18px;box-shadow:0 12px 28px #29483e12}
#recorrido.wn-environment-host,#muestras.wn-environment-host{background:#101a25}
#recorrido .wn-environment__landscape{background-position:60% 75%;opacity:.85}
#muestras .wn-environment__landscape{background-position:80% 90%;opacity:.8}
#capacidades .wn-environment__landscape,#metodo .wn-environment__landscape,#contacto .wn-environment__landscape{opacity:.4;filter:saturate(.5)}
#capacidades .wn-environment::after,#metodo .wn-environment::after,#contacto .wn-environment::after{background:linear-gradient(90deg,#f1e7d8ef,#f1e7d8ba),linear-gradient(0deg,#f1e7d8,transparent 30%,#f1e7d8)}
#capacidades .wn-environment__star,#metodo .wn-environment__star,#contacto .wn-environment__star{color:#8b704c}
#contacto .wn-environment__halo{border-color:#a5876045}
.wn-experience-button{position:relative;isolation:isolate;overflow:hidden;transition:transform .3s ease,background .3s ease,color .3s ease}
.wn-experience-button::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 25%,#ffffff30 50%,transparent 75%);transform:translateX(-140%);z-index:-1;pointer-events:none}
.wn-experience-button:hover::after,.wn-experience-button:focus-visible::after{transform:translateX(140%);transition:transform .65s ease}
.wn-experience-button:hover{transform:translateY(-2px)}
.wn-experience-button:active{transform:translateY(1px) scale(.985)}
.wn-button-ripple{position:absolute;left:50%;top:50%;width:20px;height:20px;border:1px solid currentColor;border-radius:50%;pointer-events:none;animation:wn-button-ripple .6s ease-out forwards}
@keyframes wn-button-ripple{from{transform:translate(-50%,-50%) scale(.2);opacity:.65}to{transform:translate(-50%,-50%) scale(12);opacity:0}}
.cinema-motion-toggle{display:none!important}
.cinema-copy{padding:26px;border:1px solid #ead4b12b;border-radius:24px 24px 7px 24px;background:#101a25bd;box-shadow:0 16px 40px #0002}
.cinema-product-label{padding:12px 18px;background:#101a25b8;border:1px solid #ead4b12b;border-radius:14px 14px 0 0}
.cinema-product figcaption{padding:10px;background:#101a25bf;border-radius:0 0 12px 12px;margin-top:0}
.cinema-window{border:1px solid #dbcbac;box-shadow:0 0 0 5px #ead4b110,0 24px 64px #0005}
.cinema-cta.wn-experience-button{background:#ead7b3;border-color:#ead7b3;color:#172b29;border-radius:14px 14px 4px 14px;min-height:52px}
.cinema-cta>svg{width:36px;height:36px;border-radius:10px 10px 3px 10px;transition:transform .35s}
.cinema-cta:hover>svg{transform:translateX(3px) rotate(-15deg)}
.web-service-list>div{border-left:3px solid #688b78}
.sample-feature{background:#101a25c9;border-color:#dac5a965}
.web-panel--services{background:linear-gradient(135deg,#e5ecdf,#f6f1e5)}
.web-panel--contact{background:linear-gradient(135deg,#f3ead9,#e6eddf)}
.wn-environment__halo{transform-origin:center}
@media(max-width:767px){.wn-environment::after{background:linear-gradient(#101a25d4,#101a2566,#101a25d4)}.wn-environment__landscape{opacity:.85;background-position:80% center}.wn-environment__star{right:8%;width:22px;height:22px}.cinema-window{border-radius:18px 18px 5px 18px}.wn-environment__halo{width:85vw;right:-35%}}
@media(prefers-reduced-motion:reduce){.wn-experience-button,.wn-experience-button::after{transition:none!important}.wn-experience-button:hover,.wn-experience-button:active{transform:none}.wn-button-ripple{display:none}.wn-environment__landscape,.wn-environment__star{transform:none!important}}

/* business-experience-48.css */
/* Revisión 48: componentes deliberadamente distintos de las revisiones 43–47. */
:root{--display:'Segoe UI Variable Display','Segoe UI',Arial,sans-serif;--body:'Segoe UI Variable Text','Segoe UI',Arial,sans-serif}
.hero,.phone-showcase{--display:'Bricolage Grotesque','Arial Narrow','Segoe UI',sans-serif;--body:'DM Sans','Segoe UI',Arial,sans-serif}
body,h1,h2,h3,h4,button,input,select,textarea{font-family:var(--body)}
h1,h2,h3,h4{font-style:normal;letter-spacing:-.035em}
#recorrido h2,#capacidades h2,#metodo h2,.area__copy h3{font-family:'Segoe UI Variable Display','Segoe UI',Arial,sans-serif!important;font-style:normal;font-weight:650}
.wn-experience-button:is(.button,.cinema-cta,.demo-action,.ds-submit-row button){border-radius:999px!important;min-height:56px;padding:12px 24px!important;background:#b9e9dc!important;border:1px solid #d0fff0!important;color:#102f2d!important;font-size:14px;font-weight:700;gap:24px;box-shadow:0 5px 0 #37685e,0 12px 26px #0003;transition:transform .3s,box-shadow .3s,background .3s}
.wn-experience-button:is(.button,.cinema-cta,.demo-action,.ds-submit-row button):hover{background:#e2fff4!important;box-shadow:0 7px 0 #37685e,0 16px 34px #0004;transform:translateY(-2px)}
.wn-experience-button:is(.button,.cinema-cta,.demo-action,.ds-submit-row button):active{box-shadow:0 1px 0 #37685e;transform:translateY(4px)}
.cinema-cta.wn-experience-button>svg{width:34px;height:34px;background:#102f2d;color:#c2f4e4;border-radius:50%;padding:8px}
.button--quiet.wn-experience-button{background:transparent!important;border-color:#b9e9dc!important;color:#e4fff4!important;box-shadow:none}
.wn-experience-button:focus-visible{outline:3px solid #ecbb6a;outline-offset:5px}
.ds-type-options button{border-radius:999px!important;padding:10px 16px!important;border:1px solid #64766d!important;background:#eef1e8!important;color:#203d35!important;min-height:44px}
.ds-type-options button[aria-pressed=true]{background:#234b43!important;color:#f5fff9!important;border-color:#234b43!important;box-shadow:0 3px 0 #b4c9b9}
.cinema-copy{background:#081c2ddd;border-radius:18px;border-color:#c2e6dc42;box-shadow:0 16px 50px #0003}
.cinema-copy>p{color:#e3edf0;font-size:17px}
.cinema-window{border-radius:18px!important;background:#f2f3ed;box-shadow:0 18px 45px #0005!important}
.cinema-window-bar{background:#d6e4df;color:#344e47;font-size:11px}
.web-panel--home{background:#f1f5ec}.web-home-photograph{border-radius:12px}
.web-home-copy .web-page-title{font-family:var(--body);font-size:clamp(24px,2.6vw,36px);font-weight:750}
/* El cielo no depende de un bitmap ampliado: las estrellas son vectores. */
.wn-environment__landscape{background-image:radial-gradient(ellipse at 85% 28%,#2d5a6945,transparent 55%),radial-gradient(ellipse at 65% 90%,#d5ad6225,transparent 48%);opacity:1!important;filter:none!important}
.wn-crisp-sky{position:absolute;inset:0;width:100%;height:100%;color:#eef5ff;overflow:visible}
.hero__starscape{background-image:none!important;opacity:.8}
.hero--sequence-done .hero__gemini{display:none!important}
.hero__copy{min-width:0;max-width:100%}
.hero__actions{flex-wrap:wrap}
.hero__actions .button{min-width:0;max-width:100%}
@media(max-width:767px){.hero__actions{flex-direction:column!important;align-items:stretch!important}.hero__actions .button{width:100%!important;flex:none!important;justify-content:space-between;white-space:normal!important}}
.hero__desk::before{background-image:radial-gradient(ellipse,#26364788,transparent 72%)!important}
.wn-crisp-sky .stars-near{opacity:.8}.wn-crisp-sky .stars-far{opacity:.4}
@media(prefers-reduced-motion:no-preference){.wn-crisp-sky .stars-near{animation:wn-twinkle-48 4s ease-in-out 1 alternate}.wn-crisp-sky .stars-far{animation:wn-twinkle-48 4s ease-in-out 1 alternate}}
@keyframes wn-twinkle-48{to{opacity:.3}}
.wn-scene-canvas{position:absolute;inset:0;overflow:hidden;border-radius:inherit;background:#0b1725;perspective:900px;z-index:1;opacity:0}
.has-business-scene .wn-scene-canvas{opacity:1}
.wn-scene-ambient{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.17;pointer-events:none;z-index:-1;transition:background-image .5s}
.wn-scene-base{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transform-origin:center}
.wn-scene-fragments{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,1fr);pointer-events:none}
.wn-scene-fragment{background-repeat:no-repeat;background-size:400% 300%;backface-visibility:hidden}
.wn-scene-vignette{position:absolute;inset:0;background:linear-gradient(0deg,#071321c9,transparent 35%,#07132110);pointer-events:none}
.scroll-world__stage.has-business-scene .scroll-world__image{visibility:hidden}
.scroll-world__stage.has-business-scene{background-image:none!important}
.scroll-world__stage .studio-circuit{display:none}
.scroll-world__label,.scroll-world__caption{z-index:4;position:relative}
.scroll-world__label{position:absolute;background:#071c2ddc;border:1px solid #d6e8e636;border-radius:12px;padding:14px;backdrop-filter:none}
.scroll-world__caption{position:absolute;bottom:12px;left:18px;right:18px;color:#edf5f0;font-size:10px}
.scroll-world__caption{top:auto!important;height:auto!important;width:auto!important;max-width:none!important;margin:0;padding:7px 9px;line-height:1.5}
.wn-business-scene-name{position:absolute;top:20px;left:20px;padding:8px 12px;background:#071c2dd9;color:#f7edda;border:1px solid #eedcbb55;border-radius:8px;font:600 11px/1.4 var(--body);z-index:3}
.scroll-world__stage{border:1px solid #9fbbb866;border-radius:20px!important;box-shadow:0 24px 55px #0004;transform:none!important;min-height:380px}
.wn-world-cinematic .scroll-world__stage{width:100%;min-width:0;min-height:0;height:auto;aspect-ratio:16/9}
.scroll-world__chapter{background:#0a1e30f0!important;border:1px solid #badad042!important;border-radius:16px;padding:26px!important;box-shadow:0 16px 30px #0002}
.scroll-world__chapter h3,.scroll-world__chapter p{color:#edf5f2!important}
#recorrido h2,#recorrido .section-intro>p,#recorrido .scroll-world__current{color:#edf5f2!important}
#recorrido .scroll-world__head>p{color:#cfe1dc!important}
#recorrido .scroll-world__chapter a{color:#c1eddf!important}
.scroll-world__label{color:#edf5f2!important}
.scroll-world__label{bottom:55px!important;max-width:70%}
.scroll-world__label .scroll-world__current{font-size:12px;line-height:1.5}
.scroll-world__chapter p{font-size:15px;line-height:1.7}
.scroll-world__number{font-size:18px;color:#bdeddd!important;font-weight:700;border-bottom:2px solid #bdeddd;padding-bottom:10px}
.wn-smoke-48{position:absolute;left:3%;bottom:22%;width:45%;height:30%;background:radial-gradient(ellipse,#d5e3e759,transparent 70%);opacity:0;pointer-events:none}
.wn-scene-canvas[data-scene='0'] .wn-smoke-48{opacity:.55}
@media(prefers-reduced-motion:no-preference){.wn-scene-canvas[data-scene='0'] .wn-smoke-48{animation:wn-smoke-48 4s ease-in-out 1}}
.wn-world-flow .scroll-world__chapters{height:auto!important;min-height:0!important;display:grid;gap:20px}
.wn-world-flow .scroll-world__stage{position:relative!important;top:auto!important;width:100%!important;max-width:100%;min-width:0;aspect-ratio:auto;height:310px}
.wn-world-flow .scroll-world__chapter{min-width:0;max-width:100%;overflow:hidden}
.wn-world-flow .scroll-world__chapter{position:relative!important;opacity:1!important;visibility:visible!important;transform:none!important}
.wn-world-flow .scroll-world__chapter::before{content:'';display:block;position:relative;inset:auto;min-height:180px;margin:-20px -20px 22px;background:var(--chapter-scene) center/cover no-repeat;border-radius:15px 15px 0 0;opacity:1;transform:none}
.wn-world-cinematic .scroll-world__layout{display:grid!important;grid-template-columns:minmax(0,1.15fr) minmax(300px,0.85fr)!important;align-items:start!important;gap:clamp(24px,3vw,44px)!important}
.wn-world-cinematic .wn-chapter-video49{display:none!important}
.wn-world-cinematic .scroll-world__chapters{display:grid!important;grid-template-columns:1fr!important;grid-template-rows:1fr!important;min-height:340px!important;position:relative}
.wn-world-cinematic .scroll-world__chapter{grid-column:1!important;grid-row:1!important;width:100%!important;min-height:0!important;transition:opacity .35s ease,transform .35s ease!important}
.wn-world-cinematic .scroll-world__chapter:not(.is-current){opacity:0!important;visibility:hidden!important;pointer-events:none!important;transform:translateY(12px)!important}
.wn-world-cinematic .scroll-world__chapter.is-current{opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:translateY(0)!important}

@keyframes wn-smoke-48{to{transform:translateX(-30px) scale(1.25);opacity:.15}}
@media(max-width:767px){.cinema-copy{padding:22px}.wn-experience-button:is(.button,.cinema-cta,.demo-action,.ds-submit-row button){min-height:52px;font-size:13px}.scroll-world__stage{min-height:310px}.scroll-world__chapter{padding:20px!important}.wn-scene-fragments{perspective:none}}
@media(prefers-reduced-motion:reduce){.wn-experience-button,.wn-crisp-sky *{animation:none!important;transition:none!important}.wn-experience-button:hover,.wn-experience-button:active{transform:none!important}}

/* service-scenes-48.css */
/* Load last. All hooks are applied outside #phone-showcase by the JS module. */
.area.ss48-area { --ss48-accent:#465e50; min-width:0; }
.area.ss48-area{position:relative;isolation:isolate}
.area.ss48-area::before{content:'';position:absolute;inset:0 -20px;z-index:-1;pointer-events:none;border-radius:24px;background:radial-gradient(ellipse at 92% 45%,var(--service-wash,#dad4bb66),transparent 65%)}
#area-comercio{--service-wash:#c7d9d088}
#area-finanzas{--service-wash:#9bc7b055}
#area-documentos{--service-wash:#e2bb8955}
#area-operaciones{--service-wash:#c4c3de66}
#area-web{--service-wash:#a7cbd966}
#area-contenido{--service-wash:#deb9a566}
.area.ss48-area .area__index span {
  color:#596d5e; font:400 clamp(42px,5.5vw,72px)/1 ui-serif,Georgia,serif;
  letter-spacing:-.065em; font-variant-numeric:lining-nums;
}
.area.ss48-area .area__index i { width:30px; margin-top:16px; background:#a6875c; }
.area.ss48-area .area__visual.ss48-host {
  display:block; min-width:0; width:100%; min-height:0; transform:none;
  animation:none; opacity:1; visibility:visible; isolation:isolate;
}
.ss48-host > .studio-circuit { display:none; }
.ss48-scene {
  --ss48-ink:#26392e; --ss48-muted:#46564b; --ss48-rule:#26392e30;
  position:relative; width:100%; min-width:0; padding:clamp(16px,2vw,24px);
  border:1px solid #7e80644d; border-radius:18px 18px 5px 18px;
  background:radial-gradient(ellipse at 90% 0,#e4d6b5,transparent 65%),
    repeating-linear-gradient(0deg,#7c664204 0 1px,transparent 1px 4px),#f4eee2;
  box-shadow:0 16px 34px #26392e12,0 1px 0 #fff9 inset;
  color:var(--ss48-ink); font:400 14px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif;
  overflow:hidden; box-sizing:border-box; text-align:left;
}
.ss48-scene *, .ss48-ledger *, .ss48-roadmap * { box-sizing:border-box; }
.ss48-scene [hidden] { display:none !important; }
.ss48-scene .ss48-head { margin:0 0 18px; padding:0 0 15px; border-bottom:1px solid var(--ss48-rule); }
.ss48-scene .ss48-kicker { display:block; font:600 10px/1.6 system-ui,sans-serif; letter-spacing:.1em; }
.ss48-scene .ss48-head h4 { margin:8px 0; font:650 clamp(19px,2vw,25px)/1.18 system-ui,sans-serif; letter-spacing:-.04em; color:var(--ss48-ink); }
.ss48-scene .ss48-head p { margin:0; font-size:12px; line-height:1.65; color:var(--ss48-muted); }
.ss48-scene h5 { font:650 14px/1.35 system-ui,sans-serif; letter-spacing:-.015em; margin:0; color:inherit; }
.ss48-scene p { margin:0; }
.ss48-scene .ss48-note, .ss48-scene .ss48-status { font:400 11px/1.65 system-ui,sans-serif; margin:14px 0 0; color:var(--ss48-muted); overflow-wrap:anywhere; }
.ss48-scene .ss48-status { min-height:3.3em; }
.ss48-controls { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.ss48-scene .ss48-button {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; max-width:100%; padding:10px 14px; margin:0;
  border:1px solid #466653; border-radius:8px 8px 3px 8px;
  background:#294638; color:#fffaf0; font:600 12px/1.4 system-ui,sans-serif;
  cursor:pointer; text-align:center; white-space:normal;
}
.ss48-scene .ss48-button:hover { background:#1e3529; }
.ss48-scene .ss48-button:disabled { background:#e3dfd4; border-color:#868b7d; color:#555e55; cursor:default; }
.ss48-scene button:focus-visible,.ss48-scene a:focus-visible,.ss48-scene select:focus-visible,.ss48-scene [tabindex]:focus-visible { outline:3px solid #b05228; outline-offset:3px; }
.ss48-scene .ss48-folio { font:600 11px/1.4 ui-monospace,monospace; letter-spacing:.05em; }

/* 01 / A horizontal merchandising rail; manual navigation, no autoplay. */
.ss48-catalog { background:radial-gradient(ellipse at 100% 10%,#e6cbb3,transparent 60%),repeating-linear-gradient(90deg,#a5713206 0 1px,transparent 1px 6px),#f4e8d8; }
.ss48-carousel { position:relative; display:flex; gap:12px; margin:0; padding:3px 3px 12px; list-style:none; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding:3px; scrollbar-width:thin; scrollbar-color:#6c7058 #e6d8c2; }
.ss48-product { flex:0 0 82%; min-width:0; scroll-snap-align:start; background:#fffbf2; border:1px solid #ad8e654d; border-radius:10px; overflow:hidden; }
.ss48-image { position:relative; height:clamp(130px,15vw,190px); background:#ded5c2; overflow:hidden; }
.ss48-image img { display:block; width:100%; height:100%; object-fit:cover; }
.ss48-image-fallback { display:grid; place-items:center; padding:16px; width:100%; height:100%; color:#4c5142; font-size:12px; background:repeating-linear-gradient(135deg,#ede7da 0 12px,#e1d9c9 12px 13px); }
.ss48-source { display:block; min-height:3.3em; padding:8px 12px 0; color:#535c4c; font-size:10px; line-height:1.6; }
.ss48-product-copy { padding:12px; }
.ss48-product-copy .ss48-folio { float:right; color:#686a56; }
.ss48-product-copy h5 { margin-right:24px; }
.ss48-product-copy p { margin-top:4px; font-size:12px; color:#59614f; }
.ss48-tools { height:clamp(130px,15vw,190px); display:grid; place-items:center; background:radial-gradient(ellipse,#dfc192,transparent 70%),#eadbc1; }
.ss48-tools svg { width:155px; max-width:90%; height:120px; fill:#f2e7d5; stroke:#4b5141; stroke-width:2.8; stroke-linecap:round; stroke-linejoin:round; }

/* 02 / A legible small administrative table, rather than invented KPIs. */
.ss48-admin { background:linear-gradient(155deg,#dce9dd,transparent 60%),repeating-linear-gradient(0deg,#37584606 0 1px,transparent 1px 5px),#edf1e7; }
.ss48-admin-bar { display:flex; gap:10px; justify-content:space-between; flex-wrap:wrap; padding:12px 14px; background:#294638; color:#fffaf0; border-radius:8px 8px 0 0; font-size:12px; }
.ss48-admin-bar span { color:#e0eddf; font-size:11px; }
.ss48-table { width:100%; table-layout:fixed; border-collapse:collapse; color:#263d2e; font-size:12px; background:#fafcf4; }
.ss48-table caption { caption-side:bottom; padding:10px; border-bottom:1px solid #a8b7a4; text-align:left; font-size:11px; color:#4c5c4e; }
.ss48-table th,.ss48-table td { padding:12px 8px; border-bottom:1px solid #b9c5b2; text-align:left; overflow-wrap:anywhere; }
.ss48-table th { font-weight:600; }
.ss48-table thead { font-size:11px; background:#e1e8d9; }
.ss48-table th:nth-child(2),.ss48-table td:nth-child(2) { width:16%; text-align:center; font-variant-numeric:tabular-nums; }
.ss48-table th:nth-child(3) { width:39%; }
.ss48-tag { display:inline-block; padding:3px 5px; border-radius:4px; background:#e4ebdc; color:#334b38; font-size:10px; }

/* 03 / Concept writer image + DOM pen. This is photo motion, not video. */
.ss48-documents { --ss48-ink:#4b3327; --ss48-muted:#654c3e; --ss48-rule:#654c3e30; background:radial-gradient(ellipse at 90% 15%,#efd9ba,transparent 65%),repeating-linear-gradient(0deg,#8e694208 0 1px,transparent 1px 5px),#f8efe0; }
.ss48-document-photo { border:1px solid #af94714d; background:#fff8ec; border-radius:8px; overflow:hidden; }
.ss48-document-photo .ss48-image { height:155px; }
.ss48-document-photo .ss48-source { padding-bottom:8px; }
.ss48-writing { position:relative; height:44px; margin:10px 10px 5px; overflow:hidden; }
.ss48-ink { position:absolute; left:5%; bottom:12px; width:75%; height:2px; background:#795b35; transform-origin:left; }
.ss48-pen { position:absolute; left:74%; bottom:12px; width:9px; height:34px; border:1px solid #48362c; border-radius:3px 3px 0 0; background:linear-gradient(90deg,#7c4d32 50%,#be8961 50%); transform:rotate(30deg); transform-origin:50% 100%; }
.ss48-pen::after { content:''; position:absolute; bottom:-6px; left:1px; border-left:3px solid transparent; border-right:3px solid transparent; border-top:6px solid #48362c; }
.ss48-doc-list { list-style:none; padding:0; margin:0; }
.ss48-doc-list li { display:grid; grid-template-columns:30px minmax(0,1fr); gap:12px; padding:12px 0; border-top:1px solid #8e69423d; }
.ss48-letter { display:grid; place-items:center; align-self:start; width:28px; height:31px; border:1px solid #a28664; background:#fff9ef; font:500 18px/1 Georgia,serif; }
.ss48-doc-list p { font-size:12px; line-height:1.6; margin:4px 0 0; color:var(--ss48-muted); }

/* 04 / Four stable slots, one sample task moving between them. */
.ss48-workflow { --ss48-ink:#233f4b; --ss48-muted:#3d5964; --ss48-rule:#36546430; background:radial-gradient(ellipse at 10% 0,#d3e4e6,transparent 65%),repeating-linear-gradient(90deg,#436f8305 0 1px,transparent 1px 7px),#e9eef0; }
.ss48-flow { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:0; padding:0; list-style:none; }
.ss48-flow > li { padding:12px; min-width:0; border:1px solid #b0c1c6; background:#f8fbf8; border-radius:8px; }
.ss48-flow > li[aria-current] { border-color:#305b67; background:#dcebee; box-shadow:inset 3px 0 #305b67; }
.ss48-flow > li.ss48-complete { border-color:#889f97; background:#e6ede5; }
.ss48-flow h5 { margin:7px 0 9px; }
.ss48-task-slot { min-height:78px; }
.ss48-task { position:relative; border:1px solid #496b73; border-radius:5px; background:#284d59; padding:9px; color:#fffaf0; font-size:11px; }
.ss48-task b,.ss48-task small { display:block; overflow-wrap:anywhere; }
.ss48-task small { font-size:10px; margin-top:4px; color:#dfede9; }

/* 05 / An actual mini page and local form, with no hardware framing. */
.ss48-website { background:radial-gradient(ellipse at 100% 0,#d6dfc0,transparent 60%),repeating-linear-gradient(0deg,#56673b05 0 1px,transparent 1px 6px),#efeddc; }
.ss48-minisite { overflow:hidden; border:1px solid #88927c; background:#fcfcf2; border-radius:5px; }
.ss48-mini-nav { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; padding:12px 16px; border-bottom:1px solid #c6ceba; font-size:11px; }
.ss48-mini-nav a { display:inline-flex; align-items:center; min-height:44px; color:#294638; text-decoration:underline; text-underline-offset:3px; }
.ss48-mini-hero { padding:20px 16px; background:radial-gradient(ellipse at 100% 100%,#d0ddba,transparent 65%),#e8eddc; }
.ss48-mini-hero > span { font-size:10px; letter-spacing:.08em; }
.ss48-scene .ss48-mini-hero h5 { margin:10px 0; font-size:24px; line-height:1.16; letter-spacing:-.04em; max-width:18ch; }
.ss48-mini-hero p { font-size:12px; line-height:1.7; color:#41533d; }
.ss48-form { padding:16px; display:grid; gap:10px; }
.ss48-form label { font-size:12px; font-weight:600; }
.ss48-form select { min-height:44px; padding:10px; width:100%; min-width:0; color:#273d2f; background:#fffef7; border:1px solid #7f9078; border-radius:4px; font:400 16px/1.4 system-ui,sans-serif; }
.ss48-form .ss48-status { margin:0; }

/* 06 / Editorial planning, not a dashboard of fabricated engagement. */
.ss48-editorial { --ss48-ink:#4b3732; --ss48-muted:#644f48; --ss48-rule:#644f4830; background:radial-gradient(ellipse at 90% 0,#eccfc2,transparent 65%),repeating-linear-gradient(90deg,#a35c4006 0 1px,transparent 1px 7px),#f4e8dd; }
.ss48-calendar { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.ss48-calendar button { display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:12px 8px; min-height:110px; min-width:0; border:1px solid #b49c8c; border-radius:6px; background:#fff9ef; color:#563c30; text-align:left; cursor:pointer; font-family:system-ui,sans-serif; overflow-wrap:anywhere; }
.ss48-calendar button[aria-pressed="true"] { background:#63432e; border-color:#63432e; color:#fff8ed; }
.ss48-calendar span { font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.ss48-calendar b { font-size:12px; }
.ss48-calendar small { font-size:10px; line-height:1.5; }
.ss48-editorial-detail { min-height:150px; margin-top:16px; padding:18px; border-left:3px solid #987050; background:#fff9ed; box-shadow:0 6px 14px #563c300c; }
.ss48-editorial-detail h5 { margin:10px 0; }
.ss48-editorial-detail p { font-size:12px; line-height:1.7; }

/* Existing sample wall: sage ink with cream type, no changed claims. */
.sample-feature .sample-ledger--wall.ss48-ledger {
  min-width:0; padding:22px; color:#fff9e9; clip-path:none; transform:none;
  background:radial-gradient(ellipse at 100% 0,#45604c,transparent 70%),
    repeating-linear-gradient(90deg,#e0e8c704 0 1px,transparent 1px 5px),#223d30;
  border:1px solid #71896a; box-shadow:0 15px 38px #0003;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
}
.ss48-ledger .sample__stamp { position:static; display:inline-block; margin-bottom:16px; transform:none; border-color:#c6d3ae; color:#faf3df; font-size:10px; }
.ss48-ledger .sample__eyebrow { color:#e1ead1; font-size:11px; line-height:1.6; }
.sample-feature .ss48-ledger .ledger-row { grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) 20px; gap:10px; border-color:#b6c9a64d; padding:14px 0; color:#fff9e9; font-size:13px; line-height:1.6; }
.sample-feature .ss48-ledger .ledger-row--head { color:#e1ead1; font-size:11px; letter-spacing:.04em; }
.sample-feature .ss48-ledger .ledger-row:not(.ledger-row--head)>span:last-child { color:#d7edba; }
.ss48-ledger .ss48-ledger-note { margin:16px 0 0; color:#e1ead1; font:400 11px/1.65 system-ui,sans-serif; }

/* Roadmap: one chronological column of editorial rows, textured paper. */
.project-roadmap.ss48-roadmap {
  color:#27392e; border:1px solid #b7aa8b; border-radius:8px;
  background:radial-gradient(ellipse at 0 0,#e6deca,transparent 65%),
    repeating-linear-gradient(0deg,#6b5b3606 0 1px,transparent 1px 4px),#f4efe2;
  padding:clamp(20px,3.5vw,42px); box-shadow:0 12px 28px #30251908;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
}
.ss48-roadmap .project-roadmap__intro h3 { font:500 clamp(27px,3vw,39px)/1.13 system-ui,sans-serif; color:#27392e; letter-spacing:-.05em; }
.ss48-roadmap .project-roadmap__intro h3 em { color:#476347; font-weight:500; }
.ss48-roadmap .project-roadmap__intro .eyebrow { color:#45563d; font:600 11px/1.65 system-ui,sans-serif; letter-spacing:.06em; }
.ss48-roadmap .project-roadmap__intro>p:last-child,.ss48-roadmap .project-roadmap__note { font:400 14px/1.8 system-ui,sans-serif; color:#4c5647; }
.ss48-roadmap .project-roadmap__list { grid-template-columns:minmax(0,1fr); gap:0; border-top:1px solid #b1af99; }
.ss48-roadmap .project-roadmap__step { grid-template-columns:44px minmax(0,1fr); gap:16px; padding:22px 0; border:0; border-bottom:1px solid #b1af99; border-radius:0; background:transparent; box-shadow:none; transform:none; transition:none; }
.ss48-roadmap .project-roadmap__step:hover { transform:none; }
.ss48-roadmap .project-roadmap__number { place-items:start; align-items:start; width:auto; height:auto; padding-top:1px; border:0; border-radius:0; background:none; color:#55704e; font:400 27px/1.2 Georgia,serif; letter-spacing:-.05em; }
.ss48-roadmap .project-roadmap__step h4 { color:#27392e; font:650 18px/1.35 system-ui,sans-serif; margin:0 0 7px; letter-spacing:-.015em; }
.ss48-roadmap .project-roadmap__step p { color:#4c5647; font:400 14px/1.8 system-ui,sans-serif; max-width:64ch; }
.ss48-roadmap .wn-step-mark { display:none; }
.ss48-roadmap .project-roadmap__note { border-top:0; padding-top:0; }

@media (max-width:920px) {
  .project-roadmap.ss48-roadmap { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:767px) {
  .area.ss48-area .area__visual.ss48-host { grid-column:1 / -1; margin-top:12px; }
  .ss48-scene { padding:16px; }
  .ss48-image,.ss48-tools { height:170px; }
  .ss48-document-photo .ss48-image { height:155px; }
  .ss48-roadmap .project-roadmap__step { padding:20px 0; gap:12px; grid-template-columns:36px minmax(0,1fr); }
  .sample-feature .sample-ledger--wall.ss48-ledger { width:100%; padding:18px; }
}
@media (max-width:380px) {
  .ss48-calendar { grid-template-columns:minmax(0,1fr); }
  .ss48-calendar button { min-height:44px; flex-direction:row; flex-wrap:wrap; align-items:center; gap:10px; }
  .ss48-flow > li { padding:9px; }
  .ss48-scene .ss48-mini-hero h5 { font-size:21px; }
}
@media (prefers-reduced-motion:no-preference) {
  .ss48-documents.ss48-arrived .ss48-ink { animation:ss48-write-line 1s .1s both; }
  .ss48-documents.ss48-arrived .ss48-pen { animation:ss48-write-pen 1s .1s both; }
}
@keyframes ss48-write-line { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes ss48-write-pen { from { left:5%; } to { left:74%; } }
@media (prefers-reduced-motion:reduce) {
  .ss48-scene,.ss48-scene * { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}
.motion-lite .ss48-scene *, .cinema-paused .ss48-scene * { animation:none !important; }

/* motion-49.css */
/* Vídeos y construcción DOM: enchufes reemplazados por plug-52. */
.wn-scene-video49{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;pointer-events:none;opacity:0;transition:opacity .3s;background:#081e2b}
.wn-scene-video49.is-ready{opacity:1}
.wn-chapter-video49{display:none;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:12px;margin-bottom:20px;background:#081e2b}
.wn-world-flow .wn-chapter-video49{display:block}
.wn-world-flow .has-chapter-video49::before{display:none}
.wn-world-flow:has(.wn-chapter-video49) .scroll-world__stage{display:none!important}
.wn-scene-canvas.has-video49 .wn-scene-fragments,.wn-scene-canvas.has-video49 .wn-smoke-48{display:none}
.wn-scene-canvas.has-video49 .wn-business-scene-name{z-index:5}
.ss48-built49 .ss48-admin-bar,.ss48-built49 .ss48-letter{position:relative}
.ss48-built49 .ss48-admin-bar::after{content:'';position:absolute;left:12px;right:12px;bottom:0;height:2px;background:#b7edbf;transform-origin:left;opacity:.7}
.ss48-built49.ss48-documents .ss48-writing{background:repeating-linear-gradient(0deg,transparent 0 14px,#795b3526 14px 15px);border-radius:5px}
.ss48-built49 .ss48-letter{box-shadow:0 3px 0 #795b3522,0 7px 13px #795b3515;border-radius:6px}
.ss48-built49 .ss48-task-slot{background:linear-gradient(90deg,#284d5910 1px,transparent 1px),linear-gradient(#284d5910 1px,transparent 1px);background-size:12px 12px;border-radius:5px}
@media(prefers-reduced-motion:reduce){.wn-connector49 svg,.wn-scene-video49{transition:none}.wn-connector49 svg{transform:none!important}}

/* video-interaction-51.css */
/* Indicadores nítidos del recorrido: 01 a 06 y progreso visible en todo momento */
.scroll-world__stage .scroll-world__label {
  display: flex !important;
  flex-direction: column !important;
  position: absolute !important;
  bottom: 18px !important;
  left: 18px !important;
  z-index: 10 !important;
  background: rgba(7, 28, 45, 0.88) !important;
  border: 1px solid rgba(214, 232, 230, 0.3) !important;
  border-radius: 14px !important;
  padding: 12px 18px !important;
  color: #edf5f2 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  max-width: min(85%, 340px) !important;
  pointer-events: none !important;
  transition: transform 0.25s ease, opacity 0.25s ease !important;
}
.scroll-world__stage .scroll-world__label p {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  margin: 0 !important;
}
.scroll-world__stage .scroll-world__count {
  color: #8ce4cb !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}
.scroll-world__stage .scroll-world__current {
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
}
.scroll-world__stage .scroll-world__progress {
  display: block !important;
  width: 100% !important;
  height: 4px !important;
  background: rgba(255, 255, 255, 0.18) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  margin-bottom: 8px !important;
}
.scroll-world__stage .scroll-world__progress i {
  display: block !important;
  height: 100% !important;
  background: linear-gradient(90deg, #38ef7d, #11998e) !important;
  border-radius: 999px !important;
  transition: width 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
.wn-business-scene-name {
  position: absolute !important;
  top: 18px !important;
  left: 18px !important;
  z-index: 10 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 14px !important;
  background: rgba(7, 28, 45, 0.88) !important;
  color: #f7edda !important;
  border: 1px solid rgba(238, 220, 187, 0.35) !important;
  border-radius: 999px !important;
  font: 600 12px/1.3 var(--body) !important;
  letter-spacing: 0.02em !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35) !important;
  pointer-events: none !important;
}
.wn-scene-canvas.has-video49 .wn-scene-vignette {
  opacity: 0.2;
}
.wn-scene-video49 {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  pointer-events: none !important;
  transition: opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1), transform 0.22s ease-out !important;
}
.wn-world-flow .scroll-world__chapter::before,
.wn-world-flow .wn-chapter-video49 {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  border-radius: 12px;
}
.wn-world-flow .scroll-world__chapter > .scroll-world__number {
  grid-column: 1;
}
.wn-world-flow .scroll-world__chapter > div {
  grid-column: 2;
  min-width: 0;
}
.scroll-world__stage .scroll-world__caption {
  position: absolute !important;
  bottom: 18px !important;
  right: 18px !important;
  left: auto !important;
  z-index: 10 !important;
  margin: 0 !important;
  padding: 5px 12px !important;
  background: rgba(7, 28, 45, 0.72) !important;
  border: 1px solid rgba(214, 232, 230, 0.2) !important;
  border-radius: 8px !important;
  color: #c9ded9 !important;
  font-size: 11px !important;
  line-height: 1.3 !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  pointer-events: none !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}



/* layout-52.css */
/*
 * Revisión 52 · Proporciones y lectura responsive.
 * Cargar después de las hojas existentes. No requiere clases ni cambios de JS.
 * Alcance: hero, servicios, cine, recorrido, método y contacto editorial.
 * El teléfono, los enchufes, los CTA, los fondos y la coreografía quedan fuera.
 */

:is(#inicio.hero, #capacidades, #studio-cinema, #recorrido, #metodo, #contacto.contact-editorial) {
  --layout52-content-max: 1240px;
  --layout52-gutter: clamp(20px, 4vw, 56px);
  --layout52-gap: clamp(20px, 3vw, 40px);
}

:is(#capacidades, #recorrido, #metodo, #contacto.contact-editorial) > .section-shell,
#inicio.hero > .hero__inner {
  width: min(calc(100% - 2 * var(--layout52-gutter)), var(--layout52-content-max));
  max-width: var(--layout52-content-max);
  margin-inline: auto;
}

/* Dos bloques independientes; las coordenadas de la constelación no cambian. */
#inicio .hero__inner {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: var(--layout52-gap);
  min-height: min(720px, calc(100svh - 76px));
  padding-block: clamp(48px, 7svh, 72px) clamp(84px, 10svh, 112px);
}

#inicio :is(.hero__copy, .hero__desk) { min-width: 0; }
#inicio .hero__copy { max-width: 100%; }
#inicio .hero__copy h1 {
  max-width: 100%;
  font-size: clamp(38px, 4.6vw, 68px);
  line-height: 1.04;
  overflow-wrap: break-word;
}
#inicio .hero__lead {
  max-width: 48ch;
  margin-top: 22px;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.65;
}
#inicio .hero__desk { min-height: clamp(385px, 54svh, 520px); }
#inicio .hero__core-title { font-size: clamp(24px, 2.3vw, 32px); line-height: 1.08; }
#inicio .hero__note { font-size: 12px; line-height: 1.6; }
/* Separar el pie de la constelación del botón al pie del personaje. */
#inicio .hero__caption {
  bottom: -34px;
  right: 0;
  max-width: min(100%, 440px);
  line-height: 1.6;
  text-align: right;
}

/* Servicios: número, texto y escena comparten el inicio de la misma fila. */
#capacidades { padding-block: clamp(56px, 6vw, 88px) clamp(64px, 7vw, 96px); }
#capacidades .chapter-head { align-items: flex-start; margin-bottom: 32px; }
#capacidades .chapter-head h2,
#recorrido .scroll-world__head h2,
#metodo .approach__heading h2 {
  font-size: clamp(34px, 4.2vw, 60px);
  line-height: 1.08;
  overflow-wrap: break-word;
}
#capacidades .capability-index {
  max-width: 1040px;
  gap: 16px;
  margin-bottom: 32px;
}
#capacidades .capability-index a {
  width: 56px;
  min-width: 0;
  min-height: 52px;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}
/* El tamaño de 9px estaba en el span, no en el enlace que lo contiene. */
#capacidades .capability-index a > span { width: 36px; height: 36px; font-size: 14px; }
#capacidades .capability-index__line { top: 18px; }
#capacidades .area {
  grid-template-columns: 60px minmax(0, .95fr) minmax(0, 1.05fr);
  align-items: start;
  column-gap: clamp(20px, 2.5vw, 36px);
  row-gap: 20px;
  padding: clamp(32px, 3.6vw, 52px) 0;
}
#capacidades .area > :is(.area__index, .area__main, .area__visual) {
  min-width: 0;
  align-self: start;
  margin-top: 0;
}
#capacidades .area__index { padding-top: 0; }
#capacidades .area__index span { font-size: clamp(42px, 4.3vw, 60px); line-height: 1; }
#capacidades .area__overline { margin: 0 0 10px; font-size: 11px; line-height: 1.5; }
#capacidades .area__main h3 { font-size: clamp(26px, 2.8vw, 40px); line-height: 1.12; }
#capacidades .area__intro { font-size: 15px; line-height: 1.65; margin-block: 14px 16px; }
#capacidades .area__tasks { gap: 8px 14px; }
#capacidades .area__tasks li { font-size: 12px; line-height: 1.6; }
#capacidades .area__details { margin-top: 16px; }
#capacidades .area__details summary { font-size: 13px; line-height: 1.5; }
#capacidades .area__detail-content p { font-size: 13px; line-height: 1.65; }
#capacidades .area__detail-content .detail-label { font-size: 11px; }
#capacidades .area.ss48-area .area__visual.ss48-host { width: 100%; min-height: 0; margin: 0; }
#capacidades :is(.capabilities__note, .capabilities__limit) { font-size: 13px; line-height: 1.65; }

/* Mini escenas: legibilidad sin escalar ni recortar el catálogo móvil. */
#capacidades .ss48-scene .ss48-head h4 { font-size: clamp(22px, 2vw, 27px); line-height: 1.2; }
#capacidades .ss48-scene :is(.ss48-head p, .ss48-product-copy p, .ss48-doc-list p, .ss48-mini-hero p, .ss48-editorial-detail p) {
  font-size: 14px;
  line-height: 1.65;
}
#capacidades .ss48-scene :is(.ss48-note, .ss48-status, .ss48-source) { font-size: 12px; line-height: 1.6; }
#capacidades .ss48-scene :is(.ss48-kicker, .ss48-folio) { font-size: 11px; line-height: 1.5; }
#capacidades .ss48-scene h5 { font-size: 16px; line-height: 1.35; }
#capacidades .ss48-table { font-size: 13px; }
#capacidades .ss48-table :is(caption, thead),
#capacidades .ss48-tag { font-size: 12px; line-height: 1.5; }
#capacidades .ss48-task { font-size: 13px; line-height: 1.5; }
#capacidades .ss48-task small,
#capacidades .ss48-calendar small { font-size: 12px; line-height: 1.5; }
#capacidades .ss48-calendar b { font-size: 14px; line-height: 1.4; }

/* Cine: más ancho para las demos; el sticky y la activación siguen en JS. */
#studio-cinema .cinema-scene {
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: var(--layout52-gap);
  padding-inline: max(var(--layout52-gutter), calc((100% - var(--layout52-content-max)) / 2));
  padding-block: 144px 88px;
}
#studio-cinema:not(.cinema-immersive) .cinema-scene { min-height: 0; }
#studio-cinema :is(.cinema-heading, .cinema-footer) {
  left: max(var(--layout52-gutter), calc((100% - var(--layout52-content-max)) / 2));
  right: max(var(--layout52-gutter), calc((100% - var(--layout52-content-max)) / 2));
}
#studio-cinema :is(.cinema-copy, .cinema-product) { min-width: 0; max-width: 100%; }
#studio-cinema .cinema-copy { padding: 24px; }
#studio-cinema .cinema-copy h2 {
  font-size: clamp(30px, 3.2vw, 46px);
  line-height: 1.12;
  margin-block: 18px;
  overflow-wrap: break-word;
}
#studio-cinema .cinema-copy > p { font-size: 16px; line-height: 1.65; }
#studio-cinema .cinema-copy details { margin-block: 20px; }
#studio-cinema .cinema-copy details p { font-size: 14px; line-height: 1.6; }
#studio-cinema .cinema-product { width: 100%; }
#studio-cinema .cinema-product-label { font-size: 11px; line-height: 1.5; }
#studio-cinema .cinema-product figcaption { font-size: 12px; line-height: 1.5; }
#studio-cinema .cinema-window-bar { font-size: 11px; line-height: 1.4; }
#studio-cinema .cinema-demo:not(.cinema-demo--0) { min-height: 0; padding: 20px; }
#studio-cinema .cinema-demo h3 { font-size: clamp(23px, 2.1vw, 30px); line-height: 1.16; }
#studio-cinema .cinema-demo p { font-size: 14px; line-height: 1.55; }
#studio-cinema :is(.demo-eyebrow, .web-eyebrow) { font-size: 11px; line-height: 1.5; }
#studio-cinema .demo-site-nav { flex-wrap: wrap; font-size: 12px; line-height: 1.5; }
#studio-cinema .demo-site-nav > b { font-size: 14px; line-height: 1.4; }
#studio-cinema .demo-site-nav > span { font-size: 12px; }
#studio-cinema .demo-store-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
#studio-cinema .demo-product-info { min-width: 0; }
#studio-cinema .demo-product-art > span { font-size: 10px; line-height: 1.5; }
#studio-cinema .demo-option-title { font-size: 13px; line-height: 1.5; }
#studio-cinema :is(.demo-order-status, .demo-flow-status) { font-size: 12px; line-height: 1.5; }
#studio-cinema .demo-kanban { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
#studio-cinema .demo-column { min-width: 0; height: 220px; padding: 12px 10px; }
#studio-cinema .demo-column > strong { font-size: 13px; line-height: 1.4; }
#studio-cinema .demo-task { padding: 12px 10px; }
#studio-cinema .demo-task > span { font-size: 10px; line-height: 1.5; }
#studio-cinema .demo-task > b { font-size: 14px; line-height: 1.5; overflow-wrap: break-word; }
#studio-cinema .demo-task > small { font-size: 12px; line-height: 1.5; }
#studio-cinema .demo-board-control { flex-wrap: wrap; gap: 12px; }
#studio-cinema .demo-delivery-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
#studio-cinema .demo-delivery-steps li { min-width: 0; }
#studio-cinema .demo-delivery-steps span { font-size: 12px; line-height: 1.5; }
#studio-cinema .demo-delivery-steps b,
#studio-cinema .demo-handover strong { font-size: 14px; line-height: 1.4; }
#studio-cinema .demo-handover p { font-size: 13px; line-height: 1.55; }

/* El recorrido web mide estos paneles con ResizeObserver; no tocar el track. */
#studio-cinema .web-viewport { --web-page-height: 360px; }
#studio-cinema .web-panel { padding: 20px; }
#studio-cinema .web-panel--home {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 16px;
  padding-bottom: 54px;
}
#studio-cinema .web-home-copy { min-width: 0; }
#studio-cinema .web-site-top { flex-wrap: wrap; gap: 8px 12px; }
#studio-cinema .web-site-brand { font-size: 13px; }
#studio-cinema .web-site-nav button:not(.wn-plug52) { font-size: 12px; }
#studio-cinema .web-text-link { font-size: 12px; line-height: 1.5; }
#studio-cinema .web-home-caption { font-size: 11px; line-height: 1.5; }
#studio-cinema .web-service-list { margin-top: 14px; gap: 8px; }
#studio-cinema .web-panel--services .web-page-title { font-size: clamp(24px, 2vw, 28px); margin-block: 8px; }
/* La revisión 47 impone padding con !important; solo se corrige esa medida. */
#studio-cinema .web-service-list > div { min-width: 0; padding: 8px 10px !important; margin-bottom: 0; }
#studio-cinema .web-service-list > div > div { min-width: 0; }
#studio-cinema .web-service-icon { flex-shrink: 0; }
#studio-cinema .web-service-list strong { font-size: 14px; line-height: 1.4; }
#studio-cinema .web-service-list p { font-size: 13px; line-height: 1.45; }
#studio-cinema .web-service-number { font-size: 11px; }
#studio-cinema .web-panel--contact { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
#studio-cinema .web-contact-card { min-width: 0; }
#studio-cinema .web-contact-card label { font-size: 13px; line-height: 1.4; }
#studio-cinema .web-contact-card textarea { font-size: 16px; line-height: 1.5; }

/* Recorrido: encuadre íntegro 16:9, sin intervenir en los controles de vídeo. */
#recorrido { padding-block: clamp(56px, 6vw, 88px); }
#recorrido .scroll-world__head { margin-bottom: 32px; }
#recorrido .scroll-world__layout { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: var(--layout52-gap); }
#recorrido.wn-world-cinematic .scroll-world__stage { aspect-ratio: 16 / 9; height: auto; min-height: 0; }
#recorrido .wn-scene-video49,
#recorrido .wn-chapter-video49 { object-fit: contain; }
#recorrido .wn-chapter-video49 { width: 100%; height: auto; aspect-ratio: 16 / 9; }
#recorrido .scroll-world__chapter { min-width: 0; align-content: start; }
#recorrido .scroll-world__chapter h3 { max-width: 22ch; font-size: clamp(25px, 2.3vw, 34px); line-height: 1.16; }
#recorrido .scroll-world__chapter p { font-size: 15px; line-height: 1.65; }
#recorrido .scroll-world__chapter a { font-size: 13px; line-height: 1.5; }
/* En lectura libre, cada película utiliza toda la fila disponible. */
#recorrido.wn-world-flow .scroll-world__layout { grid-template-columns: minmax(0, 1fr); }
#recorrido.wn-world-flow .scroll-world__chapter { min-height: 0; }
#recorrido.wn-world-flow .scroll-world__chapters { gap: 24px; }

/* Método y cierre: espacio útil y galería proporcionada a la columna del form. */
#metodo { padding-block: clamp(104px, 10vw, 140px) clamp(64px, 7vw, 96px); }
#metodo .approach__heading { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 20px 36px; margin-bottom: 40px; }
#metodo .approach__heading > p:not(.eyebrow) { font-size: 15px; line-height: 1.7; }
#metodo .process-list { gap: 24px; }
#metodo .process-step p { font-size: 14px; line-height: 1.65; }
#metodo .project-roadmap { gap: var(--layout52-gap); margin-top: 48px; }
#contacto.contact-editorial { padding-block: clamp(64px, 7vw, 96px); }
#contacto.contact-editorial .contact__shell { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 4vw, 56px); align-items: start; }
#contacto.contact-editorial :is(.contact-editorial-gallery, .contact-editorial-form, .ds-contact-screen) { min-width: 0; }
#contacto.contact-editorial .editorial-photo-stage { width: 100%; max-width: 480px; margin: 24px auto 28px; }
#contacto.contact-editorial .editorial-heading { gap: 16px; font-size: 11px; line-height: 1.5; }
#contacto.contact-editorial .ds-contact-header h2 { font-size: clamp(32px, 3.1vw, 46px); line-height: 1.12; margin-block: 22px 14px; }
#contacto.contact-editorial .ds-contact-form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
#contacto.contact-editorial .ds-field { font-size: 14px; line-height: 1.5; }
#contacto.contact-editorial .editorial-photo-credit { font-size: 12px; line-height: 1.6; }

/* 1024×768 y ventanas intermedias: evitar columnas de demo microscópicas. */
@media (max-width: 1199px) {
  #capacidades .area { grid-template-columns: 48px minmax(0, .9fr) minmax(0, 1.1fr); column-gap: 24px; }
  #capacidades .ss48-calendar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  #studio-cinema .demo-kanban { grid-template-columns: minmax(0, 1fr); }
  #studio-cinema .demo-column { height: auto; min-height: 90px; }
  #studio-cinema .demo-task { margin-bottom: 0; }
  #metodo .process-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* La información secundaria no debe empujar el menú a una segunda fila. */
@media (min-width: 1024px) and (max-width: 1240px) {
  .site-header .header__meta { display: none; }
  .site-header .brand-cluster { flex-wrap: nowrap; flex-shrink: 0; }
  .site-header .site-nav { gap: 20px; }
  .site-header .site-nav > a { white-space: nowrap; }
}

/* Pantalla corta: reducir títulos y márgenes, conservar la lectura del cuerpo. */
@media (min-width: 768px) and (max-height: 800px) {
  #inicio .hero__inner { padding-block: 40px 80px; }
  #inicio .hero__copy h1 { font-size: clamp(36px, min(4.5vw, 7svh), 58px); }
  #inicio .hero__desk { min-height: clamp(360px, 50svh, 440px); }
  #capacidades .chapter-head h2,
  #recorrido .scroll-world__head h2,
  #metodo .approach__heading h2 { font-size: clamp(34px, 4vw, 52px); }
  #studio-cinema .cinema-scene { padding-block: 112px 76px; gap: 28px; }
  #studio-cinema .cinema-copy { padding: 20px; }
  #studio-cinema .cinema-copy h2 { font-size: clamp(28px, 3vw, 40px); margin-block: 14px; }
  #studio-cinema .cinema-copy > p { font-size: 15px; line-height: 1.6; }
  #studio-cinema .web-viewport { --web-page-height: 340px; }
}

/* Solo en cine inmersivo: lectura local si un detalle abierto excede la altura.
 * No se cambia la altura del sticky, el track, la visibilidad ni el scroll JS. */
@media (min-width: 1024px) and (min-height: 680px) {
  #studio-cinema.cinema-immersive .cinema-scene { align-items: start; }
  #studio-cinema.cinema-immersive .cinema-scene > :is(.cinema-copy, .cinema-product) {
    max-height: calc(100svh - 232px);
    overflow-y: auto;
  }
}

@media (min-width: 1024px) and (min-height: 680px) and (max-height: 800px) {
  #studio-cinema.cinema-immersive .cinema-scene > :is(.cinema-copy, .cinema-product) { max-height: calc(100svh - 188px); }
}

/* El mismo corte que usa studio-cinema.js para volver al flujo normal. */
@media (max-width: 1023px), (max-height: 679px) {
  #studio-cinema .cinema-scene { grid-template-columns: minmax(0, 1fr); padding-block: 48px; gap: 28px; }
  #studio-cinema .cinema-copy { max-width: 680px; width: 100%; margin-inline: auto; }
  #studio-cinema .cinema-product { max-width: 680px; margin-inline: auto; }
  #studio-cinema :is(.cinema-heading, .cinema-footer) { left: auto; right: auto; }
  #studio-cinema .cinema-heading { padding-inline: var(--layout52-gutter); }
  #studio-cinema .cinema-footer { left: var(--layout52-gutter); right: var(--layout52-gutter); }
}

@media (max-width: 900px) {
  #inicio .hero__inner { grid-template-columns: minmax(0, 1fr); gap: 32px; min-height: 0; }
  #inicio .hero__copy { max-width: 680px; }
  #inicio .hero__desk { width: 100%; max-width: 580px; margin-inline: auto; }
  #capacidades .area { grid-template-columns: 44px minmax(0, 1fr); gap: 20px; }
  #capacidades .area.ss48-area .area__visual.ss48-host { grid-column: 1 / -1; }
  #metodo .approach__heading { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  #metodo .project-roadmap.ss48-roadmap { grid-template-columns: minmax(0, 1fr); }
}

/* 390×844: visual exterior de 350px; catálogo conserva su carrusel del 82%. */
@media (max-width: 767px) {
  :is(#inicio.hero, #capacidades, #studio-cinema, #recorrido, #metodo, #contacto.contact-editorial) { --layout52-gutter: 20px; }
  #inicio .hero__inner { padding-block: 40px 80px; }
  #inicio .hero__copy h1 { font-size: clamp(34px, 9.2vw, 46px); }
  #inicio .hero__lead { margin-top: 18px; font-size: 15px; }
  #inicio .hero__desk { min-height: 385px; }
  #inicio .hero__core-title { font-size: 26px; }
  #capacidades .chapter-head { flex-wrap: wrap; gap: 20px; }
  #capacidades .chapter-head h2,
  #recorrido .scroll-world__head h2,
  #metodo .approach__heading h2 { font-size: clamp(32px, 8.7vw, 42px); }
  #capacidades .capability-index { gap: 8px; }
  #capacidades .capability-index a { flex: 1 1 0; width: auto; font-size: 12px; }
  #capacidades .capability-index a > span { font-size: 13px; }
  #capacidades .area { grid-template-columns: 40px minmax(0, 1fr); gap: 16px 15px; padding-block: 30px; }
  #capacidades .area__main h3 { font-size: clamp(25px, 6.8vw, 31px); }
  #capacidades .area__index span { font-size: 40px; }
  #capacidades .area__intro { font-size: 14px; }
  #capacidades .area.ss48-area .area__visual.ss48-host { grid-column: 1 / -1; width: 100%; margin: 0; }
  #capacidades .ss48-scene { padding: 16px; }
  #capacidades :is(.ss48-flow, .ss48-calendar) { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  #capacidades .ss48-calendar button { min-height: 0; padding: 14px; }
  #capacidades .area__detail-content { grid-template-columns: minmax(0, 1fr); }
  #studio-cinema .cinema-copy { padding: 20px; }
  #studio-cinema .cinema-copy h2 { font-size: clamp(28px, 7.7vw, 36px); }
  #studio-cinema .cinema-copy > p { font-size: 15px; }
  #studio-cinema .cinema-window-bar { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  #studio-cinema .cinema-demo:not(.cinema-demo--0) { padding: 16px; }
  #studio-cinema .demo-store-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  #studio-cinema .demo-product-art { width: min(100%, 280px); max-height: none; margin-inline: auto; }
  #studio-cinema .demo-delivery-steps { grid-template-columns: minmax(0, 1fr); }
  #studio-cinema .demo-handover { align-items: flex-start; }
  #studio-cinema .web-viewport { --web-page-height: 470px; }
  #studio-cinema .web-panel { padding: 18px; }
  #studio-cinema .web-panel--home { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 130px; gap: 12px; padding-bottom: 58px; }
  #studio-cinema .web-home-photograph { height: 130px; }
  #studio-cinema .web-panel--contact { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 14px; }
  #studio-cinema .web-service-list > div { padding: 10px !important; }
  #recorrido .scroll-world__layout { grid-template-columns: minmax(0, 1fr); }
  #recorrido .scroll-world__chapter { grid-template-columns: 28px minmax(0, 1fr); gap: 12px; }
  #metodo .process-list { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  #metodo .process-step { gap: 16px; }
  #contacto.contact-editorial .contact__shell { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  #contacto.contact-editorial .ds-contact-header h2 { font-size: clamp(32px, 8.7vw, 42px); }
  #contacto.contact-editorial .ds-contact-form { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  #contacto.contact-editorial .ds-field--wide { grid-column: 1 / -1; }
  #contacto.contact-editorial .ds-field :is(input, select, textarea) { min-width: 0; font-size: 16px; }
  #contacto.contact-editorial .editorial-photo-stage { max-width: 350px; }
}

/* plug-52.css */
/* Carcasa, clavijas y cable son el botón completo; texto en HTML accesible. */
body .wn-plug52.wn-plug52 {
  position:relative!important;display:inline-flex;align-items:center;justify-content:center!important;
  isolation:isolate;box-sizing:border-box;flex:0 0 auto!important;
  width:222px!important;max-width:100%!important;min-width:0!important;
  min-height:76px!important;height:76px!important;padding:0!important;
  border:0!important;border-radius:0!important;background:transparent!important;
  box-shadow:none!important;color:#143a2f!important;overflow:visible!important;
  font:700 12px/1.3 system-ui,sans-serif!important;text-decoration:none!important;
  transform:none!important;cursor:pointer;white-space:normal!important;gap:0!important;
}
body .wn-plug52.wn-plug52::before,body .wn-plug52.wn-plug52::after{content:none!important}
body .wn-plug52.wn-plug52:is(:hover,:active,:focus-visible){background:transparent!important;box-shadow:none!important;color:#143a2f!important;transform:none!important}
.wn-plug52>.wn-plug-art52 {position:absolute;inset:0;display:block!important;width:100%!important;height:100%!important;pointer-events:none;z-index:0;filter:drop-shadow(0 6px 4px #061d3024)}
.wn-plug52:not(.wn-plug-rendered52)>.wn-plug-art52{visibility:hidden}
.wn-plug52>.wn-plug-label52{position:relative;z-index:1;display:block!important;width:43%;max-width:120px;pointer-events:none;text-align:center;color:#143a2f!important;transform:translate(10px,-3px);text-shadow:0 1px 0 #effff73d}
.wn-plug-label52 :is(span,b,strong){color:inherit!important;font:inherit!important;letter-spacing:0!important;display:inline!important}
.wn-plug-label52 :is(svg,.wn-button-arrow,.button__icon,.wn-connector49,[aria-hidden=true]){display:none!important}
body .wn-plug-small52.wn-plug-small52{width:158px!important;height:56px!important;min-height:56px!important;font-size:11px!important}
body .site-nav__contact.wn-plug-small52{width:142px!important;height:52px!important;min-height:52px!important}
.wn-plug-small52>.wn-plug-label52{width:48%;transform:translate(6px,-2px)}
.wn-plug52:focus-visible{outline:3px solid #d29f59!important;outline-offset:2px!important;border-radius:18px!important}
.wn-plug52:active>.wn-plug-art52{transform:translateY(2px);filter:drop-shadow(0 2px 2px #061d3024)}
.wn-plug52:disabled{opacity:.6;cursor:not-allowed}
.wn-plug52 .wn-plug-fallback52{position:absolute;inset:0;pointer-events:none;z-index:0;filter:drop-shadow(0 5px 3px #04182930)}
.wn-plug-rendered52 .wn-plug-fallback52{display:none}
/* Respaldo del mismo modelo renderizado: conserva el aspecto mientras carga Three. */
.wn-plug52 .wn-plug-fallback52{background:url('/assets/plug-preview-65.png') center/100% 100% no-repeat}
.wn-plug-fallback52>i{visibility:hidden}
.wn-plug-housing52{position:absolute;inset:17% 21% 20% 18%;border-radius:28% 13% 13% 28% / 35% 22% 22% 35%;border:1px solid #b6d5c4;background:linear-gradient(160deg,#f2fff7,#c5e4d5 42%,#96baa4);box-shadow:0 7px 0 #244d43,inset 0 3px 3px #fff8,inset -3px -3px 4px #56857155}
.wn-plug-blade52{position:absolute;left:6%;top:33%;width:14%;height:9%;border-radius:2px;background:linear-gradient(#e8ece9,#8d9690);box-shadow:0 3px 0 #61746a}
.wn-plug-blade52:nth-child(2){top:57%}
.wn-plug-cable52{position:absolute;left:77%;top:45%;width:19%;height:33%;border:6px solid #173c34;border-top-width:7px;border-left:0;border-radius:0 65% 65% 0;transform:rotate(16deg);box-sizing:border-box}
/* Controles debajo del vídeo en móvil, sin cubrir el objeto ni el pie. */
.wn-scene-canvas>.wn-video-ui51{bottom:50px;left:14px;right:14px}
.wn-video-ui51{gap:6px}
.wn-video-ui51 label{font-size:12px;flex-basis:160px;line-height:1.5}
.wn-interactive-video51 .wn-video-ui51{padding:4px 10px 8px}
.hero__actions{gap:8px!important;align-items:center!important}
.cinema-copy .wn-plug52{margin-left:-12px}
body .demo-action.wn-plug52{width:184px!important;max-width:100%!important;height:64px!important;min-height:64px!important;font-size:11px!important}
.ds-submit-row .wn-plug52{align-self:start}
@media(max-width:767px){
  .hero__actions .wn-plug52.wn-plug52{width:222px!important;max-width:100%!important;height:76px!important;min-height:76px!important;align-self:flex-start!important}
  .hero__actions{gap:0!important}
  .wn-video-ui51 label{flex-basis:100%;}
  body .demo-action.wn-plug52{width:184px!important;height:64px!important;min-height:64px!important}
}
@media(prefers-reduced-motion:reduce){.wn-plug52>.wn-plug-art52{transition:none!important;transform:none!important}}

/* presentation-57.css */
/* Revisión 57: fondos vectoriales, sin ampliar texturas de mapa de bits. */
.wn-environment__landscape{background-image:url('/assets/stellar-detail-57.svg')!important;background-size:cover;filter:none!important;opacity:1!important}
.wn-environment::after{background:linear-gradient(90deg,#081421e6 0%,#08142180 48%,#08142114 100%),linear-gradient(0deg,#081421 0%,transparent 18%,transparent 85%,#081421 100%)}
.wn-environment__trail{width:2px;opacity:.35;background:linear-gradient(transparent,#c1dbd0,transparent)}
.wn-environment__halo{border-color:#c0d1b92b;box-shadow:0 0 80px #b4d0ca0c,inset 0 0 60px #e5d5af0a}
#recorrido .wn-environment__landscape{background-position:72% 30%}
#muestras .wn-environment__landscape{background-position:45% 80%}
#capacidades .wn-environment__landscape,#metodo .wn-environment__landscape,#contacto .wn-environment__landscape{opacity:.45!important}
#capacidades .wn-environment::after,#metodo .wn-environment::after,#contacto .wn-environment::after{background:linear-gradient(90deg,#f1e7d8f2,#f1e7d8bf),linear-gradient(0deg,#f1e7d8,transparent 28%,#f1e7d8)}
.hero__desk::before{background-image:linear-gradient(#111a2420,#111a2420),url('/assets/stellar-detail-57.svg')!important}
.scroll-world__caption:empty,.capabilities__note:empty,.footer__actions-col small:empty,.cinema-footer>span:empty,.demo-order-status:empty{display:none}
@media(prefers-reduced-motion:no-preference){
 .wn-environment__trail{animation:stellar-breathe57 7s ease-in-out infinite alternate}
 .wn-environment__halo{animation:stellar-breathe57 9s ease-in-out infinite alternate}
}
@keyframes stellar-breathe57{from{opacity:.25}to{opacity:.7}}
@media(max-width:767px){.wn-environment::after{background:linear-gradient(#081421cc,#08142165,#081421db)}}


/* brand-logo-60.css */
/* Recorte visual del archivo original: región central cuadrada, sin redibujar. */
.brand__symbol.brand__symbol--photo60{position:relative;overflow:hidden;border:0;background:#fff;flex-shrink:0}
.brand__symbol.brand__symbol--photo60 img{position:absolute;inset:0;display:block;width:100%!important;height:100%!important;min-height:0;object-fit:cover;object-position:50% 50%;max-width:none}

/* security-styles-61.css */
/* Mismos valores visuales, sin atributos style incrustados. */
.no-script-content{max-width:700px;margin:12vh auto;padding:24px;font-family:system-ui}
.mock-metric-positive{color:#2e7d32}
.star-intro__meteor[data-meteor="1"]{--sx:-43vw;--sy:-66vh;--delay:.04s}
.star-intro__meteor[data-meteor="2"]{--sx:-27vw;--sy:-84vh;--delay:.18s}
.star-intro__meteor[data-meteor="3"]{--sx:-11vw;--sy:-72vh;--delay:.34s}
.star-intro__meteor[data-meteor="4"]{--sx:12vw;--sy:-79vh;--delay:.11s}
.star-intro__meteor[data-meteor="5"]{--sx:30vw;--sy:-68vh;--delay:.27s}
.star-intro__meteor[data-meteor="6"]{--sx:45vw;--sy:-88vh;--delay:.42s}
.star-intro__node[data-node="1"]{--nx:14%;--ny:20%}
.star-intro__node[data-node="2"]{--nx:45%;--ny:10%}
.star-intro__node[data-node="3"]{--nx:79%;--ny:25%}
.star-intro__node[data-node="4"]{--nx:87%;--ny:59%}
.star-intro__node[data-node="5"]{--nx:71%;--ny:84%}
.star-intro__node[data-node="6"]{--nx:46%;--ny:87%}

/* seo-pages-62.css */
:root{color-scheme:dark;--seo-ink:#f6f1e9;--seo-muted:#c2bdce;--seo-ground:#090c18;--seo-panel:#111526;--seo-line:rgba(239,226,204,.16);--seo-gold:#d6b77d;--seo-lilac:#bba5e2;--seo-width:1120px;font-family:Inter,"Segoe UI",Arial,sans-serif;background:var(--seo-ground);color:var(--seo-ink)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;background:radial-gradient(ellipse at 80% 8%,rgba(91,66,128,.22),transparent 34rem),radial-gradient(ellipse at 2% 48%,rgba(36,70,104,.18),transparent 34rem),var(--seo-ground);font-size:16px;line-height:1.65}a{color:inherit}.seo-skip{position:absolute;left:1rem;top:-5rem;padding:.7rem 1rem;background:#fff;color:#10131e;z-index:10}.seo-skip:focus{top:1rem}.seo-shell{width:min(calc(100% - 3rem),var(--seo-width));margin-inline:auto}.seo-header{border-bottom:1px solid var(--seo-line);background:rgba(9,12,24,.92)}.seo-header__inner{min-height:84px;display:flex;align-items:center;justify-content:space-between;gap:1.5rem}.seo-brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;font-size:.75rem;font-weight:750;letter-spacing:.12em;line-height:1.25}.seo-brand img{width:42px;height:42px;border-radius:50%;object-fit:cover;object-position:center}.seo-brand small{display:block;color:var(--seo-muted);font-weight:500;letter-spacing:.18em}.seo-nav{display:flex;align-items:center;gap:1.25rem;font-size:.88rem}.seo-nav a{text-decoration:none;color:var(--seo-muted)}.seo-nav a:hover,.seo-nav a:focus-visible{color:var(--seo-ink)}.seo-lang{display:flex;gap:.4rem}.seo-lang a{border:1px solid var(--seo-line);border-radius:999px;padding:.22rem .55rem}.seo-breadcrumb{padding:1.5rem 0 0;color:var(--seo-muted);font-size:.82rem}.seo-breadcrumb a{text-decoration:none}.seo-hero{padding:clamp(3rem,8vw,6.5rem) 0 4rem;max-width:850px}.seo-kicker{display:flex;align-items:center;gap:.65rem;color:var(--seo-gold);font-size:.75rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase}.seo-kicker:before{content:"";width:1.3rem;height:1px;background:currentColor}.seo-hero h1{font-size:clamp(2.4rem,6vw,5rem);line-height:1.04;letter-spacing:-.055em;margin:1.15rem 0 1.25rem;max-width:850px}.seo-hero h1 em{font-style:normal;color:var(--seo-lilac)}.seo-lead{font-size:clamp(1.08rem,2vw,1.28rem);color:#e2deea;max-width:720px}.seo-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}.seo-button{display:inline-flex;align-items:center;justify-content:center;gap:.7rem;min-height:48px;padding:.7rem 1.1rem;border:1px solid rgba(214,183,125,.56);border-radius:8px 4px;background:linear-gradient(115deg,rgba(214,183,125,.16),rgba(187,165,226,.08));text-decoration:none;font-weight:700;transition:transform .2s ease,border-color .2s ease,background .2s ease}.seo-button:hover{transform:translateY(-2px);border-color:var(--seo-gold);background:rgba(214,183,125,.22)}.seo-button:focus-visible,.seo-nav a:focus-visible,.seo-link:focus-visible{outline:3px solid var(--seo-gold);outline-offset:4px}.seo-button--quiet{border-color:var(--seo-line);background:transparent}.seo-facts{display:grid;grid-template-columns:repeat(3,1fr);border-block:1px solid var(--seo-line);margin:0 0 5rem}.seo-fact{padding:1.5rem 1.6rem}.seo-fact+.seo-fact{border-left:1px solid var(--seo-line)}.seo-fact b{display:block;color:var(--seo-gold);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase}.seo-fact span{display:block;color:var(--seo-muted);margin-top:.25rem;font-size:.92rem}.seo-section{padding:0 0 5.5rem}.seo-section h2{font-size:clamp(1.8rem,4vw,3rem);line-height:1.12;letter-spacing:-.04em;max-width:760px;margin:0 0 1rem}.seo-section>p{color:var(--seo-muted);max-width:740px}.seo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:2rem}.seo-card{border:1px solid var(--seo-line);border-radius:16px 6px;background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018));padding:1.4rem}.seo-card h3{font-size:1.1rem;margin:.1rem 0 .4rem}.seo-card p{margin:0;color:var(--seo-muted)}.seo-process{counter-reset:steps;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--seo-line);border:1px solid var(--seo-line);margin-top:2rem}.seo-process li{list-style:none;background:var(--seo-ground);padding:1.35rem}.seo-process li:before{counter-increment:steps;content:"0" counter(steps);display:block;color:var(--seo-gold);font-size:.8rem;letter-spacing:.1em;margin-bottom:.65rem}.seo-faq{border-top:1px solid var(--seo-line);margin-top:1.8rem}.seo-faq details{border-bottom:1px solid var(--seo-line);padding:1rem 0}.seo-faq summary{font-weight:700;cursor:pointer}.seo-faq details p{color:var(--seo-muted);max-width:760px}.seo-cta{border:1px solid rgba(214,183,125,.28);border-radius:22px 7px;background:radial-gradient(ellipse at 90% 10%,rgba(187,165,226,.15),transparent 45%),linear-gradient(120deg,rgba(214,183,125,.1),rgba(255,255,255,.025));padding:clamp(1.5rem,5vw,3rem);margin:1rem 0 5rem}.seo-cta h2{margin-top:0}.seo-footer{border-top:1px solid var(--seo-line);padding:1.5rem 0 2.5rem;color:var(--seo-muted);font-size:.88rem}.seo-footer__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem}.seo-link{color:var(--seo-gold);font-weight:650;text-underline-offset:4px}.area__seo-link{display:inline-flex;align-items:center;gap:.45rem;margin-top:1rem;color:var(--seo-gold);font-size:.9rem;font-weight:700;text-underline-offset:4px}.area__seo-link:hover{color:#f6e5c3}.area__seo-link:focus-visible{outline:2px solid var(--seo-gold);outline-offset:4px;border-radius:2px}@media(max-width:700px){.seo-shell{width:min(calc(100% - 2rem),var(--seo-width))}.seo-header__inner{min-height:72px}.seo-nav{gap:.65rem;font-size:.78rem}.seo-nav__secondary{display:none}.seo-hero{padding-top:3rem}.seo-facts{grid-template-columns:1fr;margin-bottom:4rem}.seo-fact{padding:1rem 0}.seo-fact+.seo-fact{border-left:0;border-top:1px solid var(--seo-line)}.seo-grid,.seo-process{grid-template-columns:1fr}.seo-section{padding-bottom:4rem}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
:root{color-scheme:dark;--seo-ink:#f6f1e9;--seo-muted:#c2bdce;--seo-ground:#090c18;--seo-panel:#111526;--seo-line:rgba(239,226,204,.16);--seo-gold:#d6b77d;--seo-lilac:#bba5e2;--seo-width:1120px;font-family:Inter,"Segoe UI",Arial,sans-serif;background:var(--seo-ground);color:var(--seo-ink)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;background:radial-gradient(ellipse at 80% 8%,rgba(91,66,128,.22),transparent 34rem),radial-gradient(ellipse at 2% 48%,rgba(36,70,104,.18),transparent 34rem),var(--seo-ground);font-size:16px;line-height:1.65}a{color:inherit}.seo-skip{position:absolute;left:1rem;top:-5rem;padding:.7rem 1rem;background:#fff;color:#10131e;z-index:10}.seo-skip:focus{top:1rem}.seo-shell{width:min(calc(100% - 3rem),var(--seo-width));margin-inline:auto}.seo-header{border-bottom:1px solid var(--seo-line);background:rgba(9,12,24,.92)}.seo-header__inner{min-height:84px;display:flex;align-items:center;justify-content:space-between;gap:1.5rem}.seo-brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;font-size:.75rem;font-weight:750;letter-spacing:.12em;line-height:1.25}.seo-brand img{width:42px;height:42px;border-radius:50%;object-fit:cover;object-position:center}.seo-brand small{display:block;color:var(--seo-muted);font-weight:500;letter-spacing:.18em}.seo-nav{display:flex;align-items:center;gap:1.25rem;font-size:.88rem}.seo-nav a{text-decoration:none;color:var(--seo-muted)}.seo-nav a:hover,.seo-nav a:focus-visible{color:var(--seo-ink)}.seo-lang{display:flex;gap:.4rem}.seo-lang a{border:1px solid var(--seo-line);border-radius:999px;padding:.22rem .55rem}.seo-breadcrumb{padding:1.5rem 0 0;color:var(--seo-muted);font-size:.82rem}.seo-breadcrumb a{text-decoration:none}.seo-hero{padding:clamp(3rem,8vw,6.5rem) 0 4rem;max-width:850px}.seo-kicker{display:flex;align-items:center;gap:.65rem;color:var(--seo-gold);font-size:.75rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase}.seo-kicker:before{content:"";width:1.3rem;height:1px;background:currentColor}.seo-hero h1{font-size:clamp(2.4rem,6vw,5rem);line-height:1.04;letter-spacing:-.055em;margin:1.15rem 0 1.25rem;max-width:850px}.seo-hero h1 em{font-style:normal;color:var(--seo-lilac)}.seo-lead{font-size:clamp(1.08rem,2vw,1.28rem);color:#e2deea;max-width:720px}.seo-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}.seo-button{display:inline-flex;align-items:center;justify-content:center;gap:.7rem;min-height:48px;padding:.7rem 1.1rem;border:1px solid rgba(214,183,125,.56);border-radius:8px 4px;background:linear-gradient(115deg,rgba(214,183,125,.16),rgba(187,165,226,.08));text-decoration:none;font-weight:700;transition:transform .2s ease,border-color .2s ease,background .2s ease}.seo-button:hover{transform:translateY(-2px);border-color:var(--seo-gold);background:rgba(214,183,125,.22)}.seo-button:focus-visible,.seo-nav a:focus-visible,.seo-link:focus-visible{outline:3px solid var(--seo-gold);outline-offset:4px}.seo-button--quiet{border-color:var(--seo-line);background:transparent}.seo-facts{display:grid;grid-template-columns:repeat(3,1fr);border-block:1px solid var(--seo-line);margin:0 0 5rem}.seo-fact{padding:1.5rem 1.6rem}.seo-fact+.seo-fact{border-left:1px solid var(--seo-line)}.seo-fact b{display:block;color:var(--seo-gold);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase}.seo-fact span{display:block;color:var(--seo-muted);margin-top:.25rem;font-size:.92rem}.seo-section{padding:0 0 5.5rem}.seo-section h2{font-size:clamp(1.8rem,4vw,3rem);line-height:1.12;letter-spacing:-.04em;max-width:760px;margin:0 0 1rem}.seo-section>p{color:var(--seo-muted);max-width:740px}.seo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:2rem}.seo-card{border:1px solid var(--seo-line);border-radius:16px 6px;background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018));padding:1.4rem}.seo-card h3{font-size:1.1rem;margin:.1rem 0 .4rem}.seo-card p{margin:0;color:var(--seo-muted)}.seo-process{counter-reset:steps;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--seo-line);border:1px solid var(--seo-line);margin-top:2rem;padding:0}.seo-process li{list-style:none;background:var(--seo-ground);padding:1.35rem}.seo-process li:before{counter-increment:steps;content:"0" counter(steps);display:block;color:var(--seo-gold);font-size:.8rem;letter-spacing:.1em;margin-bottom:.65rem}.seo-faq{border-top:1px solid var(--seo-line);margin-top:1.8rem}.seo-faq details{border-bottom:1px solid var(--seo-line);padding:1rem 0}.seo-faq summary{font-weight:700;cursor:pointer}.seo-faq details p{color:var(--seo-muted);max-width:760px}.seo-cta{border:1px solid rgba(214,183,125,.28);border-radius:22px 7px;background:radial-gradient(ellipse at 90% 10%,rgba(187,165,226,.15),transparent 45%),linear-gradient(120deg,rgba(214,183,125,.1),rgba(255,255,255,.025));padding:clamp(1.5rem,5vw,3rem);margin:1rem 0 5rem}.seo-cta h2{margin-top:0}.seo-footer{border-top:1px solid var(--seo-line);padding:1.5rem 0 2.5rem;color:var(--seo-muted);font-size:.88rem}.seo-footer__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem}.seo-link{color:var(--seo-gold);font-weight:650;text-underline-offset:4px}.seo-audience-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;padding:0;margin:1.8rem 0 0}.seo-audience-list li{list-style:none;display:flex;gap:.8rem;align-items:flex-start;border-top:1px solid var(--seo-line);padding:1rem .25rem;color:var(--seo-ink)}.seo-audience-list li>span{color:var(--seo-gold)}.area__seo-link{display:inline-flex;align-items:center;gap:.45rem;margin-top:1rem;color:var(--seo-gold);font-size:.9rem;font-weight:700;text-underline-offset:4px}.area__seo-link:hover{color:#f6e5c3}.area__seo-link:focus-visible{outline:2px solid var(--seo-gold);outline-offset:4px;border-radius:2px}@media(max-width:700px){.seo-shell{width:min(calc(100% - 2rem),var(--seo-width))}.seo-header__inner{min-height:72px}.seo-nav{gap:.65rem;font-size:.78rem}.seo-nav__secondary{display:none}.seo-hero{padding-top:3rem}.seo-facts{grid-template-columns:1fr;margin-bottom:4rem}.seo-fact{padding:1rem 0}.seo-fact+.seo-fact{border-left:0;border-top:1px solid var(--seo-line)}.seo-grid,.seo-process,.seo-audience-list{grid-template-columns:1fr}.seo-section{padding-bottom:4rem}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}