

.portatil-pantalla .srl{position:relative;aspect-ratio:16/9;background:#0C0E13;overflow:hidden}
.portatil-pantalla .srl img,.portatil-pantalla .srl video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.portatil-pantalla .srl video{opacity:0;transition:opacity .7s ease}
.portatil-pantalla .srl.sonando video{opacity:1}
.srl-click{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in}
.srl-click:focus-visible{outline:3px solid var(--acento,#8B7CF6);outline-offset:-3px}

.srl-grande{position:absolute;left:.7rem;top:.7rem;display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1.05rem .6rem .85rem;border-radius:999px;border:0;background:var(--champan,#E6C87F);color:#0C0E13;font:700 .88rem/1 'Inter',system-ui,sans-serif;letter-spacing:.01em;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.45);transition:filter .2s,transform .2s}
.srl-grande:hover,.srl-grande:focus-visible{filter:brightness(1.08);transform:translateY(-1px)}
.srl-grande:focus-visible{outline:3px solid #fff;outline-offset:2px}
.srl-grande svg{width:14px;height:14px;flex:none}
@media (prefers-reduced-motion:no-preference){.srl-grande{animation:srl-pulso 2.4s ease-out 3}}
@keyframes srl-pulso{0%{box-shadow:0 6px 20px rgba(0,0,0,.45),0 0 0 0 rgba(230,200,127,.6)}70%,100%{box-shadow:0 6px 20px rgba(0,0,0,.45),0 0 0 14px rgba(230,200,127,0)}}
@media (max-width:560px){.srl-grande{font-size:.8rem;padding:.5rem .85rem .5rem .7rem;left:.5rem;top:.5rem}}


dialog.srl-dialog{width:min(1120px,94vw);max-height:94vh;padding:0;border:1px solid rgba(255,255,255,.16);border-radius:14px;background:#0C0E13;color:#fff;overflow:hidden;box-shadow:0 40px 120px rgba(0,0,0,.8)}
dialog.srl-dialog::backdrop{background:rgba(5,6,9,.88)}
.srl-cab{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;padding:.8rem 1rem;border-bottom:1px solid rgba(255,255,255,.1)}
.srl-tabs{display:flex;gap:.5rem;flex-wrap:wrap;flex:1;min-width:0}
.srl-tab{padding:.5rem .9rem;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:transparent;color:#EDEEF2;font:600 .9rem/1.1 'Inter',system-ui,sans-serif;cursor:pointer}
.srl-tab[aria-pressed="true"]{background:#8B7CF6;border-color:#8B7CF6;color:#0C0E13}
.srl-tab:focus-visible,.srl-cerrar:focus-visible{outline:3px solid #E6C87F;outline-offset:2px}
.srl-cerrar{padding:.5rem .95rem;border-radius:999px;border:1px solid rgba(255,255,255,.28);background:transparent;color:#fff;font:600 .9rem/1.1 'Inter',system-ui,sans-serif;cursor:pointer}
.srl-cerrar:hover{border-color:#fff}
dialog.srl-dialog video{display:block;width:100%;max-height:calc(94vh - 4.2rem);aspect-ratio:16/9;background:#000}
@media (prefers-reduced-motion:reduce){.portatil-pantalla .srl video{transition:none}}


.srl-puntos{position:absolute;left:50%;bottom:.55rem;transform:translateX(-50%);display:flex;gap:.1rem;padding:0 .3rem;border-radius:999px;background:rgba(12,14,19,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.srl-puntos button{width:26px;height:26px;padding:0;border:0;background:none;cursor:pointer;position:relative}
.srl-puntos button::after{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:rgba(255,255,255,.45);transition:background .2s,transform .2s}
.srl-puntos button[aria-current="true"]::after{background:#E6C87F;transform:scale(1.25)}
.srl-puntos button:focus-visible{outline:2px solid #E6C87F;outline-offset:-2px;border-radius:50%}


.hero .hero-col .escena-pie{margin-top:1.8rem}


.srl-pie{display:flex;align-items:center;justify-content:space-between;gap:1rem 1.4rem;flex-wrap:wrap;padding:.9rem 1.1rem 1.1rem;border-top:1px solid rgba(255,255,255,.1)}
.srl-info{margin:0;flex:1 1 320px;color:#C9CCD6;font:400 1rem/1.5 'Inter',system-ui,sans-serif}
.srl-cta{display:inline-block;padding:.75rem 1.3rem;border-radius:999px;background:var(--champan,#E6C87F);color:#0C0E13;font:700 .95rem/1 'Inter',system-ui,sans-serif;text-decoration:none;white-space:nowrap}
.srl-cta:hover{filter:brightness(1.08)}
.srl-cta:focus-visible{outline:3px solid #fff;outline-offset:2px}
dialog.srl-dialog video{max-height:calc(94vh - 9.5rem)}
