@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');

:root {
    --morado: #5a2a83;
    --morado-claro: #7d4bbc;
    --naranja: #ffa500;
    --blanco: #ffffff;
}

body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: linear-gradient(135deg, #fef6ff, #fff8f0); /* Fondo suave combinado */
    color: var(--morado);
}

header {
    background-color: var(--blanco);
    box-shadow: 0 2px 5px rgba(90, 42, 131, 0.2);
}

.imagen-detalle {
    border-radius: 1rem;
    max-width: 100%;
    height: auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.navbar-brand img {
    height: 70px;
    transition: height 0.3s ease;
}

    .navbar-brand img:hover {
        height: 75px;
    }

.nav-link {
    color: var(--morado) !important;
    font-weight: 600;
}

    .nav-link:hover {
        color: var(--morado-claro) !important;
    }

/* Contenedor principal detalles */
.detalle {
    max-width: 1100px;
    margin: 3rem auto;
    background: var(--blanco);
    padding: 2.5rem;
    border-radius: 1rem;
    box-shadow: 0 8px 20px rgba(90, 42, 131, 0.1);
    display: flex;
    gap: 3rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

    /* Imagen */
    .detalle .imagen {
        flex: 1 1 380px;
        max-width: 400px;
        border-radius: 1rem;
        box-shadow: 0 8px 25px rgba(90, 42, 131, 0.15);
        overflow: hidden;
    }

        .detalle .imagen img {
            width: 100%;
            height: auto;
            display: block;
            object-fit: cover;
        }

    /* Info */
    .detalle .info {
        flex: 1 1 500px;
        color: var(--morado);
    }

        .detalle .info h1 {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
        }

        .detalle .info h5 {
            font-weight: 400;
            color: #555;
            margin-bottom: 1.5rem;
        }

        /* Lista de detalles */
        .detalle .info ul {
            list-style: none;
            padding: 0;
            margin-bottom: 2rem;
        }

            .detalle .info ul li {
                margin-bottom: 1rem;
                font-size: 1.05rem;
                display: flex;
                align-items: center;
                gap: 0.7rem;
                color: #444;
            }

                .detalle .info ul li strong {
                    min-width: 110px;
                    color: var(--morado);
                }

/* Mapa */
.mapa-container {
    width: 100%;
    height: 300px;
    border: 2px solid var(--morado-claro);
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(90, 42, 131, 0.12);
    margin-bottom: 2rem;
}

    .mapa-container iframe {
        width: 100%;
        height: 100%;
        border: 0;
    }

/* Botones */
.detalle .btn-group {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.btn-outline-success,
.btn-outline-primary {
    font-weight: 600;
    border-radius: 0.5rem;
    min-width: 140px;
    padding: 0.6rem 1.2rem;
    transition: background-color 0.3s ease, color 0.3s ease;
}

    .btn-outline-success:hover {
        background-color: #28a745;
        color: #fff;
    }

    .btn-outline-primary:hover {
        background-color: var(--morado);
        color: #fff;
    }

/* Responsive */
@media (max-width: 1000px) {
    .detalle {
        flex-direction: column;
        max-width: 90%;
        padding: 1.5rem;
    }

        .detalle .imagen,
        .detalle .info {
            max-width: 100%;
            flex: 1 1 100%;
        }

            .detalle .info h1 {
                font-size: 2rem;
            }

            .detalle .info h5 {
                font-size: 1rem;
            }
}
/* Footer */
footer {
    background-color: var(--morado);
    color: var(--blanco);
    padding-top: 1rem;
    padding-bottom: 1rem;
}