.area-tour{position:fixed;inset:0;width:100%;height:100svh;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;overflow:hidden;background:#1A1D24;color:#E8EAED}
/* Fondo de foto (Alex, 28-sep-2026): la misma oficina del póster, ya descargada, desenfocada y oscurecida. */
.area-tour::before{content:'';position:absolute;inset:-40px;background:#1A1D24 url('media/recorridos/inicial-direccion.jpg') center/cover no-repeat;filter:blur(24px) brightness(.55) saturate(1.05);pointer-events:none}
.area-tour[open]{display:block}.area-tour::backdrop{background:#1A1D24}
.area-tour video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.tour-header{position:absolute;top:max(20px,env(safe-area-inset-top));left:max(24px,env(safe-area-inset-left));right:max(24px,env(safe-area-inset-right));display:flex;justify-content:space-between;gap:12px;z-index:2}
.area-tour button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 20px;border:1px solid #C8C3BA;border-radius:999px;background:#f7f4ee;color:#1e2530;font:500 14px/1.3 Satoshi,Arial,sans-serif;cursor:pointer}
.area-tour button:hover{background:#eee9df;border-color:#3E8EA5}.area-tour button:focus-visible{outline:3px solid #3E8EA5;outline-offset:3px}
.tour-heading{position:absolute;top:max(21px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);padding:9px 22px;border-radius:12px;background:#f7f4ee;color:#1e2530;text-align:center;max-width:calc(100% - 440px)}
.tour-heading p{margin:0 0 4px;font-size:9px;letter-spacing:.13em;color:#5c6573}.tour-heading h2{font-size:17px;line-height:1.2;font-weight:500;margin:0}
.tour-controls{position:absolute;bottom:max(24px,env(safe-area-inset-bottom));left:24px;right:24px;display:flex;align-items:center;gap:18px}.tour-progress{height:3px;background:#363C48;flex:1;border-radius:4px;overflow:hidden}.tour-progress span{height:100%;display:block;background:#E8EAED;width:0}.tour-time{font-size:12px;padding:6px 9px;border-radius:6px;background:#21252E;font-variant-numeric:tabular-nums}.tour-status{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:14px;padding:13px 20px;background:#f7f4ee;color:#1e2530;border-radius:12px;max-width:calc(100% - 32px);text-align:center}
.tour-fallback{margin:0;padding:14px 24px;color:#5c6573;background:#eee9df;font-size:14px}
.office-hotspot[aria-busy="true"]{outline:3px solid #3E8EA5;outline-offset:2px}
@media(max-width:760px){.tour-header{top:max(16px,env(safe-area-inset-top));left:16px;right:16px}.area-tour button{font-size:12px;min-height:48px;padding:12px 15px}.tour-heading{top:86px;max-width:calc(100% - 32px);width:max-content;padding:10px 20px}.tour-heading h2{font-size:17px}.tour-controls{left:16px;right:16px;bottom:max(20px,env(safe-area-inset-bottom));gap:10px;flex-wrap:wrap}.tour-progress{order:-1;flex-basis:100%;margin-bottom:5px}.tour-time{margin-left:auto}}
@media(max-height:500px) and (orientation:landscape){.tour-header{top:12px}.tour-controls{bottom:12px}.tour-heading{top:12px;max-width:calc(100% - 380px)}.tour-heading p{display:none}.tour-heading h2{font-size:14px}}
/* El fondo desenfocado sobresale 40 px; con «hidden» el cuadro podía recorrerse y todo quedaba corrido 40 px arriba e izquierda. «clip» no deja recorrerlo. */
.area-tour{overflow:clip}

/* Todo dentro de la foto (Alex, 29-sep-2026): el recorrido llena la pantalla igual que la oficina, sin franjas. */
.area-tour video{object-fit:cover}