/* LemnaProt v36 · Revisión completa de diseño */

/* 1) Botón "Pausar movimiento": visible y discreto, a la derecha de la franja */
.marquee{position:relative}
.marquee .motion-toggle{position:absolute!important;right:var(--pad,5vw);top:50%;transform:translateY(-50%);margin:0!important;z-index:2;
  font:400 10px/1 'Space Mono',Plex,monospace!important;letter-spacing:.08em;text-transform:none;padding:8px 14px!important;
  color:#f4f0e9!important;background:#2c371d!important;border:1px solid rgba(244,240,233,.28)!important;border-radius:999px!important;opacity:.9!important;
  box-shadow:-24px 0 24px 6px #2c371d}
.marquee .motion-toggle:hover{border-color:#b6cf59!important;color:#b6cf59!important}
@media (max-width:700px){.marquee .motion-toggle{right:12px;padding:7px 10px!important;font-size:9px!important}}

/* 2) Pies de foto que no se corten (ver efectos-vivos.js: quita el recorte al terminar de abrir) */
.abierta-fin{clip-path:none!important}
.plant-photo figcaption{margin-top:10px;padding-left:2px}

/* 3) Sección del pote: el panel claro llega hasta abajo, sin escalón */
.vision{align-items:stretch!important;padding-bottom:0!important}
.vision .product{align-self:stretch;display:flex!important;flex-direction:column;justify-content:center;margin-bottom:0!important}
@media (max-width:900px){.vision{padding-bottom:0!important}}

/* 4) Adornos de plantilla que quedaban */
.film-cross{display:none!important}
.film-tag{border:0!important;padding:0!important;background:none!important;color:#909d65!important}
.pillars li>span.mono{display:none!important}
.pillars img{width:46px!important;height:46px!important;opacity:.9}
.cultivo-tag{background:rgba(244,240,233,.88)!important;color:#2c371d!important;border-radius:999px!important;padding:7px 12px!important;border:0!important;letter-spacing:.06em!important}

/* 6) Barra superior: menos transparente para que no se vea "sucia" sobre textos */
.header.fija{background:rgba(244,240,233,.84)!important}
.header.fija.sobre-oscuro{background:rgba(44,55,29,.84)!important}

/* Barra en celular: una sola fila (logo · Preinscríbete · idioma · menú) */
@media (max-width:700px){
  .header{flex-wrap:nowrap!important;min-height:62px!important;height:auto!important;padding:10px 14px!important;gap:8px!important;align-items:center!important}
  .header.open{flex-wrap:wrap!important}
  .header .brand{order:0;width:112px!important;flex-shrink:0;margin-right:auto}
  .header .brand img{width:112px!important;height:auto!important}
  .header .nav-prein{order:1;margin:0!important;padding:8px 12px!important;font-size:10px!important}
  .header .lang{order:2}
  .header .lang-btn{padding:7px 9px!important;font-size:10px!important}
  .header .menu-toggle{order:3;padding:7px 11px!important;font-size:13px!important}
  .header #navigation{order:4}
  .hero.hx>.hx-sticky{padding-top:92px!important}
  html{scroll-padding-top:70px}
}

/* 3b) Pote como tarjeta con aire (en vez de medio panel pegado al borde) */
.vision .product{margin:clamp(40px,6vh,72px) var(--pad,5vw) clamp(40px,6vh,72px) 0!important;border-radius:24px;overflow:hidden}
@media (max-width:900px){.vision .product{margin:0 16px 48px!important}}

/* 6b) Barra en celular: que quepa en 360–390 px */
@media (max-width:700px){
  .header{gap:6px!important;padding:10px 12px!important}
  .header .brand,.header .brand img{width:100px!important}
  .header .nav-prein{padding:7px 10px!important;font-size:9.5px!important;letter-spacing:.04em!important}
  .header .lang-chev{display:none}
  .header .lang-btn{padding:7px 8px!important}
  .header .menu-toggle{white-space:nowrap;padding:7px 10px!important;font-size:12px!important}
}
@media (max-width:700px){
  .header .lang{order:2!important;margin:0!important;position:relative!important;left:auto!important;right:auto!important;flex-shrink:0}
  .header .menu-toggle{order:3!important;margin:0!important;flex-shrink:0}
  .header .nav-prein{flex-shrink:0}
}
@media (max-width:370px){.header .brand,.header .brand img{width:88px!important}.header .nav-prein{padding:7px 8px!important;font-size:9px!important}}