/* ═══════════════════════════════════════════════
   Edificio-menú de la sección «Servicios» del inicio (index.html): el edificio 3D es el protagonista.
   A la izquierda, el menú de servicios; al elegir uno, la cámara viaja hasta él y una tarjeta con línea
   describe el servicio (la ficha queda solo para lectores de pantalla).
   Se carga después de ../sitio.css. Solo estilos; la lógica está en edificio-ui.js (menú y ficha) y
   edificio-3d.js (escena). Los bloques «VERSIÓN n» van en orden: los últimos pisan a los primeros.
   ═══════════════════════════════════════════════ */

:root { --ed-margen: max(24px, calc((100vw - 1200px) / 2)); }

.ed {
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);   /* separa el edificio de «Así funciona», que también es gris claro */
  position: relative; display: grid;
  grid-template-columns: calc(var(--ed-margen) + 336px) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  height: clamp(640px, calc(100svh - var(--header-h)), 980px);
  overflow: clip;
}

/* ── Columna izquierda: titular y menú ── */
.ed-side {
  grid-column: 1; grid-row: 1; position: relative; z-index: 2; min-height: 0;
  display: flex; flex-direction: column;
  padding: 30px 20px 24px var(--ed-margen);
  overflow-y: auto; scrollbar-width: none;
}
.ed-side::-webkit-scrollbar { display: none; }

.ed-menu { position: relative; margin-top: 26px; padding-top: 6px; border-top: 1px solid var(--line-strong); }
.ed-group-t { margin: 0; padding: 12px 12px 4px; font-size: 13px; font-weight: 600; color: var(--muted); }
.ed-group-items { display: flex; flex-direction: column; }
.ed-tab {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 12px;
  width: 100%; height: 38px; padding: 0 12px; border: 0; border-radius: 10px; background: none;
  text-align: left; cursor: pointer; font: 600 15px/1.2 var(--font-display); color: var(--text);
  transition: color .2s var(--ease-out), background-color .2s var(--ease-out);
}
.ed-tab svg {
  flex: none; width: 20px; height: 20px; fill: none; stroke: var(--muted); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; transition: stroke .2s var(--ease-out), transform .2s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .ed-tab:not([aria-selected="true"]):hover { color: var(--ink); background: rgba(10, 37, 64, .04); }
  .ed-tab:hover svg { stroke: var(--blue); }
}
.ed-tab:active svg { transform: scale(.92); }
.ed-tab[aria-selected="true"] { color: var(--ink); font-weight: 700; }
.ed-tab[aria-selected="true"] svg { stroke: var(--blue); }
.ed-tab:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; }

/* Resalte del servicio elegido: una placa blanca que se desliza entre opciones */
.ed-menu-mark {
  position: absolute; left: 0; top: 0; width: 100%; height: 38px; border-radius: 10px;
  background: #fff; box-shadow: 0 0 0 1px var(--line), 0 2px 6px -3px rgba(10, 37, 64, .25);
  opacity: 0; transition: transform .45s var(--ease-out), opacity .25s var(--ease-out);
}
.ed-menu.has-sel .ed-menu-mark { opacity: 1; }

/* ── Escenario: ocupa todo el resto, hasta el borde de la ventana ── */
.ed-stage { grid-column: 2; grid-row: 1; position: relative; min-width: 0; }
.ed-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  touch-action: pan-y; cursor: grab; opacity: 0; transition: opacity .8s var(--ease-out);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 97%, transparent), linear-gradient(to bottom, transparent, #000 3%, #000 94%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 97%, transparent), linear-gradient(to bottom, transparent, #000 3%, #000 94%, transparent);
  mask-composite: intersect;
}
.ed-stage.is-ready .ed-canvas { opacity: 1; }
.ed-stage.is-dragging .ed-canvas { cursor: grabbing; }
.ed-pins { position: absolute; inset: 0; pointer-events: none; }

.ed-pin {
  position: absolute; left: 0; top: 0; pointer-events: auto;
  display: grid; place-items: center; width: 28px; height: 28px;
  padding: 0; margin: -14px 0 0 -14px; border: 0; background: none; cursor: pointer;
  opacity: 0; transition: opacity .35s var(--ease-out);
}
.ed-stage.is-ready .ed-pin { opacity: 1; }
.ed-stage.is-ready .ed-pin.is-back { opacity: .3; }
/* De cerca manda la escena: los puntos se apartan */
.ed-stage.is-close .ed-pin, .ed-stage.is-ready.is-close .ed-pin.is-back { opacity: 0; pointer-events: none; }
.ed-pin-dot {
  flex: none; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 2px solid var(--navy);
  transition: background-color .2s var(--ease-out), border-color .2s var(--ease-out), transform .2s var(--ease-out);
}
.ed-pin-label {
  position: absolute; left: 30px; top: 50%;
  padding: 5px 10px; border-radius: 999px; background: #fff; color: var(--ink);
  font: 600 13px/1.2 var(--font-display); white-space: nowrap;
  box-shadow: 0 6px 16px -8px rgba(10, 37, 64, .45), 0 0 0 1px var(--line);
  opacity: 0; transform: translate(-4px, -50%); transition: opacity .2s var(--ease-out), transform .2s var(--ease-out);
  pointer-events: none;
}
@media (pointer: coarse) {
  .ed-pin { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
  .ed-pin-label { left: 38px; }
  .ed-pin.is-left .ed-pin-label { right: 38px; }
}
.ed-pin.is-left .ed-pin-label { left: auto; right: 30px; transform: translate(4px, -50%); }
.ed-pin:hover .ed-pin-dot { transform: scale(1.18); border-color: var(--blue); }
.ed-pin:hover .ed-pin-label { opacity: 1; transform: translate(0, -50%); }

.ed-hint {
  position: absolute; right: var(--ed-margen); top: 22px; display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--muted); pointer-events: none;
  opacity: 0; transition: opacity .4s var(--ease-out);
}
.ed-hint svg { width: 20px; height: 20px; color: var(--blue); }
.ed-hint-tactil { display: none; }
@media (pointer: coarse) { .ed-hint-mouse { display: none; } .ed-hint-tactil { display: inline; } }
.ed-stage.is-ready .ed-hint { opacity: 1; }
.ed-stage.is-ready .ed-hint.is-gone { opacity: 0; }

