/* Portada de Inicio (v12): un recorrido por pasos. La casa se enciende por sistemas (luz calculada en vivo con WebGL,
   assets/js/luz.js), con una cámara 2.5D, llamadas en la escena, un riel de capítulos, botones para avanzar y un
   teclado de pared que funciona siempre. La portada mide una pantalla: mientras el recorrido está en ella, la página no
   baja; al final suelta la página. Se carga solo en Inicio. Usa los colores y tipos de site.css. */

.hero--luz .hero__media img { object-position: 50% 50%; }
/* one screen tall: the tour never needs a long scroll */
.scrollfx .hero--luz { height: 100svh; }
.scrollfx .hero--luz .hero__stage { position: relative; height: 100%; min-height: 0; }
/* (v14) the tour follows the page: the cover is as tall as the story and its stage stays on screen (luz.js sets
   --luz-largo: the scroll of every chapter) */
.scrollfx .hero--luz.is-scroll { height: calc(100svh + var(--luz-largo, 496svh)); }
.scrollfx .hero--luz.is-scroll .hero__stage { position: sticky; top: 0; height: 100svh; }
/* (v14.3) in the middle of the story the finger is the story's: the stage never pans the page (pinch zoom still works);
   at the two ends (is-dedo off) the free way is the page's own scroll */
