/* Seleccionamos el contenedor que creamos antes */
#vista-detalle-container {
    display: none; /* Se activa por JS */
    width: 100%;
    background-color: #ffffff;
    
    /* Usamos la misma altura que tu variable de header */
    /* Añadimos un pequeño extra (96px + 20px) para que el título respire */
    padding-top: calc(96px + 20px); 
    
    min-height: 100vh;
    position: relative;
    z-index: 10;
}

#iframe-detalle {
    width: 100%;
    /* Altura dinámica: total de pantalla menos el header */
    height: calc(100vh - 116px); 
    border: none;
    display: block;
}

/* Estilo para el botón de volver que combine con tu marca */
.btn-volver {
    display: inline-block;
    margin: 0 0 20px 20px;
    padding: 10px 20px;
    background-color: #173E68; /* Tu --primary-blue */
    color: #FFD700;           /* Tu --accent-gold */
    border: none;
    border-radius: 4px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s;
}

.btn-volver:hover {
    transform: translateX(-5px);
    background-color: #2E5C88;
}