/* LemnaProt v27 · Portada inmersiva "La superficie se cubre"
   Pantalla completa marfil. Al bajar, la Lemna se multiplica hasta cubrir todo y se funde con la sección verde siguiente. */

/* ---------- Encabezado claro sobre la portada ---------- */
.header{position:absolute;top:0;left:0;right:0;background:transparent!important;border-bottom-color:rgba(44,55,29,.12)!important;color:#2c371d}
.brand{position:relative}
.brand .logo-oscuro{display:block}
.brand .logo-claro{display:none}
.header nav a,.header .menu-toggle,.header .lang-btn{color:#2c371d!important}
.header .menu-toggle,.header .lang-btn{border-color:rgba(44,55,29,.3)!important;background:transparent!important}
.header .nav-contact{border-color:rgba(44,55,29,.35)!important}
.header nav a.nav-contact:hover,.header nav a:hover{color:#5e6f3a!important}
.header .nav-prein{background:#2c371d!important;color:#f4f0e9!important;border-radius:999px}
.header .nav-prein:hover{background:#5e6f3a!important}
.header .lang-menu,.header .lang ul{color:#f4f0e9}
@media (max-width:700px){
  .header.open{background:#f4f0e9!important}
  .header #navigation{background:#f4f0e9}
}

/* ---------- Portada (v30): texto a la izquierda, animación en un recuadro a la derecha que avanza con el scroll ---------- */
.hero.hx{position:relative;height:220vh;height:220svh;padding:0!important;background:#f4f0e9;color:#2c371d;display:block;overflow:visible!important}
.hero-pin{overflow:visible!important;height:auto!important}
.hero.hx>.hx-sticky{position:sticky!important;top:0;height:100vh;height:100svh;box-sizing:border-box;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(24px,4vw,72px);
  padding:clamp(100px,13vh,130px) var(--pad,5vw) clamp(56px,8vh,90px);overflow:hidden}
.hx-sticky:after{display:none}
.hx-copy{position:relative;z-index:2;max-width:580px}
.hx-status{display:flex;align-items:center;gap:8px;color:#5e6f3a;margin:0 0 20px;font-size:11px;letter-spacing:.1em}
.hx-status span{width:7px;height:7px;border-radius:50%;background:#909d65;animation:hx-pulse 2.6s ease-out infinite}
.hx-status b{font-weight:400}
@keyframes hx-pulse{0%{box-shadow:0 0 0 0 rgba(144,157,101,.55)}100%{box-shadow:0 0 0 10px rgba(144,157,101,0)}}
.hx h1{font-size:clamp(44px,min(6vw,11vh),96px)!important;line-height:.98!important;color:#2c371d!important;margin:0 0 22px}
.hx h1>span{display:block}
.hx h1 em{color:#5e6f3a!important}
.hx-desc{font-size:clamp(16px,1.2vw,19px);line-height:1.55;max-width:42ch;margin:0 0 28px;color:#2c371d;opacity:.9}
.hx-desc strong{font-weight:500}
.hx-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}
.hx-btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:999px;background:#2c371d;color:#f4f0e9;font:500 15px/1 Inter,Schibsted,Arial,sans-serif;text-decoration:none;transition:background .3s ease,transform .3s ease}
.hx-btn:hover{background:#5e6f3a;transform:translateY(-1px)}
.hx-link{color:#2c371d;font:500 15px Inter,Schibsted,Arial,sans-serif;text-decoration:underline;text-underline-offset:6px;text-decoration-color:rgba(44,55,29,.35)}
.hx-link:hover{text-decoration-color:#2c371d}

/* Recuadro de la animación: nunca más grande que la imagen (1480 px), bordes que se funden con el marfil */
.hx-anim{position:relative;margin:0;justify-self:end;width:100%;max-width:min(740px,100%);aspect-ratio:1480/1040;max-height:calc(100svh - 200px);
  -webkit-mask-image:radial-gradient(ellipse 62% 60% at 50% 50%,#000 72%,transparent 100%);mask-image:radial-gradient(ellipse 62% 60% at 50% 50%,#000 72%,transparent 100%)}
.hx-anim .hx-poster,.hx-anim .hx-canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.hx-anim .hx-canvas{opacity:0}
.hx.ready .hx-anim .hx-canvas{opacity:1}
.hx.ready .hx-anim .hx-poster{visibility:hidden}

.hx-hint{position:absolute;z-index:2;left:50%;bottom:22px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;font-size:10px;letter-spacing:.14em;color:#5e6f3a;text-decoration:none}
.hx-hint i{width:1px;height:28px;background:linear-gradient(#5e6f3a,transparent);animation:hx-line 2.2s ease-in-out infinite;transform-origin:top}
@keyframes hx-line{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* ---------- Celular: texto arriba, animación abajo ---------- */
@media (max-width:760px){
  .hero.hx>.hx-sticky{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);align-items:start;gap:8px;padding:132px 22px 40px}
  .hx h1{font-size:clamp(40px,11.5vw,54px)!important;margin-bottom:14px}
  .hx-status{margin-bottom:14px}
  .hx-desc{font-size:15px;margin-bottom:18px}
  .hx-anim{justify-self:stretch;align-self:stretch;width:100%;height:100%;max-width:100%;max-height:none;aspect-ratio:auto}
  .hx-hint{display:none}
}
@media (max-width:760px) and (max-height:700px){.hx-desc{display:none}}

/* ---------- Sin movimiento: una sola pantalla ---------- */
@media (prefers-reduced-motion:reduce){.hero.hx{height:auto}.hero.hx>.hx-sticky{position:relative!important}.hx-status span,.hx-hint i{animation:none}}
body.motion-paused .hero.hx{height:auto}
body.motion-paused .hero.hx>.hx-sticky{position:relative!important}

/* v30b · Animación más grande + bordes desenfocados que se funden con el fondo */
@media (min-width:761px){
  .hero.hx>.hx-sticky{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(16px,2.5vw,48px)}
  .hx-anim{max-width:min(940px,100%);max-height:calc(100svh - 150px)}
}
.hx-anim{-webkit-mask-image:radial-gradient(ellipse 72% 70% at 50% 50%,#000 50%,rgba(0,0,0,.6) 72%,transparent 100%);
  mask-image:radial-gradient(ellipse 72% 70% at 50% 50%,#000 50%,rgba(0,0,0,.6) 72%,transparent 100%)}
.hx-anim:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  -webkit-mask-image:radial-gradient(ellipse 72% 70% at 50% 50%,transparent 52%,#000 88%);
  mask-image:radial-gradient(ellipse 72% 70% at 50% 50%,transparent 52%,#000 88%)}
@media (max-width:760px){
  .hx-anim{-webkit-mask-image:radial-gradient(ellipse 75% 72% at 50% 50%,#000 52%,rgba(0,0,0,.6) 74%,transparent 100%);mask-image:radial-gradient(ellipse 75% 72% at 50% 50%,#000 52%,rgba(0,0,0,.6) 74%,transparent 100%)}
}

/* v32 · Más grande y bordes que llegan a transparente total (closest-side = el borde del recuadro) */
.hx-anim{-webkit-mask-image:radial-gradient(closest-side,#000 58%,rgba(0,0,0,.55) 80%,transparent 100%)!important;
  mask-image:radial-gradient(closest-side,#000 58%,rgba(0,0,0,.55) 80%,transparent 100%)!important}
.hx-anim:after{-webkit-mask-image:radial-gradient(closest-side,transparent 55%,#000 95%)!important;mask-image:radial-gradient(closest-side,transparent 55%,#000 95%)!important}
@media (min-width:761px){
  .hero.hx>.hx-sticky{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
  .hx-anim{width:min(64vw,1240px);max-width:none!important;max-height:calc(100svh - 96px)!important;justify-self:center;margin-right:calc(-1 * var(--pad,5vw))}
}
@media (max-width:760px){
  .hx h1{font-size:clamp(38px,10.5vw,48px)!important}
  .hx-desc{font-size:14px;line-height:1.5}
  .hx-anim{width:128%!important;margin-left:-14%;height:118%!important;margin-top:-6%}
}
@media (min-width:761px){.hx-anim{width:min(60vw,1180px)!important;margin-right:calc(-.4 * var(--pad,5vw))!important;justify-self:end!important}}
@media (max-width:760px){.hx-anim{max-width:none!important;max-height:none!important}}

/* v35 · portada fija por menos tiempo */
.hero.hx{height:175vh!important;height:175svh!important}
@media (prefers-reduced-motion:reduce){.hero.hx{height:auto!important}}
body.motion-paused .hero.hx{height:auto!important}