/*Hace que padding y border no alteren el tamaño total*/
* {
    box-sizing: border-box;
    /*Incluye padding y border en el tamaño total del elemento*/
    margin: 0;
    /*Elimina el margen por defecto de los elementos*/
    padding: 0;
    /*Elimina el padding por defecto de los elementos*/
}

/*El body ocupa toda la pantalla*/
body {
    display: block;
    /*Hace que el body se comporte como un bloque*/
    font-family: Arial, sans-serif;
    /*Fuente legible*/
    width: 100%;
    background-color: plum;
}

/*Contenedor adaptable*/
.container {
    width: 90%;
    /*Ancho del contenedor*/
    max-width: 1200px;
    /*Ancho máximo para pantallas grandes*/
    margin: auto;
    /*Margen automático para centrar el contenedor*/
}

/*Flexbox adaptable*/
.flex {
    display: flex;
    /*Coloca elementos en fila*/
    flex-wrap: wrap;
    /*Permite que se acomoden en pantallas pequeñas*/
    gap: 20px;
    /*Espacio entre elementos*/
}

/*Caja adaptable*/
.box {
    flex: 1 1 300px;
    /*Crece, se reduce y mínimo 300px*/
    background: lightblue;
    /*Color de fondo para destacar la caja*/
    padding: 20px;
    /*Espaciado interno*/
    text-align: center;
    /*Centra el texto dentro de la caja*/
}

/*Encabezado*/
#empezar {
    color: #000;
    /*Color del texto*/
    font-size: 30px;
    /*Tamaño del texto*/
    text-align: center;
    /*Centra el texto*/
    margin-bottom: 40px;
    /*Espacio debajo*/
}

/*Botón*/
#boton {
    background-color: white;
    /*Color de fondo*/
    height: 40px;
    /*Altura del botón*/
    border: 2px solid #fff;
    /*Borde blanco*/
    border-radius: 20px;
    /*Bordes redondeados*/
    width: 250px;
    /*Ancho del botón*/
    padding: 0 15px;
    /*Espaciado interno*/
    font-size: 14px;
    /*Tamaño del texto*/
    display: block;
    /*Hace que el botón se comporte como un bloque*/
    text-align: left;
    /*Alinea el texto a la izquierda*/
}

/*Barra superior*/
div.top {
    display: flex;
    /*Flex para alinear logo y texto*/
    align-items: center;
    /*Centra verticalmente*/
    justify-content: space-between;
    /*Espacio entre logo y texto*/
    width: 100%;
    /*Ocupa todo el ancho*/
    height: 200px;
    /*Altura de la barra*/
    background-color: purple;
    /*Color de fondo*/
    color: black;
    /*Color del texto*/
    display: flex;
    /*Flex para alinear logo y texto*/
    align-items: center;
    /*Centra verticalmente*/
    justify-content: space-between;
    /*Espacio entre logo y texto*/
    padding: 0 20px;
    /*Espaciado interno*/
    width: 100%;
    /*Ocupa todo el ancho*/
    margin-bottom: 10px;
    /*Espacio debajo de la barra*/
    border-radius: 7px;
    /*Bordes redondeados*/
}

#nombrs {
    font-size: 40px;
    color: white;
    text-align: right;
    /* Alinea el texto a la derecha */
    margin-left: auto;
    /* Empuja el texto hacia la derecha */
}

/*logo*/
#logop {
    max-width: 200px;
    /*Imagen de 200px*/
    height: auto;
    /*Mantiene proporción*/
    margin-left: 0%;
    /*Alinea a la izquierda*/
}

/*Texto general*/
#texto {
    color: #000;
    /*Color del texto*/
    font-size: 20px;
    /*Tamaño del texto*/
}

/*Cuadro de texto*/
#Cuadrodetexto {
    background-color: rgb(209, 123, 209);
    /*Color de fondo del cuadro*/
    border: 2px solid #000;
    /*Borde del cuadro*/
    padding: 20px;
    /*Espaciado interno del cuadro*/
    margin: 20px auto;
    /*Margen para separar del resto del contenido y centrar*/
    max-width: 600px;
    /*Ancho máximo para evitar que se extienda demasiado en pantallas grandes*/
}

/*Botón para ver la imagen más grande*/
#verBtn {
    display: inline-block;
    /*Hace que el enlace se comporte como un botón*/
    margin-top: 10px;
    /*Espacio encima del botón*/
    padding: 8px 16px;
    /*Espaciado interno del botón*/
    background-color: #8b0580;
    /*Color de fondo del botón*/
    color: #fff;
    /*Color del texto del botón*/
    text-decoration: none;
    /*Elimina el subrayado del enlace*/
    border-radius: 4px;
    /*Bordes redondeados*/
    margin-left: 33%;
    /*Ajusta el margen para centrar el botón debajo del texto*/
    transition: all 0.3s ease-in-out;
    /*Suaviza la transición*/
}


#verBtn:hover {
    transform: scale(1.1);
    /*Agranda el botón al pasar el mouse*/
    background-color: #6a046e;
    /*Cambia el color al pasar el mouse*/
}

#im2 {
    max-width: 200px;
    /*Imagen más pequeña*/
    height: auto;
    /*Mantiene la proporción de la imagen*/
    border: #8b0580 solid 3px;
    /*Borde para resaltar la imagen*/
    float: right;
    /*Flotado a la derecha*/
    margin-left: 20px;
    /*Espacio entre texto e imagen*/
}

