/* Lolo junto al formulario de las landings. Tokens de styles.css. Entrada: transform/opacity, sin bucles. */
.lolo {
  --lolo-ease: cubic-bezier(0.23, 1, 0.32, 1);
  position: relative; margin: 0; isolation: isolate;
}
.lolo__img { display: block; height: auto; max-width: 100%; user-select: none; -webkit-user-drag: none; }
.lolo__say {
  position: relative; margin: 0; background: var(--bone); color: var(--ink);
  border-top: 3px solid var(--signal); padding: 0.85rem 1.05rem 0.8rem; max-width: 21rem;
}
.lp-form__side .lolo__say p {
  margin: 0; max-width: none; color: var(--ink);
  font-family: var(--font-display); font-weight: 600; font-size: clamp(1rem, 0.92rem + 0.4vw, 1.2rem);
  line-height: 1.22; letter-spacing: -0.015em; text-wrap: balance;
}
.lolo__sig {
  display: block; margin-top: 0.55rem; font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.04em; color: rgba(11, 11, 12, 0.62);
}
.lolo__say::after { content: ""; position: absolute; background: var(--bone); }

/* Escritorio: en la columna izquierda, de pie sobre el borde inferior de la sección */
@media (min-width: 1025px) {
  .lp-form { --lp-pad: clamp(4rem, 3rem + 5vw, 8rem); }
  .lp-form__side { display: flex; flex-direction: column; align-self: stretch; }
  .lolo { margin-top: auto; padding-top: 3rem; margin-bottom: calc(-1 * var(--lp-pad)); display: flex; flex-direction: column; align-items: flex-start; }
  .lolo__say { margin-bottom: 1.1rem; }
  .lolo__say::after { left: 3.2rem; bottom: -0.7rem; width: 1.1rem; height: 0.75rem; clip-path: polygon(0 0, 100% 0, 0 100%); }
  .lolo__img { width: min(100%, 22rem); }
}

/* Tablet y móvil: sobre el formulario, recortado al pecho, con la frase al lado */
@media (max-width: 1024px) {
  .lp-form__grid { --lp-gap: clamp(2rem, 6vw, 6rem); }
  .lolo {
    --w: clamp(8.5rem, 40vw, 13rem);
    display: flex; align-items: center; gap: clamp(0.6rem, 3vw, 1.5rem);
    height: calc(var(--w) * 0.95); overflow: hidden;
    margin-top: 1.25rem; margin-bottom: calc(-1 * var(--lp-gap));
  }
  .lolo__img { order: -1; flex: none; width: var(--w); align-self: flex-start; }
  .lolo__say { align-self: center; flex: 1 1 0; min-width: 0; max-width: 24rem; padding: 0.7rem 0.85rem 0.65rem; }
  .lolo__say::after { left: -0.7rem; top: 1rem; width: 0.75rem; height: 1.1rem; clip-path: polygon(100% 0, 100% 100%, 0 0); }
}

/* Entrada: Lolo sube un poco y la frase aparece justo después (solo si hay JS y se permite movimiento) */
.lolo[data-lolo] .lolo__img { opacity: 0; transform: translateY(1.25rem); }
.lolo[data-lolo] .lolo__say { opacity: 0; transform: translateY(0.5rem); }
.lolo[data-lolo="in"] .lolo__img, .lolo[data-lolo="in"] .lolo__say { opacity: 1; transform: none; }
.lolo[data-lolo] .lolo__img { transition: opacity 400ms var(--lolo-ease), transform 400ms var(--lolo-ease); }
.lolo[data-lolo] .lolo__say { transition: opacity 360ms var(--lolo-ease) 170ms, transform 360ms var(--lolo-ease) 170ms; }
@media (prefers-reduced-motion: reduce) {
  .lolo[data-lolo] .lolo__img, .lolo[data-lolo] .lolo__say { transition: none; transform: none; }
}