/* El monitor del inicio: monitor y teclado retro, y el video que se abre al darle play.
   Las medidas del cristal (--gx, --gy, --gw, --gh, --msx...) las pone el bloque de medidas del final de este archivo;
   salen de la mascara que genera docs/interno/maquetas/monitor-retro/monitor_retro.py. */
.mon-sec{position:relative;padding:clamp(88px,12vw,160px) 16px clamp(130px,17vw,230px);text-align:center;overflow:hidden;--mon-spot:rgba(58,110,165,.12)}
html[data-theme="dark"] .mon-sec{--mon-spot:rgba(111,168,220,.14)}
.mon-sec::before{content:'';position:absolute;inset:-10% -10%;background:radial-gradient(ellipse 42% 52% at 50% 46%,var(--mon-spot),transparent 70%);pointer-events:none}
.mon-sec>*{position:relative}
.mon-wrap{display:grid;justify-items:center}
.mon{position:relative;width:min(420px,84vw);aspect-ratio:var(--mon-ar)}
/* la sombra solo la lleva el monitor, detras de el; el teclado apoya en el suelo sin sombra propia */
.mon-sombra{position:absolute;left:14%;right:14%;top:var(--mon-sombra-y);height:9%;background:radial-gradient(ellipse at 50% 50%,rgba(0,0,0,.30),transparent 70%);filter:blur(7px)}
.mon-img{position:absolute;inset:0;width:100%;height:100%;display:block}
.mon-glass{position:absolute;left:var(--gx);top:var(--gy);width:var(--gw);height:var(--gh);padding:0;border:0;margin:0;background:#181818;cursor:pointer;overflow:hidden;
  -webkit-mask-image:var(--mon-mask);mask-image:var(--mon-mask);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:var(--msx) var(--msy);mask-size:var(--msx) var(--msy);-webkit-mask-position:var(--mpx) var(--mpy);mask-position:var(--mpx) var(--mpy)}