.scrollfx .hero--luz.is-scroll.is-dedo .hero__stage { touch-action: none; touch-action: pinch-zoom; }
html.luz-dedo, html.luz-dedo body { overscroll-behavior-y: none; }
.luz__lienzo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .45s linear; }
.hero--luz.is-gl .luz__lienzo { opacity: 1; }
.luz__capas { position: absolute; inset: 0; }
.luz__capas img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.luz__encendida { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.luz__noche { position: absolute; inset: 0; background: var(--night); opacity: 0; pointer-events: none; }
.motion .luz__noche { opacity: .62; }
.hero--luz.is-pasos .hero__media { transform-origin: 50% 50%; }

/* while the tour holds the page: no bounce, no pull-to-refresh; one finger drives the tour, two can still zoom */
html.luz-bloqueo, html.luz-bloqueo body { overscroll-behavior: none; }
html.luz-bloqueo .hero--luz { touch-action: pinch-zoom; }

/* the veil only where there is text: the bottom band and a soft left edge */
.hero--luz .hero__veil {
  background:
    linear-gradient(0deg, rgba(4, 6, 10, .78) 0%, rgba(4, 6, 10, .34) 24%, rgba(4, 6, 10, 0) 44%),
    linear-gradient(90deg, rgba(4, 6, 10, .6) 0%, rgba(4, 6, 10, .22) 36%, rgba(4, 6, 10, 0) 60%),
    linear-gradient(180deg, rgba(4, 6, 10, .46) 0%, rgba(4, 6, 10, 0) 18%);
}

/* ---------- the loader: the brand draws itself while the house loads (first visit of the session) ---------- */
.cargador { display: none; }
html.bloqueo-carga { overflow: hidden; }
html.is-cargando:not(.carga-fuera) main { position: relative; z-index: 70; }
/* (v14.3) once the loader lifts the header is no longer under the page: it fades in over the lifting loader */
/* the header waits under the loader and fades in with the page */
html.is-cargando:not(.carga-fuera) .site-header { opacity: 0; }
/* (v14.3) it starts to fade in as the loader lifts, with the page (it used to wait 1.3 s and come in after the title) */
html.js .site-header { transition: color .6s var(--ease), transform .6s var(--ease), opacity .9s var(--ease); }
html.is-cargando .cargador {
  position: fixed; inset: 0; z-index: 300; display: grid; place-content: center; justify-items: center; gap: 34px;
  background: radial-gradient(70% 60% at 50% 55%, #0B1018, #05070B 70%); color: #F6F7F9;
  clip-path: inset(0 0 0 0); transition: clip-path 1s cubic-bezier(.76, 0, .24, 1);
}
.cargador.is-fuera { clip-path: inset(0 0 100% 0) !important; }
.cargador__logo { width: min(300px, 62vw); }
.cargador__logo svg { display: block; width: 100%; height: auto; overflow: visible; }
.cargador__logo path {
  fill: rgba(246, 247, 249, 0); stroke: #F6F7F9; stroke-width: 5; stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: cargador-trazo 1.35s cubic-bezier(.55, 0, .2, 1) forwards, cargador-relleno .5s ease 1.2s forwards;
}
.cargador__pista { position: relative; width: min(180px, 40vw); height: 1px; background: rgba(246, 247, 249, .14); overflow: hidden; }
.cargador__barra { position: absolute; inset: 0; background: var(--warm); box-shadow: 0 0 12px var(--warm); transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--ease); }
@keyframes cargador-trazo { to { stroke-dashoffset: 0; } }
@keyframes cargador-relleno { to { fill: rgba(246, 247, 249, 1); stroke-width: 0; filter: drop-shadow(0 0 18px rgba(255, 203, 142, .35)); } }

/* ---------- layout of the text box: the copy, the chapters, the end (left) and the keypad (right) share one cell ---------- */
.hero--luz .hero__content { position: relative; grid-template-areas: none; grid-template-columns: minmax(0, 1fr); }
.hero--luz .hero__swap, .hero--luz .luz__capitulos, .hero--luz .luz__final { grid-row: 1; grid-column: 1; }
.hero--luz .teclado { grid-row: 1; grid-column: 1; justify-self: end; align-self: end; }
.hero--luz .hero__bar { grid-row: 2; }

/* the buttons of the arrival: a play triangle and a circular arrow, drawn */
.btn__play { width: 0; height: 0; border-style: solid; border-width: 5.5px 0 5.5px 9px; border-color: transparent transparent transparent currentColor; margin-right: 2px; }
.btn__repetir { position: relative; width: 14px; height: 14px; border: 1.6px solid currentColor; border-right-color: transparent; border-radius: 50%; }
.btn__repetir::after { content: ""; position: absolute; right: -3px; top: -1px; border-style: solid; border-width: 0 3.5px 4.5px 3.5px; border-color: transparent transparent currentColor transparent; transform: rotate(125deg); }

/* chapters and the end: one system each; the phrase rises line by line out of a mask */
.luz__capitulos, .luz__final { display: none; }
.luz__capitulos { list-style: none; margin: 0; padding: 0; }
.hero--luz.is-pasos .luz__capitulos { display: grid; align-self: end; pointer-events: none; }
.luz__cap { grid-area: 1 / 1; display: grid; gap: 16px; align-content: end; justify-items: start; opacity: 0; visibility: hidden; max-width: min(46rem, 58vw); }
.luz__cap .btn, .luz__escuchar { pointer-events: auto; }
.luz__cap .btn { margin-top: 8px; }
.hero--luz.is-pasos .luz__final { display: grid; gap: 16px; align-self: end; align-content: end; justify-items: start; opacity: 0; visibility: hidden; max-width: min(46rem, 58vw); }
.luz__final-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.luz__servicio {
  display: inline-flex; align-items: center; gap: 14px; margin: 0;
  font-size: .8125rem; font-weight: 500; font-stretch: 112%; letter-spacing: .18em; text-transform: uppercase; color: var(--warm);
}
.luz__n { font-weight: 400; letter-spacing: .06em; color: rgba(246, 247, 249, .56); }
.luz__n::after { content: ""; display: inline-block; width: 26px; height: 1px; margin-left: 14px; vertical-align: middle; background: rgba(246, 247, 249, .35); }
.luz__frase {
  margin: 0; font-family: var(--font-display); font-size: clamp(2.2rem, 1rem + 3.3vw, 4.5rem); font-weight: 270; font-stretch: 122%;
  line-height: 1.04; letter-spacing: -.045em; color: #F6F7F9; max-width: 14ch; text-wrap: balance;
  text-shadow: 0 2px 30px rgba(4, 6, 10, .45);
}
.luz__final .luz__frase { max-width: 16ch; }
.luz__linea { will-change: transform, opacity; }
.luz__detalle { margin: 0; max-width: 40ch; text-wrap: pretty; font-size: clamp(.9375rem, .88rem + .25vw, 1.0625rem); line-height: 1.55; color: rgba(246, 247, 249, .78); }

/* "listen to the terrace": the only way a browser lets music start is a press */
.luz__escuchar {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 4px; padding: 0 18px 0 14px; border-radius: 999px;
  border: 1px solid rgba(246, 247, 249, .32); background: rgba(8, 10, 14, .38); color: #F6F7F9; font: inherit; font-size: .9375rem; cursor: pointer;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: border-color .3s, background-color .3s;
}
.luz__escuchar:hover { border-color: rgba(246, 247, 249, .8); }
.luz__escuchar .eq { display: inline-flex; align-items: flex-end; gap: 2px; width: 14px; height: 12px; }
.luz__escuchar .eq i { flex: 1; height: 45%; background: currentColor; border-radius: 1px; }
.luz__escuchar .eq i:nth-child(2) { height: 90%; }
.luz__escuchar .eq i:nth-child(3) { height: 62%; }
.luz__escuchar[aria-pressed="true"] { border-color: rgba(255, 203, 142, .7); background: rgba(255, 203, 142, .12); }
.luz__escuchar[aria-pressed="true"] .eq i { animation: luz-eq .9s ease-in-out infinite alternate; }
.luz__escuchar[aria-pressed="true"] .eq i:nth-child(2) { animation-delay: -.3s; }
.luz__escuchar[aria-pressed="true"] .eq i:nth-child(3) { animation-delay: -.6s; }
.luz__escuchar-on, .luz__escuchar[aria-pressed="true"] .luz__escuchar-off { display: none; }
/* in the audio and video chapters, while the music is off, the invitation to listen grows and breathes */
.hero--luz.pide-sonido .luz__escuchar[aria-pressed="false"] { background: #F6F7F9; color: #07090D; border-color: #F6F7F9; font-weight: 500; transform: scale(1.08); transform-origin: 0 50%; box-shadow: 0 0 0 0 rgba(255, 203, 142, .55); animation: pide-sonido 2s ease-out infinite; }
.hero--luz.pide-sonido .hero__controls .chip-btn[aria-pressed="false"] { background: rgba(246, 247, 249, .92); color: #07090D; border-color: #F6F7F9; animation: pide-sonido 2s ease-out infinite; }
@keyframes pide-sonido { 0% { box-shadow: 0 0 0 0 rgba(255, 203, 142, .55); } 70% { box-shadow: 0 0 0 14px rgba(255, 203, 142, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 203, 142, 0); } }
@media (prefers-reduced-motion: reduce) { .hero--luz.pide-sonido .luz__escuchar, .hero--luz.pide-sonido .hero__controls .chip-btn, .riel.is-ola .riel__linea::after { animation: none; } }
.luz__escuchar[aria-pressed="true"] .luz__escuchar-on { display: inline; }
@keyframes luz-eq { from { height: 25%; } to { height: 100%; } }

/* ---------- callouts pinned to the scene: a point with a halo, a thin line and a label ---------- */
.llamadas { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero--luz:not(.is-pasos) .llamadas { display: none; }
.llamada {
  /* (v13.1) placed by luz.js with a transform from the corner of the stage: it glides with the camera, no layout */
  position: absolute; left: 0; top: 0; margin: 0; width: 0; height: 0; opacity: 0; visibility: hidden; will-change: transform, opacity;
  color: #F6F7F9; font-size: .8125rem; font-stretch: 106%; line-height: 1.3; white-space: nowrap;
}
.llamada__punto { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: #FFF6EA; box-shadow: 0 0 0 4px rgba(255, 203, 142, .28), 0 0 18px rgba(255, 203, 142, .9); }
.llamada__punto::after {
  content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 1px solid rgba(255, 220, 180, .7); opacity: 0;
}
/* the halo pulses a few times each time its callout appears, then rests (nothing loops for ever) */
.llamada.is-vista .llamada__punto::after { animation: llamada-halo 2.4s cubic-bezier(.2, .6, .3, 1) 4; }
@keyframes llamada-halo { from { transform: scale(.4); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }
/* the label hangs up and to the right of its point; luz.js moves it to the side where it covers no text */
.llamada__txt {
  position: absolute; left: 22px; bottom: 22px; display: grid; gap: 2px; padding: 9px 13px 10px; border-radius: 12px;
  background: rgba(8, 10, 14, .5); border: 1px solid rgba(246, 247, 249, .16);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  color: rgba(246, 247, 249, .72);
}
.llamada__txt b { display: inline-block; font-weight: 500; font-size: .9375rem; color: #F6F7F9; font-variant-numeric: tabular-nums; }
.llamada::before {
  /* the leader line from the point to the label */
  content: ""; position: absolute; left: 4px; bottom: 4px; width: 22px; height: 1px; background: rgba(246, 247, 249, .55);
  transform-origin: 0 50%; transform: rotate(-45deg) scaleX(1.02);
}
.llamada.is-izq .llamada__txt { left: auto; right: 22px; text-align: right; }
.llamada.is-izq::before { left: auto; right: 4px; transform-origin: 100% 50%; transform: rotate(45deg); }
.llamada.is-abajo .llamada__txt { bottom: auto; top: 22px; }
.llamada.is-abajo::before { bottom: auto; top: 4px; transform: rotate(45deg); }
.llamada.is-abajo.is-izq::before { transform: rotate(-45deg); }
.llamada.sin-txt .llamada__txt, .llamada.sin-txt::before { visibility: hidden; }

/* the first time: the light follows the cursor (or the finger) */
.luz__pista {
  position: absolute; left: 72%; top: min(21%, calc(var(--header-h) + 5vh)); z-index: 2; display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 9px 16px 9px 12px;
  border-radius: 999px; background: rgba(8, 10, 14, .46); border: 1px solid rgba(246, 247, 249, .16); color: #F6F7F9;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); font-size: .875rem; white-space: nowrap; pointer-events: none;
  opacity: 0; visibility: hidden; transform: translate(-50%, 8px); transition: opacity .6s ease, transform .6s var(--ease), visibility 0s linear .6s;
}
.luz__pista.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .6s ease, transform .6s var(--ease), visibility 0s; }
.hero--luz:not(.en-intro) .luz__pista { opacity: 0; visibility: hidden; }
.luz__pista-punto { position: relative; width: 10px; height: 10px; border-radius: 50%; background: #FFF6EA; box-shadow: 0 0 14px rgba(255, 203, 142, .9); }
.luz__pista-punto::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 1px solid rgba(255, 220, 180, .7); animation: llamada-halo 2.2s cubic-bezier(.2, .6, .3, 1) 3; }
[data-pista-dedo] { display: none; }
@media (hover: none), (pointer: coarse) {
  [data-pista-raton] { display: none; }
  [data-pista-dedo] { display: inline; }
}

/* ---------- the wall keypad ---------- */
.teclado {
  width: 312px; padding: 14px; border-radius: 20px; color: #F6F7F9;
  background: linear-gradient(180deg, rgba(20, 24, 32, .72), rgba(8, 10, 14, .72));
  border: 1px solid rgba(246, 247, 249, .14);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 30px 60px -30px rgba(0, 0, 0, .7);
  -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
  opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .5s ease, transform .6s var(--ease), visibility 0s linear .6s;
}
.teclado.is-visible { opacity: 1; visibility: visible; transform: none; transition: opacity .5s ease .1s, transform .6s var(--ease) .1s, visibility 0s; }
html:not(.js) .teclado { display: none; }
/* the little screen on top of the keypad */
.teclado__pantalla {
  position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 10px; row-gap: 8px;
  padding: 12px 14px 12px; margin-bottom: 12px; border-radius: 12px; background: rgba(0, 0, 0, .42); border: 1px solid rgba(246, 247, 249, .07);
  min-height: 70px;
}
.teclado__led { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 203, 142, .25); transition: background-color .3s, box-shadow .3s; }
.teclado.is-activo .teclado__led { background: var(--warm); box-shadow: 0 0 12px var(--warm-glow); }
.teclado__lugar { font-size: .75rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: rgba(246, 247, 249, .72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.teclado__valor { font-size: 1.1875rem; font-weight: 300; font-stretch: 112%; font-variant-numeric: tabular-nums; color: #F6F7F9; white-space: nowrap; }
.teclado__pista { grid-column: 1 / -1; display: block; height: 3px; border-radius: 3px; background: rgba(246, 247, 249, .12); overflow: hidden; }
.teclado__barra { display: block; height: 100%; background: linear-gradient(90deg, #FFB870, var(--warm)); transform: scaleX(0); transform-origin: 0 50%; transition: transform .25s linear; }
.teclado__eq { position: absolute; right: 14px; bottom: 9px; display: none; align-items: flex-end; gap: 3px; height: 16px; }
.teclado__eq i { width: 3px; height: 100%; border-radius: 1px; background: var(--warm); transform-origin: 50% 100%; transform: scaleY(.12); }
.teclado.is-musica .teclado__eq { display: flex; }
.teclado.is-musica .teclado__pista { visibility: hidden; }
/* the keys: engraved, with an LED each; always live */
.teclado__teclas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tecla {
  position: relative; display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 14px; border-radius: 12px; cursor: pointer;
  font: inherit; font-size: .875rem; font-weight: 500; letter-spacing: .02em; text-align: left; color: rgba(246, 247, 249, .78);
  background: linear-gradient(180deg, rgba(246, 247, 249, .07), rgba(246, 247, 249, .03));
  border: 1px solid rgba(246, 247, 249, .1); box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset;
  transition: color .3s ease, background-color .3s ease, border-color .3s ease;
  -webkit-tap-highlight-color: transparent;
}
.tecla__led { width: 6px; height: 6px; flex: none; border-radius: 50%; background: rgba(246, 247, 249, .18); transition: background-color .35s ease, box-shadow .35s ease; }
.tecla.is-on { color: #F6F7F9; border-color: rgba(255, 203, 142, .28); }
.tecla.is-on .tecla__led { background: var(--warm); box-shadow: 0 0 10px var(--warm-glow); }
.tecla.is-pulso { border-color: rgba(246, 247, 249, .5); }
.tecla.is-pulso .tecla__led { background: var(--led); box-shadow: 0 0 0 4px var(--led-soft), 0 0 12px var(--led); }
.tecla:hover { color: #F6F7F9; border-color: rgba(246, 247, 249, .34); background: linear-gradient(180deg, rgba(246, 247, 249, .11), rgba(246, 247, 249, .05)); }
.tecla:focus-visible { outline: 2px solid var(--led); outline-offset: 2px; }
.teclado__ayuda { margin: 12px 2px 0; font-size: .8125rem; color: rgba(246, 247, 249, .6); }
/* (v14.2, Gabriel 01/10: "todo el tablero tapa el jardín") the keys fold away under the little screen while the story
   is in the garden, which lives right behind the keypad on wide screens; the screen keeps telling the story (Jardín 100 %)
   and the keys open again with the pointer, a tap on the screen or the keyboard (focus) */
.teclado__cuerpo { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .75s var(--ease), opacity .5s ease .15s; }
.teclado__dentro { min-height: 0; overflow: hidden; padding: 4px; margin: -4px; }
.teclado__pantalla { transition: margin-bottom .75s var(--ease), border-color .3s ease; }
@media (min-width: 721px) {
  .teclado.is-plegado:not(.is-abierto):not(:focus-within):not(:hover) .teclado__cuerpo { grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .75s var(--ease) .1s, opacity .35s ease; }
  .teclado.is-plegado:not(.is-abierto):not(:focus-within):not(:hover) .teclado__pantalla { margin-bottom: 0; transition-delay: .1s; }
  .teclado.is-plegado .teclado__pantalla { cursor: pointer; }
  /* (a pointer that only crosses it does not open it) */
  .teclado.is-plegado:hover .teclado__cuerpo { transition-delay: .14s, .3s; }
  .teclado.is-plegado:hover .teclado__pantalla { transition-delay: .14s, 0s; border-color: rgba(246, 247, 249, .16); }
}

/* no tour (reduced motion, previews that grow to the page height): the lit house, the keypad live */
.hero--luz.is-quieta .teclado { opacity: 1; visibility: visible; transform: none; }
@media (max-width: 1100px) {
  /* there the keypad never shares the place of the copy: it goes under it, before the bar */
  .hero--luz.is-quieta .hero__content { grid-template-rows: auto auto auto; }
  .hero--luz.is-quieta .teclado { position: static; grid-row: 2; justify-self: start; align-self: start; width: min(100%, 420px); }
  .hero--luz.is-quieta .hero__bar { grid-row: 3; }
}

/* ---------- the bottom bar: places and the hint to go down at the arrival, then the rail and the step buttons ---------- */
.hero--luz .hero__bar { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px 28px; min-height: 48px; }
.hero--luz .hero__places, .hero--luz .riel { grid-row: 1; grid-column: 1; }
.hero--luz .hero__controls { grid-row: 1; grid-column: 2; margin-left: 0; align-items: center; gap: 16px; }

/* (v13.2) how to go through the tour, at the arrival: a card with the gesture drawn (a mouse whose wheel ticks once and
   an arrow; on touch screens a phone whose chapter goes from 01 to 02 under a finger that slides up once) */
.guia-gesto {
  position: absolute; right: var(--gutter); bottom: calc(var(--luz-barra, 110px) + 24px); z-index: 2; display: flex; align-items: center; gap: 16px; margin: 0;
  width: max-content; max-width: min(400px, calc(100vw - 32px)); padding: 14px 20px 14px 16px; box-sizing: border-box;
  border-radius: 18px; background: rgba(8, 10, 14, .5); border: 1px solid rgba(246, 247, 249, .16); color: #F6F7F9;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); pointer-events: none;
  opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .6s ease, transform .6s var(--ease), visibility 0s linear .6s;
}
.guia-gesto.is-visible { opacity: 1; visibility: visible; transform: none; transition: opacity .6s ease, transform .6s var(--ease), visibility 0s; }
.hero--luz:not(.en-intro) .guia-gesto, .hero--luz.is-auto .guia-gesto { opacity: 0; visibility: hidden; transform: translateY(10px); }
.guia-gesto__txt { display: grid; gap: 3px; margin: 0; min-width: 0; font-size: .875rem; line-height: 1.35; color: rgba(246, 247, 249, .8); }
.guia-gesto__txt strong { font-size: 1rem; font-weight: 500; color: #F6F7F9; letter-spacing: -.005em; }
.guia-gesto__txt [data-guia-dedo] { display: none; }
.guia-gesto__dibujo { position: relative; flex: none; width: 40px; height: 58px; }
/* the mouse: its wheel glows and ticks down one notch, then an arrow goes down */
.guia-gesto__raton { position: absolute; left: 7px; top: 0; width: 26px; height: 40px; border: 1.5px solid rgba(246, 247, 249, .85); border-radius: 13px; box-sizing: border-box; }
.guia-gesto__raton::before { content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 12px; margin-left: -.5px; background: rgba(246, 247, 249, .35); }
.guia-gesto__rueda { position: absolute; left: 50%; top: 6px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: #FFCB8E; box-shadow: 0 0 8px rgba(255, 203, 142, .85); animation: gg-rueda 2.8s cubic-bezier(.45, 0, .2, 1) infinite; }
.guia-gesto__flecha { position: absolute; left: 50%; top: 44px; width: 8px; height: 8px; margin-left: -4px; border-right: 1.5px solid #FFCB8E; border-bottom: 1.5px solid #FFCB8E; opacity: 0; transform: translateY(-3px) rotate(45deg); animation: gg-flecha 2.8s ease infinite; }
@keyframes gg-rueda { 0%, 22% { transform: translateY(0); opacity: 1; } 30% { transform: translateY(6px); opacity: 1; } 40% { transform: translateY(6px); opacity: .35; } 52%, 100% { transform: translateY(0); opacity: 1; } }
@keyframes gg-flecha { 0%, 28% { opacity: 0; transform: translateY(-3px) rotate(45deg); } 38% { opacity: 1; } 60%, 100% { opacity: 0; transform: translateY(5px) rotate(45deg); } }
/* the phone: one swipe of the finger and the chapter goes from 01 to 02 */
.guia-gesto__tel { display: none; position: absolute; left: 6px; top: 0; width: 28px; height: 50px; border: 1.5px solid rgba(246, 247, 249, .85); border-radius: 7px; box-sizing: border-box; overflow: hidden; }
.guia-gesto__paginas { position: absolute; left: 0; right: 0; top: 0; display: grid; animation: gg-pagina 2.8s cubic-bezier(.45, 0, .2, 1) infinite; }
.guia-gesto__paginas b { display: grid; place-items: center; height: 47px; font-size: .6875rem; font-weight: 500; letter-spacing: .04em; color: #FFCB8E; font-variant-numeric: tabular-nums; }
.guia-gesto__dedo { display: none; position: absolute; left: 13px; top: 30px; width: 14px; height: 14px; border-radius: 50%; background: rgba(246, 247, 249, .92); box-shadow: 0 0 12px rgba(255, 203, 142, .8); opacity: 0; animation: gg-dedo 2.8s cubic-bezier(.45, 0, .2, 1) infinite; }
@keyframes gg-dedo { 0%, 8% { opacity: 0; transform: translateY(6px) scale(.8); } 16% { opacity: 1; transform: translateY(6px) scale(1); } 40% { opacity: 1; transform: translateY(-16px) scale(1); } 50%, 100% { opacity: 0; transform: translateY(-16px) scale(.9); } }
@keyframes gg-pagina { 0%, 18% { transform: translateY(0); opacity: 1; } 42%, 84% { transform: translateY(-47px); opacity: 1; } 92% { transform: translateY(-47px); opacity: 0; } 93% { transform: translateY(0); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
@media (hover: none), (pointer: coarse) {
  .guia-gesto__txt [data-guia-raton], .guia-gesto__raton, .guia-gesto__flecha { display: none; }
  .guia-gesto__txt [data-guia-dedo] { display: block; }
  .guia-gesto__tel, .guia-gesto__dedo { display: block; }
}
/* upright tablets and phones: the copy fills the width, so the card sits above it, under the header (on a phone the
   light hint waits, they would share the place); very short screens sideways have no room for it */
@media (max-width: 900px) {
  .guia-gesto { left: 50%; right: auto; bottom: auto; top: calc(var(--header-h) + 16px); transform: translate(-50%, 10px); }
  .guia-gesto.is-visible { transform: translate(-50%, 0); }
  .hero--luz:not(.en-intro) .guia-gesto, .hero--luz.is-auto .guia-gesto { transform: translate(-50%, 10px); }
}
@media (max-width: 720px) {
  .guia-gesto { gap: 14px; padding: 12px 16px 12px 12px; border-radius: 16px; }
  .guia-gesto__txt { font-size: .8125rem; }
  .guia-gesto__txt strong { font-size: .9375rem; }
}
@media (orientation: landscape) and (max-height: 480px) { .guia-gesto { display: none; } }
/* nobody moved after a while: the card glows a little */
.hero--luz.is-insiste .guia-gesto.is-visible { animation: gg-insiste 2.4s ease-in-out 3; }
@keyframes gg-insiste { 0%, 100% { box-shadow: 0 0 0 rgba(255, 203, 142, 0); border-color: rgba(246, 247, 249, .16); } 50% { box-shadow: 0 0 26px rgba(255, 203, 142, .35); border-color: rgba(255, 203, 142, .55); } }

/* the rail of chapters: where you are, a click away from any of them */
.riel { display: none; }
.hero--luz.is-pasos .riel { display: block; opacity: 0; visibility: hidden; justify-self: stretch; min-width: 0; }
.riel__lista { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.riel__lista li { min-width: 0; }
.riel__paso {
  display: grid; gap: 9px; width: 100%; padding: 6px 0; border: 0; background: none; color: rgba(246, 247, 249, .5); text-align: left; cursor: pointer;
  font: inherit; font-size: .75rem; font-weight: 500; font-stretch: 106%; letter-spacing: .04em; -webkit-tap-highlight-color: transparent;
  transition: color .4s ease;
}
.riel__linea { position: relative; display: block; height: 2px; border-radius: 2px; background: rgba(246, 247, 249, .16); overflow: hidden; }
.riel__linea i { position: absolute; inset: 0; background: linear-gradient(90deg, #FFB870, var(--warm)); transform: scaleX(0); transform-origin: 0 50%; }
.riel__nombre { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.riel__paso:hover, .riel__paso.is-actual { color: #F6F7F9; }
/* the chapters are buttons and look like it: a soft plate under the one the pointer is on */
.riel { position: relative; }
.riel__paso { border-radius: 8px; padding: 6px 8px; margin: 0 -8px; width: calc(100% + 16px); transition: color .4s ease, background-color .3s ease; }
.riel__paso:hover { background: rgba(246, 247, 249, .07); }
.riel__paso:hover .riel__linea { background: rgba(246, 247, 249, .34); }
/* the first time the rail shows, a light runs along it once, so it reads as something to touch */
.riel.is-ola .riel__linea::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 223, 184, .95), transparent); transform: translateX(-100%); animation: riel-ola .9s ease-in-out both; }
.riel.is-ola li:nth-child(2) .riel__linea::after { animation-delay: .12s; } .riel.is-ola li:nth-child(3) .riel__linea::after { animation-delay: .24s; }
.riel.is-ola li:nth-child(4) .riel__linea::after { animation-delay: .36s; } .riel.is-ola li:nth-child(5) .riel__linea::after { animation-delay: .48s; }
.riel.is-ola li:nth-child(6) .riel__linea::after { animation-delay: .6s; } .riel.is-ola li:nth-child(7) .riel__linea::after { animation-delay: .72s; }
@keyframes riel-ola { to { transform: translateX(100%); } }
.riel__pista {
  position: absolute; left: 0; bottom: calc(100% + 8px); margin: 0; padding: 6px 12px; border-radius: 999px; pointer-events: none;
  background: rgba(8, 10, 14, .72); border: 1px solid rgba(255, 203, 142, .45); color: #F6F7F9; font-size: .75rem; letter-spacing: .02em; white-space: nowrap;
  opacity: 0; transform: translateY(6px); transition: opacity .5s ease, transform .5s ease;
}
.riel__pista.is-visible { opacity: 1; transform: none; }
.riel__paso.is-actual .riel__linea i { box-shadow: 0 0 10px var(--warm); }
.riel__paso:focus-visible { outline: 2px solid var(--led); outline-offset: 3px; border-radius: 4px; }

/* the step buttons: play or pause, back, the chapter number and forward */
.paso-nav { display: none; }
.hero--luz.is-pasos .paso-nav { display: inline-flex; align-items: center; gap: 6px; opacity: 0; visibility: hidden; }
.paso-nav__btn {
  display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(246, 247, 249, .26); background: rgba(8, 10, 14, .3); color: #F6F7F9;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: border-color .3s ease, background-color .3s ease;
  -webkit-tap-highlight-color: transparent;
}
.paso-nav__btn:hover { border-color: rgba(246, 247, 249, .7); }
.paso-nav__btn:focus-visible { outline: 2px solid var(--led); outline-offset: 2px; }
.paso-nav__btn .icon { width: 17px; height: 17px; }
.paso-nav__cuenta { min-width: 64px; text-align: center; font-size: .8125rem; font-weight: 500; letter-spacing: .06em; color: rgba(246, 247, 249, .82); font-variant-numeric: tabular-nums; }
.paso-nav__auto { margin-right: 6px; }
.paso-nav__play { width: 0; height: 0; margin-left: 3px; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; }
.hero--luz.is-auto .paso-nav__auto { border-color: rgba(255, 203, 142, .6); background: rgba(255, 203, 142, .12); }
.hero--luz.is-auto .paso-nav__play { width: 10px; height: 12px; margin-left: 0; border: 0; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }

/* what shows when: the tour changes phase (en-intro, en-cap, is-final) and the bar follows. Hidden parts leave
   no room behind (display), and each one fades in when it comes back */
.hero--luz.is-pasos:not(.en-intro) .hero__places,
.hero--luz.is-pasos:not(.en-cap) .riel,
.hero--luz.is-pasos:not(.en-cap) .paso-nav,
.hero--luz.is-final .luz__saltar { display: none; }
.hero--luz.en-cap .riel, .hero--luz.en-cap .paso-nav { opacity: 1; visibility: visible; animation: luz-aparece .55s ease .1s both; }
.hero--luz.en-intro .hero__places { animation: luz-aparece .5s ease both; }
@keyframes luz-aparece { from { opacity: 0; } to { opacity: 1; } }

.luz__saltar { color: rgba(246, 247, 249, .74); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(246, 247, 249, .3); align-self: center; font-size: .875rem; }
.luz__saltar:hover { color: #F6F7F9; text-decoration-color: currentColor; }
.luz__nota { position: absolute; right: var(--gutter); bottom: 6px; margin: 0; font-size: .6875rem; letter-spacing: .02em; color: rgba(246, 247, 249, .46); }

/* ---------- tablets upright and small laptops: a slimmer keypad; the places give their room to the hint ---------- */
@media (max-width: 1100px) {
  .hero--luz.is-pasos .hero__places { display: none; }
  /* the rail keeps its seven lines; only the chapter on screen shows its name */
  .riel__paso:not(.is-actual) .riel__nombre { visibility: hidden; }
  /* a box without width: the name never widens its line, it just shows past it */
  .riel__paso .riel__nombre { width: 0; overflow: visible; }
}
/* (v14.2) small laptops: the seven names fit whole ("Automatización" was cut at 1280) */
@media (min-width: 1101px) and (max-width: 1440px) {
  .riel__paso { font-size: .6875rem; letter-spacing: .02em; font-stretch: 100%; }
}
@media (min-width: 1101px) and (max-width: 1179px) {
  .riel__paso:not(.is-actual) .riel__nombre { visibility: hidden; }
  .riel__paso .riel__nombre { width: 0; overflow: visible; }
}
@media (max-width: 1100px) and (min-width: 721px) {
  .teclado { width: 272px; padding: 12px; }
  .tecla { min-height: 42px; padding: 0 12px; font-size: .8125rem; }
  .luz__cap, .hero--luz.is-pasos .luz__final { max-width: min(40rem, 56vw); }
  .riel__nombre { font-size: .6875rem; }
}

/* ---------- phones: chapter on top over the sky, keypad at the bottom in two rows of four ---------- */
@media (max-width: 720px) {
  /* the keypad floats right above the bar, so at arrival (keypad hidden) the copy and the bar fit on screen */
  .hero--luz .teclado { position: absolute; left: 0; right: 0; bottom: calc(var(--luz-barra, 110px) + 10px); justify-self: stretch; width: auto; padding: 10px; border-radius: 18px; }
  /* the text box fills the screen: chapters on top over the sky, the copy and the end at the bottom */
  .hero--luz .hero__content { padding-block: calc(var(--header-h) + 2vh) clamp(14px, 3vh, 28px); min-height: 100%; grid-template-rows: minmax(0, 1fr) auto; }
  .scrollfx .hero--luz .hero__content { height: 100%; }
  .hero--luz .hero__actions .btn { height: 48px; padding: 0 22px; }
  .hero--luz.is-pasos .luz__capitulos { align-self: start; padding-top: 1vh; }
  .luz__cap { gap: 10px; align-content: start; max-width: none; }
  .hero--luz.is-pasos .luz__final { gap: 12px; max-width: none; }
  .luz__frase { max-width: 15ch; font-size: clamp(1.95rem, 1.2rem + 3.6vw, 2.7rem); }
  .luz__detalle { max-width: 34ch; font-size: .875rem; line-height: 1.5; }
  .luz__servicio { font-size: .75rem; gap: 10px; }
  .luz__n::after { width: 16px; margin-left: 10px; }
  .luz__final-acciones .btn { height: 48px; padding: 0 20px; }
  .teclado__pantalla { min-height: 0; padding: 9px 12px; margin-bottom: 8px; row-gap: 6px; }
  .teclado__valor { font-size: 1.0625rem; }
  .teclado__teclas { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .tecla { min-height: 44px; padding: 0 4px; flex-direction: column; justify-content: center; gap: 5px; font-size: .6875rem; letter-spacing: 0; text-align: center; }
  .teclado__ayuda { display: none; }
  .luz__escuchar { font-size: .875rem; }
  .luz__nota { bottom: 4px; }
  .hero--luz .hero__bar { gap: 10px 12px; }
  .hero--luz .hero__controls { gap: 10px; }
  /* at the arrival the hint gets the room: "Saltar" shows once the tour runs */
  .hero--luz.en-intro .luz__saltar { display: none; }
  .hero--luz.is-pasos .riel { display: none; }
  .hero--luz.en-cap .hero__controls { grid-column: 1 / -1; justify-content: space-between; }
  .hero--luz.en-cap .hero__controls .chip-btn { display: none; }
  .paso-nav { gap: 4px; }
  .paso-nav__btn { width: 38px; height: 38px; }
  .paso-nav__cuenta { min-width: 52px; font-size: .75rem; }
  .paso-nav__auto { margin-right: 2px; }
  .luz__pista { left: 50%; top: 17%; font-size: .8125rem; }
  .llamada__txt { padding: 7px 10px 8px; font-size: .75rem; }
  .llamada__txt b { font-size: .8125rem; }
}
/* very narrow phones: slimmer step buttons */
@media (max-width: 360px) {
  .paso-nav__btn { width: 36px; height: 36px; }
  .paso-nav__cuenta { min-width: 46px; }
}
@media (max-width: 720px) and (max-height: 700px) {
  .hero--luz .hero__lead { display: none; }
  .luz__detalle { display: none; }
  .tecla { min-height: 38px; }
  .teclado__pantalla { padding: 7px 10px; }
}
/* phones turned sideways and other short screens: smaller type, keypad in one compact block */
@media (min-width: 721px) and (max-height: 560px) {
  .luz__frase { font-size: clamp(1.6rem, 1rem + 4.6svh, 2.6rem); max-width: 16ch; }
  .luz__detalle { display: none; }
  .luz__cap, .hero--luz.is-pasos .luz__final { gap: 8px; }
  .luz__cap .btn { margin-top: 4px; }
  .teclado { width: 330px; padding: 8px; }
  .teclado__pantalla { min-height: 0; padding: 6px 10px; margin-bottom: 6px; }
  .teclado__valor { font-size: 1rem; }
  .teclado__teclas { grid-template-columns: repeat(4, 1fr); gap: 5px; }
  .tecla { min-height: 32px; padding: 0 6px; gap: 6px; font-size: .6875rem; }
  .teclado__ayuda { display: none; }
  .llamada { display: none; }
  .paso-nav__btn { width: 34px; height: 34px; }
}
/* short screens sideways: the note moves up, clear of the bar */
@media (orientation: landscape) and (max-height: 480px) {
  .luz__nota { bottom: auto; top: calc(var(--header-h) + 2px); }
}
/* small phones turned sideways (720 px wide or less): chapter at the bottom left, compact keypad at the right,
   side by side as on a computer, so the keypad never covers the phrase */
@media (max-width: 720px) and (orientation: landscape) and (max-height: 480px) {
  .hero--luz .teclado { position: static; grid-row: 1; grid-column: 1; justify-self: end; align-self: end; width: min(300px, 47vw); padding: 7px; border-radius: 14px; }
  .hero--luz .hero__content { padding-block: calc(var(--header-h) + 6px) 8px; }
  .hero--luz.is-pasos .luz__capitulos { align-self: end; padding-top: 0; max-width: 49%; }
  .luz__cap { align-content: end; gap: 6px; }
  .luz__servicio { font-size: .6875rem; }
  .luz__frase { font-size: clamp(1.3rem, .9rem + 4svh, 1.85rem); max-width: 13ch; }
  .luz__escuchar { min-height: 36px; font-size: .8125rem; }
  .hero--luz .hero__lead { display: none; }
  .teclado__pantalla { padding: 5px 9px; margin-bottom: 5px; row-gap: 4px; }
  .teclado__lugar { font-size: .6875rem; }
  .teclado__valor { font-size: .9375rem; }
  .teclado__teclas { grid-template-columns: repeat(4, 1fr); gap: 4px; }
  .tecla { min-height: 30px; padding: 0 4px; flex-direction: row; justify-content: center; gap: 4px; font-size: .625rem; }
  .llamada { display: none; }
}
/* ---------- the end (v13, opción C): the welcome scene on a phone. The screen is a sample drawn by us, with no brand
   and no maker's shape (no notch, no logo). The phone stands upright and nothing in it is turned or scaled at rest, so
   its letters render sharp. ---------- */
.luz__sombra {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
  background:
    radial-gradient(28% 50% at 79% 50%, rgba(5, 7, 11, .5), rgba(5, 7, 11, 0) 72%),
    linear-gradient(90deg, rgba(5, 7, 11, .8) 0%, rgba(5, 7, 11, .56) 30%, rgba(5, 7, 11, .16) 58%, rgba(5, 7, 11, .1) 100%);
}
/* (v14.3, el tirón del final) the phone, its shade and the veil move or fade every frame of the last step: each one on
   its own layer, so the browser only moves it and does not paint the phone's shadows and gradients again each frame */
.hero--luz.is-pasos .movil { will-change: transform; }
.hero--luz.is-pasos .luz__sombra, .hero--luz.is-pasos .hero__veil { will-change: opacity; }
.luz__nota-app { display: none; }
.hero--luz.is-final .luz__nota-app { display: inline; }
/* its place on wide screens: on the right, centred between the header and the bar (measured from the bottom, where the
   text box ends with the cover) */
.hero--luz {
  --movil-h: min(600px, 64svh, calc(100svh - var(--header-h) - var(--luz-barra, 110px) - 56px));
  --movil-y: calc(var(--luz-barra, 110px) + (100svh - var(--header-h) - var(--luz-barra, 110px) - var(--movil-h)) / 2);
  --movil-x: clamp(0px, 6vw - 24px, 110px);
}
.movil { display: none; }
.hero--luz.is-pasos .movil {
  display: block; position: absolute; z-index: 1; right: var(--movil-x); bottom: var(--movil-y);
  height: var(--movil-h); aspect-ratio: 9 / 19.5; container: telefono / size;
}
/* the body: a thin metal frame with its light on the edges, three side keys, the black glass and the screen */
.movil__cuerpo {
  position: absolute; inset: 0; border-radius: 15.5cqw; padding: 2.4cqw;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 4%, rgba(255, 255, 255, 0) 96%, rgba(255, 255, 255, .09)),
    linear-gradient(160deg, #697182 0%, #2e333e 7%, #171a21 22%, #0d0f14 50%, #1a1e26 78%, #3b414d 93%, #646c7c 100%);
  box-shadow:
    inset 0 0 0 .3cqw rgba(255, 255, 255, .14),
    inset 0 .5cqw .8cqw rgba(255, 255, 255, .12),
    0 0 0 1px rgba(0, 0, 0, .6),
    0 5cqw 10cqw -3cqw rgba(0, 0, 0, .6),
    0 18cqw 34cqw -12cqw rgba(0, 0, 0, .85),
    0 0 46cqw -8cqw rgba(255, 196, 140, .2);
}
/* the side keys, both on the right edge: a long volume key and the power key */
.movil__lado { position: absolute; right: -1.1cqw; width: 1.5cqw; border-radius: 1cqw; background: linear-gradient(270deg, #1b1f27, #5c6473 48%, #2a2f39); }
.movil__lado--vol { top: 21%; height: 13%; }
.movil__lado--enc { top: 38%; height: 7%; }
.movil__vidrio { position: relative; height: 100%; border-radius: 13.1cqw; padding: 2.2cqw; background: #020304; box-shadow: inset 0 0 0 .3cqw rgba(255, 255, 255, .05); }
.movil__pantalla {
  position: relative; height: 100%; border-radius: 10.9cqw; overflow: hidden; container: pantalla / size;
  background: radial-gradient(150% 64% at 50% -6%, #1D2B48 0%, #0E1526 48%, #080B12 100%);
}
/* a faint reflection on the glass, over the top left corner only */
.movil__pantalla::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(118deg, rgba(255, 255, 255, .075) 0%, rgba(255, 255, 255, .02) 22%, rgba(255, 255, 255, 0) 36%);
}

/* the sample app */
.app {
  position: absolute; inset: 0; display: flex; flex-direction: column; padding: 2.6cqh 7cqw 7cqw;
  color: #F2F4F7; font-family: var(--font); font-stretch: 100%; line-height: 1.25; word-spacing: .04em; text-align: left;
}
.app p { margin: 0; }
.app__sup { position: relative; display: flex; align-items: center; height: 6cqw; padding-inline: 1.5cqw; }
.app__hora { font-size: 4.9cqw; font-weight: 600; letter-spacing: .01em; }
.app__camara {
  position: absolute; left: 50%; top: 50%; width: 3.8cqw; aspect-ratio: 1; margin-left: -1.9cqw; margin-top: -1.9cqw;
  border-radius: 50%; background: #000; box-shadow: inset 0 0 0 .5cqw #0b0e14, 0 0 0 .4cqw rgba(255, 255, 255, .03);
}

.app__cab { display: grid; gap: 1.1cqh; margin-top: 5.6cqh; }
.app__hola { font-size: 5.2cqw; color: rgba(242, 244, 247, .64); }
.app__titulo { font-size: 12.6cqw; font-weight: 300; font-stretch: 104%; letter-spacing: -.025em; line-height: 1.04; color: #fff; }
.app__estado { display: flex; align-items: center; gap: 2cqw; font-size: 4.8cqw; color: rgba(242, 244, 247, .82); }
.app__punto { flex: none; width: 2.2cqw; aspect-ratio: 1; border-radius: 50%; background: #5CFFB0; box-shadow: 0 0 2.6cqw rgba(92, 255, 176, .8); transition: background-color .4s ease, box-shadow .4s ease; }
.movil.is-apagada .app__punto { background: rgba(242, 244, 247, .32); box-shadow: none; }

.app__luz, .app__dato, .app__escena { border-radius: 5.2cqw; background: rgba(255, 255, 255, .055); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .075); }
.app__luz { display: grid; gap: 2.6cqw; margin-top: 4.2cqh; padding: 4cqw 4.6cqw 4.4cqw; }
.app__fila { display: flex; align-items: baseline; justify-content: space-between; gap: 2cqw; font-size: 4.6cqw; color: rgba(242, 244, 247, .72); }
.app__fila b { font-weight: 500; color: #fff; }
.app__pista { display: block; height: 1.5cqw; border-radius: 2cqw; background: rgba(255, 255, 255, .12); overflow: hidden; }
.app__pista i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #FFB870, var(--warm)); transform-origin: 0 50%; transform: scaleX(var(--luz, 1)); transition: transform .8s var(--ease); }
.app__datos { display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; margin-top: 1.6cqh; }
.app__dato { display: grid; gap: .9cqw; padding: 3.4cqw 4.4cqw 3.6cqw; }
.app__dato small { font-size: 4.2cqw; color: rgba(242, 244, 247, .6); }
.app__dato b { font-size: 5.6cqw; font-weight: 500; color: #fff; white-space: nowrap; }
.app__seccion { margin: auto 0 1.4cqh !important; padding: 3.6cqh 0 0 .6cqw; font-size: 4.6cqw; font-weight: 600; color: rgba(242, 244, 247, .74); }
.app__escenas { display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; }
.app__escena {
  position: relative; display: grid; align-content: space-between; justify-items: start; gap: 2.4cqw; min-height: 21cqw; padding: 3.6cqw 4cqw 3.4cqw;
  border: 0; color: rgba(242, 244, 247, .8); font: inherit; font-size: 4.6cqw; font-weight: 500; line-height: 1.15; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .45s ease, background-color .35s ease, box-shadow .35s ease, color .35s ease;
}
.app__escena .icon { width: 10cqw; height: 10cqw; color: rgba(242, 244, 247, .72); transition: color .35s ease; }
.app__led { position: absolute; top: 3.8cqw; right: 3.8cqw; width: 1.9cqw; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .22); transition: background-color .35s ease, box-shadow .35s ease; }
.app__escena:hover { background: rgba(255, 255, 255, .1); }
.app__escena:focus-visible { outline: 2px solid var(--led); outline-offset: 1px; }
.app__escena[aria-pressed="true"] { color: #fff; background: linear-gradient(160deg, rgba(255, 203, 142, .26), rgba(255, 203, 142, .1)); box-shadow: inset 0 0 0 1px rgba(255, 203, 142, .5); }
.app__escena[aria-pressed="true"] .icon { color: var(--warm); }
.app__escena[aria-pressed="true"] .app__led { background: var(--warm); box-shadow: 0 0 2.4cqw var(--warm); }
.movil__ayuda { position: absolute; left: 50%; top: calc(100% + 16px); width: max-content; max-width: 150%; margin: 0; transform: translateX(-50%); font-size: .8125rem; color: rgba(246, 247, 249, .62); text-align: center; }

/* the screen wakes up when the phone arrives: the greeting rises, then the scenes light up one by one */
.app__cab > *, .app__luz, .app__datos, .app__seccion { opacity: 0; transform: translate3d(0, 1.4cqh, 0); transition: opacity .5s ease, transform .7s var(--ease); }
.movil.is-viva .app__cab > *, .movil.is-viva .app__luz, .movil.is-viva .app__datos, .movil.is-viva .app__seccion { opacity: 1; transform: none; }
.movil.is-entrando .app__hola { transition-delay: .1s; }
.movil.is-entrando .app__titulo { transition-delay: .18s; }
.movil.is-entrando .app__estado { transition-delay: .26s; }
.movil.is-entrando .app__luz { transition-delay: .34s; }
.movil.is-entrando .app__datos { transition-delay: .42s; }
.movil.is-entrando .app__seccion { transition-delay: .5s; }
.app__escena { opacity: .3; }
.movil.is-viva .app__escena { opacity: 1; }
.movil.is-entrando .app__escena { transition-delay: calc(.6s + var(--i) * .1s), 1.35s, 1.35s, 1.35s; }
.movil.is-entrando .app__escena .icon, .movil.is-entrando .app__led { transition-delay: 1.35s; }
.movil:not(.is-viva) .app__escena[aria-pressed="true"] { color: rgba(242, 244, 247, .8); background: rgba(255, 255, 255, .055); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .075); }
.movil:not(.is-viva) .app__escena[aria-pressed="true"] .icon { color: rgba(242, 244, 247, .72); }
.movil:not(.is-viva) .app__escena[aria-pressed="true"] .app__led { background: rgba(255, 255, 255, .22); box-shadow: none; }
.movil:not(.is-viva) .app__pista i { transform: scaleX(0); }
.movil.is-entrando .app__pista i { transition: transform 1.1s var(--ease) .5s; }
/* the whole app is drawn in units of its screen (cqw, cqh): on a small phone it is the same design, smaller */

/* phones upright: the phone above the words, centred, as tall as the room left above them */
@media (max-width: 720px) {
  .luz__sombra {
    background:
      radial-gradient(60% 34% at 50% 34%, rgba(5, 7, 11, .45), rgba(5, 7, 11, 0) 72%),
      linear-gradient(0deg, rgba(5, 7, 11, .9) 0%, rgba(5, 7, 11, .72) 34%, rgba(5, 7, 11, .28) 60%, rgba(5, 7, 11, .38) 100%);
  }
  .hero--luz.is-pasos .luz__final { align-self: stretch; grid-template-rows: minmax(0, 1fr); align-content: stretch; }
  .movil__ayuda { display: none; }
  .hero--luz.is-pasos .movil { position: relative; inset: auto; order: -1; justify-self: center; height: 100%; max-height: 560px; min-height: 0; margin-bottom: 6px; }
  /* the end gives the phone the room: the line under the title goes, the title runs wider and a little smaller */
  .hero--luz.is-pasos .luz__final { gap: 10px; }
  .hero--luz.is-pasos .luz__final .luz__detalle { display: none; }
  .hero--luz.is-pasos .luz__final .luz__frase { max-width: none; font-size: clamp(1.5rem, .85rem + 3.4vw, 2.1rem); }
  .hero--luz.is-pasos .luz__final-acciones { margin-top: 4px; }
}
/* phones turned sideways and very short phones: no room for it (the words and the bar keep the screen) */
@media (max-width: 720px) and (max-height: 659px), (orientation: landscape) and (max-height: 480px) {
  .hero--luz.is-pasos .movil, .hero--luz.is-final .luz__nota-app { display: none; }
  .hero--luz.is-pasos .luz__final { align-self: end; grid-template-rows: none; align-content: end; }
}
@media (prefers-reduced-motion: reduce) {
  .app__cab > *, .app__luz, .app__datos, .app__seccion { transform: none; }
  .movil.is-entrando .app__escena { transition-delay: 0s; }
}

@media (prefers-reduced-motion: reduce) {
  .luz__lienzo, .teclado, .tecla, .tecla__led, .teclado__led, .teclado__ayuda, .luz__pista, .guia-gesto { transition: none; }
  .luz__escuchar[aria-pressed="true"] .eq i { animation: none; height: 70%; }
  .llamada__punto::after, .luz__pista-punto::after, .guia-gesto__rueda, .guia-gesto__flecha, .guia-gesto__dedo, .guia-gesto__paginas, .hero--luz.is-insiste .guia-gesto.is-visible { animation: none; }
  .guia-gesto__dedo { opacity: 1; transform: none; }
  .guia-gesto__flecha { opacity: 1; transform: rotate(45deg); }
}

/* as the page moves on, the bottom of the cover dissolves into the night (opacity driven by the scroll) */
.hero--luz .hero__fundido { display: none; }
.scrollfx .hero--luz .hero__fundido {
  display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 60%; z-index: 3; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, rgba(5, 7, 11, 0), rgba(5, 7, 11, .78) 50%, #05070B 88%);
}

/* (v14.1) "Saltar" / "Seguir": the house dims while the page glides down to Qué hacemos */
.scrollfx .hero--luz .hero__stage { transition: opacity .8s cubic-bezier(.4, 0, .2, 1); }
.scrollfx .hero--luz.is-saltando .hero__stage { opacity: .3; }