/* Selinger · hostelería: la parrilla fija y el entorno que pasa de una cocina de restaurante a una terraza con mesas.
   Solo opacity, stroke-dashoffset y transform. El hueco y el bloque (.c-plano*) siguen en paginas.css.
   Sin .hos-go (sin JS, sin movimiento o SVG sin bajar) queda la cocina quieta: la terraza y su paso valen opacity 0. */
.sel-hosteleria svg{display:block;width:100%;height:100%;overflow:visible}
.sel-hosteleria .zt{opacity:0}
/* paso 2 de la leyenda: «Tu cocina» y «Tu terraza» apilados en la misma celda (sin CLS) */
.c-plano-steps .s2{display:inline-grid}
.c-plano-steps .s2>span{grid-area:1/1}
.c-plano-steps .s2 .st{opacity:0}
/* ciclo de 14,4 s: cocina 0–6 s · cambio 6–7,2 s · terraza 7,2–13,2 s · cambio 13,2–14,4 s. .zk = cocina, .zt = terraza; --d escalona las capas */
.hos-go .zk,.hos-go .s2 .sk{animation:hos-rk 14.4s linear var(--d,0s) infinite both}
.hos-go .zt,.hos-go .s2 .st{animation:hos-rt 14.4s linear var(--d,0s) infinite both}
.hos-go .zk [pathLength]{stroke-dasharray:1;animation:hos-dk 14.4s linear var(--d,0s) infinite both}
.hos-go .zt [pathLength]{stroke-dasharray:1;animation:hos-dt 14.4s linear var(--d,0s) infinite both}
.hos-go .emb{animation:hos-emb 2.4s ease-in-out infinite alternate}
.hos-go .sm{animation:hos-smk 3.6s linear infinite}
/* pausa: solo lo del escenario y la leyenda (no la aparición del título, que es del tema) */
.hos-paused .sel-hosteleria *,.hos-paused .c-plano-steps *{animation-play-state:paused!important}
@keyframes hos-rk{0%,41.667%{opacity:1}45.833%,93.75%{opacity:0}96.528%,100%{opacity:1}}
@keyframes hos-rt{0%,43.75%{opacity:0}46.528%,91.667%{opacity:1}95.833%,100%{opacity:0}}
@keyframes hos-dk{0%,41.667%{stroke-dashoffset:0}45.833%{stroke-dashoffset:-1}46%,93.75%{stroke-dashoffset:1}100%{stroke-dashoffset:0}}
@keyframes hos-dt{0%,43.75%{stroke-dashoffset:1}50%,91.667%{stroke-dashoffset:0}95.833%{stroke-dashoffset:-1}96%,100%{stroke-dashoffset:1}}
@keyframes hos-emb{from{opacity:.72}to{opacity:1}}
@keyframes hos-smk{0%{transform:translateY(6px);opacity:0}30%{opacity:1}100%{transform:translateY(-16px);opacity:0}}
/* botón de pausa (WCAG 2.2.2): el mismo patrón que .sel-cfg__pausa. Con «.c-plano» delante gana a «.pg :where(button){font:revert;color:revert}» de paginas.css (misma especificidad, carga después).
   Abajo a la izquierda, alineado con la columna de texto: a la derecha, abajo, flota el botón fijo del asistente (a.asis) y así no pueden coincidir nunca. */
.c-plano .hos-pausa{position:absolute;left:max(clamp(16px,4vw,56px),calc((100% - 1360px)/2));right:auto;bottom:16px;z-index:3;box-sizing:border-box;display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:0;padding:0 16px;background:rgba(20,20,18,.9);border:1px solid var(--gold);color:var(--gold);font:700 .8rem/1.2 var(--f-b);letter-spacing:normal;text-transform:none;cursor:pointer;border-radius:22px}
.c-plano .hos-pausa[hidden]{display:none}
.c-plano .hos-pausa svg{width:14px;height:14px;fill:currentColor;flex:none}
.c-plano .hos-pausa:hover{background:var(--gold);color:var(--ink)}
.c-plano .hos-pausa:focus-visible{outline:2px solid var(--white);outline-offset:2px}
/* móvil: solo el icono */
@media (max-width:860px){.c-plano .hos-pausa{left:16px;width:44px;padding:0;justify-content:center}.c-plano .hos-pausa span{display:none}}
/* movimiento reducido: ni animación ni botón; se queda la cocina */
@media (prefers-reduced-motion:reduce){.hos-go .sel-hosteleria *,.hos-go .c-plano-steps *{animation:none!important}.c-plano .hos-pausa{display:none!important}}