/* Hero: el mensaje se integra al bosque y la cascada suma profundidad sin competir con la lectura. */
.hero{min-height:670px;padding-bottom:72px}
.hero:after{background:linear-gradient(90deg,rgba(0,20,36,.56) 0%,rgba(0,25,44,.3) 46%,rgba(0,30,48,.04) 74%)}
.hero-content{max-width:1200px;margin-top:clamp(3.8rem,8vh,6.4rem)}
.hero h1{max-width:880px;font-size:clamp(3.8rem,6.8vw,7.1rem);line-height:.91;letter-spacing:-.065em;margin-bottom:0;text-wrap:balance}
.hero h1 em{font-style:italic;font-weight:400;color:#bdf2f1;text-shadow:0 5px 28px rgba(0,26,44,.56)}
.hero-content>p{max-width:440px;margin:25px 0}
.hero .brand{background:linear-gradient(135deg,rgba(235,253,252,.94),rgba(194,234,235,.82));border-radius:7px;padding:10px 15px}
.hero .brand img{width:192px}
.hero-waterfall{position:absolute;z-index:0;right:clamp(3rem,11vw,12rem);top:18%;width:clamp(180px,23vw,340px);height:68%;background:linear-gradient(180deg,rgba(2,44,65,.02) 0%,rgba(2,43,63,.2) 70%,rgba(1,28,45,.75) 100%),url('assets/cascada-bosque-editorial.png') center/cover;opacity:.58;mix-blend-mode:screen;filter:saturate(.82) contrast(1.05);clip-path:polygon(15% 0,89% 0,100% 100%,0 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 15%,#000 73%,transparent 100%);pointer-events:none}
.hero-waterfall:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,152,177,.2),transparent 64%)}
@media(max-width:720px){.hero{min-height:675px;padding-bottom:70px}.hero-content{margin-top:64px}.hero h1{font-size:clamp(3.35rem,14vw,4.6rem);line-height:.92}.hero .brand img{width:164px}.hero-waterfall{right:-32px;top:30%;width:180px;height:48%;opacity:.3}.hero-content>p{max-width:310px;margin:22px 0}}

/* Firma de marca: sin tarjeta, integrada directamente al paisaje. */
.hero .brand{padding:0;background:transparent;border:0;border-radius:0;box-shadow:none;backdrop-filter:none}
.hero .brand img{width:212px;filter:brightness(0) saturate(100%) invert(89%) sepia(37%) saturate(453%) hue-rotate(130deg) brightness(102%) contrast(96%) drop-shadow(0 3px 10px rgba(0,24,42,.72));opacity:.96}
.hero .brand:hover img{filter:brightness(0) saturate(100%) invert(95%) sepia(28%) saturate(432%) hue-rotate(124deg) brightness(106%) contrast(97%) drop-shadow(0 3px 11px rgba(0,24,42,.78))}
@media(max-width:720px){.hero .brand img{width:172px}}