/* Smart Integradores — sitio v7
   Dirección: arquitectura de la luz. Base clara y corporativa, momentos de noche con luz cálida.
   Movimiento propio: la escena cambia como un sistema de control (cortina entre páginas, luces que se
   encienden, títulos que se iluminan con un barrido de dimmer). Todo el contenido se ve sin animación. */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-wdth.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  --paper: #F9F9F8;
  --paper-2: #F1F2F3;
  --paper-3: #E6E8EB;
  --ink: #0B0D11;
  --ink-2: #555B66;
  --ink-3: #6A707B;
  --line: rgba(11, 13, 17, .1);
  --line-2: rgba(11, 13, 17, .2);
  --night: #05070B;
  --night-2: #0B0F16;
  --night-3: #141A24;
  --on-night: #EDEFF2;
  --on-night-2: rgba(237, 239, 242, .66);
  --on-night-3: rgba(237, 239, 242, .52);
  --line-night: rgba(237, 239, 242, .12);
  --led: #4A74FF;
  --led-soft: rgba(74, 116, 255, .22);
  --warm: #FFCB8E;
  --warm-glow: rgba(255, 190, 120, .35);
  --danger: #B42318;
  /* the "room" colours the whole page uses; night sections dim the room */
  --bg: var(--paper);
  --fg: var(--ink);
  --fg-2: var(--ink-2);
  --fg-3: var(--ink-3);
  --rule: var(--line);
  --panel: #FFFFFF;
  --font: "Archivo", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  /* v11: one family. Large titles in Archivo wide and light (width 118-124 %), everything else at normal width */
  --font-display: "Archivo", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --gutter: clamp(20px, 5vw, 84px);
  --maxw: 1480px;
  --header-h: 86px;
  --r: 20px;
  --r-sm: 12px;
  --r-pill: 999px;
  color-scheme: light;
}
html.is-night {
  --bg: var(--night);
  --fg: var(--on-night);
  --fg-2: var(--on-night-2);
  --fg-3: var(--on-night-3);
  --rule: var(--line-night);
  --panel: var(--night-2);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); scrollbar-gutter: stable; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--font); font-size: 1.0625rem; line-height: 1.62; font-stretch: 100%;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  overflow-x: clip;
  transition: background-color 1.1s var(--ease-io), color 1.1s var(--ease-io);
  -webkit-tap-highlight-color: rgba(74, 116, 255, .18);
  touch-action: manipulation;
}
img, video, svg { max-width: 100%; display: block; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
p, h1, h2, h3, h4, figure, blockquote, ol, ul, dl, dd { margin: 0; }
h1, h2, h3, h4 { font-weight: 400; text-wrap: balance; }
ol, ul { padding: 0; list-style: none; }
[hidden] { display: none !important; }
::selection { background: rgba(74, 116, 255, .25); }
:focus-visible { outline: 2px solid var(--led); outline-offset: 3px; }
/* sections the page moves the focus to after a jump (Seguir, Saltar, sub-menus): no ring around a whole section */
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }
main, .site-footer { overflow: clip; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--gutter); top: -80px; z-index: 200;
  background: var(--ink); color: var(--paper); padding: 12px 18px; border-radius: var(--r-pill); text-decoration: none;
}
.skip-link:focus { top: 14px; }
.wrap { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; }
.icon { width: 1.25em; height: 1.25em; flex: none; }
.nowrap { white-space: nowrap; }

/* ---------- type ---------- */
.display {
  font-size: clamp(3rem, 1.1rem + 6.6vw, 8.8rem); font-weight: 240; font-stretch: 118%;
  letter-spacing: -.038em; line-height: .96;
}
.title {
  font-size: clamp(2.35rem, 1.2rem + 3.9vw, 5.6rem); font-weight: 260; font-stretch: 116%;
  letter-spacing: -.032em; line-height: 1.0;
}
.title--sm { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.9rem); }
.subtitle { font-size: clamp(1.45rem, 1.1rem + 1vw, 2.15rem); font-weight: 320; font-stretch: 112%; letter-spacing: -.018em; line-height: 1.14; }
.lead { font-size: clamp(1.1rem, 1rem + .42vw, 1.38rem); line-height: 1.56; color: var(--fg-2); max-width: 46ch; }
.body { color: var(--fg-2); max-width: 62ch; }
.body p + p { margin-top: 1em; }
.tag {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .8125rem; font-weight: 500; font-stretch: 108%; letter-spacing: .015em; line-height: 1.2; color: var(--fg-2);
}
.tag::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--led);
  box-shadow: 0 0 0 4px var(--led-soft), 0 0 12px var(--led);
}
.tag--warm::before { background: var(--warm); box-shadow: 0 0 0 4px rgba(255, 203, 142, .2), 0 0 14px var(--warm); }
.num { font-variant-numeric: tabular-nums; }

/* ---------- buttons ---------- */
.btn {
  --b-bg: var(--ink); --b-fg: var(--paper); --b-line: transparent; --b-led: var(--led);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  height: 56px; padding: 0 28px; border-radius: var(--r-pill);
  border: 1px solid var(--b-line); background: var(--b-bg); color: var(--b-fg);
  font-size: .96875rem; font-weight: 500; font-stretch: 108%; letter-spacing: .005em; line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: color .45s var(--ease), border-color .45s var(--ease), background-color .45s var(--ease), transform .25s var(--ease), box-shadow .6s var(--ease);
}
.btn::after {
  /* a soft light that rises from the bottom edge on hover */
  content: ""; position: absolute; inset: auto -20% -120% -20%; height: 200%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .18), transparent);
  transform: translateY(30%); opacity: 0; transition: transform .7s var(--ease), opacity .7s var(--ease);
}
.btn:hover::after { transform: translateY(-38%); opacity: 1; }
.btn:active { transform: translateY(1px) scale(.985); }
.btn__led {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: color-mix(in srgb, var(--b-fg) 30%, transparent); transition: background-color .45s, box-shadow .45s;
}
.btn:hover .btn__led, .btn:focus-visible .btn__led { background: var(--b-led); box-shadow: 0 0 0 4px var(--led-soft), 0 0 14px var(--b-led); }
.btn__arrow { width: 18px; height: 18px; transition: transform .5s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }
.btn--light { --b-bg: #F6F7F9; --b-fg: var(--ink); }
.btn--light:hover { --b-bg: #FFFFFF; box-shadow: 0 10px 40px -10px rgba(255, 255, 255, .45); }
.btn--ghost-light { --b-bg: rgba(255, 255, 255, .04); --b-fg: #F6F7F9; --b-line: rgba(246, 247, 249, .38); }
.btn--ghost-light:hover { --b-line: rgba(246, 247, 249, .9); --b-bg: rgba(255, 255, 255, .1); }
.btn--ghost { --b-bg: transparent; --b-fg: var(--fg); --b-line: var(--line-2); }
.btn--ghost:hover { --b-line: var(--fg); }
html.is-night .btn--dark { --b-bg: #F6F7F9; --b-fg: var(--ink); }
.btn--sm { height: 44px; padding: 0 20px; font-size: .875rem; }
.link {
  display: inline-flex; align-items: center; gap: 10px; font-weight: 500; font-stretch: 108%; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) left 100% / 0% 1px no-repeat;
  padding-bottom: 4px; transition: background-size .6s var(--ease);
}
.link:hover { background-size: 100% 1px; }
.link .icon { width: 18px; height: 18px; transition: transform .5s var(--ease); }
.link:hover .icon { transform: translateX(4px); }

/* ---------- header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 60; color: var(--fg);
  padding-top: env(safe-area-inset-top, 0px);
  transition: color .6s var(--ease), transform .6s var(--ease);
}
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: saturate(1.5) blur(18px); backdrop-filter: saturate(1.5) blur(18px);
  border-bottom: 1px solid var(--rule); opacity: 1; transition: opacity .6s var(--ease), background-color 1.1s var(--ease-io);
}
.site-header.is-clear { color: #F6F7F9; }
.site-header.is-clear::before { opacity: 0; }
/* over a cover, once something scrolls under the header: a dark glass behind it, so no text clashes with the logo */
.site-header.is-clear.is-velo:not(.menu-open)::before { opacity: 1; background: rgba(5, 7, 11, .72); border-bottom-color: rgba(246, 247, 249, .08); }
.site-header__inner { height: var(--header-h); display: flex; align-items: center; gap: clamp(20px, 3vw, 44px); }
.brand { display: block; width: clamp(122px, 10.5vw, 158px); flex: none; color: inherit; }
.brand svg { display: block; width: 100%; height: auto; }
/* the navigation is one capsule in the middle of the bar: equal pills, one line each, the current page lit */
.site-header__inner { position: relative; }
.nav { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.nav__list {
  display: flex; gap: 2px; padding: 4px; border-radius: 999px;
  background: color-mix(in srgb, var(--fg) 4%, transparent); border: 1px solid color-mix(in srgb, var(--fg) 10%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  transition: background-color .6s var(--ease), border-color .6s var(--ease);
}
.site-header.is-clear .nav__list { background: rgba(8, 10, 14, .3); border-color: rgba(246, 247, 249, .14); }
.nav__list a {
  position: relative; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 999px;
  font-size: .875rem; font-weight: 500; font-stretch: 100%; letter-spacing: .005em; white-space: nowrap; text-decoration: none;
  color: inherit; opacity: .78; transition: opacity .3s, background-color .3s;
}
.nav__list a:hover { opacity: 1; background: color-mix(in srgb, var(--fg) 7%, transparent); }
.site-header.is-clear .nav__list a:hover { background: rgba(246, 247, 249, .1); }
.nav__list a[aria-current="page"] { opacity: 1; background: color-mix(in srgb, var(--fg) 9%, transparent); }
.site-header.is-clear .nav__list a[aria-current="page"] { background: rgba(246, 247, 249, .13); }
.nav__list a[aria-current="page"]::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--led); box-shadow: 0 0 10px var(--led);
}
.site-header__cta { margin-left: auto; height: 42px; padding: 0 20px; font-size: .875rem; }
.site-header .btn { --b-bg: var(--fg); --b-fg: var(--bg); }
.site-header.is-clear .btn { --b-bg: #F6F7F9; --b-fg: var(--ink); }
.menu-toggle {
  display: none; margin-left: auto; width: 48px; height: 48px; border: 0; border-radius: 50%;
  background: transparent; color: inherit; cursor: pointer; place-items: center;
}
.menu-toggle .icon { width: 26px; height: 26px; }
.menu-toggle__close { display: none; }
.site-header.menu-open .menu-toggle__open { display: none; }
.site-header.menu-open .menu-toggle__close { display: block; }
@media (max-width: 1180px) {
  .nav, .site-header__cta { display: none; }
  .menu-toggle { display: grid; }
}
@media (max-width: 560px) { :root { --header-h: 70px; } }

/* the mobile menu is a shade that drops with a keypad on it */
.menu {
  position: fixed; inset: 0; z-index: 55; padding: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 12px) var(--gutter) calc(28px + env(safe-area-inset-bottom, 0px));
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #0C1017, #06080C);
  color: var(--on-night); display: flex; flex-direction: column; gap: 22px; overflow-y: auto; overscroll-behavior: contain;
}
.site-header.menu-open { color: var(--on-night); }
.site-header.menu-open::before { opacity: 0; }
.menu__keys { display: grid; gap: 8px; }
.menu__keys a {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 64px; padding: 0 20px;
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px; background: rgba(255, 255, 255, .03);
  font-size: 1.25rem; font-weight: 320; font-stretch: 112%; letter-spacing: -.01em; text-decoration: none;
  transition: background-color .3s, border-color .3s;
}
.menu__keys a:hover { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .3); }
.menu__keys .led { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .22); }
.menu__keys a[aria-current="page"] { border-color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .09); }
.menu__keys a[aria-current="page"] .led { background: #fff; box-shadow: 0 0 10px #fff; }
.menu__foot { margin-top: auto; display: grid; gap: 14px; }
.menu__foot .btn { width: 100%; }
.menu__mail { color: var(--on-night-2); font-size: .9375rem; }

/* ---------- page transition: a motorised shade ---------- */
.shade {
  position: fixed; inset: 0; z-index: 100; pointer-events: none; transform: translate3d(0, -101%, 0);
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #10151E 0%, #07090D 100%);
  display: grid; place-items: center; will-change: transform;
}
.shade__hem {
  position: absolute; left: 0; right: 0; bottom: -10px; height: 12px;
  background: linear-gradient(180deg, #3A342D, #1B1814 60%, #0E0C0A);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .55);
}
.shade__label {
  display: inline-flex; align-items: center; gap: 12px; color: var(--on-night); opacity: 0;
  font-size: .9375rem; font-weight: 450; font-stretch: 110%; letter-spacing: .02em;
}
.shade__label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px #fff; }
.shade__label::after { content: var(--shade-label, "Smart Integradores"); }
html.menu-lock { overflow: hidden; }
html.shade-in .shade { transform: none; }
html.shade-in .shade__label { opacity: 1; }
/* while the next page gets ready: the name of the page and a thin line of light that runs under it */
.shade__centro { display: grid; justify-items: center; gap: 14px; }
.shade__carga { position: relative; width: 132px; height: 1px; overflow: hidden; background: rgba(246, 247, 249, .12); opacity: 0; transition: opacity .3s ease; }
.shade__carga i { position: absolute; top: 0; bottom: 0; left: 0; width: 38%; background: linear-gradient(90deg, transparent, var(--warm), transparent); animation: shade-carga 1.15s ease-in-out infinite; }
.shade.is-cargando .shade__carga, html.shade-in .shade__carga { opacity: 1; }
@keyframes shade-carga { from { transform: translateX(-100%); } to { transform: translateX(265%); } }
@media (prefers-reduced-motion: reduce) { .shade__carga i { animation: none; } }

/* ---------- hero (home) ----------
   With scroll effects the section is taller than the screen and the stage stays put (sticky)
   while the film follows the scroll: the camera glides towards the house and each zone lights up.
   Without them (reduced motion, no JS, tall viewers) it is a normal full-screen cover with the lit house. */
.hero { position: relative; background: var(--night); color: #F6F7F9; }
.hero__stage { position: relative; min-height: 100svh; display: grid; align-items: end; overflow: clip; isolation: isolate; }
.scrollfx .hero { height: 270svh; }
.scrollfx .hero__stage { position: sticky; top: 0; height: 100svh; min-height: 0; }
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__media picture { position: absolute; inset: 0; }
.hero__media img, .hero__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 58% 60%; }
.hero__off, .hero__rest { opacity: 0; }
.motion .hero__off, .motion .hero__rest { opacity: 1; }
.hero__media video { opacity: 0; transition: opacity .35s linear; }
/* option with photos: one layer per zone over the resting photo; the page scales the photos as the camera moves in */
.hero__layer { opacity: 0; }
.hero--fotos .hero__media img { object-position: 50% 50%; }
.hero--pelicula .hero__media img, .hero--pelicula .hero__media video { object-position: 52% 50%; }
.scrollfx .hero--fotos .hero__media { transform-origin: 50% 50%; will-change: transform; }
.scrollfx .hero--fotos .hero__layer { will-change: opacity; }
.scrollfx .hero--fotos .hero__lit { display: none; }   /* with scroll effects the resting photo and its layers cover it: not downloaded */
.hero__swap { display: grid; }
.hero__swap > * { grid-area: 1 / 1; min-width: 0; }
.hero__copy { display: grid; gap: clamp(22px, 3.4vh, 34px); align-content: end; }
.hero__zones { display: none; align-self: end; justify-self: end; }
.scrollfx .hero__zones {
  display: block; opacity: 0; visibility: hidden; min-width: 244px; padding: 18px 16px 16px; border-radius: 16px;
  background: rgba(8, 10, 14, .42); border: 1px solid rgba(246, 247, 249, .14);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.hero__zones-title { margin: 0 4px; font-size: .8125rem; color: rgba(246, 247, 249, .62); }
.hero__zones ol { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 4px; }
.hero__zones li {
  --on: 0; display: flex; align-items: center; gap: 12px; height: 36px; padding: 0 12px; border-radius: 9px;
  font-size: .9375rem; font-stretch: 106%; color: rgba(246, 247, 249, calc(.42 + .58 * var(--on)));
  background: rgba(246, 247, 249, calc(.03 + .07 * var(--on)));
}
.hero__zones i {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: rgba(74, 116, 255, calc(.2 + .8 * var(--on))); box-shadow: 0 0 calc(14px * var(--on)) rgba(74, 116, 255, var(--on));
}
@media (max-width: 720px) {
  /* on phones the keypad becomes one low row, so the house stays in view */
  .scrollfx .hero__zones { justify-self: stretch; min-width: 0; padding: 12px 10px 10px; }
  .hero__zones-title { margin: 0 2px; font-size: .75rem; }
  .hero__zones ol { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; margin-top: 8px; }
  .hero__zones li { flex-direction: column; justify-content: center; gap: 7px; height: auto; padding: 9px 2px 8px; font-size: .6875rem; font-stretch: 100%; text-align: center; }
}
@media (min-width: 721px) and (max-height: 560px) {
  /* phones turned sideways and other short screens: the same low row, at the right */
  .scrollfx .hero__zones { min-width: 0; width: min(100%, 500px); padding: 10px 10px 8px; }
  .hero__zones-title { margin: 0 2px; font-size: .75rem; }
  .hero__zones ol { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; margin-top: 6px; }
  .hero__zones li { flex-direction: column; justify-content: center; gap: 6px; height: auto; padding: 8px 2px 7px; font-size: .6875rem; font-stretch: 100%; text-align: center; }
}
.hero__veil {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(4, 6, 10, .72) 0%, rgba(4, 6, 10, .35) 38%, rgba(4, 6, 10, 0) 64%),
    linear-gradient(0deg, rgba(4, 6, 10, .78) 0%, rgba(4, 6, 10, 0) 36%),
    linear-gradient(180deg, rgba(4, 6, 10, .5) 0%, rgba(4, 6, 10, 0) 22%);
}
.hero__content { padding-block: calc(var(--header-h) + 8vh) clamp(28px, 5vh, 56px); display: grid; gap: clamp(22px, 3.4vh, 34px); }
.hero__title { max-width: 11.5em; }
.hero__lead { color: rgba(246, 247, 249, .82); max-width: 44ch; }
/* short, wide screens (laptops with small windows, phones turned sideways): the cover still fits in one
   screen, because with scroll effects the stage stays put and nothing below it can be reached */
@media (max-height: 760px) and (min-aspect-ratio: 1/1) {
  .hero__title { font-size: clamp(2.3rem, min(1.1rem + 6.6vw, 13svh), 8.8rem); }
}
@media (max-height: 700px) and (min-aspect-ratio: 1/1) {
  .hero__content { padding-block: calc(var(--header-h) + 2vh) clamp(14px, 3.5vh, 28px); gap: clamp(12px, 2.6vh, 22px); }
  .hero__copy { gap: clamp(12px, 2.6vh, 22px); }
  .hero .hero__bar { margin-top: 0; padding-top: clamp(10px, 2vh, 16px); }
}
@media (max-height: 480px) and (min-aspect-ratio: 1/1) {
  .hero__lead { display: none; }
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: clamp(10px, 4vh, 44px);
  padding-top: 20px; border-top: 1px solid rgba(246, 247, 249, .16); font-size: .875rem; color: rgba(246, 247, 249, .7);
}
.hero__places { display: inline-flex; align-items: center; gap: 10px; }
.hero__controls { margin-left: auto; display: inline-flex; gap: 8px; }
.chip-btn {
  display: inline-flex; align-items: center; gap: 9px; height: 38px; padding: 0 15px; border-radius: var(--r-pill);
  border: 1px solid rgba(246, 247, 249, .22); background: rgba(8, 10, 14, .35); color: #F6F7F9; cursor: pointer;
  font-size: .8125rem; font-weight: 500; font-stretch: 106%; transition: border-color .3s, background-color .3s;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.chip-btn:hover { border-color: rgba(246, 247, 249, .6); }
.chip-btn .icon { width: 16px; height: 16px; }
.chip-btn .eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; width: 13px; }
.chip-btn .eq i { flex: 1; height: 100%; background: currentColor; border-radius: 1px; transform-origin: 50% 100%; transform: scaleY(.45); }
.chip-btn .eq i:nth-child(2) { transform: scaleY(.9); }
.chip-btn .eq i:nth-child(3) { transform: scaleY(.62); }
.chip-btn[aria-pressed="true"] { border-color: rgba(255, 203, 142, .7); background: rgba(255, 203, 142, .12); }
.chip-btn[aria-pressed="true"] .eq i { animation: eq .8s ease-in-out infinite alternate; }
.chip-btn[aria-pressed="true"] .eq i:nth-child(2) { animation-duration: .6s; animation-delay: -.3s; }
.chip-btn[aria-pressed="true"] .eq i:nth-child(3) { animation-duration: .95s; animation-delay: -.5s; }
@keyframes eq { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
.scroll-cue { display: inline-flex; align-items: center; gap: 10px; }
.scroll-cue__more { display: none; }
.scrollfx .hero .scroll-cue__more { display: inline; }
.scroll-cue__line { position: relative; width: 1px; height: 28px; background: rgba(246, 247, 249, .25); overflow: hidden; }
.scroll-cue__line::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: #fff; animation: cue 2.4s var(--ease-io) 2; }
@keyframes cue { to { top: 100%; } }
@media (max-width: 720px) {
  .hero__media img, .hero__media video { object-position: 62% 60%; }
  .hero__veil { background: linear-gradient(0deg, rgba(4, 6, 10, .88) 0%, rgba(4, 6, 10, .35) 55%, rgba(4, 6, 10, .55) 100%); }
  .hero__controls { margin-left: 0; }
}

@media (max-aspect-ratio: 4/5) {
  .hero__media img, .hero__media video { object-position: 50% 50%; }
}

/* ---------- page hero (inner pages) ---------- */
.page-hero {
  position: relative; min-height: min(86svh, 920px); display: grid; align-items: end; color: #F6F7F9;
  background: var(--night); isolation: isolate; overflow: clip;
}
.page-hero__media { position: absolute; inset: 0; z-index: -2; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgba(4, 6, 10, .86) 0%, rgba(4, 6, 10, .25) 55%, rgba(4, 6, 10, .55) 100%);
}
.page-hero__content { padding-block: calc(var(--header-h) + 14vh) clamp(36px, 7vh, 72px); display: grid; gap: 26px; }
.crumbs { display: flex; gap: 10px; font-size: .8125rem; color: rgba(246, 247, 249, .66); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: #fff; }
.page-hero__row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 32px 56px; align-items: end; }
.page-hero__row .lead { color: rgba(246, 247, 249, .8); }
@media (max-width: 900px) { .page-hero__row { grid-template-columns: 1fr; } }

/* ---------- sections ---------- */
.section { padding-block: clamp(96px, 13vw, 200px); }
.section--tight { padding-block: clamp(72px, 9vw, 136px); }
.section-head { display: grid; gap: 24px; margin-bottom: clamp(44px, 6vw, 88px); }
.section-head--split { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: end; column-gap: 64px; }
@media (max-width: 900px) { .section-head--split { grid-template-columns: 1fr; } }
.rule { height: 1px; background: var(--rule); border: 0; margin: 0; }

/* intro statement + key figures */
.statement { font-size: clamp(2rem, 1.1rem + 3.1vw, 4.4rem); font-weight: 260; font-stretch: 114%; letter-spacing: -.028em; line-height: 1.08; max-width: 18em; }
.statement em { font-style: normal; color: var(--fg-3); }
.specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(56px, 8vw, 120px); border-top: 1px solid var(--rule); }
.spec { display: grid; gap: 12px; padding: 30px 28px 0 0; }
.spec + .spec { padding-left: 28px; border-left: 1px solid var(--rule); }
.spec__value { font-size: clamp(2.6rem, 1.6rem + 2.8vw, 4.6rem); font-weight: 240; font-stretch: 116%; letter-spacing: -.03em; line-height: 1; }
.spec__label { color: var(--fg-2); font-size: .9375rem; max-width: 26ch; }
@media (max-width: 720px) {
  .specs { grid-template-columns: 1fr; }
  .spec + .spec { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); }
  .spec { padding: 26px 0; }
}

