/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Estilos generales */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: #f0f0f5;
    color: #333;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

header {
    text-align: center;
    margin-bottom: 20px;
}

.logo {
    max-width: 200px;
}

/* Sección de personalización centrada */
#customizationSection {
    width: 100%;
    max-width: 600px; /* Máximo ancho para centrar el contenido */
    margin: auto;
}

/* Estilos para el carrusel */
.product-carousel {
    text-align: center;
    margin: 20px 0;
    width: 100%;
    overflow: hidden; /* Esconde el desbordamiento */
}

.carousel-container {
    display: flex;
    overflow-x: auto; /* Permite el desplazamiento horizontal */
    scroll-behavior: smooth; /* Transición suave al desplazar */
    -webkit-overflow-scrolling: touch; /* Mejora el desplazamiento en iOS */
}

.carousel-item {
    flex: 0 0 auto; /* Evita que las imágenes se compriman */
    width: 200px; /* Ajusta el ancho según tus necesidades */
    height: auto; /* Mantiene la proporción de las imágenes */
    margin: 0 10px; /* Espacio entre los productos */
    cursor: pointer; /* Cambia el cursor al pasar sobre los productos */
    transition: transform 0.2s ease-in-out; /* Efecto de transición */
}

.carousel-item:hover {
    transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse */
}

/* Estilos para el selector de color */
.colors {
    display: flex;
    justify-content: flex-start; /* Alinea los colores a la izquierda */
    margin-top: 10px;
}

.color-option {
    width: 40px;
    height: 40px;
    margin: 0 10px;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 50%;
    transition: border 0.2s ease; /* Transición suave */
}

.color-option:hover {
    border: 2px solid #007aff; /* Resalta el color seleccionado */
}

/* Estilos para la vista previa del producto */
.product-preview {
    text-align: center;
    margin: 20px 0;
    position: relative;
}

.preview-container {
    position: relative;
}

.product-preview img {
    max-width: 300px; /* Ajusta el tamaño según tus necesidades */
}

.product-preview p {
    font-size: 24px;
    margin-top: 10px;
    position: absolute; /* Permite posicionar el texto sobre la imagen */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #000;
    text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.7);
}

/* Estilos para el botón */
button {
    background-color: #007aff; /* Color de fondo similar al de Apple */
    color: white;
    border: none;
    border-radius: 10px; /* Bordes más redondeados */
    padding: 10px 20px;
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s; /* Transiciones para el hover */
}

button:hover {
    background-color: #0051a8; /* Color más oscuro al pasar el mouse */
    transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse */
}

/* Estilos para el selector de peso */
.weight-picker {
    text-align: center;
}

/* Estilo de transiciones */
input[type="text"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
    transition: border-color 0.2s;
}

input[type="text"]:focus {
    border-color: #007aff; /* Color de borde al enfocarse */
}