body{
/* Activa el modelo de caja flexible (Flexbox) para organizar los elementos hijos */
display: flex;

/* Centra los elementos horizontalmente en el eje principal */
justify-content: center;

/* Centra los elementos verticalmente en el eje transversal */
align-items: center;

/* Establece la altura del elemento al 100% del alto de la ventana del navegador (viewport height) */
height: 100vh;

/* Aplica un color de fondo casi negro */
background: #0f0f0f;

/* Elimina cualquier margen exterior predeterminado (muy usado para quitar el margen blanco del body) */
margin: 0;

/* Establece la fuente del texto como Arial, usando fuentes sin serifas como alternativa si Arial no carga */
font-family: Arial, sans-serif;
}
/* Inicia el bloque de estilos para los elementos que tengan la clase "hover-underline" */
.hover-underline {

  /* Define el tamaño del texto a 2 veces el tamaño base de la raíz del documento (rem) */
  font-size: 2rem;

  /* Establece el color del texto en blanco puro */
  color: #ffffff;

  /* Permite que los pseudo-elementos (las líneas) se posicionen en relación a este texto */
  position: relative;

  /* Muestra el elemento como un bloque en línea, permitiendo que respete los márgenes sin ocupar el 100% del ancho */
  display: inline-block;
}
/* Selecciona el pseudo-elemento "::after" (la línea que irá debajo del texto) */
.hover-underline::after,

/* Selecciona el pseudo-elemento "::before" (la línea que irá arriba del texto) y abre un bloque de reglas compartido para ambos */
.hover-underline::before {

  /* Contenido obligatorio para que los pseudo-elementos existan en el HTML; al estar vacío no muestra texto */
  content: '';

  /* Saca a las líneas del flujo normal del documento para poder posicionarlas con precisión */
  position: absolute;

  /* Hace que el ancho de las líneas sea del 100% del ancho del texto */
  width: 100%;

  /* Le da un grosor de 2 píxeles a las líneas */
  height: 2px;

  /* Aplica un fondo con un degradado lineal que va de rojo (izquierda) a cian/azul claro (derecha) */
  background: linear-gradient(to right, #ff0000, #00ffff);

  /* (Aplica a ::after) Posiciona la línea inferior 5 píxeles por debajo de la base del texto */
  bottom: -5px;

  /* Alinea el inicio de ambas líneas exactamente en el borde izquierdo del texto */
  left: 0;

  /* Escala las líneas horizontalmente a 0, haciéndolas invisibles en su estado inicial */
  transform: scaleX(0);

  /* Establece que el punto de origen de la animación sea el lado derecho (la línea se "encogerá" hacia la derecha al desaparecer) */
  transform-origin: right;

  /* Crea una transición suave de 0.4 segundos en la propiedad "transform" con un ritmo de desaceleración al final */
  transition: transform 0.4s ease-out;
}
/* Abre un bloque exclusivo para sobrescribir propiedades solo en la línea superior (::before) */
.hover-underline::before {

  /* Posiciona la línea superior 5 píxeles por encima de la parte superior del texto */
  top: -5px;

  /* Cambia el punto de origen de la animación al lado izquierdo (la línea superior se "abrirá" desde la izquierda) */
  transform-origin: left;
}
/* Selecciona la línea inferior cuando el usuario pone el cursor (hover) sobre el texto */
.hover-underline:hover::after,

/* Selecciona la línea superior cuando el usuario pone el cursor (hover) sobre el texto y abre el bloque */
.hover-underline:hover::before {

  /* Escala las líneas horizontalmente a 1 (su tamaño real), haciéndolas visibles y activando la transición */
  transform: scaleX(1);
}