/* PORTAFOLIO DE PRODUCCIÓN AUDIOVISUAL */
.video-section{padding:118px 0 135px;background:linear-gradient(160deg,#101014,#181318 48%,#0e0e11);color:#f8f7f8;position:relative;overflow:hidden}
.video-section:before{content:'REC';position:absolute;right:-3vw;top:-35px;pointer-events:none;opacity:.035;color:#fff;font:clamp(160px,29vw,420px)/1 var(--heading);letter-spacing:-.12em}
.video-section .container{position:relative}
.video-kicker{color:#fe4779;font-weight:900;font-size:12px;letter-spacing:.19em;text-transform:uppercase;display:flex;align-items:center;gap:12px}
.video-kicker:before{content:'';width:10px;height:10px;border-radius:50%;background:#fb235c;box-shadow:0 0 0 5px #ff24542a}
.video-head{display:grid;grid-template-columns:1fr minmax(200px,350px);align-items:end;gap:48px;margin:27px 0 31px}
.video-title{font:clamp(48px,7.6vw,106px)/.94 var(--heading);letter-spacing:-.075em;text-transform:uppercase;margin:0}
.video-title em{font-style:normal;color:#f82562}
.video-head p{font-size:16px;line-height:1.68;color:#b1afb7;margin:0 0 8px}
.video-note{display:flex;align-items:center;gap:13px;margin-bottom:30px;border-top:1px solid #ffffff25;padding-top:19px;max-width:600px}
.video-note strong{font:38px var(--heading)}
.video-note span{font-size:11px;line-height:1.5;letter-spacing:.07em;text-transform:uppercase;font-weight:800;color:#aaa7b0}
.video-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:29px}
.video-filter{background:transparent;color:#c8c4c8;border:1px solid #454148;font-size:11px;padding:12px 16px;font-weight:900;cursor:pointer;text-transform:uppercase;letter-spacing:.05em}
.video-filter:hover{border-color:#fd3065;color:#fff}
.video-filter.is-current{background:#f82562;color:#fff;border-color:#f82562}
.video-filter:focus-visible,.video-card-button:focus-visible,.video-close:focus-visible{outline:3px solid #ff799c;outline-offset:3px}
.video-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:23px}
.video-card{min-width:0;animation:videoRise .45s ease both}
.video-card:first-child{grid-column:span 1}
.video-card-button{border:1px solid #3d343d;background:#1b181d;color:#fff;padding:0;text-align:left;display:block;width:100%;height:100%;cursor:pointer;transition:transform .25s,border-color .25s,box-shadow .25s}
.video-card-button:hover{transform:translateY(-6px);border-color:#fe316b;box-shadow:0 18px 45px #05040677}
.video-poster{display:block;position:relative;overflow:hidden;aspect-ratio:9/12.3;background:#17141a}
.video-card:first-child .video-poster{aspect-ratio:9/12.3}
.video-poster img{width:100%;height:100%;object-fit:cover;object-position:center 44%;transition:transform .45s}
.video-card-button:hover img{transform:scale(1.05)}
.video-poster:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,#0008,transparent 48%)}
.video-poster-tag{position:absolute;top:14px;left:14px;z-index:2;padding:8px 11px;background:#0d0c0ed9;color:#fff;font-size:10px;font-weight:900;letter-spacing:.12em}
.video-poster-duration{position:absolute;right:13px;bottom:13px;z-index:2;background:#121015d9;border:1px solid #ffffff30;padding:5px 7px;font-size:11px;font-weight:800;letter-spacing:.02em}
.video-play{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;height:70px;width:70px;display:grid;place-items:center;color:#fff;background:#f7235de8;box-shadow:0 0 0 12px #fb2a6022;transition:transform .25s}
.video-card-button:hover .video-play{transform:translate(-50%,-50%) scale(1.13)}
.video-play svg{width:30px;height:30px;margin-left:4px}
.video-card-caption{display:block;padding:17px 17px 22px}
.video-card-client{display:block;font-size:10px;font-weight:900;letter-spacing:.12em;color:#f62a64;text-transform:uppercase}
.video-card-title{display:block;font:clamp(17px,1.75vw,27px)/1.12 var(--heading);letter-spacing:-.045em;text-transform:uppercase;margin:10px 0 9px}
.video-card-sub{display:block;color:#aeacb0;font-size:12px;line-height:1.5}
.video-bottom{margin-top:28px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:18px;border-top:1px solid #41383f;color:#9e989f;letter-spacing:.1em;font-size:10px;font-weight:900;text-transform:uppercase}
.video-overlay{position:fixed;inset:0;z-index:170;background:#050406ed;padding:20px;display:grid;place-items:center;backdrop-filter:blur(10px)}
.video-overlay[hidden]{display:none}
.video-dialog{position:relative;background:#17151a;border:1px solid #61535c;max-width:1060px;width:min(100%,1060px);max-height:95vh;overflow-y:auto;outline:0}
.video-close{position:absolute;top:12px;right:12px;z-index:3;background:#ed275e;color:#fff;border:0;border-radius:50%;width:46px;height:46px;cursor:pointer;font-size:20px}
.video-dialog-layout{display:grid;grid-template-columns:minmax(240px,450px) 1fr;gap:0}
.video-player-wrap{background:#060607;display:flex;align-items:center;justify-content:center;min-height:340px}
.video-player-wrap video{width:100%;max-height:86vh;display:block;aspect-ratio:9/16;object-fit:contain;background:#000}
.video-dialog-copy{display:flex;flex-direction:column;justify-content:center;padding:55px 48px;min-width:0}
.video-dialog-meta{font-size:11px;color:#f72963;letter-spacing:.17em;text-transform:uppercase;font-weight:900;margin:0 0 18px}
.video-dialog-copy h3{font:clamp(32px,4vw,58px)/1.02 var(--heading);letter-spacing:-.06em;text-transform:uppercase;margin:0 0 18px}
.video-dialog-copy p{font-size:16px;line-height:1.7;color:#b8b4bc;margin:0 0 21px}
.video-dialog-foot{color:#96919a;font-size:12px;margin:0 0 30px}
.video-dialog-cta{display:inline-flex;align-self:flex-start;align-items:center;gap:30px;padding:16px 19px;color:#fff;background:#f52360;font-size:12px;font-weight:900;text-transform:uppercase}
@keyframes videoRise{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1000px){.video-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.video-card:first-child{grid-column:span 1}.video-card:first-child .video-poster{aspect-ratio:9/12.3}.video-head{gap:24px}.video-dialog-copy{padding:40px 30px}}
@media(max-width:720px){.video-section{padding:82px 0 96px}.video-head{grid-template-columns:1fr;gap:15px}.video-head p{max-width:500px}.video-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.video-poster{aspect-ratio:9/13!important}.video-card-caption{padding:13px 12px 16px}.video-card-title{font-size:18px}.video-play{width:55px;height:55px}.video-play svg{width:22px;height:22px}.video-poster-tag{top:9px;left:9px;font-size:8px;padding:6px}.video-dialog-layout{grid-template-columns:1fr}.video-player-wrap{min-height:0}.video-player-wrap video{max-height:min(68vh,650px);aspect-ratio:9/16;width:auto;max-width:100%}.video-dialog-copy{padding:20px 24px 28px}.video-dialog-copy h3{font-size:30px;margin-bottom:8px}.video-dialog-copy p{font-size:13px;margin-bottom:12px}.video-dialog-meta{margin-bottom:8px}.video-close{right:9px;top:9px}}
@media(max-width:460px){.video-title{font-size:clamp(44px,12vw,69px)}.video-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.video-card-client{font-size:9px}.video-card-sub{font-size:11px}.video-card-title{font-size:16px}.video-card-caption{padding:12px}.video-play{height:44px;width:44px;box-shadow:0 0 0 7px #fb2a6022}.video-play svg{width:18px;height:18px}.video-overlay{padding:7px}.video-dialog-copy{padding:19px}.video-dialog-copy h3{font-size:26px}.video-filter{padding:10px 12px;font-size:10px}}
@media(prefers-reduced-motion:reduce){.video-card{animation:none}.video-card-button,.video-poster img,.video-play{transition:none}}
