/* El telefono que se recorre (ver telefono.js). Marco blanco, como pidio Fran el 13-oct. */
.tel{--tw:300px;width:var(--tw);max-width:100%;display:grid;gap:10px;justify-items:center}
.tel-scr{position:relative;width:100%;border-radius:calc(var(--tw)*.14);background:#fff;padding:calc(var(--tw)*.035);box-shadow:0 0 0 1px rgba(16,32,26,.10),0 30px 60px -28px rgba(10,40,30,.45),0 10px 20px -12px rgba(10,40,30,.25);isolation:isolate}
.tel-in{position:relative;aspect-ratio:390/844;border-radius:calc(var(--tw)*.11);overflow:hidden;background:#F4F7FA}
.tel-pane{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;background:#F4F7FA;transition:opacity .14s ease-out;touch-action:pan-y;overscroll-behavior:contain}
/* contain: al llegar al final de la captura, la rueda no sigue en la pagina (Fran, 14-oct: "no puedo navegar, anda mal") */
@media (pointer:fine){.tel-pane{cursor:grab}.tel.arrastra .tel-pane,.tel.arrastra .tel-zn{cursor:grabbing}.tel-pane img{-webkit-user-select:none;user-select:none}}
.tel-pane::-webkit-scrollbar{display:none}
.tel-pane.out{opacity:0}
.tel-pg{position:relative;width:100%}
.tel-pg img{position:absolute;inset:0;width:100%;height:100%;display:block}
.tel-mnu{position:absolute;z-index:2;border-radius:11px;overflow:hidden;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 0 0 1px rgba(11,26,19,.07),0 8px 18px -8px rgba(15,23,42,.3)}
.tel-mnu img{position:absolute;inset:0;width:100%;height:100%}
.tel-zn{position:absolute;padding:0;border:0;background:transparent;cursor:pointer;border-radius:9px;-webkit-tap-highlight-color:transparent;transition:box-shadow .25s,background .25s}
.tel-zn:focus-visible{outline:3px solid #17548F;outline-offset:-3px}
.tel-pie{margin:0;font-size:13px;line-height:1.35;color:var(--muted,#55665F);text-align:center;min-height:2.7em;max-width:var(--tw)}
@media (prefers-reduced-motion:reduce){.tel-pane{transition:none}}