/* Aviso al girar la rueda sobre el edificio sin haberlo tocado: la rueda sola baja por la página */
.ed-aviso {
  position: absolute; left: 50%; bottom: 28px; z-index: 3; margin: 0;
  padding: 9px 16px; border-radius: 999px; background: rgba(10, 37, 64, .86); color: #fff;
  font: 600 14px/1.3 var(--font-display); white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translate(-50%, 6px); transition: opacity .25s var(--ease-out), transform .25s var(--ease-out);
}
.ed-aviso kbd {
  display: inline-block; padding: 1px 6px; border-radius: 5px; border: 1px solid rgba(255, 255, 255, .45);
  font: inherit; font-size: 13px;
}
.ed-aviso.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (pointer: coarse) { .ed-aviso { display: none; } }

.ed-fallback { display: none; }
.ed-stage.is-fallback .ed-canvas, .ed-stage.is-fallback .ed-pins, .ed-stage.is-fallback .ed-hint, .ed-stage.is-fallback .ed-llamada { display: none; }
.ed-stage.is-fallback .ed-fallback { display: block; padding: 48px 24px; color: var(--muted); }

/* «Ver todo el edificio»: arriba a la derecha del escenario, en el lugar de la ayuda de arrastrar */
.ed-stage .ed-back { position: absolute; top: 16px; right: var(--ed-margen); z-index: 3; }
.ed-back[hidden] { display: none; }
.ed-stage.is-sel .ed-hint { opacity: 0; }

/* ── Línea con texto: sale de la pieza en diagonal, sube en vertical y arriba muestra el servicio.
   Al aparecer, primero se dibuja la línea (de abajo hacia arriba) y después entra el texto desde el lado;
   al irse, sale el texto y la línea se recoge hacia abajo. La posición la pone edificio-3d.js ── */
.ed-llamada {
  position: absolute; left: 0; top: 0; z-index: 2; width: 0; height: 0;
  pointer-events: none; visibility: hidden; transition: visibility 0s linear 1s;
}
.ed-llamada.is-on { visibility: visible; transition: visibility 0s; }
/* El contenedor mide cero: sin ancho propio, el SVG heredaría ancho 0 (max-width: 100% del sitio) y no se dibujaría */
.ed-llamada-linea { position: absolute; left: 0; top: 0; width: 1px; height: 1px; max-width: none; overflow: visible; }
.ed-llamada-linea path {
  fill: none; stroke: var(--blue); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset .5s cubic-bezier(.4, 0, .2, 1) .3s;
}
.ed-llamada.is-on .ed-llamada-linea path { stroke-dashoffset: 0; transition: stroke-dashoffset .75s cubic-bezier(.25, .8, .25, 1) .15s; }
.ed-llamada-punto {
  position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%;
  background: #fff; border: 2px solid var(--blue);
  transform: scale(0); transition: transform .25s var(--ease-out) .75s;
}
.ed-llamada.is-on .ed-llamada-punto { transform: scale(1); transition: transform .3s var(--ease-out); }
.ed-llamada-texto {
  position: absolute; left: 48px; top: calc(-1 * var(--alto, 184px) - 9px);
  width: max-content; max-width: min(300px, 44vw);
  opacity: 0; transform: translateX(-14px);
  transition: opacity .22s var(--ease-out), transform .26s var(--ease-out);
  text-shadow: 0 0 2px var(--bg-soft), 0 0 10px var(--bg-soft), 0 0 20px var(--bg-soft);
}
.ed-llamada.is-on .ed-llamada-texto { opacity: 1; transform: none; transition: opacity .35s var(--ease-out) .8s, transform .45s var(--ease-out) .8s; }
.ed-llamada.is-izq .ed-llamada-texto { left: auto; right: 48px; text-align: right; transform: translateX(14px); }
.ed-llamada.is-izq.is-on .ed-llamada-texto { transform: none; }
.ed-llamada-k { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--blue); }
.ed-llamada-t { margin: 2px 0 0; font: 700 22px/1.12 var(--font-display); letter-spacing: -0.015em; color: var(--ink); }
.ed-llamada-p { margin: 6px 0 0; max-width: 32ch; font-size: 14px; line-height: 1.5; color: var(--text); text-wrap: pretty; }
.ed-llamada.is-izq .ed-llamada-p { margin-left: auto; }
.ed-llamada-a { margin-top: 8px; font-size: 14.5px; color: var(--blue); }
.ed-llamada.is-on .ed-llamada-a { pointer-events: auto; }
.ed-llamada-a svg { width: 17px; height: 17px; transition: transform .2s var(--ease-out); }
.ed-llamada-a:hover svg { transform: translateX(4px); }

/* Con el 3D funcionando, la ficha queda solo para lectores de pantalla (la reemplaza la línea con texto) */
.ed.is-3d .ed-ficha {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; box-shadow: none;
}
.ed.is-3d .ed-ficha-acc { display: none; }