/* ---------- espacios: stacked cards on the home page ---------- */
.stack { display: grid; gap: 0; }
.stack__card {
  position: sticky; top: calc(var(--header-h) + 2vh); height: min(80vh, 860px); margin-bottom: 4vh;
  border-radius: var(--r); overflow: hidden; background: var(--night); color: #F6F7F9; isolation: isolate;
  box-shadow: 0 -30px 80px -40px rgba(0, 0, 0, .5); transform-origin: 50% 0;
}
.stack__card:last-child { margin-bottom: 0; }
.stack__media { position: absolute; inset: 0; z-index: -2; }
.stack__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); }
.stack__card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgba(4, 6, 10, .82) 0%, rgba(4, 6, 10, .1) 58%), linear-gradient(90deg, rgba(4, 6, 10, .5), rgba(4, 6, 10, 0) 60%);
}
.stack__dim { position: absolute; inset: 0; z-index: 2; background: #000; opacity: 0; pointer-events: none; }
.stack__body {
  position: absolute; inset: auto 0 0 0; padding: clamp(24px, 4vw, 56px);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px 48px;
}
.stack__index { font-size: .875rem; color: rgba(246, 247, 249, .64); font-variant-numeric: tabular-nums; }
.stack__name { font-size: clamp(2.6rem, 1.4rem + 4.4vw, 6.4rem); font-weight: 240; font-stretch: 118%; letter-spacing: -.035em; line-height: .95; margin: 6px 0 14px; }
.stack__text { color: rgba(246, 247, 249, .8); max-width: 50ch; }
.stack__systems { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 18px; font-size: .8125rem; color: rgba(246, 247, 249, .72); }
.stack__systems li { display: inline-flex; align-items: center; gap: 8px; }
.stack__systems li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px #fff; }
@media (max-width: 720px) {
  .stack__card { height: 74vh; }
  .stack__body { grid-template-columns: 1fr; }
}

/* ---------- soluciones: selector with the face of each device ---------- */
.selector { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.selector__keys { display: grid; gap: 8px; }
.selector__key {
  display: flex; align-items: center; gap: 16px; width: 100%; min-height: 76px; padding: 0 22px;
  border: 1px solid var(--rule); border-radius: 16px; background: transparent; color: var(--fg); cursor: pointer; text-align: left;
  font-size: clamp(1.1rem, 1rem + .5vw, 1.45rem); font-weight: 320; font-stretch: 112%; letter-spacing: -.01em;
  transition: background-color .4s var(--ease), border-color .4s var(--ease), color .4s;
}
.selector__key .led { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--fg-3); transition: background-color .4s, box-shadow .4s; }
.selector__key .n { margin-left: auto; font-size: .8125rem; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.selector__key:hover { border-color: var(--fg-3); }
.selector__key[aria-selected="true"] { background: color-mix(in srgb, var(--fg) 7%, transparent); border-color: color-mix(in srgb, var(--fg) 40%, transparent); }
.selector__key[aria-selected="true"] .led { background: var(--warm); box-shadow: 0 0 0 4px rgba(255, 203, 142, .18), 0 0 14px var(--warm); }
.selector__stage { position: sticky; top: calc(var(--header-h) + 24px); display: grid; }
.selector__panel { grid-area: 1 / 1; display: grid; gap: 26px; }
.selector__panel[hidden] { display: none !important; }
.selector__panel .body { font-size: 1.0625rem; }
.brands-line { display: flex; flex-wrap: wrap; gap: 8px; }
.brands-line li { padding: 6px 12px; border: 1px solid var(--rule); border-radius: var(--r-pill); font-size: .8125rem; color: var(--fg-2); }
.brands-line li:not(.is-sec) { color: var(--fg); font-weight: 500; }
.brands-line li.is-sec { align-self: center; padding: 3px 9px; font-size: .6875rem; color: var(--fg-3); }
/* ---------- Nosotros v14 (30/09/2026): all of it at night, like Inicio; one moment per section, no repeated tricks ---------- */
body.page-nosotros {
  --bg: var(--night); --fg: var(--on-night); --fg-2: var(--on-night-2); --fg-3: var(--on-night-3);
  --rule: var(--line-night); --panel: var(--night-2); color-scheme: dark;
}
/* (v14.3) the cover: «Lo que no se ve». The finished room; a line of light crosses it and shows, for a moment, the
   x-ray of what is built in and hidden; then the pointer is an x-ray lens (on a phone the lens visits the points) */
.nos-hero { min-height: 100svh; }
.nos-hero .page-hero__content { padding-block: calc(var(--header-h) + 16vh) clamp(56px, 10vh, 110px); gap: 22px; position: relative; z-index: 1; pointer-events: none; }
.nos-hero .page-hero__content a, .nos-hero .page-hero__content button { pointer-events: auto; }
.nos-hero__titulo { max-width: 10em; }
.nos-hero__lead { max-width: 46ch; color: rgba(246, 247, 249, .82); }
.nos-hero::after { background: linear-gradient(0deg, rgba(5, 7, 11, .9) 0%, rgba(5, 7, 11, .46) 22%, rgba(5, 7, 11, 0) 48%, rgba(5, 7, 11, .34) 100%), linear-gradient(90deg, rgba(5, 7, 11, .62) 0%, rgba(5, 7, 11, .28) 38%, rgba(5, 7, 11, 0) 62%); pointer-events: none; }
.motion .nos-hero .page-hero__media { transform-origin: 50% 40%; animation: nos-acerca 7s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes nos-acerca { from { transform: scale(1.12); } to { transform: none; } }
/* (v14.3) the room starts under the header: the ceiling, where most of the equipment hides, is never behind it */
.nos-rx .page-hero__media { overflow: hidden; top: var(--header-h); }
.nos-rx__mover img { object-position: var(--rx-pos, 50% 0%); }
@media (orientation: portrait) { .nos-rx { --rx-pos: 62% 50%; } }
/* the points, the lens ring and the line of light go above the veil (crisp), moving with the photo */
.nos-rx .nos-rx__sobre { z-index: 0; pointer-events: none; }
.nos-rx__mover { position: absolute; inset: 0; }
.nos-rx__mover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* the x-ray: shown only inside the lens and in the band behind the line of light */
.nos-rx__capa { position: absolute; inset: 0; pointer-events: none; --sx: -40%; --lx: -999px; --ly: -999px; --lr: 0px;
  -webkit-mask-image: radial-gradient(circle var(--lr) at var(--lx) var(--ly), #000 74%, transparent 100%), linear-gradient(90deg, transparent calc(var(--sx) - 30%), rgba(0, 0, 0, .55) calc(var(--sx) - 12%), #000 calc(var(--sx) - 1%), transparent calc(var(--sx) + .3%));
  mask-image: radial-gradient(circle var(--lr) at var(--lx) var(--ly), #000 74%, transparent 100%), linear-gradient(90deg, transparent calc(var(--sx) - 30%), rgba(0, 0, 0, .55) calc(var(--sx) - 12%), #000 calc(var(--sx) - 1%), transparent calc(var(--sx) + .3%));
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.nos-rx__equipos { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.nos-rx__equipos .eq { fill: none; stroke: rgba(196, 238, 255, .92); stroke-width: var(--sw, 2); stroke-linecap: round; stroke-linejoin: round; transition: stroke .5s ease, filter .5s ease; }
.nos-rx__equipos .eq .lleno { fill: rgba(196, 238, 255, .9); stroke: none; transition: fill .5s ease; }
.nos-rx__equipos .eq.is-on { stroke: #FFD6A0; filter: drop-shadow(0 0 calc(var(--sw, 2) * 2.5px) rgba(255, 196, 120, .85)); }
.nos-rx__equipos .eq.is-on .lleno { fill: #FFD6A0; }
.nos-rx__equipos .cable { fill: none; stroke: rgba(150, 220, 255, .78); stroke-width: calc(var(--sw, 2) * .8); stroke-dasharray: calc(var(--sw, 2) * 4) calc(var(--sw, 2) * 5); stroke-linecap: round; }
.motion .nos-rx.is-viva .nos-rx__equipos .cable { animation: rx-fluye 1.1s linear 8; }
.nos-rx__equipos .fino { stroke-width: calc(var(--sw, 2) * .6); }
.nos-rx__equipos .haz { stroke-width: calc(var(--sw, 2) * .7); stroke-dasharray: calc(var(--sw, 2) * 2) calc(var(--sw, 2) * 4); opacity: .5; }
/* what each one does (the sound, the signal, the air) shows while it is lit */
.nos-rx__equipos .onda { opacity: 0; stroke-width: calc(var(--sw, 2) * .75); }
.motion .nos-rx__equipos .eq.is-on .onda { animation: rx-onda 1.8s ease-out infinite; animation-delay: calc(var(--i, 0) * .3s); }
.nos-rx.sin-mov .nos-rx__equipos .eq.is-on .onda { opacity: .7; }
@keyframes rx-onda { 0% { opacity: 0; } 25% { opacity: .95; } 100% { opacity: 0; } }
.motion .nos-rx__equipos .eq.is-on .led { animation: rx-led 1.2s steps(2, jump-none) infinite; animation-delay: calc(var(--i, 0) * -.37s); }
@keyframes rx-led { 50% { fill: #9FE8FF; } }
@keyframes rx-fluye { to { stroke-dashoffset: calc(var(--sw, 2) * -18); } }
/* the line of light that scans the room */
.nos-rx__linea { position: absolute; top: 0; bottom: 0; left: var(--sx, -40%); width: 2px; margin-left: -1px; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, rgba(210, 244, 255, 0), #E8FAFF 18%, #E8FAFF 82%, rgba(210, 244, 255, 0));
  box-shadow: 0 0 14px 3px rgba(150, 225, 255, .7), 0 0 70px 14px rgba(110, 200, 255, .28); transition: opacity .35s ease; }
.nos-rx.is-escaneando .nos-rx__linea { opacity: 1; }
/* the lens ring */
.nos-rx__aro { position: absolute; left: 0; top: 0; width: 2px; height: 2px; border-radius: 50%; pointer-events: none; opacity: 0;
  border: 1px solid rgba(206, 242, 255, .7); box-shadow: 0 0 0 1px rgba(4, 8, 16, .35), inset 0 0 36px rgba(140, 214, 255, .22), 0 0 28px rgba(120, 200, 255, .2);
  transition: opacity .3s ease; }
.nos-rx.con-lupa .nos-rx__aro { opacity: 1; }
/* the points: a warm light where something hides, its name in a glass label */
.nos-rx__puntos { position: absolute; inset: 0; pointer-events: none; }
.nos-rx__punto { position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; pointer-events: auto; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  opacity: 0; transform: scale(.5); transition: opacity .6s ease, transform .7s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i, 0) * 90ms); }
.nos-rx.is-viva .nos-rx__punto, .nos-rx.sin-mov .nos-rx__punto { opacity: 1; transform: none; }
.nos-rx__punto[hidden] { display: none; }
.nos-rx__punto::before { content: ""; position: absolute; inset: 12px; border-radius: 50%; background: #FFC98A; box-shadow: 0 0 0 4px rgba(255, 201, 138, .16), 0 0 14px rgba(255, 190, 110, .7); transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.nos-rx__punto::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; border: 1px solid rgba(255, 210, 160, .55); opacity: 0; }
.motion .nos-rx.is-viva .nos-rx__punto::after { animation: rx-latido 2.6s ease-out 3; }
@keyframes rx-latido { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }
.nos-rx__punto:hover::before, .nos-rx__punto:focus-visible::before, .nos-rx__punto.is-visto::before { transform: scale(1.35); }
.nos-rx__punto:focus-visible { outline: 2px solid #FFD6A0; outline-offset: 2px; }
.nos-rx__nombre { position: absolute; left: 26px; bottom: 22px; display: grid; gap: 2px; padding: 8px 12px 9px; border-radius: 12px; white-space: nowrap; text-align: left;
  background: rgba(8, 14, 24, .72); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); border: 1px solid rgba(206, 242, 255, .22);
  color: #F6F7F9; font-size: .8125rem; line-height: 1.25; opacity: 0; transform: translate3d(0, 6px, 0); transition: opacity .35s ease, transform .45s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
.nos-rx__nombre small { font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 214, 160, .9); }
.nos-rx__punto.al-otro-lado .nos-rx__nombre { left: auto; right: 26px; text-align: right; }
.nos-rx__punto.abajo .nos-rx__nombre { bottom: auto; top: 22px; }
.nos-rx__punto.is-visto .nos-rx__nombre, .nos-rx__punto:hover .nos-rx__nombre, .nos-rx__punto:focus-visible .nos-rx__nombre { opacity: 1; transform: none; }
.nos-rx__pista { display: none; align-items: center; gap: 10px; margin: 4px 0 0; font-size: .875rem; color: rgba(246, 247, 249, .74); }
.js .nos-rx__pista { display: flex; }
.nos-rx__pista-icono { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(206, 242, 255, .7); box-shadow: inset 0 0 8px rgba(140, 214, 255, .45); }
.nos-rx__pista [data-rx-dedo] { display: none; }
@media (hover: none), (pointer: coarse) { .nos-rx__pista [data-rx-dedo] { display: inline; } .nos-rx__pista [data-rx-raton] { display: none; } }
/* phones: the room has the upper part of the screen (the ceiling is where most of it hides); the words go below */
@media (max-width: 720px) {
  .page-hero.nos-hero { align-items: end; }
  .nos-hero .page-hero__content { padding-block: 0 clamp(28px, 6svh, 56px); gap: 14px; }
  .page-hero.nos-hero::after { background: linear-gradient(0deg, rgba(5, 7, 11, .94) 0%, rgba(5, 7, 11, .78) 30%, rgba(5, 7, 11, .1) 56%, rgba(5, 7, 11, 0) 70%, rgba(5, 7, 11, .45) 100%); }
  .nos-hero__titulo { font-size: clamp(2.3rem, 1.6rem + 3.6vw, 3.1rem); }
  .nos-rx__nombre { font-size: .75rem; }
}
/* the mission: a large phrase that lights up word by word, under a faint warm glow */
.nos-mision { position: relative; isolation: isolate; }
.nos-mision::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(50% 55% at 8% 0%, rgba(255, 190, 120, .07), transparent 70%); }
.nos-mision__frase { margin-top: 28px; font-size: clamp(2.2rem, 1.1rem + 3.7vw, 5.1rem); max-width: 16.5em; }
/* the figures: large, thin, each with a line of light that draws itself */
.nos-cifras { padding-block: 0 clamp(90px, 12vw, 180px); }
.nos-cifras__lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); margin: 0; }
.nos-cifra { position: relative; display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 18px; padding-top: 30px; }
.nos-cifra::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--rule); }
.nos-cifra::after {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 1px; transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--warm), rgba(255, 203, 142, 0)); box-shadow: 0 0 14px rgba(255, 190, 120, .4);
}
.motion .nos-cifra::after { transform: scaleX(0); transition: transform 1.5s var(--ease) calc(.1s + var(--i) * .2s); }
.motion .nos-cifras__lista.is-vista .nos-cifra::after { transform: scaleX(1); }
.nos-cifra dd { margin: 0; font-size: clamp(3.6rem, 1.8rem + 6.4vw, 8.6rem); font-weight: 200; font-stretch: 118%; letter-spacing: -.045em; line-height: .95; color: #F6F7F9; }
.nos-cifra dd:not(.num) { font-size: clamp(2.8rem, 1.4rem + 4.2vw, 6rem); letter-spacing: -.035em; padding-top: .14em; }
.nos-cifra dt { color: var(--fg-2); font-size: .9375rem; max-width: 26ch; }
/* the three ideas: glass panels, each with a line drawing that traces itself and an LED that lights up */
.nos-valores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.nos-valor {
  position: relative; isolation: isolate; overflow: hidden; display: grid; align-content: start; gap: 18px; padding: clamp(28px, 3vw, 44px);
  border-radius: var(--r); border: 1px solid rgba(246, 247, 249, .09); background: linear-gradient(180deg, rgba(246, 247, 249, .05), rgba(246, 247, 249, .012));
  transition: border-color .5s var(--ease);
}
.nos-valor::before {
  content: ""; position: absolute; z-index: -1; top: -45%; right: -25%; width: 80%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 190, 120, .15), rgba(255, 190, 120, 0)); opacity: 0; transition: opacity 1.2s var(--ease);
}
.nos-valor.is-on::before { opacity: 1; }
.nos-valor:hover { border-color: rgba(255, 203, 142, .28); }
.nos-valor__dibujo { display: block; width: clamp(60px, 5.6vw, 84px); color: var(--warm); margin-bottom: 8px; }
.nos-valor__dibujo .icon { display: block; width: 100%; height: auto; stroke-width: 1; overflow: visible; filter: drop-shadow(0 0 10px rgba(255, 190, 120, .25)); }
.nos-valor h3 { display: flex; align-items: center; gap: 12px; margin: 0; font-size: clamp(1.5rem, 1.2rem + .9vw, 2.1rem); font-weight: 300; font-stretch: 112%; letter-spacing: -.015em; }
.nos-valor__led { flex: none; width: 7px; height: 7px; border-radius: 50%; background: rgba(237, 239, 242, .2); transition: background-color .5s ease, box-shadow .5s ease; }
.nos-valor.is-on .nos-valor__led, html:not(.motion) .nos-valor__led { background: var(--warm); box-shadow: 0 0 12px var(--warm-glow); }
.nos-valor p { margin: 0; color: var(--fg-2); max-width: 34ch; }
/* presence: the map large, and the four offices as a list whose LEDs light one after the other */
.nos-presencia__grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, .55fr); gap: clamp(28px, 4.5vw, 72px); align-items: center; }
.nos-mapa .map { border-radius: calc(var(--r) * 1.2); box-shadow: inset 0 0 0 1px rgba(246, 247, 249, .08); }
.nos-sedes { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--rule); }
.nos-sedes li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 14px; padding: 20px 0; border-bottom: 1px solid var(--rule); }
.nos-sedes__led { align-self: center; width: 7px; height: 7px; border-radius: 50%; background: var(--warm); box-shadow: 0 0 12px var(--warm-glow); }
.motion .nos-sedes__led { background: rgba(237, 239, 242, .2); box-shadow: none; transition: background-color .5s ease calc(var(--i) * .3s), box-shadow .5s ease calc(var(--i) * .3s); }
.motion .nos-sedes.is-on .nos-sedes__led { background: var(--warm); box-shadow: 0 0 12px var(--warm-glow); }
.nos-sedes strong { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.9rem); font-weight: 300; font-stretch: 114%; letter-spacing: -.015em; }
.nos-sedes li > span:last-child { color: var(--fg-2); font-size: .875rem; }
@media (max-width: 900px) {
  .nos-valores, .nos-presencia__grid { grid-template-columns: minmax(0, 1fr); }
  .nos-cifras__lista { grid-template-columns: minmax(0, 1fr); gap: 34px; }
}

/* Nosotros: under the rack, the brands used now and then, by what they do (theme colours: the section is on paper) */
/* (v14, Gabriel: "que no salgan tan pequeñas") the other brands: five columns by field, each name large on its own line,
   with a small LED that lights on hover */
.marcas-sec { display: grid; gap: clamp(18px, 2vw, 28px); margin-top: clamp(40px, 5vw, 72px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--rule); }
.marcas-sec__titulo { margin: 0; font-size: clamp(1.25rem, 1rem + .8vw, 1.75rem); font-weight: 300; font-stretch: 112%; letter-spacing: -.01em; color: var(--fg); }
.marcas-sec__grupos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px clamp(20px, 2.4vw, 40px); }
.marcas-sec__col { display: grid; gap: 14px; align-content: start; min-width: 0; }
.marcas-sec__grupo { margin: 0; padding-bottom: 10px; border-bottom: 1px solid var(--rule); font-size: .75rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-2); }
.marcas-sec__lista { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.marcas-sec__lista li { display: flex; align-items: center; gap: 10px; font-size: clamp(1.0625rem, .95rem + .45vw, 1.375rem); font-weight: 400; font-stretch: 110%; letter-spacing: -.005em; line-height: 1.2; color: var(--fg); transition: color .4s var(--ease); }
.marcas-sec__led { flex: none; width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 203, 142, .28); transition: background-color .4s var(--ease), box-shadow .4s var(--ease); }
.marcas-sec__lista li:hover .marcas-sec__led { background: var(--warm); box-shadow: 0 0 10px var(--warm); }
@media (max-width: 1100px) { .marcas-sec__grupos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .marcas-sec__grupos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 960px) {
  .selector { grid-template-columns: 1fr; }
  .selector__stage { position: relative; top: 0; }
}