.mon-glass img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.mon-glass::after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 1px,transparent 1px 3px),radial-gradient(ellipse at 50% 46%,transparent 55%,rgba(0,0,0,.55) 100%),linear-gradient(115deg,rgba(255,255,255,.10),transparent 36%)}
.mon-play{position:absolute;left:50%;top:50%;width:max(34px,22%);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:rgba(255,255,255,.94);color:#111;display:grid;place-items:center;z-index:2;box-shadow:0 6px 22px rgba(0,0,0,.5);transition:transform .2s}
.mon-play svg{width:42%;height:42%;margin-left:7%}
.mon-glass:hover .mon-play{transform:translate(-50%,-50%) scale(1.08)}
.mon-glass:focus-visible{outline:none}
.mon-glass:focus-visible .mon-play{outline:3px solid #fff;outline-offset:3px}
.mon-dur{position:absolute;left:7%;bottom:8%;z-index:2;font-size:10px;line-height:1.5;color:#fff;background:rgba(0,0,0,.6);padding:0 7px;border-radius:99px}
.mon-t{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(28px,4.2vw,42px);line-height:1.1;letter-spacing:-.02em;margin:clamp(22px,3vw,34px) 0 0;color:var(--text);text-wrap:balance}
.mon-p{margin:8px 0 0;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* el video: la camara entra en la pantalla y llena la ventana */
.mon-ov{position:fixed;inset:0;z-index:300;display:none;color:#fff;user-select:none;-webkit-user-select:none}
.mon-ov.on{display:block}
.mon-bd{position:absolute;inset:0;background:#000;opacity:0}
.mon-clip{position:absolute;inset:0;overflow:hidden;contain:paint}
.mon-box{position:absolute;overflow:hidden;background:#000;transform-origin:50% 50%;will-change:transform}
.mon-pst{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:1;transition:opacity .4s ease;pointer-events:none}
.mon-ov.ok .mon-pst{opacity:0}
.mon-crt{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 1px,transparent 1px 3px)}
.mon-box video{display:block;width:100%;height:100%;object-fit:cover;background:#000}
.mon-spin{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border:3px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;animation:monspin .8s linear infinite;display:none}
.mon-ov.cargando .mon-spin{display:block}
@keyframes monspin{to{transform:rotate(360deg)}}
.mon-err{position:absolute;inset:0;display:none;place-items:center;text-align:center;padding:24px;margin:0;font-size:18px;background:rgba(0,0,0,.72)}
.mon-ov.fallo .mon-err{display:grid}
.mon-ctl{position:absolute;left:0;right:0;bottom:0;padding:48px 22px 20px;background:linear-gradient(transparent,rgba(0,0,0,.8));display:flex;align-items:center;gap:16px;opacity:0;pointer-events:none;transition:opacity .35s}
.mon-ov.ctl-on .mon-ctl,.mon-ov.ctl-on .mon-x{opacity:1;pointer-events:auto}
.mon-ov.quieto .mon-ctl,.mon-ov.quieto .mon-x{opacity:0;pointer-events:none}
.mon-ov.quieto{cursor:none}
.mon-ov button{font:inherit;color:#fff;background:rgba(255,255,255,.14);border:0;border-radius:50%;width:44px;height:44px;display:grid;place-items:center;cursor:pointer;flex:none;padding:0}
.mon-ov button:hover{background:rgba(255,255,255,.28)}
.mon-ov button:focus-visible,.mon-bar:focus-visible{outline:3px solid #fff;outline-offset:2px}
.mon-ov button svg{width:20px;height:20px}
.mon-tm{font-size:13px;font-variant-numeric:tabular-nums;min-width:92px;text-align:center;flex:none}
.mon-bar{position:relative;flex:1;height:30px;display:flex;align-items:center;cursor:pointer;touch-action:none;border-radius:6px}
.mon-bar i{display:block;width:100%;height:5px;border-radius:3px;background:rgba(255,255,255,.28);position:relative}
.mon-bar b{position:absolute;left:0;top:0;height:100%;border-radius:3px;background:#6fa8dc;width:0}
.mon-bar u{position:absolute;top:50%;width:15px;height:15px;margin:-7.5px 0 0 -7.5px;border-radius:50%;background:#fff;left:0;box-shadow:0 1px 6px rgba(0,0,0,.5)}
.mon-x{position:absolute;top:18px;right:18px;opacity:0;pointer-events:none;transition:opacity .35s}
@media (max-width:560px){.mon-ctl{padding:40px 12px 14px;gap:10px}.mon-tm{min-width:70px;font-size:12px}}
.mon-flecha{display:none}
@media (max-width:720px){
  .mon-sec{display:flex;flex-direction:column;align-items:center;padding-top:30px;padding-bottom:clamp(104px,26vw,150px)}
  .mon-t{order:1;margin-top:0}
  .mon-p{order:2;margin:6px 0 24px;display:flex;align-items:center;justify-content:center;gap:9px}
  .mon-flecha{display:inline-flex;color:var(--muted);animation:monflecha 1.8s ease-in-out infinite}
  .mon-flecha svg{width:22px;height:22px;display:block}
  .mon-wrap{order:3;width:100%}
}
@keyframes monflecha{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(6px);opacity:1}}
@media (prefers-reduced-motion:reduce){.mon-flecha{animation:none}.mon-pst,.mon-ctl,.mon-x{transition:none}.mon-spin{animation-duration:2.4s}}

/* medidas del cristal y del monitor (salen del recorte de monitor.webp y de la mascara del cristal) */
.mon{--mon-ar:1772/1436;--mon-sombra-y:60%;--gx:19.865%;--gy:10.377%;--gw:46.444%;--gh:42.201%;--mon-mask:url(/monitor/pantalla-mascara.webp);--msx:100%;--msy:100%;--mpx:0 ;--mpy:0 }