@media (max-width: 768px) {
    html, body {
        margin: 0;
        padding: 0;
        width: 100%;
        overflow-x: hidden;
    }
    
    /* Main Container */
    .main-container {
        display: flex;
        flex-direction: column;
        gap: 20px;
        /* Separación entre galería y detalles */
        padding: 10px;
        /* Reducir padding */
    }
    .container {
        max-width: 100%; /* Asegura que no se extienda más allá del contenedor padre */
        margin: 0 auto; /* Centra el contenido */
        padding: 0 10px; /* Evita rellenos excesivos */
    }
    /*Header*/
    .header-top {
        flex-direction: column;
        /* Columnar en pantallas pequeñas */
        align-items: center;
        gap: 2px;
        /* Reducir espacio entre elementos */
        padding: 10px 5px;
        /* Compactar el header */
    }

    .logo img {
        max-width: 120px;
        /* Reducir el tamaño del logo */
        height: auto;
    }

    .search-bar {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 5px;
        /* Reducir el espacio entre input y botón */
    }

    .search-bar input {
        width: 90%;
        padding: 8px;
        /* Reducir padding */
        font-size: 0.9rem;
        /* Reducir tamaño de fuente */
    }

    .search-bar button {
        width: 20%;
        padding: 8px;
        /* Botón más compacto */
        font-size: 0.9rem;
    }

    .language {
        display: flex;
        align-items: center;
        font-size: 0.8rem;
        /* Texto más pequeño */
    }

    .language span {
        margin-right: 3px;
        /* Ajustar espacio entre ícono y texto */
    }

    .user-options {
        display: none;
        /* Seguir ocultando en móviles */
    }

    /* Para compactar el banner */
    .banner {
        padding: 8px;
        font-size: 1.2rem;
        /* Texto más compacto */
    }

    /* Galería de imágenes */
    .image-gallery {
        flex-direction: column;
        align-items: center;
    }

    .main-image {
        width: 100%;
        /* Adaptar al ancho de la pantalla */
        height: auto;
        /* Mantener proporción */
        border-radius: 8px;
        /* Ajustar bordes */
    }

    .thumbnails {
        flex-direction: row;
        /* Miniaturas en fila */
        overflow-x: auto;
        /* Habilitar desplazamiento horizontal */
        gap: 5px;
        max-width: 100%;
        /* Asegurar que no desborde */
    }

    .thumbnails img {
        width: 33px;
        /* Tamaño reducido para móviles */
        height: 33px;
        border-radius: 4px;
        /* Ajuste visual */
    }

    /* Detalles */
    .details {
        padding: 15px;
        /* Reducir padding */
        text-align: center;
        /* Centrar texto */
    }

    .details h1 {
        font-size: 1.8rem;
        /* Ajustar tamaño de título */
    }

    .details .price {
        font-size: 1.4rem;
        margin-bottom: 10px;
    }

    .badges {
        justify-content: center;
        /* Centrar badges */
        flex-wrap: wrap;
        /* Permitir múltiples filas */
        gap: 10px;
    }

    /* Botones */
    .actions {
        display: flex;
        justify-content: center;
    }

    .action-button {
        width: 80%;
        /* Botón más ancho en móviles */
    }

    /* Ajuste para todas las secciones en móvil */
    .section {
        padding: 10px; /* Reducir padding */
        margin-bottom: 15px; /* Reducir espacio entre secciones */
    }
    
    /* Sección de características */
    .section ul {
        padding-left: 20px;
        /* Agregar espacio a la lista */
        text-align: left;
        /* Alinear texto a la izquierda */
    }

    .section h2 {
        font-size: 1.5rem;
        /* Ajustar tamaño de encabezado */
    }

    /* Ajustes para el banner en móvil */
    .banner {
        padding: 10px;
        /* Reducir el padding para hacerlo más angosto */
        margin: 10px auto;
        /* Reducir el margen */
        border-radius: 5px;
        /* Bordes ligeramente más pequeños */
        max-width: 90%;
        /* Ajustar el ancho al 90% de la pantalla */
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
        /* Reducir la sombra */
    }

    .banner h2 {
        font-size: 1.5rem;
        /* Reducir el tamaño de fuente */
        line-height: 1.2;
        /* Ajustar la altura de línea */
    }

    .banner p {
        font-size: 1rem;
        /* Reducir el tamaño del texto secundario */
        line-height: 1.3;
        /* Ajustar la altura de línea */
    }

    /* ---------------------------------------------------------------------------------*/
    /* Sección adicional */
    /* ---------------------------------------------------------------------------------*/
    .additional-section {
        display: flex;
        /* Cambiar grid a flex */
        flex-direction: column;
        /* Disponer los elementos en una columna */
        gap: 20px;
        /* Reducir espacio entre bloques */
        /* padding: 10px;*/
        /* Reducir padding */
        margin: 0 auto;
        /* Centrar la sección */
        max-width: 100%;
        /* Asegurar que no desborde */
    }

    .additional-section>div {
        width: 100%;
        /* Cada bloque ocupa todo el ancho */
        padding: 10px;
        /* Reducir padding interno */
        box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
        /* Ajustar sombra */
        border-radius: 8px;
        /* Bordes más suaves */
    }

    .detail-section h3 {
        font-size: 1.3rem;
        /* Reducir tamaño del título */
        margin-bottom: 10px;
        /* Reducir margen inferior */
        display: flex;
        align-items: center;
        gap: 5px;
        /* Espacio entre ícono y texto */
    }

    .detail-section ul {
        padding-left: 15px;
        /* Ajustar espaciado interno */
        font-size: 0.9rem;
        /* Reducir tamaño de fuente */
    }

    .location iframe {
        height: 200px;
        /* Reducir altura del mapa */
        border-radius: 5px;
    }

    .location {
        margin: 15px 0;
        padding: 10px;
        box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
        /* Ajustar sombra */
    }

    /* ---------------------------------------------------------------------------------*/
    /* Footer */
    /* ---------------------------------------------------------------------------------*/
    .footer-content {
        display: flex;
        flex-direction: column;
        /* Cambiar a columna */
        align-items: center;
        text-align: center;
        /* Centrar texto en móviles */
        gap: 20px;
    }

    .footer-section {
        min-width: auto;
        /* Asegura que el ancho se ajuste */
        text-align: center;
        margin-bottom: 20px;
        /* Espacio entre secciones */
    }

    .social-media {
        align-items: center;
    }

    .footer-section h4 {
        font-size: 1.1rem;
        /* Reducir tamaño del título */
    }

    .footer-section p,
    .footer-section a {
        font-size: 0.85rem;
        /* Reducir texto */
    }

    .footer-bottom {
        font-size: 0.8rem;
        /* Reducir texto de la parte inferior */
    }
}