.historia {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  padding: 0;
  overflow: auto;
  background: #fffaf7;
  color: var(--tinta);
}

.historia::backdrop { background: #fffaf7; }

.historia .fechar {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  background: white;
  box-shadow: var(--sombra);
}

.historia-painel {
  display: grid;
  grid-template-columns: minmax(min(100%, 16rem), 20rem) minmax(0, 40rem);
  justify-content: center;
  align-items: start;
  gap: clamp(1.2rem, 3vw, 2.4rem);
  width: min(72rem, calc(100% - clamp(1.5rem, 5vw, 4rem)));
  margin: 0 auto;
  padding: 2.4rem 0 3.5rem;
}

.historia-painel > * { min-width: 0; }

.historia-foto {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 16%;
  border-radius: 1.4rem;
  position: sticky;
  top: 2rem;
}

.historia h2 {
  margin: 0.45rem 0 1rem;
  color: var(--azul-vivo);
  font-size: clamp(1.7rem, 3vw, 2.3rem);
}

.historia-texto p { margin: 0 0 0.85rem; }

.historia h3 {
  margin: 1.4rem 0 0.5rem;
  color: #e07a8a;
  font-size: 1.25rem;
}

.assinatura { font-weight: 800; color: #d87462; }

@media (max-width: 800px) {
  .historia-painel {
    grid-template-columns: 1fr;
    width: min(40rem, calc(100% - 1.5rem));
    padding-top: 3.4rem;
  }

  .historia-foto {
    position: static;
    max-height: min(22rem, 70dvh);
    aspect-ratio: 4 / 5;
  }

  .historia-texto { padding-right: 2.6rem; }
}

@media (max-height: 520px) {
  .historia-foto {
    position: static;
    max-height: min(16rem, 55dvh);
  }

  .historia .fechar { top: 0.45rem; right: 0.45rem; }
}