/* LemnaProt v20 · Encuadre completo de portada y secuencia de crecimiento
   Para volver a la portada anterior: borrar este archivo, js/hero-placa.js
   y las 3 líneas que los cargan en index.html (ver 00_LEEME). */

/* La imagen ya no va dentro del arco: flota sobre el fondo negro */
.hero-image.is-seq{overflow:visible;border-radius:0;box-shadow:none;background:none}
.hero-image.is-seq:after,.hero-image.is-seq .image-cross,.hero-image.is-seq .hero-symbol{display:none}
.lemna-seq{position:absolute;top:0;bottom:0;left:-18%;right:-18%;width:136%;height:100%;display:block;z-index:0;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 62%,transparent 100%);
          mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 62%,transparent 100%)}
.hero-image.is-seq .specimen{z-index:2;bottom:6%;left:2%}

/* Barra de avance del timelapse, entre los dos textos del pie de imagen */
.hero-visual figcaption{align-items:center;gap:16px}
.seq-bar{flex:1;height:1px;background:rgba(244,240,233,.14);position:relative;max-width:220px}
.seq-bar i{position:absolute;inset:0 auto 0 0;width:0;background:var(--lime)}

/* La escena se compone dentro de la pantalla, con margen superior e inferior.
   Solo se fija si el contenido completo cabe, también al cambiar de idioma. */
@media (min-width:1001px) and (min-height:560px){
  .hero-pin{position:relative}
  .hero-pin>.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;padding-top:clamp(20px,3vh,32px);padding-bottom:clamp(22px,3vh,34px)}
  .hero-pin .hero-grid{width:100%;padding-top:clamp(18px,3.5vh,38px);padding-bottom:clamp(20px,3.5vh,38px);align-items:center;flex:1}
  .hero-pin h1{font-size:clamp(42px,min(6.15vw,9vh),96px)}
  .hero-pin .status{margin-bottom:clamp(12px,2vh,20px)}
  .hero-pin .hero-description{margin-top:clamp(16px,2.5vh,26px)}
  .hero-pin .actions{margin-top:clamp(16px,2.5vh,26px)}
  .hero-pin .hero-stack{margin-top:clamp(16px,2.5vh,26px)}
  .hero-pin .hero-image.is-seq{height:clamp(300px,57vh,570px)}
  .hero-pin .hero-visual{align-self:center}
  .hero-pin .hero-bottom{padding-top:18px}
  .hero-pin.seq-pin-ready{height:calc(var(--hero-h,100svh) + 110svh)}
  .hero-pin.seq-pin-ready>.hero{position:sticky;top:0}
}

/* Celular: la placa queda centrada y un poco más grande */
@media (max-width:700px){
  .lemna-seq{left:-30%;right:-30%;width:160%;top:0;bottom:0;height:100%}
  .seq-bar{max-width:90px}
}

/* Movimiento reducido o pausado: se muestra la placa llena, sin fijar la portada */
@media (prefers-reduced-motion:reduce){.hero-pin{height:auto!important}.hero-pin>.hero{position:relative!important}}
/* Pausar congela la placa conservando el espacio, sin saltos de página. */

/* Arreglo extra (venía de la v17): la lista "Con el apoyo de" se salía por la derecha
   entre 1000 y 1300 px de ancho y la página se podía mover hacia el lado */
.support>*{min-width:0}
.support-list{flex-wrap:wrap}