/* ── Ficha del servicio: flota en la esquina del escenario ── */
.ed-ficha {
  grid-column: 2; grid-row: 1; align-self: end; justify-self: end; position: relative; z-index: 3;
  width: auto; max-width: min(340px, calc(100% - 48px)); margin: 0 var(--ed-margen) 24px 0; padding: 12px 14px 12px 16px;
  background: #fff; border-radius: 14px; outline: none;
  box-shadow: 0 16px 32px -22px rgba(10, 37, 64, .35), 0 1px 3px rgba(10, 37, 64, .12);
}
.ed-ficha-t { font-size: 17px; letter-spacing: -0.01em; }
.ed-ficha-p { margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
/* En escritorio la ficha de un servicio es solo su nombre y dos acciones: el texto largo queda para lectores de pantalla */
@media (min-width: 901px) {
  .ed-ficha.is-servicio .ed-ficha-p { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.ed-ficha-acc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 8px; }
.ed-ficha-acc:not(:has(> :not([hidden]))) { display: none; }
.ed-ficha-a { color: var(--blue); font-size: 15px; }
.ed-ficha-a svg { width: 18px; height: 18px; transition: transform .2s var(--ease-out); }
.ed-ficha-a:hover svg { transform: translateX(4px); }
.ed-back {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px;
  border: 1.5px solid var(--line-strong); border-radius: 9px; background: #fff; cursor: pointer;
  font: 600 13px/1 var(--font-display); color: var(--navy);
  transition: border-color .2s var(--ease-out), transform .12s var(--ease-out);
}
.ed-back svg { width: 14px; height: 14px; color: var(--blue); }
.ed-back:hover { border-color: var(--navy); }
.ed-back:active { transform: scale(.97); }
.ed-back:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.ed-ficha.is-swap > * { animation: ed-swap .32s var(--ease-out) both; }
.ed-ficha.is-swap > :nth-child(2) { animation-delay: .03s; }
.ed-ficha.is-swap > :nth-child(3) { animation-delay: .06s; }
@keyframes ed-swap { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Pantallas de poca altura (la mayoría de los notebooks): todo más compacto para que el menú quepa entero */
@media (min-width: 901px) and (max-height: 980px) {
  .ed-side { padding-top: 20px; }

  

  .ed-menu { margin-top: 18px; }
  .ed-tab, .ed-menu-mark { height: 32px; }
  .ed-group-t { padding: 8px 12px 2px; }
}
@media (min-width: 901px) and (max-height: 760px) {
  .ed-tab, .ed-menu-mark { height: 30px; }
}

/* ── Celular y tableta vertical: titular, menú deslizable, edificio y ficha ── */
@media (max-width: 900px) {
  .ed { display: flex; flex-direction: column; height: auto; overflow: visible; }
  .ed-side { display: contents; }

  
  .ed-menu {
    order: 2; display: flex; margin: 22px 0 0; padding: 0 16px; border-top: 1px solid var(--line-strong);
    overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: 16px; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 86%, transparent);
    mask-image: linear-gradient(to right, #000 86%, transparent);
  }
  .ed-menu::-webkit-scrollbar { display: none; }
  .ed-menu-mark { display: none; }
  .ed-group { flex: none; }
  .ed-group + .ed-group { border-left: 1px solid var(--line); padding-left: 10px; margin-left: 4px; }
  .ed-group-t { position: sticky; left: 0; width: max-content; padding: 12px 0 2px; }
  .ed-group-items { flex-direction: row; }
  .ed-tab {
    flex-direction: column; align-items: flex-start; gap: 6px; width: 112px; height: auto; min-height: 84px;
    padding: 10px 12px 12px 0; border-radius: 0; scroll-snap-align: start;
  }
  .ed-tab span { text-wrap: balance; }
  .ed-tab svg { width: 22px; height: 22px; }
  .ed-tab[aria-selected="true"] { box-shadow: inset 0 3px 0 var(--blue); }
  .ed-stage { order: 3; height: 380px; }
  .ed-hint { right: 16px; top: 10px; }
  .ed-stage .ed-back { top: 10px; right: 16px; }
  .ed-llamada-texto { max-width: 140px; }
  .ed-llamada-t { font-size: 17px; }
  .ed-llamada-p { display: none; }
  .ed-ficha { order: 4; width: auto; margin: 0 16px 32px; box-shadow: none; border: 1px solid var(--line); }
}

@media (prefers-reduced-motion: reduce) {
  .ed-menu-mark, .ed-canvas, .ed-pin, .ed-pin-label, .ed-hint, .ed-aviso { transition: none; }
  .ed-llamada, .ed-llamada.is-on, .ed-llamada-linea path, .ed-llamada.is-on .ed-llamada-linea path,
  .ed-llamada-punto, .ed-llamada.is-on .ed-llamada-punto, .ed-llamada-texto, .ed-llamada.is-on .ed-llamada-texto { transition: none; }
  .ed-ficha.is-swap > * { animation: none; }
}

/* ═══════════════════════════════════════════════
   VERSIÓN 8 · «Placa de maqueta» (opción B elegida por Jose, 2026-10-12)
   Menú con íconos en cuadritos, puntos tipo alfiler, «Ver todo el edificio» e invitación en píldora.
   ═══════════════════════════════════════════════ */
/* Íconos del menú en cuadritos; el elegido se vuelve oscuro */
.ed-tab svg {
  width: 24px; height: 24px; padding: 4px; border-radius: 6px; background: #f2f5f8;
  box-shadow: inset 0 0 0 1px #e1e7ee; stroke: #42556b; stroke-width: 1.9;
  transition: stroke .2s var(--ease-out), background-color .2s var(--ease-out), transform .2s var(--ease-out);
}
.ed-tab[aria-selected="true"] svg, .ed-tab[aria-selected="true"]:hover svg { background: var(--navy); box-shadow: none; stroke: #fff; }

/* Puntos sobre la maqueta: alfileres blancos con sombra */
.ed-pin-dot {
  position: relative; width: 18px; height: 18px; border: 0; background: #fff;
  box-shadow: 0 0 0 1px rgba(10, 37, 64, .12), 0 2px 6px rgba(10, 37, 64, .28);
}
.ed-pin-dot::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px;
  border-radius: 50%; background: var(--navy); transition: background-color .2s var(--ease-out);
}
.ed-pin:hover .ed-pin-dot { box-shadow: 0 0 0 1.5px var(--blue), 0 2px 6px rgba(10, 37, 64, .28); }
.ed-pin:hover .ed-pin-dot::after { background: var(--blue); }

/* Invitación sobre el edificio y «Ver todo el edificio»: píldoras blancas */
.ed-hint {
  top: 18px; height: 38px; padding: 0 16px; gap: 9px; border-radius: 999px; background: #fff;
  box-shadow: 0 0 0 1px #e1e7ee, 0 8px 18px -10px rgba(10, 37, 64, .35);
  font: 600 14px/1 var(--font-text); color: var(--ink);
}
.ed-hint svg { width: 18px; height: 18px; }
.ed-back {
  height: 36px; padding: 0 14px; gap: 7px; border: 0; border-radius: 999px;
  box-shadow: 0 0 0 1px #e1e7ee, 0 6px 14px -8px rgba(10, 37, 64, .35);
  font: 600 13.5px/1 var(--font-text); color: var(--ink);
}
.ed-back:hover { box-shadow: 0 0 0 1px var(--navy), 0 6px 14px -8px rgba(10, 37, 64, .35); }

/* Línea con texto: trazo oscuro y letra de placa */
.ed-llamada-linea path { stroke: var(--navy); stroke-width: 1.5; }
.ed-llamada-punto { border-color: var(--navy); }
.ed-llamada-k { font-size: 11px; font-stretch: 112%; letter-spacing: .07em; text-transform: uppercase; }
.ed-llamada-t { font-weight: 640; font-stretch: 110%; letter-spacing: -0.02em; }

/* Escritorio: menú dentro de una tarjeta blanca */
@media (min-width: 901px) {
  .ed-side { padding-top: 26px; }

  

  .ed-menu {
    margin: 18px 0 0 -12px; padding: 6px; border: 1px solid #e3e9ef; border-radius: 16px; background: #fff;
    box-shadow: 0 1px 2px rgba(10, 37, 64, .05), 0 18px 34px -26px rgba(10, 37, 64, .45);
  }
  .ed-group + .ed-group { margin-top: 3px; border-top: 1px solid #eef2f6; }
  .ed-group-t { padding: 9px 8px 4px; font: 600 11px/1 var(--font-text); font-stretch: 112%; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
  .ed-tab { height: 34px; gap: 10px; padding: 0 6px; border-radius: 9px; font: 500 15px/1.2 var(--font-text); color: #24364b; }
  .ed-tab[aria-selected="true"] { font-weight: 640; }
  .ed-menu-mark { top: -1px; left: 6px; width: calc(100% - 12px); height: 34px; border-radius: 9px; background: #eef2f6; box-shadow: none; }
  .ed-llamada-t { font-size: 23px; line-height: 1.1; }
  .ed-llamada-p { font-size: 14.5px; }
}

/* Pantallas de poca altura (notebooks): más compacto para que todo quepa */
@media (min-width: 901px) and (max-height: 980px) {
  .ed-side { padding-top: 18px; }

  

  .ed-menu { margin-top: 12px; }
  .ed-group-t { padding: 7px 8px 3px; }
  .ed-tab, .ed-menu-mark { height: 27px; }
}
@media (min-width: 901px) and (max-height: 760px) {
  .ed-tab, .ed-menu-mark { height: 26px; }
}

/* Celular y tableta vertical */
@media (max-width: 900px) {
  .ed-menu { border-top: 0; }
  .ed-tab { width: 112px; margin-right: 6px; padding: 10px; border-radius: 12px; font: 500 14px/1.2 var(--font-text); }
  .ed-tab[aria-selected="true"] { background: #fff; box-shadow: 0 0 0 1px #e3e9ef, 0 10px 20px -16px rgba(10, 37, 64, .5); }
  .ed-hint { top: 10px; height: 34px; padding: 0 12px; font-size: 12.5px; }

  
  .ed-ficha { order: 5; margin-top: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .ed-tab svg, .ed-pin-dot::after { transition: none; }
}
/* ═══════════════════════════════════════════════
   VERSIÓN 9 · Recuadro de información de la línea con texto (elegido por Jose, 2026-10-12)
   Tarjeta de vidrio blanco translúcido que crece desde la punta de la línea; línea continua negra
   con un borde blanco debajo (.ed-llamada-halo) para que se vea sobre rejas y equipos oscuros;
   texto en negro y gris; ícono del servicio a la izquierda del área (lo copia edificio-3d.js del menú).
   Solo estilos.
   ═══════════════════════════════════════════════ */
.ed-llamada { transition: visibility 0s linear 1.1s; }
.ed-llamada-linea path { stroke: #16181b; stroke-width: 1.6; }
.ed-llamada-linea .ed-llamada-halo { stroke: #fff; stroke-width: 4.5; opacity: .85; }
.ed-llamada-punto { background: #fff; border: 2.5px solid #16181b; box-shadow: 0 0 0 3px rgba(255, 255, 255, .75); }

.ed-llamada-texto {
  left: 42px; top: calc(-1 * var(--alto, 184px) - 21px);
  display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 6px;
  width: min(300px, 44vw); max-width: none; box-sizing: border-box; padding: 13px 16px 12px;
  border-radius: 12px; background: rgba(255, 255, 255, .84);
  -webkit-backdrop-filter: blur(20px) saturate(.35) brightness(1.3); backdrop-filter: blur(20px) saturate(.35) brightness(1.3);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 0 0 1px rgba(10, 37, 64, .07), 0 18px 36px -22px rgba(10, 37, 64, .45);
  text-shadow: none; text-align: left;
  transform-origin: 0 21px; opacity: 0; transform: translateX(-8px) scale(.96);
  transition: opacity .18s var(--ease-out) .1s, transform .22s var(--ease-out) .1s;
}
.ed-llamada.is-on .ed-llamada-texto { opacity: 1; transform: none; transition: opacity .3s var(--ease-out) .78s, transform .5s var(--ease-out) .78s; }
.ed-llamada.is-izq .ed-llamada-texto { left: auto; right: 42px; text-align: left; transform-origin: 100% 21px; transform: translateX(8px) scale(.96); }
.ed-llamada.is-izq.is-on .ed-llamada-texto { transform: none; }

.ed-llamada-ico { color: #5b6068; }
.ed-llamada-ico svg { display: block; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ed-llamada-k { grid-column: 2; font-size: 12px; font-stretch: 100%; letter-spacing: .01em; text-transform: none; color: #5b6068; }
.ed-llamada-t { grid-column: 1 / -1; margin: 5px 0 0; font-size: 20px; line-height: 1.15; color: #16181b; }
.ed-llamada-p { grid-column: 1 / -1; margin: 6px 0 0; max-width: none; font-size: 14px; color: #3b3f45; }
.ed-llamada.is-izq .ed-llamada-p { margin-left: 0; }
.ed-llamada-a {
  grid-column: 1 / -1; display: flex; margin-top: 11px; padding-top: 10px;
  border-top: 1px solid rgba(22, 24, 27, .1); font-size: 14.5px; color: #16181b;
}

/* El contenido entra en orden, después de la tarjeta */
.ed-llamada-ico, .ed-llamada-k, .ed-llamada-t, .ed-llamada-p, .ed-llamada-a { opacity: 0; transform: translateY(4px); transition: opacity .12s, transform .12s; }
.ed-llamada.is-on .ed-llamada-ico, .ed-llamada.is-on .ed-llamada-k { opacity: 1; transform: none; transition: opacity .3s .9s, transform .4s var(--ease-out) .9s; }
.ed-llamada.is-on .ed-llamada-t { opacity: 1; transform: none; transition: opacity .3s .93s, transform .4s var(--ease-out) .93s; }
.ed-llamada.is-on .ed-llamada-p { opacity: 1; transform: none; transition: opacity .3s .96s, transform .4s var(--ease-out) .96s; }
.ed-llamada.is-on .ed-llamada-a { opacity: 1; transform: none; transition: opacity .3s 1.02s, transform .4s var(--ease-out) 1.02s; }

/* Celular y tableta vertical: tarjeta angosta con el nombre y el enlace (el ancho lo usa también edificio-3d.js) */
@media (max-width: 900px) {
  .ed-llamada-texto { width: 168px; padding: 10px 12px; }
  .ed-llamada-ico, .ed-llamada-k, .ed-llamada-p { display: none; }
  .ed-llamada-t { margin-top: 0; font-size: 16px; }
  .ed-llamada-a { margin-top: 8px; padding-top: 8px; font-size: 13px; }
  .ed-llamada-a svg { width: 15px; height: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .ed-llamada-texto, .ed-llamada.is-on .ed-llamada-texto,
  .ed-llamada-ico, .ed-llamada-k, .ed-llamada-t, .ed-llamada-p, .ed-llamada-a,
  .ed-llamada.is-on .ed-llamada-ico, .ed-llamada.is-on .ed-llamada-k, .ed-llamada.is-on .ed-llamada-t,
  .ed-llamada.is-on .ed-llamada-p, .ed-llamada.is-on .ed-llamada-a { transition: none; }
}

/* ═══════════════════════════════════════════════
   VERSIÓN 10 · Pedidos de Jose (2026-10-12, tarde). Solo estilos; para deshacer, borrar este bloque.
   - El edificio ya no se mueve con el mouse ni con los dedos (NAVEGACION_LIBRE en edificio-3d.js):
     sin la mano de «agarrar», y en el celular los gestos quedan para la página.
   - Al pasar el mouse por un servicio del menú, su punto en el edificio se ilumina en ámbar suave
     (el mismo tono de la luz de las cámaras); la clase .is-resalte la pone edificio-ui.js.
   ═══════════════════════════════════════════════ */
.ed-canvas { cursor: default; touch-action: auto; }
.ed-pin.is-resalte { z-index: 2; }
.ed-stage.is-ready:not(.is-close) .ed-pin.is-resalte { opacity: 1; }
.ed-pin.is-resalte .ed-pin-dot {
  transform: scale(1.25);
  box-shadow: 0 0 0 2px #ffb648, 0 0 0 7px rgba(255, 182, 72, .3), 0 2px 6px rgba(10, 37, 64, .28);
}
.ed-pin.is-resalte .ed-pin-dot::after { background: #f29a1f; }
.ed-pin.is-resalte .ed-pin-label { opacity: 1; transform: translate(0, -50%); }

/* Modo edición (solo con ?editar): la cámara se mueve libre y arriba a la izquierda se lee su posición
   (abajo está la franja de garantías) */
.ed-editar {
  position: absolute; left: 16px; top: 16px; z-index: 4; margin: 0; max-width: calc(100% - 32px);
  padding: 8px 12px; border-radius: 10px; background: rgba(22, 24, 27, .82); color: #fff;
  font: 500 12.5px/1.45 ui-monospace, "Cascadia Mono", Consolas, monospace; user-select: all; white-space: pre-wrap;
}
.ed-editar[hidden] { display: none; }
.ed-stage.is-editar .ed-canvas { cursor: grab; }
.ed-stage.is-editar.is-dragging .ed-canvas { cursor: grabbing; }

/* ═══════════════════════════════════════════════
   VERSIÓN 14 · La tarjeta de información recibe el mouse: mientras está encima, no se va
   (edificio-3d.js detiene el reloj de la escena; pedido de Jose, 2026-10-12). Solo estilos.
   ═══════════════════════════════════════════════ */
.ed-llamada.is-on .ed-llamada-texto { pointer-events: auto; }


/* ═══════════════════════════════════════════════
   SELECTOR DE SERVICIOS · ÍNDICE NUMERADO (2026-10-15, alternativa B elegida por Jose)
   Escritorio: lista numerada 01–07, sin íconos; el servicio elegido lleva una barra verde y se despliega con su frase y el enlace.
   Celular y tableta vertical: el mismo menú deslizable de antes, con el número en lugar del ícono.
   Los <svg> siguen en el HTML: edificio-3d.js copia el del servicio elegido a la tarjeta del edificio.
   Deshacer: restaurar respaldos/index.antes-selector-2026-10-15.html y respaldos/edificio.antes-selector-2026-10-15.css
   ═══════════════════════════════════════════════ */
body .ed-tab svg { display: none; }
body .ed-n { font: 600 14px/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--muted); transition: color .2s var(--ease-out); }
body .ed-nm { font: 600 20px/1.2 var(--font-display); letter-spacing: -.005em; color: #33465c; transition: color .2s var(--ease-out); }
body .ed-more a { display: inline-flex; align-items: center; gap: 6px; font: 700 15px/1.2 var(--font-display); color: var(--blue); text-decoration: none; }
body .ed-more a:hover { text-decoration: underline; }
body .ed-more a svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (min-width: 901px) {
  body .ed-tab::after { content: none; }
  body .ed-tab { color: #33465c; font: inherit; letter-spacing: normal; }
  body .ed-menu { margin: 18px 0 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  body .ed-menu-mark { display: none; }
  body .ed-group + .ed-group { margin-top: 26px; border-top: 0; }
  body .ed-group-t { padding: 0 0 8px; font: 600 12px/1 var(--font-text); font-stretch: 100%; letter-spacing: .09em; }
  body .ed-group-items { border-top: 1px solid #c9d3df; }
  body .ed-item { position: relative; border-bottom: 1px solid var(--line); }
  body .ed-item::before {
    content: ""; position: absolute; left: -14px; top: 10px; bottom: 10px; width: 3px; border-radius: 3px;
    background: var(--green); transform: scaleY(0); transition: transform .22s var(--ease-out);
  }
  body .ed-item:has(> .ed-tab[aria-selected="true"])::before { transform: scaleY(1); }
  body .ed-tab { height: auto; padding: 12px 4px 12px 0; gap: 18px; align-items: baseline; border-radius: 0; }
  body .ed-n { flex: none; width: 24px; }
  body .ed-tab:not([aria-selected="true"]):hover { background: none; }
  body .ed-tab:not([aria-selected="true"]):hover .ed-nm { color: var(--ink); }
  body .ed-tab[aria-selected="true"] .ed-nm { color: var(--ink); font-weight: 800; }
  body .ed-tab[aria-selected="true"] .ed-n { color: var(--green); }
  body .ed-tab:focus-visible { outline-offset: 0; border-radius: 6px; }
  body .ed-more { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .28s var(--ease-out), visibility 0s linear .28s; }
  body .ed-more > div { overflow: hidden; padding-left: 42px; }
  body .ed-item:has(> .ed-tab[aria-selected="true"]) .ed-more { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .28s var(--ease-out), visibility 0s; }
  body .ed-more p { margin: 0; font: 400 15px/1.45 var(--font-text); color: var(--muted); }
  body .ed-more a { margin: 6px 0 14px; min-height: 32px; }
}
@media (min-width: 901px) and (max-height: 980px) {
  body .ed-menu { margin-top: 12px; }
  body .ed-group + .ed-group { margin-top: 18px; }
  body .ed-tab { padding: 9px 4px 9px 0; }
  body .ed-nm { font-size: 19px; }
  body .ed-more a { margin: 4px 0 10px; }
}
/* Portátiles de 768 px de alto: con el servicio abierto el botón «Agendar visita gratis» quedaba cortado. Filas más bajas y,
   del servicio abierto, solo el enlace (el texto completo ya lo muestra la tarjeta del edificio). */
@media (min-width: 901px) and (max-height: 820px) {
  body .ed-menu { margin-top: 8px; }
  body .ed-group + .ed-group { margin-top: 14px; }
  body .ed-group-t { padding-bottom: 6px; }
  body .ed-tab { padding: 6px 4px 6px 0; }
  body .ed-nm { font-size: 18px; }
  body .ed-more p { display: none; }
  body .ed-more a { margin: 0 0 8px; min-height: 28px; }
}

@media (hover: hover) and (pointer: fine) {
  body .ed-tab:not([aria-selected="true"]):hover { background: none; color: #33465c; }
  body .ed-tab:not([aria-selected="true"]):hover .ed-nm { color: var(--ink); }
}
@media (max-width: 900px) {
  body .ed-item { display: contents; }
  body .ed-more { display: none; }
  body .ed-n { display: block; }
  body .ed-nm { font: 500 14px/1.2 var(--font-text); color: inherit; }
  body .ed-tab[aria-selected="true"] .ed-nm { font-weight: 700; color: var(--ink); }
  body .ed-tab[aria-selected="true"] .ed-n { color: var(--green); }
}
@media (prefers-reduced-motion: reduce) {
  body .ed-item::before, body .ed-more, body .ed-n, body .ed-nm {
    transition: none;
  }
}


/* ═══════════════════════════════════════════════
   CÍRCULOS DEL EDIFICIO EN CELULAR (2026-10-16, pedido de Jose: «empequeñécelos un poco»)
   Solo celular y tableta vertical (≤ 900 px): el círculo blanco pasa de 18 a 13 px y su centro de 6 a 5 px.
   El área táctil de 44 px (.ed-pin) no cambia: el punto sigue siendo fácil de tocar.
   Deshacer: borrar este bloque (o restaurar respaldos/edificio.antes-circulos-2026-10-16.css).
   ═══════════════════════════════════════════════ */
@media (max-width: 900px) {
  .ed-pin-dot { width: 13px; height: 13px; }
  .ed-pin-dot::after { width: 5px; height: 5px; margin: -2.5px; }
}


/* ═══════════════════════════════════════════════
   HOJA INFERIOR · selector de servicios en celular (2026-10-16, diseño A elegido por Jose)
   Solo celular y tableta vertical (≤ 900 px). Bajo el edificio sube una hoja blanca (solapa 20 px del escenario) con: flechas ‹ ›, «NN de 07»,
   nombre del servicio, su frase y su enlace, y el botón «Ver los 7 servicios», que abre la lista numerada (el menú de siempre, reutilizado).
   No depende de arrastrar. En escritorio la hoja no existe (display: none) y nada de este bloque se aplica.
   La tarjeta con línea del 3D (.ed-llamada) se oculta en celular porque la hoja dice lo mismo; la ficha queda solo para lectores de pantalla.
   Deshacer: restaurar respaldos/index.antes-hoja-movil-2026-10-16.html, respaldos/edificio.antes-hoja-movil-2026-10-16.css y
   respaldos/edificio-ui.antes-hoja-movil-2026-10-16.js
   ═══════════════════════════════════════════════ */
.ed-hoja { display: none; }
@media (max-width: 900px) {
  body .ed-stage { order: 1; }
  body .ed-llamada { display: none; }
  body .ed-ficha {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; box-shadow: none;
  }

  body .ed-hoja {
    order: 2; display: block; position: relative; z-index: 4; margin: -20px 0 0; padding: 8px 16px 16px;
    background: #fff; border-radius: 22px 22px 0 0; box-shadow: 0 -18px 40px -20px rgba(10, 37, 64, .5);
  }
  body .ed.hoja-abierta .ed-hoja { padding-bottom: 0; }
  body .ed-hoja-asa { display: block; width: 40px; height: 5px; margin: 2px auto 12px; border-radius: 5px; background: #c9d3df; }
  body .ed-hoja-nav { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; align-items: center; gap: 4px; }
  body .ed-hoja-flecha {
    display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border-radius: 14px; cursor: pointer;
    background: var(--bg-soft); border: 1px solid var(--line); color: var(--navy); transition: transform .12s var(--ease-out), border-color .2s var(--ease-out);
  }
  body .ed-hoja-flecha:active { transform: scale(.94); }
  body .ed-hoja-flecha:focus-visible, body .ed-hoja-abrir:focus-visible, body .ed-hoja-a:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
  body .ed-hoja-flecha svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  body .ed-hoja-centro { min-width: 0; text-align: center; }
  body .ed-hoja-centro small { display: block; font: 700 12px/1.2 var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: var(--green); }
  body .ed-hoja.is-general .ed-hoja-centro small { color: var(--muted); }
  body .ed-hoja-centro b { display: block; margin-top: 2px; font: 800 21px/1.15 var(--font-display); letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
  body .ed-hoja-p { margin: 10px 4px 2px; text-align: center; font: 400 15px/1.45 var(--font-text); color: var(--muted); }
  body .ed-hoja-a { display: flex; justify-content: center; align-items: center; gap: 6px; min-height: 44px; margin-top: 6px; font: 700 15.5px/1.2 var(--font-display); color: var(--blue); text-decoration: none; }
  body .ed-hoja-a[hidden] { display: none; }
  body .ed-hoja-a svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  body .ed-hoja-abrir {
    display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 48px; margin-top: 10px; border-radius: 12px; cursor: pointer;
    background: var(--bg-soft); border: 1px solid var(--line); font: 700 15px var(--font-display); color: var(--ink);
  }
  body .ed-hoja-abrir svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ease-out); }
  body .ed.hoja-abierta .ed-hoja-abrir svg { transform: rotate(180deg); }

  /* Lista de servicios: el menú de siempre, oculto hasta abrir la hoja */
  body .ed-menu {
    order: 3; display: none; flex-direction: column; margin: 0; padding: 0 16px 16px; border: 0; background: #fff;
    overflow: visible; scroll-snap-type: none; -webkit-mask-image: none; mask-image: none;
  }
  body .ed.hoja-abierta .ed-menu { display: block; }
  body .ed-group { flex: initial; }
  body .ed-group + .ed-group { margin: 0; padding-left: 0; border-left: 0; }
  body .ed-group-t { position: static; width: auto; padding: 12px 0 6px; font: 700 11.5px/1 var(--font-display); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
  body .ed-group-items { flex-direction: column; }
  body .ed-item { display: block; position: relative; border-bottom: 1px solid var(--line); }
  body .ed-group-items .ed-item:last-child { border-bottom: 0; }
  body .ed-item::before {
    content: ""; position: absolute; left: -16px; top: 9px; bottom: 9px; width: 4px; border-radius: 4px;
    background: var(--green); transform: scaleY(0); transition: transform .22s var(--ease-out);
  }
  body .ed-item:has(> .ed-tab[aria-selected="true"])::before { transform: scaleY(1); }
  body .ed-tab {
    flex-direction: row; align-items: center; gap: 14px; width: 100%; height: 46px; min-height: 0; margin: 0; padding: 0 4px;
    border-radius: 0; background: none; box-shadow: none; scroll-snap-align: none;
  }
  body .ed-tab[aria-selected="true"] { background: none; box-shadow: none; }
  body .ed-n { flex: none; width: 22px; font: 600 13px/1 var(--font-display); color: #8b9aac; }
  body .ed-nm { font: 600 17.5px/1.2 var(--font-display); color: #33465c; }
  body .ed-tab[aria-selected="true"] .ed-nm { font-weight: 800; color: var(--ink); }
  body .ed-tab[aria-selected="true"] .ed-n { color: var(--green); }
  body .ed-tab::after {
    content: ""; flex: none; width: 8px; height: 8px; margin: 0 4px 0 auto; border-top: 2px solid currentColor; border-right: 2px solid currentColor;
    transform: rotate(45deg); opacity: .3;
  }
  body .ed-tab[aria-selected="true"]::after { color: var(--green); opacity: 1; }
  /* sitio.css quita el giro del chevrón al pasar el puntero (en escritorio es una flecha): aquí se conserva */
  body .ed-tab:not([aria-selected="true"]):hover::after { transform: rotate(45deg); opacity: .5; }
  /* al abrir la lista, la última fila no queda detrás de la barra fija de abajo («Agendar visita gratis») */
  body .ed-menu { scroll-margin-bottom: 100px; }
}
@media (prefers-reduced-motion: reduce) {
  body .ed-hoja-flecha, body .ed-hoja-abrir svg, body .ed-item::before { transition: none; }
}


/* ═══════════════════════════════════════════════
   CELULAR · ELEGIR UN SERVICIO (2026-10-16, pedido de Jose; reglas de movimiento de UI UX Pro Max: solo transform y opacity,
   salida más rápida que la entrada, curva de salida suave, sin saltos de layout, «reducir movimiento» sin animación)
   Solo celular y tableta vertical (≤ 900 px). Mientras hay un servicio elegido:
   · TARJETA con el texto del servicio sobre el edificio. Abajo con la mayoría; ARRIBA con portones, cámaras y video portero (su equipo
     está abajo o la tarjeta lo taparía; la lista está en edificio-ui.js, TARJETA_ARRIBA). Entra con fundido y sube; al terminar
     (9 s como mínimo, edificio-3d.js) se funde y vuelve a la normalidad. En escritorio no se ve.
   · TÍTULO «¿Qué necesitas proteger?» se pliega (más espacio para el edificio) y vuelve al terminar.
   · BARRA DE CONTACTO fija (Agendar visita, teléfono, mensaje) baja fuera de la pantalla y vuelve al terminar.
   edificio-ui.js pone .ed-activo en #servicios, .ed-sin-barra en <body> y .is-on / .arriba / --dy en #edTarjeta.
   Deshacer: restaurar respaldos/*.antes-transiciones-movil-2026-10-16.* (y, si hace falta, *.antes-titulo-movil-* y *.antes-tarjeta-movil-*)
   ═══════════════════════════════════════════════ */
.ed-tarjeta { display: none; }
@media (max-width: 900px) {
  body .ed-tarjeta {
    --y: 0px;
    display: block; position: absolute; left: 12px; right: 12px; bottom: 34px; z-index: 3; padding: 12px 14px; border-radius: 16px;
    background: rgba(255, 255, 255, .95); border: 1px solid var(--line); box-shadow: 0 10px 30px -10px rgba(10, 37, 64, .45);
    opacity: 0; visibility: hidden; transform: translateY(calc(var(--y) + 14px));
    /* salida: rápida */
    transition: opacity .2s cubic-bezier(.23, 1, .32, 1), transform .24s cubic-bezier(.23, 1, .32, 1), visibility 0s linear .24s;
  }
  body .ed-tarjeta.arriba { --y: calc(var(--dy, 0px) * -1); }
  body .ed-tarjeta.is-on {
    opacity: 1; visibility: visible; transform: translateY(var(--y));
    /* entrada: más lenta y con una pequeña espera para que el edificio ya se esté moviendo */
    transition: opacity .4s cubic-bezier(.23, 1, .32, 1), transform .55s cubic-bezier(.23, 1, .32, 1), visibility 0s;
  }
  body .ed-tarjeta.sin-mov { transition: none; }
  body .ed-tarjeta small { display: block; margin-bottom: 4px; font: 700 11.5px/1.2 var(--font-display); letter-spacing: .07em; text-transform: uppercase; color: var(--green); }
  body .ed-tarjeta span { display: block; font: 400 14.5px/1.45 var(--font-text); color: #1d3550; }
  body #edHojaP { display: none; }

  /* Título de la sección: se pliega (altura medida por edificio-ui.js en --head-h) */
  #servicios .section-head {
    max-height: var(--head-h, 220px); overflow: hidden;
    transition: max-height .46s cubic-bezier(.77, 0, .175, 1) .12s, opacity .38s cubic-bezier(.23, 1, .32, 1) .2s, transform .46s cubic-bezier(.23, 1, .32, 1) .12s, margin .46s cubic-bezier(.77, 0, .175, 1) .12s;
  }
  /* Al elegir un servicio el título SUBE y se esconde bajo la cabecera (translateY −100 % de su propio alto) mientras su espacio se cierra;
     el fundido llega al final del viaje para que se vea deslizar. Al volver, baja desde arriba. */
  #servicios.ed-activo .section-head {
    max-height: 0; opacity: 0; transform: translateY(-100%); margin-top: 0; margin-bottom: 0;
    transition: transform 1s cubic-bezier(.77, 0, .175, 1), opacity .5s cubic-bezier(.4, 0, 1, 1) .5s, max-height 1s cubic-bezier(.77, 0, .175, 1), margin 1s cubic-bezier(.77, 0, .175, 1);   /* alternativa T3 elegida por Jose: sube lento y se esconde, luego baja todo y al final se mueve el edificio */
  }
}
/* Barra de contacto fija (la maneja sitio.css con .is-visible): baja al elegir un servicio y vuelve después */
@media (max-width: 760px) {
  body.ed-sin-barra .mobile-bar.is-visible { transform: translateY(110%); transition: transform .5s cubic-bezier(.23, 1, .32, 1) .6s; }
  body .mobile-bar.is-visible { transition: transform .5s cubic-bezier(.23, 1, .32, 1) .35s; }
}
@media (prefers-reduced-motion: reduce) {
  body .ed-tarjeta, body .ed-tarjeta.is-on, #servicios .section-head, #servicios.ed-activo .section-head,
  body.ed-sin-barra .mobile-bar.is-visible, body .mobile-bar.is-visible { transition: none; }
}


/* ═══════════════════════════════════════════════
   CELULAR · EL EDIFICIO OCUPA LA PANTALLA Y SE QUEDA ALLÍ (2026-10-16, pedido de Jose: «solo se vea el contenedor del edificio 3D,
   sin forzar el deslice, que suavemente se mantenga ahí hasta que el usuario quiera subir o bajar»)
   Solo celular y tableta vertical (≤ 900 px). La sección «Servicios» mide al menos lo que queda de pantalla bajo la cabecera (64 px) y
   el escenario 3D se estira para llenarla, así no asoma el azul de «Así funciona». Imán SUAVE (scroll-snap proximity, no mandatory):
   si la persona se queda cerca, la sección se acomoda sola; si sigue deslizando, sigue de largo. En ≤ 760 px se reservan 76 px abajo
   para la barra fija de contacto (así «Ver los 7 servicios» no queda tapado). Al plegarse el título el escenario crece (ResizeObserver
   de edificio-3d.js ya lo maneja).
   Deshacer: borrar este bloque (o restaurar respaldos/edificio.antes-imanmovil-2026-10-16.css y respaldos/index.antes-imanmovil-2026-10-16.html)
   ═══════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Imán del navegador (proximity) SOLO al acercarse: edificio-ui.js pone .iman-libre en <html> cuando la persona se aleja (sigue hacia «Así funciona» o sube), y entonces no retiene. */
  html:has(#servicios > .ed):not(.iman-libre) { scroll-snap-type: y proximity; }
  html body #servicios {
    display: flex; flex-direction: column; min-height: calc(100svh - 64px);   /* base estable; edificio-ui.js la sigue a la barra de Chrome con --alto-vp y una transición suave (sin saltos) */
    transition: min-height .45s cubic-bezier(.23, 1, .32, 1);
    scroll-snap-align: start; scroll-margin-top: 64px; scroll-snap-stop: normal;
  }
  html body #servicios[style*="--alto-vp"] { min-height: calc(var(--alto-vp) - 64px); }
  html body #servicios > .wrap { flex: none; }
  html body #servicios > .ed { flex: 1 1 auto; min-height: 0; }
  html body .ed-stage { height: auto; flex: 1 1 auto; min-height: 300px; }
}
@media (max-width: 760px) {
  /* Los 76 px de la barra de contacto: al bajar la barra, la hoja de servicios baja con ella (el escenario gana ese espacio); al volver la barra, sube */
  html body #servicios { padding-bottom: 76px; transition: padding-bottom .46s cubic-bezier(.77, 0, .175, 1) .12s, min-height .45s cubic-bezier(.23, 1, .32, 1); }
  html body.ed-sin-barra #servicios { padding-bottom: 0; transition: padding-bottom .9s cubic-bezier(.77, 0, .175, 1) .5s, min-height .45s cubic-bezier(.23, 1, .32, 1); }
}
@media (prefers-reduced-motion: reduce) {
  html body #servicios, html body.ed-sin-barra #servicios { transition: none; }
}


/* ═══════════════════════════════════════════════
   CELULAR · SIN PUNTOS NI AVISO «TOCA UN PUNTO» (2026-10-16, pedido de Jose: «quita los puntos y el texto de toca el edificio… todo esto es solo para el móvil»)
   Solo celular y tableta vertical (≤ 900 px): se ocultan los puntos blancos del edificio (#edPins) y el aviso (#edHint). El servicio se
   elige con las flechas ‹ › o con «Ver los 7 servicios». edificio-3d.js sigue moviendo los puntos por debajo (la tarjeta los usa para
   saber dónde quedó el equipo), por eso se ocultan con display y no se quitan del HTML. En escritorio no cambia nada.
   Deshacer: borrar este bloque (o restaurar respaldos/edificio.antes-sin-puntos-movil-2026-10-16.css)
   ═══════════════════════════════════════════════ */
@media (max-width: 900px) {
  html body .ed-pins, html body .ed-hint { display: none; }
}


/* ═══════════════════════════════════════════════
   CELULAR · «VER TODO EL EDIFICIO» ABAJO A LA DERECHA Y DESCRIPCIONES ARRIBA, CENTRADAS (2026-10-16, decisión de Jose)
   Solo celular y tableta vertical (≤ 900 px). El botón pasa a la esquina inferior derecha del escenario (justo sobre la hoja) y la tarjeta
   con el texto de cada servicio va siempre arriba (edificio-ui.js: `arriba = true`). En escritorio no cambia nada.
   Deshacer: borrar este bloque y restaurar respaldos/*.antes-boton-abajo-2026-10-16.*
   ═══════════════════════════════════════════════ */
@media (max-width: 900px) {
  html body .ed-stage .ed-back { top: auto; bottom: 34px; right: 14px; }
  html body .ed-tarjeta { text-align: center; }
  html body .ed-tarjeta small { text-align: center; }
}

/* El lienzo 3D es más alto que el escenario en celular (edificio-3d.js: medir): el escenario lo recorta */
@media (max-width: 900px) {
  html body .ed-stage { overflow: hidden; }
}