/*Texto junto a la imagen*/
#texto2,
#texto3,
#paquete1,
#piezas,
#precio {
    font-size: 18px;
    /*Tamaño del texto*/
    color: #000;
    /*Color del texto*/
    margin-bottom: 10px;
    /*Espacio debajo del texto*/
    text-align: center;
}

/* Contenedor de paquetes */
.paquete-container {
    display: flex;
    /*activa el modo flexible para organizar elementos*/
    align-items: center;
    /*centra los elementos verticalmente*/
    justify-content: center;
    /*centra los elementos horizontalmente*/
    gap: 20px;
    /*agrega espacio entre los elementos del sitio*/
    background-color: #f0f0f0;
    /*color de fondo para destacar el paquete*/
    padding: 20px;
    /*espacio interno dentro del elemento*/
    margin: 20px auto;
    /*margen para separar del resto del contenido y centrar*/
    max-width: 800px;
    /*ancho máximo para evitar que se extienda demasiado en pantallas grandes*/
    border: 2px solid #8b0580;
    /*borde para resaltar el paquete*/
}

/*Información del paquete*/
.paquete-info {
    flex: 1;
    /*Para que el texto ocupe el espacio restante*/
    order: 1;
    /*Asegura que el texto esté a la izquierda*/
}

/*Imagen en el paquete*/
.paquete-container img {
    max-width: 150px;
    /*Ancho de la imagen*/
    height: auto;
    /*Mantiene la proporción de la imagen*/
    border: #8b0580 solid 3px;
    /*Borde para resaltar la imagen*/
    order: 2;
    /*Asegura que la imagen esté a la derecha*/
    flex-shrink: 0;
    /*Evita que la imagen se reduzca en pantallas pequeñas*/
}

#texto2 {
    font-size: 24px;
    /*Cambia el tamaño del texto*/
    color: #000;
    /*Color del texto*/
    margin-bottom: 10px;
    /*Espacio debajo del texto*/
}

/*Responsivo: en pantallas pequeñas la imagen se coloca arriba*/
@media (max-width: 600px) {

    #im2,
    div.top {
        flex-direction: column;
        /*Coloca los elementos en columna*/
        text-align: center;
        /*Centra el texto*/
        height: auto;
        /*Permite que la altura se ajuste automáticamente*/
        padding: 20px;
        /*Espaciado interno para pantallas pequeñas*/
        float: none;
        /*Quita flotado*/
        display: block;
        /*Hace que la imagen se comporte como un bloque*/
        margin: 0 auto 20px;
        /*Centra la imagen*/
    }
}

.navbar {
    display: flex;
    /*Flex para alinear elementos*/
    justify-content: space-between;
    /*Espacio entre logo y menú*/
    align-items: center;
    /*Centra verticalmente*/
    background-color: purple;
    /*Color de fondo*/
    padding: 15px 20px;
    /*Espaciado interno*/
    color: white;
    /*Color del texto*/
    position: relative;
    /*Para posicionar el menú desplegable*/
    margin-bottom: 10px;
    /*Espacio debajo de la barra*/
    margin-top: 5px;
    /*Espacio arriba de la barra*/
    margin-left: 5px;
    /*Espacio a la izquierda de la barra*/
    margin-right: 5px;
    /*Espacio a la derecha de la barra*/
    border-radius: 5px;
    /*Bordes redondeados*/
}

.logo {
    font-size: 20px;
    /*Tamaño del logo*/
}

.nav-links {
    list-style: none;
    /*Elimina los puntos de la lista*/
    display: flex;
    /*Flex para alinear los enlaces en fila*/
}

.nav-links li {
    margin-left: 20px;
    /*Espacio entre enlaces*/
}

.nav-links a {
    text-decoration: none;
    /*Elimina el subrayado*/
    color: white;
    /*Color de los enlaces*/
}

/*ocultar checkbox*/
#menu-toggle {
    display: none;
}

/*boton hamburguesa*/
.hamburger {
    display: none;
    /*Se muestra solo en pantallas pequeñas*/
    font-size: 28px;
    /*Tamaño del icono*/
    cursor: pointer;
    /*Cambia el cursor al pasar sobre el icono*/
}

/*Responsive*/
@media (max-width: 768px) {
    .hamburger {
        /*Muestra el botón hamburguesa en pantallas pequeñas*/
        display: block;
    }

    .nav-links {
        position: absolute;
        /*Posiciona el menú desplegable*/
        top: 60px;
        /*Ajusta según la altura de la barra de navegación*/
        left: 0;
        /*Alinea a la izquierda*/
        width: 100%;
        /*Ocupa todo el ancho*/
        background: purple;
        /*Color de fondo del menú desplegable*/
        flex-direction: column;
        /*Coloca los enlaces en columna*/
        align-items: center;
        /*Centra los enlaces*/
        display: none;
        /*Oculta el menú por defecto*/
    }

    .nav-links li {
        margin: 15px 0;
        /*Espacio entre enlaces en el menú desplegable*/
    }

    /*cuando el checkbox esta activado*/
    #menu-toggle:checked~.nav-links {
        display: flex;
    }
}