/* device faces (drawn, not photographed) */
.face {
  position: relative; min-width: 0; aspect-ratio: 16 / 10; display: grid; grid-template-rows: auto 1fr auto auto; gap: 16px;
  padding: clamp(22px, 2.4vw, 34px); border-radius: var(--r); color: #fff;
  background:
    radial-gradient(120% 90% at 18% 12%, rgba(255, 255, 255, .09), rgba(255, 255, 255, 0) 60%),
    radial-gradient(80% 60% at 85% 100%, rgba(255, 190, 120, .08), rgba(255, 190, 120, 0) 70%),
    #090C12;
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 60px 120px -60px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .07);
}
.face__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: .8125rem; color: rgba(255, 255, 255, .62); }
.face__led { width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px rgba(255, 255, 255, .9); }
.face__read { align-self: center; display: grid; gap: 10px; }
.face__cap { font-size: .875rem; color: rgba(255, 255, 255, .62); }
.face__val { font-size: clamp(3rem, 2rem + 3.4vw, 6rem); font-weight: 230; font-stretch: 116%; letter-spacing: -.04em; line-height: .92; font-variant-numeric: tabular-nums; }
.face__val--word { font-size: clamp(2.2rem, 1.6rem + 2.4vw, 4.2rem); letter-spacing: -.03em; line-height: 1; }
.face__unit { margin-left: .22em; font-size: .42em; font-weight: 340; letter-spacing: 0; color: rgba(255, 255, 255, .62); }
.face__foot { font-size: .875rem; color: rgba(255, 255, 255, .62); }
.face__scale { min-height: 30px; display: flex; align-items: center; }
.face__segs { gap: 6px; }
.face__segs i { flex: 1; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .16); }
.face__segs i.on { background: #fff; box-shadow: 0 0 12px rgba(255, 255, 255, .6); }
.face__track { position: relative; width: 100%; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #fff var(--v), rgba(255, 255, 255, .2) var(--v)); }
.face__track::after { content: ""; position: absolute; left: var(--v); top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px rgba(255, 255, 255, .12); }
.face__ruler { position: relative; width: 100%; height: 12px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .34) 0 1px, transparent 1px calc(100% / 14)); box-shadow: inset -1px 0 rgba(255, 255, 255, .34); }
.face__ruler::after { content: ""; position: absolute; left: var(--v); top: -8px; width: 2px; height: 28px; margin-left: -1px; border-radius: 1px; background: #fff; box-shadow: 0 0 12px rgba(255, 255, 255, .8); }
.face__eq { gap: 3px; align-items: flex-end; height: 38px; }
.face__eq i { flex: 1; height: calc(var(--h) * 100%); border-radius: 1px; background: rgba(255, 255, 255, .86); transform-origin: 50% 100%; }
.face__leds { flex-wrap: wrap; gap: 8px 20px; font-size: .875rem; color: rgba(255, 255, 255, .86); }
.face__leds span { display: inline-flex; align-items: center; gap: 8px; }
.face__leds span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px rgba(255, 255, 255, .9); }
.face__cine { gap: 16px; font-size: .875rem; color: rgba(255, 255, 255, .86); }
.face__screen { flex: none; width: 110px; aspect-ratio: 2.39 / 1; border-radius: 2px; background: linear-gradient(115deg, #22324F 0%, #5C4A3A 55%, #C49A6C 100%); box-shadow: 0 0 26px rgba(196, 154, 108, .35), 0 0 0 1px rgba(255, 255, 255, .14); }

/* ---------- marcas: an equipment rack ---------- */
.rack {
  padding: clamp(14px, 1.6vw, 22px) clamp(10px, 1.2vw, 16px); border-radius: 16px;
  background: linear-gradient(180deg, #121720, #0A0D13); border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: 0 60px 120px -60px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .05);
  display: grid; gap: 6px; color: var(--on-night);
}
.rack__unit {
  position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto 22px; align-items: center; gap: 18px;
  min-height: 62px; padding: 0 10px; border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .015) 45%, rgba(0, 0, 0, .12)),
    #171D27;
  border: 1px solid rgba(255, 255, 255, .06); transition: background-color .4s, border-color .4s;
}
.rack__unit:hover { border-color: rgba(255, 255, 255, .2); }
.rack__ear { width: 8px; height: 14px; border-radius: 4px; background: #05070B; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 255, 255, .06); justify-self: center; }
.rack__name { font-size: clamp(1rem, .9rem + .5vw, 1.35rem); font-weight: 500; font-stretch: 122%; letter-spacing: .08em; }
.rack__role { font-size: .8125rem; color: var(--on-night-2); text-align: right; }
.rack__vent { width: clamp(40px, 8vw, 120px); height: 18px; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .55) 0 3px, transparent 3px 7px); border-radius: 2px; opacity: .8; }
.rack__led { position: absolute; right: 44px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: #2A3140; transition: background-color .35s, box-shadow .35s; }
.rack__unit.is-on .rack__led { background: #7C98FF; box-shadow: 0 0 10px #4A74FF; }
.rack__unit.is-on:nth-child(3n) .rack__led { background: var(--warm); box-shadow: 0 0 10px var(--warm-glow); }
.rack__unit.is-pending .rack__name::after { content: " *"; color: var(--warm); }
@media (max-width: 720px) {
  .rack__unit { grid-template-columns: 14px minmax(0, 1fr) auto 14px; gap: 12px; }
  .rack__vent { display: none; }
  .rack__led { right: 30px; }
  .rack__role { display: none; }
}

/* ---------- proceso (timeline) ---------- */
.timeline { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; padding-top: 44px; }
.timeline__line { position: absolute; left: 0; right: 0; top: 10px; height: 1px; background: var(--rule); }
.timeline__fill { position: absolute; inset: 0; background: linear-gradient(90deg, var(--led), #9AB2FF); transform-origin: 0 50%; transform: scaleX(1); }
.timeline__step { position: relative; display: grid; gap: 12px; align-content: start; }
.timeline__dot { position: absolute; top: -40px; width: 11px; height: 11px; border-radius: 50%; background: var(--bg); border: 1px solid var(--fg-3); transition: background-color .4s, box-shadow .4s, border-color .4s; }
.timeline__step.is-on .timeline__dot { background: var(--led); border-color: var(--led); box-shadow: 0 0 0 5px var(--led-soft), 0 0 16px var(--led); }
.timeline__n { font-size: .8125rem; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.timeline__title { font-size: clamp(1.35rem, 1.1rem + .8vw, 1.9rem); font-weight: 320; font-stretch: 112%; letter-spacing: -.015em; }
.timeline__text { color: var(--fg-2); font-size: .96875rem; }
@media (max-width: 960px) {
  .timeline { grid-template-columns: 1fr; padding-top: 0; padding-left: 36px; gap: 36px; }
  .timeline__line { left: 5px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .timeline__fill { transform-origin: 50% 0; }
  .timeline__dot { top: 6px; left: -36px; }
}

/* ---------- proyectos ---------- */
.cases { border-top: 1px solid var(--rule); }
.case {
  position: relative; display: grid; grid-template-columns: 120px minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px 48px;
  padding: clamp(28px, 3.4vw, 46px) 0; border-bottom: 1px solid var(--rule);
}
.case::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, var(--led), transparent); transform: scaleX(0); transform-origin: 0 50%; transition: transform .9s var(--ease);
}
.case:hover::before { transform: scaleX(1); }
.case__year { font-size: clamp(1.8rem, 1.3rem + 1.4vw, 2.8rem); font-weight: 240; font-stretch: 116%; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--fg-3); transition: color .5s; }
.case:hover .case__year { color: var(--fg); }
.case__title { font-size: clamp(1.4rem, 1.1rem + 1vw, 2.2rem); font-weight: 300; font-stretch: 114%; letter-spacing: -.02em; line-height: 1.12; }
.case__meta { margin-top: 10px; font-size: .875rem; color: var(--fg-2); }
.case__body { display: grid; gap: 16px; align-content: start; }
.case__text { color: var(--fg-2); font-size: .96875rem; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips li { padding: 5px 11px; border: 1px solid var(--rule); border-radius: var(--r-pill); font-size: .78125rem; color: var(--fg-2); }
@media (max-width: 900px) { .case { grid-template-columns: 1fr; } }

/* ---------- presencia (map) ---------- */
.presence { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.map { position: relative; aspect-ratio: 5 / 4; border-radius: var(--r); overflow: hidden; background: radial-gradient(90% 90% at 60% 40%, #121A28, #06080C); color: var(--on-night); }
.map svg { width: 100%; height: 100%; }
.map .grid line { stroke: rgba(237, 239, 242, .07); stroke-width: 1; }
.map .arc { fill: none; stroke: url(#arcGrad); stroke-width: 1.6; stroke-linecap: round; }
.map .city circle.core { fill: #fff; }
.map .city circle.halo { fill: rgba(255, 203, 142, .18); }
.map .city text { fill: rgba(237, 239, 242, .9); font-family: var(--font); font-size: 15px; font-weight: 450; }
.map .city text.sub { fill: rgba(237, 239, 242, .5); font-size: 12px; }
.cities { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.cities li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.cities strong { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.9rem); font-weight: 300; font-stretch: 114%; letter-spacing: -.015em; }
.cities span { color: var(--fg-2); font-size: .875rem; }
@media (max-width: 900px) { .presence { grid-template-columns: 1fr; } }

/* ---------- photo blocks ---------- */
.frame { position: relative; overflow: hidden; border-radius: var(--r); background: var(--night-3); }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame figcaption { position: absolute; left: 18px; bottom: 16px; color: rgba(246, 247, 249, .85); font-size: .8125rem; }
.duo { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(16px, 2vw, 28px); align-items: end; }
.duo .frame:first-child { aspect-ratio: 4 / 3; }
.duo .frame:last-child { aspect-ratio: 3 / 4; }
@media (max-width: 720px) { .duo { grid-template-columns: 1fr; } .duo .frame:last-child { aspect-ratio: 4 / 3; } }

/* ---------- CTA banner ---------- */
.cta {
  position: relative; isolation: isolate; overflow: clip; color: #F6F7F9; background: var(--night);
  padding-block: clamp(120px, 18vw, 260px);
}
.cta__media { position: absolute; inset: 0; z-index: -2; }
/* «Imagen ilustrativa»: every photo made with AI says so, small, in its lower right corner */
.foto-nota { position: absolute; right: var(--gutter); bottom: 14px; z-index: 2; margin: 0; font-size: .6875rem; letter-spacing: .02em; color: rgba(246, 247, 249, .62); text-shadow: 0 1px 6px rgba(0, 0, 0, .6); pointer-events: none; }
.frame .foto-nota, .panel .foto-nota { right: 14px; bottom: 12px; }
.panels__nota { margin: 10px 2px 0; text-align: right; font-size: .6875rem; letter-spacing: .02em; color: rgba(246, 247, 249, .66); }
.cta__media img { width: 100%; height: 100%; object-fit: cover; }
.cta::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(4, 6, 10, .82), rgba(4, 6, 10, .35) 70%), linear-gradient(0deg, rgba(4, 6, 10, .6), transparent 50%); }
.cta__inner { display: grid; gap: 30px; justify-items: start; }
/* (v14.3) Nosotros · socio de confianza: the lamps come up while the phrase lights word by word */
.nos-socio__sombra { position: absolute; inset: 0; background: #05070B; opacity: 0; pointer-events: none; }
.scrollfx .nos-socio__sombra { opacity: .64; }
/* the big lamp to the right of the phrase (the photo a little wider than the band, its light beside the words) */
.nos-socio .cta__media img { position: absolute; top: 0; left: -10%; width: 140%; max-width: none; height: 100%; object-position: 50% 18%; }
.cta.nos-socio .statement { max-width: 14.5em; }
@media (max-width: 760px) {
  .nos-socio .cta__media img { left: 0; width: 100%; object-position: 62% 30%; }
  .cta.nos-socio .statement { max-width: none; }
}
.cta .lead { color: rgba(246, 247, 249, .8); }

/* ---------- espacios page ---------- */
.subnav {
  position: sticky; top: var(--header-h); z-index: 40; border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--bg) 90%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.subnav__list { display: flex; flex-wrap: wrap; gap: 4px 26px; padding-block: 14px; }
.subnav__list a { display: inline-flex; align-items: center; gap: 9px; padding: 6px 0; font-size: .9375rem; font-stretch: 106%; text-decoration: none; color: var(--fg-2); transition: color .3s; }
.subnav__list a::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--fg-3); opacity: .5; transition: background-color .3s, box-shadow .3s, opacity .3s; }
.subnav__list a:hover { color: var(--fg); }
.subnav__list a.is-current { color: var(--fg); }
.subnav__list a.is-current::before { opacity: 1; background: var(--led); box-shadow: 0 0 10px var(--led); }
/* (v14.3, Gabriel 01/10: "como abajo está blanco... se te cierra la pupila") on Espacios the bar of the five spaces is
   night, like the header it sits under: the dark cover no longer ends on a white strip */
.page-espacios .subnav { --fg: var(--on-night); --fg-2: var(--on-night-2); --fg-3: var(--on-night-3); --rule: rgba(237, 239, 242, .08); background: color-mix(in srgb, var(--night) 90%, transparent); color: var(--on-night); }
.space-section { padding-block: clamp(80px, 10vw, 150px); border-bottom: 1px solid var(--rule); scroll-margin-top: calc(var(--header-h) + 64px); }
.space-section__media { aspect-ratio: 21 / 9; margin-bottom: clamp(40px, 5vw, 72px); }
.space-section__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.space-section__name { font-size: clamp(2.8rem, 1.5rem + 4.4vw, 6.8rem); font-weight: 240; font-stretch: 118%; letter-spacing: -.036em; line-height: .95; margin-bottom: 24px; }
.includes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; margin-top: 30px; border-top: 1px solid var(--rule); }
.includes li { padding: 14px 0; border-bottom: 1px solid var(--rule); font-size: .96875rem; display: flex; gap: 12px; align-items: baseline; }
.includes li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--led); flex: none; transform: translateY(-2px); }
@media (max-width: 900px) {
  .space-section__grid { grid-template-columns: 1fr; }
  .space-section__media { aspect-ratio: 4 / 3; }
  .includes { grid-template-columns: 1fr; }
}

/* the keypad plate: the systems a space usually has are lit */
.plate {
  display: grid; gap: 12px; padding: 16px; border-radius: 18px; color: #fff;
  background: linear-gradient(180deg, #121720, #0A0D13); border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 50px 100px -50px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.plate__head { display: flex; align-items: center; justify-content: space-between; min-height: 22px; font-size: .8125rem; color: rgba(255, 255, 255, .62); padding: 0 4px; }
.plate__led { width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px rgba(255, 255, 255, .9); }
.plate__keys { display: grid; gap: 6px; }
.plate__keys li { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 16px; border-radius: 11px; border: 1px solid rgba(255, 255, 255, .09); color: rgba(255, 255, 255, .4); font-size: .9375rem; font-stretch: 104%; }
.plate__keys li.on { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .32); color: #fff; }
.plate__keys .led { width: 6px; height: 6px; border-radius: 50%; flex: none; background: rgba(255, 255, 255, .2); }
.plate__keys li.on .led { background: #fff; box-shadow: 0 0 9px rgba(255, 255, 255, .9); }

/* ---------- soluciones page ---------- */
.sol-row { scroll-margin-top: calc(var(--header-h) + 76px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 110px); align-items: center; padding-block: clamp(64px, 9vw, 130px); border-bottom: 1px solid var(--rule); }
.sol-row:nth-child(even) .sol-row__visual { order: 2; }
.sol-row__text { display: grid; gap: 22px; align-content: start; }
.sol-row__name { font-size: clamp(2rem, 1.2rem + 2.4vw, 3.7rem); font-weight: 250; font-stretch: 116%; letter-spacing: -.032em; line-height: 1; }
.sol-row .includes { grid-template-columns: 1fr; margin-top: 4px; }
@media (max-width: 960px) {
  .sol-row { grid-template-columns: 1fr; }
  .sol-row:nth-child(even) .sol-row__visual { order: 0; }
}
.quote-block { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.quote-block blockquote { font-size: clamp(1.7rem, 1.1rem + 2vw, 3.1rem); font-weight: 260; font-stretch: 114%; letter-spacing: -.024em; line-height: 1.14; }
.quote-block cite { display: block; margin-top: 24px; font-style: normal; font-size: .875rem; color: var(--fg-2); }
@media (max-width: 900px) { .quote-block { grid-template-columns: 1fr; } }

/* the small plan behind the cover of cómo trabajamos */
.bp-wall { fill: none; stroke: rgba(210, 225, 255, .88); stroke-width: 3; stroke-linecap: square; }
.bp-cable { fill: none; stroke: #6F95FF; stroke-width: 1.6; stroke-dasharray: 6 5; }
.bp-dev { fill: #0A1422; stroke: #9DB6FF; stroke-width: 1.6; }
.bp-light { fill: rgba(255, 203, 142, .9); }

/* ---------- blueprint (cómo trabajamos, v12): the house plan in layers. The scroll moves a camera (site.js): the
   plan tilts into 3D, its walls rise (copies of the wall layer, one above the other), its layers separate and come
   together again, and each stage adds its part. Without scroll effects it is the whole plan, flat and complete. ---------- */
.blueprint__drawing {
  position: relative; margin: 0; min-height: 320px;
  border-radius: var(--r); overflow: hidden; isolation: isolate; container-type: size;
  background:
    radial-gradient(90% 70% at 50% 42%, rgba(60, 100, 190, .22), transparent 70%),
    radial-gradient(120% 100% at 50% 40%, #0E1B31 0%, #09121F 58%, #050A12 100%);
  box-shadow: inset 0 0 0 1px rgba(140, 170, 255, .1), 0 40px 80px -40px rgba(0, 0, 0, .6);
}
/* (v14.1) the room around the model takes the colour of each stage: cool for the design, amber for the engineering,
   green for the system, warm for the house working, blue for the support; and a soft shadow lies under the model */
.blueprint__drawing::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .9; transition: background-color 1.2s var(--ease), opacity 1.2s var(--ease);
  background: radial-gradient(70% 55% at 50% 58%, var(--bp-tono, rgba(80, 120, 220, .16)), transparent 72%); }
.blueprint__drawing::after { content: ""; position: absolute; left: 14%; right: 14%; bottom: 9%; height: 16%; z-index: 0; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, .45), transparent 70%); filter: blur(6px); }
.blueprint__drawing[data-etapa="1"] { --bp-tono: rgba(110, 150, 255, .2); }
.blueprint__drawing[data-etapa="2"] { --bp-tono: rgba(255, 178, 92, .17); }
.blueprint__drawing[data-etapa="3"] { --bp-tono: rgba(92, 255, 176, .13); }
.blueprint__drawing[data-etapa="4"] { --bp-tono: rgba(255, 200, 130, .2); }
.blueprint__drawing[data-etapa="5"] { --bp-tono: rgba(140, 170, 255, .2); }
.blueprint__drawing > .p3 { z-index: 1; }
.blueprint__nota { position: absolute; right: 16px; bottom: 12px; z-index: 2; margin: 0; font-size: .6875rem; letter-spacing: .02em; color: rgba(210, 225, 255, .45); }
.p3 { position: absolute; inset: 0; perspective: 1500px; perspective-origin: 50% 36%; --lado: min(94cqw, 94cqh); }
.p3__camara {
  /* the camera: set by site.js while the page scrolls (tilt, turn, zoom, where it looks, walls, layers apart). The zoom
     is in 3D (scale3d), so heights grow with it and the labels can be placed with the same numbers. */
  --rx: 0deg; --rz: 0deg; --s: .94; --fx: 50%; --fy: 50%; --tx: 0px; --ty: 0px; --sep: 0px; --muro: 0px;
  position: absolute; left: 50%; top: 50%; width: var(--lado); height: var(--lado); margin: calc(var(--lado) / -2) 0 0 calc(var(--lado) / -2);
  transform-style: preserve-3d; transform-origin: var(--fx) var(--fy);
  transform: translate(var(--tx), var(--ty)) rotateX(var(--rx)) rotateZ(var(--rz)) scale3d(var(--s), var(--s), var(--s));
}
.p3-capa { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: translateZ(var(--z, 0px)); }
.p3-piso { --z: 0px; }
.p3-arq { --z: .5px; }
.p3-muros { --z: calc(var(--muro) * var(--k, 0) / 5); }
.p3-muebles { --z: calc(var(--muro) * .3); }
.p3-equipos { --z: calc(var(--muro) + var(--sep)); }
.p3-luces { --z: calc(var(--muro) * .9 + var(--sep) * 2); }
.p3-wifi { --z: calc(var(--muro) * 1.2 + var(--sep) * 3); }
/* floor: the blueprint grid and the materials, faint */
.p3-rejilla path { stroke: rgba(130, 170, 255, .07); stroke-width: 1; }
.p3-losa { fill: rgba(18, 32, 56, .92); stroke: rgba(140, 170, 255, .2); stroke-width: 1.2; }
.p3-deck { fill: rgba(14, 24, 40, .85); }
.p3-madera path { stroke: rgba(214, 178, 132, .1); stroke-width: 1; }
.p3-moqueta { fill: rgba(74, 38, 92, .42); }
.p3-tarima { fill: rgba(110, 72, 138, .2); stroke: rgba(206, 176, 238, .3); stroke-width: 1; }
.p3-piedra path { stroke: rgba(170, 190, 230, .07); stroke-width: 1; }
.p3-tablas path { stroke: rgba(190, 160, 120, .12); stroke-width: 1; }
.p3-alfombra { fill: rgba(150, 128, 104, .12); stroke: rgba(214, 190, 160, .22); stroke-width: 1.2; }
.p3-piscina { fill: rgba(36, 118, 196, .38); stroke: rgba(130, 205, 255, .55); stroke-width: 1.4; }
.p3-causticas path { fill: none; stroke: rgba(170, 232, 255, .26); stroke-width: 1.2; }
.p3-jardin circle { fill: rgba(40, 96, 72, .16); stroke: rgba(120, 200, 160, .26); stroke-width: 1.2; }
/* architecture: doors with their swing, glass, the cinema's acoustic panels, the north */
.p3-vidrio path { fill: none; stroke: rgba(140, 205, 255, .85); stroke-width: 1.6; }
.p3-puerta path { fill: none; stroke: rgba(200, 215, 255, .5); stroke-width: 1.3; }
.p3-panel path { stroke: rgba(206, 184, 240, .42); stroke-width: 3; }
.p3-norte circle { fill: none; stroke: rgba(200, 215, 255, .35); stroke-width: 1.2; }
.p3-norte path { fill: rgba(200, 215, 255, .7); }
.p3-norte text { fill: rgba(200, 215, 255, .55); font-family: var(--font); font-size: 10px; text-anchor: middle; }
/* walls: the lower copies are the sides (darker), the top one is bright */
.p3-muro path { fill: none; stroke: rgba(216, 229, 255, .94); stroke-linecap: square; }
.p3-muro--ext path { stroke-width: 10; }
.p3-muro--int path { stroke-width: 6; }
.p3-muros--copia .p3-muro path { stroke: rgba(110, 140, 205, .34); }
.p3-muros--tope .p3-muro path { stroke: rgba(236, 243, 255, .98); }
/* the cinema screen stands on its wall, as tall as the walls */
.p3-muro-lienzo { fill: none; stroke: rgba(150, 180, 255, .8); stroke-width: 5; stroke-linecap: round; }
.p3-muros--copia .p3-muro-lienzo { stroke: rgba(120, 150, 230, .55); }
.p3-muros--tope .p3-muro-lienzo { stroke: #CFDDFF; }
/* engineering: each layer that floats reads as a sheet of the project (dashed outline and its name), with dashed
   guides at the corners down to the floor, so the separation reads as an exploded view (--sepn: 0 together, 1 apart) */
.p3-hoja { fill: rgba(120, 160, 255, .045); stroke: rgba(170, 198, 255, .55); stroke-width: 1.5; stroke-dasharray: 9 7; opacity: var(--sepn, 0); }
.p3-hoja__nombre { fill: rgba(214, 228, 255, .9); font-family: var(--font); font-size: 17px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; opacity: var(--sepn, 0); }
.p3-guia { position: absolute; left: calc(var(--x) * 100% / 800); top: calc(var(--y) * 100% / 800); width: 0; height: calc(var(--muro) * 1.2 + var(--sep) * 3); border-left: 1.5px dashed rgba(170, 198, 255, .55); transform-origin: 0 0; transform: rotateX(90deg); opacity: var(--sepn, 0); pointer-events: none; }
html:not(.scrollfx) .p3-hoja, html:not(.scrollfx) .p3-hoja__nombre { display: none; }
/* (v14, Gabriel: "muchas líneas") the corner guides are gone; while the layers are apart the floor grid, the walls and
   the furniture step back, so the three sheets read clearly */
.p3-guia { display: none !important; }
.p3-rejilla, .p3-muros, .p3-muebles, .p3-arq { transition: none; }
.p3__camara .p3-rejilla { opacity: calc(1 - var(--sepn, 0) * .85); }
.p3__camara .p3-muros, .p3__camara .p3-muebles { filter: opacity(calc(1 - var(--sepn, 0) * .6)); }
/* the installation step can be heard */
.bp-escuchar { display: inline-flex; align-items: center; gap: 9px; height: 38px; margin-top: 14px; padding: 0 16px; border-radius: var(--r-pill); border: 1px solid var(--rule); background: transparent; color: var(--fg); font: inherit; font-size: .875rem; cursor: pointer; transition: border-color .3s, background-color .3s; }
.bp-escuchar:hover { border-color: var(--fg); }
.bp-escuchar[aria-pressed="true"] { border-color: rgba(255, 170, 80, .8); background: rgba(255, 203, 142, .16); }
.bp-escuchar .eq { display: inline-flex; align-items: flex-end; gap: 2px; width: 13px; height: 12px; }
.bp-escuchar .eq i { flex: 1; height: 45%; background: currentColor; border-radius: 1px; }
.bp-escuchar .eq i:nth-child(2) { height: 90%; }
.bp-escuchar .eq i:nth-child(3) { height: 62%; }
.bp-escuchar[aria-pressed="true"] .eq i { animation: eq .8s ease-in-out infinite alternate; }
.bp-escuchar__on, .bp-escuchar[aria-pressed="true"] .bp-escuchar__off { display: none; }
.bp-escuchar[aria-pressed="true"] .bp-escuchar__on { display: inline; }
/* furniture */
.p3-mueble { fill: rgba(28, 44, 72, .72); stroke: rgba(214, 226, 248, .62); stroke-width: 1.3; stroke-linejoin: round; }
.p3-mueble .p3-cojin { fill: none; stroke: rgba(214, 226, 248, .34); }
.p3-mueble .p3-hueco { fill: rgba(8, 14, 26, .9); }
.p3-mueble .p3-fuego circle { fill: none; }
.p3-mueble .p3-almohada { fill: rgba(214, 226, 248, .16); }
.p3-mueble .p3-planta path { fill: none; stroke: rgba(130, 210, 160, .5); }
.p3-mueble .p3-planta circle { stroke: rgba(130, 210, 160, .45); }
.p3-mueble .p3-butaca rect { fill: rgba(72, 40, 96, .8); stroke: rgba(226, 210, 250, .66); }
.p3-mueble .p3-butaca .p3-butaca__resp { fill: rgba(170, 128, 214, .5); stroke: none; }
/* equipment and cables */
.p3-cables path { fill: none; stroke: #6F95FF; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.p3-rack rect { fill: #0C1830; stroke: #9DB6FF; stroke-width: 1.6; }
.p3-rack path { stroke: rgba(157, 182, 255, .5); stroke-width: 1.1; }
.p3-led circle { fill: #5CFFB0; }
.p3-tecla rect { fill: #0C1830; stroke: #9DB6FF; stroke-width: 1.4; }
.p3-corneta circle { fill: #0C1830; stroke: #FFCB8E; stroke-width: 1.4; }
.p3-corneta .p3-corneta__c { fill: #FFCB8E; stroke: none; }
.p3-ap rect { fill: #0C1830; stroke: #9DB6FF; stroke-width: 1.6; }
.p3-ap circle { fill: #9DB6FF; }
.p3-pantalla rect { fill: #16264A; stroke: rgba(170, 200, 255, .8); stroke-width: 1; }
.p3-lienzo { fill: #1A2748; stroke: rgba(210, 222, 255, .9); stroke-width: 1.2; }
.p3-proyector rect { fill: #0C1830; stroke: #C8D6FF; stroke-width: 1.4; }
.p3-proyector circle { fill: #E4EEFF; }
.p3-difusor rect { fill: rgba(127, 212, 255, .12); stroke: #7FD4FF; stroke-width: 1.3; }
.p3-difusor path { fill: none; stroke: rgba(127, 212, 255, .75); stroke-width: 1; stroke-dasharray: 3 3; }
.p3-cortina path { fill: none; stroke: rgba(232, 238, 252, .85); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.p3-cortina circle { fill: #E6ECFA; }
.p3-termo rect { fill: rgba(150, 195, 255, .12); stroke: rgba(150, 195, 255, .9); stroke-width: 1.2; }
/* lights */
.p3-brillo circle { fill: url(#p3-luz); }
.p3-brillo--agua circle { fill: url(#p3-luz-agua); }
.p3-brillo--frio { fill: url(#p3-luz-fria); }
.p3-brillo--lienzo { fill: url(#p3-luz-lienzo); }
.p3-brillo--aire { fill: url(#p3-luz-aire); }
.p3-foco circle { fill: #FFF1DC; }
/* wifi and support */
.p3-ondas circle { fill: none; stroke: #9DB6FF; stroke-width: 1.4; opacity: .5; }
html:not(.scrollfx) .p3-ondas circle { opacity: .2; }
.p3-soporte { fill: none; stroke: #5CFFB0; stroke-width: 1.6; stroke-dasharray: 4 5; }
.p3-soporte__fin { fill: #5CFFB0; }
/* what moves, in small pieces with their own layer: the air of the air conditioning, the projector's beam, the sound */
.p3-mov { position: absolute; overflow: visible; pointer-events: none; transform: translateZ(var(--hz, 0px)); --hz: calc(var(--muro) + var(--sep) + 1px); }
.p3-aire path { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 22 44; }
.p3-aire--a path { stroke: url(#p3-aire-a); }
.p3-aire--b path { stroke: url(#p3-aire-b); }
.p3-haz path { fill: url(#p3-haz-g); }
.p3-haz .p3-haz__rayo { fill: none; stroke: rgba(226, 236, 255, .2); stroke-width: 1; }
.p3-sonido { left: calc(var(--x) * 100% / 800); top: calc(var(--y) * 100% / 800); width: 0; height: 0; }
.p3-sonido i {
  position: absolute; left: 0; top: 0; width: calc(var(--lado) * .11); height: calc(var(--lado) * .11);
  margin: calc(var(--lado) * -.055) 0 0 calc(var(--lado) * -.055); border-radius: 50%; border: 2px solid rgba(255, 203, 142, .9); box-shadow: 0 0 12px rgba(255, 203, 142, .35); opacity: 0;
}
html.scrollfx .p3-aire { opacity: 0; transition: opacity .8s var(--ease); }
html.scrollfx .p3.is-mueve .p3-aire { opacity: 1; }
.p3.is-mueve .p3-aire path { animation: p3-aire 2.6s linear infinite; animation-delay: calc(var(--i) * -.65s); }
.p3.is-mueve .p3-haz__luz { animation: p3-haz 3.4s ease-in-out infinite; }
.p3.is-mueve .p3-sonido i { animation: p3-sonido 2.6s cubic-bezier(.2, .6, .3, 1) infinite; }
.p3.is-mueve .p3-sonido i + i { animation-delay: 1.3s; }
.p3.is-mueve .p3-sonido + .p3-sonido i { animation-delay: .65s; }
.p3.is-mueve .p3-sonido + .p3-sonido i + i { animation-delay: 1.95s; }
@keyframes p3-aire { from { stroke-dashoffset: 66; } to { stroke-dashoffset: 0; } }
@keyframes p3-haz { 0%, 100% { opacity: 1; } 38% { opacity: .8; } 52% { opacity: .96; } 71% { opacity: .76; } }
@keyframes p3-sonido { 0% { transform: scale(.22); opacity: .9; } 100% { transform: scale(1); opacity: 0; } }
/* the names of the zones and the labels of the systems: over the drawing, always facing the screen (site.js places them
   where their point of the plan falls; without it, the zones sit on the flat plan) */
.p3-rotulos { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.p3-tallos { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.p3-tallo { opacity: 0; transition: opacity .45s var(--ease); }
.p3-tallo.is-on { opacity: 1; }
.p3-tallo line { stroke: var(--c); stroke-width: 1.2; stroke-dasharray: 2 3; opacity: .85; }
.p3-tallo circle { fill: var(--c); }
.p3-tallo circle + circle { fill: none; stroke: var(--c); stroke-width: 1; opacity: .5; }
.p3-rotulo, .p3-pin {
  position: absolute; left: 0; top: 0; white-space: nowrap; line-height: 1; opacity: 0; visibility: hidden;
  transition: opacity .22s ease, visibility 0s linear .22s; will-change: transform;
}
/* (v14.2) one label leaves before the next one arrives: with the plan moving continuously, a name of a room and the
   label of a layer used to cross for a moment at the change of stage */
.p3-rotulo.is-on, .p3-pin.is-on { opacity: 1; visibility: visible; transition: opacity .45s var(--ease) .2s, visibility 0s .2s; }
.p3-rotulo {
  font-size: .78rem; font-weight: 500; letter-spacing: .03em; color: #EEF3FF; padding: 5px 9px; border-radius: 6px;
  background: rgba(7, 14, 27, .5); box-shadow: inset 0 0 0 1px rgba(170, 196, 255, .16);
  text-shadow: 0 1px 6px rgba(3, 8, 16, .9);
}
.p3-pin {
  --c: #9DB6FF; display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px 6px 9px; border-radius: 999px;
  font-size: .75rem; font-weight: 600; letter-spacing: .01em; color: #F4F7FF;
  background: rgba(8, 17, 33, .9); box-shadow: inset 0 0 0 1px var(--c), 0 8px 20px -8px rgba(0, 0, 0, .7), 0 0 18px -6px var(--c);
}
.p3-pin i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); flex: none; }
.p3-pin--red { --c: #5CFFB0; }
.p3-pin--wifi { --c: #9DB6FF; }
.p3-pin--audio { --c: #FFCB8E; }
.p3-pin--clima { --c: #7FD4FF; }
.p3-pin--cine { --c: #D2C4FF; }
.p3-pin--cortina { --c: #E6ECFA; }
.p3-pin--luz { --c: #FFE08A; }
/* (v13) the layers of the project: each sheet has its colour and its name (a label at its corner, always facing us) */
.p3-pin--capa-eq { --c: #FFB25C; } .p3-pin--capa-luz { --c: #FFE08A; } .p3-pin--capa-wifi { --c: #9DB6FF; }
.p3-equipos .p3-hoja { stroke: rgba(255, 178, 92, .85); stroke-width: 2.4; fill: rgba(255, 178, 92, .07); }
.p3-luces .p3-hoja { stroke: rgba(255, 224, 138, .8); stroke-width: 2.4; fill: rgba(255, 224, 138, .055); }
.p3-wifi .p3-hoja { stroke: rgba(157, 182, 255, .9); stroke-width: 2.4; fill: rgba(157, 182, 255, .08); }
.p3-hoja__nombre { display: none; }
html:not(.scrollfx) .p3-rotulo {
  opacity: 1; visibility: visible; transform: translate(-50%, -50%);
  left: calc(50% + (var(--x) / 800 - .5) * var(--lado) * .94); top: calc(50% + (var(--y) / 800 - .5) * var(--lado) * .94);
}
@media (max-width: 600px) {
  .p3-rotulo { font-size: .6875rem; padding: 4px 7px; }
  .p3-pin { font-size: .6875rem; padding: 5px 9px 5px 8px; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .p3.is-mueve .p3-aire path, .p3.is-mueve .p3-haz__luz, .p3.is-mueve .p3-sonido i { animation: none; }
}
/* (v14.1, Gabriel 01/10) the plan follows the page, with nothing that holds or guides it: the section is tall, the plan and
   its words stay on screen (sticky) and site.js turns the scroll into the story (--v: how present each stage is, --d:
   where it is, -1 still to come, 0 on screen, 1 gone by). A thin rail on the left says where you are. */
.blueprint { display: block; }
.blueprint__pin { display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(0, .72fr); gap: clamp(28px, 4vw, 72px); align-items: center; }
.scrollfx .blueprint { height: var(--bp-alto, 460svh); }
.scrollfx .blueprint__pin { position: sticky; top: calc(var(--header-h) + 2svh); height: calc(100svh - var(--header-h) - 4svh); }
.scrollfx .blueprint__pin .blueprint__drawing { height: 100%; max-height: 860px; }
.bp-panel { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(22px, 2.4vw, 40px); align-items: center; min-width: 0; }
/* the rail: the five stages, the one on screen lit; the light line fills as the page goes */
.bp-riel { display: grid; gap: 14px; margin: 0; padding: 0 0 0 18px; list-style: none; position: relative; }
.bp-riel::before { content: ""; position: absolute; left: 3px; top: 6px; bottom: 6px; width: 1px; background: var(--rule); }
.bp-riel__luz { position: absolute; left: 3px; top: 6px; width: 1px; height: calc(var(--riel-h, 200px) - 12px); pointer-events: none; }
.bp-riel__luz i { position: absolute; inset: 0; background: linear-gradient(180deg, #FFB870, var(--warm)); transform: scaleY(var(--bp-p, 0)); transform-origin: 50% 0; box-shadow: 0 0 8px rgba(255, 190, 120, .6); }
.bp-riel a { display: flex; align-items: baseline; gap: 10px; color: var(--fg-3); text-decoration: none; font-size: .8125rem; transition: color .4s var(--ease); }
.bp-riel a .num { font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.bp-riel__nombre { font-stretch: 108%; }
.bp-riel a:hover, .bp-riel a.is-on { color: var(--fg); }
.bp-riel a.is-on .num { color: #8A561A; }
.bp-riel a:focus-visible { outline: 2px solid var(--fg); outline-offset: 4px; border-radius: 4px; }
/* the words of each stage: stacked in one place, the one on screen comes up, the one gone by goes up and away */
.blueprint__steps { display: grid; margin: 0; padding: 0; list-style: none; min-width: 0; }
.bp-step { position: relative; display: grid; gap: 14px; align-content: center; padding-block: 24px; }
.bp-step__fondo { position: absolute; right: -.04em; top: -.42em; z-index: -1; font-size: clamp(7rem, 4rem + 9vw, 14rem); font-weight: 200; font-stretch: 125%; line-height: 1; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1px rgba(30, 40, 60, .12); pointer-events: none; }
.bp-step__n { margin: 0; font-size: .8125rem; letter-spacing: .1em; color: #8A561A; font-variant-numeric: tabular-nums; }
.bp-step__n span { color: var(--fg-3); }
.bp-step__title { margin: 0; font-size: clamp(2.3rem, 1.4rem + 2.8vw, 4.4rem); font-weight: 250; font-stretch: 116%; letter-spacing: -.035em; line-height: 1; }
.bp-step .body { margin: 0; max-width: 34ch; }
/* (v13) what the drawing shows in each stage, with the colour of each thing as it appears on the plan */
.bp-step__plano { margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--fg-2); max-width: 40ch; }
.bp-step__plano b { font-weight: 500; color: var(--fg); }
.bp-step__plano i { display: inline-block; width: 7px; height: 7px; margin: 0 5px 1px 2px; border-radius: 50%; background: var(--c, #9DB6FF); box-shadow: 0 0 6px var(--c, #9DB6FF); vertical-align: middle; }
.bp-c-eq { --c: #FFB25C; } .bp-c-luz { --c: #FFE08A; } .bp-c-wifi { --c: #9DB6FF; } .bp-c-red { --c: #5CFFB0; } .bp-c-audio { --c: #FFCB8E; }
.bp-c-clima { --c: #7FD4FF; } .bp-c-cine { --c: #D2C4FF; } .bp-c-cortina { --c: #E6ECFA; }
.scrollfx .bp-step { grid-area: 1 / 1; opacity: var(--v, 0); transform: translate3d(0, calc(var(--d, 0) * -42px), 0); visibility: hidden; will-change: opacity, transform; }
.scrollfx .bp-step.is-vis { visibility: visible; }
.scrollfx .bp-step__fondo { transform: translate3d(0, calc(var(--d, 0) * -70px), 0); }
html:not(.scrollfx) .bp-riel, html:not(.scrollfx) .bp-riel__luz { display: none; }
html:not(.scrollfx) .bp-panel { grid-template-columns: minmax(0, 1fr); }
html:not(.scrollfx) .blueprint__drawing { height: min(78svh, 760px); }
/* tablets and phones: the plan on top, the rail as a row of numbers, the words of the stage under it */
@media (max-width: 960px) {
  .blueprint__pin { grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; }
  .scrollfx .blueprint__pin { top: calc(var(--header-h) + 6px); height: calc(100svh - var(--header-h) - 12px); }
  .scrollfx .blueprint__pin .blueprint__drawing { height: min(48svh, 92vw); }
  .bp-panel { grid-template-columns: minmax(0, 1fr); gap: 6px; align-items: start; }
  .bp-riel { grid-auto-flow: column; justify-content: space-between; gap: 6px; padding: 0 0 10px; }
  .bp-riel::before { left: 0; right: 0; top: auto; bottom: 0; width: auto; height: 1px; }
  .bp-riel__luz { left: 0; top: calc(var(--riel-h, 40px) - 1px); bottom: auto; right: auto; height: 1px; width: 100%; }
  .bp-riel__luz i { transform: scaleX(var(--bp-p, 0)); transform-origin: 0 50%; }
  .bp-riel__nombre { display: none; }
  .bp-riel a { font-size: .9375rem; padding: 6px 4px; }
  .bp-step { gap: 8px; padding-block: 10px; align-content: start; }
  .bp-step__title { font-size: 1.75rem; }
  .bp-step__fondo { font-size: 6rem; top: -.2em; }
  .bp-step .body { font-size: .9375rem; line-height: 1.5; max-width: none; }
  .bp-step__plano { font-size: .8125rem; line-height: 1.5; }
  html:not(.scrollfx) .blueprint__drawing { height: min(60svh, 92vw); }
}
@media (max-width: 960px) and (max-height: 760px) { .scrollfx .bp-step__plano { display: none; } }
.values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--rule); }
.value { padding: 34px 32px 34px 0; display: grid; gap: 14px; align-content: start; }
.value + .value { padding-left: 32px; border-left: 1px solid var(--rule); }
.value h3 { font-size: clamp(1.3rem, 1.1rem + .7vw, 1.8rem); font-weight: 320; font-stretch: 112%; letter-spacing: -.015em; }
.value p { color: var(--fg-2); }
@media (max-width: 900px) { .values { grid-template-columns: 1fr; } .value + .value { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); } .value { padding: 26px 0; } }

/* ---------- contacto ---------- */
.contact { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(36px, 6vw, 110px); align-items: start; }
.contact__aside { display: grid; gap: 28px; position: sticky; top: calc(var(--header-h) + 28px); }
.mailbox { padding: 22px 24px; border-radius: var(--r-sm); background: var(--panel); border: 1px solid var(--rule); }
.mailbox__label { font-size: .8125rem; color: var(--fg-2); margin-bottom: 8px; }
.mailbox__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.mailbox__addr { font-size: clamp(1.05rem, .95rem + .4vw, 1.25rem); font-stretch: 106%; user-select: all; overflow-wrap: anywhere; }
.mailbox__status { font-size: .8125rem; color: var(--fg-2); margin-top: 8px; min-height: 1.3em; }
.icon-btn { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--rule); background: transparent; color: var(--fg); cursor: pointer; transition: border-color .3s; }
.icon-btn:hover { border-color: var(--fg); }
.icon-btn .icon { width: 18px; height: 18px; }
.form { display: grid; min-width: 0; padding: clamp(24px, 3.4vw, 48px); border-radius: var(--r); background: var(--panel); border: 1px solid var(--rule); box-shadow: 0 40px 100px -60px rgba(11, 13, 17, .35); }
.form__stage { display: grid; gap: 24px; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 640px) { .form__row { grid-template-columns: 1fr; } }
.field { display: grid; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
.field__label { font-size: .875rem; font-weight: 500; padding: 0; margin-bottom: 2px; }
.field__opt { font-weight: 400; color: var(--fg-2); }
.field__help { font-size: .8125rem; color: var(--fg-2); }
.field__error { font-size: .8125rem; color: var(--danger); }
.field__error:empty { display: none; }
.input {
  width: 100%; height: 52px; padding: 0 16px; border-radius: var(--r-sm);
  border: 1px solid var(--line-2); background: var(--bg); color: var(--fg);
  transition: border-color .3s, box-shadow .3s;
}
.input:hover { border-color: color-mix(in srgb, var(--fg) 45%, transparent); }
.input:focus-visible { outline: none; border-color: var(--led); box-shadow: 0 0 0 4px var(--led-soft); }
.input[aria-invalid="true"] { border-color: var(--danger); }
.input--area { height: auto; min-height: 140px; padding: 14px 16px; resize: vertical; }
.select { position: relative; }
.select select { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer; background-color: var(--bg); color: var(--fg); }
.select::after { content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; border-right: 1.5px solid var(--fg-2); border-bottom: 1.5px solid var(--fg-2); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.choice-row { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; display: inline-flex; }
.choice input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.choice span { display: inline-flex; align-items: center; height: 42px; padding: 0 16px; border-radius: var(--r-pill); border: 1px solid var(--line-2); font-size: .875rem; transition: background-color .3s, border-color .3s, color .3s; }
.choice input:hover + span { border-color: var(--fg); }
.choice input:checked + span { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.choice input:focus-visible + span { outline: 2px solid var(--led); outline-offset: 2px; }
.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; margin-top: 6px; }
.form__note { font-size: .8125rem; color: var(--fg-2); max-width: 38ch; }
.form__done { display: grid; gap: 16px; align-content: start; }
.form__done:focus-visible { outline: 2px solid var(--led); outline-offset: 6px; }
.form__done-icon .icon { width: 42px; height: 42px; color: var(--led); }
.form__done-title { font-size: 2.2rem; font-weight: 300; font-stretch: 114%; letter-spacing: -.02em; line-height: 1.1; }
.form__done > p { color: var(--fg-2); max-width: 52ch; }
.form__done-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.btn--text { --b-bg: transparent; --b-fg: var(--fg-2); height: 44px; padding: 0 10px; text-decoration: underline; text-underline-offset: 4px; }
.social-row { display: flex; flex-wrap: wrap; gap: 10px; }
.social-row a { display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 16px; border: 1px solid var(--rule); border-radius: var(--r-pill); text-decoration: none; font-size: .875rem; transition: border-color .3s; }
.social-row a:hover { border-color: var(--fg); }
.social-row .icon { width: 17px; height: 17px; }
@media (max-width: 960px) { .contact { grid-template-columns: 1fr; } .contact__aside { position: relative; top: 0; } }

/* ---------- footer ---------- */
.site-footer { background: var(--night); color: var(--on-night); padding-block: clamp(80px, 9vw, 140px) 30px; }
.site-footer__top { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.site-footer__logo { display: block; width: 168px; color: var(--on-night); }
.site-footer__logo svg { width: 100%; height: auto; }
.site-footer__tagline { margin-top: 22px; color: var(--on-night-2); max-width: 32ch; }
.site-footer__heading { font-size: .8125rem; font-weight: 500; color: var(--on-night-3); margin-bottom: 16px; }
.site-footer ul { display: grid; gap: 11px; font-size: .96875rem; }
.site-footer a { text-decoration: none; color: var(--on-night-2); transition: color .3s; }
.site-footer a:hover { color: #fff; }
.site-footer__bottom { margin-top: clamp(56px, 7vw, 100px); padding-top: 22px; border-top: 1px solid var(--line-night); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: .8125rem; color: var(--on-night-3); }
@media (max-width: 900px) { .site-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } .site-footer__brand { grid-column: 1 / -1; } }
@media (max-width: 480px) { .site-footer__top { grid-template-columns: 1fr; } }
.site-footer__legal ul { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.site-footer__legal a { color: var(--on-night-2); text-decoration: none; }
.site-footer__legal a:hover, .site-footer__legal a:focus-visible { color: var(--on-night); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- legal pages (privacy, cookies, terms): plain reading, one column ---------- */
.page-hero--legal { min-height: min(56svh, 600px); }
.legal { max-width: 72ch; color: var(--on-night-2); font-size: 1.0625rem; line-height: 1.7; }
.legal > * + * { margin-top: 1em; }
.legal h2 { margin-top: 2.4em; font-size: clamp(1.3rem, 1.1rem + .6vw, 1.7rem); font-weight: 400; font-stretch: 110%; letter-spacing: -.01em; line-height: 1.2; color: var(--on-night); text-wrap: balance; }
.legal h2 + * { margin-top: .7em; }
.legal ul { display: grid; gap: .5em; padding-left: 1.2em; list-style: disc; }
.legal li::marker { color: var(--warm); }
.legal strong { font-weight: 500; color: var(--on-night); }
.legal a { color: var(--on-night); text-decoration: underline; text-decoration-color: rgba(255, 203, 142, .6); text-underline-offset: 3px; }
.legal a:hover { text-decoration-color: currentColor; }
.legal__fecha { font-size: .875rem; color: var(--on-night-3); }
.legal__otros { margin-top: 2.6em !important; padding-top: 1.2em; border-top: 1px solid var(--line-night); font-size: .9375rem; }
.legal__tabla { overflow-x: auto; }
.legal table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: .9375rem; line-height: 1.5; }
.legal th, .legal td { padding: 12px 14px 12px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-night); }
.legal th { font-weight: 500; color: var(--on-night); }
.legal td:first-child { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8125rem; color: var(--on-night); white-space: nowrap; }
@media (max-width: 560px) {
  .legal table { min-width: 0; }
  .legal thead { display: none; }
  .legal table, .legal tbody, .legal tr, .legal td { display: block; }
  .legal tr { padding: 14px 0; border-bottom: 1px solid var(--line-night); }
  .legal td { padding: 2px 0; border: 0; }
  .legal td:last-child { margin-top: 4px; font-size: .8125rem; color: var(--on-night-3); }
  .legal td:last-child::before { content: "Duración: "; }
}

/* ---------- the short cookie notice: a small card at the bottom, once per browser ---------- */
.aviso {
  position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 90; display: flex; align-items: center; gap: 12px 18px;
  width: min(460px, calc(100% - 32px)); padding: 14px 16px 14px 18px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(10, 13, 20, .94); color: rgba(246, 247, 249, .82); font-size: .8125rem; line-height: 1.5;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}
.aviso[hidden] { display: none; }
.aviso a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.aviso__ok {
  flex: none; height: 38px; padding: 0 16px; border-radius: var(--r-pill); border: 1px solid rgba(255, 255, 255, .3);
  background: #fff; color: #07090D; font-size: .8125rem; font-weight: 500; cursor: pointer;
}
.aviso__ok:hover { background: #FFE7C8; }
.aviso__ok:focus-visible { outline: 2px solid var(--led); outline-offset: 3px; }
.aviso.is-entra { animation: aviso-entra .5s var(--ease) both; }
@keyframes aviso-entra { from { opacity: 0; transform: translateY(12px); } }
@media (max-width: 480px) { .aviso { gap: 12px; padding: 10px 10px 10px 14px; } .aviso__ok { height: 36px; padding: 0 14px; } }
@media (prefers-reduced-motion: reduce) { .aviso.is-entra { animation: none; } }

/* ---------- 404 ---------- */
.lost { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: var(--gutter); background: var(--night); color: var(--on-night); }
.lost .lead { color: var(--on-night-2); margin-inline: auto; }
.lost .wrap { display: grid; gap: 26px; justify-items: center; }
.lost__led { width: 10px; height: 10px; border-radius: 50%; background: var(--warm); box-shadow: 0 0 0 8px rgba(255, 203, 142, .12), 0 0 40px 6px rgba(255, 203, 142, .55); animation: lostled 1.6s var(--ease-io) 3 alternate both; }
@keyframes lostled { from { opacity: .35; } to { opacity: 1; } }


/* ---------- night sections: always dark on their own; when motion runs, the whole page dims around them ---------- */
[data-night] {
  --bg: var(--night); --fg: var(--on-night); --fg-2: var(--on-night-2); --fg-3: var(--on-night-3);
  --rule: var(--line-night); --panel: var(--night-2);
  background: var(--bg); color: var(--fg); color-scheme: dark;
}

/* ---------- breadcrumbs ---------- */
.crumbs ol { display: flex; flex-wrap: wrap; gap: 10px; }
.crumbs li + li::before { content: "/"; margin-right: 10px; opacity: .45; }
.crumbs [aria-current] { color: rgba(246, 247, 249, .9); }

/* ---------- map (dotted land, light arcs, offices) ---------- */
.map .land { fill: none; stroke: rgba(237, 239, 242, .24); stroke-width: 4.2; stroke-linecap: round; }
.map .spark { fill: #FFF6EA; stroke: rgba(255, 203, 142, .35); stroke-width: 7; opacity: 0; }
.map .city .halo { stroke: rgba(255, 203, 142, .55); stroke-width: 1; }
.map figcaption { position: absolute; left: 20px; bottom: 16px; font-size: .8125rem; color: var(--on-night-3); }

/* ---------- Espacios: hero with five panels that open on hover ---------- */
.page-hero--panels { display: block; min-height: 0; padding-bottom: clamp(20px, 3vw, 44px); }
.page-hero--panels::after { display: none; }
.page-hero--panels .page-hero__content { padding-block: calc(var(--header-h) + clamp(48px, 9vh, 120px)) clamp(32px, 4.5vw, 60px); }
.panels { display: flex; gap: 10px; height: clamp(360px, 56vh, 640px); }
.panel { position: relative; flex: 1 1 0; min-width: 0; border-radius: var(--r); overflow: hidden; background: var(--night-3); transition: flex-grow 1s var(--ease); }
.panel a { position: absolute; inset: 0; display: block; color: #F6F7F9; text-decoration: none; }
.panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); filter: brightness(.6) saturate(.8); transition: transform 1.4s var(--ease), filter 1s var(--ease); }
.panel a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(4, 6, 10, .64) 0%, rgba(4, 6, 10, 0) 50%); }
.panel__label { position: absolute; left: clamp(16px, 1.6vw, 26px); right: 16px; bottom: clamp(16px, 1.6vw, 24px); z-index: 1; display: grid; gap: 6px; }
.panel__name { display: flex; align-items: center; gap: 10px; font-size: clamp(1.1rem, .95rem + .55vw, 1.55rem); font-weight: 320; font-stretch: 108%; letter-spacing: -.01em; white-space: nowrap; }
.panel__name::before { content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none; background: rgba(255, 255, 255, .35); transition: background-color .5s, box-shadow .5s; }
.panel__text { max-width: 34ch; font-size: .875rem; color: rgba(246, 247, 249, .78); opacity: 0; transform: translateY(8px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.panels:hover .panel, .panels:focus-within .panel { flex-grow: .78; }
.panels .panel:hover, .panels .panel:focus-within { flex-grow: 3.1; }
.panel:hover img, .panel:focus-within img { transform: scale(1); filter: brightness(.95) saturate(1); }
.panel:hover .panel__name::before, .panel:focus-within .panel__name::before { background: var(--warm); box-shadow: 0 0 12px var(--warm); }
.panel:hover .panel__text, .panel:focus-within .panel__text { opacity: 1; transform: none; transition-delay: .25s; }
@media (hover: none), (max-width: 900px) {
  .panels { flex-direction: column; height: auto; gap: 8px; }
  .panel, .panels:hover .panel, .panels .panel:hover { flex: none; height: clamp(96px, 16vw, 132px); }
  .panel img { filter: brightness(.7) saturate(.9); transform: none; }
  .panel__text { display: none; }
}

/* ---------- typographic hero (Proyectos) and plan hero (Cómo trabajamos) ---------- */
.page-hero--type {
  min-height: min(76svh, 820px);
  background:
    radial-gradient(70% 55% at 78% 0%, rgba(255, 190, 120, .13), rgba(255, 190, 120, 0) 70%),
    radial-gradient(55% 45% at 0% 100%, rgba(74, 116, 255, .12), rgba(74, 116, 255, 0) 70%),
    var(--night);
}
.page-hero--type::after, .page-hero--plan::after { display: none; }
.hero-line { position: absolute; left: 0; right: 0; top: 58%; height: 1px; z-index: -1; background: linear-gradient(90deg, rgba(255, 203, 142, 0), rgba(255, 203, 142, .7) 50%, rgba(255, 203, 142, 0)); transform-origin: 0 50%; }
.page-hero--plan { background: #0A1422; }
.plan-bg { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.plan-bg::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(130, 170, 255, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(130, 170, 255, .08) 1px, transparent 1px);
  background-size: 56px 56px; background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(120% 90% at 70% 30%, #000 30%, transparent 80%); mask-image: radial-gradient(120% 90% at 70% 30%, #000 30%, transparent 80%);
}
.plan-bg svg { position: absolute; right: -4%; top: 12%; width: min(70%, 980px); height: auto; opacity: .9; }
.plan-bg .bp-wall { stroke: rgba(210, 225, 255, .5); }
.plan-bg .bp-cable { stroke: rgba(111, 149, 255, .8); }
@media (max-width: 900px) { .plan-bg svg { width: 120%; right: -40%; top: 18%; opacity: .5; } }

/* ---------- Contacto: the house wakes up in the hero ---------- */
.page-hero__media--wake img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 58% 60%; }
.page-hero__media--wake .is-lit { position: absolute; inset: 0; display: block; }
.motion .page-hero__media--wake .is-lit { opacity: 0; }

/* ---------- Proyectos: filters and the list ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(28px, 4vw, 52px); }
.filter {
  display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 18px; border-radius: var(--r-pill);
  border: 1px solid var(--rule); background: transparent; color: var(--fg-2); cursor: pointer;
  font-size: .875rem; font-weight: 500; font-stretch: 106%; transition: background-color .35s, color .35s, border-color .35s;
}
.filter:hover { border-color: var(--fg-3); color: var(--fg); }
.filter .count { font-size: .78125rem; color: var(--fg-3); font-variant-numeric: tabular-nums; transition: color .35s; }
.filter[aria-pressed="true"] { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.filter[aria-pressed="true"] .count { color: color-mix(in srgb, var(--bg) 60%, transparent); }
.cases--full .case { --mx: 50%; --my: 50%; }
.cases--full .case::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .6s var(--ease);
  background: radial-gradient(520px circle at var(--mx) var(--my), rgba(255, 203, 142, .09), rgba(255, 203, 142, 0) 62%);
}
.cases--full .case:hover::after { opacity: 1; }
.case__place { display: inline-flex; align-items: center; gap: 8px; }
.cases__note { margin-top: clamp(28px, 4vw, 48px); color: var(--fg-2); font-size: .9375rem; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }

/* ---------- Soluciones page: device faces a bit larger, index under the hero ---------- */
.sol-row__visual { display: grid; gap: 18px; }
.sol-row__visual .face { aspect-ratio: 16 / 11; }
@media (max-width: 560px) { .face, .sol-row__visual .face { aspect-ratio: auto; min-height: 250px; } }
.sol-row .brands-line { margin-top: 4px; }
.sol-row__tag { font-size: .8125rem; color: var(--fg-3); font-variant-numeric: tabular-nums; }

/* ---------- small helpers for inner pages ---------- */
.intro-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(32px, 6vw, 96px); align-items: end; margin-top: clamp(36px, 5vw, 64px); }
@media (max-width: 900px) { .intro-grid { grid-template-columns: 1fr; } }
.cta .statement { max-width: 22em; }
.cta cite { font-style: normal; font-size: .875rem; color: rgba(246, 247, 249, .7); }
.space-section__lead { margin-bottom: 22px; }
.plate__title { font-size: .8125rem; color: rgba(255, 255, 255, .62); }
.plate__keys a { color: inherit; text-decoration: none; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; }
.plate__keys li.on:has(a:hover) { background: rgba(255, 255, 255, .14); }
.plate__keys a .icon { margin-left: auto; width: 16px; height: 16px; opacity: .55; transition: opacity .3s, transform .4s var(--ease); }
.plate__keys a:hover .icon { opacity: 1; transform: translate(2px, -2px); }


/* ---------- inner page covers: a calmer title size, stacked variant ---------- */
.page-hero .display { font-size: clamp(2.7rem, 1rem + 4.9vw, 6.4rem); }
.page-hero__row--stack { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.hero-line { top: auto; bottom: 0; }
.plan-bg svg { right: 3%; top: 50%; width: min(50%, 760px); transform: translateY(-46%); }
@media (max-width: 900px) { .plan-bg svg { width: 110%; right: -30%; top: 22%; transform: none; opacity: .45; } }

/* Espacios on a computer: the five panels fill the whole cover and the title floats over them */
@media (hover: hover) and (min-width: 901px) {
  .page-hero--panels { min-height: 100svh; display: grid; align-items: start; padding-bottom: 0; }
  .page-hero--panels::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    /* (v14.3, Gabriel 01/10: "se ve como muy oscuro... subirle un poco el brillo a las imágenes") lighter shades: the
       photos show their colour, the title keeps its own soft shadow */
    background:
      linear-gradient(180deg, rgba(4, 6, 10, .64) 0%, rgba(4, 6, 10, .34) 40%, rgba(4, 6, 10, 0) 64%),
      linear-gradient(90deg, rgba(4, 6, 10, .62) 0%, rgba(4, 6, 10, .3) 34%, rgba(4, 6, 10, 0) 60%);
  }
  /* (v13) the title reads clean: no seam between the photos runs through its letters (the panels touch, and a thin
     line between them shows only lower down, by their names) */
  .page-hero--panels .display { text-shadow: 0 2px 34px rgba(4, 6, 10, .6); }
  .page-hero--panels .lead { text-shadow: 0 1px 3px rgba(4, 6, 10, .55), 0 2px 22px rgba(4, 6, 10, .7); }
  .panels-wrap .panels { gap: 0; }
  .panels-wrap .panel + .panel::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; z-index: 2; width: 1px; pointer-events: none;
    background: linear-gradient(180deg, rgba(237, 239, 242, 0) 0%, rgba(237, 239, 242, 0) 56%, rgba(237, 239, 242, .18) 100%);
  }
  .page-hero--panels .page-hero__content { position: relative; z-index: 2; pointer-events: none; padding-block: calc(var(--header-h) + 9vh) 0; }
  .page-hero--panels .page-hero__content a { pointer-events: auto; }
  .panels-wrap { position: absolute; inset: 0; width: 100%; max-width: none; margin: 0; }
  .panels-wrap .panels { height: 100%; }
  .panels-wrap .panel { border-radius: 0; }
  .panels-wrap .panel__label { bottom: clamp(26px, 4.5vh, 48px); left: clamp(18px, 1.8vw, 30px); z-index: 3; }
  .panels-wrap .panel img { filter: brightness(.9) saturate(.96); }
  .panels-wrap .panel:hover img, .panels-wrap .panel:focus-within img { filter: brightness(.97) saturate(1); }
}
@media (max-width: 720px) {
  .scroll-cue { display: none; }
  .page-hero::after { background: linear-gradient(0deg, rgba(4, 6, 10, .9) 0%, rgba(4, 6, 10, .62) 50%, rgba(4, 6, 10, .55) 100%); }
  .subnav__list { flex-wrap: nowrap; overflow-x: auto; gap: 22px; padding-right: 48px; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
  .subnav__list::-webkit-scrollbar { display: none; }
  .subnav__list li { flex: none; }
}


/* panels: every name sits on the same line; the short description opens on hover */
.panel__text { max-height: 0; overflow: hidden; }
.panel:hover .panel__text, .panel:focus-within .panel__text { max-height: 5em; }
.panel__text { transition: opacity .6s var(--ease), transform .6s var(--ease), max-height .7s var(--ease); }

/* (v14, Gabriel) Soluciones · circadian light: while the visitor is in that section the whole page takes the tone of
   the lamps of the drawing (cool blue-white in the morning, white at midday, amber at dusk and at night). Only the
   ground changes, mixed with the paper, so the dark text keeps reading */
html.is-circ body { background: color-mix(in oklab, var(--paper) 48%, var(--circ, var(--paper))); transition: background-color .35s linear, color 1.1s var(--ease-io); }
/* leaving it, the page goes back to white quickly */
html:not(.is-circ) body { transition: background-color .5s var(--ease-io), color 1.1s var(--ease-io); }
@media (prefers-reduced-motion: reduce) { html.is-circ body { transition: none; } }

/* Soluciones: cinema row */
.sol-night { padding-block: clamp(24px, 3vw, 48px); }
.sol-night .sol-row { border-bottom: 0; }
.sol-night + .section { padding-top: clamp(96px, 13vw, 200px); }

/* the page lifts like a shade to reveal the footer (computer only; enabled from the script) */
/* (v14) the footer is a plain footer in the normal flow: fixed behind the page (html.footer-reveal), its letters
   appeared from nowhere and it showed through during fast scrolls */

/* ================= motion (only when the page can animate) =================
   html.motion is set by the head script only when the visitor has not asked for reduced motion.
   If the animation library does not start, the head script removes it and everything shows. */
/* scroll effects only run outside the preview frame (class scrollfx); intro and click effects use .motion */
.scrollfx [data-fade], .motion :is(.hero, .page-hero, .lost) [data-fade] { opacity: 0; }
.scrollfx [data-lightup] { clip-path: inset(8% 10% 8% 10% round var(--r)); }
.scrollfx [data-lightup]::after { content: ""; position: absolute; inset: 0; background: #05070B; opacity: var(--dim, .75); pointer-events: none; }
.scrollfx [data-lightup] img { transform: scale(1.12); }
.motion :is(.hero, .page-hero, .lost) [data-lineas]:not(.is-split) { opacity: 0; }
.panel a:focus-visible { outline-offset: -4px; }
.ln-mask { overflow: clip; padding-bottom: .12em; margin-bottom: -.12em; }
.ln { will-change: transform; }
.motion .rack__unit { transition: background-color .4s, border-color .4s; }
.motion .face__leds span::before { background: rgba(255, 255, 255, .22); box-shadow: none; transition: background-color .35s, box-shadow .35s; }
.motion .face__leds span.is-on::before { background: #fff; box-shadow: 0 0 10px rgba(255, 255, 255, .9); }
.scrollfx .timeline__fill { transform: scaleX(0); }
@media (max-width: 960px) { .scrollfx .timeline__fill { transform: scaleY(0); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .scroll-cue__line::after { animation: none; }
}

/* ---------- display type (v11): large titles in Archivo, wide and light ----------
   One family for the whole site: the titles open up to 118-124 % of width with a light weight and tight tracking, the
   look of architectural and automotive lettering; text, buttons and labels stay at normal width. */
.display, .title, .statement, .stack__name, .page-hero__title {
  font-family: var(--font-display); font-weight: 270; font-stretch: 122%;
}
.display { font-size: clamp(2.8rem, 1rem + 6.2vw, 8.2rem); letter-spacing: -.05em; line-height: .98; }
.title { font-size: clamp(2.25rem, 1.1rem + 3.7vw, 5.3rem); font-weight: 280; font-stretch: 120%; letter-spacing: -.043em; line-height: 1.02; }
.title--sm { font-size: clamp(1.95rem, 1.1rem + 2.5vw, 3.7rem); }
.statement { font-size: clamp(1.9rem, 1.05rem + 2.9vw, 4.1rem); font-weight: 290; font-stretch: 116%; letter-spacing: -.034em; line-height: 1.1; }
.stack__name { letter-spacing: -.04em; line-height: 1; }
@media (max-height: 760px) and (min-aspect-ratio: 1/1) {
  .hero__title { font-size: clamp(2.3rem, min(1.1rem + 6.2vw, 13.5svh), 8.2rem); }
}

/* ---------- Soluciones v10: los mandos se usan y la página responde ----------
   Each face is a real control (native range inputs and buttons). The room is the page: lights dim it,
   the shade comes down over it, the thermostat tints it; the control in use stays lit above it all. */
.face--mando, .sol-row__visual .face--mando { aspect-ratio: auto; min-height: 0; grid-template-rows: auto auto; align-content: start; gap: 16px; }
.face--mando .face__read { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px; padding-block: 2px; }
.face--mando .face__val { font-size: clamp(2.2rem, 1.6rem + 1.9vw, 3.6rem); }
.face--mando .face__val--word { font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.6rem); }
.face--mando .face__screen { display: none; }
.mando { display: grid; gap: 6px; }
.mando__txt { display: flex; justify-content: space-between; gap: 12px; font-size: .8125rem; color: rgba(255, 255, 255, .62); font-variant-numeric: tabular-nums; }
.mando__rango {
  --v: 50%; --pulgar: 24px; -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 44px; margin: 0;
  background: transparent; cursor: pointer; touch-action: pan-y; -webkit-tap-highlight-color: transparent; user-select: none;
}
.mando__rango.is-arrastre { cursor: grabbing; }
.mando__rango::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: linear-gradient(90deg, #fff var(--v), rgba(255, 255, 255, .2) var(--v)); }
.mando__rango::-moz-range-track { height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .2); }
.mando__rango::-moz-range-progress { height: 3px; border-radius: 3px; background: #fff; }
.mando__rango::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 24px; height: 24px; margin-top: -10.5px; border: 0; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 6px rgba(255, 255, 255, .12), 0 0 18px rgba(255, 255, 255, .35); transition: box-shadow .3s;
}
.mando__rango::-moz-range-thumb { width: 24px; height: 24px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px rgba(255, 255, 255, .12), 0 0 18px rgba(255, 255, 255, .35); }
.mando__rango:hover::-webkit-slider-thumb, .mando__rango:active::-webkit-slider-thumb { box-shadow: 0 0 0 9px rgba(255, 255, 255, .16), 0 0 24px rgba(255, 255, 255, .5); }
.mando__rango:focus-visible { outline: none; }
.mando__rango:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--led), 0 0 18px rgba(255, 255, 255, .5); }
.mando__rango:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px var(--led), 0 0 18px rgba(255, 255, 255, .5); }
/* thermostat: a ruler with a tick every half degree; cold on the left, warm on the right */
.mando__rango--regla::-webkit-slider-runnable-track {
  height: 12px; border-radius: 2px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .34) 0 1px, transparent 1px calc(100% / 20)), linear-gradient(90deg, rgba(92, 150, 255, .35), rgba(255, 255, 255, .06) 50%, rgba(255, 170, 90, .35));
  box-shadow: inset -1px 0 rgba(255, 255, 255, .34);
}
.mando__rango--regla { --pulgar: 8px; }
.mando__rango--regla::-webkit-slider-thumb { width: 8px; height: 30px; margin-top: -9px; border-radius: 4px; }
.mando__rango--regla::-moz-range-track { height: 12px; border-radius: 2px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .34) 0 1px, transparent 1px calc(100% / 20)), linear-gradient(90deg, rgba(92, 150, 255, .35), rgba(255, 255, 255, .06) 50%, rgba(255, 170, 90, .35)); }
.mando__rango--regla::-moz-range-progress { background: transparent; }
.mando__rango--regla::-moz-range-thumb { width: 8px; height: 30px; border-radius: 4px; }
.mando__escala { display: flex; justify-content: space-between; margin-top: -6px; font-size: .75rem; color: rgba(255, 255, 255, .5); font-variant-numeric: tabular-nums; }
.mando__pista { display: flex; align-items: center; gap: 10px; }
.mando__pista::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--led); box-shadow: 0 0 0 4px var(--led-soft), 0 0 12px var(--led); }
.mando__teclas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mando__tecla {
  position: relative; display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 10px 14px; border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .1); background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 6px 14px -8px rgba(0, 0, 0, .8);
  color: rgba(255, 255, 255, .78); font-size: .875rem; text-align: left; cursor: pointer;
  transition: background-color .3s, border-color .3s, color .3s, transform .15s;
}
.mando__tecla:hover { border-color: rgba(255, 255, 255, .22); color: #fff; }
.mando__tecla:active { transform: translateY(1px) scale(.985); }
.mando__led { flex: none; width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .22); transition: background-color .3s, box-shadow .3s; }
.mando__tecla[aria-pressed="true"] { color: #fff; border-color: rgba(255, 203, 142, .45); background: linear-gradient(180deg, rgba(255, 203, 142, .14), rgba(255, 203, 142, .04)); }
.mando__tecla[aria-pressed="true"] .mando__led { background: var(--warm); box-shadow: 0 0 0 4px rgba(255, 203, 142, .18), 0 0 12px var(--warm); }
.mando__tecla--ancha { justify-content: center; width: 100%; }
.mando__tecla[data-reunion] .mando__reunion-on, .mando__tecla[data-reunion][aria-pressed="true"] .mando__reunion-off { display: none; }
.mando__tecla[data-reunion][aria-pressed="true"] .mando__reunion-on { display: inline; }
/* (v13) in a meeting: the key turns red, like the light over the door */
.mando__tecla[data-reunion][aria-pressed="true"] { color: #fff; border-color: rgba(255, 92, 92, .6); background: linear-gradient(180deg, rgba(255, 77, 77, .26), rgba(255, 77, 77, .1)); }
.mando__tecla[data-reunion][aria-pressed="true"] .mando__led { background: #FF4D4D; box-shadow: 0 0 0 4px rgba(255, 77, 77, .2), 0 0 12px #FF4D4D; animation: led-reunion 1.8s ease-in-out infinite; }
.mando__reunion-on { font-weight: 500; }
.mando__reunion-fin { font-weight: 400; color: rgba(255, 255, 255, .7); }
@keyframes led-reunion { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .mando__tecla[data-reunion][aria-pressed="true"] .mando__led { animation: none; } }
.mando__fila { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 18px; }
.mando__play {
  display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 18px; border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .04); color: #fff; font-size: .875rem; white-space: nowrap; cursor: pointer;
  transition: border-color .3s, background-color .3s;
}
.mando__play:hover { border-color: rgba(255, 255, 255, .6); }
.mando__play .eq { display: inline-flex; align-items: flex-end; gap: 2px; width: 13px; height: 12px; }
.mando__play .eq i { flex: 1; height: 100%; border-radius: 1px; background: currentColor; transform: scaleY(.45); transform-origin: 50% 100%; }
.mando__play .eq i:nth-child(2) { transform: scaleY(.9); }
.mando__play .eq i:nth-child(3) { transform: scaleY(.62); }
.mando__play[aria-pressed="true"] { border-color: rgba(255, 203, 142, .7); background: rgba(255, 203, 142, .12); }
.mando__play[aria-pressed="true"] .eq i { animation: eq .8s ease-in-out infinite alternate; }
.mando__play[aria-pressed="true"] .eq i:nth-child(2) { animation-duration: .6s; animation-delay: -.3s; }
.mando__play[aria-pressed="true"] .eq i:nth-child(3) { animation-duration: .95s; animation-delay: -.5s; }
.mando__play .mando__play-on, .mando__play[aria-pressed="true"] .mando__play-off { display: none; }
.mando__play[aria-pressed="true"] .mando__play-on { display: inline; }
.face--mando .face__eq i { transition: transform .12s linear; }
.face--mando .face__screen { transition: filter .8s, opacity .8s, box-shadow .8s; }
.face--mando:not(.is-cine) .face__screen { filter: brightness(.25) saturate(.4); box-shadow: 0 0 0 1px rgba(255, 255, 255, .14); }
.face--mando .face__leds span::before { background: rgba(255, 255, 255, .22); box-shadow: none; transition: background-color .35s, box-shadow .35s; }
.face--mando .face__leds span.is-on::before { background: #fff; box-shadow: 0 0 10px rgba(255, 255, 255, .9); }
@media (max-width: 560px) {
  .face--mando { min-height: 0; }
  .mando__fila { grid-template-columns: 1fr; gap: 6px; }
  .mando__play { justify-self: start; }
}

/* ---------- Soluciones v11: every control has its own little room, drawn in lines, that answers inside the card ----------
   Nothing covers the page any more: the light, the shade, the air, the music, the meeting and the movie show in the
   room above each control, in the same line drawing as the house of Inicio. */
.escena__marco {
  position: relative; margin: 0 -4px; border-radius: 12px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, #0F1522, #07090D 72%); border: 1px solid rgba(255, 255, 255, .07);
}
.escena { display: block; width: 100%; height: auto; --luz: 1; --cortina: 0; --frio: 0; --calor: 0; --vol: .6; }
/* v12.1: every room is drawn in one-point perspective (tools/escenas.py), like a night render in lines: back wall, side
   walls, ceiling and floor, the furniture as volumes and the light as beams and pools */
.escena .es-fondo { fill: #07090D; }
.escena .es-techo { fill: #080B12; }
.escena .es-arista { fill: none; stroke: rgba(237, 239, 242, .16); stroke-width: 1; }
.escena .es-tabla path { stroke: rgba(237, 239, 242, .06); stroke-width: .8; }
.escena .es-tabla--deck path { stroke: rgba(214, 178, 132, .16); }
.escena .es-tabla--alfombra path { stroke: rgba(237, 239, 242, .035); }
.escena .es-linea { fill: none; stroke: rgba(237, 239, 242, .52); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.escena .es-fina { fill: none; stroke: rgba(237, 239, 242, .3); stroke-width: 1; stroke-linecap: round; }
/* the furniture: front, top and side of each volume, and its materials */
.escena .es-vol { stroke: rgba(237, 239, 242, .4); stroke-width: .9; stroke-linejoin: round; }
.escena .es-v-frente { fill: #111724; }
.escena .es-v-tapa { fill: #1B2333; }
.escena .es-v-lado { fill: #0B1019; }
.escena .es-sofa.es-v-frente { fill: #1B1E28; } .escena .es-sofa.es-v-tapa { fill: #292D39; }
.escena .es-mesa { stroke: rgba(226, 190, 146, .55); } .escena .es-mesa.es-v-tapa { fill: #2B2219; } .escena .es-mesa.es-v-frente { fill: #1B1611; }
.escena .es-cama.es-v-tapa { fill: #2A3244; } .escena .es-almohada.es-v-tapa { fill: #3A4460; } .escena .es-almohada.es-v-frente { fill: #2A3246; }
.escena .es-cabecero.es-v-frente { fill: #1F1C28; }
.escena .es-split { stroke: rgba(255, 255, 255, .7); } .escena .es-split.es-v-frente { fill: #D9DFEA; } .escena .es-split.es-v-tapa { fill: #EEF2F8; } .escena .es-split.es-v-lado { fill: #B8C0CE; }
.escena .es-silla.es-v-frente { fill: #161B28; }
/* (v14) the recliners: dark leather with stitched channels and a lit cup holder */
.escena .es-butaca { stroke: rgba(232, 214, 200, .34); } .escena .es-butaca.es-v-frente { fill: #241B20; } .escena .es-butaca.es-v-tapa, .escena .es-butaca.es-v-lado { fill: #31252B; }
.escena .es-respaldo-b { fill: #2A2026; }
.escena .es-canal { stroke: rgba(232, 214, 200, .16); stroke-width: .7; }
.escena .es-vaso { fill: #FFB15C; opacity: .35; transition: opacity 1.4s var(--ease); }
.face--mando.is-cine .es-vaso { opacity: .95; filter: drop-shadow(0 0 2px #FFB15C); }
/* the speakers of the room: in the ceiling and on the side walls; with the movie on they play */
.escena .es-altavoz-techo { fill: #161A24; stroke: rgba(220, 228, 245, .5); stroke-width: .7; }
.escena .es-woofer--techo { fill: #0B0E15; stroke: rgba(255, 203, 142, .45); stroke-width: .5; }
.escena .es-altavoz-pared { fill: #161A24; stroke: rgba(220, 228, 245, .4); stroke-width: .7; }
.escena .es-onda--cine { stroke: #A9C1FF; stroke-width: 1; }
.face--mando.is-cine .es-onda--cine { animation: es-onda 1.9s cubic-bezier(.2, .6, .35, 1) infinite; animation-delay: calc(var(--i) * -.63s); }
.face--mando.is-cine .es-woofer--techo { animation: es-woofer .42s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 50%; }
@media (prefers-reduced-motion: reduce) { .face--mando.is-cine .es-onda--cine, .face--mando.is-cine .es-woofer--techo { animation: none; } }
.escena .es-tarima.es-v-frente, .escena .es-tarima.es-v-tapa { fill: #0D0A13; }
.escena .es-poste, .escena .es-viga { stroke: rgba(226, 190, 146, .4); } .escena .es-poste.es-v-frente, .escena .es-viga.es-v-frente { fill: #241C15; }
.escena .es-proyector { stroke: rgba(220, 230, 255, .55); } .escena .es-proyector.es-v-frente { fill: #2A3246; } .escena .es-proyector.es-v-tapa, .escena .es-proyector.es-v-lado { fill: #1C2333; }
/* (v13) the cinema: the room lit at the start (its fill follows the lights), the projector you can tell apart */
.escena .es-amb { opacity: calc(var(--luz) * 1.15); transition: opacity 1.6s var(--ease); }
.escena .es-soporte-proy { fill: none; stroke: rgba(220, 230, 255, .45); stroke-width: 1.4; }
.escena .es-rejilla-proy path { stroke: rgba(220, 230, 255, .35); stroke-width: .8; }
.escena .es-lente-aro { fill: #0A0E18; stroke: rgba(220, 230, 255, .7); stroke-width: .9; }
.escena .es-lente { opacity: 0; transition: opacity 1.2s var(--ease); }
.face--mando.is-cine .es-lente { opacity: 1; }
.escena .es-etiqueta path { fill: none; stroke: rgba(237, 239, 242, .45); stroke-width: .8; }
.escena .es-etiqueta text { fill: rgba(237, 239, 242, .82); font-family: var(--font); font-size: 9.5px; letter-spacing: .02em; }
/* (v13) the meeting: the light over the door turns red while the meeting is on */
.escena .es-enreunion__luz { fill: rgba(255, 255, 255, .12); stroke: rgba(237, 239, 242, .35); stroke-width: .8; transition: fill .5s; }
.escena .es-enreunion__halo { fill: #FF4D4D; opacity: 0; filter: blur(4px); transition: opacity .5s; }
.escena.is-reunion .es-enreunion__luz { fill: #FF4D4D; }
.escena.is-reunion .es-enreunion__halo { opacity: .55; animation: es-enreunion 2.4s ease-in-out infinite; }
@keyframes es-enreunion { 0%, 100% { opacity: .35; } 50% { opacity: .7; } }
.escena .es-alfombra { fill: rgba(150, 128, 104, .1); stroke: rgba(214, 190, 160, .2); stroke-width: 1; }
.escena .es-planta { fill: none; stroke: rgba(130, 210, 160, .55); stroke-width: 1.4; stroke-linecap: round; }
.escena .es-listones path { stroke: rgba(214, 178, 132, .16); stroke-width: 2.4; }
.escena .es-listones--techo path { stroke: rgba(214, 178, 132, .24); stroke-width: 1.6; }
.escena .es-cuadro { fill: #182235; stroke: rgba(214, 190, 160, .55); stroke-width: 1.4; }
.escena .es-cuadro-trazo { fill: none; stroke: rgba(255, 203, 142, .6); stroke-width: 1.4; stroke-linecap: round; }
.escena .es-palma { fill: none; stroke: rgba(110, 170, 150, .5); stroke-width: 1.4; stroke-linecap: round; }
/* light: it follows --luz */
.escena .es-lavado, .escena .es-conos { opacity: var(--luz); transition: opacity .45s var(--ease); }
.escena .es-lampara { fill: rgba(255, 228, 196, calc(.25 + .75 * var(--luz))); stroke: rgba(255, 228, 196, calc(.28 + .72 * var(--luz))); stroke-width: 3; stroke-linecap: round; transition: fill .45s var(--ease), stroke .45s var(--ease); }
.escena .es-lampara .es-foco { stroke: none; }
/* (v14, Gabriel) the cinema dims like a real one: the downlights, their beams and the wash fade over a couple of
   seconds (and come back the same way), the sconces a little after */
.face--mando[data-mando="cine"] .es-conos { transition: opacity 2.6s cubic-bezier(.45, 0, .2, 1); }
.face--mando[data-mando="cine"] .es-lavado { transition: opacity 2.8s cubic-bezier(.45, 0, .2, 1) .15s; }
.face--mando[data-mando="cine"] .es-lampara { transition: fill 2.6s cubic-bezier(.45, 0, .2, 1), stroke 2.6s cubic-bezier(.45, 0, .2, 1); }
.face--mando[data-mando="cine"] .es-amb { transition: opacity 3s cubic-bezier(.45, 0, .2, 1); }
@media (prefers-reduced-motion: reduce) { .face--mando[data-mando="cine"] :is(.es-conos, .es-lavado, .es-lampara, .es-amb) { transition-duration: .3s; } }
.escena .es-cove { fill: none; stroke: #FFE2BA; stroke-width: 2.2; opacity: calc(.12 + .88 * var(--luz)); transition: opacity .45s var(--ease); }
/* windows: the view, the glass, the mullions and the shade that comes down inside (--cortina) */
.escena .es-vidrio { fill: rgba(130, 170, 255, .06); }
.escena .es-montante { fill: none; stroke: rgba(237, 239, 242, .34); stroke-width: 1.1; }
.escena .es-montante path { stroke: rgba(237, 239, 242, .2); }
.escena .es-marco { fill: none; stroke: rgba(237, 239, 242, .55); stroke-width: 1.4; }
.escena .es-cajon { fill: rgba(237, 239, 242, .4); }
.escena .es-torre { fill: rgba(9, 14, 30, .92); }
.escena .es-ventanita { fill: #FFD9A8; opacity: .85; }
.escena .es-visillo { fill: rgba(237, 239, 242, .1); }
.escena .es-cortina {
  fill: #D9CFBF; fill-opacity: .92; transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(var(--cortina));
  transition: transform .7s cubic-bezier(.33, 0, .2, 1);
}
.escena .es-cortina--trama { fill: none; stroke: rgba(80, 64, 48, .3); stroke-width: .8; }
/* screens: the TV of the living room, the meeting and the movie */
.escena .es-caja { fill: rgba(237, 239, 242, .08); stroke: rgba(237, 239, 242, .5); stroke-width: 1.1; }
.escena .es-pantalla { fill: #0E1628; stroke: rgba(170, 200, 255, .55); stroke-width: 1.1; }
.escena .es-halo, .escena .es-reflejo { opacity: 0; transition: opacity 1.2s var(--ease); }
.escena.is-tv .es-halo, .escena.is-tv .es-reflejo, .escena.is-reunion .es-halo--r, .face--mando.is-cine .es-halo--cine { opacity: 1; }
.escena.is-tv .es-pantalla, .face--mando.is-cine .es-pantalla--cine { animation: es-pelicula 5s steps(1, end) infinite; }
@keyframes es-pelicula { 0% { fill: #3E66D6; } 14% { fill: #6E9BFF; } 27% { fill: #2F4FB8; } 41% { fill: #9FC3FF; } 52% { fill: #4474E6; } 66% { fill: #88B0FF; } 80% { fill: #3558C9; } 100% { fill: #3E66D6; } }
.escena .es-marco-cine { fill: #020305; stroke: rgba(237, 239, 242, .12); stroke-width: 1; }
.escena .es-panel { stroke: rgba(206, 184, 240, .14); stroke-width: .8; }
.escena .es-haz { opacity: 0; transition: opacity 1.4s var(--ease); }
.face--mando.is-cine .es-haz { opacity: 1; }
.escena .es-pasos circle { fill: #FFCB8E; }
.escena .es-estrellas circle { fill: rgba(255, 246, 228, .7); }
.face--mando.is-cine .es-estrellas--techo circle { animation: es-titila 3.2s ease-in-out infinite; animation-delay: calc(var(--i) * -.64s); }
@keyframes es-titila { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
/* the air conditioning: the tint of the room, the air leaving the unit and a few specks of cool air */
.escena .es-tinte--frio { opacity: var(--frio); transition: opacity .45s var(--ease); }
.escena .es-tinte--calor { opacity: var(--calor); transition: opacity .45s var(--ease); }
.escena .es-rejilla { fill: none; stroke: rgba(40, 52, 74, .85); stroke-width: 1.6; stroke-linecap: round; }
.escena .es-led--split { fill: #7FD4FF; }
.escena .es-chorro { opacity: calc(.06 + .94 * var(--frio)); transition: opacity .45s var(--ease); }
.escena .es-pata { fill: none; stroke: rgba(237, 239, 242, .34); stroke-width: 1.1; }
.escena .es-costura { fill: none; stroke: rgba(237, 239, 242, .16); stroke-width: .8; }
.escena .es-cojin.es-v-frente { fill: #3A3342; } .escena .es-cojin.es-v-tapa { fill: #4A4254; }
.escena .es-cabeza.es-v-frente { fill: #3A2D33; } .escena .es-cabeza.es-v-tapa { fill: #44363D; }
.escena .es-aire path { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 22 78; opacity: calc(.14 + .86 * var(--frio)); transition: opacity .9s; animation: es-aire 2.4s linear infinite; animation-delay: calc(var(--i) * -.48s); }
@keyframes es-aire { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.escena .es-bruma circle { fill: #D6F1FF; opacity: 0; animation: es-bruma 4.2s linear infinite; animation-delay: calc(var(--i) * -.52s); }
@keyframes es-bruma { 0% { transform: translateY(-6px); opacity: 0; } 30% { opacity: calc(.9 * var(--frio)); } 100% { transform: translateY(26px); opacity: 0; } }
.escena .es-termo { fill: rgba(8, 14, 26, .9); stroke: rgba(150, 195, 255, .8); stroke-width: 1.2; }
/* (v14, Gabriel) the ring says the temperature with its colour and its length: deep blue at 18 °C, white-ish at 23 °C,
   red at 28 °C (--tt goes 0 to 1, set by site.js from the slider) */
.escena .es-termo-pista { fill: none; stroke: rgba(150, 195, 255, .16); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 75 100; transform: rotate(135deg); transform-box: fill-box; transform-origin: 50% 50%; }
.escena .es-termo-anillo {
  fill: none; stroke: #7FD4FF; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: calc(12 + 63 * var(--tt, .5)) 100;
  transform: rotate(135deg); transform-box: fill-box; transform-origin: 50% 50%; transition: stroke .5s var(--ease), stroke-dasharray .5s var(--ease);
}
@supports (color: color-mix(in oklab, red 50%, blue)) {
  .escena .es-termo-anillo {
    --t-frio: color-mix(in oklab, #2E7BFF calc(100% - var(--tt, .5) * 200%), #E8EEF8);
    --t-calor: color-mix(in oklab, #FF4A2E calc(var(--tt, .5) * 200% - 100%), #E8EEF8);
    stroke: var(--t-frio);
    filter: drop-shadow(0 0 3px var(--t-frio));
  }
  .escena .es-termo-anillo { stroke: color-mix(in oklab, var(--t-calor) calc(var(--tt, .5) * 1000% - 500%), var(--t-frio)); }
}
.escena .es-grados { fill: #E4EEFF; font-family: var(--font); font-size: 12px; font-weight: 500; }
/* the terrace: sky, moon, sea, pool and pergola; the speakers and their rings follow the volume */
.escena .es-luna { fill: #FFF6E4; }
.escena .es-destello path { stroke: rgba(255, 241, 214, .34); stroke-width: 1; }
.escena .es-piscina { stroke: rgba(130, 205, 255, .4); stroke-width: 1; }
.escena .es-ola path { stroke: rgba(170, 232, 255, .3); stroke-width: 1; }
.escena .es-corneta { fill: #FFE2BA; }
/* (v14) the terrace: the loungers (teak frame, linen cushion at night) and the speakers under the beam */
.escena .es-tumbona.es-v-frente, .escena .es-tumbona.es-v-lado { fill: #2B231E; }
.escena .es-tumbona.es-v-tapa { fill: #362C25; }
.escena .es-colchon.es-v-tapa { fill: #4C5160; } .escena .es-colchon.es-v-frente, .escena .es-colchon.es-v-lado { fill: #3A3E4B; }
.escena .es-respaldo { fill: #444957; }
.escena .es-farol.es-v-frente, .escena .es-farol.es-v-lado { fill: #FFD9A0; } .escena .es-farol.es-v-tapa { fill: #FFE7C2; }
.escena .es-altavoz.es-v-frente { fill: #1C2130; } .escena .es-altavoz.es-v-lado, .escena .es-altavoz.es-v-tapa { fill: #2A3042; }
.escena .es-woofer { fill: #0D1019; stroke: rgba(255, 203, 142, .55); stroke-width: .8; }
.escena .es-tweeter { fill: #0D1019; stroke: rgba(255, 203, 142, .55); stroke-width: .6; }
.escena.is-sonando .es-woofer { animation: es-woofer .46s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes es-woofer { from { transform: scale(1); } to { transform: scale(calc(1 + .1 * var(--vol))); } }
@media (prefers-reduced-motion: reduce) { .escena.is-sonando .es-woofer { animation: none; } }
.escena .es-onda { fill: none; stroke: #FFCB8E; stroke-width: 1.3; transform-box: fill-box; transform-origin: 50% 50%; transform: scale(.12); opacity: 0; }
.escena.is-sonando .es-onda { animation: es-onda 2.2s cubic-bezier(.2, .6, .35, 1) infinite; animation-delay: calc(var(--i) * -.73s); }
@keyframes es-onda { from { transform: scale(.12); opacity: calc(.35 + .65 * var(--vol)); } to { transform: scale(calc(.4 + .6 * var(--vol))); opacity: 0; } }
/* the meeting: the people appear on the screen one by one, the camera and the microphone come on */
.escena .es-lineas-luz path { stroke: rgba(236, 242, 255, .85); stroke-width: 2.2; stroke-linecap: round; }
.escena .es-mosaico rect { fill: #2C4E9A; opacity: 0; transition: opacity .5s; transition-delay: calc(var(--i) * .35s); }
.escena .es-persona { fill: rgba(214, 228, 255, .8); stroke: rgba(214, 228, 255, .8); stroke-width: 1.4; opacity: 0; transition: opacity .5s; transition-delay: calc(var(--i) * .35s + .2s); }
.escena .es-persona path { fill: none; }
.escena.is-reunion .es-mosaico rect, .escena.is-reunion .es-persona { opacity: 1; }
.escena .es-led { fill: rgba(255, 255, 255, .25); transition: fill .4s; }
.escena.is-reunion .es-led { fill: #7C98FF; }
.escena .es-onda--mic { stroke: #8FA6FF; }
.escena.is-reunion .es-onda--mic { animation: es-onda 2.6s cubic-bezier(.2, .6, .35, 1) infinite; animation-delay: calc(var(--i) * -1.3s); }
.escena .es-mic { fill: rgba(255, 255, 255, .5); }
.escena.is-reunion .es-mic { fill: #C9D5FF; }
/* Circadian light (the study): the site sets the hour as variables. --luz is how strong the lamps are, --kf how cool
   their tone is (0 = 2200 K, 1 = 6500 K), --sol the daylight, and --c-am, --c-dia, --c-at, --c-no the sky of the window.
   The warm and the cool layers of every lamp are drawn apart and mixed here, so the tone really changes. */
.escena--estudio { --luz: .7; --kf: .42; --sol: .74; --c-am: 1; --c-dia: 0; --c-at: 0; --c-no: 0; --cortina: 0; }
/* (v13) the room in the tone of the light, and the shade of the window that follows the day */
.escena--estudio .es-circ-amb.es-circ-calida { opacity: calc(var(--luz) * (1 - var(--kf)) * .09); }
.escena--estudio .es-circ-amb.es-circ-fria { opacity: calc(var(--luz) * var(--kf) * .07); }
.escena--estudio .es-cortina { transition: none; }
.escena--estudio .es-cielo--am { opacity: var(--c-am); }
.escena--estudio .es-cielo--dia { opacity: var(--c-dia); }
.escena--estudio .es-cielo--at { opacity: var(--c-at); }
.escena--estudio .es-cielo--no { opacity: var(--c-no); }
.escena--estudio .es-sol { fill: #FFF6DE; }
.escena--estudio .es-luna2 { fill: #F2EEE2; }
.escena--estudio .es-horizonte { fill: #0B1220; }
.escena--estudio .es-dia-amb { fill: #A9C8F0; opacity: calc(var(--sol) * .085); }
.escena--estudio .es-sol-piso { opacity: calc(var(--sol) * .9); }
.escena--estudio .es-circ-calida { opacity: calc(var(--luz) * (1 - var(--kf))); }
.escena--estudio .es-circ-fria { opacity: calc(var(--luz) * var(--kf)); }
.escena--estudio .es-focos-calida { opacity: calc(.18 + .82 * var(--luz) * (1 - var(--kf))); }
.escena--estudio .es-focos-fria { opacity: calc(.82 * var(--luz) * var(--kf)); }
.escena--estudio .es-foco { stroke: none; }
.escena--estudio .es-focos-calida .es-foco { fill: #FFD6A0; }
.escena--estudio .es-focos-fria .es-foco { fill: #EEF4FF; }
.escena--estudio .es-focos-calida path { fill: none; stroke: #FFD6A0; stroke-width: 2.2; stroke-linecap: round; }
.escena--estudio .es-focos-fria path { fill: none; stroke: #EEF4FF; stroke-width: 2.2; stroke-linecap: round; }
.escena--estudio .es-portatil.es-v-frente { fill: #1C2A45; }
.escena--estudio .es-portatil.es-v-tapa { fill: #2A3550; }
/* the tone of the light on a bar under the room: warm on the left, cool on the right */
.circ-tono { display: grid; gap: 8px; }
.circ-tono__barra { position: relative; height: 6px; border-radius: 6px; background: linear-gradient(90deg, #FF9F4A, #FFC98A 26%, #FFF1DE 52%, #E6F0FF 76%, #B9D5FF); }
.circ-tono__barra i {
  position: absolute; top: 50%; left: calc(var(--kf, .42) * 100%); width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 3px rgba(7, 9, 13, .9), 0 0 14px rgba(255, 255, 255, .55);
}
.circ-tono__escala { display: flex; justify-content: space-between; font-size: .75rem; color: rgba(255, 255, 255, .5); }
.circ-tono__txt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-height: 2.6em; margin: 0; font-size: .875rem; color: rgba(255, 255, 255, .72); }
/* (v13) the curve of the day: how strong the light is (height) and its tone (colour) from 6 a. m. to 11 p. m., with
   the parts of the day and the hour shown (site.js draws it from the same numbers the room uses) */
.circ-curva { display: block; width: 100%; height: auto; overflow: visible; }
.circ-curva .cc-area { opacity: 1; }
.circ-curva .cc-linea { fill: none; stroke: rgba(255, 255, 255, .7); stroke-width: 1.3; }
.circ-curva .cc-base { stroke: rgba(255, 255, 255, .18); stroke-width: 1; }
.circ-curva .cc-div { stroke: rgba(255, 255, 255, .12); stroke-width: 1; stroke-dasharray: 2 3; }
.circ-curva .cc-fase { fill: rgba(255, 255, 255, .66); font-family: var(--font); font-size: 10px; letter-spacing: .02em; }
.circ-curva .cc-hora { fill: rgba(255, 255, 255, .48); font-family: var(--font); font-size: 9.5px; font-variant-numeric: tabular-nums; }
.circ-curva .cc-marca { stroke: #fff; stroke-width: 1.2; }
.circ-curva .cc-punto { fill: #fff; stroke: rgba(7, 9, 13, .9); stroke-width: 2.5; }
.circ-tono__txt b { font-weight: 500; color: #fff; font-variant-numeric: tabular-nums; }
/* the "see the day" button: a play sign that turns into pause */
.mando__signo { position: relative; flex: none; width: 10px; height: 12px; }
.mando__signo::before { content: ""; position: absolute; inset: 0; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.mando__play[aria-pressed="true"] .mando__signo::before { clip-path: polygon(0 0, 35% 0, 35% 100%, 0 100%, 0 0, 65% 0, 100% 0, 100% 100%, 65% 100%, 65% 0); }
.mando__rango--dia::-webkit-slider-runnable-track { background: linear-gradient(90deg, #fff var(--v), rgba(255, 255, 255, .2) var(--v)); }
@media (prefers-reduced-motion: reduce) { [data-circ-dia] { display: none; } }
/* nothing moves while a card is off screen */
.escena:not(.is-vista) * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .escena * { animation: none !important; transition: none !important; } }

/* v11: section titles in the same wide, light Archivo */
.sol-row__name, .space-section__name, .quote-block blockquote, .panel__name, .case__title {
  font-family: var(--font-display); font-weight: 290; font-stretch: 118%;
}
.sol-row__name { font-size: clamp(2rem, 1.15rem + 2.5vw, 3.7rem); letter-spacing: -.038em; line-height: 1.05; }
.space-section__name { font-size: clamp(2.8rem, 1.4rem + 4.6vw, 6.8rem); font-weight: 270; font-stretch: 122%; letter-spacing: -.05em; line-height: .98; }
.quote-block blockquote { font-size: clamp(1.7rem, 1.1rem + 2vw, 3rem); letter-spacing: -.03em; line-height: 1.14; }
.case__title { font-size: clamp(1.45rem, 1.1rem + 1vw, 2.2rem); letter-spacing: -.028em; line-height: 1.1; }
.panel__name { font-size: clamp(1.2rem, 1rem + .6vw, 1.6rem); letter-spacing: -.02em; }

/* ---------- v11: the band that invites to the next page (end of every page) ----------
   Always at night, like a lit sign at the end of a corridor: the name of the next page in large wide type, its
   phrase, and a thin line that fills as the visitor reaches the end, like the next page loading. */
.siguiente { position: relative; background: #070A0F; color: var(--on-night); border-top: 1px solid var(--line-night); }
.siguiente__link {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "eti eti" "nombre flecha" "txt txt" "carga carga";
  align-items: center; gap: 18px 32px; width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto;
  padding-block: clamp(72px, 10vw, 150px) clamp(56px, 7vw, 104px); color: inherit; text-decoration: none;
}
.siguiente__eti {
  grid-area: eti; display: inline-flex; align-items: center; gap: 12px;
  font-size: .8125rem; font-weight: 500; font-stretch: 112%; letter-spacing: .16em; text-transform: uppercase; color: var(--on-night-2);
}
.siguiente__led { width: 7px; height: 7px; border-radius: 50%; background: var(--warm); box-shadow: 0 0 0 4px rgba(255, 203, 142, .16), 0 0 14px var(--warm); }
.siguiente__nombre {
  grid-area: nombre; font-family: var(--font-display); font-weight: 250; font-stretch: 125%;
  font-size: clamp(3rem, .9rem + 8.4vw, 10.5rem); letter-spacing: -.055em; line-height: .96; transition: text-shadow .8s var(--ease);
}
.siguiente__txt { grid-area: txt; max-width: 40ch; font-size: clamp(1rem, .95rem + .3vw, 1.25rem); color: var(--on-night-2); }
.siguiente__flecha {
  grid-area: flecha; display: grid; place-items: center; width: clamp(64px, 7vw, 108px); aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(237, 239, 242, .28); transition: background-color .5s var(--ease), color .5s var(--ease), transform .6s var(--ease), border-color .5s;
  background: rgba(7, 10, 15, .82); /* (v14) a dark round silhouette in front of the lit door */
}
.siguiente__flecha .icon { width: 34%; height: 34%; }
.siguiente__carga { grid-area: carga; position: relative; display: block; height: 1px; margin-top: 16px; background: var(--line-night); overflow: hidden; }
.siguiente__carga i { position: absolute; inset: 0; background: linear-gradient(90deg, #FFB870, var(--warm)); transform: scaleX(var(--carga, 1)); transform-origin: 0 50%; }
.siguiente__link:hover .siguiente__flecha, .siguiente__link:focus-visible .siguiente__flecha { background: #F6F7F9; color: var(--ink); border-color: #F6F7F9; transform: translateX(8px); }
.siguiente__link:hover .siguiente__nombre { text-shadow: 0 0 60px rgba(255, 203, 142, .3); }
.siguiente__link:focus-visible { outline-offset: 8px; border-radius: 12px; }
@media (max-width: 560px) {
  .siguiente__link { grid-template-areas: "eti flecha" "nombre nombre" "txt txt" "carga carga"; }
  .siguiente__flecha { width: 56px; }
}
/* (v14, Gabriel: "un diseño mucho más lujoso") the band is a dark hall with a door at its end: as the visitor reaches
   the end of the page (--carga, 0 to 1) the door opens, a warm light comes through it and spills on the floor, and a
   band of light crosses the name of the next page. On hover the door opens all the way. */
.siguiente {
  overflow: hidden; isolation: isolate; --puerta: max(var(--carga, 1), var(--abre, 0));
  --R: calc(max(var(--gutter), (100% - var(--maxw)) / 2) + clamp(32px, 3.5vw, 54px) - var(--Wd) / 2); --Wd: calc(2px + var(--puerta) * clamp(64px, 11vw, 190px)); --suelo: 76%; --pie: 100%;
}
@media (max-width: 560px) {
  /* phones: a narrow door at the right edge, above the floor line, never behind the words */
  .siguiente { --R: calc(var(--gutter) + 28px - var(--Wd) / 2); --Wd: calc(2px + var(--puerta) * 44px); --suelo: 38%; --pie: 47%; }
  .siguiente::before { top: 0; }
}
.siguiente::before, .siguiente::after { content: ""; position: absolute; pointer-events: none; z-index: -1; }
/* the door: an opening in the dark wall, brighter in its middle, with the light fading toward its top */
.siguiente::before {
  right: var(--R); top: 10%; bottom: calc(100% - var(--suelo)); width: var(--Wd);
  background:
    linear-gradient(180deg, rgba(7, 10, 15, .55), rgba(7, 10, 15, 0) 45%),
    linear-gradient(90deg, rgba(255, 190, 120, .55), rgba(255, 236, 205, .95) 50%, rgba(255, 190, 120, .55));
  box-shadow: 0 0 calc(30px + var(--puerta) * 110px) calc(var(--puerta) * 28px) rgba(255, 176, 96, calc(.06 + var(--puerta) * .14));
  opacity: calc(.3 + var(--puerta) * .7); transition: width .9s var(--ease), box-shadow .9s var(--ease);
}
/* its light on the floor, opening toward the visitor */
.siguiente::after {
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 204, 140, calc(var(--puerta) * .5)) var(--suelo), rgba(255, 186, 110, 0) var(--pie));
  clip-path: polygon(calc(100% - var(--R) - var(--Wd)) var(--suelo), calc(100% - var(--R)) var(--suelo), calc(100% - var(--R) + var(--Wd) * 1.3) var(--pie), calc(100% - var(--R) - var(--Wd) * 2.4) var(--pie));
  transition: clip-path .9s var(--ease);
}
.siguiente__link:hover, .siguiente__link:focus-visible { --abre: 1; }
.siguiente:has(.siguiente__link:hover), .siguiente:has(.siguiente__link:focus-visible) { --abre: 1; }
.siguiente__nombre {
  color: var(--on-night);
  background: linear-gradient(100deg, var(--on-night) 0 38%, #FFE6C4 48%, #FFC98A 50%, #FFE6C4 52%, var(--on-night) 62% 100%) no-repeat;
  background-size: 280% 100%; background-position: calc(100% - var(--carga, 1) * 100%) 0;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  padding-bottom: .06em;
}
@media (prefers-reduced-motion: reduce) { .siguiente::before, .siguiente::after { transition: none; } }
@media (forced-colors: active) { .siguiente__nombre { -webkit-text-fill-color: currentColor; background: none; } }

/* Nosotros v11: the rack of brands under the three pillars */
.marcas-nos { display: grid; gap: 28px; margin-top: clamp(64px, 8vw, 120px); }

/* ---------- the guide of a stepped section (v13): where you are, the steps as dots and what comes next. It sits on
   the drawing that stays on screen (site.js adds it); its dots and its button move the page one step. ---------- */
.guia { display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; min-width: 0; z-index: 3; }
.guia__cuenta { min-width: 4.2em; font-size: .75rem; font-weight: 500; letter-spacing: .08em; color: var(--warm); font-variant-numeric: tabular-nums; }
.guia__cuenta:empty { display: none; }
.guia__puntos { display: flex; flex: none; align-items: center; }
.guia__cuenta { flex: none; }
.guia__punto { display: grid; place-items: center; width: 22px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; }
.guia__punto::before {
  content: ""; width: 6px; height: 6px; border-radius: 3px; background: rgba(237, 239, 242, .26);
  transition: width .45s var(--ease), background-color .45s var(--ease);
}
.guia__punto:hover::before { background: rgba(237, 239, 242, .6); }
.guia__punto.is-hecho::before { background: rgba(255, 203, 142, .5); }
.guia__punto.is-actual::before { width: 18px; background: var(--warm); }
.guia__punto:focus-visible { outline: 2px solid var(--warm); outline-offset: -4px; border-radius: 6px; }
.guia__sig {
  display: inline-flex; flex: 0 1 auto; min-width: 0; align-items: center; gap: 9px; height: 36px; padding: 0 14px 0 16px; border-radius: 18px;
  border: 1px solid rgba(237, 239, 242, .16); background: rgba(8, 11, 18, .62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: #EDEFF2; font: inherit; font-size: .8125rem; line-height: 1.2; cursor: pointer; text-align: left;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.guia__sig:hover { border-color: rgba(255, 203, 142, .55); background: rgba(14, 18, 28, .78); }
.guia__sig:focus-visible { outline: 2px solid var(--warm); outline-offset: 2px; }
.guia__sig svg { flex: none; width: 14px; height: 14px; color: var(--warm); }
.guia__sig-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* resting on a step for a moment: the arrow invites the next one */
.guia.is-espera .guia__sig svg { animation: guia-bote 1.5s cubic-bezier(.45, 0, .35, 1) infinite; }
.guia.is-espera .guia__sig { border-color: rgba(255, 203, 142, .4); }
@keyframes guia-bote { 0%, 100% { transform: translateY(-1px); } 50% { transform: translateY(3px); } }
.blueprint__drawing .guia { position: absolute; left: 14px; bottom: 10px; right: 140px; }
@media (max-width: 960px) {
  .blueprint__drawing .guia { left: 10px; right: 10px; bottom: 8px; }
  .blueprint__nota { display: none; }
}
@media (max-width: 480px) {
  .guia { gap: 6px 8px; }
  .guia__punto { width: 18px; }
  .guia__sig { height: 32px; padding: 0 11px 0 12px; font-size: .75rem; }
  .guia__cuenta { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { .guia.is-espera .guia__sig svg { animation: none; } }

/* (v13) Nosotros: each idea is a key with its LED; they light one after the other when the row comes on screen */
.value h3 { display: flex; align-items: center; gap: 12px; }
.value h3::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: rgba(237, 239, 242, .2); transition: background-color .5s var(--ease), box-shadow .5s var(--ease); }
.value.is-on h3::before, html:not(.scrollfx) .value h3::before { background: var(--warm); box-shadow: 0 0 0 4px rgba(255, 203, 142, .16), 0 0 12px var(--warm); }
/* the statements that light up word by word: the words keep their place */
[data-palabras] .pal { display: inline-block; }

/* ================= Innovación (v14.1, 01/10/2026) =================
   Night page with one light: warm gold. The cover is a dark room where three soft beams sweep slowly; under the title a
   strip of brand news runs like a lit sign. Then the novelties, each one demonstrated on a small stage, and the cases
   of the brands as cards that pile up while the page goes by. */
body.page-innovacion {
  --bg: var(--night); --fg: var(--on-night); --fg-2: var(--on-night-2); --fg-3: var(--on-night-3);
  --rule: var(--line-night); --panel: var(--night-2); color-scheme: dark;
}
.inn-hero { min-height: min(92svh, 980px); align-items: center; padding-bottom: 0; grid-template-rows: 1fr auto; }
.inn-hero::after { display: none; }
.inn-hero__contenido { padding-block: calc(var(--header-h) + 12vh) clamp(40px, 7vh, 80px); gap: 24px; }
.inn-hero__titulo { max-width: 11em; }
.inn-hero__lead { max-width: 52ch; color: rgba(246, 247, 249, .8); }
/* three beams of warm light that sweep the dark room, slowly and out of step */
.inn-hero__luz { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background: radial-gradient(80% 60% at 70% 20%, rgba(255, 190, 120, .08), transparent 70%), var(--night); }
.inn-hero__luz i { position: absolute; top: -30%; left: var(--x, 60%); width: 26vw; min-width: 220px; height: 160%; transform-origin: 50% 0;
  background: linear-gradient(180deg, rgba(255, 214, 160, .2), rgba(255, 190, 120, .05) 55%, transparent 80%); filter: blur(18px);
  transform: rotate(var(--a, 12deg)); animation: inn-haz var(--t, 14s) ease-in-out infinite alternate; }
.inn-hero__luz i:nth-child(1) { --x: 48%; --a: 18deg; --t: 13s; }
.inn-hero__luz i:nth-child(2) { --x: 66%; --a: -6deg; --t: 17s; animation-delay: -5s; opacity: .8; }
.inn-hero__luz i:nth-child(3) { --x: 82%; --a: -22deg; --t: 21s; animation-delay: -9s; opacity: .6; }
@keyframes inn-haz { from { transform: rotate(var(--a)); } to { transform: rotate(calc(var(--a) * -1)); } }
@media (prefers-reduced-motion: reduce) { .inn-hero__luz i { animation: none; } }

/* the strip of brand news (also on Inicio) */
.cintillo { position: relative; z-index: 2; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0;
  border-block: 1px solid rgba(255, 203, 142, .22); background: linear-gradient(180deg, rgba(14, 16, 22, .92), rgba(8, 10, 14, .96)); color: var(--on-night); }
.cintillo__eti { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 0 22px 0 max(var(--gutter), 16px); height: 64px;
  font-size: .75rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--warm);
  border-right: 1px solid rgba(255, 203, 142, .22); background: rgba(8, 10, 14, .96); position: relative; z-index: 2; }
.cintillo__led { width: 7px; height: 7px; border-radius: 50%; background: var(--warm); box-shadow: 0 0 0 4px rgba(255, 203, 142, .14), 0 0 12px var(--warm); animation: cintillo-led 2.4s ease-in-out infinite; }
@keyframes cintillo-led { 50% { opacity: .45; } }
.cintillo__ventana { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 4%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 4%, #000 92%, transparent); }
.cintillo__pista { display: flex; width: max-content; margin: 0; padding: 0; list-style: none; }
.cintillo.is-corre .cintillo__pista { animation: cintillo-corre var(--cintillo-t, 70s) linear infinite; }
.cintillo:not(.is-corre) .cintillo__ventana { overflow-x: auto; scrollbar-width: none; }
.cintillo:hover .cintillo__pista, .cintillo:focus-within .cintillo__pista { animation-play-state: paused; }
@keyframes cintillo-corre { to { transform: translate3d(-50%, 0, 0); } }
.cintillo__pista li { display: flex; align-items: center; }
.cintillo__item { display: inline-flex; align-items: baseline; gap: 12px; padding: 0 22px; height: 64px; line-height: 64px; color: var(--on-night); text-decoration: none; white-space: nowrap; font-size: 1rem; transition: color .3s; }
.cintillo__marca { font-size: .75rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--warm); }
.cintillo__item:hover .cintillo__txt, .cintillo__item:focus-visible .cintillo__txt { color: #fff; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: rgba(255, 203, 142, .6); }
.cintillo__item:focus-visible { outline: 2px solid var(--warm); outline-offset: -6px; border-radius: 8px; }
.cintillo__sep { width: 5px; height: 5px; transform: rotate(45deg); background: rgba(255, 203, 142, .55); }
@media (prefers-reduced-motion: reduce) {
  .cintillo__pista { animation: none; }
  .cintillo__ventana { overflow-x: auto; -webkit-mask: none; mask: none; }
}
@media (max-width: 640px) {
  .cintillo__eti { padding: 0 14px 0 16px; height: 54px; font-size: 0; gap: 0; }
  .cintillo__item { height: 54px; line-height: 54px; font-size: .9375rem; padding: 0 16px; }
}

/* the novelties: a list of keys and a stage */
.inn-novedades { background: var(--night); }
.nov { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(22px, 3vw, 40px); align-items: start; }
/* (v14.2) the seven novelties run across, like the keys of a keypad; the stage below is wide enough for each demo */
.nov__lista { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.nov__tecla { position: relative; display: grid; gap: 6px; align-content: start; padding: 18px 14px 18px 26px; border: 0; border-right: 1px solid var(--rule); background: none; color: var(--fg-3);
  font: inherit; text-align: left; cursor: pointer; transition: color .35s, background-color .35s; -webkit-tap-highlight-color: transparent; }
.nov__lista > .nov__tecla:last-child { border-right: 0; }
.nov__tecla::before { content: ""; position: absolute; left: 10px; top: 24px; width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 203, 142, .2); transition: background-color .35s, box-shadow .35s; }
.nov__tecla:hover { color: var(--fg-2); }
.nov__tecla[aria-selected="true"] { color: var(--fg); background: linear-gradient(180deg, rgba(255, 203, 142, .08), transparent); }
.nov__tecla[aria-selected="true"]::before { background: var(--warm); box-shadow: 0 0 10px var(--warm); }
.nov__tecla:focus-visible { outline: 2px solid var(--warm); outline-offset: -2px; border-radius: 6px; }
.nov__marca { font-size: .6875rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: #C99A5E; }
.nov__nombre { font-size: .9375rem; font-stretch: 106%; line-height: 1.3; }
.nov__tiempo { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--warm); transform: scaleX(0); transform-origin: 0 50%; }
.nov.is-solo .nov__tecla[aria-selected="true"] .nov__tiempo { animation: bp-tiempo var(--nov-paso, 8s) linear both; }
.nov__escenario { display: grid; min-width: 0; }
.nov__panel { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(22px, 3.4vw, 56px); align-items: center; }
.js .nov__panel { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity .55s var(--ease), transform .7s var(--ease); }
.js .nov__panel.is-actual { opacity: 1; transform: none; }
.nov__panel[hidden] { display: grid !important; visibility: hidden; pointer-events: none; }
html:not(.js) .nov__panel[hidden] { display: none !important; }
.nov__texto { display: grid; gap: 14px; align-content: start; }
.nov__texto p { margin: 0; color: var(--fg-2); }
.nov__eti { font-size: .75rem !important; letter-spacing: .12em; text-transform: uppercase; color: #C99A5E !important; }
.nov__titulo { margin: 0; font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.8rem); font-weight: 260; font-stretch: 114%; letter-spacing: -.025em; line-height: 1.05; color: var(--fg); }
.nov__dato { padding: 14px 16px; border: 1px solid rgba(255, 203, 142, .22); border-radius: 14px; background: rgba(255, 203, 142, .05); color: var(--fg) !important; font-size: .9375rem; }
.nov__dato b { font-weight: 500; color: var(--warm); }
.nov__fuente { font-size: .8125rem; color: var(--fg-3) !important; }
.nov__fuente a { color: var(--fg-2); }
/* the stages: drawings that play while their novelty is open */
.demo { position: relative; aspect-ratio: 400 / 220; border-radius: var(--r); overflow: hidden; background: #070A10; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 30px 60px -30px rgba(0, 0, 0, .8); }
.demo svg { display: block; width: 100%; height: 100%; }
.demo text { font-family: var(--font); font-size: 12px; fill: rgba(246, 247, 249, .78); }
.nov__panel:not(.is-actual) .demo * { animation-play-state: paused !important; }
.nov__pista { font-size: .9375rem; color: var(--fg) !important; display: flex; align-items: center; gap: 10px; }
.nov__pista::before { content: ""; flex: none; width: 18px; height: 1px; background: var(--warm); }
.nov__noticia { padding: 2px 0 2px 16px; border-left: 2px solid rgba(255, 203, 142, .45); font-size: .9375rem; }
.nov__noticia b { font-weight: 500; color: var(--fg); }
/* (v14.2) the big demos: a scene and, under it, its controls, in one dark frame */
.nov__panel--grande .demo { aspect-ratio: auto; display: grid; grid-template-rows: auto auto; background: #0B0D12; }
.demo__escena { display: block; width: 100%; height: auto; aspect-ratio: 400 / 250; }
.demo__panel { position: relative; display: grid; gap: 10px; padding: 14px 18px 16px; border-top: 1px solid rgba(255, 255, 255, .07); background: linear-gradient(180deg, #10131A, #0B0D12); }
.demo__panel::after { content: "Ilustración"; position: absolute; right: 14px; top: -22px; font-size: .625rem; letter-spacing: .08em; color: rgba(246, 247, 249, .55); text-shadow: 0 1px 3px rgba(0, 0, 0, .6); pointer-events: none; }
.demo--inv .demo__panel::after { color: rgba(70, 58, 44, .7); text-shadow: none; }

/* 1 · the room that lives a whole day */
.ds-sol { fill: #FFF3D6; } .ds-luna { fill: #E8ECF6; }
.ds-brillo { fill: none; stroke: rgba(255, 255, 255, .35); stroke-width: 1; stroke-linecap: round; }
.ds-palma { fill: none; stroke: rgba(8, 12, 18, .85); stroke-width: 2.4; stroke-linecap: round; }
.ds-marco { fill: none; stroke: #0E1014; stroke-width: 4; }
.ds-repisa { fill: #0F1115; }
.ds-muebles path { fill: rgba(8, 9, 12, .78); }
.ds-cable { stroke: #0E1014; stroke-width: 1.4; }
.ds-pantalla { fill: #14161B; }
.ds-panel { grid-template-columns: minmax(0, 1fr); }
.ds-lectura { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; min-height: 2.6em; }
.ds-lectura p { margin: 0; }
.ds-hora { font-size: 1.5rem; font-weight: 250; font-stretch: 112%; letter-spacing: -.02em; color: #F6F7F9; min-width: 6.4em; }
.ds-momento { flex: 1 1 14em; font-size: .9375rem; color: rgba(246, 247, 249, .82); }
.ds-k { font-size: .75rem; letter-spacing: .06em; color: var(--warm); }
.ds-reloj { display: block; }
.ds-rango { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 26px; margin: 0; background: none; cursor: pointer; }
.ds-rango::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, #1B2350 0%, #2B3570 20%, #F0A47E 26%, #CFE3FF 42%, #F4F7FF 50%, #E6E0C6 64%, #F2A66E 76%, #3A2E5A 82%, #1B2350 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.ds-rango::-moz-range-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, #1B2350 0%, #2B3570 20%, #F0A47E 26%, #CFE3FF 42%, #F4F7FF 50%, #E6E0C6 64%, #F2A66E 76%, #3A2E5A 82%, #1B2350 100%); }
.ds-rango::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -7px; border-radius: 50%; background: #FFF6E6; border: 2px solid #0B0D12; box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), 0 0 16px var(--ds-luz, rgba(255, 210, 150, .9)); }
.ds-rango::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #FFF6E6; border: 2px solid #0B0D12; box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), 0 0 16px var(--ds-luz, rgba(255, 210, 150, .9)); }
.ds-rango:focus-visible { outline: 2px solid var(--warm); outline-offset: 4px; border-radius: 8px; }
.ds-horas { display: flex; justify-content: space-between; margin-top: -4px; font-size: .6875rem; color: rgba(246, 247, 249, .5); }
.ds-horas span { width: 0; display: flex; justify-content: center; white-space: nowrap; }
.ds-horas span:first-child { justify-content: flex-start; } .ds-horas span:last-child { justify-content: flex-end; }

/* 2 · the speaker that disappears: four steps (the page plays them; each one can be chosen) */
.dv-textura circle { fill: rgba(120, 100, 80, .13); }
.dv-cuadro rect { fill: #2D3A40; stroke: #B49A72; stroke-width: 3; } .dv-cuadro path { fill: none; stroke: rgba(255, 220, 170, .55); stroke-width: 1.6; } .dv-cuadro circle { fill: rgba(255, 200, 140, .7); }
.dv-aplique-pie { fill: #9C8B72; }
.dv-mueble { fill: #4A3A2C; stroke: #4A3A2C; stroke-width: 3; } .dv-jarron { fill: #B7A68C; stroke: #6E8B6A; stroke-width: 1.6; } .dv-piso { fill: #C2B49E; }
.dv-hueco rect { fill: #3B342C; }
.dv-hueco, .dv-parlante, .dv-masilla, .dv-pintura, .dv-llana, .dv-rodillo, .dv-ondas, .dv-rayos { transform-box: fill-box; }
.dv-hueco { opacity: 0; transition: opacity .6s ease; }
.dv-parlante { opacity: 0; transform-origin: 50% 50%; transform: scale(1.22) translateY(-6px); filter: drop-shadow(0 10px 8px rgba(0, 0, 0, .35)); transition: opacity .7s ease .5s, transform 1.3s var(--ease) .5s, filter 1.3s ease .5s; }
.dv-masilla { transform-origin: 0 50%; transform: scaleX(0); transition: transform 2s cubic-bezier(.45, 0, .55, 1); }
.dv-pintura { transform-origin: 50% 0; transform: scaleY(0); transition: transform 1.8s cubic-bezier(.45, 0, .55, 1); }
.dv-llana { opacity: 0; transform: translate(222px, 104px); }
.dv-rodillo { opacity: 0; transform: translate(278px, 52px); }
.dv-ondas ellipse { fill: none; stroke: rgba(176, 116, 48, .65); stroke-width: 1.4; opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
.dv-rayos { opacity: 0; } .dv-rayos rect { fill: none; stroke: #C25B2A; stroke-width: 1.4; stroke-dasharray: 5 4; } .dv-rayos text { fill: #A64C22; font-size: 10px; font-weight: 500; letter-spacing: .04em; }
.demo--inv:not([data-paso="0"]) .dv-hueco { opacity: 1; }
.demo--inv:not([data-paso="0"]) .dv-parlante { opacity: 1; transform: none; filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0)); }
.demo--inv:is([data-paso="2"], [data-paso="3"], [data-paso="4"]) .dv-masilla { transform: none; }
.demo--inv[data-paso="2"] .dv-llana { animation: dv-llana 2s cubic-bezier(.45, 0, .55, 1) both; }
@keyframes dv-llana { 0% { opacity: 0; transform: translate(222px, 104px) rotate(-8deg); } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; transform: translate(334px, 104px) rotate(6deg); } }
.demo--inv:is([data-paso="3"], [data-paso="4"]) .dv-pintura { transform: none; }
.demo--inv[data-paso="3"] .dv-rodillo { animation: dv-rodillo 1.8s cubic-bezier(.45, 0, .55, 1) both; }
@keyframes dv-rodillo { 0% { opacity: 0; transform: translate(278px, 52px); } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; transform: translate(278px, 154px); } }
.demo--inv[data-paso="4"] .dv-ondas ellipse { animation: dv-onda 2.8s ease-out infinite; animation-delay: calc(var(--i) * .7s + .3s); }
@keyframes dv-onda { 0% { transform: scale(.5); opacity: 0; } 12% { opacity: .9; } 100% { transform: scale(3.6); opacity: 0; } }
.demo--inv[data-paso="4"] .dv-rayos { animation: dv-rayos 5.6s ease both; }
@keyframes dv-rayos { 0%, 52% { opacity: 0; } 62%, 86% { opacity: 1; } 100% { opacity: 0; } }
.demo--inv.sin-paso * { transition: none !important; animation: none !important; }
.dv-pasos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.dv-pasos button { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px 10px; border: 0; border-radius: 10px; background: none; color: rgba(246, 247, 249, .5);
  font: inherit; font-size: .8125rem; text-align: left; cursor: pointer; transition: color .4s, background-color .4s; }
.dv-pasos button::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 3px; height: 2px; border-radius: 2px; background: rgba(246, 247, 249, .12); }
.dv-pasos .num { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(246, 247, 249, .25); font-size: .6875rem; }
.dv-pasos button.is-hecho { color: rgba(246, 247, 249, .78); } .dv-pasos button.is-hecho::after { background: rgba(255, 203, 142, .45); }
.dv-pasos button.is-actual { color: #F6F7F9; background: rgba(255, 203, 142, .07); } .dv-pasos button.is-actual::after { background: var(--warm); }
.dv-pasos button.is-actual .num { border-color: var(--warm); color: var(--warm); }
.dv-pasos button:hover { color: #F6F7F9; }
.dv-pasos button:focus-visible { outline: 2px solid var(--warm); outline-offset: 2px; }
.dv-frase { margin: 0; min-height: 1.5em; font-size: .9375rem; color: rgba(246, 247, 249, .86); }

/* 3 · Alisse: the finish and the halo come from custom properties set by the page */
.demo--alisse { --p1: #6F5530; --p2: #A9844A; --p3: #D9BC84; --grab: rgba(52, 36, 14, .62); --halo: #FFD9A0; --amb: #FFD7A0; --amb-o: .55; }
.da-muro { fill: #15120F; }
.da-a { stop-color: var(--amb); transition: stop-color 1.2s ease; }
.da-luz { opacity: var(--amb-o); transition: opacity 1.4s ease; }
.da-p1 { stop-color: var(--p1); transition: stop-color .8s ease; } .da-p2 { stop-color: var(--p2); transition: stop-color .8s ease; } .da-p3 { stop-color: var(--p3); transition: stop-color .8s ease; }
.da-bisel { fill: none; stroke: rgba(255, 255, 255, .28); stroke-width: .8; }
.da-brillo { transform-box: view-box; animation: da-brillo 7s cubic-bezier(.45, 0, .55, 1) infinite; mix-blend-mode: soft-light; }
@keyframes da-brillo { 0%, 55% { transform: translateX(-150px); } 100% { transform: translateX(170px); } }
.da-tecla { cursor: pointer; outline: none; }
.da-anillo { fill: none; stroke: rgba(0, 0, 0, .3); stroke-width: 1; }
.da-halo { fill: none; stroke: var(--halo); stroke-width: 2.4; opacity: 0; transition: opacity .8s ease, stroke .8s ease; }
.da-tecla[aria-pressed="true"] .da-halo { opacity: 1; }
.da-tecla:hover .da-halo { opacity: .45; } .da-tecla[aria-pressed="true"]:hover .da-halo { opacity: 1; }
.da-tecla:focus-visible .da-anillo { stroke: var(--warm); stroke-width: 2; }
.da-tapa { transition: transform .15s ease; transform-box: fill-box; transform-origin: 50% 50%; }
.da-tecla:active .da-tapa { transform: scale(.94); }
.da-grabado { font-family: var(--font); font-size: 5.6px !important; font-weight: 600; letter-spacing: .14em; fill: var(--grab) !important; transition: fill .8s ease; }
.da-escena { font-size: 11px !important; letter-spacing: .14em; text-transform: uppercase; fill: rgba(246, 247, 249, .6) !important; }
.da-panel { grid-template-columns: auto 1fr; align-items: center; gap: 10px 18px; }
.da-acabado { margin: 0; display: grid; gap: 2px; font-size: .75rem; color: rgba(246, 247, 249, .55); min-width: 9.5em; }
.da-acabado b { font-size: .9375rem; font-weight: 400; color: #F6F7F9; }
.da-muestras { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.da-muestras button { position: relative; width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); background: linear-gradient(135deg, var(--m1), var(--m2)); cursor: pointer; transition: transform .25s var(--ease), box-shadow .25s ease; }
.da-muestras button:hover { transform: scale(1.1); }
.da-muestras button[aria-checked="true"] { box-shadow: 0 0 0 2px #0B0D12, 0 0 0 3.5px var(--warm); }
.da-muestras button:focus-visible { outline: 2px solid var(--warm); outline-offset: 3px; }
.da-muestras button:nth-child(1) { --m1: #6F5530; --m2: #D9BC84; } .da-muestras button:nth-child(2) { --m1: #4A3426; --m2: #9C7A5C; }
.da-muestras button:nth-child(3) { --m1: #B08A45; --m2: #F0DCA2; } .da-muestras button:nth-child(4) { --m1: #B59C78; --m2: #F1E4CC; }
.da-muestras button:nth-child(5) { --m1: #8E908D; --m2: #E2E3DF; } .da-muestras button:nth-child(6) { --m1: #7C838B; --m2: #FBFCFD; }
.da-muestras button:nth-child(7) { --m1: #2E3034; --m2: #707379; } .da-muestras button:nth-child(8) { --m1: #151516; --m2: #2A2A2B; }
.da-muestras button:nth-child(9) { --m1: #DAD8D2; --m2: #F7F6F2; }
/* cameras: the frame follows whoever speaks, and the other room sees that person up close */
.dk-sala { fill: #0C121C; stroke: rgba(150, 180, 255, .25); } .dk-mesa { fill: #1A2230; stroke: rgba(150, 180, 255, .3); }
.dk-personas circle { fill: #3A4458; animation: dk-habla 9s steps(1, end) infinite; animation-delay: calc(var(--i) * 1.5s - 9s); }
@keyframes dk-habla { 0% { fill: #FFCB8E; } 16.66%, 100% { fill: #3A4458; } }
.dk-cuadro path { fill: none; stroke: #5CFFB0; stroke-width: 2; stroke-linecap: round; }
.dk-cuadro { animation: dk-cuadro 9s cubic-bezier(.6, 0, .3, 1) infinite; }
@keyframes dk-cuadro { 0%, 14% { transform: translate(66px, 66px); } 17%, 31% { transform: translate(112px, 66px); } 34%, 47% { transform: translate(158px, 66px); } 50%, 64% { transform: translate(66px, 150px); } 67%, 81% { transform: translate(112px, 150px); } 84%, 100% { transform: translate(158px, 150px); } }
.dk-camara rect { fill: #202838; stroke: rgba(246, 247, 249, .4); } .dk-camara circle { fill: #5CFFB0; }
.dk-haz { stroke: rgba(92, 255, 176, .5); stroke-width: 1.4; stroke-dasharray: 2 3; }
.dk-rotulo { font-size: 10px !important; letter-spacing: .08em; fill: rgba(246, 247, 249, .6) !important; }
.dk-tv { fill: #05070B; stroke: rgba(246, 247, 249, .35); }
.dk-plano { fill: #FFCB8E; transform-box: view-box; transform-origin: 318px 110px; animation: dk-corte 1.5s cubic-bezier(.2, .7, .2, 1) infinite; }
@keyframes dk-corte { 0% { opacity: 0; transform: scale(1.12); } 18%, 100% { opacity: 1; transform: none; } }
.dk-nombres text { font-size: 11px !important; fill: #5CFFB0 !important; letter-spacing: .04em; opacity: 0; animation: dk-turno 9s steps(1, end) infinite; animation-delay: calc(var(--i) * 1.5s - 9s); }
@keyframes dk-turno { 0% { opacity: 1; } 16.66%, 100% { opacity: 0; } }
/* DALI DT8 (v14.2): three fittings that change their white and their colour together */
.demo--dali { --dd: #FFB46B; }
.dd-cuarto { fill: #0B0D12; } .dd-techo { fill: #07080C; } .dd-piso { fill: #0E1015; }
.dd-lum { fill: #2A2F3A; stroke: rgba(246, 247, 249, .45); }
.dd-c { stop-color: var(--dd); transition: stop-color 1.1s ease; }
.dd-mueble { fill: #05060A; }
.dd-panel { grid-template-columns: auto 1fr; align-items: center; gap: 10px 18px; }
.dd-lectura { margin: 0; display: grid; gap: 2px; min-width: 8.5em; font-size: .75rem; color: rgba(246, 247, 249, .55); }
.dd-lectura b { font-size: .9375rem; font-weight: 400; color: #F6F7F9; }
.dd-mandos { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; }
.dd-mandos button { height: 30px; padding: 0 12px; border: 1px solid rgba(246, 247, 249, .2); border-radius: 15px; background: rgba(246, 247, 249, .04); color: rgba(246, 247, 249, .78); font: inherit; font-size: .8125rem; cursor: pointer; transition: border-color .25s, color .25s, background-color .25s; }
.dd-mandos button.dd-color { width: 30px; padding: 0; background: var(--m); }
.dd-mandos button:nth-child(4) { --m: #FFA640; } .dd-mandos button:nth-child(5) { --m: #FF4D4D; } .dd-mandos button:nth-child(6) { --m: #45E07A; } .dd-mandos button:nth-child(7) { --m: #4D7DFF; }
.dd-mandos button:hover { color: #F6F7F9; border-color: rgba(246, 247, 249, .45); }
.dd-mandos button[aria-checked="true"] { color: #0B0D12; background: #F6F7F9; border-color: #F6F7F9; }
.dd-mandos button.dd-color[aria-checked="true"] { background: var(--m); box-shadow: 0 0 0 2px #0B0D12, 0 0 0 3.5px #F6F7F9; }
.dd-mandos button:focus-visible { outline: 2px solid var(--warm); outline-offset: 3px; }
/* Kaleidescape: the films run into the server */
.dl-fondo { fill: #08080C; } .dl-banda { fill: #15161C; } .dl-hueco { fill: #08080C; }
.dl-cinta rect:not(.dl-banda):not(.dl-hueco) { fill: #2A2440; stroke: rgba(201, 170, 255, .35); }
.dl-cinta { animation: dl-cinta 12s linear infinite; }
@keyframes dl-cinta { from { transform: translateX(0); } to { transform: translateX(-444px); } }
.dl-servidor { fill: #1C1D24; stroke: rgba(246, 247, 249, .35); } .dl-ranuras { stroke: rgba(246, 247, 249, .3); } .dl-led { fill: #7CFFB2; animation: cintillo-led 1.4s ease-in-out infinite; }
.dl-tb { font-size: 30px !important; font-weight: 250; letter-spacing: -.02em; fill: #F6F7F9 !important; }
/* Multiview: six pictures that change their layout */
.dm-pared { fill: #0E1015; } .dm-tv { fill: #050608; stroke: rgba(246, 247, 249, .3); } .dm-pie { fill: #1A1D24; }
.dm-t { fill: #1F2A40; stroke: rgba(150, 180, 255, .35); transition: x .9s var(--ease), y .9s var(--ease), width .9s var(--ease), height .9s var(--ease); }
.dm-t1 { fill: #2B4A7A; } .dm-t2 { fill: #3D2B5A; } .dm-t3 { fill: #2B5A4A; } .dm-t4 { fill: #5A3F2B; } .dm-t5 { fill: #23384F; } .dm-t6 { fill: #44324A; }

/* the cases of the brands: cards that pile up */
.inn-casos { background: linear-gradient(180deg, var(--night), #07090E); }
.casos { display: grid; gap: clamp(18px, 3vh, 34px); margin: 0; padding: 0; list-style: none; }
.caso { position: sticky; top: calc(var(--header-h) + 16px + var(--i) * 10px); }
.caso__tarjeta { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: clamp(20px, 3vw, 48px); align-items: center;
  min-height: min(72svh, 640px); padding: clamp(24px, 3.4vw, 52px); border-radius: calc(var(--r) + 6px);
  background: radial-gradient(90% 120% at 0% 0%, rgba(255, 190, 120, .09), transparent 60%), linear-gradient(160deg, #121722, #0A0D13 70%);
  box-shadow: inset 0 0 0 1px rgba(255, 203, 142, .14), 0 -20px 60px -20px rgba(0, 0, 0, .8); transform-origin: 50% 0; }
.caso__dibujo { display: grid; place-items: center; height: 100%; min-height: 200px; border-radius: var(--r); background: radial-gradient(70% 70% at 50% 55%, rgba(255, 190, 120, .1), transparent 70%); }
.caso__dibujo svg { width: min(100%, 420px); height: auto; overflow: visible; }
.caso__dibujo svg * { fill: none; stroke: rgba(255, 214, 160, .85); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.js .caso__dibujo svg * { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s var(--ease); }
.js .caso.is-vista .caso__dibujo svg * { stroke-dashoffset: 0; }
.caso__haz { stroke-dasharray: 3 4 !important; stroke-dashoffset: 0 !important; opacity: 0; transition: opacity 1s .8s !important; }
.caso.is-vista .caso__haz { opacity: 1; }
.caso__cuerpo { display: grid; gap: 12px; align-content: center; min-width: 0; }
.caso__marca { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; font-size: .8125rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--warm); }
.caso__led { width: 7px; height: 7px; border-radius: 50%; background: var(--warm); box-shadow: 0 0 10px var(--warm); }
.caso__aviso { padding: 3px 9px; border: 1px solid var(--rule); border-radius: var(--r-pill); font-size: .625rem; letter-spacing: .1em; color: var(--fg-3); }
.caso__titulo { margin: 0; font-size: clamp(1.6rem, 1.1rem + 1.7vw, 2.9rem); font-weight: 260; font-stretch: 114%; letter-spacing: -.025em; line-height: 1.05; }
.caso__lugar { margin: 0; font-size: .875rem; color: var(--fg-3); }
.caso__cifra { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0 2px; }
.caso__num { font-size: clamp(3rem, 2rem + 4vw, 5.6rem); font-weight: 200; font-stretch: 120%; letter-spacing: -.05em; line-height: .9; color: #FFE2B8; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #FFF1DC, #E8B676); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.caso__num--txt { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.4rem); letter-spacing: -.03em; }
.caso__cifra-txt { max-width: 22ch; font-size: .9375rem; color: var(--fg-2); }
.caso__texto { margin: 0; max-width: 58ch; color: var(--fg-2); }
.caso__datos { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: .9375rem; }
.caso__datos li { padding-left: 16px; position: relative; color: var(--fg); }
.caso__datos li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 1px; background: var(--warm); }
.caso__chips li { font-size: .75rem; }
.caso__fuente { margin: 0; font-size: .75rem; color: var(--fg-3); }
.caso__fuente a { color: var(--fg-2); }
@media (max-width: 960px) {
  .nov__panel { grid-template-columns: minmax(0, 1fr); align-content: start; align-items: start; }
  .demo__panel { padding: 12px 14px 14px; }
  .da-muestras { gap: 7px; } .da-muestras button { width: 23px; height: 23px; }
  .ds-hora { font-size: 1.25rem; min-width: 0; }
  .dv-pasos button { padding: 8px 4px 10px; gap: 6px; font-size: .75rem; }
  .dv-pasos button::after { left: 4px; right: 4px; }
  .da-panel { grid-template-columns: minmax(0, 1fr); }
  .dd-panel { grid-template-columns: minmax(0, 1fr); }
  .dd-mandos { justify-content: flex-start; }
  .da-muestras { justify-content: flex-start; }
  .caso__tarjeta { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 14px; }
  .caso__dibujo { min-height: 0; height: 130px; }
  .caso__dibujo svg { height: 120px; width: auto; }
  .caso { top: calc(var(--header-h) + 8px + var(--i) * 6px); }
  .caso__datos, .caso__chips { display: none; }
}
@media (max-width: 960px) and (min-height: 760px) { .caso__chips { display: flex; } }
/* the closing: no photo; a slow warm light rises behind the words */
.inn-cta { background: var(--night); }
.inn-cta__luz { position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 70% at 50% 110%, rgba(255, 180, 100, .28), transparent 70%); animation: inn-cta 6s ease-in-out infinite alternate; }
@keyframes inn-cta { from { opacity: .6; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .inn-cta__luz { animation: none; } }
/* (v14.1) the strip of brand news on Inicio, between "Para quién" and the project */
.inicio-cintillo { background: var(--night); padding-block: clamp(10px, 2vw, 24px); }

/* (v14.1) Soluciones · the cinema of the closing, in layers (site.js lights them while the section comes up) */
.cierre-cine .cc-capa { position: absolute; inset: 0; }
.cierre-cine .cc-capa picture, .cierre-cine .cc-capa img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cierre-cine .cc-haz { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(220, 232, 255, .5), rgba(200, 220, 255, .12)); mix-blend-mode: screen; filter: blur(6px); }
.scrollfx .cierre-cine :is(.cc-techo, .cc-pantalla, .cc-haz, .cc-todo) { opacity: 0; will-change: opacity; }
html:not(.scrollfx) .cierre-cine :is(.cc-apagada, .cc-techo, .cc-pantalla, .cc-haz) { display: none; }
/* (v14.2) up to 1240 px the novelties are a row of chips that slides sideways */
@media (max-width: 1240px) {
  .nov__lista { display: flex; gap: 8px; overflow-x: auto; border: 0; padding-bottom: 6px; scrollbar-width: none; }
  .nov__lista::-webkit-scrollbar { display: none; }
  .nov__lista > .nov__tecla, .nov__lista > .nov__tecla:last-child { flex: none; padding: 10px 14px; border: 1px solid var(--rule); border-radius: 14px; }
  .nov__tecla::before { display: none; }
  .nov__tecla[aria-selected="true"] { border-color: rgba(255, 203, 142, .5); }
  .nov__tiempo { left: 14px; right: 14px; bottom: 4px; }
}
/* (v14.1) medium screens (tablets across, small laptops): the rail keeps only its numbers and the stage names are a
   little smaller, so the words of each stage fit their column */
@media (min-width: 961px) and (max-width: 1240px) {
  .bp-riel__nombre { display: none; }
  .bp-step__title { font-size: clamp(1.9rem, 1rem + 2.2vw, 2.8rem); }
  .bp-step { min-width: 0; }
}
.bp-step__title { overflow-wrap: anywhere; hyphens: auto; }
/* (v14.2) the stage names never break inside a word ("Integració / n" at 1440): their size follows the width of their
   own column (the longest, "Integración" and "Instalación", fit whole) */
.blueprint__steps { container-type: inline-size; }
@supports (font-size: 1cqi) {
  .bp-step__title { font-size: min(clamp(2.3rem, 1.4rem + 2.8vw, 4.4rem), 14.2cqi); overflow-wrap: normal; hyphens: manual; }
  @media (min-width: 961px) and (max-width: 1240px) { .bp-step__title { font-size: min(clamp(1.9rem, 1rem + 2.2vw, 2.8rem), 14.2cqi); } }
  @media (max-width: 960px) { .bp-step__title { font-size: min(1.75rem, 14.2cqi); } }
}