/* General */
    body {
        background-color: #18202C;
        color: white;
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        min-height: 100vh;
    }

    /* Contenedor principal */
    .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #212A36;
        border-radius: 10px;
        padding: 20px;
        max-width: 1200px;
        width: 90%;
        gap: 20px;
        margin-top: 20px;
    }

    /* Título (h2) */
    h2 {
        text-align: center; /* Centrar texto horizontalmente */
        margin: 20px 0;
        font-size: 2rem;
        font-weight: bold;
        color: #FFFFFF;
    }

    /* Navbar */
    .navbar {
        position: absolute;
        top: 0;
        width: 90%;
        max-width: 1200px;
        display: flex;
        justify-content: flex-end;
        margin: 0 auto;
        padding: 10px 0;
        z-index: 1000;
    }

    .nav-container {
        display: flex;
        justify-content: flex-end;
        gap: 15px;
    }

    .nav-link {
        color: #FFFFFF;
        text-decoration: none;
        font-size: 18px;
        font-weight: bold;
        padding: 10px 15px;
        transition: color 0.3s ease;
    }

    .nav-link:hover {
        color: #C3317D;
    }

    /* Botones */
    .btn-back {
        background-color: #C3317D;
        color: #FFFFFF;
        padding: 10px 20px;
        text-align: center;
        text-decoration: none;
        font-weight: bold;
        transition: background-color 0.3s ease;
        display: inline-block;
    }

    .btn-back:hover {
        background-color: #000000;
        color: #FFFFFF;
    }

    /* Header */
    .header {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        width: 100%;
        justify-content: center;
    }

  .header-column {
    flex: 1;
    display: flex;
    flex-direction: column; /* Apilar elementos verticalmente */
    justify-content: flex-start; /* Alinear los elementos al inicio (parte superior) */
    align-items: center; /* Centrar horizontalmente */
    height: auto; /* Ajustar altura según contenido */
    max-width: auto; /* Mantener ancho máximo */
    background-color: #18202C; /* Color de fondo */
    border-radius: 10px; /* Bordes redondeados */
    padding: 15px; /* Relleno interno */
    box-sizing: border-box; /* Incluir borde y relleno en las dimensiones */
    position: relative; /* Por si necesitas posicionar algo relativo al contenedor */
}

.header img {
    max-width: 100%; /* Imagen ocupa el ancho disponible */
    max-height: 500px; /* Limitar altura máxima */
    height: auto; /* Mantener proporciones */
    object-fit: contain; /* Ajustar la imagen sin recortarla */
    background-color: #212A36; /* Fondo para imágenes faltantes */
    border-radius: 10px; /* Bordes redondeados */
    margin: 0; /* Eliminar margen */
    padding: 0; /* Eliminar relleno */
    align-self: center; /* Centrar horizontalmente en el contenedor */
}


    .details {
        text-align: left;
        width: 100%;
        color: #FFFFFF;
    }

    /* Galería de imágenes */
    .images {
        width: 100%;
    }

    .images h3 {
        text-align: center;
        margin-bottom: 15px;
    }

    .images img {
        width: 100%;
        max-width: 200px;
        height: auto;
        margin: 10px;
        border-radius: 10px;
        object-fit: cover;
    }

    /* Media Queries */
    @media (max-width: 1024px) {
        .navbar {
            width: 90%;
            max-width: 1200px;
        }

        .nav-container {
            gap: 10px;
            margin-right: 5%;
        }

        .nav-link {
            font-size: 16px;
            padding: 8px 12px;
        }

        .btn-back {
            width: 100%;
        }
    }

    @media (max-width: 768px) {
        .navbar {
            width: 90%;
            max-width: 1200px;
        }

        .nav-container {
            flex-direction: row;
            flex-wrap: nowrap;
            gap: 5px;
            margin-right: 5%;
        }

        .nav-link {
            font-size: 14px;
            padding: 5px 10px;
        }

        .header {
            flex-direction: column;
            align-items: center;
            gap: 20px;
            width: 95%;
        }

        .header-column {
            width: 95%;
            text-align: center;
            height: auto; /* Ajustar altura para pantallas pequeñas */
        }

        .btn-back {
            text-align: center;
            width: auto;
            margin: 0 auto;
        }

        .header img {
            max-width: 80%;
            height: auto;
            margin: 0 auto;
        }

        .details {
            padding: 8px;
            word-wrap: break-word;
        }

        .container {
            padding: 10px;
        }
    }