/* Ventana de fotos y vídeo */
.modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;visibility:hidden;opacity:0;transition:opacity .35s ease,visibility 0s .35s}
.modal[aria-hidden="false"]{visibility:visible;opacity:1;transition:opacity .35s ease}
.modal__bg{position:absolute;inset:0;background:rgba(10,14,30,.86)}
.modal__box{position:relative;width:min(1100px,calc(100vw - 32px));max-height:calc(100svh - 32px);display:flex;flex-direction:column;gap:12px;color:#fff;transform:translateY(16px);transition:transform .5s cubic-bezier(.19,1,.22,1)}
.modal[aria-hidden="false"] .modal__box{transform:none}
.modal__head{display:flex;justify-content:space-between;align-items:center}
.modal__title{font-size:24px;font-weight:500;letter-spacing:-.02em}
.modal__x{width:44px;height:44px;display:grid;place-items:center;color:#fff;background:none;border:0;cursor:pointer}
.modal__x .ico,.modal__play .ico{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.5}
.modal__stage{background:#000;aspect-ratio:16/9;max-height:70svh;display:grid;place-items:center;overflow:hidden}
.modal__stage img,.modal__stage video{width:100%;height:100%;object-fit:contain;display:block}
.modal__thumbs{display:flex;gap:8px;overflow-x:auto}
.modal__thumbs button{position:relative;flex:0 0 120px;height:72px;padding:0;border:2px solid transparent;background:none;cursor:pointer;opacity:.6;transition:opacity .25s,border-color .25s}
.modal__thumbs button.on,.modal__thumbs button:hover{opacity:1;border-color:#fff}
.modal__thumbs img{width:100%;height:100%;object-fit:cover;display:block}
.modal__play{position:absolute;inset:0;display:grid;place-items:center;color:#fff;background:rgba(0,0,0,.3)}
.modal__note{font-size:14px;opacity:.7}
html.modal-open{overflow:hidden}
/* Botones que siguen */
.follow{position:fixed;left:50%;bottom:20px;z-index:60;display:flex;gap:8px;padding:6px;transform:translate(-50%,140%);opacity:0;transition:transform .6s cubic-bezier(.19,1,.22,1),opacity .4s}
.follow.on{transform:translate(-50%,0);opacity:1}
@media (max-width:820px){.follow{left:16px;right:16px;bottom:12px;transform:translateY(140%)}.follow.on{transform:none}.follow > *{flex:1;justify-content:center}}
video[data-bg]{width:100%;height:100%;object-fit:cover;display:block}

.menu-open .follow{opacity:0!important;pointer-events:none;transform:translate(-50%,140%)!important}
@media (max-width:820px){.menu-open .follow{transform:translateY(140%)!important}}

/* Menú móvil más suave: panel con curva lenta y enlaces escalonados */
.mobile-menu{transition-duration:.8s!important;transition-timing-function:cubic-bezier(.65,0,.35,1)!important;will-change:transform,clip-path}
.mobile-menu nav a,.mobile-menu nav + *,.mobile-menu > p{opacity:0;transform:translate3d(0,18px,0);transition:opacity .35s ease,transform .5s cubic-bezier(.22,1,.36,1)}
.menu-open .mobile-menu nav a,.menu-open .mobile-menu nav + *,.menu-open .mobile-menu > p{opacity:1;transform:none;transition:opacity .6s ease,transform .9s cubic-bezier(.22,1,.36,1)}
.menu-open .mobile-menu nav a:nth-child(1){transition-delay:.28s}
.menu-open .mobile-menu nav a:nth-child(2){transition-delay:.34s}
.menu-open .mobile-menu nav a:nth-child(3){transition-delay:.40s}
.menu-open .mobile-menu nav a:nth-child(4){transition-delay:.46s}
.menu-open .mobile-menu nav a:nth-child(5){transition-delay:.52s}
.menu-open .mobile-menu nav a:nth-child(6){transition-delay:.58s}
.menu-open .mobile-menu nav + *,.menu-open .mobile-menu > p{transition-delay:.66s}
.mobile-menu{transition-delay:.12s}
.menu-open .mobile-menu{transition-delay:0s}
@media (prefers-reduced-motion:reduce){.mobile-menu,.mobile-menu *{transition:none!important}}

/* Flechas: al pasar el ratón giran hasta apuntar en diagonal (referencia ensoenergy.es) */
a .ico,button .ico,.big-arrow{transition:transform .45s cubic-bezier(.19,1,.22,1)!important}
a:hover .ico[viewBox="0 0 24 24"]:has(path[d^="M2 12h20"]),
button:hover .ico:has(path[d^="M2 12h20"]),
a:focus-visible .ico:has(path[d^="M2 12h20"]){transform:rotate(-45deg)!important}
button:hover .ico:has(path[d^="M22 12H2"]),
button:focus-visible .ico:has(path[d^="M22 12H2"]){transform:rotate(45deg)!important}
.go:hover .big-arrow{transform:translate(8px,-8px)!important}
@media (hover:none){a:hover .ico,button:hover .ico{transform:none!important}}