body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;  
  color: #fff;
  font-size: 3em; /* Este font-size se aplica al <p> y se hereda */
  text-align: center;
  overflow: hidden;
  background: url('portada.webp') no-repeat center center fixed;
  background-color: #585858;
  background-blend-mode: multiply;
  background-size: cover;
  width: 100%;
   font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
}

section {
  width: 100%;
}

.container {
  margin: auto;
}

.content img{
  max-width: 100%;
  min-width: 35%;
}

p {
  margin: 0;
  font-size: 20px;
  line-height: 1.2; /* Este line-height se aplica al <p> y se hereda */
}

.word-container {
  position: relative;
  display: inline-block;
  /* Aseguramos que herede el tamaño de fuente y la altura de línea del <p> */
  font-size: inherit;
  line-height: inherit;

  /* *** AJUSTE CLAVE AQUÍ *** */
  /* La altura del contenedor debe ser igual a la altura de línea para contener el texto */
  height: 1.2em; /* Usamos el mismo valor que el line-height del <p> */
  vertical-align: middle;
  width: 100%;

}

.word {
  position: absolute;
  /* *** AJUSTE CLAVE AQUÍ *** */
  /* top: 0; es correcto, pero si la altura de línea es mayor que el font-size,
     el texto puede no estar perfectamente centrado verticalmente.
     Podemos usar transform: translateY para ajustar si es necesario,
     pero con line-height y height consistentes, top: 0 debería funcionar. */
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transform: translateY(100%); /* Las palabras entran desde abajo */
  white-space: nowrap; /* Evita que las palabras se rompan en varias líneas */
  font-size: 30px;
  line-height: inherit;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;


}

.word.active {
  opacity: 1;
  transform: translateY(0);
}