*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#fff;color:#202020;font-family:Manrope,Arial,sans-serif}
body{min-height:100svh;display:flex;flex-direction:column}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
.skip,.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip:focus{position:fixed;z-index:100;top:8px;left:var(--page-gutter);width:auto;height:auto;clip-path:none;background:#fff;padding:16px}
main{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center}
.rail{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;scroll-padding-left:var(--chrome-gutter)}
.rail::-webkit-scrollbar{display:none}
.track{display:flex;gap:22px;padding:0 var(--chrome-gutter);user-select:none}
.card{flex:0 0 calc((min(100vw,1920px) - 2*var(--page-gutter) - 88px)/5);min-width:0}
.card h2{font-size:clamp(14px,1.35vw,19px);font-weight:500;letter-spacing:-.025em;line-height:1.2;min-height:2.4em;margin:0 0 10px;overflow-wrap:anywhere}
.card h2 a span{display:block}
.media{position:relative;width:100%;height:min(49vh,530px);min-height:260px;background:#e9e9e9;overflow-x:hidden;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior-y:contain;scrollbar-width:none;touch-action:pan-x pan-y pinch-zoom;cursor:grab}
.media::-webkit-scrollbar{display:none}
.media.dragging{scroll-snap-type:none}
.clip{position:relative;width:100%;height:100%;scroll-snap-align:start;scroll-snap-stop:always}
.media:active{cursor:grabbing}
.media .poster,.media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}.media video{opacity:0}.media video[data-frame-ready="true"]{opacity:1}
.card-info{margin-top:12px}
.stage{margin:0;font-size:11px;line-height:1.35;color:#666}
.media-status{position:absolute;inset:auto 8px 8px;margin:0;padding:10px;background:#fff;color:#202020;font-size:12px;line-height:1.4}
.media-status button,#gallery-status button{display:block;min-height:44px;border:0;background:none;padding:8px 0;text-decoration:underline}
#gallery-status{margin:24px var(--chrome-gutter);font-size:14px}
footer{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px var(--chrome-gutter);font-size:11px;color:#777}
footer a{color:#202020}
a:hover{text-decoration:underline;text-underline-offset:4px}
a:focus-visible,button:focus-visible,.rail:focus-visible,.media:focus-visible{outline:2px solid #333;outline-offset:4px}
.rail:focus-visible{outline-offset:-3px}
@media(max-width:800px){
 .track{gap:8px}
 .card{flex-basis:calc(100vw - 2*var(--page-gutter) - 28px)}
 .card h2{font-size:21px;min-height:2.4em}
 .media{height:min(53svh,520px);min-height:240px}
 .card-info{margin-top:10px}
 footer{font-size:10px;padding-bottom:max(12px,env(safe-area-inset-bottom))}
}
@media(max-height:600px){
 .media{height:42svh;min-height:150px}
 main{padding-block:16px}
 footer{padding-top:10px;padding-bottom:max(10px,env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* Presentación y llamada a la acción de la portada */
.intro{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 var(--chrome-gutter) 20px}
.intro h1{margin:0;font-size:clamp(20px,2.1vw,30px);font-weight:500;letter-spacing:-.035em;line-height:1.15;max-width:26ch}
.intro p{margin:8px 0 0;font-size:14px;color:#666;max-width:52ch}
.intro-cta{flex:none;display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 26px;border-radius:999px;background:#202020;color:#fff;font:550 15px/1 Manrope,Arial,sans-serif;letter-spacing:-.01em;transition:background-color 180ms ease}
.intro-cta:hover{background:#444;text-decoration:none}
@media(max-width:800px){
 .intro{flex-direction:column;align-items:flex-start;gap:12px;padding-bottom:14px}
 .intro h1{font-size:19px;max-width:none}.intro p{display:none}
 .intro-cta{min-height:44px;padding:0 22px;font-size:14px}
 .media{height:min(44svh,480px)}
}
@media(max-height:600px){.intro p{display:none}.intro{padding-bottom:10px}}

@font-face{font-family:Manrope;src:url('/assets/fonts/manrope-variable.ttf') format('truetype');font-weight:200 800;font-style:normal;font-display:swap}
html{scrollbar-gutter:stable}
/* One shared navigation component on every route and screen. */
:root{--header-height:100px;--chrome-gutter:clamp(24px,4vw,64px)}
body{padding-top:var(--header-height)}body.video-page{padding-top:0}.menu-open body{overflow:hidden}
header.site-header.studio{position:fixed;inset:0 0 auto;height:100px;width:100%;min-width:0;max-width:none;padding:16px var(--chrome-gutter);margin:0;display:flex;align-items:center;justify-content:flex-start;gap:28px;background:#fff;color:#202020;z-index:60;view-transition-name:none;pointer-events:auto}
.site-header .brand.identity{position:relative;z-index:62;margin:0 auto 0 0;display:flex;align-items:center;flex-shrink:0}.site-header .brand.identity img{display:block;width:64px;height:64px;object-fit:contain}
.site-header .header-contact.studio-contact{position:relative;z-index:62;order:0;display:inline-flex;align-items:center;justify-content:center;min-height:40px;width:auto;margin:0;padding:0 20px;border:0;border-radius:24px;background:#202020;color:#fff;font:550 13px/1.2 Manrope,Arial,sans-serif;letter-spacing:-.015em;text-decoration:none;white-space:nowrap}
.site-header .header-contact:hover{background:#444}.contact-short{display:none}
.site-header .menu-toggle{position:relative;z-index:62;display:flex;align-items:center;min-height:40px;margin:0;padding:0;border:0;border-radius:0;background:none;color:#202020;font:550 14px/1.3 Manrope,Arial,sans-serif;cursor:pointer;text-decoration:underline;text-underline-offset:8px}
html .site-header #main-nav{position:fixed;inset:0;width:100%;height:100dvh;max-height:none;margin:0;padding:calc(100px + 5vh) var(--chrome-gutter) max(48px,env(safe-area-inset-bottom));background:#fff;z-index:61;display:none;flex-direction:column;justify-content:center;align-items:flex-start;gap:8px;border:0;box-shadow:none;overflow-y:auto;overscroll-behavior:contain}
html .site-header #main-nav.open{display:flex;animation:menu-fade 240ms ease both}
html .site-header #main-nav a{width:100%;min-height:0;padding:10px 0;margin:0;border:0;border-radius:0;background:none;color:#202020;font-family:Manrope,Arial,sans-serif;font-weight:450;font-size:clamp(40px,6.5vw,96px);letter-spacing:-.055em;line-height:1.08;text-decoration:none}
html .site-header #main-nav a::after{display:none}html .site-header #main-nav a:hover,html .site-header #main-nav a[aria-current]{color:#777}
@keyframes menu-fade{from{opacity:0}to{opacity:1}}
@media(max-width:800px),(max-height:600px){:root{--header-height:calc(88px + env(safe-area-inset-top))}header.site-header.studio{height:calc(88px + env(safe-area-inset-top));padding:calc(12px + env(safe-area-inset-top)) max(24px,env(safe-area-inset-left)) 12px;gap:22px}.site-header .brand.identity img{width:56px;height:56px}.contact-long{display:none}.contact-short{display:inline}.site-header .header-contact.studio-contact{font-size:12px;padding:0 16px;min-height:36px}.site-header .menu-toggle{font-size:13px;min-height:44px}html .site-header #main-nav{padding-top:calc(88px + env(safe-area-inset-top) + 28px);padding-bottom:48px;gap:16px}html .site-header #main-nav a{font-size:clamp(36px,8.5vw,64px);padding:10px 0}}
@media(max-width:360px){header.site-header.studio{gap:16px}.site-header .header-contact.studio-contact{padding:0 13px}}
@media(prefers-reduced-motion:reduce){html .site-header #main-nav.open{animation:none}}
/* Global alignment tokens, including the centered 1920 px content canvas. */
:root{--page-gutter:clamp(24px,4vw,64px);--gutter:var(--page-gutter);--chrome-gutter:max(var(--page-gutter),calc((100% - 1920px)/2 + var(--page-gutter)));--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;--space-12:48px;--space-16:64px;--page-opening:64px;--section-gap:96px}
.video-footer{left:var(--chrome-gutter);right:var(--chrome-gutter)}
@media(max-width:800px),(max-height:600px){:root{--page-gutter:max(24px,env(safe-area-inset-left),env(safe-area-inset-right));--page-opening:40px;--section-gap:72px}header.site-header.studio{padding-left:var(--page-gutter);padding-right:var(--page-gutter)}}
@media(max-height:600px){html .site-header #main-nav{padding-top:calc(88px + env(safe-area-inset-top) + 12px);padding-bottom:20px;gap:8px}html .site-header #main-nav a{font-size:clamp(26px,min(7vh,8vw),40px);padding-block:8px}}

/* Keep shared navigation stable while the underlying page changes. */
@view-transition{navigation:none}
.site-header .header-contact.studio-contact,.site-header .header-contact.studio-contact:hover{transform:none;transition:none;text-decoration:none;animation:none}
/* Both labels occupy the same grid cell; reserve the wider label in either state. */
.site-header .menu-toggle{display:grid;flex-shrink:0;justify-items:end}
.site-header .menu-toggle .menu-label,.site-header .menu-toggle::after{grid-area:1 / 1}
.site-header .menu-toggle::after{content:"Cerrar";visibility:hidden;pointer-events:none}

/* Botón flotante de WhatsApp */
.wa-float{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:50;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 20px 0 16px;border-radius:999px;background:#202020;color:#fff;font:550 14px/1 Manrope,Arial,sans-serif;text-decoration:none;box-shadow:0 6px 20px rgba(0,0,0,.22);transition:background-color 180ms ease,transform 180ms ease}
.wa-float:hover{background:#444;text-decoration:none}.wa-float:active{transform:scale(.97)}
.wa-float:focus-visible{outline:2px solid #202020;outline-offset:3px}
.menu-open .wa-float{display:none}
@media(max-width:800px){.wa-float{min-height:52px;padding:0 18px 0 14px}}