/* Huddle AI · landing v6 (17/10/2026): un edificio a pantalla completa.
 * Cada planta ocupa la pantalla: pared de color, suelo, forjado, muebles y los muñecos de Huddle AI
 * (web/js/muneco.js, gota mínima) haciendo su vida. Al llegar a una planta aparece su cartel y los muñecos
 * cuentan lo suyo en globos. Un indicador de ascensor dice en qué planta estás. */

h2 + .lead { margin-top: 18px; }

/* ---- el momento del día (lo pone landing.js según la hora del visitante) ---- */
:root, :root[data-momento="dia"] {
  --c1: #79AEFF; --c2: #BFD9FF; --c3: #FFE1EC; --nube: #fff; --nube-op: 1;
  --v-cielo: linear-gradient(180deg, #7FB6FF, #D6E8FF); --v-nube: rgba(255,255,255,.92);
  --ciudad: #B9C3E6; --ventanas-ciudad: rgba(255,255,255,.55); --luz: 0;
}
:root[data-momento="amanecer"] {
  --c1: #8E9DE6; --c2: #F7B7B4; --c3: #FFE0B5; --nube: #FFE9E0; --nube-op: .95;
  --v-cielo: linear-gradient(180deg, #9DB0EE, #FFC4A6 70%, #FFE2B8); --v-nube: rgba(255,236,226,.9);
  --ciudad: #A99BC8; --ventanas-ciudad: rgba(255,226,160,.6); --luz: .35;
}
:root[data-momento="atardecer"] {
  --c1: #5E5CB8; --c2: #F58FA0; --c3: #FFBE79; --nube: #FFD3C2; --nube-op: .9;
  --v-cielo: linear-gradient(180deg, #6D63C4, #FF9A8E 65%, #FFC47D); --v-nube: rgba(255,214,200,.85);
  --ciudad: #6E5C93; --ventanas-ciudad: rgba(255,214,120,.85); --luz: .7;
}
:root[data-momento="noche"] {
  --c1: #0E1033; --c2: #23225E; --c3: #463B7C; --nube: #3B3A70; --nube-op: .55;
  --v-cielo: radial-gradient(circle at 74% 26%, #FFF6D6 0 7%, transparent 8%), radial-gradient(circle, rgba(255,255,255,.9) 0 1px, transparent 1.6px) 0 0 / 23px 19px, linear-gradient(180deg, #121440, #2E2C6B); --v-nube: rgba(120,118,180,.35);
  --ciudad: #2A2756; --ventanas-ciudad: #FFD36B; --luz: 1;
}
body { background: #CFE0FF linear-gradient(180deg, #A9C8FF 0%, #CFE0FF 18%, #F3E3F2 100%) fixed; }

/* ---- cabecera: marca, pastillas, acceso ---- */
.cab { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--cab-alto); display: flex; align-items: center; pointer-events: none; }
.cab-wrap { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; pointer-events: auto; }
.marca { display: inline-flex; align-items: center; gap: 10px; font: 800 1.35rem var(--display); letter-spacing: -0.03em; color: var(--ink); text-decoration: none; padding: 5px 14px 5px 7px; margin-left: -7px; border-radius: var(--r-pill); border: 1px solid transparent; transition: background-color 250ms ease, border-color 250ms ease; }
.marca img { width: 34px; height: 34px; transition: transform 600ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .marca:hover img { transform: rotate(60deg); } }
.cab.pegada .marca { background: rgba(255,255,255,.6); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border-color: rgba(255,255,255,.9); }
.marca .ai { color: var(--lila-deep); font-weight: 500; margin-left: .04em; }
.nav { display: flex; gap: 4px; padding: 5px; border-radius: var(--r-pill); background: rgba(255,255,255,.55); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border: 1px solid rgba(255,255,255,.9); box-shadow: var(--sombra-suave); }
.nav a { padding: 9px 15px; border-radius: var(--r-pill); font: 600 .92rem/1 var(--body); color: var(--ink-2); text-decoration: none; transition: background-color 200ms ease, color 200ms ease, transform 160ms var(--ease-out); }
.nav a.activo { background: var(--ink); color: #fff; }
.nav a:active { transform: scale(.96); }
@media (hover: hover) and (pointer: fine) { .nav a:not(.activo):hover { background: rgba(255,255,255,.9); color: var(--ink); } }
.cab-der { justify-self: end; display: flex; align-items: center; gap: 8px; }
.cab .btn-primary { padding: 11px 18px; font-size: .92rem; }
.menu-btn { display: none; width: 44px; height: 44px; border-radius: var(--r-pill); border: 1px solid rgba(255,255,255,.9); background: rgba(255,255,255,.7); cursor: pointer; place-items: center; gap: 5px; padding: 0; }
.menu-btn i { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 220ms var(--ease-out); }
.menu-btn[aria-expanded="true"] i:first-of-type { transform: translateY(3.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] i:last-of-type { transform: translateY(-3.5px) rotate(-45deg); }
@media (max-width: 900px) {
  .cab-wrap { grid-template-columns: auto 1fr; }
  .menu-btn { display: grid; }
  .cab .btn-primary { display: none; }
  /* Menú móvil (20/10): hoja bajo la cabecera, a todo el ancho. La regla general de la burbuja pone
     .nav en position: relative más abajo en este fichero y dejaba el menú colgando a la derecha. */
  .nav { display: none; position: fixed !important; left: 12px; right: 12px; top: calc(var(--cab-alto) + 4px); z-index: 60; flex-direction: column; gap: 2px; padding: 8px; border-radius: 22px; background: #fff; border: 1px solid rgba(43,36,64,.08); box-shadow: 0 24px 48px -20px rgba(43,36,64,.45); }
  .nav a { padding: 15px 18px; font-size: 1.08rem; border-radius: 16px; color: var(--ink); }
  /* la planta actual, en lila (la regla de la burbuja de escritorio la dejaba en blanco sobre blanco) */
  .nav a.activo { background: var(--lila) !important; color: #fff !important; }
  .nav a.activo::before { content: "●"; margin-right: 10px; font-size: .7em; vertical-align: 2px; }
  .nav .nav-burbuja { display: none; }
  body.menu-abierto .nav { display: flex; animation: menu-entra 220ms var(--ease-out); }
  @keyframes menu-entra { from { opacity: 0; transform: translateY(-8px); } }
  /* telón que cierra el menú al tocar fuera */
  body.menu-abierto::after { content: ""; position: fixed; inset: 0; z-index: 55; background: rgba(43,36,64,.28); }
  body.menu-abierto { overflow: hidden; }
  .cab { z-index: 70; }
  /* el botón es una rejilla de 44 px: las dos barras quedan a 16 px, así que para cruzarse en X hay que mover ±8 */
  .menu-btn[aria-expanded="true"] i:first-of-type { transform: translateY(8px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] i:last-of-type { transform: translateY(-8px) rotate(-45deg); }
}
.btn-primary { position: relative; isolation: isolate; }
.btn-primary::before { content: ""; position: absolute; inset: -3px; border-radius: inherit; z-index: -1; opacity: 0; background: conic-gradient(from var(--ang, 0deg), var(--coral), var(--sol), var(--menta), var(--cielo), var(--lila), var(--rosa), var(--coral)); filter: blur(8px); transition: opacity 300ms ease; }
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@media (hover: hover) and (pointer: fine) { .btn-primary:hover::before { opacity: .9; animation: aura-gira 2.4s linear infinite; } }
@keyframes aura-gira { to { --ang: 360deg; } }


/* ---- el edificio ---- */
.edificio { position: relative; }
.piso {
  --suelo: clamp(86px, 16vh, 160px);       /* alto de la franja de suelo */
  --pjh: clamp(150px, 27vh, 270px);         /* alto de un muñeco de pie (≈ 2/3 de una puerta) */
  --base: calc(var(--suelo) * .42);         /* donde apoyan los pies */
  --puerta: calc(var(--pjh) * 1.5);
  /* tres carriles de profundidad: pegado a la pared, fondo (tras los muebles), medio y frente */
  --pared: var(--suelo); --fondo: calc(var(--suelo) * .74); --medio: var(--base); --frente: calc(var(--suelo) * .1);
  position: relative; min-height: 100svh; overflow: hidden; isolation: isolate;
  padding: calc(var(--cab-alto) + 28px) 0 calc(var(--suelo) + var(--pjh) * .92);
  background: linear-gradient(180deg, color-mix(in srgb, var(--tono) 46%, white) 0%, color-mix(in srgb, var(--tono) 26%, white) 100%);
  border-inline: clamp(6px, 1vw, 14px) solid #fff;
}
.piso.corto { min-height: 72svh; }
.piso.alto { min-height: 100svh; }
/* suelo y forjado */
.piso::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--suelo); z-index: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tono) 62%, #9C88B8) 0%, color-mix(in srgb, var(--tono) 48%, #B9A8D0) 100%);
  box-shadow: inset 0 5px 0 rgba(255,255,255,.85); }
.piso::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18px; z-index: 6; background: linear-gradient(180deg, #4F4866, #2B2440); box-shadow: 0 -2px 0 rgba(255,255,255,.5); }
.cuarto { position: absolute; inset: 0; pointer-events: none; }
.cuarto > * { position: absolute; }
.gente { inset: 0; z-index: 4; pointer-events: none; }
.piso > .wrap { position: relative; z-index: 5; }

/* lo que está lejos de la pantalla no se anima */
/* las plantas lejanas duermen: ni se pintan ni corren sus animaciones (ascensor.js pone .dormida); el navegador recuerda su alto */
.piso.dormida { content-visibility: hidden; contain-intrinsic-size: auto 100svh; }

/* ---- el cartel de información de cada planta ---- */
.info { width: min(100%, 540px); display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: clamp(20px, 2.4vw, 32px); border-radius: var(--r-panel);
  background: rgba(255,255,255,.84); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); border: 1px solid #fff; box-shadow: var(--sombra); }
.info.derecha { margin-left: auto; }
.info.centro { margin-inline: auto; width: min(100%, 680px); }
.info.ancha { width: min(100%, 780px); }
.info h2 { font-size: clamp(2rem, 3.8vw, 3.4rem); }
.info p { color: var(--ink-2); max-width: 52ch; }
.placa { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 8px; background: var(--ink); color: #fff; font: 700 .78rem var(--display); letter-spacing: .02em; box-shadow: 0 6px 14px -8px rgba(43,36,64,.6); }
.placa::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tono, var(--sol)); box-shadow: 0 0 8px var(--tono, var(--sol)); }
.k { display: block; font-size: .78rem; font-weight: 600; letter-spacing: .01em; color: var(--ink-3); }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chips li { padding: 6px 12px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--c) 60%, white); border: 1px solid rgba(255,255,255,.9); font-weight: 600; font-size: .84rem; }
.reparto-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: 100%; }
.reparto-mini .k { margin-bottom: 6px; }
/* entrada: el cartel llega desde su lado, sus piezas en cascada */
html.js .piso:not(.hero) .info { opacity: 0; transform: translateX(-36px) scale(.98); filter: blur(6px); transition: opacity 600ms var(--ease-out), transform 900ms var(--ease-out), filter 600ms ease; }
html.js .piso:not(.hero) .info.derecha { transform: translateX(36px) scale(.98); }
html.js .piso:not(.hero) .info.centro, html.js .piso:not(.hero) .info.ancha { transform: translateY(30px) scale(.98); }
html.js .piso.en-vista .info { opacity: 1; transform: none; filter: none; }
html.js .piso:not(.hero) .info > :not(h2) { opacity: 0; transform: translateY(12px); transition: opacity 500ms ease, transform 700ms var(--ease-out); }
html.js .piso.en-vista .info > :not(h2) { opacity: 1; transform: none; }
html.js .piso.en-vista .info > :nth-child(3) { transition-delay: 260ms; } html.js .piso.en-vista .info > :nth-child(4) { transition-delay: 360ms; } html.js .piso.en-vista .info > :nth-child(5) { transition-delay: 460ms; } html.js .piso.en-vista .info > :nth-child(n+6) { transition-delay: 560ms; }
html.js h2[data-palabras] .w { display: inline-block; transition: transform 800ms var(--ease-out), opacity 500ms ease; transition-delay: calc(120ms + var(--i, 0) * 60ms); }
html.js .piso:not(.en-vista) h2[data-palabras] .w { transform: translateY(.7em) rotate(2deg); opacity: 0; }

/* ---- indicador de ascensor ---- */
.indicador { position: fixed; left: 18px; bottom: 18px; z-index: 45; display: flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border-radius: var(--r-pill); background: rgba(43,36,64,.88); color: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 14px 30px -14px rgba(43,36,64,.6); font: 600 .9rem var(--body); }
.ind-nombre { display: inline-block; max-width: 220px; overflow: hidden; white-space: nowrap; transition: max-width 400ms var(--ease-out), opacity 300ms ease; }
.indicador.compacto { padding-right: 6px; gap: 0; } .indicador.compacto .ind-nombre { max-width: 0; opacity: 0; }
.ind-num { display: grid; place-items: center; min-width: 38px; height: 38px; border-radius: 50%; background: #1B1630; color: var(--sol); font: 800 1.1rem var(--display); box-shadow: inset 0 0 0 2px rgba(255,211,107,.35); text-shadow: 0 0 10px rgba(255,197,67,.7); }
.indicador.cambia .ind-num, .indicador.cambia .ind-nombre { animation: ind-cambia 420ms var(--ease-out); }
@keyframes ind-cambia { from { opacity: 0; transform: translateY(-8px); } }
@media (max-width: 560px) { .indicador { left: 10px; bottom: 10px; font-size: .8rem; padding-right: 12px; } .ind-num { min-width: 32px; height: 32px; font-size: .95rem; } }

/* ---- los muñecos ---- */
.ag { position: absolute; left: var(--x); bottom: calc(var(--medio) + var(--y, 0) * var(--pjh)); height: var(--pjh); width: calc(var(--pjh) * .615); z-index: var(--z, 4); pointer-events: auto; cursor: pointer; }
.ag.lejos { bottom: calc(var(--fondo) + var(--y, 0) * var(--pjh)); height: calc(var(--pjh) * .86); width: calc(var(--pjh) * .86 * .615); z-index: 2; }
.ag.frente { bottom: calc(var(--frente) + var(--y, 0) * var(--pjh)); height: calc(var(--pjh) * 1.06); width: calc(var(--pjh) * 1.06 * .615); z-index: 7; }
.ag-giro { position: absolute; inset: 0; }
.ag .mu { position: relative !important; width: 100% !important; height: 100% !important; transform: none !important; }
.ag .mu svg { width: 100%; height: 100%; }
.ag .nombre { position: absolute; left: 50%; bottom: 96%; translate: -50% 0; background: #fff; color: var(--ink); padding: 5px 11px; border-radius: 999px; font: 600 .76rem var(--body); white-space: nowrap; box-shadow: var(--sombra-suave); opacity: 0; transition: opacity 200ms ease, translate 300ms var(--ease-out); pointer-events: none; z-index: 9; }
.ag .nombre small { color: var(--ink-3); font-weight: 500; }
@media (hover: hover) and (pointer: fine) { .ag:hover .nombre { opacity: 1; translate: -50% -8px; } }
.ag:focus-visible .nombre { opacity: 1; translate: -50% -8px; }
.ag.pasea { animation: pasea var(--t, 16s) ease-in-out infinite; }
.ag.pasea .ag-giro { animation: voltea var(--t, 16s) infinite; }
@keyframes pasea { 0%, 4% { translate: 0 0; } 46%, 54% { translate: var(--dist, 30vw) 0; } 96%, 100% { translate: 0 0; } }
@keyframes voltea { 0% { scale: 1 1; animation-timing-function: steps(1, end); } 50% { scale: -1 1; animation-timing-function: steps(1, end); } 100% { scale: 1 1; } }
@media (max-width: 760px) { .ag.extra { display: none; } }
/* globos: lo que cuentan */
.globos { position: absolute; inset: 0; z-index: 30; pointer-events: none; }
.globo { position: absolute; z-index: 8; left: var(--gx, 0px); bottom: var(--gb, 50%); width: max-content; max-width: min(300px, 70vw); background: #fff; border-radius: 16px; padding: 10px 14px; font-size: .9rem; line-height: 1.35; color: var(--ink); box-shadow: 0 14px 28px -14px rgba(43,36,64,.5); opacity: 0; transform: translateY(10px) scale(.92); transform-origin: var(--cola, 50%) 100%; transition: opacity 220ms var(--ease-out), transform 480ms cubic-bezier(.34, 1.4, .64, 1); pointer-events: auto; }
.globo::after { content: ""; position: absolute; left: var(--cola, 50%); top: 100%; translate: -50% 0; border: 9px solid transparent; border-top-color: #fff; border-bottom: 0; }
.globo.visible { opacity: 1; transform: none; }
.globo .quien { display: block; font-size: .72rem; font-weight: 600; color: var(--ink-3); margin-bottom: 2px; }
.globo.pregunta { background: var(--sol-tint); box-shadow: 0 0 0 2px var(--sol), 0 14px 28px -14px rgba(184,120,10,.5); }
.globo.pregunta::after { border-top-color: var(--sol-tint); }
.globo code { background: color-mix(in srgb, var(--tono, var(--lila)) 28%, white); border-color: transparent; }
.globo .opciones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip-btn { border: 1.5px solid rgba(43,36,64,.14); background: #fff; color: var(--ink); border-radius: var(--r-pill); padding: 7px 12px; font: 600 .82rem/1 var(--body); cursor: pointer; transition: transform 160ms var(--ease-out), background-color 200ms ease, border-color 200ms ease; }
.chip-btn:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .chip-btn:hover { background: var(--ink); color: #fff; border-color: var(--ink); } }
.escribiendo { display: inline-flex; gap: 4px; align-items: center; height: 1.2em; }
.escribiendo i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); animation: punto 900ms ease-in-out infinite; }
.escribiendo i:nth-child(2) { animation-delay: 150ms; } .escribiendo i:nth-child(3) { animation-delay: 300ms; }
@keyframes punto { 0%, 100% { opacity: .35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }

/* ---- muebles (medidas ligadas al muñeco: --pjh) ---- */
.ventana { top: calc(var(--cab-alto) + 30px); width: clamp(120px, 14vw, 230px); aspect-ratio: 4 / 3; border-radius: 14px; border: 6px solid #fff; background: var(--v-cielo); box-shadow: 0 12px 24px -14px rgba(43,36,64,.35); overflow: hidden; transition: background 1.2s ease; }
.ventana::before, .ventana::after { content: ""; position: absolute; border-radius: 999px; background: var(--v-nube); animation: nube-pasa 18s linear infinite; }
.ventana::before { width: 38%; height: 20%; top: 26%; left: -40%; }
.ventana::after { width: 26%; height: 14%; top: 58%; left: -30%; animation-delay: -9s; animation-duration: 24s; }
@keyframes nube-pasa { to { translate: 420% 0; } }
.lampara { top: 0; width: clamp(60px, 6vw, 100px); height: calc(var(--cab-alto) + 30px); }
.lampara::before { content: ""; position: absolute; left: 50%; top: 0; width: 2px; height: 70%; background: #B9ADC9; }
.lampara::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: #fff; border-radius: 8px 8px 50% 50%; box-shadow: 0 40px 60px -10px rgba(255,214,107,.7); }
.maceta { bottom: calc(var(--base) - 6px); width: calc(var(--pjh) * .34); aspect-ratio: 1 / 1.5; z-index: 3; }
.maceta::before { content: ""; position: absolute; left: 22%; right: 22%; bottom: 0; height: 36%; background: #F7B8A0; border-radius: 6px 6px 12px 12px; box-shadow: inset -4px -4px 0 rgba(43,36,64,.08); }
.maceta::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 70%; border-radius: 50% 50% 45% 45%; background: radial-gradient(circle at 38% 32%, #C8F09A, #4FB873 72%); box-shadow: inset -8px -10px 0 rgba(47,160,120,.45); animation: hoja 5s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes hoja { 0%, 100% { rotate: -2deg; } 50% { rotate: 2deg; } }
.pizarra { right: 6%; top: calc(var(--cab-alto) + 30px); padding: 12px 16px; border-radius: 12px; background: #fff; border: 6px solid #ECE4F0; display: grid; gap: 4px; font-size: .85rem; color: var(--ink-2); box-shadow: 0 12px 24px -16px rgba(43,36,64,.4); }
.pizarra b { font: 800 1rem var(--display); color: var(--ink); }
.mesa-reunion { left: 50%; translate: -50% 0; width: min(62vw, 900px); bottom: calc(var(--base) + var(--pjh) * .26); height: calc(var(--pjh) * .2); border-radius: 50%; background: radial-gradient(ellipse at 50% 30%, #fff, #F1EAF6); z-index: 5; box-shadow: 0 18px 30px -16px rgba(43,36,64,.5); }
.mesa-reunion::after { content: ""; position: absolute; left: 47%; width: 6%; top: 80%; height: calc(var(--pjh) * .3); background: #DCD1E8; border-radius: 0 0 6px 6px; z-index: -1; }
.escritorio { bottom: calc(var(--base) + var(--pjh) * .3); width: clamp(150px, 18vw, 300px); height: 14px; background: #fff; border-radius: 8px; z-index: 5; box-shadow: 0 12px 20px -12px rgba(43,36,64,.45); }
.escritorio::before { content: ""; position: absolute; left: 34%; bottom: 100%; width: 34%; height: calc(var(--pjh) * .2); background: linear-gradient(180deg, #3A3357, #2B2440); border-radius: 6px 6px 2px 2px; border: 3px solid #4F4866; }
.escritorio::after { content: ""; position: absolute; left: 6%; right: 6%; top: 100%; height: calc(var(--pjh) * .3); background: linear-gradient(90deg, #E4DBEC 0 8%, transparent 8% 92%, #E4DBEC 92%); }
.pantalla { right: 5%; top: calc(var(--cab-alto) + 28px); width: min(38vw, 520px); max-height: calc(100% - var(--cab-alto) - 28px - var(--suelo) - var(--pjh) - 40px); overflow: hidden; z-index: 2; background: rgba(255,255,255,.96); border: 7px solid #2B2440; border-radius: 14px; padding: 12px 16px 14px; font-size: .82rem; line-height: 1.4; box-shadow: 0 20px 40px -20px rgba(43,36,64,.6); }
.pantalla .ficha-titulo { display: block; font-family: var(--mono); font-size: .76rem; color: var(--ink-3); margin-bottom: 8px; }
.pantalla code, .ficha-inline code { font-size: .9em; padding: .08em .4em; background: color-mix(in srgb, var(--tono) 32%, white); border-color: transparent; color: var(--ink); white-space: nowrap; }
.pantalla ul, .pantalla ol { list-style: none; margin: 0; padding: 0; }
.piso .pantalla > * { opacity: 0; transform: translateY(6px); transition: opacity 400ms ease, transform 600ms var(--ease-out); }
.piso.en-vista .pantalla > * { opacity: 1; transform: none; transition-delay: 500ms; }
.puerta-ascensor { bottom: calc(var(--pared) - 2px); width: calc(var(--pjh) * .7); height: var(--puerta); border-radius: 12px 12px 0 0; background: linear-gradient(90deg, #D7CCE7, #F7F2FB 48%, #CBBEDF 50%, #F7F2FB 52%, #E6DDF0); border: 6px solid #fff; border-bottom: 0; box-shadow: 0 12px 24px -16px rgba(43,36,64,.4); z-index: 2; }
.puerta-ascensor::before { content: "▲▼"; position: absolute; left: 50%; top: -34px; translate: -50% 0; padding: 3px 8px; border-radius: 999px; background: #2B2440; color: var(--menta); font-size: .7rem; letter-spacing: .1em; animation: parpadeo 2.2s ease-in-out infinite; }
@keyframes parpadeo { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.reloj { right: 6%; top: calc(var(--cab-alto) + 34px); width: clamp(70px, 7vw, 110px); aspect-ratio: 1; border-radius: 50%; background: #fff; border: 6px solid #2B2440; box-shadow: 0 10px 20px -12px rgba(43,36,64,.5); }
.piso:has(.info.derecha) .pantalla { right: auto; left: 5%; }
.piso:has(.reloj) .pantalla { right: calc(6% + clamp(70px, 7vw, 110px) + 24px); width: min(32vw, 460px); }
.aguja { position: absolute; left: 50%; bottom: 50%; width: 4px; border-radius: 2px; background: #2B2440; transform-origin: 50% 100%; translate: -50% 0; }
.aguja.h { height: 26%; animation: gira 60s linear infinite; } .aguja.m { height: 38%; background: var(--coral); animation: gira 5s linear infinite; }
@keyframes gira { to { rotate: 360deg; } }
.cinta { bottom: calc(var(--base) - 10px); width: calc(var(--pjh) * .9); height: calc(var(--pjh) * .07); border-radius: 10px; background: repeating-linear-gradient(90deg, #2B2440 0 14px, #3A3357 14px 28px); z-index: 5; animation: cinta 600ms linear infinite; }
@keyframes cinta { to { background-position: -28px 0; } }
.cinta::before { content: ""; position: absolute; right: 6%; bottom: 100%; width: 7%; height: calc(var(--pjh) * .62); background: #6A6184; border-radius: 4px; }
.cinta::after { content: ""; position: absolute; right: 6%; bottom: calc(100% + var(--pjh) * .58); width: 45%; height: 10px; background: #6A6184; border-radius: 4px; }
.pesas { left: 3%; bottom: var(--base); width: calc(var(--pjh) * .8); height: calc(var(--pjh) * .45); z-index: 2; background: linear-gradient(90deg, #6A6184 0 6%, transparent 6% 94%, #6A6184 94%); }
.pesas::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px; background: #4F4866; border-radius: 4px; }
.pesas::after { content: ""; position: absolute; left: 10%; right: 10%; top: 40%; height: 18%; background: radial-gradient(circle, var(--coral) 0 46%, transparent 48%) 0 0 / 25% 100% repeat-x; }
.rack { bottom: calc(var(--pared) - 2px); width: calc(var(--pjh) * .42); height: calc(var(--pjh) * 1.45); border-radius: 10px; background: #2B2440; border: 4px solid #4F4866; overflow: hidden; z-index: 2; }
.rack::before { content: ""; position: absolute; inset: 6% 20%; background: radial-gradient(circle, #4FE0B8 0 2px, transparent 2.6px) 0 0 / 100% 9%, radial-gradient(circle, #FFD36B 0 1.6px, transparent 2.2px) 100% 4% / 100% 9%; animation: parpadeo 1.1s steps(2) infinite; }
.cartel { z-index: 6; padding: 6px 12px; border-radius: 999px; background: #fff; font: 800 .74rem var(--display); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); box-shadow: var(--sombra-suave); }
.cuarto > .cartel { bottom: calc(var(--pared) + var(--pjh) * 1.45 + 14px); }
.ventanal { right: 4%; bottom: calc(var(--base) + var(--pjh) * .2); width: clamp(220px, 30vw, 520px); height: calc(var(--pjh) * 1.15); border-radius: 18px; border: 8px solid #fff; background: var(--v-cielo); overflow: hidden; z-index: 1; box-shadow: 0 16px 30px -18px rgba(43,36,64,.45); }
.ventanal::before, .ventanal::after { content: ""; position: absolute; border-radius: 999px; background: var(--v-nube); box-shadow: 30px -16px 0 8px var(--v-nube), -36px -6px 0 4px var(--v-nube); animation: nube-pasa 22s linear infinite; }
.ventanal::before { width: 26%; height: 16%; top: 34%; left: -30%; } .ventanal::after { width: 18%; height: 11%; top: 66%; left: -20%; animation-delay: -11s; }
.ventanal .cartel { position: absolute; left: 12px; top: 12px; z-index: 2; }
.barra { left: 3%; bottom: var(--base); width: clamp(220px, 28vw, 440px); height: calc(var(--pjh) * .46); background: linear-gradient(180deg, #fff, #F3ECF7); border-radius: 14px 14px 4px 4px; z-index: 5; box-shadow: 0 14px 24px -14px rgba(43,36,64,.45); }
.barra .cafetera { position: absolute; left: 8%; bottom: 100%; width: 18%; height: calc(var(--pjh) * .32); background: #4F4866; border-radius: 8px 8px 2px 2px; }
.barra .cafetera .vapor { position: absolute; left: 40%; bottom: 100%; width: 20%; height: 40%; border-radius: 50%; background: rgba(255,255,255,.8); filter: blur(3px); animation: vapor 2.4s ease-in-out infinite; }
@keyframes vapor { 0% { opacity: 0; transform: translateY(6px) scale(.8); } 40% { opacity: .9; } 100% { opacity: 0; transform: translateY(-18px) scale(1.2); } }
.barra .tazas { position: absolute; left: 34%; bottom: 100%; width: 34%; height: 14px; background: radial-gradient(circle at 15% 60%, #fff 0 35%, transparent 37%) 0 0 / 33% 100% repeat-x; filter: drop-shadow(0 2px 2px rgba(43,36,64,.2)); }
.mesa-alta { bottom: calc(var(--base) + var(--pjh) * .44); width: calc(var(--pjh) * .62); height: 10px; background: #fff; border-radius: 999px; z-index: 5; box-shadow: 0 8px 14px -8px rgba(43,36,64,.4); }
.mesa-alta::after { content: ""; position: absolute; left: 47%; top: 100%; width: 6%; height: calc(var(--pjh) * .44); background: #E4DBEC; }
.espejo { left: 5%; top: calc(var(--cab-alto) + 30px); width: min(36vw, 520px); height: calc(100% - var(--cab-alto) - 30px - var(--base) - var(--pjh) * .62); border-radius: 16px; border: 6px solid #fff; background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(190,214,255,.6) 60%, rgba(255,255,255,.85)); }
.lavabo { bottom: calc(var(--pared) + var(--pjh) * .26); width: calc(var(--pjh) * .62); height: calc(var(--pjh) * .16); background: #fff; border-radius: 8px 8px 22px 22px; z-index: 2; box-shadow: 0 10px 18px -10px rgba(43,36,64,.4); }
.lavabo::before { content: ""; position: absolute; left: 44%; bottom: 100%; width: 12%; height: 60%; background: #B9ADC9; border-radius: 4px 4px 0 0; }
.puerta-bano { left: 44%; bottom: calc(var(--pared) - 2px); width: calc(var(--pjh) * .66); height: var(--puerta); border-radius: 12px 12px 0 0; background: #F3ECF7; border: 6px solid #fff; border-bottom: 0; display: grid; justify-items: center; align-content: start; padding-top: 18%; z-index: 2; }
.puerta-bano span { background: var(--coral); color: #fff; font: 800 .74rem var(--display); padding: 5px 11px; border-radius: 999px; text-transform: uppercase; letter-spacing: .05em; }
.puerta-bano::after { content: ""; position: absolute; left: 12%; top: 52%; width: 10%; aspect-ratio: 1; border-radius: 50%; background: #B9ADC9; }
.monitores { right: 4%; top: calc(var(--cab-alto) + 28px); width: min(24vw, 400px); height: calc(100% - var(--cab-alto) - 28px - var(--base) - var(--pjh) * 1.05); display: grid; grid-template-columns: repeat(2, 1fr); gap: 4%; }
.monitores i { position: relative; overflow: hidden; border-radius: 10px; background: linear-gradient(160deg, #3A3357, #2B2440); border: 4px solid #4F4866; }
.monitores i::before { content: ""; position: absolute; left: 12%; right: 12%; top: 22%; height: 10%; border-radius: 3px; background: var(--menta); box-shadow: 0 160% 0 var(--sol), 0 320% 0 var(--cielo); transform-origin: left; animation: barras 3s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .4s); }
.monitores i:nth-child(2) { --i: 1; } .monitores i:nth-child(3) { --i: 2; } .monitores i:nth-child(4) { --i: 3; } .monitores i:nth-child(5) { --i: 4; } .monitores i:nth-child(6) { --i: 5; }
@keyframes barras { 0%, 100% { scale: 1 1; } 50% { scale: .55 1; } }
.consola { left: 34%; bottom: calc(var(--base) + var(--pjh) * .3); width: min(46vw, 640px); height: calc(var(--pjh) * .12); border-radius: 12px 12px 4px 4px; background: linear-gradient(180deg, #4F4866, #2B2440); z-index: 5; box-shadow: 0 14px 24px -14px rgba(43,36,64,.6); }
.consola::before { content: ""; position: absolute; left: 6%; right: 6%; top: 30%; height: 30%; background: radial-gradient(circle, var(--menta) 0 3px, transparent 4px) 0 0 / 22px 100% repeat-x; animation: parpadeo 1.4s steps(2) infinite; }
.mostrador { left: 6%; bottom: var(--base); width: min(42vw, 560px); height: calc(var(--pjh) * .62); background: linear-gradient(180deg, #fff, #F3ECF7); border-radius: 18px 18px 6px 6px; z-index: 5; display: flex; align-items: center; justify-content: center; gap: 10px; font: 800 clamp(1.1rem, 2vw, 1.8rem) var(--display); letter-spacing: -0.03em; color: var(--ink); box-shadow: 0 16px 30px -16px rgba(43,36,64,.5); }
.mostrador span { color: var(--lila-deep); font-weight: 500; margin-left: .05em; }
.mostrador img { width: clamp(28px, 3vw, 44px); height: auto; }
.puerta-giratoria { right: 5%; bottom: calc(var(--pared) - 2px); width: calc(var(--pjh) * 1.1); height: var(--puerta); border-radius: 16px 16px 0 0; background: linear-gradient(90deg, rgba(150,195,255,.5), rgba(255,255,255,.85), rgba(150,195,255,.5)); border: 6px solid #fff; border-bottom: 0; overflow: hidden; z-index: 1; }
.puerta-giratoria::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; background: #fff; translate: -50% 0; animation: gira-puerta 6s ease-in-out infinite; }
@keyframes gira-puerta { 0%, 100% { scale: 1 1; } 50% { scale: 18 1; opacity: .55; } }

/* ---- azotea (hero): cielo, sol, nubes y el tejado ---- */
.azotea { background: linear-gradient(180deg, var(--c1) 0%, var(--c2) 46%, var(--c3) 100%); transition: background 1.5s ease; border-inline: 0; padding-top: calc(var(--cab-alto) + 8px); display: flex; flex-direction: column; justify-content: center; }
.azotea::before { background: radial-gradient(circle, rgba(43,36,64,.18) 0 1.2px, transparent 1.8px) 0 0 / 9px 7px, linear-gradient(180deg, #DCD3E6, #C8BCD8); box-shadow: inset 0 3px 0 rgba(255,255,255,.7); }
.cielo { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.sol { position: absolute; left: var(--sol-x, 80%); top: var(--sol-y, 14%); translate: -50% -50%; transition: left 2s ease, top 2s ease, opacity 1s ease; width: clamp(90px, 12vw, 180px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #FFF6D1 0 40%, #FFD36B 70%); box-shadow: 0 0 80px 30px rgba(255,211,107,.5); animation: sol 6s ease-in-out infinite; }
@keyframes sol { 0%, 100% { scale: 1; } 50% { scale: 1.06; } }
.nubarron { position: absolute; width: 200px; height: 64px; border-radius: 999px; background: var(--nube); box-shadow: 44px -24px 0 8px var(--nube), -48px -10px 0 2px var(--nube); opacity: var(--nube-op, 1); animation: nube-cruza var(--t, 70s) linear infinite; }
.n1 { left: -20%; top: 18%; --t: 80s; } .n2 { left: -30%; top: 34%; scale: .65; --t: 60s; animation-delay: -25s; } .n3 { left: -25%; top: 10%; scale: .45; --t: 95s; animation-delay: -55s; } .n4 { left: -25%; top: 52%; scale: .8; --t: 75s; animation-delay: -40s; opacity: .8; }
@keyframes nube-cruza { to { translate: 170vw 0; } }
.antena { left: 47%; bottom: calc(var(--suelo) - 4px); width: 6px; height: calc(var(--pjh) * 1.3); background: #9C90B4; border-radius: 3px; }
.antena::before { content: ""; position: absolute; left: 50%; top: -10px; width: 16px; height: 16px; translate: -50% 0; border-radius: 50%; background: var(--coral); box-shadow: 0 0 18px var(--coral); animation: parpadeo 1.6s ease-in-out infinite; }
.tumbona { display: none; left: 52%; bottom: calc(var(--base) + 10px); width: calc(var(--pjh) * .9); height: 16px; background: #fff; border-radius: 999px; box-shadow: 0 10px 14px -8px rgba(43,36,64,.4); }
.tumbona::before { content: ""; position: absolute; right: 0; bottom: 100%; width: 40%; height: calc(var(--pjh) * .2); background: var(--sol); border-radius: 10px 10px 0 0; rotate: -18deg; transform-origin: right bottom; }
.hero-centinela { position: absolute; top: 0; left: 0; width: 1px; height: 40px; }
.hero-wrap { position: relative; z-index: 5; width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; }
.hero-titulo { position: relative; z-index: 1; font-size: clamp(3.2rem, 10.6vw, 9.8rem); line-height: .9; letter-spacing: -0.045em; text-transform: uppercase; font-weight: 900; display: flex; flex-direction: column; color: var(--ink); }
.hero-titulo > span { display: block; position: relative; overflow: hidden; padding-right: .08em; margin-right: -.08em; }
.hero-titulo > span > i { display: block; font-style: normal; }
.giro { position: relative; display: inline-grid; vertical-align: top; transition: width 520ms var(--ease-out); }
.giro b { grid-area: 1 / 1; color: var(--c, var(--coral-deep)); font-weight: inherit; white-space: nowrap; transition: transform 620ms var(--ease-out), opacity 380ms ease, filter 380ms ease; }
.giro b.sale { transform: translateY(-105%); opacity: 0; filter: blur(6px); }
.giro b.entra { transform: translateY(105%); opacity: 0; filter: blur(6px); transition: none; }
.hero-lead { position: relative; margin-top: 28px; font-size: clamp(1.1rem, 1.5vw, 1.3rem); color: var(--ink); max-width: 44ch; }
.hero-lead .w { display: inline-block; transition: transform 700ms var(--ease-out), opacity 500ms ease; transition-delay: calc(560ms + var(--i, 0) * 28ms); }
html.js .hero:not(.visto) .hero-lead .w { transform: translateY(.6em); opacity: 0; }
.hero-cta { position: relative; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
html.js .hero:not(.visto) .hero-titulo > span > i { transform: translateY(108%); }
html.js .hero:not(.visto) .hero-cta { opacity: 0; transform: translateY(14px); }
html.js .hero:not(.visto) .nero-gigante { opacity: 0; transform: translateY(60px) scale(.94); }
.hero-titulo > span > i { transition: transform 1000ms var(--ease-out); }
.hero-titulo .l2 > i { transition-delay: 90ms; }
.hero-cta { transition: opacity 600ms var(--ease-out) 900ms, transform 800ms var(--ease-out) 900ms; }
/* Nero, el grande, de pie en la azotea solapando el titular */
.nero-gigante { position: absolute; z-index: 4; right: clamp(8px, 7vw, 140px); bottom: calc(var(--base) - 4px); height: min(66svh, 640px); aspect-ratio: 160 / 260; transition: opacity 900ms var(--ease-out) 260ms, transform 1200ms var(--ease-out) 260ms; }
.nero-gigante .ag { --x: 0%; left: 0; bottom: 0; height: 100%; width: 100%; }
.nero-gigante .globo { font-size: 1rem; }
.hero-titulo .l2 { z-index: 6; }
@media (max-width: 760px) {
  .azotea { justify-content: flex-start; padding-top: calc(var(--cab-alto) + 30px); }
  .nero-gigante { height: min(36svh, 300px); right: 4px; }
  .hero-lead { font-size: 1.05rem; margin-top: 20px; }
  .hero-cta .btn { flex: 1 1 auto; }
  .tumbona, .antena { display: none; }
  .luna { display: none; }   /* en el móvil no hay sitio: con el título grande quedaba detrás del texto */
  /* azotea en el móvil (20/10, pedido de Daniel): título más grande y más abajo; muñecos algo más pequeños */
  .azotea { padding-top: calc(var(--cab-alto) + 54px); --pjh: clamp(110px, 17vh, 150px); }
  .hero-titulo { font-size: clamp(3.6rem, 14.5vw, 5.2rem); line-height: .92; }
  .nero-gigante { height: min(30svh, 240px); }
}

/* ---- la sala de reuniones ---- */
.aviso-tu { right: 6%; bottom: calc(var(--base) + var(--pjh) * 1.15 + 20px); z-index: 9; background: var(--ink); color: #fff; border-radius: 16px; padding: 12px 16px; max-width: min(380px, 80vw); font-size: .9rem; line-height: 1.35; box-shadow: 0 16px 30px -14px rgba(43,36,64,.6); animation: globo-entra 420ms var(--ease-out); }
.aviso-tu[hidden] { display: none; }
.aviso-tu .k { color: rgba(255,255,255,.7); margin-bottom: 2px; }
@keyframes globo-entra { from { opacity: 0; transform: translateY(-8px); } }
.isla-tema { display: grid; gap: 4px; }
.isla-tema b { font-weight: 600; color: var(--ink); line-height: 1.4; }
.isla-cierre { padding: 12px 14px; border-radius: var(--r-in); background: var(--menta-tint); color: var(--menta-deep); font-weight: 600; font-size: .92rem; opacity: 0; transform: translateY(6px); transition: opacity 300ms var(--ease-out), transform 400ms var(--ease-out); min-height: 48px; width: 100%; }
.isla-cierre.visible { opacity: 1 !important; transform: none !important; }
html.js .piso .info > .isla-cierre:not(.visible) { opacity: 0; min-height: 0; padding: 0; height: 0; }

/* ---- fichas (contenido de las pantallas y, en móvil, debajo del texto) ---- */
.ficha-inline { display: none; width: 100%; background: rgba(255,255,255,.9); border: 1px solid #fff; border-radius: 18px; padding: 16px 18px; font-size: .9rem; box-shadow: var(--sombra-suave); }
.ficha-inline .ficha-titulo { display: block; font-family: var(--mono); font-size: .8rem; color: var(--ink-3); margin-bottom: 8px; }
.ficha-inline ul, .ficha-inline ol { list-style: none; margin: 0; padding: 0; }
.arbol li { display: grid; grid-template-columns: 38% minmax(0, 1fr); gap: 10px; padding: 5px 0; border-bottom: 1px dashed rgba(43,36,64,.12); align-items: baseline; }
.arbol li:last-child { border-bottom: 0; }
.arbol span { color: var(--ink-2); }
.turnos li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 8px; padding: 5px 0; }
.turnos b { font-family: var(--mono); font-weight: 400; color: var(--ink-3); }
.turnos .pregunta { background: var(--sol-tint); border-radius: 8px; padding: 6px 8px; margin-top: 4px; }
.pie-ficha { margin-top: 8px; color: var(--ink-3); font-size: .9em; }
.llamadas { margin: 0; display: grid; gap: 10px; }
.llamadas dd { margin: 4px 0 0; line-height: 1.5; color: var(--ink-2); }
.llamadas .k { display: inline-block; width: 56px; font-size: .9em; }
.llamadas em { display: block; margin-top: 2px; font-style: normal; color: var(--ink-3); font-size: .92em; }
.cron li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dashed rgba(43,36,64,.12); align-items: baseline; }
.cron li:last-child { border-bottom: 0; }
.cron span { color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.modelos-ficha li { display: grid; grid-template-columns: 26% auto auto minmax(0, 1fr); gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px dashed rgba(43,36,64,.12); }
.modelos-ficha li:last-child { border-bottom: 0; }
.modelos-ficha b { font-weight: 600; }
.modelos-ficha .local, .modelos-ficha .nube { font-size: .9em; font-weight: 600; padding: 2px 8px; border-radius: var(--r-pill); }
.modelos-ficha .local { background: var(--menta-tint); color: var(--menta-deep); }
.modelos-ficha .nube { background: var(--cielo-tint); color: var(--cielo-deep); }
.modelos-ficha .ruta { font-family: var(--mono); font-size: .92em; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- sala de control: pestañas y panel ---- */
.pestanas { position: relative; display: inline-flex; gap: 4px; padding: 5px; border-radius: var(--r-pill); background: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.95); box-shadow: var(--sombra-suave); margin: 8px 0 4px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.pestanas::-webkit-scrollbar { display: none; }
.pestanas button { position: relative; z-index: 1; border: 0; background: transparent; padding: 11px 18px; border-radius: var(--r-pill); font: 600 .95rem/1 var(--body); color: var(--ink-2); cursor: pointer; white-space: nowrap; transition: color 220ms ease; }
.pestanas button[aria-selected="true"] { color: #fff; }
.pestanas-ind { position: absolute; top: 5px; left: 0; height: calc(100% - 10px); width: 0; border-radius: var(--r-pill); background: var(--ink); transition: transform 320ms cubic-bezier(.34, 1.3, .64, 1), width 320ms var(--ease-out), background-color 400ms ease; }
.panel-control { position: relative; overflow: hidden; width: 100%; border: 1px solid #fff; border-radius: 22px; box-shadow: var(--sombra-suave); padding: clamp(18px, 2.4vw, 28px); min-height: 220px; transition: background-color 600ms ease; }
.panel-control[data-tono="sol"] { --tono: var(--sol); --tono-deep: var(--sol-deep); }
.panel-control[data-tono="menta"] { --tono: var(--menta); --tono-deep: var(--menta-deep); }
.panel-control[data-tono="lila"] { --tono: var(--lila); --tono-deep: var(--lila-deep); }
.panel-control[data-tono="cielo"] { --tono: var(--cielo); --tono-deep: var(--cielo-deep); }
.panel-control { background: color-mix(in srgb, var(--tono, var(--sol)) 45%, rgba(255,255,255,.92)); }
.panel { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.panel[hidden] { display: none; }
html.js .panel.entra { animation: panel-entra 420ms var(--ease-out); }
@keyframes panel-entra { from { opacity: 0; transform: translateY(12px); filter: blur(4px); } }
.panel-texto h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -0.03em; margin-bottom: 12px; color: var(--tono-deep, var(--ink)); }
.panel-texto p { color: var(--ink-2); max-width: 40ch; }
.panel-demo { background: rgba(255,255,255,.92); border: 1px solid #fff; border-radius: 20px; padding: 22px 24px; box-shadow: var(--sombra-suave); }
html.js .panel.entra .panel-demo > *, html.js .panel.entra .registro span, html.js .panel.entra .permiso { animation: fila-entra 520ms var(--ease-out) both; animation-delay: calc(80ms + var(--i, 0) * 70ms); }
@keyframes fila-entra { from { opacity: 0; transform: translateX(-10px); } }
.presu-cab { display: flex; justify-content: space-between; gap: 12px; font-weight: 600; margin-bottom: 12px; font-variant-numeric: tabular-nums; }
.presu-cab b { color: var(--coral-deep); }
.medidor { height: 12px; border-radius: 999px; background: rgba(43,36,64,.08); overflow: hidden; }
.medidor i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--menta), var(--sol) 70%, var(--coral)); transition: width 1600ms var(--ease-out); }
.presu-peticion { margin-top: 18px; padding-top: 16px; border-top: 1px dashed rgba(43,36,64,.14); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; color: var(--ink-2); font-size: .95rem; }
.presu-botones { display: flex; gap: 6px; }
.presu-botones .chip-btn.elegido { background: var(--ink); color: #fff; border-color: var(--ink); }
.permisos { display: grid; gap: 4px; padding: 14px 18px; }
.permiso { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 11px 6px; border-bottom: 1px dashed rgba(43,36,64,.12); }
.permiso:nth-child(2) { --i: 1; } .permiso:nth-child(3) { --i: 2; } .permiso:nth-child(4) { --i: 3; }
.permiso:last-child { border-bottom: 0; }
.permiso b { font-weight: 600; min-width: 92px; }
.permiso .ambito { color: var(--ink-3); font-size: .86rem; }
.permiso em { margin-left: auto; font-style: normal; font-size: .78rem; font-weight: 600; padding: 4px 10px; border-radius: var(--r-pill); }
.permiso em.si { background: var(--menta-tint); color: var(--menta-deep); }
.permiso em.no { background: var(--coral-tint); color: var(--coral-deep); }
.acta h4 { font-size: 1.1rem; margin-bottom: 14px; }
.acta p { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding: 10px 0; border-top: 1px dashed rgba(43,36,64,.12); color: var(--ink-2); line-height: 1.5; }
.acta p:nth-of-type(1) { --i: 1; } .acta p:nth-of-type(2) { --i: 2; } .acta p:nth-of-type(3) { --i: 3; }
.acta .k { padding-top: 2px; }
.registro { display: grid; gap: 2px; font-family: var(--mono); font-size: .84rem; color: var(--ink-2); }
.registro span { display: grid; grid-template-columns: 70px 1fr; gap: 12px; padding: 6px 0; }
.registro span:nth-child(2) { --i: 1; } .registro span:nth-child(3) { --i: 2; } .registro span:nth-child(4) { --i: 3; } .registro span:nth-child(5) { --i: 4; } .registro span:nth-child(6) { --i: 5; }
.registro time { color: var(--ink-3); }
.registro .neg { color: var(--coral-deep); }
.registro .preg { color: var(--sol-deep); }

.panel-texto { color: var(--ink-2); max-width: 40ch; }
/* ---- la oficina 3D ---- */
#acceso-form .trampa { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.oficina-caja { position: relative; width: 100%; margin: clamp(64px, 8vh, 96px) auto 0; }   /* aire con la tarjeta de arriba, que entra 30 px más abajo hasta verse (20/10) */
.oficina-caja::before { content: ""; position: absolute; inset: -3px; border-radius: calc(var(--r-panel) + 3px); z-index: 0; background: conic-gradient(from var(--ang, 0deg), var(--lila), var(--cielo), var(--menta), var(--sol), var(--coral), var(--rosa), var(--lila)); opacity: .6; filter: blur(16px); animation: aura-gira 16s linear infinite; }
.oficina-marco { position: relative; z-index: 1; width: 100%; aspect-ratio: 16 / 9; min-height: 420px; max-height: 70svh; border-radius: var(--r-panel); border: 1px solid #fff; box-shadow: var(--sombra); background: #EDE4F6 url(../media/ultimo-fotograma.jpg) center / cover no-repeat; overflow: hidden; }
.oficina-marco iframe { width: 100%; height: 100%; border: 0; display: block; opacity: 0; transition: opacity 700ms ease; }
.oficina-marco.cargada iframe { opacity: 1; }
.oficina-puerta { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; text-align: center; padding: 24px; background: linear-gradient(180deg, rgba(237,228,246,.15), rgba(237,228,246,.6)); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: opacity 500ms ease; }
.oficina-puerta p { color: var(--ink-2); font-size: .92rem; max-width: 32ch; }
.oficina-marco.cargada .oficina-puerta, .oficina-marco.cargando .oficina-puerta p { opacity: 0; pointer-events: none; }
.oficina-marco.cargando .btn-grande { background: var(--ink-2); }
.btn-grande { padding: 20px 30px; font-size: 1.1rem; animation: late-boton 2.6s ease-in-out infinite; }
@keyframes late-boton { 0%, 100% { box-shadow: 0 10px 24px -12px rgba(43,36,64,.55), 0 0 0 0 rgba(142,108,255,.5); } 50% { box-shadow: 0 10px 24px -12px rgba(43,36,64,.55), 0 0 0 16px rgba(142,108,255,0); } }

/* ---- hall: formulario y confeti ---- */
#acceso-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; width: 100%; max-width: 480px; margin-top: 8px; }
#acceso-form label { grid-column: 1 / -1; font-weight: 600; font-size: .9rem; color: var(--ink-2); }
#acceso-form input { padding: 15px 20px; border-radius: var(--r-pill); border: 1.5px solid rgba(43,36,64,.16); background: rgba(255,255,255,.9); font: 500 1rem var(--body); color: var(--ink); min-width: 0; transition: border-color 200ms ease, box-shadow 200ms ease; }
#acceso-form input::placeholder { color: var(--ink-3); }
#acceso-form input:focus { outline: none; border-color: var(--coral); box-shadow: 0 0 0 4px rgba(255,122,89,.25); }
#acceso-form input[aria-invalid="true"] { border-color: var(--coral-deep); animation: tiembla 400ms var(--ease-out); }
@keyframes tiembla { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
#acceso-form p { margin: 0; max-width: none; }
.form-error { grid-column: 1 / -1; color: var(--coral-deep); font-size: .9rem; font-weight: 500; }
.form-ok { grid-column: 1 / -1; color: var(--menta-deep); font-weight: 600; }
@media (max-width: 560px) { #acceso-form { grid-template-columns: 1fr; } #acceso-form .btn { width: 100%; } }
.confeti { position: absolute; inset: 0; pointer-events: none; z-index: 9; }
.confeti i { position: absolute; left: 30%; top: 50%; width: var(--s, 14px); height: var(--s, 14px); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--c) 55%, color-mix(in srgb, var(--c) 70%, #8E6CFF)); box-shadow: 0 6px 14px -6px rgba(43,36,64,.3); will-change: transform, opacity; }

#acceso-form { margin-top: 4px; }

/* ---- la calle: el pie ---- */
.pie { padding: 34px 0 60px; color: #fff; font-size: .9rem; background: linear-gradient(180deg, #6A6184 0 10px, #8C82A8 10px 14px, #4F4866 14px); }
.pie a { color: #FFD36B; }
.pie .wrap { display: flex; flex-wrap: wrap; gap: 10px 32px; justify-content: space-between; padding-left: 64px; }

/* ---- móvil: el cartel arriba, la gente abajo, la ficha dentro del cartel ---- */
@media (max-width: 1180px) { .monitores { display: none; } }
@media (max-width: 860px) {
  .piso { --suelo: clamp(70px, 12vh, 110px); --pjh: clamp(130px, 21vh, 190px); padding-top: calc(var(--cab-alto) + 12px); }
  .info, .info.derecha, .info.centro, .info.ancha { width: 100%; margin: 0; }
  html.js .piso:not(.hero) .info, html.js .piso:not(.hero) .info.derecha { transform: translateY(24px) scale(.98); }
  .pantalla, .pizarra, .lampara, .reloj, .monitores, .espejo, .ventana { display: none; }
  /* fichas en móvil (20/10): dentro del cartel, como una lista clara, sin aspecto de código */
  .ficha-inline { display: block; padding: 14px 16px; background: color-mix(in srgb, var(--tono) 14%, #fff); border: 0; box-shadow: none; font-size: .92rem; }
  .ficha-inline .ficha-titulo { font-family: var(--body); font-weight: 700; font-size: .95rem; color: var(--ink); margin-bottom: 10px; }
  .ficha-inline code { font-family: var(--body); font-weight: 600; background: transparent; padding: 0; color: var(--ink); }
  .ficha-inline .arbol li, .ficha-inline .cron li, .ficha-inline .modelos-ficha li { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 8px 0; border-bottom: 1px dashed rgba(43,36,64,.12); }
  .ficha-inline .arbol li:last-child, .ficha-inline .cron li:last-child, .ficha-inline .modelos-ficha li:last-child { border-bottom: 0; }
  .ficha-inline .arbol span, .ficha-inline .cron span, .ficha-inline .modelos-ficha .ruta { color: var(--ink-2); }
  .ficha-inline .modelos-ficha li { grid-template-columns: auto 1fr; align-items: center; column-gap: 8px; }
  .ficha-inline .modelos-ficha b { grid-column: 1; } .ficha-inline .modelos-ficha code { grid-column: 2; font-weight: 500; color: var(--ink-2); }
  .ficha-inline .modelos-ficha .local, .ficha-inline .modelos-ficha .nube { grid-column: 1; justify-self: start; }
  .ficha-inline .modelos-ficha .ruta { grid-column: 2; }
  .ficha-inline .ruta, .ficha-inline .llamadas dd, .ficha-inline .turnos span { font-family: var(--body); }
  .ficha-inline .modelos-ficha code { display: none; }   /* la etiqueta local/nube ya lo dice */
  .ficha-inline .llamadas dt { margin-top: 8px; } .ficha-inline .llamadas dd { margin: 4px 0 0; line-height: 1.5; }
  .ficha-inline .turnos li { padding: 6px 0; } .ficha-inline .pie-ficha { margin: 10px 0 0; color: var(--ink-2); }
  /* orden del cartel en móvil: placa, título, texto, chips y después la ficha */
  .info { gap: 12px; }
  .info > .chips, .info > .reparto-mini { order: 5; } .info > .ficha-inline { order: 9; }
  .reparto-mini { grid-template-columns: 1fr; }
  .mesa-reunion { width: 92vw; }
  .escritorio { width: 22vw; } .escritorio::before { left: 30%; width: 40%; }
  .barra { width: 34vw; }
  .ventanal { width: 36vw; }
  /* Hall en móvil (20/10): tres cosas y cada una en su sitio: mostrador con Nero a la izquierda, sofá con Irene en
     el centro-derecha y la puerta giratoria pegada al borde derecho, sin pisarse */
  .mostrador { left: 4%; width: 42vw; height: calc(var(--pjh) * .42); font-size: .95rem; }
  .alfombra.roja { left: 2%; width: 46%; }
  .sofa { left: 50%; width: calc(var(--pjh) * .78); height: calc(var(--pjh) * .34); }
  .puerta-giratoria { right: 2%; width: calc(var(--pjh) * .5); height: calc(var(--puerta) * .85); }
  .timbre { left: 36%; }
  #acceso .deco .d-pieza:has(.d-alfombra) { display: none; }
  .consola { left: 20%; width: 64vw; }
  .aviso-tu { right: 4%; left: 4%; max-width: none; bottom: calc(var(--base) + var(--pjh) * 1.1 + 12px); font-size: .82rem; }
  .globo { font-size: .8rem; max-width: 62vw; }
  .pestanas { display: flex; width: 100%; }
  .pestanas button { flex: 1 1 0; padding: 10px 4px; font-size: .82rem; }
  .panel { grid-template-columns: 1fr; gap: 16px; }
  .acta p { grid-template-columns: 1fr; gap: 2px; }
  .registro span { grid-template-columns: 1fr; gap: 0; }
  .oficina-marco { aspect-ratio: 4 / 5; min-height: 0; }
  .pie .wrap { padding-left: 0; }
  /* móvil (20/10/2026): las plantas miden lo que mide su tarjeta más la habitación, sin huecos vacíos
     entre medias; la habitación necesita algo más de aire para que la tarjeta no pise las cabezas */
  .piso:not(.azotea), .piso.alto:not(.azotea), .piso.corto { min-height: auto; padding-bottom: calc(var(--suelo) + var(--pjh) * 1.3); }
  .piso#oficina { padding-bottom: calc(var(--suelo) + 24px); }
  /* en el móvil la cabecera se desliza sobre el texto de las tarjetas: banda esmerilada al pegarse */
  .cab.pegada::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.62)); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); box-shadow: 0 1px 0 rgba(255,255,255,.7); }
  .cab { isolation: isolate; }
  .menu-btn { background: rgba(255,255,255,.88); }
  /* scroll suave en el móvil (20/10): nada que haga repintar toda la pantalla al deslizar */
  body { background-attachment: scroll; }
  .cab.pegada::before { backdrop-filter: none; -webkit-backdrop-filter: none; background: linear-gradient(180deg, #fff, rgba(255,255,255,.97)); }   /* opaca: con .94 el texto se leía detrás del logo */
  .indicador, .menu-btn, .nav { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .indicador { background: rgba(43,36,64,.94); }
  html.js .piso:not(.hero) .info, html.js .piso:not(.hero) .info.derecha, html.js .piso:not(.hero) .info.centro, html.js .piso:not(.hero) .info.ancha { transform: none; opacity: 1; transition: none; }
  html.js .piso:not(.hero) .info > * { opacity: 1; transform: none; transition: none; }
  html.js .piso:not(.en-vista) h2[data-palabras] .w { opacity: 1; transform: none; }   /* los títulos no se apagan al salir de vista */
  html.js .piso:not(.hero) .info { filter: none; }
  /* plantas lejanas: nada de content-visibility en el móvil (Safari cambia el alto del hueco al pintarlas y
     el scroll da un salto); solo se les paran las animaciones */
  .piso.dormida { content-visibility: visible; contain-intrinsic-size: none; }
  .piso.dormida *, .piso.dormida *::before, .piso.dormida *::after { animation-play-state: paused !important; }
  /* nada que se repinte solo: auras giratorias, desenfoques animados, filtros SVG */
  .oficina-caja::before, .btn-maqueta-anillo { animation: none; }
  .oficina-caja::before { filter: blur(8px); }
  .globo { backdrop-filter: none; -webkit-backdrop-filter: none; }
  /* la orquesta (20/10): un instrumento con drop-shadow animándose se vuelve a sombrear en cada fotograma, y
     seis a la vez atascaban el móvil; los focos con clip-path mecéndose repintan medio escenario */
  .instr { filter: none; }
  .foco { animation: none; }
  .foco.f2, .foco.f3 { display: none; }
  .orquesta-sala:has(.con-piano.tocando) .piano .teclas { animation: none; }
  .notas i { text-shadow: none; }
  .pauta { display: none; }
  /* Pintado barato (20/10): en iOS, al bajar deprisa, los mosaicos que no llegan a pintarse a tiempo salen en
     blanco un instante (el «parpadeo»). Los patrones de puntos repetidos cada 9 px sobre plantas enteras son lo
     más caro de pintar: en el móvil se sustituyen por degradados planos. */
  .azotea::before { background: linear-gradient(180deg, #DCD3E6, #C8BCD8); }
  .estrellas { background: radial-gradient(circle, #fff 0 1.2px, transparent 1.8px) 0 0 / 97px 83px; }
  .piso#modelos::before { background: linear-gradient(180deg, #C9D6F0, #B3C2E2); }
  .azulejos { background: linear-gradient(180deg, #D8F0E6, #C6E6D8); }
  .piso:not(.azotea) .cuarto::after { background: none; }
  .d-alfombra { background: color-mix(in srgb, var(--c) 28%, transparent); }
  .oficina-marco::before { display: none; }
  /* el diorama 3D de la maqueta (plato girando con 20 muñecos en perspectiva) tarda 80 ms en repintarse,
     casi el triple que cualquier otra planta: en el móvil queda quieto y plano */
  .d-plato, .d-contragiro, .d-pj.anda { animation: none !important; }
  .diorama-escena { transition: none; }
  /* WebKit (20/10): ningún backdrop-filter en nada que se desplace; las tarjetas lo llevaban (blur 14 px) y es
     lo más caro que hay en iOS. Tampoco sombras por filtro en la cabecera fija ni máscaras en el telón. */
  .info, .ficha-inline, .aviso-tu, .globo, .maqueta-pista, .nav, .marca, .cab, .cab::before, .indicador, .menu-btn, .musico-chip, .orden { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .info { background: rgba(255,255,255,.95); }
  .marca-svg { filter: none; }
  .bambalina, .telon::before { -webkit-mask: none; mask: none; }
  .estrellas { animation: none; }   /* titilaban con un filtro de brillo sobre toda la pantalla de la azotea */
  .giro b.sale, .giro b.entra { filter: none; }   /* la palabra que gira en el título entraba y salía con desenfoque */
  .panel, .ficha-inline, .partitura li { animation: none; }
  .bombillas i { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .piso:not(.hero) .info, html.js .piso:not(.hero) .info > *, html.js .piso:not(.en-vista) h2[data-palabras] .w, html.js .hero:not(.visto) .hero-lead .w, .piso .pantalla > * { opacity: 1 !important; transform: none !important; filter: none !important; }
  .ag, .ag-giro, .nubarron, .sol, .ventana::before, .ventana::after, .ventanal::before, .ventanal::after, .maceta::after, .cinta, .aguja, .rack::before, .monitores i::before, .consola::before, .puerta-giratoria::before, .puerta-ascensor::before, .antena::before, .vapor, .btn-grande { animation: none !important; }
  html.js .hero:not(.visto) .hero-titulo > span > i, html.js .hero:not(.visto) .hero-cta, html.js .hero:not(.visto) .nero-gigante { transform: none; opacity: 1; }
}

/* =====================================================================
   v6.1 · detalle: la azotea de verdad, el día que pasa y salas con vida
   ===================================================================== */

/* ---- el cielo: estrellas, luna, avión y la ciudad al fondo ---- */
.estrellas { position: absolute; inset: 0 0 30% 0; opacity: calc(var(--luz) * var(--luz)); transition: opacity 1.5s ease;
  background: radial-gradient(circle, #fff 0 1.2px, transparent 1.8px) 0 0 / 97px 83px, radial-gradient(circle, rgba(255,255,255,.8) 0 1px, transparent 1.6px) 40px 30px / 61px 71px, radial-gradient(circle, #FFF2C6 0 1.6px, transparent 2.4px) 20px 50px / 173px 131px;
  animation: titila 4s ease-in-out infinite alternate; }
@keyframes titila { from { filter: brightness(.7); } to { filter: brightness(1.3); } }
.luna { position: absolute; left: var(--luna-x, 78%); top: var(--luna-y, 16%); translate: -50% -50%; width: clamp(70px, 8vw, 120px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 36% 36%, #FFFBEA, #F3E6B8); box-shadow: 0 0 60px 18px rgba(255,246,214,.35), inset -14px -8px 0 rgba(220,205,160,.45); opacity: 0; transition: opacity 1.5s ease; }
.luna::before, .luna::after { content: ""; position: absolute; border-radius: 50%; background: rgba(214,198,150,.5); }
.luna::before { width: 18%; height: 18%; left: 30%; top: 34%; } .luna::after { width: 11%; height: 11%; left: 58%; top: 58%; }
:root[data-momento="noche"] .luna { opacity: 1; }
:root[data-momento="noche"] .sol { opacity: 0; }
:root[data-momento="amanecer"] .sol, :root[data-momento="atardecer"] .sol { background: radial-gradient(circle, #FFF1C9 0 30%, #FFB36B 70%); box-shadow: 0 0 100px 40px rgba(255,150,90,.45); }
.avion { position: absolute; top: 9%; left: -60px; width: 46px; height: 8px; border-radius: 6px; background: #fff; opacity: .9; animation: avion 38s linear infinite; animation-delay: -12s; }
.avion::before { content: ""; position: absolute; left: 16px; top: -7px; width: 12px; height: 22px; background: #fff; border-radius: 3px; transform: skewX(-30deg); }
.avion::after { content: ""; position: absolute; right: 100%; top: 3px; width: 160px; height: 2px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.7)); }
:root[data-momento="noche"] .avion { background: #8C88C8; box-shadow: 46px 0 0 -2px #FF6B6B; } :root[data-momento="noche"] .avion::before { background: #8C88C8; } :root[data-momento="noche"] .avion::after { display: none; }
@keyframes avion { to { translate: calc(100vw + 260px) -30px; } }
.ciudad { position: absolute; left: 46%; right: 0; bottom: calc(var(--suelo) + var(--pjh) * .32); height: 30%; display: flex; align-items: flex-end; gap: 1.2%; padding: 0 1%; opacity: .9; }
.ciudad i { flex: 0 0 var(--w); height: var(--h); border-radius: 6px 6px 0 0; background: repeating-linear-gradient(180deg, transparent 0 10px, var(--ventanas-ciudad) 10px 16px) 22% 0 / 18% 100% no-repeat, repeating-linear-gradient(180deg, transparent 0 10px, var(--ventanas-ciudad) 10px 16px) 62% 0 / 18% 100% no-repeat, var(--ciudad); transition: background 1.5s ease; }
.ciudad i:nth-child(3n) { border-radius: 40% 40% 0 0 / 14% 14% 0 0; }
.ciudad i:nth-child(4n+1)::before { content: ""; display: block; width: 3px; height: 22px; margin: -22px auto 0; background: var(--ciudad); }

/* ---- la azotea: pretil, barandilla, caseta, depósito, placas, clima y antena ---- */
.pretil { left: 0; right: 0; bottom: 0; height: calc(var(--suelo) * .46); background: linear-gradient(180deg, #F4EEF8 0 9px, #CFC2DF 9px 12px, #B9AACE 12px); box-shadow: 0 -4px 10px -4px rgba(43,36,64,.35); z-index: 6; }
.pretil::after { content: ""; position: absolute; left: 0; right: 0; top: 18px; bottom: 0; background: repeating-linear-gradient(90deg, transparent 0 58px, rgba(43,36,64,.08) 58px 60px); }
.azotea { --medio: calc(var(--suelo) * .52); --fondo: calc(var(--suelo) * .8); --frente: calc(var(--suelo) * .5); }
.barandilla { left: 0; right: 0; bottom: calc(var(--suelo) - 2px); height: calc(var(--pjh) * .42); z-index: 1;
  background: linear-gradient(180deg, #8E83A8 0 5px, transparent 5px) , repeating-linear-gradient(90deg, #A79DBE 0 4px, transparent 4px 46px); background-size: 100% 100%, 100% calc(100% - 5px); background-position: 0 0, 0 5px; background-repeat: no-repeat; opacity: .9; }
.caseta { left: 50%; bottom: calc(var(--suelo) - 4px); width: calc(var(--pjh) * 1.0); height: calc(var(--pjh) * 1.3); background: linear-gradient(180deg, #EFE8F5, #DCD1E8); border-radius: 10px 10px 0 0; box-shadow: inset -10px 0 0 rgba(43,36,64,.06), 0 10px 20px -12px rgba(43,36,64,.4); z-index: 2; }
.caseta::before { content: ""; position: absolute; left: -6%; right: -6%; top: -10px; height: 14px; border-radius: 6px; background: #B9AACE; }
.caseta .puerta { position: absolute; left: 22%; bottom: 0; width: 46%; height: 72%; border-radius: 6px 6px 0 0; background: linear-gradient(90deg, #6A6184, #4F4866); }
.caseta .puerta::after { content: ""; position: absolute; right: 12%; top: 52%; width: 8px; height: 8px; border-radius: 50%; background: #FFD36B; }
.caseta .farol { position: absolute; left: 50%; top: 8%; translate: -50% 0; width: 14px; height: 18px; border-radius: 4px; background: #FFE9A8; box-shadow: 0 0 calc(var(--luz) * 40px) calc(var(--luz) * 14px) rgba(255,211,107,.7); }
.deposito { left: 61%; bottom: calc(var(--suelo) - 4px); width: calc(var(--pjh) * .7); height: calc(var(--pjh) * 1.25); z-index: 1;
  background: linear-gradient(90deg, #8C82A8 0 6%, transparent 6% 94%, #8C82A8 94%) 0 100% / 100% 30% no-repeat; }
.deposito::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 72%; border-radius: 40% 40% 12px 12px / 18% 18% 12px 12px; background: linear-gradient(90deg, #C9BDDC, #F3EEF8 40%, #CFC3E0); box-shadow: inset 0 -8px 0 rgba(43,36,64,.08); }
.deposito::after { content: ""; position: absolute; left: 0; right: 0; top: 28%; height: 6px; background: rgba(43,36,64,.15); box-shadow: 0 calc(var(--pjh) * .2) 0 rgba(43,36,64,.15); }
.placas { left: 9%; bottom: calc(var(--suelo) - 4px); width: calc(var(--pjh) * 1.6); height: calc(var(--pjh) * .55); display: flex; gap: 6%; z-index: 2; }
.placas i { flex: 1; position: relative; transform: perspective(300px) rotateX(38deg); transform-origin: bottom; border-radius: 4px; border: 3px solid #E9E4F2; background: linear-gradient(135deg, rgba(255,255,255,.35), transparent 40%), repeating-linear-gradient(90deg, transparent 0 22%, rgba(255,255,255,.35) 22% 24%), repeating-linear-gradient(180deg, transparent 0 30%, rgba(255,255,255,.35) 30% 33%), #3E56B8; }
.placas i::after { content: ""; position: absolute; left: 44%; top: 100%; width: 12%; height: 30%; background: #8C82A8; }
.climatizador { bottom: calc(var(--suelo) - 4px); width: calc(var(--pjh) * .62); height: calc(var(--pjh) * .45); border-radius: 8px; background: linear-gradient(180deg, #F4F0F8, #DDD4E8); box-shadow: 0 10px 18px -12px rgba(43,36,64,.4); z-index: 2; display: grid; place-items: center; }
.climatizador i { width: 62%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #4F4866 0 14%, transparent 15%), conic-gradient(#8C82A8 0 22%, transparent 22% 33%, #8C82A8 33% 55%, transparent 55% 66%, #8C82A8 66% 88%, transparent 88%); border: 4px solid #B9AACE; animation: gira 1.4s linear infinite; }
.antena { height: calc(var(--pjh) * 1.6); z-index: 1; }
.parabolica { position: absolute; left: -32px; top: 32%; width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle at 60% 40%, #fff, #D6CCE6); border: 3px solid #9C90B4; transform: rotate(-30deg) scaleX(.55); }
.guirnalda { position: absolute; left: 1%; width: 45%; bottom: calc(var(--suelo) + var(--pjh) * .3); height: calc(var(--pjh) * .16); overflow: visible; z-index: 3; }
.bombillas { left: 1%; width: 45%; bottom: calc(var(--suelo) + var(--pjh) * .3); height: calc(var(--pjh) * .16); z-index: 3; }
.bombillas i { position: absolute; left: var(--x); top: var(--y); width: 10px; height: 14px; border-radius: 50% 50% 45% 45%; translate: -50% 0; background: #FFE9A8; box-shadow: 0 0 calc(4px + var(--luz) * 22px) calc(var(--luz) * 6px) rgba(255,211,107,.85); animation: bombilla 2.6s ease-in-out infinite; }
.bombillas i:nth-child(2n) { background: #FFC0CF; animation-delay: -1.3s; } .bombillas i:nth-child(3n) { background: #C6F7EC; animation-delay: -.7s; }
@keyframes bombilla { 0%, 100% { opacity: calc(.55 + var(--luz) * .45); } 50% { opacity: calc(.35 + var(--luz) * .6); } }
@media (max-width: 760px) { .placas, .climatizador, .deposito, .antena { display: none; } .caseta { left: 34%; } .ciudad { left: 0; height: 18%; } .guirnalda, .bombillas { width: 98%; } }

/* noche en la azotea: el texto se aclara */
:root[data-momento="noche"] .azotea .hero-titulo, :root[data-momento="noche"] .azotea .hero-lead { color: #fff; }
:root[data-momento="noche"] .azotea .giro b { filter: brightness(1.7) saturate(1.2); }
:root[data-momento="noche"] .cab:not(.pegada) .marca { color: #fff; }
:root[data-momento="atardecer"] .azotea .hero-lead { color: #2B2440; }

/* ---- comunes a todas las salas: techo con focos y rodapié ---- */
.techo { left: 0; right: 0; top: 0; height: 14px; background: rgba(255,255,255,.75); z-index: 1; }
.techo::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 46vh; pointer-events: none;
  background: radial-gradient(ellipse 34px 6px at 50% 0, #FFF6D6 70%, transparent 72%) 0 0 / 220px 100% repeat-x, radial-gradient(ellipse 110px 260px at 50% 0, rgba(255,240,200, calc(.18 + var(--luz) * .3)), transparent 70%) 0 0 / 220px 100% repeat-x; }
.rodapie { left: 0; right: 0; bottom: var(--suelo); height: 10px; background: color-mix(in srgb, var(--tono) 30%, #fff); box-shadow: 0 -1px 0 rgba(43,36,64,.06); z-index: 1; }
.piso:not(.azotea) .cuarto::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: linear-gradient(180deg, rgba(20,16,60, calc(var(--luz) * .12)), transparent 60%); }

/* ---- reuniones ---- */
.ventana.persiana::after { left: 0; right: 0; top: 0; width: auto; height: 34%; border-radius: 0; filter: none; animation: none; background: repeating-linear-gradient(180deg, #fff 0 5px, #EEE7F4 5px 8px); box-shadow: 0 3px 4px -2px rgba(43,36,64,.25); }
.lampara.colgante { width: clamp(70px, 7vw, 110px); }
.lampara.colgante::after { background: var(--coral); border-radius: 50% 50% 8px 8px / 80% 80% 8px 8px; box-shadow: 0 50px 70px calc(var(--luz) * 10px) rgba(255,214,107, calc(.5 + var(--luz) * .35)); }
.pizarra { width: clamp(150px, 15vw, 240px); }
.pizarra .garabato { display: block; height: 46px; margin-top: 4px; background: linear-gradient(90deg, var(--coral) 0 20%, transparent 20%) 0 100% / 100% 30% no-repeat, linear-gradient(90deg, transparent 0 26%, var(--menta) 26% 46%, transparent 46%) 0 100% / 100% 60% no-repeat, linear-gradient(90deg, transparent 0 52%, var(--lila) 52% 72%, transparent 72%) 0 100% / 100% 85% no-repeat, linear-gradient(90deg, transparent 0 78%, var(--sol) 78% 98%, transparent 98%) 0 100% / 100% 45% no-repeat; border-bottom: 2px solid #D8CFE3; }
.mampara { left: 14%; right: 14%; bottom: calc(var(--pared) - 2px); height: calc(var(--pjh) * 1.45); border-radius: 12px 12px 0 0; background: linear-gradient(105deg, rgba(255,255,255,.35), rgba(255,255,255,.12) 40%, rgba(255,255,255,.3)); border: 4px solid rgba(255,255,255,.85); border-bottom: 0; z-index: 0;
  box-shadow: inset 0 0 0 1px rgba(43,36,64,.05); }
.mampara::before { content: ""; position: absolute; left: 0; right: 0; top: 38%; height: 16%; background: rgba(255,255,255,.45); }
.mampara::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 3px), rgba(255,255,255,.85) calc(25% - 3px) 25%); }
.silla { left: calc(var(--x) - var(--pjh) * .04); bottom: calc(var(--fondo) - var(--pjh) * .02); width: calc(var(--pjh) * .62); height: calc(var(--pjh) * .7); z-index: 1; }
.silla::before { content: ""; position: absolute; left: 6%; right: 6%; top: 0; height: 74%; border-radius: 22px 22px 10px 10px; background: linear-gradient(180deg, color-mix(in srgb, var(--tono) 55%, #4F4866), color-mix(in srgb, var(--tono) 40%, #2B2440)); box-shadow: inset 0 4px 0 rgba(255,255,255,.25); }
.silla::after { content: ""; position: absolute; left: 46%; bottom: 0; width: 8%; height: 26%; background: #4F4866; box-shadow: calc(var(--pjh) * -.1) 100% 0 -2px #4F4866; }
.mesa-reunion > i, .escritorio > i, .mesa-alta > i, .consola > i { position: absolute; bottom: 100%; }
.taza { width: 16px; height: 18px; border-radius: 0 0 6px 6px; background: #fff; box-shadow: inset 0 -6px 0 rgba(255,122,89,.35), 0 2px 3px rgba(43,36,64,.25); margin-bottom: -4px; }
.taza::after { content: ""; position: absolute; right: -6px; top: 4px; width: 7px; height: 8px; border: 3px solid #fff; border-left: 0; border-radius: 0 6px 6px 0; }
.taza.humea::before { content: ""; position: absolute; left: 3px; bottom: 100%; width: 10px; height: 16px; border-radius: 50%; background: rgba(255,255,255,.75); filter: blur(2px); animation: vapor 2.4s ease-in-out infinite; }
.portatil { width: 44px; height: 28px; background: linear-gradient(180deg, #4F4866, #2B2440); border-radius: 4px 4px 0 0; margin-bottom: -6px; box-shadow: inset 0 0 0 3px #6A6184; }
.portatil::after { content: ""; position: absolute; left: 30%; top: 30%; width: 40%; height: 30%; border-radius: 50%; background: var(--sol); opacity: .6; }
.papeles { width: 36px; height: 6px; background: #fff; box-shadow: 2px -3px 0 #F2ECF7, 4px -6px 0 #fff; margin-bottom: -3px; rotate: -4deg; }

/* ---- departamentos ---- */
.escritorio { --c: var(--tono); }
.escritorio::before { background: linear-gradient(180deg, transparent 0 18%, color-mix(in srgb, var(--c) 70%, #fff) 18% 24%, transparent 24% 34%, rgba(255,255,255,.55) 34% 38%, transparent 38% 48%, color-mix(in srgb, var(--c) 70%, #fff) 48% 52%, transparent 52% 62%, rgba(255,255,255,.4) 62% 66%, transparent 66%) 18% 0 / 64% 100% no-repeat, linear-gradient(180deg, #3A3357, #2B2440); box-shadow: 0 0 calc(10px + var(--luz) * 16px) color-mix(in srgb, var(--c) 60%, transparent); }
.escritorio > span { position: absolute; left: 8%; right: 8%; top: calc(100% + 6px); padding: 6px 4px; border-radius: 8px; background: color-mix(in srgb, var(--c) 75%, #fff); font: 800 clamp(.68rem, .9vw, .86rem) var(--display); text-align: center; color: var(--ink); letter-spacing: -0.01em; box-shadow: 0 6px 12px -8px rgba(43,36,64,.4); z-index: 1; }
.escritorio::after { z-index: 0; }
.flexo { left: 8%; width: 6px; height: calc(var(--pjh) * .22); background: #4F4866; rotate: 18deg; transform-origin: bottom; }
.flexo::after { content: ""; position: absolute; left: -8px; top: -6px; width: 26px; height: 14px; border-radius: 14px 14px 4px 4px; background: var(--coral); rotate: -40deg; box-shadow: 10px 16px 24px calc(var(--luz) * 6px) rgba(255,211,107, calc(.25 + var(--luz) * .5)); }
.escritorio > .taza { left: 82%; }
.cactus { left: 82%; width: 14px; height: 26px; border-radius: 8px 8px 2px 2px; background: #4FB873; box-shadow: 0 10px 0 -2px #F7B8A0; }
.postits { left: 46%; top: calc(var(--cab-alto) + 40px); width: min(9vw, 140px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.postits i { aspect-ratio: 1; background: var(--c); box-shadow: 0 4px 6px -3px rgba(43,36,64,.3); rotate: calc((var(--r, 1) * 4deg)); }
.postits i:nth-child(2n) { --r: -1; } .postits i:nth-child(3n) { --r: 2; }

/* ---- pasillo ---- */
.puerta-ascensor::before { content: "▲ " attr(data-n) " ▼"; }
.cuadro { bottom: calc(var(--base) + var(--pjh) * 1.02); width: clamp(70px, 7vw, 120px); aspect-ratio: 4 / 5; border: 6px solid #fff; border-radius: 6px; background: radial-gradient(circle at 35% 40%, var(--c1) 0 28%, transparent 29%), radial-gradient(circle at 68% 66%, var(--c2) 0 22%, transparent 23%), #FFF8F1; box-shadow: 0 10px 18px -12px rgba(43,36,64,.45); }
.cuadro.alto { aspect-ratio: 3 / 5; background: linear-gradient(160deg, var(--c1) 0 45%, transparent 45%), linear-gradient(20deg, var(--c2) 0 40%, transparent 40%), #FFF8F1; }
.senal { left: 6%; bottom: calc(var(--base) + var(--puerta) + 46px); padding: 6px 12px; border-radius: 8px; background: #2B2440; color: #fff; font: 600 .76rem var(--body); white-space: nowrap; }
.senal b { color: var(--menta); }
.alfombra { left: 30%; width: 50%; bottom: calc(var(--base) - 14px); height: 22px; border-radius: 50%; background: color-mix(in srgb, var(--tono) 55%, #2B2440); opacity: .35; z-index: 0; }
.banco { left: 44%; bottom: var(--base); width: calc(var(--pjh) * .9); height: calc(var(--pjh) * .2); z-index: 5; background: linear-gradient(180deg, #FFB36B 0 30%, transparent 30%), linear-gradient(90deg, #6A6184 0 6%, transparent 6% 94%, #6A6184 94%); border-radius: 8px 8px 0 0; }
.fuente { left: 85%; bottom: calc(var(--pared) - 2px); width: calc(var(--pjh) * .3); height: calc(var(--pjh) * .85); border-radius: 8px; background: linear-gradient(180deg, transparent 0 32%, #F2ECF7 32%); z-index: 2; box-shadow: 0 10px 16px -12px rgba(43,36,64,.4); }
.fuente i { position: absolute; left: 10%; right: 10%; top: 0; height: 36%; border-radius: 40% 40% 10px 10px; background: linear-gradient(180deg, rgba(160,210,255,.85), rgba(110,170,255,.85)); }
.fuente i::after { content: ""; position: absolute; left: 40%; top: 30%; width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: burbujita 2.8s ease-in infinite; }
@keyframes burbujita { 0% { translate: 0 20px; opacity: 0; } 30% { opacity: 1; } 100% { translate: 4px -10px; opacity: 0; } }

/* ---- gimnasio ---- */
.espaldera { left: 40%; bottom: calc(var(--pared) - 2px); width: calc(var(--pjh) * .55); height: calc(var(--pjh) * 1.4); z-index: 1; background: linear-gradient(90deg, #E8B98F 0 10%, transparent 10% 90%, #E8B98F 90%), repeating-linear-gradient(180deg, transparent 0 calc(var(--pjh) * .12), #F2CFA9 calc(var(--pjh) * .12) calc(var(--pjh) * .14)); border-radius: 4px; }
.pelota { left: 48%; bottom: var(--base); width: calc(var(--pjh) * .42); aspect-ratio: 1; border-radius: 50%; z-index: 3; background: radial-gradient(circle at 34% 30%, #fff 0 8%, #8E6CFF 9% 100%); box-shadow: inset -8px -10px 0 rgba(43,36,64,.18); animation: rebota 3.4s ease-in-out infinite; }
@keyframes rebota { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; scale: 1.02 .98; } }
.pesas-rusas { left: 15%; bottom: var(--base); display: flex; gap: 8px; z-index: 3; }
.pesas-rusas i { width: calc(var(--pjh) * .13); aspect-ratio: 1; border-radius: 50% 50% 40% 40%; background: var(--c); box-shadow: inset -4px -4px 0 rgba(43,36,64,.2); position: relative; }
.pesas-rusas i::before { content: ""; position: absolute; left: 22%; right: 22%; top: -38%; height: 50%; border: 4px solid #4F4866; border-bottom: 0; border-radius: 10px 10px 0 0; }
.esterilla { left: 22%; bottom: calc(var(--base) - 8px); width: calc(var(--pjh) * 1.2); height: 10px; border-radius: 6px; background: var(--menta); z-index: 2; opacity: .85; }
.botella { bottom: calc(var(--base) + var(--pjh) * .5); width: 12px; height: 26px; border-radius: 4px 4px 3px 3px; background: linear-gradient(180deg, #4F4866 0 18%, rgba(160,210,255,.9) 18%); z-index: 6; }

/* ---- servidores ---- */
.piso#modelos::before { background: linear-gradient(90deg, transparent 0 calc(100% - 2px), rgba(43,36,64,.12) calc(100% - 2px)) 0 0 / 80px 100%, radial-gradient(circle, rgba(43,36,64,.18) 0 1.4px, transparent 2px) 0 0 / 10px 10px, linear-gradient(180deg, #C9D6F0, #B3C2E2); }
.bandeja { left: 2%; width: 30%; top: calc(var(--cab-alto) - 10px); height: 14px; border-radius: 4px; background: repeating-linear-gradient(90deg, #8C82A8 0 6px, transparent 6px 14px), #B9AACE; }
.cables { position: absolute; left: 0; top: calc(var(--cab-alto)); width: 100%; height: calc(100% - var(--cab-alto) - var(--base) - var(--pjh) * 1.45); overflow: visible; z-index: 1; fill: none; stroke-width: 3; vector-effect: non-scaling-stroke; }
.cables path { stroke: #6A6184; vector-effect: non-scaling-stroke; } .cables path:nth-child(2) { stroke: var(--coral); } .cables path:nth-child(3) { stroke: var(--menta); }
.rack b { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font: 700 .64rem var(--mono); color: var(--menta); text-transform: lowercase; letter-spacing: .02em; }
.rejilla { left: 34%; top: calc(var(--cab-alto) + 30px); width: clamp(90px, 9vw, 150px); height: 44px; border-radius: 8px; background: repeating-linear-gradient(180deg, #E8E2F0 0 4px, #CFC4DE 4px 8px); box-shadow: 0 6px 12px -8px rgba(43,36,64,.4); }

/* ---- cafetería ---- */
.menu { left: 40%; top: calc(var(--cab-alto) + 28px); width: clamp(130px, 12vw, 200px); padding: 12px 14px; border-radius: 10px; background: #2B2440; color: #fff; display: grid; gap: 3px; border: 6px solid #8C6B4F; box-shadow: 0 12px 22px -14px rgba(43,36,64,.6); font: 600 .78rem var(--body); }
.menu b { font: 800 1rem var(--display); color: var(--sol); margin-bottom: 2px; }
.menu span::before { content: "· "; color: var(--coral); }
.nevera { left: 33%; bottom: calc(var(--pared) - 2px); width: calc(var(--pjh) * .5); height: calc(var(--pjh) * 1.2); border-radius: 10px; background: linear-gradient(90deg, #F4F0F8, #E2DAEC); box-shadow: 0 10px 18px -12px rgba(43,36,64,.4); z-index: 1; }
.nevera::before { content: ""; position: absolute; left: 0; right: 0; top: 36%; height: 3px; background: #CFC4DE; }
.nevera i { position: absolute; right: 12%; top: 12%; width: 5px; height: 18%; border-radius: 3px; background: #B9AACE; box-shadow: 0 calc(var(--pjh) * .42) 0 #B9AACE; }
.barra .vitrina { position: absolute; left: 74%; bottom: 100%; width: 22%; height: calc(var(--pjh) * .16); border-radius: 8px 8px 0 0; background: radial-gradient(ellipse 30% 26% at 30% 78%, #E8A85C 96%, transparent), radial-gradient(ellipse 30% 26% at 70% 78%, #E8A85C 96%, transparent), rgba(220,235,255,.55); border: 2px solid rgba(255,255,255,.9); border-bottom: 0; }
.taburete { bottom: var(--base); width: calc(var(--pjh) * .26); height: calc(var(--pjh) * .32); z-index: 6; background: linear-gradient(180deg, var(--coral) 0 16%, transparent 16%), linear-gradient(90deg, transparent 0 44%, #6A6184 44% 56%, transparent 56%); }
.taburete::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: 0; height: 4px; border-radius: 4px; background: #6A6184; }
.mesa-alta > .taza { left: 40%; }

/* ---- baño ---- */
.azulejos { left: 0; right: 0; bottom: var(--suelo); height: 48%; background: linear-gradient(90deg, rgba(255,255,255,.55) 0 2px, transparent 2px) 0 0 / 34px 34px, linear-gradient(180deg, rgba(255,255,255,.55) 0 2px, transparent 2px) 0 0 / 34px 34px, color-mix(in srgb, var(--tono) 22%, #fff); z-index: 0; }
.jabon { bottom: calc(var(--pared) + var(--pjh) * .52); width: 14px; height: 30px; border-radius: 4px 4px 6px 6px; background: linear-gradient(180deg, #4F4866 0 22%, var(--rosa) 22%); z-index: 2; }
.secamanos { left: 36%; bottom: calc(var(--pared) + var(--pjh) * .62); width: calc(var(--pjh) * .32); height: calc(var(--pjh) * .2); border-radius: 10px 10px 16px 16px; background: linear-gradient(180deg, #F4F0F8, #D9CFE6); box-shadow: 0 8px 14px -10px rgba(43,36,64,.4); z-index: 2; }
.secamanos::after { content: ""; position: absolute; left: 30%; right: 30%; bottom: -4px; height: 6px; border-radius: 3px; background: #4F4866; }
.maceta.grande { width: calc(var(--pjh) * .5); }

/* ---- sala de control ---- */
.en-directo { left: 64%; top: calc(var(--cab-alto) + 34px); padding: 6px 12px; border-radius: 999px; background: #E2463F; color: #fff; font: 800 .74rem var(--display); text-transform: uppercase; letter-spacing: .06em; animation: parpadeo 1.6s ease-in-out infinite; }
@media (max-width: 1180px) { .en-directo { display: none; } }
.semaforo { left: 4%; width: 14px; height: calc(var(--pjh) * .3); border-radius: 6px; background: radial-gradient(circle at 50% 18%, #E2463F 0 4px, transparent 5px), radial-gradient(circle at 50% 50%, #FFC543 0 4px, transparent 5px), radial-gradient(circle at 50% 82%, #2FC595 0 4px, transparent 5px), #2B2440; }
.consola > .taza { left: 86%; }

/* ---- hall ---- */
.letras-pared { left: 6%; bottom: calc(var(--base) + var(--pjh) * 1.12); font: 900 clamp(2.4rem, 6vw, 5.4rem)/1 var(--display); letter-spacing: -0.05em; color: color-mix(in srgb, var(--tono) 55%, #fff); text-shadow: 0 4px 0 color-mix(in srgb, var(--tono) 70%, #B07A6A); }
.letras-pared span { color: color-mix(in srgb, var(--lila) 55%, #fff); font-weight: 600; margin-left: .04em; }
@media (max-width: 860px) { .letras-pared { display: none; } }
.alfombra.roja { left: 4%; width: 52%; background: var(--coral); opacity: .3; }
.sofa { left: 60%; bottom: var(--base); width: calc(var(--pjh) * 1.1); height: calc(var(--pjh) * .4); z-index: 5; border-radius: 16px 16px 6px 6px; background: linear-gradient(180deg, transparent 0 40%, color-mix(in srgb, var(--lila) 70%, #fff) 40%), radial-gradient(ellipse 50% 70% at 50% 100%, color-mix(in srgb, var(--lila) 55%, #fff) 0 98%, transparent); box-shadow: 0 10px 18px -12px rgba(43,36,64,.45); }
.sofa::before, .sofa::after { content: ""; position: absolute; bottom: 0; width: 14%; height: 70%; border-radius: 12px 12px 4px 4px; background: color-mix(in srgb, var(--lila) 75%, #4F4866); }
.sofa::before { left: -4%; } .sofa::after { right: -4%; }
.timbre { left: 82%; width: 22px; height: 12px; border-radius: 12px 12px 2px 2px; background: #FFC543; box-shadow: 0 2px 0 #B8780A; }

/* ---- la calle: farolas y árboles en la acera ---- */
.acera { position: relative; height: 110px; margin: -34px 0 0; }
.farola { position: absolute; bottom: 0; width: 6px; height: 96px; background: #2B2440; border-radius: 3px; }
.farola::before { content: ""; position: absolute; left: -10px; top: -8px; width: 26px; height: 14px; border-radius: 12px 12px 4px 4px; background: #4F4866; }
.farola::after { content: ""; position: absolute; left: -7px; top: 4px; width: 20px; height: 8px; border-radius: 50%; background: #FFE9A8; box-shadow: 0 0 calc(var(--luz) * 50px) calc(var(--luz) * 16px) rgba(255,211,107,.6); opacity: calc(.3 + var(--luz) * .7); }
.arbolito { position: absolute; bottom: 0; width: 10px; height: 40px; background: #8C6B4F; border-radius: 3px; }
.arbolito::before { content: ""; position: absolute; left: 50%; bottom: 28px; translate: -50% 0; width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #9BE27F, #3FA36A 72%); box-shadow: 22px 10px 0 -8px #4FB873, -20px 12px 0 -10px #4FB873; animation: hoja 6s ease-in-out infinite; transform-origin: 50% 100%; }
@media (prefers-reduced-motion: reduce) { .avion, .estrellas, .bombillas i, .climatizador i, .pelota, .fuente i::after, .arbolito::before, .en-directo { animation: none !important; } }

/* =====================================================================
   v6.2 · densidad: más muebles y gente bien colocada
   ===================================================================== */
.pajaros { position: absolute; left: -10%; top: 22%; width: 90px; height: 40px; opacity: calc(1 - var(--luz)); animation: pajaros 46s linear infinite; animation-delay: -8s; }
.pajaros i { position: absolute; width: 18px; height: 8px; border-top: 2.5px solid #4F4866; border-radius: 50% 50% 0 0; }
.pajaros i::after { content: ""; position: absolute; left: 100%; top: -2.5px; width: 18px; height: 8px; border-top: 2.5px solid #4F4866; border-radius: 50% 50% 0 0; }
.pajaros i { animation: aleteo 600ms ease-in-out infinite alternate; }
.pajaros i:nth-child(1) { left: 0; top: 10px; } .pajaros i:nth-child(2) { left: 34px; top: 0; animation-delay: -.2s; } .pajaros i:nth-child(3) { left: 62px; top: 18px; animation-delay: -.4s; scale: .8; }
@keyframes aleteo { to { scale: 1 .5; } }
@keyframes pajaros { to { translate: 125vw -40px; } }

/* reuniones */
.tele { left: 44%; top: calc(var(--cab-alto) + 30px); width: clamp(160px, 16vw, 260px); aspect-ratio: 16 / 9; border-radius: 10px; border: 7px solid #2B2440; background: linear-gradient(160deg, #3A3357, #2B2440); padding: 10px 12px; display: grid; align-content: start; gap: 2px; color: #fff; box-shadow: 0 16px 30px -18px rgba(43,36,64,.6), 0 0 calc(var(--luz) * 30px) rgba(142,108,255,.4); }
.tele b { font: 800 .9rem var(--display); color: var(--sol); } .tele span { font-size: .72rem; opacity: .8; }
.tele i { position: absolute; left: 12px; right: 12px; bottom: 10px; height: 34%; background: linear-gradient(90deg, var(--menta) 0 30%, transparent 30% 34%, var(--coral) 34% 58%, transparent 58% 62%, var(--cielo) 62% 84%, transparent 84%); clip-path: polygon(0 60%, 30% 60%, 30% 20%, 34% 20%, 34% 0, 58% 0, 58% 40%, 62% 40%, 62% 30%, 84% 30%, 84% 100%, 0 100%); opacity: .9; }
.aparador { left: 2%; bottom: calc(var(--pared) - 2px); width: calc(var(--pjh) * .62); height: calc(var(--pjh) * .42); border-radius: 8px 8px 2px 2px; background: linear-gradient(180deg, #fff 0 12%, #EDE5F4 12%); box-shadow: 0 10px 18px -12px rgba(43,36,64,.4), inset 0 -4px 0 rgba(43,36,64,.06); z-index: 1; }
.aparador::after { content: ""; position: absolute; left: 49%; top: 22%; bottom: 10%; width: 2px; background: rgba(43,36,64,.12); }
.aparador .jarra { position: absolute; left: 14%; bottom: 100%; width: 18px; height: 30px; border-radius: 4px 4px 8px 8px; background: linear-gradient(180deg, rgba(200,225,255,.6) 0 30%, rgba(140,190,255,.8) 30%); border: 2px solid #fff; }
.aparador .vaso { position: absolute; bottom: 100%; width: 12px; height: 16px; border-radius: 2px 2px 4px 4px; background: rgba(220,235,255,.85); border: 2px solid #fff; }
.aparador .vaso:nth-of-type(2) { left: 50%; } .aparador .vaso:nth-of-type(3) { left: 66%; }
.perchero { left: 87%; bottom: calc(var(--pared) - 2px); width: 8px; height: calc(var(--pjh) * 1.15); background: #8C6B4F; border-radius: 4px; z-index: 1; }
.perchero::before { content: ""; position: absolute; left: -18px; right: -18px; bottom: 0; height: 6px; border-radius: 4px; background: #8C6B4F; }
.perchero i { position: absolute; left: -16px; top: 6px; width: 30px; height: calc(var(--pjh) * .38); border-radius: 12px 12px 6px 6px; background: color-mix(in srgb, var(--coral) 70%, #fff); box-shadow: 18px 4px 0 -2px color-mix(in srgb, var(--cielo) 70%, #fff); }
.papelera { bottom: var(--medio); width: calc(var(--pjh) * .14); height: calc(var(--pjh) * .2); border-radius: 3px 3px 8px 8px; background: repeating-linear-gradient(90deg, #B9AACE 0 4px, #CFC4DE 4px 8px); z-index: 3; }

/* departamentos */
.maceta.peque { width: calc(var(--pjh) * .22); bottom: var(--medio); }
.impresora { left: 90%; bottom: calc(var(--pared) - 2px); width: calc(var(--pjh) * .5); height: calc(var(--pjh) * .52); z-index: 1; background: linear-gradient(180deg, transparent 0 46%, #E6DDF0 46%); }
.impresora::before { content: ""; position: absolute; left: 0; right: 0; top: 20%; height: 30%; border-radius: 8px 8px 0 0; background: linear-gradient(180deg, #F7F3FA, #DCD2E8); box-shadow: inset 0 -6px 0 #4F4866; }
.impresora::after { content: ""; position: absolute; right: 12%; top: 26%; width: 8px; height: 8px; border-radius: 50%; background: var(--menta); box-shadow: 0 0 8px var(--menta); animation: parpadeo 1.6s ease-in-out infinite; }
.impresora .hoja { position: absolute; left: 18%; right: 18%; top: 32%; height: 22%; background: #fff; border-radius: 2px; box-shadow: 0 2px 3px rgba(43,36,64,.2); animation: imprime 5s ease-in-out infinite; z-index: 1; }
@keyframes imprime { 0%, 20% { translate: 0 0; opacity: 0; } 30% { opacity: 1; } 70% { translate: 0 120%; opacity: 1; } 100% { translate: 0 130%; opacity: 0; } }
.reloj-pared { left: 57%; top: calc(var(--cab-alto) + 30px); width: clamp(56px, 5vw, 80px); aspect-ratio: 1; border-radius: 50%; background: #fff; border: 5px solid #2B2440; display: none; }
@media (min-width: 1400px) { .reloj-pared { display: none; } }

/* pasillo: las puertas del ascensor se abren y se cierran */
.puerta-ascensor { background: #3A3357; overflow: hidden; }
.puerta-ascensor > i { position: absolute; top: 0; bottom: 0; width: 50%; background: linear-gradient(90deg, #D7CCE7, #F7F2FB 70%, #CBBEDF); box-shadow: inset -1px 0 0 rgba(43,36,64,.15); }
.puerta-ascensor > i:first-child { left: 0; } .puerta-ascensor > i:last-child { right: 0; transform: scaleX(-1); }
.puerta-ascensor.abre > i:first-child { animation: abre-izq 14s ease-in-out infinite; } .puerta-ascensor.abre > i:last-child { animation: abre-der 14s ease-in-out infinite; }
.puerta-ascensor { overflow: visible; } .puerta-ascensor > i { overflow: hidden; }
.puerta-ascensor::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 30% at 50% 0, rgba(255,240,200,.55), transparent 70%); pointer-events: none; }
@keyframes abre-izq { 0%, 55%, 100% { translate: 0 0; } 62%, 86% { translate: -92% 0; } }
@keyframes abre-der { 0%, 55%, 100% { translate: 0 0; } 62%, 86% { translate: 92% 0; } }
.corcho { left: 64%; bottom: calc(var(--pared) + var(--pjh) * .7); width: clamp(110px, 10vw, 170px); height: calc(var(--pjh) * .5); border-radius: 8px; border: 6px solid #C49A6C; background: radial-gradient(circle, rgba(140,90,40,.25) 0 1px, transparent 1.5px) 0 0 / 6px 6px, #E2BD8E; display: flex; flex-wrap: wrap; gap: 8%; padding: 8%; }
.corcho i { width: 38%; height: 34%; background: var(--c); rotate: var(--r); box-shadow: 0 3px 4px -2px rgba(43,36,64,.3); position: relative; }
.corcho i::before { content: ""; position: absolute; left: 45%; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--coral); }
@media (max-width: 1100px) { .corcho { display: none; } }

/* gimnasio */
.taquillas { left: 88%; bottom: calc(var(--pared) - 2px); width: calc(var(--pjh) * .8); height: calc(var(--pjh) * 1.15); display: flex; gap: 3px; z-index: 1; }
.taquillas i { flex: 1; border-radius: 4px; background: linear-gradient(180deg, transparent 0 10%, rgba(43,36,64,.18) 10% 12%, transparent 12% 16%, rgba(43,36,64,.18) 16% 18%, transparent 18%), color-mix(in srgb, var(--cielo) 60%, #fff); position: relative; }
.taquillas i::after { content: ""; position: absolute; right: 18%; top: 50%; width: 5px; height: 14px; border-radius: 3px; background: #6A6184; }
.toallero { left: 81%; bottom: calc(var(--pared) + var(--pjh) * .62); width: calc(var(--pjh) * .3); height: 6px; background: #B9AACE; border-radius: 3px; display: flex; justify-content: space-around; }
.toallero i { width: 34%; height: calc(var(--pjh) * .3); margin-top: 3px; border-radius: 4px 4px 8px 8px; background: var(--c); }
@media (max-width: 1100px) { .taquillas, .toallero { display: none; } }

/* servidores */
.mesa-tecnica { left: 35%; bottom: calc(var(--medio) + var(--pjh) * .3); width: clamp(140px, 13vw, 210px); height: 12px; background: #fff; border-radius: 6px; z-index: 5; box-shadow: 0 10px 18px -12px rgba(43,36,64,.45); }
.mesa-tecnica::after { content: ""; position: absolute; left: 6%; right: 6%; top: 100%; height: calc(var(--pjh) * .3); background: linear-gradient(90deg, #DCD1E8 0 8%, transparent 8% 92%, #DCD1E8 92%); }
.extintor { left: 30%; bottom: calc(var(--pared) + 6px); width: 18px; height: 46px; border-radius: 8px 8px 4px 4px; background: linear-gradient(90deg, #C83A33, #E2463F 50%, #B5302A); z-index: 1; }
.extintor::before { content: ""; position: absolute; left: 4px; top: -8px; width: 10px; height: 10px; background: #2B2440; border-radius: 3px; }

/* baño */
.dispensador { left: 39%; bottom: calc(var(--pared) + var(--pjh) * .95); width: calc(var(--pjh) * .2); height: calc(var(--pjh) * .26); border-radius: 6px; background: linear-gradient(180deg, #fff, #E6DEF0); box-shadow: 0 6px 12px -8px rgba(43,36,64,.4); z-index: 2; }
.dispensador::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: -8px; height: 10px; background: #fff; border-radius: 0 0 4px 4px; }

/* hall */
.directorio { left: 47%; bottom: calc(var(--pared) + var(--pjh) * .7); width: clamp(120px, 10vw, 170px); padding: 10px 12px; border-radius: 10px; background: #2B2440; color: #fff; display: grid; gap: 2px; font: 600 .68rem var(--body); box-shadow: 0 12px 22px -14px rgba(43,36,64,.6); z-index: 1; }
.directorio b { font: 800 .8rem var(--display); color: var(--sol); margin-bottom: 3px; }
.directorio span { display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.directorio span i { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; background: rgba(255,255,255,.14); color: var(--sol); font-style: normal; font-weight: 800; font-size: .62rem; }
@media (max-width: 1100px) { .directorio { display: none; } }
.lampara-pie { left: 79%; bottom: var(--medio); width: 6px; height: calc(var(--pjh) * .95); background: #6A6184; z-index: 2; }
.lampara-pie::before { content: ""; position: absolute; left: -22px; top: -26px; width: 50px; height: 34px; border-radius: 10px 10px 4px 4px; background: #FFE9C2; box-shadow: 0 30px 50px calc(var(--luz) * 12px) rgba(255,211,107, calc(.3 + var(--luz) * .4)); }
.lampara-pie::after { content: ""; position: absolute; left: -12px; bottom: 0; width: 30px; height: 6px; border-radius: 4px; background: #6A6184; }
@media (prefers-reduced-motion: reduce) { .pajaros, .pajaros i, .impresora .hoja, .puerta-ascensor > i { animation: none !important; } }

/* ---- móvil: menos gente y menos muebles, cada uno en su sitio ---- */
@media (max-width: 860px) {
  .piso { --pjh: clamp(110px, 17vh, 150px); }
  .ag { left: var(--xm, var(--x)); }
  .ancho { display: none !important; }
  .silla.s1 { --x: 2% !important; } .silla.s2 { --x: 26% !important; } .silla.s3 { --x: 50% !important; } .silla.s4 { --x: 74% !important; }
  .cinta.c1 { left: 40% !important; width: calc(var(--pjh) * .78); } .cinta.c2 { left: 70% !important; width: calc(var(--pjh) * .78); }
  .rack.r1 { left: 2% !important; } .rack.r2 { left: 19% !important; }
  .mesa-alta.m1 { left: 42% !important; } .mesa-alta.m2 { left: 68% !important; }
  .sofa { left: 52%; width: calc(var(--pjh) * .95); }
  .puerta-bano { left: 40%; }
  .escritorio > span { font-size: .62rem; padding: 4px 2px; }
  .mesa-reunion > .portatil, .mesa-reunion > .papeles { display: none; }
}
@media (max-width: 860px) {
  .ficha-inline code { white-space: normal; overflow-wrap: anywhere; }
  .ficha-inline .cron li { flex-wrap: wrap; gap: 2px 10px; }
  .ficha-inline .arbol li { grid-template-columns: 1fr; gap: 2px; }
  .ficha-inline .modelos-ficha li { grid-template-columns: auto auto auto; }
  .ficha-inline .modelos-ficha .ruta { grid-column: 1 / -1; }
}

/* los monitores de departamentos miran a quien está sentado: desde la sala se ve su trasera */
.escritorio::before { background: radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--c) 80%, #fff) 0 9%, transparent 10%), linear-gradient(180deg, #F6F1FA, #DED4EA) !important; border: 3px solid #fff !important; box-shadow: 0 6px 12px -8px rgba(43,36,64,.45); }

/* menú: una sola burbuja que se desliza hasta el enlace activo (estilo Apple) */
.nav { position: relative; }
.nav a { position: relative; z-index: 1; }
.nav a.activo { background: transparent; color: #fff; }
.nav-burbuja { position: absolute; left: 0; top: 0; z-index: 0; border-radius: var(--r-pill); background: var(--ink); box-shadow: 0 6px 14px -6px rgba(43,36,64,.55); opacity: 0; pointer-events: none;
  transition: transform 560ms cubic-bezier(.34, 1.28, .64, 1), width 560ms cubic-bezier(.34, 1.28, .64, 1), height 560ms cubic-bezier(.34, 1.28, .64, 1), opacity 240ms ease; }
.nav-burbuja.ver { opacity: 1; }
.nav-burbuja.sin-transicion { transition: none; }
@media (hover: hover) and (pointer: fine) { .nav a.activo:hover { background: transparent; color: #fff; } }
@media (prefers-reduced-motion: reduce) { .nav-burbuja { transition: opacity 200ms ease; } }

/* globo que ha tenido que apartarse de la cabeza para no tapar nada: sin pico, para no señalar a otro sitio */
.globo.lejos-cabeza::after { opacity: 0; }

/* los muñecos son <figure>: sin esto el navegador les pone 40 px de margen lateral y 1em arriba y abajo,
   y todos quedaban 40 px a la derecha de su silla o su aparato y flotando 16 px sobre el suelo */
.ag { margin: 0; }

/* hueco reservado para los globos entre la ficha de la planta y la cabeza de los muñecos */
.piso:not(.azotea) { padding-bottom: calc(var(--suelo) + var(--pjh) * .92 + 84px); }

/* pantallas anchas y bajas (portátil 1440×900, 1280×760): cada planta debe caber en la pantalla con los muñecos a la vista.
   En ancho los globos tienen sitio a los lados de la ficha, así que sobra el hueco extra de 84 px; y el titular
   se mide también por el alto para que las fichas largas no empujen el suelo fuera de la pantalla. */
@media (min-width: 861px) and (max-height: 1000px) {
  .piso:not(.azotea) { padding-top: calc(var(--cab-alto) + 18px); padding-bottom: calc(var(--suelo) + var(--pjh) * .92 + 24px); }
  .info { gap: 10px; padding: clamp(18px, 2vw, 26px); }
  .info h2 { font-size: clamp(1.8rem, min(3.8vw, 5.4vh), 3.4rem); }
  .info p { font-size: .96rem; line-height: 1.45; }
}

/* los muñecos compiten en profundidad con los muebles uno a uno: si .gente tuviera z-index, todos quedarían
   detrás de las mesas (z 5), también los que pasean por delante (Marta en Departamentos) */
.gente { z-index: auto; }
@media (max-width: 860px) { .ag.sentado-ancho { --y: 0 !important; } }

/* ---- logotipo: sin pastilla, más grande y vivo (17/10) ----
   el corro gira muy despacio, cada mano «respira» con su desfase y al pasar el ratón el corro se cierra un poco */
.marca, .cab.pegada .marca { background: none; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0; margin-left: 0; gap: 12px; font-size: clamp(1.45rem, 1.1rem + .9vw, 1.85rem); }
.marca-svg { width: clamp(44px, 3.6vw, 56px); height: auto; overflow: visible; filter: drop-shadow(0 6px 14px rgba(43,36,64,.18)); }
.marca-svg .corro { transform-origin: 0 0; animation: marca-gira 38s linear infinite; }
.marca-svg .mano { transform-box: fill-box; transform-origin: 50% 50%; animation: marca-respira 3.2s cubic-bezier(.45,0,.55,1) infinite; animation-delay: calc(var(--i) * -0.53s); }
.marca-svg .nucleo { transform-box: fill-box; transform-origin: 50% 50%; animation: marca-late 3.2s ease-in-out infinite; }
.marca-texto { display: inline-flex; align-items: baseline; text-shadow: 0 1px 0 rgba(255,255,255,.7), 0 0 18px rgba(255,255,255,.75); }
.marca .ai { display: inline-block; transition: transform 400ms cubic-bezier(.23,1,.32,1); }
@keyframes marca-gira { to { transform: rotate(360deg); } }
@keyframes marca-respira { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.09) translateY(-1.5px); } }
@keyframes marca-late { 0%, 100% { opacity: .85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.18); } }
@media (hover: hover) and (pointer: fine) {
  .marca:hover .marca-svg .corro { animation-duration: 6s; }
  .marca:hover .ai { transform: translateY(-3px) rotate(-6deg); }
}
.marca:active .marca-svg { transform: scale(.94); transition: transform 120ms ease; }
:root[data-momento="noche"] .cab:not(.pegada) .marca-texto { text-shadow: 0 0 18px rgba(21,23,43,.6); }
@media (prefers-reduced-motion: reduce) { .marca-svg .corro, .marca-svg .mano, .marca-svg .nucleo { animation: none; } }


/* =========================================================================
   Planta 0 · Auditorio: la orquesta (17/10). Tú en el podio con la batuta,
   cada departamento con su instrumento; la ficha es el atril de mando.
   ========================================================================= */
.orquesta-sala { --telon: #5B2A6E; --telon-2: #7A3A8C; }
.orquesta-sala .cuarto { background: radial-gradient(ellipse 60% 55% at 46% 70%, rgba(255,236,170,.35), transparent 70%); }
/* telón a los lados y bambalina arriba, con pliegues */
.telon { top: 0; bottom: 0; width: clamp(26px, 3.6vw, 64px); z-index: 9; background: repeating-linear-gradient(90deg, var(--telon) 0 10px, var(--telon-2) 10px 20px, var(--telon) 20px 26px); box-shadow: 0 0 30px rgba(43,36,64,.35); }
.telon.izq { left: 0; border-radius: 0 0 40px 0; } .telon.der { right: 0; border-radius: 0 0 0 40px; }
.telon::after { content: ""; position: absolute; left: 0; right: 0; bottom: 30%; height: 14px; background: #FFC543; border-radius: 7px; box-shadow: 0 3px 0 #E5A512; }
.bambalina { left: 0; right: 0; top: 0; height: calc(var(--cab-alto) + 26px); z-index: 8;
  background: radial-gradient(circle at 50% 0, var(--telon-2) 0 20px, transparent 21px) 0 100% / 48px 26px repeat-x, linear-gradient(var(--telon), var(--telon-2));
  -webkit-mask: radial-gradient(circle at 24px 0, #000 0 26px, transparent 27px) 0 100% / 48px 26px repeat-x, linear-gradient(#000, #000) 0 0 / 100% calc(100% - 22px) no-repeat;
          mask: radial-gradient(circle at 24px 0, #000 0 26px, transparent 27px) 0 100% / 48px 26px repeat-x, linear-gradient(#000, #000) 0 0 / 100% calc(100% - 22px) no-repeat; }
.orquesta-sala .techo { display: none; }
/* focos: conos de luz que se mecen despacio */
.foco { top: calc(var(--cab-alto) + 4px); bottom: var(--frente); width: clamp(150px, 17vw, 300px); z-index: 3; pointer-events: none; transform-origin: 50% 0;
  background: linear-gradient(180deg, rgba(255,240,190,.75), rgba(255,240,190,.12) 80%, transparent); clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
  opacity: calc(.45 + var(--luz, 0) * .4); animation: foco-mece 9s ease-in-out infinite alternate; }
.foco.f1 { left: calc(44% + var(--pjh) * .325 - clamp(75px, 8.5vw, 150px)); animation-duration: 11s; }
.foco.f2 { left: 18%; animation-delay: -3s; } .foco.f3 { left: 64%; animation-delay: -6s; }
@keyframes foco-mece { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
/* partitura gigante en la pared: avanza mientras suena la orquesta */
.pauta { right: 7%; top: calc(var(--cab-alto) + 40px); width: min(30vw, 470px); height: clamp(110px, 15vh, 150px); z-index: 2; border-radius: 18px; background: #fff; box-shadow: 0 16px 30px -18px rgba(43,36,64,.45); overflow: hidden;
  --linea: calc((100% - 36px) / 4); background-image: repeating-linear-gradient(180deg, transparent 0 calc(var(--linea) - 2px), rgba(43,36,64,.22) calc(var(--linea) - 2px) var(--linea)); background-position: 0 16px; background-size: 100% calc(100% - 30px); background-repeat: no-repeat; }
.pauta-clave { position: absolute; left: 12px; top: 50%; translate: 0 -54%; font: 400 clamp(70px, 9vh, 104px)/1 "Noto Music", "Segoe UI Symbol", serif; color: var(--ink); z-index: 1; }
.pauta-notas { position: absolute; left: 70px; top: 0; bottom: 0; display: flex; gap: 26px; align-items: stretch; width: max-content; animation: pauta-avanza 16s linear infinite; animation-play-state: paused; }
.orquesta-sala.suena .pauta-notas { animation-play-state: running; }
.pauta-notas i { position: relative; width: 16px; }
.pauta-notas i::before { content: ""; position: absolute; left: 0; width: 16px; height: 12px; border-radius: 50%; background: var(--c); rotate: -20deg; top: calc(14px + var(--h) * (100% - 40px) / 6); }
.pauta-notas i::after { content: ""; position: absolute; left: 13px; width: 2.5px; height: 34px; border-radius: 2px; background: var(--c); top: calc(14px + var(--h) * (100% - 40px) / 6 - 30px); }
@keyframes pauta-avanza { to { transform: translateX(calc(-50% - 13px)); } }
/* tarima de la fila de atrás, piano de cola, atriles y podio */
.tarima-orq { left: 15%; right: 17%; bottom: calc(var(--fondo) - 6px); height: calc(var(--pjh) * .05 + 6px); z-index: 1; border-radius: 8px 8px 2px 2px; background: linear-gradient(180deg, #E9C49A 0 30%, #C99363 30%); box-shadow: 0 10px 18px -12px rgba(43,36,64,.5); }
.piano { left: 5%; bottom: var(--base); width: calc(var(--pjh) * 1.05); height: calc(var(--pjh) * .34); z-index: 5; }
.piano::before { content: ""; position: absolute; left: 0; right: 0; top: 18%; height: 46%; border-radius: 10px 60px 40px 10px; background: linear-gradient(180deg, #4F4866, #2B2440); box-shadow: 0 14px 22px -14px rgba(43,36,64,.6), inset 0 3px 0 rgba(255,255,255,.18); }
.piano .tapa { position: absolute; left: 8%; right: 6%; top: 0; height: 22%; border-radius: 8px 50px 6px 6px; background: #3A3357; transform-origin: 0 100%; rotate: -14deg; }
.piano .teclas { position: absolute; left: 6%; width: 46%; top: 22%; height: 16%; border-radius: 3px; background: repeating-linear-gradient(90deg, #fff 0 9px, #2B2440 9px 10px); }
.piano .teclas::after { content: ""; position: absolute; inset: 0 0 45% 0; background: repeating-linear-gradient(90deg, transparent 0 6px, #2B2440 6px 11px, transparent 11px 20px); }
.piano .pata { position: absolute; bottom: 0; width: 7%; height: 40%; border-radius: 4px; background: #2B2440; } .piano .p1 { left: 10%; } .piano .p2 { right: 14%; }
.orquesta-sala:has(.con-piano.tocando) .piano .teclas { animation: teclas .5s steps(2) infinite; }
@keyframes teclas { 50% { filter: brightness(.86); } }
.atril { bottom: var(--base); width: calc(var(--pjh) * .2); height: calc(var(--pjh) * .62); z-index: 5; }
.atril::before { content: ""; position: absolute; left: 47%; width: 6%; top: 18%; bottom: 0; border-radius: 3px; background: #3A3357; }
.atril::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 30%; border-radius: 4px; background: #fff repeating-linear-gradient(180deg, transparent 0 5px, rgba(43,36,64,.25) 5px 6px) 0 6px / 100% 60% no-repeat; border: 3px solid #3A3357; rotate: -8deg; }
.podio { left: calc(44% + var(--pjh) * .07); bottom: var(--frente); width: calc(var(--pjh) * .52); height: calc(var(--pjh) * .13); z-index: 8; border-radius: 10px 10px 4px 4px; background: linear-gradient(180deg, #5B4A7A, #2B2440); box-shadow: 0 16px 24px -14px rgba(43,36,64,.6), inset 0 3px 0 rgba(255,255,255,.2); display: grid; place-items: center; }
.podio span { font: 800 .72rem var(--display); letter-spacing: .14em; text-transform: uppercase; color: #FFC543; }

/* instrumentos dentro de la figura: orientación base con rotate/translate; la animación usa transform */
.ag .instr-caja { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.instr { position: absolute; display: block; overflow: visible; filter: drop-shadow(0 4px 6px rgba(43,36,64,.22)); }
.instr.violin { width: 64%; left: 44%; top: 47%; rotate: -26deg; transform-origin: 15% 50%; }
.instr.chelo { width: 42%; left: 31%; top: 40%; }
.instr.trompeta { width: 66%; left: 50%; top: 36%; rotate: -8deg; transform-origin: 0 50%; }
.instr.flauta { width: 82%; left: 40%; top: 44%; rotate: -9deg; transform-origin: 0 50%; }
.instr.timbal { width: 132%; left: -16%; top: 66%; }
.arco { position: absolute; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #3B2A3F, #6B5A70); }
.con-violin .arco { width: 66%; left: 46%; top: 52%; rotate: 22deg; }
.con-chelo .arco { width: 64%; left: 18%; top: 70%; rotate: -6deg; }
.baqueta { position: absolute; width: 30%; height: 4px; border-radius: 2px; background: #3B2A3F; top: 62%; transform-origin: 0 50%; }
.baqueta::after { content: ""; position: absolute; right: -4px; top: -3px; width: 10px; height: 10px; border-radius: 50%; background: #FFF7EC; border: 2px solid #3B2A3F; }
.baqueta.b1 { left: 18%; rotate: 28deg; } .baqueta.b2 { left: 58%; rotate: 28deg; }
.ag.tocando .instr.violin, .ag.tocando .instr.trompeta, .ag.tocando .instr.flauta { animation: instr-mece .9s cubic-bezier(.45,0,.55,1) infinite alternate; }
.ag.tocando .instr.chelo { animation: instr-mece 1.4s cubic-bezier(.45,0,.55,1) infinite alternate; }
.ag.tocando .arco { animation: arco 0.9s cubic-bezier(.45,0,.55,1) infinite alternate; }
.ag.tocando .baqueta.b1 { animation: baqueta .32s ease-in infinite alternate; } .ag.tocando .baqueta.b2 { animation: baqueta .32s ease-in -.16s infinite alternate; }
.ag.tocando.suave .instr, .ag.tocando.suave .arco, .ag.tocando.suave .baqueta { animation-duration: 1.8s; }
@keyframes instr-mece { from { transform: rotate(-4deg) translateY(0); } to { transform: rotate(4deg) translateY(-3%); } }
@keyframes arco { from { transform: translateX(-22%); } to { transform: translateX(22%); } }
@keyframes baqueta { from { transform: rotate(-30deg); } to { transform: rotate(6deg); } }
/* notas que salen de quien toca */
.notas { position: absolute; left: 48%; top: -4%; width: 60%; height: 50%; pointer-events: none; z-index: 4; }
.notas i { position: absolute; bottom: 0; font: 800 calc(var(--pjh) * .13)/1 "Noto Music", system-ui, sans-serif; font-style: normal; color: var(--c); opacity: 0; text-shadow: 0 2px 0 #fff, 0 0 10px #fff; }
.notas i:nth-child(1) { left: 0; } .notas i:nth-child(2) { left: 30%; } .notas i:nth-child(3) { left: 58%; } .notas i:nth-child(4) { left: 16%; }
.ag.tocando .notas i { animation: nota-sube 2.4s cubic-bezier(.23,1,.32,1) infinite; }
.ag.tocando .notas i:nth-child(2) { animation-delay: .6s; } .ag.tocando .notas i:nth-child(3) { animation-delay: 1.2s; } .ag.tocando .notas i:nth-child(4) { animation-delay: 1.8s; }
.ag.tocando.suave .notas i { animation-duration: 3.8s; font-size: calc(var(--pjh) * .09); }
@keyframes nota-sube { 0% { opacity: 0; transform: translate(0, 20%) scale(.6) rotate(-10deg); } 18% { opacity: 1; } 100% { opacity: 0; transform: translate(30%, -220%) scale(1.1) rotate(12deg); } }
/* la batuta de Tú: compás de 4 en bucle y un golpe al dar cada orden */
.batuta { position: absolute; left: 66%; top: 49%; width: 46%; height: 4px; z-index: 4; border-radius: 2px; transform-origin: 0 50%; background: linear-gradient(90deg, #3B2A3F 0 20%, #fff 20%); box-shadow: 0 0 8px rgba(255,255,255,.9); animation: compas 2s cubic-bezier(.45,0,.55,1) infinite; }
.ag.marca-compas .batuta { animation: golpe .7s cubic-bezier(.23,1,.32,1), compas 2s cubic-bezier(.45,0,.55,1) .7s infinite; }
@keyframes compas { 0% { transform: rotate(-38deg); } 25% { transform: rotate(18deg); } 50% { transform: rotate(-8deg); } 75% { transform: rotate(30deg); } 100% { transform: rotate(-38deg); } }
@keyframes golpe { 0% { transform: rotate(-60deg) scale(1.1); } 60% { transform: rotate(26deg); } 100% { transform: rotate(-38deg); } }
/* la decoración de pared no pinta nada en un escenario: solo plantas */
.orquesta-sala .deco .d-pieza:has(.d-estanteria, .d-aparador, .d-neon, .d-reloj, .d-cuadro, .d-guirnalda) { display: none; }

/* el atril de mando (la ficha) */
.orquesta { display: grid; gap: 12px; width: 100%; margin-top: 4px; }
.orq-fila { display: flex; gap: 12px; align-items: flex-start; }
.orq-paso { flex: none; width: 26px; height: 26px; margin-top: 6px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: #fff; font: 700 .8rem/1 var(--body); }
.orq-musicos { display: flex; flex-wrap: wrap; gap: 6px; }
.musico-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 9px; border-radius: var(--r-pill); border: 1.5px solid rgba(43,36,64,.1); background: rgba(255,255,255,.8); font: 600 .9rem/1.1 var(--body); color: var(--ink); cursor: pointer; transition: background-color 200ms ease, border-color 200ms ease, transform 160ms ease; }
.musico-chip small { font-weight: 500; color: var(--ink-3); font-size: .78rem; }
.musico-chip .punto { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 25%, transparent); }
.musico-chip[aria-checked="true"] { background: color-mix(in srgb, var(--c) 20%, #fff); border-color: var(--c); }
.musico-chip:active { transform: scale(.97); }
.orq-ordenes { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.orden { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 10px 14px; border-radius: 16px; border: 0; background: var(--ink); color: #fff; cursor: pointer; text-align: left; font: 700 .95rem/1.1 var(--body); transition: transform 160ms cubic-bezier(.23,1,.32,1), box-shadow 200ms ease; }
.orden small { font-weight: 500; font-size: .76rem; opacity: .72; }
.orden.tutti { background: linear-gradient(135deg, var(--coral), var(--lila)); }
@media (hover: hover) and (pointer: fine) { .orden:hover { transform: translateY(-2px); box-shadow: 0 10px 18px -10px rgba(43,36,64,.6); } .musico-chip:hover { border-color: var(--c); } }
.orden:active { transform: scale(.97); }
.partitura { list-style: none; margin: 0; padding: 10px 16px; border-radius: 16px; min-height: calc(4 * 1.95em + 20px); display: grid; align-content: start; gap: 2px; font: .8rem/1.55 var(--mono); color: var(--ink-2);
  background: #fff repeating-linear-gradient(180deg, transparent 0 calc(1.95em - 1px), rgba(43,36,64,.07) calc(1.95em - 1px) 1.95em) 0 10px; box-shadow: var(--sombra-suave); }
.partitura li { display: grid; grid-template-columns: 66px 1fr; gap: 10px; animation: fila-entra 420ms cubic-bezier(.23,1,.32,1) both; }
.partitura time { color: var(--ink-3); } .partitura b { color: var(--ink); font-weight: 600; }
.partitura li.neg span { color: var(--coral-deep); } .partitura li.tutti span { color: var(--lila-deep); }
.partitura li:not(:first-child) { opacity: .62; }
.orq-nota { font-size: .8rem; color: var(--ink-3); margin: 0; }
@media (max-width: 860px) {
  .podio { left: calc(37% + var(--pjh) * .07); }
  .pauta { display: none; }
  /* WebKit (20/10): ningún backdrop-filter en nada que se desplace; las tarjetas lo llevaban (blur 14 px) y es
     lo más caro que hay en iOS. Tampoco sombras por filtro en la cabecera fija ni máscaras en el telón. */
  .info, .ficha-inline, .aviso-tu, .globo, .maqueta-pista, .nav, .marca, .cab, .cab::before, .indicador, .menu-btn, .musico-chip, .orden { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .info { background: rgba(255,255,255,.95); }
  .marca-svg { filter: none; }
  .bambalina, .telon::before { -webkit-mask: none; mask: none; }
  .estrellas { animation: none; }   /* titilaban con un filtro de brillo sobre toda la pantalla de la azotea */
  .giro b.sale, .giro b.entra { filter: none; }   /* la palabra que gira en el título entraba y salía con desenfoque */
  .panel, .ficha-inline, .partitura li { animation: none; }
  .bombillas i { animation: none; }
  .tarima-orq { left: 50%; right: 4%; }
  .foco.f1 { left: calc(37% + var(--pjh) * .325 - 75px); }
}
@media (max-width: 760px) {
  .orq-ordenes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .musico-chip small { display: none; }
  .orq-paso { display: none; }
  .partitura { font-size: .74rem; } .partitura li { grid-template-columns: 58px 1fr; }
}
@media (prefers-reduced-motion: reduce) { .batuta, .foco, .ag.tocando .instr, .ag.tocando .arco, .ag.tocando .baqueta, .pauta-notas { animation: none !important; } }

/* ficha de la orquesta: más ancha y baja para que el escenario quepa debajo */
.info.orq-info { width: min(100%, 880px); }
.orq-info p .simulado { color: var(--ink-3); font-size: .86em; }
.orq-info .orden { padding: 9px 13px; }
.orq-info .musico-chip { padding: 6px 11px 6px 8px; }
.orq-info .partitura { min-height: calc(3 * 1.95em + 20px); }
.orq-info .partitura li:nth-child(n+4) { display: none; }
.orquesta-sala .pauta { width: min(22vw, 340px); right: 5.5%; }
.orq-info h2 { margin-bottom: -2px; }
.orq-info .orq-musicos { gap: 5px; }
.orq-info .musico-chip { font-size: .84rem; gap: 6px; padding: 6px 10px 6px 8px; }
.orq-info .musico-chip small { font-size: .74rem; }
.orq-info .partitura { min-height: calc(2 * 1.95em + 20px); }
.orq-info .partitura li:nth-child(n+3) { display: none; }
.orq-info { gap: 10px; }
/* tapa del piano de cola: un triángulo levantado con su varilla */
.piano .tapa { left: 4%; right: 8%; top: -34%; height: 56%; border-radius: 0; rotate: 0deg; background: linear-gradient(160deg, #4F4866, #2B2440); clip-path: polygon(0 100%, 100% 100%, 92% 0); }
.piano .tapa::after { content: ""; position: absolute; }
.piano::after { content: ""; position: absolute; left: 62%; top: 2%; width: 3px; height: 24%; background: #8B8FA8; rotate: 12deg; }
.info.orq-info { width: min(100%, 940px); }
.orq-info .orq-paso { display: none; }
.orquesta-sala .pauta { width: min(20vw, 300px); right: 4.5%; }

/* cada planta ya deja sitio a la cabecera con su padding: al saltar a una planta, su borde superior va arriba del todo
   (con scroll-padding la planta quedaba 84 px más abajo y se cortaba el suelo con los muñecos) */
html { scroll-padding-top: 0; }


/* =========================================================================
   Planta −1 · la maqueta: portada viva (17/10). Diorama en CSS 3D sobre un
   plato giratorio, muñecos de verdad de pie (carteles que miran a cámara),
   inclinación hacia el cursor y entrada con zoom al 3D real.
   ========================================================================= */
@property --giro { syntax: "<angle>"; inherits: true; initial-value: -40deg; }
@property --tx { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --ty { syntax: "<number>"; inherits: true; initial-value: 0; }
.oficina-marco { background: radial-gradient(ellipse 70% 60% at 50% 62%, #FFF4EA 0%, transparent 70%), linear-gradient(180deg, #E6DEFF 0%, #F6E6FF 55%, #FFE6EE 100%); }
.oficina-marco::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 18% 22%, rgba(255,255,255,.9) 0 2px, transparent 3px) 0 0 / 90px 80px, radial-gradient(circle at 70% 60%, rgba(255,255,255,.7) 0 1.5px, transparent 2.5px) 0 0 / 120px 110px; opacity: .7; }
.maqueta-portada { position: absolute; inset: 0; transition: opacity 600ms ease 500ms; --tx: 0; --ty: 0; transition: --tx 900ms cubic-bezier(.23,1,.32,1), --ty 900ms cubic-bezier(.23,1,.32,1), opacity 600ms ease; }
.oficina-marco.cargada .maqueta-portada { opacity: 0; pointer-events: none; }
.diorama-escena { position: absolute; inset: 0 0 20% 0; perspective: 1500px; perspective-origin: 50% 30%; display: grid; place-items: center; transition: transform 1500ms cubic-bezier(.65,0,.35,1), filter 1500ms ease, opacity 1200ms ease 300ms; }
.diorama { --inc: calc(55deg + var(--ty) * 6deg); position: relative; width: min(56%, 560px); aspect-ratio: 1; transform-style: preserve-3d; transform: rotateX(var(--inc)) rotateZ(calc(var(--tx) * 8deg)); }
.d-plato { position: absolute; inset: 0; transform-style: preserve-3d; animation: plato-gira 18s cubic-bezier(.45,0,.55,1) infinite alternate; }
@keyframes plato-gira { from { transform: rotateZ(-50deg); } to { transform: rotateZ(-26deg); } }
.d-contragiro { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; animation: contragiro 18s cubic-bezier(.45,0,.55,1) infinite alternate; }
@keyframes contragiro { from { transform: rotateZ(50deg); } to { transform: rotateZ(26deg); } }
.d-base { position: absolute; inset: -5%; border-radius: 36px; background: linear-gradient(135deg, #5B4A7A, #2B2440); transform: translateZ(-22px); box-shadow: 0 0 0 6px rgba(255,255,255,.35), 0 50px 80px rgba(43,36,64,.35); }
.d-suelo { position: absolute; inset: 0; border-radius: 26px; transform-style: preserve-3d; background: linear-gradient(rgba(142,108,255,.09) 1px, transparent 1px) 0 0 / 8.33% 8.33%, linear-gradient(90deg, rgba(142,108,255,.09) 1px, transparent 1px) 0 0 / 8.33% 8.33%, #FBF8FF; box-shadow: inset 0 0 0 3px #fff, inset 0 -20px 40px rgba(142,108,255,.08); }
.d-zona { position: absolute; width: 38%; height: 30%; border-radius: 18px; opacity: .85; }
.z-tec { left: 5%; top: 6%; background: color-mix(in srgb, #3A63FF 18%, #fff); } .z-datos { right: 5%; top: 6%; background: color-mix(in srgb, #8E6CFF 20%, #fff); }
.z-fin { left: 5%; bottom: 4%; background: color-mix(in srgb, #2FC595 20%, #fff); } .z-cli { right: 5%; bottom: 4%; background: color-mix(in srgb, #FFC543 26%, #fff); }
.d-mesa { position: absolute; left: var(--x); top: var(--y); width: 12%; height: 7%; border-radius: 6px; background: #fff; transform: translateZ(9px); box-shadow: 0 0 0 1px rgba(43,36,64,.06), 0 9px 0 -2px rgba(43,36,64,.12); }
.d-mesa::after { content: ""; position: absolute; left: 30%; top: 15%; width: 40%; height: 35%; border-radius: 3px; background: #2B2440; }
.d-redonda { position: absolute; left: 39%; top: 39%; width: 22%; height: 22%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff, #F1EBFF); transform: translateZ(10px); box-shadow: 0 10px 0 -3px rgba(43,36,64,.12), 0 0 0 5px rgba(255,255,255,.6); }
.d-recepcion { position: absolute; left: 36%; top: 86%; width: 28%; height: 7%; border-radius: 40px 40px 8px 8px; background: linear-gradient(90deg, #FF9A7A, #FF7A59); transform: translateZ(10px); box-shadow: 0 9px 0 -2px rgba(43,36,64,.15); }
.d-planta-top { position: absolute; left: var(--x); top: var(--y); width: 6%; height: 6%; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #9BE3B6, #48B97C 70%); transform: translateZ(18px); box-shadow: 0 0 0 3px #FF9A7A; }
.d-pared { position: absolute; display: flex; justify-content: space-evenly; align-items: center; background: linear-gradient(180deg, #fff, #EFE8FF); box-shadow: inset 0 -4px 0 rgba(142,108,255,.18); }
.d-pared b { width: 18%; height: 52%; border-radius: 8px; background: linear-gradient(180deg, #CFE0FF, #F6E9FF); box-shadow: inset 0 0 0 3px #fff; }
.d-pared.fondo { left: 0; top: 0; width: 100%; height: 13%; border-radius: 26px 26px 0 0; transform-origin: 50% 0; transform: rotateX(90deg); }
.d-pared.lado { left: 0; top: 0; width: 13%; height: 100%; flex-direction: column; border-radius: 26px 0 0 26px; transform-origin: 0 50%; transform: rotateY(-90deg); }
.d-pared.lado b { width: 52%; height: 18%; }
.d-gente { position: absolute; inset: 0; transform-style: preserve-3d; }
.d-pj { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; transform-style: preserve-3d; }
.d-sombra { position: absolute; left: -12px; top: -5px; width: 24px; height: 10px; border-radius: 50%; background: rgba(43,36,64,.22); filter: blur(2px); }
.d-cartel { --w: clamp(24px, 2.9vw, 42px); position: absolute; left: 0; bottom: 0; width: var(--w); height: calc(var(--w) * 1.626); margin-left: calc(var(--w) / -2); transform-origin: 50% 100%; transform: rotateZ(calc(var(--tx) * -8deg)) rotateX(calc(-1 * var(--inc))); }
.d-cartel .mu { position: relative !important; inset: auto; width: 100% !important; height: 100% !important; transform: none !important; filter: drop-shadow(0 3px 3px rgba(43,36,64,.2)); }
.d-cartel .mu svg { width: 100%; height: 100%; display: block; }
.d-pj.anda.ruta-a { animation: ruta-a 14s cubic-bezier(.45,0,.55,1) infinite; } .d-pj.anda.ruta-b { animation: ruta-b 17s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes ruta-a { 0%, 100% { left: 30%; top: 42%; } 30% { left: 30%; top: 58%; } 55% { left: 44%; top: 74%; } 80% { left: 24%; top: 66%; } }
@keyframes ruta-b { 0%, 100% { left: 72%; top: 60%; } 35% { left: 76%; top: 42%; } 65% { left: 58%; top: 30%; } }
/* llamada a entrar */
.maqueta-cta { position: absolute; left: 50%; bottom: 6%; translate: -50% 0; display: grid; justify-items: center; gap: 10px; text-align: center; transition: opacity 500ms ease, transform 700ms cubic-bezier(.23,1,.32,1); }
.btn-maqueta { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 12px; padding: 18px 28px 18px 30px; border: 0; border-radius: var(--r-pill); background: var(--ink); color: #fff; font: 700 1.1rem/1 var(--body); cursor: pointer; box-shadow: 0 18px 34px -16px rgba(43,36,64,.7); transition: transform 300ms cubic-bezier(.23,1,.32,1); }
.btn-maqueta svg { width: 20px; height: 20px; transition: transform 300ms cubic-bezier(.23,1,.32,1); }
.btn-maqueta-anillo { position: absolute; inset: -5px; z-index: -1; border-radius: inherit; background: conic-gradient(from var(--ang, 0deg), var(--lila), var(--cielo), var(--menta), var(--sol), var(--coral), var(--rosa), var(--lila)); filter: blur(7px); opacity: .9; animation: aura-gira 5s linear infinite; }
@media (hover: hover) and (pointer: fine) { .btn-maqueta:hover { transform: translateY(-3px) scale(1.03); } .btn-maqueta:hover svg { transform: translateX(4px); } }
.btn-maqueta:active { transform: scale(.97); }
.maqueta-pista { margin: 0; padding: 6px 12px; border-radius: var(--r-pill); background: rgba(255,255,255,.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--ink-2); font-size: .85rem; }
/* entrar: la cámara se mete en la maqueta y aparece el 3D */
.oficina-marco.entrando .diorama-escena { transform: scale(2.6) translateY(6%); filter: blur(5px); opacity: 0; }
.oficina-marco.entrando .maqueta-cta { opacity: 0; transform: translateY(16px); pointer-events: none; }
.oficina-marco.entrando::after { content: "Montando la oficina en 3D…"; position: absolute; left: 50%; top: 50%; translate: -50% -50%; padding: 12px 20px; border-radius: var(--r-pill); background: rgba(255,255,255,.85); color: var(--ink-2); font: 600 .95rem var(--body); box-shadow: var(--sombra-suave); animation: late-suave 1.6s ease-in-out infinite; }
.oficina-marco.cargada::after { display: none; }
@keyframes late-suave { 50% { opacity: .55; } }
.oficina-marco .oficina-puerta { display: none; }
@media (max-width: 760px) {
  .diorama { width: min(84%, 420px); }
  .diorama-escena { inset: 0 0 18% 0; }
  .btn-maqueta { padding: 15px 22px; font-size: 1rem; }
  .maqueta-pista { font-size: .78rem; max-width: 30ch; }
}
@media (prefers-reduced-motion: reduce) { .diorama, .d-plato, .d-contragiro, .d-pj.anda, .btn-maqueta-anillo { animation: none; } .diorama-escena { transition: opacity 300ms ease; } .oficina-marco.entrando .diorama-escena { transform: none; filter: none; } }

/* letras del hall: rótulo corpóreo blanco con canto de color y la marca del corro girando */
.letras-pared { display: flex; align-items: center; gap: .16em; color: #fff; letter-spacing: -0.04em;
  text-shadow: 0 1px 0 #F4E4DD, 0 2px 0 #EAD2C8, 0 3px 0 color-mix(in srgb, var(--tono) 60%, #C98B78), 0 4px 0 color-mix(in srgb, var(--tono) 60%, #C98B78), 0 5px 0 color-mix(in srgb, var(--tono) 55%, #B07A6A), 0 16px 22px rgba(120,60,50,.28); }
.letras-pared span { color: #fff; font-weight: 800; -webkit-text-stroke: 0; background: none; text-shadow: 0 1px 0 #E6DCFA, 0 2px 0 #D5C6F6, 0 3px 0 #B9A3F0, 0 4px 0 #A68BEB, 0 5px 0 #8E6CFF, 0 16px 22px rgba(80,50,140,.28); }
.letras-pared img { width: 1em; height: 1em; filter: drop-shadow(0 8px 10px rgba(120,60,50,.25)); animation: marca-gira 40s linear infinite; }
@media (max-width: 860px) { .letras-pared { display: none; } }

/* diorama con la planta de la maqueta 3D (30 × 19 m) */
.diorama { aspect-ratio: 30 / 19; width: min(74%, 760px); }
.d-zona { left: calc(var(--x) - var(--w) / 2); top: calc(var(--y) - var(--h) / 2); width: var(--w); height: var(--h); background: color-mix(in srgb, var(--c) 22%, #fff); box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--c) 55%, #fff); right: auto; bottom: auto; }
.d-zona.redonda { border-radius: 50%; }
.d-mesa { left: calc(var(--x) - 3.4%); top: calc(var(--y) - 2.6%); width: 6.8%; height: 5.2%; }
.d-redonda { left: calc(var(--x) - 7%); top: calc(var(--y) - 11%); width: 14%; height: 22%; }
.d-sofa { position: absolute; left: calc(var(--x) - 4%); top: calc(var(--y) - 3%); width: 8%; height: 5.5%; border-radius: 10px; background: #FF9A7A; transform: translateZ(8px) rotate(-22deg); box-shadow: 0 7px 0 -2px rgba(43,36,64,.15); }
.d-barra { position: absolute; left: calc(var(--x) - 2.7%); top: calc(var(--y) - 2%); width: 5.4%; height: 4%; border-radius: 6px; background: #fff; transform: translateZ(12px); box-shadow: 0 10px 0 -2px rgba(43,36,64,.12); }
.d-futbolin { position: absolute; left: calc(var(--x) - 2.5%); top: calc(var(--y) - 2.3%); width: 5%; height: 4.6%; border-radius: 4px; background: #5EC88B; box-shadow: inset 0 0 0 3px #3A63FF; transform: translateZ(10px); }
.d-planta-top { width: 3.6%; height: 5.6%; margin: -2.8% 0 0 -1.8%; }
.d-pared.fondo { height: 22%; }
.d-pared.lado { width: 13.8%; }
.d-pared.lado.der { left: auto; right: 0; transform-origin: 100% 50%; transform: rotateY(90deg); border-radius: 0 26px 26px 0; }
@keyframes ruta-a { 0%, 100% { left: 36%; top: 53.7%; } 30% { left: 45%; top: 60%; } 55% { left: 62%; top: 52%; } 80% { left: 50%; top: 66%; } }
@media (max-width: 760px) { .diorama { width: min(94%, 460px); } }

/* marca v4 (17/10): el corro animado va como imagen (sus animaciones viven dentro del SVG) */
.marca-svg { transition: transform 500ms cubic-bezier(.23,1,.32,1); }
@media (hover: hover) and (pointer: fine) { .marca:hover .marca-svg { transform: rotate(-24deg) scale(1.06); } }
.letras-pared img { animation: none; }


/* ===== refinado 18/10 ===== */
/* pie: el edificio termina en la calle, con la marca, las plantas y lo legal */
.pie { padding: 40px 0 44px; background: linear-gradient(180deg, #6A6184 0 10px, #8C82A8 10px 14px, #3A3352 14px, #2B2440 100%); }
.pie .wrap.pie-rejilla { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) minmax(0, 1fr); gap: 36px 48px; align-items: start; padding-left: 0; justify-content: initial; }
.pie-marca img { display: block; height: 44px; width: auto; margin-bottom: 14px; }
.pie-marca p { margin: 0 0 18px; max-width: 34ch; color: rgba(255,255,255,.78); font-size: .98rem; line-height: 1.5; }
.pie-cta { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: var(--r-pill); background: #fff; color: var(--ink) !important; font-weight: 700; text-decoration: none; transition: transform 200ms cubic-bezier(.23,1,.32,1); }
.pie-cta svg { width: 18px; height: 18px; transition: transform 200ms cubic-bezier(.23,1,.32,1); }
@media (hover: hover) and (pointer: fine) { .pie-cta:hover { transform: translateY(-2px); } .pie-cta:hover svg { transform: translateX(3px); } }
.pie-cta:active { transform: scale(.97); }
.pie-titulo { display: block; margin-bottom: 12px; font: 700 .78rem/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.pie-plantas ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 18px; }
.pie-plantas a { display: flex; align-items: center; gap: 10px; padding: 5px 0; color: rgba(255,255,255,.88) !important; text-decoration: none; font-size: .92rem; transition: color 200ms ease; }
.pie-plantas a i { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.1); color: #FFD36B; font: 800 .78rem/1 var(--display); font-style: normal; transition: background-color 200ms ease, color 200ms ease; }
@media (hover: hover) and (pointer: fine) { .pie-plantas a:hover { color: #fff !important; } .pie-plantas a:hover i { background: #FFD36B; color: var(--ink); } }
.pie-legal { display: grid; gap: 10px; color: rgba(255,255,255,.62); font-size: .84rem; line-height: 1.5; }
.pie-legal a { color: #FFD36B; }
.pie-arriba { margin-top: 6px; font-weight: 600; text-decoration: none; }
@media (max-width: 960px) { .pie .wrap.pie-rejilla { grid-template-columns: 1fr 1fr; } .pie-legal { grid-column: 1 / -1; } }
@media (max-width: 600px) { .pie .wrap.pie-rejilla { grid-template-columns: 1fr; gap: 28px; } }

/* las fichas, un punto más legibles en pantalla ancha */
@media (min-width: 861px) {
  .info p { font-size: 1.02rem; line-height: 1.58; }
  .info h2 { letter-spacing: -0.025em; }
  .info .placa { margin-bottom: 2px; }
}


/* el rótulo del hall más alto, para que el globo de Nero quepa entre su cabeza y las letras */
@media (min-width: 861px) { .letras-pared { bottom: calc(var(--base) + var(--pjh) * 1.5); } }
/* la ficha de la orquesta mantiene su cuerpo de texto: con el general, la planta pasaba de la pantalla */
.orq-info p { font-size: .96rem; line-height: 1.5; }
/* en el hall el hueco sobre Nero es para su globo, no para un neón */
#acceso .deco .d-pieza:has(.d-neon) { display: none; }
#indicador { transition: opacity 300ms ease, transform 400ms cubic-bezier(.23,1,.32,1); }
#indicador.en-la-calle { opacity: 0; transform: translateY(12px); pointer-events: none; }
@media (max-width: 760px) { .pie { padding-bottom: 36px; } }


/* ===== fluidez (19/10) ===== */
/* las fichas entran sin desenfoque: el filtro animado sobre una caja grande costaba fotogramas */
html.js .piso:not(.hero) .info { filter: none; }
.giro b.sale, .giro b.entra { filter: none; }



/* ===== pulido 19/10 ===== */
.btn-secondary svg { width: 18px; height: 18px; margin-left: 6px; transition: transform 250ms cubic-bezier(.23,1,.32,1); }
@media (hover: hover) and (pointer: fine) { .btn-secondary:hover svg { transform: translateY(3px); } }
/* indicación para bajar desde la azotea */
.baja-pista { position: absolute; left: 50%; bottom: 22px; translate: -50% 0; z-index: 12; display: inline-flex; flex-direction: column; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; font: 600 .8rem/1 var(--body); letter-spacing: .04em; opacity: .85; transition: opacity 300ms ease; }
.baja-pista span { padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.72); box-shadow: 0 8px 18px -12px rgba(43,36,64,.45); }
.baja-pista i { width: 22px; height: 34px; border-radius: 12px; border: 2px solid currentColor; position: relative; background: rgba(255,255,255,.5); }
.baja-pista i::after { content: ""; position: absolute; left: 50%; top: 6px; width: 4px; height: 7px; margin-left: -2px; border-radius: 2px; background: currentColor; animation: rueda 1.8s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes rueda { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(11px); opacity: 0; } 100% { opacity: 0; } }
@media (hover: hover) and (pointer: fine) { .baja-pista:hover { opacity: 1; } }
:root[data-momento="noche"] .baja-pista { color: #fff; } :root[data-momento="noche"] .baja-pista span { background: rgba(43,36,64,.55); }
@media (max-width: 860px) { .baja-pista { display: none; } }
@media (prefers-reduced-motion: reduce) { .baja-pista i::after { animation: none; } }
/* el neón de la cafetería, con aire bajo la ficha (salas.js lo dejaba pegado a su borde) */
#cafeteria .deco .d-pieza:has(.d-neon) { translate: 0 28px; }

/* desplazamiento fluido (19/10): mientras se baja o se sube, las animaciones se paran y vuelven al soltar.
   Medido: con ellas corriendo el desplazamiento iba a ~40 fps; paradas, a ~58. (plantas.js pone la clase) */
html.desplazando *, html.desplazando *::before, html.desplazando *::after { animation-play-state: paused !important; }