/* Base styles */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4; /* Fondo claro para la página */
    color: #333;
    margin: 0;
    /* MODIFICADO: Añadido padding-top para dejar espacio al encabezado */
    padding-top: 80px; /* Ajusta este valor (ej. 80px) a la altura real de tu encabezado */
    padding-left: 0; /* Asegura que no haya padding lateral si no es deseado */
    padding-right: 0; /* Asegura que no haya padding lateral si no es deseado */
    padding-bottom: 0; /* Asegura que no haya padding inferior si no es deseado */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.small-container {
    max-width: 1080px;
    margin: auto;
    padding: 20px;
    flex-grow: 1; /* Permite que el contenedor ocupe el espacio restante */
}

.row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Alinea los elementos al inicio */
    flex-wrap: wrap; /* Permite que las columnas se envuelvan */
}

.col-2 {
    flex: 1; /* Permite que las columnas crezcan y se encojan */
    min-width: 300px; /* Ancho mínimo para columnas en pantallas pequeñas */
    padding: 20px;
    box-sizing: border-box;
}

.col-2 img {
    width: 100%;
    cursor: pointer;
    height: auto; /* MODIFICADO: Altura automática para mantener proporción */
    max-height: 550px; /* Altura máxima para la imagen principal */
    object-fit: contain; /* MODIFICADO: Asegura que la imagen se ajuste sin estirarse */
    display: block; /* Elimina espacio extra debajo de la imagen */
    margin-bottom: 20px; /* Espacio debajo de la imagen principal */
}

/* Estilos para el carrusel de miniaturas (MODIFICADO) */
.small-img-carousel-wrapper {
    display: flex;
    align-items: center;
    justify-content: center; /* Centrar el carrusel */
    width: 100%;
    margin-top: 10px;
    position: relative; /* Para posicionar las flechas */
}

.small-img-row {
    display: flex;
    overflow: hidden; /* Oculta las miniaturas que no están visibles */
    flex-grow: 1; /* Permite que la fila de imágenes ocupe el espacio */
    justify-content: center; /* Centra las imágenes si hay menos de las visibles */
    gap: 10px; /* Espacio entre miniaturas */
}

.small-img-col {
    flex-shrink: 0; /* Evita que las miniaturas se encojan */
    width: 80px; /* Ancho fijo para cada miniatura */
    height: 80px; /* Altura fija para cada miniatura */
    border: 1px solid #ddd;
    border-radius: 5px;
    overflow: hidden;
    display: flex; /* Usar flexbox para centrar la imagen dentro del div */
    justify-content: center;
    align-items: center;
}

.small-img-col img {
    width: 100%; /* La imagen ocupa el 100% del contenedor */
    height: 100%; /* La imagen ocupa el 100% del contenedor */
    object-fit: contain; /* MODIFICADO: Asegura que la imagen se ajuste sin estirarse */
    cursor: pointer;
    padding: 2px; /* Pequeño padding para que el borde no corte la imagen */
}

/* Estilos para las flechas del carrusel */
.carousel-arrow {
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    font-size: 1.2em;
    border-radius: 50%;
    transition: background-color 0.3s ease;
    z-index: 10; /* Asegura que las flechas estén por encima de las imágenes */
    position: absolute; /* Posicionamiento absoluto */
}

.left-arrow {
    left: 0; /* Posiciona la flecha izquierda al inicio */
}

.right-arrow {
    right: 0; /* Posiciona la flecha derecha al final */
}

.carousel-arrow:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.carousel-arrow:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}


h1 {
    font-size: 2.5rem;
    margin: 10px 0;
}

h4 {
    font-size: 1.5rem;
    margin: 20px 0;
    color: #ff523b;
}

select, input {
    display: block;
    width: 100%;
    padding: 10px;
    margin: 20px 0;
    border: 1px solid #ccc;
}

.btn {
    display: inline-block;
    background: #ff523b;
    color: #fff;
    padding: 10px 20px;
    margin: 30px 0;
    border-radius: 5px;
    text-decoration: none;
    transition: background 0.3s;
}

.btn:hover {
    background: #563434;
}

/* Media Queries */

/* Tablets and up */
@media (max-width: 992px) {
    .row {
        flex-direction: column; /* Apila las columnas en pantallas pequeñas */
        align-items: center; /* Centra el contenido apilado */
    }
    .col-2 {
        flex: 100%; /* Ocupa todo el ancho disponible */
        max-width: 90%; /* Limita el ancho para que no se pegue a los bordes */
        padding: 10px;
        margin-bottom: 30px; /* Espacio entre secciones apiladas */
    }
    .small-img-carousel-wrapper {
        width: 90%; /* Ajusta el ancho del carrusel de miniaturas */
        margin: 10px auto;
    }
    .carousel-arrow {
        padding: 8px; /* Flechas más pequeñas */
        font-size: 1em;
    }
}

/* Mobile devices */
@media (max-width: 600px) {
    .row {
        display: block; /* Vuelve a block para un control más simple en móviles */
    }

    .col-2 {
        width: 100%; /* Ocupa todo el ancho */
        max-width: 100%;
        padding: 10px;
    }

    .small-img-carousel-wrapper {
        width: 100%; /* Ocupa todo el ancho disponible */
    }

    /* Las miniaturas ya son manejadas por JS (display: block/none) */
    /* .small-img-row { display: block; } */
    /* .small-img-col { width: 100%; margin-bottom: 10px; } */

    h1 { font-size: 2em; }
    h4 { font-size: 1.3em; }
    .btn { padding: 8px 15px; font-size: 0.9em; }

    /* MODIFICADO: Ajuste de padding-top para móviles */
    body {
        padding-top: 60px; /* Un padding-top menor para pantallas más pequeñas */
    }
}