.header {
    display: flex;
    border-bottom: 1px solid rgb(53, 53, 63);
    padding: 20px;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.header a {
    text-decoration: none;
    color: var(--text);
}
/*style al header, añadir flexbox*/
/* Animación al pasar el mouse sobre el logo o el menú.
   Se mueve ligeramente hacia arriba y agrega un efecto de brillo al texto */
.logo:hover, .menu:hover {
    transform: translateY(-1px);
    text-shadow: 0px 3px 15px #fff; /*Añadir animaciones*/
}

/* Contenedor del logo.
   Usa flexbox para alinear los elementos internos horizontalmente */
.logo {
    display: flex;
}

/* Imagen del logo.
   Se define tamaño, forma circular y márgenes alrededor */
.logo img {
    width: 4rem;
    border-radius: 50%;
    margin: 0.5rem 1rem ;
}

/* Imagen del usuario (por ejemplo avatar o perfil).
   Tiene el mismo estilo que el logo */
.user img {
    width: 4rem;
    border-radius: 50%;
    margin: 0.5rem 1rem;
}

/* Enlace dentro del logo (nombre de la aplicación).
   Se alinea verticalmente con la imagen y se separa del logo */
.logo a {
    display: flex;
    align-items: center;
    margin-left: 1rem;
    font-weight: 700;
}

/* Enlaces dentro del contenedor .contain-a.
   Se separan hacia la derecha con margen */
.contain-a a {
    margin-left: 3.2rem;
}

/* Barra o icono de búsqueda.
   margin-left: auto empuja el elemento hacia la derecha
   cuando se usa dentro de un contenedor flex */
.search {
    margin-left: auto;
}

/* Contenedor principal de compra o tarjeta de compra.
   Se aplica borde, bordes redondeados, padding interno y color de fondo */
.purchase {
    border: 2px solid rgb(77, 75, 75);
    border-radius: 22px;
    padding: 3rem;
    background-color: #1C212D
}

/* Animación al pasar el mouse sobre la tarjeta de compra.
   Se eleva ligeramente y aparece una sombra morada */
.purchase:hover {
    transform: translateY(-2px);
    box-shadow: 10px 10px 10px blueviolet;
    transition: 0.4s ease-in;
}

/* Contenedor de la imagen de confirmación o éxito.
   Se centra horizontalmente y verticalmente */
.img-correct {
    display: flex;
    margin: auto;
    align-items: center;
    text-align: center;
    width: 10rem;
    height: 10rem;
}

/* Imagen dentro del contenedor de confirmación.
   Ocupa todo el ancho disponible del contenedor */
.img-correct img {
    width: 100%;
}

/* Sección de información general.
   Centra el texto y aplica márgenes alrededor */
.information {
    text-align: center;
    margin: 3rem;
    color: var(--size-p2);
    margin-left: 1.5rem;

    max-width: 600px;
    margin-inline: auto;
}

/* Estilo principal de los títulos h1 */
.h1 {
    margin-bottom: 1rem;
    font-weight: 700;
    color: var(--text);
}

/* Tarjeta del resumen del pedido (order summary).
   Se le agrega borde, bordes redondeados, padding y fondo oscuro */
.order {
    border: 1px solid rgb(77, 75, 75);
    border-radius: 22px;
    padding: 2.8rem;
    background-color: #333742;

    width: 100%;
    box-sizing: border-box;
}


/* Título dentro de la sección order */
.order h2 {
    font-weight: 700;
    margin-bottom: 3rem;
}

/* Contenedor de texto dentro de una card o elemento.
   Usa flexbox en columna y separa los elementos con gap */
.text {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

/* Contenedor del costo.
   margin-left: auto lo empuja hacia la derecha en un contenedor flex */
.cost {
    margin-left: auto;
}

/* Imagen del álbum o producto */
.img-album img {
    width: 6rem;
    border-radius: 22px;
}

/* Estilo general para todos los span.
   Aplica un peso de fuente más fuerte */
span {
    font-weight:900;
}

/* Estilo específico para los precios */
.price {
    font-weight: 700; 
    font-size: 1.4rem;
}

/* Línea separadora entre secciones */
.line {
    border-bottom: 0.5px solid rgb(77, 75, 75); 
    margin-bottom: 2rem;
}

/* Contenedor de la sección total */
.total {
    display: block;
}

/* Contenedores que organizan el precio total y el id de la orden.
   Usan flexbox para separar elementos a los extremos */
.total-price,  .id-order {
    justify-content: space-between;
    display: flex;
    flex-wrap: wrap;
}

/* Clase span personalizada para textos secundarios */
.span {
    color: var(--size-p2);
    margin: 0.5rem;
}