/* Local reference study: Lusion's measured 12-column reel composition and Aeonik. */
@font-face{font-family:BrumeReel;src:url('../assets/fonts/Aeonik-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:BrumeReel;src:url('../assets/fonts/Aeonik-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
#brume-reel{--reel-gap:2vw;--reel-pad:max(5vw,40px);--reel-space:calc((100% - 11 * var(--reel-gap))/12);position:fixed;inset:0;z-index:7;color:#000;font-family:BrumeReel,sans-serif;font-weight:400;font-size:clamp(14px,1vw,32px);visibility:hidden;pointer-events:none;overflow:hidden;contain:layout style}
#brume-reel.is-active{visibility:visible;pointer-events:auto}
#brume-reel.is-handoff{visibility:visible;pointer-events:none}
/* A single live surface grows over the outgoing scene. No screenshot layer,
   duplicated video or extra canvas is created for these transitions. */
body.reel-handoff-to-reel #brume-reel{z-index:12;will-change:transform,clip-path}
body.reel-handoff-to-why #brume-why{z-index:12;will-change:transform,clip-path}
body.reel-handoff-to-mist #canva{z-index:10;will-change:transform,clip-path}
body.reel-handoff-to-mist .step[data-section="1"]{z-index:11;will-change:transform,clip-path;pointer-events:none}
body.reel-handoff-from-mist #brume-mist{visibility:visible!important}
body.reel-handoff-from-mist #canva>img[data-botanical]{visibility:hidden!important}
body.reel-handoff-from-mist .step[data-section="1"]{visibility:hidden!important}
body.reel-handoff-to-reel #brume-why,body.reel-handoff-to-mist #brume-why{pointer-events:none}
body[class*="reel-handoff-"] .scroll-down,body[class*="reel-handoff-"]>a.contact{visibility:hidden!important;pointer-events:none!important}
#brume-reel:not(.is-active) .reel-video-interface{visibility:hidden!important}
.reel-background{position:absolute;inset:0;background:#f0f1fa}
.reel-grid{position:absolute;top:0;left:0;display:grid;width:100%;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--reel-gap);padding:clamp(30px,4vw,50px) var(--reel-pad);will-change:transform}
.reel-ribbon{position:absolute;top:0;left:0;width:100%;height:auto;pointer-events:none;overflow:visible}
.reel-ribbon path{stroke-dasharray:1;stroke-dashoffset:1}
.reel-content{position:relative;z-index:1}
.reel-title{position:relative;font-family:inherit;font-size:10vw;font-weight:400;line-height:1;letter-spacing:-.02em;left:-.03em;grid-column:1/span 12;margin:1em 0 .5em}
.reel-title-inner{position:relative;display:inline-block}
.reel-title-line{overflow:hidden;white-space:nowrap}
.reel-title-line:first-child{padding-left:calc(var(--reel-space)*2 + var(--reel-gap)*2)}
.reel-word{position:relative;display:inline-block;will-change:transform;transform:translateY(110%)}
.reel-title-line:last-child .reel-word{transform:translateY(-110%)}
.reel-content{grid-column:7/span 6;font-size:clamp(16px,1.5vw,48px);line-height:1.4;height:fit-content}
.reel-description{font:inherit;letter-spacing:0;margin:0;will-change:transform}
.reel-description .reel-word{transform:translateY(100%);opacity:.1}
.reel-cta{display:flex;align-items:center;gap:1em;position:relative;overflow:hidden;float:left;width:fit-content;height:3.375em;padding:1em 1.5em 1em 1.625em;margin-top:3em;border:0;border-radius:5.3125em;background:#fff;color:#000;font:500 clamp(14px,1vw,28px)/1 BrumeReel,sans-serif;text-transform:uppercase;cursor:pointer;box-shadow:0 6px 10px #0000000a,0 2px 4px #0000000a;opacity:0;transition:background .3s,color .3s}
.reel-cta-dot{width:.5em;height:.5em;border-radius:50%;background:currentColor}
.reel-cta:hover{background:#034638;color:#bbfd6a}
.reel-cta:focus-visible,.reel-watch:focus-visible{outline:3px solid #034638;outline-offset:5px}
.reel-thumb-wrapper{position:relative;grid-column:1/span 5;width:calc(100% + var(--reel-gap)*2);height:0;top:-10em}
.reel-thumb{width:100%;height:0;padding-top:56.25%}
.reel-container{position:relative;grid-column:1/13;padding-bottom:100vh;margin-bottom:10vh}
.reel-container-inner{position:relative;width:100%}
.reel-target{position:relative;width:100%;height:45vw;margin-left:auto;margin-right:auto}
#brume-reel-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.reel-preview,.reel-fallback{position:absolute;object-fit:contain;border-radius:20px;z-index:2;display:none;pointer-events:none;background:#111}
.reel-video-interface{position:absolute;z-index:3;pointer-events:none}
.reel-watch{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;width:9.4em;height:6em;border:0;border-radius:22.5em;background:white;color:#000;font-size:14px;cursor:pointer;pointer-events:auto;transition:background .3s,color .3s}
.reel-watch:hover{background:#034638;color:#bbfd6a}
.reel-watch svg{width:2em;height:2em;fill:currentColor}
.reel-video-title{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:grid;grid-template-columns:1fr 1fr;gap:2em;color:white;font-size:7.5em;line-height:1;letter-spacing:-.02em;text-transform:uppercase;white-space:nowrap}
.reel-video-title>span:first-child{text-align:right}.reel-video-title>span:last-child{text-align:left}
.reel-video-title>span{overflow:hidden}
.reel-video-title span span{display:block;transform:translateY(110%);transition:transform 1s cubic-bezier(.35,0,0,1)}
.reel-video-interface.is-expanded .reel-video-title span span{transform:none}
.reel-crosses{position:absolute;left:0;right:0;top:-28px;display:flex;justify-content:space-between;color:#000;font:400 20px/14px BrumeReel,sans-serif}
.reel-crosses.bottom{top:auto;bottom:-28px}
.reel-marquee{position:absolute;inset:-30px 0 auto;display:none;overflow:hidden;white-space:nowrap;color:black;font-size:14px;text-align:center;line-height:20px;letter-spacing:2px}
.reel-marquee.bottom{top:auto;bottom:-30px}
.reel-video-interface:has(.reel-watch:hover) .reel-crosses{opacity:0}
.reel-video-interface:has(.reel-watch:hover) .reel-marquee{display:block}
body.reel-active>header:not(.open){color:#000}
body.reel-active>header:not(.open) .logo img{filter:none!important}
body.reel-light-header>header:not(.open) .logo img{filter:none!important}
body.reel-active .scroll-down,body.reel-active>a.contact{visibility:hidden;pointer-events:none}
body.reel-active #inicio .video-launch{visibility:hidden!important}
body.reel-active #hero-brotes{visibility:hidden;opacity:0}
#germinats-dialog.reel-fullscreen{inset:0;margin:0;width:100vw;max-width:none;height:100dvh;max-height:none;padding:0;border-radius:0;background:#000;color:#fff;overflow:hidden;animation:reel-open .32s ease-out}
#germinats-dialog.reel-fullscreen::backdrop{background:#000;backdrop-filter:none}
#germinats-dialog.reel-fullscreen .germinats-heading{position:absolute;inset:24px 24px auto;z-index:2;justify-content:flex-end}
#germinats-dialog.reel-fullscreen .germinats-heading>div,#germinats-dialog.reel-fullscreen #germinats-description{display:none}
#germinats-dialog.reel-fullscreen .germinats-close{color:#000;background:#fff;border:0;width:56px;height:56px;flex-basis:56px;font-family:BrumeReel,sans-serif;font-size:36px;z-index:2}
#germinats-dialog.reel-fullscreen #germinats-video{height:100%;width:100%;max-height:none;border-radius:0;object-fit:contain}
.reel-player-controls{display:none;position:absolute;left:5vw;right:5vw;bottom:5vh;z-index:3;color:#fff;font:400 14px/1 BrumeReel,sans-serif;align-items:center;gap:24px;padding:16px 0;background:linear-gradient(transparent,#0008)}
#germinats-dialog.reel-fullscreen .reel-player-controls{display:flex}
#germinats-dialog .reel-player-controls button{float:none;width:auto;height:auto;border:0;border-radius:0;color:inherit;font:inherit;text-transform:uppercase;background:none;padding:8px 0;min-width:44px;min-height:44px}
.reel-player-controls input{appearance:none;height:2px;background:#777;width:100%;flex:1;cursor:pointer;accent-color:white}
.reel-player-controls input::-webkit-slider-thumb{appearance:none;width:10px;height:10px;border-radius:50%;background:white}
.reel-player-controls input:focus-visible{outline:2px solid white;outline-offset:8px}
#germinats-dialog .reel-player-controls button:focus-visible{outline:2px solid white;outline-offset:4px}
.reel-player-time{white-space:nowrap;font-variant-numeric:tabular-nums}
@media(hover:hover){#germinats-dialog.reel-fullscreen.is-pointer-close .germinats-close{position:fixed;left:var(--close-x);top:var(--close-y);transform:translate(-50%,-50%);pointer-events:none}}
@media(max-width:812px){.reel-ribbon{top:200px;width:180%;max-width:none;left:-40%}.reel-player-controls{left:15px;right:15px;gap:14px;font-size:12px}.reel-player-time{display:none}}
@keyframes reel-open{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
@media(min-aspect-ratio:21/9){.reel-title{font-size:6.7vw}.reel-content{grid-column:8/span 3}}
@media(max-width:812px){#brume-reel{--reel-pad:25px;--reel-gap:4vw}.reel-grid{grid-template-columns:repeat(6,minmax(0,1fr));padding:25px var(--reel-pad)}.reel-title{grid-column:1/span 6;font-size:13.8vw;margin-bottom:1em}.reel-title-line{white-space:normal;overflow:visible}.reel-title-line:first-child{padding-left:0}.reel-content{grid-column:1/span 6;font-size:16px}.reel-cta{opacity:1;margin-bottom:6em}.reel-thumb-wrapper{top:0}.reel-thumb{padding:0}.reel-container{grid-column:1/span 6;padding-bottom:0}.reel-title .reel-word,.reel-description .reel-word{transform:none;opacity:1}.reel-video-title{display:none}.reel-crosses{display:none}.reel-marquee{display:block}.reel-watch{font-size:12px}.reel-video-interface{font-size:12px}}
@media(max-width:480px){#brume-reel{--reel-pad:15px}.reel-grid{padding:15px}.reel-title{font-size:20vw;letter-spacing:-.03em}}
@media(max-width:812px){.reel-title .reel-word,.reel-description .reel-word{transform:none!important;opacity:1!important}}
body.reduced #brume-reel{position:relative;height:auto;visibility:visible;pointer-events:auto;overflow:visible;contain:none}
body.reduced .reel-grid{position:relative;transform:none!important}
body.reduced .reel-container{padding-bottom:0}
body.reduced .reel-background{inset:0!important}
body.reduced .reel-word{transform:none!important;opacity:1!important}
body.reduced .reel-cta{opacity:1;transform:none!important}
body.reduced .reel-title-inner,body.reduced .reel-description{transform:none!important}
body.reduced #brume-reel-canvas{display:none}
body.reduced .reel-fallback{display:block!important}
@media(prefers-reduced-motion:reduce){.reel-video-title span span{transition:none}#germinats-dialog.reel-fullscreen{animation:none}}